[Музика, яка грає] Аллісон Бухгольц-AU: Гаразд, все. Ласкаво просимо в розділ. Таким чином, наш порядок денний на сьогодні збирається над набагато більш веб-Dev речі. Я не знаю, скільки з Ви бачили ваші psets так як він був випущений сьогодні вранці. Я б, як, скільки люди читали специфікацію, але бачачи, як у вас було все з, як, 7:00, щоб дивитися на нього і це понеділок і Ви, напевно, був клас, Я буду вважати, що більшість з вас не мають. Якщо у вас є, додаткові престижність. Ви в основному допомагає реалізувати простий веб Сервер в C, який є новим PSET, так ви, хлопці, отримаєте бути морських свинок. Це буде весело, дикий тижня але я думаю, це буде дуже весело і це буде дійсно хороший досвід насправді. Таким чином, щоб підготувати вас до що, в розділі сьогодні, ми збираємося піти CHMOD, TCP / IP, і Потім трохи HTML і CSS. 

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

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

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

Так в основному, для зміни Ваші права доступу до файлів, Ви просто хочете використовувати CHMOD. Ви можете думати про це, як і будь-який інший UNIX називають як Ls або компакт-диска або ще багато чого. Це просто якась іншим, як виклик. 

Так ми робимо CHMOD, а потім ми будемо є три цифри типово. Є пара способів зробити це, один з яких ми обговоримо. Але, як правило, ви будете мати три цифри в діапазоні від 0 до 7 щоразу. 

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

І тоді відбувається те, кожен з них Також має місце уявлення чисел. Тому у нас є 1, 2, і 4. І в основному те, що відбувається, кожен з цих трьох чисел тут відповідає другий набір користувачів що ці права відносяться к. 

Таким чином, ви можете думати про те, що перший число відповідає фактичному користувачеві або власник файлу, друга кількість буде відповідати групі, а останній відноситься в світі, ОК? Так що ж відбувається пам'ятати ті, numbers-- R 4, W = 2, х 1, чи не так? This-- якщо ви підвести їх вгору, що дає вам, що перше число що ми могли б вхід в наш CHMOD. 

Таким чином, в цьому випадку, те, що б це число може бути? Це було б 4 плюс 2 плюс 1, яка знаходиться в 7, чи не так? І в цьому випадку, ці немає нічого, так що це прямо тут би перевести на CHMOD 700, ОК? А що, що робить це надає всі з цих дозволів у вашій користувачем. 

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

Так ще один спосіб написати що, ми можемо зробити CHMOD з трьох цифр, кожна з яких відповідає якій сумі чи що Певна група є, конкретних підмножина. Або ми можемо зробити насправді інше. Утримувати. Ми можемо щось зробити з цим тут. 

Як багато з вас бачили приклад де це було, як в Chmod плюс х? Ви бачили, що в лекції, я думаю? Так виступає за все. Це означає дати його всім користувачам, які я забув поставити тут. 

Але плюс х, якщо ми помітити тут, якщо ми робимо в chmod-- що група ми говорити про плюс дозволів ми хочемо дати їм. Так що це може бути плюс або мінус. Плюс додає дозвіл. Мінус віднімає дозвіл. Досить інтуїтивно, я думаю. 

Так плюс х означає CHMOD. Так змінити права всіх людей Якщо це A-- дозволу додати. І x-- що означає, що такий дозвіл ми надання всіх. Читати, писати, або виконати? 

АУДИТОРІЯ: Виконати. 

Аллісон Бухгольц-AU: Виконати. Таким чином, ми даємо всім користувачам дозвіл на виконання цього файлу, ОК? Так що, якщо ми хотіли зробити що з числовій формі? Так що пам'ятайте з числовим, ми хочемо три числа. 

АУДИТОРІЯ: 4. Аллісон Бухгольц-AU: Що це було? АУДИТОРІЯ: 4. Аллісон Бухгольц-AU: Чи не 4. АУДИТОРІЯ: 0, 0, 4. Аллісон Бухгольц-AU: Ну, ми хочемо дати його всім користувачам, чи не так? Таким чином, ми будемо мати число в кожному слоті. Це буде така ж кількість в кожному слоті бо ми просто хочемо дати Кожен виконувані дозволів. Так виконуваний одно 1, але на правильному шляху. 

Так що, якщо ми CHMOD 111, що б бути еквівалентом CHMOD плюс х. Чи має це сенс для всіх? Ми збираємося пройти через пара прикладів. 

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

Так з цим, ми підемо наприклад, бо я відчуваю, що приклади завжди зробити ці речі простіше для розуміння. Так rwx-- ми пройшли this-- також може бути представляти як 700. Ось приклад, який ми дивилися на більшій частині зображення. Так CHMOD 444 на деякому файлі дасть якісь дозволи? Ви були дуже близькі. АУДИТОРІЯ: Readable для всіх. Аллісон Бухгольц-AU: Readable. Так читаним для всіх, чи не так? І тоді те, що ще один спосіб зробити це? Якщо ми хочемо зробити CHMOD або з R, або ж-х, плюс і мінуси, що б що виклик виглядає? Це буде CHMOD що? 

АУДИТОРІЯ: плюс т. 

Аллісон Бухгольц-AU: плюс г на 5. ОК, так що це те ж саме, це, просто два різних перекладів про те ж. Так з цим, у нас є ці. Тому я хочу, щоб ви, хлопці, щоб спробувати написати такого роду в їх зворотному шляху. 

Так з CHMOD 555, що б це було схоже? Чи буде це плюс чи U плюс або ще багато чого? Для і плюс х, дайте мені три числа. А потім скажіть мені, про що дозволів ми насправді надання і хто? 

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

Крім того, останній з яких є хитрим. Це два chmods для останнього. Насправді, дозвольте мені закрити ці двері в той час як ви, хлопці, працюєте на що. Candy завжди необхідно в понеділок вдень. 

Отже, CHMOD 555. Що-іншому можна було б написати, що? Будь-які ідеї? Так. 

АУДИТОРІЯ: плюс RX. 

Аллісон Бухгольц-AU: г плюс RX. Ви хочете, щоб пояснити, чому він був би гх ли? 

АУДИТОРІЯ: Тому що у вас є 5, так що це 4 плюс 1, так що читав плюс виконуваний, і це для всіх. Аллісон Бухгольц-AU: справа. Так просто, щоб повторити, 5 тут ми знаємо, як сума 4 і 1, бо кожен номер в нашій тріо сума дозволів на цій підгрупі, чи не так? Або користувач, група, або мир. Таким чином, в даному випадку, ми знаємо, що 5 повинен бути сформований 4 і 1. 

І 4 і 1 відповідають читання і виконання. Ми даємо його всім, так що ми можемо зробити CHMOD плюс RX. І очевидно, що ми просто пішли через питання там, так що тепер цей файл є виконуваним і читаним для всіх. 

Так що про другий? Що може кількість для цього одного буде? Будь-які ідеї? Продовжуй. 

АУДИТОРІЯ: 100 [нерозбірливо]. 

Аллісон Бухгольц-AU: 100. Точно. Так що ви хочете пояснити, чому 100? АУДИТОРІЯ: Тому що це для Користувач, таким чином, це в першу позицію. І тоді х виконуваного 1. Аллісон Бухгольц-AU: Абсолютно вірно. Таким чином, ми наданні виконуваний Дозволи просто користувачем. Таким чином, в цьому випадку, це буде 100. І у мене є відповіді на всі питання на наступному слайді в разі Ви пишете багато речей вниз. 

ОК, так що це наступний фактично зроблено з двома chmods, ви могли б зробити це. Так хто-небудь є будь-яка ідея, як можна отримати CHMOD 640 переписані по-іншому? Ви можете змінити користувача, а потім Ви можете змінити група моя натяк. 

Так що, якщо ми просто міняється Користувач, який цього перший тут, що може наш заклик бути? Так користувач і, чи не так? Так CHMOD U плюс те, що? Mmhmm? 

АУДИТОРІЯ: RW. Аллісон Бухгольц-AU: RW. Право, для читання і запису, тому що читання 4, W = 2, тим, сума разом, як 6. Таким чином, ми отримуємо CHMOD у плюс RW, і ми отримуємо наш перший 6 там. 

Отже, щоб отримати 4, тепер ми хочемо, змінити наші параметри групи. Так що ми збираємося робити CHMOD г плюс що? Що 4? 

АУДИТОРІЯ: м Аллісон Бухгольц-AU: м Точно. Таким чином, ми даємо власнику читати і писати дозволів і ми даємо групі Розпізнати Дозволи, які у нас є всі тут. Mmhmm? 

АУДИТОРІЯ: Якщо ви можете написати щось, це означає, ви можете запустити його? 

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

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

Для будь-якого НЕ-PHP-файл, який ви збираєтеся використовувати 644, який буде робити те, що? Що це означає, або те, що Дозволи чи дає це? Так власник може які? АУДИТОРІЯ: Читання і запис. Аллісон Бухгольц-AU: Читання і запис. А потім група та інші може просто читати, чи не так? А потім CHMOD 600 для будь-якого PHP файли, які ви використовуєте, Ваш господар, знову ж таки, може читати і писати до них але всі інші тільки почасти перекриті. 

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

Так що тепер, це все добре з CHMOD? Будь-які зберігаються питання? Досить просто. Просто вид відстеження того, що читати, писати і виконувати цифри Ймовірно, найскладніша частина. 

Так з TCP / IP, всі ці протоколи, ніби як зі своїми структурами даних минулого тижня, це набагато більше, Важливо отримати вид більш високий рівень інтуїції з них. Це не CS143, куди ми йдемо попросити вас реалізувати мережу, так вам буде добре, якщо ви не розумієте, вошивий піщаний з усіх протоколів. Що важливо зрозуміти, ніби як те, що вони представляють і чому вони важливі. 

Так TCP / IP, звичайно, це Протокол управління передачею або інтернет-протоколу, який є в основному просто набір законів в основному або стандартів, які говорять дані як з ним слід звертатися, як це має бути пакетізірован, передаватися, і отримав. Так що в принципі, так само, як це говорить тут, збільшує шанси що дані отримує, де Ви хочете, щоб дістатися до. 

Я впевнений, що, якщо ви, хлопці, пішли Лекція або спостерігав його в Інтернеті, він has-- я не знаю якщо він зробив це в цьому році, але я знаю, в минулому році, він був демо, де він був зображений Робом і він розбити його на чотири і поклав його в конвертах і намагався донести його до людей Сандерс. І ви можете роду думати про це таким чином. Це просто набір правил, розповісти дані, як отримати де- і дозволяє дізнатися, якщо вам не вистачає даних, таким же чином, що, якщо ви приймаючи кілька сторінок заміток і ви маркувати їх з стр 104, стр 204, і ви повернетеся до вивчення пізніше і вам не вистачає something-- Ви не можете знайти сторінку 304-- ви знаєте щось не так, тому вам можете подивитися ваші замітки знову або попросити когось надіслати вас Лекція відзначає цей день. Так само, як з даними в Інтернеті. Якщо я прошу щось з якогось сервера і йому необхідно буде відправити це в кілька пакетів, ймовірно, буде номером це в якійсь мірі, нехай мені знати, скільки я мав отримати, і скажіть мені, о, це один з 10 або це одна з 10000. Таким чином, коли я йду, щоб зібрати всі частини разом, Я знаю, якщо щось не вистачає і я можу попросити що знову. Чи має це сенс? Просто це набір правил. На його основі, набір правил, ОК? 

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

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

Таким чином, ми маємо тут, 21 файлів Протокол передачі, так що просто правила, що визначають передачу файлів. 25, щось, що ми всі використовувати занадто багато, це електронна пошта. 53 це доменне ім'я Система, яка є в основному просто свого роду пошуку для IP-адреса доменного імені. 

Так що я впевнений, що це було згадується в лекції, якщо вас перейти до чогось на зразок google.com, він має IP-адресу який пов'язаний з ним. Це насправді не google.com. І так 53 це порт що насправді відбувається догляд за виду переводячи його в цьому IP-адреса для вас. А потім 80 і 443 дуже поширені. Ви повинні або веб-сторінки або у вас є свій безпечний веб-сторінку, який багато веб-сторінок передачі по сей день. 

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

Так на кінець цього, ми говорити про веб-сторінок і HTTP, що насправді наша наступна тема для сьогодні, перш ніж іти в HTML і CSS і ви можете кодувати веб-сторінку. Це буде весело. Доведеться фотографії кролики і це буде здорово. 

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

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

Так що в цьому випадку тут, це гіпертекст. Це говорить нам про те, що у нас є якийсь зв'язок, що ми збираємося, який cs50.net, які Тепер cs50.harvard.edu. Ці слайди трохи старі. І це буде відображатися це, як це, як гіперпосилання, а потім дійсно класний сайт. 

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

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

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

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

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

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

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

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

Це те, що клієнт або те, що веб-браузер посилатиме на сервер. Так що це запит Get, так що просячи щось від сервера. І це, звичайно, HTTP і це версія 1.1. 

Так як інша частина це ось те, що ми називаємо Заголовок, і його додаткова інформація що дає нам краще уявлення про те, те, що ми насправді просять, або інформація, які ми хочемо дати сервер, який може мати відношення. Так User-Agent дає ще трохи Опис on-- наприклад, тут, локон / 7.24.0 насправді відбувається, щоб сказати сервер, що ми використовуємо Google Chrome, як наш браузер. Так що, якщо ви коли-небудь чули о люди, які кажуть про те, щоб додаток реагує в декількох браузерах, це те, що вони буде використовувати, тому що, якщо ви Не знаю, який браузер запит приходить від, Ви не можете пристосувати дані, що. Так, в даному випадку, користувач просто дає цей вид ідентифікуючої інформації про те, що браузер Ваш користувач в даний час з використанням, ОК? 

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

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

Так само, що має сенс для всіх? Це просто приклад того, Запит, заголовки, ще багато чого. Отже, з цим, у нас є деякі відповідь. 

Знову ж, у нас є код стану, протокол версія, а потім ім'я поля і поля цінуєте як завжди. Так наш версії протоколу і наш код стану 200. Добре, що означає, що, да, все пройшло добре. Ось те, що ви хочете. 

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

І наскільки цей статус Код тут, звичайно, 200 є не єдиним Ви могли б, чи не так? У нас є багато кодів стану. Хтось пам'ятає будь-який з інші, що ми, згадані в лекції? Багато з них починають з 4. 

АУДИТОРІЯ: 404. 

Аллісон Бухгольц-AU: 404, який є? 

АУДИТОРІЯ: Файл не знайдено? 

Аллісон Бухгольц-AU: Файл не знайдено. Точно. Так що про 403? АУДИТОРІЯ: Заборонене. Аллісон Бухгольц-AU: Заборонене. Так що ви думаєте що означає з chmods? 

АУДИТОРІЯ: Це означає, що вам немає дозволу, щоб прочитати його. 

Аллісон Бухгольц-AU: Абсолютно вірно. В якійсь мірі, вам не доведеться Дозвіл на доступ до нього, чи не так? Так 404, 403. Там справді смішно той, який ми завжди ввести з кожним роком, що Я повинен був покласти тут, як 413, який є, я чайник. Ви можете Google це. Це забавно, як, що це код 413, і це я чайник. Який я не знаю, чому ви б коли-небудь знадобиться, що в Інтернеті, але я відволікся. АУДИТОРІЯ: Може бути, ви чай горщик. Аллісон Бухгольц-AU: Може бути, сервер чайник. Хто знає? Гаразд, так що ми збираємося перехід в реальному кодування. Я відчуваю, що ви, хлопці, збираєтеся вибратися звідси досить швидко. 

АУДИТОРІЯ: Чому його сказати "сервер: двічі? 

Аллісон Бухгольц-AU: Хм? Сервер двічі? Це хороше запитання. Я не впевнений. Я дізнаюся і Я вам по електронній пошті все. 

ОК, будь-які інші питання, окрім цього? Добре? Прохолодний. 

HTML і CSS, і тепер ми дістатися до всіх цікавих деталей. Так як я вже казав, HTML Ймовірно, це одна з речей, Ви, хлопці, найкраще знайомі с. Тому у нас є мова розмітки гіпертексту. 

Кращий спосіб дізнатися this-- я не є підготовлені слайди або нічого для вас, хлопці з HTML. Це дійсно про вивчення синтаксису. І якщо ви були в MySpace день, вам доведеться це вниз. 

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

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

Google, звідси на з, ймовірно, буде один з ваших кращих ресурсів і друзів. Або Bing-- я працюю в Microsoft, так що, можливо, я повинен сказати, Bing. Але майже все, що просто буде синтаксис, так що розуміння того, що мітки, understanding-- принаймні, з CSS-- як змінити деякі атрибути. Це буде супер корисно. 

Таким чином, навіть при тому, що ми робимо не є якісь готові речі, у нас є свого роду деяких кращих практик що ми хочемо, щоб ви, хлопці, щоб спробувати дотримуватися по-- вірніше, ви повинні не дотримуватися до подальшого повідомлення. Так закрити всі теги. Сподіваюся, кожен has-- ви знаєте, що, якщо це не має сенсу зараз, Я обіцяю, що це буде мати сенс коли ми кодування відкрити сторінку. Але закрити всі теги. Так що, якщо ви коли-небудь деякі Тема ось кронштейн, H1, кронштейн, переконайтеся, що всякий раз, коли ви закінчите з цим, закрити цей заголовок. Підтвердити сторінку з W3 Валідатор. Якщо ви не закриєте свої мітки, Ви можете отримати несподівану поведінку. Це буде сказати, що ваша сторінка є недійсним якщо ви запустите його через цей валідатор. Тому, коли в doubt-- і особливо на цьому тижні і на наступному тижні pset-- таким же чином, що ми запитуємо використовувати перевірити 50 і стиль 50, Ви могли б думати про це як один з ваших чеків, ОК? 

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

А потім одна остання річ це ви хочете, щоб відокремити розмітка, яка це все, що HTML або текст, і ваш стиль. Так ми зробимо приклад цього права після цього. Так HTML і CSS повинні бути розділені. І ми збираємося говорити про MVC, який є Model View Controller, Наступний тиждень. Ви, хлопці, повинні, ймовірно, дізнатися про те, що в лекції завтра, якщо у вас вже впізнав його сьогодні. 

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

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

А потім дві основні речі, щоб знати, що selectors-- два головному factors-- є ID, який є унікальним. Ви можете використовувати тільки те, що, з одного боку. В іншому випадку, це буде кричати на вас. І коли ми визначаємо його в файлі CSS, це буде бути хеш-ID, а потім які атрибути ми хочемо. Я обіцяю, що ми збираємося пройти прикладу. Це зробить набагато більше сенсу. 

Клас може відноситися до декількох блокам. Таким чином, ви можете мати свій Перший і третій пункт є такий же атрибути, коли Ви зв'язати їх з того ж класу. І коли ми визначаємо їх в CSS, ми робимо клас точка, з класом бути все, що Ви хочете, щоб називати його імені. 

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

АУДИТОРІЯ: Коли ви говорите теги матч, Ви маєте на увазі селектори або теги? Аллісон Бухгольц-AU: Ви можете думати про них як одне і те ж. Це просто різні слова. Я маю на увазі, як селекторів. Але селектори також карту з тегами. Таким чином, ви можете думати про них як ефективно й те саме. Я обіцяю, що це збирається зробити більше сенсу, коли ми кодувати. Все, починаючи від PowerPoint або які-небудь питання Зараз до цього ми насправді створити сторінку нашої секції в? Всі готові? Прохолодний. 

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

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

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

Таким чином, в даному випадку, давайте змінимо це. Ми збираємося мати розділ сім. "Розділ сторінки в мережі Інтернет». Так що я просто хочу, щоб це змінити. 

І якщо ми йдемо сюди, і ми reload-- Повинен зберегти і reload-- ми помічаємо, що тут він змінив, чи не так? Прохолодний. Так що це змінює назву. Це які б у тебе на вкладці. 

Так що це свого роду дивлячись нудно. Я не знаю, про хлопців. Я думаю, що ми хочемо щось ще тут. 

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

АУДИТОРІЯ: [нерозбірливо]. Аллісон Бухгольц-AU: Ах. Ви, хлопці отримали мене. Відмінна робота. Золота зірка. 

Отже, у нас є деякий тіло тут. А тепер давайте почнемо додавати текст. Так у вас є пара відрізняється способи введення тексту. У нас є такі речі, як заголовки. У нас є тільки звичайний текст. Так що давайте просто почнемо з заголовка. Насправді, якщо ви, хлопці, хочете щоб підтягти W3 школи HTML, Ви можете почасти подивитися навколо і якщо є що-небудь Особливо, що ви хочете спробувати з цією веб-сторінці, ми можемо зробити це. Таким чином, в даному випадку, давайте просто робити деякі h1. Так як H1 є найвищою заголовку. Це дасть вам щось що є дуже великим і жирним шрифтом. 

І в цьому випадку, те, що ми хочемо в перший текст на нашому сайті? Все що завгодно. Ви, хлопці, збираєтеся створити цей. Я просто хочу, щоб надрукувати. АУДИТОРІЯ: Прошу. 

Аллісон Бухгольц-AU: Прошу. Отже, якщо ми зберегти його, і ми перезарядити, у нас є відмінний великий прийом. Так, тільки так можна побачити відмінності, давайте щось робити на H6. Що ми хочемо тут? Чи не так? 

ОК, так що просто так ви можете побачити різницю. Так, Sublime. Так що, якщо ви помітили, h1, дуже, дуже велика. h6, як сміливий, але набагато менше ,, і у вас все в між. Таким чином, ви могли б H2, H3, H4. І це тільки заголовки, так що якщо ви намагаєтеся створити веб-сторінку, яка є різні секції, може бути, ви хочете використовувати Заголовки в десь там. 

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

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

Отже, ми збираємося, щоб подивитися наш імідж. Подивіться на це. Подивіться на цю чарівні речі. Як ти міг бути сумним в понеділок з цим? 

Так ми тільки збираємося скопіювати URL зображення. І те, що ми хочемо зробити, це, давайте просто у нас є деякі р для пункту. Ми збираємося сказати "Подивіться подивитися на милий зайчик. d'Awwww. " Я люблю своїх зайчиків. У мене є кролик будинку. Я сумую за своєю кролика. Так що ми збираємося do-- Я не знаю, якщо ви, хлопці, хочете в Google this-- але з HTML, як Ви могли б включати в себе зображення? Буквально, якщо ви Google "Включають зображення HTML," Чому б вам не хлопці кажуть мені що цей тег повинен бути? 

АУДИТОРІЯ: IMG source-- 

Аллісон Бухгольц-AU: IMG source-- АУДИТОРІЯ: --equals-- Аллісон Бухгольц-AU: --equals-- АУДИТОРІЯ: --quote-- да. Аллісон Бухгольц-AU: Прекрасно. Прекрасний. Дивіться, покоління MySpace, чи не так? Аудиторія: Neopets. Аллісон Бухгольц-AU: Neopets. О, добре. Вау. Це був божевільний. Добре. 

Тому переконайтеся, що я отримую це право. Прохолодний. Таким чином, це має бути тут. І потім, якщо ми перезавантажити, у нас є кролика на сторінці Хіба це не чудово? 

Це так мило. Ви вибрали відмінний, великий фото. Я копати його. 

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

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

АУДИТОРІЯ: Що таке rabbit.org? 

Аллісон Бухгольц-AU: rabbit.org. Це appropriate-- дивитися, ви можете прийняти його. Прийняття. bunny.jpg. Я хочу, щоб прийняти цей кролик. О, Боже, це так мило. 

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

І ми говоримо, "це ще один пункт." Крім того, я жахливо орфографії, так що я, можливо, опечатки речі. Просто FYI. 

Тому у нас є ще один пункт тут, чи не так? Так, може бути, ви хочете щось зробити трохи більш цікавим, ніж просто є всі ваші тексти, як правильно вирівняний. Може бути, ви хочете, щоб зосередити свій текст, ОК? 

Так що, якщо хтось хоче використати ті зручні комп'ютери перед вами і скажіть мені, як ти збирається до центру цей текст, 

АУДИТОРІЯ: р вирівняти. 

Аллісон Бухгольц-AU: Так р вирівнювання одно "центр". Він вбиває його, хлопці. Y'all потрібно активізувати. І у нас є "Це центру." А тепер ми щось по центру. 

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

АУДИТОРІЯ: Еллісон? До джерела зображення, тому не є є близько від джерела зображення? Аллісон Бухгольц-AU: Вибачте. Це має бути одним там тепер ви добре. Тепер ми добре. АУДИТОРІЯ: У вас немає щоб закрити його там, чи ні? Аллісон Бухгольц-AU: Ну, так IMG Джерело, на цей раз просто-- із зображенням, це тільки що бачили, як один з елементів, в той час як якщо ви помітили на всю їх, у нас є деякі тег потім інформація, що вона відноситься до, а потім закриває тега. Але з зображення, все в тільки вид самодостатнім. Прохолодний. Так ви, хлопці, знаєте, як створити Заголовок, ви знаєте, як вводити текст, Ви знаєте, як розмістити зображення в даний час, можна вирівняти речі. 

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

Так що, якщо ми хотіли створити деякі Список, як ми могли б це зробити? Ви не можете відповісти на цей раз. Хтось ще має. Це не важко, хлопці, обіцяю. Google "невпорядкований список HTML." Що це було? 

АУДИТОРІЯ: [нерозбірливо]. Аллісон Бухгольц-AU: справа. Так що ми хочемо замовити або невпорядкований? Давайте зробимо це невпорядковане. Таким чином, ми маємо деяку UL, який виступає за невпорядкованими списками. І що ж ми маємо для кожного елемента? Чи має він необхідний свій тег? Чи можемо ми просто почати писати речі? 

АУДИТОРІЯ: літій. 

Аллісон Бухгольц-AU: літій. Так що наш список буде? Що ми хочемо тут? Ми просто робимо імена. Просто робити Якова. 

АУДИТОРІЯ: Кролик продукти. 

Аллісон Бухгольц-AU: Кролик продукти. ОК, я хотів цього. Кролик продукти. 

Отже, у нас є морква. Мені подобається ця кролика тему. Я копати це багато. АУДИТОРІЯ: Насправді, я думав, що Яків буде нормально. Аллісон Бухгольц-AU: Яків? Джейкоб кролика їжі. Якщо ви побачили Якова Фото з офісних годин, Ви, можливо, думали, що він отримав напав вбивця кролика. 

АУДИТОРІЯ: у мене є кролик зараз. У мене є вбивця кролика зараз. 

Аллісон Бухгольц-AU: Ти знущаєшся з мене? 

АУДИТОРІЯ: Я принесу його в наступному розділі. У мене є його. 

Аллісон Бухгольц-AU: Це смішно. Так чи інакше. 

АУДИТОРІЯ: [нерозбірливо] 

АУДИТОРІЯ: Так, мій супроводжуючий є кролика, а також. 

Аллісон Бухгольц-AU: Я хочу кролика. Добре, хто приносить реальну кролика до Наступний розділ, загальна кількість очок будинкового. АУДИТОРІЯ: [нерозбірливо] АУДИТОРІЯ: О, це не реально. Це опудало кролика. 

Аллісон Бухгольц-AU: О да, ми можемо закрити ці. Виглядає радий. АУДИТОРІЯ: Чи означає це насправді має значення? Аллісон Бухгольц-AU: Це не так. З більшістю з цих речей, Ви не закрити тег, 99% часу нічого поганого відбувається щоб це відбулося, але це хороший стиль, занадто. Так Якова. І у нас є салат. АУДИТОРІЯ: Для посилання, це дійсно важливо. Аллісон Бухгольц-AU: Хм? АУДИТОРІЯ: Для гіперпосилань. Аллісон Бухгольц-AU: Для гіперпосилань. Так, гіперпосилання потрібно. Отже, давайте подивимося, тут. І у нас є закриття нашому списку. І ми дивимося на що. Ми all-- Якова, прямо там. Кролик їжі. Нагадує мені про Bunnicula. 

АУДИТОРІЯ: [нерозбірливо] Аллісон Бухгольц-AU: Я несу назад всі сьогодні посилання старі шкільні, чи не так? Просто всі старі шкільні посилання. Якщо принесли як Gogurts або щось для закуски. 

АУДИТОРІЯ: Або фонтанує свердловини. Аллісон Бухгольц-AU: О. Добре. Я буду бачити, якщо я можу відслідковувати вниз фонтанів на наступний тиждень. Я думаю, що я можу це зробити. Я думаю, що ми, можливо, деякі в офісі. 

Отже, ми розглянули багато різних речі, які можна зробити з HTML, вірно? І, як ви, ймовірно, може бачити, що це nothing--, сподіваюся, не надто intim-- якщо це так, я не маю на увазі принизити нікого. Якщо у вас виникли проблеми, будь ласка, приходьте поговорити зі мною. 

Але більшість це просто дивлячись на синтаксис, чи не так? Якщо ви хочете невпорядкований список, якщо ви хочете якийсь список, якщо ви хочете, щоб вирівняти щось або Формат-то, це все про просто вид дивлячись Синтаксис HTML, вірно? І одна річ, яка досить прохолодно фактично це якщо ви йдете to-- давайте подивимося, що хороший сайт, який нам подобається? Будь, є які-небудь улюблені веб-сайти що все в порядку, щоб викликати на сайті? Ви знаєте, що, давайте просто робити CS50. Це хороший і безпечний, чи не так? 

Отже, CS50 тут. О, дивіться, є розділ прямо зараз. Якщо Вам подобається, як він виглядає. 

АУДИТОРІЯ: [нерозбірливо]. Аллісон Бухгольц-AU: Ми не збираюся зробити мета розділ, хлопці. Це не відбувається. Було б здорово, але ми не збираємося це робити. 

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

І буквально, доти, як ви привести речі, доти, поки ви не просто крадіжка з людей, це нормально. Спеціально для CS50 [? фінансування?], ми вид чекає вас, щоб отримати натхнення від інших веб-сайтах. Так що не соромтеся. Подивіться через веб-сайти, які Ви думаєте, дійсно досить і з'ясувати, як вони використовують HTML і CSS, щоб зробити ці речі. 

Отже, як ви бачите тут, є, очевидно, як посилання і у нас є клас тут. У нас є посилання тут. У нас є список. Ми, ймовірно, деякі Фотографії в десь тут. 

У нас є якийсь класний стиль тут. Це наступна річ ми збираємося зробити. Так стиль, коли ви бачите ці стиль дужки, це CSS в основному. Бен, ти є питання? 

АУДИТОРІЯ: Що таке DIV? 

Аллісон Бухгольц-AU: DIV просто A-- що DIV? АУДИТОРІЯ: Відділ. Аллісон Бухгольц-AU: Відділ. Так, це так само, як розділення різних елементів. Отже, ось що ми збираюся йти в наступний. Так що це не може бути кращим стиль, тому що, якщо ви помітили, у нас є HTML і стиль в тій же сторінці, і ми насправді хочемо, щоб відокремити тих ,, Добре? І насправді, нехай мене відкрити свій правильний так як це, як передбачається, PDF, так що ми повинні style.css. 

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

АУДИТОРІЯ: І це все, CSS і HTML? 

Аллісон Бухгольц-AU: Все CSS і HTML. Так. Таким чином, ви можете зробити багато дійсно класні речі з CSS і HTML. Так що з нашою дивовижним кролик веб-сторінка тут, ми збираються зробити трохи Трохи таблиць стилів з нею. 

Так що, якщо ви коли-небудь стиль лист, який ми маємо тут, Ви можете просто подзвонити style.css. Ви можете назвати це, що ви хочете. Важливо те, що ми збираємося щоб посилатися на нього в нашій web.html тут. 

Так що ми збираємося зробити, це we-- так що я не безлад цей up-- ми збираємося пов'язати ці два файли разом. Таким чином, в одній і тій же way-- я збираюся провести аналогію з C тут. Таким же чином, що, якщо ви маєте деякі library-- і у нас є cs50.h-- наш компілятор пов'язує його. Це просто явне посилання з нашого боку. Таким чином, в одній і тій же способом, що ми робимо Хеш включати якийсь файл, то, що Я збираюся написати просто HTML / CSS еквівалент, що. 

Ми просто говорю, добре, цю веб-сторінку збирається використовувати цю таблицю стилів, ОК? Тому у нас є посилання отн рівну стилів. А то у нас типу, CSS. А потім HREF одно. 

Добре. Так що все це зробив тут ви можете думати про це як одне і те ж як хеш включають. Очевидно, що це виглядає трохи більш складніше, але у всіх випадках, це фактично те ж саме, що. Так що це лише деякі зв'язування стилів, це типу текстового / CSS, і ім'я йому це style.css. 

Що важливо знати в тому, що веб-сторінки що я працюю прямо now-- web.html і style.css-- знаходяться в тій же папці. Тому що в різних папках, Ви повинні дати фактичну корінь щоб він або шлях до нього. Але в даному випадку, ми тримаємо його супер просто, і це буде тут. Так що, якщо ми це зробимо, у мене є деякі речі вже стояли в черзі тут. 

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

