Build a Web Page

This tip will tell you exactly how to code your own HTML website.

First, remember that most tags must be eventually closed. The syntax would be: <tag> CONTENT </tag>.

Open a text editor such as notepad, or the HTML editor for your hosting service.

The first tag in your website should be <html>, which starts the HTML site.
Immediately after this should come the <head> tag.

So far, you should have the following:

<html>
<head>

The next step is to enter the title of your website. This is what shows up in the title bar of the internet browser. Put the title between the <title> and </title>. Then, end the head with </head>. You will end up with:


<html>
<head>
<title>TITLE</title>
</head>

Other data to put into the head includes metadata and stylesheet data.

The next step is to add the body of your website. This is where all the important stuff goes. Start out the body with the <body> tag. In a basic website, all the real content goes in the body.

The most basic way to write the body is to simply write a heading, then type.

Within the body, start off by writing the first heading. This should be big, so the <h1> tag should do the trick. After that, simply write the text of the site. Remember the syntax for making links:

<a href="http://www.linktarget.com">LINK</a>

And for making images:

<img src="http://imagesite.com/image.jpg"> .

Remember, most HTML Tips can be simply inserted into the body and used immediately.

Finish off the body with </body>, and the body is done.

The code with the body included should look like:


<html>
<head>
<title>TITLE</title>
</head>
<body>
<h1>THE SITE</h1>
blablabla
<a href="http://www.linktarget.com">LINK</a>
IMAGE:
<img src="http://imagesite.com/image.jpg">
</body>

Remember, you still have 1 more tag to close: the <html> tag. Close it with </html>, and your website is complete. The final code:


<html>
<head>
<title>TITLE</title>
</head>
<body>
<h1>THE SITE</h1>
blablabla
<a href="http://www.linktarget.com">LINK</a>
IMAGE:
<img src="http://imagesite.com/image.jpg">
</body>
</html>

If you want to see what that code looks like in a real web browser, go to this page, which uses the exact HTML code above:

Test Site

Your basic website is complete! For more advice on tables, frames, text formatting, Javascript, etc., look at the rest of the tips on this site. Almost all of them can simply be inserted in the body. Now you know how to make your website from HTML!

Also, if you are using Blogger, you can go to the "template" section of the dashboard, and edit the template, which is raw HTML. Be careful not to change too much stuff. The beginning data is stylesheet data, so don't mess around unless you know what you're doing. However, you can find the sidebar, and mess around with that quite freely.

You can always use a program like Frontpage or Dreamweaver, but raw coding is always the best way to make your website exactly like you want it!

Links and Images Basics

These tips and tricks will teach you how to put a link or an image into an html page.

To put a link, use the following code:
<a href="http://google.com">Google</a>
The result is as follows:
Google
Make sure you change "http://google.com" to the address of the site that you want to link to and that you change "Google" to the text that you want users to see.

To put an image into your web page, use the following code:
<img src="http://www.google.com/intl/en/images/logo.gif">
The result of that code is as follows:

Make sure that you change "http://www.google.com/intl/en/images/logo.gif" to the address of the image you want to display.

So those are two basic html tips!

New Line Tips

Sometimes you want there to be a large number of empty lines.
If you do, you will have to use <br>
Simply insert <br> wherever you want there to be a new line.
For example, if you want 5 lines to be skipped, use this html code:
<br><br><br><br><br>
It will create this:

You can put the br tag nearly anywhere in your html document. Make sure that it is in the body, however.

Tips on Headings

These html tips and tricks will show you different types of headings.

Look at the following html code:
<h2>Heading 2</h2>
It creates this heading:

Heading 2

Now looking at this html code:
<h3>Heading 3</h3>
It now creates this slightly smaller heading:

Heading 3

The 2 and 3 in H2 and H3 can be changed to any number between 1 and 6 to make different sorts of headings.
Here is an example of some code that uses headings:
<h4>Heading 4</h4>
Heading 4 is the fourth most important heading.
<h5>Heading 5</h5>
Heading 5 is the fifth most important heading.
The code results in the following:

Heading 4

Heading 4 is the fourth most important heading.

Heading 5

Heading 5 is the fifth most important heading.

Related Tip:
Tips for Formatting Text

Fun Tips and Tricks

These html tips and tricks will show you some rarely-used html tags.

All these tags will show the exact same primitive-looking text:
<code>
<kbd>
<tt>
<samp>
For example, look at the following code:
<kbd>Text style that can be used to show programming code or basic, boring texts</kbd>
That code will create this:
Text style that can be used to show programming code or basic, boring texts

Pre-Formatted Text

These tips and tricks will allow you to have greater control over text.

To preformat text, you will need to look at the following html:

<pre>
This text is
preformatted
</pre>

It will display the following:


      This text is
           preformatted

If you simply were to remove the <pre> tag, like this:
This text is
preformatted
Then this text would be displayed:

This text is
preformatted

Here is another example of the uses of preformatting text.

Javascript: Rollover Buttons

These javascript tips and tricks will teach you how to make image links that change as you put your mouse over them. It is simple.

First, you need two images. One will be the image when the link is not being touched, the other image is when the link has been activitated.
In this case, I am using these two images:

Second, you need to put this code in between the <head> and the </head> on the page that the rollover link is going to be on:
<SCRIPT LANGUAGE="Javascript">
</SCRIPT>
Make sure that you change the two URLs (in italics). The first one is to the image of when the link is not activitated, and the second is to the image when the link is touched.

