I like your web pages - how can I do that?

(The pages in question are here.)
I'll show how to construct this page.

First of all, you'll need some good pictures. See here for tips.

Tools

There are a number of tools you can use to construct a web page. You can create a document using Microsoft Word, and then save it as a HTML document; I don't recommend this. A web page generated this way doesn't follow the standards for web pages, and you may run into trouble with some browsers that don't support Microsoft's "features". I use Arachnophilia on my PC; it can be downloaded and used for free. It lets you "highlight" an area of your document and then "quote" it with the chosen instructions.

The "Envelope"

Every such page must have the file extension .html (or .htm) and MUST contain the following "envelope" to the contents: 
<HTML>
    <HEAD>
        <TITLE>Royal Barge XLVI-2 --- Rev: 3 September 2001</TITLE>
    </HEAD>
    <BODY BGCOLOR="#FFF4E8" text="#6F2F2F">
         the CONTENTS
    </BODY>
</HTML>
The first thing you see is that there are a number of "instructions", each "quoted" with "<" and ">", such as <HTML>. Instructions are (usually) not case sensitive; "<HTML>", <Html>, and "<html>" all mean the same thing. I like to capitalize because they stand out more.

Spaces within the <---> are legal: "<HTML>", "< HTML>", "<HTML >", and "< HTML >" are all the same. However, it's a good idea to avoid spaces within the <---> - they may screw up "line folding".

The next thing you'll see is that they come in pairs, such as <HTML> and </HTML> - the end of a pair has a "/" starting the instruction. (Not all commands require the ending command, but they are usually allowed, and it's a good idea to keep the balance; someone may be using an odd browser that doesn't follow the rules.)

You'll notice that I've indented the stuff between a pair of commands; again, it's not necessary, but it help make the page's source more readable (and thus more maintainable, when you have to come back and make changes).

This page is a HTML document; the outer pair of commands (<HTML>) says so.

It's divided into two sections - the HEAD and the BODY.

The HEAD (<HEAD> --- </HEAD>) contains the TITLE - that's what the browser displays with the page, and what is recorded when the page is bookmarked (this page has the title "Ship Modeling FAQ, Question WebPages Rev: December 31, 2001" - can you find where your browser displays it?). I personally like to include the last revision date; that makes it easy to see when I last changed something and the reader who wants to keep a copy can tell if it's time to print out a new one.

The BODY (<BODY> --- </BODY>) contains the CONTENTS - what the viewer will actually see. The page we're working on has the modifiers BGCOLOR="#FFF4E8" text="#6F2F2F" to the BODY command; BGCOLOR sets color of the "paper" to "parchment"; text sets the color of all the text to "sepia". Your can leave those out and just say <BODY>.

The Contents

The contents contain that which is visible to the viewer. Most of the time, this will be text and pictures; there may be links to other pages.

Text

"White space" is any series of spaces, tabs, "new line characters" (whatever that may mean on your system). Upon display, all white space is generally "collapsed" into a single space. That permits us to format the source HTML (what we write) for readability without that aflicting the displayed output.

Text consists primarily of headers and paragraphs (consisting of "words" separated by "white space"); it may also be formatted as lists or paragraphs.

Special Characters

You'll have noticed that "<" and ">" have "magic" properties (they're used to delimit commands); that means you can't use either within text. Instead, you have to use "&lt;" and "&gt;" respectively to display those characters. However, that also means that "&" is magic as well; you have to use "&amp;" to cause it to be displayed.

Headers

There are six different types of headers, called H1 (most prominent) to H6 (least prominent). Here are examples of each of the six:

<H1>H1 - biggest </H1>

<H2>H2 </H2>

<H3>H3 </H3>

<H4>Headers (as for this secton) </H4>

<H5>H5 </H5>
<H6>H6 - smallest </H6>

Paragraphs

Paragraphs are set off by "<P>". <P>

It doesn't matter where you put the <P>.

<P>It can be at the beginning of the line, or at the end, or on a separate line:

<P>

Note that using multiple lines does not necessarily cause multiple lines to be displayed - the browser will display text; everything else will become a single blank-character.

Breaks

Text normally "folds" at "white space" - if you want to force a fold where you want it (rather than where the browser decides to put it), you put in <BR>,
<BR>thus.

Neither <P> nor <BR> needs a matching </P> or </BR> to close; indeed, for <BR> it's illegal!

"Ornaments"

You can visually set off one part of a page from another by putting in a "Horizontal Rule" using <HR>
If you want, you can center text (or anything else) by saying:
<CENTER>
thus.

</CENTER>

You can also emphasize areas by using <I>Italics </I> or <B>Bold </B>, or you can switch to <TT>a "fixed-pitch" font</TT>.

Links

A link is used to connect two documents together.

Embedded Documents

If you want to embed a document (such as a jpg image) inside a web page, you say: <IMG SRC="Image_Name.jpg"> where "Image_Name.jpg" is the name of the image to be embedded. You can add the modifiers:
<IMG SRC="Image_Name.jpg" ALIGN="LEFT"> or
<IMG SRC="Image_Name.jpg" ALIGN="RIGHT">
to force the image to the left or right side of the page; this will have the side effect of causing text to "flow" around the image. Make sure that's what you want it to do!

Do remember to enclose the name of the image in quote marks (or it won't work).

Also remember that most web page servers (where you'll eventually store this page for other people to access) are case sensitive - don't say "image_name" when the file is actually called "Image_Name". (If you're creating the page on a Windows machine, be especially careful; Windows is NOT case-sensitive, and doesn't show you the file extension (e.g., ".jpg") unless you ask it to. The file may really be called "Image_Name.JPG", and if you call it out as "Image_Name.jpg" the server may not be able to find it!

External Documents

The alternative is to install a connection to an external document; this kind of link is "anchored" by saying: <A HREF="ExternalDoc">go here</A> - what would be displayed is: go here which, if clicked on, will take the browser to the new document.

Thumbnails

A common usage is to provide a "thumbnail" image in the document that is in turn linked to a full-sized image that can be viewed by the user upon demand. This has several advantages: small images can be loaded much faster; if there are many in a page, the viewer doesn't want to wait to download (he may not even want to download) a lot of images.

We create a thumbnail by saying:
<A HREF="Full-Size_Image.jpg"> <IMG SRC="Thumbnail_Image_Name.jpg"> </A>

If we want the full-size image to appear in a new window, we say:
<A HREF="Full-Size_Image.jpg" TARGET="NEW"> <IMG SRC="Thumbnail_Image_Name.jpg"> </A>

This tells the browser that you want it to display the image called Thumbnail_Image_Name, and if the viewer clicks on it you want to have Full-Size_Image displayed in a new browser window!

Back to the sample document...

For this document, the CONTENTS begins: 
        <CENTER>
            <I>Note: clicking on any of these images will open
            a new window with a larger image.</I>
            <a href="ChapmanXLVI-2_1.jpg" target="new">
                    <IMG SRC="ChapmanXLVI-2_1_T.jpg"></a>
            <H1>Royal Barge</H1>
            <H5>From <I>Chapman</I>, Plate XLVI, No. 2</H5>
        </CENTER>
We see the use of CENTER to center the material therein on the page. We also see the use of I, H1, and H5.

The 2-line command in the middle - of the form: 

            <a href="picture" target="new">
                    <IMG SRC="Thumbnail"></a>
tells the browser that you want it to display the image called Thumbnail, and if the viewer clicks on it you want to have picture displayed in a new browser window! The next part of the page contains two tables - one labeled (using a header) The Barge, and the other labeled The Model. Each of these is individually centered. (You could include both within the range of one CENTER, but it's easier to read - and modify - the source if you do each independently.)

Next we'll build a TABLE. The first table will be presented as:

The Barge

Built: ca. 1750; Europe
Length: 54 1/4 ft.
Beam: 11 ft.
Draught: 2 2/3 ft.
Pairs of oars: 10
These are created thus:

we say <TABLE VALIGN="TOP"> --- </TABLE> to delimit each table. <TABLE> has the modifier VALIGN="TOP" - that says we want all rows aligned vertically to a common top.

The table has a number of Rows; each of these is set off by <TR> --- </TR> ("Table Row").

Each row has several Data fields; each of these is set off by <TD> --- </TD> ("Table Data").

I like to indent each <TD> successively further - again, it helps make the source more readable (and thus easier to change). 


        <Center>
            <H3>The Barge</H3>
            <TABLE  VALIGN="TOP">
                <TR>
                    <TD>        Built:			</TD>
                        <TD>        ca. 1750; Europe	</TD>
                </TR>
                <TR>
                    <TD>        Length:			</TD>
                        <T>        54 1/4 ft.		</TD>
                </TR>
		Three more rows, - done the same way
            </TABLE>
        </Center>

        <Center>
        <H3>The Model</H3>	Note 1
            <TABLE  VALIGN="TOP">
                <TR>
                    <TD>        Scale:			</TD>
                        <TD>	1:24 (1/2 inch = 1 foot) </TD>
                </TR>
                <TR>
                    <TD>        Plans:			</TD>
                        <TD>	Note 2
                                <a href=ChapmanXLVI-2_p.jpg target=new>
                                        <IMG SRC="ChapmanXLVI-2_p_T.jpg"
                                                Align="Right">
                                from <B><I>Architechtura Navalis
                                                Mercatoria</I></B>
                                <BR>by <I>Fredrik Henrik ap
                                                Chapman</I>,
                                Plate XLVI, No. 2.<BR>
                                Originally published in Stockholm in 1768.
                        </TD>
                </TR>
		Three more rows, - done the same way
                <TR>
                    <TD>        Construction        </TD>
                        <TD>    Note 3
                                "Dockyard" style construction.<BR>
                                Scratch build entirely from home-milled
                                timbers of madrone,  pear, apple, cherry,
                                and boxwood.
                        </TD>
                </TR>
            </TABLE>
        </Center>
Note 1: Here we're starting the 2nd table. Note 2: A data fields can have several lines (or even paragraphs). We're again defining a "clickable" image, but this time we say: <IMG SRC="ChapmanXLVI-2_p_T.jpg" Align="Right">" with the modifier "Align="Right" ", which will force the thumbnail image to the right of the field, allowing the text to appear at the left (in effect, we've created another column for the table). Note 3: We use <BR> to force a line-break. (NOTE: <BR> does NOT have a closing </BR>!)


These tables are followed by seven more thumbnail pictures, each of which can be "clicked" to get a full-size image. We use <BR> as necessary to group the thumbnails. 

        <a href="ChapmanXLVI-2_2.jpg" target=new>
                        <IMG SRC="ChapmanXLVI-2_2_T.jpg"></a><BR>
        <a href="ChapmanXLVI-2_3.jpg" target=new>
                        <IMG SRC="ChapmanXLVI-2_3_T.jpg"></a>
        <a href="ChapmanXLVI-2_4.jpg" target=new>
                        <IMG SRC="ChapmanXLVI-2_4_T.jpg"></a>
        <a href="ChapmanXLVI-2_5.jpg" target=new>
                        <IMG SRC="ChapmanXLVI-2_5_T.jpg"></a><BR>
        <a href="ChapmanXLVI-2_6.jpg" target=new>
                        <IMG SRC="ChapmanXLVI-2_6_T.jpg"></a>
        <a href="ChapmanXLVI-2_7.jpg" target=new>
                        <IMG SRC="ChapmanXLVI-2_7_T.jpg"></a><BR>
        <a href="ChapmanXLVI-2_8.jpg" target=new>
                        <IMG SRC="ChapmanXLVI-2_8_T.jpg"></a>
Finally, we display a Horizontal Rule to seperate the following form the rest of the page, and then offer a way back to the page that linked to this one.
Note the use of "../" in the link - that's the standard way to specify a folder (directory) that contains the current folder (directory). 

        <HR>
        <a href="../ShipModels.html">Back to the Ship Model Page?</a>

Notes on Using Images:

Thumbnails

A thumbnail is a small version of a larger image. They're used because the time it takes to load an image is proportional to the square of it's dimensions, and we don't want the viewer to give up in disgust waiting for pictures to download! It's better to offer him a thumbnail, and then let him choose when (and if) he wants to view the full-size picture.

I find that a thumbnail image of 200 pixels in the biggest dimention is big enough to see and determine if the big picture will be of interest, yet small enough to be loaded in a reasonable amount of time.

Full-size Images

I find that a full-size image should be limited to about 800 pixels wide, except in exceptional cases. The bigger they are, the more space they take, the longer it takes to down-load, and many potential viewers have problems looking at anything much bigger (they'll have to "scroll" around to see the whole image; that gets boring fast!)
{John O. Kopf}
Back?