Даг Lloyd: Так мы правялі about-- калі мая матэматыка з'яўляецца правільным, і я думаю, гледзячы back-- Я думаю, мы выдаткавалі каля 35 відэа казаць аб розных аспектах З, можа быць трохі больш, можа быць, крыху менш. І мы не пакрываюць усё ў C, але мы ахоплівае вялікі кавалак з мова, пераважная большасць з яго, вядома, для агульнага прымянення. Цяпер мы збіраемся казаць пра іншую мову, HTML. І мы збіраемся, каб пакрыць гэта толькі ў адным відэа. 

Але гэта будзе ў парадку. Гэта адбываецца на самай справе стаць тое, што вы збіраецеся, каб прывыкнуць да. Цяпер, у вас ёсць Асновы адной мове, гэта на самай справе даволі лёгка каб пачаць навучанне іншых. Такім чынам, мы збіраемся, каб пачаць да кроку трохі назад і замоўчваць асноўнай Адрозненні паміж гэтымі мовамі і накшталт пакінуць вас з ім. Там вельмі шмат сапраўды выдатна рэсурсы ў Інтэрнэце, які мы збіраемся пачаць накіроўваючы вас да, таму што Інтэрнэт велізарнае сховішча інфармацыі. І такім чынам, гэта не падабаецца вам быць прайграўшы абавязкова не маючы інфармацыю пакрытыя відэа. Вы па-ранейшаму будзеце мець магчымасць атрымаць усё, што трэба і выкарыстанне веданне вы ўжо забудавана разумення C зрабіць працэс навучання для іх іншыя мовы на самай справе шмат пахвальных. Я абяцаю. 

Але давайце пагаворым аб адной мове гэта сапраўды фундаментальнае значэнне для кожнага вэб старонка, якая HTML. HTML з'яўляецца мова гіпертэкставай разметкі. 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. Але гэта яшчэ не адбываецца. Мы не проста мець гэтыя HTML-тэгі. Мы, мабыць, ёсць гэта што называецца галаўнога тэг. Ну, добра, што гэта такое? 

Ну, можа быць, лепш вылучыць шляхам цела, Цела з'яўляецца ўтрыманне вэб-старонкі. Так, можа быць, кіраўнік тэг вызначае матэрыял які ня знаходзіцца ў акне браўзэра уласна, але як-то важна, каб нашы вэб-старонкі, якія аказваюцца правільна. Напрыклад, усярэдзіне з Кіраўнік тэг нас ёсць тэгі назвы. 

Так назву быўшы прывітанне свет, што на самой справе адбываецца, тое, што Выставы ў закладцы у Chrome або ў сафары або Firefox-- усе браўзэр prefer-- гэта што адбываецца, каб паказаць у назве. І перш, чым ўкладкі было б паказаць ў ўсім акне браўзэра і вы можаце мець толькі адну старонку адкрыць у акне браўзэра ў той час. Так, што адбываецца, каб быць Назва маёй старонкі уверх на ўкладцы або бар акно браўзэра, прывітанне свет. І тады ўтрыманне маёй вэб-старонка будзе свет, прывітанне. Такім чынам, давайце зірнем на тое, што некаторыя рэч, як гэта можа выглядаць. Гэта даволі просты HTML-старонкі. Так што я тут, у маім CS50 IDE і Я павялічана няшмат. І я проста хачу, каб адкрыць прывітанне кропка HTML і паказаць вам, што гэта ў значнай ступені змесціва старонкі, што мы бачылі раней. Мае тэгі HTML простыя, галаўныя тэгі загалоўкаў, цела, і гэтак далей. Я з водступам, каб быць чыстым. 

І тады тое, што я магу зрабіць у маім IDE проста прагледзець старонку. І мы ідзем. Змест маёй старонцы свету, прывітанне, і я не бачу нічога у з тэгамі галаве. Гэта проста ўтрыманне цела. Свет, прывітанне. І зноў цела проста сказаў, свет, прывітанне. Іншая частка адсутнічае. 

Так што на самай справе ўсё гэта. Гэта вельмі проста асноўнай старонцы HTML. Зараз я з водступам мой HTML на сапраўды добры і арганізаваны, але я на самой справе не прыйдзецца. Я мог бы зрабіць гэта выглядаць даволі выродлівым. І гэта будзе па-ранейшаму працаваць. Гэта будзе сапраўды такі жа вэб-старонцы. Я толькі што пазбавіўся ад ўсё пустое прастору. 

Як высвятляецца, белы прастору дадзеных. І таму, калі мы пасылаем дадзеныя з адпраўніка да атрымальніка, ад сервера кліенту, дадзеныя каштуе грошай. І так, каб пазбавіцца ад прабелаў на самай справе добрая ідэя калі вы хто-то, хто служыць да шмат вэб-кантэнту. Гэта дрэнная ідэя, калі вы той, хто вучыцца гэты матэрыял і вы хочаце, каб гэта прыгожа арганізавана. Гэта нашмат прасцей, каб разабраць, чым гэта. Але гэта функцыянальна ідэнтычныя. 

Паглыбленне і таму падобнае на самай справе не мае значэння, у HTML. Усё, што мае значэнне адкрыцця тэгі і якія зачыняюць тэгі ў правільным парадку. Звярніце ўвагу, што тут адбылося, хоць. Разметка дае нам шлях да мець зносіны дадатковую інфармацыю аб тым, што мы напісалі. Прывітання, Сусветны частка была інтэрпрэтуецца як назва. І свет, прывітанне частка была інтэрпрэтуецца як змест або тое, што павінна быць бачныя на маёй вэб-старонцы. 

Ёсць больш чым 100 з іх адрозніваецца тэгі і шмат вялікіх рэсурсаў онлайн, каб знайсці іх. Мы збіраемся казаць пра Некаторыя з іх у гэтым відэа, некаторыя на самай справе фундаментальнай рэчы. Але мы не збіраемся казаць пра ўсё гэта таму, што ён будзе вычарпальным зрабіць. 

Яшчэ адна рэч, вы можаце зрабіць, хоць, гэта адкрыць інструменты распрацоўніка. І калі вы памятаеце з наша відэа на HTTP, Я растлумачыў, як адкрыць да прылад для распрацоўнікаў. У Chrome гэта звычайна клавішу F12 каб адкрыць панэль інструментаў распрацоўніка. Тады замест выбару сеткі закладка, вы можаце выбраць ўкладку Elements. І калі вы загружаеце вэб старонак, вы на самой справе паглядзець HTML, які стварае гэтую вэб-старонку. І так вы можаце даведацца шмат новага пра HTML , Гледзячы на ​​вашыя любімыя вэб-сайты і бачачы, як яны будаваць розныя часткі з іх, якія вам падабаюцца. Так, можа быць, ёсць у гэтым прахалодным малюнак ці нешта падобнае. Як яны робяць гэта з HTML? Ну вы можаце проста адкрыць свой распрацоўніку інструменты і навядзіце курсор на гэтым элеменце і ўбачыць тое, што робіць яго HTML. Так што гэта сапраўды добры спосаб, каб даведацца HTML, і я настойліва рэкамендую, што вы робіце гэта, каб даведацца, як HTML- а таксама даведацца трохі трохі аб некаторых з варыянтаў даступныя для вас у прылады для распрацоўнікаў, якія абавязкова спатрэбіцца ў Вы пачынаеце рабіць больш інтэнсіўнае Інтэрнэт праграмаванне. 

Такім чынам, давайце зірнем на пара агульных тэгаў HTML. І мы будзем скакаць і зірнуць на тое, што гэтыя тэгі таксама будзе аказана а, гледзячы на ​​некаторых файлаў у маім IDE. Дык вось тры самыя асноўныя тэгі для налады вонкавага выгляду тэксту. Там гэта B тэгі, тэгі, I і U тэгі. І, адпаведна, тое, што яны робяць, гэта візуалізацыі тэксту паміж імі тлустым шрыфтам, курсіў, падкрэсленне і. Такім чынам, давайце паглядзім, што гэта будзе выглядаць як на рэальнай вэб-старонкі ў маёй IDE. 

Дык вось у маім IDE ў мяне Файл называецца МУВ кропка HTML. МУВ кропка HTML проста быць паўтлусты, курсіў, падкрэсліванне. Я адкрыю яго. 

І мы ўбачым, што тут я ёсць гэты тэкст з'яўляецца B тэгі вызначаны тлустым шрыфтам. Гэты тэкст пазнакі I курсіў. І гэты тэкст U тэгі падкрэсліў. Што гэта будзе выглядаць? Ну зноў жа, усё, што я каб зрабіць, гэта зайсці сюды ў маім браўзэры, мой файл-браўзэр, націсніце Папярэдні прагляд, і гэта тое, што ідзе ўверх. 

Тэкст паміж B тэгі сапраўды ў цяперашні час вызначаны тлустым шрыфтам. Тэкст паміж I тэгі сапраўды ў цяперашні час курсівам. І тэкст у паміж U тэгі сапраўды ў цяперашні час падкрэсленыя. Так што гэта даволі добра. Цяпер мы ведаем, як зрабіць тэкст выглядаць трохі больш фантазіі або намаляваць акцэнт на пэўных рэчах. Яшчэ пару агульных тэгаў тут тэгі параграфаў, тэгі Р, і загаловак, якія я аказаў тут 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 можа ўсталяваць пачатковую кропку там, дзе гэта Я want-- па змаўчанні ён будзе одно-- проста дадаўшы гэты так званы атрыбут на мой OL тэга. І так гэты спіс будзе пачаць адлік у шэсць. Так што элементы гэтага нумараванага спісу павінна быць шэсць, сем, восем, дзевяць, дзесяць, таму што ёсць пяць элементаў у спісе, у адрозненне ад аднаго, два, тры, чатыры, пяць, які было б у выпадку, калі я сказаў ПР без указання атрыбуту пачатку. 

Такім чынам, мы проста прагледзець гэта так, вы можаце атрымаць пачуццё для таго, што тут адбываецца. І мы ідзем. Там мой спіс. Першыя пяць элементаў неўпарадкаваныя або маркіраваныя спісы. І ў бліжэйшыя пяць элементаў гэта асобная спарадкаваны спіс пачынаючы з шасці. Дык вось, як мы можам ствараць спісы, выкарыстоўваючы HTML. Яшчэ адна рэч, вы маглі б хочаце зрабіць з HTML гэта стварыць табліцу Інфармацыя з радкоў і слупкоў прадставіць інфармацыю ў Асабліва арганізавана. Каб зрабіць гэта з HTML мы можам мець Вызначэнне табліцы пачынаюць адкрытую дужку Табліца. А потым ўнутры гэтай табліцы мы можа мець мноства радкоў, TR тэгаў каб паказаць кожную радок. А потым TD тэгі зайсці ўнутр ПДР тэгаў для вызначэння слупка ў радку. 

Чаму яна называецца ГД і ня TC? Ну, ГД выступае за таблічных дадзеных. Звычайна вы змяшчаеце ёсць ваша інфармацыя. Дык вось, чаму гэта ГД, а не МС. Гэта крыху збівае з панталыку. 

Такім чынам, вы павінны табліц тэгаў і ўнутры тэгаў табліцы ў вас ёсць некалькі радкоў, ТУ. А ўнутры кожнага радка ў вас ёсць TDS для ліку слупкоў што вы хочаце, каб У гэтым канкрэтным шэрагу. Давайце зірнем на вельмі простая табліца на сябе ў CS50 IDE. 

Так што я тут файл называецца табліца кропка HTML. Давайце паглядзім на як гэта выглядае. Там вельмі шмат адбываецца тут, але калі вы заўважылі, у мяне ёсць табліца адкрыта. Я пачынаю вызначэнне са сталом. І тады ў маім першым шэрагу, мабыць, я ёсць чатыры калоны, адзін, два, тры, чатыры. І тады я зрабіў з гэтага радка. 

Тады я пачынаю іншую радок і зрабіць два, чатыры, шэсць, восем. Скончыць гэтую радок. У іншы шэраг, тры, шэсць, дзевяць, 12. А потым апошняя радок, чатыры, восем, 12, і, хоць гэта трохі адрэзаць тут, 16. 

Я скончыў гэты радок. Я скончыў табліцу. І тады я зрабіў з маёй HTML. Што гэта выглядае? Ну, гэта на самай справе не шмат, каб бачыць. Я выразна арганізаваў маю інфармацыю у некалькі больш арганізавана. Але гэта не супер даволі тут. І мы збіраемся мець справу з што, калі мы гаворым пра CSS. Мы вернемся гэтую ідэю што мы робім, каб зрабіць table-- можа быць, адфарматаваць яго крыху лепш? Але я ўсё яшчэ ёсць чатыры радкі, кожны з якіх складаецца з чатырох слупкоў, і сапраўды, што гэта складае гэта вельмі просты чатыры на чатыры множання Табліца. 

Яшчэ некалькі тэгаў, мы будзем казаць пра. Давайце пагаворым аб Канцэпцыя HTML форме. Такім чынам, вы, магчыма, бачылі гэта ў Кантэкст ўваходу ў вэб-старонкі. Звычайна вы ўводзіце сваё імя карыстальніка. Вы ўводзіце свой пароль, і вы добра ісці. Гэта было б пачаткам выглядзе. 

