HTML ও CSS শিখি । সহজ এইচটিএমএল । বাংলা এইচটিএমএল কোর্স
Hypertext Markup Language ( HTML )
Class 01: Introduction to HTML
আজকে আমরা যা যা জানব
- HTML কি?
- HTML এর আবিষ্কার ও কিছু তথ্য
- HTML এর সুবিধা ও অসুবিধাসমূহ কি কি?
- css কি?
HTML কি?
HTML এর পূর্ণরূপ হচ্ছে Hyper Text Markup Language.
- এটি কোন প্রোগ্রামিং ল্যাঙ্গুয়েজ নয়, এটি একটি Markup Language যার সাহায্যে খুব সহজে ওয়েব পেজ তৈরি করা হয়।
- HTML একটি Markup Language, Markup Language কিছু Markup ট্যাগের সমন্বয়ে তৈরি। যার সাহায্যে ওয়েবপেজ এ বিভিন্ন কিছু (text, image,video etc.) প্রদর্শন করা যায়।
HTML এর আবিষ্কারক ও কিছু তথ্য
- ১৯৮৯ সালে Tim Berners-Lee HTML আবিষ্কার করেন।
- বিভিন্ন তথ্য দ্রুত পৃথিবীর এক জায়গা হতে অন্য জায়গায় পৌঁছে দেয়ার উদ্দেশ্য HTML এর উৎপত্তি।
- Tim Berners-Lee: In 1989 Tim Berners-Lee was working to come up with a way for workers at CERN to share documents.
- Tim Berners-Lee সম্পর্কে আরো কিছু তথ্য:
BORN- June 8, 1955, in London.
1976 Graduates from Queen’s College, Oxford.
1980 While at CERN, writes “Enquire”
1989 Proposes global hypertext project called “WorldWideWeb”
1991 The Web debuts on the Internet
1993 University of Illinois releases Mosaic browser
1994 Joins M.I.T. to direct the W3 consortium
1999 Today nearly 150 million people log on to the Internet via www
4:09/4:24:11. Introduction to HTML >
Tim Berners-Lee is considered to be the founder of the World Wide Web. Activate wit
HTML VERSIONS
আমরা যদি কোন ওয়েব ব্রাউজারে গিয়ে History of html লিখে সার্চ করি তাহলে বিস্তারিত জানতে পারবো। আমি এখানে সংক্ষেপে কিছু উল্লেখ করতেছি।
| Version | Year |
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2012 |
| XHTML5 | 2013 |
HTML এর সুবিধা ও অসুবিধাসমূহ কি কি? HTML এর সুবিধাসমূহ-
১. খুব সহজে HTML ভাষা শেখা যায়।
২. এটি বিনামূল্যে ব্যাবহার করা যায়।
৩. প্রায় সকল ব্রাউজার HTML সমর্থন করে।
৪. কেস সেন্সেটিভ নয়। <HTML> <html>
৫. HTML এ তৈরি ওয়েবপেজ লোড করতে কম সময় লাগে।
৬. HTML পেজে খুব সহজে টেক্সট, ইমেজ, অডিও, ভিডিও ইত্যাদি সংযুক্ত করা যায়।
৭. এটি একটি ইউজার ফ্রেন্ডলি ওপেন টেকনোলজি
৮. সর্বব্যাপি ব্যবহার অধিকাংশ ব্রাউজার সাপোর্ট করে
৯. ব্যবহার সহজ এবং সিনটেক্স সহজ তাই html শেখা সহজ
১০. উইন্ডোজের সাথে ডিফল্ট থাকে তাই আলাদাভাবে কিনতে হয় না
১১. যেকোনো টেক্সট ইডিটরে কোড লেখা যায়।
HTML এর অসুবিধাসমূহ
১. কোড লিখতে Syntax মনে রাখতে হয়।
২. এর সাহায্যে dynamic page তৈরি করা যায়না।
dynamic page পেইজ কি?
dynamic page হচ্ছে এমন ধরনের পেইজ যেখানে পেইজের তথ্যগুলো আপডেট হতে থাকে। যেমন: ক্রিকেটের লাইভ স্কর পেইজ-সেখানে স্করগুলো আপডেট হয়। এটাই হলো ডাইনামিক পেইজ। আবার কিছু-কিছু ওয়েব সাইট দেখবেন যে সেখানে তথ্যগুলো আপডেট হয়না স্টেটিক থাকে। যদি কেউ ম্যানুয়ালী আপডেট করে দেয় তাহলে আপডেট হয়। এগুলো হল স্টেটিক পেইজ HTML এর সাহায্যে এই ধরণের স্টেটিক পেইজ তৈরি করা সম্ভব। আপনি ওয়েব ডিজাইনার বা ওয়েব ডেভলোফার যেটাই হোন না কেন? আপনাকে সর্বপ্রথম HTML শিখেতে হবে। আপনি যখন ওয়েব ডিজাইন বা ওয়েব ডেভলোফমেন্ট শিখা শুরু করবেন। তখন আপনি কিছু কমন ওয়ার্ড পাবেন যেমন:
- html : How to structure a webpage. (Basic Structure/ basement)
- CSS : How to style a webpage.
- php : How to make a web page interactive.
- mySQL : How to load and save information from a web page.
css কি?
CSS মানি Cascading Style Sheets (ক্যাসকেডিং স্টাইল শীট) HTML এর সাহায্যে Structure তৈরি করার পর স্টাইল দেওয়ার জন্য বা আকর্ষনীয় করার জন্য CSS ব্যবহার করা হয়। CSS এর মাধ্যমে আমরা html কে সু-সজ্জিত ও সুন্দর্যমন্ডিত করবো।
ঠিক আছে বন্ধুগন আজকে এপর্যন্ত আগামী ক্লাসে আমরা “Tag Atribute শিখবো” ট্যাগ হচ্ছে HTML এর প্রাণ । HTML Document মূলত ট্যাগ এর সমন্বয়ে গঠিত। ট্যাগ কি? ট্যাগ হচ্ছে কিছু কোড, যে কোডগুলো এঙ্গেল ব্র্যাকেটের ভিতরে থাকে। ঐকোডগুলো মনে রাখতে পারলেই আমরা HTML শিখতে পারবো। ইনশা আল্লাহ। আপনি যদি আমার ওয়েব পেইজে নতুন ভিজিট করে থাকেন, তাহলে আশা করি আপনার জি-মেইল দিয়ে সাব্সক্রাইব করে রাখবেন। আর যদি আপনি আমার এই ক্ষুদ্র লেখনির মাধ্যমে আপনার জ্ঞানের ভান্ডারকে সামান্যতম হলেও বিকশিত করতে পারেন, তাহলে আশা করি একটি লাইক ও একটি কমেন্ট করে আপনার গুরুত্বপূর্ণ মতামত দিয়ে যাবেন এবং শেয়ার করবেন। এই আশা ব্যাক্ত করে আজকের জন্য সমাপ্ত করলাম। ভালো থাকেন, সুস্থ থাকেন, আল্লাহ হাফিজ।
কিছু সিম্বল সম্পর্কে অবগত হই।
! 👈 এটাকে এক্সক্লেমেশন সাইন বলে।
< 👈 এটাকে লেফট এঙ্গেল ব্রেকেট বলে ।
> 👈 এটাকে রাইট এঙ্গেল ব্রেকেট বলে।
() 👈 এটাকে প্যারেনথেসেস বলে।
{} 👈 এটাকে কারলিব্রেসেস বলে।
[] 👈 এটাকে স্কয়ার ব্রেকেট বলে।
ট্যাগ এর প্রকার:
ট্যাগ দুই প্রকার (১) ডাবল ট্যাগ (২) সিংগল ট্যাগ।
ট্যাগ এর দুইটি পার্ট (১) অপেনিং বা বিগেনিং পার্ট, (২) এনডিং বা ক্লোজিং পার্ট।
Use of Zen Coding
Zen Coding এমন একটি প্লাগিন বা টুল যার মাধ্যমেে HTML এর কোডগুলোকে খুবদ্রুত লেখা সম্ভব।
যেমন :- দুটি কাস্টম অপারেটর আছে: উপাদান গুণন এবং আইটেম নম্বরিং। আপনি যদি জেনারেট করতে চান, উদাহরণস্বরূপ, পাঁচটি <li> উপাদান, আপনি কেবল li*5 লিখবেন। এটি সমস্ত বংশধর উপাদানগুলির পুনরাবৃত্তি করবে। আপনি যদি চারটি <li> উপাদান চান, প্রতিটিতে একটি <a> সহ, আপনি কেবল li*4>a লিখবেন, যা নিম্নলিখিত আউটপুট তৈরি করবে:
Write html:5 then press ctrl + Enter =
ডকটাইপ ডিকলার
ডকোমেন্ট কি ধরনের তা ব্রাউজার কে বুঝানোর জন্য, ডকটাইপ ডিকলার করতে হয় । যেমন: <!DOCTYPE HTML>
এইচটি এমএল ট্যাগ
HTML ডকোমেন্ট বুঝানোর জন্য এই ট্যাগ <html> </html> টি ব্যবহার হয় , এটা HTML এর মেইন ট্যাগ বা প্যারেন্ট ট্যাগ সবকিছু এইদুই ট্যাগএর ভিতরেই থাকে ।
হ্যাডিং ট্যাগ
হ্যাডিং ট্যাগ ডকোমেন্ট এর হ্যাড অংশ নির্ধারনের জন্য <head> </head> এই ট্যাগ ব্যবহার হয়।
টাইটেল ট্যাগ
ব্রাউজারকে টাইটল বুঝানোর জন্য , যাহা ব্রাউজার এর টাইটল বারে প্রদরশিত হয় এই ট্যাগ ব্যাবহার হয় <title> </title>
বডি ট্যাগ
পেইজের ভিতরে যে বিস্তারিত লেখা দেখতে পাই তাই বডি ট্যাগ এর ভিতরে থাকে এটাকে বডি ট্যাগ বলে। <body> </body>
হ্যাডিং ট্যাগ
হ্যাডিং ট্যাগ বা শিরোনাম ট্যাগ, প্যারাগ্রাফ এর হ্যাডিং অংশ বুঝানোর জন্য <h2> </h2> এরকম ভাবে ছয়টি হ্যাডিং হতে পারে।
কমেন্ট কি? কমেন্ট হচ্ছে মতামত বা অভিমত । ধরুন আপনি html দিয়ে একটি ওয়েব পেইজ তৈরি করেছেন । সেখানে একহাজার লাইন কোড আছে । এই কোড গুলো তো কখনো কখনো অর্থাৎ ২ মাস, ৩ মাস পর ইডিট করার প্রয়োজন হতে পারে, তাই না? তখন খোঁজ করে করে, ইডিক করা খুই কষ্ট হয়ে যাবে । জেনারেলী সাধারনত এক একটা ওয়েব পেইজ কম-আজ কম 500 , 600 লাইনের তো হয় । এত বড় কোড গুলো ইডিট করতে গিয়ে আপনি যদি বুঝতেই না পারেন কোন কোড কোথায় আছে? তাহলে তো কষ্ট সাধ্য হয়ে যাবে । বুঝতে যেন সহজ হয় সে জন্য কোড কে কন্টে করে রাখা । আর এটাই হচ্ছে কোডিং করার স্টেন্ডার নিয়ম । কমেন্টে আমরা যা কিছু লেখবো তা ওয়েব পেইজে শো হবে না । তো চলুন আমরা জেনে আসি কিভাবে HTML এর মধ্যে কমেন্ট করতে হয়? কমেন্ট ট্যাগ <!– এখানে কমেন্ট হবে –> প্যারাগ্রাফ ট্যাগ, <p> </p>
লাইন ট্যাগ
<li>List Item No. 01</li>
<li>List Item No. 02</li>
<li>List Item No. 03</li>
<li>List Item No. 04</li>
<li>List Item No. 05</li>
</ul>
অর্ডার লিস্ট
<ol type=”I”>
<li>List Item No. 01</li>
<li>List Item No. 02</li>
<li>List Item No. 03</li>
<li>List Item No. 04</li>
<li>List Item No. 05</li>
</ol>
এট্রিবিউট
এট্রিবিউট অপেনিং ট্যাগএর মধ্যে হয়,
প্যারাগ্রাফটা
কি সম্পরকে তা বুঝানোর জন্য । title=””
নমুনা <p title=”This is About tc-computer”> এখানে প্যারাগ্রাফ </p>
ইটালিক ট্যাগ <i> </i>
প্যারাগ্রাফ এর ভিতরে কোন বিশেষ অংশকে
ইটালিক করার জন্য <em>
</em> ট্যাগ ব্যবহার হয়। ইটালিক
এর জন্য এই ট্যাগ ভালো বা বেইস্ট।
<span> </span> ট্যাগের ব্যাবহার:
কোন প্যারাগ্রাফের বিশেষ কোন অংশকে বিশেষ কোন স্টাইল দেয়ার জন্য এই ট্যাগটি ব্যবহার করা হয়। যেমন নিচে দেখানো হল।
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, <span> when an unknown printer </span> took a galley of type and scrambled it to make a type specimen book. It has উপরের প্যারাগ্রাফটির কালার কালো সুধু মাত্র বিশেষ একটি অংশ Blue এটাই হলো html এর মধ্যে <span> </span> স্পেন ট্যাগের কাজ।
বোল্ড ট্যাগ
বোল্ড ট্যাগ, কোন লেখাকে বোল্ড করার জন্য <b> </b> অথবা <strong> </strong> এটাই বেইস্ট ।
আন্ডার লাইন
আন্ডার লাইন ট্যাগ <u> </u> তবে সি এস এস দ্বারা আন্ডার লাইন করাই উত্তম
স্ট্রিকথ্রো
স্ট্রিকথ্রো মানি কোন লেখা কাটার জন্য <del> </del> ট্যাগ ব্যবহার হয়।
কোন লেখাকে হাইলাইট করার জন্য <mark> </mark> এই ট্যাগ ব্যাবহার হয়।
<mark><strong>tc-computer</strong>
সুপারস্ক্রিপ্ট
কোন লেখার উপর অন্য লেখা উঠানোর জন্য সুপারস্ক্রিপ্ট ব্যাবহার হয় Bangladesh<sup>dhaka</sup>
সাবস্ক্রিপ্ট
কোন লেখার নিচে অন্য লেখা নামানোর জন্য সাবস্ক্রিপ্ট ব্যাবহার হয় Bangladesh<sub>dhaka</sub>
লাইন ব্রেক
লাইন ব্রেক ট্যাগ <br/> এটা সিংগল ট্যাগ
এব্রিবেশন ট্যাগ
Abbreviation ওয়ারডের সংক্ষিপ্ত রূপ বসানোর জন্য <abbr> </abbr>
লিংক ট্যাগ
Hello Dear Friends Welcome To tc-computer Education.
স্বাগত জানাচ্ছি, টিসি কম্পিউটার এর html সিরিজ ভিডিও তে, গত পর্বে আমরা শিখেছি সুপার স্ক্রিপ্ট এবং সাব স্ক্রিপ্টি আজকের পর্বে আমরা শিখবো। html লিং । অর্থাৎ কিভাবে html কোড এর মাধ্যমে কোন লেখাকে লিং করতে হয়? তো এখন প্রশ্ন জাগে লিংক কি ? লিংক হচ্ছে কোন লেখাকে অন্য কোন ওয়েব পেইজের সাথে সংযুক্ত করা, যে ঐ লেখার উপর ক্লিক করবে সে অন্য একটি ওয়েব সাইটে চলে যাবে । যেমন : আমরা যদি কোন উ-কমার্চ ওয়েব সাইটে ভিজিট করি তাহলে সেখানে আমরা দেখতে পাই ক্লিক হেয়ার, বাই নাউ বা এ জাতীয় কোন লেখা ইত্যাদি।
- html এর মধ্যে লিংক করানোর জন্য আমাদেরকে <a> </a> ট্যাগ ব্যবহার করতে হয় ।
- আপনি যে কথাটাকে লিংক করতে চান সে কথাটাকে <a> </a> ট্যাগের ভিতরে রাখতে হবে।
- আপনি যে ওয়েব পেইজটি লিংক করতে চান সে ওয়েব পেইজের লিংকটি বসানোর জন্য আমাদেরকে বিগেনিং ট্যাগের মধ্যে একটি হাইপার রেফারেন্স বা এইচরেফ নামক একটি এট্রিবিউট আছে সেটি ইউজ করতে হবে ।
- www দিতেও পারি না ও দিতে পারি ।
- লিংকটিকে নিউ ট্যাবে অফেন করার জন্য টার্গেট নামক এট্রিবিউট ইউজ করতে হবে ।
- টার্গেট এট্রিবিউট আমরা এইচরেফ এট্রিবিউট এর আগেও দিতে পারি , পরেও দিতে পারি ।
- টার্গেট এট্রিবিউট এর ভ্যালু দিতে হবে ব্লাংক । যেমন নিচে কোডের নমুনা দেওয়া হল।
- <a href=”https://tc-computer.com” target=”blank”>Click Here </a>
স্বার কথা : আজকের ক্লাসে আমরা শিখলাম।
- html এর মধ্যে লিংক করার জন্য <a> </a> ট্যাগ ব্যবহার ।
- আপনি যে কথাটাকে লিংক করতে চান সে কথাটাকে <a> </a> ট্যাগের ভিতরে রাখতে হবে।
- আপনি যে ওয়েব পেইজটি লিংক করতে চান সে ওয়েব পেইজের লিংকটি বসানোর জন্য আমাদেরকে বিগেনিং ট্যাগের মধ্যে একটি হাইপার রেফারেন্স বা এইচরেফ নামক একটি এট্রিবিউট আছে সেটি আমাদেরকে ইউজ করতে হবে ।
- www দিতেও পারি না ও দিতে পারি ।
- লিংকটিকে নিউ ট্যাবে অফেন করার জন্য টার্গেট নামক এট্রিবিউট ইউজ করতে হবে ।
টার্গেট এট্রিবিউট আমরা এইচরেফ এট্রিবিউট এর আগেও দিতে পারি , পরেও দিতে পারি ।
- টার্গেট এট্রিবিউট এর ভ্যালু দিতে হবে ব্লাংক ।
ইমেজ ট্যাগ
গত পর্বে আমরা শিখেছি লিংক ট্যাগ এর ব্যবহার আজকের পর্বে আমরা শিখবো html ইমেজ ট্যাগ এর ব্যবহার । অর্থাৎ কিভাবে html কোড এর মাধ্যমে কোন ইমেজকে কল করতে হয় বা আনতে হয় । ইমেজ হচ্ছে একটা ওয়েব সাইটের গুরুত্বপূণূ একটি কনটেন্ট । তো চলুন শুরু করি । প্রথমে জেনেনি আজকের ক্লাসে আমরা কি কি শিকবো?
- html এর মধ্যে ইমেজ আনার জন্য আমাদেরকে <img/> নামক সিংগেল ট্যাগ ব্যবহার করতে হয় ।
- <img/> নামক সিংগেল ট্যাগে ফরওয়ার্ড শ্লেস দিতেও পারি না ও দিতে । তবে দেওযাটাই ব্যাটার।
- html কোড লেখতে গিয়ে আমারা যদি কোন ভূল করি তাহলে দেখবেন ব্রাউজার সেটা সঠিক করে শো করবে। তাইবলে আমরা ভূল করবো না । সঠিক ভাবেই লিখবো ।
- ইমেজটা আমরা কোথায় থেকে আনবো ? ইমেজটা আনার জন্য ইমেজের সোর্চ কল করে দিতে হবে । তবে এখানে একটা কথা মনে রাখতে হবে যে, সোর্চ ফোল্ডারে যেভাবে ইমেজের নাম লেখা আছে হুবহু সেভাবে লেখতে হবে ।
- ইমেজের সোর্চ কল করার জন্য আমাদেরকে src=” ” নামক এট্রিবিউট ইউজ করতে হবে ।
- আরো একটি এট্রিবিউট ইউজ করতে হবে যে এট্রিবিউটটি SEO এর জন্য খুবই গুরুত্ব পূর্ণ । সেটি হচ্চে Alt=” ” (অলটার এট্রিবিউট । )
- অলটার এট্রিবিউট কি? অলটার এট্রিবিউট হচ্চে এমন একটি এট্রিবিউট যেটা সার্চ ইঞ্জনকে বলে দেয় যে ইমেজটা কি সম্পর্কে । এবং কোন কারণে যদি আপনার ব্রাউজার ইমেজটি লোড করতে না পারে বা ইমেজটি যদি লোড না হয় সে ক্ষেত্রে অলটার ট্যাগটা শো করবে । তখন ভিউয়ার জানতে পারবে যে এখানে একটি ইমেজ আছে এই সম্পর্কে । নিচে কোড দেওয়া হলো 👇
<img src=” ” Alt=” ” />
<img src=” Mother Board.png” Alt=” This image Computer Motherboard ” />
ইমেজ ট্যাগ এর উউথ এবং হাইট এর ব্যবহার
গত পর্বে আমরা শিখেছি ইমেজ ট্যাগ এর ব্যবহার, আজকের পর্বে আমরা শিখবো html ইমেজ ট্যাগ এর উইথ এবং হাইট এর ব্যবহার । অর্থাৎ কিভাবে html কোড এর মাধ্যমে কোন ইমেজ এর উইথ এবং হাইট বাড়ানো বা কমানো যায় । ইমেজ হচ্ছে একটা ওয়েব সাইটের গুরুত্বপূর্ণ একটি কনটেন্ট । তাই কন্টেন্টের সুন্দর্য বাড়ানোর জন্য ইমেজের সঠিক ব্যবহার আমাদেরকে ভালো করে শিখতে হবে । তো চলুন শুরু করি ।
প্রথম আমরা কিছু কথা জেনে নি।
- html এর মাধ্যমে ইমেজ আনার পর, ব্রাউজার আমদেরকে ডিফল্ট সাইজটাই শো করে দেখাবে।
- এট্রিবিউট দিয়ে উইথ হাইট নির্ধারণ করা হয় এবং সিএসএস দিয়েও উইথ হাইট নির্ধারণ করা যায় । এটাকে একটি লিটল টাইপ সিএসএসও বলতে পারি যদিও এটা একটা এট্রিবিউট ।
- মনে করেন আমি উইট দিলাম 250 px , px মানি পিক্সেল , পিক্সেল কি? পিক্সেল হচ্ছে একটা বিন্দু সাদা কাগজে কলম দিয়ে ছোট যে বিন্দু ফোটা দিই সেটাই হচ্ছে পিক্সেল ।
- শুধু 250 px দিয়ে সেভ করে শো করলে উইথ এর পাশাপাশি হাইট ও কমে যাবে এটা ব্রাউজারে আটো ভাবে কমিয়ে নিবে । হ্যাঁ আমরা যদি হাইট উল্লেখ করেদি তাহলে যে পরিমাণ হাইট দিব সে পরিমাণ হাইট আমাদের সামনে প্রদর্শিত হবে ।
- ইমেজকে লিংকও করাতে পারি । ইমেজকে লিংক করার জন্য পুরা ইমেজ ট্যাগেকে লিংক ট্যাগের ভিতরে রাখতে হবে। নিচে কোড দেওয়া হলো 👇
<img src=” Mother Board.png” Alt=” This image Computer Motherboard ” />
<img src=” Printer.jpg” Alt=” This image a Computer output Device ” />
Element
সম্মানিত বন্ধুগন প্রথমে আমরা জেনেনি এলিমেন্টস(Elements) কি? উত্তর এলিমেন্টস হচ্ছে HTML এর মূল কেন্দ্রবিন্দু। একটি এলিমেন্ট (Element)মুলত তিনটি অংশ নিয়ে গঠিত হয়। এক. শুরু করার ট্যাগ ( অর্থাৎ opening tag), দুই. এলিমেন্ট এর ধারনকৃত অংশ বা কনটেন্ট তিন. শেষে বন্ধ করার ট্যাগ (অর্থাৎ closing tag)। Element দুই প্রকার (১) ব্লক লেবেল এলিমেন্ট (২) ইনলাইন এলিমেন্ট। প্যারাগ্রাফ হলো ব্লক লেবেল এলিমেন্ট, ইমেইজ হচ্ছে ইনলাইন এলিমেন্ট এরকম ভাবে লিংক বোল্ড আন্ডারলাইন ও ইনলাইন এলিমেন্ট Div ব্লক লেবেল এলিমেন্ট <div> </div>
বলা বাহুল্য যে, প্রত্যেক Web page এর অতীব প্রয়োজনীয় চারটি এলিমেন্ট(Element) থাকে এগুলো হচ্ছে HTML, head, title এবং body elements।
চলুন আমরা প্রাকটিকেলি উদাহরণ সহ শিখি
<html>
<head>
<title>আমার প্রথম এইচটিএমএল পেইজ</title>
</head>
<body>
<h1>হ্যালো</h1>
<p>আমরা এইচটিএমএল শিখতেসি</p>
</body>
</html>
Element দুই প্রকার (১) ব্লক লেবেল এলিমেন্ট (২) ইনলাইন এলিমেন্ট।
কমেন্ট ট্যাগ
<!– এখানে কমেন্ট হবে —> কমেন্ট আউটপুট পেইজ থেকে হিডেন থাকে
Text Direction মানি এলাইন করা এটার জন্য এট্রিবিউট ডিরেকশন ইউজ করতে হবে dir=”rtl”> বাম থেকে ডানে <bdo> </bdo> ট্যাগ
উল্ট
<p
dir=”rtl”>This is a simple paragraph</p>
<p><bdo
dir=”rtl”>This is a simple paragraph</bdo></p>
html + CSS
CSS ( সিএসএস) তিন ধরনের হতে পারে। (১) ইনলাইন, (২) ইন্টারনাল, (৩) এক্সটারনাল ।
CSS হল এমন একটি (Language) বা ভাষা যাহার মাধ্যমে আমরা একটি HTML ডকুমেন্টকে বিভিন্ন স্টাইলে
ব্যবহার বা উপস্থাপন করতে পারি। CSS দ্বারা আমারা html উপাদানগুলোকে বিভিন্ন রংয়ে বা ডঙয়ে প্রদর্শন করতে পারি। একটি সিএসএস এর মধ্যে তিনটি পার্ট
(১) selector (২) property (২) value
যেমন নিচের উদাহরণটি অনুধাবন করলে বুঝে আসবে। CSS একসাথে একাধিক ওয়েব পৃষ্ঠার বিন্যাস নিয়ন্ত্রণ করতে পারে। এক্সটারনাল ফাইল এক্সটেনশন (.css) এরূপ হবে।
আমরা সিএসএস Selector কে পাঁচটি বিভাগে বিভক্ত করতে পারি:
(১) Simple selectors সরল নির্বাচক ( এটাতে নাম, আইডি, শ্রেণীর উপর ভিত্তি করে উপাদান নির্বাচন করুন)
(২) Combinator selectors কম্বিনেটর নির্বাচক (তাদের মধ্যে একটি নির্দিষ্ট সম্পর্কের উপর ভিত্তি করে উপাদান নির্বাচন করুন)
(৩) Pseudo-class selectors ছদ্ম-শ্রেণী নির্বাচক (একটি নির্দিষ্ট অবস্থার উপর ভিত্তি করে উপাদান নির্বাচন করুন)
(৪) Pseudo-elements selectors ছদ্ম-উপাদান নির্বাচক (একটি উপাদানের একটি অংশ নির্বাচন এবং শৈলী)
(৫) Attribute selectors বৈশিষ্ট্য নির্বাচক (একটি বৈশিষ্ট্য বা বৈশিষ্ট্য মানের উপর ভিত্তি করে উপাদান নির্বাচন করুন)
যে খানে একাধিক Declaration থাকবে সেখানে সিমিকোলন দ্বারা পৃথক করতে হবে। Property এবং Value কে পৃথক করার জন্য ব্যবহার হবে কোলন। যেমন উপরের চিত্রটিতে দেখানো হয়েছে।
CSS এর উদাহরণ
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
প্রথমে আমরা ইনলাইন css শিখবো।
এখানে স্টাইলএট্রিবিউট ইউজ করতে হবে।
বোল্ড এর জন্য <p
style=”font-weight:bold;color:orange;”>
style=”font-weight:bold;color:orange;”
<p
style=”font-weight:bold;color:orange;”>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum
soluta nobis eleifend option congue nihil imperdiet doming id quod mazim
placerat facer possim assum. Typi non habent claritatem insitam; est usus
legentis in iis</p>
Using Internal
CSS (ইন্টারনাল
CSS)
Internal CSS হবে হ্যাড ট্যাগ এর মধ্যে Style tag এর ভিতরে হবে <
Style> </Style>
যেমন:-
<head>
<!– Tutorial By- Md Nasir Uddin – tc-computer.com –>
<title>Intoducing
with CSS | tc-computer.com</title>
<style>
p{font-weight:bold;color:red}
h2{color:green}
</style>
</head>
এক্সটারনাল CSS
External CSS ( এক্সটারনাল CSS) এক্সাট্রা CSS ফাইল নিয়ে লিংক করে দেওয়া। ফাইলের নাম হবে Style.css
<link/> Tag , <link
rel=”stylesheet” href=”style.css”/>
ইনলাইন সি এস এস এর পাওয়ার বেশি তারপর ইন্টারনাল তারপর এক্সটারনাল
Fonts
Meta Tag <meta charset=” UTF-8″/> বাংলা লেখা ডিকলার করার জন্য
লেখার উপর কিভাবে ফটো আনবো
সি এস এস ফাইল
p{
background-image:url(“img/flower.jpg”);
background-repeat:no-repeat;
background-size:cover;
}
সি এস এস এর মধ্যে কমেন্ট
/*
background-repeat:repeat-x;
background-repeat:repeat-y;
background-size:cover;
background-size:250px 150px;
*/
css color
Color Picker
হ্যাক্সাকোড ব্যাবহার করে আমরা আমাদের মন মত কালার ইউজ করতে পারি।
কোডগুলো ফটোশফে পাই
গুগলে HTML Color Code লিখে নিতে পারি
গুগল ক্রম ইন্সপেক্ট এলিমেন্ট করেনিতে পারি।
Pixie ডাউনলোড করে নিতে পারি।
যেমন কালোর জন্য ছয়টা শূন্য #000000
সবুজ এর জন্য 008000
সাদার জন্য #fff Or ffffff
যেমন :- p{
color:#5489BD;
}
p{
color:#5489BD;
}
Use of Table Part-01
<tr>
</tr> রো ট্যাগ tr মানি- টেবিল রো
<td> </td>
কলাম td মানি- টেবিল ডাটা
<th> </th>
টেবিল হ্যাডিং
<caption>Table
name</caption> টেবিল কেপশন
<table Width=”500″ border=”2″ cellpadding=”5″>
<tr>
<th>Name</th>
<th>Class</th>
<th>Roll No</th>
</tr>
<tr>
<td>Abdul</td>
<td>10</td>
<td>1</td>
</tr>
<tr>
<td>Tonoy</td>
<td>12</td>
<td>65</td>
</tr>
<tr>
<td>Hasan</td>
<td>5</td>
<td>3</td>
</tr>
<tr>
<td>Sujon</td>
<td>6</td>
<td>1</td>
</tr>
</table>
টেবিল মার্জ করার জন্য
<td
colspan=”2″>Hasan</td>
<td
colspan=”1″>3</td>
টেবিল হেডিং
<head>
<!– Tutorial tc-computer.com –>
<title>Table
| tc-computer.com</title>
<link
rel=”stylesheet” href=”style.css”/>
</head>
টেবিল ফুটার
<tfoot>
<tr>
<td
class=”table_left” colspan=”2″>Total</td>
<td
colspan=”1″>1900 Tk</td>
</tr>
</tfoot>
<table
border=”2″ cellpadding=”5″>
<tr>
<th>Name</th>
<th>Class</th>
<th>Roll
No</th>
</tr>
<tr>
<td>Abdul</td>
<td>10</td>
<td>1</td>
</tr>
<tr>
<td>Tonoy</td>
<td>12</td>
<td>65</td>
</tr>
<tr>
<td>Hasan</td>
<td>5</td>
<td>3</td>
</tr>
<tr>
<td>Sujon</td>
<td>6</td>
<td>1</td>
</tr>
</table>
Table Css File
table{
width:650px;
}
Div এর ব্যবহার
Div হচ্ছে ব্লক লেবেল এলিমেন্ট। ডানে বামে সব দখল করে নিবে। Div ডাবল ট্যাগ <div/> </div> এটি বডি ট্যাগ এর ভিতরে হবে। যেমন নিচে দেখানো হল।
<body>
<div class=”mydiv”>
this is a simple text
<h2>this is my heading</h2>
</div>
<div class=”mydiv1″>
this is a simple text
</div>
</body>
Margin Padding
Class & id
ক্লাস এবং আইডি ব্যবহার করে আমরা প্রথক ভাবে সি এস এস এপলাই করতে পারি।
<p class=”blue”> এই প্যারাগ্রাফটি ব্লু হবে। </p>
<p class=”Orange”> এই প্যারাগ্রাফটির কালার অরেন্জ হবে। </p>
এক্সটারনাল সিএসএস
P{
Color:
red;
}
.blue{
Color:Blue;
}
.Orange{
Color:Orange;
}
আইডি ব্যবহার করেও আমরা চিহ্নিত করতে পারি।
<p id=”blue”> এই প্যারাগ্রাফটি ব্লু হবে। </p>
<p ids=”Orange”> এই প্যারাগ্রাফটির কালার অরেন্জ হবে। </p>
Css এর মধ্যে আইডি ডিকলার করতে হবে # সাইন দিয়ে
.#blue{
Color:
blur
আইডি এবং ক্লাস এর পার্থক্য
আমরা ক্লাসই ব্যাবহার করবো।
Multiple Class
<p class=”blue bold”> এই প্যারাগ্রাফটি ব্লু হবে। </p>
Css
.bold{
Font-weight:bold
}
ফন্ট সম্পর্কে সি এস এস
p{
font-family: arial;
font-size: 50px;
font-weight:normal;
}
ফন্ট Variant সম্পর্কে সি এস এস
p{
font-family: arial;
font-size: 1.5em;
ফন্ট সাইজ px – em – % এই তিনটি দিয়ে লিখতে পারি pt দিয়েও লিখতে পারি তবে এটা স্টেন্ডার্ড কোয়ালিটি নয়।
ব্রাউজারের ডিপল্ট সাইজ em দিয়ে মেন্টিং করায় হয়।
font-weight:bold;
font-style:italic;
font-variant:small-caps;
text-transform:lowercase; অথবা Uppercase
}
Line Hight সম্পর্কে সি এস এস
p{
font-family: arial;
font-size: 26px;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
line-height: 150%;
text-transform: lowercase;
উপরের ছয়টাকে আমরা সংক্ষেপে এভাবে লেখতে পারি।
font: italic small-caps bold 26px/150% Arial;
Text Decoration টেক্স ডেকোরেশন
css টেক্স ডেকরেশন এর মাধ্যমে আমরা আন্ডার লাইন, লাইন-থ্র, অভার লাইন,ইত্যাদি করতে পারি। সাধারনত এটা নন থাকে Text DecorationnfLf যেমন নিচে দেখানো হল।
Thank you for reading the post.
