Даг Ллоид: Тако смо потрошили о-- ако је моја математика је у праву, и мислим да гледа натраг-- мислим провели смо око 35 видео говори о различитим аспектима Ц, можда мало више, можда мало мање. И нисмо покрити све у Ц, али смо покрива велики комад од језик, велика већина од тога, свакако за заједничке сврхе. Сада ћемо да разговарамо о други језик, ХТМЛ. И ми ћемо покрити је у само једном видео. Али то ће бити у реду. То ће заправо постају нешто што ћеш навићи. Сада када имају основе једног језика, то је заправо прилично једноставан за почетак учења другима. Дакле, идемо да почне мало да одступи и прикрију основни разлике између тих језика и некако те оставити на њега. Постоји много стварно добар ресурси на Интернету, који ћемо почети усмеравање вас према јер је интернет огромно складиште информација. И тако се не личи на тебе цу бе губи нужно од немају информације покривени у видеу. И даље ћете моћи да добијете све што је потребно и употреба знање које сте већ изграђен кроз разумевање Ц да криву учења за њих други језици заправо много ласкати. Обећавам. Али хајде да причамо о једном језику то је заиста фундаментално за сваку веб страна, што је ХТМЛ. ХТМЛ је Хипер Тект Маркуп Лангуаге. ХТМЛ је језик, али је није програмски језик. ХТМЛ нема варијабле. То нема логике или функције или тако нешто. Не могу ништа програмирање по себи у ХТМЛ. Понекад ћете чути људи се описују као ХТМЛ програмера, који није у потпуности тачно. Не можемо писати ХТМЛ програме. ХТМЛ само користи да означи текст горе. То се зове Маркуп Лангуаге. А шта је ово доес-- ову маркуп-- користимо ознаке у ХТМЛ и овим тагс-- ово маркуп-- семантички дефинише структуру странице и изазива обичан текст који постоји и између ознаке да се интерпретира од претраживача на различите начине. А можда је најбоље да објасни тако што начин илустрације. Ово је врло једноставна ХТМЛ страница, а не ХТМЛ програма, опет, ХТМЛ страница. И знамо да је ХТМЛ страница јер смо граничи све са ХТМЛ тагова. Дакле, то је оно што ХТМЛ тег изгледа. То је између угластим заградама. И приметите на врху имамо ХТМЛ и на самом дну, након што смо урадили оно што је очигледно много других ХТМЛ, имамо угаона заграда сласх ХТМЛ. Дакле, таква врста је граница између онога што је ХТМЛ, а шта није. И наравно, конвенционално, само као што је написао све своје програме Ц са тачка Ц наставцима, све ваше ХТМЛ датотека ће се завршити са тачке ХТМЛ екстензије. Али има још дешава овде. Ми не само ове ХТМЛ ознаке. Очигледно имамо ово ствар која се зове главе ознаку. Па, добро, шта је то? Па можда је најбоље да разликовати путем тела, Тело као садржај веб странице. Можда је глава ознака дефинише ствари то није у прозору прегледача исправно, али је некако важно да наше веб страница буде правилно изречена. На пример, унутар Шеф ознака имамо титле ознаке. Дакле, наслов као Хелло Ворлд, која заправо ће бити шта појави на картици у Цхроме или у сафари или Фирефок-- год браузер префер-- да је шта ће се појавити у наслову. И пре него што картица да би показали у целом свом прозору и можете само да имате једну страницу отворити у прозору прегледача у исто време. Тако да ће бити Наслов мог страницу нагоре у таб или бровсер прозор бар Хелло Ворлд. А онда је садржај моје Веб страница ће бити свет, здраво. Дакле, хајде да погледамо шта неки ствар као што би то могло изгледати. Ово је прилично једноставна ХТМЛ страница. Зато сам овде у мом ЦС50 ИДЕ и Ја сам зумирати у мало. И само ћу отвори хелло дот ХТМЛ и показати вам да је ово прилично Садржај страница коју смо раније видели. Моји једноставне ХТМЛ ознаке глава, титле ознаке, тело, и тако даље. Ја сам увучен да буде чиста. И онда шта могу да урадим у мом ИДЕ само прегледајте страницу. И тамо идемо. Садржај мојој страници је свет, здраво, а ја не видим ништа из главе тагова тамо. То је само садржај тела. Свет, здраво. И опет тело само рекао је, свет, здраво. Други део недостаје. Дакле, то је заиста све што је. Ово је врло једноставна основни ХТМЛ страна. Сада сам увучен свој ХТМЛ у бити заиста лепо и организовано, али у ствари не морају да. Могао бих да изгледа прилично ружно. И то би и даље раде. То би било потпуно исти веб страница. Управо сам се отарасили све од белог простора. Како се испоставило, бела простор података. И тако, када смо слања података од пошиљаоца до пријемника, са сервера клијенту, подаци кошта. И тако ослобађање од белине је заправо добра идеја ако сте неко ко служи до много веб садржаја. То је лоша идеја, ако си неко ко је учење ове ствари и желите да имате је лепо организовано. Ово је много лакше да анализирам од овога. Али то је функционално идентичан. Увлачење и такве ствари уствари не важно у ХТМЛ. Све што је битно је отварање ознаке и затварање ознаке у исправном редоследу. Погледајте шта се овде догодило, мада. Коефицијент нам даје пут до комуницира додатне информације о томе шта смо написали. Хелло Ворлд део је тумачи као наслов. И свет, здраво део је тумачи као садржаја или шта би требало да буде видљива на мојој веб страници. Постоји више од 100 ових различитих ознаке и много великих ресурса Онлине да их пронађе. Ми ћемо разговарати о неке од њих на овом снимку, нека у заиста фундаменталне ствари. Али нећемо разговарати о томе свега зато што ће бити исцрпан да то уради. Још једна ствар коју можете учинити, међутим, је отворити развојне алате. А ако се сећате из наш видео на ХТТП, Објаснио сам како се отварају до програмера алата. У Цхроме обично је Ф12 да се отвори алаткама програмера. Затим, уместо избора Нетворк картица, можете изабрати картицу елемената. А ако убаците веб страна, заправо ћу види ХТМЛ који ствара ту веб страницу. И тако можете научити много о ХТМЛ гледајући вашим омиљеним сајтовима и виде како се изгради разни делови њих који вам се свиђају. Можда постоји овај кул образац или тако нешто. Како они то чине са ХТМЛ? Па само да отворите свој девелопер алати и лебде над том елементу и види шта ХТМЛ-успети. Дакле, то је стварно добар начин да научите ХТМЛ, и препоручујемо да радиш то како да уче ХТМЛ- као и да науче нешто мало о неким од опција доступни у Девелопер Тоолс, који сигурно ће добро доћи као почнете да радите интензивније веб програмирање. Дакле, хајде да погледамо Неколико заједничких ХТМЛ тагова. И ми ћемо скочити и да погледамо шта ће ови ознаке и рендер као гледајући неке датотеке у мом ИДЕ. Дакле, овде су три врло основна ознаке за угађати визуелни изглед текста. Постоји Б ознаке, И ознаке, и у ознаке. И односно оно што они раде је рендер текст између њих масним словима, курзив, уз подвлачење. Дакле, хајде да видимо шта је то би изгледало као на стварни веб страници у мом ИДЕ. Дакле, овде у мом ИДЕ имам фајл који се зове БИУ тачка ХТМЛ. БИУ тачка ХТМЛ-јуст беинг Болд, курзив, подвлачење. Ја ћу га отворити. И ми ћемо видети да овде сам Имам овај текст је Б ознаке храбар. Овај текст је И ознаке италик. И овај текст је истакао У ознаке. Шта је ово ће изгледати? Па опет, све што имам да урадите је да иде овамо мојој бровсер, мој Филе Бровсер, кликните на дугме Преглед, и то је оно што искрсне. Текст између Б ознаке је заиста храбар сада. Текст у између И ознаке је заиста сада италик. И текст у између У ознаке се заиста сада подвучен. Дакле, то је прилично добро. Сада знамо како да текст изгледа мало више фанци или нацртати нагласак на неким стварима. Још пар заједничких ознака овде су пасуса, П и заглавља ознаке, што сам овде преведена као ХКС. Ови П ознаке, ови став тагс, бреак текст горе у ставовима. Није довољно само притисните Ентер и оставите простора, јер рачунар иде само да уради оно што му кажеш да урадите и игнорише бела простор за највећи део. Дакле, не можемо само притисните Ентер и очекују наш компјутер да протумачи да желимо да започне нови став. Морамо врло јасно рећи је један параграпх-- ово је анотхер-- ставити сваки у низу П тагова. Такође имамо ове опције за Х ознаке, те заглавља ознаке. Имамо шест различитих нивоа од заглавља, један, два, три, четири, пет, шест и који су прогресивно све већи и већи заглавља. И они добити мање и мањи и мањи и мањи. Дакле, имамо врхунски ниво заглавље, други хеадер нивоа, и тако даље, и тако даље. Хајде да погледамо можда неки П ознаке и неки заглавља ознаке у акцији на веб страници. Дакле, овде у мом ИДЕ имам фајл који се зове ПХ тачка ХТМЛ ПХ бити ст и заглавља ознаке. Отвори то. Има доста дешава овде јер Ставио сам Лорем Ипсум, неки само случајни текст овде. Зато ћу умањили мало јер има толико тога. Али приметио да имам у самом врх овде имам Х1, ниво један, заглавље ознака. Онда имам став, који је само гомила случајних тект-- Лорем ипсум-- Само подразумевани стандард попуњавање у тексту. Дакле, имам два пасуса унутар које Ниво један ударац, а онда испод И имају ниво два главом, овде на линији 24, други ниво заглавља, а друга два ст. Па шта ово личи ако сам га видели у мом преглед? Хајде да видимо. Дакле, приметите да Први ниво заглавље овде је заправо прилично мало већи од заглавља другом нивоу. Тако смо користили Х1 ознаке. И приметите да нам се омогући П ознаке да се пробије ствари у ставовима. Да смо се отарасили тих ознака П и заправо само ставити улази или повратак у између онога што смо се надали би бити различите ставове, сви они би само лупаш заједно и да не би имао ову лепу став сепарација са простора изнад и испод. И то је оно што став ознаке и заглавља ознаке Најчешће се користе да урадите да скренем пажњу на делове наше веб странице на тај начин. Нект уп су неке ознаке које користимо да се изгради листе на нашој веб страници. Дакле, имамо нередоследна листс-- УЛс-- које су само листе набрајања, након Листа које су нумберед-- ОЛс-- и унутар или једна од оних које треба да има комплета како показују предмете листу, Ли. И тако имамо отворену УЛ таг и ставимо ствари у њему. И онда, када смо завршили са да, можемо затворити УЛ ознаку. Слично томе можемо да имамо сређене и нумерисана листа и ставио предмете листу унутар тога. Дакле, хајде да погледамо на пар спискова и шта би они рендер као и на ЦС50 ИДЕ. Дакле, имам овде у мом ИДЕ А фајл који се зове листе дот ХТМЛ. Хајде да погледамо. И обавештење овде имам нередоследна Листа са пет ствари у њему. И онда ја имам сређену листу, и Променио сам ознаком мало, jel tako? Ја сам рекао почетак једнако шест. Испоставило се са сређене листе И да подесите почетну тачку где год Ја ћелим-- по дефаулту то ће бити једног-- од само додавањем ове такозване атрибут мом ОЛ таг. И тако Ова листа ће почети да броји у шест. Тако да елементи тог списка бројевима треба да буду шест, седам, осам, девет, десет, јер постоје пет елемената на листи, за разлику од један, два, три, четири, пет, које би био случај да сам рекао Ол без навођења почетка атрибут. Дакле, ми ћемо прегледати ово тако можете добити осећај за оно што се дешава овде. И тамо идемо. Ево моје листе. Првих пет елемената су неуређене или листе набрајања. А следећи пет елемената су посебна наредио листа почевши од шест. Па тако можемо изгради листе користећи ХТМЛ. Још једна ствар коју би могао желите да урадите са ХТМЛ је изградити табелу информације о редова и колона да представе информације у посебно организован начин. Да бисте то урадили са ХТМЛ можемо имати дефиниција сто поциње отворену заграду сто. А онда унутар тог табели можда има низ редове, ТР тагова да означи сваки ред. А онда ТД ознаке уђемо у ТР тагова да одредите колону у оквиру редом. Зашто се зове ТД и не тц? Па ТД залаже за податке табела. Обично се кријеш ваше информације тамо. Зато је ТД и не ТЦ. То је мало збуњујуће. Дакле, имате табелу ознаке и унутар табеле тагова имате неколико редова, ТРС. А у сваком реду имате ТДС за број колона који желите да имате у том низу. Хајде да погледамо веома једноставна сто тамо у ЦС50 ИДЕ. Дакле, имам овде датотеку зове сто тачка ХТМЛ. Хајде да погледамо како то изгледа. Има доста дешава овде, али ако приметите да имам сто отворено. Почињем дефиницију са стола. А онда у свом првом реду сам очигледно има четири колоне, један, два, три, четири. И онда сам урадио са тим редом. Онда сам почетак другог реда и радим два, четири, шест, осам. Завршите ту ред. До другог реда, три, шест, девет, 12. А онда последњи ред, четири, осам, 12, и иако је мало одсечен овде, 16. Завршила сам ту ред. Завршила сам сто. И онда сам завршио са ХТМЛ. Шта ти ово личи? Па, није баш много да се види. Јасно сам ја организовао своје информације у нешто више организован начин. Али то није супер лијепе овде. И ми ћемо да се баве да када говоримо о ЦСС. Ми ћемо поново ову идеју шта радимо да направимо табле-- мозда га форматирати мало боље? Али ја још увек немам четири реда, од којих свака има четири колоне, и стварно шта то износи је врло једноставна четири од четири множење сто. Само још неколико ознаке ћемо разговарати. Хајде да причамо о Концепт ХТМЛ форми. Дакле, можда сте видели ово у Контекст пријавити на веб страници. Обично куцате у вашем корисничком имену. Ви укуцајте лозинку, и ти си добро да иде. То би био почетак форми. Прескачем ДИВ мало. Такође имамо улаза који врста уклапа у форми. То су елементи који заправо куцате у, или радио дугмад си откуцава, или чек кутије које сте откуцава искључен. Дакле, ово иде у форми. И они у суштини чине Сваки ред облика ако је ваш облик добро форматиран. Затим, ту је овај концепт а див, који заправо и не уклапају у неку посебну категорију ознака попут оних о којима сам радили раније. Само некако разграничава почетак неког произвољног дивисион-- див-- странице. Нема визуелни пауза. Нема линија. Није кренуо као посебан комад аутоматски. Мораш да га стил на тај начин да то урадите. Само некако каже Желим комад простора на мојој веб страници, и само ћу звати да ова подела моје стране. Можемо ставити унутра ствари од Дивс, ау ствари, када смо над главом да ИДЕ у секунди, ми ћемо видим да сам стављајући мој формирају унутар једног див. Дакле, имам овде у мом ИДЕ А фајл који се зове див облик тачка ХТМЛ. Хајде да отворимо. Приметите да као што сам рекао, див је некако произвољна. Jel tako? То заправо не значи ништа. Дакле, имам произвољна Први подела мојој страни. А онда уместо другог див касније, почевши он лине осам, Имам овај формулар. И унутар форме Имам број улаза, поља обрасца. Тако сам терен чије име је-- који заправо не значи ништа Право сада-- да очигледно узима текст, још један је узима лозинку, други који је радио дугме, други да је поље за потврду, а други да је Пошаљи дугме. Па, шта ово све ствари изгледају? Па, хајде да погледамо. Ми ћемо га отворити у нашем прозору за преглед. Обратите пажњу да је ово произвољно Први дивисион-- нема нема визуелна одвајање овде. Није баш ништа, зар не? И онда ја имам своју форму. И нисам урадио никакву посебну форматирање. Дакле, облик је само једна велики ред информација. Да сам другачије форматиран своју форму, Можда имам га ред по ред по ред. Али ја нисам урадио било стил. Опет, не говоримо о ЦСС овде. Ми само говоримо о ХТМЛ. Па у мом облику текста могу тип-- запамтите да облици типа текста тако да могу ставити своје име. И у мојој лозинком И можете уписати своју лозинку. И зато том пољу је типа лозинке, Ви не знате шта моја лозинка је. То је све тачке. Такође можете изабрати да означите ОФФ А радио дугме или поље за потврду обележите. Или могу да поднесу своју форму. А ја нисам ништа, па кад сам поднесе своју форму, страница само освежава. Али можда могао подесити Пошаљи дугме да уради нешто друго. А видећемо шта можемо да урадимо са да у будућем видео на ПХП. Али ово гради веома једноставно образац који ми Можете користити да корисници комуницирају и доставе информације на нашем сајту. Последњи коментар пре него што прећи на неке друге ознаке треба да погледамо ово улаз ознака још једном. Приметићете да сам истакао крајеви ознаке у ред. Свака друга ознака смо до сада видјели има имао почетак и крај, отвор ознака и крајњи таг. Али улазни ознака не. Нема текста који иде између улазних тагова. Све информације смо намеравали да пренесу повезана је као дио атрибути тог улаза. Обратите пажњу имамо улаз име једнако к. Тип једнако и. Све што је стварно Информације које је потребно. Ово се зове само затварање ознака. То не захтева отвором и близак јер све информације је садржано унутар ознака и њени атрибути. Понекад ћете видети ово. Дакле, само будите свесни да ако имате ознака која је потпуно самосталан, она отвара и затвара се са отворени угао носач са леве стране и угао сласх носач са десне стране. Видећемо још један од оних сада са слике ознаке као добро. Пре него што говоримо о сликама, ми Морамо да разговарамо о хипервеза. Ако желимо да наша веб страница буде интерактивна и померите нас около, било би лепо бити у стању да кликнете на један од оних оно што је типично био плави веза. Ово је заправо како градимо хиперлинк у нашој веб страници. И занимљиво постоји још један ХТМЛ тагове зове линк, који није хиперлинк. Овде залаже за сидро, и тако смо указују на хипервезу. А хреф једнако к средства иду у веб страница Кс. и све између отворен ознака и блиска ознака је оно што ће бити да је подвукао плави текст који личи на линк да смо упознати са. Испод тога имамо слику таг, који је самостално затвара ознаку за приказивање слика налази на Кс. И можда ћете моћи да промените та слика навођењем ширина и висина и остали атрибути у да Дот Дот Дот тамо. На самом дну овде имамо веома занимљив тражи ознаку да не има и крајњи таг. То је знак узвика! ДОЦТИПЕ хтмл. Тако ХТМЛ је око била од почетком 1990-их за изградњу веб странице, и нема га подвргнут неколико ревизија од тада. Недавно у 2014. години је прошао ревизију зове ХТМЛ5 која је сада актуелна врста де фацто ХТМЛ стандарда. Да указују на то да наш веб странице су написане коришћењем ХТМЛ5, ово је како смо кренути. Може се изостављено, али шта је у основи средство је не можете користити било који од тагова да су ХТМЛ5 ознаке, оне нове ознаке. Тако смо увек кренути ако користите ХТМЛ5. И све ознаке смо разговарали о претходно нису ХТМЛ5 ознаке. Али ово би значило да ХТМЛ5 ознаке ће бити присутни. И тако имамо узвик ДОЦТИПЕ хтмл, која је на самом почетку нашег ХТМЛ фајл, а након тога тачка ми имамо наш ХТМЛ-отворено таг и наставите одатле. Последњи је коментар ознака, који изгледа исто мало другачија. Она почиње са углом носач узвик Дасх Дасх али не затварање заграда. Између тих два елемента тамо је место где пишете своје коментаре. И хајде да погледамо слике и коментари и везе у ЦС50 ИДЕ. Дакле, имам овде фајл под именом Имаге Линк тачка ХТМЛ-који ћу да отворим. И приметио да имам пар цомментс овде у мојим ХТМЛ коментаре. Дакле, као иу Ц и друго програмски језици, ХТМЛ-само тиме што је Маркуп Лангуаге нема способност да имају коментаре. И тако ја очигледно да поставите слику Рицк Астлеи негде између ове див ознака, ово произвољна подела. Очигледно да је фајл налази Рицк дот ЈПЕГ, која ако се вратимо преко у мој досије дрво за други, фајл који постоји у тренутни директоријум. Дакле, то је у реду. Могу да га референце. Онда могу имати интерне линкове. Тако приметити он лине 11 овде мој хреф је здраво тачка ХТМЛ. Тако да само односи на здраво дот ХТМЛ која постоји у текућем директоријуму. И такође могу имати екстерни линкови за само наводећи ХТТПС да укаже да не говорим о датотеци у мом тренутном директоријуму. Ја говорим о фајлу који постоји негде на интернету, што имам да затражи путем ХТТП протокола. Дакле, хајде да погледамо шта Ова страница може изгледати као и спремите се за пицтуре оф Рицк Астлеи да се појави на екрану. Тако да ћу прегледати ово. Ту је Рицк Астлеи На самом врху у овом произвољно подела Ставио сам га на врху. А онда доле И Имам своје везе, зар не? Имам везу у Хелло дот ХТМЛ. А ако кликнем да добијем прешли на овој страници да смо добро упознати са из само почетак нашег програма. Ако поп ту страницу отворену опет, ако сам Поп Имаге Линк отвори још једном, Такође могу екстерно на сајт ЦС50 је. И ту смо видим-- ћу зоом оут мало овде- видећемо ЦС50 аутора врсту уграђен у средишту наше странице. Тако да сам био у могућности да унутрашња повезати као и спољног линка. Последњи правило да са ХТМЛ ћемо разговарати о овде је да ваш ХТМЛ-треба добро формиран. У Ц смо разговарали доста о разних синтакса ствари. У ХТМЛ синтакса стварно врти око тагова. Сваки ознака отворите мора да буде затворен. У ствари, свака ознака отворите треба затворити у обрнутим редоследом. Дакле, ако отворите смео ознаку, један курзив ознака, а потом и подвучено ознака да уради све три да: а Посебно сет текста, требало би да их затворити у обрнутим редоследом. Дакле, ако сте отворили храбар, курзив, подвучено, можете желите да затворите подвући, коси, храбар. Ова врста инкапсулацију је шта чува ХТМЛ-лепо и организовано. За разлику од Ц, међутим, синтакса грешке неће заправо онеспособи свој ХТМЛ могуће. Ваш ХТМЛ можда није добро формиран али би и даље радити. Тако да су ова грешке можете сортирати на слајду стране. То је на вама да заиста буду на опрезу. Понекад неће успети, али понекад можете извући са тим. То може бити стварно тежак задатак, међутим, да прате када сте отворили таг, када је затворен, посебно као ваш ХТМЛ фајлови се све већа и већа. Ви ћете желети помоћ. И на мрежи постоје валидатор алатке које сте могу користити да погледам твој веб страна и види да ли је добро формиран ХТМЛ. И требало би дефинитивно Погледајмо оне и почети да их користе као ти почети нешто ради са ХТМЛ, писање ХТМЛ, само да се неке добре навике о организовању Ваш ХТМЛ на добар начин и добар стил и пазећи да не радите ништа што може створити синтаксичку грешку која ће вам изазвати мало проблем низ пут. Ја сам Доуг Лојд. Ово је ЦС50.