Blind Geeks dot org

Blind Geeks dot org

Web Development Workshop

Lesson 2: HTML Formatting & Styles

Written by Bill Dennis & Jeff Durham

September 2009

2.0: Introduction.

In lesson 1 of our Web Development Workshop, we discussed basic HTML tags, links and basic formatting. In this lesson, we will learn more advanced formatting and styles in HTML.

2.01: Some Things You Should Know.

File Types:

HTML’s main file type (extension) is .html but can also be .htm. If there are images on the web page, these are stored within a subfolder with the same name as your page by default. We will talk briefly about images later in this lesson. The HTML file format is universal and can be read by most web browsers.

CSS, or Cascading Style Sheets, use .css for external style sheets. This is basically a file with CSS rules embedded within it that the browser reads.

MHT (.mht and .mhtml) is Microsoft’s own version of HTML which embeds images directly into the page’s file instead of creating a separate folder for it. MHT pages cannot be used by browsers other than Internet Explorer.

ASP (Active Server Page) is not HTML but a programming language similar to Visual Basic.

ASPX is the server-side executable of ASP, also known as ASP.NET. ASP.NET incorporates HTML, Javascript and Dot Net languages such as Visual Basic and C#. Most code runs on the server but client-side execution is possibly by using Java Script and technology called AJAX.

Java Script (.js) can be executed from within your HTML code by using the <script> tag. Java Script is similar to the C language and can either be embedded into your HTML or called from a separate .js file.

VB Script (.vbs) is similar to Java Script but is molded after the syntax of Visual Basic 6.0. You can execute a VB script file either in your HTML page with the <script> tag, from an external .vbs file or even by the command line in Windows. VB Script is often used in Windows Server 2003 for network administration tasks.

Flash (.swf) can be executed directly from your HTML page with the use of Java Script. Flash files are compiled versions of animation created by the Flash compiler (FLA is the source file extension).

Other file formats such as .wav, .mp3, .wmv, etc. can be called from your HTML pages with the assistance of Java Script and third-party controls. Lesson 3 will focus on some of this technology.

File Paths:

When you are navigating on your local computer, you may specify the local hard drive letter (C: ) followed by the folder names separated by the back slash (\) like this:

C:\Development\BlindGeeks\HTML\Default.html

Or, you may specify your local network UNC paths such as this:

\\Goofy\C\Development\BlindGeeks\HTML\Default.html

This can also be written with the IP address in place of the computer name like this:

\\192.168.2.109\C\Development\BlindGeeks\HTML\Default.html

Due to the fact that your web page is actually executing on the user’s computer, these types of path addressing do not work. So, you will need to reference resources by using the URL addressing such as this:

http://www.blindgeeks.org/Members.html

When placed into an anchor <a href=…>, the above address takes the user to the member’s page of the Blind Geeks web site.

If you wish the user to download or open a file stored on your server, the best way to do this is by embedding the FTP address of the file in an anchor tag like this:

ftp://blindgeeks.org/HTML_L01.zip

To use the FTP addressing scheme above, you must have an FTP server running. The Professional and Server editions of the Windows operating system comes with Internet Information Services (IIS) which is capable of hosting FTP sites. Windows 2000 Home, Windows XP Home and Windows Vista Home editions do not support IIS. There are third-party software products to serve FTP sites, though.

2.02: Coding, Browsers & Errors.

Unfortunately, coding in HTML is not quite like coding in a language such as C++ or Visual Basic. In those languages, you know fairly quickly when you have a syntax error because your program will not compile. In HTML, it is up to your browser to let you know when there is a problem and in most cases, the browser just interprets the code and doesn’t actually tell you when there is a problem. While the output may or may not reflect the error, you are left to figuring out if there is a problem, where that problem is in your code and what to do to fix it. No nice compilers here.

The easiest problems to discover and fix are broken links and design (style) issues. However, if you don’t indent and if your page has several hundred lines of code, you may have a difficult time fixing your problems.

Later, in this workshop, we will look at some broken code and learn how to fix problems more easily.

Defining The Document

Any of the examples including the Blind Geeks web site will display correctly when browsing with Internet Explorer but the idea is to allow as many people to view your site no matter what browser or operating system they are using.

