Scribd
Upload
2 views

Lecture-3---HTML-III-

The document covers HTML5 elements, distinguishing between block and inline elements, and providing examples of each. It also explains how to create ordered and unordered lists, embed images, audio, and video, and construct tables with various attributes. Additionally, it discusses semantic elements in tables and attributes like cellpadding and cellspacing.

Uploaded by

asfa rehman
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

Lecture-3---HTML-III-

The document covers HTML5 elements, distinguishing between block and inline elements, and providing examples of each. It also explains how to create ordered and unordered lists, embed images, audio, and video, and construct tables with various attributes. Additionally, it discusses semantic elements in tables and attributes like cellpadding and cellspacing.

Uploaded by

asfa rehman
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 24

Web Systems & Technology

Lecture 03
(HTML5 - III)

1
Block and Inline elements
• Block elements contain an entire large region of
content.
• Examples:
paragraphs, lists, table cells, div, section,
header, footer, ul etc.

• Inline elements affect a small amount of


content. Must be nested inside a block element.
• Examples:
bold text, images, SPAN,a ,br, label, input..etc.
Block Level Elements
<address> <figcaption> <noscript>
<article> <figure> <ol>
<aside> <footer> <p>
<blockquote> <form> <pre>
<canvas> <h1>-<h6> <section>
<dd> <header> <table>
<div> <hr> <tfoot>
<dl> <li> <ul>
<dt> <main> <video>
<fieldset> <nav>
Inline Elements
<a> <i> <small>
<abbr> <img> <span>
<acronym> <input> <strong>
<b> <kbd> <sub>
<bdo> <label> <sup>
<big> <map> <textarea>
<br> <object> <time>
<button> <output> <tt>
<cite> <q> <var>
<code> <samp>
<dfn> <script>
<em> <select>
Ordered List

• HTML provide several tags for displaying list.

• <ol>
<li> One </li>
<li> Two </li>
<li> Three </li>
</ol>
Type Attribute of Ordered List
• HTML provide several tags for displaying list.

• <ol type=“a”>
<li> One </li>
<li> Two </li>
<li> Three </li>
</ol>

• type = “a”, “1”, “A”, “i”, “I”


• start = “25”
Unordered List

• Example

<ul>
<li> Four </li>
<li> Five </li>
<li> Six </li>
</ul>
Type Attribute of Unordered List

• HTML provide several tags for displaying list.

• <ul style=“list-style-type: disc;”>


<li> One </li>
<li> Two </li>
<li> Three </li>
</ul>
Nested Unordered List
• Example

• <ul>
<li> Four </li>
<li> Five </li>
<ul>
<li> Four </li>
<li> Five </li>
<li> Six </li>
</ul>
<li> Six </li>
</ul>
Nested Ordered List
• Example

• <ol>
<li> One </li>
<li> Two </li>
<ol>
<li> One </li>
<li> Two </li>
<li> Three </li>
</ol>
<li> Three </li>
</ol>
Nested Unordered & Ordered List
• Example

• <ol>
<li> One </li>
<li> Two </li>
<ul>
<li> One </li>
<li> Two </li>
<li> Three </li>
</ul>
<li> Three </li>
</ol>
EXAMPLE
• <ol>
<li> One </li>
<li> Two </li>
<ol start=“5”>
<li> One </li>
<li> Two </li>
<ol type=“i” start=“7”>
<li> One </li>
<li> Two </li>
<li> Three </li>
</ol>
<li> Three </li>
</ol>
<li> Three </li>
</ol>
12
Images with List

Try it yourself!
How to use images with list items
Images
• Images are major part of websites.
Example:
<body>
<h1> HTML Image </h1>
<img src="images/BULC.png"
width="240" height="240" alt="Logo of BULC"
title="BU Lahore Official Logo" />
</body>

14
Link on a Image

<body>
<a href="https://www.bahria.edu.pk/bulc/"
target="_blank">
<img src="images/BULC.png" width="240"
height="240" alt="Logo of BULC" title="BU
Lahore Official Logo" />
</a>
</body>
15
FLOWING TEXT AROUND AN IMAGE
• HTML IMG tag is inline element. Sometimes we
want to flow text around an image.

• Example:
<body>
<h1> HTML Image </h1>
<img src="images/BULC.png" width="240"
height="240" alt="Logo of BULC" title="BU Lahore
Official Logo" style="float: right; margin-right: 10px;
margin-bottom: 5px; border: solid black 1px;"/>
</body>
16
Embedding Audio
• HTML5 provides the simple powerful feature of adding
audio files on your web page.
• Example:
<p> Here’s a song: </p>
<audio id=“audio” controls autoplay loop>
<source
src=“media/song.mp3”
type=“audio/mpeg” />
<source
src=“media/song.ogg”
type=“audio/ogg” />
</audio>
17
Embedding Video
• HTML5 provides the simple powerful feature of embedding
video files on your web page.
• Example:
<p> Here’s a song: </p>
<video id=“video” width=“860” height=“480” controls autoplay
loop>
<source
src=“media/video.m4v” type=“video/mp4” />
<source
src=“media/video.webm” type=“video/webm” />
<source
src=“media/video.ogg” type=“video/ogg” />
</video>
18
Table
<TABLE>
(made up of rows)
Row
<TR>
(made up of data cells)
Heading Data Cell
<TH> (Can contain paragraphs,
images, lists, forms, tables)
Data Cell
<TD> (Can contain paragraphs,
images, lists, forms, tables)

19
Tables
• Tables are very useful feature in HTML.
• Example:
<h1>HTML Tables</h1>
<table>
<caption>My Favorite Albums</caption>
<tr>
<th> Title </th>
<th> Artist </th>
<th> Comment </th>
</tr>
<tr>
<td> Electric Lady Land </td>
<td> Jimi Hendrix </td>
<td> Revolutionary </td>
</tr>
</table>
20
SEMENTICS PART OF TABLE
• HTML5 provides few semantic elements just for tables.
• <table>
<caption></caption>
<thead>
<tr>
<th> Title </th>
<th> Artist </th>
<th> Comments </th>
</tr>
</thead>
<tfoot>
<tr>
….
</tr>
</tfoot>
21
TABLE Attributes
• CELLPADDING
– Determines the distance between the border of a cell and
the contents of the cell
– Example: <TABLE CELLPADDING = “3”>

• CELLSPACING
– Determines the empty spacing between the borders of
two adjacent cells
– Example: <TABLE CELLSPACING = “1”>

22
<TH> & <TD> Attributes
• COLSPAN
– No. of rows the current cell should extend itself downward
– Example: <TD COLSPAN = “2”>

• ROWSPAN
– The number of columns the current cell should extend
itself
– Example: <TD ROWSPAN = “5”>

23
Expenses Income
Quarte
Year Quetta Dubai Quetta Dubai
r

1 1,900 8,650 9,000 7,780


2 2,230 8,650 8,500 8,670
2001
3 4,000 8,650 9,900 9,870
4 2,200 8,650 9,800 9,900
1 7,780 8,650 7,780 9,000
2 8,670 8,650 8,670 8,500
2002
3 9,870 8,650 9,870 9,900
4 9,900 8,650 9,900 9,800
24

You might also like