informatics computer school cs114 web publishing html lesson 2
TRANSCRIPT
Informatics Computer SchoolCS114 Web Publishing
HTML Lesson 2
2
Lesson Outline
Introduction to hyperlinksUsing different types of hyperlinksIntroduction to imagesFormatting imagesSample codes
3
Introduction to hyperlinks
•Hyperlink
•A method that allows one to link to another document, file, location or another section from anywhere.
•A very useful and easy to use feature.
•Hyperlinks are written using <A HREF> and </A> tags.
•The text that are placed within the tags are the hyperlinks. If an user were to click on it, hyperlink will be activated.
•One can place text or image as the hyperlink.
4
Basic Outline of an hyperlink code
<BODY>
<A HREF> Click me! </A>
</BODY>
Legend:
A - Anchor
HREF - Hyperlink Reference
Note: this code would not work as we have not specified where to link to if the user clicked on the the text ‘Click me!’.
5
Basic Tags
<A> It informs that, the particular message is a hyperlink and an anchor (hand symbol) should be displayed. It should be closed with a </A> symbol.
<HREF> The Hyperlink Reference instruction. It informs whether the link is to another page, location or some document.
<HTTP> The protocol that must be used if one were to link to an external website.
6
<MAILTO> The protocol that must be used if one were to link to an email client.
<FILE> The protocol that must be used if were to open a document on a browser.
<NAME> The protocol that must be used if one were to link to another section on the same page.
7
Sample Codes for hyperlinks
Code 1 (To link to another page one same site)
<BODY>
<A HREF=“main_page.htm”> Click here </A> to go to main page!
</BODY>
This would work if the main_page.htm is in the same folder as this page. If not, then you will have to write the full path of the file name. e.g.“project/htmlfiles/main_page.htm”
8
Code 2 (To link to an external website)
<BODY>
<A HREF=“http:www.yahoo.com”>Click to go to Yahoo!</A>
<br>
<A HREF=“http:www.msn.com”>Click to go to MSN! </A>
</BODY>
9
Code 3 (To link to an email client)
<BODY>
<A HREF=“mailto:[email protected]”>Send me a mail </A>
</BODY>
Note: This code will actually allow the browser to launch an email client (for example Microsoft Outlook) on the system and place the above email address on the To bar.
10
Code 4 (To link to an email client)
<BODY>
<A HREF=“file:myfiles/wordfiles/information.doc”> Click here to open my Information page as a Word document </A>
</BODY>
11
Code 5 (To link to another section on the same page)
<BODY>
<A HREF=“#section_1”>Click to go to section 1</A>
{ place other information here…}
<A NAME=“section_1”>This </A> is section 1.
</BODY>
Note: This codes will work if the html page is rather long. The codes must be written in a pair of <A HREF> and <A NAME> tags. The <A NAME> tag is to identify a particular location on that page. The <A HREF> is to link to that particular location.
12
Basic Tags for Images
<IMG SRC> Image Source- specifies where the file is located.
<BORDER> Specifies the thickness of the border surrounding the image.
<HEIGHT> Specifies the height of the image in pixels.
<WIDTH> Specifies the width of the image in pixels.
<ALT> Allows one to display the alternate text of some image. Useful when the browser has difficulties in displaying the image as then this alternate text will be displayed.
13
Basic Tags for Images
<VSPACE> Specifies in pixels the size of the vertical space surrounding the image.
<HSPACE> Specifies in pixels the size of the horizontal space surrounding the image.
<VALIGN> Specifies how the text surrounding the image will be displayed. The different attributes are Top, Bottom and Middle.
14
Sample Codes for Images
Code 1
<BODY>
<IMG SRC=“mypictures/images/ball1.gif”>
</BODY>
Note:
A simple code to display an image. The full path of the location must be keyed in if the image is in a different folder.
15
Code 2
<BODY> <IMG SRC=“mypic.jpg” BORDER=2 ALT=“a pic of myself -you can download for free”>
</BODY>
Note:A code to display an image with a border thickness
of 2 and also specify the alternate text. The alternate text will be displayed if the image could not be displayed or the user brings his mouse over the image.
16
Code 3
<BODY> <IMG SRC=“mypic.jpg” HEIGHT=200 WIDTH=200>
<IMG SRC=“mypic.jpg” VALIGN=“top”> This text will be displayed at the top level of the image.
<IMG SRC=“mypic.jpg” VALIGN=“middle”> This text will be displayed at the middle level of the image.
<IMG SRC=“mypic.jpg” VALIGN=“bottom”> This text will be displayed at the bottom level of the image.
</BODY>
17
Code 4
<BODY>
<IMG SRC=“mypic.jpg” VSPACE=10 HSPACE=10> An image with a horizontal space of 10 pixels and a vertical space of 10 pixels.
</BODY>
18
Code 5 (To place an image as the hyperlink)
<BODY>
<A HREF=“http:www.yahoo.com”> <IMG SRC=“yahoopic.gif”> </A>
</BODY>
Note:A simple piece of code that allows the use of an image
as a hyperlink. When a mouse is brought over the image, the cursor symbol will change into an anchor.The other attributes of the image could also be used and some text may also be added to allow better readability.