Portland Community College



General Notes on HTML, XHTML and CSS

HTML and XHTML differences: rules are followed more precisely in xhtml than in html. HTML is like slang and xhtml is like proper English.

Six Rules for xhtml

1. All XHTML Documents Must have a DOCTYPE declaration as the first Statement.

A Doctype declaration should appear in the first line to clarify which version of the markup

language you are using.

2. All XHTML Elements (Tags) names must be in lowercase (no UPPERCASE tags)

3. All XHTML Elements (Tags) must be closed (each tag must have a starting tag and an ending tag).

If you start with a tag, then at the end of that paragraph there should be a tag.

4. All empty tags like , and should contain a slash at the end.

5. All XHTML Elements (Tags) must be properly nested, such as when used in lists or inline style.

PCC NOT PCC

6. XHTML Attribute Names must be in lowercase and Attribute Values must be in quotes.

HTML 5.0 will introduce new tags & plug-ins to increase operability, for example, to handle Flash. It doesn’t replace xhtml. XHTML is the grammar standard.

All markup is plain text, but the html associates it.

UTF-8 for English or Roman characters

UTF-16 for Asian characters

DOCTYPE declaration is best if transitional. If you use strict the browser may not respond to the grammar rules. The browser only loads a few rules when it sees strict and can’t be flexible enough for possible syntax errors like it can in transitional.

The tag section contains the following tags: , , , ,

Should be different on each page of your website

Use something like listing the URL then the page title

URL | Home URL | About

tags which are data about data, such as, language, keywords (ignored by most search engines Google today), page description (also ignored by most search engines today), author, etc.

for linking CSS files to several pages

for embedded CSS (style is used for presentation vs. structure with xhtml)

for enclosing JavaScript to effect the page (javascript.js)

Colors – 16 million possible – 216 considered color safe, i.e., all browsers will render them pretty consistently.

20 tags to know – maybe the most important is the tag division. The use of the tag is called the box model.

