What is HTML

What does HTML even stand for anyhow? HTML stands for Hyper Text Markup Language. HTML is not a web programming language like PHP, ASP, or Ruby on Rails, it is a markup language. HTML uses elements to describe web pages. These elements are made up of tags.

HTML Tags

  • HTML Tags are keywords surrounded in angled brackets like: <tag>
  • HTML tags usually come in pairs, for example: <start tag> and <ending tag>
  • The first tag is called the start tag and the second tag is called the ending tag. Though, alternative forms of these titles exist, they can commonly be referred to as starting and closing tags, beginning and ending tags, or opening and closing tags.

What use is HTML?

HTML is the language that web browsers, such as Mozilla Firefox, Google Chrome, Apple’s Safari, and Microsoft’s Internet Explorer, read and intemperate to display a web page. Every time you visit a website, your internet browser is looking at the HTML code on that web page and translating it into something you can log onto, view images with, and doing all of those nifty things that web pages do!

How Do We “code” HTML?

You can “code” HTML with something as simple as Microsoft’s Notepad or Apple’s Textedit. You can also use more advanced programs such as Adobe Dreamweaver, Netbeans, or other programs like these.

Writing HTML

If you are using Textedit or Notepad, you need to be sure that you can modify file extensions from .txt to either .html or .htm, they are two of the same. Note: The file extension .htm is loitering around from the days when you could only have a three-character file extension; there is no difference between .htm and .html.

HTML Syntax

Generally, you’ll have something like the following:

<start tag>Text</closing tag>

This is the very basic syntax of HTML. There are, however, more sophisticated ways of integrating HTML, CSS, and Server-Side Programming Languages that we will discuss in later articles.

Common HTML Elements

Here are some very common HTML elements that we will use when creating a web page.

HTML Paragraphs

This element will define a paragraph within a web page.

<p>This is a Paragraph</p>
<p>This is another Paragraph</p>

Heading Elements

<h1>This is a giant heading</h1>
<h2>This is a big heading</h2>
<h3>This is a medium heading</h3>
<h4>This is a small heading</h4>
<h5>This is a smaller heading</h5>
<h6>This is the smallest heading</h6>

If you try these heading tags you’ll see how they differ in size and font-weight. Note: you can specify the way you want your heading tags to look via CSS. See Basics of CSS for more details.

Links

That link I just made, how was that done? Well, it’s very easy actually! See below:

<a href="link address">click here</a> This is a link
<a href="http://www.atomicpages.net">AtomicPages Hosting!</a>

When done properly, we should see the following: AtomicPages Hosting. Using the same code as above, this will allow us to link to other pages, whether within or outside of the web page. Notice how the link is a different color and when we roll over it with our mouse pointer, the link ceases to be underlined. This is specifically put in place by web designers to let users know of the links existence. It would be useless if a users didn’t know a link was embedded somewhere within the text!

HTML Images

An Image is a digital graphic file such as a .gif, .jpg, .png, .bmp, etc.. Generally when making a web page, we’ll use .gif, .jpg, or .png files to be sure everyone is able to view these images on the web page. How do you put an image on our webpage? The solution is very simple! Please see the HTML code below:

<img src="image url" width="100" height="100" alt="" />
<!--This is an Image-->
<img src="images/picture.jpg" width="100" height="100" alt="" />

Note: the image URL used in the second example is called a relative link, we will be covering the differences between absolute (http://etc..) and relative links later on.

The image element we can see is unique because there is only an opening tag and no “real” closing tag. This is known as an empty element and is used with only certain tags such as image tags, link tags, and meta tags.

Applying this information image tags we can embed an image such as… flower into our web page with ease!

These are the absolute basics of (X)HTML that will help you on your way to creating a web page of your own one day! Stay posted for more HTML tutorials in the near future!