How to Develop a Basic Webpage Using HTML and CSS

February 4, 2020

Video demonstration of how to develop a basic webpage using HTML and CSS

This tutorial is part 2 of a series of web design tutorials that I am currently putting together. Following on from Part 1, it is designed to provide an introductory foundation to coding for the web. This tutorial covers the following topics:

Getting started

Take the folder you created in part 1 and make a copy of it called ‘my-webpage-2’ (or similar).

Working with placeholder content

Sometimes when developing a webpage it is useful to work with placeholder content for things like text paragraphs and images. See the placeholder links above. Otherwise here is a simple bit of code that includes two headings and a paragraph of text:


<h1>Heading 1</h1>
<p>Vestibulum augue habitant tristique adipiscing fringilla hac sociis porttitor penatibus parturient euismod gravida penatibus penatibus ridiculus parturient class condimentum dapibus donec est morbi vivamus mi iaculis praesent vulputate. Leo consectetur arcu justo vitae dapibus dictumst augue at turpis mollis felis feugiat scelerisque ad nullam. Augue vestibulum per etiam maecenas praesent duis a per mi vestibulum.</p>
<h2>Heading 2</h2>
<ul>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
</ul>
<h2>Heading 2</h2>

Adding images

See working with images on W3Schools. The basic code to add an image is something like this:


<img src="images/frog.jpg" alt="Red eyed tree frog">

Note that an image tag is self closing. The ‘src’ is the path to the file. In this case it is looking for the directory called ‘images’ and then the file in it called ‘frog.jpg’. It is important to include the file extension eg .jpg, .png etc. The alt tag is a description of the image. This is important for accessibility for visually impaired people as it describes the image for them.

You can copy and paste this code into your webpage however it will not work until the image is actually in the ‘images’ directory and named accordingly.

To source images that are likely to be OK to use in terms of copyright, search for something in Google images and the select Tools – Labelled for Reuse. Then click on an image to see the full image and either right click and save it to your webpage ‘images’ folder, or click and drag it there etc.

If you hover your cursor over the images you will see numbers which will show you the resolution of the images. Sometimes this can be misleading if images have been scaled to be larger than they actually are however generally the higher the number the more detail or resolution in the image.

See W3Schools – HTML links. The basic format for a link is something like this:


<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

Here the link tag element is ‘a’, the href is the path for the link. In this example the link tag is wrapped around some text. You can also wrap an image in a link, something like this:


<a href="https://en.wikipedia.org/wiki/File:Red_eyed_tree_frog_edit2.jpg">
   <img src="images/frog.jpg" alt="Red eyed tree frog">
</a>

Relative versus absolute file paths

The first example above is an ‘absolute’ link in that it is linking to a page on the web and the address starts with ‘https://…”. In the example for the image link however the link is a ‘relative’ link, in that the path for the linked file is relative to location of the page that is calling the link.

If for example you need a relative link that is like going up a folder level you would start the relative link with ‘../’. The ‘../’ is the path to go up a level from the folder that the current file is in.

Responsive web design

To put it very simply responsive web design is about designing websites that will fit into differently sized screens. I think the article ‘Grid by Adam Kaplan‘ does a great job of explaining the main concept here.

The viewport meta tag

As mentioned in Adam’s article the viewport meta tag is an essential ingredient that allows webpage to scale for different screens. This goes between the head tags in your html:


<meta name="viewport" content="width=device-width, initial-scale=1">

Inline versus external CSS

See article on W3Schools – How to Add CSS. If I was doing a single page demonstration I would most likely include the CSS ‘inline’ between the head tags, something like this:


<head>
  <title>My First Webpage</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <style>
			
    /* CSS style goes here */
   </style>
</head>
<body>
....

In this example the CSS is embedding within the one html document. Inline CSS can be included anywhere in an HTML document, opening and closing with the style tag. When creating a website with multiple pages however you will most likely want each page to refer to the same style sheet. In this case it is best practice to create your CSS file as an external document and put it in your css folder. You would link to it by adding the following code between the head tags.


<link rel="stylesheet" type="text/css" href="css/style.css">

Using you code editor create a new file and save it as ‘style.css’ into you css folder.

How CSS Works

What we are doing here is applying a style to the body tag. So everything between the body tags will inherit this style. In this example ‘background-color’: is a property and ‘lightblue’ is the value we are assigning to that property. An element can have multiple styles applied to it. See W3Schools – CSS Syntax.

CSS is a relatively complex language. It can take a while to become familiar with all the CSS properties you eventual use to style websites.

Basic CSS layout stying

Try adding the following code to your CSS document, just to check that it is all connected properly.


body {
  background-color: lightblue;
}

Save all your documents and view your webpage in the browser. You should see the blue background.

If you have included an image that has a high resolution may find that it doesn’t fit into you webpage area. A bit of CSS code can help with this:


