## page was renamed from WebsiteProgramming ## page was renamed from BeginnersOverviewWebsiteProgramming The usual tutorial has steps like * host location * domain name * design * publish * promotion Some of these are oriented toward business needs. Additional business topics may include e-commerce and security among other concerns. Google on website design, or many similar search criteria will find lots of starting points. = First, Some Background Stuff = == Brief Review of Web-workings == * Hypertext, the web and all that * http://www.w3.org/People/Berners-Lee/ esp: http://www.w3.org/History.html * HTTP client-server, request-response * Browsers and HTML * CGI * DHTML, client-side scripting (Java``Script, ECMAscript) * extensions * java applets * AJAX * Asynchronous JavaScript and XML * XMLHttp``Request * webdav * xml-rpc, soap, ... what-else? == Basics of HTML == * historical aside * HTML 2 3.x 4.0 (4.01 = XHMTL 1.0) * tags * house rules: html, head, title, body * basic-0: heading, paragraph * basic-1: (line-) break, horizontal rule * fun-stuff: anchors (links), images * then there is: lists, tables * also: emphasized, strong * and: div, span * there's more.. * style * units: px, pt, .. (12pt ~= 15px) * box model (margin, padding) * font.. * background.. * border.. == Tools == * html editors * Amaya http://www.w3.org/Amaya/ * nice style-debugging * quanta http://quanta.kdewebdev.org/ * nicer(?) UI * no style-debugging, or needs configuring? * attribute editor is nice * nvu http://www.nvu.com -- lagging many features * Netscape Composer (+ CaScadeS ?) ?? replaced by nvu? * bluefish http://bluefish.openoffice.nl/ -- just a basic html editor * also check out (but don't forget to disable popups on this site) * http://webdesign.about.com/od/htmleditors/ * http://webdesign.about.com/od/htmleditors/tp/aatptextedunix.htm * general text editors (vi, emacs, ..) * for debugging: (mozila &) firefox ''DOM Inspector'' -- yes! * esp (eg): Object - Computed Style (but amaya's is bettter) * hmmm ..these might be worth a look in a commercial shop * Dreamweaver, ..demo looks pretty snazzy and up-to-date per css * GoLive ? lightweight, maybe workable * Homesite ?? * FrontPage -- looks like it needs modernizing * .. * ''sitebuilding'' tools/systems -- try google (see also CMS) * Neat cleanup tool: tidy http://sourceforge.net/projects/tidy (-h for help) * see also: http://tidy.sourceforge.net/ * see also: http://www.w3.org/People/Raggett/tidy/ * filler: http://www.lorem-ipsum.info/ == Systems/Frameworks == * CMS (''Content Management systems'') * http://www.opensourcecms.com/ * Templating Systems * .. = Techniques = == Restated Basics == * site vs page * objectives * design criteria * branding, simple * +navigation * +special-features * consider * what's new * split-off by ''type'' of visitor * constraints * future plans * maybe a domain name is really worth considering == Content and Presentation == * Content * Organizaion / Structure * Semantic content (text and graphics) * Presentation * Layout and Navigation * Style * Decoration == Old vs New == * frames considered harmful * css replaces table-based layout * tags no longer needed or desirable * deprecated * obsolete * tag attributes no longer needed or desirable * html morphs into xhtml(xml) * deprecateed tags & features * font, center, b, i, .. * tags should anticipate xml: lowercase, balanced, closed * .. * browser-sniffing out, css-hacks in * some scripting obviated by css == Show & Tell == * a favorite: http://www.csszengarden.com/ * http://css-discuss.incutio.com/?page=DesignInspiration * == Recommendations and Comments on ''Best Practices'' (as I see it, of course) == * standards and validation * from http://www.molly.com/2004/07/31/doctypes-not-relevant/ {{{ Having a correctly formed DOCTYPE will cause browsers to run in compliance mode - an optimal browser mode for standard, conforming documents.}}} * ie, "..No DOCTYPE, and you get quirks.." per http://www.w3.org/International/articles/serving-xhtml/ * xhtml(-support) is still evolving * basic xthml http://www.websitetips.com/info/xhtml/basics.shtml * browser hacks * css * template * CGI * accessibility * non-gui and non-script friendly pages * general design advice * http://www.w3.org/QA/Tips/ * http://www.tldp.org/HOWTO/Font-HOWTO/typography.html = Beyond Static Pages (CGI) = * php, perl, python, ..any executable * e-commerce * web ''applications'' = Sample Resources = == Example Pages == * PlainText * HtmlFragment * HtmlSimple * HtmlValid == Templates == * see link list at bottom = References = == Recommended Quickstart Refs == * (I haven't distilled the other stuff -- feedback welcome) == Good Everyday Refs == * http://www.w3schools.com/ * http://devguru.com/ == Specialty Topic or Advocacy Refs == * Design Advice * ''Looking Good in Print'' (6th ed) Roger C. Parker, Paraglyph Press, January 2006 ISBN: 1-933097-06-X === W3C reference/tutorial pages === * Recommended DTD (Doctypes) http://www.w3.org/QA/2002/04/valid-dtd-list.html * Character encoodings http://www.w3.org/International/O-charset.html * http://www.w3schools.com/ * tag playpen http://www.w3schools.com/html/html_examples.asp * tag ref. http://www.w3schools.com/tags/default.asp * one of the nicer intro/tutorials: http://www.w3.org/MarkUp/Guide/ * more advanced (css++): http://leftjustified.net/site-in-an-hour/site/ == General Refs == * The future of HTML, Part 2: XHTML 2.0 http://www-128.ibm.com/developerworks/xml/library/x-futhtml2.html?ca=dgr-lnxw01XHTML2 * non-HTTP networking * XMPP (''Extensible Messaging and Presence Protocol'') http://www.xmpp.org/ * SIP (''Session Initiation Protocol'') http://www.cs.columbia.edu/sip/ * RTP, SIMPLE, ... * http://en.wikipedia.org/wiki/Web_development * Jakob Nielsen's site http://www.useit.com/ === some general tutorials === * http://academ.hvcc.edu/~kantopet/old/index.php * tizag has some compresensive coverage -- start with http://www.tizag.com/htmlT/ * also looks broad & niely organized -- http://www.htmlcodetutorial.com/ * http://www.htmltutorials.ca/ == additional sites to browse == * http://www.brainjar.com/ * http://www.456bereastreet.com/ * http://www.csscreator.com/ * http://www.meyerweb.com/ * http://www.positioniseverything.net/ * http://diveintoaccessibility.org/ * http://www.thesitewizard.com/ * nvu specific(!) -- http://www.thesitewizard.com/gettingstarted/nvu1.shtml * http://www.htmlhelp.com/links/tutorials.htm * http://www.how-to-build-websites.com/ * http://www.websitetips.com/ * http://www.evolt.org/ * http://www.saila.com/usage/tips/ * http://www.xs4all.nl/~sbpoley/webmatters/index.html * esp: http://www.xs4all.nl/~sbpoley/webmatters/verdana.html * http://www.thenoodleincident.com/tutorials/box_lesson/workarounds.html * http://www.ilovejackdaniels.com/seo/meta-tags/3#robotstag * http://devguru.com/ * http://www.ilovejackdaniels.com/css_cheat_sheet.pdf * http://www.ilovejackdaniels.com/javascript_cheat_sheet.pdf * http://www.css-discuss.org/ * http://css.maxdesign.com.au/listamatic/index.htm * http://koivi.com/css-menus/ * http://dean.edwards.name/IE7/compatibility/Pure%20CSS%20Menus.html * http://discuss.fogcreek.com/CityDesk/default.asp?cmd=show&ixPost=11518 * http://www.udm4.com/demos/other-purecss.php * http://www.alistapart.com/articles/holygrail * http://www.bluerobot.com/ * http://css-discuss.incutio.com/?page=CssLayouts * http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php * some still use tables: http://icant.co.uk/csstablegallery/index.php * and (questionably?): http://glazkov.com/blog/archive/2005/05/02/476.aspx * better: http://css-discuss.incutio.com/?page=TableDesign * (eg:) http://www.redmelon.net/tstme/ * http://css-discuss.incutio.com/?page=EmulatingFrames * http://www.pmachine.com/ee/templates/ * http://intensivstation.ch/en/templates/ * http://annevankesteren.nl/2004/07/fixed-positioning * (wiki) css-discuss.incutio.com/ * http://glish.com/css/ * http://realworldstyle.com/ * http://www.benmeadowcroft.com/webdev/ * web hosting -- try google on that term -- caveat emptor.. * http://www.findmyhosting.com/ * http://order.1and1.com/xml/order;jsessionid=EEED26029A861C4D00635CDA128EFBEF.TC61b * http://www.anywherehost.com/ * http://ilias.ca/ * http://web.archive.org/web/20040926065921/http://devedge.netscape.com/ * http://www.webdeveloper.com/ * http://koivi.com/ * http://wdvl.internet.com/WebRef/Help/Begin.html * http://www.webreference.com/ * http://developer.apple.com/internet/webcontent/bestwebdev.html * http://www.htmldog.com/ * http://www.xstandard.com/page.asp?p=58E6C3F7-E5DF-414F-8AA5-4C8BD2BEFE2A * http://www.westciv.com/style_master/house/good_oil/dead_layout/ * http://phrogz.net/CSS/WhyTablesAreBadForLayout.html * http://www.htmldog.com/ptg/archives/000049.php