Documentos de Académico
Documentos de Profesional
Documentos de Cultura
ü HTML 1.0
ü HTML 2.0
ü HTML 3.2
ü HTML 4.0
ü XHTML
ü HTML5
ESTRUCTURA BASICA DE HTML5
TAGS/ETIQUETAS
ESTRUCTURA DE UNA ETIQUETA
Una etiqueta actúa como un contenedor y describe los datos o
información que contienen entre la etiqueta de apertura y la de
cierre.
<tipoDeEtiqueta>Contenido</tipoDeEtiqueta>
Una etiqueta esta compuesta por:
• Etiqueta de apertura:
• < un signo menor que se conoce como apertura de la etiqueta
• tipoDeEtiqueta puede ser una o varias letras que describen el tipo de
etiqueta que queremos crear (título, link, imagen, etc)
• > un signo mayor que se conoce como cierre de la etiqueta
• Contenido:
• puede ser un texto u otro/s elemento/s de HTML
• Etiqueta de cierre:
• Tiene la misma estructura que la etiqueta de apertura
• / tiene una barra inclinada para determinar que es una etiqueta de
cierre (sino sería igual que la de apertura)
PRINCIPALES TAGS/ETIQUETAS
UTF-8, (la
html, head, url a un
charset, recurso)…
title, body, src, alt …
img …
¡atributo y valor son opcionales!
ETIQUETAS SEMANTICAS
<nav>
ü Define un conjunto de enlaces de
navegación.
ETIQUETAS SEMANTICAS
<section>
ü Define secciones de un documento,
como capítulos, encabezados, pies de
página o cualquier otra sección del
documento.
ü No se debe usar como contenedor
genérico. Para ello ya existe <div>,
especialmente si el objetivo es aplicar
un estilo (CSS) a la sección.
ETIQUETAS SEMANTICAS
<article>
ü Especifica contenido independiente y
autónomo.
ü Un artículo debe tener sentido por sí
mismo, y debe ser posible leerlo
independientemente del resto del sitio
web.
ü Podría ser un mensaje en un foro, una
entrada de blog, un comentario de un
usuario, un widget interactivo, o
cualquier otro elemento independiente
del contenido.
ETIQUETAS SEMANTICAS
<aside>
ü Se suele utilizar para colocar
información adicional a la página.
ü Su uso más común es como una
columna a uno de los lados de la
página.
ETIQUETAS SEMANTICAS
<footer>
ü Define un pie de página para un
documento o sección.
ü Normalmente contiene:
ü Información de autoría
ü Información registrada
ü Información del contacto
ü Mapa del sitio
ü Enlaces de vuelta al principio
ü Documentos relacionados
ETIQUETAS BASICAS
<!-- -->: se utiliza para añadir comentarios dentro del código que el
usuario no podrá ver. Por ejemplo para añadir notas de tareas
pendientes, aclaraciones que nos ayuden a nosotros o a otras
personas a entender el código, etc.
Tip: para que recuerdes mejor qué significa cada elemento, piensa en los acrónimos en
inglés:
h1 = heading1; h2 = heading 2; ...
p = paragraph
br = break line
ul = unordered list
em = emphasis
ETIQUETAS BASICAS
<div>
La etiqueta <div> define una división o una sección en
un documento HTML.
Se utiliza para agrupar elementos en bloque, para
darles formato con CSS.
HERRAMIENTAS PARA DESARROLLADORES
Acceso:
Menú de Chrome – Más herramientas – Herramientas para
desarrolladores
Ctrl + Shift + I
HERRAMIENTAS PARA DESARROLLADORES
Atributos:
ü autoplay: el audio se reproduce automáticamente.
ü controls: muestra los controles estándar de HTML5 para
audio en una página web.
ü loop: el audio se repite automáticamente.
ü muted: especifica que la salida de audio debe estar
silenciada
ü preload: es usado en el elemento audio para almacenar
temporalmente (buffering) archivos de gran tamaño.
ü src: puede ser una URL del archivo de audio o la ruta al
archivo en el sistema local.
ETIQUETA CANVAS
El elemento HTML <canvas> se utiliza para dibujar gráficos en
una página web.
El gráfico mostrado se crea con <canvas>. Muestra cuatro
elementos: un rectángulo rojo, un rectángulo degradado, un
rectángulo multicolor y un texto multicolor.
El elemento <canvas> es sólo un contenedor para gráficos. Su
verdadera manipulación se hace totalmente por medio del uso
de JavaScript.
Canvas posee varios métodos para dibujar trayectorias, cajas,
círculos, texto y agregar imágenes.
ETIQUETA SVG
Permite construir gráficos vectoriales. Utiliza una estructura
XML, es decir, también utiliza etiquetas, pero éstas son propias
de <svg> y no se pueden utilizar fuera de su ámbito. Estas
etiquetas propias tienen atributos para permitir posición y
apariencia, pero se puede utilizar JavaScript y CSS.
La característica más popular de <svg> es que permite escalar
imágenes sin perder calidad.
ALGUNAS CONVENCIONES
EJERCICIO DE HTML5
Opcional:
ü Audio y video