Lec2 Web Programming

Web Programming
CS333-CS644
Dr Walid M. Aly
Lecture 2
HTML
1
Web Programming CS333-CS644 lec2 Dr Walid M. Aly
HTML <map> Tag
The <map> tag is used to define a client-side image-map. An image-map is an image with
clickable areas.
<!DOCTYPE html>
<html>
<body>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap“ >
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
</body>
</html> Imagemapdemo.html
shape rect-circle-poly : Specifies the shape of an area (default: whole region)
coords coordinates Specifies the coordinates of an area

2
HTML <area> coords attribute
 The <area> tag defines an area inside an image-map (an image-map is an image
with clickable areas).
 The <area> element is always nested inside a <map> tag
3
HTML title Attribute
In HTML5, the title attribute can be used on any HTML
element to be displayed as a tooltip (it will validate on any
HTML element. However, it is not necessarily useful)
• Syntax
– <element title="text">
– text:A tooltip text for an element
<a href="http://www.aast.edu" title="AASTMT">click to visit AAST</a>

<p title="Free Web tutorials"“ >www.w3schools.com </p>
titleAttribDemo.HTML
4
Tables
• Tables are defined with the <table> tag.
• The summary attribute summarizes the table’s <table>
contents and is used by speech devices to make the <caption>…..</caption>
table more accessible to users with visual impairments <thead>
• Tables are given titles with the <caption> tag ……………………………
• A table can be split into three distinct sections: </thead>
– Head (thead element) <tfoot>
• Table titles ……………………………
• Column headers </tfoot>
– Body (tbody element) <tbody>
• Primary table data ……………………………
– Table Foot (tfoot element) ……………………………
• Calculation results </tbody>
• Footnotes
• Above body section in the code, but displays at </table>
the bottom in the page
5
HTML Tables
• A table is divided into rows (with the <tr> tag),
• The border legacy attribute sets the border for table, however setting border should be done using CSS
• Header information in a table are defined with the <th> tag.
• Each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data
cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.
<table border="1">
<caption>Monthly savings</caption>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Total</th>
<th>150 L.E.</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>L.E. 100</td>
</tr>
<tr>
<td>February</td>
<td>L.E. 50</td>
</tr>
</tbody>
</table> TablesDemo.html
6
Layout using Tables
• A single source file
• The code can be confusing, especially
when you are putting data tables
inside your formatting table
• Coding for tables like this can very
difficult, the code is not easily
maintainable
• Changing the structure of the site can
involve major rewrite of the code in
table
• You have to scroll the whole page to
move around ,
• no borders are used but you have to
be careful with padding cells which can
waste screen spaces
• a very clean look

rowspan and colspan attributes
• Table cells are sized to fit the data they contain
• You can create larger data cells by using these attributes:
– rowspan – set in the <th> or <td> tag to specify that the
cell must span some number of rows
– colspan – set in the <th> or <td> tag to specify that the
cell must span some number of columns
<tr>
<th colspan = "3"> Fruit Juice Drinks
</th>
</tr>
<tr>
<th> Orange </th>
<th> Apple </th>
<th> Screwdriver </th>
</tr>

HTML Forms
• A form is the usual way information is communicated from a
browser to a server.
• HTML has tags to create a collection of objects that implement
this information gathering
– These objects are called controls or widgets (e.g., radio buttons
and checkboxes)
• When the Submit button of a form is clicked, the form’s values
are sent to the server
FormDemo.html

Starting the Form
• The form element brackets all other elements included within
your form and specifies the method and action to be used
when submitting form data.
• The method attribute specifies the HTTP method used to
submit the form data. Two values are allowed: post and get.
the post method is normally used to send form responses.
• The action attribute specifies the agent used to process the
form data when it is submitted.
<form method="post" action="/cgi-bin/FormSend.jsp">
</form>
10
Creating Input Controls
Creating Text Boxes
text box provides a box of a specific size into which visitors type their information
<form method="post" action="/cgi-bin/FormSend.pl">
<p>First Name/Initial:
<input type="text" name="First_Name" size="25">
Last Name: <input type="text" name="Last_Name"
size="25">
</p>
</form>
The maxlength attribute can be used to limit the amount of text that
can be input in a text box.
the value attribute is used set a default value for a text box
Use type="password"
Web Programming CS333-CS644 creates a password
lec2 text box
Dr Walid M. Aly
11
Creating Radio Buttons
A radio button control is a circular button that is blank when unselected, but filled when
selected. You can select only one radio button in a list at a time.
<p>What is your age group?</p>
<p><input type="radio" name="Age" value="Under-13">Under 13 &nbsp &nbsp
<input type="radio" name="Age" value="13-19">13 to 19 &nbsp &nbsp
<input type="radio" name="Age“ value="Over-65">Over 65</p>
Initially Selecting a Radio Button
You can specify that a radio button should be selected initially by including a CHECKED
attribute in the INPUT element.
<input type="radio" name="Age_Group" value="20-34" checked>20 to 34;
Tip use &nbsp in you code to add a single space

12
Creating Check Boxes
Check boxes work in a fashion that is similar to radio buttons, except that they are
displayed as square boxes (instead of as round buttons) and visitors can select as many as
they want
<p>What is your field? (<i>Multiple items may be selected.</i>)</p>

<p>
<input type="checkbox" name="Field“ value="Fin" checked>Finance &nbsp &nbsp
<input type="checkbox" name="Field" value="Manu"> Manufacturing &nbsp &nbsp
<input type="checkbox" name="Field" value="Agri"> Agriculture &nbsp &nbsp
<input type="checkbox" name="Field" value="Other"> Other &nbsp &nbsp
</p>
13
Creating List Menus
• The select and option elements are used together to create a
list menu, with the select element indicating the content is a
list
<p>How did you find out about my site?</p>

<select name="Where">
<option selected>Google
<option>Yahoo
<option>Infoseek
<option>Friend
<option>Other
</select>
14
Other
Web Programming CS333-CS644can optionally be used withlec2
attributes the select element: size
Dr Walid M. Alyand multiple.
Creating Text Area Boxes
• The TEXTAREA element lets you create a text area box. A
text area box differs from a text box in that it lets visitors
enter several lines of text.
<p>Comments:</p>
<p><textarea name="Comments" rows="5" cols="50">
</textarea></p>
15
Hidden Inputs
 Forms can contain visual and nonvisual components.
 Nonvisual components, called hidden inputs, store any data

that you specify, such as e-mail addresses and HTML5
document file names that act as links. this data can be
changed by JavaScript
<input type="hidden" name="country" value=“USA" />
16
Submit and Reset Buttons
• Both are created with <input>
<input type = "reset" value = "Reset Form">
<input type = "submit” value = "Submit Form">
• Reset clears all controls to their initial states
• Submit has two actions:
1. Encode the data of the form
2. Request that the server execute the server-resident
program specified as the value of the action attribute
of <form>
• A Submit button is required in every form.

<fieldset> <legend>
The <fieldset> tag is used to group related elements in a form and draws a box around the
related elements.
The <legend> tag defines a caption for the <fieldset> element.
<form>
<fieldset>
<legend>Personal Information:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>
fieldsetDemo.html
18
Adding General Buttons
input type="button"
Defines a clickable button (mostly used with a JavaScript to activate a script)
<input type="button" value="Click me" onclick="msg()" />
19
HTML5 new Input elements
 HTML5 has several new input types for forms.

These new features allow better input control and
validation.
 Not all major browsers support all the new input
types. However, you can already start using them;
If they are not supported, they will behave as
regular text fields.

Validation
• The new HTML 5 input types are self validating on the client side, eliminating
the need to add complicated JavaScript code to your web pages to validate user
input, reducing the amount of invalid data submitted and consequently
reducing Internet traffic between the server and the client to correct invalid
input.
• When a user enters data into a form then submits the form the browser
immediately checks the self-validating elements to ensure that the data is
correct
Copyright © Pearson, Inc. 2013. All Rights

