Creating Your Web Site and an Introduction to the EKU Templates.

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: 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:.Tags a way of telling the browser where to begin and where to end certain formatting characteristics example:. Attributes way in which to describe characteristics of the tag. (Use single quotes for all html attributes)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.Content material contained between tags which is displayed by the browser.

Tags There are three types of tags: There are three types of tags: Tags that require subtags. The and the are examples. They require additional tags to describe the layout of the table.Tags that require subtags. The and the are examples. They require additional tags to describe the layout of the table. Tags which require a begin tag and an end tag. The and the are examples.Tags which require a begin tag and an end tag. The and the are examples. Tags which require no ending tag. The and the are examples.Tags which require no ending tag. The and the are examples.

Tags, Attributes and 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. The simplest tag would consist solely of the tag name, such as or. 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. 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:. Tags can be nested, however, it is important to remember that they must be nested properly. Proper Nesting <body> This is a sample of proper nesting This is a sample of proper nesting </body> Improper Nesting <body> This is a sample of improper nesting This is a sample of improper nesting</body><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 Definition Every 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 Skeleton All HTML and XHTML documents require the following elements, which create the document “skeleton”: All HTML and XHTML documents require the following elements, which create the document “skeleton”: 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><head> Insert the title of your page in this space Insert the title of your page in this space </head><body> This is where the main body of text will occur within your document. 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.

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

Commonly Used Tags The following tags are the most commonly used: Paragraph tag. Defines the beginning and ending of paragraphs. Adds an extra line of vertical space after the tag. Paragraph tag. Defines the beginning and ending of paragraphs. Adds an extra line of vertical space after the tag. Division tags. Used at the beginning and ending of text where no extra line of vertical space is needed after the tag. Division tags. Used at the beginning and ending of text where no extra line of vertical space is needed after the tag. Break tag. Simply acts as one carriage return. Break tag. Simply acts as one carriage return. Preformatted Text tag. Will allow text to appear EXACTLY as it is typed in to the document with returns and spaces. Preformatted Text tag. Will allow text to appear EXACTLY as it is typed in to the document with returns and spaces. 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. 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. Horizontal Rule tag. Places a line across the display in order to delineate text. Horizontal Rule tag. Places a line across the display in order to delineate text.

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. 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. Image tag. Defines an image and its source. Image tag. Defines an image and its source. and List tags. Defines an ordered or an unordered list. Must contain the sub tag to define the list items. and List tags. Defines an ordered or an unordered list. Must contain the sub tag to define the list items. Table tag. Used to define the beginning and the ending of a table. Must contain the sub tag to define the table rows and the subtag to define the table cells. Table tag. Used to define the beginning and the ending of a table. Must contain the sub tag to define the table rows and the subtag to define the table cells. Form tag. Used to define a form within the document. Must contain sub tags to define the parts of the 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. Attribute that describes the background color for the body of the document.

A 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. (Allows for 216 colors) 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.) 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). 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. 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. 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 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 Color CodeRedShadeGreenShadeBlueShadeResultantColor #FFFFFF FF = 255 White #FF0000 00 = 0 Red #00FF00 FF = 255 00 = 0 Green #0000FF FF = 255 Blue #000000 00 = 0 Black 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: 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 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> My first Webpage Melanie Bentley 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. 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??

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 1.The four tags required for all html documents are:,,, and. 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.,,, ; 2. tags that require a start and an end tag, ex.,,,. 3. tags that require no end tag, ex.,, 4.There are 215 web safe colors. 5.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. 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. 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. 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. 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. 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. If large pictures are needed, isolate them to their own page and add a thumbnail with a link to the larger image.

The tag The 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 tag is as follows: The above is an example of an absolute path. What would happen to this path if you moved your website to a different server? 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.

LESSON 3: Add 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.

SAMPLE: Lesson 3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> My first Webpage Melanie Bentley 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. 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??

Lists 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. the first item in your list goes here the second item in your list goes here 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. Ordered Lists

You can also create continued lists using the start attribute. This will allow you to change the beginning value of the list. List item five List item six Will render the following text: 5. List item five 6. List item six What text will the following render? Limes Oranges

