Chapter 1 & 2

Introduction to the Web

& HTML 5
GV: Võ Ngọc Đạt
 Objectives
 Evolution of Computer
 Web and Internet
 Introduction HTML
 Explain the page structure used by HTML
 Explain the elements constituting an HTML tag
 Describe DOCTYPE declarations
 Explain the basic tags in HTML
 List the different data types, attributes, and entities of HTML5
 Describe container and standalone tags
 Explain the role of HTML5 in Mobile devices

2
 Evolution of Computing 1-2

Computing started by using stand-alone computers to perform different

computing operations.

Later organizations began to connect their computers to share data.

Different types of networks are as follows:

 Local Area Network (LAN)

 Metropolitan Area Network (MAN)
 Wide Area Network (WAN)

3
 Evolution of Computing 1-2

Network in a
small
geographical
area

Network that
covers city

Network that
connects LANs and
MANs across the
globe

Internet is known as the largest WAN.

Web is a way to access information using Internet.

4
 Web and Internet

Information is
available in the
form of Web
pages

Web page is a file

containing
information and
instruction

Information is
displayed to the user

5
 Web Communication 1-2

Web pages are stored on a Web server to make them available on the Internet
for the users.

Web server is a computer with high processing speed and connected to the
Internet.

Web server is used to host and display the Web pages on a Web browser.

Web browser displays the Web pages using the HTTP protocol.

HTTP is a protocol that specifies how a Web page will be retrieved from the Web
server.

6
 Web Communication 1-2
 Steps to view a Web page in a browser are as follows:

1. User specifies the Uniform Resource Locator (URL) of Web page in a browser.

2. The client browser sends the URL request to the appropriate Web server.

3. Web server processes the request and sends the Web page as a response to the
browser.

7
Web Communication 1-3

8
Static Web Pages

Contents remain
unchanged

Static
Consists of
content such as
Web Focuses on
text, images, Pages content
presentation
videos and so on

Simple to design as it
provides no
interactivity

9
Dynamic Web Pages

Allows
customization of
content and its
appearance in
browser

Dynamic
Data is always up- Web Generates content
on-demand when
to-date and
reliable
Pages user provides
input

Allows user
interaction

10
 Technologies
 Technologies used for creating dynamic Web sites are as follows:

JavaScript, a scripting language, is used for creating dynamic Web pages.

CSS specifies the formatting of a Web page for both static and dynamic Web
pages.

Extensible HTML when used with JavaScript, displays the required user-defined
data each time the Web page is loaded in the browser.

Dynamic HTML uses JavaScript and CSS to make dynamic Web pages and
transform the look and feel of the Web pages.

11
 Introduction HTML
HTML is the standard markup language for creating Web pages.

What is HTML?
• HTML stands for Hyper Text Markup Language
• HTML is the standard markup language for creating Web pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements label pieces of content such as "this is a heading",
"this is a paragraph", "this is a link", etc.

12
 HTML Page Structure
Below is a visualization of an HTML page structure:

13
 Elements 1-2
 An element organizes the content in a Web page hierarchically, which forms
the basic HTML structure.

It consists of tags, attributes, and content. Tags denote the start and end of an
HTML element.

A start tag includes an opening angular bracket (<) followed by the element
name, zero or more space separated attributes, and a closing angular bracket
(>).

Attributes are name/value pairs that describe the element and content format.

An end tag is written exactly as the start tag, but the forward slash (/) precedes
the element name.

14
 Elements 2-2
 Following figure shows an element in HTML tag.

15
 DOCTYPE
 Informs the browser the HTML version number of your document.
 It is the first declaration in the HTML5 document before any other HTML code
is written.
 Allows a browser to be more precise in the way it interprets and renders your
pages.

The new HTML5 DOCTYPE is as follows:

<!DOCTYPE html>

 It is the new syntax of HTML5 as well as for all future versions of HTML.
 This DOCTYPE is compatible with the older browsers also.

16
 Basic Tags 1-6
 An HTML document is made up of different elements, tags, attributes, which
specify the content and its format.
 HTML is both a structural and presentational markup language.
 Structural markup specifies the structure of the content, while the
presentational markup specifies the format.
 An HTML page is saved with the .html extension.
 The basic structure of an HTML document mainly consists of seven basic
elements. These are as follows:

➢ HTML

 The HTML element is the root element that marks the beginning of an HTML
document.
 It contains the start and end tag in the form of <HTML> and </HTML>
respectively.
 It is the largest container element as it contains various other elements.

17
 Basic Tags 2-6

➢ HEAD

 The HEAD element provides information about the Web page such as
keywords and language used.
 Keywords are important terms existing in a Web page used by the search
engines to identify the Web page with respect to the search criterion.

➢ TITLE

 The TITLE element allows you to specify the title of the Web page under the
<TITLE> and </TITLE> tags.
 The title is displayed on the Title bar of the Web browser. The TITLE
element is included within the HEAD element.

18
 Basic Tags 3-6

➢ META

 The meta tag is used for displaying information about the data.
 In HTML5, the content meta tag which was used for specifying the charset or
character encoding has been simplified.
 The new <meta> tag is as follows:
<meta charset=”utf-8” />

 UTF-8 is the most commonly used character coding that supports many
alphabets.
 There are several other attributes associated with the meta tag that can be
used to declare general information about the page.
 This information is not displayed in the browser.
 Meta tags provide search engines, browsers, and Web services with the
information that is required to preview or acquire a summary of the relevant
data of your document.

19
 Basic Tags 4-6

➢ LINK

 The <link> tag is used to define the association between a document and
an external resource.
 It is used to link stylesheets. Its type attribute is used to specify the type of
link such as ‘text/css’ which points out to a stylesheet.

<link type=”text/css” rel=”stylesheet” href=”first.css”>

 The type attribute is not included in HTML5.

 The reason is that CSS has been declared as the default and standard style for
HTML5. So, the new link is as follows:

<link rel=”stylesheet” href=”first.css”>

20
 Basic Tags 5-6
➢ SCRIPT

 With HTML5, JavaScript is now the standard and default scripting language.
 The type attribute tag can be removed from the script tags.
 The new script tag is as follows:
<script src=”first.js”></script>
The following example shows the use of the script tag.
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8”>
<title>HTML Webinar</title>
<link rel=”stylesheet” href=”first.css”>
<script src=”first.js”></script>
</head>
</html>

21
 Basic Tags 6-6
➢ BODY

 The BODY element enables you to add content on the Web page specified
under the <BODY> and </BODY> tags.
 Content can include text, hyperlinks, and images. You can display the content
using various formatting options such as alignment, color, and background.
 Following figure shows the basic HTML elements.

22
 Data Types 1-2
 A data type specifies the type of value assigned to the attributes and the type
of content that is to be displayed on the Web page.
 Data types help in identifying the type of formatting such as color and length
of data.
 Following table describes the different types of content.

Data Type Description

Text Strings Specifies textual content, which is readable by the user.

Uniform Resource Specifies the location of Web pages or network files.

Identifiers (URIs)

Colors Specifies the color to be applied to the content on the Web page.

Lengths Specifies the spacing among HTML elements. Length values can be in Pixels,
Length, or MultiLength. Pixels refer to the smallest dot on the screen.

Content Types Specifies the type of content to be displayed on a Web page. Content types include
‘text/html’ for displaying text, ‘image/gif’ for displaying image of a .gif format,
‘video/mpg’ for displaying a video file of .mpg format.

23
 Data Types 2-2
 Following figure shows the different data types:

Content
Types

Text
Lengths
Strings

Basic HTML
Data Types

Colors URIs

24
 Attributes
 HTML attributes help to provide some meaning and context to the elements.
 Following table describes some of the global attributes used in HTML5 elements.

Attribute Description

class Specifies class names for an element.

contextmenu Specifies the context menu for an element.

dir Specifies the direction of the text present for the content.

draggable Specifies the draggable function of an element.

dropzone Specifies whether the data when dragged is copied, moved, or linked, when dropped.

Specifies the inline CSS style for an element.

style

title Specifies additional information about the element.

25
 HTML Entities
 Entities are special characters that are reserved in HTML.
 These entities can be displayed on a HTML5 Web site using the following syntax:
Syntax:
&entity_name; or &#entity_number;

 Following table shows some of the commonly used HTML entities.

Output Description Entity Name Entity Number

non-breaking space &nbsp; &#160;

< less than &lt; &#60;

> greater than &gt; &#62;

& ampersand &amp; &#38;

€ euro &euro; &#8364;

© copyright &copy; &#169;

26
 Container and Standalone Tags

There are two types of HTML elements namely, container and standalone
elements.

A container element includes the start tag, contents, sub-elements, and end tag.

All the basic HTML elements are container elements.

A standalone element consists of the start tag and attributes followed by the end
tag as /> without any content.

27
 Benefits of HTML5 for Mobile
Development
The benefits of HTML5 for mobile developments are as follows:

HTML5 has included APIs, hence additional plug-ins are not required for
mobile browsers.

Mobile development is easier as knowledge of only HTML5, CSS, and

JavaScript is majorly required.

There is a rising growth of HTML5 for mobile applications due to its enhanced
compatibility.

HTML5 is compatible with most operating system platforms.

The HTML5 based mobile applications can run on browsers of Android, iOS,
Blackberry, Windows Phone, and other mobile operating systems.

The development cost for creating applications in HTML5 is low.

Applications based on location and maps will have greater support in HTML5.

Third-party programs are not required in HTML5.

28
 Summary

 New features of HTML5 would include tags such as <canvas>, <article>, <nav>,
<header>, <footer>, <section>, <audio>, <video> and so on.

 Some of the technologies used for creating dynamic Web sites JavaScript, CSS,
XHTML, and DHTML.

 A Cascading Style Sheet (CSS) is a rule based language, which specifies the formatting
instructions for the content specified in an HTML page.

 JavaScript is a scripting language that allows you to build dynamic Web pages by
ensuring maximum user interactivity.

 jQuery is a JavaScript library that simplifies the design of client-side scripting on HTML
pages.

 The major browsers, such as Chrome, Firefox, Opera, Safari, Internet Explorer, and so
on, are trying to add the new HTML5 features to the latest version of the browsers.

29
 Summary (tt)
 An element organizes the content in a Web page hierarchically, which forms the
basic HTML structure.

 The DOCTYPE tells the browser the type of your document.

 A data type specifies the type of value assigned to the attributes and the type
of content that is to be displayed on the Web page.

 Entities are special characters that are reserved in HTML.

 A container element includes the start tag, contents, sub-elements, and the end
tag.

 A standalone element consists of the start tag and attributes followed by the
end tag as /> without any content.

 HTML5 provides features such as drag-and-drop functionality, video embedding

in an application, and even offline capabilities for mobile devices.

30
Q&A

31