[За възпроизвеждане на музика] 

DAVID J Malan: Това е CS50 и това е началото на седмица 7. Така че добре дошъл отново. И може би си спомняте, че в проблем зададете четири, Имаше известно на лов за някои приказни награди, при която след като се възстанови снимките на персонала, така и тук, в Ню Хейвън, сте изправени пред предизвикателството да намерят най-много от тези компютърни специалисти, колкото би могъл. И ние имаме едно цяло куп изявления. Мислех, че ще споделя няколко с вас тук днес. 

И ние ще публикуваме всички тези онлайн. Но по-специално, аз исках да привлека вниманието ви to-- добре една, Сам беше в доста от тях обикновено представляват по този начин. Но се оказва, че от тази сутрин, победителят бе определен човек на име Кен с 24 от персонала заснето на камера или още няколко, когато се вземат акаунт множествена персонал в снимките. На снимката тук е Ken следващия Мери в Ню Хейвън. 

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

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

И на снимката тук е Ланс с Колтън, с Skaz, със себе си, и със Сам. Но после се оказва, че от 11:46 AM, така че само преди малко, Върнах се обратно на моя имейл и е установено, че имахме още една представяне от студент на име Бони чиято имейл каза само това. Няма да лъжа, че съм прави това по време на тренировката. И след това продължи да прикачите само 14 снимки, едната срамежлив на Ланс 15. 

Но в снимки на Бони, тя се превръща изложени са множество членове на персонала, Sam между тях, така че това, което ние си мислехме ще направим, е да признаем, и двете от тях. Така че в допълнение към получаване на Dropbox пространство, че всички, които участваха получава, тези две секции също ще получите хубава обслужва обяд за тях и тяхното сечение Съквартиранти този смешен седмица. И така, вие ще чуете от нас, Ланс и Бони, за това. Така че големи поздравления за тях. Сега, тези от вас, които биха като обяд в по-общ знаем, че CS50 обяд в Кеймбридж и New Haven е този петък. Отидете на уебсайта наклонена черта RSVP CS50 е. А сега няколко думи за семинари. Повече учебната програма. Така че ние сме наближава точка на семестъра където вие трябва да започнете мисля за окончателните проекти. И в действителност, в малко, ще така наречените предварителни предложения са дължими. Така че предварителните предложения са предназначени да бъде доста слабо въздействие и наистина Просто една възможност за можете да композира кратка бележка учението си колега, за да запознае него или нея това, което си мислиш Може би искате да направите за своя окончателен проект. 

Сега, много студенти завършват правене на уеб базиран окончателните проекти. И разбира се, ние сме просто Сега миналата седмица в тази и извън нея да се гмурне в уеб програмиране. Така че не се притеснявайте, ако абсолютно никаква представа как бихте изгради идеите, които може да се наложи в ума си. Това е наистина само принуждавайки функция да се мисли и говори ли с TF за това. Но за да ви помогне с това, и с окончателните проекти в крайна сметка, знаем, че CS50 има традиция за предлагане на семинари. 

И това не са задължителни, ръце, или лекция основава на възможностите за да научат повече за теми, които са малко второстепенни за курса учебната програма, но въпреки това прекрасно материал за шофиране окончателните проекти. И така, това е списъкът, който е Персонала CS50 тук, в Ню Хейвън да излезе с за тази година за IOS програмиране, Android програмиране, разработка на видеоигри, и букети от повече инструменти и езици и техники. 

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

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

И точно като проверка здрав разум, какво означават наклонена черта? Какво означава, когато наклонена черта молещата уеб сайт? Можете да го направите заявка през цялото време. Най всеки път, когато посетите даден уебсайт, можете всъщност не напишете името на файла. Може би просто отидете на Facebook.com, въведете, gmail.com, или други подобни. И какво представлява наклонена черта? Какво файл? Или какво страница, по-специално? 

Индексът, да. Така страница по подразбиране. Така че, ако не посочите файл кръстете ние ще започнем да се види, вие всъщност просто иска дайте ми страница по подразбиране на Facebook или да ми даде моята пощенска кутия или да даде ми страница по подразбиране на новини на интернет страницата на CNN или други подобни. И на сървъра след това в отговор на това послание с нещо по този начин, като каза да, говори HTTP версия 1.1. 

200, което е състояние код, който ние, хората рядко Някога виждал, защото това е добре. Защото това означава, OK, по искане е получено и употребява правилно. И вида на съдържанието очевидно в отговор е доста често, но не винаги, текст. И по-специално, HTML. И това е всъщност когато погледнем днес. 

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

И аз ще отида напред и да отидете to-- Отивам да контролирате клик или надясно щракнете някъде в уеб страница. И аз ще отида да Огледайте Element. И аз отивам да се ощипвам ми екран само малко тук. Позволете ми да се премести тази на дъното. Така че това е, което се нарича Инспектор на Chrome. Така че това е като отстраняване на грешки инструмент, вграден в Chrome. 

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

И това е малко поразителен на пръв поглед тук. Но това, което аз ще направя е нека мен това малко се опрости. Отивам, за да включите записване на светлина, така че това е червено. И аз ще кажа запази дневника. И това е само малко по- нещо, си помислих, с течение на времето това ще спести всичко, което се случва в браузъра. И сега аз отивам да отидете да http://facebook.com. 

Всъщност, нека да направим WWW за добра мярка, наклонена черта. Enter. Така че един URL, че много от може би сте посетили. И сега уеб Фейсбук страница се появява в горната част. И тогава един куп неща отлетя от най-отдолу. И всъщност, се оказва, че когато посещавате Facebook.com, не сте просто направи една HTTP заявка, Оказва се, че ще Facebook.com изпраща 41 от тези пликове, всяка със собствен искане получи, както е показано, макар зад екрана тук, в долната част на екрана, това показва, че наистина ми Браузърът направени 41 искания. 

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

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

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

Но това е вторият за последната една там долу, забележите, че сървъра Facebook.com му, наистина каза тук идва някакъв текст HTML. Така че всичко това е да се каже, че когато си поискат уеб страница от браузър до сървър, който отговаря на сървъра с плик на своя собствена вътрешността на която е текст. С други думи, HTML. HyperText Markup Language. Кой е на друг език че ще се въведе днес че хората или компютрите генерират с цел прилагане на уеб страници. 

По-конкретно, нека да разгледаме това. Отивам да се върнем сега към страницата на Facebook. И аз ще се просто контрол на клик или десен клик и кликнете върху View Page Source. И дори ако не използвате Chrome, IE може да направи това, Firefox може да направи това, Safari може да направи това, въпреки че в менюто опции може да изглеждат малко по-различни. И това е, че Марк и HTML компания в Facebook са писали. 

И да колективно, този език тук изпълнява синьо и бяло страница която видяхме преди малко. Сега, това е малко поразителен. Но ако погледнем нагоре към горния ляв, ние сме Ще започнете да виждате някои модели. Тя изглежда като има много от тях отворена скоба ъгъл и тогава там е тази ключова дума HTML. Ето още един отворен ъгъл скоба и главата. 

Ето, ако ние превъртете надолу и надолу и надолу, аз съм Ще вървим напред и да се опитаме да търси нещо. Има начин над отдясно тук е отворен тялото скоба. И извикайте от последния време, че ние предложихме че най-простият уеб страница че човек може да напише може да изглежда малко нещо като това. Open HTML тагове, отворена глава маркер, отворете заглавие тагове, след това затворен заглавие, затворена глава, отворена маркер тяло, някакъв текст, затворен орган, затворен HTML. 

Но пауза тук само за миг. Този код, дори ако сте Никога не го написали преди но все още не разбирам какво се случва, изглежда доста добре. Точно така, това е много чист. Това е много хубаво стилово. Много отстъп и бяло пространство. Facebook не е. Така че, защо е толкова Facebook по-лошо от I в написването HTML? Очевидно. 

Точно така, това е като един от пет за стил. Има основателна причина за тях да се намалят тези ъгли. Добре, така че те не искат да направи по-лесно за вас да го прочете. Така че в известен смисъл, те са тя obfuscating, нещо като това кодиране най-малко естетически така че това е по-трудно за Myspace да отиде и да се откъснете от техния начална страница и HTML за него. Оказва се, че с програми макар, включително Chrome, ние можем да се почисти тази до супер лесно. Така че това не е съвсем това е като причина. Какво друго може да е причината. Да. Да, данни бели разходи космически. Какво имаш предвид? Да, точно така. Ако натиснете клавиша Tab на партидата или на бар пространство, да помислят за последиците. Така че всеки клавиш от клавиатурата, е [Недоловим] представени като един байт. 

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

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

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

Но днес, ние ще започнем да пишем код това е всъщност разпознаваем от нас, хората. Оказва се, обаче, ако се върнете към този инструмент в Chrome Огледайте Element, преди това, ние бяхме в раздела Network. Оказва се, че ако отидете на таб елементи, това, което всъщност виждате е Chrome е доста отпечатан версия на същия този HTML. Така че ние сме го deobfuscated. Така че не е мач за компютър. А сега можете действително кликнете наоколо и да започне за да видите йерархията, която е дадена уеб страница. Така че нека действително да направите това. Отивам да вървим напред и да се отворят за моя Mac програма, наречена текст редактиране. И припомни, че това е просто супер проста програма текст. Windows има notepad.exe. И аз отивам да Verbatim въведете следното. Doc тип HTML, отворена скоба HTML, затворена скоба HTML, имаме главата на страницата тук, В края на главата на страницата тук, заглавие ще бъде като, здравей свят. 

