Scribd
Upload
1 views26 pages

WE Week 5 Lecture 6

The document provides an overview of creating different types of lists in HTML, including ordered lists (<ol>), unordered lists (<ul>), and definition lists (<dl>). It also covers HTML special characters, the structure of HTML tables, and the use of <div> and <span> tags for grouping elements. Additionally, it discusses HTML events and their types, along with examples and a class activity to practice the concepts learned.

Uploaded by

mahjabeenbehram
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
1 views26 pages

WE Week 5 Lecture 6

The document provides an overview of creating different types of lists in HTML, including ordered lists (<ol>), unordered lists (<ul>), and definition lists (<dl>). It also covers HTML special characters, the structure of HTML tables, and the use of <div> and <span> tags for grouping elements. Additionally, it discusses HTML events and their types, along with examples and a class activity to practice the concepts learned.

Uploaded by

mahjabeenbehram
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 26

LECTURE: 5

CREATING LISTS
ORDERED LISTS: <OL> TAG
• Create an Ordered List using <ol></ol>:
<ol type="1">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ol>
• Attribute values for type are 1, A, a, I, or i
1. Apple i. Apple
2. Orange ii. Orange
3. Grapefruit iii. Grapefruit
a. Apple
A. Apple b. Orange I. Apple
B. Orange c. Grapefruit II. Orange
C. Grapefruit III. Grapefruit
3
UNORDERED LISTS: <UL> TAG
• Create an Unordered List using <ul></ul>:
<ul type="disc">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>
• Attribute values for type are:
• disc, circle or square

• Apple o Apple  Apple


• Orange o Orange  Orange
• Pear o Pear  Pear
4
DEFINITION LISTS: <DL> TAG
• Create definition lists using <dl>
• Pairs of text and associated definition; text is in <dt> tag, definition in <dd> tag

<dl>
<dt>HTML</dt>
<dd>A markup language …
</dd>
<dt>CSS</dt>
<dd>Language used to
…</dd>
</dl>
• Renders without bullets
5
LISTS – EXAMPLE
<ol type="1">
<li>Apple</li>
lists.html
<li>Orange</li>
<li>Grapefruit</li>
</ol>

<ul type="disc">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>

<dl>
<dt>HTML</dt>
<dd>A markup lang…</dd>
</dl>

6
HTML SPECIAL CHARACTERS
Symbol Name HTML Entity Symbol
Copyright Sign &copy; ©
Registered Trademark Sign &reg; ®
Trademark Sign &trade; ™
Less Than &lt; <
Greater Than &gt; >
Ampersand &amp; &
Non-breaking Space &nbsp;
Em Dash &mdash; —
Quotation Mark &quot; "
Euro &#8364; €
British Pound &pound; £
Japanese Yen &yen; ¥
7
SPECIAL CHARACTERS – EXAMPLE

<p>[&gt;&gt;&nbsp;&nbsp;Welcome special-
&nbsp;&nbsp;&lt;&lt;]</p>
<p>&#9658;I have following cards:chars.html
A&#9827;, K&#9830; and 9&#9829;.</p>
<p>&#9658;I prefer hard rock &#9835;
music &#9835;</p>
<p>&copy; 2006 by Svetlin Nakov &amp; his
team</p>
<p>Telerik Academy™</p>

8
SPECIAL CHARS – EXAMPLE (2)

<p>[&gt;&gt;&nbsp;&nbsp;Welcome special-
&nbsp;&nbsp;&lt;&lt;]</p>
<p>&#9658;I have following cards:chars.html
A&#9827;, K&#9830; and 9&#9829;.</p>
<p>&#9658;I prefer hard rock &#9835;
music &#9835;</p>
<p>&copy; 2006 by Svetlin Nakov &amp; his
team</p>
<p>Telerik Academy™</p>

9
HTML TABLE

• The <table> tag defines an HTML table.


• An HTML table consists of the <table> element and one
or more <tr>, <th>, and <td> elements.
• The <tr> element defines a table row, the <th> element
defines a table header, and the <td> element defines a
table cell.
• A more complex HTML table may also include <caption>,
<col>, <colgroup>, <thead>, <tfoot>, and <tbody>
elements.
HTML TABLE- EXAMPLE

<body>
<table>
<tr> <th>Sr#</th> <th>Saturday</th> </tr>
<tr> <td>1</td> <td>4</td> </tr>
<tr> <td>2</td> <td>6</td> </tr>
<tr> <td>3</td> <td>8</td></tr>
<tr> <td>4</td> <td>10</td></tr>
</table>
HTML TABLE- EXAMPLE: CAPTION

