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.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.
Related searches
- why community college is bad
- why community college is better
- why community college is beneficial
- gadsden state community college application
- community college philosophy statement sample
- gadsden state community college anniston al
- gadsden state community college bookstore
- gadsden state community college employment
- gadsden state community college nursing
- community college philosophy statement
- why community college is good
- community college teaching statement