% text/plain
% -------------------------------------------
% latex generated by: booktolatex.cgi
% from source file : ../htdocs/books/html-css/html-css-book.txt
% on: 11 March 2024, 3:37pm
% querystring: books/html-css/html-css-book.txt
% document-root: /var/www/html
% script-name: /cgi-bin/booktopdf.cgi
% Server-name: bumble.sourceforge.net
% Sed-script: booktolatex.sed
% -------------------------------------------
\documentclass[a4paper,12pt]{article}
\usepackage[margin=0.4cm,noheadfoot]{geometry}
\usepackage{color} %% to use colours, use "xcolor" for more
\usepackage{multicol} %% for multiple columns
\usepackage{keystroke} %% for keyboard key images
\usepackage[toc]{multitoc} %% for multi column table of contents
\usepackage{tocloft} %% to customize the table of contents
\setcounter{tocdepth}{2} %% only display 2 levels in the contents
\setlength{\cftbeforesecskip}{0cm} %% make the toc more compact
\usepackage{listings} %% for nice code listings
%\lstset{language={},
\lstset{language=html/css,
%% define special comment delimiters '##(' and ')'
moredelim=[s][\color{grey}\itshape\footnotesize\ttfamily]{~(}{)},
basicstyle=\ttfamily, %% fixed pitch font
xleftmargin=1cm, %% margin on the left outside the frames
breaklines=true, %% break long code lines
breakatwhitespace=false, %% break long code lines anywhere
breakindent=10pt, %% reduce the indent from 20pt to 10
postbreak=\mbox{{\color{blue}\small$\Rightarrow$\space}}, %% mark with arrow
showstringspaces=false, %% dont show spaces within strings
framerule=5pt, %% thickness of the frames
rulecolor=\color{lightgrey}, frame=l} %% source code settings
\usepackage{graphicx} %% to include images
\usepackage{fancybox} %% boxes with rounded corners
\usepackage{wrapfig} %% flow text around tables, images
\usepackage{tabularx} %% change width of tables
\usepackage[table]{xcolor} %% alternate row colour tables
\usepackage{booktabs} %% for heavier rules in tables
\usepackage[small,compact]{titlesec} %% sections more compact, less space
\usepackage{enumitem} %% more compact and better lists
\setlist{noitemsep} %% reduce list item spacing
\usepackage{hyperref} %% make urls into hyperlinks
\hypersetup{ %% add "pdftex," if only pdf output is required
colorlinks=true, %% set up the colours for the hyperlinks
linkcolor=black, %% internal document links black
urlcolor=black, %% url links black
filecolor=red,
citecolor=red,
bookmarks=true, pdfpagemode=UseOutlines}
% define some colours to use
\definecolor{lightgrey}{gray}{0.70}
\definecolor{grey}{gray}{0.30}
\titleformat{\section}[frame] %% titlesec: create framed section headings
{\normalfont}
{\filleft \footnotesize \enspace Section \thesection\enspace\enspace}
{3pt} {\bfseries\itshape\filright}
\title{Hypertext Markup Language and Cascading Style Sheets}
\author{}
\date{27 October 2011, 6:33pm}
\setlength{\parindent}{0pt}
% \setlength{\parskip}{1ex}
% label lists with stars
\renewcommand{\labelitemi}{$\star$}
\begin{document}
\centerline{\Large \bf Hypertext Markup Language and Cascading Style Sheets} \medskip
\begin{center}
{\huge ``}\textit{the language of the web is the language of the world}{\huge ''}
\textsc{ quote: "the language of the web is the language of the world"}
\end{center}
% -----------------------------------
% the toc should be 2 columns because of the \multitoc package
\tableofcontents
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 $<$div$>$ and $<$span$>$ tags, hair-raising javascript scripts, and
abstruse indecifrable cross-browser hacks, pandering to weird
standards-mangling quirks in Internet Explorer 5.301806 etc.
\begin{description}[labelindent=1cm, leftmargin=2cm, style=nextline]
\item[\url{www.htmlcodetutorial.com}]
an old but good site
\item[\url{http://www.cookwood.com/html/extras/xhtml_ref.html}]
\item[\url{http://krijnhoetmer.nl/stuff/}]
some simple css ideas
\end{description}
\section{Quotes}
Both double quotes " and single quotes ' are valid for
quoting html attribute values.
\begin{lstlisting}
to be...
to be...
##(these are both correct)
\end{lstlisting}
\section{Html}
\subsection{Meta Information}
Meta tags should go in the $<$head$>$...$<$/head$>$ section of the page
\begin{description}[labelindent=1cm, leftmargin=2cm, style=nextline]
\item[\url{http://www.i18nguy.com/markup/metatags.html}]
Information about the use of ``meta'' tags in the html $<$head$>$ section
\end{description}
\emph{ Indicate that the character set for the document is utf-8 }
\begin{lstlisting}
\end{lstlisting}
(possibly the most important metatag! All pages should have this tag)
\emph{ Indicate that the author of the page is 'J Biggle' }
\begin{lstlisting}
\end{lstlisting}
\emph{ State that the last revision of the page occurred on the 3 june 2008 }
\begin{lstlisting}
\end{lstlisting}
\emph{ Indicate that the page is about plants }
\begin{lstlisting}
\end{lstlisting}
\emph{ Indicate some keywords for the document }
\begin{lstlisting}
\end{lstlisting}
\emph{ State which program generated the html page }
\begin{lstlisting}
\end{lstlisting}
\subsection{Foreign Languages And Alphabets}
\arrayrulecolor{gray}
\begin{center}
\begin{tabular}{ |rl| }
\multicolumn{2}{c}{\textbf{ some special chars }} \\
\hline
\texttt{ U+260E } & \&\#x260E; \&\#9742; ☎ BLACK TELEPHONE \\
\texttt{ U+260F } & \&\#x260F; \&\#9743; ☏ WHITE TELEPHONE \\
\texttt{ U+265B } & \&\#x265B; \&\#9819; ♛ BLACK CHESS QUEEN \\
\texttt{ U+265C } & \&\#x265C; \&\#9820; ♜ BLACK CHESS ROOK \\
\texttt{ U+265D } & \&\#x265D; \&\#9821; ♝ BLACK CHESS BISHOP \\
\texttt{ U+265E } & \&\#x265E; \&\#9822; ♞ BLACK CHESS KNIGHT \\
\texttt{ U+265F } & \&\#x265F; \&\#9823; ♟ BLACK CHESS PAWN \\
\texttt{ U+2660 } & \&\#x2660; \&\#9824; ♠ BLACK SPADE SUIT \\
\hline
\end{tabular}
\end{center}
\emph{ The miscelaneous page for html unicode entities }
\begin{lstlisting}
http://theorem.ca/~mvcorks/cgi-bin/unicode.pl.cgi?start=2600&end=26FF
\end{lstlisting}
\emph{ Place some chinese characters using entities notation }
\begin{lstlisting}
高效使用: ⚞ ~(this is useful if the page is not utf8)
\end{lstlisting}
\emph{ Indicate that the character set for the document is utf-8 }
\begin{lstlisting}
\end{lstlisting}
(put this with the $<$head$>$...$<$/head$>$ of the document)
\emph{ Indicate that the language of a document is British English }
\begin{lstlisting}
\end{lstlisting}
\emph{ Indicate that the language of a paragraph is welsh }
\begin{lstlisting}
\end{lstlisting}
\emph{ Find valid language codes for the 'lang' attribute }
\begin{lstlisting}
look at iso-639
\end{lstlisting}
\emph{ Find valid language codes for indigenous languages }
\begin{lstlisting}
see www.sil.org (iso-639-3)
\end{lstlisting}
\subsection{Entities}
\begin{lstlisting}
xmlstarlet esc "&"
\end{lstlisting}
\subsection{Semantic Tags}
Semantic html tags refer to the 'meaning' of the content of
the document, rather than to its appearance.
\begin{description}[labelindent=1cm, leftmargin=2cm, style=nextline]
\item[\url{http://www.w3.org/TR/WCAG10-HTML-TECHS/}]
a guide for writing accessible html
\end{description}
\arrayrulecolor{gray}
\begin{center}
\begin{tabular}{ |rl| }
\multicolumn{2}{c}{\textbf{ semantic html tags }} \\
\hline
\texttt{ $<$q$>$ an inline quotation } \\
\texttt{ $<$cite$>$ } & Citation \\
\texttt{ $<$var$>$ } & Variable \\
\texttt{ $<$code$>$ } & Computer code \\
\texttt{ $<$acronym$>$ } & An acronym \\
\texttt{ $<$abbr$>$ } & An abbreviated word \\
\hline
\end{tabular}
\end{center}
\emph{ Include the title of the document, which appears in the browser title bar }
\begin{lstlisting}
... ~(this goes in the section of the page)
\end{lstlisting}
\emph{ Mark up the text of a quotation (may be several lines) }
\begin{lstlisting}
...
\end{lstlisting}
\emph{ Mark up an inline quotation }
\begin{lstlisting}
...
\end{lstlisting}
\emph{ Include computers source code in a document }
\begin{lstlisting}
...
\end{lstlisting}
\emph{ Include an acronym in a document }
\begin{lstlisting}
WWW
\end{lstlisting}
(it is only necessary to include the 'title' the first occurrance in the page)
\emph{ Abbreviated words should be marked up with $<$abbr$>$ }
\begin{lstlisting}
\end{lstlisting}
\emph{ Indicate an address in the page }
\begin{lstlisting}
3 smith st, bigtown
\end{lstlisting}
\emph{ Cite a literary work }
\begin{lstlisting}
...
\end{lstlisting}
\emph{ Put a caption or heading on a table. usually displayed above the table }
\begin{lstlisting}
a table
...
\end{lstlisting}
\emph{ Variables }
\begin{lstlisting}
\end{lstlisting}
\section{Revisions}
\emph{ Strike out text with a line }
\begin{lstlisting}
text-decoration: line-through;
\end{lstlisting}
\begin{lstlisting}
... ~(the same but older)
\end{lstlisting}
\section{Css Stylesheets}
\emph{ Insert an external stylesheet in a document }
\begin{lstlisting}
\end{lstlisting}
\emph{ Put an embedded style sheet in a web page, }
\begin{lstlisting}
...
\end{lstlisting}
\emph{ Embed style in the element in the html page }
\begin{lstlisting}
big
\end{lstlisting}
\section{Css Syntax}
\emph{ A semicolon before a close brace is not necessary }
\begin{lstlisting}
p { font-weight: bold } ~(this is correct)
\end{lstlisting}
\begin{lstlisting}
p { font-weight: bold; } ~(this is also correct)
\end{lstlisting}
\section{Using Divs With Id Names}
\emph{ Using a named div }
html:
$<$div id=``example'' name=``example''$>$
css:
div\#example $\{$ ... $\}$
\emph{ Elements within the named div }
\begin{lstlisting}
#example ul { ... }
\end{lstlisting}
\section{Tables}
\emph{ Use $<$th$>$ to create header cells }
\begin{lstlisting}
year
\end{lstlisting}
create table with a thin silver border around all cells
\begin{multicols}{2}
\begin{lstlisting}
html:
...
css:
TABLE.b { border: 1px solid silver; border-collapse: collapse; }
.b TD { border: 1px solid silver; }
.b TH { border: 1px solid silver; }
\end{multicols}
\section{Fonts}
\emph{ Create small capital text for H3 headings }
\begin{lstlisting}
H3 { font-variant: small-caps } ~(the 'correct' way)
\end{lstlisting}
\begin{lstlisting}
H3 { font-size: smaller; text-transform: uppercase; } ~(another way)
\end{lstlisting}
\emph{ Set all the font properties in one go. This is known as a 'short-hand' }
\begin{lstlisting}
H4 { font: italic bold x-large arial,sans-serif; }
\end{lstlisting}
\subsection{Font Family}
\emph{ Set the font family for a heading }
\begin{lstlisting}
H1 { font-family: "Times New Roman", Georgia, Serif; }
\end{lstlisting}
\emph{ Generic families }
\begin{lstlisting}
serif, sans-serif, monospace
\end{lstlisting}
\subsection{Text Transformations}
text-transform: none, uppercase lowercase, capitalize
text-decoration: none underline overline line-through blink
\emph{ Put an overline and an underline when the mouse is over a link }
\begin{lstlisting}
A:hover { text-decoration: underline overline }
\end{lstlisting}
\subsection{Text Spacing}
\emph{ Line-height: the space between lines on the page }
\begin{lstlisting}
line-height: 1.5 ~(no units are required)
\end{lstlisting}
\emph{ Letter-spacing: -2px }
\emph{ Word-spacing: }
\subsection{Font Sizes}
\emph{ '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
\begin{lstlisting}
html:
title
> 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,
\begin{lstlisting}
html:
text...
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 }
\end{lstlisting}
\section{Lists}
\begin{description}[labelindent=1cm, leftmargin=2cm, style=nextline]
\item[\url{http://css.maxdesign.com.au/listamatic/}]
lots of different ways to style lists, including horizontally
\end{description}
\subsection{Definition Lists}
\begin{description}[labelindent=1cm, leftmargin=2cm, style=nextline]
\item[\url{http://www.maxdesign.com.au/presentation/definition/}]
a discussion about definition lists
\end{description}
\emph{ Display a definition list with the definition on the same line as the term }
\begin{lstlisting}
css:
dt { float: left; margin-right: 0.3em; width: 10%; text-align: right; }
\end{lstlisting}
\emph{ A reasonably nice list with side bar }
\begin{lstlisting}
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 }
\end{lstlisting}
\subsection{Horizontal Lists}
\emph{ A simple ``tab'' style horizontal menu with hyperlinks }
\begin{lstlisting}
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; }
\end{lstlisting}
\subsection{Unordered Lists}
\emph{ Display a $<$ul$>$ list horizontally (``inline'') }
\begin{lstlisting}
css:
ul { list-style-type: none; }
li { display: inline; border: 1px solid grey; }
html:
Item 1
Item 2
\end{lstlisting}
\emph{ Set an image to use for a list marker }
\begin{lstlisting}
ul { list-style: url(star.gif) disc }
\end{lstlisting}
\emph{ Set an image for a particular $<$li$>$ element }
\begin{lstlisting}
ul li.x { list-style-image: url(star.png) }
\end{lstlisting}
\emph{ Remove the indentation on a list }
\begin{lstlisting}
css:
ul { margin-left: 0; padding-left: 0; }
\end{lstlisting}
display a list with no marker
\begin{lstlisting}
html:
...
css:
UL { list-style-type: none; }
\end{lstlisting}
side by side lists with a dark heading
\begin{lstlisting}
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 }
\end{lstlisting}
\arrayrulecolor{gray}
\begin{center}
\begin{tabular}{ |rl| }
\multicolumn{2}{c}{\textbf{ possible values for the 'list-style-type' }} \\
\hline
\texttt{ none } & No marker \\
\texttt{ circle } & A circle \\
\texttt{ disc } & Filled circle. This is default \\
\texttt{ square } & A square \\
\texttt{ armenian } & The marker is traditional Armenian numbering \\
\texttt{ decimal } & The marker is a number \\
\texttt{ decimal-leading-zero } & A number padded by initial zeros (01, 02, 03, etc.) \\
\texttt{ georgian } & Traditional Georgian numbering (an, ban, gan, etc.) \\
\texttt{ lower-alpha } & Lower-alphabetic (a, b, c, d, e, etc.) \\
\texttt{ lower-greek } & Lower-greek (alpha, beta, gamma, etc.) \\
\texttt{ lower-latin } & Lower-latin (a, b, c, d, e, etc.) \\
\texttt{ lower-roman } & Lower-roman (i, ii, iii, iv, v, etc.) \\
\texttt{ upper-alpha } & Upper-alpha (A, B, C, D, E, etc.) \\
\texttt{ upper-latin } & Upper-latin (A, B, C, D, E, etc.) \\
\texttt{ upper-roman } & Upper-roman (I, II, III, IV, V, etc.) \\
\texttt{ inherit } & The value of the list-style-type property inherits \\
\hline
\end{tabular}
\end{center}
\section{Menus}
\subsection{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.
\emph{ A fragment of the css for an html tag cloud }
\begin{lstlisting}
#tagCloud a.cloud4
{
font-size:8pt;
}
#tagCloud a.cloud3
{
font-size:10pt;
}
#tagCloud a.cloud2
{
font-size:12pt;
}
\end{lstlisting}
\emph{ A perl library for making tag clouds }
\begin{lstlisting}
libhtml-tagcloud-perl
\end{lstlisting}
\subsection{Horizontal Tab Menus}
\begin{description}[labelindent=1cm, leftmargin=2cm, style=nextline]
\item[\url{http://www.dynamicdrive.com/style/csslibrary/item/shade-image-tabs-menu/}]
shows how to do horizontal tab menus with shaded background
\item[\url{http://articles.sitepoint.com/article/accessible-menu-tabs}]
a good article about horizontal menu tabs with rounded tabs and
resizable
\item[\url{http://ashoksuthar.wordpress.com/2007/02/14/rounded-tab-menu-through-css/}]
\end{description}
\section{Forms}
Consider using a $<$fieldset$>$ with a $<$legend$>$
See the webmistress forms
\section{Images}
\emph{ Make an image float right }
\begin{lstlisting}
html:
css:
img.float-right { border:0; float: right; clear: right; margin: 1.2em; }
\end{lstlisting}
\emph{ Make a blockquote with big quote marks }
\begin{lstlisting}
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;
}
\end{lstlisting}
\emph{ Make a background image for an element, on the left }
\begin{lstlisting}
a { background:#ffffff url('img_tree.png') no-repeat top left}
\end{lstlisting}
\emph{ Make a background image for an element, on the left (ommitting values) }
\begin{lstlisting}
a { background: url('img_tree.png') no-repeat left}
\end{lstlisting}
\emph{ Make a no-repeating background image, long-hand }
\begin{lstlisting}
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:top right;
\end{lstlisting}
\subsection{Icons}
\begin{description}[labelindent=1cm, leftmargin=2cm, style=nextline]
\item[\url{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.
\end{description}
\section{Image Galleries}
\emph{ Debian: igal, galrey, webmagick, }
\emph{ Llgal - Command-line online gallery generator based on ``igal'' }
\emph{ Image magick }
\arrayrulecolor{gray}
\begin{center}
\begin{tabular}{ |rl| }
\multicolumn{2}{c}{\textbf{ image gallery tools }} \\
\hline
\texttt{ imageindex } & Generate static HTML galleries from images \\
\hline
\end{tabular}
\end{center}
\section{Margins}
\emph{ Set the page margins to 5\% of the page width }
\begin{lstlisting}
body { margin-left: 5%; margin-right: 5%; }
\end{lstlisting}
\section{Floating Elements}
\begin{description}[labelindent=1cm, leftmargin=2cm, style=nextline]
\item[\url{http://css.maxdesign.com.au/floatutorial/}]
\end{description}
\emph{ Make a box which stays put even when the page is scrolled }
\begin{lstlisting}
html:
...
css:
div.float-right
{
float: right; width: 25%;
margin: 0 0 10px 10px;
padding: 10px;
background-color: white; border: 1px solid silver;
}
\end{lstlisting}
\emph{ Create a 'drop capital' at the beginning of a paragraph. }
\begin{lstlisting}
html:
T...
css:
span
{
float:left; width:0.7em;
font-size:400%; font-family:algerian,courier;
line-height:80%;
}
\end{lstlisting}
\section{Alignment}
\emph{ Aligning the text of an element }
\begin{lstlisting}
html:
title
css:
H2 { text-align: center; }
\end{lstlisting}
\section{Images}
create an image with a border and caption at the bottom...
\begin{lstlisting}
html:
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%; }
\end{lstlisting}
\section{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.
\emph{ Set all the border properties in one go }
\begin{lstlisting}
border: 5px solid red;
\end{lstlisting}
put a thin black solid border around a table
\begin{lstlisting}
html:
...
css:
TABLE { border: 1px solid black; }
\end{lstlisting}
make a 'pre' element have a beige background and a width of 80\%
\begin{lstlisting}
html:
...
css:
pre.code-line { background-color: beige; width: 80% }
\end{lstlisting}
make rounded corners on pre tags. This is not a standards compliant
way to make borders, but the other methods are complicated.
\begin{lstlisting}
pre
{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
}
\end{lstlisting}
make a dotted border
\begin{lstlisting}
html:
...
css:
p.dashed {border-style: dashed; }
\end{lstlisting}
\emph{ Make a heading with a box around it which stretches 70\% of the page.. }
\begin{lstlisting}
css:
h3 { padding-left:1em; margin-left:0;
border:1 px solid black; width:70 %; }
\end{lstlisting}
\section{Rounded Corners}
\begin{description}[labelindent=1cm, leftmargin=2cm, style=nextline]
\item[\url{http://www.maxdesign.com.au/articles/pullquote/}]
A good simple article about how to create rounded corner
boxes using a background image
\end{description}
\emph{ Round only the top left corner of a heading }
-----
$<$html$>$
$<$style type=``text/css''$>$
div\#pullquote
$\{$
margin: 2em;
background: \#09f url(pullquote-a.gif) no-repeat;
$\}$
$<$/style$>$
$<$body$>$
$<$div id=``pullquote''$>$
$<$h2$>$ Heading here $<$/h2$>$
$<$p$>$ Lorem ipsum dolor sit amet.... $<$/p$>$
$<$p class=``more''$>$
$<$a href=``\#''$>$More information$<$/a$>$
$<$/p$>$
$<$/div$>$
$<$/body$>$
$<$/html$>$
,,,
\section{Selecting Elements With Css}
\emph{ Make the font bold for a link within a paragraph element }
\begin{lstlisting}
html:
css:
P.code a { font-weight: bold }
\end{lstlisting}
\emph{ Dont display horizontal rules which come after h1 headings }
\begin{lstlisting}
h1 + hr { display: none } ~(select 'brother' elements)
\end{lstlisting}
\emph{ Select list items which are inside unordered lists }
\begin{lstlisting}
ul li {}
\end{lstlisting}
\emph{ Select elements inside other elements }
\begin{lstlisting}
html:
text
css:
dl.book-list dt em.book-description
{ padding-bottom: .5em; }
\end{lstlisting}
\emph{ Make red all elements which have an href of 'google.com' }
\begin{lstlisting}
css:
[href="google.com"] { color: red }
[href] { color: red }
\end{lstlisting}
\emph{ Change the colour for english }
css:
[lang=en] $\{$ color: red$\}$
:lang(en) $\{$$\}$ {\footnotesize the same }
,,,
\emph{ Make attributes for a particular media }
\begin{lstlisting}
@media screen {}
\end{lstlisting}
\begin{lstlisting}
@media print {}
\end{lstlisting}
\subsection{Web Resources}
\begin{description}[labelindent=1cm, leftmargin=2cm, style=nextline]
\item[\url{http://www.w3.org/Style/Examples/007/figures}]
\item[\url{http://www.w3.org/Style/CSS/}]
the official site for css
\end{description}
\section{Checking Hyperlinks}
\begin{description}[labelindent=1cm, leftmargin=2cm, style=nextline]
\item[\url{http://www.linklint.org}]
site for linklint, a hyperlink checker
\item[\url{http://validator.w3.org/checklink}]
the site for the w3c hyperlink checker
\end{description}
\arrayrulecolor{gray}
\begin{center}
\begin{tabular}{ |rl| }
\multicolumn{2}{c}{\textbf{ hyperlink checking utilities }} \\
\hline
\texttt{ htcheck } & Derived from htdig, uses MySql backend \\
\texttt{ linkchecker } & A Python program to check websites for broken links \\
\texttt{ linklint } & A Perl link checker, development seems to have stopped in 2001 \\
\texttt{ checklink } & W3C Link Checker Perl script (package w3c-linkchecker ) \\
\hline
\end{tabular}
\end{center}
\emph{ Check the validity of links in the file bookmarks.html }
\begin{lstlisting}
wget --spider --force-html -i bookmarks.html
\end{lstlisting}
\emph{ Check the links on ``site.net'' and put output files in the ``dir'' folder }
\begin{lstlisting}
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
\end{lstlisting}
\emph{ Check only the top and the ``/doc/'' webfolder for bad hyperlinks }
\begin{lstlisting}
linklint -http -host site.net -doc dir /# /doc/#
\end{lstlisting}
\section{Hyperlinks}
\emph{ Remove the underline for hyperlinks (visited and unvisited) }
\begin{lstlisting}
a { text-decoration: none; }
\end{lstlisting}
\emph{ Make links which have NOT been visited (clicked) have no underline }
\begin{lstlisting}
A:link { text-decoration: none; }
\end{lstlisting}
\emph{ Set the colour to purple for a hyperlink which has been clicked }
\begin{lstlisting}
A:visited {color: purple;}
\end{lstlisting}
\emph{ Make the link turn blue when the mouse pointer hovers over it }
\begin{lstlisting}
A:hover { color: navy; }
\end{lstlisting}
\emph{ A link which changes colour when the mouse pointer hovers }
\begin{lstlisting}
a { color: #000099; text-decoration: none; }
\end{lstlisting}
\begin{lstlisting}
a:hover { color: #0000FF; background: #FFFF00; }
\end{lstlisting}
\emph{ Apply a style to hyperlinks with point to 'pdf' files }
\begin{lstlisting}
a[href $='.pdf'] { }
\end{lstlisting}
\emph{ Put a dotted line underneath a hyperlink }
\begin{lstlisting}
a { text-decoration: none; border-bottom: 1px dotted; }
\end{lstlisting}
\section{Backgrounds}
\emph{ Set all the background properties }
\begin{lstlisting}
background: #00ff00 url('image.gif') no-repeat fixed center;
\end{lstlisting}
\section{Colours}
\begin{description}[labelindent=1cm, leftmargin=2cm, style=nextline]
\item[\url{http://www.dhtmlgoodies.com/scripts/color-schemer/color-schemer.html}]
choose colour schemes
\item[\url{http://palettebuilder.com/rgb.aspx}]
another colour chooser site
\item[\url{http://www.w3schools.com/css/css_colornames.asp}]
a list of colour names
\end{description}
\section{Html Editors}
\emph{ Bluefish }
\section{Html Validators}
\emph{ Weblint, xmllint }
\section{Site Design Examples}
These sites contain some colour or design element which may be useful
in the development of website.
\begin{description}[labelindent=1cm, leftmargin=2cm, style=nextline]
\item[\url{http://stapps.cdu.edu.au/pls/apex/f?p=100:30:1510741901221133}]
interesting use of icons in the menu bar
\item[\url{http://www.sampletheweb.com/}]
what I consider to be a nice horizontal menu bar
\item[\url{http://jmcpherson.org/editing.html}]
soft grey colours
\item[\url{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)
\item[\url{rsync.net}]
a simple style
\item[\url{http://www.cyberciti.biz/}]
\item[\url{http://www.nixtutor.com/freebsd/understanding-symbolic-links/}]
Nice colours, rounded page tabs.
\item[\url{http://leepoint.net/notes-java/GUI/containers/10windows/15framesize.html}]
a simple underline style
\item[\url{http://www.panamet.com.ar/servicios.htm}]
yellowy red colours
\item[\url{http://cslife.wordpress.com/2008/12/01/save-vim-syntax-highlighting-to-html/}]
simple wordpress
\item[\url{http://www.online-kredit-index.de/}]
A simple green style with subtle shaded image backgrounds
on banners and navigation bars
\item[\url{http://perunews.wordpress.com/threatdown/the-north-coast/ecuadorian-border-crossing/}]
a reasonably nice banner with browny colours
\item[\url{http://www.wollemipine.com/index.php}]
simple, nice colours and a kind of watermark image
\end{description}
\subsection{Source Code Formatting Examples}
\begin{description}[labelindent=1cm, leftmargin=2cm, style=nextline]
\item[\url{http://stackoverflow.com/questions/1037927/run-pdflatex-quietly}]
Syntax highlighted code and a blueish background for code
snippets.
\item[\url{http://en.wikipedia.org/wiki/Named_pipe\#Named_pipes_in_Unix}]
The wikipedia code boxes is an example of another code formatting style
\end{description}
\section{Publishing Source Code}
\emph{ Convert source code to syntax highlighted html }
\begin{lstlisting}
webcpp inputfile outputfile.ext ~(the file type is guessed from the ext)
\end{lstlisting}
\begin{lstlisting}
webcpp inputfile outputfile -s ~(dont write and tags)
\end{lstlisting}
\section{Syntax Highlighting Programs}
\emph{ Highlight http://www.andre-simon.de/ supports 140 languages and }
can also output to LaTeX, rtf, HTML, svg, xhtml uses '$<$span$>$' tags
\emph{ Gnu source-highlight }
\emph{ Code2html a perl script }
:: webcpp http://webcpp.sourceforge.net
uses $<$font$>$ 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
\end{document}