[Грає музика] 

Девід Дж Малан: Це CS50 і це початок тижня 7. Так що ласкаво просимо назад. І ви, напевно, пам'ятаєте, що в задачі встановити чотири, було небагато полювання сміттяра для деяких казкових призів за цих умов після відновлення фотографій Співробітники і тут, і в Нью-Хейвені, Ви були оскаржені, щоб знайти, як багато хто з ці вчені-комп'ютерники, як ви могли. І у нас є цілий купа пропозицій. Думав, що я поділитися деякими з вами тут сьогодні. 

І ми розмістимо всі ці онлайн. Але зокрема, я хотів Звертаємо вашу увагу, метою яких свердловини одному, Сем був у досить багато з них як правило, створює, як це. Але, схоже, що станом на Сьогодні вранці, переможець був якийсь хтось Кен з 24 співробітників захопили на камеру або дещо більше, якщо взяти до рахунок багаторазового персонал в картинки. Зображений тут Кен поруч Марії в Нью-Хейвені. 

Тепер, Кен, однак, виявляється з поза трохи кутового випадку який ще не траплялося. Виявляється, що це не відбудеться мені поставити дрібний шрифт в задачі встановити чотири, що говорить, що персонал права на призи казкові бо Кен, звичайно, один з фотографи на наших співробітників. Тепер, з урахуванням сказаного, він спочатку написав мені, щоб сказати Будь ласка, не залишайте ці фотографії в Інтернеті. Я думаю, що в значній мірі тому що більшість з фотографій що це фотограф зробив виглядати дещо як це. І тому подібне. 

Але Кен хотів, щоб я вас заспокоїти що він дуже хороший фотограф, він професіонал, він приймає Фотографії, які не є розмитими, що краще в центрі уваги, і він взяв зовсім небагато з наших співробітників. Але замість того, тільки визнати Кен, то, що ми думали, що робити це піти за списком фактично студенти, які представили. І виходить, що спис 15 фотографій в цій вранці був наш переможець. 

І тут на фото Ленс з Колтон, з Сказ, з самим собою, і з Семом. Але потім з'ясовується, що за станом на 11:46 ранку, так що просто трохи назад, Я повернувся в мою адресу електронної пошти і знайшли що у нас ще одне подання студент на ім'я Бонні тільки це чия електронна пошта говорить. Не буду брехати, я робити це під час занять. А потім приступив до прикладіть просто 14 фото, один сором'язливий Ланса 15. 

Але на фотографіях Бонні, виходить зі сталі кілька співробітників, Сем серед них, так що ми думали, що ми буде зробити, це визнати, і з них. Таким чином, на додаток до отримання Dropbox простір, що кожен, хто брав участь отримує, ці дві секції буде також отримати хороший обід обслуговували їх і їх розділ злучається наступного тижня. І так ви почуєте від нас, Ленс і Бонні, про те. Так великі вітання до них. Тепер, ті з вас, хто б як правило, обід більш знаю, що CS50 обід в Кембриджі і Нью-Гейвен це в п'ятницю. Перейти на сайт слеш RSVP CS50 в. А тепер кілька слів про семінари. Більш curricularly. Так Ми наближаємося до точка семестру де ви повинні почати думати про кінцевих проектів. І справді, трохи пізніше, буде так звана попередньо пропозиції бути пов'язано. Так попередньо пропозиції призначені для досить низький вплив і дійсно просто можливість для Вам скласти коротку записку ваше вчення співробітник інформувати його або її, що ви думаєте вам можете зробити для вашого остаточного проекту. 

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

І це необов'язково, руки, або лекції на основі можливостей щоб дізнатися більше про теми, які трохи допоміжні для Курсу Навчальний план, тим не менш, чудово, але Матеріал для приводу остаточні проекти. І так це список, що це Співробітники CS50 тут в Нью-Хейвені придумали для в цьому році близько прошивкою програмування, Android- програмування, розробка гри, і грона більше інструментів і мов і методики. 

Так тримати очі на веб-сайті CS50 в. І в той же час, якщо ви хочете, щоб зареєструвати свій інтерес в будь-якому з них, перейти до слеш реєстру CS50 в. І ми будемо стежити за те, як до дні і час польоту і місця і everything-- більшість все буде транслюватиметься і також доступні за запитом після, якщо ви не можете зробити це насправді. Так що без подальших церемоній, ми зупинилися минулого разу з GET. 

І це було, як повідомлення, яке було всередині віртуальної оболонки, нагадаємо, що ми перейшли від маршрутизатора до маршрутизатора Маршрутизатор між веб-браузером і веб Сервер. І, що повідомлення виглядав дещо як це. Це було тим більше таємницею, що повідомлення був насправді всередині конверта написано на листку паперу якого Перший рядок говорить буквально, отримати межу. 

І тільки в якості перевірки осудності, Що ж риса означають? Що означає, коли риса з проханням веб-сайт? Ви просите його весь час. Більшість у будь-який час ви відвідуєте веб-сайт, ви насправді не ввести ім'я файлу. Ви, напевно, просто зайдіть на Facebook.com, ввести, gmail.com, або тому подібне. І що слеш представляють? Що файл? Або те, що сторінка, спеціально? 

Індекс, так. Так сторінки за замовчуванням. Так що, якщо ви не вкажете файл назвати, як ми почнемо бачити, ви насправді просто з проханням дати мені сторінку за замовчуванням Facebook або дати мені мою поштову скриньку або дати мені сторінка за замовчуванням новин на веб-сайті CNN або тому подібне. І сервер буде реагувати на що повідомлення з чимось як це, кажучи, так, я говорити HTTP версії 1.1. 

200, який є статус код, який ми, люди, рідко коли-небудь бачити, бо це добре. Тому що це означає, OK запит було отримано та оброблено належним чином. І тип контенту мабуть, у відповідь Нерідко, однак, не завжди, текст. І зокрема, HTML. І це насправді де ми дивимося на сьогоднішній день. 

Таким чином, справді, я збираюся піти вперед і відкрити браузер. Я збираюся використовувати Chrome, ви можете використовувати Найбільш будь-який браузер в найближчі тижні. Зазвичай ми рекомендуємо Chrome бо це особливо добре для розробників програмного забезпечення. Він отримав багато вбудованих в інструменти, які полегшують розвивати не тільки HTML і CSS, речі, які ми починаємо говорити про сьогодні, але й інші мови, а також. 

І я збираюся йти вперед і йти, метою яких Я збираюся керування натисніть або вправо клацніть будь-де на веб-сторінці. І я збираюся йти на перевірку елемента. І я збираюсь надерти Екран просто трохи тут. Дозвольте мені перейти це на дно. Так що це те, що називається Інспектор Chrome. Так що це, як налагодження інструмент, вбудований в Chrome. 

Всі з вас вже є це якщо ви були за допомогою Chrome. І це дозволяє вам побачити, що відбувається на під капотом якийсь веб-сторінці. Отже, давайте насправді взяти дивитися на це таким чином. Він має більше можливостей спосіб і ми піклуємося про сьогодні. Але є ці вкладки тут. Елементи, мережі, джерела, графік, і деякі інші речі. Я збираюся натиснути на Мережа на мить. 

І це трохи переважною на перший погляд тут. Але те, що я збираюся зробити, це дозволити мені спростити це небагато. Я збираюся перетворити на запис світло, так що він червоний. І я хочу сказати, зберегти журнал. І це тільки трохи що я зрозумів, протягом довгого часу, що відбувається, щоб зберегти все, що відбувається в браузері. А тепер я збираюся піти щоб http://facebook.com. 

Насправді, давайте робити WWW для хорошої заходом, слеш. Enter. Таким чином, URL, що багато з Ви, можливо, відвідав. А тепер веб Facebook, сторінки з'являється у верхній частині. А потім цілий букет матеріал пролетіли на дні. І справді, виявляється, що коли ви відвідуєте Facebook.com, Ви не просто зробити один запит HTTP, виходить, що збирається Facebook.com посилає 41 з цих конвертів, кожен зі своєю власною прохання отримати, як показано, хоча за екраном Тут, у нижній частині екрана, це означає, що, дійсно, мій браузеру зробив 41 запитів. 

А в цілому, вона передала 861 кілобайт і він узяв чомусь цілих вісім секунд скачати все це. Так що насправді трохи дивно що сайт Facebook, що б довго, але так воно і буде в цьому випадку. Тепер, все це я дійсно не хвилює, про для верхньої запитом винятком. Отже, давайте до цього тут і дозвольте мені зменшити на мить. 

І дозвольте мені збільшити на це. Так що я зробив в лівій, хоча є багато відбувається тут є Я виділив Facebook.com, а потім зауважити, що я прокрутки вниз, прокрутки вниз, прокрутка вниз, просити заголовки. І ви побачите, що Chrome показує мені по суті внутрішні зміст запиту я зробив. Це не форматування зовсім те ж саме спосіб, але зверніть увагу, там згадка про отримати, помітити там згадок про господаря, Facebook.com, шлях, або коса риса, що файл я просив. 

І потім, якщо я прокручую резервне копіювання, ми будемо насправді бачити, що те, що повертається Facebook для мене це все з цих заголовків. Так всередині цього віртуального конверта дійсно багато пар ключ-значення. Слово, товстої кишки, а потім значення. Слово, товстої кишки, а значення. Вони називаються заголовки. І є набагато більше, ніж тут докладно ми насправді піклуються про прямо зараз. 

Але це другий останній там, Відзначимо, що сервер Facebook.com, в тут дійсно сказав приходить якийсь текст HTML. Таким чином, все це є що, коли ви запитуєте веб- сторінка з браузера на Сервер, що сервер відповідає з конвертом власної всередині якого знаходиться текст. Іншими словами, HTML. Мова розмітки гіпертексту. Який інший мову що ми вводимо сьогодні що люди або комп'ютери генерувати для того, щоб реалізувати веб-сторінок. 

Зокрема, давайте подивимося на це. Я збираюся повернутися в даний час на сайт Facebook. І я збираюся просто Контроль миші або клацніть правою кнопкою миші і натисніть на перегляд сторінки джерела. І навіть якщо ви не використовуєте Chrome, IE може зробити це, Firefox може зробити це, Сафарі можете зробити це, хоча меню варіанти можуть виглядати трохи інакше. І це HTML, що Марк і Компанія в Facebook написав. 

І разом, ця мова тут реалізує синій і білий сторінку що ми бачили хвилину тому. Тепер, це трохи переважною. Але якщо ми подивимося на в лівому верхньому кутку, ми збирається почати бачити деякі моделі. Схоже, є багато з них відкритою кутової дужки а там це ключове слово HTML. Ось ще один відкритий кутовий кронштейн і голови. 

Ось, якщо ми перейдіть вниз і вниз, і вниз, я йти вперед і спробувати шукати щось. Там шлях на правий тут з відкритим кузовом кронштейн. І пам'ятаєте з минулого Час, ми запропонували що найпростішому веб-сторінки які могли б написати людина може виглядати трохи щось на зразок цього. Відкрити HTML-тег, відкрита головка тег, відкритий тег заголовка, потім закрив титул, закритий голова, відкритий Тег тіло, частина тексту, закритий корпус, закрита HTML. 

Але пауза тут на мить. Цей код, навіть якщо ви ніколи не написав це раніше але досі не зовсім розумію, те, що відбувається, виглядає досить добре. Право, це дуже чисто. Це дуже стилістично приємно. Багато відступу і прогалини. Facebook-х немає. Так чому ж так багато Facebook гірше, ніж я пишу в HTML? Мабуть. 

Право, це як один з п'яти по стилю. Там це вагома причина для них, щоб скоротити ці кути. Гаразд, так що вони не хочуть, щоб зробити його простіше для вас, щоб прочитати його. Таким чином, в деякому розумінні, вони обфускаціі його, начебто підіймаються його принаймні, естетично так що це важче для Myspace щоб піти і зірвати їх Домашня сторінка і HTML для нього. Виходить, що з програмами хоча, в тому числі Chrome, ми можемо очистити це супер легко. Так що це не зовсім так, як причини. Що ще може бути причиною. Так. Так, дані пробілу витрати. Що ви маєте на увазі? Так, саме так. Якщо ви натиснете клавішу Tab багато чи пробіл, розглянемо наслідки. Таким чином, кожен ключ на клавіатурі є [Нерозбірливо] представлений у вигляді одного байта. 

Отже, нехай Марк або будь-який з розробників в ці дні парад пробіл один раз в цьому HTML-сторінки, представляє домашню Facebook. І Facebook є багато користувачів в ці дні. Отже, нехай домашню Facebook, відвідують мільярда людей сьогодні. І хтось на Facebook має натисніть пробіл один раз. 

Так, один додатковий байт, мільярда запитів, скільки ще дані Facebook передачі через Інтернет тому що хтось хіт пробіл на його або її клавіатурі? Мільярд байтів, або один гігабайт оперативної дані передаються з серверів Facebook для людей в усьому Світ без поважної причини. Тепер, це тільки один пробіл. 

Уявіть собі, якщо ми насправді очистити це що і з відступом його і додав багато білого простору і символи табуляції і прогалини, ви в кінцевому підсумку витрати гігабайт, якщо не терра байт простору. І так супер поширені в дійсний світ веб-розробки це Мінімізувати код. І ми будемо в кінцевому рахунку бачити як ви могли б зробити це. 

