What is HTML? learn html What is HTML?

What is HTML? learn html What is HTML?
HTML stands for 'hyper text mark-up language' and is a simple language that anyone can learn and is used for making web pages.

What tools are needed to make a webpage?
All that is needed is 'notepad' and a second browser, notepad is a simple text editor in windows, click start on your taskbar then programs and then goto accessories, finally click notepad. What does html look like? Most html tags work in pairs The first <HTML> tag tells the browser that it is reading a html document. The </HTML> tag with the / in it tells the browser that the html has ended. Take a look below The first <HEAD> tag tells the browser that it is reading the head of a html document. The </HEAD> tag with the / in it tells the browser that the head part has ended. One more example The first <TITLE> tag tells the browser that it is reading the title of a html document. The </TITLE> tag with the / in it tells the browser that the title has ended.

<TITLE>my first web page</TITLE> </HEAD>
The minimal webpage:- <HTML> <HEAD> <TITLE>my first web page</TITLE> </HEAD> <BODY> This is my very first webpage, aint i clever? </body> </HTML> Output:- This is my very first webpage, aint i clever?

What is Web Page Web page is a page which is displayed on the internet. Web pages are created by using HTML syntax. In web pages we can insert the picture ,table , graphics by using different tags of html language.

There are basically two types of HTML tags
Html tags are standard set of codes that are typed in between greater than and less than signs on the keyboard. Like <HTML> There are basically two types of HTML tags Padded Tags Unpadded Tags

<HTML>……..</Html> <Head>……..</Head>
Padded Tags:- Padded tags are those tags which are required to be closed at the end. The Padded tag is closed with forward hash (/) before the tag name. <HTML>……..</Html> <Head>……..</Head> <Body>……..</Body>

Unpadded tags:- unpadded tags is just the opposite of Padded Tags, as they need not be closed at the end. <HR> <BR>

Layout of Web Page Title Heading Body Footer

Basic Tags:- <HTML>….……..</HTML> <TITLE>…………</TITLE> <HEAD>………..</HEAD> <BODY>…………</BODY>

BASIC TAGS Tags Description <HTML>………</HTML>
Indicates the beginning of HTML document <Title> ………….</Title> Indicates title for the web page. <Head>………….</Head> Indicates the beginning of document header. <Body>………..</Body> Indicates the beginning of HTML text.

<Html> <Title> MY Page </Title> <Head> Punsoft life skills academy </head> <Body> this is my first web page </body. </Html> Output of this My page Punsoft life skills academy This is my first web page. Title Head Body

Formatting Tags Format Tags Description
Formatting Tags are used to design, styles and colors to the text. Format Tags Description Paragraph <P> Indicates paragraph break <BR> Indicates line break <PRE>….</PRE> Indicates Preformatted text <Blockquote>….. <Blockquote> Indicates block of text, indented <HR> Indicates Block of text, indented <center> It indicate the alignment of text or picture in center of a page.

Center Aligned Heading
<html><body> <h1 style="text-align:center">This is heading 1</h1> <p>The heading above is aligned to the center of this page. The heading above is aligned to the center of this page. The heading above is aligned to the center of this page.</p> </body></html> Output:- This is heading 1 The heading above is aligned to the center of this page. The heading above is aligned to the center of this page. The heading above is aligned to the center of this page. Note:- to make your text in center of page you can also use the option (tag) <center> simply.

Use of horizontal line in HTML
<body> <p>The hr tag defines a horizontal rule:</p> <hr /> <p>This is a paragraph</p><hr /> <p>This is a paragraph</p> </body></html> Output: The hr tag defines a horizontal rule: This is a paragraph

Text formatting tags Format Tags Description Character
<I>….</I> Indicates italics <U>…..</U> Underlines the text <B>……</B> Indicates bold text <TT>……</TT> Indicates “typewriter” font <EM>……</EM> Emphasizes the text (usually italics) <ADDRESS>….</ADDRESS> Indicates information about the author who created the web page in a unique font. <STRONG>…….</STRONG> Indicates typical Bold Font <CITE>………</CITE> Highlights Citation <CODE>…….</CODE> Used to enclose program codes <abbre > Title=“……..” It is used as abbreviation of full text.

Use of Paragraph option.<p>
<html> <body> <p>This is a paragraph. we are using this option to display the result of this option on the web page </p> </body> </html> Output:- This is a paragraph. we are using this option to display the result of this option on the web page

<html> <body> <p><b>This text is bold</b></p> <p><strong>This text is strong</strong></p> <p><big>This text is big</big></p> <p><em>This text is emphasized</em></p> <p><i>This text is italic</i></p> <p><small>This text is small</small></p> <p>This is<sub> subscript</sub> and <sup>superscript</sup></p> </body> </html>

Output:-Text formatting
This text is bold This text is strong This text is big This text is emphasized This text is italic This text is small This is subscript and superscript

Pre and p options <html> <body> <pre> This is preformatted text. It preserves both spaces and line breaks. </pre> <p>The pre tag is good for displaying computer code:</p> for i = 1 to 10 print i next i </body> </html>

Preformatted text (how to control line breaks and spaces)
Output This is preformatted text. It preserves both spaces and line breaks. The pre tag is good for displaying computer code: for i = 1 to 10 print I next i

Abbreviation tags: <html> <body> <abbr title="United Nations">UN</abbr> <br /> <acronym title="World Wide Web">WWW</acronym> <p>The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.</p> </body> </html>

Output of abbreviation tag
UN WWW The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.

<html> <body> <p> If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl): </p> <bdo dir="rtl"> Here is some Hebrew text </bdo> </body> </html>

Output If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl): Txet werbeH emos si ereH Note:- <bdo dir="rtl"> tag show the text in opposite direction like mirror effect.

Use of Some other tags (coding)
<html> <body> <code>Computer code</code> <br> <kbd>Keyboard input</kbd> <tt>Teletype text</tt> <samp>Sample text</samp> <var>Computer variable</var> <br><p> <b>Note:</b> These tags are often used to display computer/programming code. </p> </body></html>

Output:- Computer code Keyboard input Teletype text Sample text Computer variable Note: These tags are often used to display computer/programming code.

<html> <body> <abbr title="United Nations">UN</abbr> <br /> <acronym title="World Wide Web">WWW</acronym> <p>The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.</p> </body></html>

Header <H1>…</H1> First-level heading (big size) <H2>…..</H2> Second-level heading <H3>….</H3> Third -level of heading <H4>….</H4> Fourth-level of heading <H5>…..</H5> Fifth-level of heading <H6>……</H6> Sixth-level of heading <H7>……</H7> Smallest level of heading

Output:- This is heading 1 Use of heading tags: This is heading 2
<html> <body> <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> </body></html> Output:- This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6

Additional Tags Tag Attribute Function <! ………>
Indicates comment tag in Html. The browser does not interpret it. <body> Bgcolor=“……” It is used to give the background color of the page Background=“…” It is used to display the image on the page as a background These tags are used in body tag. <Sub>…...</Sub> It is used to show text in subscript form <Sup>…..</Sup> It is used to show text in superscript form

Use of background tags/attributes
<html> <body style="background-color:orange"> <h2>Look: Colored Background!</h2> </body> </html> Output:- Look: Colored Background! Note:- This option is also used as <body Bgcolor=“orange”> both have same effects.

Output:- This is a regular paragraph
Use of comment tag. <html> <body>  <p>This is a regular paragraph</p> </body></html> Output:- This is a regular paragraph

Color codes in html 000000 000033 000066 000099 0000CC 0000FF 003300
003333 003366 003399 0033CC 0033FF 006600 006633 006666 006699 0066CC 0066FF 009900 009933 009966 009999 0099CC 0099FF 00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF 00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF 330000 330033 330066 330099 3300CC 3300FF 333300 333333 333366 333399 3333CC 3333FF 336600 336633 336666 336699 3366CC 3366FF 339900 339933 339966 339999 3399CC 3399FF 33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF 33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF 660000 660033 660066 660099 6600CC 6600FF 663300 663333 663366 663399 6633CC 6633FF 666600 666633 666666 666699 6666CC 6666FF 669900 669933 669966 669999 6699CC 6699FF 66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF 66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF 990000 990033 990066 990099 9900CC 9900FF 993300 993333 993366 993399 9933CC 9933FF 996600 996633 996666 996699 9966CC 9966FF 999900 999933 999966 999999 9999CC 9999FF 99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF 99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF

Lists in HTML List mean to make/arrange the information in order. Listing of item is possible in html. List is divided into two parts. Order list: Unordered list: items to be listed are typed after <li> tag which mean <list item>. It is a unpadded tag it mean there is no need to close it, it is op

Ordered list:- Output:-
The ordered list consists of alphabetical order and numeric order. The ordered list begins with <ol> tag and is a padded tag hence the list ends with a </ol> tag. This tag must be closed at the end of list. Example:- <ol>Names of cities <li> Chandigarh <li> Ropar <li>Patiala </ol> Output:- Names of cities Chandigarh Ropar Patiala Note:- by default numbers are shown in ordered list.

Example and other features of ordered list:
Alphabets in ordered list: For uppercase list: <ol type=A> <li> Chandigarh <li> Ropar <li>Patiala </ol> Output:- Chandigarh Ropar Patiala Alphabets in ordered list: For uppercase list: <ol type=a> <li> Chandigarh <li> Ropar <li>Patiala </ol> Output:- Chandigarh Ropar Patiala

Other options of ordered list:
Roman Characters as ordered list:- Uppercase: <ol type=I> <li> Chandigarh <li> Ropar <li>Patiala </ol> Output:- Chandigarh Ropar Patiala Output:- Chandigarh Ropar Patiala Roman Characters as ordered list:- Lower case: <ol type=i> <li> Chandigarh <li> Ropar <li>Patiala </ol>

To start the list from particular number- in ordered list only
<ol type=“1”start=7> <li> Chandigarh <li> Ropar <li> Ludhiana <li> Patiala</ol> Output:- Chandigarh Ropar Ludhiana Patiala <ol type=“a”start=5> <li> Chandigarh <li> Ropar <li> Ludhiana <li> Patiala</ol> Output:- Chandigarh Ropar Ludhiana Patiala

Unordered list:- Output :-
The unordered list consists of bullets. The unordered list begins with <ul> tag and is a padded tag hence the list ends with a </ul>. <li>Tag is sub tag or attribute of this list. Example:- default bullets as unordered list. <ul><li> Chandigarh <li> Ropar> <li> Patiala <li> Ludhiana </ul> Output :- Chandigarh Ropar Patiala Ludhiana

To change the shape of the bullets from default to square.
<ul type=“square”> <li> Chandigarh <li> Ropar <li> Patiala <li> Ludhiana</ul> Output:- Chandigarh Ropar Patiala Ludhiana <ul type=“Circle”> <li> Chandigarh <li> Ropar <li> Patiala <li> Ludhiana</ul> Output:- Chandigarh Ropar Patiala Ludhiana

What is Nested list:- List within a list is known as a nested list. It can be extended up to several levels. The most common example of nested list is index or contents of any book.

Images in HTML Images can be inserted on the wed page using HTML tags. There are different types of images or graphics file formats like gif, jpeg(jpg), Wmf, etc. that can be easily inserted on a web page through HTML tags. HTML tag associated with inserting images and its attributes with their functions are given in the following table:

Image Tags in HTML Tag Attribute Function <Img
Places an image file within the page. Src=“ The address or the file name of the image. Alt=“….” A text message that can be displayed Align=“…..” Left, right and Center Height=“…” Value assigned in pixels Width=“…..” Hspace=“….” Value assigned in pixels(horizontal space) Vspace=“….” Value assigned in pixels(Vertical space) Border=“….” Value assigned in numbers (0,1,2,3…) Loop=“…….” For animation files The image tag is inserted anywhere in the head or the body tags and is typed as follows: <img Src=“c:\image\ast09.jpg” height=“500” width=“500” alt=“name of picture” border=“10”>

<html> <title> Inserting Images</title> <head> <center> This is a picture of roses</head> <body> <img Src=“C:\images\Roses.jpg” align=“center”> </body> </html>

This is a picture of Roses
Output of these tags

Links in HTML Links:-link is a connection of one test/picture with other text/picture. In Html links are necessary to link different web pages in a web site. It is also necessary for linking from one part of the document to another part in the same document. Types of Links:- Internal links External links

Tags for hyperlinks Tag Attributes Function <a>……</a>
The anchor tag when used with the href attribute creates a link to another document or anchor Href=“......” The address of the document or anchor point to link to. name-=“…” The name for this anchor point in the document Id=“…..” The id tad is exactly like the name tag.(include both name and id for maximum past and future compatibility.)

Internal Link Internal Links are those links that are inserted within a single current document. It mean it is a link within a document. It is used when Document is too large and it needs link from Top to Bottom or Bottom to Top.

Syntax 1.<a name=“location name’> <a href=“# location name”> link text </a> Type the text as you required 2.<a href=“#a1”> link text </a> <a name=a2> Note:- Both the text are required to create internal link.

Example: <Html> <Body> <a name=“a1”> <a href=“#a2”> Bottom </a> This is a document which shows the link with in a page. All the text is used to show link of top text with bottom text. <a href=“#a1”> Top </a> <a name=“a2”> </body></html> Note=“#” symbol is used to indicate internal link.

output Bottom This is a document which shows the link with in a page. All the text is used to show link of top text with bottom text. Top Blue color is always shown as link Note:- when you click on bottom then cursor will be shifted to bottom of the page or vice versa.

External Link External links are links to other web Pages or sites. when we have some important data or information in any other document then this link is used to connected two different document with each other.

For example:- <a href=“xyz.html”> click here to go to xyz file</a> This example “<a href” refers to the anchor tag and hyperlink tag. “xyz.html” refers to the file to which a hyperlink is being created from the current html document. “click here to go to xyz file” is the hypertext that will appear in the document as a link.

Link with Picture In this example a hyperlink is created to an image file and the image file is replaced with inflated picture of the same image. Small picture is shown as link. when you click on Link ,it will displayed large size of picture.

Syntax:- <a href=“ret. jpg”><img Src=“ret
Syntax:- <a href=“ret.jpg”><img Src=“ret.jpg” height=“500” width=“500”></a> Here if you click on small picture of ret then you can see original size of ret picture <a href=“roses.jpg”><img Src=“ret.jpg” height=“500” width=“500”></a> Here is you click on small picture of roses then you can see original size of ret picture

Table in HTML A table is an orderly arrangement of text and/or graphics into vertical column and horizontal rows. Tables can be created in html using the <table> tag. Table can contain different types of data for example it can include links, paragraphs, preformatted text, images, another table, and so on.

Table tags Tag Attribute Function <table>…..... ….</table>
Indicates the start and the end of the table. Align=“…….” Bgcolor=“……” Background color for the table. Values are assigned is in pixels or hexadecimal number. Background=“….” Background refers to background image. Width=“…….” Value assigned in percent.% Border=“……” Value assigned in numbers. (2,3,4) Bordercolor=“….” Value assigned in pixels or hexadecimal number. Border colorlight=“….” Border colordark=“….”

Tag Attribute Function Cellpadding Indicates space between border and contents of cell. Cellspacing Indicates spacing between cells. <Caption>…</caption> Indicates heading for the table. <tr..…</tr> Indicates table rows. Align=“……’ Row contents to be aligned left, right, center. Background=“…….” Background refers to background image. Bgcolor=“…..” Background color for the row. Values are assigned is in pixels or hexadecimal number. <th>….</th> Indicates heading for the columns. <td>….</td> Indicates individuals table elements or cells. Align=“……..” Cell contents to be aligned left, right, center.

Tag Attribute Function Background=“……..” Background refers to background image. Bgcolor=“……” Background color for the cell. Values are assigned is in pixels or hexadecimal number. Valign=“…… “ Values assigned for vertical alignment of data in the cell. (top, Center, Bottom, Baseline) Colspan=“……” Merging cells in different columns. Rowspan=“…….” Merging cells in different columns. Notes:- This table provides the different tags associated with tables in html . Tags are the main functions but the attributes are the

Html tags <html> <title> Table</title> <body><table border=10 align=center > <tr><td>1 <td>2<td>3</tr> <tr> <td>4<td>5<td>6 </tr> <tr> <td>7<td>8<td>9</tr> </table></Html>

Output of table tags Table 1 2 3 4 5 6 7 8 9

Rows and column span <html><title> Row span in table </title> <table border=12 bordercolor=“brown” align=left> <tr><td Colspan=2>1 <td>3</tr> <tr><td >4<td Rowspan=2>5<td>6</tr> <tr> <td>7<td Bgcolor=“pink”>8 </tr> </table></html>

Output Row span in table 1 3 4 5 6 7 8

Forms in HTML Forms are basically used for registration detail that the user may have to enter in the form. Tag Attribute function <form>..</form> Indicates the beginning and end of a form in HTML Action=file/URL Specifies the location where form data is passed. Method=get/post Specifies the method by which the data is sent to the server. Name=“……’ Name assigned to the form which is not displayed on the browser.

Forms In html the form is used as a special feature by which the user can fill in certain information in a web page and is send to the server. In a web page the input is collected with the help of the form tag in html. The information collected can be stored in form of a file or a database on the web server. Thus using forms one can create an effective interaction between the client and the server.

Rajindra education trust.
Insert text box in form Text box:- the text box is used to collect small amount of data in a single line/ text box. Data such as Name, address, Contact number, etc can be collected using this form field. Name:- Rajindra education trust. This is a text box.

Type your first name: Type your last name:
<html> <body> <form name="input" action="html_form_action.asp" method="get"> Type your first name: <input type="text" name="First Name" value="Mickey" size="20"> <br>Type your last name: <input type="text" name="Last Name" value="Mouse" size="20"> <br> <input type="submit" value="Submit"> </form> <p> If you click the "Submit" button, you will send your input to a new page called html_form_action.asp. </p></body></html> Output:- Type your first name: Type your last name: If you click the "Submit" button, you will send your input to a new page called html_form_action.asp.

If there is no border around the input form, your browser is too old.
<html> <body> <fieldset text=“red”><legend> Health information: </legend> <form action=""> Height <input type="text" size="3"> Weight <input type="text" size="3"> </form></fieldset> <p> If there is no border around the input form, your browser is too old.</p> </body> </html> Output:- Health information: Height Weight If there is no border around the input form, your browser is too old.

Important tags of form Tag Attribute Function <input>
It is a basis for data entry Type=“text” Type Specifies the form field in which data is to be entered Size=“……” Size of the text field (Value assigned in numbers: 0,1,2,3…) Name=“…..” Name of the control, which is not displayed on the browser. It is used to collect data on the server. values assigned can be alpha numeric or alphabets but not numeric. Maxlength=“….” Determines maximum number of characters to be entered in the field. (value assigned in numbers 0,1,2,3,..)

Text area The text area is used to collect information in more than one single line of text, in two or more lines. This form field scrolls in order to type the entire text to fit in the form field. It is used to collect detail on a particular topic which the visitor can enter as simple as typing out in a sentence of varying length.

Text area tags. Tag Attribute Function <textarea>………
It is the basis for data entry. Name=“………” Name of the control, which is not displayed on the browser. It is used to collect data on the server. Cols=“……….” Determine the size of the text area in numbers. Rows=“………”

This example cannot be edited because our editor uses a textarea for input, and your browser does not allow a textarea inside a textarea. This example cannot be edited because our editor uses a textarea for input, and your browser does not allow a textarea inside a textarea. Note:-When you see the slide view of this option then you can write anything in this textarea but not now.

Check box: The check box is used in order to specify preferences on the form page. The visitor simply clicks on the check box to select the item listed next to it in the form. The database is collected on the bases of whether the item having a check box is selected or not.

Check box tags Tag Attribute Function <input>
It is the basis for data entry Type=“checkbox” Type specifies the form field in which data is to be entered. (create a checkbox) Name =“……….” Name of the control, which is not displayed on the browser. It is used to collect data on the server. Value=“……….” Determines the Boolean value of the form field, which is sent to the server

Checkboxes: Checkboxes are used when you want the user to select one or more options of a limited number of choices. <form> I have a bike: <input type="checkbox" name="vehicle" value="Bike" /> <br /> I have a car: <input type="checkbox" name="vehicle" value="Car" /> <br /> I have an airplane: <input type="checkbox" name="vehicle" value="Airplane" /> </form> Output How it looks in a browser: I have a bike: I have a car: I have an airplane:

Like option –male or female.
Radio buttons The radio is used in case when you want that the visitor of the site can select just one option from the list or group. Like option –male or female. This button are always shown in circle form. Female Gender Male

Radio buttons: Tag Attribute Function <input>
It is the basis for data entry. Type=“radio” Type specifies the form field in which data is to be entered. (creates a radio button) Name=“…….” Name of the control, which is not displayed on the browser. It is used to collect data on the server. Value=“…….” Determine the Boolean value of the form field, which is sent to the server. Value assigned can be yes/no Checked It is used in case of multiple radio buttons only. If none of the buttons are clicked then by default the one with the checked tag will be selected.

Radio Buttons Radio Buttons are used when you want the user to select one of a limited number of choices. <form> <input type="radio" name="sex" value="male" /> Male <br /> <input type="radio" name="sex" value="female" /> Female </form> Example:- How it looks in a browser: Male Female

Select tag This option is used to give drop down menu list with a list of choices. This field is a similar to using a group of radio buttons, but takes less space on your form. You can configure a drop-down menu to allow one or multiple selections.

Select tag Tag Attributes function <select>…… </select>
Create a drop down menu list. Name=“…….” Name of the control, which is not displayed on the browser. It is used to collect data on the server. Size=“………” Specifies the number of items visible at a time Multiple=“………” Allows multiple items to be selected at a time. Defines the list item as option in the select form field. Value=“………….” Value assigned to each item as option in the select form field. selected Specifies the default item selected among list of items.

Output:- <html> <body> <form action="">
<select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form> </body> </html> Output:-

<html> <body> <form action=""> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat" selected="selected">Fiat</option> <option value="audi">Audi</option> </select></form></body> </html> Output:- Note: Here flat option is selected as a default value. Highlighted in Red color for knowledge.

Button: Buttons are provided to the site visitors to click on it so as to follow a certain command assigned to it. In form we use two sets of buttons i.e. Submit and Reset. The submit button is used in case the visitor has finished entering the form and wants to submit the data to the server that he has entered. The reset button is used to reset the form field so as to enter the next record.

Button tags: Tag attribute function <input>
It is the basis for the data entry. Type=“button” Type specifies the form field through which data is to be submitted.(create a button with the fault on it as “button”. Type=“submit” “type specifies the form field through which data is to be submitted.(create a submit button with the default text on the button as “submit query” Type=“reset” Type speciifes the form field through which data is to be submitted. (creates a reset button with the default text on the button as “reset”. Name=“…..” Value=“…… Is the text that will appear on the button in the browser.

When the user clicks on the "Submit" button, the content of the form is sent to the server. The form's action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input. <form name="input" action="html_form_submit.asp" method="get"> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /> </form> How it looks in a browser: Username:

Password: Password s used in case any security aspect is to be included on the web page. The password field will displayed the data entered in form of asterisks (stars), as the password is not to be visible on the screen. Hence the text typed in password is masked in star asterisks form in HTML.

Password tags Tag Attribute Function <input>
It is the basis for data entry. Type=“password” Type specifies the form field in which data is to be entered. (creates a text box for password with default size.) Name=“…….” Name of the control, which is not displayed on the browser. It is used to collect data on the server. Size=“……..” Size of the text field (value assigned in numbers: 0,1,2,3,…) Maxlength=“……) Determines maximum number of characters to be entered in the field.(value assigned in numbers: 0,1,2,….)

Frames in HTML Frame is basically division of the current browser window into rectangular sections that can open multiple web pages in different section after the main web page is opened in the browser. Frames divide the web page into different section like in rows and columns.

Frame tags Tag Attributes Function <frameset>……..
It indicates the start and end tags to create frames. Cols=“……” Divides the document window into columns. Value are assigned in percentage (%age) Rows=“……..” Divides the document window into rows. Value are assigned in percentage. (%age) Specifies the file to be displayed in each frame. Src=“……..” The location of the file to be opened in the frame. Name=“………” Specifies the name of the frame.

Tag Attributes function Noresize Denotes that the size of the frame is fixed and cannot be altered. Scrolling=“…….” Specifies scroll bars. Values assigned can be yes, no or auto. Border=“…….” Specifies border for the frame. (value assigned in numbers: 0,1,2,3,4…..) <no frames> ……. /Noframes> Specifies that non-Netscape browser displays html codes within these tags. Note:- to insert frames do not use the head and body tags, as you need to divide the entire document window into frames that open different html files.

Frame tag (vertical frames)
<html> <frameset cols="25%,50%,25%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> </frameset> </html>

Horizontal frames <html> <frameset rows="25%,50%,25%">
<frame src="frame_a.htm"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> </frameset> </html>

<html> <frameset cols="25%,50%,25%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> <noframes> <body>Your browser does not handle frames!</body> </noframes> </frameset> </html>

Rows and column in frame.
<html> <frameset rows="50%,50%"> <frame src="frame_a.htm"> <frameset cols="25%,75%"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> </frameset> </html>

<html> <body> <iframe src="default.asp"></iframe> <p>Some older browsers don't support iframes.</p> <p>If they don't, the iframe will not be visible.</p> </body> </html>

Some older browsers don't support iframes.
If they don't, the iframe will not be visible.

What is HTML? learn html What is HTML?

Similar presentations

Presentation on theme: "What is HTML? learn html What is HTML?"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

What is HTML? learn html What is HTML?

Similar presentations

Presentation on theme: "What is HTML? learn html What is HTML?"— Presentation transcript:

Similar presentations

About project

Feedback