How to Build a Website from Scratch Lesson – 1


Before we get started I’d like to mention that this is one of the first tutorials I have ever written.  I would like it to be as clear and concise as possible, but the topic is somewhat broad.  I will be periodically updating the content as comments roll in and errors are made apparent.  That being said, lets get started.

Try not to get too bogged down in the code for now.  I think its best to just read through this first tutorial, create the new files and folders and get your first website running.

If you’ve read through the Where to Start section you are probably ready to create your first web page. For now we just need a text editor or web editing software and a new folder on your desktop.  The advantage of using a web editor, like MS Expression Web, Kompozer or Dreamweaver, is color coding and debugging.  Much like a spell checker it will make your life easier.  I’m sure there are other alternatives that I haven’t found yet.  Check out the screen shots below to see the advantage of real web design software.

Example of Web Editor Code

Expression Web Screen Shot

This is what html looks like in Kompozer

Kompozer Sample Code

Files and Folders

Create the following files and folders as according to the structure below.  We are going to be adding to this as we go in the tutorial.   The default.html file will be the boards and sticks of your website, all it does is hold the rest of the structures up.  The style.css is more like the paint and the decorations.  This is where you are going to add some shape and style to your basic page.

Create a file structure like the one you see below.  Create the files using notepad or your web editor and save them as the appropriate types.  The bold items are files and the italic items are folders

example of the initial file tree

File Structure

my_first_site(main site folder “root”)

      -default.html

      style(folder contains style sheet and style elements)

             -main.css

The Code

<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

Once these two folders and there respective files are created its time for some code.  If you’ve never looked at html source code it can be a little overwhelming.   First lets look at a basic webpage.   The following block of code is all that is technically needed to form a basic web page, but we are going to add some important features to this as we go.

Comments

The first thing we should cover is html comments.  Below are examples of standard and multiline comments.  The arrows that wrap the comment prevent the browser from inserting any of this info into the page.  I have highlighted all the comments in red to help break up the code.  (Hint: Try a right-click and view source on your favorite sites and see how they utilize comments.)

<!-- this is how you make a comment in html the browser ignores everything inside of these-->
<!--
this is
how you make
a multiline
comment
-->

The Html Head

The head tag wraps the area of your page that tells the browser what it’s all about. It declares the scripts that need to be loaded, links to the appropriate style sheets, and tells the browser what the title of the page is, who the author is, what keywords describe the page, and so on. Below is and example of an html head section, and the one we will be using for this tutorial.

Note at the end of this post I will include complete versions of the starting “default.html” and the “main.css” files for you to cut and paste.

<!DOCTYPE html><!--declares a document type for the browser to read-->
<!-- this is how you make a comment in html the browser ignores everything inside of these-->
<!--
this is
how you make
a multiline
comment
-->
<html><!--tells the browser that ths is where the html starts-->
<head><!--this is where the head starts. The head area is used to declare external scripts
and communicate other information about the pag to the browser.-->
<!--the area below is used for giving browsers an search engines information to find your site-->
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="keywords" content="my first site, tutorial, learning the web"/>
<meta name="author" content="BrianWK (your name goes here)" />
<!--this is the title you see in various places including search
engines and a the top of your browser-->
<title>My First Web Page</title>
<!--Below we are going to attach the style.css that we created so that we can apply some style-->
<link href="style/main.css" rel="stylesheet" type="text/css">
</head><!--this tells the browser the head has ended. This is not a page header-->

The Html Body Tag

The html body tag defines the area that your visitors will see. Here is where we will code all of the elements that make up your page (navigation, heading, logos, text, ads, etc.) Below is an example of the html body area. I have included the closing (/) body and html tags since we are bascially done with the “default.html” page.

<body><!--This is where the page begins, the area that your visitor sees-->
<div id="site_container">
<h1>Hello World!</h1><!--this is a heading tag-->
<h3>This is your very first webpage</h3>
<p>This is an example of a paragraph. I like to use excerpts from Moby Dick when I mock up pages. </p>
<p>Call me Ishmael. Some years ago -- never mind how long precisely -- having
little or no money in my purse, and nothing particular to interest me on shore,
I thought I would sail about a little and see the watery part of the world. It
is a way I have of driving off the spleen, and regulating the circulation.
Whenever I find myself growing grim about the mouth; whenever it is a damp,
drizzly November in my soul; whenever I find myself involuntarily pausing before
coffin warehouses, and bringing up the rear of every funeral I meet; and
especially whenever my hypos get such an upper hand of me, that it requires a
strong moral principle to prevent me from deliberately stepping into the street,
and methodically knocking people's hats off -- then, I account it high time to
get to sea as soon as I can. This is my substitute for pistol and ball. With a
philosophical flourish Cato throws himself upon his sword; I quietly take to the
ship. There is nothing surprising in this. If they but knew it, almost all men
in their degree, some time or other, cherish very nearly the same feelings
towards the ocean with me.</p>
</div>
</body><!--This Tag ends the body, and effectively the visible part of the page.-->

