ESTRUCTURA HTML

Hemos visto el revuelo que ha causado el inicio del módulo, sobre todo por la expectativa hacia el código
para crear páginas web. Tenemos compañeros que dominan el tema, otros que conocieron las formas
anteriores de diseñarlas y algunos que no hemos traveseado en esta área; así que lo primero es
estandarizar nuestra concepción grupal.

¿Por qué usar código?

Si ahora hay tantos programas que nos permiten generarlo, ¿por qué escribirlo nosotros mismo? Porque
no estamos en un curso de diseño de páginas web, estamos en un programa de experto en su
administración, y debemos dominar la base sobre la cual funciona la world wide web, el código HTML.
Por eso nuestra dinámica de la Matrix, en la que vemos todo por fuera: bonito, funcional, atractivo, pero
¿qué hay detrás? Vamos a descubrirlo.

HTML5 es la última colección de estándares para el diseño y desarrollo de páginas web. No es un

lenguaje de programación, así que no debes preocuparte o temerle, al contrario, este lenguaje se basa
en una colección que nos muestra la manera en que se presenta la información en un navegador web y
la manera de interactuar con ella.

Como todo lenguaje, debemos aprender a conocerlo, usarlo y entenderlo y para ello iniciaremos con la
estructura básica de una página HTML5:

Las palabras en inglés mostradas en color amarillo y expuestas entre los símbolos <> son parte del
lenguaje HTML5 y se las denomina etiquetas, ya que marcan secciones, partes o elementos de una
página web y que tendrán una característica específica según el diseño. Por ello en lugar de programar
una página web, se la maqueta o etiqueta.

No importa el dispositivo que uses: un ordenador de escritorio, un equipo portátil, una pantalla gigante o
una muy pequeña, una tableta o un teléfono inteligente; el HTML5 te permite crear una página
totalmente compatible y los elementos de la estructura que acabas de conocer son considerados como el
estándar en la actualidad.

Para iniciar el trabajo como webmaster con HTML5 necesitamos ciertas herramientas de trabajo en línea
o e-work, que describimos a continuación:

Navegadores web
Existe una discusión muy grande con respecto a cuál es el mejor navegador, pero para un webmaster no
hay un mejor o un peor, todos son necesarios tomando en cuenta los utilizados por los usuarios en la
red. Para ello te sugerimos los que vienen instalados de forma predeterminada en los ordenadores y que
son usados por los usuarios novatos o con menor experiencia, luego suma uno que tenga una acogida
estadística fuerte, pero que no pertenezca al grupo anterior y por último algún navegador preferido por
ti a manera personal. A continuación te mostramos los que usamos nosotros, ubicados en el mismo
orden:

 Sistema Windows - Microsoft Edge

 Sistema Mac OSX & iOS - Safari
 Sistema Linux - Mozilla
 Sistema Android - Chrome
 Estadística fuerte - Firefox
 Uso personal - Opera

Editor HTML
Dependiendo del sistema operativo que uses en tu ordenador, instala un editor HTML para que puedas
escribir tus códigos con la mayor eficiencia posible. Te sugiero:

 Sistema Windows - Notepad Plus++

 Sistema Mac OSX - TextMate
 Sistema Android - HTML Editor
 Sistema Linux - Blue Griffon

Área digital de trabajo

Ubica un directorio en tu ordenador que uses específicamente como tu área de trabajo como webmaster
y mantenlo ordenado a un nivel de paranoia, esto es demasiado importante. El nombre del directorio
debe cumplir con las reglas de los 5 sin:

 sin espacios
 sin tildes o acentos
 sin eñes (enies)
 sin símbolos especiales como ,;/&%$"@#+*?}, etc
 sin mayúsculas

Crea subdirectorios que te permitan ordenar los archivos que almacenarás en este espacio, por ejemplo:

 Recursos
 Software
 Plantillas
 Proyectos
 etc.

Crea todos los necesarios para evitar el caos y que dicha organización se convierta en un aliado y no en
una muralla.

Software actualizado
Verifica que tu ordenador tenga la última versión disponible para su sistema operativo, comprobando
primero la compatibilidad necesaria para evitar problemas de funcionamiento. Un webmaster está en el
tope de los usuarios de Internet, no puede quedarse rezagado en versiones antiguas.

Selecciona y actualiza un programa antivirus, máximo uno adicional al que venga predeterminado en tu
sistema. Instalar más de un antivirus, lejos de protegerlo, ocasiona una mayor debilidad a tu entorno.

La última versión de Java, que es un lenguaje de programación usado por miles de gurús, webmasters y
diseñadores, desde sitios web, juegos en línea, efectos digitales, hasta el funcionamiento de multimedia
y compatibilidad de dispositivos periféricos, móviles o wearables. Descárgala y actualízala desde
www.java.com

Bitácora web u offline

Nuestra carpeta offline debe ser una reproducción exacta, a forma de respaldo, del sitio tal y como será
publicado en Internet. Eso indica que su peso, tamaño físico, número de archivos, etc., deben ser
estrictamente aquellos que se encuentran usados en el diseño dentro de la estructura web de nuestro
sitio.

Muy importante
El detalle de estas herramientas o recursos están determinados para aquellas personas que quieren
empezar desde cero, pero apuntando a los estándares internacionales de la W3C, World Wide Web
Consorcium, la máxima entidad en la red, presidida por Tim Bernes Lee, el padre de la Web, creador del
código HTML. Si ya tienes experiencia y te acomodas con otras distintas a las expuestas, puedes usarlas
sin problema alguno, además eres libre de compartir tu experiencia con tus compañeros en los espacios
del aula determinados para ello.

ELEMENTOS HTML

El código HTML5 está compuesto por un lenguaje de etiquetas que se constituyen en elementos que
entregan características especiales a ciertas secciones o contenidos en una página web.

A continuación encontrarás los elementos o etiquetas HTML con su respectiva descripción:

Elemento raíz
<!doctype html> Define que el documento está bajo el
estándar de HTML 5
<html> Representa la raíz de un documento HTML
o XHTML. Todos los demás elementos
deben ser descendientes de este elemento.
Metadatos del documento
<head> Representa una colección de metadatos
acerca del documento, incluyendo enlaces
a, o definiciones de, scripts y hojas de
estilo.
<title> Define el título del documento, el cual se
muestra en la barra de título del navegador
o en las pestañas de página. Solamente
puede contener texto y cualquier otra
etiqueta contenida no será interpretada.
<base> Define la URL base para las URLs relativas
en la página.
<link> Usada para enlazar JavaScript y CSS
externos con el documento HTML actual.
<meta> Define los metadatos que no pueden ser
definidos usando otro elemento HTML.
<style> Etiqueta de estilo usada para escribir CSS
en línea.
Scripting
<script> Define ya sea un script interno o un
enlace hacia un script externo. El lenguaje
de programación es JavaScript
<noscript> Define un contenido alternativo a mostrar
cuando el navegador no soporta scripting.
Secciones
<body> Representa el contenido principal de un
documento HTML. Solo hay un elemento
<body> en un documento.
<section> Define una sección en un documento.
<nav> Define una sección que solamente
contiene enlaces de navegación
<article> Define contenido autónomo que podría
existir independientemente del resto del
contenido.
<aside> Define algunos contenidos vagamente
relacionados con el resto del contenido de
la página. Si es removido, el contenido
restante seguirá teniendo sentido
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> Los elementos de cabecera implementan
seis niveles de cabeceras de documentos;
<h1> es la de mayor y <h6> es la de
menor importancia. Un elemento de
cabecera describe brevemente el tema de
la sección que introduce.
<header> Define la cabecera de una página o
sección. Usualmente contiene un logotipo,
el título del sitio Web y una tabla de
navegación de contenidos.
<footer> Define el pie de una página o sección.
Usualmente contiene un mensaje de
derechos de autoría, algunos enlaces a
información legal o direcciones para dar
información de retroalimentación.
<address> Define una sección que contiene
información de contacto.
<main> Define el contenido principal o importante
en el documento. Solamente existe un
elemento <main> en el documento.
Agrupación de Contenido
<p> Define una parte que debe mostrarse
como un párrafo.
<hr> Representa un quiebre temático entre
párrafos de una sección o articulo o
cualquier contenido.
<pre> Indica que su contenido está
preformateado y que este formato debe
ser preservado.
<blockquote> Representa un contenido citado desde otra
fuente.
<ol> Define una lista ordenada de artículos.
<ul> Define una lista de artículos sin orden.
<li> Define un artículo de una lista
ennumerada.
<dl> Define una lista de definiciones, es decir,
una lista de términos y sus definiciones
asociadas.
<dt> Representa un término definido por el
siguiente <dd>.
<dd> Representa la definición de los términos
listados antes que él.
<figure> Representa una figura ilustrada como
parte del documento.
<figcaption> Representa la leyenda de una figura.
<div> Representa un contenedor genérico sin
ningún significado especial.
Semántica a nivel de Texto
<a> Representa un hiperenlace, enlazando a
otro recurso.
<em> Representa un texto enfatizado, como un
acento de intensidad.
<strong> Representa un texto especialmente
importante.
<small> Representa un comentario aparte, es decir,
textos como un descargo de
responsabilidad o una nota de derechos de
autoría, que no son esenciales para la
comprensión del documento.
<s> Representa contenido que ya no es exacto
o relevante.
<cite> Representa el título de una obra.
<q> Representa una cita textual inline.
<dfn> Representa un término cuya definición está
contenida en su contenido ancestro más
próximo.
<abbr> Representa una abreviación o un
acrónimo; la expansión de la abreviatura
puede ser representada por el atributo
title.
<data> Asocia un equivalente legible por máquina
a sus contenidos. (Este elemento está
solamente en la versión de la WHATWG del
estándar HTML y no en la versión de la
W3C de HTML5).
<time> Representa un valor de fecha y hora; el
equivalente legible por máquina puede ser
representado en el atributo datetime.
<code> Representa un código de ordenador.
<var> Representa a una variable, es decir, una
expresión matemática o contexto de
programación, un identificador que
represente a una constante, un símbolo
que identifica una cantidad física, un
parámetro de una función o un marcador
de posición en prosa.
<samp> Representa la salida de un programa o un
ordenador.
<kbd> Representa la entrada de usuario o
usuaria, por lo general desde un teclado,
pero no necesariamente. Este puede
representar otras formas de entrada de
usuario o usuaria, como comandos de voz
transcritos.
<sub>,<sup> Representan un subíndice y un
superíndice, respectivamente.
<i> Representa un texto en una voz o estado
de ánimo alterno, o por lo menos de
diferente calidad, como una designación
taxonómica, un término técnico, una frase
 idiomática, un pensamiento o el nombre
de un barco.
<b> Representa un texto hacia el cual se llama
la atención para propósitos utilitarios. No
confiere ninguna importancia adicional y
no implica una voz alterna.
<u> Representa una anotación no textual sin
articular, como etiquetar un texto como
mal escrito o etiquetar un nombre propio
en texto en chino.
<mark> Representa texto resaltado con propósitos
de referencia, es decir por su relevancia en
otro contexto.
<ruby> Representa contenidos a ser marcados
con anotaciones ruby, recorridos cortos
de texto presentados junto al texto. Estos
son utilizados con regularidad en conjunto
a lenguajes de Asia del Este, donde las
anotaciones actúan como una guía para la
pronunciación, como el furigana japonés.
<rt> Representa el texto de una anotación Ruby
.
<rp> Representa los paréntesis alrededor de
una anotación ruby, usada para mostrar
la anotación de manera alterna por los
navegadores que no soporten despliegue
estándar para las anotaciones.
<bdi> Representa un texto que debe ser aislado
de sus alrededores para el formateado
bidireccional del texto. Permite incrustar
un fragmento de texto con una
direccionalidad diferente o desconocida.
<bdo> Representa la direccionalidad de sus
descendientes con el fin de anular de
forma explícita al algoritmo bidireccional
Unicode.
<span> Representa texto sin un significado
específico. Este debe ser usado cuando
ningún otro elemento semántico le confiere
un significado adecuado, en cuyo caso,
provendrá de atributos globales como
class, lang, o dir.
<br> Representa un salto de línea.
<wbr> Representa una oportunidad de salto de
línea, es decir, un punto sugerido de
envoltura donde el texto de múltiples
líneas puede ser dividido para mejorar su
legibilidad.
Ediciones
<ins> Define una adición en el documento.
<del> Define una remoción del documento.
Contenido incrustado
<img> Representa una imagen.
<iframe> Representa un contexto anidado de
navegación, es decir, un documento HTML
embebido.
<embed> Representa un punto de integración para
una aplicación o contenido interactivo
externo que por lo general no es HTML.
<object> Representa un recurso externo, que será
tratado como una imagen, un sub-
documento HTML o un recurso externo a
ser procesado por un plugin.
<param> Define parámetros para el uso por los
plugins invocados por los elementos
<object>.
<video> Representa un video y sus archivos de
audio y capciones asociadas, con la
interfaz necesaria para reproducirlos.
<audio> Representa un sonido o stream de audio.
<source> Permite a autores o autoras especificar
recursos multimedia alternativos para los
elementos multimedia como <video> o
<audio>.
<track> Permite a autores o autoras especificar
una pista de texto temporizado para
elementos multimedia como <video> o
<audio>.
<canvas> Representa un área de mapa de bits en el
que se pueden utilizar scripts para
renderizar gráficos como gráficas, gráficas
de juegos o cualquier imagen visual al
vuelo.
<map> En conjunto con <area>, define un mapa
de imagen.
<area> En conjunto con <map>, define un mapa
de imagen.
<svg> Define una imagen vectorial embebida.
<math> Define una fórmula matemática.
Datos tabulares
<table> Representa datos con más de una
dimensión.
<caption> Representa el título de una tabla.
<colgroup> Representa un conjunto de una o más
columnas de una tabla.
<col> Representa una columna de una tabla.
<tbody> Representa el bloque de filas que describen
los datos concretos de una tabla.
<thead> Representa el bloque de filas que
describen las etiquetas de columna de
una tabla.
<tfoot> Representa los bloques de filas que
describen los resúmenes de columna de
una tabla.
<tr> Representa una fila de celdas en una
tabla.
<td> Representa una celda de datos en una
tabla.
<th> Representa una celda encabezado en una
tabla.
Formularios
<form> Representa un formulario, consistiendo de
controles que pueden ser enviados a un
servidor para procesamiento.
<fieldset> Representa un conjunto de controles.
<legend> Representa el título de un <fieldset>.
<label> Representa el título de un control de
formulario.
<input> Representa un campo de datos escrito
que permite al usuario o usuaria editar los
datos.
<button> Representa un botón.
<select> Representa un control que permite la
selección entre un conjunto de opciones.
<datalist> Representa un conjunto de opciones
predefinidas para otros controles.
<optgroup> Representa un conjunto de opciones
agrupadas lógicamente.
<option> Representa una opción en un elemento
<select> o una sugerencia de un elemento
<datalist>.
<textarea> Representa un control de edición de texto
multi-línea.
<keygen> Representa un control de par generador de
llaves.
<output> Representa el resultado de un cálculo.
<progress> Representa el progreso de finalización de
una tarea.
<meter> Representa la medida escalar (o el valor
fraccionario) dentro de un rango
conocido.
Elementos interactivos
<details> Representa un widget desde el que un
usuario o usuaria puede obtener
información o controles adicionales.
<summary> Representa un resumen, título o leyenda
para un elemento <details> dado.
<command> Representa un comando que un usuario o
usuaria puede invocar.
<menu> Representa una lista de comandos.

Durante la escritura de nuestro sitio web, según los códigos de idioma que usemos, puede ser necesario
utilizar ciertos códigos especiales para las vocales tildadas o caracteres especiales como arroba, la letra
ñ, etc. Lo único que debemos hacer es reemplazar el caracter especial por el nombre HTML, por
ejemplo: la a tildada: á debe ser reemplazada por el código &aacute; en una palabra de ejemplo sería:

palabras con escritura normal:

área de colisión del año 2016
 palabras con código HTML:
&aacute;rea de colisi&oacute;n del a&ntilde;o 2016

CODIGOS DE COLOR HTML

Los colores también tienen una codificación dentro del HTML. La misma está dada por su nombre
estándar o por el código hexadecimal (del 0 a la letra f) de los colores en el formato RGB, es decir Red -
Green - Blue. (Rojo - Verde - Azul). La combinación de estos 3 colores, en diferente intensidad nos
presentan diferentes colores y resultados.

A continuación una tabla que nos muestra esas combinaciones:

A pesar de que los colores pueden ser codificados directamente en los archivos HTML, el estándar ideal
sería que se encuentren definidos en los archivos css, que son aquellos que determinan los estilos de la
página web, entre ellos los colores.

ESTANDARES WEB PARA IMÁGENES

Los estándares web para el uso de imágenes toman en cuenta los siguientes parámetros:

 Tamaño físico
 Peso del archivo
 Resolución
 Tipo de archivo

Tamaño físico
Nos permite determinar el espacio que ocupará la imagen dentro de nuestro sitio web. Este tamaño se
mide en píxeles con las dimensiones de ancho y alto limitadas por el autor de la página, según el diseño
requerido. Existe una categorización de imágenes por su tamaño:

 Imágenes grandes, usadas como fondos del sitio web o para efectos de animación de imágenes
