Scribd
Upload
66 views93 pages

Chapter 2

HTML (Hypertext Markup Language) is used to write web documents and defines the structure and layout of a web page. It uses tags to describe different parts of a web page like headings, paragraphs, links etc. HTML is not a programming language but a markup language that tells web browsers how to structure and display content. Some key HTML elements include headings, paragraphs, line breaks, comments, and text formatting tags to make text bold, italic, subscript or superscript.

Uploaded by

Hussien Mekonnen
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
66 views93 pages

Chapter 2

HTML (Hypertext Markup Language) is used to write web documents and defines the structure and layout of a web page. It uses tags to describe different parts of a web page like headings, paragraphs, links etc. HTML is not a programming language but a markup language that tells web browsers how to structure and display content. Some key HTML elements include headings, paragraphs, line breaks, comments, and text formatting tags to make text bold, italic, subscript or superscript.

Uploaded by

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

Chapter 2

Web page Development using HTML


Hyper Text Markup Language (HTML)

Hyper Text Markup Language (HTML) is the language used to write Web documents.

o It is a language, but not in the sense of computer programming language such as

FORTRAN, C and visual basic


o It is called a "language" because, just like natural human languages, it contains all the

rules (grammar) and codes (words and phrases) necessary for the creation of a usable
document
o It uses standard ASCII characters and contains formatting codes, called commands or tags,

describe the structure of a document, provide font and graphics information and contain
hyperlinks to other web pages and internet resources.
HTML: A Structured Language

 HTML is a language for describing web pages.

 HTML is not a programming language, it is a markup language, which is used to design web

pages.
 A markup language is a set of markup tags

 The purpose of the tags is to describe page content

 A markup language such as HTML is simply a collection of codes (elements in this case) that

are used to indicate the structure and format of a document.


 The codes have meaning that is interpreted by a browser, which renders the document.

 HTML documents (web pages) contain HTML tags and plain text and HTML elements.


HTML Tags
HTML tags are keywords (tag names) 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.

The end tag is written like the start tag, with a forward slash before the tag name.

Start and end tags are also called opening tags and closing tags.

Eg. <tagname>content</tagname>

HTML Elements

"HTML tags" and "HTML elements" are often used to describe the same thing.

HTML element is everything between the start tag and the end tag, including the tags:

The markup tags tell the web browser how to display the page.

An HTML file can be created using a simple text editor

Eg <p>This is a paragraph.</p>


HTML Page Structure
Below is a visualization of an HTML page structure:
Write the following HTML code on notepad
<html>
<body>
<h1>This a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Finally save the above code as .html file extension and then
run the file on your browser.
Writing HTML Using Notepad or Text Edit

HTML can be edited by using a professional HTML editor like:


 Adobe Dreamweaver
 Microsoft Expression Web
 CoffeeCup HTML Editor
 Notpad++
However, for learning HTML we recommend a text editor like Notepad
(PC) or TextEdit (Mac). We believe using a simple text editor is a good
way to learn HTML.
But, Notepad++ is good for highlighting code and we will use it for our lab
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
Example
<h1>This is a heading one</h1>
<h2>This is a heading two</h2>
<h3>This is a heading three</h3>
HTML Paragraphs
HTML paragraphs are defined with the <p> </p> tag.
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Nested HTML Elements
Most HTML elements can be nested (can contain other
HTML elements).
HTML documents consist of nested HTML elements.
HTML Document Example
<!DOCTYPE html>
<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>
The example above contains 3 HTML elements.
HTML Example Explained
The <p> element:
<p>This is my first paragraph.</p>
The <p> element defines a paragraph in the HTML document.
The element has a start tag <p> and an end tag </p>.
The element content is: This is my first paragraph.
The <body> element:
<body>
<p>This is my first paragraph.</p>
</body>
The <body> element defines the body of the HTML document.
The element has a start tag <body> and an end tag </body>.
The element content is another HTML element (a p element).
The <html> element:
<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>
The <html> element defines the whole HTML document.
The element has a start tag <html> and an end tag </html>.
The element content is another HTML element (the body element).
Don't Forget the End Tag
Some HTML elements might display correctly even if you forget the end tag:
<p>This is a paragraph
<p>This is a paragraph
The example above works in most browsers, because the closing tag is considered
optional.
Never rely on this. Many HTML elements will produce unexpected results and/or errors
if you forget the end tag .
Empty HTML Elements

