Scribd
Upload
75 views22 pages

Introduction To HTML Lecture 5-2

Uploaded by

Javeria Maham
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
75 views22 pages

Introduction To HTML Lecture 5-2

Uploaded by

Javeria Maham
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/ 22

AN INTRODUCTION TO WEB PAGE

PROGRAMMING HTML

Ammber Nosheen

Lecture # 5
Image Tag
• To display an image on a page, you need to
use the src attribute.
• src stands for "source". The value of the src
attribute is the URL of the image you want to
display on your page.
• It is a empty tag.
<IMG SRC ="url">

<IMG SRC="picture.gif“>
<IMG SRC="picture.gif“ HEIGHT="30"
WIDTH="50">
Image attributes - <img> tag
<img> Defines an image
<Src> display an image on a page,Src stands
for "source".
Defines the width of the image
<Width> Defines the height of the image
<Height> Defines border of the image
<Border> Horizontal space of the image
<Hspace> Vertical space of the image
<Vspace> Align an image within the text
<Align> Add a background image to an HTML
<background> page
Code & Result of the Image
<html><body>
<p><img
src="file:///C:/WINDOWS/Zapotec.bmp"
align="left" width="48" height="48"> </p>
<p><img src
="file:///C:/WINDOWS/Zapotec.bmp"
align="right" width="48" height="48"></p>
</body></html>

<HTML>
<<body
background="file:///C:/WINDOWS/Soap
%20Bubbles.bmp" text="white">
<br><br><br>
<h2> Background Image!</h2>
</BODY></HTML>
Code & Result of the Image
<html><body>
<p>An image
<img src="file:///C:/WINDOWS/Zapotec.bmp"
align="bottom" width="48" height="48"> in the text</p>
<p>An image
<img src ="file:///C:/WINDOWS/Zapotec.bmp"
align="middle" width="48" height="48"> in the text</p>
<p>An image
<img src ="file:///C:/WINDOWS/Zapotec.bmp"
align="top" width="48" height="48"> in the text</p>
<p>Note that bottom alignment is the default
alignment</p>
<p><img src ="file:///C:/WINDOWS/Zapotec.bmp"
width="48" height="48">
An image before the text</p>
<p>An image after the text
<img src ="file:///C:/WINDOWS/Zapotec.bmp"
width="48" height="48"> </p>
</body></html>
Code & Result of the Image
<html><body>
<p><img src="file:///C:/WINDOWS/Zapotec.bmp"
align="bottom" width="20" height="20"> </p>
<p><img src ="file:///C:/WINDOWS/Zapotec.bmp"
align="middle" width="40" height="40"></p>
<p><img src ="file:///C:/WINDOWS/Zapotec.bmp"
align="top" width="60" height="60"></p>
<p><img src ="file:///C:/WINDOWS/Zapotec.bmp"
width="80" height="80"> </p>
<p><img src ="file:///C:/WINDOWS/Zapotec.bmp"
width="100" height="100"> </p>
</body></html>
HTML Table Tag
<table> used to create table
<tr> table is divided into rows
<td> each row is divided into data cells
<th> Headings in a table
<Caption> caption to the table
<colgroup>
Defines groups of table columns
<col>
Defines the attribute values for one or
<thead> more columns in a table
<tbody> Defines a table head
<tfoot> Defines a table body
<Cellspacing> Defines a table footer
<Cellpadding> amount of space
<Colspan> between table cells.
<rowspan> space around the edges of each cell
<Border> No of column working with will span
No of rows working with will span
attribute takes a number
Code & Result of the Table
<html>
<body>
<h3>Table without
border</h3>
<table>
<tr>
<td>MILK</td>
<td>TEA</td>
<td>COFFEE</td
> </tr>
<tr> <td>400</td>
<td>500</td>
<td>600</td> </tr>
</table>
</body>
</html>
Header
<html><body>
<h4>Horizontal Header:</h4>
<table border="1">
<tr> <th>Name</th>
<th>Loan No</th>
<th>Amount</th> </tr>
<tr> <td>Jones</td>
<td>L-1</td>
<td>5000</td></tr> </table><br><br>
<h4>Vertical Header:</h4>
<table border="5">
<tr> <th>Name</th>
<td>Jones</td> </tr>
<tr> <th>Loan No</th>
<td>L-1</td> </tr>
<tr> <th>Amount</th>
<td>5000</td></tr> </table>
</body></html>
Table Code with Colspan &
Rowspan
<html><body>
<h4>Cell that spans two columns:</h4>
<table border="4">
<tr> <th>Name</th>
<th colspan="2">Loan No</th> </tr>
<tr> <td>Jones</td>
<td>L-1</td>
<td>L-2</td> </tr> </table>
<h4>Cell that spans two rows:</h4>
<table border="8">
<tr> <th>Name</th>
<td>Jones</td></tr><tr>
<th rowspan="2">Loan No</th>
<td>L-1</td></tr><tr>
<td>L-2</td></tr></table>
</body></html>
Table Code with Caption &
ColSpacing
<html>
<body>
<table border="1">
<caption>My Caption</caption>
<tr>
<td>Milk</td>
<td>Tea</td>
</tr>
<tr>
<td></td>
<td>Coffee</td>
</tr>
</table>
</body>
</html>
Cellpadding,Image &
Backcolor
<html><body>
Code
<h3>Without cellpadding:</h3>
<table border="2" bgcolor="green">
<tr> <td>Jones</td>
<td>Smith</td></tr>
<tr> <td>Hayes</td>
<td>Jackson</td></tr></table>
<h4>With cellpadding:</h4>
<table border="8"
cellpadding="10" background="file:///C:/WINDOWS/
FeatherTexture.bmp">
<tr> <td>Jones</td>
<td>Smith</td></tr>
<tr> <td>Hayes</td>
<td>Jackson</td></tr></table>
</body></html>
HTML List Tag
• Lists provide methods to show item or element
sequences in document content. There are
three main types of lists:->
– Unordered lists:-unordered lists are bulleted.
– Ordered lists:- Ordered lists are numbered.
– Definition lists:- Used to create a definition
list
.
List Tags
<LI> <LI> is an empty tag,it is used for
representing the list items
<OL> Ordered list
<UL> Unordered list
<DL> Defines a definition list
<DT> Defines a term (an item) in a definition
list
<DD>
Defines a description of a term in a
definition list
Unordered List
• TYPE attribute to the <UL> tag to show
different bullets like:-
– Disc
– Circle
– Square

<ul Type =“disc”>…..</ul>


• The attribute TYPE can also be used
with
<LI> element.
Code & Result of the
Unordered List
<html><body>
<h4>Disc bullets list:</h4>
<ul type="disc"> <li>Jones</li>
<li>Smith</li>
<li>Hayes</li>
<li>Jackson</li></ul>
<h4>Circle bullets list:</h4>
<ul type="circle"> <li>Jones</li>
<li>Simth</li>
<li>Hayes</li>
<li>Jackson</li></ul>
<h4>Square bullets list:</h4>
<ul type="square"> <li>Jones</li>
<li>Smith</li>
<li>Hayes</li>
<li>Jackson</li></ul>
</body></html>
Ordered List
• The TYPE attribute has the following value like:-
– TYPE = "1" (Arabic numbers)
– TYPE = "a" (Lowercase alphanumeric)
– TYPE = "A" (Uppercase alphanumeric)
– TYPE = "i" (Lowercase Roman numbers)
– TYPE = "I" (Uppercase Roman numbers)
• By default Arabic numbers are used
List
<html><body>
<h4>Numbered list:</h4>
<ol> <li>Jones</li>
<li>Smith</li>
<li>Hayes</li>
<li>Jackson</li></ol>
<h4>Letters list:</h4>
<ol type="A"> <li>Jones</li>
<li>Smith</li>
<li>Hayes</li>
<li>Jackson</li></ol>
<h4>Roman numbers list:</h4>
<ol type="I"> <li>Jones</li>
<li>Smith</li>
<li>Hayes</li>
<li>Jackson</li></ol>
</body></html>
HTML Form
• A form is an area that can contain form
elements.
• Form elements are elements that allow the
user to enter information in a form. like text
• fields, textarea fields, drop-down menus,
radio buttons and checkboxes etc
• A form is defined with the <form> tag.
• The syntax:-
• <form>
• .
• input elements
• .
• </form>
Form Tags
Defines a form for user input
<form>
<input> used to create an input field
<text> Creates a single line text
<textarea> entry field
Defines a text-area (a multi-line text input control)
<password> Creates a single line text entry field. And the
characters entered are shown as asterisks (*)
Defines a label to a control
<label> Creates a Radio Button.
<option> Defines a selectable list (a drop-down box)
<select>
Defines a push button
attribute of the option element.
<button> select or unselect a checkbox
<value> A drop-down box is a
<checkbox> selectable list
<dropdown box>
Code of the HTML Form
<html><body><form>
<h1>Create a Internet Mail Account</h1>
<p>First Name <input type="text" name="T1" size="30"></p>
<p>Last Name <input type="text" name="T2" size="30"></p>
<p>Desired Login Name <input type="text" name="T3" size="20">
@mail.com</p>
<p>Password <input type="password" name="T4" size="20"></p>
<input type="radio" checked="checked" name="sex" value="male" />
Male</br>
<input type="radio" name="sex" value="female" /> Female
<p>Birthday <input type="text" name="T6" size="05">
<select size="1" name="D2">
<option>-Select One-</option>
<option>January</option>
<option>February</option>
<option>March</option> </select>
<input type="text" name="T7" size="10"></p>
TypeYourself<textarea rows="4" name="S1" cols="20"></textarea>
<br><input type="submit" value="Accept" name="B1"> <input
type="reset“ value="Cancel" name="B2"></br> </form></body></html>
Result of the Form Code

You might also like