Transcript Chapter 5
Ch 5 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach INCLUDING IMAGES INTRODUCING THE <IMG /> TAG Typical image formats used on the Web .jpg, .png, .gif <img /> 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: <p><img src=“your_file_name.jpg” alt=“screen_reader description”/></p> Provides a reference to where the image is stored in your filing system in relation to the HTML file it appears in. ADDING WIDTH, HEIGHT AND TITLE 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. WORKING WITH IMAGES 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 WORKING WITH IMAGES Size matters Pixels Bitmap Vector and scaling issues Ch 6 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach CREATING LINKS WITH ANCHORS ANCHORS - <A> 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 ANCHORS - <A> <a href=“place_to_link_to” title=“Additional description”>What will appear in the browser</a> 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. ANCHORS - <A> <a href=“place_to_link_to” title=“Additional description”>What will appear in the browser</a> 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. TYPES OF LINKS <a href=“place_to_link_to” title=“Additional description”>What will appear in the browser</a> Links can be either External <a href=“folder/file_name Within your site Internal Outside your site Local <a href=“http://… <a href=“#name Within your webpage CAUTION WITH ‘&’ AND ‘>’ & 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 VERSUS RELATIVE LINKS 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 ABSOLUTE VERSUS RELATIVE LINKS 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. LINKING BETWEEN FOLDERS root of website folders folders files / des106 images photo.jpg com149 css img css html site.css picture.png layout.css index.html LINKS IN ACTION Move relatively from ‘index.html’ to access the file ‘layout.css’ and include ‘picture.png’ ../../css/layout.css From ‘index.html’ access ‘photo.jpg’ ../../../des106/images/photo.jpg /des106/images/photo.jpg WHAT SYMBOL TO USE TO LOCATE A FOLDER ? Root Absolute Current folder Parent folder currently are Relative / top level immediately ./ ../ stay at this level move up one level from where you INDEX TO YOUR HTML 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 HOW TO AVOID PROBLEMS ERROR PAGE NUMBER RANGES http://help.expedient.com/browsers/errors.shtml 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 (http://www.plinko.net/404/) for some creative 404 pages. ERROR PAGE NUMBER RANGES http://help.expedient.com/browsers/errors.shtml 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. ERROR PAGE NUMBER RANGES List of page error codes: http://www.w3.org/Protocols/rfc2616/rfc2616 -sec10.html SEPARATION OF CONTENT AND PRESENTATION One of the hallmark attributes of web standardsbased 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: http://jeffcroft.com/blog/2007/aug/09/myth-content-and-presentation-separation/ WEB SAFE COLOURS (COLORS) STANDARD FONTS FOR BROWSERS SPELLING OF TAGS center color HTTP://WWW.W3SCHOOLS.COM/ CONTENT MANAGEMENT SYSTEMS (CMS) 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 http://pdp.ulster.ac.uk Source: Wikipedia