Creating Your Web Site and an Introduction to the EKU Templates

Creating Your Web SiteCreating Your Web Site

and anand an

Introduction to theIntroduction to the

EKU TemplatesEKU Templates

Parts of an HTML DocumentParts of an HTML Document

All HTML and XHTML documents have All HTML and XHTML documents have three basic parts:three basic parts:

• TagsTags a way of telling the browser where to begin and a way of telling the browser where to begin and where to end certain formatting characteristics where to end certain formatting characteristics example:<table></table>.example:<table></table>.

• AttributesAttributes way in which to describe characteristics of way in which to describe characteristics of the tag. (Use single quotes for all html attributes)the tag. (Use single quotes for all html attributes)

• ContentContent material contained between tags which is material contained between tags which is displayed by the browser.displayed by the browser.

TagsTags

There are three types of tags:There are three types of tags:

• Tags that require subtags.Tags that require subtags. The <table></table> and The <table></table> and the <ol></ol> are examples. They require additional the <ol></ol> are examples. They require additional tags to describe the layout of the table.tags to describe the layout of the table.

• Tags which require a begin tag and an end tag.Tags which require a begin tag and an end tag. The The <div></div> and the <h1></h1> are examples.<div></div> and the <h1></h1> are examples.

• Tags which require no ending tag.Tags which require no ending tag. The <br /> and the The <br /> and the <hr /> are examples.<hr /> are examples.

Tags, AttributesTags, Attributesand Attribute Valuesand Attribute Values

The syntax of a tag consists of the tag name followed by on optional list of tag attributes which are enclosed by the < bracket and the > bracket.

The simplest tag would consist solely of the tag name, such as <title> or <p>. More complicated tags will consist of the tag name and one or more attributes which describe how the tag is supposed to “act”, such as <body bgcolor=‘#FFFFFF’ >. This, for instance tells the body tag that the background color should be white* (*more information about colors will be discussed later).

Tag names and attributes are NOT case-sensitive in HTML, however, in XHTML, case is important and tag names and attributes are in lowercase. It is therefore good practice to use lowercase tags and attributes.

File locations, name references and URL’s are case-sensitive.

Tag attributes should always occur after the tag name and each attribute should be followed by a space, however, their order of appearance is not important.

Some attributes have values associated with them and the attribute name is separated from the value using an equal (=) sign. Example: <table width=‘600px’ height=‘200px’>.

Tags can be nested, however, it is important to remember that they must be nested properly.

Proper NestingProper Nesting<body><body>

<p><p>This is a sample of proper This is a sample of proper nesting nesting </p></p>

</body></body>

Improper NestingImproper Nesting<body><body>

<p><p>This is a sample of improper This is a sample of improper nestingnesting

</body></body>

<p/><p/>

Comments allow the HTML author to include information in the document that is not rendered by the browser. This can be very useful in that it allows the author to add information that is important to him/her, such as source documentation. Information between comment markers is not displayed by the browser.

Comments in HTML documents are written in the following manner:



Notice that there is a space after the initial . Anything can be placed between these markup elements, however, you can not nest comments!!

Document Type DefinitionDocument Type DefinitionEvery HTML document should conform to one of the three standards defined by the World Wide Web Consortium (W3C). These standards are:

EKU has adopted the Loose or transitional standard and this should be stated in the first line of all HTML documents if you wish to use a validator to check your code and check for ADA compliancy. When creating an HTML document for the first time, simply add the following line as the first line in your HTML documents:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

1. Strict: does not allow the use of frames or depricated tags.2. Loose or transitional: will permit deprecated elements and

attributes but not frames.3. Frameset: will allow depricated elements and attributes as

well as frames.

The HTML SkeletonThe HTML Skeleton

All HTML and XHTML documents require All HTML and XHTML documents require the following elements, which create the the following elements, which create the document “skeleton”:document “skeleton”:

• <html></html><html></html> tag tag• <head></head><head></head> tag tag• <title></title><title></title> tag tag• <body></body><body></body> tag tag

You add attributes to these tags in order to create various effects.

So, the html skeleton looks like this:So, the html skeleton looks like this:

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

/loose.dtd">

<html><html>

<head><head>

<title><title>Insert the title of your page in this spaceInsert the title of your page in this space</title></title>

</head></head>

<body><body>

