[Powered by Google Translate] [Тиждень 7, продовження] [David J. Малан, Гарвардський університет] [Це CS50.] [CS50.TV] Добре. Welcome Back. Це CS50, і це в кінці тижня 7. Тому однією з цих дурних дрібницях, яка йде по всьому Інтернету і ми сьорбали, і тепер воно повинно зробити трохи зухвалим сенс для вас. Ну, це було смішніше цього хлопця, ніж це було до вас, хлопці. Говорячи про, добре, хлопці, Сьогодні день народження Нейта. Щоб дати вам відчуття того, наскільки добре Nate і я на веб-розробка на основі класу понеділок і засновані тепер на цьому, Я думав, що підтягти головну сторінку Нейта, якщо ви його ще не бачила. Це тут І.А. Нейта HTML. Так що побачити його вихідний код, якщо ви хочете подивитися, як це зробити, і Нейт, якщо б ми могли незручне становище ви просто коротко, співробітники тебе дещо Якщо ви хотіли б поділитися деякими десерт з деякими з дітей у класі тут. Якщо ви хотіли б приїхати вниз. Ви всі аплодують і дуже хороші, але ніхто не сидить десь біля Nate, з деяких причин, в тому задню зону. Тому, можливо, ви можете знайти деякі люди, щоб насолоджуватися цим з. З Днем Народження, Нейт. 

Додаткова вітань: Ми показали пару кліпів з наших CS50x студентів. Якщо ви хотіли б подивитися, хто ще це в світі яка наступних разом, ви можете відправитися на цю адресу, де Джозеф, один з наших ТФ, зібрав монтаж роду всіх, хто був передати ці відео, у тому числі Рік Естлі. І якщо ви прокрутіть через них, це дійсно дуже надихаюча , Щоб побачити різноманітність країн і міст, з яких люди родом. Так що, якщо ви хочете, щоб поглянути на те, що буде до до кінця семестру. Сьогодні ми продовжуємо наш погляд на Web, веб-програмування, HTML і т.п., і ми також пообідати придумати в цю п'ятницю Якщо ви хочете, і, зокрема, ще не зробили цього раніше. Ця тема п'ятницю буде день народження Нейта, так що якщо ви хотіли б мати день народження обід з Nate та інші, деякі з наших друзів з промисловості, Будь ласка голову, що URL там. Космічна, як завжди, обмежена. Крім того, якщо ви забули, розумію, що на наступному тижні закінчується термін проблемою встановлений 4 в полювання сміттяра, яким після відновлення всі ці файли JPEG з card.raw, Ви і ваші товариші розділ, якщо ви хочете, можете спробувати фотографування так як багато хто з вчених-комп'ютерників з цієї карти пам'яті наскільки це можливо, і ви і ваш розділ буде виграти казковий приз. Поверніться до PSET 4 в специфікації щодо того, що являє і коли. Крім того, якщо ви хочете, щоб ваша рук увічнив на веб-сайті курсу та його історії одягу, знаю, що ви раді зараз, щоб почати представляти конструкцій на цей рік футболки та толстовки і тому подібне. Ми зробимо все можливе, щоб включити стільки, скільки ми можемо, але ми будемо мати деякі співробітники огляд всіх конструкцій щоб переконатися, що вони відповідають специфікаціям, і ми тоді взагалі забрати кілька з них будуть виставлені. Так що якщо ви тип конструкції, просто знаю, що вимоги для графіки PNG, принаймні, 200 DPI, вони не повинні бути більше, ніж 4000 x 4000 пікселів, і не більше 10 Мб, але ви можете використовувати речі, як Photoshop або GIMP або різні програми графічного об'єкта, все, що у вас є у вашому розпорядженні. 

Крім того, на горизонті остаточний проект. Остаточний проект дійсно є кульмінацією 50, якому всіх завдань в курсі, це ваша можливість реально зробити свою власну річ. І це може бути просто зробити щось для задоволення, це може бути, щоб вирішити деякі актуальні проблеми вашої студентської групи має, для деяких нових веб-сайті, нових механізму збору даних. Це може бути мобільний додаток для Android, на IOS. Дійсно, небо це межа, і протягом наступних кількох тижнів, як перехід від C ці мови високого рівня, як PHP і JavaScript, Ви опинитеся більш ознайомився з деякими реальними методами, деякі реальні інструменти, і на додаток, що, Відомо, що, звичайно, має історію семінарів, яким протягом наступних кількох тижнів, деякі з викладачів і наші друзі з кампусу буде пропонувати додатковий семінари які йдуть вище і поза того, що зазвичай робиться в розділі представити вам речі, як програмування Android, представити вам речі, як програмування IOS або більш просунутих веб-розробка методів. Там ціла історія цих уже в Інтернеті. Якщо ви йдете в cs50.net/seminars, ми робили це протягом досить довгого років, і ви побачите, що архівах тут з PDF-файлами та відео і т.п. кілька відео десятка семінарів. У минулому році, наприклад, у нас був семінар з acing ваших технічних інтерв'ю, якщо ви насправді хочете піти і пройти стажування або повний робочий день концерту. Windows Mobile розвиток, розвиток Android, Google Maps, API, CSS, розробка для BlackBerry, Emacs. Дійсно, ласкаво просимо, щоб поглянути на будь-який з цих семінарів по вашому розсуду. І ми будемо проведення деяких нових цьому семестрі, а також. 

Так що попереду з остаточним проектом? Ну, по-перше, навіть якщо ця дата кілька неминучою, це дійсно просто можливість почати думати про остаточний проект цілком реально. Ми знаємо тільки початок частину того, що ми ще будемо покриття в курсі, HTML, PHP і т.п., але ви всі знайомі з веб- і я упередженість цю розмову в бік тільки тому, що веб- більшість людей в кінцевому підсумку робить веб-остаточних проектів, Але це аж ніяк не необхідне. Використання C в порядку, Objective C, Java, будь-який інший мову, який ви, можливо, знаєте або хочете знати досить добре. Але щоб отримати соків на початковому етапі, ми очікуємо уявлення preproposal яка, в PDF на веб-сайті, який зараз перебуває на cs50.net, і в лівому верхньому куті ви побачите остаточний проект це специфікація для остаточного проекту, і є докладна інформація про preproposal тощо. Це в значній мірі зводиться до електронної пошти у вчення людина просто зав'язати розмову з ним про те, що ви думаєте. На projects.cs50.net є сховищем ідей від людей на території кампуса якщо ви боретеся, щоб придумати якусь ідею, і manual.cs50.net/APIs є сховищем посилання на API. 

Що, однак, є API? Що таке API? Я сказав, що принаймні в два рази, відповідно до стенограм за останні кілька тижнів. Що це? [Студент, нерозбірливо] >> Гаразд, добре. Так щось інтерфейсу програмування. Інтерфейс прикладного програмування, і це може приймати різні форми, але те, що це дійсно зводиться до того, код що хтось УГ письмовій або даних, що хтось зібрав , Які доступні для вас в деякому програмним шляхом. Ви можете писати код на C, PHP, Python, Ruby, незалежно від вибраної мови зазвичай є, і можна якось опиратися на чужу функціональності чи чужий набір даних. Наприклад, якщо я йду за цим посиланням тут, і ви побачите пару посилань на наступній сторінці яких у нас є власний API, CS50, який дуже Гарвард-орієнтованої, а потім сторонніх API. Серед сторонніх API, дійсно корисні речі як можливість відправки SMS на людей, можливість отримувати СМС повідомлення від людей. І такі речі, які ви можете поняття не маю, як реалізувати себе, але завдяки послугам, деякі безкоштовно, а деякі комерційні, Ви можете побудувати на вершині ті, і зробити щось для вас інтерес. Серед інтерфейсів API CS50 є ці кампуса орієнтовані речі, як Гарвардський курси, енергії, події, їжа, карти, новини, замітки в соціальних мережах і Shuttleboy власну, і ці API-інтерфейси, які виглядають трохи щось на зразок цього. 

Дозвольте мені підтягти API HarvardFood. Якщо ви коли-небудь були на сайті HUD, ви, ймовірно, був там просто подивитися, що на вечерю або щоб побачити, що годинник для деяких D-зал. Ну, це не особливо легко орієнтуватися, і так, що ми дійсно якийсь час назад були ми писали програмне забезпечення, воно відбудеться, буде в PHP, що насправді екрані подряпини сукупності сайт HUD,. На екран зіскрібок значить щось написати програму на мові PHP, як , Яка претендує на браузері, навіть якщо ви можете запустити його в командному рядку, , Яка претендує на браузер, підключається до веб-сайт, завантажує її HTML, мови, на якому вона написана, , А потім читає його, або, більш конкретно, розбирає його зверху вниз, зліва направо. І те, що ми зробили, ми написали код таким чином, що будь-який час, ми побачили щось в цьому HTML, який виглядав, як щось у меню, як гамбургер, ми хотіли б імпортувати, що в наші власні бази даних. І в будь-який час ми бачили поживної цінності, ми хотіли б імпортувати в свої бази даних. І те, що ми робили, було використовувати той факт, що HUD автора, хоча це може бути трохи складним завданням для нас, людей, для навігації під капотом, всі HTML породжується своїми комп'ютерними програмами. Так що всі свої HTML, хоча це може виглядати брудним, Як і більшість веб-сайтів під капотом слід шаблоном. Таким чином, ми тільки що провели пару годин з'ясувати, що модель так що, врешті-решт, ми викидаємо всі брудні HTML, Всі естетика сміливі облицювання й курсив і т.п., і що ми тоді в змозі зробити, це виставити ті ж самі дані. Наприклад, на цьому шляху. Таким чином, ми, згідно з документацією тут, повідомили світу, що, якщо ви запросите URL , Що виглядає так, food.cs50.net / щось, і ви надати певні параметри, які ми будемо говорити про сьогоднішній день, як дату закінчення часу, дати початку часу, їжі і так далі, що наші сервери повернеться до вас, до прикладу, у файл CSV, кома separted цінності, як файл Excel, містить все для сніданку на цю конкретну дату в березні минулого року коли мені довелося написати цю документацію. 

Для тих, хто знайомий, CSV це не єдиний формат файлу. Там в інший формат, який все більш універсальними називається JSON, JavaScript Object Notation. Дані можуть повернутися в цьому форматі. Таким чином, винос тут, що ви поринете в API або будь-який інший CS50 або що-небудь там, в Інтернеті, або не на всіх, розумієш, що світ все більше почали стандартизації як машини повідомляються. Ми використовуємо стандартні формати даних, такі як CSV або JSON. А що це означає для вас, що ви можете написати цікаву частину програми , Яка дозволяє користувачеві шукати їдальнею меню , Що дозволяє їм створювати списки обраних, що дозволяє їм отримувати текстові оповіщення , Коли їх улюблена їжа збирається бути поданий в деяких D-зал з використанням чужого наборів даних і будівля на вершині свого API. Так про це у формі семінарів та документацію, що у вас тут онлайн. Так що ті, тобто API. 

Це повертає нас до HTML. Швидке резюме. Що таке HTML? [Студент, нерозбірливо] >> Добре. Мова розмітки гіпертексту. Хтось ще, що це мова гіпертекстової розмітки? Мова розмітки гіпертексту. Добре. Таким чином, HTML, HyperText. HyperText якраз відноситься до Web, по більшій частині. Розмітка означає, що вона насправді не мова програмування, HTML. Це не мова, який ви можете висловити логіку дюйма Він не має петель. Він не має умов. Він не має функції, як такої. Швидше, вона має ці речі називаються тегами, або, точніше, елементів. І ці елементи мають початок і кінцевих тегів, або відкриті теги і закриті теги, і те, що ці теги взагалі означає для браузера, почати щось робити, а потім припинити робити щось, хоча є й винятки з цього. Іноді це просто "покласти рядки тут", наприклад. І ми бачили приклади, що днями, між сміливими облицювання, рядків, а потім кілька інших тегів. Таким чином, HTML це мова, на якій веб-сторінки написані. Так що, якщо я йду на щось подібне до Google.com і потягніть вгору тільки вдома їх сторінки, Нагадаємо, що якщо ви клацніть правою кнопкою миші або клацніть контроль і подивитися на вигляд вихідної сторінки, як правило, це повний безлад в ці дні під капотом, але це тому, що Комп'ютери не хвилює пробіл, так що це не повинно виглядати красиво. Але якщо збільшити на частини, зауважити, що Chrome, просто щоб бути хорошим, був кольором речі. Дійсно, це самий перший тег, який ми бачили в веб-сторінки. І знову, HTML 5, остання версія цієї мови, дійсно є ця річ на початку, <! DOCTYPE HTML, будь рядковими або прописними буквами, але це всього лише свого роду стандарт, який говорить, агов світі, ось HTML файлу у версії 5. 

Найцікавіше починається тут. Таким чином, <HTML, а потім було двоє дітей з HTML елементів в минулий раз. Що це були дві основні діти? Голова і тіло, як хлопець з татуюванням хвилину тому. Там дві частини веб-сторінки, голови і тіла, і згадати, те, що, можливо, найпростіший веб-сторінку ми могли б виглядати наступним чином. І я відступом це тільки, щоб бути почасти доглянутий з моїм кодом, але те, що дійсно важливо тут те, що є деяка ієрархія до цього. І будь-який тег, який я відкрив я закрив і що немає тому ця симетрія для всіх розмітка, яку я створив. Таким чином, минулого разу ми почали писати веб-сторінки на моєму власному ноутбуці. Я відкрив редагування тексту, я зберіг файл як hello.html, Потім я перетягнув файл на свій браузер, і вуаля, у мене була сторінка в Інтернеті. Так от, це не зовсім так, у мене була сторінка на моєму жорсткому диску, і я був буквально єдина людина у світі, хто побачив би, що веб-сторінки в браузері. 

Отже, сьогодні ми представляємо фактичні веб-сервер і поняття насправді виступаюча контенту в Інтернеті і як це все починає поєднуються один з одним. Ось і виходить, що весь цей час в CS50 приладу Ви мали веб-сервер на своєму комп'ютері. Ми, чесно кажучи, тільки використовував його для Gedit, для Clang, для GDB і т.п., а також встановлені нами для вас в прилад є веб-сервер, і що веб-сервер трапляється бути вільним, відкритим вихідним кодом, одна з найпопулярніших в світі, називається Apache. Його більше технічних ім'я HTTPd, г буття для демон тут, , Яка є технічним слово для сервера. Таким чином, встановлені в CS50 приладу є веб-сервер, і що це значить? Ну, веб-сервер, концептуально, деякі сервера в Інтернеті, який подає веб-контенту. Коли його запитали, для файлу, він випльовує HTML, що складає цей файл, і вуаля. Ви бачите головну сторінку деякий сайту. Але сервер, точніше, частина програмного забезпечення. Вона не повинна бути на фізичній машині, вона просто повинна бути частиною програмного забезпечення ходу. Так CS50 прилад, звичайно, частина програмного забезпечення хоча це начебто прикидаючись машини. Він видавав себе за комп'ютер усередині комп'ютера, але це просто означає, що прилад може працювати, звичайно, такі речі, як веб-сервери. Це дійсно може запустити сервери електронної пошти. Ми могли б запустити сервер обміну миттєвими повідомленнями в прилад, якщо ми хочемо, І дійсно, ми запустити один інший тип сервера, відомий як сервер баз даних MySQL. Але про це наступного тижня. Це означає, що я можу реально відвідати веб-сторінок Усередині мого приладу за допомогою браузера всередині приладу або навіть на свій власний ноутбук, мій Mac або мій комп'ютер. Так що ж це значить? Виявляється, що в будь-який час ви працюєте в Linux комп'ютер, її прізвисько "локальний хост". Це не є доменне ім'я, тому що ми ще не купили доменне ім'я за те, як прилад, так що його ім'я за замовчуванням є локальний комп'ютер. 

Але для того, щоб отримати прилад, щоб почати обслуговуванню веб-сторінок, Ми повинні створити їх у першу чергу. Так давайте зробимо це. Відпустіть мене у вікні терміналу тут і зауважив, що я в своєму типовому Джон Гарвард рядку. Дозвольте мені піти далі і ввести Ls, і ми побачимо деякі знайомі речі з цього семестру, робочий стіл, скачування, Dropbox і так далі, але тепер ми починаємо поворот нашу увагу на пару. На багатьох веб-серверах Linux є ця папка називається суспільним HTML, але ми збираємося пропустити, що одна зараз і зосередитися на цьому, віртуальних доменів. Кожен знає, що віртуальний хост є? Просто дурна жаргон для віртуального хоста, і що це означає, що на типовому сервері ви можете розмістити кілька веб-сайтів. Ви можете купити доменне ім'я, як foo.com, і ви можете розмістити його на сервері. Але ви також можете купити bar.com і розміщувати його на тому ж сервері. Причина в тому, браузери досить розумні, щоб повідомити сервер коли користувач запитує деякі веб-сторінки, що доменне ім'я користувач хоче домашню сторінку. Так у чому ж хороший про це вам не потрібно одному фізичному сервері або один CS50 приладу для кожного сайту ви можете створити. Ви можете використовувати той же сервер і розвиток сотень різних веб-сайтах. І дійсно, якщо ви людина намагається почати веб-сайт, Чи для задоволення або для бізнесу, як правило, ви будете виходити в Інтернет, і ви будете платити комусь десять баксів на місяць, сто доларів на місяць для розміщення веб-сайту для вас. І те, як працює, вони звинувачують інших людей десять баксів на місяць чи сто баксів на місяць для розміщення веб-сайтів інших людей на їх же сервері. Тому вони можуть зробити це тому, що цю функцію називають bhosts, але про це, коли прийде час для остаточного проекту. 

