1
00:00:00,000 --> 00:00:06,986

2
00:00:06,986 --> 00:00:10,450
>> Daven Farnham: Astăzi, am de gând să
vorbim un pic despre HTML,

3
00:00:10,450 --> 00:00:12,330
Hypertext Markup Language.

4
00:00:12,330 --> 00:00:14,450
Veți vedea HTML peste tot in aceste zile.

5
00:00:14,450 --> 00:00:17,190
De fapt, dacă te uiți la această
video într-un browser, esti

6
00:00:17,190 --> 00:00:19,120
văzând HTML chiar acum.

7
00:00:19,120 --> 00:00:22,760
HTML nu este un limbaj de programare,
mai degrabă, este un limbaj de marcare utilizat de către

8
00:00:22,760 --> 00:00:25,460
browsere web pentru a închide pagini
pe internet.

9
00:00:25,460 --> 00:00:30,410
>> Deci, s-ar putea întreba, cum exact se scrie
o pagină web în HTML diferite

10
00:00:30,410 --> 00:00:33,574
de la scrierea unui program într-o programare
limbaj ca C?

11
00:00:33,574 --> 00:00:38,010
Ei bine, C este un limbaj cu foarte stricte
reguli sintactice care trebuie să fie

12
00:00:38,010 --> 00:00:39,880
compilat înainte de a putea rula.

13
00:00:39,880 --> 00:00:43,070
Dacă v-ați uitat vreodată pentru a include o
punct și virgulă la sfârșitul anului o declarație în

14
00:00:43,070 --> 00:00:46,660
codul C, stii despre ce vorbesc
despre în ceea ce privește sintaxa strict.

15
00:00:46,660 --> 00:00:50,360
>> Browsere web, deși, sunt un pic mai mult
iertându-atunci când vine vorba de HTML.

16
00:00:50,360 --> 00:00:53,860
Chiar dacă HTML-ul nu este punct de vedere sintactic
corect, pagina dvs. poate fi încă

17
00:00:53,860 --> 00:00:57,150
afișată de un browser, dar s-ar putea
Nu uita așa cum ați intenționat.

18
00:00:57,150 --> 00:00:59,640
Deci, este întotdeauna cel mai bine pentru a
respecte regulile.

19
00:00:59,640 --> 00:01:01,990
Cel mai bun mod de a obține o intuiție
despre modul în care lucrurile de lucru este de a

20
00:01:01,990 --> 00:01:03,300
du-te printr-un exemplu.

21
00:01:03,300 --> 00:01:07,360
>> Deci, ceea ce avem aici este o bază
plan pentru o pagina web.

22
00:01:07,360 --> 00:01:10,690
Probabil ați observat o mulțime de lucruri
în între paranteze unghiulare.

23
00:01:10,690 --> 00:01:12,900
Ei bine, acestea sunt doar etichete.

24
00:01:12,900 --> 00:01:15,810
Tags informa practic browsere web
că, hei, ceva

25
00:01:15,810 --> 00:01:17,150
este iese în cale.

26
00:01:17,150 --> 00:01:20,770
Amintiți-vă, deși, de fiecare dată când deschideți un
tag-ul, aveți nevoie pentru a închide odată ce sunt

27
00:01:20,770 --> 00:01:21,750
face folosind-o.

28
00:01:21,750 --> 00:01:24,690
>> Deci, de exemplu, am deschis o secțiune
de cod cu deschis

29
00:01:24,690 --> 00:01:26,960
corp suport, suport aproape.

30
00:01:26,960 --> 00:01:31,280
Apoi m-am adăuga un text, în acest caz, mea
prima pagina web, atunci când m-am dus la

31
00:01:31,280 --> 00:01:35,540
închide această secțiune, am folosi aproape un
tag identice, cu excepția acest moment, cu o

32
00:01:35,540 --> 00:01:37,660
forward slash înainte de corp.

33
00:01:37,660 --> 00:01:41,140
În general, aceasta este formatul esti
va folosi de fiecare dată când se deschide

34
00:01:41,140 --> 00:01:42,680
și tag-uri de închidere.

35
00:01:42,680 --> 00:01:47,900
Împreună, o etichetă deschisă și o etichetă de sfârșit
compun ceea ce se numește un element.

36
00:01:47,900 --> 00:01:51,870
>> Dacă te uiți la prima linie, veți
a se vedea un semn de exclamare, urmată de

37
00:01:51,870 --> 00:01:53,350
DOCTYPE html.

38
00:01:53,350 --> 00:01:56,280
Acest lucru este într-adevăr spune doar browser-ul dvs.
că fișierul este o pagină web

39
00:01:56,280 --> 00:01:58,280
scrise în HTML.

40
00:01:58,280 --> 00:02:01,970
Tag-ul HTML spune, în esență,
aici vine unele HTML.

41
00:02:01,970 --> 00:02:04,950
Atunci avem o etichetă cu cap
o etichetă titlu în interiorul acestuia.

42
00:02:04,950 --> 00:02:09,430
Tag-ul cap vă puteți gândi ca
care cuprinde cod HTML, care vine pentru

