hlml, xhtml and css 4

8/14/2019 Hlml, Xhtml and Css 4

1/90

Writing HTML and CSS From the

Ground Up

Writing the HTML and CSS code for your website


2/90

Basics

2


3/90

Old School vs. New SchoolOld school: build site entirely in HTMLUse tables to build shelves to put content (headers,

navigation, images, footers)

Fixed width tables dont translate well to other platforms(PDAs, cellphones, widescreen monitors)

Lots of code, often messyNew school: build site in HTML and CSSHTML, 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


4/90

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 avariety 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 browsers

Navigation is in lists, paragraphs within paragraph tags, less codeand fewer images in the HTML

HTML uncluttered by code formatting layout and design

4


5/90

XhtmlXHTML is the new HTMLXHTML is the same as HTML, but stricter and

cleanerFully 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

presentationHTML is content only, so requires fewer tags

and attributes

5


6/90

HTML tagsTags are applied in pairs, an opening tag and a

closing tag. Everything between the opening andclosing tag is affected by the tag.

Everything between the opening and closing tag isaffected by the tag.

Some tags can have attributes added to them. The tag, for instance, inserts an image onto youpage. To define the image source, the size of theimage, the alt text of the image and so on, youneed to use add attributes to the tag:

6


7/90

XHTML In XHTML, the rules are stricter than in HTML:All tags must be closed, even tags that normally aren't

closed in HTML:
.WorkAround:
instead of
;

Must be closed in reverse order they appear (nesting)My headline

All letters must be lowercaseSome old HTML tags are deprecated, meaning they won't

work in XHTML: 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
http://www.doheth.co.uk/codelair/html-css/deprecatedhttp://www.doheth.co.uk/codelair/html-css/deprecatedhttp://validator.w3.org/http://validator.w3.org/http://www.doheth.co.uk/codelair/html-css/deprecatedhttp://www.doheth.co.uk/codelair/html-css/deprecated


8/90

8 tags all webpages need

Description, keywords, title, andCSS or link to external CSS go here.The title goes here.

All the content of your page goeshere.

8


9/90

2 more

DOCTYPE tag, to let the browser know what "rulebook"your page will follow:

You also need to append the tag so that it reads:

Get these from Dreamweaver, or www.w3.org, or fromthese 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


10/90

CSSInternal CSS start with this line:

Note the comment code:

External stylesheets use this line:


11/90

All The Tags You Need

-->

My website

All content goes here.

11


12/90

Css syntax

element {

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


13/90

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 browsersIE 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


14/90

Multiple IE BrowsersIE likes to write over previous versions of

itself, and will often not let you installearlier versions

http://tredosoft.com/Multiple_IE will installIE 3, 4, 5, 5.5 and 6 (or any combination ofthem) on your system

Install IE7 first, then run this

Doesnt play well with Vista

14
http://tredosoft.com/Multiple_IEhttp://tredosoft.com/Multiple_IE


15/90

Building A Page Layout

15


16/90

Starting Tags, Meta-contentWere going to start with internal CSS, to

keep everything in one document

Easy to split off to external CSS, which welldo later

Add some basic meta-content:All within head tagsDescription

Keyword

Title Title goes here

16


18/90


19/90

Define a heading Tagh1 {text-align: center;

color: #006633;

font-size: 1.5em;

}

Put headline between and tagsA block-level tag, so line breaks are

automatically applied before and after

Adding CSS to tags is a blunt instrumentapproach affects every instance of that tag

19


20/90

Div tagsYou can apply CSS between 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 aremanipulating

My header

Can only be used once per pageGood strategy for one-use structural elements (header,

body, nav bar, footer)

20


21/90

Define Wrapper, CenterWrapperCommon 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 just after

tag, close it just before closing body tag

21


22/90

Centering the Wrapper in IE5-6Setting margins to equal values will

center in most browsers, but NOT in IE 6or before.Add text-align: center; to body CSS for IE

workaroundAdd text-align: left to wrapper CSS to reset it

to left

22


23/90

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;


}

Add div tags with appropriate IDs aroundheader and navbar content

23


24/90

Reposition Text In NavbarAdd 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;


text-align: center;

line-height: 45px;

}

24


25/90

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


26/90

Result (Firefox, IE5, 5.5, 6, 7)

26


27/90


28/90

Two Ways To Add images

HTMLUse the image tag

Add attributes for source, width, height, and alt text

