Essentials of Essentials of HTML HTML

Instructor: Jeanne Hart

Your

Inst

ruct

or

Your

Inst

ruct

or

II have been designing web sites for have been designing web sites for almost 20 years.almost 20 years.

I worked as a part of a Web Team for I worked as a part of a Web Team for the State of NJ Judiciary.the State of NJ Judiciary.

I’m a stickler for proper HTML code!I’m a stickler for proper HTML code! I have a BA in Art History and a I have a BA in Art History and a

Masters in Education in Adult and Masters in Education in Adult and Distance Learning.Distance Learning.

I can be reached by email at: I can be reached by email at: jhartmccc@verizon.netjhartmccc@verizon.net

What

you s

hould

What

you s

hould

ex

pect

fro

m m

e

expect

fro

m m

e I will be here on timeI will be here on time

I will teach all 4 classesI will teach all 4 classes

Hopefully I will make Hopefully I will make learning HTML a fun learning HTML a fun experienceexperience

I will always be available I will always be available for helpfor help

I ex

pect

fro

m

I ex

pect

fro

m

you:

you: to be on time to classto be on time to class

to attend all 4 classesto attend all 4 classes

to ask for help if you need to ask for help if you need itit

not to be afraid to offer not to be afraid to offer help help

not to be afraid of HTML not to be afraid of HTML codecode

have fun learninghave fun learning

Let’

s G

et

Let’

s G

et

Acq

uain

ted!

Acq

uain

ted!

What’

What’

s th

is c

lass

s th

is c

lass

all

about

all

about

In this class you will In this class you will learn why HTML is so learn why HTML is so important to the important to the internet.internet.

You will also learn the You will also learn the basic tags to create your basic tags to create your first HTML page and first HTML page and learn how to use HTML learn how to use HTML to add text and headings to add text and headings in your Web page and in your Web page and how to format your text.how to format your text.

What

is H

TM

L?

What

is H

TM

L? Does anyone know?Does anyone know?

Why

is t

his

so

Why

is t

his

so

import

ant?

import

ant?

Can’t anyone write for the web?Can’t anyone write for the web?

How

do t

hey

How

do t

hey

work

?w

ork

?

Languages such as Languages such as HTML, serve an HTML, serve an important purpose when important purpose when it comes to sharing it comes to sharing information over long information over long distances.”distances.”

How

does

it w

ork

How

does

it w

ork

co

n’

con’ tt

Your computer has a Web Your computer has a Web browser, such as Internet browser, such as Internet Explorer or FireFox, or Chrome Explorer or FireFox, or Chrome installed on it. First, your installed on it. First, your browser has to find the browser has to find the computer that is storing that computer that is storing that information and it does this information and it does this using the HTTP. using the HTTP. The storage computer, or The storage computer, or server, sends the new web page server, sends the new web page (as a plain text file) back to your (as a plain text file) back to your computer using the same HTTP. computer using the same HTTP. Finally, and this is what you Finally, and this is what you need to know, the browser sees need to know, the browser sees the new Web page and the new Web page and interprets the text and HTML interprets the text and HTML tagstags to show you the to show you the formatting, graphics, and text formatting, graphics, and text that appear on the page.that appear on the page.

Usi

ng W

eb

Usi

ng W

eb

Bro

wse

rsB

row

sers

As great as Web As great as Web browsers are, you should browsers are, you should be aware that they have be aware that they have limitations!limitations!

Bro

wse

rs c

on’t

Bro

wse

rs c

on’t

Some older browsers do not Some older browsers do not understand the newer HTML understand the newer HTML commands and might produce commands and might produce errors rather than text. errors rather than text.

What's more, some of the What's more, some of the newest browsers enable newest browsers enable viewers to determine which viewers to determine which window display sizes, fonts, window display sizes, fonts, and colors they prefer when and colors they prefer when viewing Web pages (even if viewing Web pages (even if those settings are different those settings are different from what you, the Web from what you, the Web author, want them to see) author, want them to see)

Gett

ing C

onnect

ed

