DAVEN Farnham: Danes bom govori malo o HTML, HyperText Markup Language. Vidiš HTML povsod v teh dneh. V bistvu, če gledaš to video v brskalniku, ste videnje HTML zdaj. HTML ni programski jezik, ampak to je označevalni jezik, ki ga uporablja brskalniki napravijo strani na internetu. 

Tako da boste morda vprašati, kako točno se pisno spletna stran v HTML drugačna od pisanja programa v programiranju jezik kot C? No, C je jezik z zelo stroga sintaktične pravila, da mora biti zbrani pred začetkom delovanja. Če ste kdaj pozabil vključiti podpičje na koncu stavka v vaša C kodo, veš kaj govorim o v zvezi s strogo sintakso. 

Spletni brskalniki, čeprav so nekoliko bolj odpuščati, ko gre za HTML. Tudi če je vaš HTML ni skladenjsko pravilno, lahko vaša stran še vedno prikaže brskalnika, vendar bi Ni videti, kot ste nameravali. Zato je vedno najbolje, da upoštevajo pravila. Najboljši način, da dobite intuicijo o tem, kako stvari delujejo, je iti skozi primer. 

Torej, kaj imamo tukaj je osnovna načrt za spletno stran. Verjetno ste opazili veliko stvari med kotne oklepaje. No, to so samo oznake. Tags bistvu obvesti spletnih brskalnikov da, hej, kaj prihaja svojo pot. Ne pozabite, čeprav, ko odprete tag, boste morali, da ga zaprete, ko ste storiti, da jo uporabljajo. 

Tako na primer, sem odprl oddelek kode z odprto Nosilec telo, zaklepaj. Nato sem dodati nekaj besedila, v tem primeru moj prva spletna stran, potem ko sem šel v zapreti to poglavje, ki ga uporabljam skoraj identična tag razen tega časa s poševnica pred telesom. Na splošno velja, da je to oblika ste boste uporabljali vsakič, ko se odpirajo in zapiranje oznake. Skupaj odprt tag in končna oznaka sestaviti kar se imenuje element. 

Če pogledaš na prvi vrstici, boste glej klicaj, ki mu sledi DOCTYPE html. To je res samo povedal brskalnik da je datoteka spletna stran napisana v HTML. HTML tag v bistvu pravi, tukaj prihaja nekaj HTML. Potem smo imeli oznako glavo z tag Naslovno znotraj njega. Glava tag si lahko zamislite kot vsebuje HTML kodo, ki pride za Večji del vaše spletne strani je dejanska vsebina. 

Na splošno, si dal naslov vašega Spletna stran tukaj, čeprav obstajajo nekateri druge oznake, ki se lahko pojavijo tudi tukaj. Sledi telo vaše spletne strani je, Dejanska meso in kosti vaše spletne strani. V našem primeru smo pravkar dal preprost stavek, Moj prvi spletni strani, ki bi, če tečemo našo spletno stran, bo videti Malo kaj takega. Naša spletna stran ni preveč queer, vendar ne skrbite. Bomo smreka kmalu. 

Torej zgoraj HTML, bomo vam zelo Osnovni model za spletno stran, Nič posebnega, samo gole kosti. Ampak, če sem oblikovanje spletnih strani, Kaj pa, če želim dodati slika, recimo, sam? No, to lahko naredim. Obstaja nekaj načinov, da dodajanje slik na vašo spletno stran. Če je slika v isti mapi kot vaš HTML datoteke, ki jih lahko povežete s Podoba preko poti, kot je ta. 

Odpreš z oznako slike, ki mu sledi ki ga v Alt atribut v vir slike. Vrednost atributa je le nekaj Nadomestno besedilo v primeru uporabnik ne more glej sliko. Lahko pa tudi povezava slik preko polnega URL, je to všeč. Zdaj, da je spletna stran v resnici ne obstaja, vendar, če je bilo slika me na tem naslovu, sem lahko uporabite vir URL za vključitev njegova slika na moji spletni strani. Kakorkoli, ste na koncu z veliko lepša spletne strani, nekaj takega. 

No, to je zelo kul, ampak nekako sem o želijo nekaj besedila tudi tukaj. Tako da je le dodajte nekaj Super preprost zgoraj slika, kot v glavi. Vse, kar sem naredil, je uporaba glavo tag, H1 in prelom vrstice tag, br. Header tag naredi pisavo malo malo večji in bolj vidno. Prelom vrstice tag, na drugi strani strani pa je nekako kul. Za razliko od večine drugih oznak, nimate odpiranje in zapiranje odmor tag, samo ena je prikazano zgoraj. To je zato, ker ima odmor nobene vsebine in je zato, prazna element. 

Prazne elemente, kot je ta, lahko odprete in hkrati blizu preprosto z vključno s poševnico na Konec prvotni deklaraciji. Torej, zdaj moja spletna stran izgleda malo kaj takega. Bolje pa je, nekako čuti kot slepa ulica. Nikamor drugam razveljavitev od tega glavno stran. No, da se določi, da ga vključno s povezavo. 

Kaj bom naredil tukaj je uporaba atribut, označenih z in da Podoba povezavo do, recimo, CS50 TV. Na ta način, vsakič, ko kdo klikne na mene, njihov brskalnik bodo usmerjeni drugo, verjetno bolj koristno, spletna stran. Sem imel, da se zmanjša velikost besedilo, malo zato, ker je naša spletna stran postajajo vse bolj napredni. Upam pa, da je še vedno jasna. Moja spletna stran izgleda popolnoma enako le Zdaj, ko sem kliknite na sliko, moj brskalnik bo odprl drugo Kartica za spletno stran CS50.tv. 

Nazadnje, recimo, da bom slogu Ta spletna stran kasneje z uporabo CSS. CSS je tisto, kar je znano kot kaskadno slog stanja. In se v osnovi zagotavlja učinkovito način za urejanje in stil podobne bloki kode. Rada bi začela organizirati svoj HTML lažje slog kasneje. Tukaj sem ustanovil dve različni vrsti identifikatorje, ki vam pomaga organizirati svoj zbornik. Uporabil sem osebno lastnost notranjosti delitev ali div tag, in sem se uporabljajo Razred atributa znotraj drugo div tag. 

ID in razred atributi delujejo podobno. Edina razlika je, da lahko le en element, posebno ID, vendar poljubno število elementov lahko delijo razred. Tako, na primer, lahko uporabite razred slikovnih večkrat, ampak ne morem ustvarite nov oddelek z ID vrhu. Čeprav nisem šla v CSS, drug jezik, pogosto uporablja poleg HTML, ko začnem styling moja koda s CSS, lahko uporabite te organizacijske pripisuje vplivu estetika moji spletni strani. 

Vse, kar je v okviru delitve na vrh bo imel podobne stylings ali katerokoli Druga skupina I skupina HTML v Razred slike bodo delili podoben videz. To je veliko lažje kot poskuša urediti in slike slog ali bloki besedilo posamično. 

Torej smo šli čez osnove o tem, kako narediti spletno stran s HTML. HTML ima kup drugih funkcij preveč da, ko seznanjene z drugimi jeziki kot so CSS in JavaScript, lahko resnično da strani izstopajo. Najboljši način, da bi dobili udobno s HTML je le igral z njo, glej, kaj deluje in kaj ne. 

Moje ime je Daven Farnham. To je CS50. 

Tako, na primer, lahko uporabite Razred sliko - Ne, obstaja toliko atributi. Moje ime je Daven Farnham. To je CS 650. Hočem reči, CSS. To je CSS.