Basic HTML

So, you've signed up for a web hoster and now you're ready to build your first html page. For the most part, HTML and XHTML is made up of four primary parts. The Document Type Declaration, the html element, the head element, and the body element. Here's a example below.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>My First HTML Page</title>
</head>
<body bgcolor='000000'>
<font face='arial' size='1' color='ffffff'>
This is my first page!
</body>
</html>

Click here for an example of the code above

• The Document Type Declaration otherwise known as the DTD, is used to specify what kind of language you are using to make the site in. In this case, it's HTML version 4.0. Other languages include XHTML and XML.

• The html element is used to specify that the document is html and is used in both html and xhtml. Attributes that belong under html element are lang and dir which represent the language and the direction. The language is specified using two-character codes, english being EN. The direction is used for the direction in which the text is to be read whether it be ltr (left to right) or rtl (right to left).

• The head element includes the items of a page that aren't included on the page. Ok, that sounds a little confusing. For example the title is under the head element. The title gives a page it's name on the top of the browser. If you don't give the site a title, you'll only see the site address. Meta tags are also listed under the head as well as any style and script stuff. Inside this element is also the link element that connects link style sheets to the page, but don't worry about this yet.

• The body element includes everything else that you want to put on your page. Colors, backgrounds, font colors, and etc. Inside the body element, you can use the attributes for bgcolor, text, background, alink, vlink, and link. Bgcolor uses hexadecimal codes to change the background color. The background attribute uses a url address to incorporate a picture background. The text attribute allows you to change the text color. The link attribute allows you change link colors. The alink attribute allows you to change the color of active links when you roll over them. The vlink attribute allows you to change the color of the visited link. After you finish with the body element, you can start typing in the words you want on your site. Remember to close your tags every time unless the tags are empty.

• A couple reminders and things you might not know: Here's the breakdown of a piece of html: <body bgcolor='000000'> The body part is called the element. The bgcolor part is called the attribute and the 000000 is called the value. Values should be encased with either a single quote (') or a double quote (") Elements are either empty or closed. Closed elements like <html> have closing tags like </html> Empty tags like <br> don't. Remember that while html doesn't discriminate against case-sensitivity, XML and XHTML do. HTML allows you to type in both uppercase letters and lowercase letters or both at the same time. XML lets you use both uppercase and lowercase, but lowercase has different effects than uppercase. In XHTML, you can only use lowercase.

Back