А зараз давайте просто пірнати там. Так кд віртуальних доменів, і якщо я Тип LS зараз, помітите, що є в папці там називається локальним хостом. Це тому, що, за замовчуванням, дані пристрої Ви коли-небудь збираєтеся запустити один сайт на прилад. В дійсності це не реальний світ, це не реальний веб-сервер. Отже, дозвольте мені перейти в локальний хост, і тепер ми побачимо там останній каталог з ім'ям HTML. Так що це трохи глибоко, ієрархії, але якщо і коли Ви вирішили приступити до розробки декількох веб-сайтах протягом найближчих місяців або років п, така структура папок прагне бути корисним. Тепер давайте увійдемо в HTML, як я тільки що зробив, Тип LS, і нічого не їсти. А тепер давайте йти вперед і робити це. Дозвольте мені відкрити Chrome всередині приладу, і дозвольте мені перейти до http://localhost. Таким чином, буквально ім'я для мого приладу, ввести, і я отримую індекс /. Це дійсно не показував мені що-небудь цікаве, але виявляється, що те, що ми бачимо в тому, що папка, HTML. Там немає нічого всередині цієї папки прямо зараз, так що замість того, що я збираюся потрібно зробити, це спочатку створити файл. Створення HTML-файлу, як ми робили в понеділок, але на цей раз покласти його всередину приладу. Для тих з вас, хто намагається слідувати разом з ноутбуками зараз, Дозвольте мені зробити одну сторону, що будете охоплені в веб-PSET, Але для того щоб отримати цю роботу в перший раз, Ви будете мати, щоб запустити цю команду: Судо початку HTTPD служби. І це, знову ж таки, буде повторюватися в останні PSET, Але якщо ви граєте разом зараз вдома, веб-сервер вимкнена в прилад, і це так, що він не підірвати ОЗУ і пам'яттю на 7 тижнів в семестрі, коли ми не потрібна. Таким чином, ви повинні виконати цю команду один раз, і ви отримаєте вихід в цьому роді. Тоді ви повинні бути в змозі грати разом тут. Тепер давайте повернемося в цю папку. Ця папка порожня, тому дозвольте мені почати створення файлу, Gedit hello.html. 

Добре. Gedit відкрито, як зазвичай. Дозвольте мені зробити тип документа, HTML, HTML, дозвольте мені забігати вперед і почати закривати мої позначки. Тепер у мене є голова. Дозвольте мені йти вперед і закрити голову, Дозвольте мені тепер робити заголовок сторінки, привіт світ, як минулого разу, Закрити назву, тепер дозвольте мені зробити тіло. У тут я скажу привіт, світ з деякими exclams дати зрозуміти, що це зовсім інша рядок. Закрити тіло, і тепер дозвольте мені йти вперед і збереження файлу. Дозвольте мені повернутися до моєї вікно терміналу, і якщо я типу LS, Я повинен, по-видимому, див. hello.html. І я роблю. А тепер давайте повернемося до моєї браузера, натисніть перезавантаження, і ви можете бачити, що ми дійсно всередині цієї папки HTML. Я не бачу веб-сторінку ще, це Apache, веб-сервер, просто показує мені список вмісту цього каталогу. Так само, як Mac OS або Windows, як правило, роблять на свій локальний жорсткий диск. Так що, якщо я хочу бачити цю веб-сторінку, я можу натиснути цю маленьку посилання тут, hello.html, І дійсно, те, що я очікував побачити. Тепер, знову ж таки, це не URL, що кожен з вас може відвідати прямо зараз, тому що для вас, місцевий господар, якщо у вас є ноутбук тут, він має на увазі вашого власного екземпляра приладу. Це на мій особистий прилад, але це начебто німий для мене мати, щоб мати Користувач, як я, натисніть на hello.html насправді побачити вміст цієї сторінки. Виявляється, що веб-серверів, таких як Apache нехай у вас є файл за замовчуванням для будь-якого веб-сервера. Зверніть увагу, тут ми маємо hello.html. Яка команда в Linux перейменувати файл? 

MV, для руху. Отже, дозвольте мені зробити це, і дозвольте мені перейменувати hello.html в index.html. Дозвольте мені Тип LS, щоб підтвердити, що це була перейменована. Тепер це буде - якщо я повертаюся до локального хосту, Зауважимо тепер, що я автоматично бачачи, що веб-сторінки. Це збігається з моїм насправді робити / index.html, але хороша річ тепер в тому, що веб-сервер з'ясувати, Ах, якщо у вас є файл, який, за людським конвенції, є index.html, Дозвольте мені показати користувачеві, що файл за замовчуванням а не якийсь дурний каталозі каталог, який зовсім не зручно. Дійсно, більшість відвідуваних веб-сайтів в Інтернеті не список файлів, натисніть на, вони просто показати вам вміст. Так от, як ми можемо це зробити, index.html. Так що це все весело і добре, але це досить простий веб-сторінки. Дозвольте мені йти вперед і відкривати index.html в моїх віртуальних доменів, місцеві господарі, HTML каталозі, і давайте щось додати більший інтерес. Так що привіт світ, давайте замість цього кажуть: "Це CS50, Гарвардського коледжу. . ». Таким чином, початок опису каталог курсів якийсь там. Тепер, якщо я перезавантажити, я повинен бачити це в моїй домашній сторінці. Гаразд, і я бачу, що, але припустимо, що я хочу зараз перерахуємо деякі додаткові контенту в даному файлі. Я міг піти сюди і сказати, передумов немає, Незважаючи на те, що деякі з вас, ймовірно, хотів, «Ха-ха-ха, немає ніяких передумов. Але - офіційно. Таким перезавантаження, і тепер ми маємо те ж чудасія, що ми бачили в останній раз. Але чому? Це було просте виправлення. Чому ця сторінка не працює? [Студент, нерозбірливо] >> Так, ми вирішили це раніше явно говорить браузеру покласти рядки тут. І це тому, що, знову ж таки, браузер тільки збирається зробити явно, що мова розмітки говорить це робити, так що навіть якщо ви могли вдарити введіть один або два рази або навіть у десять разів, він збирається об'єднати все в одному просторі, просто конвенції. Так що якщо ви дійсно хочете рядки, ви повинні використовувати тег б-р, і тепер повідомлення, як в понеділок, я поставив / всередині цього тега, тільки тому, що цього просто не відчуває себе добре , Щоб почати новий рядок, то зупинити його ні з чим між ними. 

Таким чином, конвенція в HTML, щоб відкрити і закрити тег одночасно. Як і в сторону, ви побачите багато сайтів, в книгах не робити цього. Це правильно робити або не робити цього, але ми стверджуємо, , Що дизайн-мудрий і стилістично, це тільки краще тому що тоді кожен тег як відкриваються і закриваються так чи інакше. А тепер давайте збереження і перезавантаження. Повернутися до браузеру, все в порядку. Тепер ми досягли певних успіхів, але це не зовсім достатньо. Давайте підемо далі і почати друкувати в деяких довше текст. Так скажімо, «Швидка коричнева лисиця стрибає над ледачою собакою". А тепер дозвольте мені просто скопіюйте та вставте цей кілька разів так що у нас є абзац тексту. Дозвольте мені повернутися сюди. Так що це не виглядає дуже добре. У мене є рядки, так що це нормально, але тепер, коли ми стаємо на точку з веб-сторінки , Який має багато контенту, а не тільки однієї лінії, щоб продемонструвати HTML, ми можемо почати думати про ці речі, як фактичне пунктів. І ми можемо почати структурувати нашу веб-сторінку трохи чистішим. І справді, що я можу зробити, це зайти сюди всередину мого тіла тега, і ви знаєте, що, якщо «Це CS50. . ». дійсно demarks початку абзацу, добре, давайте помітити його як таке. Дозвольте мені абзац тексту, тільки за згодою, дозвольте мені сказати, що цей пункт закінчується тут, , А потім замість того, робити це рядки, дозвольте мені сказати, що це належить там, і в якості нового пункту, і я просто швидко відступ від просто видаливши всі ці речі. 

Так що тепер у нас є абзац з відступом там, і тепер наша розмітка починають отримувати трохи більше семантично відповідає тому, що ми намагаємося зробити. У нас є пункт, так що давайте називати це пункт з міткою р. У нас є другий пункт, так що давайте називати це пункт з міткою р. А тепер, те, що браузер, як правило, роблять точно так само як в англійському книга або стаття, де ви зазвичай бачите деякі рядки між абзацами. Браузер буде робити це за вас автоматично. Так що тепер у нас є два пункти, і ми можемо продовжити це. Але, звичайно, в Інтернеті, коли у вас є органи тексту це не правило, просто величезні згустки тексту. Є часто гіперпосилань там. Таким чином, якщо ми хочемо, наприклад, включати в себе деякі посилання там, Припустимо, що могло б становити інтерес в будь-який веб-сторінці Я створюю тут - Відпусти мене до Google.com, і дозвольте мені шукати булок. Перейти до Google зображень, і, як щодо - це мило. Ми підемо з цим. Так що тут у нас є швидка коричнева лисиця стрибає через ледачу собаку. Так що я збираюся зробити тут, тільки заради демонстрації, , Припускають, що цей образ був на моєму сервері, і я був створення цих зображень. Що я просто був правою кнопкою миші або керувати натисніть на картинку, і те, що ви побачите в більшості браузерів небагато меню - припинити робити це - невелике меню, яке дозволяє вибрати копію розташування посилання або скопіюйте URL. Отже, дозвольте мені повернутися тепер до мого HTML, і припустимо, що я хочу до гіперпосилання на іншу веб-сторінку. 

Що було тег з ім'ям для цього? [Студент, нерозбірливо] >> Да. Так HREF для гіпер посилання. Дозвольте мені йти вперед і вставити його дюйма Це досить довгий URL, так що дозвольте мені віддалитися. Закрити дужки, так що тепер я помітив дорозі сюди тому що URL виявилася досить довго. Дозвольте мені прокрутку тут до кінця булок, , А потім дозвольте мені в цей тег з </, де я тільки закрив ім'я тега. Тепер дозвольте мені йти вперед і зберегти цей файл, завантажити веб-сторінку, і тепер, за замовчуванням, яка буде підкреслено синім для мене, але насправді, тепер я можу натиснути на цю і вуаля. Там в цьому образі. І це не повинно бути зображення, воно могло б пов'язані деякі інші випадкові сайт в Інтернеті. Я міг би це зробити, наприклад, з CS50, так що останній приклад. "Це CS50" можливо, має сенс йти, HREF = http://www.cs50.net, недалеко цитати, недалеко якір. Отже, тепер ось ще коротше URL, і на цей раз ми не збираємося перейти за посиланням зображень. Ми замість цього збирається перейти по посиланню на іншу сторінку. Тепер у нас є зображення тут. Я відчуваю, що ми можемо робити трохи краще, ніж просто посилання на зображення. Що робити, якщо ми дійсно хочемо втілити її в нашу власну веб-сторінку? 

Ну, що я можу зробити тут, а не посилання на цю графіку, Дозвольте мені замість скоротити URL, і ми позбудемося гіперпосилання і очистити це. А ми підемо сюди і позбутися цього. Ми дійсно не потрібні всі ці пропозиції зараз, так що дозвольте мені скоротити сторінці небагато. А потім сюди, дайте мені йти вперед в новому пункті, сказати, що я не хочу, текст тепер, я хочу, зображення, джерелом якого буде, що URL-адреси. Зображення, як і рядки, або є, або її немає. Отже, дозвольте мені негайно закрити цей тег. Дозвольте мені тепер іти вперед і закрити пункт, що я всередині, і якщо все піде добре з Hello, World, якщо я перезавантажити зараз, Я, звичайно, побачити прямо в мою власну веб-сторінку зображення. Так що тепер у нас є тег зображення, тег прив'язки і т.п., і для хорошої заходом, дозвольте мені зробити ще одну річ, яка часто нехтують на веб-сайтах в ці дні: Давайте надати деякі описовий текст для цього зображення для людей, які на мобільному пристрої і, отже, не могли б завантажити малюнок дуже швидко, для тих, хто сліпий і не зможе бачити зображення але вони можуть мати для читання з екрану, який може сказати їм, що це зображення має. А для цього, є ще один атрибут для зображень теги називається альт, альтернативного тексту. А що я можу зробити тут кажуть: "Це швидка коричнева лисиця. Так що навіть якщо людина не може бачити зображення на екрані, він або вона може принаймні, чули, як і деякі частини програмного забезпечення, що насправді є на екрані. 

Це не вплине на естетику сторінки, але це, безумовно, хороша практика для користувачів. Гаразд, давайте залишимо цю веб-сторінку в її нинішньому вигляді, але давайте подивимося, якщо ми не можемо ввести деякі кращі підходи до написання цих веб-сторінках, деякі уроки, які будуть служити нам і нашим сторінкам стають все більш і більш складними. Те, що ми не збираємося робити протягом наступних кількох тижнів це ви пройдете через всі кілька десятків теги HTML, що є. Багато чого, як в спину нуля в тиждень 0, вона, ймовірно, буде досить дати загальний огляд деяких понять, короткий огляд деяких з блоків ви, ймовірно, були в стані, дуже зручно, орієнтуватися на свій власний, різні частини головоломки. І це трапиться знову в HTML, швидше за все, яких є достатні ресурси в Інтернеті, які ми вкажу вам на, різні підручники, якщо ви віддаєте перевагу читати підручник, що ви пройдете через всі різні речі, які ви можете зробити з HTML, але насправді, ми бачили досі в HTML більшість фундаментальних понять. У нас є поняття теги відкриваються, теги закриті. Деякі мітки, які, як відкриваються і закриваються У тому сенсі, що вони порожні, не повинно бути нічого всередині них як тег зображення або рядки, які тільки існують. Ми також розглянули вже в понятті атрибуту, як альт або джерела. Зверніть увагу, що ці слова, як правило, за угодою, щоб бути короткими і змістовними. 

Ми не маємо розсуд над тим, що ці речі називаються, хтось ще, хто винайшов HTML придумав ці імена. Таким чином, ви просто повинні почати, щоб дізнатися чи подивитися, в будь-який час Ви потребуєте в них, що імена цих тегів і атрибутів. У випадку ці атрибути, атрибути зазвичай змінити поведінку деяких тегів. У цьому випадку, джерело атрибут повідомляє тег зображення що джерелом зображення повинно бути. HREF атрибуту говорить тега, якою вона має бути фактично посилання. Але з точки зору структури веб-сторінки, навіть якщо Facebook і Google, і як виглядають як повний безлад під капотом, на перший погляд, якщо ви почнете читати через неї більш методично, всі вони слідують цим основною, базовою структурою. Але ми можемо поліпшити стилізацію цих речей. Отже, дозвольте мені піти на деякі приклади, які я підготував заздалегідь. Дозвольте мені піти далі і скопіювати їх з іншою папки тут і поклав їх в цей каталог. Заздалегідь, те, що я робив, було підготувати кілька файлів: search0, search1, Search2, і search3 і 4. Дозвольте мені йти вперед і відкриває перший з цих файлів, і давайте подивимося, якщо ми не можемо почати створювати нашу власну пошукову систему. У верхній частині цього файлу, як це зазвичай буває в класі, просто купа коментарів. У HTML, хоча, за допомогою якого Ви починаєте коментар є <! - і тоді ви всередині коментаря, багаторядковий коментар. Коли ви будете готові, щоб зупинити цей коментар, ви можете зробити ->. Так що все на верху в синьому це просто коментар. 

Це моя Декларація DOCTYPE, який знову, Ви можете просто скопіювати і вставити на віру, на даний момент. Це просто говорить браузеру, «Ось іде деякий HTML 5. Нижче цього, в рядку 14, є першим в моїй фактичної теги і це просто говорить, як і раніше, ось деякі HTML, ось іде глава моїй сторінці, ось назва, , А потім, навпаки, ось і все за титул, це все на голову. Ось зараз йде тіло моїй сторінці. Так що пару нових тегів зараз: h1 виступає за заголовок 1. Там є традиція в HTML для багато років тому наявності різних розмірів тексту. А ще в той день, кожна з яких означала, як правило, тільки великий і жирний. Але є і h2, яка є великою, але не такий великий і жирний. Там в h3, яка є своєрідною великою, але не такий великий і сміливий, і так далі, аж до h6. У ці дні, хоча, h1, h2 і h3 дійсно означало, мати більш смислове значення для них, якої h1 дійсно заголовок: заголовок веб-сторінки, заголовку стовпця або щось подібне до цього тексту. Так що я навмисно сказав h1 CS50 пошук> h1 для завдання, що це дійсно заголовок, назва моїй сторінці. Не титул в тому сенсі, заголовок, але назву, що ви насправді бачите в самій веб-сторінки, в тілі. Зараз цього, ви можете здогадатися, що це таке, хоча у нас є кілька нових частин синтаксису. Це форма. Таким чином, веб починається найцікавіше , Коли веб-сайти приймають вхідні дані від користувачів. У цьому класі, в задачі встановлений на веб-програмування, Ми не збираємося робити сайт, як такої, зі статичним вмістом, яке показує фотографії, які ви зробили, або це моє резюме, і про мене, тому що ті речі, які відносно легко, разом узяті. Це важко зробити красиві речі в Інтернеті, але принаймні піднімаючи зміст досить тривіально. Але все стає справді цікаво, коли хтось може відвідати ваш сайт і забезпечити вхід і можуть заповнювати форми, можна перевірити з прапорцями і можуть взаємодіяти з вашого сайту. І справді, напевно, кожен веб-сайт, ви піклуєтеся про в ці дні, у всіх подробицях, так чи інакше інтерактивним. Facebook, Google, тощо, які приймають користувача введення і виробляємо індивідуальні вихід. 

Отже, давайте почнемо це робити зараз. Давайте тепер переході з використанням тільки HTML для розмітки статичного контенту як замість механізм доставки для динамічного контенту. І в цьому напрямку, давайте реалізуємо нашу власну пошукову систему. Давайте зробимо це в такий спосіб. Ось вигляді тега. Дія атрибут вказує, що, коли користувач заповнює цю форму з клавіатурою, він буде представлений на цю адресу тут. Так я начебто обману. Він збирається взяти нас трохи довше одного класу, щоб реалізувати весь пошукової системи, тому ми просто робимо передню частину, так би мовити. Ми будемо робити ту частину, яка дозволяє користувачеві пошук, і ми будемо сортувати Пунт на Google жорстка частина пошуку результатів пошуку, але, зокрема, я збираюся поговорити з веб-сервера від Google за допомогою одного з двох дуже популярних методів. Один час отримати інше, що ми в кінцевому рахунку бачити, будучи повідомлення, хоча є й інші, які рідше використовуються. Так що просто викликає в уяві ідею, я хочу, щоб отримати контент, отримати деякі результати пошуку. Це, мабуть, можна здогадатися, що це робить. Це свого роду входом, він, по суті, буде виглядати як текстове поле, і ім'я цього входу, ім'я цієї змінної, так би мовити, збирається бути Q для запиту за угодою. І знову, тип цей вхід не буде прапорець; він не буде меню, воно буде в текстове поле як позначається цей атрибут тут, і це текстове поле, як рядки, або є, або немає. Тому у нас є порожній елемент з косою рисою всередині цього тега. Тоді я збираюся поставити рядки, і ви можете, напевно, здогадатися, що це буде робити. Це ще один вид форми введення. 

