1. School of Computing and Information Systems CS 371 Web Application Programming HTML The language of the Web

2. School of Computing and Information Systems CS 371 Web Application Programming HTML Markup languages History of HTML Tags and attributes presentation structural groups forms scripting XHTML

3. School of Computing and Information Systems CS 371 Web Application Programming Markup languages designed to annotate text text is separate from formatter presentation markup (like Word) procedural markup (XML or latex) often a markup language is derived from another markup language

4. School of Computing and Information Systems CS 371 Web Application Programming HTML the basic language of the web delivered by http controlled by W3C, sort of driven by browser developers (new features) basics: hyperlinks graphics (video, scripts, etc) formatting

5. School of Computing and Information Systems CS 371 Web Application Programming History of HTML Created by Tim Berners-Lee for CERN as a way for researchers to share documents 1991 HTML introduced 1995 HTML2.0 tables, image maps, internationalization 1997 HTML4.0 – strict, transitional, frameset 2000 XHTML1.0 based on HTML4.01 using XML 2008 HTML5.0 not yet implemented but full of goodies

6. School of Computing and Information Systems CS 371 Web Application Programming HTML editors Word, AppleWorks, OpenOffice Excel Dreamweaver, Publisher, KompoZer text editors

7. School of Computing and Information Systems CS 371 Web Application Programming HTML document tree head and body sections other tags can be used to create a nested structure, examples: table within a li ul within a table cell within a div etc. pages can be organized using tables, divs and lists

8. School of Computing and Information Systems CS 371 Web Application Programming HTML comments used in the typical way also can be important when embedding scripts for browsers that are not so enabled.

9. School of Computing and Information Systems CS 371 Web Application Programming HTML structural tags – used to create divisions in a page – invisible to user - similar to but used for identifying smaller sections of HTML (words, phrases, sentences…) with CSS, these are used to format sections of the page automatically (think method call)

10. School of Computing and Information Systems CS 371 Web Application Programming HTML presentation tags,,, (avoid under normal circumstances) linkText,, special characters use entities like &, <,

11. School of Computing and Information Systems CS 371 Web Application Programming HTML attributes class and id – used for css and accessing the DOM (later) alt and title – for describing page elements that do not load or for mouseovers style – for inline style properties event attributes (onclick…) for javascript avoid attributes like bgcolor, align, etc. tabindex – for tab order

12. School of Computing and Information Systems CS 371 Web Application Programming HTML organization tags lists, both use for items uses and tables can also use, and frames

13. School of Computing and Information Systems CS 371 Web Application Programming HTML forms and scripting www.huh.com/doThis.php tags for text, textarea, buttons, radio buttons, password, select boxes, submit, cancel and file for code (javascript, etc.) for messages when browsers do not support the scripting language

14. School of Computing and Information Systems CS 371 Web Application Programming XHTML notice the “X” – written in XML all elements must be properly nested must always be closed must be in lowercase documents must have one root attributes must all be quoted

15. School of Computing and Information Systems CS 371 Web Application Programming XHTML doctypes doctype is required, first line and not closed (weird) can be strict, transitional or frameset validators: google “xhtml validator”

16. School of Computing and Information Systems CS 371 Web Application Programming meta tags communicates to crawlers determines refresh examples

17. School of Computing and Information Systems CS 371 Web Application Programming link tag can be used for importing code: and for selecting an icon:

18. School of Computing and Information Systems CS 371 Web Application Programming html5 multimedia support unite html and xhtml svg and mathml new elements new form controls drag and drop browser support is spotty

19. School of Computing and Information Systems CS 371 Web Application Programming CSS History of CSS General concepts selectors and properties class selectors id selectors descendant and child selectors box model positioning

20. School of Computing and Information Systems CS 371 Web Application Programming CSS history created as a way to provide consistent approach to providing style info for web docs nine style sheets were proposed and the W3C developed CSS1 from two of them, recommended in 1996 some browsers had limited support for CSS1. In 2000, IE for mac finally supported 99% of CSS1. CSS2 recommended in 1998 browsers do not implement CSS identically from Wikipedia

21. School of Computing and Information Systems CS 371 Web Application Programming CSS basics separates content from style think of factoring out common code by using sub programs comments: /*…*/ placement of stylesheet: external (using link tag) internal (using style tag) inline (using style attribute)

22. School of Computing and Information Systems CS 371 Web Application Programming CSS concept goal is to apply specific styles (font sizes, colors, etc) to specific areas of the page CSS is simply a set of selector/properties pairs selector identifies what or where to apply the style the properties are simply the styles to apply ex: li {font-size:12;} properties within braces separated by ;

23. School of Computing and Information Systems CS 371 Web Application Programming CSS selectors selectors can be any of the html tags class selectors (start with.) id selectors (start with #) descendant selectors li a (to select tags inside list items) li.funky (to select funky class inside list items) div[type=“intro”] for divs with type = intro pseudo selectors (a:link, visited, hover, …)

24. School of Computing and Information Systems CS 371 Web Application Programming CSS properties inside the braces property/value pairs separated by : pairs are separated by ; shorthand properties (font: sans-serif, 18pt, etc.)

25. School of Computing and Information Systems CS 371 Web Application Programming CSS selector precedence surprisingly complicated more specific selectors take precedence over less specific ones (e.g. id over class) many elements inherit style info but not all there are CSS reset files to neutralize defaults from different browsers precedence of source: inline, internal, external

26. School of Computing and Information Systems CS 371 Web Application Programming CSS – box model determines space and borders around page elements width and height of an element apply only to the content within tables cell padding and cell spacing can also effect the space around the content border can have colors and style (solid, dotted, etc)

27. School of Computing and Information Systems CS 371 Web Application Programming CSS - positioning position property can be static, fixed, relative or absolute z-index can be used for stack order of overlapping elements float property allows elements to float float:right /*text floats around it to the left*/ float:left /*text floats around it to the right*/ clear:both /*text no longer floats

28. School of Computing and Information Systems CS 371 Web Application Programming CSS units and colors units can be percent: % metric: in, cm, pt, mm, pc pixels: px relative to font: em (font size), ex (1/2 font size) colors name: red, blue, black, etc. rgb(x,y,z), rgb(x%, y%, z%), #rrggbb

29. School of Computing and Information Systems CS 371 Web Application Programming Recap Use html for content and structure Use CSS for style and some behavior