It doesn't matter what computer you use on CCN as Lynx and its subsidiary programs, PICO, PINE and TIN control everything that happens online. The following instructions will work with all computers. Your basic page layout consists of a title which will carry on throughout multiple pages to identify your homepage regardless of what page you are viewing or the various headers and headline types, image placements, sourcing and the informational tags. To begin, put at the top left of your document. Although pages run fine without this tag, it ensures that your HTML document will be interpreted as such by all of the common Internet browsers. THE TITLE Let's start with a title for our homepage. We'll call it 'Our Homepage'; (how's that for imaginative). We want a title in the upper-right hand corner of each page. This is accomplished by the following: Our Homepage The slashed title in the second set of brackets is 'closing' tag to tell the system it is finished with that particular command. The title tag will print 'Our Homepage' on the first and every succeeding page. The tags are enclosed within the header tags which tells the document it is to be located at the top of the page regardless of the placement within the document. THE BODY The body of the document is defined using ; the ending tag placed at the bottom of the document followed only by which we will get to later. If a background is to be added to the document, this is phrased as: This replaces and the 'backing.gif' is just a name I am using for this tutorial. Your background may be called something different. See images for an explanation on the use of gifs, etc. THE HEADLINE Next, the headline for our main title (not to be confused with the above - although headlines can contain the same information as the . To put 'Our Homepage' in the main headline, we use: <h1>Our Homepage<hr></h1> Wait a minute; what's <hr>? That stands for horizontal rule, which I usually put under the headline as it gives it a nice separation point from the rest of the text. You will see <hr> from time to time in an HTML document for this reason. The <h1> headline type will automatically center the headline and place it in the largest of all print on the page. Using <h2> through <h6> will successfully make the headline smaller and place it to the left of the page as in 'subtitles'. IMAGES Let's say we have a picture file commonly known as an 'image' that we want to put on our homepage. An image file can be in a multitude of picture formats, eg...jpg, gif, tiff, pcx, ps etc. For the sake of brevity, we'll work with a gif file. Let's say we have a picture called 'computer.gif' which we want to place on our page. We would use this type of referral: <img src="computer.gif" alt=""></img> What this translates into is: find the img source called 'computer.gif', place it on the page and then proceed with the rest of the document. Remember to use </img> to end the image space allotment. HTML assumes you will be using the entire page across for the vertical size of the image. Without the </img> closing tag, the unused portion of the page will remain blank. With the tag, the text will flow up into the unused portion of the page. The alt="" means that on a browser such as Lynx (text), you will not see the word [INLINE] or [IMAGE] reminding you that you can't see them. It is a polite way of not teasing your visitor. <img align=left src="computer.gif" width=100 height=100 alt=""></img> This long tag simply means the image is to be placed on the left side of the page, the source is as above, no teaser for text browsers and that you want the text to fill in on the right side of the picture. Naturally, by placing the word 'center' or 'right', the image will place accordingly and the text will follow up both sides or on the left, respectively. The width and height numbers refer to the approximate width and height of the image as it appears on the page and adheres to the guidelines set out by the various HTML standards committees and may vary according to the size of the source. You may have to play around with these numbers a little to find a happy medium and visually pleasing display. <BR> and <P> These are spacing tools to force a new line <br> or a paragraph (usually 2 lines) <p>. With the paragraph, you can add a </p> to end that particular paragraph although it works without the end tag being present. HTML checkers will look for it and render an error if they can't find it. An HTML checker demands that all tags have end tags. CENTERING To center something in a document, regardless if it's an image, a sentence, a paragraph or a line, you would use: <p align=center></p> Do not fall into the trap that so many homepage creators do and use <center></center>. This is a 'Netscapism' and not true HTML. Lynx may or may not display it properly as may not many other browsers. There are some 'Netscapisms' that even other versions of Netscape do not support. By using HTML standards, you can be assured your pages will always be correct. LINKS These are the tags that connect the Internet and other documents to your homepage. A typical link connecting you to the CCN Homepage looks as follows: <li><a href="http://www.chebucto.ns.ca">CCN</a> The above line translates into: <li> link. <a anchor. href= hypertext reference. http:// hypertext transfer protocol (a mode of sending data via the Internet; others include: 'ftp://' - file transfer protocol 'nntp://' - network news transfer protocol 'smtp://' - sendmail transfer protocol 'telnet://' - telephone line networking 'gopher://' - "go for" this and that protocol </a> the end anchor tag The 'CCN' is placed beteen the opening and closing angle brackets and that will be the only thing you will see of this line besides the link number (in Lynx). You will notice that there is no reference to 'Home.html". It is not necessary to include it as CCN utilizes the unwritten industry standard 'index.html' as a backup page. This will load as a default in the absence of a particular document. PRE-FORMATTING TEXT If you know how a document will look or you want the text to be a certain way, then you can preformat it with the <pre></pre> tag. Placing <pre> at the beginning of the text and </pre> at the end of the text will preserve the formatting of that text within the document. Without these tags, the text will flow as one large, formless clump. When you're done, you will want to add the final HTML signalling tags. As at the beginning, you end your HTML document with </html> as mentioned in the body section of the tutorial. Good luck with your homepage and happy HTMLing. --------------------------------------------------------------------------