Instructables
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

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.
TheGreatS3 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
FethrdWlf4 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 :-)
zachninme7 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 coolguy6 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)  zachninme7 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)  zachninme7 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)  zachninme7 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).
octavian2345 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. '
(removed by author or community request)
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.
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 Noodle936 years ago
You could try 110mb also. I like the way their interface works.
cris11336 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 HACK7 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 HACK7 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
lemonie7 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)  lemonie7 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) 7 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.
kae7 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 Bear7 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.
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 :)
plus the fact I hate underscores in all my coding as it it "just another key to press" camel case and lowercase are good:-)
kae Jezza Bear7 years ago
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".
kae Jezza Bear7 years ago
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.
I've never heard about unix not recognizing underscores. Unix traditionally does not like spaces.
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.
Trans_Am7 years ago
I've found this site to be helpful http://www.htmlgoodies.com/