Web Site Design  101---  Basics


OBJECTIVE

After completing this lesson you would know:


Ways You Can Build a Web Page

1. Use a pre-made template: 

For example http://www.freewebtemplates.com/    Some sites provide you with pre-made template. Some are free, but most are not.  

2. Use an HTML editor (authoring software) like Nvu, FrontPage, Dreamweaver:

3. Hand-code your HTML in a text editor like Notepad:

 

What is HTML?

HTML stands for "HyperText Markup Language".

Basically, HTML is a programming language. This is how web pages get structure, appearance, & interactivity beyond a string of words.

Hand Coded HTML page

Basic structure of a webpage in HTML code.

Now, we are going to try to use the basic HTML code to create your first webpage.

Please go to the Notepad or Wordpad (for the Window system---go to Start---All programs----under the Accessories---notepad)

 Type in the following words

This is my first web page (or whatever you want on your first webpage)

Save this page in "plain text format" and name the file "index.html" (all samll letters, no caps)

Now please upload this index file to your Web hosting server (make sure you upload the index file into the "htdocs" folder)  

You should already have the instructions from the Free Web Hosting set up guide.doc

FYI: as a general rule, the "index.html " is your HOME PAGE (i.e. the first page you see, when you go to a website).

You can name all others web files whatever you want, but the home page file should always be "index.html"

Once you upload the index.html. You should go to your web address and see your first webpage.
Don't go to the next step until you see what this page looks like on Internet.

Next step

Now we are going to add some programing codes to change the looks of your index.html.

Type in the following codes into your index.html file. (you can delete what you wrote earlier.)
The trick of using the code is......you have to be very careful writing/adding each code, if you miss one code or even one slash "/", then you may not get the desired appearance .  To avoid mistake, you can copy and paste the following code (I am sure you have already thought about that....)

 

    <html>

 

<head>
<title>My first hand coded page!</title>
</head>
 

<body>
 

 

<h1> Tells the browser that this text is very important -
the browser usually makes this text really big (heading level 1) </h1>


<h2>This is the second heading.  Hand coding web pages is easy! </h2>
<h3><b> This text will be bolded </b></h3>
<i> Makes text italic </i>

 


</body>
 

</html>
 

 Okay, stop here and SAVE the file........ UPLOAD the file and check out the effect.

Next step--add Table

Repeat the process, this time we add a table into your homepage.  

 

<html>
<head>
<title>My first hand coded page!</title>
</head>
<body>
<h1> Tells the browser that this text is very important - the browser usually
makes this text really big </h1>
<h2>Hand coding web pages is easy! </h2>
<h3><b> This text will be bolded </b></h3>
<i> Makes text italic </i>
 

 


<table border="1" cellpadding="0" cellspacing="0"
style="border-collapse: collapse"
bordercolor="#111111" width="100%" >
<tr>
<td width="80%"> Creates an HTML table　</td>
<td width="20%">　</td>
</tr>

</table>
 


<p>
This is a paragraph of text .
</p>

 


</body>
</html>

 

 

 Okay, stop here and SAVE the file........ UPLOAD the file and check out the effect.

This is not an assignment, but I would like to see if you have successfully finished the steps and created your first page, so please drop your web address in the assignment dropbox.