Let's get started...

Create a HTML file

Every web site starts with a HTML file, so let’s create one. Click on the Ask me anything box in the start bar at the bottom-left of the screen, type Notepad++ and click return to launch the editor. Then copy the following HTML content into Notepad++ and save it as a file called index.html.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Page Title</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- Write your content in the space below -->

</body>
</html>

index.html

All HTML files have 2 parts. At the top of the file is the <head> section and this contains instructions for the browser. In this case we have a page title and a link to the CSS stylesheet that we will create in a moment.

The <body> section is where you will put all the text and images for your web page. We will add content here in a moment.

Create a CSS file

To create your stylesheet file go the the File menu of Notepad++ and choose New. Then copy the following content into Notepad++ and save it as a file called style.css.

body {
  color: #000000;
  background-color: #FFFFFF;
}

h1, h2, h3, h4, h5, h6 {
  color: #990000;
}

style.css

You have now created the blank template for your web site, so let's jump to the next section and add some content.

Creating some content

Text on a web page is generally made up of headings and paragraphs. Each HTML file should have a single <h1> tag as its page title. Your text content should be set in series of <p> paragraph tags. Sub-categories can be defined using <h2> through <h6> heading tags. The numbers in the heading tags refer to their importance, where 1 is the most important and 6 is the least. When we try this in a moment you will see the their size is linked to their importance. So let's try this in an example by adding the following code to the index.html inside body tags.

<body>

    <h1>This is the page title</h1>
    <h2>This is sub-heading 2</h2>
    <h3>This is sub-heading 3</h3>
    <h4>This is sub-heading 4</h4>
    <h5>This is sub-heading 5</h5>
    <h6>This is sub-heading 6</h6>

    <p>
        This is a paragraph of text on my web page.
    </p>

</body>

Now open this file in your browser and see how it looks...
This is your first web page ☺

Lists

Now that we know how to add text to our web page, let's customise it and add lists of information. There are 2 types of list, bullet point lists <ul> and numbered lists <ol>. Let's change the web page body as shown below.

<h1>My first web page</h1>
<p>I am so excited to be learning HTML and CSS at Coder Dojo.</p>

<h2>What I know now</h2>
<p>
    I have developed this list of skills
</p>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>Adding images Google</li>
</ul>

<h2>My favourite foods</h2>
<p>
    Learning to create web pages makes me hungry.
    So here is a list of my favourite foods.
</p>
<h3>Snacks</h3>
<ol>
    <li>Crisps</li>
    <li>Biscuits</li>
    <li>Coca Cola</li>
</ol>
<h3>Lunches</h3>
<ol>
    <li>Pizza</li>
    <li>Baked beans</li>
    <li>Sandwiches</li>
</ol>

Images and photographs

No web page would be complete without images, so let's add some. These can be picture files stored on your computer or you can link to other image files already on the internet. To find an image go to oogle and search for a subject such as spongebob, gaming or football then click on the Images link. Scroll down until you find an image you like then click on it. Then click on the View Image button to the right of the image to see it on its own. The browser address bar will now contain the URL pointing to the image and you should copy that by double clicking on it then pressing [Ctrl] [c] on your keyboard.

<img src="http://www.disruptorcup.com/img/coderdojo-logo-new.png" width="200">

You add images to your page body using the <img> tag. Unlike previous tags this one does not need a closing tag! You simply provide the URL to the image and optional width.

Creating some style

Web Design with HTML and CSS