Introduction: How to Make a Website in HTML

If you ever wanted to make a website, but didn't know how, this is a good way to do it!

Step 1: The Basics

To make something in HTML, you need to start with the tag
<HTML>
Then, you should add your header.
<HEAD> 
The title is what your browser displays at the top, next to the exit and minimize buttons.
<TITLE> 
You can write you title there. After you've typed your title, you need to end it with
</TITLE> 
Now, for the main words on your page. This goes under the body tag.
<BODY> 
Once you're done typing your body, you end it with
</BODY> 
Then, you can end the page with
</HTML> 
That's the basics.

Step 2: More Body

That is good for a simple website. However, if you want to change other parts of the body, such as the color, then you should use something like this as the body tag.
<BODY TEXT="#150517" LINK="red" VLINK="blue" BGCOLOR="#CCFB5D" > 
The TEXT part changes the font color. LINK is what color the link is before you click on it, and VLINK is what it is after. BGCOLOR is the background color of the page. You can just write the color, such as "black", or you can use the hexadecimal equivalent to use the exact color that you want. If you want the hexadecimal color code, try this site: http://www.computerhope.com/htmcolor.htm. That gives you a huge variety of choices to jazz up your site.

Step 3: Writing Text

Inside of the body tags, you need to type to get it to come out. You can just type the text in there, and it will come out. However, you may want to add headings. To do so, you need to choose the size of the heading to show out against the text. For the top of a page, you may want to use the tag
<h1></h1> 
That is a very big one. You can keep using headings. They get smaller with every number, so you can tell it how big you want it. They range from size 1, the biggest, down to h6, the smallest.

You can also write in paragraphs. To do so, just use the paragraph tag.
<p></p> 
To skip to the next line, you need to use the break tag.
<br> 
There is no end tag for break, just the <br>. That way, you can skip to the next line. Without a line break, text will go on in one line until out of room, and it skips to the next. Going to a new thought is a good place to use the break tag.
You can also use bold, italics, and underline. To bold some text, just use the bold tag.
<b></b> 
Italics can be used with the italic tag.
<i></i> 
You can also use underline in your text with the underline tag.
<u></u> 
So that this step isn't way too big, here is a link to more text tags. http://www.mountaindragon.com/html/text.htm.

Step 4: Tables-Better Than Frames!

Frames are not the greatest things for websites. They don't look very professional, and you can't search the content. However, you can about the same effect if you use tables! They also are a good way to organize data, and it doesn't have to look like a table, either. You can set it so the table is invisible, and you can only see the data. Enough said about them, here's how to do them!
To create a table, you need to start with the table tag.
<table></table> 
That is basically how you start a table. To add a row, you need the table row tag.
<tr></tr> 
You need to put that in for each row, including the first. To put data in, you need to use the table data tag.
<td></td> 
You just place your data in to that.
<td>cell 1, cell 2</td> 
That is an example of two cells in a row. Just put a comma between each cell of input.
If you want borders in your table, then you need to write the table border tag.
<table border="1"></table> 
That is used instead of your table tag. If you want the table to be invisible, then just use the normal table tag. You can use that instead of frames.
You can also add headers, footers, and body. They are respectively,
<thead></thead><tfoot></tfoot><tbody></tbody> 
Those tags aren't used as often, as many browsers do not support them well. That should eventually change, but for now, try not to use them as much.
You can add cell padding, to increase the amount of space between the data and the border of the cell.
<table border="1" cellpadding="10"></table>
You can use border and padding at the same time, or you can not use one or both. It doesn't matter. You can also increase the distance between the cells.
<table cellspacing="10"></table>
You can adjust that to change the amount of space between cells. It will increase space between cells that are next to each other, and cells that are above or below each other.
Backgrounds can be used in tables.
<table bgcolor="blue></table> 
Captions are useful in a regular table, and can be used.
<caption</caption> 
That goes inside of the table.
Tables can be very useful. If you use the cell spanning or cell padding, you can use the tables instead of frames, making it all searchable and much more professional looking than blocky frames.

Step 5: Lists and Links