Цей збирається бути використаний для відправки форми. Таким чином, це буде велика кнопка, яку користувач може натиснути, щоб відправити форму, і мітка на цю кнопку буде "CS50 Пошук". Закрити форму, недалеко тіла, близькі HTML. Давайте подивимося, що ми маємо на увазі цю веб-сторінку. Отже, дозвольте мені піти в моєму браузері, Відпусти мене, тим не менше, на локальному хості. Це як і раніше index.html, так що якщо я хочу бачити цей файл називається search0, Я можу просто зробити / search0.html, введіть - і перший з моїх помилок. Що відбувається? Я чітко не мають дозволу доступ до цього файлу, з деяких причин. Але це тому, що, на відміну від роботи, яку ми робили досі в C, де ви пишете програми передбачаються runable вами, виконувані вами, це не зовсім так в Інтернеті, яким іноді ви можете створювати файли на сервер, але ви не хочете, щоб весь світ зможе побачити їх. Швидше за все, ви хочете, щоб світ бачив деякі файли але не інші, просто заради приватного життя автора. Так що це більше вибору в основі, коли ви робите речі в Інтернеті. І тому дозвольте мені насправді Тип LS тут, і ви побачите файли у мене є, але нагадаємо, що якщо я зроблю LS-л довгий час, Я отримаю більше в каталозі, який дає мені деякі подробиці про ці файли що в даний час, дійсно, в перший раз, що мають відношення до нас. Зверніть увагу, що на правому імена мої файли, і час, в який вони в останній раз були змінені або скопійовані. Цей номер тут що? Ви пам'ятаєте? Розмір в байтах, наскільки великий файл. 

Так що я, здається, є якийсь логотип тут, це більше, ніж всі інші файли. Це хто я, це те, що я і що я група дюйма Але потім, тут на лівому трохи загадкові послідовності, і ми поговорили, я думаю, коротко про це і в минулому, але це не має спільного з дозволами. І навіть якщо це трохи туманно, RW, ймовірно, означає читати і писати. Ось і виходить, що ці штрихи позначають різні набори дозволів для різних людей. І картина, по суті, таким чином. Коли ви бачите послідовність штрихів тут, вони виглядають наступним чином. Там в тире, тобто ще три тире, то є ще три, то є ще три. Перший з них є або тире, або це оголошення для каталогу. Так що досить легко. Якщо це папка, вона говорить д, в іншому випадку це дефіс. Там в кілька інших випадків, але зараз ми просто турбуємося про файлах і каталогах. Наступні три тире - і я штучно вставлена ​​простору. Вони були, очевидно, не було, коли ми їх побачили хвилину тому. Ці дозволу власника файлу, в і відкликає секунду тому, що воно було прочитано і писати. Це тому, що я, як людина, яка створила цей файл хвилину тому, Я, просто за умовчанням, на комп'ютер Linux, мають можливість продовжити читання і запис цього файлу. 

Таким чином, операційна система просто дає мені RW автоматично. Середній з них відносяться до моєї групи, що й студенти, яка є свого роду безглузді на приладі, тому що я єдина людина, що використовує цей прилад. Отже, дозвольте мені просто махати руками, що на даний момент. Але останній з них є найбільш важливими для Web. Це все ще в світі, і той факт, то що --- означає, що ніхто ще в світі має ніяких прав на цей файл. Ясно, що проблема, так що мені потрібно, щоб виправити це , Якимось чином дати світові те, що? Читати і писати? Це, ймовірно, німий, чи не так? Я не хочу, щоб хтось на веб- піти, щоб відвідати мою сторінку і якось змінити цей файл, навіть якщо вони дійсно не могли з HTML файл, але тільки в принципі, напевно, просто хочуть, щоб вони могли його прочитати. Що це означає читати? Це не означає, що вони збираються піклуватися про фактичну HTML, але браузер повинен бути в змозі розібрати, що мова розмітки, зверху вниз, зліва направо. Значить, хтось в інтернеті повинна вміти читати, так що я мінімально потрібно дати йому р. Я можу зробити це в кілька різних способів, але, можливо, Найпростіше виконати цю команду тут. Chmod, зміна режиму, то A + R, так що все, все в світі + читати, , А потім ім'я файлу, search0.html. 

Тепер, якщо я роблю LS-л знову, зверніть увагу, що файл був змінений, І дійсно, я включив г для всіх. Я також включив його в свою групу, але це нормально, бо якщо я перетворився на на всьому, моя група є підмножиною цього. Так що це теж добре. Це просто означає, що комп'ютер тепер зробив його доступним для читання. Тепер дозвольте мені повернутися до моєї браузера, натисніть кнопку перезавантаження. Ах-ха. Тепер у нас є CS50 пошук. Я збільшено трохи штучно - досить огидне пошукової системи. Але давайте подивимося, якщо вона дійсно працює. По-перше, дозвольте мені зробити швидку перевірку осудності, дозвольте мені керувати кнопкою миші і переглянути вихідний код сторінки. Зверніть увагу, що в Chrome тепер ми спостерігаємо те ж саме HTML, що я сам створив. Не заплутатися тут, однако. Я не можу почати зміна коду тут, тому що браузер має доступну тільки для читання зв'язку з цим кодом. Браузер просто запитав локального комп'ютера файл під назвою search0.html. В даний час чиста випадковість, що прилад виявиться на тому ж комп'ютері, мій браузер. Я міг би просто, що еквівалентно, ввели в www.facebook.com/search0.html, і якщо Facebook був файл з ім'ям, я б тоді, бачачи їх HTML. І, звичайно, я не можу змінити файл, який повертається з Facebook, або. Так що тепер ми як би стираючи грані. Прилад є як сервером, обслуговування веб-сторінок, але в той же клієнта в тому сенсі, що я за допомогою браузера насправді поговорити з цього сервера. Отже, давайте подивимося, якщо мій Google Пошукова система працює. Дозвольте мені йти вперед і шукати булок, введіть. І вуаля, тепер у мене є мій власний пошуковик. 

Але як це працює? Натяжкою, але - і тепер ви не можете бачити, точніше, та частина, яка представляє інтерес. Зверніть увагу, що відбувається. Зверніть увагу на URL. Виявляється, що цей метод, називають отримати, супер-простий. Коли ви вкажете у формі, що Ви хочете, щоб 'отримати' Результат від деяких серверів, що він збирається зробити, це прийняти те, що ви ввели у форму і поклав його в URL-адресі. Це буде стандартизувати, як він отримує покласти в URL наступним чином. Зверніть увагу, що це URL, який був значенням мої дії атрибуту. Ось де я хотів форма в кінцевому підсумку. Але то помітити це знак питання. Це Конвенція про веб якого забезпечити введення даних користувачем на сайт, ви додаєте до URL знак питання, і тоді у вас є ціла купа пар ключ-значення. Ім'я ключа, інакше відомий як параметр в Web, то у вас є знак рівності, то у вас є значення цього параметра. Так що це по суті ім'я змінної і значення змінної, але імена цих змінних і значень прийшов з HTML форми. Чому плюси там, як ви думаєте? Тому що я не вводити + між моїми словами. [Студент, нерозбірливо] >> Так, це тільки для інтервалу. Швидше за все, коли ви бачили URL, ніколи немає ніяких прогалин у ньому, якщо тільки тому, що якби були, ви не могли дійсно скопіюйте його і вставте в IM або в електронній пошті, тому що це порушило б. Ви хочете, щоб все це буде один безперервний рядок символів. 

Таким чином, браузер досить розумний, щоб розуміти, е-е-е-е. Не просто поставити просторі. Дозвольте мені кодувати простір, в деяких стандартним способом. Один з конвенцій для цього є наявність браузера автоматично ставиться +, де ви хотіли б мати місце. Так що тепер, зверніть увагу, Google був вид зручно. Я, звичайно, не створюють цю веб-сторінку, але вони вже заповнена свої текстове поле з тим, що, точно, я набрав дюйма Припустимо, я хочу, щоб шукати щось ще, як лінива собака. Я можу просто набрати це тут, повторного пошуку. Зверніть увагу, що URL змінюється тут, не помітити те, що я можу насправді шукати все, що я хочу просто розуміння того, як URL-адреси роботи. Я міг би зробити ледачий кіт, введіть, і зверніть увагу, тепер я отримую дуже ледачих - ми повинні? Я відчуваю, що ми повинні. Я отримую дуже ледачий кіт. Добре. Це одна з найдурніших речей, які ми зробили. Але це ледачий кіт. У всякому разі, те, що ключ винос тут? Тепер ми начебто гри в світі HTTP. HTML саме ця мова розмітки, відкритий тег, що закриває тег, , Який говорить браузеру, як відображати вміст на веб-сторінках. Але коли ви починаєте передачу даних через Інтернет між веб-браузером і сервером, ось де цей протокол відомий як протокол передачі гіпертексту бере на себе. Це свого роду людського конвенції; коли Сем і я потиснули один одному руки в понеділок, починаючи з'єднання, а потім закриття з'єднання, ті ж ідеї тут. Як результатів Google, повертається до мене? Як моя форма представлення збираюся Google? Ну, пам'ятаєте з інший день що те, що відбувається насправді під капотом, коли ви запитуєте веб-сторінки, ваш браузер посилає кілька-зашифроване повідомлення, як GET / HTTP/1.1 для домашньої сторінки за умовчанням. 

