[موسیقی] 

DAVID J مالان: این CS50 است و این آغاز هفته 7 است. بنابراین تماس استقبال می کنیم. و شما ممکن است به یاد آورید که در مشکل مجموعه چهار، یک بیت از یک شکار روبنده وجود دارد برای برخی از جوایز ارزشمند ما به موجب آن پس از بازیابی عکس ها از کارکنان هر دو در اینجا و در نیوهیون، شما برای پیدا کردن به عنوان بسیاری از به چالش کشیده شد این دانشمندان کامپیوتر به عنوان شما می توانید. و ما یک کل کردم دسته از ارسالی. حال من می خواهم به اشتراک گذاشتن چند با شما در اینجا امروز. 

و ما همه از این آنلاین ارسال. اما به طور خاص، من می خواستم جلب توجه شما را به خوبی to-- یکی، سام در کاملا چند از آنها بود به طور کلی نما مثل این. اما به نظر می رسد که از امروز صبح، برنده بود کسی خاص به نام کن با 24 از کارکنان در دوربین گرفته و یا چند زمانی که شما به را حساب کارکنان چند در تصاویر. تصویر در اینجا کن است به مریم در نیوهیون. 

در حال حاضر، کن، هر چند، تبدیل خارج کمی مورد گوشه است که هنوز در گذشته اتفاق افتاده است. به نظر می رسد که رخ نمی دهد به من برای قرار دادن چاپ خوب در مشکل مجموعه چهار که می گوید که کارکنان فاقد شرایط لازم برای جایزه افسانه چون کن، البته، یکی از عکاسان در کارکنان ما. در حال حاضر، با که گفت، او در اصل من نوشت به لطفا این عکس ها ارسال کنید آنلاین. من فکر می کنم در بخش های بزرگ چرا که بسیاری از عکس ها این عکاس و جو در زمان نگاه چیزی کمی شبیه به این. و مانند آن. 

اما کن می خواهم به من به شما اطمینان بدهم که او یک عکاس بسیار خوب است، او یک حرفه ای، او طول می کشد عکس هایی که تار نیست، که در تمرکز بهتر، و او زمان کاملا چند از کارکنان خود. اما نه تنها اذعان کن، آنچه که ما فکر کردم ما انجام است از طریق لیستی از رفتن دانش آموزان واقعی که ارائه شده است. و معلوم است که با لنس 15 عکس از این برنده ما بود. 

و این تصویر لنس با کولتون است، با Skaz، با خودم، و با سام. اما پس از آن معلوم می شود که به عنوان 11:46، بنابراین فقط یک کمی پیش، من رفتم به ایمیل من و پیدا شده که ما هنوز یک ارسال داشته توسط یک دانش آموز به نام بانی که ایمیل فقط در این گفت. قصد ندارم به دروغ، من انجام این کار در کلاس. و سپس اقدام به ضمیمه تنها 14 عکس، یک خجالتی از لنس 15. 

اما در عکس بانی، آن را تبدیل از اعضای هیات های متعدد بود، سام در میان آنها، چه خوب، ما فکر می کنیم انجام است اذعان هر دو از این. بنابراین علاوه بر گرفتن Dropbox به فضایی که هر کس که شرکت دریافت می کند، این دو بخش نیز خواهد شد دریافت ناهار پذیرایی خوب برای آنها و بخش خود آمپول این هفته آینده. و به این ترتیب شما از ما می شنوید، لنس و بانی، در مورد آن. تبریک آنقدر بزرگ به آنها. در حال حاضر، کسانی از شما که خواهد بود مانند ناهار به طور کلی مطمئن شوید که CS50 ناهار در کمبریج و New Haven این روز جمعه است. برو به RSVP بریده بریده وب سایت CS50 است. و در حال حاضر یک کلمه در سمینارها. بیشتر curricularly. بنابراین ما در حال نزدیک شدن به نقطه از ترم که در آن شما باید شروع به فکر کردن در مورد پروژه های نهایی. و در واقع، فقط در یک بیت، خواهد شد اصطلاح طرح پیش به علت باشد. طرح بنابراین پیش به معنای تاثیر است من خیلی کم و واقعا فقط یک فرصت برای شما را به نوشتن یک یادداشت کوتاه همکار آموزش خود را به مطلع کردن او آنچه را که شما فکر می ممکن است بخواهید برای پروژه نهایی خود را انجام دهد. 

در حال حاضر، بسیاری از دانش آموزان به پایان انجام پروژه های وب نهایی است. و البته، ما فقط در حال هفته در حال حاضر در این آخرین و فراتر از آن از غواصی به برنامه نویسی وب. بنابراین نگران نباشید اگر شما نمی مطلقا هیچ ایده چگونه شما می توانید ایده ساخت که شما ممکن است در ذهن خود داشته باشد. این است که واقعا فقط یک تابع نیروی به شما فکر و صحبت کردن با TF خود را در مورد آن. اما به شما کمک کند با آن، و با پروژه های نهایی در نهایت، مطمئن شوید که CS50 دارای یک سنت ارائه سمینارها. 

و این اختیاری هستند، دست به دست در، و یا سخنرانی بر اساس فرصت برای کسب اطلاعات بیشتر در مورد موضوعاتی که فرعی کمی به دوره را برنامه درسی، اما با این وجود فوق العاده مواد به درایو پروژه های نهایی. و به این ترتیب این فهرست است که CS50 کارکنان در نیوهیون با برای تا در این سال در مورد IOS برنامه نویسی، آندروید برنامه نویسی، توسعه بازی، و مجموعه ای از ابزار بیشتر و زبان و تکنیک های. 

بنابراین چشم در وب سایت CS50 را نگه دارید. و در عین حال، اگر شما می خواهم به ثبت نام علاقه خود را در هر یک از این، رفتن به بریده بریده ثبت نام CS50 است. و ما پس از آن به دنبال خواهد داشت تا به عنوان به روز و ساعت پرواز و مکان و همه چیز همه چیز ترین تواند جریان و همچنین در تقاضا در دسترس پس اگر شما در واقع می تواند آن را. بنابراین بدون ado بیشتر، ما ترک کردن زمان آخرین با دریافت کنید. 

و این مانند این پیام است که بود در داخل پاکت های مجازی، فراخوان، که ما از روتر به روتر به تصویب روتر بین یک مرورگر اینترنت و وب سرور. و این پیام نگاه چیزی کمی شبیه به این. این پیام محرمانه بود که در واقع در داخل یک پاکت بود نوشته شده در یک تکه کاغذ که خط اول می گوید به معنای واقعی کلمه، دریافت بریده بریده. 

و فقط به عنوان بررسی سلامت عقل، چه معنی بریده بریده است؟ چه بریده بریده به معنای زمانی که درخواست یک وب سایت؟ شما آن را درخواست تمام وقت. ترین هر زمان شما یک وب سایت، شما می در واقع نه نوع در یک نام فایل. شما احتمالا فقط به Facebook.com بروید، را وارد کنید، gmail.com، و یا مانند. و چه بریده بریده نشان می دهد؟ چه فایل؟ و یا چه صفحه، به طور خاص؟ 

شاخص، آره. بنابراین صفحه پیش فرض. بنابراین اگر شما یک فایل مشخص نیست نام ما شروع به دیدن، شما در واقع فقط درخواست من صفحه پیش فرض از فیس بوک یا من صندوق پستی من را یا به من صفحه پیش فرض از اخبار در وب سایت سی ان ان و یا مانند. و یک سرور سپس به پاسخ که پیام با چیزی مثل این، گفت: بله، من HTTP نسخه 1.1 صحبت می کنند. 

200 است، که یک وضعیت کد است که ما به ندرت به انسان تا به حال دیدن دلیل آن خوب است. چون یعنی OK، درخواست دریافت میشه و به کار گرفته به درستی. و نوع محتوا ظاهرا در پاسخ است اغلب، اما نه همیشه، متن. و به طور خاص، HTML. و این در واقع که در آن ما در امروز است. 

پس در واقع، من قصد دارم برای رفتن جلو و باز کردن یک مرورگر. من قصد دارم به استفاده از کروم، شما می توانید با استفاده از ترین هر مرورگر در هفته به آمده است. ما به طور کلی توصیه کروم به دلیل آن است به خصوص خوب برای توسعه دهندگان نرم افزار است. این رو بسیاری از ساخته شده است در ابزار است که آن را آسان تر به منظور توسعه نه تنها HTML و CSS، چیزهایی که ما را شروع به صحبت کردن در مورد امروز، بلکه به زبان های دیگر نیز هست. 

و من قصد دارم به پیش بروید و to-- من قصد دارم به کنترل کلیک کنید و یا راست در هر نقطه با کلیک بر روی یک صفحه وب. و من قصد دارم برای رفتن به بازرسی عنصر. و من قصد دارم به نیشگون گرفتن و کشیدن من صفحه نمایش فقط یک کمی اینجا. اجازه بدهید من این حرکت به پایین. پس این است که آنچه به نام بازرس کروم است. پس این است که مانند یک اشکال زدایی ابزار به کروم ساخته شده است. 

