boat

Focus 4

fundamental web design

Images

Today we will look at how to put an image into a web page.

We will need this tag:

<img/>

In fact, for the img tag to work, it needs to know the source location of the image. So we need to do this:

<img src = " "/>

And then, inside the quotation marks, we need to write the filename and the filetype of the image.

<img src = "camera.jpg"/>

Note, there are many image filetypes in digital technology:

  • jpg
  • png
  • bmp
  • svg
  • webp

and more...!

Task I

Before we start to use the <img/> tag, let's make an image.

If you have Adobe Illustrator, follow this tutorial.

If you don't have Adobe Illustrator, follow the tutorial to get ideas and use your own software to develop the image


Task II

Save your image as camera.svg in your Focus 4 project folder.


Create a new webpage file called Focus4.html in your project folder.

Now, make a webpage about your camera. Your webpage should promote the camera and make people want to buy it!

You can show:

  1. 5 reasons why somebody should buy it! Use a list to do this.
  2. the price
  3. any discount opportunity!
  4. more images of different color schemes
  5. some looping audio saying Buy Me! Buy Me! Buy Me! Buy Me! Buy Me! Buy Me!. Create an mp3 file to do this.
  6. a hyperlink to a camera shop website.
  7. Your company's logo
  8. your company's address, email and links to social media

These are just ideas. Be creative!

SUBMISSION

Submit your project folder as instructed by your tutor.

W3 SCHOOLS

Tags

browser file tags body save h1 html h4 h2 structure refresh h3 organised