Your SlideShare is downloading. ×
0
hasen@microcis.net June 30, 2013Hassen poreya
Trainer, Cresco Solution
Afghanistan Workforce
Development Program
HTML
HTML Versions
Document Type
 The <!DOCTYPE> declaration helps the browser
to display a web page correctly.
 A browser can display an H...
Document Type
 HTML 4.01
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loo...
HTML Head
Headings and Paragraphs
 Headings are defined with the <h1> to <h6>
tags.
 <h1> defines the most important heading. <h6>...
Comments
 Comments can be inserted into the HTML code to
make it more readable and understandable.
 Comments are ignored...
HTML Image
 In HTML, images are defined with the <img>
tag.
 Src attribute is used to reference/address an
image.
 Src ...
HTML Table
 Tables are defined with the <table> tag.
 A table is divided into rows (with the <tr> tag),
and each row is ...
HTML Table
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row...
Some Table Attributes
 Colspan=“2”
 Rowspan=“3”
 Cellpadding=“5”
 Cellspacing=“5”
 Border=“1”
 Bordercolor=“red”
 W...
HTML forms
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 p...
HTML Form
 It starts with the <form> tag and ends with the
</form> tag.
 The general syntax is as bellow:
<form>
<input>...
From Attributes
 name=“”
 Defines the form name.
 This may be used sometimes to call the form for some
validations and/...
Text field
 Used when you want the user to type letters,
numbers, etc.
<form>
First name:<input type="text” name="fname">...
Password
 Used to input a password field.
 Doesn’t show the characters.
<form>
Password:<input type=“password” name=“pas...
Radio Buttons
 Used when you want the user to select one of a
limited number of choices.
<form>
<input type="radio" name=...
Checkboxes
 Used when you want the user to select one or
more options of a limited number of choices
<form>
Persian :<inp...
Drop Down Box
 Used when you want the user to select one of the
options from the list.
<form action="">
<select name="col...
Textarea
 Used to input a longer text, normally one or two
paragraphs, or even more.
<form>
<textarea name=“address” rows...
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=“re...
Input’s attributes
 Name=“” define the name of the input. (JS, PHP)
 Id=“” define the identification of an input. (CSS,
...
Input’s attributes
 Title=“” put a title for each element of a form.
(Popup tooltip)
 Readonly=“” makes the value of an ...
Input’s attributes
 Each input in a form, may have different attribute
for more control over the behavior of that
compone...
Submit Button
 When the user clicks on the "Submit" button, the
content of the form is sent to the server.
 The form's a...
Let’s codesomething
hasen@microcis.net June 30, 2013Hassen poreya
Trainer, Cresco Solution
Any Questions!
Upcoming SlideShare
Loading in...5
×

Web app development_html_02

1,489

Published on

Published in: News & Politics, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,489
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
29
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Web app development_html_02"

  1. 1. hasen@microcis.net June 30, 2013Hassen poreya Trainer, Cresco Solution Afghanistan Workforce Development Program HTML
  2. 2. HTML Versions
  3. 3. 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.
  4. 4. 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>
  5. 5. HTML Head
  6. 6. 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>
  7. 7. 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.  <!-- This is a comment -->
  8. 8. 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">
  9. 9. 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.
  10. 10. HTML Table <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
  11. 11. Some Table Attributes  Colspan=“2”  Rowspan=“3”  Cellpadding=“5”  Cellspacing=“5”  Border=“1”  Bordercolor=“red”  Width=“50%”  Height=“50%”  Align=“center”  Style=“…”
  12. 12. HTML forms
  13. 13. 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.
  14. 14. HTML Form  It starts with the <form> tag and ends with the </form> tag.  The general syntax is as bellow: <form> <input> <input> ... </form>
  15. 15. 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
  16. 16. 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:
  17. 17. Password  Used to input a password field.  Doesn’t show the characters. <form> Password:<input type=“password” name=“pass"> </form> Password: ******
  18. 18. 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
  19. 19. 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:
  20. 20. 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>
  21. 21. 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>
  22. 22. File  You can choose a file from a destination. <form> <input type=“file” name=“photo"> </form>
  23. 23. Reset button  While you click on a reset button, the form content will be cleaned up. <form> <input type=“reset” name=“reset_form"> </form>
  24. 24. 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.
  25. 25. Input’s attributes  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.
  26. 26. Input’s attributes  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)
  27. 27. 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
  28. 28. Let’s codesomething
  29. 29. hasen@microcis.net June 30, 2013Hassen poreya Trainer, Cresco Solution Any Questions!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×