Its been a while, but hopefully you haven’t forgot the previous two articles laying out the basics of building a website. In this article I’ll cover the more advanced basics of building a website, namely the doctype, lists, and email links.
First off is the doctype. The doctype didn’t really exist in the eyes of the World Wide Consortium (W3C) until HTML 4.0. The reason behind defining a doctype is to take your web page out of quirks mode, allowing it to comply with web standards. Quirks mode allows for backwards compatibility, but does not allow you to validate your website code therefore making it not search engine friendly.
I can’t stress it enough, you must use the doctype if you value validating your code. Remember that when you have valid code then search engines such as Google, Yahoo, and Bing like valid code and you’re website will show up if it is valid. The three common doctypes used are listed below.
- Strict, in which deprecated elements are forbidden
- Transitional, in which deprecated elements are allowed
- Frameset, in which mostly only frame related elements are allowed
An example of how to implement the doctype in a page is highlighted below.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd" >
<html lang="en">
<head>
<title><!-- Insert your title here --></title>
</head>
<body>
<!-- Insert your content here -->
</body>
</html>
Whenever you want to make bullet or sequential lists you will want to use the ul (unordered list) or ol (ordered list) tags. The list syntax is similar to table syntax meaning that there are tags located inside the parent tags. For example, when you want to create an unordered list you type out the ul opening and closing parent tags and then insert the li (list item) opening and closing tags inside them. You can add as many li /li tags as needed. When you want an ordered list the only thing that changes is the parent tags. Once you’re done with your list you close the parent tag.
Examples of list implementation are below.
Unordered list:
<ul> <li><!-- Insert your content here --></li> <li><!-- Insert your content here --></li> <li><!-- Insert your content here --></li> <li><!-- Insert your content here --></li> </ul>
Ordered list:
<ol> <li><!-- Insert your content here --></li> <li><!-- Insert your content here --></li> <li><!-- Insert your content here --></li> <li><!-- Insert your content here --></li> </ol>
Ordered lists are numbered by default and can be changed via CSS to Roman Numeral, alphabetical, decimal, etc. You can also change the style of bullets in your unordered lists via CSS. For more ul and ol styles click here.
Assuming you are creating a website to get in touch with people around the world I feel you need to learn to provide an email contact link. The email link uses the ⟨a⟩ tag like a hyperlink. When a user clicks on the email link they’re email program (Microsoft Outlook, Apple Mail, or Mozilla Thunderbird) opens up a new message with the recipient being the person you would like to email. If you would like to include the subject of the email in the email link, then you can add it as well.
An example of email link implementation is below.
Without subject code:
<a href="mailto:info@provoastmedia.com">Email Us!</a>
With subject code:
<a href="mailto:info@provoastmedia.com?subject=An email Subject">Email Us!</a>
Now you know the basics to creating a website using HTML and the next step is to incorporate CSS to style the HTML code. Cascading Style Sheets have greatly improved the web and are a must if you wish to get serious about creating websites. I’ll introduce CSS to you in the next installation of “The Webpage Setup”.
Happy surfing!