Але сьогодні, ми почнемо писати код що насправді читається нас, людей. Виявляється, однак, якщо ви йдете назад до цього інструменту в Chrome Огляньте елемент, раніше, ми були на вкладці Network. Виявляється, що якщо ви йдете до Вкладка елементи, те, що ви насправді бачите є хром в досить друкується версія цього ж HTML. Таким чином, ми deobfuscated його. Так що це не підходить для комп'ютера. І тепер ви можете насправді натисніть навколо і почати щоб побачити ієрархію, яка є веб-сторінка. Отже, давайте насправді це зробити. Я збираюся йти вперед і відкрити на мій Mac програма під назвою редагування тексту. І пам'ятайте, що це всього лише супер простий текст програми. Вікна є notepad.exe. І я збираюся для ідентичних введіть наступне. Док тип HTML, відкритий кронштейн HTML, закрив кронштейн HTML, у нас є глава сторінці тут, кінець головки на сторінці тут, назва буде як, привіт світ. 

А потім сюди, ми повинні тіло на веб-сторінці. Із закритим кузовом. А потім тут, привіт світ. Добре. Таким чином, ми написали супер швидкий веб-сторінки. Я збираюся зберегти його як hello.html на моєму робочому столі. Мої Mac збирається скаржитися, думаючи, що, почекай хвилинку, це текстовий файл, робити Ви хочете назвати це .txt? Але ні, я хочу, щоб використовувати точкову HTML. 

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

А для цього, я збираюся йти вперед і відкрити хмара 9. Так хмара 9, звичайно, на основі хмарних обчислень service-- CS50 IDE-- Це має всі наші робочі області працює десь в Інтернеті. А це означає, що всі наші файли вже публічно доступні. Так що давайте йти вперед і робити це. Я збираюся йти вперед і створити новий файл NCS50IDE. Я йду, щоб врятувати його, як і раніше а Hello.html і натисніть зберегти. А тепер, щоб заощадити час, я йду йти вперед і скопіювати вставити цей код ніж повторіть його. І зберегти його. І ось тепер у мене є Файл називається Hello.html. Але як я насправді відкрити його як веб-сторінку? Ну, виявляється, що вбудований в CS50 IDE не тільки компілятор, як брязкіт і відладчик GDB, як і грона інших програм, там насправді повноправним веб-сервер працює протягом CS50 IDE. 

Всі ви, що є, мати свій власний веб-сервер. І веб-сервер просто шматок ПО мета якого в житті щоб служити до веб-сторінок. Для прослуховування запитів від браузерів і відповісти маленьких віртуальних конвертів всередині якого є Зміст, що я написав. Таким чином, це веб-сервер насправді безкоштовно і з відкритим вихідним кодом. Де відкритим вихідним кодом просто означає, програмне забезпечення, яке хтось ще написано, що кожен з нас може реально побачити і скачати, і навіть змінити вихідний код. І це називається Apache. 

І ми зробили це трохи легше використовувати в CS50IDE, називаючи його Apache 50. Так що він може реально зрозуміти наступне. Я хочу сказати, Apache 50 старт. А потім я просто хочу сказати, крапка. І ми бачимо, деякі кілька аркан повідомлення про те, установка веб-сервера Apache документа [? Група?] до будинку, Ubuntu, що б це, скоротити робочий простір. Починаючи веб-сервер Apache 2 успішно. 

Так Коротше кажучи, я тільки натиснув на кнопку і повернувся на веб-сервері, який в даний час слухати в Інтернеті на порт TCP 80 за певною адресою. І це говорить тут, і це буде змінюватися в залежності на імені користувача та інших факторів, але зверніть увагу, в даний час, якщо я натисну на це, IDE50 точка jharvard і так, і так, зверніть увагу, що весь цей час Протягом останніх декількох тижні, ви, можливо, зауважив, що ваше власне ім'я користувача вбудований у верхній правій руці кут CS50IDE. 

І що насправді був все це тайм адресу, за якою ви можете відвідати всі ваші файли через Інтернет. До цих пір, це не мало значення не, бо в C, ви, як правило хочуть, що працюють в Термінал, не в Інтернеті. Але сьогодні, ми починаємо писати веб-основі коду що ми хочемо доступні в публічних адрес. Так що я збираюся зробити, це натиснути цю URL. 

І зауважте, що я бачу досить потворні індекс, лістинг каталогу, але те, що файл вискакує на вас напевно? Hello.html. Це тому, що я врятував файл у моєму робочому просторі. І те, що я сказав Apache веб-сервер це подивитися в каталозі робочого простору Давида. І нехай хтось у Світ побачити ці файли. 

І справді, якщо я в даний час натисніть на Hello.html, Я бачу в цій вкладці точно цього файлу. Тепер зверніть увагу, Cloud 9 робить щось трохи корисним для нас. У CS50 IDE, зверніть увагу, є раптом адресному рядку. Це тому, що хоча ми за допомогою Chrome, щоб відвідати CS50IDE, всередині CS50IDE є його власним версія веб-браузера прямо зараз. І тому замість того, ускладнювати як такої, Я збираюся йти вперед і просто скопіювати цей URL. Я збираюся йти вперед і просто відкрити свій власний вікно Chrome. Таким чином, немає ніякої магії тут немає CS50IDE. Я просто хочу, щоб в буквальному сенсі вставити мій J Гарвардського URL і натисніть Enter. І вуаля, тепер я і в теорії, кожен в Інтернеті, якщо я налаштував Відповідно, дозволу можете відвідати цей файл. І ось тепер, якби я сказав hello.html, вуаля, є мій захват неймовірно веб-сторінки. Так давайте зробимо швидку перевірку осудності. З усього цього є концептуальним налаштуванні. І ми насправді не дуже навчив вас, як писати HTML-як такої. Таким чином, Є запитання далеко на те, що тільки що відбулося? Так. Будь-яка CS50 володіти цими веб-сторінок? В якому сенсі? Гарне питання. Так CS50 володіє CS50.io. Ми дійсно купили що доменне ім'я. І за характером ви, хлопці, увійшовши в CS50IDE, Ви все отримаєте те, що називається піддомен. 

Так IDE50-Малан, або IDE50-Rob.CS50.io, це ваша унікальна адреса в межах наш доменне ім'я. Таким чином, для цілей курсу, у вас є свій власний унікальний адресу. Але ми спростили речі купувати домен верхнього рівня, CS50 точка I / O, а потім всі інші всередині, що, так би мовити. І ми повернемося до того, що через пару тижнів, ймовірно, особливо в остаточний проект Час, коли деякі з вас може хочете, щоб ваші власні доменні імена. Це насправді досить просто. Добре. Отже, давайте робити це. Я збираюся повернутися в CS50IDE, де мій файл прямо зараз, hello.html, не все, що цікаво. Я хотів би зробити щось трохи краще, ніж це. Так що я збираюся зробити щось на зразок цього. Дозвольте мені відкритим paragraphs.html. Так що це я написав файл заздалегідь. У верхній частині цього, як завжди, у нас є зауваження. Але в HTML, коментарі трохи відрізнятися. На третьому рядку і рядку 14, ви подивитися синтаксис почати коментар і в кінцевому коментар. 

