Scribd
Upload
18 views41 pages

Lecture 3

Uploaded by

anayatnajam787
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
18 views41 pages

Lecture 3

Uploaded by

anayatnajam787
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/ 41

Du’a for Study

Internet and Web


Technology
Chapter III
2
Contents
 Preformatted Text

 Common character Entities

 <MARQUEE> Tag

 List
 Ordered List

 Unordered List

 Definition List

 Nested List

 Images in HTML

 Tables In HTML

3
Preformatted Text
 This tag is used to display the text as the user has typed. HTML ignores extra
line breaks and text appears in single line. The text is placed between <pre>
and </pre> tags.

Example
 The following text will appear in single line. HTML ignores extra line breaks
so the text appears in single line.
 Say the city has ten million souls can you believe it?
 No body can believe it

4
Preformatted Text
 The following text will appear in the browser as it appears below:

<pre>

Say this city has ten million souls can you believe it?

No body can believe it

</pre>

5
Spaces
 If an HTML document has many spaces, additional spaces are removed
automatically. If the user insert five spaces, four of them will be removed.
Additional spaces can be inserted in the text by using character entity &inbsp;
that stands for non breaking space;

Example
 <b> Hello world</b>
 The above example will display Hello world

 <b> Hello &nbsp; &nbsp; &nbsp; &nbsp; World</b>

 The above example will display Hello World

6
Common character Entities
 Some common character entities are as follows:
Entity Name Description Output
&nbsp; Space
&lr; Less than <
&gt; Greater than >
&amp; Ampersand &
&quot; Quotation mark “
&cent; Cent
&pound; Pound
&copy; Copyright
&times; Multiplication X
&divide; Division /

7
<DIV> Tag
 <DIV> tag is used to define a section in an HTML document. It can be
used to group large section of HTML elements together and format
them with cascading style sheet. The closing tag </DIV> is used to
indicate the end of section.

Example
<div> Hello world </div>

8
Practice#1
 Write HTML code that display two section of text with different formatting with inline CSS
using <DIV> tag.
<html>
<body>
<div style=“background-color: orange; text-align: center”>
<p> its my style</p>
</div>
<div style=“border: 1px solid black; text-align: right;”>
<p> it is another style</p>
</div>
</body>
</html>
9
<SPAN> Tag
 <span> tag is used to provide additional structure to HTML document.
It is used to group and apply styles to inline elements. It can be used to
give different characteristics to specific parts of other elements. HTML
span element begins with <span> tag and ends with </span> tag. A style
can be applied to the content placed inside the SPAN tag using STYLE
attribute.

10
Practice#2
 Write HTML code that display a paragraph using <SPAN> tag. It uses style
attribute to change the characteristics of part a paragraph element.

<html>

<body>

<p style=“text-align: center; font-color: blue;”>

The color of the sky is blue. But if you look at the

<span style=“font-color: green;”> trees, they are green</span>

</p>

</body>

</html>
11
<MARQUEE> Tag
 HTML provides a special feature to display scrolling and animated text
in the web page. This is supported by internet explorer, Firefox and
chrome and above.
 Marquee tag can be used to scroll text or image In different directions.
The text placed inside the marquee tag scrolls, horizontal across the
screen or the web page. The scrolling text is normally used to give
messages or display some special announcements to the visitors.

12
<MARQUEE> Tag Attributes
Attributes Description
Behavior It indicates how the contents will scroll. The possible values
are scroll, slide and alternate.
Direction It indicates the direction to which the marquee will scroll.
The possible values are up, down, left and right. The default
value is left.
Loop It specifies to set the horizontal space to the left and right of
the marquee. Its value is given in pixels.
Scroll delay It is used together with SCROLAMOUNT to set the speed
of the scrolling.
Scroll amount It is used together with scroll delay to set the speed of the
scrolling.
Width It defines the width of marquee. It is given in pixels.

13
HTML Comments
 <!--> tag is used to comment HTML code. It is recommended to use <!---->
to comment the tags. This tag is compatible to all browsers. The comment
can be inserted in any section of an HTML document. The comments are
ignored by the browser. They are primarily used to explain the code in an
HTML documents etc.

Example
 <!– another comment line -->

14
Lists
 HTML can display different items in the form of lists. Lists are used to
present text in more readable form. Different types of lists are as follows:

1. Order List

2. Unordered List

3. Definition List

15
Order List
 An ordered list is a list of items in which each item is marked with number or
letter. Ordered list is also known as numbered list.
 <ol> </ol> tag is used to create an ordered list and it stands for ordered list.

 <li> </li> tag is used with each item in the list and it stands for List Item.

16
Attributes of Ordered Lists
Attribute Description
Type It specifies the number scheme for the list. The default
number scheme is 1,2,3,….. Possible scheme are:
1 for 1, 2, 3, ……
A for A, B, C, …..
A for a, b, c, …..
I for I, II, II, ….
I for i, ii, iii, …..

Start It specifies the starting number of the list.


Value It changes the numbering sequence in the middle of the
list. It is used in <li> tag.

17
Practice#3
 Write HTML code that displays the names of three books in ordered list.

<html>

<body>

<ol>

<li> Web Programming </li> Display


1.Web Programming
<li> Script Programming</li> 2.Script Programming
<li> Visual Programming </li> 3.Visual Programming

</ol>

</body>

</html>
18
Unordered List
An unordered list is a list of item in which each item is
marked with a symbol.
Unordered list is also known as unnumbered list.

<ul></ul> tag is used to create an unordered list and it


stands for Unordered List.
<li> tag is used with each item in the list.

19
Attributes of Unordered Lists
Attribute Description

Type It specifies the type of symbol to appear with each item of list.
Possible values are SQUARE, DISC, CIRCLE. The default value
is CIRCLE.

20
Practice#4
 Write HTML code that displays the names of three books in unordered list.

<html>

<body>

<ul type=“circle”> Display


•Web Programming
<li>Web Programming</li>
•Script Programming
<li> Script Programming</li> •Visual Programming

<li> Visual Programming</li>

</ul>

</body>

</html>
21
Definition Lists
 A definition list is not a list of items. It consists of terms and description
of terms.
 <dl> tag is used to create a definition list and it stands for definition
list.
 <dl> tag is used with each term in the definition list. It stands for
definition term.
 <dd> tag is used with each description of the term. It stands for
definition description.

22
Practice#5
 Write HTML code that displays a two definition lists for the terms data and information.

<html>
<body>
<dl>
<dt>Data</dt> Display
<dd>Raw facts about an entity</dd> Data
Raw facts about an entity
<dt>Information</dt> Information
<dd>Processed form of data</dd> Processed form of data

<dl>

</body>
</html>
23
Nested Lists
 A list within a list is known as nested lists.

 HTML can display items as nested lists.

 A nested list can have different types of lists. For example, an ordered
list can be nested within an unordered list.

24
Nested Lists
<html>
<body>
<ul type=“square”>
<li> item No. 1</li>
<li> item No. 2</li> Display
•item No. 1
<ol type=“i” start=“3”>
•item No. 2
<li>sub item No. 1</li> 1. sub item No. 1
•item No. 3
</ol>
</li>
<li> item No. 3</li>
</ul>
</body>
25
</html>
Practice#6
<hmtl>
<body>
<h3>My favoites:</h3>
<ol>
<li>Books
<ul type=“square”>
<li> Holly Quran</li>
<li>History of Islam</li>
</ul>
<li>Fruits
<ul type=“square”>
<li>Mango</li>
<li>Apple</li>
</ul>
</li>
</ol>
</body>
26
</html>
Assignment#1
Nested Lists
 Write HTML code that display the following nested list:

 College Organization Structure


 Department
 Dean’s Office
A. Chairman
 Dean
B. Assoc. Chairman
 Associate Dean
C. Faculty
 Assistant Dean  Science
 Staff  Arts
1. Science Staff  Commerce
2. Arts Staff D. Graduate Students
3. Commerce Staff E. Undergraduate Students
27
Images in HTML
 Different image formats supported by HTML are as follows:

1. Graphic Interchange Format (GIF)

2. Joint Photographic Expert Group (JPG, JPEG)

3. Portable Network Graphics (PNG)

4. Bitmap Picture (BMP).

28
Image Attributes
Attribute Description

SRC It specifies the name and path of images to be displayed. Only


name of the image is specified if image is not stored in the
same directory in which web page is stored. Otherwise,
complete path of image is specified.

WIDTH It specifies the width of the image in pixels.

HEIGHT It specifies the height of the image in pixels.

ALT It specifies the text to be displayed if the browser cannot


display image.

29
Examples
 <img src=“tawhid.jpg” alt=“Image not found” />

 The above example display “pic.jpg”. If the browser cannot display the
image, the text “Image not found” will be display.

30
Practice#7
 Write HTML code that display an image. The code should display a
message if there is any problem in displaying the image.
<html>
<body>
<h3> image in HTML </3>
<img src=“pic.jpg” alt=“image not found” />
</ br></ br><p> Opps… Check it now</p>
</body>
31
</html>
Tables In HTML
 A table consist of rows and columns.

 The data in a table more readable.

 There are three main elements in HTML for building tables.

 These are <TABLE>, the table row <TR> and table data <TD>.

 <TABLE> tag is used to define a table.

 <TR> tag is used to define a row in a table.

 <TD> tag is used to define a table data.

 <TH> tag is used to define the header row of the table.

32
Important attributes of <TABLE> tag
Attribute Description
WIDTH It specifies the width of the table. It can be given as number of pixels
or as percentage relative to the screen.

HEIGHT It specifies the height of the table. It can be given as number of pixels
or as percentage relative to the screen.

BORDER It specifies the thickness of the border of the table.


CELLPADDING It specifies the distance between data in the cell and cell boundaries.

CELLSPACING It specifies the spacing between adjacent cells of the table.


COLSPAN It specifies the number of column for a cell. It is used inside <TH> or
<TD> tags. A cell may consist of many column.

ROWSPAN It specifies the number of rows for a cell. It is used inside <TD> or
<TD> tags. A cell may consist of many rows.

33
Example
<table border=“1” cell padding=“6” cell spacing=“2” width=“90”>
 The <TR> Tag

The <TR> tag is used to create a row in the table. TR stands for Table Row.
Example
<tr>……</tr>
 The <TD> Tag

The <TD> tag is used to create cells in the row of a table. TD stands for Table Data.
Example
<td>Computer</td>
<td>Hardware</td>
<td>Software</td>
34
practice
 Write HTML code that display the names and grades of three students in
a table.

35
Soluation#2
<html>
<head> <title>table</title></head>
<body>
<h3>Using CELLSPACING & CELLPADDING</H3>
<table border="1" width="30%" cellpadding="20" cellspacing="5">
<tr>
<th>Name</th>
<th>Grade</th>
</tr>
<tr>
<td>Usman Khlil</td>
<td>A</td>
</tr>
<tr>
<td>Sysha Asfaq</td>
<td>A+</td>
</tr>
<tr>
<td>Mohsin</td>
<td>A</td>
</tr>
</table>
</body> 36
Assignment#2
 Write HTML code that display the following table.

Player Name Team Runs 100s Highest


Rahmat Shah Afghanistan 9610 13 175
Virat Koli India 13712 73 190
Mohammad Nabi Afghanistan 5790 8 145
Babar Azam Pakistan 13890 18 160
David Warnner Australia 12310 38 190

 The background color of heading row should be yellow and the


background color of the column of player’s names should be red.
37
Assignment#3
 Write HTML code that display the following table.

Top

Middle Up
Way Left Way Right

Middle Down

Bottom

38
<table border="2">
<tr>
<td colspan="6" align="center">top</td>
</tr>
<tr>
<td rowspan="2">side</td>
<td>top</td>
<td rowspan="2">left</td>
<tr>
<td>down</td>
</tr>
</tr>
<tr>
<td colspan="6" align="center">down</td>
</tr>
</table>
The <CAPTION> Tag
 <caption> tag is used to specify the caption of table. Caption is always displayed
in the center with respect to the table. It also appears within the width of the
table. It is used within <table> tag.
 Example

<table>

<caption> Student Records</caption>

<tr>

<td>…..<td>

</tr>

</table> 40
Thanks for your kind attention

Any Questions ?
&
Suggestions

You might also like