NOTE: THIS IS A COPY OF A DOCUMENT FROM MY SERVER, SO SOME LINKS DON'T WORK.


HTML Guide List of Contents Introduction Creating a simple document in HTML Linking to other documents Using anchors to reference a second document Using anchors to reference a named section in another document Using anchors to reference a named section within the same document Unumbered Lists Numbered Lists Definition Lists Including Inline Images Additional Tags More HTML Reference Forms Guestbooks Counters Backgrounds Horizontal Rules Using the CGI script Redirect Introduction There is no intoduction. Creating a Simple Document in HTML When you create your document, save the file with the suffix .html. If you intend to place it on the EuroNet WWW server you should name it index.html. Now that you have created a file with the filename, index.html, you are ready to start. (N.B. Windows / Dos users will need to save their files, .htm and rename it later). HTML is not case sensitive. You can use upper or lower case letters. <TITLE> may be written <title> or even <TitLE>. However, you may find it easier to use caps which are more visible when editing. Every HTML document should have a title. It will be displayed in the field at the top of the screen in your webbrowser ( Internet Explorer or Netscape. We will use Netscape in the rest of this guideline ) and won't be visible on your page. It is useful for document identification during a WAIS search, etc. You can view your document as you write it by using the 'Open File' option from the 'File' menu in Netscape . There is no need to be connected to the Internet. If you then edit any part of your script and want to see how it looks, press the 'Reload' button or select 'Reload' from the 'View' menu and the edited page will be reloaded onto your screen. So we'll give our document a title, we'll call it 'Example HTML': <TITLE>Example HTML</TITLE> Next is the heading. This will be displayed at the top of your page. Headings are displayed in larger, bolder type. There are six levels of heading. In most documents, the title and the first heading are the same. This is how you write a level one heading: <H1>Example HTML</H1> This is how you write a level two heading: <H2>Example HTML</H2> And so on. Now that we have a title for our document and a heading. You will see by now that the "tags" we have used are paired. There is an opening tag and a closing tag. The element / in these cases shows the browser where the command ends. Other tags are different such as the paragraph tag, <P>, there is no closing tag, </P>. Another example of this is the tag for a horizontal rule, <HR> Here is a most minimal HTML document: <TITLE>Example HTML</TITLE> <H1>This is a level one Heading</H1> This is the first paragraph.<P> This is the second.<P> Here is a horizontal rule.<HR> Click here to see how this is formatted. The paragraph tag, <P>, may be used in most instances where you want to put "white space" into a document. Linking to other Documents The most exciting thing about HTML is it's ability to link to other documents. The browser makes these hyperlinks stand out by colouring and/or underlining the text. HTML uses an element called an anchor, <A>, this is it's only hypertext-related tag. To include a link to somewhere in your document: Find the URL of the place you want to hyperlink to. The URL is simply the 'address' or path of the document you want to reference. You can ask Netscape to display the URL's of each place you visit and you may be able to 'cut and paste' them directly into your document. Unlike tags in HTML, URL's are case sensitive. Here is an example of how a URL is constructed: scheme://host.domain/directory/filename So the URL for this document would be: http://www.helpdesk.euronet.nl/eng/supprt/tutor/htmltutor.html For more information, use this link to the NCSA for their Beginner's Guide to URL's. Another example we'll use is a link to CERN's WWWVirtual Library. <A HREF="http://www.w3.org/hypertext/DataSources/bySubject/Overview.html">The WWWVirtual Library at CERN</A> The elements, <A HREF=, tell the browser that you want to make a link. Next you specify the scheme, that is http://, the rest of the URL is the host.domain/path/filename. There follows a right angle bracket, >, next is your text that will show as highlighted. In this example it is The WWWVirtual Library at CERN, and finally the closing anchor, </A>. Here is the same link as displayed by the browser: The WWWVirtual Library at CERN A few words about 'scheme'. This term refers to the type of server you want to access. It may be a WWW server in which case you would use http://. In the case of a FTP server you would use ftp://. You can access other systems by substituting http, which is used to access a file on a World Wide Web server, with: gopher:// for a file on a Gopher server. ftp:// for a file on an FTP server. telnet:// for a connection to a Telnet based service. WAIS:// for a file on a WAIS server. news: to a Usenet newsgroup. Using anchors to reference second document in the same directory Let's imagine that you want to create another page within the same directory and file as the first. Call this new page document2.html.You reference it with the anchor: <A HREF="document2.html">some text</A> When the reader clicks on 'some text' he will be taken to the beginning of document2. Using anchors to reference a named section in another document If you wish to provide a link from one document to another as before but to a specific section, you must first name the section of the document you want to reference. Do this by setting up an name anchor in document2, we'll call it "sirocco": <A NAME="sirocco">some text</A> Then you can create the link to it in document1: <A HREF="document2.html#sirocco">link to document2</A> When the reader clicks on the words "link to document2" from document1, he will be taken directly to the words, "some text" in document2. Using anchors to reference a named section within the same document Anchors may also be used to move to a named section within the same document. First, you will have to name the section you want to reference in the same way as before. When you write your link, you will not need to use a file name. So your link to the section in document2 from document2 can look like this: <A HREF="#sirocco">Sirocco link from within document2</A> Unumbered Lists You may want to include a list in your document. HTML supports several forms of lists. To create an unumbered list: <UL> <LI>First Item <LI>Second Item <LI>Third Item </UL> The result will look like this: First Item Second Item Third Item Unumbered lists can be as long as you like and each item may be separated by a paragraph tag, <P>, to create space between items. Numbered Lists A numbered or ordered list works in a very similar way: <OL> <LI>First Item <LI>Second Item <LI>Third Item </OL> The result is like this: First Item Second Item Third Item Definition Lists A definition list consists of alternating a term which is abbreviated as <DT> and a definition, <DD>. These elements provide a list which is indented: <DL> <DT>EuroNet Internet BV. <DD>EuroNet are the fastest growing providers of Internet access in Europe. This young but steadily growing company was formed in June 1994. <DT>NCSA, the National Center for Supercomputing Applications <DD>NCSA is located on the campus at the University of Illinois. They are the developers of Mosaic one of the. </DL> The formatted definition list is as follows: EuroNet Internet BV. EuroNet are one of the fastest growing providers of Internet access in Europe. This young but steadily growing company was formed in June 1994. NCSA, the National Center for Supercomputing Applications. NCSA is located on the campus at the University of Illinois. They are the developers of NCSA Mosaic. Including Inlined Images Images can really make a difference to how your finished page looks on screen. Most browsers can display images which are usually in X Bitmap (XBM), GIF or JPEG format. Bear in mind that images, especially large ones, can take a long time to process and download so it's a good idea to keep them fairly small. To include an inline image: <IMG SRC="URL/imagename.format"> The URL of the image works in the same way as the anchor HREF. The file format must also then be included separated by a full stop. If the file format of the image is a GIF, then the filename part of the URL of the image should end with .gif. This is the most simple way to include an image. The image will by default be aligned with the adjacent text. Images may aligned with the top, middle or bottom of the adjacent text with the inclusion of the following: <IMG ALIGN=TOP SRC="URL/imagename.format"> Aligns the adjacent text with the top of the image. <IMG ALIGN=BOTTOM SRC="URL/imagename.format"> Aligns the adjacent text with the bottom of the image. You can also include a reference to an image not in your file by using the anchor HREF: <A HREF="URL/imagename.format">Highlighted Link</A> External animations and sounds can be referenced the same way. The same syntax is used for a Quick Time Movie: <A HREF="URL/moviename.mov">Highlighted Link</A> For an AU sound file: <A HREF="URL/soundfilename.au">Highlighted Link</A> Additional Tags Character formatting There are ways in which you can ask the browser to display words or whole sentences in a specific style, eg, bold text or italics. You have the choice between logical and physical styles although it is recommended that you use logical styles. This is important because not all browsers are capable of showing italics and will better understand and render, <EM>, emphasis than < I>, italic. Logical styles are as follows: <EM> for emphasis. Usually, the browser will display the text in italics. <STRONG> will display the text usually in bold. Physical styles: <I> the text will be displayed in italics. <B> the text will be displayed in bold. <TT> for typewriter text, a fixed width font. More Tags <PRE> stands for 'preformatted' and will display text in a fixed width font. Spaces, new lines and tabs will be significant. All the previous tags have a closing tag. eg. <PRE> and </PRE> The following do not: <HR> will tell the browser to display a horizontal rule across the width of the browser window. <P> used at the end of a block of text will start a new paragraph or can be used between rules or lists to provide extra white space in a document. <BR> forces a line break with no extra white space as in the paragraph tag. If you need special characters as é you can find a list of them here. Horizontal Rules You can now have a rule that does not appear to be recessed: <hr noshade> The browser displays the line like this: <hr size=4 width=50%> shows a rule thus: The width can also be given in pixels: <hr size=10 width=300> A bullet type rule: <hr size=10 width=10> <hr size=10 width=10 noshade> Font Sizes Font sizes may also be changed, the default size being 3. The largest size is 10. Use the following tag: <font size=5>The Text</font> The browser then shows the text like this: The Text A larger example: <font size=10>The Text</font> The Text Backgrounds The first most effective thing you can do with a page is to assign it a background colour or image. An image is tiled over the browser window so it may be very small keeping the size and the loading time of your page down. To reference a background image either a 'gif' or a 'jpg'. <body background="filename.gif"> or substitute 'gif' for 'jpg'. RR, GG, and BB are two-digit hex numbers, 00 to FF, which represent the amounts of red, green, and blue in a particular colour. The tag for assigning a colour to the background, body text, links and visited links respectively is: <body bgcolor="#RRGGBB" body="#RRGGBB" link="#RRGGBB" vlink="#RRGGBB"> You can also mix these tags referencing a background image and a colour to the body text and links within the same tag. <body background="tile.gif" body="#RRGGBB" link="#RRGGBB" vlink="#RRGGBB"> A list of background and text colour codes is available at infi.net. A nice shareware application for the Macintosh which gives you the colour codes written by Vector Development is "HTML ColorPicker 2.0.3" developed for the Mac by David Christensen. This application allows you to use a colour picker and slider to choose exactly the colour you require then gives you the hex code. You simply press a button to copy the code then paste the code it into your document. The file is binhexed so you may need to Download Stuffit Expander to extract it if you don't already have it. Download ColorPicker. Server pushes and client pulls are explained along with some other good tricks on this page by Carl Tashian, How do they do that with HTML? Here are some other useful reference links for HTML 3.0: Netscape Extensions The World Wide Web Initiative HTML Editors Hypertext Markup Language Specification 3.0 Footnote One of the best ways to learn is by look at other people's scripting. If you see something that you like, download the source and see how it's done. With Netscape, go to the 'view' menu and select 'source.'
Last update 31 May 1997