HTML Practice Exercise #1

Throughout Lessons 1 to 7 you will be expanding your knowledge of HTML codes through a series of practice exercises.
These exercises, used in conjunction with the assignments, will culminate in a complete web site.

For this first HTML practice exercise, you will be responsible for using the web authoring techniques and the HTML codes
that follow.

A. Creating Web Pages from the "Ground Up"

For this course, you will design a web site from the ground up. Although there are many editors, programs, and software
packages available to build web sites, we will do it the "hard" way. That is, for you to be able to demonstrate a rigorous
understanding of the fundamentals of web site design, you must complete the HTML practice exercises and graded
assignments. This experience will allow you to become confident and competent in web page design. Programming without
the use of web page authoring tools will provide for a greater understanding and control of your web page. This way, when
you come across HTML code in the future, you will know how it works and what it means. HTML code is a necessary feature
of any Computer Science course.

B. What do you need to make a Web page?

There are only two pieces of software necessary to make a web page. They are:

1. A text editor (we will use Notepad, TextEdit or Brackets).

2. A web browser (Safari, Mozilla Firefox, Google Chrome).

You don't even need to be on the Internet to create a web page. Web pages can be created and tested on any
computer! Many company's web pages are placed on an Intranet (or even a local computer in the office). An Intranet can be
thought of as a set of documents that use the Internet structures, but which are accessed only locally, that is, say, from the
confines of a company’s building.

Web pages are written in a computer language known as HTML. This stands for HyperText Markup Language. A text editor is
used to create HTML documents, and a web browser is used to view the completed web page.

A web site is a collection of web pages in a free-form database structure. This simply means the creator of the web site
doesn't have to follow a strict set of rules when creating their web site. The web site can be a very dynamic entity, growing
and collapsing, as the creator sees fit. It is this ease of expression that has led to the vast explosion of web sites on the
Internet and namely the WWW.

C. File Naming (Your File Names when writing web pages)

To make things as easy as possible for you and me, you MUST follow the following rules when writing your own web pages.

All HTML coding WILL be done in lowercase letters

All file names will be done in lowercase letters, with no special characters except underscore, and will conform to the
following parameters:
no filenames will be over 8 characters in length and b. all HTML documents will end in .html (NOT .htm)

All graphics names will be done in lowercase letters, with no special characters except underscore, and will conform to
the following parameters:
no filenames will be over 8 characters in length and
all graphics will end in either .jpg, .jpeg,.png, or .gif (these are the supported image file types)

Please see this course site for sample pages and useful information.
 REMINDER: The use of web page authoring tools is NOT allowed because it does NOT meet the objectives of this
course and assignments will NOT be accepted in this format! (Resulting in ZERO marks being awarded!)

D. What does Hypertext Markup Language mean?

Hyper - means you can make jumps within your document, to another document on your system, or to a document
anywhere on the Internet.

text - means you must save your web pages as "text". Text files do not have any word processing characters in them. HTML
editors and Windows Notepad automatically make text files. Word-processors must be "told" to save files as text.

Markup Language - means that you will be adding "tags" to the text file to tell the browser how it should display the text.
Tags are enclosed in < >, and usually exist in pairs.

E. What is HTML?

HTML: The set of markup symbols or codes placed in a file intended for display on a web browser page.