Але жоден з матеріалу в між питаннями функціонально. Це просто записка до людина, що тут відбувається. І як швидко розсудливості перевірити, якщо я прокрутіть униз, що очевидним новий тег, який ми ввели? Теги Досі ми бачили відкриті Кронштейн HTML, голова, назву, і тіло. Але те, що, очевидно, новий зараз? 

Так, так стор. Р тег або тег пункт. А потім я просто запозичив деякі замовчуванням Латинський текст, щоб скласти свої пункти. Тому що те, що я хотів, щоб продемонструвати, як ви могли б представляють абзаци тексту в HTML. І так, що починає відбуватися тут є те, що вже шаблон розробки. І дозвольте мені йти вперед і робити це. Дозвольте мені спочатку вимкніть Apache. І я збираюся сказати йому, щоб почати себе знову в сьогоднішній джерела сьомій м каталогу. Так що у мене є доступ до всього. 

І тепер, якщо я повернуся в це список каталогів, зауважте, я бачу кожен файл з сьогоднішнього дня. І ви побачите, в Наступний набір проблем, ми будемо дати вам інструкції для цього саме це. Якщо я відкриваю paragraphs.html, це може а виглядати на мові програмування для вас, якщо ви не говорите або читати по-латині. Але це всього три абзаци тексту, які відзначені в HTML. 

І зверніть увагу на пункт перерви між ними. Бо, виявляється, І навіть якщо ви може бути схильний зробити це, в той час як в реальному світі, якщо ви хочете, щоб покласти лінію перерви між речами, Ви могли б досить просто це зробити, і вдарив Зберегти. І тепер, якщо я перезавантажити тут, повідомлення що все просто стирає разом тільки в одній краплею тексту. Оскільки HTML є свого роду німу мову. 

Він призначений для використання в таких спосіб, що браузер буде тільки зробити явно, що ви говорите це зробити. Так що, якщо ви не говорите його дати мені новий пункт, Ви не побачите новий пункт. І справді, що браузеру збирається зробити навіть якщо ви потрапили Enter, скажімо знову і знову і знову, рухаючись цей текст шлях вниз по екрану, а потім зберегти а потім перезавантажити браузер буде згорнути все це білий простір І лише в одному, видимий прогалину. Добре. Так ось цей тег. І так що картина що тут розвивається? Ну, це, здається, той випадок, коли HTML все про запуск тег і закінчуючи тег. І те, що це тег? Ну, це просто шматок синтаксису. Відкрити кронштейн, ключове слово, закрита дужка, це тег. Або почати тег. А потім, коли ви зроблено виразити себе, як в ви закінчите з пунктом, ви так говорите протилежне. Але зворотне не зовсім у зворотному напрямку. 

Ви просто префікс той же тега назвати з косою риси, як це. Добре. Так що не все, що цікаво. І справді, ми не роблячи веб-все, що більш цікаво. Що робити, якщо я хочу зробити речі більше і сміливі? Так що виходить, що ось приклад в headings.html, де в моєму тілі, Я отримав H1 тег, H2, H3, чотири, п'ять, шість, всі з яких здається досить складних. Але якщо я йду відкривати це Наприклад, давайте поглянемо. Headings.html. 

Так браузери за замовчуванням може дати вам текст це великий і жирний розрізнених розмірів. H1 великий. Н6 менше, а потім все інше між ними. Так от цікаво, але як і раніше насправді не знаю, веб-я. Що робити, якщо ми хочемо, щоб у мене щось на зразок списку. , Так от маркований список три будинки Гарварда. 

Як ви йти про це? Ну, погляньте на list.html. І ось, ми бачимо, що трохи funkiness але давайте розглянемо, що відбувається. Так на основі того, що ви тільки що бачили, UL означає невпорядкований список. Ненумерованний список просто означає маркований. Там немає числа. Там також те, що називається Впорядкований список, який є ПР по мітці. Потім Л. І., елемент списку все це означає. 

І так він автоматично номера все для вас. Але, знову ж, всі мої відступи і пробіл просто заради моєї. Браузер не насправді відбувається, щоб піклуватися. Таким чином, навіть якщо ви не змогли зробити це, просто щоб бути ясно, Ви не повинні навіть хоча У браузері буде як і раніше бути в змозі зрозуміти це просто відмінно. Я удару перезавантаження в моєму браузера, я натиснувши перезавантаження і ніяких змін не відбувається бо браузер раніше робить саме те, що я говорю це зробити. 

Добре. Так що це всього лише текст. Тепер давайте зробимо щось більш цікаве. Я збираюся йти вперед і запозичувати деякі з цих HTML. Я збираюся йти вперед і створити новий файл тут. І ми називаємо це rick.html. У нас є непропорційно б щось називається рол Рик в цьому клас цього року, я не знаю це просто трапилося органічно. 

А тепер він отримав з-під контролю. Так що я просто хочу, щоб піти з ним. І якщо я йду в Google Зображення та Рік Естлі. Якщо ви не знаєте, чому ми робимо це, щойно прочитав у Вікіпедії. Кожен раз, коли ви натиснули на посилання, хтось десь сміявся. І дозвольте мені перейти ahead-- є ми йдемо, давайте дивитися на цю фотографію. 

Так от у нас є зображення в Google Images. І давайте припустимо, що це розумно скрізь в інтернеті. Так що я буду вважати, що це нормально для мене насправді поставити це в моїй веб-сторінці. Я збираюся йти вперед і скопіювати URL зображення. І тепер, якщо я повернуся в хмарі 9, давайте подивимося, що я можу зробити тут. Так от тільки веб-сторінки. Це Рік Естлі, ха-ха, Я збираюся повернутися в даний час в моєму браузері, перезавантажувати, і цікаво. 

Де Рик? Отже, дозвольте мені бачити те, що трапилося. Насправді, я збираюся прикидатися, що я не зробив цього. [Нерозбірливо] покласти його тут. Ми повернемося до того, що в даний час. Так от rick.html. Так що це не Рік Естлі. Так що виходить, що ми можемо насправді додати його тут. Це Рік Естлі. Я хочу сказати, дати мені зображення якого джерелом є URL я просто скопіював, що мабуть, є щасливим день народження щось або інше. 