АУДИТОРІЯ: ID. 

Аллісон Бухгольц-AU: ID. Прохолодний. Так що ми хочемо зробити, це який з цих шрифтів або which-- ми хочемо "Подивіться на милий зайчик "буде фіолетовий? Я думаю, що ми хочемо, щоб бути фіолетовий. Я досить вниз с, що, будучи фіолетовий. 

Так що ви робите це ви робите ID equals-- в цьому випадку Я сказав, що, симпатичний колір тут. Ми перезавантажити. Раптом, це фіолетовий. Отже, з ID, пам'ятаю він повинен бути унікальним, так що я ніколи не повинно бути за допомогою це ID ніде. Але з класу, як у нас тут з симпатичною шрифтом, Я повинен бути в змозі використати що завгодно, я хочу. 

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

І дивитися на це. Тепер це в фіолетовий і це досить шрифту. Отже, у вас є всі ці різні речі, які можна зробити. У вас є питання? 

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

Отже, очевидно, що ми можемо бачити ми може щось змінити, однак ми хочемо. Якщо ви хотіли create-- скажімо ми хотіли створити ще один клас. Що може ви, хлопці, хочете змінити? Якщо ви зупиняєтеся W3Schools ' CSS документації, Я залишаю слово до вас, хлопці. Ми можемо спробувати зробити щось прохолодне з це в останні пару хвилин. Тому що я начебто дав вам Crash Course на багато класних речей що ви можете зробити. Але, зрештою, як я вже сказав, якщо вас просто експеримент, ви дізнаєтеся багато. 

АУДИТОРІЯ: А ви подивіться на цей шрифт? 

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

АУДИТОРІЯ: Так ви повинні переконатися, що CSS знає, що цей шрифт. 

Аллісон Бухгольц-AU: Так. 

АУДИТОРІЯ: Що це сказати в кінці? Курсив? 

Аллісон Бухгольц-AU: Курсив. Так. 

АУДИТОРІЯ: Фонове зображення. 

Аллісон Бухгольц-AU: Фонове зображення. Добре. Отже, ви хочете сказати мені, як це зробити. Я залишаю це вам. Я просто набравши тут зараз. Колесо знаходиться у ваших руках. 

АУДИТОРІЯ: ОК 

Аллісон Бухгольц-AU: ОК. Що я роблю? 

АУДИТОРІЯ: Doing-- Я знаю, що приходить після фігурної дужки. Аллісон Бухгольц-AU: ОК. Так, ймовірно, в тілі, я було б припустити, тому що ми робити з фоновим зображенням. 

АУДИТОРІЯ: Так, давайте зробимо це. 

Аллісон Бухгольц-AU: ОК. АУДИТОРІЯ: ОК, так фон товстої кишки, і тоді ми потрібен URL-адресу цього зображення. Може бути, псевдо-код, що на даний момент, можливо. 

Аллісон Бухгольц-AU: Що Ви б хотіли мене to-- Аудиторія: Я маю на увазі, як GIF. Аллісон Бухгольц-AU: GIF? Це буде цікаво. Добре, що я вдаючись до допомоги тут? 

АУДИТОРІЯ: Ні, це ваш вибір. 

Аллісон Бухгольц-AU: Чому НЕ we-- якщо це кролик, Я відчуваю, що ми повинні мати хороший трав'яний газон або щось. 

АУДИТОРІЯ: Луг. Луг. 

Аллісон Бухгольц-AU: луг? Добре. АУДИТОРІЯ: Або Рейчел Меддоу. Аллісон Бухгольц-AU: Це виглядає досить. О, це маленький, хоча. Нам потрібен хороший розмір. Подивимося. О, дивіться. Це досить луг. Ви знаєте, що, мені подобається цей. Давайте скопіювати цей. 

АУДИТОРІЯ: ОК, так що я думаю, що це URL, відкриті дужки. 

Аллісон Бухгольц-AU: ОК, URL. 

АУДИТОРІЯ: Тоді адресу. 

Аллісон Бухгольц-AU: ОК. Це все, що нам потрібно? 

АУДИТОРІЯ: закрити дужки крапка з комою, а потім простір, тло дефіс Кріплення товстої кишки фіксується, і фігурна дужка. 

Аллісон Бухгольц-AU: ОК. Давайте подивимося, що працює. Це буде здорово, якщо він робить. Я реальний раді тут. Це не спрацювало. Цікаво, чому. АУДИТОРІЯ: Може URL повинен бути в лапках. Аллісон Бухгольц-AU: Може бути. І це, як ми дізнаємося, хлопці. 

АУДИТОРІЯ: Чи можемо ми мати фон колір і фон зображення? 

АУДИТОРІЯ: Ні. Один замінює інший. 

Аллісон Бухгольц-AU: Я не знаю. Подивимося. Давайте перевіримо його і подивитися. 

АУДИТОРІЯ: Ну, може бути, так. [Вставляючи ГОЛОСУ] 

Аллісон Бухгольц-AU: ОК, це obviously-- я [нерозбірливо] тут. Так ОК. АУДИТОРІЯ: прихильність фону. Аллісон Бухгольц-AU: Ах. 

АУДИТОРІЯ: ОК, я не знаю. Аллісон Бухгольц-AU: Це Схоже, він повинен працювати. Ви впевнені, що це двокрапка після URL? 

