Working With Images

Lesson 4

  1. Double click the icon on your desktop to open ‘Notepad++’
  2. Click ‘File’ & ‘Close’ to close any files that appear.
  3. Navigate to the folder called ‘Website Files’ on your network and open Lesson4.html

You will now see the following code:

Note that there is more HTML in this file than you would have seen in previous lessons, these contain:

  • <!doctype html> – Tag that tells the browser that this is a HTML5 page
  • <script></script? – This tag links to other files on the website such as JavaScript/Jquery files. Explanation of these files can be found here https://jquery.com/. We will use script files for the interactive stuff on our site.
  • <link></link> – Links ‘Style Sheets’ to our page. Style sheets define the look and of our page and separate the style from the content in our page.
  • <div></div> – Known as a ‘Division’ tag,  The <div> tag is used to group elements to format them with styles, in our example, each ‘Div’ tag has its ID that’s linked to a style.
  1. On line number 4 find: <title>My Name is XXX YYY</title>
  2. Replace ‘XXX YYY’ with your name.
  3. On line number 15 find: <strong>My name is…XXX</strong>
  4. Again replace ‘XXX’ with your name.
  • To display a static image you use the <img></img> tag. Inside this tag you tell the browser where to find your image i.e.<img> src=”images/Screwdriver128.png”</img>  images is our folder name and Screwdriver128.png is our file name.
  • To display a dynamic (clickable image) you need to use the <a href=””></a> tag.

In this exercise, we are doing something different, so we are using both.

  1. Now find line 15, this line is where you specify the location of the image you wish to use. Change both the href and src location to point to your image in the ‘images’ folder.
  2. ‘Save’ your page.
  3. Again in line 15 delete everything between the </br> tag and the closing </p> tag and replace this with your profile information.
  4. ‘Save’ and ‘Run’ your page. You should now see your profile page.
  5. ‘Click’ your picture – what happens?
  6. ‘Click’ ‘Home Page’ – What happens?

Take me to lesson 5 'The Box Model'

Scroll to Top
Scroll to Top