همه شما در حال حاضر این دارند اگر شما با استفاده از Chrome شده است. و آن را اجازه می دهد تا شما را به دیدن چه خبر در زیر هود برخی از صفحه وب است. بنابراین اجازه دهید در واقع یک در این نگاه شرح زیر است. این ویژگی های راه و ما در مورد مراقبت از امروز. اما این زبانه ها وجود دارد بیش از اینجا. عناصر، شبکه، منابع، جدول زمانی، و برخی چیزهای دیگر. من قصد دارم به کلیک بر روی شبکه برای یک لحظه. 

و آن را یک کمی خسته در نگاه اول است. اما آنچه که من قصد دارم به انجام است اجازه دهید من آن را کمی ساده کنید. من قصد دارم به نوبه خود بر روی ضبط نور به طوری که آن را به رنگ قرمز. و من قصد دارم به حفظ ورود به سیستم. و این است که فقط یک کمی چیزی که من نمیفهمد در طول زمان که رفتن را به صرفه جویی هر چیزی که در مرورگر اتفاق می افتد. و اکنون من قصد دارم برای رفتن به http://facebook.com. 

در واقع، اجازه دهید انجام WWW برای اندازه گیری خوبی، بریده بریده. داخل شدن. بنابراین یک URL بسیاری است که از شما ممکن است سفر کرده اند. و در حال حاضر فیس بوک وب صفحه می آید تا در بالای صفحه. و سپس یک دسته کامل از چیزهای توسط در پایین پرواز کرد. و در واقع، معلوم است که در هنگام مراجعه به Facebook.com، شما نه تنها ساخت یک درخواست HTTP، معلوم است که رفتن به Facebook.com می فرستد 41 از کسانی که پاکت نامه، هر کدام با درخواست GET خود را دارد، به عنوان نشان داد، البته در پشت صفحه نمایش در اینجا، در پایین صفحه نمایش، آن را نشان می دهد که، در واقع، من مرورگر ساخته شده 41 درخواست. 

و در مجموع، آن منتقل 861 کیلوبایت و آن را برای برخی از دلیل و جو در زمان عنوان بسیاری از هشت ثانیه برای دانلود همه از آن. به طوری که در واقع یک کمی عجیب و غریب که سایت فیس بوک می کنند که طولانی است، اما پس از آن باشد در این مورد. در حال حاضر، همه از این من واقعا مهم نیست در مورد به جز بالاترین درخواست. بنابراین اجازه دهید این یکی از سمت راست به اینجا بروید و اجازه دهید من زوم کردن برای فقط یک لحظه. 

و اجازه دهید من در این زوم. پس آنچه که من در سمت چپ حتی اگر انجام داده ام در بسیاری در رفتن بیش از اینجا وجود دارد این است که من مشخص کردم Facebook.com و پس از آن توجه کنید که من اسکرول به پایین، اسکرول به پایین، اسکرول به پایین، به درخواست هدر. و شما خواهید دید که کروم نشان من اساسا محتویات درونی از درخواست من ساخته شده است. آن را در کاملا به همان قالب بندی نشده راه، اما توجه داشته باشید اشاره ای وجود دارد، توجه داشته باشید اشاره ای به میزبان وجود دارد، Facebook.com، مسیر، یا بریده بریده، که فایل من درخواست شده است. 

و آنوقت من حرکت بازگشت به بالا، ما در واقع دید که چه فیس بوک بازگشت به من است همه از این هدر. بنابراین در داخل از آن پاکت مجازی در واقع بسیاری از جفت کلید. یک کلمه، یک روده بزرگ، و سپس یک مقدار است. یک کلمه، یک روده بزرگ، و یک مقدار است. این هدر به نام هستند. و جزئیات راه بیشتر وجود دارد در اینجا از ما در واقع در حال حاضر در مورد مراقبت. 

اما این دوم به است یکی از آخرین پایین وجود دارد، توجه کنید که سرور Facebook.com است، در واقع در اینجا گفت می آید برخی از متن HTML. پس همه از این است که می گویند که هنگامی که شما درخواست وب صفحه از یک مرورگر به یک سرور، که سرور پاسخ با یک پاکت خاص خود را دارد که در داخل آن متن است. به عبارت دیگر، HTML. زبان نشانه گذاری ابرمتن. که زبان دیگری است که ما امروز معرفی که انسان و یا کامپیوتر تولید به منظور پیاده سازی صفحات وب است. 

به طور خاص، اجازه دهید نگاهی به این. من قصد دارم به حال حاضر به بازگشت به وب سایت فیس بوک است. و من قصد دارم فقط کنترل کلیک کنید و یا کلیک راست و کلیک بر روی مشاهده منبع صفحه. و حتی اگر شما کروم استفاده کنید، اینترنت اکسپلورر می توانید انجام دهید این، فایرفاکس می توانید این کار، سیاحت اکتشافی در افریقا می توانید این کار، حتی اگر منو گزینه های ممکن است کمی متفاوت است. و این است که HTML مارک و شرکت در فیس بوک نوشته شده است. 

و در مجموع، این زبان در اینجا پیاده سازی آبی و صفحه سفید که ما شاهد یک لحظه پیش. در حال حاضر، این است که کمی خسته کننده باشد. اما اگر ما نگاه کردن در سمت چپ بالا، ما رفتن به شروع به دیدن برخی از الگوهای. به نظر می رسد در بسیاری وجود دارد از این براکت زاویه باز و پس از آن این کلمه کلیدی HTML وجود دارد. در اینجا یکی دیگر باز براکت زاویه و سر. 

در اینجا این است، اگر ما حرکت به پایین و پایین و پایین، من رفتن به جلو بروید و سعی کنید دنبال چیزی گشتن. وجود دارد راه در سمت راست در اینجا بدن براکت باز است. و به یاد از آخرین زمان است که ما پیشنهاد که ساده ترین صفحه وب که یک انسان ممکن است ارسال ممکن است یک چیزی کمی شبیه به این. تگ HTML باز، سر باز برچسب، تگ عنوان باز، پس از آن عنوان بسته، سر بسته، باز تگ body، متن، بسته بدن، HTML بسته شده است. 

اما یک مکث در اینجا برای فقط یک لحظه. این کد، حتی اگر شما پیش از این هرگز در آن نوشته شده اما هنوز هم کاملا نمی دانند که چه خبر است، به نظر می رسد خیلی خوب است. درست، آن را بسیار تمیز. این بسیار سبک خوب است. بسیاری از دندانه و فضای سفید است. فیس بوک است. پس چرا فیس بوک بسیار است بدتر از من در نوشتن HTML؟ ظاهرا. 

درست است، این است مانند یک از پنج برای سبک. یک دلیل قانع کننده وجود دارد برای آنها را به قطع این گوشه. همه حق است، به طوری که آنها نمی خواهند آن را آسان تر برای شما به آن را بخوانید. بنابراین در برخی از احساس، آنها رازآلوده آن، نوع آن تقلا حداقل تا زیبا که آن را برای مای اسپیس سخت تر برای رفتن و پاره کردن آنها صفحه خانگی و HTML برای آن است. به نظر می رسد که با برنامه هر چند، از جمله کروم، ما می توانیم این تا به راحتی تمیز می کند. پس از آن به عنوان دلیل کاملا که. چه چیز دیگری ممکن است ایجاد کند. آره. آره، هزینه های داده فضای سفید است. منظورت چیست؟ بله دقیقا. اگر شما ضربه کلید Tab زیادی یا پیامدهای نوار فضا، در نظر بگیرید. بنابراین هر کلید بر روی صفحه کلید خود را است [نامفهوم] به عنوان یک بایت نشان داده است. 

بنابراین فرض کنید که علامت گذاری به عنوان یا هر یک از سازندگان این روزها بازدید از فاصله فقط یک بار در این صفحه HTML که نشان دهنده یک پیام خصوصی به فیس بوک. و فیس بوک است که بسیاری از کاربران این روز است. بنابراین فرض کنید که صفحه فیس بوک امروز هم توسط یک میلیارد نفر بازدید کردند. و کسی در فیس بوک است در نوار فضا فقط یک بار. 

بنابراین یک بایت اضافی، یک میلیارد درخواست ها، چگونه اطلاعات را بسیار بیشتر از فیس بوک است انتقال از طریق اینترنت به خاطر کسی که ضربه فاصله بر روی صفحه کلید خود را؟ یک میلیارد بایت، یا یک گیگابایت داده است که از سرورهای فیس بوک ارسال به مردم در سراسر جهان بدون هیچ دلیل خوب. در حال حاضر، این فقط یکی از فضا است. 

تصور کنید اگر ما در واقع این تمیز چیزی و آن فاصله دار و اضافه مقدار زیادی از فضای سفید و شخصیت تب و فاصله، شما را تا پایان گیگابایت هزینه ها، اگر نه ترا بایت فضا. و به این ترتیب فوق العاده در رایج جهان واقعی توسعه وب است به خرد کردن کد خود را. و ما در نهایت خواهید دید چگونه شما ممکن است انجام این کار. 

اما امروز، ما شروع به نوشتن کد که در واقع توسط ما انسان قابل خواندن است. به نظر می رسد، هر چند، اگر شما به عقب به این ابزار در کروم بازرسی عنصر، پیش از این، ما در تب شبکه بود. به نظر می رسد که اگر شما به رفتن تب عناصر، آنچه شما در واقع ببینید است کروم بسیار چاپ نسخه همان HTML. بنابراین ما آن را deobfuscated است. پس از آن هیچ بازی برای یک کامپیوتر است. و در حال حاضر واقع شما می توانید در اطراف کلیک کنید و شروع برای دیدن سلسله مراتب است که یک صفحه وب. بنابراین اجازه دهید در واقع انجام این کار. من قصد دارم به جلو بروید و باز کردن در مک من یک برنامه به نام ویرایش متن. به یاد بیاورید که این فقط یک برنامه فوق العاده ساده متن. ویندوز دارای notepad.exe را. و من قصد دارم به کلمه به کلمه زیر را تایپ کنید. توضیحات نوع HTML، براکت باز HTML، بسته براکت HTML، ما باید سر صفحه در اینجا، در پایان از سر صفحه در اینجا، یک عنوان مانند، سلام جهان است. 

و سپس در اینجا، ما نیاز بدن از صفحه وب. بدن بسته شده است. و سپس در اینجا، سلام جهان. خیلی خوب. بنابراین ما یک صفحه وب فوق العاده سریع را نوشته ام. من قصد دارم آن را به عنوان نام hello.html بر روی دسکتاپ من. من مک رفتن به شکایت، فکر که، یک دقیقه صبر کنید، این یک فایل متنی است، انجام شما می خواهید به آن تماس بگیرید کلیپ برد چند منظوره؟ اما نه، من می خواهم به استفاده از نقطه HTML. 

و پس از آن چه خوب اگر من فقط دوبار کلیک کنید این فایل، نام hello.html، در اینجا صفحه وب من است. متاسفانه، من هستم تنها فرد در جهان که می توانید این صفحه در حال حاضر مراجعه کنید. از آنجا که در آن نشانی از آن ظاهرا زندگی می کنند؟ آن را در مک من، درست است؟ که بی فایده است. مثل هیچ کس در این اتاق چه رسد به در اینترنت در واقع می تواند آن صفحه مراجعه کنید. بنابراین، امروز، ما نیاز به معرفی عنصر دیگری. 

و برای انجام این کار، من قصد دارم به رفتن به جلو و باز کردن ابر 9. بنابراین ابر 9 است البته یک ابر service-- بر اساس CS50 IDE-- است که تمام فضای کاری ما در حال اجرا در جایی در اینترنت. و این بدان معناست که همه از فایل های ما می باشد در دسترس عموم در حال حاضر. بنابراین اجازه دهید پیش بروید و این کار را. من قصد دارم به جلو بروید و یک فایل جدید ایجاد NCS50IDE. من قصد دارم به آن را ذخیره کنید به عنوان قبل از به عنوان مثال با نام hello.html کلیک کنید و ذخیره کنید. و در حال حاضر فقط به صرفه جویی در وقت، من قصد دارم به جلو بروید و کپی کردن این کد رب به جای آن را تکرار. و آن را ذخیره کنید. و بنابراین در حال حاضر من یک فایل نام hello.html نامیده می شود. اما من چگونه می توانم در واقع باز کردن آن را به عنوان یک صفحه وب؟ خب، معلوم است ساخته شده در به CS50 IDE است که تنها یک کامپایلر مثل صدای جرنگ جرنگ نیست و یک دیباگر GDB و مانند مجموعه ای از برنامه های دیگر، در واقع وجود دارد کامل تکامل یافته وب سرور در حال اجرا در CS50 IDE. 

همه شما، است که می گویند، دارای وب سرور خود را. و یک وب سرور فقط یک تکه است نرم افزار است که هدف در زندگی است برای خدمت به صفحات وب است. برای گوش دادن برای درخواست از مرورگرها و پاسخ با پاکت مجازی کمی که در داخل آن است که محتوای که من نوشته ام. بنابراین این وب سرور است منبع آزاد و باز در واقع. که در آن منبع باز فقط بدان معناست نرم افزار که شخص دیگری نوشته شده است که همه ما می توانیم در واقع دیدن و دانلود و حتی کد منبع را تغییر دهید. و آن را به نام آپاچی. 

و ساخته ایم، آن را کمی ساده تر به استفاده در CS50IDE شده توسط آن را آپاچی 50. به طوری که در واقع می تواند زیر را درک کنید. من قصد دارم به آپاچی 50 شروع می شود. و پس از آن من فقط رفتن به نقطه. و ما برخی از تا حدودی ببینید پیام های محرمانه گفت تنظیم آپاچی سند [؟ گروه؟] به خانه، اوبونتو، هر آنچه که، بریده بریده فضای کاری. شروع وب سرور آپاچی 2 را با موفقیت. 

بنابراین داستان کوتاه مدت، من فقط تحت فشار قرار دادند یک دکمه و تبدیل بر روی یک وب سرور که اکنون گوش دادن بر روی اینترنت بر روی پورت TCP 80 در یک آدرس خاص. و آن را می گوید در اینجا، و این بر اساس تغییر خواهد کرد در نام کاربری و عوامل دیگر، اما متوجه حال حاضر اگر من این کلیک کنید، IDE50 نقطه jharvard و غیره و بنابراین، توجه کنید که تمام این مدت برای چند گذشته هفته، شما ممکن است متوجه شدم که نام کاربری خود را در دست راست تعبیه شده بالای گوشه ای از CS50IDE. 

و این که همه این در واقع شده است زمان آدرس که در آن شما می توانید از طریق وب بازدید از تمام فایل های خود را. تا به حال، آن را مهم نیست، چون در C، شما به طور کلی می خواهم همه چیز در حال اجرا در ترمینال، نه در وب است. اما امروز، ما شروع نوشتن کد مبتنی بر وب که ما نمی خواهیم در URL های عمومی در دسترس است. پس چه من قصد دارم به انجام دهید این است URL را کلیک کنید. 

و توجه کنید که من نسبتا ببینید صفحه اول زشت، لیست دایرکتوری، اما چه فایل جهش در شما احتمالا؟ نام hello.html. دلیلش این است که من را نجات داد فایل را در فضای کاری من. و آنچه من آپاچی وب سرور را گفته ام در دایرکتوری فضای کاری دیوید را نگاه کنید. و اجازه دهید هر کسی در دنیا که این فایل ها را ببینید. 

و در واقع، اگر در حال حاضر با کلیک بر روی نام hello.html، من در این برگه دقیقا همان است که فایل را ببینید. در حال حاضر متوجه، ابر 9 انجام چیزی کمی برای ما مفید است. در CS50 IDE، توجه داشته باشید که ناگهان نوار آدرس. دلیلش این است که حتی اگر ما با استفاده از Chrome به بازدید CS50IDE، داخل CS50IDE خود است نسخه یک مرورگر وب در حال حاضر. و بنابراین به جای پیچیده به عنوان مثل، من قصد دارم به جلو بروید و فقط کپی این URL. من قصد دارم به جلو بروید و فقط باز کردن پنجره کروم خود من است. به طوری که هیچ سحر و جادو در اینجا، بدون CS50IDE وجود دارد. من فقط رفتن به معنای واقعی کلمه رب من J هاروارد URL و ضربه را وارد کنید. و voila، در حال حاضر من و در تئوری، هر کس را بر روی اینترنت، اگر من پیکربندی مجوز مناسب، می توانید این فایل مراجعه کنید. و بنابراین در حال حاضر، اگر من گفت نام hello.html، هورا، وجود دارد صفحه وب من فوق العاده underwhelming است. بنابراین اجازه انجام بررسی سلامت عقل سریع است. از آنجا که همه از آن مفهومی راه اندازی است. و ما در واقع واقعا نمی شما آموخت که چگونه به نوشتن HTML در هر سه. در نتیجه هر گونه سوال دور در مورد آنچه اتفاقی افتاده؟ بله. آیا CS50 خود این صفحات وب؟ به چه معنا؟ سوال خوبی بود. بنابراین CS50 صاحب CS50.io. ما در واقع خریداری کرده اید که نام دامنه. و طبیعت از شما بچه ها ورود به CS50IDE، همه که شما چه چیزی یک زیر دامنه نامیده می شود. 

بنابراین IDE50-مالان، و یا IDE50-Rob.CS50.io، که آدرس منحصر به فرد خود را در این نام دامنه ما است. لذا برای این دوره، شما آدرس منحصر به فرد خود را. اما ما همه چیز با ساده ام خرید دامنه سطح بالا، CS50 نقطه I / O و سپس هر کس دیگری است در داخل آن، پس به صحبت می کنند. و ما به آن آمده است در چند هفته احتمالا، به خصوص در پروژه نهایی زمان، هنگامی که برخی از شما در صورت تمایل به دریافت نام دامنه خود. این در واقع نسبتا سر راست. خیلی خوب. بنابراین اجازه دهید اکنون انجام این کار. من قصد دارم برای رفتن دوباره به CS50IDE، که در آن فایل من در حال حاضر، نام hello.html، است که جالب نیست. من می خواهم برای انجام کاری کمی بهتر از آن است. بنابراین من قصد دارم به چیزی شبیه به این. اجازه دهید من می paragraphs.html باز است. بنابراین این یک فایل من در پیش نوشته شده است. در بالای آن، مانند همیشه، ما نظرات. اما در HTML، نظرات نگاه کمی متفاوت است. در خط سه و خط 14، شما می دیدن نحو برای شروع یک نظر و پایان دادن به یک نظر. 

