Web engineering - An overview about HTML

Web Engineering
An Overview about HTML
Lecture 03
University of Lahore
1

Block and Inline elements
• Block elements contain an entire large region
of content.
• Examples:
paragraphs, lists, table cells
• Inline elements affect a small amount of
content. Must be nested inside a block
element.
• Examples:
bold text, images, SPAN

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
• HTML provide several tags for displaying list.
• <ul style=“list-style-type: disc;”>
<li> One </li>
<li> Two </li>
<li> Three </li>
</ul>
• Type = “disc”, “square”, “circle”, “decimal”,
“Iower-alpha”, “katakana”, “armenian”,
“hiragana”

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

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

EXAMPLE
• <ol>
<li> One </li>
<li> Two
<ol start=“5”>
<li> One </li>
<li> Two
<ol type=“i” start=“7”>
<li> One </li>
<li> Two </li>
<li> Three </li>
</ol>
</li>
<li> Three </li>
</ol>
</li>
<li> Three </li>
</ol>
8

Images
• Images are major part of websites.
• Example:
<body>
<h1> HTML Image </h1>
<img src=“images/sciss.png” width=“240”
height=“240” alt=“Picture of scissors”
title=“Running with these is not
recommended.” />
</body>
9

Link on a Images
<a href=“index.html” target=“_blank”><img
src=“images/image1.jpg”
width=“250”
height=“250”
alt=“alternative text”
/></a>
10

11
<TABLE>
Table
(made up of rows)
<TR>
Row
(made up of data cells)
<TH>
Heading Data Cell
(Can contain paragraphs,
images, lists, forms, tables)
<TD>
Data Cell
(Can contain paragraphs,
images, lists, forms, tables)

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>
12

<tbody>
<tr>
<td></td>
…
</tr>
<tr>
<td></td>
…
</tr>
</tbody>
</table>
13

TABLE Attributes
• CELLPADING
– 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”>
14

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

16
Year Quarter
Expenses Income
Quetta Dubai Quetta Dubai
2001
1 1,900 8,650 9,000 7,780
2 2,230 8,650 8,500 8,670
3 4,000 8,650 9,900 9,870
4 2,200 8,650 9,800 9,900
2002
1 7,780 8,650 7,780 9,000
2 8,670 8,650 8,670 8,500
3 9,870 8,650 9,870 9,900
4 9,900 8,650 9,900 9,800

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.m4a”
type=“audio/x-acc” />
<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” widht=“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>
19

Web engineering - An overview about HTML

More Related Content

Viewers also liked

Similar to Web engineering - An overview about HTML

Recently uploaded

Web engineering - An overview about HTML