0% encontró este documento útil (0 votos)

0 vistas88 páginas

HTML

HTML5 es la quinta versión del Lenguaje de Marcado de Hipertexto, que introduce nuevas etiquetas semánticas, la capacidad de crear gráficos y animaciones en tiempo real, y la incorporación de audio y video sin plugins. También mejora los formularios y permite la geolocalización del usuario, facilitando la creación de contenido web más dinámico y accesible. Además, el documento detalla la estructura básica de un archivo HTML, los atributos comunes y la validación de errores en el código.

Cargado por

David Sevilla Correa

Derechos de autor

Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.

Formatos disponibles

Descarga como DOCX, PDF, TXT o lee en línea desde Scribd

0% encontró este documento útil (0 votos)

0 vistas88 páginas

HTML

Cargado por

David Sevilla Correa

Derechos de autor

Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.

Formatos disponibles

Descarga como DOCX, PDF, TXT o lee en línea desde Scribd

HTML5

HTML5 es la quinta versión de HTML (Lenguaje de Marcado de Hipertexto), el lenguaje

utilizado para estructurar y dar formato al contenido en la Web. Esta versión introduce nuevas
etiquetas y características que permiten crear contenido más rico y dinámico para la web,
como la introducción de etiquetas semánticas, la posibilidad de dibujar gráficos y animaciones
en tiempo real en el navegador, la incorporación de audio y video sin necesidad de plugins
adicionales, la mejora de formularios, y la posibilidad de acceder a la ubicación del usuario a
través del navegador.

Algunas de las características más importantes de HTML5

incluyen:
 Nuevas etiquetas semánticas: HTML5 introduce etiquetas
como <header>, <footer>, <article> y <section> que permiten definir mejor la
estructura y el propósito del contenido. Estas etiquetas proporcionan una forma más
clara y consistente de estructurar contenido en la página, lo que facilita su
comprensión por parte de los motores de búsqueda y mejora la accesibilidad para las
personas con discapacidades visuales.
 Canvas: HTML5 introduce la etiqueta <canvas>, que permite dibujar gráficos y
animaciones en tiempo real en el navegador. Con esta característica, los
desarrolladores pueden crear efectos visuales impresionantes y juegos en línea sin
necesidad de utilizar software externo o plugins adicionales.
 Audio y video: HTML5 permite incorporar audio y video sin necesidad de plugins
adicionales, a través de las etiquetas <audio> y <video>. Esto significa que los
desarrolladores pueden crear contenido multimedia más atractivo sin tener que
preocuparse por la compatibilidad con diferentes navegadores o la necesidad de
descargar complementos adicionales. Además, las etiquetas de audio y video de
HTML5 ofrecen una serie de controles personalizables para el usuario, como el
volumen y la velocidad de reproducción.
 Formularios mejorados: HTML5 introduce nuevas etiquetas y atributos para los
formularios, como <input type="email"> y <input type="range">, que permiten crear
formularios más sofisticados y fáciles de usar. Los desarrolladores pueden utilizar estas
etiquetas para crear formularios más personalizados que se adaptan mejor a las
necesidades de los usuarios. Además, HTML5 introduce nuevas validaciones de
formularios que permiten a los desarrolladores crear formularios que se completan
automáticamente y detectan errores en tiempo real.
 Geolocalización: HTML5 permite acceder a la ubicación del usuario a través del
navegador, lo que permite crear aplicaciones más personalizadas y contextuales. Esta
característica es especialmente útil para aplicaciones de navegación y mapas, pero
también se puede utilizar para crear aplicaciones más interactivas que se adaptan a la
ubicación del usuario. Con la geolocalización de HTML5, los desarrolladores pueden
crear aplicaciones más útiles y personalizadas que mejoran la experiencia del usuario.

¿Qué es HTML?
Si abres la opción "inspeccionar elementos" en tu navegador, podrás ver el "código fuente" de
la página. Es decir, el archivo que nosotros vamos a crear. El navegador interpretará esa
información y eso es lo que verás en la pantalla de tu ordenador.

Dentro de cualquier aplicación web podemos inspeccionar los elementos para ver el código
fuente (os dejamos un ejemplo a continuación), es decir el fichero que vamos a generar
nosotros. El navegador web interpretará esa información y es lo que nosotros veremos en
nuestra pantalla

Lenguaje Marcado

Las siglas de HTML son HyperText Markup Language (Lenguaje de marcas de hipertexto) o
“traducido” lenguaje de etiquetas que te permite hacer referencia a todo tipo de información.

<!DOCTYPE html>

<html>

<head>

<title>This is a Title</title>

</head>

<body>

<h1>I´m a Heading</h1>

<p>This is a paragraph</p>

</body>

</html>

¿Qué es una etiqueta de HTML5? Bueno, pues es una manera de agrupar información y darle
más importancia. El nombre de la etiqueta se refiere a la información que contiene. Las
etiquetas HTML siguen una estructura "casi siempre" igual:

<etiqueta>contenido</etiqueta>

<h1> Mi primer encabezado </h1>

Hay cierta complejidad en cuanto a que no puedes usar cualquier palabra como etiqueta
de HTML5 y en la estructura que debe seguir un documento de este tipo. Esto nos lleva a
hablar de la semántica del lenguaje de marcado.

Cuando creamos documentos HTML semánticos, estamos ayudando a tener una internet capaz
de procesar información de manera independiente. Un ejemplo son los buscadores [GoogleBot
- el robot de búsqueda de Google], que son capaces de acceder, analizar e indexar páginas en
su buscador.

CODIGO DE APUNTES:

|_CODING

|_HTML5

|_01.HTML_STRUCTURE

|_index.html

|_ [Link]

|_index.html

Partes de un documento HTML

<!DOCTYPE html> Es la primera línea del documento y sirve para marcar el tipo de dicho
documento.

El <html>es el elemento raíz de una página HTML. Además, es la etiqueta en la que podemos
seleccionar el idioma a través del atributo lang.

El <head>contiene metainformación sobre la página HTML. Se usa para insertar diferentes

metadatos, es decir información que no será renderizada por el navegador.

El <body>define el cuerpo del documento y es un contenedor de todos los contenidos visibles,

como encabezados, párrafos, imágenes, hipervínculos, tablas, listas, etc.

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

TIPO DOCUMENTO
Para indicar que se trata de un document html al principio de nuestro código debemos hacer
uso de la etiqueta.
<!DOCTYPE html>

 Cabecera o <head>
 La etiqueta de cabecera o <head> es la primera parte que se incluye en el interior de
las etiquetas <html>.
 En ellas incluimos nuestros metadatos, que son elementos no visibles por el usuario
pero que conforman información al navegador. También es el lugar donde se relaciona
con otros documentos.
 Cuerpo o <body>
 Es el cuerpo de la página y se encuentra dentro de las etiquetas <html> e
inmediatamente después de <head>.
 Dentro del <body> incluimos todas las etiquetas que tienen un efecto visual y que el
navegador renderiza para que el usuario pueda observar la representación de las
mismas.
 Composición de una etiqueta HTML
<nombre-etiqueta nombre-atributo="valor-atributo">content</nombre-etiqueta>
 Podemos decir que la parte fundamental de una etiqueta está compuesta por la
apertura [<apertura-etiqueta>] y el cierre de la etiqueta [</cierre-etiqueta>].
 Y os preguntaréis si podéis poner el nombre de la etiqueta que queráis y la respuesta
es NO, ya que HTML nos da un listado de etiquetas con las que trabajar
 Como último punto debéis tener en cuenta que tiene tanta importancia el contenido
como el buen uso o encapsulamiento en una etiqueta. Esto viene provocado por los
robots que leen nuestro contenido no lo entienden, pero si la etiqueta.

<h1>I´m a title</h1> 👍🏼

<p>I´m a title</p> 👎🏽

Atributos HTML
Dentro de las etiquetas nos podemos encontrar atributos. Los atributos
contienen cierta información sobre la etiqueta o su modo de actuar
(contenido), es decir, proporcionan información adicional.
<p id="name">Alberto Rivera</p>
En este punto vemos que <p> sería la etiqueta y hemos añadido un
atributo id cuyo valor asignado es “name”, de este modo tenemos una
etiqueta con un atributo de tipo identificador (id) que hace referencia al
contenido de dicha etiqueta.
Ahora os volveréis a preguntar si podemos usar un atributo a nuestra
elección y la respuesta es si y no, es decir cada etiqueta tiene un conjunto
de atributos que podemos usar pero existen algunos casos en los que
podemos crearlos libremente.
En resumen:
1. Todos los elementos HTML pueden tener atributos
2. Los atributos proporcionan información adicional sobre los
elementos .
3. Los atributos siempre se especifican en la etiqueta de inicio
4. Los atributos generalmente vienen en pares de nombre/valor
como: nombre="valor"

Comentario HTML
Por último y para finalizar decir que en ocasiones queremos dejar un
comentario dentro de nuestro fichero HTML y que no sea visible para el
usuario en el navegador.

Shortcut: mayús + alt + A
 El usuario no verá este mensaje, solamente lo veremos nosotros y los
compañeros que tengan acceso a nuestro fichero.
Atributos comunes HTML
 HTML está formado por etiquetas. Cada etiqueta tiene una misión y
tarea y contendrá cierto contenido relacionado con su misión. Y
además tenemos los atributos, que son palabras clave de texto que
modifican ligeramente el comportamiento de la etiqueta que lo
contiene.
Atributo id
 El identificador id se suele usar cuando queremos localizar un
elemento dentro de nuestro documento y sabemos que dicho
elemento o etiqueta no se va a repetir dentro de nuestro documento.
 Este es un identificador ÚNICO, por lo que varios elementos no
podrán tener el mismo id. También lo utiliza JavaScript para acceder y
manipular el elemento con la identificación específica.
 Para usarlo simplemente añadimos id y añadimos el nombre como
valor del atributo. Este nombre no deberá comenzar por números y
puedes mezclar mayúsculas, minúsculas u otros caracteres.

<div id="personal_info">
<p>Alberto Rivera</p>
<p>Desarrollador Full Javascript</p>
</div>

Atributo class
 La idea de la clases es asociar características comunes a diferentes
etiquetas, es decir si tenemos varios <p> que queremos que
visualmente sean iguales podemos asignarles la misma clase y así su
visualización en el navegador será similar.
 Por lo tanto, esta será la principal diferencia entre id y class, la
posibilidad de asociar estilos comunes a varios elementos.

<div class="personal_container" id="personal_info">

<p class="personal_text">Alberto Rivera</p>
<p class="personal_text">Desarrollador FullStack</p>
</div>

 Al tener varios <p> la clase personal_text podemos dotarlas de

contenido sin necesidad de hacerlo por separado. Lo único complejo
es que una etiqueta puede tener varias clases.
 Debemos tener en cuenta que cuando queramos añadir varias clases
se hace dentro de class y envolvemos con comillas dobles “” pero
dejamos un espacio de separación entre nombre de clase y nombre
de clase.

<div class="personal_container" id="personal_info">

<p class="personal_text name">Alberto Rivera</p>
<p class="personal_text job">Desarrollador Full Javascript</p>
</div>

Atributo idioma
 Utilizar el atributo lang es muy sencillo. Como cualquier otro atributo,
se incluye en la etiqueta del elemento y se utiliza = para asignarle un
valor.
 Siempre debe incluir el langatributo dentro de la <html>etiqueta,
para declarar el idioma de la página web. Esto se usa para ayudar a
los motores de búsqueda y navegadores.
<p lang="es">Soy un texto.</p>

 El atributo lang se puede utilizar en elementos anidados para

especificar un idioma diferente al idioma del elemento padre.

<!doctype html>
<html lang="es">
....
<body>
<p>Texto en español</p>
<p lang="en">Text in english.</p>
<p>saludo, en inglés <span lang="en">hello</span>, que significa
hola.</p>
</body>
</html>

Atributo no traducible
 También podemos utilizar el atributo translate para indicar si el
contenido de un texto es o no traducible.

<p>
hoy he comido un <span translate="no">Sandwich</span>.
</p>

Atributo title
 El atributo title define alguna información adicional sobre un
elemento.
 El valor del atributo de título se mostrará cuando el usuario detenga
el ratón sobre el elemento un instante.
<div>
<img src="[Link]"
alt="logotipo de Wiki Boot."
title="Es una imagen con el logotipo" />
</div>

Atributo dirección
 El atributo dir nos ayuda a marcar la dirección de nuestras cadenas
de texto que se visualizan dentro de las aplicaciones web. Esto es
perfecto cuando tenemos que trabajar con multi-idioma, ya que
algunos idiomas como el japonés su lectura es de izquierda a
derecha.
 Por defecto el valor es ltr por ello solamente tendremos que indicar
los campos rtl.
<p>Dirección de izquierda a derecha.</p>
<p dir="rtl">Dirección de derecha a izquierda.</p>

Atributo dataset
 La mayoría de los metadatos que se incluyen en una web están
insertados dentro del <head>. Sin embargo, no es la única manera
que tenemos de insertarlos, también podemos hacerlo a través de las
etiquetas que contengan el atributo con prefijo data- (data-share por
ejemplo).
 Normalmente esto está orientado a usarse junto a js:
<div id="compartir">
<a href="[Link]
data-share="190">Twitter</a>
<a href="[Link]
data-share="340">Facebook</a>
</div>

En este ejemplo de código, el atributo data-share representará el número de

veces que ha sido compartido un enlace de la página.

Atributo style
 El atributo style utiliza las etiquetas de HTML y sirve para incrustar
código CSS directamente en la etiqueta. También se le llama css en
línea.
 Normalmente la mejor forma de insertar este código css es a través
de un documento con la extensión .css aparte. Esto nos aporta mejor
visualización, ordenación y facilidad. Sin embargo, hay situaciones en
las que puede que nos veamos obligados a insertar este css en línea.
 Os vamos a poner un ejemplo de código de este atributo style:
<p style="background: blue; color: whitesmoke;">Usando el atributo
style</p>

 En definitiva estamos usando código css en el propio documento

