Vamos a crear a continuación el ejercicio de Hola Mundo con HTML.
Están listos.
Vamos.
El objetivo es crear nuestro primer ejercicio de Hola Mundo con HTML y al finalizar deberemos observar
los siguientes según se muestra
como primer paso vamos a crear un nuevo proyecto para esto vamos a abrir nuestro IDE y vamos a realizar
lo siguiente damos clic en Feil y posteriormente ni un proyecto
seleccionamos la opción de HTML 5 y damos clic en Siguiente.
Así que podemos observar que Primero seleccionamos HTML5 y Javascript.
Posteriormente seleccionamos el tipo de proyecto HTML 5 diagonal JS Application y posteriormente damos
clic en Next.
En la versión que esté manejando podría haber ciertas diferencias sin embargo en su documentación va
a existir siempre la última versión para que puedan apoyarse también de la documentación para cualquier
cambio que puedan tener en la versión de la idea que estén trabajando.
En caso de que tenga diferencias con la versión que estamos observando y una vez que hemos seleccionado
nuestro proyecto damos clic en Siguiente
ahora lo que vamos a hacer es proporcionar el nombre del proyecto y también proporcionamos la ubicación
del mismo en la carpeta donde vamos a depositar nuestro proyecto ya debe estar creada.
Así que únicamente proporcionamos el nombre de proyecto y también proporcionamos la ruta donde vamos
a depositar este proyecto así que esta es una ruta sugerida.
Sin embargo ya debe de estar creada esta carpeta así que una vez que hemos proporcionado estos valores
damos clic en Siguiente
como siguiente paso vamos a dejar marcadas las opciones por default.
En este caso no vamos a seleccionar ninguna plantilla y damos clic en Siguiente
y por último vamos a seleccionar todas las opciones que nos muestra ya que no las vamos a utilizar en
este momento y vamos a dar clic en Finalizar
y el resultado de crear nuestro proyecto se observa a continuación.
Debemos de tener la siguiente estructura de nuestro proyecto.
El nombre del proyecto es Hola Mundo HTML y se encuentra dentro de la carpeta root y dentro de esta
carpeta vamos a comenzar a depositar nuestros documentos HTML.
En este caso este IDE ya nos ha creado un primer documento por default.
Sin embargo si élida que estemos trabajando no nos agrega este archivo podemos crearlo y depositarlo
a nivel raíz de nuestro proyecto.
En este caso como hemos comentado la raíz del proyecto se llama Saïd Root.
Esta es la información que tiene por default este archivo.
Sin embargo vamos a modificarlo a continuación
así que como siguiente paso vamos a modificar el contenido del archivo índex punto HTML primero vamos
a agregar la etiqueta Doc type HTML tal cual como se observa vamos a modificarla.
Podemos observar que en HTML vamos a utilizar Piko paréntesis y con esto vamos a abrir una etiqueta
no todas las etiquetas se deben de cerrar todo va a depender del tipo de documento HTML que vamos a
definir así que en este caso algunas de las etiquetas que vamos a definir no es necesario cerrarlas.
Esto debido a que no estamos utilizando un HTML estricto pero dependiendo del tipo de documento HTML
que definamos podríamos tener el caso de que todas las etiquetas se deben de cerrar pero en este caso
vamos a manejar un tipo de documento HTML más flexible.
únicamente indicamos el Doc type HTML y debido a que estamos manejando este tipo de documento más flexible
podemos dejar algunas etiquetas abiertas y en automático el navegador va a reconocer que algunas etiquetas
están abiertas y las va a cerrar de manera automática.
Esto lo vamos a ir viendo poco a poco a lo largo del curso así que indicamos con paréntesis signos de
admiración invertido Doctrine en mayúscula y posteriormente indicamos que estamos creando un documento
de tipo HTML posteriormente agregamos la etiqueta HTML.
Esta es la etiqueta inicial para abrir cualquier documento HTML
posteriormente agregamos la etiqueta de cabecero con la cual vamos a agregar meta información de nuestro
documento HTML como puede ser el título de este documento así que agregamos el título del documento
por medio de la etiqueta teito.
Como podemos observar en este momento si estamos abriendo y cerrando la etiqueta de teito y dentro del
contenido de estas etiquetas lo que estamos haciendo es agregar la cadena ola con HTML posteriormente
indicamos el juego de caracteres que vamos a utilizar en este documento.
Vamos a agregar este tipo de hecharse debido a que en español vamos a manejar seguramente acentos entonces
para que pueda reconocer el juego de caracteres incluyendo acentos.
Vamos a indicar meta.
Posteriormente el atributo de Char Zet y agregamos el valor de f medio 8 y debido a que este valor es
una cadena vamos a indicar por medio de Comillas que se trata de una cadena así que podemos observar
que esta etiqueta se abre pero no se cierra esto en automático el navegador lo va a cerrar pero también
podríamos haber agregado una diagonal pico parentesis.
De esta manera también se puede cerrar una etiqueta que se abre y se cierra al mismo momento.
Poco a poco vamos a ir viendo estos elementos
posteriormente vamos a arreglar lo siguiente Este es un comentario de esta manera como podemos agregar
comentarios a nuestros documentos HTML.
Para ello vamos a utilizar el pico parentesis.
Posteriormente el signo de admiración invertido y el símbolo de guión medio escribimos dos veces el
guion medio y también dos veces el guion medio y el pico parentesis para cerrar nuestro comentario y
dentro de esta etiqueta podemos agregar cualquier cadena.
En este caso estamos agregando un comentario para eliminar un warning que nos muestra el idee de Nevins
así que vamos a agregar lo siguiente para que nos elimine un warning que arroja el IDE NetBeans
cuando estamos creando un documento HTML en la parte superior del navegador se crea un icono se puede
mostrar un icono además del nombre de la página y si no agregamos este icono nos agrega un warning por
ello lo que vamos a hacer es agregar esta etiqueta.
Vamos a agregar la etiqueta de Link.
Posteriormente agregamos el atributo de REL y le asignamos el valor de Haikai y posteriormente la referencia
de la imagen de este icono.
Pero debido a que en este momento todavía no estamos manejando el concepto de imágenes simplemente vamos
a agregar un dato para que no nos marque error y en este caso agregamos este valor para que no nos marque
este warning.
Posteriormente vamos a ir viendo a detalle cada uno de los elementos que estamos manejando en este ejercicio
pero de momento lo vamos a agregar para que no nos marque este warning.
El líder de Nevins así que una vez que hemos agregado esa etiqueta de Link podemos cerrar nuestro cabecero
así que podemos observar que este cabeceros se compone de más elementos.
Este cabecero le agregamos la etiqueta de teito el meta y link.
Así podemos agregar más información dentro de este cabecero.
Toda esta información ya sea que no se muestre en el documento o únicamente se va a mostrar en el tabulador
cuando estemos trabajando con nuestro navegador.
Pero no es parte del cuerpo del documento HTML y podemos observar cómo se abre y cómo se cierra una
etiqueta.
Podemos observar que para abrir utilizamos pico parentesis y para cerrar la etiqueta vamos a utilizar
un pico parentesis pero también una diagonal hacia adelante seguido del nombre de la etiqueta que deseamos
cerrar ahora si vamos a agregar el cuerpo del documento HTML y la información que agreguemos dentro
del cuerpo si se va a visualizar como parte del documento HTML y en este caso únicamente vamos a agregar
directamente la cadena de Hola Mundo con HTML y cerramos el cuerpo de nuestro mensaje.
Posteriormente vamos a empezar a trabajar más etiquetas y más información dentro del cuerpo de nuestros
documentos HTML.
Sin embargo en este momento únicamente vamos a agregar esa etiqueta para que podamos empezar a trabajar
con nuestros documentos HTML y finalmente cerramos nuestro documento HTML.
Podemos observar que aquí fue donde se inició la etiqueta de documento HTML y aquí cerramos la etiqueta
HTML y todo este es el contenido de nuestra etiqueta HTML.
Podemos observar que por un lado se compone del cabecero y por otro lado se compone del cuerpo del documento
HTML.
Básicamente son las dos etiquetas que va a contener la etiqueta HTML también podemos observar cómo hemos
inventado nuestro código es decir que hemos agregado tabuladores para que podamos observar claramente
cuándo inicia y cuándo termina una etiqueta y de esta manera podemos observar más claramente el uso
de etiquetas de HTML esto es muy similar a como se maneja cualquier lenguaje de programación.
Sin embargo se dice que HTML no es tal cual un lenguaje de programación sino únicamente un lenguaje
de manejo de etiquetas pero debemos de aplicar todas las buenas prácticas de lenguajes de programación
para que podamos entender claramente estas etiquetas que estamos agregando a nuestros documentos HTML
dentro de cada una de las lecciones de los ejercicios que estemos manejando a lo largo de este curso.
También tienen asociado un PDF así que para apoyarse en su curso también pueden descargar este documento.
Este iBook dentro del PDF pueden dar clic en el nombre del archivo en caso de que tengan problemas para
la codificación de cualquier clase.
Sin embargo no se trata de copiar y pegar el código sino le solicitamos que codifica en línea a línea.
Este ejercicio y únicamente en caso de problemas pueden dar clic en el nombre del archivo para apoyarse
y dar solución a cualquier problema que se les presente en la creación de sus ejercicios de este curso
de HTML
como siguiente paso vamos a ejecutar nuestro proyecto.
Vamos a dar clic derecho sobre el proyecto y seleccionamos ROM y de manera opcional.
También podemos dar clic en el icono mostrado.
Sin embargo el icono mostrado va a ejecutar el proyecto principal que tengamos cargado en nuestro iDEN
y si tenemos más proyectos debemos seleccionar el proyecto actual que queremos ejecutar como proyecto
principal para que pueda funcionar.
El icono mostrado de lo contrario podemos simplemente dar clic derecho sobre el nombre del proyecto
y seleccionar la opción de Run.
Y con eso vamos a ejecutar nuestro proyecto
y deberemos observar el resultado de la ejecución del proyecto como sigue.
Nosotros tenemos instalado el navegador de Google Crom así que también se puede seleccionar este navegador
como navegador por default ya que tiene algunas mejoras de integración con el líder de Nevins por ejemplo
un plugin para depurar las aplicaciones web que estemos desarrollando.
Pero también se puede seleccionar cualquier navegador.
No hay ningún problema para la ejecución de estos proyectos y podemos observar en la parte superior
como hemos comentado la información del cabecero de este documento HTML.
En este caso es el título ola con HTML posteriormente podemos observar también la ruta en la cual estamos
manejando de manera automática un servidor HTTP.
Pero todo esto lo maneja de manera automática el IDE de Nevins así que podemos observar que se ha cargado
un servidor de manera interna.
Por ello el nombre del local Jost posteriormente también dentro del puerto 83 83 se ha cargado este
servidor de manera temporal únicamente durante la ejecución de este proyecto y posteriormente tenemos
el nombre del proyecto y el archivo que estamos accediendo de manera pública.
Posteriormente en otros cursos vamos a ver que vamos a tener información pública pero también información
privada en un proyecto web.
En este caso debido a que estamos manejando HTML CSS y JavaScript.
Toda esta información debe de ser pública así que por ello este archivo de índex lo podemos seleccionar
lo podemos proporcionar directamente seguido del nombre del proyecto y esto lo estamos separando por
una diagonal.
Posteriormente indicamos el nombre del archivo índex punto HTML y una vez que lo hemos proporcionado
esta ruta a nuestro navegador entonces nos va a desplegar el contenido de este documento HTML y como
parte del cuerpo del mensaje según recordamos únicamente hemos agregado la cadena de Hola Mundo con
HTML así que este es el body de nuestro documento HTML y si damos clic derecho a observar código fuente
también deberemos observar el documento HTML asociado a este documento índex punto HTML el cual debe
de ser el mismo que hemos codificado en el IDE de NetBeans así que ese es el resultado de ejecutar nuestro
proyecto
como conclusión de este ejercicio.
Hemos creado nuestro primer proyecto de HTML.
Cabe señalar que no es necesario utilizar un IDE como NetBeans ya que podemos utilizar incluso un editor
de texto sin embargo para continuar familiarizándose con nuestros ambientes de desarrollo ese crearemos
nuestros ejercicios con esta idea.
Sin embargo ustedes pueden utilizar cualquier editor de texto o IDE de su preferencia ya que les vamos
a proporcionar todo el código y vamos a crear los ejercicios paso a paso para que puedan seguir cada
uno de los ejercicios y tener toda la documentación independientemente del IDE que deseen utilizar.
Con eso terminamos nuestro primer ejercicio de Hola Mundo HTML.