Note on Create an Ordered and Unordered list, Insert Image and Objects with examples

W3Schools
  • Note
  • Things to remember

Create an Ordered and Unordered List

HTML supplies several list elements. Most list elements are composed of one or more <LI> (list item) elements.

Type

Numbering Style

1

Arabic numbering

1,2,3,….

a

Lowering alpha

1,2,3,….

A

Upper alpha

1,2,3,….

i

Lowering alpha

1,2,3,….

I

Upper alpha

1,2,3,….

  • Ordered List

An ordered list starts with the tag <OL> and ends with </OL>/. Each list items start with the tag <LI> ends with the tag </LI> items in this list are numbered automatically by the browser. One has the choice of setting the TYPE attribute to one of five numbered styles.

One can also specify a starting number for an ordered list. The value of the START attribute is always an Arabic number (1, 2, 3, 4,……..).

<HTML>

<HEAD <TITLE> DEMONSTRATION OF ORDERED AND UNORDERED LIST</TITLE></HEAD

<BODY>

<H3>ORDERED LIST</H3>

<OL>

<LI>LIST ITEM 1</LI>

<LI>LIST ITEM 2</LI>

<LI>LIST ITEM 3</LI>

</OL>

<H3>ORDERED LIST</H3>

<UL>

<LI>LIST ITEM 1</LI>

<LI>LIST ITEM 2</LI>

<LI>LIST ITEM 3</LI>

</UL>

</BODY>

</HTML>

.

  • Unordered List

Items in this list start with a list mask such as a bullet. The browser will usually change the list mark in nested list. Unordered List starts with the tag <UL> and ends with </UL>. Each list item starts with tag <LI> and ends with </LI> tags.

One has the choice of three bullet types: Disc (Default), Circle and Square. These are controlled in a browser by the “TYPE” attribute for the <UL> element.

Example;

<HTML>

<HEAD> <TITLE> TYPES OF COMPUTER ON THE BASIS OF SPEED/SIZE.</TITLE></HEAD>

<BODY>

<H3>ON THE BASIS OF SIZE</H3>

<OL>

<LI>Super Computer</LI>

<LI>Mainframe</LI>

<LI>Mini Computer</LI>

<LI>Micro Computer</LI>

<UL>

<LI><H3>PORTABLE MICROCOMPUTER</H3></LI>

<OL TYPE=”I”>

<LI> </LI>

<LI>LIST ITEM 2</LI>

<LI>LIST ITEM 3</LI>

</OL>

<LI><H3>NON-PORTABLE MICROCOMPUTER</LI>

<OL TYPE=”I”>

<LI>Desktop</LI>

<LI>Workstation Computer</LI>

</OL>

</UL>

</OL>

</BODY>

</HTML>

.

How to increase multiple Spaces in between text?

Browser does not show more than one space between two words even if you have entered a hundred spaces between them in HTML source. So, if you want to enter more than one blank character between two words, you will need to use a small code for this purpose. It is “&nbsp;” without the quotes. These codes are known as character entities.

Character Entities

“<” symbol defines the start of an HTML tag but if we want the symbol to be inserted then, character entities in the HTML source are used. A character entity has three parts: an ampersand (&), an entity name or a # and an entity number, and finally a semicolon (;).

Entity numbers are more reliable than entity names. To display a less than sign in an HTML document, we must write; &lt; or &#60;

The Most Common Character Entities are;

Result

Description

Entity Name

Entity Number

Non-Breaking space

&nbsp;

&#160;

<

Less than

&lt;

&#60;

>

Greater than

&gt;

&#62;

&

Ampersand

&amp;

&#38;

Quotation

&quot;

&#34;

NOTE: These entities are case sensitive.

Insert Image /Objects, Audio and Video

HTML allows inserting of static and animated images in an HTML page. HTML accepts various picture file formats.

  • GIF: Graphics Interchange Format (GIF) uses a maximum of 256 colors. The GIF format is best for displaying images that have been designed to create logos, icons and buttons. Moreover, GIF also supports animated picture, interlacing images and transparency.
  • JPG: Joint Photographic Experts Group (JPG) is a good format for photographs because JPEG/JPG files contain millions of colors. JPG image doesn't give the option of including transparency or of interlacing images, but it allows to specify the degree of file compression so that one can create a balance between image quality and file size.
  • PNG: Portable Network Graphic (PNG) is good for combinations of text and graphics within one image. PNG permits true color images, variable transparency, platform-independent display and a fast 2D interlacing scheme. Currently, it is only supported by the Internet Explorer.

Inserting Images

Inserting images on the Web page is implemented by starting tag <IMG> and closing tag </IMG>. Along with the <IMG> tag, it must contain an attribute SRC (source) or the location of the image file. SRC contains complete image name along with its extension (e.g. computer.jpg). If the image is not in the same location of HTML file, a complete path has to be specified (e.g. C:/Image/Computer.jpg).

In addition to the SRC attribute, there are other attributes also and they are:

  • ALT:(Alternate Text); It is a text field that describes an image or acts as a label.
  • ALIGN:(Alignment); It allows an image having options like a bottom, middle, top, left and right.
  • WIDTH:It expresses the width of an image in pixels.
  • HEIGHT:It expresses the height of an image in pixels.
  • BORDER:It is for a border around the image, specified in pixels.

Example:

<HTML>

<HEAD> <TITLE> INSERTING IMAGES ON HTML</TITLE> </HEAD>

<BODY>

<IMG SRC=”C:\Users\admin\Desktop\IMAGES\windows-desktop.jpg” height=”200” width=”300” border=1>

</BODY>

</HTML>

.

Inserting Audio

HTML5 provides a standard for inserting and playing audio files. Before HTML5, there was not standard for playing audio files on the Web page. Audio files had to be played with a plug-in (like flash, Mozilla Firefox). Audio can be inserted on the Web page by using tag <AUDIO>.

Example:

<HTML>

<HEAD> <TITLE> INSERTING AUDIO IN HTML</TITLE></HEAD>

<BODY>

<AUDIO>

<SOURCE SRC=”C:\Users\Public\Music\Sample Music” TYPE=”AUDIO/MPEG”>

</AUDIO>

</BODY>

</HTML>

Inserting Video

Video can be inserted on the Web page by using the tag <VIDEO>. Video can be inserted in HTML pages with several methods. We are providing three-way of an inserting video clip in the Web page with two line breaks.

Example:

<HTML>

<HEAD> <TITLE> INSERTING VIDEO; FIRST WAY </TITLE> </HEAD>

<BODY>

<VIDEO WIDTH=”320” HEIGHT=”240” CONTROLS>

<SOURCE SRC=”MYVIDEO01.MP4” TYPE=”VIDEO/MP4”>

<OBJECT DATA=”MYVIDEO02.MP4” WIDTH=”320” HEIGH=”240”>

</OBJECT>

</VIDEO>

</BODY>

</HTML>

Or

<HTML>

<HEAD> <TITLE> INSERTING VIEO; SECOND AND THIRD WAY </TITLE> </HEAD>

<BODY BGCOLOR=”ORANGE”>

<IMG DYNSRC=”MOVIE1.AVI” WIDTH=”200PX” LOOP=”INFINITE”>

<HR SIZE=”2”>

<EMBED SRCC=”MOVIE1.AVI” WIDTH=”200PX” LOOP=” INFINTE”>

</BODY>

</HTML>

For movie clip, we may use another two alternative ways.

<img dynsrc=”movie1.avi” width=”200px” loop=”infinite”>

<embed src=”movie1.avi” width=”200px” loop=”infinite”>

Multiple movies can run at a time using separation of media player with horizontal line. Horizontal line is kept between two syntaxes as shown in above example.

<hr size=”no”> = horizontal line size=1, 2, 3, 4 …… here. <hr size=”2”> is horizontal line size=2.

NOTE: The only difference of IMG DYNSRC with EMBED SRC is that EMBED SRC provides or shows full control panel or control bar of a media player.

(Shrestha, Manandhar and Roshan)

Bibliography

Shrestha, Prachanda Ram, et al. Computer Essentials. Kathmandu: Asmita's Publication, 2014.

Adhikari, Deepak et.al, Computer Science-XI, Asia Publication Pvt. Ltd, ktm

  • HTML supplies several elements.Among Most elements
      (Ordered item) elements
        (Unordered item) elements are commonly used among these here are some elements used in HTML.
  • Ordered list
  • Unordered list
  • Inserting Image
  • Inserting audio
  • Inserting video
.

Very Short Questions

0%

DISCUSSIONS ABOUT THIS NOTE

No discussion on this note yet. Be first to comment on this note