5 – Images

• Understand images are another form of data in addition to text
• Develop understanding of using images effectively in web design
• Further develop skills in applying CSS and HTML to create a purposeful website

• Ordered list
• Unordered list
• Description list

• Let’s check our design to see where to add images of my dog Jack on my homepage – the index.html. There are two images, one is on the topbox, the other inside the rightbox.

• Let’s add the image to the rightbox first since it is easier – it is just before the paragraph. It will be more involved to add an image to the topbox as it is side by side with the heading.

Step 1

• To add an image, we need to create a folder ‘images‘ in the same folder you have saved your index.html file to hold all the images will be used in your web pages together.

• Use the tag img. This tag does not need a closing </img>.
• The tag img needs an attribute tag src to specify the image location and the image name.
• The image name must be complete, which means the file extension such as .jpg, .gif, or .png etc must be included.
• Here is a line of code for adding an image. src is an attribute that gives the location and name of the image file, which is in a folder called images.
• Download the image of jack by clicking the button below and then right clicking the image and saving it.

<img src="images/jack-right.jpg">

• If we don’t specify the width and height we like the image to be displayed in a browser, the browser will display the image using its original size which may be too large. To do so, we need to add two more attributes to the img tag, the width and the height attributes like so: (you may need to experiment with the width and height to get the right image size for your own page.)

<img src="images/jack-right.jpg" width=600 height=350>

• You should now have the body section of your index.html file similiar to this:

• The homepage now looks like this in a browser:

• Let’s check our design again to see what is inside the leftbox. In the leftbox, there are just a list of hyperlinks to other pages or web sites. One of the important features of webpages is to have links to allow users to navigate your site or to go to other sites.
• The list of hyperlinks looks like bulletin points. HTML has tags to create a list that are similar to bulletin points. There are two basic kind of list: ordered list and unordered list:
• Ordered list: defined using tag <ol> and </ol>. The list has a number, a Roman numeral or a letter to indicate each item’s order. Each item in the list is defined using the tag <li> and </li>. The following example shows how to define an ordered list:

An ordered list code	What you see in a browser
<ol>
<li>Milk</li>	1. Milk
<li>Butter</li>	2. Butter
</ol>

• Unordered list: defined using tag <ul> and </ul>. The list has a number, a Roman numeral or a letter to indicate each item’s order. Each item in the list is defined using the tag <li> and </li>. The following example shows how to define an unordered list:

An unordered list code	What you see in a browser
<ul>
<li>Milk</li>	– Milk
<li>Butter</li>	– Butter
</ul>

• A description list is a list of terms or names, with a description of each term or name. This can also be used to define our list of hyperlinks.
• The <dl> tag defines a description list.
• The <dl> tag is used together with <dt> (defines a term) and <dd> (describes a term).

<dl>                      
 <dt>Milk</dt>             
   <dd>A white liquid</dd>   
 <dt>Butter</dt>           
   <dd>A dairy product</dd>  
   <dd>Used for cooking</dd> 
</dl>

Step 2

• In the leftbox of our design, there should be a list of hyperlinks. We can add some descriptions under each hyperlink to give more information as what each link is about.
• The <dt> (defines a term) tag will be used to define a hyperlink and the <dd> (describes a term) will be the description for that hyperlink

<dl> 
 <dt><a href="mySecondWebPage.html">Photo Gallery</a> </dt> 
 <dd> - A collection of photos of Jack from 4 weeks to present<dd> 
</dl>

• Task: Can you independently add a link to the Wikipedia page for mini Schnauzers under the photo gallery link?

Ordered list: Defines an unordered list that can be numerical or alphabetical, the list items will be marked with numbers by default.
Unordered list: Defines an unordered (bulleted) list, the list items will be marked with bullets (small black circles) by default
Description list: A list of terms or names, with a description of each term or name

In this lesson, you…

• Understood images are another form of data in addition to text
• Developed understanding of using images effectively in web design
• Further developed skills in applying CSS and HTML to create a purposeful website

In the next lesson, you will…

• Understand that websites are made of linked webpages
• Understand that web servers allow websites to be accessed by users via web browsers on networks
• Understand that CSS rules can be applied via an external stylesheet, an internal stylesheet, or an inline style sheet

Learning strand: Data and Data Representation

• Complete the tasks for this lesson. Upload snipping tool images of your code and website for each badge task.

• Add the image to the rightbox.

• Add a link to the leftbox.

•  Complete all the tasks for this lesson.