7/28/2019 Emba, HTML Presentation
1/72
Hypertext Markup Language(HTML)
7/28/2019 Emba, HTML Presentation
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.
7/28/2019 Emba, HTML Presentation
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.
7/28/2019 Emba, HTML Presentation
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.
7/28/2019 Emba, HTML Presentation
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.
7/28/2019 Emba, HTML Presentation
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/28/2019 Emba, HTML Presentation
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 .
7/28/2019 Emba, HTML Presentation
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.
7/28/2019 Emba, HTML Presentation
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
7/28/2019 Emba, HTML Presentation
10/72
Elements should nest. Any element that starts within another element
must also end within that element.
EXAMPLE
INCORRECT CORRECTNot correct Correct
7/28/2019 Emba, HTML Presentation
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.
7/28/2019 Emba, HTML Presentation
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
7/28/2019 Emba, HTML Presentation
13/72
7/28/2019 Emba, HTML Presentation
14/72
Title of page
This is my first homepage.
BASIC ELEMENTS OF HTML
7/28/2019 Emba, HTML Presentation
15/72
To break
lines
in a
paragraph,
use the br
tag.
How To Use Line Break Tags
7/28/2019 Emba, HTML Presentation
16/72
This is bold
This is Italic
This is Underline
How To Bold, Italic, Underline Some Text
7/28/2019 Emba, HTML Presentation
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)
7/28/2019 Emba, HTML Presentation
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)
7/28/2019 Emba, HTML Presentation
19/72
Department of Management Information Systems (MIS).
Or
Department of ManagementInformation Systems (MIS).
How To Use Font Color, Size, And Face
7/28/2019 Emba, HTML Presentation
20/72
Department Of Management Information System (MIS)
Or
Department Of Management Information Systems (MIS)
How To Use Background Color
7/28/2019 Emba, HTML Presentation
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.HTML7/28/2019 Emba, HTML Presentation
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.
CLICK HERE FOR EFFECT
http://localhost/var/www/apps/conversion/tmp/scratch_11/PICTURE.HTMLhttp://localhost/var/www/apps/conversion/tmp/scratch_11/PICTURE.HTML7/28/2019 Emba, HTML Presentation
23/72
How to insert Video File
For continue picture
Start=mouseover loop=5
CLICK HERE FOR EFFECT
http://localhost/var/www/apps/conversion/tmp/scratch_11/VEDIO.HTMLhttp://localhost/var/www/apps/conversion/tmp/scratch_11/VEDIO.HTML7/28/2019 Emba, HTML Presentation
24/72
Management Information System
Marquee Direction
Marquee behavior
Ex.
How to Move Text or Picture (Marquee)
CLICK HERE FOR EFFECT
http://localhost/var/www/apps/conversion/tmp/scratch_11/120.htmlhttp://localhost/var/www/apps/conversion/tmp/scratch_11/120.html7/28/2019 Emba, HTML Presentation
25/72
7/28/2019 Emba, HTML Presentation
26/72
7/28/2019 Emba, HTML Presentation
27/72
7/28/2019 Emba, HTML Presentation
28/72
7/28/2019 Emba, HTML Presentation
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
7/28/2019 Emba, HTML Presentation
30/72
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
7/28/2019 Emba, HTML Presentation
31/72
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
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
7/28/2019 Emba, HTML Presentation
32/72
The hr tag defines a horizontal rule:
This is a paragraph
This is a paragraph
How To Use Horizontal Tags
7/28/2019 Emba, HTML Presentation
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
7/28/2019 Emba, HTML Presentation
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
7/28/2019 Emba, HTML Presentation
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.htm7/28/2019 Emba, HTML Presentation
36/72
You can also use an image as a link:
7/28/2019 Emba, HTML Presentation
37/72
Top to Bottom link in a page
Go To Bottom
.
..
.
Go To Top
CLICK HERE FOR EFFECT
http://localhost/var/www/apps/conversion/tmp/scratch_11/TOP%20TO%20BOTTOM.HTMLhttp://localhost/var/www/apps/conversion/tmp/scratch_11/TOP%20TO%20BOTTOM.HTML7/28/2019 Emba, HTML Presentation
38/72
TABLE NO BORDER
This table has no borders:
100
200300
400
500600
TABLE
With N l B d
7/28/2019 Emba, HTML Presentation
39/72
With a Normal Border
With a normal border:
First
Row
Second
Row
T bl ith thi k b d
7/28/2019 Emba, HTML Presentation
40/72
Table with a thick border
With a thick border:
First
Row
Second
Row
TABLE WITH CAPTION
7/28/2019 Emba, HTML Presentation
41/72
TABLE WITH CAPTION
This table has a caption,and a thick border:
My Caption
100
200
300
400500
600
7/28/2019 Emba, HTML Presentation
42/72
TABLE COLOR AND IMAGE
Cell backgrounds:
First
Row
Second
Row
HEADLINE WITH TABLE
7/28/2019 Emba, HTML Presentation
43/72
HEADLINE WITH TABLE
Table headers:
Name
Telephone
Telephone
Bill Gates
555 77 854
555 77 855
d
7/28/2019 Emba, HTML Presentation
44/72
Vertical headers:
First Name:
Bill Gates
Telephone:
555 77 854
Telephone:
555 77 855
Vertical headers
7/28/2019 Emba, HTML Presentation
45/72
EMPTY CELL TABLE
Some text
Some text
Some text
7/28/2019 Emba, HTML Presentation
46/72
Without cellpadding
Without cellpadding:
First
Row
Second
Row
With ll ddi
7/28/2019 Emba, HTML Presentation
47/72
With cellpadding
With cellpadding:
First
Row
Second
Row
CELL SPAN
7/28/2019 Emba, HTML Presentation
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
7/28/2019 Emba, HTML Presentation
49/72
p
Cell that spans two rows:
First Name:
Bill Gates
Telephone:
555 77 854
555 77 855
LIST
7/28/2019 Emba, HTML Presentation
50/72
ORDER LIST
An Ordered List:
CoffeeTea
Milk
LIST
7/28/2019 Emba, HTML Presentation
51/72
UNORDERLIST TAGS
An Unordered List:
Coffee
Tea
Milk
DIFFERNENT LIST
7/28/2019 Emba, HTML Presentation
52/72
DIFFERNENT LIST
Letters list:
ApplesBananasLemonsOranges
Lowercase letters list:ApplesBananas
LemonsOranges
DIFFERNENT LIST
7/28/2019 Emba, HTML Presentation
53/72
Roman numbers list:
Apples
Bananas
Lemons
Oranges
Lowercase Roman numbers list:
Apples
Bananas
LemonsOranges
DIFFERNENT LIST
NESTED LIST
7/28/2019 Emba, HTML Presentation
54/72
NESTED LIST
A nested List:
CoffeeTeaBlack tea
Green teaChinaAfrica
Milk
DIFFERENT UNORDER LIST TAGS
7/28/2019 Emba, HTML Presentation
55/72
Disc bullets list:
Apples
Bananas
Lemons
Oranges
Circle bullets list:
Apples
Bananas
LemonsOranges
DIFFERENT UNORDER LIST TAGS
S b ll li
7/28/2019 Emba, HTML Presentation
56/72
Square bullets list:
Apples
Bananas
LemonsOranges
Square bullets list
FORM OF HTML
7/28/2019 Emba, HTML Presentation
57/72
FORM OF HTMLTEXT FIELD
First name:
Last name:
PASSWORD FIELD FORM
7/28/2019 Emba, HTML Presentation
58/72
PASSWORD FIELD FORM
Username:
Password:
DRAWDOWN BOX FIELD
7/28/2019 Emba, HTML Presentation
59/72
DRAWDOWN BOX FIELD
VolvoSaabFiat
Audi
RADIO BUTTON
7/28/2019 Emba, HTML Presentation
60/72
RADIO BUTTON
html>
Male:
Female:
CHECK BOX
7/28/2019 Emba, HTML Presentation
61/72
CHECK BOX
I have a bike:
I have a car:
INPUT AND SUBMIT BUTTON
7/28/2019 Emba, HTML Presentation
62/72
Male:
Female:
INPUT AND SUBMIT BUTTON
SUBMIT AND RESET BUTTON
7/28/2019 Emba, HTML Presentation
63/72
This form sends an e-mail to W3Schools.Name:
Mail:
Comment:
7/28/2019 Emba, HTML Presentation
64/72
NORMAL BUTTON
HTML BASIC
7/28/2019 Emba, HTML Presentation
65/72
HTML Basic Document
Document name goes here
Visible text goes here
Heading Elements
Largest Heading
. . .
. . .
. . .
. . .
Smallest Heading
HTML BASIC
7/28/2019 Emba, HTML Presentation
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
7/28/2019 Emba, HTML Presentation
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
7/28/2019 Emba, HTML Presentation
68/72
Ordered list
First item
Next item
Definition list
First term
Definition
Next termDefinition
7/28/2019 Emba, HTML Presentation
69/72
Tables
someheader
someheader
sometext
sometext
Forms
7/28/2019 Emba, HTML Presentation
70/72
Forms
Apples
Bananas
Cherries
Entities
7/28/2019 Emba, HTML Presentation
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
7/28/2019 Emba, HTML Presentation
72/72