HTML

HTML
HYPERTEXT MARKUP
LANGUAGE
OUTLINE
INTRODUCTION
HTML BASICS
HTML ATTRIBUTES
HTML TEXT FORMATTING
HTML STYLE ATTRIBUTE
INTRODUCTION
HTML stands for HyperText Markup Language, it is
the authoring language used to create documents on
the World Wide Web.
HTML is used to define the structure and layout of a
Web page, how a page looks and any special
functions. HTML does this by using what are called
Tags that have Attributes

INTRODUCTION
Tim Berners-Lee was the
primary author of html,
assisted by his
colleagues at CERN, an
international scientific
organization based in
Geneva,
Switzerland(1989).
HTML VERSIONS
Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
WEB BROWSERS
The purpose of a web browser
(Chrome, IE, Firefox, Safari) is to read
HTML documents and display them.
The browser does not display the
HTML Tags, but uses them to determine
how to display the document
<!DOCTYPE html>
<html>
<body>
<h1>My First
Heading</h1>
<p>My first
paragraph.</p>
</body>
</html>
HTML EDITORS
HTML can be edited by using
professional HTML editors like
Adobe Dreamweaver
Microsoft WebMatrix
Sublime Text
Microsoft Notepad
HTML BASICS
HTML TAGS
HTML tags are keywords (tag names) surrounded
by angle brackets:
<tagname>content</tagname>
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, but with
a forward slash before the tag name
<!DOCTYPE html>
HTML DOCUMENTS <html>
 All HTML documents must start <body>
with a type declaration:
<!DOCTYPE html> <h1>My First
Heading</h1>
 The HTML document itself
begins with <html> and ends
<p>My first
with </html>
paragraph.</p>
 The visible part of the HTML
document is between </body>
<body> and </body> </html>
THE HTML <head>
ELEMENT
 The <head> element is a
container for metadata (data
<!DOCTYPE html>
<html>
about data). <head>
 HTML metadata is data about <title>My First Web
the HTML document. Metadata Page</title>
is not displayed. </head>
 Metadata typically define <body>
document title, styles, links, Hello Class!!!
scripts, and other meta </body>
information. </html>
 The following tags describe
metadata: <title>, <style>,
<meta>, <link>, <script>, and
<base>.
HTML HEADINGS
HTML headings <h1>This is a
heading</h1>
are defined with <h2>This is a
the <h1> to <h heading</h2>
6> tags <h3>This is a
heading</h3>
<h4>This is a
heading</h4>
HTML PARAGRAPHS
HTML paragraphs are defined with
the <p> tag
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML <br> TAG
The <br> tag inserts a single line
break.
The <br> tag is an empty tag which
means that it has no end tag
This text contains<br>a line
break.
HTML LINKS
HTML links are defined with the <a> tag
<a href="https://www.google.com.pk/?
gws_rd=cr,ssl&ei=izeVVp7fFcGqsAHr4LqoAw">Google</a>
The link's destination is specified in the href

attribute
HTML IMAGES
HTML images are defined with
the <img> tag.
The source file (src) is provided
as attributes
<img src=“image1">
HTML <ul> TAG
The <ul> tag defines an <ul>
unordered (bulleted) list. <li>Coffee</li>
Use the <ul> tag <li>Tea</li>
together with
<li>Milk</li>
the <li> tag to create
</ul>
unordered lists.
HTML <ol> TAG
The <ol> tag defines an <ol>
ordered list. An ordered <li>Coffee<
list can be numerical or /li>
alphabetical. <li>Tea</li
>
Use the <li> tag to <li>Milk</li
define list items. >
</ol>
HTML <table> TAG
The <table> tag defines an <table>
<tr>
HTML table. <td>Month</td>
<td>Savings</td
An HTML table consists of the
>
<table> element and one or </tr>
more <tr> and <td> elements. <tr>
<td>January</td
The <tr> element defines a >
<td>$100</td>
table row and the <td> element
</tr>
defines a table cell. </table>
HTML  TAG
The comment tag is used to insert comments in the
source code. Comments are not displayed in the
browsers.
You can use comments to explain your code, which
can help you when you edit the source code at a
later date.
• 
HTML ELEMENTS
HTML elements are written with a start tag, with an end tag, with
the content in between:
<tagname>content</tagname>
The HTML element is everything from the start tag to the end tag
Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>

Some Other Useful HTML Character
Entities
Result Description Entity Name
non-breaking space
< less than <

> greater than >
& ampersand &
¢ cent ¢
£ pound £
¥ yen ¥
€ euro €
© copyright ©
® registered trademark ®
HTML
ATTRIBUTES
HTML ATTRIBUTES
HTML elements can have attributes
Attributes provide additional
information about an element
Attributes are always specified in the start
tag
Attributes come in name/value pairs
like: name="value"
THE lang ATTRIBUTE
The document language can be <!DOCTYPE html>
<html lang="en-US">
declared in the <html> tag. <body>
The language is declared in <h1>My First

Heading</h1>
the lang attribute. <p>My first paragraph.</p>
Declaring a language is important </body>

for accessibility applications </html>
(screen readers) and search

engines
THE title (Tool-TIP)
defined with
ATTRIBUTE
HTML paragraphs are
<!DOCTYPE html>
<html>
<body>
<h1>About P.U.C.I.T</h1>
the <p> tag. <p title="About P.U.C.I.T">

Located in the heart of Lahore, neighboring the
The <p> element has buzzing Anarkali Bazar and the Mall Road, PUCIT is the
largest institution of higher learning in Pakistan in
a title attribute. The Computer Science, Information Technology, and
Software Engineering.
value of the attribute is </p>
" P.U.C.I.T " </body>

</html>
THE href ATTRIBUTE
HTML links are defined with
the <a> tag. The link address is
specified in the href attribute
<a href="https://www.google.com.pk/?
gws_rd=cr,ssl&ei=izeVVp7fFcGqsAHr4LqoAw">Google</a>
size ATTRIBUTES
HTML images are defined with
the <img> tag.
The source file (src), and size
(width and height) are provided
<img src=“image1.gif" width="104" height="142">
as attributes
The image size is specified in pixels:
width="104" means 104 screen pixels
wide
THE alt ATTRIBUTE
The alt attribute specifies an alternative
text to be used, when an HTML element
cannot be displayed
<img src=“imagei.gif" alt=“Tim Berners-
Lee" width="150" height="150">
SINGLE OR DOUBLE
QUOTES?
Double style quotes are the most common in HTML,
but single style can also be used.
In some situations, when the attribute value itself
contains double quotes, it is necessary to use single
quotes
<p title='John "ShotGun" Nelson'>
<p title="John 'ShotGun' Nelson">

SUMMARY OF ATTRIBUTES
All HTML elements can
have attributes
The HTML title attribute provides
additional "tool-tip" information
The HTML href attribute provides
address information for links
SUMMARY OF ATTRIBUTES
The HTML width and height attributes
provide size information for images
The HTML alt attribute provides text for
screen readers
You should always quote attributes with
double quotes
HTML TEXT
FORMATTING
HTML TEXT
FORMATTING
Bold text Small text
Important text Subscripts
Italic text Superscripts
Emphasized text
Marked text
HTML PARAGRAPHS
<p>
This poem Twinkle, twinkle, little star,
• How I wonder what you are!
will display • Up above the world so high,
• Like a diamond in the sky.
as one line </p>
THE HTML <pre> TAG
The HTML <pre> element <pre>
defines preformatted text. Twinkle, twinkle, little star,
The text inside a <pre> How I wonder what you are!
element is displayed in a Up above the world so high,

fixed-width font (usually Like a diamond in the sky.
Courier), and it preserves </pre>
both spaces and line breaks
HTML BOLD AND STRONG FORMAT
TING
The HTML <b> element <b>This text is bold</b>
defines bold text, without
any extra importance
The
HTML <strong> element
defines strong text, with <strong>This text is
added semantic "strong" strong</strong>
importance
HTML ITALIC AND EMPHASIZED FOR
MATTING
The HTML <i> element
<i>This text is italic</i>
defines italic text,
without any extra
importance
The
HTML <em> element <em>This text is
emphasized</em>
defines emphasized text
, with added semantic
importance
HTML SMALL
FORMATTING
The HTML <small> element
defines small text
<h1>HTML <small>Small</small> Formatting
</h1>
MARKE
HTML
DFORMATTING
The HTML <mark> element
defines marked or highlighted text
<h1>HTML <mark>Marked</mark> Formatting</h1>
HTML SUBSCRIPT FORMAT
TING
The HTML <sub> element
defines subscripted text
<p>H<sub>2</sub>O</p>
HTML SUPERSCRIPT
FORMAT
TING
The HTML <sup> element
defines superscripted text
<p>x<sup>2</sup></p>
HTML STYLE
ATTRIBUTE
HTML STYLE
ATTRIBUTE
Setting the style of an HTML element, can
be done with the style attribute.
The HTML style attribute has the
following syntax:
style="property:value;"
HTML BACKGROUND
COLOR
The background-color property defines
the background color for an HTML element
<body style="background-
color:lightgrey;">
<h1>This is a heading</h1>
</body>
HTML TEXT COLOR
The color property defines the
text color for an HTML element
<h1 style="color:blue;">This is a
heading</h1>
<p style="color:red;">This is a
paragraph.</p>
HTML FONTS
The font-family property defines the
font to be used for an HTML element
• <h1 style="font-family:verdana;">This is a
heading</h1>
<p style="font-family:courier;">This is a
paragraph.</p>
HTML TEXT SIZE
The font-size property defines
the text size for an HTML element
<h1 style="font-size:300%;">This is a
heading</h1>
<p style="font-size:160%;">This is a
paragraph.</p>
HTML TEXT
ALIGNMENT
The text-align property defines the
horizontal text alignment for an HTML
element
<h1 style="text-align:center;">Centered
Heading</h1>
left, center and right
THE END

HTML

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

HTML

Caricato da

Copyright:

Formati disponibili

HTML

Tags that have Attributes

The link's destination is specified in the href

Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

< less than <

The language is declared in <h1>My First

Declaring a language is important </body>

(screen readers) and search

the <p> tag. <p title="About P.U.C.I.T">

" P.U.C.I.T " </body>

<p title="John 'ShotGun' Nelson">

The text inside a <pre> How I wonder what you are!

element is displayed in a Up above the world so high,

Potrebbero piacerti anche

HTML

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

HTML

Caricato da

Copyright:

Formati disponibili

HTML

Tags that have Attributes

The link's destination is specified in the href

Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

< less than &lt;

The language is declared in <h1>My First

Declaring a language is important </body>

(screen readers) and search

the <p> tag. <p title="About P.U.C.I.T">

" P.U.C.I.T " </body>

<p title="John 'ShotGun' Nelson">

The text inside a <pre> How I wonder what you are!

element is displayed in a Up above the world so high,

Potrebbero piacerti anche

< less than <