![Page 1: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/1.jpg)
Resumen del Módulo
• Creación de una página en HTML5 • Estilizado de una página en HTML5
![Page 2: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/2.jpg)
Parte 1: Creación de una pagina en HTML5
• Que hay de nuevo en HTML5? • Estructura de un documento en HTML5 • Texto e imágenes en HTML5 • Demostración: Usuando funcionalidades de HTML5 en una simple forma de contacto
![Page 3: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/3.jpg)
Qué es HTML5?
![Page 4: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/4.jpg)
Qué es HTML5?
l Estándar abierto y accesible
l Elementos nuevos
l Web Semántica
l API’s de desarrollo
l Retrocompatible
l Nueva filosofía de trabajo
l Impulsado por los grandes y pequeños
![Page 5: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/5.jpg)
Que hay de nuevo en HTML5?
HTML5 proporciona muchas extensiones sobre versiones previas, incluyendo: • Reglas para marcar de navegadores • Nuevos elementos que reflejan diseño moderno de aplicaciones web
• Soporte para el API de JavaScript que soporta capacidades de escritorio y móviles
![Page 6: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/6.jpg)
Trabaja sobre…
l Firefox 3.5+
l Chrome 3.0+
l Safari 3.1+
l Opera 10.5+
l IE 9.0+ dicen…
l iPhone
l iPod Touch
l iPad
l Android OS
Pero siempre es importante hacer pruebas de validación
http://html5test.com/
![Page 7: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/7.jpg)
Tipo de Documento
l Tipo de Documento
<!DOCTYPE html>
l Lenguaje del Documento
<html lang="ES">
l Codificación del Documento
<meta charset="UTF-8">
l Enlaces a CSS, Favicon y RSS <link rel="stylesheet" href="estilos.css"> <script src=jquery.js></script>
![Page 8: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/8.jpg)
Estructura Mínima de un Documento
<!DOCTYPE html> <html lang="ES">
<head> <title>Este es un ejemplo de HTML5</title> <meta charset="UTF-8"> <link rel="stylesheet" href="estilo.css"> </head> <body> Este es el cuerpo de la página, donde irá todo
el contenido. </body>
</html>
![Page 9: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/9.jpg)
ESTRUCTURA SEMÁNTICA
![Page 10: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/10.jpg)
Antes
![Page 11: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/11.jpg)
Ahora
![Page 12: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/12.jpg)
Elementos Semánticos
<header> El elemento header debe utilizarse para marcar la cabecera de una página (contiene el logotipo del sitio, una imagen, un cuadro de búsqueda etc).
El elemento header puede estar anidado en otras secciones de la página (es decir que no solo se utiliza para la cabecera de la página).
<nav> El elemento nav representa una parte de una página que enlaza a otras páginas o partes dentro de la página. Es una sección con enlaces de navegación.
No todos los grupos de enlaces en una página deben ser agrupados en un elemento nav. únicamente las secciones que consisten en bloques de navegación más importantes son adecuados para el elemento de navegación.
![Page 13: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/13.jpg)
Elementos Semánticos
<section> El elemento section representa un documento genérico o de la sección de aplicación. Una sección, en este contexto, es una agrupación temática de los contenidos. Puede ser un capítulo, una sección de un capítulo o básicamente cualquier cosa que incluya su propio encabezado.
Una página de inicio de un sitio Web puede ser dividida en secciones para una introducción, noticias, información de contacto etc.
<footer> El elemento footer se utiliza para indicar el pié de la página o de una sección. Un pie de página contiene información general acerca de su sección el autor, enlaces a documentos relacionados, datos de derechos de autor etc.
![Page 14: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/14.jpg)
Elementos Semánticos
<aside> El elemento aside representa una nota, un consejo, una explicación. Esta área son representados a menudo como barras laterales en la revistas impresa.
El elemento puede ser utilizado para efectos de atracción, como las comillas tipográficas o barras laterales, para la publicidad, por grupos de elementos de navegación, y por otro contenido que se considera por separado del contenido principal de la página.
<article> El elemento article representa una entrada independiente en un blog, revista, periódico etc.
Cuando se anidan los elementos article, los artículos internos están relacionados con el contenido del artículo exterior. Por ejemplo, una entrada de blog en un sitio que acepta comentarios, el elemento article principal agrupa el artículo propiamente dicho y otro bloque article anidado con los comentarios de los usuario.
![Page 15: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/15.jpg)
Distribución Semántica
HEADER
HEADER
NAV
NAV ARTICLE ARTICLE VIDEO
SECTION
SECTION ASIDE
FOOTER
FIGURE FIGURE
![Page 16: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/16.jpg)
Controles de Formularios
![Page 17: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/17.jpg)
Nuevos Controles de Formularios - Input
l Telephone
l Url
l Email
l Password
l Datetime
l Date
l Month
l Week
l Number
l Range
l Color
![Page 18: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/18.jpg)
Nuevos Controles de Formularios
Puedes ver una relación oficial del borrador del estándar en:
http://dev.w3.org/html5/spec/
www.whatwg.org/specs/web-apps/current-work/multipage/
![Page 19: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/19.jpg)
Estructura de un documento en HTML5
HTML5 proporciona nuevos elementos para definir la estructura de una página web: • <section> para dividir el
contenido principal • <header> y <footer>
para el encabezado y pie de la página
• <nav> para los enlaces de navegación
• <article> para el contenido • <aside> para anotaciones
y barras laterales
![Page 20: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/20.jpg)
Textos e imágenes en HTML5
HTML5 define nuevos textos e imágenes, incluyendo:
• <hgroup> • <time> • <mark>
• <small> • <figure> y <figcaption>
<time datetime="2012-08-08">hoy</time>
<p>Estes texto debe ser marcado <mark>como notable para el futuro</mark>.</p>
<p>Como tus frijoles por 5 minutos. <small>O hasta que estén calientes para ti .</small></p>
<figure> <img src=”platodefrijoles.jpg" alt=”un plato de frijoes" /> <figcaption>Un plato de frijoles en 5 minutos exactos</figcaption> </figure>
<hgroup> <h1>Mis Recetas</h1> <h2>Grandioso de comer, fácil de hacer</h2> </hgroup>
![Page 21: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/21.jpg)
Demostración: Usando Características de HTML5 en un Formulario Simple de HTML
En este demostración usted vera como: • Dividir el contenido para una página en artículos y secciones
• Agregar el encabezado y el pie a la página • Ver las estructura de la página • Ver cambios temporales usando las herramientas de desarrollo
![Page 22: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/22.jpg)
Lesson 2: Estilizando una Página HTML5
• Entendiendo estilos de texto en CSS • El modelo de caja de CSS • Estilizado de Fondos en CSS • Demostración: Agregando Estilos CSS a una página HTML
• Demostración: Creación y Estilizado CSS3 de paginas HTML5
![Page 23: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/23.jpg)
Unidades de medida
Relativas • em se refiere al tamaño de las mayúsculas (letra M) del tipo de letra aue se toma como referencia) • ex se refiere al tamaño de las minúsculas (letra x) del tipo de letra que se toma como referencia • px se refiere a los puntos de la pantalla (píxeles) con la resolución que está en activo • % se refiere al porcentaje del valor dependiente del contexto
NOTA { font-size:10; line-height:1.5em } TITULO { font-size:18; letter-spacing:1ex } SUBTITULO { font-size:14; word-spacing:200% } PARRAFO { font-size:12; margin-left:25px }
Absolutas: • in pulgadas. 1 pulgada=2,54 cm • cm centímetros • mm milímetros • pt puntos tipográficos. 1 pulgada=72pt. 1pt=1/72in • pc picas. 1pc=12pt
![Page 24: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/24.jpg)
Entendiendo Estilos de Texto CSS
• Suporte de Estilizado de Textos CSS:
• Fuentes
• Colores
• Typography
font-family : Arial, Candara, Verdana, sans-serif; font-size : 16px; font-style : italic; font-weight : bold;
color : rgb(128, 128, 0); opacity: 0.6;
letter-spacing : 2em; line-height : 16px; text-align : left; text-decoration : underline; text-transform : lowercase;
http://librosweb.es/css/capitulo_6.html
![Page 25: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/25.jpg)
Contenido
Padding (Relleno)
Border (Borde)
Margin (Margen)
Modelo de la Caja
![Page 26: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/26.jpg)
Relleno - Padding
Contenido
Borde
Margen Margen
![Page 27: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/27.jpg)
Todos los elementos en su página generan cajas invisibles. Usted debe decidir como encajan todas estas cajas. Es como un rompezabezas.
Imagen con enlace Imagen
Texto Regular
Pequeno texto con viñetas
Conjunto de lnks (Menu)
Las Cajas son automáticas
![Page 28: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/28.jpg)
Las Cajas son automáticas
![Page 29: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/29.jpg)
![Page 30: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/30.jpg)
Jerarquía del modelo de la caja
![Page 31: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/31.jpg)
#lateral { width: 200px; } <div id="lateral"> ... </div>
![Page 32: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/32.jpg)
#cabecera { height: 60px; } <div id="cabecera"> ... </div>
![Page 33: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/33.jpg)
![Page 34: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/34.jpg)
![Page 35: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/35.jpg)
![Page 36: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/36.jpg)
Código CSS original: div img { margin-top: .5em; margin-bottom: .5em; margin-left: 1em; margin-right: .5em; } Alternativa directa: div img { margin: .5em .5em .5em 1em; } Otra alternativa: div img { margin: .5em; margin-left: 1em; }
![Page 37: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/37.jpg)
![Page 38: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/38.jpg)
![Page 39: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/39.jpg)
![Page 40: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/40.jpg)
body {padding: 2em} /* Todos los rellenos valen 2em */ body {padding: 1em 2em} /* Superior e inferior = 1em, Izquierdo y derecho = 2em */ body {padding: 1em 2em 3em} /* Superior = 1em, derecho = 2em, inferior = 3em, izquierdo = 2em */ body {padding: 1em 2em 3em 4em} /* Superior = 1em, derecho = 2em, inferior = 3em, izquierdo = 4em */
![Page 41: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/41.jpg)
![Page 42: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/42.jpg)
div { border-top-width: 10px; border-right-width: 1em; border-bottom-width: thick; border-left-width: thin; }
![Page 43: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/43.jpg)
![Page 44: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/44.jpg)
![Page 45: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/45.jpg)
div { border-top-color: #CC0000; border-right-color: blue; border-bottom-color: #00FF00; border-left-color: #CCC; }
![Page 46: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/46.jpg)
![Page 47: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/47.jpg)
![Page 48: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/48.jpg)
div { border-top-style: dashed; border-right-style: double; border-bottom-style: dotted; border-left-style: solid; }
![Page 49: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/49.jpg)
![Page 50: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/50.jpg)
![Page 51: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/51.jpg)
![Page 52: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/52.jpg)
div { width: 300px; padding-left: 50px; padding-right: 50px; margin-left: 30px; margin-right: 30px; border: 10px solid black; }
30px + 10px + 50px + 300px + 50px + 10px + 30px = 480 píxel
![Page 53: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/53.jpg)
Tipos de elementos
http://librosweb.es/css/capitulo_5/tipos_de_elementos.html
![Page 54: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/54.jpg)
Posicionamiento
• Normal • Relativo • Absoluto • Fijo • Flotante
![Page 55: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/55.jpg)
Posicionamiento normal
![Page 56: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/56.jpg)
Posicionamiento relativo
![Page 57: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/57.jpg)
![Page 58: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/58.jpg)
img.desplazada { position: relative; top: 8em; } <img class="desplazada" src="imagenes/imagen.png" alt="Imagen genérica" /> <img src="imagenes/imagen.png" alt="Imagen genérica" /> <img src="imagenes/imagen.png" alt="Imagen genérica" />
![Page 59: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/59.jpg)
Posicionamiento Absoluto
![Page 60: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/60.jpg)
![Page 61: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/61.jpg)
div { border: 2px solid #CCC; padding: 1em; margin: 1em 0 1em 4em; width: 300px; } <div> <img src="imagenes/imagen.png" alt="Imagen genérica" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus ullamcorper velit eu ipsum. Ut pellentesque, est in volutpat cursus, risus mi viverra augue, at pulvinar turpis leo sed orci. Donec ipsum. Curabitur felis dui, ultrices ut, sollicitudin vel, rutrum at, tellus.</p> </div>
![Page 62: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/62.jpg)
div img { position: absolute; top: 50px; left: 50px; }
![Page 63: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/63.jpg)
![Page 64: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/64.jpg)
Posicionamiento fijo
El estándar CSS considera que el posicionamiento fijo es un caso particular del posicionamiento absoluto, ya que sólo se diferencian en el comportamiento de las cajas posicionadas. Cuando una caja se posiciona de forma fija, la forma de obtener el origen de coordenadas para interpretar su desplazamiento es idéntica al posicionamiento absoluto. De hecho, si el usuario no mueve la página HTML en la ventana del navegador, no existe ninguna diferencia entre estos dos modelos de posicionamiento.
![Page 65: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/65.jpg)
Posicionamiento Flotante
![Page 66: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/66.jpg)
![Page 67: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/67.jpg)
![Page 68: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/68.jpg)
![Page 69: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/69.jpg)
![Page 70: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/70.jpg)
![Page 71: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/71.jpg)
![Page 72: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/72.jpg)
<div>DIV normal</div> <div style="display:inline">DIV con display:inline</div> <a href="#">Enlace normal</a> <a href="#" style="display:block">Enlace con display:block</a>
![Page 73: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/73.jpg)
![Page 74: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/74.jpg)
![Page 75: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/75.jpg)
div { position: absolute; } #caja1 { z-index: 5; top: 1em; left: 8em;} #caja2 { z-index: 15; top: 5em; left: 5em;} #caja3 { z-index: 25; top: 2em; left: 2em;} <div id="caja1">Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1</div> <div id="caja2">Caja 2 - Caja 2 - Caja 2 - Caja 2 - Caja 2 - Caja 2 - Caja 2 - Caja 2 - Caja 2 - Caja 2 - Caja 2 - Caja 2 - Caja 2 - Caja 2 - Caja 2 - Caja 2 - Caja 2 - Caja 2</div> <div id="caja3">Caja 3 - Caja 3 - Caja 3 - Caja 3 - Caja 3 - Caja 3 - Caja 3 - Caja 3 - Caja 3 - Caja 3 - Caja 3 - Caja 3 - Caja 3 - Caja 3 - Caja 3 - Caja 3 - Caja 3 - Caja 3</div>
![Page 76: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/76.jpg)
![Page 77: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/77.jpg)
![Page 78: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/78.jpg)
![Page 79: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/79.jpg)
![Page 80: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/80.jpg)
![Page 81: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/81.jpg)
![Page 82: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/82.jpg)
![Page 83: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/83.jpg)
![Page 84: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/84.jpg)
![Page 85: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/85.jpg)
![Page 86: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/86.jpg)
![Page 87: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/87.jpg)
![Page 88: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/88.jpg)
![Page 89: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/89.jpg)
![Page 90: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/90.jpg)
![Page 91: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/91.jpg)
![Page 92: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/92.jpg)
![Page 93: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/93.jpg)
Regla CSS body { background-image:url(imagenes/fondo.gif); }
![Page 94: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/94.jpg)
![Page 95: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/95.jpg)
#hdr { background: url("/images/ds.gif") repeat-x; width: 100%; text-align: center; }
![Page 96: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/96.jpg)
![Page 97: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/97.jpg)
![Page 98: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/98.jpg)
#caja1 { background-image: url("images/help.png"); background-repeat: no-repeat; background-position: bottom left; } #caja2 { background-image: url("images/help.png"); background-repeat: no-repeat; background-position: right top; } #caja3 { background-image: url("images/help.png"); background-repeat: no-repeat; background-position: 50% 50%; } <div id="caja1"><h1>bottom left</h1></div> <div id="caja2"><h1>right top</h1></div> <div id="caja3"><h1>50% 50%</h1></div>
![Page 99: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/99.jpg)
![Page 100: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/100.jpg)
![Page 101: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/101.jpg)
/* Color e imagen de fondo de la página mediante una propiedad shorthand */ body { background: #222d2d url(./graphics/colorstrip.gif) repeat-x 0 0; } /* La propiedad shorthand anterior es equivalente a las siguientes propiedades */ body { background-color: #222d2d; background-image: url("./graphics/colorstrip.gif"); background-repeat: repeat-x; background-position: 0 0; }
![Page 102: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/102.jpg)
![Page 103: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/103.jpg)
Ejercicio
• http://librosweb.es/css/capitulo_15/ejercicio_3.html
![Page 104: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/104.jpg)
Estilizado de Fondos en CSS
Establece el fondo de un elemento usando la propiedad CSS: • background-image • background-size • background-color • background-position • background-origin • background-repeat • background-attachment
article { background-color : transparent; background-repeat: repeat-x; background-image : url('fluffycat.jpg'); }
http://librosweb.es/css/capitulo_4/fondos.html
![Page 105: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/105.jpg)
Demostración: Adding CSS Styles to an HTML Page
In this demonstration, you will see how to: • Create New Styles by Using Visual Studio • Use the F12 Developer Tools to Inspect Styles
![Page 106: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/106.jpg)
Demonstration: Creating and Styling an HTML5 Page
In this demonstration, you will learn about the tasks that you will perform in the lab for this module.
![Page 107: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/107.jpg)
/* Modificar */ body{font-family: "Segoe UI", Helvetica, Arial, sans-serif; } Remover h1 { font-family: 'Copperplate Gothic'; color: red; } Agregar header { padding-bottom: 10px; border-bottom: 2px dotted blue; margin-bottom: 10px; } header h1 { margin-left: 20px; display: inline-block; } Agregar section { padding-bottom: 5px; border-bottom-style: dotted; border-bottom-width: 1px; border-bottom-color: grey; } fieldset {background-color: pink; margin-bottom: 10px; } legend { font-size: 1.2em; font-style: italic; } fieldset li { list-style: none; margin-bottom: 10px; } input[type="submit"] { background-color: pink; opacity: 0.6; width: 200px; }
![Page 108: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/108.jpg)
Lab: Creating and Styling HTML5 Pages
• Exercise 1: Creating HTML5 Pages • Exercise 2: Styling HTML pages
Logon Information • Virtual Machines: 20480B-SEA-DEV11, MSL-TMG1 • User Name: Student • Password: Pa$$w0rd
Estimated Time: 45 minutes
![Page 109: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/109.jpg)
Lab Scenario
• You are a web developer working for an organization that builds websites to support conferences. You have been asked to create a website for ContosoConf, a conference that showcases the latest tools and techniques for building HTML5 web applications.
• You decide to start by building a prototype website consisting of a Home page that acts as a landing page for conference attendees, and an About page that describes the purpose of the conference. In later labs you will enhance these pages and add further pages that enable attendees to register for the conference, and that provide information about the sessions scheduled to run as part of the conference.
![Page 110: Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft](https://reader033.vdocumento.com/reader033/viewer/2022052411/557acb32d8b42a0b188b4a63/html5/thumbnails/110.jpg)
Module Review and Takeaways
• Review Question(s)