>> 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.