lecture 3: html5
DESCRIPTION
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 stands for t able d ata) A tag can contain text, links, images, lists, forms, and other tables. Table Example. < tr > - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Lecture 3: HTML5](https://reader036.vdocument.in/reader036/viewer/2022062521/56816953550346895de0fa43/html5/thumbnails/1.jpg)
Lecture 3: HTML5 Table, List, Blocks, Inline Style
![Page 2: Lecture 3: HTML5](https://reader036.vdocument.in/reader036/viewer/2022062521/56816953550346895de0fa43/html5/thumbnails/2.jpg)
HTLM Table ElementA 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.
![Page 3: Lecture 3: HTML5](https://reader036.vdocument.in/reader036/viewer/2022062521/56816953550346895de0fa43/html5/thumbnails/3.jpg)
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>
![Page 4: Lecture 3: HTML5](https://reader036.vdocument.in/reader036/viewer/2022062521/56816953550346895de0fa43/html5/thumbnails/4.jpg)
Table Border AttributeBy default, the table will be displayed without borders.
If you want borders, specify the border attribute:<table border=“1”> … </table>
![Page 5: Lecture 3: HTML5](https://reader036.vdocument.in/reader036/viewer/2022062521/56816953550346895de0fa43/html5/thumbnails/5.jpg)
Table Headers<tr> <th>header 1</th> <th>header 2</th></tr>
![Page 6: Lecture 3: HTML5](https://reader036.vdocument.in/reader036/viewer/2022062521/56816953550346895de0fa43/html5/thumbnails/6.jpg)
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
![Page 7: Lecture 3: HTML5](https://reader036.vdocument.in/reader036/viewer/2022062521/56816953550346895de0fa43/html5/thumbnails/7.jpg)
HTML ListOrdered 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>
![Page 8: Lecture 3: HTML5](https://reader036.vdocument.in/reader036/viewer/2022062521/56816953550346895de0fa43/html5/thumbnails/8.jpg)
Description ListA 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>
![Page 9: Lecture 3: HTML5](https://reader036.vdocument.in/reader036/viewer/2022062521/56816953550346895de0fa43/html5/thumbnails/9.jpg)
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
![Page 10: Lecture 3: HTML5](https://reader036.vdocument.in/reader036/viewer/2022062521/56816953550346895de0fa43/html5/thumbnails/10.jpg)
HTML Block ElementHTML 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>
![Page 11: Lecture 3: HTML5](https://reader036.vdocument.in/reader036/viewer/2022062521/56816953550346895de0fa43/html5/thumbnails/11.jpg)
<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.
![Page 12: Lecture 3: HTML5](https://reader036.vdocument.in/reader036/viewer/2022062521/56816953550346895de0fa43/html5/thumbnails/12.jpg)
<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.
![Page 13: Lecture 3: HTML5](https://reader036.vdocument.in/reader036/viewer/2022062521/56816953550346895de0fa43/html5/thumbnails/13.jpg)
Next ClassCSS (Cascading Style Sheets)
Inline styles
Internal CSS
External CSS
![Page 14: Lecture 3: HTML5](https://reader036.vdocument.in/reader036/viewer/2022062521/56816953550346895de0fa43/html5/thumbnails/14.jpg)
CSS HistoryHTML 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.
![Page 15: Lecture 3: HTML5](https://reader036.vdocument.in/reader036/viewer/2022062521/56816953550346895de0fa43/html5/thumbnails/15.jpg)
Presentation of HTMLHTML 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.
![Page 16: Lecture 3: HTML5](https://reader036.vdocument.in/reader036/viewer/2022062521/56816953550346895de0fa43/html5/thumbnails/16.jpg)
CSS Core SyntaxSelector: rule defining which element to styleProperty: a specific CSS keyword which
applies formatting to the selectorValue: a specific value for the propertyMultiple property|value pairs declared inside
{}, separated by ‘;’
A rule set consists of two parts: selector string followed by declaration block.
![Page 17: Lecture 3: HTML5](https://reader036.vdocument.in/reader036/viewer/2022062521/56816953550346895de0fa43/html5/thumbnails/17.jpg)
CSS Core Syntax
P { font-size: x-large; backgroud-color:
yellow }
Selector string
Property name
Property name
Property value
Property value
![Page 18: Lecture 3: HTML5](https://reader036.vdocument.in/reader036/viewer/2022062521/56816953550346895de0fa43/html5/thumbnails/18.jpg)
SelectorsType 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.
![Page 19: Lecture 3: HTML5](https://reader036.vdocument.in/reader036/viewer/2022062521/56816953550346895de0fa43/html5/thumbnails/19.jpg)
ID SelectorsID 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>
![Page 20: Lecture 3: HTML5](https://reader036.vdocument.in/reader036/viewer/2022062521/56816953550346895de0fa43/html5/thumbnails/20.jpg)
CLASS SelectorsCLASS 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>
![Page 21: Lecture 3: HTML5](https://reader036.vdocument.in/reader036/viewer/2022062521/56816953550346895de0fa43/html5/thumbnails/21.jpg)
More on Class SelectorsID 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>
![Page 22: Lecture 3: HTML5](https://reader036.vdocument.in/reader036/viewer/2022062521/56816953550346895de0fa43/html5/thumbnails/22.jpg)
Descendant Selectorsul 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?ul ol li { color : yellow }
![Page 23: Lecture 3: HTML5](https://reader036.vdocument.in/reader036/viewer/2022062521/56816953550346895de0fa43/html5/thumbnails/23.jpg)
Internal CSS<head>
<style type=“text/css”>body { background-color : red; }
p { color: yellow } . . . </style>
![Page 24: Lecture 3: HTML5](https://reader036.vdocument.in/reader036/viewer/2022062521/56816953550346895de0fa43/html5/thumbnails/24.jpg)
Next ClassMore about CSS
Style Rule Cascading and Inheritance
Text propertiesFont familiesLine BoxesCSS Box Model