Scribd
Upload
10 views26 pages

Lec 1 HTML

The document provides an introduction to HTML5 and HTTP, explaining the communication process between web clients and servers through requests and responses. It outlines the history and goals of HTML5, highlighting new elements and features, as well as providing examples of basic HTML5 structure and formatting tags. Additionally, it covers lists and text formatting, emphasizing the simplicity and improvements in HTML5 compared to previous versions.

Uploaded by

Kow
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views26 pages

Lec 1 HTML

The document provides an introduction to HTML5 and HTTP, explaining the communication process between web clients and servers through requests and responses. It outlines the history and goals of HTML5, highlighting new elements and features, as well as providing examples of basic HTML5 structure and formatting tags. Additionally, it covers lists and text formatting, emphasizing the simplicity and improvements in HTML5 compared to previous versions.

Uploaded by

Kow
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 26

Introduction to

HTML5
Lecture-1
What is HTTP?
 HTTP stands for Hyper Text Transfer Protocol
 WWW is about communication between web clients and
servers.
 Communication between client computer and web server
is done by sending HTTP Requests and receiving HTTP
Responses.
 Clients are often browsers(Chrome, Safari, Mozila, etc)
 Servers are most often computers in cloud.
HTTP Request/Response
 Communication between client and server is done by
requests and responses:
1. A client (a browser) sends an HTTP request to the web
2. An web server receives the request
3. The server runs an application to process the request
4. The server returns an HTTP response (output) to the
browser
5. The client (the browser) receives the response
What is HTML5?
 HTML5 is the newest version of HTML, only recently
gaining partial support by the makers of web browsers.
 It incorporates all features from earlier versions of HTML,
including the stricter XHTML.
 It adds a diverse set of new tools for the web developer
to use.
History of HTML

1991 HTML first published

1995 HTML 2.0


After HTML 4.01 was released, focus
shifted to XHTML and its stricter standards.
1997 HTML 3.2

1999 HTML 4.01 XHTML 2.0 had even stricter standards


than 1.0, rejecting web pages that did not
2000 XHTML 1.0 comply. It fell out of favor gradually and
was abandoned completely in 2009.
2002
- XHTML 2.0
HTML5 is much more tolerant and can
2009 handle markup from all the prior versions.

Though HTML5 was published officially in 2012, it


2012 HTML5
has been in development since 2004.
Goals of HTML5

 Support all existing web pages. With HTML5, there is no


requirement to go back and revise older websites.
 Reduce the need for external plugins and scripts to show
website content.
 Make the rendering of web content universal and
independent of the device being used.
 Handle web documents errors in a better and more
consistent fashion.
New Elements in HTML5

<article> <figcaption> <progress>


<aside> <footer> <section>
<audio> <header> <source>
<canvas> <hgroup> <svg>
<datalist> <mark> <time>
<figure> <nav> <video>

These are just some of the new elements introduced in HTML5. We


will be exploring each of these during this course.
Other New Features in HTML5
 Built-in audio and video support (without plugins)
 Enhanced form controls and attributes
 The Canvas (a way to draw directly on a web page)
 Drag and Drop functionality
 Support for CSS3 (the newer and more powerful version
of CSS)
 More advanced features for web developers, such as
data storage and offline applications.
First Look at HTML5
Remember the DOCTYPE declaration from XHTML?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

In HTML5, there is just one possible DOCTYPE declaration and it is simpler:

<!DOCTYPE html>

Just 15 characters!

The DOCTYPE tells the browser which type and version of document to
expect. This should be the last time the DOCTYPE is ever changed. From
now on, all future versions of HTML will use this same simplified declaration.
The <html> Element
This is what the <html> element looked like in XHTML:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"


lang="en">

Again, HTML5 simplifies this line:


<html lang="en">

The lang attribute in the <html> element declares which language the page
content is in. Though not strictly required, it should always be specified, as it
can assist search engines and screen readers.

Each of the world’s major languages has a two-character code, e.g. Spanish = "es",
French = "fr", German = "de", Chinese = "zh", Arabic = "ar".
The <head> Section
Here is a typical XHTML <head> section:
<head>
<title>My First XHTML Page</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

And the HTML5 version:

<head>
<title>My First HTML5 Page</title>
<link rel="stylesheet" href="style.css">
</head>
Basic HTML5 Web Page
Putting the prior sections together, and now adding the <body> section and
closing tags, we have our first complete web page in HTML5:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First HTML5 Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>HTML5 is fun!</p>
</body>
</html>

Let's open this page in a web browser to see how it looks…


Viewing the HTML5 Web Page

