Introduction to HTML 5 and CSS3 Part 5

Hello and welcome back! Today we will talk all about Images in webpages!

So let’s just jump right into it!

First off there are three types of images that are perfect for web usage they are provided below:

  • GIF or Graphics Interchange Format (Best used for Line Art, icons and images with few colors and less detail.
  • JPEG or Joint Photographic Experts Group (this image is a cross platform application-independent. (Photo or images with millions of colors and detail)
  • PNG or Portable Network Graphics (Photo or images with millions of color and lots of details)

So how exactly do you get images into your webpage? Well that’s pretty easy actually using the img tag.

<img src=”imagename.jpeg” alt=”Image”>

So let’s break this down:

  • <img> tag is sometimes referred to as an empty element. This specifies where you want the image to go on your page.
  • Src is like the href we learned in the previous lesson. This tells the browser where to look for the image or its exact location.
  • Alt is the text that you see when you hover over the image (NOTE: this is always wise to use because some browsers are text only and this will show the text even if the image doesn’t show up)

So what does this look like in HTML? Let’s take a look at image below so you can get an idea of what it looks like in HTML:

html35

As you can see that it’s quite simple to embed an image into your document and this is what it looks like inside your favorite browser:

html36

So it worked! But what if you wanted this image smaller? Or bigger for that matter? How would you do that? Well let me show you below:

Inside your <img> tag you would specify that as follows:

<img src=”sun.jpg” width=”20” height=”40” alt=”sun” />

What does that look like in your document?

html37

What does it look like in your browser? Let’s take a look below:

html38

The final thing to talk about is linking images to actual sites How is this accomplished? Let’s have a look should we?

<a href=https://www.arvixe.com><img src=”sun.jpg” alt=”Visit Arvixe!” height =”75 Width=”131”></a>

So what you do is put the <a> tag before your <img> tag and close your <a> tag after you write the <img> tag it’s that easy!

Let’s see what it looks like in your text editor:

html39

See it’s really easy! And then let’s have a look in your browser!:

html40

So that completes our image tutorial for HTML! If you have any more questions please feel free to ask away!

Looking for quality phpBB Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , , | Posted under Programming/Coding | RSS 2.0

Author Spotlight

Keith Pottratz

Keith Pottratz

Hello My Name is Keith Pottratz. I have been working with computers for over a decade. It's my personal hobby something that I love and enjoy doing. I went to school for Computer Science, and have spent many years self teaching my self various things. I have ton's of experience in HTML,CSS, PHPBB,CPanel,CMS software, blogging software and various other systems and enviroments. My favorite thing to do though is backend developing. I find it to be a growing and ever evolving beast and I love learning about it. I look forward to giving as much knowledge as I can and help.

Leave a Reply

Your email address will not be published. Required fields are marked *


+ 3 = 9

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>