Scribd
Upload
55 views

Emba, HTML Presentation

The document provides information about HTML (Hypertext Markup Language) including what it is, how it is used to structure and present content on web pages, and examples of common HTML tags and their uses. Key points covered include HTML tags for text formatting, images, links, and page layout. Guidelines for writing valid HTML are also discussed.

Uploaded by

faisal_csedu
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
55 views

Emba, HTML Presentation

The document provides information about HTML (Hypertext Markup Language) including what it is, how it is used to structure and present content on web pages, and examples of common HTML tags and their uses. Key points covered include HTML tags for text formatting, images, links, and page layout. Guidelines for writing valid HTML are also discussed.

Uploaded by

faisal_csedu
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 72

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.

CLICK HERE FOR EFFECT

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

CLICK HERE FOR EFFECT

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>
CLICK HERE FOR EFFECT

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
CCFF33 FF0033 FF3333 FF6633 FF9933 FFCC33 FFFF33

CCCC66
CCFF66 FF0066 FF3366 FF6666 FF9966 FFCC66 FFFF66

CCCC99
CCFF99 FF0099 FF3399 FF6699 FF9999 FFCC99 FFFF99

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>
CLICK HERE FOR EFFECT

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

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:[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 &lt; is the same as < &gt; is the same as > &#169; is the same as Other Elements <!-- This is a comment --> <blockquote> Text quoted from some source. </blockquote> <address> Address 1<br> Address 2<br> City<br> </address>

You might also like