As a web designer you should be able to create W3C-compliant web design layouts. Web Design and Applications involve the standards for building and Rendering Web pages, including HTML, CSS, SVG, Ajax, and other technologies for Web Applications. Web standards make the internet a better place.Web standards make the internet a better place.
Understand what it W3C?
-W3C Stands for the World Wide Web Consortium
-W3C was created in October 1994
-W3C was created by Tim Berners-Lee
-W3C was created by the Inventor of the Web
-W3C is organized as a Member Organization
-W3C creates and maintains WWW Standards
-W3C is working to Standardize the Web
-W3C Standards are called W3C Recommendations
History of W3c
The World Wide Web (WWW) began as a project at the European Organization for Nuclear Research (CERN), where Tim Berners-Lee developed a vision of the World Wide Web.
Tim Berners-Lee – who is the inventor of the World Wide Web – is now the Director of the World Wide Web Consortium (W3C).
W3C was created in 1994 as a collaboration between the Massachusetts Institute of Technology (MIT) and the European Organization for Nuclear Research (CERN), with support from the U.S. Defense Advanced Research Project Agency (DARPA) and the European Commission.
What Are Web Standards?
Web Standards is a general term to describe aspects of the World Wide Web. These standards ensure that the information we are providing is accessible to everyone.
The W3C is a world wide consortium which provides guidelines on making the web more accessible to a range of users.
W3C is hosted by three universities:
• Massachusetts Institute of Technology in the U.S.
• The French National Research Institute in Europe
• Keio University in Japan
W3C functions as a member organization.
W3c members :
Some well known members are:
• IBM
• Microsoft
• America Online
• Apple
• Adobe
• Macromedia
• Sun Microsystems
Who Define Web Standards?
The World Wide Web Consortium (W3C) is an international organization who work together to develop Web Standards, Led by Web inventor Tim Berners-Lee.
W3C Recommendations
W3C has developed Web specifications called “Recommendations” that describe communication protocols (like HTML and XML) and other building blocks of the Web.
Each W3C Recommendation is developed by a work group consisting of members and invited experts.
The group obtains its input from companies and other organizations, and creates a Working Draft and finally a Proposed Recommendation.
In general the Recommendation is submitted to the W3C membership and director, for a formal approval as a W3C Recommendation.
W3C HTML Activities
HTML is the universal markup language for the Web.
HTML Versions
HTML 2.0
HTML 2.0 was developed by the Internet Engineering Task Force HTML Working Group in 1996.
HTML 2.0 is an outdated version of HTML. For a Web developer there is no need to study the HTML 2.0 standard.
HTML 3.2
HTML 3.2 became a W3C Recommendation 14. January 1997. HTML 3.2 contained new features such as fonts, tables, applets, superscripts, subscripts and more, to the existing HTML 2.0 standard.
One of the elements added to the HTML 3.2 standard, was the tag. This tag introduced unnecessary complexity to the important task of separating HTML content (text) from its presentation (style). The tag became deprecated in HTML 4.0.
HTML 4.0
HTML 4.0 became a W3C Recommendation 18. December 1997. A second release was issued on 24. April 1998 with only some editorial corrections.
The most important feature of HTML 4.0 was the introduction of style sheets (CSS).
Our W3C CSS chapter summarizes the W3C CSS activities.
HTML 4.01
HTML 4.01 became a W3C Recommendation 24. December 1999.
HTML 4.01 was a minor update of corrections and bug-fixes from HTML 4.0.
XHTML 1.0
XHTML 1.0 reformulates HTML 4.01 in XML.
XHTML 1.0 became a W3C Recommendation 20. January 2000.
Our W3C XHTML chapter summarizes the W3C XHTML activities.
HTML 5
On January 22nd, 2008, W3C published a working draft for HTML 5.
HTML 5 improves interoperability, and reduces development costs, by making precise rules on how to handle all HTML elements, and how to recover from errors.
Some of the new features in HTML 5 are functions for embedding audio, video, graphics, client-side data storage, and interactive documents.
HTML 5 also contains new elements .
The HTML 5 working group includes AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera
W3C CSS Activities
CSS Versions
CSS1
CSS1 became a W3C Recommendation 17. December 1996.
CSS2
CSS2 became a W3C Recommendation 11. January 1999. CSS2 has added support for media (printers and aural devices), downloadable fonts, element-positioning and tables.
CSS3
CSS3 is about breaking CSS into smaller modules.
Role of w3c validations in search engine optimization
Content is very important for search engine optimization.
If you have a site with no quality content and no backlinks yet are 100% compliant with W3C standards, the site will still not rank well in search engines
Google has clearly stated that W3C validation does not affect search engine rankings.
The page will not rank higher. Still we should consider the Points listed below as a Role of w3c validations in Search engine optimization
1.There should be minimize page load Time for great website visitor experience
2.Minimize Bounce Rates for your website
URL (Uniform Resource Locator) is probably the most important thing required to reach any website or web page. You will find everywhere. On business cards, in newspapers, emails and of course on websites. But what is a URL?
You can split URL in three parts
Protocol + domain name + path
Example :
http://websitename.com/sub/index.html
protocol: http:
Domain name : websitename.com
Path : sub/index.html
This URL is an absolute URL, in that, all parts are specified.
http means hypertext transfer protocol which is used by web browsers to get web pages. These are protocols followed by browser while communicating with the server. Following are some other protocols :
- mailto : used to send the mail
- ftp : file transfer protocol
- news :used to access newsgroups
- file:it is used to access a file on hard dive
Absolute versus Relative URL’s
Absolute
The word absolute in English means “not dependent on anything”. It also means free from all. Absolute URL is something independent, free from any relationship. Absolute URL is unique. Absolute URL is straight forward.
Using absolute URL in img tag:
<img src=”http://www.websitename.com/images/top.gif”
width=”…” height=”…” />
Relative URL
A relative URL points to a file/directory in relation to the present file/directory.
Using relative URL in img tag:
<img src="../images/top.gif" width="..." height="..." />
URL design rules :
- Keep the URLs clean
- Keep them simple
- Keep a URL human and machine readable
- Keep one URL per page
- Do not use special characters besides a minus/hyphen “-” ideally
- Always use slashes like real directories
- You can enhance URL’s with numbers but don’t rely on them
- You can Skip the date, it’s not the most important
- Do not ever change URLs once set
- If you have to change URLs move them with a “301 permanently moved”
Understanding importance of URL in SEO
URL is very important if we talk about search engine optimization. Search engine optimization experts always recommend structuring your URL in a very simple and easy manner. Using keywords within URL can benefit site ranking. If it is combined with other SEO technique’s it will help in site ranking.
Many website designers give names to web pages as Page # 1″ and “Page # 2. This is not good for search engine and SEO. You should give proper names to your pages that completely define the content of that page. Always create a simple directory structure. It is mostly recommended by search engine optimization experts but also by Google.
Tips for URL structure in the context of SEO:
1. Always describe your content : Your URL should reflect the page content. If user guesses the content of web page simply by looking at your website then it is good URL. These URLs get pasted, shared, emailed, written down and recognized by the engines.
2. Static URL’s are best :Always try to give Static URLs as it tend to be shorter and more effective than dynamic URLs.
3. Less is more : Google’s Matt Cutts says, “If you have got a three, four or five words in your URL, that can be perfectly normal. As it gets a little longer, then it starts to look a little worse. Now, our algorithms typically will just weight those words less and just not give you as much credit.” Shorter URLs are better than longer ones.
4. Descriptive URL’s are better than numbers : Avoid use of numbers. Use descriptive URL’s. It’s far better to use words when possible.
5. Keywords are useful : With sites that target plenty of competitive keyword phrases, you’ll want all the help you can get. Employ keywords in your URL structures. For dynamically created pages through a CMS, create the option of including keywords in the URL.
6. Best to avoid subdomains : Sub domains can be unnecessarily complex and lengthy.
7. Keep fewer folders : Avoid adding content deep within a site. Use fewer folders. Try to keep your important site content less than three or folders deep. It is but obvious that why should the search engines give your content priority if you don’t?
8. Use hyphens to Separate : Search engines prefer the use of a hyphen to an underscore. When creating URLs with multiple words in the format of a phrase, use hyphens to separate the terms.
9. Try to keep it Conventional : Apply your URL guidelines consistently, so users will have a clear idea of how content is organized into folders and pages.
10. Don’t use irrelevant data :Don’t use URL that will generate the same content in an abbreviated form. It will cause duplications.
In 2010 web design trends footers are more exaggerated and it will be less of an after thought and more of an integral part of the design.
Basic jquery tutorial
jquery focuses on retrieving elements from our HTML pages and performing.
operations upon them. If you’re familiar with CSS, you’re already well aware of the power of selectors, which are group of element.
What is jquery
jquery is a free open JavaScript Library. jQuery simplifies JavaScript programming. jQuery is easy to learn. “jQuery is write less do more” lightweight javascript liabrary. It works across modern browsers.
Benefits of using jQuery
- Extends your existing knowledge of CSS
- Works with sets of elements
- With one line of code performs multiple operations on set of elements.
Why jQuery
CSS separates design from content. The method used was through the use of selectors, which represents the elements in the HTML document. jQuery uses the same selectors, supporting common selectors currently used in CSS In jQuery you will learn how to select HTML elements, and how to perform actions on them like hiding, moving and manipulating their content.
You Should Already Know
For learning jQuery you should have a basic knowledge of:
- HTML
- CSS
- JavaScript
Features of jQuery
- jQuery is a library of JavaScript Functions. Following are features of jQuery library :
- Selections of HTML elements
- CSS manipulation
- JavaScript animation and Effects
- Event functions
- AJAX
- Utilities
Library of jQuery is stored in a single javaScript file, containing all the jQuery functions.
How to write jQuery
You can select HTML elements and perform action on the elements using jQuery.
Basic syntax is: $(selector).action()
- A dollar sign to define jQuery
- A (selector) to “query (or find)” HTML elements
How to Download jQuery
Available for downloading are two copies of jQuery.
Both copies can be downloaded from jQuery.com (Left-Click and Save As):
- jQuery minfied (23K)
- jQuery regular (154K)
- Basic jQuery Example
- The following example demonstrates the jQuery hide() function, hiding all <p> elements in an HTML document.
Example
|