اما هیچ یک از مسائل در بین مسائل عملکرد. این فقط توجه داشته باشید به یک است انسان چه خبر است اینجا. و فقط به عنوان یک سلامت عقل سریع بررسی کنید، اگر من در پایین حرکت، چه جدید روشن است برچسب است که ما معرفی کرده ام؟ برچسب ها تا کنون دیده ایم باز هستند براکت HTML، سر، عنوان، و بدن است. اما آنچه به وضوح جدید در حال حاضر؟ 

آره، بنابراین ص تگ P و یا تگ پاراگراف. و بعد من فقط قرض گرفته برخی از پیش فرض متن لاتین به را تشکیل می دهند پاراگراف است. از آنجا که آنچه من می خواستم نشان دادن اینکه چگونه ممکن است نشان پاراگراف از متن در HTML. و بنابراین، آنچه اتفاق می افتد شروع به در اینجا این است که حال حاضر وجود دارد یک الگوی در حال توسعه. و اجازه دهید من به جلو و انجام این کار. اجازه بدهید اول خاموش آپاچی. و من قصد دارم به آن را به خود شروع دوباره داخل منبع امروز هفت متر دایرکتوری. به طوری که من دسترسی به همه چیز داشته باشد. 

و در حال حاضر، اگر من به بازگشت به این فهرست دایرکتوری، متوجه من هر فایل را از امروز را ببینید. و شما در دید بعدی مجموعه ای مشکل، ما دستورالعمل ها را ارائه برای انجام این کار دقیقا این است. اگر من باز paragraphs.html، این ممکن است نیز مانند یک زبان برنامه نویسی نگاه به شما اگر شما صحبت نمی کنم و یا خواندن لاتین است. اما این فقط سه پاراگراف است متن هستند که در HTML مشخص شده اند. 

و متوجه بند استراحت بین آنها را. از آنجا که معلوم است، و حتی اگر شما ممکن است تمایل به انجام این کار، در حالی که در دنیای واقعی، اگر شما می خواهید برای قرار دادن خط استراحت بین چیزها، شما ممکن است کاملا به سادگی انجام این کار و ضربه را نجات دهد. و در حال حاضر، اگر من در اینجا بارگذاری مجدد، متوجه که همه چیز فقط تار با هم فقط در یک قطره از متن. از آنجا HTML گونه ای از زبان گنگ است. 

این به معنای در چنین استفاده می شود یک راه است که مرورگر تنها خواهد شد به صراحت آنچه که شما آن را انجام دهید. بنابراین اگر شما آن را نمی من یک پاراگراف جدید را، شما در حال رفتن به یک پاراگراف جدید. و در واقع، آنچه را که مرورگر را به انجام حتی اگر شما ضربه وارد کنید، اجازه دهید دوباره و دوباره می گویند و دوباره، در حال حرکت در این راه متن بر روی صفحه نمایش و سپس ذخیره و سپس مجدد، مرورگر است که به سقوط همه از آن فضای سفید به تنها با یک، فضای خالی قابل مشاهده است. خیلی خوب. به طوری که تگ پاراگراف است. و بنابراین، آنچه الگوی است که در حال توسعه که اینجا هستید؟ خب، به نظر می رسد این مورد است که HTML غیر فعال است همه چیز در مورد شروع یک برچسب و پایان دادن به یک برچسب. و چه یک برچسب است؟ خب، آن را فقط یک تکه از نحو. براکت باز، کلمه کلیدی، براکت بسته، یک برچسب است. و یا برچسب شروع می شود. و پس از آن زمانی که شما انجام بیان خود، به عنوان در شما با بند انجام می شود، شما این کار را به صحبت می کنند مخالف است. اما در مقابل کاملا به عقب است. 

شما به سادگی پیشوند همان تگ نام با یک اسلش مثل این. خیلی خوب. بنابراین نه همه که هیجان انگیز است. و در واقع، ما در حال ساخت نیست وب که جالب تر است. اگر من می خواهم به همه چیز بزرگتر و با حروف درشت؟ پس از آن معلوم است که اینجا یک مثال در headings.html، جایی که در بدن من، من یک تگ H1، H2، H3 کردم، چهار، پنج، شش، همه از آن به نظر می رسد بسیار محرمانه. اما اگر من به باز کردن این به عنوان مثال، اجازه دهید نگاهی به. Headings.html. 

بنابراین به طور پیش فرض مرورگر می تواند به شما متن که بزرگ و درشت با اندازه های مختلف. H1 بزرگ است. H6 کوچکتر و سپس است هر چیز دیگری در میان است. به طوری که جالب اما هنوز هم واقعا نمی وب من می دانم. اگر ما می خواهیم من چیزی شبیه به یک لیست. . بنابراین در اینجا یک لیست از این سه تن از خانه های هاروارد. 

چگونه شما در مورد این رفت؟ خب، نگاهی به list.html. و در اینجا، ما می بینیم کمی از funkiness اما اجازه دهید در نظر گرفتن آنچه که اتفاق می افتد. بنابراین در مورد آنچه شما فقط دیده می شود بر اساس، UL مخفف لیست نامرتب. لیست نامرتب فقط گلوله معنی. هیچ اعداد وجود دارد. نیز وجود دارد چیزی به نام لیست است، که یک OL در تگ دستور داد. سپس LI، لیست مورد همه به این معنی است. 

و پس از آن به طور خودکار شماره همه چیز برای شما. اما باز هم، همه دندانه من و فضای سفید فقط به خاطر من است. مرورگر نیستند در واقع رفتن به مراقبت. بنابراین حتی اگر شما می توانید نیست انجام این کار، فقط به روشن باشد، شما باید حتی اگر هنوز هم مرورگر قادر به درک آن را فقط خوب است. من هدف قرار دادن بازنگری در من مرورگر من کلیک بازنگری و هیچ تغییری اتفاق می افتد به این دلیل که هنوز هم مرورگر انجام دقیقا آنچه که من آن را به انجام. 

خیلی خوب. بنابراین این همه فقط متن است. حالا اجازه دهید به چیزی جالب را بیشتر انجام دهد. من قصد دارم به جلو بروید و قرض برخی از این HTML. من قصد دارم به جلو بروید و یک فایل جدید ایجاد کنید. و ما این rick.html پاسخ. ما به طور نامتناسبی چیزی استفاده می شود به نام رول ریک در این کلاس این سال، من نمی دانم، فقط ارگانیک اتفاق افتاده است. 

و در حال حاضر آن را از کنترل خارج شد. بنابراین من فقط رفتن برای رفتن با آن. و اگر من به گوگل بروید تصاویر و ریک Astley. اگر شما نمی دانید که چرا ما این، فقط خواندن در ویکیپدیا. هر بار که شما بر روی لینک کلیک کرده اید، کسی است خنده در جایی. و به من اجازه رفتن ahead-- وجود دارد ما بروید، اجازه دهید این تصویر. 

بنابراین در اینجا ما یک تصویر در تصاویر گوگل. و اجازه دهید فرض کنیم که این است منطقی در همه جا بر روی اینترنت. بنابراین من قصد دارم به فرض آن را OK برای من در واقع این را به صفحه وب من. من قصد دارم به جلو بروید و کپی URL تصویر. و حالا اگر من به بازگشت به ابر 9، بیایید ببینید که چه می توانید انجام دهید. بنابراین در اینجا فقط یک صفحه وب است. این ریک Astley است، هاها، من قصد دارم به حال حاضر به بازگشت به مرورگر من، بازنگری، و جالب است. 

ریک کجاست؟ بنابراین، اجازه دهید ببینیم که چه چیزی اتفاق افتاده است. در واقع، من قصد دارم به وانمود کنیم من که نمی کنند. [نامفهوم] او را در اینجا قرار دهید. ما به که در یک لحظه است. بنابراین در اینجا rick.html. به طوری که ریک Astley است. پس از آن معلوم ما می توانیم در واقع او را در اینجا اضافه کنید. این Astley ریک است. من قصد دارم به من می گویند که یک تصویر را منبع URL من فقط کپی است، که ظاهرا خوشحال است چیزی تولد و یا دیگر. 

و در حال حاضر من قصد دارم به بستن تگ مثل این. پس این است که بسته بندی فوق العاده طولانی است. اما توجه کنید که تمام من انجام براکت باز تصویر است، منبع با یک ویژگی از این. و آن را به یک URL واقعا طولانی است. و در پایان، این اطلاع می دهد. بریده بریده چرا من انجام براکت زاویه دار به جای، مانند هر تگ دیگر، داشتن یک براکت باز، IMG، براکت بسته؟ فقط یک حدس حتی اگر شما را هیچ آشنایی ندارند با HTML قبل از. 

پس از آن این است که چگونه آن را می بندد دستور، اما چرا آن واقعا بصری را حس به انجام چیزی کمی بیشتر مانند تصویر نزدیک طولانی؟ آره. آره. فقط معنایی، هیچ حس وجود دارد شروع یک تصویر و پایان دادن به یک تصویر، آن هم وجود دارد و یا از آن نیست. پس از آن را حس نمی کند به ترک یک شکاف برای هر چیز دیگری در داخل از یک تصویر. شما نه تنها می تواند انجام دهد. و به این ترتیب نحو می شود به طور کلی فقط برای انجام اسلش در داخل از تگ باز یا تگ شروع و پس از آن ضربه را نجات دهد. 

بنابراین اگر در حال حاضر بارگذاری مجدد این فایل، در حال حاضر من یک وب سایت خوب صفحه پخت و پز کردم اینجا. و ما می توانیم قطعا واقعا آزار مردم به جای تعبیه شده توسط مانند یک لینک یوتیوب. و در واقع، هر زمان شما تا به حال به یوتیوب رفته، و اجازه دهید من در واقع به طور تصادفی ریک خودم اینجا رول. بنابراین رول ریک. بنابراین ریک roll-- من قصد دارم به اینجا بروید. 

[موسیقی] 

OK، یک نفر دوست داشت که. بنابراین اطلاع تمام این مدت، اگر شما لینک به اشتراک گذاشتن البته کلیک کنید، شما دریافت URL که واقع شما می توانید جاسازی یک ایمیل و یا یک تصویر در پزشکی قانونی و یا در یک مجموعه ای مشکل و یا در یک اسلاید. و در حال حاضر، اگر من به جای قراردادن در کلیک کنید، توجه کنید که این زمان، این مسائل شده است وجود دارد. من قصد دارم به جلو بروید و کپی کردن این. 

و فقط بنابراین ما می توانیم آن را بهتر ببینید، من رفتن به چسباندن آن را به ویرایشگر متن است. توجه کنید که این چه یوتیوب شده است شما می گوید. هر بار که شما بازدید از یک ویدیو یوتیوب، اگر شما خواهید به جاسازی ویدئو در خود صفحه وب، به سادگی این گرفتن. پس این است که یکی دیگر از تگ HTML به نام از Iframe. یا در قاب خط. پس از آن بیش از حد به نظر می رسد کمی بیشتر پیچیده تر از همه دیگران است. پس از آن معلوم است که تصویر برچسب و ظاهرا تگ IFRAME ویژگی را به نام چه هستند. 

و این است قطعه ای از دستور زیر در HTML. علاوه بر برچسب نام و نام خانوادگی، باز براکت نام تگ، شما می توانید رفتار از برچسب کنترل با داشتن یک دسته کامل از ویژگی برابر با ارزش. ویژگی برابر با ارزش. و بنابراین، برای مثال، یوتیوب به ما می گوید اگر شما می خواهید از عرض این فیلم به 420 پیکسل و ارتفاع به 315 پیکسل، که چگونه شما آن را بیان در HTML. 

منبع این ویدئو است که به این باشد که URL طولانی یوتیوب و پس از آن برخی چیزهای دیگر مانند مرز قاب صفر است، به طوری که احتمالا به معنی وجود دارد هیچ مرز در اطراف چیزی. اجازه می دهد روی صفحه نمایش کامل احتمالا بدان معنی است که کاربران می توانید یک دکمه کلیک کنید و در واقع تمام صفحه ویدئو. بنابراین اگر من واقعا می خواهم به قابل توجه در ریک نقطه HTML، به جای استفاده از تگ تصویر، اجازه دهید من حذف آن، به جای این خمیر. و در حال حاضر بازنگری. و در حال حاضر در اینجا ما دوباره. همه حق است، که به اندازه کافی. همه حق بنابراین من سعی خواهد سختی نیست که دوباره. پس چه برخی از takeaways در اینجا؟ بنابراین HTML، به عنوان زشت به عنوان این صفحات وب هستند، در واقع بسیار ساده است. این زبان برنامه نویسی نیست. این توابع ندارد. آن حلقه ندارد. آن شرایط ندارد. همه آن ده ها تن از است برچسب های مختلف، که هر کدام صفر یا چند ویژگی. و در واقع، چه جالب در مورد HTML به عنوان شما شروع به شیرجه رفتن به است که آن را به خود قابل بسیار. 

تمام طول می کشد درک است از چارچوب کلی HTML. برچسب چیست، چه یک ویژگی است، چگونه می توانم شما واقع یک صفحه وب را پیکربندی به شرح زیر. و هر چیز دیگری است که واقعا نتیجه دنبال کردن در مرجع آنلاین و یا در Google چگونه به انجام برخی روش و یا به عنوان دیده ایم، به دنبال در منبع فیس بوک کد، به دنبال در یک وب سایت که شما در آن را دوست دارم کد منبع و درک این که چگونه توسعه دهندگان وجود دارد در واقع همه چیز گذاشته. 

بنابراین ما می توانیم تصاویر و همچنین انجام دهد. و در واقع، ما آن را یک لحظه پیش. اجازه بدهید به جلو و فقط به شما نشان می دهد. در اینجا برخی از نمونه کد است. اگر تا به حال می خواهید برای دیدن گربه بد خلق. بنابراین توجه کنید که من می توانید برچسب تصویر را در اینجا. و من یک نظر بالا آن را کردم. من یک جایگزین کردم متن برای دسترسی. بنابراین کسی که با استفاده از یک صفحه نمایش خواننده به دلایل از دید در واقع می تواند پس از آن باید خود را خواننده روی صفحه نمایش می گویند گربه بد خلق. از آنجا که اگر آنها نمی توانند تصویر را ببینید، آنها می توانید حداقل کامپیوتر خود به آنها بگویید شفاهی آنچه در آن است. و منبع آن فایل cat.jpeg است. پس در واقع، اگر من واقعا می خواستم گرفتن باهوش، آنچه من می توانستم done-- من قول می دهم نه برای رفتن به ریک Astley، به طوری که من قصد دارم به برای یک گربه گوگل به جای. و اگر من به تصاویر گوگل بروید در اینجا، و ما باید فرض کنیم که این یک عکس از گربه من است. 

فرض کنید که من باید کنترل کلیک یا راست بر روی این کلیک، به طور تصادفی وحشت زده. و من قصد دارم cat.jpeg برای صرفه جویی در دسکتاپ من. حال اجازه دهید رفتن به ابر 9. توجه داشته باشید که در اینجا، من می توانم رفتن به آپلود فایل های محلی. و اگر من این شتاب فایل، cat.jpeg، اطلاع که من می توانم آن را بکشید و رها کردن آن را ابر 9 و آن را به فریاد زدن در من در اینجا. 

از آنجا که ما در حال حاضر با توجه به شما یک فایل cat.jpeg، اما آن را فوق العاده آسان برای گرفتن یک عکس که شما را گرفته شده از فیس بوک یا فلیکر و یا مانند و در واقع کشیدن و رها کردن آن را به ابر 9 و سپس آن را بخشی از شخصی خود را وب سایت و یا مشکل مجموعه هفت یا هشت عنوان ما به زودی خواهید دید. و سپس هنگامی که شما در نهایت بازدید می کنید که گربه، فرض من دانلود گربه همان، اطلاع that-- که شایان ستایش بود. 

چه شما می توانید ببینید است چیزی شبیه به این صورت است. بنابراین فایل های که شما مرجع در یک صفحه وب هم می توانید محلی در خود داشته باشد حساب کاربری و یا از راه دور در برخی از سرور های دیگر همانطور که در مورد کومه عکس Astley در کمی پیش. تا جایی که else-- چه چیز دیگری می تواند ما در اینجا انجام. بنابراین اجازه دهید نگاهی به شرح زیر است. شما می دانید چه نوع سرد؟ 

ما تا کنون شده است ساخت صفحات وب بسیار استاتیک می باشد. من می خواهم برای ایجاد تنوع شرح زیر است. من می خواهم به موتور جستجو خود من است. بنابراین به یک موتور جستجو، اجازه دهید جلو بروید و شروع انجام این کار. من قصد دارم به جلو بروید و ایجاد یک فایل جدید به نام صفحه ای. و ما نسخه های آنلاین prefabed. متأسفیم. آیا به پنجره ترمینال خود را رب نیست. نسخه پیش ساخته آنلاین. و من قصد دارم برای شروع به عنوان شرح زیر است. بنابراین در اینجا آغاز است یک فایل به نام صفحه ای. من قصد دارم به آن را ذخیره کنید در دایرکتوری منبع امروز است. من قصد دارم به پاسخ این جستجو. در واقع، ما آن را بهتر است. CS50 جستجو و در واقع نام تجاری آن است. و در حال حاضر، من قصد دارم برای گفتن چیزی شبیه به H1 CS50 جستجو. و سپس در اینجا، H2 به زودی. و فقط به روکش، H1 و H2 به معنای آنچه به ترتیب؟ 

