Tag Archives: website

HTML5 and CSS3, Video

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>
HTML5 and CSS3, Video

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.

HTML5 and CSS3, Video

Paragraphs, line breaks and headings in HTML

In this tutorial we will look at some HTML tags that you can use to place text inside your webpage. All of these tags are used in the <body> section of the webpage. The following HTML tags (also known as elements) are discussed in this tutorial:

  • The <p> tag is for paragraphs
  • The <br/> tag is for line breaks
  • The <h1> to <h6> tags are used for different size headings

Watch the video below or scroll down to read the instructions on how to create paragraphs, line breaks, and headings.

The paragraph tag

The first tag we will use is the <p> tag to create a paragraph. Paragraph text goes between the <p> and </p> tags. Paragraphs are separated by a space.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Paragraph example</title>
</head>

<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>

</html>

The HTML code above would tell you web browser to display two paragraphs like this:

Two paragraphs
Two paragraphs

The line break tag

To put text in your webpage you don’t even need to use a <p> tag. You can actually just type the text straight in. However, if you add new lines for text inside your HTML document, it won’t actually show a new line in the web browser – all your text will be on one line. If you want to create a new line, then use the line break <br/> tag. This tag will create a new line where the text will continue on.

Use the code below to see how the <br/> tag adds a new line. Two things to note: The <br/> tag is a single tag so it does not require an opening and close tag combination. The <br/> tag does not add spacing between lines like the paragraph tag does.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Line break example</title>
</head>
<body>
This is a line of text.<br/>This is another line of text.
</body>
</html>

You can see the difference between using line breaks and paragraphs below. Note that there is no spacing between the text that uses a line break, but there is space between the paragraphs.

Using line breaks
Using line breaks

The heading tags

There are a number of different tags you can use to create a heading because there are a number of different heading sizes. The largest heading size tag is <h1> and the smallest is <h6>. For example, if you want to create a large heading then you would place the text inside the <h1> and </h1> tags.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Headings examples</title>
</head>
<body>
<h1>This is the largest heading</h1>
<h2>This is a large heading
<h3>This is a medium heading</h3>
<h4>This is a small heading</h4>
<h5>This is a smaller heading</h5>
<h6>This is the smallest heading</h6>
</body>
</html>

This is what the different size headings would look like:

Headings of different sizes
Headings of different sizes
HTML5 and CSS3, Video

Getting started with HTML5 and CSS3

HTML (HyperText Markup Language) is the markup language that is used to create web pages. It is written using HTML elements, also known as tags. These tags are enclosed in angle brackets. Tags often come in pairs such as <p> and </p> but this is not always the case as some tags are unpaired, for example <br/>.

Web browsers such as Google Chrome, Internet Explorer, Safari or Firefox are able to read HTML files and display them as web pages on your screen. The tags tell the web browser what to display in the browser and how to display it. HTML files end in the .html file extension and can be edited in any text editing program.

HTML is the basic building block of all web pages but most websites today don’t just use standalone HTML. Web pages can be supported by CSS (Cascading Style Sheets) which define the look and layout of text and other elements on multiple pages, and other scripts written in languages such as JavaScript which can control how a web page behaves.

This tutorial is the first in the HTML5 and CSS3 video tutorial series. These videos will show you everything you need to begin creating your own website.

To begin writing the code for your own webpages you will need to download and install a good text editor for coding. The good news is that there are plenty of free text editors that can do this well. Here is a list of good text editors you can use to write your code:

I often choose to use Sublime Text or Atom on Mac (and you’ll see this in screenshots throughout this tutorial series) but you can choose any program you like – they are all fairly similar to use.

All of the main code editors are very easy to use. Basically you open a new file, save it as a file which ends in .html and then type in your code. You can usually see all your folders and files listed in the side as well.

Here is a screenshot of the Atom code editor. showing a list of folders on the left and the code on the right. You can work on multiple files in different tabs and also see the line numbers for your code next to each line of code.

atomdemo

Once you have dowloaded your HTML text editor, install and run it. Create a new file and save it as index.html – make sure that the file type is set to HTML (HyperText Markup Language). Your homepage should always be saved as index.html – by using the name index it will be recognised as the homepage in. You can name your other pages whatever you like eg. about.html or contactus.html – but it is good practice to not use spaces in your filenames.

Watch the video below to see how to build your very first web page and then scroll down to see the code and find out what is happening on each line of code.

Take a look at the sample HTML code below and then scroll down to find out what each line of code does.

<!DOCTYPE html>
<html>
<head>
 <title>My first web page</title>
 <meta charset="utf-8"/>
</head>

<body>
<p>This is my first web page.</p>
</body>

</html>

The first line tells the browser that the file or document type is HTML. The second line is the opening <html> tag for the HTML document which is paired with the closing </html> tag on the last line. The <html> tag indicates that your HTML code begins here. All of your code goes between the <html> and </html> tags.

<head> is the first section of the HTML document which contains background information about your webpage. This includes the character set that will be used (UTF-8, which represents every character in the Unicode set) and things such as the title of the web page which is usually displayed at the top of the browser window or as a label on your browser tab.

The webpage title shown in the browser tab.
The webpage title shown in the browser tab.

Note that the <head> tag is paired with the </head> tag. Whatever goes inside the <head> section is not actually displayed on your web page. It just includes background information about your webpage.

The next tag you will see is the <body> tag. Everything between the <body> and </body> tags is content that will be shown on your webpage. This includes text, images, tables, and other content.

The first HTML element (tag) we will use in the body section is the <p> tag which will make a paragraph of text. The content of your paragraph goes between the <p> and </p> tags. Create a new file and try it out!

Copy and paste the code from above in your new file, then click on File and Save As to save your text file as a HTML file. Choose a name for your file and end it in the .html file extension. If this is going to be your homepage, then name it index.html – also, if the option is available then make sure you choose “Hypertext Markup Language (.html)” next to “Save as Type”.

Saving your webpage
Saving your webpage

Save the file and open it with your web browser (eg. Chrome). Your page should look like this:

Your first webpage
Your first webpage