[সঙ্গীত বাজাচ্ছি] 

ডেভিড জে Malan: এটি CS50 এবং এই সপ্তাহে 7 শুরু হয়. তাই ফিরে স্বাগত জানাই. আর আপনি প্রত্যাহার হতে পারে সমস্যা, চার সেট একটি মেথর মৃগয়া একটি বিট ছিল কিছু অবিশাস্য পুরস্কার যদ্দ্বারা জন্য আপনি ফটো পুনরুদ্ধার পর উভয় এখানে এবং নিউ হ্যাভেন কর্মীরা, আপনি হিসাবে অনেক খুঁজে নিয়ে প্রশ্ন তোলা হয়েছে আপনি পারা হিসাবে যারা কম্পিউটার বিজ্ঞানীরা. এবং আমরা একটি সম্পূর্ণ পেয়েছেন জমা গুচ্ছ. আমি কয়েক ভাগ চাই আজ এখানে আপনার সাথে. 

এবং আমরা অনলাইন এই সব পোস্ট করব. কিন্তু বিশেষ করে, আমি চেয়েছিলাম ভাল এক চাচ্ছি আপনার দৃষ্টি আকর্ষণ, স্যাম তাদের বেশ কয়েক ছিল সাধারণত এই মত অঙ্গবিন্যাস. কিন্তু এটা হিসাবে যে মনে হচ্ছে, এই সকালে, বিজয়ী একটি নির্দিষ্ট কারও সাথে কেন নামে ছিল কর্মীদের 24 ক্যামেরা বন্দী আপনি মধ্যে নিতে হলে আরও একটি অথবা কয়েকটি ছবির মধ্যে একাধিক কর্মী অ্যাকাউন্ট. এখানে অঙ্কিত পরের কেন হয় নিউ হ্যাভেন মেরি. 

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

কিন্তু কেন আমাকে আপনি আশ্বস্ত করতে চাই তিনি একটি খুব ভাল ফটোগ্রাফার যে, তিনি একজন পেশাদার লাগে না blurry হয় না যে ফটো, ফোকাস ভাল হয়, এবং যে তিনি আমাদের নিজস্ব কর্মীদের বেশ কয়েক নেন. বরং শুধুমাত্র বেশী স্বীকার আমরা কি চাই তা কেন, তালিকা মধ্য দিয়ে যেতে হয় জমা যারা প্রকৃত ছাত্র. এবং এটা নিয়ে যে ল্যান্স সক্রিয় আউট এই সকালে এর 15 ফটো আমাদের বিজয়ী. 

আর, ল্যান্স Colton সঙ্গে হয় এখানে অঙ্কিত নিজেকে নিয়ে Skaz, এবং স্যাম সঙ্গে সঙ্গে. কিন্তু তারপর এটি সক্রিয় যে হিসাবে 11:46 AM না, অল্পমাত্র বিট আগে তাই, আমি আমার ইমেইল ফিরে গিয়ে পাওয়া আমরা এখনো আরও জমা ছিল যে বনি নামক একটি ছাত্র দ্বারা যার ইমেইল শুধুমাত্র এই বলেন. থাকা যাচ্ছে না, আমি আছি বর্গ সময় এই করছেন. এবং তারপর শুধুমাত্র সংযুক্ত রইল 14 ফটো, ল্যান্স এর 15 এর লাজুক এক. 

কিন্তু বনি এর ফটোতে, এটি সক্রিয় আউট একাধিক কর্মী সদস্যদের, স্যাম ছিল তাদের মধ্যে, তাই আমরা যদি আমরা চিন্তা কি কি হবে এই উভয় স্বীকার হয়. তাই ড্রপবক্স পেয়ে ছাড়াও স্থান যে সবাই কে অংশ পায়, এই দুটি বিভাগে এছাড়াও করবে তাদের জন্য একটি চমৎকার catered লাঞ্চ পাবেন এবং তাদের অধ্যায় এই আসছে সপ্তাহে তোমার. আর তাই আপনি আমাদের কাছ থেকে শুনতে হবে, যে সম্পর্কে বর্শা এবং বনি,. তাদের এত বড় অভিনন্দন. এখন, আপনি যাদের যারা would লাঞ্চ মত আরো সাধারণভাবে কেমব্রিজের যে CS50 লাঞ্চ জানেন এবং নিউ হ্যাভেন এই শুক্রবার. CS50 এর ওয়েবসাইট স্ল্যাশ উত্তর দিতে যান. আর এখন সেমিনার উপর একটি শব্দ. আরো curricularly. সুতরাং আমরা কাছাকাছি করছি সেমিস্টারে পয়েন্ট আপনি শুরু করা উচিত যেখানে চূড়ান্ত প্রকল্প সম্পর্কে চিন্তা. এবং বাস্তবিকই, শুধুমাত্র একটি বিট, হবে প্রাক প্রস্তাব কারণে হতে তথাকথিত. সুতরাং পূর্ব প্রস্তাব বোঝানো হয় হতে বেশ কম প্রভাব এবং সত্যিই জন্য শুধু একটি সুযোগ আপনি একটি সংক্ষিপ্ত নোট রচনা করতে আপনার অধ্যাপনা সহকর্মী অবহিত করতে তাকে বা তার যদি আপনি চিন্তা করছি কি আপনার চূড়ান্ত প্রকল্পের জন্য কাজ করতে চাইতে পারেন. 

এখন, অনেক ছাত্র শেষ পর্যন্ত করছেন ওয়েব চূড়ান্ত প্রকল্প ভিত্তিক. এবং অবশ্যই, আমরা ঠিক করছি এই এখন গত সপ্তাহে এবং ওয়েব প্রোগ্রামিং মধ্যে ডাইভিং অতিক্রম. তাই আপনি যদি চিন্তা করতে না একেবারে কোন ধারণা কিভাবে আছে আপনি ধারণা গড়ে তুলতে হবে আপনি আপনার মনের মধ্যে থাকতে পারে. এই সত্যিই শুধু একটি অত্যাচার ফাংশন আপনি চিন্তা এবং কথা বলা পেতে এটা সম্পর্কে আপনার TF সঙ্গে. কিন্তু যে আপনাকে সাহায্য, এবং চরমভাবে চূড়ান্ত প্রকল্পের সঙ্গে, এবং CS50 একটি ঐতিহ্য আছে জানি এর সেমিনার প্রস্তাব. 

আর এই হাত, দেখো, ঐচ্ছিক বা সুযোগ উপর ভিত্তি করে বক্তৃতা যে বিষয় সম্পর্কে আরও জানতে অবশ্যই এর একটি সামান্য সহায়ক পাঠ্যক্রম কিন্তু তবু বিস্ময়কর উপাদান চূড়ান্ত প্রকল্প চালাতে. আর তাই এই যে তালিকা এখানে নিউ হ্যাভেন মধ্যে CS50 কর্মীদের জন্য নিয়ে আসা হয়েছে প্রয়োজন iOS সম্পর্কে এই বছর প্রোগ্রামিং, অ্যানড্রইড প্রোগ্রামিং, গেম ডেভেলপমেন্ট, আরো সরঞ্জামের এবং কাঁদি এবং প্রত্যেক ও কৌশল. 

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

আর এই ছিল যে বার্তা মত ছিল ভার্চুয়াল খাম ভেতরে, প্রত্যাহার, আমরা রাউটার রাউটার থেকে পাস করে একটি ওয়েব ব্রাউজার এবং একটি ওয়েব মধ্যে রাউটার সার্ভার. এবং যে বার্তা লাগছিল একটি এই মত সামান্য কিছু. এই আরো রহস্যময় বার্তা ছিল যে একটি খাম ভেতরে আসলে ছিল যার কাগজ এক টুকরা উপর লেখা প্রথম লাইন আক্ষরিক, স্ল্যাশ পেতে বলছেন. 

আর মাত্র একটি সদ্বিবেচনা চেক হিসাবে, স্ল্যাশ কি বোঝান হয়নি? স্ল্যাশ যখন এর অর্থ কি একটি ওয়েবসাইট অনুরোধ? আপনি সব সময় এটা. সর্বাধিক কোনো সময় আপনি একটি ওয়েবসাইট দেখার জন্য, আপনি আসলে একটি ফাইলের নাম টাইপ না. আপনি সম্ভবত শুধু Facebook.com যান , gmail.com, বা মত লিখতে. এবং স্ল্যাশ কি প্রতিনিধিত্ব করে? কি ফাইল? বিশেষভাবে বা কি পাতা? 

সূচক, হ্যা. ডিফল্ট পাতা সুতরাং. আপনি একটি ফাইল উল্লেখ না থাকলে তাই আমরা দেখতে শুরু করব হিসাবে নাম, আপনি আসলে শুধু অনুরোধ করছি আমার ফেসবুক এর ডিফল্ট পাতা দিতে অথবা আমার ইনবক্সে দিতে বা দিতে আমার খবর ডিফল্ট পাতা সিএনএন এর ওয়েবসাইট অথবা চাই. এবং একটি সার্ভার তারপর সাড়া কিছু যে বার্তা এই মত, আমি হ্যাঁ বলার অপেক্ষা রাখে না HTTP- র সংস্করণ 1.1 বলতে. 

একটি অবস্থা যা 200, আমরা খুব কমই যে মানুষের কোড এটা ভালো কারণ কি দেখতে. এটা ঠিক আছে, অনুরোধ মানে কারণ প্রাপ্তি এবং সঠিকভাবে পরিচালনা করা হয়. এবং কনটেন্ট টাইপ দৃশ্যত প্রতিক্রিয়ায় বেশ প্রায়ই, তবে সব সময় নয়, পাঠ্য. এবং বিশেষভাবে, এইচটিএমএল. এবং যে আসলে কী যেখানে আমরা আজ তাকান. 

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

এবং আমি এগিয়ে যান এবং চাচ্ছি যেতে চলেছি আমি ক্লিক বা ডান নিয়ন্ত্রণ করা যাচ্ছে না একটি ওয়েব পেজে কোন জায়গায় ক্লিক করুন. আর আমি উপাদান পরিদর্শন যেতে যাচ্ছি. আর আমি খামচি যাচ্ছি আমার এখানে পর্দা অল্পমাত্র বিট. আমাকে নীচে এই স্থানান্তর. তাই এই কি বলা হয় ক্রোম এর ইন্সপেক্টর. সুতরাং এই একটি ডিবাগিং ভালো হয় টুল ক্রোম পাতাটা. 

আপনি সমস্ত ইতিমধ্যে এই আছে আপনি Chrome ব্যবহার করছি না. এবং এটা আপনি কি ঘটছে তা দেখতে পারবেন কিছু ওয়েব পৃষ্ঠার ফণা নীচে. সুতরাং আসুন আসলে একটি নিতে দিন নিম্নরূপঃ এই তাকান. এই পথ আরো বৈশিষ্ট্য আছে এবং আমরা আজ যত্নশীল. কিন্তু এখানে উপর এই ট্যাব আছে. উপাদানসমূহ, নেটওয়ার্ক, সূত্র, টাইমলাইনে, এবং অন্যান্য কিছু উপাদান. আমি উপর ক্লিক করুন যাচ্ছি একটি মুহূর্ত জন্য নেটওয়ার্ক. 

এবং এটি একটি সামান্য অপ্রতিরোধ্য এখানে প্রথম নজরে. কিন্তু আমি কি করতে যাচ্ছি দিন হয় আমার জন্য এটি একটি সামান্য বিট সহজ করে. আমি চালু করা যাচ্ছে না এটি লাল যাতে আলো রেকর্ডিং. আর আমি লগ সংরক্ষণ বলতে যাচ্ছি. এবং শুধু এই একটি সামান্য জিনিস আমি মূর্তিযুক্ত আউট সময়ের যে সংরক্ষণ যাচ্ছে ব্রাউজারে যে এরকম সবকিছু. এবং এখন আমি যেতে চলেছি http://facebook.com করতে. 

