Wednesday, August 10, 2011

HTML5 Tutorial 3: Adding images and pictures

Adding images and pictures is easier than you might think, the tags we will be using today are <img> and <a>, I'll start out by showing you the <img> tag.

<img>
To add an image to your document you would use the <img> tag but you can't simply put something like <img>panda</img>, you must use something called a Image Source, which means the picture you want to include must already be uploaded somewhere on the internet (although you can get in trouble for using other peoples pictures without getting proper permission ).
For example, to add a picture of a panda your code should look like this:
<body>
  <img src="http://www.rockfuse.com/blog/wp-content/uploads/2011/04/panda.jpg" alt="Panda" />
</body>
This code would show up like this:
Panda

The alt="Panda" is what shows up if the picture can not be displayed for one reason or another. Remember adding the / before the closing > is good practice.

<a>
To place a link in your page you would use the <a> tag, but like the above <img> tag you need other factors inside the tag for it to work correctly. It is used like this:
<body>
  <a href="http://murdernickelsafehouse.blogspot.com"> Murdernickel's Safehouse </a>
</body>
The href factor is necessary  for the link to work correctly, it stands for hyperlink reference and tells the browser what it is linking too. The text between the opening tag and closing tag can be changed to whatever you like.

When this code is implemented it shows up like this:
Murdernickel's Safehouse 
The default coloring for links in HTML5 is

  • An unvisited link is underlined and blue
  • A visited link is underlined and purple
  • An active link is underlined and red
Although this can be changed with CSS which I will show you at a later date.

Thanks for taking the time to read this, Catch you all later.

11 comments:

  1. This part is very useful info to memorize.

    ReplyDelete
  2. thanks for the useful information ill keep looking forward ot learn from you

    ReplyDelete
  3. HTML5 is the future can't wait till this hits it bigtime

    ReplyDelete
  4. Thanks, I can't always remember what to do on my own lol

    ReplyDelete
  5. Thanks for the tips, I need to study HTML harder, I always forget the tags.

    ReplyDelete
  6. Great info so far many thanks, keep it up ;)

    ReplyDelete