Note the self-closing tag CSSUse 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


29/90

Adding The Header, Nav AndFooter Images

Put the header image tag in the HTML betweenthe header s

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


30/90

Adding an Image To the MainColumn

The attribute align is depricatedWell learn how to do it via the CSS float

property later in the workshop

Vspace and hspace (set margin areas inhtml for images) are depicated tooWell add margins later in CSS

30


31/90


32/90

Margins, Padding and Borders

32


33/90

The box model

Margin is the areaoutside the box

Border is the line aroundthe box itself

Padding is the areabetween the box and thecontent of the box

In IE 5 and 6, width ofan element INCLUDES

border and padding (notthe margin)

All other browsers ADDmargin, border andpadding to width of

element 33


34/90

Working Around the WidthProperty 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 (elementwidth + padding + border)

w\idth sets IE 6 back to real width (element widthonly)Wont work for NN 4Well use this later

34


35/90


36/90

Padding Values padding: 10px; will put 10 pixel of padding

on each side

Can 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 usepadding-left, padding-right, padding-top, padding-

bottom

padding-left: 10px; will estabish 10 pixels of

padding only on the left side 36


37/90

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 onsides, none on top and bottom

37


38/90

Border ValuesLike 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 solidgray border around all sides

Border-left: 2px solid #cccccc; will put 2 pixelsolid gray border on left border only

38


39/90

Rework Padding and Margin

Remove lowermargin from #nav

Remove top, rightand bottom margin

form #leftRemove all but right

margin from #mainRemove top margin

from #footerAdd 10px padding to

#left and #mainAdd 3px left border

to #main 39


40/90

Result

40


41/90

Lists, Links and Navbars

41


42/90

Lists and Links

Good ideas to make navigation bars orcolumns HTML lists

They are easier to manipulate that way

More transparent HTML: since it isliterally a list of links, let the end userknow that by making it an HTML list

42


43/90

Html Lists

Begin list with or - ordered list numbered or lettered

(used less often) - bullet pointed (they can be removed,

or replaced with an image)End with or

Each list item is enclosed with and

Within the list tags, you need anchor tagsfor the link itself

43


44/90

Sample Html List Code

Notice the tags are nested together,

opening in this order: ,,Closing in reverse order: , ,

link 1

link 2

link 3

link 4

Opening list item

tagOpening anchor

tag and link

Link text Closing

anchor tag

Closing list

item tag

Opening unordered list tag

Closing unordered

list tag

44


45/90

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

Home

Programs

Registration

About Us

Contact Us

45 Zeroing out Margins and


46/90

Zeroing out Margins andPadding

IE automatically gives list elements amargin, Firefox automatically gives thempadding

Set both to 0 in the CSS for your sets

all browsers to the same value of 0 so youcan set those values on your own

46


47/90


48/90

New Css Rule

If you specify a CSS div ID, followed by an HTMLelement, it will only effect that HTML elementwithin that specific div

Why? Your manipulation of one list with CSS

wont affect other listsWith all that in mind.

#left ul {

list-style-type: none;

Margin: 0;

Padding: 0;}

48 M i l ti li t T t S i


49/90

Manipulating list Text, Spacingand 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 #leftdiv

Lowers 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


50/90

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 Ch i Di l F I Li t


51/90

Changing Display From In-Line toBlock

In-line elements (like ) only affect the textbetween them

Block level elements are larger typically insertline breaks before and after (

, )

In this case, it will fill out the background of theblock the text is within, rather than just thebackground 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


52/90

Result

Initial state

Rollover state (a:hover)

52


53/90

Footer links

In CSS, the #footer, well make them smaller,closer to the bottom

line-height: 65px;

font-size: .7em;

Put them in an in HTML, within the#footer div

CSU Home |

Extension Home |

Webmaster

53


54/90

Footer Links

Set display from block to in-lineThis turns the block level element list items 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 blocklevel element ()

Previously we applied a block display to an in-lineelement ()

54


55/90

Footer Links

0 out the margin and padding, set list style tonone

#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


56/90

Result

56


57/90

Generic Links

For links in the body of your page, you can simplydefine the selectors within the context of the#main div id

Good idea for links in the body of the page to beunderlined

#main a:link {


color: #000000;

font-weight: 500;

}

#main a:visited {


color: #cccccc;

font-weight: 500;

}

#main a:hover {

text-decoration: none;

color: #75a375;

font-weight: 500;

}

