1. HTML tags Some popular ones

2. 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

3. 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.

5. 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

6. Horizontal Rule Lines

7. GIF interlacing, transparent colors, animation 2 - 256 colors ONLY JPG (JPEG) PNG (sometimes pronounced “ping”) Image Tag

8. 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

9. 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

10. 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

11. (anchor) element inserts a link msnbc http://www.msnbc.com Download the file www.asite.edu/afile.zip email me mailto://greetings@metrostate.edu External Links

12. 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

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

14. URLS are not always used to specify some file’s location on a server; they are also used to give commands: http://www.dict.org/bin/Dict?Form=Dict2&D atabase=devils&Query=X But replace the X with any word note- spaces should be converted to %20 Fun Stuff

15. Unordered Lists Java C++ Perl Java C++ Perl

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

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

18. 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

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

21. table row table cell table cell 2 table celltable cell 2

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

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

24. 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

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

26. 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

27. 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

28. 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

29. 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 http://users.skynet.be/mgueury/mozilla

30. Online Tutorials http://www.w3schools.com/html/html_tables.asp google for “html table tutorials”