1
00:00:00,230 --> 00:00:00,950
Bienvenido de nuevo.

2
00:00:01,140 --> 00:00:06,360
Así que en esta lección vamos a comenzar haciendo que un nuevo archivo realmente lo llene con

3
00:00:06,360 --> 00:00:11,930
una apertura en el navegador y también vamos a aprender sobre la estructura subyacente de cada documento HTML.

4
00:00:11,940 --> 00:00:17,190
Así que hay algunas cosas que cada documento siempre tiene un tipo de repetición sobre el que vamos

5
00:00:17,190 --> 00:00:17,820
a aprender.

6
00:00:17,820 --> 00:00:22,880
Entonces, para comenzar ir a Sublime y voy a hacer un nuevo archivo.

7
00:00:23,100 --> 00:00:29,610
Entonces archiva un nuevo archivo o comando y luego voy a guardar el archivo y darle un nombre.

8
00:00:29,610 --> 00:00:33,340
Así que guarde el archivo o comando como.

9
00:00:34,080 --> 00:00:37,040
Entonces, una vez que hago eso, le daremos un nombre.

10
00:00:37,140 --> 00:00:42,980
Vamos a llamarlo primera página la página T. METRO. y esta parte es muy importante.

11
00:00:42,990 --> 00:00:44,950
Dot h Timo.

12
00:00:45,690 --> 00:00:47,120
Entonces presionaré guardar.

13
00:00:47,670 --> 00:00:50,170
Y ese punto cada equipo lo digo sublime.

14
00:00:50,340 --> 00:00:55,790
Y cuando lo abro en Chrome, le dice a chrome que este es un archivo que trataré como tal.

15
00:00:56,220 --> 00:00:58,000
Entonces podemos escribirle a Tim Allen aquí.

16
00:00:58,260 --> 00:01:04,460
Así que comenzaremos con solo una etiqueta que hemos visto hasta ahora son una de las etiquetas que es un H-1.

17
00:01:04,800 --> 00:01:06,740
Y notarás que está resaltado para mí.

18
00:01:06,780 --> 00:01:08,040
Así que llenemos esto.

19
00:01:08,040 --> 00:01:16,470
Esta es mi primera etiqueta y guardo este archivo y verás que sublime sabe que es H D M L por lo que resalta que

20
00:01:16,770 --> 00:01:19,020
hace que las etiquetas correspondientes sean rojas.

21
00:01:19,020 --> 00:01:19,950
En mi caso.

22
00:01:20,130 --> 00:01:25,680
Ahora lo que queremos hacer es abrir este archivo y verlo porque recuerde que cada vez que

23
00:01:25,680 --> 00:01:31,910
sale solo se trata de texto, pero nuestro navegador lo interpreta y lo convierte en algo como esto o esto.

24
00:01:31,920 --> 00:01:36,230
Para que realmente Chrome lo abra hay algunas soluciones.

25
00:01:36,270 --> 00:01:41,370
El primero es simplemente hacer doble clic en él y lo abrirá en su navegador predeterminado.

26
00:01:41,490 --> 00:01:47,100
Si eso no es Chrome, seguirá funcionando, pero lo abrirá en Safari, Firefox o

27
00:01:47,580 --> 00:01:53,690
Internet Explorer y, aunque se vea, al abrirlo no me muestra el html real, lo

28
00:01:53,690 --> 00:01:58,090
está quitando y lo está convirtiendo en esta buena representación visual.

29
00:01:58,470 --> 00:02:03,340
Como siempre, puedo ver mi fuente de página y verá que es solo una etiqueta.

30
00:02:03,510 --> 00:02:07,470
Así que definitivamente más simple que algo como esto.

31
00:02:09,330 --> 00:02:11,670
Pero subyacentes son exactamente lo mismo.

32
00:02:11,940 --> 00:02:15,910
Y probablemente también haya un H-1 en esta página.

33
00:02:15,960 --> 00:02:17,770
Entonces, otra forma de hacer esto.

34
00:02:18,000 --> 00:02:25,110
Puede tomar el archivo con el botón derecho y hacer clic en abrir con Google Chrome o puede hacer clic en él

35
00:02:25,110 --> 00:02:27,720
y arrastrarlo a Chrome, que también lo abrirá.

36
00:02:27,720 --> 00:02:32,640
Lo mismo ocurre con el más sublime, así que si accidentalmente cierra el archivo puede arrastrarlo aquí y lo

37
00:02:32,640 --> 00:02:33,470
volverá a abrir.

38
00:02:33,570 --> 00:02:40,200
Entonces solo para mostrarle que haga clic y puedo abrirlo.

39
00:02:40,440 --> 00:02:44,380
Así que, lamentablemente, tengo que dar la noticia de que son simples.

40
00:02:44,370 --> 00:02:47,650
Es Tim L, que hemos escrito hasta ahora, está un poco equivocado.

41
00:02:47,850 --> 00:02:52,140
La etiqueta de correo electrónico en sí está bien, pero este no es un documento válido.

42
00:02:52,140 --> 00:02:57,260
Y eso es porque nos falta la estructura subyacente que toda página debe tener.

43
00:02:57,840 --> 00:02:59,320
Entonces se ve así.

44
00:02:59,490 --> 00:03:01,370
Es mucho comparado con lo que hemos hecho hasta ahora.

45
00:03:01,380 --> 00:03:03,950
Pero la buena noticia es que hay dos buenas noticias.

46
00:03:03,960 --> 00:03:05,560
Uno es siempre lo mismo.

47
00:03:05,900 --> 00:03:12,120
Y dos sublimes tiene un buen atajo que nos da esta estructura muy rápidamente con solo

48
00:03:12,120 --> 00:03:13,880
cuatro letras que debemos escribir.

49
00:03:14,280 --> 00:03:18,570
Así que vamos a repasar estas piezas individualmente y solo un poco, pero

50
00:03:18,570 --> 00:03:25,650
voy a comenzar mostrándoles cómo hacerlo en sublime archivo sublime en lugar de h tim l, podemos escribir la palabra h

51
00:03:25,650 --> 00:03:29,690
tim L y luego, toca la pestaña y automáticamente obtenemos esta estructura.

52
00:03:30,000 --> 00:03:32,400
Así que repasemos qué hace esto.

53
00:03:32,400 --> 00:03:33,460
Primero vamos a guardar.

54
00:03:33,570 --> 00:03:39,090
Así que este tipo de documento lo saca de arriba y es raro porque

55
00:03:39,090 --> 00:03:48,650
no hay un tipo de documento de cierre correspondiente, como H-G M-L, y el tipo de documento de cabecera, título y cuerpo es independiente.

56
00:03:48,690 --> 00:03:55,320
Así que vamos a M. RE. es ser un desarrollador para buscar en Google.

57
00:03:55,850 --> 00:04:00,510
y simplemente mostrándote cómo llegarías escribiría MT-NW y luego doc y podría parecer una tontería hablar de eso,

58
00:04:00,510 --> 00:04:03,700
pero esto es importante porque encontrar esta información es lo que realmente

59
00:04:03,720 --> 00:04:05,500
¿Cómo encuentras la respuesta correcta?

60
00:04:05,520 --> 00:04:07,740
Voy a ser un completo disco roto en eso.

61
00:04:07,770 --> 00:04:12,660
Mis alumnos se ríen cada vez que hablo sobre el arte de buscar en Google, pero realmente es importante.

62
00:04:12,930 --> 00:04:13,760
Entonces estoy aquí.

63
00:04:13,800 --> 00:04:14,910
Vamos a ver.

64
00:04:15,030 --> 00:04:20,210
Dice que el tipo de documento para cada Timofei es simple para indicar que su contenido HMO usa HDMI.

65
00:04:20,210 --> 00:04:26,970
Cinco simplemente usan doctype H-2 con un signo de admiración enfrente y queremos usar

66
00:04:26,970 --> 00:04:27,770
HMO 5.

67
00:04:27,870 --> 00:04:31,530
Hablaremos exactamente sobre lo idiota que es un 5 y lo que no es.

68
00:04:31,530 --> 00:04:32,580
En un video futuro.

69
00:04:32,790 --> 00:04:34,070
Pero queremos usarlo.

70
00:04:34,140 --> 00:04:36,720
Básicamente es la versión más reciente de él.

71
00:04:36,990 --> 00:04:38,660
Así que ponemos esto arriba.

72
00:04:39,030 --> 00:04:42,330
Entonces, lo siguiente que vamos a hablar es el elemento h t m l.

73
00:04:42,510 --> 00:04:47,490
Así que este es un poco más difícil de encontrar buscando quién hace MT-NW una HMO.

74
00:04:47,670 --> 00:04:48,540
Si simplemente

75
00:04:51,470 --> 00:04:56,030
seleccionamos el elemento allí, siempre busco este extremo vacío en el nombre.

76
00:04:56,040 --> 00:05:01,350
Y esto nos dice que el elemento raíz envejecido le representa la raíz de un documento HMO.

77
00:05:01,500 --> 00:05:04,930
Todos los otros elementos deben ser descendientes de este elemento.

78
00:05:05,040 --> 00:05:06,500
Entonces es bastante auto explicativo.

79
00:05:06,620 --> 00:05:10,310
Básicamente, todo lo que escribimos debe ir dentro de cada elemento.

80
00:05:10,710 --> 00:05:18,360
un elemento principal seguido de un cuerpo, que es lo que tenemos una cabeza y un cuerpo.

81
00:05:18,360 --> 00:05:22,640
Y lo más importante, bajo el contenido permitido, nos dice

82
00:05:23,820 --> 00:05:28,140
Así que echemos un vistazo a qué cabeza es el elemento principal.

83
00:05:28,140 --> 00:05:34,190
Proporcione metadatos de información general sobre el documento, incluido su título, y enlaces a definiciones de

84
00:05:34,200 --> 00:05:36,010
guiones y hojas de estilo.

85
00:05:36,330 --> 00:05:41,200
Entonces, lo que eso significa es básicamente todo lo que no vemos en la página como usuario.

86
00:05:41,400 --> 00:05:48,210
Así que cosas como los archivos de fuentes en nuestros archivos de hojas de estilo o los archivos javascript todos

87
00:05:48,210 --> 00:05:53,200
van en la cabeza y luego el cuerpo es donde ponemos todo nuestro contenido.

88
00:05:53,610 --> 00:05:57,210
Representa el contenido de un documento HTML de edad.

89
00:05:57,210 --> 00:06:03,760
Entonces, si volvemos aquí, puedo asegurarle una cosa más que es cómo escribir comentarios y sacarle

90
00:06:03,750 --> 00:06:04,300
partido.

91
00:06:04,530 --> 00:06:14,870
Si quisiera escribir una nota para mí mismo si acabo de escribir este contenido entra en el cuerpo

92
00:06:14,910 --> 00:06:21,000
y luego aparece, escribí una información que entra en la cabeza.

93
00:06:21,750 --> 00:06:26,580
Afortunadamente, eso no funcionará porque esto realmente se mostrará en la página.

94
00:06:26,720 --> 00:06:31,070
Su equipo lo tratará como un texto y quiero que sea solo una nota para mí.

95
00:06:31,230 --> 00:06:33,570
Entonces esto es algo que puedes hacer en cada lenguaje de programación.

96
00:06:33,690 --> 00:06:41,040
exclamación menos que dos guiones y luego un poco de contenido y luego en el otro lado dos guiones y un signo mayor que.

97
00:06:41,040 --> 00:06:47,100
Puede convertir esto en un comentario y un comentario se ve como si esto comenzara con un signo de

98
00:06:49,050 --> 00:06:52,420
Entonces él puede escribir que te escuches escribirlo manualmente y

99
00:06:57,000 --> 00:06:59,680
puedes ver que se pone gris en sublime.

100
00:07:00,000 --> 00:07:05,220
Pero otro atajo realmente ingenioso es que puedes seleccionar una línea, no tienes que

101
00:07:05,220 --> 00:07:08,360
seleccionarla, solo tienes que ir a alinear y

102
00:07:12,570 --> 00:07:21,160
presionar la barra inclinada del comando y también puedes ver que puede ir hasta ella y puedes ir a comentar alternar el comentario.

103
00:07:21,180 --> 00:07:24,230
Entonces, en caso de que olvide esto y no quiera escribirlo.

104
00:07:24,260 --> 00:07:25,200
Otra cosa agradable.

105
00:07:25,250 --> 00:07:30,380
Supongamos que tengo un montón de notas para mí, puedo seleccionarlas todas y hacer lo mismo.

106
00:07:30,420 --> 00:07:33,000
Barra de Comando

107
00:07:34,440 --> 00:07:35,320
Estupendo.

108
00:07:35,400 --> 00:07:38,860
Así que voy a mantener estos comentarios aquí que son solo notas para mí.

109
00:07:39,000 --> 00:07:40,740
Mi contenido va en el cuerpo.

110
00:07:40,830 --> 00:07:43,000
Va en la cabeza.

111
00:07:43,830 --> 00:07:50,880
Entonces eso significa que si seguimos nuestras propias notas, nuestro contenido aquí debe ir dentro de nuestro cuerpo.

112
00:07:52,680 --> 00:07:57,450
Por lo tanto, no deberíamos tener nada flotando fuera del elemento H Tim L a excepción de doctype.

113
00:07:57,540 --> 00:08:02,280
Todo lo demás va en la cabeza o en el cuerpo.

114
00:08:02,280 --> 00:08:06,570
Así que vamos y abrímoslo, asegúrese de que se vea igual que antes.

115
00:08:06,570 --> 00:08:07,470
Haga doble clic.

116
00:08:07,620 --> 00:08:09,250
Puedes ver que se ve idéntico.

117
00:08:09,420 --> 00:08:12,960
Veamos que el origen de la página tiene el mismo aspecto.

118
00:08:12,960 --> 00:08:17,580
Tenga en cuenta que nuestros comentarios no se muestran, por supuesto, solo aparece nuestro H-1.

119
00:08:17,580 --> 00:08:20,590
Una cosa que nos falta mientras estamos aquí es un título.

120
00:08:20,880 --> 00:08:27,570
Un título es importante, no porque aparezca en la página, no aparecerá en nuestra página actual aquí.

121
00:08:27,690 --> 00:08:28,980
Recuerda que está en la cabeza.

122
00:08:29,040 --> 00:08:32,660
Entonces, son solo metadatos lo que hacen es dos cosas.

123
00:08:32,700 --> 00:08:37,270
Uno de ellos determinará el nombre o el texto que aparece en nuestra pestaña.

124
00:08:37,740 --> 00:08:43,710
Y también es importante para los motores de búsqueda y para otras páginas cuando hay otras páginas

125
00:08:44,070 --> 00:08:49,890
vinculadas a su sitio o cuando va a Google y busca MDA en estos nombres aquí.

126
00:08:49,880 --> 00:08:52,770
Estos provienen de los elementos del título.

127
00:08:52,760 --> 00:08:58,070
Entonces, por ejemplo, M. RE. y celebra 10 años de documentos en su web, haga clic en eso.

128
00:08:58,470 --> 00:09:02,120
Puedes ver aquí dice MDA y celebra que se corta.

129
00:09:02,190 --> 00:09:07,500
Puede inspeccionar la página buscar un elemento de título.

130
00:09:07,500 --> 00:09:08,730
Así que muchas cosas aquí vamos.

131
00:09:08,760 --> 00:09:12,250
Titula y celebra 10 años de documentar tu web.

132
00:09:12,600 --> 00:09:13,810
El blog de mizzle.

133
00:09:14,340 --> 00:09:16,340
Entonces el título es importante.

134
00:09:17,070 --> 00:09:24,710
Así que vamos a darle un título a ArcSight, vamos a llamarlo mi primer refresco de página y verlo aquí mismo.

135
00:09:25,710 --> 00:09:27,080
Eso es todo por ahora.

136
00:09:27,090 --> 00:09:28,420
Recuerda dos cosas

137
00:09:28,540 --> 00:09:31,640
Este texto repetitivo solo puede escribir H l l tab.

138
00:09:31,770 --> 00:09:33,720
Nunca tendrías más de uno en el documento.

139
00:09:33,890 --> 00:09:37,850
Pero solo para recordar la pestaña html y los comentarios.

140
00:09:37,980 --> 00:09:41,880
Puede hacer con slash de comando puede dirigirlos dentro y fuera.

141
00:09:41,900 --> 00:09:42,340
Todo bien