1 / 24

Lecture 3: HTML5

Lecture 3: HTML5 . Table, List, Blocks, Inline Style. HTLM Table Element. A table consists of rows < tr >. Each row is divided into data cells <td> (td stands for t able d ata) A <td> tag can contain text, links, images, lists, forms, and other tables. Table Example. <table> < tr >

cecil
Download Presentation

Lecture 3: HTML5

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. Lecture 3: HTML5 Table, List, Blocks, Inline Style

  2. HTLM Table Element • A table consists of rows <tr>. Each row is divided into data cells <td> (td stands for table data) • A <td> tag can contain text, links, images, lists, forms, and other tables.

  3. Table Example <table> <tr> <td>row 1, cell 1</td> <td>row 2, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>

  4. Table Border Attribute • By default, the table will be displayed without borders. • If you want borders, specify the border attribute: • <table border=“1”> … </table>

  5. Table Headers <tr> <th>header 1</th> <th>header 2</th> </tr>

  6. Table Tags • <caption>: defines a table caption • <colgroup>: specifies a group of one or more columns • <col>: specifies column properties for each column within a <colgroup> element • <thead>: groups the header content in a table • <tbody>: groups the body content in a table • <tfoot>: groups the footer content in a table

  7. HTML List • Ordered and unordered lists: • An ordered list starts with the <ul> tag. Each item starts with the <li> tag. • Example: <ul> <li>Red</li> <li>Yellow</li> </ul>

  8. Description List • A description list is a list of items with a description of each term/name • The <dl> tag defines a description list. <dl> is used together with <dt> (defines items) and <dd> (describes each item) • Example: <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> </dl>

  9. HTML List Tags • <ol>: defines an ordered list • <ul>: defines an unordered list • <li>: defines a list item • <dl>: defines a description list • <dt>: defines an item in a description list • <dd>: defines a description of an item in a description list

  10. HTML Block Element • HTML elements are defined as block level element or as inline element. • Block level Elements start with a new line. • E.g., <p>, <table>, <div> • Inline elements are displayed without a new line. • E.g., <b>, <td>, <a>, <img>

  11. <div> Element • <div> element is a block level element used as a container for grouping other elements. • Since <div> is a block level element, the browser will display a line break before and after it.

  12. <span> element • <span> element is an inline element that can be used as a container for text. • <span> element usually is used to set style to parts of the text.

  13. Next Class • CSS (Cascading Style Sheets) • Inline styles • Internal CSS • External CSS

  14. CSS History • HTML stated to add formatting to its tags list (such as <font>, <b>, <i> <strong>, etc) . This caused some problems? • The W3C created CSS and added it to HTML 4.0 with the intent of deprecating all HTML format tags.

  15. Presentation of HTML • HTML markup can be used to indicate both semantics of a document and its presentation (such as style and format) • HTML never designed for formatting. It defines the semantics of a HTML document. • Cascading Style Sheets (CSS) pro vides a mechanism for presentation.

  16. CSS Core Syntax • Selector: rule defining which element to style • Property: a specific CSS keyword which applies formatting to the selector • Value: a specific value for the property • Multiple property|value pairs declared inside {}, separated by ‘;’ • A rule set consists of two parts: selector string followed by declaration block.

  17. CSS Core Syntax Property name P { font-size: x-large; backgroud-color: yellow } Property value Selector string Property value Property name

  18. Selectors • Type Selector: the selector string is simply the name of an element type. • <a>, <p>, <ul>, etc. • * selector: it is the universal selector which represents every possible element type. • * { font-weight: bold}. This specifies a value of bold for the font-weight property of every element in a document.

  19. ID Selectors • ID Selector: every element in a HTML has an ID attribute. An element must have an unique ID. If a selector is precede by a (#), then it represents an ID value. The ID value is case sensitive. • #p1, #p3 { background-color: red } • In HTML, <p id=“p1”> I like FSU! </p>

  20. CLASS Selectors • CLASS Selector: almost every element has a class attribute. It preceded by a period (.) The class value is case sensitive. • #p4, .takeNote{ font-style:italic } • In HTML, <p class=“takeNote”> I like FSU! </p>

  21. More on Class Selectors • ID and CLASS selectors can be prefixed by an element type name. • Span.special{ background-color: red} • In HTML, <span>I like FSU!</span> <span class=“special”>I like FSU!</span>

  22. Descendant Selectors • ul span { color : yellow }. This indicates that the text within a <span> element that is part of the content of an unordered list <ul> should be yellow. • Class selector can be included in the ancestor list. • .special span • Question: what does this mean? ulolli { color : yellow }

  23. Internal CSS • <head> <style type=“text/css”> body { background-color : red; } p { color: yellow } . . . </style>

  24. Next Class • More about CSS • Style Rule Cascading and Inheritance • Text properties • Font families • Line Boxes • CSS Box Model

More Related