A Handnote On The Fundamentals of HTML and CSS

Contents
Chapter 0: Welcome to the Course
Chapter 1: HTML5-HyperText Markup Language
1.1 HTML Basics

1.2 HTML Element
1.3 HTML Attribute
1.4 HTML Paragraph
1.5 HTML Style
1.6 HTML Formatting
1.7 HTML Quotation
1.8 HTML CSS
1.9 HTML Link
1.10 HTML Image
1.11 HTML Table
1.12 HTML List
1.13 HTML Block and Inline
1.14 HTML Id and Class
1.15 HTML I-frame
1.16 HTML JavaScript
1.17 HTML Responsive Website
1.18 HTML-Form-Element
1.19 HTML-Media
1.20 HTML-Location-API
1.21 HTML-Drag-Drop
1.22 Practice Files Online
HTML-Basic CSS Practice Files Online (Click Here)
Chapter 1: CSS- Cascading Style sheets
2.1 CSS Basics

2.2 CSS Syntax
2.3 CSS Selector
2.4 Add CSS
iii
2.5 Add Comments
2.6 CSS Background
2.7 Inline Border
2.8 CSS Margin
2.9 Height and Width
2.10 Box Model
2.11 CSS Outline
2.12 CSS Text
2.13 CSS Font
2.14 CSS Icon
2.15 CSS Link
2.16 CSS List
2.17 CSS Table
2.18 CSS Display
2.19 CSS Position
2.20 CSS Float
2.21 CSS Alignment
2.22 Combinators
2.23 Opacity
2.24 RWD Grid
2.25 RWD Media Quarry
2.26 CSS Practice Files
CSS Practice Files Online (Click Here)
iv
About
This is a hand note of Sazzad Saju on HTML-5, CSS and Bootstrap-5. It covers the fundamentals
of web developing also some practice files. This hand-note was processing during a self-study by
its author Sazzad Saju himself and distributed freely and not for any business purpose. The
contents are written in Bengali Language with associate codes. Hope someone finds this helpful.
Thank me later. CHILL
Special Note: The Practice-Files were created after learning some fundamentals and to some
extent. It is well decorated. So without prior knowledge someone can learn the fundamentals by
practicing these practice files.
Sazzad Saju
CSE, HSTU
Email: sazzadsaju17@gmail.com
5
Welcome to the course
☛ HTML - hypertext markup language, it’s not a programming language, it’s markup language.
আবিষ্কার কররনঃ Tim Berners-Lee, HTML শুরু করার আরে বিবন WWW (world wide web) চালু কররন। HTML
বিরে মেইনবল ওরেিসাইরের স্টাকচার দ্বার করা হে। এো হরে মস্টন্ডার্ড, মেরকান ওরেিসাইে তিরী করার আরে মে মকউ
এই HTML মেরন চলরি।
☛ CSS- Cascading style sheets. HTML and CSS are two of the core technology for building web
pages. Håkon Wium Lie বিবন এই CSS আবিষ্কার কররন। Tim Berners-Lee িার সহকেডী। বিবন এিং Tim berners
lee CERN বনরে কাজ করার সেে এই CSS প্রস্তাি কররন। HTML বিরে আেরা মেই স্টাকচার দ্বার করাই এোরক সু ন্দর
কররি মেরল িা স্টাইল কররি মেরল এই CSS লারে।
☛ Bootstrap হরে CSS এর একো লাইরেরী।
☛ Software Installation
VS code এ মকার্ বলখরিা, আর রান কররিা গুেল মরারে। এজরনে VS code এ এক্সবেনশন বহরসরি Live Server ইন্সেল
করর বনরি হরি।
Prac-HTML-1.html এইরকে বকছু একো নাে বিরে একো ফাইল বররেে করর বনরে ! বলরখ এন্টার, িাহরল HTML বলখার
মিবসক স্ট্রাকচার চরল আসরি, মিন ো ওরেিসাইরে মশা করারি চাই িা িবর্ এর বলির বলখরিা। আর head েোরের বলির
title মচঞ্জ and/or মকান বলংক েু ক্ত করার থাকরল িা কররিা।
1
HTML5- HyperText Markup Language
HTML Basics
<head> এই েোরের বলিরর মেোরর্ো থাকরি । প্ররিেকো েোে এরকে এঙ্গু লার েোরকে বিরে শুরু হরি আর এলারি মশষ
হরিঃ </head> . এই েোরের বলিরর থাকরি মেবশবফক র্াোগুলা, মহর্ার এর মেরে মের্ারর্ো। মেোরর্ো োরন
information of information.
Head এর বলির থারক, Title, োইরেল েোরের বলির আেরা একো োইরেল বিরি পাবর, মেো ওই ওরেিরপজরক ইবন্টরকে
কররি।
body মি একাবিক মহর্ার থাকরি পারর মেেনঃ
<h1>Hello world</h1>
<h2>Hello world></h2>
up to <h6>
HTML Element
HTML এর ইবলরেন্ট মকান একো েোে। স্টােড েোে, কনরেন্ট আর লাস্ট েোে একসারথ ইবলরেন্ট। মেেনঃ
<p> This is a paragraph </p>
HTML ইবলরেন্ট মনরস্টর্ হরি পারর। মেেন মিাল্ডঃ
<p><b>this is bold</b> This is a paragraph </p>

Some shortcuts:
✔ একসারথ VSCode এ সি করেন্ট করর বিরি চাইরল, োইপ Ctrl+/ অথিা  এর বলিরর রাখরি হরি।
✔ আিার মকান লম্বা লাইন থাকরল মসো বসংরেল বর্সরেরি োবিপল লাইন বহরসরি বনরে আসরি োইপ alt+Z
✔ পোরাগ্রাফ েোরের বলির অরনকগুরলা লাইন বলরখ রান করর মিখা হে, আউেপুে মকেন আরস। এখারন অরনক লাইন
বলখরি মেরল মকাথাও মথরক কবপ করর আনার সেসো আরছ। মসজরনে মরন্ডে ওোর্ড মজনাররে করর আউেপুে মচক করার
সু বিি ররেরছ। এজরনে োইপঃ lorem100 বলরখ এন্টার। িাহরল ১০০ ো মরন্ডে ওোর্ড মজনাররে হরি। েবি আরও মিবশ বলবখ
িাহরল িিগুরলা ওোর্ড মজনাররে হরি।
HTML Attribute
এক্সট্রা গুণাগুণ। মেেনঃ leng = “en” এো মহর্াররর একো গুণাগুন। মেোরর্ো charset = “UTF-8” ইিোবি এখারন
attribute. পোরাগ্রারফ বিবলন্ন কালার ইউজ কররি মেরল, এলারি <p এর পরর style বলখা োেঃ
<p style= “color: red;>
2
HTML Paragraph
☛ <br> Tag: Paragraph এর মেখারন মেখারন মেক মিো লােরি মসো মিো োরি এলারিঃ <br> এর মকান মলাজ েোে
মনই, এো বনরজই একো মলাজ েোে। এোরক লাইন মেক িরল, োরন লাইন এখারন মশষ করর বনরচ মথরক শুরু করা।
☛ <hr> Tag: আলািা িু ইো মসকশন কররি চাইরল োঝখারন <hr> েোে। horizontal root.
✖ মকান একো েোে শুরু করর এরপর মলাজ না কররল বিবলন্ন প্রিরলে বররেে হরি পারর। মসজরনে,
✔ Format Document or, Shift+Alt+F মচরপ মকার্ ফরেোে করর বনরল সু বিিা হে বর্িাবেং এ।
☛ <pre> Tag: এোরক িরল বপ্র ফররেরের্ paragraph েোে। এর বলিরর মেেন বলখরিা মিেন মশা কররি। সারপাজ
মেখারন মেখারন এন্টার বলরখবছ, মসখারন অরো এন্টার হরে বপ্রন্ট হরি আলািা করর, <br> বলখরি হরি না। মেলারি মেস
বিরেবছ িিগুরলা মেস বিরি। এর সারথ <p> </p> এর এোই পাথডকে, মে পোরাগ্রাফ ফররেে করর মনে, এক্সট্রা মেস িাি
মিে, আর বপ্র ফররেরের্ এ মেলারি আরছ মসলারি রারখ। Now, experiment with some line using <pre> and <p>
both. Also print Bangla and MS Gothics.
♪♫ আোর মসানার িাংলা
আবে মিাোে লারলািাবস... ♬♫
HTML Style
☛ Suppose, heading োরক center এ আনরি চাবে, িাহরল style add কররি হরি। <h1 style= বলখরলই অরনকগুরলা
অপশন চরল আসরি, এরককোর এরকক কাজ, এরেরিে, text-align: বসরলক্ট করর, center কররল, মহবর্ংো বেবর্রল চরল
আসরি।
<h1 style="text-align: center;">Heading One</h1>

<h2 style="background:cyan;">Header Two</h2>
☛ এখন োবিপল স্টাইল এর্ কররি চাইরল ওই মকারেশরনর েরিেই কররি হরি, মসবেরকালন বিরে, এখারন মেক্সে
এলাইনরেন্ট করা হরলা বের্রল আর িোকগ্রাউন্ড কালার সাোনঃ
<h1 style="text-align: center; background: cyan;"> Header One</h1>
☛ বিবলন্ন ফন্ট ফোবেবল ইউজ করাঃ
<h1 style="font-family:'Courier New', Courier, monospace;">Header One</h1>

<h1 style="font-family: fantasy;" >Header One</h1>
<h1 style="font-family:Arial, Helvetica, sans-serif;" >Header One</h1>
আউেপুেঃ
3
☛ ফন্ট সাইজ মেনশন করর মিওোঃ
<p style="font-size: 24px;">

Lorem, ipsum dolor sit
</p>
HTML Formatting
☛ super script (up) subscript (down):
(a+b)<sup>2</sup> = a<sup>2</sup> + 2ab + b<sup>2</sup>

2 2 2
এখারন সু পার বিপ্ট করা হরেরছ, ফরল (a+b) = a + 2ab + b এলারি মশা কররি স্কোর ওপরর। আিার
Water = H<sub>2</sub>O
এখারন সািবরপ্ট করা হরেরছ ফরল, H2O এলারি মিখারি বনরচ।
☛ Underline কররল হরল এলারিঃ
<u> Here is underline </u>
☛ <del< </del<কররল একো লাইন োঝখান মথরক মকরে োরি।
☛ <i< </i<কররল বলখা হরি। italic
☛ <q< </q<কররল বলখা মকারেশরনর বলির হরি।
HTML Quotation
<bockquote> </blockquote> এো মকান পোরাগ্রারফর বলিরর িা িাইরর আলািালারি ইউজ করা োরি। এোে, এেনলারি
োউজারর মশা কররি োরি িুঝা োে এো মকান জােো মথরক মনওো। মরস্ট অি িো মেক্সে মথরক আলািা হরি োরন, মলফে
সাইর্ মথরক রাইে সাইরর্ একেু ইরন্টন্ড করা। এখারন মরফাররন্স বিরে, মকারেশনসহ, হালকা িোকগ্রাউরন্ড বলরখ এেন মরজাি
আসরছঃ
<blockquote cite="Wikipedia.com" style="background-color:lightyellow; font-size: 24px;">
<q>From Wikipedia: <abbr title="Hyper-Text Markup Language"><b>HTML</b></abbr> is the

