Vous êtes sur la page 1sur 13

HTML5

(Lenguaje de marcado de Hipertexto)


Etiqueta HTML con cierre de etiqueta
<h1 id=”main-title> Curso HTML 5</h1>
Etiqueta html sin cierre

<img src=”foto.jpg” alt=“Texto Alternativo“/>


Leyenda

Etiqueta Atributo Contenido Valor

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”>

Nos da el idioma de la página ante el navegador


<head></head>

La cabecera contiene, el título, icono y los metadatos


dentro de la pagina
<body></body>

El cuerpo del documento, van los elementos que


visualizaremos con el navegador.

Contiene el mayor numero de etiquetas de estructura,


tales como: article, nav, section, div, etc.
<footer></footer>

El final de la página, lo elementos que van aquí son


visibles, pero deben tener un sentido distinto al del
body.
Estructura de una etiqueta head
Como dijimos en la etiqueta head van etiquetas no visibles, y 2 etiquetas
visibles en el navegador tales como: <title>, <link favicon>, y los
metadatos, que sirven para dar instrucciones al navegador.
<title><title>
El nombre de nuestro documento, aparece en la pestaña del
navegador
<title> Titulo de la Pagina </title>

<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

<meta name=”description" content=”Descripcion de la Pagina”>


Descripción de la página, para que Google la use al usar su
buscador

<meta name="viewport" content=" width=device-width, initial-


scale=1.0">
Con este metadato utilizaremos todo el ancho del
navegador, se usa para diseño responsive
<meta http-equiv="refresh" content="0; url=http://example.com">
De utilidad para refrescar el navegador cada cierta
cantidad de segundos
<link>
Utilizado para traer archivos o imágenes externas
<link rel="shortcut icon" href="img/L.png" type="image/x-
icon">
Sirve para utilizar un icono que represente al
documento
<link rel="stylesheet" href="style.css">
Referenciamos un archivo CCS para darle estilos al
documento
Estructura de una etiqueta Body
Etiquetas de Sección
Las etiquetas de sección son aquella que le dan uso a toda una sección
respecto al ancho del viewport, por lo cual no puede haber una etiqueta
de sección que este al costado de otra.
<h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>,
<h6></h6>
Representar títulos y subtítulos de nuestro documento, tienen una
jerarquía entre ellas, no puede haber una sin su superior inmediato.
<h1>Titulo 1</h1>
<h2>Subtitulo 1</h2>
<h3>Subtitulo 1.1</h3>
<h2>Subtitulo 2</h2>
<article></article>
Crea una sección que es usada como un artículo dentro del
documento, dentro de article pueden ir otras etiquetas
<section></section>
Crea una sección dentro del body, similar a un articulo pero
sirve para otro tipo de cosas. Dentro de el puede haber mas
etiquetas
<nav></nav>
Representa una barra de navegación en ella van los links
para navegar dentro de nuestra pagina web, generalmente
se usa <ul>, <li> y <a> para representar los enlaces y listas.
<aside></aside>
Representa una barra lateral, la podemos usar para colocar
contenido que no tiene nada que ver con la pagina actual
<header></header>
Se usa para representar la cabecera del body como de otros
contenidos de sección como <article> o <section>
<footer></footer>
El pie de página, utilizado para poner enlaces hacia otras
secciones o para colocar las redes sociales
<adress></adress>
Se utiliza para escribir una dirección a un contenido de una
página externa
Etiquetas de Contenido
Al igual que el anterior, ocupan todo el ancho, pero, no tienen otras
etiquetas internamente y mas bien tienen una representación
semántica
<p></p>
Representa un párrafo dentro de una sección
<hr></hr>
Representa un salto de capitulo, nos da un cambio
<pre></pre>
Representa un párrafo dentro de una sección, pero respeta
los espacios y saltos de línea que haya dentro de el
<blockquote></ blockquote >
Representa una cita del contenido de otro autor
<main></ main >
Le dice al navegador cual es el contenido principal del body
o de una sección del documento.
<div></ div >
Es utilizado para poder agrupar contenido, pero no
representa nada
Etiquetas de Línea
Son etiquetas que tienen un espacio limitado a cuanto contenido
representen, no ocupan todo el ancho del viewport a menos que sea
necesario
• <a>Indica un enlace a otro • <sub>Sub índice
documento • <span>No representa nada
• <em>Representa énfasis dentro • <s>Lo que está en desuso
de un texto • <cite>Citar algún autor
• <strong>Mayor importancia a • <q>Citar a nivel de texto
un texto dentro de un texto • <data>Datos adicionales
• <small>Menor importancia a un • <time>Indicar tiempo
texto dentro de un texto • <code>Para indicar código
• <abbr>Representa una • <var>Indica una variable
abreviatura
• <sup>Super Índice
Listas
<ol></ol>
Lista ordenada, presentada con números o letras, tiene una
jerarquía establecida
<ul></ul>
Lista ordenada, pero sin jerarquía, todos los elementos
presentan el mismo valor semántico
<li></li>

Representa al elemento dentro de una lista, va dentro de la


etiqueta <ol> o <ul>, se usa en su mayoría para los
navegadores.

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>

Atributos de las listas


<ol reversed></ol>
Pone de manera inversa el orden del número de
elementos de la lista
<ol start=”3”></ol>
Nos indica el valor con el que empezara la lista

<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>

Es una lista, pero de definiciones, para un diccionario


<dl></dl>
Es una lista, pero de definiciones, para una descripción

Tablas
<table></table>

Crea una tabla


<tr></tr>

Inserta una fila en la tabla


<td></td>
Inserta un dato en la tabla

<th></th>
Inserta un dato de cabecera

Distribución de una tabla


<thead></thead>
Cabecera de la tabla

<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>

Numero de columnas que ocupara un dato


<tr style=”background: red“></tr>

Color de fondo de una fila


<colgroup>
Agrupa las columnas
Rutas relativas y absolutas

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.

Para poder visualizar el ratio de pixeles, presionamos f12 en el


navegador, vamos a la consola y escribimos lo siguiente:

devicepixelratio

Atributos de las imágenes


Una imagen es llamada con la etiqueta <img>, pero esta etiqueta
contiene varios atributos.
<img src=”ruta de la imagen” alt=”Texto alternativo”
width=”ancho” heigth=”alto”>

Srset  podemos utilizar más de una imagen


Sizes  Damos la condición de uso de una imagen u otra
<picture>

Utilizado para poder dar una imagen según la ocasión,


recortes de una misma imagen

<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

Atributos de la etiqueta video


Width, heigth, controls, muted, autoplay
<audio>

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

• buttom • file • reset


• checkbox • hidden • search
• color • image • submit
• date • month • tel
• datetime • number • text
• datetime- • password • time
local • radio • url
• email • range • week
para mostrar un texto para un input utilizamos la etiqueta <label>,
esta etiqueta debe encerrar al input. Y agrupamos algunos con la
etiqueta <fieldset>, le ponemos un titulo a un sector de formularios
con la etiqueta <legend>, esta etiqueta va dentro del fieldset.

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í:

<select name="Rufian" >


<optgroup label="tum">
<option>primero</option>
<option>segundo</option>
<option>tercero</option>
</optgroup>
<optgroup label="nom">
<option>cuarto</option>
<option>segundo</option>
<option>tercero</option>
</optgroup>
</select>

Para poder desplegar una caja de texto realizaremos un


<textarea>, dispondremos de atributos para que la caja de texto
sea mas grande y contenga un máximo número de letras:
• Cols
• Rows
• Maxlength
Podemos hacer un preguntas y respuestas utilizando la etiqueta
<details>, con sus respectivas etiquetas hijas, de la siguiente manera:

<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

Se utiliza para hacer referencia a ítems para que si el navegador


tenga conciencia de que ciertos elementos están dentro de
nuestra página web

Para poder utilizar un schema tendríamos que ubicar un elemento


que tenga las características que necesitamos, y pegar la url que
nos da, luego los elementos de nuestro artículo, cada cosa que
pongamos tendrá su propio url para identificarlo.

<article name="Zapatilla" itemscope itemtype="URL del artículo">


<p name="precio" itemprop="url del elemento"></p>
<p name="color" itemprop="url del elemento"></p>
</article>
Open Graph
Ponemos el prefix en la etiqueta html
Ejemplo

<html prefix="og: http://ogp.me/ns#">


<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />

<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" />

<meta name="twitter:site" content="@flickr" />


<meta name="twitter:title" content="Small Island Developing
States Photo Submission" />
Todos los atributos para el Twitter Card
• twitter:card
• twitter:site
• twitter:title
• twitter:description
• twitter:image
• twitter:player
• twitter:player:width
• twitter:player:heigth
APLICACIONES DE INTERFAZ PROGRAMADO
• DOM
• BOM
• Canvas
• Web Storage (Local Storage, Session Storage)
• Websocket
• Web Component
Recursos para mantenerse actualizados
• www.caniuse.com
Esta página web está destinada para observar si alguna etiqueta de
html o css esta soportada por el navegador
• https://developer.mozilla.org/es/
Podemos revisar el uso de las etiquetas de html de una manera rápida
• https://www.w3schools.com/
Sirve de guía rápida del uso de las etiquetas HTML y CSS
• https://www.w3.org/
Documentación oficial acerca de html y css
• https://google.github.io/styleguide/htmlcssguide.html
Repositorio de la guía de estilos que sigue Google en sus desarrollos

Vous aimerez peut-être aussi