Índice Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
1. Documentos HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
1.1 Componentes básicos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
1.2 Una breve introducción a HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
1.2.1 Etiquetas y elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
1.2.2 Atributos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
1.2.3 Elementos anteriores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
1.3 Estructura global . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
1.3.1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
1.3.2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
1.3.3
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
1.3.4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
1.3.5
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
1.3.6
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 <BR>1.3.7 <link> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 <BR>1.4 La estructura del cuerpo del documento . . . . . . . . . . . . . . . . . . . . . 34 <BR>1.4.1 Organización . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 <BR>1.4.2 <header> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 <BR>1.4.3 <nav> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 <BR>1.4.4 <section> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 <BR>1.4.5 <aside> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 <BR>1.4.6 <footer> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 <BR>1.5 En el interior del cuerpo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 <BR>1.5.1 <article> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 <BR>1.5.2 <hgroup> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 <BR>1.5.3 <figure> y <figcaption> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 <BR>1.5.4 <details> y <summary> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 <BR>1.6 Elementos nuevos y elementos antiguos . . . . . . . . . . . . . . . . . . . . . 51 <BR>1.6.1 <mark> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 <BR>1.6.2 <small> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 <BR>1.6.3 <cite> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 <BR>1.6.4 <address> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 <BR>1.6.5 <wbr> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52<BR>1.6.6 <time> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 <BR>1.6.7 <data> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 <BR>1.7 Nuevos atributos y viejos atributos. . . . . . . . . . . . . . . . . . . . . . . . . 54 <BR>1.7.1 El atributo data-* 54 <BR>1.7.2 reversed 54 <BR>1.7.3 ping y download 54 <BR>1.7.4 translate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 <BR>1.7.5 contenteditable 56 <BR>1.7.6 spellcheck . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 <BR>2. Estilos CSS y modelos de caja . . . . . . . . . . . . . . . . . . . . . . . . 57 <BR>2.1 CSS y HTML 57 <BR>2.2 Breve introducción a CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57<BR> 2.2.1 Reglas CSS 58 <BR>2.2.2 Propiedades . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 2.2.3 Estilos en línea . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 <BR>2.2.4 Estilos incrustados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 <BR>2.2.5 Archivos externos 61 <BR>2.2.6 Referencias 62<BR> 2.2.7 Selectores nuevos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 <BR>2.3 Aplicar CSS a nuestro documento . . . . . . . . . . . . . . . . . . . . . . 69 <BR>2.3.1 Modelos de caja . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 <BR>2.4 Modelo de caja tradicional . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 <BR>2.4.1 Documento HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 <BR>2.4.2 Selector universal (*) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 <BR>2.4.3 Títulos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74 <BR>2.4.4 Declaración de nuevos elementos HTML5 . . . . . . . . . .. . . . . . . . . . . . 74 <BR>2.4.5 Centrar el cuerpo 75<BR> 2.4.6 Creación de la caja principal 75 <BR>2.4.7 La cabecera 76 <BR>2.4.8 Barra de navegación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 <BR>2.4.9 Área principal y Barra lateral 78 <BR>2.4.10 Pie de página . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 <BR>2.4.11 Toques finales 81 <BR>2.4.12 box-sizing 82 <BR>2.5 Modelo de caja flexible . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84 <BR>2.5.1 Contenedor flexible 84<BR>2.5.2 Documento HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84 <BR>2.5.3 Display 85 <BR>2.5.4 Ejes . . . . . . . . </p>
</div>
<div id="tabsinopsis" >
<p class="bodytext">Vivimos una revolución. Internet ha dejado de ser sólo un instrumento de comunicación para convertirse en parte de, prácticamente, todos los aspectos de la vida humana. En este contexto, el lenguaje HTML5 ha adquirido una importancia única. Las aplicaciones de Internet a las que accedemos ahora incontables veces en un día, ya sea desde un ordenador de mesa, un teléfono móvil, una PDA o cualquier otro dispositivo, son posibles gracias a HTML5. Con este manual aprenderá, a través de ejercicios prácticos soportados por sólidos conocimientos teóricos, a crear toda clase de sitios webs y aplicaciones estructuradas en HTML5, con estilos CS3 y programadas con las más importantes y recientes herramientas de Javascript. Estudiará desde los conceptos más básicos y tradicionales de cada uno de los lenguajes hasta los más utilizados por verdaderos profesionales de la programación. En cada capítulo irá desarrollando diversos códigos que irán ganando complejidad a medida que se avanza en la lección y harán mucho más accesibles los conceptos previamente estudiados. Mediante el uso de los componentes de los tres lenguajes, las nuevas API que ofrece Javascript y librerías externas, aprenderá a escribir sus propios códigos para crear, programar y optimizar formularios, personalizar la forma en la que se reproduce un archivo de vídeo o de audio, insertar una o más pistas de subtítulos en un vídeo, controlar la entrada y salida de cualquier elemento en el modo de pantalla completa, capturar vídeo en streamig, crear gráficos y animaciones de dos y tres dimensiones, programar un vídeo juego, controlar la apariencia y la forma en la que se comporta el ratón en determinadas circunstancias, utilizar la geolocalización, manipular la historia de navegación del usuario, optimizar el funcionamiento fuera de línea de su sitio, crear aplicaciones de mensajería digital y otras formas de comunicación bidireccional, entre muchos otros conocimientos. </p>
</div>
</div><!--detpestanias-->
<div class="otrosautor">
<h2 class="title">Otros libros del autor</h2>
<ul class="listado_libros books six-cols">
<li>
<div class="portada">
<a href="/libro/el-gran-libro-de-html5-css3-y-javascript-3-edicion_511194"><img class="foto" src="https://www.oletvm.com/imagenes/9788426/978842672463.JPG" width="100" title="EL GRAN LIBRO DE HTML5, CSS3 Y JAVASCRIPT. 3ª EDICIÓN" alt="EL GRAN LIBRO DE HTML5, CSS3 Y JAVASCRIPT. 3ª EDICIÓN" border="0"/>
</a>
</div>
<form>
<dl class="dublincore">
<dd class="title"><a href="/libro/el-gran-libro-de-html5-css3-y-javascript-3-edicion_511194">EL GRAN LIBRO DE HTML5, CSS3 Y JAVASCRIPT. 3ª EDICIÓN</a></dd>
<dd class="creator"> DIEGO GAUCHAT, JUAN
</dd>
<!--<dd class="publisher">MARCOMBO, S.A.</dd>
<dd></dd>-->
<dd class="mulsinop">El gran libro de HTML5, CSS3 y JavaScript guía al lector paso a paso en el desarrollo de sitios y aplicaciones web. Después de leer este libro sabrá cómo estructurar sus documentos con HTML, cómo otorgarles estilos con CSS y cómo trabajar con las más poderosas APIs de JavaScript. Este libro es un curso completo que le enseñará cómo construir sitios webs adaptables y aplicacio...</dd>
<dd class="disponibilidad orange" > No disponible Pregúntanos antes de pagar</dd>
</dl>
<div class="botones">
<p class="precio">
<strong>31,40 €</strong>
</p>
<div class="formulario">
<a id="href_dispo_511194" style="" rel="nofollow" href="/cesta/insCarrito.php?codArticulo=511194" onclick="insMiniCar('511194'); return false;" class="btntwo" title="Añadir a Mi Compra">Comprar</a>
</div>
</div>
</form>
</li>
<li>
<div class="portada">
<a href="/libro/el-gran-libro-de-html5-css3-y-javascript_393815"><img class="foto" src="https://www.oletvm.com/imagenes/9788426/978842671770.JPG" width="100" title="EL GRAN LIBRO DE HTML5, CSS3 Y JAVASCRIPT" alt="EL GRAN LIBRO DE HTML5, CSS3 Y JAVASCRIPT" border="0"/>
</a>
</div>
<form>
<dl class="dublincore">
<dd class="title"><a href="/libro/el-gran-libro-de-html5-css3-y-javascript_393815">EL GRAN LIBRO DE HTML5, CSS3 Y JAVASCRIPT</a></dd>
<dd class="creator"> DIEGO GAUCHAT, JUAN
</dd>
<!--<dd class="publisher">MARCOMBO, S.A.</dd>
<dd></dd>-->
<dd class="mulsinop">Nos encontramos al final de una revolución. La Web se está convirtiendo en la principal plataforma de desarrollo y en la fuente principal de información y recursos. En los últimos años los dispositivos móviles han convertido las aplicaciones de Internet en una necesidad. Día a día surgen nuevos y más sofisticados programas para la Web, reemplazando, de forma muy efectiva, a las...</dd>
<dd class="disponibilidad red" > Descatalogado</dd>
</dl>
<div class="botones">
<p class="precio">
<strong>28,50 €</strong>
</p>
</div>
</form>
</li>
</ul>
</div>
<!--
-->
</div>
</div>
<!-- Modal Enviar amigo -->
<div id="modal-send-friend" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form id="formEnviaAmigo" class="form-horizontal" method="post" data-toggle="validator" data-focus="false" role="form" novalidate="true">
<input type="hidden" name="codigo" value="432745" />
<input type="hidden" name="marcaTiempo" value="1714119192" />
<input type="hidden" name="campov" value="" />
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal"><i class="fa fa-times" aria-hidden="true"></i></button>
<h4 class="modal-title">Enviar a un amigo</h4>
</div>
<div class="modal-body">
<div id="send-to-friend-box">
<div class="form-group">
<label for="yourEmail" class="col-sm-2 control-label">Tu email</label>
<div class="col-sm-9">
<input id="yourEmail" type="email" name="email" placeholder="Tu email" class="form-control" data-error="Completa este campo" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label for="friendEmail" class="col-sm-2 control-label">Email del destinatario</label>
<div class="col-sm-9">
<input id="friendEmail" type="text" name="emailAmigo" placeholder="paco@ejemplo.com, lola@outlook.com, cris@yahoo.es" class="form-control" data-error="Completa este campo" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label for="subject" class="col-sm-2 control-label">Asunto</label>
<div class="col-sm-9">
<input id="subject" type="text" name="asunto" placeholder="Asunto" value="Librerías Oletvm: Un amigo te recomienda" class="form-control">
</div>
</div>
<div class="form-group">
<label for="comments" class="col-sm-2 control-label">Comentarios</label>
<div class="col-sm-9">
<textarea name="comentarios" id="comments" placeholder="Comentarios" class="form-control" data-error="Completa este campo" required></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-9">
<div id="Recaptcha1"></div>
</div>
</div>
</div>
<div id="msg-modal"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
<button type="submit" class="btn btn-primary">Enviar</button>
</div>
</form>
</div>
</div>
</div>
<!-- Modal Avisador de stock -->
<!-- Modal Reservar -->
<!-- Modal Comentar -->
</div><!--cierre primary -->
</div><!--cierre row -->
</div><!--cierre content -->
<footer id="footer">
<div class="footer-bottom container">
<div class="row">
<div class="col-md-3">
<img class="footer-logo" title="Ir a la página de inicio" alt="Librerías Oletvm" src="/images/logo-white.png"/>
<div class="contact-info hidden">
<div>Plaza del Salvador, s/n</div>
<span>47002</span>
<span>Valladolid</span>
<span>(España)</span>
</div>
<div class="social-networks">
<ul>
<li class="facebook">
<a title="FACEBOOK" target="_blank" href="https://es-es.facebook.com/Oletvm"><i class="fa fa-facebook"></i></a>
</li>
<li class="twitter">
<a title="TWITTER" target="_blank" href="https://twitter.com/Oletvm"><i class="fa fa-twitter"></i></a>
</li>
<li class="instagram">
<a title="INSTAGRAM" target="_blank" href="https://www.instagram.com/oletvm/?hl=es"><i class="fa fa-instagram"></i></a>
</li>
</ul>
</div>
<div class="footer-logos-sellos">
<a href="https://www.clubkirico.com/" target="_blank"><img src="/images/club-kirico.jpg" alt="Club Kirico"></a>
<a href="https://www.loslibrerosrecomiendan.com/" target="_blank"><img src="/images/libreros-recomiendan.jpg" alt="Los libreros recomiendan"></a>
</div>
</div>
<div class="footer-menu col-md-3 col-sm-4">
<h2>Contacto</h2>
<ul>
<li><i class="fa fa-phone" aria-hidden="true"></i><a href="tel:983 213 560">983 213 560 (Oletvm)</a></li>
<li><i class="fa fa-phone" aria-hidden="true"></i><a href="tel:983 213 560">983 217 771 (Oletvm junior) </a></li>
<li><a href="mailto:info@oletvm.com" target="_blank"><i class="fa fa-envelope" aria-hidden="true"></i>info@oletvm.com</a></li>
<li><a href="/contacto"><i class="fa fa-comment" aria-hidden="true"></i>Formulario de contacto</a></li>
</ul>
</div>
<div class="footer-menu col-md-3 col-sm-4">
<h2>Páginas legales</h2>
<ul>
<li><a href="/especial/aviso-legal">Aviso legal</a></li>
<li><a href="/proteccion-de-datos">Protección de datos</a></li>
<li><a href="/especial/politica-de-cookies">Política de Cookies</a></li>
<li><a href="/especial/condiciones-de-venta">Condiciones de venta</a></li>
</ul>
</div>
<div class="footer-menu col-md-3 col-sm-4">
<h2>Atención al cliente</h2>
<ul>
<li><a href="/especial/quienes-somos">Quiénes somos</a></li>
<li><a href="/pedidos-especiales/">Pedidos especiales</a></li>
</ul>
</div>
<div class="col-md-12 col-sm-12 logoSubvencion">
<div class="logosMinisterio">
<img src="/images/cyl.jpg" alt="Castilla y León">
<img src="/images/logo-ministerio.jpg" alt="Ministerio de Cultura">
</div>
<p>Este proyecto ha recibido una ayuda extraordinaria del Ministerio de Cultura y Deporte y de la Junta de Castilla y León</p>
</div>
</div>
<div class="footer-copyright">
<div class="row">
<div class="col-sm-12">
<p class="info-name">
2024 © <strong>Librerías Oletvm</strong>. Todos los Derechos Reservados |
<a href="https://editorial.trevenque.es/productos/weblib/" title="Desarrollado por Grupo Trevenque" target="_blank">Grupo Trevenque</a>
</p>
</div>
</div>
</div>
</div>
</footer>
<div id="dialogAlert" style="display:none"></div>
</div><!--cierre container -->
<a href="#" class="scrollToTop"><i class="fa fa-chevron-up" aria-hidden="true"></i></a>
<div id="cookie-compliant" style="display:none">
<div class="container">
<div class="col-md-9">
<p>Este sitio web utiliza cookies, tanto propias como de terceros, para mejorar su experiencia de navegación. Si continúa navegando, consideramos que acepta su uso. <a href="/politica-de-cookies" title="Más información">Más información</a></p>
</div>
<div class="col-md-3 buttons">
<button type="button" id="cookie-accept" class="btn btn-accept" aria-label="Close">Aceptar cookies</button>
<button type="button" id="cookie-refuse" class="btn btn-dismiss" aria-label="Close">Denegar</button>
</div>
</div>
</div>
<script type="text/javascript">
/** Variables configuración **/
var rutaHtml = "";
var rutaImg = "/images";
var paginaActual = "detalle.php";
var paramMoneda = "€|D|2|,|.";
var totalArticulosCesta = 0;
var slider = 0;
var autocomplete = 0;
var analytics = "UA-143462386-1";
var afiliado = "";
var stickyHeader = "1";
/** Variables texto **/
var aceptar = "Aceptar";
var verCesta = "Ver Mi Compra";
var artInsCestaOK = "Artículo añadido a mi cesta";
var verTodos = "Ver todos";
var introPalBusqueda = "Introduce las palabras de búsqueda";
var notifOK = "";
var notifERR = "";
var notifINFO = "";
var numArticulosCarritoCab = "";
var noArticulosCesta= "No hay artículos en la cesta";
</script>
<script type="text/javascript" src="/js/jquery.js" ></script>
<script type="text/javascript" src="/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/jquery.pnotify.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/validator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.5/js/bootstrap-dialog.min.js"></script>
<script type="text/javascript" src="/js/jquery-labelauty.js"></script>
<script type="text/javascript" src="/js/lightslider.js"></script>
<script type="text/javascript" src="/js/jquery.idTabs.min.js" ></script>
<script type="text/javascript" src="/lightbox/js/lightbox.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="/js/googlebooks.js"></script>
<script type="text/javascript" src="https://books.google.com/books?bibkeys=9788426719959&jscmd=viewapi&callback=ProcessGBSBookInfo"></script>
<script type="text/javascript" src="/js/check.js"></script>
<script type="text/javascript" src="/js/util.js"></script>
<script type="text/javascript" src="/js/general.js"></script>
<script type="text/javascript">
var CaptchaCallback = function() {
grecaptcha.render('Recaptcha1', {'sitekey' : '6Lc22KQUAAAAABoUuEGFlqGUWNtRGSXSQooquEKP'});
};
</script>
<script src='https://www.google.com/recaptcha/api.js?hl=es&onload=CaptchaCallback&render=explicit' async defer></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
</script>
<noscript class="cookie-block">
<script>
ga('create', 'UA-143462386-1', 'auto');
ga('require', 'displayfeatures');
ga('send', 'pageview');
</script>
</noscript>
<script type="text/javascript">
var rutaImg = "/images";
var VALORACIONES_LIBROS = false;
var EBOOKS = "L";
var logeado = false;
var rutaEbooks = "https://www.oletvm.com/unclick";
var disponibilidad_L = "N";
var ean = "9788426719959";
var emailNOK = "El e-mail no es correcto";
var emailAmigoNOK = "El e-mail de tu amigo no es correcto";
function comprarEbook (codigo, obj)
{
if(logeado){
obj.href = "#";
$(document).ready(function() {
$("#dialog").dialog({ modal: true });
$("#dialog").dialog({ draggable: false })
$("#dialog").dialog({ resizable: false });
$("#dialog").dialog({ width: 390 });
$("#dialog").dialog({ buttons: {
"Cancelar": function() { $(this).dialog("close"); },
"Revisar": function() { window.location = rutaEbooks+"/formPedido.php?fr_accion=comprar&codArticulo=" + codigo },
"No es necesario": function() { window.location = rutaEbooks+"/crearPedido.php?fr_accion=comprar&codArticulo=" + codigo }
}});
});
}
else
return false;
}
</script>
<!--
<script type="text/javascript" src="http://www.google.com/jsapi" charset="utf-8"></script>
-->
<script src="/js/detalleBase.js" type="text/javascript"></script>
<!--
<script src="http://books.google.com/books?bibkeys=9788426719959&jscmd=viewapi&callback=ProcessGBSBookInfo"></script>
-->
<script type="text/javascript" src="/js/cookieblock-1.0.0.js"></script>
<script>
var cb = new CookieBlock({
browsing: '1',
scrolling: '',
});
cb.setIgnore(['/politica-de-cookies']);
cb.setAnalytics('UA-143462386-1');
cb.setDebug(false);
cb.init();
</script>
</body>
</html> 
