Emba, HTML Presentation

7/28/2019 Emba, HTML Presentation

1/72

Hypertext Markup Language(HTML)


2/72

HTMLHTML is the standard language that the Web uses for

creating and recognizing documents.

HTML is a markup language that is used to create anHTML document. The instructions specify how a Webpage 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.


3/72

The developments fueled the growth of the Web are:

Hypertextthe ability to link to other documents

Hypermediathe ability to include text, audio, video,

images and graphics in a document.


4/72

Designing A Web SiteA web site is a collection of web pages and related filesand folders stored on a Web server. The first page of theweb site is called the homepageor indexpage. Thehome 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 designphase.


5/72

HTML Tags

The HTML commands are called TAGS. The TAGS are used tocontrol the content and appearance of the HTML document.The opening tag is a pair of brackets. This indicatesthe beginning of the HTML command. The closing tag isrepresented as to indicate the end of the HTML

command.The HTML tag is used to mark the beginning and end of anHTML document.

The tags are not case sensitive.


6/72

The HTML tag is comprised of :

Elementidentifies the tag.

Attributedescribes the tag.

Valueis the content that is assigned to the attribute.

Example


7/72

HTML Rules and Guidelines

The following are some rules to remember when writing HTML :

HTML documents have a well-defined structure. HTML elementsshould occur only within others. List items () should be the onlyitems that directly nest within unordered list elements defined by.

EXAMPLE

Elements names are not case-sensitive.

EXAMPLE

An element such as is equivalent to or .

Attribute names arent case-sensitive.

EXAMPLE

is equivalent to or .


8/72

Attribute values may case-sensitive.

EXAMPLE

The filename in is not the same as thefilename in

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

EXAMPLE

The following value ALT attribute of the tag contains spaces andtherefore require quotes:

.

Element names cannot contain spaces.

EXAMPLEINCORRECT CORRECT

Browsers treat the first space encountered inside an element as the endof an elements name and the beginning of its attributes.


9/72

Browsers ignore space characters in HTML content

Space characters convey no formatting information, unless theyoccur inside a special preformatting element, such as , whichpreserves their meaning.

EXAMPLE

UNIVERSITY

OF

DHAKA


10/72

Elements should nest. Any element that starts within another element

must also end within that element.

EXAMPLE

INCORRECT CORRECTNot correct Correct


11/72

The Element

The element delimits the beginning and the end of an HTMLdocument. It contains only the element and the

element. The is a container for all other elements. The element is optional.

The Element

The element encloses a document section that contains

identification and supplementary information about the document.

The elements allowed within the element include

. The element must always occur.


12/72

The Element

The body of a document is defined by and tag.

Only one element can appear per document.

Common attributes for theelement :

TEXT for text color

BGCOLORfor background color

LINK for unvisited link color


13/72


14/72

Title of page

This is my first homepage.

BASIC ELEMENTS OF HTML


15/72

To break
lines
in a
paragraph,
use the br

tag.

How To Use Line Break Tags


16/72

This is bold

This is Italic

This is Underline

How To Bold, Italic, Underline Some Text


17/72

This is heading 1This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

Use heading tags only for

headings. Don't use them

just to make something bold.

Use other tags for that.

How To Use Headings (Default Font Size)


18/72

This is the center align example This is the left align example

This is the right align example

Note: Align Not Use Single You Must Use (H1 / H2 / H3 / H4 / H5 / H6 Or P)

How To Align Text (Left / Right / Center)


19/72

Department of Management Information Systems (MIS).

Or

Department of ManagementInformation Systems (MIS).

How To Use Font Color, Size, And Face


20/72

Department Of Management Information System (MIS)

Or

Department Of Management Information Systems (MIS)

How To Use Background Color


21/72

Department Of Management Information Systems (MIS)

[note: image file and html file must be contain one folder]

[ Picture must save gif / bmp / jpg format]

How To Use Background Image / Picture.

CLICK HERE FOR EFFECT
http://localhost/var/www/apps/conversion/tmp/scratch_11/BACKGROUND%20IMG.HTMLhttp://localhost/var/www/apps/conversion/tmp/scratch_11/BACKGROUND%20IMG.HTML


22/72

How to Insert Image / Picture

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

Image file and HTML file must be keep same folder.

http://localhost/var/www/apps/conversion/tmp/scratch_11/PICTURE.HTMLhttp://localhost/var/www/apps/conversion/tmp/scratch_11/PICTURE.HTML


23/72

How to insert Video File

For continue picture

Start=mouseover loop=5

http://localhost/var/www/apps/conversion/tmp/scratch_11/VEDIO.HTMLhttp://localhost/var/www/apps/conversion/tmp/scratch_11/VEDIO.HTML


24/72

Management Information System

Marquee Direction

Marquee behavior

Ex.

How to Move Text or Picture (Marquee)

http://localhost/var/www/apps/conversion/tmp/scratch_11/120.htmlhttp://localhost/var/www/apps/conversion/tmp/scratch_11/120.html


25/72


26/72


27/72


28/72


29/72

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.

000000000033 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


30/72

336600 336633 336666 336699 3366CC 3366FF

339900 339933 339966 339999 3399CC 3399FF



660000 660033 660066 660099 6600CC 6600FF

663300 663333 663366 663399 6633CC 6633FF

666600 666633 666666 666699 6666CC 6666FF

669900 669933 669966 669999 6699CC 6699FF



990000 990033 990066 990099 9900CC 9900FF

993300 993333 993366 993399 9933CC 9933FF


31/72

