Ch 13 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.
-
Upload
janice-walsh -
Category
Documents
-
view
223 -
download
0
Transcript of Ch 13 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.
![Page 1: Ch 13 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.](https://reader034.fdocuments.in/reader034/viewer/2022050909/5697bffa1a28abf838cc0924/html5/thumbnails/1.jpg)
Ch 13HTML and CSS Web Standards SolutionsA Web Standardistas’ Approach
![Page 2: Ch 13 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.](https://reader034.fdocuments.in/reader034/viewer/2022050909/5697bffa1a28abf838cc0924/html5/thumbnails/2.jpg)
There are a number of key elements that can be found in most head sections of html pages.
![Page 3: Ch 13 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.](https://reader034.fdocuments.in/reader034/viewer/2022050909/5697bffa1a28abf838cc0924/html5/thumbnails/3.jpg)
metatitlelinkstylescript
![Page 4: Ch 13 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.](https://reader034.fdocuments.in/reader034/viewer/2022050909/5697bffa1a28abf838cc0924/html5/thumbnails/4.jpg)
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
![Page 5: Ch 13 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.](https://reader034.fdocuments.in/reader034/viewer/2022050909/5697bffa1a28abf838cc0924/html5/thumbnails/5.jpg)
Projects such as the Dublin Core MetaData Initiative http://www.dublincore.org/ are dedicated to creating standard conventions
![Page 6: Ch 13 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.](https://reader034.fdocuments.in/reader034/viewer/2022050909/5697bffa1a28abf838cc0924/html5/thumbnails/6.jpg)
There are four types of attributes to the meta element:
http-equivname
authorkeywordscopyrightRobots <meta name=“robots” content=“noindex,nofollow” />
contentscheme.
![Page 7: Ch 13 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.](https://reader034.fdocuments.in/reader034/viewer/2022050909/5697bffa1a28abf838cc0924/html5/thumbnails/7.jpg)
What happens if you don’t include the character set information for words like: Iñtërnâtiônàlizætiøn?
![Page 8: Ch 13 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.](https://reader034.fdocuments.in/reader034/viewer/2022050909/5697bffa1a28abf838cc0924/html5/thumbnails/8.jpg)
Separating the XHTML content from the CSS presentation can be fully and consistently exploited when external style sheets are used.Internal External
linked.css
![Page 9: Ch 13 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.](https://reader034.fdocuments.in/reader034/viewer/2022050909/5697bffa1a28abf838cc0924/html5/thumbnails/9.jpg)
Media types for style sheets
ScreenPrint
![Page 10: Ch 13 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.](https://reader034.fdocuments.in/reader034/viewer/2022050909/5697bffa1a28abf838cc0924/html5/thumbnails/10.jpg)
Screen
![Page 11: Ch 13 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.](https://reader034.fdocuments.in/reader034/viewer/2022050909/5697bffa1a28abf838cc0924/html5/thumbnails/11.jpg)
![Page 12: Ch 13 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.](https://reader034.fdocuments.in/reader034/viewer/2022050909/5697bffa1a28abf838cc0924/html5/thumbnails/12.jpg)
![Page 13: Ch 13 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.](https://reader034.fdocuments.in/reader034/viewer/2022050909/5697bffa1a28abf838cc0924/html5/thumbnails/13.jpg)
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>
![Page 14: Ch 13 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.](https://reader034.fdocuments.in/reader034/viewer/2022050909/5697bffa1a28abf838cc0924/html5/thumbnails/14.jpg)
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] -->
![Page 15: Ch 13 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.](https://reader034.fdocuments.in/reader034/viewer/2022050909/5697bffa1a28abf838cc0924/html5/thumbnails/15.jpg)
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);}
![Page 16: Ch 13 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.](https://reader034.fdocuments.in/reader034/viewer/2022050909/5697bffa1a28abf838cc0924/html5/thumbnails/16.jpg)
Manually checking compatibility with all browsers would be time consuming and difficult.
Source: http://browsershots.org/
![Page 17: Ch 13 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.](https://reader034.fdocuments.in/reader034/viewer/2022050909/5697bffa1a28abf838cc0924/html5/thumbnails/17.jpg)
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” />
![Page 18: Ch 13 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.](https://reader034.fdocuments.in/reader034/viewer/2022050909/5697bffa1a28abf838cc0924/html5/thumbnails/18.jpg)
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/