Video explicativo de este pdf: [Link]
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=“/[Link]”>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=“[Link]” 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