Sie sind auf Seite 1von 101

ISBN :

Managing Director- Bookbd


Senior Developer -South Asian ICT
shihab@bookbd.info

Senior Developer, South Asian ICT


infobook7@gmail.com

wbe`K
eyKwewW
www.bookbd.info
facebook.com/ebookbd
facebook.com/groups/bookbd
infobook7@gmail.com
HTML)
(HTML)
HTML

HTML

HTML
HTML
(Comments)
(Comments)
Heading (<h1> <h6>) Elements
Paragraph (<p>) Element
(&nbsp;)
(<br />) Element
Font (<font>) Element
Font
color
face
size
HTML Presentational Elements
Bold <b> Element
Italic <i> Element
Underline <u> Element
<s> <strike> Elements
<tt> Element
<sup> Element
<sub> Element
<big> Element
<small> Element
<hr> Element
List <list>
Ordered List (ol)
type
start
Unordered List (ul)
type
Definition List (<dl>,<dt> & <dd>)
Nesting Lists
(HTML Links)
<a>
href

Declare
Javascript Declare........................................................

Key word

Arithmetic operator
Assignment operator
Comparision
logical operator
if
if
Nested if
if.else
if..else if..else)
Switch

for loop
while loop
do..while

Break
Break
Continue
Continue syntax.....................................................................
Continue

(Concatenation)..............................

...................................

Array

Array

Date()
(onClick)
Double click
Onkey)
onMouseMove
(onLoad)
(onunLoad)
ONCHANGE
OnError)
onFocus
(onSelect)
(Form)

alphabets

alphabets

window.open()
window.close()
window.print()
window.find()
onmouseover
World Clock
Interactive
Interactive

Interactive

Lightweight Programming
Language Object based internet programming language

Object based internet programming language

Netscape Navigator
Microsoft Internet Explorer
Firefox
Safari
Opera
Google Chrome

Brendan Eich Netscape


Mocha
LiveScript LiveScript JavaScript
Lightweight

JDK (Java Development Kit)

Virtual Machine Interpreter



Syntax

HTML mix
Text editor Notepad

Hottest
User friendly
Secure
start

start
All Programs

All Programs
Accessories Accessories
Accessories
Notepad Notepad Notepad
Notepad

Notepad
Untitled Notepad
File
Save As
File Save As
Save AS

Save AS
File name Save as type
All Files Save
Save

firstjavascript (firstjavascript.html )
Notepad
Mozila Firefox Internet Explorer open address
localhost/firstjavascript.html ( localhost/
) enter press
Enter Press

XAMPP XAMPP
XAMPP
XAMPP
open

XAMPP open
XAMPP open
XAMPP open
Apache MySql Start Apache MySql
Start

Apache MySql Start


Computer C XAMPP
XAMPP
XAMPP

XAMPP
htdocs open

htdocs open
htdocs open

htdocs open
New
Text Document Text Document Create

Text Document
Text Document

Text Document
New Text Document Text Document Text
Document

Text Document
New Text Document

New Text Document


New Text Document Notepad
File
Save As
File Save As

Save AS
Save AS
File name Save as type
All Files Save
Save

firstjavascript
Notepad
Mozila Firefox or Internet Explorer open address
localhost/firstjavascript.html localhost/
) enter press

2.1.26-Enter Press
HTML)
(HyperText Markup Language)
(HTML)
Hyper : HTML
"Hyper"

Text : Text

Markup :
Markup. <a>

Language :
HTML (Markup Language), XML (Markup Language), PHP
(Programming Language)

HTML

HTML

ASCII (American Standard Code for Information Interchange)


HTML HTML
HTML HTML
HTML

CSS (Cascading Style Sheet)


CSS

(PHP, JAVA, JavaScript )


HTML

HTML.
Web Design/Development
HTML.

HTML HTML
HTML
HTML

HTML
HTML <html> html </html>
(html html
html head
body head
head body

body

HTML

Start Run
Start Run
Window R)

Window key + R
Open "notepad" Ok

notepad OK
HTML
HTML
<html>
<head>
<title> This is my first HTML Program ;) </title>
</head>
<body>
Hellow World !!
</body>
</html>

p1.html) HTML

Notepad HTML

HTML File Save As...

File Save As...


.html
File name

html html
HTML " ")
" ") "_")
Save as type All Files

Save as type All Files


Save

Save

Open With
Internet Explorer, Mozilla Firefox, Google Chrome, Opera
HTML
HTML
HTML <html> html </html>
(html <html> </html>
<html>
</html>
<html> <head> <head>
head (<head> </head>) body

<html>
<head>
</head>
</html>
<head> <title>
<title> This is my first HTML Program ;) </title>
<html>
<head>
<title> This is my first HTML Program ;) </title>
</head>
</html>

Title
<head> <body>
<body> Hellow World!!
<body>
HTML "<body> Hellow
World !! </body>"
<html>
<head>
<title> This is my first HTML Program;) </title>
</head>
<body>
Hellow World !!
</body>
</html>

<body>
(Comments):

(Comments)
(!--)
<!-- -->
<!--This is a comment & will not be displayed in the browser -->
This is a comment. The Comment line (s) w. . .

Heading (<h1> <h6>) Elements

(<h1> <h6>)
h1 (Heading 1)
h2 (Heading 2)
h3 (Heading 3)
h4 (Heading 4)
h5 (Heading 5)
h6 (Heading 6)
Heading 1 (<h1>)

<!DOCTYPE html>
<html>
<head>
<title> The example of Heading Elements </title>
</head>

<body>
<h1> This is Heading 1 The largest one </h1>
<h2> This is Heading 2 The larger one </h2>
<h3> This is Heading 3 Larger than (h4,h5 & h6) </h3>
<h4> This is Heading 4 Smaller than (h3) </h4>
<h5> This is Heading 5 Larger than (h6) </h5>
<h6> This is Heading 6 The smallest one </h6>

</body>
</html>

(p2.html)

(<h1> <h6>)
(<h1> </h1>) "This is Heading 1 The largest one"
(<h2> </h2>) "This is
Heading 2 The larger one"
Paragraph (<p>) Element
<p>
<p>

<!DOCTYPE html>
<html>
<head>
<title> The example of Paragraph Element </title>
</head>
<body>
<h1 align="center"> Paragraph Element </h1>
<p> This is a paragraph. This is a paragraph. This is a paragraph. This is a
paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a
paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a
paragraph. This is a paragraph. </p>
</body>
</html>

p3.html) Paragraph
<h1 align="center">
(<p>)

(&nbsp;)
HTML

(White Space Collapsing)

<!DOCTYPE html>
<html>
<head>
<title> Use of Non-Breaking Space </title>
</head>
<body>
<h1 align="center"> White Space Collapsing! </h1>
<p> The browser will show only one space
instead of using extra spaces in HTML Editor.
The browser will show only one space
instead of using extra spaces in HTML Editor. The
browser will show only one space instead of using
extra spaces in HTML Editor.</p>

</body>
</html>

p4.html)
(&nbsp;)
HTML Entity Entity

<!DOCTYPE html>
<html>
<head>
<title> Use of Non-Breaking Space </title>
</head>
<body>
<h1 align="center"> Non-Breaking Space Entity! </h1>

<p> The Non-Breaking Space Entity creates extra space for displaying in
webpages. </p>
<p> The &nbsp; &nbsp; &nbsp; Non &nbsp; &nbsp; &nbsp; Breaking &nbsp;
&nbsp; &nbsp; Space. </p>
</body>

</html>

p5.html)
(&nbsp;)

(<br />) Element

Enter

p6.html)
(<br/>)

<!DOCTYPE html>
<html>
<head>
<title> Use of Line Break Element </title>
</head>
<body>
<h1 align="center"> Poem Writing using Line Break Element! </h1>
<p>
My Bonnie lies over the ocean. <br />
My Bonnie lies over the sea. <br />
My Bonnie lies over the ocean. <br />
Oh, bring back my Bonnie to me. <br />
</p>
</body>
</html>

p7.html)
Font (<font>) Element

Font
Font
color

Value :
color value/ Color

1. Color name "green,red,yellow");


2. RGB (Red, Greeen & Blue) Code-RGB rgb(0,0,0)
3. Hex (Hexadecimal) "#0000FF"

<font color="Color_name RGB_Code Hex_Code">


color
Hex_Code
<!DOCTYPE html>
<html>
<head>
<title> Use of Color Attribute in HTML Font Element </title>
</head>
<body>
<h1> Set Text/Font Color using Hex_Code! </h1>
<font color="#FFA500"> This Font/Text will be displayed as Orange Color.
This Font/Text will be displayed as Orange Color. This Font/Text will be
displayed as Orange Color. This Font/Text will be displayed as Orange Color.
This Font/Text will be displayed as Orange Color.</font>
</body>
</html>
(p8.html) <font> color

<font color="#FFA500">
Orange ( Hex_Code "#FFA500"
color
Color_Name
<!DOCTYPE html>
<html>
<head>
<title> Use of Color Attribute in HTML Font Element </title>
</head>
<body>
<h1> Set Text/Font Color using Color_Name! </h1>
<font color="Orange"> This Font/Text will be displayed as Orange Color. This
Font/Text will be displayed as Orange Color. This Font/Text will be displayed
as Orange Color. This Font/Text will be displayed as Orange Color. This
Font/Text will be displayed as Orange Color.</font>
</body>
</html>

(p9.html) <font> color

<font color="Orange ">


Orange ( Color_Name "Orange"
color
face
Arial, Calbiri, Courier, Times New Roman

Value :
face value/

<font face="Font_Name">
face
<!DOCTYPE html>
<html>
<head>
<title> Use of Face Attribute in Font Element </title>
</head>
<body>
<h1 align="center"> Set different types of Fonts using Face Attribute !</h1>
<font face="Times New Roman"> <p> This is a paragraph, shown in the
Times New Roman font.</p> </font>
</body>
</html>
(p10.html) <font> face

"Times New Roman"


face
<!DOCTYPE html>
<html>
<head>
<title> Use of Face Attribute in Font Element </title>
</head>
<body>
<h1 align="center"> Set different types of Fonts using Face Attribute !</h1>
<font face="Arial"> <p> This is a paragraph, shown in the Arial font.</p>
</font>
</body>
</html>

(p11.html) <font> face

"Arial"
face
size

Value :
size value/ 12 .

<font size="+(1-7)/-(1-7)">
size

<!DOCTYPE html>
<html>
<head>
<title> Use of Size Attribute in Font Element </title>
</head>
<body>
<h1 align="center"> Set Fonts Size using Size Attribute !</h1>
<font size="+2"> This line should be displayed larger than normal size. </font>
</body>
</html>

(p12.html) <font> size


+2

face
<!DOCTYPE html>
<html>
<head>
<title> Use of Size Attribute in Font Element </title>
</head>
<body>
<h1 align="center"> Set Fonts Size using Size Attribute !</h1>
<font size="-1"> This line should be displayed smaller than normal
size.
</font>
</body>
</html>

(p13.html) <font> size


-1

size
HTML Presentational Elements:

Presentational Elements
Bold <b> Element:

<!DOCTYPE html>
<html>
<head>
<title> Use of HTML Presentational Elements! </title>
</head>
<body>
<h1 align="center"> Bold Element </h1>
<b> This line should be displayed as bold </b>
</body>
</html>

(p14.html) <b>
(<b> </b>)

Italic <i> Element:

<!DOCTYPE html>
<html>
<head>
<title> Use of HTML Presentational Elements! </title>
</head
<body>
<h1 align="center"> Italic Element </h1>
<i> This line should be displayed as italic </i>
</body>
</html>

(p15.html) <i>

(<i> </i>)
Underline <u> Element:

<!DOCTYPE html>
<html>
<head>
<title> Use of HTML Presentational Elements! </title>
</head>
<body>
<h1 align="center"> Underline Element </h1>
The following word would be <u> Underlined </u>
</body>
</html>

(p16.html) <u>

(<u> </u>) (Underlined)


<s> <strike> Elements:
<s> <strike> Strikethrough

<!DOCTYPE html>
<html>
<head>
<title> Use of HTML Presentational Elements! </title>
</head>
<body>
<h1 align="center"> Strikethrough Elements </h1>
<p> These Elements are not <s> available </s> in HTML 5 version </p>
<p> These Elements are not <strike> available </strike> in HTML 5 version
</p>
</body>
</html>

(p17.html) <s> <strike>


(<s> </s>) (<strike> </strike>)
(available)

<tt> Element:
TeleType tt.

<!DOCTYPE html>
<html>
<head>
<title> Use of HTML Presentational Elements! </title>
</head>
<body>
<h1 align="center"> TeleType Element </h1>
The following word would be <tt> TeleTyped </tt>
</body>
</html>

(p18.html) <tt>
(<tt> </tt>) (TeleTyped)

<sup> Element:
Superscript sup.

<!DOCTYPE html>
<html>
<head>
<title> Use of HTML Presentational Elements! </title>
</head>
<body>
<h1 align="center"> Superscript Element </h1>
This Book written on the 15<sup>th</sup> March.
</body>
</html>

(p19.html) <sup>
(<sup>) (th)

<sub> Element:
Subscript sub.

<!DOCTYPE html>
<html>
<head>
<title> Use of HTML Presentational Elements! </title>
</head>
<body>
<h1 align="center"> Subscript Element </h1>
The EPR paradox< sub >2< /sub > was devised by Einstein, Podolsky, and
Rosen.
</body>
</html>

(p20.html) <sub>
(<sub>) (2)

<big> Element:

<!DOCTYPE html>
<html>
<head>
<title> Use of HTML Presentational Elements! </title>
</head>
<body>
<h1 align="center"> Big Element </h1>
The following word should be <big> bigger </big> than those around it.
</body>
</html>

(p21.html) <big>

(<big>) (bigger)
<small> Element:

<!DOCTYPE html>
<html>
<head>
<title> Use of HTML Presentational Elements! </title>
</head>
<body>
<h1 align="center"> Small Element </h1>
The following word should be <small> smaller </small> than those around it.
</body>
</html>

(p22.html) <small>

(<small>) (smaller)
<hr> Element:
Horizontal hr.

<!DOCTYPE html>
<html>
<head>
<title> Use of HTML Presentational Elements! </title>
</head>
<body>
<h1 align="center"> HR Element </h1>
<h1>HTML</h1>
<p>HTML is a language for describing web pages.</p>
<hr />
<h1>CSS</h1>
<p>CSS defines how to display HTML elements.</p> </body>
</html>

(p23.html) <hr>

<p>HTML is a language for describing web pages.</p> <hr>


List <list>

Unordered List (
Ordered List (
Definition List ( )

<ol>, <ul>, <dir> <menu>

Ordered List (ol)

<!DOCTYPE html>
<html>
<head>
<title> Use of HTML Lists! </title>
</head>
<body>
<h1 align="center"> Ordered List Element </h1>
<ol>
<li> Point number one </li>

<li> Point number two </li>


<li> Point number three </li>
</ol>
</body>

</html>

(p24.html)

<ol>
<li>

<ol>
<!DOCTYPE html>

<html>

<head>

<title> Use of HTML Lists! </title>


</head>
<body>
<h1 align="center"> Ordered List Element </h1>
<ol>
<li> Web Design </li>
<li> Web Development </li>
<li> Web Programming </li>
</ol>
</body>
</html>

(p25.html)

<ol>
<li>

<ol>

type

type
type
1(
A( )
a( )
I
i( )

<ol type="1 A a I i")

<!DOCTYPE html>
<html>
<head>
<title> Use of HTML Lists! </title>
</head>
<body>
<h1 align="center"> Type Attribute in Ordered List Element </h1>
<ol type="1">
<li> Web Design </li>
<li> Web Development </li>
<li> Web Programming </li>
</ol>
</body>
</html>

(p26.html)

<ol> type
<ol> type

<!DOCTYPE html>
<html>
<head>
<title> Use of HTML Lists! </title>
</head>
<body>
<h1 align="center"> Type Attribute Ordered List Element </h1>
<ol type="A">
<li> Web Design </li>
<li> Web Development </li>
<li> Web Programming </li>
</ol>
</body>
</html>

(p27.html)

<ol> type
<ol> type

<!DOCTYPE html>
<html>
<head>
<title> Use of HTML Lists! </title>
</head>
<body>
<h1 align="center"> Type Attribute in Ordered List Element </h1>
<ol type="a">
<li> Bangladesh </li>
<li> India </li>
<li> Pakistan </li>
<li> Australia </li>
<li> South Africa </li>
<li> Newzealand </li>
<li> England </li>
<li> Zimbabwe </li>
</ol>
</body>
</html>
(p28.html)
<ol> type

<ol> type

<!DOCTYPE html>
<html>
<head>
<title> Use of HTML Lists! </title>
</head>
<body>
<h1 align="center"> Type Attribute in Ordered List Element </h1>
<ol type="I">
<li> Bangladesh </li>
<li> India </li>
<li> Pakistan </li>
<li> Australia </li>
<li> South Africa </li>
<li> Newzealand </li>
<li> England </li>
<li> Zimbabwe </li>
</ol>
</body>
</html>

(p29.html)

<ol> type

<ol> type
<!DOCTYPE html>
<html>
<head>
<title> Use of HTML Lists! </title>
</head>
<body>
<h1 align="center"> Type Attribute in Ordered List Element </h1>
<ol type="i">
<li> Bangladesh </li>
<li> India </li>
<li> Pakistan </li>
<li> Australia </li>
<li> South Africa </li>
<li> Newzealand </li>
<li> England </li>
</ol>
</body>
</html>

(p30.html)

<ol> type

<ol> type
start
1,a,A,i I)
start

start

<ol start="number">
number
3 number 3
<!DOCTYPE html>
<html>
<head>
<title> Use of HTML Lists! </title>
</head>
<body>
<h1 align="center"> Type and Start Attributes in Ordered List Element
</h1>
<ol type="1" start="3">
<li> Bangladesh </li>
<li> India </li>
<li> Pakistan </li>
<li> Australia </li>
<li> South Africa </li>
<li> Newzealand </li>
<li> England </li>
</ol>
</body>
</html>

(p31.html)

<ol> type
start 3
3
<ol> type start

<!DOCTYPE html>
<html>
<head>
<title> Use of HTML Lists! </title>
</head>
<body>
<h1 align="center"> Type and Start Attributes in Ordered List Element
</h1>
<ol type="A" start="3">
<li> Bangladesh </li>
<li> India </li>
<li> Pakistan </li>
<li> Australia </li>
<li> South Africa </li>
<li> Newzealand </li>
<li> England </li>
</ol>
</body>
</html>

(p32.html)

<ol> type
start 3
C

<ol> type start

<!DOCTYPE html>
<html>
<head>
<title> Use of HTML Lists! </title>
</head>
<body>
<h1 align="center"> Type and Start Attributes in Ordered List
Element
</h1>
<ol type="a" start="5">
<li> Bangladesh </li>
<li> India </li>
<li> Pakistan </li>
<li> Australia </li>
<li> South Africa </li>
<li> Newzealand </li>
<li> England </li>
</ol>
</body>
</html>

(p33.html)

<ol> type
start 5
e
<ol> type start

<!DOCTYPE html>
<html>
<head>
<title> Use of HTML Lists! </title>
</head>
<body>
<h1 align="center"> Type and Start Attributes in Ordered List Element
</h1>
<ol type="I" start="5">
<li> Bangladesh </li>
<li> India </li>
<li> Pakistan </li>
<li> Australia </li>
<li> South Africa </li>
<li> Newzealand </li>
<li> England </li>
</ol>
</body>
</html>

(p34.html)
<ol> type
start 5
V

<ol> type start

<!DOCTYPE html>
<html>
<head>
<title> Use of HTML Lists! </title>
</head>
<body>
<h1 align="center"> Type and Start Attributes in Ordered List Element
</h1>
<ol type="i" start="4">
<li> Bangladesh </li>
<li> India </li>
<li> Pakistan </li>
<li> Australia </li>
<li> South Africa </li>
<li> Newzealand </li>
<li> England </li>
</ol>
</body>
</html>

(p35.html)

<ol> type
start 4
iv

<ol> type start

Unordered List (ul)

<!DOCTYPE html>
<html>
<head>
<title> Use of HTML Lists! </title>
</head>
<body>
<h1 align="center"> Unordered List Element
</h1>
<ul>
<li> Bangladesh </li>
<li> India </li>
<li> Pakistan </li>
<li> Australia </li>
<li> South Africa </li>
<li> Newzealand </li>
<li> England </li>
</ul>
</body>
</html>

(p36.html)

<ul>
<li>
<ul>

type

type

type
disc (disc )
square (square/
circle (circle/

<ul type="disc square circle")

<!DOCTYPE html>
<html>
<head>
<title> Use of HTML Lists! </title>
</head>
<body>
<h1 align="center"> Unordered List Element
</h1>
<ul type="disc">
<li> Bangladesh </li>
<li> India </li>
<li> Pakistan </li>
<li> Australia </li>
<li> South Africa </li>
<li> Newzealand </li>
<li> England </li>
</ul>
</body>
</html>
(p37.html) <ul> type

<ul> type disc

<ul> type
<!DOCTYPE html>
<html>
<head>
<title> Use of HTML Lists! </title>
</head>
<body>
<h1 align="center"> Type Attribute in Unordered List Element </h1>
<ul type="square">
<li> Bangladesh </li>
<li> India </li>
<li> Pakistan </li>
<li> Australia </li>
<li> South Africa </li>
<li> Newzealand </li>
<li> England </li>
</ul>
</body>
</html>

(p38.html) <ul> type

<ul> type square

<ul> type
<!DOCTYPE html>
<html>
<head>
<title> Use of HTML Lists! </title>
</head>
<body>
<h1 align="center"> Type Attribute in Unordered List Element </h1>
<ul type="circle">
<li> Bangladesh </li>
<li> India </li>
<li> Pakistan </li>
<li> Australia </li>
<li> South Africa </li>
<li> Newzealand </li>
<li> England </li>
</ul>
</body>
</html>

(p39.html) <ul> type

<ul> type circle

<ul> type
Definition List (<dl>,<dt> & <dd>)
Definition List Defininition
List <dl> <dl> <dt>
<dd> Definition Term <dt>.
<dd>

<!DOCTYPE html>
<html>
<head>
<title> Use of HTML Lists! </title>
</head>
<body>
<h1 align="center"> Definition List Element </h1>
<dl>
<dt> Unordered List </dt>
<dd> A list of bullet points. </dd>
<dt> Ordered List </dt>
<dd> An ordered list of points, such as a numbered set of steps.</dd>
<dt> Definition List < /dt >
<dd> A list of terms and definitions. </dd>
</dl>
</body>
</html>

(p40.html) Definition List

Definition List <dl> Definition


Term <dt>
<dd>
<dl>, <dt> <dd>

<!DOCTYPE html>
<html>
<head>
<title> Use of HTML Lists! </title>
</head>
<body>
<h1 align="center"> Definition List Element </h1>
<dl>
<dt> HTML </dt>
<dd> HTML is a Markup Language. </dd>
<dt> CSS </dt>
<dd> CSS stands for Cascading Style Sheet </dd>
<dt> PHP < /dt>
<dd> PHP is a Server-Side Scripting Language </dd>
</dl>
</body>
</html>

(p41.html) Definition List


Definition List <dl> Definition
Term <dt>
<dd>

<dl>, <dt> <dd>


Nesting Lists:

<!DOCTYPE html>
<html>
<head>
<title> Use of HTML Lists! </title>
</head>
<body>
<h1 align="center"> Nesting List </h1>
<ul>
<li> Dhaka
<ul>
<li> Munshiganj </li>
<li> Narayangonj </li>
</ul>
</li>
<li> Rajshahi </li>

<li> Barisal </li>


<li> Chittagong </li>
<li> Khulna </li>
<li> Rongpur </li>
</ul>
</body>
</html>

(p42.html)

Dhaka
<li> <ul> <ul>
<ul> Mungshiganj Narayangonj
Munshiganj Narayangonj Dhaka
Dhaka
Dhaka </li> </ul>
(Narayangonj)
Narayangonj <ul>
<ul> Rongpur

www.bookbd.info

infobook7@gmail.com.

01712901842
Email: infobook7@gmail.com