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

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

A word about HTML HyperText Mark-up Language

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.

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. ¶

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.

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.

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)

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.

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

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 …...

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.

HTML tags

Two parts of a Web page

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

Title tags

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

Meta tags – Dublin Core

Meta tags – Dublin Core Title Subject Description Type (e.g., image) Creator Publisher

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

Adding a header My Web Portal Aloha, World!

Level 1 header

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

Header levels (cont'd)

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

Centering an item (cont'd)

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

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

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

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:

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:

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.

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.

Creating a table Neat stuff More neat stuff

Creating a table (cont'd)

Adding a table border Neat stuff More neat stuff

Adding a table border (cont'd)

Widening a table Neat stuff More neat stuff

Widening a table (cont'd)

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

Added row

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

Added color

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

Added color

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

Increased table legibility

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

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

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

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.

Without a style sheet

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.

With a style sheet

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.

Adding background color using our style sheet

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

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

Binary numbers Base Ten Base Two

Hexadecimal numbers F F Base Ten Base A B C D E F ABCDEF Counting… 16 1 Decimal number Hexadecimal number 0

Coding black in hexadecimal numbers #

Coding red in hexadecimal numbers #FF FF

Coding green in hexadecimal numbers #00FF00 00 FF

Coding blue in hexadecimal numbers #0000FF 00 FF

Coding white in hexadecimal numbers #FFFFFF 00 FF

Coding turquoise in hexadecimal numbers #00FFFF 00 FF

Coding fuchsia in hexadecimal numbers #FF00FF 00 FF

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

Hexadecimal codes for colors Web search on: hexadecimal codes web page

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.

Formatting with the div tag

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

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

Table data for screen readers Neat stuff Break tag

End of Part II