HTML elements with no content are called empty elements.

<br> is an empty element without a closing tag (the <br> tag defines a line break).

<hr> element is also an empty element which is used to create a horizontal line in the document

Tip: In XHTML, all elements must be closed. Adding a slash inside the start tag, like <br />, is

the proper way of closing empty elements in XHTML (and XML).


HTML Tip: Use Lowercase Tags

HTML tags are not case sensitive: <P> means the same as <p>. Many web sites use uppercase

HTML tags.
W3Schools use lowercase tags because the World Wide Web Consortium (W3C) recommends

lowercase in HTML 4, and demands lowercase tags in XHTML.


HTML Attributes
HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes come in name/value pairs like: name="value"
Attribute Example
HTML links are defined with the <a> tag. The link address is specified in the
href attribute:
<a href="http://www.w3schools.com">This is a link</a>
Always Quote Attribute Values
Attribute values should always be enclosed in quotes.
Double style quotes are the most common, but single style quotes are also
allowed.
Tip: In some rare situations, when the attribute value itself contains quotes, it
is necessary to use single quotes: name='John "ShotGun" Nelson’
Attributes ……..

<font> - element

face – attribute

color – attribute

Size - attribute

<p> - element,

align - attribute values: center, right and left

Attributes say something about elements.

Attributes have two parts
 Name – the property to be set eg. face, color
 Value – is the value of the property eg. Arial, 71ec90

<font face="arial" color="cc2400">


An element should never have two attributes of the same name!! it will ignore the
second one.
HTML Tip: Use Lowercase Attributes
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.
Newer versions of (X)HTML will demand lowercase
attributes.
HTML Lines
The <hr>tag creates a horizontal line in an HTML page.
The hr element can be used to separate content:
Example
<p>This is a paragraph</p>
<hr><p>This is a paragraph</p>
<hr><p>This is a paragraph</p>
HTML Comments
Comments can be inserted into the HTML code to make it
more readable and understandable. Comments are ignored by
the browser and are not displayed.
Comments are written like this:
<!-- This is a comment -->
HTML Output - Useful Tips
You cannot be sure how HTML will be displayed. Large or
small screens, and resized windows will create different
results.
With HTML, you cannot change the output by adding extra
spaces or extra lines in your HTML code.
The browser will remove extra spaces and extra lines when
the page is displayed. Any number of lines count as one line,
and any number of spaces count as one space.
Example for paragraphs
<html>
<body>
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
<p>
The number of lines in a paragraph depends on the size of your browser window.
If you resize the browser window, the number of lines in this paragraph will change.
</p>
</body>
</html>
Line Breaks
Use the <br> tag if you want a line break (a new line)
without starting a new paragraph:
The <br> element is an empty HTML element. It has no end
tag.
<p> This is <br> a para <br> graph with line breaks </p>
HTML Text Formatting
Making text to be:-
o bold
o Italic
o Subscript
o Superscript
<!DOCTYPE html>
<html>
<body>
 
 
</body>
</html>
Text Formatting Tags
Tag Description
<b> Defines bold text
<em> Defines emphasized text 
<i> Defines a part of text in an alternate voice or mood
<small> Defines smaller text
<big> to display larger text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<tt> Mono spaced teletype (constant width font )
<s> strikethrough (erasing, canceling, removing text)
Note: the above listed all tags have start tag and end tag
Formatting Example
<html>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
<p>The following word uses a <strong> strong </strong>
typeface</p>
<p>The following word uses a <i>italic</i> typeface</p>
<p>The following word uses a <em> Emphasized</em> typeface</p>
<p>The following word uses a <tt>monospaced</tt> typeface</p>
<p>The following word is <u> underlined</u> </p>
<p>The following word uses a <s>strikethrough</s>.</p>
<p>The following word has <big>larger</big> fonts.</p>
<p>The following word has <small>smaller</small> fonts.</p>
<p>Alemu got the 1<sup>st</sup> prize in Maths club.<p>
<p>Addition of (1001)<sub>2</sub> and (0001)<sub>2</sub> ?</p>
</body>
</html>
HTML "Computer Output" Tags

Tag Description
<code> Defines computer code text
<kbd> Defines keyboard text 
<samp> Defines sample computer code
<var> Defines a variable
<pre> Defines preformatted text

Code, sample, and keyboard elements typically render
in a constant-width (also called monospace)
font such as Courier by default.

Variables usually render in italics.
<html>
<body>
<p> Table 3.8 student grade report
<pre>
name idno result
Solomon 334 78
Girma 454 84
Buzunesh 343 90
</pre>
</p>
</body>
</html>
Abbreviation and Acronyms

Marking up shorthand terms as acronyms and abbreviations
provides useful information for search engines, screen readers,
and other devices.

Abbreviations, indicated by the abbr element, are shortened
versions of a word ending in a period (Conn. for Connection, for
example).
<acronym title="American Type Founders">ATF</acronym>

Acronyms, indicated by the acronym element, are abbreviations
formed by the first letters of the words in a phrase (such as WWW
or USA).
<abbr title="Points">pts.</abbr>
Both elements use the title attribute to provide the long version
of the shortened term.
Note: when you put the cursor on, it will display the
abbreviated word in full version.
Citation
 The cite element is used to identify a reference to
another document, such as a book, magazine, article
title, and so on.
Defining terms
 Used when defining instance of a word
<p><dfn>Script typefaces</dfn>
are based on handwriting.</p>
Inserted and deleted text
 The ins and del elements are used to mark up changes to the text and indicate
parts of a document that have been inserted or deleted
<p><The scientific director of KIOT is:
<del title="retired">Mr Yichalewal</del>
<ins>Dr Ahmedin</ins></p
HTML Links
Links are found in nearly all Web pages. Links allow users to click their way from page
to page.

These pages often include links to
 other Web sites or
 other pages in the same site.
 A link is specified using the anchor <a> element.

 Anything between the opening <a> tag and the closing </a> tag becomes part of the

link a user can click in a browser.


 To link to another document, the opening <a> tag must carry an attribute called href,

whose value is the page you are linking to.


A hyperlink (or link) is a word, group of words, or image that you can click on to
jump to another document.
When you move the cursor over a link in a Web page, the arrow will turn into a little
hand.
By default, links will appear as follows in all browsers:
 An unvisited link is underlined and blue
 A visited link is underlined and purple
 An active link is underlined and red
HTML Link Syntax
The HTML code for a link is simple. It looks like this:
<a href = "url"> Link text </a>
The href attribute specifies the destination of a link.
Clicking on the link text will re direct the page to the url
Example:
<body>
Go to the <a href=“page1.html">click to go page1</a>
</body>

The file index.html should be in the same folder
Linking to a website
 To link to a different site you need to write the URL between the
<a> and </a> tags - source anchor,
<body>
You can also <a href="http://www.google.com/">search Google
</a>?
</body>
 You can include title attribute to links – when the mouse is over

the link additional information could be delivered to the user.


<body>
<a href="http://www.Google.com/" title="Search the Web with
Google">Google</a>
is a very popular search engine.
</body>
Using image as a link
 put the img element in the anchor element:
<a href="http://www.google.com"> <img
src=“google.png" /></a>
 Most browsers display linked text as blue and

underlined, and linked images with a blue border.


 Visited links generally display in purple.

 One can change the color of links by using CSS and it

is recommended that you keep them consistent


throughout your site so as not to confuse your users.
Linking to E-mail Addresses

To create a link to an e-mail address you need to use the
following syntax with the <a> element:
<a href="mailto:[email protected]">[email protected]</a>
<a href=" mailto:[email protected] ">E-mail us</a>.

You can also specify some other parts of the message, too, such as the
 subject,
 body, and
 people that it should be cc’d or blind cc’d to.

<a href="mailto:[email protected]?subject=XHTML">
<a href="mailto:[email protected]?
subject=XHTML&[email protected]"></a>
Tables
 Are used
 displaying tabular data
 to format whole pages and create visually attractive layouts ( recently CSS is
becoming the standard for layout and tables are not recommended )
 We use <table> . . . </table>
 to create a table in XHTML use the <table> element.
 A row is contained inside a <tr> element— table row
 each cell is then written inside the row element using a <td> element for “table data”
and <th> for “table headers,”
<table border="1">
<tr>
<td>row 1, column 1 </td>
<td>row 1, column 2 </td>
</tr>
<tr>
<td>row 2, column 1 </td>
<td>row 2, column 2 </td>
</tr>
Table Headers
 The text marked up as headers (th elements) are displayed differently from the
other cells in the table (td elements).
 Bold and
 Centric
 Are important because they provide information or context about the cells in the
