This Page Last Updated And Links Validated: 28 June 2003 This Page Last Updated And Links Validated: 28 June 2003 Introduction
I have just started making websites so I only offer advice to those just starting. This page, like the whole site, serves to help me learn and keep notes and links for my own reference. If it helps another newbie coming along then good. But, be warned, I have receiceved some abusive e-mails calling me a "Structural Contentist" trying to drag the net down to my own level. Stung by this criticism, I have doubled the number of animated gifs on my site (I now have two!) and, put a really large gif on one page that takes forever to load. See ..I am responsive to critism.
Refer to the Minimum Cost HTML Editors page for thoughts and links to first get started with the software that comes with an IBM compatable computer. The page contains a link to a Macintosh site for people just starting with the software that comes with a Macintosh computer and I have started a Mac page with links to useful Mac tool sources (see navbar above).
Refer to they Cascading Style Sheets (CSS) page for my thoughts and links to actually get started.
Here are some learning links I have found useful:
Tutorials And References
www.bigbaer.com Big Baer
Excellent tutorial site. Buttons and simple 2 and 3 element pages created float.
glish.com John Glish.
Another excellent working css site. See tutorials listed in the right navbar.
www.htmlcenter.com/tutorials/tutorials.cfm/154/CSS/ CSS only button tutorial.
For a JavaScript free, depressible button effect. Good explanations of the css used.
See similar examples by Westciv in the Software Producers Training Links section.
Many traditional HTML tuts conflict with the standards approach in the CSS tuts. HTML you learn should be part of the combined CSS-HTML approach. Perhaps it is better to start learning CSS first so you know the difference between good and bad HTML. So I guess traditional html tuts have to be changed or yellow-listed to warn absolute beginners and prevent them going down the wrong track like I did with tag attributes, font and all the rest of the clutter piled onto html.
archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html A Beginner's Guide to HTML by NCSA. Excellent guide to HTML from the creators of Mosaic. Updated to include HTML 4.0 The best html primer. Not cluttered with proprietry tags and appearance attributes. If your interested, technical people describe the Netscape and Internet Explorer browsers we are so familiar with as 'Mosaic style browsers'.
www.callihan.com/weblinks
The best link contribution I got from author of HTML, The Definitive Guide (3rd Ed.) Chuck Muciano's website (his aol homepage stoped comimg up).
Some good sites here for me anyway. Free gif and jpg file size reducers and PaintShop Pro community links for example. Html and CSS links too.
www.werbach.com Html
Kevin Werbach's Bare Bones HTML Guide. Respected.
www.werbach.com/barebones/intro.html Explains how the guide is organised and which tags are included.
www.werbach.com/barebones/barebones.txt Version to print or keep open in a text editor when working.
www.werbach.com/barebones/barebones.html Looks better on-screen and has links to notes.
www.werbach.com/barebones/barebones.zip All the above for download as one file (24kB zipped).
www.htmlib.demon.co.uk Html Reference
Stephen Le Hunte's long established and respected site. An excellent British html resource that Allair deemed fit to include with Homesite 4.5. Sadly, Stephen LeHunte has decided not to update his Html 4.0 library from about early 2001. However you can still download it from this site.
www.blooberry.com
Brien Wilsons' well regarded Index.Dot site in a new address. Dedicated to HTML and CSS.
This site will meet the needs of the most demanding CSS author. Has a comprehensive list of CSS related links.
Although this is now a .com site, it has always been, the spare time effort of Brien Wilson alone. If you can help him fine, but his site and his links is the first line of help he is offering the web community and should be used before you start emailing him questions.
www.hwg.org/resources/faqs/cssFAQ.html Css
The HTML Writer's Guild CSS FAQ's. Many are answered by the originators of CSS. Laid out so they can be used as a reference.
www.glish.com/css Css
Superb tutorial on boxes for laying out web pages. All code provided. Excellent links.
www.glish.com Homepage. Interesting Articles.
www.thenoodleincident.com/tutorials/box_lesson/boxes.html Css
Another good tutorial and code provided for making CSS boxes for laying out pages.
Also has good tutorials and explanations on DHTML, JavasScript and XML starting from begginer level.
www.dynamicdeezign.com/css/introduction.html Css
These tutorial examples have all been validated on Netscape 6 and Internet Explorer 5.5. They worked ok for me on IE5 and NS4.6. The introduction page and the ten tutorial pages had the stylesheets in the head of the pages so you can also learn by examining the code which gives double value. Colorful and easy to read. Tuts 8, 9 and 10 made me sit up and start taking notes. Recommended.
www.hitmill.com/dhtml/css_intro.html Css
Has good stacked text effect. Has stylesheet in head so you can see how his pages are done. Good css links.
wdvl.com/Authoring/Style/Sheets CSS
Web Developers Virtual Library. Good. Provide access to their site stylesheet.
www.wdvl.com Home page. Go down to Beginners or Intermediate and pursue there css-html tutorials. See their Top Articles list also at the bottom of the home page. Got my layers.html from here ..dovetails with glish and noodleincident box layout tutorials above.
www.info.lk/techweb Their TechWeb page.
Good Sri Lankan site!
Click on CSS-DHTML for tuts and tut down loads (or select other learning topics).
Click on drop down box for software downloads.
I copied some examples from their CSS-DHTML page tutorials (a rare event).
www.webmonkey.com Auth. Html Css
The first tut source I looked at. I was refered to it from a college site. Enter CSS in the search box.
hotwired.lycos.com/webmonkey/authoring/stylesheets/tutorials/tutorial1.html Css Tut
Steve Mulder of Razerfish writing for Webmonkey.
CSS Tutorial. SeeTutorial 1 consisting of overview plus five lessons up to positioning.
hotwired.lycos.com/webmonkey/authoring/tools/tutorials/tutorial1.html DW/Css Tut
Taylor, freelance web builder writing for Webmonkey.
DreamWeaver tutorial (css and positioning mentioned).
Tutorial 1 consisting of overview plus two lessons.
webreference.com/authoring/languages/html/css.html Css
Their Style page. (Note with this site if I want to get focused I click on the site map.)
www.webreference.com/html Html Css.
Click on Tutorials or Reference in the left side menu.
>
library.thinkquest.org/15074/tutorials.html Auth. Html Css Javascript ..and more.
Compiled by students. Select from good range of topics.
Plus a bit of what you need to know to get up on the net. Good. Couple of CSS examples I looked at had the style in the head so it was easy to follow.
www.htmlgoodies.com/tutors CSS-HTML primer
Dr Joe Burns PHD's good peekaboo site. He calls tags "flags". Frustratingly small text area five to seven words to a line or only four if they are big words. His HTML primer brings in attributes and other html that influences appearance and page layout, so it really does look like you should start learning CSS first so you don't have to unlearn the inappropriate html.
www.zdnet.com/devhead/stories/articles/0,4413,1600436,00.html CSS primer
Fair for a peekaboo 640x480 screen site that uses only the middle third!
Again frustrating because of small fixed width screen setting but has gems.
Quick CSS References
www.zvon.org/index.php?nav_id=3 CSS1, CSS2, XHTML (and more) downloadable references and tutorials.
www.htmlhelp.com/distribution List download sites for HTML 4.0, HTML 3.2 and CSS references.
allmyfaqs.com/faq.pl?Web_Core_References Quick reference links.
allmyfaqs.com/faq.pl?Get_rid_of_margins (The basis of my 1 Feb 02 change to site body margins.)
allmyfaqs.com/faq.pl?CSS_FAQs More CSS references.
www.w3.org/TR/REC-CSS1 Downloadable CSS1 (formal document ..users should skim and use examples)
www.w3.org/TR/REC-CSS2 Downloadable CSS2 (formal document ..users should just skim and use examples)
Sites Offering Listings of Tutorials
www.thescripts.com css search results
www.thescripts.com teaches/informs webmasters about scripting. In particular go to bottom of this page and drop down the drop-down box and select "Other Parameters" to get some positional parameters.
See the font oblique style:- p{font:oblique 600 8pt/10pt verdana;}
I am using it here in-line so you can how it would change the properties for elements inside a P (or paragraph) tags to being oblique with a weight of 600, 10 points large, having line height of 12 points with a font face Verdana.
www.thescripts.com Home page of this useful tutorial site that has tutorials!
techsearch.cnet.com css search results
CNet's CSS search results. Leads to CSS Editor downloads and tutorials listing. Quite good.
webknowhow.net/dir/HTML/CSS
Another listing of css tutorials. Uses a .net extension and claims to be a part of a network linking css resources. Actually part of www.devstart.com network which is clearly commercial but offering links and tuts to web developers (every body wants to tell their advertisers that their visitors are all web developers for some reason).
Older Valuable HTML Links (Ignore References To Presentation In HTML)
www.mcli.dist.maricopa.edu/tut Maricopa College's outstanding html and ancillory topics tutorial worked on and improved since 1994. Recognises remerging role of CSS and XML and the like and is working on it but meanwhile refers you to some sites that deal with these topics.
www.davesite.com Html (old).
Good Beginners Introduction to the Internet however the interactive HTML tutorial sadly includes some tags and tag attributes that influence presentation that many believe we should not be using anymore.
www.davesite.com/webstation/html His Tutor.
www.cwru.edu/help/introHTML/foreword.html
A 1995 dated tutorial by Eric A. Meyer. Has Top 5% badge and a good (old) Made on a Mac badge. Web history.
Software Producers Training Links.
www.bradsoft.com For TopStyleLite or Topstyle (full version), a style sheet editor you might look at about when you are ready for Homesite. There are four short simple tut examples to introduce css.
www.westciv.com.au For StyleMaster 2.1, LayoutMaster and other related CSS aware editors, authoring and website development packages. He has possibly the most readable and up to date CSS resources. They sell training packages but often put them up free to do on-line in weekly installments ..I have done four eight week courses like this ..keeps you visiting the site!
www.westciv.com.au/style_master/academy/css_tutorial/index.html Comprehensive on-line CSS tutorial.
# Duplication to remind me to find out about .au/ and // used by westciv. #
www.westciv.com//style_master/academy/css_tutorial/index.html Comprehensive on-line CSS tutorial.
# Hmm! Both urls work perfectly. I have learnt nothing beyond this fact. #
www.westciv.com//style_master/academy/hands_on_tutorial/index.html
Index page of thirteen pages (thirteen lessons) of a quicker "hands on" CSS tutorial for those who want on-screen results that they can utilise in their web pages immeadiately.
www.westciv.com/style_master/academy/positioning_tutorial A CSS positioning tutorial.
www.westciv.com/style_master/house/cookbook/index.html A cookbook of effects including bullets, buttons, links, navbars, side panels and use of images.
www.westciv.com/style_master/house/cookbook/demos/button_demo.html A button CSS demontration that emulates fancy javascript buttons.
www.westciv.com/style_master/house/cookbook/demos/button_demo.css The stylesheet for the button demonstration.
www.westciv.com//style_master/academy/links.html Links page.
www.westciv.com/style_master/house/good_oil/getting_to_grips/grips.html An Article helping you get to grips with layout, em, % and pixals. Can link from this page to many of the other links referred to above.
www.westciv.com/style_master/house/index.html Toward the bottom of this page there are links to more Westciv on-line tutorials/training/references not yet listed above.
westcivtrng.html My summary of Westciv training tutorials.
Resources For Later Use
www.zvon.org Comprehensive reference and tuts
What I've seen is excellent. Search for tutorial by keyword, Some references printable. List of tutorials and references zipped for download if required off-line.
www.webreference.com/html/reference/character Html Css Reference
A well regarded Site. They are already listed up in the tutorial section. This particular reference lists characters which is useful for maths and all sorts of things (games writers?) but, in particular, lists the names you can use (which might be easier than remembering codes eg red cf #ff0000).
www.w3schools.com Html Css Html Xhtml Xml ..all web hosting languages tutorials.
See tutorial section. Not part of W3 Consortium. Good.
www.w3.org/tr/rec-html40 Html Css Reference
Full HTML 4.0 Specification at the World Wide Web Consortium. For experts to refer to.
www.w3.org/tr/rec-css1-961217.html Css Reference
Full CSS Level 1 Specification at the World Wide Web Consortium. Also for experts (Level 2 Spec.?)
www.webcoder.com search results
First of page of a good CSS absolute positioning tutorial.Site is one of Webreview's network sites
Microsoft and Netscape agree on absolute positioning. Don't usr Netscapes <layer> tag.
I noted plenty of Javascript DHTML references and some mention of XML.
The arguement made elsewhere is that you need CSS for DHTML but CSS is easier than DHTML and should overtake DHTML (because once you can do what you want in CSS ..why go on to DHMTL sort of thing).
Anyway, this tutorial uses CSS to make the text and then JavaScript to animate the text (rotate it around).
The site is no longer updated but we are assured the what is there will remain up.
Some People Promoting CSS Web Standards
style.cleverchimp.com
Tod Fahrner, website and style sheet guru. Recommended by Western Civilization in their own CSS course.
danielgreene.com/style.html
Suggestions from an advocate for CSS. Some positioning. Referred to by Western Civilization.
www.anybrowser.org
Get your Viewable On Any Browser (or similar sentiment wording) badge. Hundreds to choose from. Also see interesting round cornered display boxs.
www.htmlhelp.com Html Css.
The WEB DESIGN GROUP Good people promoting the creation of non-browser specific, non-resolution specific websites. They offers material on a wide range of HTML related topics.
I learnt a bit reading their FAQ (frequently asked questions) and also reading the questions and answers posted on the BBS (bulletin board) and then reading the answers posted. I also visited the sites of the people with the problem which greatly enhanced my learning.
css.nu/pointers CSS links.
CSS Pointers Group. For practical uses of CSS. Run by keen good people.
www.webstandards.org
An organisation of web authors trying to get the browsers to comply with standards and encourage users to upgrade their browsers. They are now regrouping to try to come up with ways get web developers in general to write websites that comply with standards. I gave them a bit of stick because I always thought a big part of the problem now was web author producing
heaps of bandwidth chomping eye candy that takes forever to load that would timeout before it reached the point of failing to validate. Continuing to blame the browser producers or the few poor folk searching for a good price on dog food using their old computers or web TV's for holding back implementation of web standards is not on any more.
www.nypl.org/styleguide/index.html NewYork Public Library.
They have made their stylesheets available along with explanitory pages and comments in the stylesheets.
The stylesheets are designed to validate under XML and evidently meet all the various needs that I can't juggle.
I will use these stylesheets in my next undertaking or at least my next page and hope to learn from my betters.
Validation
A statement within the two or three (W3C) Validator links says there is a degree of inter-dependance ..eg for css to work html, xhtml or xml or whatever must also be valid.
Here are some html validators ..
valet.webthing.com/page/
On-line validation with Page Valet 3.2
www.arealvalidator.com
A Real Validator. A Windows shareware validator you can be used off-line.
www.htmlvalidator.com A1 Internet Solutions's CSE HTML Validator
CSE HTML Validator Lite v2.01 .. free. No banner ads. For casual html authors.
CSE HTML Validator Pro v4.51 .. (US$127).
Educational Offer. Pro version free to teachers from March 1 (limited time).
validator.w3.org W3C HTML 4.0 Validator (found in CSSFAQ via Eric A. Meyer's CSS article in www.webreview.com). Note: Fine print at bottom reveals it validates XHTML 1.0 as well!
Here are some css validators ..
www.htmlhelp.com/tools/csscheck/index.html Validate your CSS by either:- 1. Submit the URL of your external stylesheet or 2. Paste the stylesheet from the head of your page in the text entry box or 3. Use a link provided to browse your computer for a stylesheet to submit.
www.w3.org/Style/CSS/Test A test suite for CSS1 designed by Eric A. Meyer.
jigsaw.w3.org/css-validator W3C CSS Validator
Reference to it's use was found in the CSSFAQ in Eric A. Meyer's CSS article in www.webreview.com. You can validate your CSS on line or you can download the Validator 2.0 to use yourself off-line. Check out on the banner!, see how the word CSS is placed on top of the word Validator ..check the positional style out (in an external stylesheet)!
In fact the contents and source code of this page and it's CSS pages by Le Hegaret should be studied in detail for learning sake. These guys are gurus.
Here are some xhtml/xml validators ..
There is a hotlink between these two pages. And there was a third XML Validator link. This XML Validator link did not work at the time and needs following up. Also role of xhtml and xml needs to be learnt about.
validator.w3.org/file-upload.html
Validate your sites pages with the W3C Validator. See below for suggested doc types. The first is the ultimate one for the future. It is what I have put on the index page of this site and will eventually use on all pages.
Here are some xhtml/xml validators ..
jigsaw.w3.org/css-validator/validator?uri=http://www.oocities.org/wpsmoke/stylesheets/ajmain.css
To validate ajmain.css, the main stylesheet of this website, with the W3C CSS Validator.
jigsaw.w3.org/css-validator/check/referer
To Validate this page of this website with the W3C HTML/XML Validator.
CSS Levels.
We need to put into our document an indication of which version of HTML it is written in, so that a browser or validator knows which version of HTML this is. We do this by putting at the top of our file, above all HTML, including the <html> start tag one of the following lines of text. This tells the validator which version of HTML you have used. Note: This is case sensitive and the first is the ultimate one for the future.
Strict XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
Transitional XHTML 4.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
Frameset XHTML 4.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "DTD/xhtml1-frameset.dtd">
Strict HTML 4.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Transitional HTML 4.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Frameset HTML 4.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
(From Alist Apart's account of converting their site over to a two div css page layout.) Because slightly older browsers interprets the standards differently (for example IE5's summing of padding and box width is probably more rational but not standards complient), you trigger Quirks mode by leaving out the DOCTYPE or creating a DOCTYPE with no W3C URL:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
You trigger Strict mode by beginning your page with a DOCTYPE that includes the relevant W3C URL:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
The Gecko browsers (Mozilla, Netscape 6.x) follow IE5/Mac's lead, as does the IE6. In all these browsers, you can use DOCTYPES to control whether you want your site to comply with standards as written, or to emulate the behavior of older, less-compliant browsers.
Contact: Aussie John wpsmoke@yahoo.co.uk