Finally, you insert this HTML code in the main part of your web page, and you you will get a rollover button that links to another site.
<A HREF="http://htmltips.blogspot.com.html" onmouseover="mybutton.src='
http://www.blogblog.com/tictac/tictac_orange.gif';"
onmouseout="mybutton.src=
'http://www.blogblog.com/tictac/tictac_green.gif
;"> <IMG SRC="http://www.blogblog.com/tictac/tictac_green.gif" name="mybutton"></A>
As usual, make sure that you change the code in italics to match your needs.

The result of these three steps is as follows:

Javascript: Password Tips

If you want a page to be password protected, look at these html tips and tricks.

The first step is to find a web page that is password protected.
Mine is: http://htmlpassprotect.blogspot.com/

The second step is to find a web page that will be gone to if the visitor types in the wrong password.
I chose: http://htmltips.blogspot.com/
It may be better, however, to make a page that will say, for example, "YOUR PASSWORD IS INCORRECT. CLICK HERE TO TRY AGAIN. CLICK HERE TO GO BACK."

The third step is to insert the following code in between <head> and </head> on your password protected page:
<SCRIPT language="JavaScript">

</SCRIPT>

The four messages in italics show:
-The password
-The prompt that asks the visitor to type in the password
-The message that is displayed if a user types in the password correctly
-The address that the visitor goes to if they typed in the wrong password (This should probably be the site that you made in the second step)
Those four messages may be changed if you desire.

To make a link to the password protected page, simply use the <a> tag:
<a href="http://addressofthesitethatispasswordprotected.com>Click here to go to the password protected site</a>
That is what I have done here:
Click here to go to the password protected site
Note: Cool is the password for my password protected site.

Finally, to make multiple passwords possible, you will have to look at the original javascript which is on the password protected page:
<SCRIPT language="JavaScript">

</SCRIPT>

First, you will need to look at first text in italics.
var pass1="cool";
Change this to:
var pass1="cool";
var pass2="cool2";
var pass3="cool3";
...And then new passwords will be declared.
Make sure you change cool, cool2, and cool3 for your own passwords.
Finally, you need to look at the second text in italics:
password==pass1
That will need to be changed to, in this case:
password==pass1||pass2||pass3
That javascript literally says:
"if the password that the user entered is the same as password 1 or password 2 or password 3, then follow the instructions below"
If you were to make these changes to the password page, then the password page would accept cool2 and cool3 as a password also, in addition to cool.

To add more than 3 passwords, just add more of these:
var pass4="password"
...and make sure to change pass4 to another name each time you add it again to the code.
Adn edit the:
password==pass1
To include all your password names. (Seperate the password names by ||) (The password name in var pas10="cool10" is pas10)

Mouseover Hyperlinks Tips

If you want to make your site fancy, these tips are for you!
The tips and tricks in this post allow two different types of mouseover links.

The first is one that will act as if visitors have clicked the link when they have simply put their mouse on top of it.
For example, look at the following link:
Look at this site!
It was made with this code:
<a href=" "onmouseover="parent.location='http://google.com'"> Look
at this site!</a>
Copy and paste the code into your HTML code and the change the text in italics and you are done!

The second mouseover link tip is one that will show a pop-up window when a visitor puts his or her mouse on the link.
Look at this link:
I like web pages
It was made with slightly different code than the previous tip. Look at the HTML:
<a href="" onMouseover="alert('That answer is correct')">I like web pages</a>
Copy and paste that code into your web page's HTML code and remember to change the text in italics.

Related Tips:
Describe Your Links
Describe Your Links Another Way
The Nice Mailto Trick

Linking to Other Parts of the Same Webpage

Blockquote Tips

Blockquote makes a small text box that is indented, as in a quote.

This text is a little to the right because of the blockquote tag. To learn how to make a blockquote like this one, continue reading HTML Tips and Tricks.

To make a blockquote, simply copy and paste the following HTML code:
<blockquote>Text Text Text</blockquote>
Finally, change the "Text Text Text" message to suit your needs.
Result:

Text Text Text

Related Tips:
Align Text and Images
Tips for Formatting Text

NOTE FROM GEOFFREY: The "correct" use of the blockquote is to quote someone. For example:

Geoffrey said this:

"Although you can use this tag simply to indent text, it is better if you use it to quote. That is why it is called the "blockquote" tag."

As you can see, the tag is handy to quote people or websites.

Bullets and Lists

These html tips and tricks will help you put bullets and lists on your blog.

Let's start with simple bullets.

For this html tip, look at this bullet:

This is next to a bullet

It was made with this simple HTML code:
<li>This is next to a bullet</li>
Insert the above code to your web page,
and then change the message to suit you needs.

...And now let's end with more advanced tips, concerning lists.

To make numbered bullets,

Like these

ones

use this HTML code instead:
<ol><li>Like these</li>
<li>ones</li></ol>
Note that the <ol> is only put at the extremes of the list.

There are also some tips and tricks that will allow different types of bullets:

Lower Case Roman Numerals

HTML Code:
<ol type="i"><li>Lower Case Roman Numerals</li></ol>

Upper Case Roman Numerals

HTML Code:
<ol type="I"><li>Upper Case Roman Numerals</li></ol>

Lower Case Alphabet

HTML Code:
<ol type="a"><li>Lower Case Alphabet</li></ol>

Upper Case Alphabet

HTML Code:
<ol type="A"><li>Upper Case Alphabet</li></ol>

Finally, text inside these bullets can be formatted with this tip.