https://www.w3.org/wiki/api.php?action=feedcontributions&feedformat=atom&user=CmillsW3C Wiki - User contributions [en]2024-03-28T19:16:12ZUser contributionsMediaWiki 1.41.0https://www.w3.org/wiki/index.php?title=Headlights2013/3rdPartyLibraryCaching&diff=62932Headlights2013/3rdPartyLibraryCaching2012-11-26T09:32:07Z<p>Cmills: </p>
<hr />
<div>===Name of idea===<br />
<br />
Create mechanism for standard caching of 3rd party JavaScript/other libraries<br />
<br />
===Submitter name===<br />
<br />
Chris Mills, compiled from useful discussion with Liam Quinn, Phil Archer, and others. See [https://lists.w3.org/Archives/Team/w3t/2012Nov/0200.html thread starting here].<br />
<br />
===Classification===<br />
<br />
This idea is A specific technology area that requires new standardization (e.g. structured vocabularies, privacy, REST)<br />
<br />
===One Hundred Word Description of the Idea===<br />
<br />
3rd party JavaScript libraries such as jQuery are ubiquitous these days, and the majority of web developers use them every day as a matter of course, including them in standard development templates even then they are being used for trivial tasks or not at all. This leads to a more inefficient web, with unnecessary extra performance hits that are particularly costly to mobile devices/lowered powered devices/devices using slow network connections. To improve this situation, the W3C should define a standard mechanism for including all these libraries in the browser so they don't have to be downloaded each time, including checking to see if the browser needs to update the cached versions of the libraries it has stored, etc.<br />
<br />
===Benefit(s) to W3C===<br />
<br />
More efficient running of open web applications, better user experience for emerging markets.<br />
<br />
===Which of our stakeholders would be the most enthusiastic in supporting===<br />
<br />
Browser/OS/hardware vendors, especially those involved mobile/device and based in less developed countries.</div>Cmillshttps://www.w3.org/wiki/index.php?title=Headlights2013/3rdPartyLibraryCaching&diff=62931Headlights2013/3rdPartyLibraryCaching2012-11-26T09:30:17Z<p>Cmills: </p>
<hr />
<div>===Name of idea===<br />
<br />
Create mechanism for standard caching of 3rd party JavaScript/other libraries<br />
<br />
===Submitter name===<br />
<br />
Chris Mills (compiled from useful discussion with Liam Quinn, Phil Archer, and others)<br />
<br />
===Classification===<br />
<br />
This idea is A specific technology area that requires new standardization (e.g. structured vocabularies, privacy, REST)<br />
<br />
===One Hundred Word Description of the Idea===<br />
<br />
3rd party JavaScript libraries such as jQuery are ubiquitous these days, and the majority of web developers use them every day as a matter of course, including them in standard development templates even then they are being used for trivial tasks or not at all. This leads to a more inefficient web, with unnecessary extra performance hits that are particularly costly to mobile devices/lowered powered devices/devices using slow network connections. To improve this situation, the W3C should define a standard mechanism for including all these libraries in the browser so they don't have to be downloaded each time, including checking to see if the browser needs to update the cached versions of the libraries it has stored, etc.<br />
<br />
===Benefit(s) to W3C===<br />
<br />
More efficient running of open web applications, better user experience for emerging markets.<br />
<br />
===Which of our stakeholders would be the most enthusiastic in supporting===<br />
<br />
Browser/OS/hardware vendors, especially those involved mobile/device and based in less developed countries.</div>Cmillshttps://www.w3.org/wiki/index.php?title=Headlights2013/3rdPartyLibraryCaching&diff=62930Headlights2013/3rdPartyLibraryCaching2012-11-26T09:29:25Z<p>Cmills: Created page with "===Name of idea=== Create mechanism for standard caching of 3rd party JavaScript/other libraries ===Submitter name=== Chris Mills (compiled from useful discussion with Liam Qu…"</p>
<hr />
<div>===Name of idea===<br />
<br />
Create mechanism for standard caching of 3rd party JavaScript/other libraries<br />
<br />
===Submitter name===<br />
<br />
Chris Mills (compiled from useful discussion with Liam Quinn, Phil Archer, and others)<br />
<br />
===Classification===<br />
This idea is :<br />
<br />
* A specific technology area that requires new standardization (e.g. structured vocabularies, privacy, REST)<br />
<br />
===One Hundred Word Description of the Idea===<br />
<br />
3rd party JavaScript libraries such as jQuery are ubiquitous these days, and the majority of web developers use them every day as a matter of course, including them in standard development templates even then they are being used for trivial tasks or not at all. This leads to a more inefficient web, with unnecessary extra performance hits that are particularly costly to mobile devices/lowered powered devices/devices using slow network connections. To improve this situation, the W3C should define a standard mechanism for including all these libraries in the browser so they don't have to be downloaded each time, including checking to see if the browser needs to update the cached versions of the libraries it has stored, etc.<br />
<br />
<br />
===Benefit(s) to W3C===<br />
<br />
More efficient running of open web applications, better user experience for emerging markets.<br />
<br />
===Which of our stakeholders would be the most enthusiastic in supporting===<br />
<br />
Browser/OS/hardware vendors, especially those involved mobile/device and based in less developed countries.</div>Cmillshttps://www.w3.org/wiki/index.php?title=Headlights2013&diff=62929Headlights20132012-11-26T09:18:21Z<p>Cmills: /* List of Proposals */</p>
<hr />
<div>To bring the Web to its Full potential W3C needs to be constantly thinking about the next major area of focus. Continuously, Domains are refreshing where they put existing resources, but at least once a year (at Woods), W3M needs to explore major re-allocations of resources to ride and drive the latest trends.<br />
<br />
To ensure a thoughtful discussion at Woods it is required that ideas be widely socialized in the Team (and Membership) and that everyone has opportunity to contribute. Preferably, the ideas have been developed beyond the sound bite level to reasonably defined proposals.<br />
<br />
This is the wiki for the Team to create ideas for discussion in 2013, part of the [https://www.w3.org/2011/11/strategic-stds.html#headlights headlights process] instituted in 2011.<br />
<br />
==Instructions==<br />
<br />
# Create a new page in this wiki for each proposal. The content of the page should follow the template below.<br />
# Add a link to your topic in the list of proposals below.<br />
# W3C will choose a subset of submissions for further development over a period of months. It is not the objective to do all of this work prior to submission – January submissions are supposed to be lightweight. However, the template should be sufficiently inspiring that W3M will want to choose your idea for further exploration.<br />
<br />
<br />
==List of Proposals==<br />
<br />
* [[Headlights2013/Standardizing Gestures|Standardizing Gestures]]<br />
* [[Headlights2013/Payments|Payments]]<br />
* [[Headlights2013/DigitalArchiving|Digital Archiving]]<br />
* [[Headlights2013/ExpectTheUnexpected|Strategic Orientation: Spotting Standards in the Making]]<br />
* [[Headlights2013/3rdPartyLibraryCaching|Standard mechanism for caching of 3rd party libraries]]<br />
<br />
==Simplified 2013 Template==<br />
<br />
''To use this template, please copy the following subsections to the wiki page for your idea and complete them.''<br />
<br />
<br />
===Name of idea===<br />
<br />
IDEA NAME HERE<br />
<br />
===Submitter name===<br />
<br />
YOUR NAME HERE<br />
<br />
===Classification===<br />
This idea is (CHOOSE ONE):<br />
* An area of web standardization that arises from the increased application of web technology to a new business segment (e.g. entertainment, publishing, health, energy, government).<br />
* A trend in information technology that requires new standardizations (e.g. cloud computing, social networking, a search platform, a gaming platform)<br />
* A specific technology area that requires new standardization (e.g. structured vocabularies, privacy, REST)<br />
* A new scope of work for W3C for an existing technology area (e.g. education, testing, validation, certification, profiles)<br />
* None of the above<br />
===One Hundred Word Description of the Idea===<br />
<br />
YOUR DESCRIPTION HERE<br />
<br />
<br />
===Benefit(s) to W3C===<br />
YOUR DESCRIPTION HERE<br />
<br />
===Which of our stakeholders would be the most enthusiastic in supporting===<br />
YOUR LIST HERE<br />
<br />
==Template for commenting on Proposals==<br />
<br />
The team may provide input for each proposal, answering at least these questions:<br />
<br />
*Why they think it is a good idea<br />
*Why they think it is a bad idea<br />
*If they are interested in participating to develop the idea further.</div>Cmillshttps://www.w3.org/wiki/index.php?title=Web_Standards_Curriculum&diff=55516Web Standards Curriculum2011-11-17T17:28:19Z<p>Cmills: /* Accessibility */</p>
<hr />
<div>NOTE: THE MATERIAL ON THIS WIKI PAGE IS BEING MIGRATED ONTO THE WEB EDUCATION COMMUNITY GROUP'S DEDICATED WIKI PAGE, AT http://www.w3.org/community/webed/wiki/Main_Page. ITEMS MARKED WITH (MOVED) HAVE ALREADY BEEN MOVED.<br />
<br />
= Web Standards Curriculum table of contents =<br />
<br />
== Introduction ==<br />
<br />
What follows is a list of all the articles within the web standards curriculum, which will give you an essential grounding in HTML5, CSS, JavaScript, accessibility, and the other topics you need to be a modern web developer/designer. Reading them in order makes the most sense, but they are written to work individually, so you can dip in and out as it suits you, if you need to hone individual skills.<br />
<br />
Note: This material was originally published as part of the Opera Web Standards Curriculum, available as [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/#toc Introductory material], written by Chris Mills. Like the original, it is published under the [http://creativecommons.org/licenses/by-nc-sa/2.5/ Creative Commons Attribution, Non Commercial - Share Alike 2.5] license.<br />
<br />
Note #2: Many of the links below currently point to the [http://dev.opera.com dev.opera] versions, but we'll change these over to the W3C versions as we add more to the site. We are very happy to add these to the W3C pages, for a wider readership and more maintenance help.<br />
<br />
== Table of contents ==<br />
<br />
=== The beginning ===<br />
<br />
(MOVED)[[Introduction to the Web Standards Curriculum]]. [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-he/ Hebrew translation] | [http://dev.opera.com/articles/view/1-bevezeto-a-webes-szabvanyokba/ Hungarian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-it/ Italian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/ Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/ Spanish translation]<br />
<br />
=== Introduction to the world of web standards ===<br />
<br />
# (MOVED) [[The history of the Web|The history of the Internet and the web, and the evolution of web standards]]. [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-he/ Hebrew translation] | [http://dev.opera.com/articles/view/2-az-internet-es-a-web-tortenete/ Hungarian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-it/ Italian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud1/index.html Spanish translation]<br />
# (MOVED) [[How does the Internet work]]? [http://dev.opera.com/articles/view/3-hogyan-mukodik-az-internet/ Hungarian translation] | [http://dev.opera.com/articles/view/3-how-does-the-internet-work-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud2/index.html Spanish translation]<br />
# (MOVED) [[The web standards model - HTML CSS and JavaScript]]. [http://dev.opera.com/articles/view/4-a-webes-szabvanyok-modellje/ Hungarian translation] | [http://dev.opera.com/articles/view/4-the-web-standards-model-html-css-a-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud3/index.html Spanish translation]<br />
<br />
=== Web Design Concepts ===<br />
<br />
This section won't go into any code or markup details, and will act as an introduction to the design process before you start to create any graphics or code, as well as concepts of web design such as IA, navigation, usability etc.<br />
<br />
# (MOVED) [[Information_Architecture_-_planning_out_a_web_site|Information Architecture - planning out a web site]]. [http://dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud1/index.html Spanish translation]<br />
# (MOVED) [[What_does_a_good_web_page_need|What does a good web page need?]] [http://dev.opera.com/articles/view/7-mi-kell-egy-jo-weblaphoz/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud2/index.html Spanish translation]<br />
# (MOVED) [[Colour_theory|Colour Theory]]. [http://dev.opera.com/articles/view/8-a-szinek-elmelete/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud3/index.html Spanish translation]<br />
# (MOVED) [[Building up a site wireframe]]. [http://dev.opera.com/articles/view/9-egy-site-keretenek-felepitese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud4/index.html Spanish translation] <br />
# (MOVED) [[Colour schemes and design mockups]]. [http://dev.opera.com/articles/view/10-szinsemak-es-designtervek/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud5/index.html Spanish translation]<br />
# (MOVED) [[Typography on the Web]]. [http://dev.opera.com/articles/view/11-tipografia-a-weben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud6/index.html Spanish translation]<br />
<br />
=== HTML beginnings ===<br />
<br />
# (MOVED) [[The basics of HTML]]. [http://dev.opera.com/articles/view/12-a-html-alapjai/ Hungarian translation] | [http://dev.opera.com/articles/view/12-the-basics-of-html-ja/ Japanese translation]<br />
# (MOVED) [[Doctypes and markup styles]]<br />
# (MOVED) [[The_HTML_head_element|The HTML &lt;head&gt; element]]. [http://dev.opera.com/articles/view/13-a-html-head-eleme/ Hungarian translation] | [http://dev.opera.com/articles/view/13-the-html-head-element-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m3/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m3/ud1/index.html Spanish translation]<br />
# (MOVED) [[More_about_the_document_head|More about the document &lt;head&gt;]]<br />
<br />
=== The HTML body ===<br />
<br />
# (MOVED) [[Marking up textual content in HTML]]. [http://dev.opera.com/articles/view/15-szoveges-reszek-megjelolese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud1/index.html Spanish translation]<br />
# (MOVED) [[HTML lists|HTML Lists]]. [http://dev.opera.com/articles/view/16-html-listak/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud2/index.html Spanish translation]<br />
# (MOVED) [[Images in HTML]]. [http://dev.opera.com/articles/view/17-kepek-a-htmlben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud3/index.html Spanish translation]<br />
# (MOVED) [[HTML_links_-_lets_build_a_web|HTML links — let's build a web!]] [http://dev.opera.com/articles/view/18-html-hivatkozasok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud4/index.html Spanish translation]<br />
# (MOVED) [[HTML tables]]. [http://dev.opera.com/articles/view/19-html-tablazatok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud5/index.html Spanish translation]<br />
# (MOVED) [[HTML forms - the basics]]. [http://dev.opera.com/articles/view/20-html-urlapok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud6/index.html Spanish translation]<br />
# (MOVED) [[HTML5 form additions]]<br />
# (MOVED) [[HTML structural elements]]<br />
# (MOVED) [[Lesser - known semantic elements]]. [http://dev.opera.com/articles/view/21-kevesse-ismert/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Spanish translation]<br />
# (MOVED) [[Creating multiple pages with navigation menus]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud9/index.html Spanish translation]<br />
# (MOVED) [[Validating your HTML]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud10/index.html Spanish translation]<br />
<br />
=== Accessibility ===<br />
<br />
# (MOVED) [[Accessibility basics]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud1/index.html Spanish translation]<br />
# (MOVED) [[Accessibility testing]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud2/index.html Spanish translation]<br />
<br />
=== CSS ===<br />
<br />
# [[CSS_basics|CSS basics]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud1/index.html Spanish translation]<br />
# [[Inheritance and cascade]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud2/index.html Spanish translation]<br />
# [[Text styling with CSS]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud3/index.html Spanish translation]<br />
# [[The_CSS_layout_model_-_boxes_borders_margins_padding|The CSS layout model - boxes, borders, margins, padding]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud4/index.html Spanish translation]<br />
# [[CSS background images]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud5/index.html Spanish translation]<br />
# [[Styling_lists_and_links|Styling lists and links]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud6/index.html Spanish translation]<br />
# [[Styling tables]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html Spanish translation]<br />
# [[Styling forms]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud8/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud8/index.html Spanish translation]<br />
# [[Floats and clearing]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud9/index.html Spanish translation]<br />
# [[CSS static and relative positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud10/index.html Spanish translation]<br />
# [[CSS absolute and fixed positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud11/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud11/index.html | Spanish translation]<br />
# [[Debugging CSS]]<br />
<br />
=== Advanced CSS study ===<br />
<br />
# [[Headers_footers_columns_and_templates|Headers, footers, columns, and templates]]. [http://mosaic.uoc.edu/ac/le/ca/m7/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m7/ud1/index.html Spanish translation]<br />
<br />
=== JavaScript core skills ===<br />
<br />
# [[Programming_-_the_real_basics|Programming - the real basics!]]<br />
# [[What can you do with JavaScript]]<br />
# [[Your first look at JavaScript]]<br />
# [[JavaScript best practices]]<br />
# [[The principles of unobtrusive JavaScript]]<br />
# [[JavaScript functions]]<br />
# [[Objects in JavaScript]]<br />
# [[Traversing the DOM]]<br />
# [[Creating and modifying HTML]]<br />
# [[Dynamic style - manipulating CSS with JavaScript]]<br />
# [[Handling events with JavaScript]]<br />
# [[JavaScript animation]]<br />
# [[Graceful degredation versus progressive enhancement]]<br />
<br />
=== Mobile web development ===<br />
<br />
# [[Introduction_to_mobile_web|Mobile 1: Introduction to mobile web]]<br />
<br />
=== Supplementary articles ===<br />
<br />
* [[Getting your content online]]<br />
* [[Common HTML entities used for typography]]<br />
* [[The web standards curriculum glossary]]<br />
<br />
=== Proposed Updates and Additions to Web Standards Curriculum ===<br />
<br />
* [[WSC_proposed_updates|Web standards curriculum on W3C Wiki: plan for updates 2011]]<br />
<br />
[[Category:Tutorials]]<br />
[[Category:WSC]]</div>Cmillshttps://www.w3.org/wiki/index.php?title=Web_Standards_Curriculum&diff=55514Web Standards Curriculum2011-11-17T16:58:43Z<p>Cmills: /* The HTML body */</p>
<hr />
<div>NOTE: THE MATERIAL ON THIS WIKI PAGE IS BEING MIGRATED ONTO THE WEB EDUCATION COMMUNITY GROUP'S DEDICATED WIKI PAGE, AT http://www.w3.org/community/webed/wiki/Main_Page. ITEMS MARKED WITH (MOVED) HAVE ALREADY BEEN MOVED.<br />
<br />
= Web Standards Curriculum table of contents =<br />
<br />
== Introduction ==<br />
<br />
What follows is a list of all the articles within the web standards curriculum, which will give you an essential grounding in HTML5, CSS, JavaScript, accessibility, and the other topics you need to be a modern web developer/designer. Reading them in order makes the most sense, but they are written to work individually, so you can dip in and out as it suits you, if you need to hone individual skills.<br />
<br />
Note: This material was originally published as part of the Opera Web Standards Curriculum, available as [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/#toc Introductory material], written by Chris Mills. Like the original, it is published under the [http://creativecommons.org/licenses/by-nc-sa/2.5/ Creative Commons Attribution, Non Commercial - Share Alike 2.5] license.<br />
<br />
Note #2: Many of the links below currently point to the [http://dev.opera.com dev.opera] versions, but we'll change these over to the W3C versions as we add more to the site. We are very happy to add these to the W3C pages, for a wider readership and more maintenance help.<br />
<br />
== Table of contents ==<br />
<br />
=== The beginning ===<br />
<br />
(MOVED)[[Introduction to the Web Standards Curriculum]]. [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-he/ Hebrew translation] | [http://dev.opera.com/articles/view/1-bevezeto-a-webes-szabvanyokba/ Hungarian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-it/ Italian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/ Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/ Spanish translation]<br />
<br />
=== Introduction to the world of web standards ===<br />
<br />
# (MOVED) [[The history of the Web|The history of the Internet and the web, and the evolution of web standards]]. [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-he/ Hebrew translation] | [http://dev.opera.com/articles/view/2-az-internet-es-a-web-tortenete/ Hungarian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-it/ Italian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud1/index.html Spanish translation]<br />
# (MOVED) [[How does the Internet work]]? [http://dev.opera.com/articles/view/3-hogyan-mukodik-az-internet/ Hungarian translation] | [http://dev.opera.com/articles/view/3-how-does-the-internet-work-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud2/index.html Spanish translation]<br />
# (MOVED) [[The web standards model - HTML CSS and JavaScript]]. [http://dev.opera.com/articles/view/4-a-webes-szabvanyok-modellje/ Hungarian translation] | [http://dev.opera.com/articles/view/4-the-web-standards-model-html-css-a-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud3/index.html Spanish translation]<br />
<br />
=== Web Design Concepts ===<br />
<br />
This section won't go into any code or markup details, and will act as an introduction to the design process before you start to create any graphics or code, as well as concepts of web design such as IA, navigation, usability etc.<br />
<br />
# (MOVED) [[Information_Architecture_-_planning_out_a_web_site|Information Architecture - planning out a web site]]. [http://dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud1/index.html Spanish translation]<br />
# (MOVED) [[What_does_a_good_web_page_need|What does a good web page need?]] [http://dev.opera.com/articles/view/7-mi-kell-egy-jo-weblaphoz/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud2/index.html Spanish translation]<br />
# (MOVED) [[Colour_theory|Colour Theory]]. [http://dev.opera.com/articles/view/8-a-szinek-elmelete/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud3/index.html Spanish translation]<br />
# (MOVED) [[Building up a site wireframe]]. [http://dev.opera.com/articles/view/9-egy-site-keretenek-felepitese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud4/index.html Spanish translation] <br />
# (MOVED) [[Colour schemes and design mockups]]. [http://dev.opera.com/articles/view/10-szinsemak-es-designtervek/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud5/index.html Spanish translation]<br />
# (MOVED) [[Typography on the Web]]. [http://dev.opera.com/articles/view/11-tipografia-a-weben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud6/index.html Spanish translation]<br />
<br />
=== HTML beginnings ===<br />
<br />
# (MOVED) [[The basics of HTML]]. [http://dev.opera.com/articles/view/12-a-html-alapjai/ Hungarian translation] | [http://dev.opera.com/articles/view/12-the-basics-of-html-ja/ Japanese translation]<br />
# (MOVED) [[Doctypes and markup styles]]<br />
# (MOVED) [[The_HTML_head_element|The HTML &lt;head&gt; element]]. [http://dev.opera.com/articles/view/13-a-html-head-eleme/ Hungarian translation] | [http://dev.opera.com/articles/view/13-the-html-head-element-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m3/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m3/ud1/index.html Spanish translation]<br />
# (MOVED) [[More_about_the_document_head|More about the document &lt;head&gt;]]<br />
<br />
=== The HTML body ===<br />
<br />
# (MOVED) [[Marking up textual content in HTML]]. [http://dev.opera.com/articles/view/15-szoveges-reszek-megjelolese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud1/index.html Spanish translation]<br />
# (MOVED) [[HTML lists|HTML Lists]]. [http://dev.opera.com/articles/view/16-html-listak/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud2/index.html Spanish translation]<br />
# (MOVED) [[Images in HTML]]. [http://dev.opera.com/articles/view/17-kepek-a-htmlben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud3/index.html Spanish translation]<br />
# (MOVED) [[HTML_links_-_lets_build_a_web|HTML links — let's build a web!]] [http://dev.opera.com/articles/view/18-html-hivatkozasok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud4/index.html Spanish translation]<br />
# (MOVED) [[HTML tables]]. [http://dev.opera.com/articles/view/19-html-tablazatok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud5/index.html Spanish translation]<br />
# (MOVED) [[HTML forms - the basics]]. [http://dev.opera.com/articles/view/20-html-urlapok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud6/index.html Spanish translation]<br />
# (MOVED) [[HTML5 form additions]]<br />
# (MOVED) [[HTML structural elements]]<br />
# (MOVED) [[Lesser - known semantic elements]]. [http://dev.opera.com/articles/view/21-kevesse-ismert/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Spanish translation]<br />
# (MOVED) [[Creating multiple pages with navigation menus]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud9/index.html Spanish translation]<br />
# (MOVED) [[Validating your HTML]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud10/index.html Spanish translation]<br />
<br />
=== Accessibility ===<br />
<br />
# [[Accessibility basics]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud1/index.html Spanish translation]<br />
# [[Accessibility testing]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud2/index.html Spanish translation]<br />
<br />
=== CSS ===<br />
<br />
# [[CSS_basics|CSS basics]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud1/index.html Spanish translation]<br />
# [[Inheritance and cascade]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud2/index.html Spanish translation]<br />
# [[Text styling with CSS]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud3/index.html Spanish translation]<br />
# [[The_CSS_layout_model_-_boxes_borders_margins_padding|The CSS layout model - boxes, borders, margins, padding]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud4/index.html Spanish translation]<br />
# [[CSS background images]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud5/index.html Spanish translation]<br />
# [[Styling_lists_and_links|Styling lists and links]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud6/index.html Spanish translation]<br />
# [[Styling tables]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html Spanish translation]<br />
# [[Styling forms]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud8/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud8/index.html Spanish translation]<br />
# [[Floats and clearing]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud9/index.html Spanish translation]<br />
# [[CSS static and relative positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud10/index.html Spanish translation]<br />
# [[CSS absolute and fixed positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud11/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud11/index.html | Spanish translation]<br />
# [[Debugging CSS]]<br />
<br />
=== Advanced CSS study ===<br />
<br />
# [[Headers_footers_columns_and_templates|Headers, footers, columns, and templates]]. [http://mosaic.uoc.edu/ac/le/ca/m7/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m7/ud1/index.html Spanish translation]<br />
<br />
=== JavaScript core skills ===<br />
<br />
# [[Programming_-_the_real_basics|Programming - the real basics!]]<br />
# [[What can you do with JavaScript]]<br />
# [[Your first look at JavaScript]]<br />
# [[JavaScript best practices]]<br />
# [[The principles of unobtrusive JavaScript]]<br />
# [[JavaScript functions]]<br />
# [[Objects in JavaScript]]<br />
# [[Traversing the DOM]]<br />
# [[Creating and modifying HTML]]<br />
# [[Dynamic style - manipulating CSS with JavaScript]]<br />
# [[Handling events with JavaScript]]<br />
# [[JavaScript animation]]<br />
# [[Graceful degredation versus progressive enhancement]]<br />
<br />
=== Mobile web development ===<br />
<br />
# [[Introduction_to_mobile_web|Mobile 1: Introduction to mobile web]]<br />
<br />
=== Supplementary articles ===<br />
<br />
* [[Getting your content online]]<br />
* [[Common HTML entities used for typography]]<br />
* [[The web standards curriculum glossary]]<br />
<br />
=== Proposed Updates and Additions to Web Standards Curriculum ===<br />
<br />
* [[WSC_proposed_updates|Web standards curriculum on W3C Wiki: plan for updates 2011]]<br />
<br />
[[Category:Tutorials]]<br />
[[Category:WSC]]</div>Cmillshttps://www.w3.org/wiki/index.php?title=Web_Standards_Curriculum&diff=55512Web Standards Curriculum2011-11-17T16:53:47Z<p>Cmills: /* The HTML body */</p>
<hr />
<div>NOTE: THE MATERIAL ON THIS WIKI PAGE IS BEING MIGRATED ONTO THE WEB EDUCATION COMMUNITY GROUP'S DEDICATED WIKI PAGE, AT http://www.w3.org/community/webed/wiki/Main_Page. ITEMS MARKED WITH (MOVED) HAVE ALREADY BEEN MOVED.<br />
<br />
= Web Standards Curriculum table of contents =<br />
<br />
== Introduction ==<br />
<br />
What follows is a list of all the articles within the web standards curriculum, which will give you an essential grounding in HTML5, CSS, JavaScript, accessibility, and the other topics you need to be a modern web developer/designer. Reading them in order makes the most sense, but they are written to work individually, so you can dip in and out as it suits you, if you need to hone individual skills.<br />
<br />
Note: This material was originally published as part of the Opera Web Standards Curriculum, available as [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/#toc Introductory material], written by Chris Mills. Like the original, it is published under the [http://creativecommons.org/licenses/by-nc-sa/2.5/ Creative Commons Attribution, Non Commercial - Share Alike 2.5] license.<br />
<br />
Note #2: Many of the links below currently point to the [http://dev.opera.com dev.opera] versions, but we'll change these over to the W3C versions as we add more to the site. We are very happy to add these to the W3C pages, for a wider readership and more maintenance help.<br />
<br />
== Table of contents ==<br />
<br />
=== The beginning ===<br />
<br />
(MOVED)[[Introduction to the Web Standards Curriculum]]. [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-he/ Hebrew translation] | [http://dev.opera.com/articles/view/1-bevezeto-a-webes-szabvanyokba/ Hungarian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-it/ Italian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/ Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/ Spanish translation]<br />
<br />
=== Introduction to the world of web standards ===<br />
<br />
# (MOVED) [[The history of the Web|The history of the Internet and the web, and the evolution of web standards]]. [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-he/ Hebrew translation] | [http://dev.opera.com/articles/view/2-az-internet-es-a-web-tortenete/ Hungarian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-it/ Italian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud1/index.html Spanish translation]<br />
# (MOVED) [[How does the Internet work]]? [http://dev.opera.com/articles/view/3-hogyan-mukodik-az-internet/ Hungarian translation] | [http://dev.opera.com/articles/view/3-how-does-the-internet-work-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud2/index.html Spanish translation]<br />
# (MOVED) [[The web standards model - HTML CSS and JavaScript]]. [http://dev.opera.com/articles/view/4-a-webes-szabvanyok-modellje/ Hungarian translation] | [http://dev.opera.com/articles/view/4-the-web-standards-model-html-css-a-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud3/index.html Spanish translation]<br />
<br />
=== Web Design Concepts ===<br />
<br />
This section won't go into any code or markup details, and will act as an introduction to the design process before you start to create any graphics or code, as well as concepts of web design such as IA, navigation, usability etc.<br />
<br />
# (MOVED) [[Information_Architecture_-_planning_out_a_web_site|Information Architecture - planning out a web site]]. [http://dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud1/index.html Spanish translation]<br />
# (MOVED) [[What_does_a_good_web_page_need|What does a good web page need?]] [http://dev.opera.com/articles/view/7-mi-kell-egy-jo-weblaphoz/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud2/index.html Spanish translation]<br />
# (MOVED) [[Colour_theory|Colour Theory]]. [http://dev.opera.com/articles/view/8-a-szinek-elmelete/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud3/index.html Spanish translation]<br />
# (MOVED) [[Building up a site wireframe]]. [http://dev.opera.com/articles/view/9-egy-site-keretenek-felepitese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud4/index.html Spanish translation] <br />
# (MOVED) [[Colour schemes and design mockups]]. [http://dev.opera.com/articles/view/10-szinsemak-es-designtervek/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud5/index.html Spanish translation]<br />
# (MOVED) [[Typography on the Web]]. [http://dev.opera.com/articles/view/11-tipografia-a-weben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud6/index.html Spanish translation]<br />
<br />
=== HTML beginnings ===<br />
<br />
# (MOVED) [[The basics of HTML]]. [http://dev.opera.com/articles/view/12-a-html-alapjai/ Hungarian translation] | [http://dev.opera.com/articles/view/12-the-basics-of-html-ja/ Japanese translation]<br />
# (MOVED) [[Doctypes and markup styles]]<br />
# (MOVED) [[The_HTML_head_element|The HTML &lt;head&gt; element]]. [http://dev.opera.com/articles/view/13-a-html-head-eleme/ Hungarian translation] | [http://dev.opera.com/articles/view/13-the-html-head-element-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m3/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m3/ud1/index.html Spanish translation]<br />
# (MOVED) [[More_about_the_document_head|More about the document &lt;head&gt;]]<br />
<br />
=== The HTML body ===<br />
<br />
# (MOVED) [[Marking up textual content in HTML]]. [http://dev.opera.com/articles/view/15-szoveges-reszek-megjelolese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud1/index.html Spanish translation]<br />
# (MOVED) [[HTML lists|HTML Lists]]. [http://dev.opera.com/articles/view/16-html-listak/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud2/index.html Spanish translation]<br />
# (MOVED) [[Images in HTML]]. [http://dev.opera.com/articles/view/17-kepek-a-htmlben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud3/index.html Spanish translation]<br />
# (MOVED) [[HTML_links_-_lets_build_a_web|HTML links — let's build a web!]] [http://dev.opera.com/articles/view/18-html-hivatkozasok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud4/index.html Spanish translation]<br />
# (MOVED) [[HTML tables]]. [http://dev.opera.com/articles/view/19-html-tablazatok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud5/index.html Spanish translation]<br />
# (MOVED) [[HTML forms - the basics]]. [http://dev.opera.com/articles/view/20-html-urlapok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud6/index.html Spanish translation]<br />
# (MOVED) [[HTML5 form additions]]<br />
# (MOVED) [[HTML structural elements]]<br />
# (MOVED) [[Lesser - known semantic elements]]. [http://dev.opera.com/articles/view/21-kevesse-ismert/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Spanish translation]<br />
# (MOVED) [[Creating multiple pages with navigation menus]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud9/index.html Spanish translation]<br />
# [[Validating your HTML]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud10/index.html Spanish translation]<br />
<br />
=== Accessibility ===<br />
<br />
# [[Accessibility basics]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud1/index.html Spanish translation]<br />
# [[Accessibility testing]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud2/index.html Spanish translation]<br />
<br />
=== CSS ===<br />
<br />
# [[CSS_basics|CSS basics]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud1/index.html Spanish translation]<br />
# [[Inheritance and cascade]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud2/index.html Spanish translation]<br />
# [[Text styling with CSS]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud3/index.html Spanish translation]<br />
# [[The_CSS_layout_model_-_boxes_borders_margins_padding|The CSS layout model - boxes, borders, margins, padding]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud4/index.html Spanish translation]<br />
# [[CSS background images]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud5/index.html Spanish translation]<br />
# [[Styling_lists_and_links|Styling lists and links]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud6/index.html Spanish translation]<br />
# [[Styling tables]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html Spanish translation]<br />
# [[Styling forms]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud8/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud8/index.html Spanish translation]<br />
# [[Floats and clearing]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud9/index.html Spanish translation]<br />
# [[CSS static and relative positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud10/index.html Spanish translation]<br />
# [[CSS absolute and fixed positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud11/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud11/index.html | Spanish translation]<br />
# [[Debugging CSS]]<br />
<br />
=== Advanced CSS study ===<br />
<br />
# [[Headers_footers_columns_and_templates|Headers, footers, columns, and templates]]. [http://mosaic.uoc.edu/ac/le/ca/m7/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m7/ud1/index.html Spanish translation]<br />
<br />
=== JavaScript core skills ===<br />
<br />
# [[Programming_-_the_real_basics|Programming - the real basics!]]<br />
# [[What can you do with JavaScript]]<br />
# [[Your first look at JavaScript]]<br />
# [[JavaScript best practices]]<br />
# [[The principles of unobtrusive JavaScript]]<br />
# [[JavaScript functions]]<br />
# [[Objects in JavaScript]]<br />
# [[Traversing the DOM]]<br />
# [[Creating and modifying HTML]]<br />
# [[Dynamic style - manipulating CSS with JavaScript]]<br />
# [[Handling events with JavaScript]]<br />
# [[JavaScript animation]]<br />
# [[Graceful degredation versus progressive enhancement]]<br />
<br />
=== Mobile web development ===<br />
<br />
# [[Introduction_to_mobile_web|Mobile 1: Introduction to mobile web]]<br />
<br />
=== Supplementary articles ===<br />
<br />
* [[Getting your content online]]<br />
* [[Common HTML entities used for typography]]<br />
* [[The web standards curriculum glossary]]<br />
<br />
=== Proposed Updates and Additions to Web Standards Curriculum ===<br />
<br />
* [[WSC_proposed_updates|Web standards curriculum on W3C Wiki: plan for updates 2011]]<br />
<br />
[[Category:Tutorials]]<br />
[[Category:WSC]]</div>Cmillshttps://www.w3.org/wiki/index.php?title=Web_Standards_Curriculum&diff=55511Web Standards Curriculum2011-11-17T16:45:05Z<p>Cmills: /* The HTML body */</p>
<hr />
<div>NOTE: THE MATERIAL ON THIS WIKI PAGE IS BEING MIGRATED ONTO THE WEB EDUCATION COMMUNITY GROUP'S DEDICATED WIKI PAGE, AT http://www.w3.org/community/webed/wiki/Main_Page. ITEMS MARKED WITH (MOVED) HAVE ALREADY BEEN MOVED.<br />
<br />
= Web Standards Curriculum table of contents =<br />
<br />
== Introduction ==<br />
<br />
What follows is a list of all the articles within the web standards curriculum, which will give you an essential grounding in HTML5, CSS, JavaScript, accessibility, and the other topics you need to be a modern web developer/designer. Reading them in order makes the most sense, but they are written to work individually, so you can dip in and out as it suits you, if you need to hone individual skills.<br />
<br />
Note: This material was originally published as part of the Opera Web Standards Curriculum, available as [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/#toc Introductory material], written by Chris Mills. Like the original, it is published under the [http://creativecommons.org/licenses/by-nc-sa/2.5/ Creative Commons Attribution, Non Commercial - Share Alike 2.5] license.<br />
<br />
Note #2: Many of the links below currently point to the [http://dev.opera.com dev.opera] versions, but we'll change these over to the W3C versions as we add more to the site. We are very happy to add these to the W3C pages, for a wider readership and more maintenance help.<br />
<br />
== Table of contents ==<br />
<br />
=== The beginning ===<br />
<br />
(MOVED)[[Introduction to the Web Standards Curriculum]]. [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-he/ Hebrew translation] | [http://dev.opera.com/articles/view/1-bevezeto-a-webes-szabvanyokba/ Hungarian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-it/ Italian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/ Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/ Spanish translation]<br />
<br />
=== Introduction to the world of web standards ===<br />
<br />
# (MOVED) [[The history of the Web|The history of the Internet and the web, and the evolution of web standards]]. [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-he/ Hebrew translation] | [http://dev.opera.com/articles/view/2-az-internet-es-a-web-tortenete/ Hungarian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-it/ Italian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud1/index.html Spanish translation]<br />
# (MOVED) [[How does the Internet work]]? [http://dev.opera.com/articles/view/3-hogyan-mukodik-az-internet/ Hungarian translation] | [http://dev.opera.com/articles/view/3-how-does-the-internet-work-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud2/index.html Spanish translation]<br />
# (MOVED) [[The web standards model - HTML CSS and JavaScript]]. [http://dev.opera.com/articles/view/4-a-webes-szabvanyok-modellje/ Hungarian translation] | [http://dev.opera.com/articles/view/4-the-web-standards-model-html-css-a-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud3/index.html Spanish translation]<br />
<br />
=== Web Design Concepts ===<br />
<br />
This section won't go into any code or markup details, and will act as an introduction to the design process before you start to create any graphics or code, as well as concepts of web design such as IA, navigation, usability etc.<br />
<br />
# (MOVED) [[Information_Architecture_-_planning_out_a_web_site|Information Architecture - planning out a web site]]. [http://dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud1/index.html Spanish translation]<br />
# (MOVED) [[What_does_a_good_web_page_need|What does a good web page need?]] [http://dev.opera.com/articles/view/7-mi-kell-egy-jo-weblaphoz/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud2/index.html Spanish translation]<br />
# (MOVED) [[Colour_theory|Colour Theory]]. [http://dev.opera.com/articles/view/8-a-szinek-elmelete/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud3/index.html Spanish translation]<br />
# (MOVED) [[Building up a site wireframe]]. [http://dev.opera.com/articles/view/9-egy-site-keretenek-felepitese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud4/index.html Spanish translation] <br />
# (MOVED) [[Colour schemes and design mockups]]. [http://dev.opera.com/articles/view/10-szinsemak-es-designtervek/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud5/index.html Spanish translation]<br />
# (MOVED) [[Typography on the Web]]. [http://dev.opera.com/articles/view/11-tipografia-a-weben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud6/index.html Spanish translation]<br />
<br />
=== HTML beginnings ===<br />
<br />
# (MOVED) [[The basics of HTML]]. [http://dev.opera.com/articles/view/12-a-html-alapjai/ Hungarian translation] | [http://dev.opera.com/articles/view/12-the-basics-of-html-ja/ Japanese translation]<br />
# (MOVED) [[Doctypes and markup styles]]<br />
# (MOVED) [[The_HTML_head_element|The HTML &lt;head&gt; element]]. [http://dev.opera.com/articles/view/13-a-html-head-eleme/ Hungarian translation] | [http://dev.opera.com/articles/view/13-the-html-head-element-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m3/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m3/ud1/index.html Spanish translation]<br />
# (MOVED) [[More_about_the_document_head|More about the document &lt;head&gt;]]<br />
<br />
=== The HTML body ===<br />
<br />
# (MOVED) [[Marking up textual content in HTML]]. [http://dev.opera.com/articles/view/15-szoveges-reszek-megjelolese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud1/index.html Spanish translation]<br />
# (MOVED) [[HTML lists|HTML Lists]]. [http://dev.opera.com/articles/view/16-html-listak/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud2/index.html Spanish translation]<br />
# (MOVED) [[Images in HTML]]. [http://dev.opera.com/articles/view/17-kepek-a-htmlben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud3/index.html Spanish translation]<br />
# (MOVED) [[HTML_links_-_lets_build_a_web|HTML links — let's build a web!]] [http://dev.opera.com/articles/view/18-html-hivatkozasok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud4/index.html Spanish translation]<br />
# (MOVED) [[HTML tables]]. [http://dev.opera.com/articles/view/19-html-tablazatok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud5/index.html Spanish translation]<br />
# (MOVED) [[HTML forms - the basics]]. [http://dev.opera.com/articles/view/20-html-urlapok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud6/index.html Spanish translation]<br />
# (MOVED) [[HTML5 form additions]]<br />
# (MOVED) [[HTML structural elements]]<br />
# (MOVED) [[Lesser - known semantic elements]]. [http://dev.opera.com/articles/view/21-kevesse-ismert/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Spanish translation]<br />
# [[Creating multiple pages with navigation menus]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud9/index.html Spanish translation]<br />
# [[Validating your HTML]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud10/index.html Spanish translation]<br />
<br />
=== Accessibility ===<br />
<br />
# [[Accessibility basics]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud1/index.html Spanish translation]<br />
# [[Accessibility testing]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud2/index.html Spanish translation]<br />
<br />
=== CSS ===<br />
<br />
# [[CSS_basics|CSS basics]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud1/index.html Spanish translation]<br />
# [[Inheritance and cascade]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud2/index.html Spanish translation]<br />
# [[Text styling with CSS]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud3/index.html Spanish translation]<br />
# [[The_CSS_layout_model_-_boxes_borders_margins_padding|The CSS layout model - boxes, borders, margins, padding]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud4/index.html Spanish translation]<br />
# [[CSS background images]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud5/index.html Spanish translation]<br />
# [[Styling_lists_and_links|Styling lists and links]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud6/index.html Spanish translation]<br />
# [[Styling tables]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html Spanish translation]<br />
# [[Styling forms]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud8/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud8/index.html Spanish translation]<br />
# [[Floats and clearing]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud9/index.html Spanish translation]<br />
# [[CSS static and relative positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud10/index.html Spanish translation]<br />
# [[CSS absolute and fixed positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud11/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud11/index.html | Spanish translation]<br />
# [[Debugging CSS]]<br />
<br />
=== Advanced CSS study ===<br />
<br />
# [[Headers_footers_columns_and_templates|Headers, footers, columns, and templates]]. [http://mosaic.uoc.edu/ac/le/ca/m7/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m7/ud1/index.html Spanish translation]<br />
<br />
=== JavaScript core skills ===<br />
<br />
# [[Programming_-_the_real_basics|Programming - the real basics!]]<br />
# [[What can you do with JavaScript]]<br />
# [[Your first look at JavaScript]]<br />
# [[JavaScript best practices]]<br />
# [[The principles of unobtrusive JavaScript]]<br />
# [[JavaScript functions]]<br />
# [[Objects in JavaScript]]<br />
# [[Traversing the DOM]]<br />
# [[Creating and modifying HTML]]<br />
# [[Dynamic style - manipulating CSS with JavaScript]]<br />
# [[Handling events with JavaScript]]<br />
# [[JavaScript animation]]<br />
# [[Graceful degredation versus progressive enhancement]]<br />
<br />
=== Mobile web development ===<br />
<br />
# [[Introduction_to_mobile_web|Mobile 1: Introduction to mobile web]]<br />
<br />
=== Supplementary articles ===<br />
<br />
* [[Getting your content online]]<br />
* [[Common HTML entities used for typography]]<br />
* [[The web standards curriculum glossary]]<br />
<br />
=== Proposed Updates and Additions to Web Standards Curriculum ===<br />
<br />
* [[WSC_proposed_updates|Web standards curriculum on W3C Wiki: plan for updates 2011]]<br />
<br />
[[Category:Tutorials]]<br />
[[Category:WSC]]</div>Cmillshttps://www.w3.org/wiki/index.php?title=Web_Standards_Curriculum&diff=55510Web Standards Curriculum2011-11-17T16:41:53Z<p>Cmills: /* The HTML body */</p>
<hr />
<div>NOTE: THE MATERIAL ON THIS WIKI PAGE IS BEING MIGRATED ONTO THE WEB EDUCATION COMMUNITY GROUP'S DEDICATED WIKI PAGE, AT http://www.w3.org/community/webed/wiki/Main_Page. ITEMS MARKED WITH (MOVED) HAVE ALREADY BEEN MOVED.<br />
<br />
= Web Standards Curriculum table of contents =<br />
<br />
== Introduction ==<br />
<br />
What follows is a list of all the articles within the web standards curriculum, which will give you an essential grounding in HTML5, CSS, JavaScript, accessibility, and the other topics you need to be a modern web developer/designer. Reading them in order makes the most sense, but they are written to work individually, so you can dip in and out as it suits you, if you need to hone individual skills.<br />
<br />
Note: This material was originally published as part of the Opera Web Standards Curriculum, available as [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/#toc Introductory material], written by Chris Mills. Like the original, it is published under the [http://creativecommons.org/licenses/by-nc-sa/2.5/ Creative Commons Attribution, Non Commercial - Share Alike 2.5] license.<br />
<br />
Note #2: Many of the links below currently point to the [http://dev.opera.com dev.opera] versions, but we'll change these over to the W3C versions as we add more to the site. We are very happy to add these to the W3C pages, for a wider readership and more maintenance help.<br />
<br />
== Table of contents ==<br />
<br />
=== The beginning ===<br />
<br />
(MOVED)[[Introduction to the Web Standards Curriculum]]. [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-he/ Hebrew translation] | [http://dev.opera.com/articles/view/1-bevezeto-a-webes-szabvanyokba/ Hungarian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-it/ Italian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/ Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/ Spanish translation]<br />
<br />
=== Introduction to the world of web standards ===<br />
<br />
# (MOVED) [[The history of the Web|The history of the Internet and the web, and the evolution of web standards]]. [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-he/ Hebrew translation] | [http://dev.opera.com/articles/view/2-az-internet-es-a-web-tortenete/ Hungarian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-it/ Italian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud1/index.html Spanish translation]<br />
# (MOVED) [[How does the Internet work]]? [http://dev.opera.com/articles/view/3-hogyan-mukodik-az-internet/ Hungarian translation] | [http://dev.opera.com/articles/view/3-how-does-the-internet-work-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud2/index.html Spanish translation]<br />
# (MOVED) [[The web standards model - HTML CSS and JavaScript]]. [http://dev.opera.com/articles/view/4-a-webes-szabvanyok-modellje/ Hungarian translation] | [http://dev.opera.com/articles/view/4-the-web-standards-model-html-css-a-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud3/index.html Spanish translation]<br />
<br />
=== Web Design Concepts ===<br />
<br />
This section won't go into any code or markup details, and will act as an introduction to the design process before you start to create any graphics or code, as well as concepts of web design such as IA, navigation, usability etc.<br />
<br />
# (MOVED) [[Information_Architecture_-_planning_out_a_web_site|Information Architecture - planning out a web site]]. [http://dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud1/index.html Spanish translation]<br />
# (MOVED) [[What_does_a_good_web_page_need|What does a good web page need?]] [http://dev.opera.com/articles/view/7-mi-kell-egy-jo-weblaphoz/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud2/index.html Spanish translation]<br />
# (MOVED) [[Colour_theory|Colour Theory]]. [http://dev.opera.com/articles/view/8-a-szinek-elmelete/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud3/index.html Spanish translation]<br />
# (MOVED) [[Building up a site wireframe]]. [http://dev.opera.com/articles/view/9-egy-site-keretenek-felepitese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud4/index.html Spanish translation] <br />
# (MOVED) [[Colour schemes and design mockups]]. [http://dev.opera.com/articles/view/10-szinsemak-es-designtervek/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud5/index.html Spanish translation]<br />
# (MOVED) [[Typography on the Web]]. [http://dev.opera.com/articles/view/11-tipografia-a-weben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud6/index.html Spanish translation]<br />
<br />
=== HTML beginnings ===<br />
<br />
# (MOVED) [[The basics of HTML]]. [http://dev.opera.com/articles/view/12-a-html-alapjai/ Hungarian translation] | [http://dev.opera.com/articles/view/12-the-basics-of-html-ja/ Japanese translation]<br />
# (MOVED) [[Doctypes and markup styles]]<br />
# (MOVED) [[The_HTML_head_element|The HTML &lt;head&gt; element]]. [http://dev.opera.com/articles/view/13-a-html-head-eleme/ Hungarian translation] | [http://dev.opera.com/articles/view/13-the-html-head-element-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m3/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m3/ud1/index.html Spanish translation]<br />
# (MOVED) [[More_about_the_document_head|More about the document &lt;head&gt;]]<br />
<br />
=== The HTML body ===<br />
<br />
# (MOVED) [[Marking up textual content in HTML]]. [http://dev.opera.com/articles/view/15-szoveges-reszek-megjelolese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud1/index.html Spanish translation]<br />
# (MOVED) [[HTML lists|HTML Lists]]. [http://dev.opera.com/articles/view/16-html-listak/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud2/index.html Spanish translation]<br />
# (MOVED) [[Images in HTML]]. [http://dev.opera.com/articles/view/17-kepek-a-htmlben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud3/index.html Spanish translation]<br />
# (MOVED) [[HTML_links_-_lets_build_a_web|HTML links — let's build a web!]] [http://dev.opera.com/articles/view/18-html-hivatkozasok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud4/index.html Spanish translation]<br />
# (MOVED) [[HTML tables]]. [http://dev.opera.com/articles/view/19-html-tablazatok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud5/index.html Spanish translation]<br />
# (MOVED) [[HTML forms - the basics]]. [http://dev.opera.com/articles/view/20-html-urlapok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud6/index.html Spanish translation]<br />
# (MOVED) [[HTML5 form additions]]<br />
# (MOVED) [[HTML structural elements]]<br />
# [[Lesser - known semantic elements]]. [http://dev.opera.com/articles/view/21-kevesse-ismert/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Spanish translation]<br />
# [[Creating multiple pages with navigation menus]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud9/index.html Spanish translation]<br />
# [[Validating your HTML]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud10/index.html Spanish translation]<br />
<br />
=== Accessibility ===<br />
<br />
# [[Accessibility basics]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud1/index.html Spanish translation]<br />
# [[Accessibility testing]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud2/index.html Spanish translation]<br />
<br />
=== CSS ===<br />
<br />
# [[CSS_basics|CSS basics]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud1/index.html Spanish translation]<br />
# [[Inheritance and cascade]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud2/index.html Spanish translation]<br />
# [[Text styling with CSS]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud3/index.html Spanish translation]<br />
# [[The_CSS_layout_model_-_boxes_borders_margins_padding|The CSS layout model - boxes, borders, margins, padding]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud4/index.html Spanish translation]<br />
# [[CSS background images]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud5/index.html Spanish translation]<br />
# [[Styling_lists_and_links|Styling lists and links]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud6/index.html Spanish translation]<br />
# [[Styling tables]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html Spanish translation]<br />
# [[Styling forms]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud8/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud8/index.html Spanish translation]<br />
# [[Floats and clearing]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud9/index.html Spanish translation]<br />
# [[CSS static and relative positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud10/index.html Spanish translation]<br />
# [[CSS absolute and fixed positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud11/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud11/index.html | Spanish translation]<br />
# [[Debugging CSS]]<br />
<br />
=== Advanced CSS study ===<br />
<br />
# [[Headers_footers_columns_and_templates|Headers, footers, columns, and templates]]. [http://mosaic.uoc.edu/ac/le/ca/m7/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m7/ud1/index.html Spanish translation]<br />
<br />
=== JavaScript core skills ===<br />
<br />
# [[Programming_-_the_real_basics|Programming - the real basics!]]<br />
# [[What can you do with JavaScript]]<br />
# [[Your first look at JavaScript]]<br />
# [[JavaScript best practices]]<br />
# [[The principles of unobtrusive JavaScript]]<br />
# [[JavaScript functions]]<br />
# [[Objects in JavaScript]]<br />
# [[Traversing the DOM]]<br />
# [[Creating and modifying HTML]]<br />
# [[Dynamic style - manipulating CSS with JavaScript]]<br />
# [[Handling events with JavaScript]]<br />
# [[JavaScript animation]]<br />
# [[Graceful degredation versus progressive enhancement]]<br />
<br />
=== Mobile web development ===<br />
<br />
# [[Introduction_to_mobile_web|Mobile 1: Introduction to mobile web]]<br />
<br />
=== Supplementary articles ===<br />
<br />
* [[Getting your content online]]<br />
* [[Common HTML entities used for typography]]<br />
* [[The web standards curriculum glossary]]<br />
<br />
=== Proposed Updates and Additions to Web Standards Curriculum ===<br />
<br />
* [[WSC_proposed_updates|Web standards curriculum on W3C Wiki: plan for updates 2011]]<br />
<br />
[[Category:Tutorials]]<br />
[[Category:WSC]]</div>Cmillshttps://www.w3.org/wiki/index.php?title=Web_Standards_Curriculum&diff=55509Web Standards Curriculum2011-11-17T16:30:34Z<p>Cmills: /* The HTML body */</p>
<hr />
<div>NOTE: THE MATERIAL ON THIS WIKI PAGE IS BEING MIGRATED ONTO THE WEB EDUCATION COMMUNITY GROUP'S DEDICATED WIKI PAGE, AT http://www.w3.org/community/webed/wiki/Main_Page. ITEMS MARKED WITH (MOVED) HAVE ALREADY BEEN MOVED.<br />
<br />
= Web Standards Curriculum table of contents =<br />
<br />
== Introduction ==<br />
<br />
What follows is a list of all the articles within the web standards curriculum, which will give you an essential grounding in HTML5, CSS, JavaScript, accessibility, and the other topics you need to be a modern web developer/designer. Reading them in order makes the most sense, but they are written to work individually, so you can dip in and out as it suits you, if you need to hone individual skills.<br />
<br />
Note: This material was originally published as part of the Opera Web Standards Curriculum, available as [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/#toc Introductory material], written by Chris Mills. Like the original, it is published under the [http://creativecommons.org/licenses/by-nc-sa/2.5/ Creative Commons Attribution, Non Commercial - Share Alike 2.5] license.<br />
<br />
Note #2: Many of the links below currently point to the [http://dev.opera.com dev.opera] versions, but we'll change these over to the W3C versions as we add more to the site. We are very happy to add these to the W3C pages, for a wider readership and more maintenance help.<br />
<br />
== Table of contents ==<br />
<br />
=== The beginning ===<br />
<br />
(MOVED)[[Introduction to the Web Standards Curriculum]]. [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-he/ Hebrew translation] | [http://dev.opera.com/articles/view/1-bevezeto-a-webes-szabvanyokba/ Hungarian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-it/ Italian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/ Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/ Spanish translation]<br />
<br />
=== Introduction to the world of web standards ===<br />
<br />
# (MOVED) [[The history of the Web|The history of the Internet and the web, and the evolution of web standards]]. [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-he/ Hebrew translation] | [http://dev.opera.com/articles/view/2-az-internet-es-a-web-tortenete/ Hungarian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-it/ Italian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud1/index.html Spanish translation]<br />
# (MOVED) [[How does the Internet work]]? [http://dev.opera.com/articles/view/3-hogyan-mukodik-az-internet/ Hungarian translation] | [http://dev.opera.com/articles/view/3-how-does-the-internet-work-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud2/index.html Spanish translation]<br />
# (MOVED) [[The web standards model - HTML CSS and JavaScript]]. [http://dev.opera.com/articles/view/4-a-webes-szabvanyok-modellje/ Hungarian translation] | [http://dev.opera.com/articles/view/4-the-web-standards-model-html-css-a-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud3/index.html Spanish translation]<br />
<br />
=== Web Design Concepts ===<br />
<br />
This section won't go into any code or markup details, and will act as an introduction to the design process before you start to create any graphics or code, as well as concepts of web design such as IA, navigation, usability etc.<br />
<br />
# (MOVED) [[Information_Architecture_-_planning_out_a_web_site|Information Architecture - planning out a web site]]. [http://dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud1/index.html Spanish translation]<br />
# (MOVED) [[What_does_a_good_web_page_need|What does a good web page need?]] [http://dev.opera.com/articles/view/7-mi-kell-egy-jo-weblaphoz/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud2/index.html Spanish translation]<br />
# (MOVED) [[Colour_theory|Colour Theory]]. [http://dev.opera.com/articles/view/8-a-szinek-elmelete/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud3/index.html Spanish translation]<br />
# (MOVED) [[Building up a site wireframe]]. [http://dev.opera.com/articles/view/9-egy-site-keretenek-felepitese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud4/index.html Spanish translation] <br />
# (MOVED) [[Colour schemes and design mockups]]. [http://dev.opera.com/articles/view/10-szinsemak-es-designtervek/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud5/index.html Spanish translation]<br />
# (MOVED) [[Typography on the Web]]. [http://dev.opera.com/articles/view/11-tipografia-a-weben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud6/index.html Spanish translation]<br />
<br />
=== HTML beginnings ===<br />
<br />
# (MOVED) [[The basics of HTML]]. [http://dev.opera.com/articles/view/12-a-html-alapjai/ Hungarian translation] | [http://dev.opera.com/articles/view/12-the-basics-of-html-ja/ Japanese translation]<br />
# (MOVED) [[Doctypes and markup styles]]<br />
# (MOVED) [[The_HTML_head_element|The HTML &lt;head&gt; element]]. [http://dev.opera.com/articles/view/13-a-html-head-eleme/ Hungarian translation] | [http://dev.opera.com/articles/view/13-the-html-head-element-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m3/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m3/ud1/index.html Spanish translation]<br />
# (MOVED) [[More_about_the_document_head|More about the document &lt;head&gt;]]<br />
<br />
=== The HTML body ===<br />
<br />
# (MOVED) [[Marking up textual content in HTML]]. [http://dev.opera.com/articles/view/15-szoveges-reszek-megjelolese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud1/index.html Spanish translation]<br />
# (MOVED) [[HTML lists|HTML Lists]]. [http://dev.opera.com/articles/view/16-html-listak/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud2/index.html Spanish translation]<br />
# (MOVED) [[Images in HTML]]. [http://dev.opera.com/articles/view/17-kepek-a-htmlben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud3/index.html Spanish translation]<br />
# (MOVED) [[HTML_links_-_lets_build_a_web|HTML links — let's build a web!]] [http://dev.opera.com/articles/view/18-html-hivatkozasok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud4/index.html Spanish translation]<br />
# (MOVED) [[HTML tables]]. [http://dev.opera.com/articles/view/19-html-tablazatok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud5/index.html Spanish translation]<br />
# (MOVED) [[HTML forms - the basics]]. [http://dev.opera.com/articles/view/20-html-urlapok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud6/index.html Spanish translation]<br />
# (MOVED) [[HTML5 form additions]]<br />
# [[HTML structural elements]]<br />
# [[Lesser - known semantic elements]]. [http://dev.opera.com/articles/view/21-kevesse-ismert/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Spanish translation]<br />
# [[Creating multiple pages with navigation menus]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud9/index.html Spanish translation]<br />
# [[Validating your HTML]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud10/index.html Spanish translation]<br />
<br />
=== Accessibility ===<br />
<br />
# [[Accessibility basics]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud1/index.html Spanish translation]<br />
# [[Accessibility testing]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud2/index.html Spanish translation]<br />
<br />
=== CSS ===<br />
<br />
# [[CSS_basics|CSS basics]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud1/index.html Spanish translation]<br />
# [[Inheritance and cascade]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud2/index.html Spanish translation]<br />
# [[Text styling with CSS]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud3/index.html Spanish translation]<br />
# [[The_CSS_layout_model_-_boxes_borders_margins_padding|The CSS layout model - boxes, borders, margins, padding]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud4/index.html Spanish translation]<br />
# [[CSS background images]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud5/index.html Spanish translation]<br />
# [[Styling_lists_and_links|Styling lists and links]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud6/index.html Spanish translation]<br />
# [[Styling tables]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html Spanish translation]<br />
# [[Styling forms]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud8/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud8/index.html Spanish translation]<br />
# [[Floats and clearing]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud9/index.html Spanish translation]<br />
# [[CSS static and relative positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud10/index.html Spanish translation]<br />
# [[CSS absolute and fixed positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud11/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud11/index.html | Spanish translation]<br />
# [[Debugging CSS]]<br />
<br />
=== Advanced CSS study ===<br />
<br />
# [[Headers_footers_columns_and_templates|Headers, footers, columns, and templates]]. [http://mosaic.uoc.edu/ac/le/ca/m7/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m7/ud1/index.html Spanish translation]<br />
<br />
=== JavaScript core skills ===<br />
<br />
# [[Programming_-_the_real_basics|Programming - the real basics!]]<br />
# [[What can you do with JavaScript]]<br />
# [[Your first look at JavaScript]]<br />
# [[JavaScript best practices]]<br />
# [[The principles of unobtrusive JavaScript]]<br />
# [[JavaScript functions]]<br />
# [[Objects in JavaScript]]<br />
# [[Traversing the DOM]]<br />
# [[Creating and modifying HTML]]<br />
# [[Dynamic style - manipulating CSS with JavaScript]]<br />
# [[Handling events with JavaScript]]<br />
# [[JavaScript animation]]<br />
# [[Graceful degredation versus progressive enhancement]]<br />
<br />
=== Mobile web development ===<br />
<br />
# [[Introduction_to_mobile_web|Mobile 1: Introduction to mobile web]]<br />
<br />
=== Supplementary articles ===<br />
<br />
* [[Getting your content online]]<br />
* [[Common HTML entities used for typography]]<br />
* [[The web standards curriculum glossary]]<br />
<br />
=== Proposed Updates and Additions to Web Standards Curriculum ===<br />
<br />
* [[WSC_proposed_updates|Web standards curriculum on W3C Wiki: plan for updates 2011]]<br />
<br />
[[Category:Tutorials]]<br />
[[Category:WSC]]</div>Cmillshttps://www.w3.org/wiki/index.php?title=Web_Standards_Curriculum&diff=55508Web Standards Curriculum2011-11-17T16:22:04Z<p>Cmills: /* The HTML body */</p>
<hr />
<div>NOTE: THE MATERIAL ON THIS WIKI PAGE IS BEING MIGRATED ONTO THE WEB EDUCATION COMMUNITY GROUP'S DEDICATED WIKI PAGE, AT http://www.w3.org/community/webed/wiki/Main_Page. ITEMS MARKED WITH (MOVED) HAVE ALREADY BEEN MOVED.<br />
<br />
= Web Standards Curriculum table of contents =<br />
<br />
== Introduction ==<br />
<br />
What follows is a list of all the articles within the web standards curriculum, which will give you an essential grounding in HTML5, CSS, JavaScript, accessibility, and the other topics you need to be a modern web developer/designer. Reading them in order makes the most sense, but they are written to work individually, so you can dip in and out as it suits you, if you need to hone individual skills.<br />
<br />
Note: This material was originally published as part of the Opera Web Standards Curriculum, available as [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/#toc Introductory material], written by Chris Mills. Like the original, it is published under the [http://creativecommons.org/licenses/by-nc-sa/2.5/ Creative Commons Attribution, Non Commercial - Share Alike 2.5] license.<br />
<br />
Note #2: Many of the links below currently point to the [http://dev.opera.com dev.opera] versions, but we'll change these over to the W3C versions as we add more to the site. We are very happy to add these to the W3C pages, for a wider readership and more maintenance help.<br />
<br />
== Table of contents ==<br />
<br />
=== The beginning ===<br />
<br />
(MOVED)[[Introduction to the Web Standards Curriculum]]. [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-he/ Hebrew translation] | [http://dev.opera.com/articles/view/1-bevezeto-a-webes-szabvanyokba/ Hungarian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-it/ Italian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/ Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/ Spanish translation]<br />
<br />
=== Introduction to the world of web standards ===<br />
<br />
# (MOVED) [[The history of the Web|The history of the Internet and the web, and the evolution of web standards]]. [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-he/ Hebrew translation] | [http://dev.opera.com/articles/view/2-az-internet-es-a-web-tortenete/ Hungarian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-it/ Italian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud1/index.html Spanish translation]<br />
# (MOVED) [[How does the Internet work]]? [http://dev.opera.com/articles/view/3-hogyan-mukodik-az-internet/ Hungarian translation] | [http://dev.opera.com/articles/view/3-how-does-the-internet-work-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud2/index.html Spanish translation]<br />
# (MOVED) [[The web standards model - HTML CSS and JavaScript]]. [http://dev.opera.com/articles/view/4-a-webes-szabvanyok-modellje/ Hungarian translation] | [http://dev.opera.com/articles/view/4-the-web-standards-model-html-css-a-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud3/index.html Spanish translation]<br />
<br />
=== Web Design Concepts ===<br />
<br />
This section won't go into any code or markup details, and will act as an introduction to the design process before you start to create any graphics or code, as well as concepts of web design such as IA, navigation, usability etc.<br />
<br />
# (MOVED) [[Information_Architecture_-_planning_out_a_web_site|Information Architecture - planning out a web site]]. [http://dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud1/index.html Spanish translation]<br />
# (MOVED) [[What_does_a_good_web_page_need|What does a good web page need?]] [http://dev.opera.com/articles/view/7-mi-kell-egy-jo-weblaphoz/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud2/index.html Spanish translation]<br />
# (MOVED) [[Colour_theory|Colour Theory]]. [http://dev.opera.com/articles/view/8-a-szinek-elmelete/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud3/index.html Spanish translation]<br />
# (MOVED) [[Building up a site wireframe]]. [http://dev.opera.com/articles/view/9-egy-site-keretenek-felepitese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud4/index.html Spanish translation] <br />
# (MOVED) [[Colour schemes and design mockups]]. [http://dev.opera.com/articles/view/10-szinsemak-es-designtervek/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud5/index.html Spanish translation]<br />
# (MOVED) [[Typography on the Web]]. [http://dev.opera.com/articles/view/11-tipografia-a-weben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud6/index.html Spanish translation]<br />
<br />
=== HTML beginnings ===<br />
<br />
# (MOVED) [[The basics of HTML]]. [http://dev.opera.com/articles/view/12-a-html-alapjai/ Hungarian translation] | [http://dev.opera.com/articles/view/12-the-basics-of-html-ja/ Japanese translation]<br />
# (MOVED) [[Doctypes and markup styles]]<br />
# (MOVED) [[The_HTML_head_element|The HTML &lt;head&gt; element]]. [http://dev.opera.com/articles/view/13-a-html-head-eleme/ Hungarian translation] | [http://dev.opera.com/articles/view/13-the-html-head-element-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m3/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m3/ud1/index.html Spanish translation]<br />
# (MOVED) [[More_about_the_document_head|More about the document &lt;head&gt;]]<br />
<br />
=== The HTML body ===<br />
<br />
# (MOVED) [[Marking up textual content in HTML]]. [http://dev.opera.com/articles/view/15-szoveges-reszek-megjelolese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud1/index.html Spanish translation]<br />
# (MOVED) [[HTML lists|HTML Lists]]. [http://dev.opera.com/articles/view/16-html-listak/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud2/index.html Spanish translation]<br />
# (MOVED) [[Images in HTML]]. [http://dev.opera.com/articles/view/17-kepek-a-htmlben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud3/index.html Spanish translation]<br />
# (MOVED) [[HTML_links_-_lets_build_a_web|HTML links — let's build a web!]] [http://dev.opera.com/articles/view/18-html-hivatkozasok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud4/index.html Spanish translation]<br />
# (MOVED) [[HTML tables]]. [http://dev.opera.com/articles/view/19-html-tablazatok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud5/index.html Spanish translation]<br />
# (MOVED) [[HTML forms - the basics]]. [http://dev.opera.com/articles/view/20-html-urlapok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud6/index.html Spanish translation]<br />
# [[HTML5 form additions]]<br />
# [[HTML structural elements]]<br />
# [[Lesser - known semantic elements]]. [http://dev.opera.com/articles/view/21-kevesse-ismert/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Spanish translation]<br />
# [[Creating multiple pages with navigation menus]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud9/index.html Spanish translation]<br />
# [[Validating your HTML]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud10/index.html Spanish translation]<br />
<br />
=== Accessibility ===<br />
<br />
# [[Accessibility basics]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud1/index.html Spanish translation]<br />
# [[Accessibility testing]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud2/index.html Spanish translation]<br />
<br />
=== CSS ===<br />
<br />
# [[CSS_basics|CSS basics]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud1/index.html Spanish translation]<br />
# [[Inheritance and cascade]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud2/index.html Spanish translation]<br />
# [[Text styling with CSS]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud3/index.html Spanish translation]<br />
# [[The_CSS_layout_model_-_boxes_borders_margins_padding|The CSS layout model - boxes, borders, margins, padding]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud4/index.html Spanish translation]<br />
# [[CSS background images]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud5/index.html Spanish translation]<br />
# [[Styling_lists_and_links|Styling lists and links]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud6/index.html Spanish translation]<br />
# [[Styling tables]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html Spanish translation]<br />
# [[Styling forms]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud8/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud8/index.html Spanish translation]<br />
# [[Floats and clearing]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud9/index.html Spanish translation]<br />
# [[CSS static and relative positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud10/index.html Spanish translation]<br />
# [[CSS absolute and fixed positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud11/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud11/index.html | Spanish translation]<br />
# [[Debugging CSS]]<br />
<br />
=== Advanced CSS study ===<br />
<br />
# [[Headers_footers_columns_and_templates|Headers, footers, columns, and templates]]. [http://mosaic.uoc.edu/ac/le/ca/m7/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m7/ud1/index.html Spanish translation]<br />
<br />
=== JavaScript core skills ===<br />
<br />
# [[Programming_-_the_real_basics|Programming - the real basics!]]<br />
# [[What can you do with JavaScript]]<br />
# [[Your first look at JavaScript]]<br />
# [[JavaScript best practices]]<br />
# [[The principles of unobtrusive JavaScript]]<br />
# [[JavaScript functions]]<br />
# [[Objects in JavaScript]]<br />
# [[Traversing the DOM]]<br />
# [[Creating and modifying HTML]]<br />
# [[Dynamic style - manipulating CSS with JavaScript]]<br />
# [[Handling events with JavaScript]]<br />
# [[JavaScript animation]]<br />
# [[Graceful degredation versus progressive enhancement]]<br />
<br />
=== Mobile web development ===<br />
<br />
# [[Introduction_to_mobile_web|Mobile 1: Introduction to mobile web]]<br />
<br />
=== Supplementary articles ===<br />
<br />
* [[Getting your content online]]<br />
* [[Common HTML entities used for typography]]<br />
* [[The web standards curriculum glossary]]<br />
<br />
=== Proposed Updates and Additions to Web Standards Curriculum ===<br />
<br />
* [[WSC_proposed_updates|Web standards curriculum on W3C Wiki: plan for updates 2011]]<br />
<br />
[[Category:Tutorials]]<br />
[[Category:WSC]]</div>Cmillshttps://www.w3.org/wiki/index.php?title=Web_Standards_Curriculum&diff=55507Web Standards Curriculum2011-11-17T16:16:54Z<p>Cmills: /* The HTML body */</p>
<hr />
<div>NOTE: THE MATERIAL ON THIS WIKI PAGE IS BEING MIGRATED ONTO THE WEB EDUCATION COMMUNITY GROUP'S DEDICATED WIKI PAGE, AT http://www.w3.org/community/webed/wiki/Main_Page. ITEMS MARKED WITH (MOVED) HAVE ALREADY BEEN MOVED.<br />
<br />
= Web Standards Curriculum table of contents =<br />
<br />
== Introduction ==<br />
<br />
What follows is a list of all the articles within the web standards curriculum, which will give you an essential grounding in HTML5, CSS, JavaScript, accessibility, and the other topics you need to be a modern web developer/designer. Reading them in order makes the most sense, but they are written to work individually, so you can dip in and out as it suits you, if you need to hone individual skills.<br />
<br />
Note: This material was originally published as part of the Opera Web Standards Curriculum, available as [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/#toc Introductory material], written by Chris Mills. Like the original, it is published under the [http://creativecommons.org/licenses/by-nc-sa/2.5/ Creative Commons Attribution, Non Commercial - Share Alike 2.5] license.<br />
<br />
Note #2: Many of the links below currently point to the [http://dev.opera.com dev.opera] versions, but we'll change these over to the W3C versions as we add more to the site. We are very happy to add these to the W3C pages, for a wider readership and more maintenance help.<br />
<br />
== Table of contents ==<br />
<br />
=== The beginning ===<br />
<br />
(MOVED)[[Introduction to the Web Standards Curriculum]]. [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-he/ Hebrew translation] | [http://dev.opera.com/articles/view/1-bevezeto-a-webes-szabvanyokba/ Hungarian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-it/ Italian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/ Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/ Spanish translation]<br />
<br />
=== Introduction to the world of web standards ===<br />
<br />
# (MOVED) [[The history of the Web|The history of the Internet and the web, and the evolution of web standards]]. [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-he/ Hebrew translation] | [http://dev.opera.com/articles/view/2-az-internet-es-a-web-tortenete/ Hungarian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-it/ Italian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud1/index.html Spanish translation]<br />
# (MOVED) [[How does the Internet work]]? [http://dev.opera.com/articles/view/3-hogyan-mukodik-az-internet/ Hungarian translation] | [http://dev.opera.com/articles/view/3-how-does-the-internet-work-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud2/index.html Spanish translation]<br />
# (MOVED) [[The web standards model - HTML CSS and JavaScript]]. [http://dev.opera.com/articles/view/4-a-webes-szabvanyok-modellje/ Hungarian translation] | [http://dev.opera.com/articles/view/4-the-web-standards-model-html-css-a-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud3/index.html Spanish translation]<br />
<br />
=== Web Design Concepts ===<br />
<br />
This section won't go into any code or markup details, and will act as an introduction to the design process before you start to create any graphics or code, as well as concepts of web design such as IA, navigation, usability etc.<br />
<br />
# (MOVED) [[Information_Architecture_-_planning_out_a_web_site|Information Architecture - planning out a web site]]. [http://dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud1/index.html Spanish translation]<br />
# (MOVED) [[What_does_a_good_web_page_need|What does a good web page need?]] [http://dev.opera.com/articles/view/7-mi-kell-egy-jo-weblaphoz/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud2/index.html Spanish translation]<br />
# (MOVED) [[Colour_theory|Colour Theory]]. [http://dev.opera.com/articles/view/8-a-szinek-elmelete/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud3/index.html Spanish translation]<br />
# (MOVED) [[Building up a site wireframe]]. [http://dev.opera.com/articles/view/9-egy-site-keretenek-felepitese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud4/index.html Spanish translation] <br />
# (MOVED) [[Colour schemes and design mockups]]. [http://dev.opera.com/articles/view/10-szinsemak-es-designtervek/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud5/index.html Spanish translation]<br />
# (MOVED) [[Typography on the Web]]. [http://dev.opera.com/articles/view/11-tipografia-a-weben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud6/index.html Spanish translation]<br />
<br />
=== HTML beginnings ===<br />
<br />
# (MOVED) [[The basics of HTML]]. [http://dev.opera.com/articles/view/12-a-html-alapjai/ Hungarian translation] | [http://dev.opera.com/articles/view/12-the-basics-of-html-ja/ Japanese translation]<br />
# (MOVED) [[Doctypes and markup styles]]<br />
# (MOVED) [[The_HTML_head_element|The HTML &lt;head&gt; element]]. [http://dev.opera.com/articles/view/13-a-html-head-eleme/ Hungarian translation] | [http://dev.opera.com/articles/view/13-the-html-head-element-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m3/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m3/ud1/index.html Spanish translation]<br />
# (MOVED) [[More_about_the_document_head|More about the document &lt;head&gt;]]<br />
<br />
=== The HTML body ===<br />
<br />
# (MOVED) [[Marking up textual content in HTML]]. [http://dev.opera.com/articles/view/15-szoveges-reszek-megjelolese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud1/index.html Spanish translation]<br />
# (MOVED) [[HTML lists|HTML Lists]]. [http://dev.opera.com/articles/view/16-html-listak/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud2/index.html Spanish translation]<br />
# (MOVED) [[Images in HTML]]. [http://dev.opera.com/articles/view/17-kepek-a-htmlben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud3/index.html Spanish translation]<br />
# (MOVED) [[HTML_links_-_lets_build_a_web|HTML links — let's build a web!]] [http://dev.opera.com/articles/view/18-html-hivatkozasok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud4/index.html Spanish translation]<br />
# (MOVED) [[HTML tables]]. [http://dev.opera.com/articles/view/19-html-tablazatok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud5/index.html Spanish translation]<br />
# [[HTML forms - the basics]]. [http://dev.opera.com/articles/view/20-html-urlapok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud6/index.html Spanish translation]<br />
# [[HTML5 form additions]]<br />
# [[HTML structural elements]]<br />
# [[Lesser - known semantic elements]]. [http://dev.opera.com/articles/view/21-kevesse-ismert/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Spanish translation]<br />
# [[Creating multiple pages with navigation menus]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud9/index.html Spanish translation]<br />
# [[Validating your HTML]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud10/index.html Spanish translation]<br />
<br />
=== Accessibility ===<br />
<br />
# [[Accessibility basics]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud1/index.html Spanish translation]<br />
# [[Accessibility testing]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud2/index.html Spanish translation]<br />
<br />
=== CSS ===<br />
<br />
# [[CSS_basics|CSS basics]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud1/index.html Spanish translation]<br />
# [[Inheritance and cascade]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud2/index.html Spanish translation]<br />
# [[Text styling with CSS]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud3/index.html Spanish translation]<br />
# [[The_CSS_layout_model_-_boxes_borders_margins_padding|The CSS layout model - boxes, borders, margins, padding]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud4/index.html Spanish translation]<br />
# [[CSS background images]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud5/index.html Spanish translation]<br />
# [[Styling_lists_and_links|Styling lists and links]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud6/index.html Spanish translation]<br />
# [[Styling tables]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html Spanish translation]<br />
# [[Styling forms]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud8/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud8/index.html Spanish translation]<br />
# [[Floats and clearing]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud9/index.html Spanish translation]<br />
# [[CSS static and relative positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud10/index.html Spanish translation]<br />
# [[CSS absolute and fixed positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud11/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud11/index.html | Spanish translation]<br />
# [[Debugging CSS]]<br />
<br />
=== Advanced CSS study ===<br />
<br />
# [[Headers_footers_columns_and_templates|Headers, footers, columns, and templates]]. [http://mosaic.uoc.edu/ac/le/ca/m7/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m7/ud1/index.html Spanish translation]<br />
<br />
=== JavaScript core skills ===<br />
<br />
# [[Programming_-_the_real_basics|Programming - the real basics!]]<br />
# [[What can you do with JavaScript]]<br />
# [[Your first look at JavaScript]]<br />
# [[JavaScript best practices]]<br />
# [[The principles of unobtrusive JavaScript]]<br />
# [[JavaScript functions]]<br />
# [[Objects in JavaScript]]<br />
# [[Traversing the DOM]]<br />
# [[Creating and modifying HTML]]<br />
# [[Dynamic style - manipulating CSS with JavaScript]]<br />
# [[Handling events with JavaScript]]<br />
# [[JavaScript animation]]<br />
# [[Graceful degredation versus progressive enhancement]]<br />
<br />
=== Mobile web development ===<br />
<br />
# [[Introduction_to_mobile_web|Mobile 1: Introduction to mobile web]]<br />
<br />
=== Supplementary articles ===<br />
<br />
* [[Getting your content online]]<br />
* [[Common HTML entities used for typography]]<br />
* [[The web standards curriculum glossary]]<br />
<br />
=== Proposed Updates and Additions to Web Standards Curriculum ===<br />
<br />
* [[WSC_proposed_updates|Web standards curriculum on W3C Wiki: plan for updates 2011]]<br />
<br />
[[Category:Tutorials]]<br />
[[Category:WSC]]</div>Cmillshttps://www.w3.org/wiki/index.php?title=Web_Standards_Curriculum&diff=55506Web Standards Curriculum2011-11-17T16:13:30Z<p>Cmills: /* The HTML body */</p>
<hr />
<div>NOTE: THE MATERIAL ON THIS WIKI PAGE IS BEING MIGRATED ONTO THE WEB EDUCATION COMMUNITY GROUP'S DEDICATED WIKI PAGE, AT http://www.w3.org/community/webed/wiki/Main_Page. ITEMS MARKED WITH (MOVED) HAVE ALREADY BEEN MOVED.<br />
<br />
= Web Standards Curriculum table of contents =<br />
<br />
== Introduction ==<br />
<br />
What follows is a list of all the articles within the web standards curriculum, which will give you an essential grounding in HTML5, CSS, JavaScript, accessibility, and the other topics you need to be a modern web developer/designer. Reading them in order makes the most sense, but they are written to work individually, so you can dip in and out as it suits you, if you need to hone individual skills.<br />
<br />
Note: This material was originally published as part of the Opera Web Standards Curriculum, available as [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/#toc Introductory material], written by Chris Mills. Like the original, it is published under the [http://creativecommons.org/licenses/by-nc-sa/2.5/ Creative Commons Attribution, Non Commercial - Share Alike 2.5] license.<br />
<br />
Note #2: Many of the links below currently point to the [http://dev.opera.com dev.opera] versions, but we'll change these over to the W3C versions as we add more to the site. We are very happy to add these to the W3C pages, for a wider readership and more maintenance help.<br />
<br />
== Table of contents ==<br />
<br />
=== The beginning ===<br />
<br />
(MOVED)[[Introduction to the Web Standards Curriculum]]. [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-he/ Hebrew translation] | [http://dev.opera.com/articles/view/1-bevezeto-a-webes-szabvanyokba/ Hungarian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-it/ Italian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/ Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/ Spanish translation]<br />
<br />
=== Introduction to the world of web standards ===<br />
<br />
# (MOVED) [[The history of the Web|The history of the Internet and the web, and the evolution of web standards]]. [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-he/ Hebrew translation] | [http://dev.opera.com/articles/view/2-az-internet-es-a-web-tortenete/ Hungarian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-it/ Italian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud1/index.html Spanish translation]<br />
# (MOVED) [[How does the Internet work]]? [http://dev.opera.com/articles/view/3-hogyan-mukodik-az-internet/ Hungarian translation] | [http://dev.opera.com/articles/view/3-how-does-the-internet-work-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud2/index.html Spanish translation]<br />
# (MOVED) [[The web standards model - HTML CSS and JavaScript]]. [http://dev.opera.com/articles/view/4-a-webes-szabvanyok-modellje/ Hungarian translation] | [http://dev.opera.com/articles/view/4-the-web-standards-model-html-css-a-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud3/index.html Spanish translation]<br />
<br />
=== Web Design Concepts ===<br />
<br />
This section won't go into any code or markup details, and will act as an introduction to the design process before you start to create any graphics or code, as well as concepts of web design such as IA, navigation, usability etc.<br />
<br />
# (MOVED) [[Information_Architecture_-_planning_out_a_web_site|Information Architecture - planning out a web site]]. [http://dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud1/index.html Spanish translation]<br />
# (MOVED) [[What_does_a_good_web_page_need|What does a good web page need?]] [http://dev.opera.com/articles/view/7-mi-kell-egy-jo-weblaphoz/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud2/index.html Spanish translation]<br />
# (MOVED) [[Colour_theory|Colour Theory]]. [http://dev.opera.com/articles/view/8-a-szinek-elmelete/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud3/index.html Spanish translation]<br />
# (MOVED) [[Building up a site wireframe]]. [http://dev.opera.com/articles/view/9-egy-site-keretenek-felepitese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud4/index.html Spanish translation] <br />
# (MOVED) [[Colour schemes and design mockups]]. [http://dev.opera.com/articles/view/10-szinsemak-es-designtervek/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud5/index.html Spanish translation]<br />
# (MOVED) [[Typography on the Web]]. [http://dev.opera.com/articles/view/11-tipografia-a-weben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud6/index.html Spanish translation]<br />
<br />
=== HTML beginnings ===<br />
<br />
# (MOVED) [[The basics of HTML]]. [http://dev.opera.com/articles/view/12-a-html-alapjai/ Hungarian translation] | [http://dev.opera.com/articles/view/12-the-basics-of-html-ja/ Japanese translation]<br />
# (MOVED) [[Doctypes and markup styles]]<br />
# (MOVED) [[The_HTML_head_element|The HTML &lt;head&gt; element]]. [http://dev.opera.com/articles/view/13-a-html-head-eleme/ Hungarian translation] | [http://dev.opera.com/articles/view/13-the-html-head-element-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m3/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m3/ud1/index.html Spanish translation]<br />
# (MOVED) [[More_about_the_document_head|More about the document &lt;head&gt;]]<br />
<br />
=== The HTML body ===<br />
<br />
# (MOVED) [[Marking up textual content in HTML]]. [http://dev.opera.com/articles/view/15-szoveges-reszek-megjelolese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud1/index.html Spanish translation]<br />
# (MOVED) [[HTML lists|HTML Lists]]. [http://dev.opera.com/articles/view/16-html-listak/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud2/index.html Spanish translation]<br />
# (MOVED) [[Images in HTML]]. [http://dev.opera.com/articles/view/17-kepek-a-htmlben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud3/index.html Spanish translation]<br />
# (MOVED) [[HTML_links_-_lets_build_a_web|HTML links — let's build a web!]] [http://dev.opera.com/articles/view/18-html-hivatkozasok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud4/index.html Spanish translation]<br />
# [[HTML tables]]. [http://dev.opera.com/articles/view/19-html-tablazatok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud5/index.html Spanish translation]<br />
# [[HTML forms - the basics]]. [http://dev.opera.com/articles/view/20-html-urlapok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud6/index.html Spanish translation]<br />
# [[HTML5 form additions]]<br />
# [[HTML structural elements]]<br />
# [[Lesser - known semantic elements]]. [http://dev.opera.com/articles/view/21-kevesse-ismert/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Spanish translation]<br />
# [[Creating multiple pages with navigation menus]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud9/index.html Spanish translation]<br />
# [[Validating your HTML]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud10/index.html Spanish translation]<br />
<br />
=== Accessibility ===<br />
<br />
# [[Accessibility basics]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud1/index.html Spanish translation]<br />
# [[Accessibility testing]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud2/index.html Spanish translation]<br />
<br />
=== CSS ===<br />
<br />
# [[CSS_basics|CSS basics]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud1/index.html Spanish translation]<br />
# [[Inheritance and cascade]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud2/index.html Spanish translation]<br />
# [[Text styling with CSS]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud3/index.html Spanish translation]<br />
# [[The_CSS_layout_model_-_boxes_borders_margins_padding|The CSS layout model - boxes, borders, margins, padding]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud4/index.html Spanish translation]<br />
# [[CSS background images]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud5/index.html Spanish translation]<br />
# [[Styling_lists_and_links|Styling lists and links]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud6/index.html Spanish translation]<br />
# [[Styling tables]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html Spanish translation]<br />
# [[Styling forms]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud8/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud8/index.html Spanish translation]<br />
# [[Floats and clearing]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud9/index.html Spanish translation]<br />
# [[CSS static and relative positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud10/index.html Spanish translation]<br />
# [[CSS absolute and fixed positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud11/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud11/index.html | Spanish translation]<br />
# [[Debugging CSS]]<br />
<br />
=== Advanced CSS study ===<br />
<br />
# [[Headers_footers_columns_and_templates|Headers, footers, columns, and templates]]. [http://mosaic.uoc.edu/ac/le/ca/m7/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m7/ud1/index.html Spanish translation]<br />
<br />
=== JavaScript core skills ===<br />
<br />
# [[Programming_-_the_real_basics|Programming - the real basics!]]<br />
# [[What can you do with JavaScript]]<br />
# [[Your first look at JavaScript]]<br />
# [[JavaScript best practices]]<br />
# [[The principles of unobtrusive JavaScript]]<br />
# [[JavaScript functions]]<br />
# [[Objects in JavaScript]]<br />
# [[Traversing the DOM]]<br />
# [[Creating and modifying HTML]]<br />
# [[Dynamic style - manipulating CSS with JavaScript]]<br />
# [[Handling events with JavaScript]]<br />
# [[JavaScript animation]]<br />
# [[Graceful degredation versus progressive enhancement]]<br />
<br />
=== Mobile web development ===<br />
<br />
# [[Introduction_to_mobile_web|Mobile 1: Introduction to mobile web]]<br />
<br />
=== Supplementary articles ===<br />
<br />
* [[Getting your content online]]<br />
* [[Common HTML entities used for typography]]<br />
* [[The web standards curriculum glossary]]<br />
<br />
=== Proposed Updates and Additions to Web Standards Curriculum ===<br />
<br />
* [[WSC_proposed_updates|Web standards curriculum on W3C Wiki: plan for updates 2011]]<br />
<br />
[[Category:Tutorials]]<br />
[[Category:WSC]]</div>Cmillshttps://www.w3.org/wiki/index.php?title=Web_Standards_Curriculum&diff=55505Web Standards Curriculum2011-11-17T16:10:23Z<p>Cmills: /* The HTML body */</p>
<hr />
<div>NOTE: THE MATERIAL ON THIS WIKI PAGE IS BEING MIGRATED ONTO THE WEB EDUCATION COMMUNITY GROUP'S DEDICATED WIKI PAGE, AT http://www.w3.org/community/webed/wiki/Main_Page. ITEMS MARKED WITH (MOVED) HAVE ALREADY BEEN MOVED.<br />
<br />
= Web Standards Curriculum table of contents =<br />
<br />
== Introduction ==<br />
<br />
What follows is a list of all the articles within the web standards curriculum, which will give you an essential grounding in HTML5, CSS, JavaScript, accessibility, and the other topics you need to be a modern web developer/designer. Reading them in order makes the most sense, but they are written to work individually, so you can dip in and out as it suits you, if you need to hone individual skills.<br />
<br />
Note: This material was originally published as part of the Opera Web Standards Curriculum, available as [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/#toc Introductory material], written by Chris Mills. Like the original, it is published under the [http://creativecommons.org/licenses/by-nc-sa/2.5/ Creative Commons Attribution, Non Commercial - Share Alike 2.5] license.<br />
<br />
Note #2: Many of the links below currently point to the [http://dev.opera.com dev.opera] versions, but we'll change these over to the W3C versions as we add more to the site. We are very happy to add these to the W3C pages, for a wider readership and more maintenance help.<br />
<br />
== Table of contents ==<br />
<br />
=== The beginning ===<br />
<br />
(MOVED)[[Introduction to the Web Standards Curriculum]]. [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-he/ Hebrew translation] | [http://dev.opera.com/articles/view/1-bevezeto-a-webes-szabvanyokba/ Hungarian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-it/ Italian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/ Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/ Spanish translation]<br />
<br />
=== Introduction to the world of web standards ===<br />
<br />
# (MOVED) [[The history of the Web|The history of the Internet and the web, and the evolution of web standards]]. [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-he/ Hebrew translation] | [http://dev.opera.com/articles/view/2-az-internet-es-a-web-tortenete/ Hungarian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-it/ Italian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud1/index.html Spanish translation]<br />
# (MOVED) [[How does the Internet work]]? [http://dev.opera.com/articles/view/3-hogyan-mukodik-az-internet/ Hungarian translation] | [http://dev.opera.com/articles/view/3-how-does-the-internet-work-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud2/index.html Spanish translation]<br />
# (MOVED) [[The web standards model - HTML CSS and JavaScript]]. [http://dev.opera.com/articles/view/4-a-webes-szabvanyok-modellje/ Hungarian translation] | [http://dev.opera.com/articles/view/4-the-web-standards-model-html-css-a-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud3/index.html Spanish translation]<br />
<br />
=== Web Design Concepts ===<br />
<br />
This section won't go into any code or markup details, and will act as an introduction to the design process before you start to create any graphics or code, as well as concepts of web design such as IA, navigation, usability etc.<br />
<br />
# (MOVED) [[Information_Architecture_-_planning_out_a_web_site|Information Architecture - planning out a web site]]. [http://dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud1/index.html Spanish translation]<br />
# (MOVED) [[What_does_a_good_web_page_need|What does a good web page need?]] [http://dev.opera.com/articles/view/7-mi-kell-egy-jo-weblaphoz/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud2/index.html Spanish translation]<br />
# (MOVED) [[Colour_theory|Colour Theory]]. [http://dev.opera.com/articles/view/8-a-szinek-elmelete/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud3/index.html Spanish translation]<br />
# (MOVED) [[Building up a site wireframe]]. [http://dev.opera.com/articles/view/9-egy-site-keretenek-felepitese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud4/index.html Spanish translation] <br />
# (MOVED) [[Colour schemes and design mockups]]. [http://dev.opera.com/articles/view/10-szinsemak-es-designtervek/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud5/index.html Spanish translation]<br />
# (MOVED) [[Typography on the Web]]. [http://dev.opera.com/articles/view/11-tipografia-a-weben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud6/index.html Spanish translation]<br />
<br />
=== HTML beginnings ===<br />
<br />
# (MOVED) [[The basics of HTML]]. [http://dev.opera.com/articles/view/12-a-html-alapjai/ Hungarian translation] | [http://dev.opera.com/articles/view/12-the-basics-of-html-ja/ Japanese translation]<br />
# (MOVED) [[Doctypes and markup styles]]<br />
# (MOVED) [[The_HTML_head_element|The HTML &lt;head&gt; element]]. [http://dev.opera.com/articles/view/13-a-html-head-eleme/ Hungarian translation] | [http://dev.opera.com/articles/view/13-the-html-head-element-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m3/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m3/ud1/index.html Spanish translation]<br />
# (MOVED) [[More_about_the_document_head|More about the document &lt;head&gt;]]<br />
<br />
=== The HTML body ===<br />
<br />
# (MOVED) [[Marking up textual content in HTML]]. [http://dev.opera.com/articles/view/15-szoveges-reszek-megjelolese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud1/index.html Spanish translation]<br />
# (MOVED) [[HTML lists|HTML Lists]]. [http://dev.opera.com/articles/view/16-html-listak/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud2/index.html Spanish translation]<br />
# (MOVED) [[Images in HTML]]. [http://dev.opera.com/articles/view/17-kepek-a-htmlben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud3/index.html Spanish translation]<br />
# [[HTML_links_-_lets_build_a_web|HTML links — let's build a web!]] [http://dev.opera.com/articles/view/18-html-hivatkozasok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud4/index.html Spanish translation]<br />
# [[HTML tables]]. [http://dev.opera.com/articles/view/19-html-tablazatok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud5/index.html Spanish translation]<br />
# [[HTML forms - the basics]]. [http://dev.opera.com/articles/view/20-html-urlapok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud6/index.html Spanish translation]<br />
# [[HTML5 form additions]]<br />
# [[HTML structural elements]]<br />
# [[Lesser - known semantic elements]]. [http://dev.opera.com/articles/view/21-kevesse-ismert/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Spanish translation]<br />
# [[Creating multiple pages with navigation menus]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud9/index.html Spanish translation]<br />
# [[Validating your HTML]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud10/index.html Spanish translation]<br />
<br />
=== Accessibility ===<br />
<br />
# [[Accessibility basics]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud1/index.html Spanish translation]<br />
# [[Accessibility testing]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud2/index.html Spanish translation]<br />
<br />
=== CSS ===<br />
<br />
# [[CSS_basics|CSS basics]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud1/index.html Spanish translation]<br />
# [[Inheritance and cascade]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud2/index.html Spanish translation]<br />
# [[Text styling with CSS]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud3/index.html Spanish translation]<br />
# [[The_CSS_layout_model_-_boxes_borders_margins_padding|The CSS layout model - boxes, borders, margins, padding]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud4/index.html Spanish translation]<br />
# [[CSS background images]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud5/index.html Spanish translation]<br />
# [[Styling_lists_and_links|Styling lists and links]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud6/index.html Spanish translation]<br />
# [[Styling tables]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html Spanish translation]<br />
# [[Styling forms]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud8/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud8/index.html Spanish translation]<br />
# [[Floats and clearing]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud9/index.html Spanish translation]<br />
# [[CSS static and relative positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud10/index.html Spanish translation]<br />
# [[CSS absolute and fixed positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud11/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud11/index.html | Spanish translation]<br />
# [[Debugging CSS]]<br />
<br />
=== Advanced CSS study ===<br />
<br />
# [[Headers_footers_columns_and_templates|Headers, footers, columns, and templates]]. [http://mosaic.uoc.edu/ac/le/ca/m7/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m7/ud1/index.html Spanish translation]<br />
<br />
=== JavaScript core skills ===<br />
<br />
# [[Programming_-_the_real_basics|Programming - the real basics!]]<br />
# [[What can you do with JavaScript]]<br />
# [[Your first look at JavaScript]]<br />
# [[JavaScript best practices]]<br />
# [[The principles of unobtrusive JavaScript]]<br />
# [[JavaScript functions]]<br />
# [[Objects in JavaScript]]<br />
# [[Traversing the DOM]]<br />
# [[Creating and modifying HTML]]<br />
# [[Dynamic style - manipulating CSS with JavaScript]]<br />
# [[Handling events with JavaScript]]<br />
# [[JavaScript animation]]<br />
# [[Graceful degredation versus progressive enhancement]]<br />
<br />
=== Mobile web development ===<br />
<br />
# [[Introduction_to_mobile_web|Mobile 1: Introduction to mobile web]]<br />
<br />
=== Supplementary articles ===<br />
<br />
* [[Getting your content online]]<br />
* [[Common HTML entities used for typography]]<br />
* [[The web standards curriculum glossary]]<br />
<br />
=== Proposed Updates and Additions to Web Standards Curriculum ===<br />
<br />
* [[WSC_proposed_updates|Web standards curriculum on W3C Wiki: plan for updates 2011]]<br />
<br />
[[Category:Tutorials]]<br />
[[Category:WSC]]</div>Cmillshttps://www.w3.org/wiki/index.php?title=Web_Standards_Curriculum&diff=55504Web Standards Curriculum2011-11-17T16:00:38Z<p>Cmills: /* The HTML body */</p>
<hr />
<div>NOTE: THE MATERIAL ON THIS WIKI PAGE IS BEING MIGRATED ONTO THE WEB EDUCATION COMMUNITY GROUP'S DEDICATED WIKI PAGE, AT http://www.w3.org/community/webed/wiki/Main_Page. ITEMS MARKED WITH (MOVED) HAVE ALREADY BEEN MOVED.<br />
<br />
= Web Standards Curriculum table of contents =<br />
<br />
== Introduction ==<br />
<br />
What follows is a list of all the articles within the web standards curriculum, which will give you an essential grounding in HTML5, CSS, JavaScript, accessibility, and the other topics you need to be a modern web developer/designer. Reading them in order makes the most sense, but they are written to work individually, so you can dip in and out as it suits you, if you need to hone individual skills.<br />
<br />
Note: This material was originally published as part of the Opera Web Standards Curriculum, available as [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/#toc Introductory material], written by Chris Mills. Like the original, it is published under the [http://creativecommons.org/licenses/by-nc-sa/2.5/ Creative Commons Attribution, Non Commercial - Share Alike 2.5] license.<br />
<br />
Note #2: Many of the links below currently point to the [http://dev.opera.com dev.opera] versions, but we'll change these over to the W3C versions as we add more to the site. We are very happy to add these to the W3C pages, for a wider readership and more maintenance help.<br />
<br />
== Table of contents ==<br />
<br />
=== The beginning ===<br />
<br />
(MOVED)[[Introduction to the Web Standards Curriculum]]. [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-he/ Hebrew translation] | [http://dev.opera.com/articles/view/1-bevezeto-a-webes-szabvanyokba/ Hungarian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-it/ Italian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/ Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/ Spanish translation]<br />
<br />
=== Introduction to the world of web standards ===<br />
<br />
# (MOVED) [[The history of the Web|The history of the Internet and the web, and the evolution of web standards]]. [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-he/ Hebrew translation] | [http://dev.opera.com/articles/view/2-az-internet-es-a-web-tortenete/ Hungarian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-it/ Italian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud1/index.html Spanish translation]<br />
# (MOVED) [[How does the Internet work]]? [http://dev.opera.com/articles/view/3-hogyan-mukodik-az-internet/ Hungarian translation] | [http://dev.opera.com/articles/view/3-how-does-the-internet-work-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud2/index.html Spanish translation]<br />
# (MOVED) [[The web standards model - HTML CSS and JavaScript]]. [http://dev.opera.com/articles/view/4-a-webes-szabvanyok-modellje/ Hungarian translation] | [http://dev.opera.com/articles/view/4-the-web-standards-model-html-css-a-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud3/index.html Spanish translation]<br />
<br />
=== Web Design Concepts ===<br />
<br />
This section won't go into any code or markup details, and will act as an introduction to the design process before you start to create any graphics or code, as well as concepts of web design such as IA, navigation, usability etc.<br />
<br />
# (MOVED) [[Information_Architecture_-_planning_out_a_web_site|Information Architecture - planning out a web site]]. [http://dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud1/index.html Spanish translation]<br />
# (MOVED) [[What_does_a_good_web_page_need|What does a good web page need?]] [http://dev.opera.com/articles/view/7-mi-kell-egy-jo-weblaphoz/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud2/index.html Spanish translation]<br />
# (MOVED) [[Colour_theory|Colour Theory]]. [http://dev.opera.com/articles/view/8-a-szinek-elmelete/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud3/index.html Spanish translation]<br />
# (MOVED) [[Building up a site wireframe]]. [http://dev.opera.com/articles/view/9-egy-site-keretenek-felepitese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud4/index.html Spanish translation] <br />
# (MOVED) [[Colour schemes and design mockups]]. [http://dev.opera.com/articles/view/10-szinsemak-es-designtervek/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud5/index.html Spanish translation]<br />
# (MOVED) [[Typography on the Web]]. [http://dev.opera.com/articles/view/11-tipografia-a-weben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud6/index.html Spanish translation]<br />
<br />
=== HTML beginnings ===<br />
<br />
# (MOVED) [[The basics of HTML]]. [http://dev.opera.com/articles/view/12-a-html-alapjai/ Hungarian translation] | [http://dev.opera.com/articles/view/12-the-basics-of-html-ja/ Japanese translation]<br />
# (MOVED) [[Doctypes and markup styles]]<br />
# (MOVED) [[The_HTML_head_element|The HTML &lt;head&gt; element]]. [http://dev.opera.com/articles/view/13-a-html-head-eleme/ Hungarian translation] | [http://dev.opera.com/articles/view/13-the-html-head-element-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m3/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m3/ud1/index.html Spanish translation]<br />
# (MOVED) [[More_about_the_document_head|More about the document &lt;head&gt;]]<br />
<br />
=== The HTML body ===<br />
<br />
# (MOVED) [[Marking up textual content in HTML]]. [http://dev.opera.com/articles/view/15-szoveges-reszek-megjelolese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud1/index.html Spanish translation]<br />
# (MOVED) [[HTML lists|HTML Lists]]. [http://dev.opera.com/articles/view/16-html-listak/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud2/index.html Spanish translation]<br />
# [[Images in HTML]]. [http://dev.opera.com/articles/view/17-kepek-a-htmlben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud3/index.html Spanish translation]<br />
# [[HTML_links_-_lets_build_a_web|HTML links — let's build a web!]] [http://dev.opera.com/articles/view/18-html-hivatkozasok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud4/index.html Spanish translation]<br />
# [[HTML tables]]. [http://dev.opera.com/articles/view/19-html-tablazatok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud5/index.html Spanish translation]<br />
# [[HTML forms - the basics]]. [http://dev.opera.com/articles/view/20-html-urlapok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud6/index.html Spanish translation]<br />
# [[HTML5 form additions]]<br />
# [[HTML structural elements]]<br />
# [[Lesser - known semantic elements]]. [http://dev.opera.com/articles/view/21-kevesse-ismert/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Spanish translation]<br />
# [[Creating multiple pages with navigation menus]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud9/index.html Spanish translation]<br />
# [[Validating your HTML]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud10/index.html Spanish translation]<br />
<br />
=== Accessibility ===<br />
<br />
# [[Accessibility basics]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud1/index.html Spanish translation]<br />
# [[Accessibility testing]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud2/index.html Spanish translation]<br />
<br />
=== CSS ===<br />
<br />
# [[CSS_basics|CSS basics]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud1/index.html Spanish translation]<br />
# [[Inheritance and cascade]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud2/index.html Spanish translation]<br />
# [[Text styling with CSS]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud3/index.html Spanish translation]<br />
# [[The_CSS_layout_model_-_boxes_borders_margins_padding|The CSS layout model - boxes, borders, margins, padding]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud4/index.html Spanish translation]<br />
# [[CSS background images]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud5/index.html Spanish translation]<br />
# [[Styling_lists_and_links|Styling lists and links]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud6/index.html Spanish translation]<br />
# [[Styling tables]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html Spanish translation]<br />
# [[Styling forms]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud8/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud8/index.html Spanish translation]<br />
# [[Floats and clearing]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud9/index.html Spanish translation]<br />
# [[CSS static and relative positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud10/index.html Spanish translation]<br />
# [[CSS absolute and fixed positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud11/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud11/index.html | Spanish translation]<br />
# [[Debugging CSS]]<br />
<br />
=== Advanced CSS study ===<br />
<br />
# [[Headers_footers_columns_and_templates|Headers, footers, columns, and templates]]. [http://mosaic.uoc.edu/ac/le/ca/m7/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m7/ud1/index.html Spanish translation]<br />
<br />
=== JavaScript core skills ===<br />
<br />
# [[Programming_-_the_real_basics|Programming - the real basics!]]<br />
# [[What can you do with JavaScript]]<br />
# [[Your first look at JavaScript]]<br />
# [[JavaScript best practices]]<br />
# [[The principles of unobtrusive JavaScript]]<br />
# [[JavaScript functions]]<br />
# [[Objects in JavaScript]]<br />
# [[Traversing the DOM]]<br />
# [[Creating and modifying HTML]]<br />
# [[Dynamic style - manipulating CSS with JavaScript]]<br />
# [[Handling events with JavaScript]]<br />
# [[JavaScript animation]]<br />
# [[Graceful degredation versus progressive enhancement]]<br />
<br />
=== Mobile web development ===<br />
<br />
# [[Introduction_to_mobile_web|Mobile 1: Introduction to mobile web]]<br />
<br />
=== Supplementary articles ===<br />
<br />
* [[Getting your content online]]<br />
* [[Common HTML entities used for typography]]<br />
* [[The web standards curriculum glossary]]<br />
<br />
=== Proposed Updates and Additions to Web Standards Curriculum ===<br />
<br />
* [[WSC_proposed_updates|Web standards curriculum on W3C Wiki: plan for updates 2011]]<br />
<br />
[[Category:Tutorials]]<br />
[[Category:WSC]]</div>Cmillshttps://www.w3.org/wiki/index.php?title=HTML_lists&diff=55503HTML lists2011-11-17T15:57:45Z<p>Cmills: /* Description lists */</p>
<hr />
<div>== Introduction ==<br />
<br />
Lists are used to group related pieces of information together, so they are clearly associated with each other and easy to read. In modern web development lists are workhorse elements, frequently used for navigation as well as general content.<br />
<br />
Lists are good from a structural point of view as they help create a well-structured, more accessible, easy-to-maintain document. They are also useful for a purely practical reason — they give you extra elements to attach CSS styles to, for a whole variety of styling (we'll get on to CSS later in the course - check out the [[Styling lists and links]] first, and then visit the [Web Standards Curriculum] table of contents for the full list of CSS articles available.).<br />
<br />
In this part of the [http://www.w3.org/wiki/Web_Standards_Curriculum Web Standards Curriculum], we will cover the different list types available in HTML, when and how you should use them, with a couple of practical examples at the end.<br />
<br />
== The three list types ==<br />
<br />
There are three list types in HTML:<br />
<br />
* '''unordered list''' — used to group a set of related items, in no particular order.<br />
* '''ordered list''' — used to group a set of related items, in a specific order.<br />
* '''description list''' — used to display name/value pairs such as terms and their definitions, or times and events.<br />
<br />
Each one has a specific purpose and meaning — they are not interchangeable.<br />
<br />
=== Unordered lists ===<br />
<br />
Unordered lists, or bulleted lists, are used when a set of items can be placed in any order. An example is a shopping list:<br />
<br />
* milk<br />
* bread<br />
* butter<br />
* coffee beans<br />
<br />
These items are all part of one list, however, you could put the items in any order and the list would still make sense:<br />
<br />
* bread<br />
* coffee beans<br />
* milk<br />
* butter<br />
<br />
You can use CSS to change the bullet to one of several default styles, use your own image, or even display the list without bullets—we’ll look at how to do that in the [[Styling lists and links]] article.<br />
<br />
==== Unordered list markup ====<br />
<br />
Unordered lists use one set of <code>&lt;ul&gt;&lt;/ul&gt;</code> tags, wrapped around many sets of <code>&lt;li&gt;&lt;/li&gt;</code>:<br />
<br />
<pre><code>&lt;ul&gt;<br />
&lt;li&gt;bread&lt;/li&gt;<br />
&lt;li&gt;coffee beans&lt;/li&gt;<br />
&lt;li&gt;milk&lt;/li&gt;<br />
&lt;li&gt;butter&lt;/li&gt;<br />
&lt;/ul&gt;</code><br />
</pre><br />
<br />
=== Ordered lists ===<br />
<br />
Ordered lists, or numbered lists, are used to display a list of items that need to be placed in a specific order. An example would be cooking instructions, which must be completed in order for the recipe to work:<br />
<br />
# Gather ingredients<br />
# Mix ingredients together<br />
# Place ingredients in a baking dish<br />
# Bake in oven for an hour<br />
# Remove from oven<br />
# Allow to stand for ten minutes<br />
# Serve<br />
<br />
If the list items were moved around into a different order, the information would no longer make sense:<br />
<br />
# Gather ingredients<br />
# Bake in oven for an hour<br />
# Serve<br />
# Remove from oven<br />
# Place ingredients in a baking dish<br />
# Allow to stand for ten minutes<br />
# Mix ingredients together<br />
<br />
Ordered lists can be displayed with one of several numbering or alphabetic systems—that is, letters or numbers. The default in most browsers is decimal numbers, but there are more options:<br />
<br />
* Letters<br />
** Lowercase ascii letters (a, b, c…)<br />
** Uppercase ascii letters (A, B, C…).<br />
** Lowercase classical Greek: (έ, ή, ί…)<br />
*<br />
* Numbers<br />
** Decimal numbers (1, 2, 3…)<br />
** Decimal numbers with leading zeros (01, 02, 03…)<br />
** Lowercase Roman numerals (i, ii, iii…)<br />
** Uppercase Roman numerals (I, II, III…)<br />
** Traditional Georgian numbering (an, ban, gan…)<br />
** Traditional Armenian numbering (mek, yerku, yerek…)<br />
<br />
Again, you can use CSS to change the style of your ordered lists.<br />
<br />
==== Ordered list markup ====<br />
<br />
Ordered lists use one set of <code>&lt;ol&gt;&lt;/ol&gt;</code> tags, wrapped around many sets of <code>&lt;li&gt;&lt;/li&gt;</code>:<br />
<br />
<pre><code>&lt;ol&gt;<br />
&lt;li&gt;Gather ingredients&lt;/li&gt;<br />
&lt;li&gt;Mix ingredients together&lt;/li&gt;<br />
&lt;li&gt;Place ingredients in a baking dish&lt;/li&gt;<br />
&lt;li&gt;Bake in oven for an hour&lt;/li&gt;<br />
&lt;li&gt;Remove from oven&lt;/li&gt;<br />
&lt;li&gt;Allow to stand for ten minutes&lt;/li&gt;<br />
&lt;li&gt;Serve&lt;/li&gt;<br />
&lt;/ol&gt;</code><br />
</pre><br />
<br />
==== Beginning ordered lists with numbers other than 1 ====<br />
<br />
It is possible to get an ordered list to start with a number other than 1 (or i, or I, etc.). This is done using the <code>&lt;start&gt;</code> attribute, which takes a numeric value, even if you’re using CSS to change the the list counters to be alphabetic, roman or. This is useful if you have a single list of items, but you want to break the list up with some kind of note, or some other related information. For example, we could do this with the previous example:<br />
<br />
<pre><code>&lt;ol&gt;<br />
&lt;li&gt;Gather ingredients&lt;/li&gt;<br />
&lt;li&gt;Mix ingredients together&lt;/li&gt;<br />
&lt;li&gt;Place ingredients in a baking dish&lt;/li&gt;<br />
&lt;/ol&gt;<br />
<br />
&lt;p class="note"&gt;Before you place the ingredients in the baking dish, preheat the oven to 180 degrees centigrade/350 degrees farenheit in readiness for the next step&lt;/p&gt;<br />
<br />
&lt;ol start="4"&gt;<br />
&lt;li&gt;Bake in oven for an hour&lt;/li&gt;<br />
&lt;li&gt;Remove from oven&lt;/li&gt;<br />
&lt;li&gt;Allow to stand for ten minutes&lt;/li&gt;<br />
&lt;li&gt;Serve&lt;/li&gt;<br />
&lt;/ol&gt;</code><br />
</pre><br />
<br />
This gives the following result:<br />
<br />
<ol><br />
<li>Gather ingredients</li><br />
<li>Mix ingredients together</li><br />
<li>Place ingredients in a baking dish</li><br />
</ol><br />
<br />
<p class="note">Before you place the ingredients in the baking dish, preheat the oven to 180 degrees centigrade/350 degrees farenheit in readiness for the next step</p><br />
<br />
<ol start="4"><br />
<li>Bake in oven for an hour</li><br />
<li>Remove from oven</li><br />
<li>Allow to stand for ten minutes</li><br />
<li>Serve</li><br />
</ol><br />
<br />
Note that this attribute was deprecated in HTML 4, so it will make your page not validate if you are using an HTML4 strict doctype. If you want to make use of such functionality in an HTML4 strict page, and it absolutely has to validate, you can do it using [http://dev.opera.com/articles/view/automatic-numbering-with-css-counters/ CSS Counters] instead. <code>&lt;start&gt;</code> has however been reinstated in HTML5, which is a good thing, as it is useful.<br />
<br />
=== Description lists === <br />
<br />
Description lists associate specific names and their values within a list, for example items in an ingredient list and their descriptions, article metadata such as authors and categories and their values, or competition winners and the years in which they won. Let's explore the ingredient list example a bit more deeply. You could write an ingredients list like so:<br />
<br />
<pre>milk<br />
<br />
A white, liquid dairy product.<br />
<br />
bread<br />
<br />
A baked food made of flour or meal.<br />
<br />
butter<br />
<br />
A yellow, solid dairy product.<br />
<br />
coffee beans<br />
<br />
The seeds of the fruit from certain coffee trees.</pre><br />
<br />
Note: In HTML4, description lists were called definition lists, so if you hear that term mentioned in conversation, then just assume you are talking about a description list. HTML5 has changed the definition of this type of list to the more general "description list" because designers and developers were all too often using description lists to mark up name/value groups that weren't items and descriptions.<br />
<br />
You can have as many name-value groups as you like, but there must be at least one name and at least one value in each pair. You can associate more than one value with a single name, or vice versa. For example, the term "coffee" can have several meanings, and you could show them one after the other:<br />
<br />
<pre>coffee<br />
<br />
a beverage made from roasted, ground coffee beans<br />
a cup of coffee<br />
a social gathering at which coffee is consumed<br />
a medium to dark brown colour</pre><br />
<br />
Alternatively you can have more than one name with the same value. This is useful to show variations of a term, all of which have the same meaning:<br />
<br />
<pre>soda<br />
pop<br />
fizzy drink<br />
cola<br />
<br />
a sweet, carbonated beverage.</pre><br />
<br />
Description lists are different from the other kinds of list, as they use names and values instead of list items. You wrap a description list in one set of <code>&lt;dl&gt;&lt;/dl&gt;</code> elements, wrapped around groups of <code>&lt;dt&gt;&lt;/dt&gt;</code> (name) and <code>&lt;dd&gt;&lt;/dd&gt;</code> (value) tags. You must pair at least one <code>&lt;dt&gt;&lt;/dt&gt;</code> with at least one <code>&lt;dd&gt;&lt;/dd&gt;</code>; a <code>&lt;dt&gt;&lt;/dt&gt;</code> should always come first in the source order.<br />
<br />
A simple description list of single names with single values would look like this:<br />
<br />
<pre>&lt;dl&gt;<br />
&lt;dt&gt;Name&lt;/dt&gt;<br />
&lt;dd&gt;Value&lt;/dd&gt;<br />
&lt;dt&gt;Name&lt;/dt&gt;<br />
&lt;dd&gt;Value&lt;/dd&gt;<br />
&lt;dt&gt;Name&lt;/dt&gt;<br />
&lt;dd&gt;Value&lt;/dd&gt;<br />
&lt;/dl&gt;<br />
</pre><br />
<br />
This is rendered as follows:<br />
<br />
<pre>Name<br />
Value<br />
Name<br />
Value<br />
Name<br />
Value</pre><br />
<br />
In this example, we associate more than one value with a name, and vice versa:<br />
<br />
<pre>&lt;dl&gt;<br />
&lt;dt&gt;Name&lt;/dt&gt;<br />
&lt;dd&gt;Value that applies to the preceding name&lt;/dd&gt;<br />
&lt;dt&gt;Name&lt;/dt&gt;<br />
&lt;dt&gt;Name&lt;/dt&gt;<br />
&lt;dd&gt;Value that applies to both of the preceding name&lt;/dd&gt;<br />
&lt;dt&gt;Name that can have both of the following values&lt;/dt&gt;<br />
&lt;dd&gt;One value of the name&lt;/dd&gt;<br />
&lt;dd&gt;Another value of the name&lt;/dd&gt;<br />
&lt;/dl&gt;<br />
</pre><br />
<br />
Which would render as follows:<br />
<br />
<pre>Name<br />
Value that applies to the preceding name<br />
Name<br />
Name<br />
Value that applies to both of the preceding names<br />
Name that can have one of the following values<br />
One value of the name<br />
Another value of the name</pre><br />
<br />
== Choosing between list types ==<br />
<br />
When trying to decide what type of list to use, you can usually decide by asking two simple questions:<br />
<br />
# Am I defining terms or associating other name/value pairs?<br />
#* If yes, use a description list.<br />
#* If no, don’t use a description list — go on to the next question.<br />
#<br />
# Is the order of the list items important?<br />
#* If yes, use an ordered list.<br />
#* If no, use an unordered list.<br />
#<br />
<br />
== The difference between HTML lists and text ==<br />
<br />
You may be wondering what the difference is between an HTML list and some text with bullets or numbers written in by hand. Well, there are several advantages to using an HTML list:<br />
<br />
* If you have to change the order of the list items in an ordered list, you simply move around the list item elements. If you wrote the numbers in manually you would have to go through and change every single item’s number to correct the order — which is tedious to say the least!<br />
* Using an HTML list allows you to style the list properly - you can use CSS to style just the list elements. If you just use a blob of text, you will find it more difficult to style the individual items in any useful manner, as the elements used will be the same as used for every other piece of text.<br />
* Using an HTML list gives the content the proper semantic structure, as well as a "list-ish" visual effect. This has important benefits such as allowing screen readers to tell users with visual impairments they are reading a list, rather than just reading out a confusing jumble of text and numbers.<br />
<br />
To put it another way: '''text and lists are not the same'''. Using text instead of a list makes more work for you and can create problems for your document’s readers. So if your document needs a list, you should use the correct HTML list.<br />
<br />
== Nesting lists ==<br />
<br />
A list item can contain another entire list — this is known as "nesting" a list. It is useful for things like tables of contents, such as the one at the start of this article:<br />
<br />
# Chapter One<br />
## Section One<br />
## Section Two<br />
## Section Three<br />
#<br />
# Chapter Two<br />
# Chapter Three<br />
<br />
The key to nesting lists is to remember that the nested list should relate to one specific list item. To reflect that in the code, the nested list is contained inside that list item. The code for the list above looks something like this:<br />
<br />
<pre><code>&lt;ol&gt;<br />
&lt;li&gt;Chapter One<br />
&lt;ol&gt;<br />
&lt;li&gt;Section One&lt;/li&gt;<br />
&lt;li&gt;Section Two &lt;/li&gt;<br />
&lt;li&gt;Section Three &lt;/li&gt;<br />
&lt;/ol&gt;<br />
&lt;/li&gt;<br />
&lt;li&gt;Chapter Two&lt;/li&gt;<br />
&lt;li&gt;Chapter Three &lt;/li&gt;<br />
&lt;/ol&gt;</code><br />
</pre><br />
<br />
Note how the nested list starts after the <code>&lt;li&gt;</code> and the text of the containing list item (“Chapter One”); then ends before the <code>&lt;/li&gt;</code> of the containing list item. Nested lists often form the basis for website navigation menus, as they are a good way to define the hierarchical structure of the website.<br />
<br />
Theoretically you can nest as many lists as you like, although in practice it can become confusing to nest lists too deeply. For very large lists, you may be better off splitting the content up into several lists with headings instead, or even splitting it up into separate pages.<br />
<br />
== Step by step example ==<br />
<br />
Let’s run through a step by step example, to put all of this together. Consider the following scenario:<br />
<br />
You are creating a small website for the HTML Cooking School. On the main page, you are to show a list of categorised recipes, linking through to recipe pages. Each recipe page lists the ingredients required, notes on those ingredients and the preparation method. The three categories are:<br />
<br />
* Cakes (including recipes for Plain Sponge, Chocolate Cake and Apple Tea Cake)<br />
* Biscuits (including recipes for ANZAC Biscuits, Jam Drops and Melting Moments)<br />
* Quickbreads (including recipes for Damper and Scones)<br />
<br />
The client doesn’t mind what order the categories and recipes are shown; they just want to be sure people know which items are categories and which ones are recipes.<br />
<br />
Let’s step through the process of creating this site.<br />
<br />
=== Main page markup ===<br />
<br />
# Create a properly-formed HTML page, including a doctype, <code>&lt;html&gt;</code>, <code>&lt;head&gt;</code> and <code>&lt;body&gt;</code> elements, and save it as ''stepbystep-main.html''. Add a main heading (<code>&lt;h1&gt;</code>) of “HTML Cooking School”, and a subheading (<code>&lt;h2&gt;</code>) of “Recipes”: <br />
<br />
<pre>&lt;h1&gt;HTML Cooking School&lt;/h1&gt;<br />
&lt;h2&gt;Recipes&lt;/h2&gt;</pre><br />
<br />
# You have three categories of recipe to represent, and the order is not important — an unordered list is most appropriate for these, so add the following to your page:<br />
<br />
<pre>&lt;h2&gt;Recipes&lt;/h2&gt;<br />
&lt;ul&gt;<br />
&lt;li&gt;Cakes&lt;/li&gt;<br />
&lt;li&gt;Biscuits&lt;/li&gt;<br />
&lt;li&gt;Quickbreads&lt;/li&gt;<br />
&lt;/ul&gt;</pre><br />
<br />
Indenting the <code>&lt;li&gt;</code> elements makes the code more readable, but it is not required.<br />
<br />
# Now you need to add the recipes as sub-items, for example “Plain Sponge”, “Chocolate Cake” and “Apple Tea Cake” are all part of the “Cakes” category. To do this, you need to create a nested list within each item. Since the order is not important, once again unordered lists are appropriate. To make things easier for the tutorial, I’ll get you to link all of the recipes to one single recipe page ([[html links lets build a web]] explains HTML links in depth].):<br />
<br />
<pre>&lt;h2&gt;Recipes&lt;/h2&gt;<br />
&lt;ul&gt;<br />
&lt;li&gt;Cakes<br />
&lt;ul&gt;<br />
&lt;li&gt;&lt;a href="stepbystep-recipe.html"&gt;Plain Sponge&lt;/a&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;a href="stepbystep-recipe.html"&gt;Chocolate Cake&lt;/a&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;a href="stepbystep-recipe.html"&gt;Apple Tea Cake&lt;/a&gt;&lt;/li&gt;<br />
&lt;/ul&gt;<br />
&lt;/li&gt;<br />
&lt;li&gt;Biscuits<br />
&lt;ul&gt;<br />
&lt;li&gt;&lt;a href="stepbystep-recipe.html"&gt;ANZAC Biscuits&lt;/a&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;a href="stepbystep-recipe.html"&gt;Jam Drops&lt;/a&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;a href="stepbystep-recipe.html"&gt;Melting Moments&lt;/a&gt;&lt;/li&gt;<br />
&lt;/ul&gt;<br />
&lt;/li&gt;<br />
&lt;li&gt;Breads/quickbreads<br />
&lt;ul&gt;<br />
&lt;li&gt;&lt;a href="stepbystep-recipe.html"&gt;Damper&lt;/a&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;a href="stepbystep-recipe.html"&gt;Scones&lt;/a&gt;&lt;/li&gt;<br />
&lt;/ul&gt;<br />
&lt;/li&gt;<br />
&lt;/ul&gt;</pre><br />
<br />
The final result should be something similar to Figure 1:<br />
<br />
[[Image:mainpage.png|Screenshot of main page]]<br />
<br />
Figure 1: The finished main page.<br />
<br />
You can also [http://dev.opera.com/articles/view/16-html-lists/stepbystep-main.html view the live example page here].<br />
<br />
=== The recipe page ===<br />
<br />
For the sake of the example, we will just create the sponge cake recipe page — feel free to create the others yourself, using this one as a template. The HTML Cooking School has supplied the sponge recipe to you in a text file, looking like this:<br />
<br />
<pre>Simple Sponge Cake<br />
Ingredients<br />
3 eggs<br />
100g castor sugar<br />
85g self-raising flour<br />
<br />
Notes on ingredients:<br />
Caster Sugar - Finely granulated white sugar.<br />
Self-raising flour - A pre-mixed combination of flour and leavening agents (usually salt and baking powder).</code><br />
<br />
Method<br />
1. Preheat the oven to 190°C.<br />
2. Grease a 20cm round cake pan.<br />
3. In a medium bowl, whip together the eggs and castor sugar until fluffy.<br />
4. Fold in flour.<br />
5. Pour mixture into the prepared pan.<br />
6. Bake for 20 minutes in the preheated oven, or until the top of the cake springs back when lightly pressed.<br />
7. Cool in the pan over a wire rack.</pre><br />
<br />
=== Recipe page markup ===<br />
<br />
# Create another properly-formed HTML document, and save it as stepbystep-recipe.html. Add the following headings to it:<br />
<br />
<pre>&lt;h1&gt;Simple Sponge Cake&lt;/h1&gt;<br />
&lt;h2&gt;Ingredients&lt;/h2&gt;<br />
&lt;h3&gt;Notes on ingredients&lt;/h3&gt;<br />
&lt;h2&gt;Method&lt;/h2&gt;</pre><br />
<br />
# The ingredients list has several items but the order isn’t important. An unordered list therefore makes sense. Add the following into the <code>&lt;body&gt;</code> of your HTML:<br />
<br />
<pre>&lt;h2&gt;Ingredients&lt;/h2&gt;<br />
&lt;ul&gt;<br />
&lt;li&gt;3 eggs&lt;/li&gt;<br />
&lt;li&gt;100g castor sugar&lt;/li&gt;<br />
&lt;li&gt;85g self-raising flour&lt;/li&gt;<br />
&lt;/ul&gt;</pre><br />
<br />
# The notes on the ingredients are there to properly define what some of the ingredients are. You need to associate the ingredient — the name — with its value. A description list is right for this purpose. Add the following to your HTML, below the unordered list in the previous step:<br />
<br />
<pre>&lt;h3&gt;Notes on ingredients&lt;/h3&gt;<br />
&lt;dl&gt;<br />
&lt;dt&gt;Castor Sugar&lt;/dt&gt;<br />
&lt;dd&gt;Finely granulated white sugar.&lt;/dd&gt;<br />
&lt;dt&gt;Self-raising flour&lt;/dt&gt;<br />
&lt;dd&gt;A pre-mixed combination of flour and leavening agents (usually salt and baking powder).&lt;/dd&gt;<br />
&lt;/dl&gt; </pre><br />
<br />
# The method must obviously follow a single correct order, so it should be an ordered list — add the following to your HTML, below the description list: <br />
<br />
<pre>&lt;h2&gt;Method&lt;/h2&gt;<br />
&lt;ol&gt;<br />
&lt;li&gt;Preheat the oven to 190°C.&lt;/li&gt;<br />
&lt;li&gt;Grease a 20cm round cake pan.&lt;/li&gt;<br />
&lt;li&gt;In a medium bowl, whip together the eggs and castor sugar until fluffy.&lt;/li&gt;<br />
&lt;li&gt;Fold in flour.&lt;/li&gt;<br />
&lt;li&gt;Pour mixture into the prepared pan.&lt;/li&gt;<br />
&lt;li&gt;Bake for 20 minutes in the preheated oven, or until the top of the cake springs back when lightly pressed.&lt;/li&gt;<br />
&lt;li&gt;Cool in the pan over a wire rack.&lt;/li&gt;<br />
&lt;/ol&gt;</pre><br />
<br />
The page should look something like Figure 2:<br />
<br />
[[Image:recipepa.png|Screenshot showing the recipe page]]<br />
<br />
Figure 2: The finished recipe page.<br />
<br />
You can also [http://dev.opera.com/articles/view/16-html-lists/stepbystep-recipe.html view the live example page here].<br />
<br />
You’re done!<br />
<br />
== Summary ==<br />
<br />
By this stage you should have a clear understanding of the three different list types in HTML. Using the step-by-step example, you should have created all three and learned how to nest lists inside list items.<br />
<br />
Once you know how to use HTML lists properly, you will probably discover that you use them all the time. There is a lot of content on the web that should have been placed into a list, but was just thrown into a generic element with some line break tags. It’s a lazy practice that causes far more problems than it solves — so don’t do it! You should always create semantically correct lists to help people read your websites. It is a better practice for everyone, not least yourself when you need to maintain your sites later on.<br />
<br />
== Further reading ==<br />
<br />
* [http://www.alistapart.com/articles/taminglists/ A List Apart: Taming Lists]<br />
* [http://www.w3.org/TR/REC-CSS2/generate.html#lists W3C CSS2: list-style-type definition]<br />
<br />
== Exercise questions ==<br />
<br />
* What are the three types of HTML list?<br />
* When would you use each type of list? How would you choose between them?<br />
* How do you nest lists?<br />
* Why should you use CSS rather than HTML to style your lists?<br />
<br />
Note: This material was originally published as part of the Opera Web Standards Curriculum, available as [http://dev.opera.com/articles/view/16-html-lists/ 16: HTML lists], written by Ben Buchanan. Like the original, it is published under the [http://creativecommons.org/licenses/by-nc-sa/2.5/ Creative Commons Attribution, Non Commercial - Share Alike 2.5] license.<br />
<br />
[[Category:Tutorials]]<br />
[[Category:WSC]]<br />
[[Category:HTML]]</div>Cmillshttps://www.w3.org/wiki/index.php?title=Web_Standards_Curriculum&diff=55502Web Standards Curriculum2011-11-17T15:55:21Z<p>Cmills: /* The HTML body */</p>
<hr />
<div>NOTE: THE MATERIAL ON THIS WIKI PAGE IS BEING MIGRATED ONTO THE WEB EDUCATION COMMUNITY GROUP'S DEDICATED WIKI PAGE, AT http://www.w3.org/community/webed/wiki/Main_Page. ITEMS MARKED WITH (MOVED) HAVE ALREADY BEEN MOVED.<br />
<br />
= Web Standards Curriculum table of contents =<br />
<br />
== Introduction ==<br />
<br />
What follows is a list of all the articles within the web standards curriculum, which will give you an essential grounding in HTML5, CSS, JavaScript, accessibility, and the other topics you need to be a modern web developer/designer. Reading them in order makes the most sense, but they are written to work individually, so you can dip in and out as it suits you, if you need to hone individual skills.<br />
<br />
Note: This material was originally published as part of the Opera Web Standards Curriculum, available as [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/#toc Introductory material], written by Chris Mills. Like the original, it is published under the [http://creativecommons.org/licenses/by-nc-sa/2.5/ Creative Commons Attribution, Non Commercial - Share Alike 2.5] license.<br />
<br />
Note #2: Many of the links below currently point to the [http://dev.opera.com dev.opera] versions, but we'll change these over to the W3C versions as we add more to the site. We are very happy to add these to the W3C pages, for a wider readership and more maintenance help.<br />
<br />
== Table of contents ==<br />
<br />
=== The beginning ===<br />
<br />
(MOVED)[[Introduction to the Web Standards Curriculum]]. [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-he/ Hebrew translation] | [http://dev.opera.com/articles/view/1-bevezeto-a-webes-szabvanyokba/ Hungarian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-it/ Italian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/ Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/ Spanish translation]<br />
<br />
=== Introduction to the world of web standards ===<br />
<br />
# (MOVED) [[The history of the Web|The history of the Internet and the web, and the evolution of web standards]]. [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-he/ Hebrew translation] | [http://dev.opera.com/articles/view/2-az-internet-es-a-web-tortenete/ Hungarian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-it/ Italian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud1/index.html Spanish translation]<br />
# (MOVED) [[How does the Internet work]]? [http://dev.opera.com/articles/view/3-hogyan-mukodik-az-internet/ Hungarian translation] | [http://dev.opera.com/articles/view/3-how-does-the-internet-work-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud2/index.html Spanish translation]<br />
# (MOVED) [[The web standards model - HTML CSS and JavaScript]]. [http://dev.opera.com/articles/view/4-a-webes-szabvanyok-modellje/ Hungarian translation] | [http://dev.opera.com/articles/view/4-the-web-standards-model-html-css-a-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud3/index.html Spanish translation]<br />
<br />
=== Web Design Concepts ===<br />
<br />
This section won't go into any code or markup details, and will act as an introduction to the design process before you start to create any graphics or code, as well as concepts of web design such as IA, navigation, usability etc.<br />
<br />
# (MOVED) [[Information_Architecture_-_planning_out_a_web_site|Information Architecture - planning out a web site]]. [http://dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud1/index.html Spanish translation]<br />
# (MOVED) [[What_does_a_good_web_page_need|What does a good web page need?]] [http://dev.opera.com/articles/view/7-mi-kell-egy-jo-weblaphoz/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud2/index.html Spanish translation]<br />
# (MOVED) [[Colour_theory|Colour Theory]]. [http://dev.opera.com/articles/view/8-a-szinek-elmelete/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud3/index.html Spanish translation]<br />
# (MOVED) [[Building up a site wireframe]]. [http://dev.opera.com/articles/view/9-egy-site-keretenek-felepitese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud4/index.html Spanish translation] <br />
# (MOVED) [[Colour schemes and design mockups]]. [http://dev.opera.com/articles/view/10-szinsemak-es-designtervek/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud5/index.html Spanish translation]<br />
# (MOVED) [[Typography on the Web]]. [http://dev.opera.com/articles/view/11-tipografia-a-weben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud6/index.html Spanish translation]<br />
<br />
=== HTML beginnings ===<br />
<br />
# (MOVED) [[The basics of HTML]]. [http://dev.opera.com/articles/view/12-a-html-alapjai/ Hungarian translation] | [http://dev.opera.com/articles/view/12-the-basics-of-html-ja/ Japanese translation]<br />
# (MOVED) [[Doctypes and markup styles]]<br />
# (MOVED) [[The_HTML_head_element|The HTML &lt;head&gt; element]]. [http://dev.opera.com/articles/view/13-a-html-head-eleme/ Hungarian translation] | [http://dev.opera.com/articles/view/13-the-html-head-element-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m3/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m3/ud1/index.html Spanish translation]<br />
# (MOVED) [[More_about_the_document_head|More about the document &lt;head&gt;]]<br />
<br />
=== The HTML body ===<br />
<br />
# (MOVED) [[Marking up textual content in HTML]]. [http://dev.opera.com/articles/view/15-szoveges-reszek-megjelolese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud1/index.html Spanish translation]<br />
# [[HTML lists|HTML Lists]]. [http://dev.opera.com/articles/view/16-html-listak/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud2/index.html Spanish translation]<br />
# [[Images in HTML]]. [http://dev.opera.com/articles/view/17-kepek-a-htmlben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud3/index.html Spanish translation]<br />
# [[HTML_links_-_lets_build_a_web|HTML links — let's build a web!]] [http://dev.opera.com/articles/view/18-html-hivatkozasok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud4/index.html Spanish translation]<br />
# [[HTML tables]]. [http://dev.opera.com/articles/view/19-html-tablazatok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud5/index.html Spanish translation]<br />
# [[HTML forms - the basics]]. [http://dev.opera.com/articles/view/20-html-urlapok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud6/index.html Spanish translation]<br />
# [[HTML5 form additions]]<br />
# [[HTML structural elements]]<br />
# [[Lesser - known semantic elements]]. [http://dev.opera.com/articles/view/21-kevesse-ismert/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Spanish translation]<br />
# [[Creating multiple pages with navigation menus]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud9/index.html Spanish translation]<br />
# [[Validating your HTML]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud10/index.html Spanish translation]<br />
<br />
=== Accessibility ===<br />
<br />
# [[Accessibility basics]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud1/index.html Spanish translation]<br />
# [[Accessibility testing]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud2/index.html Spanish translation]<br />
<br />
=== CSS ===<br />
<br />
# [[CSS_basics|CSS basics]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud1/index.html Spanish translation]<br />
# [[Inheritance and cascade]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud2/index.html Spanish translation]<br />
# [[Text styling with CSS]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud3/index.html Spanish translation]<br />
# [[The_CSS_layout_model_-_boxes_borders_margins_padding|The CSS layout model - boxes, borders, margins, padding]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud4/index.html Spanish translation]<br />
# [[CSS background images]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud5/index.html Spanish translation]<br />
# [[Styling_lists_and_links|Styling lists and links]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud6/index.html Spanish translation]<br />
# [[Styling tables]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html Spanish translation]<br />
# [[Styling forms]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud8/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud8/index.html Spanish translation]<br />
# [[Floats and clearing]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud9/index.html Spanish translation]<br />
# [[CSS static and relative positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud10/index.html Spanish translation]<br />
# [[CSS absolute and fixed positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud11/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud11/index.html | Spanish translation]<br />
# [[Debugging CSS]]<br />
<br />
=== Advanced CSS study ===<br />
<br />
# [[Headers_footers_columns_and_templates|Headers, footers, columns, and templates]]. [http://mosaic.uoc.edu/ac/le/ca/m7/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m7/ud1/index.html Spanish translation]<br />
<br />
=== JavaScript core skills ===<br />
<br />
# [[Programming_-_the_real_basics|Programming - the real basics!]]<br />
# [[What can you do with JavaScript]]<br />
# [[Your first look at JavaScript]]<br />
# [[JavaScript best practices]]<br />
# [[The principles of unobtrusive JavaScript]]<br />
# [[JavaScript functions]]<br />
# [[Objects in JavaScript]]<br />
# [[Traversing the DOM]]<br />
# [[Creating and modifying HTML]]<br />
# [[Dynamic style - manipulating CSS with JavaScript]]<br />
# [[Handling events with JavaScript]]<br />
# [[JavaScript animation]]<br />
# [[Graceful degredation versus progressive enhancement]]<br />
<br />
=== Mobile web development ===<br />
<br />
# [[Introduction_to_mobile_web|Mobile 1: Introduction to mobile web]]<br />
<br />
=== Supplementary articles ===<br />
<br />
* [[Getting your content online]]<br />
* [[Common HTML entities used for typography]]<br />
* [[The web standards curriculum glossary]]<br />
<br />
=== Proposed Updates and Additions to Web Standards Curriculum ===<br />
<br />
* [[WSC_proposed_updates|Web standards curriculum on W3C Wiki: plan for updates 2011]]<br />
<br />
[[Category:Tutorials]]<br />
[[Category:WSC]]</div>Cmillshttps://www.w3.org/wiki/index.php?title=Web_Standards_Curriculum&diff=55501Web Standards Curriculum2011-11-17T15:53:10Z<p>Cmills: /* HTML beginnings */</p>
<hr />
<div>NOTE: THE MATERIAL ON THIS WIKI PAGE IS BEING MIGRATED ONTO THE WEB EDUCATION COMMUNITY GROUP'S DEDICATED WIKI PAGE, AT http://www.w3.org/community/webed/wiki/Main_Page. ITEMS MARKED WITH (MOVED) HAVE ALREADY BEEN MOVED.<br />
<br />
= Web Standards Curriculum table of contents =<br />
<br />
== Introduction ==<br />
<br />
What follows is a list of all the articles within the web standards curriculum, which will give you an essential grounding in HTML5, CSS, JavaScript, accessibility, and the other topics you need to be a modern web developer/designer. Reading them in order makes the most sense, but they are written to work individually, so you can dip in and out as it suits you, if you need to hone individual skills.<br />
<br />
Note: This material was originally published as part of the Opera Web Standards Curriculum, available as [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/#toc Introductory material], written by Chris Mills. Like the original, it is published under the [http://creativecommons.org/licenses/by-nc-sa/2.5/ Creative Commons Attribution, Non Commercial - Share Alike 2.5] license.<br />
<br />
Note #2: Many of the links below currently point to the [http://dev.opera.com dev.opera] versions, but we'll change these over to the W3C versions as we add more to the site. We are very happy to add these to the W3C pages, for a wider readership and more maintenance help.<br />
<br />
== Table of contents ==<br />
<br />
=== The beginning ===<br />
<br />
(MOVED)[[Introduction to the Web Standards Curriculum]]. [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-he/ Hebrew translation] | [http://dev.opera.com/articles/view/1-bevezeto-a-webes-szabvanyokba/ Hungarian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-it/ Italian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/ Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/ Spanish translation]<br />
<br />
=== Introduction to the world of web standards ===<br />
<br />
# (MOVED) [[The history of the Web|The history of the Internet and the web, and the evolution of web standards]]. [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-he/ Hebrew translation] | [http://dev.opera.com/articles/view/2-az-internet-es-a-web-tortenete/ Hungarian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-it/ Italian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud1/index.html Spanish translation]<br />
# (MOVED) [[How does the Internet work]]? [http://dev.opera.com/articles/view/3-hogyan-mukodik-az-internet/ Hungarian translation] | [http://dev.opera.com/articles/view/3-how-does-the-internet-work-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud2/index.html Spanish translation]<br />
# (MOVED) [[The web standards model - HTML CSS and JavaScript]]. [http://dev.opera.com/articles/view/4-a-webes-szabvanyok-modellje/ Hungarian translation] | [http://dev.opera.com/articles/view/4-the-web-standards-model-html-css-a-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud3/index.html Spanish translation]<br />
<br />
=== Web Design Concepts ===<br />
<br />
This section won't go into any code or markup details, and will act as an introduction to the design process before you start to create any graphics or code, as well as concepts of web design such as IA, navigation, usability etc.<br />
<br />
# (MOVED) [[Information_Architecture_-_planning_out_a_web_site|Information Architecture - planning out a web site]]. [http://dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud1/index.html Spanish translation]<br />
# (MOVED) [[What_does_a_good_web_page_need|What does a good web page need?]] [http://dev.opera.com/articles/view/7-mi-kell-egy-jo-weblaphoz/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud2/index.html Spanish translation]<br />
# (MOVED) [[Colour_theory|Colour Theory]]. [http://dev.opera.com/articles/view/8-a-szinek-elmelete/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud3/index.html Spanish translation]<br />
# (MOVED) [[Building up a site wireframe]]. [http://dev.opera.com/articles/view/9-egy-site-keretenek-felepitese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud4/index.html Spanish translation] <br />
# (MOVED) [[Colour schemes and design mockups]]. [http://dev.opera.com/articles/view/10-szinsemak-es-designtervek/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud5/index.html Spanish translation]<br />
# (MOVED) [[Typography on the Web]]. [http://dev.opera.com/articles/view/11-tipografia-a-weben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud6/index.html Spanish translation]<br />
<br />
=== HTML beginnings ===<br />
<br />
# (MOVED) [[The basics of HTML]]. [http://dev.opera.com/articles/view/12-a-html-alapjai/ Hungarian translation] | [http://dev.opera.com/articles/view/12-the-basics-of-html-ja/ Japanese translation]<br />
# (MOVED) [[Doctypes and markup styles]]<br />
# (MOVED) [[The_HTML_head_element|The HTML &lt;head&gt; element]]. [http://dev.opera.com/articles/view/13-a-html-head-eleme/ Hungarian translation] | [http://dev.opera.com/articles/view/13-the-html-head-element-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m3/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m3/ud1/index.html Spanish translation]<br />
# (MOVED) [[More_about_the_document_head|More about the document &lt;head&gt;]]<br />
<br />
=== The HTML body ===<br />
<br />
# [[Marking up textual content in HTML]]. [http://dev.opera.com/articles/view/15-szoveges-reszek-megjelolese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud1/index.html Spanish translation]<br />
# [[HTML lists|HTML Lists]]. [http://dev.opera.com/articles/view/16-html-listak/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud2/index.html Spanish translation]<br />
# [[Images in HTML]]. [http://dev.opera.com/articles/view/17-kepek-a-htmlben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud3/index.html Spanish translation]<br />
# [[HTML_links_-_lets_build_a_web|HTML links — let's build a web!]] [http://dev.opera.com/articles/view/18-html-hivatkozasok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud4/index.html Spanish translation]<br />
# [[HTML tables]]. [http://dev.opera.com/articles/view/19-html-tablazatok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud5/index.html Spanish translation]<br />
# [[HTML forms - the basics]]. [http://dev.opera.com/articles/view/20-html-urlapok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud6/index.html Spanish translation]<br />
# [[HTML5 form additions]]<br />
# [[HTML structural elements]]<br />
# [[Lesser - known semantic elements]]. [http://dev.opera.com/articles/view/21-kevesse-ismert/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Spanish translation]<br />
# [[Creating multiple pages with navigation menus]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud9/index.html Spanish translation]<br />
# [[Validating your HTML]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud10/index.html Spanish translation]<br />
<br />
=== Accessibility ===<br />
<br />
# [[Accessibility basics]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud1/index.html Spanish translation]<br />
# [[Accessibility testing]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud2/index.html Spanish translation]<br />
<br />
=== CSS ===<br />
<br />
# [[CSS_basics|CSS basics]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud1/index.html Spanish translation]<br />
# [[Inheritance and cascade]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud2/index.html Spanish translation]<br />
# [[Text styling with CSS]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud3/index.html Spanish translation]<br />
# [[The_CSS_layout_model_-_boxes_borders_margins_padding|The CSS layout model - boxes, borders, margins, padding]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud4/index.html Spanish translation]<br />
# [[CSS background images]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud5/index.html Spanish translation]<br />
# [[Styling_lists_and_links|Styling lists and links]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud6/index.html Spanish translation]<br />
# [[Styling tables]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html Spanish translation]<br />
# [[Styling forms]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud8/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud8/index.html Spanish translation]<br />
# [[Floats and clearing]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud9/index.html Spanish translation]<br />
# [[CSS static and relative positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud10/index.html Spanish translation]<br />
# [[CSS absolute and fixed positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud11/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud11/index.html | Spanish translation]<br />
# [[Debugging CSS]]<br />
<br />
=== Advanced CSS study ===<br />
<br />
# [[Headers_footers_columns_and_templates|Headers, footers, columns, and templates]]. [http://mosaic.uoc.edu/ac/le/ca/m7/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m7/ud1/index.html Spanish translation]<br />
<br />
=== JavaScript core skills ===<br />
<br />
# [[Programming_-_the_real_basics|Programming - the real basics!]]<br />
# [[What can you do with JavaScript]]<br />
# [[Your first look at JavaScript]]<br />
# [[JavaScript best practices]]<br />
# [[The principles of unobtrusive JavaScript]]<br />
# [[JavaScript functions]]<br />
# [[Objects in JavaScript]]<br />
# [[Traversing the DOM]]<br />
# [[Creating and modifying HTML]]<br />
# [[Dynamic style - manipulating CSS with JavaScript]]<br />
# [[Handling events with JavaScript]]<br />
# [[JavaScript animation]]<br />
# [[Graceful degredation versus progressive enhancement]]<br />
<br />
=== Mobile web development ===<br />
<br />
# [[Introduction_to_mobile_web|Mobile 1: Introduction to mobile web]]<br />
<br />
=== Supplementary articles ===<br />
<br />
* [[Getting your content online]]<br />
* [[Common HTML entities used for typography]]<br />
* [[The web standards curriculum glossary]]<br />
<br />
=== Proposed Updates and Additions to Web Standards Curriculum ===<br />
<br />
* [[WSC_proposed_updates|Web standards curriculum on W3C Wiki: plan for updates 2011]]<br />
<br />
[[Category:Tutorials]]<br />
[[Category:WSC]]</div>Cmillshttps://www.w3.org/wiki/index.php?title=Web_Standards_Curriculum&diff=55500Web Standards Curriculum2011-11-17T15:49:49Z<p>Cmills: /* HTML beginnings */</p>
<hr />
<div>NOTE: THE MATERIAL ON THIS WIKI PAGE IS BEING MIGRATED ONTO THE WEB EDUCATION COMMUNITY GROUP'S DEDICATED WIKI PAGE, AT http://www.w3.org/community/webed/wiki/Main_Page. ITEMS MARKED WITH (MOVED) HAVE ALREADY BEEN MOVED.<br />
<br />
= Web Standards Curriculum table of contents =<br />
<br />
== Introduction ==<br />
<br />
What follows is a list of all the articles within the web standards curriculum, which will give you an essential grounding in HTML5, CSS, JavaScript, accessibility, and the other topics you need to be a modern web developer/designer. Reading them in order makes the most sense, but they are written to work individually, so you can dip in and out as it suits you, if you need to hone individual skills.<br />
<br />
Note: This material was originally published as part of the Opera Web Standards Curriculum, available as [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/#toc Introductory material], written by Chris Mills. Like the original, it is published under the [http://creativecommons.org/licenses/by-nc-sa/2.5/ Creative Commons Attribution, Non Commercial - Share Alike 2.5] license.<br />
<br />
Note #2: Many of the links below currently point to the [http://dev.opera.com dev.opera] versions, but we'll change these over to the W3C versions as we add more to the site. We are very happy to add these to the W3C pages, for a wider readership and more maintenance help.<br />
<br />
== Table of contents ==<br />
<br />
=== The beginning ===<br />
<br />
(MOVED)[[Introduction to the Web Standards Curriculum]]. [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-he/ Hebrew translation] | [http://dev.opera.com/articles/view/1-bevezeto-a-webes-szabvanyokba/ Hungarian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-it/ Italian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/ Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/ Spanish translation]<br />
<br />
=== Introduction to the world of web standards ===<br />
<br />
# (MOVED) [[The history of the Web|The history of the Internet and the web, and the evolution of web standards]]. [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-he/ Hebrew translation] | [http://dev.opera.com/articles/view/2-az-internet-es-a-web-tortenete/ Hungarian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-it/ Italian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud1/index.html Spanish translation]<br />
# (MOVED) [[How does the Internet work]]? [http://dev.opera.com/articles/view/3-hogyan-mukodik-az-internet/ Hungarian translation] | [http://dev.opera.com/articles/view/3-how-does-the-internet-work-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud2/index.html Spanish translation]<br />
# (MOVED) [[The web standards model - HTML CSS and JavaScript]]. [http://dev.opera.com/articles/view/4-a-webes-szabvanyok-modellje/ Hungarian translation] | [http://dev.opera.com/articles/view/4-the-web-standards-model-html-css-a-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud3/index.html Spanish translation]<br />
<br />
=== Web Design Concepts ===<br />
<br />
This section won't go into any code or markup details, and will act as an introduction to the design process before you start to create any graphics or code, as well as concepts of web design such as IA, navigation, usability etc.<br />
<br />
# (MOVED) [[Information_Architecture_-_planning_out_a_web_site|Information Architecture - planning out a web site]]. [http://dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud1/index.html Spanish translation]<br />
# (MOVED) [[What_does_a_good_web_page_need|What does a good web page need?]] [http://dev.opera.com/articles/view/7-mi-kell-egy-jo-weblaphoz/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud2/index.html Spanish translation]<br />
# (MOVED) [[Colour_theory|Colour Theory]]. [http://dev.opera.com/articles/view/8-a-szinek-elmelete/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud3/index.html Spanish translation]<br />
# (MOVED) [[Building up a site wireframe]]. [http://dev.opera.com/articles/view/9-egy-site-keretenek-felepitese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud4/index.html Spanish translation] <br />
# (MOVED) [[Colour schemes and design mockups]]. [http://dev.opera.com/articles/view/10-szinsemak-es-designtervek/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud5/index.html Spanish translation]<br />
# (MOVED) [[Typography on the Web]]. [http://dev.opera.com/articles/view/11-tipografia-a-weben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud6/index.html Spanish translation]<br />
<br />
=== HTML beginnings ===<br />
<br />
# (MOVED) [[The basics of HTML]]. [http://dev.opera.com/articles/view/12-a-html-alapjai/ Hungarian translation] | [http://dev.opera.com/articles/view/12-the-basics-of-html-ja/ Japanese translation]<br />
# (MOVED) [[Doctypes and markup styles]]<br />
# (MOVED) [[The_HTML_head_element|The HTML &lt;head&gt; element]]. [http://dev.opera.com/articles/view/13-a-html-head-eleme/ Hungarian translation] | [http://dev.opera.com/articles/view/13-the-html-head-element-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m3/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m3/ud1/index.html Spanish translation]<br />
# [[More_about_the_document_head|More about the document &lt;head&gt;]]<br />
<br />
=== The HTML body ===<br />
<br />
# [[Marking up textual content in HTML]]. [http://dev.opera.com/articles/view/15-szoveges-reszek-megjelolese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud1/index.html Spanish translation]<br />
# [[HTML lists|HTML Lists]]. [http://dev.opera.com/articles/view/16-html-listak/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud2/index.html Spanish translation]<br />
# [[Images in HTML]]. [http://dev.opera.com/articles/view/17-kepek-a-htmlben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud3/index.html Spanish translation]<br />
# [[HTML_links_-_lets_build_a_web|HTML links — let's build a web!]] [http://dev.opera.com/articles/view/18-html-hivatkozasok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud4/index.html Spanish translation]<br />
# [[HTML tables]]. [http://dev.opera.com/articles/view/19-html-tablazatok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud5/index.html Spanish translation]<br />
# [[HTML forms - the basics]]. [http://dev.opera.com/articles/view/20-html-urlapok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud6/index.html Spanish translation]<br />
# [[HTML5 form additions]]<br />
# [[HTML structural elements]]<br />
# [[Lesser - known semantic elements]]. [http://dev.opera.com/articles/view/21-kevesse-ismert/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Spanish translation]<br />
# [[Creating multiple pages with navigation menus]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud9/index.html Spanish translation]<br />
# [[Validating your HTML]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud10/index.html Spanish translation]<br />
<br />
=== Accessibility ===<br />
<br />
# [[Accessibility basics]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud1/index.html Spanish translation]<br />
# [[Accessibility testing]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud2/index.html Spanish translation]<br />
<br />
=== CSS ===<br />
<br />
# [[CSS_basics|CSS basics]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud1/index.html Spanish translation]<br />
# [[Inheritance and cascade]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud2/index.html Spanish translation]<br />
# [[Text styling with CSS]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud3/index.html Spanish translation]<br />
# [[The_CSS_layout_model_-_boxes_borders_margins_padding|The CSS layout model - boxes, borders, margins, padding]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud4/index.html Spanish translation]<br />
# [[CSS background images]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud5/index.html Spanish translation]<br />
# [[Styling_lists_and_links|Styling lists and links]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud6/index.html Spanish translation]<br />
# [[Styling tables]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html Spanish translation]<br />
# [[Styling forms]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud8/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud8/index.html Spanish translation]<br />
# [[Floats and clearing]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud9/index.html Spanish translation]<br />
# [[CSS static and relative positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud10/index.html Spanish translation]<br />
# [[CSS absolute and fixed positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud11/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud11/index.html | Spanish translation]<br />
# [[Debugging CSS]]<br />
<br />
=== Advanced CSS study ===<br />
<br />
# [[Headers_footers_columns_and_templates|Headers, footers, columns, and templates]]. [http://mosaic.uoc.edu/ac/le/ca/m7/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m7/ud1/index.html Spanish translation]<br />
<br />
=== JavaScript core skills ===<br />
<br />
# [[Programming_-_the_real_basics|Programming - the real basics!]]<br />
# [[What can you do with JavaScript]]<br />
# [[Your first look at JavaScript]]<br />
# [[JavaScript best practices]]<br />
# [[The principles of unobtrusive JavaScript]]<br />
# [[JavaScript functions]]<br />
# [[Objects in JavaScript]]<br />
# [[Traversing the DOM]]<br />
# [[Creating and modifying HTML]]<br />
# [[Dynamic style - manipulating CSS with JavaScript]]<br />
# [[Handling events with JavaScript]]<br />
# [[JavaScript animation]]<br />
# [[Graceful degredation versus progressive enhancement]]<br />
<br />
=== Mobile web development ===<br />
<br />
# [[Introduction_to_mobile_web|Mobile 1: Introduction to mobile web]]<br />
<br />
=== Supplementary articles ===<br />
<br />
* [[Getting your content online]]<br />
* [[Common HTML entities used for typography]]<br />
* [[The web standards curriculum glossary]]<br />
<br />
=== Proposed Updates and Additions to Web Standards Curriculum ===<br />
<br />
* [[WSC_proposed_updates|Web standards curriculum on W3C Wiki: plan for updates 2011]]<br />
<br />
[[Category:Tutorials]]<br />
[[Category:WSC]]</div>Cmillshttps://www.w3.org/wiki/index.php?title=Web_Standards_Curriculum&diff=55499Web Standards Curriculum2011-11-17T15:44:01Z<p>Cmills: /* HTML beginnings */</p>
<hr />
<div>NOTE: THE MATERIAL ON THIS WIKI PAGE IS BEING MIGRATED ONTO THE WEB EDUCATION COMMUNITY GROUP'S DEDICATED WIKI PAGE, AT http://www.w3.org/community/webed/wiki/Main_Page. ITEMS MARKED WITH (MOVED) HAVE ALREADY BEEN MOVED.<br />
<br />
= Web Standards Curriculum table of contents =<br />
<br />
== Introduction ==<br />
<br />
What follows is a list of all the articles within the web standards curriculum, which will give you an essential grounding in HTML5, CSS, JavaScript, accessibility, and the other topics you need to be a modern web developer/designer. Reading them in order makes the most sense, but they are written to work individually, so you can dip in and out as it suits you, if you need to hone individual skills.<br />
<br />
Note: This material was originally published as part of the Opera Web Standards Curriculum, available as [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/#toc Introductory material], written by Chris Mills. Like the original, it is published under the [http://creativecommons.org/licenses/by-nc-sa/2.5/ Creative Commons Attribution, Non Commercial - Share Alike 2.5] license.<br />
<br />
Note #2: Many of the links below currently point to the [http://dev.opera.com dev.opera] versions, but we'll change these over to the W3C versions as we add more to the site. We are very happy to add these to the W3C pages, for a wider readership and more maintenance help.<br />
<br />
== Table of contents ==<br />
<br />
=== The beginning ===<br />
<br />
(MOVED)[[Introduction to the Web Standards Curriculum]]. [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-he/ Hebrew translation] | [http://dev.opera.com/articles/view/1-bevezeto-a-webes-szabvanyokba/ Hungarian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-it/ Italian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/ Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/ Spanish translation]<br />
<br />
=== Introduction to the world of web standards ===<br />
<br />
# (MOVED) [[The history of the Web|The history of the Internet and the web, and the evolution of web standards]]. [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-he/ Hebrew translation] | [http://dev.opera.com/articles/view/2-az-internet-es-a-web-tortenete/ Hungarian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-it/ Italian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud1/index.html Spanish translation]<br />
# (MOVED) [[How does the Internet work]]? [http://dev.opera.com/articles/view/3-hogyan-mukodik-az-internet/ Hungarian translation] | [http://dev.opera.com/articles/view/3-how-does-the-internet-work-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud2/index.html Spanish translation]<br />
# (MOVED) [[The web standards model - HTML CSS and JavaScript]]. [http://dev.opera.com/articles/view/4-a-webes-szabvanyok-modellje/ Hungarian translation] | [http://dev.opera.com/articles/view/4-the-web-standards-model-html-css-a-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud3/index.html Spanish translation]<br />
<br />
=== Web Design Concepts ===<br />
<br />
This section won't go into any code or markup details, and will act as an introduction to the design process before you start to create any graphics or code, as well as concepts of web design such as IA, navigation, usability etc.<br />
<br />
# (MOVED) [[Information_Architecture_-_planning_out_a_web_site|Information Architecture - planning out a web site]]. [http://dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud1/index.html Spanish translation]<br />
# (MOVED) [[What_does_a_good_web_page_need|What does a good web page need?]] [http://dev.opera.com/articles/view/7-mi-kell-egy-jo-weblaphoz/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud2/index.html Spanish translation]<br />
# (MOVED) [[Colour_theory|Colour Theory]]. [http://dev.opera.com/articles/view/8-a-szinek-elmelete/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud3/index.html Spanish translation]<br />
# (MOVED) [[Building up a site wireframe]]. [http://dev.opera.com/articles/view/9-egy-site-keretenek-felepitese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud4/index.html Spanish translation] <br />
# (MOVED) [[Colour schemes and design mockups]]. [http://dev.opera.com/articles/view/10-szinsemak-es-designtervek/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud5/index.html Spanish translation]<br />
# (MOVED) [[Typography on the Web]]. [http://dev.opera.com/articles/view/11-tipografia-a-weben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud6/index.html Spanish translation]<br />
<br />
=== HTML beginnings ===<br />
<br />
# (MOVED) [[The basics of HTML]]. [http://dev.opera.com/articles/view/12-a-html-alapjai/ Hungarian translation] | [http://dev.opera.com/articles/view/12-the-basics-of-html-ja/ Japanese translation]<br />
# (MOVED) [[Doctypes and markup styles]]<br />
# [[The_HTML_head_element|The HTML &lt;head&gt; element]]. [http://dev.opera.com/articles/view/13-a-html-head-eleme/ Hungarian translation] | [http://dev.opera.com/articles/view/13-the-html-head-element-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m3/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m3/ud1/index.html Spanish translation]<br />
# [[More_about_the_document_head|More about the document &lt;head&gt;]]<br />
<br />
=== The HTML body ===<br />
<br />
# [[Marking up textual content in HTML]]. [http://dev.opera.com/articles/view/15-szoveges-reszek-megjelolese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud1/index.html Spanish translation]<br />
# [[HTML lists|HTML Lists]]. [http://dev.opera.com/articles/view/16-html-listak/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud2/index.html Spanish translation]<br />
# [[Images in HTML]]. [http://dev.opera.com/articles/view/17-kepek-a-htmlben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud3/index.html Spanish translation]<br />
# [[HTML_links_-_lets_build_a_web|HTML links — let's build a web!]] [http://dev.opera.com/articles/view/18-html-hivatkozasok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud4/index.html Spanish translation]<br />
# [[HTML tables]]. [http://dev.opera.com/articles/view/19-html-tablazatok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud5/index.html Spanish translation]<br />
# [[HTML forms - the basics]]. [http://dev.opera.com/articles/view/20-html-urlapok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud6/index.html Spanish translation]<br />
# [[HTML5 form additions]]<br />
# [[HTML structural elements]]<br />
# [[Lesser - known semantic elements]]. [http://dev.opera.com/articles/view/21-kevesse-ismert/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Spanish translation]<br />
# [[Creating multiple pages with navigation menus]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud9/index.html Spanish translation]<br />
# [[Validating your HTML]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud10/index.html Spanish translation]<br />
<br />
=== Accessibility ===<br />
<br />
# [[Accessibility basics]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud1/index.html Spanish translation]<br />
# [[Accessibility testing]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud2/index.html Spanish translation]<br />
<br />
=== CSS ===<br />
<br />
# [[CSS_basics|CSS basics]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud1/index.html Spanish translation]<br />
# [[Inheritance and cascade]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud2/index.html Spanish translation]<br />
# [[Text styling with CSS]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud3/index.html Spanish translation]<br />
# [[The_CSS_layout_model_-_boxes_borders_margins_padding|The CSS layout model - boxes, borders, margins, padding]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud4/index.html Spanish translation]<br />
# [[CSS background images]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud5/index.html Spanish translation]<br />
# [[Styling_lists_and_links|Styling lists and links]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud6/index.html Spanish translation]<br />
# [[Styling tables]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html Spanish translation]<br />
# [[Styling forms]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud8/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud8/index.html Spanish translation]<br />
# [[Floats and clearing]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud9/index.html Spanish translation]<br />
# [[CSS static and relative positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud10/index.html Spanish translation]<br />
# [[CSS absolute and fixed positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud11/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud11/index.html | Spanish translation]<br />
# [[Debugging CSS]]<br />
<br />
=== Advanced CSS study ===<br />
<br />
# [[Headers_footers_columns_and_templates|Headers, footers, columns, and templates]]. [http://mosaic.uoc.edu/ac/le/ca/m7/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m7/ud1/index.html Spanish translation]<br />
<br />
=== JavaScript core skills ===<br />
<br />
# [[Programming_-_the_real_basics|Programming - the real basics!]]<br />
# [[What can you do with JavaScript]]<br />
# [[Your first look at JavaScript]]<br />
# [[JavaScript best practices]]<br />
# [[The principles of unobtrusive JavaScript]]<br />
# [[JavaScript functions]]<br />
# [[Objects in JavaScript]]<br />
# [[Traversing the DOM]]<br />
# [[Creating and modifying HTML]]<br />
# [[Dynamic style - manipulating CSS with JavaScript]]<br />
# [[Handling events with JavaScript]]<br />
# [[JavaScript animation]]<br />
# [[Graceful degredation versus progressive enhancement]]<br />
<br />
=== Mobile web development ===<br />
<br />
# [[Introduction_to_mobile_web|Mobile 1: Introduction to mobile web]]<br />
<br />
=== Supplementary articles ===<br />
<br />
* [[Getting your content online]]<br />
* [[Common HTML entities used for typography]]<br />
* [[The web standards curriculum glossary]]<br />
<br />
=== Proposed Updates and Additions to Web Standards Curriculum ===<br />
<br />
* [[WSC_proposed_updates|Web standards curriculum on W3C Wiki: plan for updates 2011]]<br />
<br />
[[Category:Tutorials]]<br />
[[Category:WSC]]</div>Cmillshttps://www.w3.org/wiki/index.php?title=Web_Standards_Curriculum&diff=55498Web Standards Curriculum2011-11-17T15:42:35Z<p>Cmills: /* HTML beginnings */</p>
<hr />
<div>NOTE: THE MATERIAL ON THIS WIKI PAGE IS BEING MIGRATED ONTO THE WEB EDUCATION COMMUNITY GROUP'S DEDICATED WIKI PAGE, AT http://www.w3.org/community/webed/wiki/Main_Page. ITEMS MARKED WITH (MOVED) HAVE ALREADY BEEN MOVED.<br />
<br />
= Web Standards Curriculum table of contents =<br />
<br />
== Introduction ==<br />
<br />
What follows is a list of all the articles within the web standards curriculum, which will give you an essential grounding in HTML5, CSS, JavaScript, accessibility, and the other topics you need to be a modern web developer/designer. Reading them in order makes the most sense, but they are written to work individually, so you can dip in and out as it suits you, if you need to hone individual skills.<br />
<br />
Note: This material was originally published as part of the Opera Web Standards Curriculum, available as [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/#toc Introductory material], written by Chris Mills. Like the original, it is published under the [http://creativecommons.org/licenses/by-nc-sa/2.5/ Creative Commons Attribution, Non Commercial - Share Alike 2.5] license.<br />
<br />
Note #2: Many of the links below currently point to the [http://dev.opera.com dev.opera] versions, but we'll change these over to the W3C versions as we add more to the site. We are very happy to add these to the W3C pages, for a wider readership and more maintenance help.<br />
<br />
== Table of contents ==<br />
<br />
=== The beginning ===<br />
<br />
(MOVED)[[Introduction to the Web Standards Curriculum]]. [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-he/ Hebrew translation] | [http://dev.opera.com/articles/view/1-bevezeto-a-webes-szabvanyokba/ Hungarian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-it/ Italian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/ Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/ Spanish translation]<br />
<br />
=== Introduction to the world of web standards ===<br />
<br />
# (MOVED) [[The history of the Web|The history of the Internet and the web, and the evolution of web standards]]. [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-he/ Hebrew translation] | [http://dev.opera.com/articles/view/2-az-internet-es-a-web-tortenete/ Hungarian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-it/ Italian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud1/index.html Spanish translation]<br />
# (MOVED) [[How does the Internet work]]? [http://dev.opera.com/articles/view/3-hogyan-mukodik-az-internet/ Hungarian translation] | [http://dev.opera.com/articles/view/3-how-does-the-internet-work-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud2/index.html Spanish translation]<br />
# (MOVED) [[The web standards model - HTML CSS and JavaScript]]. [http://dev.opera.com/articles/view/4-a-webes-szabvanyok-modellje/ Hungarian translation] | [http://dev.opera.com/articles/view/4-the-web-standards-model-html-css-a-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud3/index.html Spanish translation]<br />
<br />
=== Web Design Concepts ===<br />
<br />
This section won't go into any code or markup details, and will act as an introduction to the design process before you start to create any graphics or code, as well as concepts of web design such as IA, navigation, usability etc.<br />
<br />
# (MOVED) [[Information_Architecture_-_planning_out_a_web_site|Information Architecture - planning out a web site]]. [http://dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud1/index.html Spanish translation]<br />
# (MOVED) [[What_does_a_good_web_page_need|What does a good web page need?]] [http://dev.opera.com/articles/view/7-mi-kell-egy-jo-weblaphoz/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud2/index.html Spanish translation]<br />
# (MOVED) [[Colour_theory|Colour Theory]]. [http://dev.opera.com/articles/view/8-a-szinek-elmelete/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud3/index.html Spanish translation]<br />
# (MOVED) [[Building up a site wireframe]]. [http://dev.opera.com/articles/view/9-egy-site-keretenek-felepitese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud4/index.html Spanish translation] <br />
# (MOVED) [[Colour schemes and design mockups]]. [http://dev.opera.com/articles/view/10-szinsemak-es-designtervek/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud5/index.html Spanish translation]<br />
# (MOVED) [[Typography on the Web]]. [http://dev.opera.com/articles/view/11-tipografia-a-weben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud6/index.html Spanish translation]<br />
<br />
=== HTML beginnings ===<br />
<br />
# (MOVED) [[The basics of HTML]]. [http://dev.opera.com/articles/view/12-a-html-alapjai/ Hungarian translation] | [http://dev.opera.com/articles/view/12-the-basics-of-html-ja/ Japanese translation]<br />
# [[Doctypes and markup styles]]<br />
# [[The_HTML_head_element|The HTML &lt;head&gt; element]]. [http://dev.opera.com/articles/view/13-a-html-head-eleme/ Hungarian translation] | [http://dev.opera.com/articles/view/13-the-html-head-element-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m3/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m3/ud1/index.html Spanish translation]<br />
# [[More_about_the_document_head|More about the document &lt;head&gt;]]<br />
<br />
=== The HTML body ===<br />
<br />
# [[Marking up textual content in HTML]]. [http://dev.opera.com/articles/view/15-szoveges-reszek-megjelolese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud1/index.html Spanish translation]<br />
# [[HTML lists|HTML Lists]]. [http://dev.opera.com/articles/view/16-html-listak/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud2/index.html Spanish translation]<br />
# [[Images in HTML]]. [http://dev.opera.com/articles/view/17-kepek-a-htmlben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud3/index.html Spanish translation]<br />
# [[HTML_links_-_lets_build_a_web|HTML links — let's build a web!]] [http://dev.opera.com/articles/view/18-html-hivatkozasok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud4/index.html Spanish translation]<br />
# [[HTML tables]]. [http://dev.opera.com/articles/view/19-html-tablazatok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud5/index.html Spanish translation]<br />
# [[HTML forms - the basics]]. [http://dev.opera.com/articles/view/20-html-urlapok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud6/index.html Spanish translation]<br />
# [[HTML5 form additions]]<br />
# [[HTML structural elements]]<br />
# [[Lesser - known semantic elements]]. [http://dev.opera.com/articles/view/21-kevesse-ismert/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Spanish translation]<br />
# [[Creating multiple pages with navigation menus]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud9/index.html Spanish translation]<br />
# [[Validating your HTML]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud10/index.html Spanish translation]<br />
<br />
=== Accessibility ===<br />
<br />
# [[Accessibility basics]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud1/index.html Spanish translation]<br />
# [[Accessibility testing]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud2/index.html Spanish translation]<br />
<br />
=== CSS ===<br />
<br />
# [[CSS_basics|CSS basics]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud1/index.html Spanish translation]<br />
# [[Inheritance and cascade]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud2/index.html Spanish translation]<br />
# [[Text styling with CSS]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud3/index.html Spanish translation]<br />
# [[The_CSS_layout_model_-_boxes_borders_margins_padding|The CSS layout model - boxes, borders, margins, padding]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud4/index.html Spanish translation]<br />
# [[CSS background images]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud5/index.html Spanish translation]<br />
# [[Styling_lists_and_links|Styling lists and links]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud6/index.html Spanish translation]<br />
# [[Styling tables]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html Spanish translation]<br />
# [[Styling forms]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud8/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud8/index.html Spanish translation]<br />
# [[Floats and clearing]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud9/index.html Spanish translation]<br />
# [[CSS static and relative positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud10/index.html Spanish translation]<br />
# [[CSS absolute and fixed positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud11/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud11/index.html | Spanish translation]<br />
# [[Debugging CSS]]<br />
<br />
=== Advanced CSS study ===<br />
<br />
# [[Headers_footers_columns_and_templates|Headers, footers, columns, and templates]]. [http://mosaic.uoc.edu/ac/le/ca/m7/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m7/ud1/index.html Spanish translation]<br />
<br />
=== JavaScript core skills ===<br />
<br />
# [[Programming_-_the_real_basics|Programming - the real basics!]]<br />
# [[What can you do with JavaScript]]<br />
# [[Your first look at JavaScript]]<br />
# [[JavaScript best practices]]<br />
# [[The principles of unobtrusive JavaScript]]<br />
# [[JavaScript functions]]<br />
# [[Objects in JavaScript]]<br />
# [[Traversing the DOM]]<br />
# [[Creating and modifying HTML]]<br />
# [[Dynamic style - manipulating CSS with JavaScript]]<br />
# [[Handling events with JavaScript]]<br />
# [[JavaScript animation]]<br />
# [[Graceful degredation versus progressive enhancement]]<br />
<br />
=== Mobile web development ===<br />
<br />
# [[Introduction_to_mobile_web|Mobile 1: Introduction to mobile web]]<br />
<br />
=== Supplementary articles ===<br />
<br />
* [[Getting your content online]]<br />
* [[Common HTML entities used for typography]]<br />
* [[The web standards curriculum glossary]]<br />
<br />
=== Proposed Updates and Additions to Web Standards Curriculum ===<br />
<br />
* [[WSC_proposed_updates|Web standards curriculum on W3C Wiki: plan for updates 2011]]<br />
<br />
[[Category:Tutorials]]<br />
[[Category:WSC]]</div>Cmillshttps://www.w3.org/wiki/index.php?title=Web_Standards_Curriculum&diff=55497Web Standards Curriculum2011-11-17T15:38:51Z<p>Cmills: /* Web Design Concepts */</p>
<hr />
<div>NOTE: THE MATERIAL ON THIS WIKI PAGE IS BEING MIGRATED ONTO THE WEB EDUCATION COMMUNITY GROUP'S DEDICATED WIKI PAGE, AT http://www.w3.org/community/webed/wiki/Main_Page. ITEMS MARKED WITH (MOVED) HAVE ALREADY BEEN MOVED.<br />
<br />
= Web Standards Curriculum table of contents =<br />
<br />
== Introduction ==<br />
<br />
What follows is a list of all the articles within the web standards curriculum, which will give you an essential grounding in HTML5, CSS, JavaScript, accessibility, and the other topics you need to be a modern web developer/designer. Reading them in order makes the most sense, but they are written to work individually, so you can dip in and out as it suits you, if you need to hone individual skills.<br />
<br />
Note: This material was originally published as part of the Opera Web Standards Curriculum, available as [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/#toc Introductory material], written by Chris Mills. Like the original, it is published under the [http://creativecommons.org/licenses/by-nc-sa/2.5/ Creative Commons Attribution, Non Commercial - Share Alike 2.5] license.<br />
<br />
Note #2: Many of the links below currently point to the [http://dev.opera.com dev.opera] versions, but we'll change these over to the W3C versions as we add more to the site. We are very happy to add these to the W3C pages, for a wider readership and more maintenance help.<br />
<br />
== Table of contents ==<br />
<br />
=== The beginning ===<br />
<br />
(MOVED)[[Introduction to the Web Standards Curriculum]]. [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-he/ Hebrew translation] | [http://dev.opera.com/articles/view/1-bevezeto-a-webes-szabvanyokba/ Hungarian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-it/ Italian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/ Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/ Spanish translation]<br />
<br />
=== Introduction to the world of web standards ===<br />
<br />
# (MOVED) [[The history of the Web|The history of the Internet and the web, and the evolution of web standards]]. [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-he/ Hebrew translation] | [http://dev.opera.com/articles/view/2-az-internet-es-a-web-tortenete/ Hungarian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-it/ Italian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud1/index.html Spanish translation]<br />
# (MOVED) [[How does the Internet work]]? [http://dev.opera.com/articles/view/3-hogyan-mukodik-az-internet/ Hungarian translation] | [http://dev.opera.com/articles/view/3-how-does-the-internet-work-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud2/index.html Spanish translation]<br />
# (MOVED) [[The web standards model - HTML CSS and JavaScript]]. [http://dev.opera.com/articles/view/4-a-webes-szabvanyok-modellje/ Hungarian translation] | [http://dev.opera.com/articles/view/4-the-web-standards-model-html-css-a-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud3/index.html Spanish translation]<br />
<br />
=== Web Design Concepts ===<br />
<br />
This section won't go into any code or markup details, and will act as an introduction to the design process before you start to create any graphics or code, as well as concepts of web design such as IA, navigation, usability etc.<br />
<br />
# (MOVED) [[Information_Architecture_-_planning_out_a_web_site|Information Architecture - planning out a web site]]. [http://dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud1/index.html Spanish translation]<br />
# (MOVED) [[What_does_a_good_web_page_need|What does a good web page need?]] [http://dev.opera.com/articles/view/7-mi-kell-egy-jo-weblaphoz/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud2/index.html Spanish translation]<br />
# (MOVED) [[Colour_theory|Colour Theory]]. [http://dev.opera.com/articles/view/8-a-szinek-elmelete/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud3/index.html Spanish translation]<br />
# (MOVED) [[Building up a site wireframe]]. [http://dev.opera.com/articles/view/9-egy-site-keretenek-felepitese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud4/index.html Spanish translation] <br />
# (MOVED) [[Colour schemes and design mockups]]. [http://dev.opera.com/articles/view/10-szinsemak-es-designtervek/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud5/index.html Spanish translation]<br />
# (MOVED) [[Typography on the Web]]. [http://dev.opera.com/articles/view/11-tipografia-a-weben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud6/index.html Spanish translation]<br />
<br />
=== HTML beginnings ===<br />
<br />
# [[The basics of HTML]]. [http://dev.opera.com/articles/view/12-a-html-alapjai/ Hungarian translation] | [http://dev.opera.com/articles/view/12-the-basics-of-html-ja/ Japanese translation]<br />
# [[Doctypes and markup styles]]<br />
# [[The_HTML_head_element|The HTML &lt;head&gt; element]]. [http://dev.opera.com/articles/view/13-a-html-head-eleme/ Hungarian translation] | [http://dev.opera.com/articles/view/13-the-html-head-element-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m3/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m3/ud1/index.html Spanish translation]<br />
# [[More_about_the_document_head|More about the document &lt;head&gt;]]<br />
<br />
=== The HTML body ===<br />
<br />
# [[Marking up textual content in HTML]]. [http://dev.opera.com/articles/view/15-szoveges-reszek-megjelolese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud1/index.html Spanish translation]<br />
# [[HTML lists|HTML Lists]]. [http://dev.opera.com/articles/view/16-html-listak/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud2/index.html Spanish translation]<br />
# [[Images in HTML]]. [http://dev.opera.com/articles/view/17-kepek-a-htmlben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud3/index.html Spanish translation]<br />
# [[HTML_links_-_lets_build_a_web|HTML links — let's build a web!]] [http://dev.opera.com/articles/view/18-html-hivatkozasok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud4/index.html Spanish translation]<br />
# [[HTML tables]]. [http://dev.opera.com/articles/view/19-html-tablazatok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud5/index.html Spanish translation]<br />
# [[HTML forms - the basics]]. [http://dev.opera.com/articles/view/20-html-urlapok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud6/index.html Spanish translation]<br />
# [[HTML5 form additions]]<br />
# [[HTML structural elements]]<br />
# [[Lesser - known semantic elements]]. [http://dev.opera.com/articles/view/21-kevesse-ismert/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Spanish translation]<br />
# [[Creating multiple pages with navigation menus]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud9/index.html Spanish translation]<br />
# [[Validating your HTML]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud10/index.html Spanish translation]<br />
<br />
=== Accessibility ===<br />
<br />
# [[Accessibility basics]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud1/index.html Spanish translation]<br />
# [[Accessibility testing]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud2/index.html Spanish translation]<br />
<br />
=== CSS ===<br />
<br />
# [[CSS_basics|CSS basics]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud1/index.html Spanish translation]<br />
# [[Inheritance and cascade]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud2/index.html Spanish translation]<br />
# [[Text styling with CSS]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud3/index.html Spanish translation]<br />
# [[The_CSS_layout_model_-_boxes_borders_margins_padding|The CSS layout model - boxes, borders, margins, padding]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud4/index.html Spanish translation]<br />
# [[CSS background images]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud5/index.html Spanish translation]<br />
# [[Styling_lists_and_links|Styling lists and links]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud6/index.html Spanish translation]<br />
# [[Styling tables]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html Spanish translation]<br />
# [[Styling forms]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud8/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud8/index.html Spanish translation]<br />
# [[Floats and clearing]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud9/index.html Spanish translation]<br />
# [[CSS static and relative positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud10/index.html Spanish translation]<br />
# [[CSS absolute and fixed positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud11/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud11/index.html | Spanish translation]<br />
# [[Debugging CSS]]<br />
<br />
=== Advanced CSS study ===<br />
<br />
# [[Headers_footers_columns_and_templates|Headers, footers, columns, and templates]]. [http://mosaic.uoc.edu/ac/le/ca/m7/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m7/ud1/index.html Spanish translation]<br />
<br />
=== JavaScript core skills ===<br />
<br />
# [[Programming_-_the_real_basics|Programming - the real basics!]]<br />
# [[What can you do with JavaScript]]<br />
# [[Your first look at JavaScript]]<br />
# [[JavaScript best practices]]<br />
# [[The principles of unobtrusive JavaScript]]<br />
# [[JavaScript functions]]<br />
# [[Objects in JavaScript]]<br />
# [[Traversing the DOM]]<br />
# [[Creating and modifying HTML]]<br />
# [[Dynamic style - manipulating CSS with JavaScript]]<br />
# [[Handling events with JavaScript]]<br />
# [[JavaScript animation]]<br />
# [[Graceful degredation versus progressive enhancement]]<br />
<br />
=== Mobile web development ===<br />
<br />
# [[Introduction_to_mobile_web|Mobile 1: Introduction to mobile web]]<br />
<br />
=== Supplementary articles ===<br />
<br />
* [[Getting your content online]]<br />
* [[Common HTML entities used for typography]]<br />
* [[The web standards curriculum glossary]]<br />
<br />
=== Proposed Updates and Additions to Web Standards Curriculum ===<br />
<br />
* [[WSC_proposed_updates|Web standards curriculum on W3C Wiki: plan for updates 2011]]<br />
<br />
[[Category:Tutorials]]<br />
[[Category:WSC]]</div>Cmillshttps://www.w3.org/wiki/index.php?title=Web_Standards_Curriculum&diff=55494Web Standards Curriculum2011-11-17T14:52:45Z<p>Cmills: /* Web Design Concepts */</p>
<hr />
<div>NOTE: THE MATERIAL ON THIS WIKI PAGE IS BEING MIGRATED ONTO THE WEB EDUCATION COMMUNITY GROUP'S DEDICATED WIKI PAGE, AT http://www.w3.org/community/webed/wiki/Main_Page. ITEMS MARKED WITH (MOVED) HAVE ALREADY BEEN MOVED.<br />
<br />
= Web Standards Curriculum table of contents =<br />
<br />
== Introduction ==<br />
<br />
What follows is a list of all the articles within the web standards curriculum, which will give you an essential grounding in HTML5, CSS, JavaScript, accessibility, and the other topics you need to be a modern web developer/designer. Reading them in order makes the most sense, but they are written to work individually, so you can dip in and out as it suits you, if you need to hone individual skills.<br />
<br />
Note: This material was originally published as part of the Opera Web Standards Curriculum, available as [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/#toc Introductory material], written by Chris Mills. Like the original, it is published under the [http://creativecommons.org/licenses/by-nc-sa/2.5/ Creative Commons Attribution, Non Commercial - Share Alike 2.5] license.<br />
<br />
Note #2: Many of the links below currently point to the [http://dev.opera.com dev.opera] versions, but we'll change these over to the W3C versions as we add more to the site. We are very happy to add these to the W3C pages, for a wider readership and more maintenance help.<br />
<br />
== Table of contents ==<br />
<br />
=== The beginning ===<br />
<br />
(MOVED)[[Introduction to the Web Standards Curriculum]]. [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-he/ Hebrew translation] | [http://dev.opera.com/articles/view/1-bevezeto-a-webes-szabvanyokba/ Hungarian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-it/ Italian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/ Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/ Spanish translation]<br />
<br />
=== Introduction to the world of web standards ===<br />
<br />
# (MOVED) [[The history of the Web|The history of the Internet and the web, and the evolution of web standards]]. [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-he/ Hebrew translation] | [http://dev.opera.com/articles/view/2-az-internet-es-a-web-tortenete/ Hungarian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-it/ Italian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud1/index.html Spanish translation]<br />
# (MOVED) [[How does the Internet work]]? [http://dev.opera.com/articles/view/3-hogyan-mukodik-az-internet/ Hungarian translation] | [http://dev.opera.com/articles/view/3-how-does-the-internet-work-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud2/index.html Spanish translation]<br />
# (MOVED) [[The web standards model - HTML CSS and JavaScript]]. [http://dev.opera.com/articles/view/4-a-webes-szabvanyok-modellje/ Hungarian translation] | [http://dev.opera.com/articles/view/4-the-web-standards-model-html-css-a-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud3/index.html Spanish translation]<br />
<br />
=== Web Design Concepts ===<br />
<br />
This section won't go into any code or markup details, and will act as an introduction to the design process before you start to create any graphics or code, as well as concepts of web design such as IA, navigation, usability etc.<br />
<br />
# (MOVED) [[Information_Architecture_-_planning_out_a_web_site|Information Architecture - planning out a web site]]. [http://dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud1/index.html Spanish translation]<br />
# (MOVED) [[What_does_a_good_web_page_need|What does a good web page need?]] [http://dev.opera.com/articles/view/7-mi-kell-egy-jo-weblaphoz/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud2/index.html Spanish translation]<br />
# (MOVED) [[Colour_theory|Colour Theory]]. [http://dev.opera.com/articles/view/8-a-szinek-elmelete/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud3/index.html Spanish translation]<br />
# (MOVED) [[Building up a site wireframe]]. [http://dev.opera.com/articles/view/9-egy-site-keretenek-felepitese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud4/index.html Spanish translation] <br />
# (MOVED) [[Colour schemes and design mockups]]. [http://dev.opera.com/articles/view/10-szinsemak-es-designtervek/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud5/index.html Spanish translation]<br />
# [[Typography on the Web]]. [http://dev.opera.com/articles/view/11-tipografia-a-weben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud6/index.html Spanish translation]<br />
<br />
=== HTML beginnings ===<br />
<br />
# [[The basics of HTML]]. [http://dev.opera.com/articles/view/12-a-html-alapjai/ Hungarian translation] | [http://dev.opera.com/articles/view/12-the-basics-of-html-ja/ Japanese translation]<br />
# [[Doctypes and markup styles]]<br />
# [[The_HTML_head_element|The HTML &lt;head&gt; element]]. [http://dev.opera.com/articles/view/13-a-html-head-eleme/ Hungarian translation] | [http://dev.opera.com/articles/view/13-the-html-head-element-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m3/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m3/ud1/index.html Spanish translation]<br />
# [[More_about_the_document_head|More about the document &lt;head&gt;]]<br />
<br />
=== The HTML body ===<br />
<br />
# [[Marking up textual content in HTML]]. [http://dev.opera.com/articles/view/15-szoveges-reszek-megjelolese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud1/index.html Spanish translation]<br />
# [[HTML lists|HTML Lists]]. [http://dev.opera.com/articles/view/16-html-listak/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud2/index.html Spanish translation]<br />
# [[Images in HTML]]. [http://dev.opera.com/articles/view/17-kepek-a-htmlben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud3/index.html Spanish translation]<br />
# [[HTML_links_-_lets_build_a_web|HTML links — let's build a web!]] [http://dev.opera.com/articles/view/18-html-hivatkozasok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud4/index.html Spanish translation]<br />
# [[HTML tables]]. [http://dev.opera.com/articles/view/19-html-tablazatok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud5/index.html Spanish translation]<br />
# [[HTML forms - the basics]]. [http://dev.opera.com/articles/view/20-html-urlapok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud6/index.html Spanish translation]<br />
# [[HTML5 form additions]]<br />
# [[HTML structural elements]]<br />
# [[Lesser - known semantic elements]]. [http://dev.opera.com/articles/view/21-kevesse-ismert/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Spanish translation]<br />
# [[Creating multiple pages with navigation menus]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud9/index.html Spanish translation]<br />
# [[Validating your HTML]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud10/index.html Spanish translation]<br />
<br />
=== Accessibility ===<br />
<br />
# [[Accessibility basics]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud1/index.html Spanish translation]<br />
# [[Accessibility testing]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud2/index.html Spanish translation]<br />
<br />
=== CSS ===<br />
<br />
# [[CSS_basics|CSS basics]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud1/index.html Spanish translation]<br />
# [[Inheritance and cascade]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud2/index.html Spanish translation]<br />
# [[Text styling with CSS]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud3/index.html Spanish translation]<br />
# [[The_CSS_layout_model_-_boxes_borders_margins_padding|The CSS layout model - boxes, borders, margins, padding]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud4/index.html Spanish translation]<br />
# [[CSS background images]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud5/index.html Spanish translation]<br />
# [[Styling_lists_and_links|Styling lists and links]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud6/index.html Spanish translation]<br />
# [[Styling tables]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html Spanish translation]<br />
# [[Styling forms]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud8/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud8/index.html Spanish translation]<br />
# [[Floats and clearing]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud9/index.html Spanish translation]<br />
# [[CSS static and relative positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud10/index.html Spanish translation]<br />
# [[CSS absolute and fixed positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud11/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud11/index.html | Spanish translation]<br />
# [[Debugging CSS]]<br />
<br />
=== Advanced CSS study ===<br />
<br />
# [[Headers_footers_columns_and_templates|Headers, footers, columns, and templates]]. [http://mosaic.uoc.edu/ac/le/ca/m7/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m7/ud1/index.html Spanish translation]<br />
<br />
=== JavaScript core skills ===<br />
<br />
# [[Programming_-_the_real_basics|Programming - the real basics!]]<br />
# [[What can you do with JavaScript]]<br />
# [[Your first look at JavaScript]]<br />
# [[JavaScript best practices]]<br />
# [[The principles of unobtrusive JavaScript]]<br />
# [[JavaScript functions]]<br />
# [[Objects in JavaScript]]<br />
# [[Traversing the DOM]]<br />
# [[Creating and modifying HTML]]<br />
# [[Dynamic style - manipulating CSS with JavaScript]]<br />
# [[Handling events with JavaScript]]<br />
# [[JavaScript animation]]<br />
# [[Graceful degredation versus progressive enhancement]]<br />
<br />
=== Mobile web development ===<br />
<br />
# [[Introduction_to_mobile_web|Mobile 1: Introduction to mobile web]]<br />
<br />
=== Supplementary articles ===<br />
<br />
* [[Getting your content online]]<br />
* [[Common HTML entities used for typography]]<br />
* [[The web standards curriculum glossary]]<br />
<br />
=== Proposed Updates and Additions to Web Standards Curriculum ===<br />
<br />
* [[WSC_proposed_updates|Web standards curriculum on W3C Wiki: plan for updates 2011]]<br />
<br />
[[Category:Tutorials]]<br />
[[Category:WSC]]</div>Cmillshttps://www.w3.org/wiki/index.php?title=Web_Standards_Curriculum&diff=55493Web Standards Curriculum2011-11-17T14:42:13Z<p>Cmills: /* Web Design Concepts */</p>
<hr />
<div>NOTE: THE MATERIAL ON THIS WIKI PAGE IS BEING MIGRATED ONTO THE WEB EDUCATION COMMUNITY GROUP'S DEDICATED WIKI PAGE, AT http://www.w3.org/community/webed/wiki/Main_Page. ITEMS MARKED WITH (MOVED) HAVE ALREADY BEEN MOVED.<br />
<br />
= Web Standards Curriculum table of contents =<br />
<br />
== Introduction ==<br />
<br />
What follows is a list of all the articles within the web standards curriculum, which will give you an essential grounding in HTML5, CSS, JavaScript, accessibility, and the other topics you need to be a modern web developer/designer. Reading them in order makes the most sense, but they are written to work individually, so you can dip in and out as it suits you, if you need to hone individual skills.<br />
<br />
Note: This material was originally published as part of the Opera Web Standards Curriculum, available as [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/#toc Introductory material], written by Chris Mills. Like the original, it is published under the [http://creativecommons.org/licenses/by-nc-sa/2.5/ Creative Commons Attribution, Non Commercial - Share Alike 2.5] license.<br />
<br />
Note #2: Many of the links below currently point to the [http://dev.opera.com dev.opera] versions, but we'll change these over to the W3C versions as we add more to the site. We are very happy to add these to the W3C pages, for a wider readership and more maintenance help.<br />
<br />
== Table of contents ==<br />
<br />
=== The beginning ===<br />
<br />
(MOVED)[[Introduction to the Web Standards Curriculum]]. [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-he/ Hebrew translation] | [http://dev.opera.com/articles/view/1-bevezeto-a-webes-szabvanyokba/ Hungarian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-it/ Italian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/ Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/ Spanish translation]<br />
<br />
=== Introduction to the world of web standards ===<br />
<br />
# (MOVED) [[The history of the Web|The history of the Internet and the web, and the evolution of web standards]]. [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-he/ Hebrew translation] | [http://dev.opera.com/articles/view/2-az-internet-es-a-web-tortenete/ Hungarian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-it/ Italian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud1/index.html Spanish translation]<br />
# (MOVED) [[How does the Internet work]]? [http://dev.opera.com/articles/view/3-hogyan-mukodik-az-internet/ Hungarian translation] | [http://dev.opera.com/articles/view/3-how-does-the-internet-work-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud2/index.html Spanish translation]<br />
# (MOVED) [[The web standards model - HTML CSS and JavaScript]]. [http://dev.opera.com/articles/view/4-a-webes-szabvanyok-modellje/ Hungarian translation] | [http://dev.opera.com/articles/view/4-the-web-standards-model-html-css-a-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud3/index.html Spanish translation]<br />
<br />
=== Web Design Concepts ===<br />
<br />
This section won't go into any code or markup details, and will act as an introduction to the design process before you start to create any graphics or code, as well as concepts of web design such as IA, navigation, usability etc.<br />
<br />
# (MOVED) [[Information_Architecture_-_planning_out_a_web_site|Information Architecture - planning out a web site]]. [http://dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud1/index.html Spanish translation]<br />
# (MOVED) [[What_does_a_good_web_page_need|What does a good web page need?]] [http://dev.opera.com/articles/view/7-mi-kell-egy-jo-weblaphoz/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud2/index.html Spanish translation]<br />
# (MOVED) [[Colour_theory|Colour Theory]]. [http://dev.opera.com/articles/view/8-a-szinek-elmelete/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud3/index.html Spanish translation]<br />
# (MOVED) [[Building up a site wireframe]]. [http://dev.opera.com/articles/view/9-egy-site-keretenek-felepitese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud4/index.html Spanish translation] <br />
# [[Colour schemes and design mockups]]. [http://dev.opera.com/articles/view/10-szinsemak-es-designtervek/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud5/index.html Spanish translation]<br />
# [[Typography on the Web]]. [http://dev.opera.com/articles/view/11-tipografia-a-weben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud6/index.html Spanish translation]<br />
<br />
=== HTML beginnings ===<br />
<br />
# [[The basics of HTML]]. [http://dev.opera.com/articles/view/12-a-html-alapjai/ Hungarian translation] | [http://dev.opera.com/articles/view/12-the-basics-of-html-ja/ Japanese translation]<br />
# [[Doctypes and markup styles]]<br />
# [[The_HTML_head_element|The HTML &lt;head&gt; element]]. [http://dev.opera.com/articles/view/13-a-html-head-eleme/ Hungarian translation] | [http://dev.opera.com/articles/view/13-the-html-head-element-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m3/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m3/ud1/index.html Spanish translation]<br />
# [[More_about_the_document_head|More about the document &lt;head&gt;]]<br />
<br />
=== The HTML body ===<br />
<br />
# [[Marking up textual content in HTML]]. [http://dev.opera.com/articles/view/15-szoveges-reszek-megjelolese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud1/index.html Spanish translation]<br />
# [[HTML lists|HTML Lists]]. [http://dev.opera.com/articles/view/16-html-listak/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud2/index.html Spanish translation]<br />
# [[Images in HTML]]. [http://dev.opera.com/articles/view/17-kepek-a-htmlben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud3/index.html Spanish translation]<br />
# [[HTML_links_-_lets_build_a_web|HTML links — let's build a web!]] [http://dev.opera.com/articles/view/18-html-hivatkozasok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud4/index.html Spanish translation]<br />
# [[HTML tables]]. [http://dev.opera.com/articles/view/19-html-tablazatok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud5/index.html Spanish translation]<br />
# [[HTML forms - the basics]]. [http://dev.opera.com/articles/view/20-html-urlapok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud6/index.html Spanish translation]<br />
# [[HTML5 form additions]]<br />
# [[HTML structural elements]]<br />
# [[Lesser - known semantic elements]]. [http://dev.opera.com/articles/view/21-kevesse-ismert/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Spanish translation]<br />
# [[Creating multiple pages with navigation menus]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud9/index.html Spanish translation]<br />
# [[Validating your HTML]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud10/index.html Spanish translation]<br />
<br />
=== Accessibility ===<br />
<br />
# [[Accessibility basics]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud1/index.html Spanish translation]<br />
# [[Accessibility testing]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud2/index.html Spanish translation]<br />
<br />
=== CSS ===<br />
<br />
# [[CSS_basics|CSS basics]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud1/index.html Spanish translation]<br />
# [[Inheritance and cascade]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud2/index.html Spanish translation]<br />
# [[Text styling with CSS]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud3/index.html Spanish translation]<br />
# [[The_CSS_layout_model_-_boxes_borders_margins_padding|The CSS layout model - boxes, borders, margins, padding]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud4/index.html Spanish translation]<br />
# [[CSS background images]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud5/index.html Spanish translation]<br />
# [[Styling_lists_and_links|Styling lists and links]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud6/index.html Spanish translation]<br />
# [[Styling tables]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html Spanish translation]<br />
# [[Styling forms]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud8/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud8/index.html Spanish translation]<br />
# [[Floats and clearing]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud9/index.html Spanish translation]<br />
# [[CSS static and relative positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud10/index.html Spanish translation]<br />
# [[CSS absolute and fixed positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud11/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud11/index.html | Spanish translation]<br />
# [[Debugging CSS]]<br />
<br />
=== Advanced CSS study ===<br />
<br />
# [[Headers_footers_columns_and_templates|Headers, footers, columns, and templates]]. [http://mosaic.uoc.edu/ac/le/ca/m7/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m7/ud1/index.html Spanish translation]<br />
<br />
=== JavaScript core skills ===<br />
<br />
# [[Programming_-_the_real_basics|Programming - the real basics!]]<br />
# [[What can you do with JavaScript]]<br />
# [[Your first look at JavaScript]]<br />
# [[JavaScript best practices]]<br />
# [[The principles of unobtrusive JavaScript]]<br />
# [[JavaScript functions]]<br />
# [[Objects in JavaScript]]<br />
# [[Traversing the DOM]]<br />
# [[Creating and modifying HTML]]<br />
# [[Dynamic style - manipulating CSS with JavaScript]]<br />
# [[Handling events with JavaScript]]<br />
# [[JavaScript animation]]<br />
# [[Graceful degredation versus progressive enhancement]]<br />
<br />
=== Mobile web development ===<br />
<br />
# [[Introduction_to_mobile_web|Mobile 1: Introduction to mobile web]]<br />
<br />
=== Supplementary articles ===<br />
<br />
* [[Getting your content online]]<br />
* [[Common HTML entities used for typography]]<br />
* [[The web standards curriculum glossary]]<br />
<br />
=== Proposed Updates and Additions to Web Standards Curriculum ===<br />
<br />
* [[WSC_proposed_updates|Web standards curriculum on W3C Wiki: plan for updates 2011]]<br />
<br />
[[Category:Tutorials]]<br />
[[Category:WSC]]</div>Cmillshttps://www.w3.org/wiki/index.php?title=Web_Standards_Curriculum&diff=55492Web Standards Curriculum2011-11-17T14:36:16Z<p>Cmills: /* Web Design Concepts */</p>
<hr />
<div>NOTE: THE MATERIAL ON THIS WIKI PAGE IS BEING MIGRATED ONTO THE WEB EDUCATION COMMUNITY GROUP'S DEDICATED WIKI PAGE, AT http://www.w3.org/community/webed/wiki/Main_Page. ITEMS MARKED WITH (MOVED) HAVE ALREADY BEEN MOVED.<br />
<br />
= Web Standards Curriculum table of contents =<br />
<br />
== Introduction ==<br />
<br />
What follows is a list of all the articles within the web standards curriculum, which will give you an essential grounding in HTML5, CSS, JavaScript, accessibility, and the other topics you need to be a modern web developer/designer. Reading them in order makes the most sense, but they are written to work individually, so you can dip in and out as it suits you, if you need to hone individual skills.<br />
<br />
Note: This material was originally published as part of the Opera Web Standards Curriculum, available as [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/#toc Introductory material], written by Chris Mills. Like the original, it is published under the [http://creativecommons.org/licenses/by-nc-sa/2.5/ Creative Commons Attribution, Non Commercial - Share Alike 2.5] license.<br />
<br />
Note #2: Many of the links below currently point to the [http://dev.opera.com dev.opera] versions, but we'll change these over to the W3C versions as we add more to the site. We are very happy to add these to the W3C pages, for a wider readership and more maintenance help.<br />
<br />
== Table of contents ==<br />
<br />
=== The beginning ===<br />
<br />
(MOVED)[[Introduction to the Web Standards Curriculum]]. [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-he/ Hebrew translation] | [http://dev.opera.com/articles/view/1-bevezeto-a-webes-szabvanyokba/ Hungarian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-it/ Italian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/ Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/ Spanish translation]<br />
<br />
=== Introduction to the world of web standards ===<br />
<br />
# (MOVED) [[The history of the Web|The history of the Internet and the web, and the evolution of web standards]]. [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-he/ Hebrew translation] | [http://dev.opera.com/articles/view/2-az-internet-es-a-web-tortenete/ Hungarian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-it/ Italian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud1/index.html Spanish translation]<br />
# (MOVED) [[How does the Internet work]]? [http://dev.opera.com/articles/view/3-hogyan-mukodik-az-internet/ Hungarian translation] | [http://dev.opera.com/articles/view/3-how-does-the-internet-work-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud2/index.html Spanish translation]<br />
# (MOVED) [[The web standards model - HTML CSS and JavaScript]]. [http://dev.opera.com/articles/view/4-a-webes-szabvanyok-modellje/ Hungarian translation] | [http://dev.opera.com/articles/view/4-the-web-standards-model-html-css-a-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud3/index.html Spanish translation]<br />
<br />
=== Web Design Concepts ===<br />
<br />
This section won't go into any code or markup details, and will act as an introduction to the design process before you start to create any graphics or code, as well as concepts of web design such as IA, navigation, usability etc.<br />
<br />
# (MOVED) [[Information_Architecture_-_planning_out_a_web_site|Information Architecture - planning out a web site]]. [http://dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud1/index.html Spanish translation]<br />
# (MOVED) [[What_does_a_good_web_page_need|What does a good web page need?]] [http://dev.opera.com/articles/view/7-mi-kell-egy-jo-weblaphoz/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud2/index.html Spanish translation]<br />
# (MOVED) [[Colour_theory|Colour Theory]]. [http://dev.opera.com/articles/view/8-a-szinek-elmelete/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud3/index.html Spanish translation]<br />
# [[Building up a site wireframe]]. [http://dev.opera.com/articles/view/9-egy-site-keretenek-felepitese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud4/index.html Spanish translation] <br />
# [[Colour schemes and design mockups]]. [http://dev.opera.com/articles/view/10-szinsemak-es-designtervek/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud5/index.html Spanish translation]<br />
# [[Typography on the Web]]. [http://dev.opera.com/articles/view/11-tipografia-a-weben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud6/index.html Spanish translation]<br />
<br />
=== HTML beginnings ===<br />
<br />
# [[The basics of HTML]]. [http://dev.opera.com/articles/view/12-a-html-alapjai/ Hungarian translation] | [http://dev.opera.com/articles/view/12-the-basics-of-html-ja/ Japanese translation]<br />
# [[Doctypes and markup styles]]<br />
# [[The_HTML_head_element|The HTML &lt;head&gt; element]]. [http://dev.opera.com/articles/view/13-a-html-head-eleme/ Hungarian translation] | [http://dev.opera.com/articles/view/13-the-html-head-element-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m3/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m3/ud1/index.html Spanish translation]<br />
# [[More_about_the_document_head|More about the document &lt;head&gt;]]<br />
<br />
=== The HTML body ===<br />
<br />
# [[Marking up textual content in HTML]]. [http://dev.opera.com/articles/view/15-szoveges-reszek-megjelolese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud1/index.html Spanish translation]<br />
# [[HTML lists|HTML Lists]]. [http://dev.opera.com/articles/view/16-html-listak/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud2/index.html Spanish translation]<br />
# [[Images in HTML]]. [http://dev.opera.com/articles/view/17-kepek-a-htmlben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud3/index.html Spanish translation]<br />
# [[HTML_links_-_lets_build_a_web|HTML links — let's build a web!]] [http://dev.opera.com/articles/view/18-html-hivatkozasok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud4/index.html Spanish translation]<br />
# [[HTML tables]]. [http://dev.opera.com/articles/view/19-html-tablazatok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud5/index.html Spanish translation]<br />
# [[HTML forms - the basics]]. [http://dev.opera.com/articles/view/20-html-urlapok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud6/index.html Spanish translation]<br />
# [[HTML5 form additions]]<br />
# [[HTML structural elements]]<br />
# [[Lesser - known semantic elements]]. [http://dev.opera.com/articles/view/21-kevesse-ismert/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Spanish translation]<br />
# [[Creating multiple pages with navigation menus]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud9/index.html Spanish translation]<br />
# [[Validating your HTML]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud10/index.html Spanish translation]<br />
<br />
=== Accessibility ===<br />
<br />
# [[Accessibility basics]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud1/index.html Spanish translation]<br />
# [[Accessibility testing]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud2/index.html Spanish translation]<br />
<br />
=== CSS ===<br />
<br />
# [[CSS_basics|CSS basics]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud1/index.html Spanish translation]<br />
# [[Inheritance and cascade]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud2/index.html Spanish translation]<br />
# [[Text styling with CSS]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud3/index.html Spanish translation]<br />
# [[The_CSS_layout_model_-_boxes_borders_margins_padding|The CSS layout model - boxes, borders, margins, padding]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud4/index.html Spanish translation]<br />
# [[CSS background images]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud5/index.html Spanish translation]<br />
# [[Styling_lists_and_links|Styling lists and links]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud6/index.html Spanish translation]<br />
# [[Styling tables]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html Spanish translation]<br />
# [[Styling forms]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud8/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud8/index.html Spanish translation]<br />
# [[Floats and clearing]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud9/index.html Spanish translation]<br />
# [[CSS static and relative positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud10/index.html Spanish translation]<br />
# [[CSS absolute and fixed positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud11/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud11/index.html | Spanish translation]<br />
# [[Debugging CSS]]<br />
<br />
=== Advanced CSS study ===<br />
<br />
# [[Headers_footers_columns_and_templates|Headers, footers, columns, and templates]]. [http://mosaic.uoc.edu/ac/le/ca/m7/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m7/ud1/index.html Spanish translation]<br />
<br />
=== JavaScript core skills ===<br />
<br />
# [[Programming_-_the_real_basics|Programming - the real basics!]]<br />
# [[What can you do with JavaScript]]<br />
# [[Your first look at JavaScript]]<br />
# [[JavaScript best practices]]<br />
# [[The principles of unobtrusive JavaScript]]<br />
# [[JavaScript functions]]<br />
# [[Objects in JavaScript]]<br />
# [[Traversing the DOM]]<br />
# [[Creating and modifying HTML]]<br />
# [[Dynamic style - manipulating CSS with JavaScript]]<br />
# [[Handling events with JavaScript]]<br />
# [[JavaScript animation]]<br />
# [[Graceful degredation versus progressive enhancement]]<br />
<br />
=== Mobile web development ===<br />
<br />
# [[Introduction_to_mobile_web|Mobile 1: Introduction to mobile web]]<br />
<br />
=== Supplementary articles ===<br />
<br />
* [[Getting your content online]]<br />
* [[Common HTML entities used for typography]]<br />
* [[The web standards curriculum glossary]]<br />
<br />
=== Proposed Updates and Additions to Web Standards Curriculum ===<br />
<br />
* [[WSC_proposed_updates|Web standards curriculum on W3C Wiki: plan for updates 2011]]<br />
<br />
[[Category:Tutorials]]<br />
[[Category:WSC]]</div>Cmillshttps://www.w3.org/wiki/index.php?title=Web_Standards_Curriculum&diff=55491Web Standards Curriculum2011-11-17T14:19:59Z<p>Cmills: /* Web Design Concepts */</p>
<hr />
<div>NOTE: THE MATERIAL ON THIS WIKI PAGE IS BEING MIGRATED ONTO THE WEB EDUCATION COMMUNITY GROUP'S DEDICATED WIKI PAGE, AT http://www.w3.org/community/webed/wiki/Main_Page. ITEMS MARKED WITH (MOVED) HAVE ALREADY BEEN MOVED.<br />
<br />
= Web Standards Curriculum table of contents =<br />
<br />
== Introduction ==<br />
<br />
What follows is a list of all the articles within the web standards curriculum, which will give you an essential grounding in HTML5, CSS, JavaScript, accessibility, and the other topics you need to be a modern web developer/designer. Reading them in order makes the most sense, but they are written to work individually, so you can dip in and out as it suits you, if you need to hone individual skills.<br />
<br />
Note: This material was originally published as part of the Opera Web Standards Curriculum, available as [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/#toc Introductory material], written by Chris Mills. Like the original, it is published under the [http://creativecommons.org/licenses/by-nc-sa/2.5/ Creative Commons Attribution, Non Commercial - Share Alike 2.5] license.<br />
<br />
Note #2: Many of the links below currently point to the [http://dev.opera.com dev.opera] versions, but we'll change these over to the W3C versions as we add more to the site. We are very happy to add these to the W3C pages, for a wider readership and more maintenance help.<br />
<br />
== Table of contents ==<br />
<br />
=== The beginning ===<br />
<br />
(MOVED)[[Introduction to the Web Standards Curriculum]]. [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-he/ Hebrew translation] | [http://dev.opera.com/articles/view/1-bevezeto-a-webes-szabvanyokba/ Hungarian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-it/ Italian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/ Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/ Spanish translation]<br />
<br />
=== Introduction to the world of web standards ===<br />
<br />
# (MOVED) [[The history of the Web|The history of the Internet and the web, and the evolution of web standards]]. [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-he/ Hebrew translation] | [http://dev.opera.com/articles/view/2-az-internet-es-a-web-tortenete/ Hungarian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-it/ Italian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud1/index.html Spanish translation]<br />
# (MOVED) [[How does the Internet work]]? [http://dev.opera.com/articles/view/3-hogyan-mukodik-az-internet/ Hungarian translation] | [http://dev.opera.com/articles/view/3-how-does-the-internet-work-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud2/index.html Spanish translation]<br />
# (MOVED) [[The web standards model - HTML CSS and JavaScript]]. [http://dev.opera.com/articles/view/4-a-webes-szabvanyok-modellje/ Hungarian translation] | [http://dev.opera.com/articles/view/4-the-web-standards-model-html-css-a-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud3/index.html Spanish translation]<br />
<br />
=== Web Design Concepts ===<br />
<br />
This section won't go into any code or markup details, and will act as an introduction to the design process before you start to create any graphics or code, as well as concepts of web design such as IA, navigation, usability etc.<br />
<br />
# (MOVED) [[Information_Architecture_-_planning_out_a_web_site|Information Architecture - planning out a web site]]. [http://dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud1/index.html Spanish translation]<br />
# (MOVED) [[What_does_a_good_web_page_need|What does a good web page need?]] [http://dev.opera.com/articles/view/7-mi-kell-egy-jo-weblaphoz/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud2/index.html Spanish translation]<br />
# [[Colour_theory|Colour Theory]]. [http://dev.opera.com/articles/view/8-a-szinek-elmelete/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud3/index.html Spanish translation]<br />
# [[Building up a site wireframe]]. [http://dev.opera.com/articles/view/9-egy-site-keretenek-felepitese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud4/index.html Spanish translation] <br />
# [[Colour schemes and design mockups]]. [http://dev.opera.com/articles/view/10-szinsemak-es-designtervek/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud5/index.html Spanish translation]<br />
# [[Typography on the Web]]. [http://dev.opera.com/articles/view/11-tipografia-a-weben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud6/index.html Spanish translation]<br />
<br />
=== HTML beginnings ===<br />
<br />
# [[The basics of HTML]]. [http://dev.opera.com/articles/view/12-a-html-alapjai/ Hungarian translation] | [http://dev.opera.com/articles/view/12-the-basics-of-html-ja/ Japanese translation]<br />
# [[Doctypes and markup styles]]<br />
# [[The_HTML_head_element|The HTML &lt;head&gt; element]]. [http://dev.opera.com/articles/view/13-a-html-head-eleme/ Hungarian translation] | [http://dev.opera.com/articles/view/13-the-html-head-element-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m3/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m3/ud1/index.html Spanish translation]<br />
# [[More_about_the_document_head|More about the document &lt;head&gt;]]<br />
<br />
=== The HTML body ===<br />
<br />
# [[Marking up textual content in HTML]]. [http://dev.opera.com/articles/view/15-szoveges-reszek-megjelolese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud1/index.html Spanish translation]<br />
# [[HTML lists|HTML Lists]]. [http://dev.opera.com/articles/view/16-html-listak/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud2/index.html Spanish translation]<br />
# [[Images in HTML]]. [http://dev.opera.com/articles/view/17-kepek-a-htmlben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud3/index.html Spanish translation]<br />
# [[HTML_links_-_lets_build_a_web|HTML links — let's build a web!]] [http://dev.opera.com/articles/view/18-html-hivatkozasok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud4/index.html Spanish translation]<br />
# [[HTML tables]]. [http://dev.opera.com/articles/view/19-html-tablazatok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud5/index.html Spanish translation]<br />
# [[HTML forms - the basics]]. [http://dev.opera.com/articles/view/20-html-urlapok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud6/index.html Spanish translation]<br />
# [[HTML5 form additions]]<br />
# [[HTML structural elements]]<br />
# [[Lesser - known semantic elements]]. [http://dev.opera.com/articles/view/21-kevesse-ismert/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Spanish translation]<br />
# [[Creating multiple pages with navigation menus]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud9/index.html Spanish translation]<br />
# [[Validating your HTML]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud10/index.html Spanish translation]<br />
<br />
=== Accessibility ===<br />
<br />
# [[Accessibility basics]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud1/index.html Spanish translation]<br />
# [[Accessibility testing]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud2/index.html Spanish translation]<br />
<br />
=== CSS ===<br />
<br />
# [[CSS_basics|CSS basics]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud1/index.html Spanish translation]<br />
# [[Inheritance and cascade]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud2/index.html Spanish translation]<br />
# [[Text styling with CSS]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud3/index.html Spanish translation]<br />
# [[The_CSS_layout_model_-_boxes_borders_margins_padding|The CSS layout model - boxes, borders, margins, padding]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud4/index.html Spanish translation]<br />
# [[CSS background images]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud5/index.html Spanish translation]<br />
# [[Styling_lists_and_links|Styling lists and links]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud6/index.html Spanish translation]<br />
# [[Styling tables]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html Spanish translation]<br />
# [[Styling forms]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud8/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud8/index.html Spanish translation]<br />
# [[Floats and clearing]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud9/index.html Spanish translation]<br />
# [[CSS static and relative positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud10/index.html Spanish translation]<br />
# [[CSS absolute and fixed positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud11/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud11/index.html | Spanish translation]<br />
# [[Debugging CSS]]<br />
<br />
=== Advanced CSS study ===<br />
<br />
# [[Headers_footers_columns_and_templates|Headers, footers, columns, and templates]]. [http://mosaic.uoc.edu/ac/le/ca/m7/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m7/ud1/index.html Spanish translation]<br />
<br />
=== JavaScript core skills ===<br />
<br />
# [[Programming_-_the_real_basics|Programming - the real basics!]]<br />
# [[What can you do with JavaScript]]<br />
# [[Your first look at JavaScript]]<br />
# [[JavaScript best practices]]<br />
# [[The principles of unobtrusive JavaScript]]<br />
# [[JavaScript functions]]<br />
# [[Objects in JavaScript]]<br />
# [[Traversing the DOM]]<br />
# [[Creating and modifying HTML]]<br />
# [[Dynamic style - manipulating CSS with JavaScript]]<br />
# [[Handling events with JavaScript]]<br />
# [[JavaScript animation]]<br />
# [[Graceful degredation versus progressive enhancement]]<br />
<br />
=== Mobile web development ===<br />
<br />
# [[Introduction_to_mobile_web|Mobile 1: Introduction to mobile web]]<br />
<br />
=== Supplementary articles ===<br />
<br />
* [[Getting your content online]]<br />
* [[Common HTML entities used for typography]]<br />
* [[The web standards curriculum glossary]]<br />
<br />
=== Proposed Updates and Additions to Web Standards Curriculum ===<br />
<br />
* [[WSC_proposed_updates|Web standards curriculum on W3C Wiki: plan for updates 2011]]<br />
<br />
[[Category:Tutorials]]<br />
[[Category:WSC]]</div>Cmillshttps://www.w3.org/wiki/index.php?title=Web_Standards_Curriculum&diff=55490Web Standards Curriculum2011-11-17T14:12:27Z<p>Cmills: /* Web Design Concepts */</p>
<hr />
<div>NOTE: THE MATERIAL ON THIS WIKI PAGE IS BEING MIGRATED ONTO THE WEB EDUCATION COMMUNITY GROUP'S DEDICATED WIKI PAGE, AT http://www.w3.org/community/webed/wiki/Main_Page. ITEMS MARKED WITH (MOVED) HAVE ALREADY BEEN MOVED.<br />
<br />
= Web Standards Curriculum table of contents =<br />
<br />
== Introduction ==<br />
<br />
What follows is a list of all the articles within the web standards curriculum, which will give you an essential grounding in HTML5, CSS, JavaScript, accessibility, and the other topics you need to be a modern web developer/designer. Reading them in order makes the most sense, but they are written to work individually, so you can dip in and out as it suits you, if you need to hone individual skills.<br />
<br />
Note: This material was originally published as part of the Opera Web Standards Curriculum, available as [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/#toc Introductory material], written by Chris Mills. Like the original, it is published under the [http://creativecommons.org/licenses/by-nc-sa/2.5/ Creative Commons Attribution, Non Commercial - Share Alike 2.5] license.<br />
<br />
Note #2: Many of the links below currently point to the [http://dev.opera.com dev.opera] versions, but we'll change these over to the W3C versions as we add more to the site. We are very happy to add these to the W3C pages, for a wider readership and more maintenance help.<br />
<br />
== Table of contents ==<br />
<br />
=== The beginning ===<br />
<br />
(MOVED)[[Introduction to the Web Standards Curriculum]]. [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-he/ Hebrew translation] | [http://dev.opera.com/articles/view/1-bevezeto-a-webes-szabvanyokba/ Hungarian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-it/ Italian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/ Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/ Spanish translation]<br />
<br />
=== Introduction to the world of web standards ===<br />
<br />
# (MOVED) [[The history of the Web|The history of the Internet and the web, and the evolution of web standards]]. [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-he/ Hebrew translation] | [http://dev.opera.com/articles/view/2-az-internet-es-a-web-tortenete/ Hungarian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-it/ Italian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud1/index.html Spanish translation]<br />
# (MOVED) [[How does the Internet work]]? [http://dev.opera.com/articles/view/3-hogyan-mukodik-az-internet/ Hungarian translation] | [http://dev.opera.com/articles/view/3-how-does-the-internet-work-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud2/index.html Spanish translation]<br />
# (MOVED) [[The web standards model - HTML CSS and JavaScript]]. [http://dev.opera.com/articles/view/4-a-webes-szabvanyok-modellje/ Hungarian translation] | [http://dev.opera.com/articles/view/4-the-web-standards-model-html-css-a-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud3/index.html Spanish translation]<br />
<br />
=== Web Design Concepts ===<br />
<br />
This section won't go into any code or markup details, and will act as an introduction to the design process before you start to create any graphics or code, as well as concepts of web design such as IA, navigation, usability etc.<br />
<br />
# (MOVED) [[Information_Architecture_-_planning_out_a_web_site|Information Architecture - planning out a web site]]. [http://dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud1/index.html Spanish translation]<br />
# [[What_does_a_good_web_page_need|What does a good web page need?]] [http://dev.opera.com/articles/view/7-mi-kell-egy-jo-weblaphoz/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud2/index.html Spanish translation]<br />
# [[Colour_theory|Colour Theory]]. [http://dev.opera.com/articles/view/8-a-szinek-elmelete/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud3/index.html Spanish translation]<br />
# [[Building up a site wireframe]]. [http://dev.opera.com/articles/view/9-egy-site-keretenek-felepitese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud4/index.html Spanish translation] <br />
# [[Colour schemes and design mockups]]. [http://dev.opera.com/articles/view/10-szinsemak-es-designtervek/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud5/index.html Spanish translation]<br />
# [[Typography on the Web]]. [http://dev.opera.com/articles/view/11-tipografia-a-weben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud6/index.html Spanish translation]<br />
<br />
=== HTML beginnings ===<br />
<br />
# [[The basics of HTML]]. [http://dev.opera.com/articles/view/12-a-html-alapjai/ Hungarian translation] | [http://dev.opera.com/articles/view/12-the-basics-of-html-ja/ Japanese translation]<br />
# [[Doctypes and markup styles]]<br />
# [[The_HTML_head_element|The HTML &lt;head&gt; element]]. [http://dev.opera.com/articles/view/13-a-html-head-eleme/ Hungarian translation] | [http://dev.opera.com/articles/view/13-the-html-head-element-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m3/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m3/ud1/index.html Spanish translation]<br />
# [[More_about_the_document_head|More about the document &lt;head&gt;]]<br />
<br />
=== The HTML body ===<br />
<br />
# [[Marking up textual content in HTML]]. [http://dev.opera.com/articles/view/15-szoveges-reszek-megjelolese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud1/index.html Spanish translation]<br />
# [[HTML lists|HTML Lists]]. [http://dev.opera.com/articles/view/16-html-listak/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud2/index.html Spanish translation]<br />
# [[Images in HTML]]. [http://dev.opera.com/articles/view/17-kepek-a-htmlben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud3/index.html Spanish translation]<br />
# [[HTML_links_-_lets_build_a_web|HTML links — let's build a web!]] [http://dev.opera.com/articles/view/18-html-hivatkozasok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud4/index.html Spanish translation]<br />
# [[HTML tables]]. [http://dev.opera.com/articles/view/19-html-tablazatok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud5/index.html Spanish translation]<br />
# [[HTML forms - the basics]]. [http://dev.opera.com/articles/view/20-html-urlapok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud6/index.html Spanish translation]<br />
# [[HTML5 form additions]]<br />
# [[HTML structural elements]]<br />
# [[Lesser - known semantic elements]]. [http://dev.opera.com/articles/view/21-kevesse-ismert/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Spanish translation]<br />
# [[Creating multiple pages with navigation menus]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud9/index.html Spanish translation]<br />
# [[Validating your HTML]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud10/index.html Spanish translation]<br />
<br />
=== Accessibility ===<br />
<br />
# [[Accessibility basics]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud1/index.html Spanish translation]<br />
# [[Accessibility testing]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud2/index.html Spanish translation]<br />
<br />
=== CSS ===<br />
<br />
# [[CSS_basics|CSS basics]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud1/index.html Spanish translation]<br />
# [[Inheritance and cascade]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud2/index.html Spanish translation]<br />
# [[Text styling with CSS]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud3/index.html Spanish translation]<br />
# [[The_CSS_layout_model_-_boxes_borders_margins_padding|The CSS layout model - boxes, borders, margins, padding]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud4/index.html Spanish translation]<br />
# [[CSS background images]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud5/index.html Spanish translation]<br />
# [[Styling_lists_and_links|Styling lists and links]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud6/index.html Spanish translation]<br />
# [[Styling tables]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html Spanish translation]<br />
# [[Styling forms]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud8/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud8/index.html Spanish translation]<br />
# [[Floats and clearing]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud9/index.html Spanish translation]<br />
# [[CSS static and relative positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud10/index.html Spanish translation]<br />
# [[CSS absolute and fixed positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud11/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud11/index.html | Spanish translation]<br />
# [[Debugging CSS]]<br />
<br />
=== Advanced CSS study ===<br />
<br />
# [[Headers_footers_columns_and_templates|Headers, footers, columns, and templates]]. [http://mosaic.uoc.edu/ac/le/ca/m7/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m7/ud1/index.html Spanish translation]<br />
<br />
=== JavaScript core skills ===<br />
<br />
# [[Programming_-_the_real_basics|Programming - the real basics!]]<br />
# [[What can you do with JavaScript]]<br />
# [[Your first look at JavaScript]]<br />
# [[JavaScript best practices]]<br />
# [[The principles of unobtrusive JavaScript]]<br />
# [[JavaScript functions]]<br />
# [[Objects in JavaScript]]<br />
# [[Traversing the DOM]]<br />
# [[Creating and modifying HTML]]<br />
# [[Dynamic style - manipulating CSS with JavaScript]]<br />
# [[Handling events with JavaScript]]<br />
# [[JavaScript animation]]<br />
# [[Graceful degredation versus progressive enhancement]]<br />
<br />
=== Mobile web development ===<br />
<br />
# [[Introduction_to_mobile_web|Mobile 1: Introduction to mobile web]]<br />
<br />
=== Supplementary articles ===<br />
<br />
* [[Getting your content online]]<br />
* [[Common HTML entities used for typography]]<br />
* [[The web standards curriculum glossary]]<br />
<br />
=== Proposed Updates and Additions to Web Standards Curriculum ===<br />
<br />
* [[WSC_proposed_updates|Web standards curriculum on W3C Wiki: plan for updates 2011]]<br />
<br />
[[Category:Tutorials]]<br />
[[Category:WSC]]</div>Cmillshttps://www.w3.org/wiki/index.php?title=Web_Standards_Curriculum&diff=55489Web Standards Curriculum2011-11-17T13:57:47Z<p>Cmills: /* Introduction to the world of web standards */</p>
<hr />
<div>NOTE: THE MATERIAL ON THIS WIKI PAGE IS BEING MIGRATED ONTO THE WEB EDUCATION COMMUNITY GROUP'S DEDICATED WIKI PAGE, AT http://www.w3.org/community/webed/wiki/Main_Page. ITEMS MARKED WITH (MOVED) HAVE ALREADY BEEN MOVED.<br />
<br />
= Web Standards Curriculum table of contents =<br />
<br />
== Introduction ==<br />
<br />
What follows is a list of all the articles within the web standards curriculum, which will give you an essential grounding in HTML5, CSS, JavaScript, accessibility, and the other topics you need to be a modern web developer/designer. Reading them in order makes the most sense, but they are written to work individually, so you can dip in and out as it suits you, if you need to hone individual skills.<br />
<br />
Note: This material was originally published as part of the Opera Web Standards Curriculum, available as [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/#toc Introductory material], written by Chris Mills. Like the original, it is published under the [http://creativecommons.org/licenses/by-nc-sa/2.5/ Creative Commons Attribution, Non Commercial - Share Alike 2.5] license.<br />
<br />
Note #2: Many of the links below currently point to the [http://dev.opera.com dev.opera] versions, but we'll change these over to the W3C versions as we add more to the site. We are very happy to add these to the W3C pages, for a wider readership and more maintenance help.<br />
<br />
== Table of contents ==<br />
<br />
=== The beginning ===<br />
<br />
(MOVED)[[Introduction to the Web Standards Curriculum]]. [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-he/ Hebrew translation] | [http://dev.opera.com/articles/view/1-bevezeto-a-webes-szabvanyokba/ Hungarian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-it/ Italian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/ Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/ Spanish translation]<br />
<br />
=== Introduction to the world of web standards ===<br />
<br />
# (MOVED) [[The history of the Web|The history of the Internet and the web, and the evolution of web standards]]. [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-he/ Hebrew translation] | [http://dev.opera.com/articles/view/2-az-internet-es-a-web-tortenete/ Hungarian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-it/ Italian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud1/index.html Spanish translation]<br />
# (MOVED) [[How does the Internet work]]? [http://dev.opera.com/articles/view/3-hogyan-mukodik-az-internet/ Hungarian translation] | [http://dev.opera.com/articles/view/3-how-does-the-internet-work-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud2/index.html Spanish translation]<br />
# (MOVED) [[The web standards model - HTML CSS and JavaScript]]. [http://dev.opera.com/articles/view/4-a-webes-szabvanyok-modellje/ Hungarian translation] | [http://dev.opera.com/articles/view/4-the-web-standards-model-html-css-a-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud3/index.html Spanish translation]<br />
<br />
=== Web Design Concepts ===<br />
<br />
This section won't go into any code or markup details, and will act as an introduction to the design process before you start to create any graphics or code, as well as concepts of web design such as IA, navigation, usability etc.<br />
<br />
# [[Information_Architecture_-_planning_out_a_web_site|Information Architecture - planning out a web site]]. [http://dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud1/index.html Spanish translation]<br />
# [[What_does_a_good_web_page_need|What does a good web page need?]] [http://dev.opera.com/articles/view/7-mi-kell-egy-jo-weblaphoz/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud2/index.html Spanish translation]<br />
# [[Colour_theory|Colour Theory]]. [http://dev.opera.com/articles/view/8-a-szinek-elmelete/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud3/index.html Spanish translation]<br />
# [[Building up a site wireframe]]. [http://dev.opera.com/articles/view/9-egy-site-keretenek-felepitese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud4/index.html Spanish translation] <br />
# [[Colour schemes and design mockups]]. [http://dev.opera.com/articles/view/10-szinsemak-es-designtervek/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud5/index.html Spanish translation]<br />
# [[Typography on the Web]]. [http://dev.opera.com/articles/view/11-tipografia-a-weben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud6/index.html Spanish translation]<br />
<br />
=== HTML beginnings ===<br />
<br />
# [[The basics of HTML]]. [http://dev.opera.com/articles/view/12-a-html-alapjai/ Hungarian translation] | [http://dev.opera.com/articles/view/12-the-basics-of-html-ja/ Japanese translation]<br />
# [[Doctypes and markup styles]]<br />
# [[The_HTML_head_element|The HTML &lt;head&gt; element]]. [http://dev.opera.com/articles/view/13-a-html-head-eleme/ Hungarian translation] | [http://dev.opera.com/articles/view/13-the-html-head-element-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m3/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m3/ud1/index.html Spanish translation]<br />
# [[More_about_the_document_head|More about the document &lt;head&gt;]]<br />
<br />
=== The HTML body ===<br />
<br />
# [[Marking up textual content in HTML]]. [http://dev.opera.com/articles/view/15-szoveges-reszek-megjelolese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud1/index.html Spanish translation]<br />
# [[HTML lists|HTML Lists]]. [http://dev.opera.com/articles/view/16-html-listak/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud2/index.html Spanish translation]<br />
# [[Images in HTML]]. [http://dev.opera.com/articles/view/17-kepek-a-htmlben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud3/index.html Spanish translation]<br />
# [[HTML_links_-_lets_build_a_web|HTML links — let's build a web!]] [http://dev.opera.com/articles/view/18-html-hivatkozasok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud4/index.html Spanish translation]<br />
# [[HTML tables]]. [http://dev.opera.com/articles/view/19-html-tablazatok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud5/index.html Spanish translation]<br />
# [[HTML forms - the basics]]. [http://dev.opera.com/articles/view/20-html-urlapok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud6/index.html Spanish translation]<br />
# [[HTML5 form additions]]<br />
# [[HTML structural elements]]<br />
# [[Lesser - known semantic elements]]. [http://dev.opera.com/articles/view/21-kevesse-ismert/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Spanish translation]<br />
# [[Creating multiple pages with navigation menus]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud9/index.html Spanish translation]<br />
# [[Validating your HTML]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud10/index.html Spanish translation]<br />
<br />
=== Accessibility ===<br />
<br />
# [[Accessibility basics]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud1/index.html Spanish translation]<br />
# [[Accessibility testing]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud2/index.html Spanish translation]<br />
<br />
=== CSS ===<br />
<br />
# [[CSS_basics|CSS basics]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud1/index.html Spanish translation]<br />
# [[Inheritance and cascade]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud2/index.html Spanish translation]<br />
# [[Text styling with CSS]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud3/index.html Spanish translation]<br />
# [[The_CSS_layout_model_-_boxes_borders_margins_padding|The CSS layout model - boxes, borders, margins, padding]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud4/index.html Spanish translation]<br />
# [[CSS background images]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud5/index.html Spanish translation]<br />
# [[Styling_lists_and_links|Styling lists and links]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud6/index.html Spanish translation]<br />
# [[Styling tables]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html Spanish translation]<br />
# [[Styling forms]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud8/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud8/index.html Spanish translation]<br />
# [[Floats and clearing]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud9/index.html Spanish translation]<br />
# [[CSS static and relative positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud10/index.html Spanish translation]<br />
# [[CSS absolute and fixed positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud11/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud11/index.html | Spanish translation]<br />
# [[Debugging CSS]]<br />
<br />
=== Advanced CSS study ===<br />
<br />
# [[Headers_footers_columns_and_templates|Headers, footers, columns, and templates]]. [http://mosaic.uoc.edu/ac/le/ca/m7/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m7/ud1/index.html Spanish translation]<br />
<br />
=== JavaScript core skills ===<br />
<br />
# [[Programming_-_the_real_basics|Programming - the real basics!]]<br />
# [[What can you do with JavaScript]]<br />
# [[Your first look at JavaScript]]<br />
# [[JavaScript best practices]]<br />
# [[The principles of unobtrusive JavaScript]]<br />
# [[JavaScript functions]]<br />
# [[Objects in JavaScript]]<br />
# [[Traversing the DOM]]<br />
# [[Creating and modifying HTML]]<br />
# [[Dynamic style - manipulating CSS with JavaScript]]<br />
# [[Handling events with JavaScript]]<br />
# [[JavaScript animation]]<br />
# [[Graceful degredation versus progressive enhancement]]<br />
<br />
=== Mobile web development ===<br />
<br />
# [[Introduction_to_mobile_web|Mobile 1: Introduction to mobile web]]<br />
<br />
=== Supplementary articles ===<br />
<br />
* [[Getting your content online]]<br />
* [[Common HTML entities used for typography]]<br />
* [[The web standards curriculum glossary]]<br />
<br />
=== Proposed Updates and Additions to Web Standards Curriculum ===<br />
<br />
* [[WSC_proposed_updates|Web standards curriculum on W3C Wiki: plan for updates 2011]]<br />
<br />
[[Category:Tutorials]]<br />
[[Category:WSC]]</div>Cmillshttps://www.w3.org/wiki/index.php?title=Web_Standards_Curriculum&diff=55488Web Standards Curriculum2011-11-17T13:48:59Z<p>Cmills: /* Introduction to the world of web standards */</p>
<hr />
<div>NOTE: THE MATERIAL ON THIS WIKI PAGE IS BEING MIGRATED ONTO THE WEB EDUCATION COMMUNITY GROUP'S DEDICATED WIKI PAGE, AT http://www.w3.org/community/webed/wiki/Main_Page. ITEMS MARKED WITH (MOVED) HAVE ALREADY BEEN MOVED.<br />
<br />
= Web Standards Curriculum table of contents =<br />
<br />
== Introduction ==<br />
<br />
What follows is a list of all the articles within the web standards curriculum, which will give you an essential grounding in HTML5, CSS, JavaScript, accessibility, and the other topics you need to be a modern web developer/designer. Reading them in order makes the most sense, but they are written to work individually, so you can dip in and out as it suits you, if you need to hone individual skills.<br />
<br />
Note: This material was originally published as part of the Opera Web Standards Curriculum, available as [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/#toc Introductory material], written by Chris Mills. Like the original, it is published under the [http://creativecommons.org/licenses/by-nc-sa/2.5/ Creative Commons Attribution, Non Commercial - Share Alike 2.5] license.<br />
<br />
Note #2: Many of the links below currently point to the [http://dev.opera.com dev.opera] versions, but we'll change these over to the W3C versions as we add more to the site. We are very happy to add these to the W3C pages, for a wider readership and more maintenance help.<br />
<br />
== Table of contents ==<br />
<br />
=== The beginning ===<br />
<br />
(MOVED)[[Introduction to the Web Standards Curriculum]]. [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-he/ Hebrew translation] | [http://dev.opera.com/articles/view/1-bevezeto-a-webes-szabvanyokba/ Hungarian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-it/ Italian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/ Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/ Spanish translation]<br />
<br />
=== Introduction to the world of web standards ===<br />
<br />
# (MOVED) [[The history of the Web|The history of the Internet and the web, and the evolution of web standards]]. [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-he/ Hebrew translation] | [http://dev.opera.com/articles/view/2-az-internet-es-a-web-tortenete/ Hungarian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-it/ Italian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud1/index.html Spanish translation]<br />
# (MOVED) [[How does the Internet work]]? [http://dev.opera.com/articles/view/3-hogyan-mukodik-az-internet/ Hungarian translation] | [http://dev.opera.com/articles/view/3-how-does-the-internet-work-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud2/index.html Spanish translation]<br />
# [[The web standards model - HTML CSS and JavaScript]]. [http://dev.opera.com/articles/view/4-a-webes-szabvanyok-modellje/ Hungarian translation] | [http://dev.opera.com/articles/view/4-the-web-standards-model-html-css-a-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud3/index.html Spanish translation]<br />
<br />
=== Web Design Concepts ===<br />
<br />
This section won't go into any code or markup details, and will act as an introduction to the design process before you start to create any graphics or code, as well as concepts of web design such as IA, navigation, usability etc.<br />
<br />
# [[Information_Architecture_-_planning_out_a_web_site|Information Architecture - planning out a web site]]. [http://dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud1/index.html Spanish translation]<br />
# [[What_does_a_good_web_page_need|What does a good web page need?]] [http://dev.opera.com/articles/view/7-mi-kell-egy-jo-weblaphoz/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud2/index.html Spanish translation]<br />
# [[Colour_theory|Colour Theory]]. [http://dev.opera.com/articles/view/8-a-szinek-elmelete/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud3/index.html Spanish translation]<br />
# [[Building up a site wireframe]]. [http://dev.opera.com/articles/view/9-egy-site-keretenek-felepitese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud4/index.html Spanish translation] <br />
# [[Colour schemes and design mockups]]. [http://dev.opera.com/articles/view/10-szinsemak-es-designtervek/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud5/index.html Spanish translation]<br />
# [[Typography on the Web]]. [http://dev.opera.com/articles/view/11-tipografia-a-weben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud6/index.html Spanish translation]<br />
<br />
=== HTML beginnings ===<br />
<br />
# [[The basics of HTML]]. [http://dev.opera.com/articles/view/12-a-html-alapjai/ Hungarian translation] | [http://dev.opera.com/articles/view/12-the-basics-of-html-ja/ Japanese translation]<br />
# [[Doctypes and markup styles]]<br />
# [[The_HTML_head_element|The HTML &lt;head&gt; element]]. [http://dev.opera.com/articles/view/13-a-html-head-eleme/ Hungarian translation] | [http://dev.opera.com/articles/view/13-the-html-head-element-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m3/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m3/ud1/index.html Spanish translation]<br />
# [[More_about_the_document_head|More about the document &lt;head&gt;]]<br />
<br />
=== The HTML body ===<br />
<br />
# [[Marking up textual content in HTML]]. [http://dev.opera.com/articles/view/15-szoveges-reszek-megjelolese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud1/index.html Spanish translation]<br />
# [[HTML lists|HTML Lists]]. [http://dev.opera.com/articles/view/16-html-listak/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud2/index.html Spanish translation]<br />
# [[Images in HTML]]. [http://dev.opera.com/articles/view/17-kepek-a-htmlben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud3/index.html Spanish translation]<br />
# [[HTML_links_-_lets_build_a_web|HTML links — let's build a web!]] [http://dev.opera.com/articles/view/18-html-hivatkozasok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud4/index.html Spanish translation]<br />
# [[HTML tables]]. [http://dev.opera.com/articles/view/19-html-tablazatok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud5/index.html Spanish translation]<br />
# [[HTML forms - the basics]]. [http://dev.opera.com/articles/view/20-html-urlapok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud6/index.html Spanish translation]<br />
# [[HTML5 form additions]]<br />
# [[HTML structural elements]]<br />
# [[Lesser - known semantic elements]]. [http://dev.opera.com/articles/view/21-kevesse-ismert/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Spanish translation]<br />
# [[Creating multiple pages with navigation menus]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud9/index.html Spanish translation]<br />
# [[Validating your HTML]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud10/index.html Spanish translation]<br />
<br />
=== Accessibility ===<br />
<br />
# [[Accessibility basics]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud1/index.html Spanish translation]<br />
# [[Accessibility testing]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud2/index.html Spanish translation]<br />
<br />
=== CSS ===<br />
<br />
# [[CSS_basics|CSS basics]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud1/index.html Spanish translation]<br />
# [[Inheritance and cascade]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud2/index.html Spanish translation]<br />
# [[Text styling with CSS]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud3/index.html Spanish translation]<br />
# [[The_CSS_layout_model_-_boxes_borders_margins_padding|The CSS layout model - boxes, borders, margins, padding]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud4/index.html Spanish translation]<br />
# [[CSS background images]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud5/index.html Spanish translation]<br />
# [[Styling_lists_and_links|Styling lists and links]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud6/index.html Spanish translation]<br />
# [[Styling tables]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html Spanish translation]<br />
# [[Styling forms]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud8/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud8/index.html Spanish translation]<br />
# [[Floats and clearing]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud9/index.html Spanish translation]<br />
# [[CSS static and relative positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud10/index.html Spanish translation]<br />
# [[CSS absolute and fixed positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud11/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud11/index.html | Spanish translation]<br />
# [[Debugging CSS]]<br />
<br />
=== Advanced CSS study ===<br />
<br />
# [[Headers_footers_columns_and_templates|Headers, footers, columns, and templates]]. [http://mosaic.uoc.edu/ac/le/ca/m7/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m7/ud1/index.html Spanish translation]<br />
<br />
=== JavaScript core skills ===<br />
<br />
# [[Programming_-_the_real_basics|Programming - the real basics!]]<br />
# [[What can you do with JavaScript]]<br />
# [[Your first look at JavaScript]]<br />
# [[JavaScript best practices]]<br />
# [[The principles of unobtrusive JavaScript]]<br />
# [[JavaScript functions]]<br />
# [[Objects in JavaScript]]<br />
# [[Traversing the DOM]]<br />
# [[Creating and modifying HTML]]<br />
# [[Dynamic style - manipulating CSS with JavaScript]]<br />
# [[Handling events with JavaScript]]<br />
# [[JavaScript animation]]<br />
# [[Graceful degredation versus progressive enhancement]]<br />
<br />
=== Mobile web development ===<br />
<br />
# [[Introduction_to_mobile_web|Mobile 1: Introduction to mobile web]]<br />
<br />
=== Supplementary articles ===<br />
<br />
* [[Getting your content online]]<br />
* [[Common HTML entities used for typography]]<br />
* [[The web standards curriculum glossary]]<br />
<br />
=== Proposed Updates and Additions to Web Standards Curriculum ===<br />
<br />
* [[WSC_proposed_updates|Web standards curriculum on W3C Wiki: plan for updates 2011]]<br />
<br />
[[Category:Tutorials]]<br />
[[Category:WSC]]</div>Cmillshttps://www.w3.org/wiki/index.php?title=Web_Standards_Curriculum&diff=55487Web Standards Curriculum2011-11-17T13:45:01Z<p>Cmills: /* Introduction to the world of web standards */</p>
<hr />
<div>NOTE: THE MATERIAL ON THIS WIKI PAGE IS BEING MIGRATED ONTO THE WEB EDUCATION COMMUNITY GROUP'S DEDICATED WIKI PAGE, AT http://www.w3.org/community/webed/wiki/Main_Page. ITEMS MARKED WITH (MOVED) HAVE ALREADY BEEN MOVED.<br />
<br />
= Web Standards Curriculum table of contents =<br />
<br />
== Introduction ==<br />
<br />
What follows is a list of all the articles within the web standards curriculum, which will give you an essential grounding in HTML5, CSS, JavaScript, accessibility, and the other topics you need to be a modern web developer/designer. Reading them in order makes the most sense, but they are written to work individually, so you can dip in and out as it suits you, if you need to hone individual skills.<br />
<br />
Note: This material was originally published as part of the Opera Web Standards Curriculum, available as [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/#toc Introductory material], written by Chris Mills. Like the original, it is published under the [http://creativecommons.org/licenses/by-nc-sa/2.5/ Creative Commons Attribution, Non Commercial - Share Alike 2.5] license.<br />
<br />
Note #2: Many of the links below currently point to the [http://dev.opera.com dev.opera] versions, but we'll change these over to the W3C versions as we add more to the site. We are very happy to add these to the W3C pages, for a wider readership and more maintenance help.<br />
<br />
== Table of contents ==<br />
<br />
=== The beginning ===<br />
<br />
(MOVED)[[Introduction to the Web Standards Curriculum]]. [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-he/ Hebrew translation] | [http://dev.opera.com/articles/view/1-bevezeto-a-webes-szabvanyokba/ Hungarian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-it/ Italian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/ Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/ Spanish translation]<br />
<br />
=== Introduction to the world of web standards ===<br />
<br />
# (MOVED) [[The history of the Web|The history of the Internet and the web, and the evolution of web standards]]. [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-he/ Hebrew translation] | [http://dev.opera.com/articles/view/2-az-internet-es-a-web-tortenete/ Hungarian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-it/ Italian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud1/index.html Spanish translation]<br />
# [[How does the Internet work]]? [http://dev.opera.com/articles/view/3-hogyan-mukodik-az-internet/ Hungarian translation] | [http://dev.opera.com/articles/view/3-how-does-the-internet-work-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud2/index.html Spanish translation]<br />
# [[The web standards model - HTML CSS and JavaScript]]. [http://dev.opera.com/articles/view/4-a-webes-szabvanyok-modellje/ Hungarian translation] | [http://dev.opera.com/articles/view/4-the-web-standards-model-html-css-a-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud3/index.html Spanish translation]<br />
<br />
=== Web Design Concepts ===<br />
<br />
This section won't go into any code or markup details, and will act as an introduction to the design process before you start to create any graphics or code, as well as concepts of web design such as IA, navigation, usability etc.<br />
<br />
# [[Information_Architecture_-_planning_out_a_web_site|Information Architecture - planning out a web site]]. [http://dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud1/index.html Spanish translation]<br />
# [[What_does_a_good_web_page_need|What does a good web page need?]] [http://dev.opera.com/articles/view/7-mi-kell-egy-jo-weblaphoz/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud2/index.html Spanish translation]<br />
# [[Colour_theory|Colour Theory]]. [http://dev.opera.com/articles/view/8-a-szinek-elmelete/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud3/index.html Spanish translation]<br />
# [[Building up a site wireframe]]. [http://dev.opera.com/articles/view/9-egy-site-keretenek-felepitese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud4/index.html Spanish translation] <br />
# [[Colour schemes and design mockups]]. [http://dev.opera.com/articles/view/10-szinsemak-es-designtervek/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud5/index.html Spanish translation]<br />
# [[Typography on the Web]]. [http://dev.opera.com/articles/view/11-tipografia-a-weben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud6/index.html Spanish translation]<br />
<br />
=== HTML beginnings ===<br />
<br />
# [[The basics of HTML]]. [http://dev.opera.com/articles/view/12-a-html-alapjai/ Hungarian translation] | [http://dev.opera.com/articles/view/12-the-basics-of-html-ja/ Japanese translation]<br />
# [[Doctypes and markup styles]]<br />
# [[The_HTML_head_element|The HTML &lt;head&gt; element]]. [http://dev.opera.com/articles/view/13-a-html-head-eleme/ Hungarian translation] | [http://dev.opera.com/articles/view/13-the-html-head-element-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m3/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m3/ud1/index.html Spanish translation]<br />
# [[More_about_the_document_head|More about the document &lt;head&gt;]]<br />
<br />
=== The HTML body ===<br />
<br />
# [[Marking up textual content in HTML]]. [http://dev.opera.com/articles/view/15-szoveges-reszek-megjelolese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud1/index.html Spanish translation]<br />
# [[HTML lists|HTML Lists]]. [http://dev.opera.com/articles/view/16-html-listak/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud2/index.html Spanish translation]<br />
# [[Images in HTML]]. [http://dev.opera.com/articles/view/17-kepek-a-htmlben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud3/index.html Spanish translation]<br />
# [[HTML_links_-_lets_build_a_web|HTML links — let's build a web!]] [http://dev.opera.com/articles/view/18-html-hivatkozasok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud4/index.html Spanish translation]<br />
# [[HTML tables]]. [http://dev.opera.com/articles/view/19-html-tablazatok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud5/index.html Spanish translation]<br />
# [[HTML forms - the basics]]. [http://dev.opera.com/articles/view/20-html-urlapok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud6/index.html Spanish translation]<br />
# [[HTML5 form additions]]<br />
# [[HTML structural elements]]<br />
# [[Lesser - known semantic elements]]. [http://dev.opera.com/articles/view/21-kevesse-ismert/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Spanish translation]<br />
# [[Creating multiple pages with navigation menus]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud9/index.html Spanish translation]<br />
# [[Validating your HTML]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud10/index.html Spanish translation]<br />
<br />
=== Accessibility ===<br />
<br />
# [[Accessibility basics]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud1/index.html Spanish translation]<br />
# [[Accessibility testing]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud2/index.html Spanish translation]<br />
<br />
=== CSS ===<br />
<br />
# [[CSS_basics|CSS basics]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud1/index.html Spanish translation]<br />
# [[Inheritance and cascade]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud2/index.html Spanish translation]<br />
# [[Text styling with CSS]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud3/index.html Spanish translation]<br />
# [[The_CSS_layout_model_-_boxes_borders_margins_padding|The CSS layout model - boxes, borders, margins, padding]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud4/index.html Spanish translation]<br />
# [[CSS background images]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud5/index.html Spanish translation]<br />
# [[Styling_lists_and_links|Styling lists and links]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud6/index.html Spanish translation]<br />
# [[Styling tables]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html Spanish translation]<br />
# [[Styling forms]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud8/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud8/index.html Spanish translation]<br />
# [[Floats and clearing]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud9/index.html Spanish translation]<br />
# [[CSS static and relative positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud10/index.html Spanish translation]<br />
# [[CSS absolute and fixed positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud11/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud11/index.html | Spanish translation]<br />
# [[Debugging CSS]]<br />
<br />
=== Advanced CSS study ===<br />
<br />
# [[Headers_footers_columns_and_templates|Headers, footers, columns, and templates]]. [http://mosaic.uoc.edu/ac/le/ca/m7/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m7/ud1/index.html Spanish translation]<br />
<br />
=== JavaScript core skills ===<br />
<br />
# [[Programming_-_the_real_basics|Programming - the real basics!]]<br />
# [[What can you do with JavaScript]]<br />
# [[Your first look at JavaScript]]<br />
# [[JavaScript best practices]]<br />
# [[The principles of unobtrusive JavaScript]]<br />
# [[JavaScript functions]]<br />
# [[Objects in JavaScript]]<br />
# [[Traversing the DOM]]<br />
# [[Creating and modifying HTML]]<br />
# [[Dynamic style - manipulating CSS with JavaScript]]<br />
# [[Handling events with JavaScript]]<br />
# [[JavaScript animation]]<br />
# [[Graceful degredation versus progressive enhancement]]<br />
<br />
=== Mobile web development ===<br />
<br />
# [[Introduction_to_mobile_web|Mobile 1: Introduction to mobile web]]<br />
<br />
=== Supplementary articles ===<br />
<br />
* [[Getting your content online]]<br />
* [[Common HTML entities used for typography]]<br />
* [[The web standards curriculum glossary]]<br />
<br />
=== Proposed Updates and Additions to Web Standards Curriculum ===<br />
<br />
* [[WSC_proposed_updates|Web standards curriculum on W3C Wiki: plan for updates 2011]]<br />
<br />
[[Category:Tutorials]]<br />
[[Category:WSC]]</div>Cmillshttps://www.w3.org/wiki/index.php?title=Web_Standards_Curriculum&diff=55486Web Standards Curriculum2011-11-17T13:42:51Z<p>Cmills: /* The beginning */</p>
<hr />
<div>NOTE: THE MATERIAL ON THIS WIKI PAGE IS BEING MIGRATED ONTO THE WEB EDUCATION COMMUNITY GROUP'S DEDICATED WIKI PAGE, AT http://www.w3.org/community/webed/wiki/Main_Page. ITEMS MARKED WITH (MOVED) HAVE ALREADY BEEN MOVED.<br />
<br />
= Web Standards Curriculum table of contents =<br />
<br />
== Introduction ==<br />
<br />
What follows is a list of all the articles within the web standards curriculum, which will give you an essential grounding in HTML5, CSS, JavaScript, accessibility, and the other topics you need to be a modern web developer/designer. Reading them in order makes the most sense, but they are written to work individually, so you can dip in and out as it suits you, if you need to hone individual skills.<br />
<br />
Note: This material was originally published as part of the Opera Web Standards Curriculum, available as [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/#toc Introductory material], written by Chris Mills. Like the original, it is published under the [http://creativecommons.org/licenses/by-nc-sa/2.5/ Creative Commons Attribution, Non Commercial - Share Alike 2.5] license.<br />
<br />
Note #2: Many of the links below currently point to the [http://dev.opera.com dev.opera] versions, but we'll change these over to the W3C versions as we add more to the site. We are very happy to add these to the W3C pages, for a wider readership and more maintenance help.<br />
<br />
== Table of contents ==<br />
<br />
=== The beginning ===<br />
<br />
(MOVED)[[Introduction to the Web Standards Curriculum]]. [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-he/ Hebrew translation] | [http://dev.opera.com/articles/view/1-bevezeto-a-webes-szabvanyokba/ Hungarian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-it/ Italian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/ Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/ Spanish translation]<br />
<br />
=== Introduction to the world of web standards ===<br />
<br />
# [[The history of the Web|The history of the Internet and the web, and the evolution of web standards]]. [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-he/ Hebrew translation] | [http://dev.opera.com/articles/view/2-az-internet-es-a-web-tortenete/ Hungarian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-it/ Italian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud1/index.html Spanish translation]<br />
# [[How does the Internet work]]? [http://dev.opera.com/articles/view/3-hogyan-mukodik-az-internet/ Hungarian translation] | [http://dev.opera.com/articles/view/3-how-does-the-internet-work-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud2/index.html Spanish translation]<br />
# [[The web standards model - HTML CSS and JavaScript]]. [http://dev.opera.com/articles/view/4-a-webes-szabvanyok-modellje/ Hungarian translation] | [http://dev.opera.com/articles/view/4-the-web-standards-model-html-css-a-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud3/index.html Spanish translation]<br />
<br />
=== Web Design Concepts ===<br />
<br />
This section won't go into any code or markup details, and will act as an introduction to the design process before you start to create any graphics or code, as well as concepts of web design such as IA, navigation, usability etc.<br />
<br />
# [[Information_Architecture_-_planning_out_a_web_site|Information Architecture - planning out a web site]]. [http://dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud1/index.html Spanish translation]<br />
# [[What_does_a_good_web_page_need|What does a good web page need?]] [http://dev.opera.com/articles/view/7-mi-kell-egy-jo-weblaphoz/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud2/index.html Spanish translation]<br />
# [[Colour_theory|Colour Theory]]. [http://dev.opera.com/articles/view/8-a-szinek-elmelete/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud3/index.html Spanish translation]<br />
# [[Building up a site wireframe]]. [http://dev.opera.com/articles/view/9-egy-site-keretenek-felepitese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud4/index.html Spanish translation] <br />
# [[Colour schemes and design mockups]]. [http://dev.opera.com/articles/view/10-szinsemak-es-designtervek/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud5/index.html Spanish translation]<br />
# [[Typography on the Web]]. [http://dev.opera.com/articles/view/11-tipografia-a-weben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud6/index.html Spanish translation]<br />
<br />
=== HTML beginnings ===<br />
<br />
# [[The basics of HTML]]. [http://dev.opera.com/articles/view/12-a-html-alapjai/ Hungarian translation] | [http://dev.opera.com/articles/view/12-the-basics-of-html-ja/ Japanese translation]<br />
# [[Doctypes and markup styles]]<br />
# [[The_HTML_head_element|The HTML &lt;head&gt; element]]. [http://dev.opera.com/articles/view/13-a-html-head-eleme/ Hungarian translation] | [http://dev.opera.com/articles/view/13-the-html-head-element-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m3/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m3/ud1/index.html Spanish translation]<br />
# [[More_about_the_document_head|More about the document &lt;head&gt;]]<br />
<br />
=== The HTML body ===<br />
<br />
# [[Marking up textual content in HTML]]. [http://dev.opera.com/articles/view/15-szoveges-reszek-megjelolese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud1/index.html Spanish translation]<br />
# [[HTML lists|HTML Lists]]. [http://dev.opera.com/articles/view/16-html-listak/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud2/index.html Spanish translation]<br />
# [[Images in HTML]]. [http://dev.opera.com/articles/view/17-kepek-a-htmlben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud3/index.html Spanish translation]<br />
# [[HTML_links_-_lets_build_a_web|HTML links — let's build a web!]] [http://dev.opera.com/articles/view/18-html-hivatkozasok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud4/index.html Spanish translation]<br />
# [[HTML tables]]. [http://dev.opera.com/articles/view/19-html-tablazatok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud5/index.html Spanish translation]<br />
# [[HTML forms - the basics]]. [http://dev.opera.com/articles/view/20-html-urlapok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud6/index.html Spanish translation]<br />
# [[HTML5 form additions]]<br />
# [[HTML structural elements]]<br />
# [[Lesser - known semantic elements]]. [http://dev.opera.com/articles/view/21-kevesse-ismert/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Spanish translation]<br />
# [[Creating multiple pages with navigation menus]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud9/index.html Spanish translation]<br />
# [[Validating your HTML]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud10/index.html Spanish translation]<br />
<br />
=== Accessibility ===<br />
<br />
# [[Accessibility basics]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud1/index.html Spanish translation]<br />
# [[Accessibility testing]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud2/index.html Spanish translation]<br />
<br />
=== CSS ===<br />
<br />
# [[CSS_basics|CSS basics]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud1/index.html Spanish translation]<br />
# [[Inheritance and cascade]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud2/index.html Spanish translation]<br />
# [[Text styling with CSS]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud3/index.html Spanish translation]<br />
# [[The_CSS_layout_model_-_boxes_borders_margins_padding|The CSS layout model - boxes, borders, margins, padding]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud4/index.html Spanish translation]<br />
# [[CSS background images]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud5/index.html Spanish translation]<br />
# [[Styling_lists_and_links|Styling lists and links]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud6/index.html Spanish translation]<br />
# [[Styling tables]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html Spanish translation]<br />
# [[Styling forms]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud8/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud8/index.html Spanish translation]<br />
# [[Floats and clearing]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud9/index.html Spanish translation]<br />
# [[CSS static and relative positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud10/index.html Spanish translation]<br />
# [[CSS absolute and fixed positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud11/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud11/index.html | Spanish translation]<br />
# [[Debugging CSS]]<br />
<br />
=== Advanced CSS study ===<br />
<br />
# [[Headers_footers_columns_and_templates|Headers, footers, columns, and templates]]. [http://mosaic.uoc.edu/ac/le/ca/m7/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m7/ud1/index.html Spanish translation]<br />
<br />
=== JavaScript core skills ===<br />
<br />
# [[Programming_-_the_real_basics|Programming - the real basics!]]<br />
# [[What can you do with JavaScript]]<br />
# [[Your first look at JavaScript]]<br />
# [[JavaScript best practices]]<br />
# [[The principles of unobtrusive JavaScript]]<br />
# [[JavaScript functions]]<br />
# [[Objects in JavaScript]]<br />
# [[Traversing the DOM]]<br />
# [[Creating and modifying HTML]]<br />
# [[Dynamic style - manipulating CSS with JavaScript]]<br />
# [[Handling events with JavaScript]]<br />
# [[JavaScript animation]]<br />
# [[Graceful degredation versus progressive enhancement]]<br />
<br />
=== Mobile web development ===<br />
<br />
# [[Introduction_to_mobile_web|Mobile 1: Introduction to mobile web]]<br />
<br />
=== Supplementary articles ===<br />
<br />
* [[Getting your content online]]<br />
* [[Common HTML entities used for typography]]<br />
* [[The web standards curriculum glossary]]<br />
<br />
=== Proposed Updates and Additions to Web Standards Curriculum ===<br />
<br />
* [[WSC_proposed_updates|Web standards curriculum on W3C Wiki: plan for updates 2011]]<br />
<br />
[[Category:Tutorials]]<br />
[[Category:WSC]]</div>Cmillshttps://www.w3.org/wiki/index.php?title=Web_Standards_Curriculum&diff=55485Web Standards Curriculum2011-11-17T13:34:36Z<p>Cmills: </p>
<hr />
<div>NOTE: THE MATERIAL ON THIS WIKI PAGE IS BEING MIGRATED ONTO THE WEB EDUCATION COMMUNITY GROUP'S DEDICATED WIKI PAGE, AT http://www.w3.org/community/webed/wiki/Main_Page. ITEMS MARKED WITH (MOVED) HAVE ALREADY BEEN MOVED.<br />
<br />
= Web Standards Curriculum table of contents =<br />
<br />
== Introduction ==<br />
<br />
What follows is a list of all the articles within the web standards curriculum, which will give you an essential grounding in HTML5, CSS, JavaScript, accessibility, and the other topics you need to be a modern web developer/designer. Reading them in order makes the most sense, but they are written to work individually, so you can dip in and out as it suits you, if you need to hone individual skills.<br />
<br />
Note: This material was originally published as part of the Opera Web Standards Curriculum, available as [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/#toc Introductory material], written by Chris Mills. Like the original, it is published under the [http://creativecommons.org/licenses/by-nc-sa/2.5/ Creative Commons Attribution, Non Commercial - Share Alike 2.5] license.<br />
<br />
Note #2: Many of the links below currently point to the [http://dev.opera.com dev.opera] versions, but we'll change these over to the W3C versions as we add more to the site. We are very happy to add these to the W3C pages, for a wider readership and more maintenance help.<br />
<br />
== Table of contents ==<br />
<br />
=== The beginning ===<br />
<br />
[[Introduction to the Web Standards Curriculum]]. [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-he/ Hebrew translation] | [http://dev.opera.com/articles/view/1-bevezeto-a-webes-szabvanyokba/ Hungarian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-it/ Italian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/ Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/ Spanish translation]<br />
<br />
=== Introduction to the world of web standards ===<br />
<br />
# [[The history of the Web|The history of the Internet and the web, and the evolution of web standards]]. [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-he/ Hebrew translation] | [http://dev.opera.com/articles/view/2-az-internet-es-a-web-tortenete/ Hungarian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-it/ Italian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud1/index.html Spanish translation]<br />
# [[How does the Internet work]]? [http://dev.opera.com/articles/view/3-hogyan-mukodik-az-internet/ Hungarian translation] | [http://dev.opera.com/articles/view/3-how-does-the-internet-work-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud2/index.html Spanish translation]<br />
# [[The web standards model - HTML CSS and JavaScript]]. [http://dev.opera.com/articles/view/4-a-webes-szabvanyok-modellje/ Hungarian translation] | [http://dev.opera.com/articles/view/4-the-web-standards-model-html-css-a-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud3/index.html Spanish translation]<br />
<br />
=== Web Design Concepts ===<br />
<br />
This section won't go into any code or markup details, and will act as an introduction to the design process before you start to create any graphics or code, as well as concepts of web design such as IA, navigation, usability etc.<br />
<br />
# [[Information_Architecture_-_planning_out_a_web_site|Information Architecture - planning out a web site]]. [http://dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud1/index.html Spanish translation]<br />
# [[What_does_a_good_web_page_need|What does a good web page need?]] [http://dev.opera.com/articles/view/7-mi-kell-egy-jo-weblaphoz/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud2/index.html Spanish translation]<br />
# [[Colour_theory|Colour Theory]]. [http://dev.opera.com/articles/view/8-a-szinek-elmelete/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud3/index.html Spanish translation]<br />
# [[Building up a site wireframe]]. [http://dev.opera.com/articles/view/9-egy-site-keretenek-felepitese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud4/index.html Spanish translation] <br />
# [[Colour schemes and design mockups]]. [http://dev.opera.com/articles/view/10-szinsemak-es-designtervek/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud5/index.html Spanish translation]<br />
# [[Typography on the Web]]. [http://dev.opera.com/articles/view/11-tipografia-a-weben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud6/index.html Spanish translation]<br />
<br />
=== HTML beginnings ===<br />
<br />
# [[The basics of HTML]]. [http://dev.opera.com/articles/view/12-a-html-alapjai/ Hungarian translation] | [http://dev.opera.com/articles/view/12-the-basics-of-html-ja/ Japanese translation]<br />
# [[Doctypes and markup styles]]<br />
# [[The_HTML_head_element|The HTML &lt;head&gt; element]]. [http://dev.opera.com/articles/view/13-a-html-head-eleme/ Hungarian translation] | [http://dev.opera.com/articles/view/13-the-html-head-element-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m3/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m3/ud1/index.html Spanish translation]<br />
# [[More_about_the_document_head|More about the document &lt;head&gt;]]<br />
<br />
=== The HTML body ===<br />
<br />
# [[Marking up textual content in HTML]]. [http://dev.opera.com/articles/view/15-szoveges-reszek-megjelolese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud1/index.html Spanish translation]<br />
# [[HTML lists|HTML Lists]]. [http://dev.opera.com/articles/view/16-html-listak/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud2/index.html Spanish translation]<br />
# [[Images in HTML]]. [http://dev.opera.com/articles/view/17-kepek-a-htmlben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud3/index.html Spanish translation]<br />
# [[HTML_links_-_lets_build_a_web|HTML links — let's build a web!]] [http://dev.opera.com/articles/view/18-html-hivatkozasok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud4/index.html Spanish translation]<br />
# [[HTML tables]]. [http://dev.opera.com/articles/view/19-html-tablazatok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud5/index.html Spanish translation]<br />
# [[HTML forms - the basics]]. [http://dev.opera.com/articles/view/20-html-urlapok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud6/index.html Spanish translation]<br />
# [[HTML5 form additions]]<br />
# [[HTML structural elements]]<br />
# [[Lesser - known semantic elements]]. [http://dev.opera.com/articles/view/21-kevesse-ismert/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Spanish translation]<br />
# [[Creating multiple pages with navigation menus]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud9/index.html Spanish translation]<br />
# [[Validating your HTML]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud10/index.html Spanish translation]<br />
<br />
=== Accessibility ===<br />
<br />
# [[Accessibility basics]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud1/index.html Spanish translation]<br />
# [[Accessibility testing]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud2/index.html Spanish translation]<br />
<br />
=== CSS ===<br />
<br />
# [[CSS_basics|CSS basics]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud1/index.html Spanish translation]<br />
# [[Inheritance and cascade]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud2/index.html Spanish translation]<br />
# [[Text styling with CSS]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud3/index.html Spanish translation]<br />
# [[The_CSS_layout_model_-_boxes_borders_margins_padding|The CSS layout model - boxes, borders, margins, padding]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud4/index.html Spanish translation]<br />
# [[CSS background images]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud5/index.html Spanish translation]<br />
# [[Styling_lists_and_links|Styling lists and links]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud6/index.html Spanish translation]<br />
# [[Styling tables]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html Spanish translation]<br />
# [[Styling forms]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud8/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud8/index.html Spanish translation]<br />
# [[Floats and clearing]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud9/index.html Spanish translation]<br />
# [[CSS static and relative positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud10/index.html Spanish translation]<br />
# [[CSS absolute and fixed positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud11/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud11/index.html | Spanish translation]<br />
# [[Debugging CSS]]<br />
<br />
=== Advanced CSS study ===<br />
<br />
# [[Headers_footers_columns_and_templates|Headers, footers, columns, and templates]]. [http://mosaic.uoc.edu/ac/le/ca/m7/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m7/ud1/index.html Spanish translation]<br />
<br />
=== JavaScript core skills ===<br />
<br />
# [[Programming_-_the_real_basics|Programming - the real basics!]]<br />
# [[What can you do with JavaScript]]<br />
# [[Your first look at JavaScript]]<br />
# [[JavaScript best practices]]<br />
# [[The principles of unobtrusive JavaScript]]<br />
# [[JavaScript functions]]<br />
# [[Objects in JavaScript]]<br />
# [[Traversing the DOM]]<br />
# [[Creating and modifying HTML]]<br />
# [[Dynamic style - manipulating CSS with JavaScript]]<br />
# [[Handling events with JavaScript]]<br />
# [[JavaScript animation]]<br />
# [[Graceful degredation versus progressive enhancement]]<br />
<br />
=== Mobile web development ===<br />
<br />
# [[Introduction_to_mobile_web|Mobile 1: Introduction to mobile web]]<br />
<br />
=== Supplementary articles ===<br />
<br />
* [[Getting your content online]]<br />
* [[Common HTML entities used for typography]]<br />
* [[The web standards curriculum glossary]]<br />
<br />
=== Proposed Updates and Additions to Web Standards Curriculum ===<br />
<br />
* [[WSC_proposed_updates|Web standards curriculum on W3C Wiki: plan for updates 2011]]<br />
<br />
[[Category:Tutorials]]<br />
[[Category:WSC]]</div>Cmillshttps://www.w3.org/wiki/index.php?title=WSC_proposed_updates&diff=54326WSC proposed updates2011-10-06T12:47:45Z<p>Cmills: /* JavaScript */</p>
<hr />
<div> <br />
= Web standards curriculum on W3C Wiki: plan for updates 2011 =<br />
<br />
== The beginning ==<br />
<br />
[[Introduction to the Web Standards Curriculum]] by Chris Mills. '''{ -- JUST NEEDS A GENERAL READ, AND A LITTLE BIT OF TWEAKING}'''<br />
<br />
== Introduction to the world of web standards ==<br />
<br />
# [[The history of the Web|The history of the Internet and the web, and the evolution of web standards]], by Mark Norman Francis. { -- NEEDS A GENERAL READ, PLUS I THINK IT COULD BENEFIT FROM A BIT MORE HISTORY BEING ADDED ABOUT THE EVOLUTION OF HTML5 AND CSS3}<br />
# [[How does the Internet work]]? by Jonathan Lane. {-- NO TWEAKING NEEDED; JUST SPIT AND POLISH}<br />
# [[The web standards model - HTML CSS and JavaScript]] by Jonathan Lane. { -- A FEW TWEAKS NEEDED - THE HTML SECTION COULD DO WITH AN OVERHAUL TO CCOUNT FOR HTML5, AND DEAL WITH XHTML A BIT BETTER}<br />
# [[Beautiful dream, but what's the reality]]? by Jonathan Lane. { -- I THINK THIS ARTICLE COULD JUST BE REMOVED, AND A SMALL SECTION ADDED TO THE PREVIOUS ARTICLE TO COVER "THE REALITY OF IT ALL". AS IT STANDS, THIS ARTICLE IS A BIT OF A RANT, AND NOT REALLY THAT USEFUL TO EDUCATION}<br />
<br />
== Web Design Concepts ==<br />
<br />
This section won't go into any code or markup details, and will act as an introduction to the design process before you start to create any graphics or code, as well as concepts of web design such as IA, navigation, usability etc.<br />
<br />
# [http://www.w3.org/wiki/Information_Architecture_-_planning_out_a_web_site Information Architecture - planning out a web site], by Jonathan Lane.<br />
# [http://www.w3.org/wiki/What_does_a_good_web_page_need What does a good web page need?], by Mark Norman Francis.<br />
# [http://www.w3.org/wiki/Colour_theory Colour Theory], by Linda Goin.<br />
# [http://www.w3.org/wiki/Building_up_a_site_wireframe Building up a site wireframe], by Linda Goin.<br />
# [http://www.w3.org/wiki/Colour_schemes_and_design_mockups Colour schemes and design mockups], by Linda Goin. <br />
# [http://www.w3.org/wiki/Typography_on_the_Web Typography on the web], by Paul Haine.<br />
<br />
{ -- I THINK THIS WHOLE SECTION NEEDS AN OVERHAUL, AS CURRENTLY IT IS NOT VERY EFFECTIVE. THE TYPOGRAPHY AND IA SECTIONS ARE FINE, BUT I'M NOT SURE ABOUT THE OTHER STUFF. I THINK THE SECTION SHOULD BE RETITLED "PLANNING A WEB SITE", AND HAVE A STRUCTURE SOMETHING LIKE THE FOLLOWING: <br />
<br />
=== Planned New section to replace "Web Design Concepts" - to be called "Planning a web site" ===<br />
<br />
# [[Introduction to planning a web site]]<br />
# Scoping and user research<br />
# [[Information_Architecture_-_planning_out_a_web_site|Information Architecture - planning out a web site]]. [http://dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud1/index.html Spanish translation]<br />
# [[What_does_a_good_web_page_need|What does a good web page need?]] [http://dev.opera.com/articles/view/7-mi-kell-egy-jo-weblaphoz/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud2/index.html Spanish translation]<br />
# [[Typography on the Web]]. [http://dev.opera.com/articles/view/11-tipografia-a-weben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud6/index.html Spanish translation]<br />
# Colour schemes and deasign theory<br />
# Mockups and protptypes<br />
# User experience design - INCLUDE MOBILE/ALTERNATIVE DEVICE USER EXPERIENCE. HOW DOES IT DIFFER?<br />
<br />
== HTML basics ==<br />
<br />
# [http://www.w3.org/wiki/The_basics_of_HTML The basics of HTML], by Mark Norman Francis. { -- THIS LOOKS OK, ALTHOUGH I THINK IT NEEDS A BIT OF UPDATING TO ACCOUNT FOR HTML5, THE HISTORY SECTION, ETC. THE EXAMPLES SHOULD ALSO BE UPDATED TO HTML5 SEMANTICS, WHERE APPROPRIATE, EG NO MORE DIVS FOR PAGE SECTIONS}<br />
# [http://www.w3.org/wiki/The_HTML_head_element The HTML &lt;head&gt; element], by Christian Heilmann. { -- NEEDS UPDATING, AND HTML5 FEATURES ADDING, SUCH AS META CHARSET} <br />
# [http://www.w3.org/wiki/Choosing_the_right_doctype_for_your_HTML_documents Choosing the right doctype for your HTML documents], by Roger Johansson. { -- I THINK THAT THIS NEEDS TO BE REWRITTEN TO FOCUS LESS ON DOCTYPES, AND MORE ON HTML/XHTML RULES, HOW THEY DIFFER, WHAT DOCTYPES REALLY ACHIEVED, WHAT ONES YOU MIGHT ENCOUNTER IN THE WILD, WHY WE WILL BE USING HTML5 DOCTYPE IN THIS COURSE, WHAT IT ACHIEVES, ETC.}<br />
<br />
== The HTML body ==<br />
<br />
{ -- OVERALL THIS IS A REASONABLE SECTION, BUT QUITE A LOT NEEDS ADDING TO BRING IT UP TO DATE WITH HTML5, ETC. I WILL CLEARLY MARK NEW ARTICLES}<br />
<br />
# NEW ARTICLE - structural elements, section, article, etc. also including div and span<br />
# [http://www.w3.org/wiki/Marking_up_textual_content_in_HTML Marking up textual content in HTML], by Mark Norman Francis. { -- NEEDS UPDATING, AS SOME OF THESE ELEMENTS WILL HAVE CHANGED FUNCTION IN HTML5, AND DEPRECATED ELEMENTS HAVE BEEN REPURPOSED}<br />
# [http://www.w3.org/wiki/HTML_lists HTML Lists], by Ben Buchanan. { -- DOESN'T NEED MANY UPDATES}<br />
# [http://www.w3.org/wiki/Images_in_HTML Images in HTML], by Christian Heilmann. { -- NEEDS A BIT OF SPIT AND POLISH, AND NEEDS FIGURE AND FIGCAPTION ADDING}<br />
# [http://www.w3.org/wiki/HTML_links_-_lets_build_a_web HTML links — let's build a web!] by Christian Heilmann. { -- NEEDS SPIT AND POLISH, AND NEEDS THE CONCEPT OF BLOCK LEVEL LINKS ADDING}<br />
# NEW ARTICLE - HTML5 video and audio<br />
# [http://www.w3.org/wiki/HTML_tables HTML Tables], by Jen Hanen. { -- NOT MANY UPDATES NEEDED}<br />
# [http://www.w3.org/wiki/HTML_forms_-_the_basics HTML Forms — the basics], by Jen Hanen. { -- THERE IS A LOT OF NEW HTML5 FORM STUFF TO ADD, OBVIOUSLY - I THINK THAT IN THIS CIRCUMSTANCE, BECAUSE SUPPORT FOR HTML5 FORM STUFF IS PATCHY ACROSS BROWSERS RIGHT NOW, WE SHOULD DO SMALL UPDATES ON THE EXISTING ARTICLE, THEN ADD ONE OR MORE SEPARATE ARTICLES TO COVER THE NEW HTML5 FORM ELEMENTS AND NEW ATTRIBUTES, AND THEN PERHAPS SEPARATE COVERAGE OF VALIDATION}<br />
# [http://www.w3.org/wiki/Lesser_-_known_semantic_elements Lesser-known semantic elements], by Mark Norman Francis. {THIS WILL NEED UPDATING, AS A NUMBER OF THESE ELEMENTS HAVE BEEN REDEFINED}<br />
# [http://www.w3.org/wiki/Generic_containers_-_the_div_and_span_elements Generic containers — the div and span elements], by Mark Norman Francis. { -- REMOVE THIS ONE - THIS WILL BE COVERED IN THE STRUCTURAL ELEMENTS ARTICLE}<br />
# [http://www.w3.org/wiki/Creating_multiple_pages_with_navigation_menus Creating multiple pages with navigation menus], by Christian Heilmann.<br />
# [http://www.w3.org/wiki/Validating_your_HTML Validating your HTML], by Mark Norman Francis. { -- I THINK THIS COULD BE REWRITTEN AND IMPROVED, AND RELOCATED TO A SECTION ABOUT DEBUGGING WEB PAGES? A MORE COMPLETE TREATMENT WOULD BE NICE}<br />
<br />
== Accessibility specifics ==<br />
<br />
# [http://www.w3.org/wiki/Accessibility_basics Accessibility basics], by Tom Hughes-Croucher.<br />
# [http://www.w3.org/wiki/Accessibility_testing Accessibility testing], by Benjamin Hawkes-Lewis.<br />
<br />
I THINK THIS NEEDS TO BE EXPANDED OUT TO SEVERAL ARTICLES, TO COVER DIFFERENT ASPECTS, SOMETHING LIKE:<br />
<br />
# WRITING A PLAN FOR A11Y TESTING, INCLUDING USE OF REAL USER TESTING, CONFORMANCE CRITERIA, AUTOMATED TOOLS, AND GOOD OLD COMMON SENSE<br />
# THE LEGAL SIDE OF THINGS, EXPLAINED IN DETAIL<br />
# DECIPHERING WCAG, AND OTHER CONFORMANCE CRITERIA SUCH AS SECTION 508<br />
# ACCESSIBILITY TOOLS, WHAT TO USE AND WHAT TO AVOID. HOW FAR WILL THESE GET YOU?<br />
# REAL A11Y TESTING WITH REAL PEOPLE, HOW TO PUT TOGETHER FOCUS GROUPS, WHAT TO LOOK FOR HERE<br />
# COMMON SENSE - SOLUTIONS FOR COMMON ACCESSIBILITY ISSUES - A ROADMAP FOR FIXING ISSUES. START WITH SEMANTIC HTML, THEN GO TO VIDEO AND AUDIO CONTENT, JAVASCRIPT, AJAX, ALTERNATIVES. }<br />
<br />
== CSS ==<br />
<br />
# [http://dev.opera.com/articles/view/27-css-basics/ CSS basics], by Christian Heilmann. { -- NEEDS A BIT OF SPRUCING UP, TO TALK ABOUT NEW STUFF, PLUS WE NEED TO ADD SOME STUFF ABOUT ALL THE NEW CSS SELECTORS. OF DO WE? MAYBE WE COULD JUST COVER THE BASIC SELECTORS HERE, AND THEN COVER SOME OF THE MORE ADVANCED ONES IN APPROPRIATE PLACES, EG FORM RELATED ONES, AND OTHER ADVANCED ONES IN AN ARTICLE OF THEIR OWN - SEE NEXT ARTICLE}<br />
# NEW ARTICLE - ADVANCED SELECTORS - cover all the advanced selectors that we didn't cover in the previous chapter - last nth of type, valid, invalid, nth child, etc. <br />
# NEW CHAPTER - CSS3 SHADOWS<br />
# [http://www.w3.org/wiki/Inheritance_and_cascade Inheritance and Cascade], by Tommy Olsson. { -- NOT MUCH TO UPDATE HERE}<br />
# [http://www.w3.org/wiki/Text_styling_with_CSS Text styling with CSS], by Ben Henick. { -- THIS IS A VERY WEIGHTY CHAPTER, AND COULD DO WITH SLIMMING DOWN A BIT, AND MAKING MORE GRANULAR, PERHAPS EVEN SPLITTING IT. ALSO ADD WEB FONTS, AND TALK ABOUT SOME OF THE MORE OBSCURE TEXT STYLING STUFF, LIKE TEXT-OVERFLOW, GENERATED CONTENT FOR QUOTES, WORD WRAP, ETC.}<br />
# [http://www.w3.org/wiki/The_CSS_layout_model_-_boxes_borders_margins_padding The CSS layout model - boxes, borders, margins, padding], by Ben Henick. { -- AGAIN, MIGHT NEED SPLITTING, NEED TO COVER DIFFERENT LAYOUT MODELS, BORDER-RADIUS ETC.}<br />
# [http://www.w3.org/wiki/CSS_background_images CSS background images], by Nicole Sullivan. { -- NEED TO UPDATE TO COVER MULTIPLE BACKGROUND IMAGES, BORDER-IMAGE, LINEAR GRADIENTS, RADIAL GRADIENTS MIGHT NEED MULTIPLE CHAPTERS}<br />
# [http://www.w3.org/wiki/Styling_lists_and_links Styling lists and links], by Ben Buchanan. { -- DOESN'T NEED THAT MUCH }<br />
# [http://www.w3.org/wiki/Styling_tables Styling tables], by Ben Buchanan. { -- DOESN'T NEED THAT MUCH }<br />
# [http://www.w3.org/wiki/Styling_forms Styling forms], by Ben Henick. { -- NEED TO ADD CSS3 FORM-RELATED PSEUDO CLASSES, AND DISCUSSION OF STYLING ERRORS AND STUFF}<br />
# [http://www.w3.org/wiki/Floats_and_clearing Floats and clearing], by Tommy Olsson. { - NOT THAT MUCH NEEDED, ALTHOUGH I NEED TO BE CAREFUL TO SEPARATE OUT MULTIPLE COLUMN LAYOUTS, AND COVER MULTI-COL THERE}<br />
# [http://www.w3.org/wiki/CSS_static_and_relative_positioning CSS static and relative positioning], by Tommy Olsson.<br />
# [http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning CSS absolute and fixed positioning], by Tommy Olsson. { -- THE POSITIONING CHAPTERS NEED SOME WORK, BUT NOT THAT MUCH}<br />
# NEW CHAPTER - CSS3 TRANSFORMS<br />
# NEW CHAPTER - CSS3 TRANSITIONS<br />
# NEW CHAPTER - CSS3 ANIMATIONS<br />
# NEW CHAPTER - MEDIA QUERIES<br />
# NEW CHAPTER - VIEWPORT<br />
# NEW CHAPTER - CREATING AN ADAPTIVE DESIGN, USING MEDIA QUERIES, VIEWPORT, MULTI-COL, ETC.<br />
# NEW CHAPTER - OBJECT FIT/OBJECT POSITION<br />
# NEW CHAPTER - OPTIMIZING CSS (INCLUDE IDEAS FOR OPTIMIZING FOR MOBILE ETC.)<br />
<br />
== Advanced CSS study ==<br />
<br />
# [http://www.w3.org/wiki/Headers_footers_columns_and_templates Headers, footers, columns, and templates], by Ben Henick { -- NOT SURE HOW USEFUL THIS IS, MAYBE DISSECT IT, PUT THE USEFUL STUFF IN OTHER CHAPTERS. A BIT TOO LONG WINDED. }<br />
<br />
== JavaScript ==<br />
<br />
# [http://www.w3.org/wiki/Programming_-_the_real_basics Programming - the real basics!], by Christian Heilmann<br />
# [http://www.w3.org/wiki/What_can_you_do_with_JavaScript What can you do with JavaScript?], by Christian Heilmann<br />
# [http://www.w3.org/wiki/Your_first_look_at_JavaScript Your first look at JavaScript], by Christian Heilmann<br />
# [http://www.w3.org/wiki/JavaScript_best_practices JavaScript best practices], by Christian Heilmann<br />
# [http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript The principles of unobtrusive JavaScript], by PPK<br />
# [http://www.w3.org/wiki/JavaScript_functions JavaScript functions], by Mike West<br />
# [http://www.w3.org/wiki/Objects_in_JavaScript Objects in JavaScript], by Mike West<br />
# [http://www.w3.org/wiki/Traversing_the_DOM Traversing the DOM], by Mike West<br />
# [http://www.w3.org/wiki/Creating_and_modifying_HTML Creating and modifying HTML], by Stuart Langridge<br />
# [http://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript Dynamic style - manipulating CSS with JavaScript], by Greg Schechter<br />
# [http://www.w3.org/wiki/Handling_events_with_JavaScript Handling events with JavaScript], by Robert Nyman<br />
# [http://www.w3.org/wiki/JavaScript_animation JavaScript animation], by Stuart Langridge<br />
# [http://www.w3.org/wiki/Graceful_degredation_versus_progressive_enhancement Graceful degredation versus progressive enhancement], by Christian Heilmann<br />
# NEW CHAPTER - OPTIMIZING JAVASCRIPT (INCLUDE IDEAS FOR OPTIMIZING FOR MOBILE ETC.)<br />
# NEW CHAPTER - TOUCH EVENTS. THESE DEFINITELY NEED COVERAGE, AS THEY ARE GETTING VERY BIG THESE DAYS. TOUCH DEVICES ARE IMPORTANT.<br />
<br />
== HTML5 APIS ==<br />
<br />
PROBABLY NEED TO INTERSPERSE THESE IN THE ABOVE SECTION, OR PUT NEW SECTIONS IN, EG "OFFLINE WEB APPLICATIONS" WOULD WORK WELL AS A DISTINCT SECTION.<br />
<br />
# MEDIA API<br />
# GEOLOCATION (YEAH, NOT HTML5, BUT HEY)<br />
# WEB WORKERS<br />
# WEB SOCKETS<br />
# APPCACHE<br />
# WEBSQL/INDEXEDDB<br />
# WEB STORAGE<br />
# CANVAS (SHOULD PROBABLY HAVE ITS OWN SECTION ENTIRELY)<br />
# HTML5 HISTORY API<br />
# DATASETS<br />
<br />
== OTHER THINGS TO COVER ==<br />
<br />
# SVG (REALLY NEEDS ITS OWN COURSE, See the following proposal)<br />
# WAI-ARIA<br />
<br />
=== SVG ===<br />
<br />
Source of inspiration :<br />
<br />
* http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html<br />
* https://developer.mozilla.org/en/SVG/Tutorial<br />
<br />
==== SVG BASICS ====<br />
<br />
# ''History and usage'' : As for HTML, it could be good to start by giving some context: What is it, Where does it come, What is it made for, How is it different than HTML?<br />
# ''Syntax and deployment'' : This part would introduce the basic syntax, the concept of viewport and absolute positioning and finally how to embed an SVG document inside other language (basically HTML and CSS)<br />
# ''Basic shapes'' : This part will be dedicated to the basic shapes available in SVG<br />
# ''Position and transformation'' : To go deeper inside the viewport thing and to explain the role of the transformations.<br />
# ''Using text in SVG''<br />
# ''Styling SVG'' : This is where we would detailed how to use presentation attributes and their CSS counterpart.<br />
# ''Scripting SVG'' : Where we could introduce the SVG DOM API.<br />
<br />
==== Part 2 : SVG ADVANCED ====<br />
<br />
# ''How to build Pathes'' : To dig into the syntax of the d attribute on path elements<br />
# ''Animating the web with SVG Animations'' : How to use SVG Animations<br />
# ''SVG Filters'' : This would be an introduction to filters but each filters could have it's own article (Filters a really hard things)<br />
# ''Clipping and Masking''<br />
# ''Patterns''<br />
# ''Gradients''<br />
# ''Dealing with the external'' : This part would be dedicated to the foreignObject element but also to links and images elements.<br />
<br />
=== SVG article drafts we could use ===<br />
<br />
# [[SVG Primer]] (written by David Storey, but unused)<br />
# [[SVG Links]] (written by David Storey, but unused)<br />
<br />
== Adaptive design and development for Mobile and other alternative browsing devices ==<br />
<br />
PROPOSED STRUCTURE<br />
<br />
# [[Mobile beginnings: An introduction to the mobile web]] (include history of mobiles, how mobile networks work, what the hardware looks like, what the software looks like)<br />
# [[What do the devices look like?]] (a fairly detailed reference showing the types of devices you are likely to need to support when building cross device adaptive apps. Include data such as screen resolution, espect ratio and dpi of the different devices. This kid of reference material will be very useful to developers.)<br />
# [[Mobile constraints and advantages]] (what are the specific constraints you need to work around for mobile and alternative browsing devices? What are the advantages, eg the context specific technologies you can take advantage of?)<br />
# [[Mobile friendly: web design and development Overview]] (start with a basis of semantic HTML, accessibility best practices are Making an app or site mobile friendly - do you create a different site, or do you adapt your existing site for mobile? A brief introduction to Adaptive design - graceful degradation, progressive enhancement, using media queries and viewport to adapt layout, using feature detection to server appropriate content and services, geolocation, multimedia, offline apps, don't use browser sniffing!) A lot of this will be covered elsewhere.<br />
# Feature detection, polyfilling, graceful degredation, etc. An article on this would be good, maybe something which showed how to detect for all different features. Kind of like Mark Pilgrims' No bullshit guide to detecting everything. Before he took it all down.<br />
# MOBILE/DEVICE TESTING<br />
<br />
OTHER THINGS TO ADD ELSEWHERE IN THE MATERIAL<br />
<br />
# WE SHOULD WRITE AN ARTICLE TITLED "ONE WEB, MANY DEVICES", PLACED INSIDE http://www.w3.org/wiki/Web_Standards_Curriculum#Introduction_to_the_world_of_web_standards<br />
# WE SHOULD ALSO SAY SOMETHING ABOUT SEMANTICS AND DIVERSE DEVICES IN http://www.w3.org/wiki/The_web_standards_model_-_HTML_CSS_and_JavaScript<br />
<br />
== Supplementary articles ==<br />
<br />
* [http://www.w3.org/wiki/Getting_your_content_online Getting your content online], by Craig Grannell. { -- DOESN'T NEED CHANGES }<br />
* [http://www.w3.org/wiki/More_about_the_document_head More about the document &lt;head&gt;], by Chris Heilmann. { -- PROBABLY DOESN'T NEED CHANGES, ALTHOUGH IT WOULD BE NICE TO MOVE IT INTO THE MAIN HTML SECTION, AS IT GETS LOST OUT HERE }<br />
* [http://www.w3.org/wiki/Common_HTML_entities_used_for_typography Common HTML entities used for typography], by Ben Henick. { -- DOESN'T NEED MANY CHANGES }<br />
* [http://www.w3.org/wiki/The_web_standards_curriculum_glossary The Opera Web Standards Curriculum glossary], by various authors. This is incomplete, and will be added to as time goes by. { -- NEEDS A LOT OF TERMS ADDING, IF IT IS TO BE USEFUL }<br />
<br />
== Deprecated articles: removeed from original WSC ==<br />
<br />
* [[Choosing the right doctype for your HTML documents]]. [http://dev.opera.com/articles/view/14-megfelelo-doctype-valasztasa/ Hungarian translation] | [http://dev.opera.com/articles/view/14-choosing-the-right-doctype-for-your-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m3/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m3/ud3/index.html Spanish translation]<br />
* [[Generic containers - the div and span elements]]. [http://dev.opera.com/articles/view/22-altalanos-tarolok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud8/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud8/index.html Spanish translation]<br />
<br />
<br />
[[Category:WSC]]</div>Cmillshttps://www.w3.org/wiki/index.php?title=WSC_proposed_updates&diff=54325WSC proposed updates2011-10-06T12:44:13Z<p>Cmills: /* Mobile web development - proposed new structure */</p>
<hr />
<div> <br />
= Web standards curriculum on W3C Wiki: plan for updates 2011 =<br />
<br />
== The beginning ==<br />
<br />
[[Introduction to the Web Standards Curriculum]] by Chris Mills. '''{ -- JUST NEEDS A GENERAL READ, AND A LITTLE BIT OF TWEAKING}'''<br />
<br />
== Introduction to the world of web standards ==<br />
<br />
# [[The history of the Web|The history of the Internet and the web, and the evolution of web standards]], by Mark Norman Francis. { -- NEEDS A GENERAL READ, PLUS I THINK IT COULD BENEFIT FROM A BIT MORE HISTORY BEING ADDED ABOUT THE EVOLUTION OF HTML5 AND CSS3}<br />
# [[How does the Internet work]]? by Jonathan Lane. {-- NO TWEAKING NEEDED; JUST SPIT AND POLISH}<br />
# [[The web standards model - HTML CSS and JavaScript]] by Jonathan Lane. { -- A FEW TWEAKS NEEDED - THE HTML SECTION COULD DO WITH AN OVERHAUL TO CCOUNT FOR HTML5, AND DEAL WITH XHTML A BIT BETTER}<br />
# [[Beautiful dream, but what's the reality]]? by Jonathan Lane. { -- I THINK THIS ARTICLE COULD JUST BE REMOVED, AND A SMALL SECTION ADDED TO THE PREVIOUS ARTICLE TO COVER "THE REALITY OF IT ALL". AS IT STANDS, THIS ARTICLE IS A BIT OF A RANT, AND NOT REALLY THAT USEFUL TO EDUCATION}<br />
<br />
== Web Design Concepts ==<br />
<br />
This section won't go into any code or markup details, and will act as an introduction to the design process before you start to create any graphics or code, as well as concepts of web design such as IA, navigation, usability etc.<br />
<br />
# [http://www.w3.org/wiki/Information_Architecture_-_planning_out_a_web_site Information Architecture - planning out a web site], by Jonathan Lane.<br />
# [http://www.w3.org/wiki/What_does_a_good_web_page_need What does a good web page need?], by Mark Norman Francis.<br />
# [http://www.w3.org/wiki/Colour_theory Colour Theory], by Linda Goin.<br />
# [http://www.w3.org/wiki/Building_up_a_site_wireframe Building up a site wireframe], by Linda Goin.<br />
# [http://www.w3.org/wiki/Colour_schemes_and_design_mockups Colour schemes and design mockups], by Linda Goin. <br />
# [http://www.w3.org/wiki/Typography_on_the_Web Typography on the web], by Paul Haine.<br />
<br />
{ -- I THINK THIS WHOLE SECTION NEEDS AN OVERHAUL, AS CURRENTLY IT IS NOT VERY EFFECTIVE. THE TYPOGRAPHY AND IA SECTIONS ARE FINE, BUT I'M NOT SURE ABOUT THE OTHER STUFF. I THINK THE SECTION SHOULD BE RETITLED "PLANNING A WEB SITE", AND HAVE A STRUCTURE SOMETHING LIKE THE FOLLOWING: <br />
<br />
=== Planned New section to replace "Web Design Concepts" - to be called "Planning a web site" ===<br />
<br />
# [[Introduction to planning a web site]]<br />
# Scoping and user research<br />
# [[Information_Architecture_-_planning_out_a_web_site|Information Architecture - planning out a web site]]. [http://dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud1/index.html Spanish translation]<br />
# [[What_does_a_good_web_page_need|What does a good web page need?]] [http://dev.opera.com/articles/view/7-mi-kell-egy-jo-weblaphoz/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud2/index.html Spanish translation]<br />
# [[Typography on the Web]]. [http://dev.opera.com/articles/view/11-tipografia-a-weben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud6/index.html Spanish translation]<br />
# Colour schemes and deasign theory<br />
# Mockups and protptypes<br />
# User experience design - INCLUDE MOBILE/ALTERNATIVE DEVICE USER EXPERIENCE. HOW DOES IT DIFFER?<br />
<br />
== HTML basics ==<br />
<br />
# [http://www.w3.org/wiki/The_basics_of_HTML The basics of HTML], by Mark Norman Francis. { -- THIS LOOKS OK, ALTHOUGH I THINK IT NEEDS A BIT OF UPDATING TO ACCOUNT FOR HTML5, THE HISTORY SECTION, ETC. THE EXAMPLES SHOULD ALSO BE UPDATED TO HTML5 SEMANTICS, WHERE APPROPRIATE, EG NO MORE DIVS FOR PAGE SECTIONS}<br />
# [http://www.w3.org/wiki/The_HTML_head_element The HTML &lt;head&gt; element], by Christian Heilmann. { -- NEEDS UPDATING, AND HTML5 FEATURES ADDING, SUCH AS META CHARSET} <br />
# [http://www.w3.org/wiki/Choosing_the_right_doctype_for_your_HTML_documents Choosing the right doctype for your HTML documents], by Roger Johansson. { -- I THINK THAT THIS NEEDS TO BE REWRITTEN TO FOCUS LESS ON DOCTYPES, AND MORE ON HTML/XHTML RULES, HOW THEY DIFFER, WHAT DOCTYPES REALLY ACHIEVED, WHAT ONES YOU MIGHT ENCOUNTER IN THE WILD, WHY WE WILL BE USING HTML5 DOCTYPE IN THIS COURSE, WHAT IT ACHIEVES, ETC.}<br />
<br />
== The HTML body ==<br />
<br />
{ -- OVERALL THIS IS A REASONABLE SECTION, BUT QUITE A LOT NEEDS ADDING TO BRING IT UP TO DATE WITH HTML5, ETC. I WILL CLEARLY MARK NEW ARTICLES}<br />
<br />
# NEW ARTICLE - structural elements, section, article, etc. also including div and span<br />
# [http://www.w3.org/wiki/Marking_up_textual_content_in_HTML Marking up textual content in HTML], by Mark Norman Francis. { -- NEEDS UPDATING, AS SOME OF THESE ELEMENTS WILL HAVE CHANGED FUNCTION IN HTML5, AND DEPRECATED ELEMENTS HAVE BEEN REPURPOSED}<br />
# [http://www.w3.org/wiki/HTML_lists HTML Lists], by Ben Buchanan. { -- DOESN'T NEED MANY UPDATES}<br />
# [http://www.w3.org/wiki/Images_in_HTML Images in HTML], by Christian Heilmann. { -- NEEDS A BIT OF SPIT AND POLISH, AND NEEDS FIGURE AND FIGCAPTION ADDING}<br />
# [http://www.w3.org/wiki/HTML_links_-_lets_build_a_web HTML links — let's build a web!] by Christian Heilmann. { -- NEEDS SPIT AND POLISH, AND NEEDS THE CONCEPT OF BLOCK LEVEL LINKS ADDING}<br />
# NEW ARTICLE - HTML5 video and audio<br />
# [http://www.w3.org/wiki/HTML_tables HTML Tables], by Jen Hanen. { -- NOT MANY UPDATES NEEDED}<br />
# [http://www.w3.org/wiki/HTML_forms_-_the_basics HTML Forms — the basics], by Jen Hanen. { -- THERE IS A LOT OF NEW HTML5 FORM STUFF TO ADD, OBVIOUSLY - I THINK THAT IN THIS CIRCUMSTANCE, BECAUSE SUPPORT FOR HTML5 FORM STUFF IS PATCHY ACROSS BROWSERS RIGHT NOW, WE SHOULD DO SMALL UPDATES ON THE EXISTING ARTICLE, THEN ADD ONE OR MORE SEPARATE ARTICLES TO COVER THE NEW HTML5 FORM ELEMENTS AND NEW ATTRIBUTES, AND THEN PERHAPS SEPARATE COVERAGE OF VALIDATION}<br />
# [http://www.w3.org/wiki/Lesser_-_known_semantic_elements Lesser-known semantic elements], by Mark Norman Francis. {THIS WILL NEED UPDATING, AS A NUMBER OF THESE ELEMENTS HAVE BEEN REDEFINED}<br />
# [http://www.w3.org/wiki/Generic_containers_-_the_div_and_span_elements Generic containers — the div and span elements], by Mark Norman Francis. { -- REMOVE THIS ONE - THIS WILL BE COVERED IN THE STRUCTURAL ELEMENTS ARTICLE}<br />
# [http://www.w3.org/wiki/Creating_multiple_pages_with_navigation_menus Creating multiple pages with navigation menus], by Christian Heilmann.<br />
# [http://www.w3.org/wiki/Validating_your_HTML Validating your HTML], by Mark Norman Francis. { -- I THINK THIS COULD BE REWRITTEN AND IMPROVED, AND RELOCATED TO A SECTION ABOUT DEBUGGING WEB PAGES? A MORE COMPLETE TREATMENT WOULD BE NICE}<br />
<br />
== Accessibility specifics ==<br />
<br />
# [http://www.w3.org/wiki/Accessibility_basics Accessibility basics], by Tom Hughes-Croucher.<br />
# [http://www.w3.org/wiki/Accessibility_testing Accessibility testing], by Benjamin Hawkes-Lewis.<br />
<br />
I THINK THIS NEEDS TO BE EXPANDED OUT TO SEVERAL ARTICLES, TO COVER DIFFERENT ASPECTS, SOMETHING LIKE:<br />
<br />
# WRITING A PLAN FOR A11Y TESTING, INCLUDING USE OF REAL USER TESTING, CONFORMANCE CRITERIA, AUTOMATED TOOLS, AND GOOD OLD COMMON SENSE<br />
# THE LEGAL SIDE OF THINGS, EXPLAINED IN DETAIL<br />
# DECIPHERING WCAG, AND OTHER CONFORMANCE CRITERIA SUCH AS SECTION 508<br />
# ACCESSIBILITY TOOLS, WHAT TO USE AND WHAT TO AVOID. HOW FAR WILL THESE GET YOU?<br />
# REAL A11Y TESTING WITH REAL PEOPLE, HOW TO PUT TOGETHER FOCUS GROUPS, WHAT TO LOOK FOR HERE<br />
# COMMON SENSE - SOLUTIONS FOR COMMON ACCESSIBILITY ISSUES - A ROADMAP FOR FIXING ISSUES. START WITH SEMANTIC HTML, THEN GO TO VIDEO AND AUDIO CONTENT, JAVASCRIPT, AJAX, ALTERNATIVES. }<br />
<br />
== CSS ==<br />
<br />
# [http://dev.opera.com/articles/view/27-css-basics/ CSS basics], by Christian Heilmann. { -- NEEDS A BIT OF SPRUCING UP, TO TALK ABOUT NEW STUFF, PLUS WE NEED TO ADD SOME STUFF ABOUT ALL THE NEW CSS SELECTORS. OF DO WE? MAYBE WE COULD JUST COVER THE BASIC SELECTORS HERE, AND THEN COVER SOME OF THE MORE ADVANCED ONES IN APPROPRIATE PLACES, EG FORM RELATED ONES, AND OTHER ADVANCED ONES IN AN ARTICLE OF THEIR OWN - SEE NEXT ARTICLE}<br />
# NEW ARTICLE - ADVANCED SELECTORS - cover all the advanced selectors that we didn't cover in the previous chapter - last nth of type, valid, invalid, nth child, etc. <br />
# NEW CHAPTER - CSS3 SHADOWS<br />
# [http://www.w3.org/wiki/Inheritance_and_cascade Inheritance and Cascade], by Tommy Olsson. { -- NOT MUCH TO UPDATE HERE}<br />
# [http://www.w3.org/wiki/Text_styling_with_CSS Text styling with CSS], by Ben Henick. { -- THIS IS A VERY WEIGHTY CHAPTER, AND COULD DO WITH SLIMMING DOWN A BIT, AND MAKING MORE GRANULAR, PERHAPS EVEN SPLITTING IT. ALSO ADD WEB FONTS, AND TALK ABOUT SOME OF THE MORE OBSCURE TEXT STYLING STUFF, LIKE TEXT-OVERFLOW, GENERATED CONTENT FOR QUOTES, WORD WRAP, ETC.}<br />
# [http://www.w3.org/wiki/The_CSS_layout_model_-_boxes_borders_margins_padding The CSS layout model - boxes, borders, margins, padding], by Ben Henick. { -- AGAIN, MIGHT NEED SPLITTING, NEED TO COVER DIFFERENT LAYOUT MODELS, BORDER-RADIUS ETC.}<br />
# [http://www.w3.org/wiki/CSS_background_images CSS background images], by Nicole Sullivan. { -- NEED TO UPDATE TO COVER MULTIPLE BACKGROUND IMAGES, BORDER-IMAGE, LINEAR GRADIENTS, RADIAL GRADIENTS MIGHT NEED MULTIPLE CHAPTERS}<br />
# [http://www.w3.org/wiki/Styling_lists_and_links Styling lists and links], by Ben Buchanan. { -- DOESN'T NEED THAT MUCH }<br />
# [http://www.w3.org/wiki/Styling_tables Styling tables], by Ben Buchanan. { -- DOESN'T NEED THAT MUCH }<br />
# [http://www.w3.org/wiki/Styling_forms Styling forms], by Ben Henick. { -- NEED TO ADD CSS3 FORM-RELATED PSEUDO CLASSES, AND DISCUSSION OF STYLING ERRORS AND STUFF}<br />
# [http://www.w3.org/wiki/Floats_and_clearing Floats and clearing], by Tommy Olsson. { - NOT THAT MUCH NEEDED, ALTHOUGH I NEED TO BE CAREFUL TO SEPARATE OUT MULTIPLE COLUMN LAYOUTS, AND COVER MULTI-COL THERE}<br />
# [http://www.w3.org/wiki/CSS_static_and_relative_positioning CSS static and relative positioning], by Tommy Olsson.<br />
# [http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning CSS absolute and fixed positioning], by Tommy Olsson. { -- THE POSITIONING CHAPTERS NEED SOME WORK, BUT NOT THAT MUCH}<br />
# NEW CHAPTER - CSS3 TRANSFORMS<br />
# NEW CHAPTER - CSS3 TRANSITIONS<br />
# NEW CHAPTER - CSS3 ANIMATIONS<br />
# NEW CHAPTER - MEDIA QUERIES<br />
# NEW CHAPTER - VIEWPORT<br />
# NEW CHAPTER - CREATING AN ADAPTIVE DESIGN, USING MEDIA QUERIES, VIEWPORT, MULTI-COL, ETC.<br />
# NEW CHAPTER - OBJECT FIT/OBJECT POSITION<br />
# NEW CHAPTER - OPTIMIZING CSS (INCLUDE IDEAS FOR OPTIMIZING FOR MOBILE ETC.)<br />
<br />
== Advanced CSS study ==<br />
<br />
# [http://www.w3.org/wiki/Headers_footers_columns_and_templates Headers, footers, columns, and templates], by Ben Henick { -- NOT SURE HOW USEFUL THIS IS, MAYBE DISSECT IT, PUT THE USEFUL STUFF IN OTHER CHAPTERS. A BIT TOO LONG WINDED. }<br />
<br />
== JavaScript ==<br />
<br />
# [http://www.w3.org/wiki/Programming_-_the_real_basics Programming - the real basics!], by Christian Heilmann<br />
# [http://www.w3.org/wiki/What_can_you_do_with_JavaScript What can you do with JavaScript?], by Christian Heilmann<br />
# [http://www.w3.org/wiki/Your_first_look_at_JavaScript Your first look at JavaScript], by Christian Heilmann<br />
# [http://www.w3.org/wiki/JavaScript_best_practices JavaScript best practices], by Christian Heilmann<br />
# [http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript The principles of unobtrusive JavaScript], by PPK<br />
# [http://www.w3.org/wiki/JavaScript_functions JavaScript functions], by Mike West<br />
# [http://www.w3.org/wiki/Objects_in_JavaScript Objects in JavaScript], by Mike West<br />
# [http://www.w3.org/wiki/Traversing_the_DOM Traversing the DOM], by Mike West<br />
# [http://www.w3.org/wiki/Creating_and_modifying_HTML Creating and modifying HTML], by Stuart Langridge<br />
# [http://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript Dynamic style - manipulating CSS with JavaScript], by Greg Schechter<br />
# [http://www.w3.org/wiki/Handling_events_with_JavaScript Handling events with JavaScript], by Robert Nyman<br />
# [http://www.w3.org/wiki/JavaScript_animation JavaScript animation], by Stuart Langridge<br />
# [http://www.w3.org/wiki/Graceful_degredation_versus_progressive_enhancement Graceful degredation versus progressive enhancement], by Christian Heilmann<br />
# NEW CHAPTER - OPTIMIZING JAVASCRIPT (INCLUDE IDEAS FOR OPTIMIZING FOR MOBILE ETC.)<br />
<br />
== HTML5 APIS ==<br />
<br />
PROBABLY NEED TO INTERSPERSE THESE IN THE ABOVE SECTION, OR PUT NEW SECTIONS IN, EG "OFFLINE WEB APPLICATIONS" WOULD WORK WELL AS A DISTINCT SECTION.<br />
<br />
# MEDIA API<br />
# GEOLOCATION (YEAH, NOT HTML5, BUT HEY)<br />
# WEB WORKERS<br />
# WEB SOCKETS<br />
# APPCACHE<br />
# WEBSQL/INDEXEDDB<br />
# WEB STORAGE<br />
# CANVAS (SHOULD PROBABLY HAVE ITS OWN SECTION ENTIRELY)<br />
# HTML5 HISTORY API<br />
# DATASETS<br />
<br />
== OTHER THINGS TO COVER ==<br />
<br />
# SVG (REALLY NEEDS ITS OWN COURSE, See the following proposal)<br />
# WAI-ARIA<br />
<br />
=== SVG ===<br />
<br />
Source of inspiration :<br />
<br />
* http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html<br />
* https://developer.mozilla.org/en/SVG/Tutorial<br />
<br />
==== SVG BASICS ====<br />
<br />
# ''History and usage'' : As for HTML, it could be good to start by giving some context: What is it, Where does it come, What is it made for, How is it different than HTML?<br />
# ''Syntax and deployment'' : This part would introduce the basic syntax, the concept of viewport and absolute positioning and finally how to embed an SVG document inside other language (basically HTML and CSS)<br />
# ''Basic shapes'' : This part will be dedicated to the basic shapes available in SVG<br />
# ''Position and transformation'' : To go deeper inside the viewport thing and to explain the role of the transformations.<br />
# ''Using text in SVG''<br />
# ''Styling SVG'' : This is where we would detailed how to use presentation attributes and their CSS counterpart.<br />
# ''Scripting SVG'' : Where we could introduce the SVG DOM API.<br />
<br />
==== Part 2 : SVG ADVANCED ====<br />
<br />
# ''How to build Pathes'' : To dig into the syntax of the d attribute on path elements<br />
# ''Animating the web with SVG Animations'' : How to use SVG Animations<br />
# ''SVG Filters'' : This would be an introduction to filters but each filters could have it's own article (Filters a really hard things)<br />
# ''Clipping and Masking''<br />
# ''Patterns''<br />
# ''Gradients''<br />
# ''Dealing with the external'' : This part would be dedicated to the foreignObject element but also to links and images elements.<br />
<br />
=== SVG article drafts we could use ===<br />
<br />
# [[SVG Primer]] (written by David Storey, but unused)<br />
# [[SVG Links]] (written by David Storey, but unused)<br />
<br />
== Adaptive design and development for Mobile and other alternative browsing devices ==<br />
<br />
PROPOSED STRUCTURE<br />
<br />
# [[Mobile beginnings: An introduction to the mobile web]] (include history of mobiles, how mobile networks work, what the hardware looks like, what the software looks like)<br />
# [[What do the devices look like?]] (a fairly detailed reference showing the types of devices you are likely to need to support when building cross device adaptive apps. Include data such as screen resolution, espect ratio and dpi of the different devices. This kid of reference material will be very useful to developers.)<br />
# [[Mobile constraints and advantages]] (what are the specific constraints you need to work around for mobile and alternative browsing devices? What are the advantages, eg the context specific technologies you can take advantage of?)<br />
# [[Mobile friendly: web design and development Overview]] (start with a basis of semantic HTML, accessibility best practices are Making an app or site mobile friendly - do you create a different site, or do you adapt your existing site for mobile? A brief introduction to Adaptive design - graceful degradation, progressive enhancement, using media queries and viewport to adapt layout, using feature detection to server appropriate content and services, geolocation, multimedia, offline apps, don't use browser sniffing!) A lot of this will be covered elsewhere.<br />
# Feature detection, polyfilling, graceful degredation, etc. An article on this would be good, maybe something which showed how to detect for all different features. Kind of like Mark Pilgrims' No bullshit guide to detecting everything. Before he took it all down.<br />
# MOBILE/DEVICE TESTING<br />
<br />
OTHER THINGS TO ADD ELSEWHERE IN THE MATERIAL<br />
<br />
# WE SHOULD WRITE AN ARTICLE TITLED "ONE WEB, MANY DEVICES", PLACED INSIDE http://www.w3.org/wiki/Web_Standards_Curriculum#Introduction_to_the_world_of_web_standards<br />
# WE SHOULD ALSO SAY SOMETHING ABOUT SEMANTICS AND DIVERSE DEVICES IN http://www.w3.org/wiki/The_web_standards_model_-_HTML_CSS_and_JavaScript<br />
<br />
== Supplementary articles ==<br />
<br />
* [http://www.w3.org/wiki/Getting_your_content_online Getting your content online], by Craig Grannell. { -- DOESN'T NEED CHANGES }<br />
* [http://www.w3.org/wiki/More_about_the_document_head More about the document &lt;head&gt;], by Chris Heilmann. { -- PROBABLY DOESN'T NEED CHANGES, ALTHOUGH IT WOULD BE NICE TO MOVE IT INTO THE MAIN HTML SECTION, AS IT GETS LOST OUT HERE }<br />
* [http://www.w3.org/wiki/Common_HTML_entities_used_for_typography Common HTML entities used for typography], by Ben Henick. { -- DOESN'T NEED MANY CHANGES }<br />
* [http://www.w3.org/wiki/The_web_standards_curriculum_glossary The Opera Web Standards Curriculum glossary], by various authors. This is incomplete, and will be added to as time goes by. { -- NEEDS A LOT OF TERMS ADDING, IF IT IS TO BE USEFUL }<br />
<br />
== Deprecated articles: removeed from original WSC ==<br />
<br />
* [[Choosing the right doctype for your HTML documents]]. [http://dev.opera.com/articles/view/14-megfelelo-doctype-valasztasa/ Hungarian translation] | [http://dev.opera.com/articles/view/14-choosing-the-right-doctype-for-your-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m3/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m3/ud3/index.html Spanish translation]<br />
* [[Generic containers - the div and span elements]]. [http://dev.opera.com/articles/view/22-altalanos-tarolok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud8/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud8/index.html Spanish translation]<br />
<br />
<br />
[[Category:WSC]]</div>Cmillshttps://www.w3.org/wiki/index.php?title=WSC_proposed_updates&diff=54324WSC proposed updates2011-10-06T12:34:25Z<p>Cmills: /* CSS */</p>
<hr />
<div> <br />
= Web standards curriculum on W3C Wiki: plan for updates 2011 =<br />
<br />
== The beginning ==<br />
<br />
[[Introduction to the Web Standards Curriculum]] by Chris Mills. '''{ -- JUST NEEDS A GENERAL READ, AND A LITTLE BIT OF TWEAKING}'''<br />
<br />
== Introduction to the world of web standards ==<br />
<br />
# [[The history of the Web|The history of the Internet and the web, and the evolution of web standards]], by Mark Norman Francis. { -- NEEDS A GENERAL READ, PLUS I THINK IT COULD BENEFIT FROM A BIT MORE HISTORY BEING ADDED ABOUT THE EVOLUTION OF HTML5 AND CSS3}<br />
# [[How does the Internet work]]? by Jonathan Lane. {-- NO TWEAKING NEEDED; JUST SPIT AND POLISH}<br />
# [[The web standards model - HTML CSS and JavaScript]] by Jonathan Lane. { -- A FEW TWEAKS NEEDED - THE HTML SECTION COULD DO WITH AN OVERHAUL TO CCOUNT FOR HTML5, AND DEAL WITH XHTML A BIT BETTER}<br />
# [[Beautiful dream, but what's the reality]]? by Jonathan Lane. { -- I THINK THIS ARTICLE COULD JUST BE REMOVED, AND A SMALL SECTION ADDED TO THE PREVIOUS ARTICLE TO COVER "THE REALITY OF IT ALL". AS IT STANDS, THIS ARTICLE IS A BIT OF A RANT, AND NOT REALLY THAT USEFUL TO EDUCATION}<br />
<br />
== Web Design Concepts ==<br />
<br />
This section won't go into any code or markup details, and will act as an introduction to the design process before you start to create any graphics or code, as well as concepts of web design such as IA, navigation, usability etc.<br />
<br />
# [http://www.w3.org/wiki/Information_Architecture_-_planning_out_a_web_site Information Architecture - planning out a web site], by Jonathan Lane.<br />
# [http://www.w3.org/wiki/What_does_a_good_web_page_need What does a good web page need?], by Mark Norman Francis.<br />
# [http://www.w3.org/wiki/Colour_theory Colour Theory], by Linda Goin.<br />
# [http://www.w3.org/wiki/Building_up_a_site_wireframe Building up a site wireframe], by Linda Goin.<br />
# [http://www.w3.org/wiki/Colour_schemes_and_design_mockups Colour schemes and design mockups], by Linda Goin. <br />
# [http://www.w3.org/wiki/Typography_on_the_Web Typography on the web], by Paul Haine.<br />
<br />
{ -- I THINK THIS WHOLE SECTION NEEDS AN OVERHAUL, AS CURRENTLY IT IS NOT VERY EFFECTIVE. THE TYPOGRAPHY AND IA SECTIONS ARE FINE, BUT I'M NOT SURE ABOUT THE OTHER STUFF. I THINK THE SECTION SHOULD BE RETITLED "PLANNING A WEB SITE", AND HAVE A STRUCTURE SOMETHING LIKE THE FOLLOWING: <br />
<br />
=== Planned New section to replace "Web Design Concepts" - to be called "Planning a web site" ===<br />
<br />
# [[Introduction to planning a web site]]<br />
# Scoping and user research<br />
# [[Information_Architecture_-_planning_out_a_web_site|Information Architecture - planning out a web site]]. [http://dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud1/index.html Spanish translation]<br />
# [[What_does_a_good_web_page_need|What does a good web page need?]] [http://dev.opera.com/articles/view/7-mi-kell-egy-jo-weblaphoz/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud2/index.html Spanish translation]<br />
# [[Typography on the Web]]. [http://dev.opera.com/articles/view/11-tipografia-a-weben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud6/index.html Spanish translation]<br />
# Colour schemes and deasign theory<br />
# Mockups and protptypes<br />
# User experience design - INCLUDE MOBILE/ALTERNATIVE DEVICE USER EXPERIENCE. HOW DOES IT DIFFER?<br />
<br />
== HTML basics ==<br />
<br />
# [http://www.w3.org/wiki/The_basics_of_HTML The basics of HTML], by Mark Norman Francis. { -- THIS LOOKS OK, ALTHOUGH I THINK IT NEEDS A BIT OF UPDATING TO ACCOUNT FOR HTML5, THE HISTORY SECTION, ETC. THE EXAMPLES SHOULD ALSO BE UPDATED TO HTML5 SEMANTICS, WHERE APPROPRIATE, EG NO MORE DIVS FOR PAGE SECTIONS}<br />
# [http://www.w3.org/wiki/The_HTML_head_element The HTML &lt;head&gt; element], by Christian Heilmann. { -- NEEDS UPDATING, AND HTML5 FEATURES ADDING, SUCH AS META CHARSET} <br />
# [http://www.w3.org/wiki/Choosing_the_right_doctype_for_your_HTML_documents Choosing the right doctype for your HTML documents], by Roger Johansson. { -- I THINK THAT THIS NEEDS TO BE REWRITTEN TO FOCUS LESS ON DOCTYPES, AND MORE ON HTML/XHTML RULES, HOW THEY DIFFER, WHAT DOCTYPES REALLY ACHIEVED, WHAT ONES YOU MIGHT ENCOUNTER IN THE WILD, WHY WE WILL BE USING HTML5 DOCTYPE IN THIS COURSE, WHAT IT ACHIEVES, ETC.}<br />
<br />
== The HTML body ==<br />
<br />
{ -- OVERALL THIS IS A REASONABLE SECTION, BUT QUITE A LOT NEEDS ADDING TO BRING IT UP TO DATE WITH HTML5, ETC. I WILL CLEARLY MARK NEW ARTICLES}<br />
<br />
# NEW ARTICLE - structural elements, section, article, etc. also including div and span<br />
# [http://www.w3.org/wiki/Marking_up_textual_content_in_HTML Marking up textual content in HTML], by Mark Norman Francis. { -- NEEDS UPDATING, AS SOME OF THESE ELEMENTS WILL HAVE CHANGED FUNCTION IN HTML5, AND DEPRECATED ELEMENTS HAVE BEEN REPURPOSED}<br />
# [http://www.w3.org/wiki/HTML_lists HTML Lists], by Ben Buchanan. { -- DOESN'T NEED MANY UPDATES}<br />
# [http://www.w3.org/wiki/Images_in_HTML Images in HTML], by Christian Heilmann. { -- NEEDS A BIT OF SPIT AND POLISH, AND NEEDS FIGURE AND FIGCAPTION ADDING}<br />
# [http://www.w3.org/wiki/HTML_links_-_lets_build_a_web HTML links — let's build a web!] by Christian Heilmann. { -- NEEDS SPIT AND POLISH, AND NEEDS THE CONCEPT OF BLOCK LEVEL LINKS ADDING}<br />
# NEW ARTICLE - HTML5 video and audio<br />
# [http://www.w3.org/wiki/HTML_tables HTML Tables], by Jen Hanen. { -- NOT MANY UPDATES NEEDED}<br />
# [http://www.w3.org/wiki/HTML_forms_-_the_basics HTML Forms — the basics], by Jen Hanen. { -- THERE IS A LOT OF NEW HTML5 FORM STUFF TO ADD, OBVIOUSLY - I THINK THAT IN THIS CIRCUMSTANCE, BECAUSE SUPPORT FOR HTML5 FORM STUFF IS PATCHY ACROSS BROWSERS RIGHT NOW, WE SHOULD DO SMALL UPDATES ON THE EXISTING ARTICLE, THEN ADD ONE OR MORE SEPARATE ARTICLES TO COVER THE NEW HTML5 FORM ELEMENTS AND NEW ATTRIBUTES, AND THEN PERHAPS SEPARATE COVERAGE OF VALIDATION}<br />
# [http://www.w3.org/wiki/Lesser_-_known_semantic_elements Lesser-known semantic elements], by Mark Norman Francis. {THIS WILL NEED UPDATING, AS A NUMBER OF THESE ELEMENTS HAVE BEEN REDEFINED}<br />
# [http://www.w3.org/wiki/Generic_containers_-_the_div_and_span_elements Generic containers — the div and span elements], by Mark Norman Francis. { -- REMOVE THIS ONE - THIS WILL BE COVERED IN THE STRUCTURAL ELEMENTS ARTICLE}<br />
# [http://www.w3.org/wiki/Creating_multiple_pages_with_navigation_menus Creating multiple pages with navigation menus], by Christian Heilmann.<br />
# [http://www.w3.org/wiki/Validating_your_HTML Validating your HTML], by Mark Norman Francis. { -- I THINK THIS COULD BE REWRITTEN AND IMPROVED, AND RELOCATED TO A SECTION ABOUT DEBUGGING WEB PAGES? A MORE COMPLETE TREATMENT WOULD BE NICE}<br />
<br />
== Accessibility specifics ==<br />
<br />
# [http://www.w3.org/wiki/Accessibility_basics Accessibility basics], by Tom Hughes-Croucher.<br />
# [http://www.w3.org/wiki/Accessibility_testing Accessibility testing], by Benjamin Hawkes-Lewis.<br />
<br />
I THINK THIS NEEDS TO BE EXPANDED OUT TO SEVERAL ARTICLES, TO COVER DIFFERENT ASPECTS, SOMETHING LIKE:<br />
<br />
# WRITING A PLAN FOR A11Y TESTING, INCLUDING USE OF REAL USER TESTING, CONFORMANCE CRITERIA, AUTOMATED TOOLS, AND GOOD OLD COMMON SENSE<br />
# THE LEGAL SIDE OF THINGS, EXPLAINED IN DETAIL<br />
# DECIPHERING WCAG, AND OTHER CONFORMANCE CRITERIA SUCH AS SECTION 508<br />
# ACCESSIBILITY TOOLS, WHAT TO USE AND WHAT TO AVOID. HOW FAR WILL THESE GET YOU?<br />
# REAL A11Y TESTING WITH REAL PEOPLE, HOW TO PUT TOGETHER FOCUS GROUPS, WHAT TO LOOK FOR HERE<br />
# COMMON SENSE - SOLUTIONS FOR COMMON ACCESSIBILITY ISSUES - A ROADMAP FOR FIXING ISSUES. START WITH SEMANTIC HTML, THEN GO TO VIDEO AND AUDIO CONTENT, JAVASCRIPT, AJAX, ALTERNATIVES. }<br />
<br />
== CSS ==<br />
<br />
# [http://dev.opera.com/articles/view/27-css-basics/ CSS basics], by Christian Heilmann. { -- NEEDS A BIT OF SPRUCING UP, TO TALK ABOUT NEW STUFF, PLUS WE NEED TO ADD SOME STUFF ABOUT ALL THE NEW CSS SELECTORS. OF DO WE? MAYBE WE COULD JUST COVER THE BASIC SELECTORS HERE, AND THEN COVER SOME OF THE MORE ADVANCED ONES IN APPROPRIATE PLACES, EG FORM RELATED ONES, AND OTHER ADVANCED ONES IN AN ARTICLE OF THEIR OWN - SEE NEXT ARTICLE}<br />
# NEW ARTICLE - ADVANCED SELECTORS - cover all the advanced selectors that we didn't cover in the previous chapter - last nth of type, valid, invalid, nth child, etc. <br />
# NEW CHAPTER - CSS3 SHADOWS<br />
# [http://www.w3.org/wiki/Inheritance_and_cascade Inheritance and Cascade], by Tommy Olsson. { -- NOT MUCH TO UPDATE HERE}<br />
# [http://www.w3.org/wiki/Text_styling_with_CSS Text styling with CSS], by Ben Henick. { -- THIS IS A VERY WEIGHTY CHAPTER, AND COULD DO WITH SLIMMING DOWN A BIT, AND MAKING MORE GRANULAR, PERHAPS EVEN SPLITTING IT. ALSO ADD WEB FONTS, AND TALK ABOUT SOME OF THE MORE OBSCURE TEXT STYLING STUFF, LIKE TEXT-OVERFLOW, GENERATED CONTENT FOR QUOTES, WORD WRAP, ETC.}<br />
# [http://www.w3.org/wiki/The_CSS_layout_model_-_boxes_borders_margins_padding The CSS layout model - boxes, borders, margins, padding], by Ben Henick. { -- AGAIN, MIGHT NEED SPLITTING, NEED TO COVER DIFFERENT LAYOUT MODELS, BORDER-RADIUS ETC.}<br />
# [http://www.w3.org/wiki/CSS_background_images CSS background images], by Nicole Sullivan. { -- NEED TO UPDATE TO COVER MULTIPLE BACKGROUND IMAGES, BORDER-IMAGE, LINEAR GRADIENTS, RADIAL GRADIENTS MIGHT NEED MULTIPLE CHAPTERS}<br />
# [http://www.w3.org/wiki/Styling_lists_and_links Styling lists and links], by Ben Buchanan. { -- DOESN'T NEED THAT MUCH }<br />
# [http://www.w3.org/wiki/Styling_tables Styling tables], by Ben Buchanan. { -- DOESN'T NEED THAT MUCH }<br />
# [http://www.w3.org/wiki/Styling_forms Styling forms], by Ben Henick. { -- NEED TO ADD CSS3 FORM-RELATED PSEUDO CLASSES, AND DISCUSSION OF STYLING ERRORS AND STUFF}<br />
# [http://www.w3.org/wiki/Floats_and_clearing Floats and clearing], by Tommy Olsson. { - NOT THAT MUCH NEEDED, ALTHOUGH I NEED TO BE CAREFUL TO SEPARATE OUT MULTIPLE COLUMN LAYOUTS, AND COVER MULTI-COL THERE}<br />
# [http://www.w3.org/wiki/CSS_static_and_relative_positioning CSS static and relative positioning], by Tommy Olsson.<br />
# [http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning CSS absolute and fixed positioning], by Tommy Olsson. { -- THE POSITIONING CHAPTERS NEED SOME WORK, BUT NOT THAT MUCH}<br />
# NEW CHAPTER - CSS3 TRANSFORMS<br />
# NEW CHAPTER - CSS3 TRANSITIONS<br />
# NEW CHAPTER - CSS3 ANIMATIONS<br />
# NEW CHAPTER - MEDIA QUERIES<br />
# NEW CHAPTER - VIEWPORT<br />
# NEW CHAPTER - CREATING AN ADAPTIVE DESIGN, USING MEDIA QUERIES, VIEWPORT, MULTI-COL, ETC.<br />
# NEW CHAPTER - OBJECT FIT/OBJECT POSITION<br />
# NEW CHAPTER - OPTIMIZING CSS (INCLUDE IDEAS FOR OPTIMIZING FOR MOBILE ETC.)<br />
<br />
== Advanced CSS study ==<br />
<br />
# [http://www.w3.org/wiki/Headers_footers_columns_and_templates Headers, footers, columns, and templates], by Ben Henick { -- NOT SURE HOW USEFUL THIS IS, MAYBE DISSECT IT, PUT THE USEFUL STUFF IN OTHER CHAPTERS. A BIT TOO LONG WINDED. }<br />
<br />
== JavaScript ==<br />
<br />
# [http://www.w3.org/wiki/Programming_-_the_real_basics Programming - the real basics!], by Christian Heilmann<br />
# [http://www.w3.org/wiki/What_can_you_do_with_JavaScript What can you do with JavaScript?], by Christian Heilmann<br />
# [http://www.w3.org/wiki/Your_first_look_at_JavaScript Your first look at JavaScript], by Christian Heilmann<br />
# [http://www.w3.org/wiki/JavaScript_best_practices JavaScript best practices], by Christian Heilmann<br />
# [http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript The principles of unobtrusive JavaScript], by PPK<br />
# [http://www.w3.org/wiki/JavaScript_functions JavaScript functions], by Mike West<br />
# [http://www.w3.org/wiki/Objects_in_JavaScript Objects in JavaScript], by Mike West<br />
# [http://www.w3.org/wiki/Traversing_the_DOM Traversing the DOM], by Mike West<br />
# [http://www.w3.org/wiki/Creating_and_modifying_HTML Creating and modifying HTML], by Stuart Langridge<br />
# [http://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript Dynamic style - manipulating CSS with JavaScript], by Greg Schechter<br />
# [http://www.w3.org/wiki/Handling_events_with_JavaScript Handling events with JavaScript], by Robert Nyman<br />
# [http://www.w3.org/wiki/JavaScript_animation JavaScript animation], by Stuart Langridge<br />
# [http://www.w3.org/wiki/Graceful_degredation_versus_progressive_enhancement Graceful degredation versus progressive enhancement], by Christian Heilmann<br />
# NEW CHAPTER - OPTIMIZING JAVASCRIPT (INCLUDE IDEAS FOR OPTIMIZING FOR MOBILE ETC.)<br />
<br />
== HTML5 APIS ==<br />
<br />
PROBABLY NEED TO INTERSPERSE THESE IN THE ABOVE SECTION, OR PUT NEW SECTIONS IN, EG "OFFLINE WEB APPLICATIONS" WOULD WORK WELL AS A DISTINCT SECTION.<br />
<br />
# MEDIA API<br />
# GEOLOCATION (YEAH, NOT HTML5, BUT HEY)<br />
# WEB WORKERS<br />
# WEB SOCKETS<br />
# APPCACHE<br />
# WEBSQL/INDEXEDDB<br />
# WEB STORAGE<br />
# CANVAS (SHOULD PROBABLY HAVE ITS OWN SECTION ENTIRELY)<br />
# HTML5 HISTORY API<br />
# DATASETS<br />
<br />
== OTHER THINGS TO COVER ==<br />
<br />
# SVG (REALLY NEEDS ITS OWN COURSE, See the following proposal)<br />
# WAI-ARIA<br />
<br />
=== SVG ===<br />
<br />
Source of inspiration :<br />
<br />
* http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html<br />
* https://developer.mozilla.org/en/SVG/Tutorial<br />
<br />
==== SVG BASICS ====<br />
<br />
# ''History and usage'' : As for HTML, it could be good to start by giving some context: What is it, Where does it come, What is it made for, How is it different than HTML?<br />
# ''Syntax and deployment'' : This part would introduce the basic syntax, the concept of viewport and absolute positioning and finally how to embed an SVG document inside other language (basically HTML and CSS)<br />
# ''Basic shapes'' : This part will be dedicated to the basic shapes available in SVG<br />
# ''Position and transformation'' : To go deeper inside the viewport thing and to explain the role of the transformations.<br />
# ''Using text in SVG''<br />
# ''Styling SVG'' : This is where we would detailed how to use presentation attributes and their CSS counterpart.<br />
# ''Scripting SVG'' : Where we could introduce the SVG DOM API.<br />
<br />
==== Part 2 : SVG ADVANCED ====<br />
<br />
# ''How to build Pathes'' : To dig into the syntax of the d attribute on path elements<br />
# ''Animating the web with SVG Animations'' : How to use SVG Animations<br />
# ''SVG Filters'' : This would be an introduction to filters but each filters could have it's own article (Filters a really hard things)<br />
# ''Clipping and Masking''<br />
# ''Patterns''<br />
# ''Gradients''<br />
# ''Dealing with the external'' : This part would be dedicated to the foreignObject element but also to links and images elements.<br />
<br />
=== SVG article drafts we could use ===<br />
<br />
# [[SVG Primer]] (written by David Storey, but unused)<br />
# [[SVG Links]] (written by David Storey, but unused)<br />
<br />
== Mobile web development - proposed new structure ==<br />
<br />
=== The basics ===<br />
<br />
# [[Mobile beginnings: An introduction to the mobile web]] (include history of mobiles, how mobile networks work, what the hardware looks like, what the software looks like)<br />
# [[What do the devices look like?]] (a fairly detailed reference showing the types of devices you are likely to need to support when building cross device adaptive apps)<br />
# [[Mobile constraints and advantages]] (what are the constraints you need to work around for alternative browsing devices? What are the advantages, eg the context specific technologies you can take advantage of?)<br />
<br />
=== Adaptive design and development ===<br />
<br />
# [[Mobile friendly: an introduction to mobile web design]] (start with a basis of semantic HTML, accessibility best practices are Making an app or site mobile friendly - do you create a different site, or do you adapt your existing site for mobile? A brief introduction to Adaptive design - graceful degradation, progressive enhancement, using media queries and viewport to adapt layout, using feature detection to server appropriate content and services, NOT browser sniffing!)<br />
# [[Designing a mobile user experience]] (all about context, what does the user want to do in this context, how does it differ from the desktop, etc.?)<br />
# [[Optimising CSS and JavaScript for mobile]]<br />
# [[Media Queries]]<br />
# [[Viewport]]<br />
# [[Adaptive layouts for mobile]] (apply the basics you learned in the last two)<br />
# [[Device aware apps]] (Geolocation, etc.)<br />
# [[Multimedia on mobile]] (dealing with images, video, audio)<br />
# [[Offline apps for mobile]] (web storage, AppCache, WebSQL)<br />
# [[Putting together a mobile testing suite]]<br />
<br />
== Supplementary articles ==<br />
<br />
* [http://www.w3.org/wiki/Getting_your_content_online Getting your content online], by Craig Grannell. { -- DOESN'T NEED CHANGES }<br />
* [http://www.w3.org/wiki/More_about_the_document_head More about the document &lt;head&gt;], by Chris Heilmann. { -- PROBABLY DOESN'T NEED CHANGES, ALTHOUGH IT WOULD BE NICE TO MOVE IT INTO THE MAIN HTML SECTION, AS IT GETS LOST OUT HERE }<br />
* [http://www.w3.org/wiki/Common_HTML_entities_used_for_typography Common HTML entities used for typography], by Ben Henick. { -- DOESN'T NEED MANY CHANGES }<br />
* [http://www.w3.org/wiki/The_web_standards_curriculum_glossary The Opera Web Standards Curriculum glossary], by various authors. This is incomplete, and will be added to as time goes by. { -- NEEDS A LOT OF TERMS ADDING, IF IT IS TO BE USEFUL }<br />
<br />
== Deprecated articles: removeed from original WSC ==<br />
<br />
* [[Choosing the right doctype for your HTML documents]]. [http://dev.opera.com/articles/view/14-megfelelo-doctype-valasztasa/ Hungarian translation] | [http://dev.opera.com/articles/view/14-choosing-the-right-doctype-for-your-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m3/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m3/ud3/index.html Spanish translation]<br />
* [[Generic containers - the div and span elements]]. [http://dev.opera.com/articles/view/22-altalanos-tarolok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud8/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud8/index.html Spanish translation]<br />
<br />
<br />
[[Category:WSC]]</div>Cmillshttps://www.w3.org/wiki/index.php?title=WSC_proposed_updates&diff=54323WSC proposed updates2011-10-06T12:30:26Z<p>Cmills: /* JavaScript */</p>
<hr />
<div> <br />
= Web standards curriculum on W3C Wiki: plan for updates 2011 =<br />
<br />
== The beginning ==<br />
<br />
[[Introduction to the Web Standards Curriculum]] by Chris Mills. '''{ -- JUST NEEDS A GENERAL READ, AND A LITTLE BIT OF TWEAKING}'''<br />
<br />
== Introduction to the world of web standards ==<br />
<br />
# [[The history of the Web|The history of the Internet and the web, and the evolution of web standards]], by Mark Norman Francis. { -- NEEDS A GENERAL READ, PLUS I THINK IT COULD BENEFIT FROM A BIT MORE HISTORY BEING ADDED ABOUT THE EVOLUTION OF HTML5 AND CSS3}<br />
# [[How does the Internet work]]? by Jonathan Lane. {-- NO TWEAKING NEEDED; JUST SPIT AND POLISH}<br />
# [[The web standards model - HTML CSS and JavaScript]] by Jonathan Lane. { -- A FEW TWEAKS NEEDED - THE HTML SECTION COULD DO WITH AN OVERHAUL TO CCOUNT FOR HTML5, AND DEAL WITH XHTML A BIT BETTER}<br />
# [[Beautiful dream, but what's the reality]]? by Jonathan Lane. { -- I THINK THIS ARTICLE COULD JUST BE REMOVED, AND A SMALL SECTION ADDED TO THE PREVIOUS ARTICLE TO COVER "THE REALITY OF IT ALL". AS IT STANDS, THIS ARTICLE IS A BIT OF A RANT, AND NOT REALLY THAT USEFUL TO EDUCATION}<br />
<br />
== Web Design Concepts ==<br />
<br />
This section won't go into any code or markup details, and will act as an introduction to the design process before you start to create any graphics or code, as well as concepts of web design such as IA, navigation, usability etc.<br />
<br />
# [http://www.w3.org/wiki/Information_Architecture_-_planning_out_a_web_site Information Architecture - planning out a web site], by Jonathan Lane.<br />
# [http://www.w3.org/wiki/What_does_a_good_web_page_need What does a good web page need?], by Mark Norman Francis.<br />
# [http://www.w3.org/wiki/Colour_theory Colour Theory], by Linda Goin.<br />
# [http://www.w3.org/wiki/Building_up_a_site_wireframe Building up a site wireframe], by Linda Goin.<br />
# [http://www.w3.org/wiki/Colour_schemes_and_design_mockups Colour schemes and design mockups], by Linda Goin. <br />
# [http://www.w3.org/wiki/Typography_on_the_Web Typography on the web], by Paul Haine.<br />
<br />
{ -- I THINK THIS WHOLE SECTION NEEDS AN OVERHAUL, AS CURRENTLY IT IS NOT VERY EFFECTIVE. THE TYPOGRAPHY AND IA SECTIONS ARE FINE, BUT I'M NOT SURE ABOUT THE OTHER STUFF. I THINK THE SECTION SHOULD BE RETITLED "PLANNING A WEB SITE", AND HAVE A STRUCTURE SOMETHING LIKE THE FOLLOWING: <br />
<br />
=== Planned New section to replace "Web Design Concepts" - to be called "Planning a web site" ===<br />
<br />
# [[Introduction to planning a web site]]<br />
# Scoping and user research<br />
# [[Information_Architecture_-_planning_out_a_web_site|Information Architecture - planning out a web site]]. [http://dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud1/index.html Spanish translation]<br />
# [[What_does_a_good_web_page_need|What does a good web page need?]] [http://dev.opera.com/articles/view/7-mi-kell-egy-jo-weblaphoz/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud2/index.html Spanish translation]<br />
# [[Typography on the Web]]. [http://dev.opera.com/articles/view/11-tipografia-a-weben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud6/index.html Spanish translation]<br />
# Colour schemes and deasign theory<br />
# Mockups and protptypes<br />
# User experience design - INCLUDE MOBILE/ALTERNATIVE DEVICE USER EXPERIENCE. HOW DOES IT DIFFER?<br />
<br />
== HTML basics ==<br />
<br />
# [http://www.w3.org/wiki/The_basics_of_HTML The basics of HTML], by Mark Norman Francis. { -- THIS LOOKS OK, ALTHOUGH I THINK IT NEEDS A BIT OF UPDATING TO ACCOUNT FOR HTML5, THE HISTORY SECTION, ETC. THE EXAMPLES SHOULD ALSO BE UPDATED TO HTML5 SEMANTICS, WHERE APPROPRIATE, EG NO MORE DIVS FOR PAGE SECTIONS}<br />
# [http://www.w3.org/wiki/The_HTML_head_element The HTML &lt;head&gt; element], by Christian Heilmann. { -- NEEDS UPDATING, AND HTML5 FEATURES ADDING, SUCH AS META CHARSET} <br />
# [http://www.w3.org/wiki/Choosing_the_right_doctype_for_your_HTML_documents Choosing the right doctype for your HTML documents], by Roger Johansson. { -- I THINK THAT THIS NEEDS TO BE REWRITTEN TO FOCUS LESS ON DOCTYPES, AND MORE ON HTML/XHTML RULES, HOW THEY DIFFER, WHAT DOCTYPES REALLY ACHIEVED, WHAT ONES YOU MIGHT ENCOUNTER IN THE WILD, WHY WE WILL BE USING HTML5 DOCTYPE IN THIS COURSE, WHAT IT ACHIEVES, ETC.}<br />
<br />
== The HTML body ==<br />
<br />
{ -- OVERALL THIS IS A REASONABLE SECTION, BUT QUITE A LOT NEEDS ADDING TO BRING IT UP TO DATE WITH HTML5, ETC. I WILL CLEARLY MARK NEW ARTICLES}<br />
<br />
# NEW ARTICLE - structural elements, section, article, etc. also including div and span<br />
# [http://www.w3.org/wiki/Marking_up_textual_content_in_HTML Marking up textual content in HTML], by Mark Norman Francis. { -- NEEDS UPDATING, AS SOME OF THESE ELEMENTS WILL HAVE CHANGED FUNCTION IN HTML5, AND DEPRECATED ELEMENTS HAVE BEEN REPURPOSED}<br />
# [http://www.w3.org/wiki/HTML_lists HTML Lists], by Ben Buchanan. { -- DOESN'T NEED MANY UPDATES}<br />
# [http://www.w3.org/wiki/Images_in_HTML Images in HTML], by Christian Heilmann. { -- NEEDS A BIT OF SPIT AND POLISH, AND NEEDS FIGURE AND FIGCAPTION ADDING}<br />
# [http://www.w3.org/wiki/HTML_links_-_lets_build_a_web HTML links — let's build a web!] by Christian Heilmann. { -- NEEDS SPIT AND POLISH, AND NEEDS THE CONCEPT OF BLOCK LEVEL LINKS ADDING}<br />
# NEW ARTICLE - HTML5 video and audio<br />
# [http://www.w3.org/wiki/HTML_tables HTML Tables], by Jen Hanen. { -- NOT MANY UPDATES NEEDED}<br />
# [http://www.w3.org/wiki/HTML_forms_-_the_basics HTML Forms — the basics], by Jen Hanen. { -- THERE IS A LOT OF NEW HTML5 FORM STUFF TO ADD, OBVIOUSLY - I THINK THAT IN THIS CIRCUMSTANCE, BECAUSE SUPPORT FOR HTML5 FORM STUFF IS PATCHY ACROSS BROWSERS RIGHT NOW, WE SHOULD DO SMALL UPDATES ON THE EXISTING ARTICLE, THEN ADD ONE OR MORE SEPARATE ARTICLES TO COVER THE NEW HTML5 FORM ELEMENTS AND NEW ATTRIBUTES, AND THEN PERHAPS SEPARATE COVERAGE OF VALIDATION}<br />
# [http://www.w3.org/wiki/Lesser_-_known_semantic_elements Lesser-known semantic elements], by Mark Norman Francis. {THIS WILL NEED UPDATING, AS A NUMBER OF THESE ELEMENTS HAVE BEEN REDEFINED}<br />
# [http://www.w3.org/wiki/Generic_containers_-_the_div_and_span_elements Generic containers — the div and span elements], by Mark Norman Francis. { -- REMOVE THIS ONE - THIS WILL BE COVERED IN THE STRUCTURAL ELEMENTS ARTICLE}<br />
# [http://www.w3.org/wiki/Creating_multiple_pages_with_navigation_menus Creating multiple pages with navigation menus], by Christian Heilmann.<br />
# [http://www.w3.org/wiki/Validating_your_HTML Validating your HTML], by Mark Norman Francis. { -- I THINK THIS COULD BE REWRITTEN AND IMPROVED, AND RELOCATED TO A SECTION ABOUT DEBUGGING WEB PAGES? A MORE COMPLETE TREATMENT WOULD BE NICE}<br />
<br />
== Accessibility specifics ==<br />
<br />
# [http://www.w3.org/wiki/Accessibility_basics Accessibility basics], by Tom Hughes-Croucher.<br />
# [http://www.w3.org/wiki/Accessibility_testing Accessibility testing], by Benjamin Hawkes-Lewis.<br />
<br />
I THINK THIS NEEDS TO BE EXPANDED OUT TO SEVERAL ARTICLES, TO COVER DIFFERENT ASPECTS, SOMETHING LIKE:<br />
<br />
# WRITING A PLAN FOR A11Y TESTING, INCLUDING USE OF REAL USER TESTING, CONFORMANCE CRITERIA, AUTOMATED TOOLS, AND GOOD OLD COMMON SENSE<br />
# THE LEGAL SIDE OF THINGS, EXPLAINED IN DETAIL<br />
# DECIPHERING WCAG, AND OTHER CONFORMANCE CRITERIA SUCH AS SECTION 508<br />
# ACCESSIBILITY TOOLS, WHAT TO USE AND WHAT TO AVOID. HOW FAR WILL THESE GET YOU?<br />
# REAL A11Y TESTING WITH REAL PEOPLE, HOW TO PUT TOGETHER FOCUS GROUPS, WHAT TO LOOK FOR HERE<br />
# COMMON SENSE - SOLUTIONS FOR COMMON ACCESSIBILITY ISSUES - A ROADMAP FOR FIXING ISSUES. START WITH SEMANTIC HTML, THEN GO TO VIDEO AND AUDIO CONTENT, JAVASCRIPT, AJAX, ALTERNATIVES. }<br />
<br />
== CSS ==<br />
<br />
# [http://dev.opera.com/articles/view/27-css-basics/ CSS basics], by Christian Heilmann. { -- NEEDS A BIT OF SPRUCING UP, TO TALK ABOUT NEW STUFF, PLUS WE NEED TO ADD SOME STUFF ABOUT ALL THE NEW CSS SELECTORS. OF DO WE? MAYBE WE COULD JUST COVER THE BASIC SELECTORS HERE, AND THEN COVER SOME OF THE MORE ADVANCED ONES IN APPROPRIATE PLACES, EG FORM RELATED ONES, AND OTHER ADVANCED ONES IN AN ARTICLE OF THEIR OWN - SEE NEXT ARTICLE}<br />
# NEW ARTICLE - ADVANCED SELECTORS - cover all the advanced selectors that we didn't cover in the previous chapter - last nth of type, valid, invalid, nth child, etc. <br />
# NEW CHAPTER - CSS3 SHADOWS<br />
# [http://www.w3.org/wiki/Inheritance_and_cascade Inheritance and Cascade], by Tommy Olsson. { -- NOT MUCH TO UPDATE HERE}<br />
# [http://www.w3.org/wiki/Text_styling_with_CSS Text styling with CSS], by Ben Henick. { -- THIS IS A VERY WEIGHTY CHAPTER, AND COULD DO WITH SLIMMING DOWN A BIT, AND MAKING MORE GRANULAR, PERHAPS EVEN SPLITTING IT. ALSO ADD WEB FONTS, AND TALK ABOUT SOME OF THE MORE OBSCURE TEXT STYLING STUFF, LIKE TEXT-OVERFLOW, GENERATED CONTENT FOR QUOTES, WORD WRAP, ETC.}<br />
# [http://www.w3.org/wiki/The_CSS_layout_model_-_boxes_borders_margins_padding The CSS layout model - boxes, borders, margins, padding], by Ben Henick. { -- AGAIN, MIGHT NEED SPLITTING, NEED TO COVER DIFFERENT LAYOUT MODELS, BORDER-RADIUS ETC.}<br />
# [http://www.w3.org/wiki/CSS_background_images CSS background images], by Nicole Sullivan. { -- NEED TO UPDATE TO COVER MULTIPLE BACKGROUND IMAGES, BORDER-IMAGE, LINEAR GRADIENTS, MIGHT NEED MULTIPLE CHAPTERS}<br />
# [http://www.w3.org/wiki/Styling_lists_and_links Styling lists and links], by Ben Buchanan. { -- DOESN'T NEED THAT MUCH }<br />
# [http://www.w3.org/wiki/Styling_tables Styling tables], by Ben Buchanan. { -- DOESN'T NEED THAT MUCH }<br />
# [http://www.w3.org/wiki/Styling_forms Styling forms], by Ben Henick. { -- NEED TO ADD CSS3 FORM-RELATED PSEUDO CLASSES, AND DISCUSSION OF STYLING ERRORS AND STUFF}<br />
# [http://www.w3.org/wiki/Floats_and_clearing Floats and clearing], by Tommy Olsson. { - NOT THAT MUCH NEEDED, ALTHOUGH I NEED TO BE CAREFUL TO SEPARATE OUT MULTIPLE COLUMN LAYOUTS, AND COVER MULTI-COL THERE}<br />
# [http://www.w3.org/wiki/CSS_static_and_relative_positioning CSS static and relative positioning], by Tommy Olsson.<br />
# [http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning CSS absolute and fixed positioning], by Tommy Olsson. { -- THE POSITIONING CHAPTERS NEED SOME WORK, BUT NOT THAT MUCH}<br />
# NEW CHAPTER - CSS3 TRANSFORMS<br />
# NEW CHAPTER - CSS3 TRANSITIONS<br />
# NEW CHAPTER - CSS3 ANIMATIONS<br />
# NEW CHAPTER - ADAPTIVE WEB DESIGN FOR MOBILE - MEDIA QUERIES, VIEWPORT.<br />
# NEW CHAPTER - OBJECT FIT/OBJECT POSITION<br />
# NEW CHAPTER - OPTIMIZING CSS (INCLUDE IDEAS FOR OPTIMIZING FOR MOBILE ETC.)<br />
<br />
== Advanced CSS study ==<br />
<br />
# [http://www.w3.org/wiki/Headers_footers_columns_and_templates Headers, footers, columns, and templates], by Ben Henick { -- NOT SURE HOW USEFUL THIS IS, MAYBE DISSECT IT, PUT THE USEFUL STUFF IN OTHER CHAPTERS. A BIT TOO LONG WINDED. }<br />
<br />
== JavaScript ==<br />
<br />
# [http://www.w3.org/wiki/Programming_-_the_real_basics Programming - the real basics!], by Christian Heilmann<br />
# [http://www.w3.org/wiki/What_can_you_do_with_JavaScript What can you do with JavaScript?], by Christian Heilmann<br />
# [http://www.w3.org/wiki/Your_first_look_at_JavaScript Your first look at JavaScript], by Christian Heilmann<br />
# [http://www.w3.org/wiki/JavaScript_best_practices JavaScript best practices], by Christian Heilmann<br />
# [http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript The principles of unobtrusive JavaScript], by PPK<br />
# [http://www.w3.org/wiki/JavaScript_functions JavaScript functions], by Mike West<br />
# [http://www.w3.org/wiki/Objects_in_JavaScript Objects in JavaScript], by Mike West<br />
# [http://www.w3.org/wiki/Traversing_the_DOM Traversing the DOM], by Mike West<br />
# [http://www.w3.org/wiki/Creating_and_modifying_HTML Creating and modifying HTML], by Stuart Langridge<br />
# [http://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript Dynamic style - manipulating CSS with JavaScript], by Greg Schechter<br />
# [http://www.w3.org/wiki/Handling_events_with_JavaScript Handling events with JavaScript], by Robert Nyman<br />
# [http://www.w3.org/wiki/JavaScript_animation JavaScript animation], by Stuart Langridge<br />
# [http://www.w3.org/wiki/Graceful_degredation_versus_progressive_enhancement Graceful degredation versus progressive enhancement], by Christian Heilmann<br />
# NEW CHAPTER - OPTIMIZING JAVASCRIPT (INCLUDE IDEAS FOR OPTIMIZING FOR MOBILE ETC.)<br />
<br />
== HTML5 APIS ==<br />
<br />
PROBABLY NEED TO INTERSPERSE THESE IN THE ABOVE SECTION, OR PUT NEW SECTIONS IN, EG "OFFLINE WEB APPLICATIONS" WOULD WORK WELL AS A DISTINCT SECTION.<br />
<br />
# MEDIA API<br />
# GEOLOCATION (YEAH, NOT HTML5, BUT HEY)<br />
# WEB WORKERS<br />
# WEB SOCKETS<br />
# APPCACHE<br />
# WEBSQL/INDEXEDDB<br />
# WEB STORAGE<br />
# CANVAS (SHOULD PROBABLY HAVE ITS OWN SECTION ENTIRELY)<br />
# HTML5 HISTORY API<br />
# DATASETS<br />
<br />
== OTHER THINGS TO COVER ==<br />
<br />
# SVG (REALLY NEEDS ITS OWN COURSE, See the following proposal)<br />
# WAI-ARIA<br />
<br />
=== SVG ===<br />
<br />
Source of inspiration :<br />
<br />
* http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html<br />
* https://developer.mozilla.org/en/SVG/Tutorial<br />
<br />
==== SVG BASICS ====<br />
<br />
# ''History and usage'' : As for HTML, it could be good to start by giving some context: What is it, Where does it come, What is it made for, How is it different than HTML?<br />
# ''Syntax and deployment'' : This part would introduce the basic syntax, the concept of viewport and absolute positioning and finally how to embed an SVG document inside other language (basically HTML and CSS)<br />
# ''Basic shapes'' : This part will be dedicated to the basic shapes available in SVG<br />
# ''Position and transformation'' : To go deeper inside the viewport thing and to explain the role of the transformations.<br />
# ''Using text in SVG''<br />
# ''Styling SVG'' : This is where we would detailed how to use presentation attributes and their CSS counterpart.<br />
# ''Scripting SVG'' : Where we could introduce the SVG DOM API.<br />
<br />
==== Part 2 : SVG ADVANCED ====<br />
<br />
# ''How to build Pathes'' : To dig into the syntax of the d attribute on path elements<br />
# ''Animating the web with SVG Animations'' : How to use SVG Animations<br />
# ''SVG Filters'' : This would be an introduction to filters but each filters could have it's own article (Filters a really hard things)<br />
# ''Clipping and Masking''<br />
# ''Patterns''<br />
# ''Gradients''<br />
# ''Dealing with the external'' : This part would be dedicated to the foreignObject element but also to links and images elements.<br />
<br />
=== SVG article drafts we could use ===<br />
<br />
# [[SVG Primer]] (written by David Storey, but unused)<br />
# [[SVG Links]] (written by David Storey, but unused)<br />
<br />
== Mobile web development - proposed new structure ==<br />
<br />
=== The basics ===<br />
<br />
# [[Mobile beginnings: An introduction to the mobile web]] (include history of mobiles, how mobile networks work, what the hardware looks like, what the software looks like)<br />
# [[What do the devices look like?]] (a fairly detailed reference showing the types of devices you are likely to need to support when building cross device adaptive apps)<br />
# [[Mobile constraints and advantages]] (what are the constraints you need to work around for alternative browsing devices? What are the advantages, eg the context specific technologies you can take advantage of?)<br />
<br />
=== Adaptive design and development ===<br />
<br />
# [[Mobile friendly: an introduction to mobile web design]] (start with a basis of semantic HTML, accessibility best practices are Making an app or site mobile friendly - do you create a different site, or do you adapt your existing site for mobile? A brief introduction to Adaptive design - graceful degradation, progressive enhancement, using media queries and viewport to adapt layout, using feature detection to server appropriate content and services, NOT browser sniffing!)<br />
# [[Designing a mobile user experience]] (all about context, what does the user want to do in this context, how does it differ from the desktop, etc.?)<br />
# [[Optimising CSS and JavaScript for mobile]]<br />
# [[Media Queries]]<br />
# [[Viewport]]<br />
# [[Adaptive layouts for mobile]] (apply the basics you learned in the last two)<br />
# [[Device aware apps]] (Geolocation, etc.)<br />
# [[Multimedia on mobile]] (dealing with images, video, audio)<br />
# [[Offline apps for mobile]] (web storage, AppCache, WebSQL)<br />
# [[Putting together a mobile testing suite]]<br />
<br />
== Supplementary articles ==<br />
<br />
* [http://www.w3.org/wiki/Getting_your_content_online Getting your content online], by Craig Grannell. { -- DOESN'T NEED CHANGES }<br />
* [http://www.w3.org/wiki/More_about_the_document_head More about the document &lt;head&gt;], by Chris Heilmann. { -- PROBABLY DOESN'T NEED CHANGES, ALTHOUGH IT WOULD BE NICE TO MOVE IT INTO THE MAIN HTML SECTION, AS IT GETS LOST OUT HERE }<br />
* [http://www.w3.org/wiki/Common_HTML_entities_used_for_typography Common HTML entities used for typography], by Ben Henick. { -- DOESN'T NEED MANY CHANGES }<br />
* [http://www.w3.org/wiki/The_web_standards_curriculum_glossary The Opera Web Standards Curriculum glossary], by various authors. This is incomplete, and will be added to as time goes by. { -- NEEDS A LOT OF TERMS ADDING, IF IT IS TO BE USEFUL }<br />
<br />
== Deprecated articles: removeed from original WSC ==<br />
<br />
* [[Choosing the right doctype for your HTML documents]]. [http://dev.opera.com/articles/view/14-megfelelo-doctype-valasztasa/ Hungarian translation] | [http://dev.opera.com/articles/view/14-choosing-the-right-doctype-for-your-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m3/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m3/ud3/index.html Spanish translation]<br />
* [[Generic containers - the div and span elements]]. [http://dev.opera.com/articles/view/22-altalanos-tarolok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud8/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud8/index.html Spanish translation]<br />
<br />
<br />
[[Category:WSC]]</div>Cmillshttps://www.w3.org/wiki/index.php?title=WSC_proposed_updates&diff=54322WSC proposed updates2011-10-06T12:30:00Z<p>Cmills: /* CSS */</p>
<hr />
<div> <br />
= Web standards curriculum on W3C Wiki: plan for updates 2011 =<br />
<br />
== The beginning ==<br />
<br />
[[Introduction to the Web Standards Curriculum]] by Chris Mills. '''{ -- JUST NEEDS A GENERAL READ, AND A LITTLE BIT OF TWEAKING}'''<br />
<br />
== Introduction to the world of web standards ==<br />
<br />
# [[The history of the Web|The history of the Internet and the web, and the evolution of web standards]], by Mark Norman Francis. { -- NEEDS A GENERAL READ, PLUS I THINK IT COULD BENEFIT FROM A BIT MORE HISTORY BEING ADDED ABOUT THE EVOLUTION OF HTML5 AND CSS3}<br />
# [[How does the Internet work]]? by Jonathan Lane. {-- NO TWEAKING NEEDED; JUST SPIT AND POLISH}<br />
# [[The web standards model - HTML CSS and JavaScript]] by Jonathan Lane. { -- A FEW TWEAKS NEEDED - THE HTML SECTION COULD DO WITH AN OVERHAUL TO CCOUNT FOR HTML5, AND DEAL WITH XHTML A BIT BETTER}<br />
# [[Beautiful dream, but what's the reality]]? by Jonathan Lane. { -- I THINK THIS ARTICLE COULD JUST BE REMOVED, AND A SMALL SECTION ADDED TO THE PREVIOUS ARTICLE TO COVER "THE REALITY OF IT ALL". AS IT STANDS, THIS ARTICLE IS A BIT OF A RANT, AND NOT REALLY THAT USEFUL TO EDUCATION}<br />
<br />
== Web Design Concepts ==<br />
<br />
This section won't go into any code or markup details, and will act as an introduction to the design process before you start to create any graphics or code, as well as concepts of web design such as IA, navigation, usability etc.<br />
<br />
# [http://www.w3.org/wiki/Information_Architecture_-_planning_out_a_web_site Information Architecture - planning out a web site], by Jonathan Lane.<br />
# [http://www.w3.org/wiki/What_does_a_good_web_page_need What does a good web page need?], by Mark Norman Francis.<br />
# [http://www.w3.org/wiki/Colour_theory Colour Theory], by Linda Goin.<br />
# [http://www.w3.org/wiki/Building_up_a_site_wireframe Building up a site wireframe], by Linda Goin.<br />
# [http://www.w3.org/wiki/Colour_schemes_and_design_mockups Colour schemes and design mockups], by Linda Goin. <br />
# [http://www.w3.org/wiki/Typography_on_the_Web Typography on the web], by Paul Haine.<br />
<br />
{ -- I THINK THIS WHOLE SECTION NEEDS AN OVERHAUL, AS CURRENTLY IT IS NOT VERY EFFECTIVE. THE TYPOGRAPHY AND IA SECTIONS ARE FINE, BUT I'M NOT SURE ABOUT THE OTHER STUFF. I THINK THE SECTION SHOULD BE RETITLED "PLANNING A WEB SITE", AND HAVE A STRUCTURE SOMETHING LIKE THE FOLLOWING: <br />
<br />
=== Planned New section to replace "Web Design Concepts" - to be called "Planning a web site" ===<br />
<br />
# [[Introduction to planning a web site]]<br />
# Scoping and user research<br />
# [[Information_Architecture_-_planning_out_a_web_site|Information Architecture - planning out a web site]]. [http://dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud1/index.html Spanish translation]<br />
# [[What_does_a_good_web_page_need|What does a good web page need?]] [http://dev.opera.com/articles/view/7-mi-kell-egy-jo-weblaphoz/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud2/index.html Spanish translation]<br />
# [[Typography on the Web]]. [http://dev.opera.com/articles/view/11-tipografia-a-weben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud6/index.html Spanish translation]<br />
# Colour schemes and deasign theory<br />
# Mockups and protptypes<br />
# User experience design - INCLUDE MOBILE/ALTERNATIVE DEVICE USER EXPERIENCE. HOW DOES IT DIFFER?<br />
<br />
== HTML basics ==<br />
<br />
# [http://www.w3.org/wiki/The_basics_of_HTML The basics of HTML], by Mark Norman Francis. { -- THIS LOOKS OK, ALTHOUGH I THINK IT NEEDS A BIT OF UPDATING TO ACCOUNT FOR HTML5, THE HISTORY SECTION, ETC. THE EXAMPLES SHOULD ALSO BE UPDATED TO HTML5 SEMANTICS, WHERE APPROPRIATE, EG NO MORE DIVS FOR PAGE SECTIONS}<br />
# [http://www.w3.org/wiki/The_HTML_head_element The HTML &lt;head&gt; element], by Christian Heilmann. { -- NEEDS UPDATING, AND HTML5 FEATURES ADDING, SUCH AS META CHARSET} <br />
# [http://www.w3.org/wiki/Choosing_the_right_doctype_for_your_HTML_documents Choosing the right doctype for your HTML documents], by Roger Johansson. { -- I THINK THAT THIS NEEDS TO BE REWRITTEN TO FOCUS LESS ON DOCTYPES, AND MORE ON HTML/XHTML RULES, HOW THEY DIFFER, WHAT DOCTYPES REALLY ACHIEVED, WHAT ONES YOU MIGHT ENCOUNTER IN THE WILD, WHY WE WILL BE USING HTML5 DOCTYPE IN THIS COURSE, WHAT IT ACHIEVES, ETC.}<br />
<br />
== The HTML body ==<br />
<br />
{ -- OVERALL THIS IS A REASONABLE SECTION, BUT QUITE A LOT NEEDS ADDING TO BRING IT UP TO DATE WITH HTML5, ETC. I WILL CLEARLY MARK NEW ARTICLES}<br />
<br />
# NEW ARTICLE - structural elements, section, article, etc. also including div and span<br />
# [http://www.w3.org/wiki/Marking_up_textual_content_in_HTML Marking up textual content in HTML], by Mark Norman Francis. { -- NEEDS UPDATING, AS SOME OF THESE ELEMENTS WILL HAVE CHANGED FUNCTION IN HTML5, AND DEPRECATED ELEMENTS HAVE BEEN REPURPOSED}<br />
# [http://www.w3.org/wiki/HTML_lists HTML Lists], by Ben Buchanan. { -- DOESN'T NEED MANY UPDATES}<br />
# [http://www.w3.org/wiki/Images_in_HTML Images in HTML], by Christian Heilmann. { -- NEEDS A BIT OF SPIT AND POLISH, AND NEEDS FIGURE AND FIGCAPTION ADDING}<br />
# [http://www.w3.org/wiki/HTML_links_-_lets_build_a_web HTML links — let's build a web!] by Christian Heilmann. { -- NEEDS SPIT AND POLISH, AND NEEDS THE CONCEPT OF BLOCK LEVEL LINKS ADDING}<br />
# NEW ARTICLE - HTML5 video and audio<br />
# [http://www.w3.org/wiki/HTML_tables HTML Tables], by Jen Hanen. { -- NOT MANY UPDATES NEEDED}<br />
# [http://www.w3.org/wiki/HTML_forms_-_the_basics HTML Forms — the basics], by Jen Hanen. { -- THERE IS A LOT OF NEW HTML5 FORM STUFF TO ADD, OBVIOUSLY - I THINK THAT IN THIS CIRCUMSTANCE, BECAUSE SUPPORT FOR HTML5 FORM STUFF IS PATCHY ACROSS BROWSERS RIGHT NOW, WE SHOULD DO SMALL UPDATES ON THE EXISTING ARTICLE, THEN ADD ONE OR MORE SEPARATE ARTICLES TO COVER THE NEW HTML5 FORM ELEMENTS AND NEW ATTRIBUTES, AND THEN PERHAPS SEPARATE COVERAGE OF VALIDATION}<br />
# [http://www.w3.org/wiki/Lesser_-_known_semantic_elements Lesser-known semantic elements], by Mark Norman Francis. {THIS WILL NEED UPDATING, AS A NUMBER OF THESE ELEMENTS HAVE BEEN REDEFINED}<br />
# [http://www.w3.org/wiki/Generic_containers_-_the_div_and_span_elements Generic containers — the div and span elements], by Mark Norman Francis. { -- REMOVE THIS ONE - THIS WILL BE COVERED IN THE STRUCTURAL ELEMENTS ARTICLE}<br />
# [http://www.w3.org/wiki/Creating_multiple_pages_with_navigation_menus Creating multiple pages with navigation menus], by Christian Heilmann.<br />
# [http://www.w3.org/wiki/Validating_your_HTML Validating your HTML], by Mark Norman Francis. { -- I THINK THIS COULD BE REWRITTEN AND IMPROVED, AND RELOCATED TO A SECTION ABOUT DEBUGGING WEB PAGES? A MORE COMPLETE TREATMENT WOULD BE NICE}<br />
<br />
== Accessibility specifics ==<br />
<br />
# [http://www.w3.org/wiki/Accessibility_basics Accessibility basics], by Tom Hughes-Croucher.<br />
# [http://www.w3.org/wiki/Accessibility_testing Accessibility testing], by Benjamin Hawkes-Lewis.<br />
<br />
I THINK THIS NEEDS TO BE EXPANDED OUT TO SEVERAL ARTICLES, TO COVER DIFFERENT ASPECTS, SOMETHING LIKE:<br />
<br />
# WRITING A PLAN FOR A11Y TESTING, INCLUDING USE OF REAL USER TESTING, CONFORMANCE CRITERIA, AUTOMATED TOOLS, AND GOOD OLD COMMON SENSE<br />
# THE LEGAL SIDE OF THINGS, EXPLAINED IN DETAIL<br />
# DECIPHERING WCAG, AND OTHER CONFORMANCE CRITERIA SUCH AS SECTION 508<br />
# ACCESSIBILITY TOOLS, WHAT TO USE AND WHAT TO AVOID. HOW FAR WILL THESE GET YOU?<br />
# REAL A11Y TESTING WITH REAL PEOPLE, HOW TO PUT TOGETHER FOCUS GROUPS, WHAT TO LOOK FOR HERE<br />
# COMMON SENSE - SOLUTIONS FOR COMMON ACCESSIBILITY ISSUES - A ROADMAP FOR FIXING ISSUES. START WITH SEMANTIC HTML, THEN GO TO VIDEO AND AUDIO CONTENT, JAVASCRIPT, AJAX, ALTERNATIVES. }<br />
<br />
== CSS ==<br />
<br />
# [http://dev.opera.com/articles/view/27-css-basics/ CSS basics], by Christian Heilmann. { -- NEEDS A BIT OF SPRUCING UP, TO TALK ABOUT NEW STUFF, PLUS WE NEED TO ADD SOME STUFF ABOUT ALL THE NEW CSS SELECTORS. OF DO WE? MAYBE WE COULD JUST COVER THE BASIC SELECTORS HERE, AND THEN COVER SOME OF THE MORE ADVANCED ONES IN APPROPRIATE PLACES, EG FORM RELATED ONES, AND OTHER ADVANCED ONES IN AN ARTICLE OF THEIR OWN - SEE NEXT ARTICLE}<br />
# NEW ARTICLE - ADVANCED SELECTORS - cover all the advanced selectors that we didn't cover in the previous chapter - last nth of type, valid, invalid, nth child, etc. <br />
# NEW CHAPTER - CSS3 SHADOWS<br />
# [http://www.w3.org/wiki/Inheritance_and_cascade Inheritance and Cascade], by Tommy Olsson. { -- NOT MUCH TO UPDATE HERE}<br />
# [http://www.w3.org/wiki/Text_styling_with_CSS Text styling with CSS], by Ben Henick. { -- THIS IS A VERY WEIGHTY CHAPTER, AND COULD DO WITH SLIMMING DOWN A BIT, AND MAKING MORE GRANULAR, PERHAPS EVEN SPLITTING IT. ALSO ADD WEB FONTS, AND TALK ABOUT SOME OF THE MORE OBSCURE TEXT STYLING STUFF, LIKE TEXT-OVERFLOW, GENERATED CONTENT FOR QUOTES, WORD WRAP, ETC.}<br />
# [http://www.w3.org/wiki/The_CSS_layout_model_-_boxes_borders_margins_padding The CSS layout model - boxes, borders, margins, padding], by Ben Henick. { -- AGAIN, MIGHT NEED SPLITTING, NEED TO COVER DIFFERENT LAYOUT MODELS, BORDER-RADIUS ETC.}<br />
# [http://www.w3.org/wiki/CSS_background_images CSS background images], by Nicole Sullivan. { -- NEED TO UPDATE TO COVER MULTIPLE BACKGROUND IMAGES, BORDER-IMAGE, LINEAR GRADIENTS, MIGHT NEED MULTIPLE CHAPTERS}<br />
# [http://www.w3.org/wiki/Styling_lists_and_links Styling lists and links], by Ben Buchanan. { -- DOESN'T NEED THAT MUCH }<br />
# [http://www.w3.org/wiki/Styling_tables Styling tables], by Ben Buchanan. { -- DOESN'T NEED THAT MUCH }<br />
# [http://www.w3.org/wiki/Styling_forms Styling forms], by Ben Henick. { -- NEED TO ADD CSS3 FORM-RELATED PSEUDO CLASSES, AND DISCUSSION OF STYLING ERRORS AND STUFF}<br />
# [http://www.w3.org/wiki/Floats_and_clearing Floats and clearing], by Tommy Olsson. { - NOT THAT MUCH NEEDED, ALTHOUGH I NEED TO BE CAREFUL TO SEPARATE OUT MULTIPLE COLUMN LAYOUTS, AND COVER MULTI-COL THERE}<br />
# [http://www.w3.org/wiki/CSS_static_and_relative_positioning CSS static and relative positioning], by Tommy Olsson.<br />
# [http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning CSS absolute and fixed positioning], by Tommy Olsson. { -- THE POSITIONING CHAPTERS NEED SOME WORK, BUT NOT THAT MUCH}<br />
# NEW CHAPTER - CSS3 TRANSFORMS<br />
# NEW CHAPTER - CSS3 TRANSITIONS<br />
# NEW CHAPTER - CSS3 ANIMATIONS<br />
# NEW CHAPTER - ADAPTIVE WEB DESIGN FOR MOBILE - MEDIA QUERIES, VIEWPORT.<br />
# NEW CHAPTER - OBJECT FIT/OBJECT POSITION<br />
# NEW CHAPTER - OPTIMIZING CSS (INCLUDE IDEAS FOR OPTIMIZING FOR MOBILE ETC.)<br />
<br />
== Advanced CSS study ==<br />
<br />
# [http://www.w3.org/wiki/Headers_footers_columns_and_templates Headers, footers, columns, and templates], by Ben Henick { -- NOT SURE HOW USEFUL THIS IS, MAYBE DISSECT IT, PUT THE USEFUL STUFF IN OTHER CHAPTERS. A BIT TOO LONG WINDED. }<br />
<br />
== JavaScript ==<br />
<br />
# [http://www.w3.org/wiki/Programming_-_the_real_basics Programming - the real basics!], by Christian Heilmann<br />
# [http://www.w3.org/wiki/What_can_you_do_with_JavaScript What can you do with JavaScript?], by Christian Heilmann<br />
# [http://www.w3.org/wiki/Your_first_look_at_JavaScript Your first look at JavaScript], by Christian Heilmann<br />
# [http://www.w3.org/wiki/JavaScript_best_practices JavaScript best practices], by Christian Heilmann<br />
# [http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript The principles of unobtrusive JavaScript], by PPK<br />
# [http://www.w3.org/wiki/JavaScript_functions JavaScript functions], by Mike West<br />
# [http://www.w3.org/wiki/Objects_in_JavaScript Objects in JavaScript], by Mike West<br />
# [http://www.w3.org/wiki/Traversing_the_DOM Traversing the DOM], by Mike West<br />
# [http://www.w3.org/wiki/Creating_and_modifying_HTML Creating and modifying HTML], by Stuart Langridge<br />
# [http://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript Dynamic style - manipulating CSS with JavaScript], by Greg Schechter<br />
# [http://www.w3.org/wiki/Handling_events_with_JavaScript Handling events with JavaScript], by Robert Nyman<br />
# [http://www.w3.org/wiki/JavaScript_animation JavaScript animation], by Stuart Langridge<br />
# [http://www.w3.org/wiki/Graceful_degredation_versus_progressive_enhancement Graceful degredation versus progressive enhancement], by Christian Heilmann<br />
<br />
== HTML5 APIS ==<br />
<br />
PROBABLY NEED TO INTERSPERSE THESE IN THE ABOVE SECTION, OR PUT NEW SECTIONS IN, EG "OFFLINE WEB APPLICATIONS" WOULD WORK WELL AS A DISTINCT SECTION.<br />
<br />
# MEDIA API<br />
# GEOLOCATION (YEAH, NOT HTML5, BUT HEY)<br />
# WEB WORKERS<br />
# WEB SOCKETS<br />
# APPCACHE<br />
# WEBSQL/INDEXEDDB<br />
# WEB STORAGE<br />
# CANVAS (SHOULD PROBABLY HAVE ITS OWN SECTION ENTIRELY)<br />
# HTML5 HISTORY API<br />
# DATASETS<br />
<br />
== OTHER THINGS TO COVER ==<br />
<br />
# SVG (REALLY NEEDS ITS OWN COURSE, See the following proposal)<br />
# WAI-ARIA<br />
<br />
=== SVG ===<br />
<br />
Source of inspiration :<br />
<br />
* http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html<br />
* https://developer.mozilla.org/en/SVG/Tutorial<br />
<br />
==== SVG BASICS ====<br />
<br />
# ''History and usage'' : As for HTML, it could be good to start by giving some context: What is it, Where does it come, What is it made for, How is it different than HTML?<br />
# ''Syntax and deployment'' : This part would introduce the basic syntax, the concept of viewport and absolute positioning and finally how to embed an SVG document inside other language (basically HTML and CSS)<br />
# ''Basic shapes'' : This part will be dedicated to the basic shapes available in SVG<br />
# ''Position and transformation'' : To go deeper inside the viewport thing and to explain the role of the transformations.<br />
# ''Using text in SVG''<br />
# ''Styling SVG'' : This is where we would detailed how to use presentation attributes and their CSS counterpart.<br />
# ''Scripting SVG'' : Where we could introduce the SVG DOM API.<br />
<br />
==== Part 2 : SVG ADVANCED ====<br />
<br />
# ''How to build Pathes'' : To dig into the syntax of the d attribute on path elements<br />
# ''Animating the web with SVG Animations'' : How to use SVG Animations<br />
# ''SVG Filters'' : This would be an introduction to filters but each filters could have it's own article (Filters a really hard things)<br />
# ''Clipping and Masking''<br />
# ''Patterns''<br />
# ''Gradients''<br />
# ''Dealing with the external'' : This part would be dedicated to the foreignObject element but also to links and images elements.<br />
<br />
=== SVG article drafts we could use ===<br />
<br />
# [[SVG Primer]] (written by David Storey, but unused)<br />
# [[SVG Links]] (written by David Storey, but unused)<br />
<br />
== Mobile web development - proposed new structure ==<br />
<br />
=== The basics ===<br />
<br />
# [[Mobile beginnings: An introduction to the mobile web]] (include history of mobiles, how mobile networks work, what the hardware looks like, what the software looks like)<br />
# [[What do the devices look like?]] (a fairly detailed reference showing the types of devices you are likely to need to support when building cross device adaptive apps)<br />
# [[Mobile constraints and advantages]] (what are the constraints you need to work around for alternative browsing devices? What are the advantages, eg the context specific technologies you can take advantage of?)<br />
<br />
=== Adaptive design and development ===<br />
<br />
# [[Mobile friendly: an introduction to mobile web design]] (start with a basis of semantic HTML, accessibility best practices are Making an app or site mobile friendly - do you create a different site, or do you adapt your existing site for mobile? A brief introduction to Adaptive design - graceful degradation, progressive enhancement, using media queries and viewport to adapt layout, using feature detection to server appropriate content and services, NOT browser sniffing!)<br />
# [[Designing a mobile user experience]] (all about context, what does the user want to do in this context, how does it differ from the desktop, etc.?)<br />
# [[Optimising CSS and JavaScript for mobile]]<br />
# [[Media Queries]]<br />
# [[Viewport]]<br />
# [[Adaptive layouts for mobile]] (apply the basics you learned in the last two)<br />
# [[Device aware apps]] (Geolocation, etc.)<br />
# [[Multimedia on mobile]] (dealing with images, video, audio)<br />
# [[Offline apps for mobile]] (web storage, AppCache, WebSQL)<br />
# [[Putting together a mobile testing suite]]<br />
<br />
== Supplementary articles ==<br />
<br />
* [http://www.w3.org/wiki/Getting_your_content_online Getting your content online], by Craig Grannell. { -- DOESN'T NEED CHANGES }<br />
* [http://www.w3.org/wiki/More_about_the_document_head More about the document &lt;head&gt;], by Chris Heilmann. { -- PROBABLY DOESN'T NEED CHANGES, ALTHOUGH IT WOULD BE NICE TO MOVE IT INTO THE MAIN HTML SECTION, AS IT GETS LOST OUT HERE }<br />
* [http://www.w3.org/wiki/Common_HTML_entities_used_for_typography Common HTML entities used for typography], by Ben Henick. { -- DOESN'T NEED MANY CHANGES }<br />
* [http://www.w3.org/wiki/The_web_standards_curriculum_glossary The Opera Web Standards Curriculum glossary], by various authors. This is incomplete, and will be added to as time goes by. { -- NEEDS A LOT OF TERMS ADDING, IF IT IS TO BE USEFUL }<br />
<br />
== Deprecated articles: removeed from original WSC ==<br />
<br />
* [[Choosing the right doctype for your HTML documents]]. [http://dev.opera.com/articles/view/14-megfelelo-doctype-valasztasa/ Hungarian translation] | [http://dev.opera.com/articles/view/14-choosing-the-right-doctype-for-your-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m3/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m3/ud3/index.html Spanish translation]<br />
* [[Generic containers - the div and span elements]]. [http://dev.opera.com/articles/view/22-altalanos-tarolok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud8/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud8/index.html Spanish translation]<br />
<br />
<br />
[[Category:WSC]]</div>Cmillshttps://www.w3.org/wiki/index.php?title=WSC_proposed_updates&diff=54321WSC proposed updates2011-10-06T12:28:34Z<p>Cmills: /* Planned New section to replace "Web Design Concepts" - to be called "Planning a web site" */</p>
<hr />
<div> <br />
= Web standards curriculum on W3C Wiki: plan for updates 2011 =<br />
<br />
== The beginning ==<br />
<br />
[[Introduction to the Web Standards Curriculum]] by Chris Mills. '''{ -- JUST NEEDS A GENERAL READ, AND A LITTLE BIT OF TWEAKING}'''<br />
<br />
== Introduction to the world of web standards ==<br />
<br />
# [[The history of the Web|The history of the Internet and the web, and the evolution of web standards]], by Mark Norman Francis. { -- NEEDS A GENERAL READ, PLUS I THINK IT COULD BENEFIT FROM A BIT MORE HISTORY BEING ADDED ABOUT THE EVOLUTION OF HTML5 AND CSS3}<br />
# [[How does the Internet work]]? by Jonathan Lane. {-- NO TWEAKING NEEDED; JUST SPIT AND POLISH}<br />
# [[The web standards model - HTML CSS and JavaScript]] by Jonathan Lane. { -- A FEW TWEAKS NEEDED - THE HTML SECTION COULD DO WITH AN OVERHAUL TO CCOUNT FOR HTML5, AND DEAL WITH XHTML A BIT BETTER}<br />
# [[Beautiful dream, but what's the reality]]? by Jonathan Lane. { -- I THINK THIS ARTICLE COULD JUST BE REMOVED, AND A SMALL SECTION ADDED TO THE PREVIOUS ARTICLE TO COVER "THE REALITY OF IT ALL". AS IT STANDS, THIS ARTICLE IS A BIT OF A RANT, AND NOT REALLY THAT USEFUL TO EDUCATION}<br />
<br />
== Web Design Concepts ==<br />
<br />
This section won't go into any code or markup details, and will act as an introduction to the design process before you start to create any graphics or code, as well as concepts of web design such as IA, navigation, usability etc.<br />
<br />
# [http://www.w3.org/wiki/Information_Architecture_-_planning_out_a_web_site Information Architecture - planning out a web site], by Jonathan Lane.<br />
# [http://www.w3.org/wiki/What_does_a_good_web_page_need What does a good web page need?], by Mark Norman Francis.<br />
# [http://www.w3.org/wiki/Colour_theory Colour Theory], by Linda Goin.<br />
# [http://www.w3.org/wiki/Building_up_a_site_wireframe Building up a site wireframe], by Linda Goin.<br />
# [http://www.w3.org/wiki/Colour_schemes_and_design_mockups Colour schemes and design mockups], by Linda Goin. <br />
# [http://www.w3.org/wiki/Typography_on_the_Web Typography on the web], by Paul Haine.<br />
<br />
{ -- I THINK THIS WHOLE SECTION NEEDS AN OVERHAUL, AS CURRENTLY IT IS NOT VERY EFFECTIVE. THE TYPOGRAPHY AND IA SECTIONS ARE FINE, BUT I'M NOT SURE ABOUT THE OTHER STUFF. I THINK THE SECTION SHOULD BE RETITLED "PLANNING A WEB SITE", AND HAVE A STRUCTURE SOMETHING LIKE THE FOLLOWING: <br />
<br />
=== Planned New section to replace "Web Design Concepts" - to be called "Planning a web site" ===<br />
<br />
# [[Introduction to planning a web site]]<br />
# Scoping and user research<br />
# [[Information_Architecture_-_planning_out_a_web_site|Information Architecture - planning out a web site]]. [http://dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud1/index.html Spanish translation]<br />
# [[What_does_a_good_web_page_need|What does a good web page need?]] [http://dev.opera.com/articles/view/7-mi-kell-egy-jo-weblaphoz/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud2/index.html Spanish translation]<br />
# [[Typography on the Web]]. [http://dev.opera.com/articles/view/11-tipografia-a-weben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud6/index.html Spanish translation]<br />
# Colour schemes and deasign theory<br />
# Mockups and protptypes<br />
# User experience design - INCLUDE MOBILE/ALTERNATIVE DEVICE USER EXPERIENCE. HOW DOES IT DIFFER?<br />
<br />
== HTML basics ==<br />
<br />
# [http://www.w3.org/wiki/The_basics_of_HTML The basics of HTML], by Mark Norman Francis. { -- THIS LOOKS OK, ALTHOUGH I THINK IT NEEDS A BIT OF UPDATING TO ACCOUNT FOR HTML5, THE HISTORY SECTION, ETC. THE EXAMPLES SHOULD ALSO BE UPDATED TO HTML5 SEMANTICS, WHERE APPROPRIATE, EG NO MORE DIVS FOR PAGE SECTIONS}<br />
# [http://www.w3.org/wiki/The_HTML_head_element The HTML &lt;head&gt; element], by Christian Heilmann. { -- NEEDS UPDATING, AND HTML5 FEATURES ADDING, SUCH AS META CHARSET} <br />
# [http://www.w3.org/wiki/Choosing_the_right_doctype_for_your_HTML_documents Choosing the right doctype for your HTML documents], by Roger Johansson. { -- I THINK THAT THIS NEEDS TO BE REWRITTEN TO FOCUS LESS ON DOCTYPES, AND MORE ON HTML/XHTML RULES, HOW THEY DIFFER, WHAT DOCTYPES REALLY ACHIEVED, WHAT ONES YOU MIGHT ENCOUNTER IN THE WILD, WHY WE WILL BE USING HTML5 DOCTYPE IN THIS COURSE, WHAT IT ACHIEVES, ETC.}<br />
<br />
== The HTML body ==<br />
<br />
{ -- OVERALL THIS IS A REASONABLE SECTION, BUT QUITE A LOT NEEDS ADDING TO BRING IT UP TO DATE WITH HTML5, ETC. I WILL CLEARLY MARK NEW ARTICLES}<br />
<br />
# NEW ARTICLE - structural elements, section, article, etc. also including div and span<br />
# [http://www.w3.org/wiki/Marking_up_textual_content_in_HTML Marking up textual content in HTML], by Mark Norman Francis. { -- NEEDS UPDATING, AS SOME OF THESE ELEMENTS WILL HAVE CHANGED FUNCTION IN HTML5, AND DEPRECATED ELEMENTS HAVE BEEN REPURPOSED}<br />
# [http://www.w3.org/wiki/HTML_lists HTML Lists], by Ben Buchanan. { -- DOESN'T NEED MANY UPDATES}<br />
# [http://www.w3.org/wiki/Images_in_HTML Images in HTML], by Christian Heilmann. { -- NEEDS A BIT OF SPIT AND POLISH, AND NEEDS FIGURE AND FIGCAPTION ADDING}<br />
# [http://www.w3.org/wiki/HTML_links_-_lets_build_a_web HTML links — let's build a web!] by Christian Heilmann. { -- NEEDS SPIT AND POLISH, AND NEEDS THE CONCEPT OF BLOCK LEVEL LINKS ADDING}<br />
# NEW ARTICLE - HTML5 video and audio<br />
# [http://www.w3.org/wiki/HTML_tables HTML Tables], by Jen Hanen. { -- NOT MANY UPDATES NEEDED}<br />
# [http://www.w3.org/wiki/HTML_forms_-_the_basics HTML Forms — the basics], by Jen Hanen. { -- THERE IS A LOT OF NEW HTML5 FORM STUFF TO ADD, OBVIOUSLY - I THINK THAT IN THIS CIRCUMSTANCE, BECAUSE SUPPORT FOR HTML5 FORM STUFF IS PATCHY ACROSS BROWSERS RIGHT NOW, WE SHOULD DO SMALL UPDATES ON THE EXISTING ARTICLE, THEN ADD ONE OR MORE SEPARATE ARTICLES TO COVER THE NEW HTML5 FORM ELEMENTS AND NEW ATTRIBUTES, AND THEN PERHAPS SEPARATE COVERAGE OF VALIDATION}<br />
# [http://www.w3.org/wiki/Lesser_-_known_semantic_elements Lesser-known semantic elements], by Mark Norman Francis. {THIS WILL NEED UPDATING, AS A NUMBER OF THESE ELEMENTS HAVE BEEN REDEFINED}<br />
# [http://www.w3.org/wiki/Generic_containers_-_the_div_and_span_elements Generic containers — the div and span elements], by Mark Norman Francis. { -- REMOVE THIS ONE - THIS WILL BE COVERED IN THE STRUCTURAL ELEMENTS ARTICLE}<br />
# [http://www.w3.org/wiki/Creating_multiple_pages_with_navigation_menus Creating multiple pages with navigation menus], by Christian Heilmann.<br />
# [http://www.w3.org/wiki/Validating_your_HTML Validating your HTML], by Mark Norman Francis. { -- I THINK THIS COULD BE REWRITTEN AND IMPROVED, AND RELOCATED TO A SECTION ABOUT DEBUGGING WEB PAGES? A MORE COMPLETE TREATMENT WOULD BE NICE}<br />
<br />
== Accessibility specifics ==<br />
<br />
# [http://www.w3.org/wiki/Accessibility_basics Accessibility basics], by Tom Hughes-Croucher.<br />
# [http://www.w3.org/wiki/Accessibility_testing Accessibility testing], by Benjamin Hawkes-Lewis.<br />
<br />
I THINK THIS NEEDS TO BE EXPANDED OUT TO SEVERAL ARTICLES, TO COVER DIFFERENT ASPECTS, SOMETHING LIKE:<br />
<br />
# WRITING A PLAN FOR A11Y TESTING, INCLUDING USE OF REAL USER TESTING, CONFORMANCE CRITERIA, AUTOMATED TOOLS, AND GOOD OLD COMMON SENSE<br />
# THE LEGAL SIDE OF THINGS, EXPLAINED IN DETAIL<br />
# DECIPHERING WCAG, AND OTHER CONFORMANCE CRITERIA SUCH AS SECTION 508<br />
# ACCESSIBILITY TOOLS, WHAT TO USE AND WHAT TO AVOID. HOW FAR WILL THESE GET YOU?<br />
# REAL A11Y TESTING WITH REAL PEOPLE, HOW TO PUT TOGETHER FOCUS GROUPS, WHAT TO LOOK FOR HERE<br />
# COMMON SENSE - SOLUTIONS FOR COMMON ACCESSIBILITY ISSUES - A ROADMAP FOR FIXING ISSUES. START WITH SEMANTIC HTML, THEN GO TO VIDEO AND AUDIO CONTENT, JAVASCRIPT, AJAX, ALTERNATIVES. }<br />
<br />
== CSS ==<br />
<br />
# [http://dev.opera.com/articles/view/27-css-basics/ CSS basics], by Christian Heilmann. { -- NEEDS A BIT OF SPRUCING UP, TO TALK ABOUT NEW STUFF, PLUS WE NEED TO ADD SOME STUFF ABOUT ALL THE NEW CSS SELECTORS. OF DO WE? MAYBE WE COULD JUST COVER THE BASIC SELECTORS HERE, AND THEN COVER SOME OF THE MORE ADVANCED ONES IN APPROPRIATE PLACES, EG FORM RELATED ONES, AND OTHER ADVANCED ONES IN AN ARTICLE OF THEIR OWN - SEE NEXT ARTICLE}<br />
# NEW ARTICLE - ADVANCED SELECTORS - cover all the advanced selectors that we didn't cover in the previous chapter - last nth of type, valid, invalid, nth child, etc. <br />
# NEW CHAPTER - CSS3 SHADOWS<br />
# [http://www.w3.org/wiki/Inheritance_and_cascade Inheritance and Cascade], by Tommy Olsson. { -- NOT MUCH TO UPDATE HERE}<br />
# [http://www.w3.org/wiki/Text_styling_with_CSS Text styling with CSS], by Ben Henick. { -- THIS IS A VERY WEIGHTY CHAPTER, AND COULD DO WITH SLIMMING DOWN A BIT, AND MAKING MORE GRANULAR, PERHAPS EVEN SPLITTING IT. ALSO ADD WEB FONTS, AND TALK ABOUT SOME OF THE MORE OBSCURE TEXT STYLING STUFF, LIKE TEXT-OVERFLOW, GENERATED CONTENT FOR QUOTES, WORD WRAP, ETC.}<br />
# [http://www.w3.org/wiki/The_CSS_layout_model_-_boxes_borders_margins_padding The CSS layout model - boxes, borders, margins, padding], by Ben Henick. { -- AGAIN, MIGHT NEED SPLITTING, NEED TO COVER DIFFERENT LAYOUT MODELS, BORDER-RADIUS ETC.}<br />
# [http://www.w3.org/wiki/CSS_background_images CSS background images], by Nicole Sullivan. { -- NEED TO UPDATE TO COVER MULTIPLE BACKGROUND IMAGES, BORDER-IMAGE, LINEAR GRADIENTS, MIGHT NEED MULTIPLE CHAPTERS}<br />
# [http://www.w3.org/wiki/Styling_lists_and_links Styling lists and links], by Ben Buchanan. { -- DOESN'T NEED THAT MUCH }<br />
# [http://www.w3.org/wiki/Styling_tables Styling tables], by Ben Buchanan. { -- DOESN'T NEED THAT MUCH }<br />
# [http://www.w3.org/wiki/Styling_forms Styling forms], by Ben Henick. { -- NEED TO ADD CSS3 FORM-RELATED PSEUDO CLASSES, AND DISCUSSION OF STYLING ERRORS AND STUFF}<br />
# [http://www.w3.org/wiki/Floats_and_clearing Floats and clearing], by Tommy Olsson. { - NOT THAT MUCH NEEDED, ALTHOUGH I NEED TO BE CAREFUL TO SEPARATE OUT MULTIPLE COLUMN LAYOUTS, AND COVER MULTI-COL THERE}<br />
# [http://www.w3.org/wiki/CSS_static_and_relative_positioning CSS static and relative positioning], by Tommy Olsson.<br />
# [http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning CSS absolute and fixed positioning], by Tommy Olsson. { -- THE POSITIONING CHAPTERS NEED SOME WORK, BUT NOT THAT MUCH}<br />
# NEW CHAPTER - CSS3 TRANSFORMS<br />
# NEW CHAPTER - CSS3 TRANSITIONS<br />
# NEW CHAPTER - CSS3 ANIMATIONS<br />
# NEW CHAPTER - ADAPTIVE WEB DESIGN FOR MOBILE - MEDIA QUERIES, VIEWPORT.<br />
# NEW CHAPTER - OBJECT FIT/OBJECT POSITION<br />
<br />
== Advanced CSS study ==<br />
<br />
# [http://www.w3.org/wiki/Headers_footers_columns_and_templates Headers, footers, columns, and templates], by Ben Henick { -- NOT SURE HOW USEFUL THIS IS, MAYBE DISSECT IT, PUT THE USEFUL STUFF IN OTHER CHAPTERS. A BIT TOO LONG WINDED. }<br />
<br />
== JavaScript ==<br />
<br />
# [http://www.w3.org/wiki/Programming_-_the_real_basics Programming - the real basics!], by Christian Heilmann<br />
# [http://www.w3.org/wiki/What_can_you_do_with_JavaScript What can you do with JavaScript?], by Christian Heilmann<br />
# [http://www.w3.org/wiki/Your_first_look_at_JavaScript Your first look at JavaScript], by Christian Heilmann<br />
# [http://www.w3.org/wiki/JavaScript_best_practices JavaScript best practices], by Christian Heilmann<br />
# [http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript The principles of unobtrusive JavaScript], by PPK<br />
# [http://www.w3.org/wiki/JavaScript_functions JavaScript functions], by Mike West<br />
# [http://www.w3.org/wiki/Objects_in_JavaScript Objects in JavaScript], by Mike West<br />
# [http://www.w3.org/wiki/Traversing_the_DOM Traversing the DOM], by Mike West<br />
# [http://www.w3.org/wiki/Creating_and_modifying_HTML Creating and modifying HTML], by Stuart Langridge<br />
# [http://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript Dynamic style - manipulating CSS with JavaScript], by Greg Schechter<br />
# [http://www.w3.org/wiki/Handling_events_with_JavaScript Handling events with JavaScript], by Robert Nyman<br />
# [http://www.w3.org/wiki/JavaScript_animation JavaScript animation], by Stuart Langridge<br />
# [http://www.w3.org/wiki/Graceful_degredation_versus_progressive_enhancement Graceful degredation versus progressive enhancement], by Christian Heilmann<br />
<br />
== HTML5 APIS ==<br />
<br />
PROBABLY NEED TO INTERSPERSE THESE IN THE ABOVE SECTION, OR PUT NEW SECTIONS IN, EG "OFFLINE WEB APPLICATIONS" WOULD WORK WELL AS A DISTINCT SECTION.<br />
<br />
# MEDIA API<br />
# GEOLOCATION (YEAH, NOT HTML5, BUT HEY)<br />
# WEB WORKERS<br />
# WEB SOCKETS<br />
# APPCACHE<br />
# WEBSQL/INDEXEDDB<br />
# WEB STORAGE<br />
# CANVAS (SHOULD PROBABLY HAVE ITS OWN SECTION ENTIRELY)<br />
# HTML5 HISTORY API<br />
# DATASETS<br />
<br />
== OTHER THINGS TO COVER ==<br />
<br />
# SVG (REALLY NEEDS ITS OWN COURSE, See the following proposal)<br />
# WAI-ARIA<br />
<br />
=== SVG ===<br />
<br />
Source of inspiration :<br />
<br />
* http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html<br />
* https://developer.mozilla.org/en/SVG/Tutorial<br />
<br />
==== SVG BASICS ====<br />
<br />
# ''History and usage'' : As for HTML, it could be good to start by giving some context: What is it, Where does it come, What is it made for, How is it different than HTML?<br />
# ''Syntax and deployment'' : This part would introduce the basic syntax, the concept of viewport and absolute positioning and finally how to embed an SVG document inside other language (basically HTML and CSS)<br />
# ''Basic shapes'' : This part will be dedicated to the basic shapes available in SVG<br />
# ''Position and transformation'' : To go deeper inside the viewport thing and to explain the role of the transformations.<br />
# ''Using text in SVG''<br />
# ''Styling SVG'' : This is where we would detailed how to use presentation attributes and their CSS counterpart.<br />
# ''Scripting SVG'' : Where we could introduce the SVG DOM API.<br />
<br />
==== Part 2 : SVG ADVANCED ====<br />
<br />
# ''How to build Pathes'' : To dig into the syntax of the d attribute on path elements<br />
# ''Animating the web with SVG Animations'' : How to use SVG Animations<br />
# ''SVG Filters'' : This would be an introduction to filters but each filters could have it's own article (Filters a really hard things)<br />
# ''Clipping and Masking''<br />
# ''Patterns''<br />
# ''Gradients''<br />
# ''Dealing with the external'' : This part would be dedicated to the foreignObject element but also to links and images elements.<br />
<br />
=== SVG article drafts we could use ===<br />
<br />
# [[SVG Primer]] (written by David Storey, but unused)<br />
# [[SVG Links]] (written by David Storey, but unused)<br />
<br />
== Mobile web development - proposed new structure ==<br />
<br />
=== The basics ===<br />
<br />
# [[Mobile beginnings: An introduction to the mobile web]] (include history of mobiles, how mobile networks work, what the hardware looks like, what the software looks like)<br />
# [[What do the devices look like?]] (a fairly detailed reference showing the types of devices you are likely to need to support when building cross device adaptive apps)<br />
# [[Mobile constraints and advantages]] (what are the constraints you need to work around for alternative browsing devices? What are the advantages, eg the context specific technologies you can take advantage of?)<br />
<br />
=== Adaptive design and development ===<br />
<br />
# [[Mobile friendly: an introduction to mobile web design]] (start with a basis of semantic HTML, accessibility best practices are Making an app or site mobile friendly - do you create a different site, or do you adapt your existing site for mobile? A brief introduction to Adaptive design - graceful degradation, progressive enhancement, using media queries and viewport to adapt layout, using feature detection to server appropriate content and services, NOT browser sniffing!)<br />
# [[Designing a mobile user experience]] (all about context, what does the user want to do in this context, how does it differ from the desktop, etc.?)<br />
# [[Optimising CSS and JavaScript for mobile]]<br />
# [[Media Queries]]<br />
# [[Viewport]]<br />
# [[Adaptive layouts for mobile]] (apply the basics you learned in the last two)<br />
# [[Device aware apps]] (Geolocation, etc.)<br />
# [[Multimedia on mobile]] (dealing with images, video, audio)<br />
# [[Offline apps for mobile]] (web storage, AppCache, WebSQL)<br />
# [[Putting together a mobile testing suite]]<br />
<br />
== Supplementary articles ==<br />
<br />
* [http://www.w3.org/wiki/Getting_your_content_online Getting your content online], by Craig Grannell. { -- DOESN'T NEED CHANGES }<br />
* [http://www.w3.org/wiki/More_about_the_document_head More about the document &lt;head&gt;], by Chris Heilmann. { -- PROBABLY DOESN'T NEED CHANGES, ALTHOUGH IT WOULD BE NICE TO MOVE IT INTO THE MAIN HTML SECTION, AS IT GETS LOST OUT HERE }<br />
* [http://www.w3.org/wiki/Common_HTML_entities_used_for_typography Common HTML entities used for typography], by Ben Henick. { -- DOESN'T NEED MANY CHANGES }<br />
* [http://www.w3.org/wiki/The_web_standards_curriculum_glossary The Opera Web Standards Curriculum glossary], by various authors. This is incomplete, and will be added to as time goes by. { -- NEEDS A LOT OF TERMS ADDING, IF IT IS TO BE USEFUL }<br />
<br />
== Deprecated articles: removeed from original WSC ==<br />
<br />
* [[Choosing the right doctype for your HTML documents]]. [http://dev.opera.com/articles/view/14-megfelelo-doctype-valasztasa/ Hungarian translation] | [http://dev.opera.com/articles/view/14-choosing-the-right-doctype-for-your-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m3/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m3/ud3/index.html Spanish translation]<br />
* [[Generic containers - the div and span elements]]. [http://dev.opera.com/articles/view/22-altalanos-tarolok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud8/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud8/index.html Spanish translation]<br />
<br />
<br />
[[Category:WSC]]</div>Cmillshttps://www.w3.org/wiki/index.php?title=SVG_Links&diff=54320SVG Links2011-10-06T11:45:03Z<p>Cmills: </p>
<hr />
<div>== Introduction ==<br />
<br />
Just like (X)HTML, SVG supports linking to content within the document and to external resources, for example other SVG documents, HTML or XML documents, images, videos or any other kind of typical resource you may want to link to. This tutorial will walk you through how to create links in SVG using XLink—the W3C spec for linking in XML—and cover any specific SVG-related concerns that you man need to know.<br />
<br />
<br />
If you are not familiar with the <code>a</code> element or the <code>href</code> attribute in HTML I recommend reading Christian Heilmann’s [[HTML links – let’s build a web!]] article before we start. It is also recommended that you read my article to familiarise yourself with the basics of SVG, if you are not already familiar.<br />
<br />
<br />
Note: XML doesn’t support linking by default, so the situation is slightly more complex than [[HTML links]]. But don't despair - XLink is still not that complicated to get the hang of; after reading this article it should present you with no trouble.<br />
<br />
<br />
== Getting started with SVG links ==<br />
<br />
In HTML I can simply set up a link from one document to another using an <code>a</code> element and an <code>href</code> attribute like so:<br />
<br />
<br />
<pre><code>&lt;a href="http://example.com/link/"&gt;An example link&lt;/a&gt;</code><br />
</pre><br />
<br />
The <code>a</code> element is contained in the linking document (the local resource), and the <code>href</code> attribute points to the document or resource I want to link to (the remote resource). All very straight forward.<br />
<br />
<br />
In XML and therefore SVG, there is no magic <code>href</code> attribute that can create links. Instead you have to use a technology called XLink to provide this functionality. XLink is a very powerful technology that provides a lot of complex functionality, such as one-to-many links, but for SVG we only have to care about simple one-to-one links, as that is all that is supported in the [[SVG specification]].<br />
<br />
<br />
=== Setting up the XLink namespace ===<br />
<br />
You've already met XML namespaces when defining a SVG template. Usually an SVG document uses the default namespace like so:<br />
<br />
<br />
<pre><code>&lt;svg '''xmlns="http://www.w3.org/2000/svg"''' version="1.1"&gt;<br />
…content goes here…<br />
&lt;/svg&gt;</code><br />
</pre><br />
<br />
Since the default namespace is taken up by SVG, if you want to to define the XLink namespace on the SVG element you have to give it a prefix, which by general convention is <code>xlink</code> (although it can be anything you please). Lets add the XLink namespace to our <code>svg</code> element:<br />
<br />
<br />
<pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" '''xmlns:xlink="http://www.w3.org/1999/xlink"''' version="1.1"&gt;<br />
…content goes here…<br />
&lt;/svg&gt;</code><br />
</pre><br />
<br />
As you can see, the <code>xlink</code> prefix is defined using the <code>xmlns</code> attribute, a colon (:) and the desired prefix. The value is then set to the standard XLink namespace.<br />
<br />
<br />
Now the XLink namespace is set up, any time you want to refer to a XLink element or attribute on the <code>svg</code> element or any of its children, you have to use it in combination with the <code>xlink</code> prefix. The best way to explain this is with an example, so lets start to set up a similar link to the HTML link above.<br />
<br />
<br />
=== A simple SVG link using XLink ===<br />
<br />
Next we need to use the SVG <code>a</code> element in our document to define a link, and the <code>text</code> element to define the link text:<br />
<br />
<br />
<pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"&gt;<br />
'''&lt;a&gt;<br />
&lt;text x="10" y="25"&gt;An example link.&lt;/text&gt;<br />
&lt;/a&gt;'''<br />
&lt;/svg&gt;</code><br />
</pre><br />
<br />
Now we have to add the XLink <code>href</code> attribute to the <code>a</code> element to specify the destination of the link, like so:<br />
<br />
<br />
<pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"&gt;<br />
&lt;a &lt;strong&gt;xlink:href="http://example.com/link/"&lt;/strong&gt;&gt;<br />
&lt;text x="10" y="25" &gt;An example link.&lt;/text&gt;<br />
&lt;/a&gt;<br />
&lt;/svg&gt;</code><br />
</pre><br />
<br />
The <code>xlink</code> namespace is added before the attribute name, using a colon to separate the prefix from the attribute.<br />
<br />
<br />
Note: It is possible to define the type of link you are using as a simple link using <code>xlink:type="simple"</code> on the <code>a</code> element, but this is optional and simple links are the only type of XLink links that are valid in SVG anyway.<br />
<br />
<br />
Using the <code>a</code> element in SVG doesn't automatically style the link like it does in HTML, so you may want to add some styling to the text, as seen in the completed .<br />
<br />
<br />
One thing worth remembering is that to set the colour of the text in SVG you must use the <code>fill</code> CSS property or XML attribute, not <code>color</code> as in HTML. The text must also be contained in a <code>text</code> element nested inside the link, unlike HTML where a <code>a</code> element can contain text immediately between its start and end tags.<br />
<br />
<br />
== Adding additional functionality to links ==<br />
<br />
You may recall that HTML links can have a <code>title</code> attribute to describe additional details about the link. This is also available with XLink in SVG:<br />
<br />
<br />
<pre><code>&lt;a xlink:href= "http://example.com/link/" '''xlink:title="The link leads to an example page that is of little interest"'''&gt;<br />
&lt;text x="10" y="25" &gt;An example link.&lt;/text&gt;<br />
&lt;/a&gt;</code><br />
</pre><br />
<br />
If you try out my example, you will see that a tooltip will show up when you hover over the link.<br />
<br />
<br />
Following a link defaults to opening the linked resource in the same window or tab. You can change this behaviour by using the XLink <code>show</code> attribute. Using a value of <code>replace</code> specifies the default behaviour, while changing it to <code>new</code> will open the link in a new window or tab.<br />
<br />
<br />
<pre><code>&lt;a xlink:href= "http://example.com/link/" xlink:title="The link opens an example page in a new tab/window" '''xlink:show="new"'''&gt;<br />
&lt;text x="10" y="25" &gt;An example link.&lt;/text&gt;<br />
&lt;/a&gt;</code><br />
</pre><br />
<br />
=== Linking to a specific point in a document ===<br />
<br />
Also like HTML, it is possible to link to a specific point in a document (both in local and remote documents) by specifying an <code>id</code> on the element you want to link to and adding a fragment identifier to the link. This can be achieved in almost exactly the same way as with HTML:<br />
<br />
<br />
<pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"&gt;<br />
&lt;a '''xlink:href="http://www.someurl.com#someid"'''&gt;<br />
&lt;text x="10" y="25" &gt;An example link.&lt;/text&gt;<br />
&lt;/a&gt;<br />
&lt;/svg&gt;</code><br />
</pre><br />
<br />
You can also link to a specific part of a SVG document, using the fragment identifier combined with the <code>view</code> element. This can be useful for defining an area of the SVG file that you'd like to zoom in or out of when the user clicks on a link or a button.<br />
<br />
<br />
The fragment identifier works in exactly the same way as the example above, while the <code>view</code> element is used to specify the size of the viewport after the URL has been followed. I will show this with another example:<br />
<br />
<br />
<pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%"&gt;<br />
&lt;a xlink:href="#target"&gt;<br />
&lt;text x="10" y="25"&gt;Zoom in on shape below&lt;/text&gt;<br />
&lt;/a&gt;<br />
<br />
'''&lt;view id="target" viewBox="600 600 50 50"/&gt;<br />
&lt;rect x="600" y="600" width="50" height="50"/&gt;'''<br />
&lt;/svg&gt;</code><br />
</pre><br />
<br />
The <code>view</code> element requires at least two attributes, the <code>id</code> so that the fragment identifier can point to it, and the <code>viewBox</code>. The <code>viewBox</code> attribute sets the size of the viewport with four values, Minimum x co-ordinate, Minimum y co-ordinate, width and height. When the link is followed, the browser will set the viewport to the co-ordinates and width and height specified on the corresponding view element. Behind the scenes, the browser automatically applies transitions and scaling for you to make the content fit correctly in the <code>viewBox</code>.<br />
<br />
<br />
With the example above, you may notice that the rectangle doesn’t fill your browser window. This is because by default it preserves the aspect ratio of the elements. There is a way to define this behaviour using the <code>preserveAspectRatio</code> attribute. I will cover this in a later article, but if you just want ignore the aspect ratio, you can set the value to <code>none</code> like so:<br />
<br />
<br />
<pre><code>&lt;view id="target" viewBox="600 600 50 50" '''preserveAspectRatio="none"'''/&gt;</code><br />
</pre><br />
<br />
=== Embedding external resources in an SVG document ===<br />
<br />
As well as linking to separate documents, it is possible to embed resources such as images into an SVG document in a very similar manner, again using the XLink href attribute. Images can either be raster images such as PNGs and JPEGS, or another SVG file:<br />
<br />
<br />
<pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"&gt;<br />
'''&lt;image xlink:href="circle.png" x="10" y="25" height="100" width="100"&gt;<br />
&lt;desc&gt;A perfect circle&lt;/desc&gt;<br />
&lt;/image&gt;'''<br />
&lt;/svg&gt;</code><br />
</pre><br />
<br />
The <code>desc</code> element provides a means to provide alternative text, in the same way that the HTML <code>alt</code> attribute does. This will be useful once screen readers begin to support SVG.<br />
<br />
<br />
Try out my example.<br />
<br />
<br />
Embedding an SVG image works in exactly the same way:<br />
<br />
<br />
<pre><code>&lt;image '''xlink:href="circle.svg"''' x="10" y="25" height="100" width="100"&gt;<br />
&lt;desc&gt;A perfect circle&lt;/desc&gt;<br />
&lt;/image&gt;</code><br />
</pre><br />
<br />
Note: The XLink <code>show</code> attribute is used with a value of <code>embed</code> to include resources in the document, but as this is the default (and only) value allowed for the <code>show</code> attribute on the <code>image</code> element, it can be omitted.<br />
<br />
<br />
Fragments of SVG can be embedded in the document using the <code>use</code> element - this includes SVG from external SVG files, and fragments that have already appeared in the same document. This allows SVG elements to be defined once and reused many times, and will be the subject of an additional article on reusable SVG, to be published in the future on dev.opera.com.<br />
<br />
<br />
SVG Tiny 1.2 and above allow for embedding of audio and video, but this is not widely implemented. At the time of writing this only works in a .<br />
<br />
<br />
=== Linking multiple elements ===<br />
<br />
In HTML 4.01 and XHTML 1.0/1.1, the <code>a</code> element is inline and thus can not legally contain block level child elements. If you want to for example make an image and adjacent text into the same link, you have to specify additional <code>a</code> elements with the same <code>href</code> value. There is no such restriction with SVG - it is perfectly valid to do the following:<br />
<br />
<br />
<pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"&gt;<br />
&lt;defs&gt;<br />
&lt;linearGradient id="badgeGradient"&gt;<br />
&lt;stop offset="0"/&gt;<br />
&lt;stop offset="1"/&gt;<br />
&lt;/linearGradient&gt;<br />
&lt;/defs&gt;<br />
<br />
&lt;g id="heading"&gt;<br />
'''&lt;a xlink:href= "http://www.opera.com/"&gt;<br />
&lt;path id="badge" d="M 29.6,22.8 C 29.2,23.4 24.3,22.4 23.8,22.9 C 23.4,23.3 24.3,28.3 23.8,28.6 C 23.2,28.9 19.4,25.6 18.8,25.8 C 18.2,26.0 16.5,30.7 15.8,30.7 C 15.2,30.7 13.5,26.0 12.9,25.8 C 12.3,25.6 8.5,28.9 7.9,28.6 C 7.4,28.3 8.3,23.3 7.9,22.9 C 7.4,22.4 2.4,23.4 2.1,22.8 C 1.8,22.3 5.1,18.4 4.9,17.8 C 4.8,17.2 0.0,15.5 0.0,14.9 C 0.0,14.3 4.8,12.6 4.9,12.0 C 5.1,11.4 1.8,7.5 2.1,7.0 C 2.4,6.4 7.4,7.3 7.9,6.9 C 8.3,6.5 7.4,1.5 7.9,1.2 C 8.5,0.9 12.3,4.1 12.9,4.0 C 13.5,3.8 15.2,-0.8 15.8,-0.8 C 16.5,-0.8 18.2,3.8 18.8,4.0 C 19.4,4.1 23.2,0.9 23.8,1.2 C 24.3,1.5 23.4,6.5 23.8,6.9 C 24.3,7.3 29.2,6.4 29.6,7.0 C 29.9,7.5 26.6,11.4 26.8,12.0 C 26.9,12.6 31.7,14.3 31.7,14.9 C 31.7,15.5 26.9,17.2 26.8,17.8 C 26.6,18.4 29.9,22.3 29.6,22.8 z"/&gt; <br />
&lt;text id="label" x="5" y="20" transform = "rotate(-15 10 10)"&gt;New&lt;/text&gt;<br />
&lt;text id="title" x="40" y="20"&gt;Opera Browser&lt;/text&gt;<br />
&lt;/a&gt;'''<br />
&lt;/g&gt;<br />
<br />
&lt;/svg&gt;</code><br />
</pre><br />
<br />
Try it out by viewing my example.<br />
<br />
<br />
== Summary ==<br />
<br />
After reading this article you should be able to link to documents and resources in SVG using XLink simple links. We have covered the basics or creating a link in SVG using the <code>a</code> element, adding additional information using the XLink <code>title</code> attribute, using fragment identifiers to point to a specific part of a document, and how to embed images in a SVG document using the <code>image</code> element. We have also covered a slightly more complex example, using multiple elements, that can all point to the same destination using one <code>a</code> element.</div>Cmillshttps://www.w3.org/wiki/index.php?title=SVG_Links&diff=54319SVG Links2011-10-06T11:44:31Z<p>Cmills: Created page with "Links and embedding resources in SVG == Introduction == Just like (X)HTML, SVG supports linking to content within the document and to external resources, for example other SV…"</p>
<hr />
<div>Links and embedding resources in SVG<br />
<br />
<br />
== Introduction ==<br />
<br />
Just like (X)HTML, SVG supports linking to content within the document and to external resources, for example other SVG documents, HTML or XML documents, images, videos or any other kind of typical resource you may want to link to. This tutorial will walk you through how to create links in SVG using XLink—the W3C spec for linking in XML—and cover any specific SVG-related concerns that you man need to know.<br />
<br />
<br />
If you are not familiar with the <code>a</code> element or the <code>href</code> attribute in HTML I recommend reading Christian Heilmann’s [[HTML links – let’s build a web!]] article before we start. It is also recommended that you read my article to familiarise yourself with the basics of SVG, if you are not already familiar.<br />
<br />
<br />
Note: XML doesn’t support linking by default, so the situation is slightly more complex than [[HTML links]]. But don't despair - XLink is still not that complicated to get the hang of; after reading this article it should present you with no trouble.<br />
<br />
<br />
== Getting started with SVG links ==<br />
<br />
In HTML I can simply set up a link from one document to another using an <code>a</code> element and an <code>href</code> attribute like so:<br />
<br />
<br />
<pre><code>&lt;a href="http://example.com/link/"&gt;An example link&lt;/a&gt;</code><br />
</pre><br />
<br />
The <code>a</code> element is contained in the linking document (the local resource), and the <code>href</code> attribute points to the document or resource I want to link to (the remote resource). All very straight forward.<br />
<br />
<br />
In XML and therefore SVG, there is no magic <code>href</code> attribute that can create links. Instead you have to use a technology called XLink to provide this functionality. XLink is a very powerful technology that provides a lot of complex functionality, such as one-to-many links, but for SVG we only have to care about simple one-to-one links, as that is all that is supported in the [[SVG specification]].<br />
<br />
<br />
=== Setting up the XLink namespace ===<br />
<br />
You've already met XML namespaces when defining a SVG template. Usually an SVG document uses the default namespace like so:<br />
<br />
<br />
<pre><code>&lt;svg '''xmlns="http://www.w3.org/2000/svg"''' version="1.1"&gt;<br />
…content goes here…<br />
&lt;/svg&gt;</code><br />
</pre><br />
<br />
Since the default namespace is taken up by SVG, if you want to to define the XLink namespace on the SVG element you have to give it a prefix, which by general convention is <code>xlink</code> (although it can be anything you please). Lets add the XLink namespace to our <code>svg</code> element:<br />
<br />
<br />
<pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" '''xmlns:xlink="http://www.w3.org/1999/xlink"''' version="1.1"&gt;<br />
…content goes here…<br />
&lt;/svg&gt;</code><br />
</pre><br />
<br />
As you can see, the <code>xlink</code> prefix is defined using the <code>xmlns</code> attribute, a colon (:) and the desired prefix. The value is then set to the standard XLink namespace.<br />
<br />
<br />
Now the XLink namespace is set up, any time you want to refer to a XLink element or attribute on the <code>svg</code> element or any of its children, you have to use it in combination with the <code>xlink</code> prefix. The best way to explain this is with an example, so lets start to set up a similar link to the HTML link above.<br />
<br />
<br />
=== A simple SVG link using XLink ===<br />
<br />
Next we need to use the SVG <code>a</code> element in our document to define a link, and the <code>text</code> element to define the link text:<br />
<br />
<br />
<pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"&gt;<br />
'''&lt;a&gt;<br />
&lt;text x="10" y="25"&gt;An example link.&lt;/text&gt;<br />
&lt;/a&gt;'''<br />
&lt;/svg&gt;</code><br />
</pre><br />
<br />
Now we have to add the XLink <code>href</code> attribute to the <code>a</code> element to specify the destination of the link, like so:<br />
<br />
<br />
<pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"&gt;<br />
&lt;a &lt;strong&gt;xlink:href="http://example.com/link/"&lt;/strong&gt;&gt;<br />
&lt;text x="10" y="25" &gt;An example link.&lt;/text&gt;<br />
&lt;/a&gt;<br />
&lt;/svg&gt;</code><br />
</pre><br />
<br />
The <code>xlink</code> namespace is added before the attribute name, using a colon to separate the prefix from the attribute.<br />
<br />
<br />
Note: It is possible to define the type of link you are using as a simple link using <code>xlink:type="simple"</code> on the <code>a</code> element, but this is optional and simple links are the only type of XLink links that are valid in SVG anyway.<br />
<br />
<br />
Using the <code>a</code> element in SVG doesn't automatically style the link like it does in HTML, so you may want to add some styling to the text, as seen in the completed .<br />
<br />
<br />
One thing worth remembering is that to set the colour of the text in SVG you must use the <code>fill</code> CSS property or XML attribute, not <code>color</code> as in HTML. The text must also be contained in a <code>text</code> element nested inside the link, unlike HTML where a <code>a</code> element can contain text immediately between its start and end tags.<br />
<br />
<br />
== Adding additional functionality to links ==<br />
<br />
You may recall that HTML links can have a <code>title</code> attribute to describe additional details about the link. This is also available with XLink in SVG:<br />
<br />
<br />
<pre><code>&lt;a xlink:href= "http://example.com/link/" '''xlink:title="The link leads to an example page that is of little interest"'''&gt;<br />
&lt;text x="10" y="25" &gt;An example link.&lt;/text&gt;<br />
&lt;/a&gt;</code><br />
</pre><br />
<br />
If you try out my example, you will see that a tooltip will show up when you hover over the link.<br />
<br />
<br />
Following a link defaults to opening the linked resource in the same window or tab. You can change this behaviour by using the XLink <code>show</code> attribute. Using a value of <code>replace</code> specifies the default behaviour, while changing it to <code>new</code> will open the link in a new window or tab.<br />
<br />
<br />
<pre><code>&lt;a xlink:href= "http://example.com/link/" xlink:title="The link opens an example page in a new tab/window" '''xlink:show="new"'''&gt;<br />
&lt;text x="10" y="25" &gt;An example link.&lt;/text&gt;<br />
&lt;/a&gt;</code><br />
</pre><br />
<br />
=== Linking to a specific point in a document ===<br />
<br />
Also like HTML, it is possible to link to a specific point in a document (both in local and remote documents) by specifying an <code>id</code> on the element you want to link to and adding a fragment identifier to the link. This can be achieved in almost exactly the same way as with HTML:<br />
<br />
<br />
<pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"&gt;<br />
&lt;a '''xlink:href="http://www.someurl.com#someid"'''&gt;<br />
&lt;text x="10" y="25" &gt;An example link.&lt;/text&gt;<br />
&lt;/a&gt;<br />
&lt;/svg&gt;</code><br />
</pre><br />
<br />
You can also link to a specific part of a SVG document, using the fragment identifier combined with the <code>view</code> element. This can be useful for defining an area of the SVG file that you'd like to zoom in or out of when the user clicks on a link or a button.<br />
<br />
<br />
The fragment identifier works in exactly the same way as the example above, while the <code>view</code> element is used to specify the size of the viewport after the URL has been followed. I will show this with another example:<br />
<br />
<br />
<pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%"&gt;<br />
&lt;a xlink:href="#target"&gt;<br />
&lt;text x="10" y="25"&gt;Zoom in on shape below&lt;/text&gt;<br />
&lt;/a&gt;<br />
<br />
'''&lt;view id="target" viewBox="600 600 50 50"/&gt;<br />
&lt;rect x="600" y="600" width="50" height="50"/&gt;'''<br />
&lt;/svg&gt;</code><br />
</pre><br />
<br />
The <code>view</code> element requires at least two attributes, the <code>id</code> so that the fragment identifier can point to it, and the <code>viewBox</code>. The <code>viewBox</code> attribute sets the size of the viewport with four values, Minimum x co-ordinate, Minimum y co-ordinate, width and height. When the link is followed, the browser will set the viewport to the co-ordinates and width and height specified on the corresponding view element. Behind the scenes, the browser automatically applies transitions and scaling for you to make the content fit correctly in the <code>viewBox</code>.<br />
<br />
<br />
With the example above, you may notice that the rectangle doesn’t fill your browser window. This is because by default it preserves the aspect ratio of the elements. There is a way to define this behaviour using the <code>preserveAspectRatio</code> attribute. I will cover this in a later article, but if you just want ignore the aspect ratio, you can set the value to <code>none</code> like so:<br />
<br />
<br />
<pre><code>&lt;view id="target" viewBox="600 600 50 50" '''preserveAspectRatio="none"'''/&gt;</code><br />
</pre><br />
<br />
=== Embedding external resources in an SVG document ===<br />
<br />
As well as linking to separate documents, it is possible to embed resources such as images into an SVG document in a very similar manner, again using the XLink href attribute. Images can either be raster images such as PNGs and JPEGS, or another SVG file:<br />
<br />
<br />
<pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"&gt;<br />
'''&lt;image xlink:href="circle.png" x="10" y="25" height="100" width="100"&gt;<br />
&lt;desc&gt;A perfect circle&lt;/desc&gt;<br />
&lt;/image&gt;'''<br />
&lt;/svg&gt;</code><br />
</pre><br />
<br />
The <code>desc</code> element provides a means to provide alternative text, in the same way that the HTML <code>alt</code> attribute does. This will be useful once screen readers begin to support SVG.<br />
<br />
<br />
Try out my example.<br />
<br />
<br />
Embedding an SVG image works in exactly the same way:<br />
<br />
<br />
<pre><code>&lt;image '''xlink:href="circle.svg"''' x="10" y="25" height="100" width="100"&gt;<br />
&lt;desc&gt;A perfect circle&lt;/desc&gt;<br />
&lt;/image&gt;</code><br />
</pre><br />
<br />
Note: The XLink <code>show</code> attribute is used with a value of <code>embed</code> to include resources in the document, but as this is the default (and only) value allowed for the <code>show</code> attribute on the <code>image</code> element, it can be omitted.<br />
<br />
<br />
Fragments of SVG can be embedded in the document using the <code>use</code> element - this includes SVG from external SVG files, and fragments that have already appeared in the same document. This allows SVG elements to be defined once and reused many times, and will be the subject of an additional article on reusable SVG, to be published in the future on dev.opera.com.<br />
<br />
<br />
SVG Tiny 1.2 and above allow for embedding of audio and video, but this is not widely implemented. At the time of writing this only works in a .<br />
<br />
<br />
=== Linking multiple elements ===<br />
<br />
In HTML 4.01 and XHTML 1.0/1.1, the <code>a</code> element is inline and thus can not legally contain block level child elements. If you want to for example make an image and adjacent text into the same link, you have to specify additional <code>a</code> elements with the same <code>href</code> value. There is no such restriction with SVG - it is perfectly valid to do the following:<br />
<br />
<br />
<pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"&gt;<br />
&lt;defs&gt;<br />
&lt;linearGradient id="badgeGradient"&gt;<br />
&lt;stop offset="0"/&gt;<br />
&lt;stop offset="1"/&gt;<br />
&lt;/linearGradient&gt;<br />
&lt;/defs&gt;<br />
<br />
&lt;g id="heading"&gt;<br />
'''&lt;a xlink:href= "http://www.opera.com/"&gt;<br />
&lt;path id="badge" d="M 29.6,22.8 C 29.2,23.4 24.3,22.4 23.8,22.9 C 23.4,23.3 24.3,28.3 23.8,28.6 C 23.2,28.9 19.4,25.6 18.8,25.8 C 18.2,26.0 16.5,30.7 15.8,30.7 C 15.2,30.7 13.5,26.0 12.9,25.8 C 12.3,25.6 8.5,28.9 7.9,28.6 C 7.4,28.3 8.3,23.3 7.9,22.9 C 7.4,22.4 2.4,23.4 2.1,22.8 C 1.8,22.3 5.1,18.4 4.9,17.8 C 4.8,17.2 0.0,15.5 0.0,14.9 C 0.0,14.3 4.8,12.6 4.9,12.0 C 5.1,11.4 1.8,7.5 2.1,7.0 C 2.4,6.4 7.4,7.3 7.9,6.9 C 8.3,6.5 7.4,1.5 7.9,1.2 C 8.5,0.9 12.3,4.1 12.9,4.0 C 13.5,3.8 15.2,-0.8 15.8,-0.8 C 16.5,-0.8 18.2,3.8 18.8,4.0 C 19.4,4.1 23.2,0.9 23.8,1.2 C 24.3,1.5 23.4,6.5 23.8,6.9 C 24.3,7.3 29.2,6.4 29.6,7.0 C 29.9,7.5 26.6,11.4 26.8,12.0 C 26.9,12.6 31.7,14.3 31.7,14.9 C 31.7,15.5 26.9,17.2 26.8,17.8 C 26.6,18.4 29.9,22.3 29.6,22.8 z"/&gt; <br />
&lt;text id="label" x="5" y="20" transform = "rotate(-15 10 10)"&gt;New&lt;/text&gt;<br />
&lt;text id="title" x="40" y="20"&gt;Opera Browser&lt;/text&gt;<br />
&lt;/a&gt;'''<br />
&lt;/g&gt;<br />
<br />
&lt;/svg&gt;</code><br />
</pre><br />
<br />
Try it out by viewing my example.<br />
<br />
<br />
== Summary ==<br />
<br />
After reading this article you should be able to link to documents and resources in SVG using XLink simple links. We have covered the basics or creating a link in SVG using the <code>a</code> element, adding additional information using the XLink <code>title</code> attribute, using fragment identifiers to point to a specific part of a document, and how to embed images in a SVG document using the <code>image</code> element. We have also covered a slightly more complex example, using multiple elements, that can all point to the same destination using one <code>a</code> element.</div>Cmillshttps://www.w3.org/wiki/index.php?title=WSC_proposed_updates&diff=54318WSC proposed updates2011-10-06T11:38:39Z<p>Cmills: /* = SVG article drafts we could use */</p>
<hr />
<div> <br />
= Web standards curriculum on W3C Wiki: plan for updates 2011 =<br />
<br />
== The beginning ==<br />
<br />
[[Introduction to the Web Standards Curriculum]] by Chris Mills. '''{ -- JUST NEEDS A GENERAL READ, AND A LITTLE BIT OF TWEAKING}'''<br />
<br />
== Introduction to the world of web standards ==<br />
<br />
# [[The history of the Web|The history of the Internet and the web, and the evolution of web standards]], by Mark Norman Francis. { -- NEEDS A GENERAL READ, PLUS I THINK IT COULD BENEFIT FROM A BIT MORE HISTORY BEING ADDED ABOUT THE EVOLUTION OF HTML5 AND CSS3}<br />
# [[How does the Internet work]]? by Jonathan Lane. {-- NO TWEAKING NEEDED; JUST SPIT AND POLISH}<br />
# [[The web standards model - HTML CSS and JavaScript]] by Jonathan Lane. { -- A FEW TWEAKS NEEDED - THE HTML SECTION COULD DO WITH AN OVERHAUL TO CCOUNT FOR HTML5, AND DEAL WITH XHTML A BIT BETTER}<br />
# [[Beautiful dream, but what's the reality]]? by Jonathan Lane. { -- I THINK THIS ARTICLE COULD JUST BE REMOVED, AND A SMALL SECTION ADDED TO THE PREVIOUS ARTICLE TO COVER "THE REALITY OF IT ALL". AS IT STANDS, THIS ARTICLE IS A BIT OF A RANT, AND NOT REALLY THAT USEFUL TO EDUCATION}<br />
<br />
== Web Design Concepts ==<br />
<br />
This section won't go into any code or markup details, and will act as an introduction to the design process before you start to create any graphics or code, as well as concepts of web design such as IA, navigation, usability etc.<br />
<br />
# [http://www.w3.org/wiki/Information_Architecture_-_planning_out_a_web_site Information Architecture - planning out a web site], by Jonathan Lane.<br />
# [http://www.w3.org/wiki/What_does_a_good_web_page_need What does a good web page need?], by Mark Norman Francis.<br />
# [http://www.w3.org/wiki/Colour_theory Colour Theory], by Linda Goin.<br />
# [http://www.w3.org/wiki/Building_up_a_site_wireframe Building up a site wireframe], by Linda Goin.<br />
# [http://www.w3.org/wiki/Colour_schemes_and_design_mockups Colour schemes and design mockups], by Linda Goin. <br />
# [http://www.w3.org/wiki/Typography_on_the_Web Typography on the web], by Paul Haine.<br />
<br />
{ -- I THINK THIS WHOLE SECTION NEEDS AN OVERHAUL, AS CURRENTLY IT IS NOT VERY EFFECTIVE. THE TYPOGRAPHY AND IA SECTIONS ARE FINE, BUT I'M NOT SURE ABOUT THE OTHER STUFF. I THINK THE SECTION SHOULD BE RETITLED "PLANNING A WEB SITE", AND HAVE A STRUCTURE SOMETHING LIKE THE FOLLOWING: <br />
<br />
=== Planned New section to replace "Web Design Concepts" - to be called "Planning a web site" ===<br />
<br />
# [[Introduction to planning a web site]]<br />
# Scoping and user research<br />
# [[Information_Architecture_-_planning_out_a_web_site|Information Architecture - planning out a web site]]. [http://dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud1/index.html Spanish translation]<br />
# [[What_does_a_good_web_page_need|What does a good web page need?]] [http://dev.opera.com/articles/view/7-mi-kell-egy-jo-weblaphoz/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud2/index.html Spanish translation]<br />
# [[Typography on the Web]]. [http://dev.opera.com/articles/view/11-tipografia-a-weben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud6/index.html Spanish translation]<br />
# Colour schemes and deasign theory<br />
# Mockups and protptypes<br />
# User experience design<br />
<br />
== HTML basics ==<br />
<br />
# [http://www.w3.org/wiki/The_basics_of_HTML The basics of HTML], by Mark Norman Francis. { -- THIS LOOKS OK, ALTHOUGH I THINK IT NEEDS A BIT OF UPDATING TO ACCOUNT FOR HTML5, THE HISTORY SECTION, ETC. THE EXAMPLES SHOULD ALSO BE UPDATED TO HTML5 SEMANTICS, WHERE APPROPRIATE, EG NO MORE DIVS FOR PAGE SECTIONS}<br />
# [http://www.w3.org/wiki/The_HTML_head_element The HTML &lt;head&gt; element], by Christian Heilmann. { -- NEEDS UPDATING, AND HTML5 FEATURES ADDING, SUCH AS META CHARSET} <br />
# [http://www.w3.org/wiki/Choosing_the_right_doctype_for_your_HTML_documents Choosing the right doctype for your HTML documents], by Roger Johansson. { -- I THINK THAT THIS NEEDS TO BE REWRITTEN TO FOCUS LESS ON DOCTYPES, AND MORE ON HTML/XHTML RULES, HOW THEY DIFFER, WHAT DOCTYPES REALLY ACHIEVED, WHAT ONES YOU MIGHT ENCOUNTER IN THE WILD, WHY WE WILL BE USING HTML5 DOCTYPE IN THIS COURSE, WHAT IT ACHIEVES, ETC.}<br />
<br />
== The HTML body ==<br />
<br />
{ -- OVERALL THIS IS A REASONABLE SECTION, BUT QUITE A LOT NEEDS ADDING TO BRING IT UP TO DATE WITH HTML5, ETC. I WILL CLEARLY MARK NEW ARTICLES}<br />
<br />
# NEW ARTICLE - structural elements, section, article, etc. also including div and span<br />
# [http://www.w3.org/wiki/Marking_up_textual_content_in_HTML Marking up textual content in HTML], by Mark Norman Francis. { -- NEEDS UPDATING, AS SOME OF THESE ELEMENTS WILL HAVE CHANGED FUNCTION IN HTML5, AND DEPRECATED ELEMENTS HAVE BEEN REPURPOSED}<br />
# [http://www.w3.org/wiki/HTML_lists HTML Lists], by Ben Buchanan. { -- DOESN'T NEED MANY UPDATES}<br />
# [http://www.w3.org/wiki/Images_in_HTML Images in HTML], by Christian Heilmann. { -- NEEDS A BIT OF SPIT AND POLISH, AND NEEDS FIGURE AND FIGCAPTION ADDING}<br />
# [http://www.w3.org/wiki/HTML_links_-_lets_build_a_web HTML links — let's build a web!] by Christian Heilmann. { -- NEEDS SPIT AND POLISH, AND NEEDS THE CONCEPT OF BLOCK LEVEL LINKS ADDING}<br />
# NEW ARTICLE - HTML5 video and audio<br />
# [http://www.w3.org/wiki/HTML_tables HTML Tables], by Jen Hanen. { -- NOT MANY UPDATES NEEDED}<br />
# [http://www.w3.org/wiki/HTML_forms_-_the_basics HTML Forms — the basics], by Jen Hanen. { -- THERE IS A LOT OF NEW HTML5 FORM STUFF TO ADD, OBVIOUSLY - I THINK THAT IN THIS CIRCUMSTANCE, BECAUSE SUPPORT FOR HTML5 FORM STUFF IS PATCHY ACROSS BROWSERS RIGHT NOW, WE SHOULD DO SMALL UPDATES ON THE EXISTING ARTICLE, THEN ADD ONE OR MORE SEPARATE ARTICLES TO COVER THE NEW HTML5 FORM ELEMENTS AND NEW ATTRIBUTES, AND THEN PERHAPS SEPARATE COVERAGE OF VALIDATION}<br />
# [http://www.w3.org/wiki/Lesser_-_known_semantic_elements Lesser-known semantic elements], by Mark Norman Francis. {THIS WILL NEED UPDATING, AS A NUMBER OF THESE ELEMENTS HAVE BEEN REDEFINED}<br />
# [http://www.w3.org/wiki/Generic_containers_-_the_div_and_span_elements Generic containers — the div and span elements], by Mark Norman Francis. { -- REMOVE THIS ONE - THIS WILL BE COVERED IN THE STRUCTURAL ELEMENTS ARTICLE}<br />
# [http://www.w3.org/wiki/Creating_multiple_pages_with_navigation_menus Creating multiple pages with navigation menus], by Christian Heilmann.<br />
# [http://www.w3.org/wiki/Validating_your_HTML Validating your HTML], by Mark Norman Francis. { -- I THINK THIS COULD BE REWRITTEN AND IMPROVED, AND RELOCATED TO A SECTION ABOUT DEBUGGING WEB PAGES? A MORE COMPLETE TREATMENT WOULD BE NICE}<br />
<br />
== Accessibility specifics ==<br />
<br />
# [http://www.w3.org/wiki/Accessibility_basics Accessibility basics], by Tom Hughes-Croucher.<br />
# [http://www.w3.org/wiki/Accessibility_testing Accessibility testing], by Benjamin Hawkes-Lewis.<br />
<br />
I THINK THIS NEEDS TO BE EXPANDED OUT TO SEVERAL ARTICLES, TO COVER DIFFERENT ASPECTS, SOMETHING LIKE:<br />
<br />
# WRITING A PLAN FOR A11Y TESTING, INCLUDING USE OF REAL USER TESTING, CONFORMANCE CRITERIA, AUTOMATED TOOLS, AND GOOD OLD COMMON SENSE<br />
# THE LEGAL SIDE OF THINGS, EXPLAINED IN DETAIL<br />
# DECIPHERING WCAG, AND OTHER CONFORMANCE CRITERIA SUCH AS SECTION 508<br />
# ACCESSIBILITY TOOLS, WHAT TO USE AND WHAT TO AVOID. HOW FAR WILL THESE GET YOU?<br />
# REAL A11Y TESTING WITH REAL PEOPLE, HOW TO PUT TOGETHER FOCUS GROUPS, WHAT TO LOOK FOR HERE<br />
# COMMON SENSE - SOLUTIONS FOR COMMON ACCESSIBILITY ISSUES - A ROADMAP FOR FIXING ISSUES. START WITH SEMANTIC HTML, THEN GO TO VIDEO AND AUDIO CONTENT, JAVASCRIPT, AJAX, ALTERNATIVES. }<br />
<br />
== CSS ==<br />
<br />
# [http://dev.opera.com/articles/view/27-css-basics/ CSS basics], by Christian Heilmann. { -- NEEDS A BIT OF SPRUCING UP, TO TALK ABOUT NEW STUFF, PLUS WE NEED TO ADD SOME STUFF ABOUT ALL THE NEW CSS SELECTORS. OF DO WE? MAYBE WE COULD JUST COVER THE BASIC SELECTORS HERE, AND THEN COVER SOME OF THE MORE ADVANCED ONES IN APPROPRIATE PLACES, EG FORM RELATED ONES, AND OTHER ADVANCED ONES IN AN ARTICLE OF THEIR OWN - SEE NEXT ARTICLE}<br />
# NEW ARTICLE - ADVANCED SELECTORS - cover all the advanced selectors that we didn't cover in the previous chapter - last nth of type, valid, invalid, nth child, etc. <br />
# NEW CHAPTER - CSS3 SHADOWS<br />
# [http://www.w3.org/wiki/Inheritance_and_cascade Inheritance and Cascade], by Tommy Olsson. { -- NOT MUCH TO UPDATE HERE}<br />
# [http://www.w3.org/wiki/Text_styling_with_CSS Text styling with CSS], by Ben Henick. { -- THIS IS A VERY WEIGHTY CHAPTER, AND COULD DO WITH SLIMMING DOWN A BIT, AND MAKING MORE GRANULAR, PERHAPS EVEN SPLITTING IT. ALSO ADD WEB FONTS, AND TALK ABOUT SOME OF THE MORE OBSCURE TEXT STYLING STUFF, LIKE TEXT-OVERFLOW, GENERATED CONTENT FOR QUOTES, WORD WRAP, ETC.}<br />
# [http://www.w3.org/wiki/The_CSS_layout_model_-_boxes_borders_margins_padding The CSS layout model - boxes, borders, margins, padding], by Ben Henick. { -- AGAIN, MIGHT NEED SPLITTING, NEED TO COVER DIFFERENT LAYOUT MODELS, BORDER-RADIUS ETC.}<br />
# [http://www.w3.org/wiki/CSS_background_images CSS background images], by Nicole Sullivan. { -- NEED TO UPDATE TO COVER MULTIPLE BACKGROUND IMAGES, BORDER-IMAGE, LINEAR GRADIENTS, MIGHT NEED MULTIPLE CHAPTERS}<br />
# [http://www.w3.org/wiki/Styling_lists_and_links Styling lists and links], by Ben Buchanan. { -- DOESN'T NEED THAT MUCH }<br />
# [http://www.w3.org/wiki/Styling_tables Styling tables], by Ben Buchanan. { -- DOESN'T NEED THAT MUCH }<br />
# [http://www.w3.org/wiki/Styling_forms Styling forms], by Ben Henick. { -- NEED TO ADD CSS3 FORM-RELATED PSEUDO CLASSES, AND DISCUSSION OF STYLING ERRORS AND STUFF}<br />
# [http://www.w3.org/wiki/Floats_and_clearing Floats and clearing], by Tommy Olsson. { - NOT THAT MUCH NEEDED, ALTHOUGH I NEED TO BE CAREFUL TO SEPARATE OUT MULTIPLE COLUMN LAYOUTS, AND COVER MULTI-COL THERE}<br />
# [http://www.w3.org/wiki/CSS_static_and_relative_positioning CSS static and relative positioning], by Tommy Olsson.<br />
# [http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning CSS absolute and fixed positioning], by Tommy Olsson. { -- THE POSITIONING CHAPTERS NEED SOME WORK, BUT NOT THAT MUCH}<br />
# NEW CHAPTER - CSS3 TRANSFORMS<br />
# NEW CHAPTER - CSS3 TRANSITIONS<br />
# NEW CHAPTER - CSS3 ANIMATIONS<br />
# NEW CHAPTER - ADAPTIVE WEB DESIGN FOR MOBILE - MEDIA QUERIES, VIEWPORT.<br />
# NEW CHAPTER - OBJECT FIT/OBJECT POSITION<br />
<br />
== Advanced CSS study ==<br />
<br />
# [http://www.w3.org/wiki/Headers_footers_columns_and_templates Headers, footers, columns, and templates], by Ben Henick { -- NOT SURE HOW USEFUL THIS IS, MAYBE DISSECT IT, PUT THE USEFUL STUFF IN OTHER CHAPTERS. A BIT TOO LONG WINDED. }<br />
<br />
== JavaScript ==<br />
<br />
# [http://www.w3.org/wiki/Programming_-_the_real_basics Programming - the real basics!], by Christian Heilmann<br />
# [http://www.w3.org/wiki/What_can_you_do_with_JavaScript What can you do with JavaScript?], by Christian Heilmann<br />
# [http://www.w3.org/wiki/Your_first_look_at_JavaScript Your first look at JavaScript], by Christian Heilmann<br />
# [http://www.w3.org/wiki/JavaScript_best_practices JavaScript best practices], by Christian Heilmann<br />
# [http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript The principles of unobtrusive JavaScript], by PPK<br />
# [http://www.w3.org/wiki/JavaScript_functions JavaScript functions], by Mike West<br />
# [http://www.w3.org/wiki/Objects_in_JavaScript Objects in JavaScript], by Mike West<br />
# [http://www.w3.org/wiki/Traversing_the_DOM Traversing the DOM], by Mike West<br />
# [http://www.w3.org/wiki/Creating_and_modifying_HTML Creating and modifying HTML], by Stuart Langridge<br />
# [http://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript Dynamic style - manipulating CSS with JavaScript], by Greg Schechter<br />
# [http://www.w3.org/wiki/Handling_events_with_JavaScript Handling events with JavaScript], by Robert Nyman<br />
# [http://www.w3.org/wiki/JavaScript_animation JavaScript animation], by Stuart Langridge<br />
# [http://www.w3.org/wiki/Graceful_degredation_versus_progressive_enhancement Graceful degredation versus progressive enhancement], by Christian Heilmann<br />
<br />
== HTML5 APIS ==<br />
<br />
PROBABLY NEED TO INTERSPERSE THESE IN THE ABOVE SECTION, OR PUT NEW SECTIONS IN, EG "OFFLINE WEB APPLICATIONS" WOULD WORK WELL AS A DISTINCT SECTION.<br />
<br />
# MEDIA API<br />
# GEOLOCATION (YEAH, NOT HTML5, BUT HEY)<br />
# WEB WORKERS<br />
# WEB SOCKETS<br />
# APPCACHE<br />
# WEBSQL/INDEXEDDB<br />
# WEB STORAGE<br />
# CANVAS (SHOULD PROBABLY HAVE ITS OWN SECTION ENTIRELY)<br />
# HTML5 HISTORY API<br />
# DATASETS<br />
<br />
== OTHER THINGS TO COVER ==<br />
<br />
# SVG (REALLY NEEDS ITS OWN COURSE, See the following proposal)<br />
# WAI-ARIA<br />
<br />
=== SVG ===<br />
<br />
Source of inspiration :<br />
<br />
* http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html<br />
* https://developer.mozilla.org/en/SVG/Tutorial<br />
<br />
==== SVG BASICS ====<br />
<br />
# ''History and usage'' : As for HTML, it could be good to start by giving some context: What is it, Where does it come, What is it made for, How is it different than HTML?<br />
# ''Syntax and deployment'' : This part would introduce the basic syntax, the concept of viewport and absolute positioning and finally how to embed an SVG document inside other language (basically HTML and CSS)<br />
# ''Basic shapes'' : This part will be dedicated to the basic shapes available in SVG<br />
# ''Position and transformation'' : To go deeper inside the viewport thing and to explain the role of the transformations.<br />
# ''Using text in SVG''<br />
# ''Styling SVG'' : This is where we would detailed how to use presentation attributes and their CSS counterpart.<br />
# ''Scripting SVG'' : Where we could introduce the SVG DOM API.<br />
<br />
==== Part 2 : SVG ADVANCED ====<br />
<br />
# ''How to build Pathes'' : To dig into the syntax of the d attribute on path elements<br />
# ''Animating the web with SVG Animations'' : How to use SVG Animations<br />
# ''SVG Filters'' : This would be an introduction to filters but each filters could have it's own article (Filters a really hard things)<br />
# ''Clipping and Masking''<br />
# ''Patterns''<br />
# ''Gradients''<br />
# ''Dealing with the external'' : This part would be dedicated to the foreignObject element but also to links and images elements.<br />
<br />
=== SVG article drafts we could use ===<br />
<br />
# [[SVG Primer]] (written by David Storey, but unused)<br />
# [[SVG Links]] (written by David Storey, but unused)<br />
<br />
== Mobile web development - proposed new structure ==<br />
<br />
=== The basics ===<br />
<br />
# [[Mobile beginnings: An introduction to the mobile web]] (include history of mobiles, how mobile networks work, what the hardware looks like, what the software looks like)<br />
# [[What do the devices look like?]] (a fairly detailed reference showing the types of devices you are likely to need to support when building cross device adaptive apps)<br />
# [[Mobile constraints and advantages]] (what are the constraints you need to work around for alternative browsing devices? What are the advantages, eg the context specific technologies you can take advantage of?)<br />
<br />
=== Adaptive design and development ===<br />
<br />
# [[Mobile friendly: an introduction to mobile web design]] (start with a basis of semantic HTML, accessibility best practices are Making an app or site mobile friendly - do you create a different site, or do you adapt your existing site for mobile? A brief introduction to Adaptive design - graceful degradation, progressive enhancement, using media queries and viewport to adapt layout, using feature detection to server appropriate content and services, NOT browser sniffing!)<br />
# [[Designing a mobile user experience]] (all about context, what does the user want to do in this context, how does it differ from the desktop, etc.?)<br />
# [[Optimising CSS and JavaScript for mobile]]<br />
# [[Media Queries]]<br />
# [[Viewport]]<br />
# [[Adaptive layouts for mobile]] (apply the basics you learned in the last two)<br />
# [[Device aware apps]] (Geolocation, etc.)<br />
# [[Multimedia on mobile]] (dealing with images, video, audio)<br />
# [[Offline apps for mobile]] (web storage, AppCache, WebSQL)<br />
# [[Putting together a mobile testing suite]]<br />
<br />
== Supplementary articles ==<br />
<br />
* [http://www.w3.org/wiki/Getting_your_content_online Getting your content online], by Craig Grannell. { -- DOESN'T NEED CHANGES }<br />
* [http://www.w3.org/wiki/More_about_the_document_head More about the document &lt;head&gt;], by Chris Heilmann. { -- PROBABLY DOESN'T NEED CHANGES, ALTHOUGH IT WOULD BE NICE TO MOVE IT INTO THE MAIN HTML SECTION, AS IT GETS LOST OUT HERE }<br />
* [http://www.w3.org/wiki/Common_HTML_entities_used_for_typography Common HTML entities used for typography], by Ben Henick. { -- DOESN'T NEED MANY CHANGES }<br />
* [http://www.w3.org/wiki/The_web_standards_curriculum_glossary The Opera Web Standards Curriculum glossary], by various authors. This is incomplete, and will be added to as time goes by. { -- NEEDS A LOT OF TERMS ADDING, IF IT IS TO BE USEFUL }<br />
<br />
== Deprecated articles: removeed from original WSC ==<br />
<br />
* [[Choosing the right doctype for your HTML documents]]. [http://dev.opera.com/articles/view/14-megfelelo-doctype-valasztasa/ Hungarian translation] | [http://dev.opera.com/articles/view/14-choosing-the-right-doctype-for-your-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m3/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m3/ud3/index.html Spanish translation]<br />
* [[Generic containers - the div and span elements]]. [http://dev.opera.com/articles/view/22-altalanos-tarolok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud8/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud8/index.html Spanish translation]<br />
<br />
<br />
[[Category:WSC]]</div>Cmillshttps://www.w3.org/wiki/index.php?title=SVG_Primer&diff=54317SVG Primer2011-10-06T11:37:37Z<p>Cmills: </p>
<hr />
<div>==SVG Primer: Basic shapes and effects==<br />
<br />
=== Introduction ===<br />
<br />
SVG is a technology that has been on the cusp of greatness for a long time now. With browser support improving, and three of the big four browser engines already incorporating <a href="http://www.codedread.com/svg-support.php">solid support for SVG</a>, it is an ideal time to start looking into what the technology offers. This first article will get you comfortable with the basics, so that you are ready to dig deeper and explore SVG further. Even these baby steps will produce results that can be incorporated straight into your progressively enhanced designs. The latest W3C candidate recommendation is SVG 1.1, so this is the version I will follow. SVG Tiny 1.2 is in working draft at the time of writing, and is partially supported by Opera 9.5 and above.<br />
<br />
=== SVG overview ===<br />
<br />
Since very early on, the web has been primarily made up of text and images, and more recently video and audio have also started to make a regular appearance. SVG is primarily an image format, but can incorporate all these things. Unlike image formats you may be more familiar with such as PNG or JPEG (raster image formats), SVG is a vector format. In this respect it is related to similar technologies such as Adobe Flash and Microsoft Silverlight. SVG however is an open format, based on XML, which is not controlled by one corporation. <br />
<br />
The big advantage of vector graphic formats over raster formats is that they are maths based instead of pixel based, meaning that rather than having to store information about each individual pixel in the image, mathematical equations are used to calculate their position and other attributes. This means that they are fully scaleable - unlike a raster image, a SVG file will not turn pixelated when zooming in on the image, in a similar fashion to how text doesn't pixelate when you make it larger using the zoom feature of your browser, or increasing the text size. You can imagine how SVG will benefit the quality of a page design now that zooming is becoming increasingly common due to the take off of the web on alternative devices. Opera Mini 4 and The Wii Internet Channel are two examples of browsers that make heavy use of zooming. <br />
<br />
This sounds ideal, but remember that not all images are suitable for vector graphics. While illustrations are a perfect use case for SVG, photographs and (non-cartoon) movies are much better suited to the typical raster formats (eg Bitmap and JPEG.)<br />
<br />
One key advantage of SVG is that it plays well with other Open Web standards. You can style it with CSS, add behavior using JavaScript and the DOM, pull in data using XHR, include it within XHTML documents, link to it from HTML and CSS, and so on. This allows you to use knowledge you have already learned, and incorporate it into existing sites.<br />
<br />
Another advantage of SVG is that, due to it being based on XML, an image can be created using nothing but a text editor. This is perfectly reasonable for the basic images we will be creating here, but as images get more complex it is more likely that you’ll want to use an authoring tool – unless you are a super-hero. Fortunately if your drawing application of choice is Adobe Illustrator, then you are in luck. You can just export your creation as an SVG file. Otherwise Inkscape is a good free application that uses SVG as its native format. You may ask why you should learn SVG if your application of choice supports exporting automatically? Just like web authoring tools don’t create great HTML and CSS, the same is true of SVG. Having knowledge of SVG will allow you to optimise those images, and will help a great deal if you want to use scripting to alter or animate SVG files. It may also be faster to makes changes to a file, or create a simple shape by hand. <br />
<br />
=== Incorporating SVG in your site or application ===<br />
<br />
There are a number of ways you can incorporate SVG into your site or application. You can create a SVG file, with the .svg file extension and just link to it like you would with any other document. If you would like to incorporate it as an element of an existing page, there are a few options; referencing the URI of the SVG from the <code>img</code> (Opera or WebKit only) or <code>object</code> elements, from CSS via the <code>background-image</code> or <code>list-style-image</code> properties (Opera only), or creating a compound document that mixes SVG with other markup languages such as XHTML and MathML. Using this last method requires that XHTML is used and served as XML. It will not work with documents served as HTML. The HTML5 Working Group are working to specify how SVG can be using within a HTML document served as text/html.<br />
<br />
I can include a SVG image with the <code>img</code> element, as I would with any other image format:<br />
<br />
<pre>&lt;img src="my-svg-image.svg" width="200" height="400" alt="A beautiful SVG image" /&gt;</pre><br />
<br />
Similarly, I can include my SVG image as a background in CSS in the same way as I normally would for any other image format:<br />
<br />
<pre>div.header { background-image: url("my-svg-image.svg"); }</pre><br />
<br />
The SVG file will scale with the size of the element if it doesn’t specify absolute units; more on that later in the article.<br />
<br />
=== Creating a basic skeleton ===<br />
<br />
In this section I will walk you through creating a basic SVG template, a process that will be simple for anyone familiar with XML or XHTML. The complete example files for this article can be downloaded here (PROVIDE FILES, INSERT ANCHOR)<br />
<br />
# Open up a text editor, create a new file, and on the first line add an XML declaration - this lets the SVG viewer know what version of XML is being used, and the document encoding:<br />
<br />
<pre>&lt;?xml version="1.0" encoding="UTF-8"?&gt;</pre><br />
<br />
This is often omitted in XHTML files due to it sending IE6 and below into quirks mode, but as IE6 doesn’t support SVG, this is of no concern to us.<br />
<br />
# Below the XML declaration, add the SVG DOCTYPE, as follows: <br />
<br />
<pre> &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" <br />
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;</pre><br />
<br />
# To complete the skeleton, the root element has to be specified - just like the root element is html in HTML, in SVG it is svg:<br />
<br />
<pre>&lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg"&gt;<br />
&lt;/svg&gt;</pre><br />
<br />
Just like in HTML, the contents of the file are included between the opening and closing tags.<br />
<br />
=== A note about document sizes ===<br />
<br />
In the example above the image will take up 100% of the available height and width by default. This will be the full browser window if it is a standalone file; if it is a CSS background image then it will be the size of the element that references it. If you don't want to go with these defaults, then you can specify your own image dimensions using the svg element's height and width attributes. A suitable unit should be used with the value, for example:<br />
<br />
<pre>&lt;svg version="1.1" width="50%" height="50%" xmlns="http://www.w3.org/2000/svg"&gt;</pre><br />
<br />
=== Creating a simple rectangle ===<br />
<br />
One of the most basic shapes in SVG is the humble rectangle. You’ll most likely use these a lot in SVG, especially when referencing SVG via CSS. A rectangle (or square) is specified using the <code>rect</code> element. We’ll step through how to create this shape:<br />
<br />
# Open up the SVG template in your text editor of choice and rename it as <q>rectangle.svg</q>. <br />
# Between the SVG tags add the <code>rect</code> element as follows: &lt;rect /&gt; <br />
# Now the rectangle has to be placed on the canvas, in the required position. The co-ordinates of the upper left hand corner of the shape are specified using the <code>x<code> and <code>y</code> attributes:&lt;rect x="0" y="0"/&gt;<br />
<br />
The width is specified using the <code>width</code> attribute, and the height is specified with (you guessed it) the <code>height</code> attribute:<br />
<br />
<pre>&lt;rect x="0" y="0" height="100%" width="100%"/&gt;</pre><br />
<br />
The rectangle above will be drawn at the top left of the image, and cover the full width and height. It is possible to use any unit that is available to CSS2.1 (such as mm, cm, px, %, em etc.). If there are no units defined, such as with the x and y attributes above, the initial co-ordinates system is used. Co-ordinates handily map to 1 pixel per coordinate, but can be remapped using transforms, which I wont get into in this article. Although the rectangle covers the entire image, you will not currently be able to see anything, as the rectangle needs to be styled - no presentational data has yet been defined, eg color, stroke width, etc. This can be done using CSS (both inline with the style attribute, in a style element or in an external file) or using presentational attributes. I’ll use CSS throughout the examples, but the choice is up to you. As SVG is a presentational language it is not a big no-no to apply style directly to the elements instead of using CSS files. Using external files does however have the same advantages as it does with normal HTML - it can reduce file sizes when the same styles are used regularly, and can ease maintenance and reusability. <br />
<br />
To style the rectangle we can add a reference to the external CSS file before the root element, using the following processing instruction:<br />
<br />
<pre>&lt;?xml-stylesheet href="rectangle-style.css" type="text/css"?&gt;</pre><br />
<br />
In the CSS file, SVG specific CSS properties can then be added. The fill property is similar to background-color, and supports the same colour values as specified in CSS2.1, with the addition of the SVG colour keywords (as also included in the CSS3 colour module). The stroke property sets the colour of the shape outline, not too unlike border-color, and stroke-width sets the thickness of the outline, similar to border-width. Additional properties will be explored later.<br />
<br />
The following CSS styles the rectangle above to have a 1px black outline (referred to as the stroke, in drawing terminology) and a grey fill:<br />
<br />
<pre>rect {<br />
fill: grey;<br />
stroke: black;<br />
stroke-width: 1px;<br />
}</pre><br />
<br />
Try creating a CSS file with the rule above, and add the processing instruction to your SVG file above the SVG element. The final file should look somewhat like the <a href="file here">SVG rectangle</a> I created earlier. While this doesn’t look like much yet, I’ll cover more useful examples after we’ve worked our way through the basic shapes.<br />
<br />
=== Circles and ellipses ===<br />
<br />
If you thought creating a rectangle was easy, circles and ellipses are also relatively straight forward. To draw a circle, create a new file and follow the steps below:<br />
<br />
Between the SVG tags, add a <code>circle</code> element:<br />
<br />
<pre>&lt;circle /&gt;</pre><br />
<br />
Now we need to place the circle on the canvas. For circles, we specify the position of the centre point of the circle, using the <code>cx</code> and <code>cy</code> attributes:<br />
<br />
<pre>&lt;circle cx="50%" cy="50%" /&gt;</pre><br />
<br />
This will place the circle at the centre of the canvas.<br />
<br />
Next, to set the size of the circle, we specify the radius using the <code>r</code> attribute:<br />
<br />
<pre>&lt;circle cx="50%" cy="50%" r="20%"/&gt;</pre><br />
<br />
As with the rectangle, we can add style using CSS:<br />
<br />
<pre>circle {<br />
fill; red;<br />
fill-opacity: 0.9;<br />
}</pre><br />
<br />
An ellipse is specified in the same way as a circle, except with the <code>ellipse</code> element, and two different attributes to specify the radius. The <code>rx</code> attribute sets the radius of the ellipse on the x-axis and the <code>ry</code> attribute sets the radius on the y-axis. The following example adapts the previous circle example, to make the shape into a ellipse:<br />
<br />
<pre>&lt;ellipse cx="50%" cy="50%" rx="20%" ry="15%"/&gt;</pre><br />
<br />
<br />
=== Draw some lines ===<br />
<br />
Next up are lines. Lines are created using the <code>line</code> element, and four attributes are used to place the line on the canvas. the <code>x1</code> and <code>y1</code> attributes are used to specify the start of the line:<br />
<br />
<pre>&lt;line x1="10%" y1="50%"/&gt;</pre><br />
<br />
The end point of the line is specified with the corresponding <code>x2</code> and <code>y2</code> attributes:<br />
<br />
<pre>&lt;line x1="10%" y1="50%" x2="90%" y2="50%"/&gt;</pre><br />
<br />
You will have noticed if you loaded the SVG file in the browser before specifying the end point of the line that it defaults to the upper left hand corner if a set of co-ordinates are not specified.<br />
<br />
As with other shapes, lines have to be styled before it can be seen. One new property that I’ll introduce is the <code>stroke-linecap</code> property. This can be used on all other shapes covered so far, and allows the end points of strokes to be styled. The three possible values are <code>butt</code> (the default), <code>round</code> which adds a rounded cap at the end of the line, and <code>flat</code>, which extends the line by the same value as the stroke width. In this example, I'll style the line with a rounded line cap:<br />
<br />
<pre>line {<br />
stroke: blue;<br />
stroke-width: 2%; <br />
stroke-linecap: round;<br />
}</pre><br />
<br />
Make any shape you please with the polygon and polyline elements<br />
<br />
With the polygon element you can create more complex enclosed shapes. Unlike the previous shapes that I've defined with percentage units, the points in a polygon have to be defined using the co-ordinate system. As previously mentioned, co-ordinates map one to one with CSS pixels. The co-ordinate model can be adjusted using the <code>viewBox</code> or <code>transform</code> attribute, but this is beyond the scope of this article. <br />
<br />
To draw a triangle (the most basic of polygons), create a new SVG file called triangle.svg and specify a polygon element:<br />
<br />
<pre>&lt;polygon points="x,y x,y x,y" /&gt;</pre><br />
<br />
The points attribute defines a space separated list of points. The x and y coordinate must be specified for each point. The polygon has to be styled like any other shape:<br />
<br />
<pre>polygon { <br />
Fill: blue;<br />
Stroke: black;<br />
Stroke-width: 3;<br />
}</pre><br />
<br />
View the finished triangle example [add e.g.].<br />
<br />
I will leave you to experiment with creating more complex shapes, such as the star I have defined below:<br />
<br />
[add star example]<br />
<br />
<br />
View star example [add start eg]<br />
<br />
The last shape I want to introduce to you is the polyline. A polyline is the same as a polygon, except the shape is open instead of closed–meaning that no line will be drawn between the last point and first points. A polyline is define exactly the same way as a polygon, except using the polyline element:<br />
<br />
<pre>&lt;polyline points="x,y x,y x,y" /&gt;</pre><br />
<br />
View polyline example (add example)<br />
<br />
All shapes in this article can be defined using the path element, which is the basic building block of SVG. The basic shapes are included in SVG to make it easier for developers to define common shapes, as path elements are not particularly easy to read or write. I'll not describe how to use the path element in this article, as it could be an entire article in itself. Most authoring tools will use the path element to define shapes, so it is useful to be aware that it exists, even if you don't need to fully understand it. For complex shapes, I usually create them in a image editor and copy/paste the shape into my hand authored SVG file.<br />
<br />
=== Create beautiful buttons using shapes, gradients and filters ===<br />
<br />
Now that you know how to draw shapes, it is time to put the knowledge to good use, with a more concrete example. I’ll walk you through an example of how to build a button, by adding gradients, shadows and text.<br />
<br />
The first step is to create a rectangle that will serve as the base of the button. As I'm building a stand alone SVG file for the purpose of the article, I specified the units in co-ordinates instead of making it 100% of the canvas. I also placed the rectangle 10 co-ordinates from the top and left of the canvas, so that it displays away from the browser chrome:<br />
<br />
<pre>&lt;rect x="10" y="10" rx="3" ry="3" height="24" width="100"/&gt;</pre><br />
<br />
You may have noticed the <code>rx</code> and <code>ry</code> attributes. These are similar to the <code>cx</code> and <code>cy</code> attributes used by the <code>circle</code> element, but are used for specifying the radius of the corners. <br />
<br />
To make the button stand out more, I used a gradient instead of a flat colour to fill the rectangle. I achieved that by adding a <code>defs</code> element as a child of the <code>svg</code> element, then specifying a <code>linearGradient</code> element with-in it. The <code>defs</code> element is a container element where all the elements are defined that are not immediately rendered. In this case we are defining a gradient that will be used later in the document by the <code>rect</code> element. The code looks like this:<br />
<br />
<pre>&lt;defs&gt;<br />
&lt;linearGradient id="button-gradient" x1="0" x2="0" y1="0" y2="1"&gt;<br />
&lt;stop offset="0%" stop-color="rgb(171,199,219)"/&gt;<br />
&lt;stop offset="100%" stop-color="rgb(117,166,200)"/&gt;<br />
&lt;/linearGradient&gt;<br />
&lt;/defs&gt;</pre><br />
<br />
You don't have to worry about how the gradient works at this early stage in your SVG education. The main things you need to be aware of is that gradients need a unique ID, and how to change the direction and colour of the gradient. The example above is a horizontal linear gradient, with the colour changing from top to bottom in a straight line. It is horizontal because the x1 and x2 values are equal, and the y1 and y2 values are different. If you want to change it to a vertical gradient set x1 and x2 to different values, and y1 and y2 to identical values. A diagonal gradient can be achieved if both x1 and x2 have different values and y1 and y2 have different values. To change the colour of the gradient you can change the values of the stop-color attributes. You can have as many stop elements as you wish, and you can change the offset attribute value to specify where the colour starts. <br />
<br />
To reference the gradient I add it as the value of the fill property (or attribute if adding directly to the element instead of via CSS):<br />
<br />
<pre>rect {<br />
fill: url(#button-gradient);<br />
}</pre> <br />
<br />
I also created a second gradient with a darker colour at the bottom of the gradient, and used it for the stroke:<br />
<br />
<pre>rect {<br />
fill: url(#button-gradient);<br />
stroke-width: 1px;<br />
stroke: url(#button-border-gradient);<br />
}</pre><br />
<br />
This gives the button a little bit of depth. For additional depth I also created a drop shadow, using a SVG filter. Again, as with the gradient, you don't need to understand exactly how it works at this stage. <br />
<br />
As many drop shadows have the same values, I often just reference the same filter over and over again in different files. You can even reference a filter (and other types of elements in the defs section) in a different file, so it is possible to define many effects once and reuse them across your entire set of SVG files.<br />
<br />
The drop shadow is defined like the following:<br />
<br />
<pre>&lt;filter id="drop-shadow" width="140%" height="140%"&gt;<br />
&lt;feOffset result="offset" in="SourceAlpha" dx="0" dy="1"/&gt;<br />
&lt;feGaussianBlur result="blurred-offset" in="offset" stdDeviation="1"/&gt;<br />
&lt;feBlend in="SourceGraphic" in2="blurred-offset" mode="normal"/&gt;<br />
&lt;/filter&gt;</pre><br />
<br />
As with the gradient, a unique ID has to be used, so that it can be referenced. The width and height also has to be bigger than the element that references the filter, so that there is room to apply the offset without it being cut off. The values that you may want to change are the dx and dy values of the feOffset element. These set how far along the x and y axis the shadow is offset. Negative values are allowed. You may also want to change the stdDeviation value of the feGaussianBlur element. The higher the value, the more blurred the shadow is. The way the filter works is that it takes the alpha channel of the element that references it, offsets the alpha channel by the amount specified, applies a gaussian blur to the result, then blends it with the original element. This is not very obvious to work our yourself, but once it is written it is easy to use.<br />
<br />
The filter is applied to the rectangle in a very similar way to the gradients, but using the <code>filter</code> property:<br />
<br />
<pre>rect {<br />
fill: url(#button-gradient);<br />
filter: url(#drop-shadow);<br />
stroke-width: 1px;<br />
stroke: url(#button-border-gradient);<br />
}</pre><br />
<br />
Now the basic button is finished, we need to add some text:<br />
<br />
<pre>&lt;text x="60" y="26"&gt;Hello&lt;/text&gt;</pre><br />
<br />
And style it:<br />
<br />
<pre>text {<br />
fill: white;<br />
fill-opacity: 0.9;<br />
font-family: "Helvetica Neue", arial, sans-serif;<br />
font-size: 14px;<br />
filter: url(#drop-shadow);<br />
text-anchor:middle;<br />
pointer-events: none;<br />
}</pre><br />
<br />
You may have noticed we applied the same drop shadow to the text, and there are two new properties we've not encountered. The <code>text-anchor</code> property changes the point that the x and y co-ordinates are anchored to. The default is the bottom left of the text, but I've changed it to the middle, so that it is easier to position in the centre of the rectangle, and easier to transform around the centre point if I wish to do so in the future. The pointer-events property was set to none to stop the text from intercepting events. If I have any events set on the rectangle, such as a click event to active the button, the text is on top of the rectangle and would stop the event from firing if I clicked on top of the text, unless pointer-events is set to none.<br />
<br />
The button is almost complete now, but I added a <code>g</code> element around both the rect and text elements for good measure. This is another container element, and is designed to group related elements. I gave it an ID of button, and added <code>role="button"</code> to help screen readers understand it is actually a button and not a random piece of text and a rectangle:<br />
<br />
<pre>&lt;g id="button" role="button"&gt;<br />
&lt;rect …/&gt;<br />
&lt;text …/&gt;<br />
&lt;/g&gt;</pre><br />
<br />
The final step was to add a cursor, to show the user the button can be clicked:<br />
<br />
<pre>g#button { cursor: pointer; }</pre><br />
<br />
<a href="http://people.opera.com/dstorey/images/button.svg">View the final button example</a><br />
<br />
While in this example, the button is a box with text, and much of it could be created with CSS 3 properties, you could make a button of any shape or size. As another simple example, I've created <a href="http://people.opera.com/dstorey/images/circle-button.svg">a round play button with a triangle play icon</a>. I'll not describe in detail how this was created, as it uses almost the same elements as the regular button, and just switches a rectangle for a circle and the text for a polygon.<br />
<br />
=== Using your SVG buttons via CSS ===<br />
<br />
Instead of creating standalone buttons, you can use the regular HTML button and reference the SVG file using the CSS background-image property. There are some differences you should take into account however. You will have to make the SVG file the same size as the HTML button element, so it fits correctly, or set it so that the SVG file fills 100% of the width and height of the HTML element. You will not need the SVG text as it already exists in the HTML. For buttons with icons instead of text, the best way is to specify the text in the HTML button, and hide it using generated content as in the example below, or the CSS method of your choice:<br />
<br />
<pre>input#play-button {<br />
content: "" <br />
}</pre><br />
<br />
<br />
=== Conclusion ===<br />
<br />
Conclude and say what will be covered next (whatever that may be.)</div>Cmillshttps://www.w3.org/wiki/index.php?title=SVG_Primer&diff=54316SVG Primer2011-10-06T11:33:48Z<p>Cmills: Created page with "==SVG Primer: Basic shapes and effects== === Introduction === SVG is a technology that has been on the cusp of greatness for a long time now. With browser support improving, a…"</p>
<hr />
<div>==SVG Primer: Basic shapes and effects==<br />
<br />
=== Introduction ===<br />
<br />
SVG is a technology that has been on the cusp of greatness for a long time now. With browser support improving, and three of the big four browser engines already incorporating <a href="http://www.codedread.com/svg-support.php">solid support for SVG</a>, it is an ideal time to start looking into what the technology offers. This first article will get you comfortable with the basics, so that you are ready to dig deeper and explore SVG further. Even these baby steps will produce results that can be incorporated straight into your progressively enhanced designs. The latest W3C candidate recommendation is SVG 1.1, so this is the version I will follow. SVG Tiny 1.2 is in working draft at the time of writing, and is partially supported by Opera 9.5 and above.<br />
<br />
=== SVG overview ===<br />
<br />
Since very early on, the web has been primarily made up of text and images, and more recently video and audio have also started to make a regular appearance. SVG is primarily an image format, but can incorporate all these things. Unlike image formats you may be more familiar with such as PNG or JPEG (raster image formats), SVG is a vector format. In this respect it is related to similar technologies such as Adobe Flash and Microsoft Silverlight. SVG however is an open format, based on XML, which is not controlled by one corporation. <br />
<br />
The big advantage of vector graphic formats over raster formats is that they are maths based instead of pixel based, meaning that rather than having to store information about each individual pixel in the image, mathematical equations are used to calculate their position and other attributes. This means that they are fully scaleable - unlike a raster image, a SVG file will not turn pixelated when zooming in on the image, in a similar fashion to how text doesn't pixelate when you make it larger using the zoom feature of your browser, or increasing the text size. You can imagine how SVG will benefit the quality of a page design now that zooming is becoming increasingly common due to the take off of the web on alternative devices. Opera Mini 4 and The Wii Internet Channel are two examples of browsers that make heavy use of zooming. <br />
<br />
This sounds ideal, but remember that not all images are suitable for vector graphics. While illustrations are a perfect use case for SVG, photographs and (non-cartoon) movies are much better suited to the typical raster formats (eg Bitmap and JPEG.)<br />
<br />
One key advantage of SVG is that it plays well with other Open Web standards. You can style it with CSS, add behavior using JavaScript and the DOM, pull in data using XHR, include it within XHTML documents, link to it from HTML and CSS, and so on. This allows you to use knowledge you have already learned, and incorporate it into existing sites.<br />
<br />
Another advantage of SVG is that, due to it being based on XML, an image can be created using nothing but a text editor. This is perfectly reasonable for the basic images we will be creating here, but as images get more complex it is more likely that you’ll want to use an authoring tool – unless you are a super-hero. Fortunately if your drawing application of choice is Adobe Illustrator, then you are in luck. You can just export your creation as an SVG file. Otherwise Inkscape is a good free application that uses SVG as its native format. You may ask why you should learn SVG if your application of choice supports exporting automatically? Just like web authoring tools don’t create great HTML and CSS, the same is true of SVG. Having knowledge of SVG will allow you to optimise those images, and will help a great deal if you want to use scripting to alter or animate SVG files. It may also be faster to makes changes to a file, or create a simple shape by hand. <br />
<br />
=== Incorporating SVG in your site or application ===<br />
<br />
There are a number of ways you can incorporate SVG into your site or application. You can create a SVG file, with the .svg file extension and just link to it like you would with any other document. If you would like to incorporate it as an element of an existing page, there are a few options; referencing the URI of the SVG from the <code>img</code> (Opera or WebKit only) or <code>object</code> elements, from CSS via the <code>background-image</code> or <code>list-style-image</code> properties (Opera only), or creating a compound document that mixes SVG with other markup languages such as XHTML and MathML. Using this last method requires that XHTML is used and served as XML. It will not work with documents served as HTML. The HTML5 Working Group are working to specify how SVG can be using within a HTML document served as text/html.<br />
<br />
I can include a SVG image with the <code>img</code> element, as I would with any other image format:<br />
<br />
&lt;img src="my-svg-image.svg" width="200" height="400" alt="A beautiful SVG image" /&gt;<br />
<br />
Similarly, I can include my SVG image as a background in CSS in the same way as I normally would for any other image format:<br />
<br />
div.header { background-image: url("my-svg-image.svg"); }<br />
<br />
The SVG file will scale with the size of the element if it doesn’t specify absolute units; more on that later in the article.<br />
<br />
=== Creating a basic skeleton ===<br />
<br />
In this section I will walk you through creating a basic SVG template, a process that will be simple for anyone familiar with XML or XHTML. The complete example files for this article can be downloaded here (PROVIDE FILES, INSERT ANCHOR)<br />
<br />
# Open up a text editor, create a new file, and on the first line add an XML declaration - this lets the SVG viewer know what version of XML is being used, and the document encoding:<br />
<br />
&lt;?xml version="1.0" encoding="UTF-8"?&gt;<br />
<br />
This is often omitted in XHTML files due to it sending IE6 and below into quirks mode, but as IE6 doesn’t support SVG, this is of no concern to us.<br />
<br />
# Below the XML declaration, add the SVG DOCTYPE, as follows: <br />
<br />
&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" <br />
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;<br />
<br />
# To complete the skeleton, the root element has to be specified - just like the root element is html in HTML, in SVG it is svg:<br />
<br />
&lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg"&gt;<br />
&lt;/svg&gt;<br />
<br />
Just like in HTML, the contents of the file are included between the opening and closing tags.<br />
<br />
=== A note about document sizes ===<br />
<br />
In the example above the image will take up 100% of the available height and width by default. This will be the full browser window if it is a standalone file; if it is a CSS background image then it will be the size of the element that references it. If you don't want to go with these defaults, then you can specify your own image dimensions using the svg element's height and width attributes. A suitable unit should be used with the value, for example:<br />
<br />
&lt;svg version="1.1" width="50%" height="50%" xmlns="http://www.w3.org/2000/svg"&gt;<br />
<br />
=== Creating a simple rectangle ===<br />
<br />
One of the most basic shapes in SVG is the humble rectangle. You’ll most likely use these a lot in SVG, especially when referencing SVG via CSS. A rectangle (or square) is specified using the <code>rect</code> element. We’ll step through how to create this shape:<br />
<br />
# Open up the SVG template in your text editor of choice and rename it as <q>rectangle.svg</q>. <br />
# Between the SVG tags add the <code>rect</code> element as follows: &lt;rect /&gt; <br />
# Now the rectangle has to be placed on the canvas, in the required position. The co-ordinates of the upper left hand corner of the shape are specified using the <code>x<code> and <code>y</code> attributes:&lt;rect x="0" y="0"/&gt;<br />
<br />
The width is specified using the <code>width</code> attribute, and the height is specified with (you guessed it) the <code>height</code> attribute:<br />
<br />
&lt;rect x="0" y="0" height="100%" width="100%"/&gt;<br />
<br />
The rectangle above will be drawn at the top left of the image, and cover the full width and height. It is possible to use any unit that is available to CSS2.1 (such as mm, cm, px, %, em etc.). If there are no units defined, such as with the x and y attributes above, the initial co-ordinates system is used. Co-ordinates handily map to 1 pixel per coordinate, but can be remapped using transforms, which I wont get into in this article. Although the rectangle covers the entire image, you will not currently be able to see anything, as the rectangle needs to be styled - no presentational data has yet been defined, eg color, stroke width, etc. This can be done using CSS (both inline with the style attribute, in a style element or in an external file) or using presentational attributes. I’ll use CSS throughout the examples, but the choice is up to you. As SVG is a presentational language it is not a big no-no to apply style directly to the elements instead of using CSS files. Using external files does however have the same advantages as it does with normal HTML - it can reduce file sizes when the same styles are used regularly, and can ease maintenance and reusability. <br />
<br />
To style the rectangle we can add a reference to the external CSS file before the root element, using the following processing instruction:<br />
<br />
&lt;?xml-stylesheet href="rectangle-style.css" type="text/css"?&gt;<br />
<br />
In the CSS file, SVG specific CSS properties can then be added. The fill property is similar to background-color, and supports the same colour values as specified in CSS2.1, with the addition of the SVG colour keywords (as also included in the CSS3 colour module). The stroke property sets the colour of the shape outline, not too unlike border-color, and stroke-width sets the thickness of the outline, similar to border-width. Additional properties will be explored later.<br />
<br />
The following CSS styles the rectangle above to have a 1px black outline (referred to as the stroke, in drawing terminology) and a grey fill:<br />
<br />
rect {<br />
fill: grey;<br />
stroke: black;<br />
stroke-width: 1px;<br />
}<br />
<br />
Try creating a CSS file with the rule above, and add the processing instruction to your SVG file above the SVG element. The final file should look somewhat like the <a href="file here">SVG rectangle</a> I created earlier. While this doesn’t look like much yet, I’ll cover more useful examples after we’ve worked our way through the basic shapes.<br />
<br />
=== Circles and ellipses ===<br />
<br />
If you thought creating a rectangle was easy, circles and ellipses are also relatively straight forward. To draw a circle, create a new file and follow the steps below:<br />
<br />
Between the SVG tags, add a <code>circle</code> element:<br />
<br />
&lt;circle /&gt;<br />
<br />
Now we need to place the circle on the canvas. For circles, we specify the position of the centre point of the circle, using the <code>cx</code> and <code>cy</code> attributes:<br />
<br />
&lt;circle cx="50%" cy="50%" /&gt;<br />
<br />
This will place the circle at the centre of the canvas.<br />
<br />
Next, to set the size of the circle, we specify the radius using the <code>r</code> attribute:<br />
<br />
&lt;circle cx="50%" cy="50%" r="20%"/&gt;<br />
<br />
As with the rectangle, we can add style using CSS:<br />
<br />
<pre>circle {<br />
fill; red;<br />
fill-opacity: 0.9;<br />
}</pre><br />
<br />
An ellipse is specified in the same way as a circle, except with the <code>ellipse</code> element, and two different attributes to specify the radius. The <code>rx</code> attribute sets the radius of the ellipse on the x-axis and the <code>ry</code> attribute sets the radius on the y-axis. The following example adapts the previous circle example, to make the shape into a ellipse:<br />
<br />
&lt;ellipse cx="50%" cy="50%" rx="20%" ry="15%"/&gt;<br />
<br />
<br />
=== Draw some lines ===<br />
<br />
Next up are lines. Lines are created using the <code>line</code> element, and four attributes are used to place the line on the canvas. the <code>x1</code> and <code>y1</code> attributes are used to specify the start of the line:<br />
<br />
&lt;line x1="10%" y1="50%"/&gt;<br />
<br />
The end point of the line is specified with the corresponding <code>x2</code> and <code>y2</code> attributes:<br />
<br />
&lt;line x1="10%" y1="50%" x2="90%" y2="50%"/&gt;<br />
<br />
You will have noticed if you loaded the SVG file in the browser before specifying the end point of the line that it defaults to the upper left hand corner if a set of co-ordinates are not specified.<br />
<br />
As with other shapes, lines have to be styled before it can be seen. One new property that I’ll introduce is the <code>stroke-linecap</code> property. This can be used on all other shapes covered so far, and allows the end points of strokes to be styled. The three possible values are <code>butt</code> (the default), <code>round</code> which adds a rounded cap at the end of the line, and <code>flat</code>, which extends the line by the same value as the stroke width. In this example, I'll style the line with a rounded line cap:<br />
<br />
<pre>line {<br />
stroke: blue;<br />
stroke-width: 2%; <br />
stroke-linecap: round;<br />
}</pre><br />
<br />
Make any shape you please with the polygon and polyline elements<br />
<br />
With the polygon element you can create more complex enclosed shapes. Unlike the previous shapes that I've defined with percentage units, the points in a polygon have to be defined using the co-ordinate system. As previously mentioned, co-ordinates map one to one with CSS pixels. The co-ordinate model can be adjusted using the <code>viewBox</code> or <code>transform</code> attribute, but this is beyond the scope of this article. <br />
<br />
To draw a triangle (the most basic of polygons), create a new SVG file called triangle.svg and specify a polygon element:<br />
<br />
&lt;polygon points="x,y x,y x,y" /&gt;<br />
<br />
The points attribute defines a space separated list of points. The x and y coordinate must be specified for each point. The polygon has to be styled like any other shape:<br />
<br />
<pre>polygon { <br />
Fill: blue;<br />
Stroke: black;<br />
Stroke-width: 3;<br />
}</pre><br />
<br />
View the finished triangle example [add e.g.].<br />
<br />
I will leave you to experiment with creating more complex shapes, such as the star I have defined below:<br />
<br />
[add star example]<br />
<br />
<br />
View star example [add start eg]<br />
<br />
The last shape I want to introduce to you is the polyline. A polyline is the same as a polygon, except the shape is open instead of closed–meaning that no line will be drawn between the last point and first points. A polyline is define exactly the same way as a polygon, except using the polyline element:<br />
<br />
&lt;polyline points="x,y x,y x,y" /&gt;<br />
<br />
View polyline example (add example)<br />
<br />
All shapes in this article can be defined using the path element, which is the basic building block of SVG. The basic shapes are included in SVG to make it easier for developers to define common shapes, as path elements are not particularly easy to read or write. I'll not describe how to use the path element in this article, as it could be an entire article in itself. Most authoring tools will use the path element to define shapes, so it is useful to be aware that it exists, even if you don't need to fully understand it. For complex shapes, I usually create them in a image editor and copy/paste the shape into my hand authored SVG file.<br />
<br />
=== Create beautiful buttons using shapes, gradients and filters ===<br />
<br />
Now that you know how to draw shapes, it is time to put the knowledge to good use, with a more concrete example. I’ll walk you through an example of how to build a button, by adding gradients, shadows and text.<br />
<br />
The first step is to create a rectangle that will serve as the base of the button. As I'm building a stand alone SVG file for the purpose of the article, I specified the units in co-ordinates instead of making it 100% of the canvas. I also placed the rectangle 10 co-ordinates from the top and left of the canvas, so that it displays away from the browser chrome:<br />
<br />
&lt;rect x="10" y="10" rx="3" ry="3" height="24" width="100"/&gt;<br />
<br />
You may have noticed the <code>rx</code> and <code>ry</code> attributes. These are similar to the <code>cx</code> and <code>cy</code> attributes used by the <code>circle</code> element, but are used for specifying the radius of the corners. <br />
<br />
To make the button stand out more, I used a gradient instead of a flat colour to fill the rectangle. I achieved that by adding a <code>defs</code> element as a child of the <code>svg</code> element, then specifying a <code>linearGradient</code> element with-in it. The <code>defs</code> element is a container element where all the elements are defined that are not immediately rendered. In this case we are defining a gradient that will be used later in the document by the <code>rect</code> element. The code looks like this:<br />
<br />
<pre>&lt;defs&gt;<br />
&lt;linearGradient id="button-gradient" x1="0" x2="0" y1="0" y2="1"&gt;<br />
&lt;stop offset="0%" stop-color="rgb(171,199,219)"/&gt;<br />
&lt;stop offset="100%" stop-color="rgb(117,166,200)"/&gt;<br />
&lt;/linearGradient&gt;<br />
&lt;/defs&gt;</pre><br />
<br />
You don't have to worry about how the gradient works at this early stage in your SVG education. The main things you need to be aware of is that gradients need a unique ID, and how to change the direction and colour of the gradient. The example above is a horizontal linear gradient, with the colour changing from top to bottom in a straight line. It is horizontal because the x1 and x2 values are equal, and the y1 and y2 values are different. If you want to change it to a vertical gradient set x1 and x2 to different values, and y1 and y2 to identical values. A diagonal gradient can be achieved if both x1 and x2 have different values and y1 and y2 have different values. To change the colour of the gradient you can change the values of the stop-color attributes. You can have as many stop elements as you wish, and you can change the offset attribute value to specify where the colour starts. <br />
<br />
To reference the gradient I add it as the value of the fill property (or attribute if adding directly to the element instead of via CSS):<br />
<br />
<pre>rect {<br />
fill: url(#button-gradient);<br />
}</pre> <br />
<br />
I also created a second gradient with a darker colour at the bottom of the gradient, and used it for the stroke:<br />
<br />
<pre>rect {<br />
fill: url(#button-gradient);<br />
stroke-width: 1px;<br />
stroke: url(#button-border-gradient);<br />
}</pre><br />
<br />
This gives the button a little bit of depth. For additional depth I also created a drop shadow, using a SVG filter. Again, as with the gradient, you don't need to understand exactly how it works at this stage. <br />
<br />
As many drop shadows have the same values, I often just reference the same filter over and over again in different files. You can even reference a filter (and other types of elements in the defs section) in a different file, so it is possible to define many effects once and reuse them across your entire set of SVG files.<br />
<br />
The drop shadow is defined like the following:<br />
<br />
<pre>&lt;filter id="drop-shadow" width="140%" height="140%"&gt;<br />
&lt;feOffset result="offset" in="SourceAlpha" dx="0" dy="1"/&gt;<br />
&lt;feGaussianBlur result="blurred-offset" in="offset" stdDeviation="1"/&gt;<br />
&lt;feBlend in="SourceGraphic" in2="blurred-offset" mode="normal"/&gt;<br />
&lt;/filter&gt;</pre><br />
<br />
As with the gradient, a unique ID has to be used, so that it can be referenced. The width and height also has to be bigger than the element that references the filter, so that there is room to apply the offset without it being cut off. The values that you may want to change are the dx and dy values of the feOffset element. These set how far along the x and y axis the shadow is offset. Negative values are allowed. You may also want to change the stdDeviation value of the feGaussianBlur element. The higher the value, the more blurred the shadow is. The way the filter works is that it takes the alpha channel of the element that references it, offsets the alpha channel by the amount specified, applies a gaussian blur to the result, then blends it with the original element. This is not very obvious to work our yourself, but once it is written it is easy to use.<br />
<br />
The filter is applied to the rectangle in a very similar way to the gradients, but using the <code>filter</code> property:<br />
<br />
<pre>rect {<br />
fill: url(#button-gradient);<br />
filter: url(#drop-shadow);<br />
stroke-width: 1px;<br />
stroke: url(#button-border-gradient);<br />
}</pre><br />
<br />
Now the basic button is finished, we need to add some text:<br />
<br />
<pre>&lt;text x="60" y="26"&gt;Hello&lt;/text&gt;</pre><br />
<br />
And style it:<br />
<br />
<pre>text {<br />
fill: white;<br />
fill-opacity: 0.9;<br />
font-family: "Helvetica Neue", arial, sans-serif;<br />
font-size: 14px;<br />
filter: url(#drop-shadow);<br />
text-anchor:middle;<br />
pointer-events: none;<br />
}</pre><br />
<br />
You may have noticed we applied the same drop shadow to the text, and there are two new properties we've not encountered. The <code>text-anchor</code> property changes the point that the x and y co-ordinates are anchored to. The default is the bottom left of the text, but I've changed it to the middle, so that it is easier to position in the centre of the rectangle, and easier to transform around the centre point if I wish to do so in the future. The pointer-events property was set to none to stop the text from intercepting events. If I have any events set on the rectangle, such as a click event to active the button, the text is on top of the rectangle and would stop the event from firing if I clicked on top of the text, unless pointer-events is set to none.<br />
<br />
The button is almost complete now, but I added a <code>g</code> element around both the rect and text elements for good measure. This is another container element, and is designed to group related elements. I gave it an ID of button, and added <code>role="button"</code> to help screen readers understand it is actually a button and not a random piece of text and a rectangle:<br />
<br />
<pre>&lt;g id="button" role="button"&gt;<br />
&lt;rect …/&gt;<br />
&lt;text …/&gt;<br />
&lt;/g&gt;</pre><br />
<br />
The final step was to add a cursor, to show the user the button can be clicked:<br />
<br />
g#button { cursor: pointer; }<br />
<br />
<a href="http://people.opera.com/dstorey/images/button.svg">View the final button example</a><br />
<br />
While in this example, the button is a box with text, and much of it could be created with CSS 3 properties, you could make a button of any shape or size. As another simple example, I've created <a href="http://people.opera.com/dstorey/images/circle-button.svg">a round play button with a triangle play icon</a>. I'll not describe in detail how this was created, as it uses almost the same elements as the regular button, and just switches a rectangle for a circle and the text for a polygon.<br />
<br />
Using your SVG buttons via CSS<br />
<br />
Instead of creating standalone buttons, you can use the regular HTML button and reference the SVG file using the CSS background-image property. There are some differences you should take into account however. You will have to make the SVG file the same size as the HTML button element, so it fits correctly, or set it so that the SVG file fills 100% of the width and height of the HTML element. You will not need the SVG text as it already exists in the HTML. For buttons with icons instead of text, the best way is to specify the text in the HTML button, and hide it using generated content as in the example below, or the CSS method of your choice:<br />
<br />
<pre>input#play-button {<br />
content: "" <br />
}</pre><br />
<br />
<br />
=== Conclusion ===<br />
<br />
Conclude and say what will be covered next (whatever that may be.)</div>Cmillshttps://www.w3.org/wiki/index.php?title=WSC_proposed_updates&diff=54315WSC proposed updates2011-10-06T11:21:16Z<p>Cmills: /* = SVG article drafts we could use */</p>
<hr />
<div> <br />
= Web standards curriculum on W3C Wiki: plan for updates 2011 =<br />
<br />
== The beginning ==<br />
<br />
[[Introduction to the Web Standards Curriculum]] by Chris Mills. '''{ -- JUST NEEDS A GENERAL READ, AND A LITTLE BIT OF TWEAKING}'''<br />
<br />
== Introduction to the world of web standards ==<br />
<br />
# [[The history of the Web|The history of the Internet and the web, and the evolution of web standards]], by Mark Norman Francis. { -- NEEDS A GENERAL READ, PLUS I THINK IT COULD BENEFIT FROM A BIT MORE HISTORY BEING ADDED ABOUT THE EVOLUTION OF HTML5 AND CSS3}<br />
# [[How does the Internet work]]? by Jonathan Lane. {-- NO TWEAKING NEEDED; JUST SPIT AND POLISH}<br />
# [[The web standards model - HTML CSS and JavaScript]] by Jonathan Lane. { -- A FEW TWEAKS NEEDED - THE HTML SECTION COULD DO WITH AN OVERHAUL TO CCOUNT FOR HTML5, AND DEAL WITH XHTML A BIT BETTER}<br />
# [[Beautiful dream, but what's the reality]]? by Jonathan Lane. { -- I THINK THIS ARTICLE COULD JUST BE REMOVED, AND A SMALL SECTION ADDED TO THE PREVIOUS ARTICLE TO COVER "THE REALITY OF IT ALL". AS IT STANDS, THIS ARTICLE IS A BIT OF A RANT, AND NOT REALLY THAT USEFUL TO EDUCATION}<br />
<br />
== Web Design Concepts ==<br />
<br />
This section won't go into any code or markup details, and will act as an introduction to the design process before you start to create any graphics or code, as well as concepts of web design such as IA, navigation, usability etc.<br />
<br />
# [http://www.w3.org/wiki/Information_Architecture_-_planning_out_a_web_site Information Architecture - planning out a web site], by Jonathan Lane.<br />
# [http://www.w3.org/wiki/What_does_a_good_web_page_need What does a good web page need?], by Mark Norman Francis.<br />
# [http://www.w3.org/wiki/Colour_theory Colour Theory], by Linda Goin.<br />
# [http://www.w3.org/wiki/Building_up_a_site_wireframe Building up a site wireframe], by Linda Goin.<br />
# [http://www.w3.org/wiki/Colour_schemes_and_design_mockups Colour schemes and design mockups], by Linda Goin. <br />
# [http://www.w3.org/wiki/Typography_on_the_Web Typography on the web], by Paul Haine.<br />
<br />
{ -- I THINK THIS WHOLE SECTION NEEDS AN OVERHAUL, AS CURRENTLY IT IS NOT VERY EFFECTIVE. THE TYPOGRAPHY AND IA SECTIONS ARE FINE, BUT I'M NOT SURE ABOUT THE OTHER STUFF. I THINK THE SECTION SHOULD BE RETITLED "PLANNING A WEB SITE", AND HAVE A STRUCTURE SOMETHING LIKE THE FOLLOWING: <br />
<br />
=== Planned New section to replace "Web Design Concepts" - to be called "Planning a web site" ===<br />
<br />
# [[Introduction to planning a web site]]<br />
# Scoping and user research<br />
# [[Information_Architecture_-_planning_out_a_web_site|Information Architecture - planning out a web site]]. [http://dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud1/index.html Spanish translation]<br />
# [[What_does_a_good_web_page_need|What does a good web page need?]] [http://dev.opera.com/articles/view/7-mi-kell-egy-jo-weblaphoz/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud2/index.html Spanish translation]<br />
# [[Typography on the Web]]. [http://dev.opera.com/articles/view/11-tipografia-a-weben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud6/index.html Spanish translation]<br />
# Colour schemes and deasign theory<br />
# Mockups and protptypes<br />
# User experience design<br />
<br />
== HTML basics ==<br />
<br />
# [http://www.w3.org/wiki/The_basics_of_HTML The basics of HTML], by Mark Norman Francis. { -- THIS LOOKS OK, ALTHOUGH I THINK IT NEEDS A BIT OF UPDATING TO ACCOUNT FOR HTML5, THE HISTORY SECTION, ETC. THE EXAMPLES SHOULD ALSO BE UPDATED TO HTML5 SEMANTICS, WHERE APPROPRIATE, EG NO MORE DIVS FOR PAGE SECTIONS}<br />
# [http://www.w3.org/wiki/The_HTML_head_element The HTML &lt;head&gt; element], by Christian Heilmann. { -- NEEDS UPDATING, AND HTML5 FEATURES ADDING, SUCH AS META CHARSET} <br />
# [http://www.w3.org/wiki/Choosing_the_right_doctype_for_your_HTML_documents Choosing the right doctype for your HTML documents], by Roger Johansson. { -- I THINK THAT THIS NEEDS TO BE REWRITTEN TO FOCUS LESS ON DOCTYPES, AND MORE ON HTML/XHTML RULES, HOW THEY DIFFER, WHAT DOCTYPES REALLY ACHIEVED, WHAT ONES YOU MIGHT ENCOUNTER IN THE WILD, WHY WE WILL BE USING HTML5 DOCTYPE IN THIS COURSE, WHAT IT ACHIEVES, ETC.}<br />
<br />
== The HTML body ==<br />
<br />
{ -- OVERALL THIS IS A REASONABLE SECTION, BUT QUITE A LOT NEEDS ADDING TO BRING IT UP TO DATE WITH HTML5, ETC. I WILL CLEARLY MARK NEW ARTICLES}<br />
<br />
# NEW ARTICLE - structural elements, section, article, etc. also including div and span<br />
# [http://www.w3.org/wiki/Marking_up_textual_content_in_HTML Marking up textual content in HTML], by Mark Norman Francis. { -- NEEDS UPDATING, AS SOME OF THESE ELEMENTS WILL HAVE CHANGED FUNCTION IN HTML5, AND DEPRECATED ELEMENTS HAVE BEEN REPURPOSED}<br />
# [http://www.w3.org/wiki/HTML_lists HTML Lists], by Ben Buchanan. { -- DOESN'T NEED MANY UPDATES}<br />
# [http://www.w3.org/wiki/Images_in_HTML Images in HTML], by Christian Heilmann. { -- NEEDS A BIT OF SPIT AND POLISH, AND NEEDS FIGURE AND FIGCAPTION ADDING}<br />
# [http://www.w3.org/wiki/HTML_links_-_lets_build_a_web HTML links — let's build a web!] by Christian Heilmann. { -- NEEDS SPIT AND POLISH, AND NEEDS THE CONCEPT OF BLOCK LEVEL LINKS ADDING}<br />
# NEW ARTICLE - HTML5 video and audio<br />
# [http://www.w3.org/wiki/HTML_tables HTML Tables], by Jen Hanen. { -- NOT MANY UPDATES NEEDED}<br />
# [http://www.w3.org/wiki/HTML_forms_-_the_basics HTML Forms — the basics], by Jen Hanen. { -- THERE IS A LOT OF NEW HTML5 FORM STUFF TO ADD, OBVIOUSLY - I THINK THAT IN THIS CIRCUMSTANCE, BECAUSE SUPPORT FOR HTML5 FORM STUFF IS PATCHY ACROSS BROWSERS RIGHT NOW, WE SHOULD DO SMALL UPDATES ON THE EXISTING ARTICLE, THEN ADD ONE OR MORE SEPARATE ARTICLES TO COVER THE NEW HTML5 FORM ELEMENTS AND NEW ATTRIBUTES, AND THEN PERHAPS SEPARATE COVERAGE OF VALIDATION}<br />
# [http://www.w3.org/wiki/Lesser_-_known_semantic_elements Lesser-known semantic elements], by Mark Norman Francis. {THIS WILL NEED UPDATING, AS A NUMBER OF THESE ELEMENTS HAVE BEEN REDEFINED}<br />
# [http://www.w3.org/wiki/Generic_containers_-_the_div_and_span_elements Generic containers — the div and span elements], by Mark Norman Francis. { -- REMOVE THIS ONE - THIS WILL BE COVERED IN THE STRUCTURAL ELEMENTS ARTICLE}<br />
# [http://www.w3.org/wiki/Creating_multiple_pages_with_navigation_menus Creating multiple pages with navigation menus], by Christian Heilmann.<br />
# [http://www.w3.org/wiki/Validating_your_HTML Validating your HTML], by Mark Norman Francis. { -- I THINK THIS COULD BE REWRITTEN AND IMPROVED, AND RELOCATED TO A SECTION ABOUT DEBUGGING WEB PAGES? A MORE COMPLETE TREATMENT WOULD BE NICE}<br />
<br />
== Accessibility specifics ==<br />
<br />
# [http://www.w3.org/wiki/Accessibility_basics Accessibility basics], by Tom Hughes-Croucher.<br />
# [http://www.w3.org/wiki/Accessibility_testing Accessibility testing], by Benjamin Hawkes-Lewis.<br />
<br />
I THINK THIS NEEDS TO BE EXPANDED OUT TO SEVERAL ARTICLES, TO COVER DIFFERENT ASPECTS, SOMETHING LIKE:<br />
<br />
# WRITING A PLAN FOR A11Y TESTING, INCLUDING USE OF REAL USER TESTING, CONFORMANCE CRITERIA, AUTOMATED TOOLS, AND GOOD OLD COMMON SENSE<br />
# THE LEGAL SIDE OF THINGS, EXPLAINED IN DETAIL<br />
# DECIPHERING WCAG, AND OTHER CONFORMANCE CRITERIA SUCH AS SECTION 508<br />
# ACCESSIBILITY TOOLS, WHAT TO USE AND WHAT TO AVOID. HOW FAR WILL THESE GET YOU?<br />
# REAL A11Y TESTING WITH REAL PEOPLE, HOW TO PUT TOGETHER FOCUS GROUPS, WHAT TO LOOK FOR HERE<br />
# COMMON SENSE - SOLUTIONS FOR COMMON ACCESSIBILITY ISSUES - A ROADMAP FOR FIXING ISSUES. START WITH SEMANTIC HTML, THEN GO TO VIDEO AND AUDIO CONTENT, JAVASCRIPT, AJAX, ALTERNATIVES. }<br />
<br />
== CSS ==<br />
<br />
# [http://dev.opera.com/articles/view/27-css-basics/ CSS basics], by Christian Heilmann. { -- NEEDS A BIT OF SPRUCING UP, TO TALK ABOUT NEW STUFF, PLUS WE NEED TO ADD SOME STUFF ABOUT ALL THE NEW CSS SELECTORS. OF DO WE? MAYBE WE COULD JUST COVER THE BASIC SELECTORS HERE, AND THEN COVER SOME OF THE MORE ADVANCED ONES IN APPROPRIATE PLACES, EG FORM RELATED ONES, AND OTHER ADVANCED ONES IN AN ARTICLE OF THEIR OWN - SEE NEXT ARTICLE}<br />
# NEW ARTICLE - ADVANCED SELECTORS - cover all the advanced selectors that we didn't cover in the previous chapter - last nth of type, valid, invalid, nth child, etc. <br />
# NEW CHAPTER - CSS3 SHADOWS<br />
# [http://www.w3.org/wiki/Inheritance_and_cascade Inheritance and Cascade], by Tommy Olsson. { -- NOT MUCH TO UPDATE HERE}<br />
# [http://www.w3.org/wiki/Text_styling_with_CSS Text styling with CSS], by Ben Henick. { -- THIS IS A VERY WEIGHTY CHAPTER, AND COULD DO WITH SLIMMING DOWN A BIT, AND MAKING MORE GRANULAR, PERHAPS EVEN SPLITTING IT. ALSO ADD WEB FONTS, AND TALK ABOUT SOME OF THE MORE OBSCURE TEXT STYLING STUFF, LIKE TEXT-OVERFLOW, GENERATED CONTENT FOR QUOTES, WORD WRAP, ETC.}<br />
# [http://www.w3.org/wiki/The_CSS_layout_model_-_boxes_borders_margins_padding The CSS layout model - boxes, borders, margins, padding], by Ben Henick. { -- AGAIN, MIGHT NEED SPLITTING, NEED TO COVER DIFFERENT LAYOUT MODELS, BORDER-RADIUS ETC.}<br />
# [http://www.w3.org/wiki/CSS_background_images CSS background images], by Nicole Sullivan. { -- NEED TO UPDATE TO COVER MULTIPLE BACKGROUND IMAGES, BORDER-IMAGE, LINEAR GRADIENTS, MIGHT NEED MULTIPLE CHAPTERS}<br />
# [http://www.w3.org/wiki/Styling_lists_and_links Styling lists and links], by Ben Buchanan. { -- DOESN'T NEED THAT MUCH }<br />
# [http://www.w3.org/wiki/Styling_tables Styling tables], by Ben Buchanan. { -- DOESN'T NEED THAT MUCH }<br />
# [http://www.w3.org/wiki/Styling_forms Styling forms], by Ben Henick. { -- NEED TO ADD CSS3 FORM-RELATED PSEUDO CLASSES, AND DISCUSSION OF STYLING ERRORS AND STUFF}<br />
# [http://www.w3.org/wiki/Floats_and_clearing Floats and clearing], by Tommy Olsson. { - NOT THAT MUCH NEEDED, ALTHOUGH I NEED TO BE CAREFUL TO SEPARATE OUT MULTIPLE COLUMN LAYOUTS, AND COVER MULTI-COL THERE}<br />
# [http://www.w3.org/wiki/CSS_static_and_relative_positioning CSS static and relative positioning], by Tommy Olsson.<br />
# [http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning CSS absolute and fixed positioning], by Tommy Olsson. { -- THE POSITIONING CHAPTERS NEED SOME WORK, BUT NOT THAT MUCH}<br />
# NEW CHAPTER - CSS3 TRANSFORMS<br />
# NEW CHAPTER - CSS3 TRANSITIONS<br />
# NEW CHAPTER - CSS3 ANIMATIONS<br />
# NEW CHAPTER - ADAPTIVE WEB DESIGN FOR MOBILE - MEDIA QUERIES, VIEWPORT.<br />
# NEW CHAPTER - OBJECT FIT/OBJECT POSITION<br />
<br />
== Advanced CSS study ==<br />
<br />
# [http://www.w3.org/wiki/Headers_footers_columns_and_templates Headers, footers, columns, and templates], by Ben Henick { -- NOT SURE HOW USEFUL THIS IS, MAYBE DISSECT IT, PUT THE USEFUL STUFF IN OTHER CHAPTERS. A BIT TOO LONG WINDED. }<br />
<br />
== JavaScript ==<br />
<br />
# [http://www.w3.org/wiki/Programming_-_the_real_basics Programming - the real basics!], by Christian Heilmann<br />
# [http://www.w3.org/wiki/What_can_you_do_with_JavaScript What can you do with JavaScript?], by Christian Heilmann<br />
# [http://www.w3.org/wiki/Your_first_look_at_JavaScript Your first look at JavaScript], by Christian Heilmann<br />
# [http://www.w3.org/wiki/JavaScript_best_practices JavaScript best practices], by Christian Heilmann<br />
# [http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript The principles of unobtrusive JavaScript], by PPK<br />
# [http://www.w3.org/wiki/JavaScript_functions JavaScript functions], by Mike West<br />
# [http://www.w3.org/wiki/Objects_in_JavaScript Objects in JavaScript], by Mike West<br />
# [http://www.w3.org/wiki/Traversing_the_DOM Traversing the DOM], by Mike West<br />
# [http://www.w3.org/wiki/Creating_and_modifying_HTML Creating and modifying HTML], by Stuart Langridge<br />
# [http://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript Dynamic style - manipulating CSS with JavaScript], by Greg Schechter<br />
# [http://www.w3.org/wiki/Handling_events_with_JavaScript Handling events with JavaScript], by Robert Nyman<br />
# [http://www.w3.org/wiki/JavaScript_animation JavaScript animation], by Stuart Langridge<br />
# [http://www.w3.org/wiki/Graceful_degredation_versus_progressive_enhancement Graceful degredation versus progressive enhancement], by Christian Heilmann<br />
<br />
== HTML5 APIS ==<br />
<br />
PROBABLY NEED TO INTERSPERSE THESE IN THE ABOVE SECTION, OR PUT NEW SECTIONS IN, EG "OFFLINE WEB APPLICATIONS" WOULD WORK WELL AS A DISTINCT SECTION.<br />
<br />
# MEDIA API<br />
# GEOLOCATION (YEAH, NOT HTML5, BUT HEY)<br />
# WEB WORKERS<br />
# WEB SOCKETS<br />
# APPCACHE<br />
# WEBSQL/INDEXEDDB<br />
# WEB STORAGE<br />
# CANVAS (SHOULD PROBABLY HAVE ITS OWN SECTION ENTIRELY)<br />
# HTML5 HISTORY API<br />
# DATASETS<br />
<br />
== OTHER THINGS TO COVER ==<br />
<br />
# SVG (REALLY NEEDS ITS OWN COURSE, See the following proposal)<br />
# WAI-ARIA<br />
<br />
=== SVG ===<br />
<br />
Source of inspiration :<br />
<br />
* http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html<br />
* https://developer.mozilla.org/en/SVG/Tutorial<br />
<br />
==== SVG BASICS ====<br />
<br />
# ''History and usage'' : As for HTML, it could be good to start by giving some context: What is it, Where does it come, What is it made for, How is it different than HTML?<br />
# ''Syntax and deployment'' : This part would introduce the basic syntax, the concept of viewport and absolute positioning and finally how to embed an SVG document inside other language (basically HTML and CSS)<br />
# ''Basic shapes'' : This part will be dedicated to the basic shapes available in SVG<br />
# ''Position and transformation'' : To go deeper inside the viewport thing and to explain the role of the transformations.<br />
# ''Using text in SVG''<br />
# ''Styling SVG'' : This is where we would detailed how to use presentation attributes and their CSS counterpart.<br />
# ''Scripting SVG'' : Where we could introduce the SVG DOM API.<br />
<br />
==== Part 2 : SVG ADVANCED ====<br />
<br />
# ''How to build Pathes'' : To dig into the syntax of the d attribute on path elements<br />
# ''Animating the web with SVG Animations'' : How to use SVG Animations<br />
# ''SVG Filters'' : This would be an introduction to filters but each filters could have it's own article (Filters a really hard things)<br />
# ''Clipping and Masking''<br />
# ''Patterns''<br />
# ''Gradients''<br />
# ''Dealing with the external'' : This part would be dedicated to the foreignObject element but also to links and images elements.<br />
<br />
==== SVG article drafts we could use ===<br />
<br />
# [[SVG Primer]] (written by David Storey, but unused)<br />
# [[SVG Links]] (written by David Storey, but unused)<br />
<br />
== Mobile web development - proposed new structure ==<br />
<br />
=== The basics ===<br />
<br />
# [[Mobile beginnings: An introduction to the mobile web]] (include history of mobiles, how mobile networks work, what the hardware looks like, what the software looks like)<br />
# [[What do the devices look like?]] (a fairly detailed reference showing the types of devices you are likely to need to support when building cross device adaptive apps)<br />
# [[Mobile constraints and advantages]] (what are the constraints you need to work around for alternative browsing devices? What are the advantages, eg the context specific technologies you can take advantage of?)<br />
<br />
=== Adaptive design and development ===<br />
<br />
# [[Mobile friendly: an introduction to mobile web design]] (start with a basis of semantic HTML, accessibility best practices are Making an app or site mobile friendly - do you create a different site, or do you adapt your existing site for mobile? A brief introduction to Adaptive design - graceful degradation, progressive enhancement, using media queries and viewport to adapt layout, using feature detection to server appropriate content and services, NOT browser sniffing!)<br />
# [[Designing a mobile user experience]] (all about context, what does the user want to do in this context, how does it differ from the desktop, etc.?)<br />
# [[Optimising CSS and JavaScript for mobile]]<br />
# [[Media Queries]]<br />
# [[Viewport]]<br />
# [[Adaptive layouts for mobile]] (apply the basics you learned in the last two)<br />
# [[Device aware apps]] (Geolocation, etc.)<br />
# [[Multimedia on mobile]] (dealing with images, video, audio)<br />
# [[Offline apps for mobile]] (web storage, AppCache, WebSQL)<br />
# [[Putting together a mobile testing suite]]<br />
<br />
== Supplementary articles ==<br />
<br />
* [http://www.w3.org/wiki/Getting_your_content_online Getting your content online], by Craig Grannell. { -- DOESN'T NEED CHANGES }<br />
* [http://www.w3.org/wiki/More_about_the_document_head More about the document &lt;head&gt;], by Chris Heilmann. { -- PROBABLY DOESN'T NEED CHANGES, ALTHOUGH IT WOULD BE NICE TO MOVE IT INTO THE MAIN HTML SECTION, AS IT GETS LOST OUT HERE }<br />
* [http://www.w3.org/wiki/Common_HTML_entities_used_for_typography Common HTML entities used for typography], by Ben Henick. { -- DOESN'T NEED MANY CHANGES }<br />
* [http://www.w3.org/wiki/The_web_standards_curriculum_glossary The Opera Web Standards Curriculum glossary], by various authors. This is incomplete, and will be added to as time goes by. { -- NEEDS A LOT OF TERMS ADDING, IF IT IS TO BE USEFUL }<br />
<br />
== Deprecated articles: removeed from original WSC ==<br />
<br />
* [[Choosing the right doctype for your HTML documents]]. [http://dev.opera.com/articles/view/14-megfelelo-doctype-valasztasa/ Hungarian translation] | [http://dev.opera.com/articles/view/14-choosing-the-right-doctype-for-your-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m3/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m3/ud3/index.html Spanish translation]<br />
* [[Generic containers - the div and span elements]]. [http://dev.opera.com/articles/view/22-altalanos-tarolok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud8/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud8/index.html Spanish translation]<br />
<br />
<br />
[[Category:WSC]]</div>Cmillshttps://www.w3.org/wiki/index.php?title=WSC_proposed_updates&diff=54314WSC proposed updates2011-10-06T11:20:56Z<p>Cmills: /* SVG */</p>
<hr />
<div> <br />
= Web standards curriculum on W3C Wiki: plan for updates 2011 =<br />
<br />
== The beginning ==<br />
<br />
[[Introduction to the Web Standards Curriculum]] by Chris Mills. '''{ -- JUST NEEDS A GENERAL READ, AND A LITTLE BIT OF TWEAKING}'''<br />
<br />
== Introduction to the world of web standards ==<br />
<br />
# [[The history of the Web|The history of the Internet and the web, and the evolution of web standards]], by Mark Norman Francis. { -- NEEDS A GENERAL READ, PLUS I THINK IT COULD BENEFIT FROM A BIT MORE HISTORY BEING ADDED ABOUT THE EVOLUTION OF HTML5 AND CSS3}<br />
# [[How does the Internet work]]? by Jonathan Lane. {-- NO TWEAKING NEEDED; JUST SPIT AND POLISH}<br />
# [[The web standards model - HTML CSS and JavaScript]] by Jonathan Lane. { -- A FEW TWEAKS NEEDED - THE HTML SECTION COULD DO WITH AN OVERHAUL TO CCOUNT FOR HTML5, AND DEAL WITH XHTML A BIT BETTER}<br />
# [[Beautiful dream, but what's the reality]]? by Jonathan Lane. { -- I THINK THIS ARTICLE COULD JUST BE REMOVED, AND A SMALL SECTION ADDED TO THE PREVIOUS ARTICLE TO COVER "THE REALITY OF IT ALL". AS IT STANDS, THIS ARTICLE IS A BIT OF A RANT, AND NOT REALLY THAT USEFUL TO EDUCATION}<br />
<br />
== Web Design Concepts ==<br />
<br />
This section won't go into any code or markup details, and will act as an introduction to the design process before you start to create any graphics or code, as well as concepts of web design such as IA, navigation, usability etc.<br />
<br />
# [http://www.w3.org/wiki/Information_Architecture_-_planning_out_a_web_site Information Architecture - planning out a web site], by Jonathan Lane.<br />
# [http://www.w3.org/wiki/What_does_a_good_web_page_need What does a good web page need?], by Mark Norman Francis.<br />
# [http://www.w3.org/wiki/Colour_theory Colour Theory], by Linda Goin.<br />
# [http://www.w3.org/wiki/Building_up_a_site_wireframe Building up a site wireframe], by Linda Goin.<br />
# [http://www.w3.org/wiki/Colour_schemes_and_design_mockups Colour schemes and design mockups], by Linda Goin. <br />
# [http://www.w3.org/wiki/Typography_on_the_Web Typography on the web], by Paul Haine.<br />
<br />
{ -- I THINK THIS WHOLE SECTION NEEDS AN OVERHAUL, AS CURRENTLY IT IS NOT VERY EFFECTIVE. THE TYPOGRAPHY AND IA SECTIONS ARE FINE, BUT I'M NOT SURE ABOUT THE OTHER STUFF. I THINK THE SECTION SHOULD BE RETITLED "PLANNING A WEB SITE", AND HAVE A STRUCTURE SOMETHING LIKE THE FOLLOWING: <br />
<br />
=== Planned New section to replace "Web Design Concepts" - to be called "Planning a web site" ===<br />
<br />
# [[Introduction to planning a web site]]<br />
# Scoping and user research<br />
# [[Information_Architecture_-_planning_out_a_web_site|Information Architecture - planning out a web site]]. [http://dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud1/index.html Spanish translation]<br />
# [[What_does_a_good_web_page_need|What does a good web page need?]] [http://dev.opera.com/articles/view/7-mi-kell-egy-jo-weblaphoz/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud2/index.html Spanish translation]<br />
# [[Typography on the Web]]. [http://dev.opera.com/articles/view/11-tipografia-a-weben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud6/index.html Spanish translation]<br />
# Colour schemes and deasign theory<br />
# Mockups and protptypes<br />
# User experience design<br />
<br />
== HTML basics ==<br />
<br />
# [http://www.w3.org/wiki/The_basics_of_HTML The basics of HTML], by Mark Norman Francis. { -- THIS LOOKS OK, ALTHOUGH I THINK IT NEEDS A BIT OF UPDATING TO ACCOUNT FOR HTML5, THE HISTORY SECTION, ETC. THE EXAMPLES SHOULD ALSO BE UPDATED TO HTML5 SEMANTICS, WHERE APPROPRIATE, EG NO MORE DIVS FOR PAGE SECTIONS}<br />
# [http://www.w3.org/wiki/The_HTML_head_element The HTML &lt;head&gt; element], by Christian Heilmann. { -- NEEDS UPDATING, AND HTML5 FEATURES ADDING, SUCH AS META CHARSET} <br />
# [http://www.w3.org/wiki/Choosing_the_right_doctype_for_your_HTML_documents Choosing the right doctype for your HTML documents], by Roger Johansson. { -- I THINK THAT THIS NEEDS TO BE REWRITTEN TO FOCUS LESS ON DOCTYPES, AND MORE ON HTML/XHTML RULES, HOW THEY DIFFER, WHAT DOCTYPES REALLY ACHIEVED, WHAT ONES YOU MIGHT ENCOUNTER IN THE WILD, WHY WE WILL BE USING HTML5 DOCTYPE IN THIS COURSE, WHAT IT ACHIEVES, ETC.}<br />
<br />
== The HTML body ==<br />
<br />
{ -- OVERALL THIS IS A REASONABLE SECTION, BUT QUITE A LOT NEEDS ADDING TO BRING IT UP TO DATE WITH HTML5, ETC. I WILL CLEARLY MARK NEW ARTICLES}<br />
<br />
# NEW ARTICLE - structural elements, section, article, etc. also including div and span<br />
# [http://www.w3.org/wiki/Marking_up_textual_content_in_HTML Marking up textual content in HTML], by Mark Norman Francis. { -- NEEDS UPDATING, AS SOME OF THESE ELEMENTS WILL HAVE CHANGED FUNCTION IN HTML5, AND DEPRECATED ELEMENTS HAVE BEEN REPURPOSED}<br />
# [http://www.w3.org/wiki/HTML_lists HTML Lists], by Ben Buchanan. { -- DOESN'T NEED MANY UPDATES}<br />
# [http://www.w3.org/wiki/Images_in_HTML Images in HTML], by Christian Heilmann. { -- NEEDS A BIT OF SPIT AND POLISH, AND NEEDS FIGURE AND FIGCAPTION ADDING}<br />
# [http://www.w3.org/wiki/HTML_links_-_lets_build_a_web HTML links — let's build a web!] by Christian Heilmann. { -- NEEDS SPIT AND POLISH, AND NEEDS THE CONCEPT OF BLOCK LEVEL LINKS ADDING}<br />
# NEW ARTICLE - HTML5 video and audio<br />
# [http://www.w3.org/wiki/HTML_tables HTML Tables], by Jen Hanen. { -- NOT MANY UPDATES NEEDED}<br />
# [http://www.w3.org/wiki/HTML_forms_-_the_basics HTML Forms — the basics], by Jen Hanen. { -- THERE IS A LOT OF NEW HTML5 FORM STUFF TO ADD, OBVIOUSLY - I THINK THAT IN THIS CIRCUMSTANCE, BECAUSE SUPPORT FOR HTML5 FORM STUFF IS PATCHY ACROSS BROWSERS RIGHT NOW, WE SHOULD DO SMALL UPDATES ON THE EXISTING ARTICLE, THEN ADD ONE OR MORE SEPARATE ARTICLES TO COVER THE NEW HTML5 FORM ELEMENTS AND NEW ATTRIBUTES, AND THEN PERHAPS SEPARATE COVERAGE OF VALIDATION}<br />
# [http://www.w3.org/wiki/Lesser_-_known_semantic_elements Lesser-known semantic elements], by Mark Norman Francis. {THIS WILL NEED UPDATING, AS A NUMBER OF THESE ELEMENTS HAVE BEEN REDEFINED}<br />
# [http://www.w3.org/wiki/Generic_containers_-_the_div_and_span_elements Generic containers — the div and span elements], by Mark Norman Francis. { -- REMOVE THIS ONE - THIS WILL BE COVERED IN THE STRUCTURAL ELEMENTS ARTICLE}<br />
# [http://www.w3.org/wiki/Creating_multiple_pages_with_navigation_menus Creating multiple pages with navigation menus], by Christian Heilmann.<br />
# [http://www.w3.org/wiki/Validating_your_HTML Validating your HTML], by Mark Norman Francis. { -- I THINK THIS COULD BE REWRITTEN AND IMPROVED, AND RELOCATED TO A SECTION ABOUT DEBUGGING WEB PAGES? A MORE COMPLETE TREATMENT WOULD BE NICE}<br />
<br />
== Accessibility specifics ==<br />
<br />
# [http://www.w3.org/wiki/Accessibility_basics Accessibility basics], by Tom Hughes-Croucher.<br />
# [http://www.w3.org/wiki/Accessibility_testing Accessibility testing], by Benjamin Hawkes-Lewis.<br />
<br />
I THINK THIS NEEDS TO BE EXPANDED OUT TO SEVERAL ARTICLES, TO COVER DIFFERENT ASPECTS, SOMETHING LIKE:<br />
<br />
# WRITING A PLAN FOR A11Y TESTING, INCLUDING USE OF REAL USER TESTING, CONFORMANCE CRITERIA, AUTOMATED TOOLS, AND GOOD OLD COMMON SENSE<br />
# THE LEGAL SIDE OF THINGS, EXPLAINED IN DETAIL<br />
# DECIPHERING WCAG, AND OTHER CONFORMANCE CRITERIA SUCH AS SECTION 508<br />
# ACCESSIBILITY TOOLS, WHAT TO USE AND WHAT TO AVOID. HOW FAR WILL THESE GET YOU?<br />
# REAL A11Y TESTING WITH REAL PEOPLE, HOW TO PUT TOGETHER FOCUS GROUPS, WHAT TO LOOK FOR HERE<br />
# COMMON SENSE - SOLUTIONS FOR COMMON ACCESSIBILITY ISSUES - A ROADMAP FOR FIXING ISSUES. START WITH SEMANTIC HTML, THEN GO TO VIDEO AND AUDIO CONTENT, JAVASCRIPT, AJAX, ALTERNATIVES. }<br />
<br />
== CSS ==<br />
<br />
# [http://dev.opera.com/articles/view/27-css-basics/ CSS basics], by Christian Heilmann. { -- NEEDS A BIT OF SPRUCING UP, TO TALK ABOUT NEW STUFF, PLUS WE NEED TO ADD SOME STUFF ABOUT ALL THE NEW CSS SELECTORS. OF DO WE? MAYBE WE COULD JUST COVER THE BASIC SELECTORS HERE, AND THEN COVER SOME OF THE MORE ADVANCED ONES IN APPROPRIATE PLACES, EG FORM RELATED ONES, AND OTHER ADVANCED ONES IN AN ARTICLE OF THEIR OWN - SEE NEXT ARTICLE}<br />
# NEW ARTICLE - ADVANCED SELECTORS - cover all the advanced selectors that we didn't cover in the previous chapter - last nth of type, valid, invalid, nth child, etc. <br />
# NEW CHAPTER - CSS3 SHADOWS<br />
# [http://www.w3.org/wiki/Inheritance_and_cascade Inheritance and Cascade], by Tommy Olsson. { -- NOT MUCH TO UPDATE HERE}<br />
# [http://www.w3.org/wiki/Text_styling_with_CSS Text styling with CSS], by Ben Henick. { -- THIS IS A VERY WEIGHTY CHAPTER, AND COULD DO WITH SLIMMING DOWN A BIT, AND MAKING MORE GRANULAR, PERHAPS EVEN SPLITTING IT. ALSO ADD WEB FONTS, AND TALK ABOUT SOME OF THE MORE OBSCURE TEXT STYLING STUFF, LIKE TEXT-OVERFLOW, GENERATED CONTENT FOR QUOTES, WORD WRAP, ETC.}<br />
# [http://www.w3.org/wiki/The_CSS_layout_model_-_boxes_borders_margins_padding The CSS layout model - boxes, borders, margins, padding], by Ben Henick. { -- AGAIN, MIGHT NEED SPLITTING, NEED TO COVER DIFFERENT LAYOUT MODELS, BORDER-RADIUS ETC.}<br />
# [http://www.w3.org/wiki/CSS_background_images CSS background images], by Nicole Sullivan. { -- NEED TO UPDATE TO COVER MULTIPLE BACKGROUND IMAGES, BORDER-IMAGE, LINEAR GRADIENTS, MIGHT NEED MULTIPLE CHAPTERS}<br />
# [http://www.w3.org/wiki/Styling_lists_and_links Styling lists and links], by Ben Buchanan. { -- DOESN'T NEED THAT MUCH }<br />
# [http://www.w3.org/wiki/Styling_tables Styling tables], by Ben Buchanan. { -- DOESN'T NEED THAT MUCH }<br />
# [http://www.w3.org/wiki/Styling_forms Styling forms], by Ben Henick. { -- NEED TO ADD CSS3 FORM-RELATED PSEUDO CLASSES, AND DISCUSSION OF STYLING ERRORS AND STUFF}<br />
# [http://www.w3.org/wiki/Floats_and_clearing Floats and clearing], by Tommy Olsson. { - NOT THAT MUCH NEEDED, ALTHOUGH I NEED TO BE CAREFUL TO SEPARATE OUT MULTIPLE COLUMN LAYOUTS, AND COVER MULTI-COL THERE}<br />
# [http://www.w3.org/wiki/CSS_static_and_relative_positioning CSS static and relative positioning], by Tommy Olsson.<br />
# [http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning CSS absolute and fixed positioning], by Tommy Olsson. { -- THE POSITIONING CHAPTERS NEED SOME WORK, BUT NOT THAT MUCH}<br />
# NEW CHAPTER - CSS3 TRANSFORMS<br />
# NEW CHAPTER - CSS3 TRANSITIONS<br />
# NEW CHAPTER - CSS3 ANIMATIONS<br />
# NEW CHAPTER - ADAPTIVE WEB DESIGN FOR MOBILE - MEDIA QUERIES, VIEWPORT.<br />
# NEW CHAPTER - OBJECT FIT/OBJECT POSITION<br />
<br />
== Advanced CSS study ==<br />
<br />
# [http://www.w3.org/wiki/Headers_footers_columns_and_templates Headers, footers, columns, and templates], by Ben Henick { -- NOT SURE HOW USEFUL THIS IS, MAYBE DISSECT IT, PUT THE USEFUL STUFF IN OTHER CHAPTERS. A BIT TOO LONG WINDED. }<br />
<br />
== JavaScript ==<br />
<br />
# [http://www.w3.org/wiki/Programming_-_the_real_basics Programming - the real basics!], by Christian Heilmann<br />
# [http://www.w3.org/wiki/What_can_you_do_with_JavaScript What can you do with JavaScript?], by Christian Heilmann<br />
# [http://www.w3.org/wiki/Your_first_look_at_JavaScript Your first look at JavaScript], by Christian Heilmann<br />
# [http://www.w3.org/wiki/JavaScript_best_practices JavaScript best practices], by Christian Heilmann<br />
# [http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript The principles of unobtrusive JavaScript], by PPK<br />
# [http://www.w3.org/wiki/JavaScript_functions JavaScript functions], by Mike West<br />
# [http://www.w3.org/wiki/Objects_in_JavaScript Objects in JavaScript], by Mike West<br />
# [http://www.w3.org/wiki/Traversing_the_DOM Traversing the DOM], by Mike West<br />
# [http://www.w3.org/wiki/Creating_and_modifying_HTML Creating and modifying HTML], by Stuart Langridge<br />
# [http://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript Dynamic style - manipulating CSS with JavaScript], by Greg Schechter<br />
# [http://www.w3.org/wiki/Handling_events_with_JavaScript Handling events with JavaScript], by Robert Nyman<br />
# [http://www.w3.org/wiki/JavaScript_animation JavaScript animation], by Stuart Langridge<br />
# [http://www.w3.org/wiki/Graceful_degredation_versus_progressive_enhancement Graceful degredation versus progressive enhancement], by Christian Heilmann<br />
<br />
== HTML5 APIS ==<br />
<br />
PROBABLY NEED TO INTERSPERSE THESE IN THE ABOVE SECTION, OR PUT NEW SECTIONS IN, EG "OFFLINE WEB APPLICATIONS" WOULD WORK WELL AS A DISTINCT SECTION.<br />
<br />
# MEDIA API<br />
# GEOLOCATION (YEAH, NOT HTML5, BUT HEY)<br />
# WEB WORKERS<br />
# WEB SOCKETS<br />
# APPCACHE<br />
# WEBSQL/INDEXEDDB<br />
# WEB STORAGE<br />
# CANVAS (SHOULD PROBABLY HAVE ITS OWN SECTION ENTIRELY)<br />
# HTML5 HISTORY API<br />
# DATASETS<br />
<br />
== OTHER THINGS TO COVER ==<br />
<br />
# SVG (REALLY NEEDS ITS OWN COURSE, See the following proposal)<br />
# WAI-ARIA<br />
<br />
=== SVG ===<br />
<br />
Source of inspiration :<br />
<br />
* http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html<br />
* https://developer.mozilla.org/en/SVG/Tutorial<br />
<br />
==== SVG BASICS ====<br />
<br />
# ''History and usage'' : As for HTML, it could be good to start by giving some context: What is it, Where does it come, What is it made for, How is it different than HTML?<br />
# ''Syntax and deployment'' : This part would introduce the basic syntax, the concept of viewport and absolute positioning and finally how to embed an SVG document inside other language (basically HTML and CSS)<br />
# ''Basic shapes'' : This part will be dedicated to the basic shapes available in SVG<br />
# ''Position and transformation'' : To go deeper inside the viewport thing and to explain the role of the transformations.<br />
# ''Using text in SVG''<br />
# ''Styling SVG'' : This is where we would detailed how to use presentation attributes and their CSS counterpart.<br />
# ''Scripting SVG'' : Where we could introduce the SVG DOM API.<br />
<br />
==== Part 2 : SVG ADVANCED ====<br />
<br />
# ''How to build Pathes'' : To dig into the syntax of the d attribute on path elements<br />
# ''Animating the web with SVG Animations'' : How to use SVG Animations<br />
# ''SVG Filters'' : This would be an introduction to filters but each filters could have it's own article (Filters a really hard things)<br />
# ''Clipping and Masking''<br />
# ''Patterns''<br />
# ''Gradients''<br />
# ''Dealing with the external'' : This part would be dedicated to the foreignObject element but also to links and images elements.<br />
<br />
==== SVG article drafts we could use ===<br />
<br />
# [SVG Primer] (written by David Storey, but unused)<br />
# [SVG Links] (written by David Storey, but unused)<br />
<br />
== Mobile web development - proposed new structure ==<br />
<br />
=== The basics ===<br />
<br />
# [[Mobile beginnings: An introduction to the mobile web]] (include history of mobiles, how mobile networks work, what the hardware looks like, what the software looks like)<br />
# [[What do the devices look like?]] (a fairly detailed reference showing the types of devices you are likely to need to support when building cross device adaptive apps)<br />
# [[Mobile constraints and advantages]] (what are the constraints you need to work around for alternative browsing devices? What are the advantages, eg the context specific technologies you can take advantage of?)<br />
<br />
=== Adaptive design and development ===<br />
<br />
# [[Mobile friendly: an introduction to mobile web design]] (start with a basis of semantic HTML, accessibility best practices are Making an app or site mobile friendly - do you create a different site, or do you adapt your existing site for mobile? A brief introduction to Adaptive design - graceful degradation, progressive enhancement, using media queries and viewport to adapt layout, using feature detection to server appropriate content and services, NOT browser sniffing!)<br />
# [[Designing a mobile user experience]] (all about context, what does the user want to do in this context, how does it differ from the desktop, etc.?)<br />
# [[Optimising CSS and JavaScript for mobile]]<br />
# [[Media Queries]]<br />
# [[Viewport]]<br />
# [[Adaptive layouts for mobile]] (apply the basics you learned in the last two)<br />
# [[Device aware apps]] (Geolocation, etc.)<br />
# [[Multimedia on mobile]] (dealing with images, video, audio)<br />
# [[Offline apps for mobile]] (web storage, AppCache, WebSQL)<br />
# [[Putting together a mobile testing suite]]<br />
<br />
== Supplementary articles ==<br />
<br />
* [http://www.w3.org/wiki/Getting_your_content_online Getting your content online], by Craig Grannell. { -- DOESN'T NEED CHANGES }<br />
* [http://www.w3.org/wiki/More_about_the_document_head More about the document &lt;head&gt;], by Chris Heilmann. { -- PROBABLY DOESN'T NEED CHANGES, ALTHOUGH IT WOULD BE NICE TO MOVE IT INTO THE MAIN HTML SECTION, AS IT GETS LOST OUT HERE }<br />
* [http://www.w3.org/wiki/Common_HTML_entities_used_for_typography Common HTML entities used for typography], by Ben Henick. { -- DOESN'T NEED MANY CHANGES }<br />
* [http://www.w3.org/wiki/The_web_standards_curriculum_glossary The Opera Web Standards Curriculum glossary], by various authors. This is incomplete, and will be added to as time goes by. { -- NEEDS A LOT OF TERMS ADDING, IF IT IS TO BE USEFUL }<br />
<br />
== Deprecated articles: removeed from original WSC ==<br />
<br />
* [[Choosing the right doctype for your HTML documents]]. [http://dev.opera.com/articles/view/14-megfelelo-doctype-valasztasa/ Hungarian translation] | [http://dev.opera.com/articles/view/14-choosing-the-right-doctype-for-your-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m3/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m3/ud3/index.html Spanish translation]<br />
* [[Generic containers - the div and span elements]]. [http://dev.opera.com/articles/view/22-altalanos-tarolok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud8/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud8/index.html Spanish translation]<br />
<br />
<br />
[[Category:WSC]]</div>Cmillshttps://www.w3.org/wiki/index.php?title=WSC_proposed_updates&diff=54193WSC proposed updates2011-09-30T09:41:44Z<p>Cmills: /* Accessibility specifics */</p>
<hr />
<div> <br />
= Web standards curriculum on W3C Wiki: plan for updates 2011 =<br />
<br />
== The beginning ==<br />
<br />
[[Introduction to the Web Standards Curriculum]] by Chris Mills. '''{ -- JUST NEEDS A GENERAL READ, AND A LITTLE BIT OF TWEAKING}'''<br />
<br />
== Introduction to the world of web standards ==<br />
<br />
# [[The history of the Web|The history of the Internet and the web, and the evolution of web standards]], by Mark Norman Francis. { -- NEEDS A GENERAL READ, PLUS I THINK IT COULD BENEFIT FROM A BIT MORE HISTORY BEING ADDED ABOUT THE EVOLUTION OF HTML5 AND CSS3}<br />
# [[How does the Internet work]]? by Jonathan Lane. {-- NO TWEAKING NEEDED; JUST SPIT AND POLISH}<br />
# [[The web standards model - HTML CSS and JavaScript]] by Jonathan Lane. { -- A FEW TWEAKS NEEDED - THE HTML SECTION COULD DO WITH AN OVERHAUL TO CCOUNT FOR HTML5, AND DEAL WITH XHTML A BIT BETTER}<br />
# [[Beautiful dream, but what's the reality]]? by Jonathan Lane. { -- I THINK THIS ARTICLE COULD JUST BE REMOVED, AND A SMALL SECTION ADDED TO THE PREVIOUS ARTICLE TO COVER "THE REALITY OF IT ALL". AS IT STANDS, THIS ARTICLE IS A BIT OF A RANT, AND NOT REALLY THAT USEFUL TO EDUCATION}<br />
<br />
== Web Design Concepts ==<br />
<br />
This section won't go into any code or markup details, and will act as an introduction to the design process before you start to create any graphics or code, as well as concepts of web design such as IA, navigation, usability etc.<br />
<br />
# [http://www.w3.org/wiki/Information_Architecture_-_planning_out_a_web_site Information Architecture - planning out a web site], by Jonathan Lane.<br />
# [http://www.w3.org/wiki/What_does_a_good_web_page_need What does a good web page need?], by Mark Norman Francis.<br />
# [http://www.w3.org/wiki/Colour_theory Colour Theory], by Linda Goin.<br />
# [http://www.w3.org/wiki/Building_up_a_site_wireframe Building up a site wireframe], by Linda Goin.<br />
# [http://www.w3.org/wiki/Colour_schemes_and_design_mockups Colour schemes and design mockups], by Linda Goin. <br />
# [http://www.w3.org/wiki/Typography_on_the_Web Typography on the web], by Paul Haine.<br />
<br />
{ -- I THINK THIS WHOLE SECTION NEEDS AN OVERHAUL, AS CURRENTLY IT IS NOT VERY EFFECTIVE. THE TYPOGRAPHY AND IA SECTIONS ARE FINE, BUT I'M NOT SURE ABOUT THE OTHER STUFF. I THINK THE SECTION SHOULD BE RETITLED "PLANNING A WEB SITE", AND HAVE A STRUCTURE SOMETHING LIKE THE FOLLOWING: <br />
<br />
=== Planned New section to replace "Web Design Concepts" - to be called "Planning a web site" ===<br />
<br />
# [[Introduction to planning a web site]]<br />
# Scoping and user research<br />
# [[Information_Architecture_-_planning_out_a_web_site|Information Architecture - planning out a web site]]. [http://dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud1/index.html Spanish translation]<br />
# [[What_does_a_good_web_page_need|What does a good web page need?]] [http://dev.opera.com/articles/view/7-mi-kell-egy-jo-weblaphoz/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud2/index.html Spanish translation]<br />
# [[Typography on the Web]]. [http://dev.opera.com/articles/view/11-tipografia-a-weben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud6/index.html Spanish translation]<br />
# Colour schemes and deasign theory<br />
# Mockups and protptypes<br />
# User experience design<br />
<br />
== HTML basics ==<br />
<br />
# [http://www.w3.org/wiki/The_basics_of_HTML The basics of HTML], by Mark Norman Francis. { -- THIS LOOKS OK, ALTHOUGH I THINK IT NEEDS A BIT OF UPDATING TO ACCOUNT FOR HTML5, THE HISTORY SECTION, ETC. THE EXAMPLES SHOULD ALSO BE UPDATED TO HTML5 SEMANTICS, WHERE APPROPRIATE, EG NO MORE DIVS FOR PAGE SECTIONS}<br />
# [http://www.w3.org/wiki/The_HTML_head_element The HTML &lt;head&gt; element], by Christian Heilmann. { -- NEEDS UPDATING, AND HTML5 FEATURES ADDING, SUCH AS META CHARSET} <br />
# [http://www.w3.org/wiki/Choosing_the_right_doctype_for_your_HTML_documents Choosing the right doctype for your HTML documents], by Roger Johansson. { -- I THINK THAT THIS NEEDS TO BE REWRITTEN TO FOCUS LESS ON DOCTYPES, AND MORE ON HTML/XHTML RULES, HOW THEY DIFFER, WHAT DOCTYPES REALLY ACHIEVED, WHAT ONES YOU MIGHT ENCOUNTER IN THE WILD, WHY WE WILL BE USING HTML5 DOCTYPE IN THIS COURSE, WHAT IT ACHIEVES, ETC.}<br />
<br />
== The HTML body ==<br />
<br />
{ -- OVERALL THIS IS A REASONABLE SECTION, BUT QUITE A LOT NEEDS ADDING TO BRING IT UP TO DATE WITH HTML5, ETC. I WILL CLEARLY MARK NEW ARTICLES}<br />
<br />
# NEW ARTICLE - structural elements, section, article, etc. also including div and span<br />
# [http://www.w3.org/wiki/Marking_up_textual_content_in_HTML Marking up textual content in HTML], by Mark Norman Francis. { -- NEEDS UPDATING, AS SOME OF THESE ELEMENTS WILL HAVE CHANGED FUNCTION IN HTML5, AND DEPRECATED ELEMENTS HAVE BEEN REPURPOSED}<br />
# [http://www.w3.org/wiki/HTML_lists HTML Lists], by Ben Buchanan. { -- DOESN'T NEED MANY UPDATES}<br />
# [http://www.w3.org/wiki/Images_in_HTML Images in HTML], by Christian Heilmann. { -- NEEDS A BIT OF SPIT AND POLISH, AND NEEDS FIGURE AND FIGCAPTION ADDING}<br />
# [http://www.w3.org/wiki/HTML_links_-_lets_build_a_web HTML links — let's build a web!] by Christian Heilmann. { -- NEEDS SPIT AND POLISH, AND NEEDS THE CONCEPT OF BLOCK LEVEL LINKS ADDING}<br />
# NEW ARTICLE - HTML5 video and audio<br />
# [http://www.w3.org/wiki/HTML_tables HTML Tables], by Jen Hanen. { -- NOT MANY UPDATES NEEDED}<br />
# [http://www.w3.org/wiki/HTML_forms_-_the_basics HTML Forms — the basics], by Jen Hanen. { -- THERE IS A LOT OF NEW HTML5 FORM STUFF TO ADD, OBVIOUSLY - I THINK THAT IN THIS CIRCUMSTANCE, BECAUSE SUPPORT FOR HTML5 FORM STUFF IS PATCHY ACROSS BROWSERS RIGHT NOW, WE SHOULD DO SMALL UPDATES ON THE EXISTING ARTICLE, THEN ADD ONE OR MORE SEPARATE ARTICLES TO COVER THE NEW HTML5 FORM ELEMENTS AND NEW ATTRIBUTES, AND THEN PERHAPS SEPARATE COVERAGE OF VALIDATION}<br />
# [http://www.w3.org/wiki/Lesser_-_known_semantic_elements Lesser-known semantic elements], by Mark Norman Francis. {THIS WILL NEED UPDATING, AS A NUMBER OF THESE ELEMENTS HAVE BEEN REDEFINED}<br />
# [http://www.w3.org/wiki/Generic_containers_-_the_div_and_span_elements Generic containers — the div and span elements], by Mark Norman Francis. { -- REMOVE THIS ONE - THIS WILL BE COVERED IN THE STRUCTURAL ELEMENTS ARTICLE}<br />
# [http://www.w3.org/wiki/Creating_multiple_pages_with_navigation_menus Creating multiple pages with navigation menus], by Christian Heilmann.<br />
# [http://www.w3.org/wiki/Validating_your_HTML Validating your HTML], by Mark Norman Francis. { -- I THINK THIS COULD BE REWRITTEN AND IMPROVED, AND RELOCATED TO A SECTION ABOUT DEBUGGING WEB PAGES? A MORE COMPLETE TREATMENT WOULD BE NICE}<br />
<br />
== Accessibility specifics ==<br />
<br />
# [http://www.w3.org/wiki/Accessibility_basics Accessibility basics], by Tom Hughes-Croucher.<br />
# [http://www.w3.org/wiki/Accessibility_testing Accessibility testing], by Benjamin Hawkes-Lewis.<br />
<br />
I THINK THIS NEEDS TO BE EXPANDED OUT TO SEVERAL ARTICLES, TO COVER DIFFERENT ASPECTS, SOMETHING LIKE:<br />
<br />
# WRITING A PLAN FOR A11Y TESTING, INCLUDING USE OF REAL USER TESTING, CONFORMANCE CRITERIA, AUTOMATED TOOLS, AND GOOD OLD COMMON SENSE<br />
# THE LEGAL SIDE OF THINGS, EXPLAINED IN DETAIL<br />
# DECIPHERING WCAG, AND OTHER CONFORMANCE CRITERIA SUCH AS SECTION 508<br />
# ACCESSIBILITY TOOLS, WHAT TO USE AND WHAT TO AVOID. HOW FAR WILL THESE GET YOU?<br />
# REAL A11Y TESTING WITH REAL PEOPLE, HOW TO PUT TOGETHER FOCUS GROUPS, WHAT TO LOOK FOR HERE<br />
# COMMON SENSE - SOLUTIONS FOR COMMON ACCESSIBILITY ISSUES - A ROADMAP FOR FIXING ISSUES. START WITH SEMANTIC HTML, THEN GO TO VIDEO AND AUDIO CONTENT, JAVASCRIPT, AJAX, ALTERNATIVES. }<br />
<br />
== CSS ==<br />
<br />
# [http://dev.opera.com/articles/view/27-css-basics/ CSS basics], by Christian Heilmann. { -- NEEDS A BIT OF SPRUCING UP, TO TALK ABOUT NEW STUFF, PLUS WE NEED TO ADD SOME STUFF ABOUT ALL THE NEW CSS SELECTORS. OF DO WE? MAYBE WE COULD JUST COVER THE BASIC SELECTORS HERE, AND THEN COVER SOME OF THE MORE ADVANCED ONES IN APPROPRIATE PLACES, EG FORM RELATED ONES, AND OTHER ADVANCED ONES IN AN ARTICLE OF THEIR OWN - SEE NEXT ARTICLE}<br />
# NEW ARTICLE - ADVANCED SELECTORS - cover all the advanced selectors that we didn't cover in the previous chapter - last nth of type, valid, invalid, nth child, etc. <br />
# NEW CHAPTER - CSS3 SHADOWS<br />
# [http://www.w3.org/wiki/Inheritance_and_cascade Inheritance and Cascade], by Tommy Olsson. { -- NOT MUCH TO UPDATE HERE}<br />
# [http://www.w3.org/wiki/Text_styling_with_CSS Text styling with CSS], by Ben Henick. { -- THIS IS A VERY WEIGHTY CHAPTER, AND COULD DO WITH SLIMMING DOWN A BIT, AND MAKING MORE GRANULAR, PERHAPS EVEN SPLITTING IT. ALSO ADD WEB FONTS, AND TALK ABOUT SOME OF THE MORE OBSCURE TEXT STYLING STUFF, LIKE TEXT-OVERFLOW, GENERATED CONTENT FOR QUOTES, WORD WRAP, ETC.}<br />
# [http://www.w3.org/wiki/The_CSS_layout_model_-_boxes_borders_margins_padding The CSS layout model - boxes, borders, margins, padding], by Ben Henick. { -- AGAIN, MIGHT NEED SPLITTING, NEED TO COVER DIFFERENT LAYOUT MODELS, BORDER-RADIUS ETC.}<br />
# [http://www.w3.org/wiki/CSS_background_images CSS background images], by Nicole Sullivan. { -- NEED TO UPDATE TO COVER MULTIPLE BACKGROUND IMAGES, BORDER-IMAGE, LINEAR GRADIENTS, MIGHT NEED MULTIPLE CHAPTERS}<br />
# [http://www.w3.org/wiki/Styling_lists_and_links Styling lists and links], by Ben Buchanan. { -- DOESN'T NEED THAT MUCH }<br />
# [http://www.w3.org/wiki/Styling_tables Styling tables], by Ben Buchanan. { -- DOESN'T NEED THAT MUCH }<br />
# [http://www.w3.org/wiki/Styling_forms Styling forms], by Ben Henick. { -- NEED TO ADD CSS3 FORM-RELATED PSEUDO CLASSES, AND DISCUSSION OF STYLING ERRORS AND STUFF}<br />
# [http://www.w3.org/wiki/Floats_and_clearing Floats and clearing], by Tommy Olsson. { - NOT THAT MUCH NEEDED, ALTHOUGH I NEED TO BE CAREFUL TO SEPARATE OUT MULTIPLE COLUMN LAYOUTS, AND COVER MULTI-COL THERE}<br />
# [http://www.w3.org/wiki/CSS_static_and_relative_positioning CSS static and relative positioning], by Tommy Olsson.<br />
# [http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning CSS absolute and fixed positioning], by Tommy Olsson. { -- THE POSITIONING CHAPTERS NEED SOME WORK, BUT NOT THAT MUCH}<br />
# NEW CHAPTER - CSS3 TRANSFORMS<br />
# NEW CHAPTER - CSS3 TRANSITIONS<br />
# NEW CHAPTER - CSS3 ANIMATIONS<br />
# NEW CHAPTER - ADAPTIVE WEB DESIGN FOR MOBILE - MEDIA QUERIES, VIEWPORT.<br />
# NEW CHAPTER - OBJECT FIT/OBJECT POSITION<br />
<br />
== Advanced CSS study ==<br />
<br />
# [http://www.w3.org/wiki/Headers_footers_columns_and_templates Headers, footers, columns, and templates], by Ben Henick { -- NOT SURE HOW USEFUL THIS IS, MAYBE DISSECT IT, PUT THE USEFUL STUFF IN OTHER CHAPTERS. A BIT TOO LONG WINDED. }<br />
<br />
== JavaScript ==<br />
<br />
# [http://www.w3.org/wiki/Programming_-_the_real_basics Programming - the real basics!], by Christian Heilmann<br />
# [http://www.w3.org/wiki/What_can_you_do_with_JavaScript What can you do with JavaScript?], by Christian Heilmann<br />
# [http://www.w3.org/wiki/Your_first_look_at_JavaScript Your first look at JavaScript], by Christian Heilmann<br />
# [http://www.w3.org/wiki/JavaScript_best_practices JavaScript best practices], by Christian Heilmann<br />
# [http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript The principles of unobtrusive JavaScript], by PPK<br />
# [http://www.w3.org/wiki/JavaScript_functions JavaScript functions], by Mike West<br />
# [http://www.w3.org/wiki/Objects_in_JavaScript Objects in JavaScript], by Mike West<br />
# [http://www.w3.org/wiki/Traversing_the_DOM Traversing the DOM], by Mike West<br />
# [http://www.w3.org/wiki/Creating_and_modifying_HTML Creating and modifying HTML], by Stuart Langridge<br />
# [http://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript Dynamic style - manipulating CSS with JavaScript], by Greg Schechter<br />
# [http://www.w3.org/wiki/Handling_events_with_JavaScript Handling events with JavaScript], by Robert Nyman<br />
# [http://www.w3.org/wiki/JavaScript_animation JavaScript animation], by Stuart Langridge<br />
# [http://www.w3.org/wiki/Graceful_degredation_versus_progressive_enhancement Graceful degredation versus progressive enhancement], by Christian Heilmann<br />
<br />
== HTML5 APIS ==<br />
<br />
PROBABLY NEED TO INTERSPERSE THESE IN THE ABOVE SECTION, OR PUT NEW SECTIONS IN, EG "OFFLINE WEB APPLICATIONS" WOULD WORK WELL AS A DISTINCT SECTION.<br />
<br />
# MEDIA API<br />
# GEOLOCATION (YEAH, NOT HTML5, BUT HEY)<br />
# WEB WORKERS<br />
# WEB SOCKETS<br />
# APPCACHE<br />
# WEBSQL/INDEXEDDB<br />
# WEB STORAGE<br />
# CANVAS (SHOULD PROBABLY HAVE ITS OWN SECTION ENTIRELY)<br />
# HTML5 HISTORY API<br />
# DATASETS<br />
<br />
== OTHER THINGS TO COVER ==<br />
<br />
# SVG (REALLY NEEDS ITS OWN COURSE)<br />
# WAI-ARIA<br />
<br />
== Mobile web development - proposed new structure ==<br />
<br />
=== The basics ===<br />
<br />
# [[Mobile beginnings: An introduction to the mobile web]] (include history of mobiles, how mobile networks work, what the hardware looks like, what the software looks like)<br />
# [[What do the devices look like?]] (a fairly detailed reference showing the types of devices you are likely to need to support when building cross device adaptive apps)<br />
# [[Mobile constraints and advantages]] (what are the constraints you need to work around for alternative browsing devices? What are the advantages, eg the context specific technologies you can take advantage of?)<br />
<br />
=== Adaptive design and development ===<br />
<br />
# [[Mobile friendly: an introduction to mobile web design]] (start with a basis of semantic HTML, accessibility best practices are Making an app or site mobile friendly - do you create a different site, or do you adapt your existing site for mobile? A brief introduction to Adaptive design - graceful degradation, progressive enhancement, using media queries and viewport to adapt layout, using feature detection to server appropriate content and services, NOT browser sniffing!)<br />
# [[Designing a mobile user experience]] (all about context, what does the user want to do in this context, how does it differ from the desktop, etc.?)<br />
# [[Optimising CSS and JavaScript for mobile]]<br />
# [[Media Queries]]<br />
# [[Viewport]]<br />
# [[Adaptive layouts for mobile]] (apply the basics you learned in the last two)<br />
# [[Device aware apps]] (Geolocation, etc.)<br />
# [[Multimedia on mobile]] (dealing with images, video, audio)<br />
# [[Offline apps for mobile]] (web storage, AppCache, WebSQL)<br />
# [[Putting together a mobile testing suite]]<br />
<br />
== Supplementary articles ==<br />
<br />
* [http://www.w3.org/wiki/Getting_your_content_online Getting your content online], by Craig Grannell. { -- DOESN'T NEED CHANGES }<br />
* [http://www.w3.org/wiki/More_about_the_document_head More about the document &lt;head&gt;], by Chris Heilmann. { -- PROBABLY DOESN'T NEED CHANGES, ALTHOUGH IT WOULD BE NICE TO MOVE IT INTO THE MAIN HTML SECTION, AS IT GETS LOST OUT HERE }<br />
* [http://www.w3.org/wiki/Common_HTML_entities_used_for_typography Common HTML entities used for typography], by Ben Henick. { -- DOESN'T NEED MANY CHANGES }<br />
* [http://www.w3.org/wiki/The_web_standards_curriculum_glossary The Opera Web Standards Curriculum glossary], by various authors. This is incomplete, and will be added to as time goes by. { -- NEEDS A LOT OF TERMS ADDING, IF IT IS TO BE USEFUL }<br />
<br />
== Deprecated articles: removeed from original WSC ==<br />
<br />
* [[Choosing the right doctype for your HTML documents]]. [http://dev.opera.com/articles/view/14-megfelelo-doctype-valasztasa/ Hungarian translation] | [http://dev.opera.com/articles/view/14-choosing-the-right-doctype-for-your-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m3/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m3/ud3/index.html Spanish translation]<br />
* [[Generic containers - the div and span elements]]. [http://dev.opera.com/articles/view/22-altalanos-tarolok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud8/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud8/index.html Spanish translation]<br />
<br />
<br />
[[Category:WSC]]</div>Cmillshttps://www.w3.org/wiki/index.php?title=WSC_proposed_updates&diff=54192WSC proposed updates2011-09-30T09:39:04Z<p>Cmills: </p>
<hr />
<div> <br />
= Web standards curriculum on W3C Wiki: plan for updates 2011 =<br />
<br />
== The beginning ==<br />
<br />
[[Introduction to the Web Standards Curriculum]] by Chris Mills. '''{ -- JUST NEEDS A GENERAL READ, AND A LITTLE BIT OF TWEAKING}'''<br />
<br />
== Introduction to the world of web standards ==<br />
<br />
# [[The history of the Web|The history of the Internet and the web, and the evolution of web standards]], by Mark Norman Francis. { -- NEEDS A GENERAL READ, PLUS I THINK IT COULD BENEFIT FROM A BIT MORE HISTORY BEING ADDED ABOUT THE EVOLUTION OF HTML5 AND CSS3}<br />
# [[How does the Internet work]]? by Jonathan Lane. {-- NO TWEAKING NEEDED; JUST SPIT AND POLISH}<br />
# [[The web standards model - HTML CSS and JavaScript]] by Jonathan Lane. { -- A FEW TWEAKS NEEDED - THE HTML SECTION COULD DO WITH AN OVERHAUL TO CCOUNT FOR HTML5, AND DEAL WITH XHTML A BIT BETTER}<br />
# [[Beautiful dream, but what's the reality]]? by Jonathan Lane. { -- I THINK THIS ARTICLE COULD JUST BE REMOVED, AND A SMALL SECTION ADDED TO THE PREVIOUS ARTICLE TO COVER "THE REALITY OF IT ALL". AS IT STANDS, THIS ARTICLE IS A BIT OF A RANT, AND NOT REALLY THAT USEFUL TO EDUCATION}<br />
<br />
== Web Design Concepts ==<br />
<br />
This section won't go into any code or markup details, and will act as an introduction to the design process before you start to create any graphics or code, as well as concepts of web design such as IA, navigation, usability etc.<br />
<br />
# [http://www.w3.org/wiki/Information_Architecture_-_planning_out_a_web_site Information Architecture - planning out a web site], by Jonathan Lane.<br />
# [http://www.w3.org/wiki/What_does_a_good_web_page_need What does a good web page need?], by Mark Norman Francis.<br />
# [http://www.w3.org/wiki/Colour_theory Colour Theory], by Linda Goin.<br />
# [http://www.w3.org/wiki/Building_up_a_site_wireframe Building up a site wireframe], by Linda Goin.<br />
# [http://www.w3.org/wiki/Colour_schemes_and_design_mockups Colour schemes and design mockups], by Linda Goin. <br />
# [http://www.w3.org/wiki/Typography_on_the_Web Typography on the web], by Paul Haine.<br />
<br />
{ -- I THINK THIS WHOLE SECTION NEEDS AN OVERHAUL, AS CURRENTLY IT IS NOT VERY EFFECTIVE. THE TYPOGRAPHY AND IA SECTIONS ARE FINE, BUT I'M NOT SURE ABOUT THE OTHER STUFF. I THINK THE SECTION SHOULD BE RETITLED "PLANNING A WEB SITE", AND HAVE A STRUCTURE SOMETHING LIKE THE FOLLOWING: <br />
<br />
=== Planned New section to replace "Web Design Concepts" - to be called "Planning a web site" ===<br />
<br />
# [[Introduction to planning a web site]]<br />
# Scoping and user research<br />
# [[Information_Architecture_-_planning_out_a_web_site|Information Architecture - planning out a web site]]. [http://dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud1/index.html Spanish translation]<br />
# [[What_does_a_good_web_page_need|What does a good web page need?]] [http://dev.opera.com/articles/view/7-mi-kell-egy-jo-weblaphoz/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud2/index.html Spanish translation]<br />
# [[Typography on the Web]]. [http://dev.opera.com/articles/view/11-tipografia-a-weben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud6/index.html Spanish translation]<br />
# Colour schemes and deasign theory<br />
# Mockups and protptypes<br />
# User experience design<br />
<br />
== HTML basics ==<br />
<br />
# [http://www.w3.org/wiki/The_basics_of_HTML The basics of HTML], by Mark Norman Francis. { -- THIS LOOKS OK, ALTHOUGH I THINK IT NEEDS A BIT OF UPDATING TO ACCOUNT FOR HTML5, THE HISTORY SECTION, ETC. THE EXAMPLES SHOULD ALSO BE UPDATED TO HTML5 SEMANTICS, WHERE APPROPRIATE, EG NO MORE DIVS FOR PAGE SECTIONS}<br />
# [http://www.w3.org/wiki/The_HTML_head_element The HTML &lt;head&gt; element], by Christian Heilmann. { -- NEEDS UPDATING, AND HTML5 FEATURES ADDING, SUCH AS META CHARSET} <br />
# [http://www.w3.org/wiki/Choosing_the_right_doctype_for_your_HTML_documents Choosing the right doctype for your HTML documents], by Roger Johansson. { -- I THINK THAT THIS NEEDS TO BE REWRITTEN TO FOCUS LESS ON DOCTYPES, AND MORE ON HTML/XHTML RULES, HOW THEY DIFFER, WHAT DOCTYPES REALLY ACHIEVED, WHAT ONES YOU MIGHT ENCOUNTER IN THE WILD, WHY WE WILL BE USING HTML5 DOCTYPE IN THIS COURSE, WHAT IT ACHIEVES, ETC.}<br />
<br />
== The HTML body ==<br />
<br />
{ -- OVERALL THIS IS A REASONABLE SECTION, BUT QUITE A LOT NEEDS ADDING TO BRING IT UP TO DATE WITH HTML5, ETC. I WILL CLEARLY MARK NEW ARTICLES}<br />
<br />
# NEW ARTICLE - structural elements, section, article, etc. also including div and span<br />
# [http://www.w3.org/wiki/Marking_up_textual_content_in_HTML Marking up textual content in HTML], by Mark Norman Francis. { -- NEEDS UPDATING, AS SOME OF THESE ELEMENTS WILL HAVE CHANGED FUNCTION IN HTML5, AND DEPRECATED ELEMENTS HAVE BEEN REPURPOSED}<br />
# [http://www.w3.org/wiki/HTML_lists HTML Lists], by Ben Buchanan. { -- DOESN'T NEED MANY UPDATES}<br />
# [http://www.w3.org/wiki/Images_in_HTML Images in HTML], by Christian Heilmann. { -- NEEDS A BIT OF SPIT AND POLISH, AND NEEDS FIGURE AND FIGCAPTION ADDING}<br />
# [http://www.w3.org/wiki/HTML_links_-_lets_build_a_web HTML links — let's build a web!] by Christian Heilmann. { -- NEEDS SPIT AND POLISH, AND NEEDS THE CONCEPT OF BLOCK LEVEL LINKS ADDING}<br />
# NEW ARTICLE - HTML5 video and audio<br />
# [http://www.w3.org/wiki/HTML_tables HTML Tables], by Jen Hanen. { -- NOT MANY UPDATES NEEDED}<br />
# [http://www.w3.org/wiki/HTML_forms_-_the_basics HTML Forms — the basics], by Jen Hanen. { -- THERE IS A LOT OF NEW HTML5 FORM STUFF TO ADD, OBVIOUSLY - I THINK THAT IN THIS CIRCUMSTANCE, BECAUSE SUPPORT FOR HTML5 FORM STUFF IS PATCHY ACROSS BROWSERS RIGHT NOW, WE SHOULD DO SMALL UPDATES ON THE EXISTING ARTICLE, THEN ADD ONE OR MORE SEPARATE ARTICLES TO COVER THE NEW HTML5 FORM ELEMENTS AND NEW ATTRIBUTES, AND THEN PERHAPS SEPARATE COVERAGE OF VALIDATION}<br />
# [http://www.w3.org/wiki/Lesser_-_known_semantic_elements Lesser-known semantic elements], by Mark Norman Francis. {THIS WILL NEED UPDATING, AS A NUMBER OF THESE ELEMENTS HAVE BEEN REDEFINED}<br />
# [http://www.w3.org/wiki/Generic_containers_-_the_div_and_span_elements Generic containers — the div and span elements], by Mark Norman Francis. { -- REMOVE THIS ONE - THIS WILL BE COVERED IN THE STRUCTURAL ELEMENTS ARTICLE}<br />
# [http://www.w3.org/wiki/Creating_multiple_pages_with_navigation_menus Creating multiple pages with navigation menus], by Christian Heilmann.<br />
# [http://www.w3.org/wiki/Validating_your_HTML Validating your HTML], by Mark Norman Francis. { -- I THINK THIS COULD BE REWRITTEN AND IMPROVED, AND RELOCATED TO A SECTION ABOUT DEBUGGING WEB PAGES? A MORE COMPLETE TREATMENT WOULD BE NICE}<br />
<br />
== Accessibility specifics ==<br />
<br />
# [http://www.w3.org/wiki/Accessibility_basics Accessibility basics], by Tom Hughes-Croucher.<br />
# [http://www.w3.org/wiki/Accessibility_testing Accessibility testing], by Benjamin Hawkes-Lewis. {I THINK THIS NEEDS TO BE EXPANDED OUT TO SEVERAL ARTICLES, TO COVER DIFFERENT ASPECTS, SOMETHING LIKE:<br />
<br />
A. WRITING A PLAN FOR A11Y TESTING, INCLUDING USE OF REAL USER TESTING, CONFORMANCE CRITERIA, AUTOMATED TOOLS, AND GOOD OLD COMMON SENSE<br />
B. THE LEGAL SIDE OF THINGS, EXPLAINED IN DETAIL<br />
C. DECIPHERING WCAG, AND OTHER CONFORMANCE CRITERIA SUCH AS SECTION 508<br />
D. ACCESSIBILITY TOOLS, WHAT TO USE AND WHAT TO AVOID. HOW FAR WILL THESE GET YOU?<br />
E. REAL A11Y TESTING WITH REAL PEOPLE, HOW TO PUT TOGETHER FOCUS GROUPS, WHAT TO LOOK FOR HERE<br />
F. COMMON SENSE - SOLUTIONS FOR COMMON ACCESSIBILITY ISSUES - A ROADMAP FOR FIXING ISSUES. START WITH SEMANTIC HTML, THEN GO TO VIDEO AND AUDIO CONTENT, JAVASCRIPT, AJAX, ALTERNATIVES. }<br />
<br />
== CSS ==<br />
<br />
# [http://dev.opera.com/articles/view/27-css-basics/ CSS basics], by Christian Heilmann. { -- NEEDS A BIT OF SPRUCING UP, TO TALK ABOUT NEW STUFF, PLUS WE NEED TO ADD SOME STUFF ABOUT ALL THE NEW CSS SELECTORS. OF DO WE? MAYBE WE COULD JUST COVER THE BASIC SELECTORS HERE, AND THEN COVER SOME OF THE MORE ADVANCED ONES IN APPROPRIATE PLACES, EG FORM RELATED ONES, AND OTHER ADVANCED ONES IN AN ARTICLE OF THEIR OWN - SEE NEXT ARTICLE}<br />
# NEW ARTICLE - ADVANCED SELECTORS - cover all the advanced selectors that we didn't cover in the previous chapter - last nth of type, valid, invalid, nth child, etc. <br />
# NEW CHAPTER - CSS3 SHADOWS<br />
# [http://www.w3.org/wiki/Inheritance_and_cascade Inheritance and Cascade], by Tommy Olsson. { -- NOT MUCH TO UPDATE HERE}<br />
# [http://www.w3.org/wiki/Text_styling_with_CSS Text styling with CSS], by Ben Henick. { -- THIS IS A VERY WEIGHTY CHAPTER, AND COULD DO WITH SLIMMING DOWN A BIT, AND MAKING MORE GRANULAR, PERHAPS EVEN SPLITTING IT. ALSO ADD WEB FONTS, AND TALK ABOUT SOME OF THE MORE OBSCURE TEXT STYLING STUFF, LIKE TEXT-OVERFLOW, GENERATED CONTENT FOR QUOTES, WORD WRAP, ETC.}<br />
# [http://www.w3.org/wiki/The_CSS_layout_model_-_boxes_borders_margins_padding The CSS layout model - boxes, borders, margins, padding], by Ben Henick. { -- AGAIN, MIGHT NEED SPLITTING, NEED TO COVER DIFFERENT LAYOUT MODELS, BORDER-RADIUS ETC.}<br />
# [http://www.w3.org/wiki/CSS_background_images CSS background images], by Nicole Sullivan. { -- NEED TO UPDATE TO COVER MULTIPLE BACKGROUND IMAGES, BORDER-IMAGE, LINEAR GRADIENTS, MIGHT NEED MULTIPLE CHAPTERS}<br />
# [http://www.w3.org/wiki/Styling_lists_and_links Styling lists and links], by Ben Buchanan. { -- DOESN'T NEED THAT MUCH }<br />
# [http://www.w3.org/wiki/Styling_tables Styling tables], by Ben Buchanan. { -- DOESN'T NEED THAT MUCH }<br />
# [http://www.w3.org/wiki/Styling_forms Styling forms], by Ben Henick. { -- NEED TO ADD CSS3 FORM-RELATED PSEUDO CLASSES, AND DISCUSSION OF STYLING ERRORS AND STUFF}<br />
# [http://www.w3.org/wiki/Floats_and_clearing Floats and clearing], by Tommy Olsson. { - NOT THAT MUCH NEEDED, ALTHOUGH I NEED TO BE CAREFUL TO SEPARATE OUT MULTIPLE COLUMN LAYOUTS, AND COVER MULTI-COL THERE}<br />
# [http://www.w3.org/wiki/CSS_static_and_relative_positioning CSS static and relative positioning], by Tommy Olsson.<br />
# [http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning CSS absolute and fixed positioning], by Tommy Olsson. { -- THE POSITIONING CHAPTERS NEED SOME WORK, BUT NOT THAT MUCH}<br />
# NEW CHAPTER - CSS3 TRANSFORMS<br />
# NEW CHAPTER - CSS3 TRANSITIONS<br />
# NEW CHAPTER - CSS3 ANIMATIONS<br />
# NEW CHAPTER - ADAPTIVE WEB DESIGN FOR MOBILE - MEDIA QUERIES, VIEWPORT.<br />
# NEW CHAPTER - OBJECT FIT/OBJECT POSITION<br />
<br />
== Advanced CSS study ==<br />
<br />
# [http://www.w3.org/wiki/Headers_footers_columns_and_templates Headers, footers, columns, and templates], by Ben Henick { -- NOT SURE HOW USEFUL THIS IS, MAYBE DISSECT IT, PUT THE USEFUL STUFF IN OTHER CHAPTERS. A BIT TOO LONG WINDED. }<br />
<br />
== JavaScript ==<br />
<br />
# [http://www.w3.org/wiki/Programming_-_the_real_basics Programming - the real basics!], by Christian Heilmann<br />
# [http://www.w3.org/wiki/What_can_you_do_with_JavaScript What can you do with JavaScript?], by Christian Heilmann<br />
# [http://www.w3.org/wiki/Your_first_look_at_JavaScript Your first look at JavaScript], by Christian Heilmann<br />
# [http://www.w3.org/wiki/JavaScript_best_practices JavaScript best practices], by Christian Heilmann<br />
# [http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript The principles of unobtrusive JavaScript], by PPK<br />
# [http://www.w3.org/wiki/JavaScript_functions JavaScript functions], by Mike West<br />
# [http://www.w3.org/wiki/Objects_in_JavaScript Objects in JavaScript], by Mike West<br />
# [http://www.w3.org/wiki/Traversing_the_DOM Traversing the DOM], by Mike West<br />
# [http://www.w3.org/wiki/Creating_and_modifying_HTML Creating and modifying HTML], by Stuart Langridge<br />
# [http://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript Dynamic style - manipulating CSS with JavaScript], by Greg Schechter<br />
# [http://www.w3.org/wiki/Handling_events_with_JavaScript Handling events with JavaScript], by Robert Nyman<br />
# [http://www.w3.org/wiki/JavaScript_animation JavaScript animation], by Stuart Langridge<br />
# [http://www.w3.org/wiki/Graceful_degredation_versus_progressive_enhancement Graceful degredation versus progressive enhancement], by Christian Heilmann<br />
<br />
== HTML5 APIS ==<br />
<br />
PROBABLY NEED TO INTERSPERSE THESE IN THE ABOVE SECTION, OR PUT NEW SECTIONS IN, EG "OFFLINE WEB APPLICATIONS" WOULD WORK WELL AS A DISTINCT SECTION.<br />
<br />
# MEDIA API<br />
# GEOLOCATION (YEAH, NOT HTML5, BUT HEY)<br />
# WEB WORKERS<br />
# WEB SOCKETS<br />
# APPCACHE<br />
# WEBSQL/INDEXEDDB<br />
# WEB STORAGE<br />
# CANVAS (SHOULD PROBABLY HAVE ITS OWN SECTION ENTIRELY)<br />
# HTML5 HISTORY API<br />
# DATASETS<br />
<br />
== OTHER THINGS TO COVER ==<br />
<br />
# SVG (REALLY NEEDS ITS OWN COURSE)<br />
# WAI-ARIA<br />
<br />
== Mobile web development - proposed new structure ==<br />
<br />
=== The basics ===<br />
<br />
# [[Mobile beginnings: An introduction to the mobile web]] (include history of mobiles, how mobile networks work, what the hardware looks like, what the software looks like)<br />
# [[What do the devices look like?]] (a fairly detailed reference showing the types of devices you are likely to need to support when building cross device adaptive apps)<br />
# [[Mobile constraints and advantages]] (what are the constraints you need to work around for alternative browsing devices? What are the advantages, eg the context specific technologies you can take advantage of?)<br />
<br />
=== Adaptive design and development ===<br />
<br />
# [[Mobile friendly: an introduction to mobile web design]] (start with a basis of semantic HTML, accessibility best practices are Making an app or site mobile friendly - do you create a different site, or do you adapt your existing site for mobile? A brief introduction to Adaptive design - graceful degradation, progressive enhancement, using media queries and viewport to adapt layout, using feature detection to server appropriate content and services, NOT browser sniffing!)<br />
# [[Designing a mobile user experience]] (all about context, what does the user want to do in this context, how does it differ from the desktop, etc.?)<br />
# [[Optimising CSS and JavaScript for mobile]]<br />
# [[Media Queries]]<br />
# [[Viewport]]<br />
# [[Adaptive layouts for mobile]] (apply the basics you learned in the last two)<br />
# [[Device aware apps]] (Geolocation, etc.)<br />
# [[Multimedia on mobile]] (dealing with images, video, audio)<br />
# [[Offline apps for mobile]] (web storage, AppCache, WebSQL)<br />
# [[Putting together a mobile testing suite]]<br />
<br />
== Supplementary articles ==<br />
<br />
* [http://www.w3.org/wiki/Getting_your_content_online Getting your content online], by Craig Grannell. { -- DOESN'T NEED CHANGES }<br />
* [http://www.w3.org/wiki/More_about_the_document_head More about the document &lt;head&gt;], by Chris Heilmann. { -- PROBABLY DOESN'T NEED CHANGES, ALTHOUGH IT WOULD BE NICE TO MOVE IT INTO THE MAIN HTML SECTION, AS IT GETS LOST OUT HERE }<br />
* [http://www.w3.org/wiki/Common_HTML_entities_used_for_typography Common HTML entities used for typography], by Ben Henick. { -- DOESN'T NEED MANY CHANGES }<br />
* [http://www.w3.org/wiki/The_web_standards_curriculum_glossary The Opera Web Standards Curriculum glossary], by various authors. This is incomplete, and will be added to as time goes by. { -- NEEDS A LOT OF TERMS ADDING, IF IT IS TO BE USEFUL }<br />
<br />
== Deprecated articles: removeed from original WSC ==<br />
<br />
* [[Choosing the right doctype for your HTML documents]]. [http://dev.opera.com/articles/view/14-megfelelo-doctype-valasztasa/ Hungarian translation] | [http://dev.opera.com/articles/view/14-choosing-the-right-doctype-for-your-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m3/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m3/ud3/index.html Spanish translation]<br />
* [[Generic containers - the div and span elements]]. [http://dev.opera.com/articles/view/22-altalanos-tarolok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud8/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud8/index.html Spanish translation]<br />
<br />
<br />
[[Category:WSC]]</div>Cmillshttps://www.w3.org/wiki/index.php?title=Web_Standards_Curriculum&diff=54191Web Standards Curriculum2011-09-30T09:38:51Z<p>Cmills: </p>
<hr />
<div>= Web Standards Curriculum table of contents =<br />
<br />
== Introduction ==<br />
<br />
What follows is a list of all the articles within the web standards curriculum, which will give you an essential grounding in HTML5, CSS, JavaScript, accessibility, and the other topics you need to be a modern web developer/designer. Reading them in order makes the most sense, but they are written to work individually, so you can dip in and out as it suits you, if you need to hone individual skills.<br />
<br />
Note: This material was originally published as part of the Opera Web Standards Curriculum, available as [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/#toc Introductory material], written by Chris Mills. Like the original, it is published under the [http://creativecommons.org/licenses/by-nc-sa/2.5/ Creative Commons Attribution, Non Commercial - Share Alike 2.5] license.<br />
<br />
Note #2: Many of the links below currently point to the [http://dev.opera.com dev.opera] versions, but we'll change these over to the W3C versions as we add more to the site. We are very happy to add these to the W3C pages, for a wider readership and more maintenance help.<br />
<br />
== Table of contents ==<br />
<br />
=== The beginning ===<br />
<br />
[[Introduction to the Web Standards Curriculum]]. [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-he/ Hebrew translation] | [http://dev.opera.com/articles/view/1-bevezeto-a-webes-szabvanyokba/ Hungarian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-it/ Italian translation] | [http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/ Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/ Spanish translation]<br />
<br />
=== Introduction to the world of web standards ===<br />
<br />
# [[The history of the Web|The history of the Internet and the web, and the evolution of web standards]]. [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-he/ Hebrew translation] | [http://dev.opera.com/articles/view/2-az-internet-es-a-web-tortenete/ Hungarian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-it/ Italian translation] | [http://dev.opera.com/articles/view/2-the-history-of-the-internet-and-the-w-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud1/index.html Spanish translation]<br />
# [[How does the Internet work]]? [http://dev.opera.com/articles/view/3-hogyan-mukodik-az-internet/ Hungarian translation] | [http://dev.opera.com/articles/view/3-how-does-the-internet-work-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud2/index.html Spanish translation]<br />
# [[The web standards model - HTML CSS and JavaScript]]. [http://dev.opera.com/articles/view/4-a-webes-szabvanyok-modellje/ Hungarian translation] | [http://dev.opera.com/articles/view/4-the-web-standards-model-html-css-a-ja/ Japanese translation]| [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m1/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m1/ud3/index.html Spanish translation]<br />
<br />
=== Web Design Concepts ===<br />
<br />
This section won't go into any code or markup details, and will act as an introduction to the design process before you start to create any graphics or code, as well as concepts of web design such as IA, navigation, usability etc.<br />
<br />
# [[Information_Architecture_-_planning_out_a_web_site|Information Architecture - planning out a web site]]. [http://dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud1/index.html Spanish translation]<br />
# [[What_does_a_good_web_page_need|What does a good web page need?]] [http://dev.opera.com/articles/view/7-mi-kell-egy-jo-weblaphoz/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud2/index.html Spanish translation]<br />
# [[Colour_theory|Colour Theory]]. [http://dev.opera.com/articles/view/8-a-szinek-elmelete/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud3/index.html Spanish translation]<br />
# [[Building up a site wireframe]]. [http://dev.opera.com/articles/view/9-egy-site-keretenek-felepitese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud4/index.html Spanish translation] <br />
# [[Colour schemes and design mockups]]. [http://dev.opera.com/articles/view/10-szinsemak-es-designtervek/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud5/index.html Spanish translation]<br />
# [[Typography on the Web]]. [http://dev.opera.com/articles/view/11-tipografia-a-weben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m2/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m2/ud6/index.html Spanish translation]<br />
<br />
=== HTML beginnings ===<br />
<br />
# [[The basics of HTML]]. [http://dev.opera.com/articles/view/12-a-html-alapjai/ Hungarian translation] | [http://dev.opera.com/articles/view/12-the-basics-of-html-ja/ Japanese translation]<br />
# [[Doctypes and markup styles]]<br />
# [[The_HTML_head_element|The HTML &lt;head&gt; element]]. [http://dev.opera.com/articles/view/13-a-html-head-eleme/ Hungarian translation] | [http://dev.opera.com/articles/view/13-the-html-head-element-ja/ Japanese translation] | [http://mosaic.uoc.edu/ac/le/ca/m3/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m3/ud1/index.html Spanish translation]<br />
# [[More_about_the_document_head|More about the document &lt;head&gt;]]<br />
<br />
=== The HTML body ===<br />
<br />
# [[Marking up textual content in HTML]]. [http://dev.opera.com/articles/view/15-szoveges-reszek-megjelolese/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud1/index.html Spanish translation]<br />
# [[HTML lists|HTML Lists]]. [http://dev.opera.com/articles/view/16-html-listak/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud2/index.html Spanish translation]<br />
# [[Images in HTML]]. [http://dev.opera.com/articles/view/17-kepek-a-htmlben/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud3/index.html Spanish translation]<br />
# [[HTML_links_-_lets_build_a_web|HTML links — let's build a web!]] [http://dev.opera.com/articles/view/18-html-hivatkozasok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud4/index.html Spanish translation]<br />
# [[HTML tables]]. [http://dev.opera.com/articles/view/19-html-tablazatok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud5/index.html Spanish translation]<br />
# [[HTML forms - the basics]]. [http://dev.opera.com/articles/view/20-html-urlapok/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud6/index.html Spanish translation]<br />
# [[HTML5 form additions]]<br />
# [[HTML structural elements]]<br />
# [[Lesser - known semantic elements]]. [http://dev.opera.com/articles/view/21-kevesse-ismert/ Hungarian translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/ca/m4/ud7/index.html Spanish translation]<br />
# [[Creating multiple pages with navigation menus]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud9/index.html Spanish translation]<br />
# [[Validating your HTML]]. [http://mosaic.uoc.edu/ac/le/ca/m4/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m4/ud10/index.html Spanish translation]<br />
<br />
=== Accessibility ===<br />
<br />
# [[Accessibility basics]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud1/index.html Spanish translation]<br />
# [[Accessibility testing]]. [http://mosaic.uoc.edu/ac/le/ca/m5/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m5/ud2/index.html Spanish translation]<br />
<br />
=== CSS ===<br />
<br />
# [[CSS_basics|CSS basics]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud1/index.html Spanish translation]<br />
# [[Inheritance and cascade]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud2/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud2/index.html Spanish translation]<br />
# [[Text styling with CSS]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud3/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud3/index.html Spanish translation]<br />
# [[The_CSS_layout_model_-_boxes_borders_margins_padding|The CSS layout model - boxes, borders, margins, padding]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud4/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud4/index.html Spanish translation]<br />
# [[CSS background images]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud5/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud5/index.html Spanish translation]<br />
# [[Styling_lists_and_links|Styling lists and links]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud6/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud6/index.html Spanish translation]<br />
# [[Styling tables]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud7/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html Spanish translation]<br />
# [[Styling forms]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud8/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud8/index.html Spanish translation]<br />
# [[Floats and clearing]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud9/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud9/index.html Spanish translation]<br />
# [[CSS static and relative positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud10/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud10/index.html Spanish translation]<br />
# [[CSS absolute and fixed positioning]]. [http://mosaic.uoc.edu/ac/le/ca/m6/ud11/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m6/ud11/index.html | Spanish translation]<br />
# [[Debugging CSS]]<br />
<br />
=== Advanced CSS study ===<br />
<br />
# [[Headers_footers_columns_and_templates|Headers, footers, columns, and templates]]. [http://mosaic.uoc.edu/ac/le/ca/m7/ud1/index.html Catalan translation] | [http://mosaic.uoc.edu/ac/le/es/m7/ud1/index.html Spanish translation]<br />
<br />
=== JavaScript core skills ===<br />
<br />
# [[Programming_-_the_real_basics|Programming - the real basics!]]<br />
# [[What can you do with JavaScript]]<br />
# [[Your first look at JavaScript]]<br />
# [[JavaScript best practices]]<br />
# [[The principles of unobtrusive JavaScript]]<br />
# [[JavaScript functions]]<br />
# [[Objects in JavaScript]]<br />
# [[Traversing the DOM]]<br />
# [[Creating and modifying HTML]]<br />
# [[Dynamic style - manipulating CSS with JavaScript]]<br />
# [[Handling events with JavaScript]]<br />
# [[JavaScript animation]]<br />
# [[Graceful degredation versus progressive enhancement]]<br />
<br />
=== Mobile web development ===<br />
<br />
# [[Introduction_to_mobile_web|Mobile 1: Introduction to mobile web]]<br />
<br />
=== Supplementary articles ===<br />
<br />
* [[Getting your content online]]<br />
* [[Common HTML entities used for typography]]<br />
* [[The web standards curriculum glossary]]<br />
<br />
=== Proposed Updates and Additions to Web Standards Curriculum ===<br />
<br />
* [[WSC_proposed_updates|Web standards curriculum on W3C Wiki: plan for updates 2011]]<br />
<br />
[[Category:Tutorials]]<br />
[[Category:WSC]]</div>Cmillshttps://www.w3.org/wiki/index.php?title=Talk:Validating_your_HTML&diff=53525Talk:Validating your HTML2011-08-22T19:54:57Z<p>Cmills: </p>
<hr />
<div>== Future updates ==<br />
<br />
UPDATE - 22nd August 2011: I just added a few bits in about validator.nu, and the HTML5 markup error handling definition. I have decided to save more extensive debugging for the CSs and JavaScript sections.<br />
<br />
-- I THINK THIS COULD BE REWRITTEN AND IMPROVED, AND RELOCATED TO A SECTION ABOUT DEBUGGING WEB PAGES? A MORE COMPLETE TREATMENT WOULD BE NICE<br />
<br />
== About the author ==<br />
<br />
[[Image:norm0000.jpg|Picture of the article author Mark Norman Francis]] <br />
<br />
Photo credit: [http://flickr.com/photos/andybudd/98405468/ Andy Budd].<br />
<br />
Mark Norman Francis has been working with the internet since before the web was invented. He is currently a Technologist working on [http://www.artfinder.com/ Artfinder]. In his spare time he watches TV, writes code which he publishes on [https://github.com/norm github] and pretends to have a [http://marknormanfrancis.com/ blog].<br />
<br />
Previously he worked at Yahoo! as a Front End Architect, defining best practices, coding standards and quality in web development internationally; before that at Formula One Management, Purple Interactive and City University in various roles including web development, backend CGI programming and systems architecture.</div>Cmillshttps://www.w3.org/wiki/index.php?title=Validating_your_HTML&diff=53524Validating your HTML2011-08-22T19:49:43Z<p>Cmills: </p>
<hr />
<div>== Introduction ==<br />
<br />
So you’ve written a few HTML pages, and they seem to display ok to you, but there are a few things not quite right with them. What is the best way to start finding out what is wrong, and ensure that these pages (and any future pages you write) will be displayed properly across browsers, with no errors?<br />
<br />
Validation is the answer! There are many tools available, from the W3C and other places, that allow you to validate the code on your sites. The most common three validators you’ll use are:<br />
<br />
* [http://html5.validator.nu/ Validator.nu]: A new-school validator that validates HTML5, ARIA, SVG 1.1 and MathML 2.0: it goes through the entire document pointing out places where your markup doesn’t follow that doctype correctly (ie where there are errors). This is the one we recommend if you are using the HTML5 doctype, like we do throughout most of this course.<br />
* [http://validator.w3.org/ The W3C MarkUp Validator]: This looks at the (X)HTML doctype you are using for the document you give it to check, and then checks your markup accordingly. This is the one we recommend if you are using an HTML4 or XHTML1.x doctype. It does validate HTML5, but validator.nu is arguably more up to date.<br />
* [http://validator.w3.org/checklink The W3C Link Checker]: This looks through a document you give it to check, and tests all the links inside that document to make sure they are not broken (ie the <code>&lt;href&gt;</code> values point to resources that don’t exist).<br />
* [http://jigsaw.w3.org/css-validator/ The W3C CSS Validator]: As you’ve probably guessed, this will go through a CSS (or HTML/CSS) document and check that the CSS follows the CSS specs properly.<br />
<br />
In this [http://www.w3.org/wiki/Web_Standards_Curriculum Web Standards Curriculum] article, we will cover how to use the first two of these, showing you how to validate markup, interpreting the typical kinds of results the validator gives you. The link checker is very obvious, and we'll cover debugging CSs later on in the course.<br />
<br />
== Errors ==<br />
<br />
In computer programming, there are broadly speaking two kinds of problems with code:<br />
<br />
* syntactical errors — these are where a mistake in the writing of the code causes the computer to be unable to execute or compile the program properly.<br />
* programming (or logic) errors — these are where the code does not completely reflect the intent of the programmer.<br />
<br />
With most programming languages, the first error is incredibly easy to spot — your program will just refuse to run or compile until the error is fixed. This makes finding and fixing these types of bugs much easier in those general head-scratching moments of “So why isn’t it doing what I want?”<br />
<br />
HTML is not a programming language. Syntax errors in a web page do not commonly cause the web browser to refuse to open the page (although XHTML tends to be a lot stricter than HTML — at least when served as "[[http://www.w3.org/wiki/Doctypes_and_markup_styles#Serving_.22real.22_XML proper XML]]"). This is one of the biggest reasons for the rapid adoption and spread of the web.<br />
<br />
[http://www.w3.org/People/Berners-Lee/WorldWideWeb.html The first web browser, WorldWideWeb] (written by Tim Berners-Lee) was also an editor, allowing people to create web pages without learning HTML first. This editor created invalid HTML. This could have been fixed, but it established an important precedent that exists in all web browsers to this day — that allowing people access to the content is more important than complaining about errors to people that won’t understand them or be in a position to fix them.<br />
<br />
== What is validation? ==<br />
<br />
Although web browsers will accept bad (''invalid'' is the official term) web pages and do their best to render the code by making a best guess of the author’s intention, it is still possible to check whether the HTML has been written correctly, and indeed it is a good idea to do so, as you’ll see below. We call this “validating” the HTML.<br />
<br />
The validation program compares the HTML code in the web page with the rules of the accompanying [[doctype]] and tells you if and where those rules have been broken.<br />
<br />
== Why validate? ==<br />
<br />
There is a common feeling amongst some web developers that if a web page looks fine in browsers, it doesn’t matter if it doesn’t validate. They describe validation as an ideal goal, but not something that is a black-and-white issue.<br />
<br />
There is some wisdom in this attitude. The HTML4 specification is not perfect, and some things that were arguably correct — such as [http://www.w3.org/wiki/HTML_lists#Beginning_ordered_lists_with_numbers_other_than_1 starting an ordered list at a point other than 1] — were invalid HTML. HTML5 fixes quite a lot of spec issues including this one, but you may still run into situations where the validation may need to be broken. As the saying goes:<br />
<br />
''Learn the rules so you know how to break them properly.''<br />
<br />
There are two very powerful reasons to validate your HTML as you author it:<br />
<br />
* You are not always perfect, and neither is your code — we all make mistakes, and your web pages will be higher quality (ie, work more consistently) if you weed out all the mistakes.<br />
* Browsers change. In the future, it is likely that browsers will be less forgiving when parsing invalid code, not more forgiving.<br />
<br />
Validation is your early-warning system about introducing bugs into your markup that can manifest in interesting and hard-to-determine ways. When a browser encounters invalid HTML, it has to take an educated guess as to what you meant to do—and different browsers can come up with different answers.<br />
<br />
== Different browsers interpret invalid HTML differently ==<br />
<br />
Valid HTML is the only contract you have with the browser manufacturers. The HTML specification says how you should write it, and how they should interpret your document. In recent times, standards compliance of browsers has reached the point where, as long as you write valid code, all the major browsers should interpet your code the same. This is almost always the case for HTML anyway, with other standards having a few more differences in support here and there.<br />
<br />
But what if you pass a browser invalid code? What happens then? The answer is that the browser error handling comes into play to work out what to do with the code. It basically says “ok, this code doesn’t validate, so how do we present this page to the end user? Let's fill in the gaps like this!”<br />
<br />
It sounds great doesn’t it? If you leave a few errors in your page, the browser will fill in the gaps for you? Not so, as each browser does things differently. For example:<br />
<br />
<pre>&lt;p&gt;&lt;strong&gt;This text should be bold&lt;/p&gt;<br />
&lt;p&gt;Should this text be bold? How does the HTML look when rendered?&lt;/p&gt;<br />
<br />
&lt;p&gt;&lt;a href="#"&gt;&lt;/strong&gt;This text should be a link&lt;/p&gt;<br />
&lt;p&gt;Should this text be a link? How does the HTML look when rendered?&lt;/p&gt;</pre><br />
<br />
The errors are that the <code>&lt;strong&gt;</code> element is incorrectly nested across multiple block elements, and the anchor element is not closed. When you try to render this across different browsers, they interpret the code in very different ways:<br />
<br />
* Opera makes the subsequent elements children of the bold element.<br />
* Firefox adds extra bold elements between the paragraphs, which were not present in the markup.<br />
* Internet Explorer puts the text “This text should be a link” outside the anchor tag that creates the link.<br />
<br />
This original version of this example can be found in Hallvord Steen’s article [http://www.thinkvitamin.com/features/dev/same-dom-errors-different-browser-interpretations Same DOM errors, different browser interpretations] — read this for a much deeper treatment of HTML errors, and some information about debugging tools.<br />
<br />
None of the different browsers’ behaviours is incorrect; they’re all trying to fill in the gaps of your incorrect code. The bottom line is, ''avoid invalid markup if at all possible in your page''!<br />
<br />
Note that HTML5 fixes this, as for the first time in the history of HTML it defines how browsers should handle badly-formed markup. At the time of writing however, support for this HTML5 error handling was not widespread across browsers, so you can't yet rely on it.<br />
<br />
== How to validate your pages ==<br />
<br />
Now we’ve explored all the theory behind validating your HTML, we’ll talk about the easy part — the actual validation! Ok, that’s not completely accurate. Putting a URL into a validator and seeing if the page is valid or not is easy; working out what is wrong and fixing the errors is sometimes not so easy, as the error messages can sometimes be a little bit cryptic. I’ll go through some examples below.<br />
<br />
The example we’ll be looking at in this section is as follows (you can also [http://dev.opera.com/articles/view/24-validating-your-html/example_validation.html download or view the HTML]):<br />
<br />
<pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;<br />
&lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en"&gt;<br />
&lt;head&gt;<br />
&lt;title&gt;Validating your HTML&lt;/title&gt;<br />
&lt;/head&gt;<br />
&lt;body&gt;<br />
&lt;h2&gt;The tale of Herbet Gruel&lt;/h2&gt;<br />
&lt;p&gt;Welcome to my story. I am a slight whisp of a man, slender and fragile, features wrinkled and worn, eyes sunken into their sockets like rabbits cowering in their burrows. The &lt;em&gt;years have not been kind to me&lt;/em&gt;, but yet I hold no regrets, as I have overcome all that sought to ail me, and have been allowed to bide my time, making mischief as I travel to and fro, 'cross the unyielding landscape of the &lt;a href="http://outer-rim-rocks.co.uk" colspan="3"&gt;outer rim&lt;/a&gt;.&lt;/p&gt;<br />
<br />
&lt;h3&gt;Buster&lt;/h3&gt;<br />
&lt;p&gt;Buster is my guardian angel. Before that, he was my dog. Before that, who knows? I lost my dog many moons ago while out hunting geese in the undergrowth. A shot rang out from my rifle, and I called for Buster to collect the goose I had felled. He ran off towards where the bird had landed, but never returned. I never found his body, but I comfort myself with the thought that he did not die; rather he transcended to a higher place, and now watches over me, to ensure my well-being.<br />
<br />
&lt;h3&gt;My possessions&lt;/h3&gt;<br />
&lt;p&gt;A travelling man needs very little to accompany him on the road:&lt;/p&gt;<br />
&lt;ul&gt;<br />
&lt;li&gt;My hat full of memories&lt;/li&gt;<br />
&lt;li&gt;My trusty walking cane&lt;/li&gt;<br />
&lt;li&gt;A purse that did contain gold at one time&lt;/li&gt;<br />
&lt;li&gt;A diary, from the year 1874&lt;li&gt;<br />
&lt;li&gt;An empty glasses case&lt;/li&gt;<br />
&lt;li&gt;A newspaper, for when I need to look busy&lt;/li&gt;<br />
&lt;/ul&gt;<br />
&lt;/body&gt;<br />
</pre><br />
<br />
This simple page consists of three headings, three paragraphs, one hyperlink, and one unordered list. It uses the XHTML 1.0 Strict doctype as its rule set to validate against. There are a few errors in the document, which you’ll discover below using the W3C HTML validator. We used XHTML 1.0 strict because it is more likely to throw up errors than the HTML5 doctype.<br />
<br />
=== The W3C HTML validator ===<br />
<br />
The [http://validator.w3.org/ W3C has an online validator available] — navigate to this by right/ctrl-clicking on the hyperlink you see here and selecting the “Open in new tab” option — it’ll be useful to be able to switch tabs to get between the validator and this article as you go through this example.<br />
<br />
Note that you can also validate pages in the W3C validator from directly within the Opera browser by simply right/Ctrl-clicking and selecting the “Validate” option.<br />
<br />
You’ll notice that the validator has three tabs available across the top of the interface:<br />
<br />
* Validate by URI: Allows you to enter the address of a page already on the internet for validation.<br />
* Validate by File Upload: Allows you to upload an HTML file for validation.<br />
* Validate by Direct Input: Allows you to paste the contents of an HTML file into the window for validation.<br />
<br />
Whichever method you use should give you the same result; it’s easiest to test the example page from here by copying the full example code from above, and pasting it into the third tab along. Doing so should give you the result shown in Figure 1:<br />
<br />
[[Image:figure10.gif|The results of validating the sample document is 17 errors]] <br />
<br />
Figure 1: The results of validating the sample document — 17 errors!<br />
<br />
This may sound worrying, especially when we tell you that there aren’t 17 errors in the document! Don’t despair — it is reporting more errors than there actually are because often an error at the top of the page will cascade, making the validator report more errors further down, as it looks like more elements are not closed or incorrectly nested. You just have to think about what the error messages mean, and look for obvious errors in the markup. Table 1 below shows all of the errors we fixed to make the page validate, along with our logic for working out what was wrong, and the fixes we applied to solve the problem.<br />
<br />
{| border="1"<br />
|+Table 1: The errors I fixed to make the example page validate<br />
|-<br />
!Error message<br />
!Logic<br />
!Fix made<br />
|-<br />
|Line 8, Column 461: there is no attribute "colspan"<br />
|We know that there is a <code>colspan</code> attribute, and it is valid HTML, so why is it saying it doesn’t exist? Wait, maybe it means it is being used on an element that you shouldn’t use it on? Sure enough, it is being used on an <code>&lt;a&gt;</code> element — wrong!<br />
|Removed the <code>colspan</code> attribute from the <code>&lt;a&gt;</code> element.<br />
|-<br />
|Line 13, Column 7: document type does not allow element "h3" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag . &lt;h3&gt;My possessions&lt;/h3&gt;<br />
|Again, from first glance this seems strange — the <code>&lt;h3&gt;</code> element is properly closed, and allowed in this context. You should note that often, this error message means that there is an unclosed element nearby…<br />
|Added a closing <code>&lt;p&gt;</code> tag to the line above the heading in question.<br />
|-<br />
|Line 19, Column 40: document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag. &lt;li&gt;A diary, from the year 1874&lt;li&gt;<br />
|This one is pretty easy — you can see from the line it is pointing you to, at a glance, that the end <code>&lt;li&gt;</code> tag has a missing closing slash (/)<br />
|Added a closing slash to the line in question.<br />
|-<br />
|Line 23, Column 9: end tag for "html" omitted, but OMITTAG NO was specified . &lt;/body&gt;<br />
|Again, it doesn’t take much to work out that this means the end <code>&lt;html&gt;</code> tag is missing. The error message explanation even starts with You may have neglected to close an element.<br />
|Added the missing end <code>&lt;html&gt;</code> element.<br />
|} <br />
With these errors fixed, the validator now gives a rather satisfying success message, as shown in Figure 2:<br />
<br />
[[Image:figure20.gif|A success message to say that all my errors have been fixed]] <br />
<br />
Figure 2: A success message to say that all my errors have been fixed.<br />
<br />
This is about all there is to it really. You just need to keep your wits about you, and remember what doctype your page is being validated against. [http://dev.opera.com/articles/view/24-validating-your-html/example_validation_fixed.html Download or view a fixed version of the HTML]<br />
<br />
== Summary ==<br />
<br />
After reading this article, you should be comfortable with using the online W3C validator to validate your HTML. This really is the tip of the iceberg with regards to validation — there are more complicated tools listed below, which will help you out as your pages start to get larger and more complicated.<br />
<br />
== Further tools to check out ==<br />
<br />
* [http://www.opera.com/dragonfly/ Opera Dragonfly] (built into Opera)<br />
* [https://www.squarefree.com/bookmarklets/validation.html General validation bookmarklet]<br />
* [http://chrispederick.com/work/web-developer/ The Firefox web developer toolbar extension]<br />
* [http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en The IE developer toolbar]<br />
* [http://zappatic.net/safaritidy/ Safari tidy]<br />
* [http://tidy.sourceforge.net/ HTML tidy]<br />
<br />
== Exercise questions ==<br />
<br />
* What happens when a browser parses invalid HTML?<br />
* What is the problem with this?<br />
* Will using a frameset in a document validated against the HTML 4 Strict doctype generate an error?<br />
<br />
Note: This material was originally published as part of the Opera Web Standards Curriculum, available as [http://dev.opera.com/articles/view/24-validating-your-html/ 24: Validating your HTML], written by Mark Norman Francis. Like the original, it is published under the [http://creativecommons.org/licenses/by-nc-sa/2.5/ Creative Commons Attribution, Non Commercial - Share Alike 2.5] license.<br />
<br />
[[Category:Tutorials]]<br />
[[Category:WSC]]<br />
[[Category:HTML]]</div>Cmills