HTML-Bangla E-book

Page 2 of 62 Ashek

HTML- বাাংলা ই-বক

(For All Users)

2013

<html>

Av‡kK gvngy` Lvb

Kw¤úDUvi weÁvb I cÖ‡K․kj wefvM (2q el©)

h‡kvi weÁvb I cÖhyw³ wek¦we`¨vjq, h‡kvi|

Mobile: 01725-402592

Page 3 of 62 Ashek

Web Concepts

I‡qe wK? I‡q‡ei BwZnvm wK? ïiæ‡Z Avgiv GB m¤ú©‡K Rvb‡ev- cÖ_‡g Internet Ges World Wide Web (www)

Kx GB m¤ú©‡K Rvbv ìKvi, GwU GKwU cÖPwjZ avibv †h, Internet Ges World Wide Web GKB wRwbm| wKš‘ GB

ywU wRwbm GK bq, Internet ≠ World Wide Web.

Internet:

Internet n‡”Q Ggb GKwU eë¯’v hvi gva¨‡g AmsL¨ Computer, Laptop ev Mobile phone GKB mv‡_

Connected ev mshy³ _v‡K| hw` Avgiv GKUv wfbœ agx© D`vnib †`wL- †hgb: aiv hvK GKwU RvqMvq AmsL¨ Ni-evwo

Av‡Q wKš‘ Zv‡ì g‡a¨ †hvMv‡hv‡Mi hw` †Kvb iv¯Ív bv _v‡K Zvn‡j GK evmv †_‡K Ab¨ evmvq hvIqv hv‡e bv| Z‡e Avgiv

hw` GKUv eë¯’v Kwi †h, hvi gva¨‡g me¸‡jv mshy³ _vK‡e A_©vr Avgiv hw` GKUv iv¯Ív •Zwi Kwi Zvn‡j Avgiv GK evmv

†_‡K Av‡iK evmvq †h‡Z cvie Zvi gv‡b Avgiv ej‡Z cvwi evmv¸‡jv ci¯ú‡ii mv‡_ mshy³ ev Connected. Internet

n‡”Q GB ms‡hvM eë¯’vi gZb hvi gva¨‡g GKUv Computer †_‡K Ab¨ GKUv Computer G †hvMv‡hvM Kiv †h‡Z cv‡i|

wKsev Avgiv †Uwj‡dvb w`‡qI Gi D`vnibUv w`‡Z cvwi wKQz w`b Av‡MI Avgiv †jb †dvb Anin eënvi KiZvg hwÌ GLb

†gvevBj †dvb P‡j Avm‡Q mevB Avgiv †gvevBj †dvb eënvi Kwi| wKš‘ †jb †dv‡bi eënvi GLbI †`Lv hvq| GKUv

†dv‡bi mv‡_ Av‡iKUv †dvb Zv‡ii gva¨‡g mshy³ _v‡K| Avi ms‡hvM Av‡Q weavq Avgiv G‡K Ac‡ii mv‡_ †hvMv‡hvM

Ki‡Z cvwi| Avi B›Uvi‡bU n‡”Q †Zgwb GKUv ms‡hvM cÖwµqv †h, hw` GKUv Computer Gi mv‡_ Av‡iKUv Computer

Gi Internet Gi gva¨‡g ms‡hvM _v‡K Zvn‡j Avgiv Lye mn‡RB GKUv Computer †_‡K Ab¨ GKUv Computer G

†hvMv‡hvM Ki‡Z cvwi| A_v©r Internet n‡”Q GKUv ms‡hvM eë¯’v| Internet Gi avibv Av‡m me©cÖ_g 1950 mv‡j| ZLb

ïay mvgwiK Kv‡R Internet eënvi Kiv n‡Zv| A_©vr hy× †ÿ‡Î wewfbœ RvqMvq †hvMv‡hv‡Mi Rb¨ Internet Gi avibv

eënvi Kiv n‡Zv|

Web:

GKUv Computer †_‡K hw` Ab¨ GKUv Computer G Z_¨ Av`vb cÖ`vb Ki‡Z PvB Zvn‡j †h Procedure follow

Ki‡Z n‡e †mUvB n‡”Q Web. Web Gi BwZnvm wb‡¤œ †Ìqv nj-

Page 4 of 62 Ashek

Zvn‡j ejv hvq n‡”Q B›Uvi‡bU eënvi K‡i ywU h‡š¿i g‡a¨ Z_¨ Av`vb cÖ`vb Kivi GKUv wm‡÷g| GUv wKš‘ c~Yv©½ ms½v

bq| GLv‡b kZ© n‡”Q hš¿ ywU‡K Aek¨B B›Uvi‡b‡Ui gva¨‡g mshy³ _vK‡Z n‡e|

mvf©vi (Server):

‡h Computer †_‡K Z_¨ hv‡”Q †mUv n‡”Q mvf©vi | mvfv©‡ii KvR n‡”Q I‡qe mvBU (Website) Host Kiv|

K¬v‡q›U:

Avi †h Computer G Z_¨ Avm‡Q †mUv n‡”Q K¬v‡q›U|

HTML Kx ?

HTML GKUv Kw¤úDUvi Language, hv c„w_exi wekvj Z_¨ fvÛvi‡K B›Uvi‡b‡Ui gva¨‡g cÖKvk Ki‡Z mvnv‡h¨ K‡i|

HTML †Kvb †cÖvMÖvwgs Language bq| HTML gv‡b n‡”Q Hyper Text Markup Language. GBP wU Gg

Gj nj I‡qe wWRvB‡bi g~j wfwË hv w`‡q I‡qe †cR •Zwi Kiv nq|

HTMLGi BwZnvm:

HTML ev Hyper Text Markup Languag •Zwi

K‡i‡Qb ÒwUg evbv©m-jxÓ| HTML •Zwii D‡Ïk¨ n‡”Q †Kvb

Z_¨ ev DcvË‡K ªæZ c„w_exi wewfbœ ¯’v‡b †c․Qv‡bi eë¯’v Kiv|

1990 mv‡ji w`‡K NCSA KZ…©K Devolope K…Z †gvRvBK

eªvDRv‡ii gva¨‡g cwiwPwZ jvf K‡i|

mvavib GKUv Wavepage design Gi Rb¨ (A_©vr wb‡Pi page wUi gZ) Avgv‡ì PviwU wRwbm ìKvi| ‡hgb:

Page 5 of 62 Ashek

HTML ÷ªvKPvi:

<html>

<head>

<title> ------------------- </title>

</head>

<body>

. ------------------------

. </body>

</html>

HTML Gi Dcv`vb w`‡q GKUv page-Gi ÷ªvKPvi †Kgb nq Zv wb‡¤œ †`Lv‡bv nj-

Page 6 of 62 Ashek

Avgiv GLb GKUv Opening Ges Closing U¨v‡Mi ÷ªvKPvi †`Le, A_v©r GKUv Opening Ges

Closing U¨vM wK wK Dcv`vb wb‡q MwVZ ??

<html> U¨vM:

HTML G hw` Avgiv †Kvb wKQz wjL‡Z PvB (A_©vr HTML WKz‡g›U) Zvn‡j <html>……</html> GB U¨v‡Mi

wfZ‡i mg¯Í ‡KvW ¸‡jv wjL‡Z n‡e|

Page 7 of 62 Ashek

<head> U¨vM:

<head> </head> GB U¨v‡Mi wfZ‡i <title> --</title> U¨vM wjLv nq| hvi gva¨‡g I‡qfmvB‡Ui title ev wkibvg

cÖKvk Kiv nq (†hgb: www.ashek.info) GQvov CSS Gi Stylesheet Gi g‡a¨ Call Kiv nq|

<body> U¨vM:

<body> </body> GB U¨vMwU HTML Gi Rb¨ LyeB ¸iæZ¡ c~Y©| hvi wfZ‡i I‡qfmvB‡Ui g~j Content ¸‡jv Ae¯’vb

K‡i| A_©vr HTML Gi mg¯Í †KvW ¸‡jv <body> GB U¨v‡Mi wfZ‡i wjL‡Z nq|

HTML Gi mvavib U¨vM mg~n

HTML Headings: HTML G †Kvb WKzg‡›Ui wkibvg wjLvi ‡ÿ‡Î †nwWs U¨vM eenvi

Kiv nq| HTML Gi 6 Uv Heading level Av‡Q| †hgb-

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Dc‡i cv‡ki Result G Avgiv †`L‡Z cvw”Q <h1> Gi output hZUv eo n‡q‡Q <h2> GiUv Zvi †P‡q GKUz ‡QvU

n‡q‡Q, G fv‡e µgvb‡q P‡j Avm‡Q............|

Paragraph Tag

<p> GB U¨vM w`‡q paragraph cÖKvk Kiv nq| </p> hw` †Kvb WKz‡g›U‡K GK ev GKvwaK c¨vivMÖv‡d cÖKvk

Ki‡Z PvB ZLb Avgiv GB U¨vM eënvi Kie|

wb‡P Avgiv GKwU D`vnviY †`wL-

Page 8 of 62 Ashek

AvDUcyU Avm‡e GiKg:

Bold & Italic Tag:

<b> GB U¨vM w`‡q ‡jLv‡K †evì Kiv nq| </b>

†hgb:


we: ª:

<strong> GB U¨vM w`‡qI ‡jLv‡K †evì Kiv nq| </strong>

---------------------------------------

Page 9 of 62 Ashek

<i> GB U¨vM w`‡q ‡jLv‡K BUvwjK ni‡d †`Lvq </i>

†hgb:

<html>

<body>

<h2><i>Ashek Mahmud Khan. Department of Computer Science and Engineering.

Jessore Science and Technology University, Jessore.</i></h2>

</body>

</html>


Dc‡i Avgiv †`L‡Z cvw”Q †jLv ¸‡jv GKUz euvKv †`Lv‡”Q A_©vr hv BUvwjK ni‡d Convert n‡q‡Q| G fv‡e Avgiv BUvwjK

nid wjL‡Z cvwi|

we: ª:

** Emphasis: <em> GB U¨vM w`‡qI ‡jLv‡K BUvwjK ni‡d †`Lvq | </em>

** Citations: <cite> GB U¨vM w`‡qI ‡jLv‡K BUvwjK ni‡d †`Lvq | </cite >

** Definitions : <dfn> ‡U·U Gi †Wwd‡bkb Uv©g †`Lvq Ges GB U¨vM w`‡qI ‡jLv‡K BUvwjK d‡g© wb‡q Avmv hvq|

</dfn>

=============0=============

Superscript & Subscript

<sup> GB U¨vM Øviv DaŸ©wjwc ev Dc‡i eySvq A_v©r cvIqvi (Power), eM© (Square) wn‡m‡e †Kvb wKQz

wjL‡Z eënvi Kiv nq| </sup>

†hgb:

<html>

<body>

Page 10 of 62 Ashek

<h2>On the 4<sup>th</sup> of September you will learn about E=MC

<sup>2 </sup>. </h2>

</body>

</html>


<sub> GB U¨vM Øviv wb¤œwjwc ev wb‡P eySvq A_v©r ‡Kvb Dcv`v‡bi wb‡P (†hgb- X2, Co2, log2) wKQz wjL‡Z eënvi Kiv

nq| </sub>

†hgb:

<html>

<body>

<h2>The amount of CO<sub>2</sub> in the atmosphere grew by 2ppm in

2009 <sub>100</sub>.</h2>

</body>

</html>

AvDUcyU wb‡P †`Lv‡bv nj:

Line Breaks

<br> jvBb ‡eªK U¨vM, GKwU c¨vivMÖvd †k‡l Av‡iKwU c¨vivMÖvd wjL‡Z bZzb K‡i c¨vivMÖvd U¨vM eënvi

bv K‡i <br> U¨vM eënvi Kiv hvq| GB U¨vM‡K jvBb ‡eªK U¨vM ejv nq| KviY GB U¨vM GK jvBb duvKv ¯’vb †i‡L

bZzb jvBb •Zwi K‡i|

†hgb:

Page 11 of 62 Ashek

<html>

<body>

<h3>Ashek Mahmud Khan.<br>Department of <br>Computer Science and

<br>Engineering.<br> Jessore Science and Technology University, <br> Jessore. </h3>

</body>

</html>


Dc‡ii Result-G Avgiv †`L‡Z cvw”Q †h, †jLv ¸‡jvi †hLv‡b †eªK U¨vM eënvi Kiv n‡q‡Q †mLvb †_‡KB bZzb jvBb

ïiæ n‡q‡Q|

=============0=============

Horizontal Rules (Avbyf~wgK †iLv)

Avbyf~wgK †iLv •Zwi‡Z <hr> U¨vM eënvi Kiv nq, Gi †Kvb †kl U¨vM †bB| Underline e¨ZxZ hw` †Kvb

Horizontal †iLvi cÖ‡qvRb nq Zvn‡j Avgiv GB U¨vM eënvi Ki‡Z cvwi|

GLb wb‡P Avgiv Gi GKwU D`vniY †`Le-

<html>

<body>

<p><h3>Ashek Mahmud Khan.</h3>

<hr>

<h4>Department of Computer Science and Engineering.</h4>

<hr>

<h5>Jessore Science and Technology University, Jessore.</h5>

Page 12 of 62 Ashek

</body>

</html>


Quotations

<q> k©U †Kv‡Uk‡bi Rb¨ ev BbjvB‡b DØ„wZ cÖKvk Kivi Rb¨ GB U¨vM eënvi Kiv nq| </q>


<html>

<body>

<h3>A.A. Milne said, <q>Some people talk to animals. Not many listen though.

That's the problem.</q></h3>

</body>

</html>


Dc‡ii Result-G Avgiv †`L‡Z cvw”Q †h, <q> U¨vM eënv‡ii d‡j BbjvBb DØ„wZ A_v©r †jLv ¸‡jv Wvej †Kv‡Ukb Øviv

Ave× ‡`Lv‡”Q|

-------------------------------------------------------