57


58/90

Cross Browser Design

58


59/90

Page in Firefox, IE7, Safari

59


60/90

Page in IE6

Notice the added space below the footer

60


61/90

Page in IE 5, IE5.5

Notice the space below the footer and theright margin

61


62/90

Fix for the footer

Caused by the 45px line height in #footerSolved with overflow: hidden in #footer

Doesnt allow overflow content to show

62


63/90

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 (elementwidth only)

63


64/90

Fix for the right margin

Use 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


65/90

Floating Images, Boxes AndColumns

65


66/90


67/90

The Float Property (cont)

float: left; moves an element to the left side ofthe containing block, float: right; moves it to theright

Can only float block-level elements (images,

paragraphs, lists, div tagged elements), not in-lineelements

Specify the width of the floated element (unlessits a image)

Floats wont 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 ofyour layout

clear: left, clear: right, or clear: both 67 Adding Float ID to Image in


68/90

Adding Float ID to Image inHTML

You dont have to surround a floated elementwith div tags

You can put the CSS ID directly into theelement tag

#lfloat {

float: left;

margin: 10px;

}

The id oflfloat in the image tag will floatthe image left, text will wrap around the float

68


69/90

Reusing Image Formats

Set a class for left and right alignment of imagesUse . 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

.lfloat {float: left;

margin: 10px;}

69


70/90

Floating columns

Our current page has a hard-wired height of400px

Wont accommodate more content or endusers/browsers with larger default text size

Re-design page so that:Main column is position: relativeNeither column has a height propertyBoth columns are floated leftFloats are cleared in the footer

70


71/90

Floating the left column#left {

position: relative;

float: left;

width: 180px;

margin: 0 0 0 10px;


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


72/90

Floating the main column#main {

position: relative;

float: left;

width: 327px;

margin: 0 10px 0 0;


border-left: 3px solid #ffffff;padding: 10px;

display: inline;

}

72

Addedcode(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


73/90

Clearing the floats#footer {

position: relative;

width: 750px;

margin: 0 10px 10px 10px;


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


74/90

2 IE Bugs Using Floats

The Double Margin ProblemFloating columns in IE6 and prior often

double the margin on the side it is beingfloated againstdisplay: inline; inside the floatedelement 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 sideof a left floated column)Float both columns, not just one

74 Extending the Left Column


75/90

gDown

Easy way:Make the background color of the wrapper the samecolor 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 onthe 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

Wont work in IE5

75


76/90

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 #left

Column is defined not by CSS, but by thegraphic (thus it is a faux cloumn

Wont work in IE5

76


77/90

Using Css Classes

77


78/90

Html vs. Css

Html uses , ,to change the appearance of specific bits oftext

CSS uses classes of properties so that the

same appearance (or set of properties) canquickly and easily be used over and overagain

These are in-line changes in the text, as

opposed to blockUnlike div IDs, these can be used multiple

times in the same page

78


79/90


80/90

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 March22nd to receive the professional discount

Use the position property.

Two word font styles need to be surrounded with quotes

80


81/90

Styles

You can create CSS on the fly in your HTML withoutbothering with your CSS

Put your CSS within the style attribute within a spantag

This word is blue

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, justseparate with semi-colons

bold blue

81


82/90

External CSS

82


83/90

Internal vs. external

Internal CSS (CSS inside your webpage) defeats one ofthe main purposes of CSS, which is having the samelook and layout for all your pages

To pull your CSS out of your webpage and make itexternal

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!) andput it in a new document

New doc must have .css extensionShould be the name referred to in your href attribute

83


84/90

Internal CSS vs. External CSS

Internal CSS line

External CSS line styles1.css is the name of your css

document

Include the new


85/90

yStructure

85


86/90

Start With a Pencil and PaperFigure out a simple, logical and scalable arrangement of

files and folders

Design with growth in mindA web site is NOT a junk drawerThink 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 arent 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


87/90

Sample Site Structure

Home 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 Structure


88/90

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


89/90

Sample Directory Structure

89


90/90

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_)
http://www.w3.org/http://www.alistapart.com/http://www.w3schools.com/http://www.csszengarden.com/http://www.ext.colostate.edu/template08_test_site/http://www.ext.colostate.edu/template08_test_site/http://www.csszengarden.com/http://www.w3schools.com/http://www.alistapart.com/http://www.w3.org/

hlml, xhtml and css 4

Documents