Gett

ing C

onnect

ed

You can create Web page files in any You can create Web page files in any plain text editor and view them in any plain text editor and view them in any browser but, you have to decide how browser but, you have to decide how you are going to store the files. you are going to store the files.

You already know that you can't surf the You already know that you can't surf the Net without having an Internet Service Net without having an Internet Service Provider (ISP). Provider (ISP).

In the same way, you need a Web In the same way, you need a Web Presence Provider (WPP) or an ISP or Presence Provider (WPP) or an ISP or your own Web server to store your pages your own Web server to store your pages before they can be viewed from the Web. before they can be viewed from the Web.

Usi

ng G

ood F

orm

Usi

ng G

ood F

orm

#

1#

1Tonight, you will create a template Tonight, you will create a template for yourself that already includes the for yourself that already includes the tags that you need to create your tags that you need to create your first web page. first web page. Then, when ever you want to create Then, when ever you want to create a new Web page you will be able to a new Web page you will be able to open your template file, add your open your template file, add your new text, and save the new file.new text, and save the new file.

Usi

ng G

ood F

orm

Usi

ng G

ood F

orm

#2

#2

Usi

ng G

ood F

orm

Usi

ng G

ood F

orm

#

3#

3

Ok

let’

s get

Ok

let’

s get

start

ed!

start

ed!

The next thing you The next thing you have to do is give the have to do is give the page a DOCTYPE, page a DOCTYPE, which by the way is which by the way is the only tag in HTML the only tag in HTML that uses all caps!that uses all caps!

Why, you ask, must I Why, you ask, must I do this?do this?

You a

dd a

Yo

u a

dd a

D

OC

TYPE

DO

CTYPE

beca

use

…beca

use

… Adding a DOCTYPE is Adding a DOCTYPE is

what the browser is what the browser is going to look at first!”going to look at first!”

What

will

the

What

will

the

DO

CTYPE lo

ok

DO

CTYPE lo

ok

like?

like?

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

There

3 t

ypes

of

There

3 t

ypes

of

Doct

ype

Doct

ypeThe <!DOCTYPE> tag The <!DOCTYPE> tag

has three variations: has three variations: StrictStrictTransitionalTransitional

Frameset Frameset You declare which one You declare which one

you are using in the top you are using in the top of the file.of the file.

HTML isn ‘t as difficult as HTML isn ‘t as difficult as you might think. It’s a you might think. It’s a language that just language that just includes an opening tag includes an opening tag like this, <p> and a like this, <p> and a closing tag like one</p>closing tag like one</p>

Any guess what the <p> Any guess what the <p> stands for?stands for?

What

exact

ly a

re

What

exact

ly a

re

HTM

L ta

gs?

HTM

L ta

gs?

Cre

ati

ng Y

our

Fir

st P

age

Cre

ati

ng Y

our

Fir

st P

age

You can create Web pages using You can create Web pages using some some WYSIWYG WYSIWYG programs, for programs, for now younow you’ll concentrate on ’ll concentrate on learning HTML and use Note Pad learning HTML and use Note Pad for all your labs.for all your labs.

What

exact

ly a

re

What

exact

ly a

re

the r

equir

ed

the r

equir

ed

ele

ments

?ele

ments

? After the DOCTYPE, After the DOCTYPE, every HTML document every HTML document must begin with the must begin with the <html> <html> tag and end with tag and end with its compliment, the its compliment, the </html> </html> tag. tag.

A w

eb p

age h

as

2

A w

eb p

age h

as

2

part

s!part

s!

All HTML documents are All HTML documents are separated into two parts:separated into two parts:

the the headhead and the and the bodybody.. Because the title Because the title

contains information contains information about the document, the about the document, the <title> and closing <title> and closing </title> tags are placed </title> tags are placed within the opening within the opening <head> and closing<head> and closing

</head> tags.</head> tags.

1. The h

ead t

ag

1. The h

ead t

ag 1.1. The opening The opening <head><head>

tag and the closing tag and the closing