И тогава тук, ние се нуждаем тялото на уеб страницата. Closed тялото. И тогава тук, здравей свят. Всичко е наред. Така че ние сме написал супер бърз уеб страница. Отивам да го запишете като hello.html на компютъра си. My Mac, става да се оплакват, мисля, че, чакай малко, това е текстов файл, направете искате да го наречем .txt? Но не, аз искам да се използва точкова HTML. 

И тогава какво е хубаво, ако можех просто щракнете два пъти върху файла, hello.html, тук е моят уеб страница. За съжаление, аз съм най- само човек в света кой може да посещавате тази страница, точно сега. Защото къде се живее очевидно? Това е на моя Mac, нали? Коя е безполезна. Както никой в ​​тази зала камо ли в интернет всъщност може да посетите тази страница. Така че днес, ние трябва да се представим друг елемент. 

И за да направите това, аз отивам да отидете напред и да се отворят облак 9. Така облак 9, разбира се, облак базирани service-- CS50 IDE-- Това има всички наши работни плотове използвате някъде в интернет. А това означава, че всички наши файлове са обществено достъпни вече. Така че нека да вървим напред и да направим това. Отивам да вървим напред и да създадете нов файл NCS50IDE. Отивам да го запишете като преди като hello.html и кликнете спаси. И сега, само за да се спести време, аз ще съм да вървим напред и да копирате поставите този код вместо да го въведете отново. И го спаси. И така, сега имам файл, наречен hello.html. Но как да направя всъщност го отворите като уеб страница? Е, оказва се, вградената да CS50 IDE не е само компилатор като трясък и дебъгер като GDB и букети от други програми, всъщност има пълноправен уеб сървър, работещ в рамките CS50 IDE. 

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

И сме направили, че е малко по-лесно да използвате в CS50IDE от наричайки го Apache 50. Така че да може действително разбере следното. Отивам да кажа Apache 50 начало. И тогава аз съм просто ще кажа, точка. И ние виждаме някои малко по- тайнствена съобщение, настройка на Apache документ [? група?] до дома, убунту, каквото и да е, Слаш работно пространство. Стартиране на уеб сървър Apache 2 успешно. 

Така дълга история кратко, I Току-що натисна звънеца и се обърна на уеб сървър, който е сега слушане в интернет на TCP порт 80 в определен адрес. И тук пише, а това ще се промени Based върху вашето потребителско име и други фактори, но сега, ако забележите I кликнете това, IDE50 дот jharvard и така и така, забележете, че през цялото това време през последните няколко седмици, може да се наложи Забелязах, че вашата собствена потребителско име е вградена в горния десен страна ъгъл на CS50IDE. 

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

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

И наистина, ако аз сега кликнете върху hello.html, Виждам в рамките на този раздел точно този файл. Сега забележите, облак 9 прави нещо малко полезно за нас. В рамките на CS50 IDE, забележите, че има Изведнъж един адрес бара. Това е, защото, въпреки че ние сме използване на Chrome за посещение CS50IDE, вътрешността на CS50IDE е неговата собствена версия на уеб браузър в момента. И така, вместо да усложняват нещата като такива, Отивам да се продължи напред и просто да копирате този URL. Отивам да вървим напред и просто отворя собствен прозорец Chrome. Така че няма магия тук, не CS50IDE. Аз съм просто ще буквално поставете ми J Harvard URL и натиснете Enter. И готово, сега аз и На теория всеки в интернет, ако съм попълнил разрешения по подходящ начин, да посетите този файл. И така, сега, ако кажа, че hello.html, готово, има е моето невероятно underwhelming уеб страница. Така че нека да се направи бърза проверка здрав разум. Поради всичко това е концептуална набор нагоре. И ние всъщност не бях наистина те научи как се пише HTML по себе си. Така Всякакви въпроси далеч за това какво точно се е случило? Да. Дали CS50 притежавате тези уеб страници? В какъв смисъл? Добър въпрос. Така CS50 е собственик CS50.io. Ние сме наистина е купил, че името на домейна. И от природата на вас, момчета влезете в CS50IDE, всичко, което се получи, което се нарича поддомейн. 

Така IDE50-Malan или IDE50-Rob.CS50.io, това е вашата уникална адрес в рамките на нашето име на домейн. Така че за целите на курса, Имате ли свой собствен уникален адрес. Но ние опростихме неща от закупуване на домейн от първо ниво, CS50 дот I / O и след това всички останали са вътрешността на които, така да се каже. И ние ще се върнем към това след няколко седмици, вероятно, особено в крайния проект време, когато някои от вас Може би искате да получите вашите собствени имена на домейни. Това всъщност е относително само направо. Всичко е наред. Така че нека сега направим това. Отивам да се върне в CS50IDE, когато досието ми точно сега, hello.html, не е всичко, което интересно. Бих искал да направя нещо малко по-хубаво от това. Така че аз ще направя нещо подобно. Нека отворена paragraphs.html. Така че това е файл, писах по-рано. В горната част на играта, като Винаги имаме коментари. Но в HTML, коментари изглежда малко по-различно. На третия ред и ред 14, вие виж синтаксиса за стартиране на коментар и в крайна коментар. 

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

