Creating Your Web Site

1
Creating Your Web Site

• and an
• Introduction to the
• EKU Templates

2
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 examplelttablegtlt/tablegt.
• 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.

3
Tags

• There are three types of tags
• Tags that require subtags. The lttablegtlt/tablegt
  and the ltolgtlt/olgt are examples. They require
  additional tags to describe the layout of the
  table.
• Tags which require a begin tag and an end tag.
  The ltdivgtlt/divgt and the lth1gtlt/h1gt are examples.
• Tags which require no ending tag. The ltbr /gt and
  the lthr /gt are examples.

4
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 lt bracket and the gt
bracket. The simplest tag would consist solely
of the tag name, such as lttitlegt or ltpgt. 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 ltbody
bgcolorFFFFFF gt. 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.
5
File locations, name references and URLs 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 lttable
width600px height200pxgt. Tags can be
nested, however, it is important to remember that
they must be nested properly.

• Proper Nesting
• ltbodygt
• ltpgtThis is a sample of proper nesting lt/pgt
• lt/bodygt

• Improper Nesting
• ltbodygt
• ltpgtThis is a sample of improper nesting
• lt/bodygt
• ltp/gt

6
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 lt!-- the comment
appears here --gt Notice that there is a space
after the initial lt!-- and preceding the final
--gt. Anything can be placed between these markup
elements, however, you can not nest comments!!
7
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

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.

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 lt!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http//www.w3.org/TR/html4/loos
e.dtd"gt
8
The HTML Skeleton

• All HTML and XHTML documents require the
  following elements, which create the document
  skeleton
• lthtmlgtlt/htmlgt tag
• ltheadgtlt/headgt tag
• lttitlegtlt/titlegt tag
• ltbodygtlt/bodygt tag

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

• So, the html skeleton looks like this
• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
  Transitional//EN "http//www.w3.org/TR/html4
• /loose.dtd"gt
• lthtmlgt
• ltheadgt
• lttitlegtInsert the title of your page in this
  spacelt/titlegt
• lt/headgt
• ltbodygt
• This is where the main body of text will
  occur within your document.
• lt/bodygt
• lt/htmlgt

10
LESSON 1Create 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/fir
  stweb.php to view your new web page.

11
SAMPLE Lesson 1
lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http//www.w3.org/TR/html4/loos
e.dtd"gt lthtmlgt ltheadgt lttitlegtMy first
Webpagelt/titlegt lt/headgt ltbodygt lth1gtMelanie
Bentleylt/h1gt ltpgt 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. lt/pgt lt/bodygt lt/htm
lgt
12
Commonly Used Tags
The following tags are the most commonly used

• ltpgtlt/pgt Paragraph tag. Defines the beginning
  and ending of paragraphs. Adds an extra line of
  vertical space after the lt/pgt tag.
• ltdivgtlt/divgt Division tags. Used at the beginning
  and ending of text where no extra line of
  vertical space is needed after the lt/divgt tag.
• ltbr /gt Break tag. Simply acts as one carriage
  return.
• ltpregtlt/pregt Preformatted Text tag. Will allow
  text to appear EXACTLY as it is typed in to the
  document with returns and spaces.
• lth1gtlt/h1gt 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.
• lthr /gt Horizontal Rule tag. Places a line
  across the display in order to delineate text.

13

• ltagtlt/agt 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.
• ltimg srcgt Image tag. Defines an image and its
  source.
• ltolgtlt/olgt and ltulgtlt/ulgt List tags. Defines an
  ordered or an unordered list. Must contain the
  ltligtlt/ligt sub tag to define the list items.
• lttablegtlt/tablegt Table tag. Used to define the
  beginning and the ending of a table. Must
  contain the lttrgtlt/trgt sub tag to define the table
  rows and the lttdgtlt/tdgt subtag to define the table
  cells.
• ltformgtlt/formgt Form tag. Used to define a form
  within the document. Must contain sub tags to
  define the parts of the form.

14
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. ltbody bgcolorffffffgtlt/b
odygt
Attribute that describes the background color
for the body of the document.
15
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.

16
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.wi
red.com/webmonkey/reference/color_codes/
17
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.
18

1. 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
RGB Color Code Red Shade Green Shade Blue Shade Resultant Color
FFFFFF FF 255 FF 255 FF 255 White
FF0000 FF 255 00 0 00 0 Red
00FF00 00 0 FF 255 00 0 Green
0000FF 00 0 00 0 FF 255 Blue
000000 00 0 00 0 00 0 Black
19
If you wish to understand the mathematics of
hexadecimal code, I will refer you to the
following website http//www.kencole.org/et2ass
gn6.html You can also find another color chart
at http//www.kencole.org/mhsncolor.html For
our purposes, you need only remember the basics.
20
LESSON 2Add 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?)

21
SAMPLE Lesson 2
lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http//www.w3.org/TR/html4/loos
e.dtd"gt lthtmlgt ltheadgt lttitlegtMy first
Webpagelt/titlegt lt/headgt ltbody bgcolor"ffccff"gt
lth1gtMelanie Bentleylt/h1gt ltpgt 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.ltbr /gt This is my
second paragraph and by using the ltbrgt tag,
you can accomplish this task. You can also use
the ltdivgt tag. Now, another thing to think
about..how do you suppose that I created the
ltnbspgt signs so that they were not read
as a tag in the coding?? lt/pgt lt/bodygt lt/htmlgt
22
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?

23
QUIZ ANSWERS

• The four tags required for all html documents
  are lthtmlgtlt/htmlgt, ltheadgtlt/headgt,
  lttitlegtlt/titlegt, and ltbodygtlt/bodygt.
• 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. lttablegtlt/tablegt, ltolgtlt/olgt,
  ltulgtlt/ulgt, ltformgtlt/formgt 2. tags that require a
  start and an end tag, ex. ltdivgtlt/divgt, ltpgtlt/pgt,
  lth1gtlt/h1gt, ltagtlt/agt. 3. tags that require no end
  tag, ex. ltbr /gt, lthr /gt, ltmetagt
• 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.

24
LUNCH BREAK

• Afternoon Session begins
• At 100p.m.

25
Images, Lists, and Tables

• And an
• Introduction to
• Cascading Style Sheets (CSS)

26
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.
27
Guidelines for Scanning Images

• Computer screens can only display 72 dpi. When
  scanning images, you shouldnt 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.

28
The ltimggt tag
The ltimggt 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.
29
The syntax for using the ltimggt tag is as
follows ltimg srchttp//people.eku.edu/bentleym
/images/pic.jpggt The above is an example of an
absolute path. What would happen to this path if
you moved your website to a different
server? ltimg srcimages/pic.jpggt 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. ltimg srcimages/pic.jpg
altThis is a picture of a doggt
30
LESSON 3Add 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-1265.2.6
  5.2.6.1 and pg. 137 5.2.6.10).
• 2. Add an alt attribute to describe your
  picture.

31
SAMPLE Lesson 3
lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http//www.w3.org/TR/html4/loos
e.dtd"gt lthtmlgt ltheadgt lttitlegtMy first
Webpagelt/titlegt lt/headgt ltbody bgcolor'ffccff'gt
lth1gtMelanie Bentleylt/h1gt ltpgt 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.ltbr /gt This is my
second paragraph and by using the ltbrgt tag,
you can accomplish this task. You can also use
the ltdivgt tag. Now, another thing to think
about..how do you suppose that I created the
ltnbspgt signs so that they were not read
as a tag in the coding?? lt/pgt ltimg
src'./beta/images/cas_logo184_D4D0C8.gif'
width'200px' height'124px' alt'CAS
Logo'gt lt/bodygt lt/htmlgt
32
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.
33
Ordered Lists
Ordered lists are a way of organizing information
where the sequence is important. ltol type1gt
ltligt the first item in your list goes
herelt/ligt ltligt the second item in your list
goes herelt/ligt lt/olgt 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.
34
You can also create continued lists using the
start attribute. This will allow you to change
the beginning value of the list. ltol start 5gt
ltligtList item fivelt/ligt ltligtList item
sixlt/ligt lt/olgt Will render the following
text 5. List item five 6. List item six What
text will the following render? ltol typeA
start10gt ltligtLimeslt/ligt
ltligtOrangeslt/ligt lt/olgt
35
Unordered Lists
Unordered lists are collection of related items
that have no special order or sequence. ltulgt
ltligtan item in the listlt/ligt ltligtanother item
in the listlt/ligt lt/ulgt will render the following
text ?An item in the list ?Another item in the
list
36
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.
37
LESSON 4Adding 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)

38
SAMPLE Lesson 4
lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http//www.w3.org/TR/html4/loos
e.dtd"gt lthtmlgt ltheadgt lttitlegtMy first
Webpagelt/titlegt lt/headgt ltbody bgcolor'ffccff'gt
lth1gtMelanie Bentleylt/h1gt ltpgt 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.ltbr /gt This is my
second paragraph and by using the ltbrgt tag,
you can accomplish this task. You can also use
the ltdivgt tag. Now, another thing to think
about..how do you suppose that I created the
ltnbspgt signs so that they were not read
as a tag in the coding?? lt/pgt ltimg
src'./beta/images/cas_logo184_D4D0C8.gif'
width'200px' height'124px' alt'CAS Logo'gtltbr
/gt ltol type'I'gt ltligtMeatslt/ligt ltligtVegetableslt/l
igt ltligtFruitslt/ligt ltulgt ltligtwatermelonlt/ligt
ltligtgrapefruitlt/ligt ltligtpeacheslt/ligt lt/ulgt
ltligtBreadslt/ligt ltligtDairylt/ligt lt/olgt lt/bodygt lt/h
tmlgt
39
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.
40
The HTML code for the standard table looks like
this lttable border1 cellpadding0
cellspacing0gt lttrgt lttdgtthis is the first
cell (from the left) of the first rowlt/tdgt
lttdgtthis is the second cell (from the left) of
the first rowlt/tdgt lttdgtthis is the third cell
(from the left) of the first rowlt/tdgt lt/trgt
lttrgt lttdgtthis is the first cell (from the
left) of the second rowlt/tdgt lttdgtthis is the
second cell (from the left) of the second
rowlt/tdgt lttdgtthis is the third cell
(from the left) of the second
rowlt/tdgt lt/trgt lt/tablegt
41
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.
42
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. lttable
border1 cellpadding0 cellspacing0gt
lttrgt lttdgt Cell 1lt/tdgt lttdgt Cell 2lt/tdgt
lttdgt Cell 3lt/tdgt lt/trgt lttrgt lttdgt Cell
4lt/tdgt lttdgt Cell 5lt/tdgt lttdgt Cell
6lt/tdgt lt/trgt lt/tablegt
43
Try adding attributes to the lttrgt and the lttdgt
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.
44
LESSON 5Add 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)

45
SAMPLE Lesson 5
lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http//www.w3.org/TR/html4/loos
e.dtd"gt lthtmlgt ltheadgt lttitlegtMy first
Webpagelt/titlegt lt/headgt ltbody bgcolor'ffccff'gt
lth1gtMelanie Bentleylt/h1gt lttable width'600px'
border'1px' cellpadding'1px' cellspacing'1px'gt
lttr bgcolor'ffffff'gt lttdgtthis is a data
celllt/tdgt lttdgtthis is another data
celllt/tdgt lt/trgt lttrgt lttdgtthis is yet another data
celllt/tdgt lttdgtltimg src'./beta/images/cas_logo184_
D4D0C8.gif'gtlt/tdgt lt/trgt lt/tablegt lt/bodygt lt/htmlgt
46
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

47
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
lth1 stylecolorblue font-styleitallic
margin-left4emgtMels Homepagelt/h1gt 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
ltbgtlt/bgt, ltfontgtlt/fontgt, etc. when possible.
48
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 ltheadgtlt/headgt tags and have their own
tag ltstylegtlt/stylegt. All rules are placed
between the ltstylegtlt/stylegt 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 ltstyle typetext/cssgtinsert style
rules herelt/stylegt 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.
49
Example lthtmlgt ltheadgt lttitlegtMy First Web
Page with Style Sheetslt/titlegt ltstyle
type'text/css'gt h1
colorCC0033 font-size42px
font-familyserif font-styleitalic
lt/stylegt lt/headgt ltbodygt lth1gtMy First
attempt at style sheetslt/h1gt lt/bodygt lt/htmlgt
50
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 _at_import command between the
ltheadgtlt/headgt and after the lttitlegtlt/titlegt tags
of your document. You must also use comment
marks before and after the _at_import command line.
51
Example lthtmlgt ltheadgt lttitlegtImported Style
Sheetslt/titlegt ltstyle type'text/css'gt
lt!-- _at_import url(http//www.eku.edu/includes7/
advanced.css) --gt lt/stylegt lt/headgt
ltbodygt This is the body of the document.
lt/bodygt lt/htmlgt Note notice the lt!-- preceding
and the --gt after the _at_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
_at_import statement so the browser doesnt display
them.
52
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-color0000ff Wh
ere b represents the tag to which the class is
being applied followed by a dot (.) and the name
of the class.
53
Within your web document, the code would
something like this lthtmlgt ltheadgt
lttitlegtImported Style Sheetslt/titlegt ltstyle
type'text/css'gt lt!-- _at_import
url(http//www.eku.edu/includes7/advanced.css)
--gt lt/stylegt lt/headgt ltbody classbluegt
This is the body of the document.
lt/bodygt lt/htmlgt
54
You can also apply classes to inline elements
using the ltspangtlt/spangt tag lthtmlgt ltheadgt
lttitlegtImported Style Sheetslt/titlegt ltstyle
type'text/css'gt lt!-- _at_import
url(http//www.eku.edu/includes7/advanced.css)
--gt lt/stylegt lt/headgt ltbodygt ltspan
classbluegtThis is the body of the
document.lt/spangt I can create different effects
by using the span tag. lt/bodygt lt/htmlgt In this
case, only the information between the
ltspangtlt/spangt tags will have a blue background.
55

• You should note the following when using Style
  Sheets
• You add the style tag with the typetext/css
  attribute between the ltheadgtlt/headgt tags and
  after the lttitlegtlt/titlegt tags.
• Each rule begins with the tag to which you wish
  the style to apply which is called a selector.
• All rules are enclosed between curly brackets
  ().
• More than one style rule can be placed between
  curly brackets, however, each must be separated
  using a semi-colon ().
• Only one rule to a line. This helps in
  organization and readability, but is not
  required.
• When importing an external style sheet, use
  _at_import followed by the absolute or relative path
  name of the style sheet. Also add comment marks
  before and after the _at_import statement.
• To achieve greater control over your styles, use
  class selectors.

56
8. To create inline styles on specific text using
class assignments, use the ltspangtlt/spangt tags. 9.
The most recently imported style sheet takes
precedence. The means that the imported style
sheet (the one occurring closest to the ltbodygt
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.
57
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!

58
End of First Day

• Class will begin at
• 830 AM
• Tuesday, July 26

59
Day TwoMorning Session

• CSS and An Introduction to
• the EKU Web Templates

60
CSS, continued
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.
61
LESSON 6Creating 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.

62
SAMPLE Lesson 6
/ CSS Document / body font-familyVerdana,
Arial, Helvetica, sans-serif font-size20px h
1 color330099 font-weightbold font-size42p
x ul list-style-typesquare ol margin-
left25em
63
SAMPLE Lesson 6, cont.Importing into php
document
lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http//www.w3.org/TR/html4/loos
e.dtd"gt lthtmlgt ltheadgt lttitlegtMy first
Webpagelt/titlegt ltstyle type'text/css'gt lt!-- _at_impo
rt url(http//www.people.eku.edu/bentleym/workshop
1/style.css) --gt lt/stylegt lt/headgt ltbody
bgcolor'ffccff'gt lth1gtMelanie Bentleylt/h1gt
64
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.
65
This is an example of the new Arts Sciences web
template design.
66
The following are features that you get with the
new template
The EKU Menu
Customized Rotating Photo Gallery
Customized top menu
The College Motto
Customized Side Menu Bar
Easy to use News Events area
College Logo w/link back to College pages
67
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.
68
Files Folders Associatedwith the Templates
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.
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.
69

• The Images Folder
• The images folder should contain all images
  associated with your website.
• 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 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.

70
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.
71
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.
72
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.
73
The template.php file is the file that contains
pertinent information and can be used to define
other pages.
74
A Word About PHP
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.
75
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.
76
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.
77
The default.php File
The default.php file contains the actual content
of the first web page of your site.
78
Useful Code
Emailnbspnbsplta href"http//web.eku.edu/cont
act /?c_emailmelanie.bentleytitleContact
Melanie Bentley"gtMelanie Bentleylt/agt lt!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http//www.w3.org/TR/html4/loos
e.dtd"gt