বাস্তবিক, আমি কি www না যাক ভাল পরিমাপ জন্য, কাট. লিখুন. তাই একটি URL যে অনেক আপনার পরিদর্শন করেছি. এবং বর্তমানে ফেসবুক এর ওয়েব পাতা উপরের আপ আসে. আর তৎকালীন আভা স্টাফ নীচে করে আসেন. এবং বাস্তবিকই, এটা দেখা যাচ্ছে যে আপনি Facebook.com যান তখন আপনি শুধু এক HTTP অনুরোধ করছি না এটা Facebook.com যাচ্ছে যে দেখা যাচ্ছে সেই খামে 41 পাঠায় নিজস্ব পেতে অনুরোধ সঙ্গে প্রতিটি, পর্দার পিছনে যদ্যপি নির্দেশিত হিসাবে এখানে, পর্দার নীচে অংশে অবস্থিত, এটা প্রকৃতপক্ষে, যে ইঙ্গিত আমার ব্রাউজার 41 অনুরোধ করেছেন. 

এবং মোট, এটা 861 স্থানান্তর কিলোবাইট এবং এটা কোনো কারণে গ্রহণ হিসাবে অনেক হিসাবে আট সেকেন্ডের যে সব ডাউনলোড করতে. সুতরাং যে আসলে একটু অদ্ভুত ফেসবুক এর সাইটে যে গ্রহণ করা হবে যে দীর্ঘ, কিন্তু তাই এই ক্ষেত্রে এটা হতে. এখন, এই সব আমি সত্যিই না যত্ন আগ অনুরোধ ছাড়া সম্পর্কে. সুতরাং এর ঠিক এই এক যেতে দিন এবং আমাকে শুধু একটা মুহূর্ত জন্য জুম আউট করা যাক. 

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

এবং তারপর আমি স্ক্রল ব্যাক আপ, আমরা আসলে হবে দেখতে ফেসবুক ফিরে কি যে আমাকে এই হেডার সব হয়. যে ভার্চুয়াল খাম ভেতরে তাই প্রকৃতপক্ষে কী মান জোড়া একটি অনেক আছে. একটি শব্দ, একটি কোলন, এবং তারপর একটি মান. একটি শব্দ, একটি কোলন, এবং একটি মান. এই বলা হেডার. আর উপায় আরো বিস্তারিত আর এখানে আছে আমরা আসলে এই মুহূর্তে যত্নশীল. 

কিন্তু এই দ্বিতীয় নিচে আছে গত এক, লক্ষ্য, Facebook.com এর সার্ভার যে, প্রকৃতপক্ষে এখানে বলেন কিছু টেক্সট এইচটিএমএল আসে. তাই এই সব বলতে হয় আপনি একটি ওয়েব অনুরোধ যখন যে একটি একটি ব্রাউজার থেকে পাতা সার্ভার, যে সার্ভার সাড়া তার নিজস্ব একটি খাম দিয়ে যার ভিতরে পাঠ্য. অন্য কথায়, এইচটিএমএল. হাইপারটেক্সট মার্কআপ ল্যাঙ্গুয়েজ. যা অন্য ভাষা আমরা আজ পরিচয় করিয়ে দিতে যে মানুষের বা কম্পিউটারের উৎপন্ন যে যাতে ওয়েব পেজ বাস্তবায়ন. 

বিশেষ করে, এর এই তাকান. আমি এখন ফিরে যেতে চলেছি ফেসবুক এর ওয়েবসাইট. আর আমি যাচ্ছি মাত্র নিয়ন্ত্রণ ক্লিক বা ডান ক্লিক এবং দেখুন পৃষ্ঠা উত্স উপর ক্লিক করুন. আর আপনি ক্রোম ব্যবহার করবেন না, এমনকি যদি, অর্থাত্ এই, ফায়ারফক্স এই কাজ করতে পারেন না পারেন, সাফারি এমনকি মেনু যদিও, এটা করতে পারেন অপশন একটু ভিন্ন চেহারা হতে পারে. আর এই এইচটিএমএল যে মার্ক ও ফেসবুক এ কোম্পানির লিখিত আছে. 

এবং সম্মিলিতভাবে, এই ভাষা এখানে নীল এবং সাদা পৃষ্ঠা কার্যকরী যে আমরা একটি মুহূর্ত আগে দেখেছি. এখন, এই একটি বিট অপ্রতিরোধ্য. আমরা উপরের বামদিকের সন্ধান কিন্তু যদি আমরা আছেন কিছু নিদর্শন দেখতে শুরু করতে যাচ্ছে. অনেক আছে দেখে মনে হচ্ছে এই খোলা কোণ বন্ধনী এবং তারপর এই শব্দ এইচটিএমএল আছে. এখানে আরেকটি খোলা কোণ বন্ধনী এবং মাথা. 

যদি আমরা নিচে স্ক্রল এখানে, হয় এবং নিচে এবং নিচে, আমি আছি এগিয়ে যান এবং চেষ্টা করে যাচ্ছে কিছু অনুসন্ধান করার জন্য. সেখানে পথ ধরে ডানদিকে এখানে খোলা বন্ধনী শরীর. আর সর্বশেষ থেকে প্রত্যাহার আমরা প্রস্তাব যে সময় সহজ ওয়েবপৃষ্ঠাটি যে একটি মানবিক লিখতে পারে যে এই মত সামান্য কিছু চেহারা হতে পারে. ওপেন এইচটিএমএল ট্যাগ, খোলা মাথা ট্যাগ, খোলা টাইটেল ট্যাগ, তারপর বদ্ধ শিরোনাম, বদ্ধ মাথায়, খোলা শরীরের ট্যাগ, কিছু লেখা, শরীরের বন্ধ বদ্ধ এইচটিএমএল. 

কিন্তু শুধু একটা মুহূর্ত জন্য এখানে একটি বিরতি. এই কোড, আপনি করেছি, এমনকি যদি আগে এটি লিখিত ছিল না কিন্তু এখনও বেশ বুঝতে পারছি না কি ঘটছে, বেশ ভাল দেখায়. রাইট, তা খুব পরিষ্কার নয়. এটা খুব শৈলীগত চমৎকার. খাঁজ এবং একটি সাদা স্থান অনেক. ফেসবুক এর নয়. সুতরাং কেন ফেসবুক এত এইচটিএমএল লেখার সময়ে আমি চেয়ে খারাপ? দৃশ্যত. 

রাইট, এই এক মত হয় শৈলী জন্য পাঁচটি আউট. একটি বাধ্যকারী কারণ আছে তাদের জন্য এই কোণ কাটা. ঠিক আছে, তাই তারা করতে চান না এটা সহজ করার জন্য আপনাকে এটা পড়তে বাধ্য করা. তাই কিছু অর্থে, তারা আছেন এটা obfuscating, সাজানোর এটা হাহাকার অন্তত নান্দনিক তাই এটা মাইস্পেস জন্য কঠিন যে যান এবং সরাইয়া ফেলা তাদের হোম পেজ এবং এটি জন্য এইচটিএমএল. এটা প্রোগ্রাম সঙ্গে যে দেখা যাচ্ছে ক্রোম সহ যদিও, আমরা সুপার সহজেই এই পরিষ্কার করতে পারেন. সুতরাং এটা কারণ হিসেবে বেশ যে. আর কি কারণ হতে পারে. হ্যা. হ্যা, সাদা স্পেস খরচ তথ্য. তুমি কি বুঝাতে চাও? একদম সঠিক. আপনি ট্যাব কী অনেক বা আঘাত স্পেস বার, প্রভাব বিবেচনা. সুতরাং আপনার কীবোর্ডের প্রতি কি একটি হল [শ্রবণাতীত] এক বাইট হিসাবে প্রতিনিধিত্ব. 

সুতরাং অনুমান করা হয় যে মার্ক বা devs কোনো এই দিন শুধু একবার, spacebar হিট এই এইচটিএমএল পৃষ্ঠায় সেই ফেসবুক এর হোমপেজে প্রতিনিধিত্ব করে. আর ফেসবুক অনেক আছে ব্যবহারকারীদের এই দিন. সুতরাং অনুমান করা হয় যে ফেসবুক এর হোমপেজে আজ একটি বিলিয়ন মানুষ পরিদর্শন করা হয়. আর ফেসবুক এ কেউ আছে শুধু একবার স্পেস বার চাপুন. 

সুতরাং এক অতিরিক্ত বাইট, একটি বিলিয়ন অনুরোধ, কত আরো তথ্য ফেসবুক ইন্টারনেটের মাধ্যমে হস্তান্তর কেউ আঘাত কারণ তার কিবোর্ডের উপর SPACEBAR? একটি বিলিয়ন বাইট, বা এক গিগাবাইট তথ্য ফেসবুক সার্ভার থেকে পাঠানো হচ্ছে চারপাশের মানুষের কোন ভাল কারণে বিশ্বের. এখন, যে মাত্র এক স্থান. 

আমরা আসলে এই পরিষ্কার তাহলে ভাবুন জিনিস আপ এবং এটি সংভৃত এবং যোগ সাদা স্থান অনেক এবং ট্যাব অক্ষর এবং স্পেস, আপনি খরচ গিগাবাইট শেষ, যদি না টেরা বাইট স্পেস বেশি. আর তাই সুপার সাধারণ ওয়েব ডেভেলপমেন্ট এর প্রকৃত বিশ্বের আপনার কোড minify হয়. এবং আমরা শেষ পর্যন্ত দেখতে পাবেন আপনি এই কাজ করতে পারে কিভাবে. 

কিন্তু আজকে আমরা কোড লেখা শুরু করব যে আমাদের মানুষের দ্বারা আসলে পাঠযোগ্য. আপনি ফিরে যান, তাহলে এটা, যদিও এটি সক্রিয় আউট Chrome এ এই সরঞ্জামে, উপাদান পরিদর্শন পূর্বে, আমরা নেটওয়ার্ক ট্যাবে ছিল. এটা আপনি যান তাহলে দেখা যাচ্ছে যে আপনি আসলে দেখতে কি উপাদান ট্যাব, ক্রোম এর বেশ ছাপা হয় যে একই এইচটিএমএল এর সংস্করণ. সুতরাং আমরা এটা deobfuscated থাকেন. সুতরাং এটি একটি কম্পিউটারের জন্য কোন ম্যাচ. আর এখন আপনি আসলে করতে পারেন প্রায় ক্লিক করুন এবং শুরু একটি ওয়েব পৃষ্ঠা যে অনুক্রমের দেখতে. সুতরাং আসুন আসলে এই কাজ করা যাক. আমি এগিয়ে যান এবং আপ খুলতে যাচ্ছি আমার ম্যাক টেক্সট সম্পাদনা নামক একটি অনুষ্ঠান. এবং এই মাত্র যে প্রত্যাহার একটি সুপার সহজ টেক্সট প্রোগ্রাম. উইন্ডোজ NotePad.exe আছে. আর আমি ধারণকৃত যাচ্ছি নিম্নলিখিত কমান্ড টাইপ. ডক টাইপ এইচটিএমএল, খোলা বন্ধনী এইচটিএমএল, বন্ধনী এইচটিএমএল বন্ধ আমরা এখানে পৃষ্ঠার মাথা আছে সংযোগকারী পৃষ্ঠাসমূহ পাতা প্রধান শেষে, একটি শিরোনাম, হ্যালো দুনিয়া মত হতে হবে. 

এবং তারপর এখানে নিচে, আমরা প্রয়োজন ওয়েব পৃষ্ঠার শরীর. বন্ধ শরীর. এবং তারপর এখানে, হ্যালো দুনিয়া. ঠিক আছে. সুতরাং আমরা একটি সুপার ফাস্ট ওয়েব পেজগুলোতে থাকেন. আমি হিসাবে এটি সংরক্ষণ করতে যাচ্ছি আমার ডেস্কটপে hello.html. আমার ম্যাক এর, অভিযোগ করতে যাচ্ছে যে চিন্তা, একটি মিনিট অপেক্ষা করুন, এই একটি টেক্সট ফাইল, না আপনি এটা .txt কল করতে চান? কিন্তু কোন, আমি ডট এইচটিএমএল ব্যবহার করতে চান. 

আমি এবং তারপর যদি সুন্দর কি শুধু এই ফাইলটি ডাবল ক্লিক করুন, hello.html, এখানে আমার ওয়েব পাতা. দুর্ভাগ্যবশত, আমি আছি বিশ্বের একমাত্র ব্যক্তি যারা এই মুহূর্তে এই পৃষ্ঠা পরিদর্শন করতে পারেন. যেখানে এটা দৃশ্যত বাস কারণ? এটা আমার ম্যাক, ডান? যা অনর্থক. এই রুমে কেউ পছন্দ ইন্টারনেটে একা দিন আসলে যে পৃষ্ঠা পরিদর্শন করতে পারেন. তাই আজকে আমরা প্রয়োজন অন্য উপাদান পরিচয় করিয়ে দিতে. 

আর এই কাজ করতে, আমি যাচ্ছি এগিয়ে যান এবং মেঘ 9 খুলুন. তাই মেঘ 9 অবশ্যই একটি হল মেঘ ভিত্তিক service-- CS50 IDE-- যে আমাদের কর্মক্ষেত্রের সব আছে কোথাও ইন্টারনেট চলমান. এবং যে আমাদের ফাইল যে সব মানে ইতিমধ্যে প্রকাশ্যে প্রবেশযোগ্য. সুতরাং আসুন এগিয়ে যান এবং এই কাজ করা যাক. আমি এগিয়ে যেতে চলেছি এবং একটি নতুন ফাইল NCS50IDE তৈরি. আমি আগে হিসাবে এটি সংরক্ষণ করতে যাচ্ছি এবং hello.html হিসাবে সংরক্ষণ করুন. আর এখন শুধু সময় বাঁচাতে, আমি যাচ্ছি এই কোড পেস্ট এগিয়ে যান এবং কপি করতে বরং এটি টাইপ. তা সংরক্ষণ করুন. তাই এখন আমি একটি আছে ফাইল hello.html বলা. কিন্তু কিভাবে আসলে আমি কি একটি ওয়েব পৃষ্ঠা হিসাবে এটি খুলতে? ওয়েল, এটা CS50 সালে নির্মিত দেখা যাচ্ছে আইডিই ঝনঝন মত শুধুমাত্র একটি কম্পাইলার নয় এবং GDB মত একটি ডিবাগার এবং অন্যান্য প্রোগ্রামের মধ্যে bunches, একটি পরিপূর্ণ আসলে আছে এবং CS50 আইডিই মধ্যে চলমান ওয়েব সার্ভার. 

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

আর আমরা এটা একটু সহজ করেছি এ্যাপাচি 50 এটা কল করে CS50IDE ব্যবহার. এটা আসলে পারেন, যাতে নিম্নলিখিত বুঝতে. আমি এ্যাপাচি 50 শুরু বলতে যাচ্ছি. এবং তারপর আমি ঠিক বিন্দু বলতে যাচ্ছি. আর আমরা কিছু কিছুটা দেখতে বলার অপেক্ষা রাখে না গোপনীয় বার্তা এ্যাপাচি এর নথি [সেটিং? গ্রুপ?] হোম, উবুন্টু, যে যাই হোক না কেন, কর্মক্ষেত্র কাট. শুরু ওয়েব সার্ভার সফলভাবে এ্যাপাচি 2. 

তাই দীর্ঘ সংক্ষিপ্ত বিবরণ, আমি শুধু একটি বাটন push করা এবং এখন যারা একটি ওয়েব সার্ভারে পরিণত TCP পোর্ট উপর ইন্টারনেটে শোনা একটি নির্দিষ্ট ঠিকানায় 80. এবং এটা এখানে বলছেন, এবং এই ভিত্তি করে পরিবর্তন করা হবে আপনার ব্যবহারকারী নাম এবং অন্যান্য কারণের উপর, আমি এই ক্লিক কিন্তু যদি, এখন লক্ষ্য IDE50 ডট jharvard এবং তাই এবং তাই, লক্ষ্য সব এই সময় যে গত কয়েক জন্য সপ্তাহ, আপনি থাকতে পারে আপনার নিজস্ব ইউজারনেম লক্ষ্য করেছি যে উপরের ডান দিকের এমবেড করা হয় CS50IDE কোণে. 

এবং যে আসলে হয়েছে সব এই অঙ্ক সময় যা আপনি করতে পারেন এ ওয়েব এর মাধ্যমে আপনার ফাইল সব যান. এখন পর্যন্ত, এটা গুরুত্বপূর্ণ না, কারণ সি, আপনি সাধারণত একটি চলমান কিছু চান টার্মিনাল, না ওয়েবে. কিন্তু আজকে আমরা শুরু ওয়েব ভিত্তিক কোড লেখা আমরা চাই না যে পাবলিক URL গুলি প্রবেশযোগ্য. তাই কি আমি করতে যাচ্ছি কি এই URL- এ ক্লিক করুন. 

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

এবং প্রকৃতপক্ষে, আমি যদি এখন hello.html ক্লিক করুন, আমি ঠিক এই ট্যাব যে ফাইলের মধ্যে দেখতে. এখন মেঘ 9 করেছেন, লক্ষ্য আমাদের জন্য একটি সামান্য সহায়ক কিছু. এবং CS50 আইডিই মধ্যে, আছে বিজ্ঞপ্তি হঠাৎ একটি ঠিকানা দণ্ড. আমরা যদিও এ কারণে যে CS50IDE দেখার ক্রোম ব্যবহার, CS50IDE ভেতরে তার নিজের এখনই একটি ওয়েব ব্রাউজারের সংস্করণ. তাই বদলে যেমন কিছু জটিলতা দেখা, আমি এগিয়ে যেতে চলেছি এবং শুধু এই URL টি কপি করুন. আমি এগিয়ে এবং শুধু যেতে চলেছি আমার নিজের ক্রোম উইন্ডো খুলুন. তাই এখানে কোন যাদু, কোন CS50IDE আছে. আমি শুধু আক্ষরিক পেস্ট করা যাচ্ছে না আমার জে হার্ভার্ড URL এবং এন্টার চাপুন. এবং voila, এখন আমি, এবং তত্ত্ব, সবাই ইন্টারনেটে আমি কনফিগার করেছি তাহলে উপযুক্তভাবে অনুমতি, এই ফাইলটি পরিদর্শন করতে পারেন. আর তাই এখন আমি যদি না বলেন, hello.html, আছে, voila আমার অবিশ্বাস্যভাবে underwhelming ওয়েবপৃষ্ঠাটি হয়. সুতরাং আসুন একটি দ্রুত বৈধতা পরীক্ষা না দেওয়া. যে সব কারণ ধারণাগত সেট আপ হয়. এবং আমরা সত্যিই আসলে না করেছি কিভাবে এইচটিএমএল কোনটাই লিখতে শেখানো. কোন প্রশ্ন এখন পর্যন্ত শুধু ঘটেছে কি? হ্যাঁ. এবং CS50 এই ওয়েব পেজ মালিক? কি অর্থে? ভালো প্রশ্ন. সুতরাং CS50 এর CS50.io. মালিক আমরা প্রকৃতপক্ষে যে ডোমেইন নাম কেনা করেছি. আর আপনাকে বলছি প্রকৃতি দ্বারা CS50IDE লগিং, আপনি সমস্ত একটি সাবডোমেন বলা কি আছে. 

সুতরাং MALAN IDE50-, বা IDE50-Rob.CS50.io, মধ্যে যে আপনার অনন্য ঠিকানা আমাদের ডোমেইন নাম. অবশ্যই কাজের জন্য তাই, আপনি আপনার নিজের অনন্য ঠিকানা আছে. কিন্তু আমরা কিছু সরলীকৃত করেছি শীর্ষ স্তরের ডোমেইন কেনার CS50, ডট আমি / হে এবং তারপর বাকিদের হয় যে এর ভিতর, তাই কথা বলতে. এবং আমরা যে ফিরে আসবো সম্ভবত কয়েক সপ্তাহ মধ্যে, বিশেষ করে চূড়ান্ত প্রকল্প এ আপনাকে সময়, যখন কিছু আপনার নিজের ডোমেইন নাম পেতে চাইতে পারেন. এটা তুলনামূলকভাবে আসলে সহজবোধ্য. ঠিক আছে. তাই আসুন এখন এই কাজ করা যাক. আমি ফিরে যেতে চলেছি CS50IDE, যেখানে আমার ফাইল ঠিক এখন, hello.html, যে সব আকর্ষণীয় নয়. আমি কিছু করতে চাই যে চেয়ে সামান্য nicer. তাই আমি ভালো কিছু কাজ করতে যাচ্ছি. খোলা paragraphs.html আমার যাক. তাই এই আমি অগ্রিম লিখেছে একটি ফাইল. এটি শীর্ষে, মত সবসময়, আমরা মন্তব্য আছে. কিন্তু HTML এ, মন্তব্য একটু ভিন্ন চেহারা. তিন লাইন এবং লাইন 14 উপর, আপনি একটি মন্তব্য শুরু সিনট্যাক্স দেখতে এবং একটি মন্তব্য করা শেষ. 

কিন্তু কাপড় কেউ এ বৈশিষ্ট্যগুলি বিষয়ে মধ্যে. এটি একটি মাত্র একটি নোট এখানে কি ঘটছে মানুষের. আর শুধু একটি দ্রুত বৈধতা হিসেবে যদি আমি নিচে স্ক্রল, পরীক্ষা, সুস্পষ্ট নতুন কি আমরা চালু করেছি যে ট্যাগ? পর্যন্ত আমরা দেখা করেছি এইভাবে ট্যাগ খোলা বন্ধনী এইচটিএমএল, মাথা, শিরোনাম, এবং শরীরের. কিন্তু এখন এ বিষয়টি স্পষ্ট নতুন কি? 

হ্যাঁ, তাই P. পি ট্যাগ বা অনুচ্ছেদের ট্যাগ. এবং তারপর আমি কিছু ডিফল্ট ধার ল্যাটিন টেক্সট আমার অনুচ্ছেদের গঠন করতে. আমি চেয়েছিলেন কি কারণ প্রকট কিভাবে আপনি পারে না এইচটিএমএল লেখার অনুচ্ছেদ প্রতিনিধিত্ব. তাই কি ঘটতে শুরু হচ্ছে এখানে আগে থেকেই আছে যে একটি প্যাটার্ন উন্নয়নশীল. এবং আমাকে এগিয়ে যান এবং এই কাজ করা যাক. আমার প্রথম এ্যাপাচি বরখাস্ত করা যাক. এবং আমি নিজে শুরু করার এটা বলতে যাচ্ছি আবার আজকের উৎস সাত ভেতরে এম ডিরেক্টরি. যাতে আমি সবকিছু এক্সেস আছে. 

এবং এখন, আমি ফিরে যেতে হলে এই ডিরেক্টরির তালিকা আমি আজ থেকে প্রত্যেক ফাইল দেখতে লক্ষ্য. আর আপনি দেখতে পাবেন পরবর্তী সমস্যা সেট, আমরা করব আপনি নির্দেশাবলী প্রদান ঠিক এই কাজ করার জন্য. আমি paragraphs.html খুলুন, এই পারে পাশাপাশি একটি প্রোগ্রামিং ভাষা মত চেহারা আপনি আপনার সাথে কথা বলতে বা ল্যাটিন পড়তে না পারে. কিন্তু শুধু এই তিনটি অনুচ্ছেদ হয় লেখার যে HTML এ পর্যন্ত চিহ্নিত করা হয়েছে. 

