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

2
00:00:06,986 --> 00:00:10,450
>> DAVEN Farnham: Danas ću
razgovarati malo o HTML-u,

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

4
00:00:12,330 --> 00:00:14,450
Vidite HTML svugdje ovih dana.

5
00:00:14,450 --> 00:00:17,190
U stvari, ako gledate ovo
Video u pregledniku, ti si

6
00:00:17,190 --> 00:00:19,120
gledajući HTML upravo sada.

7
00:00:19,120 --> 00:00:22,760
HTML nije programski jezik,
a, to je jezik za označavanje koristi

8
00:00:22,760 --> 00:00:25,460
web preglednici u davanju stranice
na internetu.

9
00:00:25,460 --> 00:00:30,410
>> Tako da bi se zapitati, kako točno piše
web stranica u HTML-u različita

10
00:00:30,410 --> 00:00:33,574
od pisanja programa u programiranju
jezik poput C?

11
00:00:33,574 --> 00:00:38,010
Pa, C je jezik s vrlo strogim
sintaktičke pravila koja treba biti

12
00:00:38,010 --> 00:00:39,880
sastavio prije nego što može pokrenuti.

13
00:00:39,880 --> 00:00:43,070
Ako ste ikada zaboraviti uključiti
zarez na kraju izjave u

14
00:00:43,070 --> 00:00:46,660
Vaš C kod, znate o čemu pričam
o tome s obzirom na stroge sintakse.

15
00:00:46,660 --> 00:00:50,360
>> Web preglednici iako su malo više
oprostio kada je u pitanju HTML.

16
00:00:50,360 --> 00:00:53,860
Čak i ako je vaš HTML nije sintaktički
točne, vaša stranica i dalje može biti

17
00:00:53,860 --> 00:00:57,150
prikazati u pregledniku, ali to bi moglo
ne izgleda onako kako ste željeli.

18
00:00:57,150 --> 00:00:59,640
Dakle, to je uvijek najbolje
slijediti pravila.

19
00:00:59,640 --> 00:01:01,990
Najbolji način da dobijete intuiciju
o tome kako se stvari rade je da

20
00:01:01,990 --> 00:01:03,300
proći kroz primjer.

21
00:01:03,300 --> 00:01:07,360
>> Dakle, ono što imamo ovdje je osnovni
Nacrt za web-stranicu.

22
00:01:07,360 --> 00:01:10,690
Vjerojatno ste primijetili puno stvari
između ukošene tipkovnici.

23
00:01:10,690 --> 00:01:12,900
Pa, oni su samo oznake.

24
00:01:12,900 --> 00:01:15,810
Tagovi osnovi obavijestite web preglednike
da, hej, nešto

25
00:01:15,810 --> 00:01:17,150
dolazi svoj put.

26
00:01:17,150 --> 00:01:20,770
Sjeti se ipak, svaki put kad otvorite
tag, morate ga zatvoriti nakon što su

27
00:01:20,770 --> 00:01:21,750
učinio ga koristite.

28
00:01:21,750 --> 00:01:24,690
>> Tako na primjer, sam otvoriti poglavlje
koda s otvorenim

29
00:01:24,690 --> 00:01:26,960
Nosač tijela, u neposrednoj blizini zagrada.

30
00:01:26,960 --> 00:01:31,280
I onda dodati neki tekst, u ovom slučaju, moj
Prva web stranica onda kada sam otišao u

31
00:01:31,280 --> 00:01:35,540
zatvoriti ovo poglavlje, koristim gotovo
identični tag osim ovaj put s

32
00:01:35,540 --> 00:01:37,660
kosa crta prije tijela.

33
00:01:37,660 --> 00:01:41,140
U principu, to je format ste
će se koristiti kad god vam se otvaraju

34
00:01:41,140 --> 00:01:42,680
i zatvaranja tagova.

35
00:01:42,680 --> 00:01:47,900
Zajedno, otvoreni tag i end tag
sastaviti ono što se naziva elementa.

36
00:01:47,900 --> 00:01:51,870
>> Ako pogledate na prvoj liniji, vi ćete
vidi uskličnik slijedi

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

38
00:01:53,350 --> 00:01:56,280
To je zapravo samo reći svoj preglednik
da je datoteka je web stranica

39
00:01:56,280 --> 00:01:58,280
napisan u HTML.

40
00:01:58,280 --> 00:02:01,970
HTML tag suštini, kaže,
evo neki HTML.

41
00:02:01,970 --> 00:02:04,950
Onda imamo glavu oznaku s
više oznaka unutar njega.

42
00:02:04,950 --> 00:02:09,430
Glava tag možete misliti kako je
obuhvaća HTML kod koji dolazi

43
00:02:09,430 --> 00:02:12,670
Najveći dio vaše web stranice je
stvarni sadržaj.

44
00:02:12,670 --> 00:02:16,700
>> U principu, stavite naslov vašeg
web stranica ovdje, iako postoje neki

45
00:02:16,700 --> 00:02:19,350
druge oznake koje se pojavljuju
i ovdje.

46
00:02:19,350 --> 00:02:25,020
Zatim slijedi svoju web stranicu tijelo,
Stvarni meso i kosti vaše web stranice.

47
00:02:25,020 --> 00:02:28,910
U našem primjeru, upravo smo stavili jednostavno
rečenica, Moj prvi Web,

48
00:02:28,910 --> 00:02:34,100
koji je, ako ćemo pokrenuti našu stranicu, će izgledati
Malo se nešto ovako.

49
00:02:34,100 --> 00:02:36,810
Naša web-stranica nije previše queer,
, ali ne brinite.

50
00:02:36,810 --> 00:02:39,210
Mi ćemo ga dotjeram uskoro.

51
00:02:39,210 --> 00:02:44,070
>> Dakle iznad HTML, mi ćemo vam dati vrlo
Osnovni predložak za web-stranicu,

52
00:02:44,070 --> 00:02:46,310
ništa fancy, samo gole kosti.

53
00:02:46,310 --> 00:02:49,160
Ali ako sam izrade web stranica,
Što ako želim dodati

54
00:02:49,160 --> 00:02:50,760
slika, recimo, mene?

55
00:02:50,760 --> 00:02:52,760
Pa, ja to mogu.

56
00:02:52,760 --> 00:02:55,460
Postoji nekoliko načina za
dodavanje slika na vaše stranice.

57
00:02:55,460 --> 00:02:59,780
Ako je slika u istoj mapi kao
HTML datoteku, možete se povezati na

58
00:02:59,780 --> 00:03:01,950
image preko puta kao što je ovaj.

59
00:03:01,950 --> 00:03:05,910
>> Možete otvoriti sa slikom oznaku slijedi
by u Alt atribut u

60
00:03:05,910 --> 00:03:07,240
izvor slike.

61
00:03:07,240 --> 00:03:12,030
Vrijednost Alt osobina jest samo neke
alternativni tekst u slučaju da korisnik ne može

62
00:03:12,030 --> 00:03:13,580
pogledajte sliku.

63
00:03:13,580 --> 00:03:19,680
Alternativno, možete povezati
slike preko pune URL, kao što je ovaj.

64
00:03:19,680 --> 00:03:24,180
Sad, da je web stranica zapravo ne postoji,
ali ako je bilo slika

65
00:03:24,180 --> 00:03:27,760
ja na toj adresi, da bih mogao koristiti
Izvor URL uključiti

66
00:03:27,760 --> 00:03:29,930
njegova slika na mojoj web stranici.

67
00:03:29,930 --> 00:03:35,590
Bilo kako bilo, možete završiti s puno
ljepša web stranice, nešto poput ovoga.

68
00:03:35,590 --> 00:03:39,730
>> Pa, to je baš super, ali ja vrsta
od žele neki tekst ovdje.

69
00:03:39,730 --> 00:03:43,020
Tako ćemo samo dodati nešto
super jednostavna iznad

70
00:03:43,020 --> 00:03:45,210
slika, poput napadača.

71
00:03:45,210 --> 00:03:50,830
Sve što sam do sada učinio je koristiti zaglavlje
tag, H1 i prijelom retka tag, br.

72
00:03:50,830 --> 00:03:54,900
Header tag čini font malo
malo veće i izraženije.

73
00:03:54,900 --> 00:03:58,930
Prijelom retka tag, as druge
S druge strane, je vrsta cool.

74
00:03:58,930 --> 00:04:03,720
Za razliku od većine drugih oznaka, nemate
otvaranja i zatvaranja tag pauze, samo

75
00:04:03,720 --> 00:04:05,120
jedan je gore prikazano.

76
00:04:05,120 --> 00:04:10,420
To je zato što je pauza nema sadržaja
i stoga, prazna elementa.

77
00:04:10,420 --> 00:04:14,940
>> Prazni elementi kao što je ovaj, možete otvoriti
i blizu istovremeno jednostavno

78
00:04:14,940 --> 00:04:20,420
uključujući kosom crtom na
kraj početne deklaracije.

79
00:04:20,420 --> 00:04:24,390
Dakle, sada je moja web stranica izgleda malo
nešto kao što je ovaj.

80
00:04:24,390 --> 00:04:27,410
Bolje, ali to vrsta osjeća
kao slijepa ulica.

81
00:04:27,410 --> 00:04:30,850
Tu je kamo otići na stranu
od te glavne stranice.

82
00:04:30,850 --> 00:04:33,075
Pa, neka je popraviti po
uključujući i link.

83
00:04:33,075 --> 00:04:36,860
>> Ono što ću učiniti ovdje je koristiti
atribut obilježeni i učiniti

84
00:04:36,860 --> 00:04:40,780
image link na, recimo, CS50 TV.

85
00:04:40,780 --> 00:04:44,460
Na taj način, kad god bilo tko klikne na mene,
njihov browser će biti usmjerena na

86
00:04:44,460 --> 00:04:47,810
još jedan, vjerojatno više
korisna, web stranica.

87
00:04:47,810 --> 00:04:51,040
Ja sam morao smanjiti veličinu
tekst malo jer je naša web stranica

88
00:04:51,040 --> 00:04:52,470
uzimajući više naprednih.

89
00:04:52,470 --> 00:04:54,590
No, nadamo se, to je još uvijek jasno.

90
00:04:54,590 --> 00:04:59,460
Moja web stranica izgleda točno isti samo
Sada, kad sam kliknite na sliku,

91
00:04:59,460 --> 00:05:04,410
moj browser će otvoriti još jedan
tab za web stranice CS50.tv.

92
00:05:04,410 --> 00:05:08,970
>> Na kraju, recimo da ću stilu
Ova web stranica kasnije pomoću CSS.

93
00:05:08,970 --> 00:05:11,730
CSS je ono što je poznato kao
kaskadno style sheet.

94
00:05:11,730 --> 00:05:15,230
I to u osnovi pruža učinkovit
način urediti i stil

95
00:05:15,230 --> 00:05:16,910
slični blokovi koda.

96
00:05:16,910 --> 00:05:21,290
Želim za početak organiziranja HTML-u
olakšavaju stil kasnije.

97
00:05:21,290 --> 00:05:26,900
Evo, postavio sam dvije različite vrste
identifikatori koji će vam pomoći organizirati moj broj.

98
00:05:26,900 --> 00:05:31,170
Ja sam se ID atribut unutar
podjela, ili div tag, a ja sam se

99
00:05:31,170 --> 00:05:34,120
Klasa atribut unutar
još jedan div tag.

100
00:05:34,120 --> 00:05:37,190
>> ID i klase atribute
rade na sličan način.

101
00:05:37,190 --> 00:05:41,210
Jedina razlika je da možete imati samo
jedan element, specifično ID, ali

102
00:05:41,210 --> 00:05:43,600
bilo koji broj elemenata
mogu dijeliti klase.

103
00:05:43,600 --> 00:05:47,690
Tako, na primjer, mogu koristiti klasu
slika više puta, ali ja ne mogu

104
00:05:47,690 --> 00:05:50,533
stvoriti drugu podjelu
s ID vrhu.

105
00:05:50,533 --> 00:05:54,750
Iako nisam otišao u CSS,
drugi jezik često koristi

106
00:05:54,750 --> 00:05:59,700
uz HTML, kad jednom počne styling
moj broj s CSS, ja mogu koristiti ove

107
00:05:59,700 --> 00:06:03,730
organizacijske atributi na utjecaju
Estetika moje web stranice.

108
00:06:03,730 --> 00:06:07,600
>> Sve u okviru divizije vrhu
će imati slične stilove ili bilo

109
00:06:07,600 --> 00:06:12,010
Druga skupina HTML I. skupine u
Klasa slika će dijeliti sličan izgled.

110
00:06:12,010 --> 00:06:15,700
To je puno lakše nego pokušava izmijeniti
i stil slike ili blokovi

111
00:06:15,700 --> 00:06:17,690
tekst pojedinačno.

112
00:06:17,690 --> 00:06:21,480
>> Tako smo otišli preko osnove kako
napraviti web stranicu s HTML.

113
00:06:21,480 --> 00:06:25,280
HTML ima hrpa drugih značajki previše
da kada je u paru s drugim jezicima

114
00:06:25,280 --> 00:06:29,220
kao što su CSS i JavaScript, zaista mogu
napraviti stranice ističu.

115
00:06:29,220 --> 00:06:32,960
Najbolji način da se ugodno s
HTML je samo za nered okolo s njim,

116
00:06:32,960 --> 00:06:35,120
vidjeti što radi, a što ne.

117
00:06:35,120 --> 00:06:36,570
>> Moje ime je Daven Farnham.

118
00:06:36,570 --> 00:06:37,820
To je CS50.

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

120
00:06:40,640 --> 00:06:45,690
>> Tako, na primjer, mogu koristiti
Klasa slika -

121
00:06:45,690 --> 00:06:48,028
No, postoji toliko atributi.

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

123
00:06:52,500 --> 00:06:53,950
Moje ime je Daven Farnham.

124
00:06:53,950 --> 00:06:58,560
To je CS 650.

125
00:06:58,560 --> 00:06:59,810
Želim reći CSS.

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

127
00:07:02,325 --> 00:07:03,575
To je CSS.

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