Scribd
Upload
36 views

Web Application Lecture Week 2 (A)

This document provides an overview of HTML and web application development. It discusses the history of HTML, HTML editors, the basic structure of an HTML page including headings, text, lists, links and images. It also covers HTML styles using inline, embedded and external stylesheets. Additionally, it outlines key HTML form elements like text fields, textareas, radio buttons, checkboxes, submit buttons and attributes used in forms.

Uploaded by

MUHAMMAD ADNAN SALEEM
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
36 views

Web Application Lecture Week 2 (A)

This document provides an overview of HTML and web application development. It discusses the history of HTML, HTML editors, the basic structure of an HTML page including headings, text, lists, links and images. It also covers HTML styles using inline, embedded and external stylesheets. Additionally, it outlines key HTML form elements like text fields, textareas, radio buttons, checkboxes, submit buttons and attributes used in forms.

Uploaded by

MUHAMMAD ADNAN SALEEM
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 29

Web

Application
Development
A S A D U L L A H TA R I Q
Agenda of Today’s Session
 HTML History

 HTML Editors

 HTML Structure

 HTML Basics

 HTML Styles

 HTML Form
The History of HTML

HTML was first created by Tim Berners-Lee, Robert Cailliau, and others starting in 1989. It stands for
Hyper Text Markup Language.

Hypertext means that the document contains links that allow the reader to jump to other places in
the document or to another document altogether. The latest version is known as HTML5.

A Markup Language is a way that computers speak to each other to control how text is processed and
presented. To do this HTML uses two things: tags and attributes
Text Editors
Structured View
of
HTML Page
Heading

Text

BASICS of List

HTML Ordered List

Unordered List
We are not spending much time on
these basics Link

Image
Inline styles  Embedded Styles
Using the  attribute in the HTML Using the <style> element in the
start tag head section of the document.

Styles in
HTML

Using the <link> element, pointing


to an external CSS files.

External Styles
Inline Styles
Inline styles are used to apply the unique style rules to an element, by putting the CSS rules directly
into the start tag. It can be attached to an element using the <style> attribute

Each property pair writes in same line with ; separated

Example:
Embedded Style Sheet
Embedded or internal style sheets only affect the document they are embedded in.

You can start it with <style> tag inside <head>

Example:
Linking External Style Sheets
An external style sheet can be linked to an HTML document using the <link> tag

<link> tag goes inside <head> tag

Example:
HTML TABLES
Structure

<Table>

<th> </th> //for table header (first row)

<tr> </tr> //for table row

<td> </td> //for table column

</Table>

Formatting
 Colspan

 Rowspan
HTML FORMS
Elements and Attributes
HTML Forms
HTML Forms are required to collect different kinds of user inputs, such as contact details like name,
email address, phone numbers, or details like credit card information, etc.

Forms contain special elements called controls like inputbox, checkboxes, radio-buttons, submit
buttons, etc. Users generally complete a form by modifying its controls e.g. entering text, selecting
items, etc. and submitting this form to a web server for further processing.

Form starts with <form> tag


Text Field
Text fields are one line areas that allow the user to input text.

Single-line text input controls are created using an <input> element, whose type attribute will be Text

Example:
Password
Password fields are similar to text fields. The only difference is; characters in a password field are
masked, i.e. they are shown as asterisks or dots.

Password input controls are created using an <input> element, whose type attribute will be Password

Example:
Radio Buttons
Radio buttons are used to let the user select exactly one option from a pre-defined set of options.

Radio input controls are created using an <input> element, whose type attribute will be radio

Example:
Check Box
Checkboxes allows the user to select one or more option from a pre-defined set of options.

Check box input controls are created using an <input> element, whose type attribute will be checkbox

Example:
File Input
The file fields allow a user to browse for a local file and send it as an attachment with the form data.

File input controls are created using an <input> element, whose type attribute will be file

Example:
Text Area
Textarea is a multiple-line text input control that allows a user to enter more than one line of text.

Text Area input controls are created using an <input> element, whose type attribute will be textarea

Example:
Range and Number
<input> type number is used to enter a numerical value

<input> type range is for number where exact value is not that important

Example:
Drop Down Select Boxes
A select box is a dropdown list of options that allows user to select one or more option from a pull-
down list of options. 

Select Boxes controls are created using an <select> element, and <option> element

Example:
Submit and Reset
A submit button is used to send the form data to a web server. When submit button is clicked the form
data is sent to the file specified in the form’s action attribute to process the submitted data.

A reset button resets all the forms control to default values. Try out the following example by typing
your name in the text field, and click on submit button to see it in action.

Example:
Button
You can also create buttons using button type

Example:
Frequently used Form Attributes
Attribute Description

name Specifies the name of the form.

method Specifies the HTTP method used for sending the data to the web server by the browser. The
value can be either GET (the default) and POST.

action Specifies the URL of the program or script on the web server that will be used for
processing the information submitted via form

enctype Specifies how the form data should be encoded when submitting the form to the server.
Applicable only when the value of the method attribute is post.

You might also like