WP - Chapter Two

Download as pdf or txt
Download as pdf or txt
You are on page 1of 91

Chapter Two

Web page Development using HTML

1
It is the language used to write Web documents.
like natural human languages, it contains all the rules (grammar)
and codes (words and phrases) necessary for the creation of a
usable document
It uses standard ASCII characters and contains formatting codes,
called commands or tags,
» It describe the structure of a document, provide font and graphics
information and contain hyperlinks to other web pages and internet
resources.
An HTML file must have an htm or HTML file extension.
It can be created using a simple text editor.

2
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 are 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 formatting
program, often a Web browser, which renders the document.
HTML documents (web pages) contain HTML tags, plain text and
HTML elements.
3
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 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.

4
Web Browsers
The purpose of a web browser (such as Google Chrome, Internet
Explorer, Firefox, Safari) 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:

5
HTML Page Structure
Below is a visualization of an HTML page structure
Write the following HTML code on notepad
<!DOCTYPE html>
<html>
<head><title>page title</title></head>
<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.

6
HTML Editor

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


✓ Adobe Dreamweaver
✓ Microsoft Expression Web
✓ CoffeeCup HTML Editor
✓ Notpad++
✓Visual studio code

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.

7
HTML Elements……….
HTML Headings
HTML headings are titles or subtitles that you want to display on a webpage.
It 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>
HTML Images
HTML images are defined with the <img> tag.
<img src="C:\Users\pc\Desktop\article02.jpg" width="104" height="142"> 8
Nested HTML Elements
Most HTML elements can be nested (can contain other HTML
elements).
HTML documents consist of nested HTML elements.
Example:
<!DOCTYPE html>
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
The example above contains 3 HTML elements.

9
HTML Example Explained

The <html> element:


The <html> element defines the whole HTML document.
The element has a start tag <html> and an end tag </html>.
Then, inside the <html> element there is a <body> element.
<body>
<p>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 ( p element).
10
Cont..

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.
A paragraph always starts on a new line, and browsers automatically add some
white space (a margin) before and after a paragraph.
❑ Some HTML elements will display correctly, even if you forget the end tag.
e.g
<p>This is a paragraph
❑ However, sometimes Unexpected results and errors may occur if you forget
the end tag. So, Don’t Skip the End Tag
11
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).
<p>This is a <br> paragraph with a line break.</p>
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 12
HTML Attributes

HTML elements can have attributes


Attributes provide additional information about HTML element
Attributes are always specified in the start tag
Attributes come in name/value pairs like: name="value"
Example:hrefAttribute
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’ 13
Attributes ……..

<font> - element
⚫ family – attribute

⚫ color – attribute

⚫ size - attribute

<p> - element,
✓ align - attribute
o center

o right
o left
⚫ 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.
14
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.
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>

15
HTML Headings
HTML headings are titles or subtitles that you want to display on
a webpage.
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least
important heading.
Example:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6> 16
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 -->

17
HTML Output - Useful Tips

You cannot be sure how HTML will be displayed. Large or


small screens, and resized windows will create different
results.
In 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

18
Cont.….
<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> 19
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>

20
HTML Text Formatting

HTML contains several elements for defining text with


a special meaning.
Making text to be:-
o bold
o Italic
o Subscript
o Superscript

21
Text Formatting Tags
Tag Description
<b> Defines bold text
<em> Defines emphasized text
<i> Defines italic text
<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 from documents
<mark> Defines text that should be marked or highlighted
<s> strikethrough (erasing, canceling, removing text)
Note: the above listed tags have start tag and end tag
22
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
<mark>mark</mark> 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>

23
Abbreviation and Acronyms Element

⚫ Marking up shorthand terms as acronyms or 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=“Mekdela Amba University”>MAU</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="Mekdela Amba University ">MAU</abbr>
Both elements use the title attribute to provide the long version of the
shortened term.

Note: when you put the cursor on it, it will display the abbreviated word in full
version.

24
Citation
⚫ The HTML <cite> tag defines the title of a creative work (e.g. a book, a poem,
a song, a movie, a painting).
⚫ <p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
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
<html>
<body>
<p>The scientific director of MAU university is: </p>
<del title="retired">Mr somebody</del>
<ins>Dr someone</ins>
</body></html> 25
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
26
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

27
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>
28
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.
⚫ We can change the color of links by using CSS and it is
recommended that you keep them consistent throughout your site

29
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:name@example.com">
name@example.com</a>
<a href=" mailto:name@example.com ">E-mail us</a>.

30
HTML Tables
Are used to display tabular data
 Tables are made up of cells, arranged into rows.
 <table></table> marks the start and end of table contents
 <tr></tr> marks the start and end of each table row
 <td></td> marks the start and the end of the contents of a data cell
 A table row can also be divided into table headings with the <th> tag.
 <caption></caption> formats text to appear as a table
 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> 31
Table Headers
❑ <TH> tag - Defines a table header cell.
❑ Browsers generally display the contents of the header cells in bold, and
centered.
❑ Same attributes as the <TD> tag.
In the code fragment below how many columns and rows are there?
<html>
<head><title>Image link</title>
<head>
<body>
<table border=“1”; style="width:50%;
background-color:lightblue;">
<caption> Students Result </caption>
<tr> <th> Name </th> <th> Marks </th> </tr>
<tr> <td> Ayele</td> <td> 86</td> </tr>
<tr> <td> Kebede</td> <td> 65</td> </tr>
</table></body></html> 32
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.
⚫ Row spans ,created with the rowspan in the td or th element
− Example :
<table border="1">
<tr>
<th colspan="2">Fat</th>
</tr>
<tr>
<td> Saturated Fat (g) </td>
<td> Unsaturated Fat (g) </td>
</tr>
</table>
33
Exercise

