Home | Internet Business | Web Design

The three ways you can build a web page

By: lowster11

1. Use a pre-made template: WHAT IS WEB DESIGN TEMPLATE?
Web site design templates are pre-made web designs, which can be customized to reflect your company's branding. Website design templates can be found in various formats like Photoshop and HTML. Many times these templates are compatible with HTML editors like GoLive, Frontpage and Dreamweaver.

Web site templates can be very useful; they can be used by experienced web designers to 'jump-start' the creation of a website. They are also a way for people to put out great looking web sites quickly with little or no knowledge of HTML and web design.

2. Use an HTML editor like FrontPage OR Dreamweaver:
HTML editors make building web pages feel like (to a certain extent) creating a document in Microsoft Word ... it's made pretty easy. But the downside is that you loose a certain amount of control of what you're doing and in some cases become dependent on the program.

3. Hand-code your HTML in a text editor like Notepad:
That means you type in the HTML code yourself. This is the approach we are going to use here, because it's the quickest way to learn how to build web pages, and it is arguably the best way because you have the most control over what you're doing.
Ok, now that we know the advantages of hand-coding web pages, let's jump into just the bare minimum of theory, then we will build our first web page!
What are HTML tags
HTML tags are specifically formatted text that creates 'markers' for web browser to read and interpret. These 'markers' tell the web browser what and how to display things on the web page. Tags are placed in and around text and images (text and images are some of the 'things') that your want to have appear in your web pages.

HTML has a whole bunch of tags (just like the alphabet has a whole bunch of letters) that the web designer can use to build web pages. As mentioned above, tags have a specific structure so that when the browser is reading an HTML page, it knows the tags from the normal text.
Tags are typically words or abbreviations of words placed between angled brackets. So for example: to make text bold, HTML has the 'bold' tag that looks like this:
This text will be bolded
Another commonly used tag is the paragraph tag:

This is a paragraph of text .

You may have noticed that HTML tags come in pairs; HTML has both an opening tag () and a closing tag (). The only difference between the opening and closing tags is that the closing tag has an extra forward slash in it.
some EXAMPLE HTML tags that might make things more clear:
Make text bold
Makes text italic

Tells the browser that this text is very important - the browser usually makes this text really big

Creates an HTML table - think of a spread sheet

I hope you can see the pattern in the list above.
HTML tags are not just for placing and formatting text, HTML tags can be used to include other things like: animation, video, Flash, audio and even multimedia programs.

Comparing HTML code and the web page it creates
Let's start with a very simple web page to make it as easy for you to understand. First lets look at the final page: sample web page
Now that we've seen what the page looks like, let's look at the HTML code used to create the page.
What you should do now is take a little time and compare the HTML page and the page with the code that is used to create the page. Notice where the tags are and what they are doing.
SOME theory: the structure of an HTML page
An HTML page is divided into two major sections:
1. The body
The body () section: this section contains all the stuff that appears on the actual web page when someone happens to come along with their web browser. We are talking about the actual text , images, flash movies and so on that people will see. That of course means the tags used to format all this stuff is there too ...
2. The head
The head () section: which contains underlying information about the page that does not get displayed in the web page (except for the title of the page). It does however have an affect on how the web page is displayed.
You will notice that both the head and the body sections of a web site are marked in the HTML page with their respective tags: ( ) and ( ).
If the body tag creates the body of an HTML page, and the head tag creates the head of an HTML page, how do you create an HTML page itself? You guessed it, use the HTML tags:

The 'mother of all tags' is the HTML () tag, and like all tags it must have a start tag () and an end tag (). The difference between the start and end tags is the forward slash (/), but you already knew that .
Every web page MUST begin and end with the HTML tag, otherwise the web browser (programs like Internet Explorer) will not be able to display the page. You also have to have the head tags and the body tags. All the other tags are optional.
So the bare-bones HTML page must have these tags and in this order:

Title of your page

Step 1: let's write some HTML code
Open up a text editor like Notepad on Windows or SimpleText on the Macintosh and type this in:

