Page 1 of 13

Page 1 of 13
INTERNET WEB PAGE DESIGN
HYPERTEXT MARKUP LANGUAGE
Ex. 1. Creating and Viewing a Simple HTML Document
HTML, or Hypertext Markup Language, is the language used to write Web pages.
Important: HTML files must always be saved in plain text format, not as word processor files—in
other words, alphanumeric characters only (no formatting of any kind). Don’t use a word processor to
create your file HTML, since you might accidentally save it in the wrong format. Use a text editor like
Notepad instead, since it can only save files as plain text.
<HTML>
• Use Notepad to create a text file as illustrated. <HEAD>
• Save it as webpage.html <TITLE>
To prevent Notepad from adding the extension .txt onto the My First HTML
filename (e.g. myfile.html.txt), be sure that the Save As Type field Document is
set to All Files, not Text Documents. </TITLE>
</HEAD>
<BODY>
Sale
<I>
Tuesday
</I>
You have just created a complete, although a very simple, HTML !
document. </BODY>
</HTML>
Now check to see what it would look like on the Internet by running a Web
browser and loading webpage.html. On the TDSB system, you might have to load the page by finding
it on your home drive, right-clicking on it, selecting Open With, then selecting Internet Explorer.
• Notice which parts of the HTML file are

displayed and which are not.
• Notice what the tags <TITLE> </TITLE>
do.
• Notice the layout of text in the browser
compared to the HTML file.
HTML is called a markup language because it takes ordinary text, such as the words "Sale
Tuesday!" and marks it up with tags. HTML tags are placed between < > angled brackets.
Most HTML tags work in pairs, consisting of an opening tag and a closing tag. Notice the pairs
<HTML> and </HTML>, <HEAD> and </HEAD>, <TITLE> and </TITLE>, and so on. The tag <I> tells
the Web browser to begin displaying the text which follows in italic letters, while the tag </I> tells the
Web browser to stop displaying italics.
Note: HTML should not be called a programming language. Computer programming languages,
such as BASIC, Pascal, Turing, C, and Java, are quite different from markup languages like HTML.
Page 2 of 13
Page 3 of 13
Ex. 2. HTML Tags for Text Formatting
Lists Special prices on:

<UL>
• Using the same webpage.html file, just above the <LI>Shoes
</BODY> tag, add the text illustrated to create an <LI>Electronics
unordered list <UL> and an ordered list <OL>. The <LI>Sports equipment
<LI> stands for list item. </UL>
• Save the file. View it in a browser to see the effect. <P>
• Notice that an unordered list is like bullets in a word Watch for our labels:
processor, and an ordered list is like numbering in a <OL>
word processor. <LI>red labels 50% off
<LI>green labels 30% off
<LI>blue labels 20% off
</OL>
</P>
Text Flow
• In a line above the words “Special prices,” add <H2>Specials!</H2>.

<H2> is a heading tag, one of six pairs of tags used for titles and headings.
• Save the changes.
• Reload the file in your Web browser by clicking on the Reload or
Refresh button or by pressing F5. Notice the effect of the new
tags.
• Next, in order to have some text to experiment with, enter 3

paragraphs of text below the two lists. Write something about
yourself and your interests, since an assignment later will ask you
to create your own personal Web page.
• Resave the file in Notepad.
Page 4 of 13
When you view your file in a browser, notice how the text flows from one side of the screen
to the other with no regard for any paragraphing or line spacing you used in your source file.
In HTML you must use tags to indicate line breaks and paragraph breaks. For example:
<BR> Line break
<P> Paragraph break </P>
A section break can be indicated by drawing a horizontal line across the screen with
<HR> Hard rule
Notice that the tags <BR> and <HR> are quite unusual for HTML because they are not used in pairs.
Other text formatting tags include:

