Scribd
Upload
41 views

Smart Technologies: Ammber Nosheen

This document provides examples of HTML tags for formatting text, images, tables, forms, and lists. It includes 3 basic HTML tags - <html>, <head>, and <body> - and demonstrates how to use tags like <p>, <b>, <i>, <font>, <img>, <table>, <tr>, <td>, and <form> to structure and style a web page. Formatting examples include changing text size, color, and alignment. The document also provides examples of tables, lists, and basic forms with inputs like text boxes, checkboxes, and radio buttons.

Uploaded by

Syed Arslan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
41 views

Smart Technologies: Ammber Nosheen

This document provides examples of HTML tags for formatting text, images, tables, forms, and lists. It includes 3 basic HTML tags - <html>, <head>, and <body> - and demonstrates how to use tags like <p>, <b>, <i>, <font>, <img>, <table>, <tr>, <td>, and <form> to structure and style a web page. Formatting examples include changing text size, color, and alignment. The document also provides examples of tables, lists, and basic forms with inputs like text boxes, checkboxes, and radio buttons.

Uploaded by

Syed Arslan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 71

SMART TECHNOLOGIES

Ammber Nosheen

1
A Simple HTML document

<HTML>
<HEAD>
<TITLE> My first page</TITLE>
</HEAD>

<BODY>
A simple page with just this sentence
</BODY>

</HTML>

2
3
Text Formatting
 Paragraph <p> and </p>
<p>Education provides a better understanding of
life</p>
 <p Align=“Center”>e-commerce</p>
 You can also use Left or Right
 Line break <br>

 <center>Education provides a better understanding of


life </center>

4
More Text Formatting
 Bold <b> and </b>
 Italics <i> and </i>
 Underlined <u> and </u>
 BIG <big> and </big>
 small <small> and </small>

5
Font
 Font face
<font face=“Arial”>internet</font>

 Font size from 1 to 7


<font size=5>and</font>

 Font color
<font color= red>e-commerce</font>

 <font size=5 color=red face=Arial>internet and e-


6
commerce</font>
Example Code
<HTML>
<HEAD></HEAD>
<BODY>
<H1>This is my main title</H1>
<p>Here is the first paragraph. This is some <b><i>bold
text</i></b></p>
<p><font face=“Arial”>This text is in the Arial font.</font>
</BODY>
</HTML>

7
8
9
<HTML><Body>
<UL>
<LI>Item1</LI>
<LI>Item2</LI>
<LI>Item3</LI>
</UL><P>
<OL>
<LI>Item1</LI>
<LI>Item2</LI>
<LI>Item3</LI>
</OL>
<P>
<hr width=50% size=5 Align= center noshade>
</Body></HTML>

10
Image example

11
<HTML>
<BODY>
<HI>On Sale Cassettes</H1>
<Img Src=“cassette.gif ”>
</Body>
</HTML>

12
13
Links in HTML
<HTML>
<BODY>
<H1>Computer Science</H1>
Welcome to <A HREF=http://www.vu.edu>Virtual
University</A> in Pakistan
</BODY>
<HTML>

14
Mailto Link

<A HREF=mailto:[email protected]> email address</A>

15
Changing Colors in a Page
 <BODY bgcolor=“Green” text=“white” link=“red”>
 ‘bgcolor’ refers to a six digit code based on hexadecimal
numbers, e,g, #00FF00 (Green)
_ _ _ _ _ _
Red Green Blue
 <BODY background=“filename”>
 ‘filename’ refers to the image file name in .gif or .jpg etc. format

16
17
<HTML>
<BODY bgcolor=yellow text=red link=blue >
<H1>Computer Science</H1>
Welcome to <A HREF=http://www.vu.edu>Virtual
University</A> in
Pakistan
</BODY>
<HTML>

18
Title and Meta Tags
<html>
<head>
<title>Introduction to e-commerce</title>
<Meta name=“description” content=“E-commerce is a newly
emerging field that uses internet as a medium of communication”>
<Meta name=“keyword” content=“e-commerce, internet, medium,
communication”>
</head>
<body>
Page goes here
</body>
</html>

19
20
Basic tags
 Tables use following basic tag:
 <Table>
 </Table>
 <TR> (table row tag) and </TR> are used to
create/add a row
 <TD> (table data tag) and </TD> are used to divide a
row into number of columns to create cells
 <TH> (table header tag) and </TH> labels each
column as a heading
 <caption>Caption of the table</caption>

21
A basic 2 row, 2 column table
<HTML><BODY><Table Border=1>
<TR>
<TD>Cell1</TD>
<TD>Cell2</TD>
</TR> Cell 1 Cell 2
<TR>
<TD>Cell3</TD>
<TD>Cell4</TD> Cell 3 Cell 4
</TR>
</Table></BODY></HTML>

22
A slightly different table
<Table Border=1>
<TR>
<TD colspan=2>Cell1</TD>
</TR>
<TR>
<TD>Cell2</TD> Cell 1
<TD>Cell3</TD>
</TR>
Cell 2 Cell 3
</Table>

23
Try coding…
Try to code the following table design:

Cell 2

Cell 1

Cell 3

24
25
Example - COLSPAN
<HTML>
<HEAD>
<TITLE> Example - COLSPAN </TITLE>
</HEAD>
<BODY>
<TABLE BORDER="1” align=center>
<CAPTION>Spanning the text</CAPTION>
<TR>
<TD COLSPAN="2">This line is extended to two columns</TD>
<TD>This does not</TD>
</TR>
<TR>
<TD>First Column</TD>
<TD>Second Column</TD>
<TD>Third Column</TD>
</TR>
</TABLE>
</BODY>
</HTML>
26
27
28
Example - ROWSPAN
<HTML>
<HEAD>
<TITLE>Spanning Text</TITLE>
</HEAD>
<BODY>
<TABLE BORDER="1">
<CAPTION>Example - ROWSPAN</CAPTION>
<TR>
<TD ROWSPAN="2">This line is stretched to two rows</TD>
<TD>First Row</TD>
</TR>
<TR>
<TD>Second Row</TD>
</TR>
<TR>
<TD>This does not</TD>
<TD>Third Row</TD>
</TR>
</TABLE>
29 </BODY>
</HTML>
Table tag attributes
 Border - <table border=“5”>
 Width - <table width=“75%>
 Height - <table height=“100%”>
 Cellpadding - <table cellpadding=“10”>
 Cellspacing - <table cellspacing=“5”>
 Color - <table bgcolor=“#cccccc”> or
<table background=“tablebg.gif ”>

30
Attributes for <td> tag
 Width - <td width=“50%”>
 Align - <td align=“center”>
 Valign- <td valign=“top”>

31
32
Example - Margin
<HTML>
<HEAD>
<TITLE>A Page with a Left-Hand Margin</TITLE>
</HEAD>
<BODY LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0"
MARGINHEIGHT="0">
<TABLE HEIGHT="100%">
<TR>
<TD BACKGROUND=“image2.gif" WIDTH="100">&nbsp;</TD>
<TD VALIGN="TOP">
This section contains the contents of your web page.
</TD>
</TR>
</TABLE>
</BODY>
33 </HTML>
Forms
 A form is a web page populated with text boxes, drop-down lists
and commands buttons to get information from the user -<form>
and </form>
 <Form action=http://www.forms.com Method=post>
 Types
 Submit/Reset button
 Text boxes
 Text area
 Check boxes
 Radio buttons
 Lists

34
35
Example -Submit
<HTML>
<HEAD>
<TITLE>Submit Button</TITLE>
</HEAD>
<BODY>
<H3>An example of Submit button:</H3>
<FORM ACTION="http://www.vu.edu/test.asp" METHOD="POST">
<INPUT TYPE="SUBMIT" VALUE=Send!>
</FORM>
</BODY>
</HTML>

