Introduction to Website Design Fall 2009 Intro to HTML

Introduction to HTML & Web Design

What is the Internet?

The Internet is a system architecture that has revolutionized communications and methods
of commerce by allowing various computer networks around the world to interconnect. Sometimes
referred to as a “network of networks,” the Internet emerged in the United States in the 1970s but
did not become visible to the general public until the early 1990s. By the beginning of the 21st
century approximately 360 million people, or roughly 6 percent of the world's population, were
estimated to have access to the Internet. It is widely assumed that at least half of the world's
population will have some form of Internet access by 2010 and that wireless access will play a
growing role.

The Internet provides a capability so powerful and

general that it can be used for almost any purpose that depends on
information, and it is accessible by every individual who connects
to one of its constituent networks. It supports human
communication via electronic mail (e-mail), “chat rooms,”
newsgroups, and audio and video transmission and allows people to work collaboratively at many
different locations. It supports access to digital information by many applications, including the
World Wide Web. The Internet has proved to be a spawning ground for a large and growing
number of “e-businesses” (including subsidiaries of traditional
“brick-and-mortar” companies) that carry out most of their sales
and services over the Internet. Many experts believe that the
Internet will dramatically transform business as well as society.

"Internet."Encyclopædia Britannica. 2009. Encyclopædia Britannica 2006 Ultimate Reference

Suite DVD 11 July 2009 .

Mr. Smith 1 Sachem High School North Campus

Introduction to Website Design Fall 2009 Intro to HTML

The Language of the Internet

Many people think of Website Design as a type of computer programming, but actually, the
internet today doesn’t need to be programmed but simply “formatted.” In order for this to be done
we will be using a computer formatting language (type of coding) known as HTML or “Hyper
Text Markup Language.” It is a universal language that allows the Web to create complex pages of
text and images that can be viewed by anyone anywhere.

The best part of this is that you don’t need any special programs to edit html. In this class
we will be using a program found on nearly all Windows based computers called, Notepad. Basic
Internet Coding is very easy!

The coding we are going to be using is once again called, HTML.

I’ve never done any type of “Coding” before, how does it work?
HTML is simply a series of “tags” that we type into a text document. They’re a lot like

stage directions in a play, telling the internet what to do and what props to use.

These tags are normal words or abbreviations, but are indicated by small brackets around

the word like these: < >

Here is a quick example, no need to remember this code now but this is a basic tag.

Using the “Bold Code,” This Text:

I love to <B>Surf at the Beaches on Fire Island</B> when it is Hot outside.

Translates to this text on a Website:

I love to Surf at the Beaches on Fire Island when it is Hot outside.

Notice how the “Bold Code” is not present in the actual text, but the text instead becomes

Bold. Also notice that this code is opened with <B> and closed with a slash </B>

Every HTML code works in this way. <CODE> Opens, </CODE> Closes.

Mr. Smith 2 Sachem High School North Campus

Introduction to Website Design Fall 2009 Intro to HTML

Finding a Web Browser

A web browser is essentially the tool that one uses to navigate the internet. While there are
slight differences with the layout and appearances of these browsers they do basically the same
task. Most Computer Operating Systems come with one of these already installed.

On Microsoft Windows Operating System, the pre-installed web browser is called Internet
Explorer. This is the browser that we will be using in this class. Apple’s Macintosh Computers use
a browser called Safari. Mozilla’s Firefox is also very widely used. The table below displays the
statistics for the frequency of web browsers used throughout the world in 2009.

Other Companies such as Google have jumped into the web browser race, but have yet to
be as successful as these other companies in this endeavor.

Microsoft Apple Safari Mozilla Firefox Google Chrome Opera 10

Internet Explorer

2009 IE 6 IE 7 IE 8 Firefox Chrome Safari Opera

