The Basics of HTML

HTML the Language of the Web

• So what does a web browser (client software) do with a file it receives from a web server (server software)? Does it just display it to the human user as is?
• The answer is yes and no. Actually, in some cases, the web browser will display a document exactly the way it receives it from the web server. For example, if the document requested is an image, the web browser will display it directly. Similarly, plain text files will be displayed just as they are sent.
• However, if the document is an HTML document, the web browser will "interpret" the HTML and display it according to the instructions contained within the HTML code.
• Well, what is HTML code and why must it be interpreted?
• HTML (Hyper Text Markup Language) is a very simple language used to "describe" the logical struture of a document.

Is HTML a Programming Language?
Actually, though HTML is often called a programming language it is really not. Programming languages are 'Turing-complete', or 'computable'. That is, programming languages can be used to compute something such as the square root of pi or some other such task. Typically programming languages use conditional branches and loops and operate on data contained in abstract data structures. HTML is much easier than all of that. HTML is simply a 'markup language' used to define a logical structure rather than compute anything. It is sort've a semantic issue, but it is one which you should officially be aware of.

• For example, it can describe which text the browser should emphasize, which text should be considered body text versus header text, and so forth.
• The beauty of HTML of course is that it is generic enough that it can be read and interpreted by a web browser running on any machine or operating system. This is because it only focusss on describing the logical nature of the document, not on the specific style. The web browser is responsibe for adding style. For instance emphasized text might be bolded in one browser and italicized in another. it is up to the browser to decide.
• The language itself is fairly simple and follows a few important standards.
• Firstly, document description is defined by "HTML tags" that are instructions embedded within a less-than (<) and a greater-than (>) sign. To begin formatting, you specify a format type within the < and the >. Most tags in HTML are ended with a similar tag with a slash in it to specify an end to the formatting. For example, to emphasize some text, you would use the following HTML code:
  
  this text is not bold <EM>this text is bold</EM> this text is not bold
  
• It is important to note that the formatting codes within an HTML tag are case-insensitive. Thus, the following two versions of the bold tag would both be understood by a web browser:
  
  <em>this text is bold</em> this text is not <EM>this text is bold</EM>
  
• You can also compound formatting styles together in HTML. However, you should be very careful to "nest" your code correctly. For example, the following HTML code shows correct and incorrect nesting:
  
  

  <CENTER><EM>this text is bolded and centered correctly</EM></CENTER> <EM><CENTER>this text is bolded and centered incorrectly</EM></CENTER>



• In the incorrect version, notice that the bold tag was closed before the center tag, even though the bold tag was opened first. The general rule is that tags on the inside should be closed before tags on the outside.
• Finally, HTML tags can not only define a formatting option, they can also define attributes to those options as well. To do so, you specify an attribute and an attribute value within the HTML tag. For example, the following tag creates a heading style aligned to the left:
  
  

  <H2 ALIGN = "LEFT">this text has a heading level two style and is aligned to the left </H2>



• There are a few things to note about attributes however. First, it is not necessary to enclose attribute values within quotes unless white space is included in the value. Secondly, it is not necessary to have a space before or after the equal sign that matches an attribute to its value. Finally, when you close an HTML tag with an attribute, you should not include attribute information in the closing.
• Finally, you should know that web browsers do not care about white space that you use in your HTML document. For example, the following two bits of HTML will be displayed the exact same way:
  

  This is some text that is displayed as you would expect
  
  This     is  some     text
  that is displayed in a way
  you
  would not expect: exactly the same as the above

Basic HTML Tags

• The most basic HTML tags are those which let the browser know important things about the document itself rather than how to display the body of the document.
• The following table outlines the HTML tags that define the basic HTML document.

<!DOCTYPE>
Defines the HTML specification your document uses such as <!DOCTYPE HTML PUBLIC "-/IEFT//DTD HTML 3.2//EN">. This tag will be used before the <HTML> tag.

<HTML> </HTML>
Specifies that the document should be interpreted as an HTML document. This tag should either be the first line in an HTML document or should be directly after the <!DOCTYPE> specification. Likewise, the closing tag should be the last line in an HTML file.

<HEAD> </HEAD>
Specifies an area where the browser can look to for general information about the document. It requires a <TITLE> tag at the minimum.

<TITLE> </TITLE>
Specifies the text that will be used for the header of the browser frame. Some search engines use this text for keyword indexing and browsers will use this for naming bookmarks if a user chooses to bookmark your site. So choose your titles well. This tag goes between the <HEAD> and </HEAD> tags.

<BASE>
Specifies the base URL that all relative links should utilize. This helps if you move an entire site off its original server and need to quickly make all relative links work at their new locale. This tag must appear within the bounds of the <HEAD> element. You will use this tag only with corresponding HREF attribute such as <BASE HREF = "www.mydomain.com">

<BODY> </BODY>
Specifies the information that should be displayed in the browser window. This is the document itself rather than information "about" the document. The <BODY> tag takes several optional parameters that will be discussed on Day Three.

<!-- comment goes here -->
You can create comment text that will not be displayed by the browser by placing it between the <!-- and the -->. Some browsers also support the <COMMENT></COMMENT> tags.

<META>
Embeds information about the document. You can use the tag with the following attributes provided you use it within the bounds of the <HEAD> element:

<META HTTP-EQUIV = "REFRESH" CONTENT = "10; url=doc2.html"> - Automatic redirection
<META NAME = "Description" CONTENT = "a description of page"> - Gives a search engine a description to use
<META NAME = "Keywords" CONTENT = "comma separated keywords"> - Gives a search engine help for indexing
<META HTTP-EQUIV = "PRAGMA" CONTENT = "no-cache"> - Tells the browser not to cache the page.
<META HTTP-EQUIV = "expires" CONTENT = "Saturday 12 April 1997 10:23:23 GMT"> - Tells the browser when the page expires.

Basic HTML Tags by Example

• Consider the following example that creates the minimum web page...

<!DOCTYPE HTML PUBLIC "-/IEFT//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE>Hello World</TITLE> <META HTTP-EQUIV = "Description" NAME = "Description" CONTENT = "This page is simply a basic HTML page"> <META HTTP-EQUIV = "Keywords" NAME = "Keywords" CONTENT = "HTML, tutorial, learning, example"> </HEAD> <BODY> <!--This is a comment and comments do not show up in the browser --> This is a very simple web page </BODY> </HTML>

• The figure below shows how a web browser would interpret the HTML code above. Notice that the comment line does not show up in the browser window. Also, notice that the text between the <TITLE> and </TITLE> tags is displayed in the browser title bar.