Ejercicos Web

1 EJECICIO
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Interno</title>
<style type="text/css">
h1{background-color:rgba(160,118,106)}
h2{background-color:orange}
h3{background-color:olive}
body{color:#ffffff}
#by { color:orange;font-size: 20px}

#tema {color:#6D6664; font-style: italic; font-family: 'arial', sans-serif; font-
size: 12px }
#by { text-align: center; }
</style>
</head>
<body>
<strong id="tema"> EJERCICIO # 1 </br>

Crear una p�gina HTML y definir tres t�tulos empleando los elemento h1, h2 y
h3. Definir el mismo color para el texto de cada bloque y colores diferentes para
el fondo de los mismos (cada elemento HTML debe tener definida la propiedad style)
</strong> <hr>
<h1> Hola a todos </h1>

<hr>
<p id="by"> By: Carlos Lombeida </p>
</body>
</html>
13 EJECICIO
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Cairo|Comfortaa|Jura|
Maven+Pro|Play|Rajdhani|Roboto" rel="stylesheet">
<title>css interno</title>
<meta charset="UTF-8">
#cabecera {
background-color:#888;
color:#ffffff;
font-family:Courier;text-align:right;
}
#cuerpo {
background-color:#eee;
font-family:Arial;
text-indent:20px;
}
#pie {
text-align:center;
color:#eedd00;
}
body{ color: #585858 ; font-family: 'Jura', sans-serif;}
#by { color:orange;font-size: 20px ; font-family: 'Play', sans-serif;}

size: 12px }
</style>
<body>
<br><br>
Definir tres estilos de tipo id (cabecera, cuerpo y pie), luego definir en el
archivo
HTML tres areas (div) inicializando el atributo id con los nombres de reglas de
estilo creados.
</strong> <hr></br> </br>
<div id="cabecera">
<h1>Marsh, el neurocirujano compasivo</h1>
</div>
<div id="cuerpo">
<p> �Tambi�n me acord� de la ocasi�n, ya como cirujano, en que hab�a operado a
una ni�a con un gran tumor en el cerebro. Era una enorme masa de vasos sangu�neos,
como puede llegar a suceder con estas patolog�as, y tuve que luchar
desesperadamente por detener el sangrado. La operaci�n se convirti� en una sombr�a
carrera entre la sangre que manaba de la cabeza de la ni�a y la que volv�a a
transfundir en ella Judith, mi pobre anestesista, a trav�s de las v�as
intravenosas, mientras yo intentaba parar la hemorragia sin conseguirlo.</p>
<p>La ni�a, una preciosidad de largo cabello pelirrojo, muri� desangrada. Fue una
de esas �muertes en la mesa de operaciones�, algo muy ins�lito en la cirug�a
moderna�.</p>
</div>
<div id="pie">
<p>01 Sep 2016
/Jos� Manuel S�nchez Ron
/ Henry Marsh, Oliver Sacks</p>
</div>
</body>
</html>
17 EJECICIO
<!DOCTYPE html>
<html>
<head>
h1 {
margin-top:50px;margin-bottom:50px;
background-color:#eeeeee;
}
h2 {
margin-top:50px;margin-bottom:50px;
}

size: 12px }
</style>
<body>
<br><br>
Disponer t�tulos de primer y segundo nivel con un margen de 50 pixeles en la
parte
superior e inferior del elemento HTML.
<h1>Las �ltimas tinieblas</h1>

<h2>El peque�o universo que llevamos dentro</h2>
</body>
</html>
18 EJECICIO
<!DOCTYPE html>
<html>
<head>
.estilo1 {
list-style-type:decimal;
}
.estilo2 {
list-style-type:lower-roman;
}

size: 12px }
</style>
<body>
<br><br>
Confeccionar dos listas de aplicaciones. Agrupar los sitemas operativos
(Windows
Mac OS y Linux) y las aplicaciones de ofim�tica (Word, Excel y Powerpoint)
Aplicar estilos distintos a cada lista.
<ul class="estilo1">
<li>Windows</li>
<li>Mac OS</li>
<li>Linux</li>
</ul>
<ul class="estilo2">
<li>Word</li>
<li>Excel</li>
<li>Powerpoint</li>
</ul>
</body>
</html>
19 EJECICIO
<!DOCTYPE html>
<html>
<head>
body{
background: url(fondo.jpg) ;
background-repeat:no-repeat;
background-attachment:fixed;/*luego probar con fixed*/
}
size: 12px }
</style>
<body>
<br><br>
Definir la imagen fondo.jpg como fondo de la p�gina, luego inicializar y
probar la
propiedad background-attachment con los dos valores posibles (scroll/fixed)
body {
background-image:url(fondo.jpg);
background-attachment:scroll;/*luego probar con fixed*/
}
<h3>Lobotom�a para una adelantada</h3>

