Scribd
Upload
12 views26 pages

Chapter 2 HTML

HTML, or Hypertext Markup Language, is a markup language used to create and structure web pages, consisting of various tags that define elements like text, images, and links. It is essential for web development and includes a set of rules for formatting content, such as using start and end tags, attributes, and document structure. The document also covers HTML elements, attributes, and the importance of using lowercase tags as recommended by the World Wide Web Consortium (W3C).

Uploaded by

gebreegziabherguanche55
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
12 views26 pages

Chapter 2 HTML

HTML, or Hypertext Markup Language, is a markup language used to create and structure web pages, consisting of various tags that define elements like text, images, and links. It is essential for web development and includes a set of rules for formatting content, such as using start and end tags, attributes, and document structure. The document also covers HTML elements, attributes, and the importance of using lowercase tags as recommended by the World Wide Web Consortium (W3C).

Uploaded by

gebreegziabherguanche55
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 26

Chapter Two

HTML/Hypertext Markup Language/


What is HTML?
 HTML is a language for describing Web pages.
 HTML stands for Hypertext Markup Language.
 HTML is the core technology in which all Web pages are written.
 When you create a Web site, you use HTML to put the text, pictures, animations, and
perhaps video and sound onto the individual Web pages that make up the site.
 HTML is not a programming language, it is a markup language.
 HTML is used for creating web pages and other information that can be displayed in a web
browser.
 A markup language is a collection of markup tags.
 HTML uses markup tags to describe Web pages.
 HTML Documents contain HTML Tags and plain texts.
 Originally, HTML was developed with the objective
 To facilitate the sharing of scientific information between researchers.
HTML Tags and Documents
 Essentially, a Web page is a text file that contains instructions in the form of HTML codes
(called tags) and attributes.
 The tags are the commands the Web browser later follows to format the text and insert the
graphics images you want on the Web page.
 Some, but not all, HTML commands require both a start and an end tag
 Each HTML command (that is, each HTML tag) starts with a less-than sign (<) followed
by the tag’s name and any attributes, and ends with a greater-than sign (>).
 To create an end tag for a start tag, you insert a forward slash (/) in front of the tag’s
name.
 Thus, a start tag has the form <tagname[attributes]> and an end tag has the form
</tagname>.
 HTML tags are keywords surrounded by angle brackets
 Like <html>,<br/>,<head> </head>,....
 The First tag in a pair is the start tag;The second tag is the end tag.

1
Fundamentals Of Internet Programing
HTML document uses following tags:
Tag Description
<!DOCTYPE...> This tag defines the document type and HTML version.
<html> This tag encloses the complete HTML document and mainly comprises of
document header which is represented by <head>...</head> and document
body which is represented by <body>...</body> tags.
<head> This tag represents the document's header which can keep other HTML tags
like <title>, <link> etc.
<title> The <title> tag is used inside the <head> tag to mention the document title.
<body> This tag represents the document's body which keeps other HTML tags like
<h1>, <div>, <p> etc.
<h1> This tag represents the heading.
<p> This tag represents a paragraph.

To learn HTML, you will need to study various tags and understand how they behave while
formatting a textual document. Learning HTML is simple as users have to learn the usage of
different tags in order to format the text or images to make a beautiful webpage.

World Wide Web Consortium (W3C) recommends to use lowercase tags starting from HTML 4.

HTML Documents
 HTML documents describe web pages
 They contain HTML Tags and plain texts
HTML Document Structure

A typical HTML document will have following structure:

Document declaration tag


<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body></html>
We will study all the header, body tags and other html tags in this chapter. One of the tags used
in html is document declaration tag
2
Fundamentals Of Internet Programing
The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration tag is used by the web browser to understand the version of the HTML used in the
document. Current version of HTML is 5 and it makes use of the following declaration:

<!DOCTYPE html>

 The <!DOCTYPE> declaration helps the browser to display a web page correctly.

Summery Basic Tags:-


 The DOCTYPE declaration defines the document type
 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 Versions
