A webpage can contain various links that take you directly to other pages and even specific parts of a given page , these links are known as hyperlinks . Hyperlinks allow visitors to navigate between Web sites by clicking on words, phrases, and images .
HTML link Syntax :
<a href="url">link text</a>
Example for HTML links :
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href="http://www. Computer-free-learning.blogspot.com" target="_self">HTML LEARN</a>
</body>
</html>
BASE PATH LINKS :
If you link HTML documents related to the same website, it is not required to give a complete URL for every link. You can get rid of it if you use tag in your HTML document header. This tag is used to give a base path for all the links.
Example for Base path links :
<!DOCTYPE html>
<html>
<head>
<title>Base Link Example</title>
<base href="http://www.computer-free-learning.blogspot.com/">
</head>
<body>
<p>Click following link</p>
<a href="/html/index.htm" target= "_blank">LEARN HTML</a>
</body>
</html>
TARGET ATTRIBUTE :
This attribute is used to specify the location where linked document is opened
AttributesDescription
_blank Opens the linked document in a new window or tab.
_self Opens the linked document in the same frame.
_parent Opens the linked document in the parent frame.
_top Opens the linked document in the full body of the window.
target frame Opens the linked document in a named frame.
Example for Attributes :
<!DOCTYPE html>
<html>
<head>
<title>Attributes Example</title>
<base href= "http://www. Computer-free-learning.blogspot.com/">
</head>
<body>
<p>Click the following links</p>
<a href="/html/index.htm" target= "_blank">Opens in New tab</a>
<a href="/html/index.htm" target= "_self">Opens in Self frame</a>
<a href="/html/index.htm" target= "_parent">Opens in Parent frame</a>
<a href="/html/index.htm" target= "_top">Opens in full Body</a>
</body>
</html>
HTML IMAGE LINK :
In HTML to use an image as hyperlink the image should be used inside hyperlink .
Example for Image link :
<!DOCTYPE html>
<html>
<head>
<title>Image link Example</title>
</head>
<body>
<p>Click following link</p>
<a href="http://www.Computer-free-learning.com" target="_self">
<img src="/images/logo.png" alt="LEARN HTML" border="0"/>
</a>
</body>
</html>
HTML FORMS
A form on a web page allows a user to enter data that is sent to a server for processing.
<!DOCTYPE html>
<html>
<head>
<style>
<!-- This is for Padded field --> input[type=text]
{ width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; } <!-- This is for Bordered Field --> input[type=text1]
{ width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: 4px solid steelblue; border-radius: 4px; }
<!-- This is for image Field --> input[type=text2] { width: 100%; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; font-size: 16px; background-color: white; background-image: url ('sicon.png'); background-position: 10px 10px; background-repeat: no-repeat; padding: 12px 20px 12px 40px; }
<!-- This is for Animated Field --> input[type=text3] { width: 130px; box-sizing: border-box; border: 3px solid steelblue; border-radius: 4px; font-size: 16px; background-color: white; background-image: url('sicon.png'); background-position: 10px 10px; background-repeat: no-repeat; padding: 12px 20px 12px 40px; -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out; } input[type=text3]:focus { width: 60%; }
</style>
</head>
<body>
<h3>PaddedText fields:</h3>
<form>
<label for="fname">First Name </label> <input type="text" id="fname" name="fname">
<label for="fname">Last Name</label> <input type="text" id="lname" name="lname">
</form> <h3> Bordered Text Fields</h3> <form>
<label for="fname">First Name</label> <input type="text1" id="fname" name="fname">
<label for="lname">Last Name</label> <input type="text1" id="lname" name="lname">
</form> <h3>Text Fields with icon/image </h3>
<form>
<input type="text2" name="search" placeholder="Search..">
</form>
<h3> Animated Text Field </h3>
<form>
<input type="text3" name="search" placeholder="Search..">
</form>
</body>
</html>
HTML IMAGES :
There are images in every website now days it increases the visual look of the website , we will see how to use images in HTML .
Image Syntax :
<img src="url" alt="some_text">
1. In HTML, images are defined with the <img> tag.
2. The src attribute defines the url (location) of the image.
3. The alt attribute specifies an alternate text for an image, if the image cannot be displayed.
HTML image Example :
<!DOCTYPE html> <html> <body> <h2>PICTURES OF PENGUINS</h2> <img src="penguins.jpg" alt="Penguins"> </body> </html>
Result for above Example :
IMAGE HEIGHT & WIDTH :
In HTML , image width and height can be modified based on the requirement using width and height attributes.
Example for Image Height & Width
<!DOCTYPE html>
<html>
<head>
<title>Set Image Width and Height </title>
</head>
<body>
<p>Setting image width & height</p> <img src="test.png" alt="TestImage" width="200" height="100">
</body>
</html>
SET IMAGE LOCATION :
By default, the browser expects to find the image in the same folder as the web page , if images is stored in a sub-folder it should be referred to that particular folder.
Example for Image location :
Assuming the image location is in "pic lion.png"
<!DOCTYPE html>
<html>
<head>
<title>IMAGE LOCATION</title>
</head>
<body>
<p>IMAGE LOCATION</p>
<img src="pic/lion.png" alt="LION" >
</body>
</html>
IMAGE ALIGNMENT
By default image will align at the left side of the page, but by using align attribute it can be set in the center or right.
Example for Image Alignment :
<!DOCTYPE html>
<html>
<head>
<title>Image Alignment</title>
</head>
<body>
<p>Setting image Alignment</p>
<img src="testimage.png" alt="ImageAlignment" align="right">
</body>
</html>
To be continue NEXT POST...
Thanks for reading.
Comments