Welcome
Thanks for Visiting my site. On this page I will help you get a basic knowledge of how to create your very own website. To do that you will need to learn HTML. HTLM Stands for - Hyper-Text Markup Language. HTML is a programming language used to make a website just like this one. On this page i will help you get started and learn some basic HTML commands. And have you on your way to Creating your very own website.
Lets Get Started
For writing HTML you can use any kind of text writer such as Note pad but I recommend for you to download an HTML editor. Its a software that will help you edit and upload the HTML code to your server. Many of them have features that can help you create buttons, tables in just a click of a mouse(it save a lot of time and its fun and easy to use). Some of them like Dream weaver could be quit expensive($399-$2500). But you can download one for free like Coffee Cup. I think this is the best Free html editor software.I use it myself, It may not have all the fancy gadgets but it is still pretty good.
One thing to keep in mind is that when you start to type HTML code is that you save your home page as "index" in HTML format so your home page file name would be "index.html". That's what you will need to type if your making a link to your page or the full version would be "http://www.website.com/index.html"
Basic layout
<html>
<head>
<title> Your title here </title>
</head>
<body>
Your Content goes here!
</body>
</html>
First you will need a title for you page. This will show up on the top left corner of you browser(not on the page itself) Remember every command is written inside the < and > and a backslash at the end of each command. For example if you are going to name your site "My Website" you would type:
<title> My Website </title>
Making a Heading
In HTML you can make you heading in six sizes. "1" as being the greatest and "6" as the smallest. For example:
<H1> Welcome</H1>
Welcome
<H2> Welcome</H2>
Welcome
<H3> Welcome</H3>
Welcome
<H4> Welcome</H4>
Welcome
<H5> Welcome</H5>
Welcome
<H6> Welcome</H6>
Welcome
Style of Text
You can put text on your page with the "<P> Your text here!<P> Out come is:
Your text here!
You can also have different styles of text such as: Bold, italic, underline, strike through, subscript, superscript, teletype, or
For example:
<b> Bold </b> Bold
<i> italic </i> italic
<u> Underline </u> Underline
<s> Strick through </s> or <Del></Del> Strike through
<sub> Subscript </sub> Subscript
<sup> Superscript </sup> Superscript
<tt> Teletype </tt> Teletype
<blink> Blinking text </blink>
(note that blinking text will not work for Windows Explore Browser but it will for Fire fox)You can also control where your breaks in the sentence would be with the <BR>
For example:
Your <BR> Text <BR> in <BR> Here!
Your
Text
in
Here!
You could also make list with a bullet or number.
Bullet example:
<ul>
<li> Your</li>
<li> Text</li>
<li> Here!</li>
</ul>
Outcome is:
- Your
- Text
- Here!
Number example:
<ol>
<li> Your</li>
<li> Text</li>
<li> Here!</li>
</ol>
Outcome is:
- Your
- Text
- Here!
You can also make comments in the code that you are writing to help yourself remember, like were one specific code starts and ends. This makes it easier to go back and edit it if you need to in the future. You can do that with:
<!-- Your comment in Here -->
Horizontal Lines
You can make horizontal line with the thickness and length that you like.
Here are some examples
<hr>
<hr size="2" width=50%>
<hr size="25" width=75%>
<hr noshade size="5" width=100%>
<hr noshade size="15" width=80%>
Scrolling Text
You can also make scroling text with:
<marquee width="25%"> Your text Here! < /marquee>
Making Links
You can also make links that can navigate you to a another page. To make a link to let say to "Google homepage" the URL is "http://www.google.com" so you would type:
<a href="http://www.google.com"> Your text here!</a>
The outcome is:
Your text here!You can also make a link so someone would be able to send you a email.
For example:
Lets say your email address is Yourname@yahoo.com
Than you would type:
<a href="Yourname@yahoo.com"> email</a>
Putting Graphics on your page
Having graphics on your page can make your page more apealing and there are several ways how you can do that. Once you have the URL (you can find it by right click and go into properties and locate the URL)
You would type it this way:
<img src="URL in Here"/>
For example outcome might be:
(Note: If the picture is saved on the hard drive of your computer, remember to upload it to the server for it to work properly.)
You can also add alternate text for images, it is a good practice to do so just in case the Browser will not display the image, you will have the text instead of the image. You can add Alternate text with the "ALT":
For example:
<img src="URL in Here" ALT="Text in Here"/>
You might want to have a image that is a link. All you do is combine the two commands together.For example:
<a href="Your link URL in Here"><img src="Your graphic URL in here"></a>
Adding color to backround and text
You can also change color of your backround, text, unvisited links, and visited links. Here is a list of codes for selecting your color.(Please note this code should go after your <title> and before <Body> tags, or you can combine them into your commands if you want a sertain link to be a certain color.Here is a list of some Color codes.
<body bgcolor="code"> This is for backround
<body text="code"> color of text
<body link="code"> text with a link (unvisited)
<body vlink="code"> text with a link (visited)
<body alink="code"> active links (when mouse is over it)
Add a picture to your backround:
<body background="URL of the Picture in here">
Making Simple Forms
Here is how you can make a one word answer form:
<INPUT TYPE="input" NAME="firstname"> First Name<p>
<INPUT TYPE="input" NAME="lastname"> Last Name<p>
<INPUT TYPE="input" NAME="from"> Your Email<p>
<INPUT TYPE="input" NAME="subject"> Subject<p>
The result is:
First Name
Last Name
Your Email
Subject
You can make a large box for Comments
<textarea rows=10 cols=30 name="suggestions"></textarea>
The result is:
Making Checkboxes
If you like to ask a question that people can choose multiple answers you can us the check boxes
For example:
Favorite Sports
<input type="checkbox" name="sports" value="soccer"> Soccer<p>
<input type="checkbox" name="sports" value="basketball"> Basketball<p>
<input type="checkbox" name="sports" value="volleyball"> Volleyball<p>
<input type="checkbox" name="sports" value="golf"> Golf<p>
<input type="checkbox" name="sports" value="tennis"> Tennis<p>
The result is:
Favorite Sports
Soccer
Basketball
Volleyball
Golf
Tennis
Radio Buttons
If your asking a question with just one answer:
What is your Favorite color
<input type="radio" name="color" value="red"> Red
<input type="radio" name="color" value="green"> Green
<input type="radio" name="color" value="blue"> Blue
<input type="radio" name="color" value="pink"> Pink
The result is:
What is your Favorite color
RedGreen
Blue
Pink
Pull Down List
Making a pull down list of favorite sports with soccer as selected defalt:
What are some of the sports you played
<select name="Sports">
<option selected> Soccer</option>
<option> Basketball</option>
<option> Volleyball</option>
<option> Golf</option>
<option> Tennis</option>
</select>
Home
Color Chart
Links Exchange
Free Tools