Create A Web Page

Now that you have your domain set up, you're probably wondering how to create your own web page. A web page is a text file which you upload to your web server using an FTP program. The text file has an extension of .html and can have any file name before the extension. For example, you can name your web page mypage.html, aboutme.html, links.html or anything you like. But the first page you always must create is one called index.html as this is the first web page people will see when they visit your domain on the internet.

Creating a web page isn't really all that hard. However, you will still want to work slowly and take your time to learn a few of the HTML tags and attributes and how they work. This page covers only the very basics, but you will learn how to change your background and text colors, format your text to look nice, add a horizontal divider line, and even add images to your web page. There are tips on how to test your page at the end and where to get help learning to upload your file via FTP. In addition, there are some links where you can learn more about HTML and creating web pages.

Choosing A Text Editor

You can write one using any text editor of your choice, including Windows Notepad. There are also other editors you can use such as EditPlus and 1st Page 2000 which will highlight important tags in your web page file, which can be quite handy. There are some that you do not want to use such as word processors if you are just getting started. If you must use a word processor, be sure that you always save your work as a plain text file.

Creating Your First Web Page: index.html

Let's make the first web page people see when they visit your domain on the web. This page you will save as index.html in your text editor. Open up your text editor and type in the following:


<html>

<head>

<title>My Home Page</title>

</head>

<body>



</body>

</html>

Let's take a look at this code. It may seem rather confusing at first but it's really quite simple. Notice that for each starting tag such as <html> there is a closing tag such as </html>. You can also notice that the closing tags are named the same but with a slash / before the tag name. You can see this for the head, title, and body tags as well.

In the <title></title> tags you put the title of your home page. You can call it anything you like. This is what will appear in the web browser's title bar at the top of the browser window. This describes what your page is about.

Creating Your Content:

Now look at the <body></body> tags above. Between these tags you can put your content. Here you can actually add anything you like. A description about yourself, or a description about what your web page is about. Anything you like. Our code may then look something like this:


<html>

<head>

<title>My Home Page</title>

</head>

<body>


Hello. I am making this page because I enjoy crafts. I like to make all kinds of
things with yarn and plastic canvas.

</body>

</html>

The red text above shows you what we had changed in our code. From here on out, any new thing we change or type will appear in red. However, it will not appear in red on your actual web page unless specified otherwise. The above text you typed in between the body tags will appear on your web page in plain default Serif text.

Changing the Text Style: You can change the text style as well. For example:

This is italic text


<i>This is italic text</i>

This is bold text


<b>This is bold text</b>

This is underlined text


<u>This is underlined text</u>

~~This text is crossed out~~


<strike>This is underlined text</strike>

Creating Links To Other Pages or Email

Of course, what is a page without links! You can easily make a link by enclosing the text in a link tag as so:


<a href="http://www.yourdomain.com/alink.html">This is a new web page</a>

The link text will appear in a different color from the rest of the text and if the visitor's browser is set up a certain way, the link may also appear underlined. You can link to pages in your own directory as such:


<a href="links.html">This is a new web page</a>

Or, you can link to a page in a different directory:


<a href="another_dir/links.html">This is a new web page</a>

You can also link to pages in a previous directory:


<a href="../previous_dir/links.html">This is a new web page</a>

Note the ../ before the directory name. This means start at the directory below the current one and then from there go into the directory called previous_dir.

Another neat thing to do with links is control how the browser will display them. As is, the links will open in the same window (or tab if using FireFox or other tabbed browsers) as your web page, replacing your web page with the page the link points to. If you want your visitor to remain on your page, you can have the browser open the link in a new tab or browser window:


<a href="http://www.yourdomain.com/alink.html target="_new"">This is a new web page</a>

Note the target="_new" means to open a new window or tab.

Finally, if you want someone to click on a link and be able to email you, here is how to do it:


<a href="mailto:yourname@yourdomain.com">E-Mail Me!</a>

Note that there is a mailto: prior to where your email address should go. This tells the web browser to call up the visitor's email program and fill in your email address in the TO: field so they can send you an email. Notice also we do not use any target="_new" or target attribute in any mailto: email link since an email program will be run anyway.

Changing Your Page Background:

Now that you have the basics down, let's take another look at the body tag. You can change your background of your web page to any color you like. Here is an example:


<body bgcolor="#FFFF00">

