1
00:00:11,410 --> 00:00:15,930
Vamos a crear a continuación el ejercicio de Hola Mundo con HTML.

2
00:00:16,060 --> 00:00:17,050
Están listos.

3
00:00:17,080 --> 00:00:19,880
Vamos.

4
00:00:20,290 --> 00:00:27,190
El objetivo es crear nuestro primer ejercicio de Hola Mundo con HTML y al finalizar deberemos observar

5
00:00:27,190 --> 00:00:28,780
los siguientes según se muestra

6
00:00:32,130 --> 00:00:39,370
como primer paso vamos a crear un nuevo proyecto para esto vamos a abrir nuestro IDE y vamos a realizar

7
00:00:39,370 --> 00:00:43,900
lo siguiente damos clic en Feil y posteriormente ni un proyecto

8
00:00:48,500 --> 00:00:53,070
seleccionamos la opción de HTML 5 y damos clic en Siguiente.

9
00:00:53,180 --> 00:00:57,880
Así que podemos observar que Primero seleccionamos HTML5 y Javascript.

10
00:00:57,890 --> 00:01:06,200
Posteriormente seleccionamos el tipo de proyecto HTML 5 diagonal JS Application y posteriormente damos

11
00:01:06,200 --> 00:01:07,360
clic en Next.

12
00:01:07,690 --> 00:01:13,160
En la versión que esté manejando podría haber ciertas diferencias sin embargo en su documentación va

13
00:01:13,160 --> 00:01:18,830
a existir siempre la última versión para que puedan apoyarse también de la documentación para cualquier

14
00:01:18,830 --> 00:01:22,730
cambio que puedan tener en la versión de la idea que estén trabajando.

15
00:01:22,880 --> 00:01:28,490
En caso de que tenga diferencias con la versión que estamos observando y una vez que hemos seleccionado

16
00:01:28,490 --> 00:01:31,010
nuestro proyecto damos clic en Siguiente

17
00:01:35,910 --> 00:01:41,250
ahora lo que vamos a hacer es proporcionar el nombre del proyecto y también proporcionamos la ubicación

18
00:01:41,250 --> 00:01:47,280
del mismo en la carpeta donde vamos a depositar nuestro proyecto ya debe estar creada.

19
00:01:47,280 --> 00:01:53,610
Así que únicamente proporcionamos el nombre de proyecto y también proporcionamos la ruta donde vamos

20
00:01:53,610 --> 00:01:57,520
a depositar este proyecto así que esta es una ruta sugerida.

21
00:01:57,540 --> 00:02:03,420
Sin embargo ya debe de estar creada esta carpeta así que una vez que hemos proporcionado estos valores

22
00:02:03,660 --> 00:02:04,980
damos clic en Siguiente

23
00:02:11,370 --> 00:02:15,040
como siguiente paso vamos a dejar marcadas las opciones por default.

24
00:02:15,040 --> 00:02:19,390
En este caso no vamos a seleccionar ninguna plantilla y damos clic en Siguiente

25
00:02:25,980 --> 00:02:32,160
y por último vamos a seleccionar todas las opciones que nos muestra ya que no las vamos a utilizar en

26
00:02:32,160 --> 00:02:34,980
este momento y vamos a dar clic en Finalizar

27
00:02:41,070 --> 00:02:45,000
y el resultado de crear nuestro proyecto se observa a continuación.

28
00:02:45,120 --> 00:02:48,030
Debemos de tener la siguiente estructura de nuestro proyecto.

29
00:02:48,030 --> 00:02:54,450
El nombre del proyecto es Hola Mundo HTML y se encuentra dentro de la carpeta root y dentro de esta

30
00:02:54,450 --> 00:02:59,730
carpeta vamos a comenzar a depositar nuestros documentos HTML.

31
00:02:59,730 --> 00:03:04,290
En este caso este IDE ya nos ha creado un primer documento por default.

32
00:03:04,320 --> 00:03:10,530
Sin embargo si élida que estemos trabajando no nos agrega este archivo podemos crearlo y depositarlo

33
00:03:10,530 --> 00:03:13,020
a nivel raíz de nuestro proyecto.

34
00:03:13,020 --> 00:03:18,030
En este caso como hemos comentado la raíz del proyecto se llama Saïd Root.

35
00:03:18,030 --> 00:03:20,850
Esta es la información que tiene por default este archivo.

36
00:03:20,850 --> 00:03:23,370
Sin embargo vamos a modificarlo a continuación

37
00:03:26,940 --> 00:03:35,720
así que como siguiente paso vamos a modificar el contenido del archivo índex punto HTML primero vamos

38
00:03:35,720 --> 00:03:42,800
a agregar la etiqueta Doc type HTML tal cual como se observa vamos a modificarla.

39
00:03:42,800 --> 00:03:49,700
Podemos observar que en HTML vamos a utilizar Piko paréntesis y con esto vamos a abrir una etiqueta

40
00:03:50,960 --> 00:03:56,990
no todas las etiquetas se deben de cerrar todo va a depender del tipo de documento HTML que vamos a

41
00:03:56,990 --> 00:04:03,480
definir así que en este caso algunas de las etiquetas que vamos a definir no es necesario cerrarlas.

42
00:04:03,560 --> 00:04:10,520
Esto debido a que no estamos utilizando un HTML estricto pero dependiendo del tipo de documento HTML

43
00:04:10,520 --> 00:04:17,120
que definamos podríamos tener el caso de que todas las etiquetas se deben de cerrar pero en este caso

44
00:04:17,120 --> 00:04:20,780
vamos a manejar un tipo de documento HTML más flexible.

45
00:04:20,780 --> 00:04:28,400
únicamente indicamos el Doc type HTML y debido a que estamos manejando este tipo de documento más flexible

46
00:04:28,670 --> 00:04:35,990
podemos dejar algunas etiquetas abiertas y en automático el navegador va a reconocer que algunas etiquetas

47
00:04:36,050 --> 00:04:39,860
están abiertas y las va a cerrar de manera automática.

48
00:04:39,920 --> 00:04:46,610
Esto lo vamos a ir viendo poco a poco a lo largo del curso así que indicamos con paréntesis signos de

49
00:04:46,610 --> 00:04:53,600
admiración invertido Doctrine en mayúscula y posteriormente indicamos que estamos creando un documento

50
00:04:53,600 --> 00:05:00,430
de tipo HTML posteriormente agregamos la etiqueta HTML.

51
00:05:00,430 --> 00:05:04,570
Esta es la etiqueta inicial para abrir cualquier documento HTML

52
00:05:07,270 --> 00:05:13,450
posteriormente agregamos la etiqueta de cabecero con la cual vamos a agregar meta información de nuestro

53
00:05:13,450 --> 00:05:20,530
documento HTML como puede ser el título de este documento así que agregamos el título del documento

54
00:05:20,530 --> 00:05:22,580
por medio de la etiqueta teito.

55
00:05:22,840 --> 00:05:30,040
Como podemos observar en este momento si estamos abriendo y cerrando la etiqueta de teito y dentro del

56
00:05:30,040 --> 00:05:38,600
contenido de estas etiquetas lo que estamos haciendo es agregar la cadena ola con HTML posteriormente

57
00:05:38,660 --> 00:05:43,170
indicamos el juego de caracteres que vamos a utilizar en este documento.

58
00:05:43,280 --> 00:05:50,330
Vamos a agregar este tipo de hecharse debido a que en español vamos a manejar seguramente acentos entonces

59
00:05:50,330 --> 00:05:54,230
para que pueda reconocer el juego de caracteres incluyendo acentos.

60
00:05:54,290 --> 00:05:56,630
Vamos a indicar meta.

61
00:05:56,630 --> 00:06:05,120
Posteriormente el atributo de Char Zet y agregamos el valor de f medio 8 y debido a que este valor es

62
00:06:05,120 --> 00:06:11,240
una cadena vamos a indicar por medio de Comillas que se trata de una cadena así que podemos observar

63
00:06:11,330 --> 00:06:18,200
que esta etiqueta se abre pero no se cierra esto en automático el navegador lo va a cerrar pero también

64
00:06:18,200 --> 00:06:21,550
podríamos haber agregado una diagonal pico parentesis.

65
00:06:21,560 --> 00:06:27,590
De esta manera también se puede cerrar una etiqueta que se abre y se cierra al mismo momento.

66
00:06:27,590 --> 00:06:29,960
Poco a poco vamos a ir viendo estos elementos

67
00:06:33,900 --> 00:06:39,210
posteriormente vamos a arreglar lo siguiente Este es un comentario de esta manera como podemos agregar

68
00:06:39,210 --> 00:06:42,740
comentarios a nuestros documentos HTML.

69
00:06:42,810 --> 00:06:45,390
Para ello vamos a utilizar el pico parentesis.

70
00:06:45,390 --> 00:06:52,020
Posteriormente el signo de admiración invertido y el símbolo de guión medio escribimos dos veces el

71
00:06:52,020 --> 00:06:58,420
guion medio y también dos veces el guion medio y el pico parentesis para cerrar nuestro comentario y

72
00:06:58,440 --> 00:07:01,440
dentro de esta etiqueta podemos agregar cualquier cadena.

73
00:07:01,440 --> 00:07:07,620
En este caso estamos agregando un comentario para eliminar un warning que nos muestra el idee de Nevins

74
00:07:08,040 --> 00:07:13,230
así que vamos a agregar lo siguiente para que nos elimine un warning que arroja el IDE NetBeans

75
00:07:18,550 --> 00:07:25,030
cuando estamos creando un documento HTML en la parte superior del navegador se crea un icono se puede

76
00:07:25,030 --> 00:07:32,320
mostrar un icono además del nombre de la página y si no agregamos este icono nos agrega un warning por

77
00:07:32,320 --> 00:07:34,870
ello lo que vamos a hacer es agregar esta etiqueta.

78
00:07:34,870 --> 00:07:36,650
Vamos a agregar la etiqueta de Link.

79
00:07:36,720 --> 00:07:46,150
Posteriormente agregamos el atributo de REL y le asignamos el valor de Haikai y posteriormente la referencia

80
00:07:46,210 --> 00:07:47,920
de la imagen de este icono.

81
00:07:48,250 --> 00:07:54,010
Pero debido a que en este momento todavía no estamos manejando el concepto de imágenes simplemente vamos

82
00:07:54,010 --> 00:08:00,180
a agregar un dato para que no nos marque error y en este caso agregamos este valor para que no nos marque

83
00:08:00,250 --> 00:08:00,970
este warning.

84
00:08:01,420 --> 00:08:07,210
Posteriormente vamos a ir viendo a detalle cada uno de los elementos que estamos manejando en este ejercicio

85
00:08:07,570 --> 00:08:11,410
pero de momento lo vamos a agregar para que no nos marque este warning.

86
00:08:11,410 --> 00:08:17,950
El líder de Nevins así que una vez que hemos agregado esa etiqueta de Link podemos cerrar nuestro cabecero

87
00:08:18,640 --> 00:08:22,760
así que podemos observar que este cabeceros se compone de más elementos.

88
00:08:22,770 --> 00:08:26,980
Este cabecero le agregamos la etiqueta de teito el meta y link.

89
00:08:26,980 --> 00:08:30,880
Así podemos agregar más información dentro de este cabecero.

90
00:08:30,880 --> 00:08:37,540
Toda esta información ya sea que no se muestre en el documento o únicamente se va a mostrar en el tabulador

91
00:08:37,750 --> 00:08:40,510
cuando estemos trabajando con nuestro navegador.

92
00:08:40,510 --> 00:08:47,980
Pero no es parte del cuerpo del documento HTML y podemos observar cómo se abre y cómo se cierra una

93
00:08:47,980 --> 00:08:49,000
etiqueta.

94
00:08:49,000 --> 00:08:54,940
Podemos observar que para abrir utilizamos pico parentesis y para cerrar la etiqueta vamos a utilizar

95
00:08:55,030 --> 00:09:00,970
un pico parentesis pero también una diagonal hacia adelante seguido del nombre de la etiqueta que deseamos

96
00:09:00,970 --> 00:09:08,870
cerrar ahora si vamos a agregar el cuerpo del documento HTML y la información que agreguemos dentro

97
00:09:08,870 --> 00:09:17,590
del cuerpo si se va a visualizar como parte del documento HTML y en este caso únicamente vamos a agregar

98
00:09:17,710 --> 00:09:25,190
directamente la cadena de Hola Mundo con HTML y cerramos el cuerpo de nuestro mensaje.

99
00:09:25,280 --> 00:09:31,520
Posteriormente vamos a empezar a trabajar más etiquetas y más información dentro del cuerpo de nuestros

100
00:09:31,520 --> 00:09:33,340
documentos HTML.

101
00:09:33,350 --> 00:09:39,170
Sin embargo en este momento únicamente vamos a agregar esa etiqueta para que podamos empezar a trabajar

102
00:09:39,350 --> 00:09:46,820
con nuestros documentos HTML y finalmente cerramos nuestro documento HTML.

103
00:09:46,820 --> 00:09:53,780
Podemos observar que aquí fue donde se inició la etiqueta de documento HTML y aquí cerramos la etiqueta

104
00:09:53,870 --> 00:09:58,690
HTML y todo este es el contenido de nuestra etiqueta HTML.

105
00:09:58,700 --> 00:10:05,360
Podemos observar que por un lado se compone del cabecero y por otro lado se compone del cuerpo del documento

106
00:10:05,360 --> 00:10:06,560
HTML.

107
00:10:06,560 --> 00:10:14,370
Básicamente son las dos etiquetas que va a contener la etiqueta HTML también podemos observar cómo hemos

108
00:10:14,370 --> 00:10:20,370
inventado nuestro código es decir que hemos agregado tabuladores para que podamos observar claramente

109
00:10:20,610 --> 00:10:27,240
cuándo inicia y cuándo termina una etiqueta y de esta manera podemos observar más claramente el uso

110
00:10:27,240 --> 00:10:34,430
de etiquetas de HTML esto es muy similar a como se maneja cualquier lenguaje de programación.

111
00:10:34,430 --> 00:10:40,940
Sin embargo se dice que HTML no es tal cual un lenguaje de programación sino únicamente un lenguaje

112
00:10:40,940 --> 00:10:47,330
de manejo de etiquetas pero debemos de aplicar todas las buenas prácticas de lenguajes de programación

113
00:10:47,510 --> 00:10:54,260
para que podamos entender claramente estas etiquetas que estamos agregando a nuestros documentos HTML

114
00:10:55,100 --> 00:11:00,220
dentro de cada una de las lecciones de los ejercicios que estemos manejando a lo largo de este curso.

115
00:11:00,230 --> 00:11:07,310
También tienen asociado un PDF así que para apoyarse en su curso también pueden descargar este documento.

116
00:11:07,320 --> 00:11:14,210
Este iBook dentro del PDF pueden dar clic en el nombre del archivo en caso de que tengan problemas para

117
00:11:14,210 --> 00:11:16,760
la codificación de cualquier clase.

118
00:11:16,850 --> 00:11:23,650
Sin embargo no se trata de copiar y pegar el código sino le solicitamos que codifica en línea a línea.

119
00:11:23,660 --> 00:11:30,050
Este ejercicio y únicamente en caso de problemas pueden dar clic en el nombre del archivo para apoyarse

120
00:11:30,140 --> 00:11:36,140
y dar solución a cualquier problema que se les presente en la creación de sus ejercicios de este curso

121
00:11:36,140 --> 00:11:37,040
de HTML

122
00:11:42,060 --> 00:11:44,940
como siguiente paso vamos a ejecutar nuestro proyecto.

123
00:11:45,120 --> 00:11:50,790
Vamos a dar clic derecho sobre el proyecto y seleccionamos ROM y de manera opcional.

124
00:11:50,790 --> 00:11:53,430
También podemos dar clic en el icono mostrado.

125
00:11:53,550 --> 00:12:00,330
Sin embargo el icono mostrado va a ejecutar el proyecto principal que tengamos cargado en nuestro iDEN

126
00:12:00,890 --> 00:12:07,290
y si tenemos más proyectos debemos seleccionar el proyecto actual que queremos ejecutar como proyecto

127
00:12:07,290 --> 00:12:09,420
principal para que pueda funcionar.

128
00:12:09,420 --> 00:12:15,000
El icono mostrado de lo contrario podemos simplemente dar clic derecho sobre el nombre del proyecto

129
00:12:15,270 --> 00:12:17,230
y seleccionar la opción de Run.

130
00:12:17,520 --> 00:12:19,770
Y con eso vamos a ejecutar nuestro proyecto

131
00:12:22,860 --> 00:12:27,080
y deberemos observar el resultado de la ejecución del proyecto como sigue.

132
00:12:27,090 --> 00:12:33,300
Nosotros tenemos instalado el navegador de Google Crom así que también se puede seleccionar este navegador

133
00:12:33,540 --> 00:12:40,260
como navegador por default ya que tiene algunas mejoras de integración con el líder de Nevins por ejemplo

134
00:12:40,290 --> 00:12:45,150
un plugin para depurar las aplicaciones web que estemos desarrollando.

135
00:12:45,150 --> 00:12:47,670
Pero también se puede seleccionar cualquier navegador.

136
00:12:47,760 --> 00:12:53,790
No hay ningún problema para la ejecución de estos proyectos y podemos observar en la parte superior

137
00:12:53,790 --> 00:12:59,380
como hemos comentado la información del cabecero de este documento HTML.

138
00:12:59,430 --> 00:13:08,740
En este caso es el título ola con HTML posteriormente podemos observar también la ruta en la cual estamos

139
00:13:08,740 --> 00:13:12,710
manejando de manera automática un servidor HTTP.

140
00:13:13,090 --> 00:13:19,630
Pero todo esto lo maneja de manera automática el IDE de Nevins así que podemos observar que se ha cargado

141
00:13:19,810 --> 00:13:21,940
un servidor de manera interna.

142
00:13:21,940 --> 00:13:29,260
Por ello el nombre del local Jost posteriormente también dentro del puerto 83 83 se ha cargado este

143
00:13:29,260 --> 00:13:36,010
servidor de manera temporal únicamente durante la ejecución de este proyecto y posteriormente tenemos

144
00:13:36,010 --> 00:13:41,600
el nombre del proyecto y el archivo que estamos accediendo de manera pública.

145
00:13:41,800 --> 00:13:48,190
Posteriormente en otros cursos vamos a ver que vamos a tener información pública pero también información

146
00:13:48,190 --> 00:13:50,260
privada en un proyecto web.

147
00:13:50,260 --> 00:13:55,340
En este caso debido a que estamos manejando HTML CSS y JavaScript.

148
00:13:55,510 --> 00:14:02,560
Toda esta información debe de ser pública así que por ello este archivo de índex lo podemos seleccionar

149
00:14:02,680 --> 00:14:08,590
lo podemos proporcionar directamente seguido del nombre del proyecto y esto lo estamos separando por

150
00:14:08,590 --> 00:14:09,790
una diagonal.

151
00:14:09,800 --> 00:14:16,720
Posteriormente indicamos el nombre del archivo índex punto HTML y una vez que lo hemos proporcionado

152
00:14:16,780 --> 00:14:23,830
esta ruta a nuestro navegador entonces nos va a desplegar el contenido de este documento HTML y como

153
00:14:23,830 --> 00:14:30,160
parte del cuerpo del mensaje según recordamos únicamente hemos agregado la cadena de Hola Mundo con

154
00:14:30,160 --> 00:14:38,800
HTML así que este es el body de nuestro documento HTML y si damos clic derecho a observar código fuente

155
00:14:39,160 --> 00:14:47,410
también deberemos observar el documento HTML asociado a este documento índex punto HTML el cual debe

156
00:14:47,410 --> 00:14:54,700
de ser el mismo que hemos codificado en el IDE de NetBeans así que ese es el resultado de ejecutar nuestro

157
00:14:54,700 --> 00:14:55,360
proyecto

158
00:15:00,040 --> 00:15:01,710
como conclusión de este ejercicio.

159
00:15:01,840 --> 00:15:05,300
Hemos creado nuestro primer proyecto de HTML.

160
00:15:05,320 --> 00:15:12,460
Cabe señalar que no es necesario utilizar un IDE como NetBeans ya que podemos utilizar incluso un editor

161
00:15:12,460 --> 00:15:19,900
de texto sin embargo para continuar familiarizándose con nuestros ambientes de desarrollo ese crearemos

162
00:15:19,990 --> 00:15:22,630
nuestros ejercicios con esta idea.

163
00:15:22,630 --> 00:15:29,470
Sin embargo ustedes pueden utilizar cualquier editor de texto o IDE de su preferencia ya que les vamos

164
00:15:29,470 --> 00:15:35,920
a proporcionar todo el código y vamos a crear los ejercicios paso a paso para que puedan seguir cada

165
00:15:35,920 --> 00:15:43,170
uno de los ejercicios y tener toda la documentación independientemente del IDE que deseen utilizar.

166
00:15:43,210 --> 00:15:47,260
Con eso terminamos nuestro primer ejercicio de Hola Mundo HTML.