996600 996633 996666 996699 9966CC 9966FF

999900 999933 999966 999999 9999CC 9999FF



CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF




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 FF66FFFF9900 FF9933 FF9966 FF9999 FF99CC FF99FF

FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF

FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF


32/72

The hr tag defines a horizontal rule:

This is a paragraph

This is a paragraph

How To Use Horizontal Tags


33/72

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.

Note that your browser simply ignores your formatting!

How To Use Poem Break Tags


34/72

Here comes a long quotation:

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.

How To Use Text Quotation Tags


35/72

Go to teacher page

Back to home

This text is a link to a page on

this Web site.

This text is a link to a page on the World Wide Web

How To Use Page To Page Links
http://www.w3schools.com/html/lastpage.htmhttp://www.w3schools.com/html/lastpage.htm


36/72

You can also use an image as a link:


37/72

Top to Bottom link in a page

Go To Bottom

.

..

.

Go To Top

http://localhost/var/www/apps/conversion/tmp/scratch_11/TOP%20TO%20BOTTOM.HTMLhttp://localhost/var/www/apps/conversion/tmp/scratch_11/TOP%20TO%20BOTTOM.HTML


38/72

TABLE NO BORDER

This table has no borders:

100

200300

400

500600

TABLE

With N l B d


39/72

With a Normal Border

With a normal border:

First

Row

Second

Row

T bl ith thi k b d


40/72

Table with a thick border

With a thick border:

First

Row

Second

Row

TABLE WITH CAPTION


41/72

TABLE WITH CAPTION

This table has a caption,and a thick border:

My Caption

100

200

300

400500

600


42/72

TABLE COLOR AND IMAGE

Cell backgrounds:

First

Row

Second

Row

HEADLINE WITH TABLE


43/72

HEADLINE WITH TABLE

Table headers:

Name

Telephone

Telephone

Bill Gates

555 77 854

555 77 855

d


44/72

Vertical headers:

First Name:

Bill Gates

Telephone:

555 77 854

Telephone:

555 77 855

Vertical headers


45/72

EMPTY CELL TABLE

Some text

Some text

Some text


46/72

Without cellpadding

Without cellpadding:

First

Row

Second

Row

With ll ddi


47/72

With cellpadding

With cellpadding:

First

Row

Second

Row

CELL SPAN


48/72

Cell that spans two columns

Cell that spans two columns:

Name

Telephone

Bill Gates

555 77 854

555 77 855

Cell that spans two rows


49/72

p

Cell that spans two rows:

First Name:

Bill Gates

Telephone:

555 77 854

555 77 855

LIST


50/72

ORDER LIST

An Ordered List:

CoffeeTea

Milk

LIST


51/72

UNORDERLIST TAGS

An Unordered List:

Coffee

Tea

Milk

DIFFERNENT LIST


52/72

DIFFERNENT LIST

Letters list:

ApplesBananasLemonsOranges

Lowercase letters list:ApplesBananas

LemonsOranges

DIFFERNENT LIST


53/72

Roman numbers list:

Apples

Bananas

Lemons

Oranges

Lowercase Roman numbers list:

Apples

Bananas

LemonsOranges

DIFFERNENT LIST

NESTED LIST


54/72

NESTED LIST

A nested List:

CoffeeTeaBlack tea

Green teaChinaAfrica

Milk

DIFFERENT UNORDER LIST TAGS


55/72

Disc bullets list:

Apples

Bananas

Lemons

Oranges

Circle bullets list:

Apples

Bananas

LemonsOranges

DIFFERENT UNORDER LIST TAGS

S b ll li


56/72

Square bullets list:

Apples

Bananas

LemonsOranges

Square bullets list

FORM OF HTML


57/72

FORM OF HTMLTEXT FIELD

First name:

Last name:

PASSWORD FIELD FORM


58/72

PASSWORD FIELD FORM

Username:

Password:

DRAWDOWN BOX FIELD


59/72

DRAWDOWN BOX FIELD

VolvoSaabFiat

Audi

RADIO BUTTON


60/72

RADIO BUTTON

html>

Male:

Female:

CHECK BOX


61/72

CHECK BOX

I have a bike:

I have a car:

INPUT AND SUBMIT BUTTON


62/72

Male:

Female:

INPUT AND SUBMIT BUTTON

SUBMIT AND RESET BUTTON


63/72

This form sends an e-mail to W3Schools.Name:

Mail:

Comment:


64/72

NORMAL BUTTON

HTML BASIC


65/72

HTML Basic Document

Document name goes here

Visible text goes here

Heading Elements

Largest Heading

. . .

. . .

. . .

. . .

Smallest Heading

HTML BASIC


66/72

Text Elements

This is a paragraph

(line break)

(horizontal rule)

This text is preformatted

Logical Styles

This text is emphasizedThis text is strong

This is some computer code

Physical Styles

This text is bold

This text is italic

This text is Underline


67/72

Links, Anchors, and Image Elements

This is a Link

Send e-mail

A named anchor:

Useful Tips Section

Jump to the Useful Tips Section

Unordered list

First item

Next item


68/72

Ordered list

First item

Next item

Definition list

First term

Definition

Next termDefinition


69/72

Tables

someheader

someheader

sometext

sometext

Forms


70/72

Forms

Apples

Bananas

Cherries

Entities


71/72

Entities

< is the same as is the same as >

is the same as

Other Elements

Text quoted from some source.

Address 1

Address 2
City


72/72

Emba, HTML Presentation

Documents

Transcript of Emba, HTML Presentation