1 / 50

HTML Intermediate

HTML Intermediate. 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.

elton
Télécharger la présentation

HTML Intermediate

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML Intermediate

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

  3. 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... A bit o' history

  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 • Transitionaldeprecated 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 WorkingDraft stage. Will to be in CandidateRecommendationstage in 2012.

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

  8. 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, <a href="http://twitter.com/">Twitter</a>, will render the word "Twitter" as a hyperlink. Types of markup elements

  9. Structural markup describes the purpose of text. For example, <h2>Golf</h2> 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). Types of markup elements

  10. Presentational markup describes the appearance of the text, regardless of its purpose. For example <b>boldface</b> 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. Types of markup elements

  11. Presentational markup tags aredeprecated * in current HTML and XHTML recommendations and are illegal in HTML5. <i>text</i> <center>text</center> <b>text</b> <font>text</font> * the term deprecation is applied to software features that are superseded and should be avoided. Out With the Old...

  12. big text small text emphasized text strong text subscripted text superscripted text underlined text [deprecated] Examples of Text Markup <big> <small> <em> <strong> <sub> <sup> <u>

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

  14. Tables are defined with the <table> tag.A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> 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. Table tags

  15. Example: <tr> <td>

  16. <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> Tables

  17. Bye-bye Borders

  18. 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: <table border="1"> Table Borders

  19. <table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> </table> Table Headings Headings in a table are defined with the <th> tag.

  20. <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td></td> </tr> </table> Table Cells Table cells with no content are not displayed very well in most browsers.

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

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

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

  24. An ordered list is also a list of items – but the list items are marked with numbers. An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. <ol> <li>Coffee</li> <li>Milk</li> </ol> Lists: Ordered An ordered list: Coffee Tea Milk

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

  26. Forms Input - The most used form tag is the <input> 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. <form> First name: <input type="text" name="firstname" /> <br /> Last name: <input type="text" name="lastname" /> </form> Visit the sandbox and experiment... Example Form

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

  29. Radio Buttons are used when you want the user to select one of a limited number of choices. <form> <input type="radio" name="sex" value="male" /> Male <br /> <input type="radio" name="sex" value="female" /> Female </form> Radio Buttons

  30. Checkboxes are used when you want the user to select one or more options. <form> <input type="checkbox" name="vehicle" value="Bike" /> I have a bike <br /> <input type="checkbox" name="vehicle" value="Car" /> I have a car <br /> <input type="checkbox" name="vehicle" value="Airplane" /> I have an airplane </form> Checkboxes

  31. 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. Submit button

  32. <form name="input" action="html_form_submit.asp" method="get"> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /> </form> Visit the sandbox... Submit button

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

  35. Color Values

  36. 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. Colors

  37. 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... Colors

  38. 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: <p>This is a paragraph</p> <h1>This is a heading</h1> Validation

  39. When tags like <font> 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. Validation

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

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

  42. 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; Character Entities

  43. To display a less than sign we must write: &lt; or &#60; 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). Character Entities

  44. 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 &nbsp; character entity. Character Entities

  45. Character Entities

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

More Related