Scribd
Upload
24 views21 pages

Week 3.2

This document discusses various HTML elements including lists, special characters, the DIV element, and anchor elements. It provides examples and explanations of how to use unordered lists, ordered lists, and description lists to organize information on web pages. It also explains how to use special character entities, the DIV element to format blocks of content, and both absolute and relative hyperlinks using the anchor element. The document concludes with hands-on examples and a reference section.

Uploaded by

Shazam 99
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
24 views21 pages

Week 3.2

This document discusses various HTML elements including lists, special characters, the DIV element, and anchor elements. It provides examples and explanations of how to use unordered lists, ordered lists, and description lists to organize information on web pages. It also explains how to use special character entities, the DIV element to format blocks of content, and both absolute and relative hyperlinks using the anchor element. The document concludes with hands-on examples and a reference section.

Uploaded by

Shazam 99
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/ 21

University of Computer Studies

Lists, Special Character, Div and Anchor Elements

University of Computer Studies

HTML Group

Department of Information Technology


Supporting and Maintenance
Outlines

 Lists
 Special Characters
 DIV Element
 Anchor Element
 Summary
 Next Lecture
 References
Lists

 are used on web pages to organize information


 make your pages clear and easy to read
 three types of lists:
 unordered lists
 ordered lists
 description lists
Lists
Lists

 displays a numbering or lettering system to itemize the information contained in the list
 used of numeals (default), uppercase letters, lowercase letters, uppercase Roman
numerals, and lowercase Roman numerals

<ul type=“1” start=“5”>


<li> ……. </li>
<li> ……. </li>
</ul>
Lists

Description Lists

Description list
Description term

Description data
Hands-On Practice

<!Doctype html>
<html lang="en"> <ol type="i">
<head> <li>J2SE</li>
<meta chaset="UTF-8"> <li>J2EE</li>
<title>Example of Lists</title> <li>J2ME</li>
</head> </ol>
<body> <li>Python</li>
<h3>The following is Ordered list</h3> </ul>
<ol type="I"> <h3>The following is definition list.</h3>
<li>HTML5</li> <dl>
<li>CSS</li> <dt>Website</dt>
<li>JavaScript</li> <dd>A location connected to the Internet that
</ol> maintain one or more pages on the World Wide We.</dd>
<h3>The following is Unordered List</h3> </dl>
<ul type="square"> </body>
<li>PHP</li> </html>
<li>Java</li>
The Output …

Figure 1: Sample Lists


Special Characters

 use in your web page document, you need to use special characters
 called entity character
Special Characters

Table 1: Common Special Characters

Character Entity Name Code


“ Left curly quote marks &ldquo;
” Right curly quote marks &rdquo;
‘ Left single quotation mark &lsquo;
’ Right single quotation mark &rsquo;
© Copyright symbol &copy;
& Ampersand &amp;
Empty space Nonbreaking space &nbsp:
- En- dash &ndash;
__ Long dash &mdash;
< Less - than &lt;
> Greater-than &gt;
| Vertical bar &#124;
Div Element

 configures a structural block area, or “division” on a web page, with empty space above and below
 use a div element when you need to format an area of a web page, such as a logo, navigation, or
footer area
 is the block display element
<div>
………………
………………
</div>
Anchor Element

 use to specify a hyperlink, to another web page or file that you want to display

Table 2: Attribute of the element

Attributes Description

href The attribute href (short for hyper reference) defines the link target. A website’s URI is expected as
the attribute’s worth.
title The title attribute enables you to add any link title to a hyperlink.
Example: title="Any link title".
target Using the attribute target, you can define a target frame where the link target should be opened by
the web browser.
Example:
target=“_self”. The target link opens in the specified frame in the current browser window.
target="_blank". The web browser opens the link target in a new tab or browser window.
Anchor Element

Absolute Hyperlink

 indicates the absolute location of a resource on the Web


 need to link to resources on other websites
 includes the http:// protocol and the domain name

< a href=“http:// webdevfoundations.net”>


Web Development &nbsp; Design Foundations </a>
Anchor Element

Relative Hyperlink

 need to link to web pages within your site


 does not begin with the http:// and does not include a domain name
 contain only file name or file name and folder of the web page you want to display

<a href=“contact.html”>Contact Us</a>


Anchor Element

E-Mail Hyperlink

 will automatically launch the default mail program configured for the browser
 begins with “mailto:”, followed by a valid e-mail address

< a href = “mailto:[email protected]”>


[email protected] </a>
Hands-On Practice
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Special Characters, Div Element and Anchor Element</title>
</head>
<body bgcolor="lightgreen" text="Navy">
<a href="https://google.com" target="_blank" title="Google Website">Home</a>&nbsp;&#124;
<a href="listExample.html" target="_self">List Example Page</a>
<h2>My First Web Page!</h2>
<p>A web page (or webpage) is a specific collection of information provided by a website and displayed to
a user in a web browser. A website typically consists of many web pages linked together in a coherent
fashion. The name "web page" is a metaphor of paper pages bound together into a book. </p>
<div align="center"><small>Copyright&nbsp;&copy;&nbsp;2020 My WebSite!</small></div>
</body>
</html>
The Output …

Figure 2: Sample Special characters, Div and Anchor element


Summary

 To create a variety of lists (such as: Unordered lists, Ordered lists and Description lists)
 To use the special characters in HTML pages
 To identify the div element configures a block area
 To add the anchor element inside your web pages
Next Lecture

Overview of Cascading Style Sheets


References

 Terry Felke-Morris, “Web Development and Design


Foundations with HTML5”, 6th Edition.
 Jon Duckett, “Beginning HTML, XHTML, CSS, and
JavaScript”.
University of Computer Studies

You might also like