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

2
00:00:06,986 --> 00:00:10,450
>> Daven FARNHAM: Tänään aion
puhua hieman HTML,

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

4
00:00:12,330 --> 00:00:14,450
Näet HTML kaikkialla näinä päivinä.

5
00:00:14,450 --> 00:00:17,190
Itse asiassa, jos olet katsomassa tätä
video selaimessa, olet

6
00:00:17,190 --> 00:00:19,120
nähdä HTML juuri nyt.

7
00:00:19,120 --> 00:00:22,760
HTML ei ole ohjelmointikieli,
pikemminkin on käytetty sivunkuvauskieli

8
00:00:22,760 --> 00:00:25,460
selaimet ladata sivut
Internetissä.

9
00:00:25,460 --> 00:00:30,410
>> Joten saatat kysyä, miten tarkalleen on kirjallisesti
Web-sivun HTML eri

10
00:00:30,410 --> 00:00:33,574
kirjoittamasta ohjelman ohjelmointi
kieli kuten C?

11
00:00:33,574 --> 00:00:38,010
No, C on kieli erittäin tiukkoja
syntaktisia sääntöjä, jonka on oltava

12
00:00:38,010 --> 00:00:39,880
koottu ennen kuin se voi ajaa.

13
00:00:39,880 --> 00:00:43,070
Jos olet joskus unohtanut sisällyttää
puolipiste lopussa lausuma

14
00:00:43,070 --> 00:00:46,660
C-koodia, tiedät mistä puhun
noin Suhteen tiukkaa syntaksin.

15
00:00:46,660 --> 00:00:50,360
>> Web-selaimet kuitenkin ovat hieman
anteeksi kun se tulee HTML.

16
00:00:50,360 --> 00:00:53,860
Vaikka HTML ei ole syntaktisesti
oikein, sivu voi silti olla

17
00:00:53,860 --> 00:00:57,150
näytetään selaimessa, mutta se saattaa
ei näytä niin kuin on tarkoitettu.

18
00:00:57,150 --> 00:00:59,640
Joten se on aina parasta
noudattaa sääntöjä.

19
00:00:59,640 --> 00:01:01,990
Paras tapa saada intuitiota
siitä, miten asiat toimivat, on

20
00:01:01,990 --> 00:01:03,300
läpi esimerkki.

21
00:01:03,300 --> 00:01:07,360
>> Joten mitä meillä täällä on perus
suunnitelma Web-sivun.

22
00:01:07,360 --> 00:01:10,690
Olet varmaan huomannut paljon asioita
välillä kulma suluissa.

23
00:01:10,690 --> 00:01:12,900
No, nämä ovat vain tageja.

24
00:01:12,900 --> 00:01:15,810
Tunnisteet periaatteessa ilmoitettava selaimet
että, hei, jotain

25
00:01:15,810 --> 00:01:17,150
on tulossa teidän tavoin.

26
00:01:17,150 --> 00:01:20,770
Muista kuitenkin, kun avaat
tag, sinun täytyy sulkea se kerran olet

27
00:01:20,770 --> 00:01:21,750
lopettanut sen käyttämisen.

28
00:01:21,750 --> 00:01:24,690
>> Niinpä esimerkiksi, avaan jakso
koodia auki

29
00:01:24,690 --> 00:01:26,960
kiinnike elin, loppusulkumerkki.

30
00:01:26,960 --> 00:01:31,280
Sitten lisätä tekstiä, tässä tapauksessa minun
ensimmäinen Web-sivu sitten kun menin

31
00:01:31,280 --> 00:01:35,540
sulje tämä, käytän melkein
identtinen tag paitsi tällä kertaa

32
00:01:35,540 --> 00:01:37,660
vinoviiva ennen ruumiin.

33
00:01:37,660 --> 00:01:41,140
Yleensä tämä on muotoa olet
aio käyttää aina, kun avaat

34
00:01:41,140 --> 00:01:42,680
ja loppumerkinnät.

35
00:01:42,680 --> 00:01:47,900
Yhdessä avoin koodi ja lopputunniste
säveltää mitä kutsutaan elementin.

36
00:01:47,900 --> 00:01:51,870
>> Jos tarkastellaan ensimmäistä riviä, sinun
katso huutomerkki seuraa

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

38
00:01:53,350 --> 00:01:56,280
Tämä on oikeastaan ​​vain kertoo selaimen
että tiedosto on web-sivu

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

40
00:01:58,280 --> 00:02:01,970
HTML-tunniste lähinnä kertoo,
tässä tulee joitakin HTML.

41
00:02:01,970 --> 00:02:04,950
Sitten meillä on pää tag
otsikko tag sisällä.

42
00:02:04,950 --> 00:02:09,430
Pää tag voit ajatella niin
käsittää HTML-koodi, joka tulee varten

43
00:02:09,430 --> 00:02:12,670
Suurin osa web-sivun
todellista sisältöä.

44
00:02:12,670 --> 00:02:16,700
>> Yleensä laitat otsikko
Web-sivu täällä, vaikka joitakin

45
00:02:16,700 --> 00:02:19,350
muut tunnisteet, joita saattaa esiintyä
myös täällä.

46
00:02:19,350 --> 00:02:25,020
Seuraavaksi tulee Web-sivun ruumis,
Varsinainen lihan ja luiden sivuston.

47
00:02:25,020 --> 00:02:28,910
Tässä esimerkissä olemme vain laittaa yksinkertaisen
virke, My First Verkkosivun,

48
00:02:28,910 --> 00:02:34,100
joka, jos hoidamme sivusto, näyttää
vähän jotain tällaista.

49
00:02:34,100 --> 00:02:36,810
Meidän web-sivu ei ole liian queer,
mutta ei hätää.

50
00:02:36,810 --> 00:02:39,210
Me kuusen sitä pian.

51
00:02:39,210 --> 00:02:44,070
>> Joten yllä HTML, annamme sinulle erittäin
perus malli web-sivun,

52
00:02:44,070 --> 00:02:46,310
ei mitään fancy, vain paljain luut.

53
00:02:46,310 --> 00:02:49,160
Mutta jos olen luoda web-sivun,
mitä jos haluan lisätä

54
00:02:49,160 --> 00:02:50,760
kuva vaikkapa itse?

55
00:02:50,760 --> 00:02:52,760
No, voin tehdä sen.

56
00:02:52,760 --> 00:02:55,460
On olemassa pari tapaa
lisätä kuvia sivuston.

57
00:02:55,460 --> 00:02:59,780
Jos kuva on samassa kansiossa kuin
HTML-tiedoston, voit linkittää

58
00:02:59,780 --> 00:03:01,950
Kuvan kautta polku näin.

59
00:03:01,950 --> 00:03:05,910
>> Avaat kanssa kuvan tag jälkeen
in Alt määritteen

60
00:03:05,910 --> 00:03:07,240
kuvan lähdettä.

61
00:03:07,240 --> 00:03:12,030
Alt määritteen arvo on vain muutamia
vaihtoehtoista tekstiä, jos käyttäjä ei voi

62
00:03:12,030 --> 00:03:13,580
katso kuva.

63
00:03:13,580 --> 00:03:19,680
Vaihtoehtoisesti voit myös linkittää
kuvien kautta koko URL, kuten tämä.

64
00:03:19,680 --> 00:03:24,180
Nyt, että sivusto ei todellisuudessa ole olemassa,
mutta jos siellä oli kuva

65
00:03:24,180 --> 00:03:27,760
minua kyseisessä osoitteessa, voisin käyttää
lähde URL sisällyttää

66
00:03:27,760 --> 00:03:29,930
sen kuvan sivuilleni.

67
00:03:29,930 --> 00:03:35,590
Joko niin, voit päätyä paljon
kauniimpi sivusto, jotain tällaista.

68
00:03:35,590 --> 00:03:39,730
>> No, se on aika siistiä, mutta olen sellainen
ja haluavat jotain tekstiä täällä.

69
00:03:39,730 --> 00:03:43,020
Joten haluan vain lisätä jotain
Super yksinkertainen yläpuolella

70
00:03:43,020 --> 00:03:45,210
kuva, kuten otsikossa.

71
00:03:45,210 --> 00:03:50,830
Kaikki olen tehnyt tähän mennessä on käyttää header
tag, H1, ja rivinvaihdon tag, br.

72
00:03:50,830 --> 00:03:54,900
Header tag tekee fontti hieman
vähän isompi ja näkyvämpi.

73
00:03:54,900 --> 00:03:58,930
Rivinvaihdon tag toisaalta
taas on eräänlainen jäähtyä.

74
00:03:58,930 --> 00:04:03,720
Toisin kuin useimmat muut tunnisteet, sinun ei tarvitse
avaaminen ja sulkeminen tauko tag, vain

75
00:04:03,720 --> 00:04:05,120
yllä esitetystä.

76
00:04:05,120 --> 00:04:10,420
Tämä johtuu siitä, että tauko ei ole sisältöä
ja on näin ollen tyhjän elementin.

77
00:04:10,420 --> 00:04:14,940
>> Tyhjät elementit kuten tämä, voit avata
ja lähellä samanaikaisesti yksinkertaisesti

78
00:04:14,940 --> 00:04:20,420
lukien vinoviiva at
loppuun alkuperäisestä ilmoituksesta.

79
00:04:20,420 --> 00:04:24,390
Joten nyt minun verkkosivuilla näyttää hieman
jotain tällaista.

80
00:04:24,390 --> 00:04:27,410
Parempi, mutta se tavallaan tuntuu
kuin umpikujaan.

81
00:04:27,410 --> 00:04:30,850
Ei missään muualla mennä sivuun
Tämän pääsivulla.

82
00:04:30,850 --> 00:04:33,075
No, korjata, että
myös linkki.

83
00:04:33,075 --> 00:04:36,860
>> Mitä aion tehdä tässä käyttää
Yhdistän merkitty ja tehdä

84
00:04:36,860 --> 00:04:40,780
kuva linkki, sanotaanko, CS50 TV.

85
00:04:40,780 --> 00:04:44,460
Näin kun joku napsauttaa minua,
niiden selain ohjautuu

86
00:04:44,460 --> 00:04:47,810
toinen, luultavasti enemmän
hyödyllisiä, web-sivun.

87
00:04:47,810 --> 00:04:51,040
Minulla on ollut minimoida koko
tekstiin vähän, koska meidän web-sivu on

88
00:04:51,040 --> 00:04:52,470
tulossa kehittyneempiä.

89
00:04:52,470 --> 00:04:54,590
Mutta toivottavasti se on silti selvä.

90
00:04:54,590 --> 00:04:59,460
Oma sivusto näyttää samalta vain
nyt, kun olen klikkaa kuvaa,

91
00:04:59,460 --> 00:05:04,410
selain avaa toisen
välilehti CS50.tv sivun.

92
00:05:04,410 --> 00:05:08,970
>> Lopuksi sanokaamme aion tyyli
Tällä sivustolla myöhemmin CSS.

93
00:05:08,970 --> 00:05:11,730
CSS on se, mitä kutsutaan
CSS tyylisivu.

94
00:05:11,730 --> 00:05:15,230
Ja se pohjimmiltaan tarjoaa tehokkaan
tapa muokata ja tyyli

95
00:05:15,230 --> 00:05:16,910
samanlaiset lohkot koodia.

96
00:05:16,910 --> 00:05:21,290
Haluan aloittaa järjestelemään HTML
on helpompi muotoilla myöhemmin.

97
00:05:21,290 --> 00:05:26,900
Täällä olen perustaa kaksi erilaista
tunnisteet auttaa järjestämään minun koodi.

98
00:05:26,900 --> 00:05:31,170
Olen käyttänyt tunnus-määritteen sisällä
alueeseen tai div tag, ja olen käyttänyt

99
00:05:31,170 --> 00:05:34,120
Luokan attribuutti sisällä
toinen div tag.

100
00:05:34,120 --> 00:05:37,190
>> ID ja luokan attribuutit
toimivat samalla.

101
00:05:37,190 --> 00:05:41,210
Ainoa ero on, voi olla vain
yksi tekijä, erityinen tunnus, mutta

102
00:05:41,210 --> 00:05:43,600
mikä tahansa määrä elementtejä
voi jakaa luokassa.

103
00:05:43,600 --> 00:05:47,690
Niinpä esimerkiksi, voin käyttää luokan
kuva useita kertoja, mutta en voi

104
00:05:47,690 --> 00:05:50,533
luo toiselle osastolle
ID-top.

105
00:05:50,533 --> 00:05:54,750
Vaikka en ole mennyt CSS,
toinen kieli yleisesti käytetty

106
00:05:54,750 --> 00:05:59,700
rinnalla HTML, kun aloitan muotoilu
minun koodi CSS, voin käyttää näitä

107
00:05:59,700 --> 00:06:03,730
organisatoriset määritteet vaikutusvaltaa
Web-sivun estetiikkaa.

108
00:06:03,730 --> 00:06:07,600
>> Kaiken divisioonan alkuun
ovat samanlaiset stylings tai

109
00:06:07,600 --> 00:06:12,010
Muitten HTML I ryhmän osaksi
luokan kuva jakavat samanlaisen ilmeen.

110
00:06:12,010 --> 00:06:15,700
Tämä on paljon helpompaa kuin yrittää muokata
ja tyyli kuvia tai lohkojen

111
00:06:15,700 --> 00:06:17,690
tekstiä erikseen.

112
00:06:17,690 --> 00:06:21,480
>> Niinpä menimme yli perusasiat, miten
tehdä Web-sivun HTML.

113
00:06:21,480 --> 00:06:25,280
HTML on joukko muita ominaisuuksia myös
että kun pariksi muilla kielillä

114
00:06:25,280 --> 00:06:29,220
kuten CSS ja JavaScript, voi todella
tehdä sivut erottuvat.

115
00:06:29,220 --> 00:06:32,960
Paras tapa totutella
HTML on vain pelleillä sen kanssa,

116
00:06:32,960 --> 00:06:35,120
nähdä, mikä toimii ja mikä ei.

117
00:06:35,120 --> 00:06:36,570
>> Nimeni on Daven Farnham.

118
00:06:36,570 --> 00:06:37,820
Tämä on CS50.

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

120
00:06:40,640 --> 00:06:45,690
>> Niinpä esimerkiksi, voin käyttää
luokan kuva -

121
00:06:45,690 --> 00:06:48,028
Ei, on niin paljon ominaisuuksia.

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

123
00:06:52,500 --> 00:06:53,950
Nimeni on Daven Farnham.

124
00:06:53,950 --> 00:06:58,560
Tämä on CS-650.

125
00:06:58,560 --> 00:06:59,810
Haluan sanoa CSS.

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

127
00:07:02,325 --> 00:07:03,575
Tämä on CSS.

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