row or column
In the code fragment below how many columns and rows are there?
<table>
<table border="1">
<tr>
<td>Sufjan Stevens</td>
<td>Illinoise</td>
<td>Asthmatic Kitty Records</td>
</tr>
<tr>
<td>The Shins</td>
<td>Oh Inverted World</td>
<td>Sub-pop Records</td>
</tr>
</table>
Spanning Cells
 is the stretching of a cell to cover several rows or columns
 You make a header or data cell span by adding the colspan or rowspan
attributes
 Column spans, created with the colspan attribute in the td or th element,
stretch a cell to the right to span over the subsequent columns
 Example :

<table border="1">
<tr>
<th colspan="2">Fat</th>
</tr>
<tr>
<td> Saturated Fat (g) </td>
<td> Unsaturated Fat (g) </td>
</tr>
</table>
Exercise
Write HTML code to construct the following table
Row spans
 Row spans, created with the rowspan attribute
 cause the cell to span downward over several rows.
 Example:
<table>
<tr>
<th rowspan="3">Serving Size</th>
<td>Small (8oz.)</td>
</tr>
<tr>
<td>Medium (16oz.)</td>
</tr>
<tr>
<td>Large (24oz.)</td>
</tr>
</table>
Exercise
write the markup for the table shown
The align attribute
 alignment of the table within the containing body-text
flow
 accepts a value of either left, right, or center,

<table align="right" , border="1">

The bgcolor and background attributes


 To make the background of a table a different color
than the document's background You may also set
individual row and cell colors by providing the bgcolor
attribute
<table align="center" , bgcolor ="lightblue" , border="1">
<tr bgcolor="blue">
Cell Padding and Spacing
 By default, cells are sized just large enough to fit their contents
 Cell padding is the amount of space held between the contents of the cell
and the cell border.
 if you don’t specify any cell padding, the cells will have the default value
of one pixel of padding.
 Example:
<table border="1" cellpadding="15">
<tr>
<td>CELL 1</td>
<td>CELL 2</td>
</tr>
<tr>
<td>CELL 3</td>
<td>CELL 4</td>
</tr>
</table>
width and height attributes
 the width attribute is either
 an integer number of pixels
<table width=400>
 a relative percentage of the screen width
<table width="50%">
 height attribute to suggest a recommended height for the
table
The align and valign attributes in <tr> tag
 The align attribute for the <table> tag may be deprecated in
the HTML and XHTML but not in <tr> tags
 align attributes could be left, right, center, and justify
 the valign attribute in the <tr> tag with a value of top,
bottom, center, middle, or baseline (Internet Explorer only),
Normally, browsers render cell contents centered
vertically
Animated Text
 The <marquee> Tag
Function: Creates a scrolling text marquee
Attributes: align, behavior, bgcolor, class, controls,
direction, height, hspace, loop, scrollamount,
scrolldelay, style, vspace, width
End tag: </marquee>; never omitted
Contains: plain_text
Used in: body_content
The behavior, direction, and loop attributes
 The behavior attribute accepts three values:
 scroll (default)
 Slide
 Alternate
If you do not specify a marquee behavior, the default behavior is scroll.
 The direction attribute sets the direction for marquee text
scrolling.
 The loop attribute determines how many times the marquee
text scrolls.
 The bgcolor attribute lets you change the background color
of the marquee area.
The scrollamount and scrolldelay attributes
 The scrollamount attribute value is the number of pixels
needed to move text each successive movement during the
scrolling process.
 Lower values mean smoother but slower scrolling;
 higher numbers create faster, jerkier text motion.
 The scrolldelay attribute lets you set the number of
milliseconds to wait between successive movements during
the scrolling process.
 The smaller this value, the faster the scrolling.
<marquee scrollamount=1 scrolldelay=1>
HTML Lists
An Unordered List: An Ordered List:
Item 1. First item
Item 2. Second item
Item 3. Third item
Item 4. Fourth item

Unordered HTML List


An unordered list starts with the <ul> tag. Each list item starts with
the <li> tag.
The list items will be marked with bullets (small black circles) by default:
Example
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Unordered HTML List - Choose List Item Marker
Disc Square
<ul style="list-style- <ul style="list-style-
type:square">
type:disc">
  <li>Coffee</li>
  <li>Coffee</li>   <li>Tea</li>
  <li>Tea</li>   <li>Milk</li>
  <li>Milk</li> </ul>
