Scribd
Upload
29 views

HTML 1

Uploaded by

mail.adnanhabib
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
29 views

HTML 1

Uploaded by

mail.adnanhabib
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

HTML Tutorial

HTML stands for Hyper Text Markup Language, which is the most widely
used language on Web to develop web pages. HTML was created by
Berners-Lee in late 1991 but "HTML 2.0" was the first standard HTML
specification which was published in 199. HTML 4.01 was a major version
of HTML and it was published in late 1999. Though HTML 4.01 version is
widely used but currently we are having HTML-5 version which is an
extension to HTML 4.01, and this version was published in 2012.

Why to Learn HTML?


Originally, HTML was developed with the intent of defining the structure of
documents like headings, paragraphs, lists, and so forth to facilitate the
sharing of scientific information between researchers. Now, HTML is being
widely used to format web pages with the help of different tags available in
HTML language.

Create Web site - You can create a website or customize an existing


web template if you know HTML well.
Become a web designer - If you want to start a carer as a professional
web designer, HTML and CSS designing is a must skill.
Understand web - If you want to optimize your website, to boost its
speed and performance, it is good to know HTML to yield best
results.

Learn other languages - Once you understands the basic of HTML


other like javascript, php,
then related technologies
become easier to understand.
or angular are

Applications of HTML
one of the most widely used language over
As mentioned before, HTML is
the web. I'm going to list few of them here:
. W e b pages development - HTML is used to create pages which are
rendered over the web. Almost every page of web is having html tags
in it to render its details in browser.
Internet Navigation - HTML provides tags which are used to

navigate from one page to another and is heavily used in internet


navigation.
Responsive UI - HTML pages now-a-days works well on all platform,
mobile, tabs, desktop or laptops owing to responsive design strategy.

Ofline support HTML pages once loaded can be made available


offline on the machine without any need of internet.
Game development- HTML5 has native support for rich experience
and is now useful in gaming developent arena as well.

HTML Tags

<IDOCTYPE...>
This tag defines the document type and HTML version.

2 <html>
This tag encloses the complete HTML document and mainly comprises
of document header which is represented by <head>...</head>
and
document body which is represented by <body>...s/body> tags.

3 <head
This tag represents the document's header which can keep other HTML
tags like <title>, <link> etc.

4 stitle>
The <title> tag is used inside the <head> tag to mention the document
title.

5 body>
This tag represents the document's body which keeps other HTML tags
like <hl>, <div>, <p> etc.

6 <h1>
This tag represents the heading.

7 p>
This tag represents a paragraph.

Heading Tags
Any document starts with a heading. You can use different sizes for your
headings. HTML also has six levels of headings, which use the elements
<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying any heading,
browser adds one line before and one line after that heading.

Paragraph Tag
The <p> tag offers a way to structure your text into different paragraphs.
Each paragraph oftext should go in between an opening <p> anda closing
/p> tag.

Line Break Tag


Whenever you use the <br /> element, anything following it starts from the
next line. This tag is an example of an empty element, where you do not
need opening and closing tags, as there is nothing to go in between them.

Centering Content
You can use <center> tag to put any content in the center of the page or any
table cell.
Horizontal Lines
Horizontal lines are used to visually break-up sections of a document. The
hr> tag creates a line from the current position in the document to the right
margin and breaks the line accordingly.
Again <hr /> tag is an example of the empty element, where you do not
need opening and closing tags, as there is nothing to go in between them.

Preserve Formatting8
Sometimes, you want your text to follow the exact format of how it is
written in the HTML document. In these cases, you can use the
preformatted tag <pre>
Any text between the opening <pre> tag and the closing </pre> tag will
preserve the formatting of the source document.

HTML - Elements
An HTML element is defined by a starting tag. If the element contains other
content, it ends with a closing tag, where the element name is preceded by a
forward slash as shown below with few tags

Start Tag Content End Tag


This is paragraph content. /p>
<h1> This is heading content. </h1>
<div This is division content. </div>
br/>

So here <p>....</p> is an HTML element, <hl>..</h1> is another


HTML element. There are some HTML elements which don't need to be
closed, such as <img.. />, <hr /> and <br /> elements. These are known as
void elements.

HTML Attributes
An attribute is used to define the characteristics of an HTML element
and is placed inside the element's opening tag. All attributes are made
up o f two parts - a name and a value

The name is the property you want to set. For example, the paragraph
<p> element in the example carries an attribute whose name is align,
which you can use to indicate the alignment of paragraph on the page.
The value is what you want the value of the property to be set and
always put within quotations. The below example shows three possible
values of align attribute: left, center and right.
Attribute names and attribute values are case-insensitive. However, the
World Wide Web Consortium (W3C) recommends lowercase
attributes/attribute values in their HTML 4 recommendation.

Example
Live Denmo
<IDOCTYPE html>
<html>

<head>

<title> Align Attribute Example</title>


</head
<body>
sp align= "left">This is left aligned</p>
<p align = "center">This is center aligned</p>

sp align "right">This is right aligned</p>


</body>

</html>
This will display the following result-

This is left aligned

This is center aligned

This is right aligned

Core Attributes
The four core attributes that can beused on the majority of HTML elements
(although not all) are
Id

Title
Class

Style

The Id Attribute
The id attribute of an HTML tag can be used to uniquely identify any element
within an HTML page. There are two primary reasons that you might want to
use an id attribute on an element-

. I f an element carries an id attribute as a unique identifier, it is possible


to identify just that element and its content.
If you have two elements of the same name within a Web page (or
style sheet), you can use the id attribute to distinguish between
elements that have the same name.

The title Attribute


The title attribute gives a suggested title for the element. They syntax for the
title attribute is similar as explained for id attribute-
The behavior of this attribute will depend upon the element that carries it,
although it is often displayed as a tooltip when cursor comes over the
element or while the element is loading.

The class Attribute


The class attribute is used to associate an element with a style sheet, and
specifies the class of element. You will learn more about the use of the class
attribute when you will learn Cascading Style Sheet (CSS). So for now you
can avoid it.

The style Attribute


The style attribute allows you to specify Cascading Style Sheet (CSS) rules
within the element.

Internationalization Attributes
There are three internationalization attributes, which are available for most
(although not all) XHTML elements.

dir
.lang
xml:lang

The dir Attribute


The dir attribute allows you to indicate to the browser about the direction in
which the text should flow. The dir attribute can take one of two values, as
you can see in the table that follows-

Value Meaning
Itr Left to right (the default value)

rtl Right to left (for languages such as Hebrew or Arabic that


are read right to l
The lang Attribute
The lang attribute allows you to indicate the main language used in a
document, but this attribute was kept in HTML only for backwards
compatibility with earlier versions of HTML. This attribute has been
replaced by the xml:lang attribute in new XHTML documents.

HTML-Formatting
Ifyou use a word processor, you must be familiar with the ability to
make text bold, italicized, or underlined; these are just three of the ten
options available to indicate how text can appear in HTML and
XHTML.

Bold Text
Anything that appears within <b>..</b> element, is displayed

<! DOCTY PE html>


<html>

<head>
<title>Bo ld Text Example</title>
</ head>

<body>
<p>The foll owing word uses a <b>bold</b> typeface.</p>
</body>

</html
This will produce the following result-

The following word uses a bold.


Italic Text
Anything that appears within <i>...</i> element is displayed in italicized

Underlined Text
Anything that appears within <u>... </u> element, is displayed with underline.

Strike Text
Anything that appears within <strike>...</strike> element is displayed
with strikethrough, which is a thin line through the text.

Monospaced Font
The content of a <tt>...</tt> element is written in monospaced font.
Most of the fonts are known as variable-width fonts because different
letters are of different widths (for example, the letter 'm' is wider than
the letter i). In a monospaced font, however, each letter has the same
width.

Superscript Text
The content of a <sup>...</sup> element is written in superscript; the
font size used is the same size as the characters surrounding it but is
displayed halfa character's height above the other characters.

Deleted Text
Anything that appears within <del>...</del> element, is displayed as
deleted text.

Grouping Content
The <div> and <span> elements allow you to group together several
elements to create sections or subsections of a page.
For example, you might want to put all of the footnotes on a page within a
div> element to indicate that all of the elements within that <div>

You might also like