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

2
00:00:06,986 --> 00:00:10,450
>> Daven Farnham: Hoxe, eu vou
falar un pouco sobre HTML,

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

4
00:00:12,330 --> 00:00:14,450
Ve HTML en todas partes estes días.

5
00:00:14,450 --> 00:00:17,190
En realidade, se está a asistir a este
vídeo nun navegador, está

6
00:00:17,190 --> 00:00:19,120
ver HTML agora.

7
00:00:19,120 --> 00:00:22,760
HTML non é unha linguaxe de programación,
en vez diso, é unha linguaxe de marcación utilizada polo

8
00:00:22,760 --> 00:00:25,460
navegadores para procesar páxinas
en internet.

9
00:00:25,460 --> 00:00:30,410
>> Entón pode preguntar, como exactamente está escribindo
unha páxina web en HTML diferente

10
00:00:30,410 --> 00:00:33,574
de escribir un programa en unha programación
linguaxe como C?

11
00:00:33,574 --> 00:00:38,010
Ben, C é unha lingua con rigorosa
regras sintácticas que debe ser

12
00:00:38,010 --> 00:00:39,880
compilado antes de que poida ser executado.

13
00:00:39,880 --> 00:00:43,070
Se xa esqueceu de incluír un
punto e coma ao final dunha instrución en

14
00:00:43,070 --> 00:00:46,660
seu código C, vostede sabe o que eu estou falando
sobre en relación á sintaxe estrita.

15
00:00:46,660 --> 00:00:50,360
>> Os navegadores web, con todo, son un pouco máis
perdoando cando se trata de HTML.

16
00:00:50,360 --> 00:00:53,860
Aínda que o seu HTML non é sintaticamente
correcta, a súa páxina pode ser

17
00:00:53,860 --> 00:00:57,150
exhibida por un navegador, pero quizais
Non mire como quere.

18
00:00:57,150 --> 00:00:59,640
Por iso, sempre é mellor
seguir as regras.

19
00:00:59,640 --> 00:01:01,990
A mellor forma de ter unha intuición
sobre como as cousas traballo é

20
00:01:01,990 --> 00:01:03,300
pasar por un exemplo.

21
00:01:03,300 --> 00:01:07,360
>> Entón o que temos aquí é un básico
modelo para unha páxina web.

22
00:01:07,360 --> 00:01:10,690
Debe ter notado unha morea de cousas
entre corchetes angulares.

23
00:01:10,690 --> 00:01:12,900
Ben, estas son só as etiquetas.

24
00:01:12,900 --> 00:01:15,810
Reservas basicamente informar navegadores web
que, hey, algo

25
00:01:15,810 --> 00:01:17,150
está a benvida na súa dirección.

26
00:01:17,150 --> 00:01:20,770
Lembre, sempre que abrir unha
tag, ten que pecha-lo, xa que son

27
00:01:20,770 --> 00:01:21,750
feito a usar.

28
00:01:21,750 --> 00:01:24,690
>> Así, por exemplo, eu abro unha sección
de código aberto con

29
00:01:24,690 --> 00:01:26,960
corpo do soporte, preto do soporte.

30
00:01:26,960 --> 00:01:31,280
Eu, entón, engadir texto, neste caso, a miña
primeira páxina web, a continuación, cando fun á

31
00:01:31,280 --> 00:01:35,540
pechar esta sección, eu uso case unha
tag idéntica só que esta vez cun

32
00:01:35,540 --> 00:01:37,660
de barra antes corpo.

33
00:01:37,660 --> 00:01:41,140
En xeral, este é o formato que está
vai utilizar sempre que está abrindo

34
00:01:41,140 --> 00:01:42,680
e pechando as etiquetas.

35
00:01:42,680 --> 00:01:47,900
Xuntos, unha etiqueta de apertura e unha etiqueta final
compoñer o que se chama un elemento.

36
00:01:47,900 --> 00:01:51,870
>> Se ollar para a primeira liña, vai
ver un punto de admiración seguido por

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

38
00:01:53,350 --> 00:01:56,280
Isto é realmente só dicindo o navegador
que o ficheiro é unha páxina web

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

40
00:01:58,280 --> 00:02:01,970
A etiqueta HTML di esencialmente,
Aí vén un pouco de HTML.

41
00:02:01,970 --> 00:02:04,950
Entón temos unha marca de cabeza con
un título de etiqueta dentro dela.

42
00:02:04,950 --> 00:02:09,430
A marca de cabeza que pode pensar como
comprendendo código HTML que vén para

43
00:02:09,430 --> 00:02:12,670
a maior parte da súa páxina web
contido real.

44
00:02:12,670 --> 00:02:16,700
>> En xeral, se pon o título do seu
páxina web aquí, aínda que existan algúns

45
00:02:16,700 --> 00:02:19,350
outras marcas que poden aparecer
aquí tamén.

46
00:02:19,350 --> 00:02:25,020
A continuación, vén o corpo da súa páxina web, a
carne real e os ósos do seu sitio.

47
00:02:25,020 --> 00:02:28,910
No noso exemplo, acabamos de poñer unha simple
sentenza, a miña primeira páxina web,

48
00:02:28,910 --> 00:02:34,100
que, se corremos o noso sitio web, vai mirar
algo algo así.

49
00:02:34,100 --> 00:02:36,810
A nosa páxina web non é moi raro,
pero non se preocupe.

50
00:02:36,810 --> 00:02:39,210
Imos adornar-lo en breve.

51
00:02:39,210 --> 00:02:44,070
>> Entón o código HTML por riba, nós imos dar-lle un
modelo básico para unha páxina web,

52
00:02:44,070 --> 00:02:46,310
Nada extravagante, só o esqueleto.

53
00:02:46,310 --> 00:02:49,160
Pero se eu estou creando unha páxina web,
e se eu queira engadir un

54
00:02:49,160 --> 00:02:50,760
imaxe de, digamos, eu mesmo?

55
00:02:50,760 --> 00:02:52,760
Ben, eu podo facelo.

56
00:02:52,760 --> 00:02:55,460
Hai un par de formas de
engadir imaxes para o seu sitio.

57
00:02:55,460 --> 00:02:59,780
Se a imaxe está na mesma carpeta que
o ficheiro HTML, pode chamar ao

58
00:02:59,780 --> 00:03:01,950
imaxe vía camiño así.

59
00:03:01,950 --> 00:03:05,910
>> Abre cunha etiqueta de imaxe seguido
por no atributo ALT no

60
00:03:05,910 --> 00:03:07,240
fonte da imaxe.

61
00:03:07,240 --> 00:03:12,030
O valor do atributo alt é só un
texto alternativo no caso dun usuario non pode

62
00:03:12,030 --> 00:03:13,580
ver a imaxe.

63
00:03:13,580 --> 00:03:19,680
Alternativamente, tamén se pode chamar ao
imaxes a través dun URL completa, como este.

64
00:03:19,680 --> 00:03:24,180
Agora, que o sitio realmente non existe,
pero se houbese unha imaxe de

65
00:03:24,180 --> 00:03:27,760
me naquel enderezo, eu podería usar
a URL de orixe para incluír

66
00:03:27,760 --> 00:03:29,930
súa imaxe no meu sitio.

67
00:03:29,930 --> 00:03:35,590
De calquera xeito, acaba cun moi
sitio máis bonito, algo así.

68
00:03:35,590 --> 00:03:39,730
>> Ben, iso é moi legal, pero eu medio
de querer algún texto aquí tamén.

69
00:03:39,730 --> 00:03:43,020
Entón imos engadir algo
super sinxelo enriba do

70
00:03:43,020 --> 00:03:45,210
imaxe, como a cabeceira.

71
00:03:45,210 --> 00:03:50,830
Todo o que eu fixen ata agora é empregar a cabeceira
tag, H1, e un salto de liña etiqueta, br.

72
00:03:50,830 --> 00:03:54,900
A etiqueta de cabeceira fai a fonte un pouco
pouco maior e máis destacado.

73
00:03:54,900 --> 00:03:58,930
A etiqueta de salto de liña, por outra
banda, é legal.

74
00:03:58,930 --> 00:04:03,720
Diferente da maioría das outras etiquetas, non ten
unha etiqueta de apertura e salto de clausura, só

75
00:04:03,720 --> 00:04:05,120
a mostrada arriba.

76
00:04:05,120 --> 00:04:10,420
Xa que pausa non ten contido
e é, polo tanto, un elemento baleiro.

77
00:04:10,420 --> 00:04:14,940
>> Os elementos baleiros como este, pode abrir
e preto ao mesmo tempo simplemente por

78
00:04:14,940 --> 00:04:20,420
incluíndo unha barra na
fin da declaración inicial.

79
00:04:20,420 --> 00:04:24,390
Entón agora o meu sitio parece algo
algo así.

80
00:04:24,390 --> 00:04:27,410
Mellor, pero iso medio que se sente
como unha rúa sen saída.

81
00:04:27,410 --> 00:04:30,850
Non hai outro lugar para ir máis alá
desta páxina principal.

82
00:04:30,850 --> 00:04:33,075
Ben, imos arranxar isto
incluíndo unha ligazón.

83
00:04:33,075 --> 00:04:36,860
>> O que vou facer aquí é usar un
atributo indicado por un e facer o

84
00:04:36,860 --> 00:04:40,780
imaxe unha ligazón a, digamos, CS50 TV.

85
00:04:40,780 --> 00:04:44,460
Desta forma, sempre que alguén fai clic en min,
seu navegador será dirixida para

86
00:04:44,460 --> 00:04:47,810
outro, probablemente máis
útil, páxina web.

87
00:04:47,810 --> 00:04:51,040
Tiven que diminuír o tamaño do
texto un pouco, porque a nosa páxina web é

88
00:04:51,040 --> 00:04:52,470
ficando cada vez máis avanzada.

89
00:04:52,470 --> 00:04:54,590
Pero espero que, aínda é clara.

90
00:04:54,590 --> 00:04:59,460
O meu sitio parece exactamente o mesmo só
agora, cada vez que premer sobre a imaxe,

91
00:04:59,460 --> 00:05:04,410
meu navegador abrirá outro
guía para a páxina web CS50.tv.

92
00:05:04,410 --> 00:05:08,970
>> Para rematar, imos dicir que eu estou indo ao estilo
esta web máis tarde, usando CSS.

93
00:05:08,970 --> 00:05:11,730
CSS é o que se coñece como un
follas de estilo en cascada.

94
00:05:11,730 --> 00:05:15,230
E, basicamente, ofrece un eficiente
forma de editar e estilo

95
00:05:15,230 --> 00:05:16,910
bloques similares de código.

96
00:05:16,910 --> 00:05:21,290
Eu quero comezar a organizar o meu HTML
facer máis doado para o estilo máis tarde.

97
00:05:21,290 --> 00:05:26,900
Aquí, montei dous tipos de
identificadores para axudar a organizar o meu código.

98
00:05:26,900 --> 00:05:31,170
Eu usei o atributo ID dentro dun
división, ou etiqueta div, e eu usei un

99
00:05:31,170 --> 00:05:34,120
Clase atributo dentro
outra etiqueta div.

100
00:05:34,120 --> 00:05:37,190
>> Atributos id e class
funcionan de forma semellante.

101
00:05:37,190 --> 00:05:41,210
A única diferenza é que só se pode ter
un elemento, a identificación específica, pero

102
00:05:41,210 --> 00:05:43,600
calquera número de elementos
pode compartir unha clase.

103
00:05:43,600 --> 00:05:47,690
Así, por exemplo, podo usar a clase
imaxe varias veces, pero eu non podo

104
00:05:47,690 --> 00:05:50,533
crear outra división
coa parte superior de identificación.

105
00:05:50,533 --> 00:05:54,750
Aínda que eu non teña ido para CSS,
outra lingua de uso corrente

106
00:05:54,750 --> 00:05:59,700
xunto con HTML, xa que eu comezar styling
meu código con CSS, podo usalos

107
00:05:59,700 --> 00:06:03,730
atributos de organización á influencia
estética da miña páxina web.

108
00:06:03,730 --> 00:06:07,600
>> Todo dentro da primeira división
terá stylings similares ou calquera

109
00:06:07,600 --> 00:06:12,010
outro grupo de grupo de HTML que na
imaxe de clase han compartir un ollar semellante.

110
00:06:12,010 --> 00:06:15,700
Isto é moito máis fácil do que tentar editar
e as imaxes ou bloques de estilo

111
00:06:15,700 --> 00:06:17,690
texto individualmente.

112
00:06:17,690 --> 00:06:21,480
>> Entón fomos ata o básico de como
para facer unha páxina web con HTML.

113
00:06:21,480 --> 00:06:25,280
HTML ten unha morea de outros recursos tamén
que, cando combinados con outras linguas

114
00:06:25,280 --> 00:06:29,220
como CSS e JavaScript, pode realmente
facer as páxinas destacan.

115
00:06:29,220 --> 00:06:32,960
A mellor forma de sentirse cómodo co
HTML é só para xogar con el,

116
00:06:32,960 --> 00:06:35,120
ver o que funciona eo que non funciona.

117
00:06:35,120 --> 00:06:36,570
>> O meu nome é Daven Farnham.

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

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

120
00:06:40,640 --> 00:06:45,690
>> Así, por exemplo, podo usar
a imaxe da clase -

121
00:06:45,690 --> 00:06:48,028
Non, hai tantos atributos.

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

123
00:06:52,500 --> 00:06:53,950
O meu nome é Daven Farnham.

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

125
00:06:58,560 --> 00:06:59,810
Quero dicir CSS.

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

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

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