[За възпроизвеждане на музика] ALLISON BUCHHOLTZ-AU: Добре, всички. Добре дошли отново в раздел. Така че нашата програма за днес ще над много повече уеб Dev неща. Не знам колко от сте видял си psets тъй като тя е била освободена по-рано тази сутрин. Бих например колко хора са чели спецификацията, но виждайки как сте имали всички на, както и седем часа, за да гледат на него и това е понеделник и вие вероятно сте имали клас, Отивам да се предположи, че повечето от вас не са. Ако имате, допълнителни слава. Вие сте в основата помага изпълнение на прости уеб сървър в C, което е чисто нов pset, така че вие ​​получавате да бъде прасета Гвинея. Това ще бъде забавно, дива седмица но аз мисля, че ще бъде много забавно и това ще бъде наистина добър опит, всъщност. Така че, за да се подготвите за че в раздел днес отиваме да коригирате, TCP / IP, и След малко на HTML и CSS. 

В края на краищата, ние всъщност ще код до една проста уеб страница заедно да ви помогне момчета вид се по-запознати с това. И след това, ако не сте се качват Вашите викторини, те са в предната част, но аз съм сигурен, че всеки, тук си има викторина. А също и на тази бележка, решения все още не са се, но веднага след като ние finish-- харесва, на последните няколко хора, които приемат тяхното quizzes-- те ще бъдат нагоре. Ако имате някакви въпроси, в същото време, Чувствайте се свободни да се свържете с мен лично. Аз ще отговори с вашия индивидуален въпроси, както винаги правя. 

Така че по тази бележка, коригират. Така че в общи линии всичко, което трябва да знаете за коригирате е, че той се използва, за да се промени файловите права, нали? Така че това е само на някои системи го наричат промените разрешения, както се казва тук. И ако някога искате да видите кой има право файл има, вместо просто да правиш ли, бихте могли да направите ли -l. л стои за дълго. 

Така ще направя дълги списъци от всичко, и то ще ви даде много по-подробна информация за всеки един от вашите файлове. И вие ще видите something-- съм ще прескочи напред за second-- но вие ще видите нещо подобно на че най-горния ред има за всеки файл. И ние ще отидем през какво означава това. 

Така че основно, за да се промени Вашите файлове разрешения, вие просто искате да използвате коригират. Можете да мислите за него като за всеки друг UNIX се обадя като LS или CD или какво ли не. Това е просто вид на друг подобен разговор. 

Така че правим коригират и тогава ние ще има три цифри обикновено. Има няколко начина да направите това, един от които ще отидат над. Но обикновено, ще има три цифри от 0 до 7 всяко време. 

Така че едно нещо е, че има три различни разрешения че ние може да даде всеки файл. И това е за четене, което е представляван от г, което ще има смисъл в малко; W, което е писане; и изпълним, която е х. Знам, че е един, изпълним, може би не е най-подходящ, но ние го представлява с х. 

И тогава какво се случва, е всеки от тях също имат представителство номер. Така че ние имаме 1, 2 и 4. И в общи линии това, което се случва, е всяка от тези три числа тук съответства на различен набор от потребители че тези права се отнасят до. 

Така че можеш да се сетиш, че първата брой съответства на действителния потребител или на собственика на файла, а вторият брой ще съответства на групата, а последният се отнася на света, нали? Така че това, което се случва е, не забравяйте, тези numbers-- R е 4, т е 2, х е 1, нали? This-- ако обобщим тези нагоре, която ви дава, че първият брой че бихме могли вход в нашата коригират. 

Така че в този случай, това, което ще бъде този номер? Той ще бъде 4 плюс 2 плюс 1, което е 7, нали? И в този случай, те не разполагат с нищо, така че това тук ще превежда на CHMOD 700, OK? И какво прави, е да го предоставя на всички на тези разрешения за вашия потребител. 

Така че това означава, че нашите потребители могат да правят каквото си искат. Те могат да четат този файл. Те могат да изпълнят този файл. Те могат да пишат до този файл. Но група и по света, без разрешения и да било, нали? 

Така че друг начин да се напише, че можем направя CHMOD от три цифри, всяка от които съответства на каквато и да е сума, или че специфична група е специфична подгрупа. Или можем да направим наистина нещо друго. Дръж се. Ние можем да направим нещо с тези тук. 

Колко от вас видяха пример където е искал да коригирате плюс х? Видя ли, че в лекция, мисля? Така че е за всички. Това означава, че той даде на всички потребители, което аз забравих да си тук. 

Но плюс х, ако ние забележите тук, ако правим да chmod-- коя група сме Говорим за плюс разрешения ние искаме да им дадем. Така че това може да е плюс или минус. Plus добавя разрешение. Minus отнема разрешение. Много интуитивен, мисля. 

Така плюс х означава коригират. Така промените разрешенията на всички хора Ако това е A-- добавяне разрешения. И x-- това означава, че това, което разрешение сме предоставяне на всички. Четете, пишете, или да изпълнят? 

АУДИТОРИЯ: Execute. 

ALLISON BUCHHOLTZ-AU: Execute. Така че ние даваме на всички потребители разрешение за изпълнение на този файл, OK? И какво, ако искахме да направим че с цифров вид? Така че не забравяйте, с цифров, ние искаме три числа. 

АУДИТОРИЯ: 4. ALLISON BUCHHOLTZ-AU: Какво беше това? АУДИТОРИЯ: 4. ALLISON BUCHHOLTZ-AU: Не 4. АУДИТОРИЯ: 0, 0, 4. ALLISON BUCHHOLTZ-AU: Ами, ние искаме да го даде на всички потребители, нали? Така че ние ще трябва номер на всеки слот. Това ще да е същия брой във всеки слот защото ние просто искаме да дадем на всички изпълними разрешения. Така изпълним е 1, но на прав път. 

Така че, ако ние се CHMOD 111, които биха е еквивалент на коригират плюс х. Това прави ли смисъл за всички? Отиваме да мине през Няколко примера. 

Така че големият Takeaway тук е не е тук, а просто означава, че той даде на всички потребители. ф е, ако просто искате да дава или отнема на специално разрешение от ползвателя или собственика. г е за групата, така че средната цифра. И тогава други можеш да се сетиш като света, че последната цифра. 

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

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

ALLISON BUCHHOLTZ-AU: плюс R на пет. ОК, така че това е същото като това, само на две различни преводи на едно и също нещо. Така че с това, ние имаме тези. Така че аз искам вие да опитате и пишат тези видове в тяхната противоположния начин. 

Така че с коригирате 555, какво ще бъде като? Ще бъде плюс или ф плюс или какво ли не? За ф плюс х, дай ми на три числа. И после ми кажете за какво разрешения ние всъщност предоставяне и за кого? 

Така че аз ще ви дам момчета две минути, за да работят върху това. Чувствайте се свободни да говорят един с друг. За тези от вас, които дойдоха в малко късно, има бонбони и ризи. Ние не са оставяли три ризи, и имаме Kit Kats и Starbursts. Така че не се колебайте да се вземете някои в този малък антракт. 

