SlideShare uma empresa Scribd logo
1 de 29
Baixar para ler offline
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 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>
HTML Head
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.
 <!-- This is a comment -->
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>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</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 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 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.
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.
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)
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
Let’s codesomething
hasen@microcis.net June 30, 2013Hassen poreya
Trainer, Cresco Solution
Any Questions!

Mais conteúdo relacionado

Mais procurados (20)

Form
FormForm
Form
 
Html Table
Html TableHtml Table
Html Table
 
HTML 4.0
HTML 4.0HTML 4.0
HTML 4.0
 
Lect# 1 html part ii
Lect# 1 html part iiLect# 1 html part ii
Lect# 1 html part ii
 
Tables and Forms in HTML
Tables and Forms in HTMLTables and Forms in HTML
Tables and Forms in HTML
 
HTML 5 Tables and Forms
HTML 5 Tables and FormsHTML 5 Tables and Forms
HTML 5 Tables and Forms
 
Html Help Sheet 02
Html Help Sheet 02Html Help Sheet 02
Html Help Sheet 02
 
Rounded Shaped Box Example 1
Rounded Shaped Box Example 1Rounded Shaped Box Example 1
Rounded Shaped Box Example 1
 
Table and Form HTML&CSS
Table and Form HTML&CSSTable and Form HTML&CSS
Table and Form HTML&CSS
 
HTML Tutorials
HTML TutorialsHTML Tutorials
HTML Tutorials
 
html-table
html-tablehtml-table
html-table
 
Database connectivity in PHP
Database connectivity in PHPDatabase connectivity in PHP
Database connectivity in PHP
 
Programming the web
Programming the webProgramming the web
Programming the web
 
HTML Tables
HTML TablesHTML Tables
HTML Tables
 
Html introduction Part-2
Html introduction Part-2Html introduction Part-2
Html introduction Part-2
 
[Basic HTML/CSS] 4. html - form tags
[Basic HTML/CSS] 4. html - form tags[Basic HTML/CSS] 4. html - form tags
[Basic HTML/CSS] 4. html - form tags
 
HTML5 Web Forms
HTML5 Web FormsHTML5 Web Forms
HTML5 Web Forms
 
HTML Email
HTML EmailHTML Email
HTML Email
 
Sessionex1
Sessionex1Sessionex1
Sessionex1
 
HTML
HTMLHTML
HTML
 

Destaque

Web app development_my_sql_09
Web app development_my_sql_09Web app development_my_sql_09
Web app development_my_sql_09Hassen Poreya
 
Web app development_php_07
Web app development_php_07Web app development_php_07
Web app development_php_07Hassen Poreya
 
Web app development_html_css_03
Web app development_html_css_03Web app development_html_css_03
Web app development_html_css_03Hassen Poreya
 
Web app development_php_04
Web app development_php_04Web app development_php_04
Web app development_php_04Hassen Poreya
 
Web app development_database_design_10
Web app development_database_design_10Web app development_database_design_10
Web app development_database_design_10Hassen Poreya
 
Web app development_database_design_11
Web app development_database_design_11Web app development_database_design_11
Web app development_database_design_11Hassen Poreya
 
Web app development_database_design_er-mapping_12
Web app development_database_design_er-mapping_12Web app development_database_design_er-mapping_12
Web app development_database_design_er-mapping_12Hassen Poreya
 
Web app development_php_06
Web app development_php_06Web app development_php_06
Web app development_php_06Hassen Poreya
 
Learn to Code with JavaScript - Choose Your Own Adventures
Learn to Code with JavaScript - Choose Your Own AdventuresLearn to Code with JavaScript - Choose Your Own Adventures
Learn to Code with JavaScript - Choose Your Own AdventuresTessa Mero
 
Web app development_my_sql_08
Web app development_my_sql_08Web app development_my_sql_08
Web app development_my_sql_08Hassen Poreya
 
Web app development_crud_13
Web app development_crud_13Web app development_crud_13
Web app development_crud_13Hassen Poreya
 
Web app development_php_05
Web app development_php_05Web app development_php_05
Web app development_php_05Hassen Poreya
 
Web app development_cookies_sessions_14
Web app development_cookies_sessions_14Web app development_cookies_sessions_14
Web app development_cookies_sessions_14Hassen Poreya
 
Web app development_html_01
Web app development_html_01Web app development_html_01
Web app development_html_01Hassen Poreya
 

Destaque (16)

Enterprises resource planning
Enterprises resource planningEnterprises resource planning
Enterprises resource planning
 
