2. HTMLHTML
HTML is the standard languageHTML is the standard language
that the Web uses for creatingthat the Web uses for creating
and recognizing documents.and recognizing documents.
HTML is a markup languageHTML is a markup language
that is used to create an HTMLthat is used to create an HTML
document. The instructionsdocument. The instructions
specify how a Web pagespecify how a Web page
should be displayed in ashould be displayed in a
browser.browser.
3. HTMLHTML
Use of HTML tags and elementsUse of HTML tags and elements
1.1. control the appearance of the page andcontrol the appearance of the page and
the content.the content.
2. publish online documents and retrieve2. publish online documents and retrieve
online information using the linksonline information using the links
inserted in the HTML document.inserted in the HTML document.
3.3. Create on-line forms. These forms canCreate on-line forms. These forms can
be used to collect information aboutbe used to collect information about
the user, conduct transactions, and sothe user, conduct transactions, and so
on.on.
4.4. Insert objects – audio-clips, videoInsert objects – audio-clips, video
clips, ActiveX components, javaclips, ActiveX components, java
applets in the HTML document.applets in the HTML document.
4. Growth of the Web Depends on
Hypertext – the ability to link to
other documents
Hypermedia – the ability to
include text, audio, video, images
and graphics in a document.
5. Designing A Web Site
A web site is a collection of web pages
and related files and folders stored on a
Web server. The first page of the web site
is called the “home page” or “index page”.
The home page gives an overview of the
information that we can search for on the
web site.
When developing a web site, we go
through the design phase.
6. HTML Tags
The HTML commands are called TAGS.
The TAGS are used to control the
content and appearance of the HTML
document. The “opening tag” is a pair of
brackets “<>”. This indicates the
beginning of the HTML command. The
“closing tag” is represented as “</>”
to indicate the end of the HTML
command.
7. 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.
8. The HTML tag is comprised of :
<ELEMENT ATTRIBUTE = “VALUE”>
Element – identifies the tag.
Attribute – describes the tag.
Value – is the content that is
assigned to the attribute.
Example
<BODY BGCOLOR =“WHITE”>
9. 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>
10. HTML Rules and Guidelines
•Elements names are not case-sensitive.
EXAMPLE
An element such as <hTml> is equivalent
to <html> or <HTML>.
• Attribute names aren’t case-sensitive.
EXAMPLE
<HR NOSHADE> is equivalent to <HR
noshade> or <HR NoShade>.
14. •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
preserves their meaning.
EXAMPLE
<PRE>
UNIVERSITY
OF
DHAKA
</PRE>
15. Elements should nest. Any element
that starts within another element
must also end within that element.
EXAMPLE
INCORRECT CORRECT
<B><I>Not correct</B></I> <B><I>Correct</I></B>
16. 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>
element is optional.
17. The <HEAD> Element
The <HEAD> element encloses a document
section that contains identification and
supplementary information about the
document.
The elements allowed within the
<HEAD>element includes
<TITLE>. The <TITLE> element must
always occur.
18. The <BODY>Element
The body of a document is defined by
<BODY> and </BODY> tag.
Only one <BODY>element can appear per
document.
Common attributes for the<BODY>element :
TEXT for text color
BGCOLOR for background color
LINK for unvisited link color
22. <html>
<body>
<b> This is bold </b>
<BR>
<i> This is Italic </i>
<BR>
<u> This is Underline</u>
<BR>
</body>
</html>
How To Bold, Italic, Underline Some Text
EFFECT
23. <html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<p>
Use heading tags only for
headings. Don't use them
just to make something bold.
Use other tags for that.
</p>
</body>
</html>
How To Use Headings (Default Font Size)
EFFECT
24. <html>
<body>
<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)
How To Align Text (Left / Right / Center)
EFFECT
25. <html>
<body>
<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>
How To Use Font Color, Size, And Face
EFFECT
26. <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>
How To Use Background Color
EFFECT
27. <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>
How To Use Background Image / Picture.
EFFECT
28. 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.
EFFECT
29. 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”
EFFECT
30. <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”>
How to Move Text or Picture (Marquee)
EFFECT
31.
32.
33.
34.
35. 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.
000000000000
000033000033 000066000066 000099000099 0000CC0000CC 0000FF0000FF
003300003300 003333003333 003366003366 003399003399 0033CC0033CC 0033FF0033FF
006600006600 006633006633 006666006666 006699006699 0066CC0066CC 0066FF0066FF
009900009900 009933009933 009966009966 009999009999 0099CC0099CC 0099FF0099FF
00CC0000CC00 00CC3300CC33 00CC6600CC66 00CC9900CC99 00CCCC00CCCC 00CCFF00CCFF
00FF0000FF00 00FF3300FF33 00FF6600FF66 00FF9900FF99 00FFCC00FFCC 00FFFF00FFFF
330000330000 330033330033 330066330066 330099330099 3300CC3300CC 3300FF3300FF
333300333300 333333333333 333366333366 333399333399 3333CC3333CC 3333FF3333FF
38. <html>
<body>
<p>The hr tag defines a horizontal rule:</p>
<hr>
<p>This is a paragraph</p>
<hr>
<p>This is a paragraph</p>
</body>
</html>
How To Use Horizontal Tags
EFFECT
39. <html>
<body>
<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>
How To Use Poem Break Tags
EFFECT
40. <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>
How To Use Text Quotation Tags
EFFECT
42. <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>
How To Image Links Tags
EFFECT
43. 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>
EFFECT
44. 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>
TABLE
EFFECT
45. 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>
EFFECT
46. 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>
EFFECT
47. 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>
EFFECT
67. CHECK BOX
<html>
<body>
<form>
I have a bike:
<input type="checkbox" name="Bike">
<br>
I have a car:
<input type="checkbox" name="Car">
</form>
</body>
</html>
EFFECT
71. 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>
HTML BASIC
72. Text Elements
<p>This is a paragraph</p>
<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>
73. 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>
