beginning xhtml and css

1

XHTML

and Cascading

Style Sheets

Technology Training

From Libraries, Computing, & Technology

2

XHTML AND CASCADING STYLE SHEETS

Created by: Todd Ring For: Methods and Education Services Administrative Information Services Michigan State University Revisions Original December 24 2008 Revision 1 May 20 2009 Revision 2 January 1 2011 Revision 3 December 28 2011 A big thank you I would like to thank those who have a hand in putting this manual together. Jeane Marty – technical consult Kelli Hart – proofreader © Copyright 2011 – MICHIGAN STATE UNIVERSITY All rights reserved. No part of this publication may be reproduced or stored in a retrieval system, or transmitted in any form or by any means, electronic, mechanical, photocopying, or otherwise. MSU is an Affirmative-Action, equal-opportunity employer

3

TABLE OF CONTENTS XHTML AND CASCADING STYLE SHEETS ............................................................................................................................ 2

TABLE OF CONTENTS .......................................................................................................................................... 3

LESSON 1 – XHTML OVERVIEW ........................................................................................................................... 5

INTRODUCTION .............................................................................................................................................................. 5 WHY CREATE WITH XHTML ............................................................................................................................................ 6 XHTML RULES ............................................................................................................................................................. 7 XHTML DOCUMENT TYPE DECLARATION ........................................................................................................................... 8 THE XHTML NAMESPACE AND XML PROLOG .................................................................................................................... 9 VALIDATION OF YOUR XHTML DOCUMENT ...................................................................................................................... 10 MOVING FROM HTML TO XHTML ................................................................................................................................. 11 INSTALLING THE HTML EDITOR SOFTWARE ...................................................................................................................... 11

LESSON 2 GETTING STARTED ............................................................................................................................. 13

INTRODUCTION ............................................................................................................................................................ 13 CREATE A SITE FOLDER .................................................................................................................................................. 14 REVIEW A GLOBAL STRUCTURE ....................................................................................................................................... 14 CREATE AN INDEX FILE .................................................................................................................................................. 18 CREATE AN EMBEDDED STYLE ......................................................................................................................................... 24 CREATING MORE PAGES ................................................................................................................................................. 27

LESSON 3 – WORKING WITH LINKS .................................................................................................................... 29

INTRODUCTION ............................................................................................................................................................ 29 DISCUSS THE LINK ELEMENTS ......................................................................................................................................... 30 CREATEING HYPERLINKS ............................................................................................................................................... 31 NAMED ANCHORS ........................................................................................................................................................ 32 FORMAT LINKS WITH CSS .............................................................................................................................................. 33

LESSON 4 – ADDING IMAGES ............................................................................................................................. 35

INTRODUCTION ............................................................................................................................................................ 35 THE IMAGE ELEMENT .................................................................................................................................................... 36 CREATING AN IMAGE LINK ............................................................................................................................................. 37

LESSON 5 – CREATING TABLES ........................................................................................................................... 39

TABLE ELEMENTS ......................................................................................................................................................... 40 CREATE THE TABLE STRUCTURE ....................................................................................................................................... 40 STYLE THE TABLE WITH CSS ............................................................................................................................................ 42

LESSON 6 – BOXES, VALIDATION, & UPLOADS ................................................................................................... 45

THE BOX MODEL ......................................................................................................................................................... 46 VALIDATION OF DOCUMENTS ......................................................................................................................................... 47 UPLOADING TO AFS WORKSPACE ................................................................................................................................... 48

APPENDIX A ‐ XHTML ELEMENTS ....................................................................................................................... 51

APPENDIX B ‐ CHARACTER ENTITIES .................................................................................................................. 53

APPENDIX C – CSS PROPERTIES .......................................................................................................................... 55

4

APPENDIX D – REFERENCES ............................................................................................................................... 56

APPENDIX E – COLOR NAME AND HEX VALUES .................................................................................................. 57

APPENDIX F – CREATING AN IMAGE MAP .......................................................................................................... 59

APPENDIX G: SERVERS AT MSU ......................................................................................................................... 61

5

LESSON 1 – XHTML OVERVIEW

INTRODUCTION

XHTML stands for eXtensible Hypertext Markup Language. This is the language or code that is the basis for creating web pages. In this lesson we will examine the basic rules that make up XHTML. We will discuss these rules and look at some examples of document declarations that are needed for each page that is created.

LESSON TIME

• 60 minutes

TOPICS TO BE COVERED

• Why Create with XHTML

• XHTML Rules

• XHTML Document Type Declaration

• The XHTML Namespace and XML Prolog

• Validation of your XHTML Document

• Moving from HTML to XHTML

LEARNING OBJECTIVES

• Learn the reasons to use XHTML • Learn the Document types and Declarations • Learn why to validate your documents • Learn how to move from HTML to XHTML

ACTIVITIES

• Install HTML Editing software

6

WHY CREATE WITH XHTML

• It is extensible. This means that it is customizable and will work flawlessly with future version of XHTML. The current version is XHTML 1.0. At this time 1.1 and 2.0 are being reviewed for implementation.

• It is backward and forward compatible. This means that your code will work with older browsers and with future version of the browsers

• It ensures a cleaner document structure. This means that all formatting is removed from the document and placed into a Cascading Style Sheet (CSS). By separating the content from the formatting, you have a cleaner document with more consistency in the formatting. This also makes the documents smaller in size and this will allow them to load faster.

• It is more accessible. Since XHTML requires the use of attributes that enhance accessibility, such as the use of the alt attribute, this makes for better accessibility.

• It is more consistent. Because XHTML requires well formed code, clean separation of markup and formatting, it will make your documents more consistent. This can also lead to making you a better Web Developer.

7

XHTML RULES

• Every Document must start with a Document Type Declaration

This defines for the browser what type of document it is displaying.

• The HTML element must have a namespace defined

This is a link to a W3C site that is a list of elements and attribute names

• All elements must be written in lowercase

• All elements must have a closing tag

<p>Put your text here</p>

<html></html>

If the element has no closing tag then a “/” is used at the end of the element. <img src=“somepicture.jpg” />

<br /> <hr />

• All attribute values must be enclosed in quotation marks

<hr class=“larger” />

• All attributes must have a value

checked=“checked”

• Do not use double dashes inside a comment element

Correct <! -- This is a comment --> Incorrect <! -- -- This is a comment -- -->

• Use Character Entities instead of symbols

Incorrect < for less than Correct < for less than

Incorrect & for ampersand Correct & for ampersand

• You must use well formed code.

All nested elements must close before the parent element closes Incorrect: <p><em>Some text here</p></em> Correct: <p><em>Some text here</em></p>