Пропуск больш DIV секунду. У нас таксама ёсць ўваходы, якія выгляд змясціцца ўнутры формаў. Гэта элементы, якія вы на самой справе увёўшы ў, ці радыё-кнопкі вы цікаюць, або праверка скрыні, якія вы галачку. Такім чынам, гэтыя ідуць ўнутры формы. І яны ўключаюць у асноўным кожны радок выглядзе калі ваша форма будзе адфарматаваны таксама. Тады ёсць гэтая канцэпцыя DIV, які на самай справе не упісацца ў любы канкрэтнай катэгорыі тэгаў, як тыя, якія я рабіў раней. Гэта проста свайго роду размяжоўвае пачатак некаторай адвольнай division-- div-- старонкі. Там няма ніякіх візуальных перапынак. Там няма лініі. Гэта не залічваюцца як асобны кавалак аўтаматычна. Вы павінны былі б распрацаваць гэта што спосаб зрабіць гэта. 

Гэта проста свайго роду кажа, што я хачу кавалак прасторы на маёй вэб-старонцы, і я проста буду называць гэта такі падзел маёй старонцы. Мы можам пакласці рэчы ўнутры з дзівы, і на самай справе, калі мы над галавой IDE у секунду, мы будзем бачыць, што я стаўлю мой ўтвараюць ўнутры спраў. 

Так што я тут, у маёй IDE а Файл называецца DIV форма кропка HTML. Давайце адкрыем яго. Звярніце ўвагу, што, як я сказаў, DIV накшталт адвольным. Дакладна? Гэта на самай справе не значыць нічога. Так што я адвольнае Першы раздзел маёй старонцы. І тады замест іншага DIV пазней, пачынаючы з лініі васьмі, У мяне ёсць гэты выгляд. А ўнутры формы ў мяне ёсць Колькасць уваходаў, палі формы. Так што ў мяне полі, чыё імя з'яўляецца A-- якія на самай справе не азначае нічога Права now--, што, мабыць прымае тэкст, яшчэ адно, што прымае пароль, іншы, што гэта радыё Кнопка, іншы, што гэта сцяжок, і яшчэ, што гэта кнопкі Адправіць. Ну, тое, што робіць гэта усё на самой справе выглядае? Ну, давайце зірнем. Мы адкрыем яго ў нашым акне папярэдняга прагляду. Звярніце ўвагу, што гэта адвольнае у першую чаргу гэта division-- ёсць няма візуальнага падзелу тут. Гэта на самай справе не рабіць нічога, праўда? 

А то ў мяне маю форму. І я не зрабіў ніякага спецыяльнага фарматавання. Такім чынам, форма з'яўляецца толькі адным вялікі шэраг інфармацыі. Калі б я па-іншаму адфарматаваны сваю форму, Я мог бы парадкова парадкова. Але я не рабіў ніякіх стыль. Зноў жа, мы не гаворым пра CSS тут. Мы толькі што казалі аб HTML. 

Ну ў маім тэкставым выглядзе я магу type-- памятаеце, што формы тыпу тэкст так што я магу паставіць свой подпіс. І ў маім пароль Я можна ўвесці свой пароль. І таму, што гэтай галіне гэта тыпу паролю Вы не ведаеце, што мой пароль. Гэта ўсё кропкі. 

Я таксама магу выбраць галачку радыё-кнопкі або адзначце сцяжок. Ці я мог бы прадставіць сваю форму. І я нічога не раблю, таму, калі я прадставіць маю форму, старонка проста абнаўляецца. Але я мог бы, магчыма, наладзіць мой Размясціць кнопку, каб зрабіць нешта яшчэ. І мы ўбачым, што мы можам зрабіць з што ў будучыні відэа на PHP. Але гэта стварае вельмі простая форма, што мы можна выкарыстоўваць, каб ўзаемадзейнічаць карыстальнікі і прадставіць інфармацыю на нашым сайце. 

Адзін апошні каментар, перш чым мы перайсці да некаторых іншых тэгах з'яўляюцца зірнуць на гэта тэг ўводу яшчэ раз. Звярніце ўвагу, што я вылучыў канцы тэга ў чырвоным. Кожны іншы тэг мы бачылі да гэтага часу мае быў пачатак і канец, адтуліну тэг і што зачыняе тэг. 

Але ўваход тэг ня робіць. Там няма тэксту, які ідзе паміж уваходнымі тэгаў. Уся інфармацыя мы маем намер перадаць звязаны як частка атрыбуты гэтага ўваходу. Звярніце ўвагу, у нас ёсць імя ўваходу роўная х. Тып роўная у. Гэта сапраўды ўсё Інфармацыя, якую мы павінны. 

Гэта называецца само які зачыняе тэг. Гэта не патрабуе адкрыцця і на блізка, таму што ўсе інфармацыі змяшчаецца ўнутры тэг і яго атрыбуты. Так што часам вы ўбачыце гэта, таксама. Так проста быць у курсе, што калі ў вас ёсць тэг, які цалкам аўтаномным, адчыняецца і зачыняецца сябе адкрытая дужка злева і кут слэш Кранштэйны справа. Мы ўбачым яшчэ адзін з тых, цяпер з тэгамі малюнка, а таксама. 

Перш чым мы пагаворым аб малюнках, мы трэба казаць пра гіперспасылак. Калі мы хочам, каб наш вэб-старонкі, каб быць інтэрактыўным і перамясціць нас вакол, было б нядрэнна мець магчымасць націснуць на аднаго з тых, тое, што як правіла, былі сіні спасылка. Гэта на самай справе, як мы будуем гіперспасылка на нашай вэб-старонцы. І што цікава ёсць яшчэ адзін тэг HTML называецца звяно, якое не з'яўляецца гіперспасылка. А вось каштуе для якара, і вось як мы паказваем гіперспасылкі. 

HREF роўная х сродкі ідуць вэб-старонкі Х. І ўсё паміж адкрытым Тэг і блізка Тэг гэта тое, што будзе, што падкрэсліў сіні тэкст, які выглядае як спасылку што мы знаёмыя. Ніжэй у нас ёсць выява, якое тэг з'яўляецца самастойнай які зачыняе тэг для адлюстравання выява знаходзіцца ў X. А Вы маглі б быць у стане змяніць што малююнкі, паказаўшы Шырыня і вышыня і іншыя атрыбуты ў што кропка кропка кропка ёсць. 

У самым нізе тут у нас ёсць вельмі цікавы шукаю тэг, які не ёсць які зачыняе тэг. Гэта клічнік DOCTYPE HTML. Так HTML быў прыкладна з пачатку 1990-х для будаўніцтва вэб-старонак, і ён пайшоў зведалі шэраг змяненняў з тых часоў. Зусім нядаўна ў 2014 годзе ён прайшоў рэвізію называецца HTML5, які ў цяперашні час з'яўляецца ток роду дэ-факта стандартам HTML. 

Каб паказаць, што наш вэб- старонкі, напісаныя з выкарыстаннем HTML5, гэта, як мы пачынаем. Гэта можа быць апушчана, але тое, што, што ў асноўным азначае, што вы не можаце выкарыстоўваць любы з тэгаў якія HTML5 тэгі, гэтыя новыя тэгі. Такім чынам, мы заўсёды пачаць калі мы з дапамогай HTML5. І ўсё тэгі мы гаварылі пра якія раней не HTML5 тэгі. Але гэта азначала б, што HTML5-тэгі будуць прысутнічаць. І таму мы павінны ўсклік DOCTYPE HTML, які знаходзіцца ў самым пачатку нашага HTML-файл, а затым, пасля кропкі, што мы на самай справе ёсць адкрыты наш HTML- пазначыць і перайсці адтуль. 

Апошняя з'яўляецца тэг каментара, які выглядае трохі адрозніваецца, таксама. Яна пачынаецца з кута Кранштэйны клічнік працяжнік працяжнік, але не зачыняе дужка. У паміж гэтымі двума элементамі там дзе вы пішаце свае каментары. І давайце зірнем на малюнак, Каментары і спасылкі ў і CS50 IDE. 

Так што я тут файл называецца спасылка з выяваў кропка HTML, які я збіраюся адкрыць. І заўважце, я атрымаў пару каментары тут, у маіх HTML каментары. Гэтак жа, як у C і іншых мовы праграмавання, HTML толькі будучы мова разметкі сапраўды ёсць здольнасць мець каментары. І таму я, па-відаць збіраецца размясціць карціну Рык Эстлі дзесьці паміж гэтай DIV тэг, гэта адвольнае падзел. Мабыць, што файл размешчаны ў Рык кропка 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.