DAVEN Farnham: Danas ću razgovarati malo o HTML-u, HyperText Markup Language. Vidite HTML svugdje ovih dana. U stvari, ako gledate ovo Video u pregledniku, ti si gledajući HTML upravo sada. HTML nije programski jezik, a, to je jezik za označavanje koristi web preglednici u davanju stranice na internetu. 

Tako da bi se zapitati, kako točno piše web stranica u HTML-u različita od pisanja programa u programiranju jezik poput C? Pa, C je jezik s vrlo strogim sintaktičke pravila koja treba biti sastavio prije nego što može pokrenuti. Ako ste ikada zaboraviti uključiti zarez na kraju izjave u Vaš C kod, znate o čemu pričam o tome s obzirom na stroge sintakse. 

Web preglednici iako su malo više oprostio kada je u pitanju HTML. Čak i ako je vaš HTML nije sintaktički točne, vaša stranica i dalje može biti prikazati u pregledniku, ali to bi moglo ne izgleda onako kako ste željeli. Dakle, to je uvijek najbolje slijediti pravila. Najbolji način da dobijete intuiciju o tome kako se stvari rade je da proći kroz primjer. 

Dakle, ono što imamo ovdje je osnovni Nacrt za web-stranicu. Vjerojatno ste primijetili puno stvari između ukošene tipkovnici. Pa, oni su samo oznake. Tagovi osnovi obavijestite web preglednike da, hej, nešto dolazi svoj put. Sjeti se ipak, svaki put kad otvorite tag, morate ga zatvoriti nakon što su učinio ga koristite. 

Tako na primjer, sam otvoriti poglavlje koda s otvorenim Nosač tijela, u neposrednoj blizini zagrada. I onda dodati neki tekst, u ovom slučaju, moj Prva web stranica onda kada sam otišao u zatvoriti ovo poglavlje, koristim gotovo identični tag osim ovaj put s kosa crta prije tijela. U principu, to je format ste će se koristiti kad god vam se otvaraju i zatvaranja tagova. Zajedno, otvoreni tag i end tag sastaviti ono što se naziva elementa. 

Ako pogledate na prvoj liniji, vi ćete vidi uskličnik slijedi DOCTYPE html. To je zapravo samo reći svoj preglednik da je datoteka je web stranica napisan u HTML. HTML tag suštini, kaže, evo neki HTML. Onda imamo glavu oznaku s više oznaka unutar njega. Glava tag možete misliti kako je obuhvaća HTML kod koji dolazi Najveći dio vaše web stranice je stvarni sadržaj. 

U principu, stavite naslov vašeg web stranica ovdje, iako postoje neki druge oznake koje se pojavljuju i ovdje. Zatim slijedi svoju web stranicu tijelo, Stvarni meso i kosti vaše web stranice. U našem primjeru, upravo smo stavili jednostavno rečenica, Moj prvi Web, koji je, ako ćemo pokrenuti našu stranicu, će izgledati Malo se nešto ovako. Naša web-stranica nije previše queer, , ali ne brinite. Mi ćemo ga dotjeram uskoro. 

Dakle iznad HTML, mi ćemo vam dati vrlo Osnovni predložak za web-stranicu, ništa fancy, samo gole kosti. Ali ako sam izrade web stranica, Što ako želim dodati slika, recimo, mene? Pa, ja to mogu. Postoji nekoliko načina za dodavanje slika na vaše stranice. Ako je slika u istoj mapi kao HTML datoteku, možete se povezati na image preko puta kao što je ovaj. 

Možete otvoriti sa slikom oznaku slijedi by u Alt atribut u izvor slike. Vrijednost Alt osobina jest samo neke alternativni tekst u slučaju da korisnik ne može pogledajte sliku. Alternativno, možete povezati slike preko pune URL, kao što je ovaj. Sad, da je web stranica zapravo ne postoji, ali ako je bilo slika ja na toj adresi, da bih mogao koristiti Izvor URL uključiti njegova slika na mojoj web stranici. Bilo kako bilo, možete završiti s puno ljepša web stranice, nešto poput ovoga. 

Pa, to je baš super, ali ja vrsta od žele neki tekst ovdje. Tako ćemo samo dodati nešto super jednostavna iznad slika, poput napadača. Sve što sam do sada učinio je koristiti zaglavlje tag, H1 i prijelom retka tag, br. Header tag čini font malo malo veće i izraženije. Prijelom retka tag, as druge S druge strane, je vrsta cool. Za razliku od većine drugih oznaka, nemate otvaranja i zatvaranja tag pauze, samo jedan je gore prikazano. To je zato što je pauza nema sadržaja i stoga, prazna elementa. 

Prazni elementi kao što je ovaj, možete otvoriti i blizu istovremeno jednostavno uključujući kosom crtom na kraj početne deklaracije. Dakle, sada je moja web stranica izgleda malo nešto kao što je ovaj. Bolje, ali to vrsta osjeća kao slijepa ulica. Tu je kamo otići na stranu od te glavne stranice. Pa, neka je popraviti po uključujući i link. 

Ono što ću učiniti ovdje je koristiti atribut obilježeni i učiniti image link na, recimo, CS50 TV. Na taj način, kad god bilo tko klikne na mene, njihov browser će biti usmjerena na još jedan, vjerojatno više korisna, web stranica. Ja sam morao smanjiti veličinu tekst malo jer je naša web stranica uzimajući više naprednih. No, nadamo se, to je još uvijek jasno. Moja web stranica izgleda točno isti samo Sada, kad sam kliknite na sliku, moj browser će otvoriti još jedan tab za web stranice CS50.tv. 

Na kraju, recimo da ću stilu Ova web stranica kasnije pomoću CSS. CSS je ono što je poznato kao kaskadno style sheet. I to u osnovi pruža učinkovit način urediti i stil slični blokovi koda. Želim za početak organiziranja HTML-u olakšavaju stil kasnije. Evo, postavio sam dvije različite vrste identifikatori koji će vam pomoći organizirati moj broj. Ja sam se ID atribut unutar podjela, ili div tag, a ja sam se Klasa atribut unutar još jedan div tag. 

ID i klase atribute rade na sličan način. Jedina razlika je da možete imati samo jedan element, specifično ID, ali bilo koji broj elemenata mogu dijeliti klase. Tako, na primjer, mogu koristiti klasu slika više puta, ali ja ne mogu stvoriti drugu podjelu s ID vrhu. Iako nisam otišao u CSS, drugi jezik često koristi uz HTML, kad jednom počne styling moj broj s CSS, ja mogu koristiti ove organizacijske atributi na utjecaju Estetika moje web stranice. 

Sve u okviru divizije vrhu će imati slične stilove ili bilo Druga skupina HTML I. skupine u Klasa slika će dijeliti sličan izgled. To je puno lakše nego pokušava izmijeniti i stil slike ili blokovi tekst pojedinačno. 

Tako smo otišli preko osnove kako napraviti web stranicu s HTML. HTML ima hrpa drugih značajki previše da kada je u paru s drugim jezicima kao što su CSS i JavaScript, zaista mogu napraviti stranice ističu. Najbolji način da se ugodno s HTML je samo za nered okolo s njim, vidjeti što radi, a što ne. 

Moje ime je Daven Farnham. To je CS50. 

Tako, na primjer, mogu koristiti Klasa slika - No, postoji toliko atributi. Moje ime je Daven Farnham. To je CS 650. Želim reći CSS. To je CSS.