36
37
Example – Text Box & Text Area
<HTML>
<HEAD>
<TITLE>Text Area Example</TITLE>
</HEAD>
<BODY>
<H3>Today's Burning Question</H3>
<FORM ACTION="http://www.gov.pk/scritps/test.asp" METHOD="POST">
First Name: <INPUT TYPE="TEXT" NAME="First">
<P>
Last Name: <INPUT TYPE="TEXT" NAME="Last">
<P>
Today's <I>Burning Question</I>: <B>How to make Pakistan a developed country?</B>
<P>
Please enter your answer in the text area below:
<BR>
<TEXTAREA NAME="Answer" ROWS="10" COLS="60">
</TEXTAREA>
<P>
<INPUT TYPE="SUBMIT" VALUE="I Know!">
<INPUT TYPE="RESET">
</FORM>
</BODY>
</HTML>
38
Try coding…
Try to code the following table design:

Cell 2

Cell 1

Cell 3

39
<HTML>
<BODY>
<Table Border=1 Align=center>
<TR>
<TD rowspan=2>Cell1</TD>
<TD>Cell2</TD>
</TR>
<TR>
<TD>Cell3</TD>
</TR>
</Table>
</Body>
</HTML>
40
41
Text boxes - Attributes

 <input type=text Name=“URL” Value=http://>

 <Input type=text Name=“address” size=“40”>

 <input type=text Name=“age” maxlength=“3”>

42
43
Example – Checkbox
<HTML>
<HEAD>
<TITLE>CheckBox Example</TITLE>
</HEAD>
<BODY>
<H3>Describe Your Phobia!</H3>
<FORM ACTION=http://www.sad.com/scripts/formtest.asp METHOD="POST">
What is <I>your</I> phobia? (Please check all that apply):
<P>
<INPUT TYPE="CHECKBOX" NAME=“Water">Fear of water<BR>
<INPUT TYPE="CHECKBOX" NAME="Bald">Fear of becoming bald<BR>
<INPUT TYPE="CHECKBOX" NAME=“Lock”>Fear of being locked inside<BR>
<INPUT TYPE="CHECKBOX" NAME="Flying" Checked >Fear of flying<BR>
<P>
<INPUT TYPE="SUBMIT" VALUE="Submit">
<INPUT TYPE="RESET">
</FORM>
</BODY>
</HTML>
44
45
Example – Radio button
<HTML>
<HEAD>
<TITLE>Radio Button Example</TITLE>
</HEAD>
<BODY>
<H3>Survey</H3>
<FORM ACTION="http://www.sad.com/scripts/formtest.asp" METHOD="POST">
Which of the following best describes your current income level:<BR><BR>
<INPUT TYPE="RADIO" NAME=“Income" VALUE="Poverty">living below the poverty line<BR>
<INPUT TYPE="RADIO" NAME=“Income" VALUE=“Middle” Checked>living at the level of middle class<BR>
<INPUT TYPE="RADIO" NAME=“Income" VALUE=“Upper">living at the level of upper class<BR><BR>

Which of the following best describes your political inclination:<BR><BR>


<INPUT TYPE="RADIO" NAME="Politics" VALUE=“Nationalist" CHECKED>Worker of Nationalist Party<BR>
<INPUT TYPE="RADIO" NAME="Politics" VALUE=“Socialist">Member of Socialist Party<BR>
<INPUT TYPE="RADIO" NAME="Politics" VALUE=“Republican">Supporter of Republican Party<BR>
<INPUT TYPE="RADIO" NAME="Politics" VALUE=“None">None of the above<BR>
<P>
<INPUT TYPE="SUBMIT" VALUE="Submit">
<INPUT TYPE="RESET">
</FORM>
</BODY>
46</HTML>
47
Example - lists
<HTML><BODY>
<FORM ACTION="http://www.sad.com/scripts/formtest.asp" METHOD="POST">
Select your nationality:<P>
<SELECT NAME=“Nationality" SIZE="4">
<OPTION>American</OPTION>
<OPTION>Australian</OPTION>
<OPTION>Hungarian</OPTION>
<OPTION>Indian</OPTION>
<OPTION>Iranian</OPTION>
<OPTION SELECTED>Pakistani</OPTION>
<OPTION>French</OPTION>
</SELECT><P>
Select your favorite city:<P>
<SELECT NAME="City">
<OPTION>Sydney</OPTION>
<OPTION>London</OPTION>
<OPTION SELECTED>Lahore</OPTION>
</SELECT><P>

Countries visited last year:<P>


<SELECT NAME=“Countries" SIZE="5" MULTIPLE>
<OPTION>Canada</OPTION>
<OPTION>Russia</OPTION>
48
<OPTION>England</OPTION>
<OPTION>Egypt</OPTION>
49
Dividing the screen horizontally
<HTML>
<HEAD>
<TITLE>Horizontal Frames</TITLE>
</HEAD>

<FRAMESET ROWS="25%,75%">
<FRAME>
<FRAME>
</FRAMESET>

</HTML>

50
51
Dividing the screen vertically
<HTML>
<HEAD>
<TITLE>Vertical Frames</TITLE>
</HEAD>

<FRAMESET COLS="20%,60%,20%">
<FRAME>
<FRAME>
<FRAME>
</FRAMESET>

</HTML>

52
frames.htm
<HTML>
<HEAD>
<TITLE>Horizontal Frames with Content</TITLE>
</HEAD>

<FRAMESET ROWS="25%,75%">
<FRAME SRC="1.htm“ Name=“upper”>
<FRAME SRC="2.htm“ Name=“lower”>
</FRAMESET>

</HTML>
53
54
1.htm - Code
<HTML>
<HEAD>
<BODY>
<H1>This text is from 1.HTM</H1>
</BODY>
</HTML>

55
2.htm- Code
<HTML>
<HEAD>
<TITLE>Horizontal Frames with links</TITLE>
</HEAD>
<BODY>
<H1>This text is from 2.HTM</H1>
<H1><A HREF=“3.htm" TARGET="lower">This is a link to
3.HTM</A></H1>
</BODY>
</HTML>
56
57
3.htm - Code
<HTML>
<HEAD>
<TITLE>Horizontal Frames</TITLE>
</HEAD>
<BODY>
<H1>This text is from 3.HTM</H1>
<H1><A HREF=“2.htm" TARGET="lower">This is a link back
to 2.HTM</A></H1>
</BODY>
</HTML>

58
Ready-made names for frames
 Target=“_self ”
 Target=“_top”
 Target=“_blank”

59
Some frame attributes
 NORESIZE
 SCROLLING
 BORDER or FRAMEBORDER

60
61
Nesting frames
<HTML>
<HEAD>
<TITLE>Nested Frames</TITLE>
</HEAD>
<FRAMESET ROWS="25%,75%">
<FRAME SRC="1.htm" NAME="upper">
<FRAMESET COLS="50%,50%">
<FRAME SRC="2.htm" NAME="lower">
<FRAME SRC="3.htm" NAME="right">
</FRAMESET>
</FRAMESET>
</HTML>
62
Try Coding!

63
64
Images can be links, too
<HTML>
<HEAD>
<TITLE>Images Can Be Links, Too</TITLE>
</HEAD>
<BODY>
Click this house <A HREF=“main.htm"><IMG
SRC="home.gif"></A> to return to my home
page.
</BODY>
</HTML>
65
Image Maps
 An image map is a web page graphics with several defined
‘clickable’ areas

 Three steps
• Determine coordinates of clickable regions
• Use the <Map> and <Area> tags
• Add a special version of the <IMG> tag

66
Finding Coordinates

<A href=“whatever”><Img src=“imagename” ISMAP></A>

67
0,0 199,0
399,0 599,0

A B C

199,99 399,99 599,99

68
<Map> and <Area> Tags
<Map Name=“Testmap”>
<Area shape=“Rect” coords=“0,0,199,99” href=“a.htm”>
<Area shape=“Rect” coords=“199,0,399,99” href=“b.htm”>
<Area shape=“Rect” coords=“399,0,599,99” href=“c.htm”>
</Map>

69
Applying <image> Tag

<Img src=“coords.gif ” usemap=“#Testmap”>

70
Shape Attribute
 Shape attribute also accepts values “Circle” and “Poly” (for a
polygon)

71

You might also like