1. 1 Introduction to HTML Joshua S. Simon Collective Technologies

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

4. 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. 5 Creating HTML documents  Plain text file  Specific format  Markup tags

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

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

8. 8 A simple HTML document: results  Generates:

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

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

11. 11 Using HEAD and TITLE : results  Generates:

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

13. 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. 14 Example of new colors 

15. 15 Example of new colors: results  Generates:

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

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

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

19. 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. 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. 21 Ordinary paragraphs: result  Generates:

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

24. 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. 25 Horizontal rules: results

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

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

28. 28 Bullet lists: example  HTML HTTP CGI

29. 29 Bullet lists: result

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

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

32. 32 Ordered lists: result

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

35. 35 Definition lists: result

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

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

38. 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. 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. 40 PRE and CODE results  The two examples generate:

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

42. 42 Comment examples 

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

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

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

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

47. 47 Character formatting results

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

50. 50 Changing the font: results

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

52. 52 Other 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. 53 Hypertext references  Static documents are nice  Hypertext-linked documents are better  A container provides hypertext anchors

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

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

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

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

58. 58 Address block results

59. References  HTTP specification: http://www.w3.org/pub/WWW/Protocols/  HTML specification: http://werbach.com/barebones/

60. 60 Questions