HTMLyCSS Sebastian Rubio Final

HTML y CSS
Nombre: Sebastin Rubio Gonzlez
Monet
Lotos
Contenido
1
Introduccin a HTML________________________________________________3
HTML Etiquetas de contenido______________________________________5
HTML Formularios.___________________________________________________8
HTML Etiquetas avanzadas________________________________________10
HTML Quiz___________________________________________________________12
Introduccin a CSS_________________________________________________13
CSS Estilos avanzados_____________________________________________18
CSS layout **________________________________________________________20
CSS Ejercicios_______________________________________________________21
10
CSS Quiz____________________________________________________________31
1 Introduccin a HTML
Qu es HTML? Para qu sirve?.
HTML, siglas de HyperText Markup Language, hace referencia al lenguaje de marcado para la
elaboracin de pginas web. Es decir HTML es el lenguaje con el que se definen las pginas web.
Bsicamente se trata de un conjunto de etiquetas que sirven para definir el texto y otros
elementos que compondrn una pgina Web.
Qu organismos definen los estndares de HTML? Quin ha descrito HTML5?.
El lenguaje HTML es un estndar reconocido en todo el mundo y cuyas normas define un organismo
sin nimo de lucro llamado World Wide Web Consortium, ms conocido como W3C. Como se trata
de un estndar reconocido por todas las empresas relacionadas con el mundo de Internet, una
misma pgina HTML se visualiza de forma muy similar en cualquier navegador de cualquier sistema
operativo.
HTML5 (HyperText Markup Language, versin 5) es la quinta revisin importante del
lenguaje bsico de la World Wide Web, HTML. El desarrollo de este lenguaje de
marcado es regulado por el Consorcio W3C.
Opera fue quien propuso este estndar originalmente, y es uno de los principales
promotores de esta tecnologa, junto con Mozilla Foundation, estos ltimos siendo los
creadores del navegador Firefox .
Qu hace un navegador cuando recibe un archivo HTML?.
El lenguaje HTML basa su filosofa de desarrollo en la referenciacin. Para aadir un elemento
externo a la pgina (imagen, vdeo, script, etc.), este no se incrusta directamente en el cdigo de
la pgina, sino que se hace una referencia a la ubicacin de dicho elemento mediante texto. De
este modo, la pgina Web contiene slo texto mientras que recae en el navegador Web
(interpretador del cdigo) la tarea de unir todos los elementos y visualizar la pgina final .
Cul es la estructura bsica de un archivo HTML?.
Todos los documentos HTML tienen la estructura que se muestra a continuacin, aunque la
etiqueta <body> puede ser sustituida por <frameset> para un tipo de pginas que dividen la ventana
del navegador en varios cuadros (frames).
Qu significa la etiqueta <!DOCTYPE HTML>?.

DOCTYPE es una declaracin del estndar usado al construir un documento HTML. Para los
navegadores es importante conocer el doctype de la pgina web, porque de ese modo pueden
mostrar la pgina web con la versin exacta del lenguaje HTML o XHTML con la que fue
construida.
As pues, dependiendo de nuestra pgina y el cdigo que utilicemos, tendremos que declarar
uno u otro DOCTYPE. Existen diversos DOCTYPE que abarcan una gran gama de posibilidades,
configurando distintas versiones de HTML.
El DOCTYPE debe incluirse en la primera lnea del cdigo HTML de la pgina.
Qu son los atributos? Para qu sirven?.
Las etiquetas sirven para estructurar el contenido de todo el documento HTML e indican al
navegador cmo debera presentarse el sitio Web (por ejemplo, <br> informa al navegador para que
introduzca un salto de lnea). En algunas etiquetas se puede aadir ms informacin. Esa
informacin extra se denomina atributo.
Los atributos se incluyen siempre dentro de la etiqueta de inicio y llevan inmediatamente detrs el
signo de igual ("=") con los valores de dichos atributos entre comillas (""). El punto y coma que
sigue al atributo se usa para separar los diferentes comandos de estilo.
Ejemplo:
Qu etiqueta sirve para poner un ttulo a la pgina HTML?. En qu seccin se encuentra esa
etiqueta?
La presencia de este elemento en la seccin de encabezado del documento (ira dentro del
elemento HTML head) y dicha etiqueta es obligatoria. Toda pgina debe tener un ttulo que
describa correctamente el contenido del documento en unas pocas palabras.
Y como resultado nos dara la siguiente imagen
Los atributos que puede llevar consigo esta etiqueta <title> son solamente 2 que son:
Lang: Especifica el lenguaje del contenido contenido dentro del ttulo. No es obligatorio ponerlo.
Dir: Este atributo indica la direccin en que el texto del elemento debe ser ledo. Esto incluye al
contenido, los valores de los atributos y las tablas.
2 HTML Etiquetas de contenido

Escribe una pgina HTML que contenga un prrafo de texto usando la etiqueta correcta
Para escribir un prrafo usaremos la etiqueta <p> escribiremos el prrafo que queremos poner y a
continuacin cerraremos dicha etiqueta </p>. Los prrafos son elementos a nivel de bloque que
constituyen una estructura bsica de un documento y son usualmente mostrados por los
navegadores con mrgenes superior e inferior. Los prrafos no pueden contener elementos a nivel
de bloque, incluyendo otros prrafos. A continuacin veremos un ejemplo de como poner un
prrafo.
Los atributos que se usan con esta etiqueta son los siguientes:
ALIGN: este atributo define la alineacin horizontal de su contenido. Los posibles valores que
tiene este atributo son: left, right, center, justify.
left: el texto del prrafo es alineado a la margen izquierda.
right: el texto del prrafo es alineado a la margen derecha.
center: el texto del prrafo es centrado.
justify: el texto del prrafo es alineado a ambos mrgenes.
CLASS: El atributo "class" asigna un nombre de clase (o una lista de nombres de clases separadas
por espacios) al elemento contenedor. Es usado junto con hojas de estilos y le dice al navegador la
clase (o clases) a las que el elemento est asociado.
5
STYLE: Este atributo es utilizado para definir atributos presentacionales para el elemento
contenedor, y su valor debera estar compuesto por propiedades de hojas de estilo. Aunque en
algunos casos es particularmente til, es una mejor prctica poner los atributos presentacionales
en archivos externos, relacionndolos a los elementos a travs del atributo "class".
ID: El atributo "id" asigna un identificador al elemento asociado. Este identificador debe ser
nico en todo el documento y puede ser usado para referirse a este elemento en otras instancias.
Y el resultado de los posibles ejemplos de prrafos es el siguiente
Aade ahora una cabecera principal al documento. Adems aade dos cabeceras de
segundo nivel con un prrafo asociado a cada una.
El resultado del cdigo anteriormente escrito seria el siguiente y como vemos en cada cabecera
tanto en la Cabecera Principal y las cabeceras de nivel 2 tienen asociadas un prrafo.
Aade dos listas, una a cada subcabecera. Una de las listas ser ordenada y otra no ordenada.
Y el resultado del cdigo HTML anteriormente escrito ser el siguiente
Para qu sirve una etiqueta anchor <a>?. Escribe 3 ejemplos de usos de dicha etiqueta.
La etiqueta <a> define un hipervnculo, el cual se utiliza para vincular de una pgina a otra.
Los atributos que pueden acompaar a esta etiqueta son:
Href: Especifica la direccin URL de la pgina.
Hreflang: Especifica el idioma de una pgina web o de un medio a que se les hace
referencia mediante el atributo href. El valor del atributo hreflang es un cdigo de
idioma representados por dos letras normalizadas por el estandar "ISO 639", que
identifica un lenguaje natural. El atributo hreflang se debe de utilizar junto con el
atributo href.
Media: Especifica un medio alternativo de una pgina web, es decir, el mismo

contenido pero en formato vdeo, audio, PDF o una versin para imprimir. El valor por
defecto del atributo media es " all " , que significa que la pgina web es apropiada para
todos los dispositivos. En el interior de la directiva <a> el atributo Media trabaja con el
atributo rel que tiene que tener el valor " alternate " (alternativa).
Rel: Especifica la relacin entre el documento actual y el destino del vnculo.
Target: Indica donde abrir el URL.
Una vez pinchamos en el enlace que pone Google vemos que nos lleva a la siguiente pgina.
Type: Especifica el tipo de contenido a conectar.
La gran diferencia que hay entre el html4.01 y HTML5 es que hay ciertos atributos de la
etiqueta <a> que han dejado de ser compatibles en HTML5 y estos atributos son charset,
coords, name, rev, shape y se han introducido dos nuevos atributos en el standart de
HTML5 como son los atributos media y type.
Completa tu documento aadiendo un enlace a una pgina web externa y otro enlace a la
segunda cabecera de tu documento.
El resultado de nuestro cdigo HTML ser el siguiente
Cuando pinchamos en la direccin de nuestro aulavirtual podremos ver el contenido que se

encuentra dentro de la direccin www.aulavirtual3.educa.madrid.org/ies.lapaz.alcobendas/
que es la direccin que le pusimos dentro de la etiqueta <a href>. En el cdigo HTML podemos
10
ver que tenemos marcado de color rojo el enlace a nuestra aula virtual del Mdulo de IAW.
Para poder realizar la comprobacin del enlace a una cabecera concreta he tenido que poner varios
prrafos auxiliares para rellenar espacio. En el cdigo HTML podremos ver que dichos prrafos
auxiliares estn marcados en verde.
Cuando hacemos clic en el enlace llamado ir a cabecera podemos ver que automticamente
nos lleva directamente a la cabecera que hayamos puesto su nombre en el href deberemos de
poner lo siguiente <a href=#nombre de la cabecera y a continuacin el texto que mostraremos en
el enlace.
Por ultimo para ver que dicho enlace funciona correctamente deberemos pinchar sobre el enlace y
veremos que tenemos como resultado como nos llev a la cabecera que habamos solicitado en el
href.
En la siguiente imagen vemos como nos muestra la pgina desde la cabecera seleccionada.
Y el resultado ser el siguiente
11
Aade una imagen a tu pgina HTML.

Para aadir una imagen deberemos tener la imagen seleccionada dentro de la carpeta imgenes, y
una vez la queremos insertar en nuestro HTML5 deberemos usar la etiqueta <img> y dicha etiqueta
no tiene etiqueta de cierre. Los atributos que acompaan a esta etiqueta son los siguientes:
SRC: este atributo contiene la ruta donde se encuentra nuestra imagen. Es un atributo muy
importante y siempre es obligatorio debido a que sin l no podramos mostrar la imagen.
ALT: el valor de este atributo provee una alternativa textual para el contenido o propsito de la
imagen, y por tanto, debe describir lo que la imagen quiere mostrar.
WIDTH: Especifica el ancho de la imagen. Este valor puede ser diferente al ancho real de la
imagen, y los navegadores deberan redimensionar la misma como sea necesario. Sin embargo,
especificar un ancho diferente, puede causar imgenes pixeladas (cuando es mayor) o mayores
tiempos de carga de la pgina (cuando es menor).
12
Y el resultado sera el siguiente
HEIGHT: Especifica la altura de la imagen. Este valor puede ser diferente a la altura real de la
imagen, y los navegadores deberan redimensionar la misma como sea necesario. Sin embargo,
especificar una altura diferente, puede causar imgenes pixeladas (cuando es mayor) o mayores
tiempos de carga de la pgina (cuando es menor).
ALIGN: Especifica la posicin de la imagen respecto del contenido a su alrededor. Puede

combinarse con otros atributos de la etiqueta <img>. En la siguiente imagen muestro una
combinacin de 3 atributos de la etiqueta img.
13
Los valores que puede usar el atributo align son:
14
top: el lado superior de la imagen es alineado verticalmente con la lnea base.
middle: la imagen es centrada verticalmente respecto de la lnea base.
bottom: el lado inferior de la imagen es alineado verticalmente con la lnea base.
left: la imagen flota a la margen izquierda.
right: la imagen flota a la margen derecha.
Aade una tabla a tu pgina HTML.
Y el resultado de la tabla aadida ser el siguiente
15
3 HTML Formularios.
Para qu sirven los atributos method y action de una etiqueta <form>
El elemento HTML <form> inserta un formulario en un documento.
Method: El atributo "method" establece cmo ser enviada la informacin del formulario al servidor.
Existen dos valores posibles para este atributo:

get: la informacin del formulario es agregada a la URL definida en el atributo "action".
post: la informacin del formulario es agregada al cuerpo del mismo.
Action: El atributo "action" apunta a un archivo que acta de agente procesador para la informacin enviada
por el formulario. Este archivo que actua como agente procesar la informacin del formulario como sea
necesario (enviando un e-mail, guardando la informacin en una base de datos, etc.). Si este atributo no est
presente, el formulario no se enviar.
Enumera los valores que puede adoptar el atributo type de la etiqueta <input>. Escribe un
ejemplo de cada caso.
El elemento HTML input inserta uno de muchos tipos de controles en un formulario, usualmente
destinado a recolectar informacin provista por el usuario. Una vez llenado, el contenido de estos
controles puede ser enviado por el usuario y recibido por un agente procesador que manejar la
informacin recolectada.
El tipo de control mostrado depende del atributo "type" que puede tomar uno de los diez valores
siguientes:
Text
Cuando este valor es establecido, un control de entrada de texto es mostrado. Este tipo de
control puede recibir informacin textual.
Password
Este control trabaja de manera exacta a los controles de tipo "text", con la excepcin de que
oculta visualmente los caracteres ingresados reemplazndolos por puntos o asteriscos. Esto es til
para proveer cierto nivel de proteccin de informacin/contraseas.
Checkbox
Una casilla de verificacin es un control que permite a los usuarios cambiarlo entre dos valores:
marcado y no marcado. Este tipo de control puede resultar til para hacer simples preguntas "s
no" a los visitantes de la pgina. Un buen ejemplo de su uso puede ser un formulario donde el
usuario debe seleccionar hobbies o intereses (pelculas, radio, compras, etc.).
Muchas casillas de verificacin pueden compartir un mismo nombre de control, permitiendo a los
autores ms de un valor para una sola propiedad.
Radio
Los botones radio trabajan de forma muy similar a las casillas de verificacin, permitiendo a los
usuarios elegir entre dos valores posibles: marcado y no marcado. La diferencia radica en la
exclusividad: cuando muchos botones radio comparten un mismo valor en el atributo "name", slo
uno de ellos puede ser marcado, y cuando ocurre, todos los dems son automticamente
desmarcados.
16
Submit
Al definirse con este tipo, el elemento HTML input inserta un botn de envo. Este botn enva
automticamente la informacin recolectada al agente procesador cuando es presionado.
Reset
Cuando es presionado, un botn reset lleva la informacin en todos los controles del formulario a sus valores
iniciales.
Button
Este tipo de control crea un botn regular (que luce igual a los botones submit y reset) que, a diferencia de
los anteriores, no tiene ninguna accin asociada predeterminada. Si no se le asigna una accin manualmente,
nada suceder cuando sea presionado. Este botn es mayormente utilizado para ejecutar funciones del lado
cliente al ser presionado.
Image
Este tipo de control consiste en una imagen, apuntada en el atributo "src", que se comporta casi
exactamente como el botn submit. La diferencia con el mismo radica en que, al ser presionado, adems de
enviar el formulario, el control de tipo "image" tambin enva las coordenadas (desde la esquina superior
izquierda de la imagen) donde ha ocurrido el click. Los nombres de las coordenadas se construyen utilizando
el valor del atributo "name" del elemento, en la forma: nombreelemento.x and nombreelemento.y.
File
Un control de archivo permite la entrada y subida de archivos al servidor. Los usuarios deben especificar la
ruta local del archivo como contenido del control. Para ayudar con esto, los navegadores usualmente agregan
un botn que, cuando es presionado, abre un navegador de archivos que permite a los usuarios elegir el
archivo visual y fcilmente.
Nota: para que la subida de archivos sea satisfactoria, el atributo "enctype" del formulario debe tomar el
valor "multipart/form-data".
Hidden
Los controles ocultos permiten a los autores insertar valores en un formulario que no sern
mostrados al usuario pero si se enviarn con el mismo.
Un buen ejemplo de su uso son aquellos formularios complejos que consisten de dos o ms etapas
(como las encuestas), donde la transicin de una etapa a la siguiente es lograda a travs del
envo de un formulario. Entonces, los valores de las etapas anteriores son "guardadas" en
controles ocultos.
El cdigo HTML de los ejemplos del atributo type de la etiqueta <form> son los siguientes:
17
El resultado de los ejemplos solicitados con el atributo type de la etiqueta <form>
Cmo se puede insertar un rea de texto en un formulario?.

Las reas de texto permiten a los usuarios insertar varias lneas de texto. Por ello, suelen
utilizarse para que incluyan comentarios.
Para insertar un rea de texto es necesario incluir las etiquetas: <textarea> y </textarea> que
estarn ubicadas entre las etiquetas <form> y </form> del formulario.
Para que el rea de texto tenga algn valor inicial , habr que insertarlo entre las etiquetas
<textarea> y </textarea>.
18
Cmo se etiqueta el botn de envo de un formulario?. Qu ocurre cuando el usuario lo

selecciona?
Para enviar la informacin, el formulario necesita de un botn que le indique que el formulario ha
concluido y que pueden enviar la informacin.
Los botones de envo se crean con la etiqueta input de tipo submit. Adems, hay que definir el
texto que queremos que est escrito en el botn. Esto lo conseguimos con el atributo value. As,
el cdigo de un botn sencillo de formulario sera el siguiente:
<input type="submit" value="Enviar">
Al enviar el formulario se crear un mensaje con tu programa de correo, que se debe enviar con
ese propio programa de correo, para que llegue al destinatario.
Para qu sirve la etiqueta <label>.
La etiqueta <label> nos permite asignar un texto a un campo de texto o para adjuntar informacin
a los controles.
Si utilizamos la etiqueta label, y la asignamos a el campo que la acompaa, hacer click en el texto
Nombre es equivalente a hacer click en el campo de texto.
19
Y el resultado ser
20
Disea un formulario HTML con todos los elementos distintos que puedas.
En el formulario diseado a continuacin he puesto los siguientes elementos:
1.
Empezamos con elementos de la etiqueta <input> con su atributo text para poner las
siguientes partes de nuestro formulario como son: Nombre, Apellido 1, Apellido 2, Email
y la Ciudad.
2. A continuacin he creado una tabla donde van contenidos elementos con la etiqueta
<input> con su atributo radio y el atributo checkbox, donde en el formulario queremos
saber ciertas partes que podran ser parte de una encuesta como puede ser saber en que
tramo de edad pueda tener un usuario o como nos conoci nuestra Web.
3. A continuacin he creado dos elementos con textarea donde nuestros clientes podrn
poner sus opiniones o sugerencias dentro de nuestro formulario.
4. A continuacin he creado un elemento select donde dejaremos una serie de opciones
para que nuestros clientes al usar dicho formulario puedan seleccionar dentro de las
opciones configuradas la que sea ms relevante acerca de la respuesta de cada cliente.
5. A continuacin por ultimo he creado una tabla donde he creado un elemento submit el
cual har que nuestros clientes podrn validar el formulario correcto y este a su vez nos
llegara por email ya que en la etiqueta form hemos puesto lo siguiente:
<form action="mailto:ejemplo@email.com" method="post enctype="text/plain">
6. Tambin en dicha tabla he puesto un elemento reset el cual borrara los datos que
nuestros clientes hayan colocado previamente dentro de nuestro formulario.
Y el resultado de nuestro formulario seria el siguiente

21
4 HTML Etiquetas avanzadas

Qu diferencia hay entre la etiqueta <div> y la etiqueta <span>?.
Los elementos <span> y <div> se usan para agrupar y estructurar un documento, y se usarn, a
menudo, junto con los atributos class e id.
<Span>
El elemento <span> es lo que se podra denominar un elemento neutro que no aade nada al
documento en s. Pero con CSS <span> se puede usar para aadir caractersticas visuales
distintivas a partes especficas de texto en los documentos.
<Div>
Mientras que <span> se usa dentro de un elemento a nivel de bloque, <div> se usa para agrupar
uno o ms elementos a nivel de bloque.
Investiga y describe los tipos de metatags que existen. Da un ejemplo de cada una.
Las Metatags son etiquetas de HTML que funcionan como identificadores ocultos de nuestras
pginas Web. Las Metatags no se muestran directamente en el navegador al usuario que visita una
pgina Web (excepto la metatags title) sino que es informacin de nuestras pginas Web para los
buscadores como Google. Estas etiquetas HTML, bien editadas, pueden mejorar nuestro
posicionamiento en buscadores y lo que es ms importante, ofrecer una referencia de nuestras
pginas Web a los usuarios de los buscadores.
Existen 2 tipos de MetaTags:
META NAMES: Informan a los buscadores del contenido de la pgina Web. Son utilizadas
para la optimizacin para buscadores.
HTTP-EQUIV: Controlan actividades de los exploradores y detallan la informacin de la

pgina Web.
22
META NAMES :
Meta TITLE
Indica el ttulo de nuestra pgina web:
<meta name="title" content="Artculo Meta Tags">
Meta DESCRIPTION
Esta Metatag facilita la descripcin del contenido de nuestra pgina web:

<meta name="description" content="Principales Meta tags de html, para que puedas crear tu
pgina web para que Google y otros buscadores la reconozcan" />
Meta KEYWORDS
Esta metatag indica a los buscadores las palabras por las que deseamos aparecer en sus
bsquedas.
<meta name="keywords" content="meta tags, metatags, crear meta tags, buscadores, google" />
Meta DC LANGUAGE
Esta metatag indica el idioma de nuestras pginas web.
<meta name="DC.Language" scheme="RFC1766" content="Spanish" />
Meta REVISIT
Esta metatag indica la configuracin de la cach del explorador, permitiendo la actualizacin de

la pgina web durante el periodo de tiempo especificado en la metatag.
<meta name="revisit" content="7 days" />
Meta AUTHOR
Esta metatag indica el autor de la pgina web.

<meta name="author" content="<a href=http://www.suspirit.com > www.suspitir.com</a> - <a
href="mailto:sebastian@suspirit.com"> sebastian@suspirit.com</a>" />
Meta ROBOTS
Esta meta tag indica a los robots de los buscadores, como indexar nuestra pgina web.
<meta name="robots" content="all / index / follow" />
23
META HTTP-EQUIV:
Meta PRAGMA o Cache-Control
Esta metatag nos permite controlar la cach del explorador
<meta http-equiv="Cache-Control" content="no-cache">
Meta EXPIRES
Indicamos al explorador cuando acaba la vida de una pgina web
<meta http-equiv="expires" content="01 Feb 2012 00:00:01 GMT">
Meta REFRESH
Esta metatag, marca el tiempo en segundos al explorador para redireccionar a una segunda URL,
una vez que se haya cargado la pgina web que contiene a la meta tag.
<meta http-equiv="refresh" content="10;URL=<a href="http://www.sebas.es">
Meta SET-COOKIE
Es una de las formas de crear una cookie en el explorador del usuario que visita nuestra pgina
web.
<meta http-equiv="set-cookie" content="cookievalue=xxx ;expires=Friday, 01-Ene-11 00:00:01
GMT; path=/"/>
Meta WINDOW-TARGET
Esta metatag especifica el nombre de la ventana en la cual se debe visualizar la pgina web.
<meta http-equiv="window-target" content="_top" />
Para qu sirven las etiquetas <article> y <section>. Da un ejemplo de uso.
La etiqueta <section> tiene por objeto identificar las secciones principales significativas del
contenido de la pgina web. Esta etiqueta se usa de igual manera que se quisiramos dividir un
libro en distintos captulos.
Los usos ms comunes que tiene esta etiqueta son las listas de artculos, la descripcin de una
lista de productos y las secciones de una pgina web. A continuacin muestro un ejemplo de cdigo
con la etiqueta <section>
24
La etiqueta <article> identifica las secciones principales del contenido dentro de la pgina Web, y
lo ms corriente es que vaya dentro de las etiquetas <section> en un documento HTML5. Tambin
puede haber varias etiquetas <article> dentro de una misma etiqueta <section>
Los usos ms comunes que se le pueden dar a una etiqueta <article> son mensajes de foros,
artculos de una pgina web, entradas de blogs, comentarios de usuarios. A continuacin muestro
un ejemplo de cdigo con 2 etiquetas <article> dentro de una seccin principal.
Escribe una pgina web que contenga un video embebido en ella

Los tipos de formatos de video que estn admitidos por HTML5 son: WebM, Ogg y MP4.
La etiqueta <video> tambin tiene un peso muy fuerte en HTML5 por que viene a facilitar la
necesidad de agregar contenido audio visual en nuestra pgina Web.
Los atributos que puede tener la etiqueta <video> pueden ser:
SRC: Podemos enlazar el archivo de video que queremos reproducir.
<video src="sebas.mp4></video>
POSTER: Permite usar una imagen como poster inicial del vdeo.
<video src="sebas.mp4" poster="sebas.jpg"></video>
CONTROLS: Nos permite implementar los controles del reproductor por defecto del navegador
como, botn play-pause, timeline, seek y volumen.
<video src="sebas.mp4" poster="sebas.jpg" controls></video>
WIDTH: Podemos definir el ancho del video en pixeles.

HEIGHT: Podemos definir la altura del video en pixeles.
<video src="sebas.mp4" poster="sebas.jpg" width="400" height="400" controls></video>

LOOP: Reproduce el vdeo una y otra vez (en un bucle infinito).
<video src="sebas.mp4" poster="sebas.jpg" width="500" loop controls></video>

AUTOPLAY: Nos permite reproducir el archivo de video desde que se carga la pgina.
25
<video src="sebas.mp4" poster="sebas.jpg" width="500" autoplay loop controls></video>

PRELOAD: Nos carga un poco el archivo de video antes de iniciar la reproduccin en el buffer para
que no se trabe por reproducir ms de lo que carga.
<video src="sebas.mp4" poster="sebas.jpg" width="500" preload loop controls></video>
Qu son los comentarios condicionales?. Escribe un ejemplo

Los comentarios condicionales consisten en una sintaxis especfica aplicable al lenguaje
informtico HTML que permite especificar que partes se seleccionan y que partes se obvian en un
contexto referido a fragmentos de markup HTML , siendo posible de este modo diferenciar entre
diferentes versiones de navegadores que markup es filtrado y representado por cada versin
especfica de un determinado navegador.
La sintaxis de los comentarios condicionales se basa en la de los comentarios normales de
HTML:


5 HTML Quiz
Realiza el Quiz HTML del siguiente enlace y pega un pantallazo con tu puntuacin.
26
Introduccin a CSS
Qu es CSS?. Para qu sirve?.
Las hojas de estilo en cascada o (Cascading Style Sheets, o sus siglas CSS) hacen referencia a
un lenguaje de hojas de estilos usado para describir la presentacin semntica (el aspecto y
formato) de un documento escrito en lenguaje de marcas. Su aplicacin ms comn es dar estilo a
pginas webs escritas en lenguaje HTML y XHTML, pero tambin puede ser aplicado a cualquier
tipo de documentos XML, incluyendo SVG y XUL.
CSS tiene una sintaxis muy sencilla, que usa unas cuantas palabras clave tomadas del ingls para
especificar los nombres de varias propiedades de estilo. Una hoja de estilo se compone de una
lista de reglas. Cada regla o conjunto de reglas consiste en uno o ms selectores y un bloque de
declaracin (o "bloque de estilo") con los estilos a aplicar para los elementos del documento que
cumplan con el selector que les precede. Cada bloque de estilos se define entre llaves, y est
formado por una o varias declaraciones de estilo con el formato propiedad: valor;.
Quin define el estndar CSS?. Cul su versin ms actual?
El W3C define las especificaciones del estndar CSS. Despus, los navegadores intentan
implementar esas especificaciones, para que las pginas Web se vean igual en todos ellos.
A partir del ao 2005 se comenz a definir la versin de CSS conocida como CSS3 o Cascading
Style Sheets Level 3. Esta versin nos ofrece una gran variedad de opciones muy importantes para
las necesidades del diseo Web actual. Desde opciones de sombreado y redondeado, hasta
funciones avanzadas de movimiento y transformacin.
Describe las distintas formas de aplicar estilos CSS a un archivo HTML: en lnea, interno y
externo.
27
Estilos en lnea: significa que dentro de nuestra misma etiqueta a traves de un atributo llamado
style vamos a aplicar los estilos a esa determinada etiqueta en especifico, suele ser una forma
simple, rudimentaria y poco practica, porque imaginemos que tenemos una pagina web con muchos
parrafos seria muy poco practico ir dandole a cada parrafo un estilo diferente. Un ejemplo de un
estilo en linea seria:
En cambio es bastante bueno en el caso de que queramos hacer una vista rapida de como quedaria
dicho parrafo en la pgina sin necesidad de ir a un archivo externo e implementar los estilos de
dicha pgina.
Estilos Internos o Embebidos: se trata de insertar los estilos en la cabecera del documento, es
decir, dentro de la etiqueta <head> la cual no es visible para el usuario ya que es la parte que usan
los motores de busquedas para recibir informacion del codigo HTML y luego usar referencias para
afectar a los elementos HTML correspondientes. A diferencia con el estilo en linea en los estilos
embebidos todos los prrafos de nuestro documento se veran afectados por este estilo.
A continuacion muestro un ejemplo de estilos embebidos en la cabecera.
Y el resultado seria
28
Estilos en archivos externos: el metodo que vamos a aplicar en la mayoria de casos por ser el ms
util, es el de los archivos externos ya que tiene mejores mejoras que los estilos embebidos y para
facilitar la actualizacion de los estilos el mas recomendable la utilizacion de los estilos en
archivos externos.
Para implementar los estilos en archivos externos lo haremos mediante la etiqueta <link>
Y el archivo externo llamado estilos.css es el siguiente
Y el resultado final una vez aplicado los estilos contenidos en el archivo externo es este
Qu diferencia existe entre el atributo class y el atributo id? Para qu sirven?

En el caso de que tengamos varios prrafos en el mismo documento HTML como vemos en el
siguiente ejemplo y queremos darle diferentes estilos a dichos prrafos lo podremos con un
atributo id que los diferenciara.
Pondremos un ejemplo en un codigo HTML como el que vemos con dos prrafos con distinto id
29
Y tenemos en un archivo externo llamado ejemplo_id.css
El resultado que tendremos de nuestros prrafos una vez aplicados nuestros estilos sern
En resumen El atributo id se usa de una manera ms especifica ya que no puede haber dos
elementos con el mismo id.
En cuanto al atributo class es un atributo ms flexible y puede ser asignado a cada elemento del
documento HTML siempre y cuando compartan un diseo similar. En cuanto a la sintaxis en el
documento HTML funciona igual que el atributo id pero solo que cambia el nombre y se pondr
class como atributo, mientras que en el documento CSS3 cuando queramos referenciar a este
atributo class pondremos un punto en vez de la # del caso del atributo id.
Ejemplo este es nuestro cdigo HTML con el atributo class
Estos sern los estilos que queremos dar a nuestros atributos class que estarn en el archivo
externo llamado ejemplo_class.css
30
Y el resultado final una vez aplicados nuestros estilos a nuestro atributo class ser
Con lo cual la diferencia entre estos dos atributos es que el atributo id es ms especfico y solo
puede haber un elemento en todo el documento HTML, mientras que el atributo class puede estar
contenido en varios elementos distintos dentro de nuestro documento HTML.
En cuanto al CSS3 la diferencia que existe entre ambos atributos es que el atributo id se coloca
una # mientras que en el atributo class se coloca un .. Esto es porque si nos encontramos un
elemento delante del punto solo afectara a dicho elemento y no al resto de elementos que tengan
dicha clase como nombre.
Qu son los selectores CSS? Cmo se construyen?
Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS. Hay diferentes tipos
de selectores.
El selector universal: este selector representa cada uno de los elementos en el cuerpo del documento y
es til cuando tenemos que establecer ciertas reglas bsicas. Por ejemplo en el caso siguiente:
*{ margin: 0; }
Al poner un asterisco nos evitamos de poner todas las etiquetas ya que este asterisco engloba a todos los
elementos estructurales de nuestro documento. En este caso ponemos asterisco, llave de entrada, la
propiedad del estilo y el valor que tendr dicha propiedad, y cuando hayamos terminado con dicha propiedad
para que el navegador sepa dnde termina dicha propiedad pondremos un ; y por ultimo una llave de salida.
Explica los siguientes selectores:
* {
margin: 0;
padding: 0;
#container {
width: 960px;
margin: auto;
}
31
Todos los elementos contenidos en el cdigo HTML tienen

un mrgenes a 0 y un contenido de relleno tambin a 0.
Todos los elementos que tengan como id container tiene como

tamao de ancho todo el contenido de 960 pixeles y un margin
automtico.
.error { color: red; }
a { color: red; }
li a { text-decoration: none;
a:link { color: red; }
a:visited { color: purple; }
ul + p { color: red; }
En la clase llamada error establece que el texto aparezca sea de

color rojo.
Todos los elementos cuya etiqueta sea <a> en el cdigo HTML sern
de color rojo.
En todas las listas que tengan la etiqueta <a> el texto

saldr sin tachaduras, sin subrayados, sin lneas arriba
o abajo del texto introducido en el cdigo HTML
En los links contenidos dentro del cdigo HTML sern de color

rojo cuando no se seleccionen, cuando no hayan sido visitados
anteriormente, ni cuando se pase el ratn por encima de dichos
links.
En los links contenidos dentro del cdigo HTML sern de color

purpura cuando hayan sido visitados.
Solo el primer prrafo despus de cada lista desordenada tendr

el color de texto rojo.
div#container > ul { border: 1px solid black; }
ul ~ p { color: red; }
a[title] { color: green; }
Solo afectar a las listas desordenadas

que sean hijos directos del div con id
llamado container y tendrn un borde de
1px de color negro.
Selecciona cualquier prrafo, siempre y cuando estn despus de

una lista desordenada.
Slo seleccionar las etiquetas <a> que tengan un atributo title.

Las etiquetas <a> que no lo tengan no ser aplicable este tipo de
estilos.
a[href="http://net.tutsplus.com"] { color: #1f6053; /* nettuts green */ }

El selector arriba dar estilo a todas las etiquetas <a> que enlacen a http://net.tutsplus.com ;
estas recibirn el color verde
. Las dems etiquetas <a> permanecern sin cambio.
32
a[href*="tuts"] { color: #1f6053; /* nettuts green */ }

Se aplica a los elementos <a> o hiperenlace en cuyo atributo href tenga un valor que contiene la cadena
tuts y estas recibirn el color verde
.
a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}
Se aplica a los elementos <a> o hiperenlace en cuyo atributo href tenga un valor que comience por http.
a[href$=".jpg"] { color: red; }

Se aplica a los todas las etiquetas <a> que enlacen a una imagen una url que termine con .jpg y
adems el color de fuente ser rojo.
Esto no funcionar para urls que termine con .gifs ni .pngs.
input[type=radio]:checked { border: 1px solid black; }
Se aplica a los elementos de tipo <input> cuyo atributo type sea radio y su estado sea checked, es
decir ha sido marcado tendr unos estilos con un borde 1px negro.
div:hover { background: #e3e3e3; }
div:not(#container) { color: blue; }
p::first-line {
font-weight: bold;
font-size: 1.2em;
}
li:nth-child(3) { color: red; }
ul > li:last-child { color: green; }
33
Se aplica a los elementos <div> cuando se pasa el ratn por

encima se les aplica el color
Se aplica a todos los elementos <div> en cuyo atributo id no

contenga el valor container con el cual el texto ser de
color azul.
Se aplica a la primera lnea de los prrafos o elementos <p>

en los cuales su texto ser en negrita y el tamao del texto
ser con una medida relativa 1.2em.
Se aplica a los terceros items o elementos <li> de las listas

de la pgina donde su texto ser de color rojo.
Se aplica a los ltimos tems hijos o elementos <li> que se

muestran en un lista no ordenada o elemento <ul> cuyo texto
ser de color verde.
Qu sintaxis se utiliza para definir un estilo CSS?

CSS define una serie de trminos que permiten describir cada una de las partes que componen los estilos
CSS. El siguiente esquema muestra las partes que forman un estilo CSS muy bsico:
Regla: cada uno de los estilos que componen una hoja de estilos CSS. Cada regla est compuesta
de una parte de Selector, un smbolo de llave de apertura {, otra parte denominada Declaracin y por
ltimo, un smbolo de llave de cierre }.
Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS. Hay diferentes tipos de
selectores.
Declaracin: especifica los estilos que se aplican a los elementos. Est compuesta por una o ms
propiedades CSS.
Propiedad y valor: La Propiedad permite modificar el aspecto de una caracterstica del elemento y el
Valor indica el nuevo valor de la caracterstica modificada en el elemento.
En resumen la declaracin indica "qu hay que hacer" y el selector indica "a qu elemento hay que
hacrselo".
Algunos estilos CSS se definen en base a unidades de medida. Qu significan las unidades de
medida px, em, pt y %?
Las medidas en CSS se emplean, entre otras, para definir la altura, anchura y mrgenes de los elementos y
para establecer el tamao de letra del texto. Todas las medidas se indican como un valor numrico entero o
decimal seguido de una unidad de medida (sin ningn espacio en blanco entre el nmero y la unidad de
medida).
CSS divide las unidades de medida en dos grupos: absolutas y relativas. Las medidas relativas definen su
valor en relacin con otra medida, por lo que para obtener su valor real, se debe realizar alguna operacin
con el valor indicado. Las unidades absolutas establecen de forma completa el valor de una medida, por lo
que su valor real es directamente el valor indicado.
Si el valor es 0, la unidad de medida es opcional. Si el valor es distinto a 0 y no se indica ninguna unidad, la
medida se ignora completamente, lo que suele ser una fuente habitual de errores para los diseadores que
34
empiezan con CSS. Algunas propiedades permiten indicar medidas negativas, aunque habitualmente sus
valores son positivos.
Las unidades relativas son ms flexibles que las unidades absolutas porque se adaptan ms fcilmente a los
diferentes medios. A continuacin se muestra la lista de unidades de medida relativas y la referencia que se
toma para determinar su valor real:
em, (no confundir con la etiqueta <em> de HTML) relativa respecto del tamao de letra empleado.
Aunque no es una definicin exacta, el valor de 1em se puede aproximar por la anchura de la
letra M ("eme mayscula") del tipo y tamao de letra que se est utilizando
ex, relativa respecto de la altura de la letra x ("equis minscula") del tipo y tamao de letra que se
est utilizando.
px, (pxel) relativa respecto de la resolucin de la pantalla del usuario.
Las unidades em y ex no han sido creadas por CSS, sino que llevan dcadas utilizndose en el campo de la
tipografa. La unidad em hace referencia al tamao en puntos de la letra que se est utilizando. Si se utiliza
una tipografa de 12 puntos, 1em equivale a 12 puntos. El valor de 1ex se puede aproximar por 0.5 em.
Las unidades absolutas definen las medidas de forma completa, ya que sus valores reales no se calculan a
partir de otro valor de referencia, sino que son directamente los valores indicados. A continuacin pongo una
lista completa de unidades absolutas definidas por CSS y su significado:
in, del ingls "inches", pulgadas (1 pulgada son 2.54 centmetros).
cm, centmetros.
mm, milmetros.
pt, puntos (1 punto equivale a 1 pulgada/72, es decir, unos 0.35 milmetros).
pc, picas (1 pica equivale a 12 puntos, es decir, unos 4.23 milmetros).
CSS define otra unidad de medida relativa basada en los porcentajes. Un porcentaje est formado
por un valor numrico seguido del smbolo % y siempre est referenciado a otra medida. Cada una
de las propiedades de CSS que permiten indicar como valor un porcentaje, define el valor al que
hace referencia ese porcentaje.
Escribe una hoja de estilos que defina un color de fondo para el cuerpo de la pgina HTML y un
color de letra para la cabecera principal de la pgina HTML.
body { background-color: green; }
h1 { color: blue; }
El cdigo HTML es
35
Y el resultado de nuestro cdigo HTML ser
Escribe una hoja de estilos que utilice los estilos de texto para dar formato al documento
HTML contruido en la seccin dedicada a HTML.
body { background-color: red; }
h1 { color: green; }
h2 { color: gray; }
36
a { background-color: blue; font-family: Verdana, Arial Black; }

img { border-top: 10px; border-right: 4px; }
Explica el modelo de caja (model box) que se sigue en los estilos CSS. Explica la siguiente
figura.
El modelo de caja es un standart que se adoptado para el diseo de pginas web, donde cada
elemento es tratado como una caja y dependiendo como sea posicionado cada caja sera como
posteriormente sera interpretado por el navegador, es decir, que el modelo de caja serian todas
las reglas que especifican la disposicion en la que sera organizada una pagina web.
Este modelo de caja consiste en mrgenes, bordes, relleno (padding) y el contenido real del elemento HTML.
El espacio de la caja lo constituyen los siguientes elementos:
Contenido: Espacio que ocupa el contenido que se muestra en la pantalla, normalmente el texto
asociado al elemento HTML.
Relleno: Ocupa un rea alrededor del contenido que llega hasta el borde.
Borde: Define un borde rectangular alrededor del relleno.
Margen: Ocupa un espacio alrededor del borde. No tiene color de fondo y es completamente
transparente.
Explica cada uno de los estilos que se utilizan en la hoja de estilos que aparece a
continuacin. Aplcala a un documento HTML y pega el resultado.
body {
font-family: arial, helvetica, sans-serif;
font-size: 14px;
color: black;
background-color: #ffc;
margin: 20px;
37
Estos estilos son aplicados a los elementos del cuerpo de la pgina web:
La familia de fuentes que se va a utilizar en el cuerpo del documento
pueden ser Arial, Helvetica o Sans-serif.
El tamao de fuente a utilizar en el cuerpo del documento ser de 14 px.
El color de la fuente del texto ser negra en el cuerpo del documento.
El color de fondo ser amarillo en el cuerpo del documento.
Se establece un margen de 20 px alrededor del cuerpo del documento.
Se elimina el relleno alrededor del cuerpo del documento.
padding: 0;
}
/* This is a comment, by the way */
---->
Separacin entre lneas de texto en los prrafos.
p { line-height: 21px; }
Estos estilos son aplicados a las cabeceras de primer nivel de la pgina web:
El color del texto es de color amarillo en la fuente de la cabecera de
nivel 1.
El color de fondo es granate para la cabecera de primer nivel.
El tamao de la fuente ser al doble del tamao regular.
El margen de 0 pxeles.
El margen inferior de 7 pxeles.
El relleno hasta el borde ser de 4 pxeles.
El texto estar en cursiva.
El texto alineado al centro.
La separacin entre las letras es de 0.5em.
Muestra la lnea del borde.
El ancho de la lnea del borde inferior ser de 0.5em.
La lnea del borde inferior ser de color rojo
h1 {
color: #ffc;
background-color: #900;
font-size: 2em;
margin: 0;
margin-bottom: 7px;
padding: 4px;
font-style: italic;
text-align: center;
letter-spacing: 0.5em;
border-bottom-style: solid;
border-bottom-width: 0.5em;
border-bottom-color: #c00;
}
h2 {
color: white;
background-color: #090;
font-size: 1.5em;
margin: 0;
padding: 2px;
padding-left: 14px;
}
h3 {
color: #999;
font-size: 1.25em;
}
Esto es un comentario.
Estos estilos son aplicados a las cabeceras de segundo nivel de la pgina web:
El color de texto es de color blanco en la fuente de la cabecera de nivel 2.
El color de fondo de verde para la cabecera.
El tamao de la fuente ser de 1.5em.
El margen de 0 pxeles.
El relleno hasta el borde ser de 2 pxeles.
El relleno a la izquierda ser de 14 pxeles.
Estos estilos son aplicados a las cabeceras de segundo nivel de la pgina web:
El color de texto es de color gris en la fuente de la cabecera de nivel 3.
El tamao de la fuente ser de 1.25em.
img {
Estos estilos son aplicados a las imgenes contenidas en la pgina web:

El estilo del borde ser un trazo discontinuo.
El ancho del borde de 2 pxeles.
El color del borde ser gris.
a { text-decoration: none; }
Este estilo ser aplicado a todas las etiquetas <a> del documento de la pgina web:
border-style: dashed;
border-width: 2px;
border-color: #ccc;
}
strong {
font-style: italic;
text-transform: uppercase;
}
li {
color: #900;
font-style: italic;
}
38
Se elimina el subrayado por defecto de los enlaces, tachado y lneas superiores e inferiores.
Estos estilos sern aplicados para resaltar el texto de la pgina web:

Esta propiedad pone el texto en cursiva.
Esta propiedad transforma que el texto sea puesto en maysculas.
Estos estilos se aplicaran en todos los elementos de la lista de nuestra pgina web:
Color del texto ser rojo en los elementos de la lista.
El tipo de tipografa que usaremos en los elementos de la lista sern en cursiva.
table { background-color: #ccc; }
Estos estilos se aplicaran en todos los elementos de la tabla de nuestra pgina web:
El color de fondo de las celdas de nuestra tabla sern de color gris.
6 CSS Estilos avanzados

Qu son las pseudoclases?. Explica las pseudoclases :active, :hover y :focus. Escribe una
pgina HTML simple y una hoja de estilos de ejemplo
CSS tambin permite aplicar diferentes estilos a un mismo enlace en funcin de su estado. De esta forma, es
posible cambiar el aspecto de un enlace cuando por ejemplo pasamos el ratn por encima o cuando pinchamos
sobre ese enlace.
Como con los atributos id o class no es posible aplicar diferentes estilos a un mismo elemento en funcin de
su estado, CSS introduce un nuevo concepto llamado pseudo-clases. En concreto, CSS define las siguientes
cuatro pseudo-clases:
a :link, aplica estilos a los enlaces que apuntan a pginas o recursos que an no han sido visitados por
el usuario.
a :visited, aplica estilos a los enlaces que apuntan a recursos que han sido visitados anteriormente
por el usuario. El historial de enlaces visitados se borra automticamente cada cierto tiempo y el
usuario tambin puede borrarlo manualmente.
a :hover, aplica estilos al enlace sobre el que el usuario ha posicionado el puntero del ratn.
39
a :active, aplica estilos al enlace que est pinchando el usuario. Los estilos slo se aplican desde que
el usuario pincha el botn del ratn hasta que lo suelta, por lo que suelen ser unas pocas dcimas de
segundo.
Lo que hacen estos estilos aplicados al codigo es que en el enlace creado aplicarle un color rojo
cuando no es visitado.
Una vez que hemos pulsado el enlace anteriormente vemos que cambia de color el enlace a color
verde.
Una vez que pasamos el cursor por encima de l cambia de color a magenta.
40
Una vez que seleccionamos el enlace cambia de color a azul.
Una de las mejoras ms tiles para los formularios HTML consiste en resaltar de alguna forma
especial el campo en el que introducimos datos. Para ello, CSS define la pseudo-clase :focus, que
permite aplicar estilos especiales al elemento que en ese momento tiene el foco o la atencin del
usuario. Normalmente se aplica a los elementos <input> de los formularios cuando estn activados y
por tanto, se puede escribir directamente en esos campos.
Y el resultado es el siguiente
Qu son los pseudoelementos?. Escribe una pgina HTML simple y una hoja de estilos de
ejemplo con pseudoelementos.
CSS define unos elementos especiales llamados "pseudo-elementos" que permiten aplicar estilos a
ciertas partes de un texto. En concreto, CSS permite definir estilos especiales a la primera frase
de un texto y a la primera letra de un texto.
El pseudo-elemento :first-line permite aplicar estilos a la primera lnea de un texto. Las palabras
que forman la primera lnea de un texto dependen del espacio reservado para mostrar el texto o
41
del tamao de la ventana del navegador, por lo que CSS calcula de forma automtica las palabras
que forman la primera lnea de texto en cada momento.
De la misma forma, CSS permite aplicar estilos a la primera letra del texto mediante el pseudoelemento :first-letter. El uso del pseudo-elemento :first-letter permite crear la primera letra
como letra capital, aporto un ejemplo del pseudo-elemento :first-letter.
Ejemplos cdigo HTML pseudo-elementos
Y el resultado es el siguiente
Escribe la forma abreviada del siguiente estilo CSS.
La forma abreviada de este estilo podriamos escribirla de la siguiente forma:

42
p { margin: 1px 5px 10px 20 px; }

El orden de aparicin de los valores es margin-top, margin-right, margin-bottom, margin-left.
Crea un estilo que defina una imagen de fondo. Utiliza el mximo de propiedades disponibles.
Las propiedades de estilo aplicables al fondo de un elemento son:
background-color, describe el color de primer plano de un elemento. Los parmetros que se podrn
usar sern el cdigo de color. Un ejemplo de la propiedad background-color es:
{ background-color: #333333; }
background-image, especifica la imagen de marcado de un elemento de bloque. Los parmetros que se
podrn usar son url () o bien none. Los ejemplos de la propiedad background-image son:
{ background-image: url (../images/sebas.jpg); }
{ background-image: none; }
background-repeat, indica si la imagen de fondo debe repetirse para llenar el rea de fondo.
o repeat, se produce el efecto mosaico en la imagen,
o repeat-y, la imagen se repite a lo largo del eje vertical,
o repeat-x, la imagen se repite a lo largo del eje horizonal
o no-repeat, solamente muestra la imagen una vez.
CLos tpicos ejemplos que podemos poner para la propiedad background-repeat pueden ser:
{ background-repeat: none; }
{ background-repeat: repeat-x; }
{ background-repeat: repeat-y; }
{ background-repeat: no-repeat; }
background-position, especfica la posicin de la imagen dentro del elemento de bloque puede ser
arriba, en el centro, abajo, izquierda, derecha.
{ background-position: top left; }
{ background-position: 50px 50px; }
{ background-position: 50% 50%; }
Sus valores posibles son por posicin, tambin su medida puede ser expresada en pixeles o bien
expresada en tanto %.
background-clip, determina si la imagen de fondo se extiende hasta el borde o no. Se combina con la
propiedad background-origin.
{ background-clip: border-box; }
{ background-clip: 10px 10px; }
{ background-clip: 20% 40%; }
Sus medidas pueden ser expresadas en cajas, en pixeles y en tanto %.
43
background-attachment, establece si la imagen de fondo de un elemento se mantiene fija o se mueve

con la pgina. Por defecto, se mueven con la pgina. Los ejemplos principales de esta propiedad son:
{ background-attachment: scroll; }
{ background-attachment: fixed; }
Sus valores posibles son los siguientes:
Scroll: indica que la imagen se desplaza con la pgina, es decir, que no est fija con la pgina.
Fixed: indica que la imagen est fija con la pgina.
background-origin, establece el punto de origen a partir del cual empieza a verse la imagen
de fondo. Est puede partir del borde del elemento si lo tuviera, del padding o del
contenido. Se combina con la propiedad background-clip. Sus ejemplos principales son:
{ background-origin: border-box; }
{ background-origin: padding-box; }
{ background-origin: content-box; }
background-size, establece el tamao de la imagen de fondo de un elemento de bloque. Sus
ejemplos principales son:
{ background-size: 200px 50px; }
{ background-size: 100% 50%; }
Sus medidas pueden ser expresadas en pixeles o bien por tanto %.
Cmo se calcula el valor de especificidad a la hora de saber que estilo debe ser aplicado a
ciertas etiquetas HTML?.
La especificidad se refiere al valor que toma cada uno de los elementos de una hoja de estilo, hay
selectores que tienen ms peso e importancia que otros, es decir ms especificidad.
Existe una forma sencilla de calcular la especificidad CSS, es mediante una frmula considerada incluso
como un clculo ya estandarizado. Consiste en sumar los puntos totales de una sentencia CSS en base a los
selectores o elementos de los que est compuesto.
Se le da un valor de 1 punto a un elemento simple como una etiqueta a, p o div, a un selector de clase se le da
el valor de 10 puntos y a un selector de id se le da un valor de 100 puntos, siendo nicamente superado por
los atributos de estilos a los que se les da un valor de 1000 puntos.
44
7 CSS layout **
Sigue el tutorial descrito en ese enlace . Adjunta todos los ficheros que hayas trabajado
durante el tutorial en un archivo comprimido adjuntado al cuaderno.
Se adjuntan los ficheros aportados en el tutorial junto con las imgenes solicitadas.
45
8 CSS Ejercicios
Ejercicio 8.1
Qu consiguen los estilos definidos en el siguiente cdigo?.
<!DOCTYPE html>
<html>
<head>
<style>
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
</style>
</head>
<body>
<h1>Cabecera1</h1>
<h2>Cabecera2</h2>
<p>Esto es un parrafo</p>
</body>
</html>
Cdigo HTML
Lo que conseguimos con los siguientes estilos sera lo siguiente:

En la parte del cdigo HTML que aparece abajo:
body se aplicar en el cuerpo del documento el tamao de la fuente ser al 100%.

h1 se aplicar a la cabecera de nivel 1, al tamao de la fuente con una medida relativa con un
tamao 2,5 mayor que lo establecido en el body.
46
h2 se aplicar a la cabecera de nivel 2, al tamao de la fuente con una medida relativa con un
tamao 1,875 mayor que lo establecido en el body.
p se aplicar al prrafo, al tamao de la fuente con una medida relativa con un tamao 0,875
mayor que lo establecido en el body.
Y el resultado ser
47
Ejercicio 8.2
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 { font:15px arial,sans-serif; }
p.ex2 { font:italic bold 12px/30px Georgia,serif; }
</style>
</head>
<body>
<p class="ex1"> Esto es un parrafo. Esto es un parrafo. Esto es un parrafo. Esto es un parrafo. Esto es un parrafo. Esto
es un parrafo. Esto es un parrafo. Esto es un parrafo.</p>
<p class="ex2"> Esto es un parrafo. Esto es un parrafo Esto es un parrafo. Esto es un parrafo Esto es un parrafo. Esto es
un parrafo Esto es un parrafo. Esto es un parrafo. </p>
</body>
</html>
Lo que conseguimos con los estilos aplicados dentro de este cdigo es lo siguiente:
1. En el prrafo 1 utilizando el selector de clase que lo identifica conseguimos que a todo el
elemento se aplique que sea escrito con una letra arial o sans-serif y con un tamao de 15 pixeles.
2. En el prrafo 2 utilizando el selector de clase que lo identifica conseguimos que a todo el
elemento se aplique que sea escrito en cursiva, negrita con una letra Georgia o Serif y con un
tamao de 12 pixeles y un interlineado de 30 pixeles.
Cdigo HTML
Y el resultado ser
48
Ejercicio 8.3
<!DOCTYPE html>
<html>
<head>
<style>
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">Esto es un enlace</a></b></p>
<p><b>Note:</b> a:hover debe aparecer despues de a:link y a:visited en la definicin de los estilos CSS
para que tenga efecto.</p>
<p><b>Note:</b> a:active debe ir despues de a:hover en la definicin de los estilos CSS
para que tenga efecto.</p>
</body>
</html>
Lo que hacen estos estilos aplicados al cdigo es que en el enlace creado aplicarle un color rojo
cuando no ha sido visitado anteriormente, ni se pasa el mouse por encima del enlace, ni ha sido
seleccionado, ni ha sido visitado .
Una vez que hemos visitado el enlace anteriormente vemos que cambia de color el enlace a color
verde.
49
Una vez que pasamos el cursor por encima de l cambia de color a magenta.
Una vez que seleccionamos el enlace cambia de color a azul.
Ejercicio 8.4
50
<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover, a:active { background-color:#7A991A; }
</style>
</head>
<body>
</body>
<a href="default.asp" target="_blank">This is a link</a>
</html>
Lo que conseguimos con los siguientes estilos ser lo siguiente:

1.-Hemos creado con el cdigo HTML un enlace con un texto This is a link.
2.-En la parte del cdigo que aparece abajo:
51
Los siguientes estilos que hemos aplicado hacen lo siguiente a nuestro enlace:
En los siguientes supuestos:
a. Cuando aparezca nuestro enlace creado sin pasar nuestro mouse por encima, ni sea
seleccionado, ni sea anteriormente visitado (a :link)
b. Cuando nuestro enlace creado haya sido visitado anteriormente (a :visited)
display:block Crea una estructura de bloque para nuestro enlace.
font-weight:bold Pondr el texto de nuestro enlace en negrita.
color:#FFFFFF La letra de nuestro enlace ser de color blanco.
background-color:#98bf21 El color de fondo de nuestro enlace ser el color con el cdigo de
color #98bf21;
.
width:120px El ancho que tendr nuestro enlace ser de 120 px.
text-align:center El texto de nuestro enlace estar alineado al centro.
padding:4px Establece que todas las zonas de relleno del elemento tendrn 4 px, es decir, top,
right, bottom, left.
text-decoration:none Estableceremos que el texto se vea claro sin ningn tipo de tachaduras,
ni subrayado, ni lneas por encima del texto de nuestro enlace.
3.- En la parte del cdigo que aparece abajo:
a. Cuando aparezca nuestro enlace creado se pase nuestro mouse por encima (a :hover)
b. Cuando nuestro enlace creado haya sido seleccionado (a :active)
background-color:#7A991A El color de fondo de nuestro enlace ser el color con el cdigo de
color #7A991A;
.
52
Ejercicio 8.5
<!DOCTYPE html>
<html>
<head>
<style>
#customers {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border-collapse: collapse;
}
Font-family: Trebuchet MS, Arial, Helvetica, sans-serif Esta propiedad permite que la
tipografa pueda ser Trebuchet, Arial, Helvetica o sans-serif.
width:100% Esta propiedad consigue que el ancho de la cabecera de la tabla con id customers coja el
100% de la pantalla.
border-collapse: collapse Esta propiedad lo que hace es que en la cabecera se fusione de forma
automtica los bordes de las celdas adyacentes.
#customers td, #customers th {

font-size:1em;
border:1px solid #98bf21;
padding:3px 7px 2px 7px;
}
font-size:1em El tamao del texto contenido en las celdas de la tabla con id customers tanto en el
elemento td o th de dicha tabla ser de tamao relativo 1em.
border:1px solid #98bf21 Tendr un borde de 1px que ser del tipo solid y de color
.
Padding:3px 7px 2px 7px Tendr un relleno superior de 3px, el relleno a ambos laterales de 7px y un
relleno inferior de 2px.
#customers th {
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
font-size:1.1em El tamao del texto contenido en las celdas de la tabla con id customers en el
elemento th de dicha tabla ser de tamao relativo 1.1em.
text-align:left El texto estar alineado a la izquierda.
padding-top:5px Tendr un relleno superior de 5 px.
padding-bottom:4px Tendr un relleno inferior de 4 px.
background-color:#A7C942 Tendra un color de fondo que ser de color
.
color:#ffffff El color de texto ser de color blanco.
#customers tr.alt td {
53
color:#000000;
background-color:#EAF2D3;
}
color:#000000 El color del texto del contenido de las celdas contenidas en la tabla tanto en
los elementos tr que tengan de clase alt sean filas td ser de color negro.
background-color: El color de fondo del contenido de las celdas contenidas en la tabla tanto en
los elementos tr que tengan de clase alt o sean filas td sern de color
.
</style>
</head>
<body>
<table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr class="alt">
<td>Berglunds snabbkp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr class="alt">
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr class="alt">
<td>Kniglich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr class="alt">
54
<td>Magazzini Alimentari Riuniti</td>

<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
<tr class="alt">
<td>Paris spcialits</td>
<td>Marie Bertrand</td>
<td>France</td>
</tr>
</table>
</body>
</html>
Y el resultado de dicho cdigo HTMLser
55
Ejercicio 8.6
<!DOCTYPE html>
<html>
<head>
<style>
p { background-color:yellow; }
p.margin {
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}
</style>
</head>
<body>
<p>Esto es un prrafo sin mrgenes.</p>
<p class="margin">Esto es un prrafo con mrgenes.</p>
</body>
</html>
En este ejercicio lo que conseguimos con los estilos definidos en este cdigo es que tenemos dos
prrafos en dicho cdigo y harn lo siguiente los estilos:
Prrafo 1: en el prrafo 1 ocupara la totalidad de la pantalla, es decir, no tendr margen

definido alguno y a continuacin dicho prrafo su fondo ser de color amarillo, es decir,
como si con un marcador resaltramos dicho prrafo.
Prrafo 2: en el prrafo 2 que ser el prrafo con clase tendr el margen superior e
inferior definido con un tamao de 100 pixeles y en sus mrgenes laterales izquierdo y
derecho estarn definidos con un tamao de 50 pixeles.
Solo se aplicara lo de los mrgenes definidos en el segundo prrafo ya que dicho prrafo es un
prrafo con clase, mientras que en el caso de que hubiese ms prrafos en el cdigo se aplicara
solo los estilos aplicados al prrafo 1.
Cdigo HTML
56
El resultado de los estilos aplicados al cdigo HTML es
57
Ejercicio 8.7
<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {visibility:hidden;}
</style>
</head>
<body>
<h1>This is a visible heading</h1>
<h1 class="hidden">Esta es una cabecera oculta</h1>
<p>Fjate que la cabecera oculta ocupa su espacio.</p>
</body>
</html>
Con el siguiente codigo HTML podemos ver que tenemos 2 cabeceras de primer nivel donde una de
ellas tiene definida una clase llamada hidden a la cual se le aplicaran los estilos definidos y como
usa la propiedad visibility con el valor hidden quedara dicha cabecera oculta pero respetando su
posicion.
Cdigo HTML
El resultado con propiedad visibility y valor hidden
58
Para comprobar que dicho sitio est siendo respetado si cambiamos el valor hidden por visible
podremos ver que dicha cabecera est ah.
El resultado con la propiedad visibility y con valor visible
59
Ejercicio 8.8
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link, a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover, a:active
{
background-color:#7A991A;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">Noticias</a></li>
<li><a href="#contact">Contacto</a></li>
<li><a href="#about">Sobre nosotros</a></li>
</ul>
</body>
</html>
60
Cdigo HTML
Lo que conseguimos con los siguientes estilos sera lo siguiente:

1.-Hemos creado con el cdigo HTML varios enlaces.
Estos estilos son aplicados a la lista desordenada de los enlaces creados en el cdigo HTML.
list-style-type:none Permite establecer el tipo de vieta mostrada para una lista que por
defecto ser un circulo al tener el valor none no tendr dicha vieta.
margin:0 Establece que los margenes tengan el valor 0.
padding:0 Establece que los rellenos de cada elemento tengan el valor 0.
overflow:hidden Con esta propiedad el contenido sobrante se oculta y slo se visualiza la parte
del contenido que cabe dentro de la zona reservada para el elemento.
61
El estilo "float" sirve para alinear un elemento, haciendo que el texto de alrededor del mismo se
agrupe entorno a dicho elemento. Sus posibles valores son "left", para alinear el elemento a la
izquierda y "right" para alinearlo a la derecha. Un elemento con float debe tener definida su
anchura.
4..-En la parte del cdigo que aparece abajo:
Los siguientes estilos que hemos aplicado hacen lo siguiente a nuestros enlaces:
c. Cuando aparezca nuestro enlace creado sin pasar nuestro mouse por encima, ni sea
seleccionado, ni sea anteriormente visitado (a :link)
d. Cuando nuestro enlace creado haya sido visitado anteriormente (a :visited)
display:block Crea una estructura de bloque para nuestro enlace.
font-weight:bold Pondr el texto de nuestro enlace en negrita.
color:#FFFFFF La letra de nuestro enlace ser de color blanco.
background-color:#98bf21 El color de fondo de nuestro enlace ser el color con el cdigo de
color #98bf21;
.
width:120px El ancho que tendr nuestro enlace ser de 120 px.
text-align:center El texto de nuestro enlace estar alineado al centro.
padding:4px Establece que todas las zonas de relleno del elemento tendrn 4 px, es decir, top,
right, bottom, left.
text-decoration:none Estableceremos que el texto se vea claro sin ningn tipo de tachaduras,
ni subrayado, ni lneas por encima del texto de nuestro enlace.
text-transform:uppercase Permite mostrar el texto original transformado en un texto
completamente en maysculas con el valor uppercase.
4.- En la parte del cdigo que aparece abajo:
c. Cuando aparezca nuestro enlace creado se pase nuestro mouse por encima (a :hover)
d. Cuando nuestro enlace creado haya sido seleccionado (a :active)
background-color:#7A991A El color de fondo de nuestro enlace ser el color con el cdigo de
color #7A991A;
.
62
Ejercicio 8.9
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin:0;
padding:0;
}
En el cuerpo del documento no habr mrgenes ni relleno ya que tenemos dos propiedades que
son :
margin:0 sin mrgenes en el cuerpo del documento.
padding:0 sin relleno en el cuerpo del documento.
.right {
float:right;
width:300px;
background-color:#b0e0e6;
}
Estos estilos son aplicables al div con nombre de clase right.
float:right que el elemento aparezca flotando a la derecha.
width:300px El ancho ser de 300px.
background-color:#b0e0e6 El color de fondo del recuadro ser de color
</style>
</head>
<body>
<div class="right">
<p><b>Note: </b>Cuando se use float para alinear, incluir siempre la declaracin !DOCTYPE para evitar
comportamientos extraos en IE8.</p>
</div>
</body>
</html>
63
9 CSS Quiz
Realiza el Quiz CSS del siguiente enlace pega un pantallazo con tu puntuacin final.
64

HTMLyCSS Sebastian Rubio Final

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTMLyCSS Sebastian Rubio Final

Uploaded by

Copyright:

Available Formats

HTML y CSS

Nombre: Sebastin Rubio Gonzlez

HTML Etiquetas de contenido______________________________________5

HTML Etiquetas avanzadas________________________________________10

CSS Estilos avanzados_____________________________________________18

CSS layout **________________________________________________________20

Qu significa la etiqueta <!DOCTYPE HTML>?.

Y como resultado nos dara la siguiente imagen

2 HTML Etiquetas de contenido

left: el texto del prrafo es alineado a la margen izquierda.

right: el texto del prrafo es alineado a la margen derecha.

center: el texto del prrafo es centrado.

justify: el texto del prrafo es alineado a ambos mrgenes.

Y el resultado de los posibles ejemplos de prrafos es el siguiente

Y el resultado del cdigo HTML anteriormente escrito ser el siguiente

Href: Especifica la direccin URL de la pgina.

Media: Especifica un medio alternativo de una pgina web, es decir, el mismo

Rel: Especifica la relacin entre el documento actual y el destino del vnculo.

Target: Indica donde abrir el URL.

Type: Especifica el tipo de contenido a conectar.

El resultado de nuestro cdigo HTML ser el siguiente

Cuando pinchamos en la direccin de nuestro aulavirtual podremos ver el contenido que se

Y el resultado ser el siguiente

Aade una imagen a tu pgina HTML.

Y el resultado sera el siguiente

ALIGN: Especifica la posicin de la imagen respecto del contenido a su alrededor. Puede

Los valores que puede usar el atributo align son:

top: el lado superior de la imagen es alineado verticalmente con la lnea base.

middle: la imagen es centrada verticalmente respecto de la lnea base.

bottom: el lado inferior de la imagen es alineado verticalmente con la lnea base.

left: la imagen flota a la margen izquierda.

right: la imagen flota a la margen derecha.

Aade una tabla a tu pgina HTML.

Y el resultado de la tabla aadida ser el siguiente

Existen dos valores posibles para este atributo:

El resultado de los ejemplos solicitados con el atributo type de la etiqueta <form>

Cmo se puede insertar un rea de texto en un formulario?.

Cmo se etiqueta el botn de envo de un formulario?. Qu ocurre cuando el usuario lo

Y el resultado de nuestro formulario seria el siguiente

4 HTML Etiquetas avanzadas

HTTP-EQUIV: Controlan actividades de los exploradores y detallan la informacin de la

Esta Metatag facilita la descripcin del contenido de nuestra pgina web:

Esta metatag indica la configuracin de la cach del explorador, permitiendo la actualizacin de

Esta metatag indica el autor de la pgina web.

Escribe una pgina web que contenga un video embebido en ella

SRC: Podemos enlazar el archivo de video que queremos reproducir.

<video src="sebas.mp4" poster="sebas.jpg"></video>

<video src="sebas.mp4" poster="sebas.jpg" controls></video>

WIDTH: Podemos definir el ancho del video en pixeles.

<video src="sebas.mp4" poster="sebas.jpg" width="400" height="400" controls></video>

<video src="sebas.mp4" poster="sebas.jpg" width="500" loop controls></video>

<video src="sebas.mp4" poster="sebas.jpg" width="500" autoplay loop controls></video>

Qu son los comentarios condicionales?. Escribe un ejemplo

Y el archivo externo llamado estilos.css es el siguiente

Qu diferencia existe entre el atributo class y el atributo id? Para qu sirven?

Y tenemos en un archivo externo llamado ejemplo_id.css

Todos los elementos contenidos en el cdigo HTML tienen

Todos los elementos que tengan como id container tiene como

.error { color: red; }

a:link { color: red; }

a:visited { color: purple; }

En la clase llamada error establece que el texto aparezca sea de

En todas las listas que tengan la etiqueta <a> el texto

En los links contenidos dentro del cdigo HTML sern de color

a[href="tuts"] { color: #1f6053; / nettuts green */ }