August 13.6% 15.1% 10.6% 47.4% 7.0% 3.3% 2.1%
July 14.4% 15.9% 9.1% 47.9% 6.5% 3.3% 2.1%
June 14.9% 18.7% 7.1% 47.3% 6.0% 3.1% 2.1%
May 14.5% 21.3% 5.2% 47.7% 5.5% 3.0% 2.2%
April 15.4% 23.2% 3.5% 47.1% 4.9% 3.0% 2.2%
March 17.0% 24.9% 1.4% 46.5% 4.2% 3.1% 2.3%
February 17.4% 25.4% 0.8% 46.4% 4.0% 3.0% 2.2%
January 18.5% 25.7% 0.6% 45.5% 3.9% 3.0% 2.3%
Source: http://www.w3schools.com/browsers/browsers_stats.asp

While these web browsers may have slightly different appearances and functionality they
all read the same (in computing terms) “languages.” When creating a webpage, it is often a good
idea to preview how the site will look to users using some of these other programs.

IMPORTANT: In order for our website to be successful we have to always review the coding that
we are writing to ensure that there are no errors. While some simple errors may be automatically
understood and interpreted by the Major Browsers, they may not be legible in others.

Mr. Smith 3 Sachem High School North Campus

Introduction to Website Design Fall 2009 Intro to HTML

Planning your website

A Website is a group of related Web Pages, all hyperlinked together and hosted on a server.
Before you start writing the HTML to create a site’s pages, it is a good idea to do some planning.

Know Your Audience. It is very important that you understand the audience that will be viewing
your website. It is important to understand their technical ability so that you can use language they
are comfortable with. Also it will become necessary to know what images, videos, or other content
that they will want to see to appeal to them.

In my opinion it is also important to know what your website intends to accomplish, and how you
can get users to this end in a means that they will be able to understand. Here is a good example:

Homepage of the United States Social Security Administration at www.socialsecurity.gov

The Social Security Administration Website’s Goal is for informational purposes as well as to
allow users to apply online for Disability & Retirement Insurance Benefits.

Notice the lack of flashy videos or graphics, and the large buttons such as “Applying Online for
Retirement Benefits.” A key demographic of the audience viewing this website are Americans
over the age of 60. This is reflected also by the “Need Larger Text?” in the upper right-hand
corner and the spokesperson, Patty Duke, on the button that says “Retire Online: It’s so easy.”

Mr. Smith 4 Sachem High School North Campus

Introduction to Website Design Fall 2009 Intro to HTML

Planning the Homepage. As the Homepage is the first page that viewers will see it is important
that is concisely states the purpose of the website, as well as the information that the user can
expect to find on the site. Also ant Major links to pages within the site should be displayed. Also
users should be able to see this important information without having to immediately scroll down.

The Psychology of Web Performance. Another important factor we should remember when
building a website is that we want to try to keep the content of the site to a reasonable limit. The
more information as far as images, videos, & audio that are present on a page, the longer the page
will take to load.

Previous research has shown that user frustration increases when page load times exceed eight to
10 seconds, without feedback (Bouch, Kuchinsky, and Bhatti 2000, King 2003).

In a 2004 study, Fiona Nah found that the tolerable wait time (TWT) on non-working links without
feedback peaked at between 5 to 8 seconds (Nah 2004). Adding feedback, like a progress bar,
pushed the TWT to an average of 38 seconds.

Creating a Sitemap. Before creating a website, it is important to outline what information and
pages will be contained within the site. There are 3 main different types of Sitemap outlines:

 Hierarchical Structure: This layout resembles a pyramid, with the Homepage at

the top and other pages fanning out from there. This type of structure might be
compared to a company’s organizational chart or a family tree. Hierarchical layouts
are appropriate for sites with categorized content.

 Linear Structure: A Linear site layout moves the user step-by-step each page
progressing to the next like the pages in a book. This type of layout is good for
presenting instructions or a narrative story. Each page usually links to the previous
and next pages.

 Spider Web Structure: This is probably the simplest form but often times
successful. There is a link on every page to every other page.

Mr. Smith 5 Sachem High School North Campus

