HTML.

https://www.youtube.com/watch?v=vz4z0RLcAyk

1. Instalación del editor de código fuente y plugins. Visual Studio Code. La instalación de los plugins se
realiza en el quinto ícono de la izquierda de Visual Studio Code.

2. Vocabulario Web.
a) IP. Identificador numérico de una página web. Es único y representa donde se encuentra el ordenador que
contiene dicha página web. Sería el DNI de la página web.
b) Dominio/URL (Uniform Resources Locator). Nombre asociado a la IP. Los humanos recordamos más
fácilmente los nombres que los números. Por ende, el dominio/URL, nos permite recordar el nombre de las
páginas más fácilmente. Cabe destacar que también podríamos entrar a una página web con su IP. Por
ejemplo, para entrar a Google, puedo escribir google.com o 216.58.201.163.
c) DNS (Domain Name System). Servidor cuya función es traducir el nombre de dominio a su IP. El DNS
tiene una tabla que contiene tanto las IPs como sus dominios correspondientes.
e) Sitio Web. Conjunto de uno o varios recursos web alojados en el mismo dominio.
e) Servidor Web. Ordenador cuyo objetivo es servir recursos web.
f) Hosting. Almacenamiento del servidor web.
g) Petición. Acción de solicitar recursos al servidor.

3 HTML (Hyper Text Markup Language). Consiste en un lenguaje de marcado de hipertexto. No es un

lenguaje de programación sino de estructura. Es la base con la que están creadas todas las páginas web. Cada
etiqueta le dice al navegador y a los motores de búsqueda cuál es la estructura de los documentos,
elementos, organización, entre otros. Cabe destacar que HTML otorga estructura y no se encarga del aspecto
visual. No centra elementos, no agranda la letra, no cambia colores.

4. Historia de HTML.
- (1989) Inicio de su desarrollo.
- (1991) Lanzamiento de la web basada en tres conceptos: http, html y url.
- (1992) Lanzamiento de HTML.
- (1994) Creación de la W3C (consorcio que define los estándares de la web).
- (1998) Lanzamiento de HTML4. Versión que más duró de HTML.
- (1999) Lanzamiento de HTML 4.1. Versión muy restrictiva.
- (2004) Creación de la WHATWG (consorcio paralelo a la W3C). Su objetivo era trabajar en HTML5.
- (2008) Lanzamiento de HTML5. Lo lanzó WHATWG, pero W3C no estaba de acuerdo.
- (2014) Estándar HTML5. Dado que las personas adoptaron HTML5, W3C lo tuvo que aprobar.
- (Actualidad) Estándar HTML5.2. Es la última actualización.
Recomendación. Documental ‘‘Guerra de los Navegadores’’.

5. Sintaxis HTML. Funciona a través de etiquetas. Se utiliza una de apertura y una de cierre. En medio de
ambas, se encontrará el contenido. Cabe destacar que no todas las etiquetas sirven para el mismo contenido.

<etiqueta> contenido de la etiqueta </etiqueta>

6. Estructura HTML. Si al iniciar un documento, escribo !, me arma la estructura de manera automática.

Consta de dos partes principales.
a) Head. Metadatos con información de la página web. No son visibles. Los lee el navegador
b) Body. Contenido de la página web. Es visible. Los lee el navegador y los usuarios

*Atajo para comentarios. Control + ç.

7. Instalación del Servidor de Desarrollo. Live Server. Nos permite realizar una visualización previa de
nuestro proyecto. Se ejecuta con el botón Go Live, el cual se encuentra en el extremo inferior derecho de
Visual Studio Code.

8. Títulos (Headings) y Párrafos (Paragraphs).

a) Headings (<h1></h1>) Los títulos van de H1 a H6 siendo H1>H6. Siempre debe ir primero un H1 y luego
los demás. Nunca utilizar un encabezado superior si no hay por encima, en cualquier parte, un encabezado
inferior.
b) Paragraphs (<p></p>).

*Texto de relleno. Escribir lorem.

9. Header, Main y Footer. Section, Article y Aside.

- Header <header></header>. Cabecera de la página. Contiene al encabezado de una sección o documento,

donde se colocan habitualmente los encabezados, los vínculos de navegación, los formularios de búsqueda,
los logos, las tablas de contenidos, las introducciones, etc. En muchos casos, los contenidos del encabezado
de un documento son consistentes a lo largo de todo el sitio. No confundir a los elementos header y head.
Mientras que el elemento head provee metadatos para el documento, header contiene un grupo de elementos
introductorios o de navegación. Cuando un elemento header es declarado dentro de un elemento de
seccionamiento (como article o section) representa un encabezado en el ámbito de ese elemento. De lo
contrario (cuando pertenece al elemento body) representa un encabezado para el documento entero.

- Main <main></main>. Contenido principal de la página. Contiene toda la información. representa el

contenido principal del <body> de un documento o aplicación. El área principal del contenido consiste en el
contenido que está directamente relacionado, o se expande sobre el tema central de un documento o la
funcionalidad central de una aplicación. Este contenido debe ser único al documento, excluyendo cualquier
contenido que se repita a través de un conjunto de documentos como barras laterales, enlaces de navegación,
información de derechos de autor, logos del sitio y formularios de búsqueda (a menos, claro, que la función
principal del documento sea un formulario de búsqueda). No debe haber más de un elemento <main> en un
documento, y este no debe ser descendiente de un elemento <article>, <aside>, <footer>, <header>, o
<nav>.
- Section <section></section>. Contenido relacionado. Agrupa contenido que guarda relación. Se
utiliza cuando creamos bloques cuyo contenido es parte de un bloque total.
- Article <article></article>. Contenido independiente, es decir, podemos leer ese fragmento en
cualquier otro sitio y tendría sentido por sí mismo. El article es definido como un componente de la
página de contenido independiente, lo que implica que puede tener un header y footer propios. Cabe
destacar que, al ser independiente, se recomienda no escribir texto directamente sino colocar un
header previamente, el cual puede contener un heading. Si no nos interesa colocar un header, también
podemos colocar un heading directamente. Lo que nunca hay que hacer es escribir el texto
directamente.
*Las etiquetas section pueden contener etiquetas articles y viceversa. Una section puede contener
articles, por ejemplo, si tenemos varios artículos que hablan sobre etiquetas HTML ya que es
contenido relacionado entre sí. A su vez, las articles tendrían contenido independiente dado que
podríamos leer una sin haber leído el resto y seguiría teniendo sentido. Por otra parte, un article
podría contener varias sections, por ejemplo, el article podría ser navegadores y las sections ser los
navegadores más utilizados en cierto año. También puede haber un section como más sections
dentro.
- Aside <aside></aside>. Contenido relacionado, pero que no forma parte del contenido principal. No hay
problema si se encuentra dentro o fuera del main, pero se recomienda dejarlo afuera en razón de la
definición de la etiqueta.

- Footer <footer></footer>. Pie de página. Contiene todo aquello que en la página web haya podido pasar
desapercibido como por ejemplo las redes sociales, el contacto o un formulario de contacto o suscripción.
También se suele utilizar para colocar el copyright o la política de privacidad. Lo ideal es poner solo lo más
importante. No debemos llenar el footer de elementos que no aporten nada o confundan al usuario. Pese a
que es una práctica muy extendida no debemos incluir elementos como el mapa del sitio ni imágenes o
demasiado texto.

*Se recomienda comprobar si nuestro código es correcto en validator HTML.

10. Elementos de Bloque (Block Elements) VS Elementos de Línea (Inline Elements).

a) Elementos de Bloque. Son aquellos elementos que, a pesar de que su contenido no ocupe todo el ancho de
la página, el bloque que lo contiene si lo hace. Por ejemplo, <h1></h1>. Lo podemos ver a continuación.

Elemento de bloque.

Lista completa de elementos de bloque. <address> <article> <aside> <blockquote> <canvas> <dd> <div>
<dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main>
<nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video>.

b) Elementos de Línea. Son aquellos cuyo bloque que lo contiene ocupa únicamente el ancho de la página
que ocupa su contenido. Por ejemplo, <span></span>. Lo podemos ver a continuación.

Elemento de línea.

Lista completa de elementos de línea. <a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite>
<code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <output> <q> <samp> <script>
<select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>.
- Em/Small/Strong. Cursiva(emphasize)/Pequeña(menor énfasis)/Negrita(mayor énfasis).
- Mark (Resaltar/Highlight). Resaltar en amarillo.
- I (Italic), B (Bold) y U (Underline). Contradicen lo dicho hasta ahora dado que permiten dar estilo en
HTML. No se suelen usar. Se hace todo con CSS.
- Br. Forzar salto de línea. Nunca utilizar varios br juntos para separar elementos en HTML. Si quiero
separar algo, lo puedo hacer con el margin en CSS, pero nunca hacerlo en HTML.
- Wbr. Salto de línea si hiciera falta.
- Time. Se utiliza para representar un contenido de fecha y hora. Por ejemplo, la noticia ha sido publicada en
tal momento.
- Sup. Superíndice.
- Sub(Subíndice/Subscript).
- Del (Tachar/Strikeout).
- Q (Comillas).
- Bdo + Dir=“rtl”. Permite invertir el sentido de las letras, por ejemplo, si dice hola y aplicamos bdo, va a
decir aloh.
- Abbr + Title. Sirve para abreviaturas.
- Var. Definir variable.
*Por ende, si escribimos un h1 y luego un h2, el h2 aparecerá DEBAJO del h1. En cambio, si escribimos un
span y luego otro span, aparecerán uno al lado de otro. Lo podemos ver a continuación.

Elemento de bloque (H1).

Elemento de bloque (H2).

Elemento de línea (SPAN). Elemento de línea (SPAN).

11. Atributos. Son valores adicionales que configuran los elementos y/o ajustan su comportamiento.

a) Atributos Comunes. Sintaxis -> atributo=“valor”. Por ejemplo, <html lang=“es”>.

- Class. Se utiliza para dar estilos en CSS. Se puede repetir en más de un elemento.
- ID. Se utiliza para dar estilos en CSS, seleccionar el elemento desde JS o hacer la navegación a través de
anclas. No se puede repetir en más de un elemento. Es único.
- Title. Se utiliza para ayudar a la accesibilidad mostrando una descripción del elemento al que pertenece. Si
le incorporo una etiqueta title a un p, h1 o imagen, al situar el cursor encima puedo leer dicha descripción.
Se conoce como tooltip.
- Data-*. Nos permite guardar algún valor en las etiquetas HTML. No es útil en HTML, pero nos va a servir
para JS.

b) Atributos Booleanos. Sintaxis -> atributo.

12. Enlaces (Links). Son la parte más importante de la web dado que permiten que las webs se conecten
entre sí y con recursos. Por ejemplo, cuando hago una búsqueda en Google, me aparecen enlaces con
resultados. Se insertan con <a href="RUTA DEL LINK QUE LLEVE A CONTACTO">Contacto.</a>. Al
hacer click en contacto, se haría click en el link que nos llevaría a la web donde se encuentra el mismo. La
letra a viene de anchor.

a) Rutas Absolutas. Busca AFUERA del proyecto. Tienen un protocolo (http o https) y son únicas en la red.
Se suelen utilizar para rutas externas. Por ejemplo, una ruta absoluta serviría para poner un link de Google
en mi página web.

b) Rutas Relativas. Busca DENTRO del proyecto. No tienen un protocolo.

- Relativas al punto donde nos encontramos. Si el recurso se encuentra al mismo nivel (en la misma carpeta),
debemos poner únicamente el nombre del archivo. Si necesitamos salir de la carpeta actual, debemos usar ../.
- Relativas a la raíz del proyecto. La raíz del proyecto es la raíz de más alto nivel, es decir, la carpeta que se
encuentra arriba de todo en Visual Studio Code. Se debe empezar la ruta con una / para ir arriba de todo y
luego buscar.

c) Rutas dentro de la Misma Página. Busca DENTRO de la misma página. Sirve para que se haga un scroll
automático que nos lleve a una parte de la misma página en la que nos encontramos. Se le debe incorporar
un atributo (ID) al elemento al cual queremos ir y, al crear la etiqueta a para ir a dicho elemento, debemos
hacer referencia al atributo en el href.

Atributos de los Enlaces (Links).

a) Target. Define si el link se abrirá en la misma pestaña o en una nueva.
- Abrir link en la misma pestaña (valor por defecto). El valor que tiene por defecto es target=“_self”.
- Abrir link en una nueva pestaña para conservar la actual. El valor que se coloca es target=“_blank”. Se
suele utilizar en las rutas absolutas.
b) Download. Atributo booleano. Sirve para descargar el recurso solicitado. Si queremos que puedan
descargar el archivo, el recurso DEBE estar en nuestro servidor.

13. Navegación a través de Anclas. Arriba hemos visto cómo navegar a través de links entre páginas, pero
también podríamos querer ir a un punto específico de la misma u otra página.

a) Link a parte específica de la misma página. Si queremos ir a una sección específica dentro de la misma
página. Lo que debemos hacer es nombrar la etiqueta con un id y luego incorporar un link con ese id. Así
funciona Wikipedia. Se puede ver a continuación.
<a href="#cap-5">Capítulo 5.</a>
<article id=“cap-5”> o <h2 id=“cap-5”>

b) Link a parte específica de otra página. Si queremos ir a una sección específica dentro de otra página, lo
que debemos hacer es nombrar la etiqueta de la otra página con un id y luego incorporar un link con ese id.
Se puede ver a continuación.
<a href="/paginas/capítulos.html#cap-5">Capítulo 5.</a>
<article id=“cap-5”> o <h2 id=“cap-5”>

