Creating a Web Creating a Web portal: Part II portal: Part II HyperText Markup Language (HTML) Bair-Mundy
Creating a Web portal: Part II HyperText Markup Language (HTML) Bair-Mundy.
Dec 28, 2015
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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.
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><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.
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
<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.
However, that does not work in HTML. Let’s see what this would look like if viewed in a browser.
</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.
However, that does not work in HTML. Let’s see what this would look like if viewed in a browser.
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>Stupendous stuff
</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>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><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
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
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
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
Related Documents