HTML, pero como os podéis imaginar hacer esto en una aplicación
grande puede llenar la pantalla de líneas de código innecesarias que
podríamos tener en un archivo .css aparte.

Validación de errores HTML

 Por defecto, los navegadores usan un método intuitivo que continúa
con la carga del documento a pesar de no haber entendido a la
perfección todo lo que hemos escrito desde nuestro vscode.
 Para evitar esto , podemos utilizar un Validador HTML, que es un
sistema que analiza nuestro código y nos dice el número de errores
que tenemos, junto a una breve descripción del mismo.
 Si queremos usar el validador, tenemos 3 maneras:

1. Address: indicando la URL que queremos validar.

2. File Upload: subiendo directamente el archivo HTML que queremos
evaluar.
3. Text Input: para ello podremos copiar nuestro código y pegarlo
directamente en el validador.

 Además, si hacemos clic en More Options podemos marcar opciones

más avanzadas, como por ejemplo el botón de “Show source”, que
nos mostrará nuestro código por líneas y así podremos identificar
más rápido los errores a corregir. Otra opción interesante es
“Outline”, que nos muestra el código en forma de árbol. Por último,
“Image report” generará un archivo tipo informe de las imágenes de
nuestra web.

Etiquetas cabecera HTML

Las etiquetas de cabecera o head no tienen representación o visualización
en el contenido que renderiza (pintar) el navegador. Por ello son meta-
información adicional.

Etiquetas de relación
 Bienvenidos a la sección de cabeceras de HTML. Cuando hablamos
de la estructura de un documento de HTML5 una parte que tratamos
fue la cabecera o <head> ahora vamos a ver las etiquetas más
importantes que se suelen usar dentro de estas.
 El <head>elemento es un contenedor de metadatos (datos sobre
datos). Los metadatos HTML son datos que no se muestran al usuario
sobre el documento HTML. Además, contiene el título del documento
y el enlace a las hojas de estilos que asociemos.
 En la etiqueta <head> se sitúa el título del documento. Aquí también
encontraremos el enlace a la hoja de estilos que asociemos a nuestro
documento.
 En resumen, el elemento HTML <head> se coloca entre
la <html>etiqueta y la <body>etiqueta y es un contenedor para los
siguientes
elementos: <title>, <style>, <meta>, <link>, <script>y <base>.

Etiquetas de relación: Título y Codificación

Dentro de <head> es aconsejable usar las etiquetas <title> y <meta>.
<head>
<title>Título</title>
<meta charset="utf-8" />
</head>
 La etiqueta <meta> con el atributo charset indica al navegador que
utilice la codificación UTF-8 para mostrar el texto. De este modo
evitaremos problemas con vocales acentuadas, o caracteres como”
ñ”.
 Y el <title> es el nombre que se muestra en la ventana de nuestro
navegador. Si lo cambiamos y vamos al navegador veréis su uso.

Etiquetas de relación: Favicon

 El Favicon es un icono que hace referencia a nuestra aplicación, es
una pequeña imagen que se muestra junto al título de la página en la
pestaña del navegador. Por defecto nuestro navegador tiene un
elemento en el caso de chrome una esfera pero podemos colocar el
que queramos.
 Para agregar un favicon a nuestra web, tenemos que crear una
carpeta en la raíz de nuestro proyecto llamada assets y guardar la
imagen de favicon en esta carpeta. Un nombre común para una
imagen de favicon es "[Link]".
 Para ello tenemos que hacer uso de la etiqueta <link> con dos
atributos rel=”icon” y href=”ruta-imagen” como en el ejemplo:

Etiquetas de relación: Añadir hoja de estilos CSS y Script

 También dentro de nuestra cabecera enlazamos tanto los ficheros de
estilos como los de scripting, para ello vamos a crear un fichero CSS3
en la raíz del proyecto llamado [Link] y otro JS en la raíz del
proyecto también llamado [Link]. Y los vamos a enlazar.
<link rel="stylesheet" href="[Link]" type="text/css" />
<script type="text/javascript" src="./[Link]"></script>
 Como veis para estilos usamos la etiqueta <link> y para javascript la
etiqueta <script>. Para comprobar que ya están enlazados vamos a
seguir los pasos a continuación:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<script type="text/javascript" src="./[Link]"></script>
<link rel="stylesheet" href="./[Link]">
<title>My first document</title>
</head>
<body>
<p>Esto es una prueba de que funciona la conexión entre archivos</p>
</body>
</html>

[Link]
Una vez creados todos los documentos con su información, abrimos el
[Link] en el navegador para ver si hemos podido conectar o no
nuestros ficheros.
p{
color: blueviolet;
}

Etiquetas de relación: Meta Viewport

 El name="viewport" dentro de la etiqueta <meta> es el área visible

del usuario de una página web. Varía según el dispositivo: será más
pequeño en un teléfono móvil que en la pantalla de un portátil…
 Cuando tenemos una aplicación web optimizada para dispositivos
móviles deberemos añadir la siguiente etiqueta:
<meta name="viewport" content="width=device-width, initial-scale=1">
 Esto le da al navegador instrucciones sobre cómo controlar las
dimensiones y la escala de la página.
 width=device-widthestablece el ancho de la página (que variará
según el dispositivo).
 La initial-scale=1.0parte establece el nivel de zoom inicial cuando el
navegador carga la página por primera vez.

Etiquetas de relación: Compatibilidad con navegadores

 X-UA-compatible en html es otro meta-tag útil en la página HTML y
este meta-tag se relaciona mayormente con el navegador. El modo
Edge le dice a Internet Explorer que muestre el contenido en el modo
más alto disponible.
Y se representa del siguiente modo:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Etiquetas metadatos
 Esta etiqueta de metadatos será <meta> y ofrece una gran cantidad
de opciones dentro de la cabecera de un documento HTML. Puede
contener los atributos name y content y servirán para indicar
metadatos al documento.
 Son usados por los buscadores para definir la información principal de
nuestra web (temática, descripción), por lo que será muy importante
que lo tengamos correctamente configurados.

Etiquetas metadatos: Otros metadatos incluidos por Google son

 Usando el atributo google, los valores nositelinkssearchbox, que

indica a google que no muestre el buscador en sitelinks y el valor
notranslate para indicar que no se debe traducir la página.
 Por último, el atributo robots que recibirá parámetros y se le indica al
robot de google si debe indexar la página o no. Estos robots de
Google son como “spiders” que se encargan de entrar en nuestra
web y establecer un puntaje sobre accesibilidad, experiencia de
usuario y recolectan datos de la página. Simulan ser un usuario que
hace clic en enlaces, navega por la web y demás acciones.

<head>
<meta name="google" content="nositelinkssearchbox" />
<meta name="google" content="notranslate" />
<meta name="robots" content="index, nofollow" />
<meta name="robots" content="none" />
<meta name="googlebot-news" content="nosnippet">
</head>
 Existe además un último atributo http-equiv usado para que los
robots del buscador sepan que se deben cambiar las cabeceras HTTP
al realizar ciertas acciones. Hay que tener en cuenta que este
elemento no tiene soporte en algunos navegadores.
<head>

<meta http-equiv="refresh"
content="300;url=[Link] />

<meta http-equiv="expires" content="Fri, 29 Apr 2016 12:56:00 GMT" />

<meta http-equiv="pragma" content="no-cache" />

<meta http-equiv="cache-control" content="no-cache" />
</head>

RRSS
 Igual que para añadir título y descripción a una página web lo
hacemos con etiquetas de metadatos, existen un tipo de etiquetas de
metadatos especiales orientadas a redes sociales. Así, se pueden
añadir títulos y descripciones especiales para estos sites.
 Por ejemplo Facebook utiliza el protocolo Open Graph, que lo que
hace es que, cuando nosotros insertamos en nuestra página web un
enlace de facebook este protocolo lo analizará en busca de
metadatos que puedan incluir información adicional.
 En caso de encontrarlos, creará sus propios metadatos. Lo que esto
nos posibilita es personalizar nuestra web aún más ya que convierte
este enlace insertado en información como si la vieses en la propia
red social.
 Las propiedades obligatorias en Open Graph serán og:title, que hace
referencia al título del objeto, og:type, que es el tipo de objeto que
insertamos. og:image, que será la imagen que represente al objeto
que estamos insertando y og:url, que será la url del objeto que se
usará como ID.
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="[Link]" />
<meta property="og:url"
content="[Link] />
<meta property="og:image"
content="[Link] />
</head>
 Por su parte Twitter utiliza Twitter Cards, que servirá para lo mismo
que la anterior herramienta. Esta permitirá modificar datos como el
formato y tipo de la información mostrada, el nombre del autor de la
página del enlace, el título, descripción e imagen de presentación,
etc.
<head>
<meta property="twitter:card" content="mi_imagen_perfil" />
<meta property="twitter:creator" content="@Alberto" />
<meta property="twitter:title" content="Título" />
<meta property="twitter:description" content="Descripción" />
<meta property="twitter:image:src" content="mi_imagen.jpg" />
</head>
Hay que aclarar que para usar Twitter Cards debemos registrarnos
previamente en Twitter Developers y deberán analizar si nuestra web
cumple o no los requisitos.
RESUMEN:
1. Qué son las etiquetas de cabeceras y los tipos que existen.
2. Que el <head> contiene metadatos o cosas que como usuarios no
vemos en la web y el <body> contendrá toda la parte visual.
3. Los elementos que podemos usar dentro de la <head> etiqueta
4. Qué son las etiquetas de metadatos y para qué sirven.
5. Los atributos especiales de Google.
6. Cómo funcionan los robots de Google.
7. Cómo usar el atributo http-equiv.
8. Qué son las etiquetas de redes sociales.
9. Cómo usar las herramientas que las redes sociales ponen a nuestra
disposición.

Etiquetas de texto
 En una descripción rápida, se puede decir que en un documento
HTML existen dos tipos de etiquetas: las que contienen texto y las
que agrupan información (pueden incluir textos).
 Existen algunas etiquetas que simplemente cambian la visualización
del contenido y a nivel sintáctico nos ayuda a entender el elemento
que queremos representar. Por ello vamos a realizar una breve
mención de algunas de ellas y dejar algún ejemplo de uso, ya que
todas funcionan igual.
<p>Me gustaría hacer un <em>énfasis</em> especial en este punto.</p>
<p>Esta parte es <strong>muy importante.</strong></p>
<p>Esta parte quiero que esté <mark>subrayada</mark></p>
<p>Esta parte es <i>itálica</i></p>
<p>Esta parte ni me va ni me <b>viene</b></p>
<p>si escribo burro con v es <u>vurro</u></p>
<p>Estaba yo pensando... que igual esto no es tan
<s>importante.</s></p>
<p>Esta parte es importante
<span style="color: red;"> y esta muy importante.</span>
</p>
<p>Como dijo un sabio <cite>"A programar se aprende
programando."</cite></p>
<p>Esta parte me sobraba así que la he <del>eliminado</del></p>
<p>Me apetecía insertar una palabra random <ins>cacerola.</ins></p>
 Es importante entender que estas etiquetas no modifican el
contenido sino que se diseñaron para mostrar tipos especiales de
texto.
Etiquetas de texto: Etiquetas que modifican el texto
 Vamos a ver algunas etiquetas que nos permiten modificar el
significado de la información que contiene el bloque al que
pertenecen.

 Vamos a ver algunos ejemplos para entender el uso de algunas de las

etiquetas de modificación que hemos visto en la tabla anterior.
<p>Esto es una potencia 4<sup>2</sup></p>
<p>El agua es H<sub>2</sub>O</p>

<p>
<q cite="[Link]
En un lugar de la Mancha...
</q>
</p>
Etiquetas de texto: Etiquetas orientadas al desarrollo

<p>Pulsa las teclas <kbd>CTRL</kbd>+<kbd>T</kbd>...</p>

Etiquetas de texto: Etiquetas de edición

 Están dedicadas a la edición posterior a la publicación de un texto o
web.

 Puede ocurrir que publiquemos nuestra página, pero queramos editar

la publicación, pero queremos que el usuario vea en la web que la
información ha cambiado. Para eso podemos usar estas etiquetas de
edición. <ins> será para insertar información y darle unos estilos
concretos y <del> servirá para que la información que metamos
dentro aparezca tachada.
Etiquetas de texto: Qué hemos aprendido
Etiquetas que modifican la apariencia del elemento.
Etiquetas que modifican el texto.
Etiquetas orientadas al desarrollo.
Etiquetas orientadas a la edición.
Etiquetas de agrupación
 En una descripción rápida, se puede decir que en un documento
HTML existen dos tipos de etiquetas: las que contienen texto y las
que agrupan información (pueden incluir textos).
 Estas son etiquetas que hacen referencia a los elementos de texto
que componen nuestra aplicación. Casi toda aplicación tiene este tipo
de elementos y por ello vamos a conocer alguna de las etiquetas más
usadas.

Etiquetas de agrupación: Etiqueta p

 La etiqueta <p> es la etiqueta apropiada para contener textos
(siempre que no sean títulos, enlaces o listas, que tienen su etiqueta
propia). <p> proviene del inglés paragraph (párrafo) y por tanto debe
ser usada para contener solo dicho contenido.
 Los párrafos por defecto en todos los navegadores son elementos de
bloque, por lo que si necesitamos incluir varios elementos de texto
distintos, lo correcto es usar un párrafo nuevo como en el ejemplo a
continuación.
<article>
<h1>¡Hola a todos!</h1>
<p>Soy un párrafo</p>
<p>Soy un párrafo en otra línea</p>
</article>
Podría tentarnos la idea de incluir un salto de línea de la siguiente manera.
<article>
<h1>¡Hola a todos!</h1>
<p>Soy un párrafo
Yo quiero ser un párrafo en otra línea</p>
</article>
 Pero si vemos este código en un navegador (como por ejemplo
Google Chrome) veremos que el salto de línea esperado, no se
produce. Esto sucede debido a lo que os comentábamos más arriba,
por defecto un elemento <p> será un elemento de bloque.

Etiquetas de agrupación: Etiqueta div

 La etiqueta <div> es una de las más usada en HTML. “Div” proviene
del inglés “divider” y define una división o una sección en un
documento HTML. Además, se utiliza como contenedor de elementos
HTML, que luego daremos estilos con CSS o manipularemos con
JavaScript.

 Una de las propiedades más usadas del <div> es a nivel de

presentación, ya que por defecto un <div> se muestra como un
bloque, ocupando la altura que necesite según su contenido, pero al
mismo tiempo ocupando todo el ancho que pueda.
 Un elemento a nivel de bloque (display: block como veremos más
adelante) siempre comienza en una nueva línea y los navegadores
agregan algo de espacio (un margen) antes y después del elemento.
 Otro ejemplo de etiqueta con el contenido a nivel de bloque es la
etiqueta <p>.
 Además, dentro de un <div> se podrá poner cualquier tipo de
contenido.
 Este comportamiento viene dado por la propiedad CSS
denominada display.
 Veamos un ejemplo de página que haga uso de <div> para mostrar
unas tarjetas de visita con información personal.
<div>
<h2>Steve Rogers</h2>
<p>Soldier</p>
<p>Tel: 658 22 77 66</p>
</div>
<div>
<h2>Bruce Banner</h2>
<p>Scientific</p>
<p>Tel: 658 22 77 66</p>
</div>
 Además, en el ejemplo anterior podríamos ir más allá e incluir los dos
<div> dentro de un <div> que actuará como elemento padre o
contenedor de ambos:
<div>
<div>
<h2>Steve Rogers</h2>
<p>Soldier</p>
<p>Tel: 658 22 77 66</p>
</div>
<div>
<h2>Bruce Banner</h2>
<p>Scientific</p>
<p>Tel: 658 22 77 66</p>
</div>
</div>

Etiquetas de agrupación: Etiqueta ul

 Para representar una lista desordenada (unordered list, de ahí ul), es
decir, guiada por bullets, podemos usar la etiqueta <ul> con la
particularidad de que en su interior cada elemento de la lista estará
dentro de un <li>. Cada <li> será un elemento de la lista
desordenada.
<ul>
<li>Elemento Uno</li>
<li>Elemento Dos</li>
<li>Elemento Tres</li>
</ul>

Etiquetas de agrupación: Etiqueta ol

 Por otro lado si queremos una lista ordenada, podemos usar la
etiqueta <ol> con la misma particularidad que en su interior cada
elemento de la lista estará dentro de un <li>. Podemos decir que la
única diferencia entre <ol> y <ul> es la ordenación de los elementos
que contienen.
<ol>
<li>Elemento Uno</li>
<li>Elemento Dos</li>
<li>Elemento Tres</li>
</ol>
 Como curiosidad HTML nos permite jugar con los elementos de
nuestra lista a través de sus atributos indicando por ejemplo el orden
inverso.
<ol reversed>
<li>Elemento Uno</li>
<li>Elemento Dos</li>
<li>Elemento Tres</li>
</ol>
 Y por si os lo estabais preguntando, efectivamente podemos
combinar ambos tipos de listados, podremos crear una lista ordenada
con listas desordenadas dentro o viceversa, ¡os dejamos un ejemplo
de código a continuación y os animamos a que probéis distintas
combinaciones para ver el resultado!
<ol>
<li>Agua</li>
<li>Cocacola
<ul>
<li>Cocacola-zero</li>
<li>Cocacola light</li>
<li>Cocacola normal</li>
</ul>
</li>
<li>Zumo de naranja</li>
</ol>

Etiquetas de agrupación: Etiqueta blockquote

 Seguimos con la etiqueta <blockquote> que como su propio
nombre indica sirve para generar citas, cuando la usemos en nuestro
navegar nos generará estilos propios como si de una cita literaria se
tratase. Os dejamos un ejemplo en código de su uso:
<blockquote cite="[Link]
18592299/">
<p>Yo soy IronMan</p>
<footer>
<cite class="author">Tony Stark</cite> en
<cite class="title">Avengers End Game</cite>
</footer>
</blockquote>

Etiquetas de agrupación: Etiqueta figure

 Cuando estamos trabajando con imágenes podemos agruparla con un
texto de referencia o pie de foto, en ocasiones usamos
un <div> pero en la medida de los posible deberíamos usar
una <figure> y para el valor referencial el <figcaption>.
<figure>
<img src="ruta-imagen" alt="texto-alternativo"/>
<figcaption>Escuela de Desarrollo Web</figcaption>
</figure>

Etiquetas de agrupación: Etiqueta para descripciones

 Por último y la verdad es que bastante poco usada podemos usar un
listado de descripciones para un elemento. Algo como tenemos en
cualquier diccionario. Se compone de las etiquetas dl para
agrupar , dt para el campo a describir y dd para cada una de las
acepciones que tiene.
<dl>
<dt>Gallina</dt>
<dd>Animal de granja</dd>
<dd>Persona que carece de valor</dd>
</dl>
Etiquetas de agrupación: Qué hemos aprendido
1. La diferencia entre etiquetas de texto y las etiquetas que agrupan
contenido.
2. Los elementos de bloque <div> y <p>.
3. Cómo usar las listas.
4. Ilustraciones (figuras).
5. Cómo usar las etiquetas de listas de descripciones.

Etiquetas de hipervínculos
 Principalmente tenemos una etiqueta especial denominada anchor o
<a> que se utilizará para todo lo referente a enlaces/links. Esta
etiqueta nos sirve para crear enlaces, vínculos o hipervínculos.
 Una de las etiquetas más importantes en HTML es el anchor o <a>,
cuya idea es hacer referencia a una dirección o URL donde está
alojado ese otro documento de destino, que puede ser una página
web, un archivo PDF, una imagen o cualquier otro tipo de documento.

Etiquetas de hipervínculos: Etiqueta a

 Esta etiqueta tiene la particularidad que debe tener como mínimo un
atributo, el href, que es el atributo en el que especificamos la
dirección a la que nos redirigirá el elemento cuando hagamos clic
sobre él.
 Pero la principal característica que hizo que las páginas web se
convirtieran en lo que son hoy en día son los hiperenlaces. Ya que
también permite que un usuario navegue entre distintos documentos
HTML.
 Como hemos indicado los enlaces se escriben mediante la
etiqueta <a> (proviene del inglés anchor), y poseen una propiedad
llamada href, que permite indicar la ruta del HTML al que vamos a
enlazar.

<a href="[Link] a la página web de Google</a>

Otros atributos que puede recibir esta etiqueta son:
Otros atributos que puede recibir esta etiqueta son:
Atención: El atributo download podría no funcionar dependiendo del
navegador, ya que no cuenta con soporte en navegadores antiguos.
<ul>
<li>
<a rel="author" target="_self"
href="[Link]
mipagina
</a>
</li>
<li><a href="[Link] target="_blank">mipagina</a></li>
<li><a href="[Link] download="[Link]">PDF</a></li>
<li><a href="[Link] hreflang="en">PDF</a></li>
</ul>

Etiquetas de hipervínculos: Esquema de URL

Vamos a explicar la estructura de una URL:
1. https:// ➡️ protocolo de transferencia de hipertexto. Se usa para cifrar
información sensible. Es el más usado. También existe http que en
este caso no es cifrado. Existen otros, como ftp, que sirve para enviar
ficheros.
2. blog ➡️ Subdominio, es un subgrupo o subclasificación del nombre de
dominio el cual es definido con fines administrativos u organizativos.
3. .minegocioonline ➡️ Dominio, que es un nombre único que identifica a
una subárea de Internet. El propósito principal es traducir las
direcciones IP de cada activo en la red.
4. .com ➡️TLD, que es la dirección de tu sitio web.
5. /subcarpeta ➡️ subcarpeta, que será la carpeta que almacene nuestro
archivo .HTML.
6. /página ➡️ Página. Será el archivo HTML que tendrá que cargar. Otras
extensiones suelen ser php. Los archivos PDF y similares el
navegador tratará de abrirlos y, en caso de no conseguirlo, los
descargará para permitir al usuario abrirlos con programas
específicos.
Así, todo junto quedaría de la siguiente forma:

Si tenéis curiosidad por saber más acerca de los dominios que existen, os
dejamos una tabla con algunos de los más conocidos:
 Una parte que no se ha mencionado es la relativa a las querystrings,
que son variables que tienen información que se envía a la URL a la
hora de hacer consultas más específicas.
 En la consulta [Link] la q=perro
indica al navegador que queremos buscar en todo google la palabra
perro y que nos saque las referencias.
Como adicional, os dejamos las características que tendrán estos
enlaces por defecto:
1. Un enlace no visitado aparecerá subrayado y en color azul
2. Un enlace visitado aparecerá subrayado y en color morado
3. Un enlace activo aparecerá subrayado y en color rojo.
Etiquetas de hipervínculos: Curiosidades
 Como tip extra os dejamos con algo que os será muy útil al principio,
y es la posibilidad de “saltar” de un lado a otro de la aplicación
utilizando el atributo id, a continuación, os dejamos un ejemplo que
podéis probar en vscode:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<title>My first document</title>
</head>
<body>
<p><a href="#C4">ir al capítulo 4</a></p>
<h2>capítulo 1</h2>
<p>Este capítulo va sobre ba bla bla</p>
<h2>capítulo 2</h2>
<p>Este capítulo va sobre ba bla bla</p>
<h2>capítulo 3</h2>
<p>Este capítulo va sobre ba bla bla</p>
<h2 id="C4">capítulo 4</h2>
<p>Este capítulo va sobre ba bla bla</p>
</body>
</html>
Mediante el atributo href enlazamos el id a través de #. Esto hace que al
darle click al <p> inicial nos “redirija” al h2 que tiene dicho id.
Etiquetas de hipervínculos: Qué hemos aprendido
1. Qué son las etiquetas de hipervínculos, los tipos que existen y los
atributos que pueden recibir.
2. Hemos aprendido el esquema de una URL y qué elementos lo
componen
3. Cómo navegar por nuestra página web enlazando el anchor o <a> a
través del atributo href de hipervínculos con el id del elemento al que
queramos navegar.

Etiquetas de sección
 Vamos a hablar de algunas etiquetas que aparecieron con
la versión de HTML5 que hacen referencia a secciones dentro de
una aplicación web.
Mencionar que gracias a la aparición de estas etiquetas han surgido
estructuras semánticas más correctas mejorando varios aspecto de
nuestras aplicaciones como:
1. Como representa el navegador nuestro contenido.
2. Gestión del posicionamiento o SEO.
3. Accesibilidad para personas con capacidades especiales, como la
ceguera, que necesitan navegar en nuestra aplicación.

Etiquetas de sección: Estructura semántica

 Vamos a empezar a usar etiquetas para agrupar nuestro contenido
semánticamente correcto. Para ello creamos nuestro header,
después el nav, seguimos con tantos articles y en su
interior section que necesitemos, el aside y por último el footer.

Etiquetas de sección: Explicación de cada etiqueta

 El <header>es el elemento superior de nuestra página web,
habitualmente contiene el logo de la compañía y el título de la página
web. Representa un contenedor de contenido introductorio o un
conjunto de enlaces de navegación.
 Los elementos de encabezado van del <h1> al <h6>.
Semánticamente debemos usarlos de mayor a menor
 Esto será incorrecto debido a que estamos poniendo un <h4> antes
que un <h2>. Por lo tanto tendremos que ir en orden estilando cada
header con el código css que deba tener cada elemento.
 La <nav> contiene la navegación de la página web. Tenéis que tener
en cuenta que NO todos los enlaces de un documento tienen que
estar dentro de nuestro <nav>. Está diseñado solo para bloques
principales de enlaces de navegación.
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/php/">PHP</a>
</nav>
 La etiqueta <aside> debe contener elementos que aportan
información complementaria.
 El contenido del aside debe estar indirectamente relacionado con el
contenido de alrededor.
<p>
Mi nombre es Alberto Rivera y os estoy explicando las etiquetas de
secciones
</p>

<aside>
<h4>Etiqueta Aside</h4>
<p>Como vemos este es un contenido adicional</p>
</aside>
La etiqueta <article>representa una división de un contenido. Un artículo
debe tener sentido por sí mismo y debe ser posible distribuirlo
independientemente del resto del sitio. Algunos ejemplos de cómo usar la
etiqueta <article>:
1. Publicación en un foro
2. Entrada en un blog
3. Noticias
<article>
<h2>Ironman</h2>
<p>
Anthony Edward "Tony" Stark fue un multimillonario industrial,
anterior
Director General de Industrias Stark
</p>
</article>

<article>
<h2>Capitán América</h2>
<p>
El Capitán Steven Grant "Steve" Rogers es un veterano de la Segunda
Guerra
Mundial, miembro fundador de los Vengadores y el primer superhéroe
del mundo.
</p>
</article>

<article>
<h2>Thor</h2>
<p>
Thor Odinson es el Dios del Trueno, anterior Rey de Nuevo Asgard y
miembro fundador de los Vengadores.
</p>
</article>
La etiqueta <footer>es el elemento inferior de la página web y suele
contener enlaces y el copyright. Un <footer>normalmente contiene:
1. información de autoría
2. información registrada
3. Información del contacto
4. mapa del sitio
5. volver a los enlaces superiores
6. documentos relacionados
<footer>
<p>Autor: Alberto Rivera</p>
<p><a
href="[Link]
</footer>

Etiquetas de sección: Ejemplo de Header HTML5

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<link rel="stylesheet" href="./[Link]">
<title>Header</title>
</head>

<body>
<header class="page-header">
<h1>Cute Puppies Express!</h1>
</header>

<main>
<p>
I love beagles <em>so</em> much! Like, really, a lot.
They’re
adorable and their ears are so, so snuggly soft!
</p>
</main>

</body>

</html>

Etiquetas de sección: Ejemplo de Header CSS3

[Link]-header {
background: no-repeat left/cover url("./assets/[Link]");
display: flex;
height: 120px;
min-width: 120px;
align-items: center;
color: #fff;
text-shadow: #000 0 0 0.2em;
}

[Link]-header > h1 {
font: bold calc(1em + 2 * (100vw - 120px) / 100) "Dancing Script", cursive,
fantasy;
margin: 2%;
}

main {
font: 1rem "Fira Sans", sans-serif;
}

Etiquetas de sección: Ejemplo de nav HTML5

<!DOCTYPE html>
<html lang="en">

<body>
<nav class="crumbs">
<ol>
<li class="crumb"><a href="#">Bikes</a></li>
<li class="crumb"><a href="#">BMX</a></li>
<li class="crumb">Jump Bike 3000</li>
</ol>
</nav>

<h1>Jump Bike 3000</h1>

<p>
This BMX bike is a solid step into the pro world. It
looks as legit as it rides and is built to polish your skills.
</p>

</body>

</html>

Etiquetas de sección: Ejemplo de nav CSS3

nav {
border-bottom: 1px solid black;
}

.crumbs ol {
list-style-type: none;
padding-left: 0;
}

.crumb {
display: inline-block;
}

.crumb a::after {
display: inline-block;
color: #000;
content: ">";
font-size: 80%;
font-weight: bold;
padding: 0 3px;
}

Etiquetas de sección: Ejemplo de aside HTML5

<body>
<p>Salamanders are a group of amphibians with a lizard-like appearance,
including short legs and a tail in both larval
and adult forms.</p>
<aside>
<p>The Rough-skinned Newt defends itself with a deadly
neurotoxin.</p>
</aside>
<p>
Several species of salamander inhabit the temperate rainforest
of
the Pacific Northwest, including the Ensatina,
the Northwestern Salamander and the Rough-skinned Newt.
Most salamanders are nocturnal, and hunt for insects, worms
and other small creatures.
</p>
</body>

</html>

Etiquetas de sección: Ejemplo de aside CSS3

aside {
width: 40%;
padding-left: 0.5rem;
margin-left: 0.5rem;
float: right;
box-shadow: inset 5px 0 5px -5px #29627e;
font-style: italic;
color: #29627e;
}

aside > p {
margin: 0.5rem;
}

p{
font-family: "Fira Sans", sans-serif;
}

Etiquetas de sección: Ejemplo de article HTML5

<!DOCTYPE html>
<html lang="en">

<body>
<article class="forecast">
<h1>Weather forecast for Seattle</h1>
<article class="day-forecast">
<h2>03 March 2018</h2>
<p>Rain.</p>
</article>
<article class="day-forecast">
<h2>04 March 2018</h2>
<p>Periods of rain.</p>
</article>
<article class="day-forecast">
<h2>05 March 2018</h2>
<p>Heavy rain.</p>
</article>
</article>

</body>

</html>

Etiquetas de sección: Ejemplo de article CSS3

.forecast {
margin: 0;
padding: 0.3rem;
background-color: #eee;
font: 1rem "Fira Sans", sans-serif;
}

.forecast > h1,

.day-forecast {
margin: 0.5rem;
padding: 0.3rem;
font-size: 1.2rem;
}

.day-forecast {
background: right/contain content-box border-box no-repeat
url("./assets/[Link]") white;
}
.day-forecast > h2,
.day-forecast > p {
margin: 0.2rem;
font-size: 1rem;
}

Etiquetas de sección: Ejemplo de footer HTML5

<!DOCTYPE html>
<html lang="en">

<body>
<article>
<h1>How to be a wizard</h1>
<ol>
<li>Grow a long, majestic beard.</li>
<li>Wear a tall, pointed hat.</li>
<li>Have I mentioned the beard?</li>
</ol>
<footer>
<p>© 2018 Gandalf</p>
</footer>
</article>

</body>
</html>

Etiquetas de sección: Ejemplo de footer CSS3

article {
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
}

footer {
display: flex;
justify-content: center;
padding: 5px;
background-color: #45a1ff;
color: #fff;
}
Etiquetas de sección: Qué hemos aprendido
1. Qué es una etiqueta de sección, cuáles existen y cómo usarlas.
2. Hemos visto ejemplos de las principales secciones que nos ayudarán
en el futuro.

Etiquetas de tablas
 Las tablas están incluidas en HTML desde sus primeras versiones y
son una forma fantástica de mostrar datos claramente.
 El mundo de la tablas va cayendo en desuso pero no viene mal hacer
un pequeño repaso de la construcción básica de tablas por sí alguna
vez os encontráis con la necesidad de trabajar con ellas.
 Como es evidente, las tablas HTML nos permiten a los desarrolladores
web organizar los datos en filas y columnas.

Etiquetas de tablas: Etiqueta table

 Para crear una tabla tenemos que usar la etiqueta <table> que se
comporta como elemento agrupar de subetiquetas como <thead> ,
para la cabecera o <tbody> para el cuerpo de la tabla. Por último, se
puede también añadir un <tfoot> para el pie de la tabla y <caption>
para ponerle título a la tabla.
 Dentro de cada una de las estas partes encontraremos las filas de la
tabla etiquetadas como <tr> (del inglés table row) y cada uno de los
elementos etiquetados como <td> (del inglés table data).
 Vamos a ver un pequeño ejemplo de una tabla para representar la
información de marcas de coches, modelos y color.
<table>
<thead>
<tr>
<th>Marca</th>
<th>Modelo</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peugeout</td>
<td>406</td>
<td>Rojo</td>
</tr>
<tr>
<td>Ford</td>
<td>Mustang</td>
<td>Negro</td>
</tr>
</tbody>
</table>
Añadiéndole un poco de estilo a nuestro ejemplo de código de arriba
podemos conseguir una sencilla tabla como esta:

CSS
table, th, td {
border:1px solid black;
}

Etiquetas de tablas: Combinar celdas

 Una cosa que hay que mencionar es que las <td> y <th> etiquetas
pueden incluir atributos para modificar el cómo se comportan. Las
más destacadas en este caso son colspan y rowspan. Colspan es un
atributo que indica el número de columnas que debe ocupar la celda.
Rowspan por su parte será igual pero con las filas.
En el siguiente ejemplo de código vamos a añadir una celda que ocupe 3
columnas:
<table>
<tr>
<th>Nombre</th>
<th>Precio</th>
</tr>
<tr>
<td>Coca cola</td>
<td>3€</td>
</tr>
<tr>
<td>Agua</td>
<td>1.5€</td>
</tr>

<tr>

<td colspan="2">Sum: 4.5€</td>
</tr>
</table>
Por último, se pueden agrupar columnas con <colgroup> que contendrán
elementos <col> || Si usáis el ejemplo veréis que las dos primeras columnas
tendrán el fondo rojo y la siguiente azul.:
<table>
<colgroup>
<col span="2" style="background:red">
<col style="background:blue">
</colgroup>
<tr>
<th>Alumno</th>
<th>Curso</th>
<th>Edad</th>
</tr>
<tr>
<td>Alberto Rivera</td>
<td>Fullstack</td>
<td>26</td>
</tr>
<tr>
<td>Ganfalf el gris</td>
<td>Master en Istar</td>
<td>indeterminado</td>
</tr>
</table>
Etiquetas de tablas: Qué hemos aprendido
Qué son las tablas y para qué podemos usarlas.
Las principales etiquetas dentro de las tablas.
Cómo combinar y agrupar elementos de tablas.

Etiquetas multimedia HTML

 Cuando hablamos de etiquetas que representan contenido
audiovisual nos referimos a las imágenes, los vídeos y los audios
aunque también haremos aquí una mención a los iframe que nos
permiten incrustar una aplicación e interactuar con ella.

Etiquetas img
 Cuando queremos incluir una imagen usaremos la etiqueta <img>,
es una etiqueta que dispone de varios atributos que nos permite
modificarla aunque los obligatorios son src y alt.
 El primero hace referencia a la ruta donde se encuentra la imagen, ya
sea una url o una ruta de nuestro equipo, y la segunda hace
referencia al texto alternativo que aparecerá en caso de que la
imagen no funcione o para personas con capacidades especiales.
 <img src="ruta" alt="texto alternativo"/>
 Otros que no son obligatorios son el width y el height determina el
tamaño de la imagen. Lo correcto es indicar estos valores mediante
CSS.
<img src="ruta" alt="texto alternativo" width="200" height="200"/>
Los formatos en los que se puede presentar una imagen son los siguientes:
Etiquetas img: Etiqueta picture
 Cuando tenemos un conjunto de imágenes con diferentes
resoluciones lo correcto es usar la etiqueta <picture> que nos
permite indicar el uso de una imagen u otra en base al tamaño de la
pantalla en la que se muestra nuestro contenido.
 El elemento <picture>contiene dos etiquetas: una o más
etiquetas <source> y una etiqueta <img>. Source indicará la imagen
que se tiene que mostrar en función del tamaño de nuestra pantalla.
 Por último, se indica una etiqueta img como alternativa por si no
coincidiese el tamaño de nuestra pantalla con ninguna de las
opciones del source.

Etiquetas img: Etiqueta picture

 Cuando tenemos un conjunto de imágenes con diferentes
resoluciones lo correcto es usar la etiqueta <picture> que nos
permite indicar el uso de una imagen u otra en base al tamaño de la
pantalla en la que se muestra nuestro contenido.
 El elemento <picture>contiene dos etiquetas: una o más
etiquetas <source> y una etiqueta <img>. Source indicará la imagen
que se tiene que mostrar en función del tamaño de nuestra pantalla.
 Por último, se indica una etiqueta img como alternativa por si no
coincidiese el tamaño de nuestra pantalla con ninguna de las
opciones del source.
 Os dejamos con un ejemplo de código en el que se muestra lo que
acabamos de definir y además os dejamos los tamaños de pantalla
que se utilizan como norma general a la hora de realizar media
queries (en css), que serán estas medidas estándar que se usan en
base al tamaño de la pantalla del que os hablábamos hace un
momento:
<picture>
<source media="(min-width: 600px)"
srcset="-[Link]" />
<source media="(min-width: 300px) and (max-width: 600px)"
srcset="[Link]" />
<source media="(max-width: 50px)"
srcset="[Link]" />
<img src="[Link]" alt="HTML5 medium" />
</picture>
 Además, tenemos el atributo srcset que nos servirá para mostrar una
imagen u otra dependiendo de la densidad de píxeles de nuestra
pantalla.
 Así pues, esta etiqueta brinda a los desarrolladores web más
flexibilidad para especificar recursos de imágenes.

Etiquetas img: Etiqueta Map

 Como extra os dejamos la etiqueta <map> que se utiliza para
insertar un mapa de imagen en nuestra página web. Un mapa de
imagen es una imagen con áreas en las que se puede hacer clic.
 El atributo obligatorio para esta etiqueta será el atributo name, que
estará asociado con el atributo usemap de la etiqueta <img> y eso
hará que se conecten ambos elementos.
 El elemento <map>tendrá una serie de elementos <area> , que
definirán las áreas en las que se podremos hacer clic en nuestro
mapa.
 La etiqueta <area>define un área dentro de un mapa de imagen.
Estos elementos podrán estar agrupados dentro de un <map>
Os dejamos con un ejemplo de código como siempre para que lo probéis
(necesitaréis una imagen dentro de la carpeta assets para que funcione):
<map name="infographic">
<area shape="poly" coords="130,147,200,107,254,219,130,228"
href="[Link]
target="_blank" alt="HTML"/>
</map>
<img usemap="#infographic" src="./assets/[Link]" alt="MDN
infographic" />

Etiquetas img: Qué hemos aprendido

1. Las etiquetas que existen para mostrar imágenes.
2. Los atributos que acompañan a las etiquetas más comunes.
3. Los diferentes formatos de imágenes.
4. Cómo insertar imágenes de mapas en nuestra web.

Etiquetas de contenido externo

 Seguramente en algún momento nos hayamos planteado la
posibilidad de insertar contenido en formato vídeo o audio de
servicios como Youtube o Vimeo, pero no sabemos cómo podemos
hacer para que el dichoso vídeo se vea en nuestra aplicación… pues
bien, ¡para eso tenemos este tipo de etiquetas, que posibilitarán este
tipo de inserciones!

Etiquetas de contenido externo: Etiqueta iframe

 En el caso que queramos embeber una aplicación dentro de nuestra
web podemos usar la etiqueta <iframe> es muy habitual usarse
cuando queremos incrustar Youtube o Spotify pero sirve para
cualquier tipo de aplicaciones que lo contemplen.
 Le damos click a insertar y nos aparecerá una miniatura del vídeo con
el iframe que tenemos que insertar a la derecha:
<iframe width="560" height="315" src="[Link]
title="YouTube video player"
frameborder="0" allow="accelerometer;
autoplay; clipboard-write; encrypted-media; gyroscope;
picture-in-picture" allowfullscreen>
</iframe>
 Como podemos comprobar, se nos han incrustado un montón de
atributos y contenido adicional y podremos ir jugando con estos
valores hasta llegar al resultado esperado.

Etiquetas de contenido externo: Etiquetas embed y object

 Antiguamente se usaba la etiqueta <embed> para incrustar
contenido flash en las webs. Actualmente esa etiqueta se ha
sustituido por <object>, que incluye parámetros en su interior.
Vamos a ver un ejemplo:
<object data="[Link]">
<param name="quality" value="high" />
</object>
 El atributo data dentro del <object> será el archivo que debemos
cargar, y la etiqueta <param> contendrá los demás parámetros.
También podremos especificar el formato del que se trata, etc.
Etiquetas de contenido externo: Qué hemos aprendido
Las etiquetas de contenido multimedia incrustado que existen y cómo
usarlas.
Ejemplo práctico de cómo usar un iframe en nuestra app.
Insertar contenido flash en nuestra web.

Etiqueta vídeo
 Con HTML5 se introdujo la posibilidad de mostrar vídeos directamente
en nuestra web. Para ello tendremos que usar en nuestro código
HTML la etiqueta <video>.
 Os recordamos que en esta sección nos referiremos siempre a
insertar vídeos que tenemos almacenados en nuestra base de datos o
archivo local, no será posible insertar vídeos de clientes externos con
esta etiqueta <video>

Vídeo: Etiqueta vídeo

 Para insertar vídeos en HTML tenemos una etiqueta concreta, que es
la etiqueta <video>.
 <video>contiene una o más <source> etiquetas con diferentes
fuentes de video. El navegador elegirá la primera fuente que admita.
 El texto entre las etiquetas <video>y </video> solo se mostrará en
navegadores que no admitan el elemento <video>.
 Vamos a ver algunos de los atributos de la etiqueta que nos permite
configurar nuestro vídeo como autoplay (se reproducirá el vídeo en
cuanto cargue, es decir, automáticamente), controls (los controles
de vídeo como pause, play, stop… se mostrarán en pantalla) o
el width que será el ancho que ocupará el cuadro de vídeo en
nuestra pantalla.
<video src="./assets/thepower.mp4" autoplay controls width="600">
Tu navegador no admite el elemento <code>video</code>.
</video>
 Si tenéis curiosidad por saber todos estos elementos os dejamos un
enlace a la documentación oficial de MDN. Os dejamos además una
tabla con los principales formatos de vídeo:
Etiqueta Audio
 Antiguamente se usaba la etiqueta <bgsound>, pero con la llegada
de HTML5 ésta se considera deprecated y lo correcto será usar la
etiqueta <audio> cuando queramos insertar archivos de audio en
nuestras webs.

Audio: Etiqueta
 Al igual que hemos visto el uso de vídeo podemos usar también un
reproductor de mp3 para gestionar nuestros audios.
<audio src="audio.mp3" preload="none" controls></audio>
 La etiqueta <audio>se utiliza para incrustar contenido de sonido en
un documento. Además, contiene una o más <source>etiquetas con
diferentes fuentes de audio. El navegador elegirá la primera fuente
que admita.
 El texto entre las etiquetas <audio>y </audio> solo se mostrará en
navegadores que no admitan el <audio>elemento.
 Los atributos más usados junto a esta etiqueta son autoplay, loop,
muted y controls, todos del tipo boolean y que ofrecen posibilidades
como que se reproduzca automáticamente, que se reproduzca el
contenido en bucle, que se silencie el audio o que se muestren los
controles de reproducción del navegador.
<audio controls autoplay loop>
<source src="ejemplo_audio.mp3" type="audio/mpeg">
Esto es un ejemplo de la etiqueta audio.
</audio>
Os dejamos además una tabla con los principales formatos admitidos por los
navegadores:
Subtitle
A continuación os vamos a enseñar cómo podemos dotar a nuestras páginas
web de subtítulos, algo que seguramente en algún momento os será de
gran utilidad!

Subtitle: Etiqueta track

La etiqueta <track>inserta pistas de texto para
elementos <audio> o <video> y se usará para añadir subtítulos, archivos
de subtítulos u otros contenidos de texto que queremos que se visualicen
cuando el contenido sea reproducido.
El formato de estos archivos de texto deberá ser WebVTT (es decir, tendrán
la extensión .vtt al final del archivo). Este formato se introduce con HTML5.
Su sintaxis es algo así:
WEBVTT
00:03.000 --> 00:05.000
<v Alberto>
El fullstack development o desarrollo
web es el arte de construir aplicaciones
La línea numérica indica el inicio y final de la aparición de la barra de
subtítulos. Con la etiqueta <v> indicamos el personaje que habla.
<video controls src="thepower.mp4" autoplay controls width="600">
<track default kind="captions" srclang="es" src="[Link]" />
Sorry, your browser doesn't support embedded videos.
</video>

Etiquetas formularios HTML

Los formularios son los elementos en los que se integran los botones y las
áreas de texto que se utilizan para que los usuarios introduzcan sus datos o
que puedan elegir entre varias opciones. Veamos las etiquetas que se
utilizan para la creación de formularios en HTML5.

Creación de un formulario
Los formularios son las piezas HTML5 que nos permiten recoger la
información que introduce el usuario. Hay algunos elementos que son
básicos dentro de nuestro formulario.

Creación de un formulario: Etiqueta form

Siempre usamos la etiqueta <form> para englobar o encerrar todo el
contenido del formulario. En esta etiqueta se suelen definir tres atributos:

action , que sirve para definir la localización donde se enviará la

información que se recoja en el formulario, y
method, que lo usaremos para definir el método HTTP en el que se
enviará esta información en la que puede ser
get o post.
name, que hace referencia al nombre del formulario.
<form name="mi formulario" action="/next-page"
method="post"></form>

<form action="/[Link]" target="_blank" accept-charset="utf-8">

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
</form>
<form action="/[Link]" method="post" novalidate
enctype="multipart/form-data">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>

<form action="/[Link]" method="get" autocomplete="on">

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="email">Email:</label>
<input type="text" id="email" name="email"><br><br>
<input type="submit">
</form>

Creación de un formulario: Etiqueta input

La etiqueta <input> es la etiqueta más versátil, define un campo dentro de
un formulario y tiene tres atributos principales :
La etiqueta <input>especifica un campo de entrada donde el usuario puede
ingresar datos.
Esta etiqueta es la más importante de un formulario, y se podrá mostrar de
diferentes formas en función de sus types:
El atributo type define el comportamiento que tendrá el input por defecto.
Algunos de los tipos de inputs
son: text, checkbox, date, number, password, reset, radio, submit, fil
e...
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text"> (por defecto)
<input type="time">
<input type="url">
<input type="week">

El atributo name especifica un nombre a cada uno de los <input>del

formulario. Además, se utiliza para hacer referencia a elementos de
JavaScript o para hacer referencia a datos de formulario después de enviar
un formulario, por lo que este atributo nos ayudará a la hora de enviar la
información recogida al backend. Solo los formularios que contengan este
atributo enviarán información.

<label for="fname">First name:</label>

Campos de texto
La etiqueta <input> puede tener diferentes types, entre los que se
encuentran los de tipo texto, que serán:
<input type="email"> el teclado mostrará botones especiales como .com y
@
<input type="hidden">info que queremos enviar con el formulario pero que
no
se vea en la pantalla
<input type="password"> no aparecerán los caracteres visibles al escribir.
<input type="search"> para búsquedas
<input type="tel"> tipo teléfono, desplegará teclado numérico
<input type="text"> (por defecto)
<input type="url">
<textarea>
A estos inputs les pueden acompañar los atributos autocomplete, que indica
si queremos que aparezca información anteriormente escrita en este campo
y placeholder, que será un texto a modo de sugerencia/ayuda para el
usuario.
Existe además uno complementario que es spellcheck para que el
navegador compruebe la ortografía cuando escribimos.
Campos de texto: Input de tipo text
El campo de texto, como bien indica su nombre, es el que nos permite
insertar texto en un formulario. El usuario podrá insertar texto visible sobre
el campo.
<input type="text" id="identificador" size="tamaño"
name="nombre" value="texto por defecto"/>
De esta forma, si queremos crear un campo de texto para poder insertar 70
caracteres que contenga un email, lo definiremos de la siguiente forma.
<input type="text" id="email" name="email"
size="70" value="usuario@[Link]"/>
Campos de texto: Input de tipo password
Cuando un usuario inserte una contraseña dentro de un formulario
necesitaremos, casi seguro, que el valor de la contraseña no aparezca y que
por el contrario aparezcan caracteres como asteriscos.
<input type="password" id="identificador" size="tamaño"
name="nombre"/>
Si queremos definir un campo que acepte contraseñas de 20 caracteres lo
codificaremos de la siguiente forma:
<input type="password" id="clave" name="clave" size="20"/>
Campos de texto: Etiqueta textarea
Además de los inputs tenemos la etiqueta <textarea> que es muy similar
al input con el type=”text ” con la diferencia que no se autocierra y nos
permite recoger textos con mayor volumen, como son los comentarios,
descripciones, observaciones… Esta etiqueta también puede utilizar el
atributo id para enlazarse con un <label>.
La etiqueta <textarea>define un control de entrada de texto de varias
líneas. Además, se usa a menudo en un formulario, para recopilar las
entradas de los usuarios, como comentarios o reseñas.
Como curiosidad, comentar que un <textarea> puede contener una
cantidad ilimitada de caracteres y el texto se muestra por defecto en una
fuente de ancho fijo (generalmente Courier).
El atributo name es necesario para hacer referencia a los datos del
formulario después de enviar el formulario. Asimismo, el atributo id es
necesario para asociar el área de texto con una <label>.
Como siempre os dejamos un ejemplo de código para mayor facilidad:
<label for="comments">Comentarios:</label>
<textarea id="comments">Este será el contenido de los
comentarios</textarea>
Campos de texto: Algunos de los atributos más usados son
minlength y maxlength en los input de tipo text son usados para indicar
un tamaño mínimo o máximo de caracteres en una entrada de datos. Así
podremos restringir un input para que al menos tenga n caracteres, o que
no se exceda de n caracteres.
En el ejemplo estamos diciendo que el input de tipo texto referente al “nick”
debe ser mínimo de 2 caracteres de largo y máximo 8.
<form method="post" action="/user">
<label for="nick">nickName:</label>
<input type="text" name="nick" placeholder="Su nick"
minlength="2" maxlength="8">
<button type="submit">Enviar</button>
</form>
Campos numéricos
Si deseamos obtener información o cantidades numéricas en un formulario,
tenemos a nuestra disposición dos tipos de etiquetas <input>
<input type="range">
<input type="number">
min y max para los inputs de type number que igual manera que con los
campos de texto, podemos restringir los campos números mediante un
valor máximo y un valor mínimo.
En este ejemplo, la edad que debemos rellenar podrá ir de los 14 a los 99
años.
<form method="post" action="/user">
<label for="age">Edad:</label>
<input type="number" name="age" placeholder="Su edad" min="14"
max="99">
<button type="submit">Enviar</button>
</form>
Campos numéricos: Atributo step
El atributo step especifica los intervalos de números legales para un campo
de entrada.
Ejemplo: si el valor de step es = "5", los números válidos serían -5, 0, 5, 10,
etc.
Este atributo se puede usar junto con los atributos max y min que vimos
más arriba para crear una validación más sofisticada.
Este atributo funciona con los siguientes tipos: número, rango, fecha, fecha
y hora local, mes, hora y semana.
<form>
<label for="points">Points:</label>
<input type="number" id="points" name="points" step="5">
</form>
Campos date & hour
Si nuestra intención es que el usuario introduzca una fecha concreta, en
lugar de utilizar un campo de texto, lo ideal sería utilizar un control
llamado datepicker, que es básicamente un calendario incorporado en HTML
que se le abrirá al usuario. Existe lo mismo para las horas, en este caso el
timepicker. Los tipos de inputs de fecha y hora son:
<input type="date">
<input type="datetime-local">
<input type="month">
<input type="time">
<input type="week">
min y max para los inputs de type fecha y hora son aptos de igual
manera que con los campos de texto, podemos restringir los campos
números mediante un valor máximo y un valor mínimo. Igualmente se
puede usar el atributo step.
<form name="formulario" method="post" action="/[Link]">

Selecciona la fecha deseada:
<input type="date" name="fecha" min="2034-03-25" max="2038-05-25"
step="2" />

Selecciona la hora deseada:
<input type="time" name="hora" min="18:00" max="21:00" step="3600"
/>
</form>
Botones | check | radios
Mediante los botones podremos realizar operaciones de envío del
formulario, de manipulación de datos, borrado,…
Existen dos formas de insertar botones dentro de un formulario: el elemento
input y el elemento button. La sintaxis para un botón mediante un elemento
input será, como vimos en la anterior sección:
<input type="button" value="TextoBotón"/>
Botones | check | radios: Input checkbox
También tenemos los checkbox nos permite capturar un dato del usuario
mediante un elemento de check. El checkbox puede tener dos valores,
seleccionado o no seleccionado.
<input type="checkbox" id="identificador" name="nombre"/>
odemos hacer es generar un checkbox que esta preseleccionado. Para ello
utilizamos el atributo checked.
<input type="checkbox" id="identificador" name="nombre"
checked="checked"/>
Si os preguntáis para qué podemos usar un checkbox tenemos el ejemplo
claro de unas condiciones y podríamos representarlo de la siguiente
manera.
<input type="checkbox" id="condiciones" name="condiciones"/>
Está de acuerdo con las condiciones explicadas más arriba.
Los checkbox suelen ir en grupos para seleccionar varias opciones. Por
ejemplo podríamos tener el siguiente código con el que podamos
seleccionar qué lenguaje de programación queremos aprender.
<input type="checkbox" name="lenguaje" value="html">HTML
<input type="checkbox" name="lenguaje" value="javascript">Javascript
<input type="checkbox" name="lenguaje" value="css">CSS
<input type="checkbox" name="lenguaje" value="xml">XML
Botones | check | radios: Input radio
Con los elementos de radio podemos ofrecer un conjunto de opciones al
usuario de tal manera que solo pueda elegir una de ellas. La sintaxis que
seguiremos en los elementos input de tipo radio será la siguiente:
<input type="radio" id="identificador" value="valor" name="nombre"/>
En el caso de los elementos radio toma un papel principal el atributo name.
Ya que para poder agrupar opciones todos tendrán que tener el mismo valor
de atributo name.

Así, si queremos crear un grupo de radios para que nos elija una edad le
podremos crear de la siguiente forma:
<input type="radio" id="menos18" value="menos18"
name="edad"/>Menos de 18
<input type="radio" id="18a30" value="18a30" name="edad"/>18 a 30
<input type="radio" id="31a50" value="31a50" name="edad"/>31 a 50
<input type="radio" id="mas50" value="mas50" name="edad"/>Más de 50
Al igual que sucedía con los campos de entrada de tipo check, podemos
marcar por defecto el elemento radio mediante el atributo checked.
<input type="radio" id="identificador" value="valor"
name="nombre"
checked="checked"/>
Listas de selección
Si necesitamos mostrar una lista extensa de datos tenemos a nuestra
disposición elementos de listas, que permiten al usuario ver varias opciones
pero que obligará a que elija únicamente una.
Listas de selección: Etiqueta select
La etiqueta <select>se utiliza para crear una lista desplegable. Se usa con
mayor frecuencia en un formulario, para recopilar información obtenida de
la selección del usuario.
El atributo name es necesario para enlazar el select con el resto del
formulario, es decir, es necesario para que la información recogida se envíe
correctamente (si no lo ponemos no se enviará ningún dato).
El atributo id es necesario para asociar la lista desplegable con una
etiqueta.
Dentro de la etiqueta <select> habrá diferentes etiquetas <option>, que
contendrán las posibilidades que el usuario tiene para elegir.
Es importante recalcar que en un <select> el usuario podrá escoger
únicamente una opción. Si queremos dejar que el usuario pueda seleccionar
varias opciones tendremos otros elementos disponibles.
Para redondear un elemento <select> podemos añadirle encima una
etiqueta <label> que será lo que definirá la etiqueta o “título” del select
que le relacionemos.
<label for="avengers">Elige una opción:</label>

<select name="avengers" id="avengers">

<option value="thor">Thor</option>
<option value="hulk">Hulk</option>
<option value="ironman">Ironman</option>
</select>
Listas de selección: Etiqueta optgroup
Otra de las cosas que podemos realizar dentro de un combo es agrupar
opciones. Si la lista de opciones es muy grande podemos utilizar
el elemento <optgroup>. La sintaxis del elemento <optgroup> es la
siguiente:
<optgroup label="etiqueta"></optgroup>
amos a verlo con un ejemplo sencillo y así veis a lo que hacemos referencia.
<!DOCTYPE html>
<html lang="en">

<body>
<select name="ciudad">
<optgroup label="Europa">
<option>Madrid</option>
<option>Londres</option>
<option>Paris</option>
</optgroup>
<optgroup label="Suramerica">
<option>Santiago</option>
<option>Sao Paulo</option>
Como vemos, dentro del <select> habrá grupos (Europa, Sudamérica y
África) y, dentro de esos grupos, habrá distintas opciones.
Listas de selección: Etiqueta datalist
Con esta etiqueta crearemos una lista abierta, donde el usuario puede
seleccionar una opción de las sugeridas o crear la suya propia. Dentro de
este <datalist> habrá diferentes <option>.
Visualmente el datalist no mostrará nada, sin embargo, le asignaremos un
input a través del atributo id y esto nos posibilitará escribir como si se
tratase de un input de type text normal y además tendremos las opciones
para elegir en el desplegable.
Os dejamos un ejemplo para mejor entendimiento:
<form name="formulario" method="post" action="/[Link]">

<input type="text" list="items" />

<datalist id="items">
<option value="1">Opción 1</option>
<option value="2">Opción 2</option>
<option value="3">Opción 3</option>
</datalist>
</form>
Con lo que tendremos que tener cuidado es con el soporte que este
elemento tiene en los distintos navegadores, ya que nos podemos encontrar
alguno que no lo tenga y este elemento no se muestre correctamente al
correr nuestra aplicación.

Selección de color
Con HTML5 se introdujo un nuevo campo de entrada de datos que se usa
para seleccionar colores. Este input de tipo color se usa generalmente con
el esquema de colores RGB.
<form name="formulario" method="post"
action="[Link]

Selecciona el color deseado:
<input type="color" name="color" value="#FF0000" />
</form>
Selección de ficheros
HTML nos proporciona un input de tipo file para todo lo que tiene que ver
con archivos. Podremos seleccionar, adjuntar y enviar archivos con este
input.
Selección de ficheros: Input file
Cuando diseñemos un formulario es posible que necesitemos enviar un
fichero de datos al servidor. En este caso vamos a necesitar un campo de
entrada de tipo file. La sintaxis de este tipo de input sería:
<input type="file" id="identificador" value="valor" name="nombre"/>
Selección de ficheros: Atributo múltiple
El atributo multiple especifica que el usuario puede ingresar más de un valor
en un campo. Tenéis que tener en cuenta que solo funciona con los
siguientes tipos de entrada: correo electrónico y archivo. Esto nos será muy
útil sobre todo cuando permitamos subir archivos, ya que puede darse el
caso que el usuario necesite subir 30 archivos a nuestro formulario y, sin
este atributo, no podría.
<form>
<label for="files">Select files:</label>
<input type="file" id="files" name="files" multiple>
</form>
Organización de campos
Estas serán las etiquetas que servirán para organizar los elementos del
formulario, agrupándolos en categorías o temáticas, ordenar la información
o para visualizar los elementos de forma más sencilla.
Organización de campos: Etiqueta fieldset
La etiqueta <fieldset> define una agrupación de elementos comunes
dentro del formulario.
Siempre deberá ir acompañada de una etiqueta <legend> a la que se le
asignará un título descriptivo. Este título es obligatorio por motivos de
accesibilidad, pero puede ser ocultado mediante css.
<form action="/next-page" method="post">
<fieldset>
<legend>Datos Básicos</legend>
</fieldset>
</form>
Organización de campos: Etiqueta label
Esta etiqueta siempre acompaña a un campo del formulario con un título
descriptivo. Y debemos especificar con el atributo for. Y en el input usar el
atributo id para relacionarlo.
El for del <label> y el id del <input> deberán coincidir, ya que de esta
forma los relacionaremos y sería como decirle al formulario: “ey! cuando
encuentres el id “name” en alguno de los <input>, asígnale el <label>
cuyo atributo for coincida”
Vamos a verlo con un ejemplo.
<label for="name">Nombre</label>
<input type="text" name="name" id="name">
Organización de campos: Shortcuts
Para movernos entre inputs podemos usar la tecla TAB, que en este caso
avanza hacia adelante los inputs y si pulsamos SHIFT + TAB volvemos hacia
atrás. Esto nos será muy útil a la hora de rellenar formularios.
Botones de envío de formularios
Este tipo de input podemos decir que es de los más importantes, ya que si
un formulario no lo contiene, el usuario no podrá enviar la información que
ha rellenado, a no ser que pulse la tecla ENTER.

SUBMIT:Para crear un botón que nos envíe los datos del formulario al
servidor tenemos el tipo submit. Su sintaxis es la siguiente:
<input type="submit" value="TextoBotón"/>
Una vez que pulsemos sobre el botón se enviarán los datos que el usuario
haya insertado en el formulario siempre y cuando esté correctamente
relacionado el formulario con nuestro backend a través del atributo action
que ya vimos en la anterior sección.

Aquí también se puede usar una imagen como botón que enviará la
información del formulario, si le añadimos un input de type image:
<form name="formulario" method="post" action="/[Link]">

Usuario: <input type="text" name="usuario" />

<input type="image" src="[Link]" alt="Enviar" width="80"
height="28" />
</form>
RESET: El otro tipo de botón con funcionalidad es el que nos permite el
borrado de los datos del formulario. Para ello tenemos el tipo reset. La
sintaxis de este botón será:
<input type="reset" value="TextoBotón"/>
Botones de envío de formularios: Botón personalizado
La etiqueta <button> nos será muy útil en javascript para desencadenar
eventos de, por ejemplo, tipo clic.

RECORDAD que, cuando lo usemos para el envío de información, tenemos

que añadirle el atributo type=”submit”
<button type="submit">Enviar</button>
Como hemos visto hasta ahora, los botones que hemos insertado han sido
mediante el elemento input, si bien contamos con otro elemento para poner
botones en el formulario que es el elemento <button>. Cuya funcionalidad
es la misma que la del elemento input. La sintaxis del elemento
<button> es:
<button name="nombre" type="TipoBoton"
value="ValorBoton">Botón</button>
Dependiendo del tipo que asignamos al atributo type obtendremos un
comportamiento u otro:
submit, crea un botón para el envío de formulario.
reset, crea un botón para el borrado de datos del formulario.
button, crea un botón normal.
Medidores y barras de progreso
Existen algunos otros controles que, aunque no nos permiten introducir
información, pueden ser muy útiles en formularios para presentar
información de una forma más visual u ofrecer datos adicionales al usuario.
Eso sí, necesitaremos de javascript para crear elementos más complejos,
con solo HTML serán muy sencillos.
Tenemos las barras de progreso con la etiqueta <progress>, que muestra
por defecto una barra infinita que se mueve de izquierda a derecha. Esta
será muy útil cuando queramos mostrarle al usuario el tiempo que queda
para que se complete cierta tarea.
<form name="formulario" method="post" action="/[Link]">

<progress max="100" value="10">
</form>
Con max indicamos el valor total de la barra y con value el calor actual.

Con <meter> podemos crear medidores personalizados. Un buen ejemplo

sería el medidor de una página web que te dice si tu contraseña es débil,
normal o buena en cuanto a seguridad.
Los atributos que acompañan a esta etiqueta <meter> son:

n ejemplo en código:
<form name="formulario" method="post" action="/[Link]">

<meter min="0" max="100"
low="25" high="75"
optimum="100" value="75">
</form>
Validaciones HTML5
A la hora de crear una página web debemos tener en cuenta que el usuario
puede equivocarse y es algo que ocurrirá, por lo tanto, tenemos
herramientas para mitigar estos errores y que no afecten a la experiencia
del usuario.
Estas herramientas son las llamadas herramientas de validación, que nos
sirven para establecer pautas a la hora de indicar al usuario que la
información que ha introducido es correcta o debe modificarla.
Este es un ejemplo típico de validación, en el que mediante javascript se
comprueban los datos. Una vez validada se procesa y envía al backend.
Hay 4 tipos de validaciones:
Sin validación. El usuario podrá escribir la información que sea y no saltarán
alarmas.
Validación en el front. Se verifica la información que introduce el usuario y
se manda. Esto es peligroso ya que el usuario con conocimientos web podría
saltarse esta validación.
Validación solo en el back. El usuario podrá enviar la información que sea
pero el back la rechazará si no es válida. Esto no se recomienda ya que
gasta muchos recursos y tiempo en los procesos innecesarios.
Doble validación en front y back. Es lo ideal.
Validaciones HTML5: Atributos más usados
Los más usados suelen ser los de medir la longitud de la
cadena minlength o **maxlength , campos requeridos required y valores
mínimos y máximos con min o max.
required es la validación requerida indica que el campo es obligatorio en el
formulario, y no podremos enviar los datos hasta rellenar dicho campo.
En el ejemplo podemos ver que es obligatorio que rellenemos nuestro
nombre para poder enviar la información del formulario al backend.
<form method="post" action="/nombre">
<label for="name">Nombre:</label>
<input type="text" name="name" placeholder="Su nombre" required>
<button type="submit">Enviar</button>
</form>
minlength y maxlength en los input de tipo text son usados para indicar
un tamaño mínimo o máximo de caracteres en una entrada de datos. Así
podremos restringir un input para que al menos tenga n caracteres, o que
no se exceda de n caracteres.
En el ejemplo estamos diciendo que el input de tipo texto referente al “nick”
debe ser mínimo de 2 caracteres de largo y máximo 8.
<form method="post" action="/user">
<label for="nick">nickName:</label>
<input type="text" name="nick" placeholder="Su nick" minlength="2"
maxlength="8">
<button type="submit">Enviar</button>
</form>
min y max para los inputs de type number que igual manera que con los
campos de texto, podemos restringir los campos números mediante un
valor máximo y un valor mínimo.
En este ejemplo, la edad que debemos rellenar podrá ir de los 14 a los 99
años.
<form method="post" action="/user">
<label for="age">Edad:</label>
<input type="number" name="age" placeholder="Su edad" min="14"
max="99">
<button type="submit">Enviar</button>
</form>
El atributo disabled deshabilita un campo del formulario, por lo que no se
podrá hacer clic en él ni rellenar ningún tipo de dato. Además, sus valores
nunca se enviarán junto al resto del formulario.
Y os preguntaréis para qué se usa entonces… pues son muy útiles a la hora
de ir paso a paso en un formulario. Os habéis encontrado en muchas webs
que hasta que no rellenas el campo nombre no os deja rellenar nada más…
este tipo de lógica nos será muy útil para customizar los formularios.
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"
disabled><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
El atributo multiple especifica que el usuario puede ingresar más de un valor
en un campo. Tenéis que tener en cuenta que solo funciona con los
siguientes tipos de entrada: correo electrónico y archivo.
<form>
<label for="files">Select files:</label>
<input type="file" id="files" name="files" multiple>
</form>
Esto nos será muy útil sobre todo cuando permitamos subir archivos, ya que
puede darse el caso que el usuario necesite subir 30 archivos a nuestro
formulario y, sin este atributo, no podría.
El atributo readonly indica que un campo de formulario es de solo lectura.
Por lo tanto, no se podrá modificar.
CUIDADO! el valor que se introduzca en campos con este tipo de atributo se
enviará junto al resto de información del formulario. Tened esto en cuenta a
la hora de crear vuestras páginas.
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="Alberto"
readonly><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Trevijano">
</form>
Validaciones HTML5: Customizar nuestro formulario
Si enlazas tu fichero con un archivo de estilos podemos customizar los
inputs cuando son válidos, vamos a verlo porque siempre os gustan estas
cositas.
Este ejemplo de código hará que si la información que introduce el usuario
en nuestro input es válida, el color del fondo sea lightgreen, y, en caso de
que sea inválido, el color de fondo será coral.
input:valid {
background: lightgreen;
}

input:invalid {
background: coral;
}
También se pueden dar estilos haciendo uso de los atributos de las
etiquetas HTML, es decir.
Aquí, todos los inputs que tengan como tipo text tendrán un margen por
debajo de 20px.
input[type="text"] {
margin-bottom: 20px;
}
También se pueden dar estilos haciendo uso de los atributos de las
etiquetas HTML, es decir.
Aquí, todos los inputs que tengan como tipo text tendrán un margen por
debajo de 20px.
input[type="text"] {
margin-bottom: 20px;
}
Dicho esto, NO es recomendable generalizar los estilos sobre los elementos.
.form-input:valid {
background: lightgreen;
}

.form-input:invalid {
background: red;
}

.[Link]-input-text {
margin-bottom: 20px;
}
Validaciones HTML5: Validación por Patrón
HTML5 nos permite usar patterns, vamos a ver algunos aspectos básicos
de estos por si en algún momento os animáis a usarlos. Primero tenéis que
saber que estos patrones se rigen por conjuntos de caracteres que cumplen
con un patrón regex.
Las características básicas de expresiones regulares so
Os va parecer muy raro pero vamos a verlo con un ejemplo en un input con
un patrón. Vamos a validar un nombre de usuario que solo permita letras y
números.
<form method="post" action="/register">
<label for="nombre">Usuario:</label>
<input type="text" name="nombre"
placeholder="Name" minlength="5" maxlength="40"
required pattern="[A-Za-z0-9]+">
<button type="submit">Registrarse</button>
</form>
Veamos un pequeño formulario con un pattern con un uso más práctico,
imaginar que queremos que un usuario nos indique su modelo de Audi y los
posibles son A1, A3, A4 y A6.
<form method="post" action="/coche">
<label for="coche">Coche:</label>
<input type="text" name="coche"
placeholder="Su modelo de coche" required
pattern="A|a(1|3|4|6)"
title="Modelos posibles: A1, A3, A4 y A6">
<button type="submit">Enviar</button>
</form>
En la documentación os dejamos una tabla para que intentéis construir
vuestros propios pattern pero si os resulta complicado no hace falta que
invirtáis mucho tiempo en estas validaciones.

RegExR
LINKTREE
Estructura de arquitectura de la información
[Link]
#json=3imrYFbyZYa8IIlj95Vga,rt69C8FeSpVn1l32z3F4Vg
[Link]
#room=e367db2bd30ca0c12f07,SV5A9xCbCJBmWNMg2v_7Zw

NEWS HTML
LANDING
Ejemplo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<title>Productos Tech</title>
</head>
<body>
<header>
<h1>Productos Tech</h1>
</header>
<section>
<h2>Características de nuestros productos</h2>
<div>
<img src="[Link]" alt="Producto 1" />
<h3>Producto 1</h3>
<p>Descripción del producto 1.</p>
</div>
<div>
<img src="[Link]" alt="Producto 2" />
<h3>Producto 2</h3>
<p>Descripción del producto 2.</p>
</div>
<div>
<img src="[Link]" alt="Producto 3" />
<h3>Producto 3</h3>
<p>Descripción del producto 3.</p>
</div>
</section>
<section>
<h2>Testimonios de clientes satisfechos</h2>
<div>
<p>
"Producto 1 ha cambiado mi vida. Lo recomiendo a todos mis
amigos."
</p>
<p>- Cliente 1</p>
</div>
<div>
<p>"Producto 2 es el mejor que he probado. No puedo vivir sin
él."</p>
<p>- Cliente 2</p>
</div>
<div>
<p>
"Producto 3 es increíble. Lo uso todos los días y nunca me ha
fallado."
</p>
<p>- Cliente 3</p>
</div>
</section>
<section>
<h2>Precios y planes de suscripción</h2>
<div>
<h3>Plan básico</h3>
<p>Descripción del plan básico.</p>
<p>Precio: $10/mes</p>
</div>
<div>
<h3>Plan premium</h3>
<p>Descripción del plan premium.</p>
<p>Precio: $20/mes</p>
</div>
<div>
<h3>Plan empresarial</h3>
<p>Descripción del plan empresarial.</p>
<p>Precio: $50/mes</p>
</div>
</section>
<section>
<h2>Contacto</h2>
<form>
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" /><br /><br />
<label for="email">Email:</label>
<input type="email" id="email" name="email" /><br /><br />
<label for="mensaje">Mensaje:</label><br />
<textarea id="mensaje" name="mensaje" rows="5"
cols="30"></textarea
><br /><br />
<input type="submit" value="Enviar" />
</form>
</section>
<footer>
<p>Productos Tech © 2021</p>
<p>Contacto: info@[Link]</p>
<p>Síguenos en redes sociales:</p>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Instagram</a></li>
</ul>
</footer>
</body>
</html>

PORTFOLIO
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Mi Portfolio</title>
</head>
<body>

<header>
<h1>Mi Portfolio</h1>
<nav>
<ul>
<li><a href="#about">Acerca de mí</a></li>
<li><a href="#skills">Habilidades</a></li>
<li><a href="#projects">Proyectos</a></li>
<li><a href="#contact">Contacto</a></li>
</ul>
</nav>
</header>

<section id="about">
<h2>Acerca de mí</h2>
<p>
Soy un desarrollador web con experiencia en HTML, CSS, y JavaScript.
</p>
</section>

<section id="skills">
<h2>Habilidades</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</section>

<section id="projects">
<h2>Proyectos</h2>
<article>
<h3>Proyecto 1</h3>
<p>Descripción del proyecto 1.</p>
</article>
<article>
<h3>Proyecto 2</h3>
<p>Descripción del proyecto 2.</p>
</article>
</section>

<section id="contact">
<h2>Contacto</h2>
<p>Email: ejemplo@[Link]</p>
<p>Teléfono: 123-456-7890</p>
</section>

YOUTUBE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>YouTube (Versión Simplificada)</title>
</head>
<body>

<header>
<h1>YouTube</h1>
<nav>
<ul>
<li><a href="#home">Inicio</a></li>
<li><a href="#trending">Tendencias</a></li>
<li><a href="#subscriptions">Suscripciones</a></li>
<li><a href="#history">Historial</a></li>
</ul>
</nav>
</header>

<section id="search">
<form>
<input type="text" placeholder="Buscar" />
<input type="submit" value="Buscar" />
</form>
</section>

<main>

<section id="home">
<h2>Videos recomendados</h2>
<article>
<h3>Video 1</h3>
<p>Descripción del video 1</p>
</article>
<article>
<h3>Video 2</h3>
<p>Descripción del video 2</p>
</article>
</section>

<section id="trending">
<h2>Tendencias</h2>
<article>
<h3>Trending Video 1</h3>
<p>Descripción del trending video 1</p>
</article>
<article>
<h3>Trending Video 2</h3>
<p>Descripción del trending video 2</p>
</article>
</section>

<section id="subscriptions">
<h2>Mis Suscripciones</h2>
<ul>
<li>Canal 1</li>
<li>Canal 2</li>
</ul>
</section>

<section id="history">
<h2>Historial</h2>
<ul>
<li>Video 1</li>
<li>Video 2</li>
</ul>
</section>
</main>

<footer>
<ul>
<li><a href="#about">Acerca de</a></li>
<li><a href="#press">Prensa</a></li>
<li><a href="#copyright">Derechos de autor</a></li>
</ul>
</footer>
</body>
</html>

Etiquetas de scripting HTML

A medida que aprendemos HTML vemos que se trata de un lenguaje de
marcas estupendo y muy potente, pero también nos vamos dando cuenta
que ciertos detalles no se pueden cubrir sólo con HTML y CSS. Para ello
tenemos que hacer uso de un lenguaje de programación
llamado Javascript.
Etiquetas interactivas
En HTML5 se añadieron etiquetas que posibilitan la interacción del usuario
con la página. Por esta razón, el usuario es parte fundamental de este
proceso.
Etiquetas interactivas: Estas etiquetas pueden ser
<details>. Crea un elemento desplegable, que contendrá todo el contenido.
Actúa como un div, pero inicialmente no aparecerá desplegado. Lo que
veremos será el título que le hayamos dado con el <summary> junto a una
flecha que indica que es un desplegable
<details>
<summary>Más información</summary>
<h2>Nombre</h2>
<img src="[Link]" alt="Foto" />
</details>

<summary>. Título del elemento que se verá estando o no desplegado.

<dialog>. Ventana de diálogo que puede contener y mostrar información.
Se utiliza sobre todo para enviar alertas al usuario a través de la pantalla. Es
la mejor opción para sustituir al alert de javascript.
<dialog id="alert">
<p>¡Hola!</p>
<button id="close"
onclick="[Link]('alert').close()">Ok!</button>
</dialog>
<button id="show"
onclick="[Link]('alert').show()">Mostrar</button>
onclick será un evento de javascript de tipo clic, que indicará una acción
que debe ocurrir cuando se produzca ese clic.
Otra opción muy buena es la de crear modales desde HTML. Los modales
son ventanas que aparecen en pantalla y que no se quitan hasta que el
usuario realiza la acción que se le pide desde el modal. Por ejemplo, muchos
avisos de cookies que salen en algunas webs o cuando tienes un bloqueador
de anuncios y te salta un modal que, hasta que no desactivas el bloqueador
no te deja navegar.
Para crear este modal podemos usar la función showModal() como en el
ejemplo:
<dialog id="gandalfModal">
<img src="[Link]" alt="Gandalf" />
<p>¡NO.. PUEDES... PASAR!</p>
<button id="close"
onclick="[Link]('gandalfModal').close()">
Ok!
</button>
</dialog>
<button id="show"
onclick="[Link]('gandalfModal').showModal()">
Mostrar
</button>

Si, por otro lado, queremos dar la posibilidad al usuario de modificar un

elemento, existe el atributo contentEditable
<h3 contenteditable>Título</h3>
<div contenteditable>
<p>Este es un párrafo modificable de ejemplo</p>
</div>
Pero esto no persistirá, es decir, si modificamos el contenido y recargamos
la página no veremos reflejados los cambios. Esto quiere decir que el
atributo funciona como si cambiásemos el contenido del html a través del
inspector de elementos del navegador. Para hacer que los cambios
persistan deberíamos guardar el contenido editado mediante javascript.
Etiquetas script
Si bien HTML y CSS son capaces de realizar muchas de las necesidades que
tendremos cuando queramos hacer una web, tienen sus limitaciones. Ahí es
donde entrará javascript, que se enlazarán al HTML con la etiqueta
<script>.
Esta etiqueta sirve para cargar contenido Javascript en nuestro documento
HTML y podrá recibir los siguientes atributos:

Los tipos de carga pueden ser síncrono, que es el que se establece por
defecto y paraliza la página hasta que la carga del contenido javascript esté
listo, carga asíncrona que usaréis mucho y sirve para descargar el script en
cuanto esté disponible y no detiene la carga del HTML. Una vez descargado
lo ejecuta y detiene la carga HTML. Una vez ejecutado terminará de cargar
el resto del HTML. Y por último el atributo defer, que hace que la carga del
script se realice al final del todo, una vez el resto de la página ha cargado.
De esta forma, además podemos cargar javascript en línea o externo.
Funciona igual que el código CSS:
Ejemplo de código javascript en línea:
<script>
alert('¡Hola!');
</script>
Ejemplo de javascript externo:
<script src="/[Link]"></script>
En los últimos años Javascript ha incorporado los módulos. Estos módulos
posibilitan importar funcionalidades mediante import y export. Para ello,
debemos añadir en nuestra etiqueta <script> el atributo type=”module”:
<script type="module">
import { pi } from './[Link]';
</script>

Al ser una funcionalidad “nueva” no tiene soporte con la totalidad de los

navegadores, por lo que podemos asignar una alternativa que será el
atributo nomodule por si el navegador no contempla el uso de estos
módulos de javascript:
<script type="module">
/* Código para navegadores modernos */
import { pi } from './[Link]';
</script>
<script nomodule>
/* Código para navegadores antiguos */
</script>
Por último, puede darse el caso que tengamos código reutilizable que
queremos usar en varios sitios de nuestra aplicación. Para facilitar esto,
existe la etiqueta <template>
Si usamos en nuestro documento HTML este código:
<table id="tabla">
<tr>
<th>Nombre</th>
<th>Apellidos</th>
<th>Calificación</th>
</tr>
<template id="usuario">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</template>
</table>
Eventos
Un evento Javascript es una característica especial que ha sucedido en
nuestra página y a la cuál le asociamos una funcionalidad, de modo que se
ejecute cada vez que suceda dicho evento.
Existen multitud de eventos y para usarlos es tan fácil como elegir la
etiqueta a la que queremos ponerle el evento, añadirle un atributo que
detecte si se produce o no el evento (que tendrá el prefijo on) y por último
indicar la función/acción que debe ocurrir cuando el evento ocurra.
<div>
<img src="[Link]" alt="Gandalf" onClick="alert('¡Has hecho
clic!')" />
</div>
En el ejemplo, cuando se haga click en la imagen saldrá el alert con el texto
que hemos indicado. Como hemos dicho existen multitud de eventos, os
vamos a dejar los más conocidos.
Eventos: Eventos de documento
onLoad, que ocurrirá cuando la página cargue.
<img style="width: 300px;"

src="[Link]
2022/10/18/[Link]"
id="gandalfImage" alt="Gandalf">
<p id="textId"></p>

function onScrollAction() {
[Link](
Eventos: Eventos de foco
Cuando elementos como input, textarea, select o anchor pueden ser
seleccionables por el usuario y ocurrirán cuando se haga/se pierda foco
sobre ellos.
onBlur, el elemento ha perdido foco.
<h2>onblur event example</h2>
<input onblur="myFunction()">

EL TEXTO SE CAMBIARÁ A ROJO -->

<p id="example" onclick="myFunction()">Haz click para cambiarme de

color.</p>

Algunas ventajas de utilizar Cloudinary son:

Reducción del tamaño de las imágenes y mejora del tiempo de carga de la
página web
Herramientas avanzadas para optimizar y personalizar las imágenes
Integración sencilla con la página web mediante la API de Cloudinary

En resumen, utilizar Cloudinary es una forma eficiente de optimizar las

imágenes en una página web y mejorar el rendimiento de la misma.
Minimizar el uso de scripts externos
Para minimizar el uso de scripts externos, es recomendable utilizar solo los
que son absolutamente necesarios para el funcionamiento de la página web.
También es importante asegurarse de que los scripts se carguen de forma
asíncrona, para que no ralenticen la carga de la página.
Usar la caché del navegador
Para utilizar la caché del navegador, es necesario configurar las cabeceras
HTTP de los archivos de la página web. Estas cabeceras indican al
navegador cuánto tiempo debe mantener los archivos en la caché. Es
importante configurar la caché de forma adecuada para que los usuarios
puedan cargar la página web más rápido en visitas posteriores.
Te dejo un ejemplo de cómo agregar la cabecera Cache-Control en un
archivo HTML, CSS y JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Mi página web</title>
<meta http-equiv="Cache-Control" content="max-age=604800">
</head>
<body>
<h1>Bienvenido a mi página web</h1>
</body>
</html>
// archivo [Link]
[Link]("Hola, mundo!");

// se agrega la cabecera Cache-Control al inicio del archivo

// En este ejemplo, se establece que el archivo sea almacenado en la caché
por un día (86400 segundos)
// Si en algún momento se actualiza el archivo, se debe cambiar el valor de
"v=1" a "v=2" y así sucesivamente
// para que el navegador descargue la nueva versión
// Ejemplo: <script src="[Link]?v=2"></script>
// Esto es útil para evitar que los usuarios tengan que borrar la caché
manualmente para ver los cambios
// En producción, se debe establecer un valor más alto para la caché para
mejorar el rendimiento del sitio
// y ahorrar ancho de banda
// Ejemplo: max-age=31536000 para un año
// Es importante tener en cuenta que no todos los navegadores respetan la
caché
// y algunos usuarios pueden tenerla desactivada
Evitar redireccionamientos innecesarios
Para evitar redireccionamientos innecesarios, es importante planificar la
estructura de la página web de forma adecuada. También es importante
utilizar redireccionamientos 301 en lugar de redireccionamientos 302, ya
que los primeros son permanentes y los segundos temporales.
Reducir el número de solicitudes HTTP
Para reducir el número de solicitudes HTTP, es recomendable combinar
varios archivos CSS y JavaScript en uno solo. También es importante utilizar
técnicas como la carga diferida de imágenes y otros elementos no críticos
de la página web.
Utilizar etiquetas de carga diferida
Para utilizar etiquetas de carga diferida en una página web, se pueden
utilizar las etiquetas <img loading="lazy"> y <iframe loading="lazy">.
Estas etiquetas retrasan la carga de imágenes y otros elementos no críticos
hasta que el usuario los necesite, lo que mejora el rendimiento de la página
web.
Siguiendo estas recomendaciones, se puede mejorar significativamente el
rendimiento de un documento HTML y proporcionar una mejor experiencia
al usuario.

También podría gustarte

Introducción al Lenguaje HTML5
100% (1)
Introducción al Lenguaje HTML5
44 páginas
Guía Completa sobre HTML5 y Etiquetas
Aún no hay calificaciones
Guía Completa sobre HTML5 y Etiquetas
71 páginas
Introducción a HTML5 y sus Elementos
Aún no hay calificaciones
Introducción a HTML5 y sus Elementos
13 páginas
Guía Completa sobre HTML5 y Etiquetas
Aún no hay calificaciones
Guía Completa sobre HTML5 y Etiquetas
71 páginas
Curso Completo de Html5
Aún no hay calificaciones
Curso Completo de Html5
176 páginas
Estructura y Etiquetas de HTML5
Aún no hay calificaciones
Estructura y Etiquetas de HTML5
60 páginas
Estructura y Actualizaciones de HTML5
Aún no hay calificaciones
Estructura y Actualizaciones de HTML5
11 páginas
Temario Curso HTML5
Aún no hay calificaciones
Temario Curso HTML5
34 páginas
Unidad 1 S2 Estandar Web
Aún no hay calificaciones
Unidad 1 S2 Estandar Web
54 páginas
Estructura y Semántica de HTML
Aún no hay calificaciones
Estructura y Semántica de HTML
64 páginas
HTML5 y Visual Studio Code para principiantes
Aún no hay calificaciones
HTML5 y Visual Studio Code para principiantes
13 páginas
Estructura Básica de HTML5
Aún no hay calificaciones
Estructura Básica de HTML5
31 páginas
Guía Completa de HTML5 y Estructura Web
Aún no hay calificaciones
Guía Completa de HTML5 y Estructura Web
15 páginas
Introducción A HTML5
Aún no hay calificaciones
Introducción A HTML5
10 páginas
Introducción a HTML5 y sus funciones
Aún no hay calificaciones
Introducción a HTML5 y sus funciones
21 páginas
Clase 2 HTML5
Aún no hay calificaciones
Clase 2 HTML5
83 páginas
Guía Completa de HTML y Etiquetas
Aún no hay calificaciones
Guía Completa de HTML y Etiquetas
76 páginas
Introducción a HTML5 y su Estructura
Aún no hay calificaciones
Introducción a HTML5 y su Estructura
21 páginas
Introducción a HTML5 y sus características
Aún no hay calificaciones
Introducción a HTML5 y sus características
11 páginas
Uso de etiquetas HTML5 en diseño web
Aún no hay calificaciones
Uso de etiquetas HTML5 en diseño web
12 páginas
Introducción a HTML5 en Visual Studio
Aún no hay calificaciones
Introducción a HTML5 en Visual Studio
21 páginas
Introducción al Lenguaje HTML y Etiquetas
Aún no hay calificaciones
Introducción al Lenguaje HTML y Etiquetas
8 páginas
Fundamentos de HTML5 y CSS Básico
Aún no hay calificaciones
Fundamentos de HTML5 y CSS Básico
112 páginas
Historia y Estructura de HTML y XHTML
Aún no hay calificaciones
Historia y Estructura de HTML y XHTML
47 páginas
VCG HTML 2k25 - Rev
Aún no hay calificaciones
VCG HTML 2k25 - Rev
43 páginas
Etiquetas de HTML Y HTML5 - 20260306 - 061013 - 0000
Aún no hay calificaciones
Etiquetas de HTML Y HTML5 - 20260306 - 061013 - 0000
6 páginas
Introducción a HTML y DOM en Web
Aún no hay calificaciones
Introducción a HTML y DOM en Web
83 páginas
Historia y Estructura de HTML
Aún no hay calificaciones
Historia y Estructura de HTML
52 páginas
Introducción a HTML y CSS3
Aún no hay calificaciones
Introducción a HTML y CSS3
69 páginas
HTML5 Conceptos Fundamentales 02mayo2026
Aún no hay calificaciones
HTML5 Conceptos Fundamentales 02mayo2026
15 páginas
Historia y Estructura de HTML en Web
Aún no hay calificaciones
Historia y Estructura de HTML en Web
20 páginas
02 Aw
Aún no hay calificaciones
02 Aw
56 páginas
Desarrollo de HTML5 y PHP en Web
Aún no hay calificaciones
Desarrollo de HTML5 y PHP en Web
192 páginas
Practica2 PDF
Aún no hay calificaciones
Practica2 PDF
9 páginas
Introducción a HTML y Semántica Web
Aún no hay calificaciones
Introducción a HTML y Semántica Web
15 páginas
Introducción al Lenguaje HTML y Estructura Web
Aún no hay calificaciones
Introducción al Lenguaje HTML y Estructura Web
24 páginas
Introducción a HTML y CSS: Fundamentos Esenciales
Aún no hay calificaciones
Introducción a HTML y CSS: Fundamentos Esenciales
27 páginas
Introducción a HTML y sus etiquetas
Aún no hay calificaciones
Introducción a HTML y sus etiquetas
3 páginas
Introducción a HTML y CSS: Fundamentos
Aún no hay calificaciones
Introducción a HTML y CSS: Fundamentos
19 páginas
Introducción a HTML5 y sus Etiquetas
Aún no hay calificaciones
Introducción a HTML5 y sus Etiquetas
35 páginas
Desarrollo Web Frontend: HTML, CSS y JS
Aún no hay calificaciones
Desarrollo Web Frontend: HTML, CSS y JS
30 páginas
Introducción a HTML: Estructura Básica
Aún no hay calificaciones
Introducción a HTML: Estructura Básica
14 páginas
Introducción a HTML5 y sus Elementos
Aún no hay calificaciones
Introducción a HTML5 y sus Elementos
54 páginas
02 Introducción HTML5
Aún no hay calificaciones
02 Introducción HTML5
12 páginas
Crear una página web en HTML5 fácil
Aún no hay calificaciones
Crear una página web en HTML5 fácil
6 páginas
Creación de Páginas Estáticas en HTML5
Aún no hay calificaciones
Creación de Páginas Estáticas en HTML5
36 páginas
Módulo 1 - Sprint 1 - EDITADO
Aún no hay calificaciones
Módulo 1 - Sprint 1 - EDITADO
61 páginas
Guía Completa de HTML5 y CSS
Aún no hay calificaciones
Guía Completa de HTML5 y CSS
30 páginas
Códigos HTML para Blogs
Aún no hay calificaciones
Códigos HTML para Blogs
6 páginas
Introducción a HTML5 y su Estructura
Aún no hay calificaciones
Introducción a HTML5 y su Estructura
14 páginas
Introducción a HTML y CSS para Web
Aún no hay calificaciones
Introducción a HTML y CSS para Web
32 páginas
Introducción al Marcado HTML
Aún no hay calificaciones
Introducción al Marcado HTML
24 páginas
Informe Completo sobre HTML y su Evolución
Aún no hay calificaciones
Informe Completo sobre HTML y su Evolución
9 páginas
Estructura de Documentos en HTML5
Aún no hay calificaciones
Estructura de Documentos en HTML5
2 páginas
Ut 2 - HTML I
Aún no hay calificaciones
Ut 2 - HTML I
21 páginas
Estructura de un Documento HTML
Aún no hay calificaciones
Estructura de un Documento HTML
10 páginas
Ejemplos y Estructura de HTML5
Aún no hay calificaciones
Ejemplos y Estructura de HTML5
22 páginas
HTML
Aún no hay calificaciones
HTML
35 páginas
Introducción a HTML y sus Etiquetas
Aún no hay calificaciones
Introducción a HTML y sus Etiquetas
8 páginas
Comandos y Buenas Prácticas en Rocketbot
Aún no hay calificaciones
Comandos y Buenas Prácticas en Rocketbot
157 páginas
Guía Completa de Windows Server 2019
Aún no hay calificaciones
Guía Completa de Windows Server 2019
41 páginas
Plan de Estudio 1Â°Sec. 24 - 25
Aún no hay calificaciones
Plan de Estudio 1Â°Sec. 24 - 25
27 páginas
Introducción a FLEX y su uso
Aún no hay calificaciones
Introducción a FLEX y su uso
9 páginas
Examen de Certificación Analista SOC EC-Council
Aún no hay calificaciones
Examen de Certificación Analista SOC EC-Council
28 páginas
Guía de Edición en Shotcut en Español
Aún no hay calificaciones
Guía de Edición en Shotcut en Español
1 página
Estrategias de Precios Psicológicos
Aún no hay calificaciones
Estrategias de Precios Psicológicos
5 páginas
Especificaciones iMac 21.5" 2014
Aún no hay calificaciones
Especificaciones iMac 21.5" 2014
4 páginas
Conceptos de Seguridad Información - Parte 1
Aún no hay calificaciones
Conceptos de Seguridad Información - Parte 1
13 páginas
Registrador de Datos LoLog Vista
Aún no hay calificaciones
Registrador de Datos LoLog Vista
2 páginas
Kabcash: Compras Seguras en Línea
Aún no hay calificaciones
Kabcash: Compras Seguras en Línea
1 página
Cotización de CARRIL VMT para KTRACTOR
Aún no hay calificaciones
Cotización de CARRIL VMT para KTRACTOR
1 página
Aplicación Web para Carnicería San Vicente
Aún no hay calificaciones
Aplicación Web para Carnicería San Vicente
4 páginas
Nicole Muñoz Riveros Motion Graphic API 1
Aún no hay calificaciones
Nicole Muñoz Riveros Motion Graphic API 1
8 páginas
Estructuras de Repetición en C
Aún no hay calificaciones
Estructuras de Repetición en C
20 páginas
Análisis de Titan DB y su uso actual
Aún no hay calificaciones
Análisis de Titan DB y su uso actual
12 páginas
Bases de Datos del Sistema SQL Server
Aún no hay calificaciones
Bases de Datos del Sistema SQL Server
12 páginas
Guía de Google Dibujos: Creación y Edición
Aún no hay calificaciones
Guía de Google Dibujos: Creación y Edición
42 páginas
Manual de Uso del Programa PRISEC
Aún no hay calificaciones
Manual de Uso del Programa PRISEC
145 páginas
Auxiliar de Diseño Gráfico: Funciones y Requisitos
Aún no hay calificaciones
Auxiliar de Diseño Gráfico: Funciones y Requisitos
3 páginas
Capas de un Sistema Operativo
Aún no hay calificaciones
Capas de un Sistema Operativo
18 páginas
Proyecto de Software para Consultorio Médico
Aún no hay calificaciones
Proyecto de Software para Consultorio Médico
9 páginas
Mapa Mental: Software y Servicios de Internet
Aún no hay calificaciones
Mapa Mental: Software y Servicios de Internet
1 página
s71500 Et200mp System Manual Es-ES Es-ES
Aún no hay calificaciones
s71500 Et200mp System Manual Es-ES Es-ES
252 páginas
Activación del Plan Sectorial Etecsa
Aún no hay calificaciones
Activación del Plan Sectorial Etecsa
9 páginas
Tipos de Pruebas en Auditoría
Aún no hay calificaciones
Tipos de Pruebas en Auditoría
1 página
Propósito formativo en Cultura Digital
Aún no hay calificaciones
Propósito formativo en Cultura Digital
27 páginas
Evolución de la Interacción Hombre-Máquina
Aún no hay calificaciones
Evolución de la Interacción Hombre-Máquina
6 páginas
Instala una Máquina Virtual con VirtualBox
Aún no hay calificaciones
Instala una Máquina Virtual con VirtualBox
14 páginas
Automatismos de Lógica Cableada en Electrónica
Aún no hay calificaciones
Automatismos de Lógica Cableada en Electrónica
5 páginas