Pobrecita Frances Farmer. Las pag� caro. C�mo fue a ocurr�rsele, hace m�s de medio
siglo, exigir autodeterminaci�n e igualdad de derechos frente a sus pares
masculinos en el mundo del espect�culo, en Hollywood, nada menos. Para los que no
la recuerden, Frances Farmer �de la pel�cula Frances actuada por Jessica Lange� fue
una actriz bella, muy talentosa, y que brill� a principio de los a�os treinta,
actuando junto a hombres del tama�o de Tyrone Power o Cary Grant. Fue la hija �nica
de una familia cat�lica y conservadora de Seattle y dej� el hogar muy joven,
asfixiada, para probar suerte en el teatro. Este fue siempre su gran pasi�n, el
cine le resultaba secundario. En Nueva York, a trav�s de actores y dramaturgos,
conoci� las ideas de la izquierda pol�tica y se sum� a ellas, llegando incluso a
viajar por la entonces Uni�n Sovi�tica. Esto no le gust� nada a su madre, que
insist�a en adue�arse de ella. Pero Frances no se dobleg�. El resultado: fue
acusada de desobediencia y de ser v�ctima de los �rojos�. Esto provoc� el primer
quiebre profundo con la familia, que la convertir�a m�s tarde en peregrina de
hospitales siqui�tricos.</br>
Su �xito en Hollywood fue enorme pero los directores no la quer�an: les discut�a,
no los reverenciaba y exig�a papeles con sentido y buenos guiones. Pon�a las mismas
condiciones de trabajo que los actores (hombres) y los obligaba a tratarla como a
una profesional. El juicio negativo sobre ella fue vociferado y un�nime. Su gran
pecado era no bastarle con ser la rubia bonita.</br> </br>
Luego de un par de matrimonios fallidos y de conflictos tanto familiares como

laborales comenz� a alcoholizarse. En alguna crisis, la madre aprovecha su
vulnerabilidad para llevarla de vuelta a la casa paterna y luego al hospital.
Empezaron los primeros electroshocks. Furiosa Frances por lo que le hac�an, amenaza
a su madre con matarla. Esta �ltima pide entonces una lobotom�a para su hija: para
enderezarla, para extraerle todo germen de trasgresi�n, para transformarla en un
ente pasivo. La encierra en casa por largo tiempo �invent�ndole que est� bajo
arresto domiciliario� y la usa como su sirviente. Hasta que ella escapa. (Me ha
tentado a veces usar a esta madre para alg�n personaje de mis novelas pero la he
desechado: nadie creer�a en tal perversi�n).</br> </br>
All� se le pierde el rastro. Sabemos que muri� sin pena ni gloria, transformada en
una mujer com�n y corriente que acept� lo que su g�nero conllevaba y se adecu� a
una vida m�nima.</br>
A ra�z de la publicaci�n de su autobiograf�a, las mujeres empezaron a estudiar su
caso y a rescatarla. Hasta Kurt Cobain la transform� en su �dolo y llam� a su hija
Frances por ella. �Cu�l fue su gran error? Hay dos alternativas. O Frances Farmer
fue una loca de atar o simplemente una mujer a la que solo lograron aplacar con el
demencial invento de la lobotom�a, por haberse atrevido a aspirar a lo que hoy
aspiramos todas. Frances fue una precursora. Quemada en la hoguera, bruja como
tantas, pag� por ser una adelantada</br> </br>
Le� al poco de publicarse en espa�ol el libro del neurocirujano ingl�s Henry Marsh
(1950), Ante todo no hagas da�o (Salamandra). Pocas veces, si es que alguna (mi
memoria no es nada buena para demasiadas cosas), me he encontrado con un libro que
me haya producido la impresi�n de este. Con una sinceridad y humildad de las que no
pocas veces carecen muchos m�dicos, una sinceridad y humildad que honra a una
profesi�n tan antigua y noble como necesaria, Marsh describe un buen n�mero de
experiencias que ha tenido al ejercer su carrera de neurocirujano. La mayor parte
de tales experiencias se refieren a operaciones que realiz� para tratar de remediar
males que afectan al reducto m�s delicado e importante de la esencia humana, el
cerebro, males del tipo de tumores, sobre todo estos, pero tambi�n aneurismas o
derrames producidos por muy diversas causas. Y es que el universo l�xico de las
patolog�as cerebrales est� repleto de t�rminos, esto es, de realidades, para cuyo
significado los legos, los potenciales pacientes, deben ir en busca de alg�n
diccionario; t�rminos como hidrocefalia obstructiva, ventriculostom�a endosc�pica,
astrocitoma, ependimoma, meningioma, glioblastoma, oligodendroglioma, pineocitoma o
pineoblastoma (alguna vez, es cierto, el t�rmino en cuesti�n es m�s trasparente;
por ejemplo: una malformaci�n arteriovenosa).</br> </br>
El cerebro, un peque�o y complejo universo </br>
He dicho que el cerebro es nuestro �rgano m�s importante, y lo es porque aunque el

