Creating Your Own Web Page Is Easy - A Tutorial (Part 1)

Yes, it is easy to create a web page though you are not an IT professional or a person who is involved in IT things. A basic web page is made up of simple HTML tags or codes and HTML is easy to learn.

After going through this tutorial, you will learn how to create your own web pages for your website. This includes the following topics divided into three (3) parts:

Part 1:
Outline of a web page
Creating a web page template
Placing invisible comments to your code
Creating a single or double spaces
Creating an ordered list and unordered list
Inserting an image

Part 2:
Creating tables
Using CSS boxes as webpage layout

Part 3:
Linking other pages and other websites
Using CSS in styling your web pages

Let's discuss here the Part 1:

Outline of a web page
Creating a web page template
Placing invisible comments to your code
Creating a single or double spaces
Inserting an image

Outline of a basic web page

If you are new to html, I am now telling you that a web page is simply created with html tags. Html tags are shown as and . Look at the outline of a web page below:

‹html›
‹head›
‹title›

Here you will place the title of the page. The texts here are displayed at the topmost left of a browser or web page.

‹/title›
‹style type="text/css"›

This is the place for Cascading Style Sheets or known as CSS. CSS defines the styles you will use in your web page such as font color and size of the text, background image, boxes, etc. These are effected in the body but most of the style definitions affects only those areas where you use them.

‹/style›
‹/head›
‹body›

Here you will implement the layout using style definitions you have made in the "style" section. Without putting anything here the page will be blank except for the title that will appear at the topmost left of the page. You will also place here the content of your website. It may be mixed of texts, images, audios and videos.

‹/body›
‹/html›

The above must be saved as a html page with extension of html or htm. If you want to see how the above will look like on as a web page, copy the above from ‹html› to ‹/html› and paste to your Notepad or equivalent. Then click File - Save as - type mywebpage.html or mywebpage.htm in File Name - Select All files as file type - Click Save. Then go to windows explorer or file manager and open the file with your browser. See? It is as simple as that. Now, don't close your Notepad and your browser. We will use that in our practice.

As an important note, your homepage or the starting page of your website must be named as index.html or index.htm. This will be first page when your website is called without specifying a particular page. Like this site, if you type http://www.freetipsandwits.com or http://freetipsandwits.com at browser address, it will open the index file. If you like to see it, try clicking http://freetipsandwits.com. You may wonder why the index file is "index.php". Well, this site is php-based but do not bother yourself with this php thing. Familiarize yourself first with html and later you may learn php, asp, jsp, cgi & more. In html, you must save your index file as "index.html" or "index.htm". Pages other than homepage must be saved with descriptive keywords using hyphen as separator. This is for search engine optimization.

‹b›Creating a basic web page template‹/b›

First, I would like you to make a simple web page template. We will use this for practicing the html codes that we are going to learn later. So, in above mywebpage.html, delete all codes you typed earlier and type the following:

‹html›
‹head›
‹title›My Web Page‹/title›
‹style type="text/css"›

‹/style›
‹/head›
‹body›

‹/body›
‹/html›

Leave some spaces between style and body tags. Now, click Save icon or click File - Save. If you accidentally close this file, you can open it by searching the file, right-click it, click Edit or Open with Notepad or its equivalent. To see what it looks like on the web, just refresh the browser use when you opened the html outline a while ago.

Placing an invisible comments to your codes

I would like you to know how to place your comments on your html codes. Web developers normally put comments in some of the codes for future reference particularly for editing. It will be easy for you to find what you're looking for when you are updating or editing your html codes. This will help also other webmasters if you let them edit your codes. These comments are displayed only in raw html codes or in your html editor but not on the web page or browser page. This is done as follows:

‹!-- type your comment here --›

For example:

‹!-- website building tutorial starts here --›
Building your website is easy. Just learn basic html codes and you're done. Don't be afraid of html codes, they are easy to learn. When you start learning html, you will ask for more and more....and so and so forth....until you become an expert web developer.
‹!-- website building tutorial ends here --›

Type the above in your mywebpage.html between body tags. You will learn faster if you retype or remake the above. But if you are in a hurry, you may copy and paste it. Save it by clicking the Save icon or File - Save.

Now, refresh your browser for the above html file. See? Yes, you can't see your comments between ‹!-- and --›. So, for your reference and easier editing of your codes in the future, don't forget to place your comments.

Making a line to break or creating a blank line space

If you want to break a line or create a blank line space, use this break tag ‹br /›. See how it is used below:

-This will break affiliate‹br /›marketing from word "affiliate".

-This one will break this web‹br /›site from letter "web".

-This one will result in a double line space search engine‹br /›‹br /›optimization from the word "engine".

You type this within the body tags of your mywebpage.html, save it and refresh your browser. Yes, the sentence is broken and second row started with "marketing" the word before the break tag. The word was also divided into two with the next row started with "site", broken from word "website". The two consecutive break tags created a double space between "engine" and "optimization".

Making an ordered list and unordered list

This is useful when you are enumerating or listing something. See the illustration below:

Ordered list

‹ol›This is Ordered List
‹li›Item 1‹/li›
‹li›Item 2‹/li›
‹li›Item 3‹/li›
‹/ol›

Now type the above in your mywebpage.html within the body tags, save it and refresh your browser and see the results. See? It's sequentially numbered. Now, here is the unordered list:

Unordered list

‹ul›This is Unordered List
‹li›Item 1‹/li›
‹li›Item 2‹/li›
‹li›Item 3‹/li›
‹/ul›

Now type the above in your mywebpage.html within the body tags, save it and refresh your browser and see the results. Now, it's not numbered. It's in a bullet format.

Inserting an image

You may place an image to your web page by inserting these codes where you like the images to appear in your web page:

‹img src="http://your-domain-name.com/image-directory/image-file.gif" alt="image description" height="???" width="???" border="???" /›

Looking at the above html codes:

"img" is the image html tag;

"src" is the source or the path of the image file with extension of gif, jpg and png;

"alt" is the alternative text description in case the browser could not display an image;

"height" and width are the dimension of the image;

"border" is the outline of the image.

Now, do these:

-Replace the above domain name, image directory and the file name with yours.

-Replace the values of "alt" with your own description. This is required for SEO or search engine optimization;

-Replace the values of "height" and "width" with your preferred dimensions of your image in pixel without distorting it. The size of the image will adjust based on the dimensions you specified. Fixing the height and width of the image will make it load faster;

-Replace the value of the "border" with the border thickness you preferred. 0 is no border.

To try the above, get an image from your file and copy it to the directory where your mywebpage.html is located. Now, type the above codes in your mywebpage.html but replace the src="http://your-domain-name.com/image-directory/image-file.gif" with src="image-filename". Then, save it and refresh your browser to see what it looks like in the web browser.

Continue with Part 2.