ico graphics that appear in the address bar measure 16 x 16 pixels (favicon.ico is the file name used for them. Put at root level of your site.

All pages should have an heading and only one per page.

Dreamweaver codes neatly in code view it is very readable.

SEO - Search Engine Optimization needs your page to have some special content:

Google Analytics

Google site map

With proper SEO your page may read higher in search results

Spaces around tags: All , , , plus tags have space margins.

automatically indents

LINKS: PCC has over 200 pages in it’s website

Absolute: use the complete URL, e.g.,

Relative: used to link pages in your website. Paths are relative to the path from one page to another based on their locations in your website structure.

Index.html is the file name for your home page. There can be several index pages throughout your website in different folders.

Your site should have breadcrumbs that help visitors navigate and know where they are in your website. Use a tag to refresh the page to a new location if the link has changed.

Different browser display pages differently, but improvements have been made. Browser use: 1. Firefox, 2. Internet Explorer, 3. Google Chrome, 4. Safari, 5. Opera (very picky – used in cell phones)

CSS – is a way to look at design. Before CSS all style was done with html in the pages area, such as by using the tag (which is deprecated and shouldn’t be used.

W3 Schools have charts of deprecated tags – see class “Useful Tips”. You should avoid using tables as they may display differently Internet Explorer and Firefox. Most of these tags will probably not work in about 5 more years.

Style is managed with CSS to separate style from structure and content of pages.

Content is what you see in the browser window.

Structure is the html tags, tables, div tags. Div tags are used a lot and are related to the box model.

Don’t use tables for structure anymore. Tables are used for tabular data not images, etc.

Why CSS? It’s too hard to manage a large website without using CSS. Create basically a style template and link pages to the .css file, sort of like modular programming.

You have to think ahead with CSS in planning your website. Need to think out structure and style and know your names for s, classes, id’s, etc.

Three ways to deal with style in CSS: (The Good, the bad and the Ugly)

INLINE: (The Bad) not good because it still puts structure in the code. It uses the “style” attribute. Its use does override all other approaches to style.

Example: Sets the paragraphs text color to blue. It is better to use the

“class” attribute.

EMBEDDED ( Also called Internal) (The Ugly) – all style is in the page. Uses the tag in the section. Only slightly better than the inline approach, but it is still not easy to edit the site.

Example: Sets the paragraph’s text color to blue.

p {

color: blue;

}

LINKED (Also called External ) (The Good) Uses a tag in the section to link the page to an external .css file. You should give the .css file a logical name. Using this approach, you only need one .css page to do all your style for all the website pages.

Example:

Links page to a CSS file called color.css.

CSS (the hard part) How is style coded? Uses selectors to describe style placement and defines style RULES for the entire page.

CSS SELECTORS

TAG (type) selectors – uses the same names as html tags, e.g., p, h1, body, and so on.

Enclose the properties (attributes) in curly tags

Example: body { background-color:blue; } is equivalent to

html

css /* comment */

CSS properties - You can’t link fonts to page – the font has to be on the viewer’s machine or used as an image file.

Font sizes use small, medium, large or use em units – you can use pt (point) and px (pixel) settings, but they may override the browser’s default settings.

Use em for fonts – em units are the size of capital M in a particular font style or type – measured as a ratio

Example: 1 em = M , 2 em = M You can use fractions of em units, such as,

M

1.5em, 1.25m, .5em, .25em If you use em units set font size in body to 100%.

If you must have a custom size use pixels, px.

Ctrl + or Ctrl – zooms the page

Margins how much space a letter style needs.

TAGS are your rules!!!

CLASS Selectors are the exception to the rules (TAGS)

They override tag selectors – class beats tags

They must be associated in the html code tag(s).

Closer to the source code, but better than inline. Use class selector in CSS files as embedded style.

You can call the class selector any name you want, but it should make sense. For example, use a broad name based on its function in the page.

Classes always have a period in front in the CSS and don’t use html tags as names.

.whatever

.altp (alternate paragraph)

In the html code use class attribute with no period

ID Selectors – overrides all others.

Must be proceeded by a # sign – used for the

Divs are boxes or zones you only see the limits of if they have borders set (turned on).

Id is there names – they should be named by their function on the page.

Content determines height of div.

Width doesn’t increase and will wrap text. However, images will affect height and width of divs.

Position: relative vs. absolute

Layout:

Fixed width use % of page

Liquid varies with width of picture(s), etc.

Have to have a around everything if universal properties, for example, to center the page in the browser.

1024 x 1068

Make 940 auto sets center of page

How do you layout selectors? (Order in the CSS)

1. Tag selector first – use in page

body

h1

p

ul

2. ID selector next after in CSS

3. Class selector – they are rarely used

Page models

1. Box model (div)

2. Table model

3. No structure

Descendant order of selectors:

How does a browser determine which style to use?

The browsers set a value on each type of selector so some trump or override others.

Class 10 each

Tags 1 each

IDs 100 each

This is called browser weighting or specificity.

Html and css are presentational languages

Ideal is to code all CSS in a linked file. Linked tags are an empty tag

JavaScript allows you to do effects, such as, rollovers

Position set to auto causes the page to center in the browser window regardless of how you size it.

Div positions: Useful tips for tags

Static: is the default – doesn’t float well – better to use relative.

Relative: no worries – z-index property (third dimension) sets position like layers. Page lays out in order of html code. Z-index stacks in order of position in html – lowest z-value is on top. Relative cares about its neighbors – uses margins.

Fixed: stays on browser window – example Greg’s nav bar on his home page – not good for cell phones as it takes up space in small screen area.

Absolute: goes where you place it. Absolute doesn’t care about neighbors on the page.

Never use absolute for most websites because of “footer” problem.

Absolute divs – ignore each other so may cause footer problem:

OK if always the same: If content changes the size of the divs then get

overlay/underlay of divs

Use only for elements that will never change in height. Default width is 100%.

Set width for columns in pixels or use %

z-index doesn’t matter if not overlapping

position: absolute; top = how far down from top edge

top: 200px left = how far over from left edge

left: 600px

Relative cares about its neighbors – uses margins.

position: relative top = how far down from top edge

top: 200px left = how far over from left edge top margin

left: 600px left margin

Margins only work with relative - has to

recognize its neighbors.

Philosophy about classes and ids

IDs used for 4 things:

1. DIVs – 90% of the use of the id selector

IDs can only be used once each on a page, classes can be used more than once

Every should have an id name, then you can give it properties

IDs are used to target javaScript

2. Images - should have id as well to target with JavaScript

3. Forms (and form field)

4. – only if part of navigation bar – so only use once id = #navlist

see Used for navigation and can be targeted by JavaScript

css, html and JavaScript are local in the browser and need no

….. additional add-ins. Flash requires flash-player plugin – it is a

….. large file and loads slower. You can do a lot with just active

script. Scripting languages are more simplistic than programming languages.

Validation – somewhat useful – doesn’t work with JavaScript, so you may get errors saying page doesn’t validate. Use validation to test pages. Search engines may ignore your page if it has errors as they are looking for placement of code, etc.

Classes are used for exceptions to rules (tags). Name classes by overall function in page(s).

FLOAT – used in CSS

Left or right

Causes an object to be forced out of position

Alignment with tags flows in the html

If no width specified in then it goes all the way across the page.

Left margin: margins push away, but float moves it out of alignment or position from “centerwrap”.

Must use position with z-index.

Unknown- Float causes the object to be forced out of alignment with text and moves id?

Float can only be used with relative position div.

Float effect: It causes the element beside it to not recognize the div so it falls up, i.e., it rises on the page.

CLEAR: To cancel the float effect use the property called “clear”.

Clear values are clear: left, clear: right or clear:both

Clear left cancels float left effect, clear right cancels right float effect

“Footer effect” use clear both because usually the footer goes across the entire page, so will rise up if not cleared.

Use ICE or box layout – needs wrapper div used to control margins. Let’s layout our page first:

Name the divs and determine their widths and heights.

width = 900px for page

header

width = 900px, height=150px

middle

width=250px column right column

width= 230px width=400px

height= 400px height=500px

left column

float “nav”

10px gutters

footer

width=900px, height=150px

clear: both

Fonts: use quotes if there are spaces in the names and use capital letters as they are proper names of the font styles. Example:

“Times New Roman”, serif

Descendent selectors: used id instead of class selector (descendant selectors are inside of div)

Example:

Div #rightcol

Descendent #rightcol h2:

Margins:

1st margin is top & bottom, 2nd is left & right

margin: 10px effects all margins

margin: 0 auto 1st number effects top & bottom, 2nd number effects left & right

margin: 0 auto 20 auto 1st # is top, 2nd # is right, 3rd # is bottom, 4th # is left

Margins: top

Left right

bottom

Order of Selectors:

Tag selectors

Id selectors

Class selectors

Common elements:

navbar

footer

You can use for readymade CSS. Uses predefined and id names “navlist” and “navcontainer”.

Liquid layout is always left aligned by default

P tag font then use the id to overrule.

When you talk structure you talk divs.

#centerwrap { This div must have:

width

margin: 0 auto;

position: relative;

height: 100%; recommended height setting as content determines height – content pushes down

} (increases) height.

Always test effects of height and width

Relative positioning allows height and width to adjust

Div “locked” uses JavaScript – id recommended in this case as reference for JS. You can also use I-frames “locked”

Order of when using float in html:

Order is left, right, middle for your columns

Average browser setting is currently 1024 pixels width now. Later it will probably move to 1280 pixels width.

Left and right padding:

Left and right padding add to the total width of a , so you must subtract one or both from your total desired with if you use one or both.

Margins:

H, p, ul have top or bottom margins – recommend setting all margins to zero to avoid overlap problems.

Margin examples:

padding: 20px; means 20 pixels all around – top, bottom, left and right

padding: 0 20px; means zero padding top and bottom and 20pixels padding left and right

padding: 0 20px 0 20px; means zero pixels padding top, 20 pixels padding right, zero pixels padding bottom and 20 pixels padding left

Need to subtract left and right padding off of width.

Need to subtract top and bottom padding off of height (not as critical)

h2 padding and margins can overlap – use a descendent selector to correct:

Example: #rightcol h2 {

Margin-top: 0;

}

