CoffeeCup - HTML Editor, Flash & Web Design Software

Over 50,505,614 Downloads in 87 Countries

Homepages, Web Pages and Websites

A look at the basic building blocks of a Website

Over the last few years, the Internet has been gaining more recognition and popularity than ever. It's almost as popular as the television; every household has one, or, in this case... has a connection. Everyday it is becoming a larger part of our normal daily lives; from shopping online to sending a simple email to friends and family. There is even software available to you so that you can create a Website or homepage of your very own either for business or personal use. The list of what you can do on the Internet is almost limitless.

With the advancement in technology, comes new Internet lingo. Many of us have already added this new lingo to our daily vocabulary in some way. Some of these terms have not yet been standardized in the way they are actually supposed to be used or spelled. Many people will use the lingo interchangeably; "Visit our Website", "See our Homepage", or "Check out our web pages." Is there a difference between these terms? As far as spelling goes, some may argue that one term should be spelled one way and someone else may say that it's wrong and should be spelled differently. At this point in time, it is a matter of personal or company preference; 'Website' still has the same meaning as 'web site'. The way that these terms are used, however, there is a major difference. Here, we'll focus on the meanings of these terms as well as show you the basics of how to create your own web page, homepage or Website.

The homepage of a Website is the main entry point to a site. If you type a URL (such as http://www.coffeecup.com) directly into the address bar of your web browser, you will go directly to that Websites homepage. While the homepage is designed to be the entry point to a Website, Website owners cannot assume that all viewers will enter the Website by that page only.

If you have more than one page on your Website, and they are indexed in the search engines, users can enter your site from any of those web pages. It is important that you provide links or at least a link back to your homepage on all your web pages so that if this should happen you can always provide your users with a way back to the beginning or homepage of your site in case users get stuck.

If you have more than one page in your site you have what is known as a Website. A Website is a collection of web pages, files, and images that make up your Website. A Website can be either small or large depending on exactly how much information you have to put into it. There is not a specified amount of pages you have to have in your site for it to be considered a Website. All these pages in a Website are interconnected with each other and connected to the homepage. Websites can be very basic and created with just HTML (HyperText Markup Language) or they can involve some very elaborate programming.

A web page is a document that can be accessed through any web browser. These web pages are made up of HTML code which the web browser then renders and displays it into human readable information. Web pages are mainly accessed from a web server where the web pages reside; however, Web pages can also be accessed on a local computer or a private network called an Intranet. Intranets are used for company internal Websites.

There are two types of web pages a site can have; static and dynamic. Web pages made up of standard HTML coding are referred to as static pages. They are called static pages because all of the instructions for displaying the page in the browser are in the HTML coding. Dynamic web pages on the other hand, get their instructions from another source such as a JavaScript or PHP scripts; these can be on the server which is referred to as server-side scripts or there are other scripts that are client-side which send the page as is. We won't go into scripts here as that is an entire article in itself.

Virtually anyone can create a web page or Website of their own. Taking a little bit of time to learn, you can have yourself a web page in minutes. One of the best ways to start learning how to create your web page is to use Notepad. By using Notepad, you can learn all the HTML tags that are necessary for your web page to work and display correctly in a web browser. Using this program, you are really forced to learn because you have to type everything out by hand; Notepad doesn't automatically insert tags for you so it can be very time consuming as well. Notepad doesn't detect syntax errors either; which is error in your code. Finding the errors can be difficult and time consuming, so I caution you to use care when writing your HTML. If you find yourself strapped for time and don't have the time to learn, or really don't care to learn, I would suggest trying our Visual Site Designer software. Using this software, you don't need to have any knowledge of HTML whatsoever to use it. Download it, test it out and see just how easy it is. With that said, those of you that want to learn power up Notepad and let's get started.

Web Page Basics

Before you begin to create your web page, create a new folder to store your HTML web pages in. This will help you to keep your pages organized.

The first thing you will need to know is that the code elements that makes up HTML is referred to as tags. So throughout the rest of this article we will use the term tags for the different HTML elements that you are going to use. Also these tags are not case sensitive so you can use either all capitals or all lowercase letters. Which ever way you choose, you should be consistent with it throughout your web page.

To first start your web page you will need to use these tags:

<html>
</html>

This is the beginning tags that tell the web browser how to display the document. The second tag is the closing tag with the slash /. The contents of your page should be between these tags. This closing tag lets the browser know that this is the end of your HTML.

Next, you will need to have a set of <head> tags:

<html>
<head>

</head>
</html>

The head tag is used for several different items such as Meta tags and the title tag. The text in between these tags will not display on your web page. Right now we are only going to focus on the title tag:

<html>
<head>
<title> This is your web page.</title>
</head>
</html>

The text between these title tags is the text that displays in the blue area at the top of the browser window.

Next is the body tag. This is called the body tag because it's the body of page and where the bulk of your coding and the page content will go.

<html>
<head>
<title> This is your web page.</title>
</head>
<body>
Welcome to my web page!
</body>
</html>

Now you can save your web page. Click on File > Save As. When the 'Save As' box opens, at the bottom of the box select 'Save As Type:' and select all files. Then for the file name type in: mypage.html Make sure that you save it in your new folder that you created earlier. You can now go into the folder and double click on the icon to see your work.

Before moving on to the next steps... Congratulations! You've just learned the bare minimum of what is necessary to make a web page function in a web browser.

Exploring the Body Tags

You can create different effects on your web page background using attributes of the body tag. An attribute is an additional property of an HTML tag that lets you define the tag to have more control over the tag and what it does.

To set a background color to your web page you can use this attribute:

<body bgcolor="#99CCFF">

The attribute is bgcolor and the numbers are hexadecimal code so that the browser understands what color it should display for your web page. The color used here is a light blue. If you copy the code into your page, save it and then view it in your browser, you'll be able to see it.

You can also use images as your background:

<body background="bckgrnd02.jpg">

This attribute will tile the image across your entire web page; you can use different images to create different effects. If you decide to use a background on your homepage you should also use it on other pages created in your Website. This will create consistency in your Website.

Text Attributes

There is several text attributes that you can use in your web page text that will give it more style, formatting or allow you to put emphasis on specific words within your text.

We'll cover a few of the most commonly used tags. Let's first take a look at formatting tags that you can use to format the text on your web page:

The tag. This is a text formatting tag that allows for creating a new paragraph in your text. You'll want to use this tag at the beginning of each new paragraph you create. Don't forget to use the closing tag at the end of your paragraph. When you use the paragraph tag, the browser will automatically add a blank line before and after the paragraph.

The tag. This tag is used for ending a line of text. Let's say you don't want to start a new paragraph but you want to start another line. Using the will create a line break where ever you place it. The tag is an empty tag, so you will not need to use a closing tag for this.

Now that you have learned how to format your text nicely in paragraphs, we can now start putting emphasis on words, sentences or phrases. You can do this by styling your fonts using these most commonly used tags:

The tag. This tag will allow you to bold any words you want to on your page. You should use these sparingly because too many bold words will make it difficult to read your web page. You would use this tag like this:

 this text is bold

When rendered by the web browser the results will be this: this text is bold

The tag. This will have the same effect on your text except it will be in italics instead of bold. Here is an example of the italics tag:

 this text is italics 
When rendered by the web browser the results will be this: this text is italics

You can also use these tags together:

this text is in bold and italics
When rendered by the web browser it will look like this: this text is in bold and italics

The tag. This tag is used to create different variations of your text rather than just bold or italics. You can use this tag for adding different color text, sizes, and font type.

This is some red text

For this example we've used the font tag to change the size and color of the text. The size is 3 and the color of the text is red.

This is some text!

In this example we've changed the font face to Arial and the color is red. You will want to be careful when changing the font face. The web browser will render the page based on what is installed on the users' computer; if the font you chose is not installed, it will not render correctly and the user will see the default font.

Adding Images

Up to this point we have covered mostly textual tags. Adding images to your Website can make it more visually appealing to your visitors. When you add images to your Website they should be in some way be related to the content of your site.

The tag for adding images to your site is fairly easy, the basic tag is this:

<img src="http://www.mysite.com/images/house.gif" />

We have the domain name which is mysite.com, a sub-folder created on the server called images and then finally the name of the image.

What you will need to do here is replace the URL with the exact path to the image on your server. If you have not uploaded an image or if the URL is not exact, the image will not show up and this will result in a red X being displayed on your page.

We can further add attributes to the image tag as well. This is called the alt tag; which means 'alternate'. By using this tag, it will tell the user what is missing from the page if the browser doesn't load the image. It will then display the alternate text. Also, when the image does appear in the browser, you can mouse over it with your cursor and it will display the text. Many webmasters will use this to describe the image. It is good practice to use the alt tag for every image in your page.

Here is an example of the image tag with the alt text:

<img src="http://www.mysite.com/images/house.gif" alt="Our house" />

Creating links

The homepage in your site should be named index.html. When users visit your site at the root domain name which is http://www.coffeecup.com the web browser automatically looks for the index.html file on your server, then it displays your homepage to the user.

Once you have created your homepage, it's time to start adding more pages to your Website. You would create these pages the same way as you've created your homepage using the same basic HTML tags. The difference is going to be in the body tags that will contain different content than your homepage; you will be creating pages about specific topics or products.

Creating links from one page to another is a very simple task. For an example, let's look at our Website. We've created our homepage and want to include a page specifically for our list of software. So we create this page like we did the homepage, and change the content of the web page so that it is all about software. We saved the page in a new folder called 'software' as index.html. Now we need to direct users to this page. We do that by creating a text link to that page. Here's how you would do that:

<a href="http://www.coffeecup.com/software/">Software</a>
This is what it will look like: Software

The <a> tag is called the anchor tag. This will create a link to the URL you specify; as with other HTML tags you will need to use the closing tag </a>. In the example above, the URL is the full URL to the new web page. You can copy this link to your browsers address bar and it will load the page. The word Software in the example, is the only word that is going to show up as a link on your page. When you look at this in your browser, the word will be blue and underlined (by default). This indicates to the user that they can click on the link and presumably go to a page about software.

This is the bare basics of creating a simple web page. There is so much more to learn that would turn this article into a book... oh, wait we've already done that! If you want to learn more HTML checkout our book called "My Website is Better than Yours."

If you think that typing out all these tags in Notepad is just plain crazy and there just has to be a better way, I agree with you and there is a better way. Our HTML Editor is one of the best editors out there for creating HTML web pages and also has a visual editor to help you along.

Once you get the basics down you will want to start adding effects and other fancy elements to your pages. Our Flash Software is a great way to get professional quality effects and features with minimal effort.

We hope that you have learned a little something here today, and that you will continue to learn and have fun with your Website. We are here to help you, so try our software, ask us questions, and join the hundreds of thousands of people in the CoffeeCup family in helping to make the web a cooler place.

Thanks,

The CoffeeCup Team