Emba, 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. Using HTML tags and elements, we can 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.
The developments fueled the growth of the Web are:
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. The HTML tag is used to mark the beginning and end of an HTML document. <HTML> </HTML> The tags are not case 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> 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>.
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 elements 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
<B><I>Not correct</B></I>
CORRECT
<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 include <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
BASIC ELEMENTS OF HTML

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

<html> <body> To break<br>lines<br>in a<br>paragraph,<br>use the br tag. </body> </html>
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>
How To Use Headings (Default Font Size)

<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>
<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)
<html> <body> <font size=20 color=RED face=Arial> Department of Management Information Systems (MIS). </font> </body> </html> Or <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
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>
How To Use Background Image / Picture.

<html> <body background=image name.extension> Department Of Management Information Systems (MIS) </body>
</html>
[note: image file and html file must be contain one folder] [ Picture must save gif / bmp / jpg format]
CLICK HERE FOR EFFECT
How to Insert Image / Picture

<html> <body>
<img src=imagename.extension height=100 width=80 border=2>

</body>
</html>
Note : Image / Picture format must be gif / jpg / bmp Image file and HTML file must be keep same folder.
How to insert Video File

<html> <body>
<img border=1 dynsrc=picturename.extension start=fileopen height=480 width=640>

</body>
</html>
For continue picture Start=mouseover loop=5
How to Move Text or Picture (Marquee)

<html>
<body> <marquee> Management Information System </marquee> </body> </html>
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>
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.
000000 003300
006600 009900 00CC00 00FF00 330000 333300
000033 003333
006633 009933 00CC33 00FF33 330033 333333
000066 003366
006666 009966 00CC66 00FF66 330066 333366
000099 003399
006699 009999 00CC99 00FF99 330099 333399
0000CC 0033CC
0066CC 0099CC 00CCCC 00FFCC 3300CC 3333CC
0000FF 0033FF
0066FF 0099FF 00CCFF 00FFFF 3300FF 3333FF
336600
339900 33CC00
336633
339933 33CC33
336666
339966 33CC66
336699
339999 33CC99
3366CC
3399CC 33CCCC
3366FF
3399FF 33CCFF
33FF00
660000 663300 666600 669900 66CC00 66FF00 990000 993300
33FF33
660033 663333 666633 669933 66CC33 66FF33 990033 993333
33FF66
660066 663366 666666 669966 66CC66 66FF66 990066 993366
33FF99
660099 663399 666699 669999 66CC99 66FF99 990099 993399
33FFCC
6600CC 6633CC 6666CC 6699CC 66CCCC 66FFCC 9900CC 9933CC
33FFFF
6600FF 6633FF 6666FF 6699FF 66CCFF 66FFFF 9900FF 9933FF
996600 999900 99CC00
996633 999933 99CC33
996666 999966 99CC66
996699 999999 99CC99
9966CC 9999CC 99CCCC
9966FF 9999FF 99CCFF
99FF00
CC0000 CC3300 CC6600 CC9900
99FF33
CC0033 CC3333 CC6633 CC9933
99FF66
CC0066 CC3366 CC6666 CC9966
99FF99
CC0099 CC3399 CC6699 CC9999
99FFCC
CC00CC CC33CC CC66CC CC99CC
99FFFF
CC00FF CC33FF CC66FF CC99FF
CCCC00
CCFF00 FF0000 FF3300 FF6600 FF9900 FFCC00 FFFF00
CCCC33
CCCC66
CCCC99
CCCCCC
CCFFCC FF00CC FF33CC FF66CC FF99CC FFCCCC FFFFCC
CCCCFF
CCFFFF FF00FF FF33FF FF66FF FF99FF FFCCFF 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> <p>This is a paragraph</p> </body> </html>
<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
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>
How To Use Page To Page Links

<html> <body> <a href=Teacher.html> Go to teacher page </a> <br> <a href=home.html> Back to home </a> <br> <p> <a href="lastpage.htm"> This text</a> is a link to a page on this Web site. <a href="lastpage.htm"> This text</a> is a link to a page on the World Wide Web </body> </html>
How To Image Links Tags

<html> <body> <p> You can also use an image as a link: <a href=teacher.htm"> <img src="buttonnext.gif" border="0" width="65" height="38"> </a> </p> </body> </html>
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>
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>
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>
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>
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>
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>
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>
<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>
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>
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>
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>
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>
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>
LIST
ORDER LIST <html> <body> <h4>An Ordered List:</h4> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html>
UNORDERLIST TAGS
<html> <body> <h4>An Unordered List:</h4> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html>
<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>
DIFFERNENT LIST
DIFFERNENT LIST <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>
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>
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>
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>
<html> <body> <form> First name: <input type="text" > <br> Last name: <input type="text" > </form> </body> </html>
FORM OF HTML TEXT FIELD
PASSWORD FIELD FORM

<html> <body> <form> Username: <input type="text" > <br>
Password: <input type="password" >

</form>
</body> </html>
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>
Volvo
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>
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>
INPUT AND SUBMIT BUTTON

<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>
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>
NORMAL BUTTON <html> <body> <form> <input type="button" value="Hello world!"> </form> </body> </html>
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
<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: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>

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

Emba, HTML Presentation

Uploaded by

Copyright:

Available Formats

Hypertext Markup Language

The developments fueled the growth of the Web are:

Hypertext the ability to link to other documents

Designing A Web Site

The HTML tag is comprised of :

<BODY BGCOLOR = WHITE>

HTML Rules and Guidelines

An element such as <hTml> is equivalent to <html> or <HTML>.

Attribute values may case-sensitive.

Browsers ignore space characters in HTML content

The <HTML> Element

The <HEAD> Element

LINK for unvisited link color

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)

How To Use Font Color, Size, And Face

How To Use Background Color

How To Use Background Image / Picture.

CLICK HERE FOR EFFECT

How to Insert Image / Picture

<img src=imagename.extension height=100 width=80 border=2>

CLICK HERE FOR EFFECT

How to insert Video File

<img border=1 dynsrc=picturename.extension start=fileopen height=480 width=640>

CLICK HERE FOR EFFECT

How to Move Text or Picture (Marquee)

996600 999900 99CC00

996633 999933 99CC33

996666 999966 99CC66

996699 999999 99CC99

9966CC 9999CC 99CCCC

9966FF 9999FF 99CCFF

How To Use Horizontal Tags

How To Use Poem Break Tags

How To Use Text Quotation Tags

How To Use Page To Page Links

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

FORM OF HTML TEXT FIELD

PASSWORD FIELD FORM

Password: <input type="password" >

DRAWDOWN BOX FIELD

INPUT AND SUBMIT BUTTON

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

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

SUBMIT AND RESET BUTTON

You might also like