Ch 5 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach

 Typical image formats used on the Web .jpg,.png,.gif  in Action - <img src=“your_file_name.jpg” alt=“screen_reader description”/>  One of the few self closing tags - />  To validate an img tag is must be in a block-level element. This can be achieved for now using:  Provides a reference to where the image is stored in your filing system in relation to the HTML file it appears in.

 width and height attributes tell the browser what dimensions the image should be – typically in pixels.  The browser will reserve space for the image in the HTML.  The title attribute supplies further information about the image.  alt and title serve different purposes:  alt – for accessibility purposes  title – additional information  alt often appears as a tooltip, but this is only a bonus to all users, not its intended function.

 Creating images can be through:  Scanning an image  Taking a digital photograph  Editing images can be through the likes of Photoshop  Image optimization  Use standard format such as.jpg or.png  Compressing without loss of quality is always a trade-off  Use ‘Save for Web’ option were possible

 Size matters  Pixels and scaling issues  Bitmap  Vector

Ch 6 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach

 So far structured markup has allowed for the creation of a single valid Web page.  The Web is all about linking pages together.  What is an ‘Anchor’  It allows the tying together of pieces of information  Creating a relationship between items  Anchors can link pages within a website or link to other websites

What will appear in the browser  Typically the hypertext reference (web link) will appear with a blue colour and have an underline. This will change to purple when clicked to show the link has been visited.  Through the use of CSS you have complete control of the styling of the colour and decoration of the links.  Choose the link description carefully to aid accessibility.

What will appear in the browser  title attribute  It is to offer advisory information about the element  It appears as a Tooltip when the mouse cursor is held over the link.  Screen reader will also read out the text.

What will appear in the browser  Links can be either  External  <a href=“ your site  Local  <a href=“folder/file_nameWithin your site  Internal  <a href=“#nameWithin your webpage 

 & needs to be replaced with &  < needs to be replaced with < (less than symbol)  Target=“_blank” Sometime it is necessary to open a new window, but this is frowned upon by the W3C guidelines.

 Absolute  <a href=“server/folder/file”  It does not matter if the file is stored on a Windows or UNIX based platform ALL will accept “/”  What is “/” ?  Typically it is a divider between names on the path to your file, but it is also the way to anchor to the ‘root’ of the storage of the files.  Best used for linking to external site

 Relative  <a href=“../folder/file”  What is “../” ?  Typically it is a divider between names on the path to your file, but it is also the way to move up one directory in the tree and then it is possible to move down another branch.  Best used for linking to internal site pages  Whenever you want to take your site to another machine it preserves the relative interconnections.

/des106imagesphoto.jpgcsssite.csscom149imgpicture.pngcsslayout.csshtmlindex.html root of website folders files

 Move relatively from ‘index.html’ to access the file ‘layout.css’ and include ‘picture.png’  From ‘index.html’ access ‘photo.jpg’../../css/layout.css../../../des106/images/photo.jpg /des106/images/photo.jpg

 Root - /top level immediately Absolute  Current folder./stay at this level  Parent folder../move up one level from where you currently are Relative

 Web servers, Apache and IIS will automatically run the following for static content:  index.html  index.htm  default.html  default.htm  welcome.html  welcome.htm

Useful Tips

404 Not Found  The browser could not find the specific document that you requested on the host computer.  To resolve this error, check the Uniform Resource Locator (URL) syntax (some URLs are case sensitive). In addition, the page may have been removed, had its name changed, or have been moved to a new location.  To rise above the mundane, some have made 404 error pages a work of art – see 404 Research Lab ( for some creative 404 pages.

403 Forbidden/Access Denied  The Web site you requested requires special access permission (for example a password). 503 Service Unavailable  The host computer is too busy or the Web server which hosts the requested Web site is down.

List of page error codes: -sec10.html

 One of the hallmark attributes of web standards- based design is the concept that proper use of semantic (X)HTML and CSS completely abstracts the presentation of a site from its content.  One key real-world benefit of this separation is that come redesign time, one only needs to change or replace the CSS stylesheet, and needn’t lay so much as a finger upon the hallowed grounds we call markup. Source:

 center  color

 Used for storing, controlling, versioning, and publishing industry-specific documentation such as news articles, operators' manuals, technical manuals, sales guides, and marketing brochures. The content managed may include computer files, image media, audio files, video files, electronic documents, and Web content.  CMS made simple  Joomla  Drupal Source: Wikipedia