Search:

Sunday, April 15, 2012

How to Build a Free Website


 Why Learn HTML?

Making a free website is simple. But before we start putting it all together we first need to go through some rudimentary HTML. Getting to grips with basic HTML gives a complete beginner a simple understanding of the structure of a website and gives them a feel of the code.

Understanding code is important for any website designer... even a beginner. Even if someone was to use a very good WYSIWYG (What-You-See-Is-What-You-Get) editor they would still need to know some HTML and CSS to ‘tweak’ their site to perfection. No WYSIWYG editor makes a perfect site (not even Dreamweaver).  

Knowing a bit of website code gives you the ability and confidence to ‘create’ a site to your own specifications and tackle any problems that might arise from putting together a website (and no matter how good you are you always bump into problems while putting together sites!).

In the tutorial on this site we will cover some very basic HTML and CSS code and then put together a bare-bones but well presented website.

In the PDF accompanying this tutorial we will go into further details, and go through the required CSS rules needed to put together a more stylish Adsense website.
At the end of the tutorial we shall have a website that looks something like this:
  

But we have to start from the very beginning; we will start with the primary code of web-building; HTML.
About HTML tags
Due to the introduction of CSS, the numbers of HTML tags that are commonly used on websites have been drastically reduced. Using tables for layout is no longer a popular option because CSS has taken over control of nearly all elements regarding presentation.
The only role left for HTML is to look after the core structural elements of a website. A task which involves only a small number of tags. Making the modern incarnation of HTML (X)HTML very easy to learn.

Page-wide HTML tags
All tags are enclosed within two angled brackets. They are normally used in pairs; the first turns on an effect or opens a particular section and the second turns an effect off or closes a particular section. All websites use the following tags and have the following basic structural layout.

Notice that all tag pairs ends with a slash (for example <p> and </p>).
Most websites are contained within the tags shown in the diagram above. They will likely be present in all the pages of all the websites that you create. It is the backbone of all web pages. Their functions are:
  • <html> tags surrounds the whole web page. All other tags are contained within the <html> tag. It starts and finishes a webpage.
  • <head> section deals with most of the administrative details of your website. It tells the browser how it should render the page, it gives instructions to search engines on how the page should be indexed.
  • <title> tags also resides within the <head> section. The information contained within this tag is what is displayed on the bar at the top of the browser displaying the page name.
  • <body> tags contain the main bulk of the page. This is where the visible part of your site is contained.
  • <p> tags is a standard on most webpages and is used mostly to organize the content of a web page.

No comments:

Post a Comment