Або, в даному випадку, тому що я спеціально просив раніше search0.html, то це буде декілька, загадкове повідомлення що мій браузер відправляє на пристрій. Або, в даному випадку Google, що насправді послав є запит до / пошуку, а потім? Q = ледачий кіт, зі знаком плюс там. Таким чином, це повідомлення, що я, людина, я ніколи не друкувати, але в даний час відправлені на мій браузер, це, як HTTP відбувається. Це еквівалент нашого потиснувши руки. Це запит, а сервер збирається відправити відповідь. Отже, давайте поглянемо на це під капотом. Як і раніше, ми можемо відкрити цю спеціальному полі в браузері. Перегляд сторінки, перевіряти елементи. Таким чином, під перевірку елемента, зауважив, що те, що відбулося в Chrome, IE і Firefox і мають схожі механізми, у нас є ці інструменти для розробників доступні для нас. Нормальні люди не використовують ці вкладки. Але ми, от, цікаво те, що відбувається під капотом на мережевому рівні. Так що, якщо я тягну до мережевого рівня тут, Дозвольте мені піти далі і розширити це вікно, відкрити цей запис тут, і подивіться на заголовки. Так що ж відбувається, коли я прошу файлів з веб-сервера мій браузер відправляє цілу купу речей. І дозвольте мені переглянути джерело. Так під заголовків запиту, І це тільки Chrome показав мені деякі діагностичні вихід, ніби як відладчик якийсь, зауважити, що те, що я виділив тут саме те, що Chrome відправляє на сервер для того, щоб запросити файл з ім'ям search0.html. Це говорить серверу, що він думає, що його ім'я, Завдяки цій області товстої кишки господаря, то є певний досить езотеричні речі тут, як щось робити з датами і часом, щось робити з мовами, що браузер розуміє, але по-справжньому важливих ліній цих перших двох тут. 

Що ж відповідь сервера? Ну, а якщо прокрутити вниз тут і переглядати вихідний текст цією річчю, помітили, що сервер відповів з дещо загадкове повідомлення, а також, 304 Not Modified. Це трохи дивно, дозвольте мені насправді намагаються виправити це. Дозвольте мені утримувати зсуву і натисніть завантажити тут щоб змусити браузер насправді зробити цей запит в перший раз. Тоді дозвольте мені збільшити масштаб, і ми бачимо, що відповідь сервера, тому що я провела зміну, складає 200 OK. Отже, ви, ймовірно, ніколи не бачив номер 200 в контексті Web, але те, що номери Ви іноді бачили несподівано з сервера? 404, файл не знайдений, 403, заборонений, 500, помилка сервера. Так що ці цифрові коди, що у світі використовується у веб- для позначення помилок, так само, як функції C може повернути помилки і основні можете повернутися кодів виходу. 200, хоча, ви рідко бачите, тому що це означає, що все добре. І 304 ви, ймовірно, ніколи не бачили, тому що те, що це означало? Це нічого не має - давайте подивимося, якщо ми можемо імітувати цей раз - О, тепер це не співпрацює. 304 говорить не змінюється, так чому ж сервері, навіть відповідати? Ну, для підвищення ефективності веб-сервер автоматично для вас, якщо файл не змінився, він не буде передавати весь HTML файл. Це просто скажу браузера вона не змінилася. Просто використовуйте копії у вас вже є. Так що це поняття кешування на веб- продуктивність, так що ви не витрачаєте час і відходів пропускну спроможність завантаження файлів знову і знову без необхідності. 

Але ця веб-сторінка, зараз, була супер-простий, і це тільки показав мені, що HTML повернувся. Давайте реально використовувати мережу вкладки тепер робити Google пошук як булок. Дозвольте мені потім натисніть CS50 пошук, і тепер, зверніть увагу, в нижньому тут цілу купу речей повернувся тому що, коли я відвідую реальним веб-сайтом, як Google.com, вони мають зображення, у них є текст, у них є мова, званий наявність там. Таким чином, кожен рядок в цій таблиці сюди являє собою щось, що Google виплюнув у відповідь на моє прохання одного. Одне мене хвилює, хоча, це перше. І якщо я йду в пошук, запитувати, натисніть кнопку перегляду вихідного коду тут, зауважити, що, дійсно, загадкове повідомлення, що мій браузер послав в Google Саме ці два рядки, слідують деякі таємної інформації тут які ми будемо ігнорувати. Але зверніть увагу, також, що Chrome є досить зручним с, він також показав мені рядок запиту, який був посланий всередині Тому замість того, покажіть мені це, який був буквально відправлений, якби я побачити його декодувати, Chrome, тільки для налагодження, для розробників, як ми, це просто показує мені зрозумілі людині версія - це не як ви записуєте лисиця, мабуть. Я просто помітив це зараз - але це показує вам, що я, мабуть, ввели. Між тим, відповідь, який прийшов від сервера знову 200 OK. Але, включених у відповідь, що, звичайно, Якщо ми дійсно перегляду HTML-сторінки - Вибачте, це трохи сполучення клавіш пішло шкереберть сьогодні. 

Я розберуся з цим пізніше. Таким чином, якщо ми насправді перегляду вихідного коду сторінки, який я можу зробити тут, натиснувши відповідь це те, що було насправді плювати назад, на додаток до загадкових 200 OK повідомлення з сервера. Трохи загадково, але де все це виходить? Ну, давайте зробимо ще одну річ тут. Інший дещо загадково-команд, але вигляд цього в акуратні тим, що він показує нам саме те, що відбувається під капотом. Так що я повернувся на моєму Mac тут, я підключив через програму SSH, Secure Shell, на інший сервер тому що більшість комп'ютерів Гарвардського університету блокувати команди ми збираємося запустити тому що ця команда на деяких серверах називається трасування , Що дозволяє простежити маршрут між точками А і В, і досі ми приймали як належне повністю що я можу ввести в Google.com і якимось чином отримати дані назад з півдороги по всій країні або на іншому кінці світу. З трасування ми дійсно можемо зануритися в трохи глибше про те, як працює Інтернет, і подивитися, що відбувається під капотом. Так що давайте йти вперед і довільно простежити маршрут, скажімо, Stanford.edu, які по всій країні, і натисніть Enter. Ця команда може бути супер-швидкого або супер-повільні, але те, що ми бачимо зараз, рядок за рядком, є кожен з кроків або стрибків між нами і Пало-Альто, або Стенфорд, де вони мають свої веб-сервера. Отже, що ж кожна з цих ліній представляють більш конкретно, правда? Шматок жаргон з Інтернету? [Студент, нерозбірливо] >> Що це таке? [Студент, нерозбірливо] >> Ну, так що є час, але те, що кожен рядок - те, що я маю на увазі хоп? 

Ну, є такі речі в інтернеті називають маршрутизаторами. І маршрутизаторів, як випливає з назви, інформація про маршрут від точки А в точку Б. Але є кілька пунктів за межами а і б. Там в в і г а д і е між рядків 1, які, трапляється, IP-адресу мого комп'ютера, або мій числовий адресу, який однозначно ідентифікує комп'ютер, і кроці 15, який насправді шостий веб-сервер, по-видимому, яку я виводячи з цього, чи 6-ї версії свого веб-сервера в Стенфорді. Але те, що начебто акуратно, ми можемо побачити шлях , Що моя 0 і 1 приймають з мого комп'ютера в Стенфорд. Таким чином, крок 1 адресу мого власного комп'ютера. Кожен комп'ютер в Інтернеті має унікальний ідентифікатор, який виглядає наступним чином. Number.number.number.number. Десь на цьому кампусі, ймовірно, в науковому центрі, є маршрутизатором називається основний шлюз 2-te83, що б це ні коштів, так що це одне з великої фантазії Гарвардського університету маршрутизаторів, які направляють багато трафіку. Ось ще один з маршрутизаторів Гарвардського університету, це один Border Gateway, кордону сенсу це, ймовірно, на периферії містечка десь. Тоді є NOx один, рядок 4, яка є північною Перехрестя, , Який є великим ISP, інтернет-провайдера, що такі місця, як Гарвард підключити до. Але тоді все стає трохи цікавіше в рядку 6. Де мої біти раптом? Канзас. У світі є звичка використовувати коди аеропортів у багатьох з цих речей, або принаймні скорочень штатів або міст, так він виглядає, всього за 60 мс, пакет інформації, 0 і 1 з моїм ноутбуком отримав всю дорогу до Канзасу, і знову, в 60 мс. 