Web app development_my_sql_09
Web app development_my_sql_09Web app development_my_sql_09
Web app development_my_sql_09
 
Web app development_php_07
Web app development_php_07Web app development_php_07
Web app development_php_07
 
Web app development_html_css_03
Web app development_html_css_03Web app development_html_css_03
Web app development_html_css_03
 
Web app development_php_04
Web app development_php_04Web app development_php_04
Web app development_php_04
 
Web app development_database_design_10
Web app development_database_design_10Web app development_database_design_10
Web app development_database_design_10
 
Web app development_database_design_11
Web app development_database_design_11Web app development_database_design_11
Web app development_database_design_11
 
Web app development_database_design_er-mapping_12
Web app development_database_design_er-mapping_12Web app development_database_design_er-mapping_12
Web app development_database_design_er-mapping_12
 
Web app development_php_06
Web app development_php_06Web app development_php_06
Web app development_php_06
 
Learn to Code with JavaScript - Choose Your Own Adventures
Learn to Code with JavaScript - Choose Your Own AdventuresLearn to Code with JavaScript - Choose Your Own Adventures
Learn to Code with JavaScript - Choose Your Own Adventures
 
Web app development_my_sql_08
Web app development_my_sql_08Web app development_my_sql_08
Web app development_my_sql_08
 
Web app development_crud_13
Web app development_crud_13Web app development_crud_13
Web app development_crud_13
 
CodeIgniter Practice
CodeIgniter PracticeCodeIgniter Practice
CodeIgniter Practice
 
Web app development_php_05
Web app development_php_05Web app development_php_05
Web app development_php_05
 
Web app development_cookies_sessions_14
Web app development_cookies_sessions_14Web app development_cookies_sessions_14
Web app development_cookies_sessions_14
 
Web app development_html_01
Web app development_html_01Web app development_html_01
Web app development_html_01
 

Semelhante a Web app development_html_02 (20)

Unit 2
Unit 2 Unit 2
Unit 2
 
Unit 2
Unit 2 Unit 2
Unit 2
 
HTML.pptx
HTML.pptxHTML.pptx
HTML.pptx
 
Intodcution to Html
Intodcution to HtmlIntodcution to Html
Intodcution to Html
 
Html Form Controls
Html Form ControlsHtml Form Controls
Html Form Controls
 
HTML Webinar Class
HTML Webinar ClassHTML Webinar Class
HTML Webinar Class
 
Web design - Working with forms in HTML
Web design - Working with forms in HTMLWeb design - Working with forms in HTML
Web design - Working with forms in HTML
 
Html starting
Html startingHtml starting
Html starting
 
DIWE - Coding HTML for Basic Web Designing
DIWE - Coding HTML for Basic Web DesigningDIWE - Coding HTML for Basic Web Designing
DIWE - Coding HTML for Basic Web Designing
 
Learning HTML - ILEAD USA
Learning HTML - ILEAD USA  Learning HTML - ILEAD USA
Learning HTML - ILEAD USA
 
Html basics
Html basicsHtml basics
Html basics
 
Html ppt
Html pptHtml ppt
Html ppt
 
html.pptx
html.pptxhtml.pptx
html.pptx
 
Html - Tables, Forms and Frames by Telerik Academy
Html - Tables, Forms and Frames by Telerik AcademyHtml - Tables, Forms and Frames by Telerik Academy
Html - Tables, Forms and Frames by Telerik Academy
 
HTML5 with PHP.ini
HTML5 with PHP.iniHTML5 with PHP.ini
HTML5 with PHP.ini
 
Web designing
Web designingWeb designing
Web designing
 
An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptAn Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java Script
 
WEB DESIGNING.pdf
WEB DESIGNING.pdfWEB DESIGNING.pdf
WEB DESIGNING.pdf
 
HTML Tables and Forms
HTML Tables and Forms HTML Tables and Forms
HTML Tables and Forms
 
HTML Introduction
HTML IntroductionHTML Introduction
HTML Introduction
 

Último

Israel Palestine Conflict, The issue and historical context!
Israel Palestine Conflict, The issue and historical context!Israel Palestine Conflict, The issue and historical context!
Israel Palestine Conflict, The issue and historical context!Krish109503
 
₹5.5k {Cash Payment} Independent Greater Noida Call Girls In [Delhi INAYA] 🔝|...
₹5.5k {Cash Payment} Independent Greater Noida Call Girls In [Delhi INAYA] 🔝|...₹5.5k {Cash Payment} Independent Greater Noida Call Girls In [Delhi INAYA] 🔝|...
₹5.5k {Cash Payment} Independent Greater Noida Call Girls In [Delhi INAYA] 🔝|...Diya Sharma
 