<blockquote> ‡Kv‡Ukb ‣Zwii Rb¨ ev DØ„wZ cÖKvk Kivi Rb¨ GB U¨vM eënvi Kiv nq| </blockquote>

GLb wb‡P Avgiv Gi GKwU D`vniY †`wL-

Page 13 of 62 Ashek

<html>

<body>

<h3>My Name is Ashek Mahmud Khan. I am a Student of Jessore Science and

technology University, Jessore.</h3>

<h2><blockquote> My Department name is Computer Science and Engineering.

</blockquote></h2>

<h3>My Name is Ashek Mahmud Khan. I am a Student of Jessore Science and

technology University, Jessore.</h3>

</body>

</html>


A_v©r Dc‡ii Result †_‡K Avgiv †`L‡Z cvw”Q †h, <blockquote> U¨vM eënvi K‡i Avgiv †Kvb cÖeÜ ev Aby‡”Q‡ì

wfZ‡i ‡Kv‡Ukb •Zwi Ki‡Z cvwi|

=============0=============

Abbreviations & Acronyms

I‡qe †c‡R †Kvb GKwU we‡kl k‡ãi Dci Kvm©i ivL‡j H kã m¤ú©‡K GKwU Z_¨ AvqZKvi ev‡· ‡`Lv

hvq| <acronym> GB U¨vM Øviv GB KvRwU Kiv nq|


<html> <body>

Page 14 of 62 Ashek

<p> <acronym title="HTML is a Markup Language"> HTML </acronym> is the

basic markup language for web page.It is created by Tim Berners Lee.It is controlled

by <acronym title="World Wide Web Connection">W3C </acronym > </p>

</body>

</html>


Dc‡ii AvDUcyU As‡k W3C Gi Dci Kvm©i ivL‡j jvj e‡·i †jLvUv †`Lv‡e|

-------------------------------------------------------

<abbr> I‡qe †c‡R †Kvb GKwU we‡kl k‡ãi Dci Kvm©i ivL‡j H kã m¤ú©‡K GKwU Z_¨ AvqZKvi ev‡· ‡`Lv hvq|

A_v©r Abbreviations Ges Acronyms GKB Kv‡R eëüZ nq| </abbr>

Dc‡ii GB D`vnvibwUi ‡ÿ‡Î <acronym> Gi RvqMvq <abbr> U¨vM emv‡j GKB †iRvë †`Lv‡e A_v©r

Abbreviations Ges Acronyms GKB KvR K‡i|

Address Tag

Address tag Øviv Avgiv italic form I ‣Zwi Ki‡Z cvwi| wKš‘ GB <address> U¨vM Avgiv KLb eënvi Kie? hLb

Avgiv †Kvb wKQz‡K Address wnmv‡e ev †Kvb Address †K display Kiv‡Z PvB ZLb GB <address> tag wU eënvi

Ki‡Z cvwi|


<html>

<body>

<h2> <address> [email protected]<br> [email protected] <br>

http://www.ashekcse.com <br> Bangladesh.</address> </h2>

</body>

</html>

mailto:[email protected]%3cbr

mailto:[email protected]%20%3cbr

Page 15 of 62 Ashek


Deleted and Inserted Text

<del> hLb Avgiv †Kvb †U·‡K Delete Ki‡Z, gy‡Q †dj‡Z ev GK Uv‡b †K‡U †Ìqvi gZ †hgb- (Ashek

Mahmud Khan) Display †Z †`L‡Z PvB ZLb Avgiv <del> GB U¨vMwU eënvi Kie </del> .


<html>

<body>

<h2>Ashek <del> mahhmud </del> Mahmud Khan. Department of <del> comuputer

</del> Computer Science <s> and </s> & Engineering. </h2>

</body>

</html>


** <s> GB U¨vMwU <del> U¨v‡Mi gZB KvR K‡i| </s> Dc‡i Gi D`vnviY Avgiv †`‡LwQ|

-------------------------------------------------------

<ins> hLb Avgiv †Kvb †U·‡Ui wb‡P Underline ev †Kvb wbw ©ó As‡ki wb‡P `vM wn‡m‡e †hgb- (Computer)

Display †Z †`L‡Z PvB ZLb Avgiv <ins> GB U¨vMwU eënvi Kie </ins> . GLb wb‡P Avgiv Gi GKwU D`vniY †`wL-

Page 16 of 62 Ashek

<html>

<body>

<h2> Ashek <ins>Mahmud </ins>Khan. Department of <ins> Computer </ins>

Science & <ins> Engineering </ins>. </h2>

</body>

</html>


** <ins> U¨vMwU <u> U¨v‡Mi gZB KvR K‡i|

HTML G wj‡÷i eënvi

Z_¨vejx‡K my›ìfv‡e Dc¯’vc‡bi Rb¨ wj÷ Dcv`vb eënvi Kiv nq| <li>….</li> GB U¨vM eënvi K‡i Z_¨vejxi

wj÷ •Zwi Kiv nq| Gi †kl U¨vM Ackbvj A_©vr †kl U¨vM bv w`‡jI KvR Ki‡e| HTML G K‡qK ai‡bi wj÷ eënvi

Kiv nq|

Ordered Lists

I‡qe †cB‡R Z_¨vejx‡K Serial Number Abymv‡i Dc¯’vc‡bi Rb¨ Ordered List eënvi Kiv nq| Ordered

List cÖKvk Kiv nq <ol>……. (GB U¨vMwU avivevwnK fv‡e ïiæ K‡i) </ol> U¨v‡Mi gva¨‡g| Gi mv‡_ type

attribute eënvi K‡i wbav©iY Kiv nq Serial Number †Kgb n‡e|


<html>

<body>

<h2> <ol type="1"> <li>HTML

<li>CSS

<li>JAVA Script <li>PHP

<li>Jquery

<li>MySQl </h2> </ol>

</body>

Page 17 of 62 Ashek

</html>


Unordered Lists

GB ai‡bi wj‡÷ †Kvb Serial Number _v‡K bv, Gi cwie‡Z© wewfbœ Symbol eënvi Kiv nq| <ul>…</ul> GB

U¨vM eënvi K‡i Unordered List cÖKvk Kiv nq| Type attribute eënvi K‡i wewfbœ Symbol †Ìqv nq| †hgb:

<html>

<body>

<h3> <ul type="disc">

<li>Web Design

<li>Tutorial

<li>Internet

<li>Web Developing

</ul> </h3>

</body>

</html>


Page 18 of 62 Ashek

Definition Lists

Definition List †Kvb GKK Dcv`v‡bi ZvwjKv bq| Bnv wKQz Dcv`v‡bi ZvwjKv Ges cÖ‡Z¨K Dcv`v‡bi eY©bv cÖKv‡k

eëüZ nq|

A definition list is not a list of single items. It is a list of items (terms), together with a description

of each item (term).

* <dl> Definition List cÖKvk K‡i </dl>

