tutorials

0409 783 316

 how to


How to build a website


We thought it would be useful for you to get an idea on how to build a website. We’ll start with a single page here and won’t get all technical on you.


This is a pretty lengthy page, we'll make a video follow up next week. The content is meant for people who have never used html or CSS.


There are many ways to build a website today. Some are better than others, and they allow you to see results faster and take less time. These sometimes come with a trade off that it’ll be harder to find your site on search engines, and some approaches won’t allow you to achieve a specific or unique design idea that you may really want to represent your brand.


The first step in building a site, is planning and design. Ask questions like who will be using the site, what are your business goals, and make design decisions based on your answers.
Our design here is to achieve one goal, clearly demonstrate the various sections of a simple site. This design won't win awards.

Here we’re going to build a simple static site to introduce some of the fundamentals of web design and programming. We’ll get to dynamic content management systems in future, but let’s start with the first building blocks, HTML and CSS.


You can think of HTML - Hypertext Markup Language , like a washing line, it provides us with the structure we need to hang up content on the internet, but isn’t really all that pretty, without some colour and je ne sais quoi added by CSS - Cascading Style Sheets, Javascript and other fancy things that we don’t need to look at just yet.


Below is our completed example, don’t worry we’ll walk through it, so that it makes sense.




Let's start with the HTML:


You can write HTML in any plain text editor, Word processors aren’t what you need, they’ll add characters to the document that aren’t visible but aren’t valid as HTML.


<html>
An HTML document always begins with an HTML tag <html>. All HTML elements are written inside tags, the opening tag and closing tag, a closing tag begins with a /. So the end of the HTML document will end with </html>


<head>
There is a format that HTML documents should follow to be considered well structured. The <head> section allows us to include descriptive information and links that might not always be visible on the actual page that your visitors view. Technical on page SEO starts in this section of the page.


<meta>
This is the tag in which you describe certain things about your site, you can also set up viewpoints and browser compatibility notes and action in these tags. For now lets keep it to the author and description. You can put your name, or company name as the author, and a brief description of what the site is about inside a meta tag. While this doesn’t show on your page, search engines use this section to help to determine whether your site matches search criteria someone has entered.


<title>
This is the title of your page, it will show only in the tab that your page is open in, in a web browser. Another element that search engines are interested in, but this one is visible.


We’ve then put a couple of comments into the HTML to show where you would usually import a favicon (the little icon that appears in your browser tab.) We’ll go through making one in a future walkthrough. You would also import your stylesheet here, this is the CSS file that gives your site its color and layout. What we have done in this tutorial is to use inline styles (basically, the styles are written on the same page as they are being used. This isn’t best practice, but for now it will help you to get an idea of how styles are used on your site.


<style>
body This tells the page, what styles to apply to any element inside the <body> tag. In our example we have set a background colour to a blue green (notice all spelling is US spelling, it won’t work if you use colour. We have then set the font to Arial .
We’ll discuss the other elements as we get to them on the page, all that we’re doing in the style section is adding colour.


We then close the style tag and the head tag and open a body tag.


<body>
This is where all the visible and interesting content of your page is displayed. The content is structured so that it can be displayed in a logical order that looks good and presents your content well, making it easy to read and act on.


<div>
This stands for Document division, and allows us to move content around the page. Controlling div’s is usually done with CSS.
The opening div of our page has a class with it. This means that this div has the ability for us to make a style in CSS and wherever the HTML sees our attribute it will apply the style.


For example, our div has the class container, we could write some CSS to say container has a height of 90%. Because we used the container div as the first instruction on our page, all items that are inside this div will only be allowed to fill 90% of the page’s height.


The next div has the class of clearfix, we have used this to make sure that content we align within this div appears as we expect it to. This is a CSS trick that we’ll cover in future.


<h1>
This is the visible, first heading on our page. You want to describe the page here and sum up the content as briefly as you can, as this is what your visitors see when they arrive, it is also a tag that search engines use to determine if your page has content that is being searched for.


The next div has the class main, we haven’t defined anything for this class yet.


Following that we have a div with the class navigation, this is our menu, we have added a light blue background to this section.


<section>
We won’t be using this, it will be used in future tutorials for laying out the page, using susy or borbon which come into the picture a little way down the track, they are great design tools.


<ul>
this is an unordered list, we have given it the class of nav, because this list will display the site navigation.


<li>
List Item, this is the list of options we want to display.


<a>
Inside our list we have <a href="#"> this is a link, the # means that the link is not going to take you to another address. You could put http://www.google.com instead of the # the link would then take you to google. When we have more pages, we might put “about-us.html” inside that reference.


We then start to close up the elements we have used, we close the </ul>, the </section> and the navigation div. It is best practice and a good idea to leave comments for yourself so that you know which div or section you’re closing.


<p>
The paragraph tag, we use this to define text that forms a paragraph on our site. We haven’t added a class to this tag, but we did say that all text in a <p> tag should be black , in our inline CSS.


Then all that is left to do is close any remaining elements we have open, 2 div’s main and container, the body tag and the html itself.


There you have it... a clean, well formed html page.


We hope this is helpful, contact us if you have any questions or requests for tutorials. This one is the very basics and we’ll progress to fully styled and functional web applications.