Scribd
Upload
4 views30 pages

Lecture 2 - HTML II 04022025 112406am

The document provides an overview of HTML5, focusing on block and inline elements, lists (ordered and unordered), images, audio and video embedding, and tables. It includes examples of how to use various HTML tags and attributes effectively. Additionally, it discusses the use of classes and IDs for styling elements in web development.

Uploaded by

gihojaj169
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
4 views30 pages

Lecture 2 - HTML II 04022025 112406am

The document provides an overview of HTML5, focusing on block and inline elements, lists (ordered and unordered), images, audio and video embedding, and tables. It includes examples of how to use various HTML tags and attributes effectively. Additionally, it discusses the use of classes and IDs for styling elements in web development.

Uploaded by

gihojaj169
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/ 30

Web Systems & Technology

Lecture 02
(HTML5 - II)

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 an Image
What other
values could be
in target=??
<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
SEMENTICS PART OF TABLE

22
TABLE without <thead>

<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>

<tr>
<td>Alice</td>
<td>25</td>
<td>New York</td>
</tr>
</table>

23
TABLE with <thead> More Structured

<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>25</td>
<td>New York</td>
</tr>
</tbody>
</table>

24
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”>

25
<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”>

26
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
27
Class and ID

28
Class and ID-Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Class vs ID Example</title>
<style>
.highlight {
color: blue;
font-weight: bold;
}

#unique-text {
color: red;
font-size: 20px;
}
</style>
</head>
<body>

29
Class and ID-Example

<p class="highlight">This is a highlighted paragraph.</p>


<p class="highlight">This is another highlighted paragraph.</p>

<p id="unique-text">This paragraph has a unique style.</p>

</body>
</html>

30

You might also like