html cgda final

8/7/2019 HTML Cgda Final

http://slidepdf.com/reader/full/html-cgda-final 1/38

HTML

Mahan Institute of Technologies, New Delhi

Contents

Unit-1: Basics of HTML 2

Unit -2: Working with HTML Text 10

Unit- 3: Using Graphics and Links 17

Unit -4:- Introduction to Tables and Forms 22

Unit -5:- Other Add-ons of HTML 33



HTML


1.1 Introduction to HTML

HTML stands for Hyper Text Markup Language, the standard used by World WideWeb (www) documents. The basic element of an HTML page is ASCII text. AHTML file can be created using any simple text editor, like notepad or WordPadand must have an htm or html file extension. The HTML elements are definedusing HTML tags represented by the angular brackets “<“ and “>” Any webbrowser like Internet Explorer or Netscape Communicator is required to interpretan HTML file.

A web page can be easily created using any simple text editor. All HTML files aresimple ASCII text files so any program having capabilities to save files in ASCIIformat can be used to create HTML files. A web browser is used to view a HTMLfile. In Internet explorer, the File | Open command is used to open a file on localhost or on Internet.

1.2 Difference between XHTML and HTML

HTML is rapidly being replaced by XHTML. The differences are very minor, butthe results of switching can be worth the effort. The primary benefit is thatXHTML is more widely accepted in non "computer" devices like cell phone,palm devices and other scaled down browsers. This is commonly calledportability between devices. XHTML is also said to be extensible, which is thefancy way of saying the new tags can be added without a new document typedeclaration.

UNIT

1



HTML


The primary major difference between the two is the relative strictness of XHTMLcompared to HTML. While someone coding in HTML could get away with somelapses in structure and coding, that is no longer possible with XHTML. The needto come up with XHTML emerged from the fact that HTML has become toconvoluted with browser specific tags that pages coded in html doesn‟t always

look the same in all browsers.

All XHTML documents must have only one root element and all elements mustbe written in lowercase, closed, and properly nested. And although you canactually do the same with HTML, it is actually not required and you can violateany or all of those rules and your HTML document can still be opened withoutany errors.

Another XHTML‟s only requirement is the declaration of the DOCTYPE thatdetermines what rules your document would follow; which it inherited from XML.Not only is the strictness of XHTML prominent in the structure, even variables

have been limited to lower case letters and the values assigned to them must besurrounded by quotation marks for it to be properly recognized.

Although in an as-is basis, XHTML provides little to no improvement over HTML,the edge of XHTML shows when using it in conjunction with XML tools. Thestrictness and overall streamlining of the HTML standards into XHTML wasintended to gain the clean and clutter free coding that is needed to furtherenhance webpage creation. XHTML also allowed website builders to createmodularized code that they can use repeatedly in multiple projects.

Part of HTML‟s success was the fact that it was a very forgiving language to code

in. Whatever you put into the file, the browser tries to make sense of it and putsup its best interpretation of the html file. But as browser technologies improveand webpage designs become more complex, the simplistic approach of HTMLbegins lose ground to XHTML‟s structured approach that doesn‟t leave anyguessing to the browser. Though it is hard to notice for those who only browsethe sites, there is already a gradual shift among webpage builders from HTML toXHTML. Indicating that HTML would soon be yielding its position to XHTML in thenear future.

1.3 Elements and Tags

Document Tags

Document tags define different parts of every HTML page you create. An HTMLdocument has two distinct parts-a head and a body. To create the head portionof your HTML document, the following text in entered in text editor:

<head><title> My Web Page </title>

</head>



HTML


This information is displayed in the title bar of the browser window. The headportion is the information between the tags <head> and </head> The body iswhere you do most of the work like entering text, graphics, headlines etc. Bodysection starts after </head> tag, and between two tags <body> and </body>.In order that all web browsers recognize that your file as an html document,

enter <html> before the first <head> tag and </html> after the last </body>tag. Now create your first html document by entering the following in a blanktext file:

Select File|Save As command from notepad and save this file as prog0.html.Now open your web browser and select the File|Open menu option, browse forthe file prog0.html, select OK to load it to your web browser. You will have theoutput similar to following figure. Tags are not case-sensitive and may be

written in uppercase or lowercase as per your wish.

Container and Empty Tags

The tags which have the form <> and </> are called container tags. The<html>, <head>, <title> and <body> tags are all container tags .Some tags do

not require „</>‟, such tags are called empty tags. For example horizontal rule

<html>

<head>

<title> My first web page </title>

</head>

<body>I am learning

</body>

</html>



HTML


tag written as <hr>, draws a line across the width of the document. Enter thefollowing lines in prog1.html:

Comment Tag

Comment tag helps to make comments in your document which can help youwhen you edit the source code at a later date. Anything you type between <!...and …> is ignored by the browser. Even the multiple lines are ignored. Note that