آره، بنابراین بزرگ و ضخیم، و نه به عنوان بزرگ است، اما هنوز هم تیره می کند. بنابراین اگر این صرفه جویی و بیش در اینجا من، اجازه دهید صفحه ای فایل را ببینید. همه حق است، و این یکی است right-- [نامفهوم]. ایستاده. دیوید اشتباه است. اوه، این حق وجود دارد. دیوید ادم سفیه و احمق است. باشه. بنابراین وجود آن است. بنابراین جستجو CS50 به زودی. بنابراین در حال حاضر، اجازه دهید سنتز آنچه که ما در هفته گذشته بود. 

که در آن ما در مورد صحبت کردیم مکانیک سطح پایین تر از HTTP. و این ایده های جدید از HTML است که فقط این زبان نشانه گذاری که در آن شما یک مرورگر بگویید که دقیقا چه کاری انجام دهید و پیاده سازی موتور جستجو خود ما. بنابراین به جای فقط گفت که به زودی، من رفتن به معرفی چیزی به نام تگ فرم. و در این شکل، من قصد دارم به چیزی شبیه یک فیلد ورودی. 

و نام این ورودی درست است، من قصد دارم به آن پاسخ Q. و نوع این فیلد ورودی من قصد دارم به می گویند فقط "متن" است. و یک فیلد متن، به عنوان ما ببینید، فقط یک جعبه متن است. و پس از آن در اینجا حس نیست به هر چیزی در داخل از آن را در این نقطه است. و بنابراین من به سادگی رفتن برای بستن تگ با درست در خود تگ رو به جلو بریده بریده. و پس از آن من قصد دارم به یک ورودی دیگر. نوع ورودی برابر ارسال کنید. و پس از آن من قصد دارم به بستن این یکی بیش از حد. 

و در حال حاضر من قصد دارم برای رفتن به عقب است. و در حال حاضر ما می بینیم، البته خیلی زشت، من آغاز کردم صفحه جستجو من را در اینجا. در واقع، اجازه دهید من را امتحان کنید تمیز کردن این تا کمی. به نظر می رسد که در ورودی در اینجا، من می تواند داشته ویژگی دیگری به نام حفره یا سوراخ. و من ممکن است چیزی شبیه کلمات کلیدی را مشاهده کنید، و یا بیشتر به طور خاص، پرس و جو برای q. 

و متوجه، در حال حاضر، من این نوع از متن خاکستری که از بین می رود به عنوان محض این که من شروع به تایپ کنید، اما احتمالا چیزی شما را در دیگر صفحات وب دیده می شود. من واقعا نمی خواهم دکمه ثبت کردن. بنابراین من در واقع رفتن به ثبت کردن یک مقدار از جستجو را فشار دهید. و در حال حاضر، اگر من را مجدد بارگذاری، توجه کنید که دکمه من می شود به نام جستجو. شما می دانید، من واقعا مانند آرم در اینجا. بنابراین ژنراتور گوگل قلم. 

من می خواهم به ادویه تا بیشتر است. جستجو به طوری CS50. اجازه دهید من می آرم خود را ایجاد. که به نظر می رسد خوب است. بنابراین در حال حاضر اجازه دهید من می صرفه جویی در این as-- در آمده است. که در آن است و آن رفتن؟ آنجا. باشه. از دست رفته است. ذخیره به عنوان. مرورگرهای احمق. ایستاده، ما قصد داریم به حل این یک بار و برای همه است. ما میرویم آنجا. خیلی خوب. متاسف. روز تعطیلی. در حال حاضر این بد بو است. خروج از حالت تمام صفحه نمایش. خیلی خوب. 

در حال حاضر، مانند نرمال فرد، صرفه جویی در تصویر به عنوان. Logo.gif. حالا من قصد دارم برای رفتن به CS50IDE و من قصد دارم به سادگی گرفتن آرم، من قصد دارم به آن را بکشید به من منبع هفت دایرکتوری، فایل در حال حاضر وجود دارد، من مشکلی با آن است. بنابراین من قصد دارم به آن را لغو چون من در حال حاضر آن بود. و در حال حاضر چگونه از شر این را دریافت کنم؟ 

اجازه دهید به جلو اینجا و انجام منبع تصویر برابر logo.gif. بستن این. صرفه جویی. و حالا اگر من به بازگشت به جستجوی من صفحه، در حال حاضر آن را به دنبال خیلی خوب است. همه حق است، پس از آن تا نیست کاملا چیزی مفید انجام می شود. در واقع، اجازه دهید من سعی کنید جستجو برای یک گربه و ببینید چه اتفاقی می افتد. گربه ها. لعنتی. این کار نه تنها کار، ظاهرا. پس چه قطعه کلیدی که از دست رفته است؟ 

درست است، حتی اگر شما هیچ HTML را نمی دانم، من شروع به مارک کردن فرم تلفن و من آن را گفته ام که چگونه به ورودی، من یک جعبه متن را و یک دکمه submit، چه قطعه ای است که ظاهرا از دست رفته؟ فرض کنید ما می خواهیم به واقع این چیزی که به درستی کار. چه چیزی ما باید انجام دهید؟ ما نیاز به پیاده سازی پایان تماس پایگاه داده و یا موتور جستجو، و که رفتن را به یک طیف زیادی از زمان، رک و پوست کنده. 

بنابراین به یاد داشته باشید آنچه که ما در زمان گذشته است. بنابراین اگر شما به دنبال چیزی در Google جستجو و شما را در پیشبرد خاموش است، به یاد بیاورید، جستجو از طریق مسنجر. بنابراین اجازه دهید من خاموش به طوری که این در واقع رفتار مثل یک مرورگر مدرسه های قدیمی تر، اگر در حال حاضر برای چیزی شبیه به گربه جستجو، به یاد چه URL نظر می رسد. آن را بسیار مرموز. اما جاسازی شده در وجود دارد، به یاد بیاورید، جستجو بریده بریده است. علامت سوال Q برابر با گربه. 

و به نظر می رسد به من بدهد یک دسته کامل از نتایج جستجو. بنابراین شما می دانید آنچه که من کاری انجام دهید؟ من قصد دارم به قرض گرفتن گوگل برای فقط یک دقیقه. من قصد دارم به بیش از در اینجا و من قصد دارم برای گفتن که این عمل یا به شکل مقصد، پس به صحبت می کنند، باید به معنای واقعی کلمه گوگل. و روش من می خواستم برای استفاده است رفتن به دریافت کنید. 

پس چه عمل است؟ اقدام عجیب به نام، اما فقط بدان معناست که در حال رفتن به رسیدگی عمل این فرم؟ وقتی که من جستجو، که در آن کلیک کنید باید نتیجه برود؟ و اگر در حال حاضر بازگشت به فرم من در اینجا و بارگذاری مجدد صفحه وب من و در حال حاضر برای چیزی جستجو مانند سگ، در حال حاضر متوجه من اجرا گوگل دوباره. درست؟ 

اگر من می خواهم به جستجو برای چیزی دیگری، آن را نه فقط برای سگ کار می کند، آن را نیز برای گربه کار می کند. آن را نیز برای CS50 کار می کند. و خوب، این است که فقط تحت تفکر است، نه؟ همه حق است، اما در واقع کار. بنابراین آنچه در واقع اتفاق میوفته؟ بنابراین من مرورگر من آموزش داده ام، با استفاده از HTML، را به ورودی از کاربر و در واقع ورودی ارسال به یک سرور از راه دور با استفاده از HTTP. 

و از آنجایی که مرورگر من درک HTTP، آن را در واقع ساخت URL به طوری که آنچه من تا پایان بیش از در مرورگر، متوجه چه اتفاقی می افتد وقتی که من برای سگ جستجو. اگر من جستجو کلیک کنید، توجه کنید که آدرس URL تغییر به عنوان من در نظر گرفته به google.com/search~~V پرس و جو برابر سگ. و این به دلیل شکل می داند، از آنجا که روش این است که، به سادگی آن را به آن URL وجود دارد اضافه کنید. 

در حال حاضر، این صفحات وب هنوز هم زشت است. بنابراین اجازه دهید یکی دیگر معرفی به قطعه ای از نحو اگر ما می توانیم امروز. و این چیزی است شناخته شده است به عنوان شیوه نامه آبشاری. بنابراین، اجازه دهید نگاهی به این مثال در اینجا و ببینید اگر ما می توانیم استنباط چه خبر است. این CSS0.html است. و این که در آن همه چیز است کمی زشت است. از آنجا که متاسفانه، در جهان وب، HTML به تنهایی می تواند همه چیز را انجام نمی شود. و بنابراین اگر شما می خواهید سبک خاصی دراوردن صفحه وب خود، شما در واقع نیاز به تمرکز بر روی زیبایی شناسی در راه های مختلف. بنابراین در اینجا، من بدن از وب سایت من صفحه که در داخل آن یک div بزرگ است. و یک div فقط به معنی تقسیم. بنابراین آن را مانند یک پاراگراف اما آن را می کند معانی یکسانی ندارند از یک پاراگراف از متن. 

