View Full Version : HTML & CSS Resources

07-28-2011, 05:00 PM
HTML & CSS Resources


Basic HTML & CSS Tutorials (http://www.codingforums.com/showpost.php?p=1117630&postcount=2)
What DTD/DocType should I use? (http://www.codingforums.com/showpost.php?p=1117631&postcount=3)
Testing in Browsers/X-UA-Compatible (http://www.codingforums.com/showpost.php?p=1117632&postcount=4)
HTML & CSS Official Documentation and Validation (http://www.codingforums.com/showpost.php?p=1117633&postcount=5)
How do I protect my source code? (http://www.codingforums.com/showpost.php?p=1117637&postcount=6)
HTML & CSS FAQs (http://www.codingforums.com/showthread.php?t=35014)

07-28-2011, 05:01 PM
Basic HTML & CSS Tutorials

Bare essentials

Just starting out with HTML? Here are 10 essential HTML tags that you'll need to know when building your web pages. If you learn how these 10 tags work then you'll have enough knowledge to put together a basic page. http://www.elated.com/articles/first-10-html-tags/

How to Make a Web Page:

Full Web Building Tutorials: http://www.w3schools.com/
Beginner's HTML Tutorial: http://www.htmlbasix.com/
How to Create a Webpage: http://www.make-a-web-site.com/ http://www.w3schools.com/site/default.asp
So, you want to make a Web Page!: http://www.pagetutor.com/html_tutor/index.html

Getting started with HTML: http://www.w3.org/MarkUp/Guide/
Basic HTML Code / Tags For Simple Web Page: http://www.ibdhost.com/help/html/
HTML Examples: http://www.w3schools.com/html/html_examples.asp
The Web Book (free): http://www.the-web-book.com/index.php

How to Make a Web Site:

How to Create a Web Site: http://www.4creatingawebsite.com/?=gg
Web Developer Class: Learn the Basic HTML Tags!: http://www.htmlgoodies.com/primers/h...le.php/3478151
So You Want To Set Up Your First Site, Huh?: http://www.htmlgoodies.com/tutorials...le.php/3479561
How To Build a Web Site: Develop a Project Outline : http://www.htmlgoodies.com/tutorials...le.php/3862031
How to Start / Create Your Own Website: The Beginner's A-Z Guide: http://www.thesitewizard.com/getting...twebsite.shtml

Choosing Dimensions for Your Web Page Layout:

In Search of the Holy Grail: http://www.alistapart.com/articles/holygrail/
How to create flexible sites quickly using standards like CSS and XHTML: http://www.ibm.com/developerworks/web/library/wa-rapid/

960 Grid System: http://960.gs/

Care With Font Size: http://www.w3.org/QA/Tips/font-size

Why Validate?: http://validator.w3.org/docs/why.html
CSS Validator: http://jigsaw.w3.org/css-validator/
HTML Validator: http://validator.w3.org/#validate_by_uri+with_options
But it Doesn’t Validate : http://net.tutsplus.com/articles/gen...esnt-validate/

Web Editors (Many Free):

10 Fantastic Free Web Page Editors: http://www.elated.com/articles/10-fa...-page-editors/
Free HTML Editors, Web Editors, and WYSIWYG Web Editors and Site Builders:
WYSIWYG Editor List: http://en.wikipedia.org/wiki/List_of...YSIWYG_editors
25 Useful WYSIWYG Editors Reviewed: http://www.smashingmagazine.com/2008...tors-reviewed/
Basic text editors: http://en.wikipedia.org/wiki/List_of...c_text_editors

(full credit: MajorPayne (http://www.codingforums.com/member.php?u=25097))

Miscellaneous resources:

Integrated Web Design: Strategies for Long-Term CSS Hack Management (http://www.informit.com/articles/article.asp?p=170511&seqNum=1) by Molly Holzschlag
Why tables for layout is stupid: problems defined, solutions offered (http://www.hotdesign.com/seybold/index.html) by Bill Merikallio & Adam Pratt
/CSS/ - A Guide for the unglued (http://www.thenoodleincident.com/tutorials/css/index.html) (Owen Briggs)
NYPL Style Guide (http://www.nypl.org/styleguide/)
Brainjar: CSS Positioning (http://www.brainjar.com/css/positioning/default.asp) (Mike Hall)
Glish: CSS Layout Techniques: for Fun and Profit (http://www.glish.com/css/) (Eric Costello)
Bluerobot: The Layout Reservoir (http://www.bluerobot.com/web/layouts/) (Rob Chandanais)
Box Lessons (http://www.thenoodleincident.com/tutorials/box_lesson/index.html) (Owen Briggs)
Design Rant (http://www.thenoodleincident.com/tutorials/design_rant/index.html) (Owen Briggs)
CSS Layouts (http://www.saila.com/usage/layouts/) (Craig Saila)
Apple Developer Connection: Internet Developer: Working with CSS (http://developer.apple.com/internet/css/)
CSS-Discuss Wiki (http://css-discuss.incutio.com/) (Companion to the CSS-D Mailing list)
Real World Style (http://realworldstyle.com/) (Mark Newhouse)
WaSP CSS Resources (http://www.webstandards.org/learn/resources/css/index.html)
W3C: Style Guide for online hypertext (http://www.w3.org/Provider/Style/) (Tim Berners-Lee)
Web Development Pages (http://www.benmeadowcroft.com/webdev/) (Ben Meadowcroft)
Digital Web tutorial: Web Page Reconstruction with CSS (http://www.digital-web.com/tutorials/tutorial_2002-06.shtml) (Christopher Schmitt)
Digital Web tutorial: Miraz Jordan (http://www.digital-web.com/tutorials/tutorial_2001-11.shtml) (Miraz Jordan)
Digital Web tutorial: Converting a Page to CSS (http://www.digital-web.com/tutorials/tutorial_2001-5.shtml) (J. David Eisenberg)
WebsiteTips: CSS (http://www.websitetips.com/css/)
CSS Zen Garden (http://www.csszengarden.com/) (Organised by Dave Shea)
W3C Style: Learning CSS (http://www.w3.org/Style/CSS/learning)
CSS ain't Rocket Science (http://simon.incutio.com/categories/csstutorial/) (Simon Willison)
No Margin for Error (http://www.andybudd.com/archives/2003/11/no_margin_for_error/) (Andy Budd of Blogography)
HTML Utopia - Designing Without Tables Using CSS (http://www.sitepoint.com/article/379)
CSS Is Easy! (http://www.sitepoint.com/article/309)
Writing CSS1 style sheets - A short guide (http://www.canit.se/%7Egriffon/web/writing_stylesheets.html)
Guide to Cascading Style Sheets (http://www.htmlhelp.com/reference/css/)
CSS Pointers (http://css.nu/pointers/)
So, You Want CSS Classes and IDs, Huh? (http://www.htmlgoodies.com/beyond/classid.html)
HTMLite CSS Tutorial (http://www.htmlite.com/CSSintro.php)
CSS Creator -> Page Layout (http://www.csscreator.com/version2/pagelayout.php) (Douglas Livingstone)

07-28-2011, 05:01 PM
What DTD/DocType should I use?

There are currently four standards in use: HTML 4.01, XHTML 1.0, XHTML 1.1 and HTML5. All of these require a different DTD to tell the browser how to render the page.

If you want to use HTML 4.01 or XHTML 1.0, there are three "flavours" of DTD: Strict, Transitional and Frameset.

Strict DTDs should be used for all new documents. The browser will render everything in Standards Mode, the most reliable and up-to-date version. Transitional DTDs should be used only when transferring from old versions of HTML. This is highly unlikely, and should be avoided in most circumstances. It forces the browser to guess at what the code means, using a "quirks" mode which renders the document as though it were written over a decade ago. Frameset DTDs allow frame content; this is highly discouraged and should also be avoided.

For HTML 4.01:




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

For XHTML 1.0:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

For XHTML 1.1: XHTML 1.1 only has one DTD, but the document must be served as under the MIME types application/xhtml+xml or application/xml. If you do not know what this means, do not use it. Because of this requirement, XHTML 1.1 is not widely used. You may use this DTD:


For HTML 5: HTML 5 is currently under development, but some elements have gained support in the most modern browsers. If you wish to use HTML5 and understand the major differences between that and the more-prevalent HTML 4.01, you may use this DTD:

<!DOCTYPE html>

Do not feel obliged to learn HTML5. HTML 4.01 will be around for a long, long time and is much more stable in terms of browser support.

07-28-2011, 05:01 PM
Testing in Browsers and X-UA-Compatible

In order to ensure maximum compatibility, you should test in as many browsers as possible. Here are the most common ones of each rendering engine:

Internet Explorer 9 (http://windows.microsoft.com/en-GB/internet-explorer/downloads/ie). The rendering engines of Internet Explorer 7 and 8 are accessible using the Developer Tools (F12) without having to install a different version.
Virtual PC VHDs (http://www.microsoft.com/download/en/details.aspx?id=11575). These allow you to virtualise Windows 7, Vista or XP systems running IE6-9.

Mozilla Firefox (Cross-Platform) (http://www.mozilla.com/en-US/firefox/new/)
Camino (Mac OS X) (http://caminobrowser.org/)

Chrome (Cross-Platform) (http://www.google.com/chrome)
Safari (Mac OS X, Windows) (http://www.apple.com/safari/)

Opera (Cross-Platform) (http://www.opera.com/browser/download/)

Layout engines of the same type will almost always render the same; it should not be necessary to test in every single version, apart from in Internet Explorer.


Internet Explorer can also be forced to always render in IE7 mode by using the X-UA-Compatible header. The easiest way to do this is by including it in a meta element in your document's head:

<meta http-equiv="X-UA-Compatible" content="IE=7">

This allows you to only test in two versions of Internet Explorer.

07-28-2011, 05:01 PM
HTML & CSS Official Documentation and Validation

W3C validators

HTML Validator (http://validator.w3.org/)
CSS Validator (http://jigsaw.w3.org/css-validator/)

W3C specifications:


HTML 4.01 Specification (Final) (http://www.w3.org/TR/html401/)
HTML 5 Specification (Working Draft) (http://www.w3.org/TR/html5/)
XHTML 1.0 Specification (Final) (http://www.w3.org/TR/xhtml1/)
XHTML 1.1 Specification (Final) (http://www.w3.org/TR/xhtml11/)


CSS 1:
[CSS1] (http://www.w3.org/TR/REC-CSS1) REC
[CSS1 Errata] (http://www.w3.org/Style/css1-updates/REC-CSS1-19990111-errata)

CSS 2:
[CSS2] (http://www.w3.org/TR/REC-CSS2/) REC
[CSS2 Errata] (http://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata)
[CSS2.1] (http://www.w3.org/TR/CSS21/) CR

CSS 3:
Introduction to CSS3 (http://www.w3.org/TR/css3-roadmap/) WD (Contains a table of CSS3 modules, albeit a bit outdated)
CSS3 Color Module (http://www.w3.org/TR/css3-color/) CR
CSS3 Ruby Module (http://www.w3.org/TR/css3-ruby/) CR
CSS3 Text Module (http://www.w3.org/TR/css3-text/) CR
Selectors (http://www.w3.org/TR/css3-selectors/) CR
Media Queries (http://www.w3.org/TR/css3-mediaqueries/) CR
CSS3 module: Basic User Interface (http://www.w3.org/TR/css3-ui/) CR
Paged Media Properties for CSS3 (http://www.w3.org/TR/css3-page/) CR
CSS3 module: Backgrounds (http://www.w3.org/TR/css3-background/) WD
CSS3 module: Fonts (http://www.w3.org/TR/css3-fonts/) WD
CSS3 module: Web Fonts (http://www.w3.org/TR/css3-webfonts/) WD

CSS3 Generated and Replaced Content Module (http://www.w3.org/TR/css3-content/) WD
CSS3 Speech Module (http://www.w3.org/TR/css3-speech/) WD
CSS3 module: Border (http://www.w3.org/TR/css3-border/) WD
CSS3 module: Lists (http://www.w3.org/TR/css3-lists/) WD
CSS3 module: The box model (http://www.w3.org/TR/css3-box/) WD
CSS3 module: line (http://www.w3.org/TR/css3-linebox/) WD
CSS3 module: Cascading and inheritance (http://www.w3.org/TR/css3-cascade/) WD
CSS3 module: Values and Units (http://www.w3.org/TR/css3-values/) WD
CSS3 module: Multi-column layout (http://www.w3.org/TR/css3-multicol/) WD
Behavioral Extensions to CSS (http://www.w3.org/TR/becss) WD
CSS Namespace Enhancements (Proposal) (http://www.w3.org/TR/css3-namespace/) WD (incorporated in Selectors)

Other CSS Specifications:
Associating Style Sheets with XML documents
Version 1.0 (http://www.w3.org/TR/xml-stylesheet) REC
CSS Mobile Profile 1.0 (http://www.w3.org/TR/css-mobile) CR
CSS TV Profile 1.0 (http://www.w3.org/TR/css-tv) CR
Syntax of CSS rules in HTML's "style" attribute (http://www.w3.org/TR/css-style-attr) WD

Other CSS related documents from W3C:
XML Linking and Style (http://www.w3.org/TR/xml-link-style/) NOTE
Accessibility Features of CSS (http://www.w3.org/TR/CSS-access) NOTE
Using XSL and CSS together (http://www.w3.org/TR/NOTE-XSL-and-CSS) NOTE
CSS Techniques for Web Content Accessibility Guidelines 1.0 (http://www.w3.org/TR/WCAG10-CSS-TECHS/) NOTE
Authoring Challenges for Device Independence (http://www.w3.org/TR/acdi/) WD

07-28-2011, 05:17 PM
How do I protect my source code?

You can't.

For more info, see our extensive thread on the matter (http://www.codingforums.com/showthread.php?t=4437).