প্রতি ...
ফ্রি কোর্স: স্ক্র্যাচ থেকে একটি ব্লগ তৈরি করুন
এটি আপনি যা ভাবেন তার চেয়ে সহজ হতে পারে
নিবন্ধে আসার আগে, আমি কেবল এটিই ভাগ করে নিতে চাই যে আমি একটি পণ্য তৈরি করছি এবং আমি কীভাবে ওয়েব বিকাশকারীদের আরও ভাল সেবা দিতে পারি সে সম্পর্কে কিছু তথ্য সংগ্রহ করতে চাই। আমি একটি সংক্ষিপ্ত প্রশ্নপত্র তৈরি করেছি যা আমি এই নিবন্ধটি পড়ার আগে বা পরে যাচাই করেছিলাম। এটি চেষ্টা করে দেখুন - আপনাকে ধন্যবাদ! এবং এখন ফিরে আমাদের নিয়মিত প্রোগ্রাম।



আপনি যদি আমার মতো হন তবে আপনি ওয়েব এবং এর অপ্রতিরোধ্য পৌঁছাতে আগ্রহী হবেন, তবে এইচটিএমএল এবং সিএসএস শেখার সাথে আগত তথ্যের প্রলাপে আপনিও নিমজ্জিত হবেন। কথাটি হ'ল এই ভাষাগুলি ওয়ার্ড প্রসেসর এবং প্রোগ্রামিং ভাষার মতো অন্যান্য ডোমেন থেকে পৃথক। ওয়েবটি একটি পৃথক বিশ্ব এবং সবচেয়ে সুন্দর নয়।
ইন্টারনেটের কিছুটা অধ্যয়ন করার পরে, আমি আপনাকে উত্সাহিত করার জন্য এখানে আছি, কারণ সামান্য গাইডেন্সের মাধ্যমে এই অঞ্চলগুলি আপনার কল্পনার চেয়ে অনেক সহজ হতে পারে। পড়ুন এবং আমরা স্ক্র্যাচ থেকে একটি সুন্দর ব্লগ তৈরি করব। আমরা সিএসএস গ্রিড, ফ্লেক্সবক্স এবং প্রতিক্রিয়াশীল নকশা সম্পর্কেও শিখব।
লক্ষ্যটি আমি নিজের জন্য যা করেছি তা আপনার পক্ষে করা; প্রথম নীতি ব্যবহার করে এইচটিএমএল এবং সিএসএস শিখুন।

স্ক্র্যাম্বায় একটি বিনামূল্যে এইচটিএমএল / সিএসএস কোর্সও শিখিয়েছি কীভাবে স্ক্র্যাচ থেকে একটি সুন্দর ব্লগ তৈরি করা যায় teaching লগ - ইন করতে এখানে ক্লিক করুন!
স্ক্রিম্বা ডট কম একটি ইন্টারেক্টিভ ফ্রন্ট-এন্ড প্ল্যাটফর্ম যা ওয়েবসাইটগুলি ভিডিওর চেয়ে রেকর্ড এবং ইভেন্ট হিসাবে সম্পাদনা করার অনুমতি দেয়।
এইচটিএমএল কোথা থেকে আসে?
এইচটিএমএল হ'ল প্রথম মেটা বা মার্কআপ ল্যাঙ্গুয়েজ: জিএমএল a সহস্রাব্দ পাঠকরা এখন জেনারেলাইজড মার্কআপ ল্যাঙ্গুয়েজের পক্ষে দাঁড়ানোর জন্য জিএমএলে কাজ করছেন, তবে এটি কিছুই নয়। এটি ছিল চার্লস গোল্ডফার্ব, এডওয়ার্ড মোশার এবং রেমন্ড লরি যিনি আজ আমরা আইবিএম-তে মেটা বা মার্কআপ ল্যাঙ্গুয়েজ হিসাবে জেনেছি তা তৈরি করেছিল। এবং 1996 সালে চার্লস গোল্ডফার্ব লিখেছেন:
“আমি জিএমএলকে এর বর্তমান নাম দিয়েছি যাতে আমাদের আদ্যক্ষর সর্বদা প্রমাণ করে যে তারা কোথা থেকে এসেছে। প্রযুক্তি হস্তান্তরের একটি কুৎসিত সত্যটি হ'ল বিকাশকারীরা প্রথমবারের জন্য গবেষণার জন্য কৃতজ্ঞ এবং দীর্ঘ বিকাশের চক্র শেষে খুব কমই এটিকে লক্ষ্য করেছেন ... "
- চার্লস গোল্ডফার্ব, 1996
জিএমএল পরে মানক করা হয়েছিল এবং এভাবে এসজিএমএলে পরিণত হয়েছিল। তারপরে টিইএম বার্নারস-লি, যিনি সিইআরএন-এ কাজ করেছিলেন, এসএমএল থেকে এমএল ধার করেছিলেন (না, কোনও মেশিন লার্নিং বা হিপস্টাররা যা বলুক না কেন), যেখানে এইচটি হাইপারটেক্সটকে বোঝায় er
ওহ, দুর্দান্ত শব্দ। যতদূর আমি জানি, এটির একটি ইন্টারেক্টিভ রাইটিং পরিবেশে মূলত অ্যাপল-এ কাজ করেছেন বিল অ্যাটকিনসন, হাইপারকার্ড নামে পরিচিত। আরও গভীরতর তদন্তের জন্য, আমি নিম্নলিখিত ভিডিওগুলি জমা দিচ্ছি:


সুতরাং আসুন আবার সংক্ষেপে। এইচটিএমএল কেবল বিশ্বকে জয় করতে পারেনি। আসলে, এইচটিএমএল এর আগে একটি পুরো বিশ্ব ছিল। রাগ আমি জানি আমি ধাক্কায় কাঁপছি - তবে আমার জন্ম হয় নি - তাই পৃথিবী ছিল না।
এবং এইচটিএমএল এর পূর্বসূরীদের কাছে অনেক .ণী। আমাদের সবার বাবা-মায়ের মতো। যাইহোক, আমরা এইভাবে টেক্সট থেকে কোড তৈরি করি। চার এক মিনিটের পাঠে আমি এইচটিএমএল, সিএসএস এবং প্রতিক্রিয়াশীল ডিজাইনের মূল বিষয়গুলি শিখব।
এইচটিএমএল এবং সিএসএস 4 মিনিটে
প্রথম মিনিট: একটি ওয়েবসাইটকে ওয়েব ট্রি হিসাবে আরও ভালভাবে বোঝা যায়
head> body> html>
সমস্ত ওয়েবসাইটই জীবন শুরু করে। যাইহোক, এবং এটি ভয়ানক, কোনও বিষয়বস্তু নেই। তবুও, আমরা এখানে শুরু করি কারণ একটি ওয়েবসাইট কী তা আমাদের প্রথমে বুঝতে হবে। একটি গাছ - একটি upturned গাছ * - একটি ওয়েব ট্রি কল্পনা করুন। এইচটিএমএল উপাদান হ'ল মূল, অন্যদিকে মাথা এবং শরীর আমাদের ওয়েব গাছের প্রথম শাখা:
এইচটিএমএল <- রুট / \ মাথা শরীর <- শাখা
প্রধান উপাদান (বা একই ট্যাগ) আমাদের ওয়েবসাইট সম্পর্কে মেটাডেটা বা তথ্য সরবরাহ করতে ব্যবহৃত হয়। অন্যদিকে, দেহ উপাদানটি আমাদের ওয়েবসাইটের সামগ্রীর জন্য। সিএসএস যেহেতু আমাদের ওয়েবসাইটের স্টাইল, তাই এটি প্রধান উপাদানগুলিতে সংরক্ষণ করা হয়, যেখানে অনুচ্ছেদ, বিড়ালের ভিডিও (≧ ≧ ∇) ইত্যাদি সামগ্রী শরীরের উপাদানগুলিতে সঞ্চিত থাকে।
দ্বিতীয় মিনিট: উপাদান বা ট্যাগ একাধিকবার প্রদর্শিত হয়
মান মান
- প্রথম উপাদানটি একটি স্ব-সমাপনী উপাদান যেখানে আমরা ব্রাউজারকে এমন কিছু বলি যার কোনও মূল্য নেই। এর একটি উদাহরণ এটি এলিমেন্ট যা একটি লাইন ব্রেক সন্নিবেশ করায়।
- দ্বিতীয় উপাদানটি একটি সাধারণ উপাদান যেখানে আমরা একটি উপাদানটির সাথে সম্পর্কিত হিসাবে একটি মান যোগাযোগ করি। উদাহরণস্বরূপ ওহে বিশ্ব! অনুচ্ছেদের উপাদানটির সাথে সম্পর্কিত "হ্যালো, ওয়ার্ল্ড!" মান।
- শেষ অবধি, আমাদের একটি গুণাবলীর সাথে একটি উপাদান রয়েছে। এবং একটি অ্যাট্রিবিউট হ'ল যা মনে হচ্ছে - এটি হ'ল এটি একটি বৈশিষ্ট্য! এটি কোনও উপাদানকে আরও প্রসঙ্গ বা অর্থ দেয়। বৈশিষ্ট্যের একাধিক মান থাকতে পারে এবং উপাদানগুলিতে একাধিক বৈশিষ্ট্য থাকতে পারে। বৈশিষ্ট্য অনুমান।
মান element>
এখন - আমার এটি উল্লেখ করতে হবে - আসুন আমরা আমাদের এইচটিএমএল উপাদানগুলির নাম তৈরি করি না। আমরা তাদের 100 টিরও বেশি পূর্বনির্ধারিত আইটেমের তালিকা থেকে ধার করি। এটি অবশ্যই কিছু জিনিস সহজ করে তোলে এবং কিছু কিছু শক্ত করে, মুখস্ত করার মতো!
তৃতীয় মিনিট: এইচটিএমএল এবং সিএসএস কীভাবে যোগাযোগ করে
নির্বাচক {সম্পত্তি: মান; }
style> head>মান element> body> html>
এর! DOCTYPE এইচটিএমএল নির্দেশ করে যে আমরা HTML5 লিখছি। এটি অন্যান্য সমস্ত এইচটিএমএল সংস্করণগুলিতেও প্রযোজ্য যা আমরা এড়াতে চাই। চারসেট এবং ইউটিএফ -8 মানটির সাথে স্ব-সমাপনী মেটা উপাদানটি দেওয়া হয়েছে, আমাদের পাঠ্যটি ইউনিকোডে এনকোড করা আছে। ইউটিএফ -8 এর অর্থ ইউনিকোড ট্রান্সফর্মেশন ফর্ম্যাট… 8. এখন আমরা এ লিখতে পারি! একবার আমার বাবা সিদ্ধান্ত নিলেন কেবল ইমোজিগুলি লিখবেন।
¯ \ _ (ツ) _ / ¯
আমরা একটি স্টাইল উপাদান যুক্ত করেছি যা সিএসএসের জন্য উপলব্ধ প্রবেশপথগুলির মধ্যে একটি। যেখানে নির্বাচক একটি উপাদান নির্বাচন করে এবং তার সাথে সম্পর্কিত মান সহ একটি সম্পত্তি প্রয়োগ করে। আমরা পরের মিনিটে এটি এবং আরও তদন্ত করব।
আবার, আমাদের উল্লেখ করতে হবে যে আমরা আমাদের সিএসএস বৈশিষ্ট্যগুলির নাম তৈরি করছি না। আমরা কয়েকশো পূর্বনির্ধারিত বৈশিষ্ট্যের তালিকা থেকে এগুলি ধার করি। অবশ্যই এটি কিছু জিনিসকে সহজ করে তোলে এবং কিছু অনেক বেশি কঠিন করে তোলে যেমন ____________!
চতুর্থ মিনিট: হ্যালো, বিশ্ব!
পি {রঙ: সবুজ; }
@ মিডিয়া (সর্বাধিক প্রস্থ: 8.5 ইন) {পি {রঙ: নীল; ;} @ মিডিয়া (সর্বাধিক প্রস্থ: 5.0 ইন) {পি {রঙ: লাল; }}
style> head>ওহে বিশ্ব! p> body> html>
আমাদের ওয়েবসাইট আর ভয়ঙ্কর হয় না! আমাদের যা আছে তা হ্যালো ওয়ার্ল্ড! সবুজ লেখায়। আমাদের ওয়েবসাইটের প্রস্থটি যদি 8.5 "বা তার চেয়ে কম আকারে পরিবর্তন করা হয় তবে এটি নীল রঙে দেখানো হবে এবং 5" বা তার চেয়ে কম হলে এটি লাল হবে। এই ক্ষেত্রে আমরা আমাদের ওয়েবসাইটের প্রস্থের মতো নির্দিষ্ট পরিস্থিতিতে সিএসএসকে ওভাররাইড করতে মিডিয়া প্রশ্নগুলি ব্যবহার করেছি।
সিএসএস রিসেট এবং ডিবাগার কী?

আমাদের ডিজাইনটি সামঞ্জস্যপূর্ণ এবং অসঙ্গতিগুলি প্রকাশ করতে একটি ডিবাগার নিশ্চিত করতে আমরা একটি রিসেট ব্যবহার করি।
ব্রাউজারগুলির মতামত রয়েছে এবং আমাদের অক্ষম করতে চাই এমন কিছু সিএসএস বৈশিষ্ট্য আমাদের জন্য সেট করতে আমাদের রিসেট করা দরকার। সিএসএসের সাধারণ রিসেট রয়েছে তবে আমরা নিজস্ব তৈরি করব। সহজেই আমাদের ওয়েবসাইটের নকশা পরিচালনা করতে আমাদের ডিবাগারটি দরকার।
আমাদের রিসেট এবং ডিবাগার রাখতে আমরা স্টাইল নামের একটি ফোল্ডার তৈরি করতে পারি:
স্টাইলস / রিসেট.সিএস ডিবাগ.সিএস
এবং আমাদের নতুন সিএসএস ফাইলগুলিকে আমাদের সূচিপত্রের সাথে সংযুক্ত করতে html, আমরা লিঙ্ক উপাদান যুক্ত করছি:
...