1 Introduction to HTML Joshua S. Simon Collective Technologies

2 Overview  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 (URL)  Format: protocol :// user : server : port / path / document [# reference |? query ]  Not all fields always required

4 HyperText Transfer Protocol (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 documents  Plain text file  Specific format  Markup tags

6 Format of an HTML document  Optional description  HTML container  Header  Body  Address

7 A simple HTML document  HTML code: Hello, world!

8 A simple HTML document: results  Generates:

9 Adding a title to the header  The HEAD container  The TITLE container  The META tag  The LINK container

10 Using HEAD and TITLE  HTML code fragment: My First HTML

11 Using HEAD and TITLE : results  Generates:

12 Body of the document  Default colors typically black-on-gray, blue links  Can change them on a per-document basis

13 Changing 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 colors 

15 Example of new colors: results  Generates:

16 Making the body text meaningful  “Hello world” isn’t too useful  Document should have utility or nobody will use (visit) it

17 Body text tags  Creating headers  Creating paragraphs  Creating lists  Adding comments inside the code

18 Creating headers  The H1 through H6 header containers  Generates:

19 Creating 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 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: result  Generates:

22 Line 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: result  We get:

24 Horizontal rules as separators  What if we wanted to put a horizontal line across the page before 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.

25 Horizontal rules: results

26 Creating lists  Bullet (unordered) list  Ordered list  Definitions list  Other lists

27 Bullet lists  UL container defines list  LI tag specifies an item  Options to both:  TYPE={CIRCLE|DISC|SQUARE}

28 Bullet lists: example  HTML HTTP CGI

29 Bullet lists: result

30 Ordered lists  OL container defines list  LI tag specifies an item  Options to both:  TYPE={A|a|I|i|1}  START= n

31 Ordered lists: example  Peel the banana Slice banana into dish Add three scoops of ice cream Add chocolate sauce

32 Ordered lists: result

33 Definition 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: example  HTTP The HyperText Transfer Protocol; the means by which web browsers and web servers exchange information.

35 Definition lists: result

36 Other list containers  BLOCKQUOTE -- offset quotation by an indent level  DIR -- directory listing  MENU -- menu of options

37 Code and examples  Other paragraph containers for code and examples include:  PRE Preserve  XMP Example (deprecated; unused)  CODE Code

38 PRE container  Defines the font as monospaced (Courier)  Still interprets HTML inside the PRE container  Example (all on one line): This is an example of PRE.

39 CODE container  Just like PRE except  Dont need to escape and &  HTML inside the CODE container is not interpreted  Example (all on one line): This is an example of CODE.

40 PRE and CODE results  The two examples generate:

41 Adding comments  Asymmetric container tags  <!-- to start a comment  --> to end a comment  Spaces required:

42 Comment examples 

43 Formatting characters  Logical formatting  Physical formatting  Font changes  Special characters

44 Logical character formatting  CITE for citations (usually italics)  EM for emphasis (usually italics)  STRONG for strong emphasis (usually boldface)

45 Physical character formatting  B for boldface  I for italics  TT for typewriter-text  U for underlining

46 Character formatting examples  The following characters are emphasized and given strong emphasis. Meanwhile, these are in boldface, italics, underlining, and typewriter text.

47 Character formatting results

48 Changing 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: example  This text is normal, this is smaller, this is bigger.

50 Changing the font: results

51 Handling special characters  HTML reserves some characters: &  Use character escapes to generate them in a document  < generates <  > generates >  & generates &

52 Other special characters  Can generate other symbols:  © generates ©  ® generates ®  " generates a quotation mark  &# nnn ; generates ASCII character nnn  List is online at pub/WWW/MarkUp/html-spec/ html-spec_13.html

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

54 Hypertext references  Provide a link to somewhere:  Provide a destination for a link:

55 Hypertext reference examples  Click here for the CT home page.  definition of HTTP  HyperText Transfer Protocol (HTTP)...

56 Address block  Typically in italics  Should contain contact information  mailto: link to author  revision date

57 Address block example  Page last updated April 3, 1997, by Josh Simon.

58 Address block results

References  HTTP specification:  HTML specification:

60 Questions