এবং অনুচ্ছেদ লক্ষ্য তাদের মধ্যে বিরতি. , কারণ এটি সক্রিয় এবং এমনকি যদিও আপনি এই কাজ করতে আনত হতে পারে, বাস্তব জগতে, যেহেতু, আপনি লাইন লাগাতে চান তাহলে জিনিষ মধ্যে বিরতি, আপনি পারে জবাবটা এই কাজ এবং সংরক্ষণ আঘাত. এবং এখন, আমি এখানে পুনরুদ্ধার করা হলে নোটিশ সমস্তকিছু একসাথে blurs টেক্সট এর মাত্র এক ফোঁটা মধ্যে. এইচটিএমএল একটি মূক ভাষা ধরনের কারণ. 

এটা যেমন ব্যবহার করা বোঝানো হয় একটি উপায় ব্রাউজার শুধুমাত্র যে স্পষ্টভাবে আপনি কি এটা বলতে কি. আপনি এটা বলতে না যদি তাই আমার একটি নতুন অনুচ্ছেদ দিতে, যদি আপনি একটি নতুন অনুচ্ছেদ দেখতে যাচ্ছেন না. এবং সত্য, তা ব্রাউজারের করতে যাচ্ছে আপনি Enter টেপার এমনকি যদি হয়, এর আবার এবং আবার বলা যাক এবং আবার, এই টেক্সট ভাবে চলন্ত তারপর পর্দায় এবং নিচে সংরক্ষণ এবং তারপর ব্রাউজার যাচ্ছে, রিলোড যে সাদা স্পেস সব ভেঙ্গে শুধু একটি একক, দৃশ্যমান হোয়াইটস্পেস মধ্যে. ঠিক আছে. সুতরাং যে অনুচ্ছেদের ট্যাগ এর. আর তাই প্যাটার্ন কি যে এখানে উন্নয়নশীল? ওয়েল, এটা যদি মনে করা হয় যে এইচটিএমএল সব ট্যাগ শুরু হয় এবং একটি ট্যাগ শেষ. এবং একটি ট্যাগ কি? ওয়েল, এটা সিনট্যাক্স এর মাত্র খণ্ড. খোলা বন্ধনী, একটি শব্দ, বদ্ধ বন্ধনী, একটি ট্যাগ. বা ট্যাগ শুরু. এবং তারপর আপনি যখন নিজেকে প্রকাশ সম্পন্ন, এ হিসাবে আপনি অনুচ্ছেদের সঙ্গে সম্পন্ন, আপনি বিপরীত তাই কথা বলতে না. কিন্তু বিপরীত বেশ পিছনের দিকে নয়. 

আপনি কেবল একই ট্যাগ এর উপসর্গ ভালো একটা ফরওয়ার্ড স্ল্যাশ সঙ্গে নাম. ঠিক আছে. সুতরাং যে সব উত্তেজনাপূর্ণ না. এবং সত্য, আমরা তৈরি করছি ওয়েব সমস্ত যে আরো আকর্ষণীয়. আমি কি করতে চান তাহলে বড় এবং গাঢ় কিছু? সুতরাং তা এখানে একটি উদাহরণ দেখা যাচ্ছে যে headings.html মধ্যে, যেখানে আমার শরীরের মধ্যে, আমি একটি H1 ট্যাগ, H2, h3 পেয়েছেন চার, পাঁচ, ছয় বা, যার মধ্যে সব বেশ গোপনীয় বলে মনে হচ্ছে. কিন্তু আমি এই খুলুন যেতে হলে উদাহরণস্বরূপ, এর কটাক্ষপাত করা যাক. Headings.html. 

ডিফল্টরূপে ব্রাউজার দিতে পারেন তাই আপনার টেক্সট যে বড় এবং অসম আকারের গাঢ় হচ্ছে. এইচ 1 বড় হয়. H6 তারপর ছোট এবং হয় অন্য সব কিছুর মধ্যে. সুতরাং যে এখনও আকর্ষণীয় কিন্তু এর না সত্যিই আমি জানি ওয়েব. আমরা কি করতে চান তাহলে আমি একটি তালিকা ভালো কিছু. . তাই এখানে একটি বুলেটযুক্ত তালিকা হার্ভার্ড এর ঘর তিনটি. 

আপনি কিভাবে এই করছেন যেতে হয়নি? ওয়েল, list.html কটাক্ষপাত. এবং এখানে আমরা একটি দেখতে funkiness এর সামান্য বিট কিন্তু এর কি ঘটছে তা বিবেচনা করা যাক. তাই আপনি শুধু দেখা করেছি তার উপর ভিত্তি করে, উল unordered তালিকা ঘোরা. Unordered তালিকা শুধু বুলেটযুক্ত মানে. কোন সংখ্যা আছে. এর রয়েছে কিছু একটি বলা ট্যাগ এ একটা ওল যা তালিকা, আদেশ. তারপর লি, তালিকার আইটেম এটা মানে সব. 

আর তাই এটি স্বয়ংক্রিয়ভাবে আপনার জন্য নম্বর সবকিছু. কিন্তু আমার খাঁজ আবার সব সাদা স্পেস শুধু আমার জন্য নয়. ব্রাউজার নয় আসলে যত্ন যাচ্ছে. সুতরাং যদিও আপনি না পারা এই, ঠিক পরিষ্কার হবে না, আপনি যদিও করা উচিত নয় ব্রাউজার এখনও করবে না ঠিক সূক্ষ্ম এটা বুঝতে সক্ষম. আমি রিলোড আঘাত করছি আমার ব্রাউজার, আমি রিলোড ক্লিক করছি এবং কোন পরিবর্তন ঘটছে এখনও ব্রাউজার কারণ আমি কি এটা বলতে ঠিক কি করছেন. 

ঠিক আছে. তাই এই সব শুধু পাঠ্য. এখন এর আরও বেশি আকর্ষণীয় কিছু করতে দেওয়া. আমি এগিয়ে যেতে চলেছি এবং এই কিছু HTML ধার. আমি এগিয়ে যেতে চলেছি এবং এখানে একটি নতুন ফাইল তৈরি. আর আমরা এই rick.html ডাকবো. আমরা সামঞ্জস্যহীনভাবে আছে ব্যবহৃত কিছু এই একটি রিক রোল বলা ক্লাস এই বছর, আমি জানি না, এটা শুধু সংগঠিত ঘটেছে. 

আর এখন এটা নিয়ন্ত্রণের বাইরে পেয়েছিলাম. তাই আমি এটা সঙ্গে যেতে চলেছি. এবং আমি Google এ যান, তাহলে চিত্র ও রিক Astley. আমরা কেন আপনি না জানেন, তাহলে এই, শুধু উইকিপিডিয়া উপর পড়তে. আপনি লিঙ্কে ক্লিক করেছি প্রতিটি সময়, কেউ কোথাও হাসতে হয়েছে. আর আমার ahead-- সেখানে যেতে দেওয়া আমরা এর এই ছবিটি দেখতে দিন, যেতে. 

তাই আমরা এখানে একটি আছে গুগল ইমেজ ইমেজ. আর এর এই যে অনুমান করা যাক যুক্তিসঙ্গতভাবে সর্বত্র ইন্টারনেটে. তাই আমি এটা আমার জন্য ঠিক আছে অনুমান করা যাচ্ছে না আসলে আমার ওয়েব পৃষ্ঠার মধ্যে এই লাগাতে. আমি এগিয়ে যেতে চলেছি এবং ছবির URL কপি করুন. এবং এখন আমি মেঘ ফিরে যান 9, আমি এখানে কি করতে পারেন দেখতে দিন. তাই এখানে শুধু একটি ওয়েব পৃষ্ঠা. এই হা হা, রিক Astley হয়, আমি এখন ফিরে যেতে চলেছি আমার ব্রাউজারে, পুনরায় লোড করুন এবং আকর্ষণীয়. 

রিক কোথায়? তাই আমাকে ঘটেছে তা দেখতে দিন. বাস্তবিক, আমি যাচ্ছি আমি যে কি না জাহির. [শ্রবণাতীত] এখানে তাকে রাখা. আমরা একটি মুহূর্ত যে ফিরে আসবো. সুতরাং এখানে rick.html এর. সুতরাং যে রিক Astley না. তাই এটি সক্রিয় আউট আমরা যা করতে পারেন আসলে এখানে তাকে যোগ করুন. এই রিক Astley হয়. আমি আমার যার একটি চিত্র দিতে বলতে যাচ্ছি উৎস আমি শুধু কপি করা URL হয়, যা দৃশ্যত একটি শুভ হয় জন্মদিনের কিছু বা অন্যান্য. 

এবং এখন আমি যাচ্ছি ভালো ট্যাগ বন্ধ করুন. সুতরাং এই সুপার দীর্ঘ মোড়কে হয়. কিন্তু আমি সব করেছি বিজ্ঞপ্তি খোলা বন্ধনী ইমেজ সম্পন্ন হয়, এই একটি বৈশিষ্ট্য সঙ্গে সোর্স. এবং এটি একটি সত্যিই দীর্ঘ URL টি. এবং খুব শেষে, এই লক্ষ্য. কেন আমি যা করেছি স্ল্যাশ কৌণিক বন্ধনী পরিবর্তে, প্রত্যেক অন্যান্য ট্যাগ মত, একটি খোলা বন্ধনী থাকার, গান, বন্ধনী বন্ধ? শুধু এমনকি আপনি যদি একটি অনুমান নিতে কোন ঘনিষ্ঠতা সবটা আছে HTML এর আগে. 

সুতরাং এটি বন্ধ হয়ে যায় কিভাবে হয় কমান্ড, কিন্তু কেন এটা সত্যিই স্বজ্ঞাত যায় না ধারনা একটু বেশি কিছু করতে বন্ধ চিত্রের মতো শব্দবহুল? হ্যা. হ্যা. শুধু শব্দার্থিক কোন অনুভূতি আছে একটি ইমেজ শুরু এবং একটি চিত্র বিভক্তি, এটা হয় আছে অথবা তা না. সুতরাং এটা একটা ফাঁক ছেড়ে দিতে অর্থে দেখা যায় না একটি চিত্র ভিতরে কোন কিছু জানার জন্য. আপনি ঠিক করতে পারবেন না. আর তাই সিনট্যাক্স সাধারণত শুধু হবে ভিতরে ফরোয়ার্ড স্ল্যাশ করতে খোলা ট্যাগ বা শুরু ট্যাগের এবং তারপর Save আঘাত. 

সুতরাং যদি আমি এখন এই ফাইলটি রিলোড আমি এখানে একটি ভাল ওয়েব পৃষ্ঠা রন্ধন পেয়েছেন. আর আমরা অবশ্যই পারে সত্যিই মানুষ বিরক্ত পরিবর্তে এম্বেড করে একটি ইউটিউব লিঙ্ক মত. এবং সত্য, যে কোনো সময় আপনি কি ইউটিউব থেকে সর্বস্বান্ত করেছি এবং ঘটনাক্রমে আসলে আমার দিন রিক এখানে নিজেকে পাকানো. সুতরাং রিক রোল. সুতরাং রিক আমি এখানে যেতে চলেছি roll--. 

[সঙ্গীত বাজাচ্ছি] 