АУДИТОРІЯ: Ні, це крапка з комою. Аллісон Бухгольц-AU: Це точка з коми. АУДИТОРІЯ: Я казав, двокрапка? Аллісон Бухгольц-AU: Ви сказали, що двокрапка. АУДИТОРІЯ: О, ні. Аллісон Бухгольц-AU: Там ви йдете. АУДИТОРІЯ: Ой, зачекайте, зараз ми не можемо читати текст. Аллісон Бухгольц-AU: Тепер ви не можете прочитати текст, але у нас є фонове зображення. Mmhmm? 

АУДИТОРІЯ: Чи має HTML підтримка динамічного контенту? Мовляв, не могли б ви змінити розмір цю картину залежно від розміру вікна, або в тому, що в CSS-- 

Аллісон Бухгольц-AU: Так CSS повинен зробити це. Так що, якщо ви, хлопці, зацікавлені у вивченні передових CSS, Шукаю спільного викладання семінар по CSS на сьомому. І я обіцяю, що це буде набагато більш детально і робити ще прохолодно речі в цьому розділі. І мій со-учитель, як Загальна передня частина майстер веб DEV. Так це буде здорово, якщо ви хочете щоб дізнатися про всі цікаві речей що CSS може зробити. 

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

І CSS дійсно може захопити, наскільки велика ваша Ширина браузер або як високий це, і ви можете помістити речі відповідно до відносними розмірами порівняно з абсолютними розмірами. І це, очевидно, більш просунутий CSS, але це те, що ви можете зробити. Якщо ви хочете дізнатися, більш, прийти на мій семінар. 

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

Так є ще одна річ, що ви, хлопці, можете зробити або все, що ви хочете вивчити? У нас є 10 хвилин в запасі. Ми також можемо піти раніше, але якщо Ви хочете, щоб зробити деякі більше веб речі, ми можемо, але я не збираюся змусити вас. Але ми можемо також просто з'їсти цукерку. АУДИТОРІЯ: Виділіть текст білий, так що ви можете прочитати його. Аллісон Бухгольц-AU: ОК. Таким чином, в даному випадку, ми хочемо трохи с. АУДИТОРІЯ: Чи повинні ми зробити це в Тіло так це поширюється на всю сторінку? Аллісон Бухгольц-AU: Так, ми можемо насправді. Це хороша ідея. Таким чином, ми have-- зробити вас знаю, що ми повинні бути? Я не знаю, чи можемо ми зробити колір тексту. Я збираюся спробувати і створити ще один клас тут. 

АУДИТОРІЯ: Як ви отримуєте так що він має пропозиції? Аллісон Бухгольц-AU: Так якщо ви, хлопці зацікавлені, це ще один текст редактор називається Sublime. Ви повинні бути в змозі встановити його на свій прилад. Іноді це стає трохи складніше. Якщо ви хочете допомогти з цим, Я дуже щасливий допомогти вам з ним, бо Gedit великий і це здорово, тому що ви можете скомпілювати його на дні, але я дійсно як Sublime, тому що це досить і це робити те, як автозаповнення. 

Таким чином, ви можете безумовно не соромтеся дайте мені знати, якщо ви хочете, щоб зробити це. Якщо ви тільки що Google "Sublime Текст ", це, як правило, містить інструкції про те, як встановити на різних операційних системах. Це дійсно здорово, я думаю, на мій погляд. Так стр. Я думаю, що я можу просто зробити text-- або ми можемо тільки зробити колір "білий". Там. 

Так що я зробив тут те, що я не зраджувати весь текст. Але р тут просто тег, який у нас є, вірно? Цей пункт тег. Так що я просто створив елемент CSS, що сказав, добре, щось з цим тегом р, зробити колір білий. 

Так що, якщо ви помітили, він зробив це білий, і це біле. Це не зробити наш список білий, бо це не пов'язано з цим. Ви можете пройти і ви могли say-- 

АУДИТОРІЯ: У колір фону. 

Аллісон Бухгольц-AU: Колір фону? 

АУДИТОРІЯ: Фон для труби в колір, де ви поклали р тег. 

Аллісон Бухгольц-AU: ОК. Ви хочете, щоб це біле? АУДИТОРІЯ: Mmhmm. Аллісон Бухгольц-AU: ОК. Там ви йдете. АУДИТОРІЯ: Це дивно. Аллісон Бухгольц-AU: Досить прохолодно, чи не так? Так що, якщо вам просто возитися, Ви збираєтеся вчитися багато. І це може бути досить прохолодно. Я думаю, що це, безумовно, більш приємно, чим іноді тому що ви не повинні чекати для вашої програми для компіляції. Ви можете просто натиснути Оновити і ви, як, ой, дивіться, він працював, або о, я ймовірно, відсутній щось. І це те, що насправді круто про це наступної частини класу, це безперечно, я думаю, легше перевірити як ви йдете по дорозі в порівнянні з того, щоб написати ці довгі програми і бажаючи і молитися що він працює в кінці. 

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

Так що я сподіваюся, що ви guys-- удачі з цим PSET. Термін п'ятницю опівдні бо він був випущений в кінці. Так що я, ймовірно, буде бачити багато з вас, хлопці, в четвер, але, сподіваюся, немає. Може бути, ви будете мати це робиться тоді. Я був би супер пишатися. 

Але якщо ні, я буду вас бачити четвер. Ви також можете використовувати пізніше дати, які поширює його на суботу опівдні. Але я don't-- да? 

АУДИТОРІЯ: Хеллоуїн. 

Аллісон Бухгольц-AU: Це Хеллоуїн, А і В, Я не думаю, що буде бути робочі години в п'ятницю. Так дійсно спробувати і зробити це за допомогою П'ятниця, так що ми всі можемо святкувати Hallow вихідні. Гаразд, я буду бачити вас, хлопці на наступному тижні.