This is where the main body of text will occur within your This is where the main body of text will occur within your document.document.

</body></body>

</html></html>

LESSON 1:LESSON 1:Create a Web PageCreate a Web Page

1. Create a folder on your w: drive called workshop.

2. Open notepad and create an HTML document. Add at least one heading tag and one paragraph tag.

3. Name the document firstweb.php and save it to the workshop folder on the W: drive.

4. Go to your web browser and type in:people.eku.edu/lastnamefirstinitial/workshop/firstweb.php to view your new web page.


<html><head><title>My first Webpage</title></head>

<body>

<h1>Melanie Bentley</h1>

<p>This is the body of my new web page. I've been asked to create at least one paragraph that is long enough to span at least two to three lines. I am really excited about being able to accomplish this task today. Working with the coding part of HTML is fun and challenging at the same time.</p>

</body>

</html>

SAMPLE: Lesson 1 SAMPLE: Lesson 1

Commonly Used TagsCommonly Used TagsThe following tags are the most commonly used:

• <p></p> Paragraph tag<p></p> Paragraph tag. Defines the beginning and ending . Defines the beginning and ending of paragraphs. Adds an extra line of vertical space after the of paragraphs. Adds an extra line of vertical space after the </p> tag. </p> tag.

• <div></div> Division tags<div></div> Division tags. Used at the beginning and . Used at the beginning and ending of text where no extra line of vertical space is ending of text where no extra line of vertical space is needed after the </div> tag.needed after the </div> tag.

• <br /> Break tag<br /> Break tag. Simply acts as one carriage return. . Simply acts as one carriage return. • <pre></pre> Preformatted Text tag<pre></pre> Preformatted Text tag. Will allow text to . Will allow text to

appear EXACTLY as it is typed in to the document with appear EXACTLY as it is typed in to the document with returns and spaces.returns and spaces.

• <h1></h1> Heading tag<h1></h1> Heading tag. Allows you to control a page . Allows you to control a page heading. The numbers range from 1-6 with 1 representing heading. The numbers range from 1-6 with 1 representing the largest size and 6 representing the smallest. Will place the largest size and 6 representing the smallest. Will place extra vertical space between the end tag and the beginning extra vertical space between the end tag and the beginning of the next tag.of the next tag.

• <hr /> Horizontal Rule tag<hr /> Horizontal Rule tag. Places a line across the display . Places a line across the display in order to delineate text. in order to delineate text.

• <a></a> Anchor tags<a></a> Anchor tags. Used to define both the source . Used to define both the source and the destination of a hyperlink. These tags must be and the destination of a hyperlink. These tags must be used with an attribute to describe the type of link you are used with an attribute to describe the type of link you are constructing.constructing.

• <img src> Image tag<img src> Image tag. Defines an image and its source.. Defines an image and its source.• <ol></ol> and <ul></ul> List tags<ol></ol> and <ul></ul> List tags. Defines an ordered . Defines an ordered

or an unordered list. Must contain the or an unordered list. Must contain the <li></li><li></li> sub tag sub tag to define the list items.to define the list items.

• <table></table> Table tag<table></table> Table tag. Used to define the . Used to define the beginning and the ending of a table. Must contain the beginning and the ending of a table. Must contain the <tr></tr><tr></tr> sub tag to define the table rows and the sub tag to define the table rows and the <td></td><td></td> subtag to define the table cells. subtag to define the table cells.

• <form></form> Form tag<form></form> Form tag. Used to define a form within . Used to define a form within the document. Must contain sub tags to define the parts the document. Must contain sub tags to define the parts of the form.of the form.

Tag AttributesTag Attributes

Attributes are used in order to describe certain features of tags. Many tags have multiple attributes which can be used to further define the tag itself.

An example of a commonly used attribute would be the attribute used with the body tag to describe the background color.

<body bgcolor=‘#ffffff’></body>

Attribute that describesthe background color forthe body of the document.

A Word About ColorA Word About Color Colors should be used sparingly within HTML documents.Colors should be used sparingly within HTML documents. Only “web safe” colors should be used whenever possible. Only “web safe” colors should be used whenever possible.

(Allows for 216 colors)(Allows for 216 colors) You should use high contrast colors between text and You should use high contrast colors between text and

backgrounds (ie: black and white, tan and black, etc.)backgrounds (ie: black and white, tan and black, etc.) Never use colors that could not be easily distinguished for Never use colors that could not be easily distinguished for

