SlideShare une entreprise Scribd logo
1  sur  8
Télécharger pour lire hors ligne
HTML HYPERLINK
<a>......</a>
HTML IMAGES
<img src=“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
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="url">link text</a>
Ref:https://www.w3schools.com/
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/
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=“img.jpg" alt=“alternate text”
style="width:32px;height:32px;"> </a>
Ref:https://www.w3schools.com/
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/
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="url" title="hello">Visit our Page</a>
Ref:https://www.w3schools.com/
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="url" alt="alternatetext">
Ref:https://www.w3schools.com/
•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/

Contenu connexe

Similaire à What is HTML Hyperlinks and HTML Images?

Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
ZahouAmel1
 

Similaire à What is HTML Hyperlinks and HTML Images? (20)

BASIC HTML
BASIC HTMLBASIC HTML
BASIC HTML
 
html
htmlhtml
html
 
HTML : INTRODUCTION TO WEB DESIGN Presentation
HTML : INTRODUCTION TO WEB DESIGN PresentationHTML : INTRODUCTION TO WEB DESIGN Presentation
HTML : INTRODUCTION TO WEB DESIGN Presentation
 
HTML introduction for beginners Slides .pptx
HTML introduction for beginners Slides .pptxHTML introduction for beginners Slides .pptx
HTML introduction for beginners Slides .pptx
 
Web forms and html (lect 2)
Web forms and html (lect 2)Web forms and html (lect 2)
Web forms and html (lect 2)
 
gdsc-html-ppt.pptx
gdsc-html-ppt.pptxgdsc-html-ppt.pptx
gdsc-html-ppt.pptx
 
Week 6 Lecture
Week 6 LectureWeek 6 Lecture
Week 6 Lecture
 
Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
 
Web Development 3 (HTML & CSS)
Web Development 3  (HTML & CSS)Web Development 3  (HTML & CSS)
Web Development 3 (HTML & CSS)
 
HTML Attributes.pptx
HTML Attributes.pptxHTML Attributes.pptx
HTML Attributes.pptx
 
Chapter 2.pdf
Chapter 2.pdfChapter 2.pdf
Chapter 2.pdf
 
Html for beginners part II
Html for beginners part IIHtml for beginners part II
Html for beginners part II
 
Introduction to HTML.pptx
Introduction to HTML.pptxIntroduction to HTML.pptx
Introduction to HTML.pptx
 
Blog creationguide forestview
Blog creationguide forestviewBlog creationguide forestview
Blog creationguide forestview
 
Images and Lists in HTML
Images and Lists in HTMLImages and Lists in HTML
Images and Lists in HTML
 
Understanding the Web Page Layout
Understanding the Web Page LayoutUnderstanding the Web Page Layout
Understanding the Web Page Layout
 
MTA html5 text_graphics_media
MTA html5 text_graphics_mediaMTA html5 text_graphics_media
MTA html5 text_graphics_media
 
LS2.1_V1_HTML.pptx
LS2.1_V1_HTML.pptxLS2.1_V1_HTML.pptx
LS2.1_V1_HTML.pptx
 
2_Meta_Images_Link.ppt
2_Meta_Images_Link.ppt2_Meta_Images_Link.ppt
2_Meta_Images_Link.ppt
 
SEO Training in Mahabubnagar
SEO Training in MahabubnagarSEO Training in Mahabubnagar
SEO Training in Mahabubnagar
 

Plus de AnujaJape2 (6)

How to add table using HTML? HTML table styles.
How to add table using HTML? HTML table styles.How to add table using HTML? HTML table styles.
How to add table using HTML? HTML table styles.
 
3 HTML attributes, style,format,quo,cit.pdf
3 HTML attributes, style,format,quo,cit.pdf3 HTML attributes, style,format,quo,cit.pdf
3 HTML attributes, style,format,quo,cit.pdf
 
HTML? What is Hyper Text Mark Up Language
HTML? What is Hyper Text Mark Up  LanguageHTML? What is Hyper Text Mark Up  Language
HTML? What is Hyper Text Mark Up Language
 
CEM_Unit-I_Lecture Notes.pdf
CEM_Unit-I_Lecture Notes.pdfCEM_Unit-I_Lecture Notes.pdf
CEM_Unit-I_Lecture Notes.pdf
 
CEM_Unit-II_Lecture Notes.pdf
CEM_Unit-II_Lecture Notes.pdfCEM_Unit-II_Lecture Notes.pdf
CEM_Unit-II_Lecture Notes.pdf
 
Brick information.pptx
Brick information.pptxBrick information.pptx
Brick information.pptx
 

Dernier

Performance enhancement of machine learning algorithm for breast cancer diagn...
Performance enhancement of machine learning algorithm for breast cancer diagn...Performance enhancement of machine learning algorithm for breast cancer diagn...
Performance enhancement of machine learning algorithm for breast cancer diagn...
IJECEIAES
 
electrical installation and maintenance.
electrical installation and maintenance.electrical installation and maintenance.
electrical installation and maintenance.
benjamincojr
 
