SlideShare a Scribd company logo
1 of 6
Adding Images
XHTML <img> Element <img  src= &quot;mypic.jpg&quot;  alt= &quot;my text&quot;  /> Element Attribute Attribute Value Closing tag  Attribute Attribute Value The  src  attribute supplies the name and location of the image file you wish to display.  If no path is specified, the browser will expect the file to be in the same folder as the web page. The  alt  attribute determines what text will display in the web page if the image is not available.  This is also what screen readers (for the visually impaired) will use. Get in the habit of naming image files in all lowercase letters and use underscores or dashes instead of spaces.
<img> height and width attributes <img  src= &quot;sunset.jpg&quot;   height= &quot;600&quot;   width= &quot;800&quot;   alt= &quot;A beautiful sunset&quot;  /> By specifying the  height  and  width  attributes of an image, we help the browser display the image correctly on the page. We can use these attributes to make a large image appear smaller on the page.  We can also make a smaller image appear larger on the page, but this is not recommended, as the image will look pixelated and of poor quality. When making a large image appear smaller on the page, be sure to keep the same ratio of height to width.  If you don't, the resulting image will look &quot;squished&quot; when it displays on the page.
Determining the Height and Width: By viewing the properties of an image file in Windows, you can see what the width and height are.
Resizing the Height and Width: <img  src= &quot;sunset.jpg&quot;   height= &quot;300&quot;   width= &quot;400&quot;   alt= &quot;A beautiful sunset&quot;  /> By dividing the height and width evenly, we can resize an image on our web page.
Image Formats for the Web: ,[object Object],Supports transparency: Supports animation: Color support: jpg png gif Excellent Excellent Limited       Best suited for: Image Extension: Photographs Logos, Icons Animations

More Related Content

Viewers also liked

HES manā ciematā
HES manā ciematāHES manā ciematā
HES manā ciematā
Eva Vovka
 
[Gmic]nale be cubbying
[Gmic]nale be cubbying[Gmic]nale be cubbying
[Gmic]nale be cubbying
Hyoin Sung
 
Pmk no. 1796 ttg registrasi tenaga kesehatan
Pmk no. 1796 ttg registrasi tenaga kesehatanPmk no. 1796 ttg registrasi tenaga kesehatan
Pmk no. 1796 ttg registrasi tenaga kesehatan
Yulia Wibowo
 
6 kretska i mikenska umjetnost
6 kretska i mikenska umjetnost6 kretska i mikenska umjetnost
6 kretska i mikenska umjetnost
atk2409
 
Chachies del boske nuboso
Chachies del boske nubosoChachies del boske nuboso
Chachies del boske nuboso
kuckling2010
 
7.1 xhtml validation
7.1 xhtml validation7.1 xhtml validation
7.1 xhtml validation
Bulldogs83
 
Samarbeidsoppgave gr5
Samarbeidsoppgave gr5Samarbeidsoppgave gr5
Samarbeidsoppgave gr5
EvaUnn39
 

Viewers also liked (20)

Marathon Oil Corp. Industry Profile
Marathon Oil Corp. Industry ProfileMarathon Oil Corp. Industry Profile
Marathon Oil Corp. Industry Profile
 
TPA-AL Wiki Explained
TPA-AL Wiki ExplainedTPA-AL Wiki Explained
TPA-AL Wiki Explained
 
HES manā ciematā
HES manā ciematāHES manā ciematā
HES manā ciematā
 
Shpogy secondary school
Shpogy secondary school  Shpogy secondary school
Shpogy secondary school
 
[Gmic]nale be cubbying
[Gmic]nale be cubbying[Gmic]nale be cubbying
[Gmic]nale be cubbying
 
Como sair das dividas de uma vez por todas
Como sair das dividas de uma vez por todasComo sair das dividas de uma vez por todas
Como sair das dividas de uma vez por todas
 
Fstpt7 kanalisasi
Fstpt7 kanalisasiFstpt7 kanalisasi
Fstpt7 kanalisasi
 
Pmk no. 1796 ttg registrasi tenaga kesehatan
Pmk no. 1796 ttg registrasi tenaga kesehatanPmk no. 1796 ttg registrasi tenaga kesehatan
Pmk no. 1796 ttg registrasi tenaga kesehatan
 
6 kretska i mikenska umjetnost
6 kretska i mikenska umjetnost6 kretska i mikenska umjetnost
6 kretska i mikenska umjetnost
 
Erosion pdf
Erosion pdfErosion pdf
Erosion pdf
 
Fashion than and_now
Fashion than and_nowFashion than and_now
Fashion than and_now
 
Football (2)
Football (2)Football (2)
Football (2)
 
LETRA E
LETRA ELETRA E
LETRA E
 
Chachies del boske nuboso
Chachies del boske nubosoChachies del boske nuboso
Chachies del boske nuboso
 
Idiom 1
Idiom  1Idiom  1
Idiom 1
 
Kade karu ott 2
Kade karu ott 2Kade karu ott 2
Kade karu ott 2
 
Another world (1)- Laura
Another world (1)- Laura Another world (1)- Laura
Another world (1)- Laura
 
