Scribd
Upload
123 views36 pages

Introduction To HTML

The document introduces HTML5 concepts including DOCTYPE declarations, character encoding, basic HTML tags, container and standalone tags, heading tags, and formatting tags. It describes the new HTML5 DOCTYPE as <!DOCTYPE html> and explains that the default character encoding for HTML5 is UTF-8, specified in a <meta> tag. It also provides details on common basic HTML tags like <html>, <head>, <body>, and their uses.

Uploaded by

Sidra Shaikh
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
Download as pptx, pdf, or txt
123 views36 pages

Introduction To HTML

The document introduces HTML5 concepts including DOCTYPE declarations, character encoding, basic HTML tags, container and standalone tags, heading tags, and formatting tags. It describes the new HTML5 DOCTYPE as <!DOCTYPE html> and explains that the default character encoding for HTML5 is UTF-8, specified in a <meta> tag. It also provides details on common basic HTML tags like <html>, <head>, <body>, and their uses.

Uploaded by

Sidra Shaikh
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
Download as pptx, pdf, or txt
Download as pptx, pdf, or txt
You are on page 1/ 36

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 -->

You might also like