those who are colorblind. (ie: never use blue, green and those who are colorblind. (ie: never use blue, green and red together).red together).

Less is best. Use color to enhance.Less is best. Use color to enhance. Black backgrounds with white text are generally not a good Black backgrounds with white text are generally not a good

idea because they make printing difficult and waste ink on idea because they make printing difficult and waste ink on printers.printers.

Color and the Hexidecimal CodeColor and the Hexidecimal Code

Understanding “hex” codes for color can be both confusing and overwhelming, however, it is much better to use the hex codes when referring to a color within your html document whenever possible. This will ensure that monitors display the color as it was intended. A quick reference page for the codes occurs at:

http://webmonkey.wired.com/webmonkey/reference/color_codes/

Understanding HexUnderstanding Hex

1. Hex codes are alphanumeric representations of red, green and blue.

2. The code is 6 digits long and made up of values between 0-9 and/or A-F.

3. The format is #RRGGBB which represents a percentage of red, green or blue that is used to create a certain color.

4. Because you are dealing with LIGHT instead of PAINT, it is important to remember that when you combine the full intensity of all colors together, you get WHITE. The code #FFFFFF represents the full intensity and thus yields white. #000000 represents no intensity of color and yields black.

5. Most web safe colors have each of the three values occur is alike pairs and only use the following: 0, 3, 6, 9, C, & F.

By remembering a few simple rules, using hex codes can become much easier.

5. Although every combination of RGB would yield millions of colors, we typically only refer to 256 colors which are guaranteed to be read.

RGB ColorRGB Color

CodeCodeRedRed

ShadeShadeGreenGreen

ShadeShadeBlueBlue

ShadeShadeResultantResultant

ColorColor

#FFFFFF#FFFFFF FF = 255FF = 255 FF = 255FF = 255 FF = 255FF = 255 WhiteWhite

#FF0000#FF0000 FF = 255FF = 255 00 = 000 = 0 00 = 000 = 0 RedRed

#00FF00#00FF00 00 = 000 = 0 FF = 255FF = 255 00 = 000 = 0 GreenGreen

#0000FF#0000FF 00 = 000 = 0 00 = 000 = 0 FF = 255FF = 255 BlueBlue

#000000#000000 00 = 000 = 0 00 = 000 = 0 00 = 000 = 0 BlackBlack

You can also look at hexadecimal this way:

If you wish to understand the mathematics of hexadecimal code, I will refer you to the following website:

http://www.kencole.org/et2assgn6.html

You can also find another color chart at:

http://www.kencole.org/mhsncolor.html

For our purposes, you need only remember the basics.

LESSON 2:LESSON 2:Add Tags and Tag Attributes to Add Tags and Tag Attributes to

Your Web PageYour Web PageAdd the following to your web page:

1. Add a background color to your web page. (pg. 145-146: 5.3.1)

2. Add a second paragraph to your body, however, DO NOT separate the two paragraphs with a blank line. (Hint: look at your tags. Which one will do this?)

SAMPLE: Lesson 2SAMPLE: Lesson 2<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">


<body bgcolor="#ffccff">


<p>This is the body of my new web page. I've been asked to create at least one paragraph that is long enough to span at least two to three lines. I am really excited about being able to accomplish this task today. Working with the coding part of HTML is fun and challenging at the same time.<br />

This is my second paragraph and by using the <br> tag, you can accomplish this task. You can also use the <div> tag. Now, another thing to think about..how do you suppose that I created the < > signs so that they were not read as a tag in the coding??</p>

</body>

</html>

QUIZQUIZ

1. List the four tags you are required to have in all html 1. List the four tags you are required to have in all html documents.documents.

2. What purpose do tag 2. What purpose do tag attributesattributes serve? serve?

3. Name the three types of tags and 2 examples of each.3. Name the three types of tags and 2 examples of each.

4. How many ‘web safe’ colors are there?4. How many ‘web safe’ colors are there?

5. What colors do the following hex codes produce?5. What colors do the following hex codes produce?

a. #FF0000a. #FF0000

b. #00FF00b. #00FF00

c. #0000FFc. #0000FF

BONUS:BONUS:

Without looking it up, what color would be produced using the Without looking it up, what color would be produced using the following hex code: #FF9933?following hex code: #FF9933?

