[Музички] ALLISON BUCHHOLTZ-АУ: Сите права, секого. Добредојдовте назад на секција. Значи, нашата агенда за денес се случува над многу повеќе веб dev нешта. Не знам колку од сте го виделе вашиот psets бидејќи тоа беше ослободен порано ова утро. Јас би пример колку луѓе ги прочитале на спецификации, но гледајќи колку сте имале сите на, како, седум часа за да се погледне во него и тоа е понеделник и Веројатно сте имале класа, Одам да се претпостави дека повеќето од вас не се. Ако имате, екстра слава. Ти си во основа помагање спроведување на едноставна веб- сервер во Ц, кој е сосема нов pset, па вие момци се да биде заморчиња. Тоа се случува да биде забавно, диви недела, но мислам дека тоа ќе биде многу забавно и тоа ќе биде навистина добро искуство всушност. Па да ви подготвиме за дека, во делот денес, ние сме ќе одат chmod, TCP / IP, и потоа малку на HTML и CSS. 

На крајот, ние ќе всушност код едноставна веб страница, заедно да ви помогне момци вид на се повеќе запознаени со тоа. А потоа ако не собрал вашиот квизови, тие се во предниот дел, но јас сум прилично сигурен дека сите тука има свои квиз. А исто така и на тој белешка, решенија не се се уште, но штом ќе finish-- допаѓа тоа, Последните неколку луѓе преземање на нивните quizzes-- тие ќе бидат до. Ако имате било какви прашања во меѓувреме, се чувствуваат слободни да ми мејл лично. Јас ќе одговориме со вашите индивидуални прашања, како што јас секогаш го правам. 

Така, на тој белешка, chmod. Значи, во основа сите вас треба да знаете за chmod е дека тоа е се користи за промена пермисии, нели? Па тоа е само некои системи се повик се сменат дозволите, како што се вели тука. И ако некогаш сакате да видите што дозволи датотека има, наместо само прави ЛС, можете да направите ls -l. l се залага за долго. 

Па ќе го направи долги листи на сè, и ќе ви даде многу повеќе детални информации во врска со секој од вашите датотеки. И ќе видите something-- Јас сум случува да прескокнете за second-- но ќе видите нешто слично на дека горниот ред таму за секоја датотека. И ние ќе одиме преку она што тоа значи. 

Значи, во основа, да се промени вашиот пермисии, вие само сакате да го користите chmod. Можете да мислам на тоа како и секоја друга UNIX-се јавите како ls или CD или какво ли не. Тоа е само вид на друг, како повик. 

Така ги подржуваат, а потоа ќе имаат три цифри обично. Постојат неколку начини да го направите тоа, од кои една ќе одиме во текот. Но обично, ќе треба три бројки опсег од 0 до 7 Секоја време. 

Значи едно е дека постојат три различни дозволи дека можеме да им даде на секоја датотека. И тоа е може да се чита, што е претставена од r, кое ќе има смисла во малку; w, што е можат да се запишуваат; и извршна, која е x. Знам дека е еден, извршна, можеби не повеќето смисла, но ние претставуваат со х. 

И тогаш што се случува е секоја од овие исто така, имаат застапеност број. Значи имаме 1, 2 и 4. И во основа она што се случува е секоја од овие три броеви тука одговара на различен сет на корисници дека тие дозволи се однесуваат на. 

Па можете да мислам на тоа првото број одговара на вистинските корисник или сопственикот на датотеката, вториот број ќе одговараат на група, а последната се однесува во светот, во ред? Значи она што се случува е се сеќавам оние numbers-- r е 4, w е 2, x е 1, право? This-- ако ги сумира овие горе, кој ви дава дека првиот број кои би можеле да влез во нашата chmod. 

Значи во овој случај, она што ќе биде овој број? Тоа би било 4 плус 2 плус 1, кое е 7, така? И во овој случај, овие немаат ништо, така што ова право тука би се претвори во chmod 700, во ред? И она што го прави е таа ги одобрува сите на овие дозволи за да вашиот кориснички. 

Па тоа значи дека нашите корисник може да прават што сакаат. Тие можат да читаат оваа датотека. Тие може да ја извршите оваа датотека. Тие можат да пишуваат на оваа датотека. Но, група и светот, без дозволи она, во ред? 

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

Колкумина од вас видел пример каде што тоа беше како да chmod плус X? Дали гледате дека во предавање, мислам? Па се залага за сите. Тоа значи даде на сите корисници, кои јас заборавив да се стави тука. 

Но плус x, ако ние забележите тука, ако правиме да chmod-- што група сме зборуваме за плус дозволи ние сакаме да им даде. Така што ова може да биде плус или минус. Плус додава дозвола. Минус го намалува дозвола. Прилично интуитивна, си мислам. 

Па плус х значи chmod. Па промена на дозволи на сите луѓе ако ова е a-- додаток дозволи. И x-- тоа значи дека она дозвола сме доделување на секого. Читате, пишувате, или извршување? 

ПУБЛИКАТА: Изврши. 

ALLISON BUCHHOLTZ-АУ: Изврши. Значи ние се даваат сите корисници дозвола да ја извршите оваа датотека, во ред? Па што ако сакавме да се направи дека со нумерички форма? Значи се сеќавам со нумеричка, сакаме три броја. 

ПУБЛИКАТА: 4. ALLISON BUCHHOLTZ-АУ: Што беше тоа? ПУБЛИКАТА: 4. ALLISON BUCHHOLTZ-АУ: Не 4. ПУБЛИКАТА: 0, 0, 4. ALLISON BUCHHOLTZ-АУ: Па, ние сакаме да го даде на сите корисници, нели? Значи ние се случува да имаат голем број во секој слот. Тоа се случува да биде истиот број во секој слот бидејќи ние само сакаме да им даде сите извршна дозволи. Па извршна е 1, но на вистинскиот пат. 

Значи, ако ние се chmod 111 кои би биде еквивалент на chmod плус х. Дали тоа се направи смисла на сите? Ние ќе одиме преку неколку примери. 

Така големите готова брза тука е не е за тука, туку само значи даде на сите корисници. u е ако само сакате да се даде или одземе специфична дозвола од корисникот или сопственикот. g е за групата, така што средината цифра. А потоа на другите може да се мисли на како светот, така што последната цифра. 

Така да со тоа, ќе одиме на пример, затоа што се чувствувам како примери секогаш направи овие работи полесно да се разбере. Па rwx-- отидовме преку this-- исто така може да бидат претставуваат како 700. Тоа е пример баравме на повеќе од сликата. Па chmod 444 за некои датотека ќе им даде она што дозволи? Сте биле навистина блиску. ПУБЛИКАТА: Може да се чита на сите. ALLISON BUCHHOLTZ-АУ: Може да се чита. Па може да се чита на сите, нели? И тогаш, што е уште еден начин да го направите тоа? Ако сакаме да се направи chmod или со R или W, плус и minuses, она што тој повик ќе изгледа? Тоа ќе биде chmod што? 

ПУБЛИКАТА: плус r. 

ALLISON BUCHHOLTZ-АУ: плус R на 5. Добро, така што ова е исто како и ова, само две различни преводи на истото. Така да со тоа, ги имаме овие. Па сакам вие момци да се обиде и да пишува овие вид на во спротивна насока. 

