ch 13 html and css web standards solutions a web standardistas’ approach
TRANSCRIPT
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
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” />
<!--[if lte IE 6]> /* target versions of IE less than or equal to version 6 */<link rel=“stylesheet” type=“text/css” href=“css/iehacks.css” /><![endif]--></head>
Targeting specific versions of Internet Explorer
<!--[if IE]> /* target versions of IE */<link rel=“stylesheet” type=“text/css” href=“css/iehacks.css” /><![endif] -->
<!--[if lt IE 6]> /* target versions of IE less than 6 */<link rel=“stylesheet” type=“text/css” href=“css/iehacks.css” /><![endif] -->
<!--[if gte IE 5.5000]> /* target versions of IE greater than or equal to 5.5 */
<link rel=“stylesheet” type=“text/css” href=“css/iehacks.css” /><![endif] -->
Targeting specific versions of Internet Explorer<link rel=“stylesheet” type=“text/css” href=“css/screen.css” /><!--[if lt IE 6]> /* target versions of IE less than 6 */<link rel=“stylesheet” type=“text/css” href=“css/iehacks.css” /><![endif] -->
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/