UNIT-III
Lists: Types of lists: Ordered, Unordered– Nesting Lists – Other tags: Marquee, HR, BR-
Using Images – Creating Hyper-links.
LISTS
HTML Lists are used to display related information in an easy-to-read and
summarizing way.
Typesoflists:
[Link],
1. Ordered(orNumbered) Lists
2. Unordered(orBulleted)Lists
1. Ordered(orNumbered)Lists
We can insert lists into our HTML documents to display ordered lists of items.
Numbered lists (sometimes called Ordered Lists) are generally used to list items by their
priority or their sequence in a process. For example, we might use a numbered list to
display instructions in completing a specific task.
Whenwecreateanumberedlist,[Link],weplace
the<ol>…</ol>[Link],we place the
<li>…</li> tags around each line of the list. We have five choices when creating numbered
lists: Upper-case letters (A,B,C), lower-case letters (a,b,c), upper-case Roman
numerals(I,II,III),lower-caseRomannumerals(i,ii,iii)andregularnumbers(1,2,3)which
[Link] attribute and
placing it within the<ol> start tag. We can also begin the
numbering(ordering)atanypointinthesequenceaswellusingtheSTART [Link],if
wewantedtostartourlistwithitemD,wewouldusetheattributestart=“D”byplacing it within
the<ol>start tag as well..93.
StartTag: <ol>
EndTag: </ol>
Attributes: type=“1”(Default) Listsequenceuses1,2,3,etc.
type=“A”(Uppercasealphabet) ListsequenceusesA,B,C,etc.
type=“a”(Lowercasealphabet) Listsequenceusesa,b,c,etc.
type=“I”(UppercaseRomannumerals) ListsequenceusesI,II,III,etc.
type=“i”(LowercaseRomannumerals) Listsequenceusesi,ii,iii,etc.
start=“?”(Startingvalue) Here“?”isthestartingvalue.
RelatedTags: <li>…</li>(Lineitem)
BCA-SIASC Page 1
Mylist:
<oltype=“A”> This tag will cause the items
<li>FirstItem</li> surrounded by the line item
Example:
<li>SecondItem</li> tags<li> to be displayed as an
<li>ThirdItem</li> ordered list.
</ol>
My list:
[Link] Item
Result:
[Link]
[Link]
2. Unordered(orBulleted)Lists
The other type of list we can create is called a bulleted (also called unordered) list.
Bulleted lists are typically used when items require the reader’s attention, but do not
need to be listed in any particular order.
Whenwecreateabulletedlist,[Link],weplacethe
<ul>…</ul>[Link],weplacethe<li>…</li>
tags around each line of the list. We have three choices when
creatingbulletedlists:Circles(○),squares(■) and discs(●)[Link] thetype
of bulleted list we want by using the STYLE attribute and the value of “list-style-type:“?”
(where?iscircle,squareordisc)placingitwithinthe<ul>starttag.
StartTag: <ul>
EndTag: </ul>
style=“list-style-type:disc” ● List sequence uses filled
Attributes:
circle
style=“list-style-type:circle” ○ Listsequenceuseshollow
circle
style=“list-style-type:square” ■ List sequence uses filled
square
RelatedTags: <li>…</li>
Mylist:
<ulstyle=“list-style-type:square”> This tag will cause the items
<li>FirstItem</li> surrounded by the line item
Example:
<li>SecondItem</li> tags<li> to be displayed as a
<li>ThirdItem</li> list with square bullets.
</ul>
Mylist:
[Link]
Result:
[Link]
[Link]
BCA-SIASC Page 2
NestedLists
A nested list is simply a numbered or bulleted list that is contained within another
list. This can be useful, when we wish to display items at different levels within a list
hierarchy. We have the flexibility of creating both numbered and bulleted lists as nested
lists.
To create a nested list, be sure to use one set of either<ul>…</ul> or<ol>…</ol>
tags and any attributes for each list.
StartTag: <ol>or<ul>
EndTag: </ol>or</ul>
Any from bulleted or
Attributes:
numberedattributes
RelatedTags: <li>…</li>(Lineitem)
OurMostPopularTutorials:
<ul>
<li>QuickBooks</li>
<li>Peachtree</li>
These tags will create a nested
<li>MicrosoftOffice</li>
list (Microsoft Office
Example: <ulstyle=“list-style-type:circle”>
Applications listed separately
<li>Access</li>
from the rest)
<li>Excel</li>
</ul>
<li>Photoshop</li>
</ul>
OurMostPopularTutorials:
• QuickBooks
• Peachtree
Result: • MicrosoftOffice
o Access
o Excel
• Photoshop
DefinitionLists
Definition Lists are used to display text in a form that resembles a dictionary or
glossary of terms. When we create a definition list, we must use three different [Link],
we place the<dl>…</dl> tags around the text we want to become a definition list.
Second,weplacethe<dt>…</dt>[Link],weplacethe
<dd>…</dd>tagsaroundeachdefinition.
BCA-SIASC Page 3
StartTag: <dl>
EndTag: </dl>
Attributes: None
<dt>…</dt>(DefinitionTerm)
RelatedTags:
<dd>…</dd>(Definition)
Whatdotheapplicationsdo?
<dl>
<dt>Access</dt>
<dd>Createdatabasesandprogramsto
track and manage your
These tags will create a
Example: information</dd>
definition list.
<dt>Excel</dt>
<dd>Perform calculations,analyze
information and manage lists in
spreadsheets</dd>
</dl>
Whatdotheapplicationsdo?
Access
Create databases and programsto
track and manage your
Result:
information.
Excel
Perform calculations, analyze
informationandmanagelistsin
spreadsheets.
OTHERTAGS:(MARQUEE,HR,BR)
1. Marquee
The<marquee>isanon-standardHTMLtagwhichwasusedtocreateascrolling text or an
image. It was used to make the text or image scroll horizontally across
[Link]<marquee>elementisadeprecated(deprecated
means“notrecommended”)[Link],ourpagesorappsmaybebroken.
As it was said above, the HTML<marquee> tag is deprecated, and the developersoften
avoid using it. Nowadays, we can achieve the same result with the help of CSS and Javascript.
BCA-SIASC Page 4
Syntax
The<marquee>[Link] (<marquee>)
and closing (</marquee>) tags.
ExampleofusingHTML<marquee>tag:
<!DOCTYPEhtml>
<html>
<head>
<title>Titleofthedocument</title>
<style>
marquee{
font-size: 30px;
font-weight: 800;
color: #8ebf42;
font-family: sans-serif;
}
</style>
</head>
<body>
<marquee>AscrollingtextcreatedwithHTMLMarqueeelement.</marquee>
</body>
</html>
Wecanusedirectionattributeof<marquee>elementtochangethedirectionofthe
text/image.
Exampleofascrollingtext:
<!DOCTYPEhtml>
<html>
<head>
<title>Titleofthedocument</title>
</head>
<body>
<marqueedirection="down">AscrollingtextcreatedwithHTMLMarquee element.
</marquee>
</body>
</html>
BCA-SIASC Page 5
2. HorizontalLines(HR)
Wecaninsertasolidhorizontalline(sometimescalledaHorizontal Rule)intoour
webpage to break up information or add visual interest. HTML requires that horizontal
rules occupy a line by themselves. To insert a horizontal line, place the<hr>tag (thereis
no end tag) where we want the line to appear in our document. In HTML5, the<hr> tag
will still display a horizontal line in visual browsers, but it is more commonly used as a
thematic break at the paragraph level. For example, a location change in a story or a
change of theme.
StartTag: <hr>
EndTag: None
Attributes: None
<p>Thisiswhereyourfistlineoftext
The<hr>taginsertsasolid
Example: goes<hr>Yoursecondsentencewould
horizontal line.
beginonthenextline.</p>
Thisiswhereyourfirstlineoftext goes.
Result: Yoursecondsentencewouldbegin on
the next line.
3. LineBreak(BR)
By default, browsers ignore many formatting keystrokes. Examples includethe
“Enter” and “Tab” keys and multiple uses of the spacebar. To accomplish the same tasks
in HTML, we use page formatting tags.
Web browsers wrap text automatically to the next line when the current line
reaches the right side of the browser. If we want to avoid wrapping and begin text on a
new line, we use the<br>tag. The<br> tag does not have an end tag. We can also add
additional lines between paragraphs by using the<br> tags. Each<br> tag we enter
creates another blank line.
StartTag: <br>
EndTag: None
Attributes: None
<p>Thisiswhereyourfistlineoftext
Each<br>tagbeginsanew line.
Example: goes<br>Yoursecondsentencewould
beginonthenextline.</p>
Thisiswhereyourfirstlineoftext goes.
Yoursecondsentencewouldbegin
Result:
onthenextline.
BCA-SIASC Page 6
USINGIMAGES
Images are a terrific way to add interest to our webpage and come in different
forms such as photographs and graphics. There are many different file types used for
images in web pages, the most common being JPEG, GIF and PNG. It is important to
understand the different file types and how browsers display them.
GIF(Graphics Interchange Format) is most commonly used for simple, less-
detailed images, such as graphics, logos, etc. GIF supports 256 colors and is primarily
usedwhenourimage hasonly afewcolorsandbasiclines andshapes. GIFisalsoused to
display short, simple animations.
JPEGorJPGfor short (Joint Photographic Experts Group) supports literally
millions of colors (called24bit) and is the format used when the image is complex, such
as photographs and other detail-rich images.
PNG (Portable Network Graphics) combines the 24bit support of JPG with
advanced compression capabilities.
After quality, the most important consideration when inserting images into our
webpage isdownloadtime. When a user visits our webpage, their browser actually
[Link] the file sizes,
the slower the page download. We will need to consider both the number of
[Link]
[Link]
alsodependantontheuser’sconnectionspeed.
Therearemanydifferentimageandgraphicseditingprogramsonthemarket
[Link]
[Link] our images
before we insert them into our HTML code. With the image editing program of
ourchoice,weshouldcroptheimagetoremoveanyextraneousparts,whichhelps
[Link]
(thehighertheresolution,thehigherthefilesizeanddownloadtime)andcompression of the file
size while we monitor quality.
AddingImagestoWebpages
To add an image to our webpage, use the<img> tag and specify the filename with
the SRC (source) attribute. The value is the name of the image, including the file
extension. If the image is hosted on a different server, we must list the full path of the
image. For example, “[Link]
StartTag: <img>
EndTag: None
Attributes: src=
BCA-SIASC Page 7
Example: <imgsrc=“[Link]”>
Placestheimage“[Link]”inthe
Result:
desiredlocationonthewebpage.
Re-SizinganImage
We can adjust the size of our image in our HTML page by using the WIDTH and
HEIGHT attributes. If we don’t adjust the dimensions appropriately, we might distort our
[Link],wecanassignavalueinpixels,orasa percentage of the
browser window size.
StartTag: <img>
EndTag: None
Attributes: src=
Measuredinpixelsorasapercenta
width= geofthewidthofthe
window.
Measuredinpixelsorasa
height= percentage of the height ofthe
window.
<img src=“[Link]” width=“150”
Example: Usingpixels.
height=“150”>
<img src=“[Link]” width=“40%”
Usingpercentages.
height=“25%”>
Theimage,“[Link]”willappearin
Result:
thedimensionsindicated.
AlternativeText:
Alternative text (also known as placeholder text) serves two purposes. First, it
[Link]
[Link],anyALTtextwehaveinsertedappearsin
theimage’[Link]
imagesturnedonintheirbrowserdon’[Link],somesearchengines
[Link]
mizeourwebpageforsearchengines,addingkeywordsintoALTtextis
[Link],inserttheALTattributeinto the <img>
tag.
StartTag: <img>
EndTag: None
Attributes: alt=
Example: <img src=“[Link]” width=“150”
BCA-SIASC Page 8
height=“150” alt=“TeachUcomp, Inc.
Logo”>
The image, “[Link]” will appear in
[Link]
Result:
veimagesturnedoffwillsee
theALTtext.
ImageLabels
We can add a label (or title) to our image so that when a user moves their mouse
pointer over the image, the label will appear in a small box next to the pointer. This is
achieved by placing the TITLE attribute within the <img> tag.
StartTag: <img>
EndTag: None
Attributes: title=
<imgsrc=“[Link]”title=“Sunseton
Example:
theWater”>
When a user places their mouse
pointer over the image “[Link]”,
Result:
thetitlewillappearinasmallbox
nexttothepointer.
CREATINGHYPER-LINKS
WhatareLinks?
One of the most dynamic featuresofHTML isits ability to displayselectable
hyperlinks(orlinks)whichallowtheusertonavigatefromonetopicorpagetothenext.
Byclickingonalink,theuser“jumps”[Link]
formofunderlinedtext,[Link] and a mouse
pointer is held over the image or text that is a link, the pointer turns into a
[Link],other pages on the
Web, to an e-mail address and even to other types of documents (such as Microsoft Word, or
a PDF (Portable Document Format)).
Before we begin creating links, it is important to understand URLs. As mentioned
earlier, each page on the Internet has a unique address, called a URL (Uniform Resource
Locator). When we know a Web address, we generally use HTTP (Hypertext Transfer
Protocol) to reach a specific address ([Link] HTTPS (Hypertext
TransferProtocol,Secure)isusedwhenhandlingsecuretransactionsthatrequire
BCA-SIASC Page 9
informationtobeencryptedsuchascreditcardinformationinacommercetransaction. FTP
(FileTransfer Protocol) is used to physically transfer files to a different
[Link],weuseFTP.
The first part of a Web address is the HTTP prefix followed by a colon and two
forward slashes ([Link] Most of the time, when we are surfing the Web, our browser
will insert the HTTP prefix for us. However, when inserting Web addresses into your
HTML code, you must include it as part of the full Web address. The second part is the
host name, preceded bywww. (for World Wide Web). The host name is also called a
domain. For example, in the Web address [Link] [Link] is the host
(domain) name. If the page we are linking to is not the main page of the site, we need to
specify its exact location and filename. For example, to send someone to
TeahUcomp,Inc.’s course selection page, the URL would be
[Link] We must be careful when typing these Web
addresses, as one wrong character will cause a “broken” (non-functioning) link. We
should always test our links before we publish our HTML page so that users have a
positive experience.
There are two types of links we can create in HTML –AbsoluteandRelative. An
absolute linkgenerally used to create a link that takes the user to a specific page on the
Web outside of the current website. An absolute link contains a complete URL. For
example:[Link] linkis commonly referred to as a
“shorthand Web address”. We use relative links to refer to pages on the same website.
For example, once someone is on the TeachUcomp,Inc. website at
[Link] a relative link to take the visitor to the course section
would be “/courses/”. When using a relative link it is generally a good idea to put a
trailing slash (/) at the end of the Web address. If left off, it causes our browser tosubmit
a request to the server twice, the first time requesting the address without the trailing
slash and then again with the trailing slash automatically added by our browser.
TextLinks
The tag used to define a link is actually an anchor tag. It takes the format of<a
href=“…”>, where the “a” defines it as an anchor tag and the HREF attribute defines the
“Hyperlink Reference” or action that will occur when the user selects the link. The<a
href=“…”> tag is followed by the textthatwill be displayed to the userfor their selection. The
display text, and the anchor tag, are then terminated with the</a> end tag. The
followingisanexampleofatypicallinktag:
<ahref=“[Link]”>TeachUcomp,[Link]</a>
In this example, the user sees “TeachUcomp,[Link]” in blue underlined
[Link] user selects“TeachUcomp,[Link]”withtheir
mouse, they will be sent to the website [Link].
BCA-SIASC Page 10
StartTag: <a>
EndTag: </a>
Attributes: href=
Thistagwillcreatea
<a
Example: text link to the
href=“[Link]
specified webpage.
The link appearsas
underlined text,
Result: Home
includingaclickable
link.
ImageLinks
We can also make images into links. This is accomplished in the same manner as
text links, with the image coding replacing the text that gets turned into a link.
StartTag: <a>
EndTag: </a>
Attributes: href=
<ahref=“[Link] Thistagwillcreatean
Example: src="[Link] image link to the
content/uploads/[Link]”></a> specified webpage.
The link appearsasthe
specified picture.
When a mousepointer
Result: is held over the image,
apointing hand
appears
indicatingalink.
OpeningaPageinaNewWindoworTab
Bydefault,whenwelinktoanotherpage,thenewpageopensintheexisting browser
window. There may be times when you wish to open the page in a new browser
[Link]“newwindow”[Link]
consideredgoodpracticewhenlinkingtopagesoutsideofourownwebsitesothatour users have
access to the information but do not actually leave our website. To set an
individuallinktoopeninanewbrowserwindow,usetheTARGETattributewithavalue
of“_blank”andplaceitwithinthe<a>starttag.
StartTag: <a>
EndTag: </a>
Attributes: href=
BCA-SIASC Page 11
This tag will create a
text link to the
<a specified webpage and
Example:
href=“[Link] open it in a new
k”>Home</a> browserwindowor
tab.
Thelinkactivatesa
Result: Home newbrowserwindow or
tab.
SettingAllLinksonaPagetoOpeninaNewWindow
We can also set all of the links on an HTML page to open in a new window or tab
each time the link is clicked. To accomplish this, we must place<base target=“_blank”>
between the <head>…</head> tags.
StartTag: <base>
EndTag: None
Attributes: target=
<head>
<basetarget=“_blank”>
Example:
…
</head>
Thistagwillcausealllinksonthepageto
Result:
openinanewwindowortab.
LinkingtoanAreaontheSamePage(Bookmarks)
Sometimes,wemaywanttocreatealinkthattakestheusertoanotherareaon
[Link],theselinksarehelpfulforespeciallylongpages, or when we
want to make navigationeasy on the page and organize informationfor
[Link],wemaywanttousebookmarksonaFAQpage,sothatausercan
easilygettotheirspecificquestions,andreturntothetopofthepagequicklyandeasily.
[Link],wemustidentifyand
[Link]
<a>…</a>[Link]<a>starttag,wemustplace
[Link],createalinktoour newly named
area, with a slight variation. For bookmarks, place a pound sign (#) immediately before the
name of the anchor.
BCA-SIASC Page 12
Startand <a>…</a>(tocreatetheanchor)
EndTags: <ahref=“#?”>…</a>(tocreatethelink)
Id=“?”(withinthe<a>starttagoftheanchor)
Attributes:
href=“#?”(withinthe<a>starttagofthelink)
<p><ahref=“#colors”>LearnMore</a></p>
Example: <p><aid=“colors”></a>AvailableColors:</p>
<p>Red<br>
Blue<br>Green</p
>
LearnMore Thelinktakestheuser to
the specified anchor. In
thisexample, the user
Result: Available Colors: wouldjumptotheline
Red “Available
Blue Colors”.
Green
LinkingtoanE-mailAddress:
We can create links on our page to e-mail addresses. When the link is clicked, the
user’s default e-mail editor will open with the e-mail address we specified in the “To”
address area. To create an e-mail link, we use [Link] as the value, replacing ? with thee-
mail address we want the message sent to.
We can also pre-populate the “Subject:” line of the user’s e-mail message to us by
inserting a question mark (?) and “subject=?” following the email address. This can be
useful by helping us quickly identify or organize our e-mails. If we use a multi-word
subjectlineitisgoodpracticetoplace%20betweeneachwordtoensureproperspacing of the
words in the subject line.
StartTag: <a>
EndTag: </a>
Attributes: href=
<p><a href=
“[Link]
Example:
Comments%20and%20Questions”>e-
mailus</a></p>
The user’s e-maileditor
To:you@[Link]:
addresses the e-mail to the
Result: Subject:CommentsandQuestions
specifiedaddress,withthe
pre-populatedsubject.
BCA-SIASC Page 13
LinkingtoOtherTypesofFiles:
We can create links in our page to all types of files other than HTML, such as a
MicrosoftWordfile,[Link]
[Link]
providealinktoaMicrosoftExcelfileandtheuserdoesnothaveMicrosoftExcelon their computer,
they will encounter problems. For this reason, it is a good idea to tell our users what type of
file it is. Depending upon the file type, the user will be prompted to
downloadthefilewitha“FileDownload”dialogbox,atwhichpointtheycanopenor save the file.
WeshouldusethefilenameastheHREFvaluetocreatealinktoothertypesof files. It is
important to makesure the filewe are pointingtois uploadedto ourserver, so
thattheuseractuallyhasaccesstoit.
StartTag: <a>
EndTag: </a>
Attributes: href=
Example: <ahref=“[Link]”>SeeaSample</a>
Thelinkpromptstheuser
Result: SeeaSample toopenthespecifiedPDF
file.
BCA-SIASC Page 14