Vamos a realizar a continuación el ejercicio de componentes HTML.
Están listos.
Vamos
el objetivo del ejercicio es poner en práctica varios de los componentes más comunes de HTML y al finalizar
deberemos observar lo siguiente según se muestra como primer paso vamos a abrir nuestro IDE y vamos
a crear un proyecto en este caso el nombre del proyecto es componentes HTML y lo depositamos en la ruta
mostrada y damos clic en Finalizar.
Ahora como siguiente paso lo que vamos a hacer es empezar a modificar el archivo de índex punto HTML.
Lo primero que hacemos es agregar la etiqueta de Doctrine HTML tal como se muestra es como la debemos
decodificar Posteriormente abrimos nuestro documento HTML y comenzamos con el cabecero de este documento.
Para ello agregamos la etiqueta de Get
posteriormente indicamos que vamos a manejar caracteres por ejemplo que pueden tener acentos.
Por ello indicamos el juego de caracteres T.F Yo en medio 8.
Esto lo vamos a agregar con ayuda de la etiqueta Metha posteriormente garantizamos un título de nuestra
página.
En este caso componentes HTML y esta cadena la vamos a encerrar dentro de la etiqueta de títol
y con eso terminamos el cabecero de nuestro documento HTML.
Ahora vamos a empezar a codificar el cuerpo de este documento comenzaremos utilizando una etiqueta que
es para manejar títulos en este caso H1 H1 significa G.T 1 y básicamente es el título más grande que
podemos utilizar.
Podremos utilizar textos más grandes pero esto ya lo vamos a especificar con hojas de estilo en este
caso cuando estamos manejando documentos HTML HTML ya tienen la etiqueta predefinida H1 para el manejo
de títulos y es el título más grande que vamos a poder utilizar por default cuando estemos manejando
documentos HTML.
Para ello la etiqueta de algunos componentes HTML la vamos a encerrar con la etiqueta H1
posteriormente vamos a imprimir un párrafo y en esa etiqueta de párrafo vamos a agregar lo siguiente.
En este caso nuevo párrafo y cerramos nuestra etiqueta de párrafo en el resultado final observaremos
que aunque en este momento estemos utilizando tabuladores dentro de la etiqueta P observaremos en el
resultado final que no respeta ese tipo de información debido a que únicamente agrega un salto de línea
un nuevo párrafo y agrega la información directamente sin respetar el formato que hayamos agregado.
Dentro de este párrafo para respetar el formato existen otras etiquetas que veremos más adelante
posteriormente vamos a agregar una etiqueta llamada creación de una tabla y vamos a utilizar las etiquetas
HTML para crear una tabla así que para ello utilizamos la etiqueta theyll.
Posteriormente indicamos algunos parámetros dentro de esta etiqueta.
Por ejemplo el parámetro de Wit que significa ancho de nuestra tabla y en este caso especificamos el
valor de 200 píxeles ya que esta información se va a manejar por default en píxeles el borde.
También vamos a indicar que va a ocupar un píxel de ancho y el Bagram color es decir el color de fondo.
Vamos a utilizar el color blanco.
Existen varios colores predefinidos en HTML por ejemplo en este caso la etiqueta de Jaitt es decir el
color blanco.
Con eso estamos definiendo nuestra tabla.
Ahora vamos a agregar algunos elementos a esta tabla.
Por ejemplo el primer elemento que podemos agregar es un renglón y dentro de los renglones vamos a empezar
a agregar celdas pero las celdas pueden ser de dos tipos de tipo Gelder o de tipo data y las celdas
de tipo Gelder se van a definir como T.
H es decir y Bolger y t resignifica T y Borrow es decir que va a ser un renglón y dentro de un th pueden
existir varios dependiendo del número de columnas que definamos en nuestra tabla.
Podemos especificar cada una de las columnas de nuestra tabla en este caso la primer columna el primer
cabecero va a ser título 1 cerramos nuestro Jez y podemos tener un segundo G.T una segunda columna dentro
de este renglón y especificamos la etiqueta título 2 y cerramos este eje y también con eso terminamos
el primer renglón de nuestra tabla así que hasta el momento nuestra tabla la hemos formado de los siguientes
elementos tenemos un primer renglón y este primer renglón tiene dos columnas así que este sería nuestro
R y estos serían nuestros C H
y posteriormente los demás elementos van a ser de tipo T de
ya que ya no van a ser G Derteano van a ser títulos sino que únicamente va a ser información que podemos
ir agregando a nuestra tabla y así podríamos ir agregando más elementos de tipo.
Pero estos elementos los debemos de agregar dentro de un nuevo renglón.
Así que para ello primero vamos a definir nuevamente un elemento t r y dentro del renglón vamos a ir
agregando estas columnas así que vamos a agregar un nuevo renglón y dentro de este renglón vamos a agregar
una nueva columna en este caso la columna de Dato 1
y podemos observar también que agregamos una segunda columna con un dato 2 y cerramos el renglón así
que hasta el momento llevamos lo siguiente en nuestra tabla por un lado hemos agregado Título 1 y también
agregamos la información de título 2
y posteriormente lo que hicimos fue agregar un segundo renglón y en este segundo renglón agregamos primeramente
la columna de Dato 1 y posteriormente agregamos el dato 2
así que esto es lo que llevamos hasta el momento y podemos observar que dentro de cada uno de los elementos
hemos tenido que definir un renglón para que podamos ir agregando estos elementos de H y t de todo esto
dentro de un elemento teiboleras así que todo esto es nuestro elemento de tipo teiboleras con las propiedades
que hemos definido según hemos indicado y cerramos finalmente nuestro elemento de tipo tabla así que
hasta el momento lo que hemos agregado a nuestro documento HTML es un título llamado algunos componentes
HTML.
También agregamos un párrafo utilizando la etiqueta P agregamos una cadena sin indicar ningún tipo de
elemento pero básicamente en este caso también se consideraría como un párrafo y posteriormente agregamos
una tabla la cual se compone de dos renglones.
Podemos observar que son dos renglones y también cada uno de los renglones tiene dos columnas una de
tipo jet y otra de tipo data T de significativo el Data así que es lo que llevamos hasta el momento
y vamos a continuar codificando este documento HTML agregamos otro elemento P un párrafo y cerramos
este elemento párrafo este elemento párrafo podríamos dejarlo abierto y el navegador en automático lo
va a cerrar.
O también podríamos cerrarlo con la siguiente sintaxis para no utilizar dos elementos simplemente podemos
indicar el elemento de párrafo y posteriormente indicando la diagonal directamente para indicar que
se va a cerrar este elemento y finalmente el pico parentesis.
Así que esta etiqueta sustituye a estas dos así que el navegador reconoce que abre y cierra este elemento
HTML.
Vamos a continuar codificando nuestro documento índex punto HTML
como siguiente paso lo que vamos a hacer es agregar un elemento de tipo Link.
Básicamente la etiqueta a define un nuevo hipervínculo y para definir el hipervínculo lo que vamos a
hacer es utilizar el elemento HR-V y posteriormente indicamos la UE R.L a donde queremos que apunte
este nuevo Link pero lo que va a observar el usuario es lo siguiente la etiqueta que se encuentra dentro
del elemento a así que el usuario va a observar link hay cursos de Global mentoring pero cuando dé clic
a este recurso lo que va a hacer internamente el navegador es abrir la página de cursos punto net así
que básicamente este elemento a define un nuevo hipervínculo
posteriormente agregamos otro párrafo y vamos a agregar ahora un elemento de tipo lista para ello vamos
a utilizar el elemento select y posteriormente a través del atributo Nain vamos a indicar el nombre
de esta lista y para agregar elementos a una lista vamos a utilizar la etiqueta de opción y dentro de
esa etiqueta vamos a especificar las opciones que queremos mostrar al usuario que pueda seleccionar
para esta lista.
Así que podemos agregar los siguientes valores valor 1 valor 2 y valor 3 y básicamente son los elementos
que va a contener esta lista.
Estos elementos deben estar dentro de un formulario HTML para que puedan funcionar correctamente sin
embargo en este caso únicamente estamos mostrando algunos elementos.
Posteriormente vamos a ver su funcionalidad y posteriormente vamos a ver el uso de formularios y los
elementos que pueden contener estos formularios también podemos agregar comentarios en HTML para agregar
un comentario.
Básicamente vamos a abrir un pico paréntesis posteriormente utilizamos un signo de admiración según
se muestra y usamos dos guiones seguidos y para cerrar este párrafo también utilizamos dos guiones seguidos
y cerramos esta etiqueta.
Así que básicamente con esto podemos ir agregando comentarios en nuestro documento HTML.
La información que agregamos dentro de un comentario no se va a visualizar hacia el cliente así que
únicamente lo vamos a utilizar para agregar ciertas anotaciones a nuestro documento HTML de manera interna
posteriormente agregamos otro párrafo y ahora vamos a agregar un elemento de tipo imagen.
Para ello vamos a utilizar el elemento y M.G. como atributo para especificar la ubicación de la imagen
vamos a especificar el atributo de Sors s RC y posteriormente indicamos la ruta donde se encuentra la
imagen.
En este caso debemos especificar cualquier ruta donde tengamos una imagen por ejemplo en la ruta de
globalmente un punto con punto Mx diagonal Images diagonal logo medio top punto PNG y posteriormente
en caso de que no se pueda mostrar la imagen podemos agregar un texto alternativo por medio del atributo
alt y especificamos el valor que queremos que se muestre.
En dado caso que el navegador no pueda desplegar la imagen así que en este caso si no se mostrará la
imagen deberíamos observar el valor del logotipo globalmente Link y finalmente cerramos la etiqueta
de tipo imagen así que con esto es que podemos incluir imágenes a nuestro documento HTML posteriormente
agregamos otro párrafo y ahora vamos a agregar un formulario para agregar un formulario.
Vamos a especificar la etiqueta form.
Posteriormente podemos agregar por ejemplo un nombre de un formulario y finalmente podemos agregar la
acción y básicamente aquí es donde se va a enviar la información que se proporcione en este formulario
así que los componentes que tengamos dentro de este formulario toda la información se va a enviar a
este recurso en algún servidor web y podemos agregar diferentes elementos a este formulario.
Por ejemplo podemos agregar un elemento de tipo filet posteriormente una leyenda
y podemos ir agregando los componentes a este elemento de tipo Falset.
Básicamente un filet nos permite organizar nuestros elementos de un formulario de una mejor manera.
Visualmente es como si definiríamos un marco y dentro de este marco podemos ir agregando nuestros elementos
del formulario
dependiendo de la cantidad de elementos que definamos en el formulario.
Pero básicamente el filtro va a agregar este marco y también podemos agregar una leyenda por ejemplo
en este caso la leyenda de tipo persona así que eso es lo que va a hacer nuestro filet y posteriormente
estamos agregando un elemento de tipo imput así que deberemos observar una caja que se despliega pero
antes de la caja estamos indicando una etiqueta.
En este caso la etiqueta de Nain y posteriormente nuestro componente de tipo imput y estamos indicando
que este elemento de tipo imput es de tipo texto.
El ancho de la caja va a ser de 30 y esta caja va a tener asignado el valor de nombre así que son algunos
de los elementos que estamos definiendo en nuestro formulario.
Cuando ejecutemos nuestro ejercicio vamos a poder observar el resultado de cada uno de estos elementos.
Posteriormente agregamos un salto de línea B.R. significa Breakthrough así que básicamente con esto
estamos abriendo y cerrando nuestra etiqueta de tipo R que es un salto de línea posteriormente agregamos
otro elemento de tipo Input text y básicamente podríamos capturar un email con este input Dext así que
por ello proporcionamos las etiquetas de email para que podamos diferenciar el input que manejamos para
el nombre.
Ahora vamos a manejar un input para el atributo de email.
Ahora vamos a manejar otro input para el elemento de mail agregamos otro salto de línea y finalmente
agregamos un botón para hacer submit de los elementos que tenga este formulario.
Cuando hacemos clic a este botón de Submit lo que va a suceder es que se va a enviar la información
del nombre y el email al elemento de tipo Axon que hemos indicado en este formulario así que se va a
enviar la información al recurso en el servidor y estos elementos se van a concatenar.
Como hemos comentado que se forma un R.L así que por medio de un signo de interrogación se van a ir
concatenando los elementos en este caso de nombre y dependiendo del valor que ya hemos proporcionado
por ejemplo el valor de nombre Ubaldo hize con catenaria.
El siguiente valor por ejemplo con el e-mail
así es como se podría formar una cadena concatenando estos atributos y así es como se enviaría la información
a nuestro recurso en algún servidor.
El procesamiento de parámetros lo vamos a estudiar en un curso posterior cuando veamos el curso de Servlets
y JSP o también en cursos posteriores.
Sin embargo en este curso lo que vamos a hacer es empezar a formalizar el concepto de formularios y
cómo vamos a ir procesando cada uno de los elementos de un formulario HTML y básicamente este botón
va a permitir enviar los datos de nuestro formulario así que cerramos la etiqueta de botón y también
cerramos nuestro Falset y finalmente cerramos la etiqueta de formulario.
Así que básicamente todo lo que tengamos dentro del formulario se va a enviar al elemento donde hayamos
indicado el atributo de acción y con eso cerramos nuestra etiqueta de Bodhi y finalmente la etiqueta
de HTML.
Y con esto concluimos la codificación de nuestro documento índex punto HTML.
Vamos a detener hasta que este vídeo y en el siguiente vídeo vamos a ejecutar este ejercicio.