1. Creating an e-Portfolio Assignment: Part II
[Put bad web page in cache. Bring Web portal assignments. Bring situational relevance scenarios. Bring 5 x 7 cards and post-its for organizing Web pages as part of scenario exercises. Poster paper.]
Today we’re going to have a very short, very basic introduction to Web portal creation.
Dr. Bair-Mundy

2. Introduction to HyperText Markup Language (HTML)
Let’s talk a bit about HTML.

3. Browser application sends requests to server
Surfing the 'Net
Server
Request messages
Text, graphics, error messages
Client
Webserver application responds to requests from client
When you surf the Web your computer establishes client-server relationships with the Web servers where the Web files are stored.
When you click on a hypertext link, your computer, the client, sends a request to the Server for a particular file, often an HTML file. The server then responds to the request by either giving you an error message or sending your computer a copy of the file requested.
When the browser on your computer receives an HTML file, it looks at the document and begins to display it according to the directions in the document. When your browser hits a code for an image, it then must send a request to the server where the image is stored requesting that a copy of that image be sent.
If multiple images are called for in a Web page, multiple requests must go out.
Although this process is complicated it usually usually happens fairly quickly.
Let's talk about actual construction of the HTML documents for your e-portfolio.
Browser application sends requests to server

4. 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.
In describing what HTML is I like to use an analogy from the publishing world.
In the “old days,” prior to electronic submissions, the author would submit a typewritten manuscript to the publisher.
Once accepted for publication, the manuscript would pass through a number of hands.

5. Marked-up manuscript Chapter One A 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. A
fleur
graphic B
ital.
b.f.
The copy editor would mark up the manuscript.
She would mark headings as being A, B, or C-level headings. [click]
She would indicate where the graphics are to be placed. [click]
She would note text that should be in italic or bold face. [click]
And she would mark where new paragraphs begin.
A style sheet would be created for the work. The style sheet would indicate how the different levels of header should be handled. How numbers should be handled, etc.
For example, a level A header might be 16-point font, bold-faced, and centered. A level B header might be 14-point font. Etc.

6. 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.
The typesetter and then the paste-up artist would work in concert to produce each page on a paste-up board. These boards would then be reproduced to create the book.

7. 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.
Creating a Web page is a similar process.
We start by creating an ASCII file, also referred to as a "text" file.

8. 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>
Like a copy editor, we mark up the ASCII file with instructions for levels of headers, where to put images, where paragraphs start and end, and so forth. These instructions are called HTML tags.
When a browser such as Firefox opens our HTML file, the browser acts like a past-up artist. It will display text as a header, insert graphics, center text and objects, in accordance with the HTML tags in the document.
HTML tags are instructions to the browser.

9. 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.
When someone accesses our Web page, their browser will follow the instructions in the HTML tags in order to present our text and illustrations in the way we intended on the screen.

10. 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
The basic process for coding a Web page is to:
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

11. Paired tags <TABLE> . . . </TABLE>
<I> </I>
HTML
Displays as
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 <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 …
The most important thing to remember is to remain calm. This is the first lesson to be learned. If you start to …
In general, there are two types of tags: paired and single.
With paired tags you must have both tags present, as they generally surround material the tags will act upon.
Let’s see how this works. [click]
If we surround the words “remain calm” with <I> tags those words will be displayed in italicized type. [click]
What happens if you leave off the ending <I> tag? [click]
Leaving off the ending tag would mean that everything following the first italic tag would be italicized.

12. Single tags <BR> <HR> HTML Displays as Hello.
My name is Kimo.
Hello. My name is Kimo.
Hello. <BR>
My name is Kimo.
Hello.
My name is Kimo.
Tags such as the line-break tag and the horizontal-rule tag are singular. They cause a single action. The line-break tag forces a line break, the following text or image will be presented on the next line. Just putting text on a new line in your HML file does not cuase the text to display on a new line. You must tell the browser to insert a line break.
The horizontal-rule tag inserts a horizontal line across the page.
Hello.
<HR>
My name is Kimo.
Hello.
My name is Kimo.

