SlideShare uma empresa Scribd logo
1 de 4
Baixar para ler offline
Ejercicio 2
A partir del código HTML proporcionado, añadir las reglas CSS necesarias para
que la página resultante tenga el mismo aspecto que el de la siguiente imagen:
A continuación se muestra el código HTML de la página sin estilos:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<title>Ejercicio de selectores</title>
</head>
<body>
<h1 id="titulo">Lorem ipsum dolor sit amet</h1>
<p>Nulla pretium. Sed tempus nunc vitae neque. <strong>Suspendisse
gravida</strong>, metus a scelerisque sollicitudin, lacus velit
ultricies nisl, nonummy tempus neque diam quis felis. <span
class="destacado">Etiam sagittis tortor</span> sed arcu sagittis
tristique.</p>
<h2 id="subtitulo">Aliquam tincidunt, sem eget volutpat porta</h2>
<p>Vivamus velit dui, placerat vel, feugiat in, ornare et, urna.
<a href="#">Aenean turpis metus, <em>aliquam non</em>, tristique
in</a>, pretium varius, sapien. Proin vitae nisi. Suspendisse
<span class="especial">porttitor purus ac elit</span>. Suspendisse
eleifend odio at dui. In in elit sed metus pretium elementum.</p>
<table summary="Descripción de la tabla y su contenido">
<caption>Título de la tabla</caption>
<thead>
<tr>
<th scope="col"></th>
<th scope="col" class="especial">Título columna 1</th>
<th scope="col" class="especial">Título columna 2</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="col"></th>
<th scope="col">Título columna 1</th>
<th scope="col">Título columna 2</th>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row" class="especial">Título fila 1</th>
<td>Donec purus ipsum</td>
<td>Curabitur <em>blandit</em></td>
</tr>
<tr>
<th scope="row">Título fila 2</th>
<td>Donec <strong>purus ipsum</strong></td>
<td>Curabitur blandit</td>
</tr>
</tbody>
</table>
<div id="adicional">
<p>Donec purus ipsum, posuere id, venenatis at, <span>placerat ac,
lorem</span>. Curabitur blandit, eros sed gravida aliquet, risus
justo
porta lorem, ut mollis lectus tortor in orci. Pellentesque nec
augue.</p>
<p>Fusce nec felis eu diam pretium adipiscing. <span
id="especial">Nunc elit elit, vehicula vulputate</span>, venenatis
in,
posuere id, lorem. Etiam sagittis, tellus in ultrices accumsan,
diam nisi feugiat ante, eu congue magna mi non nisl.</p>
<p>Vivamus ultrices aliquet augue. <a href="#">Donec arcu pede,
pretium vitae</a>, rutrum aliquet, tincidunt blandit, pede.
Aliquam in nisi. Suspendisse volutpat. Nulla facilisi. Ut
ullamcorper nisi quis mi.</p>
</div>
</body>
</html>
Aunque la propiedad que modifica el color del texto se explica detalladamente
en los próximos capítulos, en este ejercicio solamente es preciso conocer que
la propiedad se llama color y que como valor se puede indicar directamente el
nombre del color.
Los nombres de los colores también están estandarizados y se corresponden
con el nombre en inglés de cada color. En este ejercicio, se deben utilizar los
colores: teal, red, blue, orange, purple,olive, fuchsia y green.

Mais conteúdo relacionado

Semelhante a Practica2css (20)

Tarea tercero bachillerato
Tarea tercero bachilleratoTarea tercero bachillerato
Tarea tercero bachillerato
 
Modulo1parte2ver2 140505061829-phpapp02
Modulo1parte2ver2 140505061829-phpapp02Modulo1parte2ver2 140505061829-phpapp02
Modulo1parte2ver2 140505061829-phpapp02
 
Fundamentos de CSS
Fundamentos de CSSFundamentos de CSS
Fundamentos de CSS
 
Tablas
TablasTablas
Tablas
 
Html Email - Algunas cosas que considerar
Html Email - Algunas cosas que considerarHtml Email - Algunas cosas que considerar
Html Email - Algunas cosas que considerar
 
Pbhtml
PbhtmlPbhtml
Pbhtml
 
