Scribd
Cargar
8 vistas

HTML5

El documento ofrece un recorrido histórico sobre el desarrollo de HTML desde su creación en 1991 por Tim Berners-Lee hasta la estandarización de HTML5 en 2014. Se detalla la estructura básica de un documento HTML, incluyendo etiquetas esenciales como <head>, <body>, y varias etiquetas semánticas, así como su uso en la creación de formularios y tablas. Además, se explican atributos importantes y la validación en HTML5.

Cargado por

marafergin
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
8 vistas

HTML5

El documento ofrece un recorrido histórico sobre el desarrollo de HTML desde su creación en 1991 por Tim Berners-Lee hasta la estandarización de HTML5 en 2014. Se detalla la estructura básica de un documento HTML, incluyendo etiquetas esenciales como <head>, <body>, y varias etiquetas semánticas, así como su uso en la creación de formularios y tablas. Además, se explican atributos importantes y la validación en HTML5.

Cargado por

marafergin
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 52

Video explicativo de este pdf: https://vimeo.

com/340390548
Contraseña: apirsh009
Historia
- HTML (HyperText Markup Language) nace de la mano de Tim
Berners-Lee en 1991.

- Estaba formado por 18 “tags” o etiquetas.

- La primera versión no fue considerada un estándar.

- Junto con Robert Cailliua crearon la World Wide Web


(protocolo HTTP, lenguaje HTML y primer navegador/editor).

- En 1994 Tim Berners-Lee funda la W3C (World Wide Web


Consortium).
- En 1995 aparece HTML 2, que fue el primer estándar.

- En 1997, se publica la versión HTML 3.2.

- Un año más tarde aparece HTML 4, la cual supuso un


gran salto (hojas de estilo, scripts).

- En 1999 se publica HTML 4.01.

- En 2008 sale a la luz la primera versión de HTML 5.

- En 2014 HTML 5 se convierte en estándar.


Estructura Principal
<html>, <head> y <body>
Estructura principal

<!DOCTYPE html>
<html> <!-- Raíz del documento HTML -->
<head> <!-- Contenedor de todos los elementos HEAD —>
</head>
<body> <!-- Contenedor principal de nuestro HTML -->
</body>
</html>

Todas son opcionales, pero se recomiendo no omitir <html> y <body>


<!DOCTYPE html>

- Debe ser la primera linea de un documento HTML.

- No es un “tag” de HTML, si no una introducción que dice


al navegador que versión de HTML estamos usando.

- Esta etiqueta hace referencia a la versión HTML 5


<head>

- Es un contenedor para los metadatos de nuestra web.

- El contenido de esta etiqueta no aparece en nuestra web.

- Algunas de las etiquetas más importantes son: <title>,


<style>, <link>, <meta>, <script> y <base>

- <title> es requerida en todos los documentos HTML.


De ne el título de la web y el que aparecerá en los
motores de búsqueda.
fi
<meta>

<meta charset=“UTF-8">
<!-- De ne la codi cación de caracteres —>

<meta name=“viewport”>
<!-- Comportamiento web en diferentes dispositivos -->

<meta name=“author” content=“Creador HTML”>


<!- - Autor de la página web - ->
fi
fi
Etiquetas
<div>

- Especi ca un bloque de contenido en un documento HTML.

- Nos permite agrupar contenido en diferentes contenedores


y así poder aplicar estilos sobre ellos.
fi
<span>

- Nos permite agrupar contenido “en linea”.

- Visualmente no tiene ningún cambio en la web.

- Nos sirve para poder aplicar estilos determinados a un texto


especí co.
fi
<p>

- Nos sirve para especi car un párrafo.

- El navegador aplica automáticamente ciertos márgenes


a los lados del texto.
fi
<h1> … <h6>

- Nos permite de nir texto de cabecera.

- Está ordenador por su prioridad, siendo h1 el más


importante y h6 el menos.

- También tiene importancia en SEO.


fi
<ul> y <ol>

- Etiquetas para crear listas.

- <ul> es una lista desordenada (Unordered List) y ol


representa una lista ordenada (Ordered List).

- Cada elemento de una lista se de ne mediante la


etiqueta <li>.
fi
<a>

- De ne un hipervínculo en una página web.

- Su atributo más importante es el “href”, que indica a


dónde nos llevara el link.
fi
<img>

- Nos va a permitir añadir una imagen a nuestra web.

- Tiene dos atributos importantes, “src” donde


pondremos la ruta a nuestra imagen, y “alt”, que es un
texto alternativo en el caso de que no se pueda cargar
la imagen.

- No tiene etiqueta de cierre.


Etiquetas semánticas
<nav>

<nav>
<ul>
<li><a href=“/”>Inicio</a></li>
<li><a href=“/about.html”>Sobre nosotros</a></li>
</ul>
</nav>
<section>
Sirve para agrupar contenido por temática dentro de un mismo
documento.

<section>
<!-- Quienes somos -->
</section>

<section>
<!-- Que hacemos -->
</section>
<article>
Detalla contenido independiente, que tiene sentido por sí solo.

<article>
<!-- Novedad 1 -->
</article>

<article>
<!-- Novedad 2 -->
</article>
<aside>
Muestra contenido relacionado con su entorno.

<aside>
<!-- Recomendaciones relacionadas con la Novedad 1 -->
</aside>
<header>
Especi ca un encabezado para la página, sección o artículo.

<section>
<header>
<h1>Novedades</h1>
</header>
<!-- Cuerpo de la sección -->
</section>
fi
<footer>
Especi ca un pie para la página, sección o artículo.

<section>
<!-- Cuerpo de la sección -->
<footer>
<small>Publicado hace 1 día</small>
</footer>

</section>
fi
<main>
De ne el contenido principal de un documento.
Sólo debe haber uno por página y no puede ser descendiente de
<article>, <aside>, <footer>, <header> o <nav>.

<main>
<h1>Web Browsers</h1>
<p>Lorem ipsum dolor sit amet.</p>
<article>
</article>
</main>
fi
< gure> y < gcaption>
De ne un contenido y su de nición textual (como un grá co,
fotografía, video, etc.).

< gure>
<img src=“logo.png” alt=“HTML5 Logo”>
< gcaption>Figura 1. Logotipo de HTML5 en 2014</ gcaption>
</ gure>
fi
fi
fi
fi
fi
fi
fi
fi
fi
Tablas

- Las tablas son una poderosa herramienta para mostrar


información estructurada.

- Las tablas se ordenan principalmente en celdas,


formadas por las y columnas.
fi
thead, tbody, tfoot

- thead: se usa para agrupar los elementos de cabecera

- tbody: agrupara el contenido de la tabla

- tfoot: agrupa contenido de pie de página de la tabla


Formularios
<form>

- Para crear un formulario utilizaremos la etiqueta:


<form action method name target enctype>

- Action: Especi camos la URL a la que se enviará el


formulario.

- Method: GET o POST.

- Name: Nombre del formulario.

- Target: Especi camos como mostrar la respuesta.

- Enctpye: Como se debe codi car los datos enviados.


fi
fi
fi
<input type=“text”>

De ne un input para introducir texto.

<input type=“text” name=“nombre”>


fi
<input type=“password”>

De ne un input para introducir una contraseña y que permanezca oculta.

<input type=“password” name=“password”>


fi
<input type=“submit”>

De ne un input el cual nos va a permitir enviar un formulario.

<input type=“submit” value=“Enviar”>


fi
<input type=“radio”>

Nos permite elegir una opción de un conjunto de opciones.

<input type=“radio” name=“gender” value=“Masculino” checked>


<input type=“radio” name=“gender” value=“Femenino”>
<input type=“checkbox”>

Nos permite elegir ninguna o más opciones de un conjunto de


opciones.

<input type=“checkbox” value=“Bici”> Bici


<input type=“checkbox” value=“Coche”> Coche
<input type=“button”>

Input que nos permite crear un botón.

<input type=“button” value=“Haz click” onclick="alert('Hello


World!')">
<input type=“number”>

Este input solo nos permite introducir valores numéricos.

<input type=“number” name=“cantidad” min=“0” max=“100”>


<input type=“email”>

Este input solo nos permite introducir una email válido.

<input type=“email” name=“email”>


<input type=“date”>

Este input solo nos permite introducir una fecha a través


de un calendario.

<input type=“date” name=“fecha”>


<input type=“datetime-local”>

Este input solo nos permite introducir una fecha y una hora
(SIN zona horaria) a través de un calendario.

<input type=“datetime-local” name=“fecha”>


<input type=“color”>

Este input solo nos permite elegir un color con un color picker.

<input type=“color” name=“color”>


<input type=“range”>

Este input solo nos permite un número entre un rango con un slider.

<input type=“range” name=“rango” min=“10” max=“50” step=”5”>


<input type=“url”>

Este input solo nos permite URLs válidas.

<input type=“url” name=“web”>


<input type=“search”>

Este input solo nos permite introducir un campo de búsqueda.


Se comporta como un tipo “text”.

<input type=“search” name=“query”>


Atributo pattern

Valida si el valor del input concuerda con el patrón introducido.

<input type=“text” pattern=“[A-Z]”>


Validación HTML 5

- Muchos de los atributos que hemos visto nos permite de nir


validaciones en el formulario (min, max, required, patter,..).

- Para deshabitar la validación de HTML 5 debemos añadir


“novalidate” a la etiqueta <form>

fi

También podría gustarte