30042024_First India Newspaper Jaipur.pdf
30042024_First India Newspaper Jaipur.pdf30042024_First India Newspaper Jaipur.pdf
30042024_First India Newspaper Jaipur.pdfFIRST INDIA
 
29042024_First India Newspaper Jaipur.pdf
29042024_First India Newspaper Jaipur.pdf29042024_First India Newspaper Jaipur.pdf
29042024_First India Newspaper Jaipur.pdfFIRST INDIA
 
Beyond Afrocentrism: Prerequisites for Somalia to lead African de-colonizatio...
Beyond Afrocentrism: Prerequisites for Somalia to lead African de-colonizatio...Beyond Afrocentrism: Prerequisites for Somalia to lead African de-colonizatio...
Beyond Afrocentrism: Prerequisites for Somalia to lead African de-colonizatio...Muhammad Shamsaddin Megalommatis
 
如何办理(BU学位证书)美国贝翰文大学毕业证学位证书
如何办理(BU学位证书)美国贝翰文大学毕业证学位证书如何办理(BU学位证书)美国贝翰文大学毕业证学位证书
如何办理(BU学位证书)美国贝翰文大学毕业证学位证书Fi L
 
2024 03 13 AZ GOP LD4 Gen Meeting Minutes_FINAL.docx
2024 03 13 AZ GOP LD4 Gen Meeting Minutes_FINAL.docx2024 03 13 AZ GOP LD4 Gen Meeting Minutes_FINAL.docx
2024 03 13 AZ GOP LD4 Gen Meeting Minutes_FINAL.docxkfjstone13
 
Enjoy Night⚡Call Girls Iffco Chowk Gurgaon >༒8448380779 Escort Service
Enjoy Night⚡Call Girls Iffco Chowk Gurgaon >༒8448380779 Escort ServiceEnjoy Night⚡Call Girls Iffco Chowk Gurgaon >༒8448380779 Escort Service
Enjoy Night⚡Call Girls Iffco Chowk Gurgaon >༒8448380779 Escort ServiceDelhi Call girls
 
Lorenzo D'Emidio_Lavoro sullaNorth Korea .pptx
Lorenzo D'Emidio_Lavoro sullaNorth Korea .pptxLorenzo D'Emidio_Lavoro sullaNorth Korea .pptx
Lorenzo D'Emidio_Lavoro sullaNorth Korea .pptxlorenzodemidio01
 
HARNESSING AI FOR ENHANCED MEDIA ANALYSIS A CASE STUDY ON CHATGPT AT DRONE EM...
HARNESSING AI FOR ENHANCED MEDIA ANALYSIS A CASE STUDY ON CHATGPT AT DRONE EM...HARNESSING AI FOR ENHANCED MEDIA ANALYSIS A CASE STUDY ON CHATGPT AT DRONE EM...
HARNESSING AI FOR ENHANCED MEDIA ANALYSIS A CASE STUDY ON CHATGPT AT DRONE EM...Ismail Fahmi
 
26042024_First India Newspaper Jaipur.pdf
26042024_First India Newspaper Jaipur.pdf26042024_First India Newspaper Jaipur.pdf
26042024_First India Newspaper Jaipur.pdfFIRST INDIA
 
Dynamics of Destructive Polarisation in Mainstream and Social Media: The Case...
Dynamics of Destructive Polarisation in Mainstream and Social Media: The Case...Dynamics of Destructive Polarisation in Mainstream and Social Media: The Case...
Dynamics of Destructive Polarisation in Mainstream and Social Media: The Case...Axel Bruns
 
25042024_First India Newspaper Jaipur.pdf
25042024_First India Newspaper Jaipur.pdf25042024_First India Newspaper Jaipur.pdf
25042024_First India Newspaper Jaipur.pdfFIRST INDIA
 
Defensa de JOH insiste que testimonio de analista de la DEA es falso y solici...
Defensa de JOH insiste que testimonio de analista de la DEA es falso y solici...Defensa de JOH insiste que testimonio de analista de la DEA es falso y solici...
Defensa de JOH insiste que testimonio de analista de la DEA es falso y solici...AlexisTorres963861
 
Call Girls in Mira Road Mumbai ( Neha 09892124323 ) College Escorts Service i...
Call Girls in Mira Road Mumbai ( Neha 09892124323 ) College Escorts Service i...Call Girls in Mira Road Mumbai ( Neha 09892124323 ) College Escorts Service i...
Call Girls in Mira Road Mumbai ( Neha 09892124323 ) College Escorts Service i...Pooja Nehwal
 
