Preliminaries

HTML stands for Hypertext Markup Language which is a tag-based language that browsers use to render the information that arrives on your computer.

When working with text being prepared for browsers, there are several things you must take into consideration.
•  
  1. You must remember that all is illusion - a splendid illusion. What you see is often not even close to what was typed. To appreciate this, you can visit any web site and use View/Source. You will see lots of stuff that was not visible to you when you were browsing on the Web. That's what a browser does - it takes all that stuff and creates that nice illusion that you see. 
  2. Staring at it for a while, you will see a lot of material inserted between angle brackets. None of the material between the angle brackets is visible in the browser. These are known as HTML tags. At first, it may seem bewildering, but it really is quite simple, if you take one step at a time. Throughout what follows, please note that all html codes themselves can be typed either in ALLCAPS or lowercase. Remember that the html codes are not themselves the text that people will see; the html codes affect what happens when the people see the text, but the codes will be invisible.
  3. Another consideration is that browsers can only deal with ASCII text. If you use a Word Processor, and insert boldface, italics, and tab codes, all will be lost when you save the file as ASCII file. If you are using a Word Processor, you must remember when you save that you must select File Type Web Page, or HTML This remains true if you use a Mac (yes, the Mac will give you the HTML option - just look around the File/Save dialog box carefully). If you continue to work with HTML, you may prefer to use a text editor that defaults to ASCII HTML text when you save it. Windows Notepad is an example of such an editor. There are text editors available also for the Mac. But there are some special purpose Web Page editors that are equipped with features to facilitate the task.
  4. This work can be done on a Mac, a PC, a Unix system, a Sun Workstation, or any computer. It is not the exclusive domain of any one of them. There is no evidence whatsoever to support that any one of these types of machines is the machine of choice for work on html. Claims to the contrary are totally unsubstantiated. We all choose our poisons. We work with what we have - and any machine will do. One ought to feel comfortable sitting in any room with any machine to do this work.

  As you continue, note that if you want to preview your prepared materials, simply open the file with your browser. However, you must remember to use the Refresh or Reload button to be sure you aren't looking at the page that was in the cache.

   

  ---

  Now for some meat and potatoes

  For starters, the browser sees no difference between

  These
  words
  are
  typed
  

  one

  word

  per

  line

  or with strange

  spacing

  and

  These words are typed one word per line or with strange spacing

  In other words, spaces and carriage returns are not honored in the usual way.

  Q.	So how do I force text to go to the next line?
  A.	By inserting the code <br> or the code <p> .
  Q.	What's the difference between <br> and <p>?
  A.	They are different types of line breaks, with different spacing between lines. <br> is called a line break. It will bring the reader to the next line using the same line spacing as the usual lines within a paragraph. The lines in the Q. and the A. below it are separated by a <br>. <p> is really a paragraph break. It will bring the reader to the next line but add space between the lines so that it looks like a new paragraph. For example, the space between the above Q. and the A. above it is created with a <p>. This tag, however, unlike the line break tag, calls for another tag that ends the paragraph: </p> . Together, they act as bookends, enclosing the paragraph itself. The full paragraph structure, then, is <p> Paragraph content </p>
  Q.	I am used to typing in ALLCAPS. Why not use ALLCAPS for a web site? I think that would be cool!
  A	Wrong. Cool it is not. It is really hard to fight this myth that ALLCAPS is BETTER. When computers were in their infancy, that's all there was; everything was prepared in ALLCAPS. Somehow, though, when we became lower case enabled - way back around 1980 - some decided that they would stick with ALLCAPS and they rationalized that it was better. ALLCAPS is a means of drawing attention - like shouting. Consider the difference between the BETTER in the first line and the better later on. Both give emphasis to the word. Which is more pleasing? If everything is in ALLCAPS, it assaults the eye and becomes quite offensive, assaultative and ineffectual. When everything is emphasized, then nothing is emphasized - you have then lost a means of emphasizing (not good). If you still think "This guy is all wet!" Then I have this challenge for you. Find a single book prepared by a professional which is done in ALLCAPS. Go to the Library of Congress if you have to. After all, this business of preparing text has been around for hundreds of years. If ALLCAPS is better, then there ought to be some professionals who agree with you by typesetting their work in ALLCAPS. Good luck. I have never seen such a book. e e cummings did the reverse - he put everything in lower case! One enterprising student brought this challenge to the research department of the Providence Public Library. The Research Librarian managed to find 3 books done in ALLCAPS. and they were in Latin. If I can put that to rest, then, you will prepare things using mixed case mode, and you will start by taking normal text and inserting <p> wherever a new paragraph begins. Try looking at such text before and after you insert the paragraph codes. The <br> codes can be used to form some simple lists - though later you will find far more effective ways of doing that. Of course, before you can look at it with a browser, you must save it in ASCII Text format. You can use a word processor to prepare it, but you must be very careful when saving the file - make sure that the File Type selected is Web Page, or ASCII text, and the filename ends in .HTM or .HTML.

  Q.	Anything I boldface in my word processor will be lost. So how can I get something to show up in boldface?
  A.	The Break and Paragraph codes are called tags. Boldface, by its nature, requires a different kind of code. Boldface is a feature that must be turned on and turned off. The preferred way to accomplish this at this point is to use <strong> and </strong> and sandwich in between all text to be emphasized. For example, if you type:  This is a word to be <strong>emphasized </strong> the browser will show the result This is a word to be emphasized
  Q.	What other features are controlled this way?
  A.	Here's a list: The entire preparation is contained between <html> and </html>. Strictly speaking, this is optional, since the default file type is html. However, there are other types, like sgml and vrml, for example, so it is clearer to the person reading the source file if you include the reference to the language used to interpret the page - in this case, html. The Header of the HTML file (a part that appears before the body of the text) is contained between <head> and </head>. The title of the page, which appears in the top bar, begins with <title> and ends with </title>. The title appears before the body and is usually found in the header section. The Body, which contains all of the links, images, and text, is contained between <body> and </body>. Headings are larger than the rest of the text. To apply a heading tag, use <h1> or <h2> (you can let the numerals range up to 6. The higher the number, the smaller the heading font. So H1 is the largest heading font and gives maximum attention. Here they are in order: h1 h2 h3 h4 h5 h6 Headings are designed to set off sections of text, so there is an automatic line break when a heading is turned off. Centering is accomplished using <center> and </center>. Italics starts with <i> and ends with </i>. Tables start with <table> and end with </table>. Click on the word "Tables" to get more details on preparing tables. Unordered lists such as this one begin with <ul> and end with </ul>.  Items in the list start with <li> and (optionally) end with </li>. The ending part is now optional since in this case, the next list item automatically means the previous one must be turned off. A sample unordered list would be: HTML Code Result <ul>   <li>This is one list item</li>   <li>this is another list item</li> </ul> This is one list item this is another list item Ordered lists, with automatic numbering of the items in the list, begin with <ol> and end with </ol>. Items in the list are handles the same way as the unordered list. Links are complex, so I deal with them at length separately. Click on the word "links" to jump to that section. Inserting Graphics takes some thought. Click on "Inserting Graphics" for more information on that.

  Therefore the barest of outlines is:

  <html>
  <head>
  	Header material
  </head>
  <body>
  	Tables, Text, Graphics, Links
  </body>
  </html>

  
  

  Links - weaving the Internet into one fabric

  Links are the threads of the Internet. Words, images, or file names are highlighted, and clicking on them causes you to jump to some other place - it may be
  • elsewhere in the same document
  • elsewhere in the same web site, but a different document
  • somewhere else in the world.
   

  If a Filename is highlighted, and it is neither text nor graphics (it may be a program file) then clicking on it will allow the visitor to download the file.

  The basic ingredients are <a href="somewhere">Link Text</a>
  Here are some examples:
  

  • <a href="mary.gif">Mary's Picture</a>
    • When the user clicks on the words Mary's Picture, the browser will load the picture named mary.gif that is located in the same folder as the text HTML file. Note that Unix based systems that house most of the Web sites are case sensitive, so MARY.GIF, MARY.gif and mary.gif would name three different files. To simplify matters, it is customary to stay in the lowercase mode; I have yet to see any site that uses allcaps to name files.
  • <a href="history.htm">My History</a>
    • When the user click on My History, the browser will load a file called history.htm from the same web site in the same directory or folder.
  • <a href="http://www.ric.edu/henry/history.htm">Henry's History</a>
    • This will link to a file named history.htm somewhere in the world whose domain name is ric.edu on the www. Any time you are linking to a file on some other server, your hyperlink MUST begin with "http://"
  • <a href="dancers.gif">See Dancers</a>
    • This will load the graphic when the user clicks on the text See Dancers. The file m ust be located in the same folder as the html text file.
  • <a href="http://www.ric.edu/henry/dancers.gif">Henry Dances</a>
    • This will load dancers.gif from somewhere else on the www.
  • <a href="zipped.zip">Download this file</a>
    • When the visitor clicks on "Download this file" the browser will prompt for a filename and download it to the visitor's computer.
  • <a href="downloads/zipped.zip">Download this file</a>
    • When the visitor clicks on "Download this file" the browser will prompt for a filename and download it to the visitor's computer. The file being downloaded is located in a subfolder named "downloads" and the downloads folder is a subfolder of the folder that contains the html text file.

  
  

  Tables

  Tables are appropriate whenever you want to fine-tune the placement of text on your web page. HTML tags give the options Left, Center, and Right. If your text appears to the right or left of a graphic, you get almost no control of the way that text can appear. To get the effects we want, we often have to turn to tables. This expands that control considerably, though not yet completely.

  A table can appear with or without a border. "Border" is called an attribute. To turn a table on with a border, use <table border> and to turn a table on without a border use <table>. In both cases, you must remember to turn the table off with </table> or else your text will appear to disappear into nowhere.

  When the border attribute is turned on, all cells in the table appear with a border around them. Sometimes this can be used quite effectively.

  Each row of a table begins with <tr> and each cell within a row begins with <td>.

  Therefore, the bare-bones table code looks like this:
  

  <table>

  <----- Start a new table

  <tr>

  <----- In that table, start a new row

  <td>

  <----- In this row, start a new cell

  Content (text or graphics) would go here

  </td>

  <----- End this cell

  </tr>

  <----- End this row

  </table>

  <---- End this table

  Of course, you can have as many rows as you like, and as many cells (or columns) as you like.

  Here is a table with two rows and 4 cells in each row, with a border:

  1995	Providence	RI	Narragansett Bay Chorus
  1996	Portland	ME	Narragansett Bay Chorus

  And here is the same table without a border.

  1995	Providence	RI	Narragansett Bay Chorus
  1996	Portland	ME	Narragansett Bay Chorus

  And here is the same bordered table centered (simply include the entire table between <center> and </center>.

  1995	Providence	RI	Narragansett Bay Chorus
  1996	Portland	ME	Narragansett Bay Chorus

  Note that in any cell, you can put any valid kind of object that can go on a web page. This includes text as well as images. In either case, you type the information inside of the cell or place the source code for the graphic inside of the cell.

  Tables however are scanned three times before the contents of the table are displayed. Tables slow down the page load. Since virtually all well-designed pages make extensive use of tables, it is best to learn how to speed up the display. This is done by adding something to the table tag, as follows:

  <table style="table-layout:fixed">

  A second hint that can help speed up the load of a table is to make sure that your image tags specify the height and width of the image. (See the section on inserting graphics)

  
  

  Inserting Graphic Images

  Images can sometimes be very big files. When they have to be sent from one computer to another, it can take a lot of time. And that is what happens when you open a site that shows graphics - the images are downloaded to your computer.

  So what is really happening when you right-click to download a picture? It is already on your computer; it just copies it from the cache area where the browser put the image to the folder you specify.

  To help this process, two file formats have been developed that the browser can interpret. They are JPEG (JPG) and GIF. Both of these are compressed, so their file size is much smaller than their non-compressed cousins. This means that they can be sent to your computer faster.

  Therefore, when you obtain an image, it has to be saved in one of these formats. Frequently the JPG is a smaller file size for photographs, and GIF is the smaller file for graphics you create yourself with graphics programs.

  There are many sources for graphics. You can buy disks full of graphics or you can download them from the Internet. Many places now offer you a service when you have your films developed there - they can return it to you on a floppy disk along with a program to view them. Yet another way is to have them scanned.

Further, if you prepare a Mathematics document in Word and save it as HTML, Word will create a folder to contain graphics representing any well-formed math expression from Equation Editor (or MathType) and all graphs from any source. If you named the file   MathLesson.htm  then Word will create a folder called MathLesson_files. A fairly simple Math Lesson could contain 40 - 70 such graphics, all huddled in that one folder.

When you have the graphics file in one of these formats, you get the browser to place the image somewhere by using the <img src=" ... "> technique. You put the filename inside of the quotes - and the file can be anywhere in the world. If the file is not at the same web site, you must insert the complete name of the file. Here are some examples:

<img src="myhouse.gif">

This will cause the image named myhouse.gif to inserted on the page where the code appears.

<img src="http://www.rodsweb.org/george/myhouse.gif">

This will cause the image named myhouse.gif to inserted on the page where the code appears. This file will be found on a computer whose domain name is www.rodsweb.org in a folder named george.

Your page will load faster if you add a couple of things to the <img> tag - the height and width of the image. To figure out what that is, you can load the image into a Paint program, then tell the program that you want to resize or resample it. Study the resulting screen. It may in fact tell you the height and width. However, make sure that you read the number of pixels (not inches) in the height and width. The tag

tells the browser to display the image using 100 pixels in height and 300 pixels in width. Since no path is specified for the image, the browser will "look for it" in the same folder as the html file.