back

HTML 101       Instructor: Dan Ouellette

 

Underneath the hood of any Web page is nothing more than line after line of ordinary typed text. With itÕs use of simple commands called tags, HTML is still at the heart of most of the Web.

 

The HTML code that creates a Web page can be as simple as this:

 

<html>

<head>

<title>The Title of this Web Page.</title>

</head>

<body>

Hey, IÕm some body text on this web page.

</body>

</html>

 

While it may not be exciting, the HTML shown here is all thatÕs needed to make a Web page.

 

 

Tags and Properties

HTML commands appear in pairs designed to surround a block of text or other commands.

 

These bracketed commands are called tags.

 

The starting tag of each pair tells the browser where the instructions begin, and the ending tag tells it where the instruction ends.  Ending tags always include a slash (/) after the first bracket symbol (<), which tells the browser that this is a closing tag.

 

The <html> tag appears once at the beginning of a Web page and again (with an added slash) at the end.  This tells the browser that the information contained within this page is written in HTML as opposed to some other language.

 

If you were to think of a Web page as a tree the <html> tag would be itÕs trunk.

 

The head of a Web page, surrounded by <head> tags, contains the title of the page: it may also provide other, invisible information (such as search keywords) that browsers and Web search engines can exploit.

 

In addition, the head can contain information thatÕs used by the Web browser for displaying and for adding interactivity.  Cascading Style Sheets, Javascript scripts, functions and variables can be declared in the head document.

 

The body of a Web page as set apart by itÕs surrounding <body> tags, contains all the information that appears inside a browser window –headlines, text, pictures and so on.

 

Most tags commonly used in Web pages appear within the <body> tag.  Here are a few:

  1. A paragraph of text begins with a <p> (opening paragraph tag), where it ends with a </p> (closing paragraph tag).
  2. The <b> </b> tag stands for bold text.
  3. The <a> tag, or anchor tag, creates a link (hyperlink) in a web page. A link, of course, can lead anywhere on the Web.  How do you tell the browser where the link should go?  Simply give the browser more instructions inside the <a> tags; for instance you might type  <a hreÄ=Óhttp://www.newwebsite.comÓ> Click here!<a/>
  4. The browser knows that when your visitor clicks the words ÒClick here!Ó, it should go to the New Web Site.  In Dreamweaver the hreÄ part of the tag is called a property (you may also hear the term attribute); the URL – in this example, http://www.newwebsite.com is the value of the Href property.