>> Daven Farnham: Astăzi, am de gând să vorbim un pic despre HTML,
Hypertext Markup Language.
Veți vedea HTML peste tot in aceste zile.
De fapt, dacă te uiți la această video într-un browser, esti
văzând HTML chiar acum.
HTML nu este un limbaj de programare, mai degrabă, este un limbaj de marcare utilizat de către
browsere web pentru a închide pagini pe internet.
>> Deci, s-ar putea întreba, cum exact se scrie o pagină web în HTML diferite
de la scrierea unui program într-o programare limbaj ca C?
Ei bine, C este un limbaj cu foarte stricte reguli sintactice care trebuie să fie
compilat înainte de a putea rula.
Dacă v-ați uitat vreodată pentru a include o punct și virgulă la sfârșitul anului o declarație în
codul C, stii despre ce vorbesc despre în ceea ce privește sintaxa strict.
>> Browsere web, deși, sunt un pic mai mult iertându-atunci când vine vorba de HTML.
Chiar dacă HTML-ul nu este punct de vedere sintactic corect, pagina dvs. poate fi încă
afișată de un browser, dar s-ar putea Nu uita așa cum ați intenționat.
Deci, este întotdeauna cel mai bine pentru a respecte regulile.
Cel mai bun mod de a obține o intuiție despre modul în care lucrurile de lucru este de a
du-te printr-un exemplu.
>> Deci, ceea ce avem aici este o bază plan pentru o pagina web.
Probabil ați observat o mulțime de lucruri în între paranteze unghiulare.
Ei bine, acestea sunt doar etichete.
Tags informa practic browsere web că, hei, ceva
este iese în cale.
Amintiți-vă, deși, de fiecare dată când deschideți un tag-ul, aveți nevoie pentru a închide odată ce sunt
face folosind-o.
>> Deci, de exemplu, am deschis o secțiune de cod cu deschis
corp suport, suport aproape.
Apoi m-am adăuga un text, în acest caz, mea prima pagina web, atunci când m-am dus la
închide această secțiune, am folosi aproape un tag identice, cu excepția acest moment, cu o
forward slash înainte de corp.
În general, aceasta este formatul esti va folosi de fiecare dată când se deschide
și tag-uri de închidere.
Împreună, o etichetă deschisă și o etichetă de sfârșit compun ceea ce se numește un element.
>> Dacă te uiți la prima linie, veți a se vedea un semn de exclamare, urmată de
DOCTYPE html.
Acest lucru este într-adevăr spune doar browser-ul dvs. că fișierul este o pagină web
scrise în HTML.
Tag-ul HTML spune, în esență, aici vine unele HTML.
Atunci avem o etichetă cu cap o etichetă titlu în interiorul acestuia.
Tag-ul cap vă puteți gândi ca care cuprinde cod HTML, care vine pentru
cea mai mare parte a paginii web conținut real.
>> În general, ai pus titlul de dvs. pagina web aici, deși există unele
alte tag-uri care pot apărea aici, de asemenea.
Urmează corpul pagina dvs. de web, carne real și oase de site-ul dumneavoastră.
În exemplul nostru, am pus doar o simplă teză prima pagina mea,
care, dacă vom rula site-ul nostru, va arata ceva de genul asta.
Pagina noastră de web nu este prea ciudat, dar nu vă faceți griji.
Vom molid curând.
>> Deci, HTML de mai sus, vă vom oferi o foarte șablon de bază pentru o pagină web,
nimic fantezie, doar oasele goale.
Dar dacă creez o pagină web, ce dacă vreau să adăugați o
imagine de, să zicem, mă?
Ei bine, eu pot face asta.
Există câteva modalități de a adăugați imagini pentru site-ul dumneavoastră.
Dacă imaginea este în același folder ca și fișierul HTML, puteți lega la
imagine prin această rută ca aceasta.
>> Vă deschide cu o etichetă imagine urmat de la atribut Alt în
sursa imaginii.
Valoarea Alt atribut este doar o text alternativ în cazul în care un utilizator nu poate
vedea imaginea.
Alternativ, puteți lega, de asemenea, la imagini prin intermediul unui URL completă, cum ar fi acest lucru.
Acum, că site-ul nu există cu adevărat, dar dacă ar exista o imagine de
mă la acea adresa, am putea folosi URL-ul sursă pentru a include
imaginea de pe site-ul meu.
Oricum, va termina cu un mult site-ul mai frumos, ceva de genul asta.
>> Ei bine, asta e destul de cool, dar am un fel de vrei un text aici, de asemenea.
Așa că hai să adaug ceva super-simplu de mai sus
imagine, cum ar fi antetul.
Tot ce am făcut până acum este să utilizați antetul tag-ul, H1, și un sfârșit de linie tag-ul, br.
Tag-ul antet face fontul un pic pic mai mare și mai proeminent.
Tag-ul sfârșit de linie, pe de altă parte de mână, este un fel de rece.
Spre deosebire de cele mai multe alte tag-uri, nu aveți o etichetă de deschidere și închidere pauză, doar
cel prezentat mai sus.
Acest lucru se datorează faptului că pauza nu are nici un conținut și este, prin urmare, un element gol.
>> Elemente goale ca aceasta, puteți deschide și aproape simultan prin simpla
inclusiv o bară oblică la capăt de declarația inițială.
Deci, acum, site-ul meu arată un pic ceva de genul asta.
Mai bine, dar se simte un fel de ca o fundătură.
Nu ai unde să se ducă la o parte de la aceasta pagina principala.
Ei bine, să se stabilească faptul că prin inclusiv un link.
>> Ceea ce am de gând să fac aici este de a utiliza un atribut notat cu A și de a face
imagine o legătură la, să zicem, CS50 TV.
În acest fel, ori de câte ori cineva face clic pe mine, browser-ul lor va fi direcționat către
un alt, probabil mai mult pagina util, web.
Am avut pentru a reduce mărimea text, un pic, deoarece site-ul nostru este
ce în ce mai avansate.
Dar sperăm, este încă clar.
Site-ul meu arata exact la fel doar acum, ori de câte ori faceți clic pe imagine,
browser-ul meu se va deschide o altă tab-ul pentru pagina de web CS50.tv.
>> În cele din urmă, să spunem că am de gând să stil acest site mai târziu, folosind CSS.
CSS este ceea ce este cunoscut ca o foaie de stil în cascadă.
Și, practic, oferă un mod eficient modalitate de a edita și stil
blocuri similare de cod.
Vreau să încep organizarea HTML meu la face mai ușor de stil mai târziu.
Aici, am înființat două tipuri diferite de de identificare, pentru a ajuta la organizarea codul meu.
Am folosit atributul ID-ul într-un divizare, sau tag-ul div, și am folosit un
Clasa atribut în interiorul un alt tag-ul div.
>> Atributele de identificare și de clasă funcționează în mod similar.
Singura diferenta este ca poti avea doar un element, ID-ul specific, dar
orice număr de elemente pot partaja o clasă.
Deci, de exemplu, pot folosi clasa imagine de mai multe ori, dar eu nu pot
a crea o altă divizie cu partea de sus de identitate.
Deși nu au intrat în CSS, o altă limbă utilizate în mod obișnuit
alături de HTML, odată ce am început styling codul meu cu CSS, pot folosi aceste
atribute de organizare a influența estetica pagina mea de web.
>> Totul în divizia partea de sus va avea stilului similare sau orice
alt grup de grup HTML I în imagine clasă vor împărtăși un aspect similar.
Acest lucru este mult mai ușor decât încercarea de a edita și imagini de stil sau blocuri de
SMS individual.
>> Așa că ne-am dus peste elementele de bază ale cum pentru a face o pagină web cu HTML.
HTML are o grămadă de alte caracteristici prea care atunci când este cuplat cu alte limbi
cum ar fi CSS și JavaScript, poate într-adevăr face pagini iasă în evidență.
Cel mai bun mod de a obține confortabil cu HTML este doar să se încurce cu el,
vedea ce funcționează și ce nu.
>> Numele meu este Daven Farnham.
Acest lucru este CS50.
>> Deci, de exemplu, pot folosi imaginea de clasă -
Nu, există atât de multe atribute.
Numele meu este Daven Farnham.
Aceasta este CS 650.
Vreau să spun CSS.
Acest lucru este CSS.