Getting Started

Terms to Know

WWW
World Wide Web
Web
World Wide Web
SGML
Standard Generalized Markup Language--a standard for describing markup languages
DTD
Document Type Definition--this is the formal specification of a markup language, written using SGML


HTML Editors

Some WYSIWYG editors are also available (e.g., Claris Home Page or Adobe PageMill, both for Windows and Macintosh). You may wish to try one of them after you learn some of the basics of HTML tagging. WYSIWYG is an acronym for "what you see is what you get"; it means that you design your HTML document visually, as if you were using a word processor, instead of writing the markup tags in a plain-text file and imagining what the resulting page will look like. It is useful to know enough HTML to code a document before you determine the usefulness of a WYSIWYG editor, in case you want to add HTML features that your editor doesn't support.


I have found several websites that offer HTML editors on shareware.



Getting Your Files on a Server

If you have access to a Web server at school or work, contact your webmaster (the person who maintains the server) to see how you can get your files on the Web. If you do not have access to a server at work or school, check to see if your community operates a FreeNet, a community-based network that provides free access to the Internet. Lacking a FreeNet, you may need to contact a local Internet service provider, a.k.a. ISP (i.e. America Online, MSN, etc.), that will post your files on a server for a fee. (Check your local newspaper for advertisements or with your Chamber of Commerce for the names of companies.)
However, if you're not looking to spend any money, I have linked two sites of FREE servers. Click here to read more about them.

Now what?

I'm glad you have decided to join the web community. It is a very exciting place. To help you in trying to decide how you want your web site to look, I have included this section to help you breeze through all the possibilities for your page.


Space

Space is an important aspect of web design. Having objects too big can be distracting and boring, and having them too small can be a cause for people not to read your site. They don't have to be. Don't clutter your homepage with unnecessary text and images around the main areas. This takes away from the main focus of the page, which is a big no-no.
Don't make the mistake of thinking that if there's a big white gap in your page that you should fill it with something. Just have the bits that are necessary.
Always remember, as a rule, maybe only 75% of your page should be covered with images and text.


Keep It Consistent

Consistency is important to the mood of your site, which we'll get to in a moment. Use the same fonts, colours, image styles, layout styles, navigation style etc. Don't just plonk an animated gif somewhere that you got off another site, since it'll probably clash hideously with yours, for example.


Your background colors should remain the same throughout, and you should pay attention to the little things like keeping the fonts in the text defined in html.
Header images for sections ought to have the same style as each other, which should in turn be related to the main look of the logo (colors, fonts etc).
Be sensible in picking text colors. Use your judgement wisely (unless you've got bad taste, then get someone else to help you. :) . Nothing is more of a distraction that colors that are hard to read or contrast too much.
The trick with the layout of your site are tables. I find them very helpful to keep my text organized.


The Right Mood

Pin down what the basic message you're trying to convey is. This sounds easy, but it can be a real pain! Then choose colors that match that mood of yours. Go to link below to read more about mood.


I have linked a site for you that further explains web design. Thanks to Elated, I am able to give you the above text.



The Basics of HTML


Tags Explained

Tags are variables or commands that tell the browser what to do and how to present the content of your HTML. A tag has three parts: the beginning bracket, <, the variable, (ex. head), and the ending bracket, >. All beginnig tags have a corresponding ending tag, (ex. variable).


Using Tags

There are four tags and their corresponding ending tags are absolutely necessary:

<html> <!-- ARCHIVE by FORTUNECITY.ws --> <head> <title> <body><script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-47423994-1', 'fortunecity.ws'); ga('send', 'pageview'); </script> <center> <br> <div> <script language="javascript" type="text/javascript" src="http://ad.broadcaststation.net/ads/show_ad.php?width=728&height=90"></script> </div> </center>
NOTE:The following tags and their corresponding ending tags must be written in the order given. See below for example.

HTML

This simply shows browsers that you have written in HTML.


Head

This is the tag where you will put your title, and only the title.


Body

This is the area where you will put all you text, links, images, tables, etc.


The Most Basic HTML Document

<html> <!-- ARCHIVE by FORTUNECITY.ws --> <head> <title>Basic HTML</title> </head> <body><script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-47423994-1', 'fortunecity.ws'); ga('send', 'pageview'); </script> <center> <br> <div> <script language="javascript" type="text/javascript" src="http://ad.broadcaststation.net/ads/show_ad.php?width=728&height=90"></script> </div> </center> <p>This is the first paragraph.</p> <p>This is the second.</p> </body> <!-- ARCHIVE by FORTUNECITY.ws --> <center> <div> <br> <script language="javascript" type="text/javascript" src="http://ad.broadcaststation.net/ads/show_ad.php?width=300&height=250&cache=0"></script> <script language="javascript" type="text/javascript" src="http://ad.broadcaststation.net/ads/show_ad.php?width=300&height=250"></script> </div> <br> <br> </center> </html>
To see the formatted version click here.

As you can see, <p> denotes the beginning of a paragraph.


The Main Attraction



Images spruce up your site very easily. It's not very fun to read a hundred lines of black-on-white. There's got to be somehing that draws attention to your site. This is the job of images.
To add an image to your page, type the following:
NOTE: I will place a general name or value between the quotation marks. When you write your HTML, always put a true name or value between the quotation marks.

<img src="imagename.html">

Sometimes, a browser may not be able to pull up your image, so it is advised that you give your images alternate names for those who may not be able to see the image. To do this, type the following:
<img src="imagename.html" alt="altname">

You may want to change the size of the image. To do that, type the following:
<img src="imagename.html" alt="altname" height="#ofpixelshigh" width="#ofpixelswide">

NOTE: Remember that 8 pixels = 1 character (ex. b). This will help in determining how many pixels high or wide your image should be.

To make the image a hyperlink, type the following:
<a href="http://whatever.site.whatever/"><img src="imagename/index.html" alt="altname" height="#ofpixelshigh" width="#ofpixelswide"></a>

Now, when clicked on, the image will bring up the web site assigned to it.
To use an image as your background, see the AdvancedTutorial.


That is the basic webpage. Now, that wasn't hard at all, was it?