Daven FARNHAM: Dnes, budu mluvit trochu o HTML, HyperText Markup Language. Vidíte HTML všude v těchto dnech. Ve skutečnosti, pokud se díváte na to videa v prohlížeči, jste vidět HTML teď. HTML není programovací jazyk, spíše, že je to značkovací jazyk používaný webové prohlížeče k vykreslování stránek na internetu. 

Takže můžete se ptát, jak se přesně píše webové stránky ve formátu HTML odlišné od psaní programu v programování jazyk C? No, C je jazyk s velmi přísná syntaktických pravidel, která musí být sestaven před tím, než může běžet. Pokud jste někdy zapomněl zahrnout středník na konci příkazu v Váš kód v C, víte, o čem mluvím o v souvislosti s přísnou syntaxi. 

Webové prohlížeče i když jsou trochu více odpuštění, pokud jde o HTML. I když vaše HTML není syntakticky správné, vaše stránka může být stále zobrazit prohlížeči, ale to by mohlo nevypadá, jak jste zamýšleli. Takže je to vždy lepší, aby dodržovat pravidla. Nejlepší způsob, jak získat intuici o tom, jak věci fungují, je projít příklad. 

Takže to, co tu máme, je základní plán pro webové stránky. Asi jste si všimli, hodně věcí mezi špičaté závorky. No, to jsou jen tagy. Tagy podstatě informovat webových prohlížečů že, hej, co přichází vaše cesta. Pamatujte, že při každém otevření tag, musíte zavřít jednou jste provádí použitím. 

Tak například, otevřu sekci kódu s otevřenou držák tělo, úzkým držák. Pak jsem přidat nějaký text, v tomto případě, my První webové stránky pak, když jsem šel do Zavři tuto sekci, já používám téměř identické tag mimo tuto dobu se lomítko před tělem. Obecně platí, že se jedná o formát jste bude používat vždy, když se otevírá a uzavírací tagy. Společně otevřený tag a koncový tag skládat, co se nazývá prvek. 

Podíváte-li se na prvním řádku, budete si muset vybrat viz vykřičník následovaný DOCTYPE html. To je opravdu jen vyprávění svého prohlížeče že soubor je webová stránka psány v HTML. HTML tag v podstatě říká, tady je nějaký HTML. Pak máme značku hlavy s název značky uvnitř. Tag si můžete myslet jako hlava obsahující HTML kód, který je pro Převážná část vaší webové stránky je skutečný obsah. 

Obecně platí, že dal název vašeho webové stránky zde, ale tam jsou některé jiné značky, které se mohou objevit i zde. Další je tělo vaší webové stránky je, skutečné maso a kosti z vašich webových stránek. V našem příkladu jsme jen dát jednoduchý věta, Moje první webové stránky, které, když narazíme na našich stránkách, bude vypadat Trochu něco takového. Naše webová stránka není příliš divný, ale nebojte se. Budeme smrk to brzy. 

Takže nad HTML, budeme vám velmi základní šablony pro webové stránky, nic vymyšleného, ​​jen holé kosti. Ale když jsem vytvořit webové stránky, Co když chci přidat obraz, řekněme, já? No, můžu to udělat. Existuje několik způsobů, jak přidat obrázky do vašich stránek. Pokud je obraz ve stejné složce jako váš soubor HTML, můžete propojit se obrázek přes cestu takhle. 

Můžete otevřít s tagem obrazu s následným by v atributu ALT u Zdroj obrazu. Hodnota ALT atributu je jen některé alternativní text v případě, že uživatel nemůže viz obrázek. Případně můžete také odkazy na obrázky pomocí plné URL, jako je tento. Nyní, že webové stránky ve skutečnosti neexistuje, ale pokud tam byl obraz mi na této adrese, mohl bych použít zdroj URL obsahovat jeho obraz na mých webových stránkách. Ať tak či onak, můžete skončit s mnohem hezčí webové stránky, něco takového. 

No, to je docela v pohodě, ale nějak jsem ze chtít nějaký text i zde. Takže řekněme něco přidat velmi jednoduchá výše obrazu, jako je záhlaví. Všechno, co jsem udělal tak daleko, je použít záhlaví tag, H1 a zalomení řádku tag, br. Tag hlavička je písmo trochu trochu větší a výraznější. Tag zalomení řádku, na straně druhé ruka, je docela v pohodě. Na rozdíl od většiny ostatních značek, nemusíte otevírání a zavírání přestávka tag, jen jeden je uvedeno výše. To je proto, že přestávka nemá žádný obsah , a je tedy, prázdný element. 

Prázdné elementy, jako je tato, můžete otevřít a blízko zároveň jednoduše tím, že včetně lomítka na Konec počáteční prohlášení. Takže teď moje webové stránky vypadá trochu něco takového. Lepší, ale tak nějak pocit, jako slepé uličky. Není kam jinam jít stranou z této hlavní stránky. Dobře, pojďme napravit tím, včetně odkazu. 

Co budu dělat, je zde použít atribut označená A, a aby obrázek odkaz, řekněme, CS50 TV. Tímto způsobem, když někdo klikne na mě, jejich prohlížeč bude zaměřena na další, pravděpodobně užitečné webové stránky. Měl jsem k minimalizaci velikosti text, trochu proto, že naše webové stránky je stále vyspělejší. Ale doufejme, že je to stále jasné. Moje webové stránky vypadá přesně stejný jen teď, když jsem klikněte na obrázek, můj prohlížeč otevře další Karta pro webové stránky CS50.tv. 

Konečně, řekněme, že budu styl tento web později pomocí CSS. CSS je to, co je známo jako kaskádových stylů. A to v podstatě poskytuje efektivní způsob, jak upravit a styl podobné bloky kódu. Chci začít organizovat svou HTML do usnadňují styl později. Zde jsem nastavit dva různé druhy identifikátory, které vám pomohou uspořádat svůj kód. Použil jsem atribut ID uvnitř rozdělení, nebo div tag, a jsem použil Atribut Class uvnitř další div tag. 

ID a třídy atributy pracují podobně. Jediný rozdíl je můžete mít jen jeden prvek, specifické ID, ale libovolný počet prvků mohou sdílet třídu. Tak například, mohu použít třídu obrázek několikrát, ale nemůžu vytvořit další dělení s ID vrcholu. I když jsem šel do CSS, jiný jazyk běžně používá spolu s HTML, jakmile začnu styl můj kód s CSS, mohu použít tyto organizační atributy k vlivu estetika mé webové stránky. 

Vše v rámci divize vrcholu bude mít podobné stylings nebo jakékoliv Druhá skupina I skupiny do HTML třída obraz bude sdílet podobný vzhled. To je mnohem jednodušší než se snažit upravovat a obrazy styl nebo bloky textu samostatně. 

Tak jsme šli přes základy toho, jak aby webové stránky s HTML. HTML má spoustu dalších funkcí příliš že při spárování s jinými jazyky jako CSS a JavaScriptu, může opravdu aby stránky vyniknout. Nejlepší způsob, jak se dostat pohodlně s HTML je jen pachtit s tím, vidět, co funguje, a co ne. 

Jmenuji se Daven Farnham. To je CS50. 

Tak například, mohu použít obrázek třída - No, tam je tak mnoho atributů. Jmenuji se Daven Farnham. To je CS 650. Chci říct CSS. To je CSS.