43
00:02:09,430 --> 00:02:12,670
cea mai mare parte a paginii web
conținut real.

44
00:02:12,670 --> 00:02:16,700
>> În general, ai pus titlul de dvs.
pagina web aici, deși există unele

45
00:02:16,700 --> 00:02:19,350
alte tag-uri care pot apărea
aici, de asemenea.

46
00:02:19,350 --> 00:02:25,020
Urmează corpul pagina dvs. de web,
carne real și oase de site-ul dumneavoastră.

47
00:02:25,020 --> 00:02:28,910
În exemplul nostru, am pus doar o simplă
teză prima pagina mea,

48
00:02:28,910 --> 00:02:34,100
care, dacă vom rula site-ul nostru, va arata
ceva de genul asta.

49
00:02:34,100 --> 00:02:36,810
Pagina noastră de web nu este prea ciudat,
dar nu vă faceți griji.

50
00:02:36,810 --> 00:02:39,210
Vom molid curând.

51
00:02:39,210 --> 00:02:44,070
>> Deci, HTML de mai sus, vă vom oferi o foarte
șablon de bază pentru o pagină web,

52
00:02:44,070 --> 00:02:46,310
nimic fantezie, doar oasele goale.

53
00:02:46,310 --> 00:02:49,160
Dar dacă creez o pagină web,
ce dacă vreau să adăugați o

54
00:02:49,160 --> 00:02:50,760
imagine de, să zicem, mă?

55
00:02:50,760 --> 00:02:52,760
Ei bine, eu pot face asta.

56
00:02:52,760 --> 00:02:55,460
Există câteva modalități de a
adăugați imagini pentru site-ul dumneavoastră.

57
00:02:55,460 --> 00:02:59,780
Dacă imaginea este în același folder ca și
fișierul HTML, puteți lega la

58
00:02:59,780 --> 00:03:01,950
imagine prin această rută ca aceasta.

59
00:03:01,950 --> 00:03:05,910
>> Vă deschide cu o etichetă imagine urmat
de la atribut Alt în

60
00:03:05,910 --> 00:03:07,240
sursa imaginii.

61
00:03:07,240 --> 00:03:12,030
Valoarea Alt atribut este doar o
text alternativ în cazul în care un utilizator nu poate

62
00:03:12,030 --> 00:03:13,580
vedea imaginea.

63
00:03:13,580 --> 00:03:19,680
Alternativ, puteți lega, de asemenea, la
imagini prin intermediul unui URL completă, cum ar fi acest lucru.

64
00:03:19,680 --> 00:03:24,180
Acum, că site-ul nu există cu adevărat,
dar dacă ar exista o imagine de

65
00:03:24,180 --> 00:03:27,760
mă la acea adresa, am putea folosi
URL-ul sursă pentru a include

66
00:03:27,760 --> 00:03:29,930
imaginea de pe site-ul meu.

67
00:03:29,930 --> 00:03:35,590
Oricum, va termina cu un mult
site-ul mai frumos, ceva de genul asta.

68
00:03:35,590 --> 00:03:39,730
>> Ei bine, asta e destul de cool, dar am un fel
de vrei un text aici, de asemenea.

69
00:03:39,730 --> 00:03:43,020
Așa că hai să adaug ceva
super-simplu de mai sus

70
00:03:43,020 --> 00:03:45,210
imagine, cum ar fi antetul.

71
00:03:45,210 --> 00:03:50,830
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.

72
00:03:50,830 --> 00:03:54,900
Tag-ul antet face fontul un pic
pic mai mare și mai proeminent.

73
00:03:54,900 --> 00:03:58,930
Tag-ul sfârșit de linie, pe de altă parte
de mână, este un fel de rece.

74
00:03:58,930 --> 00:04:03,720
Spre deosebire de cele mai multe alte tag-uri, nu aveți
o etichetă de deschidere și închidere pauză, doar

75
00:04:03,720 --> 00:04:05,120
cel prezentat mai sus.

76
00:04:05,120 --> 00:04:10,420
Acest lucru se datorează faptului că pauza nu are nici un conținut
și este, prin urmare, un element gol.

77
00:04:10,420 --> 00:04:14,940
>> Elemente goale ca aceasta, puteți deschide
și aproape simultan prin simpla

78
00:04:14,940 --> 00:04:20,420
inclusiv o bară oblică la
capăt de declarația inițială.

79
00:04:20,420 --> 00:04:24,390
Deci, acum, site-ul meu arată un pic
ceva de genul asta.

80
00:04:24,390 --> 00:04:27,410
Mai bine, dar se simte un fel de
ca o fundătură.

81
00:04:27,410 --> 00:04:30,850
Nu ai unde să se ducă la o parte
de la aceasta pagina principala.

82
00:04:30,850 --> 00:04:33,075
Ei bine, să se stabilească faptul că prin
inclusiv un link.

83
00:04:33,075 --> 00:04:36,860
>> Ceea ce am de gând să fac aici este de a utiliza un
atribut notat cu A și de a face

84
00:04:36,860 --> 00:04:40,780
imagine o legătură la, să zicem, CS50 TV.