А тепер я збираюся закрити тег як це. Так що це упаковка супер довго. Але зверніть увагу, що все, що я зроблено відкритий кронштейн зображення, джерело з атрибутом цього. І це дійсно довго URL. І в самому кінці, помітити це. Чому я зробив слеш кутом кронштейн а, як і будь-який інший тег, що має відкритий кронштейн, IMG, закрив кронштейн? Просто припущення, навіть якщо ви немає знайомство б то не було з HTML перш. 

Так що, як він закриває команда, але чомусь це не реально зробити інтуїтивно сенс робити щось трохи більше занадто балакучим, як тісним чином? Так. Так. Просто семантично, немає ніякого сенсу починаючи зображення і закінчуючи зображення, це або є, або його немає. Так що немає сенсу залишати зазор що-небудь ще всередині зображення. Ви просто не можете це зробити. І тому синтаксис як правило, буде просто зробити косу риску всередині відкритого тега або початкового тега , А потім ударив Зберегти. 

Так що, якщо зараз я перезавантажити цей файл, в даний час Я отримав хороший веб-сторінки Готувати тут. І, звичайно, ми могли б дійсно дратувати людей шляхом впровадження замість як посилання YouTube. І справді, в будь-який час Ви коли-небудь, щоб YouTube, і нехай мене насправді випадково Рик катаюся тут. Так Рик рол. Так Рик roll-- я збираюся їхати сюди. 

[Грає музика] 

ОК, одна людина сподобалося. Так помітити весь цей час, якщо ви натисніть Поділитися посиланням, ви, звичайно отримати URL, що ви можете фактично вставляти в повідомлення електронної пошти або судово-зображення або в задачі установки або в слайді. І тепер, якщо я замість натисніть на врізати, зауважити, що весь цей час, цей матеріал був там. Я збираюся йти вперед і скопіювати цей. 

І тільки так ми можемо бачити це краще, я збирається вставити його в моїй текстового редактора. Зверніть увагу, що це те, що YouTube вже говорив вам. Кожен раз, коли ви відвідаєте YouTube відео, якщо ви Щоб вбудувати відео на ваш веб-сторінки, просто захопити цей. Таким чином, це ще один HTML-теги називають IFRAME. Або в лінії кадру. Так це теж виглядає трохи більш складніше, ніж всіх інших. Так що виходить, що зображення тег і, мабуть, IFRAME тегів прийняти те, що називаються атрибутами. 

І це ще один шматок синтаксису HTML. На додаток до тега ім'я, відкриває дужка ім'я тега, Ви можете контролювати поведінку тега маючи цілий букет атрибуту дорівнює вартості. Атрибут дорівнює вартості. І так, наприклад, YouTube говорить нам якщо ви хочете ширину цього відео щоб бути 420 пікселів, а висота щоб бути 315 пікселів, що це як ви висловлюєте його в HTML. 

Джерело відео буде щоб бути, що довго URL YouTube а потім деякі інші речі як межі кадру дорівнює нулю, так що, ймовірно, означає, що є немає межі навколо речі. Дозволити повний екран, ймовірно, означає, що користувач можна натиснути кнопку і насправді повний екран відео. Так що, якщо я дійсно хочу бути вражає тут, в Рик точка HTML, а не використовувати тег зображення, нехай мені видалити, що замість вставте. А тепер перезавантажити. І ось ми йдемо знову. Гаразд, вистачить. Всі права, тому я постараюся важко не зробити це знову. Так що деякі з їжі додому тут? Так HTML, потворний, як ці веб-сторінок є, насправді досить просто. Це не мова програмування. Він не має функції. Він не має петель. Він не має умов. Все це має в десятки різні мітки, кожна з яких має нуль або більше атрибутів. І справді, те, що цікаво про HTML, як ви почнете занурюватися в те, що це дуже самостійною вчитися. 

Все це займає розуміння в загальних рамках HTML. Що таке тег, що це атрибут, як ви насправді налаштувати веб-сторінку наступним чином. А все інше справді результат шукати в інтернет-посилання або вдаючись до допомоги, як зробити деякі техніка або, як ми бачили, дивлячись на джерело в Facebook Код, дивлячись на веб-сайті що вам подобається в ньому це вихідний код і розуміння того, як розробники там насправді поклав речі. 

Таким чином, ми можемо зробити зображення, а також. І справді, ми зробили це мить тому. Дозвольте мені йти вперед і просто показати вам. Ось деякі приклади коду. Якщо ви коли-небудь хотіли, щоб побачити сварливий кіт. Так зауважити, що я можу є тег зображення тут. І я отримав коментар вище нього. Я отримав альтернативу Текст для доступності. Так хтось, хто за допомогою екрану Читач з міркувань зору може насправді, тобто їх читання з екрану говорять сварливий кіт. Тому що, якщо вони не можуть побачити зображення, вони може принаймні, свій комп'ютер сказати їм в усній формі, що це таке. І джерело цієї файлу cat.jpeg. Таким чином, справді, якби я дійсно хотів, щоб отримати розумний, то, що я міг би done-- Я обіцяю не ходити Рік Естлі, так Я збираюся Google для кішки, а не. І якщо я йду в Google Images тут, і ми припускаємо, що що це фотографія моєї кішки. 

Припустимо, що у мене є контроль натиснув або правою натиснув на це, випадково моторошно. І cat.jpeg я збираюся щоб заощадити на моєму робочому столі. Дозвольте мені тепер повернутися до Cloud 9. Зверніть увагу, що тут, я можу перейти до завантажити локальні файли. І якщо я беру це Файл, cat.jpeg повідомлення що я можу перетягнути його і помістіть його в хмарі 9 і це буде кричати на мене тут. 

Бо ми вже дав вам файл cat.jpeg, але це дуже легко захопити фотографію, ви взяті з Facebook або Flickr або як а насправді і перетягніть його в хмарі 9, а потім зробити його частина вашого особистого веб-сайт або проблема встановити сім чи вісім, як ми скоро побачимо. А потім, коли тебе нарешті, відвідати цю кішку, припускаючи, я скачав той же кіт, Повідомлення that--, що було чудово. 

Що б ви бачите щось на зразок цієї особи тут. Таким чином, файли, які ви посилання на веб-сторінці може бути або локальний власний рахунку або дистанційне включення деякого іншого сервера як і у випадку з Rick Естлі фото трохи назад. То де else-- що ще ми можемо зробити тут? Отже, давайте поглянемо на наступне. Ви знаєте, що круто? 