coraz�n sea el �motor�, que cuando deja de funcionar apaga la vida, lo que nos hace
realmente humanos es lo que pensamos y sentimos, no el aliento que nos mantiene
vivos.</br> </br>
Es casi un lugar com�n decir que el gran reto de la ciencia actual es entender c�mo
es posible que un �sistema� org�nico como es el cerebro tenga conciencia de s�
mismo, lo que en �ltima instancia significa que es el responsable de que seamos
quienes somos, de nuestra unidad y autonom�a como entidad. �C�mo produce el cerebro
pensamientos, una forma de realidad simb�lica? Su complejidad casi desaf�a la
imaginaci�n: est� formado por cien mil millones de c�lulas, las neuronas, las, como
las denomin� Santiago Ram�n y Cajal, �c�lulas del pensamiento�, cada una conectada
�por medio de las proyecciones ramificadas arborescentes llamadas axones y
dentritas, la mayor�a de las cuales terminan en unas estructuras diminutas, las
sinapsis� a otras diez mil neuronas que, una vez estimuladas, crean influjos
nerviosos que, a su vez, engendran mediadores qu�micos que atraviesan el espacio
intercelular para llegar a otras neuronas. Cien mil neuronas, cada una pudiendo
tener de una a diez mil conexiones sin�pticas con otras neuronas, dan lugar a un
conjunto de interconexiones de, aproximadamente, �cuarenta mil billones! �En un
solo cerebro! Desde esta perspectiva, es l�cito considerar al cerebro como uno de
los objetos m�s complejos, si no el que m�s, del universo. �Sorprender� en
consecuencia que estemos lejos de comprenderlo, que no sepamos c�mo eso que
llamamos �cerebro� integra y coordina tanta actividad, tanto intercambio de
informaci�n, tanta diversidad y tanta especializaci�n? </br> </br>
</body>
</html>
19. EJERCICIO
<!DOCTYPE html>
<html>
<head>
body{
background: url(fondo.jpg) ;
}
size: 12px }
</style>
<body>
<br><br>
Definir la imagen fondo.jpg como fondo de la p�gina, luego inicializar y
probar la
propiedad background-attachment con los dos valores posibles (scroll/fixed)
body {
background-image:url(fondo.jpg);
}

Pobrecita Frances Farmer. Las pag� caro. C�mo fue a ocurr�rsele, hace m�s de medio
siglo, exigir autodeterminaci�n e igualdad de derechos frente a sus pares
pecado era no bastarle con ser la rubia bonita.</br> </br>
Luego de un par de matrimonios fallidos y de conflictos tanto familiares como

tantas, pag� por ser una adelantada</br> </br>
Le� al poco de publicarse en espa�ol el libro del neurocirujano ingl�s Henry Marsh
(1950), Ante todo no hagas da�o (Salamandra). Pocas veces, si es que alguna (mi
memoria no es nada buena para demasiadas cosas), me he encontrado con un libro que
me haya producido la impresi�n de este. Con una sinceridad y humildad de las que no
pocas veces carecen muchos m�dicos, una sinceridad y humildad que honra a una
profesi�n tan antigua y noble como necesaria, Marsh describe un buen n�mero de
experiencias que ha tenido al ejercer su carrera de neurocirujano. La mayor parte
de tales experiencias se refieren a operaciones que realiz� para tratar de remediar
males que afectan al reducto m�s delicado e importante de la esencia humana, el
cerebro, males del tipo de tumores, sobre todo estos, pero tambi�n aneurismas o
derrames producidos por muy diversas causas. Y es que el universo l�xico de las
patolog�as cerebrales est� repleto de t�rminos, esto es, de realidades, para cuyo
significado los legos, los potenciales pacientes, deben ir en busca de alg�n
diccionario; t�rminos como hidrocefalia obstructiva, ventriculostom�a endosc�pica,
astrocitoma, ependimoma, meningioma, glioblastoma, oligodendroglioma, pineocitoma o
pineoblastoma (alguna vez, es cierto, el t�rmino en cuesti�n es m�s trasparente;
por ejemplo: una malformaci�n arteriovenosa).</br> </br>
El cerebro, un peque�o y complejo universo </br>
He dicho que el cerebro es nuestro �rgano m�s importante, y lo es porque aunque el