این فقط به معنی به مرورگر در اینجا می آید یک منطقه بزرگ مستطیل شکل از وب سایت من صفحه، من می خواهم که مسئولیت رسیدگی به آن به خصوص. در حال حاضر، خط 21 است که در آن که دیو شروع می شود. و فقط یک حدس است. اثر خط 21 در چیست بقیه محتویات صفحه. محور آن است. که تمام است. بنابراین ما یک راه از دیده اند، نیست در واقع محور متن. 

در واقع، موتور جستجو من، بر خلاف گوگل واقعی، بیش از همه بود به سمت چپ توجیه می شود. و بنابراین در حال حاضر در خط 21، من گفت، هی مرورگر، ایجاد یک بخش از صفحه. فقط به من یک بزرگ، مستطیل نامرئی است. این که چگونه من می خواهم مربوط به صفحه وب فکر می کنم. و سپس آن را سبک خاصی دراوردن شرح زیر است. در داخل از آن نقل قول ها، در حال حاضر، زبان دوم است که ما امروز معرفی به نام شیوه نامه های آبشاری. خوشبختانه، آن را بیش از حد است یک زبان برنامه نویسی، پس از آن بسیار در نحو آن محدود است ولی نیز بسیار در قابلیت های آن محدود در حالی که همه چیز در مورد HTML غیر فعال است مارک کردن داده ها از یک صفحه وب و ساختار یک صفحه وب. CSS است به طور کلی در مورد مایل گذشته، زیبایی شناسی، گرفتن اندازه و رنگ و قرار دادن دقیقا در یک صفحه وب است. و در واقع، آن را تشکیل داده است با جفت کلید. 

یک ملک مثل این، متن چین، به دنبال یک روده بزرگ، به دنبال آن ارزش آن اموال، که در این مورد مرکز است. و در حال حاضر متوجه شما می توانید لانه این چیزها. اگر من همه چیز را در که می خواست من برجسته به محور شود، به همین دلیل من خط 21 و خط مربوطه 31. اما در حال حاضر فرض می خواهم بگویم جان دانشگاه هاروارد، به صفحه خانه من خوش آمدید. 

نماد کپی رایت جان هاروارد. و فرض من می خواهم برای اولین بار از کسانی که از خطوط به صورت کاملا بزرگ است. 36 پیکسل. به طوری که اندازه مناسب و معقول است. و من می خواستم وزن خود را به تیره می کند. اما سپس در زیر آن، من می خواهم متن کوچکتر است. و در زیر آن، من می خواهم متن حتی کوچکتر است. متاسف. امروز احساس می کند مانند یک روز خاموش است. 

بنابراین در حال حاضر، چه هستم من انجام برای بیان این؟ در اینجا در خط 22 است جاسازی شده div یا DIV تو در تو، اگر شما خواهد شد. این واژه نیز دارای برچسب سبک خود را دارد. من یک اندازه فونت 36 را مشخص کنید. من یک وزن فونت از جسورانه را مشخص کنید. در اینجا، من تنها 24 پیکسل را مشخص کنید. و در نهایت، در خط 28، من 12 را مشخص کنید. بنابراین فقط به عنوان بررسی سلامت عقل سریع و از آنجا که این خواندن بشر، که کلمات بر روی صفحه نمایش هستند در واقع رفتن به ضخیم؟ که خطوط در واقع با حروف درشت؟ 

فقط جان هاروارد. درست؟ از آنجا که فقط به عنوان خط 22 می گوید هی مرورگر، در اینجا یک بخش از صفحه است. آن را اندازه فونت 36 نقطه است. را وزن فونت تیره می کند. به محض این که شما در رسیدن به برچسب پایانی مربوطه و یا برچسب بسته در خط 24، که به معنی، هی مرورگر جلوگیری از انجام هر کاری که شما انجام می دهند. و توجه به روشن، حتی اگر خط 22 است که تمام این ویژگی ها مانند سبک، هنگامی که شما بستن تگ در خط 24، شما فقط ذکر نام تگ را. 

شما سبک کلمه را تکرار نمی یا هر چیزی که در داخل از آن به نقل از. و به همین ترتیب اگر من در این در حال حاضر نگاه در مرورگر، اجازه دهید نگاهی به نتیجه نهایی نگاه کنید. بذار برم پیش رو به این تصویر است که CSS 0. و آن را هنوز هم خیلی ساده، اما گرفتن بسیار جالب است. اما معلوم است وجود دارد چیزهای دیگر که من در اینجا می توانید انجام دهید، و در معرض خطر ساخت این به طور کامل شنیع، متوجه است که در اینجا در من بدن از صفحه وب من، من چیزی خنده دار می توانید انجام دهید مانند BG یا رنگ پس زمینه. 

و سریع، رنگ مورد علاقه شما چیست؟ سبز من شنیده ام. خیلی خوب. بنابراین در حال حاضر، اگر من ضربه بازنگری در حال حاضر، ما یک صفحه وب سبز. همه حق است، به طوری که بد نیست. و در حال حاضر، اگر من می خواهم این واقعا باحال، من می توانید رنگ متن من را حتی قرمز است. بنابراین اجازه دهید که این به نظر می رسد. در حال حاضر آن را به دنبال خیلی خوب است. و پایین در اینجا، اگر شما واقعا می خواهید به یک ظرف غذا با کسی که و یا اگر شما می خواهید به یکی از این افراد که تلاش می کند تا فریب شما را به بازدید از یک وب صفحه چرا که آنها فریب به گوگل به فکر یک دسته کامل وجود دارد از کلمات کلیدی like-- بیایید ببینید، دوباره بارگذاری کنید. که در آن بود؟ و آن را ما وجود دارد. خیلی خوب. بنابراین من می گویم این به عنوان یک کنار، ما صحبت در مورد این مسائل در چند هفته هنگامی که ما در مورد آن صحبت امنیت، اگر شما در واقع خوشه طیف جاسازی از کلمات کلیدی در یک صفحه وب، حتی اگر آنها به یک قابل مشاهده نیست انسان، کسی مانند گوگل، البته، هنوز هم می تواند در واقع این پیدا کنید. همه حق است، به طوری که خیلی زشت خیلی سریع. 

و در واقع، این همه نیست که بر خلاف وب خود من صفحه عنوان مقطع کارشناسی، که من شروع به در Google اطراف برای پیدا کردن نسخه های گذشته از وب سایت های قدیمی من است. این بسیار بد بود. در واقع، من را پیدا فقط قبل از کلاس. اما بدتر وجود دارد. این ظاهرا من صفحه اصلی در سال 1996. ظاهرا من فکر کردم آن بود مناسب به درخواست مردم نام خود را قبل از اینکه بتوانند در واقع صفحه وب من را ببینید. 

و پس از آن من به آنان نشان چیزی احمقانه، احتمالا. من حفاری تا برای دفعه بعد. اما در حال حاضر، اجازه دهید یک بیت از طراحی در نظر بگیرید. ما در مورد سبک صحبت کردیم. و این صفحه را تا کنون و همه چیز من نوشته شده است بسیار تمیز سبک. اما آنچه در مورد طراحی؟ خب، در بسیاری از افزونگی وجود دارد در چه من انجام شده است در اینجا. 

من کلمه ذکر کرده ام رنگ در چند مکان. من در یک زن و شوهر از ذکر کرده ام اندازه فونت مکان و جسورانه در چند مکان. و اساسا، من هستم CO آمیختن دو زبان. من HTML با برچسب ها و من کردم من ویژگی و سپس ناگهان همه از یک، بین به نقل از، من زبان دوم امروز به نام CSS، که دوباره تنها این، جفت کلید و یا این خواص جدا شده توسط دونقطه. 

به نظر می رسد که بسیار مانند C که در آن ما می توانید شروع به عامل از برخی از کد را به فایل های هدر، بنابراین می تواند ما را در HTML همین کار را. و یک گام به سمت که به شرح زیر است. توجه داشته باشید که این نسخه، CSS1.html است ساختار صفحه وب یکسان است. بنابراین من یک دسته کامل کردم راستیآزمایی اطلاعات طراحی، اما این بار، من بدست از لفاف بسته بندی خلاص شدن از شر DIV به عنوان خواهید دید. 

و من آن سه دایو داده ام بالا، متوسط ​​و پایین، شناسه منحصر به فرد. این خوب است، چرا که با دادن آن بخش صفحه شناسه منحصر به فرد، من می توانم آنها در جاهای دیگر مرجع است. جایی که؟ خوب، اجازه دهید تا رفته. و تا کنون، در هر زمان که ما نگاه در سر یک صفحه وب، چه تنها تگ ما در حال به سر از یک صفحه وب؟ کمی بلندتر. فقط در عنوان تا کنون. اما معلوم است وجود دارد چند چیز دیگر شما می توانید را در وجود دارد، یکی از که آن را به یک برچسب سبک نامیده می شود. بنابراین یک لحظه پیش، ما نگاه در یک ویژگی سبک. معلوم است یک برچسب سبک وجود دارد. آن را در داخل متعلق سر از یک صفحه وب است. و در حال حاضر متوجه آنچه من انجام است. من در داخل این دارند برچسب سبک به شرح زیر است من به معنای واقعی کلمه ذکر در خط 20 نام یک برچسب است که من می خواهم به سبک خاصی دراوردن. 

