[Музички] 

Дејвид Џ MALAN: Ова е CS50 и ова е почеток на недела 7. Па добредојде назад. И може да се сети дека проблем во собата во четири, таму беше малку на чистач лов за некои чудесната награди при што откако ќе се опорави на фотографии персонал и тука и во Њу Хевн, сте биле предизвикани да се најде како многу од оние компјутерски научници како што може. И ние го добивме во целина куп на поднесоци. Мислев дека ќе ги споделат неколку со вас тука и денес. 

И ние ќе ја објавите на сите овие онлајн. Но, особено, јас сакав да привлече вашето внимание to-- добро еден, Сем беше во неколку од нив генерално се претставиле како оваа. Но, се чини дека од утрово, добитникот беше одреден некој наречен Кен со 24 од персоналот фатени на камера или малку повеќе, кога ќе се земе во сметка на повеќе вработени во слики. Сликата тука е Кен следната Марија во Њу Хејвен. 

Сега, Кен, иако, се врти надвор е малку на случајот од аголот кои се уште не се случило претходно. Излегува дека тоа не се случи за мене да се стави парична казна печати во проблемот постави четири во која се вели дека вработените се неподобни за чудесната награди бидејќи Кен е, се разбира, еден од фотографите на нашите вработени. Сега, со тоа, рече, тој првично ми пиша да се каже Ве молиме да не ги објави овие фотографии на интернет. Мислам дека во голем дел бидејќи поголемиот дел од фотографиите дека овој фотограф го погледнете малку нешто како ова. И слично. 

Но Кен би ме сакал да Ве уверам дека тој е многу добар фотограф, Тој е професионален, тој зема фотографии кои не се во матно, кои се подобри во фокусот, и тој се неколку од нашите вработени. Но, наместо само да се признае Кен, она што ние сме мислеле дека би го сторила се оди низ листата од Крај на студентите кои се поднесе. И излегува дека Ленс со 15 слики како на ова утро беше нашиот победник. 

И сликата тука е продолжеток со Колтон, со Skaz, со себе и со Сем. Но, тогаш излегува дека од 11:46, па само пред малку, Се вратив на мојот е-мејл и да се најде дека имавме уште еден поднесување од студент по име Бони чија е-мејл дека само ова. Не се случува да се лаже, јас сум го прават тоа за време на часот. А потоа продолжи да се закачите само 14 слики, еден срамежлив на Ленс е 15. 

Но, во фотографии Бони, испаѓа надвор се повеќе членови на персоналот, Сем меѓу нив, па она што мислевме би направите е да се признае и двете од овие. Така што во прилог на добивање на Dropbox просторот, што на сите кои учествуваа добива, овие два дела ќе исто така, добијат убав ручек грижеа за нив и нивната секција другари овој следната недела. И така ќе се слушне од нас, Копје и Бони, во врска со тоа. Толку голема Congrats на нив. Сега, оние од вас кои би како ручек поопшто знам дека CS50 ручек во Кембриџ и New Haven е овој петок. Оди на веб коса црта RSVP CS50 е. А сега еден збор на семинари. Повеќе curricularly. Па ние сме во завршна фаза на точка на семестарот каде што ќе треба да почнат размислување за конечниот проекти. И всушност, во само малку, ќе т.н. пред предлозите да се должи. Па пред предлози имаат за цел да биде прилично мало влијание и навистина само можност за можете да напишат по една кратка белешка вашата настава колеги да известуваат него или неа она што го мислиш Можеби ќе сакате да направите за вашата конечна проектот. 

Сега, многу студенти се заокружи прави web-базирана конечниот проекти. И, се разбира, ние сме само сега минатата недела во овој и пошироко нуркање во веб програмирање. Така да не се грижи ако имаат апсолутно никаква идеја како сакаш да се изгради на идеи кои може да имате во вашиот ум. Ова е навистина само принудувајќи функција за да ве размислување и зборуваме со вашиот ТФ за тоа. Но, за да ви помогне со тоа, и со конечниот проекти во крајна линија, знам дека CS50 има традиција на нудат семинари. 

И овие се опционални, раце, или предавање врз основа на можности да дознаете повеќе за теми кои се малку потчинето на курсот Наставната програма, но сепак прекрасен материјал за да се вози конечниот проекти. Па така ова е листа која е Персоналот CS50 тука во Њу Хејвн имаат излезе со за оваа година за iOS програмирање, Андроид програмирање, развојот на играта, и гроздовете на повеќе алатки и јазици и техники. 

Па да се внимава на веб-страницата на CS50 е. А во меѓувреме, ако сакате да ги регистрирате вашиот интерес во некој од овие, одат на коса црта регистар CS50 е. И тогаш ние ќе го следат во однос на дена и ред на летање и локации и everything-- повеќето сè ќе да биде емитувана, а исто така достапни на барање после ако не, всушност може да се направи тоа. Значи без понатамошно ado, ние останев последен пат со ГЕТ. 

И тоа беше како на пораката што беше во внатрешноста на виртуелниот плик, да се потсетиме, која поминавме од рутер до рутер за да се рутер помеѓу веб прелистувачот и веб сервер. И таа порака изгледаше малку нешто како ова. Ова беше повеќе arcane порака дека всушност бил во внатрешноста на плик напишано на парче хартија, чија Првата линија вели буквално, се црта. 

И само како разумност провери, она што го означи коса црта? Што значи коса црта значи кога барањето на веб-страница? Можете да го побараат тоа цело време. Повеќето секој пат кога ќе посетите веб-сајт, можете не, всушност тип во името на датотеката. Најверојатно само отидете на Facebook.com, влезат, gmail.com, или слично. И што црта претставуваат? Што датотека? Или она страница, конкретно? 

Индекс, да. Па стандардно страница. Значи, ако не го одредите датотека именува како што ќе почнете да се види, ти си, всушност, само со барање дај ми стандардно страница на Фејсбук или да ми даде моето сандаче или да му даде ме стандардно страница на вести на веб-Ен-Ен или слично. И сервер потоа реагира на таа порака со нешто како ова, велејќи дека да, јас зборувате HTTP верзија 1.1. 

200, што е статусот законик, што ние, луѓето ретко некогаш сте се види, бидејќи тоа е добро. Бидејќи тоа значи дека во ред, на барање беше прифатено постапува правилно. И типот на содржина очигледно во одговорот е доста често, но не секогаш, текст. И посебно, на HTML. А тоа е, всушност, каде што ја гледаме денес. 

Така, всушност, јас ќе одам да се оди напред и да се отвори прелистувачот. Одам да се користат Хром, можете да го користите повеќето било кој прелистувач во неделите што доаѓаат. Ние генерално препорачуваат Хром затоа што тоа е особено добро за развивачите на софтвер. Тоа е се здобија со многу изградени во алатки кои го прават тоа полесно да се развијат не само HTML и CSS, работите ние ќе почнеме да зборуваме за денес, но исто така и на други јазици, како и. 

