The Internet is all but a necessity for most people. It's almost as popular as the television; every household has one — or, in this case, has a connection. From social networking to shopping online to enjoying music, video, and other media, the list of what you can do on the Internet is almost limitless. Many people want to make their own mark on the Web, which is where CoffeeCup's suite of Web design software comes into play.
A Look at the Basic Building Blocks of a Website
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. Many people use this lingo interchangeably, and even seemingly disparate phrases like "Visit our Website," "See our Homepage," or "Check out our web pages" are all interpreted with the same basic meaning.
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, it's a matter of personal or company preference; "Website" still means the same thing as "web site". However, there are some terms that do have concrete meanings, which we'll explain here.
A homepage is the main entry point for a Website. If you type a URL (such as https://www.coffeecup.com) into the address bar of your Web browser, you will go directly to that Website's homepage. Although 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 one or more search engines, users can enter your site from any of those Webpages. It is important that you provide a link back to your homepage on all your Webpages so your users always have a way to get to your homepage.
But we're getting a bit ahead of ourselves. What exactly is the difference between a Webpage and a Website? A Webpage is a single page, such as the one you're on right now. It consists of code written in a special language that can be read and interpreted by Web browsers like Internet Explorer and Firefox, to name just two. A Website is a collection of Webpages. Websites are usually organized using a series of folders that contain Webpages and all the files referenced on Webpages, like images, music, video, and the like.
A Website can be small or large depending on how much information it contains. There isn't a specific number of pages you need to have in your site. Websites can be very basic and created with just HTML (one of those special languages we mentioned earlier) or they can involve some elaborate programming.
There are two different kinds of Webpages: static and dynamic. Static Webpages are written in standard HTML. They are called static pages because all the instructions for displaying the page in the browser are laid out in the HTML code. Dynamic Webpages, on the other hand, get their instructions from another source such as a JavaScript or PHP scripts. We won't go into scripts here, since that could be an entire article in itself.
Virtually anyone can create a Webpage or Website of their own. One of the best learning tools around is Notepad. Yes, we're talking about the no-frills text program that comes with your computer. Believe it or not, you can create a fully functional Website using just this program. It's actually pretty effective, since it forces you to learn the necessary HTML tags instead of relying on the program to know them for you. However, because it doesn't do any fancy tricks, like automatically inserting tags or detecting errors in your code, it can also be very time consuming.
If you don't have the time or desire to learn HTML, you might be better off with a WYSIWYG editor such as CoffeeCup Visual Site Designer. This program allows you to create a fully functional Website without having to type a single line of code.
For those of you who want to learn how the basics of using HTML to design a Webpage, the rest of this article will show you how.
Webpage Basics
Before you begin to create your Webpage, first create a new folder where you'll store your HTML files. This will help keep your pages organized.
Next, fire up Notepad. 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 <p> 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 </p> 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 <br /> 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 <br> will create a line break where ever you place it. The <br> 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 <b> 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:
<b> this text is bold</b>
When rendered by the web browser the results will be this: this text is bold
The <i> 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:
<i> this text is italics </i>
When rendered by the web browser the results will be this:
this text is italics
You can also use these tags together:
<b><i>this text is in bold and italics</i></b>
When rendered by the web browser it will look like this:
this text is in bold and italics
The <font> 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.
<font size="3" color="red">This is some red text</font>
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="https://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="https://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 https://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="https://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.
