Making a Website: Part 2

Basic Expectations:

For this (the second tutorial in the series) you will need to have everything mentioned in part 1 and to have done everything in part 1. If you haven’t, no worries, just click the link above and use that.

Code So Far:

Hopefully you will have something that looks like this in your editor:

<!DOCTYPE html>
    <html>
        <head>
            <title>Your Title Here</title>
        </head>
        <body>
            <h1>A Heading</h1>
            <p>A Paragraph</p>
        </body>
    </html>

(But obviously with the “Your Title Here”, “A Heading” and “A Paragraph” replaced with the Titles, Headings and Paragraphs you want.

What are we doing next?

Now whilst that is functional it doesn’t look good. We need to add some colour, fonts and start making things look cool!

Fonts

First things first, the font that HTML uses by default is called Times New Roman. Personally, I think it looks pretty ugly:

So, we are going to start with changing our <title> and <paragraph> to a different font. I quite like the font Trebuchet MS:

Now we can change the font in HTML but after a while, it can get untidy so we are going to use a new language called CSS to do it. Don’t worry, you won’t have to rewrite your code, simply add the <style> tag in your <head> section and the code will work out that we are using a different language

<!DOCTYPE html>
    <html>
        <head>
            <title>Your Title Here</title>
            <style>
            </style>
        </head>
        <body>
            <h1>A Heading</h1>
            <p>A Paragraph</p>
        </body>
    </html>

Now we have those, we need to specify which part we want to add our font to, we want it for our <p> and <h1> tags. They come under the section <body> so we can put body into the <style> code to cover both of them. Next, insert a pair of “curly” brackets like this: {}

<!DOCTYPE html>
    <html>
        <head>
            <title>Your Title Here</title>
            <style>
                body {
                }
            </style>
        </head>
        <body>
            <h1>A Heading</h1>
            <p>A Paragraph</p>
        </body>
    </html>

We can now (finally) add our font. After the first { type in “font-family:” but without the ” ” marks. Next, specify the font’s name, in our case ‘Trebuchet MS’ and DO include the ‘ ‘ this time. You will now need to add a , and then type the font’s family (imagine it like this: the font-family is a group of fonts that are all similar and the computer needs to know which family the font you want to use is in so it can find it and switch your text). “Trebuchet MS” is in the “sans-serif” family so add that after the comma but without the ” ” marks. Finish it off with a semicolon (;), this tells the computer that the line is finished.

In the end it should look like this:

<!DOCTYPE html>
    <html>
        <head>
            <title>Your Title Here</title>
            <style>
                body {
		      font-family: 'Trebuchet MS', sans-serif;
                }
            </style>
        </head>
        <body>
            <h1>A Heading</h1>
            <p>A Paragraph</p>
        </body>
    </html>

Colour

Now we know the basics it will be easier. I think our website would look cool with a black background and white text so let’s add that next. In CSS, colours are always said in one of these three ways: name (I.E. black, red), HEX (I.E. #AH5J2) or RGB (I.E. 255 163 195). Today, because black and white are very simple colours we can use just the name but if we wanted a dark-red we would have to use a specific HEX or RGB code.

To change background-colours we need to add a “background-color” CSS element. CSS was written by an American so it has to use American spellings like color all the time. Using the same sort of thing that we used for the fonts you want something like this:

<!DOCTYPE html>
    <html>
        <head>
            <title>Your Title Here</title>
            <style>
                body {
		      font-family: 'Trebuchet MS', sans-serif;
                      background-color: black;
                }
            </style>
        </head>
        <body>
            <h1>A Heading</h1>
            <p>A Paragraph</p>
        </body>
    </html>

Now the text colour, basically the same thing use the color element now:

<!DOCTYPE html>
    <html>
        <head>
            <title>Your Title Here</title>
            <style>
                body {
                      font-family: 'Trebuchet MS', sans-serif;
                      background-color: black;
                      color: white;
                }
            </style>
        </head>
        <body>
            <h1>A Heading</h1>
            <p>A Paragraph</p>
        </body>
    </html>

It should look something like this:

Extras

It would like even better if we had some other things like text-align and borders. We can even do different things for different headings and paragraphs. For now, I’m just going to post the code as it is easy to understand what it means and you can experiment!

<!DOCTYPE html>
    <html>
        <head>
            <title>Your Title Here</title>
            <style>
                body {
                      font-family: 'Trebuchet MS', sans-serif;
                      background-color: black;
                      color: white;
                }
                h1 {
                    border: 5px solid white;
                    text-align: center;
                    padding: 25px;
                    margin: 30px;
                }
                p {
                    margin: 30px;
                }
            </style>
        </head>
        <body>
            <h1>A Heading</h1>
            <p>A Paragraph</p>
        </body>
    </html>

End Note

If you have copied the code above then you will have something like this:

If you want a full list of all the CSS properties you can add and tutorials for each one then visit here.