Lists are good ways to organize a bunch of thoughts. There are two types of lists. Ordered, and unordered. Ordered lists are numbered, a good way of organizing.
<ol><li>It adds the number next to this for you.</li></ol> 
To add a new thought, use the <li> tag for each one. Make sure to end it!
Unordered lists are bulleted. They are a good way to just group a bunch of thoughts without trying to set them in a particular order (unordered).
<ul><li>It adds the bullet next to it for you.</li></ul>
Lists are great for organization.

Links can take you from one place to another, on your own page, or to someone else's. They are great, when they work.
<a href="www.thesite.com">The text that you click on, this can be the URL or a word or two.</a> 
You can also use an image, so when you click on it, it brings you to the site.
<a href="www.thesite.com"><img border="0" src="image.gif" width="75" height="25">
You can set the border, width, and height on the image. Be warned, you can shrink or cut off the image when you don't put the right height and width. Make sure to use the proper name and file type in the src part.

Step 6: Forms

Forms are a way for people to send information from your website. The form itself is just the area that has the parts of the form that let you enter information. To make a form, you need to use the form tag.
<form></form> 
You need to place input tags in there so they can actually type something.
<form>Question 1: <input type="text" name="answerone"><br>Question 2: <input type="text" name="answertwo"></form> 
Input is the tag for them to fill in. You need to declare the type of input. Checkboxes allow you to have more than one option chosen.
<input type="checkbox" name="name" value="value" /> 
The name is what the data is called. The value is what is next to the checkbox. Radio boxes only allow one at a time to be checked.
<input type="radio" name="name" value="value"> 
Drop-down bars allow the user to select one of several options, while taking up little room.
<select name="name"><option value="value1">Value1</option><option value="value2">Value2</option></select> 
You can add lots of options to your drop-down bars. To make one preselected, use the selected tag.
<option value="value1" selected="selected">Value1</option 
Buttons with text on them can be links or other things.
<input type="button" value="Words"> 
Submit buttons are important, they allow people to actually send in the data.
<input type="submit" value="Submit"> 
Forms are pretty useful, and not too hard when you get used to them.

Step 7: Frames

Frames are useful. With frames, while you're reading the main content, the other parts stay there. Normally, if you have links on the side, you have to scroll up to them if you're reading the main content. With frames, they will stay on the side while you're reading, so that they're always there. You can also keep a header at the top to remind them what site they're at. One of the simplest ways of doing frames is to use several pages.

First, you make your content the same way you always do, with HTML, HEAD, and BODY tags. Save that as main.html. If you have more than one, you need to change the name.

Second, make a link page for the side. This is made the same way as normal as well, and saved as link.html.

Third, create a column page. You will need this in the page. NO BODY IS NEEDED! This holds the main part and the links together.
<frameset cols="25%,*">   <frame src="main.htm">   <frame src="link.htm"></frameset>
The asterik makes it use the remaining space. That way, it can choose how big to make it so that it fits, otherwise people with different resolutions will have problems. You can put more than two frames in, but I am just showing how to do this for now.
NOTE: If the name is changed, or the file that is mentioned is in a different folder, it can't display it.

Fourth, if you want to add a header as well, you'll need another page. NO BODY IS NEEDED! This holds the column page and the header, which you'll need to make, together.
<frameset rows="25%,*">   <frame src="header.htm">   <frame src="column_page.htm"></frameset>

For those people whose browsers won't display frames, you need to make a <noframes> tag. You can put all the content in there.

Step 8: Saving and Other

This is very important; your file won't work otherwise. When saving your file, you need to save it as (the name of your file).html
If you don't save it as .html, then when you view it in a browser, it will show the tags.

When you are writing in HTML, you need to be using a good word processor. Microsoft Notepad works very well, as do most word editors that come with a computer. You can use text editors, such as Microsoft Word, but they tend to have problems with HTML. You can search for HTML editors online, some are very good. The best ones have a built-in checker, that will see if it will work, and notify you of a problem and where.

If you have a problem, and something doesn't work, then you need to look through all of your coding to try and find an error. Believe me, it can take hours with a good page. If you have a problem, some common mistakes are: 1. Not saving as .html. 2. Not having an HTML tag, or not having an end tag for something.

