1. Client / Server Web Browser (FireFox,MSIE) Web Server (apache, lighttpd) request file HTTP: the common protocol the client and server use to communicate (≈language)

2. TCP/IP Connections Web BrowserWeb Server request file TCP: Virtual Connection IP: Connection Protocol (≈Phone Exchange)

3. Client / Server Sides Client side takes place in the browser Dynamic-HTML (DHTML) This course is purely on the client side Dynamic Web pages are generated on the server side (often using a database) CGI programs: Perl, Ruby, … Template systems: PHP, JSP, …

4. TEXT document that contains: Content is “Tagged” for classification and presentation purposes The text to be presented References to content to be presented (like images) Filename suffix:.html HyperText Markup Language

5. Numerous tutorials on web “View source” is in most browsers some browsers you can right-click on a page and then select view source save the page and open in any text editor Experiment using trial and error to figure out how things work How to learn HTML

6. HTML format Validation Tools Point out your mistakes Some give descriptions and examples of what you should do Not “smart” so they can’t be 100% relied upon; Errors may be too geeky to understand How to learn HTML

7. Basic HTML element consists of a tag with attributes, text, and end tag: some text Attribute values placed in double quotes Multiple attribute/value pairs separated by white space Close tags in reverse order of start tags Basic HTML

8. Open TagClose tagContent Hello World! (tag obviously stands for an html codeword) <tagattribute=”value“>Hello World! (Attribute names and their values depend on the HTML codeword used in the tag) ( It is similar to using parentheses in english )

9. HTML Converters MS Word, Open Office Visual HTML Editors Dreamweaver(great), FrontPage (horrid) Text Editors (some have HTML tools) pico, vi, emacs, Notepad, Textpad, BBedit Ways to Write HTML

10. HTML not case-sensitive Old convention is to use all uppercase Worldwide Web Consortium (W3C) recommends all lower-case tags in HTML 4 recommendation; XHTML demands lower-case tags XHTML is XML legal (case sensitive) Uppercase vs. Lowercase Tags

11. All HTML documents are surrounded by and tags HTML comment: <!-- this is a comment more comment here last comment line --> & comments

12. HTML documents divided into a and a Title tag resides in section and describes content of browser title bar Content to be displayed in browser window is placed between and tags Text may display in browser even breaking the rules (depends on the browser) Fundamentals

13. Basic HTML Tags HTML Document Document Header Page Title Document Contents End of document

14. Different tags have different allowed attributes: Examples:

15. HTML versions HTML 3.2 HTML 5.0 HTML 4.0.1 Transitional HTML 4.0.1 Frameset HTML 4.0.1 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset XHTML 1.0 Strict XHTML 1.1 XHTML 2.0

16. HTML is rendered differently by different browsers and versions of those browsers Always test in every browser and release level users are expected to use Optionally, the specific HTML version used can be specified to aid the browser in properly rendering the page (as well as better handling of your mistakes) Browser differences

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

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

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

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

21. Horizontal Rule Lines

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

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

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

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

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

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

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

29. Unordered Lists Java C++ Perl Java C++ Perl

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

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

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

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

35. table row table cell table cell 2 table celltable cell 2

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

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

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

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

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

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

42. CSS takes over visual characteristics; attributes that will not fade away: td: colspan rowspan tr: width height Newer table tags: CSS can also do tables in the same way Future Trends

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

44. 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& Database=devils&Query=BLANK But replace the word BLANK with any word -- try it a few times Fun Stuff