Introduction to HTML

Introduction to Website Design Fall 2009 Intro to HTML

Mr. Smith 1 Sachem High School North Campus

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 .

Introduction to Website Design Fall 2009 Intro to HTML

Mr. Smith 2 Sachem High School North Campus

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.

Introduction to Website Design Fall 2009 Intro to HTML

Mr. Smith 3 Sachem High School North Campus

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.

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.

Microsoft

Internet Explorer

Apple Safari Mozilla Firefox Google Chrome Opera 10

Introduction to Website Design Fall 2009 Intro to HTML

Mr. Smith 4 Sachem High School North Campus

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.”

Introduction to Website Design Fall 2009 Intro to HTML

Mr. Smith 5 Sachem High School North Campus

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.

Introduction to Website Design Fall 2009 Intro to HTML

Mr. Smith 6 Sachem High School North Campus

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.

Introduction to Website Design Fall 2009 Intro to HTML

Mr. Smith 7 Sachem High School North Campus

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)

Introduction to Website Design Fall 2009 Intro to HTML

Mr. Smith 8 Sachem High School North Campus

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”>

Introduction to Website Design Fall 2009 Intro to HTML

Mr. Smith 9 Sachem High School North Campus

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>

Introduction to Website Design Fall 2009 Intro to HTML

Mr. Smith 10 Sachem High School North Campus

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!

Introduction to Website Design Fall 2009 Intro to HTML

Mr. Smith 11 Sachem High School North Campus

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).

Introduction to Website Design Fall 2009 Intro to HTML

Mr. Smith 12 Sachem High School North Campus

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

Introduction to Website Design Fall 2009 Intro to HTML

Mr. Smith 13 Sachem High School North Campus

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.

Introduction to Website Design Fall 2009 Intro to HTML

Mr. Smith 14 Sachem High School North Campus

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.