Aprende a programar desde cero con el libro "Aprender a programar. Algoritmos y fundamentos de programación orientados a la ingeniería y ciencias". 748 pgs. Editorial aprenderaprogramar.com.
Mostrar Mensajes
Esta sección te permite ver todos los posts escritos por este usuario. Ten en cuenta que sólo puedes ver los posts escritos en zonas a las que tienes acceso en este momento.
EJERCICIO
Crea un documento HTML y un archivo con la hoja de estilos CSS que cumpla con estos requisitos:
a) Deben exisitir tres contenedores (div1, div2 y div3) situados en horizontal, cada uno con margin 33px en todas direcciones, sin relleno, ancho de 180 píxeles, altura de 300 píxeles y borde sólido de 6 píxeles de anchura con color de borde rojo.
b) El div 1 debe contener un texto suficientemente largo, con numerosos párrafos, como para exceder el tamaño del contenedor. El texto del html debe transformarse completamente a mayúsculas mediante el uso de propiedades CSS. La separación entre letras debe ser un 5% superior a lo normal. La primera letra de cada párrafo debe tener un tamaño un 250% lo normal.
c) El div 2 debe contener un texto suficientemente largo como para exceder el tamaño del contenedor. El texto del html debe transformarse completamente a minúsculas mediante el uso de propiedades CSS. La separación entre letras debe ser un 10% superior a lo normal. Debe contener una palabra (cadena de texto cualquiera) de gran longitud, de modo que no quepa en el contenedor, y “romperse” para no exceder la capacidad del contenedor usando la propiedad word-wrap.
d) El div 3 debe contener un texto suficientemente largo como para exceder el tamaño del contenedor. El texto del html debe transformarse para que toda palabra comience con una letra mayúscula mediante el uso de propiedades CSS. La separación entre palabras debe ser un 10% superior a lo normal. Debe contener una palabra (cadena de texto cualquiera) de gran longitud, de modo que no quepa en el contenedor, y no romperse.
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Ejercicio_estilosCU01042D.css">
</head>
<body>
<div id="caja1">
<p>Los úrsidos(Ursidae) son una familia de mamíferos carnívoros conocidos comúnmente como osos.</p>
<p>Son animales de gran tamaño, generalmente omnívoros ya que, a pesar de su temible dentadura, comen frutos, raíces e insectos, además de carne.</p>
<p>Sin embargo, el oso polar, debido a la escasez de otras fuentes de alimento, se alimenta casi únicamente de carne.</p>
<p>Con sus pesados cuerpos y sus poderosas mandíbulas, los osos se cuentan entre los mayores carnívoros que viven en la Tierra.</p>
<p>Un macho de oso polar pesa en promedio 500 kg y alcanza una talla de hasta 130 cm a la altura de la cruz.</p>
<p>Se mueven con un caminar pesado, apoyando toda la planta de los pies (son, por lo tanto, animales plantígrados).</p>
</div>
<div id="caja2">Las serpientes (Serpentes) u ofidios (Ophidia) (Electrocardiográficamente)son un suborden de saurópsidos (reptiles) diápsidos pertenecientes al orden Squamata, superorden de los <span class="sombra2">Lepidosaurios</span>, caracterizado por la ausencia de patas (la pitón mantiene diminutas extremidades fruto de su proceso evolutivo)1 y el cuerpo muy alargado. Se originaron en el período Cretácico.
Las serpientes se caracterizan por la ausencia de extremidades y cuerpo alargado. Algunas poseen mordeduras venenosas, como las cobras y las víboras, que utilizan para matar a sus presas antes de ingerirlas. Otras serpientes, como las boas y pitones, matan a sus presas por constricción.
</div>
<div id="caja3">El leopardo es uno de los grandes felinos más adaptables. Supercalifragilisticoespialidoso. Electrocardiográficamente. Excepto en desiertos, habita en todo tipo de hábitats, siempre que tenga un lugar donde esconderse y existan suficientes presas para sobrevivir; se encuentra presente en todo tipo de bosques y selvas, en las sabanas, en los sembrados y en lugares rocosos. En algunos hábitats, el <span class="sombra3">leopardo</span> desarrolla formas para evadir a otros depredadores mayores o más numerosos como es el caso del león y las hienas en África y el tigre en Asia. Se denomina así a los leopardos melánicos. El color negro es producido por una gran cantidad de melanóforos (células pertenecientes a una de las capas de la piel) distribuidos por toda la superficie corporal.Realmente, el único factor que limita al leopardo son las personas.</div>
</body>
</html>div{
float: left;
margin: 33px;
padding: 0;
width: 180px;
height: 300px;
border: solid 6px red;
}
#caja1{
text-transform: uppercase;
letter-spacing: 5px;
}
#caja1 p::first-letter{
font-size: 250%;
text-transform: uppercase;
}
#caja2{
text-transform: lowercase;
letter-spacing: 10px;
word-wrap: break-word;
}
#caja3{
text-transform: capitalize;
word-spacing: 10px;
}
p::first-letter, ¿porque se usa es sintaxis?<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Ejercicio_estilosCU01040D.css">
</head>
<body>
<div id="caja1">En el API de Java no solo existen clases. Hay bastantes más cosas como clases abstractas o interfaces, de lo que hablaremos
más adelante. De momento vamos a <span class="subrayado">centrarnos</span> en las clases y para ello hemos de prestar atención a aquello que nos aparece en el encabezado de la
<span class="subrayado">documentación</span> que consultemos.
En un fichero se encuentran las notas de 35 alumnos <span class="subrayado">de</span> una clase en un array Nota(1), Nota(2), Nota(3), ..., Nota(35), establecidas
entre cero y 10.
</div>
<div id="caja2">El área de programación y desarrollo de <span class="subrayadoEncima">software</span> de aprenderaprogramar.com
ha pasado a constar en el.
Joomla Resource Directory (directorio de <span class="subrayadoEncima">recursos</span> para la comunidad Joomla) tras haber
superado los requisitos establecidos por el JRD Team, un equipo de la comunidad de software libre Joomla CMS
que evalúa la calidad
de las empresas que aspiran a integrarse en el directorio.</div>
<div id="caja3">Esta propiedad <span class="tachado">sirve</span> para evitar el uso de las antiguas etiquetas HTML de subrayado y <span class="tachado">tachado</span> . ¿Por qué no deben usarse estas etiquetas HTML? Porque como ya hemos comentado con anterioridad en los <span class="tachado">desarrollos</span> web actuales HTML debe usarse exclusivamente para definir la estructura y contenedores del documento, mientras que los estilos deben estar definidos por separado mediante CSS.
</div>
</body>
</html>/* Curso CSS estilos aprenderaprogramar.com*/
*{font-family: arial;}
div{
float: left;
margin: 20px;
padding: 10px;
width: 200px;
height: 400px;
border: solid 4px;
}
#caja1{
text-align: center;
color: #FF6347;
text-indent: 10%;
}
#caja2{
text-align: right;
color: #008080;
text-indent: 50%;
white-space: pre-line;
}
#caja3{
text-align: justify;
color: #8B4513;
text-indent: 20%;
white-space: pre-wrap;
}
.subrayado{text-decoration: underline;}
.subrayadoEncima{text-decoration: overline;}
.tachado{text-decoration: line-through;}white-space: pre-wrap;
la linea text-align: justify; public Persona () {
nombre = "";
apellidos = "";
numeroDocumentoIdentidad = "";
edad = 0;
casado = false;
}EJERCICIOCódigo HTML:
Crea un documento HTML con 2 elementos div de anchura 250 píxeles, con un margen de 20px en todas direcciones y uno junto al otro (en horizontal). En cada div introduce un texto (p.ej. div 1, div 2) y aplícale los siguientes estilos de borde y relleno a ambos elementos. Color de fondo #FFB6C1. La parte superior con borde de puntos redondeados, grosor 15 píxeles, color #DC143C y relleno de 30 píxeles. La parte derecha con borde de trazos o segmentos rectangulares, grosor 10 píxeles, color verde y relleno de 45 píxeles. La parte inferior con borde de línea doble, grosor 10 píxeles, color #FF00FF y relleno 0 píxeles. La parte izquierda con borde con efecto ridge, grosor 40 píxeles, color #2F4F4F y relleno 60 píxeles.
Responde a las siguientes preguntas:
a) ¿Cuál es el ancho total ocupado por cada div (incluyendo sus bordes y rellenos)?
b) ¿Cuál es el alto total ocupado por cada div (incluyendo sus bordes y rellenos)?
c) ¿Cuál es el ancho total desde el límite izquierdo del borde del div más a la izquierda hasta el límite derecho del borde del div más a la derecha (teniendo en cuenta márgenes, bordes y rellenos)?
<html>
<head>
<title>W3C Validator</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilos_ejercicioCU01029D.css">
</head>
<body>
<div>div 1</div>
<div>div 2</div>
</body>
</html>div {
display:inline-block;
font-size: 100px;
margin: 20px;
padding: 30px 45px 0px 60px;
width: 250px;
background-color: #FFB6C1;
border-style: dotted dashed double ridge;
border-color: #DC143C green #FF00FF #2F4F4F;
border-width: 15px 10px 10px 40px
}EJERCICIO 1
Crea un documento HTML con 2 divisiones, cada una separada de la anterior por dos elementos <br/>. En cada división introduce un texto (p.ej. div 1, div 2) y aplícale los siguientes estilos de borde escribiendo de forma individual cada una de las siguientes propiedades CSS:
a) Para el div 1: la parte superior con borde de puntos redondeados, grosor 10 píxeles y color verde. La parte derecha con borde de trazos o segmentos rectangulares, grosor 20 píxeles y color azul. La parte inferior con borde de línea doble, grosor 10 píxeles y color #A52A2A. La parte izquierda con borde con efecto groove, grosor 30 píxeles y color #2F4F4F.
b) Para el div 2: la parte superior con borde con efecto inset, grosor 30 píxeles y color #B22222. La parte derecha con borde sólido, grosor 22 píxeles y color #DAA520. La parte inferior con borde de línea doble, grosor 25 píxeles y color #4B0082. La parte izquierda con borde de puntos redondeados, grosor 17 píxeles y color #808000.
EJERCICIO 2
Crea un documento HTML con el mismo aspecto y propiedades CSS que las descritas para el ejercicio 1, pero en este caso usando la notación shortand de bordes CSS y la propiedad border abreviada.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>W3C Validator</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilos_ejercicioCU01027D_1.css">
</head>
<body>
<div id="uno">div 1</div>
<br/><br/>
<div id="dos">div 2</div>
<br/><br/>
<div id="tres">div 1</div>
<br/><br/>
<div id="cuatro">div 2</div>
</body>
</html>#uno{
border-top-style: dotted;
border-top-width: 10px;
border-top-color: green;
border-right-style: dashed;
border-right-width: 20px;
border-right-color: blue;
border-bottom-style: double;
border-bottom-width: 10px;
border-bottom-color: #DAA520;
border-left-style: groove;
border-left-width: 30px;
border-left-color: #2F4F4F;
}
#dos{
border-top-style: inset;
border-top-width: 30px;
border-top-color: #B22222;
border-right-style: solid;
border-right-width: 22px;
border-right-color: #DAA520;
border-bottom-style: double;
border-bottom-width: 25px;
border-bottom-color: #4B0082;
border-left-style: dotted;
border-left-width: 17px;
border-left-color: #808000;
}
#tres{
border-style: dotted dashed double groove;
border-width: 10px 20px 10px 30px;
border-color: green blue #DAA520 #2F4F4F;
}
#cuatro{
border-style: inset solid double dotted;
border-width: 30px 22px 25px 17px;
border-color: #B22222 #DAA520 #4B0082 #808000;
}EJERCICIO
Los navegadores aplican un tamaño por defecto a los títulos h1 a h6, aunque estos tamaños no son siempre los mismos sino que dependen del navegador que se emplee. Para el navegador que estés empleando, divide la página web en una cuadrícula con 5 espacios a lo ancho y 6 espacios a lo alto, tal y como se ve en la siguiente tabla. En cada espacio, muestra un texto y la forma en que se ha definido el tamaño. Por ejemplo: h1 (predefinido), h1 (px), h1 (em), h1 (pt), h1 (%). El resultado ha de ser que todo se vea del mismo tamaño y modo, pero sin embargo la forma de definir el estilo será diferente en cada caso.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Unidades de medida</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilos_ejercicioCU01024D.css">
</head>
<body>
<div>
<h1>Unidades de medida</h1>
</div>
<div>
<table>
<th>Título</th>
<th>Tamaño px</th>
<th>Tamaño em</th>
<th>Tamaño pt</th>
<th>Tamaño %</th>
<tr>
<td><h1>h1</h1></td>
<td id="uno">h1 (30px)</td>
<td id="dos">h1 (2em)</td>
<td id="tres">h1 (24pt)</td>
<td id="cuatro">h1 (200%)</td>
</tr>
<tr>
<td><h2>h2</h2></td>
<td id="cinco">h2 (24px)</td>
<td id="seis">h2 (1.5em)</td>
<td id="siete">h2 (18pt)</td>
<td id="ocho">h2 (150%)</td>
</tr>
<tr>
<td><h3>h3</h3></td>
<td id="nueve">h3 (19px)</td>
<td id="diez">h3 (1.2em)</td>
<td id="once">h3 (14pt)</td>
<td id="doce">h3 (120%)</td>
</tr>
<tr>
<td><h4>h4</h4></td>
<td id="trece">h4 (16px)</td>
<td id="catorce">h4 (1em)</td>
<td id="quince">h4 (12pt)</td>
<td id="dieciseis">h4 (100%)</td>
</tr>
<tr>
<td><h5>h5</h5></td>
<td id="diecisiete">h5 (13px)</td>
<td id="dieciocho">h5 (0.8em)</td>
<td id="diecinueve">h5 (10pt)</td>
<td id="veinte">h5 (80%)</td>
</tr>
<tr>
<td><h6>h6</h6></td>
<td id="veintiuno">h6 (11px)</td>
<td id="veintidos">h6 (0.7em)</td>
<td id="veintitres">h6 (8pt)</td>
<td id="veinticuatro">h6 (70%)</td>
</tr>
</table>
</div>
</body>
</html>table{
border-collapse:
collapse; border: solid 1px #000;
width: 80%;
text-align: center;
}
td, th{border: 1px solid #000;}
#uno{font-size: 30px; font-weight: bold;}
#dos{font-size: 2em; font-weight: bold;}
#tres{font-size: 24pt; font-weight: bold;}
#cuatro{font-size: 200%; font-weight: bold;}
#cinco{font-size: 24px; font-weight: bold;}
#seis{font-size: 1.5em; font-weight: bold;}
#siete{font-size: 18pt; font-weight: bold;}
#ocho{font-size: 150%; font-weight: bold;}
#nueve{font-size: 19px; font-weight: bold;}
#diez{font-size: 1.2em; font-weight: bold;}
#once{font-size: 14pt; font-weight: bold;}
#doce{font-size: 120%; font-weight: bold;}
#trece{font-size: 16px; font-weight: bold;}
#catorce{font-size: 1em; font-weight: bold;}
#quince{font-size: 12pt; font-weight: bold;}
#dieciseis{font-size: 100%; font-weight: bold;}
#diecisiete{font-size: 13px; font-weight: bold;}
#dieciocho{font-size: 0.8em; font-weight: bold;}
#diecinueve{font-size: 10pt; font-weight: bold;}
#veinte{font-size: 80%; font-weight: bold;}
#veintiuno{font-size: 11px; font-weight: bold;}
#veintidos{font-size: 0.7em; font-weight: bold;}
#veintitres{font-size: 8pt; font-weight: bold;}
#veinticuatro{font-size: 70%; font-weight: bold;}
El código resultante de todo el proceso, más algunos detalles básicos de diseño (no te preocupes si no entiendes algunos elementos definidos con style, lo importante es comprender el código y estructura HTML), sería el que se muestra a continuación. Abre un editor como Notepad++, escríbelo y guárdalo con un nombre como ejemplo1.html. A continuación, visualiza el resultado en tu navegador.
Se plantea desarrollar un programa Java que permita representar la siguiente situación. Una instalación deportiva es un recinto delimitado donde se practican deportes, en Java interesa disponer de un método int getTipoDeInstalacion(). Un edificio es una construcción cubierta y en Java interesa disponer de un método double getSuperficieEdificio(). Un polideportivo es al mismo tiempo una instalación deportiva y un edificio; en Java interesa conocer la superficie que tiene y el nombre que tiene. Un edificio de oficinas es un edificio; en Java interesa conocer el número de oficinas que tiene.
Definir dos interfaces y una clase que implemente ambas interfaces para representar la situación anterior. En una clase test con el método main, crear un ArrayList que contenga tres polideportivos y dos edificios de oficinas y utilizando un iterator, recorrer la colección y mostrar los atributos de cada elemento. ¿Entre qué clases existe una relación que se asemeja a la herencia múltiple?
public interface InstalacionDeportiva{
int getTipoDeInstalacion();
}public interface Edificio{
double getSuperficieEdificio();
}
public class Polideportivo implements InstalacionDeportiva, Edificio{
private String nombre;
private int tipoDeInstalacion;
private double superficie;
public Polideportivo(){
nombre = "";
tipoDeInstalacion = 0;
superficie = 0;
}
public Polideportivo(String nombre, int tipoDeInstalacion, double superficie){
this.nombre = nombre;
this.tipoDeInstalacion = tipoDeInstalacion;
this.superficie = superficie;
}
public void setNombre(String nombre){ this.nombre = nombre; }
public void setTipoDeInstalacion(int tipoDeInstalacion){ this.tipoDeInstalacion = tipoDeInstalacion; }
public void setSuperficie(double superficie){ this.superficie = superficie; }
public String getNombre(){ return nombre; }
public int getTipoDeInstalacion(){ return tipoDeInstalacion; }
public double getSuperficieEdificio(){ return superficie; }
public String toString(){
return "Edificio tipo Polideportivo.\nNombre del polideportivo: " + nombre + "\nTipo de instalación: "
+ tipoDeInstalacion + "\nSuperficie: " + superficie + "m2\n-------------------";
}
}
public class EdificioDeOficinas implements Edificio{
private int numOficinas;
private double superficie;
public EdificioDeOficinas(){
numOficinas = 0;
superficie = 0;
}
public EdificioDeOficinas(int numOficinas, double superficie){
this.numOficinas = numOficinas;
this.superficie = superficie;
}
public void setNumOficinas(int numOficinas){ this.numOficinas = numOficinas; }
public void setSuperficie(double superficie){ this.superficie = superficie; }
public int getNumOficinas(){ return numOficinas; }
public double getSuperficieEdificio(){ return superficie; }
public String toString(){
Integer valorNumOficinas = numOficinas;
Double valorSuperficie = superficie;
return "Edificio tipo Edificio de Oficinas.\nNumero de oficinas: " + numOficinas + "\nSuperficie: "
+ superficie + "m2\n-------------------";
}
}
import java.util.ArrayList;
import java.util.Iterator;
public class TestInterface2{
public static void main (String [] Args){
ArrayList<Edificio> listaEdificios = new ArrayList<Edificio>();
listaEdificios.add(new Polideportivo("RHY", 1, 1233.45));
listaEdificios.add(new Polideportivo("GJKL", 1, 45687.56));
listaEdificios.add(new Polideportivo("SDW", 1, 78988.56));
listaEdificios.add(new EdificioDeOficinas(44, 45778.22));
listaEdificios.add(new EdificioDeOficinas(136, 5889.78));
Iterator<Edificio> it = listaEdificios.iterator();
while (it.hasNext()){
System.out.println(it.next().toString());
}
}
}while (it.hasNext()){
System.out.println(it.next().toString());
}Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.
Abraham Lincoln (1808-1865) Presidente estadounidense.
aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación
RSS -
WAP2