How to make a website in HTML?

How to make a site in HTML? How Is a Homepage Made and What Is HTML?

A homepage is a file made by HTML, hypertext mark up language. It is a type of code. The code looks like text, but it is put between < > brackets. For example “body text=”#000066” is the code for dark blue lettering such as you see on this page. To create a homepage you do NOT need to learn HTML coding any more. You can obtain an HTML editor… some of them are free… which will create the HTML code for you. Knowing a little HTML is handy so you can change the code but there is absolutely no reason to buy a big thick book.

The content of a page is made up of text and graphics. Each graphic you see on a page, including the background, is a separate file. The HTML code tells the browser how to arrange the text and graphics on the page you see on your monitor.

Building HTML Website Tutorial

HTML Editors and Other Homepage Essentials

Start your homepage by getting the basic software, which is available for download on the net. You can download a very acceptable HTML editor for free (for instance: or Pricey and sophisticated editors like Hotdog Pro and Microsoft’s Frontpage not only help you with HTML coding but also with management of a large web site with many pages and lots of graphics.

For real simplicity and getting started ultra fast, I still haven’t seen an editor better than Netscape’s Navigator Gold or Communicator. The homepage is created by looking at a “page” in the editor function then pointing to various icons to change the color or size of the text and adding graphics. Not only do you not see HTML code, there is no way to edit the code that Nav Gold creates within the program, which is its only drawback since no editor gets a page EXACTLY like you want it to be. Both are now free from Netscape. While there are templates provided by the Netscape folks, you can open any page you’ve liked and downloaded from the web and tinker with it to your heart’s content in this excellent editor. Once you have an editor that creates the HTML code for you, figuring out the code becomes pretty simple. P stands for paragraph, font changes the characteristics of your type, etc.

After you have made your page (a file) with the HTML editor, you need a way to get it to the host server. To do that you need an FTP program. FTP stands for file transfer protocol. Most FTP programs are free and the free ones do a fine job so don’t get sucked into paying for one. Assuming you get your graphics off the web, you have the essential software to create and upload a homepage. Uploading your precious page to your provider will be explained in the FTP software and usually in a “how to” page at the provider. You will need to learn how the software works and also what information to put into the software. The information is the specific name of your provider, your account name, your password, etc.

An optional but very handy piece of software is a graphics editor. A graphics editor allows you to change the characteristics of a graphics file (a file with the extension gif, jpg, bmp etc). Except for the icons, lines and backgrounds you can find on the web, graphics never seem to be Quite the right size or color or whatever for a page. A graphics editor allows you to shrink, crop and re-color what you find on the web to suit your needs. Hands down, my recommendation for a good simple graphics editor is GIMP which is free of course. It does all the basics VERY well. Unless you are a graphics artist, you are unlikely to need a fancier program. In fact, almost everyone I’ve met who is seriously into graphics has Gimp as well as the “high end” programs like Photoshop.

Hint One – Plagiarize … I mean Borrow

The best hint I got when learning was to start by downloading a page and experiment with changing the HTML code. To do this, go to a web page you like with your browser. While looking at the page, click on “file” (in the upper left hand corner of the browser) and then select “save as” which will open a window so you can direct the file to any location on your drives. Click “save” when you have selected the place you want to put the file. The file you just saved has only the html code. To get everything you see on the page you must grab the graphics as well, including the background. To change the code, open the file in your HTML editor or your most vanilla flavor text editor (Notepad for the Windows people). If you are using a text editor, the HTML code is the stuff between the < > brackets. You will need to have some knowledge of HTML to use this method. An editor may allow you to identify (usually by color) and change the code directly or the editor might present only a finished looking view of the page which you can change by deleting areas or highlighting to get menus for changes. You will have to invest some time in learning the peculiarities of your editor, but that is far faster than learning HTML code.

Hint Two – View Code with Your Browser (Firefox, Chrome and Internet Explorer)

Sometimes you will want just a look at the code on a page you see without downloading the whole page. You can see the code using the View option on your browser. Both Chrome and Internet Explorer have this handy little toy right at the top of the toolbar. Until you learn a little bit about making a page this will seem like gobblediegook, but once you start on your own page, this is the best way to get an example of doing what you want to do. For a complete discussion of View check the explanations provided by the folks at Firefox or Microsoft (Internet Explorer).

Hint Three – About Graphics

After struggling three days trying to make a custom banner, it occurred to me that graphics are hard! A simple task like touching up an image takes a long time and often the result is only so so. But…..a task such as cropping an image and pasting it up with other material is not too hard if you have a graphics editor like GIMP. The trick, then, is to have lots of material to choose from to get the look you want. So….I suggest you:

Grab images as you surf – do this by pointing at the image then clicking the right mouse button to bring up a little menu…select “save image as” and download to a disk or your hard drive
If you like an image….download it….you can mull about keeping it later….easier to delete it than find it again. If you’ve downloaded an HTML page, put the graphics in the same folder.
Get organized early….separate images into categories….or be prepared to spend a lot of time sorting later
You CAN download backgrounds from any page you see. Just click somewhere in the upper left corner (but NOT at a picture or other graphic) and then right click. You should see a drop down menu with “save background as” listed as a choice. Select that and proceed as with any other download.

Uploading HTML to Hosting Server

If you are having a hard time mounting your pages on the Web that is because it there is a lot to learn. Don’t worry too much about your first page and how it looks. Put something together and upload it to your host server. If you can do that successfully, you will have learned something about HTML code, your editor, how to transfer files to and from the web and what changes there are between seeing your page on your computer versus on the web. That is a lot to have learned so there is no need to feel one bit apologetic about your page. If you are having a mysterious problem, the most likely source is the way the server is reading your HTML code. Remember that many servers are context sensitive……they distinguish between caps and lower case. Therefore, Picture.gif is different than picture.gif. Many editors have the irritating habit of changing things to caps in the html code (or converting it to lowercase) while your filename is in all lowercase. It’s often hard to spot.

Another common problem is matching your HTML code to the proper location for graphics. The simple approach is to put your graphics in the same folder as your HTML page. However, pages you’ve downloaded from the web for practice may have the graphics in a separate folder and the HTML code “points” to that folder. The code for an image that is with a web page is “IMAGE SRC = “photo.jpg”.” If that same code looks something like “../folder1/IMAGE SRC = “photo.jpg”” then the image was originally in a different folder and you need to edit out the “../folder1/” using your text editor (assuming you want to keep your pages and images in the same folder which is the default Netscape’s editor uses).

Which brings to mind the need to make sure you see your pages as others will see them. Using a different computer to look at your pages is the ideal. If you don’t have a friend who will check out the page or a access to another computer, make sure you return to home in your browser and clear all the caches. Then surf to your page to see how it looks. Making your page look better will be far easier than getting the first page to look just like it did on your computer at home. Also, you will have a better appreciation of the pages you see when surfing the web.

This is a great article on HTML website building that I’d like to share. I used to learn from it while building my first html sites in the middle of the 2000s. It might be a bit outdated but I did some refreshments. I have no idea who’s the author of this tutorial.