DAVEN Farnham: Денес, јас ќе одам да зборувам малку за HTML, HyperText Markup Language. Гледаш HTML секаде овие денови. Всушност, ако гледате оваа видео во прелистувачот, ти си види HTML токму сега. HTML не е програмски јазик, Напротив, тоа е маркап јазик се користи од страна веб прелистувачи за да направат страници на интернет. 

Па можеби ќе прашате, како точно е пишување веб-страница во HTML различни од пишување програма во програмирање јазик како C? Добро, С е јазик со многу строги синтаксички правила што треба да биде Составувач пред да може да се кандидира. Ако некогаш сте заборавиле да го вклучите точка и запирка на крајот на соопштението во вашата C код, знаеш за што зборувам за во однос на строга синтакса. 

Веб прелистувачи сепак, се малку повеќе простувајќи кога станува збор за HTML. Дури и ако вашиот HTML не е синтаксички точни, вашата страница сеуште може да биде прикажана од страна на пребарувач, но тоа би можело не изгледа како што се наменети. Така, тоа е секогаш најдобро да се следат правилата. Најдобар начин да се добие интуиција за тоа како работите работа е да се одат преку еден пример. 

Значи она што го имаме тука е основен план за веб-страница. Вие веројатно забележале многу работи помеѓу аголни голема заграда. Па, тие се само тагови. Тагови основа информира веб прелистувачи дека, еј, нешто доаѓа на вашиот пат. Се сеќавам иако, секогаш кога ќе се отвори ознака, потребно е да го затвори еднаш сте направено негово користење. 

Така на пример, јас се отвори секција на код со отворени заградата тело, блиску заграда. Јас тогаш додадете некој текст, во овој случај, мојот прва веб страница, тогаш, кога отидов да затвори ова поглавје, јас го користам речиси идентични таг освен овој пат со Препрати Slash пред телото. Во принцип, ова е формат ти си ќе се користи секогаш кога ќе се отвораат и затворање тагови. Заедно, отворен ознака и крајот ознака компонира она што се нарекува елемент. 

Ако се погледне на првата линија, да ќе види фантастичен точка проследена со DOCTYPE HTML. Ова е навистина само кажува вашиот прелистувач дека датотеката е веб-страница напишан во HTML. HTML таг суштински се вели дека, тука доаѓа некои HTML. Тогаш имаме главата таг со наслов таг во него. Главата таг можете да замислите како се состои HTML кодот што доаѓа за најголемиот дел од вашиот веб-страница вистинската содржина. 

Во принцип, ќе се стави наслов на вашата веб-страница тука, иако постојат некои други тагови кои можат да се појават и тука. Следува тело вашата веб страница, на Крај на месо и коски на вашиот вебсајт. Во нашиот пример, ние само стави едноставно реченица, мојата прва веб страница, кои, ако трчаме нашиот сајт, ќе изгледа малку нешто како ова. Нашата веб страница не е премногу педер, но не грижете се. Ние ќе го издокарвам наскоро. 

Па над HTML, ние ќе ви даде многу основна дефиниција за веб страница, Ништо фенси, само голи коски. Но, ако јас сум создавање на веб-страница, што ако сакам да додадете слика на, да речеме, мене? Па, можам да го направите тоа. Постојат неколку начини да се додадете слики на вашиот сајт. Ако сликата е во истата папка како HTML датотеката, можете да водат до сликата преку патот вака. 

Ќе се отвори со слика таг проследено од во алт атрибутот во извор на сликата. Вредност на ALT атрибут е само некои алтернативен текст во случај корисникот не можат да види сликата. Алтернативно, можете, исто така, може да водат до слики преку целосна URL-то, како ова. Сега, таа веб страница не постои, но ако имало слика од ме на оваа адреса, би можел да се користи извор URL, за да го вклучите својот имиџ на мојот веб-сајт. Во секој случај, ќе се заокружи со многу поубава веб-сајт, нешто како ова. 

Па, тоа е прилично кул, но јас вид на сакате на некој текст тука, како и. Па да додадете нешто супер едноставен над слика, како заглавието. Сите што го направив досега е користат заглавие таг, H1, и линија пауза таг, бр. Насловот таг прави фонт малку малку поголема и позначајна. На прелом ознака, од друга страна, е вид на ладно. За разлика од повеќето други ознаки, вие не мора отворање и затворање пауза таг, исто една е прикажано погоре. Тоа е затоа што пауза нема содржина и затоа, празен елемент. 

Празни елементи, како таков, може да се отвори и блиски истовремено со едноставно вклучувајќи напред коса црта на завршување на почетната декларација. Па сега мојот веб-сајт изгледа малку нешто како ова. Подобро, но тој вид на чувствувам како ќорсокак. Има никаде на друго место да одам настрана од овој главната страница. Добро, ајде да утврдат дека од страна на вклучувајќи линк. 

Она што јас ќе одам да направите тука е да користите атрибут означува со А и направи сликата линк до, да речеме, CS50 ТВ. На тој начин, секогаш кога некој ќе кликне на мене, нивниот интернет пребарувач ќе бидат насочени кон друг, веројатно повеќе корисни, веб-страница. Морав да се минимизира големината на текстот е малку, бидејќи нашата веб-страница е добивање на повеќе напредни. Но се надевам, тоа е уште јасно. Мојот веб-сајт изгледа иста само Сега, кога ќе кликнете на сликата, мојот интернет пребарувач ќе се отвори уште еден јазичето за CS50.tv веб-страница. 

И на крај, да речеме јас ќе одам да стил овој веб-сајт подоцна користење на CSS. CSS е она што е познато како Cascading Style лист. А во основа тоа обезбедува ефикасен начин да се уреди и стил слични блокови на код. Сакам да почнат со организирање мојот HTML да го прават тоа полесно да стил подоцна. Еве, јас постави два различни видови на идентификатори да им помогне организира мојата код. Јас сум користел ид атрибут во внатрешноста на поделба, или div таг, и јас сум користел Класа атрибут внатре друг div таг. 

ID и класа атрибути работат на сличен начин. Единствената разлика е што само може да имаат еден елемент, специфичните проект, но било кој број на елементи може да го споделуваат класа. Така на пример, можам да користам класа сликата неколку пати, но не можам создаде уште една поделба со ID врвот. Иако не сум отишол во CSS, друг јазик најчесто се користи заедно со HTML, еднаш почнам стил мојот код со CSS, можам да ги користите овие организациски атрибути влијание естетика мојата веб страница. 

Сè што во рамките на поделбата врвот ќе имаат слични стилови или било друга група на HTML I група во класа сликата ќе делат сличен изглед. Ова е многу полесно отколку што се обидува да ги уредувате и стил слики или блокови од текст поединечно. 

Па отидовме во текот на основите за тоа како да се направи веб страница со HTML. HTML има еден куп други карактеристики премногу дека кога поврзан со други јазици како CSS и JavaScript, навистина може да направи страници издвоите. Најдобар начин да се чувствуваме удобно со HTML-от е само да се плеткаме околу со неа, да видиме што работи, а што не. 

Моето име е Daven Farnham. Ова е CS50. 

Така на пример, можам да користам класа сликата - Не, постојат толку многу атрибути. Моето име е Daven Farnham. Ова е CS 650. Сакам да кажам CSS. Ова е CSS.