=========================================================================== Today on The World Vol. 4 #139 Friday, May 29, 1998 =========================================================================== Here's the beginning of a long series of articles on how to write HTML (for designing Web pages from scratch and understanding exactly what's happening, something you don't usually get a feel for if you rely on a drag-and-drop editing program like PageMill or FrontPage.) This first segment will be the longest. Subsequent installments will discuss one or two HTML elements in detail, working up to the hard things like tables and frames. By the way, those of you who are reading this with programs that "render" embedded HTML tags (such as Eudora, Netscape Communicator, Internet Explorer) may run into the problem of your program rendering the example HTML tags in these tutorials. If it seems like words and examples are missing from these tutorials, or if it has strangely garbled formatting, then you should try (a) disabling the rendering of HTML in your program, or (b) save these tutorials to disk and look at them with a text editor (such as WordPad or SimpleText). --------------------------------------------------------------------------- In other news related to our Web site: The HPA (Home Page Alone) tutorial posted to Today On The World last week is now on the Web with our other Web page creation help files: http://world.std.com/help/web/index.shtml (This series of HTML tutorials will eventually join it.) Also, we've added or updated about 200 FAQs in our collection of our favorite FAQs from Usenet: http://world.std.com/help/faqs.html#OTHER (It's still a little spotty in places -- for instance, we're missing a few pieces of the Babylon 5 FAQ -- but I'll patch up some of the holes when I have time.) (kibo) --------------------------------------------------------------------------- HTML TUTORIAL -- CHAPTER 1: FUNDAMENTAL TAGS After completing the first few parts of this tutorial, you will be able to craft your own pages from scratch with no special tools. (This is a "learn by doing" tutorial, not a reference manual.) I highly recommend doing each chapter on a different day, as this tutorial covers a lot of ground very quickly, and you'll want to let it sink in. Chapter 1 will introduce you to the structure of HTML, and you'll be "marking up" (formatting) text. In fact, by the end of this chapter, you'll be able to create simple pages of text (you won't learn how to make links or include pictures until a subsequent chapter, but Chapter 1 does tell you how to put text on a page.) CHAPTER 1 - FUNDAMENTAL TAGS 1.1 What's HTML? HTML (HyperText Markup Language) is a programming language used to format Web pages. Yes, a programming language, like BASIC, FORTRAN, Pascal, and C. Wait, come back here! HTML is just about the simplest computer language ever devised. (And Web browsers are sometimes tolerant of errors--they attempt to show the text on your page no matter how garbled your HTML is.) There is no real "programming" in HTML--all you have to do is to embed little "tags" (they look like ) around the parts of your text that need special treatment (headings, italics, links, etc.) 1.2 Making a blank Web page Let's build your first Web page. You will need some sort of text editor or word processor (WordPad or SimpleText will work; if you use a word processor, be sure to save as "Text Only" or "DOS Text") and a Web browser (Internet Explorer or Netscape Navigator). You don't have to be connected to the Internet at the moment--you're going to write an HTML file, named mypage.html (these files should end with .html, .htm if you have DOS), save it, and then look at that file with the browser. Ready? Open your text editor's window and copy-and-paste this skeleton of a Web page to the new window: My Page. I'll explain what that stuff is later. By the way, the exact formatting isn't important in terms of whether or not some blank spaces got pasted in before or after each line. For now, you've just copied the minimum HTML necessary to make a blank page. Please save the file as mypage.html and open it with your browser (you can drop the mypage.html icon onto the browser's icon on most computers; if that doesn't work, use the browser's menus to "Open local file" or "Open page".) The Web browser should then show a blank window with "My page." as the title at the top of the window. Thrilling, a blank page with nothing but a title. If you've accomplished this, you've figured out how to work your text editor and Web browser to preview any pages you design. 1.3 Text on a Web page Now let's put some text on the blank page. Go back to the text editor, and paste these two lines in directly below the "your text will start here" line:

Hello, World!

The rain in Spain falls mainly on the plain.

Save mypage.html again, and open it in the Web browser again. You should see the browser's window for "My page.", now with a heading (probably in large bold type) and a sentence of text. (Note: to make the browser show the updated version of the same page, you can probably just click the browser's "Reload" or "Refresh" button after saving the page in your text editor. If the page doesn't change after you do that, make sure your browser's preferences are set to "Check pages for changes every time", not "Once per day" or "Never".) Before I explain all this stuff we're pasting in, one last experiment. In the text editor, paste this in after the "...mainly on the plain." line:

