সালাম নিবেন। Html,Css,Wordpres নিয়ে আমার ২য় পর্বে সবাইকে স্বাগতম। আশা করি সবাই ভালো আছেন।
আজ
আমি আপনাদের সাথে যে বিষয়গুলা নিয়ে আলোচনা করবো সেটা হলো html ট্যাগ নিয়ে।
সহজ ভাষায় ট্যাগ বলতে যা বোঝায় সেটি হলো, যে সকল কোড দিয়ে একটি পেজ গঠিত
হয়। যে কোন একটি পেজে যান, সেখানে গিয়ে মাউসের রাইট ক্লিক করে View page
source এ ক্লিক করেন তখন দেখতে পাবেন অনেক কিছু লেখা আছে। এগুলা এই html
ট্যাগ নিয়ে গঠিত। কি ভয় লাগছে? ভয় পাওয়ার কিছু নেই, নিয়মিত আমার টিউন গুলা
ফলো করেন দেখবেন এগুলা লেখা তেমন কোন বেপার না।
আমি বলবো না যে আমি
আপনাদের ১০দিনের মধ্যে সব কিছু শিখিয়ে দেবো। আসলে ওয়েব ডিজাইন শিখতে হলে
দরকার ধর্য আর সময়। আমি আপনাদের বিস্তারিত শেখাবো না কিংবা অনেক অনেক
আলোচনা করে সব কিছু এক বারে শিখিয়ে দেবো বলবো না। আমি ততোটুকু শেখাবো
যতোটুকু একটি সাইট তৈরী করতে দরকার হবে। বাকিগুলা নিজেরা মাথা খাটিয়ে করে
নিবেন। নিচে কিছু html ট্যাগ দিলাম, দেখে নিন।
<html> সকল কিছু এখানে</html> সাইট তৈরী করতে হলে এই ট্যাগ দিয়ে শুরু করতে হয়।
<head></head> এখানে টাইটেল থাকে , অন্য কোন css , js ফাইলের সংযোগ করতে হয় । এটা নিয়ে পরে আলোচনা করবো।
<title></title> এটি দিয়ে সাইটের টাইটেল দেওয়া হয়।
<body></body> একটি সাইটের সকল লেখা বা ডিজাইন এখানে হবে।
<div></div> একটি সাইট তৈরী করতে এই ট্যাগটা খুব দরকার।
<h1></h1> কোন লেখার হেডলাইন দেওয়ার জন্য। এখানে h1 এর পরিবর্তে h2,h3,h4,h5 লিখতে পারেন।
<p></p> এই ট্যাগে কনটেন্ট লিখবেন।
<img/> এই ট্যাগ দিয়ে একটি ইমেজ নিয়ে আসা যায়।এর কোন ক্লোজ ট্যাগ নেই।
<a href="কোন সাইটের লিংক">যে কোন লেখা</a> এই ট্যাগ দিয়ে যে কোন লেখাকে হাইপার লিংক দিতে পারবেন।
<table></table> এই ট্যাগ দিয়ে টেবিল তৈলী করতে হয়। টেবিল নিয়ে বিস্তারিত পরে আলোচনা করবো।
<form></form> এটা দিয়ে বিভিন্ন ফর্ম তৈরী করা হয়।
<input
/> এর কোন ক্লোজ ট্যাগ নেই। এটি দিয়ে বিভিন্ন উপাদান যুক্ত করা হয়,
যেমন টেস্ট এরিয়, সার্চ বাটন, টিউমেন্টস এরিয়, পাসওয়ার্ড এরিয়, ইত্যাদি।
<ul></ul>
অথবা <ol></ol> , আন অর্ডার লিস্ট বা অর্ডার লিস্ট এবং ভিতরের
উপাদান <li></li> দিয়ে লেখা হয়।
আপাততো এই কয়টা ট্যাগ বুঝে নিন। পরবর্তিতে প্রযেক্ট তৈরী করার সময় যখন যে ট্যাগ দরকার হবে সেটা নিয়ে আলোচনা করবো।
অনেক
কিছু বুঝতে অসুবিধা হচ্ছে আমি বুঝতে পারছি। এটা স্বাভাবিক, প্রথম যখন আমি
শিখেছিলাম তখন এমনই হয়েছিল। আমি আপনাদের এতটুকু শিখিয়ে থেমে যাবো না। আমি
আপনাদের বিভিন্ন সাইট দেখিয়ে সেটা ধিরে ধিয়ে তৈরী করে দেখাবো যাতে প্রতিটা
বেপার খুব ক্লিয়ার ভাবে বুঝতে পারেন।
প্রথমে আপনাদের যে সফটওয়ারটি দরকার হবে সেটি হলো Notepad++ , সরাসরি ডাউনলোড করতে এখানে
ক্লিক করুন । লিংক কাজ না করলে কষ্ট করে গুগল থেকে ডাউনলোড করে নিন।
হোম ওয়ার্ক:
যে কোন জায়গায় একিট ফোলডার করুন। সেখানে একটি ছোট jpg ফরমেটে ছবি রাখুন নাম দিন photo.jpg
Notepad++
ওপেন করুন। এবার এতোক্ষন যে ট্যাগ গুলা শিখলাম তার প্রাকটিস করার পালা।
চটজলদি নিচের কোডটুকু কপি করে নোটপ্যাডে পেস্ট করুন।
টেকটিউনস কোড হাইলাইটার - কোড কপি করতে কোডের উপর ডাবল ক্লিক করুন
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<html>
<head>
<title>This is Site Title</title>
</head>
<body>
Use of h tag:
<div>
<h1>This is Title</h1>
<h2>This is Title</h2>
<h3>This is Title</h3>
<h4>This is Title</h4>
<h5>This is Title</h5>
<h6>This is Title</h6>
</div>
Use of p and a tag:
<div>
<p>Some text here as your wish</p>
<a href="http://www.dhakasports.com/">Dhaka Sports</a>
</div>
<br/>
Use of img tag:
<img src="photo.jpg"/>
<br/>
<br/>
Use of table tag:
<br/>
<br/>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</body>
</html>
|
এবার
সেভ করুন এই নাম দিয়ে- index.html । ব্যাস কাজ শেষ। এবার যে কোন ব্রাউজার
দিয়ে ফাইলটি ওপেন করুন আর দেখুন , নিজে নিজে কোড গুলা লিখে প্রাকটিস করুন।
লিখার মাঝে পারিবর্তন করে করে দেখুন কি হয়। পরিবর্তন করে দেখতে থাকলে
বুঝতে পারবেন কোন ট্যাগের কি কাজ। যখন css এর কাজ দেখবেন তখন সব কিচু খুব
সহজই মনে হয়।
বিদ্র: img ট্যাগে src দিয়ে ইমেজ আপনার
পিসিতে কোথায় আছে সেটি দেখানো হয়েছে। a ট্যাগে href দিয়ে কোন লিংকের সাথে
সম্পর্ক তৈরী করবো সেটা দেখানো হয়েছে,<br/> ট্যাগটা ইউজ করেছি,
লাইনের মধ্যে ফাকা নিয়ে আসার জন্য। যেহেতু আমি বলেছি আপনাদের সাইট দেখিয়ে
সেটি তৈরী করা শেখাবো সুতরাং চিন্তার কোন কারন নেই। আমরা প্রথম যে সাইটটি
তৈরী করবো সেটি হলো Dhaka Sports
এই টিউটরিয়ালের সুবিদার্থে সাইটটি তৈরী করা হয়েছে, যাতে করে আপনারা সব
কিছু খুব সহযেই বুঝতে পারেন। অবাক হওয়ার কিছু নেই, আমি আছি। সাথে থাকুন।
২.এর
পর My Account Is Compromised টি তে ক্লিক করুন।নিছের মত একটি উইন্ডো
আসবে। এতে আপনার সঠিক Email or phone number or Username full Name তিন
টি থেকে যে কোন একটি দিবেন।
৩.এই খানে আমি একটি উদাহরণ দেবার জন্য একটি ইমেইল দিলাম। আপনারা আপনাদের সঠিক ইমেইল এড্রেস টি দিয়ে Search বাটন এ ক্লিক করুন।
৪. এই খানে আপনি আপনার সঠিক আইডি টি নির্বাচন করুন।This is my Account এ ক্লিক করুন।
৫.This is my Account এ ক্লিক করার পর আপনার পুরাতন পাসওয়ার্ড টি দিন। নিচের মত উইন্ডো আসবে।
৬.Continue তে ক্লিক করুন । নিচের মত একটি উইন্ডো আসবে এই খনে আবার Continue তে ক্লিক করুন
৭. Continue তে ক্লিক করার পর আপনি নতুন একটি পাসওয়ার্ড দিন এবং Continue তে ক্লিক করুন । নিচের মত
৮.এর
পর আপনাকে দুই টি অপশন দিবে একটি হল আপনার বর্তমান ইমেইল এড্রেস আরেকটি হল
নতুন ইমেইল এড্রেস । আপনি চাইলে নতুন একটি ইমেইল দিয়ে আইডি টি ওপেন করতে
পারেন। এইখানে আমি আমার বর্তমান ইমেইল এড্রেস টি সিলেক্ট করেছি।
৯.এর পর নিচের মত একটি উইন্ডো আসবে Only I know the password for exclusiverobin44@gmail.com এই টি তে টিক চীর্ণ দিয়ে continue তে ক্লিক করুন।নিচের মত
১০.এর পর continue তে ক্লিক করুন।আপনি চাইলে Verified Mobile Phone Number অথবা Login Approvals on রাখতে পারেন ।নিচের মত।
১১.এর পর স্কিপ এ ক্লিক করুন।নিচের মত
১২.উপরের স্টেপ গুলো ঠিক ভাবে করতে পারলে আপনি আপনার প্রিয় ফেসবুক আইডিটা ফিরে পাবেন।