coraz�n sea el �motor�, que cuando deja de funcionar apaga la vida, lo que nos hace
realmente humanos es lo que pensamos y sentimos, no el aliento que nos mantiene
vivos.</br> </br>
Es casi un lugar com�n decir que el gran reto de la ciencia actual es entender c�mo
es posible que un �sistema� org�nico como es el cerebro tenga conciencia de s�
mismo, lo que en �ltima instancia significa que es el responsable de que seamos
quienes somos, de nuestra unidad y autonom�a como entidad. �C�mo produce el cerebro
pensamientos, una forma de realidad simb�lica? Su complejidad casi desaf�a la
imaginaci�n: est� formado por cien mil millones de c�lulas, las neuronas, las, como
las denomin� Santiago Ram�n y Cajal, �c�lulas del pensamiento�, cada una conectada
�por medio de las proyecciones ramificadas arborescentes llamadas axones y
dentritas, la mayor�a de las cuales terminan en unas estructuras diminutas, las
sinapsis� a otras diez mil neuronas que, una vez estimuladas, crean influjos
nerviosos que, a su vez, engendran mediadores qu�micos que atraviesan el espacio
intercelular para llegar a otras neuronas. Cien mil neuronas, cada una pudiendo
tener de una a diez mil conexiones sin�pticas con otras neuronas, dan lugar a un
conjunto de interconexiones de, aproximadamente, �cuarenta mil billones! �En un
solo cerebro! Desde esta perspectiva, es l�cito considerar al cerebro como uno de
los objetos m�s complejos, si no el que m�s, del universo. �Sorprender� en
consecuencia que estemos lejos de comprenderlo, que no sepamos c�mo eso que
llamamos �cerebro� integra y coordina tanta actividad, tanto intercambio de
informaci�n, tanta diversidad y tanta especializaci�n? </br> </br>
</body>
</html>
2 EJECICIO
<!DOCTYPE html>
<html>
<head>
h1{ color:#C5D6E6 ;background-color:rgba(160,118,106);}

h2{background-color:#15ACEE; color: #2F35FA}
h3{background-color:olive; color: #E5C55A;}
h4{background-color:#F3E4B1; color: #313233;}
h5{background-color:#BAEB95; color: #7C1E88;}
h6{background-color:#AF6FB7; color: #A7DC5B;}
body{color: #313233}

size: 12px }
</style>
</head>
<body>
<br><br>
Definir un estilo diferente para los elementos h1,h2,h3,h4,h5 y h6. Mostrar
mensajes
utilizando estos elementos a las que se le han definido estilos (por ahora solo
conocemos el
color de texto y fondo)
</strong> <hr>
<h1> �Si puedes so�arlo puedes hacerlo, recuerda que todo esto comenz� con un
rat�n.� Walt Disney</h1>
<h2> �C�ete siete veces y lev�ntate ocho.� Proverbio japon�s.</h2>
<h3> �El triunfo del verdadero hombre surge de las cenizas del error.� Pablo
Neruda </h3>
<h4> �Todo lo que puedas imaginar, es real.� Pablo Picasso</h4>
<h5> �El fracaso no es una opci�n. Todo el mundo tiene que triunfar.� Arnold
Schwarzenegger </h5>
<h6> �Un objetivo sin un plan es solo un deseo.� Antoine de Saint-Exup�ry </h6>
<hr>
</body>
</html>
20 EJECICIO
<!DOCTYPE html>
<html>
<head>
h1 {
font:30px Helvetica;
}
h2 {
font:25px Arial;
}
h3 {
font:20px Courier;
}

size: 12px }
</style>
</head>
<body>
<br><br>
Definir formatos reducidos para la propiedad font de los elementos h1,h2 y
h3.
Luego probar con tres t�tulos los resultados obtenidos.
</strong> <hr>
<h1>La tarde en la que acab� el mundo se besaron en la ventana, enlazados el uno

con el otro. La luz declinaba afuera, apag�ndose poco a poco: todav�a era rojiza y
dorada en la distancia, tras los edificios que se recortaban en ella, mientras las
primeras sombras oscurec�an los �ngulos de calles y edificios. Abajo no hab�a
p�nico, ni carreras, ni gritos de desesperaci�n. Una multitud serena caminaba
despacio por la ciudad: parejas abrazadas, ni�os que iban de la mano de sus padres,
ancianos parados un momento en las aceras, que miraban alrededor como quien busca
identificar un rostro o un recuerdo. En los sem�foros destellaban intermitentes las
luces color �mbar, los coches se dejaban en la calle con las puertas abiertas, y
algunos de sus propietarios ni siquiera apagaban el motor antes de alejarse
lentamente, sin mirar atr�s.</br>
La llama de tu amor.</h1>
<h2>Las �ltimas tiendas se vaciaban, aunque nadie encend�a los r�tulos luminosos ni
los escaparates. No hab�a saqueos, ni disturbios; los polic�as caminaban en calma,
despoj�ndose indiferentes de sus armas y sus insignias. Los bomberos no ten�an nada
que hacer: estaban sentados en las escaleras de sus parques y en la puerta de los
garajes, ociosos junto a sus camiones cromados y rojos, sonriendo a quienes los
saludaban despidi�ndose. Por toda la ciudad la gente se dec�a adi�s igual que si
fuera Navidad, estrech�ndose amable la mano o bes�ndose en la cara.</h2> </br>
<h3>Casi todos sonre�an serenos y melanc�licos, como despu�s de una cena o una
fiesta agradable. En las aceras, inm�viles pese a no llevar correa ni estar atados,
algunos perros aguardaban pacientes a sus amos, lamiendo las manos de los ni�os
que, al pasar por su lado, los acariciaban.</h3> </br>
</body>
</html>
21 EJECICIO
<!DOCTYPE html>
<html>
<head>
h1,h2,h3 {
border-top: 1px solid #5882FA;
border-bottom: 1px solid #5882FA;
}

size: 12px }
</style>
<body>
<br><br>
Confeccionar una p�gina que disponga una l�nea en la parte inferior y
superior de
los t�tulos de nivel 1,2 y 3. Inicializar las propiedades border-top y border-
bottom
para dicho cometido.
<h1>Las sombras del mal</h1></br>

<h2>Sobre moros y cristianos</h2></br>
<h3>Por una falda de pl�tanos </h3></br>
</body>
</html>
22 EJECICIO
<!DOCTYPE html>
<html>
<head>
.ancho {
padding:2px;
}
.mediano {
padding:10px 12px;
background-color:#A9BCF5;
}
.corto {
padding:5px 0px 20px 40px;
}

size: 12px }
</style>
</head>
<body>
<br><br>
Definir tres clases distintas con formatos diferentes para expresar el
padding.
Aplicar las clases a tres p�rrafos.
</strong> <hr>
<p class="ancho">De pronto, como si un remolino hubiera echado ra�ces en el centro

del pueblo, lleg� la compa��a bananera perseguida por la hojarasca. Era una
hojarasca revuelta, alborotada, formada por los desperdicios humanos y materiales
de los otros pueblos; rastrojos de una guerra civil que cada vez parec�a m�s remota
e inveros�mil. La hojarasca era implacable. Todo lo contaminaba de su revuelto olor
multitudinario, olor de secreci�n a flor de piel y de rec�ndita muerte. En menos de
un a�o arroj� sobre el pueblo los escombros de numerosas cat�strofes anteriores a
ella misma, esparci� en las calles su confusa carga de desperdicios. Y esos
desperdicios, precipitadamente, al comp�s atolondrado e imprevisto de la tormenta,
se iban seleccionando, individualiz�ndose, hasta convertir lo que fue un callej�n
con un r�o en un extremo un corral para los muertos en el otro, en un pueblo
diferente y complicado, hecho con los desperdicios de los otros pueblos. All�
vinieron, confundidos con la hojarasca humana, arrastrados por su impetuosa fuerza,
los desperdicios de los almacenes, de los hospitales, de los salones de diversi�n,
de las plantas el�ctricas; desperdicios de mujeres solas y de hombres que amarraban
la mula en un horc�n del hotel, trayendo como un �nico equipaje un ba�l de madera o
un atadillo de ropa, y a los pocos meses ten�an casa propia, dos concubinas y el
t�tulo militar que les quedaron debiendo por haber llegado tarde a la guerra
</p>
<p class="mediano">Durante el fin de semana los gallinazos se metieron por los
balcones de la casa presidencial, destrozaron a picotazos las mallas de alambre de
las ventanas y removieron con sus alas el tiempo estancado en el interior, y en la
madrugada del lunes la ciudad despert� de su letargo de siglos con una tibia y
tierna brisa de muerto grande y de podrida grandeza. S�lo entonces nos atrevimos a
entrar sin embestir los carcomidos muros de piedra fortificada, como quer�an los
m�s resueltos, ni desquiciar con yuntas de bueyes la entrada principal, como otros
propon�an, pues bast� con que alguien los empujara para que cedieran en sus goznes
los portones blindados que en los tiempos heroicos de la casa hab�an resistido a
las lombardas de William Dampier. Fue como penetrar en el �mbito de otra �poca,
porque el aire era m�s tenue en los pozos de escombros de la vasta guarida del
poder, y el silencio era m�s antiguo, y las cosas eran arduamente visibles en la
luz decr�pita
</p>
<p class="corto">En cuanto a Occidente, ya no se trata s�lo de un conflicto a�ejo,
dormido durante cinco siglos, entre dos concepciones opuestas del mundo. Millones
de musulmanes vinieron a Europa en busca de una vida mejor. Est�n aqu�, se van a
quedar para siempre y vendr�n m�s. Pero, pese a la buena voluntad de casi todos
ellos, y pese tambi�n a la favorable disposici�n de muchos europeos que los acogen,
hay cosas imposibles, integraciones dificil�simas, concepciones culturales,
sociales, religiosas, que jam�s podr�n conciliarse con un r�gimen de plenas
libertades. Es falaz lo del respeto mutuo.
</p>

</body>
</html>
23 EJECICIO
<!DOCTYPE html>
<html>
<head>
h1 {
margin: 1px 2px 3;border: red 2px solid;
}
h2 {
margin: 2px 4px 8px ; border: red 2px solid;
}
h3 {
margin: 41px 8px 12px 16px;border: red 2px solid;
}

size: 12px }
</style>
<body>
<br><br>
Confeccionar una p�gina con t�tulos de nivel h1,h2 y h3. Definir distintos
m�rgenes
para cada lado.
<h1>Las sombras del mal</h1>

<h2>Sobre moros y cristianos</h2>
<h3>Por una falda de pl�tanos </h3>
</body>
</html>
24 EJECICIO
<!DOCTYPE html>
<html>
<head>
h1 {
background: url(https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcSUIy1lvvaut1uTRtQ-s8uHao5V5WHvcDpsijH3ZXBJ8oHLL8AQ) repeat;
color:white; text-align: center;
}

size: 12px }
</style>
<body>
<br><br>
Confeccionar una p�gina que inicialice el fondo de un elemento h1 con una
imagen.
<h1>Las sombras del mal</h1>
</body>
</html>
25 EJECICIO
<!DOCTYPE html>
<html>
<head>
* {
color:#666666;
font-family:Helvetica;
margin:10px;
padding:2px;
}
size: 12px }
</style>
<body>
<br><br>
Defina cuatro propiedades para el selector universal y luego implemente una
p�gina
HTML que pruebe su funcionamiento.

