Tag Archives: web

Drop-down menus in HTML and CSS

This tutorial explains how to create a drop-down menu on your website using HTML and CSS code. The drop-down menu will look like the example, but you can personalise it as you like.

dropdown

To create a drop-down menu using the method in this tutorial, you will need to create a div that contains a button as well as another div which contains the drop-down menu. The drop-down menu will be hidden until the mouse cursor hovers over the main button.

Step 1 – HTML code

Create a new HTML file and copy the code below. Each drop-down menu button will be contained inside a div with a class name of ‘dropdown_div‘. The button will have a class name of ‘dropdown_button‘ and the actual drop-down menu will be inside a div called ‘dropdown_content‘.

Change the text on the button as well as the links and link text inside the drop-down menu to match the links on your site. You can change the links by replacing the # hashtags with your own links eg. about.html or products.html. There are three drop-down menus below. You can add more or remove some if you wish. Once you have set up the links, save the HTML file.

Note that this HTML file is linked to an external CSS stylesheet called ‘theme.css‘ which will contain the CSS code for the menu.

HTML Code:

<!DOCTYPE html>
<html>
<head>
  <title>Drop-down menu</title>
  <link rel="stylesheet" href="theme.css" type="text/css"/>
</head>
<body>

<h2>Dropdown menu example</h2>
<p>This is an example of a drop-down menu. Hover your mouse cursor over the button to reveal the dropdown menu. You can add more buttons and drop-down menus by modifying the HTML and CSS code. Replace the link text and the # hashtags with the actual links.</p>

<div class="dropdown_div">
  <button class="dropdown_button">Dropdown button</button>
  <div class="dropdown_content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>


<div class="dropdown_div">
  <button class="dropdown_button">Dropdown button 2</button>
  <div class="dropdown_content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>


<div class="dropdown_div">
  <button class="dropdown_button">Dropdown button 3</button>
  <div class="dropdown_content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

</body>
</html>

Step 2 – CSS code

Create a new CSS file called ‘theme.css‘ and save it in the same folder as the HTML file. Copy the code below and change the colours, font size and family properties, and other properties as you wish. Save your work.

CSS Code:

.dropdown_div {
    position: relative;
    display: inline-block;
}

.dropdown_button {
    background-color: #5961D4; /* button background colour */
    color: #ffffff;
    padding: 14px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown_content {
    display: none; /* remove this to show all links before hovering */
    position: absolute;
    background-color: #f9f9f9; /* dropdown items - background colour */
    width: 100%; /* can remove this if you want to make the menu wider/narrower  */
    /* min-width: 180px; can add this if you need to change the minimu width of menu */
    box-shadow: 0px 6px 14px 0px rgba(0,0,0,0.3);
}

.dropdown_content a {
    font-family:Arial;
    color: #000000;
    padding: 12px 18px;
    text-decoration: none;
    display: block;
}

.dropdown_content a:hover {
    background-color: #9594A1; /* dropdown items hover - change background colour */
}

.dropdown_div:hover .dropdown_content {
    display: block;
}

.dropdown_div:hover .dropdown_button {
    background-color: #492FA1; /* button hover - change background colour */
}

p{
    font-family:Arial;
}

h2{
    font-family:Arial;
}

Make sure you have saved both files and then open the HTML file in your web browser. That’s it! You should have a nice drop-down menu on your page :-)

 

Parallax scrolling effect with HTML5, CSS and JavaScript

This tutorial explains how to add a parallax scrolling effect using some simple HTML5, CSS and JavaScript code. If you want to know more about the origins of the parallax effect, click here to see how Disney used the parallax effect in their early cartoon animation.

Click on the image below to see a working demo of the parallax effect created in this tutorial.

Parallax scrolling effect demo.
Parallax scrolling effect demo.

Watch the video below and then scroll down to see the sample code and sample image files you can use.

Sample code and images

Click on the image thumbnails below to download the sample background image and two parallax layer div background images.

