HTML কোডিং – Shuvo The Coder https://shuvothecoder.com Code Your Life Wed, 04 Dec 2019 16:20:19 +0000 en-US hourly 1 https://wordpress.org/?v=5.4.16 https://shuvothecoder.com/wp-content/uploads/2019/03/cropped-shuvothecoder-32x32.png HTML কোডিং – Shuvo The Coder https://shuvothecoder.com 32 32 HTML টেবিল কিভাবে কি ? https://shuvothecoder.com/html-%e0%a6%9f%e0%a7%87%e0%a6%ac%e0%a6%bf%e0%a6%b2-%e0%a6%95%e0%a6%bf%e0%a6%ad%e0%a6%be%e0%a6%ac%e0%a7%87-%e0%a6%95%e0%a6%bf/ https://shuvothecoder.com/html-%e0%a6%9f%e0%a7%87%e0%a6%ac%e0%a6%bf%e0%a6%b2-%e0%a6%95%e0%a6%bf%e0%a6%ad%e0%a6%be%e0%a6%ac%e0%a7%87-%e0%a6%95%e0%a6%bf/#respond Thu, 13 Jun 2019 08:21:52 +0000 https://shuvothecoder.com/?p=186 আজকে আমরা তৈরী করবো একটা ছোট্ট টেবিল। HTML টেবিল তৈরী করতে হলে আমাদের প্রয়োজন হবে তিনটা ট্যাগ। এগুলো হলো <table></table>, <tr></tr>, <td></td>. আরো টেবিল ট্যাগ আছে। কিন্তু এগুলো দিয়েই আমাদের...

The post HTML টেবিল কিভাবে কি ? appeared first on Shuvo The Coder.

]]> আজকে আমরা তৈরী করবো একটা ছোট্ট টেবিল। HTML টেবিল তৈরী করতে হলে আমাদের প্রয়োজন হবে তিনটা ট্যাগ।

এগুলো হলো <table></table>, <tr></tr>, <td></td>. আরো টেবিল ট্যাগ আছে। কিন্তু এগুলো দিয়েই আমাদের কাজ চলবে। আর আজকে আমরা কিছু স্টাইল ও শিখবো। তাহলে চলো শুরু করা যাক।

প্রথমে একটি HTML ফাইল তৈরী করে নাও। কিভাবে করতে হবে? এই পোস্টটি দেখো: স্মার্টফোনে ওয়েব ডিজাইন

HTML টেবিল

উপরের পোস্ট টি ফলো করে ফাইল তৈরী করে নাও। এখন আমাদের টেবিল তৈরির কাজ শুরু। তোমাদের কোডটি দেখো নিচের কোডের মতো দেখা যায় কিনা। 

<!DOCTYPE html>
<html>
	<head>
		<title>Page Title</title>
	</head>
	<body>
		<h1>My First Heading</h1>
		<p>My first paragraph.</p>
	</body>
</html>

এখন <body> ট্যাগ এর মধ্যে আমাদের টেবিলটি তৈরী করবো। 

<!DOCTYPE html>
<html>
	<head>
		<title>Page Title</title>
	</head>
	<body>
		<table></table>
	</body>
</html>

এখন দেখো টেবিল ট্যাগ দিয়েছি। এটি ডাবল ট্যাগ তাই শুরু ও শেষ আছে। আমাদের টেবিল তৈরী করতে আর কি কি প্রয়োজন ? সারি ও কলাম। তাই না?

সারি তৈরী করতে আমরা ব্যবহার করবো <tr></tr> এর ভেতরে যা থাকবে সব একটা সারি তে দেখা যাবে। tr মানে হলো Table Row. তাহলে চলো কোডটি দেখি। 

<!DOCTYPE html>
<html>
	<head>
		<title>Page Title</title>
	</head>
	<body>
		<table>
      			<tr></tr>
		</table>
	</body>
</html>

দেখো টেবিল ট্যাগ শুরু ও শেষ এর ভেতরে আছে <tr></tr> ট্যাগ। মানে হলো টেবিল এর মধ্যে টেবিলের সারি। এখন আমরা তৈরী করবো কলাম।

কলাম হবে টেবিল এর তথ্য দিয়ে। অর্থাৎ আমরা কি তথ্য রাখতে চাই তা সাজানো হোম কলাম আকারে। তাই আমরা ব্যবহার করবো <td></td> মানে হলো Table Data.

td মানে হলো Table Data.

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

আমরা এতক্ষন এ গঠন রেডি করেছি। এখন যা তথ্য দিবো তা দেখা যাবে। তাহলে চলো আমরা এক সারি তে তিনটি ফুল এর নাম রাখি। তিনটি নাম আমরা তিনটি কলাম এ রাখবো। 

<!DOCTYPE html>
<html>
	<head>
		<title>Page Title</title>
	</head>
	<body>
		<table>
			<tr>
				<td>Rose</td>
				<td>Lily</td>
				<td>Sun Flower</td>
			</tr>
		</table>
	</body>
</html>

দেখো ডাটা গুলো একই বরাবর থেকে শুরু হয়েছে। কিন্তু tr এর থেকে একটু ডান দিকে সরে গিয়েছে। এটা হলো কোড লেখার আদর্শ পদ্ধতি।

কোনো একটা ট্যাগ এর ভেতরে আরেকটা ট্যাগ বা কিছু থাকলে তা “এক ট্যাব” বা “চারটা স্পেস” এর সমান ডান টিক থেকে শুরু হবে। তুমি চাইলে দুইটা স্পেস ও ব্যবহার করতে পারো।

“এক ট্যাব” বা “চারটা স্পেস”

কম্পিউটার কিবোর্ডে ট্যাব বাটন থাকে। ফোনে না ও থাকতে পারে তাই তুমি স্পেস ব্যবহার করতে পারো। চলো দেখি কি দেখা যায় ব্রাউজারে।

তুমি ফোনে কোড করে থাকলে প্রিভিউ তে ক্লিক করো। আর কম্পিউটারে থাকলে ডাবল ক্লিক করে মজিলা বা ক্রোম এ ওপেন করো।

HTML Table
আমার এখানে এইরকম আসছে। তোমার কি অবস্থা? কমেন্টে জানাও

CSS এর ব্যবহার

দেখো এইখানে কিন্তু বোঝা যাচ্ছে না কোন কলাম কতটুকু জায়গা নিয়েছে।

চলো একটু বর্ডার দিয়ে দেখি। বর্ডার দেয়ার জন্য আমরা internal CSS ব্যবহার করবো।

CSS নিয়ে পরে একদিন বিস্তারিত আলোচনা করবো। এখন একটু বেসিক দেখো।

ইন্টারনাল CSS লিখতে হলে head ট্যাগ এর মধ্যে style ট্যাগ লিখতে হবে। style ট্যাগ ও ডাবল ট্যাগ। এর মধ্যে আমরা CSS লিখবো। চলো দেখি। 