</head></head> tags are used to tags are used to indicate any indicate any information about information about the document itself. the document itself. You'll learn how to You'll learn how to add some of this add some of this information in later information in later lessons.lessons.

2. The t

itle

tag

2. The t

itle

tag 2. The 2. The <title><title> and and </title></title>

tags are used to add a title tags are used to add a title to your browser's Title to your browser's Title bar. The Title bar is the bar. The Title bar is the colored band at the top of colored band at the top of any browser that gives the any browser that gives the name of the html page.name of the html page.

3. The b

ody

tag

3. The b

ody

tag

3. The opening 3. The opening <body><body> tag tag and and the closing the closing </body></body> tags are used to tags are used to surround surround any and all any and all content content that appears that appears in the HTML page.in the HTML page.And, there is only, And, there is only, everever, one opening , one opening body tag and one body tag and one closing!closing!

So…

…..

So…

…..

Your page would look

Your page would look

like this :like this :

a s

imple

web

a s

imple

web

page

page

If you were to create a simple HTML page, you If you were to create a simple HTML page, you would see that the four tags we just discussed would see that the four tags we just discussed are present in this documentare present in this document

Doctype – (the doctype always come first in any Doctype – (the doctype always come first in any html document)html document)

<html><html><head><head><title> <title> My First Web PageMy First Web Page

</title></title></head></head><body><body><p> <p> This is my First Web pageThis is my First Web page

</p></p></body></body></html> </html>

You s

hould

know

that

You s

hould

know

that For now, almost all HTML tags For now, almost all HTML tags

come in pairs. come in pairs. You use the first tag in the pair You use the first tag in the pair

(for example, <html>) to tell the (for example, <html>) to tell the computer to computer to start applyingstart applying the format. the format.

You use the second tag (for You use the second tag (for example, </html>) requires a example, </html>) requires a slash in front of the tag name slash in front of the tag name that that tells the computer to tells the computer to stop applying that stop applying that formatformat. .

Tip C

on’t

Tip C

on’t

The first tag is usually The first tag is usually referred to by the name referred to by the name within the bracket, for within the bracket, for example, opening html example, opening html tag. tag.

You can refer to the You can refer to the second tag as the the second tag as the the closing tag, for closing tag, for example, closing html example, closing html tag.tag.

Savi

ng a

nd V

iew

ing

Savi

ng a

nd V

iew

ing

your

page

your

page To view your own page in a To view your own page in a

browser, you must first save browser, you must first save it. Because you've created it. Because you've created an HTML document, you an HTML document, you want to save your file with want to save your file with an .htm extension (first.htm, an .htm extension (first.htm, for example) so that you for example) so that you recognize it quickly.recognize it quickly.

You should also be aware You should also be aware of difference between html of difference between html and htmand htm

Cauti

on

Cauti

on

Some people prefer to Some people prefer to name their HTML files name their HTML files with an .html extension with an .html extension (for example, (for example, first.html). Some older first.html). Some older computer systems, computer systems, however, still require however, still require the file extension to be the file extension to be three characters or three characters or fewer and might have fewer and might have trouble reading (or trouble reading (or storing) a file with a storing) a file with a longer extension.longer extension.

Previ

ew

ing y

our

Previ

ew

ing y

our

page

page

You can preview any HTML file in You can preview any HTML file in your browser, even when that file your browser, even when that file is stored on your computer rather is stored on your computer rather than on a Web server. than on a Web server.

In Internet Explorer, you can view In Internet Explorer, you can view your new file by selecting Open your new file by selecting Open from the File menu and finding from the File menu and finding the page you created to view.the page you created to view.

Para

gra

phs

Para

gra

phs In HTML, a paragraph is created In HTML, a paragraph is created

whenever you insert text between the whenever you insert text between the <p> tags.<p> tags.

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

<html <html xmlns="http://www.w3.org/199xmlns="http://www.w3.org/1999/xhtml">9/xhtml">

<head><title><head><title>My HTMLMy HTML PagePage</title></head></title></head> <body><body> <p>This is my first HTML page.</p><p>This is my first HTML page.</p> </body></body> </html> </html>

Para

gra

phs

–

Para

gra

phs

– co

n’

con’ tt Web browsers see Web browsers see

that you want a that you want a paragraph and they paragraph and they display it. display it.

Web browsers don't Web browsers don't pay any attention to pay any attention to how many blank lines how many blank lines you put in your text; you put in your text; they only pay they only pay attention to the HTML attention to the HTML tags. tags.

Para

gra

phs

–

Para

gra

phs

– co

n’

con’ tt In the following HTML In the following HTML

code, you see several lines code, you see several lines of text and even a blank of text and even a blank line, but the browser only line, but the browser only recognizes paragraphs recognizes paragraphs surrounded by the <p> surrounded by the <p> and </p> tags (or and </p> tags (or paragraph tags). The <p> paragraph tags). The <p> tag tells the browser to tag tells the browser to add a blank line before add a blank line before displaying any text that displaying any text that follows it. follows it.

Con’

Con’ tt

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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">lang="en">

<head><title>Typing Paragraphs in HTML</title><head><title>Typing Paragraphs in HTML</title>

</head></head>

<body><body>

<p>This is the first paragraph. But is this the second?</p> <p>This is the first paragraph. But is this the second?</p>

<p>No, this is.</p><p>No, this is.</p>

</body></body>

</html></html>

Tip

Tip

Web browsers do something else with Web browsers do something else with paragraph text that you should be aware paragraph text that you should be aware of: of:

They wrap the text at the end of the They wrap the text at the end of the browser window. In other words, when the browser window. In other words, when the text in your Web page reaches the edge of text in your Web page reaches the edge of the browser window, it automatically the browser window, it automatically continues on the next line regardless of continues on the next line regardless of where the <p> is located.where the <p> is located.

The <p> tag always adds a blank lineThe <p> tag always adds a blank line, but , but you might not always want a blank line you might not always want a blank line between lines of text. Sometimes you just between lines of text. Sometimes you just want your text to appear on the next line want your text to appear on the next line (such as the lines of an address or a (such as the lines of an address or a poem). You can use a new tag for this: the poem). You can use a new tag for this: the line break, or <br /> tag line break, or <br /> tag

Text

Em

phasi

s

Text

Em

phasi

sYou will occasionally want to You will occasionally want to

add emphasis to your text to add emphasis to your text to make it stand out. make it stand out.

HTML enables you to quickly HTML enables you to quickly apply some standard formats, apply some standard formats, such as boldface and italic, such as boldface and italic, using a predefined set of tags. using a predefined set of tags.

<em> </em> for italics and <em> </em> for italics and <strong> </strong> for bold<strong> </strong> for bold

Cauti

on

Cauti

on

Other formatting tags exist in Other formatting tags exist in HTML, but their use is discouraged HTML, but their use is discouraged in HTML in favor of style sheets. in HTML in favor of style sheets.

Import

ant

term

s

Import

ant

term

s to

rem

em

ber

to r

em

em

ber

Deprecated Tags - Some Deprecated Tags - Some older HTML tags, older HTML tags, specifically related to specifically related to formatting, have been formatting, have been replaced by the replaced by the formatting capabilities of formatting capabilities of style sheets. style sheets.

Style Sheets - Web Style Sheets - Web developers use style developers use style sheets to specify sheets to specify formatting instructions for formatting instructions for a single document or a a single document or a group of documents.group of documents.

Headin

gs

Headin

gs Separating your text into Separating your text into

paragraphs isn't the only paragraphs isn't the only way to format your Web way to format your Web pages. pages.

HTML enables you to add HTML enables you to add six different heading tags six different heading tags to your pages by using the to your pages by using the tags <h1> through<h6>. tags <h1> through<h6>. These tags are very simple These tags are very simple to use. Letto use. Let’s look at them:’s look at them:

Headin

gs

con’t

Headin

gs

con’t