For this reason, we should declare the Document Type Definition (DTD) at the beginning of our pages.

Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

You have a choice of three document types when writing HTML and XHTML code:

· Transitional. This document type is based on HTML standard coding, but it is backward-compatible with old HTML conventions, including deprecated tags. You'll use this for all the documents you create in this book.

· Strict. This document type does not accept any deprecated tags. By using the strict type, you get the benefit of XHTML, including its ability to connect to databases (although this book doesn't cover that), as well as a guarantee of future compatibility. This is especially helpful considering that it is assumed that HTML will be eventually phased out and XHTML will be the norm.

· Frameset. This document type allows frames in a Web site. We will discuss Frames in Lesson 3 of the Web Development Workshop.

A frameset is a grid that divides the Web browser screen into separate panels. A different HTML document appears in each panel. That means, for example, a static navigation bar could appear in the left panel, and the right panel would display the selected information. Before cascading style sheets, when each page had to be individually formatted, framesets were popular because common elements could be repeated on each page without having to include them in the HTML code for each page. Framesets are no longer popular because cascading style sheets make it easy to apply consistent formatting on related pages, and because there were so many spectacularly bad Web sites created with frames that they got a bad rap.

You can use the DOCTYPE tag to specify in your Web page to which of those three standards you will be adhering. (Most of the time HTML tags are not case-sensitive, but the DOCTYPE tag should always be uppercase.) Using the DOCTYPE tag is like signing a contract. It is an optional tag, but when you use it, you are promising that your coding will conform to certain standards. When a Web browser encounters a DOCTYPE tag, it processes the page in standards mode . When it doesn't encounter the DOCTYPE tag, it assumes that there is something quirky about the page, and processes the page in quirks mode.

The distinction between standards mode and quirks mode came about in earlier days, when there were problems with standardization between Web browsers. In some browsers, to get a page to display properly, you had to get a little creative with the HTML code. Modern HTML coding does not allow that, but some older pages still include these obsolete workarounds. By using the DOCTYPE tag, you are making a promise to the Web browser that there is nothing but pure HTML code in the page. In most cases you'll want to use a transitional document type.

If you are writing XHTML code, the DOCTYPE is required, not optional.

The DOCTYPE tag always begins with an exclamation point, and is always placed at the beginning of the document, before the <html> tag. If you're using HTML 4.01, the syntax for the tag is:

<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01 Transitional//EN" "http://www.w3.org/

TR/html4/loose.dtd">

If you’re using DHTML, the syntax is like this:

<!DOCTYPE HTML PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/

TR/xhtml1/DTD/xhtml1-transitional.dtd">

Page Title & Keywords

If you’ve ever wondered how to display a custom title in the Internet Explorer title bar when users visit your page, it is done with the <title> tag.  Example:

<title>Blind Geeks – Where Blind People Learn Programming</title>

You must place the <text> tag inside of the <head> section and not in the <body> section.

Another element you may place in the header is the <meta> tag, which is used to identify keywords related to your page. Placing appropriate keywords on your page makes it easier for people to find your page when they are searching the Web using a search engine such as Yahoo. When search engines index your page, they rely not only on the full text of the page, but also on any keywords it finds in the <meta> tag area.

Not all search engines refer to <meta> tags. Google does not, for example; it indexes only the text contained in the <body> area.

Example:

<meta name="keywords" content="Classic Rock, Radio, Rock, Music, Heavy Metal" />

If your web site were a Classic Rock internet streaming radio station, it might use these key words.

2.1: HTML Text Formatting.

Note: In Internet Explorer 7 and above, certain closing tags are not supported such as <br />. This would be written as <br> instead. Later in this section, I will show you the <quote> tag. This, also, is not supported in IE 7 and above.

In word processing classes, a student begins to learn different styles of text formatting rather quickly. The truth is that sighted individuals need to differentiate certain visual aspects of documents. This is the same with web pages.

While I’m sure that some of the blind people in business wish that the whole world could be blind, it just isn’t possible. The blind community is a minority in business so if the blind person wishes to work and function in business, they must conform to the way that the sighted do business.

Prior to the popularity of the world-wide web, this task seemed easier. Now that the web is here to stay, this task now seems much more difficult. Almost everything on the web is graphical based.

Believe it or not, the blind programmer can make his own mark on the web. The first step is to add text-formatting to your web pages.

Bold Text:

Usually, when certain print is more important than the rest, it can be defined differently with a bold typeface. These types of special phrases can be headers to our web page or something you just wish to stand out from the rest of the text.

On a web page, you use the <b> tag to make your text bold.

Example :

<html>

<body>

This text is normal.<br>

<b>This text is bold.</b><br>

<i>This text is italic</i><br>

<i><b>This text is bold AND italic.</b></i><br>

</body>

</html>

The code above prints four different lines: normal, bold, italic and italic-bold. The <b> tag is used for bold and the <i> tag is used for italic. HTML also allows the <strong> tag for bold and the <em> tag for italic.

If you use the header tags <h1> through <h6>, <h1> is as bold as it gets with the bold setting getting lighter as the number increases. The font also decreases as the header number increases.

Example:

<html>

<h1>Blind Geeks Header 1</h1>

<h2>Blind Geeks Header 2</h2>

<h3>Blind Geeks Header 3</h3>

<h4>Blind Geeks Header 4</h4>

<h5>Blind Geeks Header 5</h5>

<h6>Blind Geeks Header 6</h6>

</html>

Often, I find it visually pleasing to make my second header italic.

Example:

<html>

<div align="center">

<h1>Blind Geeks</h1>

<h2><i>Where Blind People Learn Programming</i>

</div>

2.2: Monospacing

Typically, a web browser displays text as a proportional font, which means that different letters occupy different amounts of space depending on the letter. For example, the uppercase letter M takes up more space than the uppercase letter I. There are certain times however when an internet user might find it more appealing to have all letters occupy the same amount of space (think of a typewriter), like when displaying a segment of program code or when displaying a string of text for a user to type.

This is known as monospacing. There are several HTML tags that allow you to show text in monospacing. Note that most browsers treat all of the following tags the same, so you can use them interchangeably.

Tag	Description
<tt> (typewriter text)	The standard tag used for monospace that does not have a special purpose), least likely to be deprecated in the future.
<kbd> (keyboard text)	Tag used for monospace that indicates that it is something for the user to type.
<code> (code)	The tag used for monospace for applying program code.
<samp> (sample)	Tag used for sample text, largely the same as <code>
<pre> (preformat)	Applies monospace, but also preserves any extra spacing that the browser would otherwise ignore.

