3 Simple Ways to
Share What You Make

With Instructables you can share what you make with the world — and tap into an ever-growing community of creative experts.

PhotosPhotos

Share one or more photos of a project, recipe, or whatever you've made, quickly and easily.

Step by StepStep-By-Step

Share your step-by-step photos with text instructions of what you made so others can do it too!

VideoVideo

Share your how-to video. You'll need your embed code from a video site such as YouTube.

Make your own websites - HTML basics (Part 1)

Make your own websites - HTML basics (Part 1)
This will be a multi-part guide on how to build your own websites. I will cover everything from basic HTML code, to the more advanced PHP code, to using GUI editors to make your process faster. This first part will cover using basic HTML to make simple pages.

I will assume you know basic computer terms, such as browser and server, but not necessarily specific code or things like HTML editor (or even HTML). If you don't know what they mean, look them up on the internet (I will defiantly assume you know what that means, as you are using it).

Also, I will not be posting pictures in this guide, as they are quite irrelevant. Instead, I will be providing links to web pages used as examples.

To view the code that the example web page used, right click anywhere in it and click either "View Source" or "Page Source" (depending on the browser).

Let's begin shall we?
 
Remove these adsRemove these ads by Signing Up
 

Step 1The Editor

The Editor
In order to build a website, we need some sort of editor to use. This is where we will type and edit the code. Some editors allow you to view the web page as you type the code, and some are just plain text editors. Some will highlight syntax (another name for code).

If you can afford it, the best HTML editor you can buy (in my opinion) is Adobe Dreamweaver (formally Macromedia Dreamweaver). Other good editors include FrontPage (included in some versions of Microsoft Office) and CoffeeCup.

There are many free HTML editors out there though. I personally use KompoZer , it is free and similar to Dreamweaver. Another free one is Notepad (comes with every version of Windows), just remember to save the file with a .html ending instead of the default .txt.
« Previous StepDownload PDFView All StepsNext Step »
34 comments
Apr 30, 2012. 12:20 AMnerotox101 says:
Hi I have a to make something to my school as a project

The question is "for your next PAT (practical assessment task) you will have to find out if you can create a web page in css, but not any web page you can chose from 3.

Number 1 find out if you can make a member page that show the members and allows you to log in as one or to become one.

Number 2 find out if you can create a page where you can upload files but it must only be available to members same for the downloads.

Number 3 find out if you can use css to create a web page or a section of the web page were a random anonymous person can donate money.

Remember this is all in css
Have fun."

That is the question we have
Dec 23, 2008. 1:53 AMknex maddo says:
how do you veiw it?
Aug 14, 2011. 12:22 PM35Timmy says:
simple with windows just press F12 on windows 7 or higher
Feb 25, 2009. 1:21 PMfwjs28 says:
you have to get a host....
Mar 9, 2009. 2:43 PMfwjs28 says:
orpreview it in firefox/opera/IE...etc
Apr 20, 2010. 8:43 AMfreakyqwerty says:
how do i preveiw it
Feb 25, 2009. 1:22 PMfwjs28 says:
i want to make a web site so that i can host my FTP...i dont want anything fancy, i just want like a list.....would html do the trick?
Jan 14, 2009. 6:49 PMwolf555hound says:
When i use the backround code down there, on my website, it doesn't do anything, but form my computer, it works. Is there a way to use a URl for the backround?
Aug 15, 2008. 8:55 PMREA says:
i forgot the code for image backgrounds. and whats the code for music embedding?
Nov 20, 2008. 12:15 AMnativman says:
i will show what is the code for image background in html<br/>code:<br/><br/><body background="your image.jpg" width="100" height="100"><br/><br/>but it is more better to use css(cascading style sheet)..<br/>code:<br/><style type="text/css"><br/>body<br/>{<br/>background-attachment:fixed;<br/>background-image: url('your image.jpg');<br/>background-repeat: repeat;<br/>}<br/></style><br/>note: embed this code before typing the body( <body) tags.<br/><br/>
Nov 29, 2008. 10:06 PMREA says:
what would it be if you want to use a hexadecimal colour?
Dec 2, 2008. 5:07 AMnativman says:
are you asking how to place a hexadecimal color for background like if you want to put a white background it is simply #ffffff
sample:
<body bgcolor="#ffffff">
note: the # sign is important and in putting hexadecimal colors are limited to 6 letters. 6, 3, 9 , f , 0 - hexadecimal signs