structure of any website.Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate nobis
quisquam consequuntur optio quod,….. </q>
</blockquote>
4
Output:
✖ blockquote পোরাগ্রারফর বলিরর ইউজ কররল একো প্রিরলে হে, মে ফন্ট কালার মচঞ্জ হরে োরে মেখারন blockquote
মশষ হরে, িাই blockquote মক paragraph এর িাইরর রাখা উবচি।
☛ Abbreviation েু ক্ত করা:
একো লাইন আরছ আোরির মপরজ, HTML is the structure of any website. এখারন HTML এর পূ ণড রূপ মেরনা
মসখারন োউস পরেন্ট কররল মশা করর িারজরনে এলারি,
<abbr title="Hyper-Text Markup Language"><b>HTML</b></abbr>
এখারন title এ বিরে বিরি হরি, মেো মশা করারি চাই, উপরন্তু HTML শব্দোরক মিাল্ড করার জরনে <b< </b< use করলাে।
☛ Address েু ক্ত করা
<address< </address< এর বলিরর বকছু বলখরল মসো অরো ইোবলক হরে োে। োরন এর পবরিরিডঃ <p< <i< </i< <p<
ইউজ কররলও মসে মরজাি বিরি।
HTML CSS
☛ Inline css: আেরা <p< েোরের েরিে মেই attribute use করবছলাে style বলরখ মসো CSS apply করার একো
উপাে। িাে মসলারি কররি মেরল আোরির প্ররিেকিার <p< েোরের মেরে িার িার মচঞ্জ কররি হরি। এোরক িরল in-
line CSS এো না করর এলারিও inline css করা োেঃ <head< েোরের বলির <title< এর বনরচ বলখরিা,
<style>
p{
color:blueviolet;
text-align: left;
</style>
এলারি style বিরে বিরল <p< েোরের বলির ো আরছ সি এই style মেইরন্টইন করর চলরি। িাে পরিবিডরি <p< েোরের
বলিরর পুনরাে style মচঞ্জ কররল মসো শুিু ওইোর জরনে মচঞ্জ হরি ওলাররাইে হরে। এখারন Object oriented rules
maintain কররছ।
☛ External css: এিার আবস এক্সোনডাল বসএসএস কারনক্ট করার িোপারর। একো ফাইল বররেে কবর, style.css অথিা
মেরকান নারে। ওই ফাইরল সারপাজ <p< েোরের attribute বর্ফাইন করর বিলাে। োইরেরলর বনরচ link:CSS বলরক এন্টার
5
বিরল, CSS কারনক্ট হরে োরি। িাই বর্ফি style.css নারে ফাইল কারনক্ট হে, েবি বলন্ন নারে (mystyle) অনে মকান
মফাল্ডারর (css) থারক িাহরল, css/mystyle.css এলারি কারনক্ট কররি হরি। আর েবি ইন্টাররনরে থারক ওই মপজো িাহরল
href= ওই বলংকো বিরে বিরি হরি।
✖ প্রিরলেঃ css file ো ওই মফাল্ডাররই েবি থারক, আররকো মফাল্ডারর মেেন CSS িাহরল, CSS/mystyle.css বিরল
পারে, িাে অনে ড্রাইরল িা ওই মফাল্ডাররর বলিরর মকান একো জােোে িারি অনে মকাথাও থাকরল িাহরল আর পারে না।
HTML Link
☛ বলংক করার জনে আেরা মে েোে ইউজ কবর িা হরলা এংকর েোে। <a href= “”> </a> .
<a href="Prac-HTML-1">My Blog</a>
☛ Target set up: href= “ ” এর পরর, target = “_blank” বিরল বলংরক বলক কররল নিুন একো মলংক েোরি মপজো
ওরপন হরি। আর target = “_self” বিরল মসে মপরজই ওরপন হরি মেো বর্ফিলারি হরে থারক।
<p>Now Go to the second page, <a href="Prac-HTML-1.html" target="_self">My Blog</a></p>
এখারন মিখলাে, বকলারি একো মেক্সরে বলক কররল নিুন মপরজ োে। চাইরল মেক্সরের জােোে করন্টন্ডস বহরসরি ইরেজ
বিরি পাবর, িাহরল ওই ইরেরজ বলক কররল অনে মকাথাও োরি।
✔ মকান ওরেি সাইরে বলংক কররি চাইরল অিশেই https সহ বিরি হরি, না হরল মসোরক ফাইল বহরসরি কাউন্ট কররি।
HTML Image
ইরেজো মলার্ না বনরল িাহরল ,alt এর বলিরর থাকা মেক্সে মশা কররি। এখন স্টাইল এর্ োে, মেেন অবরবজনাল ইরেজ
অরনক িড় িাহরল, style এর বলির হাইে, ওোইর্ বিরে মিওো োে। ছবিো োঝখারন আনরি চাইরল একো বপ েোরের
বলির, মেক্সে এলাইনরেন্ট বের্রল কররল হরে োরে।
<img src= "img/Meh2 .jpg" alt="That's Me" style="width: 300px;height: 300px;">
Google মথরক সাচড করর কবপ ইরেজ এরড্রস বিরে src = “link” এর জােোে মপস্ট কররল, মসখারন ওরেি মথরক মলার্
বনরে ওই ইরেজো মশা কররি।
✖ মনে কারনকশন না থাকরল িাই আর ইরেজো মলার্ বনরি পারর না।
HTML Table
☛ <table> </table> েোরের বলির আেরা একো কোপশন বিরিা। <caption> Table1 </caption>
☛ িারপর মেিল মরা বররেে কররিা। <tr> </tr> . এর বলির প্রথরে মেবিল মহর্ার বররেে কররিা। <th> <th> । সারপাজ
চারো মহর্ার বিলাে ,Roll, Name, Subject, Marks
কিন্তু বর্ডার নেই, তাই বর্ডার কিয়েট িরার নেষ্টা িরনবা। এজনেে নেয়েতু style.css কারনক্ট করা আরছ, িাই এক্সোরনাল
বসএসএস এর োিেরে, ির্ডার বিরিা এলারিঃ
table{
6
border: 1px solid black;
☛ এখন আিার tr েোরের োিেরে নিুন মরা বররেে করর, এরেরিে র্াোগুরলা আরস্ত আরস্ত বিরি চাবে। িাহরল, এজরনে
মেবিল মর্ো অথডোৎ <td> </td> েোে ইউজ কররিা। চারো র্াো বিলােঃ 01, saju, math, 98
মিখা োরে, শুিু মেবিরলর ির্ডার হরেরছ। েবি চাই মে, প্ররিেকো মসল এরও ির্ডার থাকরি িাহরল, বসএসএস ফাইরল,
table,th,td{ } বলখরিা। [table এর সারথই নিুন করর th, td]
☛ বকন্তু এখন মেবিরলর ির্ডার আর ওবিরক মহর্ার আর মর্োর ির্ডার, িু ইএ বেরল র্ািল হরে মেরছ। এোরক কলাপস করর
সািারণ মেবিল (এক লাইন ির্ডার) িানারি চাইরল, { } এর বলিরঃ
border-collapse: collapse;
এখন মিখা োরে, মর্ো ির্ডাররর খুি কাছাকাবছ, চাপা রকরের মেবিল হরেরছ। মেস বিরে মেবিলোরক িড় কররি চাইরল
এলারি, এখারন ১৫ বপরক্সল ইউজ করা হরেরছ। প্ররোজন েরিা িাবড়রে কবেরে বনরলই হরি।
padding: 15 px;
☛ এখন েবি, িু ইো কলারের েরিে িু ই মসল বেবলরে এক মসল িানারি চাই িাহরল, সারপাজ লারস্টর িু ই মসরলর মেরে,
<td> Mathmetics </td> এরজােোে বলখরিা, <td colspan = “2”> অথডোি িু ইো কলারের মেন চাই আেরা। একইলারি,
িু ইো মরা মক এক কররি চাইরল, <th rowspan = “2”> আর বনরচর মরা এর র্াোো েুরছ বিরিা। িাহরল িু ইো মসল এক
হরে োরি এক র্াো বিরে। Here is the total code for the table:
<table>
<caption>Table.1: Class One Result </caption>
<tr>
<th>Roll</th>
<th>Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td>01</td>
<td>Saju</td>
<td>Mathematics</td>
<td>98</td>
7
</tr>
<tr>
<td>02</td>
<td>Raju</td>
<td>90</td>
</tr>
<tr>
<td rowspan="2">03</td>
<td>Anamika</td>
<td>99</td>
</tr>
<tr>

<td>Shakia</td>
<td colspan="2">Mathematics</td>

</tr>
</table>
☛ এর সারথ সংেু ক্ত css:
table,th,td{
font-size: 24px;
border-collapse: collapse;
padding: 15px;
☛ Output:
8
HTML List
☛ Unorder list এর জরনে ,<ul> </ul>
এর বলির বলস্ট আইরেে রাখার জরনে েোেঃ <li> </li>
েবি ১০ ো এরকে বলস্ট িাবনরে মফলরি চাই একসারথ, িাহরল li*10 বলরখ এন্টার মপ্রস কররল, ১০ ো মজনাররে হরে োরি।
same way order list: <ol> </ol> এর বলিরর বলস্ট আইরেে রাখরিা।
েবি োইপ মচঞ্জ করর বিরি চাই, োরন, 1. 2. এলারি না বিরে i. ii. ইিোবি িাহরল ,<ol type= “i”> এখারন বিবলন্ন িররণর
োইপ আরছ।
✖ Unorder বলরস্ট োইপ মচঞ্জ করা োরে না।
HTML Block and Inline

☛ <p> েোেো হরলা লক ইবলরেন্ট, আর <span> </span> হরলা ইনলাইন ইবলরেন্ট। অথডোৎ েবি িোকগ্রাউন্ড কালার থারক
span এ িাহরল মেখারন মশষ হরি মেক্সে, িোকগ্রাউন্ড কালারও মসখারন মশষ হরে োরি।
☛ <div> এোও একো লক ইবলরেন্ট। এখন div লরক েবি আলািা style use কবর, আর এর বলিরর span ইউজ কবর
িাহরল, span এর মে স্টাইল মসোর জরনে div লরক আলািা কালারর হাইলাইে হরি।
✔ ফরল একই লাইরন োবিপল িোকগ্রাউন্ড কালার ইউজ করা সম্ভি হে।
HTML Id and Class

<p id = “idname”> </p>
Then from CSS file:
#idname{ font-size: 24px }
9
িাহরল p েোরের জরনে একিার CSS ফাইরল style বলরখ রাখরল মেরহিু মসো সি p এর জরনে এোই হরে, িাই id বিইরে
p েোে ইউজ কররল মসোর জরনে #idname বলরখ আলািা করর style css ফাইরল বলখা োরি। id use করার সু বিিা হরলা,
জালাবিপ্ট েখন আেরা ইউজ কররিা, িখন ওই জালািরপ্ট খুরজ মপরি সু বিিা হরি।
✔ পেডরিেণঃ এখারন, <p id = “secondp” বলরখ িু ইো পোরাগ্রাফ বলখলাে। িু ইোরিই মসে এবট্রবিউে পারে। োরন একই
আইবর্ িারিার ইউজ করা োে। আিার আররকো আইবর্ বলরখ বর্ফাইন কররল মসোও িার েরিা করর কাজ করর মেেন
বলখলাে <p id = “thirdp”> এরপর css এ #thirdp{ } বলরখ এবট্রবিউে বিলাে আলািা মসোও কাজ কররছ। আিার p
এর জরনে এই আইবর্ মেলারি কাজ কররছ একইলারি div এর জরনেও কাজ কররছ।
✔ লাস উরেখ কররল মসো css ফাইল মথরক বর্ফাইন কররি মেরল .class-name এলারি বর্ফাইন করা লােরি # এর
পবরিরিড।
HTML I-frame
এক website/ওরেিসাইরের ইবলরেন্ট আররক ওরেিসাইরে মশা করর। এো করর I-frame বিরে। অথডাৎ একো মসাসড িরল
মিে, মসই মসাসড মথরক মশা করর, স্ট্রাকচারঃ
<iframe src="mypage.html" frameborder="0" height="400" width="490"></iframe>
এখারন src এর বলিরর মকান ওরেিসাইে থাকরল িার বলংক অথিা মলাকাল মপরজর বিকানা বিরল হাইে ওোইর্ আর
মেেির্ডার মেো মেলারি বিরল লারলা মিখাে বিরে বিরল, ওই ওরেিরপজো মসখান মথরক োউজ করা োরি। বনরচর িু ইবে
ওরেিসাইে ফান ইবলরেন্ট বহরসরি েু ক্ত করা োেঃ
 hackertyper.com
 https://elgoog.im/pacman/
বপ েোরের েরিে মেক্সে এলাইরেন্ট বের্রল বিরে ওরেিরপজো বের্রল বনরে এরস হাইে ওোইর্ েথাররে ৪০০ িাই ৭০০
বিবছ।
HTML JavaScript
☛ JavaScript এর কাজ কররি হরল ,<script> </script> এর বলির ফাংশন বলখরি হরি :function fun() { } । এখন
মেইপোরাগ্রারফর ওপর কাজ কররি, মসোরক কল করার জরনে আইবর্ মনে বিরি হরি। <p id = “idname”> . আিার কাজো
শুরু কররি মেরল একো িােন মনো লােরি োরি ওোরি বলক কররল মচঞ্জেুকু হে। মসজরনে< ,button> </button> এখারন
োইপ িরল বিরিা ,<button type = “button”> আর কাজ কররি on click এ। আর মসখারন মকান ফাংশরন োরি মসই
ফাংশরনর নাে িরল বিরিা। িাহরল একসারথ িাড়ারেঃ
<button type= “button” onclick = “fun()”> Button_name </button>
☛ ফাংশরনর প্রথে কাজ হরি এই র্কুরেন্টো খুরজ মির করা িাহরল বলখরিাঃ document. এরপর document মথরক মকান
একো ইবলরেন্ট খুজরি মসজরনে আররকো ফাংশন কল বিরিা ,getElementById() এর বলিরর ওই p েোরের আইবর্র নােো
10
বিরে বিরিাঃ idname. এরপর একো র্ে বিরে বলখলােঃ innerHTML োরন এরেরিে মেই কনরেন্টো আরছ িা মচঞ্জ কররি
চাবে। একসারথঃ
<script> function myfunction(){ document.getElementById(“idname”).innerHTML = “This is from

Javascript”
আর িােরনর একো নাে বিরিা বলখলােঃ Click Here. িাহরল click here এ বলক কররল মিখারি এই লাইনেুকুঃ This
is from Javascript. এলারি ফাংশরনর োিেরে বক কররি িা িরল মিওো োে।
☛ HTML Location Api এই েবপরক্সর বনরচ একবে প্ররজক্ট করা হরেরছ মেখারন িােরন বলক কররল গুেরলর পবজশন মশা
করর বিরি Longitude, Latitude এর োিেরে, পাশাপাবশ েোরপ মিখারি। এো একইলারি জালাবিরপ্টর এখারন িবণডি
ফাংশনগুরলা বিরে করা হরেরছঃ
HTML Responsive Website

screen মছাে িড় কররল বলখা িা স্টাইলগুরলাও মেরনা মছােিড় হে। এজরনে p tag এ স্টাইল বলরখ েবি font-size মিই
42px িাহরল োউজার মছাে িড় কররলও বলখার সাইজ মসে থাকরিরছ, মছাে িড় হরে না। কারণ এো বপরক্সরল বহসাি
কররিরছ। বকন্তু েবি মিই, 5vw. িাহরল এই বলখাো ৫% জােো বনরি। অথডাৎ এখন োউজার মছাে িড় কররল বলখাোও মছাে
িড় হরি।
☛ bootstrap এ মরসপনবসল করাই থারক। মেকাররণ মসো বনরে বচন্তা করা লারে না।
☛ Responsive Image: এখারন আেরা id না বনরে, class বনরে style sheet মথরক height, width বিক করর বিরিা।
এজনে img েোরের বলিরর, src = “image_Link” মিন, alt = “message” ইরেজ মলার্ না বনরল ো মশা কররি। মিন,
class = “responsive” অথিা অনে নারে বিলাে। এোরক স্টাইল বশে মথরক বর্জাইন করার জনে dot েু ক্ত করর এলারি
বর্ফাইন কররিাঃ
.responsive{ width: 25%; height: auto; }
✖ বকন্তু iframe এর জরনে এই পদ্ধবিরি মরসপবন্সলরনস কাজ কররিরছ না।
HTML-Form-Element
Form বলরখ এন্টার বিরলঃ
<form action="" method="get"></form>
এখারন ,form বলখরল get আর post িু ইো অপশন আসরি। কনবফরর্নবশোল র্াো মেেন পাসওোর্ড ইউজাররর কাছ মথরক
বনরি মেরল post আর সািারণ র্াো মেো মশা কররি মসো বনরি চাইরল = methodget বনরিা। আর action এ িোকইরন্ডর
মকান ফাইল, মেখারন র্াোো োরি/প্ররসস কররি মসই ফাইরলর নাে বলখরিা, মেেন একো ফাইল বলখলাে useraccount.php
। এখন ইনপুে মনওোর জরনে input বলরখ এন্টার বিরল user এর কাছ মথরক মেক্সে আকারর ইনপুে মনওোর জরনে একো
িক্স বররেে হইরছঃ
11
<input type="text">
এখন, এোর একো মলরলল মিওোর জরনে, input এর ওপরর User Name <br> বিরল মলরলল হরে োরে। আের চাইরল
এলারি বর্ররক্টবল বলখরি পাবর আিার চাইরল একো মলরলল েোে বিরেও বলখরি পাবর। label বলরখ এন্টার বিরল জানরি
চাইরি কার জরনে আেরা মলরলল create কররি চাইবছঃ
<label for = “ ”>
এজরনে input এর একো id থাকরি হরি। বিলাে id = “username” । মসেলারি for এর েরিেও হরি “username”.
এরপর <label> </label> এর বলির User Name এলারি মলরলল এর নাে বলরখ বিরি পাবর।
এরপর input:password বিরল
<input type="password" name="" id="">
এরকে োইপ মজনাররে হরে োরি। id সািারণি মেই োউজাররর েরিে/ফাইরলর েরিে আরছ িারিই সীোিদ্ধ থারক। হেি
আেরা মসই id বিরে css এর সারথ কারনক্ট করার মচষ্টা কবর, িা javascript এর সারথ কারনক্ট করার মচষ্টা কবর। আর
name এর োিেরে আেরা মেই িোকইন্ড ফাইরলর কারছ পািারিা name এর োিেরে মসই িোকইন্ড ফাইল িারক বচনরি।
মেরহিু িোকইরন্ডর কাজ করবছ না, িাই এখন ফাকাই রাখরিা, আর id এর নাে বিলাে password.
☛ এখন আেরা Gender ো ইনপুে বনরিা। radio িােন বিরে।
<label for= “ ”> Gender </label>
এরপর input:radio বিরল মরবর্ও িােন বররেে হরি।
<input type = “radio” name = “ ” id = “ ”>
এখারন name = “gender” বিলাে, আর লোলু মসে করর বিরিা। value = “male” এরপর মসে লাইনো কবপ করর ,value
= “Female” বিরিা। মসখারন name = “gender” ই থাকরি। িাহরল মজন্ডার বহরসরি এখন male female মেরকাণ একো
বসরলক্ট কররি পাররিা। বকন্তু েবি ,name এ িু ইো িু ই রকে নাে থাকরিা িাহরল িু ইোই বসরলক্ট করা মেরিা।
☛ লারস্ট আেরা একো সািবেে িােন বররেে কররি পাবর।
<button type = “button> Submit </button>
আিার িােন ইউজ না করর input এো ইউজ করা োইরি পারর। মসজরনে ,input:submit বলরখ এন্টার। এিং value োও
িরল বিরি পাবর submit. এখারন value োরন িােরনর ওপর মকান নােো মশা কররি মসো।
<input type="submit" value="Submit">
মসল করর, এখন ওরেিরপজ মথরক submit এ বলক কররল িরল cannot connect useraccount.php অথডাৎ এই
মসাসডোরক খুজরিবছরলা।
12
Input:radio ইউজ না করর, select করা োে, িাহরল একো িক্স মথরক বসরলক্ট করা োরি। মসজরনে,
<select name="select" id="">
<option value="Female">Female</option>
<option value="Male">Male</option>
</select>
✖ এখারন ,name = “select” মিওো না মিওো একই কাজ কররছ। িোকইরন্ডর কারজ লােরি।
☛ এখন user এর কাছ মথরক েবি িড় মকান ইনপুে বনরি োই, িাহরল বলখরিা textarea এন্টার। চাইরল cols = “”
rows = “” এখারন োন িবসরে মছাে িড় কররি পাবর। আিার েবি মকান বহন্টস বিরি চাই িাহরল, placeholder = “insert
your data” এখন েখন িক্সো মশা কররিা িারি এো বলখা থাকরি আর বলখরি মেরল এো চরল োরি, অথডাৎ বহন্ট বহরসরি
কাজ কররি।
☛ Datalist: একো িক্স থাকরি, মসখারন বলক কররল অপশন মিখারি, মসো মথরক চুেজ কররি পাররি user। এজরনে
প্রথরে একো input েোে ইউজ কররিা, মসখারন বলরখ বিরিা list = “mylist” িাহরল এই ইনপুে েোেো ওই নারের
বলস্টোরক খুরজ অপশন মিখারি। মসজরনে এখন datalist বর্বলোর করর, id = “mylist” এলারি মিন অপশন েু ক্ত কররিা
লোলু বিরে ।
☛ ফরেডর বলিরর ইনপুে এর িক্সোরক একেু িড় করার জনে css file মথরক input{ padding: 10px; }
☛ এখারন username এর জনে মেই input েোেো use করা হরেরছ, মসখারন েবি এর্ কবর, autofocus িাহরল মপজো
মলার্ মনিার পর পর কাসডরো মসখারন চরল োরি। আিার পাসওোরর্ড মরবস্ট্রকশন করর বিরি পাবর সরিডাচ্চ লোলু । maxlength
= “32” বিরল পাসওোর্ড সরিডাচ্চ ৩২ কোররক্টার পেডন্ত বনরি।
☛ এরপর েবি চাই, মে পাসওোর্ড অিশেই োইপ কররি হরি, িাহরল autofocus এর েরিা আররকো এবট্রবিউে এর্
কররিা, required. এখন এর বনরচ input:submit বররেে কররল, েবি এই বররকাোর্ড বফল্ড ইনপুে না বিরে সািবেে করর
মিে িাহরল মিখারি, please fill out this field.
✖ সেসো হরে, এই ইনপুে িক্সগুরলার সাইজ বকলারি বিরি হে িা বনরে। িরি textarea এই েোরের সাইজ বিক করা
োে cols & rows এর লোলু মচঞ্জ করার োিেরে।
সম্পূ ণড ফেড এর মকার্বে এরকেঃ
<form action="useraccount.php" method="get">
<label for="username">User Name: </label> <br>
<input type="text" id="username"> <br>
13
<label for="password">Password: </label> <br>
<input type="password" name="" id="password" required maxlength="8" autofocus> <br> <br>
<textarea name="" id="" cols="24" rows="10" placeholder="About Yourself"></textarea>
Location: <br>
<input type="text" list="mylist">
<datalist id="mylist">
<option value="Dhaka">Dhaka</option>
<option value="Dinajpur">Dinajpur</option>
<option value="Kishoregonj">Kishoregonj</option>
<option value="Tangail">Tangail </option>
</datalist>
<br><br>
Gender <br>
<select name="" id="">
<option value="Female">Female</option>
<option value="Male">Male</option>
</select>
<br><br>Are you interested to our project <br>
<input type="radio" name="ques" value="Yes" id=""> Yes
<input type="radio" name="ques" value="No" id=""> No
<br> <br>
<input type="submit" value="submit">
<br> <br> <br>
</form>
14
HTML-Media
Video বলরখ এন্টার মপ্রস কররল <video src = “”> </video> েোে আসরি। এখারন ,src মকরে বিরে hight আর width
বিই। সারথ controls োরি বলবর্ওো pause, ফুল বিন, সাউন্ড িাড়ারনা কোরনা ইিোবি করা োে। এখন video েোরের
বলিরর, মসাসড িরল বিই, <source src = “videos/myvideo.mp4> এর সারথ োইপোও িরল বিরি হরি মে এো একো
বলবর্ও ফাইল এিং mp4 ফরেোে। type = “video/mp4”. এরপর মসারসডর বনরচ ,video েোরের বলিরর একো েোরসজ
বিরিা োরি ফাইলো না চলরল একো েোরসজ মিখাে।
✔ আিার এখারন ,type = “video/mp4” এো না বলখরলও কাজ হরে েবি ফাইলো .mp4 হে।
✔ মেই বলবর্ও ফরেোে সারপােড কররঃ .mp4, .webm and .ogg অবর্ও .mp3 , web, .ogg format.
✔ Source tag use কররি চাইরল ওপরর src ইউজ না করর এর বলিরর কররি হরি। এখারন mkv ফাইলও সারপােড
কররিরছ। মসরেরে ,type উরেখ করর বিরি মেরল সারপােড বনরে ঝারেলা হরে োে। mkv ফাইল type এ বলখরল মসো
চরল না। type ছাড়াই েবি src মথরক বলংক করর মিওো োে, িাহরল এেবনই চরল।
Audio এর মেরে অবর্ও েোরের জরনে হাইে, ওোইর্ লােএ না। িাবক সি মসে। Type উরেখ কররি চাইরল, মসাসড এ
বলখরি হরি, type = “audio/mpeg” এখারন ,mpeg for mp3
✖ প্রিরলেঃ source doesn’t play two audio one after another or at once together. Seems like there is
something more missing.
☛ Embeded Youtube Video: এখন ইউবেউরির বলবর্ও এেরিরর্র্ করর মিওোর জরনে ওপর মথরক বলংক কবপ করর
এরন iframe এ িসারল হরে না কাজ। িারজরনে ,copy embedded code মথরক কবপ কররি হরি। এোই হরে মোোল
i-frame এর মকার্। সরাসবর এো ইউজ করা োে ,অথিা আরের েরিা ,iframe-ই ইউজ করা োরি শুিু , এই embedded
code মথরক https://youtube.com/xxxx এই বলংকো কবপ করর বনরি হরি। এরম্বরর্র্ মকার্ মথরক width, height,
frameborder ইিোবি মচঞ্জ করা োরি। মকার্গুরলা এখারনঃ
সরাসবর বপবস মথরক একো বলবর্ও েু ক্ত কররিঃ
<h1 style="text-align: center; background-color:black; color:darkorange">NSF Gameplay <br> <br>

<video src="videos/nsf gameplay.mp4" hight=400 width=600 controls>
Your browser doesn't support this file
</video>
<br> <br>
</h1>
আর অবর্ও েু ক্ত কররি এলারিঃ
<audio controls>
<source src="audio/Ubisoft.mp3" type="audio/mpeg">
</audio>
15
Output:
✖ এলারি একো মেরে বকলারি একাবিক বলবর্ও মে করারনা োেবন। েবি করা মেি করলাল সহ োরি একোরক বস্কপ করর
পরররোে োওো োে, িাহরল িোপারো কুল হরিা, একো বলবর্ও মেোররর েরিা চলারনা োরি ওরেিসাইে মথরক। একইলারি
অবর্ও মেোররর মেরেও
HTML-Location-API
একো িােন িানারিা মেখারন বলক কররল user এর পবজশনো মিখারি একো এম্পবে মহর্ার ফাইরল। বলক কররল (onclick)
এো myPosition() এই ইউজার বর্ফাইন ফাংশন এ চরল োরি। মসখান মথরক লোলু একো h1 মহর্ার ফাইরল মেরে িসরি।
আপিি ওই মহর্ার ফাইলো এেবে, আর এো বনরে কাজ করার জরনে এর id = “empty” নাে বিলাে।
< h1 id="empty"></h1>
<button type="button" onclick="myPosition()">Get Location</button>
এখন <script> এর বলির ,myPosition function ো বলখলাে। এই ফাংশরন একো কবন্ডশন বিলােঃ
if(navigator.geolocation) এর কাজ হরে, োউজাররর মনবলরেের ইউজ করর বজওরলারকশন মির করার কাজো সারপােড
করর বকনা এো মচক করা। েবি সারপােড করর িাহরল ,getCurrentPosition এো বিরে পবজশন মির করর মসো মিখারনার
জনে অনে একো ফাংশরন, মসই ফাংশরনর নাে বিলাে showlocation. এো আগুডরেন্ট এর বলির রাখলাে। আর ফাংশরনর
জনে মেরকে () মিো লারে িা লােরছ না। এই showlocation () ফাংশরনর বলির একো value আসরি position. এই
লোলু ো এখন h1 েোরে মশা করার আরে, প্রথরে এোরক খুরজ মির কররি হরি। এজরনে একো মলবররেিল বনলাে var h
(আরও িড় নাে হরল লারলা হে)। এরপর র্কুরেন্টো খুরজ (document) আইরেেোরক মির কররি (getElementbyID)
িরল ওই ফাংশরনর বলির h1 এর id এর নােো িরল বিরিা “empty”. লারস্ট মসবেরকালন িসরি। িাহরল h মলবররেিলো
র্কুরেন্টো খুরজ বনরে। এরপর ওই মহর্ার ফাইরল ইবলরেন্ট মচঞ্জ করার জনে h.innerHTML বলখলা। সোন বিরে ো বলখরিা
মসো চরল োরি। বলখলাে “long: ” িাহরল এই বলখাো মশা কররি, এরপর পবজশনো মিখারনার জনে,
+position.coords.longitude লারস্ট মসবেরকালন।
16
চাইরল আেরা https://www.maps.ie/coordinates.html এই ওরেিসাইরে বেরে মচক করর বনরি পাবর, Longitude িা
Latitude (একসারথ িরল Coordinates). অথিা সরাসবর গুেল মেরপ রাইে িােরন। myposition icon এ বলক কররল
মসো েবি না মশা করর িাহরল ওপর মথরক মেই িু ইো লোলু পাইলাে, মসোরক কবপ কবর সাচড কররল পবজশন চরল আসরি।
25.6552912,88.6423475 লারস্ট অনে হাবিজাবি িু ইবিনো বর্বজে। েবিও মিখা োরে এরকিারর বনখুি পবজশন পাবে না।
https://www.gps-coordinates.net/ এ সাচড কররও মসে লোলু পাইবছ।
মপ্রাগ্রারে িু ইো লোলু ই বপ্রন্ট করা োে- মলবেবেউেো আরে বপ্রন্ট কররি হরি, গুেরলও আরে latitude পরর longitude
মিখাে। এখারন আেরা একো মপ্রারজরক্ট কাজো কবর, প্রথরে থাকরি পুররা একো ওোল্ড েোরপর Iframe. এরপর িােরন
বলক কররল মহর্ার ফাইরল মিবখরে বিরি Latitute ও Longitude. একইসারথ বনরচ world-map োে লোলু িু ইো পাস
হরে িিডোন মলারকশরনর েোপ চরল আসরি। মপ্রাগ্রােবে িার css বর্জাইন সহ মিওো হরলাঃ
<style>
button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 25px 44px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 22px;
margin: 4px 2px;
cursor: pointer;
}
p{
padding: 60px;
text-align: center;
background:cornsilk;
color: white;
font-size: 30px;
}
h1 {
padding: 60px;
text-align: center;
background:cornflowerblue;
17
color: white;
font-size: 30px;
}
</style>
এখন আবস েূ ল মপ্রাগ্রারেঃ
<div style="background-color: cornflowerblue">

<br>
<h1 id="empty" style="text-align: center;">
<button type="button" onclick="getPosition()"><b>Get Location<b></button>
</h1>
<script>
var fh = document.getElementById("empty");
var lat;
var long;
var lin;
function getPosition(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition);
}
}
function showPosition(position){
lat = position.coords.latitude;
long = position.coords.longitude;
fh.innerHTML = "Latitude: "+position.coords.latitude+ " Longitude:
"+position.coords.longitude;
lin = "https://maps.google.com/maps?q="+lat+","+long+"&hl=es;z=14&output=embed";
document.getElementById('pmap').src = lin;
}
</script>
<p>
<iframe id = "pmap" width="700" height="400" frameborder="0"
src = "http://maps.google.com/maps?q&hl=es;z=14&output=embed">
18
</iframe>
</p>
</div>
HTML-Drag-Drop
একো বসম্পল পোরাগ্রাফ HTML এ মশা কররল মসোর ওপর োউস রাখরল কাসডরো মচঞ্জ হরে, োরি কবপ মপস্ট করা োে,
বসরলক্ট করর। বকন্তু <p draggable = “true” করর বিরল মসোে আর মেবশবফক মকান বলখা বসরলক্ট করা োরি না আরের
েরিা। মেরন িররল মিখা োরি, েুল কররিরছ, কাসডররর সারথ সারথ বকন্তু মকাথাও ড্রপ কররল আর কবপ হরে না। আিার
ctrl+A বিরলও বসরলক্ট হরে না।
Practice Files Online
✔ Prac-HTML-01
✔ Prac-HTML-02
✔ Prac-HTML-03
✔ Extension
✔ Get-Coordinates-with-Map
Click Here to Get the files.
19
CSS-Cascading Style Sheets
CSS Basics
বিনলারি css এর্ করা োেঃ ১। inline css, েোরের েরিে। ২) Internal css, হোর্ েোরের েরিে। ৩) external css
আলািা ফাইরল বর্ফাইন করর মসো বলংক বহরসরি এর্ করর।
CSS Syntax
আলািা িু ইো css file create কবর বলন্ন বলন্ন নারে। িারপর, িু ইো css ফাইলরকই একো HTML ফাইরল কারনক্ট কবর।
িাহরল িু ইো ফাইলই আলািা আলািালারি কাজ কররি। মেেন এখারন এর্ করা হইরছঃ প্রথরে, style.css িারপর main.css
িাহরল style.css এ p এর font-size করলাে 24px. আর main.css এ করলাে text-align: middle িাহরল িু ইোই
এোই হরি। বকন্তু িু ইো ফাইরলই মসে অপাররশন বলন্ন বলন্ন লারি চালারল, লারস্ট মেো এর্ করা হইরছ, main.css এ মেো
থাকরি, এো বিরে ওইো ওলাররাইে হরি, অথডাৎ এোর এবট্রবিউে ই কাজ কররি। মেেনঃ
<h1>Welcome to Lorem</h1>
এখারন িোকগ্রাউন্ড কালার মসে কররিা। মসজনে, style.css এ বলখলােঃ
h1,h2{
background-color: darkcyan;
আিার মসেলারি main.css এ বলখলােঃ
h1,h2{
background-color: cornflowerblue;
িাহরল লারস্টরো প্রথেোরক ওলাররাইে কররি। কারণ main.css সিার পরর েু ক্ত করা হরেরছ। বকন্তু েবি style.css এ
background-color: darkcyan!important; -এলারি বলবখ িাহরল এো আর ওলাররাই করা োরি না। অথডাৎ এই
এবট্রবিউেোই এোই কররি।
☛ এখন িবর্েোে বনরে কাজ কবর। css ফাইরল বর্ররক্ট িবর্ েোরের িোকগ্রাউন্ড কালার মচঞ্জ করর বিই। এখারন, িবর্েোরের
বলির ো বলখরিা সরাসবর িা মিখারি মপরজ। সিসেে p িা h িা div এগুলা বলখরিই হরি এেন মকান কথা মনই। এখারন
মিখা োরে, িবর্ েোরে িোকগ্রাউন্ড কালার ইউজ কররল িাই বর্ফি আিার েোরের িোকগ্রাউন্ড কালারও মসই কালার হরে
োে। এখন p েোরের background কালার মচঞ্জ কররল আলািালারি উরেখ কররি হরি।
body{
20
/* background:url("/img/pexels-designecologist-1779487.jpg"); */
/* background-color: cornflowerblue; */ }
এলারি ইরেজ অথিা কালার উরেখ করর মিওো মেরি পারর। িবর্ েোরের বলিরর এছাড়াও ির্ডার বিরে বিরি পাবরঃ border:
solid black 2px;
িাহরল css ফাইরল প্রথরে থারক selector অথডাৎ মেই েোরের বলির মচঞ্জ হরি, িা মেই আইবর্ এর বলির। এর বলিরর ো
আরছ সিরক মস বসরলক্ট করর এরবলির পবরিিডন আনরি। এরপর মসরকন্ড োরকরের বলির প্রথরে property মকালন বিরে
value এিং মসবেরকালন।
Selector{
Property: value; }
CSS Selector
Class এর োিেরে মচঞ্জ কররি মেরল ( class = “kichuekta” ) বলরখ css ফাইরল র্ে লাবেরে লাসোরক বর্ফাইন কররল
এর োিেরে, বলন্ন বলন্ন েোে p, h1, h3 etc. একসারথ মচঞ্জ কররি পাররিা।
িাহরল বসরলক্টর পাইলাে বিনপ্রকাররর।
[1] েোরের জরনে এলারি body { } , p { } etc.

[2] id এর জনে এলারি হোশ লাবেরেঃ #someid { }
[3] িারপর class এর জনে এলারি র্ে লাবেরেঃ .someclass{ } –এলারি বিবলন্ন বসরলক্টর িেিহার কররি পাররিা।
✔ মশষরেষ এলারি গ্রুপ আকাররও মচঞ্জ করা োরিঃ [4] h1, h2, p { }
Add CSS
getbootstrap.com এ ঢুরক মসখান মথরক একো css কারনক্ট করার বলংক পারিা এরকে। এো োইরেরলর পর েু ক্ত কররল
অনলাইন মথরক একো css বর্জাইন এোই করা হরে মেরলা।
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"

integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
crossorigin="anonymous">
আিার োউজার মথরক ইন্সরপক্ট করার োিেরে মকান ওরেিসাইরের বর্জাইন, css ফাইরলর মকার্ সি মিরখ বনরি পাররিা,
মেো খুি কারজর পরিবিডরি ইনস্ট্রাকশন পাওোর জনে।
Add Comments
Html comments:

CSS comments:
21
/* this is a css comment */
Js comments:
// this is a commentJs comments:
CSS Background
লারলা ইরেজ বসরলক্ট করর বনরিা িোকগ্রাউরন্ডর জনে। বলংকঃ pexels.com । এরপর িবর্ েোরের বলিরঃ
background: url (“/link”)
িাহরল ইরেজো অরনক িড় হওোে, পুররাো আসরছ না আর বরবপে হরে। এখারন link এর জােোে, প্রথরে / বিরল, িাহরল
ফাইল িা মফাল্ডার সারজস্ট আসরি। সাইজ বিক করার জরনে,
background-size: 1366px 768px;
িাহরল সাইজ বিক হরেরছ, বকন্তু ইরেজো বরবপে হরে। এজরনে,
background-repeat: no-repeat;
অথিা x-axis িরাির িা y-axis িরাির বরবপে মিওো োরি। েবিও ইরেজো মরেনবসলরনস না। মসরেরে এেন ইরেজ
বনরিা মেো মছাে বিরনর মেরে মকরে মেরল সেসো মনই। অথিা, মরসপবন্সল করর বনরিা।
✖ এলারি িোকগ্রাউন্ড ইোেরিা মসে করা মেরলও, মসোর অপাবসবে কোরনা োরে না। মেো অকােডকর। কারণ মপছরনর
ইরেরজর অপাবসবে মিবশ থাকরল িাহরল আর করন্টন্ডই বলবজিল হরি না।
মসরেরে div লারস img েোে বনরে এরপর img েোরের অপাবসবে কবেরে কাজবে করা মেরি পারর। মসজরনেঃ
<div>
<img class="img" src="img/Green.jpg" alt="">
<div class="contant">
</div>
এরপর .img আর .contant িু বে লাসরক এলারি বর্ফাইন কররল িোকগ্রাউন্ড ইরেরজর অপাবসবে করলাল করা োরি, করন্টন্ড
ইবলরেরন্টর অপাবসবে না কবেরে।
.img {
position: fixed;
left: 0;
top: 0;
width: 100%;
22
height: auto;
opacity: 0.8;
}
.contant {
position: relative;
}
সেসো হরে, এখারন width 100% মিওোর জরনে োউজার মছাে কররল ইরেজ অরিডক হরে োরি, সাইজ না বেলার জরনে।
মসজরনে width: 1366px এলারি বিরে, পরর মছাে োউজাররর মেরে বেবর্ো কুরেবর কররি মেরে আিার হাইে মেনশন করর
বিরে বকছু ো মরেবন্সলরনস এর ইরফক্ট করা োে, েবিও পারফডক্ট মস্কবলং করা পবসিল না পারসডরন্টরজ উরেখ করা ছাড়া।
মসরেরে মকানলারি বক ১০০% এর মিবশ পারসডরন্টজ ইউজ করা োরি? ইরেরজর মেরে, োরি জুে আউে হরে মেরলও ছবিো
পুররাো বিনজুরড় থারক, জুের্ ইন অিস্থাে।
Inline Border
সারপাজ h2 মহর্ার এর ির্ডার কররিা। ির্ডার করার জনে, css ফাইরল, h2 { border: 2px solid black;} এলারি কররল,
h2 মেরহিু লক ইবলরেন্ট মোোল লকোরিই ির্ডার চরল আসরি, বকন্তু চাবে, মেখারন বলখা মশষ মসখারন ির্ডারও মশষ হরে
োরি। এজনেঃ display: inline; িাহরল শুিু বলখােুকুই ির্ডার হরি চারপারশ। অথডাৎ লক ইবলরেন্টোরক ইনলাইন ইবলরেন্ট
করর মিওো হইরছ মে কাররণ এেন মরজাি। িরি এরপর পোরাগ্রাফ থাকরল মসো একই লাইরন চরল আসরি। এজনে <br>
ইউজ কররি হরি। এখারন ির্ডারর বিবলন্ন স্টাইলও করা োে, solid না মররখ এো একেু র্রের্ করা োে, সবলর্ এর জােোে
বলখরিাঃ dotted আিার double লাইন করর বিরি পাবর, িাহরল র্রের্ না বলরখ double বলখরিা। অথিা র্োশ বিরে কররিা,
মসজনে বলখরিা, dashed.
CSS Margin
<div> েোে বনলাে, এখারন একো লাস বিরিা, class = “header”. এরবলির একো a েোে বনলাে। আর বলখলাে sazzad
saju. িাহরল মসো মসল কররল এই বলখাো আসরি মসো বলরকিল। এোর কালার একেু মচঞ্জ করর, সাইজ একেু িড় কররিা,
ির্ডার বিরিা। িাহরল css ফাইরল .header { border: 1px solid black; } এরপর ইনলাইন করার জনে design: inline.
িাে ওই বলিররর বলখাোরক মচঞ্জ কররি মেরল আিার কালার িা ফন্ট সাইজ বিক করা োরে না। কারণ ওো আিার এংকর
েোরের বলির আরছ। িাহরল ওোরক মচঞ্জ করার জনেঃ
.header a { color: while; font-size: 24px; }
a েোরে আরে বলখলাে p tag, মসখারন বলখলাে web development by িাহরল মসোরক ইনলাইন কররি মেরলও, এলারি
করা োরি
.header p { display: inline;}
েবিও p েোেরক আলািা বর্ফাইন করা আরছ, বকন্তু এো এই লারসর বলির মিরখ এোরক আলািালারি বর্জাইন করা োরি।
এখারন a েোরের বলিরর
23
text-decoration: none
বিরল আর আন্ডার লাইনবে থাকরি না। এখন োবজডন বিরি চাইরল, p tag বে িাি বিরে বিই, শুিু a েোে মররখ এরি োবজডন
বিলাে margin: 50px, িাহরল র্ারন িারে ৫০ বপরক্সল করর জােো হরি। বকন্তু এো একো ইনলাইন ইবলরেন্ট হওোে ওপর
বনচ মথরক এই োবজডন কাজ করর নাই, িাই বলখরিা। display: inline-block; িাহরল চারবিক মথরক ির্ডার হরি।
P tag থাকরল সেসো হরে, এরচারবিরক োবজডন হওোে, p এর পর েোপ না বিরে মেই a হওোর কথা মসবে হরে না।
এখন ,margin এ িু ইো value বিরি পাবর ,margin: 50px 25px; িাহরল ৫০ হরি ওপরর বনরচ, ২৫ হরি র্ারন িারে।
এখন েবি মিই, margin: 25px 50px 25px; িাহরল, ওপরর বনরচ হরি ২৫ আর িারে র্ারন ৫০। লারস্ট experiment
চালারি চারো লোলু ই একসারথ বিলােঃ
margin: 25px 0px 25px 50px;
িাহরল, এখারন, প্রথে ২৫ ওপর মথরক ২৫ বপরক্সল বনরচ। পরর ০ হরে, র্ারন মকান োবজডন নাই। এরপর ২৫ হরে,
বনরচও ২৫। িারপর ৫০ হরে, র্ান মথরক োবজডন ৫০।
☛ মকার্ঃ
<div class="header">
<p>
Webdevelopment by
</p>
<a href="">Sazzad Saju</a>
</div>
☛ Css design:
.header{
border: 1px solid blueviolet;
display: inline;
}
.header a{
color: burlywood;
}
.header p{
display: inline-block;
color: burlywood;
24
}
☛ Then output:
শুিু োে র্ারন োবজডন িাড়ারি চাইরলঃ margin-right: 50px; ওপরর শুিু .header {এর বলিরর padding: 10px বিরল
আরশ পারশ আররকেু ফাকা ফাকা হরি। } margin এর েরিা padding এও একসারথ সি বপরক্সল িরল মিওো োে মে
আরশপারশ কি হরি।
Height and Width

Div েোরের একো লাস বিলাে. এখন এর একো ির্ডার বিরে, weidth: 414px এলারি কররল মিখা োরি এই লক ইবলরেন্টো
সিেুকু জােো বনরে না। এরেরে আেরা weidth োই মিবশ িেিহার কররিা, hight ো ইউজ করার িরকার মনই। এখারন
বপরক্সল িরল না বিরে 50% এলারিও িলা মেরি পারর। বকন্তু div েোে মিা লক ইবলরেন্ট। এোরক ইনলাইন করার োিেরে
একই সাবররি মিশ কিগুরলা div লকরক পাশাপাবশ সাজারনা োে।
Box Model
এো হরে একো মল আউে বর্জাইন কনরসপ্ট। েখন একো করন্টরন্ডর চারপারশ একো ির্ডার এোই কবর, িখন করন্টন্ড
মথরক এর িূ রত্বরক িরল পোবর্ং। আিার এরপারশ েখন োবজডন এোই কবর, িখন ির্ডার মথরক েিেুক িূ রুত্ব এরক িরল
োবজডন। মিা এই হরলা িক্স েরর্ল করন্সপ্ট। এখন, div েরর্ল বনরে েখন কাজ কররিা িখন বচন্তা কররিা এো একো িরক্সর
েরিা। এরি বিবলন্ন করন্টন্ড রাখরিা। অরনকগুরলা div েোে আলািালারি বনরে এরি বিবলন্ন বজবনসপে মররখ কাজ কররিা।
25
CSS Outline
ির্ডার ইউজ করার পর এরচারপারশ োবজডন বিরে িারপর আিার এরিাইরর আউেলাইন মিওো োে ির্ডাররর চারবিরক। োরন
র্ািল ির্ডার করা োরে। outline: 20px solid rebeccapurple; োবজডনো ির্ডারর এোই হে। আউেলাইরন এোই হে না।
এজরনে আউেলাইন বিরল োবজডন িাবড়রে কবেরে বিক জােোে বনরে আসা লারে।
CSS Text
☛ মকান একো মেক্সেরক েবি একেু ইরন্টন্ড কররি চাই, (প্রথে লাইন একো েোি বিরে শুরু হরি), িাহরল
text-indent: 15px;
েবি myclass নারের মকান লারসর বলিরর p েোরের মেক্সে ইরন্টন্ড কররি হে িাহরলঃ .myclass p { text-indent:
15px; } .
☛ এখন text-align করর মেক্সেরক বের্রল িা মেরকান সাইরর্ রাখা োে। আিার েবি চাই মেক্সোরক স্কোর আকারর বলখরিা
িাহরলঃ text-align: justify;
☛ এরপর text-decoration: underline; এরকে করর মেক্সে এর বনরচ আন্ডার লাইন িা অনোনে অপশন মথরক র্ে র্ে
িা এরকে বর্জাইন করা োে।
☛ এরপর line-height: 35 cm; িরল বিরল এক লাইন মথরক আররকো লাইরনর মিশ অরনকো িূ রত্ব হরি। েি লাইন
মেস লারে এলারি করা োরি।
☛ এছাড়া letter-spacing: 2px; বিরল শরব্দর েরিে িু ইো মলোররর েরিেও ফাকা থাকরি ২ বপরক্সল।
☛ a Tag এর বলির মেক্সে শোরর্া বররেে করা োে। (রেরকান েোরেই করা োে আেরা a Tag এ কররিা)। মসজরনেঃ
text-shadow: 4px 4px blue;
CSS Font
font-family: monospace;
26
িাহরল প্ররিেকো ফরন্টর জনে মসে জােো বনরি। এো একিররণর ফন্ট। San-Sarif এো আররক িররণর ফন্ট, শুিু sarif
এো আররকো ফন্ট। এখারন L এর মশরষ একেু োন আরছ, ইিোবি পাথডকে আরছ ফরন্ট।
☛ আিার চাইরল গুেল ফন্ট ইউজ কররি পাররিা। এজরনে fonts.google.com মথরক মেো পছন্দ হে মসোে বলক করর,
select this style এ মেরে, Embed এ মেরে মেই বলংকো আরছ, মসো কবপ করর head েোরের বলির রাখলাে। আর
বনরচঃ font-family: ‘Lobster’, cursive; মেই কোন্ড মিো আরছ মসো উরেখ করর মচঞ্জ কররি পাবর। এখারন ‘Lobster’
হরে একো ফন্ট, এরপর cursive হরে আররকো। এো ফরন্টর মস্টক। োরন একো না মপরল আররকো মলার্ বনরি।
CSS Icon
https://cdn.fontawesome.com/ মথরক ইরেইল বিরে একো বলংক পাওো োে, মসো ইউজ কররি পাবর িা w3school
মথরক CSS Icon মথরক একো বলংক অলররবর্ বিরে বিরেরছ, মসো ইউজ কররি পাবর। আবে মপরেবছ এরকে একো বলংক
মসো হোরর্ ইউজ কবরঃ
<script src="https://use.fontawesome.com/68743027bf.js"></script>
মিন, ফন্ট অসারের আইকন গুলা চুেজ কররি োই )fontawesome.com/icons)। মেো পছন্দ হে মসো কবপ করর, এরপর
মকারর্ এরস মেখারন মিখারি চাই আইকনো মসখারন, <i> </i> েোে বনরে, class = “fas fa-” । এখারন র্োরশর পরর মেই
নােো কবপ কররবছলাে মসো মপস্ট কররি হরি। অথিা পারশ start using this icon এ বলক কররল কোন্ডো সরাসবর
মিবখরে বিরি।
<i class="fas fa-address-book"></i>
Or,
<i class="fas fa-cloud"></i>
✖ এখারন সেসো মিখা বিরে, মে fas বলখরল একো িক্স মশা করর শুিু , কাজ কররছ না। িরি fas না বলরখ fa fa- এলারি
বলখরল কাজ করর।
িাহরল একো address ও একো cloud আইকন মশা হরে। এলারি মেগুরলা মপ্রালাসডন মিখারে মসগুরলাও ইউজ করা োরি
মকারর্ বলরখ।
CSS Link
একো a েোে বনলাে। href = “#” বিলাে িাহরল আর বলক কররল মকান কাজ কররি না, মপজ মলার্ বনরি না, আর বলখলাে,
click here to read more… এিং id = “innerlink” বিলাে। border এোই করলাে। মিখা োরে এো লক ইবলরেন্ট
না। িাহরল, #innerlink{ display: block; } বলখরল মসো লক ইবলরেন্ট হরে োরি। width = 200px বিরল এখন বলখাো
মছাে হরে োরি, মছাে লক। এখন েবি বলবখ margin: auto িাহরল বলখাো োরঝ চরল আসরি। এখন background color,
color এিং, padding বিরে বিরল এোরক একো িােরনর েরিা মিখরি লােরি।
<a id="innerlink" href="#">Click Here to read more...</a>
27
css:
#innerlink {
display: block;
width: 200px;
margin: auto;
background-color: teal;
color: white;
padding: 15px;
border-radius: 8px 8px;
font-size: 18px;
text-align: center;
}
এরপর, #innerlink:hover { } এর বলিরর কালার, িোকগ্রাউন্ড কালার মচঞ্জ কররিা। িাহরল োউস এবরোর বলিরর আসরল
মসো কালার মচঞ্জ হরে এই নিুন কালারর বররেস হরি।
#innerlink:hover {
background-color: cadetblue;
color: black; }
✔ hover এর ওপরর innerlink:visited{ } ও পরর innerlink:checked{ } এলারি css করর পাথডকে করা োে মকান
বলংক বক বলবজরের্ হরেরছ নাবক হেবন।
✖ visited, checked এই কাজগুরলা কররি পাবর নাই, visited বিরে বকছু বিরল প্ররিেকিার মসোই রান হরে।
CSS List
<ol< বলরখ অর্ডার বলস্ট শুরু কররল এরবলির, li*5 বিরল একসারথ পাচো বলস্ট তিরী হরি। একইসারথ ৫ ো লাইরন বলখরি
চাইরল, alt মচরপ বসরলক্ট করর বলখা োরি। এলারি অিার মচরপ মেরকান জােোে বলখা োরি একসারথ।
এখারন div এর বনরচ আরছ ol, এো div এর চাইল্ড, ol এর বনরচ আরছ li, এো ol এর চাইল্ড। আর সিগুলা li এরক
অপররর বসিবলং। এখন li মক েবর্ফাই কররি িথা, li এর কালার ইিোবি মচঞ্জ কররি িাহরল বলখরিা এলারি।
.listclass ol li { }
এখারন .listclass হরলা লারসর নাে মেো div েোরের বলির বলখা হরেরছ। এরপর শুিু .listclass { } এর বলিরর, width:
30%; এিং, margin: auto; িাহরল, এো অরনকো বের্রল চরল আসরি।
28
✖ পুররাপুবর বের্ল না।
☛ শুিু margin: auto; বিরে োঝখারন আসরছ না। width উরেখ করর বিরল আসরিরছ। আিার মিবশ কে হরে মেরল বলখা
িু ইলাইরন হরে োরি, মছাে মছাে লাইনগুলা। আিার এখারন, background-color: lightskyblue; িারপর, padding:
10px; ইিোবি কেন মসে বহরসরি বিরল মসো পুররা বলস্টোর ওপরর এোই হরি। এরপর margin-top: 20px; বিরল ওপর
মথরক মিবশখাবনকো বনরচ শুরু হরি।
☛ এখন চাইরল ওলারঅল সিোর িোকগ্রাউরন্ডর কালার মচঞ্জ না করর শুিু , .listclass ol li { } এর বলিরর িোকগ্রাউন্ড
কালার মচঞ্জ কররল শুিু বলখাগুলার জনে িোকগ্রাউন্ড আলািা হরি। আর ol এই লারস মেরহিু নাম্বাবরং িাই, নাম্বারগুরলা ওই
িোকগ্রাউন্ড কালাররর িাইরর।
<div class="listclass">
<ol>
<li>Line_Together</li>
</ol>
</div>
Css style here:
.listclass {
width: 30%;
margin: auto;
background-color: lightskyblue;
padding: 10px;
margin-top: 20px;
}
.listclass ol li {
background-color: rgb(174, 220, 248);
}
Output:
29
CSS Table
.mytable বলরখ এন্টার মপ্রস কররল div েোরের বলির mytalbe class create হরে োরি।
<div class= “mytable”>
এই div েোরের বলিরর আররকো div েোে বনলাে, মসোর লাস বিলােঃ tableContainer.
এখন বসএসএস ফাইরল .mytalbe এরক বর্জাইন কররিা। mytable এ padding: 200px; background-color:
lightgray; বিরল, িরক্সর েরিা ২০০ বপরক্সরলর একো জােো মশা হরি এই িোকগ্রাউন্ড কালাররর। ওপররর বলখা মথরক
আররকেু বনরচ নাোরি োবজডন বিরিাঃ margin-top: 50px;
এিার, ২ে লারসঃ .tableContainer এ width:50% বিলাে। োরি বলখাো োরঝ থারক। margin: auto; background-
color: mediumslateblue; এখনও বকছু ই মশা কররছ না। কারণ, এর মকান উইর্থ িা হাইর্থ মিওো হেবন। অিশে েোরের
বলির করন্টন্ড থাকরল মপ্রাপাবেড পারি। এখন মশা করারি পোবর্ং বিলাে padding: 50px;
এখন ২ে div েোরের বলিরর মেবিল বররেে কররিা। এর বলিরর মরা বররেে কররিা। tr*4 বিরে এন্টার মপ্রস করর, এরপর
চারো মেবিল মহর্ার বররেে কররিা। . alt মপ্রস করর, একসারথ চারো নাে মচঞ্জ কররি পাররিা। এখন মেবিল মর্ো এন্টার
nd
করার জনেঃ 2 <tr> এর বলিরর, td*4 বলরখ একসারথ চারো মর্ো ইনসােড করার লাইন চরল আসরি।
এখন এই মেবিলো আরছ একো লারসর বলিরর। এজনে ওই লারসর নাে বলরখ এরপর মেবিল বলরখ বিরল ওই লারসর বলিরর
মেই মেবিল আরছ মসো বর্জাইন করা োরি।
.tableContainer table{
border: 2px solid black; }
এখন মসরলর চারপারশ ির্ডার বিরি চাইরল আিার ওই মেবিরলর বলিরর মেই td িা th আরছ মসোরক মেবশফাই করর বলখরি
হরি এলারিঃ
.tableContainer table td,th{

border: 2px solid black; }
িরি লারলা হে, এলারি একসারথ মেবিল মহর্ার আর মেবিল র্াোর স্টাইল বর্ফাইন না করর আলািা করর িু ইোর কররি,
িাহরল মহর্াররর কালার আলািা আলািা করর মিওো োরি, আর এখন কররি মেরল একসারথ মচঞ্জ হরি িু ইোই। আলািা
কররি শুিু এোর েরিে একো মচঞ্জ হরি th অথিা td িাি ( .tableContainer table td{ } )
30
এখন ির্ডার কলাপস করর বিরল র্ািল ির্ডার মকরে োরি। border-collapse: collapse; িাে এো th িা td { } এসরির
বলিরর বলখরল হরি না। বলখরি হরি .tableContainer table { } এর বলিরর।
এখন th এর বর্জাইন কররিা, padding: 15px; background-color: green; color: white; একইলারি, td এর বলিরর
padding:15px, background-color: white; বিরল একো বর্জাইনইর্ মেবিল বররেে হরলা।
CSS Display
Display মপ্রাপাবেডর োিেরে মকান ইনলাইন ইবলরেন্টরক লক ইবলরেরন্ট আর লক ইবলরেন্টরক ইনলাইন ইবলরেরন্ট রূপান্তর
করা োে মেো ইরিােরিে মিরখবছ। একো div েোে বনরে এর লাস বিলাে mydisplay এরপর বসএসএস এ, এর ির্ডার িা
িোকগ্রাউন্ড কালার বিরে, padding বিলাে ১৫ বপরক্সল োরি মসো মিখা োে। এখন মসল কররল মিখরি পাররিা এো হরলা
লক ইবলরেন্ট, পুররা একো জােো বনরেরছ, এখন েবি িরল বিই, display: inline; িাহরল এো মছাে হরে ইনলাইন হরে
োরি। েিেুকু জােোে জুরড় করন্টন্ড থাকরি িিেুকু জােো বনরি। এলারি display: block; বলখরল মসো লক ইবলরেন্ট
বহরসরি কাজ কররি।
☛ একইলারি, েবি display: none; মিো হে িাহরল মসো পুররাপুবর নাই হরে োরি। আিার এো না করর েবি বলবখঃ
visibility: hidden; িাহরল মসো হাইর্ হরে োরি। বকন্তু জােোো ফাকা মিখারি।
CSS Position
মকান একো ইবলরেরন্ট েখন position এবট্রবিউে এোই কররি োরিা, মসরেরে চারিররণর পবজশন ররেরছ। static
position, মসো হরে িাই বর্ফি। এো িারি, relative position/ fixed position োউজার মছাে িড় কররলও ওইখারনই
থাকরি, absolute position, মসো মপরররন্টর সারপরে পবজশন িসাে। sticky position আর top:0 করর বিরল েরপ
মলরে থারক।
এখন sticky করার জনে, একো div েোে বনরে, মপবর্ং আর িোকগ্রাউন্ড কালার বিরে এরপর position: sticky; আর top:
0; করর বিলাে। আর div tag ো এরকিারর ওপরর রাখার মচষ্টা কররিা, িাহরল িল কররল মসো মনবলরেশন িাররর েরিা,
বস্টক হরে থাকরি। এরেরে িু ইো কোন্ডই জরুরী।
31
CSS Float
☛ মকান একো ইবলরেন্টরক বকলারি মলফে িা রাইরে সরারি পাবর এজরনে আেরা ইউজ কবর float.
একো div এর class = “float” বনলাে। এর বলিরর, একো p েোে বনরে, বকছু বলরখ বপ েোরের বলিররই একো <img>
েোে বনলাে। এরপর <img এর একো আইবর্ id = “myimg” বিলাে। োরি ওই ইরেজোরক ওই েোরের বলির float
করারি পাবর। একই সারথ বলিরর style = “width: 100px; height: 100px; বিলাে। িাহরল বকছু আবেডরকরলর মশরষ
একো ইরেজ েু ক্ত হরলা, এিার ওই লারসর বর্জাইন কবর এলারিঃ border আর background-color বিরে। এখন মিখারি,
ইরেজো ির্ডাররর িাইরর চরল োরে, এরক বলিরর আনার জনে float লারস overflow: auto; এরপর চাইরল ইরেজো
মলাবেং করর িারে আনরি চাইরলঃ #myimg এইলারি আইবর্র জরনে বর্জাইন কররি বেরে বলিরর বলখরিা float: left;
িাহরল ইরেজো িারে চরল আসরি।
✔ এখারন মিখলাে, বকলারি float ইউজ কররি পাবর। এলারি একো ফেডরক িারে না মররখ র্ারন বনরে আসা োে। মেো
মিশ কারজর।
✔ মিখলাে, ইরেজো িাইরর চরল োওোর পররও বকলারি এরক ওলাররলা করর বলিরর বনরে আসা মেরলা।
✖ সেসো হরে, কারজর কাজ বকছু হেবন, এো লারলা বর্জাইন না। ইরেজো বপ েোরের বলিরর থাকাে, লাস্ট লাইন ইরেজ
িরাির আসরিরছ।
িাই ইরেজো বপ েোরের িাইরর এরন paste করলাে। এিার float িা overflow এইসিবকছু িাি বিরে বনরচর েরিা কররা
css কররল একো মোোেুবে লারলা আউেলু বকং বররেে হেঃ
.float {
border: 20px solid lightskyblue;
background-color: cornflowerblue;
width: 428px;
height: auto;
margin: auto; }
.float p {
text-align: justify;
padding: 20px;
padding-bottom: 0; }
#myimg {
margin-left: 40%;
margin-bottom: 20px;
padding: 20; }
output:
32
CSS Alignment
মকান একো ইবলরেন্ট মেেন আরের .float এর width: 42%; [or as necessary: in pixel: 428px;] then margin:
auto; করর বিরল মসো বের্রল চরল আসরি। আর মেক্সে বের্রল আনরি মেরল text-alignment: center; করর বিরলই
হে।
✔ এই হরে মেক্সে এলাইনরেন্ট আর ইবলরেন্ট এলাইনরেন্ট।
Combinators
আরের মেবিলোে সারপাজ মহর্াররর িেকগ্রাউন্ড কালার মচঞ্জ কররি চাবেঃ এখন মেবিলো আরছ div েোরের mytable
লারসর বলিরর, এরবলিরর আররকো div েোে, িারপর, table েোে, িারপর tr েোে, এরপর th। এজেরন সিগুরলা এরন্সন্টর
এর নাে খুরজ মির করর িারপর মচঞ্জ করা োরিঃ
.mytable div table tr th{

background-color: darkkhaki;
}
Opacity
Opacity 0.0 মথরক 1 পেডন্ত হরে থারক। সারপাজ .stick লারসর opacity: 0.8 করর বিলাে। িাহরল মসো মিশ ট্রাসপাররন্ট
হরে মেরলা।
আিার mytable এর মেরে েবি এই opacity ইউজ কবর িাহরল মসো িোকগ্রাউন্ড কালার সহ বলিররর বলখা
ইবলরেন্টগুরলারকও লার করর বিরে। এজরনে, িোকগ্রাউন্ড কালার বসরলক্ট করার সেে মসখারন অপাবসবের অপশনও চরল আরস,
33
মসখান মথরক অপাবসবে বিক কররল মসো শুিু িোকগ্রাউন্ড কালাররর মেরে এোই হরি। red, green, blue, opacity এই
চাররে লোলু র োিেরে বনিডারণ হে।
আিার hover এর োিেরে োরি োউসো মেবিরলর মহর্ারর আসরল অপাবসবে মচঞ্জ মিখাে এজরনেঃ
.mytable div table tr th:hover{ opacity: .60;}
RWD Grid
Grid ইউজ করর মরসপন্সবসল ওরেলসাইে করার জরনে, একো grid.html ফাইল খুবল, এখারন ইন্টারনাল CSS ইউজ কররিা।
োইরেল বিলাে RWD (Responsive Website design). div.header বলখরল একো div েোরের বলির header লাস
বররেে হরে োরি (এরকেলারি, h1.header বলরখ এন্টার বিরল h1 েোরের জনে header class বররেে হরি দ্রুি বলখরি
সু বিিা হরি।) এখন এরপর div.left এরপর, div.main এরকে বিনো েোে বনলাে (প্ররিেকো আলািা, পরপর)। এখন
title েোরের বনরচ, style েোে বনরে বনলাে বর্জাইন এর জনে।
Header েোরের বলির, একো মহবর্ং h1 বনরে বনলাে। এরপর left লারস, lorem50 এরপর main লারস lorem100
ওোর্ড বনরে বনলাে।
এখন প্ররিেকো েোরের ির্ডার বিরে বিলাে, োরি মসোরক আইরর্বন্টফাই করা োে। style এর বলিরর। অথিা সিগুরলার
জরনে প্ররোজে এেন বকছু রক একিারর এোই কররি *{ } এর বলিরর বলখরিা।
✖ বকন্তু এরেরে র্ািল ির্ডার হরে োরে, border-collapse কররলও কাজ হরে না। িাহরল,
.header, .left, .main { }
এলারি একসারথ বিনলারসর ির্ডার একিারর বিরে বিরি পাবর... এখন চাবে left মসকশনো িারে ৩০% জােোে আর main
মসকশনো র্ারন থাকরি িাবক ৭০% জােোে। িার আরে *{ } এর বলিরর (অথিা .header, .left, .main{ } এর বলিরর)
box-sizing: border-box;
এো বলরখ বিরিা। িাহরল োবজডন, পোবর্ং ইিোবি ওই ির্ডাররর/width এর েরিেই করর বনরি, জােো কে মিবশ মকাথাও
মিরড় বেরে প্রিরলে কররি না। এখন left এর float: left; আর main এর float: right; করর বিলাে। মিন, left এর
width: 30%; আর main এর width: 70% করর বিই।
রান কররল মিখরি একেু অসু ন্দর লােরছ, পোবর্ং না থাকার কাররন, সিগুরলারি padding:10px; করর বিলাে। হরে মেরলা
একো মরসপবন্সল ওরেিসাইে। এখন মছাে িড় কররলও ওই ৩০, ৭০ এই সাইজ িজাে থাকরি ওরেিসাইরের।
RWD Media Quarry

