Lecture 02

Hyper Text Markup Language (HTML) Part 02

1
 HTML Elements (Start Tag, Content, End Tag)
HTML Attributes
HTML Document
HTML Headings
HTML Paragraphs
HTML Formatting
HTML Lists
HTML Links
HTML Images
HTML Tables
HTML Image Maps
HTML Forms

2
 http://www.w3schools.com/html/
http://www.w3schools.com/tags/

3
 In HTML, images are defined with the <img> tag.
The <img> tag is empty, it contains attributes only, and does not have a
closing tag.
The src attribute specifies the URL (web address) of the image:

4
<img src=pk.jpg width=639" height=516 alt=Pakistan Map />

5
 A relative URL indicates where the resource is in
relation to the current page.

Same Directory contact.html

6
 A absolute URL indicates a complete path to
resource.

Example
F:\Riphah\web\FALL-2016\logo.jpg
http://www.riphah.edu.pk/image.jpg

7
<img src=pk.jpg width=639" height=516 usemap=#pkmap />
<map name=pkmap">
<area shape="rect" coords=450,130,460,140 href=isb.html" />
<area shape=rect" coords=230,450,240,460 href=khi.html" />
</map>

You can generate coordinates online from

8
 <img src=pk.jpg width=639" height=516 usemap=#pkmap />
<map name=pkmap">
<area shape="rect" coords=450,130,460,140 href=isb.html" />
<area shape=rect" coords=230,450,240,460 href=khi.html" />
</map>

shape = rect, circle, poly

W3Schools: http://www.w3schools.com/html/html_images.asp

9
W3Schools: http://www.w3schools.com/html/html_tables.asp
10
 <table>
<caption>
<thead>
<tbody>
<tfoot>
<tr>
<th>
<td>

W3Schools: http://www.w3schools.com/html/html_tables.asp
11
 Border
Cellpadding
Cellspacing
Colspan
Rowspan

W3Schools: http://www.w3schools.com/html/html_tables.asp
12
 <form>
<fieldset>
<legend>
<label>
<input />
<select>
<optgroup>
<option>
<textarea>
<button>

W3Schools: http://www.w3schools.com/html/html_forms.asp
13
 <form>
<fieldset>
<legend>
<label>
<input />
<select>
<optgroup>
<option>
<textarea>
<button>

W3Schools: http://www.w3schools.com/html/html_forms.asp
14
 <iframe src="http://www.w3schools.com"></iframe>

Attributes: src, height, width, name

W3Schools: http://www.w3schools.com/TAGS/tag_iframe.asp
15
 More: http://www.w3schools.com/html/html_entities.asp

16
 An absolute URL contains everything you need to
uniquely identify a particular file on the Internet.

http://www.riphah.edu.pk/Faculties/tabid/56/Default.aspx

17
Q&A
18