LearningHtmlAndCss

This page was inspired by QuickQuestions. It's a work in progress... Still need to comment on appropriateness of the resources, staying away from <font> tag, etc...

HTML is HyperTextMarkupLanguage, the language Web pages are written in. CSS is CascadingStyleSheets, which are used to control the appearance of Web pages.

HTML & CSS online tutorials (arranged from more simple to more advanced, approximately)

• Dave Raggett's Introduction to HTML (http://www.w3.org/MarkUp/Guide/)
• WDG CSS Quick Tutorial (http://www.htmlhelp.com/reference/css/quick-tutorial.html)
• w3schools HTML Tutorial (http://www.w3schools.com/html/default.asp)
• w3schools CSS Tutorial (http://www.w3schools.com/css/default.asp)
• HTMLSource: HTML Tutorials (http://www.yourhtmlsource.com/)
• Landofcode HTML lessons and tutorials (http://www.landofcode.com/html/)
• HTMLSource's Stylesheets Tutorials (http://www.yourhtmlsource.com/stylesheets/)
• MarkPilgrim's Dive into Accessibility (http://www.diveintoaccessibility.org/)
• glish.com CSS Layout Techniques: "Look, Ma, No Tables!" (http://www.glish.com/css/)
• SitePoint HTML & XHTML Tutorials (http://www.sitepoint.com/subcat/html)
• SitePoint CSS Tutorials (http://www.sitepoint.com/subcat/css)
• SitePoint HTML Utopia! Design Websites Without Tables (http://www.sitepoint.com/article/379?SID=87c36118d693c251ec291a41106570dd)
• "Help! My CSS Isn't Working!" by Eric Meyer (http://www.meyerweb.com/eric/articles/webrev/199904.html)
• A List Apart (http://www.alistapart.com)
• Wikibook:HTML http://en.wikibooks.org/wiki/Programming:HTML
• Opera Web Standards Curriculum (http://www.opera.com/company/education/curriculum/)
• w3resource HTML Tutorial (http://www.w3resource.com/html/HTML-tutorials.php)
• w3resource CSS Tutorial (http://www.w3resource.com/css/CSS-tutorials.php)

HTML & CSS reference materials and standards

• WDG HTML 4.0 Reference (http://www.htmlhelp.com/reference/html40/) handy, easier to find things than W3C
• WDG Guide to Cascading Stylesheets (http://www.htmlhelp.com/reference/css/) handy, easier to find things than W3C
• W3C HTML Home (http://www.w3.org/MarkUp/) definitive site
• W3C Cascading Style Sheets (http://www.w3.org/Style/CSS/) definitive site
• The Bare Bones Guide to HTML (http://werbach.com/barebones/barebones.html) concise "cheat sheet" of HTML tags

---

Quick ones

Customizing Style Sheets on the Fly at http://www.devx.com/getHelpOn/10MinuteSolution/20746/1954?pf=true

Use MicrosoftInternetExplorer behavior for custom interfaces at http://www.devx.com/getHelpOn/10MinuteSolution/20372/1763

---

Tools to help you on your way aka Bookmarklets (Work best with Mozilla)

Practically all of them at http://www.squarefree.com/bookmarklets/webdevel.html though particualarly:

• test styles
• edit styles
• ancestors
• zap style sheets
• zap presentational html
• view style sheets
• show blocks

---

Are use of frames important?

Inline frames (IFRAME) has raised attention recently (end 2004) due to security risks. It probably also mean that there are significant use of this feature (MS version) across many sites.

Resources for IFRAME

• Syntax -> http://www.w3schools.com/tags/tag_iframe.asp
• Favorable critique -> http://web.archive.org/web/20020103071503/http://webreview.com/2001/12_20/developers/index02.shtml

---

Questions and Answers

Q: In an HTML page's <a href="..."> tag, can you refer to a file in a different directory, or does HTML expect all files to reside in one directory?

A: On one's own WebSite, one can use the link creation syntax to point at any page, absolute or relative.

• <a href="ThisIsInTheSameDirectory.html">This is in the same directory.</a>
• <a href="../UpOneLevel.html">This is in the directory above.</a>
• <a href="some_subdirectory/page_of_interest.html">This is in the directory below.</a>
• <a href="../AnotherDirectory/ADifferentPage.html">This is in a sibling directory.</a>
• <a href="/index.html">This is in the top-level directory</a>
• <a href="/2005/another_page.html">This is in a subdirectory directly below the top-level directory</a>
• <a href="http://c2.com">This is somewhere entirely different.</a>

If you refer to a subdirectory that doesn't exist, it will not be created. Instead, the Web server will generate an error, usually a "404 Page Not Found".

Note that <dd> has nothing to do with the <a> tag -- <dd> is used to build definition lists. (It does not mean "default directory".)

---

Also see: HyperTextMarkupLanguage, CascadingStyleSheets, WebsitePatterns, IwannaLearnJavaScript

---

CategoryWebDesign IwannaLearn