আমার প্রিয় পোস্ট

একজন ইউনুস খান বেঁচে থাকতে চান গণ মানুষের মৌলিক চাহিদা পূরণের আন্তরিক প্রচেষ্টা এবং উদ্যেগ গ্রহণের মাঝে।

HTML এবং CSS এর সহজ টিউটোরিয়াল - ২

১৮ ই আগস্ট, ২০০৯ রাত ১২:৫৩

শেয়ারঃ
0 0 0

HTML এর একটা বেসিক Structure আছে। যেটা সবাইকে অবশ্যই Follow করতে হবে। বেসিক Structure টি নিন্মরুপঃ-
''
''
''
''
''
''
''
''

বি.দ্র. আমি আগেই উল্লেখ করেছিলাম HTML এর প্রতিটি Tag আগে < সাইন দিয়ে শুরু করে > দিয়ে শেষ করতে হবে। উপরের কোড থেকে অবশ্যই 'সিঙ্গেল কোটেশান('') উঠিয়ে দিতে হবে'। ব্লগে যেহেতু সরাসরি কোড দেওয়া যায়না। তাই আমার বিকল্প ব্যবস্থা। কারো বুঝতে হলে How learn HTML & CSS easily? Tutorial - 2 থেকে কোডগুলো নিতে পারেন।

html ফাইল লিখার জন্য অবশ্যই আপনাকে html ট্যাগ দিয়ে শুরু করতে হবে। সেই সাথে এই ট্যাগ এর ক্লোজও দিতে হবে। এই দুই ট্যাগের মাঝে আপনাকে যাবতীয় html কোড লিখতে হবে।

উপরের আমরা মোট যে চারটি ট্যাগ লিখেছি সেগুলোকে আমরা Document Tag বলে থাকি। এখন এই Document Tag গুলোর বর্ণনা লিখছি-
html - ওয়েব ব্রাউজার শুরুতেই html Tag দিয়ে বুঝবে যে সে html ফাইলে প্রবেশ করেছে। এটা টোটাল ওয়েব পেইজকে বর্ণনা করে।
head - এইটা html ফাইলের মূল হেড ট্যাগ। আমরা head ট্যাগ এর মাঝে যাবতীয় মেটা কন্টেন্ট, Javascript ফাইল, CSS ফাইল গুলো লিখবো।
title - ব্রাউজারে আপনের Web Page টির title শো করার জন্য এখানে আপনার উল্লেখিত title লিখতে হবে।
body - এখানে আপনার ওয়েব পেইজের যাবতায় বর্ণনা লিখবেন।

এখন আমরা মূল Content এ এসে গেছি। body Tag এর মাঝে যাবতীয় Style Tag দ্বারা মূল পেইজটি লিখবো। Style Tag কি জিনিস হয়তো ভাবছেন? html হলো Predefined Tag যা দ্বারা আমরা ওয়েব পেইজের কন্টেন্ট সাজাই। ইতিমধ্যে আমরা Document Tag এর সাথে পরিচিত হয়েছি। এখন আমরা Style Tag এর সাথে পরিচিত হবো।

তার আগে আবারো বলছি প্রতিটা Tag এর শুরুতে < সাইন দিয়ে শুরু করে > দিয়ে শেষ করতে হবে। সেই সাথে প্রতিটা Tag এর End Tag লিখতে হবে।

নিচে Style Tag গুলোর সাথে পরিচিত হয়:-<br />
h1 - Main content header
h2 - Another header
....
....
....
h6 - Last content header
a - Hyperlink
b - Bold Text
font - Create text
i - Italic text
table - Create table
tr - Cell in Table row
th - Cell in Table header
td - Cell in Table body
div - Define area
p - Paragraph
textarea - define text area
span - define text area
small - Small Text

এই রকম আরও বেশ কিছু ট্যাগ আছে যা আমরা সামনের টিউটোরিয়াল গুলোতে দেখবো কাজ করতে করতে। আপাতত যারা Confused তারা প্রশ্ন করে ফেলুন আর তারাতারি উপরের জিনিস গুলো মুখস্ত করে ফেলুন। সামনের দিন গুলোতে নিশ্চিত সব পরিষ্কার হয়ে যাবে।

সমস্ত কোড গুলো এখানে পাবেন-
How learn HTML & CSS easily? Tutorial - 2

 

সর্বশেষ এডিট : ১৮ ই আগস্ট, ২০০৯ রাত ১২:৫৫ | বিষয়বস্তুর স্বত্বাধিকার ও সম্পূর্ণ দায় কেবলমাত্র প্রকাশকারীর...

 

১৮ ই আগস্ট, ২০০৯ রাত ১:০৫

লেখক বলেছেন: ধন্যবাদ ভাই। ভালো থাকুন।

২. ১৮ ই আগস্ট, ২০০৯ রাত ১:০৪
ইউনুস খান বলেছেন: বেসিক Structure টি নিন্মরুপঃ-
''
''
''
''
''
''
''
''


