Session:2
Introduction to the HTML5
OBJECTIVES
Describe DOCTYPE declarations
Describe charset
Explain the basic tags in HTML
Describe container and standalone tags
Heading Tags
Formatting tags
Paragraph tags
Attributes of body and head
2
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.
3
HTML Encoding (Character Sets)
• To display an HTML page correctly, a web browser must
know which character set (character encoding) to use.
• ASCII was the first character encoding standard (also
called character set).
• ANSI (Windows-1252) was the original Windows
character set.
• ISO-8859-1 was the default character set for HTML 4.
Because ANSI and ISO-8859-1 were so limited, HTML 4
also supported UTF-8.
• UTF-8 (Unicode) covers almost all of the characters and
symbols in the world.
• The default character encoding for HTML5 is UTF-8.
To display an HTML page correctly, a web browser must
know the character set used in the page.
This is specified in the <meta> tag:
<meta charset="UTF-8">
Numb ASCII ANSI 8859 UTF-8 Description
32 space
33 ! ! ! ! exclamation mark
34 " " " " quotation mark
35 # # # # number sign
36 $ $ $ $ dollar sign
37 % % % % percent sign
BASIC STRUCTURE OF HTML DOCUMENT
head Contains
information which
is not directly
displayed in the
browser, but
browsers may use it
in other ways.
Contains the content
body to be displayed in the
browser and also the
code that tells the
browser how to
render the content.
BASIC CODE
<html> It tell the browser that you will "talk" to it in the language HTML
<head> It provides information about your document
<!-- This section is for the title and
technical info of the page. -->
</head>
<body> It describes the content of the document
<!-- This section is for all that you want
to show on the page. -->
</body> 1. Open Notepad
2. Type the code shown in the above
</html> figure.
3. Save the file with .html extension.
4. View it in Internet Explorer.
Favorites.
TAGS
Core building block of HTML is tag , which marks
each element in the document.
Tags are labels one use to mark up the beginning and
end of an element.
Element refers to an object in a Web page, & tag
refers to the HTML code that creates the object.
BASIC TAGS
An HTML document is made up of different elements, tags, attributes, which
specify the content and its 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
Head
Title
Meta
Link
Script
Body
heading
horizontal line
image
paragraph
unordered list
AN ELEMENT IS A DISTINCT OBJECT IN THE DOCUMENT
EXAMPLES: PARAGRAPH, HEADING , OR THE PAGE’S TITLE
THE WHOLE DOCUMENT CAN ALSO BE CONSIDERED AS AN
ELEMENT.
DESCRIPTION OF BASIC TAGS
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.
HEAD
• The <head> element is a container for metadata (data
about data) and is placed between the <html> tag and
the <body> tag.
• HTML metadata is data about the HTML document.
Metadata is not displayed.
• Metadata typically define the document title,
character set, styles, links, scripts, and other meta
information.
• The following tags describe metadata: <title>, <style>,
<meta>, <link>, <script>, and <base>.
TITLE
• The <title> element defines the title of the document,
and is required in all HTML documents.
• The <title> element:
• defines a title in the browser tab
• provides a title for the page when it is added to
favorites
• displays a title for the page in search engine results
DESCRIPTION OF BASIC TAGS
META
• The <meta> element is used to specify which character
set is used, page description, keywords, author, and
other metadata.
• Metadata is used by browsers (how to display content),
by search engines (keywords), and other web services.
• Define the character set used:
<meta charset="UTF-8">
• Define a description of your web page:
<meta name="description" content="Free Web tutorials">
15
• Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, XML,
JavaScript">
• Define the author of a page:
<meta name="author" content="John Doe">
Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
DESCRIPTION OF BASIC TAGS
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”>
17
DESCRIPTION OF BASIC TAGS
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>
18
DESCRIPTION OF BASIC TAGS
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.
19
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.
20
INTRODUCTION
Text content of Web page forms an important part of a Web site.
Text must be attractive, easy to read, and should be short and crisp.
Text formatting options such as bold, italics, superscript, subscript, and so on
must be applied to attract the user attention.
Background color and image of the Web page can be specified using HTML.
21
HEADINGS 1-2
Heading elements define headings for contents such as text and images.
Specifies the hierarchical structure of a Web page by grouping the contents.
HTML defines six levels of headings ranging from H1 to H6.
H1 is the top level heading and is displayed with largest font size
H6 is the lowest-level heading and is displayed with smallest font size
22
HEADINGS 2-2
The Code Snippet demonstrates how to specify the six levels of heading in an
HTML page.
<!DOCTYPE html>
<html>
<head>
<title>Headings</title>
</head>
<body>
<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
<h3>H3 Heading</h3>
<h4>H4 Heading</h4>
<h5>H5 Heading</h5>
<h6>H6 Heading</h6>
</body>
</html>
23
TEXT FORMATTING 1-5
Formatting is
applied using
formatting elements
which are container
elements
Content format
Formatted content
determines the
appearance of the
Formatting makes an HTML page
more readable and
content in the
presentable
browser
Text may appear in
bold or underlined
24
IMPORTANT TAGS
Tag Description
<html> Defines an HTML document
<body> Defines the document's body
<h1> to <h6> Defines HTML headings
<hr /> Defines a horizontal line
<!--> Defines a comment
<p> Defines a paragraph
<br /> Inserts a single line break
HTML TEXT FORMATTING TAGS
Tag Description
<b> Defines bold text
<big> Defines big text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
TEXT FORMATTING 2-5
Commonly used formatting elements are as follows:
B element displays text in bold and is enclosed between <b> and </b> tags.
I element displays text in italics and is enclosed between <i> and </i> tags.
SMALL element makes the text appear smaller in browser and is enclosed
between <small> and </small> tags.
U element underlines a text and is enclosed between <u> and </u> tags.
27
TEXT FORMATTING 4-5
Some more formatting elements are as follows:
DEL element encloses deleted text and is placed between <del> and </del>
tags.
INS element encloses inserted text and is placed between <ins> and </ins>
tags.
STRONG element emphasizes the text and is placed between <strong> and
</strong> tags.
SUB element displays a text as subscript and is enclosed between <sub> and
</sub> tags.
SUP element displays a text as superscript and is enclosed between <sup>
and </sup> tags.
28
TEXT FORMATTING 5-5
The Code Snippet demonstrates the use of other formatting elements.
<!DOCTYPE html>
<html>
<head>
<title>Updating and Shifting Text</title>
</head>
<body>
<h3>Updating, Emphasizing, and Shifting Text</h3>
This is an example of <del>deleted</del> <ins>inserted
</ins> text.<br/>
The is an example of <strong>Strong</strong> text.<br/>
The is an example of <sub>subscript</sub>text.<br/>
The is an example of <sup>superscript</sup> text.<br/>
</body>
</html>
29
CONTROLLING
FONT SIZE &
COLOR
CHANGING FONT SIZE, COLOR AND FAMILY
To change font size, color and family, you can use
style attribute.
<p style="color:white; font-family:arial;
background-color:olive">
This is some text in paragraph with style
attribute.
</p>
<h1 style="text-align:center">
Styling of text using style attribute
</h1>
CHANGING THE COLOR OF TEXT
• TEXT attribute of the <BODY> tag is used to set the
foreground, or text color of the page.
<BODY TEXT=“color”>
Color name: Specifies the text-color with a <BODY
color name
TEXT=“blue”>
Hex number: Specifies the text-color with a hex <BODY
code
TEXT=“#FF0000”>
RGB Specifies the text-color with an <BODY
number: rgb code
TEXT=“rgb(0,255,0)">
USING IMAGE AS BACKGROUND
<BODY BACKGROUND=“value”>
• BACKGROUND attribute specifies a background image for an
HTML document.
• It overrides the BGCOLOR attribute. This means that if you
specify both a background image & a background color, the
background image will appear on top of the background color.
USING IMAGE AS BACKGROUND
The background image will scroll when the user
scrolls down the page, unless you have set it to be
fixed:
<body background="drkrainbow.gif"
bgproperties="fixed">
BACKGROUND COLOR
Background properties specify the background color and image for the Web
pages.
TEXT attribute of the <BODY> tag is used to set the foreground, or text color
of the page. .
bgcolor attribute specifies the background color of a document.
Syntax for bgcolor is:
<body bgcolor=”color_name|hex_number|rgb_number”>
where,
color_name - Specifies the background color with a color name (such as “red”)
hex_number - Specifies the background color with a hex code (such as “#ff0000”)
rgb_number - Specifies the background color with an rgb code (such as
“rgb(255,0,0)”)
35
HTML COMMENTS
Comments can be inserted into the HTML code to
make it more readable and understandable.
Comments are ignored by the browser and are not
displayed.
Comments are written like this:
<!-- This is a comment -->
