Basic text | Special Characters |
Images | Links | Tables This page describes how to make your web page by writing the html code directly. Opening, closing and setting up your web page.The file names of almost all web pages must end in file name extension ".html" or ".htm" —otherwise browsers won't recognize them as web pages. Why such a funny combination of letters? HTML stands for "Hyper Text Markup Language" and that's the "language" web pages are written in, and enables clickable links to be placed on a page. Web pages are viewed in web browsers, which are software programs especially designed to interpret the html code. Examples of browsers are Internet Explorer, Firefox. Netscape, Konqueror, Safari, IBrowse, and Opera. Web pages are pure text only, and can be viewed and edited in any text editor, such as Notepad or AppleText. If you make your web page in a word processor (AppleWorks or Wordpad) rather than a text editor, be sure to save it with the "text only" option, or else a browser won't see it as a web page. Web pages have within them what are called control tags, which are instructions to the browser about how to make the page appear. Control tags do all of the work in a web page and are always enclosed in <angle brackets>. These are the same as the "less than" and "greater than" symbols in math and they appear on the keyboard over the period and comma keys. Tags do almost everything in a web page. Most of what follows is a vocabulary of what can be in those tags and what each of them do. This is perhaps a good point to mention that browsers will always interpret any number of spaces or carriage returns in a row as one single space. This means you are free to arrange your code in a way that it can be easily edited later on. Skip a line or two whenever you wish, indent all you like; the browser will ignore it all, but you will be better able to read and edit your own code. All the browser cares about is the order in which the code appears. There are two types of tags, those that start something <tag> that needs to be ended </tag>, and those that just ask for something to be done, thus stand alone with no end tag <tag>. <html> - starts the web page. </html> - ends the web page. <head> and </head> - these go right after the <html> and define the page header. Nothing in the header will appear on the web page. <title> and </title> - enclose your page title between these and put them between the page header tags. The title appears on the top of the browser window or on the current browser tab, but it is not part of the page proper. <body> - this comes right after </head> and begins the body of the web page, the stuff you'll actually see on the web page. </body> - this ends the body of the page. So, your web page will be structured like this:
Adding Basic Text content to the web page.The <p> tag is used to begin a paragraph. The ending </p> tag is optional; when a new paragraph begins, the previous one is assumed to have ended. The <hn> tag is used to create headline text, where n is any number 1 thru 6, 1 being the largest. The first line at the top of this page is <h4>. The <hn> tag must be ended with an </hn> tag.
The <br> tag is used to break a line of text, like a carriage return on a typewriter. No blank line is inserted. If you want a blank line, use <br><br> which adds another carriage return. There is no ending tag for <br>. <b> is used to bold all text until a </b> tag is reached. <i> is used to italicize all text until a </i> tag is reached. <u> is used to underline all text until a </u> tag is reached. The above can be used in any combination, but should be properly nested. Like this: <b><i><u>bold, underlined and italicized text</u></i></b> The <font> tag is used to change the font, color and size of all text until the </font> tag is reached.
An example: The <hr> tag generates a horizontal rule. It may be modified by: color="colorname", width="fixed number of pixels",
width="percent of page or table cell width", or size="1 thru 6", which determines the "fatness" of the line. The hairline rule
below is made like this: Adding Special Characters to the web page.Several common characters like & and " (quotation marks) have special meaning for web browsers. Therefor if you want to use them in the text of a page, they must be "created" with special codes. Additionally, there are codes for characters you won't find on any keyboard but that you might want to use in your page, like the copyright symbol. These are CODES and NOT TAGS, so do not use the < and > with them. All Special Characters begin with an "&" (ampersand) and end with a ";" (semicolon). There are hundreds of them, and if you Google "html special characters" you'll find whole web pages of them, but here are some examples:
Adding Images to the web page.Although web pages may contain paragraphs of text, they don't actually contain images; rather they have instructions to the browser to
go get an image to display on the page. Thus images are always separate from the page itself. An image is added to a web page with a tag
like this:
So, to display an image file MyCat.jpg in the Pix folder, centered on the page, with 20 pixels of open space on the right and left hand sides, and
displayed on the page at 400 pixels wide, with some alternate text in case the picture didn't display correctly, you would use: Adding Links to the web page.Links are what turns regular text into hypertext. Anything can be made into a link, an image, a table, or any amount of text. Making something a link means that when you click on it something happens, depending upon what kind of a link you made.
All links are made the same way, starting with <a href="..."> and ending with </a>. Everything in between is what appears as the link on the web page, and although this can be anything at all, it's usually a good idea to have it relate somehow to where the link will be taking you. Between the quotation marks in the <a href=" "> tag goes whatever you want to link to, another web page, an image or an email address. To create a link to load this page, you would write If you are linking to an email address, you have to add "mailto:" immediately after the first set of quotation marks, thus: Notice how the "mailto:tom@snakeroot.net" that's inside the <a href=" "> tag appears in the lower left of your browser window when you hover over the link. That tells you what will happen if you click on the link. All links work that way. Try hovering over "Cheat Sheet". Adding Tables to the web page.Tables are very useful for positioning a mixture of items on a page. Think of a table as a grid, with rows and columns. Each area where a row and a column intersect is called a cell. A table can have as many rows and as many columns as you wish. A table with only one row and one column has but a single cell. This whole web page, for example, is entirely within a single cell of a table, in order to control the text's position in the browser window (centered) and the maximum length of lines of text (I chose 600 pixels, so it will be narrow enough to display properly even on old monitors at low resolution). Tables can also be used to display data in a web page, in a manner similar to a spreadsheet. Almost any kind of data, alone or mixed, including images and even other tables, can be put into a table cell. The <table> tag creates the table and the </table> tag ends the table. The <table> tag may be modified in many ways, thus giving tables their power. All modifiers are optional; if absent default values are assumed. Here are some examples:
Once you have a table set up, it needs at least one row, created with the Table Row tag <tr>. Once you have a row established, you can add any number of Table Data <td> ... </td> cells in the row. The contents of each cell goes where the ... are in this example. Contents can be images and / or text in any combination. End the row with </tr> once you have all the <td> ... </td> combinations you need in the row. Repeat the previous two steps until you have all the rows you want. Then end the table with a </table> tag. So the code for a simple table centered on the page, with a border 2 pixels wide, and with two rows of three cells each would look like
this:
Getting a little fancier, we can add color to row 2 cell 2 by adding bgcolor="aqua" to its <td> tag, and add cellpadding="5" and bgcolor="violet" to the table tag and we get this:
|