I will keep updating this to include more about HTML, and building a website.

Step 9: XHTML-the New Version!

XHTML is eXtensible Hyper-Text Markup Language. It is supposed to be able to replace HTML, but is easy to learn. It is almost identical to HTML 4.01, which is what I've been writing about. It is stricter, but cleaner. It is HTML as an XML application. XHTML 1.0 became a W3C recommendation January 26, 2000. W3C defines XHTML as the latest version of HTML. XHTML will gradually replace HTML. All of the new browsers can use XHTML.
Enough about it. Right now, we have a lot of bad HTML on the web. No end tags, lowercase tags, etc. In XHTML, you need to include end tags, even for those things like line breaks. In that sort of case, where it is just the first tag, you add a space, then a /.
HTML:<BR><br>Either works in HTML.XHTML:<br /> 
In XHTML, a couple of rules must be followed. In HTML, you can improperly nest tags.
<b><i>What&apos;s wrong with this?</b></i> 
In XHTML, you must properly nest items.
<b><i>This is how it should be.</i></b> 
XHTML tags must be closed, as I stated before. Every tag must have a closing tag, or if it doesn't need one, like the line break, then you add a space and a slash. If you don't add the space, then it can mess up in some browsers.
HTML will work even if the tags are in lowercase. In XHTML, you need to have all of the tags in lowercase.
Attribute names, like HEIGHT and WIDTH, must be in lowercase. You also need to place values in quotes.
You can't just type
<frame noresize>You need to type<frame noresize="noresize" /> 
No minimization!
For things like images and forms, you need to replace the name element in the tag with id. If you want it to work in older browsers for a while, then include name and id.
To make it work in XHTML, you need to have this at the top of your page.
<!DOCTYPE Doctype goes here><html xmlns="http://www.w3.org/1999/xhtml"> 
The doctype is important.
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
It declares the type of page that it is, if I understand correctly. Please tell me if I'm wrong, and I'll correct it.
That was an example of the Strict XHTML. Use this when you want really clean markup. You should use this along with Cascading Style Sheets (CSS).
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
That was an example of the Transitional XHTML. Use this when you want to take advantage of HTML's presentational features and when you want browsers that don't understand CSS to be able to view it.
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 
That was an example of the Frameset XHTML. Use this when you want to split the browser window into several frames.
If you want to check something for to see if it has working XHTML, try this link. http://validator.w3.org/ That lets you check a website, documents, or other options to test for XHTML.
XHTML is also a good thing to try if you know HTML. If you don't at least understand a bit of HTML, then try to learn it. I know that I could write a bit more, but that would mostly be tags and references that are about the same and you could easily find elsewhere. I can't even fit them most likely, so just search for XHTML, or visit www.w3.org. That is the official site for this sort of coding.

Comments

author
TheGreatS (author)2011-04-09

Could you maybe show the way a table looked in a website?

author
patriots8888 (author)2011-02-13

how do you embed videos/games and pictures/logos

author
nutsandbolts_64 (author)2010-03-04

I found a site yesterday that's really good at teaching html *and* css. It's http://www.html.net

author
FethrdWlf (author)2010-01-21

I was wondering... Does HTML work on Instructables through comments?

author
lieuwe (author)2009-09-17

this is a nice intro to html, but people PLEASE use css for your makeup, don't use font tags and the like, and NEVER EVER use tables to build your site, only use tables for, well tables :-)

author
zachninme (author)2007-06-15

"All of the new browsers can use XHTML."

Sorry, no. Actually, you should not use XHTML. Browsers actually have a harder time interpreting it because its so strict. Heck, IE can't even do XHTML. (You may not care, but the majority of your users, who are IE users, will) .

In addition, if you don't change the doctype, the browsers will still think its HTML, even if you have the XML declaration.

author
octavian234 (author)zachninme2009-06-21

LINUX FIREFOX VICTORY!

author
coolguy (author)zachninme2007-07-04

ummm. you may want to check that. The percentage of firefox users are increasing daily because Iexplorer has issues with conforming to current standards of coding.