img {
  max-width: 100%;
}

This makes sure that the maximum width of any image element is no bigger than the element that contains it.

As in Adam Kaplans article, creating a container div is a good way to enclose a bunch of elements in a single element that can be styled accordingly, something along the links of:


<!DOCTYPE html>
<html>
  <head>
    <title>My First Webpage</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>
  <body>
    <div class="container">
      <h1>Heading 1</h1>
      <p>Elements inside a container</p>
    </div>
  </body>
</html>

The difference between ID and class

In the example above ‘container’ is a div or ‘division’ we have created with our own name of ‘container’. We have defined it as a class which means that it is can be applied to multiple elements and an element can have multiple classes. You can think of wrapping elements in a div as putting a fence around them.

Here is a crude example that shows multiple classes and styling being applied to different elements.


<style>
  .angry {
    color: red;
  }
  .intense {
    font-style: uppercase;
    font-size: 44px;
    border: 3px solid red;
    background-color: lightyellow;
  }
</style>
<h1 class="angry intense">
  Angry and Intense
</h1>
<h1 class="angry">
  Angry only
</h1>

If you do this example you will notice how the styling for the heading element goes across the whole line. That is because by default a heading is what is referred to as a ‘block’ element. Block elements span a whole line. This relates to fundamental layout properties which I will go into in more detail in a later tutorial.

ID tags are normally used for single elements that you want to refer to specifically, usually with code like Javascript. An ID tag could be written and styled like this:


<style>
  #custom-element {
    /* styles here */
  }
</style>
<div id="custom-element">Custom Element</div>

Here is a really simple formula for a container div that can work well with responsive web design. In this example I have put a border around it so it is easier to see. Because it is a class in CSS you must refer to it with a period (or “full-stop”) before the name.


.container {
  width: 90%;
  max-width: 600px;
  margin: 0 auto;
  border: 1px dotted #ccc;
}

The width and max-width properties are fairly self explanatory. Margin is a very commonly used properties that refers to the space around an element, ie the margin of space between that element and the one before or after it. margin: 0 auto is a useful formula for horizontally centering an object.

CSS Shorthand

In the above example I have used a form of CSS shorthand that applies multiple values to one property. Because the height and bottom and then the left and right have the same properties accordingly it can be written with 2 values. Just to give you an idea this could also be written like this:


.container {
  width: 90%;
  max-width: 600px;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
}

If it was the same margin being applied on all sides it would be written like this, where the margin would be 20pixels on each side:


.element {
  margin: 20px;
}

Alternatively I could apply different values to the top, right, bottom and left accordingly like so:


.element {
  margin: 10px 20px 30px 40px;
}

This would be exactly the same as writing:


.element {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

For this type of thing I tell my students to think clockwise starting with the top, much like a clock. Top, right, bottom, left.

If you have two values (eg margin: 10px 40px;) the first value is the top and bottom and the second value is the left and right.

Working with HTML and CSS comments

See W3Schools HTML comments. Comments are really useful for disabling code and putting comments in your code for you or other developers to refer to.

An HTML comment is done like this:


<!-- HTML comments here -->

A CSS comment is done like this:


.container {
  width: 90%;
  max-width: 600px;
  margin: 0 auto;
  /* border: 1px dotted #ccc; */ 
  /* this code has been commented out */
}

Working with colour

See W3Schools – colors and W3School – Color Picker. I won’t get into too much detail about this now but there are various methods for coding colour that include thinks like:

Putting it all together

Here is an example HTML code of what you want to aim for:


<!DOCTYPE html>
<html>
<head>
  <title>My First Webpage</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
  <div class="container">
    <h1>Heading 1</h1>
    <p>
        Vestibulum augue habitant tristique.
    </p>
    <h2>Heading 2</h2>
    <ul>
      <li>Lorem ipsum dolor sit amet.</li>
      <li>Aliquam tincidunt mauris eu risus.</li>
      <li>Vestibulum auctor dapibus neque.</li>
    </ul>
    <h2>Heading 2</h2>
    <a href="https://en.wikipedia.org/wiki/File:Red_eyed_tree_frog_edit2.jpg">
      <img src="images/frog.jpg" alt="Red eyed tree frog">
    </a>
	
    <a href="https://en.wikipedia.org/wiki/File:Red_eyed_tree_frog_edit2.jpg">
      Link to image on Wikimedia Commons 
    </a>
  </div> <!-- close container -->
</body>
</html>

And here is the CSS:

body {
  background-color: lightblue;
}
img {
  max-width: 100%;
}
.container {
  width: 90%;
  max-width: 600px;
  margin: 0 auto;
  /* border: 1px dotted #ccc; */
}

I would love to make it my thing to create tutorials and learning resources that are 100% free with no strings attached.

If this tutorial was useful for you please consider showing your appreciation and offering your support. It will make my day!

Buy me a coffee