JustBajan.com Logo Barbados Flag
Home Page
What's New
Competitions
Car Center
Buying Guide
Shopping Centre
Computers
Entertainment
Health & Safety
Home Improvement
On The Menu
Opinion Matters
Pet Care
Feature
Events Calendar
Yellow Pages
Weather Forecast
Discussion Forum
Wallpapers
Calendars
Links
Contact Us
About Us
Webpage Creation Tutorial - Lesson 1
Complements Deeica Technologies
Article date: 19-Mar-2003
Updated: 30-Apr-2003 ( Click here for Update Notes)
 
 

Audience
  • No prior website creation knowledge
  • Basic windows familiarity (notepad, browser, copy, paste)
 
Requirements
  • Text editor (e.g. notepad)
  • Browser (Internet Explorer or Netscape)

 
Hyper Text Markup Language (HTML) is the language of websites. We use it to tell a browser what a webpage should look like, how the images should be displayed on it and how links and other components should appear. In this tutorial you will learn basic HTML and by the end of it you will have created a simple webpage. A “website” is merely a logical grouping of web pages, so we will first go through what is required to create a single web page and work our way up to a complete site. The easiest way to learn HTML is definitely a hands-on approach, so open a new text document in your text editor and let's begin. Type the following in notepad and save it. (How to open notepad)
 

<html>
<head>
<title>Welcome to my Website!</title>
</head>

<body>
<h1>Hello, my name is George</h1>
<p>Website creation is fun!</p>
</body>
</html>

 

Save the file as "index.html". This is the standard name for the first page of any website. Now open the file in your browser, and you should see something that looks like this:

Congratulations! You have just created your first web page. Now let's go through the HTML and see exactly what you have done.

A note about Tags: Tags are the components we use to define HTML. They are denoted by < >s. In the above example, there are 5 pairs of tags. Most HTML commands need an open and a close tag, such as the HTML tag (<HTML></HTML>). The close tag is the same as the open tag but it has a / in it. .

Breaking it Down: The first tag in the above example is the HTML tag. This tells the browser that whatever follows is HTML and not just any ordinary text. The browser then knows to look for other tags and display the page appropriately.

The next thing to note about the example is that the web page has 2 distinct sections: the HEAD and the BODY section. The HEAD section contains information that isn't displayed in the main part of the page, but is still very important for the page. The only thing we have in the head section in this example is a TITLE tag. If you look at your webpage you will see at the very top "Welcome to my Website! - Microsoft Internet Explorer" (If you are using a browser other than IE then you will probably not see the "Microsoft Internet Explorer" part. This is the title of the page, as we have defined it.

Now let's take a look at the BODY section of the page. In our example it has 2 components, the header (<H1>) and a paragraph (<P>). There are different sized headers, with 1 being the largest and 6 being the smallest.

The last tags in the example end the BODY section and the HTML section. These tags signal the end of the webpage to the browser.

That's it for Lesson 1, in the next lesson we will learn about attributes for the tags. Go to Lesson 2 >>

 
Information courtesy of Deeica Technologies
 

Please Rate this Tutorial
Useless << Useful
>> Very Helpful
1
2
3
4
5
6
7
8
9
10
Your Computer Experience
Novice
Intermediate
Expert
Any comments or suggestions?
 
 
2001 JustBajan.com®. Contact: e-mail info@JustBajan.com, Tel: (246) 429-6779