<h5>Pobrecita Frances Farmer. Las pag� caro. C�mo fue a ocurr�rsele, hace m�s de
medio siglo, exigir autodeterminaci�n e igualdad de derechos frente a sus pares
pecado era no bastarle con ser la rubia bonita.</h5></br> </br>
<h5>Luego de un par de matrimonios fallidos y de conflictos tanto familiares como

tantas, pag� por ser una adelantada,</h5></br> </br>
</body>
</html>
26 EJECICIO
<!DOCTYPE html>
<html>
<head>
a {
font-size:30px;
}
a:hover{
font-size:40px;
background-color:#ffff00;
}

size: 12px }
</style>
<body>
<br><br>
Definir la propiedad font-size con un valor distinto cuando la flecha del
mouse est�
sobre el link y pintar al mismo tiempo el fondo de color amarillo.
<p style="word-spacing: 80px;">

<a href="http://www.google.com">Google</a>
<a href="https://www.samsung.com/latin/">Samsung</a>
<a href="http://www.espol.edu.ec/">Espol</a>
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
a:link {
text-decoration: line-through;
}
a:visited {
}

size: 12px }
</style>
<body>
<br><br>
Configurar los enlaces que aparezcan con una l�nea tachada en lugar de
subrayado.

</p>
</body>
</html>
27 EJECICIO
<!DOCTYPE html>
<html>
<head>
a:link {
}
a:visited {
}

size: 12px }
</style>
<body>
<br><br>
subrayado.

</p>

</body>
</html>
28 SIN CAPA EJECICIO

<!DOCTYPE html>
<html>
<head>
p a {
padding: 3px;
width: 160px;
background-color: #f7f8e8;
border-bottom: 1px solid #eeeeee;
text-align:center;
border:1px solid #000000; }
p a:link, p a:visited {
color: #ff0000;
text-decoration: none;
}
p a:hover {background-color: #336699;
color: #ffffff; }

size: 12px }
</style>
<body>
<br><br>
subrayado.

</p>
</body>
</html>
29 EJECICIO
<!DOCTYPE html>
<html>
<head>
#menuhorizontal, #menuvertical {
margin:5px;
padding:15px;
list-style-type:none;
}
#menuhorizontal a {
width:100px;
text-decoration:none;
text-align:center;
color:#ff0000;
background-color:#f7f8e8;
padding:3px 5px;
border-right:1px solid blue;
display:block;
}
#menuhorizontal li {
float:left;
}
#menuhorizontal a:hover,#menuvertical a:hover {

}
#menuvertical a {
width:100px;
text-decoration:none;
text-align:center;
color:#ff0000;
background-color:#f7f8e8;
padding:3px 5px;
border-right:1px solid blue;
display:block;
}

