1 00:00:00,000 --> 00:00:01,390 2 00:00:01,390 --> 00:00:04,890 >> [Музика, яка грає] 3 00:00:04,890 --> 00:00:10,955 4 00:00:10,955 --> 00:00:12,580 DAVID J Маланій: Гаразд, ласкаво просимо назад. 5 00:00:12,580 --> 00:00:13,600 Це CS50. 6 00:00:13,600 --> 00:00:15,540 Це кінець тижня сім. 7 00:00:15,540 --> 00:00:18,180 І це кінець цього поглинача Полювання з проблемою встановлення чотирьох 8 00:00:18,180 --> 00:00:19,220 що ви, можливо, пам'ятаєте. 9 00:00:19,220 --> 00:00:21,650 Оговтавшись все ці файли JPEG персоналу, 10 00:00:21,650 --> 00:00:24,820 Ви були оскаржені, якщо ви хочете, сфотографувати себе з як багато 11 00:00:24,820 --> 00:00:25,981 з тих людей, як ви можете. 12 00:00:25,981 --> 00:00:28,480 Ми отримали цілу купу матеріалів За останні кілька тижнів, 13 00:00:28,480 --> 00:00:32,980 Дійсно, чимало право до полудня Сьогодні, деякі з яких є ті тут, 14 00:00:32,980 --> 00:00:37,670 зловив тут in-- виглядає like-- Анненберг Зал на робочий час, один тут 15 00:00:37,670 --> 00:00:39,530 в Лоуелл Хаус з Ніком. 16 00:00:39,530 --> 00:00:41,750 Ось Рамон бути спійманим на телефоні. 17 00:00:41,750 --> 00:00:43,870 Про це на CS50 обід. 18 00:00:43,870 --> 00:00:46,840 Це був Джейсон Skyping з більш творчим однокласник, 19 00:00:46,840 --> 00:00:48,280 хто подзвонив йому цей шлях. 20 00:00:48,280 --> 00:00:49,690 Ми не знаємо, що це було. 21 00:00:49,690 --> 00:00:51,940 >> [Сміх] 22 00:00:51,940 --> 00:00:54,570 >> DAVID J Маланій: Але що стоїть за гігабайт. 23 00:00:54,570 --> 00:00:56,960 Ось Чанг, який буквально втік зі сцени 24 00:00:56,960 --> 00:01:00,480 щоб уникнути його фотографують друг день, але в кінці кінців зловили. 25 00:01:00,480 --> 00:01:02,050 Ось Нік. 26 00:01:02,050 --> 00:01:03,480 Ось Нік. 27 00:01:03,480 --> 00:01:04,080 Ось Нік. 28 00:01:04,080 --> 00:01:05,090 29 00:01:05,090 --> 00:01:07,670 А ось Елісон вниз полями. 30 00:01:07,670 --> 00:01:11,840 І Zamyla навіть був знайдений на конкурсі бальних. 31 00:01:11,840 --> 00:01:14,100 Так що ми будемо проходити через ці фотографії, з'ясувати 32 00:01:14,100 --> 00:01:16,690 який представив найбільш найраніше, і нагорода 33 00:01:16,690 --> 00:01:20,662 один казковий приз, як пообіцяв в специфікації. 34 00:01:20,662 --> 00:01:23,120 І ми будемо також стежити за о простір, що був залучений. 35 00:01:23,120 --> 00:01:26,860 >> Пару announcements-- так обід це, знову ж таки, в цю п'ятницю в 1:15 вечора. 36 00:01:26,860 --> 00:01:30,420 Якщо ви хочете приєднатися до нас, RSVP в той URL тут. 37 00:01:30,420 --> 00:01:33,730 Джейсон з'являється знову тут від одного з розділів пару років 38 00:01:33,730 --> 00:01:35,510 назад, який стався падати на Хеллоуїн. 39 00:01:35,510 --> 00:01:38,950 І справді, він одягнений, як гарбуз, що конкретний рік. 40 00:01:38,950 --> 00:01:42,700 Якщо ви подивитеся цей розділ його з 2011 розділу 41 00:01:42,700 --> 00:01:46,480 вісім, якщо вам цікаво, в CS50.tv, я думаю, 42 00:01:46,480 --> 00:01:49,730 це був рік, в якому його повітряний насос працював. 43 00:01:49,730 --> 00:01:52,490 >> Якщо ви потім дивитися схожий розділ в 2012 році, 44 00:01:52,490 --> 00:01:55,620 Ви побачите цю Джейсона набагато спущеному, не так костюм більше не функціонувала, 45 00:01:55,620 --> 00:01:58,060 який є тільки сказати в цю п'ятницю, якби ти 46 00:01:58,060 --> 00:02:02,720 хотів вирізати гарбуз з Daven і Гейб та інші, RSVP главам 47 00:02:02,720 --> 00:02:04,480 в cs50.harvard.edu адресою. 48 00:02:04,480 --> 00:02:06,200 Це обіцяє бути дуже весело. 49 00:02:06,200 --> 00:02:08,660 Daven, ми сказали, вирізав гарбуз все своє життя. 50 00:02:08,660 --> 00:02:11,930 Габріель з Бразилії жодного разу різьблені гарбуза на Хеллоуїн. 51 00:02:11,930 --> 00:02:14,700 Так там з ними, як він дізнається. 52 00:02:14,700 --> 00:02:16,830 >> Семінари, meanwhile-- так що ви дізнаєтеся найближчим часом 53 00:02:16,830 --> 00:02:20,650 про те, що наші очікування по Остаточний проект, який по суті 54 00:02:20,650 --> 00:02:23,150 зводитиметься до розробці та реалізації 55 00:02:23,150 --> 00:02:26,440 Найбільш будь-який проект представляє інтерес для Ви, хоча і за умови схвалення 56 00:02:26,440 --> 00:02:28,490 і керівництво від вашого навчального хлопець. 57 00:02:28,490 --> 00:02:32,110 Ближче до кінця семестр, ми вводимо ряд 58 00:02:32,110 --> 00:02:35,610 семінарів, які факультативні заняття на чолі з навчальними побратимів та Гарварді 59 00:02:35,610 --> 00:02:38,570 Співробітники, друзі ході всієї Кампус, на різні теми, які 60 00:02:38,570 --> 00:02:41,470 є дотичною до Основною навчальною програми курсу по 61 00:02:41,470 --> 00:02:45,590 але тим не менше це застосовно, весело, і відрізняється для потенційних кінцевих проектів. 62 00:02:45,590 --> 00:02:49,530 >> Наприклад, по-перше, якщо ви хочете зареєструвати, головою до цього URL там. 63 00:02:49,530 --> 00:02:53,010 І це лінійка для одні семінари в цьому році. 64 00:02:53,010 --> 00:02:56,060 Але розумію, у нас є десятки семінари від минулих років, всі з яких 65 00:02:56,060 --> 00:02:59,774 пов'язані в меню Seminars варіант сайту Курсу. 66 00:02:59,774 --> 00:03:02,190 Так що якщо ви думаєте про вихід за межі своєї зони комфорту 67 00:03:02,190 --> 00:03:05,060 або піднімаючи деякі нові навички, наприклад, програмування iPhone 68 00:03:05,060 --> 00:03:08,100 додатки з Свіфт, нову мову від Apple, або Objective-C 69 00:03:08,100 --> 00:03:11,230 або Програми або програмування [? кий?] лампочки, або будь-яку з тем 70 00:03:11,230 --> 00:03:15,490 тут і більш, через перевірки з на сторінку реєстрації. 71 00:03:15,490 --> 00:03:19,730 >> Таким чином, ми почали і ув'язнений Понеділок з дивлячись на HTTP. 72 00:03:19,730 --> 00:03:22,675 Так швидко refresher-- HTTP, Передачі гіпертексту Протокол. 73 00:03:22,675 --> 00:03:24,045 Але що це насправді означає? 74 00:03:24,045 --> 00:03:26,805 75 00:03:26,805 --> 00:03:27,930 Що це означає? 76 00:03:27,930 --> 00:03:30,665 77 00:03:30,665 --> 00:03:31,290 Хіба що рука? 78 00:03:31,290 --> 00:03:33,074 79 00:03:33,074 --> 00:03:34,740 Я знаю, що ти просто чесати потилицю. 80 00:03:34,740 --> 00:03:36,400 Але ви хочете запропонувати що HTTP є? 81 00:03:36,400 --> 00:03:37,792 82 00:03:37,792 --> 00:03:40,576 >> Аудиторія: Як комп'ютери спілкуватися з [нерозбірливо]. 83 00:03:40,576 --> 00:03:41,517 84 00:03:41,517 --> 00:03:43,100 DAVID J Маланій: я пропустив останню частину. 85 00:03:43,100 --> 00:03:45,774 Як комп'ютери взаємодіють with-- 86 00:03:45,774 --> 00:03:47,325 >> АУДИТОРІЯ: Інтернет-сервери. 87 00:03:47,325 --> 00:03:50,450 DAVID J Маланій: Good-- з інтернетом сервери і спеціально, веб-сервери. 88 00:03:50,450 --> 00:03:53,533 Тому відкликання, є купа послуги в Інтернеті, деякі з яких 89 00:03:53,533 --> 00:03:57,349 Ви використовуєте ймовірно щоденно з чаті і повідомлення, чат і веб, і адреса електронної пошти, 90 00:03:57,349 --> 00:03:57,890 тощо. 91 00:03:57,890 --> 00:04:00,900 І HTTP просто протокол, веб-браузери 92 00:04:00,900 --> 00:04:03,750 говорити при спілкуванні з веб-сервери, і навпаки. 93 00:04:03,750 --> 00:04:05,580 І аналоговий в людський світ може бути, 94 00:04:05,580 --> 00:04:08,730 Я простягаю руку, щоб потиснути деякі інша людина, і він чи вона 95 00:04:08,730 --> 00:04:11,970 визнає, розширюючи його або її руки, а також. 96 00:04:11,970 --> 00:04:13,970 Так що це просто протокол, набір угод. 97 00:04:13,970 --> 00:04:15,630 >> І те, що насправді є ці конвенції? 98 00:04:15,630 --> 00:04:18,640 Ну, це просто зводиться до відправка повідомлення туди і назад, 99 00:04:18,640 --> 00:04:19,770 як ми зображені тут. 100 00:04:19,770 --> 00:04:22,520 І є кілька способів, у які ви можете відправляти ці повідомлення. 101 00:04:22,520 --> 00:04:24,360 І, мабуть, самий загальна відомий як отримати. 102 00:04:24,360 --> 00:04:26,510 І ми побачимо, контраст для цього найближчим часом. 103 00:04:26,510 --> 00:04:30,010 >> Але прохання отримати від браузера на сервері просто виглядає так. 104 00:04:30,010 --> 00:04:32,960 Це купа тексту, який він ставить всередині віртуальної обвідної. 105 00:04:32,960 --> 00:04:35,854 На зовнішній стороні цього конверта йдемо пару штук деталей. 106 00:04:35,854 --> 00:04:37,770 Що потрібно, щоб піти на Конверт, так сказати, 107 00:04:37,770 --> 00:04:41,820 для того, щоб отримати запит як це від мене, щоб веб-сервер? 108 00:04:41,820 --> 00:04:42,320 Так. 109 00:04:42,320 --> 00:04:43,270 >> АУДИТОРІЯ: Ваш IP адреса. 110 00:04:43,270 --> 00:04:45,890 >> DAVID J Маланій: Мій IP-адресу В поле, так сказати, 111 00:04:45,890 --> 00:04:49,490 і, звичайно, IP-адреса одержувача. 112 00:04:49,490 --> 00:04:52,710 Але у випадку веб-пакета, Нам потрібно трохи більше деталей 113 00:04:52,710 --> 00:04:55,254 Це не досить просто відправити конверт з сервером, 114 00:04:55,254 --> 00:04:57,670 бо сервер може бути прослуховування для різних типів 115 00:04:57,670 --> 00:04:59,180 інтернет-трафіку. 116 00:04:59,180 --> 00:05:01,370 Так що ще потрібно крім IP одержувача? 117 00:05:01,370 --> 00:05:02,723 118 00:05:02,723 --> 00:05:03,222 Да? 119 00:05:03,222 --> 00:05:04,241 >> АУДИТОРІЯ: Хіба TCP? 120 00:05:04,241 --> 00:05:05,074 DAVID J Маланій: Добре. 121 00:05:05,074 --> 00:05:06,470 TCP-- 122 00:05:06,470 --> 00:05:07,340 >> АУДИТОРІЯ: Адреса. 123 00:05:07,340 --> 00:05:09,340 >> DAVID J Маланій: Адреса, або порт, як це називається. 124 00:05:09,340 --> 00:05:11,010 Близько, але ряд TCP порт. 125 00:05:11,010 --> 00:05:12,220 І є купа з них. 126 00:05:12,220 --> 00:05:14,310 Але, звичайно, найбільш знайомі повинні в кінцевому підсумку 127 00:05:14,310 --> 00:05:17,590 бути 80, який використовується за умовчанням один використовується для веб-трафіку. 128 00:05:17,590 --> 00:05:20,040 І ще знайомі один скоро буде 443, 129 00:05:20,040 --> 00:05:24,280 який використовується для безпечної веб- трафіку, URL-адреси, які починаються з HTTPS. 130 00:05:24,280 --> 00:05:26,650 >> Так що це те, що відбувається всередині цього конверта. 131 00:05:26,650 --> 00:05:29,780 І отримати / просто означає, дати мені веб-сторінка за умовчанням. 132 00:05:29,780 --> 00:05:32,700 Дайте мені корінь важко їздити на цьому веб-сервері. 133 00:05:32,700 --> 00:05:36,050 І будемо сподіватися, веб- Сервер відповість, ОК 134 00:05:36,050 --> 00:05:39,630 і число 200, яка є просто Угода, що, так, все 135 00:05:39,630 --> 00:05:40,470 дійсно в порядку. 136 00:05:40,470 --> 00:05:41,680 Ось сторінка. 137 00:05:41,680 --> 00:05:45,510 Тип веб-сторінці буде Текст бути, але більш конкретно, HTML, 138 00:05:45,510 --> 00:05:47,010 які ми збираємося пірнати назад у. 139 00:05:47,010 --> 00:05:49,877 І точка точка точка просто кошти, тут є HTML. 140 00:05:49,877 --> 00:05:51,710 І ось, коли ми підібрати історію сьогодні, 141 00:05:51,710 --> 00:05:55,740 насправді писати HTML, Мова розмітки гіпертексту, який 142 00:05:55,740 --> 00:05:57,727 це мова, якою Веб-сторінки написані. 143 00:05:57,727 --> 00:05:59,060 Це не мова програмування. 144 00:05:59,060 --> 00:06:01,270 Там немає функції або петлі або умови. 145 00:06:01,270 --> 00:06:03,800 Це мова розмітки, а знову бачимо сьогодні, 146 00:06:03,800 --> 00:06:07,240 що дозволяє визначити як структурувати і стилізувати 147 00:06:07,240 --> 00:06:09,300 естетично веб-сторінки. 148 00:06:09,300 --> 00:06:11,470 >> Так що це був один і тільки сторінки ми дійсно 149 00:06:11,470 --> 00:06:13,930 подивився на, якщо коротко, в понеділок. 150 00:06:13,930 --> 00:06:16,250 І зверніть увагу, деякі яскраво виражені характеристики. 151 00:06:16,250 --> 00:06:20,170 Там дуже багато відкритих кутом Кронштейн і близько кутовий кронштейн. 152 00:06:20,170 --> 00:06:23,160 Між тим, кутовий дужки слова. 153 00:06:23,160 --> 00:06:25,660 І ми збираємося почати називаючи ці слова теги. 154 00:06:25,660 --> 00:06:28,800 Так відкрито кронштейн голова і закритим кронштейн голова 155 00:06:28,800 --> 00:06:33,620 є відкриті і закриті теги, або початкові і кінцеві теги 156 00:06:33,620 --> 00:06:37,660 відповідно, з HTML елемента, як ми його називаємо, називається головою. 157 00:06:37,660 --> 00:06:41,760 І те ж саме жаргон відноситься для тіла в HTML і пр. 158 00:06:41,760 --> 00:06:43,970 >> І що приємно, HTML-- і справді, ми будемо 159 00:06:43,970 --> 00:06:47,187 провести жахливо мало часу на це, тому що ви будете в основному тільки з'ясувати 160 00:06:47,187 --> 00:06:49,770 які функції вона має, коли вам насправді мають конкретну проблему 161 00:06:49,770 --> 00:06:52,820 в solve-- ви виявите, що Браузер досить безглуздо. 162 00:06:52,820 --> 00:06:56,450 Це просто буде do-- не в відміну від computer-- те, що ви скажете їй зробити. 163 00:06:56,450 --> 00:06:59,279 І тому, коли у вас є відкритий Кронштейн HTML на самому верху 164 00:06:59,279 --> 00:07:01,320 там, що істотно просто означає, агов, браузер, 165 00:07:01,320 --> 00:07:04,090 ось іде веб-сторінка написана на HTML. 166 00:07:04,090 --> 00:07:06,130 >> Коли він бачить відкритий кронштейн голова, це просто означає ,, 167 00:07:06,130 --> 00:07:10,350 агов, браузер, ось іде головою, або самий верхній частина моєї веб-сторінці. 168 00:07:10,350 --> 00:07:14,192 Коли він бачить закриту дужку голова, це просто означає, агов, 169 00:07:14,192 --> 00:07:15,150 ось саме для голови. 170 00:07:15,150 --> 00:07:16,420 Очікування чогось ще. 171 00:07:16,420 --> 00:07:18,878 І щось ще мабуть, буде тіло. 172 00:07:18,878 --> 00:07:22,630 І коли у вас немає тега, як у вас є тільки привіт, кома, мир, 173 00:07:22,630 --> 00:07:26,610 от тільки буде сирий текст, в кінцевому рахунку, буде відображатися на екрані. 174 00:07:26,610 --> 00:07:29,220 >> Тепер, ви помітите, занадто відступ тут. 175 00:07:29,220 --> 00:07:32,160 Ви, напевно, можна зробити висновок, як ми стилізації його. 176 00:07:32,160 --> 00:07:34,850 Щоразу, коли я відкриваю тег, так сказати, я відступ. 177 00:07:34,850 --> 00:07:38,540 І кожен раз, коли я закриваю Тег, я не по-відступ, 178 00:07:38,540 --> 00:07:40,690 близькі по духу фігурні дужки. 179 00:07:40,690 --> 00:07:43,470 А за що, я почасти використання моє судження. 180 00:07:43,470 --> 00:07:48,380 Зверніть увагу, що я не потрудився удару Введіть всередині цього тега заголовка. 181 00:07:48,380 --> 00:07:48,990 Чому? 182 00:07:48,990 --> 00:07:51,920 Ну, я просто вирішив, що це виглядало трохи чистіше мене, людина, 183 00:07:51,920 --> 00:07:53,181 просто не потрудилися робити це. 184 00:07:53,181 --> 00:07:54,930 Отже, ще раз, є деякі Рішення називає просто 185 00:07:54,930 --> 00:07:57,670 як є на С або будь-яку мову. 186 00:07:57,670 --> 00:08:04,110 >> Але зверніть увагу, також, що це поглиблення піддається розумової моделі, 187 00:08:04,110 --> 00:08:05,670 не більше чим ускладнюють його. 188 00:08:05,670 --> 00:08:07,020 Але дерево, чи не так? 189 00:08:07,020 --> 00:08:09,290 Якщо ви думаєте про Мережу сторінка, мабуть, написані 190 00:08:09,290 --> 00:08:12,050 як це, як красиво відступом, що шлях, 191 00:08:12,050 --> 00:08:17,390 Ви можете подумати, з дужки що HTML закрита дужка тега демаркації 192 00:08:17,390 --> 00:08:21,380 корінь вузла, генеалогічне дерево вузол стиль в стилі дерев 193 00:08:21,380 --> 00:08:22,900 ми дивилися минулого п'ятниці. 194 00:08:22,900 --> 00:08:27,630 >> І справді, у нас є на прямо тут що ми називаємо DOM, D-О-М, документ 195 00:08:27,630 --> 00:08:31,680 об'єктна модель, химерний спосіб сказати дерево, яке представляє, що HTML. 196 00:08:31,680 --> 00:08:36,140 І зверніть увагу, що HTML має, ми будемо говорити, як родоводу, двоє дітей. 197 00:08:36,140 --> 00:08:37,659 Зліва знаходиться голова. 198 00:08:37,659 --> 00:08:39,179 Справа знаходиться тіло. 199 00:08:39,179 --> 00:08:44,220 >> І так само, як безглуздий думки вправи, голова, звичайно, є, як багато дітей 200 00:08:44,220 --> 00:08:46,070 відповідно з цією структурою? 201 00:08:46,070 --> 00:08:48,200 Так тільки один, title-- і ось чому ми маємо 202 00:08:48,200 --> 00:08:50,580 стрілка йде від голови до назви. 203 00:08:50,580 --> 00:08:55,110 Так що це, начебто цієї людини в родовід була тільки одна потомство. 204 00:08:55,110 --> 00:08:58,230 А потім сам заголовок може можна сказати, є дитина теж. 205 00:08:58,230 --> 00:09:01,780 >> Нагадаємо, що HTML був Привіт, кома, світ під ним. 206 00:09:01,780 --> 00:09:06,090 І я просто намалював в овальної замість прямокутника просто 207 00:09:06,090 --> 00:09:10,559 передати семантично, що навіть при тому, це вузол в дереві, так сказати, 208 00:09:10,559 --> 00:09:12,100 це свого роду принципово відрізняється. 209 00:09:12,100 --> 00:09:12,800 Це не тег. 210 00:09:12,800 --> 00:09:14,780 Або більш правильно, це не елемент. 211 00:09:14,780 --> 00:09:16,590 Це просто текстовий вузол, якщо хочете. 212 00:09:16,590 --> 00:09:18,990 Але це зовсім довільні людини конвенції. 213 00:09:18,990 --> 00:09:23,180 Це тільки зараз мій спосіб уявляючи, що я буду як сукупність 214 00:09:23,180 --> 00:09:24,340 назвати документ. 215 00:09:24,340 --> 00:09:27,750 >> І як в сторону, речі на супер лівому верхньому куті, 216 00:09:27,750 --> 00:09:32,080 відкрита дужка знак оклику док тип HTML, це виглядає як тег, 217 00:09:32,080 --> 00:09:35,560 але це нерозумно прикордонні випадки, коли що якраз там, копіювати і вставляти 218 00:09:35,560 --> 00:09:38,460 вказати браузерів це HTML версії 5. 219 00:09:38,460 --> 00:09:41,540 Світ постійно змінюється, що в Перший рядок коду в сторінки повинні бути. 220 00:09:41,540 --> 00:09:43,820 Це просто означає, версія 5. 221 00:09:43,820 --> 00:09:45,950 Так що не зовсім дивитися, як інші. 222 00:09:45,950 --> 00:09:48,120 >> Гаразд, так з цим сказав, тепер ви будете цінувати 223 00:09:48,120 --> 00:09:50,767 це досить це нерозумно тату хтось отримав. 224 00:09:50,767 --> 00:09:51,990 >> [Сміх] 225 00:09:51,990 --> 00:09:54,210 >> DAVID J Маланій: Гаразд, А тепер давайте насправді занурення 226 00:09:54,210 --> 00:09:55,710 в щось робити з цим. 227 00:09:55,710 --> 00:09:58,610 Як ви пам'ятаєте, що в останній раз Я відкрив CS50 Appliance 228 00:09:58,610 --> 00:10:01,650 і я зробив щось, як просто, як відкриття Gedit. 229 00:10:01,650 --> 00:10:05,190 І я зберіг файл навіть на мій desktop-- ніде special-- 230 00:10:05,190 --> 00:10:05,870 як hello.html. 231 00:10:05,870 --> 00:10:07,100 232 00:10:07,100 --> 00:10:10,984 >> Отже, дозвольте мені зробити це again-- hello.html Enter. 233 00:10:10,984 --> 00:10:13,900 І тепер у цьому файлі, я збираюся йти вперед і повторити те, що ми просто 234 00:10:13,900 --> 00:10:18,850 saw-- док типу HTML Тоді я збираюся зробити відкритим кронштейн HTML закриту дужку. 235 00:10:18,850 --> 00:10:21,890 А потім я збираюся превентивно відкривати і закривати тег. 236 00:10:21,890 --> 00:10:22,390 Чому? 237 00:10:22,390 --> 00:10:23,598 Просто так я не забуваю пізніше. 238 00:10:23,598 --> 00:10:26,850 Це просто хороша практика, як відкриття і закриття фігурні дужки все відразу. 239 00:10:26,850 --> 00:10:28,900 >> І тоді те, що було далі? 240 00:10:28,900 --> 00:10:30,582 Ви можете думати про татуювання. 241 00:10:30,582 --> 00:10:31,450 >> АУДИТОРІЯ: Глава. 242 00:10:31,450 --> 00:10:32,500 >> DAVID J Маланій: Глава. 243 00:10:32,500 --> 00:10:36,020 А потім тут, я мав титул, я думаю. 244 00:10:36,020 --> 00:10:39,886 І назва була довільно, Привіт, світ близький назву. 245 00:10:39,886 --> 00:10:42,760 А потім сюди, тіло, з course-- то ми закриваємо тег тіла. 246 00:10:42,760 --> 00:10:45,660 А потім просто кілька надлишково, У мене було те ж саме тут. 247 00:10:45,660 --> 00:10:47,150 >> Так я стверджую, що це веб-сторінка. 248 00:10:47,150 --> 00:10:49,050 Це те, що Тепер можна було жити в Інтернеті, 249 00:10:49,050 --> 00:10:51,925 хоча, звичайно, це в буквальному сенсі живе на моєму робочому столі прямо зараз. 250 00:10:51,925 --> 00:10:55,837 Але насправді, якби я мінімізувати Gedit, Я буду бачити на моєму робочому столі його значок. 251 00:10:55,837 --> 00:10:58,420 Навіть при тому, що цей пристрій, Ви можете зробити це на Mac OS 252 00:10:58,420 --> 00:11:01,580 без TextEdit або Вікна з Notepad навіть. 253 00:11:01,580 --> 00:11:06,115 >> І якщо я йду вперед і двічі клацніть що навіть і Виберіть, добре, давайте 254 00:11:06,115 --> 00:11:07,990 Не вибирайте, що через Chrome не відкриваючи. 255 00:11:07,990 --> 00:11:09,281 Давайте йти вперед і відкривати Chrome. 256 00:11:09,281 --> 00:11:10,160 257 00:11:10,160 --> 00:11:14,040 А потім зробити Command-O для відкритої І орієнтуватися на мій робочий стіл 258 00:11:14,040 --> 00:11:15,320 і відкрити цей файл. 259 00:11:15,320 --> 00:11:20,120 Тобто, як браузер інтерпретує HTML, зверху вниз, зліва направо. 260 00:11:20,120 --> 00:11:21,314 Ей, браузеру ось HTML. 261 00:11:21,314 --> 00:11:21,980 Ось голова. 262 00:11:21,980 --> 00:11:23,250 Ось назва. 263 00:11:23,250 --> 00:11:24,090 Ось організм. 264 00:11:24,090 --> 00:11:26,620 І справді, це, як він надає цю веб-сторінку. 265 00:11:26,620 --> 00:11:27,800 >> Але зверніть увагу на URL. 266 00:11:27,800 --> 00:11:32,430 Ніхто з вас не може тягнути цю специфіку сторінка на ноутбуках зараз, 267 00:11:32,430 --> 00:11:34,910 навіть всередині вашого Прилад за допомогою цієї URL, 268 00:11:34,910 --> 00:11:40,130 тому файлу: // вказує, що це насправді на моїй файлової системі, мій жорсткий диск, 269 00:11:40,130 --> 00:11:40,990 не твоє. 270 00:11:40,990 --> 00:11:42,440 Так що це не все, що корисно. 271 00:11:42,440 --> 00:11:44,940 >> Давайте тепер перейдемо до використовуючи фактичний веб-сервер. 272 00:11:44,940 --> 00:11:48,309 І виходить, в CS50 Appliance це більше, ніж просто середовищі, де 273 00:11:48,309 --> 00:11:51,100 Ви можете написати код на Сі і компіляції і запустити його, як ви робили. 274 00:11:51,100 --> 00:11:55,500 Він також був налаштований на Співробітники представляти типовий веб 275 00:11:55,500 --> 00:11:58,290 Сервер це в Інтернеті, той, який ви могли б заплатити за 276 00:11:58,290 --> 00:12:00,210 або той, який знаходиться в так званому хмарі. 277 00:12:00,210 --> 00:12:02,600 >> І він працює Стандартна безкоштовно з відкритим вихідним кодом 278 00:12:02,600 --> 00:12:06,160 Програмне забезпечення, наприклад, то, називається Apache, який є, мабуть, 279 00:12:06,160 --> 00:12:08,700 раніше є найпопулярнішим веб- Серверне програмне забезпечення в світі 280 00:12:08,700 --> 00:12:11,030 що тисячі сайтів використовувати сьогодні. 281 00:12:11,030 --> 00:12:13,420 І це також ще є програмне забезпечення, як MySQL, 282 00:12:13,420 --> 00:12:16,240 який є сервером баз даних що ми в кінці кінців дістатися до, 283 00:12:16,240 --> 00:12:18,330 який є тільки сказати Я можу почати лікування 284 00:12:18,330 --> 00:12:22,040 мій прилад як повноцінний сервер що я не плачу за іншому місці. 285 00:12:22,040 --> 00:12:25,980 Це просто живе на своєму власному ноутбуці для Розробка та зручність цілях. 286 00:12:25,980 --> 00:12:27,870 >> Так що давайте йти вперед і скористатися цим. 287 00:12:27,870 --> 00:12:30,120 Я збираюся йти вперед і відкрити вікно терміналу. 288 00:12:30,120 --> 00:12:33,030 І я збираюся йти вперед і move-- фактично, першим я 289 00:12:33,030 --> 00:12:34,860 збирається орієнтуватися на моєму робочому столі. 290 00:12:34,860 --> 00:12:36,400 Якщо я роблю Ls, є hello.html. 291 00:12:36,400 --> 00:12:37,022 292 00:12:37,022 --> 00:12:38,730 І я збираюся піти вперед і почати використовувати 293 00:12:38,730 --> 00:12:40,800 новий каталог ми в не використовується до сьогоднішнього дня. 294 00:12:40,800 --> 00:12:46,840 >> hello.html-- я збираюся рухатися в ../vhosts для віртуального hosts-- 295 00:12:46,840 --> 00:12:50,940 докладніше про це в future-- а потім в каталозі під назвою локальний, 296 00:12:50,940 --> 00:12:54,420 який є прізвиськом, даним майже будь-який комп'ютер, будь то Mac, PC, 297 00:12:54,420 --> 00:12:57,560 або Linux комп'ютер, а потім спеціально в каталог, який ми, 298 00:12:57,560 --> 00:13:01,260 Співробітники вже створили для вас, коли Ви скачали прилад під назвою 299 00:13:01,260 --> 00:13:01,760 суспільного. 300 00:13:01,760 --> 00:13:04,551 І як припускає його назва, нічого Я поклав в цю папку, в теорії, 301 00:13:04,551 --> 00:13:07,790 збирається тепер бути громадського, по крайней мере, для людей 302 00:13:07,790 --> 00:13:10,030 у кого є пряма Підключення до комп'ютера. 303 00:13:10,030 --> 00:13:13,160 >> Так що тепер дозвольте мені йти вперед і зробити компакт-диск з тією ж директорії 304 00:13:13,160 --> 00:13:15,490 так що я можу бачити те, що відбувається і Ls типу. 305 00:13:15,490 --> 00:13:17,630 І справді, що це Єдине, що там. 306 00:13:17,630 --> 00:13:23,250 Я стверджую, тепер, бо я поставив це подати hello.html в директорії 307 00:13:23,250 --> 00:13:26,940 зване громадське всередині директорії називається локальний всередині директорії 308 00:13:26,940 --> 00:13:29,810 звані віртуальних доменів, які Завдяки співробітникам CS50 309 00:13:29,810 --> 00:13:34,390 був попередньо налаштований, щоб бути корінь вашого веб-сервера, 310 00:13:34,390 --> 00:13:36,900 Тепер я можу сподіватися, це зробити. 311 00:13:36,900 --> 00:13:38,390 >> Я збираюся відкрити нову вкладку. 312 00:13:38,390 --> 00:13:40,090 І я збираюся піти не подавати: //. 313 00:13:40,090 --> 00:13:44,520 Я збираюся використовувати фактичні HTTP / локальний, які 314 00:13:44,520 --> 00:13:47,470 знову, це прізвисько для мого власного сервера. 315 00:13:47,470 --> 00:13:51,085 А потім я збираюся піти в те, що ім'я файлу, просто щоб було ясно? 316 00:13:51,085 --> 00:13:52,680 317 00:13:52,680 --> 00:13:54,320 Де ця історія, ймовірно, буде? 318 00:13:54,320 --> 00:13:56,066 319 00:13:56,066 --> 00:13:56,565 hello.html. 320 00:13:56,565 --> 00:13:58,350 321 00:13:58,350 --> 00:14:04,270 >> Отже, іншими словами, я хочу, щоб зараз це це мій власний комп'ютер, мій власний прилад, 322 00:14:04,270 --> 00:14:05,660 неначе це реальна сервер. 323 00:14:05,660 --> 00:14:07,490 Його прізвисько локальний. 324 00:14:07,490 --> 00:14:10,210 Але думати про локальний хосте як як Facebook.com google.com, що завгодно. 325 00:14:10,210 --> 00:14:11,600 Це просто моя місцева назва. 326 00:14:11,600 --> 00:14:14,810 А потім у фінал, я хочу це в корінь жорсткого диска, так сказати, 327 00:14:14,810 --> 00:14:17,729 або корінь веб-сервера, Ergo слеш, а потім 328 00:14:17,729 --> 00:14:18,770 Файл hello.html. 329 00:14:18,770 --> 00:14:19,880 330 00:14:19,880 --> 00:14:21,930 >> Дозвольте мені зменшити масштаб і натисніть Ввод. 331 00:14:21,930 --> 00:14:24,266 І справді, в даний час моя веб-сторінка. 332 00:14:24,266 --> 00:14:25,390 Так що це трохи відрізняється. 333 00:14:25,390 --> 00:14:26,880 І це так само, як в захват. 334 00:14:26,880 --> 00:14:27,904 Це стара версія. 335 00:14:27,904 --> 00:14:29,070 Дозвольте мені зменшити шрифт назад. 336 00:14:29,070 --> 00:14:29,745 Це стара. 337 00:14:29,745 --> 00:14:30,890 Це новий. 338 00:14:30,890 --> 00:14:35,430 Але що принципово відбувається Тепер те, що HTTP використовується. 339 00:14:35,430 --> 00:14:39,344 >> Давайте зробимо це трохи більше ясно або, якщо хочете, трохи складніше. 340 00:14:39,344 --> 00:14:41,760 Дозвольте мені піти в правому нижньому куті розі мого приладу. 341 00:14:41,760 --> 00:14:44,000 І зауважте, що все це Час, там був номер. 342 00:14:44,000 --> 00:14:47,330 Це унікальний адресу Вашої CS50 Appliance. 343 00:14:47,330 --> 00:14:50,800 Це приватний адресу, як випливає з 172,16, 344 00:14:50,800 --> 00:14:53,860 який просто означає тільки ви фізично можуть отримати доступ до цієї веб-сервер. 345 00:14:53,860 --> 00:14:56,340 Все файрволом і добре захищений від решти 346 00:14:56,340 --> 00:14:58,130 світу через це рішення. 347 00:14:58,130 --> 00:15:01,920 >> А тепер зверніть увагу, хоча, якщо я йду в цю адресу, не в моєму приладі, 348 00:15:01,920 --> 00:15:04,340 але в Mac OS-- я збираюся повернутися сюди. 349 00:15:04,340 --> 00:15:05,930 Це мій Mac тепер. 350 00:15:05,930 --> 00:15:08,460 А тепер я збираюся відкрити ця версія Chrome тут. 351 00:15:08,460 --> 00:15:17,370 І я збираюся піти в HTTP: //172.16.25 / І я забуваю rest-- 133. 352 00:15:17,370 --> 00:15:25,210 >> Так що я збираюся відвідати з мого Mac що IP-адреса /hello.html Enter. 353 00:15:25,210 --> 00:15:29,850 І тепер я бачу, з моєї Mac що мій CS50 Appliance, хто 354 00:15:29,850 --> 00:15:32,600 IP-адреса, що число, дійсно веде себе 355 00:15:32,600 --> 00:15:34,320 як веб-сервер в Інтернеті. 356 00:15:34,320 --> 00:15:36,944 Це не є хороший легко пам'ятаю ім'я, як Facebook.com, 357 00:15:36,944 --> 00:15:40,370 але він використовує HTTP мабуть, навіть при тому, що Chrome 358 00:15:40,370 --> 00:15:43,560 є свого роду спрощення світ для нас, але не показує нам, HTTP. 359 00:15:43,560 --> 00:15:46,210 Але це дійсно саме це. 360 00:15:46,210 --> 00:15:48,470 Chrome тільки економити деякі введені з клавіатури символи в ці дні. 361 00:15:48,470 --> 00:15:50,530 І ось що ми зараз бачимо. 362 00:15:50,530 --> 00:15:51,890 >> Так що все прекрасно і чудово. 363 00:15:51,890 --> 00:15:53,740 Але це досить захват сторінки. 364 00:15:53,740 --> 00:15:56,230 Дозвольте мені піти і зробити щось Тепер трохи відрізняється. 365 00:15:56,230 --> 00:15:57,910 Отже, дозвольте мені повернутися до Gedit. 366 00:15:57,910 --> 00:16:00,580 І замість того, привіт, мир, давайте поставимо зображення. 367 00:16:00,580 --> 00:16:05,880 І я стверджував з before-- відпустити мене в моєму каталозі локальний громадськості. 368 00:16:05,880 --> 00:16:10,580 І дозвольте мені йти вперед і скопіювати ціла купа файлів з сьогоднішнього дня 369 00:16:10,580 --> 00:16:15,633 від моєї папці Dropbox в тут. 370 00:16:15,633 --> 00:16:19,470 371 00:16:19,470 --> 00:16:21,680 >> Тепер, якщо я друкую Ls, дивитися на всіх цих файлів 372 00:16:21,680 --> 00:16:24,940 що я поширюватися Сайт Звичайно напередодні сьогоднішнього дня, 373 00:16:24,940 --> 00:16:26,830 один з яких як і раніше hello.html. 374 00:16:26,830 --> 00:16:27,830 Так що є, що один. 375 00:16:27,830 --> 00:16:30,730 І згадати цю дурну один з минулого time-- cat.jpg. 376 00:16:30,730 --> 00:16:34,550 Отже, дозвольте мені спробувати вбудувати cat.jpg всередині моєї веб-сторінці. 377 00:16:34,550 --> 00:16:37,690 >> Я збираюся йти вперед і зробити cat.jpg, зберегти. 378 00:16:37,690 --> 00:16:38,950 Дозвольте мені повернутися до Chrome. 379 00:16:38,950 --> 00:16:41,140 І дозвольте мені збільшити Шрифт і зараз перезавантажити. 380 00:16:41,140 --> 00:16:43,090 381 00:16:43,090 --> 00:16:45,030 На жаль, коли я поклав це? 382 00:16:45,030 --> 00:16:48,210 383 00:16:48,210 --> 00:16:51,520 Standby-- мене все ще є старий Версія від мого робочого столу відкритим. 384 00:16:51,520 --> 00:16:56,020 Отже, дозвольте мені перейти в мою віртуальний хост, мій локальний, моя громадська і hello.html. 385 00:16:56,020 --> 00:16:57,320 386 00:16:57,320 --> 00:17:00,670 Так що тепер дозвольте мені йти вперед і кажуть cat.jpg всередині тіла 387 00:17:00,670 --> 00:17:02,830 де я хочу, щоб це було відображається і перезавантажте. 388 00:17:02,830 --> 00:17:04,560 Звичайно, це не правильно. 389 00:17:04,560 --> 00:17:08,050 >> Тому мені потрібно, щоб сказати браузеру трохи свідоміше, що я хочу, щоб це зробити. 390 00:17:08,050 --> 00:17:10,210 Просто ввівши ім'я явно недостатньо. 391 00:17:10,210 --> 00:17:15,134 Так нагадаємо, що був ще один тег, зображення, IMG, якщо коротко. 392 00:17:15,134 --> 00:17:17,550 Це тільки тому, що люди Не подобаються повні слова типу. 393 00:17:17,550 --> 00:17:19,050 І тоді ми можемо зробити джерело = "cat.jpg". 394 00:17:19,050 --> 00:17:21,470 395 00:17:21,470 --> 00:17:23,550 >> А тепер я збираюся зробити Одна справа відрізняється тут. 396 00:17:23,550 --> 00:17:25,390 Навіть при тому, що всі наші мітки досі є 397 00:17:25,390 --> 00:17:28,086 було це поняття почати тег і кінцевий тег, 398 00:17:28,086 --> 00:17:30,210 що насправді не роблять сенс для зображення, чи не так? 399 00:17:30,210 --> 00:17:32,430 Зображення або є, або немає. 400 00:17:32,430 --> 00:17:36,650 І тому люди прийшли з простіший конвенції. 401 00:17:36,650 --> 00:17:40,310 Якщо у вас є тег, який може і починатися і закінчуватися в одній і тій же time-- 402 00:17:40,310 --> 00:17:43,790 вона може бути порожнім, тому, щоб speak-- просто поставити косу риску всередині тега 403 00:17:43,790 --> 00:17:44,710 в самому кінці. 404 00:17:44,710 --> 00:17:45,776 405 00:17:45,776 --> 00:17:47,150 Тепер дозвольте мені повернутися до моєї браузері. 406 00:17:47,150 --> 00:17:50,377 Хіт Перезавантажити Блін, щось не так. 407 00:17:50,377 --> 00:17:52,460 Ви, напевно, бачили це іноді в Інтернеті, 408 00:17:52,460 --> 00:17:53,600 навіть якщо він не був винен. 409 00:17:53,600 --> 00:17:54,766 Це вина веб-сервера. 410 00:17:54,766 --> 00:17:56,240 Що оди це, здається, вказують? 411 00:17:56,240 --> 00:17:57,450 412 00:17:57,450 --> 00:17:58,009 Це працює. 413 00:17:58,009 --> 00:17:59,300 Ось де образ належить. 414 00:17:59,300 --> 00:17:59,700 Да? 415 00:17:59,700 --> 00:18:01,560 >> АУДИТОРІЯ: Але це не мати доступ до зображення. 416 00:18:01,560 --> 00:18:03,070 >> DAVID J Маланій: Це не мати доступ до зображення. 417 00:18:03,070 --> 00:18:05,230 Це, або ще гірше, може бути, це навіть не існує. 418 00:18:05,230 --> 00:18:06,729 Давайте подивимося, якщо ми не можемо діагностувати, що. 419 00:18:06,729 --> 00:18:09,390 Нагадаємо, з минулого разу, що, якщо в Chrome, в приладі, 420 00:18:09,390 --> 00:18:11,870 або навіть на вашому Mac або PC, Ви зайдіть в меню Developer 421 00:18:11,870 --> 00:18:14,650 і перейти до Developer Tools варіант, який, ймовірно, у Вас є 422 00:18:14,650 --> 00:18:16,850 не використовується багато чи коли-небудь. 423 00:18:16,850 --> 00:18:20,780 І якщо я йду в Мережу і перезавантажте сторінку, 424 00:18:20,780 --> 00:18:24,110 давайте реально дивитися на HTTP Запити, які приймаються. 425 00:18:24,110 --> 00:18:28,400 >> Схоже hello.html є дійсно ОК, значить 200. 426 00:18:28,400 --> 00:18:30,630 Але cat.jpg є 403. 427 00:18:30,630 --> 00:18:31,650 Так що це не 404. 428 00:18:31,650 --> 00:18:33,490 Файл, ймовірно, існує. 429 00:18:33,490 --> 00:18:35,250 403 означає, заборонено. 430 00:18:35,250 --> 00:18:37,790 Так що це трохи заплутаним. 431 00:18:37,790 --> 00:18:42,340 Я збираюся повернутися до мого вікні терміналу. 432 00:18:42,340 --> 00:18:43,700 Дозвольте мені збільшити тут. 433 00:18:43,700 --> 00:18:44,750 І зробимо Ls. 434 00:18:44,750 --> 00:18:46,430 Там в ті ж файли. 435 00:18:46,430 --> 00:18:49,410 >> Тепер дозвольте мені зробити LS-л, які ви, ймовірно, 436 00:18:49,410 --> 00:18:53,350 використовується, перш ніж подивитися на файл розміри, може бути, або тимчасові мітки. 437 00:18:53,350 --> 00:18:55,590 І ми бачимо цілу купу Переважна інформація. 438 00:18:55,590 --> 00:18:57,040 Але зверніть увагу, наскільки деталей. 439 00:18:57,040 --> 00:19:01,660 Ось hello.html в цьому гребти тут і ось cat.jpg. 440 00:19:01,660 --> 00:19:02,934 441 00:19:02,934 --> 00:19:05,850 І це всього лише прилад бути доброзичливі, виділивши в форматі JPEG користувач 442 00:19:05,850 --> 00:19:07,380 в фіолетовий, як це. 443 00:19:07,380 --> 00:19:11,470 Але що ще відрізняється рядом розмір файлу і ім'я файлу? 444 00:19:11,470 --> 00:19:13,438 445 00:19:13,438 --> 00:19:14,754 >> АУДИТОРІЯ: [нерозбірливо]. 446 00:19:14,754 --> 00:19:16,920 DAVID J Маланій: Так, є більше двох R, сюди. 447 00:19:16,920 --> 00:19:20,170 Зверніть увагу, що hello.html вже відбувається. 448 00:19:20,170 --> 00:19:24,050 Ось і виходить, що ім'я цей каталог громадськості важливо. 449 00:19:24,050 --> 00:19:26,400 Все, що в цьому каталозі призначається, щоб бути відкритими. 450 00:19:26,400 --> 00:19:28,790 Але це не достатньо просто копіювати файли туди. 451 00:19:28,790 --> 00:19:31,480 Крім того, необхідно змінити Режим файли, 452 00:19:31,480 --> 00:19:35,180 змінити права Файл активності не 453 00:19:35,180 --> 00:19:37,650 бути стандартно, яка є те, що тільки я можу читати 454 00:19:37,650 --> 00:19:39,220 і записати його, я як власник. 455 00:19:39,220 --> 00:19:43,540 Я хочу, щоб весь світ всіх на вміти читати мій файл, якщо можна так висловитися. 456 00:19:43,540 --> 00:19:44,950 Читати тільки означає його перегляду. 457 00:19:44,950 --> 00:19:49,780 >> І дійсно, як ви побачите в проблемі встановити сім, ось що означають ці R в. 458 00:19:49,780 --> 00:19:53,160 Середнє цих двох R в хай усім ще в світі також прочитати його, 459 00:19:53,160 --> 00:19:55,300 особливо зараз, це в цьому каталозі. 460 00:19:55,300 --> 00:19:59,620 Так, найпростіший спосіб виправити це, щоб перейти до моєї рядку і зробити CHMOD для зміни 461 00:19:59,620 --> 00:20:05,580 Режим і потім зробити A + R, в цілому, все, все, плюс г для читання, 462 00:20:05,580 --> 00:20:07,944 а потім cat.jpg Enter. 463 00:20:07,944 --> 00:20:10,360 Ніщо, здається, сталося, що Зазвичай це означає гарну річ. 464 00:20:10,360 --> 00:20:13,850 Так LS-л again-- зараз давайте подивимося на cat.jpg. 465 00:20:13,850 --> 00:20:15,750 І це дозвіл здається, змінилися. 466 00:20:15,750 --> 00:20:18,670 Як осторонь, якщо ви робите помилка, і ви, приміром, 467 00:20:18,670 --> 00:20:23,210 тільки що зробив your-- я не знаю-- есе загальнодоступним випадково, 468 00:20:23,210 --> 00:20:25,480 Ви можете зробити навпаки, CHMOD на-р. 469 00:20:25,480 --> 00:20:25,909 470 00:20:25,909 --> 00:20:28,200 Хоча, чесно кажучи, це не повинно бути в загальному каталозі 471 00:20:28,200 --> 00:20:29,760 в будь-якому випадку, якщо це занепокоєння. 472 00:20:29,760 --> 00:20:32,475 >> Так що тепер давайте повернемося до мій браузер і перезавантаження. 473 00:20:32,475 --> 00:20:32,904 474 00:20:32,904 --> 00:20:34,820 І я збираюся натисніть трохи Ghostbusters 475 00:20:34,820 --> 00:20:38,030 символ, щоб очистити цю частину Екран тому ми можемо бачити нові запити. 476 00:20:38,030 --> 00:20:40,630 І дійсно, тут є Grump Кет раніше. 477 00:20:40,630 --> 00:20:43,010 Але що ще більш важливо, Технічно, існує 478 00:20:43,010 --> 00:20:45,565 число 200, яка означає, що ми отримали це ОК. 479 00:20:45,565 --> 00:20:47,190 Гаразд, так що все прекрасно і чудово. 480 00:20:47,190 --> 00:20:48,940 Але ми не робимо кращий веб-сайтів, 481 00:20:48,940 --> 00:20:51,967 і ми не будемо намагатися занадто сильно, щоб зробити саме незвичайне із сайтів сьогодні. 482 00:20:51,967 --> 00:20:54,550 Але давайте хоча б щось зробити супер знайомі до гримлячи 483 00:20:54,550 --> 00:20:56,030 від декількох інших тегів. 484 00:20:56,030 --> 00:20:58,470 Тому припустимо, я не просто хочу кішку тут. 485 00:20:58,470 --> 00:21:02,530 Припустимо, що я насправді хочу це кішка посилання на щось. 486 00:21:02,530 --> 00:21:07,210 >> Я міг би, наприклад, зробити щось на зразок цього. 487 00:21:07,210 --> 00:21:08,580 488 00:21:08,580 --> 00:21:12,890 для анкерного HREF для гіпер посилання equals-- 489 00:21:12,890 --> 00:21:17,440 і давайте просто робити щось як www.google.com закриття 490 00:21:17,440 --> 00:21:19,540 цитувати заслони дужку. 491 00:21:19,540 --> 00:21:22,000 А тепер шукати кішок. 492 00:21:22,000 --> 00:21:23,520 Закрити якір тег. 493 00:21:23,520 --> 00:21:26,760 Так що це тільки один вид принципово нова деталь. 494 00:21:26,760 --> 00:21:28,190 Тег звичайно, відрізняється. 495 00:21:28,190 --> 00:21:31,770 Це ім'я для якоря HREF або гіпер посилання. 496 00:21:31,770 --> 00:21:35,269 >> Але що ще більш важливо, є це синтаксичні особливості тут. 497 00:21:35,269 --> 00:21:37,810 Це те, що ми почнемо називати НЕ тег, але атрибут. 498 00:21:37,810 --> 00:21:40,830 І атрибутом є те, що змінює поведінку тега. 499 00:21:40,830 --> 00:21:45,400 І це атрибут, HREF, засоби змінити поведінку цієї якоря 500 00:21:45,400 --> 00:21:48,430 так що, коли він натиснув, він іде за наступною адресою тут. 501 00:21:48,430 --> 00:21:50,330 І, звичайно, що URL є Google. 502 00:21:50,330 --> 00:21:53,951 >> Між тим, що це текст тут буде? 503 00:21:53,951 --> 00:21:55,950 Ну, що це буде що людина насправді 504 00:21:55,950 --> 00:21:58,470 бачить, як підкреслений посилання, так просто. 505 00:21:58,470 --> 00:21:59,220 Отже, давайте спробуємо це. 506 00:21:59,220 --> 00:21:59,980 Дозвольте мені зберегти його. 507 00:21:59,980 --> 00:22:01,650 Я до сих пір в hello.html. 508 00:22:01,650 --> 00:22:05,360 Але у версії онлайн, ви побачите фактичні імена файлів ми заздалегідь підготували. 509 00:22:05,360 --> 00:22:06,805 Дозвольте мені йти вперед і перезавантаження. 510 00:22:06,805 --> 00:22:08,680 А тепер це дуже захват сторінки ще. 511 00:22:08,680 --> 00:22:10,910 Але якщо я наведіть курсор миші на there-- і це трохи мала, 512 00:22:10,910 --> 00:22:13,576 но-- ви можете бачити в нижній лівий кут екрану, 513 00:22:13,576 --> 00:22:15,242 це дійсно збирається google.com. 514 00:22:15,242 --> 00:22:19,280 І якщо я натискаю, що це буде збийте мені шлях до фактичної Google. 515 00:22:19,280 --> 00:22:22,610 >> Але зверніть увагу, тут можливість для експлуатація, як в сторону. 516 00:22:22,610 --> 00:22:25,150 І ми повернемося до іншої питання безпеки найближчим часом. 517 00:22:25,150 --> 00:22:29,290 Бо є ця дихотомія між тим, де ви йдете і що ви говорите, 518 00:22:29,290 --> 00:22:34,722 Ви могли б зробити щось подібне this-- http://www.google.com. 519 00:22:34,722 --> 00:22:37,134 Добре, а тепер, якщо я перезавантажити Після збереження цій сторінці, 520 00:22:37,134 --> 00:22:38,800 це виглядає як я збираюся піти в Google. 521 00:22:38,800 --> 00:22:40,966 Але немає ніякої причини, я повинні піти в Google, чи не так? 522 00:22:40,966 --> 00:22:47,460 Я міг фактично йти щось подібне badguy.com, перезавантажте сторінку тут. 523 00:22:47,460 --> 00:22:49,750 І зауважте, це все ще виглядає як Google. 524 00:22:49,750 --> 00:22:52,020 І тільки якщо я різкий Досить навести тут 525 00:22:52,020 --> 00:22:54,770 я бачу це навіть збирається піти в інше місце. 526 00:22:54,770 --> 00:22:57,400 >> Так що, якщо ви коли-небудь отримував електронна пошта, особливо 527 00:22:57,400 --> 00:22:59,610 один з Paypal або здавалося б, від Paypal 528 00:22:59,610 --> 00:23:01,830 прошу вас увійти на ваш рахунок, це 529 00:23:01,830 --> 00:23:06,380 Тому ви ніколи не повинні або натисніть посилання в повідомленнях електронної пошти, 530 00:23:06,380 --> 00:23:07,930 чесно кажучи, будь-які посилання в електронних листах. 531 00:23:07,930 --> 00:23:10,380 Якщо ви знаєте, що фактична гроші в Paypal або банку 532 00:23:10,380 --> 00:23:14,250 Америки або Fidelity або будь сайт, ввести його вручну. 533 00:23:14,250 --> 00:23:17,530 Тому що подивіться, як легко це обдурити когось в поданні, що 534 00:23:17,530 --> 00:23:18,526 виглядає як посилання. 535 00:23:18,526 --> 00:23:20,400 Але це насправді міг піти абсолютно в будь-якому місці. 536 00:23:20,400 --> 00:23:23,301 >> І є набагато більше, загроз, ніж це. 537 00:23:23,301 --> 00:23:25,300 Насправді, це трохи дотичній тепер, але одна 538 00:23:25,300 --> 00:23:28,430 з кращих, які я коли-небудь бачив які відтоді були закриті, 539 00:23:28,430 --> 00:23:34,060 це хтось привів людей to-- так що це може сказати, 540 00:23:34,060 --> 00:23:37,660 Натисніть тут, щоб увійти в ваше рахунок, банківський рахунок. 541 00:23:37,660 --> 00:23:40,985 І це було Банк Заході. 542 00:23:40,985 --> 00:23:43,030 543 00:23:43,030 --> 00:23:44,250 >> Так хтось купив це. 544 00:23:44,250 --> 00:23:47,090 І це трохи легше побачити це в моноширінним шрифтом збільшено 545 00:23:47,090 --> 00:23:49,190 в на 30-футовий проектор с. 546 00:23:49,190 --> 00:23:51,720 Але коли він маленький шрифт в що ви отримуєте електронною поштою, 547 00:23:51,720 --> 00:23:54,690 це виглядає як bankofthewest.com, НЕ bankofthevvest.com, 548 00:23:54,690 --> 00:23:58,230 які хтось заплатив $ 10 купити. 549 00:23:58,230 --> 00:24:00,840 І тоді це привело їх до еквівалент якийсь поганий сайт. 550 00:24:00,840 --> 00:24:05,540 >> І ви побачите, too-- фактично ми можемо зробити this-- якщо я йду до фактичного сайті, 551 00:24:05,540 --> 00:24:10,335 bankofthewest.com, знову ж таки, відкликає в останній раз 552 00:24:10,335 --> 00:24:13,210 що якщо це їх веб-сторінки і Ви цікаво, як це працює, 553 00:24:13,210 --> 00:24:15,610 можна, звичайно, піти в Інструменти для розробників Chrome. 554 00:24:15,610 --> 00:24:18,890 І ви можете побачити все HTML красиво відформатована там. 555 00:24:18,890 --> 00:24:20,890 >> Але ближче до справи, Ви cam-- давайте закрити 556 00:24:20,890 --> 00:24:24,760 this-- ви можете піти, щоб подивитися Розробник View Source. 557 00:24:24,760 --> 00:24:25,770 558 00:24:25,770 --> 00:24:28,350 Чому б мені просто не скопіювати все, що А потім я 559 00:24:28,350 --> 00:24:31,630 може перейти в моїй маленькій вікні GEdit тут і зробити свій власний веб-сторінки. 560 00:24:31,630 --> 00:24:33,210 Зберегти в hello.html. 561 00:24:33,210 --> 00:24:36,770 І, ймовірно, це буде перерва, бо це не так легко, як правило. 562 00:24:36,770 --> 00:24:41,590 Але тепер, якщо я перезавантажити свій власний сторінку на мій власний хіт перезавантаження і CS50 Appliance, 563 00:24:41,590 --> 00:24:42,990 Добре, деякі речі зламав. 564 00:24:42,990 --> 00:24:45,750 Але я досить близькі до того, моя власна банківська сайт, чи не так? 565 00:24:45,750 --> 00:24:46,570 Все це HTML-- 566 00:24:46,570 --> 00:24:47,370 >> [Сміх] 567 00:24:47,370 --> 00:24:49,210 >> DAVID J Маланій: --Я НЕ actually-- і ви 568 00:24:49,210 --> 00:24:52,210 знаю, що є хтось там, хто фактично натисніть ці посилання теж. 569 00:24:52,210 --> 00:24:54,864 Отже, ясно, деякі речі зламав. 570 00:24:54,864 --> 00:24:56,780 Але що відбувається, щоб привести нам в дискусію, 571 00:24:56,780 --> 00:25:00,810 зайво прямо зараз, як до того, що CSS, каскадні таблиці стилів, є, 572 00:25:00,810 --> 00:25:03,410 і як ви насправді завантажити інші файли HTML 573 00:25:03,410 --> 00:25:06,140 і JPEG файли GIF файли, Сайт може використовувати. 574 00:25:06,140 --> 00:25:07,960 Але все це здійсненним. 575 00:25:07,960 --> 00:25:11,110 Але це насправді зводиться до ці дуже прості евристики. 576 00:25:11,110 --> 00:25:14,450 >> Так що тепер давайте просто побіжно Кілька інших прикладів HTML 577 00:25:14,450 --> 00:25:16,680 просто щоб дати вам відчуття про те, що ще можна зробити. 578 00:25:16,680 --> 00:25:18,670 Наприклад, це list.html. 579 00:25:18,670 --> 00:25:23,240 Припустимо, що я хотів зробити веб-сторінку зі списком будинків в квадрат. 580 00:25:23,240 --> 00:25:28,960 Я міг би використовувати вул тег для невпорядкований Список, а потім у списку пункт дитина 581 00:25:28,960 --> 00:25:33,760 а потім ітерації over-- або список, rather-- будинку в питання. 582 00:25:33,760 --> 00:25:36,080 >> І якщо я відкриваю цю гру, давайте зробимо це. 583 00:25:36,080 --> 00:25:40,670 Давайте НЕ hello.html, але list.html. 584 00:25:40,670 --> 00:25:42,160 Чорт візьми. 585 00:25:42,160 --> 00:25:43,000 Як це виправити? 586 00:25:43,000 --> 00:25:45,679 587 00:25:45,679 --> 00:25:47,220 Це та ж сама проблема, як і раніше, не так? 588 00:25:47,220 --> 00:25:52,510 Отже, дозвольте мені зробити chmod-- oops-- CHMOD + р від list.html. 589 00:25:52,510 --> 00:25:54,610 590 00:25:54,610 --> 00:25:59,610 І тепер, якщо я повернуся в своєму браузері і натисніть Reload, там це. 591 00:25:59,610 --> 00:26:02,360 Так що, якщо ви коли-небудь хотіли зробити маркований список, ви можете зробити це. 592 00:26:02,360 --> 00:26:06,210 Якщо ви хочете бути супер уяву і зробити упорядкований список, чи не невпорядкований список, 593 00:26:06,210 --> 00:26:10,170 змінити тих, оле, перезавантажте сторінку, і Тепер браузер налічуватиме це за вас. 594 00:26:10,170 --> 00:26:11,241 >> Що ще ми можемо зробити? 595 00:26:11,241 --> 00:26:13,990 Ну, пару others-- якщо у вас є довгі абзаци text-- 596 00:26:13,990 --> 00:26:15,698 Наприклад, деякі Латинський текст як this-- 597 00:26:15,698 --> 00:26:20,730 і ви хочете його в окремих пунктах, відкритий р, поруч р для тега абзацу. 598 00:26:20,730 --> 00:26:22,010 І робити це знову і знову. 599 00:26:22,010 --> 00:26:26,600 І якщо я зараз відкрити цей файл, paragraphs.html, добре, це 600 00:26:26,600 --> 00:26:27,570 стає дратівливим. 601 00:26:27,570 --> 00:26:34,320 Так що тепер давайте просто повернемося до моїх підкажіть, CHMOD A + R R зірку .html-- 602 00:26:34,320 --> 00:26:36,099 миленький дика карта, так сказати. 603 00:26:36,099 --> 00:26:37,890 Це повинно виправити всі ці проблеми для мене. 604 00:26:37,890 --> 00:26:38,990 Давайте перезавантажити. 605 00:26:38,990 --> 00:26:40,500 Там в три абзаци. 606 00:26:40,500 --> 00:26:42,930 >> А тепер давайте йти вперед і відкрити один інший. 607 00:26:42,930 --> 00:26:44,310 Як щодо столу? 608 00:26:44,310 --> 00:26:46,440 Ви помітите, таблиця виглядає трохи складніше. 609 00:26:46,440 --> 00:26:49,110 Але це те ж саме idea-- відкритий тег, відкритий тег, 610 00:26:49,110 --> 00:26:51,360 відкритий, відкритий, відкриття, закриття тегів, відкритий тег. 611 00:26:51,360 --> 00:26:54,410 І це відбувається стояти Таблиця, чия межа, очевидно 612 00:26:54,410 --> 00:26:58,500 буде товщина 1-- все що означає: рядок таблиці, таблиці 613 00:26:58,500 --> 00:27:00,320 Дані, які означає клітку. 614 00:27:00,320 --> 00:27:03,840 І якщо я повернуся в своєму браузері тут і піти в table.html, 615 00:27:03,840 --> 00:27:05,840 Ви можете побачити щось як це, огидний. 616 00:27:05,840 --> 00:27:07,840 Але ми повернемося до точки де ми можемо насправді 617 00:27:07,840 --> 00:27:09,260 зробити речі гарніше, ніж це. 618 00:27:09,260 --> 00:27:10,530 >> Отже, дозвольте мені передбачають зараз. 619 00:27:10,530 --> 00:27:11,870 Там в пучки з декількох тегів. 620 00:27:11,870 --> 00:27:15,225 І HTML чудово підібрати бо, чесно кажучи, все, що вам потрібно зробити, 621 00:27:15,225 --> 00:27:17,600 дивитиметься на існуючих веб-сторінок з якою ви знайомі. 622 00:27:17,600 --> 00:27:20,340 І ви, як, ну, от як вони зробили це естетично. 623 00:27:20,340 --> 00:27:23,159 >> Або ви можете подивитися будь онлайн ресурс про те, як HTML працює, 624 00:27:23,159 --> 00:27:25,700 і ви побачите, що є Вся лексика інших тегів. 625 00:27:25,700 --> 00:27:30,110 Але з простою ментальної моделі одна, що майже будь тег відкритті 626 00:27:30,110 --> 00:27:33,620 повинен бути закритий, його дійсно робить достатньо, щоб навчити себе 627 00:27:33,620 --> 00:27:36,950 HTML після зрозуміти ці основні ідеї тегів 628 00:27:36,950 --> 00:27:40,520 і атрибути і добре сформованості що ми говорили про, 629 00:27:40,520 --> 00:27:44,697 закриття все, що ми могли б відкрити так що ми не плутайте браузер. 630 00:27:44,697 --> 00:27:46,780 Так тепер давайте це більш цікавий рівень 631 00:27:46,780 --> 00:27:48,100 перейшовши в реальне. 632 00:27:48,100 --> 00:27:51,095 І підемо до мого Mac тут, на google.com. 633 00:27:51,095 --> 00:27:52,280 634 00:27:52,280 --> 00:27:54,020 А тепер notice-- давайте зробимо це. 635 00:27:54,020 --> 00:27:57,280 Я гонг, щоб перейти до Налаштування, Налаштування пошуку. 636 00:27:57,280 --> 00:28:01,070 Я хочу, щоб відключити цей прикрий момент Результати річ, де він одразу ж 637 00:28:01,070 --> 00:28:02,450 починає реагувати на вашій друку. 638 00:28:02,450 --> 00:28:05,300 Давайте зробимо цей старий школу так ми насправді бачимо, що відбувається. 639 00:28:05,300 --> 00:28:08,260 >> Так що я йду, щоб врятувати мого Налаштування тут Google. 640 00:28:08,260 --> 00:28:11,160 А тепер notice-- я збираюся шукати щось подібне кішок. 641 00:28:11,160 --> 00:28:14,500 І він як і раніше робить авто повна тут, але якщо на машині 642 00:28:14,500 --> 00:28:15,970 люди набрали в минулому. 643 00:28:15,970 --> 00:28:17,490 Але зверніть увагу, що це відбудеться. 644 00:28:17,490 --> 00:28:20,272 >> В URL на даний момент це, просто google.com. 645 00:28:20,272 --> 00:28:22,650 І технічно, це риса. 646 00:28:22,650 --> 00:28:25,910 Google просто порятунок характер і не показує нам, що. 647 00:28:25,910 --> 00:28:30,400 Вони показують нам HTTPS, просто бути супер обнадіює, що ми 648 00:28:30,400 --> 00:28:32,850 в безпечному або зашифрованої сторінці. 649 00:28:32,850 --> 00:28:35,690 >> Отже, дозвольте мені йти вперед і шукати кішок. 650 00:28:35,690 --> 00:28:37,670 Тепер це стало дійсно Переважна швидко. 651 00:28:37,670 --> 00:28:39,470 Подивіться на довжину цього URL. 652 00:28:39,470 --> 00:28:43,070 Але виявляється, що велика частина цього матеріалу в URL насправді досить марно. 653 00:28:43,070 --> 00:28:45,320 Я збираюся почати видалення речі, які я не розумію. 654 00:28:45,320 --> 00:28:46,560 655 00:28:46,560 --> 00:28:47,360 Я бачу кішок. 656 00:28:47,360 --> 00:28:48,470 Я розумію, кішок. 657 00:28:48,470 --> 00:28:50,380 Я не знаю, чому кішки там знову. 658 00:28:50,380 --> 00:28:52,620 Я дійсно не знаю, що це за дурниці. 659 00:28:52,620 --> 00:28:56,030 Так що я просто буду продовжувати виявлення і видалення матеріалу 660 00:28:56,030 --> 00:28:59,905 що я не розумію, перегонку URL в тільки в цьому. 661 00:28:59,905 --> 00:29:00,920 662 00:29:00,920 --> 00:29:02,270 >> Тепер дозвольте мені почати вводити знову. 663 00:29:02,270 --> 00:29:03,814 Схоже, Google все ще працює. 664 00:29:03,814 --> 00:29:06,980 Так чому, вони додають Багато матеріалу для їх URL-адреси за замовчуванням. 665 00:29:06,980 --> 00:29:09,000 Але це не є обов'язковим. 666 00:29:09,000 --> 00:29:10,340 Так що ж таке хороша про це? 667 00:29:10,340 --> 00:29:13,630 Ну, дозвольте мені йти вперед і відкрити інспектор в Chrome. 668 00:29:13,630 --> 00:29:15,960 Там трохи ярлик миша для неї. 669 00:29:15,960 --> 00:29:17,360 >> Перейдіть на вкладку Network. 670 00:29:17,360 --> 00:29:19,340 А тепер дозвольте мені перезавантажити цю сторінку ще раз. 671 00:29:19,340 --> 00:29:20,280 І я тримаю Shift. 672 00:29:20,280 --> 00:29:22,520 Як осторонь, браузерів як правило, кешувати або зберегти 673 00:29:22,520 --> 00:29:24,697 Інформація лише заради ефективності в. 674 00:29:24,697 --> 00:29:27,280 Але зазвичай тримає Зрушення і перевантаження змусить все 675 00:29:27,280 --> 00:29:28,994 щоб почати все з початку. 676 00:29:28,994 --> 00:29:30,410 І ось що я хочу зробити тут. 677 00:29:30,410 --> 00:29:33,550 >> І зауважте, все це Рядки, які тільки з'явилися. 678 00:29:33,550 --> 00:29:37,920 Виходить, що в будь-який момент Мережі сторінка, там може бути тільки один файл 679 00:29:37,920 --> 00:29:43,500 involved-- hello.html-- або там 52 може бути, як в даному випадку. 680 00:29:43,500 --> 00:29:45,820 Коли я відвідую google.com, мабуть, мій браузер 681 00:29:45,820 --> 00:29:49,650 стартує 52 окремих запитів HTTP. 682 00:29:49,650 --> 00:29:50,520 Чому це? 683 00:29:50,520 --> 00:29:53,380 >> Ну, подивіться на те, що всередині цієї веб-сторінці до верхньої. 684 00:29:53,380 --> 00:29:55,620 Там не тільки текст, але є фактичні зображення 685 00:29:55,620 --> 00:29:57,130 кішок більш вправо. 686 00:29:57,130 --> 00:29:59,110 Там в барвистий логотип тут зліва. 687 00:29:59,110 --> 00:30:01,750 Там всі з цих значків для мікрофона і так далі. 688 00:30:01,750 --> 00:30:05,130 Там дуже багато деталей, будівництво блоки, скретч штук, якщо хочете, 689 00:30:05,130 --> 00:30:06,250 на цій веб-сторінці. 690 00:30:06,250 --> 00:30:10,310 А що браузер робить на отримувати найпершу файл, який 691 00:30:10,310 --> 00:30:16,180 це рядок тут, це, по суті, ітерації по HTML верхньої 692 00:30:16,180 --> 00:30:19,880 вниз, зліва направо, шукаю речі, як зображення мітки або інші теги 693 00:30:19,880 --> 00:30:23,160 які згадуючи інші файли і коли він бачить їх, йде і отримує їх 694 00:30:23,160 --> 00:30:26,050 через HTTP, життєздатним цілому Метафора конверт, 695 00:30:26,050 --> 00:30:29,670 а потім відображає їх у Підходяще місце на веб-сторінці. 696 00:30:29,670 --> 00:30:33,370 >> Але зверніть увагу, тут, якщо я зупинюся на перші кидок, пошуку кішки, 697 00:30:33,370 --> 00:30:37,090 помітити, що, насправді він використовує протокол HTTP 1.1. 698 00:30:37,090 --> 00:30:41,690 І, на жаль, Google Chrome зараз в версії 39 699 00:30:41,690 --> 00:30:45,110 це свого роду нульового відповіді речей вниз і не показуючи нам фактичні заголовки. 700 00:30:45,110 --> 00:30:49,680 Але те, що було насправді послав це запит для НЕ слеш, але / пошук? д = кішки. 701 00:30:49,680 --> 00:30:52,830 702 00:30:52,830 --> 00:30:54,340 >> Тепер, чому це так важливо? 703 00:30:54,340 --> 00:30:57,110 Ну, я збираюся вивести з того, що якщо ви Google 704 00:30:57,110 --> 00:31:01,520 підтримує запити цієї форми, тому Не я реалізувати власний пошук 705 00:31:01,520 --> 00:31:06,420 Двигун для CS50, але тільки передня кінець, просто графічний інтерфейс користувача. 706 00:31:06,420 --> 00:31:09,610 І ми будемо аутсорсинг задній кінець, призводить фактичний пошук в Google. 707 00:31:09,610 --> 00:31:10,510 >> Так як я можу це зробити? 708 00:31:10,510 --> 00:31:13,820 Ну, дозвольте мені перейти в Gedit тут. 709 00:31:13,820 --> 00:31:19,180 І дозвольте мені йти вперед і відкривати до, скажімо, новий файл. 710 00:31:19,180 --> 00:31:22,280 І я йду, щоб врятувати цей тимчасово як пошуку 0.html. 711 00:31:22,280 --> 00:31:25,111 712 00:31:25,111 --> 00:31:27,860 А потім в кінці кінців, ми будемо швидко чекаю того, що я заздалегідь підготовлені. 713 00:31:27,860 --> 00:31:30,190 >> І я збираюся швидко на швидку руку типу DOC 714 00:31:30,190 --> 00:31:33,840 HTML відкритий кронштейн HTML закрита дужка HTML. 715 00:31:33,840 --> 00:31:38,390 Тоді я збираюся зробити голову близько голова відкрита назва CS50 716 00:31:38,390 --> 00:31:40,150 Пошук замість пошуку Google. 717 00:31:40,150 --> 00:31:43,480 Тут, внизу, я буду мати тіло, тут близько тіло. 718 00:31:43,480 --> 00:31:45,835 А тепер мені потрібно CS50 Пошук. 719 00:31:45,835 --> 00:31:47,710 І насправді, давайте побудувати цей поступово. 720 00:31:47,710 --> 00:31:51,043 Я збираюся йти вперед і закрити цей та насправді поклав його в загальний каталог. 721 00:31:51,043 --> 00:31:52,730 Так дайте мені тільки один момент. 722 00:31:52,730 --> 00:31:55,390 Пошук-0.html-- я збираюся тимчасово називати його search.html. 723 00:31:55,390 --> 00:31:56,600 724 00:31:56,600 --> 00:31:59,750 Я збираюся CHMOD йому + R search.html. 725 00:31:59,750 --> 00:32:01,072 726 00:32:01,072 --> 00:32:02,280 А тепер я збираюся відкрити його. 727 00:32:02,280 --> 00:32:03,224 728 00:32:03,224 --> 00:32:04,390 Гаразд, так, щоб було швидко. 729 00:32:04,390 --> 00:32:06,800 Але мета просто був щоб отримати нас до точки 730 00:32:06,800 --> 00:32:09,630 того, цей текст файл з ім'ям search.html. 731 00:32:09,630 --> 00:32:10,940 732 00:32:10,940 --> 00:32:12,790 Так що нема на що дивитися ще. 733 00:32:12,790 --> 00:32:16,970 Справді, якщо я йду в моєму браузері, і перейти до search.html, це все, що є. 734 00:32:16,970 --> 00:32:17,720 Але ви знаєте, що? 735 00:32:17,720 --> 00:32:19,000 Я можу бути трохи незвичним. 736 00:32:19,000 --> 00:32:22,710 Я прочитав у книзі, що є Тема тег називається h1. 737 00:32:22,710 --> 00:32:26,100 І я збираюся йти вперед і використовувати цю відкриту h1 і близько h1. 738 00:32:26,100 --> 00:32:27,220 Оновити сторінку. 739 00:32:27,220 --> 00:32:29,600 І тепер це більше і сміливіше, не все, що цікаво, 740 00:32:29,600 --> 00:32:32,399 але принаймні це структурно цікавішим. 741 00:32:32,399 --> 00:32:33,940 Але тепер дозвольте мені представити ще один тег. 742 00:32:33,940 --> 00:32:36,500 Виявляється є форма тега. 743 00:32:36,500 --> 00:32:38,400 І дозвольте мені закрити цю мітку. 744 00:32:38,400 --> 00:32:40,830 І виходить, що є вхід тег, 745 00:32:40,830 --> 00:32:44,600 має атрибут типу, який це тип даних поля, 746 00:32:44,600 --> 00:32:45,200 якщо ви будете. 747 00:32:45,200 --> 00:32:47,050 І буде типу тексту. 748 00:32:47,050 --> 00:32:52,200 І його значення буде бути CS50 Пошук. 749 00:32:52,200 --> 00:32:53,850 Закрити тег. 750 00:32:53,850 --> 00:32:57,100 І там відбувається, немає поняття відкриття та закриття з окремими тегами. 751 00:32:57,100 --> 00:33:00,300 >> Дозвольте мені повернутися сюди і подивитися, що відбувається, перезавантажте. 752 00:33:00,300 --> 00:33:01,380 Отримання цікаво. 753 00:33:01,380 --> 00:33:02,950 Схоже, це текстове поле. 754 00:33:02,950 --> 00:33:04,080 755 00:33:04,080 --> 00:33:06,999 І насправді, я не хочу поставити значення там ще. 756 00:33:06,999 --> 00:33:10,040 Дозвольте мені повернутися сюди і фактично отримати позбавитися від цього значення, щоб зберегти його простим. 757 00:33:10,040 --> 00:33:12,939 Замість значення, що я хотів дати цю річ було ім'я. 758 00:33:12,939 --> 00:33:15,230 І я не знаю, що це таке, так що я повернуся до цього. 759 00:33:15,230 --> 00:33:18,270 >> Але нижче, що я хочу зробити тип входу = уявити. 760 00:33:18,270 --> 00:33:19,840 761 00:33:19,840 --> 00:33:22,120 І це значення буде CS50 Пошук. 762 00:33:22,120 --> 00:33:24,850 І ми побачимо, чому я переїхав значення в цьому. 763 00:33:24,850 --> 00:33:28,900 Коли я перезавантажити, я, здається, тепер є зачатки мого власного пошуку 764 00:33:28,900 --> 00:33:30,820 Двигун, супер огидний, хоча, чесно кажучи, це 765 00:33:30,820 --> 00:33:34,260 недалеко кидок від того, що Сторінка Google, за замовчуванням виглядає. 766 00:33:34,260 --> 00:33:37,950 >> Якщо я йду сюди зараз, я можу набрати в кішки і, сподіваюся, натисніть кнопку Пошук. 767 00:33:37,950 --> 00:33:40,380 Але я не зовсім зроблено ще, бо я не реалізовані, 768 00:33:40,380 --> 00:33:41,045 Очевидно, бази даних. 769 00:33:41,045 --> 00:33:42,940 Я не лізли Веб-за результатів пошуку. 770 00:33:42,940 --> 00:33:44,840 Тому мені потрібно, щоб аутсорсинг, що в Google. 771 00:33:44,840 --> 00:33:46,290 Так як же це зробити? 772 00:33:46,290 --> 00:33:49,170 >> Ну, перш за все я потрібно додати і дії 773 00:33:49,170 --> 00:33:58,460 приписати моєї тега форми, що є http://www.google.com/search. 774 00:33:58,460 --> 00:34:01,180 І я знаю, що тільки від того, висновок, подивившись уважно 775 00:34:01,180 --> 00:34:02,505 на їх URL. 776 00:34:02,505 --> 00:34:03,380 А тепер зробити припущення. 777 00:34:03,380 --> 00:34:09,090 Що повинен це текстове поле, ймовірно, назвати, на основі якої ми прийшли 778 00:34:09,090 --> 00:34:09,754 від до? 779 00:34:09,754 --> 00:34:11,896 780 00:34:11,896 --> 00:34:13,290 >> АУДИТОРІЯ: д. 781 00:34:13,290 --> 00:34:14,370 >> DAVID J Маланій: д. 782 00:34:14,370 --> 00:34:17,800 І ми насправді не потрібно питання помітити це виходить, але д дійсно це, 783 00:34:17,800 --> 00:34:20,489 д для запиту, ймовірно, по за замовчуванням, просто тому що це 784 00:34:20,489 --> 00:34:23,060 що Ларрі і Сергій придумав років тому. 785 00:34:23,060 --> 00:34:24,739 Так що тепер дозвольте мені перезавантажити сторінку. 786 00:34:24,739 --> 00:34:26,409 Це не виглядає все, що відрізняється. 787 00:34:26,409 --> 00:34:28,120 Але тепер подивимося, що відбувається. 788 00:34:28,120 --> 00:34:32,360 >> Якщо я друкую в кішок і натисніть CS50 Пошук і відпустити, 789 00:34:32,360 --> 00:34:35,770 помітити, що я отримати збитим від фактичної Google. 790 00:34:35,770 --> 00:34:38,150 Тепер, Google в даний час трохи дратує в тому, що вони 791 00:34:38,150 --> 00:34:41,877 додавши додатковий параметр, якщо хочете, щоб в URL. 792 00:34:41,877 --> 00:34:43,960 От і все відбувається автоматично на стороні Google. 793 00:34:43,960 --> 00:34:48,730 >> Важливою частиною є те, що я, здається, щоб породили цей запит тут. 794 00:34:48,730 --> 00:34:50,179 І справді, це те, що відбувається. 795 00:34:50,179 --> 00:34:53,040 Якщо у вас є HTML, що Схоже, це, це 796 00:34:53,040 --> 00:34:57,620 є свого роду позначення веб-розробників за ці слова, йти вперед і створити форму 797 00:34:57,620 --> 00:34:59,990 що, коли він уявив, він збирається за наступною адресою. 798 00:34:59,990 --> 00:35:03,430 І коли URL надав Значення для таких речей, як д, 799 00:35:03,430 --> 00:35:05,440 не йдуть просто на цей URL. 800 00:35:05,440 --> 00:35:08,210 Насправді, перейти до питання знак, а потім д = кішки. 801 00:35:08,210 --> 00:35:09,590 802 00:35:09,590 --> 00:35:13,060 Додайте параметр, Параметр HTTP подібне. 803 00:35:13,060 --> 00:35:15,590 >> І тільки, щоб бути супер точним, що їх висновок here-- 804 00:35:15,590 --> 00:35:18,130 але я буду більш explicit-- є що метод, який я хочу використати 805 00:35:18,130 --> 00:35:22,270 це отримати, а щось на зразок Повідомлення, яке ми в кінцевому підсумку побачити. 806 00:35:22,270 --> 00:35:27,710 Коротше кажучи, просто розуміння HTML і використовуючи деякі досить прості теги, 807 00:35:27,710 --> 00:35:30,610 Тепер ми можемо приступити до створення наш власний фронт кінцевий користувач 808 00:35:30,610 --> 00:35:32,850 інтерфейс з можливістю пошуку Двигун позаду нього. 809 00:35:32,850 --> 00:35:34,800 >> Але це звичайно, досить огидний. 810 00:35:34,800 --> 00:35:37,259 Отже, дозвольте мені насправді відкрити трохи краще версія. 811 00:35:37,259 --> 00:35:39,800 Це той, який я підготував в вперед, що є деякі коментарі. 812 00:35:39,800 --> 00:35:41,900 Але ви побачите, що я в значній мірі відтворили його. 813 00:35:41,900 --> 00:35:44,150 Так що це вже доступні в Інтернеті. 814 00:35:44,150 --> 00:35:48,050 І я, трапляється, превентивно перейти до HTTPS просто тримати його просто. 815 00:35:48,050 --> 00:35:50,610 >> А тепер давайте відкриємо Наступна ітерація цього. 816 00:35:50,610 --> 00:35:52,510 Є замість версія 1 0. 817 00:35:52,510 --> 00:35:55,315 Що вистрибує на вас, як злегка відрізняється в цьому прикладі? 818 00:35:55,315 --> 00:35:59,480 819 00:35:59,480 --> 00:36:00,440 >> АУДИТОРІЯ: [нерозбірливо]. 820 00:36:00,440 --> 00:36:03,020 >> Так, є такий текст вирівняти центр. 821 00:36:03,020 --> 00:36:04,590 Це трохи дивно, тут. 822 00:36:04,590 --> 00:36:06,150 Але це дійсно нова. 823 00:36:06,150 --> 00:36:07,800 І, може бути, думаю, що це відбудеться. 824 00:36:07,800 --> 00:36:11,730 Якщо я йду в моєму браузері зараз і відвідати пошуку-1.html, 825 00:36:11,730 --> 00:36:13,090 це майже те ж саме. 826 00:36:13,090 --> 00:36:15,705 Але це крок ближче до бути трохи більш значною. 827 00:36:15,705 --> 00:36:19,150 Це ще негарно, але красивіше в тому, що принаймні, все, тепер по центру. 828 00:36:19,150 --> 00:36:23,470 >> Ось і виходить, що те, що я використовую є інша мова взагалі називається 829 00:36:23,470 --> 00:36:25,680 CSS, каскадні таблиці стилів. 830 00:36:25,680 --> 00:36:28,310 І CSS, чесно кажучи, це свого роду з, на мою особисту думку, 831 00:36:28,310 --> 00:36:29,775 жахливо розроблена мова. 832 00:36:29,775 --> 00:36:33,110 Це дуже дратує пам'ятати всі різні деталі. 833 00:36:33,110 --> 00:36:38,479 Але це те, що стилізує Вся всесвітня павутина сьогодні. 834 00:36:38,479 --> 00:36:39,270 Я образили кого. 835 00:36:39,270 --> 00:36:39,769 Добре. 836 00:36:39,769 --> 00:36:43,180 Так що давайте повернемося сюди і подивитися, як ми насправді за допомогою цього. 837 00:36:43,180 --> 00:36:45,940 І виходить, принаймні, це насправді досить проста мова. 838 00:36:45,940 --> 00:36:49,470 Це просто пар ключ-значення, властивості і значення, властивості і значення. 839 00:36:49,470 --> 00:36:52,080 Справді, тут є один таке майно і значення. 840 00:36:52,080 --> 00:36:55,890 >> Просто за допомогою стилю атрибутів на моєму тілі тега 841 00:36:55,890 --> 00:37:00,360 і надавши йому значення Слово товстої кишки і інше слово, 842 00:37:00,360 --> 00:37:03,730 або властивість і значення, Я можу вплинути на естетику 843 00:37:03,730 --> 00:37:06,210 веб-сторінки, а не обов'язково структура ще, 844 00:37:06,210 --> 00:37:07,550 але естетика нього. 845 00:37:07,550 --> 00:37:10,960 І тільки по погуглити навколо, я розумію, що листи CSS, каскадні таблиці, 846 00:37:10,960 --> 00:37:14,170 підтримує властивість вирівнювання тексту, значення якого може 847 00:37:14,170 --> 00:37:16,980 бути зліва, справа, або центр, наприклад. 848 00:37:16,980 --> 00:37:19,990 >> Так що тепер, коли я перезавантажити цю сторінку, то, що я дійсно отримував 849 00:37:19,990 --> 00:37:22,730 був центром сторінка, але все ще досить потворний. 850 00:37:22,730 --> 00:37:25,770 Давайте йти вперед і відкривати до версії 2 Пошук. 851 00:37:25,770 --> 00:37:28,570 А тепер зверніть увагу, що я зробив трохи більше. 852 00:37:28,570 --> 00:37:33,760 Зверніть увагу, що тут усередині голови Тег, може бути більше, ніж заголовку. 853 00:37:33,760 --> 00:37:35,400 Насправді, є тег стиль. 854 00:37:35,400 --> 00:37:38,630 І це, де це тільки отримує трохи брудний бачення CSS іноді. 855 00:37:38,630 --> 00:37:41,971 >> Зверніть увагу, що я, здається, є щось що структурно виглядає зовсім інакше. 856 00:37:41,971 --> 00:37:44,095 Але тут це ім'я тег Хочу стилізований. 857 00:37:44,095 --> 00:37:47,570 Ось наші старі друзі кучеряве підтяжки і закрита фігурна дужка. 858 00:37:47,570 --> 00:37:50,290 А потім тут є те, що властивість і його значення. 859 00:37:50,290 --> 00:37:56,300 >> Якщо я завантажити цей файл, search2.html, Кінцевим результатом є ідентичним. 860 00:37:56,300 --> 00:37:59,300 Але це крок у бік підвищення якості виконуваних робіт. 861 00:37:59,300 --> 00:38:04,560 Виділивши цей CSS, у мене є не змішуються його з моєї HTML. 862 00:38:04,560 --> 00:38:07,560 І справді, як ми побачимо, я міг використовувати ці властивості і значення. 863 00:38:07,560 --> 00:38:10,420 Якби я хотів зробити букети частини моєї веб-сторінці по центру, 864 00:38:10,420 --> 00:38:13,630 Я не доведеться вводити стиль = вирівнювання тексту центр повсюдно. 865 00:38:13,630 --> 00:38:16,580 Я можу поставити в одному місці можливо, хотіли нагорі. 866 00:38:16,580 --> 00:38:18,210 >> Але навіть це не найкращий дизайн. 867 00:38:18,210 --> 00:38:21,720 Насправді, одна з речей, ви дізнаєтеся, як ви проводите більше часу з 868 00:38:21,720 --> 00:38:25,730 веб-програмування є те, що чим більше ви можете модулярізуете речі і фактор речі 869 00:38:25,730 --> 00:38:30,610 як .h файлів давайте фактор речі з, подобається helpers.c Давайте фактор речі 870 00:38:30,610 --> 00:38:31,880 декілька psets тому. 871 00:38:31,880 --> 00:38:34,200 Точно так же, ми могли б хочу добитися цього. 872 00:38:34,200 --> 00:38:37,920 >> Так помітити в версії три з search.html я маю 873 00:38:37,920 --> 00:38:40,610 очищені глава сторінка і просто поставити 874 00:38:40,610 --> 00:38:43,320 в цьому, посилання тег, який всупереч назві, 875 00:38:43,320 --> 00:38:44,700 не дає вам гіперпосилання. 876 00:38:44,700 --> 00:38:49,150 Він пов'язує в інший файл шляхом HREF значення якого в даному випадку, 877 00:38:49,150 --> 00:38:51,586 є пошук-3.css 878 00:38:51,586 --> 00:38:52,960 Так що я розумію, що ми збираємося швидко. 879 00:38:52,960 --> 00:38:54,600 Але все, що я роблю це свого роду переміщення речі навколо. 880 00:38:54,600 --> 00:38:55,760 Нехай мені відкриту пошуку 3.css. 881 00:38:55,760 --> 00:38:57,114 882 00:38:57,114 --> 00:38:58,530 Там він не є, нічого дійсно до нього. 883 00:38:58,530 --> 00:39:02,270 Я просто скопіював і вставив його в новий подати, так само, як ми врахували речі з 884 00:39:02,270 --> 00:39:03,509 в інші файли перед. 885 00:39:03,509 --> 00:39:05,300 І result-- повністю underwhelming-- 886 00:39:05,300 --> 00:39:06,730 буде точно те ж саме. 887 00:39:06,730 --> 00:39:10,490 Але ми рухаємося toward-- ні, це не так. 888 00:39:10,490 --> 00:39:11,930 О, я знаю, чому. 889 00:39:11,930 --> 00:39:13,790 >> Так що, схоже, що це помилка. 890 00:39:13,790 --> 00:39:15,010 І це в якомусь сенсі. 891 00:39:15,010 --> 00:39:17,730 Але дозвольте мені відкрити свою вкладку Мережа. 892 00:39:17,730 --> 00:39:19,660 Дозвольте мені перезавантажте сторінку. 893 00:39:19,660 --> 00:39:23,315 Ах, чому CSS не застосовується? 894 00:39:23,315 --> 00:39:26,920 Добре, файл CSS, аналогічно, має щоб бути доступний усім, так сказати. 895 00:39:26,920 --> 00:39:28,440 І це теж нині заборонено. 896 00:39:28,440 --> 00:39:33,760 Отже, дозвольте мені зробити CHMOD A + R зірки точка CSS-- whoops-- 897 00:39:33,760 --> 00:39:37,067 ми точка CSS це просто Розширення файлу для файлів стилів. 898 00:39:37,067 --> 00:39:38,900 Тепер дозвольте мені повернутися до мій браузер і перезавантаження. 899 00:39:38,900 --> 00:39:40,910 ОК, трохи краще. 900 00:39:40,910 --> 00:39:42,282 >> Тепер зробимо одну річ. 901 00:39:42,282 --> 00:39:42,990 У пошуковій-4.html. 902 00:39:42,990 --> 00:39:44,550 903 00:39:44,550 --> 00:39:48,220 У мене є версія, що я просто думав, був набагато крутіше, хоча і набагато більше 904 00:39:48,220 --> 00:39:48,980 складний. 905 00:39:48,980 --> 00:39:50,690 Давайте подивимося на результат в першу чергу. 906 00:39:50,690 --> 00:39:52,290 Закрити це, щоб дати нам більше місця. 907 00:39:52,290 --> 00:39:54,275 Змініть це шукати-4, Enter. 908 00:39:54,275 --> 00:39:55,430 909 00:39:55,430 --> 00:39:57,200 >> А тепер купа речей зламані. 910 00:39:57,200 --> 00:39:59,910 Я збираюся повернутися в моєму каталозі тут. 911 00:39:59,910 --> 00:40:04,190 А тепер я просто хочу зробити CHMOD з A + R на file-- 912 00:40:04,190 --> 00:40:07,450 бо я знаю, що це exists-- називається logo.gif, який є образ. 913 00:40:07,450 --> 00:40:08,590 А тепер перезавантажити. 914 00:40:08,590 --> 00:40:11,040 І wow-- так що тепер я досить близько, чесно кажучи, 915 00:40:11,040 --> 00:40:15,860 подобатися версію Google 1999, і чесно кажучи, версія Google 2014, 916 00:40:15,860 --> 00:40:16,360 чи не так? 917 00:40:16,360 --> 00:40:21,920 >> Так що це зараз відбувається на їх сайт, в кінцевому рахунку, якщо я шукаю для кішок. 918 00:40:21,920 --> 00:40:23,900 І це дійсно так. 919 00:40:23,900 --> 00:40:26,410 Але те, що я зробив по-іншому в цій версії 4? 920 00:40:26,410 --> 00:40:28,020 Таким чином, ми не будемо надто докладно зупинятися на цьому тут. 921 00:40:28,020 --> 00:40:30,100 Ви побачите це в проблему встановити сім кінці кінців. 922 00:40:30,100 --> 00:40:31,350 Але зверніть увагу, я зробив кілька речей. 923 00:40:31,350 --> 00:40:33,690 >> Я ввів DIV тег, який є підрозділом, 924 00:40:33,690 --> 00:40:35,450 близькі за духом до пункту тега. 925 00:40:35,450 --> 00:40:38,220 Але поділ, як, ось прямокутна невидимим область 926 00:40:38,220 --> 00:40:39,150 екрану. 927 00:40:39,150 --> 00:40:41,680 Давайте дамо йому унікальний Ідентифікатор, підвал, тільки 928 00:40:41,680 --> 00:40:44,700 так що ми можемо говорити про це в нашому форматі HTML в іншому місці. 929 00:40:44,700 --> 00:40:47,952 Ось ще один DIV сторінки чий ID збирається задовольнятися. 930 00:40:47,952 --> 00:40:49,160 Це зміст сторінки. 931 00:40:49,160 --> 00:40:51,090 І тут це заголовок сторінки. 932 00:40:51,090 --> 00:40:54,960 >> Іншими словами, у мене є по суті в HTML я подумки 933 00:40:54,960 --> 00:40:57,700 дивляться цю веб-сторінку в якості Три компонента, заголовок 934 00:40:57,700 --> 00:41:01,200 тут з цією невидимою прямокутника, утримання в середині, а потім 935 00:41:01,200 --> 00:41:04,800 підвал внизу, навіть хоча ми не бачимо ці речі. 936 00:41:04,800 --> 00:41:09,940 Тому що я хочу, щоб в моїй голові сторінка тут, або в файлі .css, 937 00:41:09,940 --> 00:41:11,460 Я можу використовувати цей синтаксис. 938 00:41:11,460 --> 00:41:13,070 >> Тема не є тег. 939 00:41:13,070 --> 00:41:17,060 Це ID так виходить що, роблячи #header, 940 00:41:17,060 --> 00:41:20,840 Тепер я можу застосувати одну або декілька властивості в заголовку. 941 00:41:20,840 --> 00:41:24,130 Я можу зробити те ж саме зміст, те ж саме для утримання тут. 942 00:41:24,130 --> 00:41:27,230 >> Так, наприклад, у виносці, повідомлення всі ці властивості я додаю. 943 00:41:27,230 --> 00:41:30,660 І я знаю, що вони існують тільки на читання на документації для CSS. 944 00:41:30,660 --> 00:41:33,450 Розмір шрифта буде smaller-- тому деякі відносний розмір шрифту. 945 00:41:33,450 --> 00:41:34,741 Вага збирається бути сміливим. 946 00:41:34,741 --> 00:41:37,340 Margin-- скільки пікселів навколо it-- 20 пікселів. 947 00:41:37,340 --> 00:41:38,590 І це буде по центру. 948 00:41:38,590 --> 00:41:40,256 >> Але зараз, сторінка виглядає наступним чином. 949 00:41:40,256 --> 00:41:42,840 Якщо я не задоволений моя копія тут же, 950 00:41:42,840 --> 00:41:46,560 Я міг би зробити щось на зразок червоного кольору. 951 00:41:46,560 --> 00:41:50,570 І тоді я можу зберегти це, перезавантажте, і тепер я стилізований підвал. 952 00:41:50,570 --> 00:41:54,130 Так що це просто натякаючи на владу про те, що ви можете зробити на веб-сторінці 953 00:41:54,130 --> 00:41:55,510 щоб змінити хід подій. 954 00:41:55,510 --> 00:41:59,080 >> І навіть крутіше, ніж це, якщо ви хочете копатися з фактичними сайтів, 955 00:41:59,080 --> 00:42:00,810 Ви не можете постійно міняти їх. 956 00:42:00,810 --> 00:42:03,640 Але якщо я відкриваю Інспектор Chrome знову 957 00:42:03,640 --> 00:42:07,610 і я йду ні до лівій стороні Тут, який показує HTML на Facebook, 958 00:42:07,610 --> 00:42:11,380 але показує на правій сторона все його CSS, 959 00:42:11,380 --> 00:42:13,789 Ви можете і змінити стан речей на льоту. 960 00:42:13,789 --> 00:42:15,080 Отже, дозвольте мені йти вперед і робити це. 961 00:42:15,080 --> 00:42:18,670 >> Дозвольте мені йти вперед і управління натисніть на цю випадкового слова тут, 962 00:42:18,670 --> 00:42:21,230 підписати і натисніть Огляньте елемент. 963 00:42:21,230 --> 00:42:25,130 Chrome дуже зручно переходить до h1 тег, Facebook використовує. 964 00:42:25,130 --> 00:42:27,290 І зауважте, тут Facebook має вигляд ліниво 965 00:42:27,290 --> 00:42:29,960 жорстко розмір шрифту у власності тут. 966 00:42:29,960 --> 00:42:33,530 >> Так здорово, що хоча що якщо я насправді йти сюди 967 00:42:33,530 --> 00:42:39,560 і кажуть, о, Facebook, я не люблю, що 64 пікселів, ми можемо тепер змінити Facebook. 968 00:42:39,560 --> 00:42:42,590 Звичайно, ми тільки змінюючи його особисто для мене на даний момент. 969 00:42:42,590 --> 00:42:45,150 Але це всього лише ще інструмент в нашому наборі інструментів 970 00:42:45,150 --> 00:42:48,360 що відбувається, щоб дозволити нам налаштувати і з'ясувати, а також діагностувати 971 00:42:48,360 --> 00:42:49,729 питання в наших власних веб-сторінок. 972 00:42:49,729 --> 00:42:52,270 І ми могли б так само перейти тут, що те ж саме, що. 973 00:42:52,270 --> 00:42:55,830 Якщо ви дійсно хочете отримати фантазії, я значить, тепер ви можете дійсно мутувати сторінку 974 00:42:55,830 --> 00:42:57,380 і робити божевільні речі. 975 00:42:57,380 --> 00:42:59,870 >> Так чому все це корисно? 976 00:42:59,870 --> 00:43:02,330 Ну, зрештою, ми захоче бути 977 00:43:02,330 --> 00:43:07,110 можливість створювати веб-сторінки, що рухає нашими задніх кінців, 978 00:43:07,110 --> 00:43:10,520 не тільки Google і аутсорсинг задній кінець там. 979 00:43:10,520 --> 00:43:13,510 Ми насправді хочемо значення, наприклад, 980 00:43:13,510 --> 00:43:18,830 дії нашої пошукової системи атрибутів йти не до когось ще, 981 00:43:18,830 --> 00:43:24,270 але щось подібне search.php, де search.php на нашій власній сервері, 982 00:43:24,270 --> 00:43:25,670 нема на кого-то другого. 983 00:43:25,670 --> 00:43:30,316 >> І так, щоб потрапити туди, ми насправді потрібно ввести нову мову. 984 00:43:30,316 --> 00:43:33,190 Таким чином, ми вже дивилися на один новий Мова тут, або дві дійсно, HTML 985 00:43:33,190 --> 00:43:33,700 і CSS. 986 00:43:33,700 --> 00:43:36,330 Але вони насправді просто структурні та естетичні мови. 987 00:43:36,330 --> 00:43:38,360 Вони не програмування мови як такі. 988 00:43:38,360 --> 00:43:41,160 А от про те, як багато формального Час, як ми будемо витрачати на них. 989 00:43:41,160 --> 00:43:44,910 Тому що ми почнемо зараз до переходу на PHP. 990 00:43:44,910 --> 00:43:48,160 >> Так PHP є актуальною Мова програмування. 991 00:43:48,160 --> 00:43:50,750 Це мова сценаріїв в сенсі, що це 992 00:43:50,750 --> 00:43:52,855 значить бути легка вага чимось на зразок C, 993 00:43:52,855 --> 00:43:56,082 І це інтерпретована мова, що означає, що це не складено. 994 00:43:56,082 --> 00:43:58,790 Таким чином, в двох словах, що це значило коли ми використовували мову, як з 995 00:43:58,790 --> 00:44:00,290 і ми повинні були зібрати його? 996 00:44:00,290 --> 00:44:02,120 Що це означає для компіляції C вихідний код? 997 00:44:02,120 --> 00:44:03,864 998 00:44:03,864 --> 00:44:04,780 АУДИТОРІЯ: [нерозбірливо]. 999 00:44:04,780 --> 00:44:06,184 DAVID J Маланій: Скажи це ще раз? 1000 00:44:06,184 --> 00:44:07,100 АУДИТОРІЯ: [нерозбірливо]. 1001 00:44:07,100 --> 00:44:07,962 1002 00:44:07,962 --> 00:44:08,920 DAVID J Маланій: Прекрасно. 1003 00:44:08,920 --> 00:44:10,180 Це перетворює його в двійковому вигляді. 1004 00:44:10,180 --> 00:44:14,200 Це перетворює його в нулів та одиниць від фактичного англійська-як вихідний код. 1005 00:44:14,200 --> 00:44:16,424 І тоді ми можемо насправді запустити ці нулі й одиниці 1006 00:44:16,424 --> 00:44:18,840 пропускаючи їх через CPU, двічі клацнувши значок 1007 00:44:18,840 --> 00:44:19,980 або виконання команди. 1008 00:44:19,980 --> 00:44:23,770 >> PHP і Python і Рубі і Perl і JavaScript 1009 00:44:23,770 --> 00:44:26,250 і грона друга мови інтерпретуються 1010 00:44:26,250 --> 00:44:29,290 мови, що є Ви не компілювати їх. 1011 00:44:29,290 --> 00:44:34,220 Швидше, ви годуєте їх як внесок в Програма називається перекладача. 1012 00:44:34,220 --> 00:44:36,640 І що перекладач, які хтось написав, 1013 00:44:36,640 --> 00:44:40,930 зчитує вихідний код зверху вниз, зліва направо і тільки інтерпретує 1014 00:44:40,930 --> 00:44:43,000 ці лінії і робить те, що ви говорите. 1015 00:44:43,000 --> 00:44:45,360 >> Так що, якщо ви зіткнулися з лінія, яка говорить друк, 1016 00:44:45,360 --> 00:44:48,660 це не обов'язково конвертувати друк до відповідних нулів та одиниць. 1017 00:44:48,660 --> 00:44:51,910 Це просто є цей перекладача як великий, якщо умова, що говорить, 1018 00:44:51,910 --> 00:44:56,110 якщо інструкція програміста є друк, то зробіть наступне. 1019 00:44:56,110 --> 00:44:58,170 Так він інтерпретує його як раз по виду міркування 1020 00:44:58,170 --> 00:44:59,800 через те, що ти говориш це зробити. 1021 00:44:59,800 --> 00:45:01,320 >> І PHP є одним з цих мов. 1022 00:45:01,320 --> 00:45:05,310 І PHP років тому був розроблений саме для веб-програмування. 1023 00:45:05,310 --> 00:45:08,160 І це було спочатку дуже неакуратно брудний мову. 1024 00:45:08,160 --> 00:45:10,940 І справді, є величезний Кількість поганий код PHP там. 1025 00:45:10,940 --> 00:45:13,520 Але сама мова дозрів протягом багатьох років, 1026 00:45:13,520 --> 00:45:16,200 тож тепер це насправді чудовий наступний крок 1027 00:45:16,200 --> 00:45:19,970 педагогічно від C, тому що це так чертовски знайоме всім 1028 00:45:19,970 --> 00:45:22,380 ви тільки що бачили в останні кілька тижнів. 1029 00:45:22,380 --> 00:45:25,724 >> Той початкова різницю ми побачимо це немає основна функція більше. 1030 00:45:25,724 --> 00:45:28,890 Коли ви почнете писати код, це просто відбувається не отримати виконана ні на що, 1031 00:45:28,890 --> 00:45:30,220 як ми побачимо трохи пізніше. 1032 00:45:30,220 --> 00:45:33,320 Між тим, ось що Мінлива виглядає в PHP. 1033 00:45:33,320 --> 00:45:35,840 Це трохи різні, але тільки чуть-чуть. 1034 00:45:35,840 --> 00:45:39,380 >> В PHP, тобто не сувора типізація. 1035 00:45:39,380 --> 00:45:41,430 Там в тиждень набравши, який просто означає, що 1036 00:45:41,430 --> 00:45:44,030 типи даних, такі як рядки і номера та інші речі. 1037 00:45:44,030 --> 00:45:47,030 Але ви не турбуйтеся вказавши що вони більше. 1038 00:45:47,030 --> 00:45:48,980 PHP цифри це для вас. 1039 00:45:48,980 --> 00:45:52,030 Знак долара є тільки рішення що PHP люди зробили років 1040 00:45:52,030 --> 00:45:54,890 назад таким чином, щоб будь-яка змінна в PHP просто починає зі знаком долара. 1041 00:45:54,890 --> 00:45:58,130 Це насправді свого роду корисні тим, що він стрибає на вас трохи більше. 1042 00:45:58,130 --> 00:46:01,315 >> Але після цього, це це стан, при PHP. 1043 00:46:01,315 --> 00:46:03,140 1044 00:46:03,140 --> 00:46:04,730 Що змінилося порівняно з C? 1045 00:46:04,730 --> 00:46:07,180 1046 00:46:07,180 --> 00:46:09,600 НЕ Trick question-- нічого, який насправді дуже приємно. 1047 00:46:09,600 --> 00:46:12,140 Логічні вирази в PHP-- же. 1048 00:46:12,140 --> 00:46:19,354 Логічні вирази с і проти або, перемикачі, петлі, петлі, loops-- ОК, 1049 00:46:19,354 --> 00:46:20,270 цей відрізняється. 1050 00:46:20,270 --> 00:46:22,660 >> Ось і виходить, що є Кілька інших функцій в PHP. 1051 00:46:22,660 --> 00:46:25,243 Один з них насправді це, який чудесно зручно. 1052 00:46:25,243 --> 00:46:29,250 Якщо $ чисел є масивом, що ви заявив раніше в програмі, 1053 00:46:29,250 --> 00:46:33,350 у вас є ця фантазія для кожної конструкції що замість того, щоб робити все, що 1054 00:46:33,350 --> 00:46:37,020 дратує Я дорівнює 0, я це менше, ніж це, [? Я ++?], 1055 00:46:37,020 --> 00:46:40,320 для кожного числа як числа, де кожен цих цінностей знак долара тільки 1056 00:46:40,320 --> 00:46:42,790 змінна, а другий Ви можете думати, як І. 1057 00:46:42,790 --> 00:46:44,290 Ви могли б назвати це все, що ви хочете. 1058 00:46:44,290 --> 00:46:45,770 Я назвав його номер. 1059 00:46:45,770 --> 00:46:48,825 Це буде перебрати масив називається число. 1060 00:46:48,825 --> 00:46:51,200 І на кожній ітерації, це відбувається автоматичне оновлення 1061 00:46:51,200 --> 00:46:54,340 для вас число знак долара Змінна, так що ви постійно 1062 00:46:54,340 --> 00:46:58,210 мати доступ до змінної, яку без необхідності робити будь-які квадратна дужка 1063 00:46:58,210 --> 00:47:00,980 позначення або індексації в масиві. 1064 00:47:00,980 --> 00:47:04,950 >> Крім того, у нас навіть є такі речі, як масиви, які виглядають майже так само ,, 1065 00:47:04,950 --> 00:47:08,210 за винятком того, дуже часто, як ми будемо см, і в PHP і JavaScript 1066 00:47:08,210 --> 00:47:10,750 попередньо инициализировать масив використовуючи квадратні дужки. 1067 00:47:10,750 --> 00:47:12,040 З використовує фігурні дужки. 1068 00:47:12,040 --> 00:47:15,330 Так що це трохи відрізняється, хоча ми дійсно не використовувати цей прийом багато. 1069 00:47:15,330 --> 00:47:20,090 >> Але ще більш потужно, PHP має асоціативні масиви, 1070 00:47:20,090 --> 00:47:23,100 який є химерним способом сказати хеш-таблиці. 1071 00:47:23,100 --> 00:47:31,610 Насправді, якщо ви хочете оголосити хеш Таблиця в PHP, на відміну від C-- скільки 1072 00:47:31,610 --> 00:47:34,775 рядків коду пішло на насправді реалізувати хеш-таблицю в C? 1073 00:47:34,775 --> 00:47:38,310 Або скільки рядків коду є його приймаючи до реалізації хеш-таблицю в C? 1074 00:47:38,310 --> 00:47:39,820 Так що це, ймовірно, багато, чи не так? 1075 00:47:39,820 --> 00:47:41,680 Це кілька десятків, може бути, 100 або 200. 1076 00:47:41,680 --> 00:47:42,980 Це нетривіальна. 1077 00:47:42,980 --> 00:47:45,420 Чи він збирається бути, як Ви скоро побачите, нетривіально 1078 00:47:45,420 --> 00:47:48,080 для реалізації хеш-таблицю [Нерозбірливо], а також спробувати. 1079 00:47:48,080 --> 00:47:50,580 Але в PHP-- і, чесно кажучи, я ймовірно, не повинен сказати вам це 1080 00:47:50,580 --> 00:47:53,630 до Monday-- в PHP, якщо ви хочете стіл, зробити. 1081 00:47:53,630 --> 00:47:56,431 Це хеш table-- так з одного рядка коду. 1082 00:47:56,431 --> 00:47:56,930 І 1083 00:47:56,930 --> 00:47:58,810 >> Багато мов зробити. 1084 00:47:58,810 --> 00:48:00,190 Удачи з PSET п'ять. 1085 00:48:00,190 --> 00:48:01,980 Так багато мов цього. 1086 00:48:01,980 --> 00:48:03,050 1087 00:48:03,050 --> 00:48:06,140 Вони дають вам ці абстракції що інші люди, іншими програмістами, 1088 00:48:06,140 --> 00:48:09,870 створили для Вас, так що Ви можете стояти на своїх плечах 1089 00:48:09,870 --> 00:48:13,290 і почати використовувати ідеї, які супер переконливим, як хеш-таблиці і дерева 1090 00:48:13,290 --> 00:48:14,140 і намагається. 1091 00:48:14,140 --> 00:48:17,790 Але ви не обов'язково повинні здійснювати ці речі самостійно. 1092 00:48:17,790 --> 00:48:20,850 >> І так, в кінцевому рахунку, те, що ми збираємося використовувати PHP для 1093 00:48:20,850 --> 00:48:23,580 потенційно написанні програм з так званої командного рядка. 1094 00:48:23,580 --> 00:48:26,600 Ми могли б відтворити кожну програму ми написали в цьому семестрі досі, 1095 00:48:26,600 --> 00:48:30,410 крім, може бути, Breakout, яка використовує SPL, яка специфічна для C на даний момент. 1096 00:48:30,410 --> 00:48:33,100 Але кожен Інша проблема встановити, звичайно Маріо і Цезар 1097 00:48:33,100 --> 00:48:35,300 і Vigenere і [? Crack?] І далі, ми 1098 00:48:35,300 --> 00:48:39,520 може повторно реалізувати в PHP, і ймовірно, трохи легше. 1099 00:48:39,520 --> 00:48:43,050 >> Але що ми в кінцевому підсумку збирається використовувати PHP для це веб-програмування. 1100 00:48:43,050 --> 00:48:46,420 І ми збираємося ввести в наступному тиждень ментальна модель, парадигма називається 1101 00:48:46,420 --> 00:48:49,610 MVC, вид моделі контролера, які, якщо ви зробили програмування 1102 00:48:49,610 --> 00:48:51,610 до цього в Python або Рубі або в іншому місці, ви 1103 00:48:51,610 --> 00:48:54,112 може знаєте цієї команди з Рейки і Django тощо. 1104 00:48:54,112 --> 00:48:55,820 Але якщо ви новачок в це занадто, ви побачите 1105 00:48:55,820 --> 00:48:59,652 що це насправді дуже природно розширення факторизации 1106 00:48:59,652 --> 00:49:01,360 і начебто дизайну коду, який ми 1107 00:49:01,360 --> 00:49:04,670 робив у С. Ми збираємося зараз застосовувати деякі з цих уроків в PHP 1108 00:49:04,670 --> 00:49:07,190 так, щоб, зрештою, ми реалізації наших власних веб-сайтів. 1109 00:49:07,190 --> 00:49:09,080 І якщо ви роду загіпнотизовані або вражені 1110 00:49:09,080 --> 00:49:10,954 що ми збираємося зробити, все так швидко, 1111 00:49:10,954 --> 00:49:13,410 розумію, що майже кожен семестр, майже 90% 1112 00:49:13,410 --> 00:49:16,560 студентів CS50, в тому числі які ніколи не програмували, 1113 00:49:16,560 --> 00:49:20,329 в кінцевому підсумку зробити остаточні проекти, засновані на веб-програмування. 1114 00:49:20,329 --> 00:49:23,120 І таким чином, ви побачите, що повертається високі в найближчі тижні. 1115 00:49:23,120 --> 00:49:24,965 Таким чином, ми будемо бачити вас тоді в понеділок. 1116 00:49:24,965 --> 00:49:27,260 1117 00:49:27,260 --> 00:49:30,120 >> СПІКЕР 1: А тепер, Deep Думки по Daven Фарнем. 1118 00:49:30,120 --> 00:49:34,055 1119 00:49:34,055 --> 00:49:34,780 Хеш-таблиці. 1120 00:49:34,780 --> 00:49:37,180 1121 00:49:37,180 --> 00:49:38,402 >> [Сміх] 1122 00:49:38,402 --> 00:49:38,902