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

2
00:00:06,986 --> 00:00:10,450
>> Daven FARNHAM: Avui en dia, vaig a
parlar una mica sobre HTML,

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

4
00:00:12,330 --> 00:00:14,450
Vostè veu HTML a tot arreu aquests dies.

5
00:00:14,450 --> 00:00:17,190
De fet, si estàs veient això
vídeo en un navegador, tens

6
00:00:17,190 --> 00:00:19,120
veure HTML a hores d'ara.

7
00:00:19,120 --> 00:00:22,760
HTML no és un llenguatge de programació,
més aviat, és un llenguatge de marques utilitzat per

8
00:00:22,760 --> 00:00:25,460
navegadors web per fer les pàgines
a l'Internet.

9
00:00:25,460 --> 00:00:30,410
>> Així que vostè pot preguntar, com és exactament està escrivint
una pàgina web en HTML diferent

10
00:00:30,410 --> 00:00:33,574
d'escriure un programa en una programació
llenguatge com C?

11
00:00:33,574 --> 00:00:38,010
Bé, C és un llenguatge amb molt estricte
regles sintàctiques que necessita ser

12
00:00:38,010 --> 00:00:39,880
compilat abans que pugui funcionar.

13
00:00:39,880 --> 00:00:43,070
Si alguna vegada t'has oblidat d'incloure una
punt i coma al final d'una sentència en

14
00:00:43,070 --> 00:00:46,660
el codi C, ja saps el que estic parlant
sobre pel que fa a la sintaxi estricta.

15
00:00:46,660 --> 00:00:50,360
>> Navegadors web, però, són una mica més
perdonar quan es tracta d'HTML.

16
00:00:50,360 --> 00:00:53,860
Fins i tot si el seu HTML no és sintàcticament
correcta, la pàgina pot estar encara

17
00:00:53,860 --> 00:00:57,150
mostrat per un navegador, però pot ser que
No miri com es pretenia.

18
00:00:57,150 --> 00:00:59,640
Per tant, sempre és millor
seguir les regles.

19
00:00:59,640 --> 00:01:01,990
La millor manera d'aconseguir una intuïció
sobre com funcionen les coses és

20
00:01:01,990 --> 00:01:03,300
anar a través d'un exemple.

21
00:01:03,300 --> 00:01:07,360
>> Així que el que tenim aquí és un bàsic
avantprojecte per a una pàgina web.

22
00:01:07,360 --> 00:01:10,690
Vostè probablement ha notat un munt de coses
entre parèntesis angulars.

23
00:01:10,690 --> 00:01:12,900
Bé, aquests són només etiquetes.

24
00:01:12,900 --> 00:01:15,810
Etiquetes bàsicament informen els navegadors web
que, bé, alguna cosa

25
00:01:15,810 --> 00:01:17,150
està arribant a la seva manera.

26
00:01:17,150 --> 00:01:20,770
Recordeu, però, cada vegada que s'obre un
etiqueta, cal tancar quan estigui

27
00:01:20,770 --> 00:01:21,750
fet d'usar-lo.

28
00:01:21,750 --> 00:01:24,690
>> Així, per exemple, obro una secció
de codi obert amb

29
00:01:24,690 --> 00:01:26,960
cos de suport, claudàtor de tancament.

30
00:01:26,960 --> 00:01:31,280
Després afegir una mica de text, en aquest cas, el meu
primera pàgina web, llavors quan vaig anar a

31
00:01:31,280 --> 00:01:35,540
tanca aquesta secció, utilitzo gairebé una
etiqueta idèntica excepte que aquesta vegada amb una

32
00:01:35,540 --> 00:01:37,660
barra diagonal abans de cos.

33
00:01:37,660 --> 00:01:41,140
En general, aquest és el format que està
utilitzarà cada vegada que va a obrir

34
00:01:41,140 --> 00:01:42,680
i el tancament de les etiquetes.

35
00:01:42,680 --> 00:01:47,900
En conjunt, una etiqueta oberta i una etiqueta de tancament
compondre el que s'anomena un element.

36
00:01:47,900 --> 00:01:51,870
>> Si ens fixem en la primera línia, se li
veure un signe d'exclamació seguit de

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

38
00:01:53,350 --> 00:01:56,280
Això és realment només comptant seu navegador
que l'arxiu és una pàgina web

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

40
00:01:58,280 --> 00:02:01,970
El tag HTML essencialment diu,
aquí ve una mica d'HTML.

41
00:02:01,970 --> 00:02:04,950
Llavors tenim una etiqueta del cap amb
una etiqueta de títol al seu interior.

42
00:02:04,950 --> 00:02:09,430
L'etiqueta del cap es pot pensar en com
que comprèn un codi HTML que ve de

43
00:02:09,430 --> 00:02:12,670
la major part de la seva web la pàgina de
contingut real.

44
00:02:12,670 --> 00:02:16,700
>> En general, es posa el títol de la seva
pàgina web aquí, encara que hi ha alguns

45
00:02:16,700 --> 00:02:19,350
altres etiquetes que poden aparèixer
aquí també.

46
00:02:19,350 --> 00:02:25,020
Després ve el cos de la seva pàgina web, l'
carn real i els ossos del seu lloc web.

47
00:02:25,020 --> 00:02:28,910
En el nostre exemple, acabem de posar un senzill
frase, la meva primera pàgina web,

48
00:02:28,910 --> 00:02:34,100
que, si ens quedem sense el nostre lloc, es veurà
una mica d'alguna cosa com això.

49
00:02:34,100 --> 00:02:36,810
La nostra pàgina web no és massa estrany,
però no et preocupis.

50
00:02:36,810 --> 00:02:39,210
Anem a donar-li sabor aviat.

51
00:02:39,210 --> 00:02:44,070
>> Així que l'HTML anterior, li donarem una molt
plantilla bàsica per a una pàgina web,

52
00:02:44,070 --> 00:02:46,310
res especial, només l'esquelet.

53
00:02:46,310 --> 00:02:49,160
Però si estic creant una pàgina web,
Què passa si vull afegir un

54
00:02:49,160 --> 00:02:50,760
foto de, per exemple, a mi mateix?

55
00:02:50,760 --> 00:02:52,760
Bé, jo puc fer això.

56
00:02:52,760 --> 00:02:55,460
Hi ha un parell de maneres de
afegir imatges al seu lloc.

57
00:02:55,460 --> 00:02:59,780
Si la imatge està en la mateixa carpeta que
seu arxiu HTML, es pot enllaçar amb el

58
00:02:59,780 --> 00:03:01,950
imatge a través del camí com aquest.

59
00:03:01,950 --> 00:03:05,910
>> Vostè obre amb una etiqueta d'imatge seguit
per a l'atribut Alt al

60
00:03:05,910 --> 00:03:07,240
font de la imatge.

61
00:03:07,240 --> 00:03:12,030
El valor de l'atribut Alt és només un
text alternatiu en cas que un usuari no pot

62
00:03:12,030 --> 00:03:13,580
veure la imatge.

63
00:03:13,580 --> 00:03:19,680
Alternativament, també pot enllaçar a
imatges a través d'una adreça URL completa, els agrada.

64
00:03:19,680 --> 00:03:24,180
Ara, aquest lloc web en realitat no existeix,
però si hi havia una imatge de

65
00:03:24,180 --> 00:03:27,760
jo en aquesta direcció, heu
l'adreça d'origen per incloure

66
00:03:27,760 --> 00:03:29,930
la seva imatge a la pàgina web.

67
00:03:29,930 --> 00:03:35,590
De qualsevol manera, vostè acaba amb una gran
lloc més bonic, alguna cosa com això.

68
00:03:35,590 --> 00:03:39,730
>> Bé, això és molt bo, però jo tipus
de voler algun text aquí també.

69
00:03:39,730 --> 00:03:43,020
Així que anem a afegir alguna cosa
super senzill per sobre de la

70
00:03:43,020 --> 00:03:45,210
imatge, igual que la capçalera.

71
00:03:45,210 --> 00:03:50,830
Tot el que he fet fins ara és utilitzar la capçalera
etiqueta, H1, i un salt de línia d'etiquetes, br.

72
00:03:50,830 --> 00:03:54,900
L'etiqueta de capçalera fa que el tipus de lletra una mica
mica més gran i més prominent.

73
00:03:54,900 --> 00:03:58,930
L'etiqueta de salt de línia, d'altra
banda, és una mena de fresc.

74
00:03:58,930 --> 00:04:03,720
A diferència de la majoria de les altres etiquetes, que no té
una etiqueta d'obertura i tancament de descans, just

75
00:04:03,720 --> 00:04:05,120
El que es mostra a dalt.

76
00:04:05,120 --> 00:04:10,420
Això es deu a trencament no té contingut
i per tant és un element buit.

77
00:04:10,420 --> 00:04:14,940
>> Els elements buits com aquest, pot obrir
i tanquen simultàniament simplement

78
00:04:14,940 --> 00:04:20,420
inclou una barra diagonal al
final de la declaració inicial.

79
00:04:20,420 --> 00:04:24,390
Així que ara el meu lloc web es veu una mica
alguna cosa com això.

80
00:04:24,390 --> 00:04:27,410
Millor, però és com que se sent
com un carreró sense sortida.

81
00:04:27,410 --> 00:04:30,850
No hi ha un altre lloc per anar a un costat
des d'aquesta pàgina principal.

82
00:04:30,850 --> 00:04:33,075
Bé, anem a arreglar això per
incloent un enllaç.

83
00:04:33,075 --> 00:04:36,860
>> El que vaig a fer aquí és utilitzar un
atribuir denotat per A i fer el

84
00:04:36,860 --> 00:04:40,780
imatge un enllaç a, diguem, CS50 TV.

85
00:04:40,780 --> 00:04:44,460
D'aquesta manera, cada vegada que algú fa clic en mi,
el seu navegador serà dirigit a

86
00:04:44,460 --> 00:04:47,810
una altra, probablement més
, La pàgina web d'utilitat.

87
00:04:47,810 --> 00:04:51,040
He hagut de reduir al mínim la mida de la
text una mica perquè la nostra pàgina web és

88
00:04:51,040 --> 00:04:52,470
cada vegada més avançada.

89
00:04:52,470 --> 00:04:54,590
Però és d'esperar, segueix sent clara.

90
00:04:54,590 --> 00:04:59,460
El meu lloc web es veu exactament el mateix només
ara, cada vegada que feu clic a la imatge,

91
00:04:59,460 --> 00:05:04,410
el meu navegador s'obrirà un altre
fitxa de la pàgina web CS50.tv.

92
00:05:04,410 --> 00:05:08,970
>> Finalment, direm que vaig a estil
aquest lloc web després utilitzant CSS.

93
00:05:08,970 --> 00:05:11,730
CSS és el que es coneix com
full d'estils en cascada.

94
00:05:11,730 --> 00:05:15,230
I proporciona bàsicament una eficient
forma d'editar i estil

95
00:05:15,230 --> 00:05:16,910
blocs similars de codi.

96
00:05:16,910 --> 00:05:21,290
Vull començar a organitzar el meu codi HTML per
fan que sigui més fàcil de pentinar després.

97
00:05:21,290 --> 00:05:26,900
Aquí, he creat dos tipus diferents de
identificadors per ajudar a organitzar el meu codi.

98
00:05:26,900 --> 00:05:31,170
He fet servir l'atribut ID dins d'una
divisió o etiqueta div, i he fet servir un

99
00:05:31,170 --> 00:05:34,120
Atribut de classe a l'interior
altra etiqueta div.

100
00:05:34,120 --> 00:05:37,190
>> Atributs id i class
funcionar de manera similar.

101
00:05:37,190 --> 00:05:41,210
L'única diferència és que només pot tenir
un element, l'ID específic, però

102
00:05:41,210 --> 00:05:43,600
qualsevol nombre d'elements
pot compartir una classe.

103
00:05:43,600 --> 00:05:47,690
Així, per exemple, puc utilitzar la classe
imatge diverses vegades, però no puc

104
00:05:47,690 --> 00:05:50,533
crear una altra divisió
amb la part superior d'identificació.

105
00:05:50,533 --> 00:05:54,750
Encara que no he entrat en CSS,
altre idioma d'ús comú

106
00:05:54,750 --> 00:05:59,700
juntament amb HTML, un cop que començo un estil
el meu codi amb CSS, puc fer servir aquests

107
00:05:59,700 --> 00:06:03,730
atributs d'organització a la influència
l'estètica de la meva pàgina web.

108
00:06:03,730 --> 00:06:07,600
>> Tot dins de la primera divisió
tindrà estilismes similars o qualsevol

109
00:06:07,600 --> 00:06:12,010
un altre grup de grup d'HTML que al
imatge de classe compartirà un aspecte similar.

110
00:06:12,010 --> 00:06:15,700
Això és molt més fàcil que tractar d'editar
i les imatges o blocs d'estil

111
00:06:15,700 --> 00:06:17,690
text individualment.

112
00:06:17,690 --> 00:06:21,480
>> Així que ens vam anar a través dels fonaments de com
per fer una pàgina web amb HTML.

113
00:06:21,480 --> 00:06:25,280
HTML té un munt d'altres característiques també
que quan es combina amb altres idiomes

114
00:06:25,280 --> 00:06:29,220
com CSS i JavaScript, pot realment
fan que les pàgines es destaquen.

115
00:06:29,220 --> 00:06:32,960
La millor manera de sentir-se còmode amb
HTML és simplement perdre el temps amb ell,

116
00:06:32,960 --> 00:06:35,120
veure el que funciona i el que no.

117
00:06:35,120 --> 00:06:36,570
>> El meu nom és Daven Farnham.

118
00:06:36,570 --> 00:06:37,820
Aquest és CS50.

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

120
00:06:40,640 --> 00:06:45,690
>> Així, per exemple, puc fer servir
la imatge de la classe -

121
00:06:45,690 --> 00:06:48,028
No, hi ha tants atributs.

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

123
00:06:52,500 --> 00:06:53,950
El meu nom és Daven Farnham.

124
00:06:53,950 --> 00:06:58,560
Aquest és CS 650.

125
00:06:58,560 --> 00:06:59,810
Vull dir CSS.

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

127
00:07:02,325 --> 00:07:03,575
Aquest és CSS.

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