size: 12px }
</style>
<body>
<br><br>
Implemente un men� horizontal y un men� vertical a la izquierda.
<ul id="menuhorizontal">
<li><a href="http://www.google.com">Google</a></li>
<li><a href="https://www.samsung.com/latin/">Samsung</a></li>
<li><a href="http://www.espol.edu.ec/">Espol</a></li>
</ul>
<div id="menuvertical">
<li><a href="http://www.google.com">Google</a></li>
<li><a href="https://www.samsung.com/latin/">Samsung</a></li>
<li><a href="http://www.espol.edu.ec/">Espol</a></li>
</div>
</body>
</html>
30 EJECICIO
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Cairo|Comfortaa|Jura|
Maven+Pro|Play|Rajdhani|Roboto" rel="stylesheet">
em {color:#dddddd;}
.modificado { width:200px;text-align:justify;;}

size: 12px }
</style>
</head>
<body>
<br><br>
Crear una p�gina HTML que muestre dos p�rrafos, a uno de ellos aplicarle el
siguiente estilo:
.parrafoestrecho {
width:200px;
text-align:justify;
}
</strong> <hr>
<p class="modificado"> "De pronto, como si un remolino hubiera echado ra�ces

en el centro del pueblo, lleg� la compa��a bananera perseguida por la hojarasca.
Era una hojarasca revuelta, alborotada, formada por los desperdicios humanos y
materiales de los otros pueblos; rastrojos de una guerra civil que cada vez parec�a
m�s remota e inveros�mil. La hojarasca era implacable. Todo lo contaminaba de su
revuelto olor multitudinario, olor de secreci�n a flor de piel y de rec�ndita
muerte. En menos de un a�o arroj� sobre el pueblo los escombros de numerosas
cat�strofes anteriores a ella misma, esparci� en las calles su confusa carga de
desperdicios. Y esos desperdicios, precipitadamente, al comp�s atolondrado e
imprevisto de la tormenta, se iban seleccionando, individualiz�ndose, hasta
convertir lo que fue un callej�n con un r�o en un extremo un corral para los
muertos en el otro, en un pueblo diferente y complicado, hecho con los desperdicios
de los otros pueblos. All� vinieron, confundidos con la hojarasca humana,
arrastrados por su impetuosa fuerza, los desperdicios de los almacenes, de los
hospitales, de los salones de diversi�n, de las plantas el�ctricas; desperdicios de
mujeres solas y de hombres que amarraban la mula en un horc�n del hotel, trayendo
como un �nico equipaje un ba�l de madera o un atadillo de ropa, y a los pocos meses
ten�an casa propia, dos concubinas y el t�tulo militar que les quedaron debiendo
por haber llegado tarde a la guerra�. <em>La hojarasca, 1955</em></p>
<hr>
<p> "Durante el fin de semana los gallinazos se metieron por los balcones de la
casa presidencial, destrozaron a picotazos las mallas de alambre de las ventanas y
removieron con sus alas el tiempo estancado en el interior, y en la madrugada del
lunes la ciudad despert� de su letargo de siglos con una tibia y tierna brisa de
muerto grande y de podrida grandeza. S�lo entonces nos atrevimos a entrar sin
embestir los carcomidos muros de piedra fortificada, como quer�an los m�s
resueltos, ni desquiciar con yuntas de bueyes la entrada principal, como otros
propon�an, pues bast� con que alguien los empujara para que cedieran en sus goznes
los portones blindados que en los tiempos heroicos de la casa hab�an resistido a
las lombardas de William Dampier. Fue como penetrar en el �mbito de otra �poca,
porque el aire era m�s tenue en los pozos de escombros de la vasta guarida del
poder, y el silencio era m�s antiguo, y las cosas eran arduamente visibles en la
luz decr�pita�. <em>El oto�o del patriarca, 1975</em></p>
</body>
</html>
09 EJECICIO
<!DOCTYPE html>
<html>
<head>
h1 em {color:#dddddd;}
h2 em { color: #cccccc;}
h3 em { color: #bbbbbb;}
h4 em { color: #aaaaaa;}
h5 em {color: #999999;}
h6 em { color: #888888;}
body {color: #0676B2}
size: 12px }
</style>
</head>
<body>
<br><br>
Definir distintas escalas de grises para los textos contenidos por el
elemento "em"
que se encuentren contenidos por los elementos h1,h2,h3,h4,h5 y h6.
</strong> <hr>
<h1> �Si puedes so�arlo puedes hacerlo, recuerda que todo esto comenz� con un
rat�n.� <em>Walt Disney</em></h1>
<h2> �C�ete siete veces y lev�ntate ocho.� <em>Proverbio japon�s</em></h2>
<h3> �El triunfo del verdadero hombre surge de las cenizas del error.�
<em>Pablo Neruda</em></h3>
<h4> �Todo lo que puedas imaginar, es real.� <em>Pablo Picasso</em></h4>
<h5> �El fracaso no es una opci�n. Todo el mundo tiene que triunfar.�
<em>Arnold Schwarzenegger</em> </h5>
<h6> �Un objetivo sin un plan es solo un deseo.� <em>Antoine de Saint-
Exup�ry</em> </h6>
<hr>
</body>
</html>

Ejercicos Web

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Ejercicos Web

Загружено:

Авторское право:

Доступные форматы

1 EJECICIO

#by { color:orange;font-size: 20px}

<strong id="tema"> EJERCICIO # 1 </br>

<h1> Hola a todos </h1>

<p id="by"> By: Carlos Lombeida </p>

body{ color: #585858 ; font-family: 'Jura', sans-serif;}

#by { color:orange;font-size: 20px ; font-family: 'Play', sans-serif;}

<p id="by"> By: Carlos Lombeida </p>

#by { color:orange;font-size: 20px}

<h1>Las �ltimas tinieblas</h1>

<p id="by"> By: Carlos Lombeida </p>

#by { color:orange;font-size: 20px}

<p id="by"> By: Carlos Lombeida </p>

<h3>Lobotom�a para una adelantada</h3>

Luego de un par de matrimonios fallidos y de conflictos tanto familiares como

El cerebro, un peque�o y complejo universo </br>

He dicho que el cerebro es nuestro �rgano m�s importante, y lo es porque aunque el

<p id="by"> By: Carlos Lombeida </p>

<h3>Lobotom�a para una adelantada</h3>

Luego de un par de matrimonios fallidos y de conflictos tanto familiares como

El cerebro, un peque�o y complejo universo </br>

He dicho que el cerebro es nuestro �rgano m�s importante, y lo es porque aunque el

<p id="by"> By: Carlos Lombeida </p>

h1{ color:#C5D6E6 ;background-color:rgba(160,118,106);}

#by { color:orange;font-size: 20px}

<p id="by"> By: Carlos Lombeida </p>

#by { color:orange;font-size: 20px}

<h1>La tarde en la que acab� el mundo se besaron en la ventana, enlazados el uno

<p id="by"> By: Carlos Lombeida </p>

#by { color:orange;font-size: 20px}

<h1>Las sombras del mal</h1></br>

<p id="by"> By: Carlos Lombeida </p>

#by { color:orange;font-size: 20px}

<p class="ancho">De pronto, como si un remolino hubiera echado ra�ces en el centro

<p id="by"> By: Carlos Lombeida </p>

#by { color:orange;font-size: 20px}

<h1>Las sombras del mal</h1>

<p id="by"> By: Carlos Lombeida </p>

#by { color:orange;font-size: 20px}

<h1>Las sombras del mal</h1>

<p id="by"> By: Carlos Lombeida </p>

<h3>Lobotom�a para una adelantada</h3>

<h5>Luego de un par de matrimonios fallidos y de conflictos tanto familiares como

<p id="by"> By: Carlos Lombeida </p>

#by { color:orange;font-size: 20px}

<p style="word-spacing: 80px;">

<p id="by"> By: Carlos Lombeida </p>

#by { color:orange;font-size: 20px}

<p style="word-spacing: 80px;">

<p id="by"> By: Carlos Lombeida </p>

#by { color:orange;font-size: 20px}

<p style="word-spacing: 80px;">

<p id="by"> By: Carlos Lombeida </p>

28 SIN CAPA EJECICIO

#by { color:orange;font-size: 20px}

<p style="word-spacing: 80px;">

<p id="by"> By: Carlos Lombeida </p>

#menuhorizontal a:hover,#menuvertical a:hover {

#by { color:orange;font-size: 20px}

<p id="by"> By: Carlos Lombeida </p>

#by { color:orange;font-size: 20px}

<p class="modificado"> "De pronto, como si un remolino hubiera echado ra�ces

<p id="by"> By: Carlos Lombeida </p>

<p id="by"> By: Carlos Lombeida </p>