 |
Documentation
Kattare is dedicated to making your hosting experience as painless as possible. That means making as much help and documentation available as possible.
|
|
HTML documents are plain-text (also known as ASCII) files that can be created using any text editor (e.g., Pico on UNIX machines; BBEdit on a Macintosh; Notepad on a Windows machine, etc.). You can also use word-processing software if you remember to save your document as "text only with line breaks."
Some WYSIWYG editors are available (e.g., HotMetal, FrontPage, or Adobe PageMill). You may wish to try one of them after you learn some of the basics of HTML tagging. It is useful to know enough HTML to code a document before you determine the usefulness of a WYSIWYG editor.
If you haven't already selected your software, refer to an online listing of HTML editors (organized by platform) to help you in your search for appropriate software.
Here at Kattare the best way to get your files to the Server is via File Transfer Protocol (FTP). If you need FTP help you should check out our FTP Tutorial. In any case you will use FTP to transfer you files from your computer to the server. Most likely you will have a directory of your own on our Server. For example: your directory might be, /home1/y/youraccount/www/, etc.
An element is a fundamental component of the structure of a text document. Some examples of elements are heads, tables, paragraphs, and lists. Think of it this way: you use HTML tags to mark the elements of a file for your browser. Elements can contain plain text, other elements, or both.
To denote the various elements in an HTML document, you use tags. HTML tags consist of a left angle bracket (<), a tag name, and a right angle bracket (>). Tags are usually paired (e.g., <H1> and </H1>) to start and end the tag instruction. The end tag looks just like the start tag except a slash (/) precedes the text within the brackets. HTML tags are listed below.
Some elements may include an attribute, which is additional information that is included inside the start tag. For example, you can specify the alignment of images (top, middle, or bottom) by including the appropriate attribute with the image source HTML code. Tags that have optional attributes are noted below.
NOTE: HTML is not case sensitive. <title> is equivalent to <TITLE> or <TiTlE>. There are a few exceptions noted in Escape Sequences below.
Not all tags are supported by all World Wide Web browsers. If a browser does not support a tag, it (usually) just ignores it.
Every HTML document should contain certain standard HTML tags. Each document consists of head and body text. The head contains the title, and the body contains the actual text that is made up of paragraphs, lists, and other elements. Browsers expect specific information because they are programmed according to HTML and SGML specifications.
Required elements are shown in this sample bare-bones document:
<html>
<head>
<TITLE>A Simple HTML Example</TITLE>
</head>
<body>
<H1>HTML is Easy To Learn</H1>
<P>Welcome to the world of HTML.
This is the first paragraph. While short it is
still a paragraph!</P>
<P>And this is the second paragraph.</P>
</body>
</html>
The required elements are the <html>, <head>, <title>, and <body> tags (and their corresponding end tags). Because you should include these tags in each file, you might want to create a template file with them. (Some browsers will format your HTML file correctly even if these tags are not included. But some browsers won't! So make sure to include them.)
To see a copy of the file that your browser reads to generate the information in your current window, select View Source (or the equivalent) from the browser menu. The file contents, with all the HTML tags, are displayed in a new window.
This is an excellent way to see how HTML is used and to learn tips and constructs. Of course, the HTML might not be technically correct. Once you become familiar with HTML and check the many online and hard-copy references on the subject, you will learn to distinguish between "good" and "bad" HTML.
Remember that you can save a source file with the HTML codes and use it as a template for one of your Web pages or modify the format to suit your purposes.
This element tells your browser that the file contains HTML-coded information. The file extension .html also indicates this an HTML document and must be used. If you are restricted to 8.3 filenames (e.g., LeeHome.htm) use only .htm for your extension.
The head element identifies the first part of your HTML-coded document that contains the title. The title is shown as part of your browser's window (see below).
<TITLE>Kattare's Virtual Web Service</TITLE>
Where "Kattare's Virtual Web Service" is the title of this page. This command is placed in the HTML document for the purpose of displaying a title in the browser title bar. Below is the result of the title command.
The title element contains your document title and identifies its content in a global context. The title is displayed somewhere on the browser window (usually at the top), but not within the text area. The title is also what is displayed on someone's hotlist or bookmark list, so choose something descriptive, unique, and relatively short. A title is also used during a WAIS search of a server.
For example, you might include a shortened title of a book along with the chapter contents: NCSA Mosaic Guide (Windows): Installation. This tells the software name, the platform, and the chapter contents, which is more useful than simply calling the document Installation. Generally you should keep your titles to 64 characters or fewer.
The second - and largest - part of your HTML document is the body, which contains the content of your document (displayed within the text area of your browser window).
<BODY bgcolor="#FF0000">... your page...</BODY>
Or
<BODY bgcolor="#FF0000" background="ABC.GIF">... your page ...</BODY>
The body command sets the page attributes such as designating the page's background color or setting an image to wallpaper the background. In our example, we have set "ABC.GIF" as our background, where "ABC.GIF" is the name of the image. To set the background as a single color, one would refer to the following RGB Index sheet. The HEX codes set the the background to their corresponding color. For this example, we have chosen the HEX code for a red background.
The tags explained below are used within the body of your HTML document.
<H1>Header Text</H1>
The Header command is used to apply emphasized text to a page such as a title. There are six sizes represented by the numerals 1 through 6, with 1 being the largest size and 6 the smallest. In our example we are setting the header text to be size 1.
HTML has six levels of headings, numbered 1 through 6, with 1 being the most prominent. Headings are displayed in larger and/or bolder fonts than normal body text. The first heading in each document should be tagged <H1>.
The syntax of the heading element is:
<Hy>Text of heading</Hy>
where y is a number between 1 and 6 specifying the level of the heading.
Do not skip levels of headings in your document. For example, don't start with a level-one heading (<H1>) and then next use a level-three (<H3>) heading.
Unlike documents in most word processors, carriage returns in HTML files aren't significant. So you don't have to worry about how long your lines of text are (better to have them fewer than 72 characters long though). Word wrapping can occur at any point in your source file, and multiple spaces are collapsed into a single space by your browser.
In the bare-bones example shown in the Minimal HTML Document section, the first paragraph is coded as
<P>Welcome to the world of HTML.
This is the first paragraph.
While short it is
still a paragraph!</P>
In the source file there is a line break between the sentences. A Web browser ignores this line break and starts a new paragraph only when it encounters another <P> tag.
Important: You must indicate paragraphs with <P> elements. A browser ignores any indentations or blank lines in the source text. Without <P> elements, the document becomes one large paragraph. (One exception is text tagged as "preformatted," which is explained below.) For example, the following would produce identical output as the first bare-bones HTML example:
<H1>Level-one heading</H1>
<P>Welcome to the world of HTML. This is the
first paragraph. While short it is still a
paragraph! </P> <P>And this is the second paragraph.</P>
To preserve readability in HTML files, put headings on separate lines, use a blank line or two where it helps identify the start of a new section, and separate paragraphs with blank lines (in addition to the <P> tags). These extra spaces will help you when you edit your files (but your browser will ignore the extra spaces because it has its own set of rules on spacing that do not depend on the spaces you put in your source file).
NOTE: The </P> closing tag can be omitted. This is because browsers understand that when they encounter a <P> tag, it implies that there is an end to the previous paragraph.
Using the <P> and </P> as a paragraph container means that you can center a paragraph by including the ALIGN="alignment" attribute in your source file.
<P ALIGN=CENTER>
This is a centered paragraph.
[See the formatted version below.]</P>
This is a centered paragraph.
Home | Next
|
