Getting Started With HTML

Beginning Design

Links Within This Page:
What you need
Info You Need for your web server
Editors (OK Lets Get Started)
Getting the name of your first file right
Codes and creating your first simple page
Microsoft frontage Express
Fine art of tuning your page
FTP (File Transfer Protocol)
The Do's and Don'ts of Web Design
A comprehensive guide to promoting your site
How to use Meta Tags

Well now that you have read a little bit of the history and you are here is a good sign so get ready for the world of HTML because once you get started it is hard to stop. The Elation/Sometimes Frustration you will experience is mesmerizing making all else seem trivial at the moment per-say. You may do everything short of throwing your monitor out the picture window and if you do I guarantee you will be down at the local computer shop buying a new one before the thought of replacing your window even occurs to you. Or hopefully if you follow the instructions I am about to give you it will go as smooth as silk but don't hold your breath on that one. Anyone who has ever sat down to a PC knows that frustration is part of the learning process so hang tight and go with the flow. I will try my very best to explain it in an easy to understand way. Why am I doing this? Because when I first started on the road of computers, programming,and HTML the resources were severely limited.and the majority of it was written in a language much akin to a first grader trying to make sense out of ancient Egyptian hieroglyphics.(not that my intellectual capacity is limited in any way) So a message to all engineers, aspiring or already there "The best job is an easy job and an easy job is an understandable one" (Hope I'm not going to regret that one wink). I am not knocking formal education by any means.Technology moves so fast its virtually impossible for educators to implement the latest into their curriculum. So in order to keep up with the leading edge technology you have to seek it out yourself. Universities and Tech Colleges tend to be a little behind sorry to say (speaking from experience).However you will learn the basics from structured courses to get you started but the real test begins when you try implementing what you have learned. So if your thinking of doing a degree in computer science......go for it but expect to keep up on the latest technology on your own. Unless your lucky enough to be at MIT or somewhere comparable.

What You Need

A Server who provides web space
An HTML editor, I.E. 4, I.E. 5 ( Internet Explorer) Why I.E.? Because it includes a wonderful HTML editor which is very easy to use called FrontPage Express. So in other words if you have Microsoft Internet Explorer on your PC odds are your in business unless for some reason when you installed I.E. you opted not to install that part of the program. But if you purchased your PC with I.E. on it you may have it. "Attention UpDate; since this writing Microsoft has ceased to include this in their latest version of IE But you can however download it Download FrontPage Express HERE or if that site is unavailabel Try Here". FrontPage Express is known as a "WYSIWYG HTML editor" and it stands for "What you see is what you get" It also allows you to view the html code that you write or should I say it writes for you so you may get a basic understanding of what's going on. Now don't look at that as being bad because the easier the better and after working with it enough you well inevitably learn some of the code and what it does, but you don't necessarily have too.Because with a WYSIWYG editor you can design a web page or site without having a clue as to what any of the code means and that people is the beauty of it. Now enough of a plug for Microsoft and on with the show. In case your wondering I use several different editors I usually throw the initial code "page" together just because it is so fast and easy, then I use notepad if needed for quick edits. Anyone who has ever attempted to write their own code for say a frames page or tables Yikes!!!! it can be done but ahhh I've got better things to do with my time cout << "if a programmer writes a program in C++ they don't start by using machine basic-->"; cin >> and then work there way up; get my meaning........ little joke!! More on editors later.

A File Transfer Protocol Program to upload your pages to your server. CuteFTP is a good one and very easy to use it has a great help file and about a 20 minute learning curve, read the help file),
Click here to download a shareware version of CuteFTP Lets not forget about ZDNet they have many free and shareware programs to choose from just do a search on whatever it is you need. ZDNet Software Library
If you don't have a server who gives you web space you can get free space from Geocities or Angelfire and there are many more to choose from see the Helpful links.

Server: Your server or ISP (internet service provider) should provide you with anywhere from 2-20 MB (megabytes) of web space.You will need to contact them if it did not come with your info packet (Call or E-Mail) to get the necessary information that you will need to get your home page up and running.

