Дъг LLOYD: Така прекарахме about-- ако ми по математика е прав, И мисля, че търсите back-- Мисля прекарахме около 35 видеота говорим за различните аспекти на C, може би малко повече, може би малко по-малко. И ние не покрива всичко в C, но ние обхванат голяма част от език, по-голямата част от него, Със сигурност за обща употреба. Сега ние ще говорим за друг език, HTML. И ние ще се покрие то само с едно видео. Но това ще е OK. Това ще стане действително нещо, ти започваш да свикне. Сега, когато имате на основи на един език, това е всъщност доста лесно да започнат да учат другите. Така че ние ще започнем да се засили малко назад и гланц над основния разлики между следните езици и някак си тръгнеш с него. Има много наистина страхотно ресурси в интернет, които ние ще започне да ви насочва посока, защото интернет е огромно хранилище на информация. И така, това не е ли ще да губят задължително като не се налага информацията покрит с видео. Вие все още ще можете да получите всичко, което трябва и използване знанията, които вече сте изградена чрез разбиране C да направи кривата на обучение за тях други езици всъщност е много по-плоски. Обещавам. Но нека да поговорим за един език това е наистина фундаментален за всяка уеб страница, която е HTML. HTML е Hyper Text Markup Language. HTML е език, но това е Не един език за програмиране. HTML не разполага с променливи. То не трябва логика или функции или нещо подобно. Не можем да направим някоя програмиране по себе си в HTML. Понякога вие ще чуете хората описват себе си като HTML програмисти, които не е съвсем точна. Ние не може да пише HTML програми. HTML е просто използва за маркиране на текст. Тя се нарича език за маркиране. И какво е това does-- този markup-- ние използваме тагове в HTML и тези tags-- това markup-- семантично определя структурата на страница и причинява обикновен текст, който съществува между таговете да се тълкуват от браузърите по различни начини. И може би е най-добре да се обясни това чрез илюстрация. Ето един много прост HTML страница, а не един HTML програма, отново, една HTML страница. И ние знаем, че е един HTML страница, защото ние сме ограничена всичко с HTML тагове. Така че това е, което един HTML тагове прилича. Това е между ъглови скоби. И забележи в горната част имаме HTML и на самото дъно, след като сме направили това, което е Очевидно много други HTML, имаме ъгъл скоба наклонена черта HTML. Така, че нещо е границата между това, което е HTML и кое не е. И разбира се, условно, просто както ти е написал всичките си програми C с точка C разширения, всички ваши HTML файлове ще завърши с дот HTML разширения. Но има и още става тук. Ние не просто имат тези тагове. Ние очевидно имаме тази нещо, наречено маркер главата. Е, добре, какво е това? Ами може би това е най-добре да разграничи от пътя на орган, тялото е съдържанието на уеб страницата. Така че може би тага главата определя неща че не е в прозореца на браузъра правилното, но е някак важно в нашия уеб страница се оказва правилно. Така например, в рамките на главата маркер имаме дял етикети. Така че заглавието е здравей свят, Това всъщност ще бъде това, което показва в раздела в Chrome или в сафари или Firefox-- независимо браузъра ви prefer-- това е какво ще се появи в заглавието. И преди да разделите то ще се вижда в целия прозорец на браузъра и можете да имате само една страница отворите в прозорец на браузъра в даден момент. Така, че ще бъде най- в заглавието на страницата си в раздела или бара на прозореца на браузъра, здравей свят. И след това съдържанието на моето уеб страница ще бъде свят, здравей. Така че нека да погледнем на това, което някои нещо като това може да изглежда така. Това е доста проста HTML страница. Така че аз съм тук, в моята CS50 IDE и Аз бях в увеличени малко. И аз съм просто ще отворят здравей дот HTML и ще ви покаже, че това е доста много съдържанието на страницата, която видяхме преди. Моите прости тагове HTML, главата, заглавните тагове, по тялото, и така нататък. Аз бях с отстъп да бъде чиста. И тогава какво мога да направя в моя IDE е само предварителен преглед на страницата. И там да отидем. Съдържанието на страницата ми е свят, Здравейте, и аз не виждам нищо в от таговете за глава там. Това е просто съдържанието на тялото. World, здравей. И пак тялото просто каза, свят, здравей. Другата част липсва. Така че това е наистина всичко това е. Това е един много прост основния HTML страница. Сега съм с отстъп моя HTML да бъде много хубаво и организиран, но аз всъщност не е нужно да. Можех да го правят да изглежда доста грозно. И това все пак ще работят. Това ще бъде абсолютно същата уеб страница. Току-що се отърва от всички от бялото пространство. Както се оказва, бяло пространство е данни. И така, когато сме изпращане на данни от подател към приемник, от сървър към клиента, данни струват пари. И така, да се отървем от празно пространство всъщност е добра идея ако сте човек, който служи до много уеб съдържание. Това е лоша идея, ако сте някой, който е изучаването тези неща и искате да имате тя добре организирана. Това е много по-лесно да се анализира от това. Но това е функционално идентични. Вдлъбнатината и подобни неща всъщност не значение в HTML. Всичко, което има значение, е отваряне на етикети и затваряне тагове в правилния ред. Забележете какво се е случило тук, все пак. The маркиране ни дава начин да се съобщава допълнителна информация за това, което съм писал. The Hello, World част беше тълкува в заглавието. И светът, здравей част беше тълкува като съдържанието или това, което трябва да бъде видимо в моята уеб страница. Има над 100 от тях различно маркери и много големи ресурси онлайн, за да ги намерите. Отиваме да се говори за някои от тях в това видео, някои на наистина фундаментални неща. Но ние не отиваме за разговори за всичко това, защото той би било изчерпателно да го направят. Друго нещо, което можете да направите, все пак, е отворят инструменти за разработчици. И ако си спомняте от нашето видео на HTTP, Обясних как да се отвори до инструменти за разработка. В Chrome това е обикновено клавиша F12 да се отвори лентата с инструменти за разработчици. Тогава вместо избор на мрежа раздела, можете да изберете раздела Elements. И ако се зареди уеб страница, вие всъщност ще виж на HTML, която създава, че уеб страница. И така можете да научите много за HTML като погледнете в любимите си уеб сайтове и виждам как те изграждат на различни части от тях, които ви харесват. Така че може би има тази готина модел или нещо подобно. Как да го направя с HTML? Ами може просто да започне до вашата разработчик инструменти и мишката върху този елемент и да видим какво точно HTML го прави. Така че това е един наистина добър начин да научите HTML, и аз силно препоръчваме Можете ли по-както да научите HTML а също и да научите малко малко за някои от опциите достъпни за вас в инструменти за разработчици, които със сигурност ще дойде по-удобно, както започнете да правите по-интензивно уеб програмиране. Така че нека да разгледаме по- Няколко общи тагове. И ние ще скочи и да разгледаме най- какви са тези етикети, които също ще направят както като погледнете в някои файлове в моя IDE. Така че тук са три много основни тагове за променяте външния вид на текст. Има тагове B, I тагове, и U тагове. И съответно това, което правят, е направят текста между тях с удебелен шрифт, курсив и подчертаване. Така че нека да видим какво ще изглежда, че като в условията на реален уеб страница в моя IDE. Така че тук, в моята IDE имам файл, наречен BIU дот HTML. BIU дот HTML просто е удебелен, курсив, подчертаване. Аз ще го отворят. И ние ще видим, че тук съм имат този текст е тагове Б смели. Този текст е I тагове курсив. И този текст е U тагове подчертани. Какво е това, щеше да изглежда? Ами пак, всичко, което имам да направите е да отидете тук да ми браузър, ми файлов браузър, кликнете Preview, и това е, което идва. Текстът в между В тагове е наистина сега смели. Текстът в между I тагове е наистина сега курсив. И текста между U тагове е наистина сега подчертани. Така че това е доста добър. Сега ние знаем как да се направи текст изглежда малко повече фантазия или нарисувайте акцент на определени неща. Друга двойка на общи тагове тук са параграф тагове, P, и заглавни тагове, които съм постановеното тук като HX. Тези P тагове, настоящите параграф тагове, прекъсне вашия текст нагоре в параграфи. Това не е достатъчно просто да Въведете удари и се оставя пространства, защото един компютър само ще да направи това, което му казвате да прави и да го игнорира бяло пространство за по-голямата част. Така че ние не може да просто да натиснете Enter и очакваме нашия компютър да се тълкува, че искаме за да започне нов параграф. Трябва да кажа, че това много ясно е един paragraph-- това е another-- от обхваща всеки в набор от P тагове. И ние също имаме тези опции за H тагове, тези тагове заглавието. Имаме шест различни нива на заглавията, едно, две, три, четири, пет, шест и, които са прогресивно по-големи и по-голям хедъри. И те ще получат по-малки и по-малки и по-малки. Така че ние имаме един удар с глава на най-високо ниво, а втората удар с глава на ниво, и така нататък, и така нататък. Нека да разгледаме най-може би някои P тагове и някои тагове заглавието в действие на уеб страница. Така че тук, в моята IDE Имам файл с име PH дот HTML, PH в параграфи и заглавни тагове. Отворете че до. Има много неща, става тук защото съм се въведе някакъв Lorem Ipsum, някои просто случаен текст тук. Така че аз ще намалите малко защото има толкова много неща. Но забележете, че имам в самото Нагоре тук имам H1, първо ниво, глава маркер. Тогава имам параграф, който е само на куп случайни text-- Lorem ipsum-- Просто подразбиране стандартната пълнене в текст. Така че аз имам две точки вътре, че едно ниво с глава, а след това по-долу I има ниво с две глави тук по линия 24, втори удар с глава на ниво, а други двама параграфи. Ами какво означава това изглежда като ако мога да я видите в моя преглед? Да видим. Така че забележите, че Първият удар с глава на ниво тук всъщност е доста по-голяма от заглавната част на второ ниво. Така че ние използвахме H1 тагове. И забележете, че ушните P ни позволяват да пробие нещата в параграфи. Ако бяхме отървали от тези P тагове и всъщност просто сложи Влиза или рекламации в това, което се надявахме между щеше бъде различните параграфи, всички те просто ще нападате заедно и той не би имал тази хубава точка раздяла с място по-горе и по-долу. И така, това е, което параграф етикети и тагове заглавието които обикновено се използват, за да се направи, за да се направи внимание на части от нашата уеб страница по този начин. Следващи до някои тагове, които ние използваме за изграждане на списъци на нашата уеб страница. Така че ние имаме неподреден lists-- ULs-- които са само водещи списъци, подредени списък, които са numbered-- OLs-- и във вътрешността на една от един от тези, които трябва да имаме комплекти от това как да се посочат елементите на списъка, LI. И така, ние имаме отворен таг UL и ще се постави елементи вътре в него. И тогава, когато сме готови с че можем да затворите тага UL. И по същия начин ние можем да имаме подредена или номериран списък и сложи елементи от списъка във вътрешността на тази. Така че нека да погледнем в няколко списъци и каквото искаха направи като на CS50 IDE. Така че аз имам тук, в моята IDE а файлови наречените списъци са разпръснати HTML. Нека да разгледаме. И предизвестие тук имам неподреден списък с пет неща в него. И тогава аз имам един подреден списък, както и Промених тага малко, нали? Казах старт се равнява на шест. Оказва се, с подреден списък I може да зададете начална точка, където I want-- по подразбиране ще бъде one-- само с добавяне на тази така наречена атрибут да ми OL таг. И така, този списък ще започнем да броим в шест. Така че елементите на тази номериран списък трябва да бъде шест, седем, осем, девет, десет, защото има пет елемента в списъка, за разлика от един, две, три, четири, пет, които би бил случаят, ако бях казал OL без да уточнява началния атрибут. Така че ние просто ще визуализирате това, за да можете да се получи усещане за това, което става тук. И там да отидем. Има списъка ми. Първите пет елементи са неподреден или водещи списъци. И следващите пет елемента са отделна нареден списък като се излиза от шест. Ето как можем изграждане на списъци с помощта на HTML. Друго нещо, което може да се искате да правите с HTML се изгради една маса на информация на редове и колони да представят информация в особено организираната начин. За да направите това с HTML, можем да имаме определение на маса, започващ отворена скоба таблица. И тогава вътре от тази таблица можем може да има набор от редове, TR тагове да се посочи всеки ред. И тогава TD тагове отиват във вътрешността на TR тагове да посочите колона в рамките на един ред. Защо се нарича TD а не TC? Е, TD щандове за таблични данни. Обикновено можете да започнете поставянето Вашата информация там. Така че защо е TD а не TC. Това е малко объркващо. Така че ще трябва трапезни тагове и вътре в маркерите си маса имате няколко реда, TRs. А вътре всеки ред имате TDS за броя на колоните че искате да имате в този конкретен ред. Нека да разгледаме най-много проста маса над в CS50 IDE. Така че аз имам тук файл нарича маса дот HTML. Нека да разгледаме какво прилича това. Има много неща, става тук, но ако забележите Имам една маса отворена. Аз съм се започне с определянето на маса. И след това в първия си ред I очевидно има четири колони, една, две, три, четири. И тогава аз съм направил с този ред. Тогава започвам друг ред и направя две, четири, шест, осем. Завърши този ред. Имате друг ред, три, шест, девет, 12. И тогава на последния ред, четири, осем, 12, и въпреки че е малко отсече тук, 16. Завърших този ред. Завърших масата. И тогава аз съм направил с моя HTML. Какво означава това изглежда? Е, това не е наистина много да се види. Аз бях ясно организирана моята информация в малко по-организиран начин. Но това не е супер красива тук. И ние ще се справим с че когато говорим за CSS. Ние ще преразгледа тази идея за това, което правим, за да се направи table-- може би това форматирайте малко по-добре? Но аз все още имам четири реда, всяка от които има четири колони, и наистина това, това се равнява на е много прост четири от четири умножение таблица. Само още няколко тагове ние ще говорим. Нека поговорим за концепция на HTML форма. Така че може би сте виждали това в контекст на влезете в дадена уеб страница. Обикновено сте написали в потребителското си име. Можете да въведете паролата си, и вие сте добре да тръгвам. Това ще бъде началото на една форма. Пропускане над Разделения секунда. Ние също имаме входове, които вид поберат вътре форми. Това са елементите, които вие всъщност пишете в, или радио-бутоните с които сте на тиктака, или проверката кутии, които можете да започнете тиктака разстояние. Така че тези влезем вътре на форми. И те се състоят основно всеки ред на формата ако си форма е форматиран добре. Тогава там е тази концепция за а Разделения, които в действителност не поберат в определена категория от етикети като тези съм правил преди това. Тя просто някак разграничава започвайки от някакъв произволен division-- div-- на страницата. Няма никаква визуална почивка. Няма по линия. Това не е започна като отделно парче автоматично. Ще трябва да го оформите по този начин да се направи това. Тя просто някак казва искам парче пространство на моята уеб страница, и аз съм просто ще се обадя то това разделение на страницата ми. Можем да сложим неща вътре на divs, а в действителност, когато ние се над главата IDE в секунда, ние ще видите, че аз съм като моя образуват във вътрешността на Разделения. Така че аз имам тук, в моята IDE а файл, наречен Разделения форма дот HTML. Нека да го отворите. Забележете, че както казах, Разделение е вид произволно. Нали така? Това няма да означава нищо. Така че имам произволно първа дивизия на страницата ми. И след това, вместо на друга Разделения по-късно, започва на линия осем, Имам тази форма. А вътре на формата имам брой входове, области на формата. Така че аз имам едно поле, чието име е A-- които всъщност не означава нищо полето now-- която очевидно отнема текстови, друг, който отнема парола, друг, че е Radio бутон, друг това е поле за отметка, и друг, който е един бутон Изпрати. Е, какво прави това всички действително изглежда? Е, нека да разгледаме. Ние ще го отворят в нашата прозореца за предварителен преглед. Забележете, че това произволно Първият division-- има не визуално разделяне тук. Той всъщност не прави нищо, нали? И тогава аз имам форма. И аз не направя някоя специално форматиране. Така че формата е само един голям ред на информация. Ако бях форматирани моя форма по различен начин, Може би имам това ред по ред по ред. Но аз не направя някоя стайлинг. Отново, ние не говорим за CSS тук. Ние говорим само за HTML. Ами в моя текстова форма мога да type-- не забравяйте, че форми на типа на текста за да мога да си сложа името. И в моята парола I да въведете паролата си. И тъй като тази област е от тип парола, вие не знаете какво е моята парола. Това е всички точки. Също така мога да избера да отмятам едно радио бутон или отмятам квадратче. Или мога да подам моята форма. И аз не съм направил нищо, така че когато подам моята форма, страницата само освежава. Но аз вероятно може да конфигурирате ми Бутон Подайте да правя нещо друго. И ще видим какво можем да направим с че в един бъдещ видео на PHP. Но това се натрупва много проста форма, че ние можете да използвате, за да имат потребителите взаимодействат и предоставят информация на нашия уебсайт. Един последен коментар, преди да сме преминем към някои други тагове са да се надникне в този вход таг още един път. Забележете, че съм подчертано краищата на маркера в червено. Всеки друг маркер, което сме виждали досега има имаше начало и край, отвор таг и затварящ етикет. Но един вход таг не го прави. Няма никакъв текст, който отива между входните тагове. Цялата информация ние, които възнамеряват да предадат е вързано като част от атрибути на този вход. Забележете, имаме име вход равнява х. Тип равнява у. Това е наистина всичко информация се нуждаем. Това се нарича таг самостоятелно затваряне. То не изисква отваряне и близо, защото цялата информация се съдържа вътре в маркер и неговите атрибути. Така че понякога ще видите това, също. Така че просто да знаете, че ако имате маркер, който е напълно самостоятелна, тя се отваря и се затваря в себе с отворения ъгъл скоба в ляво и ъгъла на наклонена черта скоба отдясно. Ще видим още един от тези, точно сега със снимка тагове, както добре. Преди да говорим за снимки, ние Трябва да говорим за хипервръзки. Ако искаме нашата уеб страница, за да бъде интерактивни и да ни се придвижват, че би било хубаво да бъде в състояние за да кликнете върху един от тези, това, което е типично била синя връзка. Това всъщност е как ние изграждаме хиперлинк в нашата уеб страница. И интересното има и друг HTML тагове наречено връзка, която не е хипервръзка. А тук стои за котва, и Ето как можем да посочи хипервръзка. A HREF равнява х означава отиват в уеб страница X. И всичко между отворите маркер и в края на етикет е това, което се случва, е, че подчерта, син текст, който прилича на връзка че сме запознати. По-долу, че ние имаме един маркер на изображението, което е самостоятелно затварящ таг за показване изображение намира в X. И може да сте в състояние да променяте този образ, като се посочва ширина и височина и други атрибути че точка точка точка, за там. Най-долу тук ние имаме един много интересен търси маркер, който не го прави има затварящ етикет. Това е удивителен знак DOCTYPE HTML. Така че HTML е около от на началото на 1990 за изграждане на уеб страници, и го няма е преминала няколко ревизии оттогава. Съвсем наскоро през 2014 г. тя претърпя редакция наречена HTML5, която сега е на ток нещо като де факто стандарт HTML. За да покаже, че нашата уеб страници са написани на HTML5, това е как можем да започнем. Тя може да се пропусне, но какво, че в общи линии средства е не можете да използвате всеки от маркерите които са HTML5 тагове, тези нови етикети. Така че ние винаги започнем ако ние използваме HTML5. И всички тагове сме говорили за преди това не са HTML5 тагове. Но това би означавало, че HTML5 тагове ще присъстват. И така, ние имаме удивителен DOCTYPE HTML, които е в самото начало на нашата HTML файл и след това, след като тази точка ние всъщност имаме HTML отворена маркира и да се придвижат от там. Последният е маркер за коментар, което изглежда малко по-различно, също. То започва с ъгъл скоба удивителен пробив пробив, но не скоба затваряне. В тези два елемента между там е мястото, където пишете вашите коментари. И нека да погледнем на изображения и коментари и връзки в CS50 IDE. Така че аз имам тук файл, наречен образ връзка с дот HTML което аз отивам да се отворят. И забележете аз имам няколко коментира тук, в моите HTML коментари. Така че точно като в C и други езици за програмиране, HTML просто като е език за маркиране няма способността да имат коментари. И така, аз съм очевидно ще поставите снимка на Рик Астли някъде между това Разделения маркер, това произволно деление. Очевидно, че файла е ООД с Rick дот JPEG, които ако ние се върнем към моето досие дърво за секунда, е файл, който съществува в текущата директория. Така че това е ОК. Мога да го справки. Тогава може да има вътрешни връзки. Така че забележите по линия 11 тук ми HREF е здравей дот HTML. Така че просто се отнася до здравей дот HTML която съществува в текущата директория. И аз също може да има външна връзки с просто уточнява HTTPS да покаже, че аз не говоря за файл в текущата ми директория. Аз говоря за даден файл, който съществува някъде в интернет, която имам да поиска помощта на HTTP протокола. Така че нека да погледнем на това, което тази страница може да изглежда така и се пригответе за една картина на Рик Астли да се появи на екрана. Така че аз ще визуализирате това. Има Рик Астли в самия връх в тази произволна разделение Сложих го в горната част. И след това по-долу I имам връзки, нали? Имам връзка в здравей дот HTML. И ако аз кликнете, че получавам Приближи се до тази страница че сме много добре запознати с от самото начало на нашата програма. Ако се появи тази страница отворена отново, ако мога поп линк изображение отвори още един път, Също така мога да отида външно към страницата на CS50 е. И там ние see-- аз ще отдалечите малко here-- ще видим CS50 уебсайта вид вградени в средата на страницата ни. Така че аз бях в състояние да направи вътрешна свържат, както и външна връзка. Последното правило с HTML, че ние ще говорим за тук е, че вашият HTML трябва да бъдат добре оформени. В C ние говорихме много за различните синтаксиса на нещата. В HTML синтаксиса наистина върти около ключовите думи. Всеки маркер отворите трябва да бъде затворен. И в действителност, всеки етикет, когато отворите трябва да бъдат затворени в обратен ред. Така че, ако се отвори смела таг, един наклонен маркер, а след това подчертаване таг да направят всичко, три в определен набор от текст, вие трябва да ги затворят в обратен ред. Така че, ако сте отворили смели, курсив, подчертано, вие искате да затворите подчертаване, курсив, удебелен шрифт. Този вид капсулиране е това, което поддържа HTML хубаво и организирана. За разлика от C, все пак, синтактични грешки няма да всъщност осакати вашия HTML вероятно. Вашият HTML може да не е добре образувана но все пак ще работи. И така, тези грешки Може да сортирате на слайд от. Тя е до вас наистина да бъдат бдителни. Понякога те ще се провалят, но понякога може да се размине с нея. Тя може да бъде наистина трудна задача, обаче, да следите, когато сте отворили етикет, когато го затвори, особено след като си HTML файловете стават по-големи и по-големи. Вие ще искате някаква помощ. И там са онлайн Валидатор инструменти, които можете можете да използвате, за да имат поглед към вашия уеб страница и да видим дали това е добре оформени HTML. И определено трябва да разгледаме тези, и да започне да ги използват като вас започнете правиш някаква работа с HTML, написването HTML, просто така, можете да получите някои добри навици за организиране Вашата HTML по-добър начин и добър стил и като се уверите, че вие ​​не правите нищо, което може да създаде синтактична грешка, че ще ви причини малко проблем надолу по пътя. Аз съм Дъг Лойд. Това е CS50.