Scribd
Upload
20 views11 pages

3 Links and Comments

Uploaded by

alrokhomer
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
20 views11 pages

3 Links and Comments

Uploaded by

alrokhomer
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 11

Links and

Comments

T. Samih Mohamed
E.mail simoo111111@gmail.com
The <a> Element
The <a> element ("anchor") is used to create a clickable link
to another location. There are four varieties of links:

1. External link – to a web page outside our own website.


2. Internal link – to another web page on our own website.
3. Bookmark link – to a specific position within the current web page.
4. Email link - to automatically start a new email message.

We will learn how the <a> element works and take a look at examples of each
of these link types, but first let's learn about element attributes.
Element Attributes
Attributes add information to an element and often control how an element is
displayed on the page. Here is the <a> element with two attributes defined:

<a href="http://www.google.com" target="_blank">look it up on Google</a>.

attribute attribute
attribute value attribute value

Each element has its own set of attributes available. Usually these attributes are
optional, but in some cases they are mandatory.

As in this example, an element can have multiple attributes applied to it at the


same time.

Attribute names must be in lowercase and attribute values must be enclosed in quotes.
Using the <a> Element
Whatever text is placed between the <a> and </a> tags will display on the web
page and become a clickable link. This is often referred to as anchor text:
<body>
<p>If you're uncertain, just
<a href="http://www.google.com" target="_blank">look it up on Google</a>.
</p>
</body>

The href attribute ("hypertext reference")


instructs the browser which page to load if
the link is clicked.

The target attribute is optional and controls


how the linked page will be displayed in the
browser. If omitted, the new page will load
in the existing browser window. If
target="_blank" is specified, the linked
page will open up and display in a new
browser tab or window.
Example: External Link
The code we just used is an example of an external link. If clicked, it will
take the visitor to a website external from our own site. In this case, the user
will go to Google's home page:
<a href="http://www.google.com" target="_blank">look it up on Google</a>.

In order for an external link to An external link is the most common


function, we must use the full URL place to use the target="_blank"
("Uniform Resource Locator") attribute. With it set, visitors who click
address, including the initial "http://". on the link will see the linked page in
For long URLs, it's a good idea to a new tab, leaving the original tab,
copy and paste the URL address showing our web page, still open. If
directly from the browser rather than we omit this attribute, visitors who
trying to type it in to the code click the link will depart our website
window and risk making a mistake. entirely.

Remember, attribute names must be in lowercase and attribute values must be


enclosed in quotes.
Example: Internal Link
To create an internal link to another page on our site, we use the same
format but just type the file name directly into the href attribute:

<a href="page2.html">Go to Page 2</a>

The web server will assume that this The target="_blank" attribute is
file is located in the same folder as usually omitted for links within our
the current page. If the linked page own site. We want the existing
were located somewhere else, we window to move to the new page.
would need to include a path to that Otherwise, we would clutter up the
location. We'll learn more about browser window with multiple tabs,
paths in an upcoming lesson. each containing a different page from
our site.

Internal links like these are how we build a navigation menu to allow our visitors to
move from page to page on our site.
Example: Bookmark Link
A bookmark link is a link to another location within the existing web page.
This special link is created using two separate <a> elements. The first one
establishes the link by using an href attribute of "#" (pound sign) followed by
the name of the destination anchor:

<a href="#end">Click here to go to the conclusion.</a>


.
.
.
<a id="end">Conclusion</a>

The second <a> element names the destination anchor by using the id
attribute. Since it does not include the href attribute, this <a> element does
not create a clickable link and will be invisible to the visitor.

The destination anchor does not have to come after the link anchor and can be located
anywhere on the page. Bookmark links like these are most commonly used to build a
clickable table of contents within a page.
Example: Email Link
To create a link that automatically starts a new email message, we use
mailto: in the href attribute instead of a web page address:
<body>
<p>If you like my site, please
<a href="mailto:me@domain.com">send me an email!</a>
</p>
</body>

When the link is clicked, the visitor's default email application is launched and a new
message created. The destination email address is required.
XHTML Comments
We can add personal comments throughout our web pages.
These will not appear on our live web pages. Some typical
reasons to add comments are:
 To make notes to ourselves explaining the purpose of certain lines
of code.
 To indicate to fellow team members where future changes or
improvements will go.
 To inform future programmers about how the page works and of any
known pitfalls with modifying content.

Memory fades over time and it can be a time-consuming chore to "get back up to
speed" on a page written months or years ago. Comments can make things much
easier.
Comment Syntax
Comments begin with "<!--" Comments end with "-->"

<!-- This is a comment. -->


<p>To visit Yahoo's home page, click here:</p>
<!--
This next link was set up to open in a new window because
some visitors could not find their way back to my website.
-->
<a href="http://www.yahoo.com" target="_blank">Yahoo!</a>

The browser will consider everything between the <!-- and the --> as part of
the comment and will therefore disregard it. Comments can span multiple
lines, as line breaks and spaces make no difference.

WARNING: Be careful what you write! Although comments are not displayed on the
live web page, they are still in the web document and can be seen by any user who
knows how to view the original source code of a website.
Viewing Source

All web browsers have the ability to view the underlying code that creates a
web page. In Chrome, shown above, a user can see the code in a separate
window by right clicking directly on the web page and choosing "View page
source." Notice that it displays our comments and colors them green.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy