>> Дейвън Фарнъм: Днес, аз отивам да поговорим малко за HTML,
HyperText Markup Language.
Виждате ли HTML навсякъде тези дни.
В действителност, ако гледате този видео в браузъра, вие сте
виждайки HTML точно сега.
HTML не е език за програмиране, по-скоро, това е език за маркиране, използван от
уеб браузъри, за да правят страници в интернет.
>> Така че може да попитам, как точно е писане уеб страница в HTML различен
от написването на програма в програмирането език като C?
Е, C е език с много строг синтактични правила, които трябва да бъдат
съставен преди да може да се изпълнява.
Ако някога сте забравили да включите точка и запетая в края на отчет в
Вашата C код, знаеш ли за какво говоря за по отношение на стриктното синтаксис.
>> Уеб браузърите обаче, са малко по- прощава, когато става дума за HTML.
Дори и ако вашият HTML не е синтактично правилно, вашата страница може все още да
показва от браузъра, но може да не изглежда като сте възнамерявали.
Така че това е винаги най-добре да следват правилата.
Най-добрият начин да се сдобиете с интуиция за това как работят нещата е да се
мине през един пример.
>> Така че това, което имаме тук, е базов проект за уеб страница.
Вероятно сте забелязали много неща между ъглови скоби.
Е, тези, които са само на тагове.
Tags основно информират уеб браузъри че, хей, нещо
идва вашия начин.
Не забравяйте обаче, всеки път, когато отворите етикет, трябва да го затворите, след като сте
направи го използвате.
>> Така например, аз се отвори секция на код с отворен
скоба на тялото, в близост скоба.
После добавете някакъв текст, в този случай, ми първата уеб страница, а след това, когато отидох да
затворите този раздел, аз използвам почти идентичен етикет само че този път с
наклонена черта преди тялото.
Като цяло, това е формата, който сте отивам да се използва всеки път, когато отваряте
и затварящи тагове.
Заедно с отворен етикет и край тагове композира, което се нарича елемент.
>> Ако се вгледате в първата линия, ще видите удивителен знак, последван от
DOCTYPE HTML.
Това е наистина просто казвам вашия браузър че файлът е уеб страница
написан на HTML.
HTML маркер по същество се казва, тук идва някакъв HTML.
Тогава имаме таг глава с маркер заглавие вътре в нея.
Маркерът главата можеш да се сетиш като включващ HTML код, който идва за
по-голямата част от вашия уеб страницата си действителното съдържание.
>> Като цяло, най-напред сложите заглавие на уеб страница тук, макар че има някои,
други етикети, които могат да се появят тук, както добре.
После идва тялото си уеб страницата, на застроена месо и кости на вашия сайт.
В нашия пример, ние току-що сложи прост изречение, My First уеб страница,
които, ако бягаме нашия сайт, ще изглежда малко нещо като това.
Нашата уеб страница не е твърде странна, но не се притеснявайте.
Ние ще го подсилят скоро.
>> Така че по-горе HTML, ние ще ви дам един много Основният шаблон за уеб страница,
нищо фантазия, само голите кости.
Но ако аз съм създаване на уеб страница, Ами ако искате да добавите
картина на, да речем, себе си?
Е, аз мога да направя това.
Има няколко начина да се добавяте изображения към вашия сайт.
Ако изображението е в същата папка, като вашия HTML файл, можете да се свържете към
изображение чрез път по този начин.
>> Отваряш с етикет образ последвано от в Alt белег в
източник на изображение.
Стойността на атрибута е Alt е просто някакъв алтернативен текст, в случай, че потребителят не може да
виж картинката.
Като алтернатива, можете да се свържете с изображения чрез пълен URL, ето така.
Сега, че сайта наистина не съществува, но ако имаше снимка на
мен на този адрес, мога да използвам URL адреса на източника, за да включите
имиджа си на моя сайт.
Така или иначе, ти свърши с много по- хубава уебсайт, нещо като това.
>> Е, това е много готино, но аз вид на искам някакъв текст тук, както добре.
Така че нека просто добавете нещо супер проста над
изображение, подобно на заглавието.
Всичко, което съм правил досега, е да използвате заглавието тагове, H1, и нов ред тагове, бр.
Маркерът заглавна прави шрифта малко малко по-големи и по-забележима.
Маркерът ред, от друга страна страна, е нещо страхотно.
За разлика от повечето други тагове, не е нужно за отваряне и затваряне почивка етикет, просто
този, показан по-горе.
Това е така, защото почивка няма съдържание и следователно, празен елемент.
>> Празните елементи като този, можете да отворите и в близост едновременно просто чрез
включително наклонена черта в край на първоначалната декларация.
Така че сега моя сайт изглежда малко нещо като това.
По-добре, но тя някак се чувства като задънена улица.
Няма къде другаде да отидат настрана от този главната страница.
Е, нека да се определи, че от включително връзка.
>> Това, което аз ще направя тук, е да използвате един атрибут означава с и да се направи
изображение линк към, да кажем, CS50 TV.
По този начин, всеки път, когато някой кликне върху мен, техния браузър ще бъде насочена към
друга, може би по- полезен, уеб страница.
Аз съм имал да се намали размера на текстови малко, защото нашата уеб страница е
получаване на по-напреднали.
Но да се надяваме, че все още е ясно.
Моят сайт изглежда точно същото, само Сега, всеки път, когато щракнете върху снимката,
браузъра ще се отвори още един В раздела за уеб страницата CS50.tv.
>> На последно място, нека да кажа, че отивам да стил този сайт по-късно с помощта на CSS.
CSS е това, което е известно като каскаден стил лист.
И то основно осигурява ефикасен начин да редактирате и стил
подобни блокове от код.
Искам да започна организирането на моя HTML да направи по-лесно да оформите по-късно.
Ето, аз създаде две различни видове идентификатори, за да помогнат организира моя код.
Ползвал съм атрибута ID вътре в деление, или Div тагове, и аз съм използвал
Клас атрибут вътре Разделения друг маркер.
>> ID и Class атрибути работи по подобен начин.
Единствената разлика е, че може да има само един елемент, специфичната ID, но
произволен брой елементи могат да споделят един клас.
Така например, мога да използвам този клас изображение няколко пъти, но не мога
създадете друга дивизия с горната ID.
Въпреки, че не са отишли ​​в CSS, друг език често се използва
заедно с HTML, след като започнете стайлинг моя код с CSS, мога да използвам тези
организационни качества на влияние естетика моята уеб страница.
>> Всичко в горната дивизия ще има подобни stylings или всякакви
друга група от HTML I група в клас на изображението ще споделят подобен вид.
Това е много по-лесно, отколкото се опитва да редактирате и стил изображения или блокове
текст поотделно.
>> Така че отидохме над основите на това как да направите уеб страница с HTML.
HTML има куп други функции, твърде че когато се свърже с други езици
като CSS и JavaScript, наистина може да направи страници открояват.
Най-добрият начин да се удобно с HTML е просто да се забъркваш с около него,
да видим какво работи и какво не.
>> Моето име е Дейвън Фарнъм.
Това е CS50.
>> Така например, мога да използвам картинката клас -
Не, има много характеристики.
Моето име е Дейвън Фарнъм.
Това е CS 650.
Искам да кажа, CSS.
Това е CSS.