Because browsers ignore extra space not created with the   special character (see next section), the <pre> tag is the one that you will want to use when that extra space is desired, such as when you wish to indent lines of program code. It also comes in handy when you wish to paste text from another source into your HTML page and maintain the original formatting.

Let’s illustrate by using the <pre> tag for displaying a block of JavaScript code.

<pre>

<script type=”text/javascript”>

Let num = 1;

While (num <= 10) {

Document.write(“Now, the number is “ + I + “\n”);

I++;

}

</script>

</pre>

NOTE: You do not need to know Javascript for this example. It is just to illistrate the use of the <pre> tag for indenting.

Block quoting:

It is customary when quoting text from another source to have the text indented from the main body of the text. This can be accomplished with the <blockquote> tag.

There is also a <q> tag that can be used for quoting inline text, although the same thing can be accomplished by placing quotes around it, so most people don’t use it.

If you wish to ensure that the correct quotation marks are used for a specific language, you can use the xml:lang=”xx” attribute for the <q> tag, where “xx” is a value for the attribute. Perhaps we will talk more about this in a later discussion.

Let’s illustrate the use of the <blockquote> tag by displaying some of the content from the Blind Geeks website.

<html>

<body>

<br>

Welcome To Blind Geeks dot org!!

<br>

This site represents Lab 2-1 from our Web Development Workshop Lesson 2. As each new lesson is completed,

<br>

this web site will change to reflect the content from the lesson.

<br>

Download Lesson 2 Section 1

<a href="ftp://blindgeeks.com/WebL2Lab1.zip">Here</a>.

<br>

View Lesson 2 Section 1

<a href="http://www.blindgeeks.org/Lessons/WebL2S1.htm">Here</a>

<br>

<blockquote>

