Introduction to HTML

Presented by M.Zaid
Rafique
Media
Media is a plural form ( of
medium) refers to means
or devices of
communication such as:
TV, newspaper, and
Radio, newsletter,book….
• In Computer Science
media is an object or
device, such as a disk, on
which data is stored.
Types of media
Hypermedia
Hyperlink

The various types/aspects

of media in
communication
1. Records ( as media),
2. Print media,
3. Mass media
4. Electronic media,
5. Multimedia
6. Hypermedia
7. Digital media,
Hypermedia
It is used as a logical
extension of the term
hypertext, in which
graphics, audio, video,
plain text and hyperlinks
intertwine to create a
generally non-linear
medium of information.
A hypertext system that can display multimedia
including graphics, sounds, animation, and video
An extension to hypertext to include graphics and
audio
 The hypertext concept extended to include linked
multiple media
online information with text, images, audio, and
animation associated in a nonlinear web of
associations
Also known as "interactive multimedia, " this format
allows random access to information in a program
A visual, interactive and non-linear medium for
communication, which is based on a human-computer
interaction paradigm where the user can browse
through a database using point and click interaction
techniques

Hyperlink
A hyperlink, is a reference
or navigation element in a
document to another
section of the same
document or to another
document that may be on
a (different) website.
Hypermedia example
The World Wide Web is a classic example of
hypermedia, whereas a non-interactive cinema
presentation is an example of standard multimedia.
In history of hypermedia we can say:For first time Ted
Nelson’ used the term hypermedia along with
hypertext in his 1965 article The first truly universal
hypermedia was Hypercard,1987
Most modern hypermedia is delivered via electronic
pages from a variety of systems.
Audio hypermedia is emerging with voice command
devices and voice browsing.

Applications
Presentations
Business
Advertisement
Games and simulations
Education
Advantage
Better communication
including linked multiple
media
Interactivity
Random access to content
of information
User-friendly
Effective communication
Creates better impact
Attractive
Offers greater clarity
Multi Options
Useful for a variety of
audience, like differently
abled.

How the Web Works?

WWW use classical client
/ server architecture
HTTP is text-based
request-response protocol
What is a Web Page?
Web pages are text files
containing HTML
HTML – Hyper Text
Markup Language
A notation for describing
document structure (semantic markup)
formatting (presentation markup)

The markup tags provide

information about the
page content structure
Creating HTML Pages
An HTML file must have
an .htm or .html file
extension
HTML files can be
created with text editors:
NotePad, NotePad ++, PSPad

Or HTML editors
(WYSIWYG Editors):
Microsoft FrontPage
Macromedia Dreamweaver
Netscape Composer
Microsoft Word
Visual Studio

HTML Basics
Text, Images, Tables, Forms
HTML Structure
HTML Code Formatting
The HTML source code
should be formatted to
increase readability and
facilitate debugging.
Every block element
should start on a new line.
Every nested (block)
element should be
indented.
Browsers ignore multiple
whitespaces in the page
source, so formatting is
harmless.
For performance reasons,
formatting can be
sacrificed
HTML CODE Formatting
First HTML PAGE
First HTML Page: Tags
First HTML Page: Header
First HTML Page: Body
Some Simple Tags
Some Simple Tags ----
Example
Headings and Paragraphs
Headings and Paragraphs –
Example
Headings and Paragraphs –
Example (2)