এর োিেরে বিরনর সাইরজর শিডারূপ করর বর্জাইন মচঞ্জ কররি পাবর, মেেন মোিাইল োউজাররর মেরে মকেন মিখারি
আর বপবস ইউজাররির মেরে মকেন মিখারি। Grid এই ওরেিসাইরে এখন style tag এর সিার বনরচ বলখরিাঃ
34
@media only screen and (max-width: 600px){ }
িাহরল ৬০০ বপরক্সরলর বনরচ হরল এই মচঞ্জেুকু কররি। এর বলিরর বিলােঃ body{ background-color: black; color:
white } এখন োউজারোরক মছাে কররল িোকগ্রাউন্ড কালার লোক হরে োরি, আর ফন্ট কালার সািা হরে োরি, আিারওোইজ
মকান মচঞ্জ হরি না। মফারনর মেরে আলািা বলউ তিরী করা মেরলা।
☛ এখারন max-width এর িিরল min-width বলখরল কাজো উলরো হরি। অথডাৎ েখন width ৬০০ বপরক্সরলর মিবশ
হরি িখন মসো এোই হরি।
☛ এখারন মিবখ বকলারি িোকগ্রাউরন্ড ইরেজ মরসপনবসল করর িানারনা োেঃ বকছু ো মরসপনবসল করা মেরছ এলারি, েবিও
এো একচুেোল মরসপনবসলরনস না। প্রথেরিা, নরোবল িোকগ্রাউন্ড ইরেজ এর্ করা হইরছ, সাইজ িরল মিওো হইরছ বপরক্সরল.
বরবপে িাি মিওো হইরছ, আর এোচরেন্ট বফক্সর্।
body{
background-image: url(/img/pexels-designecologist-1779487.jpg);
background-size: 1366px 768px;
background-repeat: no-repeat;
background-attachment:fixed;
}
এরপর, media only screen and (max-width: 600px) { } এর বলিরর, আিার ইরেজেু ক্ত করা হইরছ, এরেরে, ওই
৬০০ বপক্সরল েি বপরক্সল িাই বপরক্সল ছবিো মশা কররল লারলা মিখাে, মসলারি সাইজ বিরে মিওো হইরছ। এখন মছাে
অিস্থাে, ৬০০ বপরক্সরলর করে মেরল ওই সাইজো পাওো োরি, মেখারন পুররা ইরেজো আরছ, এো অরনকো মরসপনবসল
েরন হে। বকন্তু বরসাইজ কররি মেরল িুঝা োে, আসরল মছাে িড় করার সারথ সারথ বররেল োইে মচঞ্জ আসরছ না।
✖ এখারন, background-size: contain; এলারি বিরে background-repeat: no-repeat; করর মরসপনবসল করা োরে
না। এরেরে, ছবি একেু জােোে আরস, আর িাবক জােোে আরস না। করলাল নাই োরি ছবিো বিরেই পুররা িোকগ্রাউন্ড
সাজারনা োরি এেন। মসরেরে ওপররর পদ্ধবিই সবলউশন।
✖ পাশাপাবশ background image এর অপাবসবে কোরিও প্রিরলে বররেে হরে। মেরহিু ছবিবে িবর্ েোরের বলিরর
এোই হরেরছ, িাই অপাবসবে কবেরে বিরল অনোনে করন্টরন্ডর অপাবসবেও করে োরে।
CSS Practice Files Online
Prac-CSS-01 Prac-CSS-02 Prac-CSS-03
Click Here To Get the Files
35