پس از آن من آکولاد باز و بسته آکولاد. بنابراین در روح به C مشابه است، اما دوباره، این یک تابع نیست، این فقط یک جزئیات نحوی در اینجا است. و پس از آن البته، من گفتن مرورگر، هی مرورگر را کل بدن از صفحه یک تراز دلخواه برای متن از مرکز. و بعد این گفت: موارد زیر. هی مرورگر، اگر شما یک دید HTML عنصر یا برچسب در صفحه ای که دارای یک شناسه منحصر به فرد از بالا، بنابراین نماد هش در اینجا فقط به این معنی ایده منحصر به فرد از بالا، پیش بروید و اندازه فونت آن 36 و وزن فونت آن تیره می کند. 

هی مرورگر، یک عنصر که ID میانه است، آن 24 پیکسل است. و هی مرورگر اگر شما یک ایده پایین، آن را 12 پیکسل است. این اثر در پایان دقیقا سام است. اگر من به CSS 1 بروید، صفحه نظر می رسد همان. اما ما یک قدم به سمت هستید طراحی کمی بهتر است. حال اجازه دهید برگشت برو اینجا برای CSS2 و ببینید چه چیز دیگری من انجام داده ام. 

در حال حاضر صفحه واقعا، واقعا تمیز است. در واقع، من می توانید تمام جا محتویات بر روی یک صفحه در اینجا. اما آنچه تگ جدید من معرفی، بدیهی است؟ ارتباط دادن. و آن را به بهترین نام برای یک برچسب، زیرا این یک لینک به این معنا نیست که ما آن را می دانم، اما این بدان معنی است یک لینک در بعضی از فایل های دیگر است. این نوع مانند تیز عبارتند از در C. 

این راه در HTML غیر فعال است به هی مرورگر رفتن محتویات فایل به نام css2.css. رابطه، به من، این است که آن یک شیوه است. و در واقع، این چیزی است که یکی از S در سبک آبشار ورق معنی. این یک شیوه است. این فقط فایل متنی حاوی این یک دسته کامل از اموال. این یک دسته کامل از سبک است که شما می خواهید به درخواست به یک صفحه. 

و این ظاهرا اشاره به یک فایل دوم. و اگر من باز کردن آن، CSS2.css، توجه کنید که تمام من انجام داده ام است کپی کنید و تمام این به این پرونده. و در حال حاضر، حتی اگر شما هرگز کد این مسائل قبل، فقط با در نظر کلاه های مهندسی ضرب المثلی ، به همین دلیل این است طراحی بهتر احتمالا؟ مقاطعه از کسانی که خواص CSS، قرار دادن آنها را به فایل خود را دارند. حتی اگر ما این حل مشکل مانند پنج دقیقه پیش در نسخه اول. 

ما بهبود یافته است ام سبک صفحه، این فقط بهتر طراحی در برخی از احساس. چرا فکر میکنی؟ آره. انعطاف پذیر تر چگونه؟ آره. بنابراین اگر شما می خواهید برای رفتن تماس و چیزهایی را تغییر دهید، در حال حاضر، شما یک مکان که در آن شما می توانید همه چیز را تغییر دهید. و در واقع، چیزی مانند مشکل تنظیم هفت، که در آن ما پیاده سازی یک وب سایت معاملات سهام، که رفتن به یک تمام دسته از صفحات. و آن را واقعا می شود آزار دهنده اگر شما تصمیم، HM، من واقعا نمی خواهم 24 پیکسل، من می خواهم آن را به 28 پیکسل یا کمی بزرگتر است. و پس از آن مجبور به انجام جهانی پیدا کردن و جایگزینی و یا باز کردن تمام فایل های وب سایت شما به سادگی به واقع یک مقدار را تغییر دهید. با فاکتور گرفتن از این سبک به یک مکان مرکزی، شما هم اکنون می توانید یک فایل متنی باز در CS50IDE به هر برنامه، آن را تغییر دهید، آن را ذخیره و انجام می شود. شما آن را تبلیغ تغییرات در همه جا. و خواهد بود که همان در یک فایل نقطه ساعت است. بنابراین هر گونه سوال در نتیجه کنون در این نحو؟ همه حق است، بنابراین ما به همه چیز به نظر می رسد انجام به جز در واقع پیاده سازی لینک. و بنابراین اجازه دهید به جلو و انجام این کار. اجازه دهید من پیش بروید و یک فایل جدید ایجاد کنید. من قصد دارم به آن پاسخ link.html، در کد امروز قرار داده است. 

و من قصد دارم انجام دهید باز براکت نوع DOC HTML. همانطور که به کنار، این چیزی که در بالا، این اعلان نوع DOC، این تنها یکی که عجیب و غریب است با علامت تعجب. شما فقط باید به انجام آن وجود دارد و آن معنی است که ما با استفاده از نسخه HTML 5. نسخه های قدیمی تر زبان بسیار طولانی بود رشته که شما نیاز به قرار دادن وجود دارد. بنابراین در اینجا یک مثال به نام لینک است. 

من یک بدنه را در صفحه وب من نیاز داریم. و در اینجا، یک عکاس هنگام عکسبرداری برابر اجازه دهید بگویم HTTP://www.disney.com و وب سایت مورد علاقه من، ما می گویم. خوب، پس بسیار بی ضرر است، کاربر پسند صفحه. اگر من در حال حاضر به دایرکتوری من بروید لیست اینجا و باز کردن link.html، ما باید متن بیش از حد. 

و در واقع، این است که در آن از H در HTTP می آید. پروتکل انتقال فرامتنی است در مورد انتقال متن است که لینک به دیگر منابع است. و در واقع، در اینجا آشنا است، اگر یکپارچهسازی با سیستمعامل، لینک آبی رنگ که در صورت کلیک، در واقع من به Disney.com منجر شود. در حال حاضر، آه، که به زودی. همه حق است، بنابراین در حال حاضر، چه هستند برخی از از پیامدهای این؟ 

و صادقانه بگویم، جهان شروع می شود به کمی بیشتر آشنا و همچنین یک کمی ترسناک بلکه کمی بیشتر خود دفاع هنگامی که شما شروع برای درک این چیزها. از آنجا که شانس هستند، برخی از شما، اگر شما به از طریق پوشه اسپم جیمیل خود و یا حتی صندوق پستی خود را، شما احتمالا بدست نوعی از ایمیل که درخواست شما را به تغییر خود را رمز عبور شاید و یا شاید بررسی اعتبار پی پال خود را و یا فلان چیز. 

و در واقع، شما ممکن است دریافت کرده اند چیزی که در اینجا می گوید مانند کلیک رمز عبور پی پال خود را به تنظیم مجدد. و در حال حاضر، توجه، اگر این است که Disney.com اما مانند badplace.com و بارگذاری مجدد، توجه داشته باشید که متن در اینجا می تواند هر چیزی می گویند. و در واقع، این کلمات است. چرا من در واقع فوق العاده مخرب را داشته باشد و می گویند http://www.paypal.com. 

تنظیم مجدد پی پال خود را اینجا را کلیک کنید رمز عبور و در حال حاضر بازنگری. این به نظر می رسد بسیار مشروع، درست است؟ منظور من، من نمی با کلیک بر روی یک ایمیل به این که فقط می گوید. اما متوجه دوگانگی در اینجا. این گزارش می گوید www.paypal.com، و در واقع، یک دقیقه صبر کنید، ما می دانیم که شما می خواهید بازدید کنندگان برای امنیت. بنابراین در حال حاضر، به www.paypal.com HTTPS بروید، اما اگر شما هرگز قبل از انجام این کار، انجام به عادت گرفتن معلق در هوا بیش لینک کمی اینجا. و آن را سخت برای دیدن بر روی صفحه نمایش وجود دارد، و این همه نیست که آسان تر است. اما راه را به پایین در اینجا در گوشه کوچک آیا مرورگر در واقع شما که ما قصد داریم به به badplace.com به جای Paypal.com. در حال حاضر، که در آن ما با این رفتن؟ تمام نمونه که ما امروز انجام داده ام، ما سخت کدگذاری و تایپ کردن دستی. وب فوق العاده وقتی که شما غیر سخت کد صفحات وب خود را به طوری که محتوای استاتیک و هرگز تغییر است. البته، همه ما وب سایت های مورد علاقه امروز، آیا آن را جیمیل یا توییتر و یا فیس بوک یا هر تعداد دیگر پویا هستند. آنها در حال تغییر در پاسخ به ورودی کاربر درست مثل نتایج جستجوی گوگل. 

و به این ترتیب در روز چهارشنبه، آنچه که ما انجام است ما HTML و معرفی CSS ترک پشت سر ما و ما را برای مسلم است که ما در حال حاضر آن را می دانم و معرفی می کنیم یک زبان برنامه نویسی جدید نام پی اچ پی، که مانند C است، رفتن را به ما بدهد قدرت به واقع برنامه ایجاد که خود را تولید خروجی. در این مورد، ما باید با استفاده از PHP برای ایجاد به صورت پویا وب صفحات با استفاده از این زبان جدید است. بنابراین بیشتر در مورد که در روز چهارشنبه. بعدا می بینمت. 

[موسیقی]