А јас ќе одам да се оди напред и да си одат to-- Одам да се контролира или десен клик кликнете било каде на веб-страница. А јас ќе одам да се оди да се испита Елемент. А јас ќе одам да се tweak ми екран само малку тука. Дозволете ми да се помести ова до дното. Значи ова е она што се нарекува Инспектор Хром. Значи ова е како дебагирање алатка е вградена во Хром. 

Сите од вас веќе ја имаат оваа ако сте биле со користење на Хром. И тоа ви овозможува да видите што се случува на под хаубата на некои веб-страница. Значи, да се всушност ги се погледне на овој како што следува. Таа има начин повеќе функции и ние сме загрижени за денес. Но, има овие јазичиња овде. Елементи, мрежа, извори, временска рамка, и некои други работи. Одам да кликнете на Мрежа за еден миг. 

И тоа е малку преголема на прв поглед тука. Но, она што јас ќе одам да направите е да ги споделите со мене тоа малку се поедностави. Одам да го вклучите снимање на светлина, така што тоа е црвено. А јас ќе одам да се каже сочува дневникот. И ова е само малку нешто што сфатиле со текот на времето што се случува да се спаси се што се случува во прелистувачот. И сега ќе одам да се оди да http://facebook.com. 

Всушност, ајде да го направите Надвор од мрежа за добра мерка, коса црта. Влезе. Па URL, кој многу од сте го посетиле. И сега веб Фејсбук страница доаѓа на врвот. А потоа и целиот куп на работи одлетале на дното. И всушност, излегува дека кога ќе ја посетите Facebook.com, вие не сте само еден правење HTTP барањето, излегува дека ќе Facebook.com испраќа 41 од оние коверти, секој со свој барање ГЕТ, како што е наведено, иако зад екранот тука, на дното на екранот, што укажува на тоа дека, навистина, мојот прелистувачот направен 41 барања. 

И збирно, ја префрли 861 килобајти и се тоа поради некоја причина колку што осум секунди за да ја преземете сето тоа. Па тоа е, всушност, малку чудно тој сајт Фејсбук би се дека долг, но тоа да биде така и во овој случај. Сега, сето ова јас навистина не се грижат за, освен за врвниот барање. Па ајде да одиме на овој еден, токму тука и дозволете ми да одзумирате за само еден миг. 

И дозволете ми да зумирате на ова. Значи она што го направив во лево, иако има многу случува овде Сум се истакнат Facebook.com, а потоа забележавте дека сум лизгање надолу, лизгање надолу, лизгање надолу, да побара заглавија. И ќе видите дека Хром се покажува ме во суштина внатрешниот содржината на барањето не сум направил. Тоа не е за форматирање во сосема ист начин, но забележително е спомнувањето добие, известување има спомнувањето на домаќинот, Facebook.com, на патот, или коса црта, кој е на датотеката што се бара. 

А потоа ако јас дојдете врати го, всушност ќе види дека она што на Фејсбук врати за мене е сите овие заглавија. Значи внатре во тоа виртуелна коверт навистина многу од клучните вредност парови. Еден збор, на дебелото црево, а потоа и вредност. Еден збор, дебелото црево, и вредност. Ова се нарекува заглавија. И има начин повеќе детали тука од ние всушност се грижи за моментов. 

Но, ова е втор на Последната таму долу, известување, дека серверот Facebook.com е, навистина рече тука доаѓа некој текст HTML. Па сето ова е да се каже дека кога ќе ја побарате на веб страница од пребарувачот со сервер, дека серверот одговара со плик на сопствената во внатрешноста на кој е текст. Со други зборови, на HTML. HyperText Markup Language. Која е на друг јазик кои ќе се воведат и денес дека луѓето или компјутери генерира со цел спроведување на веб страници. 

Конкретно, да ги погледнеме во овој. Одам да сега да се вратиме до веб-страницата на Фејсбук. А јас ќе одам да се само контрола клик или десен клик и кликнете на View Page Source. Па дури и ако не го користите Хром, IE да го направите тоа, Firefox може да го направите ова, Сафари да го направите ова, иако во менито опции може да изгледа малку различен. И ова е HTML дека Марк и компанија на Фејсбук го напишале. 

И колективно, овој јазик овде спроведува сината и белата страница што сме го виделе пред еден миг. Сега, ова е малку преголема. Но, ако ние се погледне нагоре во горниот лев агол, ние сме ќе почнете да видите некои модели. Тоа изгледа како има многу од овие отворена заграда агол и потоа, тука е овој клучен збор HTML. Еве уште отворена аглеста заграда и главата. 

Еве, ако се движите надолу и надолу и надолу, јас сум да се оди напред и да се обидат да бараат нешто. Има начин во текот на вистинскиот тука е отворена тело заграда. И да се потсетиме на минатата времето што ни е предложен дека наједноставен веб-страница што човек може да се напише Може да се погледне малку нешто како ова. Отворено HTML таг, отворена глава запис, отворете насловот ознака, потоа затворен наслов, затворен глава, отворен телото таг, на некој текст, затворена тело, затворен HTML. 

Туку пауза тука за само еден миг. Овој код, дури и ако сте тоа никогаш не се напишани пред но се уште не се разбирам она што се случува, изгледа прилично добро. Право, тоа е многу чиста. Тоа е многу стилски убаво. А многу од вовлекување и белиот простор. Фејсбук не е. Значи, зошто е толку многу на Фејсбук полошо отколку што во пишување на HTML? Очигледно. 

Добро, ова е како една од пет за стил. Има силна причина за нив да се намалат овие агли. Добро, така што тие не сакаат да се направи полесно за вас да го прочита. Па во извесна смисла, тие се тоа obfuscating, сортирање на тоа питачи најмалку естетски така дека тоа е потешко за Myspace да одат и да отлепвам нивните почетна страница и HTML за тоа. Излегува дека со програми иако, вклучувајќи Хром, можеме да се исчисти овој горе супер лесно. Па тоа не е сосема тоа е како причина. Што друго може да биде причина. Је. Да, податоци бела трошоци простор. Што мислиш? Да, точно. Ако притиснете на копчето Tab многу или на space, разгледа импликациите. Па секој на тастатурата е [Беззвучен] претставен како еден бајт. 

Па претпоставувам дека Марк или било која од devs овие денови хитови на spacebar само еднаш во овој HTML страница, која претставува Фејсбук страница. И Facebook има многу на корисници овие денови. Па претпоставувам дека Фејсбук почетната страница од пребарувачот е посетен од една милијарда луѓе денес. И некој на Фејсбук има погодувајќи ја само пречката простор само еднаш. 

Па еден дополнителен бајт, милијарда барања, колку повеќе податоци е Фејсбук пренос преку интернет затоа што некој ја погоди spacebar на неговата или нејзината тастатура? Една милијарда бајти, или една GIGABYTE на податоците се праќаат од серверите на Фејсбук за луѓето од целиот Светот без добра причина. Сега, тоа е само еден простор. 

