&& Hypertext Markup Language and Cascading Style Sheets -------------------------------------------------------: quote: "the language of the web is the language of the world" Html and Css are inextricably linked. This document advocates using, as far as possible, semantic html along with simple standards compliant Css to alter the appearance of the Html documents It is one of the strange ironies of the internet that websites dedicated to css are generally ugly and unreadable. The idea behind modern html (or xhtml) is to make it "semantic" (which is probably a vain hope), and use CSS to change the appearance of this supposedly "clean", "semantic" html markup.... The reality is that the majority of modern website clog their pages with
and tags, hair-raising javascript scripts, and abstruse indecifrable cross-browser hacks, pandering to weird standards-mangling quirks in Internet Explorer 5.301806 etc. @@ www.htmlcodetutorial.com an old but good site @@ http://www.cookwood.com/html/extras/xhtml_ref.html @@ http://krijnhoetmer.nl/stuff/ some simple css ideas QUOTES Both double quotes " and single quotes ' are valid for quoting html attribute values. ------------------------------

to be...

to be...

##(these are both correct) ,,, HTML META INFORMATION .... Meta tags should go in the ... section of the page @@ http://www.i18nguy.com/markup/metatags.html Information about the use of "meta" tags in the html section * indicate that the character set for the document is utf-8 >> ##(possibly the most important metatag! All pages should have this tag) * indicate that the author of the page is 'J Biggle' >> * state that the last revision of the page occurred on the 3 june 2008 >> * indicate that the page is about plants >> * indicate some keywords for the document >> * state which program generated the html page >> FOREIGN LANGUAGES AND ALPHABETS .... == some special chars .. U+260E - ☎ ☎ ☎ BLACK TELEPHONE .. U+260F - ☏ ☏ ☏ WHITE TELEPHONE .. U+265B - ♛ ♛ ♛ BLACK CHESS QUEEN .. U+265C - ♜ ♜ ♜ BLACK CHESS ROOK .. U+265D - ♝ ♝ ♝ BLACK CHESS BISHOP .. U+265E - ♞ ♞ ♞ BLACK CHESS KNIGHT .. U+265F - ♟ ♟ ♟ BLACK CHESS PAWN .. U+2660 - ♠ ♠ ♠ BLACK SPADE SUIT .. * the miscelaneous page for html unicode entities >> http://theorem.ca/~mvcorks/cgi-bin/unicode.pl.cgi?start=2600&end=26FF * place some chinese characters using entities notation >> 高效使用: ⚞ ##(this is useful if the page is not utf8) * indicate that the character set for the document is utf-8 >> ##(put this with the ... of the document) * indicate that the language of a document is British English >> * indicate that the language of a paragraph is welsh >>

* find valid language codes for the 'lang' attribute >> look at iso-639 * find valid language codes for indigenous languages >> see www.sil.org (iso-639-3) ENTITIES .... >> xmlstarlet esc "&" SEMANTIC TAGS .... Semantic html tags refer to the 'meaning' of the content of the document, rather than to its appearance. @@ http://www.w3.org/TR/WCAG10-HTML-TECHS/ a guide for writing accessible html == semantic html tags .. an inline quotation .. , citation .. , variable .. , computer code .. , an acronym .. , an abbreviated word ,,, * include the title of the document, which appears in the browser title bar >> ... ##(this goes in the section of the page) * mark up the text of a quotation (may be several lines) >>

...
* mark up an inline quotation >> ... * include computers source code in a document >> ... * include an acronym in a document >> WWW ##(it is only necessary to include the 'title' the first occurrance in the page) * abbreviated words should be marked up with >> * indicate an address in the page >>
3 smith st, bigtown
* cite a literary work >> ... * put a caption or heading on a table. usually displayed above the table >> ...
a table
* variables >> REVISIONS * strike out text with a line >> text-decoration: line-through; >> ... ##(the same but older) CSS STYLESHEETS * insert an external stylesheet in a document >> * put an embedded style sheet in a web page, --------------------------------------------- ... ,,, * embed style in the element in the html page >>

big

CSS SYNTAX * a semicolon before a close brace is not necessary >> p { font-weight: bold } ##(this is correct) >> p { font-weight: bold; } ##(this is also correct) USING DIVS WITH ID NAMES * using a named div html:
css: div#example { ... } * elements within the named div >> #example ul { ... } TABLES * use to create header cells >>
year
create table with a thin silver border around all cells -------------------------------------------------------, html: ...
css: TABLE.b { border: 1px solid silver; border-collapse: collapse; } .b TD { border: 1px solid silver; } .b TH { border: 1px solid silver; } ,,, FONTS * create small capital text for H3 headings >> H3 { font-variant: small-caps } ##(the 'correct' way) >> H3 { font-size: smaller; text-transform: uppercase; } ##(another way) * set all the font properties in one go. This is known as a 'short-hand' >> H4 { font: italic bold x-large arial,sans-serif; } FONT FAMILY .... * set the font family for a heading >> H1 { font-family: "Times New Roman", Georgia, Serif; } * generic families >> serif, sans-serif, monospace TEXT TRANSFORMATIONS .... text-transform: none, uppercase lowercase, capitalize text-decoration: none underline overline line-through blink * put an overline and an underline when the mouse is over a link >> A:hover { text-decoration: underline overline } TEXT SPACING .... * line-height: the space between lines on the page >> line-height: 1.5 ##(no units are required) * letter-spacing: -2px * word-spacing: FONT SIZES .... * '1em' is the current font size. The font size can be set using a 'named' value. This has the advantage of being more readable and also does not fix the pixel size absolutely --------------------------------------------------------------------- html:

title