2024 04 03 AZ GOP LD4 Gen Meeting Minutes FINAL.docx
2024 04 03 AZ GOP LD4 Gen Meeting Minutes FINAL.docx2024 04 03 AZ GOP LD4 Gen Meeting Minutes FINAL.docx
2024 04 03 AZ GOP LD4 Gen Meeting Minutes FINAL.docxkfjstone13
 
Referendum Party 2024 Election Manifesto
Referendum Party 2024 Election ManifestoReferendum Party 2024 Election Manifesto
Referendum Party 2024 Election ManifestoSABC News
 
Different Frontiers of Social Media War in Indonesia Elections 2024
Different Frontiers of Social Media War in Indonesia Elections 2024Different Frontiers of Social Media War in Indonesia Elections 2024
Different Frontiers of Social Media War in Indonesia Elections 2024Ismail Fahmi
 
Minto-Morley Reforms 1909 (constitution).pptx
Minto-Morley Reforms 1909 (constitution).pptxMinto-Morley Reforms 1909 (constitution).pptx
Minto-Morley Reforms 1909 (constitution).pptxAwaiskhalid96
 
2024 02 15 AZ GOP LD4 Gen Meeting Minutes_FINAL_20240228.docx
2024 02 15 AZ GOP LD4 Gen Meeting Minutes_FINAL_20240228.docx2024 02 15 AZ GOP LD4 Gen Meeting Minutes_FINAL_20240228.docx
2024 02 15 AZ GOP LD4 Gen Meeting Minutes_FINAL_20240228.docxkfjstone13
 

Último (20)

Israel Palestine Conflict, The issue and historical context!
Israel Palestine Conflict, The issue and historical context!Israel Palestine Conflict, The issue and historical context!
Israel Palestine Conflict, The issue and historical context!
 
₹5.5k {Cash Payment} Independent Greater Noida Call Girls In [Delhi INAYA] 🔝|...
₹5.5k {Cash Payment} Independent Greater Noida Call Girls In [Delhi INAYA] 🔝|...₹5.5k {Cash Payment} Independent Greater Noida Call Girls In [Delhi INAYA] 🔝|...
₹5.5k {Cash Payment} Independent Greater Noida Call Girls In [Delhi INAYA] 🔝|...
 
30042024_First India Newspaper Jaipur.pdf
30042024_First India Newspaper Jaipur.pdf30042024_First India Newspaper Jaipur.pdf
30042024_First India Newspaper Jaipur.pdf
 
29042024_First India Newspaper Jaipur.pdf
29042024_First India Newspaper Jaipur.pdf29042024_First India Newspaper Jaipur.pdf
29042024_First India Newspaper Jaipur.pdf
 
Beyond Afrocentrism: Prerequisites for Somalia to lead African de-colonizatio...
Beyond Afrocentrism: Prerequisites for Somalia to lead African de-colonizatio...Beyond Afrocentrism: Prerequisites for Somalia to lead African de-colonizatio...
Beyond Afrocentrism: Prerequisites for Somalia to lead African de-colonizatio...
 
如何办理(BU学位证书)美国贝翰文大学毕业证学位证书
如何办理(BU学位证书)美国贝翰文大学毕业证学位证书如何办理(BU学位证书)美国贝翰文大学毕业证学位证书
如何办理(BU学位证书)美国贝翰文大学毕业证学位证书
 
2024 03 13 AZ GOP LD4 Gen Meeting Minutes_FINAL.docx
2024 03 13 AZ GOP LD4 Gen Meeting Minutes_FINAL.docx2024 03 13 AZ GOP LD4 Gen Meeting Minutes_FINAL.docx
2024 03 13 AZ GOP LD4 Gen Meeting Minutes_FINAL.docx
 
Enjoy Night⚡Call Girls Iffco Chowk Gurgaon >༒8448380779 Escort Service
Enjoy Night⚡Call Girls Iffco Chowk Gurgaon >༒8448380779 Escort ServiceEnjoy Night⚡Call Girls Iffco Chowk Gurgaon >༒8448380779 Escort Service
Enjoy Night⚡Call Girls Iffco Chowk Gurgaon >༒8448380779 Escort Service
 
Lorenzo D'Emidio_Lavoro sullaNorth Korea .pptx
Lorenzo D'Emidio_Lavoro sullaNorth Korea .pptxLorenzo D'Emidio_Lavoro sullaNorth Korea .pptx
Lorenzo D'Emidio_Lavoro sullaNorth Korea .pptx
 
