Intro to HTML
Click on the links below to access the information or visit the sub-pages.
Community Learning Network
|
|
|
|
About HTML
HTML stands for "Hypertext markup language" and is the simple set of codes that are used to define the appearance and functioning of a World Wide Web page. HTML is a constantly evolving set of codes, which are also known as tags. Do I have to learn this HTML stuff? If you're not used to computers, some of the information presented here may seem a little daunting. But don't worry! You only need to learn HTML if you decide that your organization wants to write its own Web pages. If you simply want your group's basic information on the CommunityNet without learning HTML, just register for an account and we will automatically generate a web page with your own URL, name, description of what your group does, address, phone number, fax number and email button from your registration. You don't have to do anything. This single web page can then be edited later if you want to. However, if you want to build and maintain your own set of pages, this section of the manual is for you! Learning HTML is not much more difficult than learning a word processing program, and can be quite fun. Of course, don't forget that there are also lots of skilled HTML consultants in town to whom you can contract out Web page creation services. About HTML files. HTML files are always plain, unformatted text (ASCII) files. Such files can be created with any text editor or word processor or a web editor such as Arachnophilia. If you have a Macintosh you can use SimpleText or TeachText, which come free with your Mac, to edit text files. If you use a Windows PC you can use the Windows Notepad. Other computers have similar free text editors available. By convention an HTML file will end with the suffix ".html". Also by convention, HTML file names are usually in lower-case. Note that Windows and DOS systems, which have severe file name restrictions, truncate this suffix to ".htm", and often have upper-case file names. The HTML codes themselves are bracketed with angle brackets <like so>. Anything within angled brackets is assumed to be an HTML tag by the browser and thus is normally not displayed on-screen for the user to see. HTML codes are thus analogous to the codes used by word processors such as Wordperfect. (the "Reveal Codes" function) This raw HTML - a document marked up with these tags - is called the "source" file. Your browser takes this source file and creates the final marked-up copy for you to read.Back to top Choosing HTML ColoursHere is a site which lays out all the HTML colours, and provides the codes for them:http://www.visibone.com/colorlab/big.html Back to topCreating HTMLThere are three basic ways to create an HTML file:
Viewing the SourceIf you use Lynx, pressing the "\" key lets you view the raw HTML source for a document, which is a great learning tool. Netscape and Explorer and most other graphical browsers have similar "View Source" functions that let you see the unformatted HTML that makes up a given Web page. One of the best ways to learn how Web pages work is to look at a page you like and examine its source. Back to topWhat is a CGI?CGI stands for Common Gateway Interface. Basically a CGI is a software program or tool that links a Web server with some external service. For example, you might have a little program that keeps track of the number of times your page is viewed. This page counter could be a CGI.Here at the CommunityNet we make extensive use of CGIs on our system, and provide a small library of free CGIs for the use of any organization that wants one. The CGIs are documented in our Cool Stuff file, at: http://www.vcn.bc.ca/help/guides/coolstuff.html Back to topHTML Tags
HTML tags generally have two parts - the opening tag and the closing tag. Take the example below.
On a browser this HTML code would look like this:
Notice how this works. The opening tag, <B>, tells the browser to make the text boldface. The closing tag, </B> tells the browser to stop using boldface. In other words the attributes of the text between the opening and closing tag are defined by the opening tag.
Case sensitivity HTML is not case sensitive. Therefore <B> and <b> are equivalent tags. HTML is often typed in uppercase for legibility, however. Uppercase tags are easier to spot in a document than lowercase or mixed case tags.
<HTML>…</HTML> Indicates the document is an HTML document. Note that at the very end of the document is a </HTML> tag. This is a closing tag. Most HTML tags are followed by a closing tag. The text between the opening and closing tags is controlled by the opening tag. Think of the text as being within a container. You don't have to include the <HTML> tag at the start and end of a document, but it's good form to do so. <HEAD>…</HEAD> The second tag indicates the header portion of the document. This is also optional, and is generally the section of the document used to store information about the file that's normally not directly viewed by the user, such as the document's title.<TITLE>…</TITLE> Each document should have an informative title explaining its purpose in life. The title of a document is usually displayed at the top of the screen or on the title of the window bar of the browser, separate from the text of the document itself. Any text enclosed in <TITLE> tags is the title. Titles should only be a brief line of text. <BODY>…</BODY> Now the actual document begins! The <BODY> tag is yet another optional tag, but is used to indicate the actual text of the document. This actual text of the document is displayed by the browser.
<Comments>…</COMMENTS> OR <!-- -->None. At times you might want to put a comment into a document that you don't want others to see. For example, you may write the current date into every document so you know when you last changed it. There's no need to make this date visible to viewers, so you could put it in as an HTML comment. <!-- and --> has the same effect. You can only view the text when you view the source for the file.
<META> None Embeds information about the document. You can use the tag with the following attributes provided you use it within the bounds of the <HEAD> element:
This gives a search engine a description to use.
This gives a search engine help for indexing
Headings <H*>…</H*> HTML supports six levels of headings. These headings are used to separate out important headings from the body of text of a document. To choose a heading level, replace the * with a number between 1 to 6. Here is a top level heading, Heading 1. <H1>This is the first level heading</H1> This heading will appear differently depending on what browser you have. Generally, level 1 headings are shown in large bold type onscreen. The remaining 5 headings are shown in correspondingly less dramatic type. <H2>This is a level 2 heading</H2>
<FONT SIZE = "*">…</FONT> You may specify an absolute height such as <FONT SIZE = "4"> or you may specify a size relative to the basefont using increments <FONT SIZE = "+2">
<BIG>…</BIG> Like the <FONT> tag, this tag enlarges the base font size.
<I>…</I> This is similar to our friend <B>. However the <I> tag italicizes text. At least, it does so in browsers capable of italicizing text. Some browsers can't display italics and so underline the text.
<P> The <P> tag is a paragraph marker, and is a bit different from the preceding tags. Normally HTML documents flow on and on and ignore any carriage returns you may put in. This is totally unlike most word processors. Not only that but your browser will collapse multiple spaces or blank lines into a single space. (you can put all the blank lines - carriage returns - you want into your HTML source file, and it'll appear as a single space when viewed by a browser. Often HTML documents are spacious and use tabs to make it easier to understand them when the time come to change them.) If you want to indicate a blank line you must use the <P> tag. The closing </P> tag is not essential.
<BR> You've probably noticed that inserting a paragraph break puts in a whole blank line. This is obviously undesirable in some instances, where you simply want a new line to start. The line break tag is used for this purpose. Thus:
<BLOCKQUOTE>…</BLOCKQUOTE> Sometimes you'd like to be able to indent text in from the left side of the screen, much as this document does throughout. Unfortunately basic HTML has no provisions for tabbing and so on, but does have a tag called "blockquote". Block quotes are intended to be used when you quote a sizeable portion of someone else's work. Normally when you do that in a print document the text is indented from the left side. So, by using the blockquote tag you can move things in from the left margin. This is not using the code precisely as it was intended, but it achieves an effect on virtually all browsers, so why not? <HR> … Horizontal Rules Most browsers can draw horizontal lines across the screen. This is one of those tags with no closing tags.
<PRE>…</PRE> Preformatted Text. Another useful trick is putting in preformatted text. As noted above, your browser will collapse any lines of spaces to a single space, and any blank lines of text to a single space. This can be a problem if you want to display something like a table of text that has been formatted with spaces to make things line up. The answer? The <PRE> tag, which allows you to insert preformatted text. When you put in preformatted text the browser won't collapse any spaces. Graphical browsers also usually display preformatted text with a typewriter-style font. <PRE>
This is
preformatted text.
Notice how
text lines up?
</PRE>ListsUnordered Lists A common element of many Web pages is a list of items, marked with bullets. (dots) HTML can do this for you automatically.
This code is displayed by the browser like this:
The <UL> tag specifies an "unordered list." The <LI> tag specifies a "list item". And the closing </UL> tag marks the end of the list.
Ordered Lists Sometimes you want numbered lists, though. HTML supports them too!
This becomes:
Definition Lists Maybe you want a list of words with their definitions indented and following:<DL> This becomes:
Special CharactersSince the angled brackets < and > and the quotation mark " have special meaning in HTML, how can you use these characters within a document? Obviously if you were to type an angled bracket into a document the browser would assume you were trying to put in a tag and things would break down. HTML solves this problem by using "escape sequences". An escape sequence starts with the ampersand (&) character and ends with a semicolon (;). Unlike the rest of HTML, these escape sequences are case sensitive! In other words, uppercase differs from lowercase. < is < > is > & is & " is " Accents and DiacriticalsOne very useful feature for a "World Wide" Web is the ability to support non-English accents and diacritical characters. Since different computers - PCs, Macs, UNIX systems - all handle accents differently, HTML has its own way. HTML accents are similar to special characters. Here are a few HTML diacriticals used in French.
For a complete list of all the non-English diacritical characters, check this URL: http://www.vcn.bc.ca/help/guides/latin1.html |
|
|
|||