loading
Picture of 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!
 
Remove these adsRemove these ads by Signing Up

Step 1: The Basics

Picture of 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

Picture of 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

Picture of Writing Text
Writing Text Results.JPG
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!

Picture of 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

Picture of 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

Picture of Frames
Main.JPG
Link.JPG
Columns.JPG
Page.JPG
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.
Main.html96 bytes
link.html60 bytes
Page.html136 bytes

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'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.
1-40 of 47Next »
TheGreatS4 years ago
Could you maybe show the way a table looked in a website?
how do you embed videos/games and pictures/logos
I found a site yesterday that's really good at teaching html *and* css. It's http://www.html.net
FethrdWlf5 years ago
I was wondering... Does HTML work on Instructables through comments?
lieuwe5 years ago
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 :-)
zachninme8 years ago
"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.
LINUX FIREFOX VICTORY!
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.
fwjs28 coolguy7 years ago
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!!!!
Spacekidkyle (author)  zachninme8 years ago
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
Can I see one of your XHTML pages?
I want to show you a problem.
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.
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
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.
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.
Spacekidkyle (author)  zachninme8 years ago
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
No, I wanted an XHTML page, not just the text :P
Spacekidkyle (author)  zachninme8 years ago
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
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.
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).
octavian2346 years ago
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.
REA6 years ago
this will go great withthis instructable
REA6 years ago
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.
Thanks buddy! I love this instructable I hope you would post more about html. '
Skyfinity7 years ago
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.
This is local yes. You need a host for it to be over the internet. I recommend Geocities or PHPnet.us.
Gjdj3 Noodle937 years ago
You could try 110mb also. I like the way their interface works.
cris11337 years ago
you should include javascript, animated buttons,fourms and lots of things! for extra help go to www.echoecho.com
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.
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.
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
I HACK8 years ago
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
mutant I HACK8 years ago
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
lemonie8 years ago
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?
Spacekidkyle (author)  lemonie8 years ago
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.
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)
Spacekidkyle (author) 8 years ago
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.
kae8 years ago
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.
Jezza Bear8 years ago
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.
1-40 of 47Next »