ঠিক আছে, এক ব্যক্তি যে পছন্দ. সুতরাং, এই সব সময় লক্ষ্য আপনি যদি অবশ্যই, আপনি এই গেমটি শেয়ার লিঙ্ক ক্লিক URL পাবেন যে আপনি আসলে করতে পারেন একটি ইমেইল বা একটি ফরেনসিক ইমেজ এম্বেড বা একটি সমস্যা সেট অথবা একটি স্লাইডের. এবং এখন, আমি পরিবর্তে স্থাপিত উপর ক্লিক করুন, লক্ষ্য যে সমস্ত এই সময়, এই জিনিস সেখানে হয়েছে. আমি এগিয়ে যান এবং এই কপি করা যাচ্ছে না. 

এবং শুধু তাই আমরা আমি, ভাল এটা দেখতে পারেন আমার টেক্সট এডিটরে পেস্ট যাচ্ছে. এই যে লক্ষ্য তা YouTube আপনাকে বলছে হয়েছে. আপনি একটি দেখার জন্য প্রত্যেক সময় YouTube ভিডিও, আপনি যদি ভিডিও এম্বেড করতে চান আপনার ওয়েব পৃষ্ঠা, কেবল এই দখল. তাই এই এখনো হয় অন্য এইচটিএমএল ট্যাগ একটি iframe বলা. বা লাইন ফ্রেমে একটি. তাই এটা খুব একটা একটু বেশি মনে হচ্ছে সব অন্যদের চেয়ে জটিল. সুতরাং এটা ইমেজ দেখা যাচ্ছে যে ট্যাগ এবং দৃশ্যত আইফ্রেম ট্যাগ বলা আরোপ করা হয় তা নিয়ে. 

আর এই আরেকটি হল HTML এ সিনট্যাক্স টুকরা. ট্যাগ এর ছাড়াও নাম, খোলা বন্ধনী ট্যাগ নাম, আপনি ট্যাগ আচরণ নিয়ন্ত্রণ করতে পারেন অ্যাট্রিবিউট আভা থাকার মান সমান. অ্যাট্রিবিউট মান সমান. তাই উদাহরণস্বরূপ, ইউটিউব আমাদের বলার হয় আপনি এই ভিডিও এর প্রস্থ চান 420 পিক্সেল এবং উচ্চতা হতে 315 পিক্সেল হতে, যে কিভাবে HTML এ এটি প্রকাশ করে. 

ভিডিও উৎস যাচ্ছে যে দীর্ঘ ইউটিউব ইউআরএল হতে এবং তারপর অন্য কিছু উপাদান , ফ্রেম সীমানা শূন্য মত সুতরাং যে সম্ভবত আছে মানে জিনিস চারপাশে কোন সীমানা. সম্ভবত পুরো পর্দা মঞ্জুরি ব্যবহারকারী যে মানে একটি বাটন ক্লিক করতে পারেন এবং আসলে পূর্ণ পর্দায় ভিডিও. আমি সত্যিই হতে চান তাই রিক ডট এইচটিএমএল এখানে চিত্তাকর্ষক, ছবিটি ট্যাগ ব্যবহার, বরং দিন আমার যে মুছে পরিবর্তে এই পেস্ট. আর এখন পুনরায় লোড করুন. আর এখন এখানে আমরা আবার যান. ঠিক আছে, যথেষ্ট হয়েছে. ঠিক আছে আমি চেষ্টা করবে, যাতে হার্ড আবার যে কাজ করতে না. সুতরাং এখানে টেকওযে় কিছু কি হয়? এই ওয়েব পেজ হিসাবে সুতরাং এইচটিএমএল, হিসাবে কুশ্রী হয়, আসলে বেশ সহজ. এটি একটি প্রোগ্রামিং ভাষা নয়. এটা ফাংশন নেই. এটা loops নেই. এটা শর্ত নেই. এটি সব আছে কয়েক ডজন হয় বিভিন্ন ট্যাগ, প্রতিটি যা শূন্য বা তার বেশি গুণাবলী আছে. এবং বাস্তবিকই, মজা সম্পর্কে কি এইচটিএমএল আপনি মধ্যে আকর্ষণীয় শুরু হিসাবে এটা খুব স্ব শিক্ষণীয় যে হয়. 

সমস্ত নেয় একটি বোঝা এইচটিএমএল এর সাধারণ কাঠামো. একটি ট্যাগ কি, একটি বৈশিষ্ট্য কি, আপনি আসলে একটি ওয়েব পৃষ্ঠা কনফিগার কিভাবে নিম্নরূপ. এবং অন্য সব কিছুর সত্যিই ফলাফল একজন অনলাইন রেফারেন্স খুঁজছেন আপ বা কিভাবে কিছু googling টেকনিক বা আমরা দেখা করেছি, ফেসবুক এর উৎস এ খুঁজছেন কোড, একটি ওয়েবসাইটে এ খুঁজছেন আপনি এটি পছন্দ যে সোর্স কোড এবং বুঝতে কিভাবে সেখানে ডেভেলপারদের আসলে কিছু পরিপূর্ণ. 

তাই আমরা পাশাপাশি ইমেজ নির্বাচন করতে পারবেন. এবং সত্য, আমরা একটি মুহূর্ত আগে তা. আমাকে এগিয়ে যান এবং আপনি শুধু প্রদর্শন করা যাক. এখানে কিছু নমুনা কোড এর. আপনি কি বদমেজাজী দেখতে চান. তাই আমি যে লক্ষ্য এখানে একটি ইমেজ ট্যাগ আছে. এবং আমি এটা উপরে একটি মন্তব্য পেয়েছেন. আমি একটি বিকল্প পেয়েছেন অ্যাক্সেসিবিলিটির জন্য টেক্সট. একটি পর্দা ব্যবহার করে সুতরাং যিনি দৃষ্টিশক্তি কারণে পাঠক আসলে তারপর থাকতে পারে তাদের স্ক্রিন রিডার বদমেজাজী বলে. যদি তারা না করতে পারেন, কারণ ছবিটি দেখুন, তারা অন্তত তাদের কম্পিউটার থাকতে পারে এটা মৌখিকভাবে তাদের বলুন. এবং যে ফাইলটি উৎস cat.jpeg হয়. তাই আসলে, আমি সত্যিই চেয়েছিলেন যদি আমি হতে পারে কি, চতুর পেতে done-- আমি তাই, রিক Astley যেতে না অঙ্গীকার আমি এর পরিবর্তে একটি বিড়াল google যাচ্ছি. এবং আমি Google চিত্র যান এখানে, এবং আমরা অনুমান করব যে এই আমার বিড়াল একটি ছবি. 

আমি নিয়ন্ত্রণ ক্লিক আছে ধরুন বা ডান ঘটনাক্রমে এই উপর ক্লিক ছম্ছমে. আর cat.jpeg আমি যাচ্ছি আমার ডেস্কটপে সংরক্ষণ. আমার এখন মেঘ 9 ফিরে যাওয়া যাক. , যে এখানে আমি করতে পারবেন লক্ষ্য স্থানীয় ফাইল আপলোড করার জন্য যেতে. আর আমি এই দখল ফাইল, cat.jpeg, নোটিশ আমি এটা টেনে আনতে পারেন যে মেঘ 9 সেটিকে ড্রপ এবং তা এখানে আমাকে চিত্কার যাচ্ছে. 

আমরা ইতিমধ্যে করেছি, কারণ আপনি একটি cat.jpeg ফাইল দেওয়া, কিন্তু এটি অতি সহজ আপনি করেছি যে একটি ছবির দখল ফেসবুক থেকে নেয়া ফ্লিকার বা মত বা এবং আসলে ড্র্যাগ এবং ড্রপ তারপর মেঘ 9 মধ্যে এবং এটা করা আপনার নিজের ব্যক্তিগত অংশ ওয়েবসাইট বা সমস্যা আমরা শীঘ্রই দেখতে পাবেন সাত বা আট সেট. এবং তারপর যখন আপনি অবশেষে যে বিড়াল দেখার জন্য, আমি যে একই বিড়াল ডাউনলোড অভিমানী যে কিন্তু যে নোটিশ ছিল আরাধ্য. 

আপনি কি দেখতে হবে হয় এখানে এই মুখ ভালো কিছু. ফাইল যাতে আপনি একটি ওয়েব পৃষ্ঠার মধ্যে রেফারেন্স হয় আপনার নিজের মধ্যে স্থানীয় হতে পারে অন্য কিছু সার্ভারে অ্যাকাউন্ট বা রিমোট রিক এর ক্ষেত্রে যেমন কিছুক্ষন আগে Astley ছবি. তাই যেখানে কি else-- অন্যথায় আমরা এখানে করতে পারেন? সুতরাং আসুন নিম্নলিখিত কটাক্ষপাত করা যাক. আপনি ধরনের কি শীতল জানেন? 

আমরা এ পর্যন্ত তৈরি হয়েছে খুব স্ট্যাটিক ওয়েব পেজ. আমি নিম্নরূপ জিনিষ দিয়ে সাজাতে চাই. আমি আমার নিজস্ব সার্চ ইঞ্জিন করতে চাই. তাই আসুন, একটি সার্চ ইঞ্জিন করতে এগিয়ে যান এবং এই কাজ শুরু. আমি এগিয়ে যান এবং তৈরি করা যাচ্ছে না একটি নতুন ফাইল search.html বলা. এবং আমরা অনলাইন সংস্করণ prefabed আছে. ওহো. আপনার টার্মিনাল উইন্ডোর মধ্যে পেস্ট করবেন না. অনলাইন দিতাম, হুমম সংস্করণ. আর আমি নিম্নরূপ শুরু করতে যাচ্ছি. সুতরাং এখানে শুরুতে একটি ফাইল search.html বলা. আমি তা সংরক্ষণ করা যাচ্ছে না আজকের উৎস ডিরেক্টরি. আমি এই অনুসন্ধান কল যাচ্ছি. আসলে, আমরা এটাকে আরও ভাল করতে হবে. CS50 খোঁজো এবং আসলে ব্র্যান্ড এটি. এবং এখন, আমি বলতে যাচ্ছি এইচ 1 CS50 খোঁজো ভালো কিছু. এবং তারপর এখানে নিচে, H2 শীঘ্রই আসছে. আর শুধু, H1 সংক্ষিপ্তবৃত্তি এবং H2 কি যথাক্রমে মানে? 

হ্যাঁ, তাই বড় এবং গাঢ়, এবং যেমন বড়, কিন্তু এখনও সাহস করি না. তাই আমি এই সংরক্ষণ এবং এখানে বেশী, তাহলে, এর ফাইল search.html দেখতে দিন. ঠিক আছে, এবং এই এক [শ্রবণাতীত] right-- হয়. অপেক্ষা করো. ডেভিড বিভ্রান্ত হয়. ওহ, এটা ঠিক আছে. ডেভিড একটি ইডিয়ট'স. ঠিক আছে. সুতরাং হয় এটা আছে. সুতরাং CS50 অনুসন্ধান শীঘ্রই আসছে. সুতরাং এখন, এর সমন্বয় করা যাক আমরা গত সপ্তাহে কি. 

আমরা স্বপ্ন কোথায় HTTP- র নিম্ন স্তরের বলবিদ্যা. আর এই নতুন ধারণা এইচটিএমএল, যা শুধু হয় এই মার্কআপ ভাষা যেখানে আপনি ঠিক কি করতে একটি ব্রাউজার বলুন এবং আমাদের নিজস্ব সার্চ ইঞ্জিন বাস্তবায়ন. সুতরাং পরিবর্তে শুধু শীঘ্রই আসছে বলছে, আমি আছি চালু করতে যাচ্ছে কিছু একটি ফর্ম ট্যাগ বলা. আর এই আকারে, আমি যাচ্ছি একটি ইনপুট ক্ষেত্রের মত কিছু আছে. 