> xx-small x-small small medium large x-large xx-large smaller larger == font-size units .. px, pixels .. cm, centimeters .. mm, milimeters .. em, relative to current fontsize .. %, percentage .. in, inches .. pc, picas ,,, * set the font size with a percentage ------------------------------------- css: P { font-size: 120%; } * set the font size to be 2.5 times the normal size >> H1 {font-size: 2.5em; } ##(the default size is often 16px) FONT STYLES .... * possible "font-style" values >> normal, italic, oblique == font-weight values .. .. normal, .. bold, .. bolder, .. lighter, .. 100, .. 200, .. 300, .. 400, .. 500, .. 600, .. 700, .. 800, .. 900 .. PAGE LAYOUTS * a layout with a bordered side bar and an outset image, ------------------------------------------------------- html:
css: p#sidebar { border: 2px dashed; font-size: smaller; text-indent: 0 } img { float: left; margin-right: 0.5em; border: none } div { float: left; width: 30%; margin-right: 0.8em } ,,, LISTS @@ http://css.maxdesign.com.au/listamatic/ lots of different ways to style lists, including horizontally DEFINITION LISTS .... @@ http://www.maxdesign.com.au/presentation/definition/ a discussion about definition lists * display a definition list with the definition on the same line as the term ---------------------------------------------------------------------------- css: dt { float: left; margin-right: 0.3em; width: 10%; text-align: right; } ,,, * A reasonably nice list with side bar -------------------------------------- dl.bar { margin-left: 5%; border-left: 6px solid lightgrey; padding-top: 1em } dl.bar dt { font-style: italic; font-variant: small-caps; border-bottom: 1px dotted gray; padding-left: 0.5em; padding-bottom: 0.1em; font-weight: bold; } dl.bar dd { font-style: normal; margin-left: 2em; padding-top: 0.5em } ,,, HORIZONTAL LISTS .... * a simple "tab" style horizontal menu with hyperlinks ------------------------------------------------------ html: css: ul { list-style-type: none; border-bottom: 3px solid black } ul li { display: inline; border: 1px solid gray; padding: 0 .2em 0 .2em; margin-left: 0.4em; } ul. li a { text-decoration: none; } ,,, * do something -------------- html: css: #navlist { padding: 3px 1em; margin-left: 0; border-bottom: 1px solid #778; font: bold 12px Verdana, sans-serif; } #navlist li { list-style: none; margin: 0; display: inline; } #navlist li a { padding: 3px 0.5em; margin-left: 0.5em; border: 1px solid #778; border-bottom: none; background: whitesmoke; text-decoration: none; } #navlist li a:link { color: #448; } #navlist li a:visited { color: #667; } ,,, UNORDERED LISTS .... * display a
    list horizontally ("inline") --------------------------------------------- css: ul { list-style-type: none; } li { display: inline; border: 1px solid grey; } html:
    • Item 1
    • Item 2
    ,,, * set an image to use for a list marker ------------------------------------- ul { list-style: url(star.gif) disc } ,,, * set an image for a particular
  • element -------------------------------------------- ul li.x { list-style-image: url(star.png) } ,,, * remove the indentation on a list ---------------------------------- css: ul { margin-left: 0; padding-left: 0; } ,,, display a list with no marker ----------------------------- html:
      ...
    css: UL { list-style-type: none; } ,,, side by side lists with a dark heading -------------------------------------- html:

    year

    • 1990
    • 1992

    month

    • Jan
    • Feb
    css: div { float: left; border-left: 1px dashed; padding-right: 1em } div p:first-child { background: blue; color: white } ,,, == possible values for the 'list-style-type' .. none, No marker .. circle, a circle .. disc, filled circle. This is default .. square, a square .. armenian, The marker is traditional Armenian numbering .. decimal, The marker is a number .. decimal-leading-zero, a number padded by initial zeros (01, 02, 03, etc.) .. georgian, traditional Georgian numbering (an, ban, gan, etc.) .. lower-alpha, lower-alphabetic (a, b, c, d, e, etc.) .. lower-greek, lower-greek (alpha, beta, gamma, etc.) .. lower-latin, lower-latin (a, b, c, d, e, etc.) .. lower-roman, lower-roman (i, ii, iii, iv, v, etc.) .. upper-alpha, upper-alpha (A, B, C, D, E, etc.) .. upper-latin, upper-latin (A, B, C, D, E, etc.) .. upper-roman, upper-roman (I, II, III, IV, V, etc.) .. inherit, the value of the list-style-type property inherits MENUS TAG CLOUDS .... A tag cloud allows data items to be visualised by the size of the text. see http://www.astray.com/recipes for an example. * a fragment of the css for an html tag cloud --------------------------------------------- #tagCloud a.cloud4 { font-size:8pt; } #tagCloud a.cloud3 { font-size:10pt; } #tagCloud a.cloud2 { font-size:12pt; } ,,, * a perl library for making tag clouds >> libhtml-tagcloud-perl HORIZONTAL TAB MENUS .... @@ http://www.dynamicdrive.com/style/csslibrary/item/shade-image-tabs-menu/ shows how to do horizontal tab menus with shaded background @@ http://articles.sitepoint.com/article/accessible-menu-tabs a good article about horizontal menu tabs with rounded tabs and resizable @@ http://ashoksuthar.wordpress.com/2007/02/14/rounded-tab-menu-through-css/ FORMS Consider using a
    with a See the webmistress forms IMAGES * make an image float right ---------------------------- html: css: img.float-right { border:0; float: right; clear: right; margin: 1.2em; } ,,, * make a blockquote with big quote marks -------------------------------------- html:
    annoying but excellent
    css: blockquote { background: transparent url(quoleft.png) left top no-repeat; } blockquote div { padding: 0 48px; background: transparent url(quoright.png) right bottom no-repeat; } ,,, * make a background image for an element, on the left ----------------------------------------------------- a { background:#ffffff url('img_tree.png') no-repeat top left} ,,, * make a background image for an element, on the left (ommitting values) ----------------------------------------------------- a { background: url('img_tree.png') no-repeat left} ,,, * make a no-repeating background image, long-hand ------------------------------------------------- background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:top right; ,,, ICONS .... @@ http://www.favicon.cc/ A site which allows the user to create a 16x16 icon image or modifiy an existing image. The site also has a large collection of icons under the "creative commons" licence. IMAGE GALLERIES * debian: igal, galrey, webmagick, * llgal - Command-line online gallery generator based on "igal" * image magick == image gallery tools .. imageindex - generate static HTML galleries from images .. MARGINS * set the page margins to 5% of the page width >> body { margin-left: 5%; margin-right: 5%; } FLOATING ELEMENTS @@ http://css.maxdesign.com.au/floatutorial/ * Make a box which stays put even when the page is scrolled --------------------------------------------------------- html:
    ...
    css: div.float-right { float: right; width: 25%; margin: 0 0 10px 10px; padding: 10px; background-color: white; border: 1px solid silver; } ,,, * create a 'drop capital' at the beginning of a paragraph. ------------------------------------------------------- html: T... css: span { float:left; width:0.7em; font-size:400%; font-family:algerian,courier; line-height:80%; } ,,, ALIGNMENT * aligning the text of an element --------------------------------- html:

    title

    css: H2 { text-align: center; } ,,, IMAGES create an image with a border and caption at the bottom... ------------------------------------------------------- html:

    St. Tropez

    Saint Tropez and its fort in the evening sun

    css: DIV.figure { float: right; width: 25%; border: thin silver solid; margin: 0.5em; padding: 0.5em; } DIV.figure p { text-align: center; font-style: italic; font-size: smaller; text-indent: 0; } img.scaled { width: 100%; } ,,, BOXES AND BORDERS The 'margin' is outside the border. the margin has no background colour; the 'padding' is inside the border and can have a background colour. the border is a (visible) box which goes around an element. * set all the border properties in one go >> border: 5px solid red; put a thin black solid border around a table -------------------------------------------- html: ...
    css: TABLE { border: 1px solid black; } ,,, make a 'pre' element have a beige background and a width of 80% -------------------------------------------------------------- html:
     ... 
    css: pre.code-line { background-color: beige; width: 80% } ,,, make rounded corners on pre tags. This is not a standards compliant way to make borders, but the other methods are complicated. ---------------------------------------------------------- pre { -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000; } ,,, make a dotted border -------------------- html:

    ...

    css: p.dashed {border-style: dashed; } ,,, * make a heading with a box around it which stretches 70% of the page.. ----------------------------------------------------------------------- css: h3 { padding-left:1em; margin-left:0; border:1 px solid black; width:70 %; } ,,, ROUNDED CORNERS @@ http://www.maxdesign.com.au/articles/pullquote/ A good simple article about how to create rounded corner boxes using a background image * round only the top left corner of a heading -----

    Heading here

    Lorem ipsum dolor sit amet....

    More information

    ,,, SELECTING ELEMENTS WITH CSS * make the font bold for a link within a paragraph element ---------------------------------------------------------- html:

    ...

    css: P.code a { font-weight: bold } ,,, * dont display horizontal rules which come after h1 headings >> h1 + hr { display: none } ##(select 'brother' elements) * select list items which are inside unordered lists >> ul li {} * select elements inside other elements --------------------------------------- html:
    text
    css: dl.book-list dt em.book-description { padding-bottom: .5em; } ,,, * make red all elements which have an href of 'google.com' ---------------------------------------------------------- css: [href="google.com"] { color: red } [href] { color: red } ,,, * change the colour for english css: [lang=en] { color: red} :lang(en) {} ##(the same) ,,, * make attributes for a particular media >> @media screen {} >> @media print {} WEB RESOURCES .... @@ http://www.w3.org/Style/Examples/007/figures @@ http://www.w3.org/Style/CSS/ the official site for css CHECKING HYPERLINKS @@ http://www.linklint.org site for linklint, a hyperlink checker @@ http://validator.w3.org/checklink the site for the w3c hyperlink checker == hyperlink checking utilities .. .. htcheck - derived from htdig, uses MySql backend .. linkchecker - a Python program to check websites for broken links .. linklint - A Perl link checker, development seems to have stopped in 2001 .. checklink - W3C Link Checker Perl script (package w3c-linkchecker ) .. * check the validity of links in the file bookmarks.html >> wget --spider --force-html -i bookmarks.html * check the links on "site.net" and put output files in the "dir" folder ------------------------------------------------------------------------ linklint -http -host site.net -limit 1000 -doc dir /@ options: -http , check via http -host site.net , the site to check -limit 1000 , check at most 1000 pages -doc dir , put output documents in the "dir" folder /@ , check the entire site ,,, * check only the top and the "/doc/" webfolder for bad hyperlinks >> linklint -http -host site.net -doc dir /# /doc/# HYPERLINKS * remove the underline for hyperlinks (visited and unvisited) >> a { text-decoration: none; } * make links which have NOT been visited (clicked) have no underline >> A:link { text-decoration: none; } * set the colour to purple for a hyperlink which has been clicked >> A:visited {color: purple;} * make the link turn blue when the mouse pointer hovers over it >> A:hover { color: navy; } * a link which changes colour when the mouse pointer hovers >> a { color: #000099; text-decoration: none; } >> a:hover { color: #0000FF; background: #FFFF00; } * apply a style to hyperlinks with point to 'pdf' files >> a[href $='.pdf'] { } * put a dotted line underneath a hyperlink >> a { text-decoration: none; border-bottom: 1px dotted; } BACKGROUNDS * set all the background properties >> background: #00ff00 url('image.gif') no-repeat fixed center; COLOURS @@ http://www.dhtmlgoodies.com/scripts/color-schemer/color-schemer.html choose colour schemes @@ http://palettebuilder.com/rgb.aspx another colour chooser site @@ http://www.w3schools.com/css/css_colornames.asp a list of colour names HTML EDITORS * bluefish HTML VALIDATORS * weblint, xmllint SITE DESIGN EXAMPLES These sites contain some colour or design element which may be useful in the development of website. @@ http://stapps.cdu.edu.au/pls/apex/f?p=100:30:1510741901221133 interesting use of icons in the menu bar @@ http://www.sampletheweb.com/ what I consider to be a nice horizontal menu bar @@ http://jmcpherson.org/editing.html soft grey colours @@ http://mail-archives.apache.org/mod_mbox/www-mirrors/200004.mbox/%3CPine.LNX.4.10.10004041616100.4099-100000@squishy.ameth.org%3E bold but pleasant colours. table layout, wine red (white on #900) with bluey greys (bold black on #ddd, normal black on #eee) @@ rsync.net a simple style @@ http://www.cyberciti.biz/ @@ http://www.nixtutor.com/freebsd/understanding-symbolic-links/ Nice colours, rounded page tabs. @@ http://leepoint.net/notes-java/GUI/containers/10windows/15framesize.html a simple underline style @@ http://www.panamet.com.ar/servicios.htm yellowy red colours @@ http://cslife.wordpress.com/2008/12/01/save-vim-syntax-highlighting-to-html/ simple wordpress @@ http://www.online-kredit-index.de/ A simple green style with subtle shaded image backgrounds on banners and navigation bars @@ http://perunews.wordpress.com/threatdown/the-north-coast/ecuadorian-border-crossing/ a reasonably nice banner with browny colours @@ http://www.wollemipine.com/index.php simple, nice colours and a kind of watermark image SOURCE CODE FORMATTING EXAMPLES .... @@ http://stackoverflow.com/questions/1037927/run-pdflatex-quietly Syntax highlighted code and a blueish background for code snippets. @@ http://en.wikipedia.org/wiki/Named_pipe#Named_pipes_in_Unix The wikipedia code boxes is an example of another code formatting style PUBLISHING SOURCE CODE * convert source code to syntax highlighted html >> webcpp inputfile outputfile.ext ##(the file type is guessed from the ext) >> webcpp inputfile outputfile -s ##(dont write and tags) SYNTAX HIGHLIGHTING PROGRAMS * highlight http://www.andre-simon.de/ supports 140 languages and can also output to LaTeX, rtf, HTML, svg, xhtml uses '' tags * gnu source-highlight * code2html a perl script :: webcpp http://webcpp.sourceforge.net uses tags with classes. Html is 'all on one line' style. Supports the languages: iAda95, ASP, Assembler, Basic, C, C#, C++, Cg, CLIPS, Fortran, Haskell, Java, Markup, Modula2, Objective C, Pascal, Perl, PHP, Python, Renderman, Ruby, SQL, Tcl, Unix shell, UnrealScript & VHDL DOCUMENT-NOTES: # this section contains information about the document and # will not normally be printed. # a small image to represent this booklet document-icon: /img/icon/silver-globe.png # a larger image document-image: # what sort of document is this document-type: book # in what kind of state (good or bad) is this document document-quality: average # when was this document last updated document-history: @@ 2009 work begun in colombia @@ 2 april 2010 reviewing this document. Think I will try to combine the css and html to create working examples @@ 12 April 2010 added some notes about boxes with rounded corners. This is a tricky topic. # who wrote this authors: mjb ~ http://bumble.sf.net # a short description of the contents, possibly used for doc lists short-description: using css and html together. # the programming language used in the book code-language: html/css # the script which will be used to produce html (a webpage) make-html: ./booktohtml ? # the script which will produce 'LaTeX' output (for printing, pdf etc) make-latex: