Monday, July 29, 2013

HTML: Tutorial 3 images

  Ok we now know how to make a website with heading,text,and links. What other elements are we missing? Images!! A website with text and links would be boring, so lets now go make our website a little more exciting.
Use the file Learn2.html for this project , if you don't have the file then open your text editor and text in this basic code.

Now the code to add images is  <img src""> The name of the image you will be using will be placed inbetween the " " brackets. Ok for this tutorial just right click and download this image rename it Mario.png

Yes we will be using super mario for this excercise. Now download the image, make sure you named it Mario.png and place the image in the same folder as your html project. Now type this code


<h1> Learn Links </h1>

<p> How to add links </p>

 <a href="">Click here</a>
<p> Now add images <p>

<img src="Mario.png">


Save your project as Learn3.html  ,now your project should look like this

Code breakdown:The name of the image file was Mario.png . You put the Mario.png between the " " brackets. So the code for the image was <img src="mario.png"> .

Ok congratulations now you can make a good looking website. You have completed 3 lessons already and you haven't even broken a sweat yet. Next we will expand on how to make an image the size you want and how to make an image a link  Lesson 4   Click here for lesson 4

No comments:

Post a Comment