Introduction to Website Design Fall 2009 Intro to HTML

Starting out our first HTML Page

The basic HTML page begins with the tag <HTML> and ends with </HTML>

In between, the file has 2 sections – the header and the body.

The Header – enclosed by the <HEAD> and </HEAD> tags – contains information about a page

that won’t appear on the page, such as the title of the page.

The Title – enclosed by the <TITLE> and </TITLE> tags – contains the title of the

webpage. It will appear in the blue bar at the top of the browser’s window.

The Body – enclosed by the <BODY> and </BODY> – this is where the action is! Everything

that appears on the page is contained in between these tags.

Heading Text – enclosed by <H1> and </H1> – this creates a bold Heading.

Paragraph Text – enclosed by <P> and </P> – this creates a new paragraph on the page

HTML code can look something like this:

<Html>

<Head>
<Title>The United States Space Program</Title>
</Head>

<Body>
<H1>The Apollo 11 Program</H1>
<p>On July 20, 1969 the United States was the first nation to land on the Moon.</p>
<p>The Lunar Module was built on Long Island by Engineers at Grumman.</p>
</Body>

</Html>
As you can see, there are 2 sections. Don’t forget that the Title in the heading will not

appear on the page, but in the blue bar at the top of your computer screen.

Also when coding, it is not necessary for HTML tags to be in Capital Letters.

Mr. Smith 6 Sachem High School North Campus

Introduction to Website Design Fall 2009 Intro to HTML

Introduction to HTML Guided Practice

Take a look at the code we have already seen. Here is some more code for you to look at so you

have an idea as to what HTML code is and how it works. See if you can see this simple code in

your web Browser.

Directions:

 Open Notepad (under the Accessories folder)

 Save the file as: webpage1.html

 It is essential that website files end with the extension .html

 Type the text and tags below into Notepad:

<Html>

<Head>
<Title>Headings and Paragraphs</Title>
</Head>

<Body>

<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>

<p>This creates a new Paragraph.</p>

<p>Here is the Second Paragraph.</p>
<p>Paragraph text is a set size.</p>

</Body>

</Html>
 Save the file again

 View the document in the browser (go to My Documents and double click on the file that
has a blue e)

Mr. Smith 7 Sachem High School North Campus

Introduction to Website Design Fall 2009 Intro to HTML

Including “Metadata” in a Website

“Metadata” or “data about data,” is general

information that can describe the page that you are on. It can
give more details about the page, such as a page description,
authoring information, copyrights, keywords, and more.
Although metadata does not appear on the web page itself, the
information you insert in the metadata tags is useful with search engines that glean information
about your page. Keywords and page descriptions are the most common data web developers
enter into the metadata tags. However, metadata is also a great source for other web page
developers, enabling them to see who you are and what sort of notes or techniques you applied to
create your page.

Here are the 4 Main Types of Metadata that we will be including in our websites:

Metadata appears within the <HEAD> and </HEAD> tags. Most times the Metadata appears after
the <TITLE> and </TITLE> tags.

To add an author name:

Include this tag (Replacing “My Name” with your name)

<META NAME=“Author” CONTENT=“My Name”>

To add a page description:

Include this tag (Replacing “Page description” with your own description of what is on the page)

<META NAME=“Description” CONTENT=“Page description”>

To specify keywords: (This is for search engines.)

Include this tag (Replacing “My keywords” with keywords that would describe the page.)

<META NAME=“Keywords” CONTENT=“My keywords”>

To add a copyright:

Include this tag (Replacing “2009” with your own numbers or copyright information.)

<META NAME=“Copyright” CONTENT=“2009”>

Mr. Smith 8 Sachem High School North Campus

Introduction to Website Design Fall 2009 Intro to HTML

Customizing HTML Tags

As we will find out later, many of the basic HTML tags can be edited to include more information
about what the website should display.

A good way to showcase this is with our paragraph tags: <p> and </p>

