Scribd
Upload
3 views

Lecture 2-Part2

Code

Uploaded by

osamaakkaihxxx777
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

Lecture 2-Part2

Code

Uploaded by

osamaakkaihxxx777
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 26

Web Design

Lecture 2

2022 Dr. Ibrahim Al-Baltah 1


Lists and
Hypertext Links

2022 Dr. Ibrahim Al-Baltah 2


Working with Lists

• There are four types of lists


• Ordered lists
• Unordered lists
• Description Lists
• Navigation lists

2022 Dr. Ibrahim Al-Baltah 3


2022 Dr. Ibrahim Al-Baltah 4
Ordered Lists…

• By default, browsers display list items alongside a numeric marker,


and started from number one.

2022 Dr. Ibrahim Al-Baltah 5


Ordered Lists…

• To display different numbering, use the start and reversed attributes of


the ol element.

2022 Dr. Ibrahim Al-Baltah 6


Ordered Lists…

• You can explicitly define the item value by adding the value attribute
to each list item. The list shown previously could also have been
generated with the following code:

2022 Dr. Ibrahim Al-Baltah 7


Unordered Lists

• Unordered lists are lists in which the items have no sequential order.

• <ul type=“ ”> the type values (such as square, circle, disc…) are
used to change the list icon.

2022 Dr. Ibrahim Al-Baltah 8


Creating a Nested List

• Because the li element is itself a grouping element, it can be used to


create a series of nested lists. The general structure for a nested
collection of unordered list is

2022 Dr. Ibrahim Al-Baltah 9


Description Lists
• A third type of list is the
description list containing a list
of terms and matching
descriptions.
• The description list is grouped
by the dl (description list)
element, the terms are marked
with the dt (description term)
element, and the description(s)
associated with each term is
marked by the dd element.

2022 Dr. Ibrahim Al-Baltah 10


Navigation Lists

• A navigation list is an unordered list of hypertext links placed within


the nav element. The general structure is

2022 Dr. Ibrahim Al-Baltah 11


Navigation Lists…

2022 Dr. Ibrahim Al-Baltah 12


Working with Hypertext Links

• Hypertext is created by enclosing content within a set of opening and


closing <a> tags in the following structure
<a href="url">content</a>
• where url is the Uniform Resource Locator (URL), which is a standard
address format used to link to a variety of resources including
documents, email addresses, telephone numbers, and text messaging
services, and content is the document content marked as a link.

2022 Dr. Ibrahim Al-Baltah 13


Turning an Inline Image into a Link

• Inline images can also be turned into links by enclosing the image
within opening and closing <a> tags.
• Turn the Curbside Thai logo into a hyperlink that points to the Startup
page you opened in the first session.

<a href="ct_start.html">
<img src="ct_logo2.png" alt= "Curbside Thai" />
</a>

2022 Dr. Ibrahim Al-Baltah 14


Specifying the Folder Path

2022 Dr. Ibrahim Al-Baltah 15


Absolute Paths

• An absolute path is a path that starts from the root folder and processes
down the entire folder structure described with the expression
/folder1/folder2/folder3/file
• where folder1 is the root folder, followed by the subfolders folder2,
folder3, and so forth, down to the linked file.

E|/thai/docs/catering/ct_catering.html

2022 Dr. Ibrahim Al-Baltah 16


Relative Paths
• When many folders and subfolders are involved, absolute path expression
can quickly become long and cumbersome to work with.
• For this reason, most web designers prefer relative paths in which the path
is expressed relative to the location of the current document.
folder1/folder2/folder3/file (without the root folder such as driver name)

• Relative paths can also go up the hierarchy to parent folders by including


the symbol (..), which means “go up one level.
• Thus, to go from
• ct_about.html in the general folder up two levels to the index.html file, enter
the expression
../../index.html
2022 Dr. Ibrahim Al-Baltah 17
Setting the Base Path
• A browser resolves relative paths based on the location of the current
document. You define a different starting point for relative paths by
adding the following base element to the document head
<base href="url" />
• where url is the location that you want the browser to use when
resolving relative paths in the current document.
• The base element is useful when a single document from the website
is moved to a new folder.
• Rather than rewriting all of the relative paths to reflect the document’s
new location, the base element can point to the document’s old
location allowing relative paths to work as before.

2022 Dr. Ibrahim Al-Baltah 18


Linking to a Location within a Document

• Hypertext can point to locations within a document.


• For example, you could link a specific definition within a long
glossary page to save users the trouble of scrolling through the
document.
• In order to enable users to jump to a specific location within a
document, do the following
• Add id attribute with a unique vale in the location that you want to jump to
<h2 id="lunch">Lunch Menu</h2>
• u link to that element using the following hypertext link
<a href="file#id">content</a>

2022 Dr. Ibrahim Al-Baltah 19


Linking to the Internet and Other Resources
• The type of resource that a hypertext link points to is indicated by the
link’s URL. All URLs share the general structure

scheme:location

2022 Dr. Ibrahim Al-Baltah 20


Linking to a Web Resource

• If you have ever accessed the web, you should be very familiar with
website URLs, which have the general structure
http://server/path/filename#id
or for secure connections
https://server/path/filename#id

• where server is the name of the web server hosting the resource, path
is the path to the file on that server, filename is the name of the file,
and if necessary, id is the name of an id or anchor within the file.

2022 Dr. Ibrahim Al-Baltah 21


Linking to an Email Address
• Many websites use email to allow users to communicate with a site’s
owner, sales representative, or technical support staff.
• You can turn an email address into a hypertext link using the URL:
mailto:emailAddress
• you would use the URL
mailto:[email protected]?subject=Test&body=Test%20Message

To Subject Body

Notice that the body text uses %20 character code to represent a blank
space since URLs cannot contain blank spaces.
2022 Dr. Ibrahim Al-Baltah 22
Linking to a Phone Number

• With the increased use of mobile phones to access the web, many
developers now include links to phone numbers for their company’s
customer service or help line.
• The URL for a phone link is
tel:phone
where phone are the digits of the linked number.
• For example, the following code creates a telephone link to the
Curbside Thai number:
Call: <a href="tel:+17045551151">(704) 555-1151</a>

2022 Dr. Ibrahim Al-Baltah 23


Working with Hypertext Attributes

2022 Dr. Ibrahim Al-Baltah 24


Working with Hypertext Attributes…
• By default the target of a link replaces the contents of the current page in
the browser window.
• To force a document to appear in a new window or tab, add the following
target attribute to the <a> tag:
<a href="url" target="window">content</a>
• You can choose any name you wish for the browser window or you can use
one of the following target names:
• _self opens the page in the current window or tab (the default)
• _blank opens the page in a new unnamed window or tab, depending on how
the browser is configured
• _parent opens the page in the parent of the current frame (for framed
websites)
• _top opens the page in the top frame (for framed websites)
2022 Dr. Ibrahim Al-Baltah 25
Textbook

Patrick Carey, 2021, New Perspectives on HTML 5 and CSS,


Comprehensive, 8th Edition, Cengage.

2022 Dr. Ibrahim Al-Baltah 26

You might also like