Ми досі були зробити дуже статичні веб-сторінки. Я хочу, щоб оживити наступним чином. Я хочу, щоб мій власний пошуковик. Таким чином, щоб зробити пошуковик, давайте йти вперед і почати робити це. Я збираюся йти вперед і створювати новий файл називається search.html. І ми prefabed версії онлайн. Упс. Не вставляти у вікна терміналу. Каркасні версії онлайн. І я збираюся почати в наступному. Так ось початок файл називається search.html. Я збираюся зберегти його в сьогодні джерело каталог. Я збираюся назвати це пошук. Насправді, ми зробимо це краще. CS50 Пошук і фактично бренд це. А тепер, я збираюся сказати, щось на зразок H1 CS50 Пошук. А потім сюди, Н2 найближчим часом. І тільки Нагадаємо, H1 і Н2 на увазі те, відповідно? 

Так, так великий і жирний, і не настільки великий, але все ще шрифтом. Так що, якщо я зберегти це і йти сюди, давайте подивимося файл search.html. Гаразд, і це одне це right-- [нерозбірливо]. Стенд с. Девід знаходиться в замішанні. О, це прямо там. Девід ідіот. ДОБРЕ. Так що це таке. Так пошук CS50 найближчим часом. Так що тепер, давайте синтезувати те, що ми зробили минулого тижня. 

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

І ім'я цього входу поле, я буду називати його В. І тип поля введення цієї Я хочу сказати, це просто "текст". І текстове поле, як ми будемо см, це просто текстове поле. І так не відчуває тут, щоб нічого всередині нього в цей момент. І так Я просто збираюся закрити тег с, що коса риска прямо в самому тезі. А потім я збираюся є ще один вхід. Тип входу дорівнює уявити. А потім я збираюся закрити цей теж. 

А тепер я збираюся повернутися сюди. І вже ми бачимо, хоча досить потворні, я маю отримав початок моє сторінка пошуку тут. Насправді, дозвольте мені спробувати очистити це небагато. Виявляється, що на вхід тут, я можу мати інший атрибут називається заповнювач. І я міг би побачити щось подібне ключових слів, або, більш конкретно, запитувати д. 

І зауважте, зараз, у мене є цей вид сірого тексту що зникає тільки я починаю друкувати, але це, ймовірно, щось ви бачили в інших веб-сторінок. Я дійсно не подобається кнопку Надіслати. Так що я насправді відбувається, щоб дати Розмістити кнопку значення в цій категорії. І тепер, якщо я перезавантажити, зауважити, що мій кнопка стає імені Пошук. Ви знаєте, я насправді не як логотип тут. Так генератор Google Font. 

Я хочу, щоб оживити це далі. Так CS50 Пошук. Дозвольте мені створити свій власний логотип. Це виглядає красиво. Так що тепер дозвольте мені зберегти цей as-- давай. Де це відбувається? Там. ДОБРЕ. Пропущений його. Зберегти як. Дурні браузери. Тримайтеся міцніше, ми збираємося виправити це раз і назавжди. Там ми йдемо. Добре. Вибачте. Вихідний. Тепер це фанки. Вихід з повноекранного режиму. Добре. 

Тепер, як і звичайний людина, зберегти зображення як. Logo.gif. Тепер я збираюся йти в CS50IDE і Я збираюся просто захопити логотип, Я збираюся перетягнути його в мій джерело сьомій каталог файл вже існує, я в порядку з цим. Так що я збираюся змінити це тому що я вже його. І тепер, як мені позбутися цього? 

Давайте йти вперед і робити тут Джерело зображення дорівнює logo.gif. Закрити це. Зберегти. І тепер, якщо я повернуся в моєму пошуку сторінка, тепер це виглядає досить добре. Гаразд, так що не має досить зробити що-небудь корисне. Насправді, дозвольте мені спробувати пошук для кішки і подивитися, що відбувається. Кішки. Блін. Це не просто працювати, мабуть. Так у чому ж ключова частина що тут не вистачає? 

Право, навіть якщо ви не знаєте, будь-який HTML, Я почав розмітки телефону форму і я сказав йому, як отримати входи, дати мені текстове поле і кнопку відправки, який шматок, мабуть не вистачає? Припустимо, ми хочемо насправді отримати ця річ працює правильно. Що нам потрібно робити? У нас є необхідність здійснення задній кінець бази даних або сама пошукова система, і що збирається взяти Вся багато часу, чесно кажучи. 

Так що пам'ятайте, що ми зробили в минулий раз. Так що якщо ви шукаєте щось на Google і ви заздалегідь вимкнений, Нагадаємо, миттєвого пошуку. Отже, дозвольте мені звернутися, що з таким чином, що це насправді поводиться як старший шкільний браузері якщо я тепер шукати щось на зразок кішок, Нагадаємо, що URL-виглядає. Це досить загадковим. Але вбудована в є, Нагадаємо, це пошук слеш. Знак питання Питання дорівнює кішок. 

І, здавалося б, дати мені ціла купа результатів пошуку. Таким чином, ви знаєте, що я збираюся зробити? Я збираюся брати Google на хвилинку. Я збираюся перейти на тут, і я хочу сказати, що це формує дії або призначення, так би мовити, повинні бути в буквальному сенсі Google. І метод я хотів використанню буде отримати. 

Так що ця дія? Дія дивно імені, але це просто означає, хто збирається звертатися дію цієї форми? Коли я натискаю пошук, де Якщо результат йти? І якщо зараз я повертаюся до форми тут і перезавантажити моєї веб-сторінці і в даний час шукати щось як собаки, зверніть увагу, в даний час Я знову реалізовані Google. Вірно? 

Якщо я хочу, щоб шукати щось інакше, це працює не просто для собак, він також працює на кішок. Він також працює для CS50. І добре, що це просто під переважній, чи не так? Гаразд, але це насправді працює. Так що насправді відбувається? Так що я навчив мій браузер, використовуючи HTML, щоб введення від користувача і насправді відправити цей вхід на віддалений сервер за допомогою протоколу HTTP. 

І тому, що мій браузер розуміє HTTP, це насправді побудувати URL так що те, Я в кінцевому підсумку більше в моєму браузері, відмітити, що відбувається коли я шукав для собак. Якщо я натискаю пошук, зауважити, що URL-адреса змінюється, як я призначене щоб google.com/search~~V запит дорівнює собаку. І це тому, що у вигляді знає, бо метод GET, просто додати його до цього URL там. 

Тепер, ці веб-сторінки і раніше потворним. Так давайте познайомимося одна шматок синтаксису, якщо ми можемо сьогодні. І це те, що відомо каскадні таблиці стилів. Отже, дозвольте мені поглянути на цей приклад тут і подивитися, якщо ми можемо зробити висновок, що відбувається. Це CSS0.html. І це те, де речі отримати трохи некрасиво. Тому що, на жаль, в світі Інтернету, HTML поодинці не може зробити все. І тому, якщо ви хочете, щоб стилізувати свою веб-сторінку, Ви насправді потрібно, щоб зосередитися на естетика по-іншому. Так от, у мене є тіло моє мережі сторінка всередині якого знаходиться велика справ. І DIV просто означає розділення. Так що це, як це, але пункті не має ту ж семантику абзацу тексту. 

