The
Basic HTML Page StructureThis page contains the most important information that you will need to know about html.
HTML is actually relatively simple once you understand the basics described here. Please read this page very carefully and do your best to understand the information. Once you comprehend these basics, everything else about html will probably be fairly easy for you to grasp. You may want to return later to this page for a review.
Hyper is from the Greek word for more than normal, or excessive, as in hypercritical, hypersensitive, and hypertension. Hypertext is text that does more than normal text: not only can you read it, but you can use it for linking.
As I am sure you already know, linking allows the user to connect from one file (or "web page") to another related file with the click of a mouse button. HTML hypertext links are usually blue underlined words. You can also use images as links instead of text, therefore we refer to all types of links as Hyperlinks.
HTML is a special language, or code, that is used to "write" the computer files that allow for linking (and many other things). The way in which HTML code is written, is under the auspices of the Worldwide Web Consortium. It is based on a far more complex "language" called Standard Generalized Markup Language (SGML). HTML has a stricter "brother" called XHTML that is very similar, but has more stringent requirements for writing code.
HTML is a special code that browsers (discussed in the next section) can read. HTML code is written in letters and numbers, using a specific set of 256 of them called the ASCII text character set (pronounced: azz'-key). ASCII text can be understood by almost any computer anywhere. That's why it's used.
Very basic text editing software is used to write this code partly because many of them can only create ASCII text. This prevents you from using the wrong kind of characters. Beginners should use a basic text editor such as Windows Notepad which can be found in the Accessories area of the Windows Programs menu. Mac users, use TextEdit.
The code itself does not use any formatting other than optional indentations used to make the code easier for the coder to read. However, formatting can be applied to what the browser displays by specifying that formatting in the HTML code. HTML provides for this with tags such as headers, emphasis (for italics), strong (for bold), and also by using attributes of tags (additional specifications allowed in many tags).
The code might also indicate the preferred positioning of items relative to the rest of the information on the page or that an image have a 1 pixel border around it. Additional formatting can be done using css, which will be discussed further.
Note, again, that the formatting of the code itself is not relevant. Also, HTML is case insensitive, meaning you can use upper or lower case letters or any combination of the two (this is not so with XHTML which is far stricter).
The text seen in the browser is usually found in the code as text. However, images (and other objects, such as Flash animations) that are displayed in a browser are not to be found in the code. The code can only contain ASCII text. Instead, the location of the image files is referred to in the code in the form of a path to the location of the image file to be displayed.
This is similar to a hyperlink except that the purpose of it is not to open a different html file in the browser when you click on it, but rather to specify what file needs to be shown as a part of the page currently being displayed.
Certain non alpha-numeric characters will be found in the html code, such as the left and right angle brackets used to make html tags < > (also called "less than" and "greater than"). If they are used properly in the code they will not appear in the browser window. If you wanted angle brackets (or other similar characters) to appear in the browser window, they must be represented in the code in the form of what are called special characters.
Browsers usually display html code very similarly, but not identically.
Browsers are computer programs that will display HTML files, read and interpret the HTML code therein, and then present their translation of the code to the viewer in the browser window. A browser is like a television set. A TV will translate electronic signals into text, images and sounds. A browser translates HTML code into text, images, sound and other media.
The different brands and versions of browsers and the different platforms they're used on (for example Windows, Mac, UNIX) don't always interpret the code identically, although they usually come close to it.
Because of these disparities, and because people have different size monitor resolutions and may adjust their browser's window or text size to their liking, HTML code was designed to be flexible and adapt itself to these varying circumstances.
Why not just allow visitors to download a Microsoft Word file, Excel file, or the like if you want them to see your information? It is because not all computers have the software to read those file types. Your visitor would need to have the correct software and for many people in this world Microsoft Office is beyond their budget. Also, html code transfers quickly because it is usually a very small file, much smaller than a comparable MS Word file, for example.
HTML code is universal. It can be read by almost any computer. It requires only browser software in order to be seen. Browsers are available for the three major platforms and many handheld devices. Browsers are usually free.
Browsers have user modifiable display settings (such as text size and font), however most people are not aware that they change those settings. Thus one can be fairly sure that people will be able to see your information more or less as you intended it to be seen.
A markup is similar to the markings that proofreaders of hard copy use to indicate changes that they want to make in the text that they are editing. For example, proofreaders will use "insert carets" (^) with text above it to indicate what they want to insert at that location. They also use this symbol ¶ to indicate where a new paragraph ought to begin.
Similarly, HTML markup indicates to the browser what type of information is being provided to it and the browser will then format and display the information accordingly. Without markups browsers would simply show text with no paragraphs, no headings, no embellishments. Also, no images, video, or Flash could be displayed
In HTML, markups are called tags. The name suggests its purpose: to identify or label an item. The meaning of many of the tags is fairly easy to ascertain. For example, <h2> means a heading of secondary importance, <small> means make the text smaller, <center> means to center, and <p> means to create a new paragraph.
Please note that HTML was designed to designate the type or category of information that is to be shown, not its presentation. Encoding the type or category of information is called semantic encoding, as opposed to presentation encoding, which specifies how to display information. CSS (cascading style sheets) is able to specify presentation particulars far better than HTML. However CSS will not be covered in this series of HTML exercises because you must already know html fairly well in order to use it, it is complicated, and it is not HTML in the strict sense, but it uses HTML to apply its formatting specifications.
Here is a brief overview and history of markup languages.
Tags are always enclosed in what are called <angle brackets>, which are more commonly thought of as the math symbols for "less than" and "greater than". The angle brackets allow browsers that are interpreting the HTML code to readily identify tags and to deal with them differently than normal text.
Tags are almost always in pairs with an opening tag and a closing tag. Between them are the text or other items that they affect. The closing tag looks the same as the opening tag except that it will have a forward slash before its first character.
For example, the following code would cause the word "slant" to be italicized:
<i>slant</i>
Also note that the opening and closing tag and the contents within them are formally referred to as an html element. In addition, opening tags frequently have attributes inside of them that are used to augment their meaning. We will learn about attributes later.
When multiple tags are applied to the same content, the pairs of tags ought to be nested, with one pair inside the other pair. When tags are nested, the rule for determining which closing tag ought to appear first is:
Close the last open tag first.
Analogies:
For example, the following would cause the words between them to appear both bold and italicized. The tags are properly nested. The italics tag is the last open tag, and therefore it is closed before the bold tag:
<b><i>sample words</i></b>
However, the following is not properly nested because the italics tag ought to be closed first because it is the last open tag:
<b><i>this is incorrectly nested</b></i>
(Note that in reality it would usually display properly anyway because html is inherently forgiving of sloppy work, but it is better for you to nest properly because it does make a difference in other situations):
The
Basic HTML Page StructureAll html files (with minor exceptions) are supposed to contain four basic tag pairs that are used to define the structure and name of the document. All assignments submitted for this course must include them.
In the following, these important page structural tag pairs appear in the proper sequence and nesting order. Note, as is always the case, all of the closing tags has a forward slash ( / ) after the first ( < ) angle bracket.
<html> <head> <title> </title> </head> <body> </body> </html>
Code is often written with indentations that reflect the nesting and hierarchical relationships of the tags. This allows for easier reading of the code. Indenting code is optional but you will undoubtedly come to appreciate it.
You will learn in one of the first exercises that the spaces and indentations used in the code are generally not displayed by the browser. This allows for a great deal of freedom in writing the code to allow for easier comprehension of the code.
<html>
<head>
<title>
This will be displayed in the browser's title bar and is used for bookmarks
</title>
</head>
<body>
The page's visible content (and related tags) are
nested within the BODY tags. This is where the
vast majority of a page's text and code is located.
</body>
</html>
There is often special information nested within the HEAD tags. The HEAD sometimes contains JavaScript code and Cascading Style Sheet (CSS) definitions. JavaScript and CSS are beyond the scope of a basic html course, however understanding html is critical to being able to write the code for them.
The text that is put between the TITLE tags will appear in the title bar which is at the very top edge of the browser. The title is also provided as the default name of the page for bookmarking. This page's title is "HTML Basics". You ought to see it in the title bar of your browser window right now.
The contents of the HEAD, other than the TITLE, are not seen by the viewer unless they inspect the page's code. Be forewarned that anyone can inspect a page's code quite easily, as you will soon see. Therefore, don't put anything in your code that you would regret other people seeing.
The BODY tags contain the content that will be visible to the viewer in the browser. The tags themselves are not visible in the browser unless there's an error in the code.
The HTML code is saved as a file using either of these file extensions (suffixes):
.htm
.html
Tags often include optional additional specifications that further define what the tag does. These are called attributes. For example, the IMG tag is used to insert an image on a page. It can include the following attributes, among others:
Most attributes require that a value be specified. An equal sign ( = ) needs to be between the attribute name and its value. The value of the attribute ought to be in quotes, but if there are no spaces in the value, you can get away with leaving them out (not so in XHTML). One of the most common mistakes made is forgetting one of the quote marks; leaving one out causes problems with the display of everything underneath it.
The following shows what the image (IMG) tag would look like using the attributes listed above. (By the way, the IMG tag is one of the few tags that has no closing tag.)
<img src="images/www.jpg" width="127" height="93" vspace="1" hspace="1">
Attributes are kept in the opening tag when there is a closing tag (which is most of the time). You will be using attributes often in the exercises. Measurement units are in pixels.
Congratulations, you have waded through the most difficult part of this course!
Top
© 2008 Dan Hitchcock Vaughan and its licensors. All rights
reserved.
Reviewed Jan 3, 2008