ECAP472

WEB
TECHNOLOGIES

Dr. Pritpal Singh

Associate Professor
Learning
Outcomes
After this lecture, you will be able to

• Understand basic of HTML and HTML5.

• Know briefly history of HTML

• Realize basic features of HTML5.

What is
html…?

• HTML is Hyper Text Mark-up

Language where mark-up
language is used to define
the text document within tag
which defines the structure
of web pages.

• So HTML is the combination

of Hypertext and Mark-up
language.
What is html used for?

• HTML (Hypertext Markup

Language) is the code that is
used to structure a web
page and its content.
• For example, content could
be structured within a set of
paragraphs, a list of bulleted
points, or using images and
data tables.
Why to learn html?

Create Web site - You can create a

website or customize an existing web

Become a web designer - If you

want to start a carrier as a professional
web designer

Understand web - If you want to

optimize your website, to boost its
speed and performance,

Learn other languages - other

related technologies like javascript ,
php, or angular are become easier to
understand
HTML History
Tags In HTML

• The essence of HTML programming is tags

• A tag is a keyword enclosed by angle

brackets
• Example: <I>

• There are opening and closing tags .

• The affected text is between the two tags

Opening and Closing Tags

• The opening and closing tags use the same

command except the closing tag contains
and additional forward slash /.

• For example, the expression <B> Warning

</B> would cause the word ‘Warning’ to
appear in bold face on a Web page.
Opening and Closing Tags

• The opening and closing tags use the same

command except the closing tag contains
and additional forward slash /.

• For example, the expression <B> Warning

</B> would cause the word ‘Warning’ to
appear in bold face on a Web page.
Nested Tags

• Whenever you have HTML tags within other

HTML tags, you must close the nearest tag
first.
Nested Tags

• Whenever you have HTML tags within other

HTML tags, you must close the nearest tag
first

• Example:

<H1> <I> The Nation </I> </H1>

Title Tag

• The <TITLE> Tag

• Choose the title of your Web page carefully;
The title of a Web page determines its
ranking in certain search engines.

• The title will also appear on Favorite lists,

History lists, and Bookmark lists to identify
your page.
TITLE TAG

• The <TITLE> Tag

• Choose the title of your Web page carefully;
The title of a Web page determines its
ranking in certain search engines.

• The title will also appear on Favorite lists,

History lists, and Bookmark lists to identify
your page.
Text Formatting

• Manipulating text in HTML can be tricky; Oftentimes,

what you see is NOT what you get

• For instance, special HTML tags are needed to create

paragraphs, move to the next line, and create headings

• <<B> Bold Face </B>

• <I> Italics </I>

• <U> Underline </U>

• <P> New Paragraph </P>

• <BR> Next Line

Comments Statements

• Comment statements are notes in the HTML

code that explain the important features of
the code.

• The comments do not appear on the Web

page itself but are a useful reference to the
author of the page and other programmers

• To create a comment, statement use the

• <!-- …. --> tags.

Comments Statements

• Comment statements are notes in the HTML

code that explain the important features of
the code.

• The comments do not appear on the Web

page itself but are a useful reference to the
author of the page and other programmers

• To create a comment, statement use the

• <!-- …. --> tags.

Comments Statements

• Comment statements are notes in the HTML

code that explain the important features of
the code.

• The comments do not appear on the Web

page itself but are a useful reference to the
author of the page and other programmers

• To create a comment, statement use the

• <!-- …. --> tags.

Comments Statements

• Comment statements are notes in the HTML

code that explain the important features of
the code.

• The comments do not appear on the Web

page itself but are a useful reference to the
author of the page and other programmers

• To create a comment, statement use the

• <!-- …. --> tags.

Page Formatting

• To define the background color, use the

BGCOLOR attribute in the <BODY> tag

• To define the text color, use the TEXT

attribute in the <BODY> tag

• To define the size of the text, type

<BASEFONT SIZE=n>
Page Formatting

• To define the background color, use the

BGCOLOR attribute in the <BODY> tag

• To define the text color, use the TEXT

attribute in the <BODY> tag

• To define the size of the text, type

<BASEFONT SIZE=n>
Page Formatting

• To define the background color, use the

BGCOLOR attribute in the <BODY> tag

• To define the text color, use the TEXT

attribute in the <BODY> tag

• To define the size of the text, type

<BASEFONT SIZE=n>
Page Formatting-Example

• <HTML>

• <HEAD>

