Web Technologies: HTML Basics

Web Technologies
HTML Basics
Wasif Hamdani
Internet?
• It is a world-wide resource, accessible to all of

the humankind.
• The global system of interconnected computer

networks that uses the Internet protocol
suite (TCP/IP) to communicate between
networks and devices.
2
History
3
Uses of the Internet
Web Technologies?
• Since computers can’t communicate with each
other like the way people do, instead they
require codes.
• Web technologies are the markup languages

and multimedia packages computers use to
communicate.
• Browsers (Chrome, Firefox), Programming

languages (Java, JavaScript, PHP, Python),
Protocols (HTTP), Data formats (XML, JSON).
5
Web Components
• Web Page: A document which can be displayed

in a web browser e.g. Google Chrome, Firefox.
• Web Site: A collection of related web pages and

associated items which are grouped together.
• Web Server: A computer that hosts a website on

the Internet and delivers web pages on client’s
request.
6
Web Components
• Uniform Resource Identifier (URI): A sequence

of characters that identifies a logical or physical
resource.
• Universal Resource Locator (URL): URI which

specifies the location.
• Universal Resource Name (URN): URI which

specifies the name.
7
URI, URL, URN
8
Client/Server Structure of the Web
• Web content lives on web servers.
• Web servers speak the HTTP protocol also called HTTP

servers. These servers store the Internet’s data and
provide the data when it is requested by HTTP clients.
• The clients send HTTP requests to servers, and servers

return the requested data in HTTP responses.
• The most common client is a web browser, such

as MS Internet Explorer or Google Chrome.
• Web browsers request HTTP objects from servers

and display the objects on your screen.
Web Languages
• Hypertext Markup Language (HTML):

– defines the structure of a web page, e.g. titles, images, and
text should appear on a page.
• Cascading Style Sheets (CSS):
– define the layout and appearance of pages in the browser.
• PHP Hypertext Processor (PHP):
– general-purpose scripting language for web development.
• JavaScript:
– interactive and programmable web pages
12
HTML
• HTML
– Stands for Hyper Text Markup Language
– HyperText
• The text that has reference to another text document
– Markup language
• Language that is both machine and human readable
13
HTML
• Markup language
– Defines the style and structure of a document so that
a computer knows how you want that document to
appear.
• HTML Page
– HTML pages are text documents containing HTML
structure
14
15
16
Example: HTML Structure
17
Example: HTML Structure
18
HTML Structure
The opening <html> tag indicates that

anything between it and a closing
</html> tag is HTML code.
19 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.
20 2/20/2020
HTML Structure
Words between <h1> and

</h1> are a main heading.
21 2/20/2020
HTML Structure
Words between <h1> and

</h1> are a main heading.
22
HTML Structure
paragraph o
f text
appears bet
ween these
<p> and </p
> tags.
23 2/20/2020
HTML Tags
24 2/20/2020
HTML Tags
25 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.
26
HTML Tags
• Attributes Tell Us More About Elements
27
Body & Title
Everything inside body element is

shown inside the main browser window.
28
Body & Title
This contains information that are shown on top

of the page
29
Body & Title
30
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...
31
Heading
• Example code
32 2/20/2020
Paragraph
• A paragraph consists of one or more sentences

that form a kind of dialogue.
33
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
34 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>
35
Line Breaks & Horizontal Rules
36
Blockquote
• Blockquote
– The <blockquote> tag specifies a section that is
quoted from another source.
– Browsers usually indent <blockquote> elements.
37
Abbreviation or Acronym
• Abbreviation or an acronym
– Use an abbreviation or an acronym, when you like to
add shortened versions of something else
38
Example HTML Document
39 2/20/2020
Example HTML Page
40
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.
41
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.
42
List
• Example
43
List
• Definition List
– The definition list is created with the <dl> element
and usually consists of a series of terms and their
definitions.
44
Example HTML document
• Summary
45 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>
46
Hyperlink
• Example
47
Hyperlink
• Opening link in new window

– Open link in new page by using target=“_blank”
48
Hyperlink
• Linking to a Specific Part of the Same Page
49
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.
50
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
51
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.
52
Images
53
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
54
Tables
55
Tables
56
Tables
57
Tables
58
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.
59
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.
60
HTML FORMS
What does it means

(type=“password”)
61
HTML FORMS
What happens if you repeat same

name in radio control???
62
HTML FORMS
63
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.
64
HTML Form Example
65
HTML Page
• HTML page can be created on multiple text

editor including:
– Notepad
– Notepad ++
– Sublime
– Visual Studio
– Much more…
66
HTML Page – Visual Studio
67
68
69
70
71
72
73
74
75
76
Question(s)?
77
Thank you 
78

Web Technologies: HTML Basics

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Technologies: HTML Basics

Uploaded by

Copyright:

Available Formats

Web Technologies

• It is a world-wide resource, accessible to all of

• The global system of interconnected computer

• Web technologies are the markup languages

• Browsers (Chrome, Firefox), Programming

• Web Page: A document which can be displayed

• Web Site: A collection of related web pages and

• Web Server: A computer that hosts a website on

• Uniform Resource Identifier (URI): A sequence

• Universal Resource Locator (URL): URI which

• Universal Resource Name (URN): URI which

• Web servers speak the HTTP protocol also called HTTP

• The clients send HTTP requests to servers, and servers

• The most common client is a web browser, such

• Web browsers request HTTP objects from servers

• Hypertext Markup Language (HTML):

The opening <html> tag indicates that

The <body> tag indicates that

Words between <h1> and

Words between <h1> and

• Attributes Tell Us More About Elements

• Attributes Tell Us More About Elements

Everything inside body element is

This contains information that are shown on top

• HTML has six "levels" of headings:

• A paragraph consists of one or more sentences

• HTML provides us with three different types:

• Opening link in new window

• Linking to a Specific Part of the Same Page

• Linking to a Specific Part of the another Page

– If you want to link to a specific part of a different

• There are three rules to remember when you are

– Save images in the right format

• <figure> element to contain images

• A table represents information in a grid format.

• Whenever you want to collect information from visitors you will

• Information from a form is sent in name/value pairs.

What does it means

What happens if you repeat same

• HTML page can be created on multiple text

You might also like