creating a web portal: part ii hypertext markup language (html) bair-mundy

Creating a Web portal: Creating a Web portal: Part IIPart II

HyperText Markup Language (HTML)

Bair-Mundy

Surfing the 'Net

Client

Server

Webserver application responds to requests from clientBrowser application

sends requests to server

A word about HTML

HyperText Mark-up Language

ManuscriptChapter 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 manuscriptChapter 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 OneA 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) fileChapter One

A Mysterious VisitorIt 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.


HTML file<HTML><CENTER><H1>Chapter One</H1><H2>A Mysterious Visitor</H2><IMG SRC=“fleur.gif”></CENTER><P>It was a dark and stormy night. As was my custom on a Friday night, I was curled up in my favorite armchair reading <I>Cataloging & Classification</I>. All of a sudden, I heard a loud <B>“Tap, tap, tap”</B> on the window.</P><P>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.</P></HTML>

HTML tags (instructions to the browser)

Web page

Chapter OneA 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.


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

<I> . . . </I>

The most important thing to remember is to <I>remain calm</I>. This is the first lesson to be learned. If you start to …

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

HTML Displays as

The most important thing to remember is to <I>remain calm. This is the first lesson to be learned. If you start to …

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

<TABLE> . . . </TABLE>

Single tags

Hello.My name is Kimo.

Hello. My name is Kimo.

<BR>

<HR>

HTML Displays as

Hello. <BR>My name is Kimo.

Hello. My name is Kimo.

Hello. <HR>My name is Kimo.

Hello.

My name is Kimo.

HTML tags

<HTML>

</HTML>

Two parts of a Web page<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY></HTML>

Head of a Web page

<HEAD>

<TITLE> donna’s LIS 670 test file page </TITLE>

</HEAD>

Title tags

Head of a Web page

<HEAD>

<TITLE> donna’s LIS 670 test file page </TITLE>

<meta name="DC.subject" lang="eng " content="Information science technology" />

</HEAD>

Meta tags – Dublin Core

http://dublincore.org/

Meta tags – Dublin Core

http://dublincore.org/

Title

Subject

Description

Type (e.g., image)

Creator

Publisher

Body of a Web page

<BODY>

Material that will appear in the viewing window of the browser.

</BODY>

Adding a header

<BODY>

<H1>My Web Portal</H1>

Aloha, World!</BODY>

Level 1 header

Header levels<BODY>

<H1>My Web Portal</H1>

<H2>This is a level 2 header</H2>

Aloha, World!</BODY>

