BWD Chapter 11: Getting intimate with HTML
2004-11-21 10:02 - Beginners Web Development
Chapter 11
Getting intimate with HTML
There are a lot of concepts to cover when it comes to HTML. We started with a few important ideas in the last chapter. Some were even complex ideas but they were all important. We need to remember those things over the whole of creation of HTML. Now that we have the extra important framework in place we will resume with some more basic ideas.
Remember tags? They're the funny things that look like this: <head>. There are three very important tags that will be included in every page. (Four really, but the fourth is somewhat more optional, and advanced, so it will come into play later on.) These are: html, head, and body. Every page should contain html and body, and all that follow good practices should have a head. The basic format will begin something like this.
<html> <head> </head> <body> Hello world! </body> </html>
Remember hello world? Here it is again, and another time it comes as a great start. First we see the html tag. The opening and closing html tags should be the first and last things in an html page, everything should go inside them (except that one advanced tag we mentioned before). In this page we have them, and inside the html is a head and a body. The head usually contains things that do not display in the page. In this basic page we actually have nothing in the head. That comes later. Directly after the head, we have the body. This is of course the body of the document, everything in the body shows on the page. In this simple page we just have two words, then we close our body and then the html.
This is the basic format for all HTML pages. What makes the pages exciting is what you put in the head and what you put in the body. First let's discuss <title>. You have probably noticed when you visit a page on the internet that the site's name will show up in the top bar in the window and in the window's button on the system tray. The <title> tag does this. The tag goes in the <head>, remember that is generally where the information about the page that does not display in the body goes. Title is a container tag, everything you put between the <title> and </title> becomes the page title. Bt the way, you can only put text here, no formatting.
So, formatting? Yes, HTML marks up, or formats, the web page. Here's a list of many common html tags. We will eventually learn how to use all of them.
| Tag name | Container or Standalone | Description |
|---|---|---|
| a | C | Anchor. It is used to specify the target and sometimes destination of hyperlinks. The markup it contains will be the area the user can click on to vsit the link. |
| b | C | Bold. Contains text to appear in a bold face. It is better to use the strong tag. |
| body | C | Body. The body of the document, all content do display in the page goes here. Goes inside html tag, preceded by head tag. |
| br | S | Linebreak. Used to stop a line of text, following text (or other markup) will continue on the next line. |
| div | C | Division. No inherent display properties, functions as a handle to apply styles to. Is a block level element, meaning it takes a block of the screen, filling the screens width. Thus it takes an entire line, always starting on a new line and blocking other content from continuing on its last line. |
| em | C | Emphasis. Almost always appears as italics on screen. More semantically meaningful than i. |
| h1 h2 h3 h4 h5 h6 | C | Headers. Level 1 through 6 provide large to small text for the headers. Very useful when implemented properly. Should be used for section headers / titles. |
| head | C | Head. Contains non-display content. Used inside html, before body. Contains title, style, script, and other tags. |
| html | C | HTML. Container for the whole HTML document. Everything goes inside this. |
| i | C | Italic. Contains text to appear in an italic typeface. It is better to use the em tag. |
| li | C/S | List element. Used only in ol and ul tags. Each list element is given a bullet depending on the type of list it is. Can be standalone in HTML, must be (closed) container in XHTML. |
| img | S | Image. Allows an image to be placed in the markup. |
| ol | C | Ordered list. Contains only li tags. Provides bullets with order (digits, letters, roman numerals). |
| p | C | Paragraph. Semantically meaningful way to split blocks of text into groups. Should be used where appropriate instead of br. |
| script | C | Script. Contains program code to be run along with the page it is included in. Usually (and best) placed in the head, but not required. Advanced topic to be covered later. |
| span | C | Spanner. Similar to a div, has no display on its own. Unlike a div it is an inline element, flowing in the same line as text. Creates no linebreaks. |
| style | C | Style. Contains CSS rules to control presentation of document (color, font, etc, etc). Belongs inside the head, but this is not required. Advanced topic to be covered later. |
| table | C | Table. Used to represent tabular data that is laid out in rows and columns. Only contains tr tags (minor exceptions). Not to be used for arbitrary layout. |
| td | C | Tabular data (cell). One cell in a table. Used only in tr tags. |
| title | C | Title. Goes in the head, contains the text that will be the title for the page. A very important tag. |
| tr | C | Table row. Contains cells, splits a table into rows. |
| tt | C | Teletype. Used to display text in a monospace font. |
| ul | C | Unordered list. Contains only li tags, provides bullets with no order (disc, square, etc). |
There we are! This is a limited list, but contains enough to work with, and certainly enough to learn. There are two tags we will be covering separately and in extended detail and one other tag that we will give an introduction to here before we start learning the rest. These are script, style, and table.
Style tags are where we put the information about how a page should look. This is called presentation, while the actual words on the page are called content. There is an important concept called separation of presentation and content which we will cover in detail with this tag. This tag will get its own section because it uses its own language called CSS (Cascading Style Sheets). CSS is a powerful language that can do wonders, but also can be difficult to learn.
The script tag is where we put little programs that go along with the web page. They use their own language as well. In truth more than one language can be used, but by far the most common is javascript, which will also have its own section. Javascript is even more powerful than CSS, but also more difficult.
So, for now don't try to use style or script. You should also avoid table. Especially those of you who already know HTML should avoid tables. And in that case, try to make sure you only use the tags we cover, and in the way that they are described to be best used. Until we are through the chapters relating to HTML, you should avoid external references unless explicitly instructed to view them. You'll be an expert soon!
As we begin to learn HTML, we must start with some advanced topics, to be sure they can be applied to the rest of what we learn. The first has been mentioned before, separation of content and presentation. This means that all the content should be recorded in one spot, and all the presentation elsewhere. We are learning how to define the content with HTML first, and we will then learn to control presentation with style sheets.
Style sheets have a number of advantages, but two are above the rest. These sheets may be defined completely outside of an HTML page, a,d then referenced by the page. This means an entire group of pages may be assigned exactly the same presentation rules, and thus fit together visually with very little work. They can also all be changed at one time. Moreover, a web browser can cache the style sheet. To save internet bandwidth, the sheet is loaded one time, then referenced by all the pages to come. Pages that load quickly instantly become more usable and appear more polished and professional. It is important, though, to apply these styles to meaningful content. So HTML first!
Another important concept is semantic markup. In short, with proper HTML code containing no presentation, what remains is the content. Each and every tag should exist to enrich the content that it is marking up. This directly affects accessibility to both those people who are differently abled, and to computer programs like search engines. Google is known to place emphasis on text contained in headers, and many other important markup tags. For example, we suggested above that em is better than i. This is of course correct only where the semantic meaning of the em tag is correct. Where text is displayed in italics for emphasis, of course the em tag should be used. A screen reader for a blinf user may emphasize the reading by using a higher volume or different pitch, and thus your page is more accessible. Cases where text should be in italics but not for emphasis, e.g. quoting the name of an article, should still use the i tag.
Relax now, for the assault by monster concepts is at an end. We will continue in the next chapter by going into more detail about the tags that we introduced above.