Recall earlier that we mentioned that anytime we want “regular text” to appear in the body of a
webpage we include these tags.

For Example, here is a section of some web coding:

<Html>

<Head>
<Title>Music History</Title>
</Head>

<Body>

<H1>Classical Music</H1>

<p>Famous Composers of Classical Music </p>

<p>J.S. Bach (1685-1750) </p>
<p>Beethoven (1770-1827) </p>
<p>Chopin (1810-1849) </p>
<p>Gershwin (1898-1937) </p>
<p>Haydn (1732-1809) </p>
<p>Mozart (1756-1792) </p>
<p>Sibelius (1865-1957) </p>
<p>Tchaikovsky (1840-1893) </p>
<p>Information Courtesy of www.geocities.com/Vienna/Choir/3228/ </p>

</Body>

</Html>

Now let’s customize these tags. By editing inside the tags we can change how the tag carries out
its function. For Example in the above coding, if we want the Heading: Classical Music and the
first paragraph to be aligned in the center we would include the align attribute like this:

<H1 align=“Center”>Classical Music</H1>

<p align=“Center”>Famous Composers of Classical Music</p>

Mr. Smith 9 Sachem High School North Campus

Introduction to Website Design Fall 2009 Intro to HTML

The Align attribute

The Align Attribute can be very helpful to include in a tag. Here are the 3 main types of alignment.

Also I would like to mention that the line-break tag which looks like: <br> is the HTML
equivalent to hitting the Enter-key on the keyboard inserting what’s called a “line-break.”

I. Aligning to the Left: <......align=“Left”> (The Default Setting)

<p align=“Left”> Somebody once told me the world is gonna roll me
<br>I ain't the sharpest tool in the shed
<br>She was looking kind of dumb with her finger and her thumb
<br>In the shape of an "L" on her forehead

Somebody once told me the world is gonna roll me

I ain't the sharpest tool in the shed
She was looking kind of dumb with her finger and her thumb
In the shape of an "L" on her forehead

II. Aligning Center: <......align=“Center”>

<p align=“Center”> Just a small town girl, livin’ in a lonely world

<br>She took the midnight train goin’ anywhere
<br>Just a city boy, born and raised in south Detroit
<br>He took the midnight train goin’ anywhere

Just a small town girl, livin’ in a lonely world

She took the midnight train goin’ anywhere
Just a city boy, born and raised in south Detroit
He took the midnight train goin’ anywhere

III. Aligning Right: <......align=“Right”>

<p align=“Right”>She says we've got to hold on to what we've got

<br>It doesn't make a difference if we make it or not
<br>We got each other and that's a lot
<br>For love we'll give it a shot!

She says we've got to hold on to what we've got

It doesn't make a difference if we make it or not
We got each other and that's a lot
For love we'll give it a shot!

Mr. Smith 10 Sachem High School North Campus

Introduction to Website Design Fall 2009 Intro to HTML

Editing the Font

Now that we have discussed how to fix the alignment of the text, let’s talk about how to
change the font. When we talk about font we are referring mainly to the style and size of the text.

You can change the font of your text using the Font tags, <FONT> and </FONT>, along
with the FACE attribute. You can use the attribute to specify a font by name. Not all web
browsers can display a variety of fonts. It is best to assign common fonts typically found on
computers, such as, “Times New Roman” and “Arial.” It is also a good idea to list more than one
font name in the FACE attribute, in case the first font is not available on the viewer’s computer.

The Font Face Attribute could be used in this context: <Font Face=“font name”>

<font face=“Century Gothic”>

<p>This sentence appears in the font, Century Gothic. </p>
</font>

<font face=“Cambria”>
<p>While this sentence appears in the font: Cambria. </p>
</font>

<font face= “Comic Sans MS”>

<p>Comic Sans MS is kind of a goofy type of Font. </p>
</font>

<font face= “Calibri, Arial, Sans Serif”>

<p>This font will be Calibri but if the viewer cannot view that font on his/her
computer it will switch to Arial, then Sans Serif (if Arial is unavailable). </p>
</font>