Header levels (cont'd)

Horizontally centering an item

<BODY>

<CENTER><H1>My Web Portal</H1>

</CENTER>

</BODY>

Not:<H1><CENTER>My Web Portal</H1></CENTER>

Centering an item (cont'd)

To a Web page in the same directory as the source file

Adding a hot link

<A HREF=“my_other_file.html”>

Click here to go to my other file.

</A>Clickable

text

Linkdestination

To a Web page in a different location from the source file

Adding a hot link

<A HREF=“http://www.ala.org/ala/aboutala/offices/oif/index.cfm”>

Click here to go to the ALA Office of Intellectual Freedom Website.

</A>

Full URL of Link

destination

Using an image as a hot link

<A HREF=“http://www.ala.org”>

<IMG SRC=“http://www2.hawaii.edu/~donnab/lis670/ala.jpg”>

</A>

IMG tells the browser to place

image hereSRC (source) tells the browser where to find the image

URL of image in quotes

Creating paragraphs

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

</HTML>

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

<HTML> In our word processor we can just hit the Enter key a couple of times and we get a new paragraph.


</HTML>

<P>

</P><P>

</P>

Creating paragraphs

In our word processor we can just hit the Enter key a couple of times and we get a new paragraph.


Creating a table

<TR>

</TR>

<TABLE>

</TABLE>

<TD>Neat stuff

</TD>

<TD>More neat stuff

</TD>

Creating a table (cont'd)

Adding a table border

<TABLE BORDER=3><TR>

<TD>Neat stuff

</TD>

<TD>More neat stuff

</TD></TR></TABLE>

Adding a table border (cont'd)

Widening a table

<TABLE WIDTH=100% BORDER=3><TR>

<TD>Neat stuff

</TD>

<TD>More neat stuff

</TD></TR></TABLE>

Widening a table (cont'd)

Adding a row to the table<TABLE WIDTH=100% BORDER=3><TR>

<TD>Neat stuff

</TD>

<TD>More neat stuff

</TD></TR><TR>

<TD>Stupendous stuff

</TD>

<TD>Supercalifragilisticexpialidocious

</TD></TR></TABLE>

Added row

Adding color to the table<TABLE WIDTH=100% BORDER=3 BGCOLOR=PINK><TR>

<TD >Neat stuff

</TD>

<TD>More neat stuff

</TD></TR><TR>


</TD>

<TD>Supercalifragilisticexpialidocious

</TD></TR></TABLE>

Added color

Adding color to specific cells<TABLE WIDTH=100% BORDER=3><TR>

<TD bgcolor=pink>Neat stuff

</TD>

<TD>More neat stuff

</TD></TR><TR>


</TD>

<TD bgcolor=pink>Supercalifragilisticexpialidocious

</TD></TR></TABLE>

Added color

Making table legible with colored rows<TABLE WIDTH=100% BORDER=3>

<TR bgcolor=pink><TD>Color</TD><TD>makes</TD><TD>row</TD>

<TD>legible</TD></TR>

<TR> <TD>No color</TD> <TD>gives</TD> <TD>row</TD> <TD>contrast</TD></TR>

<TR bgcolor=pink><TD>Color</TD><TD>makes</TD><TD>row</TD>

<TD>legible</TD>

</TR>...</TABLE>

pink added

no pink added

pink added

Increased table legibility

Adding a style sheet<HEAD> <TITLE> donna’s Web portal </TITLE>

<style type="text/css">

</style>

</HEAD>

cascading style sheet

Style-sheet rule

Selector Declaration block

h2 { color : blue ; }

Property Value

Without a style sheet<html><head><title>Basic HTML document with paragraphs</title></head><body>

<h1>Cascading Style Sheets</h1><h2>Introduction</h2><p>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. </p>

<h2>The Term</h2><p>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. </p></body></html>

Without a style sheet

With a style sheet<html><head><title>Basic HTML document with paragraphs</title>

<style type="text/css">h2 { color : blue ; }</style></head><body><h1>Cascading Style Sheets</h1><h2>Introduction</h2><p>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. </p><h2>The Term</h2><p>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. </p></body></html>

With a style sheet

Add a little color to our header<html><head><title>Basic HTML document with paragraphs</title>

<style type="text/css">h2 { color : blue ; background-color : pink ; }</style></head><body><h1>Cascading Style Sheets</h1><h2>Introduction</h2><p>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. </p><h2>The Term</h2><p>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. </p></body></html>

Adding background color using our style sheet

Color coding in hexadecimal numbers

#FFC0FF

Red

Green

Blue

R G

B

Binary numbers

0 0 7100 10 1

1 1 14 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

Hexadecimal numbers

2 5 5100 10 1

F F256 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

0 01 123456789ABCDEF

Counting…

16 1

Decimal number

Hexadecimal number0

Coding black in hexadecimal numbers

#000000

00 00 00

Coding red in hexadecimal numbers

#FF0000

00 00 00FF

Coding green in hexadecimal numbers

#00FF00

00 0000 FF

Coding blue in hexadecimal numbers

#0000FF

00 0000 FF

Coding white in hexadecimal numbers

#FFFFFF

00 0000 FFFF FF

Coding turquoise in hexadecimal numbers

#00FFFF00 0000 FFFF

Coding fuchsia in hexadecimal numbers

#FF00FF

00 0000 FFFF

Coding lilac in hexadecimal numbers

#FFC0FF00 0000 FFFF C0

C0

12 x 16 = 192

Hexadecimal codes for colors

http://www.december.com/html/spec/color.html

Web search on: hexadecimal codes web page

http://www.w3schools.com/html/html_colors.asp

http://www.december.com/html/spec/color.html

The <div> tag<html><head><title>Basic HTML document with paragraphs</title>

<style type="text/css">h2 { color : blue ; }div { background-color : #FFDDFF}</style></head><body><h1>Cascading Style Sheets</h1>

<div><h2>Introduction</h2><p>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. </p>

</div><div><h2>The Term</h2><p>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. </p>

</div></body></html>

Formatting with the div tag

Linking your pages (1)

<A HREF=“second_page.html”>Click here to go to next page.</A>

first_page.html

<A HREF=“first_page.html”>Click here to return to previous page.</A>

second_page.html

Alt attribute

<IMG SRC="flower.gif" ALT="picture of a flower">

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

<IMG SRC=“smiley_face.gif" ALT="picture of smiling face">

<IMG SRC=“frowney_face.gif" ALT="picture of frowning face">

Table data for screen readers

<TABLE><TR><TD>Neat stuff <BR></TD></TR></TABLE>

Breaktag

End of Part II

creating a web portal: part ii hypertext markup language (html) bair-mundy

Documents

stormy night

loud tap

favorite armchair

cataloging classification

type of person

important thing

ascii file

graphicsplace file