Since the early days of the web, there have been many versions of HTML:

Version Year

HTML 1991

HTML+ 1993

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

XHTML 2001

HTML5 2001

HTML Fundamentals
 HTML Headings
 HTML Paragraphs
 HTML Links
 HTML Images
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
➢The lower the number, the larger the heading size.
3
Fundamentals Of Internet Programing
➢Example:
<! DOCTYPE html>
</ html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is Heading 1</h1>
<h2>Heading 2 is Smaller</h2>
<h3>Heading 3 is Smaller Still</h3>
</body>
</html>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag. Most browsers automatically put a line break
and space after a </p> tag. Example:
<! DOCTYPE html>
</ html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
HTML Hyperlinks (Links)
 HTML links are defined with the
<a> tag and used to create a
hyperlink.
 A hyperlink (or link) is a word, group of words, or image that you can click on to jump to
another document.
 The URL address is an attribute of the link element.
 The href attribute specifies the destination of a link.
Link Syntax
<a href="url">Link text</a>
<html><body>

4
Fundamentals Of Internet Programing
<a href="http://www.uog.edu.et"> This is a link to
University of Gondar.
</a>
</body></html> This is a link to University of Gondar
HTML Images

 HTML images are defined with the <img> tag.


 Syntax for defining an image: <img src="url" alt="some_text">
 <img> tag has an attribute called src that will store the location of the image to be loaded
on the webpage .
 The “alt” attribute specify alternative text that is to be rendered when the element to which
it is applied cannot be rendered.
 The URL points to the location where the image is stored.
 It tells the browser:
 Source of the image file.
 Size of the image.
 Alternate text to display in case the image is not available.
<html><body>
<img src="EtMam.jpg" width="104" height="142" alt=”This is The mother of
ethiopia” />
</body></html>
Line Break Tag
 The <br /> element is used when opening and closing of tags is not needed and to start from
the next line. There should be a space between the character br and the forward slash
because older browsers will have trouble rendering the line break.
<!DOCTYPE html>
<html>
OUT PUT
<head>
Hello
<title>Line Break Example</title> You delivered your assignment ontime.
</head> Thanks
<body>
<p>Hello<br />
You delivered your assignment ontime.<br /> Thanks</p>
</body
</html>

5
Fundamentals Of Internet Programing
HTML Elements
 HTML Elements
 HTML Element Syntax
 Nested Elements
 Don't forget the End Tag
 Empty HTML Elements
 Use Lowercase Tags
HTML Elements and Syntax
 HTML documents are defined by HTML elements.
 An HTML element is everything between the start tag(opening tag) and the end
tag(closing tag).
 "HTML tags" and "HTML elements" are often used to describe the same thing.
 But strictly speaking, an HTML element is everything/contents between the start
tag and the end tag, including the tags.

 HTML elements follow a certain format regardless of how the element is used.
 Some HTML elements have empty content.
 Most HTML elements can have attributes.
Nested Elements
 Most HTML elements can be nested (contain or be contained within other HTML
elements).
 HTML documents consist of nested HTML elements.
The following example contains three HTML elements. Notice that the <p> element is nested in
the <body> element, which in turn is nested in the <html> element
<html>
<body>
<p><i> This is my first paragraph</i> </p>
<p><u> This is my second paragraph</u> </p>
</body></html>
Don't Forget the End Tag
 Most browsers will display HTML correctly even if you forget the end tag.
 <p>This is a paragraph
6
Fundamentals Of Internet Programing
 <p>This is another paragraph
 The previous example will work in most browsers, but don’t rely on it.
 Forgetting the end tag can produce unexpected results or errors.
Empty HTML Elements
 HTML elements without content are called empty elements.
 Empty elements can be closed within the start tag.
 <br> is an empty element without a closing tag. It defines a line break.
 All elements must be closed. Adding a slash to the end of start tag, like <br/>,<hr/> is
the proper way of closing empty elements.
Use Lowercase Tags
 HTML tags are not case sensitive: <P> means the same as <p>.
 Note that you can write HTML tags as all uppercase, all lowercase, or a combination of
the two, because Web browsers are currently case-insensitive. As such, write all your
HTML tags and attributes in lowercase.
HTML Attributes
They provide additional information about HTML elements.
 Attributes are always specified in the start tag
 Attributes come in name/value pairs like: name="value"
 The title Attribute
 When you move the mouse over the element, the title will be displayed as a tooltip.
 The href Attribute

An attribute is used to define the characteristics of an HTML element and is placed inside the
element's opening tag. All attributes are made up of two parts: a name and a value:

 The name is the property you want to set. For example, the paragraph <p> element in
the example carries an attribute whose name is align, which you can use to indicate the
alignment of paragraph on the page.
 The value is what you want the value of the property to be set and always put within
quotations. The below example shows three possible values of align attribute: left,
center and right.

Attribute names and attribute values are case-insensitive. However, the World Wide Web
Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4
recommendation.

<!DOCTYPE html>
<html><body>
7
Fundamentals Of Internet Programing
<title>Align Attribute Example</title> This will display following result:
</head><body>
<p align="left">This is left aligned</p> This is left aligned
<p align="center">This is center aligned</p>
<p align="right">This is right aligned</p> This is center aligned
</body></html> This is right aligned
Generic Attributes

Here's a table of some other attributes that are readily usable with many of the HTML tags.

Attribute Options Function


Align right, left, center Horizontally aligns tags
Valign top, middle, bottom Vertically aligns tags within an HTML element.
bgcolor numeric, hexidecimal, RGB values Places a background color behind an element
background URL Places a background image behind an element
Id User Defined Names an element for use with Cascading Style Sheets.
Class User Defined Classifies an element for use with Cascading Style Sheets.
width Numeric Value Specifies the width of tables, images, or table cells.
height Numeric Value Specifies the height of tables, images, or table cells.
Title User Defined "Pop-up" title of the elements.
The Poem Problem
The browser will remove extra spaces and extra lines when the page is displayed.
 Any number of spaces, and any number of new lines, count as only one space.
 Example:
<p>This poem will display as one line:</p>
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>
The Poem Problem's Solution
 The HTML <pre> Element
 Sometimes you want your text to follow the exact format of how it is written in the HTML
document. In those cases, you can use the preformatted tag <pre>.
 The text inside a <pre> element is displayed in a fixedwidth font.
 It preserves both spaces and line breaks.
8
Fundamentals Of Internet Programing
 Any text between the opening <pre> tag and the closing </pre> tag will preserve the
formatting of the source document.
Example:
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
HTML Text Formatting Elements
Formatting elements were designed to display special types of text:
 Bold text-Uses the <b> and <strong> Tags
 Italic text-Uses the <i> and <em> tags
 <b> and <i> defines bold and italic text
 Deleted text-<del> defines deleted (removed) of text.
 Underlined text-Uses <u> and <ins> Tags
 Subscripts-<sub> element defines subscripted text
 Superscripts-<sup> Element defines Superscripted text.
 Mark- < mark> element displayed as marked as with yellow ink.
Quotation Elements
 <q>-element defines a short quotation.
 <p>WWF's goal is to: <q>Build a future where people live in harmony with
nature.</q></p>

<bloc
kquote>-element defines for Long Quotations.
 <p>WWF's goal is to: <blockquote>Build a future where people live in harmony with
nature.</blockquote></p>

9
Fundamentals Of Internet Programing
HTML Comments
 Comment tags <!-- and --> are used to insert comments in HTML.
 There is an exclamation point (!) in the opening tag, but not in the closing
tag.
 Comments are not displayed by the browser, but they can help document
your HTML.
 With comments you can place notifications and reminders in your HTML.
 They are used by the users for Readability and Understandability of the
document.
HTML Editors
 HTML files can be created with text editors:
‒ NotePad or
 HTML editors (WYSIWYG/What-You-See-Is-What-You-Get/ Editors):
‒ Microsoft FrontPage
‒ Macromedia Dreamweaver
‒ Edit plus
‒ Netscape Composer
‒ Microsoft Word
‒ Visual Studio
 However, for the purpose of learning HTML it is recommended to use a
text editor like Notepad.
HTML Styles
 Every HTML element has a default style (background color is white and text color is
black).
 Changing the default style of an HTML element with the style attribute.
 The HTML Style Attribute
 The HTML style attribute has the following syntax:
➢style="property:value"
➢They are CSS property and CSS value.

10
Fundamentals Of Internet Programing
 The color property defines the text color to be used for an HTML element:
 <h1 style="color:blue">This is a heading</h1>
<!DOCTYPE html>
<html>
<body style="background-color:yellow">
<h2 style="color:red">G2 Information Technology</h2>
<h2 style="color:blue">They Study FIP</h2>
</body></html>

The font-family property defines the font to be used for an HTML element.
 <h1 style="font-family:verdana">This is a heading</h1>
 <p style="font-family:courier">This is a paragraph.</p>
 The <font> tag, supported in older versions of HTML, is not valid in HTML5.
➢The font-size property defines the text size to be used for an HTML element:
 <h1 style="font-size:300%">This is a heading</h1>
 <p style="font-size:160%">This is a paragraph.</p>
➢The text-align property defines the horizontal text alignment for an HTML element: center,
right and left
<h1 style="text-align:center">Centered Heading</h1>
<p>This is a paragraph.</p>
The HTML <meta> Element
 Metadata is data (information) about data.
 The <meta> tag provides metadata about the HTML document.
 Metadata will not be displayed on the page, but will be machine parsable.
 Meta elements are typically used to specify page description, keywords,
and author of the document, last modified, and other metadata.
 The metadata can be used by browsers (how to display content or reload
page), search engines (keywords), or other web services.
 <meta> tags always go inside the <head> element.
<meta> Tags are use to:
 Define keywords for search engines:

11
Fundamentals Of Internet Programing
<meta name="keywords" content="faculty, college, department,
campus, Gondar">
 Define a description of your web page:
<meta name="description" content="Government owned
university">
 Define the author of a page:
<meta name="author" content="UOG">
 Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content=" faculty, college, department, campus, Gondar " />
<meta name="description" content=" Government owned university." />
<meta name="revised" content="Student Assessment, 3/7/2019" />
<meta http-equiv="refresh" content="5" />
<meta ame="author" content=" UOG " />
</head><body>
<p>Hello HTML5!</p>
</body></html>
Creating HTML Tables
➢Tables are defined using the <table> tag.
 A table is divided into rows with the <tr> tag.
 Each row is divided into data cells using the <td> tag.
 A table row can also be divided into table headings with the <th> tag
 <tr>-Stands for table row
 <td>-Stands for table data
 Table data <td> are the data containers of the table.
 They can contain all sorts of HTML elements like text, images, lists, other tables, etc.
HTML Table Example
<table border=”1” width=”100%”>
<tr> <td>Haben</td>
<td>Fkre</td>
<td>50</td>
</tr> <tr>
<td>yohan</td>
<td>natnael</td>
12
Fundamentals Of Internet Programing
<td>94</td>
</tr></table>

An HTML Table with Cell Padding and cell spacing


 There are two kinds of space that can be added in and around table cells: CellPadding
and cellspacing, using the CellPadding and cellspacing attributes, respectively.
 The CellPadding Attribute: This attribute specifies the distance in pixel between the cell
content and the edge of the cell.
 If you do not specify a value for the CellPadding attributes, the default value which is 1
pixel is assumed by the browser.
 Cell padding specifies the space between the cell content and its borders.
 The cellspacing Attribute: This attribute specifies the distance between the cells in pixels.
 Cellspacing tells the Web browser the amount of blank space to leave between cells
and between the border around a table and its cells.
 If a value is not specified for the cellspacing attribute, the default value (usually around
2 pixels) is assumed by the browser.
HTML Table Cell Padding and cell spacing Example
<table width="35%"border="1" cellspacing="15" CellPadding="5">
<tr>
<td>Haben</td>
<td>Fkre</td>
<td>50</td>
</tr>
<tr>
<td>yohan</td>
<td>natnael</td>
<td>94</td>
</tr></table>

Table headings are defined with the <th> tag.


HTML Table headings Example
<table border=1 width=”100%”padding=”15px”>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
13
Fundamentals Of Internet Programing
</tr>
<tr>
<td>yohan</td>
<td>natnael</td>
<td>94</td> </tr></table>
Table Cells that Span Many Columns
➢To make a cell span more than one column, use the colspan attribute.
HTML Table Span Many Columns Example
<table width=”100%” border=”1”>
<caption>Cell that spans two Columns</caption>
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Awet abebe</td>
<td>+251 34 77 854</td>
<td>+251 95 77 855</td>
</tr>
</table>
Table Cells that Span Many Rows
 To make a cell span more than one row, use the rows pan attribute: Example:-
<table width=”100%” border=”1”>
<caption>Cell that spans two rows</caption>
<tr>
<th>Name</th>
<td>Awet abebe</td>
</tr> <tr>
<th
rowspan="2">Telephone</th >
<td>+251 34 77 854</td>
</tr> <tr>
<td>+251 95 77 855</td>

14
Fundamentals Of Internet Programing
</tr></table>
Table caption
The caption tag will serve as a title or explanation for the table and it shows up at the top of
the table. In addition to the caption, tables can be divided into three portions: a header, a
body, and footer. The three elements for separating the head, body, and foot of a table are:
 <thead> -to create a separate table header.
 <tbody> - to indicate the main body of the table.
 <tfoot> - to create a separate table footer.
A table may contain several <tbody> elements to indicate different pages or groups of data.
But it is notable that <thead> and <tfoot> tags should appear before <tbody>
Example :-
<!DOCTYPE html>
<html><body>
<table border="1" width= "100%" >
<caption>This is the caption</caption>
<thead><tr>
<td colspan= "4" >This is the head of the table</td>
</tr></thead>
<tfoot><tr>
<td colspan="4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody><tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr></tbody>
</table></body></html>

HTML Lists
 HTML can have unordered lists, ordered lists, or Description lists.
Unordered lists
 An unordered list starts with the <ul> tag.
 Each list item starts with the <li> tag.
15
Fundamentals Of Internet Programing
 The list items will be marked with bullets (small black circles).
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
 A style attribute can be added to an unordered list, to define the style of the marker.
E.g <ul type=”Circle”>

Ordered Lists
➢An ordered list starts with the <ol> tag.
➢Each list item starts with the <li> tag.
➢The list items will be marked with numbers.
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li></ol>
➢A type attribute can be added to an
ordered list, to define the type of the marker
 type="1" -Numbered with numbers (default)
 type="A" -Numbered with uppercase letters
 type="a" -Numbered with lowercase letters
 type="I" -Numbered with uppercase roman numbers
 type="i" - Numbered with lowercase roman numbers

HTML Description Lists


➢<dl> element to define a description list
➢<dt> element to define the description term
➢<dd> element to define the description data

16
Fundamentals Of Internet Programing
➢Example:
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd></dl>
Forms in HTML
 HTML forms are used to collect user input.
 HTML forms are required to collect some data from the site visitor.
 For example, during user registration to collect information such as name, email address,
credit card, and so on.
 The <form> element defines an HTML form.
The HTML <form> tag is used to create an HTML form and it has the following syntax:
<form action=”Script URL” method=”GET/POST” >
Form elements like input, text area, and so on.
</form>
The most frequently used form attributes are:
 action – backend script ready to process passed data.
 method- is used to upload data (GET and POST methods)
 target- specifies the target windows or frame where the result of the script will be
displayed.
 enctype- specifies how the browser encodes the data before it sends it to the
server.
➢Form Elements:
 HTML forms contain form elements.
 Form elements are different types of input elements, checkboxes, radio buttons,
submit buttons, and more.
➢The <input> Element:
 The <input> element is the most important form element.
 It has many variations, depending on the type attribute.
 Text -Defines normal text input
 Radio - defines a radio button input.
 Submit -Defines a submit button (for submitting the form)
 Button -Defines Buttons
 Password-Defines Passwords

17
Fundamentals Of Internet Programing
 Checkbox-Defines Check boxes for selecting many options
 File – Defines a file
Text Input Controls
There are three types of text input used on forms:
 Single line text input controls – used to insert only one line user input like search
box or name. it is created by <input> tag
 <input type="text"> defines a one-line input field for text input.
 Password input controls- a single line text input which is masked the character as soon as a
user enters it. It is created using HTML <input> tag.
 <input type="password"> defines a one-line input field for text input.
 Multi-line text input controls- used to give details that may be longer than a single
sentence. It is created by using HTML <textarea> tag.
 Used for multi-line text input
 The size of the input area is specified with the cols and rows attributes
 Any text placed inside the element appears in the input area (this can be deleted).
Example: the following program contains single line text, password and multi-line text input
controls.
<!DOCTYPE html>
<form><p> <b>Single line text input controls</b><p>
First name: <input type="text" name="first_name" /><br />
Last name: <input type="text" name="last_name" /><br />
<p> <b>Password input controls</b></p>
User ID:<input type="text" name="user_id" /><br />
Password: <input type="password" name="password" />
<p><b>Multiple-Line Text Input Controls</b></p>
Description:<br />
<textarea rows="5" cols="50" name="description">
Enter description here ... </textarea></form>
The produced result will be:

18
Fundamentals Of Internet Programing
HTML Forms/Form attributes
Some of the attributes of the <input> tag are:
 The type attribute specifies the type of user input
 The name attribute gives an identifier to the input data
 Used to give a name to the control which is sent to the server to be recognized and get the
value.
 The size attribute specifies the length of the input field
 The value attribute specifies an initial value for the text (optional)
 maxlength-allow to specify the maximum number of characters a user can enter into
the text box
 row-indicates the number of rows of text area box
 cols-indicates the number of columns of text area box
 The method attribute specifies the way that form data is sent to the server program, It has
two values GET and POST
 GET appends the data to the URL, If Data is not Sensitive
 POST sends the data separately, If Data needs Security
 The action attribute specifies a server program (e.g. a PHP program .php extension) that
processes the form data.
<body>
<form method="POST" action="comments.php">
<h2>Tell us what you think</h2>
Name <input name="name" type="text" size="20"><br
Address <input name="address" type="text" size="30"></form></body>
Selection Control
If multiple options are available to be selected by the user, depending on the selection
requirement checkboxes, radio buttons and dropdown boxes can be used.
 Checkboxes are used when more than one option is required to be selected. It is created
using HTML <input> tag and the type attribute is set to checkbox.
 Radio buttons are used when out of many options; just one option is required to be
selected. It is created by using HTML <input> tag and type attribute is set to radio.
 A select box, also called drop down box which provides option to list down various
options in the form of drop down list, from where a user can select one or more options.
 The list will normally show the first item as selected.
 The <select> element defines a drop-down list.
 Some of the attributes of selection control are:
19
Fundamentals Of Internet Programing
 Type-indicates the type of input control. For checkbox the type set to checkbox
and for radio buttons the type set to radio
 Name- used to give to the control which is sent to the server to be recognized and get
the value
 Value-the value that will be used if the checkbox is selected
 Checked- set to checked if you want to select it by default
 Example: the HTML code below shows the three selection controls