Замислете ако ние всушност се исчисти овој работа и тоа вовлечен и додаде многу бели простор и табот карактери и празни места можете завршуваат трошење гигабајти, ако не тера бајти повеќе простор. И така супер честа појава во Крај на светот на Веб развој е да омаловажавам вашиот код. И ние на крајот ќе се види како може да го направите тоа. 

Но, денес, ќе почнеме со пишување на код кој е всушност може да се чита од страна на нас луѓето. Излезе, сепак, ако се вратиме на оваа алатка во Хром Увид елемент, претходно, бевме на јазичето мрежа. Излегува дека ако се оди на табот елементи, она што всушност се види Хром е прилично печатени верзија на истата HTML. Па ние сме го deobfuscated. Па не е натпревар за компјутер. И сега може да всушност кликнете на околу и да почне за да го видиш хиерархијата што е веб-страница. Значи, да се, всушност, го направите тоа. Одам да се оди напред и да се отвори за мојот Mac програма наречена Уреди текст. И да се потсетиме дека ова е само супер едноставен програма текст. Windows има notepad.exe. А јас ќе одам да се дословно Внесете го следново. Doc тип HTML, отворена заграда HTML, затворена заграда HTML, ние сме на чело на страница тука, крајот на шефот на страница тука, наслов ќе биде како, Здраво светот. 

А потоа и овде на земјата, ни треба органот на веб-страница. Затворен тело. А потоа и во тука, Здраво светот. Во ред. Значи ние сме писмени супер брз веб-страница. Одам да го зачувате како hello.html на мојот десктоп. Мојот Mac ќе се жалат, мислејќи дека, почекајте една минута, ова е текст фајл, направете сакате да го наречеме .txt? Но, не, сакам да се користи точка на HTML. 

И тогаш што е убаво, ако јас само двоен клик оваа датотека, hello.html, тука е мојата веб-страница. За жал, јас сум единствениот човек во светот кој може да ја посетите оваа страница во моментов. Бидејќи од каде живеат очигледно? Тоа е на мојот Mac, нели? Која е бескорисна. Како никој во оваа соба а камоли на интернет всушност, може да ја посетите оваа страница. Така, денес, ние треба да се се воведе уште еден елемент. 

И да го направите ова, ќе одам да се оди напред и да се отвори облак 9. Па облак 9 е, се разбира облак базирани service-- CS50 IDE-- кој ги има сите на нашите простори за работа работи некаде на интернет. А тоа значи дека сите наши датотеки се јавно достапни веќе. Значи, да се оди напред и да го направите тоа. Одам да се оди напред и да креирате нова датотека NCS50IDE. Одам да го зачувате како пред како hello.html и кликнете на Save. И сега само за да заштедите време, јас ќе одам да се оди напред и да ги копирате поставите овој код наместо да го препишат. И зачувајте. И така сега имам датотека наречена hello.html. Но, како да направам, всушност, отворете како веб страница? Па, излегува на изградена во CS50 ИРО не е само компајлерот како ѕвекот и дебагер како GDB и гроздовете на други програми, има всушност е полноправно веб серверот се извршува во рамките на CS50 ИРО. 

Сите од вас, тоа е да се каже, имате свој веб сервер. И веб сервер е само парче на софтвер, чија цел во животот е да им служи на веб страни. Да се ​​слуша за барања од прелистувачи и одговори со малку виртуелни пликови во внатрешноста на кој е содржини кои што сум напишал. Па овој веб серверот е всушност слободни и софтвер со отворен код. Каде што само значи дека софтверот со отворен код софтвер што некој друг има напишано дека сите ние можеме да всушност се види и да ја преземете, па дури и промена на изворниот код. И се вика Апачи. 

И ние го направи тоа малку полесно да се користите во CS50IDE страна нарекувајќи Апачи 50. Така што тоа всушност може да разбере следново. Јас ќе одам да се каже Apache-то на 50 почеток. И тогаш јас сум само ќе кажам точка. И можеме да видиме некои малку arcane порака велејќи поставување на Apache-то е документ [? група?] до дома, Ubuntu, што и да е, намалување на работен простор. Почнувајќи веб сервер Apache 2 успешно. 

Па скратам приказната, јас Само што се наметнува едно копче и се сврте на веб сервер кој е сега слушање на интернет на TCP порти 80 во одредена адреса. И пишува овде, и ова ќе се промени врз основа за Вашето корисничко име и други фактори, но информации сега ако јас кликнете на ова, IDE50 точка jharvard и така и така, забележуваат дека сето ова време во изминатите неколку недели, може да имаат забележав дека вашиот сопствен корисничко име е вграден во горниот десен агол на CS50IDE. 

И сето тоа, всушност, не било Времето на адресата на која може да се посетат сите на вашите датотеки преку интернет. До сега, тоа не е важно, бидејќи во C, обично сакате работите да работи во терминал, не на интернет. Но, денес, ние започнуваме пишување веб базирани код кои ги сакаме достапен на јавноста адреси. Значи она што јас ќе одам да направите е да кликнете на овој URL. 

И ќе забележите дека го гледам прилично грди индекс, на директориумот, но она што фајлови се издвојува за вас веројатно? Hello.html. Тоа е затоа што ми го спаси датотека во мојот работен простор. И она што ми го кажа Apache веб серверот се погледне во работниот простор директориум на Давид. И нека секој во свет видите овие датотеки. 

И, навистина, ако јас сега кликнете на hello.html, Гледам во ова јазиче токму таа датотека. Сега се забележи, облак 9 прави нешто малку корисно за нас. Рок CS50 ИРО, забележително е одеднаш на адреса бар. Тоа е затоа што иако ние сме користење Хром да ја посетите CS50IDE, внатрешноста на CS50IDE е неговото верзија на веб прелистувачот во моментов. И така, наместо комплицира работите како што се, Одам да се оди напред и само да го копирате овој URL-то. Одам да се оди напред и само отворам сопствен прозорец Хром. Па нема магија тука, нема CS50IDE. Јас сум само ќе се буквално ставете мојата Ј Харвард URL адреса и притиснете Enter. И Voila, сега, и Во теорија, секој на интернет, ако сум конфигуриран дозволи соодветно, да ја посетите оваа датотека. И така сега, ако реков hello.html, Voila, има е мојот неверојатно underwhelming веб-страница. Значи, да се направи брза проверка разумност. Бидејќи сето тоа е концептуална поставеност. И ние, всушност, не сум навистина те научи како да пишувате HTML сама за себе. Со тоа какви прашања досега на она што едноставно се случи? Да. Дали CS50 поседувате овие веб страни? Во која смисла? Добро прашање. Па CS50 е сопственик CS50.io. Ние сме навистина купи овој домен име. И по природа од вас момци влезете во CS50IDE, сите ќе го добиете она што се нарекува домен. 

