manual de html5 + css3 · css3 es la tercera revisión de css. las siglas css significan cascading...

INFORMÁTICA 2º BACHILLERATO

MANUAL DE HTML5 + CSS3

1. Introducción

1.1. Definición de página WebUna página web es un fichero, escrito en un lenguaje de etiquetas llamado HTML5, quealmacena la información que el navegador interpreta y muestra por pantalla al usuario.Las páginas web, se almacenan en unos ordenadores conectados a internet llamadosservidores.

1.2. Definición de HTML5 y CSS3HTML5 es la quinta revisión de HMTL que fué el primer lenguaje que se definió para eldiseño web en 1990. El HTML5 al igual que sus versiones anteriores es un lenguajesemántico, es decir, un lenguaje en el que definimos lo que queremos ver en nuestrapágina web, como por ejemplo un título o una imagen, pero no decimos el aspecto quequeremos que tengan, estas decisiones ya están predefinidas en el navegador, es decir,establecidas por defecto.

CSS3 es la tercera revisión de CSS. Las siglas CSS significan Cascading Style Sheet(Hoja de Estilos en Cascada) y nos permite indicar como queremos que se vean loselementos de nuestra página web, es decir, nos permite modificar los valores que unelemento de nuestra página web tiene establecidos por defecto para el navegador.

Como podemos ver el HTML5 nos permite definir "QUE" queremos ver en nuestra weby el CSS3 nos permite definir "COMO" queremos verlo. HTML5 y CSS3 se definen porseparado y en difentes posiciones dentro de un fichero web, esto nos permite tenerseparado el contenido, del estilo y modificar uno sin tener que modificar nada del otro.

1.3. ¿Qué necesito para comenzar?Si queremos diseñar páginas web existen editores visuales llamados WYSIWYG (WhatYou See Is What You Get, lo que ves es lo que obtienes), que nos permiten ir añadiendolos elementos que forman nuestra página web sin añadir ni una sola línea de código. Unejemplo de estos editores es el que se utiliza para el de diseño de blogs con Blogger ,pero con estos editores estamos limitados a las opciones que tiene configuradas y nopodremos decidir libremente el aspecto que queremos que tenga nuestra web. En este tema vamos a aprender a diseñar una página web desde cero, partiendo de unfichero de texto sin formato, y por tanto lo único que necesitamos es un editor de textoplano, el bloc de notas si trabajamos con Windows o el gedit para el caso de Linux, unnavegador para ver como va quedando. Aunque solo con estos editores es suficiente,tenemos disponibles editores de código HTML5, que nos permiten trabajar de formamucho más cómoda, ya que entre otras opciones realizan comprobación yautocompleción de la sintáxis e incluyen un entorno de trabajo desde el que podemosdiseñar y comprobar como va quedando nuestra web sin tener que cambiar de programa,ahorrando así mucho trabajo al programador de la web. Dentro de este grupo de editoresse encuentra Bluefish que será el editor que vamos a utilizar para diseñar nuestra página.

1


2. Sintaxis general de un documento HTML5El html5 es un lenguaje, y como todos los lenguajes tiene una sintáxis especial que debemosconocer antes de empezar a diseñar páginas web. Conocer la sintáxis html5 es muyimportante ya el navegador no avisa de los errores, lo que no entiende simplemente no lomuestra, por tanto, si después de introducir el código en nuestra página no vemos losresultados al visualizar dicha página desde el navegador, posiblemente hayamos escritoalguna línea con errores de sintáxis que deberemos revisar.

El html5 es un lenguaje basado en etiquetas (tags). Una etiqueta tiene la siguiente formageneral:

2.1. Etiquetas simplesSon etiquetas que van en una sola línea, es decir, están delimitadas por un solo marcador.La sintáxis general de estas etiquetas será la siguientes:

<etiqueta atributo="valor" />

Los atributos son opcionales, es decir, habrá etiquetas que los lleven y otras que no.

2.2. Etiquetas compuestasSon etiquetas que están delimitadas por dos marcadores, una etiqueta de inicio o aperturay una etiqueta de cierre, entre ambas etiquetas se coloca el contenido.

<etiqueta atributos="valor">contenido

</etiqueta>

Al igual que en el apartado anterior los atributos son opcionales.

En algunas ocasiones podemos encontrar que una misma etiqueta puede funcionar comosimple o compuesta dependiendo del elemento que vayan a introducir en la página web.

2.3. Elementos en bloque y en líneaConforme a como se muestran los elementos en una página web podemos distinguir dos tipos de etiquetas:

a) Etiquetas de bloque (block): Se muestran solos en una página web, es decir seproduce un salto de línea automáticamente después de colocar dicho elemento.

b) Etiqueta en línea: Se muestran acompañados, es decir, no generan saltos de líneadespués de mostrarse.

A continuación se incluye una lista en la que se clasifican las distintas etiquetas htmldependiendo que sean elementos o no de bloque:

2


ELEMENTOS EN LÍNEA

Etiqueta Función

a Para crear enlaces

img Para insertar imágenes

ELEMENTOS DE BLOQUE

Etiqueta Función

br Etiqueta que produce un salto de línea

div Etiqueta para crear agrupaciones

dl Listas de definición

h1, h2, ..., h6 Títulos

hr Etiqueta que dibuja una línea horizontal

ol Listas Ordenadas

p Párrafos

table Para crear tablas

ul Listas Desordenadas

3. Estructura de un documento html5Cualquier documento html5 tiene que seguir una estructura con un orden muy estricto queno nos podemos saltar si queremos que el navegador sea capaz de interpretarla, en estecapítulo vamos a ir analizando cada una de las líneas que código que forman la estructura deuna página web.

3.1. La etiqueta DOCTYPEEs la primer etiqueta de nuestro documento, e indica al navegador que tipo dedocumento se almacena en el fichero, ya que el navegador es capaz de mostrar distintostipos de documentos, comos ficheros PDF o imágenes. La sintáxis de esta etiqueta esmuy sencilla:

<!DOCTYPE html >

3.2. La etiqueta htmlEs la etiqueta que indica donde comienza el contenido html5 de nuestro documento, yaque en una página web se pueden incluir otros lenguajes como PHP o Java.Esta etiqueta también se utiliza para indicarle al navegador en que lengua vamos aescribir el contenido de nuestra página web, en nuestro caso en Castellano, esta etiquetaes la que utilizan los navegadores para filtrar los contenidos por idiomas cuandorealizamos una búsqueda.

3


<html lang = "es ">. . .

</html>

La letra "es" es el código de la lengua castellana. Existe otros códigos que podemos veren el siguiente cuadro:

Lengua Código

Castellano es

Catalán ca

Gallego gl

Euskera eu

Inglés en

Francés fr

3.3. La cabecera (HEAD)La cabecera contiene información que no forma parte del contenido de la página, comoel título, hojas de estilos CSS, etc. Por ahora nos quedaremos sólo con el título de lapágina. La cabecera va encerrada entre <head> y </head>, mientras que para el títulousamos la etiqueta <title>. El título de la web aparece en la barra de título de la ventanadel navegador, no se muestra como parte del contenido, es el nombre por defecto queaparece si añadimos a favoritos la página, etc. Quedaría así:

< head > < title > Título de la web </ title >

</ head >

El sangrado no es obligatorio, pero sí que viene muy bien para aclararnos con el código

3.4. La etiqueta meta (META)Esta etiqueta indica el tipo de codificación que estamos utilizando para almacenar loscaracteres de nuestro fichero, ya hemos estudiado en temas anteriores el proceso decodificación como parte del proceso de digitalización, en este caso de los caracteres delfichero html5. La codificación estándar es la Unicode (utf-8) y soporta caracteres detodas las lenguas: occidentales, griegos, chinos, árabes, japoneses, coreanos. . . ). Laetiqueta meta se coloca dentro de la sección <head> que hemos explicado en el apartadoanterior, su sintáxis es la siguiente:

< meta charset = ”utf-8” / >

3.5. El cuerpo (BODY)El cuerpo de la página web almacena todo el contenido de la misma, es decir, todo lo

4


que queremos que se vea dentro de nuestra página web va dentro de la sección body. Lasintáxis de esta sección quedaría así:

<body>Contenido de la web

</body>

3.6. La plantilla (página web vacía)Tomando todos los elementos que hemos descrito en los apartados anteriores ycolocándolos en el orden correcto obtenemos la estructura vacía de contenido de undocumento web, que queda de la siguiente manera:

En todos los ejercicios que vamos a realizar, partiremos de esta estructura a la queiremos añadiendo contenidos.

4. Etiquetas básicas

4.1. PárrafosLos párrafos en la web funcionan como en cualquier otro texto, es decir, contienen una omás frases relacionadas entre sí. Nunca debemos introducir texto que no esté incluidoentre las etiquetas de párrafo, aunque el navegador muestra por pantalla este texto, yaque será imposible posteriomente dar formato a este texto e incluso puede afectar a laforma en la que la pàgina web se visualiza por pantalla.El navegador web no interperta los saltos de línea, es decir, podríamos escribir todo elcódigo de nuestra página web en una sola línea o poner cada palabra en una línea distintay para el navegador no habría ninguna diferencia. Ocurre lo mismo con los párrafos, esel navegador el que controla la longitud de las líneas y se encarga de añadir los saltos delínea cuando sean necesarios. Sin embargo es una buena práctica para mejorar lacompresión del código no escribir las líneas más largas de lo que podamos ver porpantalla. Un ejemplo del uso de la etiqueta <p> sería el siguiente: <p>

La informática es la ciencia que se encarga de realizar el tratamiento automático de los datos.

5

<! DOCTYPE html >

<html lang="es"> < head >

< meta charset = "utf-8" / > < title > Título de la web </ title >

</ head >

< body > Aquí va el contenido

</ body > </ html >


</p> 4.2. Saltos de línea

En ocasiones es necesario forzar los saltos de línea, como por ejemplo cuando queremosintroducir los versos de un poema, en estos casos utilizaremos la etiqueta <br />. Comopodemos ver por su sintáxis es una etiqueta simple, veamos un ejemplo de su uso:

<p>Verde que te quiero verde. <br />Verde viento. Verdes ramas. <br/>El barco sobre la mar <br/>y el caballo en la montaña.

</p>

4.3. TítulosLos títulos nos permite organizar el contenido de nuestro texto en apartados,subapartados, puntos, etc... Para realizar esta función tenemos las etiquetas <hx> dondex representa un número del 1 al 6, correspondiendo los h1 con los apartados dentro de untexto, son los textos que se muestran con un mayor tamaño, h2 subapartado, y asísucesivamente, veamos un ejemplo:

<h1> La informática </h1>

Como hemos indicado anteriormente el navegador no lee los saltos de línea por lo queeste ejemplo también se puede codificar de la siguiente manera:<h1>

La informática </h1>

4.4. Separadores horizontalesPermite dibujar una línea horizontal en nuestra página web, aunque hoy en día están endesuso ya que podemos conseguir unos bordes saparadores más atractivos utilizando lashojas de estilo CSS que estudiaremos en capítulos posteriores. La etiqueta que nospermite incluir una línea horizontal en nuestra web es <hr />, al igual que la etiquetapara los saltos de línea es una etiqueta simple, veamos un ejemplo de su uso.<h1> La informática </h1><p>

Definimos informática como la ciencia que es encarga del tratamiento automáticode la información.

</p> <hr /> <h1> La Tecnología </h1>

<p> Conjunto de instrumentos, recursos técnicos o procedimientos empleados en undeterminado campo o sector.</p>

<hr />

6

4.5. ComentariosLos comentarios son notas que los programadores de código dejamos en el fichero deuna página web, se utilizan para aclarar parte del código y facilitan mucho su posteriormantenimiento. Debemos pensar que en el momento en el que estamos diseñando lapágina web lo tenemos todo muy claro y fresco ya que habremos realizado un procesoprevio de planificación, pero esto no va a ser así cuando pasado un tiempo vayamos amodificar nuestra página web. Los comentarios no se muestran por pantalla y se puedencolocar en cualquier parte de un fichero html5. Para escribir comentarios utilizamos lasiguiente sintáxis:



4.6. SangradoEl sangrado correcto de una página web es muy importante, ya que ayuda alprogramador a hacer más legible el código de la página web. Las normas básicas pararealizar un correcto sangrado son las siguientes:

a) Es conveniente utilizar sangrado vertical, saltos de línea, para separar las distintaspartes de una página web.

b) El sangrado horizontal ayuda a distinguir los distintos niveles de anidación deetiquetas, es decir, cuando una etiqueta va dentro de otra debe aumentarse el nivel desangrado horizontal.

Realiza el ejercicio 1 del final del tema.

5. EnlacesLos enlaces es lo que realmente distinguen una página web de un simple documento detexto. Ya que nos permiten, con un solo clic de ratón, tener interrelacionada información encualquier lugar del mundo gracias a internet. En este capítulo vamos a estudiar la sintáxisnecesaria para incluir distintos tipos de enlaces en nuestra página web.

5.1. Enlaces a una página externaEn este caso el enlace nos permite a acceder a un documento que se encuentraalmacenado en un servidor externo al que nosotros hemos almacenado nuestra páginaweb. Para crear cualquier tipo de enlace se utiliza la etiqueta <a> </a>, la sintáxis paraeste tipo concreto de enlaces es la siguiente:

<a href="http://www.nombredelaweb.com" title="texto descriptivo">Texto sobre el que hacer clic

</a>✔ El atributo href contiene la dirección de la página web a al que queremos acceder.

✔ El atributo title contiene un texto descriptivo sobre la página web que vamos a enlazar, casitodos los navegadores muestran este texto cuando pasamos el ratón sobre el enlace.

7

http://www.nombredelaweb.com/


✔ El texto que aparece entre la etiqueta <a> de apertura y cierre, es el que vamos a visualizaren el navegador y sobre el que tendremos que hacer clic para activar el hiperenlace.

5.2. Enlace a una página localEn este tipo de enlaces permite acceder a un fichero que tenemos almacenado en elmismo servidor donde está ubicada nuestra página web. Para acceder al ficherodeberemos conocer la ruta en la que se encuentra almacenado, en el momento del diseñodeberemos tener especial cuidado al incluir las rutas de los ficheros, haciendo referenciasiempre a rutas parciales que partan de la misma ubicación en la que se encuentranuestra página web, ya que posteriormente cuando subamos nuestra página web alservidor no vamos a conocer la ruta total del fichero y en este caso el enlace no va afuncionar. Para evitarnos futuros problemas lo mejor es crear una carpeta en la queiremos colocando todos los ficheros que formen parte de nuestro sitio web. La sintáxispara este tipo de enlaces es la siguiente:

<a href="rutafichero.html" title="texto descriptivo">texto sobre el que hacer clic

</a>(recordemos que las rutas totales parten del directorio raíz y comienzan siempre con / las rutas parciales parten del subdirectorio en el que nos encontramos y nunca comienza con /)

5.3. Enlace a una dirección de correoEn este caso el enlace activará el programa gestor de correo que incluya nuestro sistemaoperativo, (outlook o evolution) para enviar un mensaje a la dirección de correo quehayamos incluido en el enlace. La sintáxis para un enlace a una dirección de correo es lasiguiente:

<a href="mailto:[email protected]" title="texto descriptivo">texto sobre el que hacer clic

</a>

5.4. AnclasEste tipo de enlaces nos permiten acceder a una posición concreta dentro de la mismapágina web en la que estemos situados. Para crear un ancla, deberemos primeroidentificar la posición dentro de la página a la que nos queremos mover, para elloutilizaremos el atributo id="valor". Este atributo va a permitir identificar de forma únicaa una etiqueta dentro de una página web, y puede ir acompañando a cualquier etiqueta.Estos identificadores no se pueden repetir en un mismo fichero web. En un segundo pasoañadiremos el código del enlace que nos lleve a la parte del documento que hemosidentificado con el atributo id. La sintáxis para este tipo de enlaces es el siguiente:

<etiqueta id="valor"> contenido </etiqueta>

. . .<a href="#valor" title="texto descriptivo">

texto sobre el que hacer clic</a>

Realiza el ejercicio 2 del final del tema

8

mailto:[email protected]


6. ListasEstas etiquetas son muy útiles para incluir información ordenada en forma de listas. Enhtml5 podemos encontrar los siguientes tipos de listas: 6.1. Listas ordenadas

En las listas ordenadas los elementos se muestran numerados. Para crear una listaordenada se utilizan las etiquetas <ol>, para añadir elementos a una lista ordenadautilizaremos la etiqueta <li>. La sintáxis para este tipo de listas es la siguiente:<ol>

<li> Primer elemento </li><li> Segundo elemento </li>

</ol> 6.2. Listas desordenadas

En las listas desordenadas cada elemento se muestra con una viñeta. Para crear una lista desordenada se utilizan las etiquetas <ul>, para añadir elementos a una lista desordenadautilizaremos al igual que en las listas anteriores la etiqueta <li>. La sintáxis para este tipo de lista es la siguiente:

<ul><li> Primer elemento </li><li> Segundo elemento </li>

</ul>

6.3. Listas de definiciónEn este tipo de listas cada elemento tiene dos partes: a) El elemento que vamos a definir, que se declara con la etiqueta <dt> b) La definición de ese elemento, que se declara con la etiqueta <dd>Al igual que en las listas anteriores necesitamos una etiqueta para declarar la lista, en este caso se utiliza la etiqueta <dl>. La sintáxis para este tipo de listas sería la siguiente:

<dl><dt> Primer elemento que vamos a definir </dt><dd> Definición del primer elemento que hemos definido </dd><dt> Segundo elemento que vamos a definir </dt><dd> Definición del segundo elemento que hemos definido </dd>

</dl>

6.4. Listas anidadasEl código html5 nos permite definir listas dentro de otras listas, así podremos tener unalista ordenada que en su interior tenga una lista desordenada como parte de suselementos o cualquier otra combinación que se nos pueda ocurrir. Para crear listasanidadas solo tenemos que incluir dentro de un elemento de la lista, marcado con laetiqueta <li>, la defición completa de la otra lista, y cerrar la etiqueta del elemento quela contiene al final de esta definición. Como es un poco complicado explicarlo conpalabras pasaremos a verlo con un ejemplo:

9


<ol><li> Primer elemento lista externa

<ul><li> Primer elemento de la lista interna </li><li> Segundo elemento de la lista interna </li>

</ul></li><li> Segundo elemento de la lista externa </li>

</ol>Observa como el elemento que incluye la lista anidada, en este caso una listadesordenada, no se cierra hasta que hemos escrito la etiqueta de cierre de esta lista queindica el fin de la misma. También puedes observar la importancia del sangrado paraentender como esta organizado el documento html5, si realizamos un correcto sangradodel código podemos definir la estructura de un documento de un solo vistazo. Utilizandoeste mismo patrón podremos anidar cualquier tipo de listas.

Realiza los ejercicios del 3 al 6 que encontrarás al final del tema.

7. ImágenesLas imágenes son necesarias para añadir información y mejorar el aspecto de nuestra páginaweb y siempre deben cumplir las dos funciones, es decir, no debemos colocar imágenes ennuestra web simplemente para adornar o imágenes que no tengan nada que ver con elcontenido de nuestra página web. Una web llena de imágenes hace que el navegador empleemucho tiempo y recursos de memoria en mostrar la página por pantalla y ya sabemos lo queocurre cuando un usuario tiene que esperar una cantidad de tiempo ingente para poder veruna web, en mi caso no tardo más de 10 segundos en buscar otra que se muestre másrapidamente. Por tanto deberemos encontar una solución de compromiso para que nuestraweb no sea solo texto, en estos casos no espero ni los 10 segundos de rigor, ni tampoco laconvirtamos en un muestrario de imágenes sin ningún sentido.La etiqueta que nos permite incluir una imagen en nuestra web es <img />, como podemosver es una etiqueta simple, es decir, se escribe en una sola línea, pero lleva incluidos unaserie de parámetros que especifican aspectos necesarios de la imagen. La sintáxis para estaetiqueta es la siguiente:

<img src="ruta de la imagen" width="ancho" height="alto" alt="texto alternativo" />

Vamos a explicar con un poco más de detalle cada uno de los parámetros que acompañan ala etiqueta imagen.

a) Src: Este parámetro permite indicar la ruta donde se encuentra almacenada laimagen, ya hemos hablado anteriormente sobre rutas de ficheros cuando explicamoslos enlaces, en este caso deberemos seguir las mismas normas que en dicho apartadopara asegurarnos que las imágenes se muestran cuando subamos al servidor webnuestra página para compartirla con todo el mundo, recordamos que siempredeberemos utilizar rutas parciales que partan de la posición donde se encuentra miweb.

10

b) Width: Este parámetro permite indicar la anchura de la imagen, por defecto seexpresa en pixeles, pero podemos indicarlo también en porcentaje del ancho de lapantalla, colocando el símbolo % detrás del valor.

c) Height: Este parámetro permite indicar la altura de la imagen, por defecto se expresaen pixeles, pero podemos indicarlo también en porcentaje del alto de la pantalla,colocando el símbolo % detrás del valor.

d) Alt: Como ya hemos comentado a veces el navegador no puede cargar una imagen otarda mucho, este parámetro permite mostrar un texto alternativo cuando no se puedecargar la imagen, También es muy útil para los navegadores para personasinvidentes, ya que estos navegadores leerán el texto incluido en esta etiqueta paraque la persona sepa los contenidos que se están mostrando en pantalla y que nopueden ver. Debemos tener en cuenta que nuestro primer visitante siempre es ciego yse llama GOOGLE.

Como esta etiqueta es un poco más compleja vamos a incluir un ejemplo concreto:<img src="imagenes/foto.jpg" width="25%" height="25%" alt="imagen para mejorarel contenido de nuestra web" />En este ejemplo veremos la imagen foto.jpg que se encuentra en la carpeta imágenesdentro del mismo directorio que nuestro fichero con un tamaño del 25% de la pantalla alo alto y a lo ancho y en caso que no se pueda mostrar aparecerá el texto incluido en elparámetro alt.


8. TablasLas tablas nos permite colocar elementos en nuestra página web ordenados por filas ycolumnas, pero nunca deberíamos usarlas para maquetar nuestra página web, es decir, paradar forma a nuestra página web se utilizan las capas, incluidas dentro de las hojas de estilo.

Para definir una tabla se utilizan las siguientes etiquetas:

<table> </table> : Para definir el inicio y fin de la tabla.<caption> </caption>: Para poner un título a la tabla, por defecto se coloca arriba ycentrado.<tr> </tr>: Crea una fila<td> </td>: Crea una celda<th> </th>: Crea una celda cabecera

Para entenderlo mejor realizaremos un ejemplo:<table>

<caption> Alumnos </caption> <tr>

<th> Nombre </th><th> Nota </th>

</tr><tr>

<td> Manuel </td>

11


<td> 7,5 </td></tr>

</table>

La tabla que da lugar a este ejemplo es la siguiente:

AlumnosNombre Nota

Manuel 7,5

8.1. Atributos para las tablasLas tablas se pueden modificar para mejorar su apariencia, en este capítulo vamos aestudiar algunos de ellos: a) Atributos para la etiqueta table

• border: Permite cambiar el grosor del borde de la tabla. la sintáxis de esteatributo es border="nº" donde el número indica el grosor en px del borde de latabla, si no queremos que se vea el borde pondremos border="0";

• cellspacing: Permite separar las celdas entre sí. La sintáxix de este atributo escellspacing="nº" donde el número indica los píxeles de separación entre lasceldas.

• Cellpadding: Permite separar el contenido de las celdas del borde de las mismas.La sintáxis de este atributo es cellpadding="nº" donde número indica los pixelesque está separado el contenido del borde de la celda.

b) Atributos para la etiqueta <th> o <td>• Colspan: Permite expandir una celda en varias columnas, es decir, en la

siguiente fila colocaremos tantas celdas como hayamos indicado en colspandebajo de la celda que lleva este atributo. La sintáxis de este comando escolspan="nº" donde el número indica cuantas columnas se va a expadir esacelda.

• Rowspan: Permite expadir una celda en varias filas, es decir, realiza la mismafunción que el parámetro anterior pero a nivel de filas. La sintáxis esrowpan="nº" donde número indica la cantidad de filas que se va a expadir lacelda a la que acompaña el parámetro.

Realiza el ejercicio 10 del final del tema

12


9. Primeros pasos con las hojas de estilo (CSS3)Hemos comentado anteriormente que en html5 decimos que cosas queremos ver en nuestrapágina web, pero no como queremos que se vean. En este capítulo vamos a aprender CSS3,que es una extensión del lenguaje html5 que nos permite indicar como queremos que sevean los elementos de nuestra página web.

9.1. Situación del código CSS3Para escribir el código CSS tenemos dos opciones, la primera y más profesional consisteen incluir el código en un fichero externo al de la página web y enlazarlo después anuestra página web. Esta opción tiene la ventaja de que podermos generar un solofichero de estilos CSS y enlazarlo a múltiples páginas web.Para enlazar un fichero CSS a la página web debemos incluir la siguiente orden dentrode la cabecera (<head>):

<link rel="stylesheet" href="ficherodeestilo.css"/>

Donde ficheroestilo.css será el fichero que contenga el código de la hoja de estilos.

La segunda forma menos profesional, es incluir directamente el código dentro de lacabecera de nuestra página web. Este es el método que vamos a utilizar, al menos alprincipio, en nuestras páginas, principalmente para que veamos la relación directa entrelas etiquetas html5 y sus modificadores CSS. Para incluir código CSS en la cabeceravamos a utilizar las siguientes etiquetas <style> </style>, entre las cualesintroduciremos las instrucciones CSS.

9.2. La herencia en CSSEste concepto hace referencia a que las etiquetas que se encuentran definidas dentro deotras etiquetas, como por ejemplo las etiquetas <li> dentro de una lista, van a heredar lasmismas características que hayamos definido dentro de la hoja de estilos para la lista quelas contiene, lo mismo ocurriría si anidamos distintas etiquetas.

9.3. Sintáxis general del código CSSPara escribir código CSS utilizamos la siguiente sintáxis que irá entre las etiquetas<style> que hemos indicado en el apartado anterior:

selector {propiedad: valor;propiedad: valor;. . . }

No debemos olvidar que cada línea debe terminar con un punto y coma. Podemos incluirdistintos tipos de selectores, propiedades y atributos que a continuación vamos aexplicar.

a) Tipos de Selectores: Como selectores podemos elegir:

13


• Etiquetas: Podemos utilizar cualquier de las que hemos estudiado dentro delcódigo html5

• Selector universal: Se representa con un * y permite aplicar propiedades a todoslos elementos de una página.

• Identificadores: Ya los hemos utilizado anteriormente para crear anclas en undocumento. Como ya sabemos un identificador especifíca de forma única a unaetiqueta html5 y por tanto va a permitir aplicarle a dicha etiqueta un formatoúnico y diferente del resto de etiquetas de su clase. La sintáxis para incluir unidentificador como selector sería la siguiente:

#identificador {propiedad : valor;}

• Clases: Las clases realizan la función contraria al identificador, es decir, cuandodefinimos una clase agrupamos distintas etiquetas para aplicar un estilo común atodas ellas. La sintáxis para definir añadir una etiqueta html5 a una clase es lasiguiente: (esto va dentro del código html5)

<etiqueta class="nombreclase">

La sintáxis para aplicar estilos a una clase sería la siguiente: (esto va dentro delcódigo CSS)

. class{propiedad : valor;}

10.Propiedades CSS para el cuerpo (body)Podemos modificar el aspecto que presentan el cuerpo de nuestra página web con los siguientesvalores aplicables a la etiqueta body.

a) Color de primer plano: Corresponde al color que va encima del color de fondo ynormalmente hace referencia al color del texto. La sintáxis es la siguiente:

body {color:#valorhexadecimal ;}

Se puede aplicar sobre cualquier etiqueta que contenga texto, como tablas o listas, o enlaces.

b) Color de fondo: La sintáxis es la siguiente:

14


body{background: #color | url(image) | repeat | attachment | position; }

• color: se indica con la misma sintáxis del color de texto.• Image: indica la ruta donde se encuentra la imagen.• Repeat: Indica si la imagen se repite al no ocupar completamente la pantalla.

• repeat: la imagen se repite en forma de mosaico• non-repeat: la imagen no se repite.

• Attachment: Indica si la imagen se mueve con el scroll del texto o se queda fija.Puede tomar dos valores:• fixed: La imagen se queda fija mientras el texto se mueve• scroll: La imagen se mueve con el scroll del texto.

• Position: Permite indicar la posición del fondo, tomando como punto de origen laequina superior izquierda. Podemos indicar la posición de las siguientes maneras:

• porcentaje% porcentaje%: Indicando el % de pantalla al que queremosque comience, el primer valor será para el ancho y el segundo para el alto

• valor1 px valor2 px: Indicando cuantos pixeles a lo ancho y altoqueremos separar el fondo.

Para entender mejor su funcionamiento veamos el código para una página con un fondoblanco sobre el que se coloca una imagen de fondo que no se repite y se encuentra situada a10px de ancho y 25 px de alto de la esquina superior izquierda.

Body{background: #ffffff url(imagenes/fondo.jpg) non-repeat scroll 10px 20px;}

También podemos especificar las propiedades de una en una de la siguientemanera:

body{background-color:#ffffff;background-image: url(imgenes/fondo.jpg);background-repeat: non-repeat;background-attachment: scroll;background-position: 10px 20px;}

Esta propiedad se puede aplicar sobre cualquier etiqueta y cambiará el color del fondo de lacaja que contiene el contenido de dicha etiqueta. Se puede aplicar en las tablas, por ejemplo,a nivel de tabla, de fila o de celda.

15


11.Propiedades CSS para el texto Dentro de este grupo vamos a explicar todas aquellas propiedades que pueden cambiar el aspecto delos textos que hemos incluido en nuestras páginas web.

• Tipo de letra: Podemos modificar el aspecto que queremos que tenga nuestrotexto con las siguientes propiedades:

• text-align: Permite establecer distintos tipos de alineación para nuestrostextos que pueden ser right, left, center, o justify. La sintáxis sería:

text-align: valor;

• text-decoration: Permite adornar nuestros textos con subrayado, sobrelineadoy tachado, puede tomar los siguientes valores underline (subrayado),overline (sobrelineado) , line-through (tachado). La sintáxis sería lasiguiente:

text-decoration: valor;

• font-weight: Permite establecer el grosor con el que se muestran las letras detexto. Normalmente se utiliza para mostrar texto en negrita. La sintásis deeste comando sería la siguiente:

font-weight: bold;

• font-family: Permite especificar distintos tipos de letra, irá eligiendo aquellaque tengamos disponible en el ordenador en el mismo orden que las hayamosindicado, Si el tipo de letra tiene un nombre compuesto deberemos escribir suvalor entre comilla. La sintáxis sería la siguiente

font-familiy: valor1, valor2, .... valorn;

• font-style: Permite utilizar distintos efectos para nuestro texto puede tomarlos siguientes valores italic (cursiva), normal (texto normal), oblique(también cursiva). La sintáxis sería la siguiente:

font-style: valor;

• font-size: Permite modificar el tamaño de la fuente. Podemos indicar estetamaño con valores absolutos como pixelex (px), puntos (pt), o en unidadesrelativas como em (1 em es una unidad relativa al tamaño de letra queestamos utilizando por defecto), o porcentajes (%). La sintáxis sería lasiguiente:

font-size:valor;


16


12.Propiedades CSS para los enlacesSe puede cambiar el estilo del texto de un enlace aplicando las propiedades para los textos: color,font-family, font-syze, font-weight, text-decoration, font-style, pero podemos también cambiar laspropiedades de los enlaces en función de su estado, es decir, si el cursor pasa por encima, hace clicsobre él, ya lo ha utilizado o no, etc. Con los atributos id o class no se pueden aplicar estilosdiferentes a un mismo elemento, para eso CSS introduce el concepto de pseudo-clase. Para losenlaces se definen las siguientes 4 pseudo-clases:

• :link: aplica estilos a los enlaces que apuntan a páginas o recursos que aún no han sidovisitados por el usuario.

• :visited: aplica estilos a los enlaces que apuntan a recursos que han sido visitadosanteriormente por el usuario. El historial de enlaces visitados se borra automáticamente cadacierto tiempo y el usuario también puede borrarlo manualmente.

• :hover: aplica estilos al enlace sobre el que el usuario ha posicionado el puntero del ratón.

• :active: plica estilos al enlace que está pinchando el usuario. Los estilos sólo se aplicandesde que el usuario pincha el botón del ratón hasta que lo suelta, por lo que suelen ser unaspocas décimas de segundo.

La sintaxis para aplicar estilos utilizando pseudo-clases sería el siguiente:

a:pseudo-clase{

propiedad: valor;

. . .

propiedad:valor;

}

Cuando se aplican propiedades para varias pseudo-clases diferentes se producen colisiones entre losdistintos estilos, así cuando un usuario pasa el ratón por encima de un enlace se aplican las pseudo-clases :hover y :visited. Si el usuario pincha sobre un enlace no visitado se aplican las pseudo-clases:hover, :link, :active.

Si se definen varias pseudo-clases sobre un mismo enlace, el único orden que asegura que todos losestilos de las pseudo-clases se aplican de forma coherente es elsiguiente: :link, :visited, :hover, :active. De hecho, en muchas hojas de estilos es habitual establecerlos estilos de los enlaces de la siguiente forma:

a:link, a:visited { ...}

a:hover, a:active { ...}

De forma que se define un mismo estilo para dos pseudo-clases distintas.

17


13.Propiedades CSS para las listasDesde CSS se incluyen diferentes propiedades que nos permiten cambiar el aspecto de las viñetas ylos números utilizados en las listas desordenadas y ordenadas. La propiedades que permite cambiarel aspecto de nuestras viñetas son: list-style-type, para cambiar su estilo, list-style-position, paracambiar su posición, list-style-image para utilizar una imagen personalizada. Vamos a irexplicando cada uno de estos atributos y su sintaxis general.

Propiedad list-style-type: Su sintaxis general es la siguientes:

etiqueta_lista{

list-style-type: valores gráficos | valores numéricos | valores alfanuméricos | none

}

Los valores gráficos se utilizan con las listas desordenadas (ul) y pueden tomar los siguientesvalores: disc, circle, square

Los valores numéricos se utilizan con las listas ordenadas (ol) y pueden tomar los siguientesvalores: decimal, decimal-leading-zero, lower-roman, upper-roman, armenian y georgian.

Los valores alfanuméricos se utilizan con las listas ordenadas (ol) y pueden tomar los siguientesvalores:lower-latin, lower-alpha, upper-latin, upper-alpha y lower-greek.

El valor none permite crear una lista ordenada sin numeración o desordenada sin viñetas.

Propiedad list-style-position: Su sintaxis general es la siguientes:

etiqueta_lista{

list-style-position: inside | outside

}

El valor outside deja fuera la viñeta respecto al texto.

El valor inside coloca la viñeta dentro respecto al texto.

Propiedad list-style-image: Se emplea con las listas desordenadas. Su sintaxis general es lasiguiente:

etiqueta_lista{

list-style-image: url("ruta")

}

El valor url permite indicar la ruta del fichero que queremos utilizar para que se muestre comoviñeta en las listas desordenadas.

18


14.Propiedades CSS para las tablasAntes de empezar a aplicar estilos css a las tablas debemos explicar los dos modelos que incluye csspara visualizar los bordes y que se definen con la propiedad boder-collapse. Esta propieda tiene dosposibles valores:

border-collapse: collapse; En este caso fuerza a que los bordes de las tablas adyacentes semuestren fusionados. Cuando aplicamos este valor el atributo cellspacing para las tablas esignorado. Los navegadores solo

Border-collapse: separate; En este caso fuerza a mostrar los cuatro bordes de una celda porseparado aunque las celdas sean adyacentes. Este es el valor que tienen por defecto.

Otros atributos que se pueden aplicar a los bordes de una tabla son los siguientes:

border: width | style | color

que también se pueden especificar por separado de la siguiente manera:

border-width: Nos indica el grosor del borde que se puede especificar en pixeles o utilizando laspalabras thin, medium, thick (delgado, medio, grueso).

border-color: Cambia el color del borde de una celda utilizando la sintaxis para indicar los coloresque ya hemos explicado para otros parámetros anteriormente.

border-style: Cambia el estilo del borde de la tabla o de la celda. Los posibles valores que puedetomar son los siguientes:

• none : sin borde, el ancho es definido como 0. Es el valor por defecto.

• Hidden : igual que 'none', excepto en el caso de conflictos de bordes por ejemplo enelementos de tabla.

• Dashed : serie de guiones (-----).

• dotted : series de puntos (.....).

• double : dos líneas rectas continuas separadas de un ancho definido con border-width.

• groove: efecto de hundimiento del borde.

• Inset: efecto de hundimiento de una caja.

• outset: efecto inverso a 'inset', la caja parece salir, como en 3D.

• Ridge: efecto inverso a 'groove', el borde parece salir, como en 3D.

• Solid : línea única, recta, sólida.

Podemos escoger un tipo de borde diferente para cada lado con los sufijos -top, -bottom, -left y -right.

Para eliminar el borde, simplemente ponemos que tiene de grosor 0 píxeles o que el estilo del bordees none.

19


Ejemplo para una tabla sería:table{

border-top: 10px dashed #FAFAFA;border-bottom: 10px dashed blue;border-left: 1px;border-right:1px;

}

También podemos aplicar otras propiedades a nivel de tabla, fila o celda que ya hemos estudiadoantes, como el color de fondo, el tamaño y la alineación del texto, etc...


15. Inserción de elementos MultimediaLas primeras páginas web fueron desarrolladas en el ámbito académico con el fin de compartirinformación textual, no fue hasta tiempo después con la generalización del uso de internet por elpúblico en general que se hace necesario la inclusión de imágenes primero y elementos multimediadespués. La inclusión de elementos multimedia ha sido la fuente de numerosos problemas debidoprincipalmente a la gran variedad de formatos existentes para audio y vídeo y por la imposibilidadde los navegadores antiguos de reproducir estos elementos de forma nativa, sin la necesidad deplugins. Con la nuevas especificaciones para HTML5 y la modificación de los navegadores parapermitir la visualización de los elementos multimedia sin necesidad de programas externos estosproblemas se ha reducido bastante. En este apartado vamos a explicar las etiquetas que nos van apermitir la inserción de elementos multimedia en nuestras páginas web.

15.1 Inserción de vídeo en una web

Una de las características más celebradas de html5 es la capacidad de reproducir vídeos de formanativa, es decir, sin la necesidad de programas externos al navegador (plugins). La sintáxis de laetiqueta que nos permite insertar vídeos es la siguiente:

<video src=”ruta_fichero” width=”valor” height=”valor” controls autoplay></video>

Los parámetros src, height y width funcionan tal y como ya hemos explicado anteriormente paraotras etiquetas como <img>, el parámetro controls muestra controles de vídeo provistos por elnavegador. El parámetro autoplay hace que el vídeo comience a reproducirse automáticamente tanpronto como pueda.

Esta etiqueta se puede insertar con una sintáxis que permite declarar varias fuentes con diferentesformatos para que el navegador puede elegir cual archivo reproducir de acuerdo a los formatossoportados (MP4 u OGG).

20


<video width="valor" height="valor" controls> <source src="imagenes/video.mp4"> <source src="imagenes/video.ogg">

</video>

15.2 Inserción de audio en una web

HTML5 provee un nuevo elemento para reproducir audio en un documento HTML. El elemento,por supuesto, es <audio> y comparte casi las mismas características del elemento <video> .Debemos tener en cuenta que .mp3 es un formato con licencia comercial y por tanto no seráreproducido por Firefox u Opera y el otro formato de audio más extendido .ogg no es soportado porSafari o Internet Explorer, por lo que para cubrir todas las posibilidades deberemos incluir lasintaxis que permite seleccionar distintas fuentes.

<audio controls> <source src="imagenes/audio.mp3"> <source src="imagenes/audio.ogg">

</audio>


16. Modelo de caja en CSS3Todos los elementos de una página web están definidos como una caja. Los navegadores siguen

el flujo estándar (de izquierda a derecha y de arriba a abajo) para colocar estas cajas, salvo que elprogramador indique lo contrario. También debemos tener en cuenta que hay dos tipos de cajas: loselementos de bloque y los elementos en línea (block e inline).

Los elementos de línea siguen el flujo estándar, es decir, no introducen saltos de línea después demostrarse en pantalla y por tanto podremos poner distintos elementos de línea uno al lado de losotros, no respetan ni los anchos ni los altos ni los márgenes verticales que el programador puedacolocar para modificar su posición y es el navegador el encargado de calcular su tamaño y posiciónpara que puedan mostrar todo su contenido. A este grupo pertenecen los enlaces y las imágenes.

Los elementos de bloque rompen este flujo estándar ya que añaden un salto de línea automáticodespués de escribirse en pantalla, es decir, no podremos poner dos elementos de bloque uno al ladodel otro, a diferencia de los elementos en línea se les puede modificar su ancho, alto y márgenesverticales para posicionarlos en distintas partes de la pantalla. A este grupo pertenecen los párrafos,cabeceras, listas, tablas, ... .

Aunque esta diferencia es importante a la hora de maquetar nuestra página web, debemos teneren cuenta que la propiedad display permite alterar la forma en la que por defecto se muestra unelemento. Algunos de los posibles valores para esta propiedad son block, inline, inline-block. Elvalor block permite a un elemento inline presentarse como un elemento de bloque y el valor inline

21


permite a un elemento de bloque presentarse como un elemento inline. El valor inline-block permitea un elemento de bloque presentarse como un elemento de línea pero manteniendo las propiedadeswidth, height y margin-top que se pueden aplicar a los elementos de bloque. La sintaxis general deesta propiedad sería:

display:valor;

Independientemente del tipo de caja con el que estemos trabajando, todas las cajas tienen unoselementos comunes que se muestran en el modelo de caja, tal y como podemos ver en el siguientedibujo.

Las propiedades más importantes del modelo de caja sonlas siguientes:

1) Ancho y alto: La anchura de la caja se define conla propiedad width, y representa el ancho interno de la caja,es decir, sin incluir el relleno (padding) ni el borde (border).Solo podremos modificar el ancho de los elementos debloque ya que en los elementos de línea el ancho se calculaautomáticamente para ajustarse al contenido. Podemosexpresar el ancho de la caja indicando medidas absolutas(píxeles) o medidas relativas (porcentajes) .

La propiedad height representa la altura interna de la caja yse define con las misma condiciones que hemos utilizadopara la anchura.Si la altura y la anchura que hemos definido no es suficiente para mostrar todo el contenido, elnavegador las recalculará haciendo caso omiso a las indicaciones que le hayamos dado.Ejemplo:

table{width: 200 px;height: 100 px;

}2) Relleno : La propiedad padding permite determinar la distancia de relleno entre el límite

interior y exterior de la caja. Podemos definir un relleno distinto para cada lado de la cajausando los sufijos -top, -bottom, -left, -right (arriba, abajo, izquierda, derecha).

Ejemplo:.especial{

padding - top : 10 px ; padding - bottom : 5 px ; padding - left : 30 px ; padding - right : 20 px ;

}

Podemos abreviar lo anterior en una sola línea, indicando primero el padding superior yluego siguiendo el orden de las agujas del reloj. Es decir, nos quedaría: arriba, derecha,abajo, izquierda.

22


El ejemplo anterior se acortaría así:

.especial{padding : 10 px 20 px 5 px 30 px ;

}Otro atajo útil es especificar sólo dos medidas: una corresponderían al padding superior einferior, y la otra al lateral. Si queremos que los paddings superior e inferior sean de 10píxeles, y los laterales (izquierdo y derecho) de 20 píxeles.

Siguiendo con el ejemplo nos quedaría:

.especial{padding : 10 px 20 px ;

}

3) Bordes: La mayoría de los elementos de una página web tiene los bordes desactivados pordefecto, es decir, no se muestra, como por ejemplo en las tablas, aunque en algunasocasiones si que los muestran por defecto como cuando utilizamos una imagen como enlace.Para determinar como queremos que sean nuestros bordes y si queremos o no que semuestren se utilizan la propiedad border, que puede tomar los mismos valores que ya hemoscomentado anteriormente para las tablas

4) Márgenes: Indican la distancia entre el borde de la caja y el resto de elementos que larodean y se define mediante la propienda margin. Se define igual que la propiedad padding,incluyendo también los atajos para escribirla.

Ejemplo:.especial{

margin - top : 10 px ; margin - bottom : 5 px ; margin - left : 30 px ; margin - right : 20 px ;

}

17. Etiquetas Div y SpanLas etiquetas <div> y <span> se utilizan para definir bloques de contenidos en una página web, conel fin de mejorar la estructura semántica de nuestras web, poder aplicar diferentes estilos e inclusopara realizar operaciones sobre dichos bloques de contenido.

La diferencia entre ambas etiquetas está en que mientras la etiqueta <div> define elementos debloque (block) también llamados capas que generan un salto de línea después de su inclusión, laetiqueta <span> permite la inclusión de bloques de contenido de tipo inline de forma que podremoscrear subdivisiones dentro de un mismo bloque de contenidos sin necesidad de crear nuevas capas.

23


18.Etiquetas semánticas en html5Las capas son elementos de bloque, que sirven de contenedores para otros elementos de bloque o enlínea, su funcionamiento es parecido a los marcos que utilizamos para maquetar documentos detexto, y son utilizadas para maquetar nuestra web. En versiones anteriores de HTML se definían conla etiqueta <div> junto con un identificador que nos permitía identificar el contenido quealmacenaban por ejemplo la barra de menú de un página web se definía con la siguiente etiqueta<div id=”menu”>. En el código html5 se ha dejado de utilizar la etiqueta <div>, salvo que lasección que queremos definir no tenga definida su propia etiqueta en la sintaxis de html5, lasdistintas secciones de una página web se definen utilizando etiquetas específicas que ademáspermiten organizar el contenido semánticamente.

Estas etiquetas no muestran contenido, ni modifican el aspecto de la página web, su única funciónes dotar de una estructura a la página web haciendo más fácil el trabajo para el programador y máseficiente la interpretación del código por parte del navegador. A continuación vamos a explicar elcontenido que debe contener cada una de las secciones que hemos definido en la imagen anterior.

• <header> : Este elemento presenta información introductoria y puede ser aplicado endiferentes secciones del documento, por ejemplo una sección <article> puede tener supropio <header>. No debemos confundirlo con la etiqueta <head> que hemos utilizado paradefinir la cabecera del documento html.

• <nav> :Este elemento nos permite definir la barra de menús que normalmente incluye unaserie de enlaces con el propósito de permitirnos movernos por nuestro sitio web. Solo seincluyen dentro de un elemento <nav> aquellos enlaces que forman parte de la barra demenús.

24

Imagen del diseño de una web con secciones


• <section> : Este elemento representa la sección principal del documento, la que suelecontener la información principal de la página web. Esta sección suele estar organizada endistintas subsecciones que permiten definir varios bloques de contenido con el propósito deordenar el contenido que comparte características comunes, como por ejemplo la entradas enun blog.

• <article>: Este elemento representa una parte independiente de información relevante (porejemplo, cada artículo de un periódico o cada entrada de un blog). El elemento <article>puede contener sus propias secciones <header> y <footer>.

• <hgroup>: Este elemento se utiliza para agrupar títulos (h1, h2 …) cuando tienen múltiplesniveles (por ejemplo, una cabecera con título y subtítulo).

• <figure> :Este elemento permite agrupar contenido que hace referencia a información visual(por ejemplo, imágenes, diagramas o vídeos).

• <figcaption>: Este elemento se utiliza para mostrar una leyenda o pequeño textorelacionado con el contenido de un elemento <figure>, como la descripción de una imagen.

• <aside> : Este elemento nos permite definir los paneles laterales. Normalmente almacenacontenido que está relacionado con el contenido principal de <section> pero no es parte delmismo. Ejemplos pueden ser citas, información en barras laterales, publicidad, etc...

• <footer> : Este elemento representa información adicional sobre su elemento padre. Porejemplo, un elemento <footer> insertado al final del cuerpo proveerá información adicionalsobre el cuerpo del documento, como el pie normal de una página web. Este elemento puedeser usado tanto para el cuerpo como para diferentes secciones dentro del cuerpo, porejemplo una sección <article> puede contener su propio <footer>, otorgando informaciónadicional sobre esta sección en concreto.

En el ejemplo siguiente se muestra la sintaxis del cuerpo de una página web que incluye todas lasetiquetas semánticas que hemos explicado en este apartado.

<body>

<header> <h1> Todo Informática</h1> <h2> Mantente Informado</h2>

</header>

<nav> <ul>

<li> Inicio </li> <li> Sobremesa y portátiles </li> <li> Tablets y Smartphones </li>

</ul> </nav>

25


<section> <article>

<header> <hgroup>

<h1> Ultimas novedades</h1> <h4> No te pierdas nada </h4>

</hgroup> <p>Fecha de publicación 28/01/2017</p>

</header>

Hemos desarrollado esta página web para mantenerte informado sobre …. <figure>

<img src="imagenes/ordenador.jpeg" alt="imagen de un ordenador" /> <figcaption>

Imagen de un ordenador personal de sobremesa </figcaption>

</figure> <footer>

<p>comentarios (0)</p> </footer>

</article>

<article> <header>

<hgroup> <h1>Componentes de un ordenador</h1> <h4> El Hardware</h4>

</hgroup> <p>Fecha de publicación 28/01/2017</p>

</header>

Vamos a tratar por separado las novedades hardware y software, tal y como … <figure>

<img src="imagenes/hardware.jpeg" alt="imagen de un ordenador" /> <figcaption>

Imagen de un ordenador personal de sobremesa </figcaption>

</figure> <footer>

<p>comentarios (0)</p> </footer>

</article> </section>

<aside> <blockquote>La inteligencia de un ordenador está siempre detrás del teclado</blockquote> <blockquote>Solo hay 10 clases de personas las que saben binario y las que no</blockquote> </aside>

26


<footer> Página web desarrollada para fomentar el conocimiento de la informática. 28/01/2017

</footer>

</body>

19.Posicionamiento web en CSS3El posicionamiento CSS es la técnica utilizada para maquetar diseños usando únicamente html5

y las propiedades CSS3. Es el estándar hoy en día y todo sitio web bien maquetado debería usar estatécnica. Las ventajas son muchas, pero entre ellas destaca una mejor separación entre laapariencia y la estructura de la página, un código más semántico y entendible por buscadores yun tamaño de página resultante inferior, por lo tanto mayor velocidad de carga de la página.

Hasta ahora hemos estado colocando los elementos de nuestra página web utilizando el flujo normalde la página web, hemos indicado el tamaño de estos elementos con las propiedades widht,heigth, ... pero aún no hemos utilizado ninguna herramienta de las que incluye CSS para posicionarelementos en la pantalla.

20.Posicionamiento CSS Estatic

El posicionamiento normal de todos los elementos es static, que significa que cada elemento seposiciona donde le corresponde según el flujo normal de la página. Si no se indica nada, este es elvalor que toman todos los elementos.

section { position:static;

}

El resultado que se muestra es el mismo que si no se hubiese aplicado ninguna regla CSS, alaplicar esta propiedad a una caja, en el ejemplo a la sección, todos los elementos contenidos dentrode ella heredaran esta forma de posicionamiento.

21. Posicionamiento CSS Relative

El posicionamiento relativo es una variante del posicionamiento normal, es decir, las cajas secolocan siguiendo el flujo estándar que hemos explicado en el posicionamiento estatic, perocontamos con las las propiedades top, bottom, left y right que nos van a permitir modificar laposición de la caja. A estas propiedades le indicamos en px que distancia queremos separar la cajade la posición original que debería ocupar según un flujo estándar.

La propiedad top se emplea para mover las cajas de forma descendente, la propiedad bottommueve las cajas de forma ascendente, la propiedad left se utiliza para desplazar las cajas hacia laderecha y la propiedad right mueve las cajas hacia la izquierda. Este comportamiento parece pocointuitivo y es causa de errores cuando se empiezan a diseñar páginas con CSS. Si se utilizan valoresnegativos en estas propiedades su efecto es justamente el inverso.

27


El desplazamiento relativo de una caja no afecta al resto de cajas adyacentes, que se muestran en la misma posición que si la caja desplazada no se hubiera movido de su posición original

En la siguiente imagen podemos ver como quedaría la distribución de una pantalla con cuatrocajas, en la que la caja 2 ha sido colocada utilizando un posicionamiento relativo.

Como podemos ver al mover la caja2 el resto de la cajas continúan en su posicionamiento pordefecto, es decir, no se rellena el espacio que ha dejado la caja2 al moverse. También podemosobservar que la caja 2 se posiciona sobre el contenido de las caja3 y caja4 produciendo unsolapamiento de sus contenidos.


22.Posicionamiento CSS AbsoluteSi se especifica position absolute, la posición de una caja se establece de forma absoluta respecto

a su elemento contenedor y el resto de elementos de la página la ignoran, de forma que siguen ladistribución establecida en el flujo normal como si la caja que hemos cambiado de posición noexistiese. Al igual que con el posicionamiento relativo si no lo realizamos correctamente se puedeproducir un solapamiento de los contenidos.

Para especificar un posicionamiento absoluto se utilizan las propiedades top, bottom, left o right.La interpretación de los valores de estas propiedades es mucho más compleja que en elposicionamiento relativo, ya que en este caso dependen del posicionamiento del elementocontenedor.

Determinar la referencia utilizada para interpretar los valores top, bottom, left y right de una cajaposicionada de forma absoluta es un proceso complejo que se compone de los siguientes pasos:

• Se recorren todos los elementos contenedores empezando por el más cercano a la caja y llegando hasta el <body>

• El primer elemento contenedor que esté posicionado de cualquier forma diferente aposition:estatic se convierte en la referencia que determina la posición de la cajaposicionada de forma absoluta.

• Si ningún elemento contenedor está posicionado, la referencia es la ventana del navegador,que no debe confundirse con el elemento <body> de la página.

28


Una vez determinada la referencia del posicionamiento absoluto, la interpretación de los valores de estas propiedades se realiza como sigue:

• El valor de la propiedad top indica el desplazamiento desde el borde superior de la cajahasta el borde superior del elemento contenedor que se utiliza como referencia.

• El valor de la propiedad right indica el desplazamiento desde el borde derecho de la caja hasta el borde derecho del elemento contenedor que se utiliza como referencia.

• El valor de la propiedad bottom indica el desplazamiento desde el borde inferior de la caja hasta el borde inferior del elemento contenedor que se utiliza como referencia.

• El valor de la propiedad left indica el desplazamiento desde el borde izquierdo de la cajahasta el borde izquierdo del elemento contenedor que se utiliza como referencia.

En la imagen siguiente podremos ver como se verá la distribución de una pantalla con 4 cajas en laque una de ellas, la caja2, se ha posicionado utilizando el posicionamiento absoluto.

Como podemos comprobar en este tipo de posicionamiento sí se cubre con otro contenido, lacaja3, el espacio que ha dejado vacío la caja2 al modificar su posicionamiento por defecto, y aligual que en el posicionamiento relativo se produce un solapamiento de los contenidos de la caja2sobre el resto de cajas que mantienen el posicionamiento estático establecido por defecto.


23. Posicionamiento CSS FijoEl posicionamiento fijo es una variante del posicionamiento absoluto que convierte a una caja en

un elemento inamovible, de forma que no variará su posición aún cuando el usuario haga scroll enla pantalla. No vamos a incluir un ejemplo de este tipo de posicionamiento porque en principio enpantalla no vamos a notar ninguna diferencia con respecto al posicionamiento absoluto, solo cuandohacemos scroll, es decir, subimos o bajamos la pantalla comprobaremos que todo se mueve exceptola caja que hemos posicionado de forma fija. Este posicionamiento se utiliza para definir“marquesinas”, cajas que se sitúan normalmente en la parte superior de la página web y que suelencontener información que es importante mantener visible de forma continua en la pantalla.

Si la página se visualiza en un medio paginado (por ejemplo en una impresora) las cajasposicionadas de forma fija se repiten en todas las páginas. Esta característica puede ser útil paracrear encabezados o pies de página en páginas HTML preparadas para imprimir.

29


Ejemplo:

#caja4 { position:fixed; top:0; right:0; width:200px;}

24.Posicionamiento CSS Relative + Absolute

Si especificas la posición de un div de forma relativa, todos los elementos contenidos dentro deese div se posicionaran relativamente respecto a él, es decir, toman como punto de referencia al divque los contiene. Cuando posicionas una caja (caja2), con posicionamiento absoluto dentro de otracaja (caja1) con posicionamiento relativo la caja2 tomará como referencia a la caja1 que lo contieney al mover la caja1 la caja2 se moverá para mantener la misma posición que ocupa respecto de lacaja1. Veamos el ejemplo:


25. Posicionamiento CSS FlotanteLos floats son probablemente una de los conceptos más complejos de entender, por que rompen contodo lo que hemos explicado anteriormente sobre la distribución de una página web, de echo sedefinen para romper el flujo estándar de una página. Lo que hacen los floats es alterar el flujo de lapágina, insertando en él un elemento de bloque. El efecto del float hace que ese elemento de bloque"flote" sobre el flujo normal de la página web en la posición que le indicamos. La propiedad floatpuede tomar los siguientes valores izquierda (left), a la derecha (right).

Ejemplo:.izquierda{

float:right;}

30


Cuando se posiciona una caja de forma flotantela caja deja de pertenecer al flujo normal de lapágina, lo que significa que el resto de cajasocupan el lugar dejado por la caja flotante. Lacaja1 se coloca lo más a la derecha posible,siempre y cuando no encuentre otra capa float.

Como podemos ver en la imagen, cuando hacemosque la caja 1 flote a la izquierda, la caja 2 va aocupar su lugar y se va a producir un solapamientode contenidos.

Cuando no hay espacio suficiente los elementos enlínea hacen sitio a las cajas flotantes adaptando suanchura al espacio libre dejado por la cajadesplazada. Los elementos de bloque no les hacensitio, pero sí que adaptan sus contenidos para queno se solapen con las cajas flotantes.

A veces cuando hacemos que un elemento "flote" aparecen efectos no deseados o inesperados, paraeliminar estos efectos podemos utilizar la propiedad clear que elimina el efecto de los floats. Estapropiedad puede tomar los valores izquierda (left), derecha (right) o ambos (both).

Ejemplo:.borra{

clear:both;}

31

26.Un ejemplo CSS de página web con una columna flotante

Para entender mejor los floats, vamos a definir un ejemplo más sencillo que con el que hemosestado trabajando hasta ahora. En este apartado vamos a definir la maquetación para una páginaweb con las siguientes características: anchura fija , centrado , 2 columnas (una de ellas de barralateral y la otra almacenará el contenido) ,cabecera (header ) ,pie de página (footer). En la siguienteimagen podemos ver en distintos colores todos las capas que componen nuestro diseño:

cabecera y pie: en color gris;

barra lateral: en color amarillo;

contenido principal: en color azul;

En este apartado vamos a ir incluyendo tanto el código html5 como el código CSS para crear estediseño.

1) Código html5 El esqueleto del código html5 de nuestra página es el siguiente (iría dentro del <body>) sería elsiguiente:

<div id="contenedor"> 

<header > 

<h1> La Informática </h1>

<h2> Fundamentos </h2>

</header>

32

<aside> 

<h3> Hardware </h3>

<p > Componentes físicos</p>

<h3> Software </h3>

<p > Componentes lógicos</p>

</aside>

<section> 

<h3> La informática: </h3>

<p> Es la ciencia encargada del .... </p>

<h3> El ordenador: </h3>

<p> Es la herramienta empleada .... </p>

</section>

<footer> 

<p> Página web realizar para los alumnos de 4º de la E.S.O. </p >

</footer>

</div>

2) Código CSSComo ves, tenemos cuatro capas. Ahora veremos el código CSS y las características de cada una deellas:

#contenedor : Esta capa es un contenedor para el resto de la página. Establece la anchura de todo yes la que centra el contenido. El truco está en usar auto dentro de margin para lograr el centrado. ElCSS completo es este:

body {

text - align : center ;

}

# contenedor {

width : 700 px ;

margin : 0 px auto ;

text - align : left ;

}

header: Esta es la cabecera de los contenidos de la página web. En esta sección se suelen colocar elmenú principal de la página web, con una lista de enlaces que nos permite acceder a todos loscontenidos de la misma.

33


header {

background-color:GREY;

}

aside: Esta es la barra lateral que suele aparecer en los blogs. En otras páginas web, podemos ponerahí menús, publicidad o cualquier otra cosa. La clave para crear esta capa esta en usar float: left,que la sitúa a la izquierda y hace que todos los demás elementos la rodeen. El código CSS es elsiguiente:

aside {

background-color:YELLOW;

width : 200 px ;

padding : 10 px ;

float : left ;

}

El padding no es obligatorio, pero lo he puesto para después poder explicar bien la siguiente capa.También es necesario especificar el ancho en píxeles. Ah, con este método la barra no se extenderáhasta abajo, sino que se corta en su final.

section: Esta es la capa donde irá el contenido (en un blog, esto serían los posts). Lo importante enesta capa es indicar con margin-left la distancia desde el borde del #container hasta esta capa,pasando por encima de la barra lateral. Nuestra barra lateral tiene 200 píxeles de ancho y 10 píxelesde padding a la izquierda y a la derecha. Si hacemos memoria del modelo de caja, el margenizquierdo que tenemos que indicar serían 200 + 10 + 10 + X, donde X es la cantidad que nosotrosqueremos dejar de separación entre la barra lateral y el contenido principal. Para el ejemplo,pondremos 5 píxeles:

section {

background-color:BLUE;

margin-left:225px ;

}

footer: La capa del pie de página viene bien para poner información de copyright/copyleft2 ocualquier otro tipo de datos misceláneos. Aquí únicamente hemos de tener cuidado de “anular” elfloat que tiene la barra lateral mediante un clear:

footer {

background-color:GREY;

clear : both ; }


34


27.Subimos nuestra web a un servidorComo ya hemos comprobado el desarrollo de una página web se realiza en modo local en nuestroordenador, primero escribimos el código y vamos visualizando la página web en nuestro navegador.Una vez que hemos terminado nuestro diseño tendremos que subir el contenido de nuestro sitio weba un servidor de Internet para hacerla accesible a todo el mundo.

En Internet existen multitud de servidores que ofrecen alojamiento web bien sea de pago o de formagratuita. Nosotros en este manual vamos a utilizar www.000webhost.com. Para conseguir espaciode almacenamiento para nuestra web necesitaremos seguir un proceso de registro muy sencillo en elque se nos solicitará los siguientes datos:

1. Un correo electrónico. 2. Una contraseña. 3. El nombre que queremos ponerle a nuestro sitio web. 4. Contestar a un correo de confirmación que nos solicitará.

Una vez completado el proceso de registro podremos cambiar el idioma de entorno para trabajarmás cómodo si tenemos problemas con el inglés.

Para crear nuestro sitio web realizaremos los pasos siguientes:

1. Seleccionamos el icono que nos permite crear un nuevo sitio web.

2. Seleccionamos el nombre del sitio web y la contraseña para administrar nuestro sitio, quepuede ser igual o distinta a la que hemos introducido al darnos de alta en el servicio.

3. Seleccionamos la opción Subir Sitio Web Propio

4. Introducimos de nuevo el nombre del sitio web y su contraseña ya en nos está redirigiendoal servidor FTP que es el que nos va a permitir subir los ficheros.

5. Buscamos la carpeta public_html y subimos los archivos. La primera página de nuestro sitiodebe llamarse index.html y debemos recrear la misma estructura de carpeta que hemosusado en nuestro ordenador local para nuestro sitio web funcione.

El dominio de nuestra web se formará con el nombre que hayamos elegido para nuestro sitio mas00webhostapp.com, es decir, si hemos elegido como nombre de nuestra web ticiesaguilarycano elnombre de dominio de nuestra web será ticiesaguilarycano.00webhostapp.com.

Para borrar un sitio web que hayamos creado, debemos tener en cuenta que con el plan gratuito solonos permite tener dos sitos web y que los dominios que borremos ya no podrán volver a serutilizados, debemos realizar los pasos siguientes:

35

http://www.000webhost.com/


1. Accedemos al icono mis sitios web

2. Accedemos al icono administrar sitio web del dominio que queremos borrar

3. Seleccionar el menú ajustes/general

4. Seleccionar el icono borrar el sitio web que se encuentra al final de la pantalla de ajustes.Nos mostrará un mensaje de advertencia y nos volverá a pedir confirmación para el borrado.

EJERCICIOS1º) Construye una página web sobre un cantante de tu gusto con las siguientes características:

1. Deberá tener un título principal (h1) 2. Un primer apartado con la biografía del cantante:

a) h2 para el título. b) texto en párrafos para la información.

3. Una línea horizontal que divide el primer del segundo apartado 4. Un segundo apartado con la discografía del cantante

a) h2 para el título. b) texto en párrafos para la información.

2º)Modifica la página del ejercicio 1 de la siguiente manera: a) Crea una carpeta con el nombre ejercicio2, mete dentro de la carpeta el fichero del

ejercicio1 y cambia su nombre a index.html b) Crea una nueva página que hable sobre tí, con las siguientes características:

• Nombre del fichero acercade.html, debes ponerlo dentro de la carpeta ejercicio2• Título h1 “A CERCA DEL ADMINISTRADOR”• Párrafos hablando sobre tí y por qué te gusta este grupo o cantante.• Enlace a tu dirección de correo electrónico.

c) Crea un enlace desde la página principal a la página acercade.html. d) Crea un enlace desde la página acercade.html a la página principal. e) Crea un enlace desde la página principal a la página oficial del grupo o cantante. f) Crea un enlace desde el final de la página acercade.html al principio de la misma, rellena

con saltos de línea los espacios vacíos para comprobar que funciona este enlace.

3º) Escribe el código html5 de las siguientes listas:

36

● Software propietario

● Software shareware

● Software freeware

● Software libre

1. Componentes del hardware

● CPU

● Memoria RAM

2. Componentes del Software


4º) Construye una página web con las siguientes características: 1. Un título principal (h1) “Componentes del ordenador” 2. Una lista como la siguiente:

1. Hardware● CPU● Periféricos

2. Software● Sistemas Operativos● Programas de Usuario

3. Una línea horizontal 4. Una lista como la siguiente:

1. Periféricos● Entrada

● Teclado ● Ratón

● Salida● Pantalla● Impresora

2. Torre● CPU● RAM

5. Un enlace a una página de la wikipedia que hable sobre el ordenador.

5º)Analiza el siguiente código html5, arregla los 3 errores sintácticos y dibuja como se mostraría la página en el navegador.

10 <body>20 <h1>Componentes del ordenador </h1> 30 <ul>40 <li> HARDWARE 50 <ol> <li> CPU </li>60 <li> RAM </li>70 </ul>80 </li>90 <li> SOFTWARE </li>100 <ol>110 <li> SISTEMAS OPERATIVOS </li>120 <li> PROGRAMAS DE USUARIO </li>130 </ol>140 </ul>150 </body> < - - fin del cuerpo de la página web - - >

37

6º) Escribe el código html5 para la siguiente lista de definición:Hardware:

Componentes físicos del ordenador, los que se pueden tocar.

PROCESADOR O CPU:Principal componente del ordenador, realiza las tareas

MEMORIA RAM:Almacena los datos para hacer los cálculos

Software:Componentes lógicos del ordenador, los programas.

7º) Debes construir un sitio web sobre los elementos hardware del ordenador con las siguientes páginas:

1. Página principal llamada index.html con las siguientes características: 1.1. Deberá tener un título principal "CPU" (h1). 1.2. Una lista desordenada con los siguientes apartados:

• Imagen de la CPU (debes colocarla en una carpeta llamada imagenes)• Definición en un párrafo• Modelos y fabricantes en un párrafo

1.3. Un enlace desde esta página a la página secundaria definida en el siguiente apartado.

2. Una página secundaria llamada secundaria.html con las siguientes características: 2.1. Deberá tener un título principal "RAM" (h1) 2.2. Una lista desordenada con los siguientes apartados:

• Imagen de la memoria RAM (debes colocarla en la carpeta imagenes)• texto en párrafos con la definición y capacidades actuales.

b) Un enlace desde la página secundaria a la página principal.8º) Analiza el siguiente código html5, arregla los 5 errores sintácticos e indica la función de cadauna de las líneas numeradas, no olvides comentar los atributos de las etiquetas.

1 <body >2 <h1> INFORME DE FACTURACIÓN </h1>3 <p>

Hemos incluido en este informe cada una de las facturas que la empresa ha realizado a lo largo del segundo trimestre del año

4 </p>5 <img src=”imagenes/factura.jpg” width=100” height=”100”

title=”imagen de las facturas realizadas” />6 <hr />7 <a href=”http://www.facturasempresa.segundotrimestre.html” alt=”facturas”>

acceso al detalle de las facturas8 </a>9 <!-- fin del cuerpo de la web ->10 <body>

38

http://www.facturasempresa.segundotrimestre.html/


9º)Analiza las siguientes líneas de código, arregla los errores 2 sintácticos e indica la función decada una de ellas.

<a href=”http://www.linuxyeso.wikispaces.com” alt=”apuntes”><img src=”imagenes/web.jpg” width=”25%” height=”25%” title=”imagen de la web linux y eso” />

</a>

10º) Escribe el código html5 para las siguientes tablas:a)

Notas del Curso

Nombre 1º Trimestre 2º Trimestre

Maria 7 5

Juan 9 7

Antonio 3 5b)

Nombre Notas

Maria 1º Trimestre -> 5

2º Trimestre -> 7

Juan1º Trimestre -> 2

2º Trimestre ->5

c)Componente Descripción

RAM Enlace a la web del curso

CPU Enlace a la web del curso

11º) Añade una hoja de estilos con el nombre ejercicio11.css a los ejercicios 1 y 2 con las siguientescaracterísticas:

a) Todas las páginas deberán tener un color de fondo y color de textob) Todos los títulos (h1) deberán estar centrados y subrayados.c) Todos los subtítulos (h2) deberán estar centrados y en cursiva.d) Todos los párrafos de texto deberán tener alineación justificada.e) Utiliza en cada ejercicios distintos tipos de letra (comic, times, arial, etc..)

39

http://www.linuxyeso.wikispaces.com/




12º) Añade una hoja de estilos con el nombre ejercicio12.css a los ejercicios 3 y 4 con las siguientes características

a) Todas las listas desordenadas aparecerán con color de texto #1E90FFb) Todas las listas ordenadas aparecerán con color de texto #0000FF (rompe la anidación para separar los colores de las listas)c) Todos los títulos (h1, h2) aparecerán centrados, subrayados y con un el tipo de letra "comic sans ms"

13º) Añade una hoja de estilos con el nombre ejercicio13.css al ejercicio 7 con las siguientescaracterísticas:

a) La página principal tendrá como fondo la imagen fondo.jpg que se repetirá como un mosaico, un color para el texto #A020F0. b) Los títulos (h1) irán centrados, subrayados y de un color diferente al del texto.c) Saca las imágenes fuera de las listas y céntralas.d) Todos los párrafos irán con alineación justificada.

14º) Añade una hoja de estilos con el nombre ejercicio14.css al ejercicio 10 con las siguientescaracterísticas:

a) Colocamos un título centrado subrayado de color azul con el texto "Ejemplo de tablas"b) Colocamos un título <caption> para cada tabla en cursiva y con los siguientes colores: azul, amarillo, verde, con los textos "1º tabla", "2º tabla", "3º tabla"c) Centramos todas las tablasd) Al final de la página pondremos un enlace para volver al inicio.e) Todas las notas de los alumnos menores que 5 saldrán en rojo.f) El nombre del alumno con mayor nota media aparecerá en azul.

15º) Crea un sitio web en una carpeta con el nombre ejercicio15 para crear tu currículum quedeberá tener las siguientes características:

a) Tu foto en la parte superior izquierda y tamaño 100, si no tienes tu foto puedes usar cualquier otra imagen.

b) Un título h2 centrado y subrayado “Currículum Vitae”. Utiliza un identificador para que el color de este título sea diferente al color del resto del texto.

c) Utilizando una lista de definición introduce tus datos personales: (los textos irán en negrita y las definiciones no)• Nombre y apellidos• Dirección completa• Teléfono• Email

d) Utilizando una lista desordenada externa y ordenada interna introduce tu formación y tu experiencia profesional, conocimientos en idiomas y en informática.

e) Convierte tu email en un enlace a la dirección de correo. f) Crea al final de cada apartado un enlace al principio de la página. g) Utiliza clases para que los textos de los títulos sean del tipo “comic sans”, cursiva y

subrayados.

40


16º) Analiza el siguiente código html e indica la función de cada una de las etiquetas que aparecenen él. No olvides comentar los atributos de las etiquetas:

<style> . especial {

text-decoration:underline;color: BLUE;

}# apartado {

text-align: justify; }

</style>

17º)Analiza las siguientes líneas de código e indica la función de cada de ellas incluyendo susatributos

a) <p id=”alprincipio”>b) <a href=”#alprincipio” title=”inicio”>c) <a href=”mailto:[email protected]” title=”contacta”>d) <img src=”imagenes/uno.jpg” alt=”imagen del número 1” />

18º) Corrige los errores sintácticos de las siguientes líneas de código:

a) <a href=”#inicio” title=”volver al inicio”>

b) <div ALIGN=”JUSTIFY /><p>

Este texto aparecerá justificado</p>

19º) Crea un sitio web en una carpeta con el nombre ejercicio19 con las siguientes características:* Página principal:a) Título principal "La informática". El cuerpo tendra como fondo la imagen "fondo.jpg" quese repetirá como un mosaico y se verá siempre en pantalla. b) Subtítulo "El hardware" aparecerá centrado y subrayado y con un color de texto diferente al del resto de texto de la página.c) Párrafo con alineación justificada con la definición del hardware.d) Título tamaño h3, "Componentes del hardware", centrado subrayado y cursiva.e) Lista desordenada externa y ordenada interna con los siguientes componentes:

* Torre1º.- Procesador2º.- RAM3º.- Puerto

* Periféricos1º Entrada2º Salida3º Almacenamiento

41

mailto:[email protected]


f) Los componentes principales (RAM y Procesador) irán en negrita y con un color diferenteal resto del texto.f) Tabla centrada respecto a la pantalla con las siguientes carácterísticas:

1º columna "componente": contendrá una imagen del componente y su nombre que aparecerá debajo de la imagen y centrado, 2º columna "descripción": contendrá un texto con alineación justificada con la

descripción del componente 3º columna "enlace a la wikipedia": contendrá un enlace a la wiki que define dicho

componente.g) Las celdas cabecera de la tabla aparecerán con un color de texto diferente al resto del texto de la tablaf) Enlace a una página secundaria.html h) Enlace al principio de la página web

* Página secundaria:a) Título principal "La informática". El cuerpo tendra como fondo la imagen "fondo.jpg" quese repetirá como un mosaico y se verá siempre en pantalla. b) Subtítulo "El software" aparecerá centrado y subrayado y con un color de texto diferente al del resto de texto de la página.c) Párrafo con alineación justificada con la definición del software.d) Título tamaño h3, "Componentes del software", centrado subrayado y cursiva.e) Lista de definición con los siguientes elementos:

Sistemas Operativos:Párrafo con la definición de los sistemas operativosLista de imágenes con tamaño 25x25 con los logos de los sistemas operativos que sirvan como enlace a la página oficial del sistema operativo

Programas de usuario:Párrafo con la definición de los programas de usuarios.Lista de mágenes con tamaño 25x25 con los logos de los programas de usuario microsoft office y open office que sirvan como enlace a la página oficial de dichos programas.

20º) Realiza una página web con el nombre ejercicio20.html con las siguientes características:a) La página tendrá una imagen de fondo, (consigue alguna imagen que se a una trama y no afecteal contenido de la página web), que se repetirá como un mosaico, color de texto y tipo de letra (losque tu elijas).b) Título principal (h1) “Dispositivos móviles”, centrada, subrayada y con un color de textodiferente al que has establecido en el apartado anterior.c) Párrafo introductorio sobre el contenidos de la web (hardware de smartphones y tablets)d) Lista de definición con los siguientes conceptos: smartphone, tablet. Los textos de lasdefiniciones aparecerán en el mismo color que el título principal.e) Tabla con al menos 4 filas (2 cabecera, 2 datos) y las siguientes características:

Título de la tabla: “Modelos de Smartphones”, con tamaño 10px.Dos columnas con la siguiente información:

Componente: se mostrará una foto del modelo de smartphone (50 x 50px)y debajo su nombre, ambos centrados. Características. Se introducirá un texto con su características, con alineación justificada.

f) Un enlace a la página web del curso donde están los apuntes del hardware

42


21º)Modifica el ejercicio anterior y añade un enlace de contacto a tu dirección de correo que semuestre en negrita y en color negro cuando el usuario coloque el cursor encima de él.

22º) Crea una página web con las siguientes listas:a) Lista desordenada con todos los componentes del hardware de un smartphone, en el que se muestre una imagen como viñeta (20x20).b) Modifica la lista anterior para que se muestre sin viñetas.

23º) Crea una tabla como la que se muestra en la siguiente imagen:

Debes tener en cuenta las siguientes características:a) Grosor del borde 2px.b) Separación entre el texto y el borde de la celda 5px.c) Color del texto marrón.d) Todos los datos están centrados excepto los nombres de los alumnos.

24º) Crea una tabla como la que se muestra en la siguiente imagen:

Debes tener en cuenta las siguientes características:a) Grosor del borde 5px.b) Tamaño de la letra del pie 0.5em

25º) Crea un sitio web en una carpeta con el nombre ejercicio25 con las siguientes característicasa) Coloca un título (h1) centrado y subrayado con el texto “Multimedia”b) Descarga de internet un anuncio de un smartphone y guárdalo en una carpeta con el nombre imagenes que tendrás que crear dentro de la carpeta ejercicio25.c) Inserta el vídeo en la web con un tamaño de ventana igual al tamaño real.d) Descarga de internet un fichero de audio formato ogg (el que tu quieras) y guárdalo en la misma carpeta en la que has guardado el vídeo.e) Inserta el fichero de audio en la web con los controles para poder reproducirlo.

43


26º) Modifica el ejercicio anterior para que se muestre una vídeo en formato webm, como formatoalternativo al mp4 y un audio mp3 alternativo al formato ogg.

27º) Utilizando el modelo de caja y la propiedad display realiza una sitio web con el nombreejercicio27 que muestre por pantalla el siguiente ejemplo:

Debes tener en cuenta las siguientes características:a) Las capas miden 50px de alto y 50px de ancho.b) El color del relleno es GREY;c) La distancia del borde al contenido es de 25px.d) Las capas están separadas entre sí 10px.

28º) Utilizando el modelo de caja y la propiedad display realiza una sitio web con el nombreejercicio28 que muestre por pantalla el siguiente ejemplo:

29º) Utilizando el posicionamiento relativo para las capas (div) realiza el siguiente ejemplo:

Debes tener en cuenta las siguientes características:a) Las capas miden 50px de alto y 50px de ancho.b) El color del relleno es GREY;c) La distancia del borde al contenido es de 25px.d) Las capas están separadas entre sí 10px.

44


30) Utilizando posicionamiento relativo, realiza el siguiente ejemplo:

Debes tener en cuenta las siguientes características:a) La imagen mide 100x100 px.b) El texto está definido como título (h1) y cursiva, está centrado respecto al ancho de la página enla horizontal y el alto de la imagen en la vertical.

31) Realiza el ejercicio 27 utilizando posicionamiento absoluto

32) Realiza el ejercicio 28 utilizando posicionamiento absoluto

33) Realiza el siguiente ejemplo utilizando una capa cabecera con posicionamiento fijo, quecontiene la imagen y el texto, de forma que al hacer scroll la cabecera de la página no se mueva.

Debes tener en cuenta las siguientes características:a) La imagen mide 100x100 píxeles.b) La anchura de la capa cabecera es del 100% y 23% de alto, y el color de fondo GREY, el margensuperior es de -16pxc) El título (h1) está situado con posicionamiento relativo respecto a la capa, centrado en lahorizontal respecto a la página y en la vertical respecto a la imagen.

34) Realiza el siguiente ejemplo creando una capa que llamaremos “gris” quecontendrá en su interior que llamaremos “amarillo”, de forma que la capa grisesté posicionado de forma relativa y la capa amarilla esté posicionado de formaabsoluta.Para realizar el ejemplo debes tener en cuenta los datos siguientes:a)La caja gris mide 150x150 píxelesb)La caja amarilla mide 50x50 píxeles.

35) Repite el ejercicio 33 utilizando posicionamiento flotante a la izquierda para la cabecera, reduceel tamaño de la cabecera al 50% y comprueba como el texto de la etiqueta section modifica sudistribución para adaptarse a la posición que ocupa la cabecera flotante.

45


36) Utilizando posicionamiento flotante crea un párrafo con una letra capitular como el siguiente.

a palabra informática se forma por la unión de otras dos información y automática, así lainformática es la ciencia encargada realizar el tratamiento automático de los datos, paraello utiliza una herramienta que es el ordenador. Hoy en día han surgido nuevas

herramientas para el tratamiento automático de los datos como son el smartphone y las tablets.L37) Siguiendo el código incluido en el apartado 26 “CSS: Un ejemplo de página web con unacolumna flotante”, realiza el siguiente ejemplo, teniendo en cuenta las siguientes características:

a) La imagen de fondo “binario.jpg”, que ocupa el 100% de la pantalla, no se repite y se mueve conel texto.b) El color del texto es BLUE.c) Define la capa “marco”, que va a almacenar el resto de capas de nuestra web con una anchuradel 90% y color del fondo “B0C4DE”.d) Define la capa section con una anchura del 60%, alineación del texto justificada y una distanciadel contenido al borde de 10px, el tamaño del texto es de 1.5em.e) Define una capa aside con una anchura del 30% y margen izquierdo del 65% y una distancia delborde al texto de 30px vertical y 10px horizontal.f) Define una capa foot con una anchura del 90% y tamaño del texto 0,7em.g)Define una capa figcaption que contenga la foto que debe medir 200px de alto y 100% del anchoy el pie de foto con alineación centrada, estilo de borde sólido y tamaño del texto 0,5em.La siguiente imagen te puede ayudar a realizar el ejercicio.

46

manual de html5 + css3 · css3 es la tercera revisión de css. las siglas css significan cascading...

Documents