HTML stands for Hyper Text Markup Language. This is the standard for saving information in a file in a way that a web browser can interpret it. HTML is composed of pre-defined TAGs such as "title" for the title of a web page, or "p" for a paragraph of information.
HTML is the "blood" (or data) of the web.
HTML is DATA.... Which means HTML is used to convey information or content. Web Browsers were designed to display this generic information in an understandable manner.
HTML was not intended to provide FORMATTING. Unfortunately, it has been "corrupted" to affect how data is displayed. Web page creation programs like Microsoft Office mangle HTML into an unrecognizable mess (which surprisingly only really works on Microsoft products, like Windows Explorer).
HTML is not a Programming language, though it has some things in common with programming languages, such as a specific syntax (rules on how your "sentences" must be laid out. Again, HTML provides data. Most programming languages provide DATA and control (how to manipulate the data). HTML does not provide this control).
CSS was introduced to separate formatting from content. More on this later.
Tags are "markers" which say when a new section of information is beginning and when that section of information ends.
Some sample tags are:
The Body Tag "encircles" all the content of the web page.
A "Paragraph" contains sentences of English text.
All Tags are denoted by putting a word inside angle brackets:
<tag>
This also marks the "beginning" of the section of information
All "ending" Tags contain a SLASH and then the same name as above :
</tag>
The information relating to the tag is contained between the "opening" of the tag and the "closing" of the tag. For example, the body of an HTML file (i.e., a web page) might be:
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<p> Hello </p>
<!-- A friendly HTML file -->
</body>
</html>
Nesting means: putting one thing inside another. Do you remember those "egg" dolls you had as a child? Matryoshka Doll.
In computer science, this is a way of "relating" information. Information "inside of" or "nested within" other information is deemed to be "owned" or "related to" the nesting structure.
Notice that some tags can appear inside other tags. A paragraph tag can occur nested inside of the body tag. Note: It doesn't make sense to nest a body tag inside a paragraph (e.g., you don't put a book inside a page, but a page inside a book!)
Some tags represent a single "entity" of information. In these cases the tag assumes the role of both the opening and closing tag. To achieve this we use the slash symbol again and place the SLASH at the end of the opening tag. For example (please notice the indentation which makes HTML easier for humans (not computers) to read):
<br/>
<!-- This tag says to put a new line in a web page -->
<!-- But probably shouldn't be used very much (use the paragraph tag instead) -->
<hr/>
<!-- This tag puts a horizontal line across a page -->
Comments are intended for the use of the "designer" or "programmer". They are in high level English and describe the purpose of a piece of code, and/or how the code works. Comments are ignored by the web browser but ARE transmitted as part of the file. This is how certain vendors are able to "corrupt" HTML.
An HTML comment begins with "less than" "exclamation point" "dash" "dash" ( <!-- ) and ends with "dash" "dash" "greater than" ( --> )
<!-- This is a comment -->
<!--
This is a comment
that extends across multiple lines
of the html file
-->
Below is the skeleton of a very simple web page. It shows how the basic tags align with each other and the basic contents of the header and the body of a web page.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Title of Page </title>
<meta name="AUTHOR" content="H. James de St. Germain"/>
</head>
<body>
<!-- Last Updated Fall 2007 -->
<!-- H. James de St. Germain -->
<!-- University of Utah -->
<h1> Welcome to my web page </h1>
</body>
</html>
Tags can have data inside of the < > when the data is directly relevant to the tag itself. Contrast the title tag to the meta tag below:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> CS 1410 - EAE - Lecture 2 </title>
<meta name="AUTHOR" content="H. James de St. Germain"/>
</head>
<body>
<img src="image_file_name.jpg"/>
</body>
</html>
Notice the use of the "" (quotes) around the associated data. For example the name of the meta data is "AUTHOR".
A good web page will not only be easy for the reader (web browser viewer) to read but will also be easy for the designer to maintain and update. The proper use of commenting and indentation are very important!
Notice the use of INDENTATION in all the examples given here. Indentation is used to make HTML more readable to a human. This is important because humans have to maintain the web page (including modifying, fixing, and expanding it).
Some programs will create HTML files for you automatically, Often these web pages are very hard for a human to read. This can cause problems when the creation program doesn't do exactly what the designer wants. When this happens, the designer needs to know how to modify the HTML directly.
Web pages are placed in folders (directories), just like your files on your home computer. In the CADE lab, your web page will be in a folder called "public_html". Any file you place in this folder is "accessible" via the web.
If you want a default web page that will be used whenever a person points their web browser at your directory, you can do so by naming it "index.html".
Warning: if you do not have an index.html file in your folder, then the web browser will see all of your files listed out!
There are many web page building utilities out there (such as Dreamweaver). Often these programs will create non-standard HTML (e.g., Microsoft Word). Because it is important to know what is actually happening when an HTML file is processed by a browser, we will be writing all of our web pages "by hand".
All of your web pages must have "world" read/access properties. This can sometimes be difficult to specify on a Windows box, but we will show you how. If you find that everything "should" be working, and it is not, check your permissions and then talk to a TA.
Caching is a browsers (and web servers) ability to make web performance better. In other words, a local (and sometimes old) copy of the the web page is used, rather than looking up a modified web page. Sometimes you will update your web page, and only "see" your old web page. In this case, you must "refresh" your browser and sometimes "wait" for 30 seconds or so.
Tables are often used in web pages to "format" data. This is old fashioned and frowned upon (CSS is the new way).
Tables should be used to store tabular information. A Table consists of rows and columns. The tags are "table", "tr" (table row), "th" (table header), and "td" (table data). Below is a simple table:
| Professor |
Evaluation |
|---|---|
| Jim |
Cool |
| Peter |
Super Cool |
<table border="1">
<tr>
<th> <p> Professor </p> </th>
<th> <p> Evaluation </p> </th>
</tr>
<tr>
<td> <p> Jim </p> </td>
<td> <p> Cool </p> </td>
</tr>
<tr>
<td> <p> Peter </p> </td>
<td> <p> Super Cool</p> </td>
</tr>
</table>
For more details on HTML, the web is filled with references. Here are a few: