diff --git a/kidiff_wc.sh b/kidiff_wc.sh index 9232ee7..1305fd0 100755 --- a/kidiff_wc.sh +++ b/kidiff_wc.sh @@ -9,10 +9,16 @@ # TODO Improve diff text parser. Currently difficult to diff as modules have multiple # entries on different layers - need to identify graphic change with # TODO Consider removing filename from display format i.e 'filename-F_Cu' becomes 'F_Cu' id:13 -# TODO Add command line quality option - Quality is dpi. 100 is fast but low quality id:4 +# Add command line quality option - Quality is dpi. 100 is fast but low quality id:4 # 600 is very detailed. 300 is a good compromise. +# TODO Consider alternatve generation orders +# 1. svg > png > compare > crop to comparison image > crop source images to match +# 2. svg > recolour +# 2) SVG 'swap'colours would be simplest but although you can colorise the black +#easily, swaping the white for black seems to be problematic - not sure why +#prob something to do with evenodd -qual="300" +qual="100" # TODO Command line options for selecting which plots id:8 @@ -38,7 +44,7 @@ mkdir $OUTPUT_DIR WEB_DIR="web" mkdir $OUTPUT_DIR/$WEB_DIR cp ~/Kicad/KiCad-Diff/style.css $OUTPUT_DIR/$WEB_DIR/ - +# TODO cat >> $OUTPUT_DIR/$WEB_DIR/style.css <<_EOF_ // _EOF_ # TODO Might need to use a more complex strategy to cope with spaces in filename id:17 # using some varient of 'find . -name "*.pro" -print0 | xargs -0' @@ -64,7 +70,7 @@ Margin="#D357D2" In1_Cu="#C2C200" In2_Cu="#C200C2" Dwgs_User="#0364D3" -Cmts_User="#000085" +Cmts_User="#7AC0F4" Eco1_User="#008500" Eco2_User="#C2C200" B_Fab="#858585" @@ -75,6 +81,12 @@ B_CrtYd="#D3D04B" F_CrtYd="#A7A7A7" +# Do something like this +#layertable = {} +#numlayers = pcbnew.PCB_LAYER_ID_COUNT +#for i in range(numlayers): +# layertable[board.GetLayerName(i)] = i + # These are the colour definitions for the 'solarised' theme from pcbnew. #ColorPCBLayer_F.Cu=rgb(221, 47, 44) #ColorPCBLayer_In3.Cu=rgba(194, 194, 194, 0.800) @@ -203,7 +215,7 @@ done for f in $OUTPUT_DIR/$DIFF_2/*.kicad_pcb; do mkdir -p /tmp/svg/$DIFF_2 - echo "Converting $f to .svg's Files will be saved to /tmp/svg" + echo "Converting $f to .svg: Files will be saved to /tmp/svg" /usr/local/bin/plot_pcbnew.py "$f" "/tmp/svg/$DIFF_2" done @@ -217,12 +229,18 @@ done # a generated svg, pixels should be white.) # # The .png files are created in the output directory. - +# +# BUG The crop size can alter if an item is added or removed on the periphery +# should check that both images are the same size. Provided nothing changes +# around the edges this retains focus and detail on the board. +# Alternativly, would need to scan both images and determine the x+y difference and pad. +# may need to pad both top and bottom - for p in /tmp/svg/$DIFF_1/*.svg; do d=$(basename $p) echo "Converting $p to .png" convert -density $qual -fuzz 1% -trim +repage "$p" "$OUTPUT_DIR/$DIFF_1/${d%%.*}.png" + # convert -density $qual "$p" "$OUTPUT_DIR/$DIFF_1/${d%%.*}.png" convert "$OUTPUT_DIR/$DIFF_1/${d%%.*}.png" -negate "$OUTPUT_DIR/$DIFF_1/${d%%.*}.png" done @@ -230,10 +248,28 @@ for p in /tmp/svg/$DIFF_2/*.svg; do d=$(basename $p) echo "Converting $p to .png" convert -density $qual -fuzz 1% -trim +repage "$p" "$OUTPUT_DIR/$DIFF_2/${d%%.*}.png" + # convert -density $qual "$p" "$OUTPUT_DIR/$DIFF_2/${d%%.*}.png" convert "$OUTPUT_DIR/$DIFF_2/${d%%.*}.png" -negate "$OUTPUT_DIR/$DIFF_2/${d%%.*}.png" done +#for p in $OUTPUT_DIR/$DIFF_1/*.png; do +# d=$(basename $p) +# img1w=$(identify -ping -format '%w' "$p") +# img1h=$(identify -ping -format '%h' "$p") +# img2w=$(identify -ping -format '%w' "$OUTPUT_DIR/$DIFF_2/$d") +# img2h=$(identify -ping -format '%h' "$OUTPUT_DIR/$DIFF_2/$d") + + +#if [ "$img1w" == "$img2w" ] && [ "$img1h" == "$img2h" ] +#then echo "$d - MATCH" +#else +# echo "$d size $img1w x $img1h _" +# echo "$OUTPUT_DIR/$DIFF_2/$d size $img2w x $img2h" +#fi +#done + + # Generate png diffs between DIFF_1 and DIFF_2 ############################################## # @@ -305,15 +341,16 @@ DIFF_1_TIME=$(fossil info $DIFF_1 | grep uuid: | awk -F' ' '{ print $4 }') DIFF_2_DATE=$(fossil info $DIFF_2 | grep uuid: | awk -F' ' '{ print $3 }') DIFF_2_TIME=$(fossil info $DIFF_2 | grep uuid: | awk -F' ' '{ print $4 }') +TITLE=$(cat $OUTPUT_DIR/$DIFF_1/*.kicad_pcb | grep title | sed 's/(title_block//g' | sed 's/title//g') +DATE=$(cat $OUTPUT_DIR/$DIFF_1/*.kicad_pcb | grep date | sed 's/(date //g' | sed 's/)//g') +COMPANY=$(cat $OUTPUT_DIR/$DIFF_1/*.kicad_pcb | grep company | sed 's/(company "//g' | sed 's/")//g') + THICK1=$(cat $OUTPUT_DIR/$DIFF_1/*.kicad_pcb | head -n 10 | grep thickness | sed 's/(thickness //g' | sed 's/)//g') DRAWINGS1=$(cat $OUTPUT_DIR/$DIFF_1/*.kicad_pcb | head -n 10 | grep drawings | sed 's/(drawings //g' | sed 's/)//g') TRACKS1=$(cat $OUTPUT_DIR/$DIFF_1/*.kicad_pcb | head -n 10 | grep tracks | sed 's/(tracks //g' | sed 's/)//g') ZONES1=$(cat $OUTPUT_DIR/$DIFF_1/*.kicad_pcb | head -n 10 | grep zones | sed 's/(zones //g' | sed 's/)//g') MODULES1=$(cat $OUTPUT_DIR/$DIFF_1/*.kicad_pcb | head -n 10 | grep modules | sed 's/(modules //g' | sed 's/)//g') NETS1=$(cat $OUTPUT_DIR/$DIFF_1/*.kicad_pcb | head -n 10 | grep nets | sed 's/(nets //g' | sed 's/)//g') -TITLE1=$(cat $OUTPUT_DIR/$DIFF_1/*.kicad_pcb | grep title | sed 's/(title_block (title "//g' | sed 's/")//g') -DATE1=$(cat $OUTPUT_DIR/$DIFF_1/*.kicad_pcb | grep date | sed 's/(date //g' | sed 's/)//g') -COMPANY1=$(cat $OUTPUT_DIR/$DIFF_1/*.kicad_pcb | grep company | sed 's/(company "//g' | sed 's/")//g') THICK2=$(cat $OUTPUT_DIR/$DIFF_2/*.kicad_pcb | head -n 10 | grep thickness | sed 's/(thickness //g' | sed 's/)//g') DRAWINGS2=$(cat $OUTPUT_DIR/$DIFF_2/*.kicad_pcb | head -n 10 | grep drawings | sed 's/(drawings //g' | sed 's/)//g') @@ -321,9 +358,6 @@ TRACKS2=$(cat $OUTPUT_DIR/$DIFF_2/*.kicad_pcb | head -n 10 | grep tracks | sed ' ZONES2=$(cat $OUTPUT_DIR/$DIFF_2/*.kicad_pcb | head -n 10 | grep zones | sed 's/(zones //g' | sed 's/)//g') MODULES2=$(cat $OUTPUT_DIR/$DIFF_2/*.kicad_pcb | head -n 10 | grep modules | sed 's/(modules //g' | sed 's/)//g') NETS2=$(cat $OUTPUT_DIR/$DIFF_2/*.kicad_pcb | head -n 10 | grep nets | sed 's/(nets //g' | sed 's/)//g') -TITLE2=$(cat $OUTPUT_DIR/$DIFF_2/*.kicad_pcb | grep title | sed 's/(title_block (title "//g' | sed 's/")//g') -DATE2=$(cat $OUTPUT_DIR/$DIFF_2/*.kicad_pcb | grep date | sed 's/(date //g' | sed 's/)//g') -COMPANY2=$(cat $OUTPUT_DIR/$DIFF_2/*.kicad_pcb | grep company | sed 's/(company "//g' | sed 's/")//g') #sed 's/(/
/g' | sed 's/)/<\/td>/g') @@ -338,109 +372,106 @@ cat >> $OUTPUT_DIR/$WEB_DIR/index.html < - -
$CHANGED_KICAD_FILES
-
$TITLE
-
$DATE
-
$COMPANY
- - -
Parameters
+ +

$CHANGED_KICAD_FILES +

$TITLE +

$DATE +
$COMPANY -Version
+
Version
-
$DIFF_1
+
$DIFF_1
-
$DIFF_2
+
$DIFF_2
-
Thickness (mm)
+
Thickness (mm)
-
$THICK1
+
$THICK1
-
$THICK2
+
$THICK2
-
Date
+
Date
-
$DIFF_1_DATE
+
$DIFF_1_DATE
-
$DIFF_2_DATE
+
$DIFF_2_DATE
-
Drawings
+
Drawings
-
$DRAWINGS1
+
$DRAWINGS1
-
$DRAWINGS2
+
$DRAWINGS2
-
Time
+
Time
-
$DIFF_1_TIME
+
$DIFF_1_TIME
-
$DIFF_2_TIME
+
$DIFF_2_TIME
-
Tracks
+
Tracks
-
$TRACKS1
+
$TRACKS1
-
$TRACKS2
+
$TRACKS2
-
Zones
+
Zones
-
$ZONES1
+
$ZONES1
-
$ZONES2
+
$ZONES2
-
Modules
+
Modules
-
$MODULES1
+
$MODULES1
-
$MODULES2
+
$MODULES2
-
Nets
+
Nets
-
$NETS1
+
$NETS1
-
$NETS2
+
$NETS2
@@ -456,10 +487,10 @@ HTML for g in $OUTPUT_DIR/diff-$DIFF_1-$DIFF_2/*.png; do # Attempt to force to same size to prevent gaps in page. -convert $g -resize 300x245 $OUTPUT_DIR/$WEB_DIR/thumbs/th_$(basename $g) +#convert $g -resize 300x245 -extent 300x245 -gravity center -background black $OUTPUT_DIR/$WEB_DIR/thumbs/th_$(basename $g) +convert $g -resize 300x245 -background black -gravity center -extent 300x245 $OUTPUT_DIR/$WEB_DIR/thumbs/th_$(basename $g) + #cp $g ./plots/thumbs/th_$(basename $g) - - route=$g file=${route##*/} base=${file%.*} @@ -470,7 +501,7 @@ cat >> $OUTPUT_DIR/$WEB_DIR/index.html <
- +
$base
@@ -487,49 +518,51 @@ cat >>$OUTPUT_DIR/$WEB_DIR/tryptych/$(basename $g).html< -
$base
+ - +

$base
- +
$DIFF_1
-
-
- - - -
Composite
-
-
- +
$DIFF_2
-

Differences
+ + +
+
+ + + +
Composite
+
+
HTML + d=$(basename $g) y=${d%.png} layerName=${y##*-} mod=${layerName//[_]/.} echo $mod diff $OUTPUT_DIR/$DIFF_2/*.kicad_pcb $OUTPUT_DIR/$DIFF_1/*.kicad_pcb >> $OUTPUT_DIR/diff-$DIFF_1-$DIFF_2/diff.txt -diff $OUTPUT_DIR/$DIFF_2/*.kicad_pcb $OUTPUT_DIR/$DIFF_1/*.kicad_pcb | grep $mod | sed 's/> /<\/div>
/g' | sed 's/< /<\/div>
/g' | sed 's/\/n/<\/div>/g' >> $OUTPUT_DIR/$WEB_DIR/tryptych/$(basename $g).html +diff $OUTPUT_DIR/$DIFF_2/*.kicad_pcb $OUTPUT_DIR/$DIFF_1/*.kicad_pcb | grep $mod | sed 's/> /<\/div>
/g' | sed 's/< /<\/div>
/g' | sed 's/\/n/<\/div>/g' >> $OUTPUT_DIR/$WEB_DIR/tryptych/$(basename $g).html # grep $mod | grep 'module' | sed 's/> /
/g' | sed 's/< /
/g' | sed 's/))/)<\/div>/g' >> $OUTPUT_DIR/$WEB_DIR/tryptych/$(basename $g).html diff --git a/plot_pcbnew.py b/plot_pcbnew.py index 560483e..5fb77c2 100755 --- a/plot_pcbnew.py +++ b/plot_pcbnew.py @@ -27,7 +27,8 @@ popt.SetScale(2) popt.SetMirror(False) popt.SetUseGerberAttributes(True) popt.SetExcludeEdgeLayer(False) -popt.SetUseAuxOrigin(True) +popt.SetUseAuxOrigin(False) +#popt.SetUseAuxOrigin(True) pctl.SetColorMode(True) @@ -41,11 +42,11 @@ pctl.SetColorMode(True) layers = [ ("F_Cu", pcbnew.F_Cu, "Top layer"), ("B_Cu", pcbnew.B_Cu, "Bottom layer"), - ("B_Paste", pcbnew.B_Paste, "Paste bottom"), +# ("B_Paste", pcbnew.B_Paste, "Paste bottom"), ("F_Paste", pcbnew.F_Paste, "Paste top"), ("F_SilkS", pcbnew.F_SilkS, "Silk top"), - ("B_SilkS", pcbnew.B_SilkS, "Silk top"), - ("B_Mask", pcbnew.B_Mask, "Mask bottom"), +# ("B_SilkS", pcbnew.B_SilkS, "Silk top"), +# ("B_Mask", pcbnew.B_Mask, "Mask bottom"), ("F_Mask", pcbnew.F_Mask, "Mask top"), ("Edge_Cuts", pcbnew.Edge_Cuts, "Edges"), ("Margin", pcbnew.Margin, "Margin"), @@ -55,11 +56,11 @@ layers = [ ("Cmts_User", pcbnew.Cmts_User, "Comments_User"), ("Eco1_User", pcbnew.Eco1_User, "ECO1"), ("Eco2_User", pcbnew.Eco2_User, "ECO2"), - ("B_Fab", pcbnew.B_Fab, "Fab bottom"), +# ("B_Fab", pcbnew.B_Fab, "Fab bottom"), ("F_Fab", pcbnew.F_Fab, "Fab top"), - ("B_Adhes", pcbnew.B_Adhes, "Adhesive bottom"), +# ("B_Adhes", pcbnew.B_Adhes, "Adhesive bottom"), ("F_Adhes", pcbnew.F_Adhes, "Adhesive top"), - ("B_CrtYd", pcbnew.B_CrtYd, "Courtyard bottom"), +# ("B_CrtYd", pcbnew.B_CrtYd, "Courtyard bottom"), ("F_CrtYd", pcbnew.F_CrtYd, "Courtyard top"), ] diff --git a/sampler.html b/sampler.html new file mode 100644 index 0000000..24b5b01 --- /dev/null +++ b/sampler.html @@ -0,0 +1,2207 @@ + + +Rex Swain's HTML Sampler + + + + + + + + + + + + + +
  + + +
+ + +
+

Rex Swain's HTML Sampler

+

See how your browser renders various HTML elements

+

Last updated 5 December 1999
+[Minor corrections 19 September 2004]

+
+ +

Contents

+ + +
+ +
+ +

Other Summaries and Demos

+
    +
  • See my home page for other summaries and demos: +APL, REXX, XEDIT, Perl, HTML, RGB Colors, HTTP Cookies, Email Forms, +CGI Environment Variables, Server Side Includes, etc... +
+ +

+ + +

HEAD Elements

+
    +The HEAD contains general information about the document. +None of the elements authorized to exist in the contents +of the HEAD are displayed; the displayed material is found within the BODY. + + +

    TITLE

    +
      +<TITLE>...</TITLE> +

      +The TITLE is not part of the document text. +Often the title is used by a browser to label the display window. +Some Web search engines only search the title of Web pages. +Therefore the text of the TITLE should be kept short but +sufficient to identify the document. +

    + + +

    BASE

    +
      +<BASE HREF="..." TARGET="..."> +

      +The BASE element provides the absolute URL base to be used for any +relative URL links in this document. +It must be a complete file name, and is usually the original URL of this document. +If this file is moved, having the BASE set to the original URL eliminates +the need to also move all the documents which are identified by relative +URL links in this document. +

      +Netscape 2.0 defines the TARGET attribute to define a default named target window for +every link in a document that does not have an explicit TARGET attribute. +

    + + +

    META

    +
      +<META HTTP-EQUIV="..." NAME="..." CONTENT="..."> +

      +The META element is used within the HEAD element to embed document meta-information +not defined by other HTML elements. +Such information may be extracted by servers/browsers. +The HTTP-EQUIV attribute binds the element to an HTTP response header. +If not present, the NAME attribute should be used to identify this +meta-information and it should not be used within an HTTP response header. +If the NAME attribute is not present, the name can be assumed equal to the +value of HTTP-EQUIV. +The CONTENT attribute defines the meta-information +content to be associated with the given name and/or HTTP response header. +

      +The URL attribute is a Netscape extension. +Netscape 1.1 has added a automatic refresh capability using the META +element by setting the HTTP-EQUIV attribute to "REFRESH", +the CONTENT attribute to a number of seconds, and +the URL attribute to the file to load which defaults to reloading the same file. +Netscape 1.1 also recognizes placing the URL inside the quotes which define the +CONTENT value by using a semicolon following the number of seconds, +then the URL=http://... text. For example: +

      +

    • <META HTTP-EQUIV="refresh" CONTENT=30 URL="http://..."> +
    • <META HTTP-EQUIV="refresh" CONTENT="30;URL=http://..."> +

      +Some Web search engines look for the following META elements: +

      +

    • <META NAME="description" CONTENT="text ..."> +
    • <META NAME="keywords" CONTENT="kw, kw kw ..."> +

      +You can avoid browser caching with one of the following: +

      +

    • <META HTTP-EQUIV="Expires" CONTENT="Tue, 04 Dec 1993 21:29:02 GMT"> +
    • <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> +

      +See http://vancouver-webpages.com/META/ +for more details. +

    +
+ + +

Comments

+
    +

    Single-Line Comments

    +
      +HTML comments are coded as: +

      +<!-- comment --> +

      +Here comes one now (you should not see "This Is A Comment" below): + +

    +

    Multi-Line Comments

    +
      +

      +Many browsers permit multi-line comments, coded as: +

      +<!-- comment +
      ... +
      comment -->       +

      +Here comes one now (you should not see "This Is A Comment" below): + +

    +
+ + +

Headings

+
    +Note that headings automatically generate vertical spacing +both above and below the heading. +

    + + + + + + + +
    <H1>...</H1>Normal

    Heading 1

    Normal
    <H2>...</H2>Normal

    Heading 2

    Normal
    <H3>...</H3>Normal

    Heading 3

    Normal
    <H4>...</H4>Normal

    Heading 4

    Normal
    <H5>...</H5>Normal
    Heading 5
    Normal
    <H6>...</H6>Normal
    Heading 6
    Normal
    +

+ + +

Fonts

+
    + + +

    Font Sizes

    +
      +

      Font sizes range from 1 through 7. +The base font size is normally 3; specifying +n or -n adjusts from there.

      + + +
      <FONT SIZE=1>...</FONT>
      <FONT SIZE="-2">...</FONT>      		Normal Equals 1 Normal
      Normal Minus 2 Normal +
      <FONT SIZE=2>...</FONT>
      <FONT SIZE="-1">...</FONT>      		Normal Equals 2 Normal
      Normal Minus 1 Normal +
      <FONT SIZE=3>...</FONT>
      <FONT SIZE="-0">...</FONT>
      <FONT SIZE="+0">...</FONT>      		Normal Equals 3 Normal
      Normal Minus 0 Normal
      Normal Plus 0 Normal +
      <FONT SIZE=4>...</FONT>
      <FONT SIZE="+1">...</FONT>      		Normal Equals 4 Normal
      Normal Plus 1 Normal +
      <FONT SIZE=5>...</FONT>
      <FONT SIZE="+2">...</FONT>      		Normal Equals 5 Normal
      Normal Plus 2 Normal +
      <FONT SIZE=6>...</FONT>
      <FONT SIZE="+3">...</FONT>      		Normal Equals 6 Normal
      Normal Plus 3 Normal +
      <FONT SIZE=7>...</FONT>
      <FONT SIZE="+4">...</FONT>      		Normal Equals 7 Normal
      Normal Plus 4 Normal +
      +
    + + +

    Base Font Size

    +
      + +The BASEFONT element may be used to change the default font size from this point on. +For example: +

      +<BASEFONT SIZE="+2"> +

    + + +

    Explicit Font Styles

    +
      + + +
      <B>...</B>Normal Bold style +
      <I>...</I>Normal Italic style +
      <U>...</U>Normal Underlined style +
      +
    + + +

    Logical Font Styles

    +
      + + + +
      <CAPTION>...</CAPTION> style
      <ABBREV>...</ABBREV>Normal Abbreviation style Normal +
      <ACRONYM>...</ACRONYM>Normal Acronym style Normal +
      <ADDRESS>...</ADDRESS>Normal
      Address style
      Normal +
      <AU>...</AU>Normal Author style Normal +
      <BIG>...</BIG>Normal Big style Normal +
      <BLINK>...</BLINK>Normal Blink style Normal +
      <CITE>...</CITE>Normal Citation style Normal +
      <CODE>...</CODE>Normal Code style Normal +
      <DEL>...</DEL>Normal Deleted style Normal +
      <DFN>...</DFN>Normal Defining Instance style Normal +
      <EM>...</EM>Normal Emphasis style Normal +
      <INS>...</INS>Normal Inserted style Normal +
      <KBD>...</KBD>Normal Keyboard style Normal +
      <LISTING>...</LISTING>Normal Listing style Normal +
      <PERSON>...</PERSON>Normal Person style Normal +
      <PRE>...</PRE>Normal 
      Preformatted style
      Normal +
      <Q>...</Q>Normal Quotation style Normal +
      <S>...</S>Normal Strikethrough style Normal +
      <SAMP>...</SAMP>Normal Sample style Normal +
      <SMALL>...</SMALL>Normal Small style Normal +
      <STRIKE>...</STRIKE>Normal Strikethrough style Normal +
      <STRONG>...</STRONG>Normal Strong style Normal +
      <SUB>...</SUB>Normal Subscripted style Normal +
      <SUP>...</SUP>Normal Superscripted style Normal +
      <TT>...</TT>Normal TeleType style Normal +
      <VAR>...</VAR>Normal Variable style Normal +
      <XMP>...</XMP>Normal XMP style Normal +
      Note: tags within an XMP block are not interpreted! +
      XMP: Here's an &amp; ampersand +Normal: Here's an & ampersand +
      +
    +
+ + +

Lists

+
    + + +

    Unordered Lists

    +
      + + + + + + + + + + + + + + + + +
      Unordered List + +<UL>
      +<LI>Item 1
      +<LI>Item 2
      +<LI>Item 3
      +</UL> +       +      		 +
        +
      • Item 1 +
      • Item 2 +
      • Item 3 +
      + +
      Unordered List
      (multi-level) +      		 +<UL>
      +<LI>Level 1, Item 1
      +<UL>
      +<LI>Level 2, Item 1
      +<UL>
      +<LI>Level 3, Item 1
      +<LI>Level 3, Item 2
      +</UL>
      +<LI>Level 2, Item 2
      +</UL>
      +</UL> +       +      		 +
      • Level 1, Item 1 +
        • Level 2, Item 1 +
          • Level 3, Item 1 +
          • Level 3, Item 2 +
          +
        • Level 2, Item 2 +
        +
      + +
      Unordered List
      (with option) +      		<UL PLAIN>
      ...
      </UL>      		 +
        +
      • Item 1 +
      • Item 2 +
      • Item 3 +
      + +
      Unordered List
      (with options) +      		<UL PLAIN COMPACT>
      ...
      </UL>      		 +
        +
      • Item 1 +
      • Item 2 +
      • Item 3 +
      + +
      Unordered List
      (with options) +      		<UL PLAIN WRAP=horiz>
      ...
      </UL>      		 +
        +
      • Item 1 +
      • Item 2 +
      • Item 3 +
      + +
      Unordered List
      (with List Heading) +      		 +<UL>
      +<LH>Heading</LH>
      +<LI>Item 1
      +<LI>Item 2
      +</UL> +      		 +
        +Heading +
      • Item 1 +
      • Item 2 +
      + +
      Unordered List
      (with bullet style option) +      		<UL TYPE=circle>
      ...
      </UL>      		 +
        +
      • Item 1 +
      • Item 2 +
      + +
      Unordered List
      (with bullet style option) +      		<UL TYPE=square>
      ...
      </UL>      		 +
        +
      • Item 1 +
      • Item 2 +
      + +
      Unordered List
      (with bullet style option) +      		<UL TYPE=disc>
      ...
      </UL>      		 +
        +
      • Item 1 +
      • Item 2 +
      + +
      Unordered List
      (with bullet style options) +      		 +<UL>
      +<LI TYPE=circle>...
      +<LI TYPE=square>...
      +<LI TYPE=disc>...
      +</UL> +      		 +
        +
      • Item 1 +
      • Item 2 +
      • Item 3 +
      + +
      Unordered List
      (items without list) +      		 +<LI>Item 1
      +<LI>Item 2
      +<LI>Item 3
      +      		 +
    • Item 1 +
    • Item 2 +
    • Item 3 + +
      • Directory List
      (like an unordered list) +
      Items should be less
      than 20 characters long       +      		 +<DIR>
      +<LI>Item 1
      +<LI>Item 2
      +<LI>Item 3
      +</DIR> +      		 + +
    • Item 1 +
    • Item 2 +
    • Item 3 +
      •  + +
      Menu List
      (like an unordered list) +
      Presents an interactive list
      (?)       +      		 +<MENU>
      +<LI>Item 1
      +<LI>Item 2
      +<LI>Item 3
      +</MENU> +      		 + +
    • Item 1 +
    • Item 2 +
    • Item 3 +
      •  + +
      +
    + + +

    Ordered Lists

    +
      + + + + + + + + + +
      Ordered List + +<OL>
      +<LI>Item 1
      +<LI>Item 2
      +<LI>Item 3
      +</OL> +       +      		 +
        +
      1. Item 1 +
      2. Item 2 +
      3. Item 3 +
      + +
      Ordered List
      (multi-level) +      		 +<OL>
      +<LI>Level 1, Item 1
      +<OL>
      +<LI>Level 2, Item 1
      +<OL>
      +<LI>Level 3, Item 1
      +<LI>Level 3, Item 2
      +</OL>
      +<LI>Level 2, Item 2
      +</OL>
      +</OL> +       +      		 +
      1. Level 1, Item 1 +
        1. Level 2, Item 1 +
          1. Level 3, Item 1 +
          2. Level 3, Item 2 +
          +
        2. Level 2, Item 2 +
        +
      + +
      Ordered List
      (with option) +      		<OL TYPE="i">
      ...
      </OL>      		 +
        +
      1. Item 1 +
      2. Item 2 +
      3. Item 3 +
      4. Item 4 +
      5. Item 5 +
      + +
      Ordered List
      (with options) +      		<OL TYPE="I" START=6>
      ...
      </OL>      		 +
        +
      1. Item 1 +
      2. Item 2 +
      3. Item 3 +
      4. Item 4 +
      5. Item 5 +
      + +
      Ordered List
      (with option) +      		<OL TYPE="a">
      ...
      </OL>      		 +
        +
      1. Item 1 +
      2. Item 2 +
      3. Item 3 +
      4. Item 4 +
      5. Item 5 +
      + +
      Ordered List
      (with option) +      		<OL TYPE="A">
      ...
      </OL>      		 +
        +
      1. Item 1 +
      2. Item 2 +
      3. Item 3 +
      4. Item 4 +
      5. Item 5 +
      + +
      +
    + + +

    Definition Lists

    +
      + + + +
      Definition List +<DL>
      +<DT>Term 1
      +<DD>Defn 1
      +<DT>Term 2
      +<DD>Defn 2
      +...
      +</DL> +      		 +
      +
      +This is the <DT> text. +
      +This is the <DD> text. +
      +Here's a second hunk of <DT> text repeated three times. +Here's a second hunk of <DT> text repeated three times. +Here's a second hunk of <DT> text repeated three times. +
      +Here's a second hunk of <DD> text repeated three times. +Here's a second hunk of <DD> text repeated three times. +Here's a second hunk of <DD> text repeated three times. +
      DT
      DD following very short DT +
      DT
      DD following very short DT +
      + +
      Definition List
      (with option)      		 +<DL COMPACT>
      +<DT>Term 1
      +<DD>Defn 1
      +<DT>Term 2
      +<DD>Defn 2
      +...
      +</DL> +      		 +
      +
      +This is the <DT> text. +
      +This is the <DD> text. +
      +Here's a second hunk of <DT> text repeated three times. +Here's a second hunk of <DT> text repeated three times. +Here's a second hunk of <DT> text repeated three times. +
      +Here's a second hunk of <DD> text repeated three times. +Here's a second hunk of <DD> text repeated three times. +Here's a second hunk of <DD> text repeated three times. +
      DT
      DD following very short DT +
      DT
      DD following very short DT +
      +
      +
    + + +

    Other Lists

    +
      + + + + + +
      Directory List
      (like an unordered list) +
      Items should be less
      than 20 characters long       +      		 +<DIR>
      +<LI>Item 1
      +<LI>Item 2
      +<LI>Item 3
      +</DIR> +      		 + +
    • Item 1 +
    • Item 2 +
    • Item 3 +
      •  + +
      Menu List
      (like an unordered list) +
      Presents an interactive list
      (?)       +      		 +<MENU>
      +<LI>Item 1
      +<LI>Item 2
      +<LI>Item 3
      +</MENU> +      		 + +
    • Item 1 +
    • Item 2 +
    • Item 3 +
      •  + +
      +
    +
+ + +

Text Flow

+
    + + +

    Paragraph vs. Break

    +
      + + + +
      Paragraph...
      <P>
      ...      		 +This is some text repeated a bunch of times. +This is some text repeated a bunch of times. +Note that a closing </P> is optional in most browsers, and is not used here. +Here comes a <P> ... +

      +This is the beginning of another paragraph. +Note that <P> inserts a blank line. +This is some text repeated a bunch of times. +This is some text repeated a bunch of times. +This is some text repeated a bunch of times. + +

      Paragraph
      (with closing tag)      		<P>
      ...
      </P>      		 +Netscape adds a blank line after a paragraph which ends with a </P>. +This is some text repeated a bunch of times. +This is some text repeated a bunch of times. +Here comes a </P> and then another <P> ...

      +

      +This is the beginning of another paragraph. +This is some text repeated a bunch of times. +This is some text repeated a bunch of times. +Here comes a </P>.

      + +
      Break...
      <BR>
      ...      		 +This is some text repeated a bunch of times. +This is some text repeated a bunch of times. +Here comes a <BR> ... +
      +Note that <BR> does NOT insert a blank line. +This is some text repeated a bunch of times. +This is some text repeated a bunch of times. + +
      +
    + + +

    No Break

    +
      + + +
      Normal +... +This is some text repeated three times. +This is some text repeated three times. +This is some text repeated three times. +
      No Break +<NOBR>
      ...
      </NOBR>      		 + +This is some text repeated three times. +This is some text repeated three times. +This is some text repeated three times. + +
      +

      +If necessary, reduce the width of your browser's window. +Notice that NOBR prevents the text from breaking (word-wrapping). +

    + + +

    Word Break

    +
      + +Use the <WBR> tag to insert an optional word break +in the middle of a very long "word". +

      +In the examples below, there are 52 letters (A through Z repeated twice). +In the first case, there are no spaces; in the second case, there is a +<WBR> word break between the first Z and second A. +

      +ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ +

      +ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ +

      +If the browser window is wide enough to display the entire word, it appears +without any space or break. +If the window is not wide enough, the <WBR> tag +tells the browser where it may break the word. +(You may have to reduce the +width of your browser's window to see the difference.) +

      +This is particularly useful for citing very long URLs. +

    + + +

    Paragraph Alignment

    +
      + + + +
      Paragraph
      (with alignment option)      		<P ALIGN=left>
      ...      		 +

      +This is some text repeated a bunch of times. +This is some text repeated a bunch of times. +This is some text repeated a bunch of times. +This is some text repeated a bunch of times. +This is some text repeated a bunch of times. + +

      Paragraph
      (with alignment option)      		<P ALIGN=right>
      ...      		 +

      +This is some text repeated a bunch of times. +This is some text repeated a bunch of times. +This is some text repeated a bunch of times. +This is some text repeated a bunch of times. +This is some text repeated a bunch of times. + +

      Paragraph
      (with alignment option)      		<P ALIGN=center>
      ...      		 +

      +This is some text repeated a bunch of times. +This is some text repeated a bunch of times. +This is some text repeated a bunch of times. +This is some text repeated a bunch of times. +This is some text repeated a bunch of times. + +

      +
    + + +

    Centering

    +
      + + + +
      Center<CENTER>
      ...
      </CENTER>      		 +
      +Note that <CENTER> can center nearly anything: headings, text, tables, etc. +This is some text repeated a bunch of times. +This is some text. +Here comes a <H4> heading... +

      A Heading

      +This is some more text repeated a bunch of times. +This is some text. +This is some text repeated a bunch of times.
      + +
      +
    + + +

    Division Alignment

    + +
      +Like <CENTER>, <DIVISION> may be used to align blocks of other elements. +

      +

      +This is the beginning of a <DIV ALIGN=left> block +

      This is an H4 heading

      +An unordered list: +
      • One
      • Two
      • Three, etc.
      +This is the end of the division; here comes </DIV> +
      + +

      +

      +This is the beginning of a <DIV ALIGN=center> block +

      This is an H4 heading

      +An unordered list: +
      • One
      • Two
      • Three, etc.
      +This is the end of the division; here comes </DIV> +
      + +

      +

      +This is the beginning of a <DIV ALIGN=right> block +

      This is an H4 heading

      +An unordered list: +
      • One
      • Two
      • Three, etc.
      +This is the end of the division; here comes </DIV> +
      + +
    + + +

    Block Quotes

    +
      + + + +
      Block Quote<BLOCKQUOTE>
      ...
      </BLOCKQUOTE>      		 +
      +Text should be both left- and right-indented. +Some browsers render the text in italics. +Now there is a </BLOCKQUOTE> +immediately followed by a new <BLOCKQUOTE> +and then some more text; +there is NOT a <P>. +
      +
      +This is some text repeated a bunch of times. +This is some text repeated a bunch of times. +This is some text repeated a bunch of times. +This is some text repeated a bunch of times. +
      + +
      Block Quote
      +      		<BQ>
      ...
      </BQ>      		 + +Netscape 1.22 and 2.01 do not support the <BQ> tag. +Now there is a </BQ> +immediately followed by a new <BQ> +and then some more text; +there is NOT a <P>. + + +This is some text repeated a bunch of times. +This is some text repeated a bunch of times. +This is some text repeated a bunch of times. +This is some text repeated a bunch of times. + + +
      +
    + + +

    Notes

    +
      + + + +
      Note
      +      		<NOTE>
      ...
      </NOTE>      		 + +This is some text repeated a bunch of times. +Netscape 1.22 and 2.01 do not seem to support this feature. +This is some text repeated a bunch of times. +This is some text repeated a bunch of times. +This is some text repeated a bunch of times. + + +
      Note
      (with option)
      +      		<NOTE ROLE=tip>
      ...
      </NOTE>      		 + +This is some text repeated a bunch of times. +Netscape 1.22 and 2.01 do not seem to support this feature. +This is some text repeated a bunch of times. +This is some text repeated a bunch of times. +This is some text repeated a bunch of times. + + +
      Note
      (with option)
      +      		<NOTE ROLE=warning>
      ...
      </NOTE>      		 + +This is some text repeated a bunch of times. +Netscape 1.22 and 2.01 do not seem to support this feature. +This is some text repeated a bunch of times. +This is some text repeated a bunch of times. +This is some text repeated a bunch of times. + + +
      +
    + + +

    Foototes

    +
      + + + +
      Footnote
      +      		<FN ID="...">
      ...
      </FN>      		 +

      +This is a normal <P> paragraph with a footnote reference +(coded as <A HREF="#fn1">footnote</A>). +In theory, when you click on the reference, the footnote appears. +Netscape 1.22 and 2.01 do not seem to support this feature. +

      + +This is a footnote paragraph +(coded as <FN ID="fn1">). +his is some more of the footnote text. +This is some more of the footnote text. + + +
      +
    + + +

    Banners

    +
      + + + +
      Banner
      +      		<BANNER>
      ...
      </BANNER>      		 + +This is a banner. +Netscape 1.22 and 2.01 do not seem to support this feature. + + +
      +
    + + +

    Indenting Techniques

    +
      + + + +
      Unordered List
      (with no items)      		<UL>
      ...
      </UL>      		 +
        +Text should be left-indented. +This is some text repeated a bunch of times. +This is some text repeated a bunch of times. +This is some text repeated a bunch of times. +This is some text repeated a bunch of times.
      + +
      Definition List
      (with no terms)      		 +<DL>
      +<DD>Defn
      +</DL> +      		 +
      +
      +Text should be left-indented. +This is some text repeated a bunch of times. +This is some text repeated a bunch of times. +This is some text repeated a bunch of times. +This is some text repeated a bunch of times. +
      + +
      Block Quote<BLOCKQUOTE>
      ...
      </BLOCKQUOTE>      		 +
      +Text should be both left- and right-indented. +Some browsers render the text in italics. +This is some text repeated a bunch of times. +This is some text repeated a bunch of times. +
      + +
      +
    +
+ + + +

Colors

+
    + + +Try my +Zoomable RGB Color Sampler. + + +

    Text Colors

    +
      + +Font colors may be specified as follows: +

      +<FONT COLOR="#rrggbb">...</FONT> +

      +In theory, there are 256 3 or 16,777,216 possible colors. +

      +Here are 27 samples of <FONT COLOR="#rrggbb">: +

      + +

      +#000000: 000000 Sample (Black)
+#000080: 000080 Sample
+#0000FF: 0000FF Sample (Blue)
+#008000: 008000 Sample
+#008080: 008080 Sample
+#0080FF: 0080FF Sample
+#00FF00: 00FF00 Sample (Green)
+#00FF80: 00FF80 Sample
+#00FFFF: 00FFFF Sample (Cyan)
+#800000: 800000 Sample
+#800080: 800080 Sample
+#8000FF: 8000FF Sample
+#808000: 808000 Sample
+#808080: 808080 Sample
+#8080FF: 8080FF Sample
+#80FF00: 80FF00 Sample
+#80FF80: 80FF80 Sample
+#80FFFF: 80FFFF Sample
+#FF0000: FF0000 Sample (Red)
+#FF0080: FF0080 Sample
+#FF00FF: FF00FF Sample (Magenta)
+#FF8000: FF8000 Sample
+#FF8080: FF8080 Sample
+#FF80FF: FF80FF Sample
+#FFFF00: FFFF00 Sample (Yellow)
+#FFFF80: FFFF80 Sample
+#FFFFFF: FFFFFF Sample (White)
+
      +
    + + +

    Background Colors

    +
      + +Background color may be specified as an option in the <BODY> tag, +as follows: +

      +<BODY BGCOLOR="#rrggbb"> +

      +In theory, there are 256 3 or 16,777,216 possible colors. +

      +Another way to look at this: +Doug Jacobson's RGB Hex Triplet Color Chart +

      + [htmlrgb.gif] +Click on the thumbnail image to see the full chart (61k). + +

    + + +

    Text, Background & Link Colors

    +
      +Various custom colors may be specified as options in the <BODY> tag, +as follows:

      +<BODY BGCOLOR="#rrggbb" TEXT="#rrggbb" +LINK="#rrggbb" VLINK="#rrggbb" ALINK="#rrggbb"> +

      + +
      OptionSets color of... +
      BGCOLORBackground +
      TEXTNormal text +
      LINKLink text (unvisited) +
      VLINKVisited Link text +
      ALINKActivated Link text (as link is clicked) +
      + +

    +
+ + +

Tables

+
    + + +

    Table Elements

    +
      + + + +
      This is a <CAPTION> Caption
      This is a <TH> Table Heading +
      This is <TD> Table Data +
      This is <TD> Table Data that is long to expand the table horizontally. +
      This is <TD> Table Data +
      + +

      The table above is coded as:

      +<TABLE BORDER=1> +
      <CAPTION>This is ...</CAPTION> +
      <TH>This is ... +
      <TR><TD>This is ... +
      <TR><TD>This is ... +
      <TR><TD>This is ... +
      </TABLE> +       +

    + + +

    Caption Alignment

    +
      + + + +
      This is a <CAPTION> Caption
      This is <TD> Table Data that is long to expand the table horizontally. +
      +

      + + +
      This is a <CAPTION ALIGN=bottom> Caption
      This is <TD> Table Data that is long to expand the table horizontally. +
      +

    + + +

    Table Borders

    +
      + + + +
      <TABLE>
      Thisis
      atable blah blah blah blah blah blah blah blah +
      +

      + + +
      <TABLE BORDER>
      Thisis
      atable blah blah blah blah blah blah blah blah +
      +

      + + +
      <TABLE BORDER=0>
      Thisis
      atable blah blah blah blah blah blah blah blah +
      +

      + + +
      <TABLE BORDER=1>
      Thisis
      atable blah blah blah blah blah blah blah blah +
      +

      + + +
      <TABLE BORDER=2>
      Thisis
      atable blah blah blah blah blah blah blah blah +
      +

      + + +
      <TABLE BORDER=4>
      Thisis
      atable blah blah blah blah blah blah blah blah +
      +

      + + +
      <TABLE BORDER=8>
      Thisis
      atable blah blah blah blah blah blah blah blah +
      +

      + + +
      <TABLE BORDER=16>
      Thisis
      atable blah blah blah blah blah blah blah blah +
      +

    + + +

    Table Width & Height

    +
      + + + +
      <TABLE BORDER=1>
      Thisis
      atable blah blah blah blah blah blah +
      +

      + + +
      <TABLE BORDER=1 WIDTH="50%">
      Thisis
      atable blah blah blah blah blah blah +
      +

      + + +
      <TABLE BORDER=1 WIDTH="90%">
      Thisis
      atable blah blah blah blah blah blah +
      +

      + + +
      <TABLE BORDER=1 WIDTH=200>
      Thisis
      atable blah blah blah blah blah blah +
      +

      + + +
      <TABLE BORDER=1 HEIGHT=200>
      Thisis
      atable blah blah blah blah blah blah +
      +

      + + +
      <TABLE BORDER=1 HEIGHT="25%">
      Thisis
      atable blah blah blah blah blah blah +
      +

    + + +

    Table Alignment

    +
      + + + +
      <TABLE BORDER=1>
      Thisis
      atable blah blah blah blah blah blah blah blah +
      +This text follows the </TABLE> tag. +This text should not flow around the table because the table is neither left- or right-ALIGNed. +This text should not flow around the table because the table is neither left- or right-ALIGNed. +
      +

      + + +
      <TABLE BORDER=1 ALIGN=right>
      Thisis
      atable blah blah blah blah blah blah blah blah +
      +This text follows the </TABLE> tag. +This text should flow around the right-aligned table. +This text should flow around the right-aligned table. +This text should flow around the right-aligned table. +This text should flow around the right-aligned table. +This text should flow around the right-aligned table. +This text should flow around the right-aligned table. +This text should flow around the right-aligned table. +This text should flow around the right-aligned table. +
      +

      + + +
      <TABLE BORDER=1 ALIGN=left>
      Thisis
      atable blah blah blah blah blah blah blah blah +
      +This text follows the </TABLE> tag. +This text should flow around the left-aligned table. +This text should flow around the left-aligned table. +This text should flow around the left-aligned table. +This text should flow around the left-aligned table. +This text should flow around the left-aligned table. +This text should flow around the left-aligned table. +This text should flow around the left-aligned table. +This text should flow around the left-aligned table. +
      +

    + + +

    Horizontal Cell Alignment

    +
      + + +
      This is a <TH> Table Heading +
      This is a <TH ALIGN=left> Table Heading +
      This is a <TH ALIGN=right> Table Heading +
      This is <TD> Table Data that is long to expand the table horizontally. +
      This is <TD> Table Data +
      This is <TD ALIGN=right> Table Data +
      This is <TD ALIGN=center> Table Data +
      +
    + + +

    Vertical Cell Alignment

    +
      + + + + +
      +Some text.
      +Some text.       +      		<TD VALIGN=top> +<TD VALIGN=baseline> +
      +This is some text repeated a bunch of times. +This is some text repeated a bunch of times. +This is some text repeated a bunch of times. +This is some text repeated a bunch of times. +This is some text repeated a bunch of times. +<TD VALIGN=middle> +<TD VALIGN=bottom> +
      +
    +
    + + +

    Cell Spacing & Padding

    +
      + + + +
      <TABLE BORDER=1>
      Thisis
      atable blah blah blah blah blah blah blah blah +
      +

      + + +
      <TABLE BORDER=1 CELLSPACING=16>
      Thisis
      atable blah blah blah blah blah blah blah blah +
      +

      + + +
      <TABLE BORDER=1 CELLPADDING=16>
      Thisis
      atable blah blah blah blah blah blah blah blah +
      +

      + + +
      <TABLE BORDER=1 CELLSPACING=16 CELLPADDING=16>
      Thisis
      atable blah blah blah blah blah blah blah blah +
      +

    + + +

    Column Width

    +
      + + + +
      Percentages
      <TD WIDTH="75%"> +<TD WIDTH="25%"> +
      +

      + + + +
      Pixels
      <TD WIDTH=200> +<TD WIDTH=50> +
      +

    + + +

    NOWRAP

    +
      + + + + +
      Without NOWRAP
      <TD> below +<TD> below +
      blah blah blah blah blah blah blah blah blah blah blah blah blah blah +blah blah blah blah blah blah blah blah blah blah blah blah blah blah +
      +

      + + + + +
      With NOWRAP
      <TD> below +<TD NOWRAP> below +
      blah blah blah blah blah blah blah blah blah blah blah blah blah blah +blah blah blah blah blah blah blah blah blah blah blah blah blah blah +
      +

    + + +

    Row/Column Span

    +
      + + + + + +
      This is a <CAPTION> Caption
      This is a <TH COLSPAN=3> Table Heading +
      This is <TD ROWSPAN=2> Table Data +This is <TD> Table Data +This is <TD> Table Data +
      This is <TD COLSPAN=2> Table Data +
      + +

      The table above is coded as:

      +<TABLE BORDER=1> +
      <CAPTION>This is ...</CAPTION> +
      <TH COLSPAN=3>This is ... +
      <TR> +
      <TD ROWSPAN=2>This is ... +
      <TD>This is ... +
      <TD>This is ... +
      <TR> +
      <TD COLSPAN=2>This is ... +
      </TABLE> +       + +

    +
+ + +

Horizontal Rules

+
    + +<HR>
    +<HR WIDTH="75%">
    +<HR WIDTH="50%" ALIGN=left>
    +<HR WIDTH="50%" ALIGN=right>
    +<HR SIZE=1>
    +<HR SIZE=1 NOSHADE>
    +<HR SIZE=2>
    +<HR SIZE=2 NOSHADE>
    +<HR SIZE=4>
    +<HR SIZE=4 NOSHADE>
    +<HR SIZE=8>
    +<HR SIZE=8 NOSHADE>
    +<HR SIZE=16>
    +<HR SIZE=16 NOSHADE>
    +
+ + + +

Links and Anchors

+
    + +Use <A HREF=...> to hyperlink to another page. +The following line is coded as: +
    +See my <A HREF="index.html">home page</A> for details. +

    +

    + +

    +You can jump to somewhere else on the current page by first defining an "anchor": +
    +<A NAME="colors"></A> +
    +and then specifying that anchor in the link: +
    +See <A HREF="#colors">Colors</A> above. +

    +

    + +

    +Or you can jump into the middle of another page by combining a URL and an "anchor": +
    +See <A HREF="aplinfo.html#stschist">STSC History</A>. +

    +

    + + +
+ + +

Forms

+
    + +
    + +The easiest way to submit a form is via e-mail. +This demonstration form is coded as: +

    +<FORM METHOD=post ACTION="mailto:rex@example.com"> +
    +... form elements ... +
    +</FORM> + +

    +The alternative is to have the form invoke a CGI program, +which would be coded as either: +

    +<FORM METHOD=get  ACTION="http://www.example.com/foo.cgi"> +
    +or: +
    +<FORM METHOD=post ACTION="http://www.example.com/foo.cgi"> +

    +The get method sends the name=value pairs along with the +specified URL -- the user would see something like +http://www.example.com/foo.cgi?first=Rex&last=Swain as foo.cgi was invoked, +and (if written in Perl) foo.cgi would receive +GET via $ENV{'REQUEST_METHOD'} +and first=Rex&last=Swain via $ENV{'QUERY_STRING'}. +

    +The post method sends the name=value pairs via STDIN (standard +input) -- the user would see something like +http://www.example.com/foo.cgi as foo.cgi was invoked, +and (if written in Perl) foo.cgi would receive +POST via $ENV{'REQUEST_METHOD'} +and the length of the standard input via $ENV{'CONTENT_LENGTH'} +and first=Rex&last=Swain via STDIN. + + +

    Text Elements

    +
      + +Here is an <INPUT TYPE="text" SIZE=30 NAME="name1"> element: +

        +Enter your name:
        + +

      + +Here is an <INPUT TYPE="text" SIZE=30 NAME="name2" VALUE="Initialize Me"> element: +

        +Enter your name:
        + +

      + +Here is an <INPUT TYPE="text" SIZE=20 MAXLENGTH=10 NAME="short"> element: +

        +Enter something up to 10 characters long:
        + +

      + +Here is an <INPUT TYPE="password" SIZE=8 NAME="pw"> element: +

        +Guess the secret word:
        + +Any characters typed here appear as asterisks +

      + +This is a <TEXTAREA ROWS=3 COLS=40 NAME="comment1"></TEXTAREA> element: +

        +Your comments, please:
        + +

      + +This is a <TEXTAREA ROWS=2 COLS=40 NAME="comment2">Initialize Me</TEXTAREA> element: +

        +Your comments, please:
        + +

      + +This is a <TEXTAREA ROWS=2 COLS=25 WRAP=soft NAME="comment3"> element: +

        + +

        +

          +
        • WRAP=off (the default) disables word wrap. Text the user types is +displayed and returned exactly as typed. +
        • WRAP=hard or WRAP=physical cause word wrap, and the line +breaks are included when the form is submitted. +
        • WRAP=soft or WRAP=virtual cause word wrap, but the line breaks +are not included when the form is submitted. +

        +Regardless of the WRAP parameter, whenever the user explicitly inserts a +line break, a CR/LF pair (%0D%0A) is returned embedded in the text. +

      + +

    + +

    Radio Buttons

    +
      + +Here are two <INPUT TYPE="radio"> elements: +

      + +<INPUT TYPE="radio" NAME="sex" VALUE="M" CHECKED>Male +
      +<INPUT TYPE="radio" NAME="sex" VALUE="F">Female +       +

        +What gender are you?
        +Male +
        +Female +

      +Note that you use the same NAME parameter for a group of buttons. +If one button has a CHECKED option, it will be selected by default. +If the form is submitted as is, sex=M would be sent. + +

    + +

    Checkboxes

    +
      + +Here are three <INPUT TYPE="checkbox"> elements: +

      + +<INPUT TYPE="checkbox" NAME="tv" CHECKED>TV +
      +<INPUT TYPE="checkbox" NAME="vcr" CHECKED>VCR +
      +<INPUT TYPE="checkbox" NAME="cd">CD Player +       +

        +Which of the following do you own?
        +TV +
        +VCR +
        +CD Player +

      +Note that you use different NAME parameters for each checkbox. +Any checkboxes that have a CHECKED option will be selected by default. +If the form is submitted as is, tv=on&vcr=on would be sent. + +

    + +

    Selection Lists

    +
      + +This is a <SELECT> element +with 5 <OPTION> elements: +

      +<SELECT NAME="country"> +
      <OPTION SELECTED>USA +
      <OPTION>France +
      <OPTION>Germany +
      <OPTION>United Kingdom +
      <OPTION>Other +
      </SELECT> +       +

        +Where are you?
        + +

      +Note that this appears as a drop-down selection box, and +you may select only one item. +

      +Here's the same sort of thing with SIZE=4 +and MULTIPLE options added: +

      +<SELECT SIZE=4 MULTIPLE NAME="os"> +
      <OPTION>DOS +
      <OPTION SELECTED>Windows 3.1 +
      <OPTION>Windows 95 +
      <OPTION SELECTED>OS/2 +
      <OPTION>Other +
      </SELECT> +       +

        +What operating systems have you ever used?
        + +

      +Note that this appears as a scrolling selection box, and +you may select several items. + +

    + +

    Hidden Fields

    +
      + +Here is an <INPUT TYPE="hidden" NAME="Hidden" VALUE="Invisible"> +element: +

        + +

      +You will not see anything, but when the form is submitted, +Hidden=Invisible will be sent. + +

    + +

    Submit/Reset Buttons

    +
      + +Here are vanilla Submit and Reset buttons: +

      +<INPUT TYPE="submit"> +
      <INPUT TYPE="reset"> +       +

        + + +

      +Submit submits the form +(i.e., sends the form to the URL specified in the form's ACTION attribute). +Reset restores all form elements to their default values. +

      +You may change the text on the button faces by +specifying VALUE= parameters: +

      +<INPUT TYPE="submit" VALUE="Send!"> +
      <INPUT TYPE="reset" VALUE="Clear Form"> +       +

        + + +

      + +Here is an <INPUT TYPE="image" SRC="undercon.gif"> element: +

        + +

      +This acts like a Submit button. + +

    +
    +
+ + +

Images

+
    + + +

    Vertical Image Alignment

    +
      + + + + + + + +
      <IMG SRC="undercon.gif"> +This is +some text with no long words: is is is is is is is is is is +is is is is is is is is is is is is is is is is is is is is is is is. +
      <IMG SRC="undercon.gif" ALIGN=bottom> +
      Aligns bottom of image with baseline of line +      		This is +some text with no long words: is is is is is is is is is is +is is is is is is is is is is is is is is is is is is is is is is is. + +
      <IMG SRC="undercon.gif" ALIGN=baseline> +
      Aligns bottom of image with baseline of line +(same as ALIGN=bottom) +      		This is +some text with no long words: is is is is is is is is is is +is is is is is is is is is is is is is is is is is is is is is is is. + +
      <IMG SRC="undercon.gif" ALIGN=absbottom> +
      Aligns bottom of image with lowest item on line +      		This is +some text with no long words: is is is is is is is is is is +is is is is is is is is is is is is is is is is is is is is is is is. + +
      <IMG SRC="undercon.gif" ALIGN=middle> +
      Aligns middle of image with baseline of text +      		This is +some text with no long words: is is is is is is is is is is +is is is is is is is is is is is is is is is is is is is is is is is. + +
      <IMG SRC="undercon.gif" ALIGN=absmiddle> +
      Aligns middle of image with middle of text +      		This is +some text with no long words: is is is is is is is is is is +is is is is is is is is is is is is is is is is is is is is is is is. +
      <IMG SRC="undercon.gif" ALIGN=top> +
      Aligns top of image with tallest item on line +      		This is +some text with no long words: is is is is is is is is is is +is is is is is is is is is is is is is is is is is is is is is is is. + +
      <IMG SRC="undercon.gif" ALIGN=texttop> +
      Aligns top of image with tallest text on line +      		This is +some text with no long words: is is is is is is is is is is +is is is is is is is is is is is is is is is is is is is is is is is. + +
      +
    + + +

    Horizontal Image Alignment

    +
      + + + +
      <IMG SRC="undercon.gif" ALIGN=right> + +This is some text with no long words: is is is is is is is is is is +is is is is is is is is is is is is is is is is is is is is is is is +is is is is is is is is is is is is is is is is is is is is is is is +is is is is is is is is is is is is is is is is is is is is is is is +is is is is is is is is is is is is is is is is is is is is is is is +is is is is is is is is is is is is is is is is is is is is is is is +is is is is is is is is is is is is is is is is is is is is is is is. + +
      <IMG SRC="undercon.gif" ALIGN=left> + +This is some text with no long words: is is is is is is is is is is +is is is is is is is is is is is is is is is is is is is is is is is +is is is is is is is is is is is is is is is is is is is is is is is +is is is is is is is is is is is is is is is is is is is is is is is +is is is is is is is is is is is is is is is is is is is is is is is +is is is is is is is is is is is is is is is is is is is is is is is +is is is is is is is is is is is is is is is is is is is is is is is. + +
      <IMG SRC="undercon.gif" ALIGN=left> +
      and
      <IMG SRC="undercon.gif" ALIGN=right> +      		 +This is some text with no long words: is is is is is is is is is is +is is is is is is is is is is is is is is is is is is is is is is is +is is is is is is is is is is is is is is is is is is is is is is is +is is is is is is is is is is is is is is is is is is is is is is is +is is is is is is is is is is is is is is is is is is is is is is is +is is is is is is is is is is is is is is is is is is is is is is is +is is is is is is is is is is is is is is is is is is is is is is is. + +
      +
    + + +

    Image Space & Border

    +
      + + + +
      <IMG SRC="undercon.gif" ALIGN=left BORDER=1> + +This is some text with no long words: is is is is is is is is is is +is is is is is is is is is is is is is is is is is is is is is is is +is is is is is is is is is is is is is is is is is is is is is is is +is is is is is is is is is is is is is is is is is is is is is is is +is is is is is is is is is is is is is is is is is is is is is is is +is is is is is is is is is is is is is is is is is is is is is is is +is is is is is is is is is is is is is is is is is is is is is is is. + +
      <IMG SRC="undercon.gif" ALIGN=left VSPACE=16 HSPACE=32 BORDER=4> + +This is some text with no long words: is is is is is is is is is is +is is is is is is is is is is is is is is is is is is is is is is is +is is is is is is is is is is is is is is is is is is is is is is is +is is is is is is is is is is is is is is is is is is is is is is is +is is is is is is is is is is is is is is is is is is is is is is is +is is is is is is is is is is is is is is is is is is is is is is is +is is is is is is is is is is is is is is is is is is is is is is is. + +
      +
    + + +

    Image Alternate Text

    +
      + + + +
      <IMG SRC="nosuch.gif"> + +This is some text. + +
      <IMG SRC="nosuch.gif" ALT="Ooops"> +
      Try this with Netscape's "Auto Load Images"
      option turned off       +      		Ooops +This is some text. + +
      +
    + + +

    Image Size & Scale

    +
      + + +
      <IMG SRC="undercon.gif"> +
      Image size unknown until browser retrieves file +      		 +
      <IMG SRC="undercon.gif" WIDTH=40 HEIGHT=40> +
      Browser can allocate space before file is retrieved +      		 +
      <IMG SRC="undercon.gif" WIDTH=80 HEIGHT=80> +
      Browser scales image to specified size +      		 +
      <IMG SRC="undercon.gif" WIDTH=20 HEIGHT=20> +
      Browser scales image to specified size +      		 +
      <IMG SRC="undercon.gif" WIDTH=20 HEIGHT=80> +
      Browser scales image to specified size +      		 + +
      +
    + + + +

    Internal Images

    +
      + +Netscape 1.22 and 2.01 support these internal images: +

      + + + + + + + + + + +
      <IMG SRC="internal-gopher-binary"> page with 0's and 1's
      <IMG SRC="internal-gopher-index"> binoculars
      <IMG SRC="internal-gopher-image"> page with symbols
      <IMG SRC="internal-gopher-menu"> file folder
      <IMG SRC="internal-gopher-movie"> strip of film
      <IMG SRC="internal-gopher-sound"> page with speaker
      <IMG SRC="internal-gopher-text"> page with text
      <IMG SRC="internal-gopher-telnet"> PC icon
      <IMG SRC="internal-gopher-unknown">blank page
      +

      +(Try these on your own server -- each view of this page generated 9 records in +my server's error log.
      RHS 26 July 1999)       +

    + + +

    Client-Side Image Maps

    +
      + + + + + + +Pass your mouse over the picture and keep an eye on your browser's status line. +

      +If your browser supports client-side image maps, you should see a reference +to GOTOTOP while over the top half of the picture, and GOTOBOTTOM while over the +bottom half. +(These links are not active, so if you actually click on the picture, +you'll get an error message saying that the link cannot be found.) +

      +If your browser does not support client-side image maps, if you click on the +picture, nothing will happen. +

      +
      +

      +The HTML code for this is: +

      +<IMG SRC=rexc.gif WIDTH=168 HEIGHT=221 USEMAP="#csimap" ALIGN=right>
+<MAP NAME="csimap">
+<AREA SHAPE="rect" HREF="GOTOTOP.html"    COORDS="0,0,167,110">
+<AREA SHAPE="rect" HREF="GOTOBOTTOM.html" COORDS="0,111,167,220">
+</MAP>
+Blah blah blah
+
      +
    + + +

    Background Image

    +
      + +A background image may be specified as an option in the <BODY> tag, +as follows: +

      +<BODY BACKGROUND="path/filename.gif"> +

      +(Personally, I think that the use of this feature is just about as obnoxious +as <BLINK>!) + +

    + + +

    Figure Element

    +
      + +<FIG> is an HTML3 feature. +If no image appears, your browser does not support figures. +FYI, Netscape 2.01 does not support figures. +

      + + +This is the caption. +This is a figure (<FIG ALIGN=right>) element +with <CAPTION> and <CREDIT> and <OVERLAY> tags. +You should see a photo of me with the under-construction icon overlaid in its center. +This is the credit. + +
      +

      +The HTML code for this is: +

      +<FIG SRC="rexc.gif" WIDTH=168 HEIGHT=221 ALIGN=right>
+<OVERLAY SRC="undercon.gif" WIDTH=40 HEIGHT=40 X=64 Y=80>
+<CAPTION>This is the caption.</CAPTION>
+Blah blah blah
+<CREDIT>This is the credit.</CREDIT>
+</FIG>
+
      +Thanks to Larry Aronson (author of +HTML3 Manual of Style) +for information on this. +
    +
+ + +

Character Entities

+
    + +The chart below was lifted from +Martin Ramsch's +ISO8859-1 Table + +
    +Description                               Code            Entity name
+===================================       ============    ==============
+quotation mark                            &#34;  --> "    &quot;   --> "
+ampersand                                 &#38;  --> &    &amp;    --> &
+less-than sign                            &#60;  --> <    &lt;     --> <
+greater-than sign                         &#62;  --> >    &gt;     --> >
+
+Description                          Char Code            Entity name
+===================================  ==== ============    ==============
+non-breaking space                        &#160; -->      &nbsp;   -->  
+inverted exclamation                 ¡    &#161; --> ¡    &iexcl;  --> ¡
+cent sign                            ¢    &#162; --> ¢    &cent;   --> ¢
+pound sterling                       £    &#163; --> £    &pound;  --> £
+general currency sign                ¤    &#164; --> ¤    &curren; --> ¤
+yen sign                             ¥    &#165; --> ¥    &yen;    --> ¥
+broken vertical bar                  ¦    &#166; --> ¦    &brvbar; --> ¦
+                                                          &brkbar; --> &brkbar;
+section sign                         §    &#167; --> §    &sect;   --> §
+umlaut (dieresis)                    ¨    &#168; --> ¨    &uml;    --> ¨
+                                                          &die;    --> ¨
+copyright                            ©    &#169; --> ©    &copy;   --> ©
+feminine ordinal                     ª    &#170; --> ª    &ordf;   --> ª
+left angle quote, guillemotleft      «    &#171; --> «    &laquo;  --> «
+not sign                             ¬    &#172; --> ¬    &not;    --> ¬
+soft hyphen                          ­    &#173; --> ­    &shy;    --> ­
+registered trademark                 ®    &#174; --> ®    &reg;    --> ®
+macron accent                        ¯    &#175; --> ¯    &macr;   --> ¯
+                                                          &hibar;  --> &hibar;
+degree sign                          °    &#176; --> °    &deg;    --> °
+plus or minus                        ±    &#177; --> ±    &plusmn; --> ±
+superscript two                      ²    &#178; --> ²    &sup2;   --> ²
+superscript three                    ³    &#179; --> ³    &sup3;   --> ³
+acute accent                         ´    &#180; --> ´    &acute;  --> ´
+micro sign                           µ    &#181; --> µ    &micro;  --> µ
+paragraph sign                       ¶    &#182; --> ¶    &para;   --> ¶
+middle dot                           ·    &#183; --> ·    &middot; --> ·
+cedilla                              ¸    &#184; --> ¸    &cedil;  --> ¸
+superscript one                      ¹    &#185; --> ¹    &sup1;   --> ¹
+masculine ordinal                    º    &#186; --> º    &ordm;   --> º
+right angle quote, guillemotright    »    &#187; --> »    &raquo;  --> »
+fraction one-fourth                  ¼    &#188; --> ¼    &frac14; --> ¼
+fraction one-half                    ½    &#189; --> ½    &frac12; --> ½
+fraction three-fourths               ¾    &#190; --> ¾    &frac34; --> ¾
+inverted question mark               ¿    &#191; --> ¿    &iquest; --> ¿
+capital A, grave accent              À    &#192; --> À    &Agrave; --> À
+capital A, acute accent              Á    &#193; --> Á    &Aacute; --> Á
+capital A, circumflex accent         Â    &#194; --> Â    &Acirc;  --> Â
+capital A, tilde                     Ã    &#195; --> Ã    &Atilde; --> Ã
+capital A, dieresis or umlaut mark   Ä    &#196; --> Ä    &Auml;   --> Ä
+capital A, ring                      Å    &#197; --> Å    &Aring;  --> Å
+capital AE diphthong (ligature)      Æ    &#198; --> Æ    &AElig;  --> Æ
+capital C, cedilla                   Ç    &#199; --> Ç    &Ccedil; --> Ç
+capital E, grave accent              È    &#200; --> È    &Egrave; --> È
+capital E, acute accent              É    &#201; --> É    &Eacute; --> É
+capital E, circumflex accent         Ê    &#202; --> Ê    &Ecirc;  --> Ê
+capital E, dieresis or umlaut mark   Ë    &#203; --> Ë    &Euml;   --> Ë
+capital I, grave accent              Ì    &#204; --> Ì    &Igrave; --> Ì
+capital I, acute accent              Í    &#205; --> Í    &Iacute; --> Í
+capital I, circumflex accent         Î    &#206; --> Î    &Icirc;  --> Î
+capital I, dieresis or umlaut mark   Ï    &#207; --> Ï    &Iuml;   --> Ï
+capital Eth, Icelandic               Ð    &#208; --> Ð    &ETH;    --> Ð
+                                                          &Dstrok; --> Đ
+capital N, tilde                     Ñ    &#209; --> Ñ    &Ntilde; --> Ñ
+capital O, grave accent              Ò    &#210; --> Ò    &Ograve; --> Ò
+capital O, acute accent              Ó    &#211; --> Ó    &Oacute; --> Ó
+capital O, circumflex accent         Ô    &#212; --> Ô    &Ocirc;  --> Ô
+capital O, tilde                     Õ    &#213; --> Õ    &Otilde; --> Õ
+capital O, dieresis or umlaut mark   Ö    &#214; --> Ö    &Ouml;   --> Ö
+multiply sign                        ×    &#215; --> ×    &times;  --> ×
+capital O, slash                     Ø    &#216; --> Ø    &Oslash; --> Ø
+capital U, grave accent              Ù    &#217; --> Ù    &Ugrave; --> Ù
+capital U, acute accent              Ú    &#218; --> Ú    &Uacute; --> Ú
+capital U, circumflex accent         Û    &#219; --> Û    &Ucirc;  --> Û
+capital U, dieresis or umlaut mark   Ü    &#220; --> Ü    &Uuml;   --> Ü
+capital Y, acute accent              Ý    &#221; --> Ý    &Yacute; --> Ý
+capital THORN, Icelandic             Þ    &#222; --> Þ    &THORN;  --> Þ
+small sharp s, German (sz ligature)  ß    &#223; --> ß    &szlig;  --> ß
+small a, grave accent                à    &#224; --> à    &agrave; --> à
+small a, acute accent                á    &#225; --> á    &aacute; --> á
+small a, circumflex accent           â    &#226; --> â    &acirc;  --> â
+small a, tilde                       ã    &#227; --> ã    &atilde; --> ã
+small a, dieresis or umlaut mark     ä    &#228; --> ä    &auml;   --> ä
+small a, ring                        å    &#229; --> å    &aring;  --> å
+small ae diphthong (ligature)        æ    &#230; --> æ    &aelig;  --> æ
+small c, cedilla                     ç    &#231; --> ç    &ccedil; --> ç
+small e, grave accent                è    &#232; --> è    &egrave; --> è
+small e, acute accent                é    &#233; --> é    &eacute; --> é
+small e, circumflex accent           ê    &#234; --> ê    &ecirc;  --> ê
+small e, dieresis or umlaut mark     ë    &#235; --> ë    &euml;   --> ë
+small i, grave accent                ì    &#236; --> ì    &igrave; --> ì
+small i, acute accent                í    &#237; --> í    &iacute; --> í
+small i, circumflex accent           î    &#238; --> î    &icirc;  --> î
+small i, dieresis or umlaut mark     ï    &#239; --> ï    &iuml;   --> ï
+small eth, Icelandic                 ð    &#240; --> ð    &eth;    --> ð
+small n, tilde                       ñ    &#241; --> ñ    &ntilde; --> ñ
+small o, grave accent                ò    &#242; --> ò    &ograve; --> ò
+small o, acute accent                ó    &#243; --> ó    &oacute; --> ó
+small o, circumflex accent           ô    &#244; --> ô    &ocirc;  --> ô
+small o, tilde                       õ    &#245; --> õ    &otilde; --> õ
+small o, dieresis or umlaut mark     ö    &#246; --> ö    &ouml;   --> ö
+division sign                        ÷    &#247; --> ÷    &divide; --> ÷
+small o, slash                       ø    &#248; --> ø    &oslash; --> ø
+small u, grave accent                ù    &#249; --> ù    &ugrave; --> ù
+small u, acute accent                ú    &#250; --> ú    &uacute; --> ú
+small u, circumflex accent           û    &#251; --> û    &ucirc;  --> û
+small u, dieresis or umlaut mark     ü    &#252; --> ü    &uuml;   --> ü
+small y, acute accent                ý    &#253; --> ý    &yacute; --> ý
+small thorn, Icelandic               þ    &#254; --> þ    &thorn;  --> þ
+small y, dieresis or umlaut mark     ÿ    &#255; --> ÿ    &yuml;   --> ÿ
+
    +
+ +

+ +
+You are visitor +[Odometer] +since 25 March 1996 + +

+ +Sorry, but I do not have time to provide free answers +to questions about HTML.
+(I'm busy trying to make a living!) So please don't e-mail your questions to me. + +

+ +
+(This is an <ADDRESS> block.) +
+Copyright © 1996-2010 Rex Swain
+E-mail rex@rexswain.com, +Web http://www.rexswain.com
+Permission granted to distribute unmodified copies +
+ +

+ +

Thanks to 3wVentures for supporting this site

+ +
+ + + diff --git a/style.css b/style.css index 2c88e11..8ef6a7b 100644 --- a/style.css +++ b/style.css @@ -1,7 +1,7 @@ /* style.css */ -TODO Need to differentiate the .responsive tag between the index and tryptych views body { - background-color: #a2b1c6; +body { + background-color: #282C35; } .gallery { @@ -27,7 +27,7 @@ TODO Need to differentiate the .responsive tag between the index and tryptych vi padding: 15px; text-align: left; font: 25px arial, sans-serif; - color: #496075; + color: #202b34; } .subtitle { @@ -44,6 +44,14 @@ TODO Need to differentiate the .responsive tag between the index and tryptych vi color: #000000; } +.differences{ + padding: 5px; + text-align: left; + font: 18px courier, monospace; + color: #000000; +} + + .th { padding: 5px; text-align: left; @@ -67,13 +75,14 @@ TODO Need to differentiate the .responsive tag between the index and tryptych vi .responsive { padding: 0 6px; float: left; - width: 19.99999%; + width: 24.99999%; + margin: 6px 0; } @media only screen and (max-width: 700px) { .responsive { - width: 49.99999%; + width: 49.98%; margin: 6px 0; } } @@ -81,6 +90,7 @@ TODO Need to differentiate the .responsive tag between the index and tryptych vi @media only screen and (max-width: 500px) { .responsive { width: 100%; + margin: 6px 0; } } @@ -111,9 +121,313 @@ TODO Need to differentiate the .responsive tag between the index and tryptych vi } .added { - background: #c9f4b3; + color: #5EB6C4; } .removed { - background: #ff9a9a; + color: #BA312D; +} +@import url(http://fonts.googleapis.com/css?family=Inconsolata); +@import url(http://fonts.googleapis.com/css?family=PT+Sans); +@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700); +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +nav, +section, +summary { + display: block; +} +audio, +canvas, +video { + display: inline-block; +} +audio:not([controls]) { + display: none; + height: 0; +} +[hidden] { + display: none; +} +html { + font-family: sans-serif; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} +body { + margin: 0; +} +a:focus { + outline: thin dotted; +} +a:active, +a:hover { + outline: 0; +} +h1 { + font-size: 2em; +} +abbr[title] { + border-bottom: 1px dotted; +} +b, +strong { + font-weight: bold; +} +dfn { + font-style: italic; +} +mark { + background: #ff0; + color: #000; +} +code, +kbd, +pre, +samp { + font-family: monospace, serif; + font-size: 1em; +} +pre { + white-space: pre-wrap; + word-wrap: break-word; +} +q { + quotes: "\201C" "\201D" "\2018" "\2019"; +} +small { + font-size: 80%; +} +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sup { + top: -0.5em; +} +sub { + bottom: -0.25em; +} +img { + border: 0; +} +svg:not(:root) { + overflow: hidden; +} +figure { + margin: 0; +} +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} +legend { + border: 0; + padding: 0; +} +button, +input, +select, +textarea { + font-family: inherit; + font-size: 100%; + margin: 0; +} +button, +input { + line-height: normal; +} +button, +html input[type="button"], +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; + cursor: pointer; +} +button[disabled], +input[disabled] { + cursor: default; +} +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; + padding: 0; +} +input[type="search"] { + -webkit-appearance: textfield; + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + box-sizing: content-box; +} +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} +textarea { + overflow: auto; + vertical-align: top; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +html { + font-family: 'PT Sans', sans-serif; +} +pre, +code { + font-family: 'Inconsolata', sans-serif; +} +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: 'PT Sans Narrow', sans-serif; + font-weight: 700; +} +html { + background-color: #073642; + color: #839496; + margin: 1em; +} +body { + background-color: #002b36; + margin: 0 auto; + max-width: 40cm; + border: 1pt solid #586e75; + padding: 1em; +} + +code { + background-color: #073642; + padding: 2px; +} +a { + color: #b58900; +} +a:visited { + color: #cb4b16; +} +a:hover { + color: #cb4b16; +} +h1 { + color: #d33682; +} +h2, +h3, +h4, +h5, +h6 { + color: #859900; +} +pre { + background-color: #002b36; + color: #839496; + border: 1pt solid #586e75; + padding: 1em; + box-shadow: 5pt 5pt 8pt #073642; +} +pre code { + background-color: #002b36; +} +h1 { + font-size: 2.8em; +} +h2 { + font-size: 2.4em; +} +h3 { + font-size: 1.8em; +} +h4 { + font-size: 1.4em; +} +h5 { + font-size: 1.3em; +} +h6 { + font-size: 1.15em; +} +.tag { + background-color: #073642; + color: #d33682; + padding: 0 0.2em; +} +.todo, +.next, +.done { + color: #002b36; + background-color: #dc322f; + padding: 0 0.2em; +} +.tag { + -webkit-border-radius: 0.35em; + -moz-border-radius: 0.35em; + border-radius: 0.35em; +} +.TODO { + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; + background-color: #2aa198; +} +.NEXT { + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; + background-color: #268bd2; +} +.ACTIVE { + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; + background-color: #268bd2; +} +.DONE { + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; + background-color: #859900; +} +.WAITING { + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; + background-color: #cb4b16; +} +.HOLD { + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; + background-color: #d33682; +} +.NOTE { + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; + background-color: #d33682; +} +.CANCELLED { + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; + background-color: #859900; } diff --git a/style.css.bkp b/style.css.bkp new file mode 100644 index 0000000..5f81446 --- /dev/null +++ b/style.css.bkp @@ -0,0 +1,431 @@ +/* style.css */ + + + +.gallery { + border: 1px solid #ccc; +} + +.gallery:hover { + border: 1px solid #777; +} + +.gallery img { + width: 100%; + height: auto; +} + +.desc { + padding: 15px; + text-align: center; + font: 15px arial, sans-serif; +} + +.title { + padding: 15px; + text-align: left; + font: 25px arial, sans-serif; + color: #202b34; +} + +.subtitle { + padding: 5px; + text-align: left; + font: 20px arial, sans-serif; + color: #000000; +} + +.details { + padding: 20px; + text-align: left; + font: 15px arial, sans-serif; + color: #000000; +} + +.differences{ + padding: 5px; + text-align: left; + font: 18px courier, monospace; + color: #000000; +} + + +.th { + padding: 5px; + text-align: left; + font: 20px arial, sans-serif; + font-weight: bold; + color: #000000; +} + +.td { + padding: 5px; + text-align: left; + font: 15px arial, sans-serif; + color: #000000; +} + +* { + box-sizing: border-box; +} + + +.responsive { + padding: 0 6px; + float: left; + width: 24.99999%; + margin: 6px 0; +} + + +@media only screen and (max-width: 700px) { + .responsive { + width: 49.98%; + margin: 6px 0; + } +} + +@media only screen and (max-width: 500px) { + .responsive { + width: 100%; + margin: 6px 0; + } +} + +.clearfix:after { + content: ""; + display: table; + clear: both; +} + +.box { + float: left; + width: 20px; + height: 20px; + margin: 5px; + border: 1px solid rgba(0, 0, 0, .2); +} + +.red { + background: #F40008; +} + +.green { + background: #43ff01; +} + +.white { + background: #ffffff; +} + +.added { + color: #5EB6C4; +} + +.removed { + color: #BA312D; +} + +@import url(http://fonts.googleapis.com/css?family=Inconsolata); +@import url(http://fonts.googleapis.com/css?family=PT+Sans); +@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700); +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +nav, +section, +summary { + display: block; +} +audio, +canvas, +video { + display: inline-block; +} +audio:not([controls]) { + display: none; + height: 0; +} +[hidden] { + display: none; +} +html { + font-family: sans-serif; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} +body { + margin: 0; +} +a:focus { + outline: thin dotted; +} +a:active, +a:hover { + outline: 0; +} +h1 { + font-size: 2em; +} +abbr[title] { + border-bottom: 1px dotted; +} +b, +strong { + font-weight: bold; +} +dfn { + font-style: italic; +} +mark { + background: #ff0; + color: #000; +} +code, +kbd, +pre, +samp { + font-family: monospace, serif; + font-size: 1em; +} +pre { + white-space: pre-wrap; + word-wrap: break-word; +} +q { + quotes: "\201C" "\201D" "\2018" "\2019"; +} +small { + font-size: 80%; +} +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sup { + top: -0.5em; +} +sub { + bottom: -0.25em; +} +img { + border: 0; +} +svg:not(:root) { + overflow: hidden; +} +figure { + margin: 0; +} +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} +legend { + border: 0; + padding: 0; +} +button, +input, +select, +textarea { + font-family: inherit; + font-size: 100%; + margin: 0; +} +button, +input { + line-height: normal; +} +button, +html input[type="button"], +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; + cursor: pointer; +} +button[disabled], +input[disabled] { + cursor: default; +} +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; + padding: 0; +} +input[type="search"] { + -webkit-appearance: textfield; + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + box-sizing: content-box; +} +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} +textarea { + overflow: auto; + vertical-align: top; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +html { + font-family: 'PT Sans', sans-serif; +} +pre, +code { + font-family: 'Inconsolata', sans-serif; +} +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: 'PT Sans Narrow', sans-serif; + font-weight: 700; +} +html { + background-color: #073642; + color: #839496; + margin: 1em; +} +body { + background-color: #002b36; + margin: 0 auto; + max-width: 23cm; + border: 1pt solid #586e75; + padding: 1em; +} +code { + background-color: #073642; + padding: 2px; +} +a { + color: #b58900; +} +a:visited { + color: #cb4b16; +} +a:hover { + color: #cb4b16; +} +h1 { + color: #d33682; +} +h2, +h3, +h4, +h5, +h6 { + color: #859900; +} +pre { + background-color: #002b36; + color: #839496; + border: 1pt solid #586e75; + padding: 1em; + box-shadow: 5pt 5pt 8pt #073642; +} +pre code { + background-color: #002b36; +} +h1 { + font-size: 2.8em; +} +h2 { + font-size: 2.4em; +} +h3 { + font-size: 1.8em; +} +h4 { + font-size: 1.4em; +} +h5 { + font-size: 1.3em; +} +h6 { + font-size: 1.15em; +} +.tag { + background-color: #073642; + color: #d33682; + padding: 0 0.2em; +} +.todo, +.next, +.done { + color: #002b36; + background-color: #dc322f; + padding: 0 0.2em; +} +.tag { + -webkit-border-radius: 0.35em; + -moz-border-radius: 0.35em; + border-radius: 0.35em; +} +.TODO { + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; + background-color: #2aa198; +} +.NEXT { + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; + background-color: #268bd2; +} +.ACTIVE { + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; + background-color: #268bd2; +} +.DONE { + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; + background-color: #859900; +} +.WAITING { + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; + background-color: #cb4b16; +} +.HOLD { + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; + background-color: #d33682; +} +.NOTE { + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; + background-color: #d33682; +} +.CANCELLED { + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; + background-color: #859900; +}