<table>
<caption>Monthly Savings</caption>
<tr> <th>Sr#</th> <th>Saturday</th> </tr>
<tr> <td>1</td> <td>4</td> </tr>
<tr> <td>2</td> <td>6</td> </tr>
<tr> <td>3</td> <td>8</td></tr>
<tr> <td>4</td> <td>10</td></tr>
</table>
HTML TABLE- EXAMPLE:
<!DOCTYPE html> <thead class="heading">
<html> <tr>
<head> <th>Sr#</th>
<title>HTML Table</title> <th>Saturday</th>
</tr>
<style>
</thead>
table { width: 20%; }
<tfoot class="heading">
table, th, td { border: 1px solid <tr>
#06C; } <td>Total</td>
td, th { border: 1px solid #ccc; text- <td></td>
align: center; } </tr>
th { background: lightblue; border- </tfoot>
color: white; } <tbody>
caption { font-family: Georgia, "Times <tr>
New Roman", Times, serif; color: blue; font- <td>1</td>
<td>4</td>
weight: bold; font-size: small; }
</tr>
tfoot { background-color: #999; color:
<tr>
#003; font-weight: bold; font-size: small; } <td>2</td>
.heading { font-weight: bold; font-size: <td>6</td>
small; } </tr>
</style> <tr>
</head> <td>3</td>
<body> <td>8</td>
<table> </tr>
<caption class="heading">Monthly <tr>
Savings</caption> <td>4</td>
<tr> <td>10</td>
<th>Sr#</th> </tr>
<th>Saturday</th> </tbody>
</tr> </table>
</body>
</html>
HTML TABLE- EXAMPLE:
HTML TABLE: THEAD, TFOOT, TBODY
• The HTML <colgroup> tag is used for specifying properties for a
group of columns within a table.
• The <thead> tag is used to group header content in an HTML
table.
• The <thead> element is used in conjunction with
the <tbody> and <tfoot> elements to specify each part of a table
(header, body, footer).
• The <thead> tag must be used in the following context: As a
child of a <table> element, after any <caption>, and <colgroup>
elements, and before any <tbody>, <tfoot>, and <tr> elements.
• The <tfoot> tag must be used in the following context: As a child
of a <table> element, after any <caption>, <colgroup>, and
<thead> elements and before any <tbody> and <tr> elements.
• The <tbody> element must have one or more <tr> tags inside.
HTML TABLE: THEAD, TFOOT, TBODY CONT..

• Browsers can use these elements to enable scrolling of


the table body independently of the header and footer.
• Also, when printing a large table that spans multiple
pages, these elements can enable the table header and
footer to be printed at the top and bottom of each page .
• These elements can help in formatting by applying css
on targeted group
HTML TABLE - COLSPAN
• To make a cell span over multiple columns, use the colspan attribute:
HTML TABLE - ROWSPAN
• To make a cell span over multiple rows, use the rowspan attribute:
THE <DIV> & <SPAN>

• <Div> tag
This is the very important block level tag which plays a big role in
grouping various other HTML tags and applying CSS on group of
elements.
This tag does not provide any visual change on the block but this has
more meaning when it is used with CSS.
• <Span> tag
• The HTML <span> is an inline element and it can be used to group
inline-elements in an HTML document. This tag also does not provide
any visual change on the block but has more meaning when it is used
with CSS.
THE <DIV> TAG
• <div> creates logical divisions within a page
• Block style element
• Used with CSS
• Example:

div.html
<div style="font-size:24px; color:red">DIV
example</div>
<p>This one is <span style="color:red; font-
weight:bold">only a test</span>.</p>
20
HTML EVENTS
HTML EVENTS
• HTML added the ability to let events trigger actions in a browser, like
starting a JavaScript when a user clicks on an element.
• An HTML event can be something the browser does, or something a
user does.
• Examples of HTML events:
• An HTML web page has finished loading
• An HTML input field was changed
• An HTML button was clicked
• When events happen, a developer may want to perform some task
e.g. change background color of button when clicked.
• JavaScript lets you execute code when events are detected.
TYPE OF EVENTS

• Window Events
• Events triggered for the window object (applies to the
<body> tag)
• onload
• Form Events
• onsubmit, onselect, onsearch, onchange
• Keyboard Events
• onkeyup, onkeydown , onkeypress
• Mouse Events
• onclick, onmouseover, onmouseout
COMMON HTML EVENTS

Event Description
onchange An HTML element has been changed
onclick The user clicks an HTML element
onmouseover The user moves the mouse over an HTML element
onmouseout The user moves the mouse away from an HTML
element
onkeydown The user pushes a keyboard key
onload The browser has finished loading the page
COMMON HTML EVENTS

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML
Events</h2>
When user click on this text
<h2
onclick="this.innerHTML='Hello!'">
Click on this text!</h2>

</body>
</html>
CLASS ACTIVITY

• Create one ordered list


• Create one unordered list
• Create a table in which you use colspan and
rowspan attribute

You might also like