Info You Need:
Server: Name
Username:(That's You)
Password: (The password you use to sign on)
Folder you put files in: (on your server)
Name of the first file: (the first home/WebPage that you make and put on your server must have a specific suffix.either.html or.htm depending on your server. Also You will be required to have a specific prefix for your server to recognize you. For instance on the server that I use my first page must be named index.html however what you need to use "you need to use!!!" servers are very fussy when it comes to this.

Ok Lets Get Started

Editors: Decide which editor you wish to use. Bottom line is how you would like to learn. You have to start somewhere and I would suggest going with the program that I recommended earlier which does the coding for you Microsoft FrontPage Express Remember when I say coding I am referring to the HTML. This program does it for you.from picking the colors of your page to the size of the fonts you wish to use, line breaks, spacing putting links to other pages or other peoples sites, adding pictures, E-Mail links. If by some chance you only have the browsers in either program you can download either one at FrontPage Express or for Netscape( it includes a "WYSIWYG HTML editor" called Composer DownloadNetscape be sure you get the communicator version not the stand alone browser.

Other Editors: You can also use regular HTML editors which require knowledge of HTML coding. You can go here ZDNet Software Library and choose a variety, a good one is Arachnophilia. Other ones to look at and Download are Homesite, HotDog, CuteHTML which is free free free and you can find it the same place as CuteFTP just click here CuteHTML.Of course Microsoft has a more advanced version of FrontPage Express called FrontPage 98 which has just been updated too FrontPage 2000. It is a very thorough program which will manage small to very large and multiple websites, including the Uploading of your pages (FTP) It has everything but the kitchen sink, counters, Java, forms, animation, bells, whistles and Bill Gates doing his roller Skating Saturday Night Fever John Travolta Impression, you name it its got it. But heed warning in order for some of FrontPage 2000 more advance applications to function properly your server (where you store your site) has to support the FrontPage 2000 extensions. But even if your server does not and most do, due to the either immense popularity or be it the shear power of Microsoft...I believe the latter...most of FrontPage 2000 will function except things like the counter, forms etc...which can all be done with CGI (Common Gateway Interface) using Pearl script ,C++, VB, Etc.. basically what you do is set up a link to a program within your page to run from the CGI bin set up from your server nice definition short and sweet.You can do many many things, from shopping carts for E-Commerce sites to simple clocks and counters but that's a different story for another day lets stick to the basics for now.... One more editor that I would like to give a mention to is Dreamweaver. It is a really nice combination WYSIWYG, Notepad-like text editor and can really do some quite amazing things that will also save you a huge amount of time hand coding It offers both, however and is combined into a powerhouse package that puts it at the top of Web authoring packages. It supports cascading style sheets; offers visual control over table and frame layouts and page templates; and generates cross-platform dynamic HTML. Also included are many site-management features (including site-wide editing), an FTP client, and an image map editor. One feature alone sets Dreamweaver apart from other would-be WYSIWYG editors: It doesn't tamper with your original code, unless you want it to. But you will pay for this little gem upwards of $250.00 its produced by Macromedia whom also has a really smooth Graphic Editor program called Fireworks which is somewhat similar to Paint Shop Pro and in many instances superior and in my estimation much better then PhotoShop "please read advice at top about simplicity and ease of use" so if you ever decide to purchase Dreamweaver for about an extra $100.00 you can get both of them if your willing to spend that kind of money. We Won't even go there with PhotoShop except for one comment "If anyone of any influence with Adobe ever runs across this site please inform them of what any Freshmen Economic or Business major knows Volume=Profit duhhhh!!!!!!" Somehow I believe the top execs must have all slept through that particular one.

Getting the name of your first file right: If you do a web page with say Microsoft FrontPage Express (I believe this is the best one for the beginner) FronPage will name your first file (page) for you and you may or may not have to change it. That is where your Name Of First File comes in to play it is very important that you get and understand this from you server (ISP) because it will save you allot of frustration at the end. One other thing that is nice to know, when you are working with Microsoft's FrontPage Express or Netscape Composer stay with one or the other. The reason being that they use codes that are formatted for their software and are not exactly compatible with one another, if you do a page with Microsoft FrontPage Express and then open it up with the Composer editor you will be in for a big surprise as it will not be put together the same however it does not affect how the pages are viewed in most instances once they are posted on the net.

Code: Here is what a simple HTML code of a home page looks like to give you a general idea of what the insides look like, this is an example of what your browser reads, interprets and puts on your monitor when you are surfing the net. This in its entirety is a fully viewable, functional web page.

<html>

<head>

<title>
My Home
</title>

</head>

<body bgcolor="#00FF00">

My Home
Page

I can type as much as I like in here telling about myself.

Here I can put in a Email that the persons who is visiting
clicks on and it brings up their E-Mail program with my address
automatically put in<a href="mailto:Me@%20mail">mailto:Me@ mail</a>
</body>
</html>

This is just a very simple page that I threw together using notepad if you would like to play with it in your notepad get out a floppy and follow these steps.
1) find and open your notepad goto Start/Programs/Accessories there should be a shortcut at the bottom of the Accessories (if you don.t know where its at click on your start menu goto find or hit F3 (assuming your running win 95/98/2000) click on files and folders then type in notepad and click on search. When you find the little notepad with the arrow indicating shortcut left click on it and drag it on to your desktop. You now have a shortcut to your notepad. If by chance you cannot find the little arrow icon locate the notepad.exe right click on it go down to create a shortcut and left click on it when the little box says create a shortcut to your desktop left click on yes.

2) Now go up to the top of the code on this page and copy the code from top to bottom; Go to the left of the <html> left click and hold your mouse dragging your cursor to the bottom where it says </html> now it should all be highlighted, when you have that do a right click and then go down and left click on copy. Ok now open up your notepad and go to the very top of your notepad do a right click go down to where it says paste and left click and Walla congratulations you have just learned how to copy and paste which you will find is an invalueble tool.

3) Ok now insert your floppy, a zip to store your info, or create a file on your desktop or in My Documents and click on File then Save As..( I will give you the floppy version) go up to the top and click on your 3 1/2 floppy then go down to the bottom window where it says file and type in my.html and click on save. This should save it on your floppy as an html document. You can do this with all the web pages you create or you can create a file on your hardrive to keep them in But it may be wiser at first to clutter up a floppy disk rather then save it to your HD. However if you wish to create a file on your HD here is how to do it: Double click on my computer double click on your C-drive ( if your HD is partitioned what ever which one you want to put it in) now click on file/new/folder in that order it will create a folder called new folder you then type in what ever you wish to name it. My Web, WebPages,Website, My Crap, what ever turns your crank and that will be the folder which you will save all future html documents. Also for future reference with this main folder on your HD you can now create subfolders or files per-say that fit into your folder you just created. Say you have all your html documents in the folder My Web you just created now you want to add some fancy little animated images to your page but you don't want to keep them in My Web. You would double click My Computer/C-Drive/My Web when you have my web open goto the file/folder/new and create a sub-directory or file inside of your folder if that is easier to understand and rename it to whatever you wish.

4) For future reference to open this file now that you have it saved. Follow these steps; open notepad/click on file/click on open/look in 3 1/2 floppy/ click on all files/ click on the My.html or whatever you named it to and open. If you want to view it in your browser to see what exactly the page looks like click on my computer/3 1/2 floppy/ double left click on My.html and your browser will now view it providing that is your default viewer for html docs.