Write HTML code to construct the following table.

34
Row spans
⚫ Row spans, created with the rowspan attribute
− cause the cell to span downward over several rows.
Example:
<table border="2">
<tr>
<th rowspan="3">Serving Size</th>
<td>Small (8oz.)</td>
</tr>
<tr>
<td>Medium (16oz.)</td>
</tr>
<tr>
<td>Large (24oz.)</td>
</tr>
35
</table>
Exercise

write the markup for the table shown

36
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">

37
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> 38
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

39
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

40
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.

41
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>

42
HTML Lists
HTML lists allow web developers to group a set of related items in lists.
❑ There are a number of tags for building lists.
❑For purpose of improving the readability of the text.
❑ Depending on the way the list items are displayed, lists may be divided
into three types:
❑ Unordered list(ul)- This will list items using plain bullets (there is no
special order between items)
❑ Ordered list (ol)- This will use different schemes of numbers to list
your items.
Items occur in a particular order, such as step-by-step instructions or
driving directions
❑ Definition list(dl)- This arranges your items in the same way as they are
arranged in a dictionary 43

43
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.
▪ Used to display a set of related items that appear in no particular
order.
▪ 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> 44
Unordered HTML List - Choose List Item Marker

Disc Square
<ul style="list-style-type:square">
<ul style="list-style-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-type:none">
<li>Coffee</li>
<ul style="list-style-type:circle"> <li>Tea</li>
<li>Coffee</li> <li>Milk</li>
<li>Tea</li> </ul>
<li>Milk</li>
</ul>

45
Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts
with the <li> tag.
Numbered or ordered lists are used when the sequence of the
items is important.
The list items will be marked with numbers by default:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

46
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>
47
</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>
48
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>
49
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:
50
Horizontal List
Lists can be styled to be aligned horizontally by using simple CSS
One popular way is to style a list horizontally, to create a menu:
Example
<!DOCTYPE html>
<html><head>
<style>
ul#menu li { display:inline; }
</style></head>
<body>
<h2>Horizontal List</h2>
<ul id="menu">
<li>HTML|</li>
<li>CSS|</li>
<li>JavaScript|</li>
<li>PHP</li>
51
</ul>
</body>
</html> 51
HTML Forms
The HTML <form> element defines a form that is used to collect
user input.
A form basically contains boxes and buttons which is mainly 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.
For example, during user registration you would like to
collect information such as name, email address, credit card, etc.

52
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.

53
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>

54
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>

55
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=“Abebe"><br>
<br>
<input type="submit" value="Submit">
</form> 56
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>
57
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>

58
Labels
⚫ It is used to associate descriptive text with its respective form field.
⚫ 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.
⚫ <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"/>

59
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" />
60
Single-line text field attribute
❖ 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>
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
61
maxlength="50”
Multiline text entry field attributes
Syntax: <textarea>...</textarea>//used for entering multiple line
of words.
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

62
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:

63
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=“Aster"><br>
Last name:<br>
<input type="text" name="lastname" value=“Johne"><br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>

64
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>
65
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="bdays" min="2000-01-02"><br>
</form>

66
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>
67
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.
❑ You can set restrictions on what numbers are accepted with the min, max, and step
attributes:
<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form>

68
Input Type numbers…..
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" value="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>

69
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">
70
</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>

71
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>

72
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 (visible characters) for the input field:
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" size="40">
</form>

73
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 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">

74
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>:
<form action="">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist></form> 75
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">
76
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">

77
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>
78
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"><br>
Last name:<br>
<input type="text" name="lastname"><br><br>
<input type="submit" value="Submit">
<input type="reset" value=“Reset" />
</form>

79
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.

80
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.

81
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>

82
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>

83
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>
84
Grouping menu options
You can use the optgroup element to create conceptual groups of
options.
⚫ Example :

<select name="icecream" size=“8” 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>
85
Frames
⚫ It can display one or more than one html document in the
same browser windows.
⚫ Each HTML document is called FRAME and each frame is
independent of others
⚫ One of the key advantages that frames offer is that you can
load and reload single panes without having to reload the
entire contents of the browser window.
⚫ <frameset> tag is used to divide the browser windows
⚫ A collection of frames in the browser window is known as a
frameset.
⚫ <Body> tag is not required

87
Attributes of Frameset Element

⚫ The attributes of the <frameset> elements


✓ Rows
✓ Columns
✓ Frame Border
✓ Border color
✓ Name

88
Cont…
⚫ cols: it divides browser window Column wise.
<html><frameset cols=“30%,40%,30%”>
<frame src=“a.html>
<frame src=“b.html”>
<frame src=“c.html”></frameset>
</html>

⚫ Rows: specifies how many rows are in the frameset


<html><frameset rows=“30%,40%,*”>
<frame src=“a.html><frame src=“b.html”> Rest of the windows e.g 30%
<frame src=“c.html”></frameset></html>
⚫ <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.

89
Example

<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" />
</frameset>
<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></html> 90
Example: 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>

99
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 links Nav.html to specify a
default frame target:
<head>
<base target="main_page" />
</head>

102

You might also like