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
Object based internet programming language

Language

Object based internet programming language

Netscape Navigator
Microsoft Internet Explorer
Firefox
Safari
Opera
Google Chrome
Brendan Eich

Mocha
LiveScript

LiveScript

Netscape
JavaScript

Lightweight

JDK (Java Development Kit)

Virtual Machine

Interpreter

Syntax

HTML mix
Text editor
Notepad

Hottest
User friendly
Secure

start

start
All Programs

Accessories

All Programs
Accessories

Accessories
Notepad

Notepad

Notepad

Notepad

Notepad
Untitled

Notepad
File

Save As

File

Save As

Save AS

Save AS
File name
All Files

Save as type
Save

Save

firstjavascript (firstjavascript.html

Notepad
Mozila Firefox
localhost/firstjavascript.html (
)
enter press

Internet Explorer open


localhost/

address

Enter Press

XAMPP

XAMPP

XAMPP
XAMPP
open

XAMPP
XAMPP

open

open

XAMPP
Apache

MySql

open
Start

Apache

Start

Apache
Computer

MySql

Start

XAMPP

MySql

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
All Files

Save as type
Save

Save

firstjavascript

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

2.1.26-Enter Press

address

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
body

<html> html
html

</html>
head

head
head

body

HTML

Start

Run

body

Start
Window

Run

R)

Window key + R

Open

"notepad"

notepad

Ok

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

File

Save As...

Save As...

.html
File name

html
HTML
" ")
Save as type

html
" ")
"_")

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
World !! </body>"
<html>
<head>
<title> This is my first HTML Program;) </title>

"<body> Hellow

</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> </h1>)
Heading 2 The larger one"

(<h1>
<h6>)
"This is Heading 1 The largest one"
(<h2> </h2>)
"This is

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
color
Hex_Code

RGB_Code

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>

Orange (

color
<font color="#FFA500">
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>

Orange (

color
<font color="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>
<s>

<strike> Elements:
<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

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
start

I)

start
<ol start="number">
number
3

number

<!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

<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

<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>
e

type
start

<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

<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

iv

<ol>

Unordered List (ul)

<!DOCTYPE html>
<html>
<head>

type

start

<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>
<ul>

type
type

<ul>

disc

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>
<ul>

type
type

<ul>

square

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>
<ul>

type
type

<ul>

circle

type

Definition List (<dl>,<dt> & <dd>)


List

Definition List
<dl>
Definition Term

<dl>
<dd>

Defininition
<dt>
<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
Term
<dd>

<dl>
<dt>

Definition

<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
Term

<dl>
<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>

Definition

</li>
<li> Rajshahi </li>
<li> Barisal </li>
<li> Chittagong </li>
<li> Khulna </li>
<li> Rongpur </li>
</ul>
</body>
</html>
(p42.html)
Dhaka
<li>

Dhaka

<ul>

<ul>
Mungshiganj
Narayangonj

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

<ul>

Narayangonj
Dhaka

Rongpur

www.bookbd.info

infobook7@gmail.com.

01712901842
Email: infobook7@gmail.com

Das könnte Ihnen auch gefallen