How to learn HTML coding-2022. How to create HTML coding-2022. HTML coding.-2022
 |
How to learn HTML coding-2022 |
Html
Html Coding মানে Google Page তৈরী করা। Coding করে Google Page এ ছবি,ভিডিও,লেখা,গান সেট করা বা Google Page তৈরী করা।
যা যা লাগবে
একটি New Folder
New Folder এর ভেতরে খালি জায়গায় রাইট বাটনে ক্লিক একটি Text Ducoment File তার পর Rename করে html.com File
একটি Audio Song mp3
একটি vedio Song mp4
3-4 টি jpg Image তার পর jpg image কে Canva দ্বারা PNG Image তৈরী করা,তার পর Png Image কে gif image এ পরিনত করা।
একটি canva website
একটি Notepad++download
প্রথম ধাপ
প্রথমে একটি New Folder খুলতে হবে Desktop Screen এ।
Folder এর বেতরে একটি New text Document খুলতে হবে।
New Folder এর খালি জায়গায় ক্লিক করে Text Ducoment ফাইল নিতে হয়।
Tex Ducoment ফাইলকে Rename করে Html ফাইলে পরিনত করতে হবে।
যেমনঃRename করার আগে থাকবে document.txt
এটাকে Rname করতে হয়।
যেমনঃsharif.html
তাহলে ফাইলের রুপ পরির্বতন হয়ে হবে HTML ফাইল।
Text Ducoment কে html করা
New Folder এর খালি জায়গায় ক্লিক করে Tex Ducoment ফাইল নিতে হয়।Renameকরে লিখতে হয় যেমনঃsharif.html তার পর Html ফাইল হয়ে যায়।
Rename করে txt থেকে html করতে হয়।
New Folder এর বেতরে একটি New Text Document থেকে Html ফাইল একটি Audio Song Mp3 একটি Video Song Mp4 তিন চারটি Jpg/Png Image রাখতে হবে।
মানে যে সকল জিনিসের Html Coding করতে হবে তা তা New Folder এ রাখতে হবে।
Image
Image গুলোকে JPG অবস্থায় Coding করা যায়।
আর Png করে Coding করতে হলে Canva software এর সাহায্য নিতে হবে
দ্বিতীয় ধাপ
Image JPG—-PNG
Canva (Image JPG—-PNG)
E-Mail: alsharifuzzaman1985@gmail.com
Passweard: sharif@#@#02101981
আমার Canva Id Password উপরের দুটো।
canva.com
Canva দ্বারা Jpg Image কে png Image করা হয়।
https://www.canva.com/search/templates?q=website
এতে png ফাইল তোরী হয়।
উপরের লিংক গুলো দ্বারা ক্যানভাতে ওয়েব পেইজের কাভার ফটো বা লগু তৈরী করার জন্য ছবি গুলোকে jpg থেকে Png করতে হবে।
তৃতীয় ধাপ
Image PNG—-GIF
Gifmaker.me (Image PNG—--GIF)
Gifmaker দ্বারা Canva মাধ্যেমে যে সকল Image কে Jpg থেকে Png করা হয়েছে সে গুলো কে,তিন চারটি ছবি কে GIF বা নরাচরা Image তৈরী করা হয়।যা ওয়েব পেইজের কভার ফটো তৈরী করা হয়।
উপরের লিংক গুলোতে gif ফাইল তৈরী করার নিয়ম দেখানো হলো। যা ওয়েব পেইজের কভার ফটোতে দেযা হবে।
চতুর্থ ধাপ
Notepad++download
Tex Document থেকে Html ফাইল করা ফাইলকে Edit with Notepad++ Open করা
HTML ফাইলকে Edit with Notepad++ Open করে Coding শুর করতে হয়।
ফাইলে উপরে কার্সর ক্লিক করে রাইট বাটনে ক্লিক করে যে অপশন গুলো আসে তার মধ্যে Edit with Notepad++ এ অপশন টা থাকে না।
কিন্তু Notepad++download করে ইস্টল করার পর Edit with Notepad++ এই অপশনটি আসে।
তাই HTML ফাইল করার জন্য Notepad++download করতে হয়।
Notepad++download ইনস্টল করতে হয়
Notepad.com
https://notepad-plus-plus.org/downloads/v8.1.9.2/
এটা ডাউনলোড করার পর ইনস্টল করতে হবে।ইনস্টল হওয়ার পর HTML ফাইলে উপরে কার্সর ক্লিক করে রাইট বাটনে ক্লিক করলে অপশন গুলো থেকে Edit with Notepad++ অপশন আসবে।
Edit with noadpad দ্বারা HTML ফাইল Open করে Codin শুরু করতে হয়।
পঞ্চম ধাপঃ মূল কাজ
Start Coding
New Folder থেকে প্রথমেই HTML ফাইলটা Open করতে হবে ফাইলের উপর কার্সর রেখে রাইট বাটনে ক্লিক করে Edit with notepad এ ক্লিক করে Html ফাইলটা Open করতে হবে
তার পর কুডিং শুরু করতে হয় । প্রথমে আমরা মানুষ কে কল্পনা করবো।
প্রথমঃ
শুরুতে মানুষের ব্রেইন
ব্রেইনের কোড হলোঃ
<!doctype html> এই কোড দিয়ে প্রথমে শুরু করতে হয়।
এটার কোন শেষ কোডিং লিখতে হয় না।
save বাটন
save বাটনে ক্লিক করতে হয়।
প্রতিটা Cod লেখার পর Save বাটনে ক্লিক করতে হয়।
তার পর New Folder রে গিয়ে HTML রাইট বাটনে ক্লিক করে Open With Chorom Broswer দ্বারা Open করতে হয়।
এরকম ওয়েব পেইজ তৈরী হবে।
দ্বিতীয়
মানুষের শুরুতে চুল থেকে পা।
যেমনঃ
Opening Coad মাথার চুল হলো <html>
Closing Coad পা হলো </html>
সব সমইয় মনে রাখতে হবে যে কোন বিষইয়ের প্রথমটা শুরু হইয় < — > এভাবে
আর শেষ হয় </— > এভাবে
তৃতীয়
তার পর মাথা শুরু মাথা শেষ।
<had> শুরু কোড
</had> শেষ কোড
চতুর্থ
তার পর বডি শুরু বডি শেষ
<body> শুরুর কোড
</body> শেষ কোড
পঞ্চম
মুখ শুরু মুখ শেষ মানে title শুরু title শেষ তৈরী করা
<title> শুরুর কোড
</title> শেষের কোড
নিচের ছবিতে title এ লেখা আছে zaeen.html
আমি লিখবো Al Sharifuzzaman
এভাবে করতে হয়
<title> alsharifuzzaman </title>
ষষ্ঠ
Body রং করা বা page রং করা/bgcolor/bachground color
Page Color সাদা আছে
Pink Color করা হবে
Pink color এর কোড হলো
<body> bgcolor=”pink” </body>
Page color পিঙ্ক হলো
Marquee/মারকিউ বা চলমান শিরোনাম
Body মধ্যে হবে
<marquee> ৩১ মার্চ পর্যন্ত ৫০% ছাড় </marquee> এতা মারকিউ code
মারকিউকে বড় করা
<h1> মারকিউ বড় করা শুরু কোড
<h2> মারকিউ বড় করা শেষ কোড
মারকিউ রং করা বা Color পরির্বতন করা
<font color=”red”> শুরুর কোড
</font> ফ্রন্ট color শেষের কোড
শিরোনাম
<h1> WELCOM TO ALSHARIFUZZAMAN </h1> শিরোনামের কোড
শিরোনামের Color চ্যাঞ্জ
<font color=”pink”>শিরোনামের Color চ্যাঞ্জ শুরুর কোড
</font>শিরোনামের Color চ্যাঞ্জ শেষের কোড
ইমেজ যুক্ত করা
<img src=”sharif.gif/png/jpg”> ইমেজ যুক্ত করা কোড
Sharif jpg/png/gif এই টুকু New Folder এর ইমেজ ফাইল কে Rename করে Copy করে coding এ pest করতে হয়।
প্যারাগ্রাফ
<P> প্যারাগ্রাফ শুরুর কোড
I AM ALSHARIFUZZAM.I AM A GOOD MAN.I LIKE EIT SOME GOOD FOODE.I LIKE MOVI.
</p> প্যারাগ্রাফ শেষের কোড
লিংক যুক্ত করা
<a> লিংক যুক্তের শুরুর কোড
<a href=”http://”> youtube.com মাঝখানে এইটুকু লিখতে হবে
</a> লিংক যুক্তের শেষের কোড
অডিও যুক্ত করা
<audio controls> অডিও যুক্ত করার শুরুর কোড
<source src=”sharif.mp3”> মাঝখানে এইটুকু লিখতে হবে
</audio> অডিও যুক্ত করার শেষের কোড
ভিডিও যুক্ত করা
<video controls width="300" height="200">> ভিডিও শুরুর কোড
<source src="sharif.mp4">
</video> ভিডিও শেষের কোড
Youtube থেকে ভিডিও যুক্ত করা
Youtube থেকে ভিডি যাও
লিঙ্ক কপি করতে হবে জাস্ট কপি করে পেস্ট করে দেব
যেমনঃ
বাটন যুক্ত করা
ইমেজের নিচে যুক্ত করতে হবে
<button type="button"> ABOUT US </button>
বাটন নিচে যুক্ত করার জন্য
<br> লিখতে হয়
<br> লিখতে হইয় Button কোডের উপরের লাইনে
যেমনঃ
এরকম চারটা বাটন ও তৈরী করা যায়
<button type="button"> CONTRCE US </button>
<button type="button"> PRICE LIST </button>
<button type="button"> MANU LIST </button>
<button type="button"> ABOUT US </button>
যেমনঃ
যে কনো লেখা বা লাইন
<P> প্যারা শুরুর কোড
ALSHARIFUZZAMAN
</P> প্যারা শেষের কোড
<font size="10"> লেখা বড় করার কোড
<font color="red"> লেখা রং করার কোড
<font size="10" color="red"> লেখা বড় করার কোড,লেখা রং করার কোড এক সাথে
</font> ফ্রন্ট শেষের কোড
<b> লেখা বুল্ড করার শুরুর কোড
</b> লেখা বুল্ড করার শেষের কোড
<i> লেখা ইটালিক করার শুরুর কোড
</i> লেখা ইটালিক করার শেষের কোড
<u>লেখা আন্ডার লাইন শুরুর করার কোড
</u>লেখা আন্ডার লাইন শেষ করার কোড
<b> <font size="10" color="red"> <p> ALSHARIFUZZAMAN <p> </font> </b> এক সাথে পুরু কোড
Email-
Blogger Page-
https://alsharifuzzaman.blogspot.com/
Facebook Page-
https://www.facebook.com/sir.teachcom/?ref=pages_you_manage
No comments