INTRODUCTION TO HTML
1
Agenda
Introduction to HTML
Basic Document Structure
HTML Basic Tags
HTML Elements
Attributes
HTML Text Formatting
2
Introduction to HTML
HTML was created by Berners-Lee in late 1991
but "HTML 2" was the first standard HTML
specification which was published in 1995.
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
2014.
3
What is HTML?
HTML stands for “Hyper Text Markup
Language”.
Hyper Text is the method by which you move
around on the web by clicking on special text
called hyperlinks which bring you to the next
page.
HTML is not a programming language, it is a
markup language.
A markup language is a set of markup tags.
HTML uses markup tags to describe web pages.
4
Basic Document Structure
5
HTML Tags
HTML is a markup language and makes use of
various tags to format the content. These tags
are enclosed within angle braces <Tag Name>.
Except few tags, most of the tags have their
corresponding closing tags. For example <html>
has its closing tag </html> and <body> tag has
its closing tag </body> tag etc.
6
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration tag is used by the web
browser to understand the version of the HTML used in
the document. Current version of HTML is 5 and it
makes use of the following declaration:
<!DOCTYPE html>
7
Head Structure
Page Title
Scripting
Style
META information
8
HTML Basic Tags
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.
9
HTML Basic Tags
Paragraph Tag
The <p> tag offers a way to structure your text
into different paragraphs. Each paragraph of text
should go in between an opening <p> and a
closing </p> tag.
<p>Here is a paragraph</p>
10
HTML Basic Tags
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.
The <br /> tag has a space between the characters
br and the forward slash. If you omit this space,
older browsers will have trouble rendering the line
break.
11
HTML Basic Tags
Centering Content
You can use <center> tag to put any content in
the center of the page or any table cell.
<center>
<p>This text is in the center.</p>
</center>
12
HTML Basic Tags
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.
Preserve Formatting
Sometimes you want your text to follow the
exact format of how it is written in the HTML
document. In those cases, you can use the
preformatted tag <pre>.
13
HTML Elements
14
HTML Tag vs. Element
An HTML element is defined by a starting tag. If
the element contains other content, it ends with
a closing tag.
For example <p> is starting tag of a paragraph
and </p> is closing tag of the same paragraph
but <p>This is paragraph</p> is a paragraph
element.
15
Attributes
16
Attributes
Attributes go after the element name in the
opening tag only , never in the end tag.
There maybe several attributes applied to an
element, separated by spaces in the opening tag
Their order is not important.
Attributes take values, which follow an equal
sign (=). A value might be a number, a string of
text , a URL, or a measurement depending on
the purpose of the attribute.
17
Cont’d
Always put values within quotation marks .
Although quotation marks are not required
around all values in HTML , they are required in
XHTML.
Some attributes are required , such as src and
alt attributes in image element.
18
Core Attributes
The four core attributes that can be used on the
majority of HTML elements (although not all )
are:
id
title
class
style
19
Generic Attributes
20
HTML Formatting
If you 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 in bold as shown below:
<p>word uses a <b>bold</b> typeface.</p>
21
HTML Formatting
Italic Text
Anything that appears within <i>...</i> element
is displayed in italicized as shown below:
<p>word uses a <i>italicized</i> typeface.</p>
Underlined Text
Anything that appears within <u>...</u> element,
is displayed with underline as shown below:
<p>word uses a <u>underlined</u> typeface.</p>
22
HTML Formatting
Strike Text
Anything that appears within <strike>...</strike>
element is displayed with strikethrough, which is
a thin line through the text as shown below:
<p>word uses a <strike>strikethrough</strike> typeface.</p>
23
HTML Formatting
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 half a character's height above the
other characters.
<p>x<sup>2</sup></p>
24
HTML Formatting
Subscript Text
The content of a <sub>...</sub> element is
written in subscript; the font size used is the
same as the characters surrounding it, but is
displayed half a character's height beneath the
other characters.
<p>x<sub>2</sub></p>
25
HTML Formatting
Larger Text
The content of the <big>...</big> element is
displayed one font size larger than the rest of the
text surrounding it as shown below:
<p>word uses a <big>big</big> typeface.</p>
Smaller Text
The content of the <small>...</small> element
is displayed one font size smaller than the rest of
the text
<p>word uses a <small>small</small> typeface.</p>
26
27