 |
 |
 |
 |
|||||||
 |
 |
 |
|
|||||||
|
|
Brief Guide To HTML
Web pages are written using Hypertext Markup Language (HTML). A browser such as Netscape or Internet Explorer downloads a web page from the Internet, translates the HTML and displays the content on the screen. In essence, HTML is a series of instructions on how the browser should display your text and images. A good example would be if you were explaining to someone what your essay should look like on the screen. Normal typed paragraph:
Explaining how the paragraph looks
Same paragraph in HTML
HTML achieves its goals of standardizing the look of a web page on any browser on any computer (IBM PC or Apple) by using standard tags. All HTML instructions or tags are found within lesser than ("<") and greater than (">") brackets, an example is shown above <B>...</B>. Almost all instructions have a beginning tag, such as, <B> for "begin bold," and an ending tag, such as </B> for "end bold." Any text appearing between the two tags would be bolded. Most ending tags are similar to the opening tag but are preceeded with a "/". Please note that it does not matter if the text inside tags are lower or upper case, or even a mixture of the two; this tutorial, however, places the tag in upper case for clarity. Elements of a Web Page There are three basic elements to a web page. The top of the file (called the header of the page) contains information about its content, what version of HTML to decode it with, any scripts, background colours and images, and information for Search engines. The middle of the page (called the body of the page) contains your text and images which appear on the screen. The end of the file simply closes the HTML page. Every HTML page begins with the <HTML> tag and ends with </HTML>. The top of file information is all enclosed in the <HEAD> and </HEAD> tags. An example is below: <HTML> The above places the title of the page into the top of the browser. It is also the name of the document that will be placed in the "bookmarks" or "favourites" menu of your browser should you wish. The next tag is the <BODY> tag. Some tags can contain extra parameters that give the tag more meaning and functionality, in fact some tags will not function without those extra parameters. The <BODY> tag can contain information on the image to be displayed as your page's background, or alternatively the solid colour of the page, colour of the text, links and visited links. Below are two examples of the <BODY> tag: Example 1:
Example 2:
In the first example "someimage.jpg" will be placed in the background of your page, the text will be black and any links will be in blue. In the second, the background colour will be white and the text black. As you can see colours can be given in "hexadecimal" form, i.e. a numbering system which has 16 numbers (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F) instead of the regular 10 (decimal). A colour is formed by mixing different proportions of Red, Green and Blue (RGB). The number FFFFFF means Red value FF, Green value FF and Blue value FF, each of which is the maximum amount of the colour available. The result is similar to combining bright red, green and blue lights to create a composite white light. Most simple colours, including white, black, blue, red, can be referred to by the English name, but more complex colours will have to be inserted as a hexadecimal value. The end of the file contains the </BODY> and </HTML> tags. In between the <BODY> and </BODY> tags you can place your content. The following is a simple web page. Copy it, or type it into a text editor, such as Notepad on Windows, save it with the ".htm" or ".html" extension and view it in a browser, such as Netscape. <HTML> Placing Images in a Web Page First of all, place the image in the same directory as your web page. Images are placed into a web page using the <IMG> tag. This is one tag that does not need a closing tag and cannot function without the source or SRC of the image (filename). An example looks like this:
This tag will place "someimage.jpg" into the page with a height of 350 pixels and a width of 200 pixels. The image will be aligned to the left of the page allowing text to flow around it. Pixels are the units of measurement of a computer screen. Typically a computer screen is set at a resolution of 640 by 480 pixels. While you do not have to specify width and height for an image, it allows for more control over the placement of the image. Creating Links The advantage of HTML as opposed to printed materials is the ability to "hyperlink" text to other files, sites and so on. To link anything you must enclose the object (an image, or a piece of text) between <A> and </A> tags. Some examples of the <A> tag: Example 1:
Example 2:
Example 3:
Example 4:
The first example links the word "here" in a sentence to another web page called "myfile.html" in the same directory as the current file. The second example links the text "Heritage Web Site Project" to the exact web address, in this case http://www.heritage.nf.ca. The third set of tags surround an image. By clicking on the image you would be transported to "myfile.html." The last is a "mailto" tag. By clicking on the text, the browser brings up an e-mail window and allows you to e-mail the address specified in the tag (in this case someone@somewhere.com. All four place the destination in the HREF or Hypertext Reference parameter. Some Other HTML Tags We have included an HTML reference as an appendix, and you can find similar ones, along with more comprehensive tutorials, on the web. However, below is a list of common tags which might be useful: Bold <B>...</B> Italics <I>...</I> Font Size <FONT SIZE={number 1 - 6}>...</FONT> eg. <FONT SIZE=4>Test</FONT> Horizontal Rule <HR SIZE={in pixels} WIDTH={in pixels
or percent}> Line Break <BR> Centre <CENTER> ... </CENTER> Each paragraph should be enclosed in <P>...</P> tags. You can place comments in your files which are invisible to browsers. Comments can be helpful if you want to leave a reminder to yourself when you return to edit a file at a later date. Comments must be placed between <!-- and --> tags. An example of their use is shown below in the Tables section. Tables Tables are a convention used by web designers to retain some control over the way a page will look on a given browser. Because web pages are basically text pages with one column, tables provide the ability to divide a web page into several columns and rows. You will need to understand the basic functionality of tables to understand some of the HTML used in the templates that have been provided. The <TABLE> and </TABLE> tags must begin and end your table. To create a table with rows and columns, you first create a row (<TR> = Table Row) and then subdivide that row into cells (boxes) containing data (<TD> = Table Data). The browser will read that row and the number of data cells, and then make the assumption that each cell is actually a column in that row. The best way to explore this concept is to examine the following simple examples. Example 1: A table which has a width of 200 pixels in total , a 1 pixel border, and only has one row and one column. The text inside is "Hello World!" <TABLE WIDTH="200" BORDER="1">
Hello World! </TD> This table should look like:
Example 2: A table which has a width of 200 pixels in total , a 1 pixel border, and has one row and two columns. The text inside the left cell will be "Hello World!" and the second cell will contain the image "someimage.jpg". <TABLE WIDTH="200" BORDER="1">
Hello World! </TD> <TD> <IMG SRC="someimage.jpg" WIDTH="200" HEIGHT="350"> </TD> This table should look like:
Example 3: A table which has a width of 200 pixels in total , a 1 pixel border, and has two row and two columns. The text will be One, Two, Three and Four and will all be centred. <TABLE WIDTH="200" BORDER="1">
<CENTER>One</CENTER> </TD> <TD> <CENTER>Two</CENTER> </TD>
<CENTER>Three</CENTER> </TD> <TD> <CENTER>Four</CENTER> </TD> This table should look like:
File Formats HTML is straight text. In other words, if you use a word processor (such as WordPerfect or Word) to write your HTML document, you should save the document as ASCII text (or DOS text). This format does not have any extra codes that the word processor puts in If you do not save it as ASCII text, the file cannot be read by browsers. The files should also be saved with a .htm or .html extension so that browsers can recognize the file. |
||||||||
 |
||||||||||