If typed in correctly should display on a webpage:

This sentence appears in the font, Century Gothic.

While this sentence appears in the font: Cambria.

Comic Sans MS is kind of a goofy type of Font.

This font will be Calibri but if the viewer cannot view that font on his/her computer it will switch
to Arial, then Sans Serif (if Arial is unavailable).

Mr. Smith 11 Sachem High School North Campus

Introduction to Website Design Fall 2009 Intro to HTML

Introduction to HTML Guided Practice 2

This time we will experiment with a few of the codes that we have seen before. Something that is a
little different this time, we will be overwriting previous codes instead of constantly closing
them. What this means is that some codes we can simply change the value so that anything only
text that follows will change.

Open a new file in notepad, save as Webpage2.html and enter the following codes:

<Html>

<Head>
<Title>Fonts & Sizes Practice</Title>
<Meta Name=“Author” Content=“Art Vandelay”>
<Meta Name=“Description” Content=“Practice with Fonts & Sizes”>
<Meta Name=“Keywords” Content=“Fonts, Sizes, Practice”>
<Meta Name=“Copyright” Content=“2009”>
</Head>

<Body>
<H1 align=“Center”>Here are Some Different Fonts & Sizes:</H1>
<br>
<font face=“Arial” size=“1”>
<p>Arial Size 1 </p>
<font size=“3”>
<p>Arial Size 3 </p>
<font size=“5”>
<p>Arial Size 5 </p>
<br>
<font face=“Courier New”>
<p>Courier New Size 5 </p>
<font size=“3”>
<p>Courier New Size 3 </p>
<font size=“1”>
<p>Courier New Size 1 </p>
</font>
</Body>

</Html>
 Save the file again & View in Internet Explorer

Mr. Smith 12 Sachem High School North Campus

Introduction to Website Design Fall 2009 Intro to HTML

BIBLIOGRAPHY

Bouch, A., Kuchinsky, A., and N. Bhatti, "Quality is in the Eye of the Beholder: Meeting Users'
Requirements for Internet Quality of Service,"in CHI 2000 (The Hague, The Netherlands:
April 1-6, 2000), 297-304.

Browser Statistics." W3Schools Online Web Tutorials. Web. 13 Sept. 2009.

<http://www.w3schools.com/browsers/browsers_stats.asp>.

"Internet."Encyclopædia Britannica. 2009. Encyclopædia Britannica 2006 Ultimate Reference

Suite DVD 11 July 2009 .

King, A., 2003, Speed Up Your Site: Web Site Optimization Indianapolis: New Riders, 2003, 25.

Nah, F., "A study on tolerable waiting time: how long are Web users willing to wait?"

Behaviour & Information Technology 23, no. 3 (2004): 153-163.

Social Security Online - The Official Website of the U.S. Social Security Administration. Web. 13

Sept. 2009. <http://www.socialsecurity.gov>.

"What is HTML." New Media Center of Loyola College. Web. 13 Sept. 2009.

<http://nmc.loyola.edu/intro/html/tags.htm>.

Wooldridge, Mike, and Linda Wooldridge. Teach Yourself Visually: HTML and CSS. Indianapolis,

IN: Wiley, Inc., 2008. Print.

Mr. Smith 13 Sachem High School North Campus

Introduction to Website Design Fall 2009 Intro to HTML

Introduction to HTML Independent Practice

Using the information that we’ve gone over in this chapter, create a webpage that meets the criteria
below.

 Open a new file in Notepad, save as MyWebpage.html.

Here are the Conditions:

A) Create a webpage with the Title: My First Webpage

B) Include Metadata that states your Name & Copyright 2009

C) Include a Heading of any size that is Centered in the Page and says: Web Design 101

D) Include 2 Paragraphs (Sentences) that state something about you.

Please Print the Coding & if possible the webpage itself and bring to the next class.

Mr. Smith 14 Sachem High School North Campus