5) Ok!! does it make sense? Editors edit your code and browsers view what you have edited pretty simple eh!

Microsoft FrontPage Express: First up we shall go through the Express program giving you several ways to create WebPages. You can also open up the file you created above by clicking on file/open.
1) Open your program and goto the top left where it says File click on File click on New it will bring up a new page wizard click on personal home page and click on ok, now you begin the process of deciding what will be on your home page. Do you want interests etc...you decide then click next..This is where you name the URL of your first page remember getting the name of the first file right!!(Very Important) Then you can do the page title anything you want your name, my home page what ever trips your trigger, just get the URL right. Now click ok and you can choose the presentation you would like click next and enter what your interests are (noticed I modeled the notepad page after this one) click next and do the contact info click next and choose the order you would like these in, click next and then finish.YaHoo you have just created your first WebPage.

Now comes the fine art of tuning your page to what you really want.
To change the color of your page: Click Format/Background and you can now choose the background color of your page and the color of your text. Also The color of your hyperlinks, visited, and active hyperlinks colors. If you are unsure about the later just choose default and your browser will choose the colors for you. But the best way to learn is by playing around with it you can always change it back. when you are finished click on ok.

To add a hyperlink go down to your Hot List left click and highlight the name either go with the name you have or change it to whatever you wish or you can click where ever you want to put one and then go to Edit/Hyperlink choose http and type in the URL that you wish to link to. You can also use this to add E-Mail addresses etc.

