Web app development_html_02

hasen@microcis.net June 30, 2013Hassen poreya
Trainer, Cresco Solution
Afghanistan Workforce
Development Program
HTML

Document Type
 The <!DOCTYPE> declaration helps the browser
to display a web page correctly.
 A browser can display an HTML page 100%
correctly if it knows the HTML type and version
used.

Document Type
 HTML 4.01
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
 XHMTL 1.0
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
 HTML 5
 <!DOCTYPE html>

Headings and Paragraphs
 Headings are defined with the <h1> to <h6>
tags.
 <h1> defines the most important heading. <h6>
defines the least important heading.
 Don't use headings to make text BIG or bold.
 Paragraphs are defined with the <p> tag.
 <p>This is a paragraph</p>
<p>This is another paragraph</p>

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

HTML Image
 In HTML, images are defined with the <img>
tag.
 Src attribute is used to reference/address an
image.
 Src stands for "source".
 The value of the src attribute is the URL of the
image you want to display.
 <img src="url" alt="some_text">

HTML Table
 Tables are defined with the <table> tag.
 A table is divided into rows (with the <tr> tag),
and 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.

HTML Table
<table border="1">
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
</tr>
</table>

Some Table Attributes
 Colspan=“2”
 Rowspan=“3”
 Cellpadding=“5”
 Cellspacing=“5”
 Border=“1”
 Bordercolor=“red”
 Width=“50%”
 Height=“50%”
 Align=“center”
 Style=“…”

HTML Form
 A form is used to take the data from a user and
push the data normally into a database.
 It is also used to print out the data taken out of a
database and show them to the user.
 An html form may contains (text fields, text areas,
dropdown boxes, radio buttons, checkboxes,
buttons)
 Each of the above elements takes the data from a
user in different ways.

HTML Form
 It starts with the <form> tag and ends with the
</form> tag.
 The general syntax is as bellow:
<form>
<input>
<input>
...
</form>

From Attributes
 name=“”
 Defines the form name.
 This may be used sometimes to call the form for some
validations and/or other operations.
 action=“”
 Defines, where the content of the form should go.
 Method=“”
 Defines the method to pass the form content.
 POST
 GET

Text field
 Used when you want the user to type letters,
numbers, etc.
<form>
First name:<input type="text” name="fname">
Last name: <input type="text” name="lname">
</form>
First name:
Last name:

Password
 Used to input a password field.
 Doesn’t show the characters.
<form>
Password:<input type=“password” name=“pass">
</form>
Password: ******

Radio Buttons
 Used when you want the user to select one of a
limited number of choices.
<form>
<input type="radio" name="male" >
Male
<input type="radio" name="female">
Female
</form>
Male Female

Checkboxes
 Used when you want the user to select one or
more options of a limited number of choices
<form>
Persian :<input type="checkbox"
name="Language" value="persion">
<br>
English :<input type="checkbox"
name="Language"" value="english">
<br>
Pashto :<input type="checkbox"
name="Language"" value="pashto">
</form>
Persian:
English:
Pashto:

Drop Down Box
 Used when you want the user to select one of the
options from the list.
<form action="">
<select name="color">
<option value="blue">blue</option>
<option value="red">red</option>
<option value="green">Green</option>
<option value="yellow">yellow</option>
</select>
</form>

Textarea
 Used to input a longer text, normally one or two
paragraphs, or even more.
<form>
<textarea name=“address” rows=“3” cols=“15”>
</textarea>
</form>

File
 You can choose a file from a destination.
<form>
<input type=“file” name=“photo">
</form>

Reset button
 While you click on a reset button, the form content
will be cleaned up.
<form>
<input type=“reset” name=“reset_form">
</form>

Input’s attributes
 Name=“” define the name of the input. (JS, PHP)
 Id=“” define the identification of an input. (CSS,
JS)
 Class=“” clarify, which class it belongs to. (CSS,
JS)
 Value=“” gets a predefined value.
 Checked=“” pre-checked checkboxes.
 Selected=“” preselected dropdown boxes.
 Dir=“” direction (rtl, ltr)
 align=“” alignment (left, center, right).
 Style=“” attach CSS to the input.

 Title=“” put a title for each element of a form.
(Popup tooltip)
 Readonly=“” makes the value of an input read-
only.
 Disable=“” disable a form element. Can not
read or write on it.
 Size=“” define the size of an input
 Rows=“” used to insert rows for a textarea.
 Cols=“” used to insert columns for a textarea.

 Each input in a form, may have different attribute
for more control over the behavior of that
component.
 An input may have a name, an ID, class, size, dir,
value, align, checked, selected, style, rows, cols
and some other attributes. (HTML 5)

Submit Button
 When the user clicks on the "Submit" button, the
content of the form is sent to the server.
 The form's action attribute defines the name of
the file to send the content to.
<form name=“user“ action=“form.php” method="post">
Username:
<input type="text" name="user">
<input type="submit" value="Submit">
</form>
Username: Submit

hasen@microcis.net June 30, 2013Hassen poreya
Trainer, Cresco Solution
Any Questions!

Web app development_html_02

More Related Content

What's hot

Viewers also liked

Similar to Web app development_html_02

Recently uploaded

Web app development_html_02