How to Build a Website from Scratch: Part 1

HTML and CSS Basics

A website is a collection of interlinked documents written in HTML--hypertext markup language. HTML is a programming language that web designers use the create the basic structure of every webpage within a website. Webpages may contain elements written in other web programming languages, such as CSS, JavaScript, PHP, ASP, and others. CSS--cascading style sheet--is a web programming language that simplifies the way webpage elements are styled. It lets web designers specify dimensions, placement, colors, fonts, link effects, and other visual aspects more efficiently than if they only used HTML.

To create a website that is live on the Internet, i.e., a website that anyone in the world can see, you need to purchase a domain name and either rent or buy server space from a web hosting company. If you don't have a domain name and server, you can still design a webpage that exists locally on your machine. As long as you have some sort of web browser installed (Firefox, Internet Explorer, Chrome, Opera, etc), you can view the website on your computer.

There are many programs and software packages that do the dirty work of coding a website for you. This tutorial, however, will focus on building one from scratch. The only programs that a PC user needs are Notepad and Paint. A Mac user needs only TextEdit and an image creation program.

Step 1: Creating the CSS File

The CSS file is an accessory to the main HTML file that defines a webpage. If you have many webpages on a website, and they all have the same style, then you only need one CSS file for the website.

On your desktop, create a folder called "My Website" and open your plain text editing program. Use Notepad or TextEdit only, do not use Word. If you are using TextEdit, be sure to change the setting to "plain text." Copy and paste the following code into the document:

Save the file as "mystylesheet.css" inside the forlder called "My Website" on your desktop. You may need to include the quotes around "mystylesheet.css" to force it to save with the .css file extension. If it gets saved with a .txt extension, it will not work.

This style sheet specifies the colors and layout of a simple two-column webpage. Colors are encoded by six-digit hexadecimal numbers that start with a # sign. The container element specifies the area where all of your other page elements will be. The page has a typical header element with a horizontal navigation area below. There is a left sidebar and main area, and a footer bar at the bottom. The sidebar will appear 200 pixels wide because it has a base width of 180 pixels, plus 10 pixels of padding all the way around. Likewise, the main area will be 700 pixels wide since 680 + 10 + 10 = 700.

The names of the elements are not important. What is important is that each element begin with a #, and have its position and dimensions specified between the { and } tags. Anything written between the /* and */ tags is a comment. Web browsers ignore these when they read the CSS files; comments are meant to assist web designers.

Step 2: Creating the HTML File

The next file is the most important file. This is where all of the visible text and content of your website goes. Open up another blank plain text document, and copy and paste the following code:

Save this file as "index.html" inside the "My Website" folder. If you include any special charachers in your text, it is crucial that you choose "UTF-8" from the "Encoding" menu when you save your file. This ensures that special characters are preserved. If you forget this part, non-ASCII chracters will appear as ? symbols. (What you name this HTML file is not so important now, but if you create a website that is live on the Internet, the main page of your website must be called "index.html" so that the server knows which page to display when a person types the name of your site into the address bar. That is, http://www.example.com redirects to http://www.example.com/index.html.)

The commands in between the <head> and </head> tags essentially tell the web browser how to render the page. The command line <link rel="stylesheet" type="text/css" href="mystylesheet.css" /> tells the browser to read the style sheet file so that the page elements can be displayed properly.

The order of elements between the <body> and </body> tags governs the positioning of thes elements. If you want the header above the navigation bar, you have to place the <div id="header"></div> set before the <div id="horiznav"></div> set. If you want the footer at the bottom, you have to place <div id="footer"></div> last.

In HTML, every <blah blah blah> tag has to be closed off with a matching </blah blah blah> tag. Notice that the <div id="container"> tag is closed with a </div> just before the </body>. The header, navigation bar, left sidebar, main area, and footer are all contained in the "container" div tags.

Anything between <!-- and --> tags is a comment that your browser will ignore. Comments are useful for humans who need to edit and customize the code.

Step 3: Putting it All Together

You are now ready to see your page in action. Open the "My Website" folder and right click on the "index.html" document. Go to "Open with" and select your favorite web browser. In a new window or tab you should see your sample webpage. In later lessons, we will discuss how to customize it even more. Right now it's pretty ugly!

The best way to teach yourself web design is to experiment with different commands; see what happens when you change the widths, heights, floats, and colors. You can also find free mini-lessons at W3 Schools and Tizag.com. For color codes, check out December.com Hex Color Codes or Had2Know.com Color Picker and Hex Code Generator.

© Had2Know 2010

How to Encrypt HTML and JavaScript (and decrypt it too)

How to Build a Website from Scratch: Part 2

Is This MP3 Download Site Legal?

How to Open Email Attachments with Incompatible File Extensions