Professional Documents
Culture Documents
Estructura
<!Doctype HTML>
Declara el documento como HTML 5 ante el navegador
<html></html>
Etiqueta principal, todo va contenido en esta etiqueta
<html lang=”es”>
<meta>
Son los metadatos, información que le damos al navegador y son
incluidos como atributos dentro de la etiqueta meta
<meta charset=”utf-8">
Para usar todo tipo de caracteres
Ejemplo:
<nav role="navegación">
<ul>
<li>
<a href="dirección Inicio">Inicio</a>
</li>
<li>
<a href="dirección Productos">Productos</a>
</li>
</ul>
</nav>
<ol type=””></ol>
Indicamos si el tipo de orden será numérico o
alfabético
<li value=””></li>
Nos indica el valor que tendrá ese elemento en
numero
<dl></dl>
Tablas
<table></table>
<th></th>
Inserta un dato de cabecera
<tbody></tbody>
Cuerpo de la tabla
<tfoot></tfoot>
Pie de la tabla
Atributos de tabla
<td rowspan=”3”></td>
Numero de filas que ocupara un dato
<td colspan=”3”></td>
Ruta Absoluta
Es el URL de alguna página web
Ruta Relativa
A la raíz
Parte desde el índex y se ubica con un “/” al
comienzo de la ruta
Ejemplo
SRC= ”/img/logo.jpg”
Al documento
Parte desde el documento, por lo cual se puede subir
niveles si se desea, usando “../”
Ejemplo
SRC= ”../img/logo.jpg”
Imágenes
Las imágenes es un apartado especial entre html5 y el contenedor
en el que lo visualicemos, los celulares por lo general tienen mas
pixeles por punto por lo que para el diseño responsive de ellos
necesitaremos una mayor comprensión de estos.
devicepixelratio
<picture>
<source media="(min-width:)" srcset="" sizes="">
</picture>
<figure>
Nos permite encerrar un texto o imagen y darle énfasis
<figcaption>
Es una descripción del figure
Multimedia
El multimedia es la visualización de audio y video de forma nativa
que nos da HTML5 para ver desde el navegador
<video>
Para visualizar videos de forma nativa
Para escuchar los audios, tiene los mismos atributos que video
Formulario
Los formularios son cajas de texto, por los cuales podemos solicitar
información a los usuarios a través del navegador. <form>
Hay muchos tipos de formulario eso depende del type
Atributos
Type
Atributos de Input
• type Tipo de Formulario
• disabled Desactiva un formulario
• checked Activa un checkbox por defecto
• required Hace un input obligatorio
• selected Selecciona un input radio
• min Mínimo numérico
• max Máximo numérico
• step Salto según el numero
• minlength Mínimo numero de caracteres
• maxlength Máximo numero de caracteres
• placeholder Texto de ayuda interno
• reset Borra los datos de un formulario
Lista de opciones
Para desplegar una lista de opciones utilizamos la etiqueta
<select> dentro de un <select> puede haber opciones con la
etiqueta <option>, estas se pueden agrupar con la etiqueta
<optgroup> y le damos un titulo con el atributo label así:
<details>
<summary>¿Cómo me llamo?</summary>
<p>Juan López</p>
</details>
<details>
<summary>¿Cuantos años tengo?</summary>
<p>19</p>
</details>
Para atraer un contenido de otra pagina deberemos usar la etiqueta
<iframe> normalmente las paginas te dan todo para que puedas llevar
trozos de sus páginas. De ese modo se usa el contenido embebido con
otras etiquetas como: <embed> y <object>
Microdatos
Schema.org
<meta property="og:url"
content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-
imdb.com/images/rock.jpg" />
</head>
</html>
Otro tipo de metadatos Open Graph
• og:audio
• og:description
• og:determiner
• og:locale
• og:locale:alternate
• og:site_name
• og:video
Twitter Card
<meta name="twitter:card" content="summary" />