HARNESSING AI FOR ENHANCED MEDIA ANALYSIS A CASE STUDY ON CHATGPT AT DRONE EM...
HARNESSING AI FOR ENHANCED MEDIA ANALYSIS A CASE STUDY ON CHATGPT AT DRONE EM...HARNESSING AI FOR ENHANCED MEDIA ANALYSIS A CASE STUDY ON CHATGPT AT DRONE EM...
HARNESSING AI FOR ENHANCED MEDIA ANALYSIS A CASE STUDY ON CHATGPT AT DRONE EM...
 
26042024_First India Newspaper Jaipur.pdf
26042024_First India Newspaper Jaipur.pdf26042024_First India Newspaper Jaipur.pdf
26042024_First India Newspaper Jaipur.pdf
 
Dynamics of Destructive Polarisation in Mainstream and Social Media: The Case...
Dynamics of Destructive Polarisation in Mainstream and Social Media: The Case...Dynamics of Destructive Polarisation in Mainstream and Social Media: The Case...
Dynamics of Destructive Polarisation in Mainstream and Social Media: The Case...
 
25042024_First India Newspaper Jaipur.pdf
25042024_First India Newspaper Jaipur.pdf25042024_First India Newspaper Jaipur.pdf
25042024_First India Newspaper Jaipur.pdf
 
Defensa de JOH insiste que testimonio de analista de la DEA es falso y solici...
Defensa de JOH insiste que testimonio de analista de la DEA es falso y solici...Defensa de JOH insiste que testimonio de analista de la DEA es falso y solici...
Defensa de JOH insiste que testimonio de analista de la DEA es falso y solici...
 
Call Girls in Mira Road Mumbai ( Neha 09892124323 ) College Escorts Service i...
Call Girls in Mira Road Mumbai ( Neha 09892124323 ) College Escorts Service i...Call Girls in Mira Road Mumbai ( Neha 09892124323 ) College Escorts Service i...
Call Girls in Mira Road Mumbai ( Neha 09892124323 ) College Escorts Service i...
 
2024 04 03 AZ GOP LD4 Gen Meeting Minutes FINAL.docx
2024 04 03 AZ GOP LD4 Gen Meeting Minutes FINAL.docx2024 04 03 AZ GOP LD4 Gen Meeting Minutes FINAL.docx
2024 04 03 AZ GOP LD4 Gen Meeting Minutes FINAL.docx
 
Referendum Party 2024 Election Manifesto
Referendum Party 2024 Election ManifestoReferendum Party 2024 Election Manifesto
Referendum Party 2024 Election Manifesto
 
Different Frontiers of Social Media War in Indonesia Elections 2024
Different Frontiers of Social Media War in Indonesia Elections 2024Different Frontiers of Social Media War in Indonesia Elections 2024
Different Frontiers of Social Media War in Indonesia Elections 2024
 
Minto-Morley Reforms 1909 (constitution).pptx
Minto-Morley Reforms 1909 (constitution).pptxMinto-Morley Reforms 1909 (constitution).pptx
Minto-Morley Reforms 1909 (constitution).pptx
 
2024 02 15 AZ GOP LD4 Gen Meeting Minutes_FINAL_20240228.docx
2024 02 15 AZ GOP LD4 Gen Meeting Minutes_FINAL_20240228.docx2024 02 15 AZ GOP LD4 Gen Meeting Minutes_FINAL_20240228.docx
2024 02 15 AZ GOP LD4 Gen Meeting Minutes_FINAL_20240228.docx
 

Web app development_html_02

  • 1. hasen@microcis.net June 30, 2013Hassen poreya Trainer, Cresco Solution Afghanistan Workforce Development Program HTML
  • 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. 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>
  • 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. 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. 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. 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. 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. Some Table Attributes  Colspan=“2”  Rowspan=“3”  Cellpadding=“5”  Cellspacing=“5”  Border=“1”  Bordercolor=“red”  Width=“50%”  Height=“50%”  Align=“center”  Style=“…”
  • 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. 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. 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. 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. Password  Used to input a password field.  Doesn’t show the characters. <form> Password:<input type=“password” name=“pass"> </form> Password: ******
  • 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. 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. 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. 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. File  You can choose a file from a destination. <form> <input type=“file” name=“photo"> </form>
  • 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. 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. 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. 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. 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
  • 29. hasen@microcis.net June 30, 2013Hassen poreya Trainer, Cresco Solution Any Questions!