*Si presiono alt + click en diferentes líneas, Visual Studio Code me permite escribir en todas a la vez.

14. Listas. Sirven para listas contenido.

a) Ordered List (OL). Se utilizan cuando el orden de los elementos influye. Por ejemplo, pasos a seguir o un
top ten.
b) Unordered List (UL). Se utilizando cuando el orden de los elementos no influye. Por ejemplo, la lista de
compra. TODO menú de navegación se hace con nav>ul>li.
*OL y UL. son el inicio de la lista, pero cada uno de sus elementos internos se representa con LI. Lo
importante a destacar es que el navegador va a tener en cuenta que existe, o no existe, un orden.
c) Definition List (DL). Se utilizan para hacer una lista de definiciones. Por ejemplo, un diccionario. Su
estructura es la siguiente <dl><dt>Palabra a definir.</dt><dd>Definición</dd></dl>.

Listas Anidadas. Se pueden construir listas anidadas. Por ejemplo, una lista ordenada dentro de una
desordenada o una lista desordenada dentro de una ordenada.

Atributos de las Listas.

a) OL.
- Type. Estilo de numeración (1, A, a, I, i).
- Start. Inicio de la secuencia (número o letra).
b) UL.
- Type. Estilo de los ítems (disc, square, circle). CSS nos permitiría poner cualquier ítem, por ejemplo,
imágenes.

15. Tablas. Antes se utilizaban para incorporar todo el contenido dentro de una web. Actualmente sirven
para mostrar contenido tabulado. La estructura básica de una tabla es la siguiente.
a) Table. Contiene toda la tabla.
b) Caption. Título de la tabla.
c) Thead>TR>TH. Se utiliza para la cabecera.
d) Thbody. Contiene toda la tabla menos la cabecera.
e) TR (Table Row). Construye una fila.
f) TD (Table Data). Construye una celda dentro de la fila.
g) Tfoot (opcional). Pie de tabla.
*Se construyen fila a fila.
*El número de celdas establecerá el número de columnas.

Atributos para Tablas. Se puede hacer que las celdas ocupen más de una fila o más de una columna.
a) Rowspan. Sirve para que una celda ocupe más de una fila. El valor por defecto es 1.
b) Colspan. Sirve para que una celda ocupe más de una columna. El valor por efecto es 1.

Seleccionar Columnas. Hemos visto que seleccionando un <tr>, podemos seleccionar toda una fila. Si
queremos seleccionar toda una columna, tenemos la etiqueta <colgroup>, la cual nos permite seleccionar
una columna en concreto. Dentro pondremos tantas etiquetas <col> como columnas tengamos. Cada etiqueta
equivaldrá a una columna siguiendo el mismo orden que tiene la tabla.

*La primera fila puede tener th(table header) en vez de td.

16. Etiquetas Importantes de Bloque.

a) Address. Se utiliza para aportar información de contacto para el article más cercano o para todo el body.
Por ejemplo, si tenemos un artículo que menciona una noticia que ha ocurrido en una dirección en concreto,
podríamos incorporar la dirección dentro de la etiqueta. Por ejemplo, si queremos incorporar una dirección
en el footer, también podríamos incorporar la dirección dentro de la etiqueta.
b) Blockquote. Se utiliza para marcar las citas a otros autores o documentos. Adentro va p. Se puede incluir
el atributo cite para poner un enlace al documento original o fuente.
c) Pre. Se utiliza para tener código preformateado que necesita ser representado exactamente igual que lo
que vemos en VS Studio Code. Con la misma fuente y tabulaciones.
d) Div. Se utiliza como división del documento. Semánticamente no significa nada. No es más que un
contenedor genérico que se usa para dar estilos a través de CSS o para la delegación de eventos en
JavaScript. El contenido dentro del div debe estar relacionado.
e) HR (Horizontal Rule). Se utiliza para decirle al navegador que vamos a cambiar de tema. Se representa
con una línea, pero no se debe utilizar para dibujar líneas como función principal.

17. Etiquetas Importantes de Línea.

a) Q (Quote). Contenedor equivalente a blockquote. Sirve para poner citas, pero en línea. Se puede incluir el
atributo cite para poner un enlace al documento original o fuente.
b) Span. Contenedor de línea equivalente a div. Se suele utilizar para encerrar palabras o pequeños textos y
darles estilo a través de CSS o localizarlos desde JavaScript. Semánticamente no significa nada.
c) Code. Sirve para encerrar código que queremos representar visualmente. Suele ir unido con la etiqueta
pre.
d) Entidades Especiales en HTML - Código ASCII. Ver https://ascii.cl/es/códigos-html.htm

18. Formularios. Hasta ahora, no hemos visto ningún tipo de interacción con el usuario de la página web. La
primera que veremos serán los formularios. Sirven para acceder a las páginas, para hacer pagos online, entre
otras funciones. Se utilizan para que los usuarios envíen datos. La estructura básica de los formularios se
compone de cuatro elementos.
a) Form. Contiene todo el formulario. Se le incorpora la etiqueta action, la cual define la ubicación (URL)
donde se envían los datos que el formulario ha recopilado cuando se validan.
b) Label. Sirve para escribir el título del campo a rellenar. No olvidar incorporarle el atributo for (para
relacionarlo con el input).
c) Input. Sirve para crear un campo que permitirá al usuario interactuar. No olvidar incorporarle los atributos
type, id (para relacionarlo con el label) y name (para nombrar la información). Hay varios types para input.
- Button. Visualmente es igual, pero el formulario no se enviará.
- Submit. Se utiliza para enviar el formulario.
- Inputs para fechas.
- Date. Se utiliza para introducir una fecha.
- Time. Se utiliza para introducir una hora.
- Datetime. Obsoleto.
- Datetime-local. Se utiliza para introducir una fecha y una hora. No funciona en Firefox.
- Month. Se utiliza para introducir un mes y un año.
- Week. Se utiliza para introducir una semana y un año.
*Se recomienda usar datetime-local y time para seleccionar fecha y hora.
- Inputs para móviles. Se ven iguales en la web, pero en los móviles cambia el teclado.
- Search. Se utiliza para las barras de búsqueda.
- Tel. Se utiliza para introducir números telefónicos.
- Email. Se utiliza para introducir un email.
- Password. Se utiliza para introducir una contraseña. Al escribir la contraseña, salen puntos para
ocultarla, pero si fuera a inspeccionar elemento y modifico el type, podría ver la contraseña que está
escrita.
- URL. Se utiliza para introducir una URL.
- Inputs seleccionables. En todos los casos va el label y luego el input, pero en los inputs seleccionables el
input se encuentra dentro del label.
- Radio. Permite seleccionar una única opción de una lista de opciones relacionadas. Se incorporarán
varios inputs, pero hay un problema. Se pueden seleccionar todos al mismo tiempo. Lo que hay que
hacer es incorporar el atributo name, con el mismo nombre en todos los casos para que el navegador
comprenda que los labels son del mismo formulario y, al marcar uno, se desmarquen los demás. A su
vez, podemos usar el atributo checked para que salga alguno marcado por defecto. Recordar que
tanto el name como el checked se coloca en la etiqueta input. No olvidar colocar el atributo value (si
es posible con el mismo nombre del label), dado que lo que se encuentre en dicho atributo será lo que
reciba el servidor.
- Checkbox. Permite seleccionar varias opciones de una lista de opciones relacionadas. Al igual que
en el tipo radio, se debe incorporar el atributo name y value.
- Select. Crea una lista de opciones donde podemos seleccionar una o varias opciones. Cada opción
irá dentro de una etiqueta option. Si tenemos muchas opciones podemos ordenarlas por categorías a
través de la etiqueta optgroup con el atributo label para nombrar la categoría. Si queremos que se
pueda seleccionar más de una opción, debemos incorporar la palabra multiple en el select.
- Datalist. Similar al select, pero con filtro.
- Inputs sin categoría.
 - Color. Se utiliza para especificar un color. Se abre una paleta de colores. Sirve, por ejemplo, para
que el usuario pueda elegir el color de cierto elemento de la web.
- Number. Se utiliza para valores numéricos.
- Range. Se utiliza para establecer un rango. Sus atributos son step (establece de cuánto en cuánto se
moverá), min (el punto de partida) y max (el punto final).
- Reset Se utiliza para resetear el formulario.
- Text. Valor por defecto.
- Hidden. Campo oculto que puede contener valor, pero no se mostrará a menos que lo configuremos
con JavaScript para que si se muestre. Por ejemplo, podríamos poner en un input ¿tiene coche? Y que
el input hidden sea para incorporar el color del coche. Si el usuario pone que no tiene coche, no se
muestra, pero si el usuario pone que tiene coche, a través de JavaScript, podemos hacer que el input
hidden aparezca.
- File. Se utiliza para cargar archivos y enviarlos desde el formulario. Se complementa con CSS y
JavaScript.
d) Button. Botón que permitirá enviar el formulario.

Asociar Label e Input. Se coloca en label el atributo for y en input el atributo id. En ambos se pone el mismo
nombre y quedan asociados. Otra forma, que no se suele utilizar, es escribir el input dentro del label. Dicha
forma no se usa con frecuencia debido a que reduce las posibilidades del CSS.

Más elementos dentro de los formularios.

a) Fieldset. Se utiliza para agrupar elementos dentro de un formulario.
b) Legend. Sirve para ponerle un título al fieldset.
c) Meter. Representa un valor dentro de un rango conocido.
d) Progress. Sirve para incorporar una barra de progreso.
e) Textarea.

Atributos para Formularios.

a) Placeholder. Da una pista al usuario de lo que tiene que introducir.
b) Required. Hace que un campo sea obligatorio.
c) Readonly. Hace que un campo sea de solo lectura. El campo se envía.
d) Disabled. Desactiva el campo. El campo NO se envía.
e) Min-Max. Establece el mínimo y el máximo de un campo numérico.
f) Minlength-Maxlength. Establece el mínimo y máximo de caracteres de un campo de texto.
g) Selected. Sirve para establecer una opción por defecto. Equivale a checked en los select.
h) Autofocus. Sirve para poner el foco por defecto al cargar el formulario.

19. Envío de Formularios. Método GET VS Método POST. El envío de formularios se realiza a través de un
método http (GET o POST). Se debe incorporar el atributo method en la etiqueta form para definir el
método a utilizar.
a) Método GET (método por defecto). Envío de formularios a través de la URL.
b) Método POST. Envío de formularios a través de la parte de atrás de la página.

20. Contenido Embebido. Consiste en todo aquel contenido que traemos desde afuera, es decir, que no
forman parte de nuestro código, pero queremos que formen parte de nuestra página web. Son los archivos
que más peso (tamaño) añaden a una página web. Los tipos más conocidos son imágenes, audios, videos e
iframes.

a) Imágenes. Se pueden clasificar en dos tipos generales.

