HTML Tutorial

Introduction to HTML

HTML is an abbreviation for hypertext markup language, the fundamental language of the web. HTML is the predominant markup languages for web pages and allows webmasters to describe the layout and structure of a document using tools such as paragraphs, lists, and links.

The coding structure of HTML comes in the form of “tags,” which are enclosed in angle brackets.

HTML can also be used in conjunction with other scripting languages such as Javascript or PHP which can affect the presentation to the user and the behavior of a web browser.

URLs and filenames containing HTML usually have the file extension of .htm or .html.

HTML was first conceptualized in 1989 by Tim Berners-Lee and Robert Cailliau. Both hypoethesized and created proposals for an Internet-based hypertext system which would be similar to HTML. In 1990, the two would create the WorldWideWeb (W3) project.

It wasn’t until late 1991 that the first functional description of HTML was made publicly available. The document was known as HTML Tags. It contained 22 elements which would later serve as the basis for the HTML we know today. Thirteen of the original tags described in HTML Tags would be carried on to HTML 4.

HTML+ was formed in 1993, which standardized existent features such as tables.

By 1996, HTML was maintained and standardized by the World Wide Web Consortium (W3C). The W3C provides the coding standards we use in HTML today.

Your First HTML Page

It’s time to create our first web page in HTML!

First, we need to create the file. Usually you can just create a text document to start writing HTML. For example, we can just write HTML in Notepad. Once you’re done editing the HTML, you can rename the Notepad text file from a “.txt” file extension to “.htm” or “.html” so your computer or web server recognize it as an HTML document.

Here’s the basic code to create an HTML web document:

<html>
<head>
<title>Your Title Here</title>
</head>
<body>
Content Goes Here
</body>
</html>

This might be a little bit overwhelming at first so let’s break down the above code.

Every HTML tag needs to be opened and closed. For example, if we want to set our page title, we use <title>. Once we set our title, we close off the title tag with </title>.

Anything between opened and closed tags in HTML are the tag’s “content.” The “title” tag defines the title we see in the title bar of our browser. In the example above, the title we would see in our web browser’s title bar would be “Your Title Here” without the quotation marks.

Not all HTML tags need to be open and closed. However, we will cover these later.

We use the <html> tag to denote that we are beginning to use HTML in our document.

The <head> tag defines the “header” of the document. This usually includes any scripts or document definitions that are not actually part of the content of the document such as title tags.

The <body> tag is used to denote that we are finally beginning to structure the content of our web page.

Finally, we end by using the </html> tag to tell the browser we are finished laying out the HTML of our document.

Paragraphs and Line Breaks

Text formatting is an important part of building your web page. It’s necessary to create a presentable web page to your visitors through text formatting.

If you were to simply start writing content inside the <body> and </body> tags, it would not appear properly. If you were to type multiple paragraphs into the “body” tags and use the “enter” or the “return” key to create lines to separate the paragraphs, these line breaks would not appear in your web page.

To remedy this, we can use the “paragraph” tags. The paragraph tags are used as follows:

<p>Paragraph text goes here.</p>

The “paragraph” tags will create the spacing necessary for paragraphs.

Sometimes, the paragraph tags may provide too much spacing — more than we need. If you simply want to create a new line, we can use the “line break” tag:

First line of text.<br>
Second line of text.

It’s important to note that the <br> tag does not have a “closing” tag. The <br> tag is one of the tags in HTML that does not need an open or close tag and just stands by itself.

Text Formatting

Now that we’ve discovered how to create new lines, we want to know how to format our text.

The basic formatting tags are <b> for bold, <i> for italics, and <u> for underlines.

The following code will show you how to use these basic formatting tags:

<b>Bold text</b><br>
<i>Italics text</i><br>
<u>Underlined text</u>

The above code will produce:

Bold text
Italics text
Underlined text

Make sure you open and close each tag!

The <font> Tag

If we want to be able to format our text further, we can use the <font> tag.

The font tag doesn’t simply just open and close. It also contains “attributes,” which allow us to define the size, color, and typeface of the font for the text enclosed inside the font tags.

<font face="Verdana" size="2" color="#0000ff">My text goes here.</font>

The above code will produce:

My text goes here.

Notice that each attribute begins with a name (face, size, and color in this case) followed by an “equals” sign and quotation marks. What’s contained inside the quotation marks is the “value” assigned to the attribute. Never forget to use quotation marks for HTML attributes. You will often find code not using quotation marks, but this is improper coding practice and can result in your document not displaying properly.

The “face” attribute for the <font> tag is the typeface.

The “size” attribute is the font size.

The “color” attribute is the font color. Notice we used a value, “#0000ff.” This is known as a hexadecimal code (or “hex code” for short). Hex codes are used to map out colors by using a code. It’s always a six digit number preceded by a pound (#) sign. #0000ff is the hex code for “blue.” If this is too complicated for you, most browsers will recognize the “blue” color even if you do not use the hex code. For example:

<font face="Verdana" size="2" color="blue">My text goes here.</font>

This code will produce exactly the same result as the previous code.

With “primary” colors such as red and blue, you can get away without using a hex code; however, it’s always best to use hex codes so your web pages display properly across multiple browsers.

Heading Tags

In HTML, there are six “heading” tags used to split documents and articles into sections.

The six heading tags in order of largest to smallest are h1, h2, h3, h4, h5, and h6.

The code for these heading tags are:

<h1>Text [h1]</h1><br>
<h2>Text [h2]</h2><br>
<h3>Text [h3]</h3><br>
<h4>Text [h4]</h4><br>
<h5>Text [h5]</h5><br>
<h6>Text [h6]</h6>

The result would be:

Text [h1]

 

Text [h2]

 

Text [h3]

 

Text [h4]

 

Text [h5]

 

Text [h6]

Experiment these tags to create headlines for your content.

Markus

View more posts from this author