HTML
Team Emertxe
Defining HTML
 HTML – HyperText Markup Language –
The Language of Web Pages on the World
Wide Web. HTML is a text formatting
language.
Tags
Codes enclosed in brackets
Usually paired
<TITLE>My Web Page</TITLE>
Not case sensitive
<TITLE> = <title> = <TITLE>
Creating a Basic
Starting Document
<HTML>
<HEAD>
<TITLE>Emertxe
InformationTechnology</TITLE>
</HEAD>
<BODY>
This is what is displayed.
</BODY>
</HTML>
Creating a Basic
Starting Document
The HEAD of your document point to above
window part. The TITLE of your document
appears in the very top line of the user’s
browser. If the user chooses to “Bookmark”
your page or save as a “Favorite”; it is the
TITLE that is added to the list.
The text in your TITLE should be as
descriptive as possible because this is what
many search engines, on the internet, use
for indexing your site.
Creating a Basic
Starting Document
Document properties are controlled by
attributes of the BODY element. For
example, there are color settings for the
background color of the page, the
document’s text and different states of
links.
What are HTML
forms?
 <form> is just another kind of HTML tag
 HTML forms are used to create (rather primitive) GUIs on Web pages
 Usually the purpose is to ask the user for information
 The information is then sent back to the server
 A form is an area that can contain form elements
 The syntax is: <form parameters> ...form elements... </form>
 Form elements include: buttons, checkboxes, text fields, radio
buttons, drop-down menus, etc
 Other kinds of HTML tags can be mixed in with the form
elements
 A form usually contains a Submit button to send the information in
he form elements to the server
 The form’s parameters tell JavaScript how to send the information
to the server (there are two different ways it could be sent)
 Forms can be used for other things, such as a GUI for simple
programs
The <form> tag
 The <form arguments> ... </form> tag encloses form elements (and
probably other HTML as well)
 The arguments to form tell what to do with the user input
 action="url" (required)
 Specifies where to send the data when the Submit button is
clicked
 method="get" (default)
 Form data is sent as a URL with ?form_data info appended to
the end
 Can be used only if data is all ASCII and not more than 100
characters
 method="post"
 Form data is sent in the body of the URL request
 Cannot be bookmarked by most browsers
 target="target"
 Tells where to open the page sent as a result of the request
 target= _blank means open in a new window
 target= _top means use the same window
The <input> tag
 Most, but not all, form elements use the input tag, with
a type="..." argument to tell which kind of element it is
 type can be text, checkbox, radio, password, hidden, submit,
reset, button, file, or image
 Other common input tag arguments include:
 name: the name of the element
 value: the “value” of the element; used in different ways for
different values of type
 readonly: the value cannot be changed
 disabled: the user can’t do anything with this element
 Other arguments are defined for the input tag but have
meaning only for certain values of type
Text Input
A text field:
 <input type="text" name="textfield"
value="with an initial value">
A password field:
 <input type="password"
name="textfield3" value="secret">
Buttons
 A submit button:
<input type="submit" name="Submit" value="Submit">
 A reset button:
<input type="reset" name="Submit2" value="Reset">
 A plain button:
<input type="button" name="Submit3" value="Push Me">
submit: send data
reset: restore all form elements to their
initial state
Checkbox
 A checkbox:
<input type="checkbox" name="checkbox”
value="checkbox" checked>
 type: "checkbox"
 name: used to reference this form element from JavaScript
 value: value to be returned when element is checked
 Note that there is no text associated with the checkbox—you
have to supply text in the surrounding HTML
Radio Buttons
 Radio buttons:<br>
<input type="radio" name="radiobutton" value="myValue1">
male<br>
<input type="radio" name="radiobutton" value="myValue2"
checked>
female
Drop-down list
A menu or list:
<select name="select">
<option value="red">red</option>
<option value="green">green</option>
<option value="BLUE">blue</option>
</select>
Hidden Fields
<input type="hidden" name="hiddenField"
value="nyah">
 What good is this?
 All input fields are sent back to the server, including hidden
fields
 This is a way to include information that the user doesn’t need
to see (or that you don’t want her to see)
 The value of a hidden field can be set programmatically (by
JavaScript) before the form is submitted
THANK YOU

More Related Content

PPTX
PPTX
HTML Forms Tutorial
PPTX
html forms
PDF
2. HTML forms
PPTX
Forms with html5 (1)
PPTX
Html forms
PPTX
Forms in html5
PPSX
HTML5 - Forms
HTML Forms Tutorial
html forms
2. HTML forms
Forms with html5 (1)
Html forms
Forms in html5
HTML5 - Forms

What's hot (20)

PPTX
html 5 new form attribute
PPTX
HTML Forms
PPTX
Html form tag
PPTX
HTML Tables and Forms
PPT
05 html-forms
PPTX
HTML and CSS part 2
PPTX
New Form Element in HTML5
PPT
Web forms and html lecture Number 4
PPTX
FYBSC IT Web Programming Unit I HTML 5 & andcss
PPTX
HTML Forms
PPTX
HTML Forms
PPTX
Web engineering - HTML Form
PPTX
HTML5 Web Forms
PPTX
PHP Form Validation Technique
PPTX
Form using html and java script validation
PDF
Html forms
PPT
Php forms
PPTX
Html tables, forms and audio video
PPTX
Html forms
PDF
PHP Making Web Forms
html 5 new form attribute
HTML Forms
Html form tag
HTML Tables and Forms
05 html-forms
HTML and CSS part 2
New Form Element in HTML5
Web forms and html lecture Number 4
FYBSC IT Web Programming Unit I HTML 5 & andcss
HTML Forms
HTML Forms
Web engineering - HTML Form
HTML5 Web Forms
PHP Form Validation Technique
Form using html and java script validation
Html forms
Php forms
Html tables, forms and audio video
Html forms
PHP Making Web Forms
Ad

Viewers also liked (20)

PDF
Internet of Things (IOT) - Demo - Part I
PDF
IoT : Whats in it for me?
PDF
Internet of things : Beginners view
PDF
Embedded Linux Kernel - Build your custom kernel
PDF
Linux Internals - Part III
PDF
Embedded Android : System Development - Part IV
PPTX
Linux Kernel - An Engineering marvel
PDF
Emertxe Certified Embedded Professional (ECEP) : Induction
PDF
Eclipse - Installation and quick start guide
PDF
Emertxe Certified Embedded Professional (ECEP): Assessment system
PDF
Tracing the evolution - Open source & Embedded systems
PDF
Android : Deep dive into developing MobileApp using Android
PDF
Building careers in embedded
PDF
Emertxe : Linux training portfolio
PDF
Introduction to Embedded Systems
PDF
Design challenges in IoT
PDF
Resume Preparation - Workshop
PDF
Interview preparation workshop
PDF
Peek into linux_device_driver_kit
Internet of Things (IOT) - Demo - Part I
IoT : Whats in it for me?
Internet of things : Beginners view
Embedded Linux Kernel - Build your custom kernel
Linux Internals - Part III
Embedded Android : System Development - Part IV
Linux Kernel - An Engineering marvel
Emertxe Certified Embedded Professional (ECEP) : Induction
Eclipse - Installation and quick start guide
Emertxe Certified Embedded Professional (ECEP): Assessment system
Tracing the evolution - Open source & Embedded systems
Android : Deep dive into developing MobileApp using Android
Building careers in embedded
Emertxe : Linux training portfolio
Introduction to Embedded Systems
Design challenges in IoT
Resume Preparation - Workshop
Interview preparation workshop
Peek into linux_device_driver_kit
Ad

Similar to HTML (20)

