HTML The Beginning

HTML what?

I suppose you know what HTML is. If not, this is it. The page you’re viewing is what HTML is. HTML stands for HyperText Markup Language. A HTML file (HTML files can have different extensions, most common are .htm and .html) is a plain text file, containing small markup tags. These markup tags tell your browser how to display the page.

Create one of your own

Creating a HTML or web page is not hard at all. Just open a simple text-editor, Windows users can use something like Notepad or UltraEdit, Linux users can use vim, and write the following text:

<html>
<head>
<title>Hello World</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>

Save the file as ‘helloworld.html’ and open the page using your web browser. You will see the text ‘This is my first homepage. This text is bold’ in your browser and the window has ‘Hello World’ as a title.

Example explained

You see how easy that was. HTML is not difficult at all, but previous example might need some explanation:

The first line contains <html>. All those words between < and > are tags. The <html> tag tells your browser that this is the start of an HTML document. Most tags in a HTML document have to be closed. Closing a tag is done by letting the tag precede by a /. So the <html> tag is closed by </html>. The start tag and end tag, plus everything in between is called an HTML element. Everything between the start and end tag is the element content.

The text in the head element, so everything between <head> and </head> is the document header information. This information is not displayed in the browser window. The head element contains data on the coding of your page, the page title (like shown in the example between <title></title> tags), …

The body element contains the document body information and will be displayed in the browser window. Like the ‘This is my first homepage.’ text. The text between <b></b> tags is displayed in bold.

More on elements

HTML elements are not case-sensitive. This means that <b> and <B> are exactly the same. It is however good practice to write all tags in lowercase. In the next generation of HTML pages, called XHTML, all tags must be lowercase.

Tags can also have attributes. The <body> tag can have a bgcolor=”red” attribute. The tag looks like this with the attribute applied: <body bgcolor="red">. This will result in a page with a red background color.

Some basic elements

Headings

There are six different headings in HTML, going from h1, the largest, to h6 the smallest. In code these look like this:

<h1>This is the largest heading</h1>
<h2>This is a smaller heading</h2>
<h6>This is the smallest heading</h3>

Paragraphs

Paragraphs are defined with the <p></p> tags. In code this looks like this:
<p>This is a paragraph</p>

Line breaks

A line break forces the text to continue on the next line. The code for a line break is this: <br>. Notice that there is no closing of the line break tag. This because it is an empty tag.

Character entities

In the HTML code a tag starts with < and ends with >, but how do you display these characters as text, without the browser thinking is it part of a tag. The answer is by using character entities. Instead of writing < to be displayed, use ‘&lt;’ (without the ‘ ‘). This will tell your browser to display a <.

Links

In the previous section, there was a link to an other page, namely a page with more character entities. Such a link is called a hyperlink in HTML. A hyperlink is created in HTML using the anchor tag <a>. The complete code might look something like this:
<a href="http://www.sitemakers.be"> This is a link to the sitemakers web page</a>
The code above will result in a link with the text ‘This is a link to the sitemakers web page’. When you click on that link, you will be redirected to the url specified in the href=”” attribute, in this case “http://www.sitemakers.be”.

You can also create a link to move to an other part of the document. You do this by specifying a target anchor and a link. First the target anchor:
<a name="top">This it the top anchor</a>
The previous code will result in an anchor named ‘top’. This anchor will do nothing on itself, we need a link to move to it. Here is the code:
<a href="#top">Go to the top-anchor</a>
This will display a link with the text ‘Go to the top-anchor’, and when clicked move to the part of the document where the anchor named ‘top’ is located. To test this, click here. This link refers to an anchor defined in the beginning of this document.
Tables

Tables are a little more complex. They don’t consist of only one tag. The <table> tag defines where the table begins and ends. To define a row in the table, you need to use another tag, namely the <tr> tag, which stands for table row. In that row, you can define columns using the <td> tag, which stands for table data. The entire table code like like this:

<table>
<tr>
<td>This is cell 1 of the first row</td>
<td>This is cell 2 of the first row</td>
</tr>
<tr>
<td>This is cell 1 of the second row</td>
<td>This is cell 2 of the second row</td>
</tr>
</table>

Another useful tag for tables is the table header tag <th>. Use it instead of the <td> tag to define a header instead of data.

Lists

There are three types of lists possible in an HTML document.

  • Unordered list
  • Ordered list
  • Definition list

The list above is an unordered list. It is defined by the <ul> tag. Each item in the list must be put between <li> tags. The code looks like this:

<ul>
<li>Unordered list</li>
<li>Ordered list</li>
<li>Definition list</li>
</ul>

An ordered list, looks almost exactly the same, except that the browser numbers the list items. The code is exactly the same as an unordered list, except that you use <ol> instead of <ul>.

Definition lists however, are a bit different. It is actually not even a list of items, but more a list of terms accompanied by the explanation of the term. A definition list starts with the <dl> tag. Nothing unusual about that. Each definition term is put between a <dt> tag and the term’s explanation or definition-list definition between a <dd> tag. The code looks like this then:

<dl>
<dt>Term 1</dt>
<dd>Explanation for term 1</dd>
<dt>Term 2</dt>
<dd>Explanation for term 2</dd>
</dl>

Like you can see, a little different from the other two types of list. Definition lists are not frequently used, so it shouldn’t be a problem.

Images

An image tag <img> is just like the break ruler tag <br> empty. So it has no closing tag. The location of the image is specified in the src=”” attribute. Suppose the viewer can’t display the image, it might be useful to include an alternate text he or she sees instead. This alternate text is defined in the alt=”” attribute. The complete code might look something like this:
<img src="http://www.sitemakers.be/apple.jpg" alt="This is an image of an apple">

Conclusion

You should now know what a HTML document is, and know a few of the basic parts of a web page. Don’t stop learning here. There are 79 different tags in HTML 4.01 (the latest version of HTML as of this writing) all with their own attributes. Together with images and a little inspiration, true art-pieces can be created.

No Responses to “HTML The Beginning”.

Leave a response