* <dt> Definition List-Gi GKUv Uvg© cªKvk K‡i, A_v©r (Head line, point) hvi eY©bv w`‡Z PvB| </dt>

*<dd> Uv‡g©i eY©bv cÖKvk K‡i, A_v©r Point-Gi eY©bv| </dd>

GLb wb‡P Avgiv Gi GKwU D`vnviY †`Le-

<html>

<body>

<h3> <dl>

<dt> Sashimi </dt>

<dd> Sliced raw fish that is served with condiments such as shredded daikon

. radish or ginger root, wasabi and soy sauce </dd>

<dt> Scale </dt>

<dd> A device used to accurately measure the weight of ingredients </dd>

<dd> A technique by which the scales are removed from skin of a fish </dd>

<dt> Scamorzo </dt>

<dd> An Italian cheese usually made from whole cow's milk (although it was

. . traditionally made from buffalo milk) </dd>

</dl> </h3>

</body>

</html>

Page 19 of 62 Ashek


Nested Lists

GKwU ZvwjKvi g‡a¨ hw` Av‡iKwU ZvwjKv _v‡K ZLb Avgiv Nested List eënvi Kie| mvaviYZ 2q ZvwjKvi ¯Íi ev

AvB‡Ug wfbœ nq|


<html>

<body>

<h2>A nested List:</h2>

<h3> <ul>

<li> JSTU</li>

<li> SUST</li>

<li> PSTU</li>

<ul>

<li> BUET</li>

<li> KUET</li>

<li> RUET</li>

<ul>

<li> DU</li> .

<li> RU</li> .

<li> CU</li>

Page 20 of 62 Ashek

<ul>

<li> DMC</li>

. <li> MMC</li>

. <li> RMC</li>

</ul>

</ul>

</ul>

</ul> </h3>

</body>

</html>


Links

<a> I‡qe †c‡Ri †Kvb wjs‡K wK¬K K‡i Ab¨ †Kvb †c‡R hvIqv hvq| </a>. <a>…</a> GB U¨vM eënvi K‡i I‡qe

†c‡R wjsK †Ìqv nq| <a> U¨v‡Mi mv‡_ href, title, target attribute eënvi Kiv nq| ‡hgb:

<a href=”http://www.facebook.com”> Facebook </a>

eªvDRv‡i ïay Facebook †`Lv hv‡e, hvi Dci wK¬K Ki‡j www.facebook.com I‡q‡e cÖ‡ek Ki‡e|

GLb wb‡P Avgiv Gi GKwU D`vniY †`wL-

<html>

<body>

Page 21 of 62 Ashek

<h3> Plz click and Enter the New Website: </h3>

<i> <b> <font size="5">

&hearts; <a href="http:\\www.Facebook.com "target="contents"> Facebook </a>

<br>

&hearts; <a href="http:\\www.Google.com "target="contents"> Google </a>

</font> </i></b>

</body>

</html>


Linking to Other Pages on the Same Site

hw` Avgiv GKB mvB‡Ui Ab¨ †c‡R †h‡Z PvB Zvn‡j Avgv‡ì Relative URL eënvi Ki‡Z n‡e| G ‡ÿ‡Î †Kvb

mywbw ©ó †Wv‡gBb Name Gi cÖ‡qvRb †bB|


<html>

<body>

<h4>

<ul>

<li> <a href="index.html"> Home </a></li>

<li> <a href="about-us.html"> About </a></li>

<li> <a href="cse.html"> CSE </a></li>

<li> <a href="contact.html"> Contact </a></li>

</ul>

</h4>

</body>

</html>

Page 22 of 62 Ashek


Email Links

HTML w`‡q B‡gBj (E-mail) G¨v‡Wªm wjsK Kiv hvq| B‡gBj wjs‡Ki †ÿ‡Î mailto: †cÖv‡UvKj eënvi Kiv nq|

B‡gBj wjsK ‣Zwi Ki‡Z n‡j mailto: †cÖv‡UvK‡ji mv‡_ G¨vsKi wjsK Ges B‡gBj wVKvbv wjL‡Z nq|

GLb wb‡P Avgiv Gi GKwU D`vnviY †`wL-

<html>

<body> <h2><ul>

<li> <a href="mailto:[email protected]">Email Me</a>

</ul></h2> </body>

</html>


Opening Links in a New Window

<a href=Ò‡h †cR‡K ms‡hvM Ki‡Z PvB Zvi wVKvbvÓ target=Òwjs‡K wK¬K Ki‡j bZzb †cRwU eZ©gvb †c‡RB †jvW n‡e,

bv wK? bZzb DB‡Ûv‡Z Lyj‡e Zv wVK K‡i w`‡Z n‡e|Ó title=Òwjs‡Ki Dci gvDm wb‡q †M‡j MšÍe¨ I‡qe †cR m¤ú‡K©

Av‡MB avibv w`‡e|Ó

GLb wb‡P Avgiv Gi D`vnviY †`wL-

‡hgb:

<a href=http://www.facebook.com target=_blank>Facebook</a>

Gi d‡j bZzb DB‡Ûv‡Z Open n‡e|

<a href=http://www.facebook.com target=_self> Facebook </a>

Gi d‡j eZ©gvb †c‡R Open n‡e|

Page 23 of 62 Ashek

Linking to a Specific Part of the Same Page

hw` †Kvb eo Page-G †Kvb wKQz mvP© K‡i †ei Ki‡Z PvB Zvn‡j, Zvi wjsK _vK‡Z n‡e Ges <a href="#CSE"> GB

U¨v‡Mi gva¨‡g wjsK w`‡q cieZx©‡Z ID Attribute ( <h2 id ="CSE">) ¦viv hw` †mUv declare Kiv _v‡K Zvn‡j

H ID wU †h bv‡g Av‡Q (A_v©r hv Avgiv †Lv‡R †c‡Z PvB †hgb: CSE Gi wgwbs) Zvi mvP© Ack‡b wK¬K K‡i †mUv‡K

†Lv u‡R †c‡Z cvwi|

GQvov Avgiv hw` Page-Gi bottom Ask †_‡K Top As‡k †h‡Z PvB Zvn‡j Abyiƒc fv‡e Top As‡ki Heading ‡K

hw` ID Øviv declare Kiv _v‡K Zvn‡j Lye mn‡RB Top As‡k P‡j †h‡Z cvie| ‡hgb:

<h1 id="top"> Specific Part of the Same Page </h1>

……………………………………………..

……………………………………………..

……………………………………………..

<a href="#top"> Top </a>


<html>

<body>

<h1 id="top"> Specific Part of the Same Page </h1>

<a href="#Ashek">Ashek</a><br/>

<a href="#CSE">CSE</a><br/>

<a href="#JSTU">JSTU</a><br/>

<a href="#interlude">Interlude</a><br/>

<h2 id="interlude">Interlude</h2>

<p>A brief, intervening film scene or sequence, that appears within a film</p>

<h2 id="CSE">CSE</h2>

<p>Computer Science & Engineering</p>

<h2 id="JSTU">JSTU</h2>

<p>Jessore Science & Tachnology University,Jessore.</p>

<h2 id="Ashek">Ashek</h2>

<p> Ashek Mahmud Khan </p>

Page 24 of 62 Ashek

