Apuntes Web Xhtml Css

Tecnología 3ºESO. Apuntes de diseño de páginas web con XHTML y CSS

danipartal.net – Departamento de Tecnología. Colegio María Auxiliadora de Salamanca

1

Estos apuntes son un complemento a la explicación del profesor y al trabajo diario en la

asignatura.

Es fundamental completar estos apuntes con el cuaderno de clase.

Los apuntes y el cuaderno de clase llevado al día contienen los contenidos a trabajar en esta

unidad.

Los términos resaltados en verde y en cursiva forman parte del vocabulario de la asignatura,

publicado en la web y en el aula virtual.

Tecnología 3ºESO. Unidad 1

Diseño de páginas web

1. ¿Qué es internet?

Internet es una red formada por multitud de ordenadores repartidos por todo el mundo e

interconectados entre sí. La interconexión entre ordenadores de distintas marcas, que utilizan

una gran variedad de sistemas operativos, es posible gracias al protocolo de comunicaciones

TCP/IP. Cada ordenador posee un número IP que lo distingue del resto de ordenadores

conectados a Internet.

Una de las características del protocolo TCP/IP es que divide la información en pequeños

subconjuntos llamados paquetes y les añade a cada uno de ellos una cabecera que posee las

direcciones de origen y destino. Cada paquete es completamente independiente de los

demás, y puede seguir una ruta diferente hasta su destino. De este modo se consigue que un

error en una ruta determinada no afecte al resto de la comunicación.

imagen tomada de www.desarrolloweb.com

Como el cliente y el servidor siguen el mismo protocolo, consiguen entenderse y las

peticiones del cliente son atendidas. El servidor responde al cliente. Pero una vez que el



2

cliente recibe los paquetes de información, debe interpretar esta información y

mostrarla de modo adecuado. Esto es posible porque las páginas web están escritas en un

lenguaje estándar que pueden entender todos los ordenadores: el lenguaje HTML (Hypertext

Markup Language, que se traduce por “Lenguaje para el Formato de Documentos de

Hipertexto”).

Con el lenguaje HTML se tiene un lenguaje común para todos los ordenadores y

todos los navegadores. No obstante siempre aparecen pequeñas diferencias entre navegadores

de empresas distintas (por ejemplo, prueba a ver una página Web con el navegador Internet

Explorer y compara el resultado cuando se ve con Mozilla Firefox, Chrome, Safari u Opera).

Para minimizar estas diferencias, existe un organismo: el W3C (World Wide Web

Consortium), fundado en octubre de 1994 para garantizar la unificación de todos los

programas y navegadores que trabajan en Internet. Este organismo, entre otras múltiples

actividades, marca las sugerencias para trabajar con el lenguaje HTML.

Con HTML podemos introducir texto, hipervínculos que conducen a otros

documentos o a otras páginas web, insertar contenidos multimedia (imágenes, sonido…),

crear formularios de contacto, etc.

¿Cómo consigue HTML manejar todos estos elementos? La respuesta es la siguiente: con

etiquetas. Si HTML es un lenguaje de programación, las etiquetas de HTML son como las

“palabras” para poder hablar ese lenguaje. Aprender a usar correctamente las etiquetas

implica aprender a programar en HTML.

HTML fue la base de la programación web en los primeros años de internet. En 1990 nace

internet como nosotros lo conocemos más o menos hoy en día, bajo el nombre común de

World Wide Web (WWW) o telaraña mundial. Pero los primeros desarrollos informáticos,

físicos y matemáticos que dieron lugar a internet se remontan a los años 60.

Con el paso del tiempo, surgieron nuevos lenguajes de programación para transferir la

información por internet. La unión del lenguaje XML (no vamos a entrar en este lenguaje,

sólo nombrarlo) y HTML dio lugar a lo que hoy conocemos como lenguaje XHTML.

La principal virtud de este nuevo lenguaje XHTML es que permite la correcta

interconexión no sólo de los primeros ordenadores que surgieron a lo largo del siglo XX, sino

también de todos los modernos dispositivos actuales: tabletas, teléfonos, televisores con

conexión a internet, ordenadores de última generación, etc.

Además, con XHTML, se consigue que el contenido de la información se redacte

prácticamente igual que con las antiguas etiquetas HTML, mientras que la apariencia o estilo

de la información (colores, imágenes de fondo, dimensiones, etc.) se controla con otro

lenguaje llamado CSS (Cascading Style Sheets, que se traduce por “Hojas de Estilo en

Cascada”) cuya sintaxis es muy sencilla. El W3C también controla los estándares que deben

cumplir los navegadores a la hora de interpretar las instrucciones del lenguaje CSS.

Veremos, a lo largo del tema, que esta separación de contenido y estilo es realmente

cómoda a la hora de crear páginas web.

Por último, para terminar esta presentación de internet y de las páginas web, diremos que

las páginas que encontramos por la red suelen clasificarse en estáticas y dinámicas. Las

estáticas son aquellas cuyo contenido no interactúa con el usuario (el contenido es estático).

Las dinámicas son aquellas en las que el contenido de la web se modifica y/o actualiza en

función de las selecciones del usuario.

Nosotros, en esta unidad, vamos a aprender a crear páginas web estáticas. No obstante,

como culturilla general, nombraremos algunos lenguajes de programación que, unidos a

XHTML y CSS, permiten hacer las páginas dinámicas: PHP, ASP, Java o JavaScript son sólo

unos ejemplos.

Es posible que también hayas oído hablar de páginas web creadas con FLASH o con

HTML5, que aportan gran interacción y diseños muy llamativos. Baste nombrarlos para

hacernos una idea de la infinidad de soluciones tecnológicas que puede haber detrás de

cualquier página web.



3

2. Estructura de un documento XHTML

Un simple documento de texto que contenga etiquetas de XHTML se llama

documento XHTML. Cuando este documento es procesado por un programa navegador lo

que aparece en la pantalla de nuestro ordenador es una página web.

Comentemos un poco este último párrafo: si estamos hablando de un documento de texto,

esto quiere decir que para escribir las etiquetas tan sólo necesitamos un editor de texto.

Nosotros vamos a utilizar el Bloc de Notas o el WordPad, que son programas muy sencillos

para escribir texto (estos programas se conocen como Editores de Texto Plano, a diferencia

del procesador de texto Word donde el texto está “enriquecido” por las características del

programa).

Como deseamos que el documento XHTML se pueda ver con un navegador, necesitamos

guardar el archivo de texto con la extensión .html. Con la extensión .html nuestro

ordenador reconoce que tenemos una página web y abrirá el archivo con el navegador

activado por defecto en el ordenador.

Y ya tenemos una página web. Así de sencillo. Aunque este archivo sólo sea visible en el

ordenador donde se ha creado, ya es una página web. Si el archivo estuviese almacenado en

un ordenador servidor y supiéramos la dirección url (uniform resource locator, traducido

por “localizador de recursos uniforme”) para acceder al archivo, podríamos verlo desde

cualquier ordenador del mundo con conexión a internet. El conjunto de instrucciones que forman cualquier archivo de programación se llama

código fuente. En el caso de una página web, el conjunto de etiquetas que forman la

estructura de la web es el código fuente de la página.

Si deseamos modificar el código fuente de una página web almacenada en nuestro

ordenador, debemos abrir el archivo con el Bloc de Notas. Muy importante (para evitar

errores en el futuro): si tengo un archivo .html abierto con el navegador y deseo modificar su

código fuente, debo abrir ese mismo archivo con el Bloc de Notas, guardar las modificaciones

y recargar nuevamente la ventana del navegador.

El código fuente de toda página web con XHTML comienza con una etiqueta

tremendamente larga, cuya explicación excede los objetivos de la asignatura. Simplemente la

voy a poner en los apuntes para que la tengamos siempre a mano.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Basta con que sepamos que esta etiqueta que empieza con <!DOCTYPE debe ser la

primera instrucción del código fuente e informa al navegador de la versión del lenguaje

XHTML que vamos a emplear y que las normas de estilo van a estar contenidas en

instrucciones CSS.

Después de esta instrucción inicial debemos saber que el inicio de la web lo marca la

etiqueta <html> y el final de la web lo marca la etiqueta </html> (fíjate en la contrabarra /

que diferencia la etiqueta de cierre de la etiqueta de apertura).



4

Entre estas dos etiquetas aparece la “cabeza” de la web y el “cuerpo” de la web. La cabeza

viene delimitada por <head> y </head> mientras que el cuerpo lo está por <body> y

</body>. Veremos más adelante que prácticamente toda la información de la web que vamos

a aprender a crear en esta unidad, la vamos a introducir en el cuerpo.

Ejercicios prácticos para la sala de informática. Cuando realices alguno de los

ejercicios, avisa al profesor para que pueda verificar que lo tienes bien.

a. Crea tu primera página web. Si lo deseas puedes copiar el código fuente de la imagen

de la página anterior de los apuntes.

b. Una vez que consigas ver correctamente el contenido de la página en un navegador,

prueba a modificar el código fuente y a recargar el navegador (puedes, simplemente,

cambiar el texto que aparece en el body).

c. Prueba a introducir el siguiente código en la cabecera de la web:

<title>Título de la web</title> Guarda los cambios y recarga el navegador. ¿Qué cambios se han producido?

d. Envíate a ti mismo, por email, el archivo .html que contiene el código fuente de la

web. Comprueba que te llega correctamente a la bandeja de entrada, que lo puedes

descargar y que lo puedes abrir nuevamente, mostrándose correctamente la web.

Si sabes hacer esto, ya conoces la manera de mandarte por email el trabajo que

realices en la sala de informática para poder continuarlo desde casa, y viceversa.

e. Visita cualquier página web publicada en internet y, con las opciones del navegador,

visualiza el código fuente de la página. ¿Qué ves? ¿Te parece fácil o difícil escribir

todo ese código?

f. Por último, en esta primera toma de contacto, elimina la instrucción </html> del final

del código de tu archivo. Guarda el archivo y recarga el navegador. ¿Qué ocurre?

¿Sigue viéndose la web?



5

3. Más etiquetas XHTML

Vamos a ir trabajando, poco a poco, con las etiquetas fundamentales de XHTML.

Es materialmente imposible que veamos, en esta unidad, todas las etiquetas válidas para

XHTML. Como referencia a todas las opciones de este lenguaje, te remito a la excelente web:

http://www.w3schools.com

Es un portal web (en inglés, ya te aviso) con información completísima sobre XHTML y

CSS. Verás que buena parte de la información sobre XHTML está incluida dentro de las

opciones de HTML. Como explicamos en el primer capítulo, XHTML es una evolución del

lenguaje HTML.

En castellano puedes visitar el siguiente portal:

http://www.desarrolloweb.com

Tienen un boletín semanal, al que te puedes suscribir, que todas las semanas te informa

por email de novedades de la web y curiosidades para programadores.

Por último, para que siempre tengamos disponible un editor online donde probar código,

puedes usar:

http://www.onlinehtmleditor.net

Es un editor online donde puedes probar las etiquetas y contenido que estén dentro del

cuerpo de tu web (es decir, entre <body> y </body>). Para aprender bien siempre te

recomiendo que programes inicialmente con el Bloc de Notas y, más adelante, cuando

tengas más soltura puedes a usar este editor online u otro cualquiera que encuentres por la red

o que puedas instalar en tu ordenador.

Pues nada, manos a la obra. Conozcamos más etiquetas. Entre paréntesis presento la

expresión en inglés que da nombre a la etiqueta.

<br/> (break)

Introduce un salto de línea. No tiene etiqueta de apertura, sólo de cierre.

<p>Contenido de la web</p> (paragraph)

Genera un párrafo y produce dos saltos de línea respecto al contenido que le precede.

<hr/> (horizontal rule)

Introduce una línea horizontal en una nueva línea. No tiene etiqueta de apertura, sólo de

cierre.

<b>Contenido de la web</b> (bold)

Pone el texto en negrita

<i>Contenido de la web</i> (italic)

Pone el texto en negrita

<h1>Contenido de la web</h1> (heading)

Crea un titular, con un tamaño de letra predefinido por cada navegador. Existen titulares

h2, h3, h4, h5 y h6 que funcionan exactamente igual, con la única diferencia que h1 muestra

el texto en un amaño mayor que h2, y éste a su vez mayor que h3… y así hasta llegar a h6.

Además, los titulares introducen un cambio de párrafo. Aprenderemos, con CSS, a modificar

http://www.w3schools.com/

http://www.desarrolloweb.com/

http://www.onlinehtmleditor.net/



6

el tamaño de letra definido por defecto para estos titulares y los márgenes que aplican al

cambiar de párrafo.

Bueno, con estas primeras etiquetas tenemos para entretenernos un rato. A continuación te

presento el código fuente de una página muy sencillita, que emplea algunas de las etiquetas

que acabamos de aprender, y a continuación cómo se ve en el navegador Mozilla Firefox.



a. Copia el código fuente de la imagen superior y cárgalo con un navegador. ¿Por qué la

separación entre la primera línea de texto y la segunda es distinta a la separación entre

la segunda y la tercera, o entre la tercera y la cuarta?

b. Prueba a modificar el texto, a introducir alguna etiqueta nueva, etc. ¿Se carga todo

correctamente en el navegador, tras realizar tus modificaciones?

c. ¿Qué mejoras en el diseño y la apariencia se te ocurren, para mejorar el estilo de

presentación de la información y hacerla más atractiva?

Sigamos con nuevas etiquetas. Ahora vamos a aprender a crear listas, introducir imágenes

e insertar hipervínculos en la web.



7

<ul>

<li>Café</li>

<li>Té</li>

<li>Leche</li>

</ul>

(ul unordered list)

(li list item)

Estas etiquetas forman una lista, donde los elementos de la lista vienen ordenados por

puntos negros.

Café

Té

Leche

<ol>

<li>Desayunar</li>

<li>Estudiar</li>

<li>Hacer deporte</li>

</ol>

(ol ordered list)

Ahora tenemos una lista con los elementos ordenados por números.

1. Desayunar

2. Estudiar

3. Hacer deporte

<img src=“foto.jpg” alt=“texto alernativo” /> (image)

Esta etiqueta permite introducir una imagen. No tiene etiqueta de apertura, sólo de cierre.

Además de la etiqueta img encontramos dos atributos: src y alt. Un atributo es una

propiedad de la etiqueta que define determinados parámetros necesarios para el buen

funcionamiento de la etiqueta. En este caso el atributo src recoge la ruta donde se encuentra la

imagen a insertar. Mientras que el atributo alt recoge el texto alternativo que se carga cuando

la imagen no puede mostrarse correctamente en el navegador.

Llegados a este punto debemos decir una palabra sobre la ruta a escribir en el atributo src

(en el aula de informática realizaremos muchos ejemplos al respecto).

Supongamos que tenemos una imagen con nombre foto.jpg (la terminación .jpg es la

extensión de la imagen. Sobre esto ya profundizaremos a lo largo del curso cuando

estudiemos los tipos de imagen posibles). Si la imagen se encuentra en el mismo directorio

que la página web, deberemos escribir src=“foto.jpg”.

Si la imagen se encuentra en un directorio llamado “imagen” y que es hijo del directorio

donde se encuentra la página web, deberemos escribir src=“imagen/foto.jpg”.

Finalmente, si la imagen se encuentra en el directorio padre que contiene al directorio

donde se encuentra la página web, deberemos escribir src=“../foto.jpg”.

Esta forma de escribir la ruta del archivo se llama relativa, ya que la ruta se escribe a partir

del directorio donde se encuentra el archivo de la página web.

Por último, si deseamos introducir una imagen publicada en internet también podemos

usar la url de la imagen de la siguiente forma:

src=“http://www.danipartal.net/joomla/images/stories/logo_danipartal.png”



8

Al poner la url de un elemento publicado en la web, comprobarás que la dirección

completa comienza por las siglas http. Estas siglas indican que la url utiliza el protocolo de

transferencia de hipertexto (Hypertext Transfer Protocol) y que permite la transferencia de

archivos entre el navegador del cliente y el servidor que aloja al portal web.

<a href=“http://www.danipartal.net” title=“texto informativo”>Contenido que

funcionará como hipervínculo </a> (anchor)

La etiqueta a genera un hipervínculo o hiperenlace (son términos sinónimos) a un

contenido publicado en la red. Es como un “ancla” (anchor) que siempre está apuntando a un

contenido concreto.

Con el atributo href indicamos la dirección donde apunta el hipervínculo. Con title

creamos el texto informativo que aparece al poner el cursor sobre el hipervínculo.

Entre la etiqueta de apertura y la etiqueta de cierre del hipervínculo podemos poner un

texto o una imagen, que formará el contenido sobre el que debe pulsar el usuario para acceder

al enlace.



a. Crea tu propio código donde utilices, al menos, una vez la etiqueta <a> y una vez la

etiqueta <img>.

b. Si deseas enviarte por email tanto el archivo de tu página web como el archivo de la

imagen que se carga en la web, ¿cómo puedes hacerlo utilizando solamente una vez el

botón de “adjuntar archivo” de tu correo electrónico?



9

4. Modelo de cajas

Un paso más de complejidad en la edición de páginas web es la creación de secciones

dentro del cuerpo de la web. Es decir, podemos crear una sección que contenga todas las

etiquetas que deseemos y que estas etiquetas sean independientes de las que existan fuera de

esa sección. E incluso podemos lograr que el contenido de una sección se muestre en la

posición que nosotros deseemos de la pantalla, con un estilo y diseño propio y distinto al resto

de secciones del código.

Esto se consigue con la etiqueta <div> y el conocido “modelo de cajas”. Cada sección se

inicia con <div> y termina con </div> y forma una “caja” rectangular que se agrupa con otras

cajas.

<div>Contenido de la sección</div> (division)

Al cerrar con </div> se produce un cambio de párrafo.

En la imagen siguiente se muestran distintos parámetros que podremos manipular, con

CSS, para cada caja rectangular que creemos en nuestro código: margen, borde, fondo,

relleno y contenido.

imagen tomada de www.desarrolloweb.com

Por sí solo, parece que el uso de la etiqueta div no aporta gran cosa. Cuando estudiemos

CSS en el próximo capítulo, cambiaremos de opinión.

Para terminar este capítulo, presentamos la etiqueta <span>. Si antes hemos dicho que

<div> crea cajas rectangulares, que se utiliza para agrupar grandes secciones del código de

programación y que provoca un cambio de párrafo al cerrarse, la etiqueta <span> por su parte

sólo se aplica a una pequeña porción de contenido (unas pocas palabras, una imagen…) y no



10

produce un cambio de párrafo al cerrarse. Como su propio nombre indica (span, palmo), es

una etiqueta sólo recomendada para agrupar pequeñas partes de nuestro código fuente.

<span>Pequeña porción de contenido</span> (span)

Pero pasemos ya a estudiar un poco de CSS y poder sacar todo el partido al modelo de

cajas.



11

5. Crear una hoja de estilo CSS

El lenguaje CSS (Cascading Style Sheets, traducido como “Hojas de Estilo en

Cascada”) es una herramienta sumamente sencilla y potente para manipular el estilo y diseño

del contenido de una web programada con XHTML.

Si el código fuente XHTML genera un archivo con extensión .html, ahora el código fuente

CSS genera un archivo con extensión .css.

Supongamos que nuestra hoja de estilo se llama estilo.css y está contenida en un

directorio hijo del que alberga al archivo de la página web, llamado “css”. Pues bien, este

archivo estilo.css debe ser llamado desde el archivo .html con la siguiente instrucción, que se

escribe dentro de la cabeza la web:

<link rel="stylesheet" href="css/estilo.css" type="text/css" />

Tenemos una nueva etiqueta <link> con una serie de atributos, de los que sólo vamos a

decir una palabra sobre el atributo href: indica la ruta que contiene a la hoja de estilo

(exactamente igual a cómo lo hace en la etiqueta <a> de hipervínculo).

¿Y cómo es la sintaxis propia de un fichero CSS?

Muy sencilla. Por ejemplo, imaginemos que deseamos cambiar el tamaño de fuente del

contenido controlado por la etiqueta <p> en la página web. Deberemos escribir esto:

p {

font-size: 12px;

}

La letra p indica que hacemos referencia a la etiqueta <p> de la página web, y la

instrucción font-size controla el tamaño de la fuente (indicado en píxeles en este ejemplo). Y

una cosa muy importante: nunca debemos olvidar la llave { al principio, la llave } al final y

el punto y coma ; después de cada instrucción.

El número de instrucciones diferentes de CSS son cientos. Y los valores que puede tomar

cada instrucción, decenas. Aquí vamos a estudiar una selección muy resumida. En las webs

recomendadas anteriormente puedes ampliar, ampliar y ampliar tus conocimientos en este

tema. Muy atento a las explicaciones y casos prácticos que haremos en clase.

color de fuente (formato hexadecimal)

color: #36a8e1;

familia de fuente (familias más usadas: Verdana, Tahoma, Arial, sans-serif)

font-family: Verdana;

color de fondo (formato hexadecimal)

background-color: #45f21b;

margen (secuencia de cuatro valores: arriba, derecha, debajo, izquierda).

margin: 10px 5px 0px 3px;

relleno (margen interior de una caja. Secuencia arriba, derecha, debajo, izquierda).

padding: 7px 3px 4px 2px;

borde (secuencia de tres valores: grosor, tipo de línea y color)

border: 1px solid #c01356;

view-source:https://campus.usal.es/%7Ematricur/mnln/css/style.css



12

anchura

width: 150px;

altura

height: 223px;

flotar un elemento a la izquierda o a la derecha (left, right). Por norma general sólo

aplicaremos esta instrucción para modificar el estilo de la etiqueta <div>.

float: left;

Estas instrucciones CSS se pueden aplicar, como norma general, a todas las etiquetas

XHTML que hemos estudiado en estos apuntes. Hay excepciones, que iremos viendo con el

trabajo práctico en la sala de informática, preguntando al profesor, consultando las webs de

referencia y estando atentos a los logros de otros compañeros de clase.

Repito, estas instrucciones no son más que un resumen muy escueto de las miles de

opciones posibles con CSS.

Un consejo final: sólo aprenderemos a usar las etiquetas XHTML e instrucciones CSS

correctamente practicando, practicando, practicando y aprendiendo de nuestros errores

y logros, y también aprendiendo de los compañeros. Si no conseguimos el efecto deseado,

significa que hemos cometido un error en la sintaxis o que estamos aplicando mal una

instrucción o etiqueta. No será por error del ordenador. Por muy seguro que estemos de

nuestro código, si algo no funciona… significa que hay algo que se nos escapa y debemos

encontrarlo y modificarlo.



a. Crea una página web donde aparezca, en el código fuente, una etiqueta <p>, una

etiqueta <a> y una etiqueta <div>. Copia el código CSS de la imagen superior y

utilízalo para crear tu hoja de estilos que modifique la página web. Comprueba que

todo funciona correctamente y que tu hoja de estilo modifica realmente el diseño de

la web.

b. Consulta alguna de las páginas web de referencia indicadas por el profesor y localiza

al menos una etiqueta CSS no explicada en clase. Introdúcela en tu hoja de estilos y

verifica que todo funciona correctamente.



13

6. Identificar individualmente etiquetas XHTML para modificarlas con

CSS

Llegamos al capítulo final de nuestros apuntes. A estas alturas, con mayor o menor

destreza, debemos saber ya cómo crear la estructura de una web, manejar las etiquetas

XHTML básicas y modificar algunos parámetros de estilo con CSS.

Nos habremos dado cuenta que, poco a poco, el código fuente se complica cuando

deseamos crear efectos más complejos, secciones distintas, etc. Para ser ordenados en nuestro

trabajo, y tener una ayuda cuando debamos revisar nuestro código, podemos introducir

comentarios de programador. Estos comentarios con unas líneas no ejecutadas por los

navegadores y que recogen información del programador explicando el código.

Podemos crear estos comentarios usando el símbolo /* al inicio y el símbolo */ al final

del comentario.

/*Esto es un ejemplo de comentario, no ejecutado por el navegador*/

Los comentarios pueden aparecer tanto en los archivos .html como en los archivos .css.

Para terminar los apuntes vamos a responder a unas últimas cuestiones.

¿Cómo podemos modificar el estilo de un solo párrafo creado con etiqueta <p> sin afectar

al resto de párrafos también creados con otras etiquetas <p>? Es decir, imaginemos que tengo

una web con tres párrafos, creados con otras tantas etiquetas <p>. Si deseo modificar sólo el

color de texto del segundo párrafo, sin alterar el color por defecto del primero y el tercero,

¿cómo puedo conseguirlo?

La respuesta es la siguiente. Debemos dar a cada etiqueta un nombre llamado

identificador (id) y con CSS acceder a la etiqueta que deseemos utilizando el nombre de ese

identificador. Veámoslo mejor con el ejemplo recogido en las siguientes imágenes.



14

En la primera imagen, el código XHTML muestra la etiqueta <link> que llama a la hoja

de estilo CSS. En este caso, la hoja de estilo se encuentra en el mismo directorio que el

archivo de la web, por lo que tenemos el atributo href=“estilo.css”. Además, los tres párrafos

creados con <p> tienen un identificador propio: “primero”, “segundo” y “tercero”.

En la segunda imagen, el código CSS modifica el color del texto cada párrafo. Entre el

nombre de la etiqueta y el identificador, debemos usar el símbolo almohadilla #. De esta

manera tendremos p#primero, p#segundo y p#tercero.

Finalmente, en la tercera imagen, vemos el resultado final de la web. Primer párrafo en

rojo, segundo en verde y tercero en azul.



a. Copia el ejemplo de las imágenes superiores y comprueba que funciona correctamente

en tu navegador.

¿Y si deseamos modificar el estilo de unas pocas palabras, que pertenecen a un extenso

párrafo controlado por una etiqueta <div>? Muy sencillo: haciendo uso de la etiqueta <span>.

Veamos el ejemplo ilustrado en las siguientes imágenes.



15

Hasta aquí los apuntes teóricos de este tema.

Recuerda que en la web de la asignatura aparecen publicados multitud de ejemplos de

programación con XHTML y CSS que te pueden servir para la elaboración de las actividades

de calificación.

Para terminar, una última recomendación de portal web:

http://www.csszengarden.com

En este enlace puedes comprobar, con un solo click, cómo cambiar radicalmente el

estilo y diseño de una web sin alterar en nada el contenido de la información que se muestra.

¿El secreto? Aplicar en cada caso una hoja de estilo distinta. El código de programación

XHTML siempre es el mismo y sólo cambian las instrucciones CSS.

Si te ha entrado curiosidad y gusanillo por aprender más cosas de programación web,

ánimo; con trabajo y esfuerzo puedes conseguir resultados sorprendentes.

http://www.csszengarden.com/

Documents

Apuntes Web Xhtml Css