ch 5 html and css web standards solutions a web standardistas’ approach

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

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.

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 6HTML and CSS Web Standards SolutionsA 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

<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.


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.


Links can be either External

<a href=“http://… Outside your site

Local <a href=“folder/file_name Within your site

Internal <a href=“#name Within 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.

root of website

folders

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 immediatelyAbsolute

Current folder ./ stay at this level Parent folder ../ move up one level

from where you currently areRelative

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 (http://www.plinko.net/404/) for some creative 404 pages.

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.

http://help.expedient.com/browsers/errors.shtml

List of page error codes:

http://www.w3.org/Protocols/rfc2616/rfc2616-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: http://jeffcroft.com/blog/2007/aug/09/myth-content-and-presentation-separation/

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 Drupalhttp://pdp.ulster.ac.uk

Source: Wikipedia

ch 5 html and css web standards solutions a web standardistas’ approach

Documents