HTML Tutorial Table of Contents
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
How to create a horizontal line across your page?
Creating a horizontal line is very simple, the command for it is: <hr>
Table
of Contents
How to change the color of your text?
Changing the color of your text is another way to make your text stand out, the
command is: <font color=""> YOUR TEXT GOES HERE </font>
I used <font color="#000000"> to get the color that this text is in. You can
change the color by just changing the text that is between the quotation marks.
You can click the link below to see the rest of the color codes.
CLICK HERE TO SEE THE COLOR CODES
Table
of Contents
How to change your font size?
There are two ways to change the size of your font. The first way is to use the
following command: <font size="12"> TEXT GOES HERE </font> , you can
change the number between the quotation marks to change the size.
The second way is only used for headers, here is the format for it:
<h3>Text goes here</h3>
This size
<h4>Text goes here</h4>
This size
<h5>Text goes here</h5>
This size
<h6>Text goes here</h6>
This size
Table
of Contents
How to insert a Background image?
Your web page should have the following format, with your text, links, and images
between the <body> tags.
<html>
<head>
<title>Document title goes here</title>
</head>
<body bgcolor="#FFFFFF" text="#000000">
</body>
</html>
To change your background form a color to an image just change: <body bgcolor="#FFFFFF"
text="#000000"> with <body background="www.ghatas.com/imagename.gif" text="#000000">
Table
of Contents
How to create links?
Creating links is very important in HTML, and it is also very simple. For example,
to create a link to my page just enter the following in your HTML code:
<a href="http://www.ghatas.com">Go to WWW.GHATAS.COM</a>
To make a link to a page on your web site and the file is in the same directory
as the page you are putting the link on just insert the following code:
<a href="web_page_name.html"> Text you want to appear as a the link</a>
Table
of Contents
How to make a link that opens a new browser window?
To open a link in a new window just use the following code:
<a href="your page address goes here" target="_blank">Text you want to appear
as the link goes here</a>
Table
of Contents
How to insert text beside your image?
When you inset text after an image it always drops below it, if you want to make
the text appear beside the image use the following code:
<img src="earth_pic.gif" height=40 width=40 align=middle> It's that simple
The code above will show the below items:
It's that simple
Remember that the word align can equal right, left, middle, top, or bottom
Table
of Contents
How to make text appear exactly as you type it?
Some times you want to have your text appear exactly like you type it in. This can
be helpful if you want to create a design with the text. The following code can
be used for this:
<pre>
Your text goes here.
</pre>
Table
of Contents
How to change the size of your image?
All you need to change in the link below are the numbers beside the width and height.
They are currently set are 50 for the width and 50 for the height.
<img src="whatever.gif" width=50 height=50>
Table
of Contents
How to make a table?
Making a table is not that complicated, here is the basic form code.
<table width="75%" border="2" cellpadding="2">
<tr>
<td>Text 1</td>
<td>Text 2</td>
</tr>
<tr>
<td>Text 3</td>
<td>Text 4</td>
</tr>
</table>
The above code will show the below table:
|
Text 1 |
Text 2 |
|
Text 3 |
Text 4 |
Remember that when you are creating a table you are creating it rows not columns.
Table
of Contents
How to make a form?
Okay, forms are very complicated and you can do so much with them. The below code
just covers the basics:
THE CODE START OUT WITH:
<form method="post" action="mailto: your e-mail address here">
NEXT YOU WANT TO ACTUALLY START YOUR FORM:
First Name: <input name="first" type="text" size=12>
Last Name: <input name="last" type="text" size=12>
E-mail Address: <input name="address" type="text" size=30>
Comments:
<textarea name="whatever" rows=5 cols=30>
</textarea>
NOW LETS MAKE A LIST:
<select name="list" size=4>
<option>Option 1
<option>Option 2
<option>Option 3
<option>Option 4
<option>Option 5
</select>
NOW YOU WANT YOUR BUTTONS AT THE BOTTOM OF THE FORM, HERE IS THE CODE FOR IT:
<input type="Submit" value="Send form"> <input type="reset" value="Reset
form">
NOW NOW WE NEED TO CLOSE THE FORM:
</form>
Table
of Contents
How to build a page with frames?
Frames, are nice to have because they can simplify navigation.
When you make a page with frames you actually do not have any thing on that page.
It's just a reference page that calls other pages to it's proper spot in the frame.
Here is an example:
<FRAMESET>
<FRAMESET COLS="50%,50%">
<frameset rows="50%,50%">
<FRAME SRC="http://www.ghatas.com/link_one">
<FRAME SRC="http://www.ghatas.com/link_two">
</frameset>
<frameset rows=50%,50%">
<frame src="http://www.ghatas.com/link_three">
<frame src="http://www.ghatas.com/link_four">
</FRAMESET>
</FRAMESET>
The first half up to the first </frameset> tag defines what goes on the left
side and everything after that defines what's on the right side. The <frame src="">
tags tell what is in each frame. In this example there are 4 frames so there are
four <frame src=""> tags. In the <frame src=""> tags you would fill
in your URL so it shows the contents of your page. Remember that each frame is actually
a different HTML page.
Table
of Contents
How to submit your site to search engines?
You can submit your site to be included in search engine results at:
http://www.search.com
After you get to search.com just go to the submit my site link.
Table
of Contents
How to make background music play on your page?
Background music can also be embedded in your HTML with the following code:
Have you ever gone to a page and suddenly a song just started playing? Here is the
script for how to do that:
<DD><EMBED SRC="remon.mid" WIDTH=0 HEIGHT=0 AUTOSTART=TRUE>
<HR width="100%"></DD>
Make sure to change remon.mid with the path to your music file.
Table
of Contents
Click here for other commands not covered above!
Here are some commands that I did not cover above:
<p> - This tag defines a paragraph structure in your HTML document
<br> - This tag forces a visible line break
<b> Text goes here </b> - Makes text bold.
<i> Text goes here </i> - Makes text italic.
<u> Text goes here </u> - Makes text underlined.
Table
of Contents