<!DOCTYPE html>
<html>
	<head>
		<title>Page Title</title>
		<style>
			td{
				border:1px solid black;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td>Rose</td>
				<td>Lily</td>
				<td>Sun Flower</td>
			</tr>
		</table>
	</body>
</html>

দেখো style এর মধ্যে আমরা CSS লিখেছি। CSS লিখার গঠন হলো selector { property : value; }

CSS লিখার গঠন হলো selector { property : value; }

আমাদের td তে বর্ডার প্রয়োজন। তাই সিলেক্টর td .

আর বর্ডার এর প্রপার্টি হলো border . এবং ভ্যালু আমরা দিয়েছি তিনটা। কারণ bordar প্রপার্টি তিনটা ভ্যালু নিতে পারে।

এগুলো হলো বর্ডার এর সাইজ স্টাইল কালার ।

বর্ডার এর সাইজ স্টাইল কালার

আমি দিয়েছি 1px মানে হলো আমি ১ পিক্সেল মোটা বর্ডার চাই। পিক্সেল কি জানো না? গুগলে সার্চ দাও।

আচ্ছা এর পর দিয়েছি solid মানে সম্পূর্ণ বর্ডার একটা দাগ এর হবে।

তুমি চাইলে dotted, solid, double, dashed ও ব্যাবহার করতে পারো।

এর পর হলো কালার। তুমি কি কালার এর বর্ডার চাও তা এখানে দিবে। আমি কালো দিয়েছি।

তুমি চাইলে কালার এর হেক্স কোড ও দিতে পারো। কালো এর হেক্স কোড হলো #000

এখন দেখি আমাদের আউটপুট কি আসলো। তোমাদের টা কমেন্টে জানাও।

দেখো প্রত্যেকটা td এর পাশে বর্ডার এসেছে।

এখন চলো আমরা টেবিলেও বর্ডার দিয়ে দেখি কেমন দেখা যায়। কোডটি লিখে ফেলো। 

<!DOCTYPE html>
<html>
	<head>
		<title>Page Title</title>
		<style>
			table, td{
				border:1px solid black;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td>Rose</td>
				<td>Lily</td>
				<td>Sun Flower</td>
			</tr>
		</table>
	</body>
</html>

দেখো শুধু td এর সামনে table লিখে কমা দিয়েছি। কাজ শেষ। তাহলে টেবিল আর td একই বর্ডার পাবে।

দেখেছো? টেবিল এর চারপাশে একটা বর্ডার এসেছে।

এখন চলো আমরা আরেকটা সারি বাড়াই। কিভাবে? আমরা আমাদের আগের কোড থেকে <tr> শুরু থেকে </tr > শেষ পর্যন্ত কপি করে পেস্ট করবো।

তুমি চাইলে হাতে ও লিখতে পারো। কি দরকার শুধু শুধু কষ্ট করার? দেখো কোডটি। 

<!DOCTYPE html>
<html>
	<head>
		<title>Page Title</title>
		<style>
			table, td{
				border:1px solid black;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td>Rose</td>
				<td>Lily</td>
				<td>Sun Flower</td>
			</tr>
			<tr>
				<td>Rose</td>
				<td>Lily</td>
				<td>Sun Flower</td>
			</tr>
		</table>
	</body>
</html>

দেখো tr গুলো কিন্তু একই বরাবর কারণ তারা একই ট্যাগ টেবিল এর মধ্যে।

HTML টেবিল

এখন চলো ফুল এর নাম গুলো পরিবর্তন করে ফেলি। তাহলে নিচের মতো কোড হবে। 

<!DOCTYPE html>
<html>
	<head>
		<title>Page Title</title>
		<style>
			table, td{
				border:1px solid black;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td>Rose</td>
				<td>Lily</td>
				<td>Sun Flower</td>
			</tr>
			<tr>
				<td>Shuvo </td>
				<td>The </td>
				<td>Coder</td>
			</tr>
		</table>
	</body>
</html>

চলো দেখি কেমন দেখা যায়।

দেখো কলাম গুলো সমান জায়গা নিয়েছে। তাহলে আমরা কি বুঝলাম? কলাম সব সময় সমান জায়গা নেয়।

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

তাহলে আজকে আমরা শিখলাম কিভাবে টেবিল তৈরী করতে হয়। পরবর্তীতে দেখবো কিভাবে আরো একটু এডভান্স কাজ করা যায় যেমন দুইটি সেল কে এক করা , কালার করা ইত্যাদি।

The post HTML টেবিল কিভাবে কি ? appeared first on Shuvo The Coder.

]]> https://shuvothecoder.com/html-%e0%a6%9f%e0%a7%87%e0%a6%ac%e0%a6%bf%e0%a6%b2-%e0%a6%95%e0%a6%bf%e0%a6%ad%e0%a6%be%e0%a6%ac%e0%a7%87-%e0%a6%95%e0%a6%bf/feed/ 0 স্মার্টফোনে ওয়েব ডিজাইন https://shuvothecoder.com/webdesign-in-smartphone/ https://shuvothecoder.com/webdesign-in-smartphone/#comments Thu, 14 Mar 2019 08:42:58 +0000 https://shuvothecoder.com/?p=115 অনেকের স্মার্টফোন আছে কিন্তু কম্পিউটার নেই। তাই অভিযোগ, কম্পিউটার নেই তাই ওয়েব ডিজাইন করতে পারছি না। আসলে কোনো কিছু খুব সহজে পাওয়া যায় না। অনেকের কম্পিউটার আছে কিন্তু সে শুধু...

The post স্মার্টফোনে ওয়েব ডিজাইন appeared first on Shuvo The Coder.

]]> অনেকের স্মার্টফোন আছে কিন্তু কম্পিউটার নেই। তাই অভিযোগ, কম্পিউটার নেই তাই ওয়েব ডিজাইন করতে পারছি না। আসলে কোনো কিছু খুব সহজে পাওয়া যায় না। অনেকের কম্পিউটার আছে কিন্তু সে শুধু গান শুনে বা মুভি দেখে সময় কাটায়। কিন্তু তুমি যদি চাও মোবাইলেই ওয়েব ডিজাইন প্র্যাক্টিস করতে পারো। চলো শুরু করা যাক।

প্রথমে এই এপটি ডাউনলোড করে নাও : anWriter free HTML editor

এপটির সাইজ মাত্র ২ মেগাবাইট।

স্মার্টফোনে ওয়েব ডিজাইন

এখন এপটি চালু করো নিচের কোডটি লিখে ফেলো,

<!DOCTYPE html>
<html>
	<head>
		<title>Page Title</title>
	</head>
	<body>
		<h1>My First Heading</h1>
		<p>My first paragraph.</p>
	</body>
</html>

লেখার পর আশা করি তোমার মোবাইলের স্ক্রিন ও নিচের ছবির মতো হবে।

কোড লিখার পর

এখন প্লে বাটনে চাপ দাও। ম্যাজিক!!!

এইরকম প্রিভিউ আসবে

তুমি পেরেছো প্রথম HTML কোড লিখতে। এখন চলো দেখি এই কোড এর কোন পার্ট কি কাজ করে।

<!DOCTYPE html > এই পার্টটি দিয়ে ব্রাউজারকে বোঝানো হয়েছে যে এটি একটি html ফাইল। এই লেখাটি দেখলেই ব্রাউজার বুঝে নেয় যে এটি HTML5 ভার্সন।

ট্যাগ: ট্যাগ হলো html এ ব্যবহৃত কিছু শব্দ যা ব্রাউজার বুঝতে পারে ও তা অনুযায়ী করতে পারে।

<> এটি ব্যবহৃত হয় কোনো ট্যাগ এর শুরু বোঝাতে। এবং </> এটি ব্যবহৃত হয় কোনো ট্যাগ এর শেষ বোঝাতে। যেসব ট্যাগ এর শুরু ও শেষ আছে তাদেরকে ডাবল ট্যাগ বলে। যেমন : <html></html>,<body></body> এইগুলো ডাবল ট্যাগ।

আর যেসব ট্যাগ এর শেষ নেই তারা সিঙ্গেল ট্যাগ। যেমন: <img/> তবে সিঙ্গেল ট্যাগ এর স্ল্যাশ টা শেষে থাকে।

একটি html ফাইলের সব কোড html ট্যাগ এর মধ্যে থাকবে।

html ট্যাগ এর ভেতরে থাকবে দুই মূল ট্যাগ head এবং body . হেড ট্যাগ এর ভেতরে থাকে কিছু গুরুত্বপূর্ণ তথ্য যা মূলত ব্যবহারকারীর সরাসরি কাজে আসে না। এবং বডি এর ভেতরের তথ্য সরাসরি ব্রাউজার এ দেখা যায়।

h1, h2, h3, h4, h5, h6 এগুলো হলো হেডার ট্যাগ। body এর মধ্যে কোনো লেখা কে আকারে বড় করতে এটি ব্যবহৃত হয়। এটি SEO অপটিমাইজেশনে ও কাজ করে।

p হলো প্যারাগ্রাফ ট্যাগ। এর মাঝে কোনো প্যারাগ্রাফ লিখতে হয় বা অনেক লেখা থাকলে এইখানে লিখতে হয়। আমরা আস্তে আস্তে আরো ট্যাগ সম্পর্কে জানবো।

পরের পোস্টে আরো জানবো ট্যাগ সম্পর্কে। আজকে এই পর্যন্তই। ধন্যবাদ।

দেখো স্মার্টফোনে প্রোগ্রামিং কিভাবে করবো?

The post স্মার্টফোনে ওয়েব ডিজাইন appeared first on Shuvo The Coder.

]]> https://shuvothecoder.com/webdesign-in-smartphone/feed/ 3 স্মার্টফোনে প্রোগ্রামিং কিভাবে করবো? https://shuvothecoder.com/programming-in-smartphone/ https://shuvothecoder.com/programming-in-smartphone/#comments Mon, 25 Feb 2019 07:03:13 +0000 https://shuvothecoder.com/?p=39 তোমার মাথায় কি এই প্রশ্ন ঘুরছে? যে আমার কম্পিউটার নেই কিভাবে প্রোগামিং শিখবো? তাহলে এই পোস্ট টি তোমার জন্য। স্মার্টফোনে প্রোগ্রামিং Shuvo The Coder আজকে আমি আলোচনা করবো একটি এন্ড্রয়েড...

The post স্মার্টফোনে প্রোগ্রামিং কিভাবে করবো? appeared first on Shuvo The Coder.

]]> তোমার মাথায় কি এই প্রশ্ন ঘুরছে? যে আমার কম্পিউটার নেই কিভাবে প্রোগামিং শিখবো? তাহলে এই পোস্ট টি তোমার জন্য।

স্মার্টফোনে প্রোগ্রামিং

Shuvo The Coder

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

এপটির নাম হলো CppDroid তবে C4DROID লিখে প্লেস্টোরে সার্চ দিলেও পাওয়া যাবে। ইন্সটল করে নেওয়া তো একদম ই সহজ। জাস্ট ইনস্টল এ ক্লিক করো। ?

এখন এপটি প্রথমবার চালু করার সময় একটু সময় লাগবে। কিছু লাইব্রেরি ফাইল ডাউনলোড করবে। একটু পরেই কোড লেখার ইন্টারফেস চলে আসবে। এখন প্রথমে চলো একটি টেস্ট প্রোগ্রাম লিখে ফেলি। কেমন কাজ করে একটু পরীক্ষা আরকি। নিচের কোডটা ঝটপট লিখে ফেলো।

#include <stdio.h>

int main(){
printf("Hello World!");
}
Code is written

এখন সেভ করো কোনো একটা ফোল্ডারে। যেকোনো একটা নাম দিয়ে। ধরো আমরা নাম দিলাম first.c । এইখানে ফার্স্ট হলো নাম আর ডট সি হলো ফাইল টাইপ। সি দ্বারা বোঝা যাচ্ছে এটি সি প্রোগ্রামিং এর কোনো ফাইল। এখন বিল্ড করো। দেখো সেভ আর প্লে বাটন এর মাঝে একটা বাটন আছে। বিদ্যুৎ এর আইকন এর মতো। এইটা হলো বিল্ড বাটন CppDroid এপ এ। কম্পিউটারে সি প্রোগ্রামিং করলেও তোমাকে প্রথমে প্রোগ্রাম বিল্ড করে নিতে হবে। তারপর পোগ্রাম রান করতে হবে। অনেক ক্ষেত্রে বিল্ড এন্ড রান নাম এ একটা বাটন থাকতে পারে। এখন রান বা প্লে বাটন এ প্রেস করো। নিচের মতো স্ক্রিন আসবে।

Hello World!

কংগ্রাচুলেশন্স তুমি প্রোগ্রামার হয়ে গেছো।? আর যদি প্রোগ্রাম রান না করে থাকে তাহলে তোমার প্রোগ্রাম এর কোড এর স্ক্রিনশট অথবা কপি আমাদের পেজ এ পাঠাও। আমরা হেল্প করার চেষ্টা করবো।

আমাদের পেজ fb.me/ShuvoTheCoder

আমাদের ইউটিউব চ্যানেল Shuvo The Coder

The post স্মার্টফোনে প্রোগ্রামিং কিভাবে করবো? appeared first on Shuvo The Coder.

]]> https://shuvothecoder.com/programming-in-smartphone/feed/ 14