Centred <CENTER> Text goes here </CENTER>
Block indent <BLOCKQUOTE> Text goes here </BLOCKQUOTE>
• Format the text you added about yourself using the HTML text formatting tags to
create paragraph breaks, etc.
• Save the file.
Font Size
Font size is controlled in two main ways. The first is with tags for headings, the largest being
<H1> and the smallest <H6>. They are:
<H1> </H1>, <H2> </H2>, <H3> </H3>, <H4> </H4>, <H5> </H5>, and <H6> </H6>
• Experiment with various sections of your text to see the effect of several of the
heading tags:
Example: <H3> Text goes here </H3>
Note: Heading tags such as <H1>, <H2>, <H3>, etc.create a blank line above and a
blank line below the heading.
What if you don’t want blank lines setting off your text? The second way to control font size
is with the <FONT> tag.
Example: <FONT SIZE=“1”> Text goes here </FONT>.
After the equal sign, use any number between 1 and 6.
The <FONT> tag can also be used to increase or decrease the size of text in comparison to
the text that precedes it.
Example: <FONT SIZE=“4”> Text goes here </FONT>
<FONT SIZE=“-1”> Text goes here </FONT>
<FONT SIZE=“-1”> Text goes here </FONT>
• Add headings to your text, using at least two <H> tag pairs.
Page 5 of 13
• Use <FONT> tags to create at least three font sizes.

• Save the file.
Font Styles
HTML also provides the following tags for font styles:
Bold <B> Text goes here </B>
Underline <U> Text goes here </U>
Font Colour
The <FONT> tag can control the colour of text:
Example: <FONT COLOR="RED">Text goes here</FONT>
<FONT COLOR="BLUE">Text goes here</FONT>
• At the top of your text, add the word Jarvis in Font Size 2.
• Centre it on the line.
• Follow it with a Hard Rule <HR>.
• Make the letter J red and the remaining letters of the word blue.
• Save the file.
Later you will learn more about font colours, as well as background colours.
Notes on HTML
• HTML tags may be written in capitals letters or lower-case. While many people use
capital letters to make their code easier to read, the trend now is to use lower-case letters.
• Tags containing COLOR, CENTER and GRAY use American spelling.
• It does not matter how many spaces you use in HTML. Multiple spaces in your HTML
file are always displayed in the browser as just ONE space.
• To force multiple consecutive spaces, use the non-breaking space character
• The browser makes text flow without any line breaks or paragraph breaks unless you
specifically instruct it with <BR> and <P>.
• There is no HTML tag for indent. The non-breaking space character ( ) can be
used for this effect.
Remember, text will not display in the browser as you see it in your word processor. You
must do all text formatting with HTML tags, mostly with <BR> and <P>.
Page 6 of 13
Ex. 3. Hyperlinks
The word hypertext means that you can click on a word (or image) in order to receive
additional information. Hyperlinks are very easy to create. On the last line of your file add
the following text:
Follow this link to Yahoo.
• Turn the word “Yahoo” into a hyperlink by making the following changes:
Follow this link to <A HREF=”http://www.yahoo.com”>Yahoo</A>.
• View the page in your browser and test to see if the hyperlink works.
• Below the Yahoo hyperlink, add a sentence containing a hyperlink to a Web site of
your choice. Save the file.
Ex. 4. Graphics
Inserting a Graphic
Usually a Web page includes one or more graphic images. Be sure there is a graphic image
on your home drive in the same folder as your HTML file. (You can find a fun image at
schools.tdsb.on.ca/jarvisci/gfx/aendk.jpg).
• Let us imagine that your image is called filename.jpg. Make it appear directly above
the coloured title “Jarvis” as follows:
<IMG SRC=”filename.jpg”>
• Notice whether the default is centred, left-aligned or right-aligned.
• Save the file.
Tags controlling the position of the graphic on the page:

An image can be centred easily with the tags <CENTER> </CENTER>. However, there are
special alignment attributes for the <IMG> tag.
• Try each of the two tags below to see how they affect the position of the graphic on
the page:
Example: <IMG SRC=”filename.jpg” ALIGN=“LEFT”>
<IMG SRC=”filename.jpg” ALIGN=“RIGHT”>
Page 7 of 13
Tags controlling the flow of text around the graphic:

• Insert <IMG SRC=”filename.jpg”> again into your HTML file, but in the middle of a
sentence of your text.
• Save the file.
• View it in a browser to see where the image is placed by default in relation to the text.
• Try each of the <IMG> alignment attributes below to see their effect.
Example: The mouse<IMG SRC=”filename.jpg” ALIGN=”MIDDLE”> ran up the
clock.
<IMG SRC=”filename.jpg” ALIGN=”TOP”>
<IMG SRC=”filename.jpg” ALIGN=”MIDDLE”>
<IMG SRC=”filename.jpg” ALIGN=”BOTTOM”>
Making an image into a hyperlink:

• Combine the tags for graphics and hyperlinks to turn your graphic into a hyperlink to
the Jarvis Web site as below. Add this link below all your text.
<A HREF=”http://schools.tdsb.on.ca/jarvisci/”><IMG SRC=”filename.jpg”></A>
Page 8 of 13
Ex. 5. Colour for Fonts and the Background
Using Words to Add Colour

The grey background to your Web page probably seems boring.
• Try changing the background colour by adding the following attribute to the <BODY>
tag near the top of your HTML file:
<BODY BGCOLOR=”RED”>
Of course, red is not the only colour you can use. There are many: RED, GREEN, BLUE,
BLACK, WHITE, YELLOW, GRAY; and less common shades: SILVER, LIME, TEAL,
OLIVE, MAROON, PURPLE, AQUA, NAVY and FUCHSIA.
• Choose a colour you like from the words above and set it as the background colour.
• Save the file.
RGB Colours and the Hexadecimal Numbering System

A full 16.7 million colours are available for both fonts and the background if you learn about
RGB colours and the hexadecimal system. RGB stands for RED GREEN BLUE, the three
primary colours which are mixed on a computer screen to create all other colours.
Let’s consider colours for fonts first. The HTML tag to set an RGB font colour looks like
this:
<FONT COLOR=#CC66FF>Text goes here</FONT>
<FONT COLOR=#CC66FF> uses the hexadecimal numbering system. It is very similar to

the decimal system, which everyone is familiar with. However, instead of being limited to
just ten numerals (0,1,2,3, …), it has sixteen: 0,1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.
Hexadecimal A expresses the same number as 10 in the decimal system, B is equivalent to
11, C is equivalent to 12, and so on.
In <FONT COLOR=#CC66FF> the first two characters (CC) represent how much red will
go into the final colour, the second pair (66) represents how much green will go into the final
colour and the third pair (FF) represents how much blue will go into the final colour.
The fundamental colours, therefore, are represented like this:

FF0000 pure red (no green, no blue)
00FF00 pure green (no red, no blue)
0000FF pure blue (no red, no green)
000000 black (no red, no green, no blue)
FFFFFF white (maximum red, max. green, max. blue)
• Make the first word of each of your three paragraphs a different colour.
• Save the file.
Page 9 of 13
Setting Colours in the <BODY> Tag

The <BODY> tag has attributes allowing you to create some interesting colour effects. Here
are some examples:
<BODY BGCOLOR=#0000FF> colour of background is blue
<BODY TEXT=#FFFFFF> colour of text is white
<BODY LINK=#00FF00> colour of hyperlink is green
<BODY VLINK=#FF0000> colour of a hyperlink that has been viewed is red
You can combine more than one attribute in the <BODY> tag:
Example: <BODY BGCOLOR=#0000FF TEXT=#FFFFFF LINK=#00FF00
VLINK=#FF0000>
Students who wish to experiment with colours using the hexadecimal system can find useful
guides to colours and their hexadecimal codes on the Internet at sites such as:
• http://www.phoenix.net/~jacobson/pages/rgbhex.html
• http://www.zspc.com/color/index-e.html
• http://www.december.com/html/spec/color.html
• http://zorba.uafadm.alaska.edu/Library/impact/hexdec216.html
Page 10 of 13
More HTML Notes
Background Images
The <BODY> tag allows you not only to set a background colour but also to use an image as
the background of your document:
Example: <BODY BACKGROUND=”filename.jpg”>
The image must be chosen very carefully so that it does not make other parts of the page
difficult to read. It will be repeated or tiled to fill the background to the entire page.
It is not possible to combine a background colour with a background image.
Programs that Create HTML

