If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.
You already know Dokkio is an AI-powered assistant to organize & manage your digital files & messages. Very soon, Dokkio will support Outlook as well as One Drive. Check it out today!

PhotosPage

Page history last edited by c 14 years, 7 months ago

Photos Page

What am I going to learn to do?

On this page,you will learn how to add Photos to a web page using HTML.

What software/tools will I use?

Notepad

Web Browser

What are the ideas I will work with?

Pictures are displayed, not altered with HTML

Pictures, like text appear on the page in the order that they are coded.

Pictures are a stand alone tag, and don't have a closing tag.

You can change the size by specifying the height and width, or one of the two.

How do I do it?

Make a page in HTML with a Head, title and body inside the HTML tags.

In the title, put <title>Photos - First Name Last Initial</title>

On the first line of the Body, put <h1>Photos Page - First Name Last initial </h1>

Find a photo that is no larger than 200 pixels high by 200 pixels wide.

Rename the photo so that it is called picture.jpg

Save the picture in the same directory as your page.

Use the <img src="picture.jpg"> tag on your page to make it show up.

Underneath the picture, write Full Size

Modify the size of the picture

Add the code for the picture again.

After the quotes with the name of the photo, put width="100" height="100" inside the img tag.

Your picture should show up half the size of the full size one.

Underneath the picture, write Half Size by Pixels

Add the code for the picture again.

After the quotes with the name of the photo, put width="75%" height="75%" inside the img tag.

Your picture should show up three quarter the size of the full size one.

Underneath the picture, write Three Quarter Size by Percent

You should also try adjusting the size so that it is larger than the original, and try making it taller or wider. These adjustments, however, should be avoided in your web designs, because they distort the picture. If you want to distort the picture, you should do those adjustments to the photo with software more suited to the task.

Checklist:

HTML page structure
Title with page name and your name (first name and last initial only )
Heading with page name and your name (first name and last initial only)
Picture less than 400 pixels on a side saved in your directory and renamed picture.jpg
Picture displayed on the page with IMG tag and labelled below
Picture displayed at half size by pixels and labelled below
Picture displayed at 3/4 size by percentage and labelled below