SlideShare a Scribd company logo
1 of 6
HTML Images
Dr. Baker Abdalahq
The Image Tag and the Src
Attribute
 In HTML, images are defined with
the <img> tag.
 The <img> tag is empty, which
means that it contains attributes only
and it has no closing tag.
 To display an image on a page, you
need to use the src attribute. Src
stands for "source". The value of the
src attribute is the URL of the image
you want to display on your page.
 The syntax of defining an image:
 <img src="url"> The URL points to the
location where the image is stored. An
image named "boat.gif" located in the
directory "images" on
"www.w3schools.com" has the URL:
http://www.w3schools.com/images/boat.gif.
 The browser puts the image where the
image tag occurs in the document. If you
put an image tag between two paragraphs,
the browser shows the first paragraph, then
the image, and then the second paragraph.
The Alt Attribute
 The alt attribute is used to
define an "alternate text" for an
image. The value of the alt
attribute is an author-defined
text:
 <img src="boat.gif" alt="Big Boat">
The "alt" attribute tells the reader
what he or she is missing on a page
if the browser can't load images. The
browser will then display the
alternate text instead of the image. It
is a good practice to include the "alt"
attribute for each image on a page,
to improve the display and
usefulness of your document for
people who have text-only browsers.
Basic Notes - Useful Tips
 If an HTML file contains ten
images - eleven files are
required to display the page
right. Loading images take time,
so my best advice is: Use
images carefully.

More Related Content

Similar to HTML_Images.ppt

Maryam Ahmed 10x10
Maryam Ahmed 10x10Maryam Ahmed 10x10
Maryam Ahmed 10x10Maryam Ahmed
 
S3 HTML Hyperlinks and Images
S3 HTML Hyperlinks and ImagesS3 HTML Hyperlinks and Images
S3 HTML Hyperlinks and ImagesSabahtHussein
 
CHAPTER 2_ Get Started with HTML Module
CHAPTER 2_  Get Started with HTML ModuleCHAPTER 2_  Get Started with HTML Module
CHAPTER 2_ Get Started with HTML Modulessusera4f8281
 
What is HTML Hyperlinks and HTML Images?
What is HTML Hyperlinks and HTML Images?What is HTML Hyperlinks and HTML Images?
What is HTML Hyperlinks and HTML Images?AnujaJape2
 
2.1 adding images
2.1 adding images2.1 adding images
2.1 adding imagesBulldogs83
 
More on HTML Communication Skills BASICS
More on HTML Communication Skills BASICSMore on HTML Communication Skills BASICS
More on HTML Communication Skills BASICSGraceChokoli1
 
Andy Garcia- Presentation:IMG
Andy Garcia- Presentation:IMGAndy Garcia- Presentation:IMG
Andy Garcia- Presentation:IMGAndi Garushia
 
ACTC 2013 Website Building Notes
ACTC 2013 Website Building NotesACTC 2013 Website Building Notes
ACTC 2013 Website Building NotesJohn Bentley, II
 
BVK_PTT_HTML-Unit - III (1).pptx
BVK_PTT_HTML-Unit - III (1).pptxBVK_PTT_HTML-Unit - III (1).pptx
BVK_PTT_HTML-Unit - III (1).pptxpanoosha2
 
Web Development 3 (HTML & CSS)
Web Development 3  (HTML & CSS)Web Development 3  (HTML & CSS)
Web Development 3 (HTML & CSS)ghayour abbas
 

Similar to HTML_Images.ppt (20)

Web htmlt2
Web   htmlt2Web   htmlt2
Web htmlt2
 
Maryam Ahmed 10x10
Maryam Ahmed 10x10Maryam Ahmed 10x10
Maryam Ahmed 10x10
 
S3 HTML Hyperlinks and Images
S3 HTML Hyperlinks and ImagesS3 HTML Hyperlinks and Images
S3 HTML Hyperlinks and Images
 
Linking
LinkingLinking
Linking
 
CHAPTER 2_ Get Started with HTML Module
CHAPTER 2_  Get Started with HTML ModuleCHAPTER 2_  Get Started with HTML Module
CHAPTER 2_ Get Started with HTML Module
 
lecture4.ppt
lecture4.pptlecture4.ppt
lecture4.ppt
 
Hw web
Hw webHw web
Hw web
 
What is HTML Hyperlinks and HTML Images?
What is HTML Hyperlinks and HTML Images?What is HTML Hyperlinks and HTML Images?
What is HTML Hyperlinks and HTML Images?
 
2.1 adding images
2.1 adding images2.1 adding images
2.1 adding images
 
2. html attributes
2. html attributes2. html attributes
2. html attributes
 
HTML Images
HTML Images HTML Images
HTML Images
 
More on HTML Communication Skills BASICS
More on HTML Communication Skills BASICSMore on HTML Communication Skills BASICS
More on HTML Communication Skills BASICS
 
Chapter 2.pdf
Chapter 2.pdfChapter 2.pdf
Chapter 2.pdf
 
css.pptx
css.pptxcss.pptx
css.pptx
 
Andy Garcia- Presentation:IMG
Andy Garcia- Presentation:IMGAndy Garcia- Presentation:IMG
Andy Garcia- Presentation:IMG
 
ACTC 2013 Website Building Notes
ACTC 2013 Website Building NotesACTC 2013 Website Building Notes
ACTC 2013 Website Building Notes
 
BVK_PTT_HTML-Unit - III (1).pptx
BVK_PTT_HTML-Unit - III (1).pptxBVK_PTT_HTML-Unit - III (1).pptx
BVK_PTT_HTML-Unit - III (1).pptx
 
Unit 2.7 Images
Unit 2.7 ImagesUnit 2.7 Images
Unit 2.7 Images
 
Web Development 3 (HTML & CSS)
Web Development 3  (HTML & CSS)Web Development 3  (HTML & CSS)
Web Development 3 (HTML & CSS)
 
Html 5
Html   5Html   5
Html 5
 

Recently uploaded

Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024The Digital Insurer
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilV3cube
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesSinan KOZAK
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Paola De la Torre
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEarley Information Science
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxKatpro Technologies
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC
 

Recently uploaded (20)

Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 

HTML_Images.ppt

  • 2. The Image Tag and the Src Attribute  In HTML, images are defined with the <img> tag.  The <img> tag is empty, which means that it contains attributes only and it has no closing tag.  To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display on your page.
  • 3.  The syntax of defining an image:  <img src="url"> The URL points to the location where the image is stored. An image named "boat.gif" located in the directory "images" on "www.w3schools.com" has the URL: http://www.w3schools.com/images/boat.gif.  The browser puts the image where the image tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.
  • 4. The Alt Attribute  The alt attribute is used to define an "alternate text" for an image. The value of the alt attribute is an author-defined text:
  • 5.  <img src="boat.gif" alt="Big Boat"> The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load images. The browser will then display the alternate text instead of the image. It is a good practice to include the "alt" attribute for each image on a page, to improve the display and usefulness of your document for people who have text-only browsers.
  • 6. Basic Notes - Useful Tips  If an HTML file contains ten images - eleven files are required to display the page right. Loading images take time, so my best advice is: Use images carefully.