Да, така стр. Маркерът р или параграф маркер. И тогава аз просто назаем някои подразбиране Латински текст, който да представлява моите точки. Защото това, което аз исках да демонстрира как може да се представляват параграфи от текст в HTML. И така, какво започва да се случва тук е, че има вече разработване на модел. И нека да вървим напред и да направим това. Позволете ми първо да изключите Apache. И аз ще го кажа, за да се започне отново във вътрешността на днешната източник седем м директория. Така че имам достъп до всичко. 

И сега, ако се върна, за да тази директория обява, забележите гледам всеки файл от днес. И вие ще видите в следващия проблем набор пускаме да ви предостави указания за това точно това. Ако отворя paragraphs.html, това може както и да изглежда като език за програмиране за вас, ако не говорите или четете латински. Но това е само три точки на текст, който са отбелязани в HTML. 

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

Тя е предназначена да се използва в такова по начин, който браузърът само ще направя изрично каквото му казвате да правя. Така че, ако не го кажа дайте ми нов параграф, вие няма да видите нов параграф. И всъщност, това, което Браузърът ще прави е дори и ако ви удари Enter, нека кажем, отново и отново и отново, движейки този текст начин надолу по екрана и после запишете и след това да се презареди, браузърът ще да се срине всичко това празно пространство в само един, който се вижда празно. Всичко е наред. Така че това е маркер ал. И така, каква е схемата това е разработването тук? Е, тя изглежда да е вярно, че HTML е всичко за започване на маркер и завършва с маркер. И това, което е маркер? Е, това е просто парче от синтаксис. Open скоба, ключова дума, затворена скоба, е маркер. Или започнете маркер. И тогава, когато сте направено изразиш себе си, както в приключите с параграфа, нали така да се каже обратното. Но обратното не е съвсем назад. 

Вие просто префикс и същи таг-те назове с наклонена черта като този. Всичко е наред. Така че не всичко, което вълнуващо. И в действителност, ние не вкара уеб всичко по-интересно. Ами ако искам да направя неща, по-големи и смели? Така се оказва, че ето един пример в headings.html, когато в тялото ми, Имам H1 тагове, H2, H3, четири, пет или шест, всички от които изглежда доста тайнствена. Но ако отида отворите този Например, нека да разгледаме. Headings.html. 

Така браузъри по подразбиране могат да ви дадат текст това е голяма и смела на коренно различни размери. H1 е голям. H6 е по-малък и след това всичко останало по средата. Така че това е интересно, но все още не наистина в интернет, което знам. Какво става, ако искаме да имам нещо като списък. , Така че тук е списък с водещи символи на три от къщите на Харвард. 

Как успя да го направим? Е, да разгледаме list.html. И тук, ние виждаме Малко от фънк но нека да разгледаме какво се случва. Така че на базата на това, което току-що сте видели, UL щандове за неподреден списък. Неподреден списък? Просто означава, водещи символи. Няма по номера. Има и нещо, наречено нареден списък, който е най-OL таг. Тогава LI, елемент от списъка е всичко, това означава. 

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

Всичко е наред. Така че всичко това е просто текст. Сега нека да направим нещо по-интересно. Отивам да вървим напред и да назаем някои от този HTML. Отивам да вървим напред и да създадете нов файл тук. И ние ще наричаме това rick.html. Ние имаме несъразмерно употребяван нещо нарича Рик преобръщане в този клас тази година, аз не знам, просто се случи по биологичен начин. 

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

Така че тук имаме изображение в Google Images. И нека да приемем, че това е разумно навсякъде в интернет. Така че аз отивам да се предположи, че е добре за мен действително да приложат това на моята уеб страница. Отивам да се продължи напред и копирате URL на изображението. И сега ако се върна към Cloud 9, нека да видим какво мога да направя тук. Така че тук е само една уеб страница. Това е Рик Астли, хаха, Отивам да се върнем сега да ми браузър, презареди, и интересно. 

Къде е Рик? Така че нека да видим какво се е случило. Всъщност, аз отивам да се преструвам, като не съм направил това. [Недоловим] го сложи тук. Ще се върнем към това в един момент. Така че тук е rick.html. Така че това не е Рик Астли. Така се оказва, можем всъщност го добавите тук. Това е Рик Астли. Отивам да се каже, дайте ми един образ, чийто източник е URL адреса аз просто копират, които Очевидно е щастлив рожден ден едно или друго нещо. 

И сега аз отивам да затворите тага като този. Така че това е опаковъчна супер дълго. Но забележете, че всичко, което съм направено е отворена скоба изображение, източник с атрибут на този. И това е наистина дълъг URL един. И в самия край, забележи това. Защо не съм сторил наклонена черта огъната опора вместо, както всеки друг таг, който има отворена скоба, IMG, затворена скоба? Просто отделете предположение дори ако нямам познаване каквато с HTML преди. 

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

Така че, ако аз сега се презареди този файл, сега Имам една добра уеб страница готвене тук. И ние със сигурност може да Наистина дразнят хората като вместо тях вграждане като линк YouTube. И в действителност, по всяко време което някога сте отишли ​​в YouTube, и ме пусна всъщност случайно Рик се търкаля тук. Така Rick преобръщане. Така че Рик roll-- Отивам да отидете тук. 

[За възпроизвеждане на музика] 

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

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

И това е още парче синтаксис в HTML. В допълнение към таг-те име, открита на името скоба маркер, можете да контролирате поведението на маркера от наличието на цял куп атрибут се равнява на стойността. Умение равнява стойност. И така, например, YouTube ни казва ако искате ширината на това видео за 420 пиксела и височината да бъде 315 пиксела, това е как да го изразя в HTML. 

Източникът на видеото се случва да бъде толкова дълго URL YouTube и след това някои други неща като граничен конструкция е нула, така че най-вероятно означава, че има без граница около това нещо. Оставя се на цял екран, вероятно означава, че потребителят да щракнете върху бутона и всъщност цял ​​екран видеото. Така че, ако аз наистина искам да бъда впечатляващо тук, в Rick дот HTML, вместо да използвате маркера на изображението, нека ме изтриете, че вместо да поставите този. И сега се презареди. А сега ето го отново. Добре, това е достатъчно. Добре, така че аз ще се опитам Трудно е да не се прави това отново. Така че това, което са някои от храна за вкъщи тук? Така HTML, като грозна като тези уеб страници са, всъщност е доста прост. Това не е език за програмиране. То не трябва функции. То не трябва примки. То не трябва условия. Всичко това има е десетки различни етикети, всеки от които е нула или повече атрибути. И в действителност, това, което е забавно за HTML като започнете да се потопите в е, че това е много самостоятелно поучаеми. 

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

Така че ние можем да направим снимки, както добре. И в действителност, ние го направихме преди малко. Нека да вървим напред и да ви покажа. Ето примерен код. Ако някога искате да видите ядосан котка. Така че забележите, че мога има етикет на изображението тук. И аз имам коментар над нея. Имам алтернатива текст за достъпност. Така че някой, който е с помощта на екрана четец от съображения за зрението всъщност може след това да им екранен четец кажа ядосан котка. Защото, ако те не могат да виж изображението, те може да има най-малко компютъра си да им кажа устно какво е то. А източника на този файл е cat.jpeg. Така че в действителност, ако аз наистина исках да получите умен, това, което мога да имам done-- Обещавам да не ходят на Рик Астли, така че Отивам да Google за една котка, вместо. И като отида до Google Изображения тук, и ние ще приемем, че това е снимка на моята котка. 

Да предположим, че имам контрол кликнали или надясно кликнали върху това, случайно страховито. И cat.jpeg Отивам да запазите на компютъра си. Нека сега се върнем към облака 9. Забележете, че тук, мога да отида да качите локални файлове. И ако аз вземам това файл, cat.jpeg, известие че мога да го плъзнете и го пуснете в облак 9 и то се случва да ми крещиш тук. 

Тъй като вече сме сте получили файл cat.jpeg, но това е супер лесно да се вземете една снимка, която сте взета от Facebook или Flickr или други подобни и действително да плъзнете и да го пуснете в облак 9 и след това да го направи част от вашия личен сайт или проблем определя седем или осем, тъй като ние скоро ще видим. И тогава, когато най-накрая да посетите тази котка, приемайки Свалих същата котка, предизвестие that--, че е очарователно. 

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

Ние досега са били вземане много статични уеб страници. Искам да подправка нещата, както следва. Искам да направя моя собствена търсачка. Така че, за да се направи една търсачка, нека отидете напред и да започнем да правим това. Отивам да вървим напред и да се създаде нов файл наречен search.html. И ние сме prefabed версии онлайн. Опа. Не поставете в терминален прозорец ви. Сглобяеми версии онлайн. И аз отивам да започнете по следния начин. Така че тук е началото на файл, наречен search.html. Отивам да го запишете в днешния източник директория. Отивам да наричаме това търсене. Всъщност, ние ще направим по-добре. CS50 Търсене и всъщност това марка. И сега, аз отивам да се каже, нещо като H1 CS50 Search. И тогава тук, H2 очаквайте скоро. И само за да обобщим, H1 и H2 предвид това, което съответно? 

Да, толкова голям и смел, и не толкова голям, но все пак смели. Така че, ако спести това и разясни тук, нека да видим файл search.html на. Добре, а този е right-- [недоловим]. В готовност. Дейвид е объркан. О, това е точно там. Дейвид е идиот. ДОБРЕ. Така че там е то. Така че търсенето CS50 очаквайте скоро. Така че сега, нека да синтезират това, което направихме миналата седмица. 

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

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

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

И забележи, сега, имам този вид сива текст че изчезва Веднага щом започнете да пишете, но това е може би нещо които сте виждали в други уеб страници. Аз наистина не искали бутона Изпрати. Така че аз съм всъщност ще даде на Бутона Подаване на стойност от търсене. И сега, ако аз се презареди, забележите, че Бутон ми става на име търсене. Знаеш ли, аз наистина не като логото тук. Така Google Font генератор. 

Искам да подправка това до по-нататък. Така CS50 търсене. Позволете ми да създам собствена лого. Това изглежда добре. Така че сега нека да запазите този as-- хайде. Когато се върви? Има. ДОБРЕ. Го пропуснали. Запази като. Глупави браузъри. Готовност, ние ще поправя това веднъж и завинаги. Ето. Всичко е наред. Извинете. Свободен ден. Сега това е фънки. Излез на цял екран. Всичко е наред. 

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

Да вървим напред и да направим тук източник на изображение е равно logo.gif. Затворете това. Запазване. И сега, ако се върна в моето търсене страница, сега се търсят доста добра. Добре, така че не трябва доста направил нищо полезно. Всъщност, нека се опитаме да търсите за една котка и да видим какво ще стане. Котки. Мамка му. Тя не просто работа, както изглежда. Така че това, което е ключов елемент което липсва тук? 

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

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

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

Така че това, което е действие? Action е странно име, но това просто означава, кой ще се справи действието на тази форма? Когато натиснете Търсене, където ако резултатът отидете? И ако аз сега се върнем към моя форма тук и се презарежда уеб страницата ми и сега търси за нещо, като куче, забележете сега Аз отново реализира Google. Нали така? 

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

И тъй като моя браузър разбира, HTTP, тя всъщност изграждане на URL, така че това, което Аз в крайна сметка отново в браузъра си, Забележете какво се случва когато се търси куче. Ако щракнете върху Търсене, забележите, че адреса променя както възнамерявах да google.com/search~~V заявка се равнява на куче. И това е така, защото формата знае, защото методът е да получите, просто да го добавите към този URL там. 

Сега, тези уеб страници са все още грозни. Така че нека да се въведе един друг парче синтаксис, ако можем днес. И това е нещо, което е известно като Cascading Style Sheets. Така че нека да разгледаме най- този пример тук и виж ако можем да заключим, какво се случва. Това е CSS0.html. И това е мястото, където нещата получи малко грозно. Тъй съжаление, в света на интернет, HTML сам не може да направи всичко. И така, ако искате да стилизирам вашата уеб страница, вие всъщност трябва да се съсредоточи върху естетика по различен начин. Така че тук, имам тялото на моя уеб страница във вътрешността на което е голям Разделение. И Разделения просто означава деление. Така че това е като точка, но тя не притежава същите семантиката на абзац от текст. 

Това просто означава, към браузър, тук идва голяма правоъгълна област моя уеб страница, искам да се справя, специално. Сега, линия 21, където е, че Разделения започва. И просто да вземе предположение. Какъв е ефектът на линия 21 за почивка на съдържанието на страницата? Центриране тя. Това е всичко. Така че ние не сме виждали в начин на всъщност центриране на текста. 

В действителност, търсачката ми, за разлика от действителната Google, бе оправдан през цялото наляво. И така, сега в ред 21, искам да кажа, хей браузър, създаде подразделение на страницата. Само ми дай един голям, невидим правоъгълник. Ето как аз искам да мисля за уеб страницата. И тогава се стилизирам както следва. Вътре на тези цитати, сега, е втори език че ние въведохме днес наречени Cascading Style Sheets. За щастие, той също не е език за програмиране, така че е много ограничено в своето синтаксис, но също е много ограничен в своята функционалност като има предвид, HTML е за всички маркиране до данните на дадена уеб страница и структурата на уеб страница. CSS е по принцип за последна миля, естетиката, получаване на размера и цвета и поставяне точно така в страницата. И наистина, тя се формира с ключови двойки стойности. 

А този имот, текст приведе, последвано от дебелото черво, последвано от стойността на това собственост, която в този случай е център. И сега забележите може да се помести тези неща. Ако исках всичко с това, че Аз бях подчертано да бъде центриран, ето защо имам линия 21 и съответния ред 31. Но предполагам, че сега искам да кажа, John Harvard, добре дошли в моята начална страница. 

Символ Copyright Джон Харвард. И предполагам, че искам първата от тези линии да бъдат доста големи. 36 пиксела. Така че това е един достоен размер. И аз исках теглото му да бъдат смели. Но след това по-долу, които, Искам по-малък текст. И под това, което искам още по-малък текст. Извинете. Днес се чувства като един почивен ден. 

Така че сега, това, което правя аз да изразя това? Тук, на ред 22 е внедрен Разделение или вложените Разделения, ако щете. Тя също има своя собствена таг стил. I зададени с размер на шрифта 36. I посочите тегло шрифта на смели. Тук долу, аз само зададени 24 пиксела. И накрая, в съответствие 28, I зададени 12. Така че просто като бърза проверка разсъдъка и като човек четене това, кои думи на екрана са всъщност ще бъдем смели? Кои линии всъщност са смели? 

Просто Джон Харвард. Нали така? Защото точно както линия 22 казва, хей браузър, тук е подразделение на страницата. Направете го на шрифта 36 точка. Направи теглото на шрифта удебелен шрифт. Щом достигнете съответния краен маркер или затворена маркер по линия 24, че средствата, хей браузър, спрем да правим каквото и да е, което правите. И предизвестие да е ясно, въпреки че ред 22 има всички тези атрибути като стил, когато затворите тага в съответствие 24, вие само споменава името на маркера е. 

Вие не се повтаря думата стил или всичко, което е вътре на тези цитати. И така, ако аз гледам на това сега в браузъра си, нека да Един поглед към крайния резултат. Пусни ме напред към файла, който е CSS 0. И тя все още е доста обикновена, но все доста интересно. Но се оказва, че има други неща, които мога да направя тук, и с риск от вземане това напълно отвратително, отбележим, че в моята тялото на моята уеб страница, Мога да направя нещо смешно като бг или цвета на фона. 

И бързо, кой е любимият ти цвят? Green чух. Всичко е наред. Така че сега, ако съм удари презареждане, имаме зелена уеб страница. Добре, така че не е лошо. И сега, ако искам да направя това наистина готино, аз може да направи цвета на моя текст дори и червено. Така че нека да видим как изглежда това. Сега се търсят доста добра. И тук, ако наистина искам да се забъркваш с някого или ако искате да бъдете един от тези хора, които се опитва да ви подведе да посетите уеб страница, защото са подмамени Google да мислят, че има цял куп ключови думи like-- Нека да видим, презареди. Когато мина? И там ни го. Всичко е наред. Затова казвам това като настрана, ние ще говорим за тези неща в рамките на няколко седмици когато говорим за сигурност, ако действително вграждат цели гроздове ключови думи в уеб страница, дори ако те не са видими за една човека, някой като Google, разбира се, все още може да се намери в действителност това. Добре, така че това е доста отвратителен доста бързо. 

И в действителност, това не е всичко че голяма разлика моя собствен уеб страница като Бакалавърския, които Започнах да използвате Google за да си намерят последните версии на старите ми уебсайтове. Това беше доста зле. Всъщност, аз открих една точно преди клас. Но има и по-зле там. Това очевидно беше моят начална страница още през 1996 г.. Очевидно Мислех, че е целесъобразно да се питат хората своето име Преди да успеят да всъщност видя моята уеб страница. 

И тогава аз им показах нещо глупаво, вероятно. Аз ще копае повече за следващия път. Но за сега, нека помисли малко дизайн. Ние говорихме за стил. И тази страница по този начин досега и почти всичко съм написал е доста чиста стилово. Но какво да кажем за дизайн? Е, има много съкращения в това, което съм правил тук. 

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

Оказва се, че много по- като в C където ние може да започне да фактор от някакъв код в заглавните файлове, така можем да направим същото и в HTML. И стъпка към това е, както следва. Забележете, че тази версия, CSS1.html е структурно точно същата уеб страница. Така че аз имам един куп на divs, но този път, аз съм отървали на обвивката Разделения както ще видите. 

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

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

Ей браузър, елемент, чиято ID е средна, то 24 пиксела направи. И хей ​​браузър, ако виждате един Идеята на дъното, да я направи 12 пиксела. Ефектът в края е точно Сам. Ако аз отида в CSS 1 г. страница изглежда по същия начин. Но ние сме една крачка към малко по-добър дизайн. Нека сега се върнем тук, за да CSS2 и да видим какво друго, което съм правил. 

Сега страницата е наистина, наистина чист. Всъщност, аз може да се побере всички съдържанието на една страница тук. Но това, което аз имам нов маркер въведена, очевидно? Link. И това не е най-доброто име за маркера, защото не е връзка, в смисъл, че ние го знаем, но това означава, линк в друг файл. Това е нещо като остър включи в C. 

