Daven FARNHAM: Сёння, я збіраюся трохі пагаворым аб HTML, Мова разметкі гіпертэксту. Вы бачыце HTML ўсюды ў гэтыя дні. На самай справе, калі вы глядзіце гэта відэа ў браўзэры, вы бачачы HTML прама цяпер. HTML не з'яўляецца мовай праграмавання, хутчэй, гэта мова разметкі, які выкарыстоўваецца на вэб-браўзэры, здольныя прайграваць старонкі ў Інтэрнэце. 

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

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

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

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

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

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

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

Вы адкрываеце з тэга малюнка з наступным на ў атрыбуце Alt ў крыніца малюнка. Значэнне Альт атрыбуту з'яўляецца толькі некаторыя Альтэрнатыўны тэкст у выпадку, калі карыстальнік не можа бачыць малюнак. Акрамя таго, вы можаце перайсці па спасылцы Малюнкі з дапамогай поўнага URL, як гэта. Цяпер, што вэб-сайт на самой справе не існуе, але калі б карціна мне па гэтым адрасе, я мог бы выкарыстаць крыніца URL ўключыць яго вобраз на маім сайце. У любым выпадку, вы ў канчатковым выніку з значна прыгажэй сайт, нешта накшталт гэтага. 

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

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

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

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

ID і атрыбуты класа працуюць аналагічна. Розніца толькі ў тым, вы можаце мець толькі адзін элемент, удзельная ID, але любую колькасць элементаў можаце падзяліцца клас. Так, напрыклад, я магу выкарыстоўваць клас малюнка некалькі разоў, але я не магу стварыць яшчэ адзін аддзел з ID вяршыні. Хоць я не пайшоў у CSS, іншую мову звычайна выкарыстоўваецца разам HTML, як толькі я пачынаю стыль мой код з CSS, я магу выкарыстоўваць гэтыя арганізацыйныя атрыбуты да ўздзеяння эстэтыка майго вэб-старонкі. 

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

Такім чынам, мы перайшлі асновы таго, як каб зрабіць вэб-старонку з HTML. HTML мае кучу іншых функцый занадта што, калі ў пары з іншымі мовамі як CSS і JavaScript, могуць на самай справе зрабіць старонкі вылучыцца. Лепшы спосаб навучыцца працаваць з HTML проста важдацца з ім, паглядзець, што працуе, а што не. 

Мяне клічуць Daven Фарнхэм. Гэта CS50. 

Так, напрыклад, я магу выкарыстоўваць вобраз клас - Няма, ёсць вельмі шмат атрыбутаў. Мяне клічуць Daven Фарнхэм. Гэта CS 650. Я хачу сказаць, CSS. Гэта CSS.