Many programs today, such as Microsoft Office and Corel WordPerfect, are able to save
their files in HTML format. Why, then, should you bother to learn HTML? Because the word
processing programs make many compromises in converting to HTML, with the result that
the HTML they produce is often very poor. You can edit it to make it better. More important,
however, is that the file converted by a word processor often does not appear the way you
thought it would in a browser. With your knowledge of HTML, you can edit that HTML file
created by the word processing program to get exactly the results you want on screen.
Validating your HTML

There are a number of online HTML validators where you can check whether you have
written correct code. A search at Google for “HTML validator” will point you many. An easy
to use example is at www.htmlhelp.com.
The top authority for HTML

The organization that sets the standards for HTML and other Web technologies is the World
Wide Web Consortium at www.w3.org. Its information is complete and authoritative,
although it is often quite technical.
Putting Your Web Page on the Internet

After you have created a Web page, you probably want to put it on the Internet, so that it has
its own URL and is available to everyone in the world. To do this, it must be put onto a
server, that is, a computer directly and constantly connected to the Internet. There are two
ways of doing this:
1. Your ISP (Internet Service Provider) might include space on
their server as part of your monthly fee. They will give you instructions for
uploading your files to their server.
2. There are a number of free services on the Internet which allow
you to put your files on their server. In return, they usually include advertising on
your Web page.
Page 11 of 13
Page 12 of 13
Summary of Common HTML Tags
Font Size
Starting an HTML File <H1> … <H6>
<HTML> <FONT SIZE=“1”> </FONT>
<HEAD> <FONT SIZE=“+1”> </FONT>
<TITLE> <FONT SIZE=“-1”> </FONT>
<BODY>
Font Styles
<B>
Closing an HTML File <U>
</BODY>
</HTML>
Colour Words
Text Formatting RED, GREEN, BLUE, BLACK, WHITE,
<BR> YELLOW, GRAY, SILVER, LIME, TEAL,
<P> OLIVE, MAROON, PURPLE, AQUA,
<HR> NAVY, FUCHSIA.
<CENTER>
<BLOCKQUOTE> Font Colour
<FONT COLOR=”RED”> </FONT>
<FONT COLOR=#FF0000> </FONT>
Lists
<UL> … <LI> Body Attributes
<OL> … <LI> <BODY BGCOLOR=#0000FF>
<BODY TEXT=#FFFFFF>
Hyperlinks <BODY LINK=#00FF00>
<A HREF=”http://www.yahoo.com”> </A> <BODY VLINK=#FF0000>
Graphics
<IMG SRC=”graphic.jpg”>
<IMG SRC=”graphic.jpg” ALIGN=”LEFT”>
<IMG SRC=”graphic.jpg” ALIGN=”MIDDLE”>
<IMG SRC=”graphic.jpg” ALIGN=”TOP”>
<IMG SRC=”graphic.jpg” ALIGN=”MIDDLE”>
<IMG SRC=”graphic.jpg” ALIGN=”BOTTOM”>
Page 13 of 13
Ex. 6. Create Your Personal Web Page
Create a personal Web page for yourself, expressing your interests, hobbies, favourite
entertainers, school, family—anything you want people to know about you.
The first items on your Web page must be your name, the name of this course, the name of
your teacher, and the period of your class.
Your HTML file should include at least one example of each of the following tags:
1. <BODY BGCOLOR>
2. <H1> or other Heading tags
3. <BR>
4. <P>
5. <HR>
6. <UL> or <OL>
7. <FONT COLOR=>
8. <FONT SIZE=>
9. <IMG SRC>
10. <IMG ALIGN=“RIGHT”>
11. <IMG ALIGN=“”MIDDLE”>
12. <CENTER>
13. <A HREF=>
• Save the file as my_personal_Webpage.html.

