1 / 14

Lecture 14. A Very Brief Introduction to HTML and XHTML, part III

91.113 Exploring the Internet, Fall 2011. Lecture 14. A Very Brief Introduction to HTML and XHTML, part III. Instructor: Jie Yang Department of Computer Science University of Massachusetts Lowell. Images: The img element’s src attribute specifies an image’s location

samuel-pitts
Download Presentation

Lecture 14. A Very Brief Introduction to HTML and XHTML, part III

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. 91.113 Exploring the Internet, Fall 2011 Lecture 14. A Very Brief Introduction to HTML and XHTML, part III Instructor: Jie Yang Department of Computer Science University of Massachusetts Lowell

  2. Images: The img element’s src attribute specifies an image’s location Every img element must have an alt attribute, which contains text that is displayed if the client cannot render the image The alt attribute makes web pages more accessible to users with disabilities, especially vision impairments Width and height are optional attributes If omitted, the browser uses the image’s actual width and height Images are measured in pixels Image 2

  3. Images in XHTML files. 3 Specifies the image file’s location Specifies the image’s width Specifies the image’s height Specifies text to display if the image is unavailable

  4. Create an image hyperlink by nesting an img element in an anchor element 4

  5. Images as link anchors (Part 1 of 2). 5 Creates a hyperlinked image

  6. Images as link anchors (Part 1 of 2). 6

  7. table element defines an XHTML table Attribute summary summarizes the table’s contents and is used by speech devices to make the table more accessible to users with visual impairments Element caption describes the table’s content The text inside the <caption> tag is rendered above the table in most browsers table 7

  8. A table can be split into three distinct sections: Head (thead element) Table titles Column headers Body (tbody element) Primary table data Foot (tfoot element) Calculation results Footnotes Above body section in the code, but displays at the bottom in the page 8

  9. Element tr Defines individual table rows Element th Defines a header cell Element td Contains table data elements 9

  10. Creating a basic table (Part 1 of 3). 10 Begins a new XHTML table Sets the table’s border to be one pixel wide Sets the table’s width to 40% of the screen Describes the table’s contents in the summary attribute Sets the text above the table Creates a head element Creates a table heading cell in the new table row Makes a new table row Creates the next cell in the row

  11. Creating a basic table (Part 2 of 3). 11 Creates a foot section Creates table header cells at the bottom of the table Creates a body section Inserts a cell in the body of the table Ends the table

  12. Creating a basic table (Part 3 of 3). 12

  13. You can merge data cells with the rowspan and colspan attributes The values of these attributes specify the number of rows or columns occupied by the cell Can be placed inside any data cell or table header cell 13

  14. Further Reading • Wikipedia’s explanation of HTML: • http://en.wikipedia.org/wiki/HTML • W3schools.com XHTML Tutorial • http://www.w3schools.com/xhtml/ • W3schools.com CSS Tutorial • http://www.w3schools.com/css/default.asp • W3schools.com JavaScript Tutorial • http://www.w3schools.com/js/default.asp • HTML Color Codes: • http://www.computerhope.com/htmcolor.htm • http://html-color-codes.info/ • HTML Tag Quick Reference Guide • http://www.devx.com/projectcool/Article/19816

More Related