A Handnote On The Fundamentals of HTML and CSS

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

A Handnote On The Fundamentals of HTML and CSS

Uploaded by

Copyright:

Available Formats

Contents

Chapter 0: Welcome to the Course

Chapter 1: HTML5-HyperText Markup Language

1.1 HTML Basics

HTML-Basic CSS Practice Files Online (Click Here)

Chapter 1: CSS- Cascading Style sheets

2.1 CSS Basics

CSS Practice Files Online (Click Here)

☛ Bootstrap হরে CSS এর একো লাইরেরী।

body মি একাবিক মহর্ার থাকরি পারর মেেনঃ

<p> This is a paragraph </p>

HTML ইবলরেন্ট মনরস্টর্ হরি পারর। মেেন মিাল্ডঃ

<p><b>this is bold</b> This is a paragraph </p>

<p style= “color: red;>

♪♫ আোর মসানার িাংলা

আবে মিাোে লারলািাবস... ♬♫

<h1 style="text-align: center;">Heading One</h1>

<h1 style="text-align: center; background: cyan;"> Header One</h1>

☛ বিবলন্ন ফন্ট ফোবেবল ইউজ করাঃ

<h1 style="font-family:'Courier New', Courier, monospace;">Header One</h1>

<p style="font-size: 24px;">