Също така, последното е трудно. Това е два chmods за последния. Всъщност, нека се затвори тази врата а вие, момчета, които работят по този въпрос. Candy е винаги необходимо в понеделник следобед. 

ОК, така че CHMOD 555. Какво е по друг начин бихме могли да напиша, че? Някакви идеи? Да. 

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

ALLISON BUCHHOLTZ-AU: R плюс RX. Искате ли да обясни защо ще се RX? 

АУДИТОРИЯ: Защото имате 5, така че това е 4 плюс 1, Така че това прочетете плюс изпълним, и то е за всички. ALLISON BUCHHOLTZ-AU: Точно така. Така че просто да повторя, 5 тук ние знаем, като сумата от 4 и 1, защото всеки номер в нашата трио е сума от разрешения за тази подгрупа, нали? Или потребителя, група, или света. Така че в този случай, ние знаем, че 5 трябва да се формира от 4 и 1. 

И 4 и 1 съответства на разбираема и изпълним. Ние сме го дават на всеки, така че можем да направим CHMOD плюс RX. И очевидно, ние просто отиде чрез въпросите, там, така че сега този файл е изпълним и разбираеми за всички. 

Така че какво да кажем за второто? Какви могат да броят, че един е? Някакви идеи? Давай напред. 

АУДИТОРИЯ: 100 [недоловим]. 

ALLISON BUCHHOLTZ-AU: 100. Точно така. Значи искаш да обясни защо 100? АУДИТОРИЯ: Защото това е за за употреба, така че това е на първо място. И тогава х изпълним е 1. ALLISON BUCHHOLTZ-AU: Точно така. Така че ние сме предоставяне изпълним разрешения за само потребител. Така че в този случай тя ще бъде 100. И аз имам всички отговори нагоре на следващия слайд, в случай пишете много неща надолу. 

ОК, така че това следващия всъщност прави с две chmods, можете да го направите. Така че не всеки има някаква идея как можете да се коригират 640 пренаписана в другата посока? Можете да промените на потребителя и след това можете да промените групата е моят намек. 

Така че, ако ние бяхме просто промяна на потребител, което е тази първа тук, какво може да ни разговор? Така на потребителя е ф, нали? Така CHMOD ф плюс какво? Mmhmm? 

АУДИТОРИЯ: RW. ALLISON BUCHHOLTZ-AU: RW. Точно така, за да четат и пишат, защото прочетено е 4, т е 2, тези суми заедно като 6. Така че ние се коригират ф плюс RW, и ще получите нашата първа 6 там. 

Така че след това, за да получите 4, сега искаме за да промените настройките на нашата група. Така че ние ще направим коригират гр плюс какво? Какво е 4? 

АУДИТОРИЯ: R. ALLISON BUCHHOLTZ-AU: R. Именно. Така че ние даваме на собственика четат и пишат разрешения и ние даваме за четене група разрешения, които имаме всичко тук. Mmhmm? 

АУДИТОРИЯ: Ако можете да напишете нещо, пък означава, можете да го изпълните? 

ALLISON BUCHHOLTZ-AU: Можете може да пишете на something-- Аз не вярвам, че подразбира, че не може да го изпълни. Cool. Така че това е всичко, което току-що премина през. Така на следващия един, това е просто вид на общи случаи че искате да запазите в ум за определен вашия проблем. Това са обикновено на разрешения че сме искали да използвате. 

Така че за 711, който дава нас, разбира се, на потребителя всички разрешения, които има тенденция да има смисъл. И след това е изпълнима от група в света, която има смисъл ако имате някаква директория, Искам да бъда в състояние да преминават в него. Хората се нуждаят от достъп. 

За всяка държава, PHP файл, вие ще да използвате 644, което ще направи какво? Какво означава, че предполага, или какво разрешения се, че дават? Така собственикът може да какво? АУДИТОРИЯ: Четете и пишете. ALLISON BUCHHOLTZ-AU: Четете и пишете. И след това група и други може просто да прочете, нали? И тогава CHMOD 600 за всеки PHP файлове, които се използват, собственика си, отново, може четат и пишат, за да го но всички останали са просто вид блокиран. 

Така че това действително ще да бъде по-полезен, когато можете да получите на вашия проблем определен през следващата седмица, където вие всъщност изграждането на един уеб сайт. Така че, ако някога се сблъскате с всякакви странни проблеми когато това не е зареждането правилно, може би трябва да добавите изпълним разрешение, или може би имате нужда от четене или напишете разрешение. Малките неща, които са склонни да се спъне хора , но това е нещо като зелена To когато започнете pset следващата седмица. И аз ще ви дам повече съвети за pset тази седмица, но аз все още трябва да се търси в това, тъй като тя е била освободена тази сутрин. Но вие ми пишете, аз ще погледна при него от времето, когато се отговори утре. 

Така че сега, е всеки добър с коригирате? Всички спиращ въпроси? Много просто. Просто вид следене на това, което четене, писане и изпълнение на номера е може би най-трудната част. 

Така че с TCP / IP, всички тези протоколи, нещо като със своите структури от данни миналата седмица, че е много по- важно да се вид се по-високо ниво на интуицията от тях. Това не е CS143 къде отиваме да ви помоля да приложи мрежови, така че ще бъде добре, ако вие не разбирате гнидав пясъчен на всички протоколи. Какво е важно да се разбере е, нещо като това, което те представляват и защо те са важни. 

Така че, TCP / IP, разбира се, това е най- Протокол за управление на предаването или Internet Protocol, която е основно само набор от закони по същество или стандарти, които разказват данни как трябва да се работи, как трябва да се пакетизирани, предава и получава. Така че общо взето, точно както го Тук пише, увеличава шансовете че данните получава, когато искате да стигнем до. 

Сигурен съм, че ако вие се оттеглиха за лекция или го гледах онлайн, той has-- аз не знам ако той го направи тази година, но знам, че миналата година, той имаше демо където имаше снимка на Rob и той я разделя на четири и го сложите в пликове и се опита да го получи през Сандърс. И вие можете да вид мисля за него по този начин. Това е просто един набор от правила, които кажете данни как да се получи някъде и ви позволява да знаете, ако ви липсват данни, по същия начин, че ако сте като няколко страници на бележки и ги надпишете с страница 104, страница 204, а ти се върна да учи по-късно и ви липсва something-- не можете да намерите на страницата 304-- ли, че нещо не е наред, така че да гледам през вашите бележки отново или помолете някой да ви изпрати отново лекцията отбелязва, от този ден. По същия начин с данни за интернет. Ако аз питам за нещо от някой сървър и тя се нуждае, за да изпратите това в множество пакети, вероятно ще се брой тя по някакъв начин, нека ми да знам колко е трябвало да получи, и кажи ми, о, това е един от 10 или това е един от 10,000. По този начин, когато аз отивам да събирам всички парчета заедно, Знам, че ако нещо липсва и аз мога да попитам за това отново. Това прави ли смисъл? Само един набор от правила. В неговата основа, набор от правила, OK? 

Така че ние също говорихме малко за пристанищата. Това е наистина само един стандарт, който ви позволява да знаете какъв тип данни се предава в тези пакети. Ако отидем с нашия плик например, ние не правим Знам, че това е снимка на Rob там, освен ако не го напиша от външната страна на нашия плик. Така пристанища са в основата на едно и също нещо. Това е просто един начин да разбера какво тип данни се предава. 

Така че ние имаме всички от Най-често срещаните тук. Така 21-- те също са вид на подобни добри неща, за да знам. Това е вид на един лесен тест въпрос. Бъдете като, какво порт 80 да направя? Или, какво порт 443 направя? Така че добри неща, за да знаят. 

Така че ние имаме тук, е 21 файл протокол за предаване, така че просто нормите, които уреждат прехвърлянето на файлове. 25, нещо, което всички ние използвате твърде много, е електронната поща. 53 е името на домейна система, която е в основата просто вид на справка за IP адрес на име на домейн. 

Така че аз съм сигурен, че това е споменато в лекция, ако отида на нещо като google.com, той има IP адрес който е свързан с него. Това всъщност не е google.com. И така, 53 е пристанището че всъщност се грижи за вид го превеждат в този IP адрес за вас. И след това 80 и 443 са много чести. Вие трябва или да си уеб страница или имате защитен уеб страница, който много уеб страници са прехвърляне към момента. 

Така че това е вид на високо ниво Преглед на протокол за предаване. Аз не виждам много по-задълбочено. Това е вид на готини неща ако проявявате интерес. Има изобилие от ресурси. Wikipedia всъщност е доста добра страница. Така че аз гледам на него Само преди малко, така че аз силно препоръчвам търси в това, ако проявявате интерес или да вземе 143 за две години, тъй като Мисля, че е на всеки две години. 

Така че в края на това, ние сме говорим за уеб страници и HTTP, който всъщност е следващата ни тема за днес, преди да отидем в HTML и CSS и всъщност можете да кодирате на уеб страница. Ще бъде забавно. Ще има снимки на зайчета и това ще бъде страхотно. 

Така HTTP, както можете да видите тук, е един от най-прекрасните съкращения за тази седмица, което е Hypertext Transfer протокол. И отново, това е просто друг набор от правила, които урежда хипертекст прехвърля, в този случай. Така че най-добрият начин да се научи за това е просто вид да го съборят в тези отделни думи защото има много думи на екрана има. 

Така че ние ще започнем с хипертекст. Така "хипер", можеш да се сетиш "По-горе," като нещо супер-тип. Така че това е наистина само текст, взет до следващото ниво, така че това е като супер текст, като следващия текст. Така че това е основно само текст, който ни дава повече информация, отколкото обикновен текст прави, нали? 

Така че в този случай тук, това е хипертекст. Това ни казва, че имаме някаква връзка, че отиваме до който е cs50.net, което сега cs50.harvard.edu е. Тези слайдове са малко стари. И това се случва, за да изведете това, тъй като това, като хипервръзка, и тогава наистина страхотен сайт. 

Така че това е текст, който е малко по- малко от наистина готини неща там. Така че можете да свържете нещата и можете вмъквате изображения и можете да оформите нещата. И най-запознат нещо, което момчета вероятно са с хипертекст е HyperText Markup Language, 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. OK, което означава, че Да, всичко мина добре. Ето това, което искате. 

Типът на сървър, съдържанието type-- ни казва, добре, ти си ще се получи някакъв текст HTML. Това е дължината на това и тук е какво трябва да направите с връзката. ОК, така че отново, в зависимост на данните, които сте Кандидатури за работа в зависимост от това, което сървъра иска да се върне при вас, може да се наложи повече от тях област имена, които може да имате по-малко. Totally контекст зависи. 

И доколкото това състояние код тук, разбира се, 200 не е единственият, бихте могли да имат, нали? Ние имаме много кодове за състояние. Дали някой си спомня някоя от на други, които ние, споменати в лекция? Много от тях започват с 4. 

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

ALLISON BUCHHOLTZ-AU: 404, което е? 

АУДИТОРИЯ: Файлът не е намерен? 

ALLISON BUCHHOLTZ-AU: Файлът не е намерен. Точно така. Така че какво ще кажеш за 403? АУДИТОРИЯ: Забраненият. ALLISON BUCHHOLTZ-AU: Забраненият. И така, какво мислите това означава, че с chmods? 

АУДИТОРИЯ: Това означава, че не е нужно разрешение да го прочетете. 

ALLISON BUCHHOLTZ-AU: Точно така. По някакъв начин, не е нужно разрешение за достъп до нея, нали? Така че, 404, 403. Там е наистина смешно едно, че ние винаги въвеждане на всяка година, че Трябваше да се направи тук, като 413, което е, че съм чайник. Можете да Google това. Това е смешно, като, че е код 413 и то е, че съм чайник. Което аз не знам защо бихте всякога се нуждаем от това в интернет, но аз отделям. АУДИТОРИЯ: Може би сте чай гърне. ALLISON BUCHHOLTZ-AU: Може би сървъра е чай гърне. Кой знае? Добре, така че ние сме на път да преход към реалния кодиране. Имам чувството, че вие ​​ще се измъкнем от тук, доста бързо. 

АУДИТОРИЯ: Защо го прави каже "сървър: два пъти? 

ALLISON BUCHHOLTZ-AU: Hm? Сървър два пъти? Това е добър въпрос. Аз не съм сигурен. Ще разберете и Аз ще ти приятел. 

OK, всички други въпроси, освен това? Добър? Cool. 

HTML и CSS, и сега ние да стигнем до всички забавни части. Така че, както споменах и преди, HTML е може би едно от нещата, вие сте най-запознати. Така че ние имаме HyperText Markup Language. 

Най-добрият начин да научите this-- аз не някакви приготвени диапозитиви или нищо за вас, момчета с HTML. Това е наистина за изучаване на синтаксиса. И ако сте били в MySpace ден, вие ще имате това надолу. 

Така че, наистина, най-голямото нещо, което е само за да практикуват и да експериментират. Един от най-големите ресурси бих силно препоръчваме да използвате е W3Schools. Така че просто W, 3, и след това училища. Те имат много ресурси за HTML, за CSS, и те действително имат разделен екран подобно нещо където те ще ви дам пример код. Можете да си играете с него, го промените и натиснете Актуализация, и тя ще ви покаже какво е всъщност прави на уеб страницата. 

Така че бих силно препоръчваме да използвате това. Това е много готино. Вие няма да получите SEG грешки тук, когато нещата се объркат. Ако успеете да получите на сегмента проблем с HTML, да ме уведомите, защото аз съм ще бъде реално заинтригуван. Но това е наистина готино, защото можете да промените нещата, можете да ги видите да се актуализира на живо. И аз мисля, че вие ​​ще получите много по- по-интуитивно разбиране на HTML ако действително просто да прекарат известно време да експериментират с него. Така че това е защо аз казах, практики и опит. 

Google, от тук нататък от, най-вероятно ще бъде един от най-добрите си ресурси и приятели. Или Bing-- аз съм на работа в Microsoft, така че може би трябва да кажа, Bing. Но почти всичко е просто ще бъде синтаксис, така че да разбереш какво таговете са, understanding-- поне с CSS-- как да се променят някои атрибути. Ще бъде супер полезно. 

Така че, въпреки че ние не правим някакви готови неща, ние нямаме вид на някои от най-добрите практики че искаме вие ​​да се опита и да спазват по-- или по-скоро, вие трябва спазва до второ нареждане. Така че затвори всичките си етикети. Надяваме се всеки has-- ли какво, ако това не прави смисъл точно сега, Обещавам, че ще има смисъл когато сме кодиране на страницата. Но затворите всички ваши етикети. Така че, ако някога имам заглавна част, която е на стена, H1, скоба, уверете се, че всеки път, когато сте готови с това, затворите, че заглавието. Валидиране на страницата си с W3 Validator. Ако не затворите вашите тагове можете да получите неочаквано поведение. Той ще каже, че вашата страница е невалиден ако тя тече през този валидатор. Така че, когато в doubt-- и особено на тази седмица и следващата седмица pset-- по същия начин, по който ние искаме можете да използвате проверка 50 и стил 50, може да се мисли за това като един от вашите проверки, OK? 

Така че, ако не се премине на W3 валидатора. Това е нещо, което ще ви се скачи нататък. Или ти казвам полето сега, аз ще ви се скачи нататък. Така че се уверете, че тя потвърждава. Това не е трудно. Просто поставете в кода и тя или ще кажа добра работа или сте липсва нещо по същия начин този стил 50 ви казва където сте каша. 

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

И това е просто вид парадигма, че ние сме склонни да се използват при създаването на уеб страници, за да се разделят нещата. Можете да мислите за него по същия начин, че ние сме склонни да се разделят функции в C където хеш да намерите неща. Това е просто начин да се да направят живота ви по-лесно. Тя отделя атрибути или код, който вие ще се използва отново и отново, но по този начин, тя вид от пази го хубаво и спретнато. А ако искате да се промени едно нещо, можете да го промените, след и то не се е променило и навсякъде другаде. Така че това е повече за вашата лекота и гъвкавост. 

Така че с CSS, това е много подобен на HTML, но вместо тагове които споменах преди малко, ние използвате това, което се нарича селектори. И в общи линии просто вид на доц определен етикет в HTML с различни атрибути. И когато казвам, атрибути, искам да кажа неща като цвят на шрифта, шрифт стил, цвета на фона, цвета на текста. Тези видове неща. Например, ако това е в центъра, ако тя е на разстояние до правото, ако това е inverted-- всички на тези готини неща. Всички стилистични неща че ти направя, за да си текст, това е, което искам да кажа с атрибути. 

И след две основни неща, за да знаят, е, че selectors-- две от основните factors-- ИД, която е уникална. Можете да използвате, че само за едно нещо. В противен случай, тя ще ти крещя. И когато ние го определят във файл CSS, тя ще е хеш ID и след това какво атрибути искаме. Аз обещавам, че започваш да се мине през един пример. Това ще направи много по-дълбок смисъл. 

Клас може да се отнася до няколко блока. Така че можете да имате първа и трета алинея имат един и същ вид атрибути ако ги свързват с един и същи клас. И когато ние ги определят в CSS, ние правим една точка клас, с клас е независимо искате да бъде назован. 

Така че знам, че това е правилно сега е много абстрактно. Ето защо ние ще код. Знам, че вие, момчета обичат това, и всичко, което са ще ми помогне, защото това е вашата уеб страница. Това е уеб страница ни точка е, момчета. Така че има ли някакви въпроси, преди да изключете PowerPoint, или нищо искаш да превъртите назад до преди да започнат писането? 

АУДИТОРИЯ: Когато казват мач тагове искаш да кажеш селектори или тагове? ALLISON BUCHHOLTZ-AU: Можете мисля за тях като за едно и също нещо. Това е само с различни думи. Искам да кажа, като селектори. Но селектори и карта на тагове. Така че можете да мислите за тях като ефективно и също нещо. Обещавам, че ще се направи повече смисъл, когато ние кодекс. Нищо от PowerPoint или каквито и да било въпроси точно сега, преди да сме всъщност създаване на страница нашата секция е? Всички готови ли сте? Cool. 

Така че аз имам един започва. Позволете ми да се увеличи шрифта за вас, момчета. ОК, така че точно сега, ние просто трябва голите кости уеб страница тук. 

Ние имаме някои HTML. Ние имаме някои хедър, който ние виж тук като например уеб страница. Някои заглавия, някои шрифт. Това са етикети, OK? Така че, когато искам да кажа, затворете си маркери, ние виждаме, тук тази скоба глава е откриването си маркер и това скоба / Глава е да го затворите, OK? 

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

Така че в този случай, нека да променим това. Отиваме да има раздел седем. "Раздел Уеб". Така че аз съм просто ще променим това. 

И ако се върнем тук и ние reload-- Трябва спаси и reload-- забелязваме, че тук го променя, нали? Cool. Така че това променя заглавието. Това е това, което е върху раздела. 

Така че това е един вид търсите нещо скучно. Аз не знам за момчета. Мисля, че искаме нещо друго тук. 

И така, какво можем да направим, е заглавна част е само там. Нека да направим някакво тяло. Така че ние имаме някои тялото тук. Винаги правя отворен и затворя тагове, за да започнете, по същия начин, по който аз правя скоби. Ah. Чакай, какво? 

АУДИТОРИЯ: [недоловим]. ALLISON BUCHHOLTZ-AU: Ah. Вие, момчета, ме върнаха. Добра работа. Gold звезда. 

ОК, така че ние имаме някаква тялото тук. А сега нека да започнете да добавяте текст. Така че имате няколко различни опции за добавяне на текст. Имаме неща като заглавки. Ние имаме само обикновен текст. Така че нека просто да започнете с глава. Всъщност, ако вие искате да спра HTML W3 училище е, можете да вид огледам и ако има нещо, особено, че вие ​​искате да изпробвате с тази уеб страница, можем да направим това. Така че в този случай, нека просто да се направят някои h1. Така h1 е като най-високата заглавната си част. Тя ще ви даде нещо че е много голям и удебелен шрифт. 

И в този случай, това, което искаме за първи текст на нашата уеб страница? Всичко. Вие, момчета, ще се създаде това. Аз съм просто ще пишете. АУДИТОРИЯ: Добре дошли. 

