HTML Basics
Education for a Fast Changing World
What is HTML?
HTML is a language for describing web pages.
• HTML stands for Hyper Text Markup Language
• HTML is not a programming language, it is a markup
language
• A markup language is a set of markup tags
• HTML uses markup tags to describe web pages
Education for a Fast Changing World
HTML Tags
HTML tags are keywords surrounded by angle brackets
like <html>
• HTML tags normally come in pairs like <b> and </b>
• The first tag in a pair is the start tag, the second tag
is the end tag
• Start and end tags are also called opening tags and
closing tags
Education for a Fast Changing World
HTML Documents = Web Pages
• HTML documents describe web pages
• HTML documents contain HTML tags and plain text
• HTML documents are also called web pages
Education for a Fast Changing World
Let’s Make a Web Page
• Open a new Notepad document
• Type the following HTML code:
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph</p>
</body>
</html>
• Save the notepad document as first_page.txt
• Save the document as first_page.htm
Education for a Fast Changing World
HTM or HTML Extension?
• When you save an HTML file, you can use either the
.htm or the .html extension. Most web developers
use .htm in our examples. It is a habit from the past,
when the software only allowed three letters in file
extensions.
• With new software it is perfectly safe to use .html.
Education for a Fast Changing World
HTML Element Syntax
• An HTML element starts with a start tag / opening
tag
• An HTML element ends with an end tag / closing tag
• The element content is everything between the start
and the end tag
• Some HTML elements have empty content
• Empty elements are closed in the start tag
• Most HTML elements can have attributes
Education for a Fast Changing World
Structure of a Web Page
• All Web pages share a <HTML>
<HEAD>
common structure <TITLE> Example </TITLE>
• All Web pages should </HEAD>
<BODY>
contain a pair of This is where you would include the
<HTML>, <HEAD>, text and images on your Web page.
<TITLE>, and <BODY> </BODY>
</HTML>
tags
Education for a Fast Changing World
The <TITLE> Tag
• Choose the title of your Web page carefully; The title
of a Web page determines its ranking in certain
search engines
• The title will also appear on Favorite lists, History
lists, and Bookmark lists to identify your page
Education for a Fast Changing World
Text Formatting
• Manipulating text in HTML can be tricky; Oftentimes,
what you see is NOT what you get
• For instance, special HTML tags are needed to create
paragraphs, move to the next line, and create
headings
Education for a Fast Changing World
Text Formatting Tags
<B> Bold Face </B>
<I> Italics </I>
<U> Underline </U>
<P> New Paragraph </P>
<BR> Next Line
Education for a Fast Changing World
Changing the Font
• The expression <FONT FACE = “fontname”> …
</FONT> can be used to change the font of the
enclosed text
• To change the size of text use the expression <FONT
SIZE=n> …. </FONT> where n is a number between 1
and 7
Education for a Fast Changing World
Changing the Font
• To change the color, use <FONT COLOR=“red”>….
</FONT>; The color can also be defined using
hexadecimal representation ( Example: #ffffff )
• These attributes can be combined to change
the font, size, and color of the text all at once;
For example, <FONT SIZE=4 FACE=“Courier”
COLOR=“red”> …. </FONT>
Education for a Fast Changing World
Headings
• Web pages are typically organized into sections with
headings; To create a heading use the expression
<Hn>….</Hn> where n is a number between 1 and 7
• In this case, the 1 corresponds to the largest size
heading while the 7 corresponds to the smallest size
Education for a Fast Changing World
Aligning Text
• The ALIGN attribute can be inserted in the <P> and
<Hn> tags to right justify, center, or left justify the
text
• For example, <H1 ALIGN=CENTER> The New York
Times </H1> would create a centered heading of the
largest size
Education for a Fast Changing World
Comment Statements
• Comment statements are notes in the HTML code
that explain the important features of the code
• The comments do not appear on the Web page itself
but are a useful reference to the author of the page
and other programmers
• To create a comment statement use the <!-- …. -->
tags
Education for a Fast Changing World
The Infamous Blink Tag
• It is possible to make text blink using the <BLINK> …
</BLINK> tag
• However, it is best to use this feature at most
sparingly or not at all; What seems like a good idea
to a Web designer can become very annoying to a
Web user
• The <BLINK> tag is not supported by Internet
Explorer
Education for a Fast Changing World
Page Formatting
• To define the background color, use the BGCOLOR
attribute in the <BODY> tag
• To define the text color, use the TEXT attribute in the
<BODY> tag
• To define the size of the text, type <BASEFONT
SIZE=n>
Education for a Fast Changing World
Example
<HTML>
<HEAD>
<TITLE> Example </TITLE>
</HEAD>
<BODY BGCOLOR=“black” TEXT=“white”>
<BASEFONT SIZE=7>
This is where you would include the text and images on your Web page.
</BODY>
</HTML>
Education for a Fast Changing World
Inserting Images
• Type <IMG SRC = “image.ext”>, where image.ext
indicates the location of the image file
• The WIDTH=n and HEIGHT=n attributes can be used
to adjust the size of an image
• The attribute BORDER=n can be used to add a border
n pixels thick around the image
Education for a Fast Changing World
Alternate Text
• Some browsers don’t support images. In this case,
the ALT attribute can be used to create text that
appears instead of the image.
• Example:
<IMG SRC=“satellite.jpg” ALT = “Picture of satellite”>
Education for a Fast Changing World
Links
• A link lets you move from one page to another, play
movies and sound, send email, download files, and
more….
• A link has three parts: a destination, a label, and a
target
• To create a link type
<A HREF=“page.html”> label </A>
Education for a Fast Changing World
Anatomy of a Link
<A HREF=“page.html”> label </A>
• In the above link, “page.html” is the destination. The
destination specifies the address of the Web page or
file the user will access when he/she clicks on the
link.
• The label is the text that will appear underlined or
highlighted on the page
Education for a Fast Changing World
Example: Links
• To create a link to CNN, I would type:
<A HREF=“http://www.cnn.com”>CNN</A>
• To create a link to MIT, I would type:
<A HREF=“http://www.mit.edu”>MIT</A>
Education for a Fast Changing World
Changing the Color of Links
• The LINK, VLINK, and ALINK attributes can be
inserted in the <BODY> tag to define the color of a
link
– LINK defines the color of links that have not been visited
– VLINK defines the color of links that have already been
visited
– ALINK defines the color of a link when a user clicks on it
Education for a Fast Changing World
Using Links to Send Email
• To create a link to an email address, type <A
HREF=“mailto:email_address”> Label</A>
• For example, to create a link to send email to myself,
I would type: <A HREF=“mailto:
[email protected]”>email Katie Dunn</A>
Education for a Fast Changing World
Anchors
• Anchors enable a user to jump to a specific place on
a Web site
• Two steps are necessary to create an anchor. First
you must create the anchor itself. Then you must
create a link to the anchor from another point in the
document.
Education for a Fast Changing World
Anchors
• To create the anchor itself, type <A NAME=“anchor
name”>label</A> at the point in the Web page
where you want the user to jump to
• To create the link, type <A HREF=“#anchor
name”>label</A> at the point in the text where you
want the link to appear
Education for a Fast Changing World
Example: Anchor
<A HREF="#chap2">Chapter Two</A><BR>
Link
<A NAME="chap2">Chapter 2 </A>Ancho
r
Education for a Fast Changing World
Ordered Lists
• Ordered lists are a list of Here’s how it would
numbered items. look on the Web:
• To create an ordered
list, type:
<OL>
<LI> This is step one.
<LI> This is step two.
<LI> This is step three.
</OL>
Education for a Fast Changing World
More Ordered Lists….
• The TYPE=x attribute allows you to change the the
kind of symbol that appears in the list.
– A is for capital letters
– a is for lowercase letters
– I is for capital roman numerals
– i is for lowercase roman numerals
Education for a Fast Changing World
Unordered Lists
• An unordered list is a Here’s how it would
list of bulleted items look on the Web:
• To create an unordered
list, type:
<UL>
<LI> First item in list
<LI> Second item in list
<LI> Third item in list
</UL>
Education for a Fast Changing World
More Unordered Lists...
• The TYPE=shape attribute allows you to change the
type of bullet that appears
– circle corresponds to an empty round bullet
– square corresponds to a square bullet
– disc corresponds to a solid round bullet; this is the default
value
Education for a Fast Changing World