(a+b)<sup>2</sup> = a<sup>2</sup> + 2ab + b<sup>2</sup>

এখারন সািবরপ্ট করা হরেরছ ফরল, H2O এলারি মিখারি বনরচ।

☛ Underline কররল হরল এলারিঃ

<u> Here is underline </u>

☛ <del< </del<কররল একো লাইন োঝখান মথরক মকরে োরি।

☛ <i< </i<কররল বলখা হরি। italic

☛ <q< </q<কররল বলখা মকারেশরনর বলির হরি।

<blockquote cite="Wikipedia.com" style="background-color:lightyellow; font-size: 24px;">

<q>From Wikipedia: <abbr title="Hyper-Text Markup Language"><b>HTML</b></abbr> is the

☛ Abbreviation েু ক্ত করা:

<abbr title="Hyper-Text Markup Language"><b>HTML</b></abbr>

☛ Address েু ক্ত করা

<a href="Prac-HTML-1">My Blog</a>

<p>Now Go to the second page, <a href="Prac-HTML-1.html" target="_self">My Blog</a></p>

<img src= "img/Meh2 .jpg" alt="That's Me" style="width: 300px;height: 300px;">

✖ মনে কারনকশন না থাকরল িাই আর ইরেজো মলার্ বনরি পারর না।

