Awesome! টিউনস
সকল Awesome! টিউনস

খুব সহজে Html,Css,Wordpres দিয়ে নিজেই তৈরী করুন নিজের ওয়েব সাইট পর্ব-০২

2,257 দেখা 4 টিউমেন্টস জোসস
টিউন বিভাগ ওয়েব ডিজাইন
প্রকাশিত
Level 2

Founder, Jobayer Academy, Dhaka
46 টিউনস 28 টিউমেন্টস 4 ফলোয়ার

সালাম নিবেন। 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++ ওপেন করুন। এবার এতোক্ষন যে ট্যাগ গুলা শিখলাম তার প্রাকটিস করার পালা। চটজলদি নিচের কোডটুকু কপি করে নোটপ্যাডে পেস্ট করুন।


<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  এই টিউটরিয়ালের সুবিদার্থে সাইটটি তৈরী করা হয়েছে, যাতে করে আপনারা সব কিছু খুব সহযেই বুঝতে পারেন। অবাক হওয়ার কিছু নেই, আমি আছি। সাথে থাকুন।

আমি জোবায়ের রহমান আজকের মতো বিদায় নিচ্ছি। এগুলা প্রাকটিস করতে থাকুন আর আমি ব্রেক্টফাস্ট করে আসি।

মনযোগ দিয়ে পড়ার জন্য সবাইকে  ধন্যবাদ। লেখার ভিতরে কোন ভুল হলে ক্ষমা করে দিবেন।

Level 2

আমি জোবায়ের রহমান। Founder, Jobayer Academy, Dhaka। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 9 বছর 8 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 46 টি টিউন ও 28 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 4 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

টিউনস

আরও টিউনস

টিউনারের আরও টিউনস

টিউমেন্টস

Level 0

আমাকে Adove Dreamwaber এর Download link দিলে খুবই উপকার হতো ।

Level 2

Adove Dreamwaber দিয়ে কাজ শেখা আর না শেখা একই কথা। এই সফওয়ার প্রফেশনালদের কাজকে সহজ করে দেয় নতুনদের অলস করে দেয়। আমি যেভাবে কাজগুলা দেখাচ্ছি ঠিক সেভাবে কাজ করে যান, আশা করি সব কিছু খুব সহজ মনে হবে

    Level 2

    @জোবায়ের রহমান: ভাই আপনার মোবাইল নাম্বাটি আমকে দিলে উপকৃত হতাম আমার নাম্বার 01713531965

Level 0

মাথায় কীছূই কাজ করতেছেনা সহযে যদি পারা যায় যানাবেন প্লিজ [email protected]