Creating Your Web Site

Creating Your Web Site and an Introduction to the EKU Templates

Parts of an HTML Document • All HTML and XHTML documents have three basic parts: • Tags a way of telling the browser where to begin and where to end certain formatting characteristics example:<table></table>. • Attributes way in which to describe characteristics of the tag. (Use single quotes for all html attributes) • Content material contained between tags which is displayed by the browser.

Tags • There are three types of tags: • Tags that require subtags. The <table></table> and the <ol></ol> are examples. They require additional tags to describe the layout of the table. • Tags which require a begin tag and an end tag. The <div></div> and the <h1></h1> are examples. • Tags which require no ending tag. The <br /> and the <hr /> are examples.

Tags, Attributesand 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.

Proper Nesting <body> <p>This is a sample of proper nesting </p> </body> Improper Nesting <body> <p>This is a sample of improper nesting </body> <p/> 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.

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 Definition Every HTML document should conform to one of the three standards defined by the World Wide Web Consortium (W3C). These standards are: • Strict: does not allow the use of frames or depricated tags. • Loose or transitional: will permit deprecated elements and attributes but not frames. • Frameset: will allow depricated elements and attributes as well as frames. 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">

The HTML Skeleton • All HTML and XHTML documents require the following elements, which create the document “skeleton”: • <html></html> tag • <head></head> tag • <title></title> tag • <body></body> tag You add attributes to these tags in order to create various effects.

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> <head> <title>Insert the title of your page in this space</title> </head> <body> This is where the main body of text will occur within your document. </body> </html>

LESSON 1:Create 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.

SAMPLE: Lesson 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <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>

Commonly Used Tags The following tags are the most commonly used: • <p></p> Paragraph tag. Defines the beginning and ending of paragraphs. Adds an extra line of vertical space after the </p> tag. • <div></div> Division tags. Used at the beginning and ending of text where no extra line of vertical space is needed after the </div> tag. • <br /> Break tag. Simply acts as one carriage return. • <pre></pre> Preformatted Text tag. Will allow text to appear EXACTLY as it is typed in to the document with returns and spaces. • <h1></h1> Heading tag. Allows you to control a page heading. The numbers range from 1-6 with 1 representing the largest size and 6 representing the smallest. Will place extra vertical space between the end tag and the beginning of the next tag. • <hr /> Horizontal Rule tag. Places a line across the display in order to delineate text.

<a></a> Anchor tags. Used to define both the source and the destination of a hyperlink. These tags must be used with an attribute to describe the type of link you are constructing. • <img src> Image tag. Defines an image and its source. • <ol></ol> and <ul></ul> List tags. Defines an ordered or an unordered list. Must contain the <li></li> sub tag to define the list items. • <table></table> Table tag. Used to define the beginning and the ending of a table. Must contain the <tr></tr> sub tag to define the table rows and the <td></td> subtag to define the table cells. • <form></form> Form tag. Used to define a form within the document. Must contain sub tags to define the parts of the form.

Tag 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 describes the background color for the body of the document.

A Word About Color • Colors should be used sparingly within HTML documents. • Only “web safe” colors should be used whenever possible. (Allows for 216 colors) • You should use high contrast colors between text and backgrounds (ie: black and white, tan and black, etc.) • Never use colors that could not be easily distinguished for those who are colorblind. (ie: never use blue, green and red together). • Less is best. Use color to enhance. • Black backgrounds with white text are generally not a good idea because they make printing difficult and waste ink on printers.

Color 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 Hex By remembering a few simple rules, using hex codes can become much easier. 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.

Although every combination of RGB would yield millions of colors, we typically only refer to 256 colors which are guaranteed to be read. 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:Add Tags and Tag Attributes to Your Web Page • Add the following to your web page: • Add a background color to your web page. (pg. 145-146: 5.3.1) • 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 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>My first Webpage</title> </head> <body bgcolor="#ffccff"> <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.<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>

QUIZ 1. List the four tags you are required to have in all html documents. 2. What purpose do tag attributes serve? 3. Name the three types of tags and 2 examples of each. 4. How many ‘web safe’ colors are there? 5. What colors do the following hex codes produce? a. #FF0000 b. #00FF00 c. #0000FF BONUS: Without looking it up, what color would be produced using the following hex code: #FF9933?

QUIZ ANSWERS • The four tags required for all html documents are: <html></html>, <head></head>, <title></title>, and <body></body>. • Tag attributes serve to describe the features for the tag to take on. They provide extra instructions for the tags. • 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> • There are 215 web safe colors. • The hex codes produces the following: a. red, b. green, c. blue. • BONUS • This hex code will produce orange.

LUNCH BREAK Afternoon Session begins At 1:00p.m.

Images, Lists, and Tables And an Introduction to Cascading Style Sheets (CSS)

Images Adding 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 Images • Computer screens can only display 72 dpi. When scanning images, you shouldn’t scan them at more than 150 dpi because this simply increases the file size but has no effect on the quality of the displayed image. • Every time you double the dpi of an image, you quadruple the size of the file. • Pictures with larger file sizes take longer to load. • Scan large, resize and display small. It is better to scan your pictures to a large size to work with them and then to resize them to the appropriate size for display. • Crop images as close as possible. Large amounts of white space and unnecessary background create larger file sizes. • If large pictures are needed, isolate them to their own page and add a thumbnail with a link to the larger image.

The <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 link 2. 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:Add an image 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.

SAMPLE: Lesson 3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>My first Webpage</title> </head> <body bgcolor='#ffccff'> <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.<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> <img src='./beta/images/cas_logo184_D4D0C8.gif' width='200px' height='124px' alt='CAS Logo'> </body> </html>

Lists Lists can be very useful ways of organizing information. There are three types of lists that HTML recognizes and they are: • Ordered lists. Lists in which sequence is important. Items are preceded by a letter or number. • Unordered lists. Lists in which sequence is NOT important. Items are preceded by a bullet. • 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.

Ordered Lists 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 here 2. 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.

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 five 6. List item six What text will the following render? <ol type=‘A’ start=10> <li>Limes</li> <li>Oranges</li> </ol>

Unordered Lists Unordered 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:Adding Lists 1. Add an ordered list with at least 5 items in it and a second unordered list nested inside the first after item 3. The first list should be numbered with Capital Roman numerals (pg. 217-220: 7.2 & 7.2.1.2) and the nested list should be an unordered list with at least 3 items (pg. 214-215: 7.1 & 7.1.1). (Add this list after the image)

SAMPLE: Lesson 4 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>My first Webpage</title> </head> <body bgcolor='#ffccff'> <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.<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> <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>

Tables Tables 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:

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:Add a Table 1. Now add a table to your document. Your table should have at least 3 rows and 2 columns. Your cellpadding and cellspacing should be set to 1 and you should have a border. The table should be no more than 600px wide. A. Add an image to at least one of your cells. This image should be no larger than your maximum height and width of your cell and should be centered in the cell. • The first row of your table should have a background color. (Refer to pg. 362-373 in your text)

SAMPLE: Lesson 5 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>My first Webpage</title> </head> <body bgcolor='#ffccff'> <h1>Melanie Bentley</h1> <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 CSS(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: • Inline Styles • Document-Level (or embedded) Styles • Imported Styles

1. Inline 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.

Document-Level 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 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.

Creating Your Web Site