Това е начинът, по HTML да се каже, хей браузър, иди се съдържанието на файла, наречен css2.css. Връзката, за мен, е, че това е един лист със стилове. И наистина, това е, което на един от най- S е в Cascading Style Sheets средства. Това е стил лист. Това е просто текстов файл, съдържащ цял куп собственост. Това е цял куп стилове които искате да приложите към страница. 

И така, това очевидно е отнасящи се до втори файл. И ако мога да отворя, че CSS2.css, забележите, че всичко, което съм правил е да копирате и поставите всички на този в този файл. И сега, дори и ако никога не сте кодирани тези неща и преди, Просто помисли с пословичната инженеринг шапка на, защо е тази на по-добър дизайн, вероятно? Факторинг извън тези CSS свойства, пускането им в собственото си досие. Въпреки че сме решени този Преди проблем като пет минути в първия вариант. 

Ние не сме подобрили страница стилистично, това е само по-добре дизайн в някакъв смисъл. Защо мислиш? Да. Повече гъвкавост по какъв начин? Да. Така че, ако искате да отидете назад и да промените нещата, Сега, имате едно място където можете да промените нещата. И всъщност, за нещо, като проблем определя седем, където ще се приложи уебсайт борсова търговия, че ще има куп страници. И това ще бъде наистина досадно, ако решите, хм, Аз наистина не искали 24 пиксела, искам да бъде 28 пиксела или малко по-голям. И след това трябва да се направи глобалното търсене и заместване или отворете всички файлове на уебсайта си просто дори да промени една стойност. Чрез факторинг тези стилове в едно централно място, Сега можете да отворите един текстов файл в CS50IDE във всяка програма, го промени, да го запишете, и направено. Вие сте тези, размножен промени навсякъде. И това ще бъде същият в една точка з файл, както добре. Така че всички въпроси, като по този начин Доколкото по този синтаксис? Добре, така че ние сме направил всичко това им се струва с изключение на реалното изпълнение на хипервръзки. И така, нека да вървим напред и да направим това. Нека да вървим напред и да създадете нов файл тук. Отивам да го наречем link.html, поставени в днешния код. 

И аз отивам да правя отворена скоба тип док HTML. Като настрана, това нещо в отгоре, тази декларация тип док, това е единственото, което е странно с удивителен знак. Ти просто трябва да го направя и да го има означава, ние сме с помощта HTML версия 5. По-стари версии на език е имал много по-дълго низове, които са необходими, за да поставят там. Така че тук е един пример, наречен връзка. 

Имам нужда от тялото на моята уеб страница тук. И в случая, под HREF равни нека кажем HTTP://www.disney.com и моят любим сайт, ние ще кажем. Добре, така че много безвреден, лесен страница. Ако аз сега отида в моята директория листинг тук и да се отворят link.html, имаме хипер текст. 

И наистина, това е мястото, където Н в HTTP идва от. Протокол за прехвърляне на хипертекст е около прехвърлянето на текст че има хипервръзки към други ресурси. И наистина, тук е познатото, ако ретро, ​​синя връзка, че ако се натисне, действително ще ме доведе до Disney.com. Сега, о, че излиза скоро. Добре, така че сега, какви са някои на последиците от това? 

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

И в действителност, може да сте получили нещо, което се казва, като натиснете тук за да зададете нова парола PayPal. И сега, забележете, ако това не е Disney.com но както и badplace.com презареди, имайте предвид, че текстът тук Може да се каже каквото и да било. И в действителност, това е само на думи. Защо не мога действително да бъде супер злонамерен и да кажа http://www.paypal.com. 

Кликнете тук, за нулиране на вашия PayPal парола и сега се презареди. Това изглежда доста легитимни, нали? Искам да кажа, аз не бих кликнете върху имейл, който просто казва това. Но забележете дихотомията тук. Той казва, www.paypal.com, и в действителност, чакай малко, ние знаем, че искате Индексът S за сигурност. Така че сега, отидете на www.paypal.com HTTPS, но ако никога не сте направили това и преди, получите в навик за кръжи над малките линкове тук. И това е трудно да се види На екрана, и това не е всичко, че по-лесно тук. Но тук, в пътя си надолу на мъничък ъгъл прави браузъра всъщност ви, че ние ще кажете да badplace.com вместо Paypal.com. Сега, къде отиваме с това? Всички примери, които сме направили днес, ние сме твърди кодирани и въведен ръчно. Мрежата е невероятно безинтересно, когато трудно кодирате своите уеб страници, така че съдържанието е статично и никога не се променя. Разбира се, всички наши любимите сайтове днес, независимо дали това е Gmail или Twitter или Facebook или произволен брой други са динамични. Те се променя в отговор на приноса на потребителите точно като резултатите от търсенето с Google. 

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

[За възпроизвеждане на музика]