HTML tags Some popular ones

Paragraph: separated by a single line of white space Line break NOTE: no end tag is used for this tag Headlines ( through ) a very basic way of altering font size based on the “level” of the headline tag (H1 is largest) Horizontal rule (a single line) NOTE: no end tag is used for this tag Formatting text

Hello World Hello World (headline tag) smaller (subhead) headline tag This body text line contains several tags including italics, bold, abbreviation and sample or example. The following line creates a line break followed by a horizontal rule line: This line contains an image.

tag applies to all text that follows until the tag <font face = “arial” color = “red” size =“5” Size attribute is relative ranging from 1 to 7; 3 is default Good practice to use only common fonts like arial, times, helvetica, etc. Fonts

Horizontal Rule Lines

GIF interlacing, transparent colors, animation colors ONLY JPG (JPEG) PNG (sometimes pronounced “ping”) Image Tag

Hexadecimal for Red, Green, and Blue lights 00 = no light ; ff = full light Black: color=“#000000” Red: color = “#ff0000” Green: color= “#00ff00” Blue: color = “#0000ff” HTML colors RGB

Browsers since 2000 support a set of color names, e.g., red, antiquewhite, aquamarine W3C standard does not support color names Browsers differ in the name list supported I RECOMMEND THAT YOU DONT USE THEM HTML Color Names

For jumping around within the same page Name attribute of anchor tag ( ) marks a location on a page Link to that anchor is indicated with “#” appended to the front of thename Go to linked text Most useful pages large enough to scroll Internal Links

(anchor) element inserts a link msnbc Download the file me External Links

Relative to the location of the current file (page) Help Links to a file in subfolder “subdir” called help.htm To go up a level: (../) Help Pathnames

Absolute: specify entire url Help Internal vs. external links defines the base url for a whole document Pathnames

URLS are not always used to specify some file’s location on a server; they are also used to give commands: atabase=devils&Query=X But replace the X with any word note- spaces should be converted to %20 Fun Stuff

Unordered Lists Java C++ Perl Java C++ Perl

Ordered Lists Java C++ Perl 1.Java 2.C++ 3.Perl

Nested Lists Java C++ Perl Shell CGI 1.Java 2.C++ 3.Perl Shell CGI

Spreadsheet - like uses Used for Layout Can be used as graphics themselves Except for Style Sheets, Tables are the only way to format the layout of a page Tables are supported even in the oldest browsers Table formating can be tricky HTML Tables

HTML Structure <TD> Table Data </TD> Table Data cell T a b l e R o w

table row table cell table cell 2 table celltable cell 2

Table Structure a cell span 2 columns span 2 rows columns rows

HTML Structure Table Data Table Data </TD> Table Data </TD> Table Row

Note on Spanning Spanning table cells extend into other cells, pushing them over in the row they span into Browsers will probably guess you want additional columns in the table You must remove these extra cells from the row Total TD tags + spans = # columns in a row Spanning table cells extend into other cells, pushing them over in the row they span into Browsers will probably guess you want additional columns in the table You must remove these extra cells from the row Total TD tags + spans = # columns in a row

Example Table Cell 1A Cell 1B Cell 2A Cell 1ACell 1B Cell 2AB

Any valid HTML is ok in Table Data html width / height (pixels or %) align (left/right/center) valign (top/bottom/middle) border (<table border=”1”) bgcolor

Create problems in special cases Often limited; forces use of tables inside of tables (legal, but avoid doing it) Server programming often requires solid understanding of hand-coding tables Good text editor skills makes a human almost as fast as a table tool (and a human is more flexible) Table Editors

CSS takes over visual characteristics; attributes that will not fade away: td: colspan rowspan tr: width height Newer table tags: CSS can do tables; but with browser issues Future Trends

Actual Tools Firefox Web Developer Add-On Live HTML editing (and css too) Tons of other features, even w3c validation of your HTML HTML tidy validator Firefox Add-On

Online Tutorials google for “html table tutorials”