<h1><h1>This is Heading This is Heading 11</h1> </h1> The closing heading tags The closing heading tags also create an automatic also create an automatic paragraph break. In other paragraph break. In other words, all headings words, all headings automatically include a blank automatically include a blank line to separate them from the line to separate them from the text. Heading 1, the <h1> tag, text. Heading 1, the <h1> tag, has the largest font of the has the largest font of the heading tags andheading tags and Heading 6, the <h6> tag, Heading 6, the <h6> tag, has the smallest. In fact, you has the smallest. In fact, you usually only see Web page usually only see Web page authors use the authors use the <h1><h2><h3> <h1><h2><h3> tags tags because the remaining tags, because the remaining tags, <h4><h5><h6>, <h4><h5><h6>, are actually are actually smaller than normal text. smaller than normal text.

Tip

Tip Unless you or the Unless you or the

people viewing your people viewing your pages have adjusted pages have adjusted the browser's default the browser's default settings, normal settings, normal HTML body text HTML body text appears in 12 point appears in 12 point Times New Roman Times New Roman font on most font on most computer systems.computer systems.

Text

form

att

ing

Text

form

att

ing

tags

tags For tonight they will include:

For tonight they will include:

DOCTYPEDOCTYPE

Html tagHtml tag

Head tagHead tag

Title tagTitle tag

Heading tags

Heading tagsParagraph tag <p></p>

Paragraph tag <p></p>Bold tag <strong> </strong>

Bold tag <strong> </strong>

Emphasis tag <em> </em>

Emphasis tag <em> </em>

Tip

Tip Here's a special character Here's a special character

that you should remember: that you should remember: &nbsp;&nbsp;

The symbol stands for The symbol stands for nonbreaking space and is used nonbreaking space and is used to insert a space inside an to insert a space inside an HTML document. HTML document.

HTML ignores extra spaces HTML ignores extra spaces between words and tags so between words and tags so you'll need to have a way of you'll need to have a way of including extra spaces. including extra spaces.

You can do that with the You can do that with the &nbsp; &nbsp; character.character.

Addin

g

Addin

g

Com

ments

Com

ments

A great tag to remember A great tag to remember is the comment tagis the comment tag

It looks like this: <!- - It looks like this: <!- - text goes in here - ->text goes in here - ->

And where the text goes And where the text goes can be any text but it can be any text but it will not be seen by the will not be seen by the browser.browser.

Refr

esh

tag

Refr

esh

tag

If you have a page that you If you have a page that you update several times a day and update several times a day and you want to make sure that you want to make sure that people always see the most people always see the most recent version, you can enter recent version, you can enter the page's own URL in the the page's own URL in the refresh tag. When the browser refresh tag. When the browser sees the refresh tag, it presents sees the refresh tag, it presents the requested URL in the the requested URL in the specified time.specified time.<meta http-equiv="refresh" <meta http-equiv="refresh" content="time in seconds, URL for this page" /> content="time in seconds, URL for this page" />

Why might that be helpful on a Why might that be helpful on a web and on what type of page?web and on what type of page?

Tonig

ht

Tonig

ht ’’s

s Sum

mary

Sum

mary Tonight you learned Tonight you learned about:about:

1.1.The DOCTYPEThe DOCTYPE

2.2.the 4 basic tags to the 4 basic tags to create a web pagecreate a web page

3.3. how to format the how to format the text on your pagestext on your pages

4.4. how to add how to add comments to your web comments to your web pagepage

Sum

mary

for

Sum

mary

for

tonig

ht

tonig

ht

You also learned about:You also learned about:•Web browsersWeb browsers

• the DOCTYPEthe DOCTYPE

• 4 basic tags needed to create web pages4 basic tags needed to create web pages

• the html tag, the head tag, the body tag the html tag, the head tag, the body tag and all their closing tagsand all their closing tags

•Tags to format the text for your web pagesTags to format the text for your web pages

End o

f C

lass

1

End o

f C

lass

1Take 15 minutes and when Take 15 minutes and when

you come back you’you come back you’ll be ll be doing the labs for tonightdoing the labs for tonight