Your first hand coded page!

Hand coding web pages is easy!

I would like to thank everyone who helped me type this page.

Step 2: save the file as an HTML document
Save your HTML file (save it to your desktop so you will be sure to find it!) using your text editors 'Save as' function and name the file webPage.html. You can choose any name you want really as long as you follow these 3 rules:
Web page names cannot have spaces in them: 'web page.html' is no good but 'webPage.html' is perfecto.
The name has to end with either .html or .htm; by ending the file name this way you are telling the computer that this is a web page and that it should use a web page reader / browser to view it.
Don't use funny symbol like: $, %, ^, & in your page names. Stick to standard letters and numbers.
Step 3: Marvel at your work and view your page
You should be able to now just double click on the page or open it up with your web browser by going to its "File" menu, then select "Open file" and select your page.
You should be able to see you page in all its glory! Ok, not too much glory, but it was your first hand-coded page after all! If you don't see anything, then compare what you typed with the original I gave you and just go over the process again. You will get it if you give yourself a chance!
If you're not sure if what you created is looking like it's supposed to, you can check out the final page here and compare it with your own.
Conclusion
Now that we've built our first web page, we can now move on to building our first web site.

Absolute vs. Relative URL
To link pages in your web site from one page to the next you have a choice of using one of two types of addresses: absolute addresses (complete) and relative addresses (partial).
Before I go on, URL is a nerd's way of saying 'address'.
An absolute URL is the complete address of a page that can be found from any other location on the Internet. So let's say you have a page called contact.html on the root of your web site who's domain name is www.lowster11.com . In this case, the absolute URL of the contact.asp page would be:
http://www.lowster11.com/contact.asp
Ok, now I know I lost a few people because I used a word that I did not explain: 'root'.
When geeks talk about the root of a web site, they are taking about the base of the web site, the starting level.
The files (pages, images etc.) that make up your web site are organized in folders just like any other files that you store on your home computer. Your host will give you a space/directory on their server for you to place all your websites' files.
This space/folder assigned to you will be the 'root' of your web site. This means that as far as the Internet is concerned, anything (html files, images other folders etc) in this folder is directly accessible by your domain name plus the name of the item. Huh! Even I'm a little confused! Perhaps a little example to show you:
Let's say that on the root level of your website, you had these HTML files:
Index.html and Contact.html
And in a folder called 'products', you placed whole bunch of other pages with one called 'bookcases.html'. You decided to put all your 'product' HTML pages into a 'products' folder to keep the web site more organized - a smart thing to do!

Some quick tips to remember
Keeping web pages small - under 60k
Keeping content headers (H2 tags) clear and to the point.
Keep paragraphs small.
Keep contact information (email - phone) easily found in same place on all pages.
Keep look and structure of the web pages consistent across all pages.
Provide a 'Home' button to take the user back to the cover (a.k.a.: splash, home) page of the website.
Make sure links are always underlined. (Don't use CSS to remove the underline: big mistake if you do since people assume that underlined texts are links.)
The company logo should appear on every page in the same spot and it should always be a link back to the home page.

Visit my web site www.lowster11.com

Article Source: Main Articles

This article may be reproduced wholly or in part without written permission provided the byline, resource area, and any hyperlinks remain in order to give proper credit to the author.

Internet search engines and directory listings are imperative to your sites existence and success. Submit Your Website to the Searchen Networks directory and search engine to achieve authoritive inbound links.

Please Rate this Article

Click the XML Icon Above to Receive Web Design Articles Via RSS!

Additional Articles From - Home | Internet Business | Web Design

	Print This Article
	Post Comment
	Add To Favorites
	Email to Friends
	Ezine Ready

	Submit Articles
	Member Login
	Top Authors
	Most Popular Articles
	Submission Guidelines
	Ezine Notifications
	Article RSS Feeds

	New Stuff
	About Us
	Link to Us
	Contact Us
	Privacy Policy
	Terms of Service

:: Top Author Businesses:

Try your luck, Play BlackJack

:: Our Supporters: