Survey
* Your assessment is very important for improving the work of artificial intelligence, which forms the content of this project
Download on basic web design
Document related concepts
Transcript
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, 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
and the > bracket.
The simplest tag would consist solely of the tag name, such as
<title> or <p>. More complicated tags will consist of the tag
name and one or more attributes which describe how the tag is
supposed to “act”, such as <body bgcolor=‘#FFFFFF’ >. This, for
instance tells the body tag that the background color should be
white* (*more information about colors will be discussed later).
Tag names and attributes are NOT case-sensitive in HTML,
however, in XHTML, case is important and tag names and
attributes are in lowercase. It is therefore good practice to use
lowercase tags and attributes.
File locations, name references and URL’s are case-sensitive.
Tag attributes should always occur after the tag name and
each attribute should be followed by a space, however, their
order of appearance is not important.
Some attributes have values associated with them and the
attribute name is separated from the value using an equal
(=) sign. Example: <table width=‘600px’ height=‘200px’>.
Tags can be nested, however, it is important to remember
that they must be nested properly.
Proper 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/>
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:
<!-- the comment appears here -->
Notice that there is a space after the initial <!-- and
preceding the final -->. 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:
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:
<!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.
2.
3.
4.
Create a folder on your w: drive called
workshop.
Open notepad and create an HTML document.
Add at least one heading tag and one
paragraph tag.
Name the document firstweb.php and save it to
the workshop folder on the W: drive.
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.
5. 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
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">
<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
1. The four tags required for all html documents are:
<html></html>, <head></head>, <title></title>, and
<body></body>.
2. Tag attributes serve to describe the features for the tag to
take on. They provide extra instructions for the tags.
3. The three types of tags are 1. tags that require subtags, ex.
<table></table>, <ol></ol>, <ul></ul>, <form></form>;
2. tags that require a start and an end tag, ex. <div></div>,
<p></p>, <h1></h1>, <a></a>. 3. tags that require no
end tag, ex. <br />, <hr />, <meta>
4. There are 215 web safe colors.
5. The hex codes produces the following: a. red, b. green, c.
blue.
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:
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 225230 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’
<tr>
<td>this is the
<td>this is the
<td>this is the
</tr>
cellpadding=‘0’ cellspacing=‘0’>
first cell (from the left) of the first row</td>
second cell (from the left) of the first row</td>
third cell (from the left) of the first row</td>
<tr>
<td>this is the first cell (from the left) of the second row</td>
<td>this is the second cell (from the left) of the second
row</td>
<td>this is the third cell (from the left) of the second
row</td>
</tr>
</table>
This code will produce a table with two rows and three
columns that looks like this:
this is the first
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.
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.
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">
<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:
1. Inline Styles
2. Document-Level (or embedded) Styles
3. 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.
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 <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.
Example:
<html>
<head>
<title>Imported Style Sheets</title>
<style type='text/css'>
<!-@import url(http://www.eku.edu/includes7/advanced.css);
-->
</style>
</head>
<body>
This is the body of the document.
</body>
</html>
*Note: notice the <!-- preceding and 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:
<html>
<head>
<title>Imported Style Sheets</title>
<style type='text/css'>
<!-@import url(http://www.eku.edu/includes7/advanced.css);
-->
</style>
</head>
<body class=‘blue’>
This is the body of the document.
</body>
</html>
You can also apply classes to inline elements using the
<span></span> tag:
<html>
<head>
<title>Imported Style Sheets</title>
<style type='text/css'>
<!-@import url(http://www.eku.edu/includes7/advanced.css);
-->
</style>
</head>
<body>
<span class=‘blue’>This is the body of the document.</span> I can
create different effects by using the span tag.
</body>
</html>
In this case, only the information between the <span></span>
tags will have a blue background.
You should note the following when using Style Sheets:
1. You add the style tag with the type=‘text/css’ attribute
between the <head></head> tags and after the
<title></title> tags.
2. Each rule begins with the tag to which you wish the style to
apply which is called a selector.
3. All rules are enclosed between curly brackets ({}).
4. More than one style “rule” can be placed between curly
brackets, however, each must be separated using a semicolon (;).
5. Only one rule to a line. This helps in organization and
readability, but is not required.
6. When importing an external style sheet, use @import followed
by the absolute or relative path name of the style sheet. Also
add comment marks before and after the @import statement.
7. To achieve greater control over your styles, use class
selectors.
8.
To create inline styles on specific text using class
assignments, use the <span></span> tags.
9. The most recently imported style sheet takes
precedence. The means that the imported style sheet
(the one occurring closest to the <body> tag, takes
precedence over any previously imported style sheets,
document-level style sheets take precedence over
imported style sheets and inline styles take precedence
over them all.
10. When naming style sheets, give them an extension of
.css in order to easily recognize that it is a style sheet.
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
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.
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 sansserif 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">
<html>
<head>
<title>My first Webpage</title>
<style type='text/css'>
<!-@import url(http://www.people.eku.edu/bentleym/workshop1/style.css);
-->
</style>
</head>
<body bgcolor='#ffccff'>
<h1>Melanie Bentley</h1>
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
Customized
top menu
Easy to
use
News &
Events
area
Customized
Rotating
Photo
Gallery
The
College
Motto
Customized
Side
Menu Bar
College
Logo
w/link
back to
College
pages
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.
Files & Folders Associated
with 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.
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.
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.
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.
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</a>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
