1. HTML Intermediate

2. Welcome This slideshow presentation is designed to introduce you to intermediate HTML. It is the second of three HTML workshops available at www.tinyurl.com/rpi123. In addition to the three HTML workshops, there are also workshops on CSS, PHP, and MySQL.www.tinyurl.com/rpi123 These slides are based on source material found at the w3schools.com website. You are encouraged to visit the site – it is a great resource.

3. A bit o' history If you aren't interested in the history of HTML, you can skip ahead a few slides without missing much. However, if you'd like to geek out on some hypertext history, read on...

4. HTML Old School 1990: HTML is introduced to the world. 1995: HTML 2.0 is released. 1997: HTML 3.2 is released.  dropped math formulas, reconciled overlap among various proprietary extensions and adopted most of Netscape's visual markup tags. Netscape's blink element and Microsoft's marquee element were omitted due to a mutual agreement between the two companies.

5. HTML Old School 1997: HTML 4.0 is released in response to how awful 3.2 was. 4.0 included:  Strict deprecated elements forbidden  Transitional deprecated elements allowed  Frameset, in which mostly only frame related elements are allowed 1998: HTML 4.0 is released (again).  reissued with minor edits without incrementing the version number.

6. HTML New School 1999: HTML 4.01  Same variations as HTML 4.0 2008: HTML 5  Currently in Working Draft stage. Will to be in Candidate Recommendation stage in 2012.

7. Okay, then. History lesson is over. Let's dive into the types of markup elements used in HTML...

8. Types of markup elements Hypertext markup makes parts of a document into links to other documents. An anchor element creates a hyperlink in the document with the href attribute set to the link URL. For example, the HTML markup, Twitter, will render the word "Twitter" as a hyperlink.

9. Types of markup elements Structural markup describes the purpose of text. For example, Golf establishes "Golf" as a second-level heading. Structural markup does not denote any specific rendering, but most web browsers have default styles for element formatting. Text may be further styled with Cascading Style Sheets (CSS).

10. Types of markup elements Presentational markup describes the appearance of the text, regardless of its purpose. For example boldface indicates that visual output devices should render "boldface" in bold text, but gives little indication what devices which are unable to do this (such as aural devices that read the text aloud) should do.

11. Out With the Old... Presentational markup tags are deprecated * in current HTML and XHTML recommendations and are illegal in HTML5. text * the term deprecation is applied to software features that are superseded and should be avoided.

12. Examples of Text Markup big text small text emphasized text strong text subscripted text superscripted text underlined text [deprecated]

13. More Text Markup computer code text defines a long quotation

14. Table tags Tables are defined with the tag. A table is divided into rows (with the tag), and each row is divided into data cells (with the tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

15. Example:

16. Tables row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

17. Bye-bye Borders

18. Table Borders If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show. To display a table with borders, you will have to use the border attribute:

19. Table Headings Heading Another Heading row 1, cell 1 row 1, cell 2 Headings in a table are defined with the tag.

20. Table Cells row 1, cell 1 row 1, cell 2 row 2, cell 1 Table cells with no content are not displayed very well in most browsers.

21. Table Cells To avoid inconsistent rendering in browsers, add a non-breaking space ( ) to empty data cells to make the borders visible:

22. Tables Visit the sandbox...Visit the sandbox... try adding these attributes to the element: border=”5” cell padding=”5” cell spacing =”5” width=”50%”

23. Lists: Unordered An unordered list is a list of items. The list items are marked with bullets. An unordered list starts with the tag. Each list item starts with the tag. Coffee Milk An unordered list: Coffee Tea Milk

24. Lists: Ordered An ordered list is also a list of items – but the list items are marked with numbers. An ordered list starts with the tag. Each list item starts with the tag. Coffee Milk An ordered list: 1. Coffee 2. Tea 3. Milk

25. Forms HTML Forms are used to select different kinds of user input. A form is defined with the tag. input elements

26. Forms Input - The most used form tag is the tag. The type of input is specified with the type attribute. The most commonly used input types are explained below. Text Fields - Text fields are used when you want the user to type letters, numbers, etc. in a form.

27. Example Form First name: Last name: Visit the sandbox and experiment...

28. Forms: Passwords Shhh... It's a secret...

29. Radio Buttons Radio Buttons are used when you want the user to select one of a limited number of choices. Male Female

30. Checkboxes Checkboxes are used when you want the user to select one or more options. I have a bike I have a car I have an airplane

31. Submit button When the user clicks on the "Submit" button, the content of the form is sent to the server. The form's action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input.

32. Submit button Username: Visit the sandbox...

33. Colors

34. HTML colors are defined using a hexadecimal (hex) notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one of the light sources is 0 (hex 00). The highest value is 255 (hex FF). Hex values are written as 3 double digit numbers, starting with a # sign.

35. Color Values

36. Colors The combination of Red, Green and Blue values from 0 to 255 gives a total of more than 16 million different colors to play with (256 x 256 x 256). Most modern monitors are capable of displaying at least 16384 different colors.

37. Colors The next several slides show shades of red and shades of gray as well as other color selections. Pay attention to how the changing hex codes relate to the changing colors...

42. Validation HTML 3.2 caused a lot of problems. The original HTML was never intended to contain tags for formatting a document. HTML tags were intended to define the content of the document like: This is a paragraph This is a heading

43. Validation When tags like and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large web sites where fonts and color information had to be added to every single Web page, became a long, expensive and unduly painful process.

44. Validation In HTML 5 all formatting is removed from the HTML document and stored in a separate style sheet. Because HTML 5 separates the presentation from the document structure, we have what we always needed: Total control of presentation layout without messing up the document content.

45. Not quite yet... We'll take a close look at HTML 5 in the next workshop in this series.

46. Character Entities Some characters are reserved in HTML. For example, if you use the greater than or less than symbols within your text, your browser could mistake them for markup. If we want the browser to actually display these characters we must insert character entities in the HTML source. A character entity looks like this: &entity_name; OR &#entity_number;

47. Character Entities To display a less than sign we must write: < or < The advantage of using an entity name instead of a number is that the name often is easier to remember. However, the disadvantage is that browsers may not support all entity names (while the support for entity numbers is very good).

48. Character Entities The most common character entity in HTML is the non-breaking space. Normally HTML will truncate spaces in your text. If you write 10 spaces in your text HTML will remove 9 of them. To add lots of spaces to your text, use the character entity.

49. Character Entities

50. End of Workshop More web workshops can be found at www.tinyurl.com/rpi123