Learning Intentions
To be able to: use notepad to amend, write and save HTML code
To know: how to use HTML code to insert graphics
To understand: The links between the HTML code and its webpage
Success Criteria
You will use notepad to create a simple webpage including a simple image
Then you will use a number of images, saving the file in the correct format & be able to display the webpage in a browser.
Finally you will use tags to align and resize your images to good effect on your webpage and insert a background
To be able to: use notepad to amend, write and save HTML code
To know: how to use HTML code to insert graphics
To understand: The links between the HTML code and its webpage
Success Criteria
You will use notepad to create a simple webpage including a simple image
Then you will use a number of images, saving the file in the correct format & be able to display the webpage in a browser.
Finally you will use tags to align and resize your images to good effect on your webpage and insert a background
Before you begin this lesson you will need to download and save to your HTML folder these images or you can find your own
Task 1: Copy & paste in the HTML code into a notepad file
<HTML>
<HEAD>
<TITLE>
Image
</TITLE>
</HEAD>
<BODY>
<BODY BGCOLOR=LIME>
<H1> <CENTER> this page will display an image </H1> </CENTER> <BR>
<HR> <BR>
<IMG SRC="Computer 1.jpg"> </IMG>
</BODY>
</HTML>
Save the file as: “image webpage.html” into your HTML folder
Open the webpage in internet explorer to see if it has worked, screen shot your page and add comments
Task 2: Changing where the image is placed on the website
Go back to the notepad file and add a parameter ALIGN=RIGHT to the <IMG> tag – resave the file as “image webpage right.html” refresh the webpage to see the changes, take another screen shot for your eportfolio.
………………………………………
Task 3: Changing the height and width
Go back to the notepad file and add these two parameters to your <IMG> tag
<IMG SRC=”Computer 1.jpg” WIDTH=400 HEIGHT=80>
Experiment with the WIDTH and HEIGHT and ALIGNMENT of the image, save your file as width and height.
Don’t forget to take more screen shots
………………………………………
Task 4: Adding an image or textured background
Choose one of the images and set it as the background for the webpage by setting a parameter like this:
<BODY BACKGROUND=”DESK.jpg”>
Extension – Add more images and text to your webpage using a range of parameters so that they are displayed in different areas of the webpage.
<HTML>
<HEAD>
<TITLE>
Image
</TITLE>
</HEAD>
<BODY>
<BODY BGCOLOR=LIME>
<H1> <CENTER> this page will display an image </H1> </CENTER> <BR>
<HR> <BR>
<IMG SRC="Computer 1.jpg"> </IMG>
</BODY>
</HTML>
Save the file as: “image webpage.html” into your HTML folder
Open the webpage in internet explorer to see if it has worked, screen shot your page and add comments
Task 2: Changing where the image is placed on the website
Go back to the notepad file and add a parameter ALIGN=RIGHT to the <IMG> tag – resave the file as “image webpage right.html” refresh the webpage to see the changes, take another screen shot for your eportfolio.
………………………………………
Task 3: Changing the height and width
Go back to the notepad file and add these two parameters to your <IMG> tag
<IMG SRC=”Computer 1.jpg” WIDTH=400 HEIGHT=80>
Experiment with the WIDTH and HEIGHT and ALIGNMENT of the image, save your file as width and height.
Don’t forget to take more screen shots
………………………………………
Task 4: Adding an image or textured background
Choose one of the images and set it as the background for the webpage by setting a parameter like this:
<BODY BACKGROUND=”DESK.jpg”>
Extension – Add more images and text to your webpage using a range of parameters so that they are displayed in different areas of the webpage.