Па IDE50-MALAN или IDE50-Rob.CS50.io, тоа е вашата единствена адреса во рок од нашето име на домен. Е за целите на курсот, имате своја единствена адреса. Но, ние сме поедноставен работите од купување на домен од прво ниво, CS50 точка I / O и тогаш сите други се внатре во тоа, така да се каже. И ние ќе се вратам на тоа во неколку недели, најверојатно, особено на завршен проект време, кога некои од вас Можеби ќе сакате да се добие вашиот домен имиња. Тоа е всушност релативно јасна. Во ред. Па ајде сега да го направите ова. Одам да се врати во CS50IDE, каде што моето досие, токму сега, hello.html, не е толку интересно. Би сакал да направи нешто малку поубаво од тоа. Па јас ќе одам да се направи нешто како ова. Дозволете ми отворен paragraphs.html. Значи ова е датотека напишав однапред. На врвот на тоа, како и секогаш, имаме коментари. Но во HTML, коментари изгледа малку поинаква. On line три и линија 14, ќе види синтаксата за да почне коментар и завршуваат коментар. 

Но, ниту еден од работи во помеѓу прашањата функционално. Тоа е само една белешка на човековите што се случува тука. И само како брз разумност провери, ако јас се движите надолу, она што е очигледно нови ознака што воведовме? Тагови досега видовме се отворени Држач за HTML, главата, наслов, и телото. Но она што е очигледно новите сега? 

Да, па стр. Таг p или став таг. И тогаш јас само позајмени некои стандардно Латински текст, за да ја конституираат мојата параграфи. Затоа што сакав да покажуваат дека е тоа како може да претставуваат ставовите на текст во HTML. И така што почнува да се случи тука е дека има веќе развивањето на моделот. И дозволете ми да оди напред и да го направите тоа. Дозволете ми најнапред да го исклучите Апачи. А јас ќе одам да се каже да се почне повторно во внатрешноста на денешното извор седум м директориум. Така што имам пристап до сè. 

И сега, ако се вратам да оваа директориумот, известување Гледам секоја датотека од денес. И ќе видите во Следниот проблем сет, ние ќе ви даде инструкции за вршење токму тоа. Ако јас се отвори paragraphs.html, ова може како и да изгледа како програмски јазик за вас, ако не го разбираат или читаат латински. Но ова е само три параграфи на текст, кои се означени во HTML. 

И ќе забележите дека ставот паузите помеѓу нив. Затоа што се испоставува, па дури и покрај тоа што може да биде склон да го направите ова, додека во реалниот свет, ако сакате да се стави линија паузи меѓу нештата, Може да сосема едноставно да го направите ова, погодувајќи Зачувај. И сега, ако јас ја превчитате тука, огласот дека сè само ја замаглува заедно во само една дупка на текст. Бидејќи HTML е вид на нем јазик. 

Што е наменета да се користи во такви на начин што на пребарувачот само ќе се експлицитно се она што го кажете тоа да се направи. Значи, ако не ви се каже ми даде нов став, вие нема да ја видите на нов параграф. И всушност, она што интернет пребарувач се случува да се направи е дури и ако притиснете ентер, да речеме повторно и повторно и повторно, се движат на овој текст начин долу на екранот и потоа запишете и повторно вчитајте, прелистувачот ќе да пропадне сето тоа бело простор во само еден единствен, видливи празни места. Во ред. Значи тоа е став таг. И така што е на шемата која е во развој во оваа ситуација? Па, се чини да биде случај дека HTML е за сите почнувајќи таг и завршувајќи го тагот. И она што е таг? Па, тоа е само еден дел од синтаксата. Отворена заграда, клучен збор, затворена заграда, е таг. Или започнете таг. А потоа кога сте направено изразување на себеси, како и во ќе завршиш со став, ќе го направите така да се каже спротивното. Но и спротивно не е сосема наназад. 

Вие едноставно како префикс за истиот таг е име со коса црта вака. Во ред. Па не се сите толку возбудливо. И всушност, ние не печелите веб сето тоа и повеќе интересно. Што ако сакам да се направи работите поголеми и задебелени букви? Значи излегува дека еве еден пример во headings.html, каде што во моето тело, Имам една Н1 таг, H2, H3, четири, пет или шест, од кои сите изгледа прилично таинствени. Но ако одам отворите оваа На пример, ајде да ги разгледаме. Headings.html. 

Па пребарувачи стандардно може да ви даде текст тоа е голем и смел на различни големини. Н1 е голем. H6 е помала, а потоа сè друго во меѓувреме. Така што е интересно, но сепак навистина не знам на интернет. Што ако сакаме да имам нешто како список. . Значи тука е нумерирани листа на три куќи Харвард. 

Како да одите за тоа? Па, да погледнам во list.html. И тука, можеме да видиме една малку funkiness но ајде да се разгледа она што се случува. Па врз основа на она што сте само гледа, UL залага за неподреден список. Неподреден список само значи цртички. Нема броеви. Има исто така нешто што се нарекува подредена листа, која е ОЛ во таг. Потоа Ли, точка листа е за сите тоа значи. 

И така тој автоматски броеви сè за вас. Но, повторно, сите мои вовлекување и бела простор е само за мене. На пребарувачот не е всушност, се случува да се грижи. Па дури и ако не можев направите тоа, само да бидат јасни, вие не треба да иако прелистувачот ќе се уште да биде во можност да го разберат само парична казна. Јас сум притискање Вчитај во мојата пребарувач, јас сум кликнување Вчитај и нема промена се случува бидејќи на пребарувачот уште прави токму она што ми го каже да се направи. 

Во ред. Така што ова е за сите само на текст. Сега ајде да направиме нешто поинтересно. Одам да се оди напред и да позајмуваат некои од овој HTML. Одам да се оди напред и да креирате нова датотека тука. И ние ќе го наречеме ова rick.html. Имаме несразмерно користи нешто нарекува Рик тркалаат во овој Класа на оваа година, јас не знам, тоа едноставно се случи органски. 

И сега тој излезе од контрола. Па јас сум само ќе одат со него. И кога ќе отидам на Google Слики и Рик Astley. Ако не знам зошто тоа го правиме ова, само прочитате на Википедија. Секој пат кога сте кликнале на врската, некој е се смееја некаде. И дозволете ми да одам таму ahead-- ние одиме, ајде да ја видите оваа слика. 

Значи тука имаме слики во Google Images. И да претпоставиме дека ова е разумно насекаде на интернет. Па јас ќе одам да се претпостави дека е во ред за мене всушност да го стави ова во мојата веб-страница. Одам да се оди напред и копирате URL на сликата. И сега, ако се вратам во Облак 9, ајде да видам што можам да го направите тука. Значи тука е само една веб-страница. Ова е Рик Astley, ха, ха, Одам да сега да се вратиме на мојот интернет пребарувач, вчитување, и интересна. 

Каде е Рик? Па дозволете ми да се види што се случило. Всушност, јас ќе одам да се преправаат како да не го стори тоа. [Беззвучен] му стави тука. Ние ќе се вратам на тоа во еден момент. Па еве rick.html. Така што не е Рик Astley. Значи излегува можеме всушност го додадете во тука. Ова е Рик Astley. Јас ќе одам да се каже дај ми слика чија извор е URL Јас само копирани, која очигледно е среќен роденден нешто или други. 

И сега ќе одам да се затвори таг се допаѓа ова. Па ова завршува со супер долг. Не се забележи дека сите што го направено е отворена заграда слика, извор со својство на ова. И тоа е навистина долго URL-то. И на самиот крај, забележуваат тоа. Зошто сум сторил коса црта аголни заградата наместо, како и секоја друга ознака, имаме отворена заграда, ИМГ, затворена заграда? Само да се погоди, дури и ако Немате блискост каква со HTML порано. 

Па тоа е како тоа се затвора команда, но зошто дали тоа навистина не го прават интуитивно смисла да се направи нешто малку повеќе опширниот како блиски на сликата? Је. Је. Само семантички, нема смисла почнувајќи некоја слика, а завршува на сликата, тоа е или постои или не е. Па тоа не дава никаква смисла да се остави празнина за ништо друго во внатрешноста на сликата. Едноставно не може да го направи тоа. И така синтаксата генерално ќе биде само да се направи на коса црта во внатрешноста на отворениот таг или почетниот таг а потоа погоди Зачувај. 

Значи, ако јас сега ја превчитате оваа датотека, сега Јас имам еден добар веб-страница за готвење тука. А ние секако би можело да навистина да одиме на нерви на луѓето наместо со вградување како YouTube линк. И всушност, во секое време Дали некогаш сте си отиде на YouTube, и ме пушти всушност случајно Рик тркалаат си тука. Па Рик тркалаат. Рик roll-- па јас ќе одам да си тука. 

[Музички] 

Добро, едно лице се допадна. Значи забележите сето ова време, ако кликнете на Сподели линк, се разбира добијат URL-то дека всушност можете да вградите во е-мејл или форензичар слика или проблем во собата или во слајд. И сега, ако наместо јас кликнете на вградување на, известување дека сето ова време, овој материјал е таму. Одам да се оди напред и да ја ископирате оваа. 

И само така можеме да ја видиме подобро, јас сум ќе го ставете во мојот текст едитор. Забележете дека ова што YouTube е ти го кажувам. Секој пат кога ќе ја посетите YouTube видео, ако сакате да вградите видео на вашиот веб-страница, просто да го имате овој. Така што ова е само уште еден HTML таг нарекува IFRAME. Или согласно рамката. Па тоа не е премногу изгледа малку повеќе посложен отколку на сите други. Значи излегува дека сликата ознака и очигледно таг iframe се она што се нарекува атрибути. 

И ова е уште една парче синтаксата во HTML. Во прилог на таг е име, отворена заграда име таг, можете да го контролираат однесувањето на таг по тоа што имаат еден куп на атрибут еднаква вредност. Атрибут еднаква вредност. И така на пример, Јутјуб ни кажува ако сакате ширината на ова видео за да биде 420 пиксели и висина да се биде 315 пиксели, што е како може да се изрази во HTML. 

Изворот на видеото се случува за да биде дека долго URL-то на YouTube а потоа некои други работи како гранични рамка е нула, така што веројатно значи дека има Нема границата околу нешто. Им овозможи на цел екран веројатно значи дека корисникот може да кликнете на копчето и всушност цел екран видео. Значи, ако јас навистина сакаат да бидат импресивен тука во Рик точка HTML, наместо да се користи ознака на сликата, да се ме избришеш тоа што, наместо ставете ова. А сега ја превчитате. И сега тука ќе одиме повторно. Добро, тоа е доволно. Сите права па ќе се обидам не е тешко да се направи тоа повторно. Значи она што се некои од takeaways тука? Па HTML, како грд како овие веб-страници се, е всушност многу едноставна. Тоа не е програмски јазик. Тоа не мора функции. Тоа не мора петелки. Тоа не мора услови. Сите што има е десетици различни ознаки, од кои секоја има нула или повеќе атрибути. И во фактот, што е за забава HTML како што ќе почнете да се нурне во е дека тоа е многу авто способен. 

Сите што е потребно е разбирање од општата рамка на HTML. Што е ознака, што е особина, како вие всушност го конфигурирате веб-страница како што следи. И се друго е навистина резултат на угледување во онлајн референца или Googling тоа како да се направи некои или како што видовме техника, гледање на изворот на Фејсбук код, гледајќи во еден веб-сајт што ви се допаѓа во тоа е изворниот код и разбирањето на тоа како програмери таму всушност се поставени работите. 

За да можеме да се направи слики, како и. И всушност, ние го сторивме пред еден миг. Дозволете ми да оди напред и само да ви покаже. Еве некои кодот примерок. Ако некогаш сакате да ги видите пргавост мачка. Така забележуваме дека можам имаат слика таг овде. А имам коментар над неа. Имам алтернатива текст за пристапност. Значи некој кој е со користење на екранот читач за причините на повидок всушност, тогаш може да имаат читач на екранот велат пргавост мачка. Бидејќи ако тие не можат да видите на сликата, тие може барем да имаат нивниот компјутер вербално им каже што е тоа. И извор на таа датотека е cat.jpeg. Така, всушност, ако јас навистина сакав да добијат умен, она што можам да имам done-- Јас ветувам дека нема да оди на Рик Astley, па Одам да google за мачка наместо. И кога ќе отидам на Google Слики тука, а ние ќе се претпостави дека тоа е слика на мојата мачка. 

Да претпоставиме дека имам контрола кликнато или десно кликнато на ова, случајно гаден. И cat.jpeg Одам да ги зачувате на мојот десктоп. Дозволете ми сега да се вратиме на облак 9. Забележите дека овде, можам да одат за да испратите локални датотеки. И ако јас го имате овој датотека, cat.jpeg, огласот дека можам да го повлечете и пуштете ја во облак 9 и тоа се случува да се развикам на мене тука. 

Бидејќи ние сме веќе ви се даде датотека cat.jpeg, но тоа е супер лесно да се зачувајте слика дека сте земени од Фејсбук или Фликр или слично а всушност одвлечете ја и пуштете во облак 9, а потоа го направи дел од свој личен веб-сајт или проблем поставени седум или осум, како што наскоро ќе се види. А потоа кога ќе конечно го посети овој мачка, претпоставувајќи дека јас ја преземале истата мачка, известување that-- тоа беше симпатична. 

Она што го гледате е нешто како ова лице овде. Па на датотеки кои сте повикување во рамките на веб-страница или може да биде локално во свој сметка или далечински на некој друг сервер како и во случај на Рик Astley фото пред малку. Значи, каде што else-- инаку може да се направи во оваа ситуација? Па ајде да ги разгледаме во следново. Знаете ли што е вид на кул? 

Имаме досега била одлуки многу статични веб страници. Сакам да зачин работите како што следува. Сакам да ја направам мојата сопствена пребарувач. Така да се направи пребарувач, ајде оди напред и да почнете да го правите ова. Одам да се оди напред и да се создаде нова датотека наречена search.html. И ние имаме prefabed верзии онлајн. Whoops. Не ставете го во терминален прозорец вашата. Prefab верзии онлајн. А јас ќе одам да се започне како што следува. Значи тука е почетокот на датотека наречена search.html. Одам да го зачувате во денешната извор директориум. Одам да се јавите ова пребарување. Всушност, ќе се направи тоа подобро. CS50 Барај а всушност го бренд. И сега, јас ќе одам да се каже нешто како Н1 CS50 пребарување. А потоа долу тука, Х2 наскоро. И само да го повториме, H1 и Х2 значи она соодветно? 

Да, па голем и смел, и не е толку голем, но сепак со задебелени букви. Значи, ако јас се спаси ова и одиме во текот тука, Да видиме датотека search.html на. Сите во право, а овој е right-- [Беззвучен]. Застани. Дејвид е збунет. Ох, тоа е во право таму. Дејвид е идиот. ВО РЕД. Па таму е. Па пребарување CS50 наскоро. А сега, ајде да се синтетизираат она што го правевме минатата недела. 

Каде што зборуваше за пониски механика ниво на HTTP. И овие нови идеи на HTML, што е само оваа маркап јазик, каде што каже на прелистувачот точно што да прави и спроведување на нашите сопствени пребарувач. Така, наместо на само велејќи дека наскоро, јас сум ќе се воведе нешто што се нарекува форма таг. И во оваа форма, јас ќе одам да има нешто како поле за внесување. 

И името на овој влез поле, јас ќе одам да го наречеме П. И видот на ова поле за внесување Јас ќе одам да се каже е само "текст". И во полето за текст, како што ќе видиме, е само поле за текст. И така што не го насети тука да има ништо во него во овој момент. И така јас едноставно се случува за да го затворите ознака со која коса црта право во самиот таг. А потоа јас ќе одам да имаат еден придонес. Вид на внесување еднаква достават. А потоа јас ќе одам да затвори оваа исто така. 

И сега јас ќе одам да се вратиш тука. И веќе ги гледаме, иако прилично грдо, јас сум доби почетоците на мојата страница за пребарување овде. Всушност, да се обидам да исчисти овој до малку. Излегува дека на внесување тука, јас може да има уште еден атрибут наречен случаеви. И јас може да се види нешто како клучни зборови, или поконкретно, да прашува за q. 

И известување, сега, морам овој вид на сива текст како што исчезнува Веднаш штом ќе го започне пишување, но тоа е веројатно нешто сте виделе во други веб страници. Јас не навистина ми се допаѓа на копчето Submit. Па јас сум всушност ќе даде Копчето Submit вредност од пребарувањето. И сега, ако јас ја превчитате, забележуваме дека копчето мојот станува име за пребарување. Знаете, јас навистина не како на логото тука. Па Google фонт генератор. 

Сакам да го зачинат овој нагоре понатаму. Па CS50 пребарување. Дозволете ми да се создаде мојата лого. Дека изгледа убаво. Па сега дозволете ми да се спаси оваа as-- ајде. Каде е? Таму. ВО РЕД. Го пропушти. Зачувај како. Глупави прелистувачи. Стојат од страна, ние ќе треба да го надминете овој еднаш и за сите. Таму ќе одиме. Во ред. Жал ми е. Слободен ден. Сега ова е фанки. Излезете на цел екран. Во ред. 

Сега, како нормален лице, да ја зачувам сликата како. Logo.gif. Сега ќе одам да се оди во CS50IDE и Одам да едноставно да го дофати лого, Одам да го вовлекува во мојот извор седум директориум, датотека веќе постои, јас сум во ред со тоа. Па јас ќе одам да го замени затоа што веќе ја имаа. И сега како можам да се ослободи од ова? 

Ајде да одиме напред и да се направи тука извор на слика еднаква logo.gif. Затвори ова. Спаси. И сега ако се вратам на мојот пребарување страница, сега тоа е во потрага прилично добар. Добро, па тоа не се случило доста направено нешто корисно. Всушност, дозволете ми да се обидете пребарување за мачка и да видиме што се случува. Мачки. По ѓаволите. Тоа не само работа, очигледно. Значи, што е клучна фигура кои се водат за исчезнати во оваа ситуација? 

Право, дури и ако не знаете сите HTML, Сум го започна одбележувањето на формуларот на телефонот и јас сум го кажал како да го добиете влезови, дај ми полето за текст и копче за да поднесе, она парче е очигледно недостасува? Да претпоставиме дека сакаме да се всушност ова нешто работи исправно. Што треба да се направи? Имаме потреба за спроведување на задниот крај база на податоци или самиот пребарувач, и што се случува да се земе целина многу време, искрено. 

Па се сеќавам она што го правевме за последен пат. Значи ако барате нешто на Google и сте во однапред исклучен, Потсетиме, инстант пребарување. Значи, дозволете ми да се претвори дека надвор така што ова, всушност, однесува како постар училиште прелистувач, ако јас сега бараат нешто како мачки, потсетиме што ја URL адресата изгледа. Тоа е доста нејасен. Но вградени во таму, да се потсетиме, е потрага коса црта. Прашалник q е еднакво на мачките. 

И тоа не е доволно за да ми даде целиот куп на резултатите од пребарувањето. Па да се разбере она што јас ќе одам да направите? Одам да позајмуваат Google за само една минута. Одам да се премине тука, а јас ќе одам да се каже дека ова претставува дејствие или дестинација, така да се каже, треба буквално да биде на Google. И начинот сакав за употреба ќе биде да се добие. 

Значи она што е акција? Акцијата е чудно име, но тоа само значи која се случува да се справи со акцијата на оваа форма? Кога кликнувам на пребарувањето, каде треба резултат се оди? И ако јас сега се вратам во мојата форма тука и да ја превчитате мојата web-страница и сега бараат нешто како куче, известување сега Јас сум повторно спроведува на Google. Нели? 

Ако сакам да бараат нешто друго, се работи за тоа не само кучиња, исто така работи за мачки. Таа исто така работи за CS50. И ред, ова е само под whelming, не е тоа? Во ред, но тоа всушност функционира. Значи она што всушност се случува? Па јас сум предавал мојот интернет пребарувач, со користење на HTML, да се влез од корисникот и всушност испрати дека влез со оддалечен сервер користејќи HTTP. 

И поради тоа што мојот интернет пребарувач HTTP разбира, тоа всушност изградба на URL-то, така што она што Јас се заокружи во текот во мојот интернет пребарувач, известување што ќе се случи кога барав за куче. Ако јас кликнете на Барај, забележите дека URL-то се менува како што се наменети да google.com/search~~V пребарување еднаква на куче. И тоа е затоа форма знае, бидејќи методот е да се добие, едноставно да ја додадете на овој URL таму. 

Сега, овие веб страни се уште се грди. Значи, да се воведе уште еден парче синтакса ако можеме да денес. И ова е нешто што е познато како Cascading Style Sheets. Значи, дозволете ми да ги разгледаме во овој пример тука и да видиме ако можеме да заклучиме она што се случува. Ова е CSS0.html. И ова е местото каде што работи добие малку грдо. Затоа што, за жал, во светот на веб, HTML не може сама да се направи сè. И така, ако сакате да стилизирам вашиот веб страница, што всушност треба да се фокусира на естетиката на еден поинаков начин. Па еве, јас имам телото на мојот веб- страница во внатрешноста на кој е голем div. И div само значи поделба. Па тоа е како еден став, но тоа не ги имаат истите семантика на еден став од текстот. 

Ова само значи на прелистувачот, тука доаѓа голема правоаголна регионот на мојот веб- страница, сакам да се справи со неа специјално. Сега, линија 21 е местото каде што div започнува. И само се погоди. Што е ефектот на линија 21 на остатокот од содржината на страната? Тоа центрирање. Тоа е се. Па не сме виделе начин на всушност, центрирање на текстот. 

Всушност, мојот пребарувач, за разлика од вистинските Гугл, сите беше оправдано во текот на левата. И така сега во линија 21, сакам да кажам дека, еј пребарувач, се создаде поделба на страната. Само ми даде голема, невидлив правоаголник. Тоа е како јас сакам да се размислува за веб-страница. И тогаш тоа стилизирам како што следува. Во внатрешноста на овие цитати, сега, е втор јазик кои ги воведе денес наречен Cascading Style Sheets. За среќа, тоа не е премногу не е програмски јазик, па тоа е многу ограничена во неговата синтакса, но исто така, многу ограничени во својата функционалност со оглед на HTML е за сите означување на податоците на веб-страница и структурата на веб-страница. CSS е генерално за последната милја, естетиката, добивање на големината и бојата и поставеност точно во право во веб страница. И навистина, таа се формира со клучните вредност парови. 

А на имотот, како таков, текст усогласување, по што следи од страна на дебелото црево, проследено со вредноста на таа имот, кој во овој случај е центар. И сега ќе забележите може гнездо овие работи. Ако сакав се што во тој Сум Нагласени да биде центриран, тоа е зошто имам линија 21 и на соодветната линија 31. Но, да претпоставиме сега сакам да кажам Џон Харвард, добредојде на мојата страница. 

Знак за авторски права Џон Харвард. И да претпоставиме дека сакам прв од тие линии да бидат прилично голема. 36 пиксели. Значи тоа е пристојна големина. И сакав неговата тежина да биде храбар. Но, тогаш под тоа, Сакам помали текст. А под него, сакам дури и помали текст. Жал ми е. Денес ви изгледаат како еден слободен ден. 

Па сега, што правам да го изразат ова? Овде на линија 22 е вграден div или вгнездени div, ако сакате. Тоа не е премногу има своја ознака стил. Јас се определи големината на фонтот од 36. Јас се определи тежината на задебелен фонт. Овде, јас само се определи 24 пиксели. И, конечно, во линија 28, јас наведете 12. Па само како брза проверка разумност и како човек читање ова, кои зборови на екранот се всушност, се случува да бидат храбри? Која линии се всушност задебелени букви? 

Само Џон Харвард. Нели? Бидејќи само како линија 22, вели еј прелистувачот, тука е поделба на страната. Направете го тоа на фонт 36 поен. Направи тежина на фонтот со задебелени букви. Веднаш штом ќе се достигне соодветниот крај таг или затворена ознака на линија 24, Тоа значи дека, еј прелистувач, да престане да прави што и да е што го правите. И известувањето да биде јасно, иако линија 22 има сите овие атрибути како стил, кога ќе затвори таг во линија 24, вие само се спомене името на ознаката е. 

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

И брзо, што е вашата омилена боја? Зелени слушнав. Во ред. Па сега, ако сега јас хит превчитате, имаме зелени веб-страница. Добро, па тоа не е лошо. И сега, ако сакам да се направи ова навистина кул, можам да се направи на бојата на мојот текст дури и црвена. Да видиме што тоа изгледа. Сега тоа е во потрага прилично добар. И овде, ако навистина сакате да се плеткаме со некого или ако сакате да се биде еден од оние луѓе кои се обидува да ви трик во посета на веб страница, бидејќи тие го измамил Google во размислување има еден куп на клучните зборови like-- ајде да видиме, да ја превчитате. Каде што се оди? И таму ни тоа. Во ред. Значи ова го велам како настрана, ние ќе се зборува за овие работи за неколку недели кога зборуваме за безбедност, ако навистина вградите целата гроздовете на клучни зборови во веб страница, дури и ако тие не се видливи за човечки, некој како Google, се разбира, сепак, всушност може да се најдат на овој. Добро, па тоа е доста одбивни прилично брзо. 

И всушност, тоа не е се дека многу за разлика од мојот сопствен веб- страница како додипломски, кои Почнав Googling околу да се најде последните верзии на мојот стар веб-сајтови. Тоа беше прилично лошо. Всушност, јас не најдете само пред една класа. Но, има и полошо од таму. Ова очигледно е моја Главна страница назад во 1996 година. Очигледно Мислев дека тоа е соодветно да ги повикаме луѓето на нивното име пред да можат да всушност се види мојата веб-страница. 

А тогаш ги покажа нешто глупаво, веројатно. Јас ќе се ископа повеќе за следниот пат. Но, за сега, ајде разгледа малку дизајн. Ние разговаравме за стил. И оваа страница досега и повеќето сè што сум напишал е прилично чиста стилски. Но, што е дизајн? Па, има голем број на технолошки вишок во она што јас го работам овде. 

Што сум споменат зборот боја во неколку места. Што сум споменат големина на фонтот во неколку места и храбар во неколку места. И во основа, јас сум ко мешаат два јазика. Јас имам со HTML тагови и мојот атрибути, а потоа одеднаш, помеѓу наводници, имам денес на вториот јазик повика на CSS, што повторно, е само овие клучните вредност парови или овие својства одвоени со две точки. 

Излегува дека многу како во C, каде што може да почне да се фактор надвор некои код во насловот датотеки, така што можеме да го стори истото во HTML. И еден чекор кон тоа е како што следува. Забележете дека оваа верзија, CSS1.html е структурно иста веб-страница. Па имам еден куп на divs, но овој пат, јас сум добиле ослободи од омотот div како што ќе видите. 

И јас сум со оглед на тие три divs почетокот, средината и на дното, уникатен ИД. Ова е убаво, бидејќи со давање на тие поделби на страница единствени идентификатори на, Можам да ги повикување на други места. Каде? Па, дозволете ми да скролувате до. И досега, во секое време Ние гледаше на чело на една веб страница, што е единствениот таг имавме во на чело на една веб-страница? Малку погласно. Само насловот досега. Но, се покажа дека е неколку други работи може да се стави во таму, еден од која се вика таг стил. Па пред еден миг, ние погледна во својство на стил. Излегува има таг стил. Таа му припаѓа на внатрешноста на чело на една веб-страница. И сега се забележи она што јас го правам. Имам во внатрешноста на оваа стил таг следниве. Јас буквално се спомене на линија 20 на името на тагот дека сакам да стилизирам. 