<p> <a href="#top"> Top </a></p>

</body>

</html>


Summary:

** Links are created using the <a> element.

** The <a> element uses the href attribute to indicate the page you are linking to.

Adding Images

<img> GB U¨vM eënvi K‡i I‡qe †c‡R B‡gR mshy³ Ki‡Z nq| Gi †Kvb †kl U¨vM †bB, Z‡e Gi mv‡_ src GwUªweDU

eënvi K‡i Image Location Rvwb‡q w`‡Z nq| ‡hgb: <img src= ÒB‡g‡Ri †jv‡Kkvb/B‡g‡Ri bvg.(WU)B‡g‡Ri

dig¨vUÓ>


Page 25 of 62 Ashek

<html>

<body>

<img src="ashek.jpg"> </body>

</html>


Picture wU 2014 mv‡ji

Height & Width of Images

I‡qe †c‡R GKwU B‡gR wK cwigvb RvqMv wb‡q cª`wk©Z n‡e Zv wb‡ ©k Kiv nq <img> U¨v‡Mi width I height

GwUªweDU Gi gva¨‡g| G‡ì gvb cÖKvk Kiv nq wc‡·‡j|


<html>

<body>

<img src="ashekz.jpg" alt="Me and Thamil star" width="450" height="380">

</body>

</html>


Page 26 of 62 Ashek

Where to Place Images in Your Code

B‡g‡Ri Ave¯’vb Paragraph Gi †Kvb cwRk‡b n‡e ev‡g,Wv‡b,Dc‡i,wb‡P bv gv‡S!! BZ¨vw` Ae¯’vb Avgiv wb‡Pi

D`vnviYwUi gZ K‡i wm‡j± Ki‡Z cvwi|


<html> <body>

<img src="ashek.png" alt="Me & My Friend" width="150" height = "100"/>

<p> There are four Years ago Me and my friends gone to the "Fnatacy Kingdome" with my college friend. My college name is Ananda Mohan

College, Mymensingh. This picture friends name is Mahabub Murshad Tonoy.

He is My close friend.</p> <hr/>

<p><img src="ashek.png"alt="Me & My Friend" width="150" height ="100"/>

There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic. Many species undertake long

distance annual migrations, and many more perform shorter irregular

journeys.</p> <hr/> <p>There are around 10,000 living species of birds that inhabit different

ecosystems from the Arctic to the Antarctic. <img src="ashek.png" alt= "Me &

My Friend" width="150" height="100" /> species undertake long distance annual migrations, and many more perform shorter irregular journeys.</p>

</body>

</html>

Page 27 of 62 Ashek



Aligning Images Horizontally

B‡g‡Ri Ae¯’vb wbw ©ó Ki‡Z align Attribute eënvi Kiv nq| †hgb:

<img src=Òashek.jpg” align=Òleft”>

‡U·‡Ui gv‡S B‡gR eënvi Ki‡Z n‡j align Attribute Gi wb‡¤œv³ f¨vjy ¸‡jv eënvi Kiv nq-

* align=Òtop”

* align=Òmiddle”

* align=Òbottom”

* align=Òcenter”

* align=Òleft”

* align=Òright”


Page 28 of 62 Ashek

<html>

<body>

<p>The text is aligned with the image

<img src="ashek.png" align="bottom" width="70" height="48"/> at the

bottom.</p>

<p>The text is aligned with the image <img src="ashek.png" align= "middle"

width="70" height="48"/> in the middle.</p>

<p>The text is aligned with the image <img src="ashek.png"align =

"top"width="70"height="48"/>at the top.</p>

<p><b>Note:</b>The bottom alignment is the default! </p>

</body>

</html>



Figure and Figure Caption(HTML-5)

hw` Avgiv †Kvb B‡g‡Ri wb‡P B‡g‡Ri bvg ev B‡gR m¤úwK©Z wKQz wjL‡Z PvB Zvn‡j B‡gR U¨vM‡K <figure> U¨v‡Mi

wfZ‡i wjL‡Z n‡e| </figure>. Ges B‡gR m¤ú‡K© hv wjL‡Z PvB Zv <figcaption> U¨v‡Mi wfZ‡i wjL‡Z n‡e|

</figcaption>.


Page 29 of 62 Ashek

<html>

<body>

<figure>

<img src="ashek.png" alt="Photograph of two sea otters floating in water">

<br/>

<figcaption> Me and My College friend Mahbub Murshed Tonoy </figcaption>

</figure>

</body>

</html>



Setting the image border

<img> GB U¨vM eënvi K‡i I‡qe †c‡R B‡gR mshy³ Ki‡Z nq| Gi mv‡_ src GwUªweDU eënvi K‡i Image

Location Rvwb‡q w`‡Z nq| Ges Gi mv‡_ ïay gvÎ border attribute eënvi K‡i Avgiv image Gi border w`‡Z

cvwi| †hgb: <img src=ÒB‡g‡Ri †jv‡Kkvb/B‡g‡Ri bvg.(WU)B‡g‡Ri dig¨vU Ó border attribute >. You can

use the border attribute with the <img > element to better control what border the browser

displays around your image.


Page 30 of 62 Ashek


Table

Basic Table Structure

<table> ‡Uwej U¨vM eënvi K‡i I‡qe †c‡R †Uwej ‣Zwi Kiv nq| </table>. GQvov ‡Uwej •Zwii †ÿ‡Î AviI wKQz

U¨vM cÖ‡qvRb nq Zv wb‡¤œ †Ìqv njt

** <caption> GB U¨vM Øviv ‡Uwe‡ji wkibvg ‡Ìqv nq </caption>

** <tr> GB U¨vM Øviv row ev mvwi •Zwi Kiv nq </tr>

** <td> GB U¨vM Øviv mvwi‡Z WvUv BbcyU Kiv nq </td>

** <th> GB U¨vM Øviv mvwii ‡nwWs †Ìqv nq </th>

[<td> Ges<th> GKB KvR K‡i Z‡e <th> Gi ‡ÿ‡Î †jLvUv GKUz †evì nq| <th> GB U¨vM mvavibZ †nwWs †Ìqvi

‡ÿ‡Î eëüZ nq|]


<html>

<head>

<table border="3"align="center">

<caption><h3>Information</h3></caption>

<tr>

<th>Name<th>Roll<th>Dept.

</tr>

<tr>

<td>Ashek<td>110136<td>CSE

</tr>

Border

Page 31 of 62 Ashek

<tr>

<td>Mizan<td>110108<td>CSE

</tr>

</body>

</html>


Table Headings

<th> (The <th> element is used just like the <td> element.) GB U¨vMwU (<th>) mvwi Ges Kjvg Df‡qi

‡nwWs †Ìqvi †ÿ‡Î eëüZ nq| </th> GLb wb‡P Avgiv Gi GKwU D`vnviY †`Le-

<html>

<head>


<tr>

<th>Name

<th>Roll

<th>Dept.

</tr>

<tr>

<th>Ashek

<td>110136

<td>CSE

</tr>

<tr>

<th>Mahmud

Page 32 of 62 Ashek

<td>120136

<td>EEE

</tr>

<tr>

<th>Khan

<td>101136

<td>IPE

</tr>

</table>

</body>

</html>


Spanning Columns

GKvwaK Kjv‡gi †mj ¸‡jv‡K GKwU †m‡j cwiYZ Kivi Rb¨ <td> I <th> U¨v‡Mi mv‡_ colspan GwUªweDU eënvi

Kiv nq| †h¸‡jv †mj‡K GKxfyZ (A_v©r K‡qKUv †mj‡K hw` GKwU‡Z cwiYZ Ki‡Z PvB) Ki‡Z PvB Zv‡ì g‡a¨ me‡P‡q

