Web Design

Images

Learn It

  • 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.
  • 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.

folder-3.png

  • 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.
<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=180>
  • You should now have the body section of your index.html file similiar to this:

html-body-3.png

  • The homepage now looks like this in a browser:

page-6.png

Code It

  • 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>  

Code It

  • 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>

Hyperlinks

Learn It

  • 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="mySecondPage.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?

page-8.png

Badge It

  • Complete the tasks for this lesson. Upload your index.html file.
  • Silver: Add the image to the rightbox.
  • Gold: Add a link to the leftbox.
  • Platinum: Complete all the tasks for this lesson.

Validate