The World Wide Web Consortium (http://w3c.org) sets the standards for HTML and its related languages.

The Timeline of HTML

1991- Tim Berners-Lee invents HTML 1.0.
1993- HTML 1.0 is released. Not many developers are creating websites at this time.
1995- HTML 2.0 is published. ...
1997- HTML 3.0 was invented. ...
1999- The widely used HTML 4.0 comes out. ...
2000- XHTML was published…
2014- HTML 5.0 is released and used worldwide.
2017 – HTML 5.2 was published as a W3C

HTML Elements
Each individual markup code is referred to as an element or tag.
Each tag has a purpose.
Tags are enclosed in angle brackets, "<" and ">" symbols.
Most tags come in pairs, an opening tag and a closing tag.

What is XHTML?
The newest version of HTML
eXtensible HyperText Markup Language.
XHTML uses:
the elements and attributes of HTML
the syntax of XML (eXtensible Markup Language).

XML Syntax
An XML document must be well-formed.
Use lowercase
Use opening and closing tags
<body> </body>
Close stand-alone tag with special syntax
<hr />

Document Type Definition (DTD)

W3C Recommendation:
Use a Document Type Definition to identify the type of markup language used in a web page.
XHTML 1.0 Transitional
This is the least strict specification for XHTML 1.0. It allows the use of both Cascading Style Sheets and
traditional formatting instructions such as fonts. We will use this DTD in this text.
 XHTML 1.0 Strict
Requires exclusive use of Cascading Style Sheets. We will not use this.
XHTML 1.0 Frameset
Required for pages using XHTML frames. We will use not use this.

XHTML 1.0 Transitional DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>

F. HTML in Action

To see an example of HTML in action, go to my sample site found under the Class Resources section of this web site. Then,
to see the HTML underlying this page, click on View  Source.

G. The Shell of a Web page

Just as the essays you write for University classes follow an outline (title, introductory paragraph, body paragraphs,
conclusion, bibliography), so does an HTML document. These HTML tags are useful to computer scientists so that they have
total control over the style and appearance of their web pages. If you choose to use a web page authoring tool in the future,
you will be able to understand the codes generated by these tools.

Here is what you will see for a basic web page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >

<head>
…head section info goes here
</head>

<body>
…body section info goes here
</body>

</html>

Head & Body Sections

Head Section
Contains information that describes the Web page document

Body Section
Contains text and elements that display in the Web page document

More stuff you are likely to see on a web page:

Add HTML <title> and <meta /> tags

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>My First Web Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
 .... Body info goes here
</body>
</html>

This outline (shell) is given to you in the Class Resources  Web page template (template.html)

H. Your first HTML tags (coding elements)

Tags covered so far in the template:

<html>…</html>
<head>…</head>
<title>…</title>
<body>…</body>

The Heading Element – creates different size headings for web pages.

Example:
<h1>Heading Level 1</h1>

<h2>Heading Level 2</h2>

<h3>Heading Level 3</h3>

<h4>Heading Level 4</h4>

<h5>Heading Level 5</h5>

<h6>Heading Level 6</h6>

The Paragraph element – groups sentences and sections of text together. Configures a blank line above and below the
paragraph.

Example: <p> …paragraph goes here… </p>

The Break element - causes the next element or text to display on a new line. This tag closes itself with its own closing
slash. This is known as a stand-alone tag.

Example: …text goes here <br />

This starts on a new line….

The Blockquote element - indents a block of text for special emphasis.

Example: <blockquote>
…text goes here…
</blockquote>

I. To Do: Your First Web Page

Now, try your own beginning web page.

Steps:
Download the template.html file provided in the Class Resources. Use this as a starting point for all web pages that
you will create.
Open the template.html file using a text editor such as NotePad (Windows) or TextEdit (MAC). The program Brackets
(both Windows and MAC) is my preferred editor and is available (see Class Resources).
 Enter the missing information shown below to complete your first web page.
Save the file with a new file name such as firstpage.html.
Open the file using your favourite web browser such as Firefox or Safari. Use File - Open Page/File - Choose File -
Open. This will display your newly created web page.
Don't forget to save it as a text file with the proper extension (.html) or it won’t display properly in the browser.
Now it is a matter of practice. RECAP: Create/Edit in one program (NotePad for example) and view in a web browser to
see your results (Firefox for example).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>My First Web Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Large Heading</h1>
<p>A paragraph about nothing</p>
<h5>Smaller Heading</h5>
<p>Another paragraph of nothing<br /> broken in the middle</p>
<blockquote>Isn’t this fun!</blockquote>
<p>Make sure to close your tags
</p>
<p>Notice how the spacing between opening and closing tags<br />
will be ignored by the web browser</p>
<blockquote>
An editor program such as NotePad ++ or Brackets makes it easier to program HTML
</blockquote>
</body>
</html>

Save as: firstpage.html

Next Step

If you can meet the objectives stated at the beginning of Lesson 1, you are ready to proceed to the next lesson. Keep in mind
the weekly schedule recommended in the course syllabus. Please post to the Discussion area of this course web site any
questions or comments related to the lesson. Only emergency and private messages should be sent through email to the
instructor.

Assignment

Please visit the Assignments portion of the course for details on Assignment #1.