85
00:04:40,780 --> 00:04:44,460
În acest fel, ori de câte ori cineva face clic pe mine,
browser-ul lor va fi direcționat către

86
00:04:44,460 --> 00:04:47,810
un alt, probabil mai mult
pagina util, web.

87
00:04:47,810 --> 00:04:51,040
Am avut pentru a reduce mărimea
text, un pic, deoarece site-ul nostru este

88
00:04:51,040 --> 00:04:52,470
ce în ce mai avansate.

89
00:04:52,470 --> 00:04:54,590
Dar sperăm, este încă clar.

90
00:04:54,590 --> 00:04:59,460
Site-ul meu arata exact la fel doar
acum, ori de câte ori faceți clic pe imagine,

91
00:04:59,460 --> 00:05:04,410
browser-ul meu se va deschide o altă
tab-ul pentru pagina de web CS50.tv.

92
00:05:04,410 --> 00:05:08,970
>> În cele din urmă, să spunem că am de gând să stil
acest site mai târziu, folosind CSS.

93
00:05:08,970 --> 00:05:11,730
CSS este ceea ce este cunoscut ca o
foaie de stil în cascadă.

94
00:05:11,730 --> 00:05:15,230
Și, practic, oferă un mod eficient
modalitate de a edita și stil

95
00:05:15,230 --> 00:05:16,910
blocuri similare de cod.

96
00:05:16,910 --> 00:05:21,290
Vreau să încep organizarea HTML meu la
face mai ușor de stil mai târziu.

97
00:05:21,290 --> 00:05:26,900
Aici, am înființat două tipuri diferite de
de identificare, pentru a ajuta la organizarea codul meu.

98
00:05:26,900 --> 00:05:31,170
Am folosit atributul ID-ul într-un
divizare, sau tag-ul div, și am folosit un

99
00:05:31,170 --> 00:05:34,120
Clasa atribut în interiorul
un alt tag-ul div.

100
00:05:34,120 --> 00:05:37,190
>> Atributele de identificare și de clasă
funcționează în mod similar.

101
00:05:37,190 --> 00:05:41,210
Singura diferenta este ca poti avea doar
un element, ID-ul specific, dar

102
00:05:41,210 --> 00:05:43,600
orice număr de elemente
pot partaja o clasă.

103
00:05:43,600 --> 00:05:47,690
Deci, de exemplu, pot folosi clasa
imagine de mai multe ori, dar eu nu pot

104
00:05:47,690 --> 00:05:50,533
a crea o altă divizie
cu partea de sus de identitate.

105
00:05:50,533 --> 00:05:54,750
Deși nu au intrat în CSS,
o altă limbă utilizate în mod obișnuit

106
00:05:54,750 --> 00:05:59,700
alături de HTML, odată ce am început styling
codul meu cu CSS, pot folosi aceste

107
00:05:59,700 --> 00:06:03,730
atribute de organizare a influența
estetica pagina mea de web.

108
00:06:03,730 --> 00:06:07,600
>> Totul în divizia partea de sus
va avea stilului similare sau orice

109
00:06:07,600 --> 00:06:12,010
alt grup de grup HTML I în
imagine clasă vor împărtăși un aspect similar.

110
00:06:12,010 --> 00:06:15,700
Acest lucru este mult mai ușor decât încercarea de a edita
și imagini de stil sau blocuri de

111
00:06:15,700 --> 00:06:17,690
SMS individual.

112
00:06:17,690 --> 00:06:21,480
>> Așa că ne-am dus peste elementele de bază ale cum
pentru a face o pagină web cu HTML.

113
00:06:21,480 --> 00:06:25,280
HTML are o grămadă de alte caracteristici prea
care atunci când este cuplat cu alte limbi

114
00:06:25,280 --> 00:06:29,220
cum ar fi CSS și JavaScript, poate într-adevăr
face pagini iasă în evidență.

115
00:06:29,220 --> 00:06:32,960
Cel mai bun mod de a obține confortabil cu
HTML este doar să se încurce cu el,

116
00:06:32,960 --> 00:06:35,120
vedea ce funcționează și ce nu.

117
00:06:35,120 --> 00:06:36,570
>> Numele meu este Daven Farnham.

118
00:06:36,570 --> 00:06:37,820
Acest lucru este CS50.

119
00:06:37,820 --> 00:06:40,640

120
00:06:40,640 --> 00:06:45,690
>> Deci, de exemplu, pot folosi
imaginea de clasă -

121
00:06:45,690 --> 00:06:48,028
Nu, există atât de multe atribute.

122
00:06:48,028 --> 00:06:52,500

123
00:06:52,500 --> 00:06:53,950
Numele meu este Daven Farnham.

124
00:06:53,950 --> 00:06:58,560
Aceasta este CS 650.

125
00:06:58,560 --> 00:06:59,810
Vreau să spun CSS.

126
00:06:59,810 --> 00:07:02,325

127
00:07:02,325 --> 00:07:03,575
Acest lucru este CSS.

128
00:07:03,575 --> 00:07:05,408