HTML Tutorials II :: Web Standards and a Basic Tag List

In this second installment of our HTML tutorials we will be covering web standards as well as provide a basic tag list to help get you started. But first, lets do something fun, and add some color to your page.

1. Open up your page from the previous project. (Location from last tutorial is C://html-tutorial/hello-world.html

2. Select File » Save As » Save as¹ hello-world-with-color.html

3. Find the <body> tag and change it so that it looks like the following: (one line)
<body style="background:lightblue;color:purple;text-align:center;">

That’s it, all that’s left is to save (ctrl-s) it and view in your browser (see lesson one for info on how to do this).

Ok, let’s review. First we created a new file (hello-world-with-color.html), then we modified the <body> tag, adding a property named style. Properties are used to change how the browser renders (or displays) the tag. Properties include setting an id or a class to identify tags. Or, take the style property we added , this gives the browser styling information: like color, or font type, or alignment.

This tutorial won’t cover styling in much detail, I’ll save that for the CSS (Cascading Style Sheets) tutorial. However, we will use properties frequently.

Ok, Web Standards. These are a set of rules that you must (or at least should) follow for web design. Currently, there are 2 primary types of valid markup (the HTML): XHTML 1.0, and XHTML 1.1. XHTML stands for eXtensible Hyper Text Markup Language, which is a blend of XML (more on XML some other time) and HTML and is much more strict than the original HTML. XHTML 1.0 comes in 3 basic flavors: XHTML Strict, XHTML Transitional, and XHTML Frameset. Transitional is intended to bridge the gap between HTML and XHTML, while Strict is full-fledged XHMTL. Frameset is an ability to still use frames (don’t worry about these, no one uses them anymore). I personally use XHTML Transitional, so thats what we’ll do in this course. XHTML 1.1 is even stricter than XHMTL Strict.

So why bother with all these rules? Who makes them up? Do we even need them?

First of all, everything needs structure lest it fall into decay and chaos, that’s why God created the world with order and why we model Him in our day to day life, whether we realize it or not. If there was no regulation, then the internet would not be like it is today.

Believe it or not there is a group that makes up the internet standards, the World Wide Web Consortium (or W3C). This is a non corporate owned (although corporations are represented) organization that develops web standards.

WE DO NEED WEB STANDARDS!!! If we didn’t have them, then how would the ones who created the web browsers know what to do? Or how would designers know what to put on their web pages? It would be utterly impossible.

Ok, here’s a basic tag list (with closing tags):


TAG USAGE DESCRIPTION
<br /> In the body tag The enter key has no effect in the HTML, use the <br /> tag
<a></a> In the body tag Inserts a hyperlink, the href property specifies the location
<i></i> In the body tag Inserts italics
<b></b> In the body tag Makes the containing text bold
<div></div> In the body tag Sets a “division”, this does nothing in itself, but it is very important. I will cover this in detail in the CSS tutorial
<meta></meta> In the head tag Used to define the webpage to search engines among other things. I’ll devote a lesson on this later
<blockquote></blockquote> In the body tag Used to “indent” a portion of the text
<embed></embed> In the body tag Used to embed media, such as
SW Flash or MS Silverlight
<img></img> In the body tag Used to insert an image into the page, use the src property to define the location

Obviously this isn’t an entire tag list. Also, many of these tags have many properties that I have not covered. If you have any questions on these tags, feel free to comment your question and one of us will get back to you.

Once again, thanks for tuning in. Next time, I’ll be covering hyperlinks and lists.


¹ Once you do this, make sure that you are editing the new file ( hello-world-with-color.html), otherwise you’ll find yourself overwriting your old file!
Advertisements

One Response to HTML Tutorials II :: Web Standards and a Basic Tag List

  1. Rodeo4Christ says:

    Another great one, Jeff! You’re teaching me a lot. 😀

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: