Anda di halaman 1dari 31

+

Internet Technology
Malak Alamri

This course is based on material by Dr.Kamal eldein

+
HyperText Markup Language
(HTML)
Chapter 2
October 27, 2014

Agenda

HTML
1.

HTML Links (Hyperlinks)

2.

HTML Images

HTML Links (Hyperlinks)


1- HTML Links - Syntax

Links, and also known as hyperlinks, are defined using the <a> tag A link is
the "address" to a document (or a resource) on the web.

A hyperlink is an element, a text, or an image that you can click on, and jump
to another document.

To create a hyperlink, you use the a tag in conjunction with the href attribute
(href stands for Hypertext Reference). The value of the href attribute is the
URL, or location of where the link is pointing to. The syntax of the HTML links
is:
<a href="value"> link text </a>
a: Anchor
href: Hypertext Reference.

value: URL, web page file name in the same web site or location of where
the link is pointing to.
link text: Defines the part to be displayed.

HTML Links (Hyperlinks)

Example HTML Code:

Visit the <a href="http://www.yahoo.com">yahoo</a> site

The result is:

Visit the yahoo site


By clicking on the above link (yahoo), the page should jump to yahoo web site
(www.yahoo.com).

HTML Links (Hyperlinks)

Another HTML Code example:

Go to <a href="second.html"> next page </a>

The result is:

Go to next page
By clicking on the above link (next page), the page should jump to another web
page called "second.html".

HTML Links (Hyperlinks)


2- HTML Links - Colors and Icons

When you move the mouse cursor over a link, two things will
normally happen:

The mouse arrow will turn into a little hand

The color of the link element will change

By default, links will appear as this in all browsers:

An unvisited link is underlined and blue

A visited link is underlined and purple

HTML Links (Hyperlinks)


Types of hyperlinks can be modified:

A:visited {styles for previously visited links}

A:link {styles for links that have never visited}

A:active {styles for links that are currently being clicked}

A:hover {styles when the mouse cursor is hovering over the


link}

HTML Links (Hyperlinks)


