HTML 06
- chathu hewage
- Feb 12, 2021
- 2 min read
Images and Links
In this tutorial you can study;
How to add images to your web page.
How to place and resize images in your web page.
How to create link in your web page.
Define link types.
Images
<IMG> This element defines image on our web page. <img> tag does not have a closing tag.
Image File (SRC: Source); This value will be a URL/Image path or Image name with extension.
"G:\2nd Year 1st Sem\CIT211\images\Uni_images\picture4.jpg“/“picture2.jpg“
Alternate Text (ALT): This is a text that describes an image or acts as a label. It is displayed when they position the cursor over a image.
When we add a image to our web page we can use as following tag;
<html>
<head>
<TITLE>Insert Images</TITLE>
</HEAD>
<BODY>
<img src="picture4.jpg“ alt=“first image”>
</BODY>
</HTML>
How to place and resize a image
Alignment(Align): This element can align the image on our web page.
align=“center” We can choose any position like left, right, center…
Width : This element is the width of the image in pixels.
Height: This element is the height of the image in pixels.
width=“100px” height=“100px”
Border: This element is for a border around the image in pixel.
HSPACE: This element is for Horizontal Space on both sides of the image in pixels.
VSPACE: This element is for Vertical space on bottom and top of image in pixels.
Try to resize and place images as following codes
<html>
<head>
<title>Insert Images</title>
</head>
<body>
<h1>Sabaragamuwa University</h1> <br>
<img src="picture1.jpg" width="200px" height="200px">
<img src="picture2.jpg" width="200px" height="200px" border="15px" hspace="50px" vspace="50px">
<img src="picture3.jpg" width="200px" height="200px" align="center">
</body>
</html>
Linking
How to create a link
<A> This tag is used to create link. </A> This is closing tag.
<a href=URL/ file or another document address( “https://www.sab.ac.lk/”)>
link text you want</a>Href: This attribute used to define a file, web page or another document address
Type of links
Anactive link: This type of link appears Underline and red color ( https://www.sab.ac.lk/ )
A visited link: This type of link appears Underline and purple color(https://www.sab.ac.lk/)
An unvisited link: This type of link appears Underline and blue color( https://www.sab.ac.lk/ )
Try to create link and try the following codes.
<html>
<head>
<TITLE>Insert Images</TITLE>
</head>
<body>
<h1>Sabaragamuwa University</h1> <br>
<img src="picture4.jpg" width="200px" height="200px" border="5px"hspace="20px">
<img src="picture5.jpg" width="200px" height="200px" border="5px" hspace="20px">
<img src="picture6.jpg" width="200px" height="200px" border="5px">
Click <a href="https://www.sab.ac.lk/"> here </a> to visit Sabaragamuwa University
</body>
</html>
Tutorial Created by Navodya Heshani
Comments