HLML, XHTML and CSS - Colorado State University Extension
advertisement
Writing HTML and CSS From the
Ground Up
Writing the HTML and CSS code for your website
Basics
2
Old School vs. New School
Old school: build site entirely in HTML
Use tables to build “shelves” to put content (headers, navigation,
images, footers)
Fixed width tables don’t translate well to other platforms
(PDAs, cellphones, widescreen monitors)
Lots of code, often messy
New school: build site in HTML and CSS
HTML, which is just bare-bones content.
CSS, which provides format and layout.
Code is clean and lean
Use tables only for tabular data (row/column format: names
and phone numbers, date and frequency)
3
Why?
Separates content from presentation - change the look of
entire site by changing one CSS file.
More flexibility and control over sites that will be seen on a
variety of browsers and platforms, including PDA's,
cellphones, wide-screen monitors and text-to-speech
monitors.
Faster download
Simple HTML content more “transparent” for text-to-speech
browsers, browsers with images turned off, old browsers
Navigation is in lists, paragraphs within paragraph tags, less
code and fewer images in the HTML
HTML uncluttered by code formatting layout and design
4
Xhtml
XHTML is the new HTML
XHTML is the same as HTML, but stricter and cleaner
Fully backwards compatible, but can also work with the coming
generation of platforms.
Fewer tags used, fewer attributes used
Stricter rules
Use CSS to do the heavy lifting: format and presentation
HTML is content only, so requires fewer tags and attributes
5
HTML tags
Tags are applied in pairs, an opening tag and a closing
tag. Everything between the opening and closing tag is
affected by the tag.
<h2>Everything between the opening and
closing tag is affected by the tag.</h2>
Some tags can have attributes added to them. The <img>
tag, for instance, inserts an image onto you page. To define
the image source, the size of the image, the alt text of the
image and so on, you need to use add attributes to the tag:
<img src="images/staff1.jpg" width="100px"
height="50px" border="1px" alt="Pueblo County
Extension staff">
6
XHTML
In XHTML, the rules are stricter than in HTML:
All tags must be closed, even tags that normally aren't closed in
HTML: <br> <img> <input>.
WorkAround: <br /> instead of <br>; <img src="pic1" />
Must be closed in reverse order they appear (nesting)
<body><h2>My headline</h2></body>
All letters must be lowercase
Some old HTML tags are deprecated, meaning they won't work in
XHTML: <center> <font> <strong>
Some attributes are deprecated as well: background, bgcolor, hspace,
vspace, align
Validate code at W3C (World Wide Web Consortium). Once
validated, they let you have this cool icon for your site:
7
8 tags all webpages need
<html>
<head> Description, keywords, title, and CSS – or link to
external CSS – go here.
<title>The title goes here.
</title>
</head>
<body>All the content of your page goes here.
</body>
</html>
8
2 more
DOCTYPE tag, to let the browser know what "rulebook" your
page will follow:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
You also need to append the <html> tag so that it reads:
<html xmlns="http://www.w3.org/1999/xhtml">
Get these from Dreamweaver, or www.w3.org, or from these
lessons
Cut and paste them into every new page you start
XHTML is less forgiving than (but preferable to) HTML
“Transitional” is more forgiving than “strict”
“Strict” gives you more control than “transitional”
9
CSS
Internal CSS start with this line:
<style rel="stylesheet" type="text/css"><!- and end with this line:
--></style>
Note the comment code: <!--comment-->
External stylesheets use this line:
<link rel="stylesheet" type="text/css" href=“my_styles.css" />
10
All The Tags You Need
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style rel="stylesheet" type="text/css"><!—
--></style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<meta name="description" content="this is my website" />
<meta name="keywords“ content="keyword one, keyword two“ />
<title>My website
</title>
</head>
<body>All content goes here.
</body>
</html>
11
Css syntax
element {
property-1: value;
property-2: value;
}
body {
background-color: #ded8cc;
font-family: verdana, helvetica, arial, sans-serif;
These properties will be applied
to everything within the “body”
tags (which is all the content of
your page)
}
#wrapper {
width: 750px;
text-align: left;
}
These properties will be applied
to any tag (usually a div tag)
where id=“wrapper”
12
Previewing Your Page
Webpage should have .htm or .html extension
CSS should have .css extension
In browser, go to File> Open File (Firefox) or File>
Open>Browse (IE)
Need to preview in several browsers
IE 7 (22% of market*)
Firefox 1&2 (37%*)
IE 6 (31%*) (tough browser!)
IE 5 (2%*)
Others (under 4% each*): Safari, Opera, NN 4, IE 4
*Numbers from W3 Schools – February 2008
13
Multiple IE Browsers
IE likes to write over previous versions of itself, and will
often not let you install earlier versions
http://tredosoft.com/Multiple_IE will install IE 3, 4, 5, 5.5
and 6 (or any combination of them) on your system
Install IE7 first, then run this
Doesn’t play well with Vista
14
Building A Page Layout
15
Starting Tags, Meta-content
We’re going to start with internal CSS, to keep everything in
one document
Easy to split off to external CSS, which we’ll do later
Add some basic meta-content:
All within head tags
Description <meta name="description"
content="this is my website" />
Keyword <meta name="keywords“
content="one, two“ />
Title <title>Title goes here</title>
16
Add Some Basic Content
Between <body> tags, type this text:
My header
Home | Programs | Registration | About Us | Contact Us
Staff
My headline
My content
CSU Home | Extension Home | Webmaster
17
Define the body
In CSS, between the style tags
Apply only those elements that will be default for all content
of all pages
Will affect everything within body tags (everything!)
Font style, background color, “zero out” margins and padding
body {
background-color: #ded8cc;
font-family: verdana, arial, helvetica, sansserif;
margin: 0;
padding: 0;
}
18
Define a heading Tag
h1
{
text-align: center;
color: #006633;
font-size: 1.5em;
}
Put headline between <h1> and </h1> tags
A block-level tag, so line breaks are automatically
applied before and after
Adding CSS to tags is a blunt instrument approach –
affects every instance of that tag
19
Div tags
You can apply CSS between <div> tags
Create an ID in CSS with # followed by ID
#header {
position: relative;
width: 750px;
height: 121px;
margin: 10px;
background-color: #dcedd1;
}
Then put div tags with IDs around that content you are manipulating
<div
id=“header”>My header</div>
Can only be used once per page
Good strategy for one-use structural elements (header, body, nav bar, footer)
20
Define Wrapper, Center Wrapper
Common design strategy is to wrap your content in one big
box
Useful for centering, background color, overall width
#wrapper {
position: relative;
width: 770px;
margin-left: auto;
margin-right: auto;
border: 1px solid #ffffff;
}
Put <div id=“wrapper”> just after <body> tag, close it just
before closing body tag
21
Centering the Wrapper in IE5-6
Setting margins to equal values will center in most
browsers, but NOT in IE 6 or before.
Add text-align: center; to body CSS for IE workaround
Add text-align: left to wrapper CSS to reset it to left
22
Define Header and Navbar
#header {
position: relative;
width: 750px;
height: 121px;
margin: 10px;
background-color: #dcedd1;
}
#top {
position: relative;
width: 750px;
height: 45px;
margin: 10px;
background-color: #dcedd1;
}
Add div tags with appropriate IDs around header and navbar
content <div
id=“top”></div>
23
Reposition Text In Navbar
Add these 2 line to center horizontally and vertically:
text-align: center;
line-height: 45px; (size of parent element)
#top {
position: relative;
width: 750px;
height: 45px;
margin: 10px;
background-color: #dcedd1;
text-align: center;
line-height: 45px;
}
24
Define Left And Main columns, Footer
#left {
position: relative;
width: 200px;
height: 400px;
margin: 10px;
background-color: #dcedd1;
}
#main {
position: absolute;
top: 186px;
left: 210px;
width: 540px;
height: 400px;
margin: 10px;
background-color: #dcedd1;
}
#footer {
position: relative;
width: 750px;
height: 45px;
margin: 10px;
background-color: #dcedd1;
text-align: center;
line-height: 45px;
}
Notice the #main ID is position: absolute, followed by “top” and
“left” values
Pulls it out of the flow of the HTML
Footer CSS is identical to Top CSS
25
Result (Firefox, IE5, 5.5, 6, 7)
26
Adding Images
27
Two Ways To Add images
HTML
Use the image tag <img>
Add attributes for source, width, height, and alt text
<img src=“images/header.jpg” width=“750px”
height=“121px” alt=“Colorado State University
Extension” />
Note the self-closing tag
CSS
Use background-image
#header
{
position: relative;
width: 750px;
height: 121px;
background-image: url(nav-1.jpg);
}
Background-position (left, right, top, bottom, center)
Background-repeat (repeat, repeat-x, repeat-y, no-repeat)
28
Adding The Header, Nav And Footer
Images
Put the header image tag in the HTML between the header
<div>s
<img src=“images/header.jpg” width=“750px”
height=“121px” alt=“Colorado State University
Extension” />
Put nav-1 in the #top CSS
background-image: url(nav-1.jpg);
background-repeat: repeat-x;
Put nav-2 in the #footer CSS
background-image: url(nav-2.jpg);
background-repeat: repeat-x;
29
Adding an Image To the Main Column
<img src="heron.jpg" width=“233px”
height=“252px” alt=“The Great Grey
Heron” align=“left” />
The attribute “align” is depricated
We’ll learn how to do it via the CSS “float” property later in the
workshop
Vspace and hspace (set margin areas in html for images) are
depicated too
We’ll add margins later in CSS
30
Result
31
Margins, Padding and Borders
32
The box model
Margin is the area outside the box
Border is the line around the box
itself
Padding is the area between the
box and the content of the box
In IE 5 and 6, width of an element
INCLUDES border and padding
(not the margin)
All other browsers ADD margin,
border and padding to width of
element
33
Working Around the Width Property
Difference
There is a “hack” for it:
div {
width: 100px;
}
div {
\width: 140px;
w\idth: 100px;
}
resets IE5, IE5.5, IE6 to new width (element width +
padding + border)
w\idth sets IE 6 back to real width (element width only)
Won’t work for NN 4
We’ll use this later
\width
34
Margin Values
will put 10 pixel margin on each side
Can specify different values for top, right, bottom, left
margin: 10px;
Like a clock: start at top, work your way around clockwise
margin: 0 10px 0 10px;
will put 10px margins on sides, none
on top and bottom
For a single margin value, you can use margin-left,
margin-right, margin-top, margin-bottom
margin-left: 10px;
will estabish a 10 pixel margin only on
the left side
35
Padding Values
will put 10 pixel of padding on each side
Can specify different values for top, right, bottom, left
padding: 10px;
Like a clock: start at top, work your way around clockwise
padding: 0 10px 0 10px;
will put 10px margins on sides,
none on top and bottom
For a single padding value, you can use padding-left,
padding-right, padding-top, padding-bottom
padding-left: 10px;
will estabish 10 pixels of padding only
on the left side
36
Two Value Shorthand
Can specify 2 values, 1st for top/bottom, 2nd for left/right
margin: 0 10px;
will put 10px margins on sides, none on top
and bottom
padding: 0 10px;
will put 10px of padding on sides, none on
top and bottom
37
Border Values
Like margins, borders can be done with same value for all 4
sides, or just for specific sides
Unlike margins, borders have more variables:
Size (e.g. – 2px)
Style (e.g. – solid, inset, outset, dashed)
Color (e.g. – blue, #cccccc)
border: 2px solid #cccccc; will put a 2 pixel solid gray
border around all sides
Border-left: 2px solid #cccccc; will put 2 pixel solid gray
border on left border only
38
Rework Padding and Margin
Remove lower margin from
#nav
Remove top, right and
bottom margin form #left
Remove all but right margin
from #main
Remove top margin from
#footer
Add 10px padding to #left
and #main
Add 3px left border to
#main
39
Result
40
Lists, Links and Navbars
41
Lists and Links
Good ideas to make navigation bars or columns HTML lists
They are easier to manipulate that way
More “transparent” HTML: since it is literally a “list” of links,
let the end user know that by making it an HTML list
42
Html Lists
Begin list with <ol> or <ul>
<ol> - ordered list – numbered or lettered (used less often)
<ul> - bullet pointed (they can be removed, or replaced with
an image)
End with </ol> or </ul>
Each list item is enclosed with <li> and </li>
Within the list tags, you need anchor tags for the link itself
43
Sample Html List Code
Opening unordered list tag
<ul>
<li><a href=“http://www.link1.com/”>link 1</a></li>
Closing unordered
list tag
<li><a href=“http://www.link2.com/”>link 2</a></li>
<li><a href=‘http://www.link3.com/”>link 3</a></li>
<li><a href=“http://www.link4.com/”>link 4</a></li>
</ul>
Opening list item
tag
Opening anchor
tag and link
Link text
Closing
anchor tag
Closing list
item tag
Notice the tags are nested together, opening in this order:
<ul>,<li>,<a>
Closing in reverse order: </a>, </li>, </ul>
44
Creating the List
Cut the navbar text form the top horizontal bar, and paste it
between the “#left” div tags
Add a couple more links
Add anchor tags, list item tags, unordered list tags
<ul>
<li><a
<li><a
<li><a
<li><a
<li><a
</ul>
href=“#”>Home</a></li>
href=“#”>Programs </a></li>
href=“#”>Registration </a></li>
href=“#”>About Us </a></li>
href=“#”>Contact Us </a></li>
45
Zeroing out Margins and Padding
IE automatically gives list elements a margin, Firefox
automatically gives them padding
Set both to 0 in the CSS for your <ul> sets all browsers to
the same value of 0 so you can set those values on your own
46
List style types
Default is round bullet (disc)
Other values for list-style-type
None, circle, disc, square
List-style-image:
url(your_image.gif); will
allow you to use your own image for bullet
For ordered lists there are many more options: upper-roman,
lower-roman, upper-alpha, lower-alpha, even
hebrew and armenian
will put the bullets
inside the whatever container encloses it in the code
List-style-position: inside;
47
New Css Rule
If you specify a CSS div ID, followed by an HTML element, it
will only effect that HTML element within that specific div
Why? Your manipulation of one list with CSS won’t affect
other lists
With all that in mind….
#left ul {
list-style-type: none;
Margin: 0;
Padding: 0;
}
48
Manipulating list Text, Spacing and
Borders
#left ul li {
font-size: .8em;
line-height: 1.5em;
border-bottom: 1px solid #ffffff;
width: 170px;
}
This affects only list items within the #left div
Lowers font size to 80% of default
Raises height between lines by 150%
Gives each list item a bottom 1 pixel solid white border
Sets the width of that border at 170 pixels
49
Adding Link Behaviors
Set the initial state: black, no underline
#left a:link, a:visited
color: #000000;
text-decoration: none;
}
{
Set the rollover state: white, underline, green background
color
#left a:hover {
color: #ffffff;
text-decoration: underline;
background-color: #75a375;
}
50
Changing Display From In-Line to Block
In-line elements (like <a>) only affect the text between
them
Block level elements are larger – typically insert line
breaks before and after (<p>, <h1>)
In this case, it will fill out the background of the block the
text is within, rather than just the background of the text
Applied to all states of a: tag within #left
Sets width to correspond to length of white border
bottom
#left a {
display: block;
width: 130px;
}
51
Result
Initial state
Rollover state (a:hover)
52
Footer links
In CSS, the #footer, we’ll make them smaller, closer to the
bottom
line-height: 65px;
font-size: .7em;
Put them in an <ul> in HTML, within the #footer div
<div id="footer">
<ul>
<li><a href="#">CSU Home </a></li> |
<li><a href="#">Extension Home </a></li> |
<li><a href="#">Webmaster</a></li>
</ul>
</div>
53
Footer Links
Set display from block to in-line
This turns the block level element list item’s line breaks off,
so you can see list elements on one line (the opposite of what
we did with the left nav bar)
#footer ul li {
display: inline;
}
Notice that this in-line display is applied to a block level
element (<li>)
Previously we applied a block display to an in-line element
(<a>)
54
Footer Links
0 out the margin and padding, set list style to none
#footer ul {
list-style-type: none;
margin: 0;
padding: 0;
}
Set initial state to black, no underline
#footer a:link, a:visited {
color: #000000;
text-decoration: none;
}
#footer a:hover {
color: #ffffff;
text-decoration: underline;
}
55
Result
56
Generic Links
For links in the body of your page, you can simply define the
selectors within the context of the #main div id
Good idea for links in the body of the page to be underlined
#main
a:link
{
text-decoration: underline;
color: #000000;
font-weight: 500;
}
#main
a:visited
{
text-decoration: underline;
color: #cccccc;
font-weight: 500;
}
#main
a:hover
{
text-decoration: none;
color: #75a375;
font-weight: 500;
}
57
Cross Browser Design
58
Page in Firefox, IE7, Safari
59
Page in IE6
Notice the added space below the footer
60
Page in IE 5, IE5.5
Notice the space below the footer and the right margin
61
Fix for the footer
Caused by the 45px line height in #footer
Solved with overflow: hidden in #footer
Doesn’t allow overflow content to show
62
Box model Hack review
div {
width: 100px;
}
div {
\width: 140px;
w\idth: 100px;
}
\width resets IE5, IE5.5, IE6 to new width (element
width + padding + border)
w\idth sets IE 6 back to real width (element width only)
63
Fix for the right margin
Use the Box Model hack
3 widths to work with:
#wrapper, #left, #main
#wrapper {
\width: 772px;
w\idth: 770px;
}
#left {
\width: 200px;
w\idth: 180px;
}
#main {
\width: 550px;
w\idth: 527px;
}
64
Floating Images, Boxes And Columns
65
The Float Property
HTML-only aligning of images uses the align=“left” or
align=“right” attribute in the image or table tag to:
Move the image either right or left, and
Allow text and/or other content to wrap around it
The “align” attribute is depricated, meaning it isn’t supported
by strict XHTML
The CSS (and XHTML friendly) alternative is the “float”
property
66
The Float Property (con’t)
moves an element to the left side of the
containing block, float: right; moves it to the right
Can only float block-level elements (images, paragraphs,
lists, div tagged elements), not in-line elements
Specify the width of the floated element (unless it’s a
image)
Floats won’t affect anything above them in the HTML, but
will wrap around anything below it (until it is cleared)
Clear the float in the next non-floated element of your
layout
float: left;
clear: left, clear: right, or clear: both
67
Adding Float ID to Image in HTML
You don’t have to surround a floated element with div tags
You can put the CSS ID directly into the element tag
<img src=“images/pic1” id=“lfloat”>
#lfloat {
float: left;
margin: 10px;
}
The id of “lfloat” in the image tag will float the image
left, text will wrap around the float
68
Reusing Image Formats
Set a class for left and right alignment of images
Use “.” instead of “#” in CSS, “class” instead of “id” in HTML
Use class=“lfloat” or class=“rfloat” in the HTML tag
whenever you insert a picture
<img src=“images/pic1” class=“lfloat”>
.lfloat {
float: left;
margin: 10px;
}
69
Floating columns
Our current page has a hard-wired height of 400px
Won’t accommodate more content or end users/browsers
with larger default text size
Re-design page so that:
Main column is position: relative
Neither column has a height property
Both columns are floated left
Floats are cleared in the footer
70
Floating the left column
#left
{
position: relative;
float: left;
width: 180px;
margin: 0 0 0 10px;
Added code (height
property was removed)
background-color: #dcedd1;
padding: 10px;
display: inline;
}
The display: inline;
code is to defeat the “double
margin” bug in IE, where a
floated element doubles the
margin it is floated against
71
Floating the main column
#main
{
position: relative;
float: left;
width: 327px;
margin: 0 10px 0 0;
background-color: #dcedd1;
border-left: 3px solid #ffffff;
padding: 10px;
display: inline;
}
Added code (position
property changed from absolute
to relative; height, top and
left properties were removed)
The display: inline;
code is to defeat the “double
margin” bug in IE, where a
floated element doubles the
margin it is floated against
72
Clearing the floats
#footer
{
position: relative;
width: 750px;
margin: 0 10px 10px 10px;
background-color: #dcedd1;
background-image: url(nav-2.jpg);
background-repeat: repeat-x;
height: 45px;
text-align: center;
line-height: 65px;
font-size: .7em;
overflow: hidden;
clear: both;
}
Added code
73
2 IE Bugs Using Floats
The Double Margin Problem
Floating columns in IE6 and prior often double the margin on
the side it is being floated against
display: inline; inside the floated element solves
the problem
The 3 Pixel Problem
IE6 and prior often put a 3 pixel margin on the far side of the
float (i.e. on the right side of a left floated column)
Float both columns, not just one
74
Extending the Left Column Down
Easy way:
Make the background color of the wrapper the same color as the column
(background-color: #dcedd1;)
Works well, but colors the margins as well
Not quite as easy way:
Build a CSS box containing #left and #main
Stretch a graphic down the box with 10px margins on the side, middle
750px the column background color
#midbox {
width: 770px;
background-image: url(bg-margins.gif);
background-repeat: repeat-y;
overflow: auto;
}
overflow: auto; allows the image to extend down in Firefox
Won’t work in IE5
75
Creating a Third Column
The “faux column” technique
Same technique as the margins, just swap out the graphic to
bg-2col.gif
#midbox {
width: 770px;
background-image: url(bg-2col.gif);
background-repeat: repeat-y;
overflow: auto;
}
Take background-color: #dcedd1; out of #left
Column is defined not by CSS, but by the graphic (thus it is a
“faux” cloumn
Won’t work in IE5
76
Using Css Classes
77
Html vs. Css
Html uses <b></b>, <i></i>,<em></em> to change
the appearance of specific bits of text
CSS uses classes of properties so that the same appearance
(or set of properties) can quickly and easily be used over and
over again
These are “in-line” changes in the text, as opposed to “block”
Unlike div IDs, these can be used multiple times in the same
page
78
Class Selectors
Unlike div IDs, which can only be used once, class slectors
can be used over and over again
Useful for manipulations you plan to use frequently (different
font for code, add italics and bold for emphasis)
79
Class Syntax
.strong
{
color: red;
font-weight: bold;
font-style: italic;
}
.code
{
font-family: "courier new", courier, monospace;
font-size: 95%;
}
Apply for the conference by <span class=“strong”>March
22nd</span> to receive the professional discount
Use the <span class=“code”>position</span> property.
Two word font styles need to be surrounded with quotes
80
Styles
You can create CSS “on the fly” in your HTML without
bothering with your CSS
Put your CSS within the style attribute within a span tag
This word is <span style="color:#0000FF;">blue</span>
Notice the syntax is the same as the syntax for CSS:
property: value;
For purposes of the HTML, put it inside quotes
Multiple properties and values can be used, just separate
with semi-colons
<span style="color:#0000FF; font-style: bold;">
blue </span>
bold
81
External CSS
82
Internal vs. external
Internal CSS (CSS inside your webpage) defeats one of the
main purposes of CSS, which is having the same look and
layout for all your pages
To pull your CSS out of your webpage and make it external
Get rid of comment code <!-- -->
Change “style” to “link”
Add an href attribute that points to your new stylesheet
Cut out all of your CSS (including the closing tag!) and put it in
a new document
New doc must have .css extension
Should be the name referred to in your href attribute
83
Internal CSS vs. External CSS
Internal CSS line
<style rel=“stylesheet” type=“text/css”>
External CSS line
<link rel=“stylesheet” type=“text/css”
href=“styles1.css”>
is the name of your css document
Include the new <link… line of code in all your webpages
styles1.css
84
Site Structure and Directory Structure
85
Start With a Pencil and Paper
Figure out a simple, logical and scalable arrangement of files and
folders
Design with growth in mind
A web site is NOT a junk drawer
Think of folders as individual drawers where similar files go
Each major page gets its own folder (About Us, Contact Us may
be exceptions)
All images in one folder
All documents in one folder (if there aren’t many)
All documents in each subject area in one folder (4h_docs)
All documents in each subject area broken down by year into
individual folders (4h_07_docs, 4h_08_docs)
86
Sample Site Structure
Home page (index.html)
About Us
Contact Us
2nd level pages with little upkeep
4H page
Agriculture page
Family/consumer page
Horticulture page
2nd level pages requiring own folders
Calendars,
documents and
links specific to
topic
Calendars,
documents and
links specific to
topic
Calendars,
documents and
links specific to
topic
Calendars,
documents and
links specific to
topic
87
Sample Directory Structure
Index.html
Abou.html
Cont.html
4H folder
4h_docs folder
4h.html
Agriculture folder
agri_docs folder
agri.html
Family/consumer folder
fami_docs folder
fami.html
Horticulture folder
hort_docs folder
hort.html
Images folder
(contains all images)
CSS folder
(contains all stylesheets)
88
Sample Directory Structure
89
Other Resources
W3 (http://www.w3.org/)
A List Apart (http://www.alistapart.com/)
W3 Schools (http://www.w3schools.com/)
CSS Zen Garden (http://www.csszengarden.com/)
Demo of new Extension website
(http://www.ext.colostate.edu/template08_test_site/)
90