Крім того, після Канзас, вони взяли тур через Х'юстон, ймовірно, як це було запропоновано ім'я цього сервера. Так як сервер в Інтернеті повинні мати числовий адресу, він може також, при необхідності, мати кілька більш зрозумілі людині адреси, що люди придумали. Тепер, у пункті 8, ми не знаємо, що це таке. Іноді маршрутизатори просто якась вас ігнорують, і вони просто не відповідати на питання, так що все в порядку. Той, після кроку 8 видимо де? Лос-Анджелес Зверніть увагу на всього лише 78 мс, що займає нас, людей, як 6 + годин, щоб зробити фізично, приймає пакети інформації в інтернеті 78 мс їхати так далеко. Крок 10 знаходиться в Лос-Анджелесі, а також і крок 11, здається, пішов на північ, біля Стенфорд. Це їх граничній маршрутизатора або граничний маршрутизатор. Пару кроків в Стенфорді, які ігнорують нас, І, нарешті, ми приходимо до веб-серверу всього 87 мс. Тепер всі ці цифри, як в стороні, просто сказати вам, скільки часу потрібно для передачі даних, щоб отримати від мене Кожному з цих маршрутизаторів, і це не накопичувальна. Те, що це програма не є, вона спочатку посилає повідомлення, по суті, першим маршрутизатором. Тоді на другому маршрутизаторі, то до третього маршрутизатора, вимірювання кожного разу. Таким чином, в теорії, ці часи будуть рости або принаймні дуже близько один до одного, і, дійсно, ті, які прямо тут, на території кампусу є супер-мала. Як тільки ви починаєте рух по всій країні, він приймає дані трохи більше подорожувати, ближче до 100 мс, плюс-мінус. Але давайте йти в іншому напрямку зараз. Як щодо Кембріджського університету у Великобританії? Дозвольте мені замість цього запустити трасування з www.cam для Кембриджа, . Змінного струму для академічних,. Великобританія, введіть і натисніть тут. Це було чертовски швидко. Мої дані буквально відправився в Кембридж, Англія, в ту частку секунди часу. 

Отже, давайте подивимося шлях, який він прийняв. Гарвард, Гарвард, Гарвард, Північної Перехрестя, яка є провайдером, а потім це Північного Crossroads, а потім бац. Що знаходиться між кроки 6 і 7, маршрутизатор 6 і 7? Атлантичний океан. І ми це виведення з того, що ми переходимо від 20 мс для 80 мс тут. Таким чином, дещо взяли 60 мс, плюс-мінус, щоб отримати більше. І це, напевно, велика водойма. Що відбувається після цього? Ну, ось ми і в Лондоні, всього 88 мс пізніше. Більш Лондоні, більш Лондона, Не знаю, де це, але ми припускаємо, що це за межами Лондона, Cambridge тут, і, нарешті, ми - в буквальному сенсі, Кембриджський університет . Something.net, а потім, нарешті, у рядку 16, їх веб-сервер мабуть називають Скорпіона під капотом, хоча ми знаємо його як WWW. Вид запаморочливих, я думаю. Перший раз, коли я зробив це, вона повністю підірвав мій розум. На жаль, Гарвардський блокує цей вид трафіку, як правило, в мережі. Таким чином, ви не можете зробити це супер легко. Зрозумійте, однак, це тут можливо. Добре. Давайте візьмемо наш 5-хвилинну перерву тут. Ми повернемося і пірнати глибше. Таким чином, ми повернулися, і ми начебто гуляли близько в декількох різних напрямках тут. Отже, давайте підіб'ємо підсумок саме те, що тут відбувається. Ми почали розмову про це говорять мовою називається HTML. Знову ж таки, не мова програмування. Це просто мова розмітки , Що в значній мірі про естетику і структурування змісту у вигляді веб-сторінки. Але HTML, тому потрібен якийсь механізм для подорожі між веб-браузером і сервером. HTML отже роду атракціонів на вершині цієї другої мови, або, точніше, протокол, відомий як HTTP. 

І HTTP, як ми бачили це досі, це свого роду аналогічний цієї людини конвенції рукостискання. Коли браузер хоче запиті сторінки з сервера, вона посилає, що "отримати" запит від браузера до сервера, , А потім сервер відповідає число, наприклад 200, все в порядку, а також HTML або погані число, наприклад 404, файл не знайдений. А між тим, HTTP сама по собі не в Інтернеті, як такого. HTTP це просто сервіс, особливість Інтернету так само, як G чату іншої служби, так само, як електронна пошта іншу службу. Там всякі речі, які ми можемо зробити в Інтернеті. HTTP є лише однією з цих додатків. Таким чином, у верхній частині - HTTP знаходиться на вершині щось інше яких ми не згадували по імені, Ви, напевно, чули по імені, TCP / IP. Так що історія, яку ми тільки що сказали, що це все про як дані переміщаються з точки А в точку Б. І в цьому випадку, ми побачили на дуже низькому рівні маршрутизатора до маршрутизатора, щоб маршрутизатор до маршрутизатора, як дані передаються насправді. Але на цьому шляху, вона буде стикатися з різними перешкодами. Крім того, ці маршрутизатори, є речі, звані брандмауерами в мережі Інтернет, і тому дані, такі як, що ми просто передача від мене, в Стенфорд, у мене в Кембридж, надсилається, на цьому рівні, те, що називається IP-адресу. Ми бачили цю хвилину тому, і IP-адресу це просто числові адреси виду w.x.y.z, де кожен з них між ними, плюс-мінус, 0 до 255, якщо ви не можете цілком використовувати всі ці цифри. Але кожен з цих місць власниками являє собою число від 0 до 255. Таким чином, IP-адресу в ці дні 32 біт. 

Тепер, що дає нам, скільки можливих IP-адрес в світі? Близько 4 млрд, тому що в будь-який час ми розраховуємо в степені 2 все, аж до 32 про щось, що зазвичай дає нам 4 мільярди доларів. Так що дуже багато IP адрес, але ви, можливо, читали, або ви могли б зараз помітити в популярній пресі, поштовх до нової версії IP називається IPv6. Зараз ми використовуємо версії 4. Там дійсно не було версії 5, ми просто стрибати прямо до 6. Версія 6 буде використовувати 128 біт для IP адрес, які довбали величезний. Ми не повинні закінчиться протягом досить довгого часу тепер, але ми почали тікати з 4-ї версії IP-адрес, тому що у всіх нас є не тільки речі, як ноутбуки та настільні ПК, Багато хто з нас є телефони, багато хто з нас мають інші пристрої як TiVo і т.п., які мають IP-адреси самих себе. Гарвардський сама по собі має десятки тисяч комп'ютерів. Таким чином, світ дійсно закінчуються IP-адреси, принаймні, цю форму. Таким чином, протягом найближчих декількох років, ви побачите адреси на свій комп'ютер, імовірно, повільно змінюватися все більше і більше компаній і університетів починають підтримувати нову версію. Але IP-адреса не є достатнім для комп'ютера запитувати дані з комп'ютера б. Тому що комп'ютер б може бути сервер, і сервер, як я згадував раніше, можна зробити пучки речі. Це може розмістити веб-сторінок, це може бути сервер електронної пошти, це може бути Skype сервері, це може бути сервер G чаті. 

Всі ці різні послуги, які можуть бути надані по сервера може все, фізично, бути на тій же машині. Таким чином, на додаток до IP-адресами, в світі є речі, звані порти в мережі Інтернет. Порт це просто число, таким чином, є унікальний номер для HTTP. Його номер 80. HTTP також використовується число 443, але більш конкретно, для зашифрованого HTTPS. Всякий раз, коли ви бачите с, для безпечного, яка використовує інший номер. Є й інші цифри, як 25, використовуваний для так званих SMTP, інакше відомий як електронна пошта. Там-то називається 22 для SSH, і є ціла купа інших портах там. Тепер, ми, люди рідко бачать ці цифри. Однак, коли ви вводите адресу, наприклад http://www.facebook.com, Браузер таємно вставки 80, тому що ви використовуєте HTTP. Якщо ви, навпаки, типу HTTPS, він таємно вставки 443. І ми можемо виду бачити це вручну, якщо я тягну до Брауер і перейдіть до http://www.facebook.com:80. Тому явно посилаючись не тільки на назву сайту але порт, що я хочу, щоб говорити, і натисніть Enter. Зверніть увагу, вона зникає, тому що браузер припускає, ой, 80, я навіть не буду морочитися, що показують, що для вас. Але причина цього в тому, що якщо б я дійсно хотів, щоб відправити когось електронної пошти, Я б дуже посилати його до них на порт 25, який, будучи SMTP. Трохи спрощено, але деякі з вас є друзі , Які фактично працюють на Facebook, і вони, аналогічно, є сервери, які отримують електронну пошту. 

Кожен раз, коли ви відправляєте лист, то, що Gmail робить для вас або Outlook, або будь-який інший програми, яку ви використовуєте, це свого роду таємно вставки цього числа, а, 25, в цьому випадку. Саме це поєднання IP-адреса і номер, який однозначно ідентифікує комп'ютер в мережі Інтернет і конкретної послуги на цьому комп'ютері. Зараз, звичайно, більшість з нас, напевно, ніколи не вводяться вручну IP-адресу. Може бути, у вас є в холодильнику, але і в реальному світі, не так багато. Чому ми не вводити IP-адреси в браузерах? Вона буде працювати, насправді, ми можемо бачити це, дозвольте мені показати вам ще одна команда, яка повинна працювати в будь-якому місці на самих кампусі Гарвардського університету на Mac або ПК. Там ця команда називається серверу, віддалений сервер імен пошуку. Якщо я дивлюся www.cnn.com, виявляється, що має CNN - о, цікаво. CNN почав використовувати Amazon Web Services. Ви можете знати, хмарних обчислень, один Амазонки з великих гравців в області хмарних обчислень. Те, що я робив, було, я сказав: "Дайте мені адресу веб-сервера CNN, ' але виявляється, що веб-сервер CNN, керують Amazon, Amazon Web Services, це говорить про те. І адресу цього сервера це тут. Так що я не впевнений, що це буде працювати, тому що вони не звикли використовувати Amazon. Але давайте спробуємо це, http://, IP-адресу, введіть, а також - воно буде працювати? Так. Він буде працювати. Інтернет супер-повільні сьогодні. Але, в один момент, ви побачите деякі новини. Там ми йдемо. Банк Америки відповідачем у суді. Добре. 