PDF
8741aad2f359a5ee62afdf4cc4341440 (1) (1) (1).pdf
PPT
20-html-forms.ppt
PPT
11-html-forms.ppt
PPTX
HYPERTEXT MARK UP LANGUAGES (HTML) FORMS
PPT
11-html-forms.pptydy6rfyf6rrydyf6r6ryfydydyff
PPT
20 html-forms
PPTX
HTML Forms: The HTML element represents a document section containing interac...
PPTX
Gitika html ppt
PPT
Html class-04
PPT
HtmlForms- basic HTML forms description.
PPTX
Web Design Lecture 4.pptx
PPTX
Section1 HTML (part2) Web technology for b
PDF
HTML-Forms
PPTX
Web topic 20 1 html forms
PPTX
1. Lecture 1 WT- Forms.pptxl;kjhgfdsfghj
PPTX
Web topic 20 2 html forms
PPTX
The Complete HTML
PPT
331592291-HTML-and-Cascading style sheet
PPTX
web-lab2 for computer science html tss css java
8741aad2f359a5ee62afdf4cc4341440 (1) (1) (1).pdf
20-html-forms.ppt
11-html-forms.ppt
HYPERTEXT MARK UP LANGUAGES (HTML) FORMS
11-html-forms.pptydy6rfyf6rrydyf6r6ryfydydyff
20 html-forms
HTML Forms: The HTML element represents a document section containing interac...
Gitika html ppt
Html class-04
HtmlForms- basic HTML forms description.
Web Design Lecture 4.pptx
Section1 HTML (part2) Web technology for b
HTML-Forms
Web topic 20 1 html forms
1. Lecture 1 WT- Forms.pptxl;kjhgfdsfghj
Web topic 20 2 html forms
The Complete HTML
331592291-HTML-and-Cascading style sheet
web-lab2 for computer science html tss css java

More from Emertxe Information Technologies Pvt Ltd (20)

Recently uploaded (20)

PDF
Consumable AI The What, Why & How for Small Teams.pdf
PDF
UiPath Agentic Automation session 1: RPA to Agents
PDF
Enhancing plagiarism detection using data pre-processing and machine learning...
PPTX
MicrosoftCybserSecurityReferenceArchitecture-April-2025.pptx
PPT
What is a Computer? Input Devices /output devices
PDF
How IoT Sensor Integration in 2025 is Transforming Industries Worldwide
PPTX
Configure Apache Mutual Authentication
PPT
Galois Field Theory of Risk: A Perspective, Protocol, and Mathematical Backgr...
PPTX
Benefits of Physical activity for teenagers.pptx
PPTX
Modernising the Digital Integration Hub
PDF
ENT215_Completing-a-large-scale-migration-and-modernization-with-AWS.pdf
DOCX
search engine optimization ppt fir known well about this
PDF
Developing a website for English-speaking practice to English as a foreign la...
PPTX
TEXTILE technology diploma scope and career opportunities
PDF
sustainability-14-14877-v2.pddhzftheheeeee
PDF
Five Habits of High-Impact Board Members
PDF
Zenith AI: Advanced Artificial Intelligence
PDF
Comparative analysis of machine learning models for fake news detection in so...
PDF
Improvisation in detection of pomegranate leaf disease using transfer learni...
PDF
Credit Without Borders: AI and Financial Inclusion in Bangladesh
Consumable AI The What, Why & How for Small Teams.pdf
UiPath Agentic Automation session 1: RPA to Agents
Enhancing plagiarism detection using data pre-processing and machine learning...
MicrosoftCybserSecurityReferenceArchitecture-April-2025.pptx
What is a Computer? Input Devices /output devices
How IoT Sensor Integration in 2025 is Transforming Industries Worldwide
Configure Apache Mutual Authentication
Galois Field Theory of Risk: A Perspective, Protocol, and Mathematical Backgr...
Benefits of Physical activity for teenagers.pptx
Modernising the Digital Integration Hub
ENT215_Completing-a-large-scale-migration-and-modernization-with-AWS.pdf
search engine optimization ppt fir known well about this
Developing a website for English-speaking practice to English as a foreign la...
TEXTILE technology diploma scope and career opportunities
sustainability-14-14877-v2.pddhzftheheeeee
Five Habits of High-Impact Board Members
Zenith AI: Advanced Artificial Intelligence
Comparative analysis of machine learning models for fake news detection in so...
Improvisation in detection of pomegranate leaf disease using transfer learni...
Credit Without Borders: AI and Financial Inclusion in Bangladesh

