1 Introduction to HTML Joshua S. Simon Collective Technologies

1

Introduction to HTMLIntroduction to HTML

Joshua S. SimonCollective Technologies

2

OverviewOverview

What a URL is How the HTTP protocol works How to create a simple HTML document How to add hypertext links How to add color and graphics

3

Uniform Resource Locator Uniform Resource Locator (URL)(URL)

Format: protocol://user:password@server:port /path/document[#reference|?query]

Not all fields always required

4

HyperText Transfer Protocol HyperText Transfer Protocol (HTTP)(HTTP)

Client sends request (HEAD, GET, PUT) Server replies with

response code (3-digit) response text (string) document (depending on code)

Client displays document or error to user

5

Creating HTML documentsCreating HTML documents

Plain text file Specific format Markup tags

6

Format of an HTML Format of an HTML documentdocument

Optional description HTML container Header Body Address

7

A simple HTML documentA simple HTML document

HTML code:<HTML>

<BODY>Hello, world!</BODY>

</HTML>

8

A simple HTML document: A simple HTML document: resultsresults

Generates:

9

Adding a title to the headerAdding a title to the header

The HEAD container The TITLE container The META tag The LINK container

10

Using Using HEADHEAD and and TITLETITLE

HTML code fragment:<HEAD> <TITLE>My First HTML</TITLE></HEAD>

11

Using Using HEADHEAD and and TITLETITLE: : resultsresults

Generates:

12

Body of the documentBody of the document

Default colors typically black-on-gray, blue links

Can change them on a per-document basis

13

Changing colorsChanging colors

BODY container options: BGCOLOR -- Document background color TEXT -- Color of the text ALINK -- Color of actively-selected links LINK -- Color of unfollowed links VLINK -- Color of followed links

Colors in the form #rrggbb

14

Example of new colorsExample of new colors

<BODY BGCOLOR=“#000000” TEXT=“#ff0000” LINK=“#00ffff” ALINK=“#ffff00” VLINK=“#ff00ff”>

15

Example of new colors: Example of new colors: resultsresults

Generates:

16

Making the body text Making the body text meaningfulmeaningful

“Hello world” isn’t too useful Document should have utility or nobody

will use (visit) it

17

Body text tagsBody text tags

Creating headers Creating paragraphs Creating lists Adding comments inside the code

18

Creating headersCreating headers

The H1 through H6 header containers Generates:

19

Creating paragraphsCreating paragraphs

P container defines a paragraph BR tag creates a line break HR tag creates a horizontal line PRE container defines preserved text CODE container defines code examples

20

Ordinary paragraphsOrdinary paragraphs

Can align with ALIGN={LEFT|CENTER|RIGHT}

This is a paragraph. The lines will wrap around in the browser until someone tells them to stop. I could go on and on and on here just to have a longer paragraph, but I won’t. Much.

21

Ordinary paragraphs: resultOrdinary paragraphs: result

Generates:

22

Line breakLine break

If we put a line break tag in the middle of the paragraph:This is a paragraph. The lines will wrap around in the browser until someone tells them to stop. I could go on and on and on here just to have a longer paragraph, but I won’t. Much.

23

Line break: resultLine break: result

We get:

24

Horizontal rules as separatorsHorizontal rules as separators

What if we wanted to put a horizontal line across the page before the paragraph?<HR>This is a paragraph. The lines will wrap around in the browser until someone tells them to stop. I could go on and on and on here just to have a longer paragraph, but I won’t. Much.

25

Horizontal rules: resultsHorizontal rules: results

26

Creating listsCreating lists

Bullet (unordered) list Ordered list Definitions list Other lists

27

Bullet listsBullet lists

UL container defines list LI tag specifies an item Options to both:

TYPE={CIRCLE|DISC|SQUARE}

28

Bullet lists: exampleBullet lists: example

<UL TYPE=DISC> <LI>HTML <LI>HTTP <LI TYPE=CIRCLE>CGI</UL>

29

Bullet lists: resultBullet lists: result

30

Ordered listsOrdered lists

OL container defines list LI tag specifies an item Options to both:

TYPE={A|a|I|i|1} START=n

31

Ordered lists: exampleOrdered lists: example

<OL TYPE=1> <LI>Peel the banana <LI>Slice banana into dish <LI>Add three scoops of ice cream <LI>Add chocolate sauce</OL>

32

Ordered lists: resultOrdered lists: result

33

Definition listsDefinition lists

DL container defines list Option COMPACT suppresses automatic

newline between term and definition DT tag defines the term DD tag defines the definition

34

Definition lists: exampleDefinition lists: example

<DL> <DT>HTTP <DD>The HyperText Transfer Protocol; the means by which web browsers and web servers exchange information.</DL>

35

Definition lists: resultDefinition lists: result

36

Other list containersOther list containers

BLOCKQUOTE -- offset quotation by an indent level

DIR -- directory listing MENU -- menu of options

37

Code and examplesCode and examples

Other paragraph containers for code and examples include: PRE Preserve XMP Example (deprecated; unused) CODECode

38

PREPRE container container

Defines the font as monospaced (Courier) Still interprets HTML inside the PRE

container Example (all on one line):<PRE>This is an example of PRE.</PRE>

39

CODECODE container container

Just like PRE except Dont need to escape < > and & HTML inside the CODE container is not

interpreted Example (all on one line):<CODE>This is an example of CODE.</CODE>

40

PREPRE and and CODECODE results results

The two examples generate:

41

Adding commentsAdding comments

Asymmetric container tags  to end a comment Spaces required:

42

Comment examplesComment examples







43

Formatting charactersFormatting characters

Logical formatting Physical formatting Font changes Special characters

44

Logical character formattingLogical character formatting

CITE for citations (usually italics) EM for emphasis (usually italics) STRONG for strong emphasis

(usually boldface)

45

Physical character formattingPhysical character formatting

B for boldface I for italics TT for typewriter-text U for underlining

46

Character formatting Character formatting examplesexamples

The following characters are emphasized and given strong emphasis. Meanwhile, these are in boldface, italics, underlining, and <TT>typewriter text</TT>.

47

Character formatting resultsCharacter formatting results

48

Changing the fontChanging the font

The FONT container can adjust size SIZE={1..7} sets “absolute” size SIZE=+n goes n sizes higher (maximum 7) SIZE=-n goes n sizes lower (minimum 1)

49

Changing the font: exampleChanging the font: example

This text is normal,this is smaller,this is bigger.

50

Changing the font: resultsChanging the font: results

51

Handling special charactersHandling special characters

HTML reserves some characters: < > & Use character escapes to generate them in a

document < generates < > generates > & generates &

52

Other special charactersOther special characters

Can generate other symbols: © generates © ® generates ® " generates a quotation mark &#nnn; generates ASCII character nnn

List is online at http://www.w3.org/ pub/WWW/MarkUp/html-spec/ html-spec_13.html

53

Hypertext referencesHypertext references

Static documents are nice Hypertext-linked documents are better A container provides hypertext anchors

54

Hypertext referencesHypertext references

Provide a link to somewhere:<A HREF=“url”>

Provide a destination for a link:<A NAME=“reference”>

55

Hypertext reference examplesHypertext reference examples

<A HREF=“http://www.colltech.com/”> Click here for the CT home page.</A>

<A HREF=“http://www.clock.org/~jss/glossary/h.html#HTTP”>definition of HTTP</A>

<A NAME=“HTTP”></A><DT>HyperText Transfer Protocol (HTTP)<DD>...

56

Address blockAddress block

Typically in italics Should contain contact information

mailto: link to author revision date

57

Address block exampleAddress block example

<ADDRESS>Page last updated April 3, 1997, by<A HREF=“mailto:[email protected]”>Josh Simon</A>.</ADDRESS>

58

Address block resultsAddress block results

ReferencesReferences

HTTP specification:http://www.w3.org/pub/WWW/Protocols/

HTML specification:http://werbach.com/barebones/

60

QuestionsQuestions

Documents

1 Introduction to HTML Joshua S. Simon Collective Technologies