FLOAT: Margins and padding are additive so have to subtract from width and height. Middlecol needs left margin to push it to the center.

Set margins to zero for everything in the tag selectors

Set #centerwrap width in pixels not % so it will remain the same width even if you adjust the size of the browser window.

Width is critical for images, etc.

1. Captions for disabled when read by source reader

2. Google will punish you if you don’t use alt attribute for an image. It goes against your page ranking – SEO optimization

3. Alt allows about 1000 characters in the description

4. longdesc attribute = linked text file with longer description of the image (not recommended)

Make an empty link that will work use Home

Use classes for alternating images

.rightfloat

.leftfloat

BG images go in CSS – not recognized – only image tag seen as content

Use to hold images

Validation – Google likes it, but can throw you off with odd results.

Looks for only one h1, images must have alt attribute for SEO

Link JavaScript to page as separate .js file to reduce validation errors

Code view in Dreamweaver show errors

Metta tags not to relevant anymore for SEO

metta tag use: Keywords & description of page, etc. not read by search engines any more

ult-8 in metta tag indicates Roman character set

ult-16 in metta tag indicates Asian character set

SEO looks at inside table – uses h tag as outline – pulls content into a database – compares – ranks higher by being a properly ordered page – examines the amount of the same words on a page – if too many of the same words it lowers the ranking – it thinks you are spamming keywords

Alt attribute in all images is considered relevant. Hidden text is a No, No.

A significant factor in a high ranking is how many sites link to you and link back to you. You need traffic – have others look to you so have them on your homepage. Make use of your associates.

