© 1996 by Matt Giwer, 1/21
Jumpstarting HTML

      Not HTML, you. It stands for HyperText Markup Language. Its purpose is to control how things look on other people's computers without having to know anything about their computers. You need to learn it yesterday because
  • Your boss needs someone to create his home page and he heard you have a computer
  • You overheard the woman you want to impress say, real men have websites
  • You can't afford the cost of the course from Famous HTML Writer's School
  • You are in need of a life and think this is as good as any
      The sites I have found relating to learning the language don't really cover how to use it. Rather they tell you what you can do with it after you have gotten the hang of it. The purpose of this is only to get you started so if you need to learn how to create a table there are many other fine sites.
      Another way of looking at this is that it is immersion rather than textbook. You can learn a langauge by taking a formal course in school or you can go to the country and try to survive. I know the word for beer in a dozen languages so I can survive in most any country. (Only the modern generation of computer nerd drinks Jolt.) Those other places try to give you a classroom and textbook kind of knowledge of HTML. I try to immerse you in it.
      But in trying to learn it this way I assume you have the motivation to learn it quickly. I assume you will try everything I talk about here on your own on something you want to do. I also assume you will be following my advice one "stealing" pages and collecting specifications and using search engines to find what I don't talk about. Think of yourself in darkest Mexico and desperately trying to learn the word for beer; the harder you try the quicker you will get un cherveza.
      There is no question learning HTML this way is a sure and certain way to start off with every bad habit in the book. Also after looking at several editors I found them as frustrating as starting out with the language itself. The reason being that unless I knew what HTML could do in the first place I had no idea what those pull down menu options would do.
      As this is not a discussion of quality presentation (I will include my view elsewhere) there are two things you must have to at least make people consider your website a "real" website. Those two things are text and graphics. And the way some people look at sites maybe the text isn't that important.
      This is how to get something online regardless of content. You want content? Contact me. Advice is free. Work has a price schedule.

      First some general rules.

  • The name of the text file MUST have either .HTM or .HTML as the extender. (You will find later this is not really true but that is best left for later.) Graphics files will have either .GIF or .JPG as the extender. Fractal compression is coming soon and the extension will be .FIF.
  • Although you can use any filename you want as the first page on your site you have to give that name as part of your web address so the boss, your future girlfriend, even you can find it. If you give no name, the server will try to send a file named INDEX.HTM or INDEX.HTML. Therefore it is a good idea to name your first page INDEX.HTM. Any place I use the extention .HTM that means either .HTM or .HTML.
  • DOS does not care whether a name is upper or lower case in file names. You will most likely be putting this on a UNIX server. UNIX cares about case in file names. Having the wrong case has the same result as misspelling it or entering the wrong name. If you don't use INDEX (upper or lower case) as the name of your first file you will be frustrating users who type in the name by mixing case as in Myfile.htm.
  • HTML does not care about case. The examples here are upper case solely for clarity.
  • No matter how many spaces you insert into the text, you will only see one on the screen. (Use the hard space trick below if you need them.) This applies to some tags also.

TEXT
      Considering that you are learning then this is your first web page. You need to know the <H>, the <CENTER>, and the <P> tags. That will get you off the ground.
     The <H> tag controls the size of the text and comes in six sizes <H1>, the largest, through <H6>, the smallest. The <Hsize> tag is put before the text you want that size. To change the size of the text you simply put a new <Hsize> at the start of that text.
      Note, there is an entirely different way to do this which you can see if you "steal" this page (see THEFT below). These are Netscape style H tags which most browsers are copying as it answers a common problem with page layout.
      To start a new paragraph you use the <P> tag. This creates a blank line and is the most common manner of separating paragraphs.

The <P> tag will separate your paragraphs like this paragraph and the previous paragraph with a blank line rather than no spacing but with an indentation as I prefer but there is no tag to give an indented paragraph start.
      <CENTER> is what is used to do exactly what it says. It centers the text on the page. It is different from the other two in that it MUST come in pairs. The pair is <CENTER> and </CENTER>. The first turns on centering and the second turns off centering.
      When you get into other pairs the leading / is always the turn off version. In fact the specification technically calls for </P> also. It is not good to ignore things in a specification but on the other hand there are some things everyone ignores.
      Do you need centering? No! Do people expect it? Yes! Why? Everyone does it. To give it its due it does make a good visual break in the content.
      The one thing to remember is if you want two lines to be centered independently put a <P> or <BR> tag between them.
      One more tag that is not necessary but very, very useful for controlling the appearance. That is the break <BR> tag. This forces a new start on the next line without adding a blank line.
      If you "stole" this page you saw a very strange string &#160;&#160;&#160;&#160;&#160;. This is a string of six hard spaces that do the work of a horizontal tab. I do it this way as the horizontal tab is not commonly implemented.

GRAPHICS
      There are a lot of control variables and structures for controlling how a picture will look on your page; more than I have any intention of addressing. The good news is that just getting a picture on the page does not take much. In fact, here it is.

<img src="filename.typ">

      The equal sign and the quotation marks are essential. Do not forget them.
      There are two types supported. They are the .GIF and the .JPG. You have to be careful of the size as it has to be downloaded. A starting rule of thumb is no more than 50k of graphics on a page.
      When putting it on a page you simply insert this line right where you want it in the text. However, put a <P> or <BR> before and after it until you learn some of the other ways to control the relation of pictures to the text. Also the <center> pair works here.
      Unless you just happen to have a graphics collection tailored to the needs of a web page you are not going to be have much in the way of graphics. If you can use something like Photoshop already you are in fat city. Just remember 72 pixels per inch and no more than 470 pixels wide for your final product. However, Photoshop is expensive and takes longer to master than HTML.
      For the majority out there the first level of shareware that will get you started and do what you need is Graphics Workshop which comes in windows and non-windows versions. This will allow you to change image types such as from .TIF to one of the two you can use and to change the size to something reasonable. It has many other functions that you may find useful but those are the only two you will have to learn.

THEFT
      Now I am certain you are still scratching your head. The next step is to steal. Find pages that are doing these things and click on "File|Save as" and study it later. If you want to look at it immediately do "View|Source." If your browser does not have these features, get Netscape. You do not have to like Netscape but it does have these features.
      Next you use one of the search pages and find the HTML specifications. If you don't know how to read a specification don't try to learn here. Use the specification to understand those things on the stolen pages so you can do them yourself.

PRACTICE
      You have a browser and you have a text editor. (No, not WordPerfect or MicroSoft Word, a plain vanilla text editor. That means if you enter from the DOS prompt TYPE filename.HTM you will see only plain english letters, no symbols, nothing else. NOTEPAD will do this in Windows but not Write.) Create a file using any of these techniques and look at them with your browser by File|Open File. Again, if your browser does not permit this without going online, get Netscape. (This also presumes you are being charged for going on line. If you are, find a provider that does not count hours or time of day.)
      And then change things and see what happens. Or change some of those stolen pages and see what happens. See what these tags do by changing them or removing them. And always remember, if you find an effect you like and can't understand it, try simply putting your text or picture in place of what is on those pages and see if it works for you -- then use it.

      Next, The hyper in hypertext.