HTML Presentation

Hypertext Markup Language(HTML)

HTMLHTMLHTML is the standard language HTML is the standard language that the Web uses for creating that the Web uses for creating and recognizing documents.and recognizing documents.

HTML is a markup language HTML is a markup language that is used to create an that is used to create an HTML document. The HTML document. The instructions specify how a instructions specify how a Web page should be Web page should be displayed in a browser.displayed in a browser.

HTMLHTML Use of HTML tags and elementsUse of HTML tags and elements 1.1. control the appearance of the page control the appearance of the page

and the content.and the content.

2. publish online documents and retrieve 2. publish online documents and retrieve online information using the links online information using the links inserted in the HTML document.inserted in the HTML document.

3.3. Create on-line forms. These forms can Create on-line forms. These forms can be used to collect information about be used to collect information about the user, conduct transactions, and so the user, conduct transactions, and so on. on.

4.4. Insert objects – audio-clips, video clips, Insert objects – audio-clips, video clips, ActiveX components, java applets in ActiveX components, java applets in the HTML document.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 graphics in a document.

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.

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.

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”>

Element – identifies the tag.

Attribute – describes the tag.

Value – is the content that is assigned to the attribute.

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 aren’t case-sensitive.

EXAMPLE

<HR NOSHADE> is equivalent to <HR noshade> or <HR NoShade>.

•Attribute values may case-sensitive.

EXAMPLE

The filename in

<IMG SRC=“filename.gif”> is not the same as the filename in <IMG SRC=“FILENAME.GIF”>

•Attribute values should be quoted. Attribute values may contain spaces or other special characters if it is enclosed by quotes.

EXAMPLE

The following value ALT attribute of the <IMG> tag contains spaces and therefore require quotes:

<IMG SRC =“univ.gif” ALT =“University of Dhaka”>

Element names cannot contain spaces.

EXAMPLE

INCORRECT CORRECT

<BOD Y> <BODY>

Browsers treat the first space encountered inside an element as the end of an element’s name and the beginning of its attributes.

•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>

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>

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.

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.

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

<html>

<head><title>Title of page</title>

</head>

<body>

This is my first homepage.

</body>

</html>

BASIC ELEMENTS OF HTML

EFFECT

<html><body>To break<br>lines<br>in a<br>paragraph,<br>use the br tag.</body></html>

How To Use Line Break Tags

EFFECT

<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

<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

<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

<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

<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

<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

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

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

<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

216 Cross Platform ColorsThis 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.

000000000000000033000033 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

336600336600 336633336633 336666336666 336699336699 3366CC3366CC 3366FF3366FF

339900339900 339933339933 339966339966 339999339999 3399CC3399CC 3399FF3399FF



660000660000 660033660033 660066660066 660099660099 6600CC6600CC 6600FF6600FF

663300663300 663333663333 663366663366 663399663399 6633CC6633CC 6633FF6633FF

666600666600 666633666633 666666666666 666699666699 6666CC6666CC 6666FF6666FF

669900669900 669933669933 669966669966 669999669999 6699CC6699CC 6699FF6699FF



990000990000 990033990033 990066990066 990099990099 9900CC9900CC 9900FF9900FF

993300993300 993333993333 993366993366 993399993399 9933CC9933CC 9933FF9933FF

996600996600 996633996633 996666996666 996699996699 9966CC9966CC 9966FF9966FF

999900999900 999933999933 999966999966 999999999999 9999CC9999CC 9999FF9999FF



CC0000CC0000 CC0033CC0033 CC0066CC0066 CC0099CC0099 CC00CCCC00CC CC00FFCC00FF




CCCC00CCCC00 CCCC33CCCC33 CCCC66CCCC66 CCCC99CCCC99 CCCCCCCCCCCC CCCCFFCCCCFF

CCFF00CCFF00 CCFF33CCFF33 CCFF66CCFF66 CCFF99CCFF99 CCFFCCCCFFCC CCFFFFCCFFFF

FF0000FF0000 FF0033FF0033 FF0066FF0066 FF0099FF0099 FF00CCFF00CC FF00FFFF00FF




FFCC00FFCC00 FFCC33FFCC33 FFCC66FFCC66 FFCC99FFCC99 FFCCCCFFCCCC FFCCFFFFCCFF

FFFF00FFFF00 FFFF33FFFF33 FFFF66FFFF66 FFFF99FFFF99 FFFFCCFFFFCC FFFFFFFFFFFF

<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

<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

<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

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

</body></html>

How To Use Page To Page Links

EFFECT

<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

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

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

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

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

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

T

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>

EFFECT

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>

EFFECT

<html><body>

</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>

Vertical headers

EFFECT

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>

EFFECT

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>

EFFECT

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>

EFFECT

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>

CELL SPAN

EFFECT

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>

EFFECT

ORDER LIST

<html><body><h4>An Ordered List:</h4>

<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ol>

</body></html>

LIST

EFFECT

UNORDERLIST TAGS

<html><body><h4>An Unordered List:</h4>

<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ul>

</body></html>

EFFECT

DIFFERNENT LIST<html><body> <h4>Letters list:</h4><ol type="A"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li></ol> <h4>Lowercase letters list:</h4><ol type="a"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li></ol> </body></html> EFFEC

T

<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>

DIFFERNENT LIST

EFFECT

NESTED LIST

<html> <body><h4>A nested List:</h4><ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea <ul> <li>China</li> <li>Africa</li> </ul> </li> </ul> </li> <li>Milk</li></ul></body> </html>

EFFECT

<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>

DIFFERENT UNORDER LIST TAGS

EFFECT

<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>

Square bullets list

EFFECT

FORM OF HTMLTEXT FIELD<html>

<body>

<form>

First name: <input type="text" >

<br>

Last name: <input type="text" >

</form>

</body></html>

EFFECT

PASSWORD FIELD FORM<html><body>

<form>Username: <input type="text" >

<br>

Password: <input type="password" >

</form>

</body></html>

EFFECT

DRAWDOWN BOX FIELD<html><body>

<form><select><option value="volvo">Volvo<option value="saab">Saab<option value="fiat">Fiat<option value="audi">Audi</select></form>

</body></html>

EFFECT

RADIO BUTTON

<html><body>

<form>Male: <input type="radio" checked="checked"name="Sex" value="male">

<br>

Female: <input type="radio"name="Sex" value="female"></form>

</body></html>

EFFECT

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

<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>

INPUT AND SUBMIT BUTTON

EFFECT

<html><body><form action="MAILTO:[email protected]" 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>

SUBMIT AND RESET BUTTON

EFFECT

NORMAL BUTTON

<html><body>

<form><input type="button" value="Hello world!"></form>

</body></html>

EFFECT

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

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>

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:[email protected]">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>

Date post:	12-Dec-2015
Category:	Documents
Upload:	sumon-refat
View:	217 times
Download:	2 times

HTML Presentation

Documents