কোডগুলো আসে নাই। দুঃখিত।
৪. ১৮ ই আগস্ট, ২০০৯ রাত ১:১৭
সত্যান্বেষী বলেছেন: চরম ফালতু টিউটোরিয়াল পোস্ট। নামমাত্র একচিমটি কন্টেন্ট দিয়ে মূলত নিজের একটা হযবরল ব্লগকে অপটিমাইজ করাই আপনার উদ্দেশ্য মনে হচ্ছে।
৫. ১৮ ই আগস্ট, ২০০৯ রাত ১:১৮
সত্যান্বেষী বলেছেন: 'কারো বুঝতে হলে How learn HTML & CSS easily? Tutorial - 2 থেকে কোডগুলো নিতে পারেন।'

- এর মানে কি?
১৮ ই আগস্ট, ২০০৯ রাত ১:২২

লেখক বলেছেন: ১। 'কারো বুঝতে অসুবিধা হলে How learn HTML & CSS easily? Tutorial - 2 থেকে কোডগুলো নিতে পারেন।'

------------ এখানে অসুবিধা কথাটা বাদ গেছে।

২। না স্যার নিজের ব্লগকে অপটিমাইজ করার কোন ইচ্ছায় কোনদিন জাগেনি। আমার ব্লগটির অনেক বয়স হলেও নামে মাত্র কয়েকটা পোস্ট আছে।

৩। একান্তয় যদি এই ব্লগে কোড দেওয়ার কোন রকম সুযোগ থাকতো তাহলে আমি কখনই আমার ব্লগে কোড দিতামনা।

৪। নামমাত্র একচিমটি :- আপনে জিনিসগুলো পারেন বলেই মনে হয় এক চিমটি মনে হয়েছে। যারা পারেনা তাদের জন্য বেশ মনে হবে। আমি নিজে যেভাবে শিখেছি সেভাবেই দেওয়ার চেষ্টা করছি।

ধন্যবাদ আপনাকে।


৭. ১৮ ই আগস্ট, ২০০৯ রাত ১:৩১
সত্যান্বেষী বলেছেন: আপনি কেন W3 School ওয়েবসাইটের লিংক দিচ্ছেন না? সেখানে কি বিষয়গুলো এর চেয়ে অনেকগুনে ভাল করে দেয়া নেই?
১৮ ই আগস্ট, ২০০৯ রাত ১:৪২

লেখক বলেছেন: অবশ্যই উনারা আমার চেয়ে অনেকগুন ভালো লিখেছে। আমি আমার মতো করে বাংলা ভাষায় লিখার চেষ্টা করছি।

দয়া করে আপনি লিংক গুলো একত্র করে একটা পোস্ট দেন না।

১৮ ই আগস্ট, ২০০৯ রাত ১:৪৩

লেখক বলেছেন: ওপেনসোর্সের প্রায় সবজিনিসই তো নেটে দেওয়া আছে। তারপরও আমরা কেনো ব্লগে লিখি এইসব? বা এক বিষয়ে কেন একাধিক সাইট বা ব্লগ থাকে?

৮. ২৮ শে আগস্ট, ২০০৯ রাত ১২:২৬
'লেনিন' বলেছেন: এই নাও তোমার কোড দিলাম..... দেখো কোনো সমস্যাই হইলো না!

<html>
<head>
<title>
এখানে টাইটেল লিখবেন যা ওয়েন ব্রাউজারের উপরে শো করবে।
</title>
</head>
<body>
এখানে মূল পেইজটির যাবতীয় জিনিস লিখবেন
</body>
</html>
২৮ শে আগস্ট, ২০০৯ রাত ১:২৩

লেখক বলেছেন: ওরেএএএ ধইন্যাপাতা। কিন্তু কেমনে লিখলেন ভাই?

৯. ২৮ শে আগস্ট, ২০০৯ রাত ১২:৩০
'লেনিন' বলেছেন: এই বার বাকী অংশ:
নিচে Style Tag গুলোর সাথে পরিচিত হই:-<br />
<h1>Main content header</h1>
<h2>Another header</h2>
….
….
….
<h6>Last content header</h6>
<a>Hyperlink</a>
<b>Bold Text</b>
<font>Create text</font>
<i>Italic text</i>
<table>Create table</table>
<tr>Cell in Table row</tr>
<th>Cell in Table header</th>
<td>Cell in Table body</td>
<div>Define area</div>
<p>Paragraph</p>
<textarea>define text area</textarea>
<span>define text area</span>
<small>Small Text</small>


তোমার ব্লগ থেকেই কপি পেস্ট করলাম।

আর হ্যাঁ লিখে যাও অনেক ভালো ভালো টিউটোরিয়াল আছে তাই বলে কি নতুন লেখা যাবে না?
২৮ শে আগস্ট, ২০০৯ রাত ১:৪৮

লেখক বলেছেন: ইন্সপায়ার করার জন্য ধন্যবাদ।