Press articles also on your home page help

Text file: robots.txt – no search request

Site map with xml file – Google site maps function – part of Google analytics – tracks hits – demographics – uses JavaScript script at bottom of the page - # visitors, # linked to you

Look at 211D past examples

img { border: 0; } use margins on images – padding is generally used inside of something or used in

Site map:

Shapes for maps

Rectangle = static page

Curved bottom = active or dynamic page – usually contains a form, etc – user interactive

User input is required as a dynamic page uses JavaScript, Flash or form. Multimedia objects, turn off and on sound, etc. are also dynamic.

U Frequently updated pages – indicate these when designing a site map for a client as they will

D have to go in and perhaps often manually update the page(s).

D

Illustrator for website images

Simple viewer gallery – check out dynamic site Macpherson pottery – 211D

Absolute positioning: exists in its own world – seen as a novelty – generally use relative positioning. Don’t use for images even if it seems to work – it will prove a problem.

Absolute positioning uses top left and top right

Don’t mix with relative - relative can only use relative.

You can change stacking order with z-index – the higher the z-index the higher in the stack, i.e., on top. If you don’t specify then z-index default is zero.

Absolute values can cause problems as page size/resolution changes

Always id images

Absolute inside a relative is a problem.

How to emphasize or recolor one word in a paragraph? Use span class.

Example: html

When in the course of ……

When in the course of ……

CSS

.whatever { color: blue; }

You can wrap this around several paragraphs as needed.

Tables and Forms

Web project link – check assignment page for chapters

Put CSS file in an assets folder – use CSS to style your web project – everything all div – no table structure

However, one page has to have a table in it

Background image in links for rollover effect – only use CSS for the effect and not JavaScript

Padding to the tag gives the look of a button(s)

list-style-type: none;

Navlist use listamatic site

IE 6, 7 and 8 has margin – problems with padding and margins

Listamatic

Links list

to use listamatic code # null link so link won’t go anywhere, but will act like a link

Active page is the page you are on

You can only use id once on a page – classcan be used many times – use ids for div nav

Ids for forms and images

CSS:

list-style-type: none;

display: inline;

or float left list item (avoid this)

3_D menu -

Breadcrumbs – look up process!!!

Use descendant #navlist li – only affects the list items – not all the page

Centering for pages in the browser – recommended width 900 to 950 pixels - 1280x1024

Firefox plug-ins make it slower – IE is fast

Chrome is sandboxed – separate from the OS so doesn’t pass on viruses

Norwegin Opera used on cell phones – xhtml strict

Safari used on Macs and I-phone

Png images a little larger than gif – has transparency and supports 16 million colors

TABLES

Tables should be used for tabular data

|Date |Topic |Action |

| | | |

| | | |

Also used to control form fields

Problem with tables is it is hard to control width and height even in html and css – tables don’t behave, but divs behave.

If you set a to 200 x 400 – the text will wrap but push height up of div – images push height and width

In a table one cell – text can push width of tablw changing content – if empty it can collapse in IE then may reconfigure

**DON’T USE TABLES FOR STRUCTURE IN WEB PAGES – Height and width don’t apply well and are hard to

control.

Basic table

 

 

 

 

Use a table inside a form

FORMS:

Server side scripts used with forms

.asp & .aspx – Microsoft

.cfm – cold fusion Adobe

.php – open source (widely used)

Callisthenic 8

Name attribute used instead of id for input

- used by some JavaScripts and server side scripts. To function need to send data to .php, .asp, .js or .cfm server side script.

- The .php takes data from form and organizes it then compares it in database.

- All forms must have id so JS can target and CCC can style.

Form tag must have 4 attributes in the page

.php is a script program

Script is an intermediary between you (client) and server back to you in html

Order forms server side script take data – checks data base – sends message that order is complete

Contact form takes the form information and composes an email and sends a massage with the data

To – your email

From – the form email

Subject email values

Body – contains other data

Send mail function – server has to be active

Action attribute is the name of the server side script file you will use – won’t function on personal computer – must upload

Id for use by JS and CSS

Name relates to function of server side script

Method – how script acts on data

Action – name of the script

You can use Paypal or Ebay for secure orders in your form

https on their server sends encryption and returns it to form

Get vs. Post

Get- Google uses it – takes whatever you write and puts it in the URL – WW3 recommends not using it – it could be a problem when listing your credit card number - Why use get – can copy the link to go to in a search engine – don’t use get for contact or order forms.

Post – does not put data from form in the URL.

Id first in tags

Table header is for accessibility – reads the heading of the

Use label tag – for accessibility must use it

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download