Dc‡ii Kjv‡gi mv‡_ colspan GwUªweDU e¨venvi Ki‡Z n‡e| ‡hgb:


<html>

<head>


<tr>

<th>Name

<th colspan="2">Mobile

</tr>

<tr>

<td>Ashek

Page 33 of 62 Ashek

<td>01725-402592

<td>01842-402592

</tr>

<tr>

<td>Tarek

<td>01735-801981

<td>01982-852747

</tr>

</table>

</body>

</html>


Spanning Rows

GKvwaK mvwii †mj ¸‡jv‡K GKwU †m‡j cwiYZ Kivi Rb¨ <td> I <th> U¨v‡Mi mv‡_ rowspan GwUªweDU eënvi Kiv

nq| †h¸‡jv †mj‡K GKxfyZ (A_v©r K‡qKUv †mj‡K hw` GKwU‡Z cwiYZ) Ki‡Z PvB Zv‡ì g‡a¨ me‡P‡q Dc‡ii mvwii

mv‡_ rowspan GwUªweDU eënvi Ki‡Z n‡e| ‡hgb:


<html>

<head>


<tr>

<th>Name

<th>Mobile

</tr>

<tr>

Colspan

Page 34 of 62 Ashek

<th rowspan="3">Ashek

<td>01725-402592

</tr>

<tr>

<td>01842-402592

</tr>

<tr>

<td>01680-307861

</tr>

</table>

</body>

</html>


Long Tables

<thead> ‡Uwe‡ji †nWvi K‡g›U ev †nwWs wjL‡Z GB U¨vM e¨veüZ nq|</thead>

<tbody> ‡Uwe‡ji ewW Kb‡U›U A_v©r †nwWs Gi wb‡P hv wjLe| </tbody>

<tfoot>‡Uwe‡ji dzUvi Kb‡U›U A_v©r me© wb‡P †iRv‡ë hv wjLe|</tfoot>


<html>

<head>

<table>

<thead>

<tr>

<th><u>Name

Rowspan Rowspan

Page 35 of 62 Ashek

<th><u>Roll

<th><u>Dept.

</thead>

<tbody>

<tr>

<td>Ashek

<td>110136

<td>CSE

</tr>

<tr>

<td>Monir

<td>120136

<td>IPE

</tr>

<tr>

<td>Saju

<td>130136

<td>EEE

</tr>

<tr>

<td><u>Mizan

<td><u>110108

<td><u>CSE

</tr>

</tbody>

<tfoot>

Page 36 of 62 Ashek

<td>Total= . .

<td>4

</tfoot>

</table>

</body>

</html>


Width & Spacing

‡Uwe‡ji cÖk¯ÍZv wbY©q Kiv nq width GwUªweD‡Ui gva¨‡g| yB fv‡e GB GwUªweDU eënvi Kiv hvq-

1. <table width=”50%”> [G‡ÿ‡Î †Uwe‡ji cÖk¯ÍZv n‡e eªvDRv‡ii 50%, G‡ÿ‡Î eªvDRvi †QvU Ki‡j †UwejI

†QvU n‡e|]

2. <table width=”100”> [G‡ÿ‡Î †Uwe‡ji cÖk¯ÍZv n‡e 100 wc‡·j|]

Cell spacing: Cellspacing GwUªweDU eënvi K‡i †mj mg~‡ni g‡a¨ dvuKv ¯’vb wbav©iY Kiv nq|Gi gvb nq wc‡·‡j|


<html>

<body>

<table width="350" border="5" cellspacing="10">

<tr>

<th>Name

<th width="30">Roll

<th width="25">Dept.

</tr>

<tr>

Page 37 of 62 Ashek

<td>Ashek Mahmud Khan

<td>110136

<td>CSE

</tr>

<tr>

<td>Md. Mizanur Rahaman

<td>110108

<td>CSE

</tr>

</table>

</body>

</html>


Background

<table bgcolor=”Red”> GB GwUªweD‡Ui gva¨‡g †Uwej,‡iv Ges Kjv‡gi background †Ìqv nq| G‡ÿ‡Î

†Uwe‡ji background color jvj †`Lv‡e|


<html>

<body>

<table bgcolor="pink"width="350" border="5" cellspacing="10">

<tr>

<th bgcolor="#AA0011"> Name

<th width="30" bgcolor="#AAFFEE"> Roll

<th width="25" bgcolor="#AAFF00"> Dept.

</tr>

<tr>

Cellspacing

Page 38 of 62 Ashek

<td bgcolor="green"> Ashek Mahmud Khan

<td bgcolor="white"> 110136

<td bgcolor="#FF00FF"> CSE

</tr>

<tr>

<td bgcolor="red"> Md.Mizanur Rahaman

<td bgcolor="#FFFF00"> 110108

<td bgcolor="#EF00EE"> CSE

</tr>

</table>

</body>

</html>


Form Structure

<form> dig •Zwii Kv‡R GB U¨vM eënvi Kiv nq| </form>

<form> dig U¨v‡Mi mv‡_ method, action I enctype GwUªweDU eënvi Kiv nq|

Method: Method GwUªweDU eënvi K‡i d‡g© cÖ`Ë WvUv mvfv©‡i mvewgU Kiv nq| Method ywU eënvi K‡i WvUv

mvewgU Kiv nq-

1. Get Method (<form method=Òget”></form>)

2. Post Method (<form method=Òpost”></form>)

URL Gi mv‡_ d‡g©i WvUv mvewgU Kivi Rb¨ Get Method eënvi Ki‡Z nq| hw` bvg I cvmIqvW© w`‡q jwMb Kwi

Z‡e Address ev‡i wb‡P gZ †`Lv‡et

http://www.sitename.com/login.php?/username=ashek &

password=1254893/

bgcolor

Page 39 of 62 Ashek

Action: mvfv©‡i WvUv‡K cª‡mm Kivi Rb¨ †Kvb ‡cÖvMÖvg ev w¯ŒÞ eënvi Ki‡e GwUªweB‡Ui gva¨‡g Zv Rvwb‡q †Ìqv nq|

†hgb:

<form action=Òregistration.php” method=Òpost”>

Text Input

User Name A_v©r GK jvBb †U·U wjLv hvq Ggb wdì •Zwi Kivi Rb¨ BbcyU <input> U¨v‡Mi mv‡_ Type=Òtext”

GwUªweDU eënvi Kiv nq|


<html>

<body>

<form>

<p>Username:

<input type="text" size="20" maxlength="100"value="Enter your name">

</p>

</form>

</body>

</html>


GLv‡b,

size="20" [Gi gv‡b n‡”Q 20 Aÿ‡ii gZ cÖk¯’ wdì cvIqv hv‡e|]

maxlength="100" [Gi gv‡b n‡”Q wd‡ì 100 Aÿ‡ii †ewk UvBc Kiv hv‡e bv|]

Password Input

<input> U¨v‡Mi mv‡_ Type=Òpassword”GwUªweDU eënvi Kiv nq|


<html>

<body>

<form>

<p>Password:

<input type="password" size="20" maxlength="100">

</p>

</form>

Page 40 of 62 Ashek

</body>

</html>


Text Area

<textarea> GB U¨vMwU ‡U·U Gwiqv •Zwi Ki‡Z eënvi Kiv nq| </textarea>

A_v©r hw` GKvwaK jvBb ev c¨vivMÖvd AvK„wZi †Kvb wKQz I‡qe †cB‡R BbcyU Ki‡Z PvB Zvn‡j Avgv‡ì wbw ©ó Gwiqvi

ìKvi nq Zv Avgiv GB U¨v‡Mi gva¨‡g •Zwi Ki‡Z cvwi|


<html>

<form>

<p>What did you think of this sits?</p>

<textarea>Enter your comments...</textarea>

</form>

</html>


Radio Button

hw` Avgv‡ì GKvwaK Ackb ‡_‡K †Kej gvÎ GKwU Ackb wm‡j± Ki‡Z nq ZLb †iwWI evUb •Zwii cÖ‡qvRb nq|

†iwWI evUb •Zwii Rb¨ BbcyU U¨vM eënvi Kiv nq| ïay gvÎ BbcyU U¨v‡Mi wfZ‡i type=Òradio” wj‡L w`‡jB †iwWI

evUb •Zwi n‡q hv‡e|


Page 41 of 62 Ashek


GwUªweD‡Ui gva¨‡g †iwWI evU‡b A‡Uv‡gwUKvwj wWdë wnmv‡e e„‡Ë Av‡M †_‡K †PK w`‡q ivL‡Z cvwi| †hgb:

<input type="radio" name="Subject" value="CSE" checked="yes">CSE

G‡ÿ‡Î AvDUcyU †`Lv‡e-

Check Box

hw` Avgv‡ì GKvwaK Ackb ‡_‡K GKvwaK Ackb‡K wUK wPý w`‡q wm‡j± Ki‡Z PvB ZLb Avgv‡ì †PK e· •Zwi Ki‡Z

n‡e| †PK e· •Zwii Rb¨ BbcyU U¨vM eënvi Kiv nq| ïay gvÎ BbcyU U¨v‡Mi wfZ‡i type=Òcheckbox” wj‡L w`‡jB

†PK e· •Zwi n‡q hv‡e|


Page 42 of 62 Ashek


Drop Down List Box

WªcWvDb wj‡÷i gva¨‡g Ggb GKwU ZvwjKv •Zwi Kiv nq †hLvb †_‡K BDRvi †h‡Kvb GKUv wm‡j± K‡i w`‡Z cv‡i|

g‡bKwi GKwU di‡g GK R‡bi wcÖq is wK Zv wm‡j± Ki‡Z n‡e (A‡bK ¸‡jv i‡Oi g‡a¨ †_‡K)| hw` Ggb GKwU Ackb

ivL‡Z nq Zvn‡j WªcWvDb wj‡÷i gva¨‡g Avgiv †mUv mn‡RB Ki‡Z cvwi| WªcWvDb wj÷ •Zwi Ki‡Z cÖ_‡g <select>

U¨vM w`‡q ïiæ Ki‡Z nq Ges †h AvB‡Ug ¸wj †_‡K evQvB Kie †m¸wji cÖwZwU <option> U¨v‡Mi g‡a¨ ivL‡Z n‡e|


Page 43 of 62 Ashek


Multiple Select Box

<select> U¨v‡Mi multiple GwUªweDU Øviv Avgiv G‡Ki AwaK welq wm‡j± Ki‡Z cvwi| A_v©r hw` eªvDRv‡i GKvwaK

Gwjg¨v›U wm‡j± Ae ’vq †`L‡Z PvB Zvn‡j multiple GwUªweDU eënvi Ki‡Z n‡e|



File Input Box

<input> U¨v‡Mi type=Òfile” GwUªweDU Øviv Avgiv dvBj Avc‡jvW dig •Zwi Ki‡Z cvwi|


Page 44 of 62 Ashek


Submit Button

<input> U¨v‡Mi type=Òsubmit” GwUªweDU Øviv Avgiv mvf©v‡i dg© mvewgU Kivi Rb¨ mvewgU evUb •Zwi Ki‡Z cvwi|

hLb Avgiv mvewgU evU‡b wK¬K Kie ZLb d‡g©i WvUvwU Activate n‡e| GLb wb‡P Avgiv Gi GKwU D`vnviY †`Le-


HTML Form Design

HTML G Form GKwU MiæZ¡c~Y© Av‡jv”P¨ welq| GKUv dig Design Ki‡Z Avgv‡ì wb¤œ wjwLZ topics ¸‡jv cÖ‡qvRb

n‡e|

Text box

Text area

Radio batton

Page 45 of 62 Ashek

Submit batton

Check box

Dropdown list

Dc‡i Avgiv GB topics ¸‡jv m¤ú©‡K we¯ÍvwiZ Av‡jvPbv K‡iwQ| GLb wb‡P Avgiv Gi GKwU D`vnviY †`Le-

Page 46 of 62 Ashek


Image Button

<input> U¨v‡Mi type=Òimage” src=Òimage name.png” GwUªweDU Øviv Avgiv B‡gR‡K evUb wnmv‡e eënvi

Ki‡Z cvwi|


Page 47 of 62 Ashek


Button & hidden Controls

dvB‡ji size Gi mxgvbv †e‡a w`‡q Avgiv webserver Gi g~jëvb space iÿv Ki‡Z cvwi| GRb¨ Avgiv hidden

input field Ges AviI wKQz specific attributes †hvM Kie|



Labelling Form Controls

<label> BbcyU Gwj‡g‡›Ui †j‡ej cÖ ©kb K‡i|</label>


B‡gR‡K evUb wnmv‡e eënvi

Page 48 of 62 Ashek


Grouping Form Elements

<fieldset> d‡g©i mKj Gwj‡g‡›Ui Pvi cv‡k eW©vi •Zwi‡Z eëüZ nq| </fieldset> , <legend> <fieldset>

eënvi K‡i †h eW©vi †Ìqv nq Zvi wkibvg †Ìqvi †ÿ‡Î GB U¨vM (<legend>) eënvi Kiv nq|</legend>



Page 49 of 62 Ashek

HTML 5: Email & URL Input

Email : <input> U¨v‡Mi type="email" GwUªweDU Øviv Avgiv B-‡gBj Address BbcyU w`‡Z cvwi| G †ÿ‡Î

(HTML-5 †ÿ‡Î) myweav n‡”Q hw` B-‡gBj Address mwVK bv nq Zvn‡j †U·U e‡· Red color show Ki‡e A_v©r

error †`Lv‡e|



URL: <input> U¨v‡Mi type="URL" GwUªweDU Øviv Avgiv URL BbcyU w`‡Z cvwi| G †ÿ‡Î (HTML-5 †ÿ‡Î)

myweav n‡”Q hw` URL mwVK bv nq Zvn‡j †U·U e‡· Red color show Ki‡e A_v©r error †`Lv‡e|



error †`Lv‡”Q

Page 50 of 62 Ashek

Comments in HTML





Grouping Text & Elements In a Block

<div> CSS G we¯ÍvwiZ Av‡jvPbv Kiv n‡q‡Q|

Iframes

<iframe> GKUv I‡qe †c‡Ri g‡a¨B Aci GK ev GKvwaK I‡qe †cR cÖ`k©b Kivi Ab¨Zg Dcvq n‡”Q AvB †d«g|

</iframe>. GB †d«g eënvi K‡i Avgiv Zv Ki‡Z cvwi|


Page 51 of 62 Ashek


Information About Your Pages

<meta> †gUv U¨vM UvB‡Uj U¨v‡Mi c‡i eënvi Kiv nq| GB U¨vM eënvi Kiv nq WKz‡g›U m¤úwK©Z Z_¨ mwbœ‡ek Kivi

Rb¨| ‡hgb: I‡qe †cRwU †K •Zwi K‡i‡Q Zvi cwiPq, Zvi I‡qe mvB‡Ui wVKvbv,Zvi Ab¨vb¨ AviI Z_¨,I‡qe mvB‡Ui

welq e¯‘ AviI A‡bK wKQz| Gi †Kvb †kl U¨vM †bB|

Batton Design

HTML Gi gva¨‡g Avgiv <link rel="stylesheet" href="style.css"> GB wjsK Gi gva¨‡g wjsK w`‡q CSS

(stylesheet) eënvi K‡i cQ›` gZ evUb •Zwi Ki‡Z cvwi| ‡hgb wb‡Pi gZ wjLvi ci Avgv‡ì CSS eënvi Ki‡Z

n‡e-

<button> Important URL</button>

GLb Avgiv CSS wKfv‡e Usage Kie Zv †`Le--

Page 52 of 62 Ashek


Escape Characters

No Name Symbol Attributes 1. Less-than sign < < <

2. Greater-than sign > > &

3. Ampersand & & &

4. Quotation mark “” " "

5. Cent sign ¢ ¢ ¢

6. Pound sign £ £ £

7. Yen sign ¥ ¥ ¥

8. Euro sign ¤ € €

9. Copyright symbol © © ©

10. Registered trademark ® ® ®

11. Trademark ™ ™ ™

12. Left single quote ‘ ‘ ‘

13. Right single quote ' ’ ’

14. Left double quotes “ “ “

15. Right double quotes ” ” ”

Batton

Page 53 of 62 Ashek

16. Multiplication sign × × ×

17. Division sign ÷ ÷ ÷

18. Hearts ♥ &hearts; ♥

19. Clubs ♣ &clubs; ♣

20. Spades ♠ &spades; ♠

21. Diams ♦ &diams; ♦

Color Values

HEX values are specified as 3 pairs of two-digit numbers, starting with a # sign. KZ ¸‡jv Color

†KvW wb‡¤œ †Ìqv n‡jv-

Page 54 of 62 Ashek

HTML Color Names

HTML G eëüZ KZ¸‡jv i‡Oi bvg wb‡P †Ìqv nj| Color Names Supported by All

Browsers.

Page 55 of 62 Ashek

Page 56 of 62 Ashek

Page 57 of 62 Ashek

Video on the Web

HTML-5 Gi GKUv ¸iæZ¡c~Y© wdPvi n‡”Q <Video> U¨vM| GB U¨v‡Mi gva¨‡g Avgiv Web-page-G Lye mn‡R

Video/Movie Show Kiv‡Z cvwi | GB U¨v‡Mi wfZ‡i Controls attribute hy³ K‡i Video †K Control Kiv

hvq| GQvov Avgiv Height-width eënvi K‡i browser G Video wUi Space wba©vib Ki‡Z cvwi| wKš‘ Gi wKQz

mxgve×Zv Av‡Q KviY me Browser GB <Video> U¨vMwU Support Ki‡e bv|

Page 58 of 62 Ashek

Avgiv GLb GK bR‡i HTML Gi mKj U¨vM mg~n †`Le:

HTML Basic Document

<!DOCTYPE html>

<html>

<head>

<title>Title of document 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)

