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

2
00:00:06,986 --> 00:00:10,450
>> Daven FARNHAM: Hoy en día, voy a
hablar un poco sobre HTML,

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

4
00:00:12,330 --> 00:00:14,450
Usted ve HTML en todas partes estos días.

5
00:00:14,450 --> 00:00:17,190
De hecho, si estás viendo esto
vídeo en un navegador, tienes

6
00:00:17,190 --> 00:00:19,120
ver HTML en estos momentos.

7
00:00:19,120 --> 00:00:22,760
HTML no es un lenguaje de programación,
más bien, es un lenguaje de marcas utilizado por

8
00:00:22,760 --> 00:00:25,460
navegadores web para hacer las páginas
en el Internet.

9
00:00:25,460 --> 00:00:30,410
>> Así que usted puede preguntar, ¿cómo es exactamente está escribiendo
una página web en HTML diferente

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

11
00:00:33,574 --> 00:00:38,010
Bueno, C es un lenguaje con muy estricto
reglas sintácticas que necesita ser

12
00:00:38,010 --> 00:00:39,880
compilado antes de que pueda funcionar.

13
00:00:39,880 --> 00:00:43,070
Si alguna vez te has olvidado de incluir una
punto y coma al final de una sentencia en

14
00:00:43,070 --> 00:00:46,660
el código C, ya sabes lo que estoy hablando
sobre en lo que respecta a la sintaxis estricta.

15
00:00:46,660 --> 00:00:50,360
>> Navegadores Web, sin embargo, son un poco más
perdonar cuando se trata de HTML.

16
00:00:50,360 --> 00:00:53,860
Incluso si su HTML no es sintácticamente
correcta, la página puede estar todavía

17
00:00:53,860 --> 00:00:57,150
mostrado por un navegador, pero puede ser que
No mire como se pretendía.

18
00:00:57,150 --> 00:00:59,640
Por lo tanto, siempre es mejor
seguir las reglas.

19
00:00:59,640 --> 00:01:01,990
La mejor manera de conseguir una intuición
acerca de cómo funcionan las cosas es

20
00:01:01,990 --> 00:01:03,300
ir a través de un ejemplo.

21
00:01:03,300 --> 00:01:07,360
>> Así que lo que tenemos aquí es un básico
anteproyecto para una página web.

22
00:01:07,360 --> 00:01:10,690
Usted probablemente ha notado un montón de cosas
entre paréntesis angulares.

23
00:01:10,690 --> 00:01:12,900
Bueno, esos son sólo etiquetas.

24
00:01:12,900 --> 00:01:15,810
Etiquetas básicamente informan los navegadores web
que, bueno, algo

25
00:01:15,810 --> 00:01:17,150
está llegando a su manera.

26
00:01:17,150 --> 00:01:20,770
Recuerde, sin embargo, cada vez que se abre un
etiqueta, es necesario cerrarlo una vez que esté

27
00:01:20,770 --> 00:01:21,750
hecho de usarlo.

28
00:01:21,750 --> 00:01:24,690
>> Así, por ejemplo, abro una sección
de código abierto con

29
00:01:24,690 --> 00:01:26,960
cuerpo de soporte, corchete de cierre.

30
00:01:26,960 --> 00:01:31,280
Luego agregar un poco de texto, en este caso, mi
primera página web, entonces cuando fui a

31
00:01:31,280 --> 00:01:35,540
cerrar esta sección, utilizo casi una
etiqueta idéntica excepto que esta vez con una

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

33
00:01:37,660 --> 00:01:41,140
En general, este es el formato que está
va a utilizar cada vez que va a abrir

34
00:01:41,140 --> 00:01:42,680
y el cierre de las etiquetas.

35
00:01:42,680 --> 00:01:47,900
En conjunto, una etiqueta abierta y una etiqueta de cierre
componer lo que se llama un elemento.

36
00:01:47,900 --> 00:01:51,870
>> Si nos fijamos en la primera línea, se le
ver un signo de exclamación seguido de

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

38
00:01:53,350 --> 00:01:56,280
Esto es realmente sólo contando su navegador
que el archivo es una página web

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

40
00:01:58,280 --> 00:02:01,970
El tag HTML esencialmente dice,
aquí viene algo de HTML.

41
00:02:01,970 --> 00:02:04,950
Entonces tenemos una etiqueta de la cabeza con
una etiqueta de título en su interior.

42
00:02:04,950 --> 00:02:09,430
La etiqueta de la cabeza se puede pensar en como
que comprende un código HTML que viene de

43
00:02:09,430 --> 00:02:12,670
la mayor parte de su web la página de
contenido real.

44
00:02:12,670 --> 00:02:16,700
>> En general, se pone el título de su
página web aquí, aunque hay algunos

45
00:02:16,700 --> 00:02:19,350
otras etiquetas que pueden aparecer
aquí también.

46
00:02:19,350 --> 00:02:25,020
Luego viene el cuerpo de su página web, la
carne real y los huesos de su sitio web.

47
00:02:25,020 --> 00:02:28,910
En nuestro ejemplo, acabamos de poner un sencillo
frase, mi primera página web,

48
00:02:28,910 --> 00:02:34,100
que, si nos quedamos sin nuestro sitio, se verá
un poco de algo como esto.

49
00:02:34,100 --> 00:02:36,810
Nuestra página web no es demasiado raro,
pero no te preocupes.

50
00:02:36,810 --> 00:02:39,210
Vamos a darle sabor pronto.

51
00:02:39,210 --> 00:02:44,070
>> Así que el HTML anterior, le daremos una muy
plantilla básica para una página web,

52
00:02:44,070 --> 00:02:46,310
nada especial, sólo el esqueleto.

53
00:02:46,310 --> 00:02:49,160
Pero si estoy creando una página web,
¿qué pasa si quiero agregar un

54
00:02:49,160 --> 00:02:50,760
foto de, por ejemplo, a mí mismo?

55
00:02:50,760 --> 00:02:52,760
Bueno, yo puedo hacer eso.

56
00:02:52,760 --> 00:02:55,460
Hay un par de maneras de
añadir imágenes a su sitio.

57
00:02:55,460 --> 00:02:59,780
Si la imagen está en la misma carpeta que
su archivo HTML, se puede enlazar con el

58
00:02:59,780 --> 00:03:01,950
imagen a través del camino como éste.

59
00:03:01,950 --> 00:03:05,910
>> Usted abre con una etiqueta de imagen seguido
por en el atributo Alt en el

60
00:03:05,910 --> 00:03:07,240
fuente de la imagen.

61
00:03:07,240 --> 00:03:12,030
El valor del atributo Alt es sólo un
texto alternativo en caso de que un usuario no puede

62
00:03:12,030 --> 00:03:13,580
ver la imagen.

63
00:03:13,580 --> 00:03:19,680
Alternativamente, también puede enlazar a
imágenes a través de una dirección URL completa, les gusta esto.

64
00:03:19,680 --> 00:03:24,180
Ahora, ese sitio web en realidad no existe,
pero si había una imagen de

65
00:03:24,180 --> 00:03:27,760
yo en esa dirección, podría usar
la dirección de origen para incluir

66
00:03:27,760 --> 00:03:29,930
su imagen en mi página web.

67
00:03:29,930 --> 00:03:35,590
De cualquier manera, usted termina con una gran
sitio más bonito, algo como esto.

68
00:03:35,590 --> 00:03:39,730
>> Bueno, eso es muy bueno, pero yo tipo
de querer algún texto aquí también.

69
00:03:39,730 --> 00:03:43,020
Así que vamos a añadir algo
super sencillo por encima de la

70
00:03:43,020 --> 00:03:45,210
imagen, al igual que la cabecera.

71
00:03:45,210 --> 00:03:50,830
Todo lo que he hecho hasta ahora es utilizar el encabezado
etiqueta, H1, y un salto de línea de etiquetas, br.

72
00:03:50,830 --> 00:03:54,900
La etiqueta de cabecera hace que el tipo de letra un poco
poco más grande y más prominente.

73
00:03:54,900 --> 00:03:58,930
La etiqueta de salto de línea, por otra
parte, es una especie de fresco.

74
00:03:58,930 --> 00:04:03,720
A diferencia de la mayoría de las otras etiquetas, que no tiene
una etiqueta de apertura y cierre de descanso, justo

75
00:04:03,720 --> 00:04:05,120
El que se muestra arriba.

76
00:04:05,120 --> 00:04:10,420
Esto se debe a rotura no tiene contenido
y por lo tanto es, un elemento vacío.

77
00:04:10,420 --> 00:04:14,940
>> Los elementos vacíos como este, puede abrir
y cierran simultáneamente simplemente

78
00:04:14,940 --> 00:04:20,420
incluye una barra diagonal en el
final de la declaración inicial.

79
00:04:20,420 --> 00:04:24,390
Así que ahora mi sitio web se ve un poco
algo como esto.

80
00:04:24,390 --> 00:04:27,410
Mejor, pero es como que se siente
como un callejón sin salida.

81
00:04:27,410 --> 00:04:30,850
No hay otro lugar para ir a un lado
desde esta página principal.

82
00:04:30,850 --> 00:04:33,075
Bueno, vamos a arreglar eso por
incluyendo un enlace.

83
00:04:33,075 --> 00:04:36,860
>> Lo que voy a hacer aquí es utilizar un
atribuir denotado por A y hacer el

84
00:04:36,860 --> 00:04:40,780
imagen un enlace a, digamos, CS50 TV.

85
00:04:40,780 --> 00:04:44,460
De esta manera, cada vez que alguien hace clic en mí,
su navegador será dirigido a

86
00:04:44,460 --> 00:04:47,810
otra, probablemente más
, la página web de utilidad.

87
00:04:47,810 --> 00:04:51,040
He tenido que reducir al mínimo el tamaño de la
texto un poco porque nuestra página web es

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

89
00:04:52,470 --> 00:04:54,590
Pero es de esperar, sigue siendo clara.

90
00:04:54,590 --> 00:04:59,460
Mi sitio web se ve exactamente lo mismo sólo
ahora, cada vez que haga clic en la imagen,

91
00:04:59,460 --> 00:05:04,410
mi navegador se abrirá otro
ficha de la página web CS50.tv.

92
00:05:04,410 --> 00:05:08,970
>> Por último, vamos a decir que voy a estilo
este sitio web después usando CSS.

93
00:05:08,970 --> 00:05:11,730
CSS es lo que se conoce como
hoja de estilos en cascada.

94
00:05:11,730 --> 00:05:15,230
Y proporciona básicamente una eficiente
forma de editar y estilo

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

96
00:05:16,910 --> 00:05:21,290
Quiero empezar a organizar mi código HTML para
hacen que sea más fácil de peinar después.

97
00:05:21,290 --> 00:05:26,900
Aquí, he creado dos tipos diferentes de
identificadores para ayudar a organizar mi código.

98
00:05:26,900 --> 00:05:31,170
He usado el atributo ID dentro de una
división o etiqueta div, y he usado un

99
00:05:31,170 --> 00:05:34,120
Atributo de clase en el interior
otra etiqueta div.

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

101
00:05:37,190 --> 00:05:41,210
La única diferencia es que sólo puede tener
un elemento, el ID específico, pero

102
00:05:41,210 --> 00:05:43,600
cualquier número de elementos
puede compartir una clase.

103
00:05:43,600 --> 00:05:47,690
Así, por ejemplo, puedo usar la clase
imagen varias veces, pero no puedo

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

105
00:05:50,533 --> 00:05:54,750
Aunque no he entrado en CSS,
otro idioma de uso común

106
00:05:54,750 --> 00:05:59,700
junto con HTML, una vez que empiezo un estilo
mi código con CSS, puedo usar estos

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

108
00:06:03,730 --> 00:06:07,600
>> Todo dentro de la primera división
tendrá estilismos similares o cualquier

109
00:06:07,600 --> 00:06:12,010
otro grupo de grupo de HTML que en el
imagen de clase compartirá un aspecto similar.

110
00:06:12,010 --> 00:06:15,700
Esto es mucho más fácil que tratar de editar
y las imágenes o bloques de estilo

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

112
00:06:17,690 --> 00:06:21,480
>> Así que nos fuimos a través de los fundamentos de cómo
para hacer una página web con HTML.

113
00:06:21,480 --> 00:06:25,280
HTML tiene un montón de otras características también
que cuando se combina con otros idiomas

114
00:06:25,280 --> 00:06:29,220
como CSS y JavaScript, puede realmente
hacen que las páginas se destacan.

115
00:06:29,220 --> 00:06:32,960
La mejor manera de sentirse cómodo con
HTML es simplemente perder el tiempo con él,

116
00:06:32,960 --> 00:06:35,120
ver lo que funciona y lo que no.

117
00:06:35,120 --> 00:06:36,570
>> Mi nombre es Daven Farnham.

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

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

120
00:06:40,640 --> 00:06:45,690
>> Así, por ejemplo, puedo usar
la imagen de la clase -

121
00:06:45,690 --> 00:06:48,028
No, hay tantos atributos.

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

123
00:06:52,500 --> 00:06:53,950
Mi nombre es Daven Farnham.

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

125
00:06:58,560 --> 00:06:59,810
Quiero decir CSS.

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

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

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