Tutoring and the research process
Tutoring and the research processTutoring and the research process
Tutoring and the research process
 
7.1 xhtml validation
7.1 xhtml validation7.1 xhtml validation
7.1 xhtml validation
 
Samarbeidsoppgave gr5
Samarbeidsoppgave gr5Samarbeidsoppgave gr5
Samarbeidsoppgave gr5
 

Similar to 2.1 adding images

Xhtml Part1
Xhtml Part1Xhtml Part1
Xhtml Part1
nleesite
 
Lecture 6 - Comm Lab: Web @ ITP
Lecture 6 - Comm Lab: Web @ ITPLecture 6 - Comm Lab: Web @ ITP
Lecture 6 - Comm Lab: Web @ ITP
yucefmerhi
 

Similar to 2.1 adding images (20)

lecture4.ppt
lecture4.pptlecture4.ppt
lecture4.ppt
 
Html images syntax
Html images syntaxHtml images syntax
Html images syntax
 
HTML Attributes.pptx
HTML Attributes.pptxHTML Attributes.pptx
HTML Attributes.pptx
 
Designing web page marquee and img tag
Designing web page  marquee and img tagDesigning web page  marquee and img tag
Designing web page marquee and img tag
 
Html 5
Html   5Html   5
Html 5
 
Presentation
PresentationPresentation
Presentation
 
Chapter 2.pdf
Chapter 2.pdfChapter 2.pdf
Chapter 2.pdf
 
Project 03 Creating Web Pages with Links, Images, and Formatted Text
Project 03 Creating Web Pages with Links, Images, and Formatted TextProject 03 Creating Web Pages with Links, Images, and Formatted Text
Project 03 Creating Web Pages with Links, Images, and Formatted Text
 
Html images
Html imagesHtml images
Html images
 
Web Applications
Web ApplicationsWeb Applications
Web Applications
 
HTML5 - Insert images and Apply page backgrounds
HTML5 - Insert images and Apply page backgroundsHTML5 - Insert images and Apply page backgrounds
HTML5 - Insert images and Apply page backgrounds
 
Layers&Frames
Layers&FramesLayers&Frames
Layers&Frames
 
Graphics
GraphicsGraphics
Graphics
 
Seo for image
Seo for imageSeo for image
Seo for image
 
Session no 4
Session no 4Session no 4
Session no 4
 
Chapter 7: Images
Chapter 7: ImagesChapter 7: Images
Chapter 7: Images
 
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobile
 
Xhtml Part1
Xhtml Part1Xhtml Part1
Xhtml Part1
 
PHP and CSS
PHP and CSSPHP and CSS
PHP and CSS
 
Lecture 6 - Comm Lab: Web @ ITP
Lecture 6 - Comm Lab: Web @ ITPLecture 6 - Comm Lab: Web @ ITP
Lecture 6 - Comm Lab: Web @ ITP
 

More from Bulldogs83

7.2 external style sheets
7.2 external style sheets7.2 external style sheets
7.2 external style sheets
Bulldogs83
 
6.2 css link styling
6.2 css link styling6.2 css link styling
6.2 css link styling
Bulldogs83
 
6.1 special characters
6.1 special characters6.1 special characters
6.1 special characters
Bulldogs83
 
5.2 nesting and floating elements
5.2 nesting and floating elements5.2 nesting and floating elements
5.2 nesting and floating elements
Bulldogs83
 
5.1 css box model
5.1 css box model5.1 css box model
5.1 css box model
Bulldogs83
 
4.3 table styling
4.3 table styling4.3 table styling
4.3 table styling
Bulldogs83
 
4.2 css classes
4.2 css classes4.2 css classes
4.2 css classes
Bulldogs83
 
4.1 advanced tables
4.1 advanced tables4.1 advanced tables
4.1 advanced tables
Bulldogs83
 
3.2 introduction to css
3.2 introduction to css3.2 introduction to css
3.2 introduction to css
Bulldogs83
 
3.1 xhtml tables
3.1 xhtml tables3.1 xhtml tables
3.1 xhtml tables
Bulldogs83
 
3.2 introduction to css
3.2 introduction to css3.2 introduction to css
3.2 introduction to css
Bulldogs83
 
1.4 adding comments copy (2)
1.4 adding comments   copy (2)1.4 adding comments   copy (2)
1.4 adding comments copy (2)
Bulldogs83
 
1.4 adding comments copy (2)
1.4 adding comments   copy (2)1.4 adding comments   copy (2)
1.4 adding comments copy (2)
Bulldogs83
 
1.3 creating links
1.3 creating links1.3 creating links
1.3 creating links
Bulldogs83
 
1.3 creating links
1.3 creating links1.3 creating links
1.3 creating links
Bulldogs83
 
1.2 elements and attributes copy (3)
1.2 elements and attributes   copy (3)1.2 elements and attributes   copy (3)
1.2 elements and attributes copy (3)
Bulldogs83
 
1.2 elements and attributes copy (3)
1.2 elements and attributes   copy (3)1.2 elements and attributes   copy (3)
1.2 elements and attributes copy (3)
Bulldogs83
 
