WebsiteNotes
## 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