ALCOHOL PRODUCTION- Beer Brewing Process.pdf
ALCOHOL PRODUCTION- Beer Brewing Process.pdfALCOHOL PRODUCTION- Beer Brewing Process.pdf
ALCOHOL PRODUCTION- Beer Brewing Process.pdf
Madan Karki
 

Dernier (20)

Raashid final report on Embedded Systems
Raashid final report on Embedded SystemsRaashid final report on Embedded Systems
Raashid final report on Embedded Systems
 
Linux Systems Programming: Semaphores, Shared Memory, and Message Queues
Linux Systems Programming: Semaphores, Shared Memory, and Message QueuesLinux Systems Programming: Semaphores, Shared Memory, and Message Queues
Linux Systems Programming: Semaphores, Shared Memory, and Message Queues
 
"United Nations Park" Site Visit Report.
"United Nations Park" Site  Visit Report."United Nations Park" Site  Visit Report.
"United Nations Park" Site Visit Report.
 
SLIDESHARE PPT-DECISION MAKING METHODS.pptx
SLIDESHARE PPT-DECISION MAKING METHODS.pptxSLIDESHARE PPT-DECISION MAKING METHODS.pptx
SLIDESHARE PPT-DECISION MAKING METHODS.pptx
 
Performance enhancement of machine learning algorithm for breast cancer diagn...
Performance enhancement of machine learning algorithm for breast cancer diagn...Performance enhancement of machine learning algorithm for breast cancer diagn...
Performance enhancement of machine learning algorithm for breast cancer diagn...
 
handbook on reinforce concrete and detailing
handbook on reinforce concrete and detailinghandbook on reinforce concrete and detailing
handbook on reinforce concrete and detailing
 
NO1 Best Powerful Vashikaran Specialist Baba Vashikaran Specialist For Love V...
NO1 Best Powerful Vashikaran Specialist Baba Vashikaran Specialist For Love V...NO1 Best Powerful Vashikaran Specialist Baba Vashikaran Specialist For Love V...
NO1 Best Powerful Vashikaran Specialist Baba Vashikaran Specialist For Love V...
 
Autodesk Construction Cloud (Autodesk Build).pptx
Autodesk Construction Cloud (Autodesk Build).pptxAutodesk Construction Cloud (Autodesk Build).pptx
Autodesk Construction Cloud (Autodesk Build).pptx
 
Worksharing and 3D Modeling with Revit.pptx
Worksharing and 3D Modeling with Revit.pptxWorksharing and 3D Modeling with Revit.pptx
Worksharing and 3D Modeling with Revit.pptx
 
Dynamo Scripts for Task IDs and Space Naming.pptx
Dynamo Scripts for Task IDs and Space Naming.pptxDynamo Scripts for Task IDs and Space Naming.pptx
Dynamo Scripts for Task IDs and Space Naming.pptx
 
analog-vs-digital-communication (concept of analog and digital).pptx
analog-vs-digital-communication (concept of analog and digital).pptxanalog-vs-digital-communication (concept of analog and digital).pptx
analog-vs-digital-communication (concept of analog and digital).pptx
 
Augmented Reality (AR) with Augin Software.pptx
Augmented Reality (AR) with Augin Software.pptxAugmented Reality (AR) with Augin Software.pptx
Augmented Reality (AR) with Augin Software.pptx
 
Piping and instrumentation diagram p.pdf
Piping and instrumentation diagram p.pdfPiping and instrumentation diagram p.pdf
Piping and instrumentation diagram p.pdf
 
Diploma Engineering Drawing Qp-2024 Ece .pdf
Diploma Engineering Drawing Qp-2024 Ece .pdfDiploma Engineering Drawing Qp-2024 Ece .pdf
Diploma Engineering Drawing Qp-2024 Ece .pdf
 
Software Engineering Practical File Front Pages.pdf
Software Engineering Practical File Front Pages.pdfSoftware Engineering Practical File Front Pages.pdf
Software Engineering Practical File Front Pages.pdf
 
UNIT 4 PTRP final Convergence in probability.pptx
UNIT 4 PTRP final Convergence in probability.pptxUNIT 4 PTRP final Convergence in probability.pptx
UNIT 4 PTRP final Convergence in probability.pptx
 
electrical installation and maintenance.
electrical installation and maintenance.electrical installation and maintenance.
electrical installation and maintenance.
 
ALCOHOL PRODUCTION- Beer Brewing Process.pdf
ALCOHOL PRODUCTION- Beer Brewing Process.pdfALCOHOL PRODUCTION- Beer Brewing Process.pdf
ALCOHOL PRODUCTION- Beer Brewing Process.pdf
 
21scheme vtu syllabus of visveraya technological university
21scheme vtu syllabus of visveraya technological university21scheme vtu syllabus of visveraya technological university
21scheme vtu syllabus of visveraya technological university
 
Lab Manual Arduino UNO Microcontrollar.docx
Lab Manual Arduino UNO Microcontrollar.docxLab Manual Arduino UNO Microcontrollar.docx
Lab Manual Arduino UNO Microcontrollar.docx
 

What is HTML Hyperlinks and HTML Images?

  • 1. HTML HYPERLINK <a>......</a> HTML IMAGES <img src=“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="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=“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="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="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/