Afternoon Module 2
Introduction to HyperText Markup Language (HTML)
by Nate Springer
Topics
What is HTML?
How do tags work?
Syntax of the basic tags
What you should be able to do by the end of the day
Have a working web page and understand the basics of HTML.
What is HTML?
Hypertext markup language, or HTML, is the language of the World
Wide Web. Every page found on the World Wide Web, from
USAToday to WPI, is written in HTML.
HTML is a way of describing to the browser, such as Netscape Navigator, Microsoft
Internet Explorer, or Mosiac, how to display and format text and images on a
page. It consists of a series of commands, called tags, which begin with
a < and then end with a >. Tags tell the browser what to do with the text or images
associated with it.
How HTML tags work
An HTML tag is made up of a < followed by the command and ending with a >. Inside
the <> is the name of the command, the tagname. Some tags also take
attributes, which gives the tag some specific information, or value.
Therefore, the basic structure of a tag is:
<tagname attribute="value" ... >
For example, in order to insert an image into a page you would use the <img> tag
like this:
<img src="face.jpg">
Assuming that there was a file named 'face.jpg' in the current directory, this tag would result in:
There are two main types of tags. The first type are standalone tags, like
<img>, in which one tag is all that is needed to perform an action. The second
type are container tags, which consist of a starting tag and a ending tag that
alters everything between them. The structure of a container tag is:
<tagname attribute="value" ... ></tagname>
An example of a container tag would be <u></u>, which underlines
text. The tag
<u>This text is underlined.</u> This text is not.
would produce:
This text is underlined. This text is not.
Basic Tags
Four most important tags
The four most important tags that each page must contain are <html>, <head>, <title>,
and <body>. Each of these are container tags that appear at the top of each HTML file in the
following order:
<html>
This tag tells the browser that this file is an HTML document. This is the first tag that will appear in
all HTML documents; and since it is a container tag, it will also be the last tag in all HTML documents. Its
syntax is simply:
<html>
.
.
</html>
<head> and <title>
The next necessary part to all web pages is the <head> tag. This tag contains
the title of the page (and sometimes other information). The title of the page tells
the reader what the page is about and will appear at the top of the browser's window. The syntax for
these tags is:
<head>
<title>Title of Web Page</title>
</head>
<body>
The final tag that most web pages need is the <body> tag. This tag tells the browser
that the following information should be displayed. It can also contain the formatting information
for the page (this will be discussed later). The syntax for this tag is:
<body>
.
.
</body>
Therefore all web pages must have the following structure:
<html>
<head>
<title>Title of Web Page</title>
</head>
<body>
.
Body of page
.
</body>
</html>
End of line tags
Probably the most basic tags that will be used many times in web pages are <br>, break, and <p>,
paragraph. These tags will end the current line, much the same as a carriage return in a word processor. It is
important to note that these tags must be used in place of a carriage return since the browser will not recognize
a carriage return in an HTML file.
<br>
The break tag, <br>, will end the current line and any text placed after it will continue on the next line. For
example:
I want to end this line here --><br>This is the next line.
becomes
I want to end this line here -->
This is the next line.
<p>
The <p> tag acts exactly like <br>, except that it is to be used at the end of paragraphs. It will end
the current line and create a blank line between the paragraphs (this can also be achieved by using two <br>
tags). For example:
... this is the end of this paragraph --><p>This is the beginning of the next ...
becomes
... this is the end of this paragraph -->This is the beginning of the next ...
Basic text formatting tags
It is often necessary to change the format of some text in order to emphasize a point, to set it apart from other text,
or to show importance. The following container tags enable the block formatting of text to show emphasize:
<b>, <u>, and <i>
The <b> tag changes the text contained within the tag to boldface; the <u> tag underlines
the text contained within the tag; and the <i> tag changes the text contained within the tag to italics.
<b>This text is bold.</b> <i>This text is italicized. </i> <u>This text is underlined.</u>
This text is not formated.
becomes
This text is bold. This text is italicized. This text is underlined. This text is not formatted.
<h#> (Headings)
The heading tag, <h#>, makes text larger than the surrounding text, as in a newspaper headline. The number in
the heading tag tells the browser how big you want the text to be. A number from 1 to 6 may be used, with 1 being
the largest and 6 the smallest. The heading tag automatically creates a break after itself, therefore any text placed
after the heading will continue on the next line.
<h1>This is heading 1</h1>
.
.
<h6>This is heading 6</h6>
becomes
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
<center>
The <center> tag, as its name implies, centers text contained within the tag. This tag can be used to center
anything from one character to the entire contents of the page.
<center>This text is centered.<br>
So it this.<br>
<b<ME TOO!</b><br>
</center>
<u>But I'm not :(</u>
becomes
This text is centered
So is this
ME TOO!
But I'm not :(
Horizontal line tag
<hr>
It is often necessary to separate portions of a page from one another through the use of horizontal line separators
(as seen in this page). In order to create these lines, use the <hr> tag. The <hr> tag will automatically
create a break after itself, therefore any text following it will continue on the next line.
... end of one section<br>
<hr>
beginning of next section ...
becomes
... end of one section
beginning of next section ...
It is possible to change the attributes of the line through the use of the size, width, and noshade attributes.
The size attribute changes the thickness of the line. The value of the size is represented in pixels and is called
point size.
Size 1:
<hr size=1>
Size 6:
<hr size=6>
Size 20:
<hr size=20>
becomes
Size 1 line:
Size 6 line:
Size 20 line:
The width attribute changes the width of the line. The value of the width can either be represented as a
pixel value or a percentage of the total width of the page.
Width 200 line:
<hr width=200>
50% total width of page line:
<hr width=50%>
becomes
Width 200:
Width 50% total width of page:
The noshade attribute changes the line to a solid grey line.
Size 1:
<hr size=1 noshade>
Size 6:
<hr size=6 noshade>
Size 20:
<hr size=20 noshade>
becomes
Size 1 line:
Size 6 line:
Size 20 line:
Links
<a href ... >
Navigating the World Wide Web achieved through the use of links, or a connection from one web page to
another. When a person clicks their mouse on a link, the browser takes them to the page the link represents. To
create a link use the href attribute of the <a> (anchor) container tag. This attribute is followed
by the web address of the page you want to link to. Note: Both text and images may be used as a link.
This creates a link to <a href="http://www.wpi.edu">WPI's web page</a>
becomes
This creates a link to WPI's web page
Images
<img ... >
Up till this point we have only dealt with text, but the real importance of the web is the ability to add images to
a page in order to make it more pleasing to a visitor. To add images to a page, use the <img> standalone tag.
To specify the image to display use the src, source, attribute followed by the path and filename of the
image. Valid image formats are GIF (.gif) and JPEG (.jpg).
This is the WPI logo: <img src="wpi.gif">
becomes (assuming 'wpi.gif' is contained within the same directory as the HTML file)
This is the WPI logo: 
Goto Lab