Pbhtml
PbhtmlPbhtml
Pbhtml
 
Pbhtml
PbhtmlPbhtml
Pbhtml
 
Pbhtml
PbhtmlPbhtml
Pbhtml
 
Pbhtml
PbhtmlPbhtml
Pbhtml
 
Pbhtml
PbhtmlPbhtml
Pbhtml
 
Pbhtml
PbhtmlPbhtml
Pbhtml
 
Prácticas en HTML
Prácticas en HTMLPrácticas en HTML
Prácticas en HTML
 
Pbhtml
PbhtmlPbhtml
Pbhtml
 
Publicación en SlideShare
Publicación en SlideSharePublicación en SlideShare
Publicación en SlideShare
 
Pbhtml
PbhtmlPbhtml
Pbhtml
 
Pbhtml
PbhtmlPbhtml
Pbhtml
 
Pbhtml
PbhtmlPbhtml
Pbhtml
 
Pbhtml
PbhtmlPbhtml
Pbhtml
 
Pbhtml
PbhtmlPbhtml
Pbhtml
 

Mais de gonzalovizuete

Unidad 5 estructura atomica 11
Unidad 5  estructura atomica 11Unidad 5  estructura atomica 11
Unidad 5 estructura atomica 11gonzalovizuete
 
Informapuntes de software y hardware
Informapuntes de software y hardwareInformapuntes de software y hardware
Informapuntes de software y hardwaregonzalovizuete
 
Sustancias puras mezclas y disoluciones
Sustancias puras mezclas y disolucionesSustancias puras mezclas y disoluciones
Sustancias puras mezclas y disolucionesgonzalovizuete
 
Ejercicios tema 2resueltos
Ejercicios tema 2resueltosEjercicios tema 2resueltos
Ejercicios tema 2resueltosgonzalovizuete
 
Preguntas de asi comemos
Preguntas de asi comemos Preguntas de asi comemos
Preguntas de asi comemos gonzalovizuete
 
Informacion general de la asignatura
Informacion general de la asignaturaInformacion general de la asignatura
Informacion general de la asignaturagonzalovizuete
 
Criterios de calificación CITE modulo III
Criterios de calificación CITE modulo IIICriterios de calificación CITE modulo III
Criterios de calificación CITE modulo IIIgonzalovizuete
 
Lección 3 de Inkscape
Lección 3 de InkscapeLección 3 de Inkscape
Lección 3 de Inkscapegonzalovizuete
 
Calendario de sesion evaluacion
Calendario de sesion evaluacionCalendario de sesion evaluacion
Calendario de sesion evaluaciongonzalovizuete
 
Calendario de sesion evaluacion
Calendario de sesion evaluacionCalendario de sesion evaluacion
Calendario de sesion evaluaciongonzalovizuete
 

Mais de gonzalovizuete (20)

Dibujo word
Dibujo wordDibujo word
Dibujo word
 
examen final partes
examen final partesexamen final partes
examen final partes
 
Unidad 5 estructura atomica 11
Unidad 5  estructura atomica 11Unidad 5  estructura atomica 11
Unidad 5 estructura atomica 11
 
Informapuntes de software y hardware
Informapuntes de software y hardwareInformapuntes de software y hardware
Informapuntes de software y hardware
 
Sustancias puras mezclas y disoluciones
Sustancias puras mezclas y disolucionesSustancias puras mezclas y disoluciones
Sustancias puras mezclas y disoluciones
 
dia 10
dia 10dia 10
dia 10
 
Ejercicios tema 2resueltos
Ejercicios tema 2resueltosEjercicios tema 2resueltos
Ejercicios tema 2resueltos
 
Ejercicios tema2
Ejercicios tema2Ejercicios tema2
Ejercicios tema2
 
Preguntas de asi comemos
Preguntas de asi comemos Preguntas de asi comemos
Preguntas de asi comemos
 
Tema 1 actividades
Tema 1 actividadesTema 1 actividades
Tema 1 actividades
 
Informacion general de la asignatura
Informacion general de la asignaturaInformacion general de la asignatura
Informacion general de la asignatura
 
Criterios de calificación CITE modulo III
Criterios de calificación CITE modulo IIICriterios de calificación CITE modulo III
Criterios de calificación CITE modulo III
 