1.1 xhtml basics
1.1 xhtml basics1.1 xhtml basics
1.1 xhtml basics
Bulldogs83
 

More from Bulldogs83 (18)

7.2 external style sheets
7.2 external style sheets7.2 external style sheets
7.2 external style sheets
 
6.2 css link styling
6.2 css link styling6.2 css link styling
6.2 css link styling
 
6.1 special characters
6.1 special characters6.1 special characters
6.1 special characters
 
5.2 nesting and floating elements
5.2 nesting and floating elements5.2 nesting and floating elements
5.2 nesting and floating elements
 
5.1 css box model
5.1 css box model5.1 css box model
5.1 css box model
 
4.3 table styling
4.3 table styling4.3 table styling
4.3 table styling
 
4.2 css classes
4.2 css classes4.2 css classes
4.2 css classes
 
4.1 advanced tables
4.1 advanced tables4.1 advanced tables
4.1 advanced tables
 
3.2 introduction to css
3.2 introduction to css3.2 introduction to css
3.2 introduction to css
 
3.1 xhtml tables
3.1 xhtml tables3.1 xhtml tables
3.1 xhtml tables
 
3.2 introduction to css
3.2 introduction to css3.2 introduction to css
3.2 introduction to css
 
1.4 adding comments copy (2)
1.4 adding comments   copy (2)1.4 adding comments   copy (2)
1.4 adding comments copy (2)
 
1.4 adding comments copy (2)
1.4 adding comments   copy (2)1.4 adding comments   copy (2)
1.4 adding comments copy (2)
 
1.3 creating links
1.3 creating links1.3 creating links
1.3 creating links
 
1.3 creating links
1.3 creating links1.3 creating links
1.3 creating links
 
1.2 elements and attributes copy (3)
1.2 elements and attributes   copy (3)1.2 elements and attributes   copy (3)
1.2 elements and attributes copy (3)
 
1.2 elements and attributes copy (3)
1.2 elements and attributes   copy (3)1.2 elements and attributes   copy (3)
1.2 elements and attributes copy (3)
 
1.1 xhtml basics
1.1 xhtml basics1.1 xhtml basics
1.1 xhtml basics
 

Recently uploaded

Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functions
KarakKing
 
Spellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please PractiseSpellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please Practise
AnaAcapella
 

Recently uploaded (20)

Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functions
 
SOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning PresentationSOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning Presentation
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptx
 
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
 
Single or Multiple melodic lines structure
Single or Multiple melodic lines structureSingle or Multiple melodic lines structure
Single or Multiple melodic lines structure
 
How to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSHow to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POS
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and Modifications
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibit
 
Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)
 
Dyslexia AI Workshop for Slideshare.pptx
Dyslexia AI Workshop for Slideshare.pptxDyslexia AI Workshop for Slideshare.pptx
Dyslexia AI Workshop for Slideshare.pptx
 
Spatium Project Simulation student brief
Spatium Project Simulation student briefSpatium Project Simulation student brief
Spatium Project Simulation student brief
 
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptx
 
Spellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please PractiseSpellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please Practise
 
How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17
 
Making communications land - Are they received and understood as intended? we...
Making communications land - Are they received and understood as intended? we...Making communications land - Are they received and understood as intended? we...
Making communications land - Are they received and understood as intended? we...
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docx
 
ComPTIA Overview | Comptia Security+ Book SY0-701
ComPTIA Overview | Comptia Security+ Book SY0-701ComPTIA Overview | Comptia Security+ Book SY0-701
ComPTIA Overview | Comptia Security+ Book SY0-701
 

2.1 adding images

  • 2. XHTML <img> Element <img src= &quot;mypic.jpg&quot; alt= &quot;my text&quot; /> Element Attribute Attribute Value Closing tag Attribute Attribute Value The src attribute supplies the name and location of the image file you wish to display. If no path is specified, the browser will expect the file to be in the same folder as the web page. The alt attribute determines what text will display in the web page if the image is not available. This is also what screen readers (for the visually impaired) will use. Get in the habit of naming image files in all lowercase letters and use underscores or dashes instead of spaces.
  • 3. <img> height and width attributes <img src= &quot;sunset.jpg&quot; height= &quot;600&quot; width= &quot;800&quot; alt= &quot;A beautiful sunset&quot; /> By specifying the height and width attributes of an image, we help the browser display the image correctly on the page. We can use these attributes to make a large image appear smaller on the page. We can also make a smaller image appear larger on the page, but this is not recommended, as the image will look pixelated and of poor quality. When making a large image appear smaller on the page, be sure to keep the same ratio of height to width. If you don't, the resulting image will look &quot;squished&quot; when it displays on the page.
  • 4. Determining the Height and Width: By viewing the properties of an image file in Windows, you can see what the width and height are.
  • 5. Resizing the Height and Width: <img src= &quot;sunset.jpg&quot; height= &quot;300&quot; width= &quot;400&quot; alt= &quot;A beautiful sunset&quot; /> By dividing the height and width evenly, we can resize an image on our web page.
  • 6.