You should use XHTML because it promotes the use of correct error free code and eliminates the need for extra error correction functioning built into the browsers. Firefox is inherently faster at loading websites because they don't include so much arbitrary error correction functioning as iexplorer. There are a few code standards that are unrealistic in the strict doctype (like no target="_blank" tags allowed") but if you don't like this just use transitional. Read up the few changes to fit the xhtml standard at w3schools.com, most of them are really simple and easy to follow.

author
fwjs28 (author)coolguy2008-06-29

the only reason why IE is so prominent is that people are afraid of downlaoding and internet explorer is already there so wabamm!there you go...also FF turned 3.0....yay!!!!

author
Spacekidkyle (author)zachninme2007-06-17

Actually, yes. Browsers don't have a harder time understanding it, it makes it easier, because it defines everything clearly. I do care if IE can't use it, because I use IE, as well as Firefox and some others. The doctype does work, check the W3 site. It'll tell you.
Netscape, Firefox, Opera, and Safari all support XHTML, or at least, the newest versions do. Internet Explorer can view XHTML, by treating it as HTML. It works in them all. IE doesn't crash or show a 404, so it works. You should probably check it. Most sites you go to on IE, if you view the soucre, a lot of them will have that DOCTYPE declaration. Try to check what you're saying. For the browsers, it had a table listing browsers, operating systems, and version, and if it supports XHTML. Why don't you look? You might find it interesting. http://www.w3.org/2000/07/8378/xhtml/media-types/results
~Spacekidkyle

author
zachninme (author)Spacekidkyle2007-06-17

Can I see one of your XHTML pages?
I want to show you a problem.

author
coolguy (author)zachninme2007-07-04

if you want to see one of mine goto www.jpasims.net All the pages beside the home page should be transitional. The only reason the home page doesn't fit is because of the stat counter link that is used by an external source (they used non-standard code form). Check them on through w3schools.

author
zachninme (author)coolguy2007-07-04

Once again, someone fell into the XHTML trap. The doctype is text/html, which means that browsers are still thinking its HTML, even though you have a Doctype and valid XHTML

author
coolguy (author)zachninme2007-07-04

so... do you have a valid reason for writing sloppy code that doesn't conform to standards thereby slowing the rendering time on your sites? You seem to have something against writing clean xhtml code. XHTML was created with the intention to replace HTML in the future.

BTW the code type of the site I listed above is actually PHP. The remote Apache server treats the .html extension as server-side code. Mime-types don't mean s*** when it comes to webpage files because each different language has unique opening and closing tags and all can be included in one file if the webserver has the corresponding modules installed.

author
zachninme (author)coolguy2007-07-04

Actually, MIME types matter EVERYTHING. Try to use Ming (with PHP) to create a .Swf. If you don't set the MIME type correctly, it won't work. I'd also like to apologize for multiple typos mixing up "doctype" and "MIME type" And I believe that HTML 4.1 Strict is not "sloppy". And I don't mind XHTML, as long as its correctly done.

author
Spacekidkyle (author)zachninme2007-06-18

Okay. I just made a short one in XHTML for you, the site I made is down at the moment, or I'd send you to there. Anyway, here's a link to a file in XHTML for you. http://host-a.net/spacekidkyle/XHTML.txt
~Spacekidkyle

author
zachninme (author)Spacekidkyle2007-06-18

No, I wanted an XHTML page, not just the text :P

author
Spacekidkyle (author)zachninme2007-06-19

Oops. Sorry. Forgot to post a .html, its a .txt. You could easily make it .html, but whatever. Here you go. http://host-a.net/spacekidkyle/XHTML.html
~Spacekidkyle

author
zachninme (author)Spacekidkyle2007-06-19

I know I could have made it .html, but then it wouldn't be fair. You still messed up. If I opened that in Firefox, or any web browser, I'd be treated as HTML. It doesn't care that you declare it XHTML in the doctype, its still HTML because the MIME type is text/html. Of course, theres no easy way to fix this (on Windows, at least), just proving my point why it should not be used. (The MIME type should be application-xhtml/xml , if you're curious) And no, just renaming it .xhtml won't help either. It doesn't work like that.

author
coolguy (author)zachninme2007-07-04