The Whole Page

Copy the code below into your default.html file and save it.  Make sure your file structure is correct.  You must have a folder named my_first_site, this is the root or main folder of your site.  The default.html file goes in this folder.  You should also have a style folder inside of my_first_site, and make sure that main.css is inside the style folder.  Unless file names are spelled the same and in the right location the site will not work.

<!DOCTYPE html><!--declares a document type for the browser to read-->
<!-- this is how you make a comment in html the browser ignores everything inside of these-->
<!--
this is
how you make
a multiline
comment
-->
<html><!--tells the browser that ths is where the html starts-->
<head><!--this is where the head starts. The head area is used to declare external scripts
and communicate other information about the pag to the browser.-->
<!--the area below is used for giving browsers an search engines information to find your site-->
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="keywords" content="my first site, tutorial, learning the web"/>
<meta name="author" content="BrianWK (your name goes here)" />
<!--this is the title you see in various places including search
engines and a the top of your browser-->
<title>My First Web Page</title>
<!--Below we are going to attach the style.css that we created so that we can apply some style-->
<link href="style/main.css" rel="stylesheet" type="text/css">
</head><!--this tells the browser the head has ended. This is not a page header-->
<body><!--This is where the page begins, the area that your visitor sees-->
<div id="site_container">
<h1>Hello World!</h1><!--this is a heading tag-->
<h3>This is your very first webpage</h3>
<p>This is an example of a paragraph. I like to use excerpts from Moby Dick when I mock up pages. </p>
<p>Call me Ishmael. Some years ago -- never mind how long precisely -- having
little or no money in my purse, and nothing particular to interest me on shore,
I thought I would sail about a little and see the watery part of the world. It
is a way I have of driving off the spleen, and regulating the circulation.
Whenever I find myself growing grim about the mouth; whenever it is a damp,
drizzly November in my soul; whenever I find myself involuntarily pausing before
coffin warehouses, and bringing up the rear of every funeral I meet; and
especially whenever my hypos get such an upper hand of me, that it requires a
strong moral principle to prevent me from deliberately stepping into the street,
and methodically knocking people's hats off -- then, I account it high time to
get to sea as soon as I can. This is my substitute for pistol and ball. With a
philosophical flourish Cato throws himself upon his sword; I quietly take to the
ship. There is nothing surprising in this. If they but knew it, almost all men
in their degree, some time or other, cherish very nearly the same feelings
towards the ocean with me.</p>
</div>
</body><!--This Tag ends the body, and effectively the visible part of the page.-->
</html><!--tells the browser that ths is where the html ends the "/" is a clsoing tag-->

The Style Sheet

The style sheet is a separate file (main.css) that is linked from the head section of your default.html page. The advantage to an external style sheet is that you can change the font color (or any part of your style) on all 100 or 1000 of your pages in a single line of code. If you include any styles in pages individually you in turn have to update each page individually. This is not practical, and it is no longer accepted properly formatted html.

The Style sheet is a fairly simply formatted document, but house keeping is up to you as the designer. An organized style sheet will save you lots of hunting later on.

I have a style sheet ready to go with a few basic styles applied to the body and the site-container.  These are simply for visibility and we will discuss them later.  Simply paste the code below into main.css and save it.

/*  This is what a css comment looks like  /
/
use these areas to make notes about the functionality of your css file /
/
css will be explained in more detail as we go, but for now we'll stick
to the basics /
/
the css below is going to control our page layout and positioning we will use a comment to
declare this as a "basic page structure" area /
/
BASIC CSS RULES /
/
For now all your styles will be stored in one style sheet
/* Don't make any inline styles in your page.
/* keeping an organized style sheet is the key to making any changes in the future. /
/
-----------------------------Basic Page Structure------------------------------/
body { /
body is a basic css selector the /
background-color:black; /
this is a css declaration it must be inside of braces as shown {}/
}
/
This is the area we are going to use for our site container */

site_container { /* this is and ID selector it is only allowed to be used once per page */

border:thin white solid; /* here we give our site container a border that is thin, white, and solid */
width:960px;             /* this sets the width of the white rectangle  */
min-height:600px;        /* this sets the minimum height of the white rectangle  */
background-color:#ffffff;/* this sets the background color of the rectangle to white*/

}


So, that should about wrap up our core website structure.  We first looked at a basic html page.  I have added some elements to that page which I will explain later.  Also, in the head of our page I have added a link to our Style sheet which will control the look and feel of our page.  If you have been following along and copied and pasted correctly you should see this when you open your default.html.


Join the discussion

Email addresses will not be published.
Comments will not be displayed until approved by an admin

2 Comments

  1. Comment by Website design


    Thanks for such great tutorials. I am in the process of building my blog/website and used the wordpress business lite theme. I want to sell some things on this site but not sure what the best process would be. Should I just use a store plug in for wordpress? Any advice would help.

  2. Comment by บอลชุด


    Love it! Thanks for the great info! Time to clear out the clutter