Це просто означає, до браузера, ось іде велика прямокутна область моїй мережі сторінка, я хочу, щоб обробляти його спеціально. Тепер, лінія 21, де починається що справ. І тільки зробити припущення. Який ефект лінії 21 на Решта вмісту сторінки? Центрувальний його. Це все. Таким чином, ми не бачили спосіб фактично центрування тексту. 

Насправді, мій пошукової системи, на відміну від фактичного Google, все було виправдано на ліву. І ось тепер у рядку 21, я кажу, агов браузеру, створити поділ сторінки. Просто дайте мені великий, невидимий прямокутник. Ось як я хочу, щоб думати про веб-сторінці. А потім стилізувати його наступним чином. Усередині цих лапок, Тепер, є другою мовою що ми ввели сьогодні звані каскадні таблиці стилів. На щастя, це теж не мова програмування, так що це дуже обмежені в синтаксисі, але Також дуже обмежені в своїй функціональності в той час як HTML це все про розмітки дані веб-сторінки і структура веб-сторінки. CSS, як правило, приблизно останньої милі, естетика, Отримання розміру і кольору і Розміщення точно прямо у веб-сторінки. І справді, він формується з пар ключ-значення. 

Властивість, як це, текст вирівнювати, за яким слідує двокрапка, з подальшим значенням, що властивість, яка в даному випадку є центром. А тепер зверніть увагу вам можуть гніздитися ці речі. Якщо я хотів, щоб все, що Я виділив, зосереджені, Ось чому у мене є рядок 21 і відповідна лінія 31. Але тепер припустимо, хочу сказати, Іоанна Гарвард, ласкаво просимо на мою домашню сторінку. 

Символ Copyright Джон Гарвард. І припустимо, я хочу в першу ці рядки, щоб бути досить великий. 36 пікселів. Так от пристойного розміру. І я хотів його вага повинен бути сміливим. Але тоді, що нижче, Я хочу невеликий текст. І нижче, що я хочу, ще менше текст. Вибачте. Сьогодні відчуває як вихідний день. 

Так що тепер, що я роблю, щоб висловити це? Тут, на лінії 22 є вбудований DIV DIV або вкладений, якщо ви будете. Це теж має свій власний тег стилю. Я вказати розмір шрифту 36. Я вказати вагу шрифту сміливий. Тут, внизу, я тільки вказати 24 пікселів. І, нарешті, в рядку 28, я вказую 12. Так як для швидкої перевірки осудності і як людина читає це, які слова на екрані, насправді відбувається, щоб бути сміливим? Які рядки насправді сміливий? 

Просто Джон Гарвард. Вірно? Тому як лінія 22, каже, агов браузеру, ось розділ сторінки. Зробити розмір шрифту 36 очко. Зробити вага шрифту сміливий. Як тільки ви досягнете Відповідний закриваючий тег чи закрите тега в рядку 24, Це означає, що ей-браузер, перестати робити те, що ви робите. І зауважте, що ясно, хоча лінія 22 має всі ці атрибути як стиль, коли вам закрити тег в рядку 24, Ви тільки згадати ім'я тега. 

Ви не повторити стиль слово або все, що знаходиться усередині цих лапок. І тому, якщо я дивлюся на це зараз в моєму браузері, давайте Погляд на кінцевий результат. Відпусти вперед до цього файлу, який CSS 0. І це все ще досить простий, але стає досить цікаво. Але, виявляється, є інші речі, які я можу зробити тут, і на ризик прийняття це повністю огидно, помітити тут, що в моєму Тіло моєї веб-сторінці, Я можу зробити щось смішне як БГ або колір фону. 

І швидко, що ваш улюблений колір? Зелений я чув. Добре. Так що тепер, якщо я вдарив перезавантаження зараз, у нас є зелений веб-сторінки. Гаразд, так що це не погано. І тепер, якщо я хочу, щоб це дійсно круто, я можу зробити колір мого тексту навіть червоний. Отже, давайте подивимося, як це виглядає. Тепер це виглядає досить добре. І тут, якщо ви дійсно хочете возитися з кимось або якщо ви хочете бути один з тих людей, які намагається обдурити вас в відвідування веб сторінка, тому що вони обдурили Google в мисленні є ціла купа ключових слів like-- давайте подивимося, перезавантажити. Куди він подівся? А там нас. Добре. Тому я кажу це, як в сторону, ми будемо говорити про це матеріалі протягом декількох тижнів коли ми говоримо про безпеки, якщо ви насправді вставляти цілі грона ключові слова у веб-сторінки, навіть якщо вони не видно до людина, хтось, як Google, звичайно, може ще насправді знайти це. Гаразд, так що це досить огидний досить швидко. 

І справді, це далеко не всі що багато чого на відміну від мого власного веб сторінка як студент, який Я почав вдаючись до допомоги навколо, щоб знайти попередні версії моїх старих сайтів. Це було досить погано. Насправді, я знайшов одним тільки перед класом. Але ще гірше, там. Це, мабуть, був мій Головна сторінка назад в 1996 році. Мабуть, я думав, що це було доречно запитати людей своє ім'я перш ніж вони могли насправді бачу свою веб-сторінку. 

І тоді я показав їм то нерозумно, напевно. Я викопати більше наступного разу. Але зараз, давайте Розглянемо трохи дизайн. Ми говорили про стилі. І цю сторінку цих пір, і більшість все, що я написав досить чистий стилістично. Але те, що про дизайн? Ну, є багато надмірності в тому, що я роблю тут. 

Я згадав слово колір в декількох місцях. Я згадав розмір шрифту в пару місця та сміливе в декількох місцях. І принципово, я співробітництва змішування двох мов. У мене з моїми HTML-теги і мій атрибути, а потім раптом, лапки, я друга мова сьогодні називається CSS, який знову-таки, тільки ці пар ключ-значення або ці властивості розділених двокрапками. 

Виявляється, що багато чого як в C, де ми може почати винести деякий код у файли заголовків, так ми можемо зробити те ж саме в HTML. І крок до що відбувається наступним чином. Зверніть увагу, що ця версія, є CSS1.html Конструктивно той же веб-сторінку. Так що я отримав цілу купу з діви, але на цей раз, у мене позбувся обгортки DIV, як ви побачите. 

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

Тоді у мене є відкритий фігурну дужку і закрив фігурну дужку. Так близькі за духом C, але знову ж таки, це не функція, це просто синтаксичний тут докладно. І тоді я, звичайно, кажу браузер, ей-браузер, зробити все тіло сторінки є вирівнювання тексту по центру. І тоді це говорить наступне. Ей-браузер, якщо ви бачите HTML елемент або тег на сторінці, що має унікальний ідентифікатор верхньої, тому символ хеш тут просто означає, Унікальна ідея вершину, йти вперед і зробити його розмір шрифту 36 а його вага шрифту сміливий. 

Ей-браузер, елемент якого ID середня, зробити це 24 пікселів. І гей-браузер, якщо ви бачите Ідея дно, зробити це 12 пікселів. Ефект в кінці це точно Сем. Якщо я йду в CSS 1, сторінка виглядає так само. Але ми крок до трохи краще дизайн. Дозвольте мені тепер повернутися сюди, щоб CSS2 і подивитися, що ще я зробив. 

Тепер сторінка дійсно, дійсно чистий. Насправді, я можу відповідати всім вміст на сторінці тут. Але те, що новий тег я введена, очевидно? Посилання. І це не кращу назву для тега, бо це не посилання в сенсі що ми знаємо це, але це означає, посилання в якийсь інший файл. Це ніби як різке включають в С. 

Це шлях в HTML сказати агов браузер, йди вміст файл називається css2.css. Відносини, мені, те, що це таблиця стилів. І справді, це те, що одним з S років в каскадні таблиці стилів засобами. Це таблиця стилів. Це просто текстовий файл, що містить ціла купа майна. Це цілий букет стилів що ви хочете, щоб застосувати до сторінки. 

І так це, мабуть, посилаючись на другому файлі. І якщо я відкриваю, що CSS2.css, зауважити, що все, що я зробив це скопіювати і вставити все це в цей файл. І тепер, навіть якщо ви ніколи не кодується цей матеріал раніше, просто розглянути з горезвісний інженерно капелюх на, чому це краще дизайн ймовірно? Факторинг з цих властивостей CSS, покласти їх у свій файл. Навіть якщо ми вирішили це Проблема, як п'ять хвилин тому в найпершій версії. 

Ми не покращився сторінка стилістично, це просто краще дизайн в якомусь сенсі. Чому ти думаєш? Так. Більш гнучка, як? Так. Так що, якщо ви хочете піти назад і змінити речі, Тепер, у вас є одне місце, де ви можете змінити стан речей. І справді, щось як проблема встановити сьомій, де ми будемо реалізувати торгівля акціями сайт, що відбувається, щоб мати ціла купа сторінок. І це було б дійсно дратує, якщо ви вирішите, хм, Я не дуже люблю 24 пікселів, я хочу це буде 28 пікселів або трохи більше. І тоді доведеться зробити Глобальний пошук і заміна або відкрити всі файли вашого сайту просто насправді змінити одне значення. За факторингу ці стилі в одному місці, Тепер ви можете відкрити один текстовий файл в CS50IDE в будь-якій програмі, змінити його, зберегти його, і зроблено. Ви поширюються ті зміни скрізь. І, що б бути такою ж, в дот ч файлу, а також. Так які-небудь питання, таким чином, далеко від цього синтаксису? Всі права, тому ми зробили все, здається, крім фактичної реалізації гіперпосилання. І так давайте йти вперед і робити це. Дозвольте мені йти вперед і створити новий файл тут. Я буду називати його link.html, покласти в сьогоднішньому коді. 

І я збираюся зробити відкритим Кронштейн тип документа HTML. Як в сторону, це річ у зверху, цей документ типу декларації, це єдине, що дивно зі знаком оклику. Ви просто повинні це робити там, і це означає, що ми використовуємо HTML версії 5. Старі версії мова мала набагато довше струни, що вам потрібно, щоб поставити там. Так ось приклад називається посилання. 

Мені потрібно тіло моєї веб-сторінці тут. І тут, а одно HREF скажімо HTTP://www.disney.com і мій улюблений сайт, ми будемо говорити. Гаразд, так що дуже необразливо, зручний сторінка. Якщо я зараз заглиблюватися в моєму каталозі лістинг тут і відкрити link.html, у нас є гіпер тексту. 

І справді, це десь Н в HTTP приходить. Протокол передачі гіпертексту про передачу тексту що має гіперпосилання на інші ресурси. І справді, тут знайоме, якщо ретро, ​​синій посилання, що якщо натиснута, фактично приведе мене до Disney.com. Тепер, о, що виходить найближчим часом. Гаразд, так що тепер, що деякі про наслідки цього? 

І, чесно кажучи, світ починає щоб отримати трохи більше знайомі а також трохи страшніше але також трохи більш самостійно виправданим як тільки ви починаєте щоб зрозуміти ці речі. Тому що шанси, що деякі з вас, якщо ви йдете через папку зі спамом Gmail або навіть Вашу поштову скриньку, ви, ймовірно, отримав якийсь електронній пошті що просить вас, щоб змінити свою пароль може бути або може бути перевірити Ваші облікові дані PayPal або етажерка. 

І справді, ви, можливо, отримали те, що говорить, як натисніть тут скинути пароль PayPal. А тепер зверніть увагу, якщо це не Disney.com але, як і badplace.com перезавантажити, зверніть увагу, що текст тут може сказати що-небудь взагалі. І справді, це всього лише слова. Чому не я насправді супер шкідливий і сказати http://www.paypal.com. 

Натисніть тут, скинути PayPal пароль і тепер перезавантажити. Це виглядає досить законним, вірно? Я маю на увазі, я не клацнув би на по електронній пошті, що тільки говорить, що це. Але зверніть увагу дихотомію. Це говорить www.paypal.com, і справді, постривай, ми знаємо, що ви хочете Індекс S для забезпечення безпеки. Так що тепер, піти в www.paypal.com HTTPS, але якщо ви ніколи не робили цього раніше, дійсно отримують в звичку завислий над маленькими посиланнях тут. І це важко зрозуміти, На екрані є, і це ще не все, що легше тут. Але шлях тут, у крихітний маленький куточок робить браузер насправді сказати вам, що ми збираємося щоб badplace.com замість Paypal.com. Тепер, коли ми збираємося з цим? Всі приклади, які ми зробили сьогодні, ми жорстко і ввели вручну. Веб неймовірно нецікаво, коли вам важко код веб-сторінок, так що зміст статична і ніколи не змінюється. Звичайно, всі наші улюблені веб-сайти сьогодні, будь то Gmail або Twitter або Facebook або будь-яку кількість інших динамічні. Вони змінюються відповідь на дії користувача так само, як в результатах пошуку Google. 

І так в середу, що ми робимо, ми залишаємо HTML і CSS введення позаду нас, і ми беремо собою зрозумілим, що ми тепер знаю його і введемо нову мову програмування називається PHP, який подобається С, збирається дати нам влада фактично створити програми що самі по собі генерувати висновок. У цьому випадку, ми будемо використовувати PHP для створення динамічно Інтернет сторінки, використовуючи цей новий мову. Так про це в середу. Побачимось. 

[Грає музика]