Значи со chmod 555, што тоа ќе биде како? Тоа ќе биде плус или u плус или какво ли? За у плус x, дај ми три броја. И тогаш кажи ми за тоа што дозволи ние сме всушност доделување и на кој? 

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

Исто така, последната е незгодно. Тоа е две chmods за последен. Всушност, дозволете ми да се затвори таа врата а вие момци се работи на тоа. Бонбони е секогаш неопходно во понеделник попладне. 

Добро, така chmod 555. Што е уште еден начин ние би можеле да се напише тоа? Сите идеи? Да. 

ПУБЛИКАТА: плус RX. 

ALLISON BUCHHOLTZ-АУ: R плус RX. Дали сакате да се објасни зошто тоа би било RX? 

ПУБЛИКАТА: Затоа што имаат 5, па тоа е 4 плус 1, Значи тоа е читаат плус извршна, а тоа е за сите. ALLISON BUCHHOLTZ-АУ: Токму така. Па само да повторам, 5 тука ние знаеме како збир на 4 и 1, бидејќи секој број во нашата трио е Збирот на дозволи за таа подгрупа, нели? Или корисникот, група, или во светот. Значи во овој случај, ние знаеме дека 5 мора да биде формирана од страна на 4 и 1. 

И 4 и 1 кореспондира со може да се чита и извршна. Ние сме го даваат на секого, па ние може да се направи chmod плус RX. И очигледно, ние само отиде преку прашања таму, па сега оваа датотека е извршна и може да се чита на сите. 

Значи она што за вториот? Она што може да го бројот на еден да биде? Сите идеи? Оди напред. 

ПУБЛИКАТА: 100 [нечујни]. 

ALLISON BUCHHOLTZ-АУ: 100. Токму така. Значи сакате да објасни зошто 100? ПУБЛИКАТА: Затоа што тоа е за корисникот, така што е во првата позиција. И тогаш х извршна е 1. ALLISON BUCHHOLTZ-АУ: Токму така. Значи ние сме добивање извршна дозволи само на корисникот. Значи во овој случај, тоа ќе биде 100. И јас ги имаат сите одговори врз следниот слајд во случај сте пишување многу работи надолу. 

Добро, така што ова следната е, всушност, направи со две chmods, може да го направи тоа. Значи Дали некој има било каква идеја како може да добие chmod 640 препишува и повторно во друг начин? Можете да го промените на корисникот, а потоа можете да го промените група е мојот навестување. 

Значи, ако бевме само промена на корисникот, кој е ова првиот тука, она што нашиот повик може да биде? Па корисникот е у, нели? Па chmod у плус што? Mmhmm? 

ПУБЛИКАТА: RW. ALLISON BUCHHOLTZ-АУ: RW. Право, за да читаат и пишуваат, бидејќи читање е 4, w е 2, оние збирот заедно како 6. Значи ние се chmod у плус RW, и ние го добиваме нашиот првите 6 таму. 

Па потоа да го добиете 4, сега сакаме да го промениме нашиот поставувања група. Па ние сме случува да се направи chmod е плус што? Што е 4? 

ПУБЛИКАТА: r. ALLISON BUCHHOLTZ-АУ: r. Прецизно. Па ние сме давајќи им на сопственикот читаат и пишуваат дозволи и ние сме давајќи им на групата читање дозволи, кои сите ние имаме тука. Mmhmm? 

ПУБЛИКАТА: Ако можете да впишете нешто, дали тоа значи можете да го извршите? 

ALLISON BUCHHOLTZ-АУ: Вие може да напише на something-- Не верувам дека тоа значи можете да го изврши. Кул. Значи тоа е она што ние само помина низ. Така, на овој следната, тоа е само вид на заеднички случаи што сакате да се задржи во ум за вашиот проблем во собата. Овие се обично на дозволи што сакаме да го користиш. 

Значи за 711, што дава ни, се разбира, на корисникот сите дозволи, кои има тенденција да се направи смисла. И тогаш тоа е извршна со група во светот, што го прави смисла ако имате некои директориум, сакаат да бидат во можност да напречни во неа. Луѓето треба пристап. 

За било кој не-PHP фајл, си оди да се користи 644, која ќе го направи она што? Што значи дека имплицираат, или она што дозволи, дали тоа даде? Па сопственикот може да што? ПУБЛИКАТА: Читање и пишување. ALLISON BUCHHOLTZ-АУ: Читање и пишување. А потоа група и други само може да се прочита, нели? А потоа chmod 600 за секој PHP датотеки кои ги користите, Вашата сопственик, повторно, може да чита и да пишува на него но сите други се само вид на блокиран. 

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

Па сега, е секој добар со chmod? Било бавни прашања? Прилично јасна. Само вид на следење на она што читате, пишувате, и извршува броеви се е веројатно најтешкиот дел. 

Па со TCP / IP, сите овие протоколи, вид на како со вашата структури на податоци минатата недела, тоа е многу повеќе важно да вид на се повисоко ниво интуиција од нив. Ова не е CS143 каде одиме да побара од вас да се спроведе мрежа, па ќе биде добро ако што не го разбираат гнидав тврд на сите протоколи. Она што е важно да се разбере е вид на како што тие ги претставуваат и зошто тие се важни. 

Па на TCP / IP, се разбира, тоа е Пренос протоколот за контрола или интернет протокол, која е во основа, само сет на закони во основа или стандарди кои му налагаат на податоци како треба да се постапува, како треба да се packetized, пренесува, и примени. Па затоа во основа, исто како што вели дека овде, ги зголемува шансите дека податоците добива каде што што сакате да се стигне. 

Сигурен сум дека ако вие момци отиде во предавање или го гледав на интернет, тој has-- не знам ако тој тоа го правеше оваа година, но знам минатата година, тој имаше демо каде што имаше слика на Роб и тој го подели на четири и го стави во коверти и се обидел да го добие целиот Сандерс. И може да се вид на мислам на тоа на тој начин. Тоа е само збир на правила кои каже на податоци како да се добие некаде и ви овозможува да се знае дали се водат за исчезнати на податоци, на ист начин дека ако сте преземање на повеќе страници на белешки и ќе ги обележат со страница 104 страница 204, и ќе се вратам да учат подоцна а вие се водат за исчезнати something-- не можете да најдете страница 304-- знаете нешто не е во ред, така што може да се погледне преку вашите белешки повторно или да побара некој да ви препратат на материјалите за тој ден. На ист начин со податоци на интернет. Ако јас барам нешто од некој сервер и тоа треба да се испрати тоа во повеќе пакети, веројатно нема да број тоа на некој начин, да ми да знам колку јас треба да ја добиле, и да ми кажете, ох, ова е еден од 10 или ова е еден од 10.000. На тој начин, кога одам да го состави сите парчиња заедно, Знам дека ако нешто недостасува и јас може да побара за тоа повторно. Дали тоа има смисла? Само збир на правила. Во својата основа, збир на правила, во ред? 

Па ние, исто така, зборуваше малку за пристаништа. Ова е навистина само еден стандард кој ви овозможува да знаете каков тип на податоци се пренесуваат во овие пакети. Ако одиме со нашите плик пример, ние не знаат дека тоа е слика на Роб таму освен ако не го пишувам на надворешната страна на нашите плик. Па пристаништа се во основа истото. Тоа е само начин да дознаам што тип на податоци се пренесува. 

Значи имаме сите оние кои најчесто овде. Па 21-- овие се исто така вид на како добри нешта да знам. Тоа е вид на лесен квиз прашање. Биде како, она што не порта 80 направам? Или, она што не порта 443 направам? Толку добри работи да знам. 

Значи имаме овде, 21 е датотека протоколот за трансфер, па само правилата кои ги регулираат пренос на датотека. 25, нешто што сите ние го користите премногу, е-мејл. 53 е името на доменот систем, кој во основа е само вид на пребарување за IP адресата на име на домен. 

Па јас сум прилично сигурен дека тоа беше споменати во предавање, ако одат на нешто како google.com, тоа има IP адресата што е поврзано со неа. Тоа не е всушност google.com. И така 53 е пристаниште кои, всушност, се грижи за вид преведе во таа IP адреса за вас. А потоа 80 и 443 се многу чести. Можете или да имаат вашата веб страница или имате безбеден веб страница, кои многу веб страници се пренесување на повеќе од сега. 

Па тоа е вид на високо ниво преглед на протоколот за трансфер. Јас не гледам многу повеќе во длабочина. Тоа е вид на кул работи ако сте заинтересирани. Има многу ресурси. Википедија, всушност, е доста добра страница. Па јас барав во неа само пред малку, па јас многу би препорачуваме гледа во тоа, ако сте заинтересирани или да 143 за две години, бидејќи Мислам дека тоа е секоја втора година. 

Така, на крајот на овој, ние сме Станува збор за веб-страници и HTTP, кој е всушност нашата следна тема денес, пред да одиме во HTML и CSS и навистина може да се кодира на веб страница. Тоа ќе биде забавно. Ќе имаме слики од bunnies и тоа ќе биде одлично. 

Па HTTP, како што можете да ја видите тука, е една од прекрасна акроними за оваа недела, што е Хипертекст трансфер протокол. Значи, повторно, тоа е само уште еден сет на правила кои владее хипертекст трансфер, во овој случај. Па најдобар начин да се научи за ова е само вид на да ја срушат во овие поединечни зборови бидејќи постојат многу зборовите на екранот таму. 

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

Значи во овој случај тука, ова е хипертекст. Ова ни кажува дека ние имаме некои линкот кој ние се случува да се, кој е cs50.net, што сега cs50.harvard.edu. Овие слајдови се малку стар. И тоа се случува да се прикаже како ова, како хиперлинк, а потоа и навистина кул веб-сајт. 

Така, тоа е текст, што е малку малку навистина кул работи таму. Па можете да се поврзат работите и може да се вметнете слики и можете да стил работи. И најблиска нешто што момци веројатно имаат со хипертекст е HyperText Markup Language, HTML, што секако е за сите на интернет кои ги гледаме околу нас, доделена со некои CSS стил фрлено во. 

Но, ако некој е навистина голем со Мајспејс, Јас сум сигурен дека сите се користат HTML цело време да се создаде оние кои се совршени профили, нели? Се чувствувам како тоа би можело да биде застарена референца сега, но сеедно. Само little-- вие момци не дека многу помлади. Некои од вас се постари од мене. Мајспејс уште беше работа кога бев млад. Не сум толку стар. 

Относнотова, HTML само форма на хипертекстот. Па хипертекст е само текст со додадени карактеристики. Па протоколот за трансфер е веројатно повеќе iffy нешто да се објасни. Очигледно, transfer-- само трансфер на податоци. Значи, која било помеѓу клиентот, како и вашиот веб брат, а на серверот. Значи, во основа само на начинот на кој интернет дела. 

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

Повторно, протокол, во собата на правила. Тоа е само нормално интеракција на истиот начин дека професорот Malan зборува за ако некој се протега рака, знаете дека тоа е заеднички учтивост да достигне твое надвор и вртат со рака. Тоа е протокол, нели? 

Па јас даде некои стандардизирани барање, кој е сакам да се тресат вашата рака, и да ви даде некои стандардизирани одговор, кој е или не благодарение или можете да се обидете и се тресат мојата рака или можеби си оди за да се обиде и тупаница судрат мене. И ние немаме протокол за тоа. Тоа се распаѓа. Но, ако секој ги следи истиот протокол, се разбира, тоа оди многу повеќе беспрекорно. Луѓето да се запознаат едни со други. Сите се среќни. 

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

Така бело е исто како и вашиот метод барање и протокол version-- па метода на барање, верзија. И тогаш ова е некои поле име и вредноста на тоа поле, кои ќе одат во многу, многу наскоро. Значи ова е пример барање. Ова е како мене се протега надвор, кои сакаат да се претставам себеси. 

Тоа е она што на клиентот или она што вашиот веб прелистувач ќе биде испраќање на вашиот сервер. Значи ова е се барање, така што е барајќи нешто од серверот. И тоа е, се разбира, на HTTP и тоа е верзија 1.1. 

Па го остатокот од овој тука е она што ние го нарекуваме насловот, и нејзините дополнителни информации кој ни дава подобра идеја за она што ние, всушност, барајќи, или информации кои сакаме да им даде на серверот што би можеле да бидат релевантни. Па Кориснички Агент дава некои повеќе опис on-- на пример, тука, навивам / 7.24.0 е, всушност, се случува да се каже серверот, дека ние сме со помош на Google Хром како нашата интернет пребарувач. Значи, ако некогаш сте се слушне за луѓе кои се зборува за правење на еден стан одговора на повеќе пребарувачи, ова е нешто што тие ќе го користат, бидејќи ако не знам што пребарувач на барање доаѓа од, не можете да се прилагоди на податоци за тоа. Значи во овој случај, корисникот е само давање на овој вид на идентификување на информации за тоа што пребарувачот вашето корисничко моментов е со користење, во ред? 

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

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

Така што има смисла за секого? Ова е само еден пример на барање, хедери, какво ли не. Добро, па со тоа, имаме некои одговор. 

Повторно, ние имаме код за статус, протокол верзија, а потоа поле име и поле цениме како и секогаш. Значи, нашата протокол верзија и нашиот статус код е 200. Добро, што значи дека, Да, сето мина добро. Тука е она што го сакате. 

Видот на серверот, содржината type-- таа ни кажува, во ред, ти си случува да се добие некој текст HTML. Тука е должината на тоа и тука е што треба да направите со врската. Добро, па уште еднаш, во зависност на податоците сте барајќи, во зависност од она што сервер сака да се врати за вас, може да имаш повеќе од овие поле имиња, може да имаат помалку. Целосно контекст зависни. 

И колку што овој статус кодот тука, се разбира, 200 не е само еден би можеле да имаат, нели? Имаме многу статус кодови. Дали некој се сеќавам некој од други кои ги споменавме во предавање? Многу од нив се започне со 4. 

ПУБЛИКАТА: 404. 

ALLISON BUCHHOLTZ-АУ: 404, што е? 

ПУБЛИКАТА: Датотеката не е пронајдена? 

ALLISON BUCHHOLTZ-АУ: Датотеката не е пронајдена. Токму така. Значи она што за 403? ПУБЛИКАТА: Забранетиот. ALLISON BUCHHOLTZ-АУ: Забранетиот. Па што мислите тоа значи дека со chmods? 

ПУБЛИКАТА: Тоа значи дека немате дозвола да го прочита. 

ALLISON BUCHHOLTZ-АУ: Токму така. На некој начин, вие не мора дозвола за пристап до неа, нели? Па 404, 403. Има навистина смешна оној што ние секогаш воведе секоја година што Требаше да се стави до тука, како 413, што е јас сум чајник. Можете да google ова. Тоа е смешно како, тоа е код 413 и тоа е јас сум чајник. Кои не знам зошто би некогаш треба дека на интернет, но јас отплесвам. ПУБЛИКАТА: Можеби сте чај тенџере. ALLISON BUCHHOLTZ-АУ: Можеби серверот е чај тенџере. Кој знае? Сите во право, па ние сме за да транзиција во вистински кодирање. Се чувствувам како вие момци се случува да излезат од тука прилично брзо. 

ПУБЛИКАТА: Зошто го прави тоа каже "сервер: двапати? 

ALLISON BUCHHOLTZ-АУ: Хм? Сервер двапати? Тоа е добро прашање. Јас не сум сигурен. Ќе дознаете и Ќе сите ви мејл. 

Добро, било какви други прашања, и покрај тоа? Добар? Кул. 

HTML и CSS, и сега ние стигнат до сите на забавата делови. Па како што споменав порано, HTML е веројатно една од работите вие момци се најмногу запознаени со. Значи имаме HyperText Markup Language. 

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

Значи, навистина, најголемата работа е само за да се практикуваат и експеримент. Една од големите ресурси јас би Силно препорачувам користење е W3Schools. Па само W, 3, а потоа и училишта. Тие имаат многу ресурси на HTML, на CSS, и тие всушност имаат Сплит екран вид на работа каде што тие ќе ви даде пример код. Можете да се справувате со неа, промена него, и притиснете Ажурирај, и тоа ќе ви покаже што е тоа всушност го прави за да на веб-страница. 

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

Гугл, од тука надвор, веројатно ќе биде еден од најдобрите ресурси и пријатели. Или Bing-- Јас работам во Мајкрософт, па можеби и јас треба да се каже Бинг. Но, доста нешто е само ќе биде синтакса, па разбирање на она што користат тагови кои се, understanding-- барем со CSS-- како да се промени на одредени атрибути. Тоа ќе биде супер корисни. 

Така, иако ние не имате било какви подготвени нешта, ние немаме вид на некои од најдобрите практики дека ние сакаме вие ​​момци да се обиде и да се придржува by-- или подобро кажано, треба да придржуваат до дополнителни информации. Толку блиску сите ваши тагови. Се надевам дека секој has-- знаеш што, ако тоа не дава никаква смисла токму сега, Јас ветувам дека тоа ќе има смисла кога сме кодирање на страница. Но затвори сите ваши тагови. Значи, ако некогаш имате некои насловот дека е заградата, Н1, држач, осигурајте се дека секогаш кога ќе завршиш со тоа, ќе го затворите дека заглавието. Валидирајте ја вашата страница со W3 Валидаторна. Ако не ја затворите вашата тагови, можете да добиете неочекувани однесување. Тоа ќе кажам дека вашата страница е валиден ако го извршите преку овој валидатора. Значи, кога во doubt-- а особено на оваа недела и следната недела pset-- во истиот начин на кој ние бараме можете да го користите провери 50 и стил 50, можете да мислам на ова како една од вашите проверки, во ред? 

Значи, ако тоа не помине на W3 Валидаторна. Тоа е нешто што ќе ви приклучете натаму. Или јас сум ти го кажувам право сега, јас ќе ви приклучете натаму. Така бидете сигурни дека тоа го потврдува. Тоа не е тешко. Само ставете во вашиот код и тоа или ќе кажам добра работа или сте недостасува нешто на истиот начин тој стил 50 ви кажува каде сте Месинг. 

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

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

Па со CSS, тоа е многу слична со HTML, но наместо на картичките што ги спомнав само сега, ние го користите она што се нарекува селектори. И тие во основа се само вид на дружат одреден таг во HTML со различни својства. И кога велам атрибути, мислам работи како бојата на фонтот, фонт стил, боја на позадината, бојата на вашиот текст. Оние видови на нештата. Како и ако тоа е центриран, ако тоа е исклучено на правото, ако тоа е inverted-- сите на овие интересни нешта. Било стилски работи што да направите за да вашиот текст, тоа е она што сакам да кажам со атрибути. 

А потоа две главни работи кои треба да се знае е дека selectors-- две од главните factors-- се проект, кој е уникатен. Можете да користите само дека за една работа. Инаку, тоа се случува да се развикам. И кога ќе го дефинира во CSS фајл, тоа ќе биде хаш проект, а потоа она што атрибути сакаме. Јас ветувам дека ние ќе одат преку еден пример. Тоа ќе се направи многу повеќе смисла. 

Класа може да се однесува на повеќе блокови. Па можете да имате Првиот и третиот став имаат ист вид на атрибути ако ќе им се дружат со истата класа. И кога ќе ги дефинира во CSS, тоа го правиме точка класа, со класа се она што што сакате тој да биде именуван. 

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

ПУБЛИКАТА: Кога ќе се каже натпревар тагови, сакаш да кажеш селектори или тагови? ALLISON BUCHHOLTZ-АУ: Можете мислам на нив како истото. Тоа е само различни зборови. Мислам, како селектори. Но селектори, исто така, на сајтот за тагови. Па можете да мислам на нив како ефикасно истото. Јас ветувам дека тоа ќе го направат повеќе смисла кога ќе код. Ништо од PowerPoint, или било какви прашања сега пред ние всушност создаде страница нашата секција е? Сите подготвени? Кул. 

Значи имам еден започнете. Дозволете ми да се зголеми фонтот за вас момци. Добро, па сега, ние едноставно имаат голи коски веб страница овде. 

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

Па може да мислам на тоа како вашиот загради во вашиот доколку условите или вашиот за петелки. Ако имате еден на почетокот, сакате еден на крајот. Тоа сепак ќе работат поголемиот дел од времето ако немате затворен таг, но најдобра практика е затворите вашата тагови. 

Значи во овој случај, да се промени тоа. Ние сме случува да имаат секција седум. "Дел веб-страница." Па јас сум само ќе се смени ова. 

И ако одиме над тука и ние reload-- Мора да се спаси и reload-- ќе забележиме дека тука тоа се промени, нели? Кул. Значи ова се менува насловот. Ова е она што е на вашиот табот. 

Значи ова е вид на во потрага вид на здодевни. Не знам за момци. Мислам дека ние сакаме нешто друго тука. 

Така што можеме да направиме е насловот е само таму. Да направиме некој вид на телото. Па ние имаме некои тело тука. Јас секогаш го правам отворен и затворам тагови да се започне, во истиот начин на кој го правам загради. Ах. Чекај, што? 

ПУБЛИКАТА: [нечујни]. ALLISON BUCHHOLTZ-АУ: Ах. Вие момци ме. Добра работа. Злато ѕвезда. 

Добро, така имаме некои тело тука. И сега ајде да започне додавајќи некој текст. Па имате неколку различни опции за додавање на текст. Имаме работи како заглавија. Имаме само нормален текст. Па да започнете со глава. Всушност, ако вие момци сакаат да се повлече до W3 школа HTML, можете вид на може да се погледне наоколу и дали има нешто особено што сакате да го пробате со оваа веб-страница, ние може да го направи тоа. Значи во овој случај, ајде да се направи некои Н1. Па Н1 е како највисок заглавието. Тој ќе ви даде нешто тоа е многу голем и смел. 

И во овој случај, она што сакаме за прв текст на нашата веб страница? Ништо. Вие момци се случува да се создаде ова. Јас сум само ќе да напишеш. ПУБЛИКАТА: Добредојдовте. 

ALLISON BUCHHOLTZ-АУ: Добредојдовте. Добро, па ако го спаси и ние ја превчитате, имаме голема голема добредојдени. Па само така може да се види разликите, да се направи нешто на H6. Што сакаме токму тука? Нели? 

Добро, па само така можете да види разликата. Да, Високата. Па ако забележите, H1, многу, многу голем. h6, како храбар, но многу помал, и имаш сето она помеѓу. Така што би можеле да имаат H2, H3, H4. И овие се само заглавија, па ако се обидуваш да се создаде веб-страница, која има различни секции, можеби сакате да го користите заглавија таму некаде. 

Кул. Па ние ќе додадете некои повеќе работи во нашето тело. Гледам дека тоа ќе биде вид кул ако имавме слика. Се чувствувам како секој може да се користи, можеби симпатична зајаче слика во право за сега, па ние сме случува да се најде зајаче слика во прв план. 

Не знам дали вие момци имате било какви параметри на која сакаме. Дали имате било какви параметри? Ова овде? Надолу. ОК. Дека еден е. Добар избор. 

Добро, па ние ќе ја видите нашата слика. Погледни го тоа. Гледам дека симпатична работа. Како вие би можеле да бидат тажни во понеделник со ова? 

Значи ние сме само ќе да копирате сликата URL-то. И она што сакаме да направите е да, ајде да велат дека ние имаме некои p за став. Ние сме случува да се каже "Погледни погледнете симпатична зајаче. на Слоновата awwww ". Го сакам мојот bunnies. Имам зајаче дома. Ми недостига мојот зајаче. Значи она што се случува да се do-- Не знам дали вие момци сакаат на Google this-- но со HTML, како би можеле да го вклучите една слика? Буквално, Ако на Google "Вклучуваат слика HTML" зошто не сте момци ми кажете она што оваа ознака треба да биде? 

ПУБЛИКАТА: img source-- 

ALLISON BUCHHOLTZ-АУ: img source-- ПУБЛИКАТА: --equals-- ALLISON BUCHHOLTZ-АУ: --equals-- ПУБЛИКАТА: --quote-- је. ALLISON BUCHHOLTZ-АУ: Совршена. Убава. Види, Мајспејс генерација, нели? ПУБЛИКАТА: Neopets. ALLISON BUCHHOLTZ-АУ: Neopets. О, во ред. Wow. Тоа е лудо. ОК. 

Така бидете сигурни дека да се добие тоа право. Кул. Па ова треба да биде тука. А потоа, ако ние ја превчитате, ние имаме Bunny на страницата Зар не е тоа симпатична? 

Ова е толку слатко. Сте одбрале голема, голема слика. Јас сум тоа копање. 

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

Тоа, сепак, ќе биде во наводници. Тоа само ќе биде како ако ние имавме име this-- ако оваа слика бил спасен во папката со овој HTML датотека дека јас сум уредување и бил повикан bunny.jpg. Ние, исто така може да го направи тоа и тоа ќе се појавиш. Сепак, јас не ја имаат оваа зачувани во на датотеката и сакам да се задржи Bunny, па ние си оди за да се задржи на линкот. 

ПУБЛИКАТА: Што е rabbit.org? 

ALLISON BUCHHOLTZ-АУ: rabbit.org. Тоа е appropriate-- изгледа, можете да го прифати. Усвојување. bunny.jpg. Сакам да го прифатат овој зајаче. О, Боже, тоа е толку симпатична. 

Добро, така додадовме заглавија. Додадовме слика. Очигледно, додадовме на некој текст тука, нели? Ако сакавме да додадете други текстови, би одат вака. Значи ова е уште еден став. 

И ние се каже "ова е уште еден став." Исто така, јас сум ужасно правопис, па јас може да misspell работи. Само материјал цел. 

Значи имаме уште еден став тука, нели? Па можеби ќе сакате да направите нешто малку поинтересна од само ги имаат сите на вашиот текст, како и право подредени. Можеби сакате да центрирате вашиот текст, во ред? 

Значи, ако некој сака да ги користат овие корисна компјутери пред вас и да ми кажете како сте случува да центрирате овој текст, 

ПУБЛИКАТА: p align. 

ALLISON BUCHHOLTZ-АУ: Па стр align е еднакво на "центарот". Тој е тоа убиство, момци. Y'all треба да се засили. И ние имаме "Ова е центриран." И сега имаме нешто центрирано. 

На ист начин, ако сте сакаат лево подредени, можете да направите усогласување на еднаквите лево, усогласување еднакво право. Целосно зависи од вас. Ако сум го правела токму тука, тогаш ова should-- сега тоа е право подредени. 

ПУБЛИКАТА: Алисон? Од имиџот извор, зошто не е има блиски на изворот на img? ALLISON BUCHHOLTZ-АУ: За жал. Ова треба да биде таму сега си добар. Сега сме добри. ПУБЛИКАТА: Не треба за да го затворите таму, или не? ALLISON BUCHHOLTZ-АУ: Па, така img извор, овој е just-- со слика, тоа е само гледа како еден елемент, додека ако забележите за остатокот од овие, ние имаме некои таг тогаш информации кои тоа се однесува на, а потоа и затворање на тагот. Но, со слика, сè е само вид на автономни. Кул. Па вие момци знаат како да се создаде насловот, знаеш како да го внесете текст, знаете како да се стави слика во моментов, може да се усогласат работите. 

Уште една работа што можеби ќе сакате да бидете во можност да го стори е да се создаде листата во CS-- сме вид на оди во pset следната недела. Нешто што ние обично учат оваа недела оди навистина добро со pset следната недела, па ние сме вид на мешање, се преклопуваат работи тука. Но, тоа ќе биде корисно за следната недела. 

Значи, ако сакаме да се создаде некои листа, како би можеле да го правиме тоа? Вие не може да одговори на ова време. Некој друг мора да. Тоа не е тешко, момци, ветувам. Гугл "неподреден список HTML." Што беше тоа? 

ПУБЛИКАТА: [нечујни]. ALLISON BUCHHOLTZ-АУ: Токму така. Значи сакаме нареди или подредени? Да направиме неподреден. Па ние имаме некои ул, која се залага за неподреден список. И она што го имаме за секој елемент? Дали тоа треба свој обидеш? Можеме само да почнам да пишувам нешта? 

ПУБЛИКАТА: Ли. 