background
background.png
parallax
parallax.png
parallax2
parallax2.png

All of the HTML, CSS and JavaScript code for this demo is included in one HTML file. You can copy the code from below – please note that I have included several of the same paragraphs in the code so that there is plenty of text content on the page to allow the user to scroll in order for the parallax effect to be visible.

<html>
<head>
  <title>Parallax effect</title>

  <style type="text/css">
    body{
      margin:0px;
      background:url(background.png) fixed;
    }
    #parallax_layer1{
      position:fixed;
      background:url(parallax.png) no-repeat 0px 300px;
      width:100%;
      height:800px;
    }
    #parallax_layer2{
      position:fixed;
      background:url(parallax2.png) no-repeat 0px 500px;
      width:100%;
      height:1000px;
    }
    #content_layer{
      color:#F9A7B0;
      background-color:black;
      opacity:0.5;
      font-family:Arial;
      position:absolute;
      padding:10px 10px 10px 30px;
      width:40%;
      right:0px;
    }
  </style>

  <script>
  // Create the parallax function.
  function parallax(){
    var parallax_layer1 = document.getElementById('parallax_layer1');
    var parallax_layer2 = document.getElementById('parallax_layer2');
    // Dividing the pageYOffset by a positive number will slow down the parallax effect.
    // Adding a '-' before (window.pageYOffset) makes the parallax
    // layer move up instead of down when scrolling.
    parallax_layer1.style.top = -(window.pageYOffset/2)+'px';
    parallax_layer2.style.top = -(window.pageYOffset/6)+'px';
  }
  // Add an event listener which will detect scrolling and run
  // the parallax function.
  window.addEventListener("scroll",parallax);

  </script>

</head>
<body>
  <div id="parallax_layer1"></div>
  <div id="parallax_layer2"></div>
  <div id="content_layer">
    <h1>Parallax effect</h1>
    <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>

    <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
    <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
    <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
    <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
    <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
    <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
    <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
    <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
    <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
    <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
    <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
    <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
    <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
    <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
    <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
    <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
    <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
    <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
    <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
    <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
    <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>

  </div>	
</body>
</html>

Adding navigation menu buttons to your web page

In this tutorial you will learn how to add buttons to improve your navigation menu using CSS. The menu buttons will change colour when the mouse hovers over them or when a page has been visited.

This tutorial also provides you with a CSS layout template that you can use to add a header, content area, and footer in addition to the navigation menu. You can read through the page to see how each section of the code works or jump down the page to see the entire HTML and CSS code.

This is what the web page layout looks like (click the image to see the live site):

css_layout_buttons
CSS layout with menu buttons – click the image to view the live web page

This is what the menu hover effect looks like when the user’s mouse hovers over a button:

menu_gif

Step 1 – Adding the menu links to the HTML code

The first step to creating the navigation is to add the links to the other web pages on your site in the HTML code of the web page. The menu will be inside a div with an ID of “nav”. The links on the menu will then be inside an unordered list – each link will ne an individual list item. Here is what the HTML code looks like for the nav div:

<div id="nav">
  <ul>
     <li><a href="index.html">Home</a></li>
     <li><a href="about.html">About</a></li>
     <li><a href="products.html">Products</a></li>
     <li><a href="support.html">Support</a></li>
     <li><a href="contact.html">Contact us</a></li>
  </ul>
</div>

Step 2 – Adding the CSS code for the nav div

From here you need to add the CSS code that will style this menu. The nav div will be the first part that we will add CSS code for. The CSS code for the nav div below includes a dark blue/purple background colour, a height of 300 pixels and width of 150 pixels (this could be changed to a % value too). It is also set to float: left so that the menu is on the left side but this could be left out if you want a horizontal menu. Lastly, 5 pixels of padding is added.

#nav{
 background-color:#334a94;
 height:300px;
 width:150px;
 float:left;
 padding:5px;
}

Step 3 – Adding the CSS code for the unordered list

Then we add the style information for the list <ul> element. The list-style-type is set to none so that there are no bullets (dot points) on the list. The width of the unordered list is set to 100% so it takes up all of the width of the div, and the background colour is set to a dark blue/purple colour here. You could add margin and padding if you want or leave them as 0.

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #334a94;
}

Step 4 – Adding the CSS code for links inside each list item.

Here we add a style that will apply to any link that is a list item on a list. Remember, the <li> tag is used to create list items and the <a> tag is used for links. For this style, we change the font to Calibri, size 14 with a font-style of none. Display is set to block (change to inline if you want a horizontal menu), the colour of the text is white, some padding is added, and text-decoration is set to none so that the links are not underlined.

li a {
  font-family:Calibri;
  font-size: 14pt;
  font-style:none;
    display: block;
    color: #FFFFFF;
    padding: 8px 0 8px 16px;
    text-decoration: none;
}

Step 5 – Add the CSS code for visited links

By adding the “li a:visited” CSS code, we are applying a style to only links on a list that link to a page that has been visited by the user.

li a:visited {
    background-color: #4CAF50;
    color: #FFFFFF;
}

Step 6 – Adding the CSS code for hover links

We can apply a style to links when the mouse hovers over a link (button). On this menu, we have applied a style that will change the background colour of a button to a light purple colour and the font colour to black whenever the mouse hovers over a button.

li a:hover {
    background-color: #786ED4;
    color: #000000;
}

And that’s it! You can change the code to suit your theme and try making a horizontal menu instead of a vertical menu. If you want the entire HTML code and CSS code you can copy it below.

The entire HTML file code:

<!DOCTYPE html>
<html>
<head>
 <title>Basic CSS Layout</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="theme.css" type="text/css"/>
</head>
<body>
 
<div id="header">
 <h1>My website</h1>
</div>
 
<div id="nav">
  <ul>
     <li><a href="index.html">Home</a></li>
     <li><a href="about.html">About</a></li>
     <li><a href="products.html">Products</a></li>
     <li><a href="support.html">Support</a></li>
     <li><a href="contact.html">Contact us</a></li>
  </ul>
</div>
 
<div id="section">
 <h2>Welcome to my website</h2>
 <p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.</p>
 <p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.</p>
</div>
 
<div id="footer">
 Copyright....2015.
</div>
</body>
</html>

The entire CSS file (theme.css) code

#header{
 background-image:url("background.png");
 background-color:#334a94;
 height:100px;
 color:#FFFFFF;
 text-align:left;
 padding-left:20px;
 padding-top:20px;
 font-family:Arial;
}
 
#nav{
 background-color:#334a94;
 height:300px;
 width:150px;
 float:left;
 padding:5px;
}
 
#section{
 width:500px;
 float:left;
 padding:10px;
}

h2{
  font-family:"Tahoma";
}

p{
  font-family:"Palatino Linotype";
}
 
#footer{
 background-color:#334a94;
 color:#FFFFFF;
 clear:both;
 text-align:center;
 padding:20px;
}


ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #334a94;
}

li a {
  font-family:Calibri;
  font-size: 14pt;
  font-style:none;
    display: block;
    color: #FFFFFF;
    padding: 8px 0 8px 16px;
    text-decoration: none;
}

li a:visited {
    background-color: #4CAF50;
    color: #FFFFFF;
}

li a:hover {
    background-color: #786ED4;
    color: #000000;
}

Note that for the header section a background image is specified. If you do not have a background.png file in the same directory as the CSS code, then the image will not appear but the dark blue/purple background colour will show instead. Click here if you’d like to download a blue/purple gradient background image to use as your header background. easter_egg_button

Linear gradients

In this tutorial you will learn how to add a linear gradient background to a div. A linear gradient is where one colour gradually changes into another colour.