Even though we used HTML5, the page looks exactly the same in a web
browser as it would in XHTML. Without looking at the source code, web
visitors will not know which version of HTML the page was created with.
Structural Tags
<HTML>
These tags enclose the entire Web page document.
</HTML>

<HEAD>
These tags enclose the Head part of the document
</HEAD>

<TITLE>
These tags enclose the title of the document. This text appears in the
title bar in the browser and on the bookmark list if someone bookmarks
your web page.
</TITLE>
Sample Structure of a Web Site
<HTML>
<HEAD>
<TITLE> John Q. Public's Web Page </TITLE>
</HEAD>
<BODY>
This is John Public's Webpage!
</BODY>
</HTML>
Header Tags
Header Tags -- Used for marking sections and subsections
in a document.

<H1>Header 1 -- Giant-sized and bold </H1>


<H2>Header 2 -- Large and bold </H2>
<H3>Header 3 -- Normal-sized and bold </H3>
<H4>Header 4 -- Small and bold </H4>
<H5>Header 5 -- Very Small and bold </H5>
<H6>Header 6 -- Tiny and bold </H6>
Header Tags (cont.)
H1 = Giant-sized and bold
H2 = Large and bold
H3 = Normal-sized and bold
H4 = Small and bold
H5 = Very Small and bold

H6 = Tiny and bold


Breaking Lines and Paragraphs
 <P> text </P>
 Paragraph tag
 Most browsers render (process) this with blank lines between each
paragraph
 <BR>
 Line break tag
 Used when the webmaster wants a carriage return but doesn't want a
blank line to follow
Horizontal Rule
The <HR> tag puts a graphical line across the page.
Ex:

Horizontal Rule Attributes:


NOSHADE -- A solid line with no shading
WIDTH="xx%/xx" -- Controls the width of the line. You may specify
either percentage of the width of a page or actual pixel length
SIZE="xx" -- Controls the height of the line. You need to specify the
dimension in pixels.
ALIGN="left/center/right" -- This allows the line to be aligned to the
left, right, or center of the page
Text Formatting Tags
Some basic text formatting styles:

Tag Result

<I> Italics </I> Italics


<B> Bold </B> Bold

<PRE> Preformatted Text </PRE> Preformatted Text


<STRONG> Strong </STRONG> Strong
<ADDRESS> Address </ADDRESS> Address
<CITE> Citations </CITE> Citations
<CODE> Source Code </CODE> Source Code
Font modifications
Web creators can also change the way text looks by using the <FONT> tag

SIZE="number" - changes size of the font; 1=smallest, 7 = largest


<FONT SIZE="7">Big</FONT> <FONT SIZE="1">Small</FONT>

Big Small

COLOR="color-name" - changes text color


<FONT COLOR="red">This is red</FONT>

This is red

FACE="font-name" - changes font


<FONT FACE=“Arial">This is the Arial font;</FONT> <FONT FACE=“times new roman">this is the times new rowman
font.</FONT>
This is the Arial font; this is times new rowman font.
<Font> modifications (cont.)
One can combine font modifications:

<FONT SIZE="7" FACE="courier" COLOR="red">Big, Courier & Red</FONT>

Big, Courier & Red

<FONT SIZE="7"><FONT FACE="courier">Big & Courier</FONT> - Just Big</FONT>

Big & Courier - Just Big


Lists -- Unordered Lists
Unordered lists:
<UL> • Item One
<LI>Item One
• Item Two
<LI>Item Two
<LI>Item Three • Item Three
<LI>Item Four • Item Four
</UL>

Unordered List Attributes:


type="disc/circle/square"
• Disc (default)  Circle  Square
Lists -- Ordered Lists
Ordered (Numbered) Lists:

<OL> 1. Item One


<LI> Item One 2. Item Two
<LI> Item Two
3. Item Three
<LI> Item Three
4. Item Four
<LI> Item Four
</OL>
Ordered List Attributes:
type="i/I/a/A/1" (default)

i = i. Item One I = I. Item One a = a. Item One A = A. Item One 1 = 1.Item One
ii. Item Two II. Item Two b. Item Two B. Item Two 2. Item Two
iii. Item Three III. Item Three c. Item Three C. Item Three 3. Item Three
iv. Item Four IV. Item Four d. Item Four D. Item Four 4. Item Four

start="xx"
• This attribute lets you specify which number/letter will start the list
Lists -- Definition Lists
Definition Lists:
<DL>
<DT>List Name One
<DD>This is where information about List Name One would go</DD>
</DT>
<DT>List Name Two
<DD>This is where information about List Name Two would go</DD>
</DT>
</DL>

List Name One


This is where information about List Name One
would go
List Name Two
This is where information about List Name Two
would go
THANK YOU

You might also like