This will make the background of your entire web page yellow. You can use any color name (red, yellow, blue, green, teal, etc.) or code you wish. Color codes are always 3 pairs of 2 numbers 0-9 and/or A-F with a hash (#) before the number. There are a lot of different colors you can make your web page background. Try some of them found at the WebMonkey Color Chart.

Another thing you can do is use an image pattern for the background of your web page. Be sure that you refer to the exact location of the image, and that the image is such that text will show up easily on the background and is easy to read. We'll take a look at changing text and link colors page-wide in a moment.


<body background="mypattern.jpg">

This will display a repeating pattern of the image you specify. It is best to use tilable patterns and make sure they are small. For a good resource of nice patterns you can try Webmaster Resources.

Changing Your Text and Link Colors:

You can change the color of your text and links across the entire page in the body tag.


<body text="#000000" link="blue" vlink="#808080" alink="red">

The above will make all the text on your page black. All linked text blue, any link that has already been visited, gray and any link you click on will turn red for a moment. You can use any color name or code for your text attributes. Note that these can be overridden by the font tag which we will take a look at in a moment. When the web browser encounters a font tag, it will use those attributes instead but only for the text inside the font tag. Text outside the font tag will revert to the attributes you specify in the body tag.

Making Your Text Pretty: Font Faces, Sizes and Colors

If you would like to make your text look nicer, you can choose a new color for your text. This can be either a color name such as red, blue, green, teal, etc. or a color code such as #FF000 for red, #FFFF00 for yellow (which is hard to see on white) and #0000FF for blue. If you would like to know all the colors you can use in your fonts, try the WebMonkey Color Chart.

To color your text, you put it between font tags:


<font color="#0000FF">This is blue text!</font>

This would display: This is blue text! on your web page.

You can also make your fonts larger or smaller than normal size. To do this, simply type in a number or - and by how many steps to make it smaller or larger. For example, to make the text about one step smaller you would do this:


<font color="#0000FF" size="-1">This is blue text!</font>

Which would display: This is blue text!

If you would rather use a different font for your text, you can do that as well. Here is an example:


<font color="#0000FF" size="1" face="arial">This is blue text!</font>

Which would display: This is blue text!

Noticed that we changed the size from -1 to just 1, which is a small font size. Also notice we used the font face arial. You will want to be careful what font names you use because not everyone has all the different fonts on their computer that you may, and the page may not show up the same on their browser as it does yours. Therefore it's best to stick with these fonts: times new roman, serif, sans serif, arial, or verdana.

One last thing about fonts is that you can also use a heading tag to make really large fonts or titles for your web page. For example:


<h1>This is a title</h1>

Will display this:

This is a title

The most used heading styles are <h1>, <h2>, and <h3>, where the higher the number, the smaller the text will appear.

Positioning Your Text Using Paragraphs and Centering:

Another thing you want to do with text is to position it where you'd like and have it display neatly on the page using paragraph tags: <p>. Here are some examples:

This text is aligned on the left side of the page.


<p align="left">This text is aligned on the left side of the page.</p>

This text is aligned on the right side of the page.


<p align="right">This text is aligned on the right side of the page.</p>

This paragraph is aligned so that both the right and left sides are even. This will form a nice block of text such as that used as newsprint. This is the best way to display text on your page.


<p align="justify">

This paragraph is aligned so that both the right and left sides are even. This

will form a nice block of text such as that used as newsprint. This is the best

way to display text on your page.

</p>

The paragraph tag can also be used to align images and horizontal lines (which we will get to in a moment).

There is one more item to align your text and anything other content you want with. It is called the center tag:

<center><h1>This is a title</h1></center>

Will display this:

This is a title

Finally, any time you want to start a new line, you can use a line break tag which is: <br> and it does not need a closing tag nor do you put anything between it. Just use a <br> as is anywhere you want to start a new line or skip a line.

Some Text Display Tips:

It's always best to use the center tag only for titles, horizontal rules, images and other items that are not text. Reading a page full of centered text is quite messy and looks unprofessional. It's also best to use the default size text when possible. Text that is too big also can look messy. But you want the text to appear large enough for your visitors to read comfortably.

Splitting Up The Page With A Horizontal Rule:

There will be times when you may want to make a divider line to split up the text on your page into chapters or sections. You can do that by just by using a simple <hr> anywhere you want a line. The browser will display a horizontal line the width of the page in the color of your current desktop theme settings. You may want to change the width of this rule to maybe only half a page or a portion of the page. You can do this using a percentage or even just a number of pixels.


<center><hr width="50%"></center>

It's always best to center your lines as well. Here we are making the line about half the screen width. Now, you may also want to change the color of the line, so you can be certain the color will go nicely with your page:


<center><hr width="50%" color="blue"></center>

Adding Images:

Lastly, let's go over adding images to your site. I'm sure you'll want to show off that new puppy or even that silly face you made yesterday! :) So let's get that online. First a few tips. You want to make sure your images are of a size suitable for your web page. Usually you want them to be no bigger than 640 x 480 (which means 640 pixels wide and 480 pixels high). Most digital cameras create images much larger than that, but can take images of that size if set right. You may want to get yourself a nice image editing program such as Paint Shop Pro. Then you can resize the images as you wish.

Linking to an image is simple. Be sure you reference the exact place the image is located on your server. For example, if you put your images in an images directory, you could do this:


<img src="images/mypicture.jpg" alt="My Picture">

Note the alt="My Picture". This you can put in any text you like, and is a description for those who have browsers that do not show images, like screen readers for the blind. This is nice to have so that everyone can enjoy your site and not miss anything.

You can also use an image to link to another page on your domain or even to another site:


<a href="http://some-site-here.com"><img src="images/ducks.jpg" alt="Some Ducky Stuff" border="0"></a>

Now you can click on your image and it will take you to the new site you want it to. Note that we enclosed the whole image tag in a link tag. Also note that in the image tag, we used a new attribute: border="0". This is so that no link colored border will show up around the image. This can look a bit unsightly in some cases.

Now what do I do?

Now that you've learned the basics, experiment with your index.html page and what you have learned. Saving the file in your text editor, then test it by opening it in your web browser using the File Menu and choose Open. Then you can browse to the index.html file you created and the web browser will display it just like you would see it on the actual web site.

Once you got the page looking the way you would like, you can then upload it to your web server. For more information on how to do this, check our FTP FAQs which will help you learn to use an FTP program to upload your file. Then all you need to do is type in your domain name in your browser address bar, for example, http://yourdomain.com/ and you will see your web page on the internet and so will anyone else that goes to your domain.

Congratulations! You are now on the internet with your very own web page! Be sure to give your domain link to your friends so they can see too!

Want to learn more?

Now that you got your feet wet and are ready to make your first basic web page, you may want to dig into some more advanced HTML code. Here is some extra reading to get you started:

Home - Support - Management - About Us
... Active Web Hosting, 213 N Stephanie St G318, Henderson, NV 89074 ...
(702) 449-2337