2. Creating a Web portal: Part II HyperText Markup Language (HTML) Bair-Mundy

3. Surfing the 'Net Client Server Webserver application responds to requests from client Browser application sends requests to server

4. A word about HTML HyperText Mark-up Language

5. Manuscript Chapter One A Mysterious Visitor It was a dark and stormy night. As was my custom on a Friday night, I was curled up in my favorite armchair reading Cataloging & Classification. All of a sudden, I heard a loud “Tap, tap, tap” on the window. Wondering what type of person would be out and about on such a stormy night, I went over, pulled aside the curtain, and peered out into the darkness.

6. Marked-up manuscript Chapter One A Mysterious Visitor It was a dark and stormy night. As was my custom on a Friday night, I was curled up in my favorite armchair reading Cataloging & Classification. All of a sudden, I heard a loud “Tap, tap, tap” on the window. Wondering what type of person would be out and about on such a stormy night, I went over, pulled aside the curtain, and peered out into the darkness. B A ¶ fleur graphic b.f. ital. ¶

7. Paste-up Chapter One A Mysterious Visitor It was a dark and stormy night. As was my custom on a Friday night, I was curled up in my favorite armchair reading Cataloging & Classification. All of a sudden, I heard a loud “Tap, tap, tap” on the window. Wondering what type of person would be out and about on such a stormy night, I went over, pulled aside the curtain, and peered out into the darkness.

8. ASCII (text) file Chapter One A Mysterious Visitor It was a dark and stormy night. As was my custom on a Friday night, I was curled up in my favorite armchair reading Cataloging & Classification. All of a sudden, I heard a loud “Tap, tap, tap” on the window. Wondering what type of person would be out and about on such a stormy night, I went over, pulled aside the curtain, and peered out into the darkness.

9. HTML file Chapter One A Mysterious Visitor It was a dark and stormy night. As was my custom on a Friday night, I was curled up in my favorite armchair reading Cataloging & Classification. All of a sudden, I heard a loud “Tap, tap, tap” on the window. Wondering what type of person would be out and about on such a stormy night, I went over, pulled aside the curtain, and peered out into the darkness. HTML tags (instructions to the browser)

10. Web page Chapter One A Mysterious Visitor It was a dark and stormy night. As was my custom on a Friday night, I was curled up in my favorite armchair reading Cataloging & Classification. All of a sudden, I heard a loud “Tap, tap, tap” on the window. Wondering what type of person would be out and about on such a stormy night, I went over, pulled aside the curtain, and peered out into the darkness.

11. Coding a Web page Create an ASCII file with textual content Use HTML tags to format text and indicate where to place graphics Place file on Web server Open directory & file to public

12. Paired tags... The most important thing to remember is to remain calm. This is the first lesson to be learned. If you start to … HTMLDisplays as The most important thing to remember is to remain calm. This is the first lesson to be learned. If you start to …...

13. Single tags Hello. My name is Kimo. Hello. My name is Kimo. HTMLDisplays as Hello. My name is Kimo. Hello. My name is Kimo. Hello. My name is Kimo. Hello. My name is Kimo.

14. HTML tags

15. Two parts of a Web page

16. Head of a Web page donna’s LIS 670 test file page

17. Title tags

18. Head of a Web page donna’s LIS 670 test file page

19. Meta tags – Dublin Core http://dublincore.org/

20. Meta tags – Dublin Core http://dublincore.org/ Title Subject Description Type (e.g., image) Creator Publisher

21. Body of a Web page Material that will appear in the viewing window of the browser.

22. Adding a header My Web Portal Aloha, World!

23. Level 1 header

24. Header levels My Web Portal This is a level 2 header Aloha, World!

25. Header levels (cont'd)

26. Horizontally centering an item My Web Portal Not: My Web Portal

27. Centering an item (cont'd)

28. To a Web page in the same directory as the source file Adding a hot link Click here to go to my other file. Clickable text Link destination

29. To a Web page in a different location from the source file Adding a hot link Click here to go to the ALA Office of Intellectual Freedom Website. Full URL of Link destination

30. Using an image as a hot link IMG tells the browser to place image here SRC (source) tells the browser where to find the image URL of image in quotes

31. Creating paragraphs In our word processor we can just hit the Enter key a couple of times and we get a new paragraph. However, that does not work in HTML. Let’s see what this would look like if viewed in a browser. If we type this:

32. Creating paragraphs In our word processor we can just hit the Enter key a couple of times and we get a new paragraph. However, that does not work in HTML. Let’s see what this would look like if viewed in a browser. We get this:

33. Creating paragraphs In our word processor we can just hit the Enter key a couple of times and we get a new paragraph. However, that does not work in HTML. Let’s see what this would look like if viewed in a browser.

34. Creating paragraphs In our word processor we can just hit the Enter key a couple of times and we get a new paragraph. However, that does not work in HTML. Let’s see what this would look like if viewed in a browser.

35. Creating a table Neat stuff More neat stuff

36. Creating a table (cont'd)

37. Adding a table border Neat stuff More neat stuff

38. Adding a table border (cont'd)

39. Widening a table Neat stuff More neat stuff

40. Widening a table (cont'd)

41. Adding a row to the table Neat stuff More neat stuff Stupendous stuff Supercalifragilisticexpialidocious

42. Added row

43. Adding color to the table Neat stuff More neat stuff Stupendous stuff Supercalifragilisticexpialidocious

44. Added color

45. Adding color to specific cells Neat stuff More neat stuff Stupendous stuff Supercalifragilisticexpialidocious

46. Added color

47. Making table legible with colored rows Color makes row legible No color gives row contrast Color makes row legible... pink added no pink added pink added

48. Increased table legibility

49. Adding a style sheet donna’s Web portal cascading style sheet

50. Adding a style sheet donna’s Web portal h1 { color : green ; } h2 { color : blue ; }

51. Style-sheet rule SelectorDeclaration block h2 { color : blue ; } Property Value

52. Without a style sheet Basic HTML document with paragraphs Cascading Style Sheets Introduction Cascading Style Sheets (CSS) are used to format the way things appear on a Web page. When using Cascading Style Sheets HTML is used to provide structure and the style sheet is used to control how the elements look on the page. The Term The term "Style sheet" refers to a list of rules for formatting various elements. The word "Cascading" refers to the fact that you can have multiple style sheets which follow rules of precedence.

53. Without a style sheet

54. With a style sheet Basic HTML document with paragraphs h2 { color : blue ; } Cascading Style Sheets Introduction Cascading Style Sheets (CSS) are used to format the way things appear on a Web page. When using Cascading Style Sheets HTML is used to provide structure and the style sheet is used to control how the elements look on the page. The Term The term "Style sheet" refers to a list of rules for formatting various elements. The word "Cascading" refers to the fact that you can have multiple style sheets which follow rules of precedence.

55. With a style sheet

56. Add a little color to our header Basic HTML document with paragraphs h2 { color : blue ; background-color : pink ; } Cascading Style Sheets Introduction Cascading Style Sheets (CSS) are used to format the way things appear on a Web page. When using Cascading Style Sheets HTML is used to provide structure and the style sheet is used to control how the elements look on the page. The Term The term "Style sheet" refers to a list of rules for formatting various elements. The word "Cascading" refers to the fact that you can have multiple style sheets which follow rules of precedence.

57. Adding background color using our style sheet

58. Adding a style sheet donna’s Web portal body { background : #FFC0FF ; } h1 { color : green ; } h2 { color : blue ; }

59. Color coding in hexadecimal numbers #FFC0FF Red Green Blue RG B

60. Binary numbers 0 0 7 100 10 1 1 1 1 4 2 1 Base Ten 0 1 2 3 4 5 6 7 8 9 10 Base Two 0 1 10 11 100 101 110 111 1000 1001 1010

61. Hexadecimal numbers 2 5 5 100 10 1 F F 256 16 1 Base Ten 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Base 16 0 1 2 3 4 5 6 7 8 9 A B C D E F 10 001123456789ABCDEF Counting… 16 1 Decimal number Hexadecimal number 0

62. Coding black in hexadecimal numbers #000000 00

63. Coding red in hexadecimal numbers #FF0000 00 FF

64. Coding green in hexadecimal numbers #00FF00 00 FF

65. Coding blue in hexadecimal numbers #0000FF 00 FF

66. Coding white in hexadecimal numbers #FFFFFF 00 FF

67. Coding turquoise in hexadecimal numbers #00FFFF 00 FF

68. Coding fuchsia in hexadecimal numbers #FF00FF 00 FF

69. Coding lilac in hexadecimal numbers #FFC0FF 00 FF C0 12 x 16 = 192

70. Hexadecimal codes for colors http://www.december.com/html/spec/color.htmlwww.december.com/html/spec/color.html Web search on: hexadecimal codes web page http://www.w3schools.com/html/html_colors.asp

71. The tag Basic HTML document with paragraphs h2 { color : blue ; } div { background-color : #FFDDFF} Cascading Style Sheets Introduction Cascading Style Sheets (CSS) are used to format the way things appear on a Web page. When using Cascading Style Sheets HTML is used to provide structure and the style sheet is used to control how the elements look on the page. The Term The term "Style sheet" refers to a list of rules for formatting various elements. The word "Cascading" refers to the fact that you can have multiple style sheets which follow rules of precedence.

72. Formatting with the div tag

73. Linking your pages (1) Click here to go to next page. first_page.html Click here to return to previous page. second_page.html

74. Alt attribute Gives text alternative for image to aid lynx users or viewers with vision problems

75. Table data for screen readers Neat stuff Break tag

76. End of Part II