History of HTML History of HTML The person who invented HTML (known as the 'father of the web') was not a computer programmer, but a physicist working at the European Laboratory for Particle Physics in Geneva, Switzerland. HTML's inventor, Tim Berners-Lee, wanted to create a way for researchers to be able to use the internet to collaborate and share information. Versions Of HTML The first definitive version was HTML 2.0 -- this had most of the elements, but did not support tables, or ALIGN attributes. HTML 3 (late 1995) was an ambitious effort on the part of Dave Raggett to upgrade the features and utility of HTML. HTML 3.2 was the next official version, integrating support for TABLES, image, heading and other element ALIGN attributes, and a few other finicky details. HTML 4.0 Support for some of the NetscHTML. 4.01 is the current official standard. It includes support for most of the proprietary extensions, ape/Microsoft extensions, such as FRAMEs, EMBED and APPLET.
Html presentation
Sep 11, 2014
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
History of HTMLHistory of HTML
The person who invented HTML (known as the 'father of the web') was not a computer programmer, but a physicist working at the European Laboratory for Particle Physics in Geneva, Switzerland. HTML's inventor, Tim Berners-Lee, wanted to create a way for researchers to be able to use the internet to collaborate and share information.
Versions Of HTML The first definitive version was HTML 2.0 -- this had most of the elements, but did not support tables, or ALIGN attributes.
HTML 3 (late 1995) was an ambitious effort on the part of Dave Raggett to upgrade the features and utility of HTML.
HTML 3.2 was the next official version, integrating support for TABLES, image, heading and other element ALIGN attributes, and a few other finicky details.
HTML 4.0 Support for some of the NetscHTML.
4.01 is the current official standard. It includes support for most of the proprietary extensions, ape/Microsoft extensions, such as FRAMEs, EMBED and APPLET.
What is HTML? What is HTML? HTML is a language for describing web pages.HTML is a language for describing web pages. HTML stands for HTML stands for HHyper yper TText ext MMarkup arkup LLanguage anguage HTML is not a programming language, it is a HTML is not a programming language, it is a
markup languagemarkup language A markup language is a set of A markup language is a set of markup tagsmarkup tags HTML uses HTML uses markup tagsmarkup tags to describe web pages to describe web pages HTML TagsHTML Tags HTML markup tags are usually called HTML tagsHTML markup tags are usually called HTML tags HTML tags are keywords surrounded by HTML tags are keywords surrounded by angle angle
brackets brackets like <html> like <html> HTML tags normally HTML tags normally come in pairscome in pairs like <b> and like <b> and
</b> </b> The first tag in a pair is the The first tag in a pair is the start tag,start tag, the second the second
tag is the tag is the end tagend tag Start and end tags are also called Start and end tags are also called opening tagsopening tags
and and closing tagsclosing tags..
What is HTML?
HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language A markup language is a set of markup tags HTML uses markup tags to describe web pages
HTML Tags
HTML markup tags are usually called HTML tags HTML tags are keywords surrounded by angle brackets like <html> HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag is the end tag Start and end tags are also called opening tags and closing tags.
What are HTML Documents and Web Pages ?
HTML documents describe web pages HTML documents contain HTML tags and plain text HTML documents are also called web pagesThe purpose of a web browsers (like Internet Explorer) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page:<html>
<body><h1>My First Heading</h1><p>My first paragraph</p>
</body></html>Example Explained:-
The text between <html> and </html> describes the web page The text between <body> and </body> is the visible page content The text between <h1> and </h1> is displayed as a heading The text between <p> and </p> is displayed as a paragraph
HTML ElementsHTML Elements An HTML element is everything from the start tag to the end tag:An HTML element is everything from the start tag to the end tag: Start tagStart tagElement contentElement contentEnd tagEnd tag <p>This is a paragraph</p><p>This is a paragraph</p> <a href="default.htm" >This is a link</a><a href="default.htm" >This is a link</a> HTML Element SyntaxHTML Element Syntax An HTML element starts with a An HTML element starts with a start tagstart tag An HTML element ends with an An HTML element ends with an end tagend tag The The element contentelement content is everything between the start and end is everything between the start and end
tag tag Some HTML elements have Some HTML elements have empty contentempty content Some HTML elements have a Some HTML elements have a missing end tagmissing end tag Note:Note: The start tag can have additional information (attributes). The start tag can have additional information (attributes).
See next chapter.See next chapter. Nested HTML ElementsNested HTML Elements Most HTML elements can be nested (can contain other HTML Most HTML elements can be nested (can contain other HTML
elements).elements). Most HTML documents consist of nested HTML elements.Most HTML documents consist of nested HTML elements.
HTML TagsHTML Tags HTML HeadingsHTML Headings HTML headings are defined with the <h1> to <h6> tags.HTML headings are defined with the <h1> to <h6> tags. <h1>This is a heading</h1><h1>This is a heading</h1> <h2>This is a heading</h2><h2>This is a heading</h2> <h3>This is a heading</h3><h3>This is a heading</h3> Note: Note: Use the HTML heading tags for headings only. Don't use headings Use the HTML heading tags for headings only. Don't use headings
to make something BIG or bold.to make something BIG or bold.
HTML ParagraphsHTML Paragraphs HTML paragraphs are defined with the <p> tag.HTML paragraphs are defined with the <p> tag. <p>This is a paragraph</p><p>This is a paragraph</p> <p>This is another paragraph</p><p>This is another paragraph</p>
HTML LinksHTML Links HTML links are defined with the <a> tag.HTML links are defined with the <a> tag. <a href="http://www.chitkara.edu.in">This is a link</a><a href="http://www.chitkara.edu.in">This is a link</a> Note:Note: The <a> tag contains an attribute (href) to provide the link The <a> tag contains an attribute (href) to provide the link
address. address.
HTML Tags CONTD…HTML Tags CONTD…
HTML ImagesHTML Images HTML images are defined with the <img> tag.HTML images are defined with the <img> tag. <img src="constr4.gif" width="144" height="50" /><img src="constr4.gif" width="144" height="50" />
HTML CommentsHTML Comments Comments can be inserted in the HTML code to make it more readable and understandable. Comments can be inserted in the HTML code to make it more readable and understandable.
Comments are ignored by the browser and not displayed.Comments are ignored by the browser and not displayed. Comments are written like this:Comments are written like this: <!-- This is a comment --><!-- This is a comment --> Note:Note: There is an exclamation point after the opening bracket, but not before the closing bracket. There is an exclamation point after the opening bracket, but not before the closing bracket. HTML Line BreaksHTML Line Breaks Use the <br /> tag if you want a line break (a new line) without starting a Use the <br /> tag if you want a line break (a new line) without starting a
new paragraph:new paragraph: <p>This is<br />a para<br />graph with line breaks</p><p>This is<br />a para<br />graph with line breaks</p> The <br /> tag is an empty tag. It has no end tag like </br>.The <br /> tag is an empty tag. It has no end tag like </br>. <br> or <br /><br> or <br /> In XHTML, XML, and future versions of HTML, tags with no end tags (closing In XHTML, XML, and future versions of HTML, tags with no end tags (closing
tags) are not allowed. tags) are not allowed. Even if <br> works in all browsers, writing <br /> instead is more Even if <br> works in all browsers, writing <br /> instead is more future future
proofproof..
HTML Tags CONTD…HTML Tags CONTD…
HTML Rules (Lines)HTML Rules (Lines) The <hr /> tag is used to create an horizontal rule (line).The <hr /> tag is used to create an horizontal rule (line). Example:Example: <p>This is a paragraph</p><p>This is a paragraph</p> <hr /><hr /> <p>This is a paragraph</p><p>This is a paragraph</p> <hr /><hr /> <p>This is a paragraph</p><p>This is a paragraph</p>
HTML Formatting TagsHTML Formatting Tags HTML uses tags <b> for HTML uses tags <b> for boldbold, <i> for , <i> for italicitalic and <u>for and <u>for
underlineunderline the text and <s> for strikethrough the text and the text and <s> for strikethrough the text and <tt> for typewriter font.<tt> for typewriter font.
These HTML tags are called formatting tags. <sub>for These HTML tags are called formatting tags. <sub>for subscript the text and <sup> for give superscript subscript the text and <sup> for give superscript formatting.formatting.
Text Formatting TagsText Formatting Tags TagDescription:TagDescription: <b><b>Defines bold textDefines bold text <big><big>Defines big textDefines big text <<emem>>Defines emphasized textDefines emphasized text <i><i>Defines italic textDefines italic text <small><small>Defines small textDefines small text <strong><strong>Defines strong textDefines strong text <sub><sub>Defines subscripted textDefines subscripted text <sup><sup>Defines superscripted textDefines superscripted text <ins><ins>Defines inserted textDefines inserted text <del><del>Defines deleted textDefines deleted text <s><s>Deprecated. Use <del> insteadDeprecated. Use <del> instead <strike><strike>Deprecated. Use <del> insteadDeprecated. Use <del> instead <u><u>Deprecated. Use styles insteadDeprecated. Use styles instead
Output ,Citations, Quotations, and Definition TagsOutput ,Citations, Quotations, and Definition Tags
TagDescription:TagDescription: <code><code>Defines computer code textDefines computer code text <<kbdkbd>>Defines keyboard text Defines keyboard text <<sampsamp>>Defines sample computer codeDefines sample computer code <<tttt>>Defines teletype textDefines teletype text <<varvar>>Defines a variableDefines a variable <pre><pre>Defines preformatted textDefines preformatted text <<abbrabbr>>Defines an abbreviationDefines an abbreviation <acronym><acronym>Defines an acronymDefines an acronym <address><address>Defines an address elementDefines an address element <<bdobdo>>Defines the text directionDefines the text direction <<blockquoteblockquote>>Defines a long quotationDefines a long quotation <q><q>Defines a short quotationDefines a short quotation <cite><cite>Defines a citationDefines a citation <<dfndfn>>Defines a definition termDefines a definition term
Empty HTML Elements, Empty HTML Elements, Lowercase TagsLowercase Tags
HTML elements without content are called empty elements. HTML elements without content are called empty elements. Empty elements have no end tag.Empty elements have no end tag.
<br /> is an empty element without a closing tag.<br /> is an empty element without a closing tag. In XHTML, XML, and future versions of HTML, all elements In XHTML, XML, and future versions of HTML, all elements
must be closed. must be closed. Adding a slash to the start tag, like <br />, is the proper Adding a slash to the start tag, like <br />, is the proper
way of closing empty elements, accepted by HTML, XHTML way of closing empty elements, accepted by HTML, XHTML and XML.and XML.
Even if <br> works in all browsers, writing <br /> instead is Even if <br> works in all browsers, writing <br /> instead is more future proof.more future proof.
HTML tags are not case sensitive: <P> means the same as HTML tags are not case sensitive: <P> means the same as <p>. Plenty of web sites use uppercase HTML tags in their <p>. Plenty of web sites use uppercase HTML tags in their pages.pages.
World Wide Web Consortium (W3C) World Wide Web Consortium (W3C) recommendsrecommends lowercase in HTML 4, and lowercase in HTML 4, and demandsdemands lowercase tags in lowercase tags in newer versions of (X)HTML.newer versions of (X)HTML.
HTML AttributesHTML Attributes Attributes provide additional information about HTML Attributes provide additional information about HTML
elements.elements.
HTML elements can have attributes HTML elements can have attributes Attributes provide additional information about the element Attributes provide additional information about the element Attributes are always specified in the start tag Attributes are always specified in the start tag Attribute SyntaxAttribute Syntax Attributes always come in name/value pairs like this: name="value".Attributes always come in name/value pairs like this: name="value". ExamplesExamples border="1"border="1" href="http://www.chitkara.edu.in"href="http://www.chitkara.edu.in" bgcolor="yellow"bgcolor="yellow" Attributes Example 1:Attributes Example 1: <table> defines an HTML table. (You will learn more about HTML <table> defines an HTML table. (You will learn more about HTML
tables later)tables later) <table border="1"><table border="1"> The The border attributeborder attribute defines a border type for the <table> defines a border type for the <table>
element. element.
Useful TipUseful Tip Always Quote Attribute ValuesAlways Quote Attribute Values Attribute values should always be enclosed in quotes. Attribute values should always be enclosed in quotes.
Double style quotes are the most common, but single style Double style quotes are the most common, but single style quotes are also allowed.quotes are also allowed.
In some rare situations, like when the attribute value itself In some rare situations, like when the attribute value itself contains quotes, it is necessary to use single quotes:contains quotes, it is necessary to use single quotes:
name='John "ShotGun" Nelson'name='John "ShotGun" Nelson' HTML Tip - Use Lowercase AttributesHTML Tip - Use Lowercase Attributes Attribute names and attribute values are case-insensitive.Attribute names and attribute values are case-insensitive. However, the World Wide Web Consortium (W3C) However, the World Wide Web Consortium (W3C)
recommends lowercase attributes/attribute values in their recommends lowercase attributes/attribute values in their HTML 4 recommendationHTML 4 recommendation
Newer versions of (X)HTML will demand lowercase Newer versions of (X)HTML will demand lowercase attributes.attributes.
The HTML Style AttributeThe HTML Style Attribute
The purpose of the style attribute is:The purpose of the style attribute is: To provide a common way to style all HTML elements.To provide a common way to style all HTML elements. Styles was introduced with HTML 4, as the new and preferred Styles was introduced with HTML 4, as the new and preferred
way to style HTML elements. With HTML styles, styles can be way to style HTML elements. With HTML styles, styles can be added to HTML elements directly by using the style attribute, added to HTML elements directly by using the style attribute, or indirectly by in separate style sheets (CSS files).or indirectly by in separate style sheets (CSS files).
You can learn everything about styles and CSS in our CSS You can learn everything about styles and CSS in our CSS tutorial.tutorial.
In our HTML tutorial we use the style attribute to introduce In our HTML tutorial we use the style attribute to introduce you to HTML styles. you to HTML styles.
HTML Style ExamplesHTML Style Examples style="background-color:yellow"style="background-color:yellow" style="font-size:10px"style="font-size:10px" style="font-family:Times"style="font-family:Times" style="text-align:center“style="text-align:center“
Attributed More…Attributed More…
Background ColorBackground Color <body style="background-color:yellow"><body style="background-color:yellow"> The style attribute defines a style for the <body> element.The style attribute defines a style for the <body> element. Font Family, Color and SizeFont Family, Color and Size <p style="font-family:courier new; color:red; font-<p style="font-family:courier new; color:red; font-
size:20px">size:20px"> The style attribute defines a style for the <p> element.The style attribute defines a style for the <p> element. Text AlignmentText Alignment <h1 style="text-align:center"><h1 style="text-align:center"> The style attribute defines a style for the <h1> element.The style attribute defines a style for the <h1> element. The The bgcolor attributebgcolor attribute defines the background color for defines the background color for
the <body> element. the <body> element. The The href attributehref attribute provides the link address for the <a> provides the link address for the <a>
element.element.
Hyperlinks, Anchors, and Hyperlinks, Anchors, and LinksLinks
In web terms, a hyperlink is a reference (an address) to a resource on the In web terms, a hyperlink is a reference (an address) to a resource on the web.web.
Hyperlinks can point to any resource on the web: an HTML page, an image, Hyperlinks can point to any resource on the web: an HTML page, an image, a sound file, a movie, etc.a sound file, a movie, etc.
An anchor is a term used to define a hyperlink destination inside a An anchor is a term used to define a hyperlink destination inside a document.document.
The HTML anchor element <a>, is used to define both hyperlinks The HTML anchor element <a>, is used to define both hyperlinks and anchors.and anchors.
We will use the term HTML link when the <a> element points to a We will use the term HTML link when the <a> element points to a resource, and the term HTML anchor when the <a> elements defines an resource, and the term HTML anchor when the <a> elements defines an address inside a document.address inside a document.
An HTML LinkAn HTML Link Link syntax: Link syntax: <a href="url">Link text</a>The start tag contains attributes about the <a href="url">Link text</a>The start tag contains attributes about the
link.link. The element content (Link text) defines the part to be displayed.The element content (Link text) defines the part to be displayed. The href AttributeThe href Attribute The The href attributehref attribute defines the link "address". defines the link "address".
Anchors more…Anchors more…
A link is the "address" to a document (or a resourse) on the A link is the "address" to a document (or a resourse) on the web.web.
The target AttributeThe target Attribute The target attribute defines where the linked document will be The target attribute defines where the linked document will be
opened.opened. The code below will open the document in a new browser window:The code below will open the document in a new browser window: <a href="http://www.chitkara.edu.in/"target="_blank">Visit <a href="http://www.chitkara.edu.in/"target="_blank">Visit
CIET!</a>CIET!</a> The name AttributeThe name Attribute When the name attribute is used, the <a> element defines a named When the name attribute is used, the <a> element defines a named
anchor inside a HTML document.anchor inside a HTML document. Named anchor are not displayed in any special way. They are Named anchor are not displayed in any special way. They are
invisible to the reader.invisible to the reader. Named anchor syntax:Named anchor syntax: <a name="label">Any content</a>The link syntax to a named <a name="label">Any content</a>The link syntax to a named
anchor: anchor: <a href="#label">Any content</a>The # in the href attribute <a href="#label">Any content</a>The # in the href attribute
defines a link to a named anchor.defines a link to a named anchor.
The Image Tag and the Src The Image Tag and the Src AttributeAttribute
In HTML, images are defined with the <img> tag. In HTML, images are defined with the <img> tag. The <img> tag is empty, which means that it contains The <img> tag is empty, which means that it contains
attributes only and it has no closing tag. attributes only and it has no closing tag. To display an image on a page, you need to use the src To display an image on a page, you need to use the src
attribute. Src stands for "source". The value of the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display on attribute is the URL of the image you want to display on your page. your page.
The syntax of defining an image:The syntax of defining an image: <img src="url"><img src="url"> The Alt Attribute The Alt Attribute The alt attribute is used to define an "alternate text" for an The alt attribute is used to define an "alternate text" for an
image. The value of the alt attribute is an author-defined image. The value of the alt attribute is an author-defined text: text:
<img src="boat.gif" alt="Big Boat"><img src="boat.gif" alt="Big Boat">
Image to ImageMap…Image to ImageMap… This example demonstrates how to turn an image into an image This example demonstrates how to turn an image into an image
map. You will see that if you move the mouse over the image, the map. You will see that if you move the mouse over the image, the coordinates will be displayed on the status bar. coordinates will be displayed on the status bar.
<html><html> <body><body> <p><p> Move the mouse over the image, and look at the status bar to see Move the mouse over the image, and look at the status bar to see
how thehow the coordinates change.coordinates change. </p></p> <p><p> <a href="tryhtml_ismap.htm"><a href="tryhtml_ismap.htm"> <img src="planets.gif"<img src="planets.gif" ismap width="146" height="126">ismap width="146" height="126"> </a></a> </p></p> </body></body> </html> </html>
TablesTables Tables are defined with the <table> tag. A table is divided Tables are defined with the <table> tag. A table is divided
into rows (with the <tr> tag), and each row is divided into into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.horizontal rules, tables, etc.
An Example coding for simple table:An Example coding for simple table: <table border="1"><table border="1">
<tr><tr><td>row 1, cell 1</td><td>row 1, cell 1</td><td>row 1, cell 2</td><td>row 1, cell 2</td>
</tr></tr><tr><tr>
<td>row 2, cell 1</td><td>row 2, cell 1</td><td>row 2, cell 2</td><td>row 2, cell 2</td>
</tr></tr></table></table>
Headings in a TableHeadings in a Table
Headings in a table are defined with the <th> tag.Headings in a table are defined with the <th> tag. <table border="1"><table border="1">
<tr><tr><th>Heading</th><th>Heading</th><th>Another Heading</th><th>Another Heading</th>
</tr></tr><tr><tr>
<td>row 1, cell 1</td><td>row 1, cell 1</td><td>row 1, cell 2</td><td>row 1, cell 2</td>
</tr></tr><tr><tr>
<td>row 2, cell 1</td><td>row 2, cell 1</td><td>row 2, cell 2</td><td>row 2, cell 2</td>
</tr></tr></table></table>
Empty Cells in a TableEmpty Cells in a Table Table cells with no content are not displayed very well in Table cells with no content are not displayed very well in
most browsers.most browsers. Note that the borders around the empty table cell are Note that the borders around the empty table cell are
missing (NB! Mozilla Firefox displays the border).missing (NB! Mozilla Firefox displays the border). To avoid this, add a non-breaking space ( ) to empty To avoid this, add a non-breaking space ( ) to empty
data cells, to make the borders visible: data cells, to make the borders visible: <table border="1"><table border="1">
<tr><tr><td>row 1, cell 1</td><td>row 1, cell 1</td><td>row 1, cell 2</td><td>row 1, cell 2</td>
</tr></tr><tr><tr>
<td>row 2, cell 1</td><td>row 2, cell 1</td><td> </td><td> </td>
</tr></tr></table> </table>
Table Tags DescriptionTable Tags Description
<table><table>Defines a tableDefines a table <<thth>>Defines a table headerDefines a table header <<trtr>>Defines a table rowDefines a table row <td><td>Defines a table cellDefines a table cell <caption><caption>Defines a table captionDefines a table caption <<colgroupcolgroup>>Defines groups of table columnsDefines groups of table columns <<colcol>>Defines the attribute values for one or more Defines the attribute values for one or more
columns in a tablecolumns in a table <<theadthead>>Defines a table headDefines a table head <<tbodytbody>>Defines a table body Defines a table body <<tfoottfoot>>Defines a table footer Defines a table footer
Lists…Lists… HTML supports ordered, unordered and definition lists.HTML supports ordered, unordered and definition lists. Unordered ListsUnordered Lists An unordered list is a list of items. The list items are marked with An unordered list is a list of items. The list items are marked with
bullets (typically small black circles).bullets (typically small black circles). An unordered list starts with the <ul> tag. Each list item starts An unordered list starts with the <ul> tag. Each list item starts
with the <li> tag.with the <li> tag. Ordered ListsOrdered Lists An ordered list is also a list of items. The list items are marked An ordered list is also a list of items. The list items are marked
with numbers.with numbers. An ordered list starts with the <ol> tag. Each list item starts with An ordered list starts with the <ol> tag. Each list item starts with
the <li> tag.the <li> tag. Definition ListsDefinition Lists A definition list is not a list of items. This is a list of terms and A definition list is not a list of items. This is a list of terms and
explanation of the terms.explanation of the terms. A definition list starts with the <dl> tag. Each definition-list term A definition list starts with the <dl> tag. Each definition-list term
starts with the <dt> tag. Each definition-list definition starts with starts with the <dt> tag. Each definition-list definition starts with the <dd> tag.the <dd> tag.
Tag DescriptionTag Description
Inside a definition-list definition (the <dd> tag) Inside a definition-list definition (the <dd> tag) you can put paragraphs, line breaks, images, you can put paragraphs, line breaks, images, links, other lists, etc.links, other lists, etc.
<<olol>>Defines an ordered listDefines an ordered list <<ulul>>Defines an unordered listDefines an unordered list <<lili>>Defines a list itemDefines a list item <dl><dl>Defines a definition listDefines a definition list <<dtdt>>Defines a definition termDefines a definition term <<dddd>>Defines a definition descriptionDefines a definition description <dir><dir>Deprecated. Use <ul> insteadDeprecated. Use <ul> instead <menu><menu>Deprecated. Use <ul> insteadDeprecated. Use <ul> instead
Forms…Forms… A form is an area that can contain form elements.A form is an area that can contain form elements. Form elements are elements that allow the user to enter Form elements are elements that allow the user to enter
information (like text fields, textarea fields, drop-down information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form.menus, radio buttons, checkboxes, etc.) in a form.
A form is defined with the <form> tag.A form is defined with the <form> tag. <form> <form>
<input> <input> <input><input>
</form></form> InputInput The most used form tag is the <input> tag. The type of The most used form tag is the <input> tag. The type of
input is specified with the type attribute. The most input is specified with the type attribute. The most commonly used input types are explained below.commonly used input types are explained below.
Text FieldsText Fields Text fields are used when you want the user to type letters, Text fields are used when you want the user to type letters,
numbers, etc. in a form.numbers, etc. in a form.
Form Contd…Form Contd… Input BoxInput Box <form><form>
First name: <input type="text" name="firstname"><br>First name: <input type="text" name="firstname"><br>Last name: <input type="text" name="lastname">Last name: <input type="text" name="lastname">
</form></form> Note that the form itself is not visible. Also note that in Note that the form itself is not visible. Also note that in
most browsers, the width of the text field is 20 characters most browsers, the width of the text field is 20 characters by default.by default.
Radio ButtonsRadio Buttons Radio Buttons are used when you want the user to select Radio Buttons are used when you want the user to select
one of a limited number of choices.one of a limited number of choices. <form><form>
<input type="radio" name="sex" value="male"> Male<br><input type="radio" name="sex" value="male"> Male<br><input type="radio" name="sex" value="female"> Female<input type="radio" name="sex" value="female"> Female
</form></form>
Note that only one option can be chosen. Note that only one option can be chosen.
Form Contd…Form Contd… Checkboxes Checkboxes Checkboxes are used when you want the user to select one or more Checkboxes are used when you want the user to select one or more
options of a limited number of choices.options of a limited number of choices. <form><form> I have a bike:<input type="checkbox" name="vehicle" I have a bike:<input type="checkbox" name="vehicle"
value="Bike"><br>value="Bike"><br> I have a car: <input type="checkbox" name="vehicle" I have a car: <input type="checkbox" name="vehicle"
value="Car"><br>value="Car"><br> I have an airplane: <input type="checkbox" name="vehicle" I have an airplane: <input type="checkbox" name="vehicle"
value="Airplane">value="Airplane"> </form></form> The Form's Action Attribute and the Submit ButtonThe Form's Action Attribute and the Submit Button When the user clicks on the "Submit" button, the content of the form When the user clicks on the "Submit" button, the content of the form
is sent to the server. is sent to the server. <form name="input" <form name="input"
action="html_form_submit.asp"method="get">action="html_form_submit.asp"method="get">Username: <input type="text" name="user">Username: <input type="text" name="user"><input type="submit" value="Submit"><input type="submit" value="Submit">
</form></form>
If you type some characters in the text field above, and click the If you type some characters in the text field above, and click the "Submit" button, the browser will send your input to a page called "Submit" button, the browser will send your input to a page called "html_form_submit.asp". The page will show you the received input. "html_form_submit.asp". The page will show you the received input.
Form Tags DescriptionForm Tags Description
<form><form>Defines a form for user inputDefines a form for user input <input><input>Defines an input fieldDefines an input field <<textareatextarea>>Defines a text-area (a multi-line text Defines a text-area (a multi-line text
input control)input control) <label><label>Defines a label to a controlDefines a label to a control <<fieldsetfieldset>>Defines a fieldsetDefines a fieldset <legend>Defines a caption for a fieldset<legend>Defines a caption for a fieldset <select>Defines a selectable list (a drop-down box)<select>Defines a selectable list (a drop-down box) <optgroup>Defines an option group<optgroup>Defines an option group <option>Defines an option in the drop-down box<option>Defines an option in the drop-down box <button>Defines a push <button>Defines a push
button<isindex>Deprecated. Use <input> insteadbutton<isindex>Deprecated. Use <input> instead
Html Colour DescriptionHtml Colour Description
Hex values are written as 3 double digit numbers, starting with a # sign.Color
Color HEX Color RGB
#000000 rgb(0,0,0)
#FF0000 rgb(255,0,0)
#00FF00 rgb(0,255,0)
#0000FF rgb(0,0,255)
#FFFF00 rgb(255,255,0)
#00FFFF rgb(0,255,255)
#FF00FF rgb(255,0,255)
#C0C0C0 rgb(192,192,192)
#FFFFFF rgb(255,255,255)
Frames…Frames… With frames, you can display more than one HTML document in the same With frames, you can display more than one HTML document in the same
browser window, and each frame is independent of the others.browser window, and each frame is independent of the others. The disadvantages of using frames are:The disadvantages of using frames are: The web developer must keep track of more HTML documents The web developer must keep track of more HTML documents It is difficult to print the entire page It is difficult to print the entire page The Frameset TagThe Frameset Tag The <frameset> tag defines how to divide the window into frames The <frameset> tag defines how to divide the window into frames Each frameset defines a set of rows Each frameset defines a set of rows oror columns columns The values of the rows/columns indicate the amount of screen area each The values of the rows/columns indicate the amount of screen area each
row/column will occupy row/column will occupy The Frame TagThe Frame Tag The <frame> tag defines what HTML document to put into each frame The <frame> tag defines what HTML document to put into each frame In the example below we have a frameset with two columns. The first In the example below we have a frameset with two columns. The first
column = 25% of the total width.The second column =75% of the total column = 25% of the total width.The second column =75% of the total width. The HTML document "frame_a.htm" is put into the first column, and width. The HTML document "frame_a.htm" is put into the first column, and the HTML document "frame_b.htm" is put into the second column:the HTML document "frame_b.htm" is put into the second column:
<frameset cols="25%,75%"> <frameset cols="25%,75%"> <frame src="frame_a.htm"> <frame src="frame_a.htm"> <frame src="frame_b.htm"><frame src="frame_b.htm"> </frameset></frameset> Note:Note: The frameset column size value can also be set in pixels The frameset column size value can also be set in pixels
(cols="200,500"), (cols="200,500"), and one of the columns can be set to use the remaining space and one of the columns can be set to use the remaining space
(cols="25%,*").(cols="25%,*").
Useful Tips…Useful Tips…
If a frame has visible borders, the user can resize it by If a frame has visible borders, the user can resize it by dragging the border. To prevent a user from doing this, you dragging the border. To prevent a user from doing this, you can add noresize="noresize" to the <frame> tag.can add noresize="noresize" to the <frame> tag.
Add the <noframes> tag for browsers that do not support Add the <noframes> tag for browsers that do not support frames.frames.
Important:Important: You cannot use the <body></body> tags You cannot use the <body></body> tags together with the <frameset></frameset> tags! However, together with the <frameset></frameset> tags! However, if you add a <noframes> tag containing some text for if you add a <noframes> tag containing some text for browsers that do not support frames, you will have to browsers that do not support frames, you will have to enclose the text in <body></body> tags! See how it is enclose the text in <body></body> tags! See how it is done in the first example belowdone in the first example below
TagDescriptionTagDescription <frameset>Defines a set of frames<frameset>Defines a set of frames <frame>Defines a sub window (a frame)<frame>Defines a sub window (a frame) <noframes>Defines a noframe section for browsers that do <noframes>Defines a noframe section for browsers that do
not handle framesnot handle frames <iframe>Defines an inline sub window (frame)<iframe>Defines an inline sub window (frame)
Font attributes…Font attributes… The <font> tag in HTML is deprecated. It is supposed to be The <font> tag in HTML is deprecated. It is supposed to be
removed in a future version of HTML.removed in a future version of HTML. Even if a lot of people are using it, you should try to avoid it, Even if a lot of people are using it, you should try to avoid it,
and use styles instead.and use styles instead. The HTML <font> TagThe HTML <font> Tag With HTML code like this, you can specify both the size and the type With HTML code like this, you can specify both the size and the type
of the browser output :of the browser output : <p><p> <font size="2" face="Verdana">This is a paragraph.</font></p><font size="2" face="Verdana">This is a paragraph.</font></p> <p><p> <font size="3" face="Times">This is another <font size="3" face="Times">This is another
paragraph.</font></p>paragraph.</font></p> Font AttributesFont Attributes AttributeExampleAttributeExample PurposePurpose size="number"size="2“size="number"size="2“ Defines the font sizeDefines the font size size="+number"size="+1“size="+number"size="+1“ Increases the font sizeIncreases the font size size="-number"size="-1“size="-number"size="-1“ Decreases the font sizeDecreases the font size face="face-name"face="Times“face="face-name"face="Times“ Defines the font-Defines the font-
namename color="color-value"color="#eeff00“color="color-value"color="#eeff00“ Defines the font colorDefines the font color color="color-name"color="red“color="color-name"color="red“ Defines the font colorDefines the font color
ThanksThanks
Have A Nice Day…Have A Nice Day…
Related Documents