ALLISON BUCHHOLTZ-АУ: Ли. Значи она што е нашата листа ќе биде? Што сакаме тука? Ние само го прават имиња. Едноставно направете Јаков. 

ПУБЛИКАТА: зајак храна. 

ALLISON BUCHHOLTZ-АУ: зајак храна. Добро ми се допаѓа ова. Зајак храна. 

Добро, така што мораме моркови. Ми се допаѓа овој зајак тема. Јас сум тоа многу копање. ПУБЛИКАТА: Всушност, јас мислев Јаков ќе биде legit. ALLISON BUCHHOLTZ-АУ: Јаков? Јаков е зајак храна. Ако сте гледале на Јаков слика од работното време, може да си помисли тој доби нападнат од убиец зајак. 

ПУБЛИКАТА: Имам еден зајак сега. Јас имам еден убиец зајак сега. 

ALLISON BUCHHOLTZ-АУ: Дали сте шегуваш мене? 

ПУБЛИКАТА: Ќе го следниот дел донесе. Јас го имаат. 

ALLISON BUCHHOLTZ-АУ: Ова е смешно. Во секој случај. 

ПУБЛИКАТА: [нечујни] 

ПУБЛИКАТА: Да, мојата Проктор има еден зајак, како и. 

ALLISON BUCHHOLTZ-АУ: Сакам зајак. Добро, кој носи вистински зајак да следниот дел, вкупно пусти поени. ПУБЛИКАТА: [нечујни] ПУБЛИКАТА: О, тоа не е реално. Тоа е препарирано зајакот. 

ALLISON BUCHHOLTZ-АУ: О Да, може да се затворат. Изгледа рад. ПУБЛИКАТА: Дали тоа всушност важно? ALLISON BUCHHOLTZ-АУ: Тоа не го прави тоа. Со повеќето од овие работи, не го затвори ознака, 99% од времето ништо лошо се случува да се случи, но тоа е добар стил, исто така. Значи Јаков. И ние имаме зелена салата. ПУБЛИКАТА: За врски, тоа е навистина важно. ALLISON BUCHHOLTZ-АУ: Хм? ПУБЛИКАТА: За хиперлинкови. ALLISON BUCHHOLTZ-АУ: За хиперлинкови. Да, хиперлинкови треба. Добро, па ајде да видиме тука. И ние имаме блиски на нашата листа. И ние се погледне во тоа. Ние сме all-- Јаков, право таму. Зајак храна. Ме потсетува на Bunnicula. 

ПУБЛИКАТА: [нечујни] ALLISON BUCHHOLTZ-АУ: Јас сум носат назад сите старата школа референци денес, не јас? Само сите стари училиште референци. Треба да се донесе како Gogurts или нешто за ужина. 

ПУБЛИКАТА: Или Gushers. ALLISON BUCHHOLTZ-АУ: О. ОК. Јас ќе се види дали можам да ги пратите надолу Gushers за следната недела. Мислам дека може да го направи тоа. Јас мислам дека ние би можеле да имаат некои во канцеларијата. 

Добро, па ние сме опфатени многу различни работи што можете да направите со HTML, нели? И како што веројатно може да се види, тоа е nothing-- се надевам дека не е премногу intim-- ако е така, не мислам омаловажавам никого. Ако имаш проблеми, ве молиме да дојде да разговара со мене. 

Но, повеќето од тоа е само гледа во синтаксата, нели? Ако сакате неподреден список, ако сакате некој вид на листа, ако сакате да ги усогласат нешто или формат нешто, тоа е за сите само вид на угледување на синтакса за HTML, нели? И едно нешто што е прилично кул, всушност, е ако одите to-- ајде да видиме, она што е убаво, веб-сајт кој ние се допаѓа? Секој имате било какви омилени веб сајтови дека се во ред да се донесе до онлајн? Знаеш што, ајде да го направите CS50. Тоа е убаво и безбедно, нели? 

Добро, така CS50 тука. Ох изгледа, има дел во моментов. Ако ви се допаѓа начинот на кој таа изгледа. 

ПУБЛИКАТА: [нечујни]. ALLISON BUCHHOLTZ-АУ: Ние не сме случува да се направи мета дел, момци. Тоа не се случува. Тоа би било кул, но ние нема да го направи тоа. 

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

И буквално, се додека како што наведуваат работи, се додека вие не сте само крадење од луѓе, тоа е во ред. Особено за CS50 [? финансира?], ние сме вид Ве очекуваме да се добие инспирација од друг веб-сајт. Па се чувствуваат слободни. Се погледне преку веб-сајтови кои мислите дека се навистина доста и да дознаам како тие ги користат HTML и CSS да се направи овие работи. 

Значи како што гледате тука, таму е очигледно како врски и имаме класа тука. Имаме линк тука. Имаме листа. Ние веројатно имаат некои слики тука некаде. 

Имаме некои кул стил тука. Ова е следната работа ние сме случува да се направи. Значи стил, секогаш кога ќе ги видите овие стил загради, тоа е CSS основа. Бен, ги имате некое прашање? 

ПУБЛИКАТА: Што е div? 

ALLISON BUCHHOLTZ-АУ: div е само a-- она ​​што е div? ПУБЛИКАТА: дивизија. ALLISON BUCHHOLTZ-АУ: дивизија. Да, тоа е исто како одделување на различни елементи. Добро, па тука е она што ние сме ќе одат во следната. Така што ова не може да биде најдобар стил, бидејќи, ако забележите имаме HTML и стил во истата страница, и ние, всушност, сакаат да се одделат оние, Во ред? И всушност, дозволете ми да отвори мојот вистинскиот затоа што ова би требало да биде PDF, така што мораме style.css. 

Така што можеме да го направите тука е овие се кул работи како некои бледеат и ние би можеле да се обидат и да го направат тоа, но јас се чувствувам како јас би неред дека до на мува, па јас ве охрабруваме момци да одат обидат тоа на свој, но јас не одам да го направи тоа право сега. Значи, ако вие момци, се сеќавам, ако некогаш ќе го погоди проблемот во собата, нешто swoops во од страна. Тоа има врска со избледи и транзицијата и какво ли не. 

ПУБЛИКАТА: И тоа е CSS и HTML? 

ALLISON BUCHHOLTZ-АУ: Сите CSS и HTML. Да. Па можете да направите многу навистина кул работи со CSS и HTML. Па со нашиот одличен Bunny веб-страница тука, ние се случува да се направи малку малку на CSS стил со неа. 

Значи, ако некогаш имате стил лист, кој што го имаме овде, можете само да се јавите style.css. Може да го наречеме она што го сакате. Она што е важно е дека ние ќе да го референца во нашето web.html тука. 

Значи она што ние ќе треба да направите е we-- па јас не се плеткаш овој up-- ние се случува да се поврзе овие две датотеки заедно. Па во истата way-- Одам да се подготви аналогија до C тука. На ист начин дека ако имате некои library-- и имаме cs50.h-- нашите компајлерот го поврзува. Ова е само експлицитна линк од наша страна. Значи, во истиот начин на кој го правиме хаш вклучуваат некои датотеки, што Јас сум за да се напише е само HTML / CSS еквивалент на тоа. 

Ние сме само велејќи, добро, оваа веб-страница се случува да го користите овој интерфејс, во ред? Значи имаме линк rel еднаква на интерфејс. И тогаш имаме тип, CSS. А потоа href еднакви. 

ОК. Така што сите тоа го правеше тука е може да се мислам на тоа како истото како хаш се вклучат. Очигледно, тоа изгледа малку повеќе комплицирано, но во сите случаи, тоа е ефикасно истото. Така што ова е само дел поврзување на стил лист, тоа е од типот text / css, и името на тоа е style.css. 

Она што е важно да се знае е дека на веб-страница дека јас работам право now-- web.html и style.css-- се во иста папка. Бидејќи во различни директориуми, што треба да се даде на вистински корен за да го или патот до неа. Но, во овој случај, ние сме го држи супер едноставен и тоа се случува да биде тука. Значи, ако тоа го правиме, имам некои работи веќе чекаат на ред тука. 

Па ние имаме некои телото, што се случува да имаат нашите боја на позадината, кои во моментов е светло сина. Можеме да го смени ако сакаме, но ако се сеќавам ова правилно, тоа само треба да го смени во светло сина. И сега имаме светло сина позадина. И имавме here-- секој може да се сеќавам кој е хаш проект или класа? 

ПУБЛИКАТА: проект. 

ALLISON BUCHHOLTZ-АУ: проект. Кул. Значи она што сакате да го направите која од овие фонтови или which-- сакаме "Погледни симпатична зајаче "да биде виолетова? Мислам дека ние сакаме тоа да биде виолетов. Јас сум прилично долу со тоа да се биде виолетов. 

Значи она што го правите е да го направите Проект equals-- во овој случај Јас реков, што, прилично боја тука. Ние ја превчитате. Одеднаш, тоа е виолетова. Добро, па со проект, се сеќавам тоа треба да биде уникатен, па јас никогаш не треба да се користи овој проект на друго место. Но со класа, како што имаат тука со прилично фонт, Јас треба да бидат способни да ги користат дека секаде Сакам да. 

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

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

ПУБЛИКАТА: Да. Па, само се допаѓа бои сте користење се зборови. Дали постои начин да се направи бои со хексадецимален RGB? ALLISON BUCHHOLTZ-АУ: Можете исто така да го прават тоа со hexidecimal, верувам. Да. Но, тоа е вид на убаво ако не сакам да ги гледам нагоре. Вие само може да биде како, виолетова или сина. ПУБЛИКАТА: Да се ​​надеваме дека тие Знаеш што значи тоа. ALLISON BUCHHOLTZ-АУ: Токму така. Значи, да се направи овој читање или резеда. Зошто би ви било кога избере резеда? Тоа е еден интересен боја. 

Добро, па очигледно можеме да го гледаме може да се променат работите сепак сакаме. Ако сакаше да create-- да речеме сакавме да се создаде една класа. Што може да ви момци сакате да промените? Ако се повлече до W3Schools " CSS документација, Оставам подот до вас момци. Можеме да се обидеме и да направи нешто кул со ова во последните неколку минути. Бидејќи јас сум вид на ви даде несреќата се разбира на многу интересни нешта дека можете да направите. Но, на крајот, како што реков, ако само експеримент, ќе ги научат многу. 

ПУБЛИКАТА: Дали ќе се погледне нагоре, кој фонт? 

ALLISON BUCHHOLTZ-АУ: Да, Гледав до кој фонт. Значи како буквално, јас отиде to-- што направив? Го направив CSS фонт листа, и тогаш јас го фонтот оџакот, а потоа јас бев како, погледнете, тука се сите кул фонтови можете да направите. И таму беше оваа, така Јас го копирале на мојот таблата со исечоци. И тогаш јас бев како, Добро, кул, таму одиме. Сето тоа е направено. 

ПУБЛИКАТА: Значи вие мора да бидете сигурни дека дека CSS знае што дека фонтот е. 

ALLISON BUCHHOLTZ-АУ: Да. 

ПУБЛИКАТА: Што се каже на крајот? Курзивна? 

ALLISON BUCHHOLTZ-АУ: курзив. Да. 

ПУБЛИКАТА: Позадина на сликата. 

ALLISON BUCHHOLTZ-АУ: Позадина на сликата. ОК. Значи сакате да ми кажете како да го направите тоа. Јас ја напушти оваа за вас. Јас сум само пишување до тука сега. На тркалото е во ваши раце. 

ПУБЛИКАТА: Добро 

ALLISON BUCHHOLTZ-АУ: Добро. Што правам? 

ПУБЛИКАТА: Doing-- знам што доаѓа по кадрава голема заграда. ALLISON BUCHHOLTZ-АУ: Добро. Па веројатно во тело, би се претпостави, бидејќи ние сме прават со позадината на сликата. 

ПУБЛИКАТА: Да, ајде да го направите тоа. 

ALLISON BUCHHOLTZ-АУ: Добро. ПУБЛИКАТА: Добро, така позадина дебелото црево, а потоа ние треба URL адресата на таа слика. Можеби псевдо-кодот, кој сега за сега, можеби. 

ALLISON BUCHHOLTZ-АУ: Што би ви се допаѓа мене to-- ПУБЛИКАТА: Мислам како GIF. ALLISON BUCHHOLTZ-АУ: А GIF? Тоа ќе биде интересно. Добро, што сум јас Googling тука? 

ПУБЛИКАТА: Не, тоа е ваш избор. 

ALLISON BUCHHOLTZ-АУ: Зошто не we-- ако тоа е зајаче, Се чувствувам како ние треба да имаат убаво тревни тревник или нешто. 

ПУБЛИКАТА: Ливада. А ливада. 

ALLISON BUCHHOLTZ-АУ: А ливада? ОК. ПУБЛИКАТА: Или Рејчел Maddow. ALLISON BUCHHOLTZ-АУ: Ова изгледа убаво. О, тоа е мал, иако. Ние треба добар големина на сликата. Ајде да видиме. О, погледнете. Тоа е прилично ливада. Знаеш што, ми се допаѓа ова. Ајде да го копирате овој. 

ПУБЛИКАТА: Добро, па мислам дека тоа е URL-то, отворен загради. 

ALLISON BUCHHOLTZ-АУ: Добро, URL-то. 

ПУБЛИКАТА: Тогаш адреса. 

ALLISON BUCHHOLTZ-АУ: Добро. Е дека сите ние треба? 

ПУБЛИКАТА: Затвори загради точка-запирка, а потоа просторот, позадина цртичка прилог на дебелото фиксни, и кадрава голема заграда. 

ALLISON BUCHHOLTZ-АУ: Добро. Да видиме дали тоа функционира. Тоа се случува да биде прилично кул ако го прави тоа. Јас сум вистински возбудени токму тука. Тоа не работи. Се прашувам зошто. ПУБЛИКАТА: Можеби URL-то мора да биде во наводници. ALLISON BUCHHOLTZ-АУ: Можеби. И ова е како ние учиме, момци. 

ПУБЛИКАТА: Ние можеме да имаат позадина боја и позадина на сликата? 

ПУБЛИКАТА: Не Еден заменува друг. 

ALLISON BUCHHOLTZ-АУ: Не знам. Ајде да видиме. Ајде да го провериш и да видиме. 

ПУБЛИКАТА: Ах, можеби, да. [Ставање ГЛАСОВИ] 

ALLISON BUCHHOLTZ-АУ: Добро, ова е obviously-- јас [нечујни] тука. Значи во ред. ПУБЛИКАТА: Позадина прилогот. ALLISON BUCHHOLTZ-АУ: Ах. 

ПУБЛИКАТА: Добро, јас не знам. ALLISON BUCHHOLTZ-АУ: Тоа изгледа како тоа треба да работат. Дали сте сигурни дека тоа е дебелото црево по URL-то? 

ПУБЛИКАТА: Не, тоа е точка-запирка. ALLISON BUCHHOLTZ-АУ: Тоа е точка-запирка. ПУБЛИКАТА: Дали велам дебелото црево? ALLISON BUCHHOLTZ-АУ: Рековте на дебелото црево. ПУБЛИКАТА: О, не. ALLISON BUCHHOLTZ-АУ: Таму да одите. ПУБЛИКАТА: О, чекај, сега ние не можеме да го прочитате текстот. ALLISON BUCHHOLTZ-АУ: Сега не можете да го прочитате текстот, но ние имаме сликата во позадина. Mmhmm? 

ПУБЛИКАТА: Дали HTML поддршка на динамична содржина? Како, може да ја промените големината на таа слика во зависност од големината на прозорецот, или е тоа CSS-- 

ALLISON BUCHHOLTZ-АУ: Па CSS мора да го направите тоа. Значи, ако вие момци се заинтересирани во учењето напредни CSS, Јас сум ко-настава семинар на CSS на 7. И јас ветувам дека ќе да биде многу повеќе во длабочина и да направи многу повеќе се излади работите во оваа секција. И мојот ко-учител е како Вкупниот пред крајот веб dev господар. Значи тоа ќе биде прилично кул ако сакате да се запознаат со сите интересни нешта дека CSS може да се направи. 

Но, она што го имаме тука со неговата позадина прилогот fixed-- па тоа е некој фиксен size-- но вие всушност може dynamically-- Ако некогаш сте се види на веб страници, како повеќето добри веб страни ќе се направи, кога ќе се прилагоди на Големината на вашиот интернет пребарувач, прилагодување на позадината или колку се покажува или reformats работи, нели? Значи тоа е она што ние го нарекуваме релативната позиционирање. 

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

Па тоа е нешто што може да се направи. И CSS може, всушност, do-- CSS и JavaScript, кој ќе влезе во следната week-- може да ви овозможи да се динамички промени страници, без да се им ја превчитате во секое време. И можеш да го направите некои прилично кул работи. 

Значи, постои уште една работа дека вие момци би сакале да се направи или нешто што сакате да се истражуваат? Имаме 10 минути. Ние, исто така може да си заминам рано, но ако што сакате да направите некои повеќе веб работи, можеме, но јас не сум ќе те присили да. Но, ние исто така може само да јаде бонбони. ПУБЛИКАТА: Означете го текстот бело, па можете да го прочита. ALLISON BUCHHOLTZ-АУ: Добро. Значи во овој случај, ние сакаме некои стр. ПУБЛИКАТА: Треба ли да го прават тоа во тело, па тоа се однесува на целата страница? ALLISON BUCHHOLTZ-АУ: Да, ние можеме всушност. Тоа е добра идеја. Па ние have-- правиш знаеме што треба да биде? Јас не знам дали можеме да направиме боја на текстот. Јас требаше да се обиде и се создаде една класа тука. 

ПУБЛИКАТА: Како да добиете толку дека има предлози? ALLISON BUCHHOLTZ-АУ: Па ако вие момци сте заинтересирани, ова е уште еден текст уредник наречен Високата. Треба да бидете во можност да инсталирај го на вашиот апарат. Понекогаш тоа добива малку незгодно. Ако сакате да им помогне со тоа, Јас сум супер среќни да ви помогнат со него, затоа што gedit е голема и Тоа е страшно, бидејќи можете да го компајлирате на дното, но јас навистина како Високата бидејќи тоа е прилично и тоа не се прават работите како авто-заврши. 

Значи, вие дефинитивно може да се чувствуваат слободни да дозволете ми да знам, ако сакате да го направите тоа. Ако само Google "Високата текст, "тоа обично има инструкции за тоа како да го инсталирате на различни оперативни системи. Тоа е навистина кул, јас мислам, во моето мислење. Па стр. Мислам дека само може да се направи text-- или ние само може да се направи боја е "бело". Таму. 

Значи она што го направив тука е дека јас не го промени целиот текст. Но, стр тука е само еден ознака што го имаме, нели? Овој став таг. Па јас само создаде CSS елемент кој рече, добро, ништо со овој таг стр, бидете бела боја. 

Значи, ако сте забележале, го направи оваа бела и ова бело. Тоа не направи нашата листа бели затоа што тоа не е поврзано со тоа. Вие би можеле да одат преку и можете да say-- 

ПУБЛИКАТА: Дали боја на позадината. 

ALLISON BUCHHOLTZ-АУ: Боја на позадина? 

ПУБЛИКАТА: Позадина на цевка во боја, каде ќе се стави на стр таг. 

ALLISON BUCHHOLTZ-АУ: Добро. Што сакате бела? ПУБЛИКАТА: Mmhmm. ALLISON BUCHHOLTZ-АУ: Добро. Таму да одите. ПУБЛИКАТА: Тоа е чудно. ALLISON BUCHHOLTZ-АУ: Прилично кул, нели? Значи, ако сте само збрка околу, сте ќе треба да научат многу. И тоа може да биде прилично кул. Мислам дека тоа е дефинитивно повеќе пријатна отколку понекогаш затоа што не мора да почека за вашата програма да ги собере. Вие само може да ја погоди Освежи и сте како, ох, се погледне, тоа работел, или ох, јас сум веројатно недостасува нешто. И тоа е нешто што е навистина кул за овој следниот дел на класата, е тоа е дефинитивно, јас Размисли, полесно да се провери како ви одат на патот наспроти да се напише овие долги програми и кои сакаат и молејќи се дека таа работи на крајот. 

Така да со тоа, мислам дека вие момци сите изгледа добро. Ако имате било какви прашања, како и секогаш, се зборува за мене, дојди да ме известите. Јас ќе бидам во право надвор за следните 15 минути ако сакате да разговарате за ништо и сè. 

Па се надевам дека ќе guys-- со среќа со овој pset. Крајниот рок е петок напладне поради тоа што беше ослободен доцна. Па јас веројатно ќе бидат видливи многу од вас момци на Четврток, но се надевам не. Можеби ќе треба да биде направено од тогаш. Ќе ми биде супер горди. 

Но ако не, ќе се видиме во четвртокот. Вие исто така може да се користи на крајот на денот, кои се протега до сабота напладне. Но јас don't-- нели? 

ПУБЛИКАТА: Ноќ на вештерките. 

ALLISON BUCHHOLTZ-АУ: Тоа е Ноќта на вештерките, а и б, Јас не мислам дека има волја биде работното време во петокот. Значи, навистина се обиде и да го направите тоа Петок, така што сите ние да славиме Празнувајте викенд. Добро, ќе се видиме момци следната недела.