HTML Part 2

MAKING LISTS IN A HTML DOCUMENT
1. LI (List Item)
Whenever we make a list, ordered or unordered, we specify the list elements using the
<li> tag. It is an empty tag and does not require a closing tag.
2. OL (Ordered List)
Ordered list is the one where all the list
items are arranged in a particular order and
have a number or letter in a sequence in
front of them. By default, the ordered list is
made with a sequence of serial numbers, but
can be changed using its attributes type and
start. Such lists are created using <ol> tag.
type attribute lets us choose alphabets or
roman numerals for indicating a sequence
while start lets us indicate where the
numbering or sequence has to be started
from.
3. UL (Unordered List)
An unordered list is similar to an
ordered list except or its list items are
not arranged in any particular order or
sequence. To enhance the visibility of
each item as separate from others we
generally put bullets in front of each
item. Such lists are created using <ul>
tag. We can change the shapes of the
bullets using the type attribute
where we can assign them with circle,
square, disc, etc.
1 | Page
4. Nested List
We can use lists within list. Lists that lie
within another list are called Nested
Lists. The browsers automatically use
different bullets or numbers for the next
level of indentation for the nested lists.
We can have an ordered list within an
unordered list or vice versa. By
combining lists, we can create
information in a very organized manner.
5. Descriptive Lists
Definition list (DL) is an indented list of
terms and their definitions. Entries are
listed like in a dictionary or encyclopedia.
The definition list is the ideal w ay to
present a glossary, list of terms, or
another name/value list. <dl> tag is used
to mark the starting of the list.
Definition term specifies the term in the
definition list. It is specified using <dt>
tag.
Definition description displays the
definition description in a definite list. It
is specified using <dd> tag and must be
used with a <dt> tag.
INSERTING IMAGES INTO A HTML DOCUMENT

2 | Page
Images are very important to beautify as well as to depict many complex concepts in
simple way on your web page. The <img> tag is used to specify an image that needs to
be displayed in an HTML document. Images can be added to the web pages both in the
background and in the foreground.
Adding an image as Background
Adding an image as Foreground
To add an image in the background of

a web page we use background
attribute. The name of the image
containing the image should be
specified as the value of the
background attribute.
We can add an image in the

foreground at any position on the web
page by using the <img> tag. The
src attribute of the <img> tag takes
the URL of the image file as its value
and helps the browser to locate and
display an image at a specified place
on the web page.
Syntax:
<body background=file name>
Attributes of the <img> tag

3 | Page
Syntax:
<img src=file name(or file path)>
We can change the size, position wrt text on screen using various attributes.
Changing size of image:
We can change the size of an image
using Height and Width attributes
in the <img> tag. Values of both
these attributes are specified in
number of pixels.
Syntax:
<img src=image name
Height=pixels Width=pixels>
Labelling the image:

We can include a suitable short
message ( called the alternate text) with
an image so that it gets displayed when
we point to it in the browser window or
while downloading the Web page,
when the image takes time to load or is
unavailable for download. The alt
attribute is used for this purpose.
Syntax:
<img src=image name alt=text>
Aligning the image:
4 | Page
The align attribute is used within

the <img> tag to specify the
position of the image wrt text.
For horizontal alignment, the align
attribute can take 2 values left and
right.
For vertical alignment, the align
attribute can take 3 values
top,bottom and middle.
Borders around images:

We use border attribute to apply a
border around an image to clearly
define the box in which the image is
embedded. The thickness of the border
is specified in pixels.
Syntax:
<img src=image file name
border=no. of pixels>
5 | Page
SOME NEW HTML COMMANDS
1. STRIKE (Strikeout type)
The <strike> tag is not

supported in HTML5.
Use <del> or <s> instead.
The <strike> tag defines

strikethrough text.
2. SPAN (Span of content)
The <span> tag is used to

group inline-elements in a
document.
The <span> tag provides no

visual change by itself.
The <span> tag provides a

way to add a hook to a part
of a text or a part of a
document.
6 | Page
3. DIV (Defines block of content)
The <div> tag defines a

division or a section in an
HTML document.
The <div> tag is used to

group block-elements to
format them with CSS.
7 | Page

HTML Part 2

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

HTML Part 2

Încărcat de

Drepturi de autor:

Formate disponibile

MAKING LISTS IN A HTML DOCUMENT

INSERTING IMAGES INTO A HTML DOCUMENT

Adding an image as Background

Adding an image as Foreground

To add an image in the background of

We can add an image in the

Attributes of the <img> tag

Labelling the image:

Aligning the image:

The align attribute is used within

Borders around images:

SOME NEW HTML COMMANDS

1. STRIKE (Strikeout type)

The <strike> tag is not

The <strike> tag defines

2. SPAN (Span of content)

The <span> tag is used to

The <span> tag provides no

The <span> tag provides a

3. DIV (Defines block of content)

The <div> tag defines a

The <div> tag is used to

S-ar putea să vă placă și