Scribd
Upload
37 views

HTML &NBSP Body &NBSP Style: Sandeep Sir

The document discusses the basics of HTML including the structure of an HTML page using tags like <html>, <head>, and <body>, and explores various tags that can be used within the <head> and <body> sections like <title>, <meta>, and <img> to add metadata, format text, insert images and more to structure and style an HTML web page. It provides an overview of the key elements needed to build a basic HTML page and introduces some common tags used to add content and formatting.

Uploaded by

sandeep
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
37 views

HTML &NBSP Body &NBSP Style: Sandeep Sir

The document discusses the basics of HTML including the structure of an HTML page using tags like <html>, <head>, and <body>, and explores various tags that can be used within the <head> and <body> sections like <title>, <meta>, and <img> to add metadata, format text, insert images and more to structure and style an HTML web page. It provides an overview of the key elements needed to build a basic HTML page and introduces some common tags used to add content and formatting.

Uploaded by

sandeep
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 30

Sandeep Sir

HTML &nbsp Body &nbsp style


• Hypertext markup language
(HTML)
Hypertext Markup Language is the standard markup
language for creating web pages and web applications.
This markup tells a web browser how to display the text,
images and other forms of multimedia on a webpage.
HTML elements are represented by tags
HTML tags are of two types:
Container Tag: (or Pair Tag) The first tag in a pair is the
start tag, the second tag is the end tag. The end tag is
written like the start tag, with a forward slash before the
tag name. Start and end tags are also called opening tags
and closing tags like <b> and </b>.
Empty Tag: Only opening tag is used. For example, <br>
or 2 <hr>.
What do I need to create HTML?
You don't need any special equipment or
software to create HTML. In fact, you probably
already have everything you need.
Computer
Text or HTML editor: For example, HTML
editors are Dreamweaver, SeaMonkey, Coffee
Cup, TextPad etc. and text editors include
Notepad (for Windows), Pico (for Linux), or
Simpletext/Text Edit/TexT.
Web Browser. For example, Internet Explorer or
Firefox, chrome,

3
Objectives

In this session, you will learn to:


Introduce HTML
Create an HTML Web page
Introducing HTML

A markup language:
Enables you to create attractive and
interactive websites.
Provides a way to describe the structure of a
Web page.
Specifies the code in the form of tags for
defining, processing, and presenting the
text on Web pages.
The Web pages can be of the following types:
Static
Dynamic
Introducing HTML (Contd.)
The Internet:
Makes the Web pages and websites accessible to the users.
Enables the organizations to share and access information.
Is an interconnected network of computers across the globe.
The World Wide Web (WWW):
Is a collection of resources on varied topics that can be
accessed through the Internet.
Is a collection of Web pages that are scattered but
interlinked.
Creating an HTML Web Page
Hyper Text Markup Language (HTML):
Is a versatile markup language that is used to
publish information as a Web page.
Provides tags that help in creating Web pages.
Allows the creation of hyperlinks to connect the
Web pages.
HTML is used to create Web pages using software
applications known as editors.
HTML editors are broadly classified into the
following categories:
Text editor
Graphic editor
Text Editor
A text editor is an application in which
the HTML code is written for
creating a Web page.
Notepad and EditPlus are examples of
text editors.
The HTML code written inside a text
editor is saved with the .htm or .html
extension.
Graphic Editor

A graphic editor enables you to embed an


HTML element into a Web page by
using the drag-and-drop functionality.
Dreamweaver is an example of a graphic
editor.
Identifying the Basic Structure of an HTML Page
An HTML document is created by using
various tags and their attributes.
Tags are markup codes enclosed in angular
brackets.
The following HTML tags are referred to as
structural tags as they create the
structure of an HTML document:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<BODY>
Exploring the <HEAD> Tag

The <HEAD> tag:


Is contained within the <HTML> and </HTML> tags.
Is used to define the header of the HTML document.
Can include the following tags:

<STYLE>
<BASE> <LINK>

<META> <SCRIPT>

<TITLE> <HEAD> <NOSCRIPT>


<!DOCTYPE html>
<html>
<head> <title>...</title> </head>
<body>
<header>...</header>
<p> <section> ... </section> </p>
<br>
<b>
<h1>…….</h1>
</body>
</html>

12
Exploring the <HEAD> Tag (Contd.)

The <TITLE> tag:


Defines the title of the document.
Can appear only once in the HTML document.
For example:
<HEAD>
<TITLE> Book Your Hotel</TITLE>
</HEAD>
The output of the preceding code snippet is displayed, as shown in the following figure.
Exploring the <HEAD> Tag (Contd.)

The <META> tag:


Provides additional information about the current document in the form of name and
value pairs.
For example:
<META name="description" content="This website provides you the
benefit of booking rooms in the best hotels of US">
<META name="keywords" content="hotel, online, booking">
<META name="author" content="Harry Anem">
<META http-equiv="refresh" content="30">
Exploring the <HEAD> Tag (Contd.)

The <BASE> tag:


Specifies a base URL or address for all the related links on a page.
For example:
<HTML>
<HEAD>
<TITLE> The BASE Tag Example</TITLE>
<BASE href="d:/Images/"></BASE>
</HEAD>
<BODY>
<IMG src="img1.jpg"/>
<BR>
Best Hotels
</BODY>
</HTML>
Exploring the <HEAD> Tag (Contd.)

The <STYLE> tag:


Defines the style information associated with the HTML document.
Has the following attributes:

handheld

Attribute media type

screen
Value text/css

projection
Description
Specifies that the Specifies the type
CSS styles are of the style sheet.
tv
defined for which
device or media.
Exploring the <HEAD> Tag (Contd.)

The <LINK> tag:


Is used to establish the relationship of the current document with other documents in a
website.
Has the following attributes:

• Establishes a link from the current


rel document to the external document.

• Specifies the name or the URL of the


href linked document.

hreflang •Specifies the language of the text used in the


linked document.

•Specifies the device on which the linked


media document will be displayed.
Exploring the <HEAD> Tag (Contd.)

The <SCRIPT> tag:


Specifies the client-side script, such as JavaScript, associated with the document.
Has the following attributes:

defer
charset src

async <SCRIPT> type

The <NOSCRIPT> tag displays an alternate content on the browsers on which the
scripts have been disabled.
Exploring the <BODY> Tag
The body section:
Is the central part of the HTML
document required to display content
on the Web page.
Begins with the <BODY> tag.
Contains the actual visible content of
an HTML document.
Exploring the <BODY> Tag (Contd.)

The heading tags:


Are used to define the headings that specify the main idea of the content.
Range from <H1> to <H5>.
The paragraphs are added in an HTML document using the following tags:

<P> <DETAILS> <SUMMARY>


Exploring the <BODY> Tag (Contd.)

The layout:
Specifies how various elements or content should be displayed on the Web page.
Is defined by using the following tags:

<DIV> <SPAN>
Exploring the <BODY> Tag (Contd.)

The content of a Web page can be formatted by using the following tags:

<B> <I> <U>

<LI> <BR>

<HR>
Exploring the <BODY> Tag (Contd.)

Images are added to a Web page:


To add an artistic value.
To enhance its visual appeal.
In the following formats:

G
JPE

GIF

G
PN
Exploring the <BODY> Tag (Contd.)

Using the <IMG> tag that has the following attributes:

• Is used to specify an alternate text


alt for an image.

height and • Is used to specify the size in which


width the image should be displayed.

• Is used to specify the URL of the


src image.
Exploring the <BODY> Tag (Contd.)

Navigation links are added:


To navigate between the Web pages.
By using the <A> tag that has the following attributes:

• Specifies the URL of the


href document that opens on
clicking the hyperlink.

• Is used to open the HTML


target document in a specified
frame or window.
Exploring the <BODY> Tag (Contd.)

The multimedia components are added:


To embed audio and video in the website.
To improve the visual effect of the website.
By using the following tags:

<AUDIO> • Is used to include an audio file in a Web page.

<VIDEO> • Is used to display a video file on a Web page.


Exploring the <BODY> Tag (Contd.)

Measuring data and displaying a progress bar:

Sandy is downloading a file Saving it in his system


from a website
Exploring the <BODY> Tag (Contd.)

Disk space left

While saving the file,


Sandy wants to view
the information about
Level of task
completed

These tasks can be done by using the following tags:

<METER> <PROGRESS>
Summary

In this session, you learned that:


HTML is a markup language that enables you to create attractive and interactive
websites.
Web pages are either static or dynamic.
An HTML page contains the following structural tags:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<BODY>
The following tags are used in the <HEAD> section of an HTML document:
<TITLE>
<META>
<BASE>
<STYLE>
<LINK>
<SCRIPT>
<NOSCRIPT>
You can use the following tags to add new paragraphs in an HTML document:
<P>
<DETAILS>
<SUMMARY>
Summary (Contd.)

To define a layout, you can use the following tags:


<DIV>
<SPAN>
The following formatting tags are used to format the content in an HTML document:
<B>
<I>
<U>
<LI>
<BR>
<HR>
You can use the <IMG> tag to insert images in a website.
You can add multimedia elements in a Web page by using the following tags:
<AUDIO>
<VIDEO>
The <METER> tag specifies a scalar measurement within a known range.
The <PROGRESS> tag is used to display the progress of a task.

You might also like