Це тому, що цей IP-адреса тільки, трапляється, по синонімом www.cnn.com. Звичайно, це було б жахливо маркетингу сказати, відвідайте нас на веб-сайті 50.112.94.127. Ви ніколи не пам'ятаю. Таким чином, навіть у ці дні ви, можливо, пам'ятаєте речі як 1-800-COLLECT або мнемоніки світі придумав для телефонних номерів. Який, перш ніж стільникові телефони, були досить важко запам'ятати поки ви можете просто ввести його і забути про нього. Таким чином, Web, теж має цю конвенцію імен та IP-адрес, і є ці речі там називають DNS серверів, Доменне ім'я системи сервера, які переводять IP-адреси в імена, і навпаки. Так що те, що відбувається під капотом. Зрештою, у нас є TCP / IP, що це дуже низькому рівні протоколу що, дійсно, просто отримує 0 і 1 через Інтернет, і робить це, помістивши їх у віртуальний конверт, якщо завгодно, і писати на зовнішній стороні конверта IP-адреса призначення, а також цифровий порт послуги на цього призначення, що він хоче поговорити. Між тим, на конверті є також щось, відоме як зворотну адресу, який є вашим IP адресу, так що, коли CNN отримує пакет інформації від вас, відкриває цей віртуальний конверт, бачить, що ви хочете, щоб головна сторінка, він знає, від відправника частина цього віртуального конверта, кого послати HTML назад. Отже, давайте поглянемо на це трохи більш докладно. Це з компанії під назвою Ericson, від кілька років тому. І вони взяли деякі вільності з тим, як насправді працює інтернет, але він малює набагато більш наочну картину, ніж просто крейди тут. Таким чином, я даю вам "трохи в Інтернеті". 

[Ведучий] Вперше в історії, люди і техніка працюють разом, розуміючи, сон. Об'єднуючою силою, яка не знає географічних кордонів. Без незалежно від раси, віросповідання чи кольору шкіри. Нова ера, де спілкування дійсно зближує людей. Це Світанок в Мережі. Хочете знати, як це працює? Натисніть тут, щоб почати свою подорож в Мережі. Тепер, що саме сталося, коли ви натиснули на цю посилання? Ви почали потоком інформації. Ця інформація проходить вниз у ваш особистий поштовому відділенні , Де пан пакетів IP його, називає його, і відправляє його на своєму шляху. Кожен пакет обмежений у своїх розмірах. Пошта кімната повинна вирішити, як розділити інформацію і як упакувати його. Тепер, пакет повинен етикетки, що містять важливу інформацію таких як адресу відправника, адресу одержувача, тип пакету він. Оскільки даний пакет виходити в Інтернет, він також отримує адресу для проксі-сервера, який має спеціальну функцію, як ми побачимо пізніше. Пакет даний час запущений на вашій локальній мережі або інтернету. Ця мережа використовується для підключення всіх локальних комп'ютерів маршрутизатори, принтери і так далі, для обміну інформацією в межах фізичного стін будівлі. Інтернет є досить неконтрольоване місце, і, на жаль, нещасні випадки можуть статися. Шосе LAN упакований з усіма видами інформації. Ці IP-пакетів, Novell пакети, пакети AppleTalk. Вони йдуть проти руху, як зазвичай. Локальний маршрутизатор читає адресу і, при необхідності, піднімає пакет на іншу мережу. Ах, маршрутизатор. Символ контролю в, здавалося б дезорганізовані світі. [Маршрутизатори бурмотів і говорив собі] 

[Ведучий] Там він, систематичне, байдуже, методичної, консервативну, а іноді й не зовсім до швидкості. Але принаймні він точно, по більшій частині. Як пакети покидають маршрутизатор, вони роблять свій шлях в корпоративний інтернет і голова на маршрутизатор комутатор. Трохи більш ефективним, ніж маршрутизатор, маршрутизатор перемикач грає швидко і вільно з IP-пакетів, спритно направляючи їх на своєму шляху. "Pinball Wizard", цифрові якщо ви будете. [Маршрутизатор перемикач кажу собі] [Ведучий] Як пакетів прибути до місця призначення, вони підібрали мережевий інтерфейс, готові до відправки на наступний рівень. У цьому випадку проксі-сервер. Проксі-сервер використовується багатьма компаніями в якості свого роду посередника З метою зниження навантаження на підключення до Інтернету і з міркувань безпеки, а також. Як ви можете бачити, всі пакети різних розмірів в залежності від їх змісту. Проксі відкриває пакет і шукає веб-адресу або URL. В залежності від того адреси є прийнятним, пакет відправляється до Інтернету. Є, однак, деякі адреси, які не відповідають за погодженням з проксі-сервером. Тобто, корпоративні або принципи управління. Вони сумарно справу. Ми будемо мати нічого подібного. Для тих, хто робить це, це на дорогу. 

Потім, брандмауер. Корпоративний міжмережевий екран служить двом цілям. Це запобігає деякі досить неприємні речі з Інтернету з вступниками в Інтранет, і він може також запобігти конфіденційної корпоративної інформації, від висилки з на Інтернет. Коли через брандмауер, маршрутизатор забирає пакет і поміщає його на значно вужчому дороги, або пропускна здатність, як ми говоримо. Очевидно, що дороги не достатньо широкі, щоб прийняти їх усіх. Тепер, ви могли б задатися питанням, що відбувається з тих пакетів, які не роблять це по дорозі. Ну, коли пан IP не отримує підтвердження , Що пакет був прийнятий в свій час, Він просто посилає заміна пакета. Тепер ми готові увійти в світ Інтернету. Павутину взаємопов'язаних мереж, які охоплюють всієї нашої земну кулю. Тут, маршрутизатори і комутатори встановлення зв'язків між мережами. Тепер, Чисті це абсолютно іншому середовищі, ніж Ви знайдете в захисної стіни вашої локальної мережі. З тут, це Дикого Заходу. Багато місця, багато можливостей, багато речей, щоб дослідити і місця, щоб піти. Завдяки дуже мало контролю і регулювання, нові ідеї знаходять благодатний грунт, щоб вийти за межі своїх можливостей. Але через цієї свободи, визначені небезпеки таяться також. Ви ніколи не знаєте, коли ви зустрінетеся страшний пінг смерті, Спеціальна версія нормальний пінг-запит, який якийсь ідіот придумав зіпсувати нічого не підозрюють господарів. Шлях наш пакетів приймають може бути через супутник, телефонної лінії, бездротової або навіть трансокеанських кабелів. Вони не завжди мають найшвидший або найкоротший шлях можливим, але вони отримають там в кінцевому рахунку. Може бути, тому його іноді називають «World Wide Wait". Але коли все працює гладко, Ви можете обійти земну кулю п'ять разів на падіння капелюх, в буквальному сенсі. І все по вартості місцевого дзвінка або менше. Ближче до кінця нашої мети, ми знайдемо інший брандмауер. 

В залежності від вашої точки зору, як пакет даних, Брандмауер може бути оплотом безпеки або страшний супротивник. Все залежить від того, з якого боку ви на і які ваші наміри. Брандмауер призначений для впустили тільки ті пакети, які відповідають його критеріям. Цей брандмауер працює на порти 80 і 25. Всі спроби проникнути через інші порти закриті для бізнесу. Порт 25 використовується для поштових пакетів, в той час як порт 80 є входом для пакетів з мережі Інтернет на веб-сервері. Усередині брандмауера, пакети перевіряються більш ретельно. Деякі пакети зробити це легко через митницю, в той час як інші виглядають трохи сумнівна. Тепер, брандмауер офіцер не так легко обдурити, наприклад, при цьому пінг смерті пакет намагається замаскувати себе як звичайний пакет пінгу. [Firewall офіцер розмовляв з пакетами] [Ведучий] Для тих пакетів пощастило достатньо, щоб зробити це настільки далеко, Подорож підходить до кінця. Це просто лінія на інтерфейс, який буде взятий на веб-сервері. В даний час веб-сервері можуть працювати на багато речей, від мейнфреймів до веб-камеру до комп'ютера на столі. Чому б не ваша холодильник? При правильному налаштуванні, ви можете дізнатися, якщо у вас є задатки на курячі Cacciatore, або якщо у вас є ходити по магазинах. Пам'ятайте, що це зоря Мережі. Майже все можливо. Один за іншим пакети будуть отримані, відкрилася, і розпакувати. Інформації, яку вони містять, тобто, ваш запит про надання інформації, надсилається на сервер додатків веб-сайтів. Сам пакет з вторсировини, готовий до використання знову, і наповнені ваші запитуваної інформації, вирішені, і розіслав на своєму шляху назад до вас. Повернутися минулому брандмауера, маршрутизатора і далі через до Інтернету. Повернутися через корпоративний брандмауер і на вашому інтерфейсі, готові постачати веб-браузер з інформацією ви просили. Тобто, цей фільм. Задоволений їх зусилля і довіряючи кращого світу, наші пакети надійних даних поскакав блаженно в закат інший день, знаючи, повністю вони служили своїм господарям добре. Тепер не те, що щасливий кінець? [Малан] Добре, цього достатньо. Побачимося наступного тижня. [CS50.TV]