HTML

  • 2. Defining HTML  HTML – HyperText Markup Language – The Language of Web Pages on the World Wide Web. HTML is a text formatting language.
  • 3. Tags Codes enclosed in brackets Usually paired <TITLE>My Web Page</TITLE> Not case sensitive <TITLE> = <title> = <TITLE>
  • 4. Creating a Basic Starting Document <HTML> <HEAD> <TITLE>Emertxe InformationTechnology</TITLE> </HEAD> <BODY> This is what is displayed. </BODY> </HTML>
  • 5. Creating a Basic Starting Document The HEAD of your document point to above window part. The TITLE of your document appears in the very top line of the user’s browser. If the user chooses to “Bookmark” your page or save as a “Favorite”; it is the TITLE that is added to the list. The text in your TITLE should be as descriptive as possible because this is what many search engines, on the internet, use for indexing your site.
  • 6. Creating a Basic Starting Document Document properties are controlled by attributes of the BODY element. For example, there are color settings for the background color of the page, the document’s text and different states of links.
  • 7. What are HTML forms?  <form> is just another kind of HTML tag  HTML forms are used to create (rather primitive) GUIs on Web pages  Usually the purpose is to ask the user for information  The information is then sent back to the server  A form is an area that can contain form elements  The syntax is: <form parameters> ...form elements... </form>  Form elements include: buttons, checkboxes, text fields, radio buttons, drop-down menus, etc  Other kinds of HTML tags can be mixed in with the form elements  A form usually contains a Submit button to send the information in he form elements to the server  The form’s parameters tell JavaScript how to send the information to the server (there are two different ways it could be sent)  Forms can be used for other things, such as a GUI for simple programs
  • 8. The <form> tag  The <form arguments> ... </form> tag encloses form elements (and probably other HTML as well)  The arguments to form tell what to do with the user input  action="url" (required)  Specifies where to send the data when the Submit button is clicked  method="get" (default)  Form data is sent as a URL with ?form_data info appended to the end  Can be used only if data is all ASCII and not more than 100 characters  method="post"  Form data is sent in the body of the URL request  Cannot be bookmarked by most browsers  target="target"  Tells where to open the page sent as a result of the request  target= _blank means open in a new window  target= _top means use the same window
  • 9. The <input> tag  Most, but not all, form elements use the input tag, with a type="..." argument to tell which kind of element it is  type can be text, checkbox, radio, password, hidden, submit, reset, button, file, or image  Other common input tag arguments include:  name: the name of the element  value: the “value” of the element; used in different ways for different values of type  readonly: the value cannot be changed  disabled: the user can’t do anything with this element  Other arguments are defined for the input tag but have meaning only for certain values of type
  • 10. Text Input A text field:  <input type="text" name="textfield" value="with an initial value"> A password field:  <input type="password" name="textfield3" value="secret">
  • 11. Buttons  A submit button: <input type="submit" name="Submit" value="Submit">  A reset button: <input type="reset" name="Submit2" value="Reset">  A plain button: <input type="button" name="Submit3" value="Push Me"> submit: send data reset: restore all form elements to their initial state
  • 12. Checkbox  A checkbox: <input type="checkbox" name="checkbox” value="checkbox" checked>  type: "checkbox"  name: used to reference this form element from JavaScript  value: value to be returned when element is checked  Note that there is no text associated with the checkbox—you have to supply text in the surrounding HTML
  • 13. Radio Buttons  Radio buttons:<br> <input type="radio" name="radiobutton" value="myValue1"> male<br> <input type="radio" name="radiobutton" value="myValue2" checked> female
  • 14. Drop-down list A menu or list: <select name="select"> <option value="red">red</option> <option value="green">green</option> <option value="BLUE">blue</option> </select>
  • 15. Hidden Fields <input type="hidden" name="hiddenField" value="nyah">  What good is this?  All input fields are sent back to the server, including hidden fields  This is a way to include information that the user doesn’t need to see (or that you don’t want her to see)  The value of a hidden field can be set programmatically (by JavaScript) before the form is submitted