WE Lecture 2

INTRODUCTION TO HTML
Lecture 2
HTML
 Stands for Hyper Text Markup Language
 With HTML you can create your own websites.
 HTML is derived from a language SGML(Standard
Graphic Markup Language)
 HTML is a markup language.
 A Markup Language is a set of markup tags.
 HTML uses markup tags to describe web pages.
 HTML is not case sensitive language.
Tags In HTML
 HTML tags are keywords (tag names) surrounded
by angle brackets< >
 <tagname> content </tagname>
 HTML tags normally come in pairs
 <p> and </p>
 Start Tag= First Tag-----also called opening tag.
 End tag = Second tag----also called closing tag.
 The end tag is written like the start tag, but with a
slash before the tag name
HTML Elements
 HTML documents are made up by 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:
 <p>My first HTML paragraph.</p>
 Some HTML elements do not have an end tag.
 E.g. <br> tag has no element
How To Start
 Write HTML code in Notepad(Editor).
 Save the file with .htm or .html extension.
 View the page in any web browser
Format in HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title> Can appear only in head section
</head>
<body>
</body>
</html>
HTML Document Basics
 All HTML documents must start with a type
declaration: <!DOCTYPE html>.
 The visible part of the HTML document is between
<body> and </body>.
<!DOCTYPE> Declaration
 HTML5
 <!DOCTYPE html>
 HTML 4.01
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Description Of Tags
 The DOCTYPE declaration defines the document type to be HTML.
 To display a document correctly, the browser must know both type
and version.
 The <!DOCTYPE> declaration helps the browser to display a web
page correctly.
 The text between <html> and </html> describes an HTML
document
 The text between <head> and </head> provides information
about the document
 The text between <title> and </title> provides a title for the
document
 The text between <body> and </body> describes the visible page
content
Tiltle
HTML Paragraph Tag
 HTML documents can be divided into paragraphs.
 HTML paragraphs are defined with the <p> tag
 Usually start and end tag is used<P> and </P>
 But </P> is optional
 Paragraph tag does not print break lines.
 Use <BR> for blank line
Paragraph Tag
<!DOCTYPE html>
<html>
<head>
<title>Responsive Layout</title>
</head>
<body>
<p>
This is a paragraph .We are learning HTML Tags
</p>.
</body>
</html>
Paragraph Tag
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p> This is a paragraph .We are learning HTML Tags .
It is the second line.
It is the third line.
</p>.
</body>
</html>
Paragraph
Heading Tag
 HTML headings are defined with the <h1> to
<h6> tags:
 All the six headings require the closing tag.
 <H1> this is h1 </H1> -- largest of the six
 <H2> this is h2 </H2>
 <H3> this is h3 </H3>
 <H4> this is h4</H4>
 <H5> this is h5 </H5>
 <H6> this is h6 </H6> -- smallest of the six

Heading Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<H1> this is heading 1 </H1>
<H2> this is heading2 </H2>
<H4> this is heading4</H4>
</body>
</html>
Line Break
 Adds break line.
 Self closing tag
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>
This is a paragraph .We are learning HTML Tags
<br>
It is second line. </p>.
</body>
</html>
Horizontal Line Tag
 <hr> tag is used to add horizontal line.
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“
HTML Styles
 Every HTML element has a default style
(background color is white and text color is black).
 Changing the default style of an HTML element, can
be done with the style attribute.
 The HTML style attribute has the following syntax:
 <body style="background-color:lightgrey">
Example of Style Attribute
<!DOCTYPE html>
<html>
<head>
<title>Responsive Layout</title> </head>
<body style="background-color:yellow">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
HTML Text Color
The color property defines the text color to be used for
an HTML element.
<body style="background-color:yellow">
<h1 style="color:blue">This is a heading1</h1>
<hr>
<h2 style="color:red">This is a heading2</h2> <hr>
</body>
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 to be
used 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>
Anchor Tag /Hyperlink Tag
 <a> is used to define a hyperlink.
 <a href="www.google.com"><b>This is a
link</b>
 </a>
 <p>This is a paragraph.</p>
Text Formatting Tags
 <b> Defines bold Text
 <em>Define emphasized text
 <i>Define italic text
 <small>Defines small text
 <strong>Defines strong text
 <mark>Defines marked or highlighted text
 <del>Defines deleted text
 <sub>Defines subscripted text
Text Formatting Tags
 <h2> <b>This is a bold text.</b></h2>
 <h2><i>This is italic text<i></h2>
 <h2>x<sub>2</sub><sup>3</sup>

WE Lecture 2

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WE Lecture 2

Uploaded by

Copyright:

Available Formats

INTRODUCTION TO HTML

 HTML documents are made up by HTML elements.

 <H3> this is h3 </H3>

 <H4> this is h4</H4>

 <H5> this is h5 </H5>

 <H6> this is h6 </H6> -- smallest of the six

You might also like