you need an exclamation point after the opening bracket, but not before theclosing bracket.Comment tags are used for own benefit to mark a point in a particular documentor to explain a particular confusing part of your document

Entering Paragraph on Your Web Page

For entering paragraph into an HTML document, you have a container tag-the<p> (paragraph) tag. It tells the browser that text in your document constitutea paragraph. As such browser ignores more than one space and any number of returns in a paragraph container. Only when you start another paragraph tag

<p>, the browser inserts a line between the texts. Please note that returns and

<html>

<head><title> My Web Page </title>

</head>

<body> Empty tags does not require closing

bracket

<hr><hr>

you are below two line.

</body>

</html>



HTML


spaces never affect the way in which text is displayed on the screen. Enter thefollowing two examples one by one in template2.txt:

<p> Projects are an important part of the curriculum.Even though we have entered a new paragraph, we are still there becoz browser

need a tag to identify a new paragraph.</p><p> Now this is new paragraph. A new paragraph is created only when youclose one tag and begin with the new tag</p>

<p>We are learning paragraph tag here which is responsible for givingparagraphs to your document. Even though we have entered a new paragraph,the browser will ignore this and consider it as single paragraph only.</p><p>This is next paragraph. A new paragraph is created only when you end onetag and begin with new paragraph tag</p>



HTML


You saw that both the examples appeared in the Web browser, in exactly thesame way.

Special <BR> tag

Enter the following lines a text editor and display it via your web browser.

<p>Mahan Institute of TechnologiesGN-10, Shivaji EnclaveNear Shivaji College/Raja GardenNew Delhi-110027

</p>

Though you have typed an address in a text file making all necessary formatting,your address becomes illegible. How?

This happened because your Web browser ignored extra spaces and returns!Now if you put paragraph container here, you will end up with an extra spacebetween each line, which again is not a correct way to write an address.

So what you require is a new tag and that tag is <BR> tag, an empty tag. Thistag puts a line return in your web document. Now using this tag, try thefollowing lines:

<p>Mahan Institute of Technologies<BR>GN-10, Shivaji Enclave <BR>Near Shivaji College/Raja Garden <BR>New Delhi-110027 <BR>

</p>



HTML




HTML


Exercise 1:

Create a web document similar to the following figure:

Exercise 2:

Create a web document similar to the following figure:



HTML


In this section you will study how to organize text in an HTML document, how toemphasize on certain text implicitly and explicitly as per your requirement.

2.1 HeadingsYou differentiate a portion of text from rest of the text is by use of the headertags <h1>, a container tags having range from level 1 to 6. <h1> defines thelargest heading; <h6> defines the smallest heading. Header tag creates a newline after its closing </h> tag. These tags allow you to create different level of emphasized headings to organize your document. Enter the following program ina text editor to see the result of these tags.

UNIT

2

<html>

<head>

<title> my web page </title>

</head>

<body>

<h1> level 1 heading </h1>



<h4> level 4 heading </h4><h5> level 5 heading </h5>


</body>

</html>



HTML


2.2 Emphasizing Text

Following categories of tags are used for emphasizing text in a Web document.

1. Explicit tags, often called Physical tags, tell the browser how theprogrammer wants text to appear physically.

2. Implicit tags, also called logical styles, give some freedom to browserin displaying text. These tags are relative to one another, dependingupon the browser.

Some Physical and Logical tags are tabulated below:

Physical Tags Effects on text

<b>,</b> Bold

<i>,</i> Italic

<u>,</u> Underlined text.<big>,</big> Larger font size

<small>,</small> Smaller font size

<sub>,</sub> subscripted text

<sup>,</sup> superscripted text

<strike>,</strike> Draws a horizontal line through the middle of the text.

Logical Tags

<em>,</em> emphasized text . These are generally rendered as italictext

<strong>,</strong> strong emphasis. These are generally rendered as bold text <tt>,</tt>

teletype. These are generally rendered as Mono-spacedtext.

Below is an example through which you can differentiate between physical andlogical tags, if your browser shows any.

<html><head>

<title> Presentations and Seminars </title></head>

<body><p> At Mahan, there is a willingness to get the students involved intensively inall activities <b> Seminars </b> on current topics are held from time to timeon the <strong> latest developments

</strong> in the industry. <br></p><p> Students are also required to make <i> presentations </i>

on <em> Projects and Topics </em> as part of theircurriculum <br>

</p></body>

</html>

http://www.w3schools.com/tags/tag_font_style.asp


http://www.w3schools.com/tags/tag_u.asp



http://www.w3schools.com/tags/tag_sup.asp


http://www.w3schools.com/tags/tag_strike.asp

http://www.w3schools.com/tags/tag_phrase_elements.asp






