This slide shows how any text or image can be hyperlinked using HTML. Also, use of <img> to insert image in web pages using HTML.
1 of 8
Download to read offline
More Related Content
What is HTML Hyperlinks and HTML Images?
1. HTML HYPERLINK
<a>......</a>
HTML IMAGES
<img src=/slideshow/what-is-html-hyperlinks-and-html-images/267344220/image.jpg">
Class: FY B. Tech Structural Engineering
Subject: IT for Engineers Prof. Jape Anuja Sanjay
Assistant Professor,
Department of Structural Engineering,
Sanjivani College of Engineering. Kopargaon
Email: japeanujast@sanjivani.org.in
2. HTML Links - Hyperlinks
HTML links are hyperlinks.
You can click on a link and jump to another
document/link/page.
When you move the mouse over a link, the
mouse arrow will turn into a little hand.
A link does not have to be text. A link can be an
image or any other HTML element.
The HTML <a> tag defines a hyperlink. It has the
following syntax
<a href=/slideshow/what-is-html-hyperlinks-and-html-images/267344220/"url">link text</a>
Ref:https://www.w3schools.com/
3. HTML Links - The target Attribute
By default, the linked page will be displayed in the
current browser window. To change this, you must
specify another target for the link.
The target attribute specifies where to open the linked
document.
The target attribute can have one of the following
values:
_self - Default. Opens the document in the same
window/tab as it was clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window
Ref:https://www.w3schools.com/
4. HTML Links - Use an Image as a Link
To use an image as a link, just put the <img> tag
inside the <a> tag:
<a href=url"> <img src=/slideshow/what-is-html-hyperlinks-and-html-images/267344220/img.jpg" alt=alternate text
style="width:32px;height:32px;"> </a>
Ref:https://www.w3schools.com/
5. Link to an Email Address
<p>
<a href="mailto:someone@example.com">Send email</a>
</p>
Button as a Link
To use an HTML button as a link, you have to add some
JavaScript code.
JavaScript allows you to specify what happens at
certain events, such as a click of a button.
<button onclick="document.location='default.asp'">HTML
Tutorial</button> Ref:https://www.w3schools.com/
6. Link Titles
The title attribute specifies extra information about an
element. The information is most often shown as a tooltip
text when the mouse moves over the element.
<a href=/slideshow/what-is-html-hyperlinks-and-html-images/267344220/"url" title="hello">Visit our Page</a>
Ref:https://www.w3schools.com/
7. HTML Images
Images can improve the design and the appearance of a web
page.
The HTML <img> tag is used to embed an image in a web page.
Images are not technically inserted into a web page; images
are linked to web pages. The <img> tag creates a holding space
for the referenced image.
The <img> tag is empty, it contains attributes only, and does not
have a closing tag.
The <img> tag has two required attributes:
src - Specifies the path to the image
alt - Specifies an alternate text for the image
<img src=/slideshow/what-is-html-hyperlinks-and-html-images/267344220/"url" alt="alternatetext">
Ref:https://www.w3schools.com/
8. Use the HTML <img> element to define an image
Use the HTML src attribute to define the URL of the image
Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed
Use the HTML width and height attributes or the CSS width and height properties to define the size
of the image
Use the CSS float property to let the image float to the left or to the right
Ref:https://www.w3schools.com/