A linear gradient can change colours gradually from left to right, right to left, top to bottom, or the bottom to top of a div. A gradient involves at least two different colours but can include multiple colours. Below is an example of a linear gradient that involves three colours (dark green, yellow, light green).

Screen Shot 2015-05-14 at 8.25.45 pm

The example above is obviously a dramatic example. Make sure you use colours that work well together and that work well with the rest of the theme on your website. Using different shades of a colour for a gradient can be used to give a div a little depth or a nice shadow effect if used effectively.

Watch the video below to see how to create linear gradients and then scroll down to see the sample HTML and CSS code.

Here is the sample HTML code:

<!DOCTYPE html>
<html>
<head>
 <title>Linear gradients</title>
 <link rel="stylesheet" href="resources/stylesheet14.css"/>
</head>
 
<body>
 <div class="round_box">
 <p>This box has rounded corners and a linear gradient.</p>
 </div>
</body>
</html>

Here is the sample CSS code:

.round_box{
 background-color:#31D457;
 width:250px;
 text-align:center;
 padding: 30px 20px;
 border-radius:20px;
 background-image:linear-gradient(to bottom, #175E0C, #DBF022, #37DE1C);
}

Drawing arcs using the arcTo method

This tutorial explains how to draw arcs using the arcTo method. You will learn how to draw arcs and join arcs to other lines on the canvas.

This is what the arc attached to lines will look like:

Screen Shot 2015-05-08 at 6.56.39 pm

Watch the video below and then scroll down to see the sample code.

Here is the sample code:

<!DOCTYPE html>
<html>
<head>
 <title>The arcTo method</title>
 <style>
 #myCanvas{
 background-color: white;
 border: 1px solid black;
 }
 </style>
 
</head>
<body>
 <script>
 function draw(){
 var ctx = document.getElementById("myCanvas").getContext("2d");
 ctx.moveTo(50,50);
 ctx.lineTo(200,50);
 ctx.arcTo(250,50,250,100,50); // x1, y1, x2, y2, radius
 ctx.lineTo(250,200);
 ctx.stroke();
 }
 window.onload = draw;
 </script>
 
 <canvas id="myCanvas" width="500" height="350">
</body>
</html>

Next tutorial: Drawing quadratic curves

Clipping shapes on the canvas

This tutorial will explain how to clip shapes on the canvas. The clipped shape example in the video will look like this:

Screen Shot 2015-05-08 at 7.01.35 pm

Watch the video below and then scroll down to see the sample code.

Here is the sample code:

<!DOCTYPE html>
<html>
<head>
 <title>Clipping shapes</title>
 <style>
 #myCanvas{
 background-color: white;
 border: 1px solid black;
 }
 </style>
 
</head>
<body>
 <script>
 function draw(){
 var ctx = document.getElementById("myCanvas").getContext("2d");
 ctx.rect(50, 50, 100, 100) // x, y, width, height
 // we will clip one rectangle with the other 
 ctx.clip();
 ctx.rect(0, 0, 100, 100)
 ctx.stroke();
 }
 window.onload = draw;
 </script>
 
 <canvas id="myCanvas" width="200" height="200">
</body>
</html>

Next tutorial: Drawing arcs and circles on the canvas

Drawing paths on the canvas

This tutorial explains how to draw paths on the canvas. Paths can be used to build shapes by creating lines, filling the path, and filling the background with a colour, as seen in the example below.

Screen Shot 2017-04-14 at 5.06.13 pm

Watch the video below and then scroll down to see the sample code.

Here is the sample code:

<!DOCTYPE html>
<html>
<head>
 <title>Drawing paths</title>
 <style>
 #myCanvas{
 background-color: white;
 border: 1px solid black;
 }
 </style>
 
