,
,Introduction To HTML
Introduction To HTML
Introduction To HTML
AN INTRODUCTION
TO WEB PAGE
PROGRAMMING
INTRODUCTION TO HTML
• With HTML you can create your own Web site.
• HTML stands for Hyper Text Markup Language.
• HTML is derived from a language SGML (Standard
Graphics Markup Language).
• The future of HTML is XML (eXtended Markup
Language).
• 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.
• HTML is not case sensitive language.
• HTML documents contain HTML tags and plain text.
HTML Elements and Tags
• A tag is always enclosed in angle bracket
<>like <HTML>
• HTML tags normally come in pairs like
<HTML> and </HTML> i.e.
Start tag = <HTML>
End tag =</HTML>
• Start and end tags are also called opening
tags and closing tags.
HOW TO START
• Write html code in notepad.
• Save the file with (.Html)/(.Htm) extension.
Container Element:->
Container Tags contains both start tag
(opening tag) & end tag (closing tag) i.e.
<HTML>… </HTML>, <BODY>……</BODY>,
<FONT>……..</FONT> etc.
Empty Element:->
Empty Tags contains only start tag i.e.
<BR>, <HR>, <img>
Line BreakTag
The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a
new paragraph.
The <br> tag is an empty tag, which means that it has no end
tag.
CODE
<p>This is<br>a paragraph<br>with line breaks.</p>
Horizontal Line Tag
The <hr> tag defines a thematic break in an HTML page, and is
most often displayed as a horizontal rule.
The <hr> element is used to separate content (or define a
change) in an HTML page
CODE
<h1>This is heading 1</h1>
<p>This is paragraph 1.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is paragraph 2.</p>
<hr>
PRE Element
The HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a fixed-width
font (usually Courier), and it preserves both spaces and line
breaks
CODE
<pre>
Element defines preformatted text.
Element defines preformatted text.
Element defines preformatted text.
Element defines preformatted text.
</pre>
Text Formatting Tags
Heading Element:->
• There are six heading elements
(<H1>,<H2>,<H3>,<H4>, <H5>,<H6>).
• All the six heading elements are container
tag and requires a closing tag.
• <h1> will print the largest heading
• <h6> will print the smallest heading
Heading Tag Code
<html>
<head><title>heading</title></head>
<body>
<h1> SHRI SATHYA SAI VIDHYA VIHAR </h1>
<h2> SHRI SATHYA SAI VIDHYA VIHAR </h2>
<h3> SHRI SATHYA SAI VIDHYA VIHAR </h3>
<h4> SHRI SATHYA SAI VIDHYA VIHAR </h4>
<h5> SHRI SATHYA SAI VIDHYA VIHAR </h5>
<h6> SHRI SATHYA SAI VIDHYA VIHAR </h6>
</body>
</html>
Result of Heading Code
Font Tag
• This element is used to format the size,
typeface and color of the enclosed text.
• The commonly used fonts for web pages
are Arial, Comic Sans MS , Lucida Sans
Unicode, Arial Black, Courier New, Times
New Roman, Arial Narrow, Impact,
Verdana.
• The size attribute in font tag takes values
from 1 to 7.
Font Tag Code
<html>
<head><title> fonts</title></head>
<body>
<br><font color=“green" size="7" face="Arial"> SHRI SATHYA
SAI VIDHYA VIHAR, INDORE </font>
<br><font color=“green" size="6" face="Comic Sans MS ">
SHRI SATHYA SAI VIDHYA VIHAR, INDORE </font>
<br><font color=“green" size="5" face="Lucida Sans Unicode">
SHRI SATHYA SAI VIDHYA VIHAR, INDORE </font>
<br><font color=“green" size="4" face="Courier New"> SHRI
SATHYA SAI VIDHYA VIHAR, INDORE </font>
<br><font color=“green" size="3" face="Times New Roman">
SHRI SATHYA SAI VIDHYA VIHAR</font>
<br><font color=“green" size="2" face="Arial Black"> SHRI
SATHYA SAI VIDHYA VIHAR, INDORE </font>
<br><font color=“green" size="1" face="Impact"> SHRI SATHYA
SAI VIDHYA VIHAR, INDORE </font>
</body>
</html>
Result of Font Code
HTML Paragraph Tag
• HTML documents are divided into paragraphs.
• Paragraphs are defined with the <p> tag i.e.
<p>This is a paragraph</p>
<p>This is another paragraph</p>
Text Alignment with P Tag
• Attributes Parameters
align left, right, center
• It is use to alignment of the text.
– Left alignment <P align=“left”>…..</P>
– Right alignment <P align=“right”>….</P>
– Center alignment <P align=“center”>….</P>
Text Formatting Tags
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines
<sup> subscripted text
<tt> Defines superscripted text
<u> Defines teletype text
<strike> Defines underline text
Defines strike text
Text Formatting Code
<html>
<head></head>
<body>
<b>This text is Bold</b>
<br><em>This text is Emphasized</em>
<br><i>This text is Italic</i>
<br><small>This text is Small</small>
<br>This is<sub> Subscript</sub> and
<sup>Superscript</sup>
<br><strong>This text is Strong</strong>
<br><big>This text is Big</big>
<br><u>This text is Underline</u>
<br><strike>This text is Strike</strike>
<br><tt>This text is Teletype</tt>
</body>
</html>
Result of Text Formatting
Code
Background & Text Color Tag
• The attribute bgcolor is used for changing the back ground
color of the page.
<body bgcolor=“Green” >
• Text is use to change the color of the enclosed text.
<body text=“White”>
Hyperlink Tag
• A hyperlink is a reference (an address) to a
resource on the web.
• Hyperlinks can point to any resource on the web:
an HTML page, an image, a sound file, a movie,
etc.
• The HTML anchor element <a>, is used to
define both hyperlinks and anchors.
<a href="url">Link text</a>
• The href attribute defines the link address.
<a href="http://www.sathyasaiindore.com">Visit
Shri Sathya Sai Vidhya Vihar indore</a>
Result of Hyperlink Code
Image Tag
• To display an image on a page, you need to
use the src attribute.
• src stands for "source". The value of the src
attribute is the URL of the image you want to
display on your page.
• It is a empty tag.
<IMG SRC ="url">
<IMG SRC="picture.gif“>
<IMG SRC="picture.gif“ HEIGHT="30"
WIDTH="50">
Image attributes - <img> tag
<img> Defines an image
<Src> display an image on a page,Src stands
for "source".
<Alt>
Define "alternate text" for an image
<Width> Defines the width of the image
<Height> Defines the height of the image
<Border> Defines border of the image
<Hspace> Horizontal space of the image
<Vspace> Vertical space of the image
<Align> Align an image within the text
<background> Add a background image to an HTML
page
Code & Result of the Image
<html><body>
<p><img
src="file:///C:/WINDOWS/Zapotec.bmp"
align="left" width="48" height="48"> </p>
<p><img src
="file:///C:/WINDOWS/Zapotec.bmp"
align="right" width="48" height="48"></p>
</body></html>
<HTML>
<<body
background="file:///C:/WINDOWS/Soap
%20Bubbles.bmp" text="white">
<br><br><br>
<h2> Background Image!</h2>
</BODY></HTML>
Code & Result of the Image
<html><body>
<p>An image
<img src="file:///C:/WINDOWS/Zapotec.bmp"
align="bottom" width="48" height="48"> in the text</p>
<p>An image
<img src ="file:///C:/WINDOWS/Zapotec.bmp"
align="middle" width="48" height="48"> in the text</p>
<p>An image
<img src ="file:///C:/WINDOWS/Zapotec.bmp"
align="top" width="48" height="48"> in the text</p>
<p>Note that bottom alignment is the default
alignment</p>
<p><img src ="file:///C:/WINDOWS/Zapotec.bmp"
width="48" height="48">
An image before the text</p>
<p>An image after the text
<img src ="file:///C:/WINDOWS/Zapotec.bmp"
width="48" height="48"> </p>
</body></html>
Code & Result of the Image
<html><body>
<p><img src="file:///C:/WINDOWS/Zapotec.bmp"
align="bottom" width="20" height="20"> </p>
<p><img src ="file:///C:/WINDOWS/Zapotec.bmp"
align="middle" width="40" height="40"></p>
<p><img src ="file:///C:/WINDOWS/Zapotec.bmp"
align="top" width="60" height="60"></p>
<p><img src ="file:///C:/WINDOWS/Zapotec.bmp"
width="80" height="80"> </p>
<p><img src ="file:///C:/WINDOWS/Zapotec.bmp"
width="100" height="100"> </p>
</body></html>
HTML List Tag
• Lists provide methods to show item or element
sequences in document content. There are
three main types of lists:->
– Unordered lists:-unordered lists are bulleted.
– Ordered lists:- Ordered lists are numbered.
– Definition lists:- Used to create a definition
list
.
List Tags
<LI> <LI> is an empty tag,it is used for
representing the list items
<OL> Ordered list
<UL> Unordered list
<DL> Defines a definition list
<DT> Defines a term (an item) in a definition
list
<DD>
Defines a description of a term in a
definition list
Unordered List
• TYPE attribute to the <UL> tag to show
different bullets like:-
– Disc
– Circle
– Square