Semana 10 Practica

SEMANA 10 - PRACTICA
Ejercicios - Cmo se usa 1
Enunciado
A partir de la pgina web que se te proporciona, debes emplear el atributo style para crear una
pgina web que tenga el mismo aspecto que la siguiente imagen:
Tienes que tener en cuenta los siguientes requisitos:
El texto principal:
o El color del texto es azul: #00F.
o El color de fondo del texto es verde claro: #CFC.
o El tipo de letra es la secuencia: Georgia, Cambria, serif.
o El tamao del texto: 16px.
El encabezado de nivel 1:
o El color del texto es rojo claro: #F00.
o El tipo de letra es la secuencia: Verdana, Calibri, sans-serif.
El encabezado de nivel 2:
o El color del texto es rojo claro: #A00.

o El tipo de letra es la secuencia: Verdana, Calibri, sans-serif.
El color de los campos de los datos del libro es verde oscuro: #060.
El texto "Internet" y la "Web" cuando actan como sustantivos:
o Texto en negrita.
El texto "Hypertext Markup Language", "Cascading Style Sheets" y los acrnimos "HTML" y
"CSS":
o El color del texto es blanco: #FFF.
o El color de fondo del texto es negro: #000.
o Texto en cursiva.
COPIAR Y PROBAR COMO SE VE EN EL NAVEGADOR DE INTERNET

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML & CSS: Curso prctico avanzado</title>
</head>
<body>
<h1>HTML & CSS: Curso prctico avanzado</h1>
<h2>Datos del libro</h2>
<ul>
<li>Ttulo: HTML & CSS: Curso prctico avanzado</li>
<li>Autor: Sergio Lujn Mora</li>
<li>Editorial: Publicaciones Altaria</li>
<li>Ao de publicacin: 2015</li>
<li>ISBN: 978-84-944049-4-8</li>
</ul>
<h2>Descripcin del libro</h2>
<p>
Aunque los inicios de Internet se remontan a los aos sesenta,
no ha sido hasta los aos noventa cuando, gracias a la Web, se
ha extendido su uso por todo el mundo. En pocos aos, la Web ha
evolucionado enormemente: se ha pasado de pginas sencillas, con
pocas imgenes y contenidos estticos que eran visitadas por
unos pocos usuarios a pginas complejas, con contenidos
dinmicos que provienen de bases de datos y que son visitadas
por miles de usuarios al mismo tiempo.
</p>
<p>
Todas las pginas estn internamente construidas con la misma
tecnologa, con el Lenguaje de marcas de hipertexto (Hypertext
Markup Language, HTML) y con las Hojas de estilo en cascada
(Cascading Style Sheets, CSS).
</p>
<p>
Este libro es adecuado para cualquiera que tenga inters en
aprender a desarrollar sus propias pginas web. No son
necesarios conocimientos previos para aprender con este libro,
lo nico que es necesario es saber utilizar un ordenador y saber
navegar por la Web.
</p>
<h2>Contenido del libro</h2>
<p>
El contenido de este libro se estructura en tres apartados bien
diferenciados:
</p>
<ul>
<li>En la primera parte del libro se trabajan conceptos
generales que son necesarios para poder desarrollar pginas web;
se explican conceptos de estructura fsica y estructura lgica
(o estructura de navegacin) de un sitio web. Se detalla cmo
influye la estructura fsica en las URL o direcciones que se
emplean a la hora de crear los enlaces de un sitio web. Pasando
por el concepto de "estndar web", un trmino general que se
emplea para refererirse a los estndares que define su
funcionamiento como HTML y CSS, empleados para el desarrollo de
las pginas web en el lado del cliente.</li>
<li>En la segunda parte se trabaja HTML. Partiendo de la