</head>
<body>
 <script>
 function draw(){
 var ctx = document.getElementById("myCanvas").getContext("2d");
 ctx.beginPath(); // this will reset the current default path
 ctx.moveTo(50,50); // x, y coordinates of start of line
 ctx.lineTo(250,50); // creates new line to these x, y coordinates
 ctx.lineTo(250,150); // creates another line to these x, y coordinates
 ctx.lineTo(50,150);
 ctx.fill();
 ctx.closePath(); // this will close the path to complete the rectangle (adds the last line on the left side of rectangle)
 ctx.stroke(); // strokes the current path
 alert(ctx.isPointInPath(75,75)); // returns a true/false value indicating whether the specified point is within a path
 }
 window.onload = draw;
 </script>
 
 <canvas id="myCanvas" width="500" height="350">
</body>
</html>

Next tutorial: Clipping shapes on the canvas

Joining lines on the canvas

This tutorial explains how to join lines on the canvas. The lines that we will join in this tutorial will end up looking like this:

Screen Shot 2015-05-08 at 6.59.43 pm

Watch the video below and then scroll down to see the sample code.

Here is the sample code:

<!DOCTYPE html>
<html>
<head>
 <title>Joining lines</title>
 <style>
 #myCanvas{
 background-color: white;
 border: 1px solid black;
 }
 </style>
 
</head>
<body>
 <script>
 function draw(){
 var ctx = document.getElementById("myCanvas").getContext("2d");
 ctx.lineWidth = 20;
 ctx.lineCap = "butt"; // options are: square, round, butt
 ctx.lineJoin = "round"; // options are: round, bevel, miter
 //ctx.miterLimit = 3;
 //ctx.setLineDash([20,10]); //adds dashes -length of dash,length of gap between dash
 //ctx.lineDashOffset = 20;
 
 ctx.beginPath();
 ctx.moveTo(50,50);
 ctx.lineTo(150,250);
 ctx.lineTo(250,50);
 ctx.lineTo(150,50);
 ctx.strokeStyle="#FF0000";
 ctx.stroke();
 //ctx.fill(); will add a fill
 }
 window.onload = draw;
 </script>
 
 <canvas id="myCanvas" width="300" height="300">
</body>
</html>

Next tutorial: Drawing paths on the canvas

Styling lists

In one of the earlier tutorials we looked at how to create lists in a HTML web page. In this tutorial we will look at how to style both ordered and unordered lists using CSS code. We can style lists by changing circles to other shapes such as squares or arrows, or we can make lists ordered by letter instead of number, as an example.

Take a look at the example below where the order list has been styled to use letters instead of numbers, and the unordered list has been styled to use squares instead of circles.

Screen Shot 2017-04-14 at 4.41.21 pm

By adding the code display:inline; for the li element in your CSS code you can also show list items horizontally instead of vertically, as seen below.

Screen Shot 2017-04-14 at 4.43.34 pm

Watch the video below and then scroll down to see the sample code.

Here is the sample HTML code:

<!DOCTYPE html>
<html>
<head>
 <title>Styling lists</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="resources/stylesheet12.css" type="text/css"/>
</head>
<body>
 <h2>Cities</h2>
 <ol class="cities">
 <li>Sydney</li>
 <li>Melbourne</li>
 <li>Brisbane</li>
 <li>Perth</li>
 </ol>

 <h2>Countries</h2>
 <ul class="countries">
 <li>Australia</li>
 <li>France</li>
 <li>Canada</li>
 <li>New Zealand</li>
 </ul>
</body>
</html>

And here is the sample CSS code:

ol{
 list-style-type:lower-alpha;
 color:blue;
}

ul{
 list-style-type:square;
 color:green;
}

You can also add the following to your CSS code if you want list items to display horizontally:

li{
display: inline;
}

CSS nth-child selector

In a couple of the previous tutorials we looked at child selectors and pseudo classes. In this tutorial, we will move on to the nth-child selector. The nth-child selector is used to select every element that is the nth child of a parent. For example, you could apply a style to every 2nd paragraph (every 2nd child) in a div. When using the nth-child selector, ‘n’ can be a number, a keyword or a formula.

