1. HTML 4.0 History and Application By: Marc Mayzes

2. Introduction to HTML HTML was developed by Tim Berners-Lee. HTML was not very popular until the WWW explosion. Originally developed for text-based navigation. Further development adds more features for graphics-based navigation.

3. HTML Structure Head and Body Paragraph Headings Center Title Ending Tags

4. Head and Body All HTML documents begin with a tag. Head and body tags follow the tag. - The information in the head section of a document contains titles and scripts. - The information to be shown. Head and Body Example

5. Body Attributes Bgcolor – background color is defined within the tag. Colors are defined with a 6 digit Hexadecimal number. – –Colors with key words: Black Silver Gray White Maroon Red Purple Fuchsia Green Lime Olive Yellow Navy Blue Teal Aqua Bgcolor Example Text Color ExampleBgcolor ExampleText Color Example

6. Paragraph - Formats text by adding double spacing between different paragraphs. Each paragraph has its own set of tags. Paragraph Example

7. Headings Used for structure of HTML documents. Headings are displayed bold and usually have a larger font size. Headings Example

8. Center Used to center text and objects within an HTML document. … Center Example

9. Title - The title tag is found in the section of an HTML document. The information in the title tag is displayed on your browser’s main title bar. Title Example

10. Ending Tags Ending tags must be placed on all HTML documents. All ending tags follow the same format. – …

11. Lists Why use lists? Types of lists –Unordered (bullets) –Ordered (numbers) –Definition

12. Unordered Lists Unordered lists begin with and ends with Each list item begins with and ends with Three bullet types –DiscExampleExample –CircleExampleExample –SquareExampleExample

13. Ordered Lists Ordered lists use numbers to organize data. All ordered lists start with and end with Five number types –Arabic numbers (1,2,3,…)ExampleExample –Uppercase Roman (I,II,III,…)ExampleExample –Lowercase Roman (i,ii,iii,…)ExampleExample –Uppercase Alpha (A,B,C,…)ExampleExample –Lowercase Alpha (a,b,c,…)ExampleExample

14. Definition List Displays list items in a glossary-type format. All definition lists begin with Definition terms begin with Definitions begin with Definition List Example

15. Layout Tables can be used to alter the layout of web pages. Use of table will help the alignment of information and objects.

16. Tables Syntax Columns Table Attributes Border Attributes Width Cellspacing, Cellpadding Caption Cell Attributes Layout

17. Table Syntax All tables begin with and end with. –All table rows begin with and end with All table cells begin with and end with Basic Table Example

18. Table Attributes The two table attributes are ALIGN and VALIGN. (vertical alignment) These attributes are defined within the tag.

19. Table Attributes Presentation attributes can be defined for individual objects including tables. Attributes are defined within the tag. –BgcolorExampleExample –FontExampleExample –Font colorExampleExample

20. Border Attributes Border attributes are defined within the tag. Attributes –BorderwidthExampleExample –BordercolorExampleExample

21. Width Table widths can be defined in pixels and in percentages. The width attribute is defined within the tag. Width Example

22. Cellspacing and Cellpadding Cellspacing is the space between the borders of individual cells in a table. Cellpadding is the space between the text/object within a cell and the cell border. Cellspacing Example Cellpadding Example

23. Caption The caption function allows information to be included at the top or bottom of a table. The caption property begins with and ends with The caption tag is placed between the and tags. Caption Example

24. Cell Attributes Cell attributes are defined within the tag. Cell attributes –BgcolorExampleExample –FontExampleExample –Font colorExampleExample –Size of cellExampleExample

25. Presentation These attributes are used to alter the presentation of a web page. Presentation Elements –Font –Font Style –Images –Horizontal Rule

26. Font – Depricated Use CSS instead The font element defines size, font, and color of text. The font element begins with and ends with. Font attributes are defined within the tag.

27. Font Style Different properties may be set for different sets of text. Font Elements –BoldExampleExample –ItalicsExampleExample –UnderlineExampleExample

28. Bold The bold text element begins with and ends with Tags must be placed right before and right after desired text.

29. Italics Italics text elements begin with and end with. Italics tags are placed right before and right after desired text.