centrales. Normalmente su dimensión excede el estándar de 1.024 px de ancho por 768 px de alto.
 Imágenes pequeñas, usadas en iconografía, miniaturas de fotografías o imágenes complementarias.
Su dimensión es inferior a los 256px.
 Imágenes medianas, consideradas como elementos clave dentro de nuestro diseño, son aquellas
imágenes de tamaño normal o convencional, cuya dimensión es superior a los 256px. e inferior a
1.024px. La mayor cantidad de imágenes en nuestro diseño se encuentran en esta sección.
 Microimágenes, imágenes cuya dimensión es inferior a 16px y que suelen apoyar al diseño
complementario del sitio o enganchar el diseño a la estructura del navegador web.

Peso del archivo

Directamente proporcional al tamaño físico de la imagen, éste estándar permite al diseñador evitar que
su sitio web sea muy pesado y no se muestre adecuadamente en las conexiones a internet lentas o
inestables. La relación adecuada según el tamaño es:

 grandes - 128 kb
 medianas - 64 kb
 pequeñas - 32 kb
 micro - 8 kb

Aparentemente el peso es demasiado pequeño, pero una página web tiene varias imágenes y varios
archivos que deben cargar cada vez que el usuario ingresa al sitio y la suma del peso de todos los
archivos es lo que da la velocidad de carga de nuestra página web. De allí la importancia de cuidar este
estándar.

Resolución
Determina la claridad y calidad de la imagen, sin embargo, también es directamente proporcional al peso
del archivo. A mayor calidad o mejor resolución de la imagen, mayor el peso del archivo. La clave es
determinar un equilibrio entre la calidad y su peso y se logra con la ayuda de programas de
manipulación o edición de imágenes digitales.

Es necesario señalar en este punto que las imágenes del diseño gráfico convencional para impresión no
son las adecuadas para ser usadas en la web. No hay que confundir diseño gráfico con diseño web, los
estándares son diferentes. Aún cuando una imagen generada para diseño gráfico puede adaptarse a los
estándares web, el proceso inverso resulta complejo y normalmente requiere volver a crearse.

Tipo de archivo
Este estándar es fijado por el uso más popular de los archivos usados en la web y actualmente los tipos
aceptados por los navegadores modernos son:
  .jpg
Imágenes de fotografías de calidad y buena resolución. Este formato permite eliminar varios detalles
del archivo de imagen en un proceso de compresión, pero manteniendo su calidad, lo que da como
resultado una excelente imagen de bajo peso y gran calidad.
 .gif
Imágenes de baja calidad usadas como complemento al diseño global del sitio web, como líneas, íconos,
bordes, logos, etc.
 .png
Imágenes usadas como principal o complementaria, no pierde detalles en un proceso de compresión
ocasionando que su peso sea mayor al de un jpg. Algunos navegadores no soportan ciertas
características del formato png, como la transparencia.
 .ico
Imágenes usadas para el favicon o archivo de imagen corporativa del sitio embebido en el navegador
web.

HTML5 generó una total revolución en el uso del código para inserción de las imágenes en un sitio web.
Antes, las imágenes eran fijas y no respondían a los estándares responsive o debían estar acompañadas
de una cantidad de etiquetas, scripts o códigos de apoyo para que se adapten al tipo de pantalla o
dispositivo que está usando el usuario. Sin embargo, hoy en día, el nuevo elemento<picture> de
HTML5 permite describir con todo detalle como deben cargarse las imágenes en el sitio web,
adaptándose de manera automática al proceso responsive.

Anteriormente, el código único y más simple para insertar una imagen era:

CODIGO ANTIGÜO

<img
src="images/imagen-unica.jpg"
alt="descripción">

Con HTML5, esta sintaxis cambia con el uso del elemento<picture> en el que se debe definir todas las
imágenes responsive que colocaremos como disponibles y que serán seleccionadas por el navegador
según el dispositivo o tamaño de la pantalla que tenga el usuario. Ahora, el código es el siguiente:

CÓDIGO SIMPLE
inserción de una imagen cualquiera

CÓDIGO RESPONSIVE
inserción de imágenes según tamaño de la pantalla del dispositivo del usuario.

CÓDIGO SIMPLE

<picture>
<img
src="images/imagen-pequena.jpg"
alt="descripción">
</picture>

CÓDIGO RESPONSIVE

<picture>
<source
media="(min-width: 650px)"
srcset="images/imagen-larga.jpg">
 <source
media="(min-width: 465px)"
srcset="images/imagen-mediana.jpg">
<img
src="images/imagen-pequena.jpg"
alt="descripción">
</picture>

Sin embargo, HTML5 sigue unido con el estilo de la página con los archivos CSS, así que debemos
agregar unas líneas de código al estilo, sea dentro de la página o en el archivo de estilo principal .css,
según nuestra estructura y diseño, de la siguiente manera:

Estilo incluido en el archivo .html

<style> img { display: block; margin: 0 auto; } </style>
Estilo en el archivo .css
.img { display: block; margin: 0 auto; }

Con este elemento estamos listos para incluir imágenes responsive dentro de nuestro sitio web, con la
diferencia de que no debemos tener solo una imagen única, sino varias que se adapten al diseño que
podrá ser visualizado en todos los dispositivos.

EMBEBIDOS RESPONSIVE

Hemos observado a lo largo de esta aventura digital que la estructura web actual combina HTML5 y
CSS3 de manera tal que los resultados sean siempre responsive, es decir, que puedan observarse en
cualquiera tamaño de pantalla y navegador moderno disponible en los diferentes dispositivos
electrónicos de la actualidad.

Sin embargo, los nuevos elementos HTML5 toman en cuenta recursos o productos generados por
nosotros mismos, pero el proceso de embebido o inclusión de una tercera codificación en nuestro sitio
web suele no respetar las características responsive de la estructura.

Por ejemplo, para embeber o insertar un video YouTube dentro de mi sitio web, anteriormente debía
colocar un código gigantesco en el que destacaban los elementos <object> y<embed> como vemos el
ejemplo a continuación:

CODIGO ANTIGÜO

<object
width="425"
height="344">
<param name="movie" value=
"http://www.youtube.com/Âv/9sEI1AUF" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<embed src=
"http://www.youtube.com/ Âv/9sEI1AUF"
type="application/x-shockwave-flash"
allowscriptaccess="always"
allowfullscreen="true"
width="425" height="344">
</embed>
</object>

Obviamente, este código entrega los parámetros de ancho y alto del video como cualquier recurso de
terceros para ser embebido y eso lo convierte de manera automática en un recurso no responsive, es
decir, que no cumple con los actuales estándares web actuales para ser visualizado en dispositivos
móviles.

Esto deja por fuera no sólo a los videos YouTube, Vimeo o DailyMotion, sino también a herramientas
valiosas como SoundCloud, Twitter, Google Maps, Instagram, Vine, Storify y muchos más.

La combinación de elementos HTML5 y CSS3 puede dar solución a este inconveniente. A continuación
podrás encontrar el proceso resumido en 4 etapas:

1. Estilo CSS3
2. Contenedor HTML5
3. Código de embebido
4. Edición del código
1. ESTILO CSS3
Inserción del código de estilo que adaptará el recurso de un tercero embebido en nuestro sitio web.

CODIGO CSS
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

2. CONTENEDOR HTML5
Dentro de nuestro documento .html debemos generar un espacio que contendrá el recurso embebido.
Este espacio se denomina contenedor y es el que buscará el estilo descrito en el CSS3. El código que
debemos insertar en el lugar donde estará el embebido es:

CODIGO HTML5
<p>
<div class='embed-container'>
aquí va el código de embebido editado
</div>
</p>

3. CÓDIGO DE EMBEBIDO
Normalmente en los recursos o herramientas de la web 2.0 y 3.0 tenemos la opción de compartir lo que
estamos observando, entre estas opciones encontramos la de insertarlo en nuestro sitio web. Cuando
seleccionamos inserción, el sitio nos entrega un código para que lo agreguemos a nuestro sitio web, este
es el código de embebido.

4. EDICIÓN DEL CÓDIGO

El código de embebido contiene parámetros de alto, ancho, relación, publicidad, enlaces, etc. que deben
ser retirados para que no generen conflicto con nuestro recurso incrustado, como lo muestra el ejemplo
a continuación con un video de YouTube:

CÓDIGO ORIGINAL
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/Y422egdg5X4"
frameborder="0" allowfullscreen>
</iframe>

CODIGO EDITADO
<iframe
src="https://www.youtube.com/embed/Y422egdg5X4"
frameborder="0" allowfullscreen>
</iframe>

Luego de desarrollar cada una de estas etapas, nuestro recurso embebido tendrá los estándares de un
sitio web responsive y se adaptará adecuadamente a todo tipo de pantalla y dispositivo.