<caption>Table.1: Class One Result </caption>

☛ এর সারথ সংেু ক্ত css:

border: 1px solid black;

এর বলির বলস্ট আইরেে রাখার জরনে েোেঃ <li> </li>

✖ Unorder বলরস্ট োইপ মচঞ্জ করা োরে না।

HTML Block and Inline

HTML Id and Class

Then from CSS file:

#idname{ font-size: 24px }

<iframe src="mypage.html" frameborder="0" height="400" width="490"></iframe>

<button type= “button” onclick = “fun()”> Button_name </button>

<script> function myfunction(){ document.getElementById(“idname”).innerHTML = “This is from

HTML Responsive Website

.responsive{ width: 25%; height: auto; }

✖ বকন্তু iframe এর জরনে এই পদ্ধবিরি মরসপবন্সলরনস কাজ কররিরছ না।

<form action="" method="get"></form>

<label for = “ ”>

এরপর input:password বিরল

<input type="password" name="" id="">

☛ এখন আেরা Gender ো ইনপুে বনরিা। radio িােন বিরে।

<label for= “ ”> Gender </label>

এরপর input:radio বিরল মরবর্ও িােন বররেে হরি।

<input type = “radio” name = “ ” id = “ ”>

☛ লারস্ট আেরা একো সািবেে িােন বররেে কররি পাবর।