<hr>Topics Included in Lesson 1 Section 1:

<br>

<pre>

<br>

HTML Text Formatting

<br>

Headers

<br>Numbered Lists

<br>Special Characters

<br>Horizontal Lines

<br>HTML Styles

<br>Using Colors

<br>Background Images

<br>HTML

Page Templates

<br>

</pre>

</blockquote>

</body>

</html>

Noticed that I included the <pre> tag so that newline characters are preserved. When you use <pre> then when you enter a blank line in the html code, the browser interprets it as a <br> as in our example. Also, the text within the <blockquote> tag is indented.

2.3: HTML Lists

We have already discussed how to define ancors for our page using the <a> attribute. It would be more visually appealing however if we could give our links the appearance of a list to make these links stand out.

In this section, we will discuss how to create bulleted and numbered lists.

Bulleted lists

A bulleted list (also known as an unordered list) is a list of items each of which is marked with a bullet symbol). We use the <ul> (for unordered) tag to mark the list and the <li> (for list item) tag to mark each list item. To illustrate, let’s create a bulleted list of links for the Blind Geeks page.

<html>

<head>

<title>Blind Geeks</title>

</head>

<body>

<ul>

<li> <a href="http://blindgeeks.org/BG_L2_Lab1Lessons.htm">Blind Geeks lessons</a></li>

<li> <a href="http://blindgeeks.org/BG_L2_Lab1Radio.htm">Radio broadcasts</a></li>

<li> <a href=”mailto:blindgeeks-subscribe@yahoogroups.com?subject=Join”> Join Blind Geeks</a></li>

<li> <a href=”mailto:blindgeeks-owner@yahoogroups.com”>Email owner of Blind Geeks</a></li>

</ul>

</body>

</html>

Try pasting this code into a text file called BulletedList.html and view it in your browser. You will see a bulleted list of the four links.

Numbered lists

We can also create a numbered list (also known as an ordered list). The list items are marked with numbers in ascending sequence. The list is marked with the <ol> (for ordered list) tag.

Let’s modify previous example to use a numbered list.

<html>

<head>

<title>Blind Geeks</title>

</head>

<body>

<ol>

<li> <a href=”http://blindgeeks.org/BG_L2_Lab1Lessons.htm”>Blind Geeks lessons</a></li>

<li> <a href="http://blindgeeks.orgt/BG_L2_Lab1Radio.htm">Radio Broadcast Page</a></li>

<li> <a href=”mailto:blindgeeks-subscribe@yahoogroups.com?subject=Join”>Join Blind Geeks</a></li>

<li> <a href=”mailto:blindgeeks-owner@yahoogroups.com”>Email owner of Blind Geeks</a></li>

</ol>

</body>

</html>

If you paste this code in an html file and view in your browser, you will see the list of links with the items marked 1 through 4.

For more about ordered and unordered lists, visit www.w3schools.com and visit the “learn html” section.

Definition lists

Suppose we want to have a list of links on our Blind Geeks page along with a more specific description of each link. We can accomplish this with a definition list.

A definition list has items along with a description for each item.

We start a definition list with the <dl> tag. Each item is marked with the <dt> (for definition term) tag and the description is marked with the <dd> (for definition description) tag.

Let’s modify our blindgeeks page once more to add a description to each link in the list.

<html>

<head>

<title>Blind Geeks</title>

</head>

<body>

<dl>

<dt> <a href="http://blindgeeks.org/BG_L2_Lab1Lessons.htm">Blind Geeks lessons</a></dt>

<dd>Where you can learn about programming and web design.</dd>

<dt> <a href="http://blindgeeks.org/BG_L2_Lab1Radio.htm">Radio broadcasts</a></dt>

<dd>Listen to The Shadow and Rock stop Wednesday</dd>

<dt><a href="mailto:BlindGeeks-subscribe@yahoogroups.com?subject=Join">Join Blind Geeks</a></dt>

<dd>By joining blind geeks, you can participate in email discussions on a variety of programming topics and accessibility.</dd>

<dt> <a href="mailto:BlindGeeks-owner@yahoogroups.com?subject=Hello From BG Member">Email owner of Blind Geeks</a></dt>

<dd>You may feel free to email Bill Dennis (the owner of this list) with any comments or suggestions.</dd>

</dl>

</body>

</html>

Run this code in your browser and you will see each link with its description below it. There is no bulleting or numbering in this example.

2.4: Special characters.

We mentioned previously that all spacing after the first space and all other white spacing is ignored by the browser if the <pre> tag is not used. The HTML special character   can be used to tell the browser that a nonbreaking space is to be placed at that location.

Now, what if you want to have the browser display the < (lesser than) sign as text? The < and > (greater than) signs are used to mark the beginning and ending of a tag name respectively, so if you try and place one of these symbols as text, it will not process it correctly because it will think that you are naming a tag. It is like trying to use a reserved word in a programming language.

There are many other symbols that have a specific purpose, and trying to include them as text will not give the desired result. There are also certain characters that commonly appear such as the trademark symbol that do not have a key on the keyboard. HTML provides a way around this problem by providing a list of special characters that like the   will show the corresponding character at that location. So, for example, if I want to display the line:

If (x < y) && (y > z)

I would write the following:

If (x < y) && (x > z)

Below is a table of the most commonly used special characters and their corresponding meaning.

Symbol	Entity Name	Entity Number
& (ampersand)	`&`	`&`
< (less than)	`<`	`<`
> (greater than)	`>`	`>`
(nonbreaking space)	` `	` `
¢ (cent)	`¢`	`¢`
£ (pound)	`£`	`£`
¥ (yen)	`¥`	`¥`
© (copyright)	`©`	`©`
® (registered trademark)	`®`	`®`
° (degree)	`°`	`°`
± (plus or minus)	`±`	`±`
(dagger)	`&dagger;`	`†`
™ (trademark)	`™`	`™`

2.5: HTML Styles.

To a sighted or partially sighted person, the web would be an awful boring place without color and graphics. This is part of what made the world wide web so popular in the early 1990’s. Apart from the wonderful research features of the web, computer users were suddenly able to see the real power of the personal computer by viewing graphic-based web sites. Unfortunately, most of these computer users were using America Online at the time and the web was very slow due to AOL’s slow connection speeds and the increasing amount of graphics on web pages. However, as other Internet Service Providers came in the scene and the modem speeds increased, users were able to more easily enjoy the prettiness of the web.

Many families began creating their web pages in HTML and posting family photos for their friends and family to see. Again, AOL was one of the first services to offer customers their own web space for this purpose.

I will show you later in this lesson how to embed images into your web pages. But, for now, let’s talk about styles in HTML.

I’m sure that you’ve heard about CSS by now. CSS stands for Cascading Style Sheets. HTML Styles gave birth to this concept. CSS is actually when a programmer placed style commands in a separate file with the extension of .css and makes the HTML document reference it. We will talk about CSS briefly before the end of the lesson but will feature more advanced CSS topics later in the workshop.

HTML Styles are commands we place inside of our HTML document telling the browser to make our fonts, background and foreground or other attributes a certain style.

In HTML, we use the style attribute to affect the style of our pages.

Example #1:

<html>

<body style="background-color:magenta" style="color=floralwhite">

<b>This is exciting</b>

<div style="color=MidnightBlue" style="text-align:center">

Centered Text Within a Div in Midnight Blue.

</div>

<div style="font-family:Comic Sans MS"

style="font-size:150%"

style="color:springgreen"

style="text-align:right" >

Right aligned Text in Comic Sans MS font at 150 percent.

</div>

</body>

</html>

The code above defines the background for the page as magenta and the foreground color as floral white. It then displays the header this is exciting in these colors with the default font.

The code then defines a div, which is a section on the page, defines the foreground color as midnight blue and centers the text within this div only. It then displays the text Centered Text Within a Div in Midnight Blue.

<div> tags are used when you wish to define separate attributes for one area of a page without affecting other areas of the page.

The code then defines a second <div> and sets the font to Comic Sans MS at 150 percent size with the color of spring green and right justified. It then displays the text Right aligned Text in Comic Sans MS font at 150 percent.

Notice that I used color naming in the code. It is easier than remembering color codes but you may also use the color codes.

Exanple #2:

<html>

<body style="background-color:#FF00FF" style="color=#FFFAF0">

<b>This is exciting</b>

<div style="color=#191970" style="text-align:center">

Centered Text Within a Div in Midnight Blue.

</div>

<div style="font-family:Comic Sans MS"

style="font-size:150%"

style="color:#00FF7F"

style="text-align:right" >

Right aligned Text in Comic Sans MS font at 150 percent.

</div>

</body>

</html>

The code in example #2 is the same as that of example #1 except, I substituted the color codes for the color names. The color codes are in hexadecimal format.

A Note About Fonts & Browsers:

Depending on which fonts your browser supports will depend on whether you can use a font or not and what it will actually look like when you page is viewed by a sighted person. Different browsers display pages visually different. Even the same browser on two different computers can display the same page differently. For example, I designed the pages for Lab 2-1 on my work computer but the font sizes appear different when viewed on my home laptop, which both are made by Dell. For these reasons, it is a good idea to have a sighted friend test your page to tell you if it looks correct.

A Note About Color:

I have placed a color chart in Appendix A of this lesson. For the person with no or very little useable sight, colors can be a challenge. It is my suggestion that you seek sighted assistance when matching colors for your web site. Have someone that is a nice dresser who can match colors well tell you which colors go well together and use these color schemes over and over again on your web sites. In the section below, we will learn how to assemble different colors and styles into files for different types of pages. This is called CSS.

2.6: Building HTML Page Templates.

Horizontal Lines:

To make a text-based HTML web site look better visually, we can have the browser draw horizontal lines to separate sections of our page. This is done with the <hr> tag. The basic syntax of the <hr> tag is:

The color, size and width properties are optional. In HTML 4.01 and later, these properties are replaced by styles. When using web design programs such as Microsoft Expression Web, these properties are marked as errors but they will still function as in earlier versions of HTML.

Example:

<html>

<h1>

Blind Geeks

<hr />

</h1>

<body>

</body>

</html>

The example above displays a simple horizontal line after the page header which spans the width of the page.

Example:

<html>

<h1>

Blind Geeks

<hr color="fuchsia" size="5px"/>

</h1>

<body>

</body>

</html>

The example above displays a purple line that is 5 pixels thick (in height) that spans the width of the page.

Example:

<html>

<h1>

Blind Geeks

<hr width="500px" />

</h1>

</html>

The example above displays a horizontal line which is 500 pixels wide.

Divisions

The basic HTML web page has three distinct “areas”:

1. Header.

2. Body.

3. Footer.

The header is used to give the web site name and description of the web site’s purpose. It can also contain links to other pages in a “navigation bar”. A navigation bar is a set of links that act as a menu for the web page.

The body of the page usually displays relevant information pertaining to the page being displayed.

The footer of the page usually contains web page contributors or links that do not fit in the navigation bar.

While the header and body can be elements within a web page, the footer is not an HTML element.

To create a custom element which is not a part of the HTML language, we create a division using the <div> tag.

A division is a rectangular space on the web page defined by the web designer/web developer. It can have separate attributes such as colors, fonts, etc. from the rest of the page.

In Internet Explorer, when the page goes off the screen, vertical and horizontal scroll bars are displayed for the user to scroll to see the part of the page that is not shown on the screen. It looks better visually, though, if your page can fit on the screen.

As of the writing of this lesson, the Blind Geeks web site is 871 pixels wide by 765 pixels high. On higher resolution systems, this actually leaves quite a bit of space in the browser so if you know that most of your site visitors will be using a high resolution such as 1024 by 768, then you can make your pages larger. But, for now, lets stay with 871x765.

A pixel is a small dot in the screen. Each character on the screen is made of several pixels. In the DOS days, each character had a fixed size but not anymore since there are so many different fonts.

For the purpose of this lesson, we will use the Comic Sans MS font.

Example:

<div id="topnav" align="center" style="width: 838px; background-color:navy;color:white; height: 44px; font-weight: 700; font-family: 'Comic Sans MS';">

The Shadow Rocks – The Internet’s Rock Authority

The example above represents the header of a web site. The <div> above defines the header of the page as 838 x 44 pixels, background color of Navy Blue, Foreground color of white and using Comic Sans MS font at 700 weight. This <div> also centers all text horizontally and is assigned an identifier of topnav.

Example:

<div id="nav" align="center" style="background-color:maroon;color:white;width: 838px;">

<a style="color:white" href="http://www.theShadowRocks.com">Home</a>      

<a href="Staff.html">Our Personalities</a>      

<a href="Events">Local Events</a>      

<a href="Radio.htm">Other Radio Interests</a>

<a href="Contact.htm">Contact Us</a>

</div>

The example above shows how a navigation bar is created in HTML using a division.

Example:

<div align="center" style="background-color:white;color:navy; width: 838px; height: 404px;">

<quote>

<br>

<span style="font-family:'Comic Sans MS'">Welcome To The Shadow Rocks dot

com!!

<br><br>

<blockquote>

The Shadow plays Classic Rock music from 1967 through 1992 and has

approximately 4500 songs in its library, many of which are album cuts.

<br/>

<br />

The Shadow also features "Artist Rock Blocks"</span>, which are music sets

by the same artist, every 66 minutes.

<a href="ftp://blindgeeks.com:28/"><span class="style1">Bimini FTP Stuff</span></a><br>

<br>

</blockquote>

Listen to The Shadow:

<a style="color:blue" href="http://theShadowRocks.com/shadow.m3u">

Here.</a>

</quote>

</div>

The example above displays the body division of the web site which contains text and links.

Notice the <span> tag. This will be explained in the next section.

Example:

<div id="footer" align="center" style="width: 838px; background-color:navy;color:white; height: 44px; font-weight: 700; font-size: x-small;">

Save Internet Radio. Don't let money-grubbing record companies bring down non-profit radio. <br>

<br><br>©

</div>

The web page in the examples above consist of a header division, navigation bar division, body division and a footer division.

(&&& 9/23/09)

Anchor Attributes Using <span>

(how to use <span> to specify different attributes in an anchor)

The <span> tag can be used to give links (anchors) different attributes than the page or division. A good example of this would be when the current division uses a blue background. The default color for a link is blue on white. So, to change the link color to white on blue, you would do the following:

<a href=”http://theShadowRocks.com/shadowDialup.m3u”>Play Dialup Stream />

Obtaining Pre-Built HTML Templates

All three sites below offer free, professional looking HTML web page templates. Some sites better-looking templates at a reasonable price.

FREEWEBTEMPLATES.COM

http://www.freewebtemplates.com/

The Blind Geeks web site uses a template found at the site above.

2CREATEAWEBSITE.COM

http://www.2createawebsite.com/build/templates.html

STYLISHTEMPLATE.COM

http://www.stylishtemplate.com/

LAB 2-1: Making Our Site Pretty.

In our first lab of Lesson 2, we will build a web site template then will modify that template to make our Blind Geeks home page. Optionally, you can then build the other pages referenced by the links on the home page using the same template.

Build a Site Template

1. Open a new .html file in Notepad and save it as BGTemplate.html. Hint: It is best to create a folder for your site and save your HTML files into this folder.

2. Declare the document type.

3. Define the page. Hint: You use the <html>, <head> (or.. <head1>, <head2>, etc.) and <body> tags to define a page.

4. Define the title of the page.

5. Define the page background color as "#660000".

6. Define the text color as "#003333".

7. Define the link color as "#FFFFFF".

8. Define the Visited Link color as "#CCCCCC".

9. Define the top and left margins as 0.

10. Save your page.

We just created a blank page where the background color is “maroon”. This will be the background for our page. Now, lets set up some different areas of our page such as the header, navigation bar, body and footer. We will do this by defining “divisions”.

1. Define the heading bar of our page by using a <div> tag. In Older versions of Internet Explorer, it was permissible to place <div> tags in the <head> section but not in IE 7, so lets place the <div> section for the heading bar in the <body> section of our page.

2. Inside of the <div> tag for the heading bar, do the following:

a. Center the text.

b. Set the width to 838 pixels.

c. Set the height to 44 pixels.

d. Set the background color to “Navy”.

e. Set the foreground color to “White”.

f. Set the font family to “Comic Sans MS”.

g. Set the font weight to 700.

3. Define the navigation bar with the following properties:

a. Center the text.