8

XHTML DOCUMENT TYPE DECLARATION

The Document Data Declaration is the very first line of your web page. It defines to the browser they what set of rules (defined by the W3C) are going to be used to render this page. There are several DTD’s that can be used depending on your needs. Here we are going to explore only the XHTML 1.0 DTD’s. After you create your page, you will want to make sure that it validates at http://validator.w3.org/

XHTML STRICT

This is the strictest DTD. In order to validate as strict, all criteria for XHTML must be met. All layout and styles must be in a CSS sheet. The DTD is as follows: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

XHTML TRANSITIONAL

This is a looser DTD. Use this DTD when you are moving your page from HTML to XHTML. This allows for use of some deprecated elements and some layout and styling in the code. The DTD is as follows: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

XHTML FRAMESET

This is a combination of transitional plus frames. If you site needs to use frames then you will want to use this DTD. The declaration is as follows: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

9

THE XHTML NAMESPACE AND XML PROLOG

THE NAMESPACE DECLARATION

The namespace declaration is a set of element and attributes names for a DTD. The namespace item is placed inside the opening html element. All valid XHTML documents must have a namespace declaration. The declaration looks like this: <html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”>

THE XML PROLOG

The XML prolog should be at the very beginning of document, however at this time none of the compliant browsers support this and you will receive an error. So for the time being the XML prolog is being placed in a Meta element inside the head element. This is done as follows: <head> <meta http-equiv=“Content-Type” content=“text/html; charset=ISO-8859-1” /> </head> Remember that the meta element is a self closing element (/>). The content tells what type of information is in this document and the charset tells what character mapping set will be used. ISO-8859-1 is equivalent to Latin-1 and is the most common mapping in use today.

10

VALIDATION OF YOUR XHTML DOCUMENT

Validation is the process of making sure that your documents meet all the requirements of the Document Type Declaration that you are using. Some development tools have built in validators (Dreamweaver). If you do not have an application that has a built in validator tool, then you can go to validator.w3.org and give it the URL of your page. This validator tool will tell you what errors that you have. Then you can fix them to become validated.

WHY VALIDATE

Validation is not a rule. It is merely a guideline to help ensure that you have properly created the document. Many times your documents will look different in different browsers. Validation can help ensure that your documents look the same in all compliant browsers. Validation also helps to ensure that you do not have any code errors in your documents. Validation also helps to ensure that your pages will work with alternative devices such as PDA’s and braille devices. Search engines can more accurately index you site if you pages are valid. Validation also helps to ensure that your CSS will not break across your pages.

COMMON ERRORS

Most of the common errors with validation deal with using deprecated elements. Deprecated means that the elements have been used in the past but are no longer valid. Usually there is a new element that is defined to be used in the Cascading Style Sheet for the markup. These are usually simple fixes; just remove the element from the document and add it to your CSS using the correct syntax for the element.

11

MOVING FROM HTML TO XHTML

You can manually move your site to XHTML by performing the following steps on your documents.

• Insert the Document Type Declaration at the top of the document.

• Add the namespace to the html element.

• Change all elements and attribute names to lowercase.

• Make sure that all attribute values have quotation marks around them.

• Make sure that all elements have the closing tag.

• Change all symbols to their Character Entity equivalent. See appendix B.

• Move any formatting and layout to a CSS file and link it to the document.

• Validate your page.

There are also some tools (for free and for purchase) that will help you to move your pages from HTML to XHTML. One of the free tools is call HTML Tidy and can be found at http://tidy.sourceforge.net. One of the benefits of these programs is that they can remove all incorrect code and give you explanations of why. They can also give you some tips to help you make changes and create more accessible documents.

INSTALLING THE HTML EDITOR SOFTWARE

In the XHTML folder on your desktop there is a folder named software. Open this folder and double click on the CoffeeCupFreeHTMLeditor.exe file to start the installation. Accept all default settings. This will be the software that we will be working with today. SETTING UP OUR SITE

On the menu bar, click on go to my website. Select new website project Name = mywebsite (all one word) Location = c:\xhtml\mysite Click Ok.

13

LESSON 2 GETTING STARTED

INTRODUCTION

Now that we have our editing software installed, we are ready to begin the process of creating a site folder and then create and index page.

LESSON TIME

• 60 minutes


• Create a site folder

• Review the global structure

• Creating an Index file

• Creating an Embedded Style

• Creating more pages

LEARNING OBJECTIVES

• Understand the reason for a site folder

• Understand the global structure

• Understand the page creation process

ACTIVITIES

• Create a Site Folder • Create an Index Page

14

CREATE A SITE FOLDER

For each website that you create you will want to create a folder to contain all the files that will be used for that site. This site folder will then be the root of your site. This is where your initial index.html page will exist. Along with the root folder, you will want to create a generic folder structure to keep your site organized. CREATE THE ROOT FOLDER

Using Windows Explorer navigate to c:\ Create a new folder and name it XHTML Double click on the XHTML folder and create the following folders: styles javascript images Close Windows Explorer This give us the basic structure for our site

REVIEW A GLOBAL STRUCTURE

In a basic web document there is a structure. This global structure defines the document as an html document. We will look at the global structure and then discuss each part in more detail. Open the XHTML folder on your desktop and then open the file index.html in the sample folder. The first item in a web document is the document type declaration or the DTD. As mentioned in Lesson 1, there are several options for the DTD depending on the type of document that you plan to create. We will work with a transitional document today. So at the top of the document we will declare that. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> Next we define that this is an html document and add the name space. <html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”> The heading of the document comes next. Here we declare the XML Prologue, along with any meta elements to describe the document or to tell search engines some indexing information with content and key words. Also we add the title element, which is the title for the document. This is also the place for linking to your CSS style sheets and JavaScript script documents. The structure looks like this:

15

<head> <meta http-equiv=“Content-Type” content=“text/html; charset=ISO-8859-1” /> <meta name=“description” content=“Put a description of your page or site here for the search engines to use when they index your site.” /> <meta name=“keywords” content=“key word 1, keyword2, keyword 3, short phrase” /> <link rel=“stylesheet” type=“text/css” href=“path to style sheet” media=“screen” /> <title>My Document</title> </head> Remember that meta elements need to self-close with the / before the closing >. The next part of the document is the body element. All the content for the page is contained within the body element. <body> <div></div> (block element)

<p></p> (block element) <img /> (inline element) <h1></h1> (block element) <a></a> (inline element) <ul> </ul> (block element) <li> </li> (inline element) </body> </html> We end the document after the body with the closing html element.

LOOKING AT THE ELEMENTS