Јас тогаш има отворени кадрава голема заграда и затворени кадрава голема заграда. Така слични во духот со Ц, но повторно, ова не е во функција, ова е само синтаксички детали тука. А потоа се разбира, јас го кажувам прелистувачот, еј прелистувач, направи целото тело на страницата имаат текст усогласување на центарот. И тогаш ова го вели следново. Еј прелистувач, ако гледате на HTML елемент или таг во страница, која има единствен идентификатор на врвот, така симбол на хаш тука само значи уникатна идеја на врвот, да оди напред и да се направи својата големина на фонт 36 и неговата тежина задебелен фонт. 

Еј прелистувач, елемент чија Проект е средината, тоа го прават 24 пиксели. И еј прелистувач, ако видите Идејата на дното, го прават тоа од 12 пиксели. Ефектот на крајот е токму на Сем. Ако одам во CSS 1, страница изгледа исто. Но, ние сме еден чекор кон малку подобар дизајн. Дозволете ми сега да се вратиме тука да СЅЅ2 и да видиме што друго што го направив. 

Сега страната е навистина, навистина чист. Всушност, јас може да се вклопат сите содржината на страница тука. Но, она што јас имам нова ознака воведени, очигледно? Линк. И тоа не е најдоброто име за некоја ознака, бидејќи тоа не е врска, во смисла што ние го знаеме, но тоа значи линк во некоја друга датотека. Ова е вид на како остар вклучите во В. 

Ова е начинот на HTML да се каже еј прелистувач, одам да купам содржината на датотека наречена css2.css. Односот, за мене, е дека тоа е стил на состојба. И навистина, тоа е она што на еден од С во Cascading Style Sheets средства. Ова е стилот на состојба. Тоа е само на текстуална датотека која содржи целиот куп на имотот. Тоа е еден куп на стилови што сакате да се применува на една страница. 

Па така ова е очигледно кои се однесуваат на вториот датотека. И ако јас се отвори таа, CSS2.css, забележи дека сите што го направив е да копирате и залепите сите на овој во оваа датотека. И сега, дури и ако никогаш не сум кодирани овој материјал пред, само се разгледа со пословичен инженеринг шапка на, зошто е тоа подобар дизајн веројатно? Факторинг од оние CSS особини, ставајќи ги во свои датотека. И покрај тоа што реши овој Пред проблем како пет минути во првата верзија. 

Ние не сме подобри од страница стилски, ова е само подобро дизајн во некоја смисла. Што мислите, зошто? Је. Пофлексибилни како? Је. Значи, ако сакате да одите назад и да се променат работите, сега, имате едно место каде што може да се променат работите. И всушност, за нешто како проблем во собата седум, каде што ќе се спроведе веб тргување акции, што се случува да имаат куп на страници. И тоа ќе биде навистина досадни, ако одлучат, НВ, Јас не навистина ми се допаѓа 24 пиксели, сакам тоа да биде 28 пиксели или малку поголем. А потоа треба да се направи глобалната се најде и да го замени или да се отвори сите датотеки на вашиот вебсајт едноставно да го променат една вредност. Од страна на факторинг од овие стилови во една централно место, сега може да се отвори една текстуална датотека во CS50IDE во било која програма, тоа се промени, тоа се спаси, и направено. Сте пропагира оние промени насекаде. И дека ќе бидат исти во точка ж датотека, како и. Така било какви прашања што се досега на оваа синтакса? Добро, па ние сме направено се што се чини освен да ги спроведе хиперлинкови. Па ајде да одиме напред и да го направите тоа. Дозволете ми да оди напред и да креирате нова датотека тука. Одам да го наречеме link.html, се стави во денешниот број. 

А јас ќе одам да направите отворена Држач за видот doc HTML. Како настрана, ова нешто на врвот, оваа декларација тип doc, тоа е само еден што е чудно со точка на фантастичен. Вие само треба да го направи тоа таму и тоа значи дека ние се користат HTML верзија 5. Постарите верзии на јазик имал многу подолго стрингови кои ви се потребни за да се стави таму. Значи тука е пример нарекува линк. 

Ми треба едно тело на мојата веб страница овде. И овде, a href еднаквите да речеме HTTP://www.disney.com и мојот омилен сајт, ние ќе се каже. Добро, па многу едноставен, лесен страница. Ако јас сега одам во мојата листа оглас тука и ќе отвори link.html, имаме хипер текст. 

И навистина, ова е местото каде што на H кај HTTP доаѓа. Протокол за пренос на хипертекст е за пренесување на текстот кој има линкови до други ресурси. И навистина, тука е познато, ако ретро, ​​сини линк дека ако се кликне, всушност, ќе ме доведе до Disney.com. Сега, О, тоа е излегува наскоро. Добро, па сега, она што се некои на импликациите од ова? 

И искрено, светот почнува да се добие малку повеќе запознаени и исто така, малку позастрашувачки но исто така малку повеќе само морална штом еднаш ќе почнете да се разбере овие работи. Бидејќи шансите се, некои од вас, ако одите преку вашиот спам папката на Gmail, па дури и вашето сандаче, веројатно сте добиле некој вид на е-маил што те праша да ја смените вашата лозинка можеби или можеби се потврди вашата PayPal ингеренциите или какво ли не. 

И всушност, можеби сте примиле нешто што вели како кликнете тука за да ја ресетирате вашата PayPal лозинка. И сега, известување, ако ова не е Disney.com но како и badplace.com Вчитај ја страната повторно, имајте во предвид дека текстот тука можеше да каже ништо она. И всушност, ова е само зборови. Зошто не можам да всушност може да биде супер малициозен и да каже http://www.paypal.com. 

Кликни тука за да ја ресетирате вашата PayPal лозинка и сега ја превчитате. Ова изгледа прилично легитимен, нели? Мислам, јас не ќе кликнете на е-маил дека само вели ова. Но информации дихотомијата тука. Таа вели www.paypal.com, и всушност, почекајте една минута, ние знаеме дека сакате на ОК за безбедност. Па сега, одете на www.paypal.com HTTPS, но ако не сте го направиле тоа порано, се влезе во навика на лебди над малку води овде. И тоа е тешко да се види на екранот таму, и тоа не е се што полесно тука. Но, патот надолу тука во малата малку агол не на прелистувачот, всушност, вас, кои ние ќе треба да се каже да badplace.com наместо Paypal.com. Сега, каде одиме со ова? Сите примери ние го направивме денес, ние сме хард кодирани и внесе рачно. На веб е неверојатно неинтересни кога ќе се тешко код на вашата веб-страници, така што содржината е статичен, и никогаш не се менува. Се разбира, сите наши омилени веб страници и денес, без разлика дали е Gmail или Твитер или Фејсбук или било кој број на други се динамични. Тие се менува во одговор на корисник влез исто како и резултатите на Google. 

И така во средата, она што ние го правиме е заминуваме HTML и CSS вовед зад нас и да ги здраво за готово дека ние сега го знаеме и ние се воведе на нов програмски јазик повика на PHP, која се допаѓа Ц, ќе ни даде моќ да всушност се создаде програми кои се генерира излез. Во овој случај, ние ќе биде со користење на PHP да генерираат динамички веб страници со користење на овој нов јазик. Толку повеќе за тоа во средата. Се гледаме тогаш. 

[Музички]