30. Underline Underline text elements begin with and end with. Underline tags are placed right before and right after desired text.

31. Horizontal Rule The horizontal rule element places a bar across the width of a web page. is the only tag needed to place a horizontal rule. Attributes such as width and color can be included HR Example

32. Images All images to be placed in an HTML document are defined with the tag. Important attributes to the tag… – Image Example

33. Hyperlinks There are four main types of hyperlinks. –Text links –Images –Image Maps –Anchors (targets)

34. Anchor (Targets) Anchors are used to link to different areas within the same document. All targets must have a name – Hyperlink to the target. – text or image Anchor Example

35. Source and Destination All hyperlinks begin with and end with. The source and destination must be defined for the hyperlink to work. – Source (text, image, etc.)

36. Text Links The source of the hyperlink is simply text. – Yahoo.http://www.yahoo.com Text Link Example

37. Image Links Images are used for the source instead of text. – Image Link Example

38. Image Maps Image maps allow multiple hyperlinks to be defined to a single image. Linkable areas are defined by pixel locations. Types of shapes –Rectangle –Circle –Polygon

39. Image Maps Image Maps are defined with the and tags. Each image map used must have a name. – Each linkable area must be defined under the tag with the element. –

40. Image Maps Types of Shapes –Rectangle (rect default: x1,y1,x2,y2) –Circle (circle: center point, radius) –Polygon (poly: x1,y1,x2,y2,…,x1,y1) Image Map Example

41. Forms Forms are used to send information from a user to a web server. Form components –Text box –Check box –Radio Buttons –List Box –Text Area –Button –Password –Hidden –Submit Forms Example

42. Frames Frames are used to load two HTML documents in the same window. Frames are defined with – A frame document is a normal html file in which the tag is replaced with Frames Example

43. Frameset Frameset defines the number and size of rows and columns. Width is defined in pixels. * is wildcard. It uses all remaining space for the remaining frames. example

44. Frame Attributes Names and source files must be defined in the tag. Names are used to target incoming web pages to specific frames. Scrolling, noresize – allows author to enable or disable scrolling and frame resizing. - not all browsers support frames.

45. Cascading Style Sheets Cascading style Sheets are mainly used to separate the presentation aspects of a web page from the content aspects. CSS are used for presentation, HTML is used for structure. Things to keep in mind… –Human disabilities- version of browser –Text based browsers –Handheld internet devices

46. Why Cascading style sheets? They are referred to cascading because the browser will apply default values first if no other style is included. Then it will apply external, internal, inline/custom in that order.

47. Types of CSS External – ideal when same style is applied to several pages Internal – style is applied to a single document Inline – Single occurrence within a page (ie. Single word, cell of table) Class – custom style

48. External Style Sheet Separate from.html file Tag placed in.html to link.html to.css (external style sheet file) <link rel=“stylesheet” type=“text/css” href=“filename.css”> example

49. Internal Style Sheet Created within the.html file between … tags Format includes 3 parts: selector {property: value} Selector (html tag), property (attribute), value IE. body {color:black} ; p {font-family:”times new roman”; color: red;text-align: center}

50. Inline Style Sheets Use this sparingly, mixes content with presentation Tag placed around text, image that you are applying the attribute Ie. Text goes here

51. Class Define different styles for same html tag –Ie. One align right, another align center p.right{text-align: right} p.center{text- align:center} You can omit the html tag and create your own class.right {text-align=right} text to be aligned right

52. Cascading Style Sheets Examples – Athletics pageExamples Explanation

53. Scripts Browser Scripting Learn JavaScript Learn DHTML Learn VBScript Learn WMLScript Learn JavaScript Learn DHTML Learn VBScript Learn WMLScript Server Scripting Learn SQL Learn ASP Learn ADO Learn PHP Learn SQL Learn ASP Learn ADO Learn PHP Separate program for a specific purpose

54. Javascript Java and Javascript are NOT the same thing. Javascript was developed with similar ideas as Java, but is totally incompatible with Java. Javascript was developed by Netscape and first appeared in Netscape Navigator.

55. Javascript What Javascript is used for –Cause events from Mouseover Keystroke Action on a form –Actions of Events Image swap Alert box Examples