HTML 5
HTML5
HTML 5 (HyperText Markup Language, versión 5)
es la quinta revisión importante del lenguaje básico
de la World Wide Web, HTML.
La versión definitiva de la quinta revisión del
estándar se publicó en octubre de 2014.
HTML5
HTML5 es un estándar que sirve como referencia
del software que conecta con la elaboración de
páginas web en sus diferentes versiones, define
una estructura básica y un código (denominado
HTML) para la definición de contenido de una
página web, como texto, imágenes, vídeos, juegos,
entre otros…
HTML5
HTML5 es capaz de ofrecer vídeo y audio online
sin necesidad de instalar ningún plugin. Además
tiene nuevas opciones de renderizado de gráficos o
anotaciones para cualquier navegador. Esto quiere
decir que HTML5 es capaz de funcionar en todos
los navegadores.
HTML5 + CSS3 + JS
HTML5 + CSS3 + JS
1. El lenguaje de marcado HTML (HyperText Markup Language) nos aporta la
estructura básica de los sitios.
2. CSS o también llamadas Hojas de Estilo en Cascada (Cascading Style
Sheets) se utiliza para controlar la presentación, el formato, y el diseño de
nuestra aplicación.
3. JavaScript (js) se utiliza para controlar el comportamiento de los diferentes
elementos, esto es, aporta funcionalidad, dinámica, a nuestros elementos.
HTML5 + CSS3 + JS
Se suele decir que HTML5 aporta la estructura del sitio, CSS lo hace bonito y
JS lo convierte en dinámico, es decir, que permite que el usuario interactúe con
el sitio web.
HTML5 + CSS3 + JS
Diferencias de código entre HTML5, CSS3 y JS
Etiqueta o TAG
El marcado de HTML5 se realiza a través de las etiquetas o también
llamadas “tag”.
La etiqueta, empieza con el signo menor mayor “<” + el nombre de la
etiqueta + “>”
<html>
También tenemos la etiqueta de cierre, la cual incluye “</”.
</html>
Estructura básica
La estructura básica de un documento html tiene los tags, <html>,
<head> y <body>
<HTML> - Indica el inicio del documento.
<HEAD> - Inicio de la cabecera.
<TITLE> - Inicio del título del documento.
</TITLE> - Final del título del documento.
</HEAD> - Final de la cabecera del documento.
<BODY> - Inicio del cuerpo del documento.
</BODY> - Final del cuerpo del documento.
</HTML> - Final del documento.
La estructura html5
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi web</title>
</head>
<body>
</body>
</html>
ESTRUCTURA BÁSICA SITIO WEB
dentro de <head>
<title> </title> Etiqueta usada para definir el título de la página web.
<link> Se usa para enlazar recursos externos al documento HTML. El ejemplo
más común son las hojas de estilos CSS.
<meta> Etiqueta usada para definir otros metadatos que no se pueden definir
con una etiqueta HTML especifica. Por ejemplo para definir el autor del sitio, o la
descripción del mismo.
<style> </style> Etiquetas usadas para introducir código CSS en línea, es
decir, en el propio documento HTML.
estructura del documento
<body> </body> Al contrario que la etiqueta de metadatos <head>, todo lo que quieras mostrar en la página web
debe ir recogido dentro de las etiquetas de apertura y cierre de <body>. Este contenido será el que se muestre en
la web.
<nav> </nav> Usadas para definir el contenido que será la sección de navegación de la web.
<main> </main> Se usa para definir el contenido principal del documento. Solamente puede existir uno por
documento.
<section> </section> Define una sección del documento
<article> </article> Define contenido independiente de la web.
<aside> </aside> Dentro de estas etiquetas suele alojarse el contenido adicional de la web. Suele ser contenido
relacionado con la web pero de poca importancia
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> Son etiquetas HTML muy importantes, ya que son usadas para jerarquizar el
contenido de la web. Las etiquetas se usan para explicar brevemente el contenido que irá a continuación.
<header> </header> Se usan para definir la cabecera la página web. Suele contener el logotipo, menú de
navegación, etc.
<footer> </footer> Usadas para definir el pie de página.
AGRUPACIÓN DE CONTENIDO
<p> </p> Etiqueta usada para escribir párrafos de texto.
<hr> Etiqueta utilizada para “romper” entre dos secciones de una web. Usada
comúnmente como separador.
<ul> </ul> Etiquetas para crear una lista desordenada
<li> </li> Etiquetas que recogen el contenido de un elemento de una lista, sea
ordenada o no.
<div> </div> Etiqueta común utilizada para crear un contenedor genérico.
ETIQUETAS SEMÁNTICAS PARA TEXTO
<a> </a> Etiqueta utilizada para crear hiperenlaces en el documento HTML
<strong> </strong> Etiqueta para definir una palabra o conjunto de ellas como
importantes. Tiene una fuerte importancia en el SEO de la página.
<small> </small> Utilizada para dejar un comentario aparte, del tipo una nota de
derechos de autoría, u otros textos que no son esenciales para la comprensión
del documento.
<span> </span> Etiqueta HTML sin ningún significado específico. Se usa
conjuntamente con los atributos “class” o “id” para atribuirle ciertas características.
<br> Etiqueta utilizada para crear un salto de línea
ETIQUETAS PARA INCRUSTAR CONTENIDO
<img> Etiqueta para “pintar” una imagen en la página web.
<iframe> </iframe> Es una etiqueta que sirve para anidar otro documento HTML dentro del
documento principal.
<embed> Usada para integrar una aplicación o contenido interactivo externo que no suele
ser HTML.
<object> </object> Utilizada llamar a un recurso externo de la web. Este recurso será
tratado como una imagen, o un recurso externo para ser procesado por un plugin.
<video> </video> Se usa para reproducir video en la página web junto a sus archivos de
audio y capciones asociadas.
<audio> </audio> Usada para cargar un archivo de audio o stream de audio.
<svg> </svg> Se usa para llamar a una imagen vectorizada.
ETIQUETAS PARA LA CREACIÓN DE TABLAS
<table> </table> Etiquetas de apertura y cierre de una tabla. El resto de etiquetas
de la tabla han de ir siempre recogidas entre estas dos etiquetas.
<tbody> </tbody> Usada para describir los datos concretos de una tabla.
<thead> </thead> Indica el bloque de filas que describen las etiquetas de las
columnas de la tabla.
<tfoot> </tfoot> Indica los bloques de filas que describen los resúmenes, o datos
totales de una columna de una tabla.
<tr> </tr> Se usa para indicar una fila de celdas de una tabla.
<td> </td> Usada para definir una celda de una tabla.
<th> </th> Etiqueta que se usa para definir el encabezado de una celda
ETIQUETAS PARA FORMULARIOS
<form> </form> Etiqueta de apertura y cierre de un formulario de una página web. El resto de etiquetas
de formulario deben ir siempre recogidas entre estas etiquetas de apertura y cierre de formulario.
<fieldset> </fieldset> Etiqueta que representa un conjunto o agrupación de elementos de un formulario.
“Pinta” un recuadro alrededor de las etiquetas que estén contenidas dentro del <fieldset>
<legend> </legend> Etiqueta ligada a <fieldset>. Indica el título del <fieldset>
<label> </label> Se usa para definir el nombre o título de un control del formulario.
<input> Pinta un campo de introducción de datos para el usuario. Es de las principales etiquetas de un
formulario.
<button> </button> Etiqueta utilizada para representar un botón en el formulario.
<select> </select> Input que permite una selección entre un conjunto de opciones.
<option> </option> Etiqueta ligada a <select>. Permite añadir diferentes opciones al <select>
<textarea> </textarea> Añade un campo al usuario para que pueda introducir texto en unas líneas
máximas de texto que el desarrollador puede definir.
ENLACES DE INTERÉS
https://www.w3schools.com/