This is a test of the Emergency Broadcast System, this is only a test. If this were an actual emergency, we wouldn't use the Web to tell you about it.

Yes, I know it's got funny formatting. Save mypage.html again and view it in the browser. What happens to the funny formatting? If all is working, the browser will have taken out all the "carriage returns" at the ends of the short lines and the extra spaces between words, and then "wrapped" the paragraph at the width of the browser window. (Try making the browser window narrower now and watch it rearrange the text to fit.) Basically, the intention of HTML is that your text will come out on other people's screens--which could be any size window, with any browser program, using any size font--formatted nicely. In HTML, carriage returns in text are ignored by browsers, and extra spaces are removed. Notice that although the browser cleaned up the messy formatting of the "Emergency Broadcast" paragraph, it didn't run it together with the end of "The rain in Spain." It knew that there should be separate paragraphs (three in all, counting the big heading) and left gaps between them. Notice that each paragraph begins with a tag (

or

) and ends with a matching tag (

or

). Most (not all) HTML tags come in pairs like this, with starting something and ending it. (They don't have to be typed in capitals--lowercase will work the same. It also won't care whether a cluster of tags is on one line or spread out over different lines.) What do you think

and

mean? 1.4 Kinds of text blocks.

...

marks a paragraph of regular text.

...

makes a "Level 1" heading (a special louder kind of paragraph, usually a single line in big bold type.) Try changing

to

(and

to ) and see what happens.

is smaller than

; there are six levels of headings in all (although the smallest ones, like

, may be smaller than your plain text!) Basically, in our example document so far, we have two kinds of paragraph: the

kind and the

kind. All of our text is inside some kind of paragraph so the browser knows what to do with it. (The text would also be visible if we left some of those tags out, but it's a good habit to enclose all text in paragraphs. Early versions of the HTML standards do not require

to close a text paragraph, but nowadays you should be using tags at the start and end of every paragraph.)

and

through

count as paragraphs because the lines of text within them are spaced close together, but between the end of one

...

and the beginning of another (of any sort) there's some extra space. In other words, if you put

...

around each paragraph of text and

...

(etc.) around your headings, everything will be set off with enough space to show where the paragraphs are. There's a third kind of text block I need to mention: change the second of the

...

pairs (around the oddly-formatted text) to 
...
and see what happens. 
 indicates a section of
preformatted text, in which the browser should not alter the spacing any
more than is necessary to fit it in the window.  A fixed-width
(typewriter) font is used instead of the text font.  If you had a bus
schedule with carefully-aligned columns of numbers and wanted to ensure
the spacing would not change, you could use 
.  (I like to think of

 as being a kind of paragraph, even though it can have multiple
paragraphs inside it.)  So now you know nine kinds of text blocks:


    MAKING PARAGRAPHS

    
...
    Level 1 (huge) heading
                    through
    
...
    Level 6 (tiny) heading

    
...
      Paragraph of text

    
...
  A block of pre-formatted typewriter text
                    (this is not really a paragraph per se, as it can span
                    several paragraphs.)


My advice is to enclose each part of your text in one and only one of
these.  You can't overlap or nest these pairs of tags: you can't put a

 inside 
...
 or vice versa.  These tags serve similar
purposes--to describe the paragraph structure of your page--and so no
two of them can apply at the same time.



1.5  Styling text


However, there are other pairs of tags which can be nested inside

...
.  Try adding this sentence to mypage.html after the
"Emergency Broadcast" paragraph:


  
This sentence has a lot of italics but only one
  boldface word in it.



Now view it in the browser.  You've probably guessed what will happen:
... make italics and ... make boldface.  (Of course, under
some circumstances, you can't see those styles--such as in the program
lynx--but they'll be indicated somehow.)  Notice that we begin 
, then
, then , and then we end , , 
 in reverse order: the
tags are nested.  I like to think of it like so:


    
.................................................

                  ...............................
                                   ....

If we had used:

  
This sentence has a lot of italics but only one
  boldface word in it.


We would be overlapping the 
...
 pair with ...:


    
.............................................

                  ...................................
                                   ....


The page would still be viewable, but it would be "wrong"--it might look
okay, it might not.  (It might apply the wrong formatting to text which
follows that sentence.  If you try this experiment, be sure to fix it so
it won't affect the following examples.)  HTML is pretty forgiving, but
it's best to follow the rules.  (Some browser programs are more lenient
than others about working with bad HTML.)

We can nest ... and ... inside 
...
.  What would
happen if we put ... or ... inside 
...
?  Let's
try it by adding this to our page:


  
This heading has bold, italic, and
  typewriter styles in it.  This may or may not work.



What would happen now would depend on which browser you're using and how
you've configured it.  You see, most browsers always make 
...

bold.  So do you expect ... to do anything?  (It probably
didn't.)  The various style tags we used in that header may have worked
fine, sort of worked, or not worked, depending on circumstances. 
Essentially, we shouldn't be trying to change styles inside 
; in
HTML, 
 is what's called a "logical style".  It means that the
browser should be displaying things in a special way (large bold print
or something else, depending on the browser); if we try to turn bold on
and off inside 
, we're giving the browser conflicting information. 
So  and so on should be used only inside 
 paragraphs, not 

through 
 or 
 paragraphs, which already have special formatting.


    STYLING TEXT

    ...     Boldface;    use only inside 
...

    ...     Italic;      use only inside 
...

    ...     Underline;   use only inside 
...

    ...   Typewriter;  use only inside 
...



(I haven't discussed  and  because you probably won't use them
often; one's an underline and the other's typewriter text.  Most
browsers underline links, so don't underline text or you'll confuse
people.   is different from 
 because 
 makes an entire
paragraph of unformatted text, while  just changes fonts within the
paragraph.)



1.6  Aligning text


So now you know how to make paragraphs of text and headings, and how to
put bold and italic into the text.  What if you want to center
something?  The paragraph tags we introduced before, such as 
 and

, can take optional parameters to control how they're formatted. 
Try adding these lines to mypage.html:


  
This is a plain old heading.


  
This is a centered heading.


  
This is a right heading.


  
This is a plain paragraph.


  
This is a centered paragraph.



Notice the syntax to center something: , with the
optional ALIGN="CENTER" inside the tag.  (Again, it can be in capitals
or lowercase; it doesn't matter.)  There are various other options you
can include in 
 and 
, but ALIGN= is the most important to learn
(all browsers can understand it, unlike some others made up by
particular software companies.)  If you leave out ALIGN=, you get the
default value (ALIGN="LEFT").

Note 1: You may often see other tags, 
...
 used to
center sections of a document.  This is not a standard tag--it was
invented by Netscape.  
 will not work in some other browsers. 
Use 
.

Note 2: Some older browsers will not center headings; they may come out
with left alignment.  Modern browsers can center headings, and all can
center text with ALIGN="CENTER".

Note 3: Some people type 
 instead of 
.
 This works most of the time, but there are a few tags whose options
must be in quotes.  I suggest making a habit of putting quotes after
every equal sign.


    ALIGNING TEXT

    (here "" means one of 
 or 
 through 
)
    ...                  Left-aligned paragraph
    ...   Centered paragraph
    ...    Right-aligned paragraph



1.7  Rules, breaks, and blockquotes


By now your practice page is an ugly mess of styles, but we don't care. 
We're having fun making a mess.  Let's clean up mypage.html a little. 
Between the end of one paragraph and the beginning of the next (that is,
after a 
 or 
) add the following tag:


  



And then after the last paragraph, paste this in:


  
Yes, we have
no bananas
today
!!!



And yes, we have no  or 
 today--these tags do not come in
pairs.  They don't make paragraphs and they don't style chunks of text;
they just make a thingie and that's it, so there's no "end tag" for
them. Take a look at what they do in your browser.  Where you added 

should be a Horizontal Rule (i.e. a stripe across the page.)  The
paragraph with 
s in it should have breaks (old-fashioned carriage
returns) in it.  (Note that 
 starts a new line, not a new paragraph.

 is useful for making long titles break between the right words and
not at the width of the window.  
 should not be used to end paragraphs
(that's 
!) but is used to break lines without ending the paragraph,
or to make a gap between paragraphs. Try this to see it in action:


  
After a long break, I'll be back with my address.

  

  

  
James "Kibo" Parry
123 Bozo Street
Boston MA 02345



One last formatting trick, that was intended for academic papers but is
also an easy way to make margins.  Paste this in after the last
paragraph:


  
This is a long paragraph which should go all the way across the
  window once or twice or maybe even three times if the window is
  really narrow.  This paragraph goes on and on and on and on.
  Blah, blah, blah.  This paragraph just doesn't quit.

  

    
This paragraph is indented to make it stand out a little.
    It might also be easier to read because it doesn't go all the way
    across the window.  There are other ways to do this, but this is
    the easiest to do.

    

      
Sometimes I like to do the whole page with "BLOCKQUOTE" tags
      around all the text to make margins.  "BLOCKQUOTE" is one of the
      few tags you can nest inside itself. I suggest putting the
      "BLOCKQUOTE"s outside the "P"..."/P"s.

    

  


The weird thing to remember about 
 is that it's not a kind
of paragraph like 
, 
, and 
, but that it goes around one
or more paragraphs, and that you can have more than one of them
active at a time (by nesting 
s inside each other.)
You should turn off 
 before using 
 or anything centered,
as some browsers will misalign centered things when 
 is on.


    LAYOUT

    
                Break lines within paragraphs, or make extra
                        space between paragraphs

    
                Horizontal rule
    
     Horizontal rule x% of the width of the window
    
       Horizontal rule x pixels thick

    
...
     Indented; goes around one or more
                                     
...
 pairs.  You may nest this
                                     inside another 
 block.


Try changing the horizontal rule in mypage.html to be simultaneously 50%
wide and 6 pixels thick by putting both options into your 
 tag. 
(Some browsers will draw the rule in black, some will made it look
transparent and shaded.  There is no way to change its color in all
browsers, although some have non-standard options for this.)


1.8  HTML document structure

Soon this chapter will be over, but first I will keep my promise to
explain the other tags in the skeletal HTML page we started with:

  
  
  My Page.
  
  
  

  
  
  

The whole document is enclosed by ... to indicate where
everything starts and ends.  They should be the very first and last tags.

Inside ..., it's divided into two sections:
... and ....  The  section contains
information about your document--it must contain a ...
with the name of the document, and in a future installment you'll see
how to put other "metadata" there to identify the document to search
engines.  The important thing is, don't put extra stuff in
....  Your page's text goes in ....

The lines which say  are comments, and can say whatever you
want (or in this example, whatever I want.)  I strongly suggest you
leave notes to yourself there so that in a few months you'll know what
you were thinking when you wrote your HTML.  These comments are
invisible, except to people who use the "View Source" command (which
lets them see your HTML tags just like in your text editor.)  For fun,
go to other people's pages and do "View Source"; this is a common way of
learning HTML.  (Of course, much of the HTML you'll see was written by
people who don't know what they're doing, so don't go copying other
people's tags--you'll know more than they do after a few more chapters.)


    HTML STRUCTURE

    ...    goes around the entire document
    ...    goes around the top of the document
    ...    the rest of the document, where your text goes

    ...  the page's title, usually shown at the top of the 
                        window (required to be in ...)

            a comment, for leaving invisible notes to yourself.



1.9  Final thoughts


There are many different philosophies regarding what is "right" or
"wrong" in HTML, because most Web browsers can still view pages that
deviate from the standards.  For instance, many people use 
 at the
start of a paragraph but not 
 at the end, or forget to put in
..., and things usually look okay.  But if you're new to
HTML (or even if you aren't!) I strongly recommend following the rules I
give here.  (If you don't like my rules, follow the rules of a different
tutorial, or read the official W3C HTML standards, but at least follow
somebody's recommendations.)  Other people's tutorials will have
different recommendations, and if they differ with mine, it does not
mean that either is "wrong", just that Web designers (and tutorial
authors) have different approaches to making Web pages that work well. 
(Why don't we all just follow the official W3C standards?  Because
they're often hard to understand, or something we need to bend the
rules to achieve an effect we need, and most importantly, because
Netscape and Microsoft don't always follow the W3C standard!)

That's all for our first installment.  In the following chapters I'll be
discussing images, colors, backgrounds and everyone's favorite... links.
Until then, you should go browsing and look at how other people are
using the tags I've already discussed, and if you feel up to it, make a
page of HTML with some text on it (a short story, your biography,
whatever) and add some tags to make it look pretty.  (Start with the
mypage.html skeleton shown above.)


(kibo)

==========================================================================
[] Send suggestions for tips & URLs to today@world.std.com.
   We're also collecting links for our Web pages at eyeguy@world.std.com.
[] To contact CUSTOMER SUPPORT, send mail to support@world.std.com or
   call 617-739-0202.  
[] To subscribe to the "Today" mailing list, send a note saying 'subscribe
   announcements' to majordomo@world.std.com.
   Subscriptions to this mailing list are open to World customers only.
[] Mmm, Beefy!
[] Today on The World is (C) Copyright 1998 by Software Tool & Die.
   Its contents may freely be redistributed as long as credit is given.