1 / 50

Chapter 2

Chapter 2. HTML (Hypertext Markup Language) Part I. Topics. Introduction Editing HTML First HTML Example Headers Linking Images Unordered Lists Nested and Ordered Lists Tables References. Introduction. The World-Wide Web used three new technologies:

basia-santiago
Télécharger la présentation

Chapter 2

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. Chapter 2 HTML (Hypertext Markup Language) Part I

  2. Topics • Introduction • Editing HTML • First HTML Example • Headers • Linking • Images • Unordered Lists • Nested and Ordered Lists • Tables • References

  3. Introduction • The World-Wide Web used three new technologies: • HTML (HyperText Markup Language) used to write Web pages. • HTTP (HyperText Transfer Protocol) to transmit those pages. • A Web browser client program to receive the data, interpret it, and display the results. • HyperText Markup Language • HTML is not a “Programming Language” • A markup language • Separation of the presentation of a document from the structure of the document’s information • Based on Technology of the World Wide Web Consortium (W3C)

  4. Introduction • HTML documents can contain: • flashy elements: graphics, animations, video clips, audio sounds, and even interactive games • HTML isn't just for Web pages anymore • create corporate intranets • flashy e-mail • news postings • user interfaces for applications: web forms

  5. Editing HTML • HTML documents • Source-code form • Text editor (e.g. Notepad, Wordpad) • .html or .htm file-name extension • Web server • Apache, Internet Information Services (IIS) • Stores HTML documents • Web browser • Requests HTML documents

  6. Differences between HTML and XHTML • XHTML Elements Must Be Properly Nested Improperly nested: <b><i>This text is bold and italic</b></i> Properly nested: <b><i>This text is bold and italic</i></b> • XHTML Elements Must Always Be Closed This is wrong: <p>This is a paragraph <p>This is another paragraph This is correct: <p>This is a paragraph</p> <p>This is another paragraph</p>

  7. Differences between HTML and XHTML • Empty Elements Must Also Be Closed This is wrong: A break: <br>A horizontal rule: <hr>An image: <img src="happy.gif" alt="Happy face"> This is correct: A break: <br />A horizontal rule: <hr />An image: <img src="happy.gif" alt="Happy face" />

  8. Differences between HTML and XHTML • XHTML Elements Must Be In Lower Case This is wrong: <BODY> <P>This is a paragraph</P> </BODY> This is correct: <body> <p>This is a paragraph</p> </body>

  9. First HTML Example • HTML Structure • Comments <!-- and end with --> • <html> element • <head> element • Head section • Title of the document (<title> tag) • Style sheets (<link> tag) and scripts (<script> tag), … • <body> element • Body section • Page’s content the browser displays • Start tag • attributes (provide additional information about an element) • name and value (separated by an equal sign) • End tag

  10. First HTML Example <!-- An example to illustrate document form --> <html> <head> <title> Our first document </title> </head> <body> Greetings from your Webmaster! </body> </html>

  11. BODY Element Tags and Attributes • Attributes provide additional information about HTML elements. There are many attributes that you can explore later by yourselves. • Now, let us explore some of the attributes that relate to <BODY element.

  12. BODY Element Tags and Attributes <body text="#000000" bgcolor="#FFFFFF" link="#0000EF" vlink="#51188E" alink="#FF0000" background="clouds.gif"> • BGCOLOR="white" - Designates the page background color. • TEXT="black" - Designates the color of the page's text. • LINK="blue" - Designates the color of links that have not been visited. • ALINK="red" - Designates the color of the link currently being visited. • VLINK="green" - Designates the color of visited links.

  13. Color • Color can be specify in 3 ways: • Standard colors (blue, red, black, white) • Hexadecimal (#FFFFFF, #99FF66) • Decimal (255,255,255 or 0,0,0) • Example of web color chart: http://html-color-codes.com/rgb.html

  14. Headers • Six headers ( header elements) • h1 through h6 <html> <head> <TITLE>Headers</TITLE> </head> <body> <H1>Level 1 Header</H1> <H2>Level 2 Header</H2> <H3>Level 3 Header</H3> <H4>Level 4 Header</H4> <H5>Level 5 Header</H5> <H6>Level 6 Header</H6> </body> </html>

  15. Linking • Hyperlink • References other sources such as HTML documents and images • Both text and images can act as hyperlinks • Created using the <a> (anchor) element • Attribute href • Specifies the location of a linked resource • Link to e-mail addresses using mailto: URL

  16. Images • Three most popular formats • Graphics Interchange Format (GIF) • Joint Photographic Experts Group (JPEG) • Portable Network Graphics (PNG) • img element • src attribute • Specifies the location of the image file • width and height • br element • Line break

  17. Basic Text Formatting • Blockquotes • Content of <blockquote> • To set a block of text off from the normal flow and appearance of text • Or, using a simple word, <blockquote> indents the text as though it were a quote.

  18. Basic Text Formatting <p> Quoted from The Star, July 2009:<br> </p> <blockquote> Water as a resource has been one of the main drivers behind the rapid industry development and good standard of living. In a rapidly changing world, there are now challenges of conserving what we have and overcoming the problems of water too contaminated to consume. </blockquote> -------OUTPUT------- Quoted from The Star, July 2009: Water as a resource has been one of the main drivers behind the rapid industry development and good standard of living. In a rapidly changing world, there are now challenges of conserving what we have and overcoming the problems of water too contaminated to consume.

  19. Basic Text Formatting • Font Styles and Sizes (can be nested) • <b>..</b> - Sets bold text. • <big>..</big> - Sets larger than normal text. • <em>..</em> - Sets text in italics and denotes emphasis. • <i>..</i> - Sets text in italics. • <small>..</small> - Makes text smaller than normal. • <strike>..</strike> - Draws a line through the text as a "strikeout". • <strong>..</strong> - Same as bold but denotes strong emphasis. • <sup>..</sup> -Superscript • <sub>..</sub> -Subscript • <tt>..</tt> - Monospaced typewriter font. • <u>..</u> - Underlined text. • <var>..</var> - Mark a variable.

  20. Basic Text Formatting This is an example of the <b>&#60;b&#62; tag </b>.<br> This is an example of the <big>&#60;big&#62; tag</big>.<br> This is an example of the <em>&#60;em&#62; tag</em><br> This is an example of the <i>&#60;i&#62; tag</i>.<br> This is an example of the <small>&#60;small&#62; tag</small>.<br> This is an example of the <strike>&#60;strike&#62; tag</strike>.<br> This is an example of the <strong>&#60;strong&#62; tag<strong>.<br> This is an example of the <sup>&#60;sup&#62; tag<sup>.<br> This is an example of the <sub>&#60;sub&#62; tag<sub>.<br> This is an example of the <tt>&#60;tt&#62; tag<tt>.<br> This is an example of the <u>&#60;u&#62; tag</u><br> This is an example of the <var>&#60;var&#62; tag</var><br>

  21. Basic Text Formatting • Note: • &#60; – to display < • &#62; – to display >

  22. Basic Text Formatting • Subscripts with <sub> • Superscripts with <sup> • Examples:x<sub>2</sub><sup>3</sup> • Displays x23 • Horizontal rules <hr /> draws a line across the display, after a line break.

  23. Unordered Lists • Unordered list element ul • Creates a list in which each item begins with a bullet symbol (called a disc) • li (list item) • Entry in an unordered list

  24. Nested and Ordered Lists • Represent hierarchical relationships • Ordered lists (ol) • Creates a list in which each item begins with a number

  25. Table • A table is a matrix of rows and columns, each possibly having content • Each position in a table is called a cell • Some cells have labels, but most have data • A table is specified as the content of a <table> tag • A border attribute in the <table> tag specifies a border between the cells

  26. Table • If border is set to "border", the browser’s default width border is used • The border attribute can be set to a number, which will be the border width • Without the border attribute, the table will have no lines! • Tables are given titles with the <caption> tag, which can immediately follow <table>

  27. Table • Each row of a table is specified as the content of a <tr> tag • The row headings are specified as the content of a <th> tag • The contents of a data cell is specified as the content of a <td> tag

  28. Table <table border = "border"> <caption> Fruit Juice Drinks </caption> <tr> <th> </th> <th> Apple </th> <th> Orange </th> <th> Screwdriver </th> </tr> <tr> <th> Breakfast </th> <td> 0 </td> <td> 1 </td> <td> 0 </td> </tr> <tr> <th> Lunch </th> <td> 1 </td> <td> 0 </td> <td> 0 </td> </tr> <tr> <th> Dinner </th> <td> 0 </td> <td> 0 </td> <td> 1 </td> </tr> </table>

  29. Table • A table can have two levels of column labels • If so, the colspan attribute must be set in the <th> tag to specify that the label must span some number of columns

  30. Table <tr> <th colspan = "3"> Fruit Juice Drinks </th> </tr> <tr> <th> Orange </th> <th> Apple </th> <th> Screwdriver </th> </tr>

  31. Table • If the rows have labels and there is a spanning column label, the upper left corner must be made larger, using rowspan

  32. Table <table border = "border"> <caption> Fruit Juice Drinks </caption> <tr> <td rowspan = "2"> </td> <th colspan = "3"> Fruit Juice Drinks </th> </tr> <tr> <th> Apple </th> <th> Orange </th> <th> Screwdriver </th> </tr> … </table>

  33. References • Programming The WWW Third Edition Robert W. Sebesta Pearson Prentice Hall ISBN 0-321-31257-0 • http://www.comptechdoc.org/independent/web/html/index.html • http://www.w3schools.com/XHTML/xhtml_html.asp

More Related