Recuperacion del3er
Recuperacion del3erRecuperacion del3er
Recuperacion del3er
 
Examen de gimp
Examen de gimpExamen de gimp
Examen de gimp
 
Lección 3 de Inkscape
Lección 3 de InkscapeLección 3 de Inkscape
Lección 3 de Inkscape
 
Calendario de sesion evaluacion
Calendario de sesion evaluacionCalendario de sesion evaluacion
Calendario de sesion evaluacion
 
Calendario de sesion evaluacion
Calendario de sesion evaluacionCalendario de sesion evaluacion
Calendario de sesion evaluacion
 
Leccion2exercises
Leccion2exercisesLeccion2exercises
Leccion2exercises
 
Leccion2
Leccion2Leccion2
Leccion2
 
Leccion1 de ink scape
Leccion1 de ink scapeLeccion1 de ink scape
Leccion1 de ink scape
 

Practica2css

  • 1. Ejercicio 2 A partir del código HTML proporcionado, añadir las reglas CSS necesarias para que la página resultante tenga el mismo aspecto que el de la siguiente imagen: A continuación se muestra el código HTML de la página sin estilos: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>
  • 2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ejercicio de selectores</title> </head> <body> <h1 id="titulo">Lorem ipsum dolor sit amet</h1> <p>Nulla pretium. Sed tempus nunc vitae neque. <strong>Suspendisse gravida</strong>, metus a scelerisque sollicitudin, lacus velit ultricies nisl, nonummy tempus neque diam quis felis. <span class="destacado">Etiam sagittis tortor</span> sed arcu sagittis tristique.</p> <h2 id="subtitulo">Aliquam tincidunt, sem eget volutpat porta</h2> <p>Vivamus velit dui, placerat vel, feugiat in, ornare et, urna. <a href="#">Aenean turpis metus, <em>aliquam non</em>, tristique in</a>, pretium varius, sapien. Proin vitae nisi. Suspendisse <span class="especial">porttitor purus ac elit</span>. Suspendisse eleifend odio at dui. In in elit sed metus pretium elementum.</p> <table summary="Descripción de la tabla y su contenido"> <caption>Título de la tabla</caption> <thead> <tr> <th scope="col"></th> <th scope="col" class="especial">Título columna 1</th> <th scope="col" class="especial">Título columna 2</th> </tr> </thead>
  • 3. <tfoot> <tr> <th scope="col"></th> <th scope="col">Título columna 1</th> <th scope="col">Título columna 2</th> </tr> </tfoot> <tbody> <tr> <th scope="row" class="especial">Título fila 1</th> <td>Donec purus ipsum</td> <td>Curabitur <em>blandit</em></td> </tr> <tr> <th scope="row">Título fila 2</th> <td>Donec <strong>purus ipsum</strong></td> <td>Curabitur blandit</td> </tr> </tbody> </table> <div id="adicional"> <p>Donec purus ipsum, posuere id, venenatis at, <span>placerat ac, lorem</span>. Curabitur blandit, eros sed gravida aliquet, risus justo porta lorem, ut mollis lectus tortor in orci. Pellentesque nec augue.</p>
  • 4. <p>Fusce nec felis eu diam pretium adipiscing. <span id="especial">Nunc elit elit, vehicula vulputate</span>, venenatis in, posuere id, lorem. Etiam sagittis, tellus in ultrices accumsan, diam nisi feugiat ante, eu congue magna mi non nisl.</p> <p>Vivamus ultrices aliquet augue. <a href="#">Donec arcu pede, pretium vitae</a>, rutrum aliquet, tincidunt blandit, pede. Aliquam in nisi. Suspendisse volutpat. Nulla facilisi. Ut ullamcorper nisi quis mi.</p> </div> </body> </html> Aunque la propiedad que modifica el color del texto se explica detalladamente en los próximos capítulos, en este ejercicio solamente es preciso conocer que la propiedad se llama color y que como valor se puede indicar directamente el nombre del color. Los nombres de los colores también están estandarizados y se corresponden con el nombre en inglés de cada color. En este ejercicio, se deben utilizar los colores: teal, red, blue, orange, purple,olive, fuchsia y green.