do not use this:
<body background="#ffffff">
Dec 2, 2008. 12:49 PMREA says:
thats what i wanted. i forgot how to do that. i need to brush up for computer apps 2.
Dec 2, 2008. 6:49 PMnativman says:
rea, just a suggestion- it is more compatible to use css (cascading style sheet) for background and design.
Dec 3, 2008. 12:25 PMREA says:
how about PHP (probably a dumb question)?
Dec 3, 2008. 4:12 PMnativman says:
PHP is a good scripting language. if you want to learn PHP, you should also learn MySQL-for database.
Dec 5, 2008. 11:43 PMREA says:
i heard that learning MySQL would be good. ill give it a shot!
Dec 7, 2008. 3:09 AMnativman says:
today i use MySQL as my database in PHP and VB.net Programming.
Nov 15, 2008. 2:31 PMthatonekid says:
what does the !DOCTYPE! exclamation for/ how do you write it ( know what to write)?
Sep 16, 2008. 10:03 PMQwertyuioLP says:
backgrounds
Apr 2, 2008. 10:41 PMkillerjackalope says:
Cool I did an instructable on making your own site aswell, except mine was aimed at the no coding approach, with dreamweaver, which I personally love... Nice instructable, more in depth than mine, which was designed as a very basic 'first timer' idea that worked well using tables etc.
Aug 12, 2008. 6:05 AMcollard41 says:
the thing about dreamweaver is that you have to pay so much to get it. the full package (flash, dreamweaver, fireworks and the others) is about £700!!! no way am i paying that much for it
Aug 12, 2008. 6:19 AMkillerjackalope says:
Dreamweaver can be had for free and legally in a huge number of ways, school can license to students willy nilly if they want, some businesses that use it give you a code and everything if you do work experience with them, friends that own it for work purposes can add your name without breaking license...
Aug 29, 2008. 8:53 AMcollard41 says:
yes but when he buys the license he buys a certain number,and when you activate it over the internet it checks whether thelicense has expired. so you can only use it a certain number of times
Aug 30, 2008. 6:48 AMkillerjackalope says:
Aye but he ended up with hundreds of goes so...
Aug 18, 2008. 8:33 PMz0mbi3 man says:
Please make the next one I need to know cause I already mastered this stuff.
Apr 3, 2008. 9:23 AMdchall8 says:
The very basics of HTML are pretty easy. Knowing the best way to put things together is the hard part. For example you'll find yourself asking "should I do this in CSS or in HTML?" or "should I make a frame or a table?" One answer or the other is usually better in the long run and one is usually easier to code. To answer these and other questions for you and your website you really need to do a lot of reading and asking questions. I have not built a website from scratch in a several years (time flies). I need to look at XHTML. Good Instructable. I can't wait to see the rest. You might try skipping a line between your statements. With all the HTML punctuation, it is hard to follow.
Apr 3, 2008. 11:10 AMTonamel says:
The answer to those questions being "If you can do it in CSS, you should," "Never use frames. Ever. (They're bad for many, many reasons)" and "Only use tables to display table-based data. Don't use it for layout." Really, the only differences between HTML and XHTML are that you have to close your tags, tags all have to be lowercase, and all text has to be inside a tag (

or

or whatever).

Apr 3, 2008. 6:48 AMcheesemaker101 says:
hi good instructable how can i put one of the little icons next to the web address
Apr 3, 2008. 12:55 AMTonamel says:
And a thousand web professionals cringe that you're teaching people the tag. ;) But what can I say? I'm a stickler for standards. XHTML, and all that. So for me,
is the only option, because
isn't valid in XHTML. But really, it's not a bad instructible. I kind of wish you'd spent some time explaining the difference between the head and the body, though.
Apr 3, 2008. 12:56 AMTonamel says:
Oh, I forgot: Are you going to cover CSS in the future, or are you going to stick with HTML?

Pro

Get More Out of Instructables

Already have an Account?

close

All Steps Viewing
View all steps of an Instructable on the same page when you're a Pro Member.

Upgrade to Pro today!
75
Followers
13
Author:bmlbytes
A current student at the University of Advancing Technology. Currently studying Robotics and Embedded Systems.