The elements or tags in html are the different parts that make up a document. Some of the main elements are listed above. (body, title, p, div, etc.) All elements have attributes. Attributes are descriptions that tell about the element. You are an element. You have hair, eyes, arms, and legs. These are some of the attributes of the element you. The attributes then have values to describe the attribute. One attribute can have many sub attributes. For example; your hair is brown, long, and thick. Brown is the value of the hair-color attribute of the you element. Long would be value of

16

the hair-length attribute and thick would be the value of the hair-thickness attributes. See appendix A for more elements and attributes.

NESTING ELEMENTS

There is a proper way to nest elements. Nesting is the act of placing one element inside of another element. The term First Open Last Close is how elements should be nested. Examine the following: <div> <ul> <li></li> </div> </ul> This is incorrect. The div and the unordered list closing elements are in the wrong order. Here is the correct way: <div> <ul> <li></li> </ul> </div> Now the unordered list is nested correctly within the division. We will see this as we develop our first page.

DEFINE THE DEFAULT FILE NAME AND A URL

When you go to a web page such as Google, you never enter a file name. You would type http://www.google.com. This is called a URL or Uniform Resource Locator. Behind the scenes of this is the index or default file. Most all web servers look for a file names index when you call the page. The extension will depend on the type of surver that you are using. Here are some of the common types:

Windows Web Server IIS - asp Apache Web Server – php Any Web server – htm or html

You do not need to type the index file name as this is what the server looks for. The web server file structure is just like your windows XP computer files system. You have a root hard drive (C:\) and then folder in folders with files. Example: c:\documents and settings\todd\my documents\word documents\xhtml.docx.

17

A web server has the same type of structure. It starts with the website root, then a folders which may contain more folders, then the documents which are web pages. Example: http://www.ttsite.info/downloads/files/colormap.html As you can see, on the web we use the backward slash where on the computer we use the forward slash.

BREAKING DOWN THE URL

There is a schema to a URL. Let’s break it down. Take the following URL: http://www.ttsite.info/downloads/files/colormap.html The first part is the scheme. It tells the browser how to deal with the file. Here are some of the basic types of schemes:

HTTP – Hypertext Transfer Protocol – Standard web page HTTPS – Hypertext Transfer Protocol Secure – Secure for purchases FTP – File Transfer Protocol – Downloading application or updates

The second part is the web server: www.ttsite.info The next part is the path

/downloads/files/ The last part is the file that we are looking for: colormap.html

ABSOLUTE VS. RELATIVE PATH

When it comes to links, which we will discuss shortly, there are two types of paths, absolute and relative. An absolute path is the entire URL to the document. A relative path is the path from the current folder to the document. This will be made clearer after we discuss links. Close the file.

18

CREATE AN INDEX FILE

The first file that you should create in your web site is the index.html file. This is sometimes called the home page, but we never name it home.html. By default web servers look for a file named index. With most current HTML editors, when you create a new page it will already have the Doctype declaration and the name space along with the html, title, and body elements. CREATE YOUR INDEX FILE

Copy the index_example.htm file and name it index.htm. This file has all of the document structure so that we do not have to retype any of the information.it should contain:

• the Doctype declaration – transitional

• the HTML element and the namespace text

• the title element and a title

• the body element

Save as index.htm and view the page SETTING THE TITLE

Add the title of your page in between the <title> and </title> elements. The title is what shows up at the top of the browse window or for each tab in newer browsers.

CREATING DIVISIONS

A division element is used to separate different parts of the document. For example a heading, navigation, content, and a footer section would all exist in a document. We may want to have different formatting or layout for each of these sections so we would use a div element to create that separation. CREATE A DIVISION FOR THE HEADING

Inside the body tag, add a header division Type the following: <div id=“header”> The div element is a block element. This means that other block and inline elements can go inside of it. Next we create the heading element inside the division element. Just like Microsoft Word, we have several heading elements that can be used for this purpose. They are h1, h2, and h3. The heading elements are block elements. Think of them as paragraphs. When adding text to a block element, we just keep typing. The text will automatically wrap to the next line when it hits the edge of the browser window. If

19

you want to start a new line (but not a new paragraph) use the break element <br />. This is an inline element that will cause a new line but not the extra blank space that a paragraph makes. CREATE THE TITLE PARAGRAPH USING AN H1 ELEMENT

Inside the div element add the following: <h1>This page is all about<br />your name here</h1> There are some special elements that are for looks or decoration. A horizontal rule is one of those elements. It is used to create visual separations on your document. CREATE A HORIZONTAL RULE FOR SEPARATION

Below the title line add a horizontal line (horizontal rule) for separation. The hr element is called an empty element. It also does not have a closing tag so we use the / to close the tag. After the heading block, add the following: <hr /> This is the end of our header area so we close the division element. To help keep ourselves straight on which elements we are closing, as there may be many on large documents, we can also add a comment element to help us remember what we are doing. Comments can be added most anywhere in the document so when you come back to it months later you can see where you are or why you did something the way that you did. ADD THE CLOSING TAG AND A COMMENT

Below the hr element add the following: </div>  Save and view the page.

CREATE THE NAVIGATION DIVISION

Navigation is a term that is used to describe the area that we use for the main links that will take us from one page to another on our site. CREATE THE DIVISION FOR THE NAVIGATION

On the next line in the document add the following: <div id=“navigation”>

20

CREATE THE NEXT PARAGRAPH FOR OUR LINKS

We will be creating the actual links in the next lesson so for now we just create the text. Inside the navigation division, add the following: <p> me | spouse | google | moods| oa</p> Close the navigation division Add the following: </div>  Save and view the document

CREATE THE CONTENT DIVISION

The content is the area where we would put the information for this document. When creating a web site, to make thing simple you can copy one page and rename it and then change the content area. This will begin to keep some consistency between your pages. Add the following: <div id=“content”> CREATE NEXT PARAGRAPH FOR THE TITLE OF THE PICTURE

We want a title over our picture so we will create a paragraph element for that purpose. A paragraph element is a block element. Add the following: <p>This is me</p> We will add the picture in Lesson 4. Next we will add the paragraph for the text that will tell about you (at least 3 to 4 lines). We can add several paragraphs here to describe all that we want. Remember, if you want to add a hard line return in your paragraph then we use the break element. The break element is also an empty element so we close it with a /. Add the following as necessary: <p>Add the text here to describe yourself<br />use a line break if you need to</p> <p>Add second paragraph with more description</p>

21

ADDING A LIST INTO THE PAGE

There are times when you will want to list items on your document. XHTML provides for two types of lists: an ordered list and an unordered list. An ordered list is used when you want to put things in order or to show a ranking. An unordered list is used to list bulleted items. The elements are <ol> for an ordered list and <ul> for an unordered list. Each item within either list uses the <li> element. The <ol> and <ul> are block elements and the <li> is an inline element. Add the following to start the unordered list: <p> These are a few of my favorite things</p> <ul> <li>Favorite Foods</li> <li>Favorite Sports</li> <li>Favorite TV Shows</li> </ul> Save and view the page. We can add a second level to the list. This is called and embedded list. Simply start the second list before the </li> of the list item that it will associate with.

22

Modify your list as follows: <ul> <li>Favorite Foods

<ol> <li>first food</li> <li>second food</li>

</ol> </li>

<li>Favorite Sports <ol>

<li>first sport</li> <li>second sport</li>

</ol> </li>

<li>Favorite TV Shows <ol>

<li>first show</li> <li>second show</li>

</ol> </li>

</ul> CLOSE THE CONTENT DIVISION

This is end of the document content area so we need to close the division Add the following text: </div>  Save and view the document.

CREATE THE FOOTER DIVISION

The footer is information at the bottom of our page. This is a place to add contact information or a copyright for your site. CREATE THE FOOTER

Add the following <div id=”footer”>

23

<p>If you have any trouble with this web site please send me an email</p> </div> <!- - end of footer div - - >

ACRONYM’S & ABBREVIATION’S

We often use acronyms and abbreviation in our writing. To that end, our reader may not always understand what we are talking about. To help with clarity of our acronyms and abbreviations we have two elements that can help. These are the <acronym> and <abbr> elements. We use the title attribute to show the full name of the acronym or the abbreviation. The title attribute will show the full text when you hover over the word in the browser window. They look like this: The acronym is used when the first letters of all the words are used as in NASA. <acronym title=”National Aeronautics and Space Administration”>NASA</acronym> Note: MSU is an acronym The abbreviation is used when a word is being shortened as in e.g. <abbr title=”for example”>e.g.</abbr> USING THE ACRONYM

Let us go back to our index page and add an h2 paragraph that includes the use of MSU to see how this works. In the paragraph about you, let’s add an h2 element that says we work at MSU. <h2>I work in the _________ department at <acronym title=”Michigan State University”>MSU</acronym> Save and view your page. As we look at the document we see that we need to align some items to the center and give our line some color and height. This is where the style comes into play. We move forward by adding an embedded style sheet to format and layout items on the page.

24

CREATE AN EMBEDDED STYLE

ABOUT STYLES

Formatting or styling and layout, is done in one of three ways. Inline Style Embedded Style Sheet External Style Sheet For the purposes of this course we will be looking at the embedded style sheet. We will take a brief look at an external style sheet later in the course. To create an embedded style sheet, we add a style element inside the head element of the document. Sometimes it is necessary to wrap the style item inside of a comment. This is done because some older browsers do not understand the elements in a style sheet. The comment hides them from the older browsers. The style is made up of three parts:

o The element

o The property

o The value of the property

The element is what you wish to format like the body element or the paragraph element. Each element has a list of properties such as background-color or font-face. Each property has a value such as background-color is blue. You define this value to be what you want it to be. Just a side note with styles: most modern web development software, like the Coffee Cup program that we are using, or Adobe Dreamweaver, have built in tools that help you with the selector element and the different attributes and appropriate values. CREATING AN EMBEDDED STYLE

Inside the head element, we add the style element. Place your cursor at the line above the </head> tag and enter the following: <style type=“text/css”> </style> The type=“text/css” attribute and value tells the browser what type of style this is.

25

Next we add the element items that we want to style or format. Let’s start with the body element and make the background of the document a tan color. Colors are usually expressed in hexadecimal format. They are made of three color parts, Red, Green, and Blue. Each color has decimal value of 0 to 255. In Hexadecimal this is expressed in two digits 00=0 and ff=255. There are three sets of two digits, one for red, green, and blue. All hexadecimal references start with a # sign in the value part of the attribute. Styles are called rules. The rules define the elements to be styled. Let’s create a rule to color the background of the document. Inside the comment add the following: body { background-color: #cccc99; } The body is the element; the background-color is an attribute with a value of #cccc99. Save and view the file. We want the title (h1) to be centered. h1{ text-align: center; } To give our line some height, color and center it, add: hr{ height: 3px; background-color: red; align: center; width: 50% } We want the paragraphs to be centered. p { text-align: center; } We also want the ordered and unordered lists to be centered. To save some time and extra typing, we can consolidate all elements that will have the same attributes and values. We put them in the same rule by separating them with a comma.

26

Delete the p rule and change the h1 rule to the following: h1,p,ol,ul { text-align: center; } We need to make sure that there is a comma between the elements as we will see what happens if not in a minute. Save the document and view it. Does it look like you set it up to look? Let’s look at some special items. We want the ordered list to have small roman numerals and the unordered list to have squares. Because of this, we cannot just create a rule for the <li> element. If we create the rule for the <ol> element, because of inheritance the <ol> element that is inside will have the rule. So to target just <li> of the <ol> we create the rule that targets only the list items in a ordered list are affected, like this: ol li { list-style: lower-roman; } And the unordered list would look like this: ul li { list-style: square; } To read this rule we would read it right to left: only the list items of an unordered list. Writing a rule this way allows us to target the exact element that we want. Sometimes there is not a way to directly target an element or we may want some styling for special purposes only. In a case like this we can create what is called a class. We create a class rule by starting with a period and then the name of the class. Use names that make sense to you. After the class is created, to use it we go the element on the document and add class=““ to the opening tag of the element. We want some, not all, of our p elements to have a larger font size. First we create a class rule named .larger and then we apply it to the elements. Let’s create the rule: .larger { font-size: 24px; }

27

To use this class we need to locate the paragraph with “This is me”. We then add the rule to the opening tag of the element like this: <p class=“larger”> Note that we only use the class name. In the style a class is defined by the period but the period is not part of the name of the class. Let make our navigation to be all upper case. We do not want to target just the <a> element as there may be other <a> elements on the page that we do not want in upper case. We do not want to target the <p> element unless we make a class for only that paragraph. But we do already have a division (<div>) element that has an id=“navigation”. If we target this division then only items inside the <div> element will have upper case. To target an element with an id, we use the pound sign in front of the rule and then the id name, like this: #navigation { text-transform: uppercase; } This is the majority of what we will discuss about styles in this class. For more on styles you will want to take the Cascading Style Sheets course.

CREATING MORE PAGES

We need to create, name, and title some more pages that we will work with later in this course. These pages should be created in the root of the site. CREATE THE EXTRA PAGES

Create a page named moods.htm Set the title to My Moods Create a page names spouse Set the title as appropriate Save these pages as we will work with them later

29

LESSON 3 – WORKING WITH LINKS

INTRODUCTION

LESSON TIME

• 45 minutes


• Discuss the Link Elements

• Discuss the types of links

• Format the Links with CSS

LEARNING OBJECTIVES

• Understand the different types of hyperlinks

• Understand how to create the different types of links

• Understand how to format the links

ACTIVITIES

• Create internal hyperlinks

• Create external hyperlinks

• Create an Email hyperlink

• Create Named Anchor hyperlinks

30

DISCUSS THE LINK ELEMENTS

Links or hyperlinks are the web’s way to move from one web page to another. When you click on a hyperlink, it can take you to several places. These are Internal – another web page in the current web site External – a web page on a different web site Named Anchor – a different location on the same page We will explore these three link locations in this exercise. Links also have several states. There are four of these states and they are: Link – this is how an unvisited link looks Active – this is how the link looks when it is being clicked Hover – this is how the link looks when you are hovering over it Visited – this is how the link looks after it has been clicked on We will be interested in the state of a link if we want to change the way that it looks when you are hovering or after it has been clicked on. The link uses the <a> element. This is an inline element so it should be wrapped in a block element. The full element looks like this: <p><a href=“pathtopage”>text to display</a></p> The <p> element is the parent wrapper. Then we have the <a> element. The main attribute of the anchor element is href. This attribute is set to the page that you want to be displayed when the link is clicked. The text to be displayed is between the > and <. The closing part of the element is the </a> and we finish with the closing of the parent tag </p>. Links by default will open in the same window. If you want your link to open in a new window we will use the “target” element to do that. The “target” attribute with a value of _blank with cause your link to open in a new browser window. Let’s revisit Relative and Absolute references for a minute. Recall that relative references are when you are linking to a file in the same folder. In this case we do not need to do anything. If the file you are linking to is one (or more) folders down the folder hierarchy, then you need to add the folder to the relative path. Example: currentfolder/oneleveldown/file.html If index.html is in the current folder and we were linking to file.html the link would look like this: <a href=“oneleveldown/file.html”>new file</a>

31

On the reverse side of that, if we were on the file.html page and wanted to link back to index.html, we would use two periods to indicate that we move up a level: < href=“../index.html”>index file</a> This is all called relative referencing. You are moving relative to your current position. The other side of this is absolute referencing. This is where you would use the complete URL for the href of a link. Suppose that we want to link to Google. This is not in our local site so we have to give an absolute path to google.com like this: <a href=”http://www.google.com”>Google Search</a> To make this open in a new window use the target attribut like this: <a href=”http://www.google.com” target=”_blank”>Google Search</a> Let’s add some links to our page to see how they work.

CREATING HYPERLINKS

CREATE AN INTERNAL (RELATIVE) HYPERLINK

On our index page, click after the paragraph element in front of the word me. We add the hyperlink by typing the following: <a href=“index.html”>me</a> | You can put this on a new line to make it easier to read. The web browser will ignore any white space. Create the links the same way for spouse, moods, and OA. <a href=“spouse.html>“>spouse</a> | <a href=“moods.html”>moods</a> | <a href=”oa.html”>anchors</a> CREATE AND EXTERNAL (ABSOLUTE) HYPERLINK

Now let’s add an absolute reference to Google.com and have it open in a new window. This is called an external link. <a href=”http://www.google.com” target=”_blank”>Google</a> |

32

CREATE AND E-MAIL HYPERLINK

Here is a special type of link for sending an email. We will add this to the footer div. Email me <a href=“mailto:[email protected]”>email us at [email protected]</a> | Save your page and test the links.

NAMED ANCHORS

Named Anchors are a special type of link. When you have a page with lots of text and the reader would have to scroll down the page a long way, we can use named anchors. This is a way a putting some navigation at the top of the page and allowing the reader to click on one of the links and jump to that location on your page. You can then add a link at that that location to take you back to the top of the page. To create a named anchor we use the id=“” attribute of the paragraph that the text is in. We will give each paragraph an id value and then create the hyperlink to jump to that id. In the anchor element we identify this by using a #name for the href=“” attribute. Here is what it would look like <p id=“top”><a href=“#paragraph3”>Paragraph 3</a></p> <p id=“paragraph3”>this is the text of paragraph 3</p> <p><a href=“top”>Go to top of page</a> CREATE NAMED ANCHORS

Let’s try this now. Open the page named oa.html. At the very top create a paragraph with the id of top. <p id=“top”> Putting one link on each line, create the following 4 links. <a href=“#eligibility”>Eligibility</a> <a href=“#induction”>Induction</a> <a href=“#brotherhood”>Brotherhood</a> <a href=“#vigil”>Vigil</a> </p> Next we need to create the named anchors. Find each h2 element that matched the links we created, and add the id attribute to each as appropriate:

33

<h2 id=“eligible”> <h2 id=“induction> <h2 id=“brotherhood”> <h2 id=“vigil”> Next we add the links for each section to be able to return to the top of the page. Find the last line of each section and after the </p> add the following: <a href=”#top”>Back to top</a> Save the changes and try the links.

FORMAT LINKS WITH CSS

Once again we go back to our style to make the links look the way we want them to. Remember there are four states for links, so we have four pseudo elements, one for each of the states. They are: a:link - default state a:visited – for a link that has been followed a:hover – while hovering over a link a:active – While the link is being clicked In your style, you want to define your links in the order listed above. This is important as if the order is changed the defined style may not work correctly. Here is the task at hand for our links.

1. Make the default state to be grey, no underline.

2. Make the visited state to be grey, no underline.

3. Make the hover state to be red, increase size by 50%, underline and overline.

4. Make the active state to be grey, no underline.

STYLE THE LINKS

Let’s start at the bottom of our style and add the default state. a:link {color: #808080; text-decoration: none} Save the document and view it. Everything should be grey. Let’s add the rest of the styles.

34

a:link { color: #ff00ff; text-decoration: none} a:visited { color: #ff00ff; text-decoration: none} a:hover { color: #ff0000; text-decoration: underline overline; font-size:1.5em} a:active { color: #ff00ff; text-decoration: none} Let’s make the text for the “back to top” slightly smaller by creating a rule .small_link {font-size: .8em;} Add this class into each of the “back to top” links like this: <a class=”small_link” href=”#top”>Back to top</a> Save the document and hover over the links.

35

LESSON 4 – ADDING IMAGES

INTRODUCTION

A big part of the Internet is to be able to use pictures on your web pages. Most pictures are either a .jpg, .png, or a .gif. When used on the web for general images or possibly thumbnails, you will want your image to be 72 dpi. Typically you want to display a smaller thumbnail image so that it will load faster. The user would then click on this thumbnail and then be presented with a high resolution image. In this lesson we will explore the use of images on our web page.

LESSON TIME

• 30 minutes


• Adding Images

• Creating an Image link.

LEARNING OBJECTIVES

• Understand the properties of the image element • Understand how to use an image as a link

ACTIVITIES

• Add and image to your web page • Create a hyperlink with the image

36

THE IMAGE ELEMENT

To add an image to a document we use the <img> element. The <img> element is an inline element; this means that it must be placed inside of a block element such as a paragraph element. Also the <img> element is an empty element so we close it with the / before the closing >. Let’s go back to our index page; and under the “This is me” paragraph, we will add the image of ourselves. ADD AN IMAGE TO THE PAGE

First start a paragraph element to place the image element in: <p> Then we add the image element: <img src=“path to image”> Lastly we close the paragraph element: </p> The value of the source attribute (src) is the path to the image including the folder. This should look like /images/mypic.jpg. Save the file and view it.

THE ACCESSIBILITY ATTRIBUTES

As part of web accessibility, we need to make sure that we add the alternate text attribute to any image that we have on our page. If the image is a logo that will add nothing to the page then the alt text attribute can be blank. The alternate text is not just the name of the image, rather is should be a description of the image. Look at your image and then close your eyes and describe it in 255 characters or less. The screen reader will read the alternate text to the user. The alternate text attributes looks like this: alt=”describe the image here”. ADD THE ALTERNATE TEXT ATTRIBUTE

Let’s add this to our image element. <img src=“path to image” alt=”describe the image”>

ADJUSTING THE SIZE

There are two attributes, height and width, that are used with an image element. These attributes should always be use to define the size of your image. When the page loads, the text loads first and then any images. So if you have defined the size of the image then the page will layout properly. If you did not size the image, the page will load and then the layout will change to make room for the image after it is downloaded and the size is then found. This is good web design practice.

37

Proper sizing of the image should be done with a photo editing software like Photoshop. When we add the image to the document, it will be the size of the actual image. Sometimes we need to make the image smaller on the fly. We can do this with the height and width attributes. But remember the proper way is using the photo editor. CHANGE THE SIZE OF THE IMAGE

Let’s make the image 400px by 400px. Edit the image element to this: <img src=“path/toimage.jpg” alt=”describe the image” height=“400px” width=“400px” /> Save the document and view it. We should now see a smaller image.

CREATING AN IMAGE LINK

TURNING AN IMAGE INTO A LINK

There are times when you will want your small image to be clickable and then link to the full size image. We do this by turning the image into a link. This is simple; we wrap the image tag inside of the anchor element. As we learned with our anchor element, we place the text to be viewed between the tags of the element. The same is for an image. We put the image element between the tags of the anchor element. Let’s make our image a link that will show the full size image. Set your insertion point between the paragraph and the image elements, and add the anchor element - like this: <a href=“images/myimage.jpg”> At the end of the image element be sure to close the anchor element </a> Putting it all together: <p><a href=“images/myimage.jpg”><img src=“path/toimage.jpg” alt=”describe the image” height=“400px” width=“400px” /></a></p> Remember to make sure that we have properly nested elements (First Open Last Closed). Save the document and try the link.

39

LESSON 5 – CREATING TABLES

INTRODUCTION

LESSON TIME

• 60 minutes


• Table Elements

• Table Structure

• Styling a Table with CSS

LEARNING OBJECTIVES

• Learn about the elements of a Table • Learn to create the table structure • Learn to style the Table with CSS

ACTIVITIES

• Create a table • Style a table

40

TABLE ELEMENTS

OPEN MOODS.HTML DOCUMENT

Add the global structure if it is not already there.

• Add the DTD.

• Add the Head element and any Meta elements along with the Title element.

• Add the HTML element with the namespace.

• Add the Body element.

THE TABLE ELEMENTS

Here are the main elements of a for creating a table; <table> </table> defines the table. This is a block element. <thead> </thead> defines the header row of a table. <tfoot> </tfoot> defines a footer row in a table. <tbody> </tbody> defines all the rows that make up the body or data of a table. <tr> </tr> defines a row within the table. <td> </td> defines a cell (column) within the row of the table. <th> </th> defines a header cell. Acts like a td but is distinguished as a header. <caption> </caption> describes the table. This element should be immediately after

the table element. Accessibility Attribute: summary this is an accessibility attribute of the table element. It is used to describe

the table structure and content. This will be read by a screen reader but will not be displayed on the rendered page. The proper syntax looks like this: <table summary=“Describe your table here. Use proper sentences and grammar as the screen reader will read it properly”>

CREATE THE TABLE STRUCTURE

CREATE A TABLE

We are going to create a table that is 2 columns by 6 rows. Inside the body element we start with an h1 element to tell what the table is about. <h1>This table will show pictures of my moods</h1>

41

Add a table element and a caption: <table> <caption>This is my mood table</caption> Then we start a row: <tr> Then we add 2 data elements, one for each column <td></td><td></td> Remember, the actual data will go between the opening <td> and the closing </td>. Close the row </tr> We want 5 rows like this so we can copy and paste this 4 more times. Lastly we add the closing tag of the table element: </table> ADD SOME DATA

The first row we want to change to headings, so we change the <td></td> to <th></th> in the first set of data elements. Next we add the heading information. You code should look like this: <th>Mood</th><th>Smiley</th>

42

Now let’s add the data for the rest of the cells. Add the following text for each pair of <td></td> elements in the first column. Not so happy Thinking crazy In love Very sad Next we will add the images to the second column. For this we use the image element. All the images are in the /images/ folder. Add the following text for each pair of <td></td> elements in the second column. <img href=“images/Angry.png” alt=“Angry face” width=”128 px” height=”128 px”/> <img href=“images/Crazy.png” alt=“Crazy face” width=”128 px” height=”128 px”/> <img href=“images/love.png” alt=“Love face” width=”128 px” height=”128 px”/> <img href=“images/sad_cry.png” alt=“Crying face” width=”128 px” height=”128 px”/> We make sure to add the alt element to keep accessibility in tack. In the next section we will look at making the table look the way that we want it to look with CSS.

STYLE THE TABLE WITH CSS

CREATING A STYLE

In the head element of our document we will create the style. We start with the opening tag of the style element: <style type=“text/css”> We want the table to have the following attributes: Centered, 3 pixel red border, no padding, green background First we create the rule for the table table { To center the table we set the left and right margins to auto: margin-left: auto; margin-right: auto;

43

Next we set the border attributes. We need the border to be solid to see it: border: solid; border-color: red; border-width: 3px; Last is the padding and the background color: padding: 0px; (padding is the space between the cell wall and the text or image) background-color: #999999; } Save and view the document. Now let’s look at the Header row, the <th> element: th {

background-color: #999999; font-size: 24px; font-weight: bold;

} Now we’ll add style for the table data area, the <td> elements: td {

border:solid; border-width: 3px; border-color: red; margin-left:auto; margin-right:auto; padding:0px; background-color:green;

} Lastly, we need to take care of the h1 title element. h1 { text-align: center; } Save the document and view it.

45

LESSON 6 – BOXES, VALIDATION & UPLOADS

INTRODUCTION

In out last unit we will discuss some items that will wrap up our discussion of web development. We shall take a deeper look at block elements and the box model. We will discuss how to validate a web page. Lastly we will examine the FTP process of uploading a web site from the local computer to the remote web server.

LESSON TIME

• 60 minutes


• The Box Model

• Document Validation

• Uploading to AFS Workspace

LEARNING OBJECTIVES

• Discuss the Box model for elements • Discuss document validation • Discuss the FTP process

ACTIVITIES

• Validate a web page • FTP pages to AFS

THE B

WHAT I

The elembox. Thipropertyis the pastill existedge of edge.

The marinvisiblefrom the

BOX MO

S THE BOX

ment is the s is the bor

y to solid. Fadding areats. The padthe box. It

rgin is the a unless the

e next elem

DEL

X

center of thrder of the erom the tex

a. The borddding, on alcan act like

area, all foue attribute isent.

he box. Aroelement. It xt of the eleer can be vl four sides

e an indent

ur sides, aros changed t

Your

ound the elecan be see

ement to thevisible or invs, moves theto keep yo

ound the outo solid. The

Element

ement is anen by change border of visible but te text awayur text awa

utside of thee margin ke

n invisible ging its the elementhe paddingy from the ay from the

e box. Thiseeps this e

nt g

s is also lement awa

The the athe bkeepawaedge

The the athe bpart elemfromelem

46

ay

padding isarea insidebox that ps the text

ay from the e of the box

margin is area outsidbox. This keeps this

ment away m other ments.

x.

e

COLLAP

When twmargin bmarginsa 20px melement

As you cThis is th20px of This mahorizontrelatively

VALID

We wanstated incan be fDreamwVALIDAT

Let’s valOpen a Copy anRun the If there aIf there i

PSING MA

wo margins between the. This illust

margin and ts is 20px n

can see, thehe area thathe margin rgin collaps

tal margins.y or in a fix

DATION

nt to make sn the documfound at htt

weaver haveTING YOUR D

lidate our inbrowser to

nd paste yovalidation

are any errois time, che

ARGINS

come togee two will bration showElement Bot a combin

e dark areaat is collaps

of Elemensing only af. Also it doeed manner

OF DOC

sure that oument. To dop://validatoe this tool bOCUMENTS

ndex page http://validu page of c

ors let’s try eck some of

ether (vertice the size o

ws this with B has a 10pned 30px.

a at the top sed and wot A. ffects vertices not affecr. You will le

CUMENT

ur documeno this we wior.w3.org. Sbuilt in.

ator.w3.orgcode to the

to fix themf your other

Eleme

Eleme

cally – one iof the greatElement Ax margin. N

of Elementuld not be s

cally stackect any elemearn about

TS

nts meet thell use a val

Some web d

g validator.

m. r pages.

ent B

ent A

is positioneter margin n

A on top of ENotice the m

t B is the toseen. This

d margins. ents that athis positio

e constraintidator tool. developmen

ed on top ofnot the sumElement B. margin betw

op margin okeeps the i

It does notre positionening in the

ts of the DTThis is an

nt programs

f the other) m of the two

Element Aween the 2

of Element Billusion of th

t affect ed absoluteCSS cours

TS that we online tool s like

47

the o A has

B. he

ely, se.

and

48

ALTERNATE METHOD

Another way to validate is to wait until you have uploaded your site to the remote web server and then at http://validator.w3.org you would enter the URL of the page that you want to check.

UPLOADING TO AFS WORKSPACE

UPLOADING DOCUMENTS

XHTML files can be viewed on your computer from your hard drive because the browser performs the rendering. If you want the world to see your pages they need to be uploaded to a web server. A web server is a computer designed to serve web pages. They come in many flavors, Windows, UNIX, etc. and get yourself space on one relatively inexpensively. Everyone at MSU has a small space on the Universities web server. Today we will be uploading our documents to that space. In order to send Documents to the AFS space or any web server, we need software called FTP or File Transfer Protocol software. This software transfers files from one location to another. We will be using the free version of Coffee Cup FTP today. We will install it from the disk. Other program such as Adobe Go Live and Dreamweaver have this ftp built in to the program as well.

SETUP OF THE FTP

Setting up the ftp involves entering information for the name of the server, our username, and password for that server. Start the FTP program Click on Servers Click Add (the plus sign) Nickname = AFS Server = afs.msu.edu User Name = your MSU Net ID Password =your MSU Net Password Check the boxes to remember password and use passive mode Click More Options Remote Folder = /web/ Click OK To Connect click the drop down arrow on the right of the Server Button and select AFS

49

The right pane is the remote server In the left pane select the local folder for your site UPLOADING THE SITE

To upload the pages, select the files or folders that you want to upload and click on the Upload button on the toolbar. The Download Button is to go from the remote server to your local PC. Because this is freeware we do not have a lot of options. A full FTP to would give us more options like synchronizes; this will tell you what files are missing from your site and which ones are newer, the local file or the remote file. Special Note: In the computer microlabs your AFS space is automatically mapped to the P:\ drive.

51

APPENDIX A - XHTML ELEMENTS

Element Usage  Defines a comment. This will not be

displayed in the browser window.

<a> Creates an anchor element for links

<abbr> Defines an abbreviation Use the title=““ attribute to define the abbreviation

<acronym> Defines an acronyn Use the title=““ attribute to define the acronym

<blockquote>

<body> This is the area of the document that is seen in the browser window. All content goes into this location.

<br /> Provides a line break

<caption> Provides a table heading

<cite> Define a Citation

<div> Defines a logical division for areas of the document

<h1> <h2> <h3> Defines headings

<head> Defines the header information of a document. The document title goes here along with any meta elements and CSS style shee links.

<html> Defines this as an html document

<img> Provides for an image

<li> Defines an item within and ordered or unordered list.

<p> Defines a paragraph

<style> Defines an inline or embedded style

<sub> Denotes a subscript

<sup> Denotes a superscript

52

<table> Defines a table for data layout

<td> Defines the cell of a table. This is the location of the data.

<th> Same as <td> except that this defines the data as header data.

<title> Defines the title for the document. This is what is seen in the title bar in web browsers.

<tr> Defines a row within a table

<ul> <ol> Define an unorderd (bulleted) and ordered (numbered) lists.

53

APPENDIX B - CHARACTER ENTITIES

Always use the character entities in XHTML as the characters themselves are reserved words that mean something to the document. This is a list of some of the more common ones. The W3C has a list of 252 approved entities.

Character / Symbol Character Entitie Less than < <

Greater than > >

Ampersand & &

Quotation Mark “ "

Degree ° °

Copyright © ©

Registered ® ®

Left Arrow ←

Right Arrow →

Up Arrow ↑ ↑

Down Arrow ↓ ↓

Spades ♠ &spades;

Hearts ♥ &hearts;

Diamonds ♦ &diams;

Clubs ♣ &clubs;

Paragraph ¶ ¶

Non-breaking space

For a complete list see www.w3.org/TR/REC-html40/sqml/entities.html

55

APPENDIX C – CSS PROPERTIES

Border properties border-color: sets the color of all borders border-width: sets the width of all broders border-style: sets the style of all boarders Border Styles solid, double, dotted, dashed, groove, ridge, inset, outset Border Sides – you can apply to a specific side of the broder border-left-color border-right-style border-top-width Padding Properties padding: sets the padding for all sides padding-left: sets the padding for just the left side padding-right: sets the padding for just the right side padding-top: sets the padding for just the top side padding-bottom: sets the padding for just the bottom side Font Properties font-style: nornal, italic, oblique font-weight: normal, bold, bolder, lighter, inherited font-variant: normal, small-caps font-family: any acceptable font name. main groups are serif and sans-serif font-size: xx-small, x-small, small, medium, large, x-large, xx-large, pixels or em Text Properties text-align: left, center, right, justify text-indent: in pixles. affects the first line of a block of text text-decoration: none, underline, overline, line-through, blink, inherit text-transform: capitalize, uppercase, lowercase, none, inherit letter-spacing: in pixles, em’s, or percentage word-spacing: in pixles, em’s, or percentage line-height: value multiplied by the base. i.e.: 2 = double spaced

56

APPENDIX D – REFERENCES

WEB SITES

World Wide Web Consortium www.w3.org Character Entities www.w3.org/TR/REC-html40/sqml/entities.html Character Entities www.digitalmediaminute.com/reference/entity/ Todd’s Teaching Site www.ttsite.info MSU Accessibility guidelines www.msu.edu/~rcdp/webaccess/ Federal Section 508 www.section508.gov Tidy – HTML Clean up tool http://tidy.sourceforge.net Color Chart http://en.wikipedia.org/wiki/Web_colors WCAG 1.0 http://www.w3.org/TR/1999/WAI-WEBContent-

1990505/#conformance Web Accessibility Initiative http://w3.org/WIA XHTML Validator http://validator.w3.org CSS Validator http://jigsaw.w3.org/css-validator

BOOKS

HTML & XHTML The Definitive Guide O’Reilly Press HTML 5th ed. with XHTML & CSS Peachpit Press CSS Website Design lynda.com Stylin’ with CSS New Riders

57

APPENDIX E – COLOR NAME AND HEX VALUES

Color Name Hexadecimal Red Green Blue Black 000000 0 000 000

Silver C0C0C0 192 192 192

Gray 808080 128 128 128

White FFFFFF 255 255 255

Maroon 800000 128 000 000

Red FF0000 255 000 000

Purple 800080 128 000 128

Fuchsia FF00FF 255 000 255

Green 008000 000 128 000

Lime 00FF00 000 255 000

Olive 808000 128 128 000

Yellow FFFF00 255 255 000

Navy 000080 000 000 128

Blue 0000FF 000 000 255

Teal 008080 000 128 128

Aqua 00FFFF 000 255 255

59

APPENDIX F – CREATING AN IMAGE MAP

WHAT IS AN IMAGE MAP

An image map is a picture that has clickable hot spots. Each of these hot spots defines a region using the coordinate’s element of a map element. The area element contains four main attributes: shape, coords, href, and alt. The map element can contain as many coordinate elements as you need. Each coordinate defines a link. There are three shapes that you can choose. Each of the shapes is defined here with the coordinate scheme: Rectangle (rect) for square or rectangular shapes x1, y1 for the upper left of the rectangle x2, y2 for the lower right of the rectangle (shape=“rect” coords=“1, 1, 4, 4) Circle (circle) for a round shape x, y for the center point of the circle r for the radius of the circle (shape=“circle” coords=“2, 2, 2”) Polygonal (poly) for irregular shapes x1, y1 for each point on the edge of the shape (shape=“poly” coords=“2, 1, 3, 2, 2, 3”) You can obtain the coordinates of the image by use of a photo editing software like Photoshop or Photoshop Elements. These types of programs with display for you the x and y pixel coordinates for the image. The map element uses the id attribute to identify it. We then use this name in the image element with the usemap element. This way different image’s on the same document can use different maps. Let’s take a look at how this is done. Start Photoshop CS3 and open the image michigan.jpg. Turn the ruler on: View Ruler Change the ruler to Pixels: Right click on the Ruler Pixels Hover to the upper left and lower right of the image to see the pixel position.

60

CREATE THE MAP AREA

We are going to use the picture of michigan.gif and create a map for three counties. When we click on the counties, picture of the counties will be displayed. Let’s start with the map element; this should be inside the paragraph element that wraps the image element: <p> <map id=“michigan” name=”michigan”> Then we add the area elements: <area shape=“rect” coords=“162,197,200,218” href=“images/counties/gatiot.jpg” alt=“Map of Gratiot County” /> <area shape=“rect” coords=“152,259,192,279” href=“images/counties/eaton.jpg” alt=“Map of Eaton County” /> <area shape=“rect” coords=“190,256,223,275” href=“images/counties/ingham.jpg” alt=“Map of Ingham County” /> Then we close the map element. </map> Lastly, we add the image element with the usemap attribute to tell the image what map we want to associate it with then close the containing paragraph. Modify the image tag like follows: <img src=“images/michign.gif” height=“400px” width=“400px” usemap=“#michigan” alt=”Map of Michigan” /> </p> Save your document and test it out.

61

APPENDIX G: SERVERS AT MSU

If you would like to have a server set up for you on the MSU system from ATS then you can navigate to: http://ats.msu.edu/webhosting/ or send an email for information to Tony Beyers at [email protected]. They can host a simple site (html documents only) for $5 per month or a full site (PHP and MySql) for $12.50.