How to build a basic HTML and CSS web site
Introduction
Depending on what you want a website for, creating it can be a very easy or very hard task. Today here at Tech-Xtreme, I will be showing you how to create a basic HTML and CSS web page from scratch that even the most computer illiterate person could benefit from.
For starters, you need to know what HTML and CSS stand for:
- HTML – Hypertext Markup Language
- CSS – Cascading Style Sheet
In this guide you will learn how to use div tags, tables and various other HTML tags and how to style them.
Carry on reading to start learning about what programs you can use to create a website.
Choosing the right editor
There are many different editors that you can use to create websites but the main programs that is use are:
- Notepad (Built into the Windows Operating System)
- Notepad++ (Download it here)
- Dreamweaver CS3 (Adobe Dreamweaver homepage)
If you have no experience designing websites at all then your best option would be to purchase Dreamweaver or use a free trial as it brings up menus of all the different tags while typing.
After using Dreamweaver for while you can move onto notepad/notepad++ if you want the task to be a little bit more challenging because no help menus popup in these two programs. You could also say that notepad/notepad++ will also improve your debugging skills as there are no menus to help you if you get stuck.
HTML Code
- The DOCTYPE above should always be at the top of your code because without it some HTML features may not work
- The title tags above are for the title/description/etc.. for your website
- All body tags are where the code for your websites content will go
Now onto the coding…
If you are going to be using an external style sheet (css) you need to link to this just before the <head> tags end. The code for this is:
Now, we are just going to be creating a basic layout which includes a header, a nav bar, the main content area and a container to put them all in.
We are going to be using <div> tags throughout this guide as we don’t like <table> tags very much as they don’t look as clean and as tidy as <div> tags.
The following code should all be written inside the <body> tags:
Inside the nav you need some links which will be the links to other parts of the website. Depending on how many links you need, you need to enter this line of code however many times you want:
CSS Code
CSS (Cascading Style Sheet) is the code that styles your web page. As we are only styling a couple of things the css isn’t going to be too long, but websites such as this one have very long style sheets due to the amount of styling that is needed.
The CSS below is all that is needed for the web page, all explanations are situated below the image.
Body – This is basically everything behind your actual website so you can control the background-color/image, how much space you want between the top and the top of the container. “margin:0px;” means that the container is directly connected to the top and no space is in between. This is shown more clearly in the image below.
# = The hash symbol connects the styles to the <div id> tag.
px = stands for pixels so “width:800px” on a 1024×768 would easily fit.
#nav a = this is the styling for the website links inside the navbar, these are easily customized.
If you wish for something to happen when you hover over a link in the navbar, you can use “#nav a:hover” and put background-colors, text-colors, text-decorations and more.
font:bold 8pt arial = This means that the navbar links font is bold, size 8 and the font is arial. The font size, weight and family can be changed to whatever you like.
p = <p> stands for paragraph and is the general style for content on your website. margin5px; means that there is a margin of 5px surrounding the content.
h tags = These are header tags, 1 being the largest and 6 being the smallest. A font size should not be applied here as each h tag is a different size anyway and putting one there will disable this function.
The Finished Web Page
Click the link below to view the finished page.
Thanks for reading and check back soon for Part 2 where more functions will be explained, more advanced html and more advanced stylings.
Popularity: 40% [?]
Comments
No Responses to “How to build a basic HTML and CSS web site”Trackbacks
Check out what others are saying about this post...[...] How to build a basic HTML and CSS web site @ Tech-Xtreme [...]