QUIZ ANSWERSQUIZ ANSWERS1. The four tags required for all html documents are:

<html></html>, <head></head>, <title></title>, and <body></body>.

2. Tag attributes serve to describe the features for the tag to take on. They provide extra instructions for the tags.

3. The three types of tags are 1. tags that require subtags, ex. <table></table>, <ol></ol>, <ul></ul>, <form></form>; 2. tags that require a start and an end tag, ex. <div></div>, <p></p>, <h1></h1>, <a></a>. 3. tags that require no end tag, ex. <br />, <hr />, <meta>

4. There are 215 web safe colors.5. The hex codes produces the following: a. red, b. green, c.

blue.

BONUSThis hex code will produce orange.

LUNCH BREAKLUNCH BREAK

Afternoon Session beginsAfternoon Session begins

At 1:00p.m.At 1:00p.m.

Images, Lists, and Images, Lists, and TablesTables

And anAnd an

Introduction toIntroduction to

Cascading Style Sheets (CSS)Cascading Style Sheets (CSS)

ImagesImagesAdding images to your documents can add both functionality as well as decoration to your web site. However, too many images or images which have a large file size can be devastating to your entire website. Images should be used to clarify, illustrate or exemplify the page contents and should not be used frivolously as they tend to increase the load time of your web pages.

There are basically two image formats that browsers will recognize: GIF (Graphics Interchange Format) and JPG or JPEG (Joint Photographic Expert Group). All of the images you place in your HTML document should be of one of these two formats.

Guidelines for Scanning ImagesGuidelines for Scanning Images Computer screens can only display 72 dpi. When scanning Computer screens can only display 72 dpi. When scanning

images, you shouldn’t scan them at more than 150 dpi images, you shouldn’t scan them at more than 150 dpi because this simply increases the file size but has no effect because this simply increases the file size but has no effect on the quality of the displayed image.on the quality of the displayed image.

Every time you double the dpi of an image, you quadruple Every time you double the dpi of an image, you quadruple the size of the file.the size of the file.

Pictures with larger file sizes take longer to load.Pictures with larger file sizes take longer to load. Scan large, resize and display small. It is better to scan Scan large, resize and display small. It is better to scan

your pictures to a large size to work with them and then to your pictures to a large size to work with them and then to resize them to the appropriate size for display.resize them to the appropriate size for display.

Crop images as close as possible. Large amounts of white Crop images as close as possible. Large amounts of white space and unnecessary background create larger file sizes.space and unnecessary background create larger file sizes.

If large pictures are needed, isolate them to their own page If large pictures are needed, isolate them to their own page and add a thumbnail with a link to the larger image.and add a thumbnail with a link to the larger image.

The <img> tagThe <img> tag

The <img> tag allows you to insert a graphic into the text flow of your document. There is no implied line or paragraph break before or after this tag.

There are two ways to link to the image source:1. Absolute path: the complete address of a resource or link2. Relative path: an abbreviated address that, when combined with the “base address” becomes a complete address.

It is best to use absolute paths when referring to a specific website that may be located someplace other than within your website.

You can use relative paths when linking to objects located within your website.

The syntax for using the <img> tag is as follows:

<img src=‘http://people.eku.edu/bentleym/images/pic.jpg’>

The above is an example of an absolute path. What would happen to this path if you moved your website to a different server?

<img src=‘images/pic.jpg’>

The above is an example of a relative path. What would happen in this case if you moved your website to a different server?

ALL IMAGES SHOULD INCLUDE THE ALT ATTRIBUTE!!!!The alt attribute allows the web browser to add a descriptive line of text that is revealed whenever the mouse is place over the picture. This is especially important for ADA compliancy in that it allows special readers to identify the picture to the user. The following is an example.

<img src=‘images/pic.jpg’ alt=‘This is a picture of a dog’>

LESSON 3:LESSON 3:Add an imageAdd an image

1.1. From the workshop/beta/images folder, add the cas_logo184_D4D0C8.gif image to your web page after your paragraph. Make sure this image is 200px wide and 124px tall. (pg. 125-126:5.2.6 & 5.2.6.1 and pg. 137: 5.2.6.10).

2. Add an ‘alt’ attribute to describe your picture.



<body bgcolor='#ffccff'>