estructura bsica de una pgina web, se explican las etiquetas
de HTML que se utilizan para definir el texto, los enlaces, las
listas, las tablas, los formularios y los elementos
multimedia.</li>
<li>En la tercera y ltima parte se explica CSS, el lenguaje que
se emplea para definir el formato y la presentacin de una
pgina web. Se explica cmo utilizar el color, cmo definir la
presentacin del texto, de las tablas y de los formularios; cmo
realizar transformaciones y transiciones con el fin de disear
una pgina web.</li>
</ul>
</body>
</html>
Ejercicios - Listas 2
Enunciado
Debes crear una pgina web que tenga el mismo aspecto que la siguiente imagen:
Selecciona para cada lista el mejor tipo de lista.
Ejercicios - Tablas 3
Enunciado
A partir del texto que se te proporciona, debes crear una pgina web que tenga el
mismo aspecto que la siguiente imagen:
Adems, tienes que tener en cuenta los siguientes requisitos:

El destino del enlace ndice de desempleo anual es la pgina web:
http://epp.eurostat.ec.europa.eu/tgm/table.do?tab=table&init=1&language=en&pcode=tsde
c450&plugin=1
Nota: en el cdigo base que se te proporciona vas a encontrar una etiqueta nueva,
la etiqueta <style>. Esta etiqueta permite introducir instrucciones de CSS
(Cascading Style Sheets) en una pgina web. CSS se emplea para definir la
presentacin visual de una pgina web y se explica en la segunda parte de este
curso. Las instrucciones que se han incluido tienen como objetivo que la tabla y
las celdas de la tabla se muestren con un borde. Esto tambin se podra haber
logrado con el atributo border de HTML, pero es mejor utilizar siempre CSS para
todo lo relacionado con la presentacin de una pgina web.
Cdigo base
<!DOCTYPE html>
<html>
<head>
<title>Desempleo</title>
<style>
table, tr, th, td {
border: 1px solid black;
</style>
</head>
<body>
El desempleo en Espaa
La siguiente tabla muestra la evolucin del desempleo en Espaa,

comparado con la media de los 27 pases de la Unin Europea,
Grecia, que compite con Espaa en ser el primero en esta
vergonzosa competicin y Estados Unidos y Japn, dos de las
primeras economas mundiales.
Pas
2000
2001
2002
2003
2004
2005
2006
2007
2008
2009
2010
2011
2012
2013
UE (27 pases)
8.9
8.7
9.1
9.3
8.2
7.2
9.6
9.6
10.4
10.8
Espaa
11.9
10.6
11.5
11.5
11
9.2
8.5
8.2
11.3
17.9
19.9
21.4
24.8
26.1
Grecia
11.2
10.7
10.3
9.7
10.6
10
9
8.4
7.8
9.6
12.7
17.9
24.5
27.5
Estados Unidos
4.8
5.8
5.5
5.1
4.6
4.6
5.8
9.3
9.6
8.9
8.1
7.4
Japn
4.7
5
5.4
5.3
4.7
4.4
4.1
3.9
5.1
5.1
4.6
4.3
Fuente: ndice de desempleo anual, Eurostat
</body>
</html>

Semana 10 Practica

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Semana 10 Practica

Uploaded by

Copyright:

Available Formats

SEMANA 10 - PRACTICA

Ejercicios - Cmo se usa 1

Tienes que tener en cuenta los siguientes requisitos:

o El color del texto es azul: #00F.

o El color de fondo del texto es verde claro: #CFC.

o El tipo de letra es la secuencia: Georgia, Cambria, serif.

o El tamao del texto: 16px.

o El color del texto es rojo claro: #F00.

o El tipo de letra es la secuencia: Verdana, Calibri, sans-serif.

o El tamao del texto: 32px.

o El color del texto es rojo claro: #A00.

o El tamao del texto: 24px.

El texto "Internet" y la "Web" cuando actan como sustantivos:

o El tamao del texto: 20px.

o El color del texto es blanco: #FFF.

o El color de fondo del texto es negro: #000.

COPIAR Y PROBAR COMO SE VE EN EL NAVEGADOR DE INTERNET

<li>En la segunda parte se trabaja HTML. Partiendo de la

Adems, tienes que tener en cuenta los siguientes requisitos:

table, tr, th, td {

border: 1px solid black;

La siguiente tabla muestra la evolucin del desempleo en Espaa,

Fuente: ndice de desempleo anual, Eurostat

You might also like