HTML Presentation

Hypertext Markup
Language
(HTML)
HTML
HTML is the standard language
that the Web uses for creating
and recognizing documents.
HTML is a markup language

that is used to create an HTML
document. The instructions
specify how a Web page
should be displayed in a
browser.
HTML
Use of HTML tags and elements
1.control the appearance of the page and
the content.
2. publish online documents and retrieve

online information using the links
inserted in the HTML document.
3.Create on-line forms. These forms can
be used to collect information about
the user, conduct transactions, and so
on.
4.Insert objects audio-clips, video clips,
ActiveX components, java applets in
the HTML document.
Growth of the Web

Depends on
Hypertext the ability to
link to other documents
Hypermedia the ability
to include text, audio,
video, images and
Designing A Web Site

A web site is a collection of web pages
and related files and folders stored on a
Webserver.Thefirstpageofthewebsite
iscalledthehomepageorindexpage.
The home page gives an overview of the
informationthatwecansearchforonthe
website.
When developing a web site, we go
throughthedesignphase.
HTML Tags
The HTML commands are called TAGS.
The TAGS are used to control the
content and appearance of the HTML
document.Theopeningtagisapairof
brackets <>. This indicates the
beginning of the HTML command. The
closing tag is represented as </>
to indicate the end of the HTML
command.
HTML Tags
The HTML tag is used to mark the
beginning and end of an HTML
document.
<HTML>

</HTML>
The tags are not case (upper/ lower)
sensitive.
The HTML tag is comprised of :

<ELEMENT ATTRIBUTE = VALUE>
Elementidentifiesthetag.
Attributedescribesthetag.
Valueisthecontentthatis
assignedtotheattribute.
Example
<BODY BGCOLOR =WHITE>
HTML Rules and Guidelines

The following are some rules to remember
when writing HTML :
HTML
documents
have
a
well-defined
structure. HTML elements should occur only
within others. List items (<LI>) should be the
only items that directly nest within unordered
list elements defined by <UL>.
EXAMPLE
<UL>
<LI> </LI>
</UL>
HTML Rules and Guidelines

Elements names are not case-sensitive.
EXAMPLE
An element such as <hTml> is equivalent
to <html> or <HTML>.
Attribute names arent case-sensitive.
EXAMPLE
<HR NOSHADE> is equivalent to <HR
noshade> or <HR NoShade>.
Attributevaluesmaycasesensitive.
EXAMPLE
Thefilenamein
<IMGSRC=filename.gif>is
notthesameasthefilename
in<IMGSRC=FILENAME.GIF>
Attributevaluesshouldbequoted.
Attributevaluesmaycontainspacesor
otherspecialcharactersifitisenclosedby
quotes.
EXAMPLE
ThefollowingvalueALTattributeofthe
<IMG>tagcontainsspacesandtherefore
requirequotes:
<IMG SRC =univ.gif ALT =University of Dhaka>
Elementnamescannotcontainspaces.
EXAMPLE
INCORRECT
CORRECT
<BODY>
<BODY>
Browsers treat the first space

encountered inside an element as
the end of an elements name and
thebeginningofitsattributes.
Browsers ignore space characters in HTML

content
Space characters convey no formatting

information, unless they occur inside a special
preformatting element, such as <PRE>, which
preservestheirmeaning.
EXAMPLE
<PRE>
UNIVERSITY
OF
DHAKA
</PRE>
Elements should nest. Any

element that starts within
another element must also
end within that element.
EXAMPLE
INCORRECT
<B><I>Not correct</B></I>
<B><I>Correct</I></B>
CORRECT
The <HTML> Element

The <HTML> element delimits the
beginning and the end of an HTML
document. It contains only the
<HEAD> element and the <BODY>
element. The <HTML> is a container
for all other elements. The <HEAD>
elementisoptional.
The <HEAD> Element

The <HEAD> element encloses a document
section that contains identification and
supplementary
information
about
the
document.
The
elements
allowed
<HEAD>elementincludes
within
the
<TITLE>. The <TITLE> element must

alwaysoccur.
The <BODY>Element
The body of a document is defined by
<BODY> and</BODY>tag.
Only one <BODY>element can appear per
document.
Commonattributesforthe<BODY>element:
TEXTfortextcolor
BGCOLORforbackgroundcolor
LINKforunvisitedlinkcolor
BASIC ELEMENTS OF HTML

<html>
<head><title>Title of page</title>
</head>
<body>
This is my first homepage.
</body>
</html>
EFFEC
How To Use Line Break Tags

<html>
<body>
To break<br>lines<br>in a<br>paragraph,<br>use the br tag.
</body>
</html>
EFFEC
How To Bold, Italic, Underline Some Text

<html>
<body>
<b> This is bold </b>
<BR>
<i> This is Italic </i>
<BR>
<u> This is Underline</u>
<BR>
</body>
</html>
EFFEC
How To Use Headings (Default Font Size)

<html>
<body>
<h1>This is heading 1</h1>
<p>
Use heading tags only for
headings. Don't use them
just to make something bold.
Use other tags for that.
</p>
</body>
</html>
EFFEC
<html>
<body>
How To Align Text (Left / Right / Center)
<h1 align="center">This is the center align example </h1>

<h2 align="left"> This is the left align example </h2>
<p align="right"> This is the right align example </p>
</body>
</html>
Note: Align Not Use Single You Must Use (H1 / H2 / H3 / H4 / H5 / H6 Or P)
EFFEC
<html>
<body>
How To Use Font Color, Size, And Face
<font size="20" color="RED" face="Arial">

Department of Management Information Systems (MIS). </font>
</body>
</html>
<br><br><br>
<html>
<body>
<font size="20" color="#0000ff" face="Arial">

Department of Management Information Systems (MIS). </font>
</body>
</html>
EFFEC
How To Use Background Color

<html>
<body bgcolor="yellow">
Department Of Management Information System (MIS)
</body>
</html>
Or
<html>
<body bgcolor="#0000ff">
Department Of Management Information Systems (MIS)
</body>
</html>
EFFEC
How To Use Background Image / Picture.
<HTML>
<BODY BACKGROUND="final1.BMP">
<P ALIGN="CENTER"><FONT SIZE="15"
COLOR="RED">MANAGEMENT INFORMATION SYSTEM
(MIS)</FONT></P><BR><BR>
<BR>
<P ALIGN="CENTER"><FONT SIZE="6"
COLOR="RED">THIS IS THE EXAMPLE OF BACKGROUND
IMAGE/PICTURE.</FONT></P>
</BODY>
</HTML>
EFFEC
How to Insert Image / Picture

<HTML>
<BODY>
<P ALIGN="CENTER"><FONT SIZE="10" COLOR="RED">MANAGEMENT INFORMATION
SYSTEM (MIS)</FONT></P><BR>
<P ALIGN="CENTER"><FONT SIZE="6" COLOR="BLUE">THIS IS THE EXAMPLE OF
IMAGE/PICTURE.</FONT></P>
<P ALIGN="CENTER"><IMG SRC="WINTER.JPG" BORDER="2" HEIGHT="150"
WIDTH="130">
<IMG SRC="WATER.JPG" BORDER="2" HEIGHT="150" WIDTH="130">
<IMG SRC="1000.BMP" BORDER="2" HEIGHT="150" WIDTH="130">
<IMG SRC="1200.BMP" BORDER="2" HEIGHT="150" WIDTH="130"> </P>
</BODY>
</HTML>
Note : Image / Picture format must be gif / jpg / bmp

Image file and HTML file must be keep same folder.
EFFEC
How to insert Video File

<HTML>
<BODY>
<P ALIGN=CENTER>
<img border="1" dynsrc="ROJA.MPEG"

start="fileopen" height="500" width="400">
</P>
</BODY>
</HTML>
For continue picture

Start=mouseover loop=5
EFFEC
How to Move Text or Picture (Marquee)

<html>
<body>
<marquee> Management Information System </marquee>

</body>
</html>
NOTE:
Marquee Direction
<marquee direction=right / left>
Marquee behavior
<marquee behavior=slide / scroll / alternate>
Ex. <marquee behavior=alternate direction=left>
<marquee bgcolor=green behavior=alternate direction=left>
EFFEC
216 Cross Platform Colors

This 216 cross platform web safe color palette was originally
created to ensure that all computers would display all colors
correctly when running a 256 color palette.
000033
000066
000099
0000CC
0000FF
003300
003333
003366
003399
0033CC
0033FF
006600
006633
006666
006699
0066CC
0066FF
009900
009933
009966
009999
0099CC
0099FF
00CC00
00CC33
00CC66
00CC99
00CCCC
00CCFF
00FF00
00FF33
00FF66
00FF99
00FFCC
00FFFF
330000
330033
330066
330099
3300CC
3300FF
333300
333333
333366
333399
3333CC
3333FF
000000
336600
336633
336666
336699
3366CC
3366FF
339900
339933
339966
339999
3399CC
3399FF
33CC00
33CC33
33CC66
33CC99
33CCCC
33CCFF
33FF00
33FF33
33FF66
33FF99
33FFCC
33FFFF
660000
660033
660066
660099
6600CC
6600FF
663300
663333
663366
663399
6633CC
6633FF
666600
666633
666666
666699
6666CC
6666FF
669900
669933
669966
669999
6699CC
6699FF
66CC00
66CC33
66CC66
66CC99
66CCCC
66CCFF
66FF00
66FF33
66FF66
66FF99
66FFCC
66FFFF
990000
990033
990066
990099
9900CC
9900FF
993300
993333
993366
993399
9933CC
9933FF
996600
996633
996666
996699
9966CC
9966FF
999900
999933
999966
999999
9999CC
9999FF
99CC00
99CC33
99CC66
99CC99
99CCCC
99CCFF
99FF00
99FF33
99FF66
99FF99
99FFCC
99FFFF
CC0000
CC0033
CC0066
CC0099
CC00CC
CC00FF
CC3300
CC3333
CC3366
CC3399
CC33CC
CC33FF
CC6600
CC6633
CC6666
CC6699
CC66CC
CC66FF
CC9900
CC9933
CC9966
CC9999
CC99CC
CC99FF
CCCC00
CCCC33
CCCC66
CCCC99
CCCCCC
CCCCFF
CCFF00
CCFF33
CCFF66
CCFF99
CCFFCC
CCFFFF
FF0000
FF0033
FF0066
FF0099
FF00CC
FF00FF
FF3300
FF3333
FF3366
FF3399
FF33CC
FF33FF
FF6600
FF6633
FF6666
FF6699
FF66CC
FF66FF
FF9900
FF9933
FF9966
FF9999
FF99CC
FF99FF
FFCC00
FFCC33
FFCC66
FFCC99
FFCCCC
FFCCFF
FFFF00
FFFF33
FFFF66
FFFF99
FFFFCC
FFFFFF
How To Use Horizontal Tags

<html>
<body>
<p>The hr tag defines a horizontal rule:</p>
<hr>
<p>This is a paragraph</p>
<hr>
</body>
</html>
EFFEC
<html>
<body>
How To Use Poem Break Tags
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
<pre>Note that your browser simply ignores your formatting!</pre>
</body>
</html>
EFFEC
How To Use Text Quotation Tags

<html>
<body>
Here comes a long quotation:
<blockquote>
This is a long quotation. This is a long quotation. This is a long quotation. This is a
long quotation. This is a long quotation.
</blockquote>
</body>
</html>
EFFEC
How To Use Page To Page Links

<html>
<body>
<a href=E-banking.html"> GO TO E-banking </a>

</body>
</html>
EFFEC
How To Image Links Tags

<html>
<body>
<p>
You can also use an image as a link:
<a href="university1.html">
<img src="button.bmp" border="0" width="65" height="38">
</a>
</p>
</body>
</html>
EFFEC
Top to Bottom link in a page

<html>
<body>
<p id=1>
<a href=#2> Go To Bottom </a>
.
..
.
<p id=2>
<a href=#1> Go To Top </a>
</body>
</html>
EFFEC
TABLE
TABLE NO BORDER
<html>
<body>
<h4>This table has no borders:</h4>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
EFFEC
With a Normal Border

<html>
<body>
<h4>With a normal border:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
EFFEC
Table with a thick border

<html>
<body>
<h4>With a thick border:</h4>
<table border="8">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
EFFEC
TABLE WITH CAPTION

<html>
<body>
<h4>
This table has a caption,
and a thick border:
</h4>
<table border="6">
<caption> My Caption </caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
EFFEC
TABLE COLOR AND IMAGE

<html>
<body>
<h4>Cell backgrounds:</h4>
<table border="1">
<tr>
<td bgcolor="red">First</td>
<td>Row</td>
</tr>
<tr>
<td background="bgdesert.jpg">
Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
EFFEC
HEADLINE WITH TABLE

<html>
<body>
<h4>Table headers:</h4>
<table border="1">
<tr>
<th>Name</th>
<th>Telephone</th>
<th>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
EFFEC
<html>
<body>
Vertical headers
</table>
<h4>Vertical headers:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
EFFEC
EMPTY CELL TABLE

<html>
<body>
<table border="1">
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td></td>
<td>Some text</td>
</tr>
</table>
</body>
</html>
EFFEC
Without cellpadding
<html>
<body>
<h4>Without cellpadding:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
EFFEC
With cellpadding
<html>
<body>
<h4>With cellpadding:</h4>
<table border="1"
cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
EFFEC
CELL SPAN
Cell that spans two columns
<html>
<body>
<h4>Cell that spans two columns:</h4>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
EFFEC
Cell that spans two rows

<html>
<body>
<h4>Cell that spans two rows:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
EFFEC
LIST
ORDER LIST
<html>
<body>
<h4>An Ordered List:</h4>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
EFFEC
UNORDERLIST TAGS
<html>
<body>
<h4>An Unordered List:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
EFFEC
DIFFERNENTLIST
<html>
<body>
<h4>Letterslist:</h4>
<oltype="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercaseletterslist:</h4>
<oltype="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body>
</html>
EFFEC
DIFFERNENTLIST
<html>
<body>
<h4>Roman numbers list:</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase Roman numbers list:</h4>
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body>
</html>
EFFEC
NESTEDLIST
<html><body>
<h4>AnestedList:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Blacktea</li>
<li>Greentea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body></html>
EFFEC
DIFFERENT UNORDER LIST TAGS

<html>
<body>
<h4>Disc bullets list:</h4>
<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Circle bullets list:</h4>
<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>
EFFEC
Square bullets list

<html>
<body>
<h4>Square bullets list:</h4>
<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>
EFFEC
<html>
<body>
FORMOFHTML
TEXTFIELD
<form>
Firstname:
<inputtype="text">
<br>
Lastname:
<inputtype="text">
</form>
</body>
</html>
EFFEC
PASSWORDFIELDFORM
<html>
<body>
<form>
Username:
<inputtype="text">
<br>
Password:
<inputtype="password">
</form>
</body>
</html>
EFFEC
<html>
<body>
DRAWDOWNBOXFIELD
<form>
<select>
<optionvalue="volvo">Volvo
<optionvalue="saab">Saab
<optionvalue="fiat">Fiat
<optionvalue="audi">Audi
</select>
</form>
</body>
</html>
EFFEC
RADIOBUTTON
<html>
<body>
<form>
Male:
<inputtype="radio"checked="checked"
name="Sex"value="male">
<br>
Female:
<inputtype="radio"
name="Sex"value="female">
</form>
</body>
</html>
EFFEC
CHECKBOX
<html>
<body>
<form>
Ihaveabike:
<inputtype="checkbox"name="Bike">
<br>
Ihaveacar:
<inputtype="checkbox"name="Car">
</form>
</body>
</html>
EFFEC
INPUTANDSUBMITBUTTON
<html>
<body>
<form name="input" action="html_form_action.asp" method="get">
Male:
<input type="radio" name="Sex" value="Male" checked="checked">
<br>
Female:
<input type="radio" name="Sex" value="Female">
<br>
<input type ="submit" value ="Submit">
</form>
</body>
</html>
EFFEC
SUBMIT AND RESET BUTTON

<html>
<body>
<form action="MAILTO:someone@w3schools.com" method="post"
enctype="text/plain">
<h3>This form sends an e-mail to W3Schools.</h3>
Name:<br>
<input type="text" name="name"
value="yourname" size="20">
<br>
Mail:<br>
<input type="text" name="mail"
value="yourmail" size="20">
<br>
Comment:<br>
<input type="text" name="comment"
value="yourcomment" size="40">
<br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
</html>
EFFEC
NORMAL BUTTON
<html>
<body>
<form>
<input type="button" value="Hello world!">
</form>
</body>
</html>
EFFEC
HTML BASIC
HTML Basic Document
<html>
<head>
<title>Document name goes here</title>
</head>
<body>
Visible text goes here
</body>
</html>
Heading Elements
<h1>Largest Heading</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>Smallest Heading</h6>
Text Elements
<br> (line break)
<hr> (horizontal rule)
<pre>This text is preformatted</pre>
Logical Styles
<em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>
Physical Styles
<b>This text is bold</b>
<i>This text is italic</i>
<u>This text is Underline</u>
Links, Anchors, and Image Elements

<a href="http://www.w3schools.com/">This is a Link</a>
<a href="http://www.w3schools.com/"><img src="URL" alt="Alternate Text"></a>
<a href="mailto:someone@microsoft.com">Send e-mail</a>
A named anchor:
<a name="tips">Useful Tips Section</a>
<a href="#tips">Jump to the Useful Tips Section</a>
Unordered list
<ul>
<li>First item</li>
<li>Next item</li>
</ul>
Ordered list
<ol>
<li>First item</li>
<li>Next item</li>
</ol>
Definition list
<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>
Tables
<table border="1">
<tr>
<th>someheader</th>
<th>someheader</th>
</tr>
<tr>
<td>sometext</td>
<td>sometext</td>
</tr>
</table>
Forms
<form action="http://www.somewhere.com/somepage.asp" method="post/get">
<input type="text" name="lastname" value="Nixon" size="30" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit">
<input type="reset">
<input type="hidden">
<select>
<option>Apples
<option selected>Bananas
<option>Cherries
</select>
<textarea name="Comment" rows="60" cols="20"></textarea>
</form>
Entities
< is the same as <
> is the same as >
© is the same as
Other Elements

<blockquote>
Text quoted from some source.
</blockquote>
<address>
Address 1<br>
Address 2<br>
City<br>
</address>

HTML Presentation

Uploaded by

Document Information

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

HTML Presentation

Uploaded by

Copyright:

Available Formats

Hypertext Markup

HTML is a markup language

2. publish online documents and retrieve

Growth of the Web

Designing A Web Site

The HTML tag is comprised of :

HTML Rules and Guidelines

HTML Rules and Guidelines

Browsers treat the first space

Browsers ignore space characters in HTML

Space characters convey no formatting

Elements should nest. Any

The <HTML> Element

The <HEAD> Element

<TITLE>. The <TITLE> element must

BASIC ELEMENTS OF HTML

How To Use Line Break Tags

How To Bold, Italic, Underline Some Text

How To Use Headings (Default Font Size)

How To Align Text (Left / Right / Center)

<h1 align="center">This is the center align example </h1>

How To Use Font Color, Size, And Face

<font size="20" color="RED" face="Arial">

<font size="20" color="#0000ff" face="Arial">

How To Use Background Color

How To Use Background Image / Picture.

How to Insert Image / Picture

Note : Image / Picture format must be gif / jpg / bmp

How to insert Video File

<img border="1" dynsrc="ROJA.MPEG"

For continue picture

How to Move Text or Picture (Marquee)

<marquee> Management Information System </marquee>

216 Cross Platform Colors

How To Use Horizontal Tags

How To Use Poem Break Tags

How To Use Text Quotation Tags

How To Use Page To Page Links

<a href=E-banking.html"> GO TO E-banking </a>

How To Image Links Tags

Top to Bottom link in a page

With a Normal Border

Table with a thick border

TABLE WITH CAPTION

TABLE COLOR AND IMAGE

HEADLINE WITH TABLE

EMPTY CELL TABLE

Cell that spans two rows

DIFFERENT UNORDER LIST TAGS

Square bullets list

SUBMIT AND RESET BUTTON

Links, Anchors, and Image Elements

You might also like