Hypertext Markup Language HTML
31
Hypertext Markup Language HTML Hypertext is vaguely defined as interconnecting pieces of information in a non-sequential but usually relational, manner for efficient browsing of a body of information.
description
Hypertext Markup Language HTML. Hypertext is vaguely defined as interconnecting pieces of information in a non-sequential but usually relational, manner for efficient browsing of a body of information. What are the different parts of a document?. Title Headings Body - PowerPoint PPT Presentation
Transcript of Hypertext Markup Language HTML
Hypertext Markup Language HTML
Hypertext is vaguely defined as interconnecting pieces of information in a non-sequential but usually relational, manner for efficient browsing of a body of information.
• Title
• Headings
• Body
• Formatting (bold, italics. underline, etc.)
• Paragraphs
• Lists (numbered, bulleted etc.)
• Links to other locations within the document or to other
documents.
• Images, forms, charts and other objects.
What are the different parts of a document?
• Elements which describe the instruction.
• Angle brackets ( < > ) surrounding the elements.
• The combination of element and the angle bracket is often referred
to as a ‘TAG’. <B>…. </B> <P>….. </P>
• HTML elements can be modified by attributes that provide more
information for the TAG or act as parameters.
HTML file contains instructions that describe, how text, images and multimedia are displayed by Web Browsers.These instructions consist of:
HTML
Structure of a Typical HTML Page
<HTML>
<HEAD>
<TITLE> This is the Title. </TITLE>
</HEAD>
<BODY>
The body of the page goes here.
</BODY>
</HTML>
HTML Elements can be grouped as:
• Block Elements
• In-line Elements
• Anchor Elements or Link Elements
• Image Elements
• List Elements
• Table Elements
• Form Elements
Block Elements
Block Elements work with blocks of text usually enclosed within apair of Tags.
• <HTML> </HTML> Defines the text and tags within the block as conforming to HTML specifications.
• <META> </META> Provides extra information for the server e.g. for providing keywords for cataloging the document.• <META NAME=”Author” CONTENTS=”Gordon”>The <META> Tag is placed inside the <HEAD> structure.
• <HEAD> </HEAD> Encloses special information about the document. This information in turn is enclosed in its own Tags, e. g.• <TITLE> </TITLE> Encloses the title of the document which is shown in the caption for the browser window.
Block Elements• <!- - comment -->• <SCRIPT> </SCRIPT> Indicates the document uses a specified script.
• <BODY> </BODY> Encloses all the text and tags meant to be displayed in the document.• <BODY> Tag accepts a number of attributes:• <BODY BGCOLOR+”#FF0000”> Indicates a red background color.• 000000 black• 0c0c0c grey• ffffff white.
A wall paper can be specified as:• <BODY BACKGROUND=”bg.gif”>
Block Elements
• Foreground color <BODY TEXT=”00ff00”> Green color for the text.• Link Colors Colors can be specified for three kinds of links New link LINK= #nnnnnn Visited Link VLINK=#nnnnnn Active Link ALINK=#nnnnnn( where nnnnnn is the color specification in Hexadecimal.)
<BODY LINK=”#FF1494”> Specifies pink color for the links. <BODY VLINK=”#FFD700”> Specifies yellow color for the visited links.
Block Elements
• <CENTER> </CENTER> Centers the text and images within the visible window margins of the browser.• <BR> Line break element. Acts like a hard return. (Does not have an end tag)• <FONT> </FONT> Accepts attributes SIZE and COLOR• <FONT SIZE=value COLOR=value> Text goes here. </FONT>
• <HR> Inserts a margin-to-margin line across the page.• <P ALIGN=value> New paragraph </P> value may be LEFT, RIGHT or CENTER.• Preformatted Text.• <PRE> </PRE> Browser will not change the format.
Block Elements
Headings<H1> This is heading 1 </H1><H2> This is heading 2 </H2><H3> This is heading 3 </H3><H4> This is heading 4 </H4><H5> This is heading 5 </H5><H6> This is heading 6 </H6>
Block Elements
• <APPLET> </APPLET> is used to execute a Java Applet in the document. It must have a CODE attribute. Accepts a number of other attributes also.
• <APPLET CODE=Map WIDTH=100 HEIGHT=5 CODEBASE=”http://www.javasite.com/applets2use”> Parameters can be passed to the Java code by using :• <PARAM NAME=”State” VALUE=”Ohio”>
In-Line Elements
In-Line Elements are the tags that modify the appearance of the text, typically the body text.• <U> </U> Underline the enclosed text.• <B> </B> Bold the enclosed text• <I> </I> Use italics for the enclosed text.• <Strong> </Strong> Strong type as per setting of the browser.• <EM> </EM> Emphasis as per setting of the browser• <Strike> </Strike> A line through the text• <BIG> </BIG> A larger point size compared to the current font size.• <Small> </Small> A smaller point size.• <Sub> </Sub> Subscript• <Sup> </Sup> Superscript• <CITE> </CITE> A citation of the reference document• <BLINK> </BLINK> Blink on and off.
Anchor Elements/Link ElementsThe hypertext function in HTML pages is performed by the anchor element. It comes in two general formats:• <A NAME=”link to this spot”> ... optional text here...> </A> Creates a target anchor to which a link can point.• <A HREF=”Link address”>..optional text here...</A> or in case of a link to an anchor• <A HREF=”#anchor address”>..optional text here...</A>.
Examples:
• <A NAME=”contents”> <H2>Table of Contents</H2></A> is an anchor for Table of Contents.• <A HREF=”#contents”>Table of Contents.</A> is a link to the Table of contents.Link to another document on the Web.• Visit < A HREF=http://www.anywhere.com/ugly.html >the ugliest page on the Web</A> to see some bad examples of web page design.Link to specified bookmark in another document on the web.• To see < A HREF=http://www.anywhere.com/ugly.html/#contents >Table of Contents for the ugliest pages </A> on the web.• Remember: Images can be used in place of and in addition to the text between<A> and </A>.
Image Element <IMG> </IMG>
• <IMG SRC=”URL”> Where URL is a properly constructed URL for the image file.Example:• <IMG SRC=http://www.anywhere.com/myfiles/imagefile.gif > Image file is located at another location on the web.If the image file is located in the same directory as the HTML document,• <IMG SRC=”imagefile.gif”>Alternate Text• <IMG SRC=http://www.anywhere.com/myfiles/imagefile.gif ALT=”Image file here”>Sizing the image• <IMG SRC=http://www.anywhere.com/myfiles/imagefile.gif ALT=”Image file here” HEIGHT=”100” WIDTH=”100” BORDER= 5 >
List ElementsThere are three general forms of ListsOrdered or Numbered Lists <OL> </OL> Tags define the start and the end of an ordered list.<OL> <LI>This is the first item of the list </LI> <LI>This is the second item of the list </LI> <LI>This is the third item of the list </LI></OL>• Each list item is enclosed in a pair of tags <LI> </LI>.
• Type attribute can be used for different types of numbering (Browser dependent) TYPE=”1” 1, 2, 3.... TYPE=”A” A-Z TYPE=”a” a-z TYPE=”I” I, II,.... TYPE=”i” i, ii,.....• Multilevel lists can be created by additional <OL> </OL> tags.
List Elements
Unordered or Bulleted Lists. <UL> </UL> Tags define the start and the end of a bulleted list.<UL> <LI>This is the first item of the list </LI> <LI>This is the second item of the list </LI> <LI>This is the third item of the list </LI></UL>• Each list item is enclosed in a pair of <LI> </LI> tags
• Type attribute can be used to specify the type of bullet to be used (Browser dependent) TYPE=”disc” Round hollow discs. TYPE=”circle” Bullets appear as circles. TYPE=”square” Bullets appear as squares.• It is possible to combine an ordered and an unordered list.
List Elements
Definition Lists. <DL> </DL> Tags define the start and end of “glossary type” of lists, typically used to list terms and their definitions. <DL> <DT> Term1
<DD> Definition term1 <DT> Term2
<DD> Definition term2 <DT> Term3
<DD> Definition term3</DL>Indenting above, is for clarity only, however in the actual list definition is indented from the term. This allows the use of <DD> tag on its own to create indentation.
List Elements
Use of <DD> tag for indenting text:• <DD> This is indented text.
If more indentation is needed in an ordered or unordered list:• <LI> <DD> This is an indented list item </LI>
More space can be provided between list items by:• <BR><BR> Tags after </LI> tag.
Definition List allows the creation of a custom list using small bullet shaped images: <DL> <DD> <IMG SRC=”ball.gif”> This is a bullet item. <DD><IMG SRC=”ball.gif”> This is a bullet item. </DL>
Table Elements
• <TABLE> </TABLE> Tags define a table.Inside these tags all of the subordinate table tags appear. • <TR> </TR> Define a row in a table.
• <TD> </TD> mark the text or image in a cell. Used as many times as the number of columns in a row.
• <CAPTION></CAPTION> Specify a caption for the table.
• <TH> </TH> Specify a heading for a column. • Attribute BORDER with a TABLE tag creates border around cells.
Table Elements
Example:<TABLE BORDER=2> <CAPTION> This is the caption</CAPTION> <TR><TH> Column1</TH><TH> Column2</TH></TR> <TR><TD>Row1 Column1</TD><TD>Row1 Column2 </TD></TR> <TR><TD>Row2 Column1</TD><TD>Row2 Column2 </TD></TR></TABLE>
Form Elements
Forms allow web documents to interact with the user.
They include text fields, text area, push buttons, radio buttons, check boxes and list boxes.
Processing of forms is possible both on server as well as client.
How forms are created in an HTML document?
How are they processed on client side?
How are they processed on server side?
A pair of <form> </form> define the form. Different controls are placed inside the form.
<FORM> Additional tags and text go here </FORM>
Form Elements
Attributes of <Form> tag:
Name: The name of the form.
Method: How is the form content submitted to the server?
Action: URL where the form is sent.
Target: Window where info. received from server is displayed.Example:<Form Name=“myform”
Action=“http://mydomain.com/cgibin/form/”Method=Get>Other controls ……
</Form>
Form Elements
The <Input> element defines different input controls in a form.
The type of control is determined by value of attribute Type:
Text: Creates a text field.
Password: Creates a field for password input.
Hidden: Creates a field that can contain data but is invisible.Each of the above types, may optionally have further attributes:Name: Name of the control for reference in a script.Value: Initial text.Size: Width of the text box.Maxlength: Maximum allowable characters.
Form Elements
More Types:
Button: Creates a push button.
Name: Name of button control.
Value: Text that appears on the button.
Submit: Creates a “Submit” button to submit form to server.
Reset: Creates a “Reset” button to reset values of controls.Checkbox and Radio: Create buttons for selecting or deselecting an option and can have further attributes:
Name: Name of control.Value: Unique value that is submitted with form.Checked: Initial checked state.
Form ElementsMore Types:Image: Creates an “Image button” used for form submission.
Name: Name of controlSRC: Source of the image.
<Select> is another tag that can be placed inside <Form> to create a drop-down list having a number of options. It can provide single or multiple choices. This tag can have further attributes:
Name: Name of control.Size: Number of rows to display.Multiple: Multiple choice allowed.
Each option in the list starts with an <OPTION> tag that has the description of the option and can have attributes:
Selected: Default selectionValue: Value of item when the form is submitted.
Form Elements<Textarea>This is another tag that can be placed inside <Form> tag and creates a multiple line text box. Has three attributes:
Name: Name of the control.Rows: Height in lines.Cols: Width in characters.
Example:<Textarea Rows=4 Cols=40> This is default text.</Textarea>
Common Gateway Interface (CGI)
How Web Server Works?
Listening port - a daemon.
Text commands from user agents.
Example: GET index.html
If index.html needs to display other files (e.g. images), the browser generates additional requests for each additional file and on receipt, combines them and displays.
Example: Get /index.html
Get /image1.gif
Get /image2.gif
Web Server and CGI
Browser sends requests that are implemented by server.
HTTP protocol used by the web is mostly one way street.
Bulk of data travels from server to the browser (text, graphics, sounds, applets, movies etc.). This is called Response path. Only a small amount of data flows in the other direction, called the Request path.
Client Server
Where CGI fits in?
Request path contains “Get” requests but some additional data also flows in this path: details about browser, user domain, and depending on method, data relating to fields in a form.
When a server gets a request to run a CGI program, it collects the necessary data sent from the client, starts the CGI program and passes on the relevant data to it.
There are two ways the data travels from the client to the server and then to the CGI program.
GET method and
POST method.
Understanding the Get Method
In GET method, the data from the fields of a form are sent to the server as part of the URL.
E.g. http://www.mydomain.com/cgi-bin/pgm1.cgi?subject=xyz
The text after ? Is the data meant for the CGI program (pgm1.cgi).
The server packs the data in an environment variable called QUERY_STRING. Additional data about browser and its defaults are also packed in other environment variables that are made available to the CGI program.
It is the job of the CGI program to separate the relevant data from environment variables and take required action.
One of the ways to do that is to use Perl script to pick apart - “parse” individual pieces of information in QUERY_STRING. This information is in name = value pairs, each pair separated by &. +is used for space and some other hexadecimal characters for control sequences.
Understanding the Post Method
In this method no data is sent as part of the URL. All data is sent to the server via the requester path. Information from fields of a from is sent as name, value pairs. The server collects data in environment variables and the makes it available to the CGI program in the form of STDIN or standard input. It is the job of this program to parse the information contained in the standard input and use it as required.Some Environment variables:HTTP_ACCEPT: image/gif, image/jpeg (types of files that the browser can accept)HTTP_USER_AGENT: contains info about browser.QUERY_STRING: name=George&birthmonth=MayREMOTE_ADDR, REQUEST_METHOD, SCRIPT_NAME, SERVER_PORT, etc.
