WARNING to TECHIES: LAYMAN LANGUAGE USED! DONT READ IF YOU FIND PLAIN LANGUAGE OFFENSIVE!
This one’s for people who’ve never done this before. A total web design n00b. Someone who has no clue whether HTML stands for Hindustan Tea Makers Limited or HyperText Markup Language.
One caveat: This isnt for building portals, shopping malls or other complex sites. Its for sites that employ a few pages of information that contains pictures and other stuff. You know, ’MY BABY’S FIRST SITE!’ or’HOW I GOT ARRESTED FOR TAKING A LEAK IN PUBLIC’ kind of site.
Shall we roll? Ok. (due to the 8000 character limit. I’ll be making this as brief and clear as can be)
Quick notes
-
Pages on the internet are coded(or built) using a language called HTML(Hypertext Markup Language).
HTML is a tag based language. In other words you use special tags to define parts of your text. These tags are delimited by the lesser than() signs.
You dont need to learn all the tags to make HTML pages but knowing them helps. Unfortunately, this little text box doesnt provide me the scope to explain HTML tags so I’ll have to skip that part.
Lets define the objectives:
-
Gather the content
Slap it together and make a decent looking page
Make a few more pages
Link them together
Find a place to host them(so that the world can see it) and transfer the pages to the host machine(in other words’upload the damn thing’)
Call friends over, show them your site. and Gloat! (no tutorial for that)
Now to tackle them one by one:
-
Gather the content
Lets make a page on your pet dog OOGAWOOGA(who told you to give your dog a mental name. now suffer). Your content would be some text on the dog, its stats(pedigree, weight, length, age etc.), a picture or two(get some interesting ones of the dog chewing the sofa or something) and maybe a sound file with the dog barking(now thats pretty extreme but it can be cool too). So yes. you got your content. Put them all into a nice little folder.
Slap together a decent page
There are two ways of doing this:
Coding it using a text editor. You need to know HTML to do this.
Using a WYSIWYG editor(WYSIWYG= What You See Is What You Get). These are like your favourite word processor. You dont need to know a single HTML tag.
The second option is what we’ll choose. There are several WYSIWYG web page creators out there. Some names - Microsoft Frontpage, Macromedia DreamWeaver, NetObjects Fusion etc. Now these cost money so I’ll give you the names of some free ones that you can download and use:
1. NVu - stands for New View, is an open source wysiwyg editor with loads of features.( http://www.nvu.com)
2. Mozilla Composer - If you have the Mozilla Browser, you get a web page creating software with it.(https://mozilla.org/products/mozilla1.x/)
Trellian Web Page - another pretty decent editor that has a built in FTP program that helps you upload your pages to the internet.
Amaya - https://w3.org/Amaya/Amaya.html
You could also get a scaled down version of Microsoft Frontpage called Frontpage Express. Its pretty easy to use. Here’s one site where you can get it from: https://123ecommerce.com/frontpage-express.htm
Now that you have one of those free software with you, its easy to slap together a decent page. Just type in your text, use the formatting options and font attributes to enhance your text and improve readability, drop in a picture or two and save it(the editor will save it as an HTML file). FOOL AROUND!(but dont use pink letters on yellow backgrounds. its not cool)
Now open the page you made using NOTEPAD and you will see how cryptic it is. Thats HTML for you. The WYSIWYG editor made it easy(you’re a spoilt person, you know that. shame on you for taking shortcuts while everyone else studied HTML. heh heh).
PS: Make sure you give meaningful names to each page. The main page could be main(or ideally INDEX.HTML or INDEX.HTM). In a website context, the first page that your browser will load is the page with the name INDEX on it.
Web page file names have an extension of .HTML or .HTM(Frontpage saves files as .HTM). If you double click on a file ending in .html or .htm. the page will open in your internet browser. See how it looks!
Make a few more pages
Repeat step 2 till you get a few more pages. For starters you could have:
Main Page(index.html or index.htm)
About My Dog(about.html or about.htm)
Photo Gallery(gallery.html or gallery.htm)
My Dog’s Best friends(yeah. slap a picture of YOU in there)
Link them all up
Now in an earlier review I mentioned that the internet is non linear. You can add something called a HYPERLINK to those pages to connect them and be able to jump from one to another at will.
Somewhere on each page, you should make a MENU or TABLE OF CONTENTS with the items - MAIN, ABOUT MY DOG, GALLERY and MY DOGS BEST FRIENDS. To make each word link to the right page. select the word(e.g INDEX.HTML) and use the EDITOR’S HYPERLINK tool to connect it to the right page. Select the next link(ABOUT MY DOG) and use the hyperlink tool to point it to the file ABOUT.HTML. Do the same with the rest of the links.
Once you understand the concept of hyperlinks you can put them on any page to point at any resource on the internet. E.g. If you want a link to MOUTHSHUT.COM on your web page, simply type some text(like’SHUT YOUR MOUTH and VISIT MOUTHSHUT’) or put a picture, select it, choose the HYPERLINK tool in the editor and enter https://mouthshut.com as the URL to point to(URL= Uniform Resource Locator or in plain words - a web site address)
Test your pages by opening them in your browser. You might encounter some errors. Fix them and test again. At no point should you lose your cool:)
In Microsoft Frontpage Express(or the paid version), you can just select the text you wish to convert to a hyperlink and hit the keyboard shortcut CTRL+ K
Find a place to host them:
If you go to google and do a search of FREE WEB HOSTS, it will throw up hundreds of results. Lets use https://geocities.yahoo.com for starters. Go to that website and register yourself to create a free web site account. Once you sign in, you can use the EASY UPLOAD tool to transfer your files to your web host’s server. Once this is done, your site is ONLINE and can be accessed using the right URL(which would be something like geocities.yahoo.com/xxxxx where xxxxx would be the name you used to register with geocities.
Thats the easy way of doing it. Some sites allow you to directly upload and manage your files using a facility called FTP(File Transfer Protocol). There are a number of free FTP tools but the best FREE one is LEECHFTP(https://stud.fh-heilbronn.de/~jdebis/leechftp/downloads.html). FTP software ask you for some information about your web host. Once you provide them, you can connect to your site and use an EXPLORER style file manager to transfer files from and to your web site.
Its better to progress gradually into the power tools mode. There are several things one can learn and use to enhance a website. Things like Cascading Style Sheets(CSS) are all common standards today. But yes, once you learn to walk, you can start running.
Feel free to email me if you need help. The 8000 character barrier approacheth.
Peace!