Scribd
Upload
5 views

HTML-LISTS

The document provides an overview of various HTML tags and their attributes, focusing on the <body> tag, image insertion using the <IMG> tag, and text formatting with superscript and subscript. It also covers creating different types of lists in HTML, including ordered, unordered, and definition lists, along with examples and attributes for each. Additionally, it explains how to add comments in HTML and introduces nested lists.

Uploaded by

3385
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

HTML-LISTS

The document provides an overview of various HTML tags and their attributes, focusing on the <body> tag, image insertion using the <IMG> tag, and text formatting with superscript and subscript. It also covers creating different types of lists in HTML, including ordered, unordered, and definition lists, along with examples and attributes for each. Additionally, it explains how to add comments in HTML and introduces nested lists.

Uploaded by

3385
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 38

HTML TAGS

Learning Objectives

• <body> attribute
• Inserting Image
• Adding Superscript and Subscript
• Adding Comments
• Creating Lists in HTML
<body>
• <body topmargin=50>
• <body leftmargin=100>
• <body rightmargin=100>
• This attribute is used to set margin for the webpge.
• <body text=“red”> In the webpage the entire color of the text will become
red color.
• <body background=“pic.jpg”> The background of the webpage will be a
picture.
• <body bgcolor=“yellow”> The background of the webpage will be yellow
color.
Inserting Images
• Images makes the webpage more information and appealing.
• Web browsers support various graphics support.
- GIF (Graphics Interchange Format)
- PNG (Portable Network Graphics)
- JPEG (Joint Photographic Expert Group)
Types of Images
• Inline Image
-The inline image is displayed when the webpage is opened and is inserted
with a line of text.
• External Image
- Extenal images are not displayed automatically with other content on the
web page.They are referenced externally and viewed separately by clicking a
link.
<IMG>Tag
• The html Tag is used to add images in HTML Webpage.
Empty or Container?
It is an empty tag , and the tag is <img>.
<IMG> Attributes
• It tells the browser how to layout the page so that text can flow properly
around the image.
src - Defining the source of an image.
height & width - Specifying height and width for an image.
align- Aligning Image
alt- ALT Attribute.
border-Add a border for the image
<img src="https://spiderman-4-1920x1080-wallpaper.jpg" width="100"
height="100" border="20" alt="There is an image" align="right">
Defining the source of an image
• To add and define the source of an image on a web page,src attribute is used.
Syntax: <img src=“address or path of the image file”
Ex1: <img src=“pic1.jpg”>
Ex2: <img src=“C:\Users\pictures\pic1.jpg”>
Ex3: <img src=”http://www.google.com/images/pic1.jpg”>
Specifying Height and Width for an Image
• The height attribute specifies height for an image either in the form of an
integer or a percentage value.
• The width attribute specifies width for an image either in the form of an
integer or a percentage value.
Ex: <IMG SRC=“pic1.jpg” HEIGHT=70% WIDTH=50%>
<IMG SRC=“pic1.jpg” HEIGHT=20 WIDTH=50>
Aligning Image
• To align an image to the right or left of a text and Top, middle and bottom
of the image.
Ex: <img src=“pic1.jpg” align=“top”>
Border
• To add border to the inserted image and its value can be an integer number
which helps to set the thickness of the border.
Ex: <img src=“pic1.jpg” BORDER=2>
ALT Attribute

• The ALT attribute specify the text as an alternate to the image, if the image
cannot be displayed.
• The user is having a text-based browser on his computer such as Lynx.
• The alt attribute provides alternative information for an image if a user for
some reason cannot view it (because of slow connection, an error in the src
attribute)
ALT Attribute

<img src=pic1.jpg” BORDER=2 ALT=“Picture is here..Check your code”>

What is the mistake here?


Practice Session-Task 1
Add Expo 2020 logo to your
webpage with necessary attributes.
Also set the margin for the
webpage.
<SUP> Superscript ,<SUB>Subscript Tag
• Special text formatting tag which is used to display the text in the
superscripted format and subscripted format
Ex: To display the equation E=MC2
E=MC<SUP>2</SUP>
To display chemical formulae H2O
H<SUB>2</SUB>O
Adding comment in HTML source code
• A comment is the text in the source code of HTML document which is not displayed
by the browser on the webpage.It is used to separate various sections in a webpage.
2 ways to add comment in a web document are:
1. Using <comment>contents</comment>
2. Using <!-- contents -->
Ex: 1. <comment>Please, design an attractive webpage</comment>
2. <!-- Please, design an attractive webpage -->
Practice Session-Task 2

• Display the following text in your webpage.

I LOVE UAE
• Also add a comment for the webpage.
Creating Lists in HTML
• Advantages
-Information arranged in proper manner.
- Increases the readability.
- Appearance of the webpage.
- To display some related items or terms in a web page.
Types of List
• Ordered List
• Unordered List
• Definition List
Ordered List
• It is also known as numbered list. It is used to create a sequential list of items.
ie; A list in which each item is placed at a specific position.
• HTML provides <OL> tag to create such lists.
Syntax: <OL>
<LI> ORANGE
<LI> APPLE
</OL>
An ordered list is created using Arabic numerals starting with number 1 by default.
Ordered List Attributes
• Type: This attribute can be used to change the numbering style. This
attribute can take five different values:
1------Arabic Numerals
A------Uppercase Alphabets
a-------Lowercase Alphabets
I-------- Uppercase Roman Letters
i---------Smallcase Roman letters.
Ordered List Attributes
• Start:This attribute is used when the number list is to be started with some
number other than 1.
Ex: <OL TYPE=A>
<LI>CPU
<LI>Keyboard
<LI>Mouse
</OL>
Ordered List Attributes
<OL TYPE=A START=3>
<LI>CPU
<LI>Keyboard
<LI>Mouse
</OL>
WHAT IS THE OUTPUT??
Ordered List Attributes
• Value: This attribute can be used within <LI> tag of an ordered list to
change the numbering sequence in between the list.
EX : <OL>
<LI>CPU
<LI>keyboard
<LI Value=6>Mouse
</OL>
Ordered List Attributes
• TYPE: This attribute When used in specific <LI> tag changes the numbering style
of specific item.
EX : <OL>
<LI>CPU
<LI>keyboard
<LI>Mouse
<LI Type=“A”>Monitor
</OL>
Unordered List
• It is also known as bulleted list and is used to present the list items in an organized
manner irrespective of their positions in the list .
• HTML provides <UL> tag
• Syntax: <UL>
<LI>ORANGE
<LI>APPLE
</UL>
By default a solid black circle is used to mark the individual list items
<UL> Attributes
• Type: It can be used to select the bullet style.
• Three Types
DISC(a solid black circle)
Square( a solid black square)
Circle (a hollow black circle)
DISC

<UL TYPE="DISC">
<LI>ORANGE
<LI>APPLE
</UL>
SQUARE
<UL TYPE=‘’SQUARE’’>
<LI>ORANGE
<LI>APPLE
</UL>
CIRCLE
<UL TYPE=‘’CIRCLE’’>
<LI>ORANGE
<LI>APPLE
</UL>
TYPE
<UL TYPE=‘’SQUARE’’>
<LI>ORANGE
<LI TYPE=‘’CIRCLE’’>APPLE
<LI>GRAPES
</UL>
Practice Session-Task 3
• Create an Ordered List and Unordered List on the
following.
Definition List
• It is used to organize the items and their descriptions in the HTML webpage.
• HTML provides <DL> tag to create a such list.
• Each item has two parts: Term & Definition.
Syntax: <DL>
<DT>term1</DT>
<DD> Term1 description </DD>
<DT>term2</DT>
<DD> Term2 description </DD>
</DL>
Definition List
<dl>
<dt>Bread</dt>
<dd>A baked food made of flour.</dd>
<dt>Coffee</dt>
<dd>A drink made from roasted coffee beans.</dd>
</dl>
OUTPUT:
<DL> Attribute
Compact: It does not take any value, but appears with in the tag to show the
term and its description in the same line.
- It is not supported by Google chrome or Mozilla.
- It is supported by Internet explorer and that too create the descriptions of
very short terms.
Practice Session-Task
Create a definition List for the following text.
Nested Lists
• The list items in a list are further subcategorized forming another list of items with in the
list. Such type of lists are called Nested Lists.
<HTML>
<HEAD>
<TITLE>NESTED LISTS</TITLE>
</HEAD>
<BODY>
<UL>
<LI>FRUITS
<UL TYPE=CIRCLE>
<LI>ORANGE
<LI>APPLE
<LI>BANANA</LI>
</UL>
</UL>
</BODY>
</HTML>
HOME WORK
• Create a Nested List in your webpage as shown below:

You might also like