• <TITLE> Example </TITLE>

• </HEAD>

• <BODY BGCOLOR=“black” TEXT=“white”>

• <BASEFONT SIZE=7>This is where you would include the text

and images on your Web page.

• </BODY>

• </HTML>
Inserting Images

• Type <IMG SRC = “image.ext”>, where image.ext

indicates the location of the image file

• The WIDTH=n and HEIGHT=n attributes can be used

to adjust the size of an image

• The attribute BORDER=n can be used to add a

border n pixels thick around the image
What Is HTML5 ?
What Is HTML5 ?

• HTML5 is a markup
language used for structuring
and presenting content on
the World Wide Web.

• It is the fifth and last

major HTML version that is
a World Wide Web
Consortium (W3C)
recommendation.
Why HTML5 ?

• Video and Audio

Support
• Doctype
• Smarter Storage
• Cleaner Code
• Better Interactions
• Game Development
• Legacy/Cross Browser
Support
• Mobile, Mobile, Mobile
• It’s the Future, Get
Backward Compatibility

• HTML5 is designed, as much

as possible, to be backward
compatible with existing web
browsers. Its new features
have been built on existing
features and allow you to
provide fallback content for
older browsers.
Video and Audio

• Forget about Flash Player and

other third party media players,
make your videos and audio
truly accessible with the new
HTML5 <video> and <audio>
tags. Getting your media to
play correctly has always been
pretty much a nightmare, you
had to use the <embed> and
<object> tags and assign a
huge list of parameters just to
get the thing visible and
working correctly/
DOCTYPE

• Yup that’s it, that is the

doctype, nothing more, nothing
less. Pretty simple right? No
more cutting and pasting some
long unreadable line of code
and no more dirty head tags
filled with doctype attributes.
You can simply and easily type
it out and be happy. The really
great thing about it though,
beyond the simplicity, is that it
works in every browser
Smarter Storage

• One of the coolest things about

HTML5 is the new local storage
feature. It’s a little bit of a cross
between regular old cookies and a
client-side database. It’s better
than cookies because it allows for
storage across multiple windows, it
has better security and
performance and data will persist
even after the browser is closed.
Because it’s essentially a client
side data base you don’t have to
worry about the user deleting
cookies and it is been adopted by
all the popular browsers.
Better Interactions

We all want a more dynamic

website that responds to the user
and allows the user to
enjoy/interact your content instead
of just look at it. Enter <canvas>,
the drawing HTML5 tag that allows
you to do most (if not more)
interactive and animated
possibilities than the previous rich
internet application platforms like
Flash.
Beyond <canvas>, HTML5 also
comes with a slew of great APIs
Game Development

• That is correct, you can

develop games using
HTML5’s <canvas> tag.
HTML5 provides a great,
mobile friendly way to
develop fun, interactive
games. If you’ve built Flash
games before, you’ll love
building HTML5 games./
Legacy/cross browser support

• Modern, popular browsers all

support HTML5 (Chrome, Firefox,
Safari IE9 and Opera) and the
HTML5 doctype was created so
that all browsers, even the really
old and annoying ones, er, IE6 can
use it. But just because old
browsers recognize the doctype
that doesn’t mean they can use all
the new HTML5 tags and goodies.
It’s the future, get with it!

• The reason why you should

start using HTML5 today is
this: it’s the future, start
using it now so you don’t get
left behind. HTML5 is not
going anywhere and as more
and more elements get
adopted more and more
companies will start to
develop in HTML5. HTML5 is
HTML Documents

• All HTML documents must start with a

document type declaration: <!DOCTYPE
html>.

• The HTML document itself begins

with <html> and ends with </html>.

• The visible part of the HTML document is

between <body> and </body>.
HTML Documents

• The <!DOCTYPE> declaration represents the

document type, and helps browsers to
display web pages correctly.

• It must only appear once, at the top of the

page (before any HTML tags).

• The <!DOCTYPE> declaration is not case

sensitive.
Structure of Webpage
Structure of Webpage
Explanation of Page Structure
 Basic HTML Code

• Html code
• Output in Browser
• <!DOCTYPE html>
• <html lang="en">
• <head>
• <title>Inserting Line Breaks in
HTML</title>
• </head>
• <body>
• <p>This is a paragraph <br>
with line break.</p>
• <p>This is <br>another
paragraph <br> with line
breaks.</p>
• </body>
• </html>
That’s all for now…