This is my second paragraph and by using the <br> tag, you can accomplish this task. You can also use the <div> tag. Now, another thing to think about..how do you suppose that I created the < > signs so that they were not read as a tag in the coding??</p><img src='./beta/images/cas_logo184_D4D0C8.gif' width='200px' height='124px' alt='CAS Logo'>

</body></html>

ListsLists

1. Ordered lists. Lists in which sequence is important. Items are preceded by a letter or number.

2. Unordered lists. Lists in which sequence is NOT important. Items are preceded by a bullet.

3. Definition lists. Lists where you have a termed followed by a definition or an explanation. In definition lists, browsers generally render the term on the left margin and the definition below and indented.

Lists REQUIRE sub tags in order to define the list items.

Here, we will discuss only the first two types of lists. If you wish to know more about definition lists, refer to page 225-230 in your text.

Lists can be very useful ways of organizing information. There are three types of lists that HTML recognizes and they are:

Ordered lists are a way of organizing information where the sequence is important. <ol type=1> <li> the first item in your list goes here</li> <li> the second item in your list goes here</li></ol>

The above code will produce the following:

1. the first item in your list goes here2. the second item in your list goes here

By changing the values for the type attribute, you can create a variety of looks, including capital letters, lowercase letters, capital roman numerals, lowercase roman numerals, and arabic numerals.

Ordered ListsOrdered Lists

You can also create continued lists using the start attribute. This will allow you to change the beginning value of the list.

<ol start =5> <li>List item five</li> <li>List item six</li></ol>

Will render the following text:

5. List item five6. List item six

What text will the following render?

<ol type=‘A’ start=10> <li>Limes</li> <li>Oranges</li></ol>

Unordered ListsUnordered ListsUnordered lists are collection of related items that have no special order or sequence.

<ul> <li>an item in the list</li> <li>another item in the list</li></ul>

will render the following text:

●An item in the list●Another item in the list

You can nest lists in order to achieve different effects. You MUST remember the rules of proper nesting however.

When nesting lists, indentation is cumulative, meaning that each nested list is indented relative to the previous list, so it is important not to nest too deeply so that your lists do not run off the page.

LESSON 4:LESSON 4:Adding ListsAdding Lists

1.1. Add an ordered list with at least 5 items in it and Add an ordered list with at least 5 items in it and a second unordered list nested inside the first a second unordered list nested inside the first after item 3. The first list should be numbered after item 3. The first list should be numbered with Capital Roman numerals with Capital Roman numerals (pg. 217-220: 7.2 & (pg. 217-220: 7.2 &

7.2.1.2)7.2.1.2) and the nested list should be an and the nested list should be an unordered list with at least 3 items unordered list with at least 3 items (pg. 214-215: (pg. 214-215:

7.1 & 7.1.1)7.1 & 7.1.1)..

(Add this list after the image)(Add this list after the image)






This is my second paragraph and by using the <br> tag, you can accomplish this task. You can also use the <div> tag. Now, another thing to think about..how do you suppose that I created the < > signs so that they were not read as a tag in the coding??</p><img src='./beta/images/cas_logo184_D4D0C8.gif' width='200px' height='124px' alt='CAS Logo'><br />

<ol type='I'><li>Meats</li><li>Vegetables</li><li>Fruits</li> <ul> <li>watermelon</li> <li>grapefruit</li> <li>peaches</li> </ul> <li>Breads</li> <li>Dairy</li></ol></body>

</html>

TablesTablesTables are a useful way to organize information and document layout within your web documents. They are easily managed when you know the basic format of this tag.

It is important to know that with ADA Compliancy programs such as JAWS, which read web documents to the sight impaired, read tables from top left to top right and from top left to bottom left. The information you place in your tables should read in this direction as well.

The HTML code for the standard table looks like this:

<table border=‘1’ cellpadding=‘0’ cellspacing=‘0’> <tr> <td>this is the first cell (from the left) of the first row</td> <td>this is the second cell (from the left) of the first row</td> <td>this is the third cell (from the left) of the first row</td> </tr>

<tr> <td>this is the first cell (from the left) of the second row</td> <td>this is the second cell (from the left) of the second row</td> <td>this is the third cell (from the left) of the second row</td> </tr></table>

This code will produce a table with two rows and three columns that looks like this:

this is the first this is the first cell (from the cell (from the left) of the first left) of the first row.row.