আর এই ইনপুট নাম ক্ষেত্র, আমি কল করার জন্য এটি করা যাচ্ছে না প্র আর এই ইনপুট ফিল্ড টাইপ আমি বলতে যাচ্ছি শুধু "টেক্সট" হয়. একটি টেক্সট ক্ষেত্রের এবং, হিসাবে আমরা করব দেখতে, শুধু একটি টেক্সট বক্স. আর তাই এটি আছে এখানে ইন্দ্রিয় না এই সময়ে এটি ভেতরে কিছু. আর তাই আমি সহজভাবে যাচ্ছি যে সাথে ট্যাগ বন্ধ করতে এগিয়ে ট্যাগ নিজেই সঠিক কাট. এবং তারপর আমি যাচ্ছি এক অন্য ইনপুট আছে. ইনপুট টাইপ জমা সমান. এবং তারপর আমি যাচ্ছি খুব এই এক বন্ধ. 

এবং এখন আমি এখানে ফিরে যেতে চলেছি. আর ইতিমধ্যে আমরা দেখতে সুন্দর অসুন্দর যদ্যপি আমি করেছি এর সূত্রপাত পেয়েছিলাম এখানে আমার নিজস্ব সার্চ পাতা. আসলে, আমার করার চেষ্টা করা যাক একটি সামান্য বিট এই পর্যন্ত পরিষ্কার. এটা তে দেখা যাচ্ছে যে এখানে ইনপুট, আমি থাকতে পারে স্থানধারক নামক আরেকটি বৈশিষ্ট্য. আর আমি কিওয়ার্ড ভালো কিছু দেখতে হতে পারে, বা আরো নির্দিষ্টভাবে, Q জন্য অনুসন্ধান করা হবে. 

এবং এখন, আমি আছে, লক্ষ্য ধূসর লেখার এই ধরনের যে disappears তাড়াতাড়ি আমি শুরু টাইপ, কিন্তু এটা সম্ভবত এমন কিছু আপনি অন্যান্য ওয়েব পেজ দেখা করেছি. আমি সত্যিই Submit বাটনে পছন্দ করি না. তাই আমি আসলে দিতে যাচ্ছি বাটন অনুসন্ধান একটি মান জমা. আমি রিলোড এবং এখন যদি, যে লক্ষ্য আমার বাটন অনুসন্ধান নামে হয়ে. আপনি আমি সত্যিই না, জানি এখানে লোগো মত. তাই গুগল ফন্ট জেনারেটর. 

আমি আরও এই মসলা আপ করতে চান. সুতরাং CS50 অনুসন্ধান. আমার নিজের লোগো তৈরি করা যাক. যে দেখতেও সুন্দর. সুতরাং এখন আমাকে এই প্রথম আসা as-- সংরক্ষণ করতে দিন. এটা কোথায় যাচ্ছে? আছে. ঠিক আছে. এটা মিস. সংরক্ষণ করুন. মূঢ় ব্রাউজার. পাশে দাঁড়ানো, আমরা চলুন এই মাত্র একবার ঠিক. আমরা শুরু করছি. ঠিক আছে. দুঃখিত. বন্ধ দিন. এখন এই ভীতু হয়. পূর্ণ স্ক্রীণ বন্ধ করুন. ঠিক আছে. 

এখন, একটি স্বাভাবিক মত ব্যক্তি হিসাবে ইমেজ সংরক্ষণ করুন. Logo.gif. এখন আমি CS50IDE এবং ঢোকা যাচ্ছে না আমি কেবল লোগো দখল করতে যাচ্ছি, আমি সেটিকে টেনে নিয়ে যাচ্ছি আমার উৎস সাত ডিরেক্টরি, ফাইল আগে থেকেই আমি যে ঠিক আছি, বিদ্যমান. তাই আমি এটি অগ্রাহ্য করা যাচ্ছে না আমি ইতিমধ্যে এটা ছিল কারণ. আর এখন আমি কিভাবে এই পরিত্রাণ পেতে পারি? 

এগিয়ে আসুন এখানে যান এবং করুক না ইমেজ উৎস logo.gif সমান. এই বন্ধ. সংরক্ষণ করুন. এবং এখন আমি আমার অনুসন্ধান ফিরে যান পাতা, এখন এটা বেশ ভাল খুঁজছেন. ঠিক আছে, এটা না আছে তাই বেশ দরকারী কিছু কাজ. আসলে, আমার অনুসন্ধানের চেষ্টা করা যাক এবং একটি বিড়াল দেখুন সেখানে কি ঘটছে. বিড়াল. ধুর! ছাই. এটা শুধু দৃশ্যত, কাজ করে না. তাই কী টুকরা কি যে এখানে অনুপস্থিত? 

ঠিক আছে, আপনি কোন HTML জানি না, এমনকি যদি, আমি ফোন ফর্ম আপ উপলক্ষে শুরু করেছি এবং আমি, ইনপুট পেতে কিভাবে এটা বলেছেন আমাকে একটা টেক্সট বক্সে বাম দিতে এবং একটি submit বাটন, দৃশ্যত তা টুকরা অনুপস্থিত? আমরা আসলে পেতে চাইছেন সঠিকভাবে কাজ এই জিনিস. আমাদেরকে কি করতে হবে? আমরা ফিরে শেষ বাস্তবায়ন প্রয়োজন আছে ডাটাবেস বা সার্চ ইঞ্জিন নিজেই, এবং যে একটি নিতে যাচ্ছে অকপটে সময় পুরো অনেক. 

সুতরাং আমরা শেষ সময় কি মনে. তাই আপনি যদি গুগল এ কিছু অনুসন্ধান যদি এবং আপনি আগাম, পরিণত বন্ধ রিকল, ইনস্ট্যান্ট সার্চ. তাই আমাকে যে বরখাস্ত করা যাক যাতে এই আসলে একটি পুরোনো স্কুল ব্রাউজার মত আচরণ করবে, আমি এখন বিড়ালের মত কিছু অন্বেষণ কর, URL হ'ল প্রত্যাহার. এটি বেশ রহস্যপূর্ণ. কিন্তু সেখানে এমবেড, রিকল, স্ল্যাশ অনুসন্ধান. প্রশ্ন চিহ্ন প্রশ্ন বিড়ালের সমান. 

আর যে আমাকে দিতে হবে বলে মনে হচ্ছে অনুসন্ধান ফলাফল আভা. সুতরাং আপনি আমি কি করতে যাচ্ছি আমি কি বলছি? আমি ধার করতে যাচ্ছি মাত্র একটি মিনিট জন্য গুগল. আমি উপর যেতে চলেছি এখানে আমি বলতে যাচ্ছি এই কর্ম ফরম বা গন্তব্য, তাই কথা বলতে, আক্ষরিক গুগল হওয়া উচিত. এবং পদ্ধতি আমি চেয়েছি ব্যবহার পেতে হতে যাচ্ছে. 

তাই কর্ম কি? এক্সন হয় weirdly, নামকরণ করা হয় কিন্তু যে শুধু মানে যারা হ্যান্ডেল করতে যাচ্ছে এই ফর্মের কর্ম? আমি অনুসন্ধান, যেখানে ক্লিক করা হলে ফলে যেতে হবে? এবং আমি এখন আমার ফর্ম ফিরে যান এখানে এবং আমার ওয়েব পৃষ্ঠাটি পুনরায় লোড এবং এখন কিছু অনুসন্ধান কুকুরের মতো, এখন লক্ষ্য আমি গুগল বাস্তবায়িত পুনরায়. রাইট? 

আমি কিছু অনুসন্ধান করতে চান অন্য, এটা ঠিক না কুকুর জন্য কাজ করে, এটি বিড়ালের জন্য কাজ করে. এটি CS50 জন্য কাজ করে. এবং ঠিক আছে, এই মাত্র whelming অধীনে, তাই নয় কি? ঠিক আছে, কিন্তু এটি আসলে কাজ করে. তাই আসলে কি যাওয়া হয়েছে? তাই আমি ব্যবহার, আমার ব্রাউজার শেখানো করেছি এইচটিএমএল, ব্যবহারকারী থেকে ইনপুট নিতে এবং আসলে যে ইনপুট পাঠাতে একটি দূরবর্তী সার্ভার HTTP ব্যবহার. 

আর আমার ব্রাউজার কারণ HTTP- র, এটা আসলে বুঝতে পারে কি যে এত ইউআরএল গঠন আমি আমার ব্রাউজারে ওভার শেষ কি লক্ষ্য যখন আমি কুকুর অনুসন্ধান. আমি অনুসন্ধান ক্লিক করা হলে, যে লক্ষ্য আমি উদ্দেশ্যে হিসেবে ইউআরএল পরিবর্তন ক্যোয়ারী কুকুর সমান google.com/search করতে. এবং যে ফর্ম, কারণ এর পদ্ধতি পেতে হয়, কারণ জানে, কেবল সেখানে URL- এ এটা লিখবেন. 

এখন, এই ওয়েব পেজ এখনও অরুপ. সুতরাং আসুন এক অন্য পরিচয় করিয়ে দেওয়া সিনট্যাক্স সমাচার আমরা আজ সম্ভব হলে. আর এই পরিচিত কিছু হয় Cascading স্টাইল শীট হিসাবে. তাই আমাকে কটাক্ষপাত করা যাক এখানে এই উদাহরণে এবং দেখতে আমরা কি ঘটছে আবিষ্কার করতে পারেন তাহলে. এই CSS0.html হয়. এবং এখান থেকেই কিছু হয় একটু কুশ্রী পেতে. দুর্ভাগ্যবশত, কারণ ওয়েব জগতে, এইচটিএমএল একা সবকিছু করতে পারে না. এবং যাতে আপনি করতে চান তাহলে আপনার ওয়েব পৃষ্ঠা stylize আপনি আসলে উপর ফোকাস করা প্রয়োজন অন্যভাবে নন্দনতত্ব. তাই এখানে, আমি আমার ওয়েব শরীরের আছে যার ভিতর পাতা একটি বড় div হয়. আর একটি div শুধু বিভাজন মানে. সুতরাং এটি একটি অনুচ্ছেদ কিন্তু এটা মত একই শব্দার্থবিদ্যা নেই লেখার একটা অনুচ্ছেদের. 

এই মাত্র মানে ব্রাউজার, এখানে আসে আমার একটি ওয়েব বড় আয়তক্ষেত্রাকার অঞ্চল পাতা, আমি বিশেষভাবে এটি পরিচালনা করতে চান. যে div শুরু যেখানে এখন, লাইন 21. আর মাত্র একটি অনুমান নিতে. লাইন 21 এর প্রভাব কি পৃষ্ঠার বিষয়বস্তু বাকি? কেঁদ্রীকরণ এটি. এখানেই শেষ. তাই আমরা একটি উপায় দেখা যায় নি আসলে টেক্সট কেঁদ্রীকরণ. 

আসলে, আমার সার্চ ইঞ্জিন, প্রকৃত গুগল থেকে ভিন্ন, সব বাম ওভার সমর্থনযোগ্য ছিল. তাই এখন লাইন 21 সালে, আমি হেই, বলার অপেক্ষা রাখে না ব্রাউজার, পৃষ্ঠার একটি বিভাগ তৈরি. শুধু আমাকে একটি বড়, অদৃশ্য আয়তক্ষেত্র দিতে. যে আমি চাই কিভাবে ওয়েবপৃষ্ঠাটি আমার মনে হয়. নিম্নরূপ এবং তারপর এটি stylize. যারা উদ্ধৃতি চিহ্ন ভেতরে, এখন, একটি দ্বিতীয় ভাষা আমরা আজ চালু বলা Cascading স্টাইল শীট. সৌভাগ্যক্রমে, এটা খুব নয় একটি প্রোগ্রামিং ভাষা, তাই এটা খুব তার সিনট্যাক্স মধ্যে সীমাবদ্ধ কিন্তু খুব তার কার্যকারিতা সীমিত এইচটিএমএল, যেহেতু সব সম্পর্কে একটি ওয়েব পৃষ্ঠার তথ্য অবস্থানসূচক আপ এবং একটি ওয়েব পৃষ্ঠার কাঠামো. সিএসএস সম্পর্কে সাধারণত হয় শেষ মাইল, চারুকলা, আকার ও রঙ এবং পেয়ে একটি ওয়েব পেজ-এর ঠিক ডান বসানো. এবং প্রকৃতপক্ষে, এটা গঠিত হয় কী মান জোড়া দিয়ে. 

