Daven FARNHAM: Dnes, budem hovoriť trochu o HTML, HyperText Markup Language. Vidíte HTML všade v týchto dňoch. V skutočnosti, ak sa pozeráte na to videa v prehliadači, ste vidieť HTML teraz. HTML nie je programovací jazyk, skôr, že je to značkovací jazyk používaný webové prehliadače k ​​vykresľovanie stránok na internete. 

Takže môžete sa pýtať, ako sa presne píše webové stránky vo formáte HTML odlišné od písania programu v programovaní jazyk C? No, C je jazyk s veľmi prísna syntaktických pravidiel, ktoré musia byť zostavený pred tým, než môže bežať. Ak ste niekedy zabudol zahrnúť bodkočiarku na konci príkazu v Váš kód v C, viete, o čom hovorím o v súvislosti s prísnou syntax. 

Webové prehliadače aj keď sú trochu viac odpustenie, pokiaľ ide o HTML. Aj keď vaše HTML nie je syntakticky správne, vaša stránka môže byť stále zobraziť prehliadači, ale to by mohlo nevyzerá, ako ste zamýšľali. Takže je to vždy lepšie, aby dodržiavať pravidlá. Najlepší spôsob, ako získať intuíciu o tom, ako veci fungujú, je prejsť príklad. 

Takže to, čo tu máme, je základnou plán pre webové stránky. Asi ste si všimli, veľa vecí medzi špicaté zátvorky. No, to sú len tagy. Tagy podstate informovať webových prehliadačov že, hej, čo prichádza vaša cesta. Pamätajte, že pri každom otvorení tag, musíte zavrieť raz ste vykonáva použitím. 

Tak napríklad, otvorím sekcii kódu s otvorenou držiak telo, úzkym držiak. Potom som pridať nejaký text, v tomto prípade, my Prvé webové stránky potom, keď som išiel do Zavri túto sekciu, ja používam takmer identické tag mimo túto dobu sa lomítko pred telom. Všeobecne platí, že sa jedná o formát ste bude používať vždy, keď sa otvára a uzatváracie tagy. Spoločne otvorený tag a koncový tag skladať, čo sa nazýva prvok. 

Ak sa pozriete na prvom riadku, budete si musieť vybrať pozri výkričník nasledovaný DOCTYPE html. To je naozaj len rozprávanie svojho prehliadača že súbor je webová stránka písané v HTML. HTML tag v podstate hovorí, tu je nejaký HTML. Potom máme značku hlavy s názov značky vnútri. Tag si môžete myslieť ako hlava obsahujúce HTML kód, ktorý je pre Prevažná časť vašej webovej stránky je skutočný obsah. 

Všeobecne platí, že dal názov vášho webové stránky tu, ale tam sú niektoré iné značky, ktoré sa môžu objaviť aj tu. Ďalšie je telo vašej webovej stránky je, skutočné mäso a kosti z vašich webových stránok. V našom príklade sme len dať jednoduchý veta, Moje prvé webové stránky, ktoré, keď narazíme na našich stránkach, bude vyzerať Trochu niečo také. Naša webová stránka nie je príliš divný, ale nebojte sa. Budeme smrek to čoskoro. 

Takže nad HTML, budeme vám veľmi základné šablóny pre webové stránky, nič vymysleného, ​​len holé kosti. Ale keď som vytvoriť webové stránky, Čo keď chcem pridať obraz, povedzme, ja? No, môžem to urobiť. Existuje niekoľko spôsobov, ako pridať obrázky do vašich stránok. Ak je obraz v rovnakom priečinku ako váš súbor HTML, môžete prepojiť so obrázok cez cestu takhle. 

Môžete otvoriť s tagom obrazu s následným by v atribútu ALT u Zdroj obrazu. Hodnota ALT atribútu je len niektoré alternatívny text v prípade, že užívateľ nemôže viď obrázok. Prípadne môžete tiež odkazy na obrázky pomocou plnej URL, ako je tento. Teraz, že webové stránky v skutočnosti neexistuje, ale ak tam bol obraz mi na tejto adrese, mohol by som použiť zdroj URL obsahovať jeho obraz na mojich webových stránkach. Či tak alebo onak, môžete skončiť s oveľa krajší webové stránky, niečo také. 

No, to je celkom v pohode, ale nejako som zo chcieť nejaký text aj tu. Takže povedzme niečo pridať veľmi jednoduchá vyššie obrazu, ako je záhlavie. Všetko, čo som urobil tak ďaleko, je použiť záhlavie tag, H1 a zalomenie riadku tag, br. Tag hlavička je písmo trochu trochu väčšie a výraznejšie. Tag zalomenie riadku, na strane druhej ruka, je celkom v pohode. Na rozdiel od väčšiny ostatných značiek, nemusíte otváranie a zatváranie prestávka tag, len jeden je uvedené vyššie. To je preto, že prestávka nemá žiadny obsah , A je teda, prázdny element. 

Prázdne elementy, ako je táto, môžete otvoriť a blízko zároveň jednoducho tým, že vrátane lomítka na Koniec počiatočné vyhlásenie. Takže teraz moje webové stránky vyzerá trochu niečo také. Lepšie, ale tak nejako pocit, ako slepej uličky. Nie je kam inam ísť bokom z tejto hlavnej stránky. Dobre, poďme napraviť tým, vrátane odkazu. 

Čo budem robiť, je tu použiť atribút označené A, a aby obrázok odkaz, povedzme, CS50 TV. Týmto spôsobom, keď niekto klikne na mňa, ich prehliadač bude zameraná na ďalšie, pravdepodobne užitočné webové stránky. Mal som k minimalizácii veľkosti text, trochu preto, že naše webové stránky je stále vyspelejší. Ale dúfajme, že je to stále jasné. Moje webové stránky vyzerá presne rovnaký len teraz, keď som kliknite na obrázok, môj prehliadač otvorí ďalšie Karta pre webové stránky CS50.tv. 

Napokon, povedzme, že budem štýl tento web neskôr pomocou CSS. CSS je to, čo je známe ako kaskádových štýlov. A to v podstate poskytuje efektívny spôsob, ako upraviť a štýl podobné bloky kódu. Chcem začať organizovať svoju HTML do uľahčujú štýl neskôr. Tu som nastaviť dva rôzne druhy identifikátory, ktoré vám pomôžu zorganizovať svoj kód. Použil som atribút ID vnútri rozdelenie, alebo div tag, a som použil Atribút Class vnútri ďalší div tag. 

ID a triedy atribúty pracujú podobne. Jediný rozdiel je môžete mať len jeden prvok, špecifické ID, ale ľubovoľný počet prvkov môžu zdieľať triedu. Tak napríklad, môžem použiť triedu obrázok niekoľkokrát, ale nemôžem vytvoriť ďalšie delenie s ID vrchole. Aj keď som išiel do CSS, iný jazyk bežne používa spolu s HTML, akonáhle začnem štýl môj kód s CSS, môžem použiť tieto organizačné atribúty k vplyvu estetika mojej webovej stránky. 

Všetko v rámci divízie vrchole bude mať podobné stylings alebo akékoľvek Druhá skupina I skupiny do HTML trieda obraz bude zdieľať podobný vzhľad. To je oveľa jednoduchšie ako sa snažiť upravovať a obrazy štýl alebo bloky texte samostatne. 

Tak sme šli cez základy toho, ako aby webové stránky s HTML. HTML má veľa ďalších funkcií príliš že pri spárovaní s inými jazykmi ako CSS a JavaScriptu, môže naozaj aby stránky vyniknúť. Najlepší spôsob, ako sa dostať pohodlne s HTML je len pachtiť s tým, vidieť, čo funguje, a čo nie. 

Volám sa Daven Farnham. To je CS50. 

Tak napríklad, môžem použiť obrázok trieda - No, tam je tak veľa atribútov. Volám sa Daven Farnham. To je CS 650. Chcem povedať CSS. To je CSS.