SlideShare a Scribd company logo
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

PPTX
Html images syntax
PPTX
Html images
PPTX
HTML Attributes.pptx
PPTX
HTML Images & Hyperlinks Presentation ..
PPTX
HTML Attributes.pptx
PPTX
Imagetag
PPTX
Std 10 Computer Chapter 3 Handling Images in HTML (Part 1)
PPTX
HTML Link - Image - Comments
Html images syntax
Html images
HTML Attributes.pptx
HTML Images & Hyperlinks Presentation ..
HTML Attributes.pptx
Imagetag
Std 10 Computer Chapter 3 Handling Images in HTML (Part 1)
HTML Link - Image - Comments

Similar to HTML_Images.ppt (20)

PPTX
CAP 756 UNIT 1.pptx
PPTX
Web htmlt2
PDF
Maryam Ahmed 10x10
PPTX
S3 HTML Hyperlinks and Images
PPT
Linking
PPTX
CHAPTER 2_ Get Started with HTML Module
PPT
lecture4.ppt
PDF
Talk about link tag and image tag ppt.pdf
PPT
Hw web
PDF
What is HTML Hyperlinks and HTML Images?
PDF
WEB PROGRAMMING -bharathiar unversity unit 3
PPT
2.1 adding images
PPT
2. html attributes
PPTX
HTML Images
PPTX
More on HTML Communication Skills BASICS
PDF
Chapter 2.pdf
PPTX
css.pptx
PPTX
Andy Garcia- Presentation:IMG
PDF
ACTC 2013 Website Building Notes
PPTX
BVK_PTT_HTML-Unit - III (1).pptx
CAP 756 UNIT 1.pptx
Web htmlt2
Maryam Ahmed 10x10
S3 HTML Hyperlinks and Images
Linking
CHAPTER 2_ Get Started with HTML Module
lecture4.ppt
Talk about link tag and image tag ppt.pdf
Hw web
What is HTML Hyperlinks and HTML Images?
WEB PROGRAMMING -bharathiar unversity unit 3
2.1 adding images
2. html attributes
HTML Images
More on HTML Communication Skills BASICS
Chapter 2.pdf
css.pptx
Andy Garcia- Presentation:IMG
ACTC 2013 Website Building Notes
BVK_PTT_HTML-Unit - III (1).pptx
Ad

Recently uploaded (20)

PDF
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
PPTX
Group 1 Presentation -Planning and Decision Making .pptx
PDF
Empathic Computing: Creating Shared Understanding
PDF
Machine learning based COVID-19 study performance prediction
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
PDF
Dropbox Q2 2025 Financial Results & Investor Presentation
PPTX
SOPHOS-XG Firewall Administrator PPT.pptx
PPTX
Programs and apps: productivity, graphics, security and other tools
PPT
“AI and Expert System Decision Support & Business Intelligence Systems”
PPTX
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
PDF
Spectral efficient network and resource selection model in 5G networks
PDF
Electronic commerce courselecture one. Pdf
PDF
Approach and Philosophy of On baking technology
PDF
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
PDF
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
PDF
Encapsulation_ Review paper, used for researhc scholars
PDF
A comparative analysis of optical character recognition models for extracting...
PPTX
Spectroscopy.pptx food analysis technology
PDF
Diabetes mellitus diagnosis method based random forest with bat algorithm
PDF
Agricultural_Statistics_at_a_Glance_2022_0.pdf
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
Group 1 Presentation -Planning and Decision Making .pptx
Empathic Computing: Creating Shared Understanding
Machine learning based COVID-19 study performance prediction
Advanced methodologies resolving dimensionality complications for autism neur...
Dropbox Q2 2025 Financial Results & Investor Presentation
SOPHOS-XG Firewall Administrator PPT.pptx
Programs and apps: productivity, graphics, security and other tools
“AI and Expert System Decision Support & Business Intelligence Systems”
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
Spectral efficient network and resource selection model in 5G networks
Electronic commerce courselecture one. Pdf
Approach and Philosophy of On baking technology
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
Encapsulation_ Review paper, used for researhc scholars
A comparative analysis of optical character recognition models for extracting...
Spectroscopy.pptx food analysis technology
Diabetes mellitus diagnosis method based random forest with bat algorithm
Agricultural_Statistics_at_a_Glance_2022_0.pdf
Ad

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.