Introduction to html

COMPUTER APPLICATIONS
CLASS X (Code 165)
TOPIC:
UNIT 2: Introduction to HTML
By
HIMANSHU PATHAK

Contents
• Introduction
• Building blocks of HTML
• Basic Structure of HTML
• <HEAD> tag attributes
• <Body> tag attributes
• HTML Text Editors

Introduction
• HTML stands for HyperText Markup Language.
• HyperText simply means "Text within Text." A
text has a link within it, is a hypertext.
• Markup means to structure it in a specific
format.
• So, HTML is called hypertext markup language
because it is a language that allows users to
organize, improve the appearance of, and link
text with data on the internet.

Cont…
• HTML was invented in November 1990 by a
scientist called Tim Berners Lee.
• The purpose was to make it easier for scientists at
different universities to gain access to each
other’s research documents.
• HTML is a format that tells a computer how to
display a web page.
• It consists of different elements which we use to
structure a web page.

Building Blocks of HTML
• Tags: A tag tells the browser to perform an action
as asked by the special word. It is written
between < and > brackets.
• HTML tags are like keywords which defines that
how web browser will format and display the
content.
• When a web browser reads an HTML document,
browser reads it from top to bottom and left to
right.
<p> This is paragraph Tag </p>

Cont…
• Attribute: The features of a tag are defined by an
attribute, and it is applied within the start tag.
• An HTML attribute contains two fields: name &
value.
• The Attributes name and values are case sensitive,
and it is recommended by W3C that it should be
written in Lowercase only.
• We can add multiple attributes in one HTML
element, but need to give space between two
attributes.
• Syntax–
<tagname attribute_name= " attr_value"> content </ tagname>

Cont…
• Elements: An HTML element is defined by a start
tag, some content, and an end tag (Container Tag).
<p> This is paragraph Tag </p>
• Everything inside the opening and closing tags is the content.
But not all elements follow this pattern.
• They only consist of a single tag or an opening tag that
cannot have any content. Example –
<img src=“him.jpg" width="50“ />
• HTML elements with no content are called empty elements.
<br> Tag: br stands for break line.

Tags Vs Elements Vs Attributes
TAGS ELEMENTS ATTRIBUTES
HTML tags are used to hold
the HTML element.
HTML element holds the
content.
HTML attributes are used to
describe the characteristic of
an HTML element in detail.
HTML tags are almost like
keywords.
HTML elements specifies the
general content.
HTML attributes specify
various additional properties
to the existing HTML
element.

Basic Structure
• <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>My first paragraph.</p>
</body>
</html>

Cont…
• The <!DOCTYPE html> declaration defines that this
document is an HTML5 document
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the
HTML page
• The <title> element specifies a title for the HTML page
(which is shown in the browser's title bar or in the page's
tab)
• The <body> element defines the document's body, and is
a container for all the visible contents, such as headings,
paragraphs, images, hyperlinks, tables, lists, etc.

<HEAD> Tag Attributes
• The <title> tag defines the title of a web page
(required).
• The <style> tag contains CSS code.
• The <link> tag contains a link to an external style
sheet. It can have two attributes : rel =
"stylesheet" and href.
• The <meta> tag provides additional information
(metadata) about HTML document.
• The <script> tag contains a script (generally
JavaScript).
• The <noscript> tag defines an alternate text, which
is displayed, if the browser doesn’t support scripts.

<BODY> Tag Attributes
• background: It contains the URL of the background image.
It is used to set the background image.
<body background="URL">
• bgcolor: It is used to specify the background color of an
image.
<body bgcolor =“Value”>
– Attribute Values:
• color_name: It sets the background color by using the color
name. For example “red”.
• hex_number: It sets the background color by using the
color hex code. For example “#0000ff”.
• rgb_number: It sets the background color by using the RGB
code. For example: “RGB(0, 153, 0)” .

Cont…
• alink: It is used to specify the color of the active
link.
<body alink="color_name|hex_number|rgb_number">
• link: It is used to specify the color of visited links.
<body link="color_name | hex_number | rgb_number">
• text: It specifies the color of the text in a
document.
<body text="color_name | hex_number | rgb_number">
• vlink: It specifies the color of visited links.
<body vlink="color_name | hex_number | rgb_number">

HTML Text Editors
• An HTML file is a text file, so to create an HTML file we can
use any text editors.
• After learning the basics, you can easily use other
professional text editors which are, Notepad++, Sublime
Text, Vim, etc.
• Note: You can execute HTML file in any browser, but there
are some tags which are not supported by Some Web
browser.
• HTML Code with Notepad:
– Open Notepad (Windows)
– Write code in HTML
– Save the HTML file with .htm or .html extension.
– Open the HTML page in your web browser.

Today we learn
• Basics of HTML
• In the next class, we will start Unit II – HTML
Tags in detail.
•Thanks

Introduction to html

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Introduction to html

Similaire à Introduction to html (20)

Plus de Himanshu Pathak

Plus de Himanshu Pathak (17)

Dernier

Dernier (20)

Introduction to html