You can also edit text and hyperlinks by left clicking and highlighting and then right click to edit. A box will open up and you then choose what you want to do. Again something you will need to play around with.

When creating more then one page you use the edit/hyperlink to connect them also for creating back and forward from page to page.

One more thing I wish to touch upon is putting little graphics and pictures onto your page. first off you need to have them to put on.Go to my Helpful Links page. Here you will find a plethora of graphic sites to choose from and all free but I will give one of my favs a plug here Barry's Clip Art Server is a great one to begin with. When you find something that you want (a Graphic) you just right click on it and save to your 3 1/2 floppy. you then decide where you want to put it on your web page and click on Insert/Image a box will pop up you then click on browse find the file odds are it will be a *GIF or possibly a *JPEG click on it click on open then ok and your image should show up where ever you clicked to put it. Keep in mind now any thing that you put on your page any images or files separate from your initial html document will need to be uploaded to your server in order for it to show up. Otherwise all you will get is a little box target. One more thing when adding a image VERY IMPORTANT!!! be sure the URL address to your picture is to your server and not your own hard drive if you are not careful it is an easy mistake to make using a WYSIWYG editor. So if you ever have your WebPages uploaded to your server and your images are not coming up odds are that's your problem.

When you get a page that you like and you want to save it. Insert floppy or a zip whichever you prefer Click on File/Save_As a box will pop up click on As_File goto your floppy and click save. This also gives you the opportunity to change the name of your file if you wish.

There are so many different things that you can do to create your own unique page or pages way to numerous to mention but at the risk of sounding like a broken record the best thing that you can do is get your first page created and then play play play with it and learn learn learn .and don't forget to keep a pot a coffee brewing you may need it!

FTP:

So you have your page done and you now want to get it up onto the web. The best program I have found is CuteFTP - Home Page. This is where it becomes left up to you to figure out because all servers are different. Cute has a wonderful easy to follow help file and a step by step which is just the best so if you follow it you should have no trouble at all. Just remember your goal is to upload what you have done from your floppy onto the server where your website will be stored. Any Q you can contact your server for assistance.

The Do's and Don'ts of Web Design:

1: Please Please Please No POP UP WINDOWS. When people visit your site they eventually want to leave your site and nothing is more annoying then windows popping up all over the place when you click to leave. When You want to leave you want to leave.....They are so annoying that software companies have actually written programs to auto delete the pop-ups for you. I don't know the names of them but do know they exist. I don't use them because I have way to much fun x'ing them out as quickly as they pop up while cursing the shmuck who designed it and thinking how I shall never return again......Get My Point!!!!!

2: Tell a little something about yourself it makes the experience seem a little more personal and that's why people visit your site. It doesn't have to be your life story but enough information to get a persons interest up or imagination what have you. Bottom line is People are interested in People, just ask the CEO chief editor of the National Enquirer how much money they have in the bank....

3: See # 1( I curse the person who invented them)

4: Keep your site easily navigable. Notice on the bottom of each of mine I have links to all of my pages, small but effective. The easier a person can find there way around your site the happier they will be and the more likely they will return.

5: Your color scheme is important make your fonts ( the letters of the alphabet you are reading in computer jargon) large enough to easily read and color coordinated. You don't have dark blue fonts with light blue background, sound absurd? Well I've been on some sites and yikes when St Peter was handing out common sense they said "no thanks keep the change".

6: See # 3 Hmmm some might say I am a little obsessed but nooooo (I like VH1 Pop up video if that's any consolation)

