You are on page 1of 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.Syntax  Links. 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. link text: Defines the part to be displayed.HTML Links .  To create a hyperlink. and jump to another document. The syntax of the HTML links is: <a href="value"> link text </a> a: Anchor href: Hypertext Reference. web page file name in the same web site or location of where the link is pointing to. The value of the href attribute is the URL. or location of where the link is pointing to. value: URL. a text. or an image that you can click on. . you use the a tag in conjunction with the href attribute (href stands for Hypertext Reference). and also known as hyperlinks.

the page should jump to yahoo web site (www.yahoo. .com).yahoo.com">yahoo</a> site  The result is: Visit the yahoo site By clicking on the above link (yahoo).+ HTML Links (Hyperlinks)  Example HTML Code: Visit the <a href="http://www.

the page should jump to another web page called "second.html". .+ 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).

HTML Links . two things will normally happen:  The mouse arrow will turn into a little hand  The color of the link element will change By default.+ HTML Links (Hyperlinks) 2.Colors and Icons   When you move the mouse cursor over a link. 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} .

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

+ HTML Links (Hyperlinks)  This is the result: .

HTML Links .+ HTML Links (Hyperlinks) 3.com/" target="_blank">Visit W3Schools!</a> .w3schools.  This example will open the linked document in a new browser window or in a new tab: <a href="http://www.The target Attribute  The target attribute specifies where to open the linked document.

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

+ HTML Links (Hyperlinks)  This is the result: .

Created the name anchor first (where the user will end up) <a name="abc">abc</a> . One for the hyperlink (this is what the user will click on).+ HTML Links (Hyperlinks) 5. 1. You do this with named anchors. and one for the named anchor (this is where they will end up).Named Anchors  You can make your links "jump" to other sections within the same page. you need to create two pieces of code.  To use named anchors.

Then create the hyperlink (what the user will click on). You need to precede the name with a hash (#) symbol.+ HTML Links (Hyperlinks) 2. this page should jump up to the "abc" section. This is done by linking to the name of the named anchor. To go back click<a href="#abc">here</a>  The results is: When you click on the above link(here). To go back click here .

colon(:). period(.  Anchor names are case-sensitive.  The following symbols can be included in an anchor name.) name="anchor_name"  Anchor names must start in the alphabet. underscore(_). hyphen(-).+ HTML Links (Hyperlinks) Create a named anchor:  Anchor names must be unique within a document. 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="c3">chapter3</a></h3> <p>paragraph text ...</p> <h3><a name="c2">chapter2</a></h3> <p>paragraph text ..</p> <hr> <p><a href="#menu">Jump to Menu</a></p> </body> </html> ...

+ HTML Links (Hyperlinks) The result is: .

sa">Email</a>  The result is: To send email please click Email .  Example HTML Code: To send email please click <a href="mailto:mzalamri@ju. use the mailto attribute in your anchor tag. To do this.edu.Email Links  You can create a hyperlink to an email address.+ HTML Links (Hyperlinks) 6.

edu. .+ 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.sa).

google.com is a default URL for all links on the page.+ HTML Links (Hyperlinks) 7. You do this by placing the base tag (in conjunction with the href attribute) in the document's head.google.Base href  You can specify a default URL for all links on the page to start with.com"></head>  www. . See the following HTML Code: <head><base url="http://www.

specifying the actual location of the image. The syntax of HTML image is: <img src="image"> . the image first needs to exist in either . or .  Once you've created an image.most websites contain images. . you need to embed it into your web page. HTML makes it very easy for you to embed images into your web page. use the <img> tag.  To embed an image into a web page.jpg. You can create images in an image editor (such as Adobe Photoshop) and save them in the correct format.HTML Images Syntax  Images make up a large part of the web .png format. To embed the image into your web page.gif.+ HTML Images 1.

seldovia.com/wpcontent/uploads/2013/06/IMG_6656.+ HTML Images  The img tag has many attributes illustrated in the following example: <img src="http://www.jpg" width="100" height="100" alt="Smile" align="center" border="0"> .

This is the path to the image. Likewise. This specifies the height to display the image. If the actual image is wider.  Height: Optional attribute. it will shrink to the dimensions you specify here. 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.  Width: Optional attribute. This specifies the width to display the image. . This attribute works similar to the width.+ 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.

Align take the one of the values: left. If you don't want the border. This is default behavior for most browsers. or right.+ HTML Images  Alt: Alternate text. . specify border="0". This specifies text to be used in case the browser/user agent can't render the image. relative to the other content on the page (such as a paragraph of text).  Align: Determine how your images will be aligned.  Border: Created a border around the image. center.

 Vspace: Vertical space.+ HTML Images Another img tag attributes that doesn’t appear at the previous example are:  Hspace: Horizontal space. Specifies the white space on left and right side of an image in pixels. . Specifies the white space on top and bottom of an image in pixels.

58.height:126px"> <map name="planetmap"> <area shape="rect" coords="0.82.htm"> <area shape="circle" coords="90.htm"> <area shape="circle" coords="124.+ HTML Images 2-Image Maps  For an image.8" alt="Venus" href="venus.126" alt="Sun" href="sun.gif" alt="Planets" usemap="#planetmap" style="width:145 px.58.htm"> </map> . you can create an image map.3" alt="Mercury" href="mercur. with clickable areas: <img src="planets.0.

height:48px"> </body> </html> .com/albums/r543/saan2712/smile.photobucket.gif" alt=“smile" style="width:48px.+ 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.

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. A paragraph with an image. A paragraph with an image.height:42px"> A paragraph with an image. A paragraph with an image.+ HTML Images 4. A paragraph with an image.photobucket. A paragraph with an image.width:42px.</p> </body> </html> .com/albums/r543/saan2712/smile. </p> <p>The image floats to the left of the text.gif" alt="Smiley face" style="float:left.

+ Thanks .