What Is HTML????

What is HTML?
HTML is a language for creating Web pages. We create web pages by

creating html document using HTML markup tags. HTML stands for
HyperText Markup Language. HTML is a markup language, which has a
collection of markup tags.
What are Tags?
HTML tags are words surrounded by angle brackets like <html>, <body>. The
tags normally come in pairs, like <html> and </html>.
The first tag in a pair is the start tag; the second tag is the end tag. In the
example above <html> is the start tag while </html> is the end tag.
We can also refer start tags as opening tags and call end tags closing tags.
Create HTML Documents
HTML documents are text files containing html tags. HTML tags in HTML
documents mark up Web pages.
Save the following to a text file named index.htm, and drag and drop it to a
browser.
<!DOCTYPE HTML>
<html>
<body>
<h1>My Heading</h1>
<p>My paragraph</p>
</body>
</html>
Click to view the demo
o/p-
This is a regular paragraph
The HTML document starts with <!DOCTYPE HTML>. <!DOCTYPE HTML>
tells the browser this is a html document.
The content between <html> and </html> marks the Web
page. <body> and </body>makrs the visible page content. <h1> and </h1> is uses
to define a heading. <p> and</p> creates a paragraph
HTML Element Syntax
HTML elements follow a certain format. An HTML element starts with a start
tag and ends with an end tag. The element content is between the start tag
and the end tag.
The following shows a paragraph tag p.
<p>This is a paragraph.</p>
Empty HTML tags
HTML elements can have empty content. HTML tags without content are
called empty elements. Empty elements can be closed within the start tag. For
example,
<p></p>
Empty elements can be closed in the start tag as follows.
<p/>
Nested Elements
Most HTML elements can be nested. Nesting is to contain other HTML
elements.
<html>
<body>
</body>
</html>
In the html document above <html> tag contains <body> tag. And we can
say body tag is nested inside html tag.
Lowercase Tags
HTML tags are not case sensitive. <P> means the same as <p>.
HTML Attributes
In this chapter you will learn:
1. What are HTML Attributes
2. Defining Attribute Values
Use HTML Attributes
Attributes provide additional information about HTML elements. Attributes are
always specified in the start tag.
Attributes are defined by name/value pairs like: name="value".
Defining Attribute Values
Attribute values should always be enclosed within quotation marks. We can
use " or '.
The double quotes and single quotes must come in pair.
name="value"
and
name='value'
are the same.
While
name="value'
are not allowed.
However we can use single quote to contain double quote.
name='This is a "test".'
or use double quote to include single quote
name="This is a 'test'."

HTML Core Attributes
There are attributes which are supported by all HTML elements.
Attribute Value Description
class class name The element class
id id value A unique id for the element
style style definition Style definition
title tooltip text A text to display in a tool tip
Attribute names are not case sensitive.
Language Attributes
ATTRIBUTE VALUE DESCRIPTION
dir ltr or rtl Sets the text direction
lang language_code Sets the language code
Keyboard Attributes
ATTRIBUTE VALUE DESCRIPTION
accesskey character Sets a keyboard shortcut to access an element
tabindex number Sets the tab order of an element

HTML Comments
Comments are useful information about the HTML elements. Comments
makes the HTML document more readable and understandable.
Comments are ignored by the browser and are not displayed. Comments start
with . There is an exclamation mark after the opening
bracket, but not before the closing bracket.

The content between >!-- and --< is comments. The browser will just ignore it.
The following html document has a comment.
<!DOCTYPE HTML>
<html>
<body>

<p>This is a regular paragraph</p>
</body>
</html>

Use HTML Heading tags
<h1> to <h6> tags mark the headings for HTML document. <h1> marks the
largest headings size and <h6> creates smallest headings.
H1 headings should be used as main headings.
<!DOCTYPE HTML>
<html>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 3</h4>
<h5>Heading 3</h5>
<h6>Heading 3</h6>
</body>
</html>
o/p-Heading 1
Heading 2
Heading 3
Heading 3
Heading 3
Heading 3

<h1> to <h6> should be used as HTML headings only. Don't use headings to
make text big or bold.
Browsers automatically add an empty line before and after headings.
Create HTML Paragraphs
HTML documents are divided into paragraphs. HTML paragraphs are defined
by the<p> tag. The p element represents a paragraph. Browsers put a line
break and space after a </p> tag.
<!DOCTYPE HTML>
<html>
<body>
</body>
</html>
o/p
This is a paragraph.
HTML Rules (Lines)
1. How to create HTML Rules (Lines)
Create HTML Rules (Lines)
The <hr/> tag creates a horizontal rule (line) across the browser page. Rules
are often used to separate sections of a document.
<!DOCTYPE HTML>
<html>
<body>
<p>The hr tag defines a horizontal rule:</p>
<hr/>
<p>This is a paragraph</p>
<hr/>
<hr/>
</body>
</html>
o/p-
The hr tag defines a horizontal rule:

This is a paragraph

This is a paragraph

This is a paragraph
HTML Line Breaks
<br /> adds a line break without starting a new paragraph.
The <br /> element is an empty HTML element. It has no end tag.
<!DOCTYPE HTML>
<html>
<body>
<p>This is<br />a paragraph<br /> with line breaks.</p>
<p>This is a paragraph without line breaks.</p>
</body>
</html>
o/p-
This is
a paragraph
with line breaks.
This is a paragraph without line breaks.
Next
11/363
Previous
Preformatted Text
1. How to create Preformatted Text
2. How to use pre tag to wrap program code
Use Preformatted Text
<pre> tag is the pre-formatted tag.
The line breaks, spaces, and character widths within the <pre> tag are
preserved by browser.
The line breaks, spaces, and character widths within the <p> tag are not
preserved by browser.
<!DOCTYPE HTML>
<html>
<body>
<pre>
This is
preformatted text.
It preserves both spaces
and line breaks and shows the text in a monospace font.
</pre>
<p>
This is not
preformatted text.
It does NOT preserve the spaces and line breaks.
</p>
</body>
</html>
o/p-

This is
preformatted text.
It preserves both spaces
and line breaks and shows the text in a monospace font.
This is not preformatted text. It does NOT preserve the spaces and line breaks.

pre and code
The pre element can be useful when you use it with the code element.
<!DOCTYPE HTML> 
<html>
<head>
<title>Example</title>
</head>
<body>
<pre>
<code>
var items = ["A", "B", "C", "D"];
for (var i = 0; i < items.length; i++) {
document.writeln("I like " + items[i]);
}
</code>
</pre>
</body>
</html>
o/p-

var items = ["A", "B", "C", "D"];
for (var i = 0; i < items.length; i++) {
document.writeln("I like " + items[i]);
}

Quotations
1. How to create Long Quotations
2. How to create Short Quotations
Long Quotations
<blockquote> marks the long quote. The browser inserts line breaks and
margins for ablockquote element.
<!DOCTYPE HTML>
<html>
<body>
A blockquote quotation:
<blockquote>
This is a long quotation. This is a long quotation. This is
a long quotation. This is a long quotation. This is a long
quotation.
</blockquote>
</body>
</html>
o/p-
A blockquote quotation:
This is a long quotation. This is a long quotation. This is a long quotation. This is a
long quotation. This is a long quotation.

Short Quotations
<q> creates a short quote.
<!DOCTYPE HTML>
<html>
<body>
<q>This is a short quotation.</q>
</body>
</html>
o/p-
This is a short quotation. This is a short quotation. This is a short quotation.

Deleted Text
< marks a text that is deleted (strikethrough) in a document.
<!DOCTYPE HTML>
<html>
<body>
<p>
<del>deleted</del>
</p>
</body>
</html>
o/p-
deleted
Inserted Text
<ins> marks a text which is inserted (underscore) in a document.
<!DOCTYPE HTML>
<html>
<body>
<p>
<ins>inserted</ins>
</p>
</body>
</html>
o/p-
inserted
Abbreviations and Acronyms
<acronym> marks text as acronyms and <abbr> is for abbreviations.
This example shows you how to handle an abbreviation or an acronym.
<!DOCTYPE HTML>
<html>
<body>
<abbr title="United Nations">UN</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>
</body>
</html>
o/p-
UN
WWW
The title attribute shows the tooltips when hovering over the acronym or
abbreviation.

What Is HTML????

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

What Is HTML????

Diunggah oleh

Hak Cipta:

Format Tersedia

What is HTML?

HTML is a language for creating Web pages. We create web pages by

Anda mungkin juga menyukai