A web standards checklist
The term web standards can mean different things to different people. For some, it is 'table-free sites', for others it is 'using valid code'. However, web standards are much broader than that. A site built to web standards should adhere to standards (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG etc) and pursue best practices (valid code, accessible code, semantically correct code, user-friendly URLs etc).
In other words, a site built to web standards should ideally be lean, clean, CSS-based, accessible, usable and search engine friendly.
About the checklist
This is not an uber-checklist. There are probably many items that could be added. More importantly, it should not be seen as a list of items that must be addressed on every site that you develop. It is simply a guide that can be used:
* to show the breadth of web standards
* as a handy tool for developers during the production phase of websites
* as an aid for developers who are interested in moving towards web standards
The checklist
1.Quality of code
1. Does the site use a correct Doctype?
2. Does the site use a Character set?
3. Does the site use Valid (X)HTML?
4. Does the site use Valid CSS?
5. Does the site use any CSS hacks?
6. Does the site use unnecessary classes or ids?
7. Is the code well structured?
8. Does the site have any broken links?
9. How does the site perform in terms of speed/page size?
10. Does the site have JavaScript errors?
2. Degree of separation between content and presentation
1. Does the site use CSS for all presentation aspects (fonts, colour, padding, borders etc)?
2. Are all decorative images in the CSS, or do they appear in the (X)HTML?
3. Accessibility for users
1. Are "alt" attributes used for all descriptive images?
2. Does the site use relative units rather than absolute units for text size?
3. Do any aspects of the layout break if font size is increased?
4. Does the site use visible skip menus?
5. Does the site use accessible forms?
6. Does the site use accessible tables?
7. Is there sufficient colour brightness/contrasts?
8. Is colour alone used for critical information?
9. Is there delayed responsiveness for dropdown menus (for users with reduced motor skills)?
10. Are all links descriptive (for blind users)?
4. Accessibility for devices
1. Does the site work acceptably across modern and older browsers?
2. Is the content accessible with CSS switched off or not supported?
3. Is the content accessible with images switched off or not supported?
4. Does the site work in text browsers such as Lynx?
5. Does the site work well when printed?
6. Does the site work well in Hand Held devices?
7. Does the site include detailed metadata?
8. Does the site work well in a range of browser window sizes?
5. Basic Usability
1. Is there a clear visual hierarchy?
2. Are heading levels easy to distinguish?
3. Does the site have easy to understand navigation?
4. Does the site use consistent navigation?
5. Are links underlined?
6. Does the site use consistent and appropriate language?
7. Do you have a sitemap page and contact page? Are they easy to find?
8. For large sites, is there a search tool?
9. Is there a link to the home page on every page in the site?
10. Are visited links clearly defined with a unique colour?
6. Site management
1. Does the site have a meaningful and helpful 404 error page that works from any depth in the site?
2. Does the site use friendly URLs?
3. Do your URLs work without "www"?
4. Does the site have a favicon?
1. Quality of code
1.1 Does the site use a correct Doctype?
A doctype (short for 'document type declaration') informs the validator which version of (X)HTML you're using, and must appear at the very top of every web page. Doctypes are a key component of compliant web pages: your markup and CSS won't validate without them.
CODE
http://www.alistapart.com/articles/doctype/
More:
CODE
http://www.w3.org/QA/2002/04/valid-dtd-list.html
CODE
http://css.maxdesign.com.au/listamatic/about-boxmodel.htm
CODE
http://gutfeldt.ch/matthias/articles/doctypeswitch.html
1.2 Does the site use a Character set?
If a user agent (eg. a browser) is unable to detect the character encoding used in a Web document, the user may be presented with unreadable text. This information is particularly important for those maintaining and extending a multilingual site, but declaring the character encoding of the document is important for anyone producing XHTML/HTML or CSS.
CODE
http://www.w3.org/International/tutorials/tutorial-char-enc/
More:
CODE
http://www.w3.org/International/O-charset.html
1.3 Does the site use Valid (X)HTML?
Valid code will render faster than code with errors. Valid code will render better than invalid code. Browsers are becoming more standards compliant, and it is becoming increasingly necessary to write valid and standards compliant HTML.
CODE
http://www.maxdesign.com.au/presentation/sit2003/06.htm
More:
CODE
http://validator.w3.org/
1.4 Does the site use Valid CSS?
You need to make sure that there aren't any errors in either your HTML or your CSS, since mistakes in either place can result in botched document appearance.
CODE
http://www.meyerweb.com/eric/articles/webrev/199904.html
More:
CODE
http://jigsaw.w3.org/css-validator/
1.5 Does the site use any CSS hacks?
Basically, hacks come down to personal choice, the amount of knowledge you have of workarounds, the specific design you are trying to achieve.
CODE
http://www.mail-archive.com/wsg@webstandardsgroup.org/msg05823.html
More:
CODE
http://css-discuss.incutio.com/?page=CssHack
CODE
http://css-discuss.incutio.com/?page=ToHackOrNotToHack
CODE
http://centricle.com/ref/css/filters/
1.6 Does the site use unnecessary classes or ids?
I've noticed that developers learning new skills often end up with good CSS but poor XHTML. Specifically, the HTML code tends to be full of unnecessary divs and ids. This results in fairly meaningless HTML and bloated style sheets.
CODE
http://www.clagnut.com/blog/228/
1.7 Is the code well structured?
Semantically correct markup uses html elements for their given purpose. Well structured HTML has semantic meaning for a wide range of user agents (browsers without style sheets, text browsers, PDAs, search engines etc.)
CODE
http://www.maxdesign.com.au/presentation/benefits/index04.htm
More:
CODE
http://www.w3.org/2003/12/semantic-extractor.html
1.8 Does the site have any broken links?
Broken links can frustrate users and potentially drive customers away. Broken links can also keep search engines from properly indexing your site.
More:
CODE
http://validator.w3.org/checklink
1.9 How does the site perform in terms of speed/page size?
Don't make me wait... That's the message users give us in survey after survey. Even broadband users can suffer the slow-loading blues.
CODE
http://www.websiteoptimization.com/speed/
1.10 Does the site have JavaScript errors?
Internet Explore for Windows allows you to turn on a debugger that will pop up a new window and let you know there are javascript errors on your site. This is available under 'Internet Options' on the Advanced tab. Uncheck 'Disable script debugging'.
2. Degree of separation between content and presentation
2.1 Does the site use CSS for all presentation aspects (fonts, colour, padding, borders etc)?
Use style sheets to control layout and presentation.
CODE
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-style-sheets
2.2 Are all decorative images in the CSS, or do they appear in the (X)HTML?
The aim for web developers is to remove all presentation from the html code, leaving it clean and semantically correct.
CODE
http://www.maxdesign.com.au/presentation/benefits/index07.htm
3. Accessibility for users
3.1 Are "alt" attributes used for all descriptive images?
Provide a text equivalent for every non-text element
CODE
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-text-equivalent
3.2 Does the site use relative units rather than absolute units for text size?
Use relative rather than absolute units in markup language attribute values and style sheet property values'.
CODE
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-relative-units
More:
CODE
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-relative-units
CODE
http://www.clagnut.com/blog/348/
3.3 Do any aspects of the layout break if font size is increased?
Try this simple test. Look at your website in a browser that supports easy incrementation of font size. Now increase your browser's font size. And again. And again... Look at your site. Does the page layout still hold together? It is dangerous for developers to assume that everyone browses using default font sizes.
3.4 Does the site use visible skip menus?
A method shall be provided that permits users to skip repetitive navigation links.
CODE
http://www.section508.gov/index.cfm?FuseAction=Content&ID=12
Group related links, identify the group (for user agents), and, until user agents do so, provide a way to bypass the group.
CODE
http://www.w3.org/TR/WCAG10-TECHS/#tech-group-links
...blind visitors are not the only ones inconvenienced by too many links in a navigation area. Recall that a mobility-impaired person with poor adaptive technology might be stuck tabbing through that morass.
CODE
http://joeclark.org/book/sashay/serialization/Chapter08.html#h4-2020
More:
CODE
http://www.niehs.nih.gov/websmith/508/o.htm
3.5 Does the site use accessible forms?
Forms aren't the easiest of things to use for people with disabilities. Navigating around a page with written content is one thing, hopping between form fields and inputting information is another.
CODE
http://www.htmldog.com/guides/htmladvanced/forms/
More:
CODE
http://www.webstandards.org/learn/tutorials/accessible-forms/01-accessible-forms.html
CODE
http://www.accessify.com/tools-and-wizards/accessible-form-builder.asp
CODE
http://accessify.com/tutorials/better-accessible-forms.asp
3.6 Does the site use accessible tables?
For data tables, identify row and column headers... For data tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells.
CODE
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-table-headers
More:
CODE
http://www.bcc.ctc.edu/webpublishing/ada/resources/tables.asp
CODE
http://www.accessify.com/tools-and-wizards/accessible-table-builder_step1.asp
CODE
http://www.webaim.org/techniques/tables/
3.7 Is there sufficient colour brightness/contrasts?
Ensure that foreground and background colour combinations provide sufficient contrast when viewed by someone having colour deficits.
CODE
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-colour-contrast
More:
CODE
http://www.juicystudio.com/services/colourcontrast.asp
3.8 Is colour alone used for critical information?
Ensure that all information conveyed with colour is also available without colour, for example from context or markup.
CODE
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-colour-convey
There are basically three types of colour deficiency; Deuteranope (a form of red/green colour deficit), Protanope (another form of red/green colour deficit) and Tritanope (a blue/yellow deficit- very rare).
More:
CODE
http://colourfilter.wickline.org/
CODE
http://www.toledo-bend.com/colourblind/Ishihara.html
CODE
http://www.vischeck.com/vischeck/vischeckURL.php
3.9 Is there delayed responsiveness for dropdown menus?
Users with reduced motor skills may find dropdown menus hard to use if responsiveness is set too fast.
3.10 Are all links descriptive?
Link text should be meaningful enough to make sense when read out of context - either on its own or as part of a sequence of links. Link text should also be terse.
CODE
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-meaningful-links
4. Accessibility for devices.
4.1 Does the site work acceptably across modern and older browsers?
Before starting to build a CSS-based layout, you should decide which browsers to support and to what level you intend to support them.
CODE
http://www.maxdesign.com.au/presentation/process/index_step01.cfm
4.2 Is the content accessible with CSS switched off or not supported?
Some people may visit your site with either a browser that does not support CSS or a browser with CSS switched off. In content is structured well, this will not be an issue.
4.3 Is the content accessible with images switched off or not supported?
Some people browse websites with images switched off - especially people on very slow connections. Content should still be accessible for these people.
4.4 Does the site work in text browsers such as Lynx?
This is like a combination of images and CSS switched off. A text-based browser will rely on well structured content to provide meaning.
More:
CODE
http://www.delorie.com/web/lynxview
4.5 Does the site work well when printed?
You can take any (X)HTML document and simply style it for print, without having to touch the markup.
CODE
http://www.alistapart.com/articles/goingtoprint/
More:
CODE
http://www.d.umn.edu/itss/support/Training/Online/webdesign/css.html#print
4.6 Does the site work well in Hand Held devices?
This is a hard one to deal with until hand held devices consistently support their correct media type. However, some layouts work better in current hand-held devices. The importance of supporting hand held devices will depend on target audiences.
4.7 Does the site include detailed metadata?
Metadata is machine understandable information for the web
CODE
http://www.w3.org/Metadata/
Metadata is structured information that is created specifically to describe another resource. In other words, metadata is 'data about data'.
4.8 Does the site work well in a range of browser window sizes?
It is a common assumption amongst developers that average screen sizes are increasing. Some developers assume that the average screen size is now 1024px wide. But what about users with smaller screens and users with hand held devices? Are they part of your target audience and are they being disadvantaged?
5. Basic Usability
5.1 Is there a clear visual hierarchy?
Organise and prioritise the contents of a page by using size, prominence and content relationships.
CODE
http://www.great-web-design-tips.com/web-site-design/165.html
5.2 Are heading levels easy to distinguish?
Use header elements to convey document structure and use them according to specification.
CODE
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-logical-headings
5.3 Is the site's navigation easy to understand?
Your navigation system should give your visitor a clue as to what page of the site they are currently on and where they can go next.
CODE
http://www.1stsitefree.com/design_nav.htm
5.4 Is the site's navigation consistent?
If each page on your site has a consistent style of presentation, visitors will find it easier to navigate between pages and find information
CODE
http://www.juicystudio.com/tutorial/accessibility/navigation.asp
5.5 Does the site use consistent and appropriate language?
The use of clear and simple language promotes effective communication. Trying to come across as articulate can be as difficult to read as poorly written grammar, especially if the language used isn't the visitor's primary language.
CODE
http://www.juicystudio.com/tutorial/accessibility/clear.asp
5.6 Does the site have a sitemap page and contact page? Are they easy to find?
Most site maps fail to convey multiple levels of the site's information architecture. In usability tests, users often overlook site maps or can't find them. Complexity is also a problem: a map should be a map, not a navigational challenge of its own.
CODE
http://www.useit.com/alertbox/20020106.html
5.7 For large sites, is there a search tool?
While search tools are not needed on smaller sites, and some people will not ever use them, site-specific search tools allow users a choice of navigation options.
5.8 Is there a link to the home page on every page in the site?
Some users like to go back to a site's home page after navigating to content within a site. The home page becomes a base camp for these users, allowing them to regroup before exploring new content.
5.9 Are links underlined?
To maximise the perceived affordance of clickability, colour and underline the link text. Users shouldn't have to guess or scrub the page to find out where they can click.
CODE
http://www.useit.com/alertbox/20040510.html
5.10 Are visited links clearly defined?
Most important, knowing which pages they've already visited frees users from unintentionally revisiting the same pages over and over again.
CODE
http://www.useit.com/alertbox/20040503.html
6. Site management
6.1 Does the site have a meaningful and helpful 404 error page that works from any depth in the site?
You've requested a page - either by typing a URL directly into the address bar or clicking on an out-of-date link and you've found yourself in the middle of cyberspace nowhere. A user-friendly website will give you a helping hand while many others will simply do nothing, relying on the browser's built-in ability to explain what the problem is.
CODE
http://www.alistapart.com/articles/perfect404/
6.2 Does the site use friendly URLs?
Most search engines (with a few exceptions - namely Google) will not index any pages that have a question mark or other character (like an ampersand or equals sign) in the URL... what good is a site if no one can find it?
CODE
http://www.sitepoint.com/article/search-engine-friendly-urls
One of the worst elements of the web from a user interface standpoint is the URL. However, if they're short, logical, and self-correcting, URLs can be acceptably usable
CODE
http://www.merges.net/theory/20010305.html
More:
CODE
http://www.sitepoint.com/article/search-engine-friendly-urls
CODE
http://www.websitegoodies.com/article/32
CODE
http://www.merges.net/theory/20010305.html
6.3 Does the site's URL work without "www"?
While this is not critical, and in some cases is not even possible, it is always good to give people the choice of both options. If a user types your domain name without the www and gets no site, this could disadvantage both the user and you.
6.4 Does the site have a favicon?
A Favicon is a multi-resolution image included on nearly all professionally developed sites. The Favicon allows the webmaster to further promote their site, and to create a more customized appearance within a visitor's browser.
CODE
http://www.favicon.com/
Favicons are definitely not critical. However, if they are not present, they can cause 404 errors in your logs (site statistics). Browsers like IE will request them from the server when a site is bookmarked. If a favicon isn't available, a 404 error may be generated. Therefore, having a favicon could cut down on favicon specific 404 errors. The same is true of a 'robots.txt' file.
Wednesday, August 26, 2009
Sunday, August 23, 2009
what is a applet?
An applet is a program written in the Java programming language that can be included in an HTML page, much in the same way an image is included in a page. When you use a Java technology-enabled browser to view a page that contains an applet, the applet's code is transferred to your system and executed by the browser's Java Virtual Machine (JVM). For information and examples on how to include an applet in an HTML page, refer to this description of the "APPLET" tag.
Saturday, August 22, 2009
Adobe Dreamweaver
Adobe Dreamweaver (formerly Macromedia Dreamweaver) is a web development application originally created by Macromedia, and is now developed by Adobe Systems, which acquired Macromedia in 2005.
Dreamweaver is available for both Mac and Windows operating systems. Recent versions have incorporated support for web technologies such as CSS, JavaScript, and various server-side scripting languages and frameworks including ASP, ColdFusion, and PHP.
Although a hybrid WYSIWYG and code-based web design and development application, Dreamweaver's WYSIWYG mode can hide the HTML code details of pages from the user, making it possible for non-coders to create web pages and sites. One criticism of this approach is that it has the potential to produce HTML pages whose file size and amount of HTML code is larger than an optimally hand-coded page would be, which can cause web browsers to perform poorly. This can be particularly true because the application makes it very easy to create table-based layouts. In addition, some web site developers have criticized Dreamweaver in the past for producing code that often does not comply with W3C standards, though recent versions have been more compliant. Dreamweaver 8.0 performed poorly on the Acid2 Test, developed by the Web Standards Project. However, Adobe has focused on support for standards-based layout in recent and current versions of the application, including the ability to convert tables to layers.
Dreamweaver allows users to preview websites in locally-installed web browsers. It also has site management tools, such as FTP/SFTP and WebDAV file transfer and synchronization features, the ability to find and replace lines of text or code by search terms and regular expressions across the entire site, and a templating feature that allows single-source update of shared code and layout across entire sites without server-side includes or scripting. The behaviours panel also enables use of basic JavaScript without any coding knowledge, and integration with Adobe's Spry AJAX framework offers easy access to dynamically-generated content and interfaces.
Dreamweaver can utilize third-party "Extensions" to enable and extend core functionality of the application, which any web developer can write (largely in HTML and JavaScript). Dreamweaver is supported by a large community of extension developers who make extensions available (both commercial and free) for most web development tasks from simple rollover effects to full-featured shopping carts.
Like other HTML editors, Dreamweaver edits files locally, then uploads all edited files to the remote web server using FTP, SFTP, or WebDAV. Dreamweaver CS4 now supports the Subversion (SVN) version control system.
Dreamweaver is available for both Mac and Windows operating systems. Recent versions have incorporated support for web technologies such as CSS, JavaScript, and various server-side scripting languages and frameworks including ASP, ColdFusion, and PHP.
Although a hybrid WYSIWYG and code-based web design and development application, Dreamweaver's WYSIWYG mode can hide the HTML code details of pages from the user, making it possible for non-coders to create web pages and sites. One criticism of this approach is that it has the potential to produce HTML pages whose file size and amount of HTML code is larger than an optimally hand-coded page would be, which can cause web browsers to perform poorly. This can be particularly true because the application makes it very easy to create table-based layouts. In addition, some web site developers have criticized Dreamweaver in the past for producing code that often does not comply with W3C standards, though recent versions have been more compliant. Dreamweaver 8.0 performed poorly on the Acid2 Test, developed by the Web Standards Project. However, Adobe has focused on support for standards-based layout in recent and current versions of the application, including the ability to convert tables to layers.
Dreamweaver allows users to preview websites in locally-installed web browsers. It also has site management tools, such as FTP/SFTP and WebDAV file transfer and synchronization features, the ability to find and replace lines of text or code by search terms and regular expressions across the entire site, and a templating feature that allows single-source update of shared code and layout across entire sites without server-side includes or scripting. The behaviours panel also enables use of basic JavaScript without any coding knowledge, and integration with Adobe's Spry AJAX framework offers easy access to dynamically-generated content and interfaces.
Dreamweaver can utilize third-party "Extensions" to enable and extend core functionality of the application, which any web developer can write (largely in HTML and JavaScript). Dreamweaver is supported by a large community of extension developers who make extensions available (both commercial and free) for most web development tasks from simple rollover effects to full-featured shopping carts.
Like other HTML editors, Dreamweaver edits files locally, then uploads all edited files to the remote web server using FTP, SFTP, or WebDAV. Dreamweaver CS4 now supports the Subversion (SVN) version control system.
What is HTML?
What is HTML?
HTML ( H yper T ext M arkup L anguage) is the language used to write Web pages. You are looking at a Web page right now.
You can view HTML pages in two ways:
· One view is their appearance on a Web browser, just like this page — colors, different text sizes, graphics.
· The other view is called "HTML Code" — this is the code that tells the browser what to do.
Here is the difference between HTML code and a browser display:
HTML Code Browser Display
I want to emphasize this! I want to emphasize this!
The code on the left creates the browser display on the right.
Letters and words that are enclosed in "<" and ">" marks are called "tags." They tell the browser what to do:
· The tag tells the browser to make bold text.
· The tag means to stop making bold text.
What is a tag?
In HTML, a tag tells the browser what to do.
When you write an HTML page, you enter tags for many reasons — to change the appearance of text, to show a graphic, or to make a link to another page.
The tags you write are not visible on the browser, but their effects are.
Tags begin with the symbol "<" and end with ">".
Tags usually come in pairs, one that begins an action and one that ends it.
This tag: starts printing italicized text.
This tag: stops the effect of a previous tag. Note the "/".
To italicize a word, you simply put before the word and after it:
HTML Code Browser Display
I want to italicize this! I want to italicize this!
What is the simplest HTML page?
Here is the very least HTML code that can be called a page:
HTML Code Browser Display
This is my page title! This is my message to the world! This is my message to the world!
You don't need to know the meaning of all these tags.
Always type a title between the and tags. This title will appear at the top of the browser display.
Your page contents go between the and tags.
You can type this code in any text editor or word processor, and if you save it as plain text with a file suffix of .html (example: mypage.html), you can view it with a browser.
After you have created a simple page using a text editor, you should consider getting a better HTML editor. There are lots of them. I even wrote one — it is called Arachnophilia , and it doesn't cost you any money.
What is a Hypertext link?
A hypertext link is a special tag that links one page to another page or resource. If you click the link, the browser jumps to the link's destination.
There are two parts to a link:
· One part tells the human what to do.
· The other part tells the browser what to do.
Here is an example:
HTML Code Browser Display
Go to Microsoft Go to Microsoft
In this example, the phrase "http://www.microsoft.com" tells the browser what the link's destination is, and the phrase "Go to Microsoft" tells the human what is happening.
The link on the right is real — if you press it, you will go to Microsoft's Web site.
If you want to make a link to one of your own pages, just use the name of the page without the "http://" prefix:
HTML Code Browser Display
Go to the Arachnophilia Home Page Go to the Arachnophilia Home Page
How do I put a graphic image on my page?
Use the IMG tag. Here is an example:
This is a very easy tag to use, but take these precautions:
1. If the name of the graphic file is in UPPERCASE, then type the name into the IMG tag in UPPERCASE also. If it is lowercase, type the name in lowercase. Case errors won't matter on your home computer, but when you load your page and graphics onto the Web, suddenly the graphics won't show up any more. This is because Windows and other popular home operating systems do not care whether the file names have the right case, but Web servers do.
2. If you want to simply type in the graphic file name as shown here, the graphic file must be in the same directory as your Web page.
3. You can't use just any graphic file on your page. You should limit yourself to GIF and JPG files — most current browsers can display these graphics correctly, and they are also efficient to store on your page and to download from the Web.
HTML ( H yper T ext M arkup L anguage) is the language used to write Web pages. You are looking at a Web page right now.
You can view HTML pages in two ways:
· One view is their appearance on a Web browser, just like this page — colors, different text sizes, graphics.
· The other view is called "HTML Code" — this is the code that tells the browser what to do.
Here is the difference between HTML code and a browser display:
HTML Code Browser Display
I want to emphasize this! I want to emphasize this!
The code on the left creates the browser display on the right.
Letters and words that are enclosed in "<" and ">" marks are called "tags." They tell the browser what to do:
· The tag tells the browser to make bold text.
· The tag means to stop making bold text.
What is a tag?
In HTML, a tag tells the browser what to do.
When you write an HTML page, you enter tags for many reasons — to change the appearance of text, to show a graphic, or to make a link to another page.
The tags you write are not visible on the browser, but their effects are.
Tags begin with the symbol "<" and end with ">".
Tags usually come in pairs, one that begins an action and one that ends it.
This tag: starts printing italicized text.
This tag: stops the effect of a previous tag. Note the "/".
To italicize a word, you simply put before the word and after it:
HTML Code Browser Display
I want to italicize this! I want to italicize this!
What is the simplest HTML page?
Here is the very least HTML code that can be called a page:
HTML Code Browser Display
You don't need to know the meaning of all these tags.
Always type a title between the
Your page contents go between the and tags.
You can type this code in any text editor or word processor, and if you save it as plain text with a file suffix of .html (example: mypage.html), you can view it with a browser.
After you have created a simple page using a text editor, you should consider getting a better HTML editor. There are lots of them. I even wrote one — it is called Arachnophilia , and it doesn't cost you any money.
What is a Hypertext link?
A hypertext link is a special tag that links one page to another page or resource. If you click the link, the browser jumps to the link's destination.
There are two parts to a link:
· One part tells the human what to do.
· The other part tells the browser what to do.
Here is an example:
HTML Code Browser Display
Go to Microsoft Go to Microsoft
In this example, the phrase "http://www.microsoft.com" tells the browser what the link's destination is, and the phrase "Go to Microsoft" tells the human what is happening.
The link on the right is real — if you press it, you will go to Microsoft's Web site.
If you want to make a link to one of your own pages, just use the name of the page without the "http://" prefix:
HTML Code Browser Display
Go to the Arachnophilia Home Page Go to the Arachnophilia Home Page
How do I put a graphic image on my page?
Use the IMG tag. Here is an example:
This is a very easy tag to use, but take these precautions:
1. If the name of the graphic file is in UPPERCASE, then type the name into the IMG tag in UPPERCASE also. If it is lowercase, type the name in lowercase. Case errors won't matter on your home computer, but when you load your page and graphics onto the Web, suddenly the graphics won't show up any more. This is because Windows and other popular home operating systems do not care whether the file names have the right case, but Web servers do.
2. If you want to simply type in the graphic file name as shown here, the graphic file must be in the same directory as your Web page.
3. You can't use just any graphic file on your page. You should limit yourself to GIF and JPG files — most current browsers can display these graphics correctly, and they are also efficient to store on your page and to download from the Web.
Friday, August 21, 2009
Tips for Effective Web Design
Here are some essential web design tips that every web site should
follow. Design your web site by following these tips and I guarantee
that visitors will have a great first impression of your site.
1. Fast Loading web site designs - This is the number 1 tip that every
web designer should follow. You might design a web site that looks
fantastic but few people are going to see it if it takes a long time
to load. Your designs should be optimized for the web and should not
take more than 15 seconds to load. Remember, you might have a great
design but very few people are going to see it if it takes a long time
to load.
2. Clear Navigation - Once a visitor has come to your site you need to
make them go through your site. To do this you need to have clear
navigation. Make sure all your important links are at prominent
places. Preferably right on top - that's usually where a visitor first
looks. Make use of menus on the right and the left. Try to link to as
many pages of your site. Let your information be accessible from all
parts of the site. You never know what a visitor may be interested in.
Try to also use the footer for your important links.
3. All Resolutions - Today, there are computers with all kinds of
resolution. They range from 640 x 480 to 1024 x 768 and go even
higher. Your job is to design your site for all these resolutions. The
best way to do this is to design your site in terms of percentage and
not pixels
4. Browser Compatibility - Make sure your site is browser compatible.
Your web site should look good in Netscape as well as in Internet
Explorer. Don't stop designing your site as soon as you find that it
looks great on IE. Usually Netscape gives some problems, especially
when you try doing complicated HTML designs. But don't give up too
soon, usually with patience these problems can be easily fixed.
5. Readable and professional looking fonts - Don't ask me how many
times I've clicked out of a site just because the font is in Comic
Sans and the color is a bright pink or green. Just by looking at the
font you feel that the site is not a professional site. Don't use
Comic Sans and other fancy fonts that may not be available on most
computers. If the font you use is not available in a visitors computer
the web site will use the default font of your computer which is much
worse. So try to keep to common and professional web fonts. The fonts
that I always stick to are Arial and Verdana.
6. Minimize the use of images - I believe that sometimes simple
designs are the most effective for the web. Keep your site simple but
neat. Don't clutter your page with big, bulky images that take ages to
load. Instead use tables creatively and design eye - catching icons
that will draw a visitor's attention to a particular section of your
site. Tip - Visitors are usually more interested in content than in
design.
7. Use of white space - Try not to clutter up your page with too many
images, backgrounds and colorful fonts. Again use the Keep It Simple
principle by minimizing the use of graphics and using a lot of white
space. White space gives a sense of spaciousness and overall neatness
to a site. Notice the white space in our site.
8. Check for broken links - Always check for broken links within a
site before uploading it to your web server. In Dreamweaver you can
check for broken links by right clicking on any file in the Site Files
Window and then clicking on Check links - Entire Site. If you don't
have this facility you need to upload your site and then check it
using online tools like Net Mechanic.
follow. Design your web site by following these tips and I guarantee
that visitors will have a great first impression of your site.
1. Fast Loading web site designs - This is the number 1 tip that every
web designer should follow. You might design a web site that looks
fantastic but few people are going to see it if it takes a long time
to load. Your designs should be optimized for the web and should not
take more than 15 seconds to load. Remember, you might have a great
design but very few people are going to see it if it takes a long time
to load.
2. Clear Navigation - Once a visitor has come to your site you need to
make them go through your site. To do this you need to have clear
navigation. Make sure all your important links are at prominent
places. Preferably right on top - that's usually where a visitor first
looks. Make use of menus on the right and the left. Try to link to as
many pages of your site. Let your information be accessible from all
parts of the site. You never know what a visitor may be interested in.
Try to also use the footer for your important links.
3. All Resolutions - Today, there are computers with all kinds of
resolution. They range from 640 x 480 to 1024 x 768 and go even
higher. Your job is to design your site for all these resolutions. The
best way to do this is to design your site in terms of percentage and
not pixels
4. Browser Compatibility - Make sure your site is browser compatible.
Your web site should look good in Netscape as well as in Internet
Explorer. Don't stop designing your site as soon as you find that it
looks great on IE. Usually Netscape gives some problems, especially
when you try doing complicated HTML designs. But don't give up too
soon, usually with patience these problems can be easily fixed.
5. Readable and professional looking fonts - Don't ask me how many
times I've clicked out of a site just because the font is in Comic
Sans and the color is a bright pink or green. Just by looking at the
font you feel that the site is not a professional site. Don't use
Comic Sans and other fancy fonts that may not be available on most
computers. If the font you use is not available in a visitors computer
the web site will use the default font of your computer which is much
worse. So try to keep to common and professional web fonts. The fonts
that I always stick to are Arial and Verdana.
6. Minimize the use of images - I believe that sometimes simple
designs are the most effective for the web. Keep your site simple but
neat. Don't clutter your page with big, bulky images that take ages to
load. Instead use tables creatively and design eye - catching icons
that will draw a visitor's attention to a particular section of your
site. Tip - Visitors are usually more interested in content than in
design.
7. Use of white space - Try not to clutter up your page with too many
images, backgrounds and colorful fonts. Again use the Keep It Simple
principle by minimizing the use of graphics and using a lot of white
space. White space gives a sense of spaciousness and overall neatness
to a site. Notice the white space in our site.
8. Check for broken links - Always check for broken links within a
site before uploading it to your web server. In Dreamweaver you can
check for broken links by right clicking on any file in the Site Files
Window and then clicking on Check links - Entire Site. If you don't
have this facility you need to upload your site and then check it
using online tools like Net Mechanic.
Web Designing and Programming
Hello and welcome fellow designers!, I created this area for designers like myself to be able to have a group of our own to discuss anything related to website design, so im also looking for others to help me keep this group growing, and start discussing content of your own, so if you`re interested please come and join me. Also feel free to invite any other local website designers.
Discussions may be on Web design, graphics, site layout, application development, usability, SEO, promotion and presence. HTML, hosting, SSI, PHP, MySQL, Javascript, Flash, ColdFusion, Java, ASP, .NET, Linux, Windows, Apache, IIS, bulletin board systems, chat rooms, content management systems, etc...
Discussions may be on Web design, graphics, site layout, application development, usability, SEO, promotion and presence. HTML, hosting, SSI, PHP, MySQL, Javascript, Flash, ColdFusion, Java, ASP, .NET, Linux, Windows, Apache, IIS, bulletin board systems, chat rooms, content management systems, etc...
Friday, August 14, 2009
10 Tips on designing a fast loading web site
Tips and tricks on effective web design
The Number 1 rule that every web designer should follow is to create a fast loading web site. You might have a great design but very few people are going to see it if it takes a long time to load. While designing a web site always think about how long it will take to load. Try out our tips to build a great looking web site that also loads fast.
1. Minimize the use of images - The key to a fast loading web site is to minimize the use of images. Images do enhance a page but don't make 80% of your web site only images. Instead break it down as much as possible to simple HTML. Notice the popular sites like Yahoo, Google, Ebay, Amazon etc., they have very few images because the load time is more important. Very often simple designs are the best.
2. Optimize images for the web - Once you have decided on the images that you need on your site, make sure that it is optimized for the web. They should be in the gif or jpeg format. You can also minimize the size of the image by choosing the number of colors you need, from the color palette. The less the colors you choose, the less the size of the image. You can also use online tools like Gif Wizard to optimize your images or to get a recommendation on how to cut down the size of an image.
3. Use Tables creatively - You can get some great looking designs by using tables creatively . Tables load very fast because it is just HTML code. Tables can be used in the homepage, menus or anywhere you like. Check out our homepage and our menus to see how we have used tables in our site.
Read more on Using HTML Tables Creatively
4. Cut down the use of animated gifs - Don't use animated gifs unless it is necessary. Animated gifs take a long time to load and can also be very irritating. But since they catch your attention you could use small animated gifs to draw a visitor's attention to a particular section of your site.
5. Design simple icons - Instead of using big, bulky images use simple and small icons that add a little color and draw the attention of a visitor. We have used small icons in our homepage to highlight the main sections of our site.
6. Use background images instead of big images whenever possible - Use background images whenever possible. This is usually a very useful tip for headers and footers. Instead of using an image of width 580 which is a uniform design you can use just a part of that as a background fill. This reduces the size of the web page as the image is small. The code will look like this :
7. Try out CSS Styles - Have fun with CSS styles to get some cool text effects. Again, a CSS Style is simple HTML code so it loads very fast. You can create cool rollovers using CSS Styles.
Rollover the text on the right menu to see how we have used CSS Styles to get a simple but nice text effect.
8. Use Flash sparingly - There seems to be a lot of hype about Flash but I recommend that you minimize the use of Flash on a site. Don't make entire sites using Flash. It may look great but it takes hours to load and can really put off visitors. If you do want to use Flash use it within an HTML site and make sure it loads fast.
9. Design most of your site in HTML - As much as possible try to design your site using HTML. You can create great designs by just using HTML code. Use tables, CSS Styles and simple fonts to design your site. Minimize the use of animated gifs, Flash, bulky images etc.
10. Keep checking your load time - Last but not least, before you decide on the final design of your web site, check its load time on Net Mechanic. This site gives you a free analysis of your web site which is extremely useful. We kept using it to improve our site till we got a report that said good loading time!
The Number 1 rule that every web designer should follow is to create a fast loading web site. You might have a great design but very few people are going to see it if it takes a long time to load. While designing a web site always think about how long it will take to load. Try out our tips to build a great looking web site that also loads fast.
1. Minimize the use of images - The key to a fast loading web site is to minimize the use of images. Images do enhance a page but don't make 80% of your web site only images. Instead break it down as much as possible to simple HTML. Notice the popular sites like Yahoo, Google, Ebay, Amazon etc., they have very few images because the load time is more important. Very often simple designs are the best.
2. Optimize images for the web - Once you have decided on the images that you need on your site, make sure that it is optimized for the web. They should be in the gif or jpeg format. You can also minimize the size of the image by choosing the number of colors you need, from the color palette. The less the colors you choose, the less the size of the image. You can also use online tools like Gif Wizard to optimize your images or to get a recommendation on how to cut down the size of an image.
3. Use Tables creatively - You can get some great looking designs by using tables creatively . Tables load very fast because it is just HTML code. Tables can be used in the homepage, menus or anywhere you like. Check out our homepage and our menus to see how we have used tables in our site.
Read more on Using HTML Tables Creatively
4. Cut down the use of animated gifs - Don't use animated gifs unless it is necessary. Animated gifs take a long time to load and can also be very irritating. But since they catch your attention you could use small animated gifs to draw a visitor's attention to a particular section of your site.
5. Design simple icons - Instead of using big, bulky images use simple and small icons that add a little color and draw the attention of a visitor. We have used small icons in our homepage to highlight the main sections of our site.
6. Use background images instead of big images whenever possible - Use background images whenever possible. This is usually a very useful tip for headers and footers. Instead of using an image of width 580 which is a uniform design you can use just a part of that as a background fill. This reduces the size of the web page as the image is small. The code will look like this :
7. Try out CSS Styles - Have fun with CSS styles to get some cool text effects. Again, a CSS Style is simple HTML code so it loads very fast. You can create cool rollovers using CSS Styles.
Rollover the text on the right menu to see how we have used CSS Styles to get a simple but nice text effect.
8. Use Flash sparingly - There seems to be a lot of hype about Flash but I recommend that you minimize the use of Flash on a site. Don't make entire sites using Flash. It may look great but it takes hours to load and can really put off visitors. If you do want to use Flash use it within an HTML site and make sure it loads fast.
9. Design most of your site in HTML - As much as possible try to design your site using HTML. You can create great designs by just using HTML code. Use tables, CSS Styles and simple fonts to design your site. Minimize the use of animated gifs, Flash, bulky images etc.
10. Keep checking your load time - Last but not least, before you decide on the final design of your web site, check its load time on Net Mechanic. This site gives you a free analysis of your web site which is extremely useful. We kept using it to improve our site till we got a report that said good loading time!
10 Useful code snippets for web developers
In this post I want to suggest you 10 useful code snippets for web developers based on some frequetly asked questions I received in the past months for my readers. This collection include several CSS, PHP, HTML, Ajax and jQuery snippets. Take a look!
1. CSS Print Framework
Hartija is an universal Cascading Style Sheets Framework for web printing. To use this framework download the CSS file here and use this line of code into your web pages:
< link rel="stylesheet" href="print.css" type="text/css" media="print">
2. CSS @font-face
This snippet allows authors to specify online custom fonts to display text on their webpages without using images:
@font-face {
font-family: MyFontFamily;
src: url('http://');
}
3. HTML 5 CSS Reset
Richard Clark made a few adjustments to the original CSS reset released from Eric Meyers.
4. Unit PNG Fix
This snippet fixes the png 24 bit transparency with Internet Explorer 6.
5. Tab Bar with rounded corners
This code illustrates how to implement a simple tab bar with rounded corners:
6. PHP: Use isset() instead of strlen()
This snippet uses isset() instead strlen() to verify a PHP variable (in this example $username) is set and is at least six characters long. (via Smashing Magazine).
if (isset($username[5])) {
// Do something...
}
?>
7. PHP: Convert strings into clickable url
This snippet is very useful to convert a string in a clickable link. I used this snippet for several tutorials; for example take a look at this link Simple PHP Twitter Search ready to use in your web projects where I used this snippet to convet into a clickable link all textual links contained in a tweet.
function convertToURL($text) {
$text = preg_replace("/([a-zA-Z]+:\/\/[a-z0-9\_\.\-]+"."[a-z]{2,6}[a-zA-Z0-9\/\*\-\_\?\&\%\=\,\+\.]+)/"," $1", $text);
$text = preg_replace("/[^a-z]+[^:\/\/](www\."."[^\.]+[\w][\.|\/][a-zA-Z0-9\/\*\-\_\?\&\%\=\,\+\.]+)/"," $1", $text);
$text = preg_replace("/([\s|\,\>])([a-zA-Z][a-zA-Z0-9\_\.\-]*[a-z" . "A-Z]*\@[a-zA-Z][a-zA-Z0-9\_\.\-]*[a-zA-Z]{2,6})" . "([A-Za-z0-9\!\?\@\#\$\%\^\&\*\(\)\_\-\=\+]*)" . "([\s|\.|\,\<])/i", "$1$2$4",
$text);
return $text;
}
?>
8. jQuery: Ajax call
This is the most simple way to implement an Ajax call using jQuery. Change formId and inputFieldId with the ID of the form and input field you have to submit:
9. CSS Layouts Collections
This page contains a collection of over 300 grids and CSS layout ready to use in your projects. Take a look, it's very useful.
10. Simple versatile multilevel navigation Menu
Several months ago I found this simple code (HTML + CSS + JavaScript for jQuery) to implement a versatile multilevel navigation menu (please send me the original source if you find it!). I think it's the simpler and faster way to do that. The result is something like this:
The only thing you have to do is to create nested <ul> lists into a main list with id="nav", in this way:
...and use this basic CSS code (you have to modify it to customize the layout of this menu with the style of your site!):
#nav, #nav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:26px;
}
#nav a:link,
#nav a:active,
#nav a:visited{
display:block;
color:#FFF;
text-decoration:none;
background:#444;
height:26px;
line-height:26px;
padding:0 6px;
margin-right:1px;
}
#nav a:hover{
background:#0066FF;
color:#FFF;
}
#nav li{
float:left;
position:relative;
}
#nav ul {
position:absolute;
width:12em;
top:26px;
display:none;
}
#nav li ul a{
width:12em;
float:left;
}
#nav ul ul{
width:12em;
top:auto;
}
#nav li ul ul {margin:0 0 0 13em;}
#nav li:hover ul ul,
#nav li:hover ul ul ul,
#nav li:hover ul ul ul ul{display:none;}
#nav li:hover ul,
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li li li li:hover ul{display:block;}
...and this is the JavaScript code for jQuery you have to copy in the tag of the pages that use this menu:
1. CSS Print Framework
Hartija is an universal Cascading Style Sheets Framework for web printing. To use this framework download the CSS file here and use this line of code into your web pages:
< link rel="stylesheet" href="print.css" type="text/css" media="print">
2. CSS @font-face
This snippet allows authors to specify online custom fonts to display text on their webpages without using images:
@font-face {
font-family: MyFontFamily;
src: url('http://');
}
3. HTML 5 CSS Reset
Richard Clark made a few adjustments to the original CSS reset released from Eric Meyers.
4. Unit PNG Fix
This snippet fixes the png 24 bit transparency with Internet Explorer 6.
5. Tab Bar with rounded corners
This code illustrates how to implement a simple tab bar with rounded corners:
6. PHP: Use isset() instead of strlen()
This snippet uses isset() instead strlen() to verify a PHP variable (in this example $username) is set and is at least six characters long. (via Smashing Magazine).
if (isset($username[5])) {
// Do something...
}
?>
7. PHP: Convert strings into clickable url
This snippet is very useful to convert a string in a clickable link. I used this snippet for several tutorials; for example take a look at this link Simple PHP Twitter Search ready to use in your web projects where I used this snippet to convet into a clickable link all textual links contained in a tweet.
function convertToURL($text) {
$text = preg_replace("/([a-zA-Z]+:\/\/[a-z0-9\_\.\-]+"."[a-z]{2,6}[a-zA-Z0-9\/\*\-\_\?\&\%\=\,\+\.]+)/"," $1", $text);
$text = preg_replace("/[^a-z]+[^:\/\/](www\."."[^\.]+[\w][\.|\/][a-zA-Z0-9\/\*\-\_\?\&\%\=\,\+\.]+)/"," $1", $text);
$text = preg_replace("/([\s|\,\>])([a-zA-Z][a-zA-Z0-9\_\.\-]*[a-z" . "A-Z]*\@[a-zA-Z][a-zA-Z0-9\_\.\-]*[a-zA-Z]{2,6})" . "([A-Za-z0-9\!\?\@\#\$\%\^\&\*\(\)\_\-\=\+]*)" . "([\s|\.|\,\<])/i", "$1$2$4",
$text);
return $text;
}
?>
8. jQuery: Ajax call
This is the most simple way to implement an Ajax call using jQuery. Change formId and inputFieldId with the ID of the form and input field you have to submit:
9. CSS Layouts Collections
This page contains a collection of over 300 grids and CSS layout ready to use in your projects. Take a look, it's very useful.
10. Simple versatile multilevel navigation Menu
Several months ago I found this simple code (HTML + CSS + JavaScript for jQuery) to implement a versatile multilevel navigation menu (please send me the original source if you find it!). I think it's the simpler and faster way to do that. The result is something like this:
The only thing you have to do is to create nested <ul> lists into a main list with id="nav", in this way:
...and use this basic CSS code (you have to modify it to customize the layout of this menu with the style of your site!):
#nav, #nav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:26px;
}
#nav a:link,
#nav a:active,
#nav a:visited{
display:block;
color:#FFF;
text-decoration:none;
background:#444;
height:26px;
line-height:26px;
padding:0 6px;
margin-right:1px;
}
#nav a:hover{
background:#0066FF;
color:#FFF;
}
#nav li{
float:left;
position:relative;
}
#nav ul {
position:absolute;
width:12em;
top:26px;
display:none;
}
#nav li ul a{
width:12em;
float:left;
}
#nav ul ul{
width:12em;
top:auto;
}
#nav li ul ul {margin:0 0 0 13em;}
#nav li:hover ul ul,
#nav li:hover ul ul ul,
#nav li:hover ul ul ul ul{display:none;}
#nav li:hover ul,
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li li li li:hover ul{display:block;}
...and this is the JavaScript code for jQuery you have to copy in the tag of the pages that use this menu:
Subscribe to:
Posts (Atom)