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
6
Format of an HTML Format of an HTML documentdocument
Optional description HTML container Header Body Address
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>
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”>
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
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}
<P>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.</P>
22
Line breakLine break
If we put a line break tag in the middle of the paragraph:<P>This is a paragraph. The lines will wrap around in the browser until someone tells them to stop.<BR>I could go on and on and on here just to have a longer paragraph, but I won’t. Much.</P>
24
Horizontal rules as separatorsHorizontal rules as separators
What if we wanted to put a horizontal line across the page before the paragraph?<HR><P>This is a paragraph. The lines will wrap around in the browser until someone tells them to stop.<BR>I could go on and on and on here just to have a longer paragraph, but I won’t. Much.</P>
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>
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>
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>
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 <B>example</B> 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 <B>example</B> of CODE.</CODE>
41
Adding commentsAdding comments
Asymmetric container tags <!-- to start a comment --> to end a comment Spaces required:<!-- this is a comment -->
42
Comment examplesComment examples
<!-- Copyright (c) 1999 Joshua S. Simon All rights reserved. -->
<!-- a paragraph about 1999 results would go here when announced -->
<!-- this section will be writtenlater -->
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
<P>The following characters are <EM>emphasized</EM> and given <STRONG>strong emphasis</STRONG>.<BR>Meanwhile, these are in <B>boldface</B>, <I>italics</I>, <U>underlining</U>, and <TT>typewriter text</TT>.</P>
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
<P>This text is normal,<FONT SIZE=-2>this is smaller</FONT>,<FONT SIZE=+2>this is bigger</FONT>.</P>
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>...<!-- this is in a DL list... -->
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>
ReferencesReferences
HTTP specification:http://www.w3.org/pub/WWW/Protocols/
HTML specification:http://werbach.com/barebones/