Scribd
Upload
176 views45 pages

Introduction To HTML

This document provides an introduction to HTML and webpage programming using HTML. It discusses that HTML stands for Hypertext Markup Language and is used to create web pages. It is not a programming language, but rather a markup language that uses tags to describe web pages. The document then covers key HTML elements and tags like <html>, <head>, <title>, <body>, and provides examples of how to use various text formatting, list, image, and hyperlink tags.

Uploaded by

geetanjali
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
176 views45 pages

Introduction To HTML

This document provides an introduction to HTML and webpage programming using HTML. It discusses that HTML stands for Hypertext Markup Language and is used to create web pages. It is not a programming language, but rather a markup language that uses tags to describe web pages. The document then covers key HTML elements and tags like <html>, <head>, <title>, <body>, and provides examples of how to use various text formatting, list, image, and hyperlink tags.

Uploaded by

geetanjali
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 45

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.

• View the page in any web browser viz.


INTERNET EXPLORER,
NETSCAPE, GOOGLE CHROME,
MOZILLA FIREFOX, NAVIGATOR
etc.

• The purpose of a web browser (like internet


explorer or firefox) is to read html documents and
display them as web pages.
Code With HTML
<HTML>
<HEAD>
<TITLE>
MY FIRST PAGE
</TITLE>
</HEAD>
<BODY>
GLOBAL INFORMATION CHANNEL
</BODY>
</HTML>
Explain these tags

• <HTML> - Describe HTML web page that is


to be viewed by a web browser.
• <HEAD> - This defines the header section
of the page.
• <TITLE> - This shows a caption in the title
bar of the page.
• <BODY> - This tag show contents of the
web page will be displayed.
Types of HTML Tags
There are two different types of tags:->

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

<ul Type =“disc”>…..</ul>


• The attribute TYPE can also be used
with
<LI> element.
Code & Result of the
Unordered List
<html><body>
<h4>Disc bullets list:</h4>
<ul type="disc"> <li>Jones</li>
<li>Smith</li>
<li>Hayes</li>
<li>Jackson</li></ul>
<h4>Circle bullets list:</h4>
<ul type="circle"> <li>Jones</li>
<li>Simth</li>
<li>Hayes</li>
<li>Jackson</li></ul>
<h4>Square bullets list:</h4>
<ul type="square"> <li>Jones</li>
<li>Smith</li>
<li>Hayes</li>
<li>Jackson</li></ul>
</body></html>
Ordered List
• The TYPE attribute has the following value like:-
– TYPE = "1" (Arabic numbers)
– TYPE = "a" (Lowercase alphanumeric)
– TYPE = "A" (Uppercase alphanumeric)
– TYPE = "i" (Lowercase Roman numbers)
– TYPE = "I" (Uppercase Roman numbers)
• By default Arabic numbers are used
List
<html><body>
<h4>Numbered list:</h4>
<ol> <li>Jones</li>
<li>Smith</li>
<li>Hayes</li>
<li>Jackson</li></ol>
<h4>Letters list:</h4>
<ol type="A"> <li>Jones</li>
<li>Smith</li>
<li>Hayes</li>
<li>Jackson</li></ol>
<h4>Roman numbers list:</h4>
<ol type="I"> <li>Jones</li>
<li>Smith</li>
<li>Hayes</li>
<li>Jackson</li></ol>
</body></html>
HTML Table Tag
<table> used to create table
<tr> table is divided into rows
<td> each row is divided into data cells
<th> Headings in a table
<Caption> caption to the table
<colgroup>
Defines groups of table columns
<col>
Defines the attribute values for one or
<thead> more columns in a table
<tbody> Defines a table head
<tfoot> Defines a table body
<Cellspacing> Defines a table footer
<Cellpadding> amount of space
<Colspan> between table cells.
<rowspan> space around the edges of each cell
<Border> No of column working with will span
No of rows working with will span
attribute takes a number
Code & Result of the Table
<html>
<body>
<h3>Table without
border</h3>
<table>
<tr>
<td>MILK</td>
<td>TEA</td>
<td>COFFEE</td
> </tr>
<tr> <td>400</td>
<td>500</td>
<td>600</td> </tr>
</table>
</body>
</html>
Header
<html><body>
<h4>Horizontal Header:</h4>
<table border="1">
<tr> <th>Name</th>
<th>Loan No</th>
<th>Amount</th> </tr>
<tr> <td>Jones</td>
<td>L-1</td>
<td>5000</td></tr> </table><br><br>
<h4>Vertical Header:</h4>
<table border="5">
<tr> <th>Name</th>
<td>Jones</td> </tr>
<tr> <th>Loan No</th>
<td>L-1</td> </tr>
<tr> <th>Amount</th>
<td>5000</td></tr> </table>
</body></html>
Table Code with Colspan
Rowspan
& <html><body>
<h4>Cell that spans two columns:</h4>
<table border="4">
<tr> <th>Name</th>
<th colspan="2">Loan No</th> </tr>
<tr> <td>Jones</td>
<td>L-1</td>
<td>L-2</td> </tr> </table>
<h4>Cell that spans two rows:</h4>
<table border="8">
<tr> <th>Name</th>
<td>Jones</td></tr><tr>
<th rowspan="2">Loan No</th>
<td>L-1</td></tr><tr>
<td>L-2</td></tr></table>
</body></html>
Table Code with Caption &
ColSpacing
<html>
<body>
<table border="1">
<caption>My Caption</caption>
<tr>
<td>Milk</td>
<td>Tea</td>
</tr>
<tr>
<td></td>
<td>Coffee</td>
</tr>
</table>
</body>
</html>
Cellpadding,Image &
Backcolor
<html><body>
Code
<h3>Without cellpadding:</h3>
<table border="2" bgcolor="green">
<tr> <td>Jones</td>
<td>Smith</td></tr>
<tr> <td>Hayes</td>
<td>Jackson</td></tr></table>
<h4>With cellpadding:</h4>
<table border="8"
cellpadding="10" background="file:///C:/WINDOWS/
FeatherTexture.bmp">
<tr> <td>Jones</td>
<td>Smith</td></tr>
<tr> <td>Hayes</td>
<td>Jackson</td></tr></table>
</body></html>
HTML Form
• A form is an area that can contain form
elements.
• Form elements are elements that allow the
user to enter information in a form. like
text
fields, textarea fields, drop-down menus,
radio buttons and checkboxes etc
• A form is defined with the <form> tag.
• The syntax:-
<form>
.
input elements
.
</form>
<form>
Form Tags
Defines a form for user input
<input> used to create an input field
<text> Creates a single line text
<textarea> entry field
Defines a text-area (a multi-line text input control)
<password>

<label> Creates a single line text entry field. And the


<option> characters entered are shown as asterisks (*)
<select> Defines a label to a control
Creates a Radio Button.
Defines a selectable list (a drop-down box)
<button> Defines a push button
<value> attribute of the option element.
<checkbox> select or unselect a checkbox
<dropdown box> A drop-down box is a
selectable list
Code of the HTML Form
<html><body><form>
<h1>Create a Internet Mail Account</h1>
<p>First Name <input type="text" name="T1" size="30"></p>
<p>Last Name <input type="text" name="T2" size="30"></p>
<p>Desired Login Name <input type="text" name="T3" size="20">
@mail.com</p>
<p>Password <input type="password" name="T4" size="20"></p>
<input type="radio" checked="checked" name="sex" value="male" />
Male</br>
<input type="radio" name="sex" value="female" /> Female
<p>Birthday <input type="text" name="T6" size="05">
<select size="1" name="D2">
<option>-Select One-</option>
<option>January</option>
<option>February</option>
<option>March</option> </select>
<input type="text" name="T7" size="10"></p>
TypeYourself<textarea rows="4" name="S1" cols="20"></textarea>
<br><input type="submit" value="Accept" name="B1"> <input
type="reset“ value="Cancel" name="B2"></br> </form></body></html>
Result of the Form Code

You might also like