First Web Site Tutorial - Build a Basic Web Site

Design Marketing and Programming Services

Featured Services
Banner Ad Design
We design banner ads that grab attention, pull clicks and get results. We design banners of all shapes and sizes, animated or static, in Flash, .gif, .jpg or .png format. Contact us for a free estimate.

Customer Testimonial
"I want to write and thank Halstatt and Tad at Marketing Titan for the web support provided for Universal Financial Consultants.

The rolling banner on my email form has created a great deal of interest back to my website, and all the work that your webmaster has done to rebuild my site has truly changed the way that my company operates on a daily basis. In the past, I would have to access public websites for quoting purposes (one at a time), but with your expertise, I can now pull multiple quotes right from the quoting engines installed on my own site for both the life and the health insurance carriers. I have now opened these engines up for public access, enabling me to have a much bigger presence on the web, and giving my clients a tool that they could not get elsewhere in the past.

Thank you for the marvelous marketing and design work and the personal assistance you have provided me in building this project. I am referring some of my best clients to you."

Barry Waxler
UFCAmerica.com

[ More ]

Join Our Newsletter

Creating your First Web Site - A Basic Introduction to HTML

Resources - Tutorials and Articles

by Tad Coffin
MediaTitan.com

Of the many computer languages, there are few as simple as HTML. This article will get you started and instruct you on how to you make your first web page.

First off, what program do you use to write HTML? There are a great variety of programs available to HTML coders to help them out, but while learning, it is important to understand exactly what is going on each and every line of code. Therefore, the simplest solution is also the best - Notepad.

Open Notepad and save a document as:

mypage.html

It is important that the extension is .html, and not .txt or anything else. This identifies the page as HTML right away.

Now we have a blank page called mypage.html. The first thing a web page needs is a line or two telling each computer that reads the page what the page is, which in this case is HTML.

That will look like this:

<html>

You may wish to add a more specific line before the <html > tag, called a header. A header looks something like the following:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

This header explains that the page is in English, what version of HTML is being used, and could also include other information such as what character set is being used. If you use such a line, your page will now look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

One of the most important things to remember about HTML is that almost any tag, which is an expression between the carrot symbols (<>), will have an opening tag and a closing tag. In the case of our <html> tag, the closing tag looks like this: </html>. It is a good idea to write the closing tag as soon as you write the opening tag so you don't forget to do it. You can fill in the information later. Still with me? Good. Now our web page looks like this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
</html>

All web pages have a head and a body. The head of an HTML page, different from the header, should contain such things as the title of the page and meta tags, which are words describing your web page. The opening and closing head tags look like this:

<head>
</head>

And the opening and closing body tags look like this:

<body>
</body>

The head and body tags, go between the <html></html> tags, as does all of the page, minus the header. So now our page looks like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body>
</body>
</html>

Now we are ready to rock! Lets add some text to our page. Regular old text that we want to appear on the screen can be typed directly into the body of the HTML with little or no modification. If we wanted our page to say, "This is my page!" we would simply make our HTML look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body>
This is my page!
</body>
</html>

That's all very good and well, but how do we see this as it would appear on the web? Glad you asked. It's very simple. Open your favorite web browser, such as Internet Explorer or Netscape Navigator, then press the file button, then open, and select your page, mypage.html. Viola! There's your page.

If you go to the 'view' menu, then select 'source code,' you will be able to see the source code you wrote to create your page. This is very useful when you are on other websites and want to see how the source of those pages looks. This is a very good way to learn HTML.

Now that we've put the title of our page on the screen, lets put the title up top in that blue bar. To do that we simply add a title tag (<title></title>) to the head, like so:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>
<head>
<title>This is my page!</title>
</head>
<body>
This is my page!
</body>
</html>

After saving the file, go back to your browser and press refresh. Now at the very top of the page you will see the title you just typed.

Ok, now it's time to spice up the text of your page a bit. First, let's define the size, color and face of our text with the font tag like so

This is my page!

In the above example, the computer viewing the web page will first try using the font face Arial. If the computer viewing the web page does not have Arial installed, the font will be displayed in Verdana and so on.

Next, let's center the text by using the center tag:

<center>This is my page!</center>

Now let's make it bold faced with the bold tag like so:

<center>This is my page!</center>

If you've followed us so far, your code will now look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>This is my page!</title>
</head>
<body>
<center>This is my page!</center>
</body>
</html>

Now lets add some more text to the page. Because we want the text to be of the same font, we will put it inside the font tag, but because we don't want the text to be bold faced or centered, we will place the text after the end bold tag and after end center tag like so:

<center>This is my page!</center> I like pizza, my favorite movie is Caddy Shack and my favorite website is MediaTitan.com.

Thanks for coming to my web page!

If you now view your page through your browser, you will see your text, but it will be all bunched up and not be spaced like it is in your code. This is because you have not told the browser to go to a new line, so it won't. To create a line break, simply type . We use two 's to skip a line, as the first moves us to the next line, then the second moves us one more line down, leaving a blank. The body of our adjusted code now looks like this:

<center>This is my page!</center>
 
I like pizza, my favorite movie is Caddy Shack and my favorite website is MediaTitan.com.
 
 
Thanks for coming to my web page!

One more very important thing to learn before our first lesson is over. One of the best things about the Internet is how each page is linked to other pages. This is what allows us to "surf" around from page to page. Creating a hyperlink, as a link on the web is called, is very easy. The following is an example of the code that creates a link:

<a href="http://www.mediatitan.com" >MediaTitan.com</a>

If we add this link, our code will look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>This is my page!</title>
</head>
<body>
<center>This is my page!</center>
 
I like pizza, my favorite movie is Caddy Shack and my favorite website is <a href="http://www.mediatitan.com" >MediaTitan.com</a>.
 
 
Thanks for coming to my web page! 
</body>
</html>

In future lessons we will learn how to upload our page to the Internet, add images and backgrounds to our page, and create tables.

If you have further questions or would like Media Titan to assist you creating a web site, please contact us - webmaster@mediatitan.com.

Resources Home