this is the this is the second cell second cell (from the left) (from the left) of the first row.of the first row.

this is the third this is the third cell (from the cell (from the left) of the first left) of the first row.row.

this is the first this is the first cell (from the cell (from the left) of the left) of the second row.second row.

this is the this is the second cell second cell (from the left) (from the left) of the second of the second row.row.

this is the third this is the third cell (from the cell (from the left) of the left) of the second row.second row.

In the previous example, notice that attributes were added to the table tag. These attributes are commonly used in tables in order to create ‘visual oxygen’ (a term used by Ron Yoder). It allows the web author to create space around and between the cells.

For an example of this, click here.

Copy the following code into your web editor and give it a try. Try changing the attributes to achieve different effects.

<table border=‘1’ cellpadding=‘0’ cellspacing=‘0’> <tr> <td> Cell 1</td> <td> Cell 2</td> <td> Cell 3</td> </tr>

<tr> <td> Cell 4</td> <td> Cell 5</td> <td> Cell 6</td> </tr></table>

Try adding attributes to the <tr> and the <td> tags to see how it will affect your table. Change the height and width attributes. You can also add color to table rows and table cells by using the bgcolor attribute.

*Style sheets can also be applied to rows and cells.

LESSON 5:LESSON 5:Add a TableAdd a Table

1.1. Now add a table to your document. Your table Now add a table to your document. Your table should have at least 3 rows and 2 columns. should have at least 3 rows and 2 columns. Your cellpadding and cellspacing should be set Your cellpadding and cellspacing should be set to 1 and you should have a border. The table to 1 and you should have a border. The table should be no more than 600px wide.should be no more than 600px wide.

A.A. Add an image to at least one of your cells. Add an image to at least one of your cells. This image should be no larger than your This image should be no larger than your maximum height and width of your cell and maximum height and width of your cell and should be centered in the cell.should be centered in the cell.

B.B. The first row of your table should have a The first row of your table should have a background color.background color.

(Refer to pg. 362-373 in your text)(Refer to pg. 362-373 in your text)





<table width='600px' border='1px' cellpadding='1px' cellspacing='1px'><tr bgcolor='ffffff'><td>this is a data cell</td><td>this is another data cell</td></tr><tr><td>this is yet another data cell</td><td><img src='./beta/images/cas_logo184_D4D0C8.gif'></td></tr>

</table>

</body></html>

An Introduction to CSSAn Introduction to CSS(Cascading Style Sheets)(Cascading Style Sheets)

Style sheets are a set of rules which manage the overall formatting of your web pages from a single page or within your page. They allow for greater control of your formatting as well.

There are three ways to attach a style sheet to your web pages:

1. Inline Styles2. Document-Level (or embedded) Styles3. Imported Styles

Inline Styles are the simplest way to include a style into your document. You can do this by using the style attribute within your tag and attaching a value to this attribute.

Example: <h1 style=‘color:blue; font-style:itallic; margin-left:4em’>Mel’s Homepage</h1>

Inline styles have only a local effect, meaning they only effect the tag with which they are associated. They can also make the code in your document long and difficult to read, however, they are quite useful and powerful when only a local effect is desired and in many cases, should be used instead of the more common tags such as <b></b>, <font></font>, etc. when possible.

1. Inline Styles1. Inline Styles

2.2. Document-Level Style SheetsDocument-Level Style Sheets(Embedded Style Sheets)(Embedded Style Sheets)

Document-Level Style Sheets are when style rules are embedded at the beginning of your HTML document. When this is done, they are placed between the <head></head> tags and have their own tag: <style></style>. All rules are placed between the <style></style> tags. When you place the styles here, they affect ALL of the same tags within the document the same way.

Whenever you insert a document-level Style Sheet, you must include the type attribute to the style tag.Example:<style type=‘text/css’>insert style rules here</style>

This is done in order to identify what kind of style sheets you are using. There are many different types, so you must tell what type you are using by adding this attribute.

Example:

<html> <head> <title>My First Web Page with Style Sheets</title> <style type='text/css'> h1 { color:#CC0033; font-size:42px; font-family:serif; font-style:italic; } </style> </head>

<body> <h1>My First attempt at style sheets</h1> </body></html>

3. Imported Style Sheets3. Imported Style Sheets

Imported Style Sheets are external documents which contain all the style rules and are “called” into the web document.

Using Imported Style Sheets is advantageous because you can effect multiple documents on your website by using one style sheet. This also makes changing your styles much more simplistic because you only need to change your style rules in one place to effect every page in your document.

If you are importing a style sheet into your document, you must place the @import command between the <head></head> and after the <title></title> tags of your document. You must also use comment marks before and after the @import command line.

Example:

<html> <head> <title>Imported Style Sheets</title> <style type='text/css'>  </style> </head>

<body> This is the body of the document. </body></html>

*Note: notice the  after the @import line. These are comment marks - remember? Because some older browsers do not recognize style sheets, you must have these comment lines before and after the @import statement so the browser doesn’t display them.

A Word About ClassesA Word About ClassesClass Selectors within Style Sheets allow the web author to have more control over what styles are applied to what tags. For instance, you may wish for the body of one page to have a background color of blue but on a subsequent page, yellow. By assigning classes, you gain more control over this.

The Class Selector is defined within the style sheet rules and occurs after the tag definition.

The syntax of a Class Selector is:

body.blue{ background-color:#0000ff;}

Where b represents the tag to which the class is being applied followed by a dot (.) and the name of the class.

Within your web document, the code would something like this:


<body class=‘blue’> This is the body of the document. </body></html>

You can also apply classes to inline elements using the <span></span> tag:


<body> <span class=‘blue’>This is the body of the document.</span> I can create different effects by using the span tag. </body></html>

In this case, only the information between the <span></span> tags will have a blue background.

You should note the following when using Style Sheets:

1. You add the style tag with the type=‘text/css’ attribute between the <head></head> tags and after the <title></title> tags.

2. Each rule begins with the tag to which you wish the style to apply which is called a selector.

3. All rules are enclosed between curly brackets ({}).4. More than one style “rule” can be placed between curly

brackets, however, each must be separated using a semi-colon (;).

5. Only one rule to a line. This helps in organization and readability, but is not required.

6. When importing an external style sheet, use @import followed by the absolute or relative path name of the style sheet. Also add comment marks before and after the @import statement.

7. To achieve greater control over your styles, use class selectors.

8. To create inline styles on specific text using class assignments, use the <span></span> tags.

9. The most recently imported style sheet takes precedence. The means that the imported style sheet (the one occurring closest to the <body> tag, takes precedence over any previously imported style sheets, document-level style sheets take precedence over imported style sheets and inline styles take precedence over them all.

10. When naming style sheets, give them an extension of .css in order to easily recognize that it is a style sheet.

HOMEWORKHOMEWORK

Read the following in your text:Read the following in your text:

pg. 234-237: 8.1 - 8.1.2.1pg. 234-237: 8.1 - 8.1.2.1

pg. 238-239: 8.1.3 - 8.1.3.2pg. 238-239: 8.1.3 - 8.1.3.2

pg. 242-245: 8.1.7-8.2.2pg. 242-245: 8.1.7-8.2.2

pg. 254-261: 8.4 - 8.4.3.8pg. 254-261: 8.4 - 8.4.3.8

pg. 265 -298: 8.4.5 -8.4.11.6 (as time allows)pg. 265 -298: 8.4.5 -8.4.11.6 (as time allows)

and be prepared to create some styles tomorrow!and be prepared to create some styles tomorrow!

End of First DayEnd of First Day

Class will begin atClass will begin at

8:30 AM8:30 AM

Tuesday, July 26Tuesday, July 26

Day TwoDay TwoMorning SessionMorning Session

CSS and An Introduction toCSS and An Introduction to

the EKU Web Templatesthe EKU Web Templates

You should now be ready to apply some of what you have learned about style sheets.

On your web page you should still have the following:

A headingA paragraphAn imageA listA table

You are now going to create a an external style sheet to format your page and import it into your document.

CSS, continued…CSS, continued…

LESSON 6:LESSON 6:Creating a CSSCreating a CSS

1.1. Create an external style sheet which sets the Create an external style sheet which sets the following:following:a. sets the font for the entire document to a sans-a. sets the font for the entire document to a sans-serif fontserif fontb.b. sets the color of the heading to dark blue, sets the color of the heading to dark blue, bolds it and sets the font size to 42px.bolds it and sets the font size to 42px.c. sets the font size for the remainder of the c. sets the font size for the remainder of the document to 20px.document to 20px.d. creates a square for the unordered lists bulletsd. creates a square for the unordered lists bulletse. creates a margin for the list to 25em.e. creates a margin for the list to 25em.f. Save style sheet as style.cssf. Save style sheet as style.css

2. 2. Import this sheet into your document.Import this sheet into your document.

SAMPLE: Lesson 6SAMPLE: Lesson 6/* CSS Document */

body{font-family:Verdana, Arial, Helvetica, sans-serif;font-size:20px;}

h1{color:#330099;font-weight:bold;font-size:42px;}

ul{list-style-type:square;}

ol{margin-left:25em;}

SAMPLE: Lesson 6, cont.SAMPLE: Lesson 6, cont.Importing into php documentImporting into php document


<html><head><title>My first Webpage</title><style type='text/css'></style></head>



You have now mastered the art of coding and should be able to attempt creating your web pages.

However, Ron Yoder and Qing Cui, EKU webmasters, have developed web templates to make our jobs easier. These templates are ADA compliant and offer the user a manageable arena for their web materials.

This is an example of the new Arts & Sciences web template design.

The following are features that you get with the new template:

The EKU Menu

The CollegeMotto

CustomizedRotating PhotoGallery

Customized SideMenu Bar

College Logo w/linkback to Collegepages

Customizedtop menu

Easy to useNews &Events area

Directory StructureDirectory Structure

It is important to plan out the directory structure within your website. A messy structure within your website makes it difficult to manage your website as it grows.

The web templates are located within the departmental websites in a folder named WEB7.

Inside your personal web space, you should have two folders, one called BETA and a second called BETA1. These folders contain all the templates. The BETA folder contains the templates for Departmental Web Sites, while the BETA1 folder contains the templates for personal Web Sites.

Files & Folders AssociatedFiles & Folders Associatedwith the Templateswith the Templates

You will see that there are common folders and files to both the personal and the departmental web folders. The most important of these are the images folder, the rotating_images folder, the includes folder, the default.php files and the template.php file.

The Images FolderThe Images Folder• The images folder should contain all images associated

with your website.

The Rotating_Images FolderThe Rotating_Images Folder• The rotating_images folder contains all photos that are The rotating_images folder contains all photos that are

placed in the header. Images in this folder should placed in the header. Images in this folder should adhere to size restrictions being 214 pixels wide and 75 adhere to size restrictions being 214 pixels wide and 75 pixels tall.pixels tall.

The Includes FolderThe Includes Folder• The includes folder contains files that are common to all

pages and include the custom.inc, the local.css as well as a few other files.

The custom.inc file holds information such as your “home” URL, your departmental name, your top and side menu bar information and contains php codes which give the web browser information on how to display certain aspects of your documents.

The local.css file contains your style sheet information. Style sheet rules can be added to this file in order to personalize your web pages.

The default.php file is the file that contains the main page of your website. This is the starting point for all other pages in your site.

The template.php file is the file that contains pertinent information and can be used to define other pages.

As you can see in our folders, there are no files with the .htm or .html extension. That is because EKU has adopted a new format using PHP. PHP is a scripting language which can be easily embedded into HTML. It is particularly good for designing web sites in that is open source, extremely stable and provides security within your web site, and allows web developers to write dynamic web pages quickly.

Although the .htm and .html extensions still work, it is best to save all your web files as .php.

A Word About PHPA Word About PHP

The custom.inc FileThe custom.inc File

PHP allows you to create one file for all the items in your web site that are common to all pages. This file has (arbitrarily) been named the custom.inc.

When the web browser processes your web page, this file is then “called” and the scripts within it are processed by the web browser. Because the php is embedded in your html document, once the php code is processed, the web browser will continue to process the html code.

We will begin by breaking down the custom.inc file into parts that require editing.

The local.css FileThe local.css File

For the most part, you should not have to edit this file unless you want to add more style rules here. If you choose to add additional style rules, do so at the end of the document.

The default.php FileThe default.php FileThe default.php file contains the actual content of the first web page of your site.

Useful CodeUseful Code

Email: <a href="http://web.eku.edu/contact/?c_email=melanie.bentley&title=Contact Melanie Bentley">Melanie Bentley</a>

Documents

Creating Your Web Site and an Introduction to the EKU Templates