এই, টেক্সট ভালো একটি সম্পত্তি একটি কোলন, সারিবদ্ধ, যে মান অনুসরণ করে এই ক্ষেত্রে কেন্দ্র, যা সম্পত্তি. আর এখন আপনি লক্ষ্য নীড় এই জিনিস করতে পারেন. আমি যে সবকিছুই চেয়েছিলেন আমি কেন্দ্রীভূত করা হাইলাইট করেছি যে কেন আমি লাইন 21 আছে এবং সংশ্লিষ্ট লাইন 31. কিন্তু এখন অনুমান জন বলতে চাই হার্ভার্ড, আমার বাড়ি পাতা স্বাগতম. 

কপিরাইট প্রতীক জন হার্ভার্ড. আর আমি প্রথম চাইছেন ঐ লাইনের বেশ বড় হতে. 36 পিক্সেল. তাই এমন একটি শালীন আকার. আর আমি সাহসী হতে তার ওজন চেয়েছিলেন. কিন্তু তারপর যে নীচে, আমি ছোট লেখা চাই. এবং যে নীচে, আমি চাই এমনকি ছোট লেখা. দুঃখিত. আজ একটা ছুটির দিনের মত মতানুযায়ী. 

সুতরাং এখন, আমি এই প্রকাশ কি করলাম? এখানে লাইন 22 একটি এমবেড করা হয় DIV বা নেস্টেড DIV, যদি আপনি হবে. এটা খুব নিজস্ব শৈলী ট্যাগ আছে. আমি 36 এর একটি ফন্টের আকার উল্লেখ করুন. আমি সাহসী একটি ফন্ট ওজন উল্লেখ করুন. এখানে নিচে, আমি শুধুমাত্র 24 পিক্সেল উল্লেখ করুন. এবং পরিশেষে, লাইন 28 সালে, আমি 12 উল্লেখ করুন. তাই শুধু একটি দ্রুত বৈধতা পরীক্ষা হিসাবে এবং একটি মানবিক ফাইন্যান্স এই হিসাবে, পর্দায় যা বলেছি তা আসলে সাহসী হতে যাচ্ছে? যার লাইন আসলে সাহসী হয়? 

শুধু জন হার্ভার্ড. রাইট? লাইন 22 আরে বলছেন ঠিক যেমন কারণ ব্রাউজার, এখানে পৃষ্ঠার একটি বিভাগের. এটা ফন্ট সাইজ 36 পয়েন্ট করুন. ফন্ট ওজন গাঢ় করুন. যত তাড়াতাড়ি আপনি পৌঁছানোর হিসাবে সংশ্লিষ্ট শেষ ট্যাগ বা লাইন 24 বদ্ধ ট্যাগ, তার মানে, আরে ব্রাউজার, এটা আপনি কি করছেন যাই হোক না কেন কাজ বন্ধ. এবং খেয়াল করুন, যদিও, পরিষ্কার করা লাইন 22 এই বৈশিষ্ট্যাবলী সব আছে শৈলী মত, যখন আপনি লাইন 24 সালে ট্যাগ বন্ধ করুন, আপনি শুধুমাত্র ট্যাগ নাম উল্লেখ করেন. 

আপনি শব্দ শৈলী পুনরাবৃত্তি না বা যারা কোট ভেতরে যে কিছু. আর আমি এখন এই তাকান যদি তাই হয় আমার ব্রাউজারে, এর নেওয়া যাক একটি শেষ ফলাফল তাকান. আমাকে যেতে দাও এগিয়ে সিএসএস 0 যা এই ফাইলে. এবং এটি প্রশংসনীয় প্লেইন এখনও কিন্তু বেশ আকর্ষণীয় পেয়ে. কিন্তু সেখানে দেখা যাচ্ছে আমি এখানে কি করতে পারেন অন্যান্য বিষয়, এবং যার ফলে ঝুঁকির মধ্যে সম্পূর্ণ অসহ্য এই, এখানে যে লক্ষ্য আমার আমার ওয়েব পৃষ্ঠার শরীর, আমি মজার কিছু করতে পারেন বিজি বা পটভূমির রঙ মত. 

এবং দ্রুত, আপনার প্রিয় রং কি? সবুজ আমি শুনেছি. ঠিক আছে. সুতরাং এখন, আমি এখন রিলোড আঘাত, আমরা একটি সবুজ ওয়েবপৃষ্ঠাটি আছে. ঠিক আছে, তাই যে খারাপ না. এবং এখন, আমি এই করতে চান তাহলে সত্যিই শান্ত, আমি আমার লেখার রং করতে পারেন এমনকি লাল. তাই আসুন এই মত দেখায় তা দেখতে দিন. এখন এটা বেশ ভাল খুঁজছেন. এবং এখানে নিচে, আপনি যদি সত্যিই কেউ সঙ্গে জগাখিচুড়ি চান অথবা আপনি হতে চান যাদের এক যারা একটি ওয়েব পরিদর্শন করানোর চেষ্টায় রত চেষ্টা পাতা তারা গুগল tricked করেছি কারণ চিন্তা আভা আছে মূল শব্দ দেখা যাক করার মত নিয়ে, পুনরায় লোড করুন. কেউ জানেনা কোথায় গিয়েছে? আর আমাদের আছে তা. ঠিক আছে. আমি একটি সরাইয়া হিসাবে এই বলে তাই, আমরা করব কয়েক সপ্তাহের মধ্যে এই জিনিস সম্পর্কে কথা আমরা যে বিষয়ে কথা যখন নিরাপত্তা, আপনি যদি আসলে এম্বেড পুরো কাঁদি একটি ওয়েব পেজ-এর কীওয়ার্ড, তারা একটি দৃশ্যমান নয়, এমনকি যদি গুগল মত মানুষের, কেউ, অবশ্যই, এখনও আসলে এই খুঁজে পেতে পারেন. ঠিক আছে, তাই যে সুন্দর প্রশংসনীয় দ্রুত অসহ্য. 

এবং বাস্তবিকই, এটা সব না আমার নিজের ওয়েব ভিন্ন যে অনেক স্নাতক, যেমন পাতা যা আমি এটি প্রায় googling শুরু আমার পুরোনো ওয়েবসাইটের গত সংস্করণ. এটা বেশ খারাপ ছিল. আসলে, আমি খুঁজে পাইনি শুধু বর্গ আগে এক. কিন্তু সেখানে আউট খারাপ আছে. এই দৃশ্যত ছিল আমার 1996 সালে হোম পেজে. দৃশ্যত: আমি ভেবেছিলাম এটা ছিল মানুষ তাদের নাম জিজ্ঞাসা করতে উপযুক্ত তারা আগেই আসলে আমার ওয়েব পেজ দেখুন. 

তখন আমি তাদের দেখিয়েছেন সম্ভবত কিছু মূঢ়. আমি পরবর্তী সময়ের জন্য আরো খনন আপ করব. কিন্তু এখন জন্য, এর দিন নকশা একটি বিট বিবেচনা. আমরা শৈলী সম্বন্ধে বিস্তারিত আলোচনা করেছি. আর এই পৃষ্ঠার পর্যন্ত এবং আমি লিখিত করেছি সবচেয়ে সবকিছু শৈলীগত বেশ পরিষ্কার. কিন্তু নকশা সম্পর্কে কি? ওয়েল, অতিরেক অনেক আছে আমি এখানে কাজ করছি কি এ. 

আমি শব্দ উল্লেখ করেছি জায়গা কয়েক রঙ. আমি কয়েক ফন্টের আকার উল্লেখ করেছি জায়গা কয়েক জায়গায় এবং সাহসী. এবং মৌলিকভাবে, আমি সহ আছি দুই ভাষায় mingling. আমি আমার ট্যাগ এবং সঙ্গে এইচটিএমএল পেয়েছেন আমার বৈশিষ্ট্যাবলী এবং তারপর হঠাৎ সব, কোট মধ্যে, আমি আছে দ্বিতীয় ভাষা আজ আবার, শুধু এই যা বলা সিএসএস, কী মান জোড়া বা এই বৈশিষ্ট্য কোলন দ্বারা বিভাজিত. 

এটা যে অনেক দেখা যাচ্ছে মত সি যেখানে আমরা বিবেচনার শুরু করতে পারেন হেডার ফাইল মধ্যে কিছু কোড, তাই আমরা HTML এ একই কাজ করতে পারেন. নিম্নরূপ এবং যে দিকে একটি পদক্ষেপ. এই সংস্করণ, CSS1.html যে লক্ষ্য সঠিক একই ওয়েবপৃষ্ঠাটি গঠনের. তাই আমি একটি আভা পেয়েছেন divs এর, কিন্তু এই সময় আমি করেছি আলোয়ান পরিত্রাণ অর্জিত আপনি দেখতে পাবেন DIV. 

আর আমি ঐ তিন divs দিয়েছি শীর্ষ, মধ্যম, এবং নীচে, স্বতন্ত্র ID. এই কারণ দ্বারা সুন্দর ঐ বিভাগের দেবার পাতা অনন্য শনাক্তকারী এর, আমি অন্যত্র তাদের উল্লেখ করতে পারেন. কোথায়? আচ্ছা, আমাকে স্ক্রল আপ দিন. এবং এ পর্যন্ত, যে কোনো সময় আমরা তাকিয়ে থাকেন একটি ওয়েব পৃষ্ঠা প্রধান এ, কি আমরা ছিল করেছি শুধুমাত্র ট্যাগ একটি ওয়েব পৃষ্ঠা প্রধান? একটু জোরে. শুধু শিরোনাম পর্যন্ত. কিন্তু সেখানে দেখা যাচ্ছে কয়েক অন্যান্য বিষয় আপনি, সেখানে এক করা যাবে যার ফলে এটি একটি শৈলী ট্যাগ বলা হয়. সুতরাং, একটি মুহূর্ত আগে, আমরা লাগছিল একটি শৈলী বৈশিষ্ট্য এ. একটি শৈলী ট্যাগ আছে দেখা যাচ্ছে. এটি ভেতরে জন্যে একটি ওয়েব পৃষ্ঠা প্রধান. এবং এখন আমি কি করছি লক্ষ্য. আমি এই ভেতরে আছে শৈলী ট্যাগ নিম্নলিখিত. আমি আক্ষরিক লাইন 20 উল্লেখ করছি আমি stylize করতে চান যে একটি ট্যাগ নাম. 

তারপর আমি খোলা কোঁকড়া বক্রবন্ধনী আছে এবং কোঁকড়া বক্রবন্ধনী বন্ধ. , সি আত্মা তাই অনুরূপ কিন্তু আবার, এই একটি ফাংশন নয়, এই এখানে মাত্র অন্বিত বিস্তারিত. এবং তারপর অবশ্যই, আমি বলছি ব্রাউজার, আরে ব্রাউজার, পৃষ্ঠার সমগ্র শরীর করা কেন্দ্রে একটি টেক্সট প্রান্তিককরণ আছে. এবং তারপর এই নিম্নলিখিত বলছে. আরে ব্রাউজার, আপনি একটি HTML দেখতে হলে পৃষ্ঠায় উপাদান বা ট্যাগ করে , উপরের একটি অনন্য শনাক্তকারী হয়েছে তাই হ্যাশ চিহ্ন এখানে শুধু মানে শীর্ষ অনন্য ধারণা, এগিয়ে যান এবং তার ফন্টের আকার করতে 36 এবং তার ফন্টের ওজন সাহসী. 

আরে ব্রাউজার, যার একটি উপাদান আইডি এটা 24 পিক্সেল করতে, মধ্যবিত্ত. আর হেই ব্রাউজার, আপনি দেখতে যদি একটি নীচে ধারণা, এটি 12 পিক্সেল করতে. শেষ পর্যন্ত প্রভাব ঠিক স্যাম হয়. আমি সিএসএস 1 ঢোকা, পাতা একই দেখায়. কিন্তু আমরা দিকে একটি পদক্ষেপ আছেন একটি সামান্য নকশা. আমার এখন CSS 2 এখানে ফিরে যাওয়া যাক এবং আমি কাজ করেছি আর কী দেখতে. 

এখন পাতা সত্যিই, সত্যিই পরিষ্কার. আসলে, আমি সব ফিট করতে পারে এখানে একটি পৃষ্ঠায় বিষয়বস্তু. কিন্তু নতুন কি ট্যাগ আমি আছে একথাও ঠিক যে, চালু? লিংক. আর এটি একটি ট্যাগের জন্য ভাল নাম না এটা অর্থে কোন লিঙ্ক নয় কারণ আমরা এটা জানি, কিন্তু এই মানে যে অন্য কোনো ফাইল একটি লিঙ্ক. এই ধারালো সি অন্তর্ভুক্ত পূর্ববর্তী সম্প্রদায়সমূহের মতই ধরনের 

এই HTML এ উপায় ব্রাউজার আরে বলে, বিষয়বস্তু পেতে যেতে ফাইল css2.css বলা. সম্পর্ক, আমার, এটা একটি স্টাইল শীট যে হয়. এবং প্রকৃতপক্ষে, যে কি এক Cascading স্টাইল শীট মানে এস এর. এই স্টাইল শীট হয়. এটা ধারণকারী শুধু টেক্সট ফাইল সম্পত্তি আভা. এটা শৈলী আভা এর আপনি একটি পাতা প্রয়োগ করতে চান. 

আর তাই এই দৃশ্যত হয় একটি দ্বিতীয় ফাইল উল্লেখ. আর আমি যে, CSS2.css খুলে দেয়, সব আমি কাজ করেছি বিজ্ঞপ্তি কপি এবং সব পেস্ট হয় এই ফাইলে এই. আর এখন, আপনি না করেছি, এমনকি যদি আগে এই জিনিস কোডেড, শুধু সঙ্গে বিবেচনা প্রবাদতুল্য ইঞ্জিনিয়ারিং Hat দেখো, কেন এই একটি হল সম্ভবত ভাল ডিজাইন? যারা CSS এর বৈশিষ্ট্য আউট ফ্যাক্টরিং, তাদের নিজস্ব ফাইল সেগুলি নির্বাণ. যদিও আমরা এই মীমাংসিত সমস্যা মত পাঁচ মিনিট আগে প্রথম সংস্করণে. 

আমরা উন্নত না থাকেন পাতা শৈলীগত, এই মাত্র ভালো কিছু অর্থে নকশা. তুমি কি ভাবছ? হ্যা. আরো নমনীয় কিভাবে? হ্যা. আপনি যেতে চান, তাই ফিরে এবং কিছু পরিবর্তন, এখন, আপনি এক জায়গায় আছে যেখানে আপনি কিছু পরিবর্তন করতে পারেন. এবং সত্য, কিছু মত সমস্যা, সাত সেট আমরা একটি বাস্তবায়ন করব যেখানে স্টক ট্রেডিং ওয়েবসাইট, একটি আছে যাচ্ছে পাতার আভা. আর এটা সত্যিই হবে বিরক্তিকর আপনি সিদ্ধান্ত নিতে পারেন, এইচএম, আমি সত্যিই আমি চাই, 24 পিক্সেল পছন্দ করি না এটা 28 পিক্সেল বা সামান্য বড় হতে. এবং তারপর একটি করতে হবে এটি এবং প্রতিস্থাপন গ্লোবাল অথবা আপনার ওয়েবসাইট এর ফাইল খুলুন কেবলমাত্র আসলে একটি মান পরিবর্তন করতে. এই শৈলী খুঁজে ফ্যাক্টরিং দ্বারা এক কেন্দ্রীয় জায়গা মধ্যে, আপনি এখন একটি টেক্সট ফাইল খুলতে পারে কোন প্রোগ্রামে CS50IDE মধ্যে, , এটি পরিবর্তন এটি সংরক্ষণ করুন এবং কাজ. আপনি ঐ প্রচারিত করেছি সর্বত্র পরিবর্তন. এবং যে একই হতে হবে নামের প্রারম্ভে বিন্দু H ফাইলে পাশাপাশি. তাই কোন প্রশ্ন এইভাবে পর্যন্ত এই সিনট্যাক্স উপর? ঠিক আছে, তাই আমরা করেছি সবকিছু মনে হয় কাজ আসলে ছাড়া হাইপারলিঙ্কস বাস্তবায়ন. তাই আসুন এগিয়ে যান এবং এই কাজ করা যাক. আমাকে এগিয়ে যান এবং এখানে একটি নতুন ফাইল তৈরি. আমি কল করার জন্য এটি করা যাচ্ছে না link.html, আজকের কোড রাখা. 

আর আমি খোলা কাজ করতে যাচ্ছি বন্ধনী ডক টাইপ এইচটিএমএল. এ একটি সরাইয়া, এই জিনিস হিসাবে উপরে, এই ডক টাইপ ঘোষণা, এটা অদ্ভুত যে শুধুমাত্র এক বিস্ময়বোধক বিন্দু সঙ্গে. আপনি শুধু সেখানে এটা করতে হবে এবং এটা আমরা এইচটিএমএল সংস্করণ 5 ব্যবহার করছেন মানে. এর পুরাতন সংস্করণ ভাষা অনেক লম্বা ছিল আপনি প্রয়োজন যে স্ট্রিং সেখানে লাগাতে. সুতরাং এখানে লিঙ্ক নামক একটি উদাহরণ. 

আমি এখানে আমার ওয়েব পৃষ্ঠার একটি শরীরের প্রয়োজন. আর এখানে, একটি href সমান এর HTTP://www.disney.com বলা যাক এবং আমার প্রিয় ওয়েবসাইট, আমরা বলবো. ঠিক আছে, তাই এটি একটি খুব নির্দোষ, ব্যবহারকারী বন্ধুত্বপূর্ণ পাতা. আমি এখন আমার তালিকা ঢোকা এখানে তালিকা এবং link.html খুলুন, আমরা অধি টেক্সট আছে. 

এবং প্রকৃতপক্ষে, এই হল যেখানে HTTP- র মধ্যে এইচ থেকে আসে. হাইপারটেক্সট ট্রান্সফার প্রোটোকল টেক্সট হস্তান্তর সম্পর্কে যে অন্যান্য রিসোর্সের হাইপারলিঙ্ক আছে. এবং প্রকৃতপক্ষে, এখানে, পরিচিত বিপরীতমুখী, তাহলে নীল লিঙ্কে ক্লিক করেন যে, আসলে Disney.com আমাকে নিয়ে যাবে. এখন, ওহ, যে শীঘ্রই আসছে. ঠিক আছে, তাই এখন, কি হয় কিছু এই প্রভাব? 

এবং অকপটে, বিশ্বের শুরু একটু বেশি পরিচিত পেতে এবং একটি সামান্য ভীতিজনক কিন্তু একটু বেশি আপনি একবার শুরু সমর্থনযোগ্য স্ব এইসব জিনিস বুঝতে. মতভেদ, আপনি কিছু, আপনি যান, তাহলে কারণ আপনার জিমেইল স্প্যাম ফোল্ডারে মাধ্যমে বা এমনকি আপনার ইনবক্স, আপনি সম্ভবত করেছি ইমেইলের কিছু অর্জিত যে পরিবর্তন করার জন্য আপনাকে জিজ্ঞাসা করে আপনার পাসওয়ার্ড হয়তো বা হয়তো যাচাই আপনার PayPal পরিচয়পত্র বা যে কোন বস্তু. 

এবং বাস্তবিকই, আপনি হতে পেয়েছি এখানে ক্লিক করলে ভালো বলছেন যে কিছু আপনার PayPal এর পাসওয়ার্ড রিসেট করতে. এবং এখন, যদি, লক্ষ্য এই Disney.com নয় কিন্তু মত badplace.com ও , রিলোড নোট যে এখানে টেক্সট সবটা কিছু বলতে পারল না. এবং সত্য, এই মাত্র শব্দ হয়. কেন আমি আসলে সুপার দূষিত হতে না এবং http://www.paypal.com বলে. 

আপনার PayPal রিসেট এখানে ক্লিক করুন পাসওয়ার্ড এবং এখন পুনরায় লোড করুন. এই অধিকার প্রশংসনীয় বৈধ দেখায়? আমি উপর ক্লিক করা হবে, মানে শুধু এই বলে যে একটি ইমেইল. কিন্তু এখানে বৈপরীত্য লক্ষ্য. এটা www.paypal.com বলেছেন, এবং আসলে, এক মিনিট অপেক্ষা করুন, আমরা যে আপনি চান জানি নিরাপত্তার জন্য এর. তাই এখন, www.paypal.com মধ্যে HTTPS যেতে, কিন্তু আপনি আগে এই কাজ করেছি, অভ্যাসের মধ্যে পেতে পারি এখানে একটু লিঙ্ক উপর ঝুলে. এবং এটি দেখতে কঠিন সেখানে পর্দায়, এবং তা এখানে না সব যে সহজ. কিন্তু উপায় নিচে এখানে ছোট্ট কোণে আসলে ব্রাউজার আছে আমরা চলুন যে আপনি বলুন পরিবর্তে Paypal.com এর badplace.com করতে. এখন, যেখানে আমরা কি বলতে চাচ্ছেন? আমরা সম্পন্ন করেছি আজ সকল উদাহরণ, আমরা হার্ড কোডেড এবং নিজে আউট টাইপ করেছি. ওয়েব অবিশ্বাস্যভাবে হয় নীরস যখন আপনি হার্ড যে কন্টেন্ট যাতে আপনার ওয়েব পেজ কোড স্ট্যাটিক এবং কখনও পরিবর্তন হয়. অবশ্যই, সব আমাদের প্রিয় ওয়েবসাইটের আজ, এটা জিমেইল বা টুইটার বা কিনা ফেসবুক বা অন্যদের কোন সংখ্যা গতিশীল হয়. তারা পরিবর্তন করছি ব্যবহারকারীর ইনপুট থেকে প্রতিক্রিয়া শুধু গুগল সার্চ ফলাফল ভালো. 

তাই বুধবার, আমরা কি হয় আমরা HTML এবং CSS এর ভূমিকা ছেড়ে আমরা গ্রহণ করা এবং আমাদের পিছনে এখন আমরা যে হালকাভাবে এটা জানেন এবং আমরা পরিচয় করিয়ে একটি নতুন প্রোগ্রামিং ভাষা পছন্দ যা বলা পিএইচপি, সি, আমাদের দিতে যাচ্ছে আসলে প্রোগ্রাম তৈরি করার ক্ষমতা নিজেদের যে আউটপুট উৎপন্ন. এই ক্ষেত্রে, আমরা ব্যবহার করা হবে পিএইচপি পরিবর্তনশীল ওয়েব উৎপন্ন এই নতুন ভাষা ব্যবহার করে পেজ. বুধবার যে যাতে আরও বেশি. দেখা হবে তাহলে. 

[সঙ্গীত বাজাচ্ছি]