• Show it to the teacher in a browser.
• Print the HTML file
• Give the printout to the teacher to be marked.
Note: This assignment must be done especially for this course. Do not copy a page that you
might have already created outside class.
Enrichment
Students who finish the assignment early should learn more advanced HTML by visiting the
following Web site:
http://www.mcli.dist.maricopa.edu/tut/
Page 14 of 13
Ex. 7: Create a Default Page for Your Browser
When your browser first loads, why let it load the Yahoo home page, or MSN or any other
commercial Web page? Instead, create your own page in HTML with only your favourite
links conveniently arranged, and make that the default. Not only is it useful, but it loads
instantly since it is kept on your hard disk and does not depend on a connection to the
Internet. Below is a very simple example.
The code creates a non-breaking space, enabling you to create 2 or more
spaces in a row.
<HTML>
<HEAD>
<TITLE>Default Page</TITLE>
</HEAD>
<BODY>
<CENTER>
<H3>
<A HREF="http://www.google.com">Google</A>

<A HREF="http://groups.google.com">Google groups</A>
<P>
<A HREF="http://www.theglobeandmail.com">The Globe and Mail</A>

<A HREF="http://www.nationalpost.com">The National Post</A>

<A HREF="http://www.thestar.com">TorontoStar</A>
</P>
<P>
<A HREF="http://schools.tdsb.on.ca/jarvisci">Jarvis Web site (TDSB)</A>
</P>
<P>
<A HREF="http://mail.yahoo.com/">Yahoo mail </A>

<A HREF="http://www.hotmail.com">Hotmail </A>
</P>
</H3>
</CENTER>
</BODY>
</HTML>
Page 15 of 13
Additional Resources
http://www.w3schools.com/html/default.asp
A very good online tutorial in HTML, teaching the skills step by step. Includes “live”
practice, where you type HTML into an area on the screen and see the results in a
second area. More than the basics—tables, frames and forms
http://www.webmonkey.com/webmonkey/reference/html_cheatsheet/
Quick reference for HTML tags.
http://www.w3schools.com/css/css_intro.asp
Good Cascading Style Sheets (CSS) tutorial.
http://www.echoecho.com/css.htm
Another good CSS tutorial.
http://www.htmlhelp.com/reference/css/quick-tutorial.html
Quick tutorial on CSS.
http://www.w3.org/
Word Wide Web Consortium (W3C). The official source of standards for the World
Wide Web, the final word on HTML, XHTML, CSS, etc.

Page 1 of 13

Enviado por

Dados do documento

Descrição original:

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Page 1 of 13

Enviado por

Direitos autorais:

Formatos disponíveis

Page 1 of 13

INTERNET WEB PAGE DESIGN

HYPERTEXT MARKUP LANGUAGE

Ex. 1. Creating and Viewing a Simple HTML Document

• Notice which parts of the HTML file are

Ex. 2. HTML Tags for Text Formatting

Lists Special prices on:

• In a line above the words “Special prices,” add <H2>Specials!</H2>.

• Next, in order to have some text to experiment with, enter 3

Other text formatting tags include:

• Use <FONT> tags to create at least three font sizes.

Tags controlling the position of the graphic on the page:

Tags controlling the flow of text around the graphic:

Making an image into a hyperlink:

Ex. 5. Colour for Fonts and the Background

Using Words to Add Colour

RGB Colours and the Hexadecimal Numbering System

<FONT COLOR=#CC66FF> uses the hexadecimal numbering system. It is very similar to

The fundamental colours, therefore, are represented like this:

Setting Colours in the <BODY> Tag

More HTML Notes

It is not possible to combine a background colour with a background image.

Programs that Create HTML

Validating your HTML

The top authority for HTML

Putting Your Web Page on the Internet

Summary of Common HTML Tags

Ex. 6. Create Your Personal Web Page

• Save the file as my_personal_Webpage.html.

Ex. 7: Create a Default Page for Your Browser

Você também pode gostar