web engineering - an overview about html
TRANSCRIPT
Web Engineering
An Overview about HTMLLecture 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
Example of Block
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”><imgsrc=“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 QuarterExpenses 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” />
<sourcesrc=“media/song.mp3”type=“audio/mpeg” />
<sourcesrc=“media/song.ogg”type=“audio/ogg” />
</audio>17
18
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 autoplayloop>
<source src=“media/video.m4v”type=“video/mp4” />
<sourcesrc=“media/video.webm”type=“video/webm” />
<sourcesrc=“media/video.ogg”type=“video/ogg” />
</video>
19