13. HTML tags <HTML> </HTML>
These are your most basic tags. The beginning and ending HTML tags let the browser know that this is an HTML document and display it accordingly.

14. Two parts of a Web page <HEAD> </HEAD> <BODY>
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
There are two major sections to our HTML coding for a Web page:
[click]
the head section and
the body section.

15. Head of a Web page donna’s LIS 610 test file page </TITLE>
The head portion contains material that will not display in the viewing window of a Web page.
It is used for metadata about our Web page.
For example, the Title is the text that will display in the colored bar at the top of the screen. Some indexing sites that use automated indexing pull data from this title area when indexing a page.
We can also insert an embedded cascading style sheet here. We'll talk about what that does later.

16. Title tags
This is where the text between the TITLE tags displays.

17. 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>
The head is also where we can put meta tags. [click]
We won’t be doing this in this class. Meta tags are useful in telling indexing software such as that used by Google, Yahoo, or Alta Vista how to index your Website.

18. Meta tags – Dublin Core http://dublincore.org/
In the Library World many Web creators use the Dublin Core elements to provide metadata about their Websites.
You can find information about the Dublin Core Initiative on the Web.

19. Meta tags – Dublin Core http://dublincore.org/ Title Subject
Description
Type (e.g., image)
Creator
Publisher
Dublin Core provides a list of standardized terms that you can use in creating metadata for your Webpage.

20. Body of a Web page
<BODY>
Material that will appear in the viewing window of the browser.
</BODY>
Between the BODY tags we place the material that will appear in the viewing window of the browser: headers, text, tables, and instruction for placement of images go here.

21. Adding a header My e-Portfolio <H1> </H1> <BODY>
Aloha, World!
</BODY>
Adding a header is easy.
Header tags are paired and hierarchical.
The smaller the number, the larger the header, although an individual viewer can reset header size and style with his or her browser.
A level 1 header, denoted by the tags H1, is the largest header available.

22. Level 1 header
Here's what the header looks like. Note that generally a header is automatically followed by a line space.

23. Header levels My Web Portal <H1> </H1> <H2>
<BODY>
<H1>
My Web Portal
</H1>
<H2>
This is a level 2 header
</H2>
Aloha, World!
</BODY>
The next level down is a level-two header.

