My First Web Page Step One

Building Your 1st HTML Web Page

You are going to love this. You are going to learn how to create your first website, build your first web page.

I am using Windows and I can only show you how I did it with Windows.

I hope you are able to figure out if you're running on a different platform.

Tools required to make you own webpage

  • Note Pad
  • Notepad ++
  • NVU Free HTML editor

I use Notepad++ to code this entire website. For use of Notepad++ please refer to my articles on:

Now let's start to build our HTML page

First create a new folder on your hard drive

I created mine on drive D.

Name your folder MyFirstWebSite.

D:\MyFirstWebSite

You could name your folder anything you like. Throughout this web, whenever I refer to MyFirstWebSite, it means the folder you've named today.

I would prefer my folder to be at the top or bottom so that it's easy to locate.

For folder I prefer to be at the top, I named it 01-Folder, and Z-foldername if I want it at the bottom.

All web pages, regardless they're Tier-1, Tier 2 or Tier 3 pages, will be saved on this folder.

We'll consider subfolder for different categories when the site gets too big. However, if you have already planned your Tier 2 navigation and foresee that subfolders are a way to keep your web organized, go ahead.

Otherwise, even if you're planning a minimum 200-page website, stay at 1 folder for now.

We are going to hand code these onto our first page.

<html> 
<head> 
<title>This is my first website</title>
</head>
<body>
<p>This is my first page<p>
</body>
</html>

Now open your Notepad and key in:

<html> 
</html>  

Remembers this: whatever you opened, you have to close with a slash.

<open> 
</close >  

Also remember this rule: First in Last out.

The HTML tag is the first to be opened in a page, it will be the last tag to be closed.

Tag 2 is opened after Tag 1, it will have to be closed before closing Tag 1, Tag 3 will be opened within Tag 2 and so to be closes before closing of Tag 2, and so on... This applies throughout an HTML page.

Next, fill in the head tag between html tag. (Remember the open and close)

<html> 
<head> 
</head>
</html>

And the body tag.

<html> 
<head> 
</head>
<body>
</body>
</html>

In between the head, fill in the title tag and the title line.

<html> 
<head> 
  <title>This is my first website</title>
</head>
<body>
</body>
</html>

Finally, in between the body tag, fill in the first content line

<html> 
<head> 
  <title>This is my first website</title>
</head>
<body>
  <p>This is my first page.<p>
</body>
</html>

Save this file as myfirstwebpage.html (no spacing) under MyFirstWebSite folder.

D:\MyFirstWebSite\myfirstpage.html

Open the html file by clicking myfirstwebpage.html with your Window Explorer. If you've done every thing correctly, you should see this line on your screen.

This is my first page.

If you are not getting this, repeat from the beginning.

Whatever you typed within the body tags <body> </body> will appear on the browser.

If you could see what you've typed between the <p> </p>...

Congratulations! You've just built your first page of MyWebSite.

One more thing, look at the top bar of your browser window.

It should read This Is My First Web Page - Step 1.

There's where the title tag goes to.

Whatever that are coded within the <body> </body>, they will be rendered on the brower for your readers.

Those that go in between the <head> </head> are for the robots and can be viewed only when you view the source code. We'll talk about that later.

Now let's move on to step 2 of My First Web Page.

CODING
HTML and CSS
How To Make A HTML Web Page?
My first web page
step 1 the first sentence
myfirstpage1. html
 
step 2 the headings
myfirstpage2. html
 
step 3 the bullet lists
myfirstpage3.html
 
step 4 Emphasis - bold and italics
myfirstpage4.html
 
step 5 Lorem Ipsum
myfirstpage5.html
 
step 6 Definition List
myfirstpage6.html

The Easiest Way to Create a Website. Weebly.com


eskay ng

by eskay ng