Unordered Lists Unordered lists are collection of related items that have no special order or sequence. an item in the list another item in the list 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"> My first Webpage Melanie Bentley 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. 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?? Meats Vegetables Fruits watermelon grapefruit peaches Breads Dairy

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: this is the first cell (from the left) of the first row this is the second cell (from the left) of the first row this is the third cell (from the left) of the first row this is the first cell (from the left) of the second row this is the second cell (from the left) of the second row this is the third cell (from the left) of the second row

This code will produce a table with two rows and three columns that looks like this: this is the first cell (from the left) of the first row. this is the second cell (from the left) of the first row. this is the third cell (from the left) of the first row. this is the first cell (from the left) of the second row. this is the second cell (from the left) of the second row. this is the third cell (from the left) of the 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.here Copy the following code into your web editor and give it a try. Try changing the attributes to achieve different effects. Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6

Try adding attributes to the and the 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. B.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"> My first Webpage Melanie Bentley this is a data cell this is another data cell this is yet another data cell

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: 1. Inline Styles 2. Document-Level (or embedded) Styles 3. 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: Mel’s Homepage 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,, etc. when possible. 1. Inline Styles

2.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 tags and have their own tag:. All rules are placed between the 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: insert style rules here 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: My First Web Page with Style Sheets h1 { color:#CC0033; font-size:42px; font-family:serif; font-style:italic; } My First attempt at style sheets

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 and after the tags of your document. You must also use comment marks before and after the @import command line.

Example: Imported Style Sheets  This is the body of the document. *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 Classes Class 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: Imported Style Sheets  This is the body of the document.

You can also apply classes to inline elements using the tag: Imported Style Sheets  This is the body of the document. I can create different effects by using the span tag. In this case, only the information between the 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 tags and after the 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 tags. 9. The most recently imported style sheet takes precedence. The means that the imported style sheet (the one occurring closest to the 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.

HOMEWORK Read the following in your text: pg. 234-237: 8.1 - 8.1.2.1 pg. 238-239: 8.1.3 - 8.1.3.2 pg. 242-245: 8.1.7-8.2.2 pg. 254-261: 8.4 - 8.4.3.8 pg. 265 -298: 8.4.5 -8.4.11.6 (as time allows) and be prepared to create some styles tomorrow!

End of First Day Class will begin at 8:30 AM Tuesday, July 26

Day Two Morning Session CSS and An Introduction to the 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 heading A paragraph An image A list A table You are now going to create a an external style sheet to format your page and import it into your document. CSS, continued…

LESSON 6: Creating a CSS 1.Create an external style sheet which sets the following: a. sets the font for the entire document to a sans- serif font b. sets the color of the heading to dark blue, bolds it and sets the font size to 42px. c. sets the font size for the remainder of the document to 20px. d. creates a square for the unordered lists bullets e. creates a margin for the list to 25em. f. Save style sheet as style.css 2. Import this sheet into your document.

SAMPLE: 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. Importing into php document <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> My first Webpage  Melanie Bentley

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 College Motto Customized Rotating Photo Gallery Customized Side Menu Bar College Logo w/link back to College pages Customized top menu Easy to use News & Events area

Directory 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 Associated with 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 Folder The Images Folder The images folder should contain all images associated with your website. The Rotating_Images Folder The Rotating_Images Folder The rotating_images folder contains all photos that are placed in the header. Images in this folder should adhere to size restrictions being 214 pixels wide and 75 pixels tall.The rotating_images folder contains all photos that are placed in the header. Images in this folder should adhere to size restrictions being 214 pixels wide and 75 pixels tall. The Includes Folder The 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 PHP

The 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 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 File The default.php file contains the actual content of the first web page of your site.

Useful Code Email: <a href="http://web.eku.edu/contact /?c_email=melanie.bentley&title=Contact Melanie Bentley">Melanie Bentley <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Creating Your Web Site and an Introduction to the EKU Templates.

Similar presentations

Presentation on theme: "Creating Your Web Site and an Introduction to the EKU Templates."— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Creating Your Web Site and an Introduction to the EKU Templates.

Similar presentations

Presentation on theme: "Creating Your Web Site and an Introduction to the EKU Templates."— Presentation transcript:

Similar presentations

About project

Feedback