7: Bells, whistles, large images and music, word of advice on this one. A little goes a long way. Put it plainly the larger your images the longer your page takes to load. Unless you have a T-1 line(extremely fast connection) or a cable modem your pages usually take a moment to load. So keep your add ons small. Music especially will slow your load time down of your page and most people get a little impatient but the vast majority will stick around ( you've heard of curiosity of the cat? Well its really not the cat they were talking about)

8: Keep your pages well organized and short. Unless your writing a book (how I feel) like me. Just kidding. If your pages do get a little on the long side what you can do is put some on page links at the top(when I do it I will explain more) and it will ease the strain and makes things much easier to find. Which I will need to do on this page. Or I could just delete this part and you would never be the wiser hmmm........

9: Say Hi and Thank you To our Favorite rich person for making this all possible. Hey Thanks Bill and just think what you could have done if you would have went disco roller instead of Windows (inside joke). I'm not saying he is fully responsible but he was a definite driving force.

10: Last but not least and most importantly "have fun". Unless your writing an obituary column "which to me is not my idea of a good time" Keep your content to what your interested in and what you think other people might enjoy and have a good time doing it cause that's what its all about. If you become frustrated Ask someone to help, take a break, have a cold one, or a hot one (take that one any way you like) and get back to it another day. Trust me the WWW (world wide web) isn't going anywhere.

11: Try not to upload your site until completed or at least well on its way and if you do, put a under construction notation or sign on it so people will know.

12: A very renowned web expert listed this one as one of his top 10 no no's. But due again to the wonderful democratic society we live in I can tell him he is full of pahoooey. Frames? I Like Frames!!! I believe it makes a site very easy to navigate. But!!! yes a But and "not the kind you admire on the street!! butt" For the people that do not particularly like frames use a no frames option on your site even if it means designing a different splash page or whatever just be polite and try to please all...."even the critics">>>>>Stepping off the subject for a just one second<<<<< Ya ever wonder where the critics came from? Do ya think they just wake up one morning and said "HEY GUESS WHAT WORLD I'M GONNA BE A CRITIC" or do you go to critic school perhaps that's it! Graduated with honors, Suma cum laude from University of Critic. Ah well guess they must go to the same school the political analysts go to (no one really knows for sure) One thing I can say for sure that day will never come "opinions yes" criticize? well maybe only the critics!!!

A comprehensive guide to promoting your site:

There are 9 major search engines (well what I consider major) I'm sure some would tend to disagree but they are not writing this so ~rasp~. The major search engines are as follows not necessarily in order.

Yahoo, Excite, AltaVista, NorthernLight, HotBot, Go, Lycos, Webcrawler, Google

Sorry Bill G no plug for MS-search. Tell ya what Bill you send me 1% of what you make in one day and I'll change it to 10 and add you on, not necessarily in order of course!!! Wonder how many millions that would be hmmmm... Any How back on track....

You may find all of these search engines at the top of this page. It is a Java based script pasted into this document and will open up a new browser window when implemented The reason I am listing them is because the best way to register your site with these search engines is to go to their site and manually submit it. Each one is a little different and some more particular then others. Yahoo for instance actually has real people "web experts" go and view your page or pages and decide if your content is worthy of indexing. Some hints when submitting your site to. Make sure your site is ready, tags are proper etc. Be sure you get your site under the proper categories. For instance I believe this one is under Computers/Internet/web services and development or something like that but you get my drift....Be specific!!!! Don't be disappointed if Yahoo does not accept you immediately, if they do "My Hat Goes Off To You" if not try try again. But first go back to your pages take a good look and ask yourself what you can do to improve. Put yourself on the other side and picture the other persons reaction to what your page/pages look like. Are they easily navigable? Do you have a back button, links to your other pages? Are any of your links broken? Meaning when you click on them a page comes up saying "invalid URL". There are a number of factors that may be hindering your progress. The trick is figuring them out. I would be happy to take a look at your site if your problems persist just send my a link "I love to see new sites". Be careful of using frames it tends to sometimes confuse the search engine spiders and your pages may not be properly indexed. Notice on this site I have a "no frames" link but I have not ran into any problems as of yet. I have a splash page (the first page you come to when you go to a site is referred to as a "Splash Page". It has all the proper meta tags Title (your title is very important so be sure to get it right mine is "Webmaxter Website Webpage Design" with my email address also. Also the description is important so give it a good plug when writing it, not a long one but to the point 30 words is about the limit, anything longer then that will be automatically shortened by the search engine.

How to use Meta Tags: They are used in html format to help the search engines properly index your pages. They are in between the Title tag and the Closing head tag. Please feel free to take a look at my Meta Tags by right clicking on this page remember not on a image and then click on view source to help give you a better understanding.

html

<head>

<title> The Title of your Page

</head>

Yes it looks a little complicated but it is a little more in depth then what you actually would need in order for a search engine to index you. Actually all is you really need is as follows

You may cut and paste this into your document if you like then just add to it accordingly.

Home