</ul> None
Circle <ul style="list-style-
<ul style="list-style- type:none">
  <li>Coffee</li>
type:circle">
  <li>Tea</li>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Tea</li> </ul>
  <li>Milk</li>
</ul>
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts
with the <li> tag.
The list items will be marked with numbers by default:
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Ordered HTML List - The Type Attribute
Numbers:
<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Uppercase Letters:
<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Lowercase Letters:
<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Ordered HTML List - The Type Attribute
Uppercase Roman Numbers:
<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Lowercase Roman Numbers:
<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
HTML Description Lists
HTML also supports description lists.
A description list is a list of terms, with a description of each
term.
The <dl> tag defines the description list, the <dt> tag defines
the term (name), and the <dd> tag describes each term: 
Example
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>
Nested HTML Lists
List can be nested (lists inside lists):
Example
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>
Horizontal Lists
HTML lists can be styled in many different ways with CSS.
One popular way is to style a list horizontally, to create a menu:
Example
<!DOCTYPE html>
<html>
li a:hover {
<head>     background-color: #111111;
<style> }
ul { </style>
    list-style-type: none; </head>
    margin: 0; <body>
    padding: 0;
    overflow: hidden;
    background-color: #333333; <ul>
}   <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
li {   <li><a href="#contact">Contact</a></li>
    float: left;   <li><a href="#about">About</a></li>
} </ul>
li a {
    display: block; </body>
    color: white; </html>
    text-align: center;
    padding: 16px;
    text-decoration: none;
}
Forms
 There are two parts to a working form.
 The first part is the form , which are made up of
buttons, text fields, and pull-down menus
 Forms are added to web pages using the form

element.
 The other component of a web form is an application or
script on the server that processes the information
collected by the form and returns an appropriate
response.(CGI, PHP, ASP etc )
The HTML <form> element defines a form that is used to
collect user input:
In HTML form contains form elements.
Form elements are different types of input elements, like text
fields, checkboxes, radio buttons, submit buttons, and more.
The <input> Element
The <input> element is the most important form element.
The <input> element can be displayed in several ways,
depending on the type attribute.
Text Input type
<input type="text"> defines a one-line input field for text
input:
Example
<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form>
Radio Button Input type
<input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of
choices:
Example
<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>
The Name Attribute
Each input field must have a name attribute to be submitted.
If the name attribute is omitted, the data of that input field
will not be sent at all.
This example will only submit the "Last name" input field:
Example
<form action="/action_page.php">
  First name:<br>
  <input type="text" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>
HTML Form Elements
The <select> Element
The <select> element defines a drop-down list:
Example
<select name = "cars" >
<option value = "Volvo"> Volvo </option>
<option value = "Toyota"> Toyota </option>
<option value = "Lorry"> Lorry </option>
<option value = "Cobra"> Cobra </option>
</select>
The <option> elements define an option that can be selected.
By default, the first item in the drop-down list is selected.
To define a pre-selected option, add the selected attribute to the
option:
 <option value = "Cobra” selected> Cobra </option>
The <textarea> Element
The <textarea> element defines a multi-line input field (a
text area):
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
The <button> Element
The <button> element defines a clickable button:
<button type="button" onclick="alert('Hello
World!')">Click Me!</button>
Labels
 is used to associate descriptive text with its respective form field. This
provides important context for users with speech-based browsers.
 Each label element is associated with exactly one form control.
 There are two ways to use it.
1) implicit association, nests the control and its description within a label
element:

<label>Male: <input type="radio" name="gender" value="M" /></label>

<label>Female: <input type="radio" name="gender" value="F" /></label>
2) explicit association, matches the label with the control's id reference,
The for attribute tells which control the label is for.
 useful when the control is not directly next to its descriptive text in the
source
 and when we use CSS to align them
<label for="form-login-username">Login account:</label>
<input type="text" name="login" id="form-login-username" />
<label for="form-login-password">Password:</label>
<input type="password" name="password" id="form-login-password"/>
Fieldset and legend
 Fieldset element is used to indicate a logical group of form controls.
 A Fieldset may also include a legend element that provides a caption
for the enclosed fields.
<fieldset>
<legend>Customer Information</legend>
<ol>
<li><label>Full name: <input type="text" name="name" /></label></li>
<li><label>Email: <input type="text" name="email" /></label></li>
<li><label>State: <input type="text" name="state" /></label></li>
</ol>
</fieldset>
<fieldset>
<legend>Mailing List Sign-up</legend>
<ul>
<li><label>Add me to your mailing list <input type="radio"
name="list" value="yes" checked="checked" /></label></li>
<li><label>No thanks <input type="radio" name="list" value="no" />
Single-line text field
 used for entering a single word or line of text
syntax : <input type="text" />

Example:
<li><label for="form-city">City:</label>
<input type="text" name="city" value="Your Hometown" size="25" maxlength="50"
id="form-city" /></li>
The value attribute specifies default text that appears in the field when the form is
loaded. When you reset a form, it returns to this value.
Size
 By default, browsers display a text-entry box that is 20 characters wide, but

you can change the number of characters using the size attribute. eg. size="25"
maxlength
 By default, users can type an unlimited number of characters in a text field

regardless of its size.


 You can set a maximum character limit using the maxlength attribute. Eg

maxlength="50”
Multiline text entry field
 Syntax: <textarea>...</textarea>
 Example:
<li><label for="form-entry">Official contest entry:</label> <br/><textarea
name="contest_entry" rows="5" cols="100" id="form-entry">Tell us
why you love the band in 50 words or less. Five winners will get backstage
passes!</textarea></li>
rows
 Specifies the number of lines of text the area should

display. Scrollbars will be provided if the user types


more text than fits in the allotted space.
cols
 Specifies the width of the text area measured in number

of characters
Input Type Password
<input type="password"> defines a password field:
<form>
  User name:<br>
  <input type="text" name="username"><br>
  User password:<br>
  <input type="password" name="psw">
</form>
Input Type Submit and reset
<input type="submit"> defines a button
for submitting form data 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:
Input Type Reset
<input type="reset"> defines a reset button that will reset
all form values to their default values:
 <form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
  <input type="reset">
</form>
Input Type Checkbox
<input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited
number of choices.
Example
 <form>
  <input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle2" value="Car"> I have a car 
</form>

Input Type Color


 The <input type="color"> is used for input fields that should contain a color.
 Depending on browser support, a color picker can show up in the input field.
 Example

<form>
  Select your favorite color:
  <input type="color" name="favcolor">
</form>
Input Type Date
The <input type="date"> is used for input fields that should
contain a date.
<form>
  Birthday:
  <input type="date" name="bday">
</form>
You can also add restrictions to dates:
Example
<form>
  Enter a date before 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  Enter a date after 2000-01-01:
  <input type="date" name="bday" min="2000-01-02"><br>
</form>
Input Type Datetime-local
The <input type="datetime-local"> specifies a date and
time input field, with no time zone.
<form>
  Birthday (date and time):
  <input type="datetime-local" name="bdaytime">
</form>
Input Type Email
The <input type="email"> is used for input fields that
should contain an e-mail address.
<form>
  E-mail:
  <input type="email" name="email">
</form>
Input Type Month
The <input type="month"> allows the user to select a month and year.
<form>
  Birthday (month and year):
  <input type="month" name="bdaymonth">
</form>
Input Type Number
The <input type="number"> defines a numeric input field.
You can also set restrictions on what numbers are accepted.
The following example displays a numeric input field, where you can
enter a value from 1 to 5:
<form>
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5">
</form>
Input Type Range
The <input type="range"> defines a control for entering a number whose exact
value is not important (like a slider control). Default range is 0 to 100. However,
you can set restrictions on what numbers are accepted with the min, max, and step
attributes:
<form>
  Quantity:
  <input type="number" name="points" min="0" max="100" step="10" valu
e="30">
</form>
Input Type Search
The <input type="search"> is used for search fields (a search field behaves like
a regular text field).
Example
<form>
  Search Google:
  <input type="search" name="google search">
</form>
Input Type Tel
The <input type="tel"> is used for input fields that should contain a telephone number.
<form>
  Telephone:
  <input type="tel" name="usrtel">
</form>
Input Type Time
The <input type="time"> allows the user to select a time (no time zone).
<form>
  Select a time:
  <input type="time" name="usr_time">
</form>
Input Type Url
The <input type="url"> is used for input fields that should contain a URL address.
<form>
  Add your homepage:
  <input type="url" name="homepage">
</form>
Input Type Week
The <input type="week"> allows the user to select a week
and year.
Depending on browser support, a date picker can show up in
the input field.
Example
<form>
  Select a week:
  <input type="week" name="week_year">
</form>
HTML Input Attributes
The value Attribute
The value attribute specifies the initial value for an input
field:
 <form action="">
First name:<br>
<input type="text" name="firstname" value="John">
</form>
The readonly Attribute
The readonly attribute specifies that the input field is read
only (cannot be changed):
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" readonly>
</form>
The disabled Attribute
The disabled attribute specifies that the input field is disabled.
A disabled input field is unusable and un-clickable, and its
value will not be sent when submitting the form:
 <form action="">
First name:<br>
<input type="text" name="firstname" value="John" disabled>
</form>
The size Attribute
The size attribute specifies the size (in characters) for the input
field:
 <form action="">
First name:<br>
<input type="text" name="firstname" value="John" size="40">
</form>
The maxlength Attribute
 The maxlength attribute specifies the maximum allowed length for the input
field:
 Example
<form action="">
First name:<br>
<input type="text" name="firstname" maxlength="10">
</form>
In maxlength attribute, the input field will not accept more than the
allowed number of characters.
The maxlength attribute does not provide any feedback. If you want to
alert the user, you must write JavaScript code.
The height and width Attributes
The height and width attributes specify the height and width of an
<input type="image"> element.
 <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
The list Attribute
The list attribute refers to a <datalist> element that contains
pre-defined options for an <input> element.
An <input> element with pre-defined values in a <datalist>:
<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
The min and max Attributes
The min and max attributes specify the minimum and
maximum values for an <input> element.
The min and max attributes work with the following input
types: number, range, date, datetime-local, month, time and
week.
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:


<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):


<input type="number" name="quantity" min="1" max="5">
The multiple Attribute
The multiple attribute specifies that the user is allowed to enter more than
one value in the <input> element.
The multiple attribute works with input types: email, and file.
Select images: <input type="file" name="img" multiple>
The pattern Attribute
The pattern attribute specifies a regular expression that the <input>
element's value is checked against.
The pattern attribute works with the following input types: text, search,
url, tel, email, and password.
Tip: Use the global title attribute to describe the pattern to help the user.
Example
An input field that can contain only three letters (no numbers or special
characters):
Country code: <input type="text" name="country_code" pattern="[A-Za-z]
{3}" title="Three letter country code">
The placeholder Attribute
The placeholder attribute specifies a hint that describes the expected value of an
input field (a sample value or a short description of the format).
The hint is displayed in the input field before the user enters a value.
The placeholder attribute works with the following input types: text, search, url,
tel, email, and password.
Example
An input field with a placeholder text:
<input type="text" name="fname" placeholder="First name">

The required Attribute


The required attribute specifies that an input field must be filled out before
submitting the form.
The required attribute works with the following input types: text, search, url, tel,
email, password, date pickers, number, checkbox, radio, and file.
Example
A required input field:
Username: <input type="text" name="usrname" required>
The Submit and Reset Button
<input type="submit"> defines a button for submitting the form data 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
<form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value=“Abebe"><br>
  Last name:<br>
  <input type="text" name="lastname" value=“Alemu"><br><br>
  <input type="submit" value="Submit">
<input type="reset" value="Start over" />
</form>
 The action attribute
 provides the location (URL) of the application or script that will be used to process the
form.
<form action="/cgi-bin/mailinglist.pl" method="post">...</form>
The Action Attribute
The action attribute defines the action to be performed when
the form is submitted.
Normally, the form data is sent to a web page on the server
when the user clicks on the submit button.
In the example above, the form data is sent to a page on the
server called "/action_page.php". This page contains a
server-side script that handles the form data:
<form action="/action_page.php">
If the action attribute is omitted, the action is set to the
current page.
The Method Attribute
The method attribute specifies the HTTP method (GET or POST) to be used
when submitting the form data:
<form action="/action_page.php" method="get“> or:
<form action="/action_page.php" method="post">

When to Use GET?


The default method when submitting form data is GET.
However, when GET is used, the submitted form data will be visible in the page
address field:
/action_page.php?firstname=Mickey&lastname=Mouse
Note: GET must NOT be used when sending sensitive information! GET is best
suited for short, non-sensitive, amounts of data, because it has size limitations too.
When to Use POST?
Always use POST if the form data contains sensitive or personal information.
The POST method does not display the submitted form data in the page address
field.
POST has no size limitations, and can be used to send large amounts of data.
Menus
 Menus tend to be more compact than groups of buttons and checkboxes.
 Pull-down
 scrolling menu

Menu control
<select>...</select>
An option within a menu
<option>...</option>
A logical grouping of options within a menu
<optgroup>...</optgroup>
Pull-down menus
 only one item may be selected.
 select element displays as a pull-down menu by default when
 no size is specified or
 if the size attribute is set to 1

Example:
<label for="form-fave">What is your favorite 80s band?<label><br />
<select name="EightiesFave" id="form-fave">
<option>The Cure</option>
<option>Cocteau Twins</option>
<option>Tears for Fears</option>
<option>Thompson Twins</option>
<option value="EBTG">Everything But the Girl</option>
</select>

 Use the value attribute to provide an overriding value.


Scrolling menu
 specify the number of lines you’d like to be visible using the size attribute.
 The multiple attribute allows users to make more than one selection from the
scrolling list.
<label for="EightiesBands">What 80s bands did you listen to?</label>
<select name="EightiesBands" size="6" multiple="multiple"
for="EightiesBands">
<option>The Cure</option>
<option>Cocteau Twins</option>
<option selected="selected">Tears for Fears</option>
<option selected="selected">Thompson Twins</option>
<option value="EBTG">Everything But the Girl</option>
<option>Depeche Mode</option>
<option>The Smiths</option>
<option>New Order</option>
</select>
Grouping menu options
 You can use the optgroup element to create conceptual groups of options.
 Example :
<select name="icecream" multiple="multiple">
<optgroup label="traditional">
<option>vanilla</option>
<option>chocolate</option>
</optgroup>
<optgroup label="fancy">
<option>Super praline</option>
<option>Nut surprise</option>
<option>Candy corn</option>
</optgroup>
</select>
Frames
 Frames divide a browser window into several pieces or panes, each pane
containing a separate XHTML page.
 One of the key advantages that frames offer is that you can then load and
reload single panes without having to reload the entire contents of the
browser window.
 A collection of frames in the browser window is known as a frameset.
(Cont'd . . .) Frames
 To create a frameset document,
 first you need the <frameset> element, which is used instead
of the <body> element.
 The frameset defines the rows and columns your page is
divided into, including where each individual frame will go.
 Each frame is then represented by a <frame> element.
Example
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<title>Frames example</title>
</head>
<frameset rows="150, *, 100">
<frame src="top_frame.html" />
<frame src="main_frame.html" />
<frame src="bottom_frame.html" />
<noframes><body>
This site uses a technology called frames. Unfortunately, your
browser does not support this technology. Please upgrade
your browser and visit us again!
</body></noframes>
</frameset>
</html>
The <frameset> Element
 The <frameset> element replaces the <body> element in frameset
documents.
 the attributes of the <frameset> element
 cols specifies how many columns are in the frameset
 rows specifies how many rows are in the frameset
 <frame> element for each frame of the document
 <noframes> elements to indicate what should be displayed to
the user if their browser does not load frames.
Creating Links Between Frames
The most popular uses of frames is to place navigation bars in
one frame and then load the pages with the content into a
separate frame. This is particularly helpful in three situations:
 When your navigation bar is rather large in size (such as

thumbnails of photographs in a gallery).By using frames, the


user does not need to reload the navigation bar each time she
views a new page.
 When your main document is very long and the navigation bar

provides shortcuts to parts of the main document.


 When you do not want to reload the whole page.
Creating Links Between Frames
 In frame_link.html
<frameset cols="200, *"
<frame src="frames/linksNav.html" />
<frame src="frames/linksMain.html" name="main_page" />
</frameset>
 In linksNav.html
<body>
<h1> Navigation </h1>
<a href="http://www.wrox.com" target="main_page">Wrox Press</a><br />
<a href="http://www.google.com" target="main_page">Google</a><br />
<a href="http://www.microsoft.com" target="main_page">Microsoft</a><br />
<a href="http://news.bbc.co.uk/" target="main_page">BBC News</a><br />
</body>
 In linksMain.html
<body>
<h3> The links should display here </h3>
</body>
Default Target Frames
 Setting a Default Target Frames Using the <base> Element
 You can set a default target frame using the <base>
element in any page that contains links that should
open in another frame.
 The <base> element should carry an attribute called
target, whose value is the name for the frame you
want the content to be loaded into.
 So, you could add the following to linksNav.html to specify a
default frame target:
<head>
<base target="main_page" />
</head>

You might also like