১০. ২৮ শে আগস্ট, ২০০৯ রাত ১২:৩২
গৌতম রায় বলেছেন: লেনিন ভাই, সামুতে কোড লিখা যায়? কীভাবে? জানাবেন?
১১. ২৮ শে আগস্ট, ২০০৯ রাত ১:৫৫
'লেনিন' বলেছেন: একটা সহজ বুদ্ধি বলে দেই সেটা হলো যেকোনো wyswig এডিটরে ডিজাইন মোডে কোড পুরোটা পেস্ট করে এবার কোড মোডে সেটা নিয়ে নিলেই হলো।

& কোডগুলো এমনিতেই জেনেরেট করে দেবে। :)
২৮ শে আগস্ট, ২০০৯ রাত ২:২২

লেখক বলেছেন: ধন্যবাদ লেনিন ভাই।

১২. ২৮ শে আগস্ট, ২০০৯ রাত ২:১১
আট আনা বলেছেন: টেস্টিং ----

<h6>Last content header</h6>
<a>Hyperlink</a>
<b>Bold Text</b>
<font>Create text</font>
<i>Italic text</i>
<table>Create table</table>
<tr>Cell in Table row</tr>
<th>Cell in Table header</th>
<td>Cell in Table body</td>
<div>Define area</div>
<p>Paragraph</p>
<textarea>define text area</textarea>
<span>define text area</span>
১৩. ২৮ শে আগস্ট, ২০০৯ রাত ২:১৬
আট আনা বলেছেন: এইচটিএমএল ট্যাগ গুলা স্ট্রিপ করা আছে, এইজন্য আসেনা। ট্যাগগুলারে এনকোড করে এখানে দিতে হবে। পিএইচপিতে একটা ফাংশান আছে urlencode, এটা দিয়ে কনভার্ট করলেই হবে। নিচের লিংকেও ঢু মারতে পারেন, একই জিনিস --

Click This Link
১৪. ২৮ শে আগস্ট, ২০০৯ রাত ২:১৯
আট আনা বলেছেন: প্লাস দিলাম। আপনার ব্লগে আপনি যা খুশি তাই করবেন, আরেকজনের ভাল না লাগলে সে আসবে না, সিম্পল হিসাব। লিখে যান, পূরাটা শেষ করুন এই কামনা করি।
২৮ শে আগস্ট, ২০০৯ রাত ২:২৩

লেখক বলেছেন: ধন্যবাদ ভাই আপনাকে অনেক অনেক।

আশা করি আবার পুরো উদ্যেমে লিখে যাবো ;)

১৫. ২৮ শে আগস্ট, ২০০৯ রাত ২:২৩
আট আনা বলেছেন: সরি, htmlentities() দিয়ে হবে। urlencode Diye url convert korte parben. :)
২৮ শে আগস্ট, ২০০৯ রাত ২:২৩

লেখক বলেছেন: ;) ;)

২৮ শে আগস্ট, ২০০৯ বিকাল ৪:৪৯

লেখক বলেছেন: ধন্যবাদ আপনাকে।

১৭. ০৪ ঠা আগস্ট, ২০১০ সকাল ১১:২৮
সংবাদ বলেছেন: চালিয়ে যান ভাই আপনাদের কারেনেই ওযেব সাইট বানাতে এবঙ বিভিন্ন ওযেব ভাষা শিখতে পারছি যা আমি দু মাস আগে কল্পনাও করতে পারি নাই আমি একজন ডিজাইনার, যারা বলে w3 লিংক দেয়ার জন্য আমি তাদের বলছি ভাই যারা ইংরেজিতে দুর্বল তাদের জন্য বাংলাই ভরসা নয়কি বিষেশ করে যার একাজে নবিন আমার কথায় ধরুন আমি প্রথম অবস্তায় যদি আমি এই সব বাংলা টিউটোরিয়াল না পড়তাম তাহলে আমার শেখা সম্বব হতো না
১৯. ০২ রা সেপ্টেম্বর, ২০১০ রাত ১২:০৮
নিশাচর নাইম বলেছেন:

বইটা পড়ে দেখতে পারেন।

HTML AND CSS FOR DUMMIES





ডাউনলোড

Click This Link

 

মোট সময় লেগেছে ০.৯৩৯১ সেকেন্ড

 

সামহোয়‍্যার ইন...ব্লগ বাঁধ ভাঙার আওয়াজ, মাতৃভাষা বাংলায় একটি উন্মুক্ত ও স্বাধীন মত প্রকাশের সুবিধা প্রদানকারী প্ল্যাটফর্ম। এখানে প্রকাশিত লেখা, মন্তব‍্য, ছবি, অডিও, ভিডিও বা যাবতীয় কার্যকলাপের সম্পূর্ণ দায় শুধুমাত্র সংশ্লিষ্ট প্রকাশকারীর...
© সামহোয়্যার ইন...নেট লিমিটেড | ব্যবহারের শর্তাবলী | গোপনীয়তার নীতি
http://www.yunuscse.com/

অন্যায়ের প্রতিবাদ করে লাশ হতেও আপত্ত নাই। শুধু মিনতি লাশটা যেন শেয়াল-কুকুরে না খেয়ে ফেলে, আমার মা-বাবার কাছে যেন পৌছে...
আর এস এস ফিড

পোস্ট আর্কাইভ

আমার লিঙ্কস

আমার বিভাগ