http://www.w3schools.com/tags/tag_strike.asp










HTML


2.3 Controlling Appearance of Text

The appearance of text in an HTML document can be controlled using <font>and </font> tags along with face, color and size attribute. Face="face-name"defines the font-name, like <font face="Times"> set the font to Times Roman.

You can also provide a list of acceptable choices, like for example, <fontface="Times", "Arial", "Helvetica">, where Times is listed as first choice, whileArial and Helvetica as alternatives. Size attribute is used to specify characterheight for the text, on a relative scale from 1 through 7 (normal font size being3). The size can be stated in absolute terms like “size=5” or relatively like

“size=+2”. The color attribute can also be specified using a hexadecimal color value likecolor="#eeff00" or one of the standard color names like color="red".

2.4 Some Special Characters

Some characters have a special meaning in HTML, like the less than sign (<)that defines the start of an HTML tag and also there are some special symbolslike © that may be required in your document. To display these characters, youmust insert character entities in your HTML source.

A character entity has three parts: an ampersand (&), an entity name or # andan entity number, and finally a semicolon (;). To display a less than sign in anHTML document we must write: < or &#60. Some most common entities aretabulated below:



HTML


Entity Name Entity Number Result

¢ £ ¥ ¢ £ ¥ ¢;£;¥

§ § §

© ® © ® ©;®

× ÷ × ÷ ×;÷ non-breaking space

< > < > <;>

& #38; &

You may use name or a number as per your choice. Though a name is easier toremember compared to a number, all browser do not support name. Note thatthe entities are case sensitive.

2.5 Using Lists in web Documents

HTML supports ordered, unordered and definition lists.

A list of items in which items are marked with numbers is called an ordered list.

An ordered list is created with the <ol> and </ol> tags. Each list item startswith the <li> tag and list heading is given by <lh> tag. The output of followingtext in html template.html will generate the output shown in figure.

<html><head>

<title> My courses </title></head>

<body><ol><lh><B> INFORMATION TECHNOLOGY</B>

<br><li>DOEACC 'O' 'A' 'B' and 'C' Level<li>MCITS <li>System Administrator

<li>KSOU<li>Java and .Net technologies</ol>

</body></html>



HTML


Inside a list item you can put paragraphs, line breaks, images, links, other lists,etc. A list inside a list is called nested list. The “type” attribute of <ol> tag isused to list items in numbers, Roman numerals or letters as per requirement.The various attribute value along with description is tabulated below:

Attribute Description

Type=A List markers would be set to uppercase letters

Type=a List markers would be set to lowercase letters

Type=I List markers would be set to uppercase Roman Numerals

Type=i List markers would be set to lower Roman Numerals

Type=1 List markers would be set to numbers

<html><head>

<title> Nested Lists </Title></head>

<body><ol>

<lh><em>Mahan Institute of Technologies</em> <br>

<li>Information Technology<ol type=1>

<li>ADIT<li>HDIT<li>MCA

<li>M.Tech</ol><li> Retail Management<ol type=1>

<li>Executive<li>Supervisor<li>Manager

<li>BBA</ol>

<li>Professional English<ol type=1>



HTML


<li>Spoken<li>Writing<li>Listening

</ol></ol>

</body></html>

The output of the following nested lists using attribute is shown in the figurebelow:

Unordered lists: The list items are marked with bullets in an unordered list.<ul> and </ul> tags are used to create unordered lists. Each list item startswith the <li> tag. The type attribute of <li> tag when has “value=circle” createsa circle and when has “value=disc” creates a filled circle (bullet). Inside a listitem you can put paragraphs, line breaks, images, links, other lists, etc.

Definition lists: These lists are also known as glossary lists consists of a list of

terms and explanation of the terms. A definition list starts with the <dl> tag,each definition-list term starts with the <dt> tag and each definition-listdefinition starts with the <dd> tag. Inside a definition-list definition (the <dd>tag) you can put paragraphs, line breaks, images, links, other lists, etc.



HTML


Exercise 1:

Create a HTML document which should have the following characteristics: -

a. Use of paragraphs.b. Use of 1 or more levels of section headers.c. Use of highlighting (bold, italics, etc.)d. Use of lists.

Exercise 2:

Create a HTML document corresponding to screen given below.



HTML


3.1 HTML Images

You can display images in a HTML document. There are many image formatsavailable today; few being most popular are GIF, JPEG, PCX, PNG, WMF etc.While inserting images in an HTML document, one should restrict to JPEG or GIFformats only because these two formats are widely supported by a range of webbrowsers.

In HTML, images are defined with the <img> tag with its src attribute (srcstands for “source”). The value of the src attribute is the URL of the image you

want to display on your page. The <img> tag is empty, which means that itcontains attributes only and it has no closing tag.

The syntax of defining an image:

<img src= “url”>

The URL points to the location where the image is stored. An image named"image1.jpg" located in the directory "ignou" in “D:” drive has the URL:D://ignou/image1.jpg. The browser puts the image where the image tag occursin the document. For example, the following listing will put the image before thetext as shown in figure.

<html><head><title>Images in HTML </title>

</head><body> <p><img src="d://mahan/image1.jpg"> Images preceeds this text </p>

</body></html>

UNIT

3



HTML


When an inline image is inserted in an HTML document along with text, bydefault the text is aligned with the bottom of the image as shown above. Thedefault alignment can be changed to one of the following.

Value Meaning

top Align the text with the top of the image

middle Align the text with the middle of the image

bottom Align the text with the bottom of the image

left Displays image on the left side and surrounding textflows around the image

Right Displays image on the right side and surrounding textflows around the image

<html><head>

<title>Images in HTML </Title></head>

<body><p>

<img src="d://mahan/image1.jpg" align=middle> Images precedes thistext but

in middle</p><p><img src="d:// mahan /image1.jpg" align=top> Images precedes this text butat the top

</p><p><img src="d://mahan/image1.jpg" align=bottom> Images precedes this text

but at bottom </p>

</body></html>



HTML


The Alt Attribute

An alternative text is provided with an image for users of text-based browsers orthe ones who turn off the graphics to increase the download speed of the webpages. The browser will then display the alternate text instead of the image. This

can be done by using the following syntax:

< img src="d://mahan/image1.jpg" alt="Internet Explorer">

The "alt" attribute is to improve the display and usefulness of your documentthat tells the user what they are missing in absence of a graphics based browser.

3.2 HTML Links:

Links are used to connect various web resources to your current document. It isdone by anchor tags <a> and </a> and href attribute of this tag. An anchor can

point to any resource on the Web: an HTML page, an image, a sound file, amovie, etc. These links are called hypertext links and would appear underlinedor in different colour to distinguish it from normal text.

There are two categories of links: Relative links and Absolute links.

Relative links: Theses refer documents in the current directory or within thesame page on which the link is used. For references to the current document,you need to use two instances of the anchor tag

1. Hypertext link as <a href= “section1”> link to section 1</a>

2. Reference point for that link as <a name= “section 1”> Section1starts here</a>



HTML


<html>

<head>

<title> Relative Links </Title>

</head>

<body>

<h2> Courses in MAHAN <h2>

<p> Click any one to know more about us <a><br><br>

<a href="HDIT.HTML"> HIGHER DIPLOMA IN INFORMATIONTECHNOLOGIES </a> <br>

<a href="ADIT.HTML"> ADVANCE DIPLOMA IN INFORMATIONTECHNOLOGIES </a> <br>

<a href="IP.HTML"> INTEGRATED PROGRAM </a> <br>

<a href="MCS.HTML">MAHAN CERTIFIED SYSTEM SPECIALIST </a><br>

<a href="CCC.HTML"> COMPUTER CONCEPTS COURSE </a> <br>

</html>

When <base> tag is used in an HTML document, references are then always

relative to the url given in the tag. For example:



HTML


<base href= http://www.mahanindia.com/cgi-bin>

<a href= “submit.pl”> refer to

http://www.mahan.com/cgi-bin/submit.pl

Irrespective of the actual location of the document.

Absolute links: These provide full address or the URL of the document,described in the link text.

http://www.mahan.com/cgi-bin








HTML


4.1 Working with Tables

With HTML you can create tables also with the <table> tag. These are definedrow by row with the <tr> tag and each row is divided into data cells with thehelp of <th> (table header) and <td> (table data) tags. The “border” attributeof the table creates a table with border and it takes the value in pixels.

“border=0” creates a borderless table.

<html>

<head><title>TABLES </Title>

</head><body><table border=5>

<caption> BCA Project status report </caption><tr>

<th> Project</th> <th> Roll No </th> <th> Status </th><tr>

<td> Hospital Management System </td><td>BCA001</td><td> Submitted </td>

</tr><tr>

<td> Hotel Management System </td><td>BCA002 </td><td>Not submitted </td>

</tr></table> <br><table border=5><caption> MCA Project status report </caption>

<tr><th> Project</th> <th> Roll No </th> <th> Status </th>

<tr>

<td> A prototype of GIS </td><td>MCA001</td><td> Passed with A grade</td></tr><tr>

<td> www.eyatra.com </td><td>MCA002 </td><td>Not submitted </td>

</tr></table>

</body></html>

UNIT

4



HTML


A data cell can contain text, images, lists, paragraphs, forms, horizontal rules,tables, etc.

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

<thead> Defines a table head

<tbody> Defines a table body

<tfoot> Defines a table footer

http://www.w3schools.com/tags/tag_table.asp


http://www.w3schools.com/tags/tag_th.asp


http://www.w3schools.com/tags/tag_tr.asp


http://www.w3schools.com/tags/tag_td.asp


http://www.w3schools.com/tags/tag_caption.asp


http://www.w3schools.com/tags/tag_colgroup.asp


http://www.w3schools.com/tags/tag_col.asp


http://www.w3schools.com/tags/tag_thead.asp


http://www.w3schools.com/tags/tag_tbody.asp


http://www.w3schools.com/tags/tag_tfoot.asp














HTML


4.2 Introduction to Forms

HTML Forms are used to select different kinds of user input, it allow user tointeract by sending the requested information in the form of text, drop-downmenus, radio buttons, checkboxes, etc.

A form is defined within <form> and </form> tags with the help of <input>,<select> and <textarea> tags.

<form><input><input>

</form>

<input> tag: The most used form tag is the <input> tag. This is an open tagand is used to add graphical user interface such as text fields, password fields,check boxes, radiobuttons, reset button and submit buttons. The differentattributes for the <input > tags are:

Different Elements of Forms

HTML presents us with various form object/elements that are placed INSIDE theform tags.

<INPUT TYPE="TEXT"> <INPUT TYPE="PASSWORD">

<INPUT TYPE="RADIO">

<INPUT TYPE="CHECKBOX">

<INPUT TYPE="BUTTON">

<INPUT TYPE="RESET">

<INPUT TYPE="SUBMIT">

<INPUT TYPE="HIDDEN">

<INPUT TYPE="IMAGE">

<INPUT TYPE="FILE">

<SELECT>...</SELECT>

<TEXTAREA>...</TEXTAREA>

<BUTTON>...<BUTTON>

<OPTION>...</OPTION>

The first ten listed above are all variants of the <INPUT> element. However,since their TYPE is different, the other attributes taken by them differ. We shallexplore these along with their attributes, one by one.



HTML


The HTML form <INPUT TYPE="TEXT">This form object is the most common. It defines a horizontal text field as:

The attributes associated with this tag are:

NAME: Sets a name for this form element. You can give any name to yourtext field as long as you don't duplicate it in the same form.

SIZE: Determines the size. The value taken is a number.

MAXLENGTH: Specifies the number of characters a user can submit thru thiselement.

VALUE: Specifies a default value that is displayed inside the text field when auser first opens the page.

Type your first name in the box:

<INPUT TYPE="TEXT" SIZE="15" MAXLENGTH="20"

NAME="first_name" VALUE="Your first name">

is displayed as:

Type your first name in the box:Your first name

The HTML form <INPUT TYPE="PASSWORD">

This object is very similar to the TEXT mentioned above and takes the sameattributes. Its inclusion also causes the display of a text field. However, anythingtyped by the user inside this text field is replaced by *s or other characters thatmask what you type. Try this out yourself.

Type your password in the box:

<INPUT TYPE="PASSWORD" SIZE="15" MAXLENGTH="20"

NAME="yourpassword" VALUE="">

Type your password in the box:

Attributes:

NAME: Sets a name for the password field by which it is referred usingscripting languages.

MAXLENGTH: Sets the maximum number of characters a user can input.

SIZE: Takes a number as value and specifies the size.

VALUE: Specifies a default value.



HTML


<INPUT TYPE="CHECKBOX">

Creates a checkbox. Its other attributes are:

CHECKED: This attribute takes no value. Including it in the tag causes thecheckbox to be checked by default.

NAME: Specifies a name for the element. VALUE: Assigns a value to the element.

<INPUT TYPE="CHECKBOX" NAME="your_answer"

VALUE="yes" CHECKED> Do you like this site?

Do you like this site?

<INPUT TYPE="RADIO">

Makes a radio button. The attributes taken are similar to those of a checkbox(above).

CHECKED: Puts the radio button to "ON" state. Takes no value.

NAME: Assigns a name to the radio button.

VALUE: Specifies a value that can be passed to the server.

<INPUT TYPE="RADIO" VALUE="yes" NAME="html"

CHECKED> Do you like HTML?

Do you like HTML?

Important: What is the difference between a radio button and acheckbox?

These two elements are not the same though they share the same attributes.Radio buttons are employed when a single reply is desired from a list of choices.In such cases, radio buttons with the same name but different values are

grouped together. Since the buttons have the same name, the user is able toselect only one. The value of the selected button along with its name is sent tothe server. Checkboxes on the other hand, can be used in two ways. One to geta 'yes'/'no' kind of response and the other to get a multiple selection.

We'll see this through examples.

Do you like Mozart's Symphony No.40?<BR>

<INPUT TYPE="RADIO" NAME="moz" VALUE="yes" CHECKED> Yes<BR>

<INPUT TYPE="RADIO" NAME="moz" VALUE="No"> No<BR>

<INPUT TYPE="RADIO" NAME="moz" VALUE="notsure"> Can't Say<BR>



HTML


Do you like Mozart's Symphony No.40?

Yes

No

Can't Say

Try to select two radio buttons... you can't... that is because they have the samename. Thus, the code above presents a list of choices and expects only oneselection.

Notice that the CHECKED attribute selects the first radio button when the page isfirst loaded. Depending on the selection, the associated value is sent to theserver along with the radio button name. So, if the visitor selects Can't Say, theassociated value notsure is sent along with button name, moz.

An example for checkboxes can be...

Which ice-cream flavors do you like?<BR>

<INPUT TYPE="CHECKBOX" NAME="ice" VALUE="chocolate" CHECKED>

Chocolate<BR>

<INPUT TYPE="CHECKBOX" NAME="ice" VALUE="vanilla">

Vanilla<BR>

<INPUT TYPE="CHECKBOX" NAME="ice" VALUE="strawberry">

Strawberry<BR>

<INPUT TYPE="CHECKBOX" NAME="ice" VALUE="mint">

Mint<BR>

Which ice-cream flavors do you like?

Chocolate

Vanilla

Strawberry

Mint

Notice that in this case too, all checkboxes have the same name. However, youcan select multiple boxes (try it out...). This is helpful when we desire zero ormore values. Values of all checkboxes that are selected are sent to the serveralong with checkbox name for further processing by a CGI script. Another use of checkboxes is to get a 'yes'/'no' kind of response as in:

<INPUT TYPE="CHECKBOX" VALUE="yes" NAME="mlist">

http://www.webdevelopersnotes.com/tutorials/adhtml/html_form_tutorial_html_forms_part_1.php3








HTML


Would you like to subscribe to our mailing list?

Would you like to subscribe to our mailing list?

Although, radio buttons can be employed for the same purpose, I prefer to usecheckboxes since they display a better icon.

So, radio buttons or checkboxes are used depending on the type of question youhave. A generalization would be to employ radio buttons for questions whereonly one reply is desired and checkboxes for questions where multiple replies arepossible.

HTML form <INPUT TYPE="BUTTON">

This creates a button which is quite useful for triggering JavaScript events.

NAME: Specifies a name for the button.

VALUE: Determines what is written on the button.

<INPUT TYPE="BUTTON" NAME="pbut" VALUE="Push Me">

The button above does nothing when clicked. However, you can attachJavaScript event handlers to this button to set up some kind of action.

<INPUT TYPE="BUTTON" VALUE="Push me to get a greeting"

NAME="mybut" onclick="return disp();">

The HTML form RESET buttonCreates a reset button, which when clicked, clears all form elements and setsthen to their default values. It has only one attribute VALUE that specifies thetext written on the button.

<INPUT TYPE="RESET" VALUE="Clear the form">

Clear the f orm

The HTML form SUBMIT button

Makes a button, which when clicked, submits the form. It has two attributes

VALUE: Puts text on the button.

NAME: Names the submit button. Its value is generally used by server sidescripts to determine if the form has been submitted.

<INPUT TYPE="SUBMIT" VALUE="Send Email" NAME="semail">

Send Email


http://www.webdevelopersnotes.com/tutorials/adhtml/html_form_forms_in_html_part_2.php3









HTML


Clicking on a submit button sends the name-value pairs of all form elements tothe server. (Note: This submit button does not work. However, you can test oneon the right to join my mailing list!)

<INPUT TYPE="FILE">

Allows your users to send files to your server. It is accompanied with a Browse button that helps the user locate the file on his computer. Attributes taken are:

ACCEPT: Its value is a MIME type/s that your server program is ready toaccept. A comma-separated list of mime types can be supplied.

NAME: Specifies a name for the element.

VALUE: Specifies the default text inside the text field.

<INPUT TYPE="FILE" NAME="uploadfile" VALUE="">

<INPUT TYPE="IMAGE">This is a great tag allowing designers to make their own buttons. With its useyou can replace the dull default button with a colorful image.There are four attributes associated with this tag

SRC: a required attribute that points to the URL of the image file.

NAME: Gives a name to the element.

ALIGN: aligns the surrounding text with respect to the image.

BORDER : sets the border around the image. If zero is assigned as its value,no border is displayed.

<INPUT TYPE="IMAGE" SRC="but.gif" NAME="sub_but" BORDER="0">

<INPUT TYPE="HIDDEN">

This creates a form input field which is not displayed in the browser. It is idealfor passing values set by the programmer or by certain actions of the user.It has only two attributes.

NAME: Defines a name for the element.

VALUE: Sets a value for the element.

<INPUT TYPE="HIDDEN" NAME="birthday" VALUE="16-03-72">

<SELECT>... </SELECT> form elementThis HTML form element lets you develop a drop down scrolling list or menu. The

list can allow for single as well as multiple selections.









HTML


The individual items of the list are placed with the help of another tag,<OPTION> (described below).The attributes taken are:

NAME: defines a name for this element.

SIZE: if the size is '1', the list is displayed as a dropdown menu else as a

scrolling list. MULTIPLE: allows for multiple selection.

Here is how you create a four-item drop down selection list.

Which system do you use?

<SELECT NAME="platform" SIZE="1">

<OPTION VALUE="win">Windows

<OPTION VALUE="mac">Macintosh

<OPTION VALUE="unix">Unix

<OPTION VALUE="oth">Other

</SELECT>

Which system do you use?Windows

<OPTION> </OPTION>

The <OPTION> tag defines an item of the selection list described above. Its end

tag is not required. It takes two attributes: VALUE: Gives a value to the item that is sent to the server along with the

selection list name.

SELECTED: Selects an item when the form is displayed.

Which system do you use?

<SELECT NAME="platform" SIZE="1">

<OPTION VALUE="win">Windows

<OPTION VALUE="mac">Macintosh

<OPTION VALUE="unix" SELECTED>Unix

<OPTION VALUE="oth">Other

</SELECT>

Which system do you use?Unix

HTML form TEXTAREA elements

This creates a multi-line text box. Its attributes are:

http://www.webdevelopersnotes.com/tutorials/adhtml/html_form_code_html_forms_part_3.php3












HTML


NAME: Defines a name for this element.

COLS: Specifies the number of character columns. Thus, a value of 20 meansthat the text box is twenty character in width.

ROWS: Determines the height of text box in terms of character rows.

WRAP: Sets word wrapping inside the text box and can take off , virtual or

physical as value. 'Off' turns word wrapping off. Through 'virtual', wordwrapping is turned on but the line endings are not transmitted to the server.'Physical' displays and sends the line endings to the server.

To define a value for the TEXTAREA, include the text between the start and endtags.

<TEXTAREA NAME="query" COLS="20" ROWS="5">

Please type your query here.

</TEXTAREA>

Please type your que

<BUTTON>...</BUTTON>This element is specific to Internet Explorer and ignored by Netscape.It creates a button that is quite similar to ones made by <INPUTTYPE="BUTTON">. It takes the following attributes:

NAME: Sets a name for the button.

TYPE: Can take either SUBMIT, RESET or BUTTON as value.

VALUE: Defines the value that is sent to the server along with the buttonname.

<BUTTON NAME="somebut" TYPE="BUTTON" VALUE="justabut">

Just for Kicks</BUTTON>







HTML


Exercise: Design the following Web Form using desired Elements.



HTML


5.1 Frames

With frames, you can display more than one HTML document in the samebrowser window. Each HTML document is called a frame, and each frame isindependent of the others. Frames provide an effective way to organize the webcontent by dividing the page into different parts.

In the example below “frames.htm” we have a frameset with two columns. Thefirst column is set to 300 pixel of the width of the browser window. The secondcolumn is set to rest of the width of the browser window. The HTML document

"navigate.htm" is put into the first column, and the HTML document "main.htm"is put into the second column.

Frames.htm

<html><head>

<title> Frames in HTML</Title></head>

<frameset cols="300,*" border=10><frame name= "Navigation" src="navigate.htm" NORESIZE

SCROLLING="AUTO"><frame name= "Main" src="main.htm" NORESIZE

SCROLLING="AUTO"></frameset>

<noframes> Your browser cannot process frames so acquire one and revisitthis site.

</noframes></html>

Navigate.htm<html><head>

<title>Frames </Title></head>

<body><center><h3><a href="index.htm"> About us </a><br><br><a href="courses.htm"> Courses </a><br><br><a href="faculties.htm"> Faculties </a><br><br>

<a href="contact.htm"> Contact us </a><br><br></h3>

UNIT

5



HTML


</center></body></html>

Main.htm

<html><head>

<title>Frames </Title></head>

<body><center><h1 align="center"> Welcome to MAHAN Institute Of Technologies

</h1><p> Welcome to MAHAN Institute home page

</p></center>

</body></html>

Note: The frameset column size value can be set in pixels (cols="200,500") orpercentage where one of the columns can be set to use the remaining space(cols="25%,*").



HTML


5.2 Style Sheets

A CSS (cascading style sheet) file allows you to separate your web sites (X)HTMLcontent from it's style. As always you use your (X)HTML file to arrange thecontent, but all of the presentation (fonts, colors, background, borders, text

formatting, link effects & so on...) are accomplished within a CSS.

At this point you have some choices of how to use the CSS, either internally orexternally.

Internal Style sheet

First we will explore the internal method. This way you are simply placing theCSS code within the <head></head> tags of each (X)HTML file you want tostyle with the CSS. The format for this is shown in the example below.

<head><title><title><style type="text/css">CSS Content Goes Here</style></head><body>

With this method each (X)HTML file contains the CSS code needed to style thepage. Meaning that any changes you want to make to one page, will have to be

made to all. This method can be good if you need to style only one page, or if you want different pages to have varying styles.

External Stylesheet

Next we will explore the external method. An external CSS file can be createdwith any text or HTML editor such as "Notepad" or "Dreamweaver". A CSS filecontains no (X)HTML, only CSS. You simply save it with the .css file extension.You can link to the file externally by placing one of the following links in the headsection of every (X)HTML file you want to style with the CSS file.

<link rel="stylesheet" type="text/css" href="Path To stylesheet.css" />

Or you can also use the @import method as shown below

<style type="text/css">@import url(Path To stylesheet.css)</style>

Either of these methods are achieved by placing one or the other in the headsection as shown in example below.

<head><title><title>

<link rel="stylesheet" type="text/css"href="style.css" /></head>



HTML


<body>

or

<head>

<title><title><style type="text/css"> @import url(Path To stylesheet.css) </style></head><body>

By using an external style sheet, all of your (X)HTML files link to one CSS file inorder to style the pages. This means, that if you need to alter the design of allyour pages, you only need to edit one .css file to make global changes to yourentire website.

Here are a few reasons this is better.

Easier Maintenance Reduced File Size Reduced Bandwidth Improved Flexibility

5.3 Web 2.0

The term „Web 2.0‟ was coined to define an emerging pattern of new uses of the

Web and approaches to the Web development, rather than a formal upgrade of Web technologies as the 2.0 version number may appear to signify. The keyWeb 2.0 concepts include:

It’s an attitude, not a technology: An acknowledgement that Web 2.0 is notprimarily about a set of standards or applications, but a new mindset to how theWeb can be used.

A network effect: This describes applications which are more effective as thenumbers of users increase. This effect is well-known in computer networks, withthe Internet providing an example of how network traffic can be more resilient

as the numbers of devices on the Internet grows.

The long tail: As the numbers of users of the Web grows, this can providebusiness opportunities for niche markets which previously it may not have beencost-effective to reach.

Small pieces, loosely coupled: As the technical infrastructure of the Webstabilizes, it becomes possible to integrate small applications. This enablesservices to be developed more rapidly and can avoid the difficulties of developing and maintaining more complex and cumbersome systems.



HTML


Openness: The development of more liberal licenses (such copyright licensessuch Creative Commons; open sources licenses for software) can allowintegration of data and reuse of software without encountering legal barriers.Trust your users: Rather than having to develop complex access regimes, amore liberal approach can be taken who can make it easier for users to make

use of services.

Network as a platform: The Web can now be used to provide access to Webapplications, and not just informational resources. This allows users to make useof applications without having to go through the cumbersome exercise of installing software on their local PC.

Always beta: With Web applications being managed on a small number of central servers, rather on large numbers of desktop computers, it becomespossible for the applications to be enhanced in an incremental fashion, with norequirements for the user of the application to upgrade their system.

Web 2.0 Application Areas

The key application areas which embody the Web 2.0 concepts include:

Blogs: A Web site which is commonly used to provide diaries, with entriesprovided in chronological order. Blogs can be used for a variety of purposes,ranging from reflective learning by students and researchers through todissemination channels for organisations.

Wikis: A wiki refers to a collaborative Web-based authoring environment. The

term wiki comes from an Hawaiian word meaning „quick‟ and the origins of thename reflect the aims of the original design of wikis to provide a very simpleauthoring environment which allows Web content to be created with the need tolearn the HTML language or to install and master HTML authoring tools.

Syndicated content: RSS and Atom formats have been developed to enablecontent to be automatically embedded elsewhere. RSS was initially developed tosupport reuse of blog content produced. RSS‟s success led to the format beingused in other areas (initially for the syndication of news feeds and then for otheralerting purposes and general syndication of content). The Atom format wasdeveloped as an alternative to RSS.

Mashups: A mashup is a service which contains data and services combinedfrom multiple sources. A common example of a mashup is a Google Mapsmashup which integrated location data was a map provided by the Google Mapsservice.

Podcasts: A podcast initially referred to syndicated audio content, which can betransferred automatically to portable MP3 players, such as iPods. However theterm is sometimes misused to describe a simple audio file.

Social sharing services: Applications which provide sharing of various types of

resources such as bookmarks, photographs, etc. Popular examples of socialsharing services include del.icio.us and Flickr.



HTML

Social networks: Communal spaces which can be used for group discussionsand sharing of resources.

Folksonomies and tagging: A bottom-up approach to providing labels forresources, to allow them to be retrieved