<form> <p>Radio Button Control</p>
<input type="radio" name="sex" value="male" checked>Male <br>
<input type="radio" name="sex" value="female">Female
<p>Checkbox Control<p>
<input type="checkbox" name="chemistry" value= "chem" checked>Chemistry
<input type="checkbox" name="Biology" value="bio" checked>Biology
<input type="checkbox" name="Physics" value="phys">Physics<br />
<p>Select Box Control</p>
<select name="dropdown">
<option value="chem" >Chemistry</option>
<option value="bio" selected > Biology</option>
<option value="phys" >Physics</option>
</select></form>
The produced result will be:

The <optgroup> Tag


 Menus of choices in forms can be quite large, making them difficult to display and use.
 In these cases, it is helpful to group related choices, which can then be presented as a set of
nested, cascading menus to the user.
 The <optgroup> tag can be used to group related items into logical groupings.
 You can use the <optgroup> tag only within a <select> tag, and it may contain only
<option> tags.
Example:-

20
Fundamentals Of Internet Programing
<form>
<select name="Field of Study" The produced result will be:
multiple="multiple" size="7">
<optgroup label=SocialScience>
<option>History
<option>Geography
<option>Civics
</optgroup>
<optgroup label=NaturalScience>
<option>Biology
<option>Physics
<option>Chemistry
</optgroup> </select></form>
HTML Forms/Creating Buttons
 Buttons are most commonly used to submit a form, to clear or reset a form and even to
trigger client-side scripts.
 <input type="submit"> defines a button for submitting a form to a form-handler.
 The form-handler is typically a server page with a script for processing input data.
 The form-handler is specified in the form's action attribute.
 Example: the HTML code to show the type of buttons
<form action="action_page.php">
First name:<br><input type="text" name="firstname"><br>
Last name:<br><input type="text" name="lastname"><br/>
<input type="radio" name="sex" value="male" checked>Male <br>
<input type="radio" name="sex" value="female">Female <br/>
<input type="submit" value="Submit" /> <input type="reset" value= "Reset" />
<input type="button" Value="Calculate" onclick= "calculate()" /></form>
The produced result will be:

 Some of the attributes of button control are:


 submit This creates a button that automatically submits a form.
 reset This creates a button that automatically resets form controls to their initial
values.

21
Fundamentals Of Internet Programing
 button This creates a button that is used to trigger a client-side script when the user
clicks that button.
 image This creates a clickable button but we can use an image as background of the
button.
HTML Forms/Form attributes
 The readonly attribute specifies that the input field is read only (cannot be changed).
 The readonly attribute does not need a value.
 The disabled attribute specifies that the input field is disabled.
 A disabled element is un-usable and un-clickable.
 Disabled elements will not be submitted.
 The disabled attribute does not need a value.
File Upload Box
If you want to allow a user to upload a file to your web site, you will need to use a file upload
box, also known as a file select box. This is also created using the <input> element but type
attribute is set to file.

Example: a file uploads box HTML source code

<!DOCTYPE html>

<form action=”Login.php” The produced result will be:


method=”POST”>

<input type=”file” name=”userFile”><br>

<input type=”submit” name=”upload_btn"


value=”upload”>

</form>
Fieldsets and Legends

 Sometimes, it is advantageous to visually group (related form fields) certain controls on


your form.
 The <fieldset> tag is used as a container for form elements and results in a thin border
being displayed around the elements it surrounds.
 <fieldset> doesn't have any required or unique attributes.

22
Fundamentals Of Internet Programing
 The <legend> tag

 Use the <legend> tag to create a label for a fieldset in a form.


 The tag may appear only inside a <fieldset>.

<form><fieldset style="width:25%">

<legend>Personal Information</legend><br> The produced result will be:

<label>First Name:<input type="text"


name="fname" size="20"></label> <br>

<label>Last Name:<input type="text"


name="lname" size="20"></label>
<br></fieldset></form>

HTML frames implementations, pros and cons


Frames and Framesets
 A frameset is partitions of your web browser window so that multiple web documents can be
displayed simultaneously.
 HTML frames are used to divide your browser window into multiple sections where each
section can load a separate HTML document.
 The frameset element replaces the body element
 A collection of frames in the browser window is known as a frameset.
 Frameset has attributes cols or rows, defined in terms of pixels, percentage (%) or unspecified
(*) this splits the window into two or more columns or rows.
Note: framesets can cause problems for bookmarking and for "screen readers" (for visually-
impaired users)
Example:
<html>
<head><title>Frames 1</title></head>
<frameset cols="140,*">
<frame name="navFram" src="navigation.html" />
<frame name="mainFram" src="intro.html" />
</frameset>
</html>

Frame Attributes
23
Fundamentals Of Internet Programing
Some important attributes of <frameset> tag are:
 cols-specify how many columns are contained in the frameset and the size of each column.
 rows-specify the rows in the frameset the same as the cols attribute.
 border- specifies the width of the border of each frame in pixels.
 frameborder-specifies whether a three-dimensional border should be displayed between
frames.
 framespacing-specifies the amount of space between frames in a frameset.
And the <frame> tag has the following attributes
 src-used to give the file name that should be loaded in the frame. Its value can be any URL.
 name-to give a name to a frame. It is used to indicate which frame a document should be
loaded into.
 marginwidth- specify the width of the space between the left and right of the frames borders
and the frames content.
 marginheight-specify the height of the space between the top and bottom of the frames
borders and its content.
 noresize-by default frames can be resized by clicking and dragging on the borders of a
frame. This attribute prevents a user to resize a frame.
 scrolling -controls the appearance of the scrollbars that appear on the frame. This takes values
either "yes", "no" or "auto". For example scrolling="no" means it should not have scroll bars.
 longdesc-provides a link to another page containing a long description of the contents of the
frame.
Creating Frames
To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag
defines how to divide the window into frames. The rows attribute of <frameset> tag defines
horizontal frames and cols attribute defines vertical frames. Each frame is indicated by <frame>
tag and it defines which HTML document shall open into the frame.
Example: HTML code for creating frames
<!DOCTYPE html>
<html><head>
<title>HTML Frames</title>
</head>
<frameset rows="10%,80%,10%">
<frame name="top" src="/html/top_frame.htm" />
<frame name="main" src="/html/main_frame.htm" />
<frame name="bottom" src="/html/bottom_frame.htm" />
<noframes>
<body>
Your browser does not support frames.
24
Fundamentals Of Internet Programing
</body>
</noframes></frameset></html>
The will produce following result:

From the above example change the rows attribute of the <frameset> tag by cols and change the
width to 25%, 50%, 25% to create all the three frames vertically as shown the result below.
The will produce following result:

Disadvantages of Frames
 There are few drawbacks with using frames, so it's never recommended to use frames in your
webpages:
 Some smaller devices cannot cope with frames often because their screen is not big enough
to be divided up.
 Sometimes your page will be displayed differently on different computers due to different
screen resolution.
 The browser's back button might not work as the user hopes.
 There are still few browsers that do not support frame technology.

25
Fundamentals Of Internet Programing
Browser Support for Frames
If a user is using any old browser or any browser which does not support frames then <noframes>
element should be displayed to the user.so you must place a <body> element inside the
<noframes> element because the <frameset> element is supposed to replace the <body> element,
but if a browser does not understand <frameset> element then it should understand what is inside
the <body> element which is contained in a <noframes> element.

You can put some nice message for your user having old browsers. For example Sorry!! your
browser does not support frames. As shown in the above example.

Example: the HTML code for the target frame and <noframe> tag

<!DOCTYPE html>
<html>
<head>
<title> HTML Target Frames Example </title>
</head>
<frameset cols="200,*">
<frame src="menu.html" name="menu_page" />
<frame src="main.html" name="main_page" />
<noframes><body>
<center><h2>Your browser does not support frames</h2></center>
</body></noframes>
</frameset></html>

26
Fundamentals Of Internet Programing

You might also like