1

HTMLReferences:

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

2

Web Publishing• Primary Concept:

– Hypertext navigation system.

• Web – is cross-platform.– is distributed.– is dynamic.– is interactive.

3

Web Publishing• 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).

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:

1.A uniform naming scheme for locating resources on the Web (e.g., URIs).

2.Protocols for access to named resources over the Web (e.g., HTTP).

3.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

Your

machineThe Internet

Web browser

Page Location

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 AnchorsLINK 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 AnchorsThe 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

ImagesExample:

<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 associatedvalues 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 dataname="textstring" rows="num_rows" cols="numcols"