Scribd
Upload
87 views

Lecture 03 HTML Part 02 Images, Table PDF

This document provides an overview of key HTML elements and concepts covered in Lecture 02, including HTML elements, attributes, headings, paragraphs, formatting, lists, links, images, tables, forms, and iframes. It directs the reader to additional resources on the W3Schools website for further information on specific HTML tags and attributes.

Uploaded by

Mujahid Malik Arain
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
87 views

Lecture 03 HTML Part 02 Images, Table PDF

This document provides an overview of key HTML elements and concepts covered in Lecture 02, including HTML elements, attributes, headings, paragraphs, formatting, lists, links, images, tables, forms, and iframes. It directs the reader to additional resources on the W3Schools website for further information on specific HTML tags and attributes.

Uploaded by

Mujahid Malik Arain
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 18

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


Subdirectory
arts/index.html
entertainment/arts/index.html
Parent Directory
../index.html
../../index.html
From the Root /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


imagemap-generator.dariodomi.de

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


coords (rect) = x1,y1,x2,y2
coords (circle) = x,y,radius
coords (poly) = x1,y1,x2,y2,. . . Xn,yn

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

You might also like