You can change the default colors, using styles:
<!DOCTYPE html>
<html>
<head>
<style>
a:link {color:#000000; background-color:transparent}
a:visited {color:#000000; background-color:transparent}
a:hover {color:#ff0000; background-color:transparent}
a:active {color:#ff0000; background-color:transparent}
</style>
</head>
<body>
<p>You can change the default colors of links</p>
<a href="http://www.google.com" target="_blank">Google</a>
</body>
</html>

HTML Links (Hyperlinks)

This is the result:

HTML Links (Hyperlinks)


3- HTML Links - The target Attribute

The target attribute specifies where to open the linked


document.

This example will open the linked document in a new


browser window or in a new tab:

<a href="http://www.w3schools.com/" target="_blank">Visit


W3Schools!</a>

HTML Links (Hyperlinks)

Target Value

Description

_blank

Opens the linked document in a new window or tab

_self

Opens the linked document in the same frame as it was


clicked (this is default)

_top

Opens the linked document in the full body of the window

framename

Opens the linked document in a named frame

HTML Links (Hyperlinks)


4- HTML Links - Image as Link
It is common to use images as links:
<!DOCTYPE html>
<html>
<body>
<p>The image is a link. You can click on it.</p>
<a href="http://www.android.com/">
<img src="C:\Users\Asus\Pictures\222.jpg"
style="width:42px;height:42px;border:0"></a>
<p>
We have added "border:0" to prevent IE9 (and earlier) from
displaying a border around the image.
</p>
</body>
</html>

HTML Links (Hyperlinks)

This is the result:

HTML Links (Hyperlinks)


5- Named Anchors

You can make your links "jump" to other sections within the same page. You
do this with named anchors.

To use named anchors, you need to create two pieces of code. One for the
hyperlink (this is what the user will click on), and one for the named anchor
(this is where they will end up).
1.

Created the name anchor first (where the user will end up)

<a name="abc">abc</a>

HTML Links (Hyperlinks)


2.

Then create the hyperlink (what the user will click on). This is done
by linking to the name of the named anchor. You need to precede
the name with a hash (#) symbol.

To go back click<a href="#abc">here</a>

The results is:

When you click on the above link(here), this page should jump up to
the "abc" section.
To go back click here

HTML Links (Hyperlinks)


Create a named anchor:

Anchor names must be unique within a document.

Anchor names are case-sensitive.

The following symbols can be included in an anchor name.


hyphen(-), underscore(_), colon(:), period(.)
name="anchor_name"

Anchor names must start in the alphabet.


name=c1"

HTML Links (Hyperlinks)


Named Anchors Example:
<!DOCTYPE html>
<html>
<body>
<h1>TAG index</h1>
<h2>Anchor example</h2>
<h3><a name="menu">Menu</a></h3>
<ul>
<li><a href="#c1">Jump to chapter1</a></li>
<li><a href="#c2">Jump to chapter2</a></li>
<li><a href="#c3">Jump to chapter3</a></li>
</ul>
<h3><a name="c1">chapter1</a></h3>
<p>paragraph text ...</p>
<h3><a name="c2">chapter2</a></h3>
<p>paragraph text ...</p>
<h3><a name="c3">chapter3</a></h3>
<p>paragraph text ...</p>
<hr>
<p><a href="#menu">Jump to Menu</a></p>
</body>
</html>

HTML Links (Hyperlinks)


The result is:

HTML Links (Hyperlinks)


6- Email Links

You can create a hyperlink to an email address. To do this, use the


mailto attribute in your anchor tag.

Example HTML Code:

To send email please click <a


href="mailto:mzalamri@ju.edu.sa">Email</a>

The result is:

To send email please click Email

HTML Links (Hyperlinks)

Clicking on this link (Email ) should result in your default email


client opening up with the email address already filled out
(mzalamri@ju.edu.sa).

HTML Links (Hyperlinks)


7- Base href

You can specify a default URL for all links on the page to start with. You do
this by placing the base tag (in conjunction with the href attribute) in the
document's head. See the following HTML Code:

<head><base url="http://www.google.com"></head>

www.google.com is a default URL for all links on the page.

HTML Images

1- HTML Images Syntax

Images make up a large part of the web - most websites contain


images. HTML makes it very easy for you to embed images into your
web page.

To embed an image into a web page, the image first needs to exist in
either .jpg, .gif, or .png format. You can create images in an image
editor (such as Adobe Photoshop) and save them in the correct
format.

Once you've created an image, you need to embed it into your web
page. To embed the image into your web page, use the <img> tag,
specifying the actual location of the image. The syntax of HTML image
is:
<img src="image">

HTML Images

The img tag has many attributes illustrated in the following


example:
<img src="http://www.seldovia.com/wpcontent/uploads/2013/06/IMG_6656.jpg" width="100" height="100"
alt="Smile" align="center" border="0">

HTML Images

The previous img contains a number of attributes. These attributes


tell the browser all about the image and how to display it. Here's an
explanation of these attributes:

Src: Required attribute. This is the path to the image.

Width: Optional attribute. This specifies the width to display the


image. If the actual image is wider, it will shrink to the dimensions
you specify here. Likewise, if the actual image is smaller it will
expand to your dimensions. It's better to make sure the image is the
correct size to start with.

Height: Optional attribute. This specifies the height to display the


image. This attribute works similar to the width.

HTML Images

Alt: Alternate text. This specifies text to be used in case the


browser/user agent can't render the image.

Align: Determine how your images will be aligned, relative to the


other content on the page (such as a paragraph of text). Align take
the one of the values: left, center, or right.

Border: Created a border around the image. This is default behavior


for most browsers. If you don't want the border, specify border="0".

HTML Images
Another img tag attributes that doesnt appear at the previous
example are:

Hspace: Horizontal space. Specifies the white space on left


and right side of an image in pixels.

Vspace: Vertical space. Specifies the white space on top and


bottom of an image in pixels.

HTML Images
2-Image Maps

For an image, you can create an image map, with clickable


areas:

<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145


px;height:126px">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

HTML Images
3- Animated Images

The GIF standard allows animated images:

<!DOCTYPE html>
<html>
<body>
<p>The GIF standard allows moving images.</p>
<img src="http://i1171.photobucket.com/albums/r543/saan2712/smile.gif"
alt=smile" style="width:48px;height:48px">
</body>
</html>

HTML Images
4- Image Floating

You can let an image float to the left or right of a paragraph:

<!DOCTYPE html>
<html>
<body>
<p>
<img src="http://i1171.photobucket.com/albums/r543/saan2712/smile.gif"
alt="Smiley face"
style="float:left;width:42px;height:42px">
A paragraph with an image. A paragraph with an image.
A paragraph with an image. A paragraph with an image.
A paragraph with an image. A paragraph with an image.
</p>
<p>The image floats to the left of the text.</p>
</body>
</html>

Thanks

Anda mungkin juga menyukai