XHTML is interpreted by the browser under different conditions. The header has nothing to do with mime types, it has everything to do with the rendering in the browser. It does care that you declare it XHTML in the doctype. The actual applicaton of its uses by the different browsers depends on the people who are coding them (ex. FireFox strictly follows W3C standards whereas iExplorer is still catching up to current standards and is stubborn about backwards compatibility of some features that were only ever used in iExplorer).

author
octavian234 (author)2009-06-21

This is one of the best instructables ive seen on html and i would like to thank you very much for such an excellent instructable.

author
REA (author)2008-08-15

this will go great withthis instructable

author
REA (author)2008-08-15

so you dont have to type out doctype... you just pute the and everything? this is a good instructable, but if you have enough money to shell out, i would suggest DreamWeaver. its way easier! sadly im not in the shell out group, so ill be doing my page design on Note Pad.

author
Out-to-explore (author)2008-06-01

Thanks buddy! I love this instructable I hope you would post more about html. '

author
Spacekidkyle (author)2008-05-26

I'd love to learn that method, I just got Photoshop CS3 the other day. If you can post that, please do, it sounds pretty interesting.

author
Skyfinity (author)2007-12-07

This creates a LOCAL website, right? No one on earth but you on your computer can be able to access this. Besides, you need a webhoster for it to appear everywhere.

author
Noodle93 (author)Skyfinity2008-02-15

This is local yes. You need a host for it to be over the internet. I recommend Geocities or PHPnet.us.

author
Gjdj3 (author)Noodle932008-04-13

You could try 110mb also. I like the way their interface works.

author
cris1133 (author)2008-01-14

you should include javascript, animated buttons,fourms and lots of things! for extra help go to www.echoecho.com

author
YummyPancakes (author)cris11332008-03-11

JS etc. Isn't as easy as it seems. It took me weeks to learn it, and that was after MASTERING HTML. I can't imagine how long it would take for an absolute beginner. I'm sorry, but your visualization just isn't logical. Also, there was a bit of spam at the end there.

author
Noodle93 (author)cris11332008-02-14

Forums aren't a simple HTML. It requires server scripting. Which can be pretty advanced for someone who is currently learning HTML. Things you should learn after HTML is Javascript and PHP.

author
killingcheese (author)2008-02-23

A good site to host your own free sites is www.ulmb.com or www.unlimitedmb.com , same sites but ulmb is faster to type....and to download your html,php... files to it use smartftp

author
I HACK (author)2007-01-24

haii i just wanted 2 boe how i can save dis as a webpage were all ma friends can acces it from tha internet at their house

author
mutant (author)I HACK2007-04-05

To save it as a webpage save as .htm or .html As for making it viewable by your friends on the internet. Just upload the file to a server. So it will be http://wwwyourserver.com/yourpage.htm That is your webpage. Or you can get your own server at Godaddy like I did. Here's my site. http://www.mutantsrus.com

author
lemonie (author)2007-02-11

I was doing this in 1992, please refer to Jezza Bear's comments. I will add that I like using Notepad & understanding my tags over using html etitors. Anyone remember Netscape Gold 3?

author
Spacekidkyle (author)lemonie2007-02-12

I've never heard of that one before. I just looked it up, and it is a WYSIWYG editor. That means that you make the page the way you want it to look, without bothering about HTML. It does that for you. If you don't have a lot of time, or you're too lazy to make your own website in HTML, then it's fine, but it just isn't as fun as typing out 15 pages with 2 other frames per page in HTML. I just think that it is more fun to do it in HTML, and you learn more doing it that way. I don't mean to sound annoyed, but they just aren't a great thing unless you're lazy.

author
lemonie (author)Spacekidkyle2007-02-18

I used Netscape Gold 3 a bit (the name amuses me) but gave up and used a text editor (i.e. I agree with you). And since that version of Nestscape was on the HP-UNIX cluster, I would have been using the HP_UX text-editor! (happy days)

author
Spacekidkyle (author)2007-01-25