ALLISON BUCHHOLTZ-AU: Добре дошли. ОК, така че ако го спаси и ние презареди, ние имаме едно голямо добре дошли. Така че просто, така че можете да видите различия, нека направим нещо по H6. Какво искаме точно тук? Така ли е? 

ОК, така че само така можете да видите разликата. Да, Sublime. Така че, ако забележите, h1, много, много голям. h6, като смел, но много по-малък, и имате всичко между тях. Така бихте могли да имат h2, h3, h4. И това са само заглавията, така че, ако се опитвате да се създаде уеб страница, която има различни секции, Може би искате да използвате заглавията в там някъде. 

Cool. Така че ние ще добавим още малко неща в нашето тяло. Виждам, че това би било вид на хладно, ако имахме снимка. Имам чувството, че всеки може да използва, може би сладко зайче картина точно сега, така че ние ще намерим зайче картина на първо място. 

Аз не знам, ако вие имате някой предпочитания, на която една искаме. Имате ли някакви предпочитания? Това тук? Първа. OK. Това е един. Добър избор. 

ОК, така че ние ще видите нашия имидж. Виж това. Виж това очарователни нещо. Как може да бъде тъжен в понеделник с това? 

Така че ние просто ще да копирате URL адреса на изображението. И това, което искаме да направим, е, нека просто кажем, че имаме някои стр за точка. Отиваме да се каже "Виж Посетете сладко зайче. d'awwww. " Обичам моите зайчета. Имам зайче у дома. Липсва ми моето зайче. Така че това, което ние ще do-- Аз не знам, ако вие искате до Google this-- но с HTML, как може да ви включите изображение? Буквално, ако Google "Включва изображение HTML" защо не вие ​​да ми кажете какво трябва да бъде този етикет? 

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

ALLISON BUCHHOLTZ-AU: IMG source-- АУДИТОРИЯ: --equals-- ALLISON BUCHHOLTZ-AU: --equals-- АУДИТОРИЯ: --quote-- да. ALLISON BUCHHOLTZ-AU: Perfect. Lovely. Вижте, MySpace поколение, нали? Публика: Neopets. ALLISON BUCHHOLTZ-AU: Neopets. О, OK. Wow. Той е бил луд. OK. 

Така че се уверете, че мога да получа това право. Cool. Така че това трябва да бъде тук. И след това, ако ние се презареди, ние имаме зайче на страницата не е ли очарователно? 

Това е толкова сладък. Вие избрахте голяма, голяма снимка. Аз съм го копаят. 

ОК, така че ние имаме това очарователни зайче сега. Ние бяхме в състояние да добавите изображение, просто ей така. Така че основно, ако има някакъв образ искате да добавите към вашата уеб страница, можете да го добавите точно като този. Друго нещо, което би било, ако сте съхранили картинката в същата папка, този файл, можете просто напиши каквото и името на този образ е вместо да има интернет връзка. 

Той все още ще бъде в кавички. Той просто ще бъде като ако бяхме име this-- ако тази снимка беше записан в папката с този HTML файл че аз съм редактирате и я се нарича bunny.jpg. Ние също може да направи това и тя ще се появи. Въпреки това, аз не разполагат с тази записана в файла и искам да запазя зайче, така че ние ще продължим да се връзката. 

АУДИТОРИЯ: Какво е rabbit.org? 

ALLISON BUCHHOLTZ-AU: rabbit.org. Това е appropriate-- изглежда, може да го приеме. Приемане. bunny.jpg. Искам да приеме това зайче. О, Боже, това е толкова сладък. 

ОК, така че ние добавихме заглавията. Добавихме снимка. Очевидно е, че ние добавихме някакъв текст тук, нали? Ако искахме да добавите друг текстове, ние ще вървят по този начин. Така че това е друг параграф. 

И ние казваме "това е друг параграф." Също така, аз съм ужасен правопис, така че може да misspell неща. Просто FYI. 

Така че ние имаме друг точка тук, нали? Така че може би искате да направите нещо малко по-интересна, отколкото просто има всичките си текст, като дясно подравнен. Може би искате да центрирате текста, OK? 

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

АУДИТОРИЯ: р подравняване. 

ALLISON BUCHHOLTZ-AU: Значи р подравняване равнява "център". Той го убива, момчета. Y'all трябва да се засили. И ние имаме "Това е в центъра." И сега ние сме нещо в центъра. 

По същия начин, ако сте искам подравнена вляво, бихте могли да направите приведе равни ляво, подравняване равнява право. Totally до вас. Ако го бях направил точно тук, то това should-- сега е дясно подравнен. 

АУДИТОРИЯ: Алисън? От източник на изображение, защо да не е има близо на източника на IMG? ALLISON BUCHHOLTZ-AU: Съжалявам. Този човек трябва да бъде Сега сте добре. Сега ние сме добре. АУДИТОРИЯ: Да не сте да го затвори там, или не? ALLISON BUCHHOLTZ-AU: Е, така IMG източник, това е just-- с изображение, това е просто разглежда като един от елементите, докато ако забележите, за останалата част от тях, ние имаме някои маркер след информация, че тя се отнася до и след затварящ етикет. Но с изображение, всичко е просто някак автономен. Cool. Така че, вие знаете как да се създаде заглавна част, вие знаете как да въведете текст, Знаете ли как да се сложи картинка в момента, можете да се уеднаквят нещата. 

Друго нещо, което можете може да искате да бъде в състояние да направи е да се създаде списък на CS-- сме вид навлиза в pset следващата седмица. Нещата, които ние обикновено преподават тази седмица върви много добре с pset следващата седмица, така че ние сме вид смесване, наслагване неща тук. Но това ще бъде полезно за следващата седмица. 

Така че, ако искаме да направим някои списък, как бихме могли да направим това? Вие не може да отговори на този път. Някой друг трябва да. Това не е трудно, момчета, обещават. Google "неподреден списък HTML." Какво беше това? 

АУДИТОРИЯ: [недоловим]. ALLISON BUCHHOLTZ-AU: Точно така. Така че искаме поръча или неподреден? Нека да направим неподреден. Така че ние имаме някаква ул, които щандове за неподреден списък. И това, което имаме за всеки елемент? Има ли нужда от свой собствен етикет? Можем просто да започнете да пишете неща? 

АУДИТОРИЯ: Ли. 

ALLISON BUCHHOLTZ-AU: Ли. Така че това, което е нашия списък ще бъде? Какво искаме тук? Ние просто правим имена. Просто направете Яков. 

АУДИТОРИЯ: Заек храни. 

ALLISON BUCHHOLTZ-AU: Заек храни. OK Харесва ми това. Заек храни. 

ОК, така че ние имаме моркови. Харесва ми този заек тема. Аз съм го много копаене. АУДИТОРИЯ: Всъщност, аз мислех, Яков ще бъде легален. ALLISON BUCHHOLTZ-AU: Яков? Яков е заек храна. Ако сте видели Яков снимка от работното време, може да си помисли, че имам нападнати от заек убиец. 

АУДИТОРИЯ: Имам заек сега. Имам заек убиец сега. 

ALLISON BUCHHOLTZ-AU: Майтапиш ли се? 

АУДИТОРИЯ: Аз ще го следващия раздел донесе. Аз го имам. 

ALLISON BUCHHOLTZ-AU: Това е нелепо. Както и да е. 

АУДИТОРИЯ: [недоловим] 

АУДИТОРИЯ: Да, моята Проктър има заек, както добре. 

ALLISON BUCHHOLTZ-AU: Искам един заек. OK, който носи истинска заек да следващия раздел, общо червени точки. АУДИТОРИЯ: [недоловим] АУДИТОРИЯ: О, това не е реално. Това е препариран заек. 

ALLISON BUCHHOLTZ-AU: О Да, можем да закрие тези. Изглежда рад. АУДИТОРИЯ: Има ли всъщност значение? ALLISON BUCHHOLTZ-AU: Той не го прави. По-голямата част от тези неща, не затворите тага, 99% от времето няма нищо лошо се случва да се случи, но това е добър стил, също. Така че Яков. И ние имаме маруля. АУДИТОРИЯ: За връзки, това е наистина важно. ALLISON BUCHHOLTZ-AU: Hm? АУДИТОРИЯ: За хипервръзки. ALLISON BUCHHOLTZ-AU: За хипервръзки. Да, хипервръзки, се нуждаят от нея. ОК, така че нека да видим тук. И ние имаме в края на нашия списък. И ние гледаме на това. Ние сме all-- Яков, точно там. Заек храна. Напомня ми на Bunnicula. 

АУДИТОРИЯ: [недоловим] ALLISON BUCHHOLTZ-AU: Аз съм се връщали Всички Днес старото училище справки, не са ли? Само на всички стари препратки училище. Трябваше да донесе като Gogurts или нещо за закуски. 

АУДИТОРИЯ: Или Gushers. ALLISON BUCHHOLTZ-AU: О. OK. Ще видя дали мога да проследявате надолу Gushers за следващата седмица. Мисля, че мога да направя това. Мисля, че можем да имаме някои от тях в офиса. 

ОК, така че ние сме обхванати много различни неща, които можете да правите с HTML, нали? И както вероятно можете да видите, че е nothing-- надявам се, не прекалено intim-- ако е така, аз не искам да кажа, да омаловажавам никого. Ако имате проблеми, моля те да говориш с мен. 

Но голямата част от него е само търси в синтаксиса, нали? Ако искате неподреден списък, ако искате някакъв списък, ако искате да се приведе нещо или формат нещо, всичко е въпрос само на вид погледна на синтаксиса за HTML, нали? И едно нещо, което е много готино всъщност е, ако отидете to-- нека да видим, това, което е хубаво, уеб сайт, който ни харесва? Всеки, който има някакви любими сайтове че са ОК, за да доведе до онлайн? Знаеш ли какво, нека просто направим CS50. Това е хубаво и безопасно, нали? 

ОК, така CS50 тук. О, изглежда, има раздел точно сега. Ако ви харесва начина, по който изглежда. 

АУДИТОРИЯ: [недоловим]. ALLISON BUCHHOLTZ-AU: Ние не сме ще направя мета раздел, момчета. Това не се случва. Тя ще бъде готино, но ние няма да го направя. 

И така, какво ли би могло правите, ако ви харесва начина, по който това работи е, че може винаги е прав кликнете върху всяка уеб страница, която ви харесва и можете да направите View Page Source. Това ще доведе до всички HTML. И това всъщност е един наистина добър начин да оформите своя собствена уеб страница. Отиване на уеб страница, която ви наистина харесвам и погледнете в HTML и да разбера как са го направили. 

И буквално, толкова дълго, като ви цитирам неща, толкова дълго, колкото ти не си просто крадат от хора, това е ОК. Специално за CS50 [? финансиране?], ние сме вид Очакваме Ви, за да получите вдъхновение от друг сайт. Така че не се колебайте. Погледни през уеб сайтове, които мислите, че наистина са доста и да разбера как те използват HTML и CSS, за да направи тези неща. 

Така че, както виждате тук, там е очевидно като връзки и имаме клас тук. Имаме връзка тук. Имаме списък. Вероятно има някои снимки в някъде тук. 

Имаме някои готини стил тук. Това е следващото нещо, ние ще направим. Така стил, всеки път, когато видите тези стил скоби, това е CSS основно. Бен, нали имам един въпрос? 

АУДИТОРИЯ: Какво е Разделения? 

ALLISON BUCHHOLTZ-AU: Разделение е само A-- какво е Разделения? АУДИТОРИЯ: Division. ALLISON BUCHHOLTZ-AU: Division. Да, това е точно като отделяне на различни елементи. ОК, така че тук е това, което ние сме ще отиде в следващия. Така че това не може да бъде най-добрият стил, защото, ако забележите имаме HTML и стил в една и съща страница, и ние действително искаме да се отделят тези, OK? И всъщност, нека отвори дясната ми една тъй като това е трябвало да бъде на PDF, така че ние имаме style.css. 

И така, какво можем да направим тук е това са готини неща, като някои избледняват и можем да се опитаме да направим това, но аз се чувствам като бих проваляме това в движение, така че аз ви насърчавам момчета до да се опита, че на собствения си, но аз няма да го направя точно сега. Така че, ако вие, момчета, не забравяйте, ако някога срещна проблем набор, нещо се спуска откъм страна. Той има общо с преливането и на прехода и какво ли не. 

АУДИТОРИЯ: И това е всичко, CSS и HTML? 

ALLISON BUCHHOLTZ-AU: All CSS и HTML. Да. Така че можете да направите много наистина готини неща с CSS и HTML. Така е и с нашия страхотен зайче уеб страница тук, ние Ще направя малко малко CSS стайлинг с него. 

Така че, ако някога има стил лист, който имаме тук, може просто да се обадя style.css. Можете да го наречем каквото искате. Важното е, че ние отиваме да го справка в нашата web.html тук. 

Така че това, което ще направя, е we-- така че аз не се отнасям тази up-- ние ще се свържем тези два файла заедно. Така че в една и съща way-- Отивам да се направи аналогия с C тук. По същия начин, ако имате някои library-- и имаме cs50.h-- нашата компилатор го свързва. Това е просто една изрична връзка от наша страна. Така че, по същия начин, което правим хеш включва някои файл, какво Аз съм на път да пиша е само HTML / CSS еквивалентно на това. 

Ние сме просто казвам, добре, тази уеб страница ще използвате този стилове, OK? Така че ние имаме връзка отн равна на стилове. И тогава имаме вид, CSS. И след това HREF равни. 

OK. Така че всичко това направих тук е да мисля за това като за едно и също нещо като хеш включва. Очевидно е, че изглежда малко по- сложно, но във всички случаи, това е ефективно едно и също нещо. Така че това е просто някакъв свързване на стил лист, че е от тип текст / CSS, и името му е style.css. 

Какво е важно да се знае е, че уеб страницата че аз съм на работа полето now-- web.html и style.css-- са в една и съща папка. Защото в различни папки, вие трябва да дадете действителната корен към него, или по пътя към него. Но в този случай, ние сме го поддържаш супер проста и тя ще бъде тук. Така че, ако ние направим това, имам някои нещата вече се редяха на опашка тук. 

Така че ние имаме някакъв орган, който ще да имаме цвета на фона, което точно сега е светло синьо. Ние можем да го променим, ако искаме, но ако си спомням правилно това, той просто трябва да го смените с светло синьо. И сега имаме светло син фон. И ние трябваше here-- може ли някой да си спомня кой е хеш ID или клас? 

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

ALLISON BUCHHOLTZ-AU: ID. Cool. Така че това, което искаме да направим е кои от тези шрифтове или which-- искаме "Погледни сладко зайче ", за да бъде лилаво? Мисля, че ние искаме това да бъде лилаво. Аз съм сигурен, че е надолу с лилаво. 

Така че това, което правите е да правите ID equals-- в този случай Казах, какво, доста цвят тук. Ние се презареди. Изведнъж, това е лилаво. ОК, така че с ID, не забравяйте, тя трябва да бъде уникален, така че никога не трябва да се използва това ID никъде другаде. Но с клас, тъй като ние имаме тук с доста шрифт, Аз трябва да могат да се използват че навсякъде искам. 

Така че нека да направим това тук. Така че можем да кажем клас се равнява на доста шрифт. И ако погледнем сега, ние имаме тази готина доста шрифт тук. Така че може би искам да правя и двете. ОК, аз всъщност не знам дали това е ще работи, но аз искам да го опитам. И това е как можете да научите CSS и HTML. Вие сте като, вие знаете, какво, искам да опитам това. Аз не съм сигурен дали това ще работи. Нека да видим дали тя работи. 

И погледнете това. Сега тя е в лилаво и това е доста шрифт. ОК, така че имате всички тези различни неща, които можете да направите. Имате ли въпроси? 

АУДИТОРИЯ: Да. Е, точно като цветовете който използвате, са думи. Има ли начин да се направи цветове с шестнадесетични RGB? ALLISON BUCHHOLTZ-AU: Можете също така да го направя с hexidecimal, аз вярвам. Да. Но това е нещо хубаво, ако можете не искам да ги гледам. Можете просто да бъде като, лилаво или синьо. АУДИТОРИЯ: Да се ​​надяваме, че знам какво означава това. ALLISON BUCHHOLTZ-AU: Точно така. Така че нека да направим това или чете резедаво. Защо бихте някога изберете резедаво? Това е интересен цвят. 

ОК, така че очевидно ние можем да видим може да промени нещата обаче, което искаме. Ако искате да create-- да речем ние искахме да се създаде друг клас. Какво може да ви момчета, искате да промените? Ако спра W3Schools " CSS документация, Оставям думата на вас, момчета. Можем да се опитаме и да направим нещо готино с това в последните няколко минути. Защото аз съм вид ви е дал катастрофата курс по много готини неща което можете да направите. Но в крайна сметка, както казах, ако просто експеримент, ще научите много. 

АУДИТОРИЯ: Знаете ли, погледнете този шрифт? 

ALLISON BUCHHOLTZ-AU: Да, Погледнах този шрифт. Така че, както буквално, аз отиде to-- какво съм направил? Направих списък CSS шрифт, и След това направих шрифта комин, и тогава аз бях като, изглежда, тук са всички готини шрифтове можете да направите. И там беше този, така Аз го копира в клипборда ми. И тогава аз бях като, OK, хладно, там отиваме. Всичко е готово. 

АУДИТОРИЯ: Така че е нужно да се уверите, че CSS, знае какъв е този шрифт. 

ALLISON BUCHHOLTZ-AU: Да. 

АУДИТОРИЯ: Какво да го кажа в края на краищата? Курсив? 

ALLISON BUCHHOLTZ-AU: курсив. Да. 

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

ALLISON BUCHHOLTZ-AU: Фон изображение. OK. Значи вие искате да ми кажете как да стане това. Оставям това на вас. Аз съм просто пишете тук сега. Колелото е във вашите ръце. 

АУДИТОРИЯ: OK 

ALLISON BUCHHOLTZ-AU: OK. Какво правя? 

АУДИТОРИЯ: Doing-- Знам какво идва след фигурна скоба. ALLISON BUCHHOLTZ-AU: OK. Така че може би в тялото, I ще се приеме, защото сме правиш с фоновото изображение. 

АУДИТОРИЯ: Да, нека да направим това. 

ALLISON BUCHHOLTZ-AU: OK. АУДИТОРИЯ: ОК, така че на фона дебелото черво, и тогава ние нужда от URL адрес на изображението. Може би псевдо-код, който за сега, може би. 

ALLISON BUCHHOLTZ-AU: Какво бихте ли ми харесва to-- АУДИТОРИЯ: Аз мисля като GIF. ALLISON BUCHHOLTZ-AU: A GIF? Това ще бъде интересно. Добре, аз какво Googling тук? 

АУДИТОРИЯ: Не, това е ваш избор. 

ALLISON BUCHHOLTZ-AU: Защо не we-- ако това е зайче, Имам чувството, че трябва да имаме хубаво тревните тревата или нещо такова. 

АУДИТОРИЯ: Meadow. A поляна. 

ALLISON BUCHHOLTZ-AU: A поляна? OK. АУДИТОРИЯ: Или Рейчъл Мадау. ALLISON BUCHHOLTZ-AU: Това изглежда доста. О, това е малка, все пак. Ние се нуждаем от изображението добър размер. Нека да видим. О, виж. Това е доста поляна. Знаеш ли какво ми харесва тази. Нека да копирате този. 

АУДИТОРИЯ: ОК, така че аз мисля, че е адреса, отворени скоби. 

ALLISON BUCHHOLTZ-AU: OK, URL. 

АУДИТОРИЯ: Тогава адрес. 

ALLISON BUCHHOLTZ-AU: OK. Това ли е всичко, което трябва? 

АУДИТОРИЯ: Close скоби запетая, и след това пространство, на фона тире закрепване на дебелото черво фиксирана и фигурна скоба. 

ALLISON BUCHHOLTZ-AU: OK. Нека да видим дали работи. Това ще бъде много готино, ако го прави. Много съм развълнуван, точно тук. Тя не работи. Чудя се защо. АУДИТОРИЯ: Може би URL трябва да е в кавички. ALLISON BUCHHOLTZ-AU: Може би. И това е начина, по който се учи, момчета. 

АУДИТОРИЯ: Можем ли да имаме фон цвят и фоново изображение? 

АУДИТОРИЯ: No. Един отменя другата. 

ALLISON BUCHHOLTZ-AU: Не знам. Нека да видим. Нека да проверим и да видим. 

АУДИТОРИЯ: О, може би, да. [Вмъкване VOICES] 

ALLISON BUCHHOLTZ-AU: Добре, това е obviously-- I [недоловим] тук. Така OK. АУДИТОРИЯ: Фон привързаност. ALLISON BUCHHOLTZ-AU: Ah. 

АУДИТОРИЯ: ОК, аз не знам. ALLISON BUCHHOLTZ-AU: Тя Изглежда, че трябва да работи. Сигурен, че е на дебелото черво след URL ли сте? 

АУДИТОРИЯ: Не, това е запетая. ALLISON BUCHHOLTZ-AU: Това е точка и запетая. АУДИТОРИЯ: Казах ли, че дебелото черво? ALLISON BUCHHOLTZ-AU: Казахте, двоеточие. АУДИТОРИЯ: О, не. ALLISON BUCHHOLTZ-AU: Няма да отидете. АУДИТОРИЯ: О, чакай, сега ние не може да чете текста. ALLISON BUCHHOLTZ-AU: Сега не можете да прочетете текста, но ние имаме фоновото изображение. Mmhmm? 

АУДИТОРИЯ: Дали HTML поддържа динамично съдържание? Например, може да преоразмерите тази картина в зависимост от размера на прозореца, или е, че CSS-- 

ALLISON BUCHHOLTZ-AU: Така CSS трябва да направя това. Така че, ако вие се интересувате в обучение за напреднали CSS, Аз съм едновременно преподаване семинар на CSS на 7. И аз обещавам, че ще бъде много по-задълбочено и да направи много по-готино неща в този раздел. И моят съ-учител е като Общият брой на предния край уеб Dev господар. Така че това ще бъде много готино, ако искате да се запознаете с всички готини неща че CSS може да направи. 

Но това, което имаме тук с фон привързаност fixed-- така че това е някаква фиксирана size-- но всъщност можете да dynamically-- ако някога видите уеб страници, като най-добри уеб страници ще направя, когато настройвате размер на вашия браузър, той регулира фона или колко се показва или преформатира неща, нали? Така че това е, което ние наричаме относително позициониране. 

И CSS всъщност може да вземете колко голям си ширина браузър е или колко високо е то, и можете да позиционирате неща съгласно относителните размери срещу абсолютните размери. И това е очевидно по-напреднали CSS, но това е нещо, което можеш да направиш. Ако искате да научите повече, елате в моя семинар. 

Така че това е нещо, което можеш да направиш. И CSS може действително do-- CSS и JavaScript, които ще влязат в следващия week-- може да ви позволи да се променя динамично, страници, без да се налага да ги презареди през цялото време. И можете да се направят някои доста готини неща. 

Така че има още нещо че вие ​​може да искате да направите, или нещо, което искате да разгледате? Ние имаме 10 минути преди края. Ние също може да напусне по-рано, но ако искате да се направят някои по-уеб неща, можем, но аз не съм ще ви принуди да. Но ние също може да се яде само бонбони. АУДИТОРИЯ: Маркирайте текста бяло, така че можете да го прочетете. ALLISON BUCHHOLTZ-AU: OK. Така че в този случай, ние искаме някои стр. АУДИТОРИЯ: Трябва ли да го направя в тяло, така че се прилага за цялата страница? ALLISON BUCHHOLTZ-AU: Да, ние можем всъщност. Това е добра идея. Така че ние have-- правиш знаем какво трябва да бъде? Аз не знам дали можем да направим цветен текст. Щях да се опитам да създадете друг клас тук. 

АУДИТОРИЯ: Как да получите толкова че има предложения? ALLISON BUCHHOLTZ-AU: Значи ако вие се интересувате, това е друг текст редактор, наречен Sublime. Вие трябва да бъдете в състояние да да го инсталирате на вашия уред. Понякога става малко сложно. Ако искате да помогне с това, Аз съм супер щастлив да ви помогне с него, защото Gedit е голям и това е страхотно, защото можете да го компилирате на дъното, но аз наистина като Sublime, защото това е доста и го прави неща като авто-пълна. 

Така че определено може да се чувства свободен да да ме уведомите, ако искате да направите това. Ако просто Google "Високата текст ", това обикновено има инструкции за това как да инсталирате на различни операционни системи. Това е наистина страхотно, аз мисля, че, по мое мнение. Така стр. Мисля, че може просто да направите text-- или ние може просто да направи цвят "бял". Има. 

Така че това, което направих тук, е, че аз не се променя целия текст. Но стр тук е просто маркер, който имаме, нали? Този параграф маркер. Така че аз просто създаде CSS елемент, който каза, ОК, нищо с този етикет р, направи бял цвят. 

Така че, ако сте забелязали, това прави тази бяла и това бяло. Той не направи нашия списък бяло, защото това не е свързано с това. Може да мине през и може да say-- 

АУДИТОРИЯ: Обичате цвета на фона. 

ALLISON BUCHHOLTZ-AU: Цвят на фона? 

АУДИТОРИЯ: Контекст тръба в цвят, където да поставите маркер стр. 

ALLISON BUCHHOLTZ-AU: OK. Искаш ли го в бяло? АУДИТОРИЯ: Mmhmm. ALLISON BUCHHOLTZ-AU: OK. Има и да отидете. АУДИТОРИЯ: Това е странно. ALLISON BUCHHOLTZ-AU: Много готино, нали? Така че, ако просто се забъркваш с около, ти започваш да се научи много. И това може да бъде доста хладно. Мисля, че това определено е по- удовлетворяващо, отколкото понякога защото не е нужно да чакате за вашата програма за съставяне. Можете просто да натиснете Refresh и вие сте като О, виж, той е работил, или О, аз съм вероятно липсва нещо. И това е нещо, което е наистина готино за следващата част от този клас, е това е определено, че мисля, по-лесно да се провери както и да отидеш по протежение на пътя в сравнение с се налага да пиша тези дълги програми и който желае и се моли че тя работи в края. 

Така че с това, мисля, че вие всичко изглежда добре. Ако имате някакви въпроси, както винаги, дойде да говориш с мен, ела да ме уведомите. Аз ще бъда точно пред за следващите 15 минути ако искате да говорите за нищо и всичко. 

Така че аз се надявам да guys-- добър късмет с този pset. Крайният срок е петък по обяд тъй като тя е била освободена късно. Така че най-вероятно ще се видим много от вас, момчета, в четвъртък, но се надяваме, че не. Може би ще трябва да го направи до тогава. Щях да съм супер горд. 

Но ако не е, ще се видим в четвъртък. Можете да използвате също и края на дата, която тя се простира до събота по обяд. Но аз don't-- нали? 

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

ALLISON BUCHHOLTZ-AU: Това е Хелоуин, а и б, Аз не мисля, че ще има е работно време в петък. Така че наистина се опитвам и да го направи чрез Петък, така че всички ние можем да празнуваме Hallow уикенд. Добре, ще се видим, момчета следващата седмица.