Ch 13 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.

Ch 13HTML and CSS Web Standards SolutionsA Web Standardistas’ Approach

There are a number of key elements that can be found in most head sections of html pages.

metatitlelinkstylescript

The use of <meta> tagsMetadata is data that describes other data

<meta name="description" content="King Kong is a fictional giant ape from the legendary Skull Island. A renowned ape thespian he is unquestionably a famous primate." /><meta name="author" content="Web Standardistas" />Choosing the right description meta data is important for search engines

Projects such as the Dublin Core MetaData Initiative http://www.dublincore.org/ are dedicated to creating standard conventions

There are four types of attributes to the meta element:

http-equivname

authorkeywordscopyrightRobots <meta name=“robots” content=“noindex,nofollow” />

contentscheme.

What happens if you don’t include the character set information for words like: Iñtërnâtiônàlizætiøn?

Separating the XHTML content from the CSS presentation can be fully and consistently exploited when external style sheets are used.Internal External

linked.css

Media types for style sheets

ScreenPrint

Screen

Print

Print

It is well documented how many browsers do not conform to the standards and certain versions of Internet Explorer require conditional comments that can be used to try and implement your CSS in a different way to get the same result on screen.

<head><link rel=“stylesheet” type=“text/css” href=“css/main.css” />

</head>

Targeting specific versions of Internet Explorer







Targeting specific versions of Internet Explorer<link rel=“stylesheet” type=“text/css” href=“css/screen.css” />

screen.css#header{

background-image: url(images/transparent_background.png);}iehacks.css#header /* IE 6 does not support transparency in png images */{

background-image: url(images/transparent_background.gif);}

Manually checking compatibility with all browsers would be time consuming and difficult.

Source: http://browsershots.org/

Adding a favourite icon to the address bar

Can be seen in:TabBookmarksHistoryToolbars

Only 16 x 16 pixels<link rel=“shortcut icon” type=“image/ico” href=“favicon.ico” />

There are a number of ways to create the 16 x 16 pixel image

Creating the image using Photoshop:http://www.photoshopsupport.com/tutorials/jennifer/favicon.html

http://www.thesitewizard.com/archive/favicon.shtml

http://favicon.com/

Ch 13 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.

Documents