- Vectoriales. SVG (recomendado dado que no añaden nada de peso). Al hacer zoom, no pierden su calidad.
Si hacemos click en la imagen SVG en Visual Studio Code, nos aparecerá todo el código que se requiere
para realizar la misma.
- Mapa de Bits. JPG (no soporta transparencias ni animaciones), PNG 8/24 (transparencias), GIF
(animaciones) y WEBP (formato de menor peso que acepta tanto transparencias como animaciones, por
ende, conviene convertir las imágenes JPG, PNG y GIF a WEBP, lo que se puede hacer en
https://imagen.online-convert.com/es/convertir-a-webp). Al hacer zoom, todas pierden su calidad. Se
recomienda vectorizar imágenes de mapa de bits (vectormagic.com).

Insertar Imágenes. Se insertan con la etiqueta img. La misma tiene el atributo src (ruta de la imagen) y alt
(descripción de la imagen que aparecerá si la carga de la misma falla). A su vez, las imágenes SVG, pueden
ser insertadas a través del código que se utiliza para realizarlas.

Pixels. Hay dos tipos de pixels.

- Píxeles físicos (screen size). Son los píxeles reales que están en un monitor, smartphone, tv, etc. Por
ejemplo, cuando se habla de 1920x1080 (Full HD), se refiere siempre a una pantalla de 1920 píxeles
FÍSICOS de ancho y 1080 FÍSICOS de alto.
- Píxeles lógicos (CSS ¿o viewport?). Son la unidad de medida con la que trabaja CSS para pintar elementos
en el viewport, y NO siempre son del mismo tamaño que un píxel físico. No tiene dimensiones específicas,
sino que están establecidas por software por el fabricante.

Device Pixel Ratio. Ratio entre los pixels lógicos y los pixels físicos de un dispositivo. Sirve para el
responsive web design.
- Si mi DPR es de 1, el tamaño de 1 píxel lógico será de 1 píxel físico, por lo que ambos abarcarán el mismo
espacio en pantalla. DPR 1 = 1PL = 1PF
- Si mi DPR es de 2, el tamaño de 1 píxel lógico será de 4 píxeles físicos (2 píxeles físicos de ancho x 2
píxeles físicos de alto). DPR 2 = 1PL = 4PF
- Si mi DPR es de 3, el tamaño de 1 píxel lógico será de 9 píxeles físicos (3 píxeles físicos de ancho x 3
píxeles físicos de alto). DPR 3 = 1PL = 9PF
La razón por la que se creó el DPR pixel ratio fue el aumento de la resolución en los dispositivos móviles.
Con el aumento de la densidad de pixels físicos, si todos los dispositivos tuvieran un DPR de 1 las páginas
se renderizarían demasiado pequeñas.

Cálculos DPR. Píxeles lógicos = píxeles físicos/DPR.

Iphone 3G. Iphone 6.
Pixeles físicos (screen size). 320x480 750x1334
DPR. 1 2
Píxeles lógicos (viewport o CSS). (320/1)*(480/1) = 320x480 (750/2)*(1334/2) = 375x667
Al visualizar una página web, el CSS pensará que el dispositivo tiene una pantalla de resolución de lo
calculado en píxeles lógicos y las consultas de medios responderán como si la pantalla fuera de X píxeles
lógicos.
La razón por la que se creó la proporción de píxeles de CSS es porque a medida que las pantallas de los
teléfonos obtienen resoluciones más altas, si cada dispositivo todavía tuviera una proporción de píxeles de
CSS de 1, las páginas web se mostrarían demasiado pequeñas para verlas. Un monitor de escritorio de
pantalla completa típico tiene aproximadamente 24 "con una resolución de 1920 x 1080. Imagínese si ese
monitor se redujera a aproximadamente 5" pero tuviera la misma resolución. Ver cosas en la pantalla sería
imposible porque serían muy pequeñas. Pero los fabricantes están saliendo constantemente con pantallas de
teléfono con resolución de 1920x1080. Así que la proporción de píxeles del dispositivo fue inventada por los
fabricantes de teléfonos para que pudieran continuar impulsando la resolución, la nitidez y la calidad de las
pantallas de los teléfonos, sin hacer que los elementos de la pantalla sean demasiado pequeños para verlos o
leerlos.

Se recomienza NO utilizar las mismas imágenes para la versión de escritorio que para la versión móvil. Lo
que podemos alterar a través del atributo srcset o de la etiqueta picture.

- Atributo SRCSET. Sirve para decirle al navegador que cargue una imagen u otra en función del Device
Pixel Ratio. Se le debe modificar el atributo src de la etiqueta img por el atributo src y colocar ‘‘ruta de
imagen1, ruta de imagen 2 número dprx’’.

<img srcset="../13.embed-content/assets/images/boca.jpg, ../13.embed-

content/assets/images/bocamobile.jpg 3x" alt="Escudo Boca">

Si dprx se encontrara al lado de la ruta 1 (y no al lado de la ruta 2 como en el ejemplo), estaríamos aclarando
que a tal DPR queremos que aparezca la imagen uno, pero en el ejemplo al ponerlo al lado de la ruta 2,
estamos aclarando cuando queremos que aparezca la imagen dos (a DPR 3). A su vez, podemos agregar
ilimitadas rutas en srcset por si alguna imagen no es soportada por el sitio web.

¿Cómo ver qué imagen cargó la página? Click derecho, inspeccionar elemento, network y refresh. Aparecerá
en el recuadro inferior el nombre y peso de la imagen cargada. Si queremos probar distintos DPR, al dejar el
zoom en 100% en Chrome es DPR1, al hacer 300% de zoom en Chrome es DPR3. Así podremos hacer la
prueba y ver cual se carga.

- Etiqueta Picture. Sirve para hacer lo mismo que SRCSET, pero con más opciones. Dentro de la etiqueta
picture tendremos otras dos etiquetas.
- Etiqueta source con atributos srcset y media. Colocamos en srcset la ruta y en media la condición.
Por ejemplo, que aparezca la imagen cuando el tamaño de la pantalla sea inferior a 1200px.
- Etiqueta img con atributo src. Colocamos en img la ruta de la imagen que queremos que aparezca
cuando no se cumpla la condición de la etiqueta source. Por ejemplo, siguiendo el caso anterior,
aparecerá la imagen cuando la pantalla supere los 1200px.

b) Audios.
Insertar Audios. Se insertan con la etiqueta audio. La misma tiene el atributo src (ruta de la imagen) y
controls (para que aparezca el reproductor). También se puede incorporar el atributo autoplay para que inicie
la canción automáticamente, pero hay un problema. Actualmente los navegadores bloquean el autoplay
siempre y cuando el reproductor no se encuentre silenciado. Se puede agregar el atributo muted para que el
sonido inicie muteado y así funcionaría el autoplay (comenzaría a correr la canción, pero no se escucharía
hasta que saquen el muteado). A su vez, también podemos agregar la etiqueta loop para que, cuando el audio
termine, vuelva a comenzar desde el principio.

c) Video.
Insertar Videos. Se insertan con la etiqueta video. Se aplica TODO lo mismo que en los audios. El único
atributo distinto a los audios es poster, el cual sirve para elegir la imagen inicial que se mostrará antes de que
se reproduzca el video. Se puede elegir cualquier imagen. Si pusiéramos el autoplay, no se lograría apreciar
la imagen de poster.

d) Iframes. Consiste en agarrar una web, o parte de la misma, e insertarla dentro de la nuestra. Por ejemplo,
insertar videos de Youtube o publicaciones de Instagram en nuestra página.

Insertar Iframes. Se insertan con la etiqueta iframe. El problema que tienen los iframes es que dentro tienen
un HTML, lo que a la hora de cargar nos puede provocar mayor lentitud. No se recomienza incorporar
iframes dado que ralentizarán la carga de la web. Los atributos básicos son src, width (ancho) y height (alto).

e) Etiqueta Figure. Sirve para insertar contenido embebido, pero es opcional. Se utiliza siempre que se
quiera romper el flujo, con un contenido relacionado, pero que no es necesario para la interpretación del
artículo, es decir que, si lo elimináramos, se podría seguir comprendiendo. Contendría las etiquetas img,
audio, video e iframe.

Figcaption. Sirve para incorporar una descripción del contenido. Por ejemplo, la descripción que se
encuentra debajo de las fotos o debajo de las tablas.

21. Etiquetas Meta. Son las que van dentro del head. Suministran información codificada a navegadores y
motores de búsqueda sobre una página web. Los metadatos son invisibles para el usuario y se encargan de
añadir información para facilitar el análisis de los archivos HTML y la gestión del contenido de una página
web. Hasta ahora, conocíamos charset (para indicar la codificación de caracteres) y title (para nombrar la
pestaña). La mayoría de etiquetas meta tiene dos atributos.
a) Name. Tipo de metadato.
b) Content. Contenido del metadato.

Algunas Etiquetas Meta Importantes.

a) Meta name=“description”. Sirve para incorporar la descripción que aparece debajo del link de la página al
realizar una búsqueda en Google.
b) Meta name=“author”. Sirve para indicar quien es el autor/dueño de la web.

22. Favicon. Consiste en la imagen que observamos como ícono en la pestaña de la web. Lo primero que hay
que hacer es ir a favicon-generator.org. Allí debemos cargar la imagen que queremos utilizar y nos la
convertirá a todos los formatos posibles de favicon. Se descargan todas las imágenes, se agregan a la carpeta
creada con el nombre favicons y se incorpora el código que nos otorga la misma página. Cabe destacar que
debemos modificar la ruta para que sea correcta.

23. FontAwesome. Es una librería de íconos que nos otorga una red de distribución de contenidos (CDN), es
decir, un servidor que tiene una copia de lo que estamos solicitando. Se debe incorporar en la etiqueta head
el CDN que nos otorga FontAwesome.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-

DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
crossorigin="anonymous">

Luego ya podemos elegir íconos de la página e incorporarlos en nuestro código. No olvidar agregar el CDN
al head dado que, si no lo agregamos, los íconos no aparecerán.
24. Atributos de Accesibilidad. La accesibilidad hace referencia a la posibilidad de hacer una página web
accesible para todo el mundo. Independiente de si la pueden ver o no. Sirve para aquellas personas no
videntes que ingresen a nuestra web.
a) Tabindex. Sirve para que el usuario se mueve por la página en un orden.
b) Aria-Label. Sirve específicamente para gente invidente que utiliza el navegados por voz. Al hacer click,
la voz de sus computadoras dirá lo que hayamos escrito en el atributo aria-label.
c) Role. Sirve específicamente para gente invidente que utiliza el navegados por voz. Le da al navegador
información para que sepa sobre que tipo de elemento se están posicionando.

25. Open Graph Protocol. Consiste en un protocolo creado por Facebook para poder elegir lo que se muestra
cuando compartimos nuestra página web. Por ejemplo, cuando compartimos el link de una página en
Whatsapp, aparece una miniatura con algunos datos, la cual se realiza con Open Graph Protocol. Se realiza
en el head dado que se incorpora a través de metadatos. Si no lo hacemos, la propia plataforma donde se
comparta el link lo hará por nosotros, pero nos arriesgamos a que el contenido no sea estético, falte cierto
contenido que nos interesa que aparezca o únicamente se comparta el link sin información adicional. La
información para armar el Open Graph Protocol se encuentra en ogp.me.

Caso Twitter Card. Consite en el Open Graph Protocol exclusivo de Twitter. La información para armarlo
encuentra en developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards. Hay distintos
tipos de Twitter cards dependiendo de la necesidad.
a) Summary Card.
b) Summary Card with Large Image.
c) Player Card. Reproductor.
d) App Card.