HTML Class
1.
Introduction
a. History
b. HTML
c. Browsers
d. Servers
e. Client vs. Browser
2.
HTML Structure
a. Document Structure
i. HTML
ii. Head
iii. Body
b. Formatting
i. Paragraphs
ii. Line Breaks
iii. Division
c. Text styles, sizes and quotations
i. Bold
ii. Italic
iii. Type Text
iv. Big
v. Small
vi. Superimposed
vii. Subscript
viii. Block Quote
ix. Font
x. Underline
d. Lists
i. Ordered
ii. Unordered
iii. List
e. Special Tags
i. Headers
ii. Horizontal Rules
iii. Special Symbols
3.
Linking and Graphics
a. URL
i. Relative
ii. Absolute
b. Images
c. Hyperlinks
i. Anchors
d. Email links
e. Linking Graphics
4.
Tables
a. Table Elements
i. Table Rows
ii. Table Data
iii. Table Headers
iv. Captions
5.
Forms
a. Creating forms
i. Form
ii. Input
iii. Input Types
1. Text
2. Checkbox
3. Radio Button
iv. Text Area
b. Buttons
i. Submit
ii. Reset
6.
Current Topics
a. XML
b. Accessibility
c. Dynamic Pages and other languages
i. Java
ii. ColdFusion
iii. Perl
iv. PHP
v. ASP
7.
Web Page Strategies
a. Formatting
b. Content
c. Colors
d. Tables
1. Internet is a collection of networks- a network of networks.
2. It began in the Late 60’s as an experiment in designing robust computer networks. Funded by US Department of Defense.
3. Used by only defense contractors and academic institutions.
4. ARPAnet (Advanced Research Projects Agency network of the Department of Defense.)
5. The development of high-speed modems allowed individuals to connect to the Internet and help it become what it is today. The Internet took off in 1993.
-Physicists at CERN released an authoring language known as Hyper Text Markup Language.
-National Center for Supercomputing Applications (NCSA) at U of Illinois created the first web browser: Mosaic
-Developers of Mosaic left to form Netscape Communications and produce Netscape Navigator.
-Every computer has an IP Address- they are made up of four numbers joined with periods each being less than 255 in value such as: 192.12.248.73
-Each computer also has a name, including domains and subdomains. Countries outside the United States have a two letter suffix i.e. ca for Canada jp for Japan uk for United Kingdom.
-Domain names are registered with InterNIC having both a unique name and IP address.
-By the end of 2002 it is estimated there will be 60,000,000 web addresses
To view web pages stored at other servers we need a web browser.
The browser converts the HTML page to a viewable page with colors fonts and graphics.
Several browsers are available with most being free, however the most popular are ----Internet Explorer and Netscape Navigator.
·Lynx runs on character based clients
·WebCruiser
·NetShark
·Netscape Navigator
·Internet Explorer
·GetRight
·Opera
A Survey on 10/10/2000 from www.cen.uiuc.edu/bstats/latest.html
Shows that Internet Explorer is used in 67.9 % of the machines
Netscape has 28% share of the market.
Many others share 4.1 % of browser use
In order for your browser to access a document from another computer, the computer must have a server that is connected to the Internet using a web server, which makes the document available to different browsers to view. This computer is referred to as the server.
Companies, universities, governments, and other private individuals maintain servers locally.
Some of the most popular servers include Apache, Microsoft, Netscape Enterprise, Weblogic and Zeus
A Survey on 9/2000 constructed by Netcraft and available from http://www.netcraft.com/survey shows that:
-Apache is used by 60% of the machines
-Microsoft has 19.5 % of the server
-Netscape has 6.9 %
-Weblogic has 2.68%
-Zeus has 2.87%
When a user who is viewing their browser requests a document, either by typing in a URL or clicking a hyperlink, the request is generated on the client or the machine where the user is sitting. The browser sends the request to the server, which will then serve the document to the client’s browser. Often times when a form is completed and submitted it will then run a program that is located on the server. This is often times referred to as server side processing.
A form can be submitted using only the client for it’s processing. The form will be entered and the data parsed without any work being done on the server. This process is referred to as client-side processing. JavaScript is another example of client-side processing.
Hypertext Markup Language is a language for describing how pages of text, graphics, and other information are organized, formatted, and linked together. Hypertext means text stored in electronic form with cross-reference links between pages.
In HTML tags are used to tell the browser how to display the elements. The majority of tags will have a beginning tag <> indicating where the element begins and an ending tag</> indicating where it ends.
This tag must be included in every document that is created. It basically says that this is an HTML document. This tag must also have a corresponding closing tag</html>.
VERSION=”“ The version attribute is not used very much but could be used to define what version of HTML the developer is using.
LANG=”“ This attribute will allow you to specify which language your document is written in. This is useful when robots for indexing scan your document.
This tag contains all of the information about the document as a whole. This tag will also include the <title> tag, which is the title that is displayed on the browser. This tag must also have a corresponding closing tag</head>.
<TITLE></TITLE> This tag must be within the <HEAD> and </HEAD> tags. This tag is used to define what the title of the page is. It will appear on the top of the browser and the minimized browser.
This tag will have all of the information that is contained in the actual window. This tag will include numerous tags, which will manipulate the text in many ways. This tag must also have a corresponding closing tag</body>.
BACKGROUND=http://www.espn.com This attribute will define the background image for the complete page.
BGCOLOR=”blue” The background attribute is used to specify the background color of the page. The proper syntax is <body bgcolor=”white”> or whatever color you would like to select. If it is left blank to page color will be white.
TEXT=”red” The text color attribute is used to specify the color of the ext for the page. The proper syntax is <body bgcolor=”white”> or whatever color you would like to select.
LINK=”white” The link attribute is used to specify the color of the links that appear on the page. It will only affect a link that has not been selected or is not currently being selected. The proper syntax is <body link=”white”> or whatever color you would like to select.
VLINK=”green” The vlink attribute is used to specify the color of the links that have been visited from that page. It will only affect a link that has been selected. The proper syntax is <body vlink=”white”> or whatever color you would like to select.
ALINK=”black” The alink attribute is used to specify the color of the active links that appear on the page. It will only affect a link that is currently being selected. This attribute is not used very often. The proper syntax is <body alink=”white”> or whatever color you would like to select.
When typing in text for an HTML document, the window will not react to returns or spaces entered in the text. Therefore you must use different tags to format the text the way it should appear.
The paragraph tag will allow for the text to be broken into different paragraphs. It will include a double space between paragraphs. This tag must also have a corresponding closing tag</p>
ALIGN=”right” The align attribute will allow for the developer to specify where the paragraph will be aligned. Possible values are “right”, “center”, and “left”
The break tag will provide a space between text. It will immediately insert one row. This tag does not need a closing tag.
CLEAR=”left” The clear attribute will determine the location where the next line starts after the break. Possible values are “none”, “left”, and “right”, “all”
The division tag will allow you to make changes to a certain block of text without affecting the rest of the document.
The boldface tag will allow for all text between the opening and closing tag to have the bold characteristics. This tag must also have a corresponding closing tag </b>.
The italic tag will allow for all text between the opening and closing tag to have the italicized characteristics. This tag must also have a corresponding closing tag </I>
The typewritten text will allow for all text within the opening and closing tags to be displayed in a fixed length width. Just as a typewriter would when a page is typed. This tag must also have a corresponding closing tag </tt>.
The big tag will change the text that is within the tags to be larger than they currently are. This tag must also have a corresponding closing tag </big>
The small tag will change the text that is within the tags to be smaller than they currently are. This tag must also have a corresponding closing tag </small>
The superscript tag will allow for as much of the text as is specified to be written in superscript. This tag must also have a corresponding closing tag </sup>
The subscript tag will allow for as much of the text as is specified to be written in subscript. This tag must also have a corresponding closing tag </sub>
This tag will allow for the text included to be displayed as if it were a quote with indentations as well as double space before and after the text. This tag must also have a corresponding closing tag </blockquote>
This tag will allow you to type the text using spaces and returns, and then have it appear in the browser the exact same way. This tag must also have a corresponding closing tag </pre>
WIDTH=”100” The width attribute will determine how large in pixels the preformatted text will be.
This tag will be used to determine certain font-oriented attributes of text. It can be used to add emphasis to certain parts of the text without changing it on the whole page. The tag must have an appropriate </font> tag to close the value.
SIZE=”1-7 or +#” The size attribute will determine the size of the font that the tags are surrounding it can be a number 1-7 or it can be relative by +# or -#.
COLOR=”blue” The color attribute can be used to change the color of fonts without changing the total fonts on the page. Values can be any accepted color
FACE=”Arial” The face attribute will allow for the font to have a particular style. Any fonts can be use and will affect only the marked text.
This tag will underline text. It will not provide a hyperlink, as many of the other underlined text will. It should be used to add emphasis. It must be followed by a closing </U> tag.
This tag is used to denote an ordered list. The end points appearing will be marked with a numbered sequence. In order to specify which blocks of text are together they must be enclosed in <li> tags. This tag must also have a corresponding closing tag </OL>
TYPE=”1” The type attribute will determine the style of bullets the list will use. Different values could be 1, A, a, I, I.
COMPACT=”compact” The compact attribute will make the list compact
START=”1” The start attribute will determine which integer the list will begin with. Values can be any integer.
This tag is used to denote an unordered list. The end points appearing will be marked with a bullet. In order to specify which blocks of text are together they must be enclosed in <li> tags. This tag must also have a corresponding closing tag </ul>
TYPE=”disc” The type attribute will determine which style of bullets will be used. Different values are “disc”, “square”, and “circle.”
COMPACT=”compact” The compact attribute will make the list compact.
This tag is used within a <ol> or a <ul> tag. They are used to denote when one entry starts and ends and where a new one would begin. This tag must also have a corresponding closing tag </li>
TYPE=”disc” The type attribute will determine which style of bullets will be used. Different values are “disc,” “square,” “circle,” for Unordered lists, or “1,” “a,” “A,” “i” for Ordered lists.
VALUE=”1” The value attribute will determine which integer the list will begin with. Values can be any integer.
Headers can give a sense of variety to a page and can help to format pages to get peoples attention. Horizontal Rules provide a great way of separating text throughout a document. Occasionally special characters are needed. Characters such as the ‘<’ and ‘>’ have a special meaning in HTML and can’t be directly used. HTML provides a way to display special characters such as those mentioned and others.
Header tags are used to provide a way for giving portions of text a larger font as well as setting it off as a new line and inserting a blank space afterwards. The corresponding number after the H specifies how large the text should be. The larger the number after the H, the smaller the text will be. This tag must also have a corresponding closing tag </h#>
ALIGN=”left” The align attribute will determine where to justify the header. Possible values could be “left,” “center,” “right,” “justify”
The horizontal rule tag will allow for a horizontal line to be drawn across the page. The line can have different size and width attributes. This tag does not need a closing tag.
ALIGN=”left” The align tag will determine how to justify the horizontal tag. Possible values could be “left,” “right,” “center,” “justify.”
NOSHADE The no shade attribute will simply tell the horizontal rule to not be shaded.
SIZE=”20” The size attribute can be changed to increase or decrease the thickness of the rule. The values are the numbers of pixels.
WIDTH=”200” The width attribute can be used to increase or decrease the horizontal rule. The values are the numbers of pixels stretching from one side to the other.
SYMBOL HTML CODE
|
> |
> |
|
< |
< |
|
& |
& |
|
“ |
" |
|
ã |
© |
|
â |
® |
|
£ |
£ |
|
A Hard Space |
|
|
÷ |
÷ |
What makes the Internet so fascinating is the ability to go to so many places in a short amount of time. It is very easy when creating a page to provide a link to a different site. There are different things to keep in mind when linking to different sites such as relative URL’s, images, graphics and email.
A URL is a Uniform Resource Locator, or simply the address of a web server. A URL contains a protocol such as http or ftp with http being the default, a hostname such as www.utah.edu and a path such as /acs/internal/index.html.
There are two different types of URLs: relative and absolute. A relative address contains just the path from one document to another rather than the whole URL, while an absolute address contains the complete URL from the http:// to the .html
What makes the Internet so much fun is the ability to create graphics and pictures. Pictures can have a couple of different formats. The most popular types are .jpg and .gif. The .gif images are usually smaller and nor quite as defined in colors. .jpgs are more defined and feature more colors, they are also files. You can create your own files and scan in your own pictures.
The image tag will allow a user to include a graphic on the web page. In order to do so the graphic must be at a location the server can access it. After the file has been placed in the correct location the source needs to be established. The correct syntax for this would be <img src=”/acs/mypicture.gif”>. The <img> tag does not need a closing tag.
SRC=http://www.acs.utah.edu The source attribute will give the URL of the image to include.
ALT=”A picture of the University of Utah” The alt attribute will allow for text to be displayed when a user points their mouse to an image. The description should be descriptive and informative about the picture, which will help it to comply with accessibility standards. The correct syntax is <img src=”/acs/mypicture.gif” alt =”a picture of Judy in front of the US Capital”>
ALIGN=”right” The align attribute will specify where the text appearing next to the picture should be. If it is left blank the default is “bottom”. The correct syntax is <img src=”/acs/mypicture.gif” align=bottom>. Different values are “top,” “bottom,” “middle,” “left,” “right.”
HEIGHT=”70” The height tag will determine the number of pixels that the image should be displayed in height. The correct syntax is <img src=”/acs/mypicture.gif” height=5>
WIDTH=”50” The width tag will determine the number of pixels that the image should be displayed in width. The correct syntax is <img src=”/acs/mypicture.gif” width=5>
BORDER=”3” The border width will determine how big the border surrounding the image will be. Sometimes a border of 0 will be used when a border is not wanted.
HSPACE=”3” The horizontal space attribute will determine how many pixels there will be horizontally from the image to other content within the page.
VSPACE=”3” The vertical space attribute will determine how many pixels there will be vertically from the image to other content within the page.
Hyperlinks allow users to move from one location on the web to another location on the web by simply clicking a word of text, a picture or graphic.
The anchor tag is what determines the location of the hyperlink is and what will be the link that sends it to that page. This tag must also have a corresponding closing tag </a> which is placed after the text, graphic, or picture that will be used as a hyperlink.
NAME=”top” The name attribute is very useful for defining different sections of the page. When using a hyperlink within the page it needs to have a reference, the name would serve as the reference point to take the page.
HREF=http://www.espn.com The hard reference attribute specifies the
destination URL for the hyperlink. The
correct syntax is <a
href=”http://www.espn.com”> go to espn</a> for a hyper link that would
go to www.espn.com with the words “go to espn” serving as the link.
TARGET =newwindow The target attribute will allow the document to determine where the page will be opened. You can give the window a name, and if there isn’t a window with that name already open it will open a new window and assign it the same name. Windows can be given any name as long as it does not start with an underscore.
Email links allow the user to click on a hyperlink, but rather than have it open a new page it will open a composer to send an email to the person specified within the tag.
The command to send an email to a person will be contained within the hard reference tag. The proper syntax is <a href=mailto:nobody@nowhere.com>send an email</a> Notice that the format is very similar with the main difference being the words “mailto” followed by the email address.
In addition to using text to create hyperlinks a graphic can also be used. This would give the user the opportunity to have a picture or other graphic also serve as a link to a separate page. You would normally set the border = 0 in the <img> tag, so that the box defining the image as a link does not appear. Linking a graphic does not introduce any new tags or attributes; it simply combines tags that already exist. The correct syntax for an image link could be: <a href=http://www.espn.com><img src=”picture.jpg” border=0></a>
Often times a developer will want to create a nice format of information evenly across the screen vertically and horizontally. In order to create this balanced effect most developers will create a table to arrange their data.
All tables must begin and end with the <table> and </table> tags. There are many attributes that can be included in the table, which will be discussed later. When creating a table extreme care should be used to ensure that it is easy to follow and that indentations are used properly to provide a smooth structure, which will benefit any changes you need to make in the future.
ALIGN=”left” The Align field will help in balancing individual cells content. The contents of the cell will be aligned according to the value that is entered. The value can be one of three options from “left,” “right,” “center” or “justify”
BGCOLOR=”white” The Background Color will change the background of the table to whatever color is specified. It will not override the background color of the table. Possible values could be either the name of the color or the hexadecimal value.
WIDTH=”200” The width of the table is used to determine in pixels how wide the table will be. The values can be any integer.
COLS=”5” The column attribute is used to determine how many actual columns there will be. The value must be an integer.
BORDER=”5” The border attribute is used to determine the width in pixels of the border surrounding the table. If a border is not wanted the value should be set to 0.
FRAME=”below” The frame attribute will draw a frame around certain parts of the table. It will work according to what the value is set. Possible values include: “void,” ”above,” ”below,” “hsides,” “lhs,” “rhs,” “vsides,” “box,” “border.”
RULES=”none” The rules attribute will determine which visible rules are used in a table. The rules will function according to what value is set. Possible values include: “none,” “groups,” “rows,” “cols,” “all.”
CELLSPACING=”3” The cell spacing attribute will also help in ensuring proper distance is obtained between each cell. The cellspacing attribute is used to determine the number of pixels between adjacent cells and along edges of cells along the edge of a table. The higher the number the further the distance the cells are from one another. The value must be an integer in pixels.
CELLPADDING=”3” The cellpadding attribute will help in spacing objects. The cell padding will give the distance in pixels between the contents of the cells and the grid lines bordering the cell. The value must be an integer and the padding gets larger as the number gets larger.
The table row tag shows where a new row will begin. Imagine just as any table is being drawn with rows and columns. In order to move from the end of one row to the start of a new one a row must be declared. There is no limit to the number of rows, but each one must have a ending </tr>
ALIGN=”right” The align tag is used to align the data within the rows. It will not affect the alignment outside of the table. The possible values are: ”left,” “center,” “right,” “justify,” “char.”
VALIGN=”top” The vertical alignment tag on the table row, allows the developer to determine the alignment vertically of the rows. The possible values are: “top,” “middle,” “bottom,” “baseline.”
BGCOLOR=”black” The Background color attribute sets the rows background color to a certain color. The value could be the name of the color or its hexadecimal value.
The number of table data tags in a row determines how many columns each table will have. The developer will specify the text of each cell within the <td> tag. Each table data cell must have a closing </td> tag.
BGCOLOR==”black” The Background color attribute sets the cells background color to a certain color. The value could be the name of the color or its hexadecimal value.
ROWSPAN=”4” The rowspan attribute will allow for one data cell to stretch across a couple of different rows. This is very handy if there is one cell that is larger that the rest but the developer does not want the whole row to be that large. The value need to be an integer that is figured out from examining the table and determining how many rows it should span.
COLSPAN=”3” The colspan attribute will allow for one data cell to stretch across a couple of different columns. This is very handy if there is one cell that is wider that the rest but the developer does not want the whole column to be that large. The value needs to be an integer that is figured out from examining the table and determining how many columns should be spanned
ALIGN=”right” The align tag is used to align the data within the cells. It will not affect the alignment outside of the table. The possible values are: ”left,” “center,” “right,” “justify,” “char.”
VALIGN=”top” The vertical alignment tag on the table row allows the developer to determine the alignment vertically of the cells. The possible values are: “top,” “middle,” “bottom,” “baseline.”
Tables can have headers by using the table header tag. By using these tags the data will be bold and highlighted. The caption tag must have a closing tag of </th> and be included inside of a table. <th> tags can be used in place of <td> tags.
NOWRAP The no wrap attribute will ensure that the line of text in each cell will not wrap onto the next line but that it will push the column out further.
BGCOLOR=”black” The Background color attribute sets the table headers background color to a certain color. The value could be the name of the color or its hexadecimal value.
ROWSPAN=”4” The rowspan attribute will allow for one table header cell to stretch across a couple of different rows. This is very handy if there is one cell that is larger that the rest but the developer does not want the whole row to be that large. The value need to be an integer that is figured out from examining the table and determining how many rows it should span.
COLSPAN=”3” The colspan attribute will allow for one table header cell to stretch across a couple of different columns. This is very handy if there is one cell that is wider that the rest but the developer does not want the whole column to be that large. The value needs to be an integer that is figured out from examining the table and determining how many columns should be spanned
ALIGN=”right” The align tag is used to align the data within the table header. It will not affect the alignment outside of the table. The possible values are: ”left,” “center,” “right,” “justify,” “char.”
VALIGN=”top” The vertical alignment tag on the table header allows the developer to determine the alignment vertically of the cells. The possible values are: “top,” “middle,” “bottom,” “baseline.”
Tables can be given a caption by using the caption tag. When using this tag you may also use different <h1> tags to increase the size. The caption will be stretched across the width of the table and centered, but will default to the same size as the rest of the text. The caption tag must have a closing tag of </caption> and be included inside of a table.
ALIGN=”right” The align tag is used to align the data within the table caption. It will not affect the alignment outside of the table. The possible values are: ”left,” “center,” “right,” “justify,” “char.”
Forms are used on the web as a way of inputting data. Forms can be very useful in helping pages to become interactive. Forms also have many different options for inputting information.
The form tag is what creates a form within the page. The beginning and ending </Form> tag must surround all text that is within the form and will be processed by the forms script. A form will have two attributes of importance: method and action. The method attribute will be one of two options “get” or “post.” Most forms will use the “post” option for processing. This means that the entry form will be sent as a document. If “get” is used it will submit the information as part of the URL header. The action attribute will tell the web page where the document should be sent for processing. The correct syntax of a tag would be <form method=”post” action=”mailto:nobody@nowhere.com”>
A form can have many different types of input options including text boxes, buttons, checkboxes, radio buttons, selection menus and text areas. They are very similar in use but can each perform key rolls in gathering data.
In order for a form to be effective it needs to input data. There are many different mediums, which can be used to input this data. The correct use of a form can make a web site more interactive, professional and secure.
TYPE=”radio” The type button is used to determine which type of input medium is being used. The values could be “text,” “password,” “checkbox,” “radio,” “submit,” “reset,” “file,” “hidden,” “image,” “button.”
NAME=”CreditCard” The Name is used to determine what the field will be referred to from that point on. The name can have any value.
VALUE=”cat” The value would be the value that gets passed when the form is submitted. The value should be something that is easy to associate with the question being asked.
CHECKED The checked attribute is used to determine which value is selected when the page is first opened. If it were left blank it would mean that there are no default values.
SIZE=”50” The size attribute will determine in pixels how large to make the medium. This is true and accurate for all of the types except for text and password types. The value can be any integer and is used as pixels.
MAXLENGTH=”40” The maxlength attribute is used to determine how many characters can be used when inputting a value from the form. The number can be an integer and is used to determine characters rather than pixel size.
SRC=”http://www.espn.com “ The source attribute is used to bring in an image which will be used for input. The SRC must be a valid address whether it is relative or absolute is up to the developer.
ALT=”picture description” The alternative text tag is used to provide a description of the image and
ALIGN=”left” The align attribute is used to align the mediums according to what value is chose. The values could be “left,” “right,” “center,” and “justify.”
This will allow someone to enter the text by typing in data into a box. The box can have a “size” which determines how big the box is displayed on the screen as well as a maxlength option which will only allow the input box to hold so many characters. An option must also be given a name for processing, A correct syntax could be <input type=”text” name=”first” size=”33” maxlength=”52”>
The most basic input option is a textbox. As with other options the textbox must be given a name. There is also the option of assigning a value to be checked when the page is opened. This is accomplished by typing the word “checked” after the name. If the developer would like no selected items when the page is initially opened, they will simply leave the “checked” out of the tag. Unselected check boxes will not appear in the form. You may also use one name with a couple of different values. This would allow a person to enter more than one answer for a question. The correct syntax would look something like this <input type=”checkbox” name=”sport” value=”golf”>I Like Golf
When there is only one possible answer a radio button can be used very effectively. The option to have one valued checked can also be used by typing “checked” after the value. A radio button also needs a name, and if using it for the same options it must use the same name. An example of the correct syntax would look something like this: <input type=”radio” name=”Gender” Value=”F” checked>Female
The text area tag is similar to the <input type=”text” option in that it allows the user to enter text, the difference between the two tags is that textarea allows a large box with multiple lines while the text type is a single line. To specify the number of lines within the text area you will use the rows=”5” attribute and switch the number 5 for the number of rows in the box. You may also input the number of columns that the area will cover by using the cols=”20” attribute and switch the number 20 for the number of columns it will span. You may input text that will appear in the box by typing it in between the opening and closing tags. Here is an example of a correct syntax: <textarea name=”suggestions” rows=”6” cols =”20”>Please send me your suggestions</textarea>.
NAME=”hobbies” The name attribute is used to define the element. This name should be something that is related to the field.
ROWS=”7” The row attribute is used to determine how many actual rows there will be. The value must be an integer.
COLS=”5” The column attribute is used to determine how many actual columns there will be. The value must be an integer.
Scrolling lists and pull-down menus are both created by using the select tag. To use this tag you will also use the <option> tag to specify when a new option for the menu is being used. The select tag has a couple of different options. The name tag must be included for processing and should be the same name throughout the program. The size option is also used, however it has a different function than it had for the text tag. The size will determine how many options appear on the menu without using the scrollbar. If there are more options than the size specifies than a scrollbar will be used to make the other options visible. Using the attribute of multiple will allow the user to select multiple answers. If only one answer is wanted than multiple should be left out of the tag.
NAME=”hobbies” The name attribute is used to define the element. This name should be something that is related to the field.
SIZE=”4” The size attribute is used to determine how many rows will be displayed in the text area. An integer must be used as the value and should be determined by the number of possible answers that you have.
MULTIPLE The multiple attribute is used when the developer would like the user to have the option of selecting multiple options.
This tag is used when using a <select> tag. The option attribute should enclose the menu text between an opening <option> and closing </option> tag. The option tag can contain the “selected” attribute, which will default to that option being selected. If it is left blank there will be no default selected.
SELECTED The selected option will set the default that has been selected. This attribute is optional. If left blank there will be no selected items when the page is entered. If the option is selected it will be the pre-selected value when the page is first opened.
VALUE=”cats” The value attribute is used when the option is selected to pass a value to the script for processing. The value should be given a name that you will recognize and have meaning.
All forms must have a button that will submit the data for processing when completed. Many people will include a reset button as a courtesy for people who are filling out their forms.
This tag will allow you to enter a submit button on your web page. The button will then be used to perform the action that you had specified on your form. The size of the button will automatically fit the size of the text you enter. The Text that the button says will be equal to the value attribute. A correct syntax will look something like this: <input type = “submit” value =”click to submit form”>
This tag will allow for all of the values on the form to be reset to their original default values. The correct syntax will look like this: <input type=”reset” value=”Reset the form to its original values”>
The Internet is an exciting world with many things changing the standards and bringing new opportunities for learning. Below are some of the current topics that are often being discussed.
Extensible Markup Language tries to fill in the gaps that HTML left out. XML allows you to define your own tags throughout your pages. XML includes all of the tags that are used in HTML but also allows the developer the opportunity to build upon the tags they already have with new defined tags.
With the Internet growing so rapidly and changes happening quickly some documents were created that are difficult for some people with disabilities to understand. An estimated 8% of active Internet Users have some type of disability (1998 Georgia Tech University.) There are different browsers that will read the information in different ways. A browser named ZoomText will enlarge the information on the screen to readable height. Another program titled JAWS is a software reader program, which will read the contents of the page aloud to the user. When designing a site with Accessibility in mind, a developer should use alt tags appropriately for images, use headings consistently, define hypertext links, avoid using frames if possible, provide alternates for scripts and applets that might not work appropriately.
Dynamic HTML is a loosely applied term to Web pages that contain style sheets, scripts, and animated graphics.
Java: Java is a high level programming language using object oriented programming similar to that of C++. Java consists of servlets, which run on the server and also applets, which run on the browser. Java was created by Sun Microsystems and was originally called “Oak.”
ColdFusion: ColdFusion is a relatively new product, which was designed by Allaire Corporation. ColdFusion is a simplified way of connecting to a database using a server and CFML tags. This would allow a user to enter a piece of information and have the server run a query and return the results in HTML form.
Perl: Larry Wall designed Practical Extraction and Reporting Language, with an emphasis in text processing abilities. It is an interpretive language and has become very popular with simple to build CGI scripts.
PHP: PHP is a scripting language. One of the key advantages to PHP is its ability to parse data. PHP can also be directly inserted alongside HTML, which makes it very convenient and easy to use.
ASP: Active Server Pages will have an .asp extension. ASP’s will utilize ActiveX scripting including scripts written in Visual Basic. ASP’s are a Microsoft production which will create dynamic web pages.
Ideas for the content of this handout was gathered from two books:
Oliver, Dick. (1999). Teach Yourself HTML 4 in 24 Hours. Indianapolis, IN: Sams
Musciano, Chuck & Kennedy, Bill (1997). HTML The Definitive Guide. Cambridge: O’Reilly