HTML Tutorial
Uploaded by
jonty777HTML Tutorial
Uploaded by
jonty777HTML Basics
Welcome to HTML Basics. This workshop leads you through the basics of Hyper Text Markup Language (HTML). HTML is the building block for web pages. You will learn to use HTML to author an HTML page to display in a web browser.
Objectives:
By the end of this workshop, you will be able to: Use a text editor to author an HTML document. Be able to use basic tags to denote paragraphs, emphasis or special type. Create hyperlinks to other documents. Create an email link. Add images to your document. Use a table for layout. Apply colors to your HTML document.
Prerequisites:
You will need a text editor, such as Notepad and an Internet browser, such as Internet Explorer or Netscape. Q: What is Notepad and where do I get it? A: Notepad is the default Windows text editor. On most Windows systems, click your Start button and choose Programs then Accessories. It should be a little blue notebook. Mac Users: SimpleText is the default text editor on the Mac. In OSX use TextEdit and change the following preferences: Select (in the preferences window) Plain text instead of Rich text and then select Ignore rich text commands in HTML files. This is very important because if you don't do this HTML codes probably won't work. One thing you should avoid using is a word processor (like Microsoft Word) for authoring your HTML documents.
What is an html File?
HTML is a format that tells a computer how to display a web page. The documents themselves are plain text files with special "tags" or codes that a web browser uses to interpret and display information on your computer screen. HTML stands for Hyper Text Markup Language An HTML file is a text file containing small markup tags The markup tags tell the Web browser how to display the page An HTML file must have an htm or html file extension
Try It?
Open your text editor and type the following text: <html> <head> <title>My First Webpage</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html> Save the file as mypage.html. Start your Internet browser. Select Open (or Open Page) in the File menu of your browser. A dialog box will appear. Select Browse (or Choose File) and locate the html file you just created - mypage.html - select it and click Open. Now you should see an address in the
dialog box, for example C:\MyDocuments\mypage.html. Click OK, and the browser will display the page. To view how the page should look, visit this web page: http://profdevtrain.austincc.edu/html/mypage.html
What you just made is a skeleton html document. This is the minimum required information for a web document and all web documents should contain these basic components. The first tag in your html document is <html>. This tag tells your browser that this is the start of an html document. The last tag in your document is </html>. This tag tells your browser that this is the end of the html document. The text between the <head> tag and the </head> tag is header information. Header information is not displayed in the browser window. The text between the <title> tags is the title of your document. The <title> tag is used to uniquely identify each document and is also displayed in the title bar of the browser window. The text between the <body> tags is the text that will be displayed in your browser. The text between the <b> and </b> tags will be displayed in a bold font.
Example Explained
HTM or HTML Extension?
When you save an HTML file, you can use either the .htm or the .html extension. The .htm extension comes from the past when some of the commonly used software only allowed three letter extensions. It is perfectly safe to use either .html or .htm, but be consistent. mypage.htm and mypage.html are treated as different files by the browser.
A good way to learn HTML is to look at how other people have coded their html pages. To find out, simply click on the View option in your browsers toolbar and select Source or Page Source. This will open a window that shows you the actual HTML of the page. Go ahead and view the source html for this page.
How to View HTML Source
HTML Tags
What are HTML tags?
HTML tags are used to mark-up HTML elements HTML tags are surrounded by the two characters < and > The surrounding characters are called angle brackets HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag is the end tag The text between the start and end tags is the element content HTML tags are not case sensitive, <b> means the same as <B>
In HTML there are both logical tags and physical tags. Logical tags are designed to describe (to the browser) the enclosed text's meaning. An example of a logical tag is the <strong> </strong> tag. By placing text in between these tags you are telling the browser that the text has some greater importance. By default all browsers make the text appear bold when in between the <strong> and </strong> tags. Physical tags on the other hand provide specific instructions on how to display the text they enclose. Examples of physical tags include: <b>: Makes the text bold. <big>: Makes the text usually one size bigger than what's around it. <i>: Makes text italic.
Logical vs. Physical Tags
Physical tags were invented to add style to HTML pages because style sheets were not around, though the original intention of HTML was to not have physical tags. Rather than use physical tags to style your HTML pages, you should use style sheets.
HTML Elements
Remember the HTML example from the previous page: <html> <head> <title>My First Webpage</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html> This is an HTML element: <b>This text is bold</b> The HTML element begins with a start tag: <b> The content of the HTML element is: This text is bold The HTML element ends with an end tag: </b> The purpose of the <b> tag is to define an HTML element that should be displayed as bold. This is also an HTML element: <body> This is my first homepage. <b>This text is bold</b> </body> This HTML element starts with the start tag <body>, and ends with the end tag </body>. The purpose of the <body> tag is to define the HTML element that contains the body of the HTML document.
Nested Tags
You may have noticed in the example above, the <body> tag also contains other tags, like the <b> tab. When you enclose an element in with multiple tags, the last tag opened should be the first tag closed. For example: <p><b><em>This is NOT the proper way to close nested tags.</p></em></b> <p><b><em>This is the proper way to close nested tags. </em></b></p> Note: It doesn't matter which tag is first, but they must be closed in the proper order.
You may notice we've used lowercase tags even though I said that HTML tags are not case sensitive. <B> means the same as <b>. The World Wide Web Consortium (W3C), the group responsible for developing web standards, recommends lowercase tags in their HTML 4 recommendation, and XHTML (the next generation HTML) requires lowercase tags.
Why Use Lowercase Tags?
Tag Attributes
Tags can have attributes. Attributes can provide additional information about the HTML elements on your page. The <tag> tells the browser to do something, while the attribute tells the browser how to do it. For instance, if we add the bgcolor attribute, we can tell the browser that the background color of your page should be blue, like this: <body bgcolor="blue">.
This tag defines an HTML table: <table>. With an added border attribute, you can tell the browser that the table should have no borders: <table border="0">. Attributes always come in name/value pairs like this: name="value". Attributes are always added to the start tag of an HTML element and the value is surrounded by quotes.
Quote Styles, "red" or 'red'?
Attribute values should always be enclosed in quotes. Double style quotes are the most common, but single style quotes are also allowed. In some rare situations, like when the attribute value itself contains quotes, it is necessary to use single quotes: name='George "machine Gun" Kelly' Note: Some tags we will discuss are deprecated, meaning the World Wide Web Consortium (W3C) the governing body that sets HTML, XML, CSS, and other technical standards decided those tags and attributes are marked for deletion in future versions of HTML and XHTML. Browsers should continue to support deprecated tags and attributes, but eventually these tags are likely to become obsolete and so future support cannot be guaranteed. For a complete list of tags, visit W3C.org.
Basic HTML Tags
The most important tags in HTML are tags that define headings, paragraphs and line breaks.
Basic HTML Tags
Tag <html> <body> <p> <br> <hr> <!--> Description Defines an HTML document Defines the document's body Defines a paragraph Inserts a single line break Defines a horizontal rule Defines a comment
<h1> to <h6> Defines header 1 to header 6
Headings
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading while <h6> defines the smallest.
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6> This is a heading</h6>
HTML automatically adds an extra blank line before and after a heading. A useful heading attribute is align.
<h5 align="left">I can align headings </h5> <h5 align="center">This is a centered heading </h5> <h5 align="right">This is a heading aligned to the right </h5>
Paragraphs
Paragraphs are defined with the <p> tag. Think of a paragraph as a block of text. You can use the align attribute with a paragraph tag as well. <p align="left">This is a paragraph</p> <p align="center">this is another paragraph</p>
Important: You must indicate paragraphs with <p> elements. A browser ignores any indentations or blank lines in the source text. Without <p> elements, the document becomes one large paragraph. HTML automatically adds an extra blank line before and after a paragraph.
Line Breaks
The <br> tag is used when you want to start a new line, but don't want to start a new paragraph. The <br> tag forces a line break wherever you place it. It is similar to single spacing in a document. This Code <p>This <br> is a para<br> graph with line breaks</p> The <br> tag has no closing tag. Would Display This is a para graph with line breaks
Horizontal Rule
The <hr> element is used for horizontal rules that act as dividers between sections, like this: The horizontal rule does not have a closing tag. It takes attributes such as align and width. For instance: This Code <hr width="50%" align="center"> Would Display
Comments in HTML
The comment tag is used to insert a comment in the HTML source code. A comment can be placed anywhere in the document and the browser will ignore everything inside the brackets. You can use comments to write notes to yourself, or write a helpful message to someone looking at your source code. This Code <p> This html comment would <!-- This is a comment --> be displayed like this.</p> Would Display This HTML comment would be displayed like this.
Notice you don't see the text between the tags <!-- and -->. If you look at the source code, you would see the comment. To view the source code for this page, in your browser window, select View and then select Source.
Note: You need an exclamation point after the opening bracket <!-- but not before the closing bracket -->. HTML automatically adds an extra blank line before and after some elements, like before and after a paragraph, and before and after a heading. If you want to insert blank lines into your document, use the <br> tag.
Try It Out!
Open your text editor and type the following text: <html> <head> <title>My First Webpage</title> </head> <body> <h1 align="center">My First Webpage</h1> <p>Welcome to my first web page. I am writing this page using a text editor and plain old html.</p> <p>By learning html, I'll be able to create web pages like a pro....<br> which I am of course.</p> </body> </html> Save the page as mypage2.html. Open the file in your Internet browser. To view how the page should look, visit this web page: http://profdevtrain.austincc.edu/html/mypage2.html
Other HTML Tags
As mentioned before, there are logical styles that describe what the text should be and physical styles which actually provide physical formatting. It is recommended to use the logical tags and use style sheets to style the text in those tags.
Logical Tags
Tag <abbr> <acronym> <address> <cite> <code> Description Defines an abbreviation Defines an acronym Defines an address element Defines a citation Defines computer code text a long quotation text a definition term emphasized text inserted text keyboard text preformatted text a short quotation sample computer code strong text a variable
Physical Tags
Tag <b> <big> Description Defines bold text Defines
big text
<blockquote> Defines <del> Defines <dfn> Defines <em> Defines <ins> Defines <kbd> Defines <pre> Defines <q> Defines <samp> Defines <strong> Defines <var> Defines
<i> Defines italic text <small> Defines small text <sup> Defines superscripted text <sub> Defines subscripted text <tt> Defines teletype text <u> Deprecated. Use styles instead
Character tags like <strong> and <em> produce the same physical display as <b> and <i> but are more uniformly supported across different browsers.
Some Examples:
The following paragraph uses the <blockquote> tag. In the previous sentence, the blockquote tag is enclosed in the <samp> Sample tag. We the people of the United States, in order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defense, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America. Although most browsers render blockquoted text by indenting it, that's not specifically what it's designed to do. It's conceivable that some future browser may render blockquoted text in some other way. However, for the time being, it is perfectly safe to indent blocks of text with the <blockquote>. This Code <abbr title="World Wide Web">WWW</abbr> Would Display WWW
When you hold your mouse pointer over the WWW, text in the title attribute will appear in.
HTML Character Entities
Some characters have a special meaning in HTML, like the less than sign (<) that defines the start of an HTML tag. If we want the browser to actually display these characters we must insert character entities in place of the actual characters themselves.
The Most Common Character Entities:
Result Description < > & " ' less than greater than ampersand quotation mark apostrophe Entity Name < > & " ' (does not work in IE) Entity Number   < > & " '
non-breaking space
A character entity has three parts: an ampersand (&), an entity name or an entity number, and finally a semicolon (;). The & means we are beginning a special character, the ; means ending a special character and the letters in between are sort of an abbreviation for what it's for. To display a less than sign in an HTML document we must write: < or < The advantage of using a name instead of a number is that a name is easier to remember. The disadvantage is that not all browsers support the newest entity names, while the support for entity numbers is very good in almost all browsers. Note: Entities are case sensitive.
The most common character entity in HTML is the non-breaking space . Normally HTML will truncate spaces in your text. If you add 10 spaces in your text, HTML will remove 9 of them. To add spaces to your text, use the character entity. This Code <p> This code as this.</p> would appear Would Display This code would appear as this.
Non-breaking Space
This Code <p> This code would This code appear with three extra spaces.</p> spaces. To see a list of character entities, visit this page: http://profdevtrain.austincc.edu/html/entities.htm
Would Display would appear with three extra
HTML Fonts
The <font> tag in HTML is deprecated. The World Wide Web Consortium (W3C) has removed the <font> tag from its recommendations. In future versions of HTML, style sheets (CSS) will be used to define the layout and display properties of HTML elements. The <font> Tag Should NOT be used.
HTML Backgrounds
Backgrounds
The <body> tag has two attributes where you can specify backgrounds. The background can be a color or an image.
Bgcolor
The bgcolor attribute specifies a background-color for an HTML page. The value of this attribute can be a hexadecimal number, an RGB value, or a color name: <body bgcolor="#000000"> <body bgcolor="rgb(0,0,0)"> <body bgcolor="black"> The lines above all set the background-color to black.
Background
The background attribute can also specify a background-image for an HTML page. The value of this attribute is the URL of the image you want to use. If the image is smaller than the browser window, the image will repeat itself until it fills the entire browser window. <body background="clouds.gif"> <body background="http://profdevtrain.austincc.edu/html/graphics/clouds.gif"> The URL can be relative (as in the first line above) or absolute (as in the second line above). If you want to use a background image, you should keep in mind: Will Will Will Will Will the the the the the background background background background background image image image image image increase the loading time too much? look good with other images on the page? look good with the text colors on the page? look good when it is repeated on the page? take away the focus from the text?
Note: The bgcolor, background, and the text attributes in the <body> tag are deprecated in the latest versions of HTML (HTML 4 and XHTML). The World Wide Web Consortium (W3C) has removed these attributes from its recommendations. Style sheets (CSS) should be used instead (to define the layout and display properties of HTML elements).
Try It Out!
Open your text editor and type the following text:
<html> <head> <title>My First Webpage</title> </head> <body background="http://profdevtrain.austincc.edu/html/graphics/clouds.gif" bgcolor="#EDDD9E"> <h1 align="center">My First Webpage</h1> <p>Welcome to my <strong>first</strong> webpage. I am writing this page using a text editor and plain old html.</p> <p>By learning html, I'll be able to create webpages like a <del>beginner</del> pro....<br> which I am of course.</p> </body> </html> Save your page as mypage3.html and view it in your browser. To view how the page should look, visit this web page: http://profdevtrain.austincc.edu/html/mypage3.html Notice we gave our page a background color as well as a background image. If for some reason the web page is unable to find the picture, it will display our background color.
HTML Colors
Color Values
Colors are defined using a hexadecimal notation for the combination of red, green, and blue color values (RGB). The lowest value that can be given to one light source is 0 (hex #00). The highest value is 255 (hex #FF). This table shows the result of combining red, green, and blue: Color Color HEX #000000 #FF0000 #00FF00 #0000FF #FFFF00 #00FFFF #FF00FF #C0C0C0 #FFFFFF Color RGB rgb(0,0,0) rgb(255,0,0) rgb(0,255,0) rgb(0,0,255) rgb(255,255,0) rgb(0,255,255) rgb(255,0,255) rgb(192,192,192) rgb(255,255,255)
Color Names
A collection of color names is supported by most browsers. To view a table of color names that are supported by most browsers visit this web page: http://profdevtrain.austincc.edu/html/color_names.htm Note: Only 16 color names are supported by the W3C HTML 4.0 standard (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow). For all other colors you should use the Color HEX value. Color Color HEX #F0F8FF #FAEBD7 #7FFFD4 #000000 #0000FF #8A2BE2 #A52A2A Color Name AliceBlue AntiqueWhite Aquamarine Black Blue BlueViolet Brown
Web Safe Colors
A few years ago, when most computers supported only 256 different colors, a list of 216 Web Safe Colors was suggested as a Web standard. The reason for this was that the Microsoft and Mac operating system used 40 different "reserved" fixed system colors (about 20 each). This 216 cross platform web safe color palette was originally created to ensure that all computers would display all colors correctly when running a 256 color palette. To view the 216 Cross Platform Colors visit this web page: http://profdevtrain.austincc.edu/html/216.html
16 Million Different Colors
The combination of Red, Green and Blue values from 0 to 255 gives a total of more than 16 million different colors to play with (256 x 256 x 256). Most modern monitors are capable of displaying at least 16,384 different colors. To assist you in using color schemes, check out http://wellstyled.com/tools/colorscheme2/index-en.html. This site lets you test different color schemes for page backgrounds, text and links.
HTML Lists
HTML provides a simple way to show unordered lists (bullet lists) or ordered lists (numbered lists).
Unordered Lists
An unordered list is a list of items marked with bullets (typically small black circles). An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. This Code <ul> <li>Coffee</li> <li>Milk</li> </ul> Coffee Milk Would Display
Ordered Lists
An ordered list is also a list of items. The list items are marked with numbers. An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. This Code <ol> <li>Coffee</li> <li>Milk</li> </ol> 1. Coffee 2. Milk Would Display
Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.
Definition lists consist of two parts: a term and a description. To mark up a definition list, you need three HTML elements; a container <dl>, a definition term <dt>, and a definition description <dd>. This Code <dl> <dt>Cascading Style Sheets</dt> <dd>Style sheets are used to provide presentational suggestions for documents marked up in HTML. </dd> </dl> Would Display Cascading Style Sheets Style sheets are used to provide presentational suggestions for documents marked up in HTML.
Definition Lists
Inside a definition-list definition (the <dd> tag) you can put paragraphs, line breaks, images, links, other lists, etc
Try It Out
Open your text editor and type the following: <html> <head> <title>My First Webpage</title> </head> <body bgcolor="#EDDD9E"> <h1 align="center">My First Webpage</h1> <p>Welcome to my <strong>first</strong> webpage. I am writing this page using a text editor and plain old html.</p> <p>By learning html, I'll be able to create web pages like a pro....<br> which I am of course.</p> Here's what I've learned: <ul> <li>How to use HTML tags</li> <li>How to use HTML colors</li> <li>How to create Lists</li> </ul> </body> </html> Save your page as mypage4.html and view it in your browser. To see how your page should look visit this web page: http://profdevtrain.austincc.edu/html/mypage4.html
HTML Links
HTML uses the <a> anchor tag to create a link to another document or web page.
The Anchor Tag and the Href Attribute
An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc. The syntax of creating an anchor: <a href="url">Text to be displayed</a> The <a> tag is used to create an anchor to link from, the href attribute is used to tell the address of the document or page we are linking to, and the words between the open and close of the anchor tag will be displayed as a hyperlink. This Code <a href="http://www.austincc.edu/">Visit ACC!</a> Would Display Visit ACC!
The Target Attribute
With the target attribute, you can define where the linked document will be opened. By default, the link will open in the current window. The code below will open the document in a new browser window: <a href=http://www.austincc.edu/ target="_blank">Visit ACC!</a>
Email Links
To create an email link, you will use mailto: plus your email address. Here is a link to ACC's Help Desk: <a href="mailto:[email protected]">Email Help Desk</a> To add a subject for the email message, you would add ?subject= after the email address. For example: <a href="mailto:[email protected]?subject=Email Assistance">Email Help Desk</a>
The Anchor Tag and the Name Attribute
The name attribute is used to create a named anchor. When using named anchors we can create links that can jump directly to a specific section on a page, instead of letting the user scroll around to find what he/she is looking for. Unlike an anchor that uses href, a named anchor doesn't change the appearance of the text (unless you set styles for that anchor) or indicate in any way that there is anything special about the text. Below is the syntax of a named anchor: <a name="top">Text to be displayed</a> To link directly to the top section, add a # sign and the name of the anchor to the end of a URL, like this: This Code Would Display
<a href="http://profdevtrain.austincc.edu/html Back to top of page /10links.html#top">Back to top of page </a> A hyperlink to the top of the page from within the file 10links.html will look like this: <a href="#top">Back to top of page </a>
Back to top of page
Note: Always add a trailing slash to subfolder references. If you link like this: href="http://profdevtrain.austincc.edu/html", you will generate two HTTP requests to the server, because the server will add a slash to the address and create a new request like this: href="http://profdevtrain.austincc.edu/html/" Named anchors are often used to create "table of contents" at the beginning of a large document. Each chapter within the document is given a named anchor, and links to each of these anchors are put at the top of the document. If a browser cannot find a named anchor that has been specified, it goes to the top of the document. No error occurs.
HTML Images
The Image Tag and the Src Attribute
The <img> tag is empty, which means that it contains attributes only and it has no closing tag. To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display on your page. The syntax of defining an image: This Code Would Display
<img src="graphics/chef.gif">
Not only does the source attribute specify what image to use, but where the image is located. The above image, graphics/chef.gif, means that the browser will look for the image name chef.gif in a graphics folder in the same folder as the html document itself.
src="chef.gif" means that the image is in the same folder as the html document calling for it.
src="images/chef.gif" means that the image is one folder down from the html document that called for it. This can go on down as many layers as necessary.
src="../chef.gif" means that the image is in one folder up from the html document that called for it.
src="../../chef.gif" means that the image is two folders up from the html document that called for it.
src="../images/chef.gif" means that the image is one folder up and then another folder down in the images directory.
src="../../../other/images/chef.gif" means this goes multiple layers up.
The browser puts the image where the image tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.
The Alt Attribute
The alt attribute is used to define an alternate text for an image. The value of the alt attribute is author-defined text: <img src="graphics/chef.gif" alt="Smiling Happy Chef "> The alt attribute tells the reader what he or she is missing on a page if the browser can't load images. The browser will then display the alternate text instead of the image. It is a good practice to include the alt attribute for each image on a page, to improve the display and usefulness of your document for people who have text-only browsers or use screen readers.
Image Dimensions
When you have an image, the browser usually figures out how big the image is all by itself. If you put in the image dimensions in pixels however, the browser simply reserves a space for the image, then
loads the rest of the page. Once the entire page is loads it can go back and fill in the images. Without dimensions, when it runs into an image, the browser has to pause loading the page, load the image, then continue loading the page. The chef image would then be: <img src="graphics/chef.gif" width="130" height="101" alt="Smiling Happy Chef"> Open the file mypage2.html in your text editor and add code highlighted in bold: <html> <head> <title>My First Webpage</title> </head> <body> <h1 align="center">My First Web page</h1> <p>Welcome to my first webpage. I am writing this page using a text editor and plain old html.</p> <p>By learning html, I'll be able to create web pages like a pro....<br> which I am of course.</p> <!-- Who would have guessed how easy this would be :) --> <p><img src="graphics/chef.gif" width="130" height="101" alt="Smiling Happy Chef" align="center"></p> <p align="center">This is my Chef</p> </body> </html> Save your page as mypage5.html and view it in your browser. To see how your page should look visit this web page: http://profdevtrain.austincc.edu/html/mypage5.html
Tables
Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for table data, which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc. This Code <table> <tr> <td>row 1, <td>row 1, </tr> <tr> <td>row 2, <td>row 2, </tr> </table> Would Display
cell 1</td> cell 2</td>
row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2
cell 1</td> cell 2</td>
Tables and the Border Attribute
This Code <table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table>
To display a table with borders, you will use the border attribute. Would Display
row 1, cell 1 row 1, cell 2
and.... This Code <table border="5"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table> Would Display
row 1, cell 1 row 1, cell 2
Open up your text editor. Type in your <html>, <head> and <body> tags. From here on I will only be writing what goes between the <body> tags. Type in the following: <table border="1"> <tr> <td>Tables can be used to layout information</td> <td> <img src="http://profdevtrain.austincc.edu/html/graphics/chef.gif"> </td> </tr> </table> Save your page as mytable1.html and view it in your browser. To see how your page should look visit this web page: http://profdevtrain.austincc.edu/html/mytable1.html
Headings in a Table
Headings in a table are defined with the <th> tag. This code <table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> Would Display
Heading
Another Heading
row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2
Cell Padding and Spacing
The <table> tag has two attributes known as cellspacing and cellpadding. Here is a table example without these properties. These properties may be used separately or together. This Code <table border="1"> <tr> <td>some text</td> <td>some text</td> </tr> <tr> <td>some text</td> <td>some text</td> </tr> </table> Would Display
some text some text some text some text
Cellspacing is the pixel width between the individual data cells in the table (The thickness of the lines making the table grid). The default is zero. If the border is set at 0, the cellspacing lines will be invisible. This Code <table border="1" cellspacing="5"> <tr> <td>some text</td> <td>some text</td> </tr><tr> <td>some text</td> <td>some text</td> </tr> </table> Would Display
some text some text some text some text
Cellpadding is the pixel space between the cell contents and the cell border. The default for this property is also zero. This feature is not used often, but sometimes comes in handy when you have your borders turned on and you want the contents to be away from the border a bit for easy viewing. Cellpadding is invisible, even with the border property turned on. Cellpadding can be handled in a style sheet. This Code <table border="1" cellpadding="10"> <tr> <td>some text</td> <td>some text</td> </tr><tr> <td>some text</td> <td>some text</td> </tr> </table> Would Display
some text some text
some text some text
Table Tags
Tag Description <table> Defines a table <th> Defines a table header <tr> Defines a table row <td> Defines a table cell <caption> Defines a table caption <colgroup> Defines groups of table columns <col> Defines the attribute values for one or more columns in a table
Table Size
The width attribute can be used to define the width of your table. It can be defined as a fixed width or a relative width. A fixed table width is one where the width of the table is specified in pixels. For example, this code, <table width="550">, will produce a table that is 550 pixels wide. A relative table width is specified as a percentage of the width of the visitor's viewing window. Hence this code, <table width="80%">, will produce a table that occupies 80 percent of the screen. This table width is 250 pixels This table width is 50%
Table Width
There are arguments in favor of giving your tables a relative width because such table widths yield pages that work regardless of the visitor's screen resolution. For example, a table width of 100% will always span the entire width of the browser window whether the visitor has a 800x600 display or a 1024x768 display (etc). Your visitor never needs to scroll horizontally to read your page, something that is regarded by most people as being very annoying.
HTML Layout - Using Tables
One very common practice with HTML, is to use HTML tables to format the layout of an HTML page. A part of this page is formatted with two columns. As you can see on this page, there is a left column and a right column. This text is displayed in the left column. An HTML <table> is used to divide a part of this Web page into two columns. The trick is to use a table without borders, and maybe a little extra cell-padding. No matter how much text you add to this page, it will stay inside its column borders.
Try It Out!
Let's put everything you've learned together to create a simple page. Open your text editor and type the following text: <html> <head> <title>My First Web Page </title> </head> <body> <table width="90%" cellpadding="5" cellspacing="0" > <tr bgcolor="#EDDD9E"> <td width="200" valign="top"><img src="graphics/contact.gif" width="100" height="100"></td> <td valign="top"><h1 align="right">Janet Doeson</h1> <h3 align="right">Technical Specialist</h3></td> </tr> <tr> <td width="200"> <h3>Menu</h3> <ul> <li><a href="home.html">Home</a></li> <li> <a href="faq.html">FAQ</a></li> <li> <a href="contact.html">Contact</a></li> <li> <a href="http://www.austincc.edu">Links</a> </li> </ul></td> <td valign="top"><h2 align="center">Welcome!</h2> <p>Welcome to my first webpage. I created this webpage without the assistance of a webpage editor. Just my little text editor and a keen understanding of html.</p> <p>Look around. Notice I'm able to use paragraphs, lists and headings. You may not be able to tell, but the layout is done with a table. I'm very clever. </p> <blockquote> <p>I always wanted to be somebody, but now I realize I should have been more specific.</p> <cite>Lily Tomlin </cite> </blockquote> </td> </tr> </table> <hr width="90%" align="left"> <address> Janet Doeson<br> Technical Specialist<br> 512.555.5555 </address> <p>Contact me at <a href="mailto:[email protected]">[email protected]</a> </p>
</body> </html> Save your page as mytable2.html and view it in your browser. To see how your page should look visit this web page: http://profdevtrain.austincc.edu/html/mytable2.html I have indented some of the HTML code in the above example. Indenting the code can make your HTML document easier to read.
Create Your Own Page
Its time to create your own page. Use your text editor to create a page which contains the following: the required HTML page codes link to another web page an email link a picture/graphic a list of information
Save the file as xyhtml_basics.html where xy is your initials. Email the file to [email protected].
Basic HTML Tags
Index to Topics
Introduction HTML Tags Marking up your HTML document
Introduction
This document gives information about some of the basic tags used to create a web page. There are many html tutorials avalable on the web, but the information below will help you create a basic web page.
HTML Tags
Web pages are created using a language called HTML. Don't be intimidated at the thought of having to learn HTML; the basics you'll need to make a web page are simple. HTML uses tags to control the look and feel of your web page. Tags are enclosed in < > characters. Many tags have a closing tag, which are characterized by a forward slash "/" before the tag name. This closing tag tells the browser to cease whatever instruction began with the initial tag. The general form for a tag is: < tag_name > Your Text </tag_name> There are many tags in HTML, and each one tells the browser a piece of information about how it should display the text between the tags. Only basic HTML tags will be addressed in this document. The HTML language continues to develop. If you are interested in learning more about HTML seach the web for HTML courses and/or tutorials.
Marking up your HTML document
The first step of the webpage creation process is to compose the HTML files. Create a directory on your computer's hard drive where the files will be stored while you are working with them. You will need to know the path to this directory to view your files and to upload them.
You can enter the text in a simple text editor such as Notepad, or SimpleText if you have a Mac, or use a program designed for making web pages such as Homesite or Dreamweaver. You could also seach the internet for "html editor" and find many you can download. You can check to see how your files will look when they are published by using your web browser. It is a good idea to check how you web pages will look on several browsers. To view your files Choose FILE -> OPEN in the browsers' menu, and selecting the HTML file that you've written. Using the tags discussed throughout the document to format your text will allow you to create an attractive web page. Note: You may find it easier to compose your text first and then format it.
<html> </html>
The <html> tag is in fact the only tag you need to create the simplest webpage. The <html> tag tells the browser that this is an HTML document, so the browser understands how to show the page. The first line in each file will be <html> and the last line in each file will be </html>.
<head> </head>
The "head" of an HTML document contains information which is not displayed on the screen when viewed in a browser, but is nevertheless important in making the document more readable. You need both the opening <head> and closing </head> tag. An example of a tag that would appear in the head of an HTML document is the <title> </title> tag. Any text within this tag is not seen directly in the browser window, but is displayed in the title bar of the browser.
<body> </body>
The "body" contains the part of the document that will be viewed in the webpage. You need both the opening <body> and closing </body> tag. You can set options for the <body> tag that will be applied to the entire web page. Some of these options are:
background="url" - Sets the background image to the image found at URL. The image should be in .gif, .jpg, or .jpeg format bg color = "#hexvalue" or bg color="color_name" - Sets the background color. link="#hexvalue" or link="color_name" - Sets the colour for unvisited links vlink="#hexvalue" or vlink="color_name" - Sets the colour for visited links text="#hexvalue" - Sets the colour for text in the body of the document <!-- my comment --> Text in the comment tag will be ignored by the browser, and not displayed as part of the resulting webpage. If you comment your documents freely, using them to describe the more complex sections of your document, it'll make understanding and editing your document much easier when you update the page at a later date. <h1> <h2> <h3> <h4> <h5> <h6> </h1> </h2> </h3> </h4> </h5> </h6> Headings are useful when you want to organize text into named sections. In all there are six headings of form <h#>, where n is any number between 1 and 6; since the browser must know the beginning and ending words for the heading, closing tags of the form </h#> are needed to close the six different heading tags. Applying heading tags to text causes that text to have a predetermined size and format. H1 is the largest, and H6 is the smallest. <p> your text </p> <p align="left"> your text </p> <p align="right">your text</p> <p align= "center">your text</p> The paragraph tag tells your web browser where to make paragraph breaks by enclosing each paragraph with a <p> tag before the text, and a </p> tag after the text. The <p> tag has several options, the most common
of which is ALIGN. ALIGN can be set to "LEFT", "RIGHT", or "CENTER", to affect the horizontal alignment of the paragraph. <center> </center> The <center> </center> tag works for paragraphs, tables, headings, and images. Everything between the tags will be centered horizontally on the page. When you want to include a quotation in the text of your web page use the <blockquote> </blockquote> tag. The text enclosed in the tags will appear on the webpage with an indentation on both the left and right sides, as well as a blank line before and after the text. The <br> tag stands for "break", or "line break". The <br> tag will cause the text immediately after the tag to appear on a new line. The creates a non breaking space. It is used to add extra spaces without adding an extra line, or to add a blank character between letters while keeping the text together. The <hr> tag stands for horizontal rule. This tag will cause a horizontal line to be drawn on the screen. This tag has several options; the most common ones include: align - aligns the line horizontally, "left", "right", or "center". size - sets the thickness of the line to the number of pixels. width - sets the width of the line to be number of pixels or to take up the percentage of the screen's width. (For example, if you wish to create a line that takes up the whole width of the screen, use <hr width ="100%"> ). color name - sets the colour of the line. You can use the color name or the hex code for the color.
<blockquote> </blockquote>
<br>
<hr>
<hr align = "left"> <hr align = "center"> <hr align = "right"> <hr size = "number"> <hr width = "number"> <hr width = "percentage"> <hr color = "color name"> <hr color = "hex number ">
HTML allows you to make both unordered (bulleted) and ordered (numbered) lists. Lists can be "nested" within each other. <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> Unordered Lists In an unordered list bullets are placed before each list item. The basic form for an unordered list uses
<li>List item 4</li> </ul> <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol>
the <ul> tag, a collection of <li> </li> tags for each of the list items, and finally a </ul> to tell the browser that the list is complete. Ordered Lists The ordered list numbers each item consecutively. The basic form for an ordered list is the <ol> tag, (which stands for ordered list), a collection of list items identified by <li> </li> tags, and then the </ol> tag.
<ul> <li>Vegetables</li> <ul> <li>Carrots</li> <li>Beans</li> </ul> <li>Fruits</li> <ul> <li>Apples</li> <li>Oranges</li> <li>Bananas</li> </ul> <li>Meat</li> <ul> <li>Ground Beef</li> <li>Steak</li> <li>Ham</li> </ul> <ul> Colours in HTML
Nested Lists One of the more useful features of lists is the ability to create nested lists. A nested list is a list within a list. These lists may be any combination of unordered and ordered lists. The sample to the left will result in the following: Vegetables o Carrots o Beans Fruits o Apples o Oranges o Bananas Meat o Ground beef o Steak o Ham
You can add colour to both the text and the background using HTML. (Note the spelling of color - colour will not work. <color = "red"> <color = "blue"> <color = "#A91227"> <color = "#0000FF"> Colour in HTML can be set using two different methods. You can assign something a certain colour using... it's hexadecimal equivalent, or it's name (ie. "red", "blue", "grey", etc.) There are several advantages to using the first system; the hexadecimal system will work in
virtually all browsers. Also, you have many more shade and colour options by using the hexadecimal system. There are many webpages that provide charts that give the hexadecimal value for a particular colour; click here to view one of these charts. To use the chart, simply identify the colour you wish to use, and write down (or remember) the 6-digit hex value for the colour, listed with the colour. That's the value you'll be using to set the colour attribute for the font or background. HTML also understands some basic colours by name, red, yellow, orange, blue, brown, black, white. Font You can change the way your text looks by changing its font, size, colour and emphasis. <font> </font> <font face = " "> <font size = " "> <font color="#hexnum"> The face option lets you choose the particular typestyle for the text, just as you would in a word processor. This allows you to set one paragraph to use the "arial" font, and another to use the "Times Roman" font. One important note about this feature is that the font must be installed on the computer of the person viewing the page, or else the browser will not recognize the font selection. The size tag allows you to set the size of the font, The size attribute can be assigned a value between "1" being the smallest and "7" being the largest. The color tag lets you change the colour of the text. The color attribute can be assigned to most common names for colours, such as "yellow", "red", "pink", "black", etc., (see the color chart for more) but to get a larger number of colours, you can use the format <font color="#hexnum">, where HEXNUM is the 6-digit hex value found in a color chart. <strong> </strong> <bold> </bold> There are several other character formatting tags that help to make characters stand out. The font tag does nothing on its own, but when combined with other keywords as options in the tag, it's quite powerful. You can string several options together in one <font> command.
<em> </em> <i> </i> <tt> </tt>
The <strong> </strong> tag, will cause words to appear in bold. Although this is the preferred method for creating text in boldface, a <bold> </bold> tag exists which will create the same effect. The <em> </em> tag will make text appear in italics. An <i> </i> tag also exists which will produce the same effect. The <tt> </tt> tag changes the font of that text to a typewriter font, usually Courier.
Creating Links
Links are what allow webpages to be connected either to another web page or to a specific location on the current we page. <a href = "www.queensu.ca"> Go The most common link is where the text is anchored To Queen's Web Page </a> to another web page. This would be <a href = "url"> text to act as link </a> <a name = "anchor_name"></a> You can also link to sections within a document. <a href = "#anchor_name">go to This is possible through what are called named ... </a> anchors. A named anchor is a hidden reference <a href ="url#anchor_name"> go marker for a particular place in your HTML file. to ... </a> When you include a named anchor somewhere in an HTML document, and then create a link to that <a href ="url#anchor">text </a> anchor, the browser will jump to that line when the link is clicked. <a href="mailto:user@host"> Words that will be the link </A> In order to create a link to a particular section of a page, you must perform two steps: 1. Assign an anchor name to the position 2. Create a link to that position The first of these tasks can be performed through use of the NAME attribute of the <a> tag, as follows: <a name="anchor_name"></a>
The anchor name can be anything you choose, as long as it's made up of numbers, letters, or the underscore character, and you refer to the same anchor name when you actually create the link. The second task, the one of actually creating the link, is very similar to the way we created links to other webpages, except that we must specify the anchor name to which we wish to link. This can be done in the following way: <a href="#anchor_name">go to ... </a> Anchor links can also be used to link to a specific anchor on another webpage. (In this case the target and source page of the link are the same). To create a link of this kind, first create a named anchor in the target webpage, as described above, and then create the link in the source webpage as follows: <a href="url#anchor_name">go to ... </a> Links can also be created to send email to a specific email address, as follows: <a href="mailto:user@host"> words that will be the link </a> <img src = "filename" height="number" width="number" alt="description" border="number"> The <img> tag, where IMG stands for image has no </img> counterpart, but does have several useful options.The SRC option is the only necessary option for the <img> tag, since the browser must know where it can find the image file. The SRC option can be set to equal a valid filename, if the image file is located in the same directory as the source document of an image file. The most common options are: SRC="FILENAME" - Specifies the SOURCE of the image; if the image file is in the same directory as the source document, all that is needed is the filename itself. Note: Don't link to another page for an image - copy the image to your filespace and link to it from there (with permission of course!)
HEIGHT="NUMBER" - Specifies that the height of the image should be NUMBER pixels. WIDTH="NUMBER" - Specifies that the width of the image should be NUMBER pixels. If no dimensions are specified for the image, the browser will insert the image exactly as is, at the same size as you would view it in a picture editor on your computer. The picture will load slightly faster if you specify the height and width so that the browser does not have to determine it. You may also find it quicker and easier to specify a specific width and height for the image in the HTML , rather than editting and resizing the image on your computer. ALT="DESCRIPTION" - Specifies a description of the image. The ALT option for the IMG tag is useful for those whose browsers cannot support in-line images, or have their images turned off in their browsers; instead of seeing the image, they'll see the description of the image that you gave them in the ALT tag. While the majority of people "surfing the web" these days enjoy browsers that have full graphics capabilities, it's a good idea to include an ALT clause in your IMG tag for those who don't. Also keep in mind that people who must use voice software or hardware in order to read a webpage will appreciate having the description. BORDER="NUMBER" - Specifies the width of the image's border, in pixels. An image tag could look like: <img src = "filename" height = "number" width = "number" alt = "description" border = "number">
How the Web Works, Part I: Introduction to HTML
HTML Tutorial
(version 5.0)
This tutorial is designed to teach you some the basics of HyperText Markup Language (HTML), with an emphasis on transforming a word-processing document into a simple Web page. You can get the most recent version of this tutorial from the CAT website: http://cat.xula.edu/tutorials/
Contents
This tutorial will guide you through the following steps:
1. 2. 3. 4. 5. 6. 7. Retrieving the necessary materials from the Web Copying text from a word-processing document and pasting it into an HTML template Marking block elements and validating your work Marking inline elements and validating your work Using Netscape Composer Using Word's "Save as HTML" feature. Uploading your files to the Web server
Prerequisites
This tutorial assumes a level of competency with basic computing tasks and concepts. You should understand the following terms:
v v v v v Files Folders File hierarchy The desktop The Finder (Mac only)
Conventions
Actions that you need to perform are bulleted, like this: Open the file.
Menu commands look like this: File > Open. This means choose the Open option from the File menu. Sometimes, for the sake of brevity, common menu items may be referred to simply as Save or Open. The same style is used for other user interface elements, such as key you're supposed to press and buttons you're supposed to click, i.e. "Click the OK button." HTML code and URLs look like this:
<BODY BGCOLOR="white">
Names of files and folders, as well as text that you are supposed to type, are rendered in italics.
How the Web Works, Part I: Introduction to HTML HTML Tutorial
Before You Begin
Look over the "Hypertext Markup Procedure" and "30-Odd Safe HTML Elements" quick reference sheets. Re-examine the handouts on "Anatomy of a Web Page" and the "Container Model." Read the following information about filename extensions.
About Filename Extensions
Some operating systems use filename extensions to identify different types of files. For example, a file named document.htm or document.html is marked as a Web page. A file named document.gif is marked as a particular type of image file, while document.jpg indicates an image file of another format. A Microsoft Word document might be named document.doc, whereas a plain text file would most likely be named something like document.txt. Web servers, which may run on a number of different operating systems, use filename extensions to identify file types. The Microsoft Disk Operating System (MS-DOS) uses filename extensions. Windows uses them too, since it is built "on top of" MS-DOS. Windows is often configured to hide filename extensions, so that you may no t be aware of them. (But see below for the remedy.) The Mac OS doesn't use filename extensions. A very different system is employed to identify different file types, so that a file named document could be almost anything -- text, graphics, audio, video, whatever. Mac users who want to publish on the Web or share files with Windows users need to be aware of filename extensions and start using them correctly.
Examples of Common Filename Extension Problems
v You find a file named document.html.txt . Which is it plain text or hypertext? v You create a web page that is supposed to display an image. The image file is named picture.jpg but you mistakenly set the SRC attribute of the IMG tag to point to picture.gif. The image does not appear. v You're a Windows user. A Mac user sends you e-mail with a Word document attached. It is named Final Report . You can't open it. Because Final Report has no filename extension, the Windows operating system can't identify it as a Word file. If the Mac user had named the file Final Report.doc , this would not have occurred. Also note that it's good practice to avoid spaces and case variations in filenames if you plan to share them over the Web, so an even better name would be final_report.doc , final-report.doc or finalreport.doc .
Windows Only: Configure Your System
Follow these instructions to make Windows display filename extensions at all times. This is highly recommended for aspiring Web authors, because it reduces opportunities for confusion. WinXP: From the Start menu, choose Control Panel, then double-click on Folder Options. (In older versions of Windows, Open any folder or drive. From the View menu, choose Options or Folder Options.) A dialog box should appear. Click the View tab. Look for an option that says "Hide file extensions for known file types" or "Hide MS-DOS file extensions for file types that are registered." Make sure this item is not checked. Click the button marked OK.
How the Web Works, Part I: Introduction to HTML HTML Tutorial
1. Retrieve Materials
First you must create a folder to hold your files. Create a new folder on the desktop and name it tutorial.
Windows users: You can do this quite simply by clicking on the desktop with your right mouse button and choosing New > Folder from the pop-up menu. Then, without pausing to draw breath, type the word tutorial . Press the Enter key and you're done. Mac users: You can do this quite simply by clicking on the desktop while pressing the Control key; choose New Folder from the pop-up menu. Then, without pausing to think, type the word tutorial. Press the Return key and you're done.
Next, you must retrieve the necessary materials from the Web.
Start Netscape, and point the browser to this URL: http://cat.xula.edu/tutorials/html/ Find the section of the page under the heading Tutorial Materials. Follow the link to All_About_Mustard.doc which is a Microsoft Word Document. Save this file in the tutorial folder you created earlier. (You'll be prompted by Netscape.) Follow the link to template.txt which is a plain text file.
The contents of the file will be displayed in the browser window. It should look like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML> <HEAD> <TITLE>Untitled</TITLE> </HEAD> <BODY> </BODY> </HTML>
This should look familiar to you. You'll use this raw code as a template for your first Web page. The best way to save this file to disk is simply to copy and paste: Choose Edit > Select All to select all the text. Choose Edit > Copy to copy the selecte d text. Launch a text editor.
Windows users: Use Notepad. From the Windows Start menu, choose Run and enter notepad. Mac users: Use SimpleText. This application can usually be found on the hard drive, in the Applications folder.
In your text editor, select Edit > Paste . The text you copied from your browser should appear in the window of the text editor. Save this file. Name it template.txt and make sure that you are saving it in your tutorial folder. Close your text editor and return to Netscape.
You should now have a Word document and a plain text file in your tutorial folder all the materials you need to complete this tutorial.
How the Web Works, Part I: Introduction to HTML HTML Tutorial
2. From Word Processor to Web Page
Often your Web pages will begin their digital life as word processing documents. In order to "mark up" such a document with HTML, you must first get it into a plain text format. One way to do this is by saving the document as a "text only" file. A simpler way is to copy the text from the word processing program and paste it into a text editor, much as you did with the template.txt file. Here's how: Open the file named All_About_Mustard.doc which you saved to your tutorial folder. (Double-clicking the file's icon should launch Microsoft Word. If not, you will have to start Word yourself and open the file from Word.) Take a moment to look over the document and familiarize yourself with its contents and general structure. A copy of this document is attached to the end of this tutorial; you may find it more convenient to refer to the printed copy as you proceed. Choose Edit > Select All to select all the text. Choose Edit > Copy to copy the selected text. Open the template.txt file which you saved in your tutorial folder. (Double-clicking the file's icon should launch your text editor. If not, you will have to start your text editor yourself and open the file within that application.) Click between the opening and closing BODY tags. Choose Edit > Paste . The text you copied from Word should appear in the window of the text editor. Note that all the special formatting has been stripped away. All that remains is plain text and line breaks (carriage returns). o Windows users: You may need to choose Edit > Word Wrap to see all the text.
How the Web Works, Part I: Introduction to HTML HTML Tutorial
Your document should now look something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML> <HEAD> <TITLE>Untitled</TITLE> </HEAD> <BODY> All About Mustard An Abbreviated History of Mustard The Greeks used mustard as a condiment and a drug but it was the Romans who first made real culinary use of it by grinding the seeds and mixing the flour with wine, vinegar, oil and honey. When they moved into Gaul they took mustard plants with them and it was in the rich wine growing region of Burgundy that mustard flourished. It is reputed that at a festival in 1336 attended by the Duke of Burgundy and his cousin King Philip the Fair, no less than 70 gallons of mustard were eaten. Reports do not say how pickled the guests were. Pope John XX11 of Avignon loved mustard so much that he created the post of "Mustard Maker to the Pope," a job he gave to an idle nephew who lived near Dijon. Dijon soon became the mustard centre of the world and in fact so important was it that in 1634 a law was passed to grant the men of the town the exclusive right to make mustard. 1777 saw the start of mustard making as we know it today as it was in this year that Messieurs Grey and Poupon founded their company. They used Grey's recipe and Poupon's money! We still owe a lot to this redoubtable duo as in 1850 their company invented a steam operated grinding machine so ending the era of laborious and back-breaking hand grinding. And as Jesus said in the Gospel of Thomas: [The Kingdom of Heaven] is like a mustard seed. It is the smallest of all seeds; but when it falls on tilled soil, it produces a great plant and becomes a shelter for birds of the air. A Mustard Recipe Ingredients 4 Tablespoons Dry mustard powder 1 Tablespoon White Wine Vinegar 2 Tablespoons Flat beer 1 Clove Garlic 1 Teaspoon Sugar 1/2 Teaspoon Salt 1/4 Teaspoon Turmeric 1 Tablespoon Olive oil -- optional Preparation 1. Whisk together dry mustard, vinegar and beer. 2. Use a garlic press or large pair pliers to squeeze the juice from the clove of garlic into the mixture. 3. Stir in sugar, salt and turmeric. 4. To make mustard smoother and less hot, add olive oil to taste. Mustard Links Europenne de Condiments http://www.moutarde.com/ A mustard company's website Mustard Gas http://www.spartacus.schoolnet.co.uk/FWWmustard.htm A description of mustard gas Mount Horeb Mustard Museum http://www.mustardweb.com/ The world's largest collection of prepared mustards </BODY> </HTML>
How the Web Works, Part I: Introduction to HTML HTML Tutorial
Now you need to save a copy of this file, w ithout overwriting our original template. You also need to designate the new copy as a hypertext file, rather than a plain text file. Choose File > Save As Name the file mustard.html and click the Save button, making sure to save the file in your tutorial folder.
Congratulations! You've just created a Web page. It's incomplete, to be sure, but take a moment to see how it looks in your Web browser: Return to Netscape. Choose File > Open Page . (Mac users should choose File > Open > Page in Navigator.) A dialog box should appear. Navigate to your tutorial folder. (Windows users will need to click the Choose File button.) Choose the mustard.html file, and click the Open button.
Your Web page should now be displayed in the browser. Note how all the text is run together. All the extra whitespace and line breaks are ignored by the browser. Here's what you've accomplished so far: by using the template file, you saved yourself the chore of typing out the basic "shell" of the Web page. The template establishes the global structure of the document, including version information and the HEAD and BODY. You've pasted raw text into the BODY of the document. However, you have not yet marked up any of the text, and so the text has no logical structure.
2.1
Titling Your Document
Before marking up your text, you need to give the HTML document a title. Return to your text editor. The mustard.html file should still be open. (If not, you will need to open it within your text editor.) Find the TITLE tags, in the HEAD of the document. Delete the word Untitled from between the TITLE tags. Type a new title, such as Sample Web Page About Mustard .
The title element should now look something like this:
<TITLE>Your Title Here</TITLE>
Save your file.
How the Web Works, Part I: Introduction to HTML HTML Tutorial
3. Marking Block Elements
Now you will designate the basic structure of the text. Each chunk of text must be designated as belonging to a block element such as a heading or a paragraph. In order to designate an element, you must surround the chunk of text with the appropriate tags. An opening tag, such as <P>, marks the beginning of the element. A closing tag, such as </P> (note the forward slash) marks the end of the element. Mark the first heading. That's the line which reads "All About Mustard." Since it's the heading for the whole page, mark it as a first-level heading, like so:
<H1>All About Mustard</H1> Note: That's a number one (1) after the H, not a lowercase letter L !
Choose File > Save to save your work.
That's all there is to it. This is what's meant by marking an element. Now check your work: Return to Netscape. The mustard.html page should still be displayed, but the browser is showing the old version. To display the changes you just made, click the Reload button.
The browser should reload the page. It is, in essence, re-reading the file from the disk and getting the new version you just saved. You should observe a very noticeable change in the page's appearance. Now you must continue to mark up the rest of the text. This procedure requires you to exercise some judgment. The following instructions do not tell you exactly what to type. Rather, you will be instructed to "mark all the paragraphs," for example. It is up to you to decide what constitutes a paragraph, and to figure out which tag to use. Refer to the printed Word document and other materials as you need them. You should save your work often, and check your work in the browser often.
Hint: For cleaner, easier-to-read markup, insert carriage returns liberally, whenever you need them. Remember that they will not be visible in the browser.
Return to your text editor. The mustard.html file should still be open. (If not, you will need to open it within your text editor.) Mark all the headings. Remember that headings range from H1 (most important) to H6 (least important). You've already marked a first-level heading, so mark up some secondand third-level ones.
Hint: There are three second-level headings and two third-level headings in the document.
For example, the second heading should be marked to look like this:
<H2>An Abbreviated History of Mustard</H2>
How the Web Works, Part I: Introduction to HTML HTML Tutorial
Mark all the paragraphs with P tags.
Hint: There are six paragraphs total, and they're all in the first section of the document. The extended quotation is a paragraph.
For example, a marked paragraph should look like this:
<P> It is reputed that at a festival in 1336 attended by the Duke of Burgundy and his cousin King Philip the Fair, no less than 70 gallons of mustard were eaten. Reports do not say how pickled the guests were. </P>
Mark the extended quo tation with BLOCKQUOTE tags.
Hint: The BLOCKQUOTE tags should surround the P tags. <BLOCKQUOTE> <P> [The Kingdom of Heaven] is like a mustard seed. It is the smallest of all seeds; but when it falls on tilled soil, it produces a great plant and becomes a shelter for birds of the air. </P> </BLOCKQUOTE>
Mark the ordered list (the one that is numbered) with OL tags.
Hint: You are marking the whole list here, not the individual items in the list. <OL> 1. Whisk together dry mustard, vinegar and beer. 2. Use a garlic press or large pair pliers to squeeze the juice from the clove of garlic into the mixture. 3. Stir in sugar, salt and turmeric. 4. To make mustard smoother and less hot, add olive oil to taste. </OL>
Mark the unordered list (the bulleted list of links) with UL tags.
<UL> * Europenne de Condiments http://www.moutarde.com/ A mustard company's website * Mustard Gas http://www.spartacus.schoolnet.co.uk/FWWmustard.htm A description of mustard gas * Mount Horeb Mustard Museum http://www.mustardweb.com/ The world's largest collection of prepared mustards </UL>
Mark the individual list items in both lists with LI tags. Don't forget to mark up both the Preparation list and the Mustard Links list.
Hint: There are only three items (not nine) in the list of links. <LI> Europenne de Condiments http://www.moutarde.com/ A mustard company's website </LI>
Add a horizontal rule at the end of the page with the HR tag.
Hint: The tag still needs to be in the BODY of the document. Also, remember that this is an empty content tag, so there is no closing tag.
How the Web Works, Part I: Introduction to HTML HTML Tutorial
Add some information about how to contact the author of the page after the HR tag. Type something like: This page is maintained by Bart Everson [[email protected]]. Substitute your own name and e-mail address for mine. Mark the line you just typed with ADDRESS tags. Choose File > Save to save your work. Return to Netscape and reload the page to check your work.
Every chunk of text should now be enclosed in one HTML tag or another.
You should notice some problems. The ordered list may have duplicate numbers, and the list of links may have a or * symbol after each bullet. These are artifacts of the conversion from Word to HTML. Also, the list of ingredients is still a jumbled mess. The list of links is also messy. Fix these problems as follows: Return to your text editor. Delete the numbers in the ordered list. They don't need to be explicitly stated. Delete the or * symbols from the list of links. They are also redundant.
What about the list of ingredients? You could mark it as an unordered list, but then it would be bulleted. Besides, you already have one unordered list on the page. Therefore you will mark this as preformatted text. Mark the list of ingredients with the PRE tag. Choose File > Save to save your work. Return to Netscape and reload the page to check your work.
The problems should be fixed, except for the list of links. You will fix that problem in section 4 below.
3.1
Setting the Background Color
It would be nice to make the background of the page yellow sort of a visual joke. You will do this by customizing the BODY tag with an attribute. Return to your text editor. The mustard.html file should still be open. Expand the opening BODY tag to include the BGCOLOR (background color) attribute, and set the value to yellow .
Hint: This would be a good time to review attribute syntax.
The opening BODY tag should look exactly like this:
<BODY BGCOLOR="yellow">
Choose File > Save to save your work. Return to Netscape and reload the page to check your work.
If you find the results too garish for your tastes, you can change the BGCOLOR value to lightyellow instead.
3.2
Validating Your Work
Before you proceed, it's a good idea to validate your HTML and make sure you're on track so far. Point your browser to this URL: 9
How the Web Works, Part I: Introduction to HTML HTML Tutorial
http://validator.w3.org/ This is the W3C's HTML validation service. It allows you to enter a URL for any page that's on the Web and check the validity of its HTML. Since your Web page is not on the Web (yet), follow the "upload files" link toward the bottom of the page.
This will take you to a page which allows you to check the validity of files from your hard drive. Click the Browse button. Navigate to your tutorial folder, select the mustard.html file, and c lick the Open button. Click the Validate this document button.
If you're lucky, you'll get a "No errors found!" message. If not, examine the results to see if you can pinpoint your mistake. Once you've corrected your errors, try to validate your document again. Don't move on to the next section until you succeed.
10
How the Web Works, Part I: Introduction to HTML HTML Tutorial
4. Marking Inline Elements
Now you will continue to designate the structure of the text, but at the inline- or text-level, rather than the block-level. Return to your text editor. The mustard.html file should still be open. Mark the phrase 70 gallons as emphasized with the EM or STRONG tags. Mark the phrase Gospel of Thomas as a citation with the CITE tags. Put line breaks in the list of links using the BR tag.
Hint: The tag should go between the name of the site and its URL. Put another one between the URL and the brief description. Also, remember that this is an empty content tag, so there is no closing tag.
Choose File > Save to save your work. Return to Netscape and reload the page to check y our work.
Observe the results of the changes you just made. Your Web page should now resemble the Word document with which you began.
4.1
Designating Links
It would be nice if the listed websites were clickable links. In this section, you will make them into links by marking them as anchors. Then you'll point the anchors to the appropriate URLs. Return to your text editor. The mustard.html file should still be open. Mark the name of each site as an anchor with the A element. Example: <A>Mount Horeb Mustard Museum</A> Each anchor tag must be expanded to include the HREF (hyper-reference) attribute. <A HREF=" ">Mount Horeb Mustard Museum</A> Each hyper-reference must be set to a URL. In other words, the URL is what goes between the quotation marks.
Hint: Rather than type each URL by hand, simply cut and paste.
<A HREF="http://www.mustardweb.com">Mt Horeb Museum</A>
Choose File > Save to save your work. Return to Netscape and reload the page to check your work. It's good practice to follow your links and make sure they work.
You should observe some peculiar spacing in your list of links. That's because your now have two BR (line break) tags between each site name and its description. You can fix this quickly: Return to your text editor, and delete the extra BR tags from the list of links. Choose File > Save , then return to Netscape and reload the page.
4.2
Validate Your Work
Validate the changes you made following the same instructions as in section 3.2 above.
11
How the Web Works, Part I: Introduction to HTML HTML Tutorial
5. Using Netscape Composer
If you did the browser tutorial for "Introduction to the Web," you should recall that Netscape is actually a suite of programs. It's not just a Web client (or browser), it's also an e-mail client and a news client. In addition, the Netscape suite includes an HTML authoring tool, called Composer. In this section, you'll use Composer to accomplish some of the same tasks that you did with a text editor. Hopefully you'll find that your new knowledge of HTML helps you to understand the process.
5.1
Some Thoughts About Composer
Netscape Composer is just one of many software tools that will write HTML for you. These tools take some of the drudgery out of the process of creating Web pages. However, they are not all created equal. Composer has a few advantages: It's free, and you probably already have it. It is also fairly easy to use. Composer also has numerous limits. Although you can use Composer to do just about everything we've discussed in this seminar, it's incapable of almost everything discussed in the "Advanced HTML" seminar. For example, Composer cannot handle forms or frames. If you ever wish to use style sheets, you will also find Composer inadequate. In the final analysis, I can't recommend Composer. There are simply too many other, better tools out there, such as Allaire's HomeSite and BBEdit by BareBones Software. We hope to offer workshops on these tools soon. But the choice of tool is up to you. If Composer meets your needs, use it. And hopefully the following tutorial will give you a sense of what such a tool can do for you. One other note: Many of the features of Composer are not HTML 4.0 compliant. This tutorial ignores those features, and concentrates on the things Composer does best.
5.2
Getting Started
First you need to start Composer. In Netscape, choose Communicator > Composer. A blank page should appear. At first you might think it looks a lot like Netscape Navigator, but take a closer look. The illustrations below show the toolbars for both Navigator and Composer, as they appear in Windows 95:
Remember, Navigator is a browser, with which you view Web pages. Composer is an authoring application, with which you create Web pages.
12
How the Web Works, Part I: Introduction to HTML HTML Tutorial
Next, you must recopy the raw text of the Word document. Return to Microsoft Word. Open the file named All_About_Mustard.doc , if it is not already open.
Funny thing about Composer if you just paste the text in as you did before, it would interpret each carriage return as a single line break. But Composer interprets double carriage returns as indicative of paragraphs. So Before each full paragraph, insert an extra carriage return with the Enter key (Windows) or the Return key (Mac). Choose Edit > Select All to select all the text. Choose Edit > Copy to copy the selected text. Return to Composer. Choose Edit > Paste to paste the copied text. Choose File > Save and save your file as mustard_composer.html. Make sure to save it in your tutorial folder.
As you save the page, Composer will prompt you for a page title. It's asking what you want to put between the TITLE tags.
Mac users: If Composer does not prompt you, choose Format > Page Title .
Enter an appropriate title, such as " Sample Web Page Using Composer," then click OK.
5.3
Designating Elements
Now you will designate the elements of the document, much as you did with your text editor. The difference is that you will use Composer's graphical user interface instead of typing HTML manually. You tell Composer what to do, and Composer writes the HTML for you. Click in the first heading. That's the line whic h reads "All About Mustard." Since this is the heading for the whole page, mark it as a first-level heading, by choosing Format > Heading > 1. Or you can use the pop -up menu on the toolbar.
That's all there is to it. That's how you designate an element in Composer. Designate all the headings in the same fashion. Remember that there are six levels of headings, with 1 being most important and 6 being least important. Designate the extended quotation by choosing Format > Paragraph > Block Quote . This optio n does not appear in the pop-up menu on the toolbar. It also does not appear in the Mac version of this program! Mac users should follow the following circuitous route: o o o o Choose Format > Character Info. A dialog box should appear. Click the tab marked Paragraph. Using the "Additional Style" pop-up menu, choose Block Quote . Click the button marked OK.
Designate the unordered lists (lists that are not numbered) by choosing Format > List > Bulletted [sic for Windows version!]. Or you can just click the bulleted list button on the toolbar. o You may wish to delete any extra characters that appear in the list of links, just as you did in the previous section. 13
How the Web Works, Part I: Introduction to HTML HTML Tutorial
By default, Composer makes each line in the list a bulleted item. But you don't want the URLs and descriptions to be separate items. To correct this, click at the beginning of each URL. Press your backspace (Windows) or delete (Mac) button until the URL appears on the same line as the site name. Insert a line break by choosing Insert > New Line Break or by pressing Shift + Enter (Windows) or Shift + Return (Mac).
Designate the ordered list (the one that is numbered) by choosing Format > List > Numbered. Or you can just click the numbered list button on the toolbar. You will notice number signs appear before each list item. Add a horizontal rule at the end of the page. o This is a little tricky. Click at the end of the page and your blinking text-insertion cursor should appear at the end of the last line of text, which you marked as a list item. Press Enter or Return to start a new line. However, since you're in a list, the next line will be designated as a list also. You need to "escape" the list. Click the bulleted list button in the toolbar to escape from the list. Click the H. Line button in the toolbar to insert a horizontal rule. Or choose Insert > Horizontal Line.
o o o
Press Enter or Return to start a new line. Add some information about how to contact the author of the page after the horizontal rule. Just type something like: This page is maintained by Bart Everson [[email protected]]. Substitute your own name and e-mail address for mine. Designate the line you just typed as an address by choosing Format > Paragraph > Address. Or you can use the pop-up menu on the toolbar. Select the e-mail address you just typed. Designate this selection as a link by choosing Insert > Link or by clicking the Link button in the toolbar. o o A dialog box should appear. In the field, enter mailto:[email protected]. Substitute your own e-mail address for mine. Click OK. Select the URL. Choose Edit > Copy. Designate this selection as a link by choosing Insert > Link or by clicking the Link button in the toolbar. A dialog box should appear. Paste the URL you just copie d into the field. Since you can't access the Edit menu, you will have to use the keyboard shortcut, which is Ctrl+V for Windows and Command+V for Macintosh. (The command key is sometimes called the Apple key and is next to the spacebar.) Click OK.
Make the URLs in the list of links into actual links: o o o o
Select the phrase 70 gallons in the second paragraph.
14
How the Web Works, Part I: Introduction to HTML HTML Tutorial
Designate this selection as a bold or italic by choosing Format > Style > Bold or Format > Style > Italic. You may also click the appropriate button in the toolbar. Notice the lack of an emphasis or strong emphasis option.
Choose Format > Page Colors and Properties (Windows) or Format > Page Properties (Mac). o o A dialog box should appear. Click the option marked Use Custom Colors. From the pop-up menu (marked Color schemes in Windows) choose Black on Lt. Yellow .
Choose File > Save to save your work.
5.4
Checking Your Work
Now it's time to check this page and see what it actually looks like in a browser like Netscape Navigator. Remember, you're using Composer, which is not a browser! Things will look a little bit different in "authoring" mode. To load the page into Navigator, choose File > Browse Page or click the preview button in the toolbar.
Things should look a little different now. You may also notice some problems. The ordered list may have duplicate numbers, for example. Note that the HTML-generated numbers only showed up as number signs (#) in Composer. You may fix this problems as follows: Return to Composer. An easy way to do this is to choose File > Edit Page. Delete the numbers in the ordered list. They don't need to be explicitly stated. Delete the symbols from the list of links. They are also redundant. Choose File > Save to save your work. Load the page into Navigator by choosing File > Browse Page or clicking the preview button in the toolbar.
The problem should be fixed. Take a moment to examine the source code and see what Composer has done on your behalf: Choose View > Page Source . Examine the HTML code. When you're done, close this window.
5.5
Validating Your Work
Try to validate mustard_compo ser.html as described in section 3.2 above. The results should tell you something very important about using Composer.
15
How the Web Works, Part I: Introduction to HTML HTML Tutorial
6. Using Microsoft Word's "Save as Web Page" Feature
As you saw above, Composer can make things easier, but there is a price that you must pay for this convenience. Now you'll look at an even easier feature available directly in Microsoft Word. Return to Microsoft Word. Open the file named All_About_Mustard.doc , if it is not already open. Choose File > Save as Web Page .
Note: This feature is only available in some versions of Word. In previous versions it was labeled Save as HTML. In even older versions, it simply does not exist.
Name this file mustard_word.html . Click the button marked OK.
Now take a look at the Web page you just created in Netscape Navigator. Return to Netscape. Choose File > Open Page . (Mac users should choose File > Open > Page in Navigator.) A dialog box should appear. Navigate to your tutorial folder. (Windows users will need to click the Choose File button.) Choose the mustard_word.html file, and click the Open button.
The Word-generated Web page should now be displayed in the browser. Wow! That was quick and easy. But if you take some time to look over the page, you may discover that it's not all that great. Take a moment to examine the source code and see what Word hath wrought: Choose View > Page Source . Examine the HTML code. When you're done, close this window.
It may amuse you to know that some Web authoring packages actually offer a feature called Clean Up Microsoft Word HTML. It's also instructive to compare the sizes of the files you've created so far. Open your tutorial folder. o o Windows users: Choose View > Details. Mac users: Choose View > as List .
You may need to expand the window to see everything. Click on the tab marked Size to sort the files by size. Compare the file sizes. Remember that when it comes to Web pages, small is beautiful!
You can try to validate mustard_word.html if you wish, but the results will be the same as with the page generated through Composer.
16
How the Web Works, Part I: Introduction to HTML HTML Tutorial
7. Uploading Your Files
The next step is to put these files on the Web. To do this, they must be uploaded from your desktop computer to one of the Xavier Web servers. The server designated for personal pages is named xavier.xula.edu . Your home directory is on this server. It was created with your Xavier e -mail account. Remember that "directory" is just another term for "folder." In order to access your home directory, you will need to know your username and passwo rd. (If you've never done this before, your password is probably still the default password that was issued when your account was first created: xavier1 . You should change it as soon as possible.) In this section, you will learn how to use another piece of software to upload files to the Xavier server through a procedure known as File Transfer Protocol or FTP. This piece of software is an FTP client. To use any FTP client, you must have an active connection to the Internet. Windows users should use WS_FTP (see section 7.1 below) Mac users should use Fetch (see section 7.2 below)
17
How the Web Works, Part I: Introduction to HTML HTML Tutorial
7.1
Using WS_FTP (Windows Only)
Note: If you dont have WS_FTP LE, download it for free from FTPplanet.com.
Connecting to the Xavier Web Server
Start WS_FTP on your computer. A dialogue box similar to the one below should appear (if not, click Connect in the lower left hand corner).
Fill in the information as shown, substituting your own username in the User ID field. The proper host name is webusers.xula.edu. Type in your regular Xavier e -mail password (which will appear as ******) in the Password field. If you are working on your own personal computer, you may also assign a Profile Name and check the Save Password box, then click Save. This will allow you to make a shortcut to your account in the future and not have to enter your password every time you connect. Don't do this if you are at a shared computer! When you're done, click OK.
After you complete the above step, the program should connect to the Xavier Web server, and if you have the 'bells and whistles', you'll hear a sound effect of a train coming through. This is not meant to frighten you. It's supposed to be a good thing.
18
How the Web Works, Part I: Introduction to HTML HTML Tutorial
You should now see something like this:
Take a moment to contemplate this marvel of the modern age. Notice that there are two windows. The window on the left shows the local system; the window on the right shows the remote system. The local system is the machine on your desktop, r ight in front of you. The remote system is somewhere else probably in a building somewhere else on campus, though theoretically it could be anywhere from a couple yards to half a world away. In this case, the remote system is the Xavier Web server. You will use WS_FTP to transfer files from your local system to the remote system. Notice the two arrow buttons between the two windows. They may look innocuous, but they're the heart of this program. The arrow which points from left to right is used to copy local files to the remote system. This is called as uploading. The arrow which points from right to left is used to copy remote files to the local system. This is called as downloading.
Creating a New Directory
Click the MkDir (pronounced 'make deer' and meaning 'make directory') button to the right of the Remote System window. A dialog box should appear asking you to "Enter new remote folder name." Fill in the field with myhtmltutorial. Click OK. In the Remote System window, you should now see a folder named myhtmltutorial. Double-click on myhtmltutorial to open it.
19
How the Web Works, Part I: Introduction to HTML HTML Tutorial
Uploading Your Files
First you will select your files on the local system, then you will upload them to the remote system. In the Local System window (left-hand side), navigate to the place where your files are located. Navigation can be a little tricky in this program! Here are some tips: o o o o Double-click to open a folder. Double-click the green arrow to move up a level in the file hierarchy. To get to the desktop, navigate to the WINDOWS folder and open the DESKTOP folder. Remember that your files are in the tutorial folder on the desktop. When you fin the tutorial folder, double-click to open it.
When at last you find your files, you must select them. Hold down the shift key while you the files you wish to upload. Select all the HTML files you created. Don't forget to select mustard.jpg as well.
When all your files are selected, you may upload them to the server. Click the right arrow button in the center of the window. If a dialog box appears asking if you wish to upload the files, click Yes.
WS_FTP will begin uploading. When done, the myhtmltutorial folder in the Remote System window should contain the files you selected for transfer. Check to make sure this is the case. Proceed to section 7.3 below.
20
How the Web Works, Part I: Introduction to HTML HTML Tutorial
7.2
Using Fetch (Mac Only)
Connecting to the Xavier Web Server
Start Fetch on your Mac. A dialog box similar to the one below should appear (if not, choose File > New Connection from the menu bar).
Fill in the information as shown, substituting your own username in the User ID field. The proper host name is webusers.xula.edu. Type in your regular Xavier e -mail password (which will appear as ******) in the Password field. When you're done, click OK.
You should now be seeing a listing of your home directory on xavier.xula.edu . Time for a little terminology. Let's talk about the local system and the remote system. The local system is the machine on your desktop, right in front of you. The remote system is the machine you just connected to, and it's somewhere else probably in another building on campus, though theoretically it could be anywhere from a couple yards to half a world away.
Creating a New Directory
In the menu bar, choose Directories > Create New Directory. Fill in the field with myhtmltutorial. Click OK. Double-click on myhtmltutorial to open it.
You should now see a directory named myhtmltutorial. You may need to scroll down to see it.
Uploading Your Files
First you will select your files on the local system, then you will upload them to the remote system. In the menu bar, choose Remote > Put Folders and Files. In the dialog box that follows, navigate to the contents of your tutorial folder.
21
How the Web Works, Part I: Introduction to HTML HTML Tutorial
Select and Add each file you wish to upload. Select all the HTML files you created. Don't forget to select mustard.jpg as well. When you are finished, click Done . Make sure the next dialog box has the following settings: Text Files: Text Other Files: Raw Data Click OK.
Fetch will upload the files. When the upload is complete, the contents of myhtmltutorial in the Fetch window should contain the files you selected for transfer. When you are satisfied that all your materials have been transferred, proceed to section 7.3 below.
7.3
The Moment of Truth
Now comes the moment of truth! Point your browser to:
http://xavier.xula.edu/your_username_here/myhtmltutorial/mustard.html
Congratulations -- you're a webmaster!
22
How the Web Works, Part I: Introduction to HTML HTML Tutorial
8. Cleaning Up
You probably don't want to leave these tutorial files on the server, so you may delete them. Return to your FTP client. Select the files you wish to delete from the remote system. Hold down the shift key to select multiple files. o o Windows users: Click the button to the right of the Remote System Window that is marked Delete . Mac users: Choose Remote > Delete Directory or File
Click Delete in the dialog box that appears.
You may now close all running applications. If you are doing this tutorial in a lab, you should also take a moment to clean up the desktop as a courtesy to the next user. Simply drag your tutorial folder to the Recycle Bin (Windows) or the Trash (Mac). Don't forget to shut down your computer and turn off the monitor.
23
How the Web Works, Part I: Introduction to HTML HTML Tutorial
All About Mustard
An Abbreviated History of Mustard
The Greeks used mustard as a condiment and a drug but it was the Romans who first made real culinary use of it by grinding the seeds and mixing the flour with wine, vinegar, oil and honey. When they moved into Gaul they took mustard plants with them and it was in the rich wine growing region of Burgundy that mustard flourished. It is reputed that at a festival in 1336 attended by the Duke of Burgundy and his cousin King Philip the Fair, no less than 70 gallons of mustard were eaten. Reports do not say how pickled the guests were. Pope John XX11 of Avignon loved mustard so much that he created the post of "Mustard Maker to the Pope," a job he gave to an idle nephew who lived near Dijon. Dijon soon became the mustard centre of the world and in fact so important was it that in 1634 a law was passed to grant the men of the town the exclusive right to make mustard. 1777 saw the start of mustard making as we know it today as it was in this year that Messieurs Grey and Poupon founded their company. They used Grey's recipe and Poupon's money! We still owe a lot to this redoubtable duo as in 1850 their company invented a steam operated grinding machine so ending the era of laborious and back-breaking hand grinding. And as Jesus said in the Gospel of Thomas: [The Kingdom of Heaven] is like a mustard seed. It is the smallest of all seeds; but when it falls on tilled soil, it produces a great plant and becomes a shelter for birds of the air.
A Mustard Recipe
Ingredients 4 Tablespoons Dry mustard powder 1 Tablespoon White Wine Vinegar 2 Tablespoons Flat beer 1 Clove Garlic 1 Teaspoon Sugar 1/2 Teaspoon Salt 1/4 Teaspoon Turmeric 1 Tablespoon Olive oil -- optional Preparation 1. Whisk together dry mustard, vinegar and beer. 2. Use a garlic press or large pair pliers to squeeze the juice from the clove o f garlic into the mixture. 3. Stir in sugar, salt and turmeric. 4. To make mustard smoother and less hot, add olive oil to taste.
Mustard Links
Europenne de Condiments http://www.moutarde.com/ A mustard company's website Mustard Gas http://www.spartacus.schoolnet.co.uk/FWWmustard.htm A description of mustard gas Mount Horeb Mustard Museum http://www.mustardweb.com/ The world's largest collection of prepared mustards
24
Basic HTML Tutorial by Robert Frank, Team 358 HTML Structure HTML, or hypertext markup language, is very simple to learn and very simple to use. HTML is used in most modern websites. HTML has two basic forms: <name attribute1="value1" attribute2="value2">Content of 'name'</name> and <name attribute1="value1" attribute2="value2"> After you learn the basic form of HTML, you are ready to do some HTML coding. And just so you know, the capitalization of the name's of the basic structure and the attributes does not matter, while the capitalization of the values and contents of them do. HTML pages always start with a DTD, or document type definition. This allows the web-browser to determine what type of HTML you are using as well as what language the characters are in. The type of DTD that I would recommend is: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> After the DTD, you would continue with the HTML tag, like so: <HTML> ... </HTML> HTML pages are broken into two main sections: the HEAD and the BODY, both contained within the HTML tags. The head contains the title and sometimes meta tags. The body contains the main page that everyone sees. A typical website looks something like this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> ... </HEAD> <BODY> ... </BODY> </HTML>
Page Title The title is the most important element of a quality web page. The title allows people to know what they are visiting and represents the page. When search engines add your website to their database, they add the title as what you see when searching for what you want. Page titles are very useful for letting your guests know just what is on you website. There can only be one title per page, so only the first code read containing the title will be shown. In order to add a title use the following code: <TITLE>this is the title</TITLE> Please note that this is one of the tags that will go within the HEAD tags. Here is an example of a web page:
Simple Headings There are six different simple headings that can be used (H1 to H6). Many websites use headings. You can use the following code to make headers. <H1>This is the Heading</H1> <H2>This is the Heading</H2> <H6>This is the Heading</H6> Of the six different headings, <H1> produces the biggest, and <H6> produces the smallest. You can also center the headings by using the align attribute, as you can see here: <H1 ALIGN="center">This is the centered Heading</H1>
Paragraphs Paragraphs are very useful and should be used. They can be created by using the following code: <P>This is a paragraph.</P> <P>This is a second paragraph.</P>
New Lines/Spacing New lines are very important for making any website. In order to create a new line you would add the following code: <BR> Spacing is also very important. When using HTML, you can use just a space, but only up to the first space. Beyond the first space, the web-browser will just ignore. In order to do any amount, you must use the following code for each space wanted:
Horizontal rules Horizontal lines can be added by doing the following code: <HR> You can also change the width of the line as well as align them to the left or right, as can be seen here: <HR ALIGN="left" WIDTH="50%"> Please note that you can have the width in pixels instead of percentages as well. You can also change the height in pixels by doing the following: <HR SIZE="5">
Comments Comments are very useful for people that want to identify things in their HTML. They are used when multiple people update website. They are also used to "block" the HTML code. The user does not see a comment unless they view the source code. You can add a comment by doing the following: <!-- This is the comment -->
Changing Font Color/Face/Size Changing the font color, face and size are all relatively simple, and are all contained within the same HTML function. In order to just change the color, you can do the following: <FONT COLOR="red">This is the text that the color applies to</FONT> This is the text that the color applies to Within the color field you may name a color, as shown, or you may use the HEX code of the color, which is the preferred method, as seen below: <FONT COLOR="#FF0000">This is the text that the color applies to</FONT> This is the text that the color applies to The color in hex code has a lot more ability and I would recommend that you use it so that you can have a unique website. The hex code of red then green and blue, all up to 255 but in hexadecimal code. Please note that not all monitors display all colors. Changing the face of a font is also very simple and useful. You can change the face of the font to whatever font you wish, but be careful, if a user does not have that font installed on their computer, then it will just show the default font. You can change the face by using the following code: <FONT FACE="Webdings">This is the text that it applies to</FONT> !"#$ #$ %"& %&'% %"(% #% ())*#&$ %+ Because people may not have the specific font type that you want it is a good idea to have backup font types separating them by commas, as seen here: <FONT FACE="BobsFont,Wingdings,Times New Roman,Times,Courier New">This is the text that it applies to</FONT> !"#$ #$ %"& %&'% %"(% #% ())*#&$ %+ You can change the font size using two basic methods. You can do it by using the size attribute, or by using the style attribute. The code for the size attribute: <FONT SIZE="5">This is the text that it applies to</FONT>
This is the text that it applies to
Using this method, you can change the font from 1 to 7. I would not recommend this method. You could also make the font change, compared to what it was right before as can be seen here: <FONT SIZE="+2">This is the text that it applies to</FONT>
This is the text that it applies to
As you can notice the font size increased by two font sizes from what it was right before. You can go from -7 to +7, where the -7 decreases the font size by seven and the positive increases it by seven. Another method of changing the font size it by using the following: <SMALL>The small text<SMALL> The small text <BIG>The big text<BIG> The big text The more commonly seen font size can be changed by using the font style attribute. You can use this code for modifying that: <FONT STYLE="Font-Size:20px;">This is the text that it applies to</FONT> This is the text that it applies to By using this, you can easily modify the font size from 1 and on. this is what most programs and websites use as their font size.
Bolding/Italicizing/Underlining/Striking You may also want to bold, italicize, or underline some of you website. It is very good for making things stand out. You can bold something using the following code: <B>This is the text that it applies to</B> This is the text that it applies to
Or you may bold by doing the following: <STRONG>This is the text that it applies to</STRONG> This is the text that it applies to Or you may italicize using the following: <I>This is the text that it applies to</I> This is the text that it applies to And another way to italicize is: <EM>This is the text that it applies to</EM> This is the text that it applies to Or you may underline using the following: <U>This is the text that it applies to</U> This is the text that it applies to Or you may strikethrough text by using the following: <STRIKE>This is the text that it applies to</STRIKE> This is the text that it applies to
Making Links Links are extremely useful for bringing the user to another page that may be within your website, or may be another website that you think would be useful to others. You can create a simple link using the following code: <A HREF="tutorials.php">This is the text that it applies to</A> This is the text that it applies to There are several different types of links, for local pages, you would use something like the above. For links to other sites, you may use something like the following: <A HREF="http://bobbys.us/tutorials.php">This is the text that it applies to</A> This is the text that it applies to There are many different things that you can do besides just simple links, but this is still very useful.
Making Links in new windows You may occasionally need to open a new window for the user because you may not want them to leave you website or another reason. Many people these days do not like new windows though, and will just block all new windows. In fact in many 'top ten website mistakes', people place having new windows within the list. But if you want to make new windows, you can use the following code: <A HREF="http://bobbys.us/tutorials.php" TARGET="_BLANK">This is the text that it applies to</A> This is the text that it applies to
Making Links to email addresses Many times you may also want to have a link to your email address. I personally do not like the method and would recommend using a script to send the mail for you, but it is always a good thing to know. To add a link to ayou can use the following code: <A HREF="mailto:[email protected]">E-mail me</A> E-mail me Please be warned, it is dangerous to place your email address like this, there are many crawlers out there just looking for emails like this. Once crawlers collect emails, lists are sold to spammers. This is how many people get a lot of spam.
Linking to somewhere in the page You may also have a large page and want to link to different pieces of the webpage. In order to do this, first you must make location to link to. You can do this by using the 'name' attribute on the 'A' element, as can be seen here: <A NAME="section1">Section One - Downloads</A> This would create a place to link to called 'section1'. You can link to it by using the following code: <A HREF="#section1">Go to downloads</A> or by putting the name of the HTML document, like so: <A HREF="tutorials.php#section1">Go to downloads</A>
Adding images You may also want to create image. Images are simple to add, and are very useful for showing pictures or diagrams. To add an image you can use the following code: <IMG SRC="images/one.gif" ALT="alternate text"> Once you add an image, you may notice that there is a border when you make the image a link. In order to get rid of this you will have to change the border attribute. Here is an example of how to change the border to a size of 0: <IMG SRC="images/one.gif" ALT="alternate text" BORDER="0">
Centering Text When making your page, you may also want to center your header or whatever else. In order to center text you make use the following code: <CENTER>This is the text that it applies to</CENTER> This is the text that it applies to
Special Characters In many cases you may find that you may need to insert special characters. They are very simple to insert, if you know what each character is. As you may remember we added a space by using . Other special characters can be added by doing & followed by the code for them, which can be found here (please note: this is not on my site), and then you would place a semi-colon afterwards. here are some examples: © produces & produces & ¢ produces ® produces ± produces ² produces _ etc...
Lists You may also have lists of items that you will need to add. There are several types of lists. The two most common ones are ordered and unordered lists. Ordered lists are called ordered lists because they have numbers for people to
be guided by. Here is an example of an ordered list: <OL> <LI>Item one</LI> <LI>Item two</LI> <LI>Item three</LI> </OL> 1. Item one 2. Item two 3. Item three There are also different types of ordered lists. Here is an example of a specific type of ordered list: <OL TYPE="I"> <LI>Item one</LI> <LI>Item two</LI> <LI>Item three</LI> </OL> I. Item one II. Item two III. Item three The 'TYPE' attribute can contain one the following types: 1, a, A, i, or I. Unordered lists are similar to ordered lists, except that they have bullets instead of numbers. Here is an example of an unordered list: <UL> <LI>Item one</LI> <LI>Item two</LI> <LI>Item three</LI> </UL> Item one Item two Item three
Tables Tables are used in many websites. Although they are not always seen, tables are very good at aligning certain things. In fact, this website uses tables, but you probably cannot see them. Tables have many attributes that can be modified to fit exactly what you want. Simple tables can be added by doing the following: <TABLE BORDER="1"> <TR> <TD>top left</TD> <TD>top right</TD> </TR> <TR> <TD>bottom left</TD> <TD>bottom right</TD> </TR> </TABLE> top left top right bottom left bottom right Here is what it would look like without a border: <TABLE>
<TR> <TD>top left</TD> <TD>top right</TD> </TR> <TR> <TD>bottom left</TD> <TD>bottom right</TD> </TR> </TABLE> top left top right bottom left bottom right You can simple add more rows by adding another <TR> with the columns. Here is an example with five rows: <TABLE BORDER="1"> <TR> <TD>top left</TD> <TD>top right</TD> </TR> <TR> <TD>row 2 - left</TD> <TD>row 2 - right</TD> </TR> <TR> <TD>row 3 - left</TD> <TD>row 3 - right</TD> </TR> <TR> <TD>row 4 - left</TD> <TD>row 4 - right</TD> </TR> <TR> <TD>bottom left</TD> <TD>bottom right</TD> </TR> </TABLE> top left top right row 2 - left row 2 - right row 3 - left row 3 - right row 4 - left row 4 - right bottom left bottom right You can also add columns by just adding a <TD> in each of the rows. Here is an example: <TABLE BORDER="1"> <TR> <TD>top left</TD> <TD>top - column 2</TD> <TD>top - column 3</TD> <TD>top right</TD> </TR> <TR> <TD>bottom left</TD> <TD>bottom - column 2</TD> <TD>bottom - column 3</TD> <TD>bottom right</TD>
</TR> </TABLE> top left bottom left
top - column 2 bottom - column 2
top - column 3 bottom - column 3
top right bottom right
<TH> can be used instead of <TD>. The difference between the two is that TH is bolded and centered, whereas TD is left aligned and unbolded. There are also many more attributes for each column and row as well as the tables.
Much more... There are also many more attributes and elements that I did not cover. You can visit http://www.w3.org/ to find all of the types of elements, now that you know the basics of HTML. One good HTMl cheatsheet is located at http://www.webmonkey.com/. And of course, look at what people have done on their website, by going to 'View Source,' it is a great way to learn HTML code.
Validity of your page When you are done making your page, it is a good idea to make sure that it is valid. w3.org has created an online website validator. You can find their validator here: The W3C Markup Validation Service
HTML Exercises
06 Frames
06 Frames
1 Description of Frames
Netscape introduced frames when they released version 2 of their navigator browser, although various additions to frames have been made since then. Frames allow a web page to be divided into several independent sections. A page using frames is actually made up of several .html files. There is one file for each frame on the page and one additional file that contains the frameset information I.e. how each frame will be arranged on the page. One common example of frame use is to have a page split into two sections one for the page content and one for the navigation. Because both are in different frames, any scrolling within the main content frame will not affect the position of the navigation frame.
1.1
The FRAMESET Tag
The <FRAMESET> tag is used to specify the layout of the frames on the page. The document containing the frameset isnt visible. It simply specifies how the other documents will be arranged on the page. It is placed in your HTML document where your <BODY> section would normally appear and contains the following attributes.
COLS=
ROWS=
FRAMESPACING = and BORDER=
Specifies how many frames the window will be split into vertically and specifies the width of each frame. The width can be indicated in pixels or % of the available space. Numbers separated by commas specify the width of each frame. The default width is 100% = one column taking up the whole width. Specifies how many frames the window will be split into horizontally and specifies the height of each frame. The height can be indicated in pixels or % of the available space. Numbers separated by commas specify the height of each frame. The default is 100% = one row taking up the whole height. Many browsers will place a bit of blank space between frames. Using these two attributes and setting them both to 0 can prevent this. Internet Explorer uses FRAMESPACING while Navigator and other browsers such as Opera use BORDER.
A FRAMESET may be split into both rows and columns to create a grid.
Steve ONeil 2005
Page 1 of 11
http://www.oneil.com.au/pc/
HTML Exercises
06 Frames
FRAMESET Examples <FRAMESET ROWS=40%, 60% COLS=200,*> Content of frameset here </FRAMESET>
This would create a frameset with two rows and two columns. The first row would take up 40% of the height and the second row would take up 60% of the height. The first column would be 200 pixels wide and would leave the remaining width for the second column. The resulting frameset would be similar to the diagram below.
40%
60%
200 pixels
Remaining space
1.2
The FRAME Tag
Once youve used the <FRAMESET> tag to define how many frames you will have, each of those frames will need to be defined with a <FRAME> tag. The <FRAME> tags are inserted between the start and end <FRAMESET> tags. The <FRAME> tag can contain the following attributes:
FRAMEBORDER=
MARGINHEIGHT= MARGINWIDTH= NAME= NORESIZE SCROLLING=
SRC=
If FRAMEBORDER=1, then the frame will have borders between itself and each adjacent frame. If FRAMEBORDER=0, the frame will have no borders around it. 1 is the default value. In most recent browsers, this attribute may also be placed in the FRAMESET tag to create a default for each frame. Determines the amount of space (in pixels) above and below the frame. Determines the amount of space (in pixels) on either side of the frame. Name of the frame. This is used as a reference for hyperlinks as explained later. Names must begin with an alphabetical character (A to Z). When this attribute is used, the frame cannot be re-sized with the mouse Determines whether or not a scroll bar will appear in the frame. The choices are yes, no and auto. Auto means that a scroll bar will appear if the frame contents are big enough to need one (wont fit in the frame without scrolling). Auto is the default. Reference to the document that will initially be displayed in that frame
Steve ONeil 2005
Page 2 of 11
http://www.oneil.com.au/pc/
HTML Exercises
06 Frames
1.3
FRAME tag examples
<FRAME SRC=main_document.html SCROLLING=no FRAMEBORDER=0>
This frame would have no scroll bar, no border and would initially display the document named main_document.html
<FRAME SRC=other_document.html NAME=document>
This frame would show the document other_document.html and would have the name named document.
1.4
Complete example
<FRAMESET ROWS=100% COLS=1*, 400,2*> <FRAME SRC=left.html NAME=left> <FRAME SRC=middle.html SCROLLING=yes NAME=middle> <FRAME SRC=right.html SCROLLING=no NAME=right> </FRAMESET>
In this example, we would have a frameset that wont be separated into more than one row (So you could leave out the ROWS attribute if you wanted to). It would however, be split into three vertical sections. The middle section will be 400 pixels wide. Of the remaining space, one third will be taken by the left frame with 2 thirds being taken by the right frame (1* and 2*). Each section has a name and the middle section will have a scroll bar. The frameset will result in a page layout similar to the diagram below. 400 pixels 2x left frame id h
left.html frame name =left
middle.html frame name=middle
right.html frame name=right
Steve ONeil 2005
Page 3 of 11
http://www.oneil.com.au/pc/
HTML Exercises
06 Frames
Nested Framesets
A common technique with frames is to have one frameset inside another. Take a look at the HTML in the following example. (Notice the indentation this makes the HTML easier to read and edit)
<FRAMESET ROWS="10%, 90%"> first frame <FRAMESET COLS="20%, 80%"> second frame, first row second frame, second row </FRAMESET> </FRAMESET>
This frameset would result in a frame along the top with the bottom frame being further divided into two vertical frames as shown below. Note how the two frames of the second frameset are contained in the lower frame of the first frameset. The gap between the second frameset and the frame it is in wouldnt actually show in the browser. They are only shown here to make it easy to see the different framesets.
First Frame
Second Frame
Third Frame
In a browser it would look similar to the figure below.
First Frame
Second Frame
Third Frame
Steve ONeil 2005
Page 4 of 11
http://www.oneil.com.au/pc/
HTML Exercises
06 Frames
Non-Frames Browsers
One of the drawbacks of frames is that many visitors to your site may be using a browser that doesnt support frames. HTML makes allowances for this by providing alternate HTML for these browsers by using the <NOFRAMES> tag. The <NOFRAMES> section is normally placed before your closing <FRAMESET> tag. If we added a <NOFRAMES> section to the example in the previous section, the whole document may look something like this. The HTML highlighted in bold is what will appear for browsers that wont recognise the frames.
<HTML> <HEAD> <TITLE>Frames document</TITLE> </HEAD> <FRAMESET ROWS="20%, 80%"> <FRAME SRC="blank.html"> <FRAMESET COLS="20%, 80%"> <FRAME SRC="blank.html"> <FRAME SRC="blank.html"> </FRAMESET> <NOFRAMES>
Anything in this section would appear in browsers that dont recognize frames
</NOFRAMES> </FRAMESET> </HTML>
Only a small percentage of people browsing the web have a non-frames compatible browser but a small percentage of millions is still quite a few people that dont see frames. Since browsers that dont understand frames probably wont understand a lot of other newer tags also, your non-frames section doesnt need to be fancy. It should, however, have enough relevant links to enable people without frames to get to the important information on your site.
Steve ONeil 2005
Page 5 of 11
http://www.oneil.com.au/pc/
HTML Exercises
06 Frames
Hyperlinks in Frames
When you are in a frames document, hyperlinks work the same as normal, except that there is one additional attribute the TARGET attribute. The TARGET attribute equals the name of the frame where the document the hyperlink refers to should load. If no target is specified, the destination document will load in the same frame the hyperlink was in. E.g. We have a page divided into two vertical frames. The first frame is named left and the second frame is named right. If we had a link in the left frame that was intended to load the document called news.html in the right frame, we would use the following HTML.
<A HREF=news.html TARGET=right>current news</A>
If the target attribute were omitted, then the new document would load in the left frame instead of the right frame where it should be. This is illustrated in the following two diagrams. In the first diagram, the target of the link has been specified as right. In the second one, the target attribute hasnt been included. Left frame Right Left frame Right
Hyperlink
Hyperlink
Link will cause new document to appear in this frame
Link will cause new document to appear in this frame
In addition to using the name of a frame as the target, there are several key names that can be used as a target for various purposes. Each begins with an underscore character ( _ ). They are listed below.
_blank
_parent _self _top
Destination document will load in a new, unnamed browser window. The destination document will also load in a new window if the target name is not the same as an existing frame name. In nested framesets, this will load the destination document in the parent frame (The frame that contains the nested frameset). This will load the destination document in the same frame that the link is in. This is the default if no target is specified. This will cause the destination document to fill the entire browser window.
Steve ONeil 2005
Page 6 of 11
http://www.oneil.com.au/pc/
HTML Exercises
06 Frames
Tips for Frame Links
Some people really dont like frames. The most common reason why is because there are so many sites that use frames poorly, particularly in the way links are handled, so here are a few tips to help you make frames improve your site rather than annoy every one who visits. 1. If you are linking to another site, make sure you use _top as the frame target. Trying to browse a website when its in the frame of someone elses site can be a real pain. Some web developers purposely leave this out to make sure their logos and navbars remain when visitors go to other sites. This is generally frowned upon by other web developers. 2. If you are using one frame for navigation, make all of its links target a common frame, so the user knows where the new document will appear. 3. When creating your frameset, give the frames meaningful names that you will remember. It will make life easier when you are creating links in each of the documents.
Steve ONeil 2005
Page 7 of 11
http://www.oneil.com.au/pc/
HTML Exercises
06 Frames
Exercise 3
1
Creating a site using Frames
We will create a site consisting of two vertically arranged frames. The left frame will contain a navigation bar similar to the one created in the chapter on tables. The right frame will display the different pages in the site as they are selected from the navigation bar. The first step in creating a site with frames is usually to create the HTML documents that will be displayed in each frame. The documents we will be using have already been created so we will look at each one. Open the following files. These will be displayed in the right frame, starting with welcome.html
contacts.html events.html links.html welcome.html who.html
3 4 5 6
Look at the HTML for each file and preview it. Open the file called navbar.html and preview it. This file will be displayed in the left frame. Now open the file called frames.html. This is where we will put the frameset to specify how the other documents will be arranged. We will insert the FRAMESET and FRAME HTML so that our document will look like the one below. The HTML that you will add has been highlighted with bold text.
<HTML> <HEAD> <TITLE>Cannington Cougars Football Club Website</TITLE> </HEAD> <FRAMESET COLS="140,*"> <FRAME NAME="navbar" SRC="navbar.html" SCROLLING="no" NORESIZE MARGINWIDTH="0"> <FRAME NAME="contents" SRC="welcome.html" MARGINWIDTH="0"> </FRAMESET> </HTML>
Save and preview the document. Notice that there is a border between the two frames. We will now add some HTML to remove the border. Modify the FRAMESET tag so it appears as follows, then preview the changes. Your page should look similar to the example below. This exercise is continued on the next page.
<FRAMESET COLS="140,*" BORDER="0" FRAMESPACING="0" FRAMEBORDER="0">
Steve ONeil 2005
Page 8 of 11
http://www.oneil.com.au/pc/
HTML Exercises
06 Frames
The last thing we will do is to create hyperlinks for all the buttons in the navbar.html file. These hyperlinks will use the target name contents to ensure that the documents they link to will load in the right window (remember that we called the right frame contents in the NAME attribute). We will also add the target name _top to the links on the links.html document to ensure that the sites they point to will load in the whole window rather than within the frame. 8 Open the file navbar.html and add hyperlinks to each of the navigation buttons. The resulting HTML should appear similar to the HTML below.
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="110"> <TR><TD ALIGN="center"> <IMG SRC="pics/nav_logo.gif" ALT="Cannington Cougars Football Club Logo" WIDTH=55 HEIGHT=60 BORDER=0></TD></TR> <TR><TD><A HREF="welcome.html" TARGET="contents"> <IMG SRC="pics/nav_home.gif" ALT="Home" WIDTH="110" HEIGHT="25" BORDER="0" HSPACE="5"></A></TD></TR> <TR><TD><A HREF="about.html" TARGET="contents"> <IMG SRC="pics/nav_about.gif" ALT="About Us" WIDTH="110" HEIGHT="25" BORDER="0" HSPACE="5"></A></TD></TR> <TR><TD><A HREF="events.html" TARGET="contents"> <IMG SRC="pics/nav_events.gif" ALT="Upcoming Events" WIDTH="110" HEIGHT="25" BORDER="0" HSPACE="5"></A></TD></TR> <TR><TD><A HREF="who.html" TARGET="contents"> <IMG SRC="pics/nav_who.gif" ALT="Who's Who" WIDTH="110" HEIGHT="25" BORDER="0" HSPACE="5"></A></TD></TR> <TR><TD><A HREF="contacts.html" TARGET="contents"> <IMG SRC="pics/nav_contact.gif" ALT="Contact Us" WIDTH="110" HEIGHT="25" BORDER="0" HSPACE="5"></A></TD></TR> <TR><TD><A HREF="links.html" TARGET="contents"> <IMG SRC="pics/nav_links.gif" ALT="Links To Other Sites" WIDTH="110" HEIGHT="25" BORDER="0" HSPACE="5"></A></TD></TR> </TABLE>
Save and preview the document. To see how it looks, you will need to open the file frames.html and preview that since that file has the frameset information. If you previewed navbar.html the navbar would take up the whole screen, which wouldnt look right. Preview frames.html and test the changes by clicking the links in the navbar. Click the link for the Links page and try scrolling down the page. Go to the links page and click on one of the AFL football club links. Notice the way the link will load the new site within the frame. This is because we didnt specify a target for the hyperlink. We will now change that by adding a target attribute for these links. (We will just do the AFL club links the rest have already been done) Open the file links.html in your editor. For each of the AFL club links we will add a target as TARGET=_top (since we have only one frameset TARGET=_parent would also work) Below is an example of how the first link should look.
10
11
<DT><A HREF="http://www.afc.com.au/" TARGET="_top">The Crow's Nest</A> <DD>The Official Site for The Adelaide Football Club
12 13
Once you have done the first one, select and copy the HTML and paste it into the other links. Reload / refresh your browser and test the same link again.
Steve ONeil 2005
Page 9 of 11
http://www.oneil.com.au/pc/
HTML Exercises
06 Frames
Inline Frames
Regular frames split a page into different sections. An inline frame on the other hand, makes it possible to place a frame somewhere in the page, just as you would place a picture. Microsoft introduced Inline frames with Internet Explorer version 3. Although they have been incorporated into the official HTML 4 standard, they are not supported in Netscape browsers earlier than version 6. Like regular frames the first step is usually to create the document/s that will provide the content of your frame. Inline frames are placed on a page using the <IFRAME> tag, which has a closing </IFRAME> tag. This tag has the attributes listed below.
NAME= HEIGHT= WIDTH= SCROLLING= FRAMEBORDER= ALIGN=
Name used to identify the frame. Similar to the NAME attribute in a FRAME tag. Height of the frame. Usually specified in pixels though it can be specified as a % of the page height. Width of the frame. Usually specified in pixels though it can be specified as a % of the page width. Same as the SCROLLING attribute of the FRAME tag Same as the FRAMEBORDER attribute of the FRAME tag Same as the ALIGN attribute of the IMG tag
Inline frames cannot be re-sized so there is no need for a NORESIZE attribute. Internet Explorer also supports a VSPACE and HSPACE attribute for inline frames. You can provide alternate content for browsers that dont support the IFRAME tag by placing it between the start and close tags.
Exercise 4
1 2 Open the document iframe.html in your editor
Creating an Inline Frame
In the body section, add the following HTML (you can leave out the comments if you like)
<IFRAME NAME="myframe" SRC="iframe1.html" WIDTH="300" HEIGHT="200" ALIGN="left"> <!--Content for non-inline frame browsers--> This is what non-IFRAME browsers will see. </IFRAME> <!--Links next to iframe--> <P><A HREF="iframe1.html" TARGET="myframe">First Document</A> <BR><A HREF="iframe2.html" TARGET="myframe">Second Document</A> <BR><A HREF="iframe3.html" TARGET="myframe">Third Document</A>
3 4 5
Save and preview the document. Test the links within the frame and outside the frame. Add a FRAMEBORDER="0" attribute to your IFRAME tag. Save and preview your document to see your inline frame without a border. If you have time, preview your document in a non-IFRAME browser such as Navigator 4.
Steve ONeil 2005
Page 10 of 11
http://www.oneil.com.au/pc/
HTML Exercises
06 Frames
7
7.1
Frames Advantages & Disadvantages
Advantages & Disadvantages
Frames have certain advantages and disadvantages that need to be considered, when deciding whether or not to use them. Advantages
By using a frame for navigation, download times can be reduced since the same HTML isnt being loaded separately with each page in your site. It is easy to create consistent navigation throughout your site.
Disadvantages
Some people simply hate frames and avoid any site that has them, regardless of how well theyre used. Compatibility with older browsers can be a problem. Can be difficult to maintain.
7.2
Tips
Only use frames if you really think your site will benefit. Dont use frames just because you can. Make sure you provide an adequate NOFRAMES section for non-frames browsers. Many sites make their main page a normal one with links to a non-frames and a frames version of the site. This allows people to choose whether they want frames of not but it does of course mean extra work for you. Watch your TARGET attribute. Failing to pay close attention in this area can result in a site thats hard to get round. Dont forget the _top target.
Chapter 3
1.
Frames Revision Questions
What is the purpose of the _top target in a hyperlink <A> tag?
2.
If a FRAMESET tag specified its rows as 1*, 300, 3*, How many horizontal frames would the frameset have and what height would each be?
3.
If you have a document with a FRAMESET tag, where would you place the BODY section?
Steve ONeil 2005
Page 11 of 11
http://www.oneil.com.au/pc/
HTML Forms
HTML forms let you send a bunch of variables at the same time. They allow you to use form fields such as <input> <select> and <textarea>. HTML forms starts with <form> and ends with </form>.
HTML Forms
1. Form Attribute <form name=form1" action=test2.cfm" method=post"> a. Required attribute: action (A URL that defines where to send the data when the submit button is pushed) ---- if the destination url is under same directory, we just simply put the destination file name. eg. usr/local/apache/coldfusion/intranet/scratch-area/lily/test.cfm (this file include html form tag) usr/local apache/coldfusion/intranet/scratch-area/lily/test2.cfm (this file is to retrieve the data from test.cfm) ---- if different directory usr/local/apache/coldfusion/intranet/scratch-area/lily/test.cfm usr/local/apache/coldfusion/intranet/scratch-area/test2.cfm How we can do?
2
HTML Forms
Solution: <form name=form1" action=../test2.cfm" method=post"> b. Optional attribute: Method Possible values: get - Default. This method sends the form contents in the URL: URL?name=value&name=value. post - This method sends the form contents in the body of the request. Name Defines a unique name for the form
HTML Forms
2. input tag (no closing tag)
a. Text field First name: <input type="text" name="firstname" size=10 maxlength=50 > <br /> Last name: <input type="text" name="lastname size=10 maxlength=50 > First name: Last name:
Notes: size is the width of the input box and maxlength is the maximum characte can input in the input box
HTML Forms
b. Password field Password: <input type="password" name="password">
When you type characters in a password field, the browser displays asterisks or bullets instead of the characters.
c. Radio Buttons
Note that only one option can be chosen for radio button.
<input type="radio" name="sex" value="male"> Male <br /> <input type="radio" name="sex" value="female">Female Male Female d. Check box
Checkboxes are used when you want the user to select one or more options of a limited number of choices.
HTML Forms
I have a bike: <input type="checkbox" name="vehicle" value="Bike"> <br /> I have a car: <input type="checkbox" name="vehicle" value="Car"> <br /> I have an airplane: <input type="checkbox" name="vehicle value="Airplane"> I have a bike: I have a car: I have an airplane: e. Hidden field Hidden fields are similar to text fields, with one very important difference! The difference is that the hidden field does not show on the page. Therefore the visitor can't type anything into a hidden field <input type="hidden" name="Language" value="English">
HTML Forms
3. Select tag (need closing tag) <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> 4. Textarea tag <textarea rows="10" cols="30"> The cat was playing in the garden. </textarea> 5. Submit Button <input type="submit" value="Submit" /> If you click the "Submit" button, you will send your input to a new page called test2.cfm.
7
HTML Forms (Questions)
1. What is the correct HTML for making a checkbox? Answer: a. <checkbox> b. <input type="check"> c. <check> d. <input type="checkbox"> 2. What is the correct HTML for making a text input field? Answer: a. <input type="text"> b. <textfield> c. <textinput type="text"> d. <input type="textfield">
HTML Forms (Questions continued)
3. What is the correct HTML for making a drop-down list? Answer: a. <list> b. <input type="list"> c. <select> d. <input type="dropdown"> 4. What is the correct HTML for making a text area? Answer: a. <input type="textarea"> b. <input type="textbox"> c. <textarea>
Cold Fusion Tags
ColdFusion is a programming language that is tag based and can be used on the same page as HTML. All ColdFusion tags start with cf. If there are ColdFusion tags and HTML tags in the file, you need to save as .cfm instead of .html
<cfset> <cfset yourName = "Joe">
this tag sets variable "yourName" to the value of "Joe".
Some rules for defining variable names: 1. Variable name is not case sensitive.
thus <CFSET YOURname = "Joe"> is the same as <CFset yourNamE = "Joe">. (put double quote or single quote if the value is string)
10
Cold Fusion Tags (continued)
<cfset blah = 123> if value is number 2. A variable name must begin with a letter, which can be followed by any number of letters, numbers, and underscore characters. 3. A variable name cannot contain spaces.
Variables can store results of adding numbers, concatenating
strings or any other legal operation. For example, you can do the following: eg 1. <cfset myVar = 123> <cfset anotherVar = 321> <cfset sum = myVar + anotherVar> Here is what the variable 'sum' holds sum = 444 <br />You can output it using: <cfoutput>#sum#</cfoutput> <br />
11
Cold Fusion Tags (continued)
eg 2. <cfset myFirstVar = "1st string"> <cfset mySecVar = "2nd string"> <cfset myaddingvar = #myFirstVar# #mySecVar#> Here is what the variable ' myaddingvar :<br /> <cfoutput># myaddingvar#</cfoutput>
12
Cold Fusion Tags (continued)
Logical operators (cfif)
eg3. <cfset x = 4> <cfif x eq 4> x is 4 <cfelse> x is not 4 </cfif>
13
Cold Fusion Tags (continued)
eg 4.
<cfset x = 4> <cfset y = 6> <cfif x eq 4 and y eq 6> x is 4 and y is 6 <cfelseif x eq 4 and y neq 6> x is 4 and y is not 6 <cfelseif x neq 4 and y eq 6> x is not 4 and y is 6 <cfelse> x is not 4 and y is not 6 </cfif>
14
Cold Fusion Tags (continued)
ColdFusion Comments
At the top of the files, put authors name, date, purpose to write or modify this page in the comments. <!--Your Comments --->
15
Cold Fusion Tags (Questions)
1. What is the correct variable name? Answer: a. _firstname b. yours_firstname c. !yourfirstname d. your firstname 2. What is correct comment sign in ColdFusion page? Answer: a. <!-- --> b. <!--- ---> c. /* d. //
16
Cold Fusion Tags (Questions Continued)
3. What is the correct result for the following code? <cfset x=7> <cfset y=6> <cfif x eq 6 and y eq 6> Do action 1 <cfelseif x eq 7 and y eq 5> Do action II <cfelse> Do action III </cfif> Answer: a. Do action1 b. Do action II c. Do action III
17
HTML Exercises
07 Forms
07 Forms
1 About Forms
For a website to be successful, it is important to be able to get feedback from visitors to your site. This could be a request for information, general comments on your site or even a product order. This could be done with a MAILTO: link but providing a form has several advantages over a simple email.
It makes it easier for people to send the information A form gives you greater control over the information that is sent. Form results can be organised in a way that makes them easy to store in a spreadsheet or database.
1.1
Form Handlers
When a form is filled in by a visitor to your site and sent, the results of the form need to be processed in some way. One of the most common ways to process form results is with a CGI (Common Gateway Interface) script. This is a small program that the information entered in to the form is sent to as soon as the form is submitted. The purpose of this script is to accept the results of a form, organise the results and send the results to an appropriate location, such as a text file, database or email address. In these exercises we wont go into creating CGI scripts since that is quite different from HTML and requires some programming knowledge. There are many free CGI scripts on the Internet that you can download and use for your own forms.1 Many ISPs (Internet Service Providers) also provide scripts for the use of their users so you can often get by without having to learn how to create your own scripts. In addition to CGI there are some other technologies available for linking forms with databases such as Microsofts Active Server Pages (ASP), PHP and Allaires Cold Fusion.
The FORM Tag
Forms are placed in your document using a <FORM> tag which must have a closing </FORM> tag. You can have more than one form in a document as long as they dont overlap. I.e. one form must finish before the next one begins. A <FORM> tag specifies two main things.
The location of the program or script used to process the results of the form and send them to an appropriate location The method that will be used to send data from the form
The layout of the form is specified by the form fields. These can be placed anywhere between the <FORM> and </FORM> tags. A <FORM> tag usually contains the following attributes. ACTION=
Specifies the location of a program to process the results of the form. An email address can also be specified, though this is only supported by some browsers and can give you messy results. Eg. ACTION=MAILTO:[email protected] would send the form results to this address. get / post - Specifies the method used to submit the form results. Get for search forms and forms where results need to be retrieved. Post for feedback forms and forms where results need to be sent. Name that can identify the form (E.g. in scripts).
METHOD=
NAME=
Matts Script Archive is a good place to start - http://www.worldwidemart.com/scripts/
Steve ONeil 2005
Page 1 of 10
http://www.oneil.com.au/pc/
HTML Exercises
07 Forms
Form Elements
Your form may contain several elements that enable a user to input information. Each of these is described in the following sections. All of them use the <INPUT> tag except for select lists and text areas, which use <SELECT> and <TEXTAREA> respectively. For the <INPUT> elements, a TYPE attribute is used to specify what type of element it is.
3.1
Input fields
Input fields can have the following attributes. The attributes required will depend on the type of input being used specified by the TYPE attribute.
ALIGN= CHECKED MAXLENGTH= NAME= SIZE= SRC= TYPE= VALUE=
If the input type is an image, this is used the same as for an IMG tag. For checkbox and radio input types, this attribute will cause the option to be pre-selected by default. Determines the maximum number of characters that can be typed into this field. Provides a name for the field. This is used to identify the contents of this field in the form results. Sets the width of the field in characters. If the input type is an image, this specifies the location of the image file the same as the SRC attribute in an <IMG> tag. Specifies the type of the input field. The choices are text, password, checkbox, radio, submit, image, reset, file and hidden. For text fields, an optional attribute that sets an initial value for the field (if you want it to already be filled in). For check boxes and radio buttons, this specifies what to send with the form results if the option is selected.
Each of the various input types is described below.
TYPE="text"
A text input element is for entering a small amount of text. It uses an <INPUT> tag with a TYPE=text attribute. It uses the NAME=, SIZE=, MAXLENGTH= and VALUE= attributes.
3.2
Example
Name: <INPUT TYPE="text" NAME="name" SIZE="40" MAXLENGTH="80" VALUE=Joe Bloggs>
TYPE="password"
This is the same as a text field except that any characters entered will appear as * as they are typed. It has all the same attributes as a text input field except that there is no VALUE attribute.
3.3
Example
Password: <INPUT TYPE="password" NAME="password" SIZE="40" MAXLENGTH="80">
Steve ONeil 2005
Page 2 of 10
http://www.oneil.com.au/pc/
HTML Exercises
TYPE="checkbox"
07 Forms
A checkbox input can be used for boolean fields where there are only two choices. It can use the NAME=, VALUE= and CHECKED attributes. When several checkbox inputs share the same name, their results will be put into the same field. This allows users to select more than one value for a category.
3.4
Example
Member: <INPUT TYPE="checkbox" CHECKED NAME="member" VALUE="yes">
TYPE="radio"
Radio inputs allow a user to select from several options where only one can be selected. Each option in a list has its own <INPUT> tag and each must have the same name. One option can be pre-selected with the CHECKED attribute. Example Note that the < and > special characters have been used to display the less than < and greater than > symbol.
<BR>Age <=20: <INPUT TYPE="radio" NAME="age" VALUE="20"> <BR>Age 21-30: <INPUT TYPE="radio" NAME="age" VALUE="21-30" CHECKED> <BR>Age 31-40: <INPUT TYPE="radio" NAME="age" VALUE="31-40"> <BR>Age >40: <INPUT TYPE="radio" NAME="age" VALUE="40">
TYPE="file"
This field allows a user to specify the name of a file to be sent as an attachment with the form results. Normally a browse button will appear next to the field to allow the user to browse for the location of the file on their computer. The NAME=, SIZE= and MAXLENGTH= attributes may be used. File inputs are not widely supported in browsers.
3.5
Example
File to send: <INPUT TYPE="file" NAME="file" SIZE="40">
TYPE="hidden"
Some CGI scripts make use of hidden fields within the form to accept additional parameter information (such as an email address to send the results to or a subject for the email). These are passed to the server when the form is submitted. Normally they will contain a NAME= and VALUE= attribute.
3.6
Example
<INPUT TYPE=hidden NAME=subject VALUE=feedback>
This might be used to provide a subject for the form results when they are sent to an email address. Forms may also have hidden fields to do things like specify an email address to send the results to or specify an html file to display once the results are submitted (confirmation page). Steve ONeil 2005 Page 3 of 10 http://www.oneil.com.au/pc/
HTML Exercises
TYPE="submit" and TYPE="reset"
07 Forms
These inputs both provide buttons that affect the results of the form. Both have a VALUE= attribute which determines the text to appear on the button. A submit button can also have a NAME= attribute. When a user clicks a submit button, the results of the form will be sent. When a user clicks a reset button, the contents of the forms fields are set to their initial state. Example
<INPUT TYPE="SUBMIT" NAME="Submit" VALUE="Submit"> <INPUT TYPE="RESET" NAME="Reset" VALUE="Reset">
TYPE="image"
This type of input can be used in place of a submit button. Instead of a button, it will show an image, which will submit the form results when it is clicked. This type of input typically has a NAME= and SRC= attribute but it can also include attributes common to IMG tags such as ALIGN=. Although an image can look a lot better than a plain submit button, image inputs can cause difficulties with text browsers. Example
<INPUT TYPE="image" NAME="Submit" SRC="submit.gif" WIDTH="70" HEIGHT="20">
Note
Netscape Navigator 4 will typically treat an image button as an image link by putting a blue border around the image. To prevent this, include BORDER=0 as you would for an <IMG> tag.
3.7
Tip
You cant use an image in place of a reset button but there is a workaround. Have an image that is a link to the page the form is on. When a user clicks the image, it will cause the browser to reload the page, which in turn clears the form.
Steve ONeil 2005
Page 4 of 10
http://www.oneil.com.au/pc/
HTML Exercises
07 Forms
3.8
Select Menus
As the name implies, select menus allow a user to select from a list of options. The menu begins with a <SELECT> tag and ends with a </SELECT> tag. The select tag has the following attributes.
MULTIPLE
This attribute enables more than one option to be selected by holding down the [CTRL] key, which is useful for certain types of forms. Particularly when used with an online database. Name of the list that will be used in the results to identify the field. Number of rows to appear in the list. The default is 1, which will mean that one option will be visible but an arrow will appear to the right. This arrow will bring down a list when clicked. If values of more than 1 are set, the list will show that number of rows with a scroll bar on the side.
NAME= SIZE=
Within the select tag, each item in the list is set with an <OPTION> tag. An option tag may have the following attributes.
SELECTED VALUE=
One option in the list can have this attribute, which will mean that particular option will be initially selected. Value that will be submitted with the form. If no value is specified, the text in the list itself will be used.
Example 1 One row displayed with a dropdown list.
<SELECT NAME="state"> <OPTION>ACT <OPTION>NSW <OPTION>NT <OPTION>QLD <OPTION>SA <OPTION>TAS <OPTION>VIC <OPTION SELECTED>WA </SELECT>
Example 2 Three rows displayed with a scrollbar on the side.
<SELECT NAME="state" Size="3"> <OPTION>ACT <OPTION>NSW <OPTION>NT <OPTION>QLD <OPTION>SA <OPTION>TAS <OPTION>VIC <OPTION>WA </SELECT>
Steve ONeil 2005
Page 5 of 10
http://www.oneil.com.au/pc/
HTML Exercises
07 Forms
3.9
Text Areas
Text areas are used where a large amount of text needs to be entered. Common examples are where you want to provide a space on the form for comments to be entered. Text areas begin with a <TEXTAREA> tag and end with a </TEXTAREA> tag. Anything between the start and end tag will appear in the field on the page. If there is nothing between the start and end tag, the field will be blank to start with. Text areas can have the following attributes.
COLS= ROWS= NAME=
Width of the field in characters. The width of a text area will be quite different in Internet Explorer and Netscape Navigator so dont count on getting them consistent. Number of rows that will appear. Name of the text area that will be used in the results to identify the field.
3.10 Example
Comments: <TEXTAREA NAME="comments" ROWS=3 COLS=35> Enter your comments here </TEXTAREA>
3.11 Form Layout
A common technique with form layout is to place the form components in a transparent table so everything lines up neatly. Below are examples of a form created so each field is placed one under the other with <P> tags and a form that uses a table to line up the form components. In our exercise we will use an existing table to line up the various fields in our form. 3.11.1 Without a table
3.11.2
With a table
Steve ONeil 2005
Page 6 of 10
http://www.oneil.com.au/pc/
HTML Exercises
07 Forms
Exercise 5
Creating an Online Form
In this exercise we will create a form to be used to send feedback about the site. 1 Open the file feedback.html. Look at the HTML and preview the document. To save time, a table has already been prepared for the form. Tables can be a good way to line up the fields in a form. The first thing we will do is insert the <FORM> tag before the beginning of the table. We will also insert some hidden fields that will be used by the form handler. Your instructor will tell you what to put in the form tag and what hidden fields to use. An example is shown below. These should be placed before the <TABLE BORDER="0"> tag.
<FORM NAME="feedback" ACTION="http://www.iinet.net.au/bin/mail" METHOD="POST"> <INPUT TYPE="hidden" NAME="subject" VALUE="feedback"> <INPUT TYPE="hidden" NAME="destination" VALUE="[email protected]">
(You will need to change the email address to one that you can check to test the form results) 3 4 Next, add a </FORM> tag after the end of the table (after the </TABLE> tag). We will now add the form components to the table in the appropriate places. Edit the HTML so it looks similar to the HTML below. The modified HTML is highlighted in bold text.
<TABLE BORDER="0" ALIGN="center"> <TR><TD>Name: </TD> <TD><INPUT TYPE="text" NAME="Name" SIZE="40" MAXLENGTH="80"></TD></TR> <TR><TD>Email address:</TD> <TD><INPUT TYPE="text" NAME="Email" SIZE="40" MAXLENGTH="80"></TD></TR> <TR><TD>Are you a club member:</TD> <TD><INPUT TYPE="checkbox" CHECKED NAME="Member" VALUE="yes"></TD></TR> <TR><TD VALIGN="top">Your age:</TD> <TD><INPUT TYPE="radio" NAME="Age" VALUE="20"> <= 20 <BR><INPUT TYPE="radio" NAME="Age" VALUE="21-30" CHECKED> 21-30 <BR><INPUT TYPE="radio" NAME="Age" VALUE="31-40"> 31-40 <BR><INPUT TYPE="radio" NAME="Age" VALUE="40"> > 40 </TD></TR> <TR><TD>Your state:</TD> <TD> <SELECT NAME="state"> <OPTION VALUE=act>Australian Capital Territory <OPTION VALUE=nsw>New South Wales <OPTION VALUE=nt>Northern Territory <OPTION VALUE=qld>Queensland <OPTION VALUE=sa>South Australia <OPTION VALUE=tas>Tasmania <OPTION VALUE=vic>Victoria <OPTION VALUE=wa SELECTED>Western Australia </SELECT> </TD></TR>
Continued on the next page
Steve ONeil 2005
Page 7 of 10
http://www.oneil.com.au/pc/
HTML Exercises
<TR><TD VALIGN="top">How did you<BR>find our site:</TD> <TD> <SELECT NAME="found" SIZE="3"> <OPTION>Web Search <OPTION>Link on another site <OPTION>Told about it <OPTION>Other </SELECT></TD></TR> <TR><TD VALIGN="top">Site suggestions:</TD> <TD><TEXTAREA NAME="suggestion" ROWS=2 COLS=35>Type your suggestion here </TEXTAREA></TD></TR> <TR><TD VALIGN="top">Other comments:</TD> <TD><TEXTAREA NAME="comment" ROWS=2 COLS=35>Additional comments here </TEXTAREA></TD></TR> <TR><TD COLSPAN="2" ALIGN="center"> <INPUT TYPE="SUBMIT" NAME="Submit" VALUE="Submit"> <INPUT TYPE="RESET" NAME="Reset" VALUE="Reset"></TD></TR> </TABLE>
07 Forms
5 6 7
Save and preview the file. Fill in some of the fields and then test the reset button. Well finish by replacing our buttons with graphics. Find the lines with the buttons and change them as shown below. Find the following lines of HTML.
<TR><TD COLSPAN="2" ALIGN="center"> <INPUT TYPE="SUBMIT" NAME="Submit" VALUE="Submit"> <INPUT TYPE="RESET" NAME="Reset" VALUE="Reset"></TD></TR> </TABLE>
Change them as follows
<TR><TD COLSPAN="2" ALIGN="center"> <INPUT TYPE="image" NAME="Submit" SRC="pics/submit.gif" WIDTH="70" HEIGHT="20" BORDER="0"> <A HREF="feedback.html"><IMG SRC="pics/reset.gif" WIDTH="70" HEIGHT="20" ALT="Reset" BORDER="0"></A></TD></TR> </TABLE>
Your form should look similar to the one on the following page.
Steve ONeil 2005
Page 8 of 10
http://www.oneil.com.au/pc/
HTML Exercises
07 Forms
Exercise continued on the next page.
Steve ONeil 2005
Page 9 of 10
http://www.oneil.com.au/pc/
HTML Exercises
07 Forms
If time permits, your instructor may guide you through the steps of testing the form and viewing the results. The results for this form should be sent as an email and look similar to the results shown below.
This is the output of a form completed on the World Wide Web. name: Joe Bloggs member: yes age: 31-40 state: Western Australia found: Told about it suggestion: Needs plenty of testing comment: Coming along nicely Submit.x: 16 Submit.y: 11 The following information is provided by the server, and may be useful for statistical purposes: User Agent: Mozilla/4.0 (compatible; MSIE 5.5; Windows 98) Protocol: HTTP/1.0 Peer: retro.iinet.net.au (203.59.24.149) Performed at: Sat Jan 29 18:21:52 1999 Handled by: iiNet Technologies, http://www.iinet.net.au/
10
Open the file navbar.html. Add a new row to your table so we can place a feedback link between Contact Us and Links. The HTML for the new row should look similar to the HTML below. (Hint: copy and paste one of the other rows and then modify it)
<TR><TD><A HREF="feedback.html" TARGET="contents"> <IMG SRC="pics/nav_feedback.gif" ALT="Feedback" WIDTH="110" HEIGHT="25" BORDER="0" HSPACE="5"></A></TD></TR>
11
Save the file. Open and preview frames.html.
Chapter 4
1. What are some uses for an online form?
Forms Revision Questions
2.
How many forms can you have in a page?
3.
What happens to the results of a form when its sent?
Steve ONeil 2005
Page 10 of 10
http://www.oneil.com.au/pc/
You might also like
- Unseen-Poems (1) Edexcel Igcse English Language A Free Exam PracticeNo ratings yetUnseen-Poems (1) Edexcel Igcse English Language A Free Exam Practice10 pages
- Social Skill Flashcard Instructions: Special Needs / Social Skills FlashcardsNo ratings yetSocial Skill Flashcard Instructions: Special Needs / Social Skills Flashcards11 pages
- Introduction To Web Technology: Unit 3 HTMLNo ratings yetIntroduction To Web Technology: Unit 3 HTML49 pages
- SVKM J.V. Parekh International School: Igcse/ Grade Vii / Ict / Worksheet/29-01-2021No ratings yetSVKM J.V. Parekh International School: Igcse/ Grade Vii / Ict / Worksheet/29-01-20218 pages
- HTML Tutorials - I-Tech Software Education100% (1)HTML Tutorials - I-Tech Software Education50 pages
- Html4, W3School: !doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTMLNo ratings yetHtml4, W3School: !doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML10 pages
- 30 Top HTML Interview Questions and Answers (2022 LIST)No ratings yet30 Top HTML Interview Questions and Answers (2022 LIST)20 pages
- Sample Master HTML and CSS Along With 100 ProjectsNo ratings yetSample Master HTML and CSS Along With 100 Projects4 pages
- Fundamentals of HTML: Hypertext Refers To The Way in Which Web Pages (HTML Documents) Are Linked TogetherNo ratings yetFundamentals of HTML: Hypertext Refers To The Way in Which Web Pages (HTML Documents) Are Linked Together31 pages
- Prof. Varsha Tank (IT/ICT Dept. - Ljiet) : Presented by100% (1)Prof. Varsha Tank (IT/ICT Dept. - Ljiet) : Presented by12 pages
- Basic Introduction With HTML: By-Assis - Professor-Ajeet AchalNo ratings yetBasic Introduction With HTML: By-Assis - Professor-Ajeet Achal21 pages
- 44 - Chapter 1 - HTML-4 Handouts - ZeeshanNo ratings yet44 - Chapter 1 - HTML-4 Handouts - Zeeshan26 pages
- My 2.5 Yr Vegetarian Bodybuilding ExperienceNo ratings yetMy 2.5 Yr Vegetarian Bodybuilding Experience40 pages
- Weber County Sheriff's Office (Utah) - NEW ICE 287 (G) MOA (10/15/09)No ratings yetWeber County Sheriff's Office (Utah) - NEW ICE 287 (G) MOA (10/15/09)20 pages
- 25 Oct (8 Am To 11am Morning Slot1) TCS NQT EXAMNo ratings yet25 Oct (8 Am To 11am Morning Slot1) TCS NQT EXAM46 pages
- EVANS - Hong Kong English and The Professional WorldNo ratings yetEVANS - Hong Kong English and The Professional World24 pages
- The Serpent and The Egg: The Egyptian Feathered Serpent100% (1)The Serpent and The Egg: The Egyptian Feathered Serpent8 pages
- Vocabulary: Map of Resources Getting Away From It AllNo ratings yetVocabulary: Map of Resources Getting Away From It All12 pages
- Sean C. Stephenson - How You (TH) Can SucceedNo ratings yetSean C. Stephenson - How You (TH) Can Succeed111 pages
- Differences Between British and American English100% (1)Differences Between British and American English4 pages
- Qualification University/College Course Year of Passing PercentageNo ratings yetQualification University/College Course Year of Passing Percentage3 pages
- An Analysis of Errors in Arabic SpeakersNo ratings yetAn Analysis of Errors in Arabic Speakers73 pages
- Unseen-Poems (1) Edexcel Igcse English Language A Free Exam PracticeUnseen-Poems (1) Edexcel Igcse English Language A Free Exam Practice
- Social Skill Flashcard Instructions: Special Needs / Social Skills FlashcardsSocial Skill Flashcard Instructions: Special Needs / Social Skills Flashcards
- SVKM J.V. Parekh International School: Igcse/ Grade Vii / Ict / Worksheet/29-01-2021SVKM J.V. Parekh International School: Igcse/ Grade Vii / Ict / Worksheet/29-01-2021
- Html4, W3School: !doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTMLHtml4, W3School: !doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML
- 30 Top HTML Interview Questions and Answers (2022 LIST)30 Top HTML Interview Questions and Answers (2022 LIST)
- Sample Master HTML and CSS Along With 100 ProjectsSample Master HTML and CSS Along With 100 Projects
- Fundamentals of HTML: Hypertext Refers To The Way in Which Web Pages (HTML Documents) Are Linked TogetherFundamentals of HTML: Hypertext Refers To The Way in Which Web Pages (HTML Documents) Are Linked Together
- Prof. Varsha Tank (IT/ICT Dept. - Ljiet) : Presented byProf. Varsha Tank (IT/ICT Dept. - Ljiet) : Presented by
- Basic Introduction With HTML: By-Assis - Professor-Ajeet AchalBasic Introduction With HTML: By-Assis - Professor-Ajeet Achal
- Weber County Sheriff's Office (Utah) - NEW ICE 287 (G) MOA (10/15/09)Weber County Sheriff's Office (Utah) - NEW ICE 287 (G) MOA (10/15/09)
- EVANS - Hong Kong English and The Professional WorldEVANS - Hong Kong English and The Professional World
- The Serpent and The Egg: The Egyptian Feathered SerpentThe Serpent and The Egg: The Egyptian Feathered Serpent
- Vocabulary: Map of Resources Getting Away From It AllVocabulary: Map of Resources Getting Away From It All
- Qualification University/College Course Year of Passing PercentageQualification University/College Course Year of Passing Percentage