HTML & CSS Resources

**Apostropartheid** · 07-28-2011, 04:00 PM

HTML & CSS Resources

Contents

**Apostropartheid** · 07-28-2011, 04: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/
http://www.elated.com/articles/choos...b-page-layout/
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:
http://www.thefreecountry.com/webmas...ml#htmleditors
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)

Miscellaneous resources:

Integrated Web Design: Strategies for Long-Term CSS Hack Management by Molly Holzschlag
Why tables for layout is stupid: problems defined, solutions offered by Bill Merikallio & Adam Pratt
/CSS/ - A Guide for the unglued (Owen Briggs)
NYPL Style Guide
Brainjar: CSS Positioning (Mike Hall)
Glish: CSS Layout Techniques: for Fun and Profit (Eric Costello)
Bluerobot: The Layout Reservoir (Rob Chandanais)
Box Lessons (Owen Briggs)
Design Rant (Owen Briggs)
CSS Layouts (Craig Saila)
Apple Developer Connection: Internet Developer: Working with CSS
CSS-Discuss Wiki (Companion to the CSS-D Mailing list)
Real World Style (Mark Newhouse)
WaSP CSS Resources
W3C: Style Guide for online hypertext (Tim Berners-Lee)
Web Development Pages (Ben Meadowcroft)
Digital Web tutorial: Web Page Reconstruction with CSS (Christopher Schmitt)
Digital Web tutorial: Miraz Jordan (Miraz Jordan)
Digital Web tutorial: Converting a Page to CSS (J. David Eisenberg)
WebsiteTips: CSS
CSS Zen Garden (Organised by Dave Shea)
W3C Style: Learning CSS
CSS ain't Rocket Science (Simon Willison)
No Margin for Error (Andy Budd of Blogography)
HTML Utopia - Designing Without Tables Using CSS
CSS Is Easy!
Writing CSS1 style sheets - A short guide
Guide to Cascading Style Sheets
CSS Pointers
So, You Want CSS Classes and IDs, Huh?
HTMLite CSS Tutorial
CSS Creator -> Page Layout (Douglas Livingstone)

**Apostropartheid** · 07-28-2011, 04: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:

Strict:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

Transitional:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

Frameset:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
    "http://www.w3.org/TR/html4/frameset.dtd">

For XHTML 1.0:

Strict:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Transitional:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Frameset:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.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:

Code:

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

**Apostropartheid** · 07-28-2011, 04: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:

Trident

Internet Explorer 9. 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. These allow you to virtualise Windows 7, Vista or XP systems running IE6-9.

Gecko

WebKit

Presto

Opera (Cross-Platform)

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.

X-UA-Compatible

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:

Code:

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

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

**Apostropartheid** · 07-28-2011, 04:01 PM

HTML & CSS Official Documentation and Validation

W3C validators

W3C specifications:

HTML

CSS

CSS 1:

[CSS1] REC
[CSS1 Errata]

CSS 2:

CSS 3:

Introduction to CSS3 WD (Contains a table of CSS3 modules, albeit a bit outdated)
CSS3 Color Module CR
CSS3 Ruby Module CR
CSS3 Text Module CR
Selectors CR
Media Queries CR
CSS3 module: Basic User Interface CR
Paged Media Properties for CSS3 CR
CSS3 module: Backgrounds WD
CSS3 module: Fonts WD
CSS3 module: Web Fonts WD
CSS3 Generated and Replaced Content Module WD
CSS3 Speech Module WD
CSS3 module: Border WD
CSS3 module: Lists WD
CSS3 module: The box model WD
CSS3 module: line WD
CSS3 module: Cascading and inheritance WD
CSS3 module: Values and Units WD
CSS3 module: Multi-column layout WD
Behavioral Extensions to CSS WD
CSS Namespace Enhancements (Proposal) WD (incorporated in Selectors)

Other CSS Specifications:

Other CSS related documents from W3C:

**Apostropartheid** · 07-28-2011, 04:17 PM

How do I protect my source code?

You can't.

For more info, see our extensive thread on the matter.

Thread: HTML & CSS Resources

Thread Tools

HTML & CSS Resources

Posting Permissions