H

T
L INTERMEDIO

M POLAR
 ¿PARA QUIÉN ES?

Este curso Intermedio es para los que ya pasaron la presentación

anterior, mostraron sus avances, y son bienvenidos. Si no has
terminado o mandado evidencias de lo anterior no te
preocupes, igual eres bienvenido. Recuerda que lo importante
es que participes y muestres avances de tu progreso.

28/06/2023 2
 TEMARIO HTML INTERMEDIO

TABLAS PRÁCTICA CON ENLACES FORMULARIOS

Dentro de este tema aprenderemos a Aquí llevaremos a cabo una práctica con Crearemos formularios simples, los cuáles si
desarrollar tablas simples hasta hacer tablas enlaces, es necesario hacerlo con archivos aprenden a hacerlos de forma correcta, haremos
con imágenes para hacer una especie de locales, ya que crearemos múltiples archivos. otra práctica con múltiples archivos, validando que
galería dinámica con una tabla. las acciones se cumplan para pasar a otra pestaña.
LISTAS ORDENADAS Y
DIV – EXPLICACIÓN BÁSICA DIV & HTML5
DESORDENADAS
Aquí veremos el concepto básico de lo que es Esto ya es la recta final, para pasar a CSS, en donde
Es necesario aprender a hacer listas ordenadas
un div en HTML, algunas utilidades y unas veremos etiquetas como, header, nav, aside, section,
y desordenadas, esto quiere decir que hay
footer. Que son etiquetas para hacer una estructura
prácticas para poner a prueba el verdadero
listas que se hacen en base a puntos y otras a
avanzada dentro de HTML.
orden de todo HTML.
base de números ascendentes.

28/06/2023 3
 TABLAS

Sabemos que son las tablas, son un conjunto de filas y columnas,

éstas son utilizadas para mostrar información, permiten estructurar
información y presentarla de manera tabulada, similar a una hoja
de cálculo o matriz.

En HTML utilizamos una etiqueta llamada <table> esta tiene aún

más etiquetas dentro para poder formar las filas y las columnas,
que son <tr> y <td>. En este caso tenemos que aprender a
estructurarlas bien para tener un buen resultado, ejemplo:

28/06/2023 4
 TABLAS EJEMPLO

Antes de iniciar a crear un ejemplo, vamos a crear un nuevo archivo en donde vamos a poner
tabla.html  En mi caso voy a crear una nueva carpeta llamada HTML-LEVEL-DOS. Si gustas
puedes ponerlo como yo.

Creamos el archivo y creamos la estructura que ya conocemos con “!”.

Vamos a comenzar insertando la etiqueta <table>, esta nada mas es como el contenedor
general, dentro escribiremos un <tr> y dentro de esa colocaremos un <td>. Ya sé, esto es algo
talachudo cuando vallamos a querer poner más categorías. Dentro de <td> va a ir la primera
categoría, por ejemplo, yo pondré frutas.

28/06/2023 5
 TABLAS EJEMPLO

Debajo de ese <td> con frutas, escribiremos la siguiente categoría que será carnes, y verduras.
Si esto lo vemos en el navegador veremos que, si se ven las categorías, pero no se ve como
tabla, así que crearemos otro <tr> para empezar a poner lo que le corresponde a cada
categoría.

Por fuera del primer <tr> creamos otro nuevo, y empezamos a poner más <td> y en cada uno
colocaremos en orden. Si en el primer <td> decía frutas entonces en ese <td> tenemos que
poner el nombre de una fruta. Si la segunda fue carnes, ahora sigue el nombre de una carne y
así hasta verduras. Si refrescamos el navegador solo se verán unas debajo de otras.

28/06/2023 6
 TABLAS EJEMPLO

Tal cual si tiene el orden que queremos, pero no tiene bordes que separen cada una, para eso
vamos a hacer lo siguiente, en la etiqueta <table> colocaremos como propiedad lo siguiente:
<table border=“2px”>  ¿Qué es esto?  Lo que hace es poner un borde a todo de 2px
La medida de pixeles define el grosor del borde.

A continuación, te dejo el ejemplo, así que antes de continuar con el siguiente tema quiero
que hagas una ´práctica usando tablas, pero ojo aquí, te propongo un reto, Si quiero todo
separado por categorías, pero en lugar de colocar fresa, carne, o lo que corresponde en texto,
quiero que lo hagas con imágenes. Date a la tarea de buscar imágenes no muy grandes para
que la tabla quede bonita. Te dejo mi ejemplo con lo que trabajamos anteriormente.

28/06/2023 7
 TABLAS EJEMPLO

28/06/2023 Diapositivas de presentación 8

 H
T
L ENLACES - PRÁCTICA

M POLAR
 ENLACES - PRÁCTICA

Ya habíamos visto cómo funcionan los enlaces, y como nos podemos llevar a otra imagen, y dale
click a una imagen para que nos lleve al origen de ella. Es hora de que hagamos un ejercicio
bastante lindo. Les daré la indicación, ustedes ya tienen el conocimiento, pero quiero mostrarles
una etiqueta más antes.

<center>  Esta etiqueta va afuera de todo, todo lo que pongamos dentro de él. Texto,
imágenes, videos, etc. Si quieres pueden usarla, aquí va el reto usando “enlaces” recuerda esto.
La consigna dice así:

- Realizar un sitio que me dé la bienvenida con un texto grande, debajo deberá tener una
imagen, y debajo un link que me diga  “Para ver información de un tema x da click”, y deberá
dirigirlos a otro archivo HTML con una tabla que muestre los datos que le prometieron al usuario
– Mucho Éxito – Los resultados los mostrarán al grupo.

28/06/2023 10
 FORMULARIOS

Aquí ya entramos en una parte un poco más laboriosa, no es difícil, pero en los formularios
con HTML tenemos muchos – inputs – Intput quiere decir ingreso de información, por eso
nosotros al introducir estos nos permitirá añadir información. Los formularios funcionan para
recabar información para posteriormente utilizarla correctamente.

Hay formularios para registrar usuarios, formularios para recabar información en sociedades,
formularios para que muchas personas voten para alguna causa, pero ahora vamos a ver
como se realizan estos.

28/06/2023 11
 FORMULARIOS - ESTRUCTURA

La etiqueta para iniciar un formulario es con la etiqueta <form>. Posterior a eso tenemos que
decidir con que vamos a empezar, y claro, por ser una explicación inicial, vamos a ver todos
los <input> que hay. Cuando ponemos un <input> nos aparecen muchas opciones para poner,
como de tipo texto, tipo numérico, de tipo email, de tipo password, etc.

Probemos colocando uno de tipo texto, que en este caso es el siguiente:

<input type=“text”>  ¿Cómo se lee esto?  Un campo de entrada de tipo texto, el type es el
tipo de campo de entrada que vamos a aceptar. Yo usaré el mismo archivo, pero tú puedes
crear otros con diferente nombre para no perder el orden de los proyectos. Si ejecutamos esto
en el navegador nos aparecerá un recuadro en donde podemos escribir lo que sea.

28/06/2023 12
 FORMULARIOS - ESTRUCTURA

Quiero aclarar algo, cuando colocas la etiqueta <form> te aparece un action o un post o un
get, por el momento puedes borrar eso y dejar la etiqueta normal, ya que aún no trabajamos
enviando formularios, y sí, posteriormente haremos pruebas de envío de formularios con Php
y MySQL. Pero primero tenemos que entender las bases.

No borres ningún input que vallamos poniendo, los que siguen colócalos debajo del anterior,
el siguiente que pondremos será de color, este te muestra un name e id. Bórralos, aún no lo
usaremos. Esto básicamente nos muestra un cuadro de color en el cuál podemos hacer click
para que nos muestre una paleta de colores mucho más amplia.

28/06/2023 13
 FORMULARIOS - ESTRUCTURA

Siguiente, de tipo date, nuevamente borra lo que no usaremos. Nos muestra un cuadro con el
día el mes y el año, si le damos click al cuadrito de la derecha nos abre un calendario en
donde podemos seleccionar alguna fecha.

El siguiente es de tipo email, al principio nos mostrará solo un cuadro como si fuera de texto,
pero vamos a ver bien el siguiente para que veas que no solo es un cuadro de texto.
Básicamente nos pide colocar el @ o no es un correo válido.

El siguiente es esencial para ver el anterior, busca el de tipo “submit”. Este tiene una
propiedad llamada value, dentro de sus comillas colocaremos el texto Enviar, y ahora sí,
podemos ingresar un email sin @ y verás que te marcará que necesitas el @ o no te dejará
enviar el formulario, ¿A dónde?, a ningún lado, solo lo limpia.

28/06/2023 14
 FORMULARIOS - ESTRUCTURA

¿Ya se está poniendo interesante verdad?, yo sé que sí, y eso que solo “validamos” el correo.
Tenemos el de tipo, checkbox. Este es un tipo de entrada que podemos poner en un
formulario para seleccionar una o más opciones, como Twitter al preguntar que elijas lo que
quieres ver.

Pero si ponemos uno de tipo radio, este solo nos permitiría elegir una opción, funcionaría
para cuando damos a elegir entre si eres Hombre o Mujer. Fácil de usar.

Vamos a hacer algo divertido, crea uno tipo “file”. Este lo que hace es decirte, Seleccionar
archivo, y te permite abrir tus archivos, escoges uno y te dice el nombre y extensión del
archivo que seleccionaste, este lo podemos usar para pedir fotos de perfil, o para usar
imágenes y modificarlas con estilos, montón de funciones para este tipo de input.

28/06/2023 15
 FORMULARIOS - ESTRUCTURA

Hay algo llamado <label>. Es un tipo de etiqueta que nos permite colocar lo que estamos
solicitando al usuario, como  <label> Ingresa tu nombre: </label>. Es algo que podemos
usar, pero usaremos otros métodos para hacerlo, y esto se hace de esta forma.

En los inputs hay una propiedad que se llama placeholder: Este se encarga de solicitar dicho
dato al usuario, y en caso de que se posicione dentro del campo y escriba, este texto
desaparece, por ejemplo: <input type=“text” placeholder=“Ingresa tu nombre”>

De este modo ya podemos agregar lo que queremos pedir sin usar label, algo fácil y dinámico
para los formularios. En los inputs también hay una propiedad más llamada require. Esta se
refiere a que, si tenemos un botón tipo sumbit, y uno de los campos no está completo, este
pedirá rellenarlo. Se puede poner después de placeholder.

28/06/2023 16
 FORMULARIOS - ESTRUCTURA

Podemos poner uno de tipo range, esto simplemente nos pone una barra color azul que permite
arrastrar esa bolita, esto nos puede funcionar para establecer rangos de edad, usarlo para establecer
rangos de tamaño si seleccionamos un texto o una imagen, etc.

En fin, hay aún muchos más, si quieres puedes ir a descubrirlos, no usaremos todos en un solo
formulario. Pero creo que ya es hora de hacer una práctica, solo nos faltó el de tipo button, pero es lo
mismo que sumbit, solo que este no cumple ninguna validación. Como etiqueta importante estando en
intermedio, usamos <br> sin cierre para dar un salto de línea y lo podemos poner al final de una
etiqueta para hacer que el próximo elemento valla abajo.

Hagamos una práctica juntos, usando lo que sabemos y enlazando unas páginas con otras, vamos
aprendiendo a hacerlas bien, es un proceso divertido, poco a poco nos vamos metiendo más en el
tema, recuerden que es importante que ustedes también hagan cosas por ustedes mismos, esto es
mejor si se practica a diario y dedicarle unas horas al día.

28/06/2023 17
 H
T
L FORMULARIOS - PRÁCTICA

M POLAR
 FORMULARIOS - PRÁCTICA

Espero que estés preparado, preparada para esta fase, al terminar esta práctica ya sabrás
como ir haciendo formularios validados, aún se podrían validar más, pero recordemos que,
para ser Intermedio, esto es algo fácil de hacer. Vamos a comenzar con este hermoso ejercicio
que me costó solo 10 minutos hacerlo.

La consigna dice así:

Realizar un sistema que contenga inicialmente un formulario que solicite, nombre,
apellido uno, apellido dos, correo y contraseña, y un botón tipo submit para validar los
datos ingresados. Si estos se cumplen dirigir al segundo archivo y que de la bienvenida,
debajo de la bienvenida deberá ir una imagen, si tu quieres puedes agregar más.
¿Estamos listos?  Si capitán estamos listos, vamos al ejercicio.

28/06/2023 19
 FORMULARIOS – PRIMERA PARTE PRÁCTICA

1. Comenzamos creando un nuevo archivo, si gustas igual puedes trabajar en el mismo, pero
recomendable hacer un nuevo archivo llamado app.html.
2. Creamos otro archivo llamado home.html. Será nuestro segundo archivo que
enlazaremos.
3. En la app, en el title le pondremos de nombre Registro, y en el body vamos colocando la
etiqueta <center> para ir centrando todo lo que pongamos.
4. Dentro de center pondremos un título <h1> Que diga: Regístrate para acceder al sitio.
5. Debajo del título, vamos a abrir un <form> pero esta vez sí vamos a dejar el action=“”.
6. Necesito que abras el archivo home, copies la URL y la peques en el action del formulario.
7. Vamos a empezar colocando un input tipo texto, con un placeholder que diga Ingresa
primer nombre, después un require para exigir que el campo sea completado y fuera dos
<br> para dar dos saltos de línea y no queden pegados los demás.

28/06/2023 20
 FORMULARIOS – SEGUNDA PARTE PRÁCTICA

1. Continuando, harás exactamente lo mismo, pero siguiendo la consigna, el primer

apellido, el segundo, el correo, y la contraseña, recuerda bien el tipo de dato que vas a
solicitar.
2. Por último, insertamos un input submit, dentro un value=“Enviar”. Ahora en caso de que
todo el formulario haya quedado correctamente contestado, enviará al usuario al archivo
home que habíamos creado.
3. Dentro del archivo home, insertas una etiqueta <center> y dentro un <h1> Bienvenido a tu
aplicación </h1>.
4. Finalmente buscarás una imagen que tú quieras y la insertas con una <img>. Si todo sale
correcto, has cumplido lo que solicitó la consigna.
5. Dejaré mis capturas de pantalla por si surge algún problema.

28/06/2023 21
 CAPTURA 1 - FORMULARIO

28/06/2023 22
 CAPTURA 2 - FORMULARIO

28/06/2023 23
 CAPTURA 3 - FORMULARIO

28/06/2023 24
 CAPTURA 4 - FORMULARIO

28/06/2023 25
 H
T
L LISTAS ORDENADAS Y
DESORDENADAS

M POLAR
 ¿QUÉ SON LAS LISTAS?

Conocemos las listas, sirven para ordenar elementos, como los de un algoritmo, pero también
sirven para ordenar cosas que realmente no tienen un orden, como la lista que nos da mamá
para ir al mercado y traer las frutas o verduras, que pases a este lado y a otro. Algo así son las
listas y para eso sirven, tanto para recordar como guardar información.

En este caso en HTML, hay dos tipos de listas:

<ol>  Listas ordenadas
<ul>  Listas desordenadas

Esto es realmente muy fácil de hacer, vamos a hacer un ejemplo rápido para que tú puedas
hacer un ejercicio con listas.

28/06/2023 27
 ¿CÓMO SE HACEN?

Listas ordenadas: Son aquellas que si tienen orden, como su nombre lo dice, y son ordenadas
porque estas si inician del 1, y sigue subiendo mientras pongamos más elementos.

<ol>
<li> Elemento 1 </li>
<li> Elemento 2 </li>
</ol>

En este caso, esta lista se va a encargar de ordenarlos como número uno y número dos, esto
funciona igual con las desordenadas, simplemente cambiando ol por ul, y funciona de la
misma forma, pero en lugar de números son puntos, por eso es desordenada, no sabes el
orden correcto de los elementos.

29/06/2023 28
 EJERCICIO PRÁCTICO

Crear una lista, ya sea ordenada o desordenada, escriba una descripción sobre cada elemento
y coloca al final una imagen representativa del elemento de esa lista.

Es algo muy fácil de hacer, pero puede ser algo tardado por las imágenes y las descripciones,
confío en que podrás darle solución a este pequeño problema.

Ahora sí, nos encontramos en la recta final de este curso de HTML Intermedio, estamos a
nada de saltar a HTML5. HTML avanzado consta de hacer todo pero todo lo que ya
hicimos, el doble o triple de rápido, pero que falta, ya se, lo que alguno de ustedes
esperaba, el tema de los DIV.
Nos vemos en la siguiente sección…. Polar

29/06/2023 29
 H
T
L DIV

M POLAR
 ¿QUÉ SON LOS DIV?

Los DIV en HTML son contenedores invisibles usados para contener elementos que vamos a
darle una función específica, y también son usados para realizar algunas animaciones, de tal
forma que el sitio llegue a ser más vivo.

La etiqueta del DIV es la siguiente: <div></div>. Parece una etiqueta común, pero sirve para
separar por partes el proyecto de una web, así como otras etiquetas que veremos más
adelante para HTML5. A el DIV le podemos asignar el papel de padre para los hijos que va a
tener, que en este caso es todo lo que tendrá dentro de él, sin importar si es un formulario.

Si deseas poner a prueba esto puedes hacerlo, colocando la etiqueta DIV afuera de todo, no
verás realmente un cambio visible, porque este solo es un concepto básico, la forma en cómo
vamos a manejar estos DIV será en el siguiente curso, en donde vamos a poder aplicar diseño
a nuestra web. Sin más, vamos a ver el último tema, HTML5.

30/06/2023 31
 H
T
L HTML5 – TEMA FINAL

M POLAR
 DIV & HTML5
HTML5 es la quinta versión del lenguaje de marcado de HTML. Define nuevas características y
mejoras en comparación con las versiones anteriores de HTML.
Fue publicado con especificaciones completas en 2014 y ha sido ampliamente adoptado y utilizado
en la actualidad para el desarrollo de sitios web. A continuación, se destacan aquellas etiquetas que
pertenecen a HTML5:

Ya vienen integrados el audio y el video, contienen las siguientes etiquetas:

Header, nav, section, article, footer.
Gráficos y animaciones, canvas.
Formularios mejorados.
Almacenamiento local.
Soporte para dispositivos móviles.
Estas son solo algunas de las nuevas características principales de HTML5.

30/06/2023 33
 FINAL Y DESPEDIDA
Excelente, parece que ya hemos concluido esta fase de conocer HTML y HTML5, de hoy en adelante
vamos a trabajar con HTML5. En fin, todo este proceso en el que te has formado y aprendido conceptos, y
practicado con tus propias ideas, ya que eso es lo importante, ya puedes considerar que sabes de HTML y
estás listo/a para pasar al siguiente nivel.

El siguiente nivel dirás que es un HTML Avanzado, y sí, tal vez, pero no lo tocaremos como un curso
totalmente enfocado a eso, lo tomaremos en el curso de CSS Básico. Y pues claro, ahora si vamos con la
parte bonita de todo esto, aprender a darle diseños a nuestros elementos, títulos, enlaces, botones,
contenedores, formularios, tablas, imágenes, etc.

Nos espera aún un largo camino que recorrer, pero de antemano de felicito por llegar hasta acá, sin más,
nos vemos en el curso de CSS que saldrá próximamente, y si ya está, anda a verlo que está demasiado
bueno.

Les manda un fuerte abrazo, su amigo Polar.

30/06/2023 34