b. Set the width to 838 pixels.

c. Set the height to 44 pixels.

d. Set the background color to “Navy”.

e. Set the foreground color to “White”.

f. Set the font family to “Comic Sans MS”.

g. Set the font weight to 700.

4. Define the body area of the page with the following properties:

a. Center the text.

b. Set the width to 838 pixels.

c. Set the height to 44 pixels.

d. Set the background color to “Navy”.

e. Set the foreground color to “White”.

f. Set the font family to “Comic Sans MS”.

g. Set the font weight to 700.

5. Define the footer are of the page with the following properties:

a. Center the text.

b. Set the width to 838 pixels.

c. Set the height to 44 pixels.

d. Set the background color to “Navy”.

e. Set the foreground color to “White”.

f. Set the font family to “Comic Sans MS”.

g. Set the font weight to 700.

6. Add text to the heading division identifying the site. For example: “Blind Geeks – Where Blind People Learn Programming”.

If a sighted person were to look at our page right now, it would simply look like a blue box on the top followed by a short maroon box then a white box, another blue box and the bottom the color of the background which is maroon. As we add links and text to the page, our divisions grow and the page will take form.

Navigation Bar:

Our navigation bar will consist of text-based links, surrounded by horizontal lines to make it look better.

1. Place anchors in the navigation bar division for Home, Join Our List, Our Lessons, Members Page and the Radio Broadcast Page of the Blind Geeks web site. Place all of these anchors on the same line, separating them by six blank spaces. Remember, you must use the   symbol for a blank space. Use the following properties for the anchors:

a. Home – href=”http://www.blindgeeks.org”

b. Join Our List – href= "mailto:BlindGeeks-subscribe@yahoogroups.com?subject=Join"

c. Our Lessons – href= "BG_L2_Lab1Lessons.htm"

d. Members Page – href= "BG_L2_Lab1Members.htm"

e. Radio Broadcast Page – href= "BG_L2_Lab1Radio.htm"

2. Place a horizontal line on the line above the anchors.

3. Place a horizontal line on the line below the anchors.

The Page Footer:

We now need to add text to our footer division.

Add Any two lines of text you wish with <br> between them.
Add two <br> tags after the two lines of text you just entered.
Add a copyright text line or a Contact Us text line such as “Contact Blind Geeks by sending a message to blindgeeks-owner@yahoogroups.com”.
Save your work. You are now done with the Template.

Build The Web Site Using The Template – Home Page

The body of each page is used to give important information about that particular page. We will now create our home page. We’ve already created the template that we will use for the entire site. Now, we need to fill in the text and links for the body of the home page.

A home page should consist of basic information about your company, the services that you provide and the web site. It also can contain information that you feel is important to the web site visitor. Take a look at the home page of Blind Geeks at http://www.blindgeeks.org for an example of a home page.

1. Copy BGTemplate.html to index.html.

2. Open Index.html in Notepad.

3. Place text and links in the body division of the page.

4. Save your work and test your page.

Notice that as you add text and links to the body of the page, that the footer division moves to the bottom of the page where it belongs. You may use several <br> tags in the body division to position the footer where you desire.

Making The Browser Window Fit The Page (Optional)

Using a small javascript snippet, you can make the browser window resize to make your page look better. Paste the code below into your site’s index.html page (at the end of the first line in the body section) to make it resize the browser window.

onload="window.resizeTo(871,765)"

On the Blind Geek web site, the top line of the body section looks like this:

<body bgcolor="#660000" text="#003333" link="#FFFFFF" vlink="#CCCCCC" topmargin=0 leftmargin=0 onload="window.resizeTo(871,765)">

The onload statement executes when the page loads. Window.resize resizes the browser window.

Optional: Build The Other Site Pages

1. Create the Blind Geeks Lessons page using the concepts in this section.

2. Create the Blind Geeks Members page using the concepts in this section. Place a link on this page with your name that redirects to an html page named with your name (example: bdennis.html).

3. Create a Radio Broadcast page using the concepts in this lesson.

4. Update the navigation bar of all pages so that they point to your pages.

5. Update the body of each page with that you’d want it to say for your own site.

6. Update the footer of each page with what you’d want it to say.