HTML

1. HTML References: A HTML Tutorial: http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html

2. Primary Concept: Hypertext navigation system. Web is cross-platform. is distributed. is dynamic. is interactive. Web Publishing

3. Browser: software to look at web pages (Netscape Navigator) Server: software that provides service The client (Web browser) on your machine sends a request to a server. The server sends the file requested by the browser. The file contains data and formatting information The browser displays the file on the screen. Data is transferred between the browser and the server in http (hypertext transfer protocol). Web Publishing

4. World Wide Web • The World Wide Web (Web) is a network of information resources. The Web uses three mechanisms to make these resources available to a wide audience: • A uniform naming scheme for locating resources on the Web (e.g., URIs). • Protocols for access to named resources over the Web (e.g., HTTP). • Hypertext, for easy navigation among resources (e.g., HTML).

5. Uniform Resource Identifiers (URI): • Every resource available on the Web (HTML document, image, video clip, program, etc) has an address that is encoded by a URI. • A URI consists of three pieces of information: • The protocol name used to access the resource • The name of the host machine • The resource name • Format: protocol://host:port/filepath#ref. • Example: • http://www.somesite.com/userdocs/index.htm • A relative URI does not contain any information about the protocol and the host, but refers to a resource on the same machine as the current document. • Example: <A HREF=“hints.html”> Relative URI s are resolved to full base URIs. Assume that the link is in a document with the URI: http://www.somesite.com/userdocs/info.htm, then the absolute URI of hints.html is http://www.somesite.com/userdocs/hints.htm

6. The Web Page Location Your machine The Internet Web browser Web server

7. HTML • HTML stands for HyperText Markup Language. • Describes the structure of the page, not its actual appearence when viewed on the screen. • Insert embedded commands or tags into text files to indicate the structure and formatting of the elements on the page and hypertext links to other pages or to included media.

8. Logical Styles <strong> <em> Physical Styles <b> . . . </b> Boldface <i> . . . </i> Italics <u> . . . </u> Underline Definition list/glossary: <dl> <dl> <dt> First term to be defined <dd> Definition of first term <dt> Next term to be defined <dd> Next definition </dl>

9. Present an unordered list: <ul> <ul> <li> First item in the list <li> Next item in the list </ul> Present an ordered list: <ol> <ol> <li> First item in the list <li> Next item in the list </ol> <UL> <LI> New England states: <UL> <LI> Vermont <LI> New Hampshire <LI> Maine </UL> <LI> Two Midwestern states: <UL> <LI> Michigan <LI> Indiana </UL> </UL>

10. Links and Anchors LINK TEXT AND/OR IMAGE TO ANOTHER DOCUMENT Some Attributes used in the tag: HREF, NAME HREF: URL of a resource on the web – an HTML file, image or sound file etc Example: <A HREF=http://www.scu.edu> Santa Clara University </A> • <A HREF="URL?search_word+search_word"> . . . </A>

11. Links and Anchors The structure of a Uniform Resource Locator (URL) may be expressed as: resource_type:additional_information where the possible resource types include: file, http, news, gopher, telnet, ftp, and wais, among others, and each resource type relates to a specific server type • Send a search string to a server. Different servers may interpret the search string differently. In the case of word-oriented search engines, multiple search words might be specified by separating individual words with a plus sign (+).

12. NAME: Using the name tag, you can mark specific points in a document as points that can be reached directly. • <A NAME="anchor_name"> Define a target location in a document </A> <A NAME=“Chapter4”> Chapter 4 - Links and Anchors </A>

13. Referring to the anchor <A HREF=“http://www.SomeSite.edu/WebDesign.html#Chapter4 "> </A> • Link to a location in the same document A HREF="#Chapter4">Links and Anchors</A>

14. Images • Images are places in an HTML page using <IMG> tag. Images can be placed anywhere in the document – with in paragraphs, list items etc. • Images for Web pages can be inline images and external images. • Inline images appear directly on a Web page among the text and links. They are loaded automatically when you load the page.

15. Images Example: <HTML><HEAD><TITLE>Images</TITLE></HEAD> <BODY><H1><CENTER>The Sights and Sounds Of Yosemite</CENTER></H1> <HR> <H2>Ribbon Falls</H2> <P><IMG SRC="ribbonfalls.JPG"ALIGN=TOP> Height: 1612 ft</P </BODY> </HTML>

16. External images are stored separately from the web page and linked from the page in much the same way that other HTML pages are. • A common practice is to provide a small image (“thumbnail inline on the page itself and link the image to its larger external counterpart. • Keeps the size of the web page small so that it can be downloaded quickly. • The readers can choose to download the larger image if they want a better view.

17. Example: <A HREF=http://www.somesite.com/graphics/datepalms.gif><IMG SRC=datepalm.gif:></A>

18. Forms • Forms enable two-way flow of info • Creating the layout of the form • Writing a script program on the server side to process the input from the form. • Data can be gathered by a CGI script and saved <FORM METHOD=“post” ACTION=“mailto:fred@scu.edu”>form text </FORM> <FORM METHOD=“get” ACTION=“URLOfCGIScript”> form text </FORM> <FORM METHOD=“post” ACTION=“URLOfCGISCript”> form text </FORM>

19. Forms- Input Elements • The most commonly used form tag is INPUT and it can be used with a number of attributes. • There are several types of INPUT elements. • single line input (text, checkbox,radio,etc) • multi line input (text) • drop-down menus

20. Forms- Input Elements • form> . . . </form> : Define a form • <input> : an input box Attributes (type, name, value, checked, size, maxlength): type="variable_type" Specifies the data type for the variable type="text" fields accept character data (default) type="password" fields accept character data type="checkbox" fields are either selected or not type="radio" fields of same name allow selection of only one of the associated values type="submit" defines an action button that sends completed form to the query server type="reset" defines a button that resets the form variables to their default values type="hidden" defines invisible input field, value sent along with the other form values. (pass internal-state values)

21. Forms • Attributes: name="textstring" where textstring is a symbolic name (not displayed) identifying input variable as in: <input type="checkbox" name="box1"> value="textstring” meaning of textstring depends on type. If type="text" or type="password", textstring is default value for input variable. If type="checkbox" or type="radio", textstring is value sent to server if checkbox "checked". If type="reset" or type="submit”, textstring is button label (in place of words "submit" and "reset”).

22. Forms • checked No arguments. For type="checkbox" or type="radio", if checked is present the input field is "checked"by default. • size="display_width" where display_width is an integer value representing the number of characters displayed for type="text" or type="password". • maxlength="string_length" where string_length is the maximum number of characters allowed within type="text" or type="password" variable values. This attribute is only valid for single line "text" or "password" fields.

23. Forms • <select> . . . </select> <select> <option>Apples <option selected>Bananas <option>Cherries </select> • <textarea> ... default text </textarea> Defines a rectangular field where the user may enter text data name="textstring" rows="num_rows" cols="numcols"