In the example below we can change the colour of every 5th paragraph inside a div called ‘mydiv’. Because ‘n’ is 5, every 5th element will be selected.

#mydiv p:nth-child(5){
 color:red;
}

Here is an example of a keyword being used to apply a background-color style to odd paragraphs inside a div:

#mydiv p:nth-child(odd){
 background-color:green;
}

Watch the video below to see some of the different numbers, keywords, and formulas that can be used with the CSS nth-child selector. Then scroll down to see the sample code.

Here is the HTML sample code:

<!DOCTYPE html>
<html>
<head>
 <title>CSS nth-child() selector</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="resources/stylesheet11.css" type="text/css"/>
</head>
<body>
 <div id="mydiv">
 <p>The quick brown fox jumped over the lazy dog</p>
 <p>The quick brown fox jumped over the lazy dog</p>
 <p>The quick brown fox jumped over the lazy dog</p>
 <p>The quick brown fox jumped over the lazy dog</p>
 <p>The quick brown fox jumped over the lazy dog</p>
 <p>The quick brown fox jumped over the lazy dog</p>
 <p>The quick brown fox jumped over the lazy dog</p>
 <p>The quick brown fox jumped over the lazy dog</p>
 </div>
</body>
</html>

And here is the CSS code showing just the ‘even’ selection example from the video:

#mydiv p:nth-child(even){
 background-color:black;
 color:white;
}

Make sure you watch the video to see more examples of the numbers, keywords and formulas you can use with the nth-child selector. This video is also available here on my YouTube channel.

Linking to the same page

We have already looked at how to link pages on a website. However, we can also link to different sections of a single web page. For example, if you have a long web page with lots of content, you can have a table of contents with links allowing the user to click on a link which will take them to a certain part of that web page.

You can link to other elements on a web page such as a heading, paragraph, div, or image. In this tutorial, we will look at how to link to different headings and images on a web page.

The example in the image below shows some links which when clicked will take the user to the corresponding headings with different sections of content. This example obviously looks a bit plain but using some CSS code we can style the links, headings and the rest of the content. You could also add some more code for a scrolling transition effect.

Screen Shot 2017-04-14 at 4.33.25 pm

Watch the video below which explains how to link to content on the same page, and then scroll down to see the sample code.

Here is the HTML code for the example shown in the video:

<!DOCTYPE html>
<html>
<head>
 <title>Linking to the same page</title>
 <meta charset="utf-8"/>
</head>
<body>
<h1>Linking to sections on the same page</h1>
<p>We have already looked at how to link pages on a website. However, we can also link to different sections of a single web page. For example, if you have a long web page with lots of content, you can have a table of contents with links allowing the user to click on a link which will take them to a certain part of that web page. You can link to other elements on a web page such as a heading, paragraph, div, or image. </p>
 
<a href="#one">One</a><br>
<a href="#two">Two</a><br>
<a href="#three">Three</a><br>
<a href="#four">Four</a><br>
<a href="#five">Five</a><br>
 
<h1> <a name="one"></a>One</h1>
<p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
</p>
 
<h1> <a name="two"></a>Two</h1>
<p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
</p>
 
<h1> <a name="three"></a>Three</h1>
<p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
</p>
 
<h1> <a name="four"></a>Four</h1>
<p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
</p>
 
<img src="resources/canada.jpg" width="300" height ="200"/><a name="five"></a>
 
 
</body>
</html>

Using CSS to style your webpage

CSS stands for Cascading Style Sheets and is a style sheet language that is used to describe the look and style of web pages. CSS can be used to create a theme by modifying the layout, colours, and fonts.

Without any special styling or formatting, the web pages that we create don’t look very exciting. That’s where CSS comes in! We can use CSS to change the colour of text and backgrounds, use different font styles, and change the layout and overall theme of our site. This tutorial explains how to use CSS in a webpage.

There are three different ways of applying CSS:

  • Inline styling – the style attribute is applied within the HTML tag
  • Internal style sheet – style attributes are applied to selectors inside the head section of a webpage
  • External style sheets – style attributes are applied in a separate CSS file that can be used across a website

Below is an example of how to use inline styling within a HTML tag:

Inline styling
Inline styling

Below is an example of how to place the styling within the style tag inside the head section of a webpage:

Adding CSS using the style tag in the head section.
Adding CSS using the style tag in the head section.

This video tutorial will focus on using inline styling and internal style sheets. The next tutorial will explain how to use external style sheets. Watch the video below to see how to use CSS and then scroll down to see the sample code.

The sample code below shows how to use inline styling:

<!DOCTYPE html>
<html>
<head>
 <title>Adding CSS to a webpage</title>
 <meta charset="utf-8"/>
</head>

<body>
 <h1 style="color:red">This heading is red.</h1>
 <h2 style="color: #FE2EF7; border: solid 1px">This heading is pink with a border</h2>
 <p style="color:blue">This text is blue.</p>
 <p style="color:green; background-color: yellow">This text is green on a yellow background</p>
</body>

</html>

The sample code below shows how to use an internal style sheet:

<!DOCTYPE html>
<html>
<head>
 <title>Adding CSS to a webpage using internal stylesheets</title>
 <meta charset="utf-8"/>
 <style type="text/css">
 p{
 color:blue;
 }
 </style>
</head>

<body>
 <p>This is a paragraph of text. Because a style has been applied using the p selector, this paragraph will be blue.</p>
</body>

</html>

Tip:

The sample code for inline styling uses the HTML colour code #FE2EF7 for the colour pink. You can use the names of colours  for basic colours such as ‘blue’ or ‘red’ but for other specific colours you will need to use the HTML colour code (a combination of letters and numbers after a hashtag). You don’t need to remember all the colour codes but it is good to remember  #000000 for black and #FFFFFF for white. You can see all the colour codes here.

Adding video to a webpage

This video tutorial explains how to add a video to your webpage using the HTML5 video tag. With the HTML5 video tag, you can specify the height, width, source, and type of video file(s) you are working with as well as adding controls, autoplay, and loop features.

When adding videos, you will need to consider browser compatibility. The following browser accept these videos using the HTML5 video tag (this could change):

  • Internet Explorer: MP4
  • Chrome: MP4, WebM, Ogg
  • Firefox: MP4, WebM, Ogg
  • Safari: MP4
  • Opera: MP4, WebM, Ogg

The safest bet is to use MP4 but it is a good idea to provide multiple file types. Keep in mind that the autoplay feature is currently not supported in Safari or Opera browsers and does not work on mobile devices such as the iPad or iPhone (this could also change).

When you add a video to your page you can specify the width and height, if you would like to auto-play the video, loop the video and if you would like to show or hide the video player controls. The video player controls look like this in Chrome browser:

Watch the video below and then scroll down to view the sample code.

The sample code below shows how to use the video tag. You might want to remove the autoplay, loop or controls attributes as they are all enabled in the example below. You will also need to change the width and height to suit your video.

<!DOCTYPE html>
<html>
<head>
 <title>Adding video to a webpage</title>
 <meta charset="utf-8"/>
</head>

<body>
 <video width="550" height="400" controls autoplay loop>
 <source src="your_video_file.mp4" type="video/mp4"/>
 Your browser doesn't support the HTML video tag. Consider upgrading to a newer browser.
 </video>
</body>

</html>

Adding audio to a webpage

This tutorial explains how to add audio to a webpage using the HTML5 audio tag. Because this tag is new to HTML5, it may not be supported in some older browsers. It is also important to note that some audio file types may not be supported in different browsers.

At the time of writing this tutorial, the following browsers support these file types using the HTML5 audio tag:

  • Chrome: MP3, WAV, OGG
  • Internet Explorer: MP3
  • Firefox: MP3, WAV, OGG
  • Safari: MP3, WAV
  • Opera: MP3, WAV, OGG

Using MP3 files for audio would be the safest bet as it is supported by all the major browsers now. For this tutorial, I will demonstrate using the HTML5 audio tag with an MP3 file. You can get free audio files from a range of sources including the YouTube Audio Library and Freesound.

When you add audio to a page you can specify whether you want to allow the audio to automatically play, loop over, and if you also want to show or hide the audio player controls which will look like this:

audioplayer

The video below shows how you can use the HTML5 audio tag to add an audio file to a webpage. It also shows how to add controls and how to autoplay and loop audio files. Watch the video below and then scroll down to see the sample code.

The sample code below shows how to add an audio file to a webpage. All you need to do is replace the filename/filetypes with whatever you are using. You might also like to remove the autoplay, loop, or control features. Note that all three of these features are enabled in the example below.

<!DOCTYPE html>
<html>
<head>
 <title>Adding audio to a webpage</title>
 <meta charset="utf-8"/>
</head>

<body>
<audio controls autoplay loop>
 <source src="your_audio_file.mp3" type="audio/mpeg"/>
 Your browser does not support the HTML5 audio tag. Consider updating to a newer browser.
</audio>
</body>

</html>

This tutorial video includes a portion of free music from the YouTube Audio Library. Music from the audio library can be used in your videos by you as long as you do not make it available, distribute or perform the music separately from your videos into which you have incorporated the music files, and as long as the music is not used in an illegal manner or in connection with any illegal content. Always read the terms and conditions.

Adding images to a webpage

This tutorial explains how to add images to your web pages using the HTML <img> tag. You can specify a number of attributes for an image including the following:

  • src – specifies the location or path of the image
  • width – specifies the width of the image
  • height – specifies the height of the image
  • alt – specifies alternative text to be displayed in case the image cannot load.

The structure of an <img> tag may be set out like the one below:

Here are a few important things to note:

  • You should aways use alt text in case the image cannot be loaded in the user’s browser

    This is what alt text looks like when an image can’t load:
    alttextAlt text often also shows up after a few seconds when the user hovers their mouse over an image.

  • The path and filename of the image specified in the src tag in your code must be exactly the same as the actual file
  • You should specify the width and height of the image so the correct space is set aside even if the image can’t be loaded
  • You can change the width/height of an image to make it smaller. However, it is a good idea to make the image the correct size in the first place to reduce the time it takes to download the image

Watch the video below to see how to use the <img> tag in your own web page and then scroll down to see the sample code.

This sample code shows how to add an image to a webpage. Copy this code into a new HTML file. Modify the width and height of the image in the code to suit your own image file and experiment with different size images.

<!DOCTYPE html>
<html>
<head>
 <title>My webpage</title>
 <meta charset="utf-8"/>
</head>
<body>
<img src="batman.png" alt="Batman" width="400" height="400"/>

<!-- Make sure you include the full file path of an image if it is located in a different folder eg. folder2/batman.png 
-->
</body>
</html>

How to make an image a link

If you want to make an image a link so that when the user clicks on image they are taken to another page, you can just place the image tag inside the link tag (instead of text for the link). As an example, the following code would take the user to ‘other_page.html’ when they click on the image which has the file name ‘your_image.png‘:

<a href="other_page.html"><img src="your_image.png"/></a>

After watching the video, answer the following questions for discussion before the next lesson:

  1. Which unit of measurement is used to specify the width/height of an image in the code? How could the use of this unit affect the way images are displayed on screens of different sizes?
  2. Are there any other units of measurement that can be used?
  3. What could cause an image to fail to load in a user’s browser?
  4. Why is it important to use images with smaller file sizes?
  5. What issues need to be considered before including images on a web page?
  6. Evaluate the effectiveness of using images to convey large amounts of information on a web page.

Now create your own web page using several of your own images combined with text. You can use the sample code above to get started.

Once you are ready to move on, click here to find out how to add audio to your web pages.