Creating a Web Portal, Part II

Transcript Creating a Web Portal, Part II

Creating a Web portal:
Part II
HyperText Markup Language
(HTML)
Bair-Mundy
Surfing the 'Net
Server
Client
Browser application
sends requests to
server
Webserver
application
responds to
requests
from client
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
A
Chapter One
fleur
graphic
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. ital.
All of a sudden, I heard a loud
b.f.
“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.
BA
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
HTML tags (instructions
to the browser)
<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>
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
<TABLE> . . . </TABLE>
<I> . . . </I>
HTML
The most important
thing to remember is to
<I>remain calm.
calm</I>.
This is
Thisfirst
the
is the
lesson
firstto
lesson
be to
be learned.
learned.
If you
If you
start
start
to
to …
…
Displays as
The most important
thing to remember is
to remain calm. This
Thisis
is the
the
first
first
lesson
lesson
to be
to be
learned. IfIfyou
learned.
youstart
startto
to …
…
Single tags
<BR>
HTML
Hello.
My name is Kimo.
Hello. <BR>
My name is Kimo.
Displays as
Hello. My name is Kimo.
Hello.
My name is Kimo.
<HR>
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
Title
Type (e.g., image)
Subject
Creator
Description
Publisher
http://dublincore.org/
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)
Adding a hot link
Link
To a Web page in the same directorydestination
as
the source file
<A HREF=“my_other_file.html”>
Click here to go to my other file.
</A>
Clickable
text
Adding a hot link
Full URL of
Link
To a Web page in a different location from
destination
the source file
<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>
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 here
URL of image in
quotes
SRC (source) tells
the browser where
to find the image
Creating paragraphs
If we type this:
<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>
Creating paragraphs
We get this:
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
<HTML>
<P>
In our word processor we can just hit
the Enter key a couple of times and we
get a new paragraph.
</P>
<P>
However, that does not work in HTML.
Let’s see what this would look like if
viewed in a browser.
</P>
</HTML>
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
<TABLE>
<TR>
<TD>
Neat stuff
</TD>
<TD>
More neat stuff
</TD>
</TR>
</TABLE>
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>
Stupendous stuff
</TD>
<TD>
Supercalifragilisticexpialidocious
</TD>
</TR>
</TABLE>
Added color
Adding color to specific cells
<TABLE WIDTH=100% BORDER=3>
<TR>
<TD
>
Neat stuff
</TD>
bgcolor=pink
<TD>
More neat stuff
</TD>
</TR>
<TR>
<TD>
Stupendous stuff
</TD>
<TD bgcolor=pink>
Supercalifragilisticexpialidocious
</TD>
</TR>
</TABLE>
Added color
Making table legible with colored rows
<TABLE WIDTH=100% BORDER=3>
<TR bgcolor=pink>
pink added
<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>
no pink added
pink added
Increased table legibility
Adding a style sheet
<HEAD>
<TITLE>
donna’s Web portal
</TITLE>
cascading
style sheet
<style type="text/css">
</style>
</HEAD>
Adding a style sheet
<HEAD>
<TITLE>
donna’s Web portal
</TITLE>
<style type="text/css">
h1 { color : green ; }
h2 { color : blue ; }
</style>
</HEAD>
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
Adding a style sheet
<HEAD>
<TITLE>
donna’s Web portal
</TITLE>
<style type="text/css">
body { background : #FFC0FF ; }
h1 { color : green ; }
h2 { color : blue ; }
</style>
</HEAD>
Color coding in
hexadecimal numbers
#FFC0FF
Red
R
G
B
Green
Blue
Binary numbers
100 10
1
0 0 7
4
2
1
1 1 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
Counting…
2 5 5
100 10
Decimal number
1
0 0
1
F
E
D
C
B
A
9
8
7
6
5
4
3
2
1
16
1
F F
256 16
Hexadecimal number
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
Coding black in hexadecimal
numbers
00
00
00
#000000
Coding red in hexadecimal
numbers
FF
00
00
00
#FF0000
Coding green in hexadecimal
numbers
00
00
FF
00
#00FF00
Coding blue in hexadecimal
numbers
00
00
FF
00
#0000FF
Coding white in hexadecimal
numbers
FF
00
FF
00
FF
00
#FFFFFF
Coding turquoise in
hexadecimal numbers
00
FF
00
FF
00
#00FFFF
Coding fuchsia in
hexadecimal numbers
FF
00
00
FF
00
#FF00FF
Coding lilac in hexadecimal
numbers
FF
00
C0
00
FF
00
#FFC0FF
C0
12 x 16 = 192
Hexadecimal codes for colors
http://www.w3schools.com/html/html_colors.asp
http://www.december.com/html/spec/color.html
Web search on: hexadecimal codes web page
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)
first_page.html
<A HREF=“second_page.html”>
Click here to go to next page.
</A>
second_page.html
<A HREF=“first_page.html”>
Click here to return to previous
page.
</A>
Alt attribute
Gives text alternative for image to aid lynx
users or viewers with vision problems
<IMG SRC="flower.gif"
ALT="picture of a flower">
<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>
Break
</TR>
tag
</TABLE>
End of
Part II

Creating a Web Portal, Part II

Transcript Creating a Web Portal, Part II

Directory