24. Header levels (cont'd)
Notice that the text is smaller but still followed by a line space.

25. Nested tags My Web Portal <I> <H1> </H1> </I>
<BODY>
<I>
<H1>
My Web Portal
</H1>
</I>
</BODY>
Not:
<H1>
<I>
My Web Portal
</H1>
</I>
[click]
Notice that we have nested tags here.
This is important. If you have paired tags, such as H1, you can’t have one half of the pair inside another pair and one half outside. In other words, you can’t have :
<H1>
<I>
</H1>
</I>
Both H1 tags must be either inside or outside the other pair of tags.

26. Adding a hypertext link
destination
To a Web page in the same directory as the source file
<A HREF=“my_other_file.html”>
Click here to go to my other file.
</A>
These are the tags to use to turn text or an object into a hypertext link.
They're paired tags. If you leave off the ending tag, everything that follows will be included as part of the link.
A hypertext link "anchors" two locations together--it starts at the source and points to the destination.
HREF (Hypertext Reference) is used to specify the destination of the link. The destination is placed in quotation marks.
If the destination file is located on the same server and in the same directory, you can simply put the name of the file.
Everything between the beginning and ending tags is clickable and will take the user to the destination specified.
Clickable
text

27. Adding a hot link </A>
Full URL of
Link
destination
To a Web page in a different location from the source file
<A HREF=“
Click here to go to the ALA Office of Intellectual Freedom Website.
</A>
If the destination file is on another server we must use the entire address (URL), including the protocol: in this case http (HyperText Transfer Protocol), followed by the address, and if need be, a specific directory or file.

28. Using an image as a link <A HREF=“http://www.ala.org”>
<IMG SRC=“
</A>
You can use an image as a link. [click]
To place a graphic in a web page we use the image tag. [click]
Within the image tag we tell the browser where to find the image (the source of the graphic) by giving the [click] URL of the image file.
If we place that image tag between our anchor tags the image now serves as a link.
There are places on the Web where you can create graphics such as buttons to serve as links.
URL of image in quotes
IMG tells the browser to place image here
SRC (source) tells the browser where to find the image

29. Creating paragraphs <HTML>
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>
Let’s talk about creating paragraphs.
You would think that you could just type in the text in paragraphs like these and the paragraphs would display the way that you typed them.
But that is not the case.
Let’s see how this would display.

30. 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.
Our text all runs together.
The browser ignores the line breaks within the ASCII file.

31. 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>
In order to turn this text into paragraphs we add paragraph tags. [click]
These are paired.
P to begin the paragraph.
/P to end the paragraph.

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.
Now our text shows up as separate paragraphs, with a line space in-between.

33. Creating a table <TABLE> <TR> <TD> </TD>
Neat stuff
</TD>
More neat stuff
Let’s talk about creating tables.
Tables are useful for organizing data on the screen.
First, you need the beginning and ending TABLE tags.
Within the TABLE tags we build our table from top to bottom and left to right.
Within our TABLE tags we have paired TABLE ROW tags. These tags are used to delineate a horizontal row. Within each row will be one or more table cells.
Within our TABLE ROW tags we have TABLE DATA tags. Each set of TABLE DATA tags designates a cell.
The text between a pair of TABLE data tags will be displayed within that cell.
In this table, we have one horizontal row containing two cells.
The left cell will contain the words “Neat stuff” and the right cell will contain the words “More neat stuff.”
Let’s see what this looks like.

34. Creating a table (cont'd)
The content of our cells appears to be there but this doesn’t look like a table. What happened?
Actually, the table is there, divided into two cells. But there are no borders around the cells or the table.
To have the browser display borders, we need t o add the BORDER attribute to our TABLE tag.

35. Adding a table border <TABLE BORDER=3> </TR>
<TD>
Neat stuff
</TD>
More neat stuff
</TR>
</TABLE>
To have the browser draw borders around our table, we add the word “BORDER” and tell the browser how thick the border should be.
The bigger the number the thicker the border.
Let’s start with 3 pixels.

36. Adding a table border (cont'd)
Now the browser draws a border around the table and between the cells.

37. Widening a table <TABLE WIDTH=100% BORDER=3> </TABLE>
<TR>
<TD>
Neat stuff
</TD>
More neat stuff
</TR>
</TABLE>
We can extend the table horizontally across the viewing window by adding the width attribute.
By including WIDTH=100% in our TABLE tag we’re telling the browser to stretch the table horizontally across the viewing window.
Let’s see what our table looks like now.

38. Widening a table (cont'd)
Notice how the table is now much wider?

39. Adding a row to the table
<TABLE WIDTH=100% BORDER=3>
<TR>
<TD>
Neat stuff
</TD>
More neat stuff
</TR>
Stupendous stuff
Supercalifragilisticexpialidocious
</TABLE>
We can add a row to our table by adding another set of table row tags and within them table data tags.
[click]
Everything between the new table row tags will be placed in the next row down.

40. Added row Here is what our table looks like now. [click]
The bottom row is what we just added.

41. Adding color to the table
<TABLE WIDTH=100% BORDER=3 BGCOLOR=PINK>
<TR>
<TD >
Neat stuff
</TD>
<TD>
More neat stuff
</TR>
Stupendous stuff
Supercalifragilisticexpialidocious
</TABLE>
We can add background color to our table.

42. Added color Here is what our table looks like now.
Now, as we’ll see in a minute, not all colors can be invoked by name.

43. Adding color to specific cells
<TABLE WIDTH=100% BORDER=3>
<TR>
<TD bgcolor=pink>
Neat stuff
</TD>
<TD>
More neat stuff
</TR>
Stupendous stuff
Supercalifragilisticexpialidocious
</TABLE>
We can also add background color to specific cells.
[click]
Notice that we no longer put the bgcolor element in the table tag.
Instead we put it in the table data tags where we want out color to appear.

44. Added color
Here is what our table looks like now.

45. 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>contrast</TD>
...
</TABLE>
pink added
no pink added
We can also make our table easier to read by putting background color in alternating rows. We can do this by putting the bg-color attribute in alternating row tags.
[click]
I couldn’t show all the table rows on the slide because there wasn’t enough room but...
pink added

46. Increased table legibility
Here is what our table looks like now.
Imagine how difficult it would be to read this table without the colored backgrounds in alternating rows.

47. Adding a style sheet cascading style sheet
<HEAD>
<TITLE>
donna’s Web portal
</TITLE>
<style type="text/css">
</style>
</HEAD>
We can also format elements in our Web page by including a style sheet.
A style sheet is basically a list of rules that tell the browser how to format various elements in a Web page.
There are various ways that we can include a style sheet. The easiest way, which we will demo here, is to include it in the HTML document itself.
An internal style sheet is placed in the HEAD portion of the HTML document. It is identified by using beginning and ending STYLE tags.
[click]
Within the beginning style tag we need to indicate that this is of the type text/css. Text refers to the fact that this is presented in plain text and css refers to the fact that this is a cascading style sheet.
Why cascading?
Because we can have multiple style sheets following rules of preference.
Here we’ll just use a single style sheet.

48. Adding a style sheet h1 { color : green ; } h2 { color : blue ; }
<HEAD>
<TITLE>
donna’s Web portal
</TITLE>
<style type="text/css">
h1 { color : green ; }
h2 { color : blue ; }
</style>
</HEAD>
Between our style tags we list our rules.
Let’s take a look at one of those rules.

49. h2 { color : blue ; } Style-sheet rule Selector Declaration block
This is a typical style-sheet rule. [click]
On the left is the selector. This tells a browser what element of our Web page will be affected by the rule.
[click]
On the right, enclosed in braces, is the declaration block. Here we give whatever formatting information we want to apply to our selector. [click]
Within the declaration block we have a declaration. We can have more than one declaration but here as our example we’ll use one.
First we give the property of the item we wish to format. In this case we wish to format the color of the text of the any H2 header found in the page. [click]
Following a colon we give the value for the property. In this case the value given is blue. This will tell the browser to display any level-two headers using blue text.
Property
Value

50. Without a style sheet <h1>Cascading Style Sheets</h1>
<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>
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>
So what will that do?
Let’s first look at a simple Web page without a style sheet.
We have two second-level headers preceding our paragraphs.

51. Without a style sheet
This is what it looks like without the addition of a style sheet.
Okay, but rather bland.
We could format each individual header by adding font tags but that would take a fair amount of work, especially if we have many second-level headers.

52. With a style sheet <style type="text/css"> h2 { color : blue ; }
<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>
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>
Let’s add in our style sheet turning our level-two headers blue.

53. With a style sheet
This is what it looks like with addition of our style sheet. Both of the level-two headers are displayed in blue text.
If we had ten or even twenty level-two headings they would all be displayed in blue text. We don’t have to format each heading individually; we can format them all with a single line in our style sheet.

54. 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>
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>
We can format additional properties of our headers.
Let’s add some background color to our level-two headers.
To do by adding the additional property of background color. Let’s give our background color the value of pink.

55. Adding background color using our style sheet
Now, with a very small addition to our style sheet, our second-level headers are displayed in blue text against a pick background, and thus stand out from the rest of the text.

56. Adding a style sheet <style type="text/css">
<HEAD>
<TITLE>
donna’s Web portal
</TITLE>
<style type="text/css">
body { background : #FFC0FF ; }
h1 { color : green ; }
h2 { color : blue ; }
</style>
</HEAD>
With multiple rules we can add lots of formatting to our text.
For example, we can tell the browser, every time you go to display a level-one header, display the text green. And when you see a body tag, color the background a lovely lilac.
Now, #FFDc0FF doesn’t look like lilac, does it?
With some colors you can simply name the color, like “blue.”
But with other colors you need to code them numerically.
Let’s see how color is coded.

57. Color coding in hexadecimal numbers
#FFC0FF B
Red
The letters following the pound sign are actually three hexadecimal numbers.
These three numbers tell the browser how much red light, how much green light, and how much blue light to use in displaying, in our case, the background of the Web page.
This isn’t ink. It’s light. [click]
If you mix red light with blue light [click] you can see in the intersection [click] mixing red and blue gives you purple. [click]
If you mix green and blue light [click] you can see in the intersection [click] that mixing green and blue gives you turquoise.
Now, you may be asking:
So what’s a hexadecimal number?
Well, first let’s remind ourselves about what binary numbers are.
Green
Blue

58. Binary numbers
Binary numbers are numbers written in base two.
Whereas in decimal numbers the right-hand column is for ones, the next column for tens, the next for hundreds, and so on;
in binary numbers the first column is for ones, the second column for twos, the third column for fours, etc.
Base Ten
Base Two

59. Hexadecimal numbers 2 5 5 1 A 9 B C E F D 8 6 1 7 2 5 4 3 F F
Decimal number
Counting… 1 A 9 B C E F D 8 6 1 7 2 5 4 3
F F
Hexadecimal number
Hexadecimal numbers are numbers written in Base Sixteen.
The right-hand column is for ones. The next column is for sixteens, the next column for 256s, etc. (256=16x16)
Now, here’s the problem. Let’s count to sixteen in hexadecimal.
We’re fine with 1 [click] , 2 [click], 3 [click], 4 [click], 5 [click], 6 [click], 7 [click], 8 [click], and 9 [click].
But now what do we do. The next column is for 16s, so we need to have digits that go from 0 to 15. But we only have digits from 0 to 9.
So what to do?
Mathematicians decided to use letters to represent 10, 11, 12, 13, 14, and 15.
So let’s continue to count: 10 [click], 11 [click], 12 [click], 13 [click], 14 [click], 15 [click], and now when we get to 16 we have a 1 in the 16s column and a zero in the ones column.
So how would we write the number 255 as a hexadecimal number? [click]
We write it as FF.
16 x 15=240
15 x 1 = 15
= 255
Base Ten
Base A B C D E F 10

60. Coding black in hexadecimal numbers
So, how do we code for black using hexadecimal values for red, green, and blue light?
Well, black is the absence of light. So, we have no red [click], no green [click], and no blue [click] light.
[click]
Which means that we code for black with # 00 00 00
#000000

61. Coding red in hexadecimal numbers
How do we code for red using hexadecimal values for red, green, and blue light?
We add full-on red [click], no green, and no blue light.
[click]
Which means that we code for red with #FF0000. FF 00 00 00
#FF0000

62. Coding green in hexadecimal numbers
How do we code for green using hexadecimal values for red, green, and blue light?
We add no red, full-on green [click], and no blue light.
[click]
Which means that we code for green with #00FF00. 00 00 FF 00
#00FF00

63. Coding blue in hexadecimal numbers
How do we code for blue using hexadecimal values for red, green, and blue light?
We add no red, no green, and full-on blue light [click].
[click]
Which means that we code for blue with #0000FF. 00 00 FF 00
#0000FF

64. Coding white in hexadecimal numbers
How do we code for white using hexadecimal values for red, green, and blue light?
White light contains the full spectrum of colors.
So we add full-on red [click], full-on green [click], and full-on blue light [click].
[click]
Which means that we code for white with #FFFFFF. FF 00 FF 00 00 FF
#FFFFFF

65. Coding turquoise in hexadecimal numbers
You do this one.
How do we code for turquoise using hexadecimal values for red, green, and blue light?
Turquoise is a combination of blue and green.
So let’s add no red, full-on green [click], and full-on blue light [click.
[click]
Which means that we code for turquoise with #00FFFF. 00 00 FF 00 FF
#00FFFF

66. Coding fuchsia in hexadecimal numbers
How about fuchsia?
How do we code for fuchsia using hexadecimal values for red, green, and blue light?
Fuchsia is a combination of red and blue.
So let’s add full-on red [click], no green, and full-on blue light [click.
[click]
Which means that we code for fuchsia with #FF00FF. 00 FF 00 00 FF
#FF00FF

67. Coding lilac in hexadecimal numbers
Up to now we’ve been using either full-on or absolutely no amount of a particular color. But we can create a variety of shades of colors by using greater or lesser amounts of our three colors in various combinations.
Let’s try one that’s a bit more complex.
We have a bit of a white background here to make it easier to see.
Let’s code lilac.
First, let’s make fuchsia.
We’ll add full-on red. [click] We’ll add full-on blue. [click]
Now in order to lighten it up a bit we need to add more light. Since we’ve already got full-on red and blue we’ll add a bit of green light. [click]
And now we have lilac.[click]
So we code lilac as FFC0FF.
By the way, a C in the 16s column and a zero in the ones column adds up to 192 in decimal. [click]
C0=192 FF 00 C0 00 00 FF C0
12 x 16 = 192
#FFC0FF

68. Hexadecimal codes for colors
You don’t have to be an math whiz in hexadecimal numbers in order to code for your favorite color. There are sites on the Web that give you the hex codes for any shade of any color you can imagine.
Just do a Web search on hexadecimal codes web page.
Web search on: hexadecimal codes web page

69. The <div> tag div { background-color : #FFDDFF}
<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>
<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>
Let’s add another tag, the div tag.
The <div> tag defines a division or section in an HTML document.
[click]
Visually, the div tag allow us to make a container, a block within our page, and that block can be formatted using our style sheet.
Here we’ve added beginning and ending div tags around areas of our little Web page.
Now we’ve taken the pink background off of our level-two header.
We’ve substituted a pretty background color for our divisions. Let’s see what that looks like.

70. Formatting with the div tag
And here it is.
Because the div tags enclosed the headers with the paragraphs, now each header + paragraph becomes a block with a background color.

71. Linking your pages (1) first_page.html second_page.html
<A HREF=“second_page.html”>
Click here to go to next page.
</A>
second_page.html
If you store all of the files for your Web portal in the same directory on the same server, linking between them is easy.
On the first page you put a link to the second page.
On the second page you put a link to the first page.
Because they are in the same directory you don’t have to put the entire address, just the file name.
<A HREF=“first_page.html”>
Click here to return to previous page.
</A>

72. 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="flower.gif" ALT="picture of a flower">
One thing to keep in mind when you’re designing a Web page is that not everyone will see your lovely graphics.
Some people with slow connections use a text-only browser such as lynx to surf the Web.
Other users may have low vision or be blind.
In order to serve those users, whenever we include an image we include an ALT attribute in our image tag. An ALT attribute causes a screen reader or a text-only browser to display a textual alternative to the image.
If a person who is blind is using a screen reader, the screen reader will read aloud the text in the ALT tag. This is especially important when you are conveying information in your graphic. If, for example, you have a Web page that uses smiling and frowning faces to say things are good or bad, you should have ALT tags with text that says “picture of smiling face” and “picture of frowning face.”
<IMG SRC=“smiley_face.gif" ALT="picture of smiling face">
<IMG SRC=“frowney_face.gif" ALT="picture of frowning face">

73. Table data for screen readers
<TR>
<TD>Neat stuff <BR>
</TD>
</TR>
</TABLE>
Tables can present problems for users relying on screen readers.
A screen reader will just read the text across with no pauses between cells.
To get the screen reader to pause between cells we put a Break tag at the end of the data in the cell.
Break
tag

74. Creating an e-Portfolio Assignment
Let’s talk a bit about the e-Portfolio assignment.

75. On the LIS 610 website

76. End of Part II