HTML 9

Introduction to HTML
HTML is based on Standard Generalised Markup Language (SGML),

which is the mother of all markup languages. HTML is a simple text
formatting language used to create hypertext documents for the WWW.
These hypertext documents (called web pages) can be viewed with
the help of a web browser.
HTML was developed in November 1990 by Tim Berner-Lee.
What is Hypertext?
A hypertext is a text which when clicked takes the reader to a

different location in the same document or to a different document
which may be located on a different server.
What is HTML?
HTML is a language for describing web pages.
 HTML stands for Hyper Text Markup Language

 HTML is a markup language
 A markup language is a set of markup tags
 The tags describe document content
 HTML documents contain HTML tags and plain text
 HTML documents are also called web pages.
What are HTML Tags?
HTML markup tags are usually called HTML tags.
 HTML tags are keywords (tag names) surrounded by angle

brackets like <html>
 HTML tags normally come in pairs like <p> and </p>
 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 slash before the
tag name
 Start and end tags are also called opening tags and closing tags
<tagname>content</tagname>
Some important things about HTML
1. HTML is not a case sensitive language.
2. Spaces and tabs can be used anywhere in the document

because it does not affect the appearance of the document.
3. The HTML document is saved with the file extension .HTM

or .HTML
4. The HTML document is written in text editors like Notepad or

Wordpad.
Structure of a HTML Document

HTML <body> Tag
Definition and Usage
The <body> tag defines the document's body.
The element contains all the contents of an HTML document, such as

text, hyperlinks, images, tables, lists, etc.
HTML Headings
Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least
important heading.
<html>
<body>
<h1>This is heading 1</h1>
</body>
</html>
HTML  Comment Tag
The comment tag is used to insert comments in the source code.

Comments are not displayed in the browsers.
HTML <font> Tag

The tag specifies the font face, font size, and color of text.
<font face="verdana" color="green" size="2">This is some text!</font>

HTML Paragraphs
Browsers automatically add an empty line before and after a
paragraph.
<html>
<body>
<p>This is a paragraph.</p>
</body>
</html>
HTML Line Breaks
Use the <br> tag if you want a line break (a new line) without starting
a new paragraph:
Example
<p>This is<br>a para<br>graph with line breaks</p>

The <br> tag is an empty tag which means that it has no end tag.
HR Tag:-
the <hr> tag may still be displayed as a horizontal rule in visual
browsers. In HTML, the <hr> tag has no end tag.
<html>
<body>
<HR NOSHADE ALIGN=”CENTER”|”LEFT”|”RIGHT” SIZE=”THICKNESS”
WIDTH=”width” COLOR=”COLOR OF THE LINE”>
ALIGN:- It specifies the horizontal alignment of the line. Default value

is center.
NOSHADE:- This attribute produces a solid black line that has no

shading. It does not take any value.
SIZE:- It indicates the thickness of the line, in pixels. The default size
is 2 pixels. As we increase the value of the size attribute, the line will
become thicker and thicker.
WIDTH:- It defines the horizontal width of the line, which means the
length of the line. The default is the width of the page. The
measurement value can be a number of pixels, e.g. “5”, or a
percentage of the page width, e.g. “60%”.
HTML Images - The <img> Tag and the Src Attribute
In HTML, images are defined with the <img> tag.
The tag is empty, which means that it contains attributes only,

and has no closing tag.
To display an image on a page, we need to use the src attribute. Src

stands for "source". The value of the src attribute is the URL of the
image that we want to display.
Syntax for defining an image:
<img src="url" alt="some_text">
HTML Images - Set Height and Width of an Image
The height and width attributes are used to specify the height and
width of an image.
The attribute values are specified in pixels by default:
<img src="smiley.gif" alt="Smiley face" width="42" height="42">
HTML Hyperlinks (Links)
The HTML <a> tag defines a hyperlink.
A hyperlink (or link) is a word, group of words, or image that you can
click on to jump to another document.
<a href="http://www.yahoo.com">Click here to open yahoo</a>
HTML <b> Tag
The tag specifies bold text.
Example
<p>This is normal text - <b>and this is bold text</b>.</p>

HTML <i> Tag
The content of the tag is usually displayed in italic.
Example
<p>He named his car <i>The lightning</i>, because it was very

fast.</p>
HTML <u> Tag
The content of the tag is usually displayed in Underline.
Example
Underline a word with the tag:
<p>This is a <u>parragraph</u>.</p>
HTML <center> Tag.
The <center> tag is used to center-align text.
Example
Center-align text in an HTML page:
<center>This text will be center-aligned.</center>
HTML Lists
The most common HTML lists are ordered and unordered lists:
HTML Lists
An ordered list: An unordered list:

1. The first list item  List item
2. The second list item  List item
3. The third list item  List item
HTML Unordered Lists
An unordered list starts with the <ul> tag. Each list item starts with
the <li> tag.
The list items are marked with bullets (typically small black circles).
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
How the HTML code above looks in a browser:
 Coffee
 Milk
HTML Ordered Lists
An ordered list starts with the <ol> tag. Each list item starts with the
<li> tag.
The list items are marked with numbers.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
How the HTML code above looks in a browser:
1. Coffee
2. Milk
HTML DL, DT, DD Tag
Using HTML dl, dt, dd tags for listing the data. First we have
the dl (definition list) tag to hold the whole set of data, next we
have dt (defines the item in the list) tag and dd (describes the item in
the list) tag to hold the title and the data.
<dl>
<dt>Name: </dt>
<dd>John Don</dd>
<dt>Age: </dt>
<dd>23</dd>
<dt>Gender: </dt>
<dd>Male</dd>
<dt>Day of Birth:</dt>
<dd>12th May 1986</dd>
</dl>
How to embed sound in HTML
<html>
<body>
<object height="50" width="100" data="hum.mp3"></object>
<embed height="50" width="100" src="hum.mp3">
</body>
</html>

HTML 9

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

HTML 9

Transféré par

Droits d'auteur :

Formats disponibles

Introduction to HTML

HTML is based on Standard Generalised Markup Language (SGML),

HTML was developed in November 1990 by Tim Berner-Lee.

A hypertext is a text which when clicked takes the reader to a

HTML is a language for describing web pages.

 HTML stands for Hyper Text Markup Language

 A markup language is a set of markup tags

 The tags describe document content

 HTML documents contain HTML tags and plain text

 HTML documents are also called web pages.

What are HTML Tags?

HTML markup tags are usually called HTML tags.

 HTML tags are keywords (tag names) surrounded by angle

Some important things about HTML

1. HTML is not a case sensitive language.

2. Spaces and tabs can be used anywhere in the document

3. The HTML document is saved with the file extension .HTM

4. The HTML document is written in text editors like Notepad or

Structure of a HTML Document

Definition and Usage

The <body> tag defines the document's body.

The element contains all the contents of an HTML document, such as

Headings are defined with the <h1> to <h6> tags.

HTML  Comment Tag

Definition and Usage

The comment tag is used to insert comments in the source code.

HTML <font> Tag

<font face="verdana" color="green" size="2">This is some text!</font>

<p>This is<br>a para<br>graph with line breaks</p>

ALIGN:- It specifies the horizontal alignment of the line. Default value

NOSHADE:- This attribute produces a solid black line that has no

In HTML, images are defined with the <img> tag.

The tag is empty, which means that it contains attributes only,

To display an image on a page, we need to use the src attribute. Src

Syntax for defining an image:

<img src="url" alt="some_text">

HTML Images - Set Height and Width of an Image

The attribute values are specified in pixels by default:

<img src="smiley.gif" alt="Smiley face" width="42" height="42">

HTML Hyperlinks (Links)

The HTML <a> tag defines a hyperlink.

<a href="http://www.yahoo.com">Click here to open yahoo</a>

HTML <b> Tag

Definition and Usage

The tag specifies bold text.

<p>This is normal text - <b>and this is bold text</b>.</p>

Definition and Usage

The content of the tag is usually displayed in italic.

<p>He named his car <i>The lightning</i>, because it was very

HTML <u> Tag

Definition and Usage

The content of the tag is usually displayed in Underline.

Underline a word with the tag:

HTML <center> Tag.

Definition and Usage

The <center> tag is used to center-align text.

Center-align text in an HTML page:

<center>This text will be center-aligned.</center>

An ordered list: An unordered list:

3. The third list item  List item

HTML Unordered Lists

How the HTML code above looks in a browser:

HTML Ordered Lists