Web Application Development
HTML Basics
HTML
• HTML
– Stands for HyperText Markup Language
– HyperText
• The text that has reference to another text document
– Markup language
• Language that is both machine and human readable
• HTML Page
– HTML pages are text documents containing HTML
structure
– HTML describes the structure of a page
– HTML files are text files with extension “htm” or “html”
2
HTML History
• Tim Berners-Lee invented html in 1991
Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
4
3 Layers of Web Design
5
6
HTML <!DOCTYPE> Declaration
<!DOCTYPE html>
<html>
…
…
…
…
…
…
</html>
7
<!DOCTYPE> Definition and Use
• The <!DOCTYPE> declaration must be the very first
thing in your HTML document, before the <html> tag. Version Year
• The <!DOCTYPE> declaration is not an HTML tag; it is
an instruction to the web browser about what version HTML 1991
of HTML the page is written in.
HTML 2.0 1995
• In HTML 4.01, the <!DOCTYPE> declaration refers to a
DTD (Document Type Definition) HTML 3.2 1997
• The DTD specifies the rules for the markup language, HTML 4.01 1999
so that the browsers render the content correctly.
XHTML 2000
• HTML5 does not require a reference to a DTD.
HTML 5 2014
• There are three different <!DOCTYPE> declarations in
HTML 4.01.
• In XHTML 1.1 and HTML5 there is only one.
8
<!DOCTYPE> Usage
• Always add the <!DOCTYPE> declaration to your HTML
documents, so that the browser knows what type of document
to expect.
• The <!DOCTYPE> declaration is NOT case sensitive
• HTML 4.01 doctypes are:
– Strict
– Tranditional
– Frameset
9
Common DOCTYPE Declarations
• HTML 5
– <!DOCTYPE html>
• HTML 4.01 Strict
– <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"[Link]
• HTML 4.01 Transitional
– <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[Link]
• HTML 4.01 Frameset
– <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"[Link]
• XHTML 1.1
– <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"[Link]
10
Example: HTML Structure
11
Example: HTML Structure
12
HTML Structure
The opening <html> tag indicates that
anything between it and a closing
</html> tag is HTML code.
13 2/20/2020
HTML Structure
The <body> tag indicates that
anything between it and the closing
</body> tag should be shown inside
the main browser window.
14 2/20/2020
HTML Structure
Words between <h1> and
</h1> are a main heading.
15 2/20/2020
HTML Structure
Words between <h1> and
</h1> are a main heading.
16
HTML Structure
17 2/20/2020
HTML Tags
18 2/20/2020
HTML Tags
19 2/20/2020
Attributes
• Attributes Tell Us More About Elements
– Attributes provide additional information about the
contents of an element. They appear on the opening
tag of the element and are made up of two parts: a
name and a value, separated by an equals sign.
20
HTML Tags
• Attributes Tell Us More About Elements
21
Body & Title
Everything inside body element is
shown inside the main browser window.
22
Body & Title
This contains information that are shown on top
of the page
23
Body & Title
24
Headings
• HTML has six "levels" of headings:
– <h1> is used for main headings
– <h2> is used for subheadings
– If there are further sections under the subheadings
then the <h3> element is used, and so on...
25
Heading
• Example code
26 2/20/2020
Paragraph
• A paragraph consists of one or more sentences
that form a kind of dialogue.
27
Bold and Italic
• Bold
– By enclosing words in the tags <b> and </b> we can
make characters appear bold.
• Italic
– By enclosing words in the tags <i> and </i> we can
make characters appear italic.
• Example
28 2/20/2020
Line Breaks & Horizontal Rules
• Line Break
– Just like <p></p> the line break <br /> breaks line and
starts new line
– Example
<p>The Earth<br />gets one hundred tons heavier
every day<br />due to falling space dust.</p>
• Horizontal Rule
– Just like <br /> it separates lines by placing a solid line in
between paragraphs
<p>Venus is the only planet that rotates
clockwise.</p>
<hr />
<p>Jupiter is bigger than all the other planets
combined.</p>
29
Line Breaks & Horizontal Rules
30
Blockquote
• Blockquote
– The <blockquote> tag specifies a section that is
quoted from another source.
– Browsers usually indent <blockquote> elements.
31
Abbreviation or Acronym
• Abbreviation or an acronym
– Use an abbreviation or an acronym, when you like to
add shortened versions of something else
32
Example HTML Document
33 2/20/2020
Example HTML Page
34
Lists
• HTML provides us with three different types:
– Ordered lists
• are lists where each item in the list is numbered.
– Unordered lists
• are lists that begin with a bullet point (rather than
characters that indicate order).
– Definition lists
• are made up of a set of terms along with the definitions for
each of those terms.
35
List
• Ordered List
– <ol>
• The ordered list is created with the <ol> element.
– <ul>
• The unordered list is created with <ul> element.
– <li>
• Each item in the list is placed between an opening <li> tag
• and a closing </li> tag. (The li stands for list item.)
– Browsers indent lists by default.
36
List
• Example
37
List
• Definition List
– The definition list is created with the <dl> element
and usually consists of a series of terms and their
definitions.
38
Example HTML document
• Summary
39 2/20/2020
Link
• Hyperlink
– A hyperlink is a word, phrase, or image that you can
click on to jump to a new document or a new section
within the current document.
– Example
• <a href="url">link text</a>
40
Hyperlink
• Example
41
Hyperlink
• Opening link in new window
– Open link in new page by using target=“_blank”
42
Hyperlink
• Linking to a Specific Part of the Same Page
43
Hyperlink
• Linking to a Specific Part of the another Page
– If you want to link to a specific part of a different
page (whether on your own site or a different
website) you can use a similar technique.
44
Images
• There are three rules to remember when you are
creating images.
– Save images in the right format
– Save images at the right size
– Use the correct resolution
45
Figure & Figure Caption
• <figure> element to contain images
• The <img> element is used to add images to a web page
• <figcaption> allow web page authors to add a caption to an image.
46
Image – alt attribute
<img src=“[Link]“ width=“639" height=“516“ alt=“Pakistan Map” />
47
Relative Paths
• A relative URL indicates where the resource is in
relation to the current page.
– Same Directory [Link]
– Subdirectory
• arts/[Link]
• entertainment/arts/[Link]
• ./images/[Link]
– Parent Directory
• ../[Link]
• ../../[Link]
– From the Root /[Link]
48
Absolute Paths
• A absolute URL indicates a complete path to resource.
– Example
• F:\Work\web\Spring-2022\[Link]
• [Link]
49
Images
50
Tables
• A table represents information in a grid format.
• Table
– The <table> element is used to create a table. The
contents of the table are written out row by row.
• Row
– start of each row using the opening <tr> tag and
</tr> closing tag
• Cell
– Each cell of a table is represented using a <td>
element with </td> closing tag
51
Tables
52
Tables
53
Tables
54
Tables
55
HTML Forms
• Whenever you want to collect information from visitors you will
need a form, which lives inside a <form> element.
• Information from a form is sent in name/value pairs.
• Each form control is given a name, and the text the user types in
or the values of the options they select are sent to the server.
56
HTML Form Structure
• <form>
– This element should always carry the action attribute and will
usually have a method and id attribute too.
• Action
– Every <form> element requires an action attribute. Its value is
the URL for the page on the server that will receive the
information.
• Method
– Forms can be sent using one of two methods: get or
post.
57
HTML FORMS
What does it means
(type=“password”)
58
HTML FORMS
What happens if you repeat same
name in radio control???
59
HTML FORMS
60
Grouping Form Elements
The <legend> element can come
You can group related form directly after the opening <fieldset>
controls together inside the tag and contains a caption which
<fieldset> element helps identify the purpose of that
group of form
controls.
61
HTML Form Example
62
HTML Page
• HTML page can be created on multiple text
editor including:
– Notepad
– Notepad ++
– Sublime
– Visual Studio
– Much more…
63
HTML Page – Visual Studio
64
HTML Page – Visual Studio
65
HTML Page – Visual Studio
66
HTML Page – Visual Studio
67
HTML Page – Visual Studio
68
HTML Page – Visual Studio
69
HTML Page – Visual Studio
70
HTML Page – Visual Studio
71
HTML Page – Visual Studio
72
HTML Page – Visual Studio
73
Markup Validation Service
Markup Validation Service
Markup Validation Service
HTML Text formatting Tags
HTML Entities
Result Description Entity Name Entity Number
non-breaking space  
< less than < <
> greater than > >
& ampersand & &
¢ cent ¢ ¢
£ pound £ £
¥ yen ¥ ¥
€ euro € €
© copyright © ©
® registered trademark ® ®
78
HTML Entities - Usage
• Some characters are reserved in HTML.
• If you use the less than (<) or greater than (>) signs in
your text, the browser might mix them with tags.
• Character entities are used to display reserved
characters in HTML.
• A character entity looks like this:
– &entity_name; OR
– &#entity_number;
79
HTML Entities – Math symbols
Result Description Entity Name Entity Number
∀ FOR ALL ∀ ∀
∂ PARTIAL DIFFERENTIAL ∂ ∂
∃ THERE EXISTS ∃ ∃
∅ EMPTY SETS ∅ ∅
∇ NABLA ∇ ∇
∈ ELEMENT OF ∈ ∈
∉ NOT AN ELEMENT OF ∉ ∉
∋ CONTAINS AS MEMBER ∋ ∋
∏ N-ARY PRODUCT ∏ ∏
∑ N-ARY SUMMATION ∑ ∑
More: [Link]
80
iframe Tag
• An iframe is used to display a web page within a web page.
• Syntax
– <iframe src="URL"></iframe>
• Iframe - Set Height and Width
– <iframe src="demo_iframe.htm" width="200"
height="200"></iframe>
• Iframe can be used to embed video in web page.
• Example: Embed following code in your HTML page
– <iframe src="[Link]
width="454" height="280” ></iframe>
81