I started with HTML because you need to have a basic understanding of it before you can learn XHTML. You do need to learn HTML, because that makes it a lot easier to understand XHTML. More people have heard of HTML than XHTML, so I made a HTML instructable, and mentioned how to make it XHTML. HTML 4.01 is still widely used, and is still a good language to make a website in. I added the bit about XHTML so that you could learn how to make your website slightly more modern. HTML works in all browsers, but not all browsers support XHTML. And, those tags I used do work, just not in all cases. It is a bit easier to write than , and need to define every aspect of your website. I think that this instructable is fine for now, and I don't need to get rid of all the HTML. Besides, this is my first instructable, and I'm new to this and somewhat new to HTML and XHTML. If you want to make a full XHTML tutorial, go ahead and make one. I don't think that it will fit very well on instructables, so I made it simple. If you wanted to learn more, you Googled up a site that went more in depth. Simple as that.

author
kae (author)2007-01-25

Jezza Bear is definitely right about this being about HTML 4 - most of this code would not be valid in XHTML (basically, HTML5 - and released last century). "" and "" are contextually null - they mean absolutely nothing except "change the look of this". it's better to use "" and "" which look he same in most browsers, yet have actual meaning. you mention XHTML as the "new" version, then say that it was released in 2000. That means that you have really been showing how to write HTML that is over 7 years old, and no longer current. You should really have been starting from the beginning with XHTML. This is similar to teaching Latin to someone who will be visiting Italy, then just before they get on the plane, you say "oh, by the way, Latin was the old language of Italy - now, they speak Italian". Instead, you should completely ignore HTML 4.01 and teach XHTML from the start.

author
Jezza Bear (author)2007-01-20

Wow you have just put in one Instructable that I lecture in at University. What you have done here is fine but I will put my lecturers hat on now and just tell you that what you have done is particularly for HTML 4.01 compliance. If you want to really impress people then do an instructable which is XHTML compliant where ALL the tags are in lower case as per W3C requirements. I also suggest that nobody ever uses frames and frame sets ever again as these are just too much trouble. Search engines cannot see data within Framesets and as such they have limited use. Never ever use underscores in page file names as these are not recognised by some unix boxes and provide an 1 byte over run on your pages, doesn't sound much but on big sites that can run to kilobytes of bandwidth. Careful of your use of depricated attributes as well ie vlink and link in you BODY, very old hat.

author
trebuchet03 (author)Jezza Bear2007-01-20

On the subject of frames......

In addition to the back end of the internet not seeing your site -- framed websites typically don't look as professional. Don't get me wrong, you can do some very slick and awesome work with frames. But lets face it, someone that's just starting off won't have that capability (yet). So it's easier to hide your newness to making a web page (or site) if you avoid frames :)


thanks for the heads up on underscores... I really didn't know that. I'll stick with camel text from now on :)

author
Jezza Bear (author)trebuchet032007-01-21

plus the fact I hate underscores in all my coding as it it "just another key to press" camel case and lowercase are good:-)

author
kae (author)Jezza Bear2007-01-25

I would disagree with that. Underscores are a very good way to define the namespace of a variable/function/table from the rest of the name. for example, in a project I'm working on, kfm_renameFile() means to me that "kfm" is the namespace, and the function is "rename file".

author
kae (author)Jezza Bear2007-01-25

search engines /can/ see the contents of framesets, as long as basic usability guidelines are followed and a is supplied in the frame definition file. there is absolutely no problem with using underscores in filenames. underscores are not allowed in domain names, but there is no such restriction in filenames. 1 byte overrun on pages that can run to kilobytes on large sites??? If you have a site which has 1024 or more pages in it, I don't think 1K of useless info is going to make any appreciable difference.

author
fugazzi (author)Jezza Bear2007-01-22

I've never heard about unix not recognizing underscores. Unix traditionally does not like spaces.

author
Jezza Bear (author)fugazzi2007-01-22

My apologies, I wasn't clear. Unix loves the underscore, it is just another overhead and unnecessary iMHO. The issue arises when some DNS servers cannot resolve the underscore especially in unix windows integration.

author
Trans_Am (author)2007-01-21

I've found this site to be helpful http://www.htmlgoodies.com/

About This Instructable

14,276views

39favorites

License:

More by Spacekidkyle:Toilet Tank DisplacementMini Pumpkin PiesHow to make a website in HTML
Add instructable to: