So this is part two to creating a simple web page if you need to brush up on a few html basics then make sure to follow that link otherwise continue on.
The aim is to create a very simple scale-able web page template that can show how, with a very simple html script and CSS file, you can create a simple but nice looking one page site without too much fuss.
Now this is pretty much where we got last time:
Now granted if you are coming from part one there are a few changes I made to the HTML as seen below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simple Web Page</title>
<link rel="stylesheet" href="simple_page.css">
</head>
<body>
<div id="banner">
<h1>Header</h1>
<h2>sub header</h2>
</div>
<div class="section">
<p>Hamburger sausage corned beef chuck doner spare ribs tongue
prosciutto kielbasa ground round. Tri-tip venison filet mignon
andouille beef ribs picanha jerky corned beef boudin. Kevin
landjaeger ham biltong. Jowl turducken alcatra, brisket pork
loin porchetta rump drumstick kielbasa prosciutto chicken
swine. Tongue sausage leberkas beef ribs. Landjaeger bresaola
short loin pig, doner sausage jerky flank cow picanha hamburger
ground round meatball rump. Burgdoggen landjaeger fatback
meatball ham.</p>
</div>
<div id="footer">
<p> © Footer 2019</p>
</div>
</body>
</html>
I have changed the banner text to something more suitable and have added a variation of Lorem Ipsum text called Bacon Ipsum
Lorem Ipsum, if you don’t already now, is an almost random text generator that creates text with enough form that makes it convincing as a temporary filler.
This of course is just placeholder text, but has a realistic look and flow and is more agreeably than just plain gibberish, this helps you to quickly fill out parts of the page when designing it.
You can find the regular Lorem Ipsum here the variation I used is called bacon ipsum and the main difference is it includes a lot of bacon-centric words mixed in.
The CSS has changed a little too:
body {
color: black;
background-color: black;
}
#banner {
background-color: white;
border: solid 2px black;
border-radius: 55px;
padding: 5%;
}
.section{
background-color: white;
border: solid 2px black;
border-radius: 55px;
padding: 5%;
}
#footer{
background-color: white;
border: solid 2px black;
border-radius: 55px;
padding: 5%;
}I have just changed the bodys background colour to black and added a background attribute to each of the other selectors with the value of white this makes them pop out a bit more than before.
Now this is all very well but it still isn’t very colourful and wouldn’t win any prizes for best site of the year.
What we need are some images and a bit more text formatting…
If you need images to quickly fill out a site with, but don’t have any of your own that are suitable, then a great site for free images is Pixabay.
The reason why this is great for images is because the photos are donated to the site and are free for commercial use, also most of them require little to no attribution.
Here are the images I downloaded from Pixabay plus a few I created myself.
Now its important to resize your images for use in your website because if your images are too big they will drastically slow down your sites performance.
I edited all my images down in size and have include the dimensions of each in the collage image above.
Going back to our Search Engine Optimisation people wont’ stick around for very long if your site isn’t loading fast, in fact its at the very top of every SEO specialists priorities for improving site bounce rate.
Find out more about your sites bounce rate.
If you want to use different images you can, other wise I will soon give you links to all of the above images individually.
The above dimension are there as reference, so if you need you can convert all your images to match the same dimensions.
If you need to change the size of your images at any time then you can use Windows Paint and then save the file with the extension .PNG
The PNG – Portable Network Graphics format will keep any transparency that is present in your image.
If you want to use a great free photo editing program, that’s a bit more sophisticated than paint, then I would recommend using Gimp
This software is open source and is very much like its richer cousin Photoshop and has many similar tools.
If you need the exact photos I used to create this web template then you can download them here:
Grab all these images, or download your own from Pixabay, remembering to resize them in Gimp or the graphics app of your choice.
Create a folder call images, in the folder where your HTML and CSS is, and place the images here.
Now we need to connect the images to our site, to do this we will first add the reference to the images to our HTML script.
Lets edit the HTML again
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simple Web Site</title>
<link rel="stylesheet" href="simple_page.css" />
</head>
<body>
<div id="banner">
<h1>Header</h1>
</div>
<div class="section">
<h2>Nice Header</h2>
<p>Hamburger sausage corned beef chuck doner spare ribs tongue
prosciutto kielbasa ground round. Tri-tip venison filet
mignon andouille beef ribs picanha jerky corned beef boudin.
Kevin landjaeger ham biltong. Jowl turducken alcatra, brisket
pork loin porchetta rump drumstick kielbasa prosciutto
chicken swine. Tongue sausage</p> <img
class="box_image_right" src="images/record.jpg" alt="vintage
record and turntable"/>
<br />
<hr>
<br />
<p>leberkas beef ribs. Landjaeger bresaola short loin pig, doner
sausage jerky flank cow picanha hamburger ground round
meatball rump. Burgdoggen landjaeger fatback meatball ham.
</p>
<img class="center_image" src="images/bunting_big.png"
alt="indie decorative border" />
</div>
<div class="section">
<h2>Second Section</h2>
<p>Hamburger sausage corned beef chuck doner spare ribs tongue
prosciutto kielbasa ground round. Tri-tip venison filet
mignon andouille beef ribs picanha jerky corned beef boudin.
Kevin landjaeger ham biltong. Jowl turducken alcatra, brisket
pork loin porchetta rump drumstick kielbasa prosciutto
chicken swine. Tongue sausage</p><img class="box_image_left"
src="images/musician.jpg" alt="musician playing guitar"/>
<br />
<hr>
<br />
<p>leberkas beef ribs. Landjaeger bresaola short loin pig, doner
sausage jerky flank cow picanha hamburger ground round
meatball rump. Burgdoggen landjaeger fatback meatball ham.
</p><img class="center_image" src="images/bunting_big.png"
alt="indie decorative separator" />
</div>
<div class="section">
<h2>Great Crowd!</h2>
<img class="box_image" src="images/concert.jpg" alt="concert
full of people"/>
</div>
<div id="footer">
<p> © Greatest Footer 2019</p>
</div>
</body>
</html>Now we have added some more bacon ipsum text and separated the text into two paragraphs,
In between the paragraph we have added an image which also has a custom class selector called box_image_right (can you guess what this is going to do?).
We also then add a <br/> tag in between the two paragraphs, this is used to create a line break between two elements and is great for adding spacing in between the these two tags.
We now add a <hr> tag (this stands for horizontal rule) to create a line that will go from one side of an element to the other.
Then with the magic class selectors we re-use the section class and just simply copy and past the section again.
We make it slightly different to the one before by just adding different text and images.
One other thing you might notice is that I have added another custom class to the image in the second block and called it box_image_left this puts the image to the opposing side offsetting it from the image in the section above.
At the bottom of both sections I add another PNG image called bunting, this is a little decorative effect that sits at the bottom of each box section creating a nice visual book end.
Again I copy the section for a third time add a separate image with another custom tag called “box_image” and I use another <h2> for the title text.
Lastly I add a footer which has its an id selector, this is because the footer is only going to be used once for the bottom of the page and therefore will need to be styled slightly differently.
You could get away with just using the section class but if you wanted to make the footer unique to the page, by maybe having its colour different to the other sections, giving it its own selector will make this easier
I have added whats called an entity as follows © this is for outputting the copyright symbol to our text.
Open up the web page in the browser and you should see the following:
This is already looking much better, and if you wanted you could stop here and have a very basic looking blog style post page, which is fine.
Lets add some more CSS to Spruce up this web template page
body {
background: url("images/static_green.jpg") no-repeat;
background-size: cover;
}
h1 {
color: #fff;
font-size:60px;
}
h2 {
background: url("images/scribble.png") no-repeat;
background-size: cover;
}
#banner {
background:#151e28 url("images/pinkcloud.jpg") no-repeat top right;
background-size: cover;
border: solid 2px black;
border-radius: 55px;
padding: 5%;
}
.section{
background: #fff url("images/cloud_semi_trans.png") no-repeat;
background-size: cover;
border: solid 2px black;
border-radius: 55px;
padding: 5%;
}
.center_image{
margin: 0 auto 5% auto;
width: 100%;
}
#footer{
background: #fff url("images/cloud_semi_trans.png") no-repeat;
background-size: cover;
text-align: center;
border: solid 2px black;
border-radius: 55px;
padding: 5%;
}Now there is a lot that’s changed here, most of it we have seen before, but lets have a look at a couple of the new boys.
You will notice that I have added a background image to a lot of the selectors using the following
body {
background: url(“static_green.jpg”) no-repeat;
background-size: cover;
}
You can also add images to your page using CSS this is usually done for including background images to your elements using an URL location.
The no repeat attribute stops the image from looping.
For background size I am using cover, this makes the image stretch to fit the container, even if it has to slightly cut of the edges, you can if you wish also use contain and auto.
I have also added the following to the <h1> tag:
h1 {
color: #fff;
font-size:60px;
}
Also the other significant change is the hexadecimal value used for setting the font colour
Hexadecimal values can seem quite complicated, for now all you need now is #fff is full white and #000 is complete black.
Find out a bit more about hexadecimals at mathsisfun.com
Make the rest of the changes to the script and open it in your browser.
Adding a few images and CSS selectors we have changed the aesthetic of the site, it looks more interesting and has made better use of white space to separate its elements.
We can take it a bit further by adding some more CSS rules.
body {
background: url("images/static_green.jpg") no-repeat;
background-size: cover;
font-family: "Arial";
}
h1 {
color: #fff;
font-size:60px;
}
h2 {
background: url("images/scribble.png") no-repeat;
background-size: cover;
font-size:38px;
color: #fff;
text-align: center;
}
#banner {
background:#151e28 url("images/pinkcloud.jpg") no-repeat top right;
background-size: cover;
border: 4px solid #000;
border-radius: 55px;
margin: 0 auto 0 auto;
padding: 5% 5% 10% 5%;
max-width: 60%;
}
.section{
background: #fff url("images/cloud_semi_trans.png") no-repeat;
background-size: cover;
border: 4px solid #000;
border-radius: 55px;
margin: 2.5% auto 2.5% auto;
padding: 5% 5% 10% 5%;
max-width: 60%;
font-size:17px;
color: #fff;
}
.box_image {
display: block;
margin: 5% auto 5% auto;
max-width: 90%;
}
.box_image_right {
background: url("images/pic_bunting.png") no-repeat;
background-position: center;
background-size: contain;
width:50%;
float: right;
padding: 6% 8% 6% 8%;
}
.box_image_left {
background: url("images/pic_bunting.png") no-repeat;
background-position: center;
background-size: contain;
width:40%;
float: left;
padding: 6% 8% 6% 8%;
}
.center_image{
margin: 0 auto 5% auto;
width: 100%;
}
#footer{
background: #fff url("images/cloud_semi_trans.png") no-repeat;
background-size: cover;
text-align: center;
border: 4px solid #000;
border-radius: 55px;
margin: 0 auto 0 auto;
padding: 2% 5% 2% 5%;
max-width: 60%;
}We have changed the font-family in the body element level selector to Arial.
We added a font size of 38px to the <h2> tags, changed the colour to white and centre aligned them.
We changed the thickness of the border around each element to 4px rather than 2, this makes it pop out of the screen more effectively, we also added the following to the banner section.
margin: 0 auto 0 auto
This automatically adjusts the horizontal alignment of the elements based on the windows size whilst keeping the vertical position at zero.
There are also different variations of this margin rule for some of the other elements, the section margin also includes a 2.5% vertical margin, this is what gives the space between the section blocks.
We add padding to each of the sections, this is the inner spacing rather than the outer margin spacing.
Also for each of the elements we give a max-width property, this means whenever the window is scaled the elements will adjust their width to 60% of the current window size.
Adding percentage sizing to elements means that they will be scale-able and adjust to many different screen sizes.
Also any child elements within the parent with adjust accordingly to the percentage set.
We will now also change the text size and colour to the section class
Next we have added a new .box_image class selector
.box_image {
display: block;
margin: 5% auto 5% auto;
max-width: 90%;
}Using the display block and auto margins we can center the image and give it a maximum width property.
Now when we scale this image it will stay in the center of the element and at a size ratio of 90% of its parent, this being the section element.
Next we add:
.box_image_right {
background: url("images/pic_bunting.png") no-repeat;
background-position: center;
background-size: contain;
width:50%;
float: right;
padding: 6% 8% 6% 8%;
}We add this class selector to the section images, this gives them a width that is 50% of the parent element, we also add padding left, top, right, bottom as a percentage too.
The Float right property takes the element out of the natural flow of the html and forces it to the right of the element.
We have also added a background image to the back of the foreground images this is the border decoration you can see round the outside.
We make the background image size cover the whole of the element and center it so it sits perfectly in place.
.box_image_left
This selector is almost identical to the Box_image_right except it floats the image left rather than right, obviously.
We next add a center_image selector which keeps the sections footer image within the bounds of the element
Again we add some simple margin rules and a width of 100% as we want it to span from one side to the other
Lastly but not least we style the footer much the same as we did with the other elements the one difference is that this text is aligned to the center using the text-align property
Open up the page again in your browser your should now have something that resembles the image below.
Now i’m no artist so the images you create for your site could look a lot better than the ones I edited or created.
In retrospect I think some of the images were a bit lower in resolution than I would have liked, but all in all I think it turned out looking pretty good.
I hope at the very least this tutorial has shown you how a simple sprinkling of CSS can be very effective at enriching your HTML, and that with a simple site structure you can create a nice scale-able web page.
To see some great sites made with just HTML and CSS visit CSS Design Awards