HTML 1
HTML 1
[2]
HTML
html Gi c~Y©iƒc Hyper Text Markup Language.
html GKwU gvK©Avc fvlv hv I‡qe †cR ‰Zwi Kivi Rb¨ e¨envi Kiv nq|
myweavmg~n
• I‡qe‡c‡Ri †Ug‡cøU ˆZwi Kiv hvq
• I‡qe dg© wWRvBb Kiv hvq
• _vW© cvwU© A¨vwcø‡Kkb e¨envi Kiv QvovB I‡qe †c‡R wfwWI Ges AwWI mshy³ Kiv hvq
• wewfbœ ai‡bi †UK&ªU dig¨vwUs Kiv hvq
• AvKl©bxq Uy WvB‡gbkbvj Wªwqs Kiv hvq
• Wª¨vM I Wª‡ci gva¨‡g †Kvb Dcv`vb GK RvqMv n‡Z Ab¨ RvqMvq ¯’vcb Kiv hvq
html Gi †gŠwjK welqmg~n
html Gi ¸iæZ¡c~Y© ‡gŠwjK Ask¸‡jvi g‡a¨ Ab¨Zg n‡jv:
• tag
• content
• attribute
▪ tag: U¨vM n‡jv ‡KŠwYK eª¨v‡KU (< >) Gi g‡a¨ Ave× mywbw`©ó †Kvb wb‡`©‡ki mvs‡KwZK eY© ev eY©gvjv|
U¨vM n‡jv GKwU eY©, kã ev k‡ãi mswÿß iƒc hv ‡KŠwYK eª¨v‡KU < ... > Gi g‡a¨ Ave× _v‡K| GKwU U¨vM
mvaviYZ †h bv‡g ïiæ nq ‡mB GKB bvg e¨envi K‡i †kl nq| A_©vr U¨v‡Mi ïiæ I †kl i‡q‡Q| U¨v‡Mi †kl
†evSv‡bvi Rb¨ diIqvW© ¯ø¨vk wPý Ô/ Õ e¨envi Kiv nq| ‡hgb-
<p> … … … </p> GKwU eY©
▪ Attribute: I‡qe‡c‡Ri ‰ewkó¨ wba©vi‡bi Rb¨ A¨vwUªweDU e¨envi Kiv nq| A_©vr A¨vwUªweDU html Dcv`vb
m¤ú‡K© AwaKZi Z_¨ cÖ`vb K‡i _v‡K|
opening tag
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Tag with Attribute</title>
</head>
<body>
<p style="color:blue" align="center"> Hyper Text Markup Language </p>
html †cÖvMÖvgwUi
</body>
</html> eªvDRv‡i cÖ`wk©Z
AvDUcyU
[4]
▪ Heading Tag Gi e¨envi
GKwU I‡qe‡c‡Ri Aby‡”Q‡` wk‡ivbvg mshy³ Kivi Rb¨ Heading U¨vM e¨envi Kiv nq| wk‡ivbvg mshy³ Kivi
Rb¨ html G QqwU Gwj‡g›U i‡q‡Q| G¸‡jv‡K h1, h2, h3, h4, h5 Ges h6 Øviv cÖKvk Kiv nq| Gi g‡a¨ h1
me‡P‡q eo Ges h6 me‡P‡q †QvU wk‡ivbvgwewkó U¨vM|
<!DOCTYPE html>
<html>
<head>
<title> HTML Heading Tag</title>
</head>
<body>
<h1>Chapter One: ICT: World & Bangladesh Perspective</h1>
<h2>Chapter Two: Communication Systems & Networking</h2>
<h3>Chapter Three: Number Systems & Digital Device</h3>
<h4>Chapter Four: Introduction to Web Design and HTML</h4>
<h5>Chapter Five: Programming Language</h5> html †cÖvMÖvgwUi
<h6>Chapter Six: Database Management System</h6> eªvDRv‡i cÖ`wk©Z
</body> AvDUcyU
</html>
<!DOCTYPE html>
<html>
<head>
<title> HTML Text Formating Tags</title>
</head>
<body>
<h1 align="center" style="color:blue">Text Formating Tags</h1>
<marquee>HTML Text Formating tags examples continues...</marquee>
<p><b>ICT is the backbone of any digital initiative and it covers the vast area of information
technology, </b> <u>communication technology and telecommunication technology. </u> <i>The
country is successfully leveraging this rising penetration</i> and <sup>has earned $1 billion in
2018</sup> by exporting ICT products and services.<br><hr>
<pre>On top of these,
the total number of Internet Subscribers
<sub>has reached 93.70 million at the end of December 2019, </sub>
can be seen as a <big>consequential blessing</big> of the recent <small>progressive steps taken
by the present government</small> and the growing ICT sector. </pre></p>
</body>
</html>
[6]
Dc‡iv³ html †cÖvMÖvgwUi eªvDRv‡i cÖ`wk©Z AvDUcyU wb¤œiƒct
[7]
▪ I‡qe‡cB‡R Qwe hy³ Kivi html GBPwUGgGj †cÖvMÖvgt
• B‡gR Ges I‡qe‡cBR GKB wW‡i±ix‡Z (‡dvìvi) Ae¯’vb Ki‡jt
<!DOCTYPE html>
<html>
<head>
<title> HTML Image </title>
</head>
<body>
<img src="Logo CPSCS.jpg" alt="logo of cpscs">
</body>
</html>
html †cÖvMÖvgwUi
eªvDRv‡i cÖ`wk©Z
AvDUcyU
▪ HTML Hyperlink
GwU GKwU we‡kl e¨e¯’v hvi gva¨‡g wewfbœ I‡qe‡c‡Ri g‡a¨ ms‡hvM ¯’vcb Kiv nq| ‡Kvb I‡qemvBU eªvDwRs Gi mgq
GK †cR †_‡K Ab¨ †c‡R hvIqvi †ÿ‡Î nvBcviwjsK Kiv n‡q _v‡K| GwU e¨envi K‡i †Kvb Qwe ev †UK&ªU nvBcviwjsK
Kiv m¤¢e| nvBcviwjsK Gi Rb¨ <a> U¨vM e¨eüZ nq| GwU GKwU aviK U¨vM| <a> U¨v‡Mi gva¨‡g nvBcviwjsK Kivi
wmbU¨vK&ª n‡jv:
< a href="url">Any text to link</a>
href A¨vwUªweDU Øviv hyper reference A_©vr GK&ªUvibvj A_ev B›Uvibvj wjsK ‡evSv‡bv nq|
nvBcviwjsK `yB ai‡bit
1| B›Uvibvj nvBcviwjsKt GKB mvfv©‡i ivLv †Kvb I‡qemvB‡Ui wewfbœ I‡qe‡cB‡Ri g‡a¨ ms‡hvM
¯’vcb Kivi Rb¨ B›Uvibvj nvBcviwjsK e¨envi Kiv nq| †hgb:
<a href="contact.html" target="_self ">Contact Us</a>
*target="_self " A¨vwUªweDU Gi gva¨‡g eªvDRvi eZ©gvb DB‡Ûv‡Z wjsK †cBRwU‡K cÖ`k©b Ki‡e|
2| GK&ªUvibvj nvBcviwjsKt wfbœ wfbœ mvf©v‡ii I‡qe‡cB‡Ri g‡a¨ ms‡hvM ¯’vcb Kivi Rb¨ GK&ªUvibvj
nvBcviwjsK e¨envi Kiv nq| †hgb:
<a href="https://www.youtube.com" target="_new/blank ">YouTube</a>
[8]
*target="_new/blank " A¨vwUªweDU Gi gva¨‡g eªvDRvi bZzb DB‡Ûv‡Z wjsK †cBRwU‡K cÖ`k©b Ki‡e|
<!DOCTYPE html>
<html>
<head>
<title>HTML Hyperlink</title>
</head>
<body>
<a href="https://www.youtube.com/">YouTube</a>
</body>
</html>
▪ HTML List
I‡qe‡c‡R ZvwjKv mshy³ Kivi gva¨‡g †Kvb Z_¨ e¨enviKvixi Kv‡Q mn‡RB Dc¯’vcb Kiv hvq| html ZvwjKv `yB
ai‡bi n‡q _v‡K|
1. Ordered List
2. Unordered List
Ordered List, Unordered List, List Item AšÍf©y³ Kivi Rb¨ cÖ‡qvRbxq U¨vM¸‡jv h_vµ‡g ol, ul Ges li|
*D`vniY-1
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<h3>
<u>List of Books for Science Group:</u>
</h3>
<ol>
<li>Bangla</li>
<li>English</li>
<li>ICT</li>
<li>Physics</li>
<li>Chemistry</li>
<li>Mathematics</li>
<li>Biology</li>
</ol>
</body>
</html>
[9]
<!DOCTYPE html> *D`vniY-2
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<h3>
<u>Book List for Humanities Group:</u>
</h3>
<ul>
<li>Bangla</li>
<li>English</li>
<li>ICT</li>
<li>Economics</li>
<li>Civics</li>
<li>Logic</li>
<li>Psychology</li>
</ul>
</body>
</html>
[10]
HTML Nested List
HTML G ZvwjKvi ‡fZ‡iI ZvwjKv ˆZwi Kiv hvq hv Nested List bv‡g cwiwPZ|
<!DOCTYPE html>
<html> *D`vniY-3
<head>
<title>HTML Nested List</title>
</head>
<body>
<h3><u>Compulsory Books:</u></h3>
<ul>
<li>Bangla</li>
<ul>
<li> Bangla 1st Paper</li>
<li> Bangla 2nd Paper</li>
</ul>
<li>English</li>
<ul>
<li>English 1st Paper</li>
<li> English 2nd Paper</li>
</ul>
<li>ICT</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>HTML Nested List</title>
</head>
<body>
<h3><u>Compulsory Books:</u></h3>
<ol>
<li>Bangla</li>
<ol type="a">
*D`vniY-4 <li> Bangla 1st Paper</li>
<li> Bangla 2nd Paper</li>
</ol>
<li>English</li>
<ol type="i">
<li>English 1st Paper</li>
<li> English 2nd Paper</li>
</ol>
<li>ICT</li>
</ol>
</body>
</html>
[11]
<!doctype html> *D`vniY-5
<html>
<head>
<title>HTML Nested List</title>
</head>
<body>
<p><b><big><u>Name of Divisions:</u></big></b></p>
<ol>
<li>Dhaka</li>
<li>Rangpur</li>
<ol type="i">
<li>Thakurgaon</li>
<li>Dinajpur</li>
<li>Kurigram</li>
<li>Panchagarh</li>
<li>Nilphamari</li>
</ol>
<li>Sylhet</li>
</ol>
</body>
</html>
▪ HTML Form
e¨enviKvix‡`i wbKU n‡Z BbcyUK…Z WvUv msMÖn Kivi Rb¨ HTML Form e¨envi Kiv nq| HTML Form WKz‡g‡›Ui GKwU
Ask hv e¨enviKvixi Kv‡Q WvUv MÖn‡Yi Rb¨ †UK&ª wdì, †PK eK&ª, ‡iwWI evUb, Wªc WvDb BZ¨vw` avib K‡i _v‡K|
▪ Text Input Fields
*D`vniY-1
<!DOCTYPE html>
<html>
<head>
<title>HTML Form: Text Field</title>
</head>
<body>
<h2>Text input fields:</h2>
<form>
First name:<br>
<input type="text" name="first_name"><br>
Last name:<br>
<input type="text" name="last_name">
</form>
</body>
</html>
<!DOCTYPE html>
<html> *D`vniY-3
<head>
<title>Password Input Control</title>
</head>
<body>
<form >
User ID : <input type = "text" name = "user_id"><br>
Password: <input type = "password" name = "password">
</form>
</body>
</html>
▪ Checkbox Controls
<!DOCTYPE html>
<html>
<head>
<title>Radio Box Control</title>
</head>
<body>
<form>
<b>Choose your elementary subject: </b><br/>
<input type = "radio" name = "subject" value = "psychology"> Psychology <br/>
<input type = "radio" name = "subject" value = "geography"> Geography <br/>
<input type = "radio" name = "subject" value = "biology"> Biology <br/>
<input type = "radio" name = "subject" value = "mathematics"> Mathematics
</form>
</body>
</html>
[13]
▪ Select Box Controls
<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title> *D`vniY-6
</head>
<body>
<form>
<h3><u>Select the place you want to go for study tour:</u></h3>
<select name = "dropdown">
<option value="select">select</option>
<option value="Ram Sagor">Ram Sagor</option>
<option value = "Kantojiu Temple">Kantojiu Temple</option>
<option value = "Mohasthangar">Mohasthangar</option>
<option value="Tista Barrage">Tista Barrage</option>
</select>
</form>
</body>
</html>
▪ Button Controls
<!DOCTYPE html>
<html> * D`vniY-8
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type = "file" name = "fileupload" accept = "image/*"><br/><br/>
<input type = "submit" name = "submit" value = "Submit">
</form>
</body>
</html>
[14]
▪ HTML Table
‡Uwej ˆZwii Rb¨ cÖ‡qvRbxq U¨vMmg~n n‡jv:
U¨v‡Mi bvg U¨v‡Mi weeiY
<table> ‡Uwej ˆZwii Rb¨
<th> ‡Uwe‡ji †nWvi wba©vi‡bi Rb¨
<td> ‡Uwej WvUv Bbcy‡Ui Rb¨
<tr> ‡Uwej †iv ev mvwi wba©vi‡bi Rb¨
<caption> ‡Uwe‡ji bvg cÖ`k©‡bi Rb¨
<thead> c„_K †Uwej †nWvi ˆZwi Kivi Rb¨
<tbody> ‡Uwe‡ji ewW wb‡`©‡ki Rb¨
<tfoot> c„_K †Uwej dzUvi ˆZwi Kivi Rb¨
<!doctype html>
<html>
<head>
<title> HTML Table-colspan </title>
</head>
<body>
<table cellspacing="0"width="200" border="1">
<tr align="center">
<td colspan="3">1</td>
</tr>
<tr align="center">
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>
* D`vniY-4
<!doctype html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border="1"cellspacing="0">
<tr>
<th>Name</th>
<th colspan="2">Jobs</th>
<th>Working Experience</th>
</tr>
<tr align="center">
<td>Neha</td>
<td>Software Engineer</td>
<td>Data Analyst</td>
<td rowspan="2">5 Years</td>
</tr>
<tr align="center">
<td>Nafis</td>
<td colspan="2">Senior Web developer</td>
</tr>
<tr align="center">
<td>Shafin</td>
<td>Junior Tech Writer</td>
<td>Blogger</td>
<td>6 Months</td>
</tr>
</table>
</body>
</html>
[16]
* D`vniY-5
<!doctype html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border="1"cellspacing="0" width="200">
<caption><em>Average height &
weight</em></caption>
<tr>
<th colspan=2" rowspan="2">Gender</th>
<th colspan="2">Average</th>
<th rowspan="2">Red <br> Eyes</th>
</tr> * D`vniY-6
<tr>
<th>Height</th> <!doctype html>
<th>Weight</th> <html>
</tr> <head>
<tr align="center"> <title>HTML Table</title>
<th colspan="2">Males</th> </head>
<body>
<td>1.9</td>
<table border="1"cellspacing="0" width="200">
<td>0.003</td>
<caption>Bill Summary</caption>
<td>40%</td> <thead>
</tr> <tr>
<tr align="center"> <th rowspan="2">Month</th>
<th colspan="2">Females</th> <th colspan="3">Bills</th>
<td>1.7</td> </tr>
<td>0.002</td> <tr>
<td>43%</td> <th>Electricity</th>
</tr> <th>Water</th>
</table> <th>Gas</th>
</body> </tr>
</html> </thead>
<tbody>
<tr>
<td>January</td>
<td>809</td>
<td>600</td>
<td>850</td>
</tr>
<tr>
<td>February</td>
<td>955</td>
<td>720</td>
<td>700</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total</th>
<td>1000</td>
<td>1000</td>
<td>1000</td>
</tr>
</tfoot>
</table>
</body>
</html>
[17]
▪ span tag/element Gi e¨envi: †Kvb paragraph Gi AšÍM©Z K‡qKwU kã‡K iwOb Kivi Rb¨ span U¨vM
Gi mv‡_ style GwUªweDU e¨envi Kiv nq|
<!DOCTYPE html>
<html>
<head>
<title>Uses of span tag</title>
</head>
<body>
<p>Bangladesh enters a new era in communication
today<br> with the launch of its <span style =
"color:red" > first metro rail,</span> promising
fast,<br> reliable, and safe commute in a traffic-choked
Dhaka.</p>
</body>
</html>
▪ div tag/element I style attibute Gi e¨envi: GKwU WKz‡g‡›Ui wewfbœ Ask _v‡K| Gme As‡ki KvR
G‡KK iKg n‡q _v‡K| ZvB G‡`i MVbI wfbœ nq| GB Ask¸‡jv‡K Avjv`v Kivi Rb¨ div tag e¨envi Kiv
nq|
style attribute e¨envi K‡i I‡qe‡c‡Ri wewfbœ Gwj‡g‡›Ui is, d›Umn wewfbœ ˆewkó¨ ev †cÖvcvwU© D‡jøL
K‡i †`Iqv hvq| style attribute Gi wfZi wewfbœ ÷vBwjs wb‡`©kbv †`Iqv hvq|
<!DOCTYPE html>
<html>
<head>
<title>Uses of Style attribute</title>
</head>
<body>
<div style="width:35px; height:20px; float: left;
background-color:yellow; color:darkred; margin: 5px; padding:
10px">Home</div>
<div style="width:50px; height:20px; float: left;
background-color:forestgreen; color:yellow; margin: 5px;
padding: 10px">Facilities</div>
<div style="width:40px; height:20px; float: left;
background-color:blue; color:white; margin: 5px; padding:
10px;">Gallery</div>
</body>
</html>
[20]
I‡qemvBU cvewjwks Gi Rb¨ cÖ‡qvRbxq welqvewj
I‡qemvBU cvewjwks Gi Rb¨ eZ©gv‡b wewfbœ ‡nvw÷s †Kv¤úvwb wewfbœ c¨v‡KR mvwf©m w`‡q _v‡K| GRb¨ I‡qemvBU
cvewjwks Gi mgq cÖ‡qvRbxq wKQz welq we‡ePbv Kiv cÖ‡qvRb| ‡hgb:
• I‡qe ‡¯úm:GwU n‡jv e¨enviKvixi Rb¨ I‡qe mvf©v‡i eivÏK…Z †÷v‡i‡Ri cwigvY| hw` †÷v‡i‡Ri
cwigvY 200 †gMvevBU n‡q Zvn‡j eivÏK…Z ‡¯ú‡‡mi g‡a¨B mKj dvBj ivL‡Z n‡e|
• e¨vÛDBW_: e¨vÛDBW_ n‡jv GK gv‡m me©‡gvU WvUv UªvÝdv‡ii cwigvY| hw` mvB‡U ivLv dvB‡ji mvBR
1 †gMvevBU nq Ges GB dvBjwU 100 Rb e¨enviKvix hw` GKevi K‡i †`‡L ev WvDb‡jvW K‡i Zvn‡j
e¨vÛDBW_ LiP n‡e 1*100=100 ‡gMvevBU| mvBUwU wK cwigvY eªvDR WvDb‡jvW n‡e Zvi Dci
wbf©i K‡i e¨vÛDBW_ eivÏ Kiv DwPZ|
• B-‡gBj A¨vKvD›U: wR‡gBj, Bqvû BZ¨vw` _vW©© cvwU© B‡gBj †mev e¨envi bv K‡i wbR¯^ †Wv‡gB‡bi
Aax‡b B‡gBj wVKvbv e¨envi Kiv †h‡Z cv‡i|
• MySQL Database: WvBbvwgK I‡qemvBU ‰Zwi Kivi Rb¨ WvUv‡e‡Ri mv‡_ mshy³ Kiv nq|
• FTP Accounts: GwU GK ai‡ib wUwmwc/AvBwc †cÖv‡UvKj h `y‡Uv Kw¤úDUv‡ii g‡a¨ WvUv ¯’vbvšÍ‡ii
my‡hvM K‡i †`q| GKwU FTP mvf©vi BDRvi g¨v‡bR‡g›U, kbv³KiY Ges Aby‡gv`b cwi‡lev mieivn
K‡i _v‡K|
• Sub-Domain: GKwU †Wv‡gB‡bi Aax‡b A‡bK¸‡jv Sub-Domain _vK‡Z cv‡i| †hgb-
http://teacher.ictshikkha.com, http://student.ictshikkha.com BZv¨vw`| m‡e©v”P KZ¸‡jv
Sub-Domain e¨envi Kiv hv‡e ‡nvw÷s †Kv¤úvwb wba©vib K‡i †`q|
‡Wv‡gBb †bg I I‡qe †nvw÷s Gi cv_©K¨
▪ ‡Wv‡gBb †bg:
• AvBwc wVKvbvi Alphabetic di‡gU‡K †Wv‡gBb †bg ejv nq|
• ‡Wv‡gBb †b‡gi †ÿ‡Z wba©vwiZ bvg, ‡Wv‡gBb UvBc, Kvw›Uª †Wv‡gBb BZ¨vw` welq †Lqvj ivL‡Z nq|
• ICANN KZ©„K †Wv‡gBb †bg wba©vwiZ nq|
▪ I‡qe †nvw÷s:
• I‡qemvBU †Kvb I‡qe mvf©v‡i Avc‡jvW Kiv‡K I‡qe †nvw÷s e‡j|
• G‡ÿ‡Î †÷v‡iR, e¨vÛDBW_, wbivcËv BZ¨vw` welq¸‡jv we‡eP¨|
• wewfbœ †Kv¤úvwbi gva¨‡g Zv‡`i mvf©©v‡i I‡qe †nvw÷s e¨e¯’vcbv Kiv hvq|
[21]