 |
|
|
|
|
HTML TutorialHTML is an acronym meaning HyperText Markup Language. It is a way of adding various attributes to plain text files which are published on the World Wide Web. HTML lets you mix graphics with text, change the appearance of text, and create hypertext documents with links from one document to another. HTML is based around the concept of "tags". A tag looks like this: <B>. Most HTML functions have an opening and closing tag -- the tag applies to all text in between. For example, <B> is the tag for "bold". Any text between a <B> and a </B> will be displayed in bold type when the document is viewed by the appropriate browser. So <B>hello world</B> would be displayed as hello world. You can type these tags directly into your document, or assign them to a text editor macro. To put the text in the above example in italics, you could type <I>hello world</I> in your document. The HTML language has a number of different "flavors", or specifications. They are distinguished by numbers that follow the acronym, as in HTML 3.2. The first number is the version and the second is the sub-version. The version used today is HTML 4, which is recognized by all the mainstream browsers like Internet Explorer, Firefox, and Opera. There is also an extended version of HTML, XHTML, that is supposed to replace HTML, but this has not still happened as most Web developers still adhere to HTML 4. One of the key strengths of HTML is that a document conforming to the HTML standard can be understood no matter what sort of software or computer the reader has. For example, the same page can be interpreted by someone using Internet Explorer in Windows, someone using Konqueror on Linux, or even a blind person using special software.
Creating your first HTML documentThis tutorial will take you through creating your first HTML document. I will assume you are using your favorite text editor. Here we'll create a simple personal home page. 1. Start your editor with a blank document. Type the following lines.
2. The first thing I recommend is saving your work frequently. This will make it easier for you to recover from mistakes. 3. All HTML documents must have a title. You type this directly into your document, within the TITLE tag. I have used "My first page" as a title. The document title will appear in the caption bar of most browsers when your document is viewed; it will not otherwise be visible to users. 4. The content of your document must come after the <BODY> tag. Everything before the <BODY> is information that describes your document to Web Browser and Server software. To enter information in your document that is visible to the user, position the cursor between the <BODY> opening tag and the </BODY> closing tag. 5. It often pays to give your document a heading that will be visible to the user. In most cases, this will be the same as or similar to the document title. To create a heading for your document, just type the text you want for the heading, and surround it with the tags <H1></H1>. You can use from H1 for H6 for headings. H1 is the largest size heading, which you would normally use at the start of a document. H6 is very small. 6. We'll divide our document into two sections: Who Am I?, and Hobbies and Interests. Each of these sections will need its own heading. Let's do Who Am I first. Type the text: Who Am I? into your document. This time, instead of using the H1 tag, we'll use the next size down, H2. 7. Now we need to enter some information into the document. A paragraph about who you are and what you do is probably enough. To create a paragraph, insert a <P> tag. Next type the paragraph. It will probably make things clearer for you if you get in the habit of putting a </P> closing tag at the end of each paragraph, although this is not required. 8. At this stage, you should have a document containing two headings, and a paragraph of text. Now is probably a good time to take a look at how this will actually be displayed on the World Wide Web. To preview your work, save your work with the extension ".htm" or ".html". Now start Windows Explorer, navigate to the folder where the file is stored, and double-click it. Internet Explorer will start and will show the page you created. Notice the difference in size between the H1 and H2 text. To return to your document, just minimize your browser and switch to your editor. You don't have to start a new copy of your browser every time. 9. Follow steps 6-8 again to create another paragraph for your Hobbies and Interests. 10. By now, you should have a document containing two paragraphs of text, each with its own heading. Let's provide a visual clue to the user to separate these two paragraphs further. Position the cursor before the <H2> tag that starts the heading for the second paragraph. Insert an Horizontal Line tag, <HR>, at the cursor position. Preview your document again. To do so, save your work and switch to Internet Explorer. Press F5 to refresh the display. There should be a recessed horizontal line dividing the two paragraphs. 11. Congratulations! You have created a basic HTML document! Here is the result of your work.
Adding Hypertext LinksHTML documents are "hypertext" documents. This means that they contain text that permits browsers to access additional information when the user requests it. Browsers indicate that text is linked to more information by displaying it in a different color and underlining it. When a mouse is used to click on the highlighted text, the browser retrieves the information associated with the link. HTML uses the "A" (or anchor) tag to indicate a hypertext link. The "HREF" attribute is used to give the URL or Internet address of the other document. For example, a link that would instruct a browser to fetch and display another HTML hypertext document looks like this: <A HREF= "http://www.widgets.com/faq.html">View the FAQ</a> The browser would display the text between the first right-angle bracket and the "</A>" end tag. The user would see only the words, "View the FAQ". They would be highlighted as shown below: The text within the quotes is a "Uniform Resource Locator" or URL, and is not displayed by the browser. Uniform Resource Locators are pointers to information. In this case the Uniform Resource Locator points to another hypertext document. URLs tell the browser how the information is to be obtained and where it is located. The general format of a URL is : http://host-domain/path/filename The "http" prefix indicates the protocol used to retrieve the document. In addition to "http", other protocols can be used as, for example, FTP: ftp://ftp.archives.com/lastversion.zip retrieves a file from an FTP server. An anchor like <A HREF="mailto:..."> would not retrieve a document, but instead it would bring up the application associated with Internet mail, allowing the user to send mail messages to the address that follows the "mailto" attribute. Example: <A href="mailto:george@harrison.net>Mail to George</A> would give: There is a type of anchor that can be used to permit text within an HTML document to be the destination of a link. This is useful for creating links that refer to text inside the current document. A "point and click" table of contents, for example, is created by using internal links. In destination anchors, the attribute "NAME" is included in the anchor tag as shown below: <A NAME="astro">Astronomy</a> is a very old branch of science. This would give the word "Astronomy" the anchor name "astro". The following HTML code creates a link to the anchor referenced by that anchor name: <A HREF="#astro">Click here to learn about astronomy</a> Clicking on the displayed text, "Click here to learn about astronomy", would move the browser's viewing cursor to the place in the current document beginning with the word "Astronomy" because it has the anchor name "astro". The "#" sign is used to indicate that a link is a reference to a named anchor within a document. Using named anchors is useful for creating a table of contents. The table of contents would have "href" links to the appropriately named anchors that mark topics within the body of the document. I will show you how to create links that: · take the user to another document in another website · take the user to another point within this document · let the user download a file · let the user send mail to you · take the user to another document in your own website 1. Start your editor and open a new document. You must create a Web page as was described in the preceding tutorial. If you've just completed this tutorial, keep working in that document. 2. The first link we'll create is to an HTML document somewhere else on the Internet. The document we'll use is the BBC home page at http://www.bbc.com. Each hypertext link is composed of two parts: the URL of the document, and the description of the link. The tag used to create links is <A>. It must be closed with </A>. The format of an A tag is: <A href="URL of the document">description of the link</A> In this case the URL is http://www.bbc.com The description lets you specify the text that the user will click on to follow the link. We'll use "BBC home page" here. Your finished link will look something like: <A HREF="http://www.bbc.com">BBC home page</A> 3. Preview the document to see the results of Step 2. If you're connected to the Internet, when you click the text "BBC home page," you will be taken to this page. 4. Next, we'll create a hypertext link that will take the user to another place in the same document. This is a little more involved, because we have to create a destination for the link, as well as the link itself. To create a destination target for a hypertext link, you'll be using a variant of the <A> where the description is missing. Also, instead of the "href" attribute it uses the "name" attribute. This name should be something that makes sense if you want to refer to the link from another document. Position the cursor at the point you want users to jump to, and type something like this: <A NAME="a_target"></A> Next, move to the place in your document where you want the users to click to go to the destination target. Type an <A> tag with the text you want the user to click on in its description. The "href" attribute should have the value: "#a_target". The tag should look like this: <A HREF="#a_target">Go to the test target</A> Preview this again, to test the effects. 5. Now we'll create a link that will let the user download a file. There are a number of ways to do this, but I'll show you the way I think is easiest. As an example, we'll create a link to download the latest version of the your text editor. We'll suppose it is available at the following URL: "ftp://www.goodedit.com/pub/editor/textedit.zip" To create a link to this file, position the cursor at the point where you want to insert the link, and type the following tag: <A HREF="ftp://www.goodedit.com/pub/editor/textedit.zip"> Download the text editor</A> 6. The next type of link we'll create will let the reader send e-mail to you (or anyone else you like). To create an e-mail link, position the cursor at the point where you want to insert the link. You will use as "href" your e-mail address, prefixed by "mailto:", and as a description any text you like. Once you have entered your e-mail address and the link description in the tag, it will look something like this: <A HREF="mailto:myself@mydomain.com">Mail me</A> 7. The final type of link we'll create is to a document on your web site. To create a hypertext link to another document on your web site, you will proceed as you did to make an external link but omitting the "http://website-name/" portion of the "href" attribute. Suppose you made a page about gardens. To direct users to that page, you can use: <A HREF="gardens.htm">See the garden page</A> Note that this link uses a relative reference "gardens.htm", rather than an absolute reference "http:/www.mydomain.com/gardens.htm". This link will always jump to gardens.htm, no matter what web site it's stored on (provided, of course, that a file called gardens.htm exists in the same directory).
Adding PicturesThis tutorial will assume that you have some .GIF or .JPG files in your system to use for images. For the sake of training, I'll suppose the image is called "happy_duck.gif". 1. Start your editor and create a new Web page. 2. The first type of picture we'll create is called an in-line image. This is a picture that displays inside your document, but doesn't do anything. If the reader clicks on it, nothing will happen. To create an in-line image when the image file is stored in the same folder as the page you are creating, position the cursor at the point where you want to insert the image, and type:
<IMG SRC="happy_duck.gif">
Preview your document to see the effects of this. (NOTE: there must be an image called "happy_duck.gif" for this to work, or you will just be staring at a hollow square!). 3. If the image is stored in a remote server, so that its URL is, for example, "http://www.pictures.com/dick/happy_duck.gif", your IMG tag will be:
<IMG SRC="http://www.pictures.com/dick/happy_duck.gif">
4. As well as these "static" in-line images, you can create an image that is also a hypertext link. When the reader clicks on it, they follow the link in the same way as if they clicked on a text link. To create a hypertext image, position the cursor at the point where you want to insert the image, then type an <A> tag as you was instructed before. You must include in the "href" attribute the document the reader will be taken to when they follow the link. As with the image, this can be a file on the current system or an external link. In this case, you will not write a description of the link, but you will replace the description with an IMG tag. Suppose that your happy duck picture is a big one (it has many pixels), resulting in an also big file that will make that your page load very slowly. You can make a thumbnail of the picture (a very reduced version of it), and let the user retrieve the original through a link. We'll call "small_duck.gif" the thumbnail. The link will look as follows:
<A HREF="happy_duck.gif"><IMG SRC="small_duck.gif"></A>
You can also add some text to describe the link. If you do, the image will have the text next to it, and the reader can also click on it to follow the link.
<A HREF="happy_duck.gif"><IMG SRC="small_duck.gif"> A picture of my duck </A>
Note that the image element has no closing tag. Text that is adjacent to an image is by default aligned to the bottom of the image. The "align" attribute can be used to alter the placement of adjacent text. The HTML code, <IMG ALIGN="top" SRC="sailboat.gif"> The good ship Freshwind will cause the text, "The good ship Freshwind", to be displayed aligned at the top of the image. Use of align="middle" will result in text alignment at the image's vertical center. The "alt" attribute is used for alternative text that will be displayed by browsers that are unable to display images or by special programs used by handicapped people. For example, the following HTML, <IMG SRC="sailboat.gif" ALT="The ship Freshwind">, will cause the words "The ship Freshwind" to be read aloud by software for blind people.
Making listsYou can use HTML to display lines of text as a list. Text may be displayed as a numbered or an unnumbered list. A list is bounded by an opening and a closing tag. Numbered and unnumbered lists have different tags. Paragraph separators are not required to separate the individual list items. Each list item begins with its own tag which serves as a separator. This "list item" tag is the same for numbered and unnumbered lists. The HTML for an unnumbered list looks like this: <UL> <LI> List item one <LI> List item two <LI> List item three </UL> A browser might display the unnumbered list as follows:
The HTML for a numbered list (also called an "ordered" list) looks like this: <OL> <LI> List item one <LI> List item two <LI> List item three </OL> A browser might display the numbered list as follows:
Lists may be nested, i.e., lists within lists are permitted.
Text Formatting by FunctionUsing HTML, you can indicate formatting for several different kinds of text functions. The following are some text functions and the HTML tags used to display them: · Extended quotation (usually several lines of quoted text): <BLOCKQUOTE> </BLOCKQUOTE> · Address (usually an E-mail address): <ADDRESS> </ADDRESS> · Citation (as in referring to another document): <CITE> </CITE> · Strong (indicates text is important): <STRONG> </STRONG> A browser might display this HTML text, <ADDRESS>george@harrison.net</ADDRESS> like this: george@harrison.net
Text Formatting by Font StyleYou can also indicate formatting by font style, as you would in a word processor. That is, text can be displayed as italic, bold, etc. Some of the styles you can use, along with their HTML tags are as follows: · Bold: <B>text is displayed in bold face type</B> text is displayed in bold face type · Italic: <I>text is displayed in italic type</I> text is displayed in italic type · Underline: <U>text is displayed as underlined</U> text is displayed as underlined · Fixed width: <TT>text is displayed in a fixed width font</TT> text is displayed in a fixed width font
Forms in HTMLWhen a Web page is used to enter data, as for example in an on-line business transaction, a form is normally used. HTML forms allow the Web page designer to create input screens that are used for such things as questionnaires, product ordering forms, and so on. How are the special items on this form created? There are a number of different types of fields which can appear on forms, including text entry fields, lists, radio buttons, check boxes, and buttons. HTML tags are provided to define each of these field types in a document. Each form must be enclosed by <FORM...> ... </FORM> tag pair. A number of attributes are required to specify how the data in the form is processed when it is submitted. For example, the form might use the following FORM tag: <FORM method="POST" action="/cgi-bin/orders.cgi"> ... Remainder of form definition goes here. ... </FORM> When a user fills in a form and submits it for processing, the data is encoded in a special format called by a standard known as Common Gateway Interface (CGI) and sent to the server which then passes it onto the program or "CGI script" specified by the ACTION attribute. The use of CGI scripts is explained elsewhere in this site. Suffice it by now to say that the general function of these scripts is to decode the form data which they receive and based on the information they extract, determine what actions to take. To further elaborate this example, suppose that this form has five main fields: a list, a text field, a set of radio buttons, and submit and reset buttons. A list such as the one in this form is created using the SELECT element of HTML. This particular example might look like this: <FORM method="POST" action="/cgi-bin/orders.cgi"> <P>Color of the widget:<BR> <SELECT name="p"> <OPTION>Red <OPTION>Blue <OPTION>Yellow <OPTION>Purple <OPTION>Green <OPTION>Fuchsia </SELECT> ... Remainder of form definition goes here. ... </FORM> A <SELECT> ... </SELECT> tag pair can contain multiple <OPTION> tags defining the elements which make up the list. The exact manner in which the form is rendered is determined by the browser. The MULTIPLE attribute if used further defines the behavior of the list. It allows the user to select more than one item from the list; if omitted, only a single item can be selected. The value specified with the NAME attribute is used during the encoding phase when the form data is submitted for processing. The next field is called a TEXTAREA. Such fields allow multiple lines of text to be entered by the user. In this particular example, the following HTML code would be used to create the text field: <P>Shipping Address:<BR> <TEXTAREA name="address" rows="4" cols="35"> </TEXTAREA> This creates a text field 35 characters wide by 4 lines high. The exact manner in which this field is rendered is determined by the browser. Often, horizontal and vertical scroll bars are included to allow the user to scroll the text as it is entered. If text is included between the <TEXTAREA> ... </TEXTAREA> tags, it is used to set the initial contents of this field. As with the SELECT tag, the NAME attribute is used during the encoding phase. Following the text field is a standard set of radio buttons. Only one of these can be on at any one time. The following code is used to create these buttons: <P>Payment Method: <INPUT name="pay" type="radio" value="visa"> VISA <INPUT name="pay" type="radio" value="mc"> Master Card <INPUT name="pay" type="radio" value="cod"> COD The INPUT tag is used to create a number of different fields types, as specified by the TYPE attribute. The VALUE attribute is used for encoding purposes, as is the NAME attribute. This attribute is also used to define the grouping of the radio buttons; any RADIO type input field with the same value for NAME as another RADIO type field is considered to belong to the same group implying that only one of those radio buttons can be selected at one time. The form ends with two standard looking buttons, one labelled "Send Order" and the other "Reset". These buttons are defined using the following HTML code: <P><INPUT value="Send Order" type="submit"> <INPUT type="reset" value="Reset"> A RESET type input field creates a button called "Reset". If this button is clicked by the user, any values entered into any field of the form are cleared and the form's initial state is restored. A SUBMIT type input field creates a button as well. By default, a submit button is called "Submit Query", although in this case the VALUE attribute is used to provide the button with an alternative name. When the user clicks a submit button, the current data existing in the form is encoded into CGI format and submitted to the form's specified CGI script for processing.
Creating HTML tablesThis section gives an overview of how tables are created in HTML. The basic approach is to define a structure which provides information about each row of a table and each cell in that table. Tables can also have headers, both for the table itself (called the caption) as well as for the rows and columns. HTML tags are used to describe all this information. As an example, take a look at this example that demonstrates a simple table listing products stored in two separate warehouses, along with the total number of products in each warehouse as well as the combined grand total. All tables must be enclosed in <TABLE> ... </TABLE> similar to forms. All other tags must appear inside these enclosing tags. The table has a title or "caption" associated with it. This is an optional element which can appear inside a table definition: <TABLE BORDER> <CAPTION>Product Inventory</CAPTION> ... Remainder of table definition goes here. ... </TABLE> The BORDER attribute of the TABLE tag specifies whether borders should be drawn around the cells of the table. A value can also be supplied with BORDER to specify the width of the border when the table is rendered. The default is 1; to define a table without borders, specify BORDER="0". The individual rows of a table are each enclosed inside <TR> ... </TR> tags. There are options which control how the data in each cell of a row is aligned within the cell horizontally and vertically and how it is formatted, for example, whether or not the text can be wrapped in the cell over multiple lines. It is also possible to specify how many columns and rows an individual cell spans. Other options permit, for example, to specify the exact width of a cell in pixels. The first row of the table consists entirely of table headers. It is defined with the following HTML code: <TR> <TH>Product</TH> <TH>Warehouse 1</TH> <TH>Warehouse 2</TH> </TR> Each header cell is defined with <TH> ... </TH> tags. Each such tag pair appearing within a row definition represents a cell in that row. Text enclosed by this pair is automatically boldfaced and centered within the cell when the table is rendered. Other table cells are created in a similar manner, using the table data <TD> tag instead of the <TH> tag. The second row of the table, for example, can be defined using the following HTML code: <TR> <TH>Red widget</TH> <TD align="center">8</TD> <TD align="center">12</TD> </TR> The <TD> tag can take optional attributes specifying characteristics about an individual cell. In this case, the ALIGN attribute is used to center the contents of the cell. Without this option, cell data is left aligned. This differs from header cells defined with <TH> tags which are centered by default. Each <TD> ... </TD> appearing in a row definition represents a cell in that row. The total of table header tags and table data tags in a row definition represents the number of cells in that row. The other rows in the table are defined in exactly the same way, with only the data changing as required. The exception is the last row, which contains just two cells instead of three. One of the attributes which can be specified with a cell definition is the number of columns it takes up. In this case, the second cell of the last row, containing the grand total value, has been defined to take up two columns of the table instead of the normal single column. This is done as follows: <TR> <TH>Grand Total</TH> <TD align="center" colspan="2">99</TD> </TR> The COLSPAN attribute in the <TD> element above specifies that this cell should span two columns. A cell can also be modified with the ROWSPAN attribute to specify the number rows the cell spans, and both COLSPAN and ROWSPAN can be used at the same time.
|
|
|||||||||||||||||||||||||||||||
