.: 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 <tagname> and </tagname>. 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 www.freetipsandwits.com or freetipsandwits.com at browser address, it will open the index file. If you like to see it, try clicking the link to my site. 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.

Creating a basic web page template

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:



For example:



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.



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 . 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.

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.

Digg del.icio.us Blink Stumble Spurl Reddit Netscape Furl

Article keywords: website building, web page making, creating a web page, make web page, how to create web page, how to design web page, how to make web page

Article Source: http://www.articles32.com

About the Author:
Hardi Budd is affiliated to www.freetipsandwits.com and free-website-tips-guides-tutorials.blogspot.com that offer Free website tips, guides, tutorials and web resources for affiliates, internet marketing, online business, search engine optimization, website promotion and internet security. Supported with affiliate programs, freebie directory, add URL, link exchange, english tagalog jokes, news and more.

This is free for republishing as long as the author byline with active link to our sites is retained as-is.

.: New Web Design Articles

1). HTML Might Become Obsolete
Web designers are beginning to dump HTML in favor of more versatile web programming languages

2). Macromedia Dreamweaver: An Introduction
Getting started with your first web page can seem very daunting indeed. Macromedia Dreamweaver is the industry leader in web editors, but knowing where to start and what you need to know can be a little confusing at first.

3). Finding A Good Web Designer
Avoid the mistakes I made when I hired someone over the internet to design my web site

4). Top Tips for Getting Free Websites
There are millions of opportunities of earning money online, but for that you frequently need to have a web site and there are many people interested in how to build a web site online for free. So whether you want to build a free business web site or to build a Yahoo-like web site, you can be sure there are plenty of online guides, such as this, to take you step by step through the process.

5). Is Your Web Site Driving Away Visitors?
Much has been written about optimizing your web site for search engines, but less emphasis is placed on usability. Optimizing for usability and for search engines is not a contradiction.

6). Choosing a Web Designer
freelance web designers are rip-off artists

7). HTML Sitemaps Are Still Important
An html sitemap is one that humans and search engines both can read. Google sitemaps are important too, but they are specific to google and are read only by a search engine.

.: Top Web Design Articles

1). Advanced Joomla Templating (pt1) Using Module Class Suffix
an article from User Written Resources 1. duplicate the styles already used for the particular module, adding a suffix to each style name. this will definitely include some of the following; 1. .module {} 2. div.moduletable {} 3. div.moduletable h3 {} 4. table.moduletable {}/li> 5. table.moduletable th 6. table.moduletable td and can include other styles used on the content in that section, such as; 1.

2). How To Make a MySpace Layout That Stand Out
If you are a MySpace user, you have learned what an easy to read and fun profile looks like. The only problem is, you may not know how to create or find out. Most of the time when you see an awful MySpace layout, it's because its sloppy, hard to read, or has annoying links you didn�t even see. That is because since MySpace has been growing so much, so have the layout sites.

3). Professional XOOPS theme design - What to look for
In general, prices for theme design work will range depending on a number of factors. If you don't mind the designer releasing the theme on their site for others to purchase, then you can expect anywhere from $20US to $50US for your theme. If the theme must be a one of a kind theme that only you use, you could expect to multipy the fee by at least 10x.

4). Adsense: The Smart Investment
Over the last 2 years, We have been building a Virtual Adsense Empire of over 500 websites and making some good money. We've also been building content sites for clients using the same system. The system we use is not something that produces 1000's of sites with a click of a button, our system does not build spam websites, nor does it produce the same sites you see over and over and over again.

5). Irish Graphic Design Industry
Graphic design is the use of color, light, balance, contrast, emphasis, proportion, proximity, repetition, texture and a plethora of other elements to create a work of digital art that is pleasing to the eye. Graphic design is about seamlessly molding image and text to convey a theme, message, or often advertise a product or service. Graphic design dates back to prehistoric times.

6). How to Create a Splash Page for Your Website?
These splash designs prove to be quite popular, especially among the designers as they allow the designer to show their skills in flash and any other technology on a single page. The splash page design involved in the splash page will be one that is very attractive to the eye of the viewer. Its main intention lies in captivating the viewer the moment he looks at it.

7). Does Your Web Design Include Background Music?
When you design your website, you may wonder whether or not you should include background music in your web design. The answer to this requires you to ask two additional questions: