More and more people are starting their own websites. Whether it be a blog, an e-commerce site, or a tribute to their pet, learning HTML will help tremendously. Sure, there are those nice little editors, but they cannot do everything. Plus, sometimes you’ll want to tweak that HTML so everything displays properly. In this series, I’ll cover the basics of a webpage, images, tables, lists, styles, and some other topics.
I have setup a base HTML document to show the basics that will be covered in this series. You can find it here. It contains a lot of comments which are ignored by the web browser. An HTML comment starts with “<!–” and ends with “–>”, quotes for clarity.
Tags are special markers that tell the web browser how to display the page. Tags always start with a less than symbol “<” and end with a greater than symbol “>”. There are three types of tags: opening, closing, and self-closing. Closing tags start with “</”. Self-closing tags end with “/>”. Every opening tag should have a closing tag. An HTML document will display everything between the “<body>” opening tag and “</body>” closing tag.
All HTML documents should start with a DOCTYPE tag. This tag tells the browser which version of HTML you are using and determines how it will render the page. There are serveral different doctypes, but for this series, we’ll be using XHTML Strict.
The basic tags are:
This should open immediately after the doctype and close at the very end of the file.
This contains the title of the page, it shows in the tab and/or the titlebar of the browser.
This is a paragraph. Each paragraph will have a bit of whitespace before and after them.
This bolds the text between the opening and closing b tag.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>This is just a sample</title> </head> <body> <p>This is a paragraph.</p> <p><b>This is a bold paragraph.</b></p> <p>There is only <b>one</b> word bold in this paragraph.</p> <p>It is <b>important</b> to close tags in <b>reverse</b> order they were <b>opened.</b></p> </body> </html>