Page 59 of 62 Ashek

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

Links

Ordinary link: <a href="http://www.example.com/">Link-text goes here</a>

Image-link: <a href="http://www.example.com/"><img src="URL" alt="Alternate Text" /></a>

Mailto link: <a href="mailto:[email protected]">Send e-mail</a>

A named anchor:

<a name="tips">Tips Section</a>

<a href="#tips">Jump to the Tips Section</a>

Unordered list

<ul>

<li>Item</li>

<li>Item</li>

</ul>

Ordered list

<ol>

<li>First item</li>

<li>Second item</li>

</ol>

Definition list

<dl>

<dt>First term</dt>

<dd>Definition</dd>

<dt>Next term</dt>

<dd>Definition</dd>

</dl>

Page 60 of 62 Ashek

Tables

<table border="1">

<tr>

<th>Tableheader</th>

<th>Tableheader</th>

</tr>

<tr>

<td>sometext</td>

<td>sometext</td>

</tr>

</table>

Iframe

<iframe src="demo_iframe.htm"></iframe>

Frames

<frameset cols="25%, 75%">

<frame src="page1.htm" />

<frame src="page2.htm" />

</frameset>

Forms

<form action="http://www.example.com/test.asp" method="post/get">

<input type="text" name="email" size="40" maxlength="50" />

<input type="password"/>

<input type="checkbox" checked="checked" />

<input type="radio" checked="checked" />

<input type="submit" value="Send" />

<input type="reset" />

<input type="hidden" />

<select>

<option>Apples</option>

<option selected="selected">Bananas</option>

<option>Cherries</option>

</select>

<textarea name="comment" rows="60" cols="20"></textarea>

</form>

Page 61 of 62 Ashek

Entities

< is the same as <

> is the same as >

© is the same as ©

Other Elements



<blockquote>Text quoted from a source.</blockquote>

<address>

Written by Ashek Mahmud Khan<br/>

<a href="mailto:[email protected]">Email us</a><br />

Address: Jamalpur<br />

Mobile:01725-402592

</address>

HTML 5 Introduction

<!DOCTYPE html>

==================================================================

Ashek Mahmud Khan

Dept. of Computer Science & Engineering

Jessore University of Science & Technology, Jessore.

E-mail: [email protected]

Mobile: 01725-402592, 01962-694565

mailto:[email protected]

Page 62 of 62 Ashek

THE END

[email protected]

mailto:[email protected]

Education

HTML-Bangla E-book