Date post: | 02-Jan-2016 |
Category: |
Documents |
Upload: | palmer-malone |
View: | 28 times |
Download: | 4 times |
Writing HTML and CSS From the Ground Up
Writing the HTML and CSS code for your website
Basics
2
Old School vs. New SchoolOld 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 messyNew 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 downloadSimple HTML content more “transparent” for text-
to-speech browsers, browsers with images turned off, old browsersNavigation is in lists, paragraphs within paragraph
tags, less code and fewer images in the HTMLHTML uncluttered by code formatting layout and
design 4
XhtmlXHTML 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 usedStricter rules
Use CSS to do the heavy lifting: format and presentation
HTML is content only, so requires fewer tags and attributes
5
HTML tagsTags 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 lowercaseSome 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, alignValidate 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 moreDOCTYPE 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 startXHTML is less forgiving than (but preferable to)
HTML“Transitional” is more forgiving than “strict” “Strict” gives you more control than “transitional” 9
CSSInternal 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 syntaxelement {
property-1: value;
property-2: value;
}
body {
background-color: #ded8cc;
font-family: verdana, helvetica, arial, sans-serif;
}
#wrapper {
width: 750px;
text-align: left;
}
These properties will be applied to everything within the “body” tags (which is all the content of your page)
These properties will be applied to any tag (usually a div tag) where id=“wrapper”
12
Previewing Your PageWebpage should have .htm or .html extensionCSS 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 BrowsersIE 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-contentWe’re going to start with internal CSS, to
keep everything in one documentEasy to split off to external CSS, which we’ll
do laterAdd 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 ContentBetween <body> tags, type this text:My headerHome | Programs | Registration | About Us |
Contact UsStaff My headlineMy contentCSU Home | Extension Home | Webmaster
17
Define the bodyIn CSS, between the style tagsApply only those elements that will be default
for all content of all pagesWill affect everything within body tags
(everything!)Font style, background color, “zero out” margins
and paddingbody {background-color: #ded8cc;font-family: verdana, arial, helvetica, sans-serif;margin: 0;padding: 0;
}
18
Define a heading Tagh1 {
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 pageGood strategy for one-use structural elements (header,
body, nav bar, footer)
20
Define Wrapper, Center WrapperCommon design strategy is to wrap your
content in one big boxUseful 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-6Setting 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
workaroundAdd 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” valuesPulls 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 CSSbackground-image: url(nav-1.jpg);
background-repeat: repeat-x;
Put nav-2 in the #footer CSSbackground-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 depricatedWe’ll learn how to do it via the CSS “float”
property later in the workshopVspace and hspace (set margin areas in
html for images) are depicated tooWe’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; }
\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)
Won’t work for NN 4 We’ll use this later
34
Margin Values margin: 10px; will put 10 pixel margin on
each sideCan specify different values for top, right,
bottom, leftLike 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 bottomFor 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 padding: 10px; will put 10 pixel of padding
on each sideCan specify different values for top, right,
bottom, leftLike 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 ShorthandCan 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 ValuesLike margins, borders can be done with same
value for all 4 sides, or just for specific sidesUnlike 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 MarginRemove lower
margin from #navRemove 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 LinksGood ideas to make navigation bars or
columns HTML listsThey are easier to manipulate that wayMore “transparent” HTML: since it is
literally a “list” of links, let the end user know that by making it an HTML list
42
Html ListsBegin 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
Notice the tags are nested together, opening in this order: <ul>,<li>,<a>
Closing in reverse order: </a>, </li>, </ul>
<ul>
<li><a href=“http://www.link1.com/”>link 1</a></li>
<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
Opening unordered list tag
Closing unordered list tag
44
Creating the ListCut the navbar text form the top horizontal
bar, and paste it between the “#left” div tagsAdd a couple more linksAdd anchor tags, list item tags, unordered list
tags
<ul> <li><a href=“#”>Home</a></li><li><a href=“#”>Programs </a></li><li><a href=“#”>Registration </a></li><li><a href=“#”>About Us </a></li><li><a href=“#”>Contact Us </a></li></ul>
45
Zeroing out Margins and PaddingIE 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 typesDefault is round bullet (disc)Other values for list-style-type
None, circle, disc, squareList-style-image: url(your_image.gif); will
allow you to use your own image for bulletFor ordered lists there are many more
options: upper-roman, lower-roman, upper-alpha, lower-alpha, even hebrew and armenian
List-style-position: inside; will put the bullets inside the whatever container encloses it in the code
47
New Css RuleIf 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
divLowers font size to 80% of defaultRaises height between lines by 150%Gives each list item a bottom 1 pixel solid
white borderSets the width of that border at 170 pixels
49
Adding Link BehaviorsSet 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 #leftSets 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 linksIn CSS, the #footer, we’ll make them
smaller, closer to the bottomline-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 LinksSet display from block to in-lineThis 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 Links0 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 IE6Notice the added space below the footer
60
Page in IE 5, IE5.5Notice the space below the footer and the
right margin
61
Fix for the footer Caused by the 45px line height in #footerSolved with overflow: hidden in #footerDoesn’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 marginUse the Box Model hack3 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 PropertyHTML-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, andAllow text and/or other content to wrap
around itThe “align” attribute is depricated,
meaning it isn’t supported by strict XHTMLThe CSS (and XHTML friendly) alternative is
the “float” property
66
The Float Property (con’t) float: left; 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 layoutclear: left, clear: right, or clear: both 67
Adding Float ID to Image in HTMLYou don’t have to surround a floated element
with div tagsYou 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 FormatsSet a class for left and right alignment of
imagesUse “.” instead of “#” in CSS, “class”
instead of “id” in HTMLUse 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 columnsOur current page has a hard-wired height of
400pxWon’t accommodate more content or end
users/browsers with larger default text sizeRe-design page so that:
Main column is position: relativeNeither column has a height propertyBoth columns are floated leftFloats are cleared in the footer
70
Floating the left column#left {
position: relative;
float: left;
width: 180px;
margin: 0 0 0 10px;
background-color: #dcedd1;
padding: 10px;
display: inline;
}
71
Added code (height property was 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
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;
}
72
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
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;
}
73
Added code
2 IE Bugs Using FloatsThe 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 ProblemIE6 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 wellNot 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” techniqueSame 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 #leftColumn is defined not by CSS, but by the
graphic (thus it is a “faux” cloumnWon’t work in IE5
76
Using Css Classes
77
Html vs. CssHtml 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 SelectorsUnlike 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
StylesYou can create CSS “on the fly” in your HTML
without bothering with your CSS Put your CSS within the style attribute within a
span tagThis 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 quotesMultiple properties and values can be used,
just separate with semi-colons<span style="color:#0000FF; font-style: bold;">bold
blue </span>81
External CSS
82
Internal vs. externalInternal 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 externalGet rid of comment code <!-- --> Change “style” to “link”Add an href attribute that points to your new
stylesheetCut out all of your CSS (including the closing tag!)
and put it in a new documentNew doc must have .css extensionShould be the name referred to in your href attribute
83
Internal CSS vs. External CSSInternal CSS line<style rel=“stylesheet” type=“text/css”>
External CSS line<link rel=“stylesheet” type=“text/css” href=“styles1.css”>
styles1.css is the name of your css document
Include the new <link… line of code in all your webpages
84
Site Structure and Directory Structure
85
Start With a Pencil and PaperFigure out a simple, logical and scalable
arrangement of files and foldersDesign with growth in mind
A web site is NOT a junk drawerThink of folders as individual drawers where similar
files goEach major page gets its own folder (About Us,
Contact Us may be exceptions)All images in one folderAll 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 StructureHome page (index.html)
4H page Family/consumer page Horticulture pageAgriculture page
About Us Contact Us
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
2nd level pages with little upkeep
2nd level pages requiring own folders
87
Sample Directory StructureIndex.html
4H folder
Family/consumer folder
4h.html
Horticulture folder
Agriculture folder
Abou.html
Cont.html
Images folder
4h_docs folder
agri_docs folder
fami_docs folder
hort_docs folder
agri.html
fami.html
hort.html
CSS folder
(contains all images)
(contains all stylesheets) 88
Sample Directory Structure
89
Other ResourcesW3 (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