A simple web page made with minimal HTML and a small amount of CSS
So you want to build a simple html page template for your site? Now there are a number of ways to do this. One of the quickest way would be to create a WordPress site
If you want to take out all the complications of scripting download: how to create a website with wordpress PDF
WordPress is a great option if you want to quickly create a site for your business or hobby, and there are many free downloadable themes that you can use to get your site looking good in a matter of minutes.
If on the other hand you want to take a bit longer to create a very simple site using HTML and CSS then continue.
Also if you want to skip the basic html template we are going to create below and move on to creating the html page in the title image then move on to creating a simple Html Basic Template
Otherwise lets get to it…
The following will be a quick lesson in how to learn html, after that we will be creating the simple web page that will scale to work on tablets and mobile phones.
For this html tutorial all you will need is a text editor and a web browser, now unless you have a very limited computer set up these should be native to any system.
I use a program call Sublime Text, this is a free text editor that has some great tools for debugging script and code, another good editor is Notepad++ this again is a free text editor that is pretty much the same.
If you don’t want download anything new then you can simply use the regular Note Pad you get with Windows, they will all work the same.
Create a new folder first by right clicking on your desktop New>Folder name it simple site and then within the folder right click and select New>Text Document, we want to call the text file Simple_site with an underscore.
This is what our setup will look like:
HTML stands for – Hyper Text Markup Language and CSS stands for – Cascading Style Sheets. Both of these names can sound ambiguous at first, but simply one structures text within your document by marking it up with tags, the other will depict the style (how it looks) using selectors.
Now take the following text and copy it into your simple site text file
Title - peter piper
sub header - picked a peck of pickled peppers
paragraph -
Peter Piper picked a peck of pickled peppers.
A peck of pickled peppers Peter Piper picked.
If Peter Piper picked a peck of pickled peppers,
Where's the peck of pickled peppers Peter Piper picked?
This text document has a header, a sub header and a paragraph, to create the same thing in html we would mark the lines of text up with <tags> as follows…
To create the same thing in html we would mark the lines of text up with <tags> as follows…
<h1>peter piper</h1>
<h2>picked a peck of pickled peppers</h2>
<p>Peter Piper picked a peck of pickled peppers.
A peck of pickled peppers Peter Piper picked.
If Peter Piper picked a peck of pickled peppers,
Where's the peck of pickled peppers Peter Piper picked?</p>
- H1 stands for Header 1
- H2 stands for Header 2
- P stands for paragraph
We use brackets <> to signify that this is a tag and that the text in between is being formatted in some way.
To show the start and end of the element we have to have both an open tag <p> and a corresponding closing tag </p> this is denoted by the forward slash.
Now as it is this wouldn’t be a valid html document because we haven’t told the browser to treat it as one. To do this you need to add the following tag to the top of the page:
<!DOCTYPE html>
This explicitly specifies the rules of the document so that the browser can render its properties correctly.
We will go back to the example and add the DOCTYPE deceleration and a few other tags that I will explain
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Peter Piper</title>
</head>
<body>
<h1>peter piper</h1>
<h2>picked a peck of pickled peppers</h2>
<p>Peter Piper picked a peck of pickled peppers.
A peck of pickled peppers Peter Piper picked.
If Peter Piper picked a peck of pickled peppers,
Where's the peck of pickled peppers Peter Piper picked?</p>
</body>
</html>Now the Above code is compliant and will show properly in a web browser.
If you ever want to find out if you code is cosha then you can add a link to your page or just simply add some html script directly into the text window here at the world wide web consortium page
The W3 provides a set of specifications that your web page should adhere to in order to meet a common standard within the world wide web.
If your html page meets the standards you have the prestige of displaying their approved icon on your page.
Back to the html….
We start off with the <!DOCTYPE html> this sits at the very top of the page providing the browser with rendering information.
The next tag is the <html> tag this specifies where the html script starts.
Between the opening tag and the corresponding closing tags, all the way at the bottom, comprises everything in your html page.
Now the next tag is the <header> this holds meta data about the document, this includes the title, external links to scripts and style sheets and information about
data encoding within the document.
The <meta charset> is providing more information about the document, in this example the character encoding UTF-8.
Next is the <title> tag, this is not to be confused with the title within your page, this will usually be a <h1> tag, it is actually the text that appears in the tab when you open your page in a browser.
Your title is considered very important when it comes to Search engine optimisation (SEO), this is the act of making your site visible to the search engine after you have created it.
The word or phrase you put here can help a lot when google spiders crawl your site and deciding how to rank it.
So when it come to choosing your title take some time make sure its something that people might search for and don’t make it too long.
Now we close the header section with the </head> tag denoted by the forward slash.
It very important you don’t forget the closing tags without them your site may experience problems.
If in doubt validate it with the W3 world wide web consortium page
Now these first lines of script including the head tag, meta tag and Doctype deceleration can be confusing, but just know that the main part of you web sites structure is within the next segment of the page the <body></body>
Apart from adding some links to external files and scripts (we will go into this soon ) you don’t have to worry about the first part too much, in fact you can create and save a template of an html document with the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>x</title>
</head>
<body>
</body>
</html>This will stop you from having to type the same script out every time.
The body tag is the daddy of tags because between the opening and closing of these is essential the entirety of yours site.
A site usually comprises of a banner, a main logo, individual divisions or sections that make up the body of our page, and the footer of our page.
The <body> is where the HTML magic happens…
In our script we will be adding a <h1> tag a <h2> tag and a <p> tag. The different headers vary in size from 1 – 6 respectively:
The <h1> should really only be used once within your page, this is mainly for SEO reasons because you main <title> and <h1> tags are important for distilling your site down and determining its context.
That and a strong first few paragraphs and you site will have a much better chance of reaching people.
On the other hand if you aren’t too worried about this you can use it repeatedly – nothing is stopping you!
It is better to use the <h1> once and the use either <h2> or <h3> you can also change the settings of your header tags with CSS by adding ID’s or Classes to them (more on this later ).
For the this example we will add the main heading using the <h1> tag and a sub heading using the <h2> tag.
We then add the main paragraph to the body using the <p> opening and closing tags respectively.
Now anything you place between these tags will be formatted as a paragraph this means that it will automatically have a line break added to the end ( vertical space ).
We then close off the </body> and close of the </html> tag signifying the end of the html page.
The last thing will be to check this simple html page in your browser of choice…
Now personally I use Chrome as my browser of choice, but you can use any one of the browsers out there, just be sure to test your html page on as many browser as possible as they can act kinda differently to your script.
To check what effects different elements of your web page will have on different browsers, or just for an all round compatibility check you can visit caniuse.com
Lets have a look at what this looks like in a web browser, so what ever text pad you have been working in, whether it is the simple windows text pad or sublime text, save it with the extension .html
Once you add the .html extension the file association will change to your current browser, the icon will also change from a note pad to what ever your browser app icon is.
In my example it is a chrome icon, double click on it and it will open the file in your browser of choice.
Now you may be thinking all this work for that, but this is a very important first step.
This page may not look like much now, but with CSS the more stylish brother of html we will make it look a whole lot better.
We will be adding an external CSS file to our html document we will do this first by creating a new text document and saving it with the name simple_page and the file extension .css
It doesn’t matter that we are using the same name as our html file because it is a different file type.
Like with the .html extension it will now associate the file as a CSS file and data will be read from this file accordingly.
Your folder should now look like this:
We now have two files, your html file with the structure of our page and a new CSS file that will be the style of our page.
Separation of files is seen as good practice, this will give you site a solid foundation and lends well to progressive enhancement.
This more modular approach to web design will also make it easy to make changes to your documents in the future.
First open your CSS file and add the following text at the top of the page.
body {
color: white;
background-color: black;
}This is what we call a selector this will select an element or your page and allow your to change its properties.
In this case we are changing the color ( short for text-colour) to white and the background-color to black thus inverting the colours.
If you refresh you screen you will notice that nothing actually happens this is because we haven’t told the html document where to find the CSS file.
To do this we will add the following to the header of the html document:
<link rel=”stylesheet” href=”simple_page.css”>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Peter Piper</title>
<link rel="stylesheet" href="simple_page.css">
</head>
<body>
<h1>peter piper</h1>
<h2>picked a peck of pickled peppers</h2>
<p>Peter Piper picked a peck of pickled peppers.
A peck of pickled peppers Peter Piper picked.
If Peter Piper picked a peck of pickled peppers,
Where's the peck of pickled peppers Peter Piper picked?</p>
</body>
</html>We us the <link> tag to connect a CSS file, we tell it the link is in relation to a “stylesheet” which is exactly what it is, and then finally we give it the location.
The location of the file is in the same directory so you can simple put the filename and extension here.
Now we have added the link to the html file all of the style changes we make to the CSS file will automatically be applied when you refresh your browser.
Now if you refresh you browser you should get the following:
Now again this is nothing special, but it shows us that the html document is correctly referencing the CSS file and allows us to start making it more colourful and exciting.
If at anytime you want to check the validity of you CSS script then as before you can check it using the world wide web consortium page script checker, just make sure you use the tick box so it knows to expect CSS.
We are now going to be adding <div> tags to the html page to separate it out slightly.
The <div> tag is short for division this will enable us to divide the page into segments that will contain other elements within.
Having them separated in this more modular way will make it easier to apply styling or other behaviours to them later.
We will also be adding classes and Ids to out divs to enable us to specifically target our elements.
Lets have a look at how the script looks now:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Peter Piper</title>
<link rel="stylesheet" href="simple_page.css">
</head>
<body>
<div id="banner">
<h1>peter piper</h1>
<h2>picked a peck of pickled peppers</h2>
</div>
<div class="section">
<p>Peter Piper picked a peck of pickled peppers.
A peck of pickled peppers Peter Piper picked.
If Peter Piper picked a peck of pickled peppers,
Where's the peck of pickled peppers Peter Piper picked?</p>
</div>
<div id="footer">
<p> © Peter Piper 2019</p>
</div>
</body>
</html>I have included the <div> opening and closing tags to signify where the division starts and finishes and have given the divs an id or class name.
We have a banner which will hold the header tags, an individual section that will hold the body text and a footer which will sit at the bottom of the page.
The difference between an ID and a class attribute is that the ID is generally used once for a specific element that will only be created once whereas a class can be use for any multiple instances.
So rather than given two identical segments different properties we can create one set of properties and use them on multiple divisions.
If you reload the page nothing actually happens, but if we start to make some more changes to the CSS file we can smarten things up a little.
Make the following changes to the CSS file:
body {
color: white;
background-color: black;
}
#banner {
background-color:blue;
}
.section{
background-color:red;
}
#footer{
background-color:green;
}I now have two ID selectors and one class selector, the class selector is denoted by the (.) symbol and the ID selector is denoted by the (#) symbol.
This is the way we can now laser target our on page elements and style them on an individual basis.
Start off by changing the background properties on each of the divs
This has created separation to our elements and we can start to see them as separate entities, lets make a few more changes to the CSS and make it look more like a web page.
body {
color: black;
background-color: white;
}
#banner {
border: solid 2px black;
border-radius: 55px;
padding: 5%;
}
.section{
border: solid 2px black;
border-radius: 55px;
padding: 5%;
}
#footer{
border: solid 2px black;
border-radius: 55px;
padding: 5%;
}Now all we have done is add a border radius attribute to the divisions of 55px, inverted the colours back to black on white and added a padding to each division of 5%;
Load it back in the browser…
This is essentially the power of CSS because once you have the html marked up well and classes and IDs applied appropriately you can make vast changes with just a few amendments to the CSS.
Well this is the main work done, well done fore getting this far.
In the next section we will improve on this design and make a fully scale-able simple HTML page with images and filler text.
Go to making a simple site Html Basic Template