Web Programming CS333-CS644 lec2
Reserved. Dr Walid M. Aly
New form controls
• Several new input types for forms
– allow for better input control and validation
• Input Type :email
-- used for input fields that should contain an e-mail address
– The value of the email field is automatically validated when the form
is submitted
– <input type="email" name="user_email" />
• Input Type : url
used for input fields that should contain a URL address
– The value of the url field is automatically validated when the form is
submitted
– <input type="url" name="user_url" />
HTML5FormDemo.html
22
Input Type :number
The number type is used for input fields that should contain a numeric value.
You can also set restrictions on what numbers are accepted:
Points: <input type="number" name="points" min="1" max="10" />
Input Type : range
The range type is used for input fields that should contain a value from a range of numbers.
The range type is displayed as a slider bar.
You can also set restrictions on what numbers are accepted:
<input type="range" name="points" min="1" max="10" />
HTML5FormDemo.html
HTML5 is not yet an official standard, and no browser has full HTML5 support
23
Input Type: date
<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>
<input type="submit" value="Send">
</form>
InputDateDemo.html
24
input Type color
• The color input type enables the user to enter a color.
• At the time of this writing, old browsers render the color input type as
a text field in which the user can enter a hexadecamal code or a color
name.
• In Browsers implementing this input ,when you click a color input,
browsers display a color picker similar to the Microsoft Windows color
dialog shown.
HTML5FormDemo.html
autofocus Attribute
The autofocus attribute—an optional attribute that can be used in only one input
element on a form—automatically gives the focus to the input element, allowing the
user to begin typing in that element immediately.
<label>Color:
<input type = "color" autofocus />
(Hexadecimal code such as #ADD8E6)
</label>

<input type="email" /> <input type="url" /> <input type="number" /> <input type="tel" />
26
placeholder Attribute
The placeholder attribute specifies a short hint that describes the expected value of an input
field (e.g. a sample value or a short description of the expected format).
The hint is displayed in the input field when it is empty, and disappears when the field gets
focus.
Note: The placeholder attribute works with the following input types: text, search, url, tel,
email, and password.
<Label>First Name<input type="text" name="fname" placeholder="First name" /><Label />
required Attribute
The required attribute forces the user to enter a value before submitting the form.
You can add required to any of the input types.
<label>Email:
<input type = "email" placeholder = [email protected] required />
</label>
27
Note on Validation
• If you want to disable client side validation for a
form in HTML5 add a novalidate attribute to the
form element.
• Ex:
<form method="post" action="/foo" novalidate>...</form>
• To add a custom message to validation use the title attribute
<input required title="First Name is Required!" />
customMessage.html
28
HTML5 <datalist> Tag
 The <datalist> tag specifies a list of pre-defined options for an <input> element.
 The <datalist> tag is used to provide an "autocomplete" feature on <input> elements.
 Users will see a drop-down list of pre-defined options as they input data.
 Use the <input> element's list attribute to bind it together with a <datalist> element.
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="text" id="browser" list="browsers"

placeholder="select your browser"/> dataliastDemo.html
30
HTML5 <video>
• Until HTML5, there has never been a standard for showing a video or movie
on a web page.
• Today, most videos are shown through a plugin (like flash). However, different
browsers may have different plugins.
• HTML5 defines a new element which specifies a standard way to include
video: the <video> element.
• Currently, there are 3 supported video formats for the video element: Ogg,
MPEG4 and WebM
<video width="320" height="240" controls="controls">

<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
HTML5MultimediaDemo.html
The control attribute adds video controls, like play, pause, and volume.
The <video> element allows multiple <source> elements. <source> elements can link to
different video files. The browser will use the first recognized format.
31
HTML5 <audio>
• Most audio are played through a plugin (flash)
– However, not all browsers have the same plugins
• HTML5 specifies a standard way to include audio, with the
audio element
• Ogg ,mp3 , wav are the only supported audio formats.
• The audio element can play sound files, or an audio stream
<audio controls="controls">
<source src="music1.ogg" type="audio/ogg" />
<source src="music1.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
HTML5MultimediaDemo.html
32
HTML5 <meter> Tag
• The <meter> tag defines a scalar measurement within a known range, or a
fractional value. This is also known as a gauge.
• Examples: Disk usage, the relevance of a query result, etc.
<meter value="2" min="0" max="10"></meter><br />

<meter value="0.6"></meter>
HTML5 <progress> Tag

<progress value="22" max="100"></progress>
ttribute Value Description

maxNe number Specifies how much work the
w task requires in total
valueNe number Specifies how much of the
w task has been completed
33
summary Element and details Element
• The summary element displays a right-pointing
arrow next to a summary or caption when the
document is rendered in a browser When
clicked, the arrow points downward and reveals
the content in the details element.
<details>
<summary>AAST.</summary>
<p> …………….</p>
</details>
SummaryDemo.html

Text-Level Semantics: mark Element and
wbr Element
• The mark element highlights the text that’s
enclosed in the element.
• The wbr element indicates the appropriate
place to break a word when the text wraps to
multiple lines.
<p>Do not forget to buy <mark>milk</mark> today.</p>
>p<
To learn AJAX, you must be familiar with the XML>wbr<Http>wbr<Request Object
>p/<

Page-Structure Elements
• HTML5 introduces several new page-structure elements that
meaningfully identify areas of the page as headers, footers, articles,
navigation areas, asides, figures and more
• The header element creates a header for this page that contains both
text and graphics.
• The footer element describes a footer—content that usually appears
at the bottom of the content or section element.
• The section element describes a section of a document, usually with
a heading for each section—these elements can be nested
• The nav element groups navigation links.
SectionElements.html
36
• The figure element describes a figure (such as an image,
chart or table) in the document so that it could be moved to
the side of the page or to another page.
• The figcaption element provides a caption for the image in
the figure element.
• The article element describes standalone content that
could potentially be used or distributed elsewhere, such as a
news article, forum post or blog entry.
• The aside element describes content that’s related to the
surrounding content (such as an article) but is somewhat
separate from the flow of the text. For example, an aside
in a news story might include some background history.

Absolute Path and Relative Path
• Web pages consist of web links. The links can send users either to
external sites or to pages on the same site which is internal links.
Internal links can be created by using either absolute path or relative
path.
• Relative path is a path relative to the current page's path location.
Current page is the page that contains the URL link.
<img src=“images/pic1.jpeg”>
• Absolute path is a path that starts with domain URL. Absolute path can
be a full path or take the form of a short version. The short version
always starts with a forward slash, which is the part of a full URL
without the domain name part.
– Ex: Absolute path (full):

<img src=“http://www.mywebsite.com/files/images/pic1.jpeg”>
– Ex: Absolute path (short version): <img src=“/files/images/pic1.jpeg”>
38
Recommendation
• When you link to a page on your own website,
always use the short version of an absolute path
or use relative path. This speeds up page load
time because you have told web server that the
linked page is located on the same site.
• Another advantage of avoiding the use of full
version of absolute path is that if you ever need
to change domain name for your site, the links
are not going to break. This is because you didn't
hard code your old domain name into the links
with full version of absolute path.
• When you link to a page on another website, you
can only use full absolute path. That is a full URL.
39
Absolute Path and Relative Path Examples
The following table shows you examples of the various paths. We assume current page is
index.html and it is in directory july location is:
The location of directory is: http://www.site.com/products/sales/july
Absolute Path (short

Type Level Absolute Path (full version) Relative Path
version)
Directory Current http://www.site.com/products/sales/july/ /products/sales/july/
File Current http://www.site.com/products/sales/july/index.html /products/sales/july/index.html

Directory 1 Level Up http://www.site.com/products/sales/ /products/sales/ /..
File 1 Level Up http://www.site.com/products/sales/summary.html /products/sales/summary.html ../summary.html
/products/sales/services/index.h
File 1 Level Up http://www.site.com/products/sales/services/index.html ../services/index.html
tml
Directory 2 Level Up http://www.site.com/products/ /products/ /../..
File 2 Level Up http://www.site.com/products/demo.html /products/demo.html ../../demo.html
File 2 Level Up http://www.site.com/products/category/index.html /products/category/index.html ../../category/index.html
1 Level
Directory
Down
http://www.site.com/products/sales/july/images/ /products/sales/july/images/ images/
1 Level /products/sales/july/images/pro
File http://www.site.com/products/sales/july/images/product1.jpg images/product1.jpg
Down duct1.jpg
40
Resources
Android Apps
41

Lec2 Web Programming

Uploaded by

Copyright:

Available Formats

Lec2 Web Programming

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lec2 Web Programming

Uploaded by

Copyright:

Available Formats

Web Programming

shape rect-circle-poly : Specifies the shape of an area (default: whole region)

coords coordinates Specifies the coordinates of an area

<a href="http://www.aast.edu" title="AASTMT">click to visit AAST</a>

Web Programming CS333-CS644 lec2 Dr Walid M. Aly

Web Programming CS333-CS644 lec2 Dr Walid M. Aly

Web Programming CS333-CS644 lec2 Dr Walid M. Aly

<form method="post" action="/cgi-bin/FormSend.jsp">

Tip use &nbsp in you code to add a single space

<p>What is your field? (<i>Multiple items may be selected.</i>)</p>

<p>How did you find out about my site?</p>

 Nonvisual components, called hidden inputs, store any data

<input type="hidden" name="country" value=“USA" />

Web Programming CS333-CS644 lec2 Dr Walid M. Aly

Defines a clickable button (mostly used with a JavaScript to activate a script)

<input type="button" value="Click me" onclick="msg()" />

 HTML5 has several new input types for forms.

Web Programming CS333-CS644 lec2 Dr Walid M. Aly

Copyright © Pearson, Inc. 2013. All Rights

Points: <input type="number" name="points" min="1" max="10" />

Input Type : range

<input type="range" name="points" min="1" max="10" />

Web Programming CS333-CS644 lec2 Dr Walid M. Aly

<Label>First Name<input type="text" name="fname" placeholder="First name" /><Label />

<input required title="First Name is Required!" />

<input type="text" id="browser" list="browsers"

<video width="320" height="240" controls="controls">

<meter value="2" min="0" max="10"></meter><br />

HTML5 <progress> Tag

ttribute Value Description

Web Programming CS333-CS644 lec2 Dr Walid M. Aly

Web Programming CS333-CS644 lec2 Dr Walid M. Aly

Web Programming CS333-CS644 lec2 Dr Walid M. Aly

– Ex: Absolute path (full):

– Ex: Absolute path (short version): <img src=“/files/images/pic1.jpeg”>

Absolute Path (short

File Current http://www.site.com/products/sales/july/index.html /products/sales/july/index.html

File 1 Level Up http://www.site.com/products/sales/summary.html /products/sales/summary.html ../summary.html

File 2 Level Up http://www.site.com/products/category/index.html /products/category/index.html ../../category/index.html

You might also like