Buffer

Basic HTML Code Guide

Elvis Elvis

Learning about HTML code can seem difficult — but, it’s not. Start with the basics. Code your first tag, then check out the results. Then do another and another. Once you get see the results of your work you’ll become more comfortable with the HTML language.


Header Section Tags

<html> … </html>

The <html> tag must be the first tag that appears in a HTML coded file.

<html> tells the Web browser that this is the beginning of an HTML document and the </html> tag tells the browser that the HTML has ended.

Tags with slash “/” represent a closing tag.

<head> … </head>

The <head> and </head> tags defines that part of the document containing information about the page. This section includes the TITLE of the document.

<title> … </title>

This tag surrounds the TITLE of your document.

Note: The TITLE appears at the top of your browser window. For example, look at the top of this page.


Tags In The Head Section

Head section structure of your HTML code files:

<html><head><title> … </title></head>

Body Section

</html>

Basic HTML Code Guide


Tags In The Body Section

This is the area where your creativity with HTML code creativity can distinguish you from other homepages on the Web. Experiment with the different tags that I’ll show you and enjoy.

<body> … </body>

The <body> tag usually comes immediately after the </head> tag that ended your HEAD section… but, the </body> tag comes before the </html> tag at the end of the document.

<hn> … </hn>

These tags are used to create headings. There are six different sizes with <h1> being the largest and <h6> being the smallest.

<h2>Joe’s Homepage</h2>

<p>

This tag represents the end of one paragraph and the beginning of the next one. There is supposed to be a closing tag </p> tag.

Also, keep in mind is that browsers cannot indent the first word of a paragraph, so this tag leaves a blank space between two paragraphs.

Note, however, multiple <p> tags will NOT couse multiple blank lines.

<br>

This tag indicates a line break. It does not have a closing tag.

The optional argument CLEAR in conjunction with aligned images is useful. I.e.,

<IMG src=”filename” ALIGN=right>

The text that is to be next to the image…

<br CLEAR=”RIGHT”>

… after a right-aligned image.

<hr>

This is the horizontal rule tag. It tells the browser to insert a paragraph break into your content with a line separating the paragraphs.

The browser will automatically adjust the line to fill the witdth of the display window.

A default grey line is created with just the <hr> tag. Want to make it fancier?

You can make the line solid black with the tag <hr NOSHADE>.

A SIZE and WIDTH option can be added to the <hr NOSHADE>

tag.

The thickness of a line is specified in this format SIZE=”n” as in…

<hr SIZE=”n”>.

The width is represented by WIDTH=”nn%” as in…

<HR WIDTH=”nn%”>.

<i> … </i>

The text between these tags will be in italics. The <em> … </em> tag also makes the text look italic.

<b> … </b>

The text between these tags will be bold.

The <strong> … </strong> tag usually does the same thing.


Attributes

SIZE and WIDTH are known as attributes. They are added to a tag to give your content a bit more life.

The ALIGN attribute is used quite a bit too. The values for this attribute are “right”, “left”, and “center”.

Many tags can use with the ALIGN attribute, such as the <p>, <hr>, <hx> … </hx>, and the <img src> tags.

<blockquote> … </blockquote>

This tag is used to distinguish material from an external work. The text is shown as a papargraph with wider right and left margins.

<address> … </address>

The address tag is used for signatures, addresses, and other authorship information usually appearing at the top or bottom of the page.

The text between the address tags is shown on-line in italics.

<address>

Prepared by: Joe Smith

</address>


Your HTML code can start off simple but then with practice it’ll be a snap to design fantastic looking web pages. Don’t worry about learning everything at once — you’ll get there. Your visitors will love it and you will love it when you begin building nice looking web pages!