Test HTTP Requests Tools Blog Learn Quizzes Smile API Log In / Sign Up
Test HTTP Requests Tools Blog Learn Quizzes Smile API Log In / Sign Up
« Return to the tutorials list
We have updated the website and our policies to make sure your privacy rights and security are respected.
Click here to learn more about the way our website handles your data.

Remove this message.

HTML for Beginners - Part 4 - Let's make a web page

Daniel Gheorghe Difficulty: 10 / 50 Tweet

This article is old. Be careful! It might contain outdated information.
Here's an alternate resource that I am recommending for this topic.

Nicely-positioned-elements

In my last tutorial on HTML for beginners, you've learned how to create a web page that contained an image and a title. The goal for today is to go one step further and create an actual design for our HTML web page. Once it's done, the web page should look like the image below.

The goal of this tutorial is to create an HTML page that looks like this image

In previous lessons we discussed a little bit about HTML attributes. As I said then, an attribute is defined inside the opening tag of an HTML element and it has a name and a value. One of the most important attributes that can be added to any HTML tag is the 'class' attribute. This is used to link the content of the HTML document to a set of CSS rules that will define the appearance of that particular element. In other words CSS rules define how an HTML element looks.

Let's resume our activity from where we left off. We had a folder containing two files: an image (logo.svg) and an HTML file with this code in it:

  
    <!DOCTYPE html>
    <html>
      <head>
        <title>My First Web Page</title>
      </head>
      <body>
        <h1>My First Web Page</h1>
        <img src="logo.svg">
      </body>
    </html>
  

Add all the elements

Now let's define the extra HTML elements that we will need by examining the image preview from top to bottom. We need an element to contain the heading, two columns in the middle to hold text and an element at the bottom to wrap the 'footer' of our page. Many developers will tell you that a container is usually a 'div' element. While that's true, in HTML5, various pieces of the page should be contained in elements that better describe the content inside. For example, content that sits at the top of the web page should be wrapped inside the 'header' tag, while the main content area can sit inside the 'main' tag.

Other tags that we will be using in our code are: 'p' for paragraphs, 'figure' used to wrap the images inside the article and 'footer' used to contain the bottom part of the web page.

By default, HTML containers will just stack one below the other and they will have no 'style' at all. To make them look like the elements in our preview we will add 'class' attributes to each of them. We will then use the class elements to define style sheet rules for each class, but let's not worry about styling for now. Here's the source code for our new page.

  
    <!DOCTYPE html>
    <html>
      <head>
        <title>My First Web Page</title>
      </head>
      <body>
        <header class="header">
          <h1>My First Web Page</h1>
        </header>
        <main class="main">
          <article class="article-column">
              <h3>Lorem Ipsum 1</h3>
              <figure>
                <img src="logo.svg">
              </figure>
              <p>
              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
              </p>
          </article>

          <article class="article-column">
              <h3>Lorem Ipsum 1</h3>
              <figure>
                <img src="logo.svg">
              </figure>
              <p>
              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
              </p>
          </article>
        </main>
        <footer class="footer">
          <p>This is a footer</p>
        </footer>
      </body>
    </html>
  

Once you've saved your file and opened it in your browser, you should see a web page that looks like the screen-shot below.

A screen shot of how your page should look like after you have applied the code above

Not very nice isn't it ? Don't worry we'll make it look nice and sharp in a second!

Make it pretty with CSS

As I said earlier the class attribute in an HTML element allows you to add style-sheet rules in order to change the appearance of the respective tag. These style-sheets are better known as CSS and they are a collection of properties that browsers interpret to display elements in a certain way. CSS can be written in three ways:

  1. Inside the 'style' HTML attribute of each element
  2. Inside the special 'style' HTML tag which resides in the 'head' of the document
  3. In a separate file that is tied to the HTML document through the 'link' tag that also resides in the 'head' area of your code

Here's an example. The comments inside the code describe each possible way of writing CSS.

    
      <!DOCTYPE html>
      <html>
        <head>
          <title>My First Web Page</title>
          <!-- One option is to link to an external stylesheet file. Like this: -->
          <link rel="stylesheet" type="text/css" href="stylesheet.css">
          <!-- You could also not link to an external file. Instead you could write all your CSS rules inside the <style> tag: -->
          <style>
            .header { height: 100px; background: orange; }
          </style>
        </head>
        <body>
          <!-- You can even write your css as the value of the style attribute of the tag itself: -->
          <header class="header" style="color:blue; width:100%;">
            <h1>My First Web Page</h1>
          </header>
        </body>
      </html>
    
  

For now we will write our CSS inside the 'style' tag, but you should know that the best way to write CSS is to place it in an external file so it doesn't get mixed up with the HTML code.

A few more things about CSS before we get down to business

A CSS rule consists of two elements: a selector (a way of identifying the target of that rule) and a set of properties contained between curly brackets and separated by semicolons:

    
      selector {
        propertyname: propertyvalue;
        secondpropertyname: secondpropertyvalue;
      }
    
  

CSS selectors can be:

  • Class selectors - written using a dot(.) before the name of the class. For example, writing .classname { height: 100px; } means that all the HTML elements that have class="classname" will have a height of 100 pixels.
  • CSS can also be written by using the HTML tag name as the selector, without the need to specify an attribute. For example, this rule body { background: black; } means that the background of the entire website body will be black.
  • Another way of writing CSS is by using id selectors, which point to the id attribute of the HTML tag. This is done by preceding the value of id with the hash sign. (Ex: #elementid { text-align: center; }. This means that the text inside id="elementid" will be center aligned.)

Let's wrap this up

Here's the full source code of your new HTML document:

  
    <!DOCTYPE html>
    <html>
      <head>
        <title>My First Web Page</title>
        <style type="text/css">
          body {
            font-family: Arial, Helvetica, 'sans-serif';
            margin: 0;
            padding: 0;
            font-size: 14px;
          }

          .header {
            height: 110px;
            background: #b2cfc0;
            width: 100%;
            overflow: hidden;
            text-align: center;
            padding-top: 40px;
          }

          .pagetitle { 
            font-weight: normal;
          }

          .main {
            width: 100%;
            margin: 0;
            box-sizing: border-box;
            padding: 50px;
            overflow: hidden;
          }

          .article-column {
            width: 50%;
            display: block;
            float: left;
          }

          h3 {
            font-weight: normal;
            text-align: center;
            font-size: 28px;
          }

          .article-image { 
            width: 100%; 
          }

          .footer {
            height: 100px;
            width: 100%;
            background: #434542;
            color: white;
            padding-top: 50px;
            text-align: center;
            font-size: 18px; 
          }
        </style>
      </head>
      <body>
        <header class="header">
          <h1 class="pagetitle">My First Web Page</h1>
        </header>
        <main class="main">
          <article class="article-column">
              <h3 class="article-title">Lorem Ipsum 1</h3>
              <figure>
                <img class="article-image" src="logo.svg">
              </figure>
              <p>
              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
              </p>
          </article>

          <article class="article-column">
              <h3 class="article-title">Lorem Ipsum 1</h3>
              <figure>
                <img class="article-image" src="logo.svg">
              </figure>
              <p>
              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
              </p>
          </article>
        </main>
        <footer class="footer">
          <p>This is a footer</p>
        </footer>
      </body>
    </html>
  

You are not done! You have just managed to create your 'basic' web page using HTML5 and CSS. I recommend that you try and find out what each of the CSS properties in this tutorial is about and that you play with CSS and HTML as much as possible until you really get the hang of it.

comments powered by Disqus