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.


Mensajes - JurreNawijn

Páginas: 1 [2]
21
Traigo el ejercicio una vez más resuelto.
Código: [Seleccionar]
<!DOCTYPE html>
    <html>
        <head>
            <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
            <style type="text/css">
                *{font-family: arial;}
                div {width: 200px; height: 400px; margin: 20px; padding: 10px; border-style:solid; border-width: 4px; display:inline-block;                         vertical-align:top;}
                #caja1 {text-align:center; color: #FF6347; text-indent: 10%;}
                .subrayado {text-decoration: underline;}
                #caja2 {text-align: right; color: #008080; text-indent: 50px; white-space:pre-line;}
                .subrayadoporencima {text-decoration: overline;}
                .tachado {text-decoration: line-through;}
                #caja3 {text-align: justify; color: #8B4513; text-indent: 20%; white-space:pre-wrap;}
                .espacio {outline: 1px dashed red;}
            </style>
        </head>
        <body>
            <div id="caja1">
            Hola, ¿Cómo estas? <span class="subrayado">Soy caja número 1</span> y vine hacer nuevos amigos en este vecindario.
            </div>
            <div id="caja2"> <p>Un texto <span class="subrayadoporencima">     
            suficientemente</span> largo para elaborar cosas extrañas de manera injusta :v</p>
            </div>
            <div id="caja3"> <p>¿Por qué <span class="tachado">siempre somos</span> el villano del cuento? ¿No podemos ser el héroe? Apartir de acá se empiezan a contar los 15 espacios:<span class="espacio">               </span>Listo</p>
            </div>
        </body>
</html>

Pero no comprendo lo de white-space: pre-warp. En ese caso lo he puesto para que mantenga los 15 espacios  y salte de línea cuando el contenedor llega a su borde.

22
Pues, ya no te podré ayudar más porqué mis conocimientos ya no se expanden más. Solo sé  HTML y un poco de CSS. Solo queda que algún sabio usuario te ayude pero aunque sea lo intenté.

23
Dejo el correspondiente código al ejercicio CU01045D del curso de CSS.

HTML:
Código: [Seleccionar]
<!DOCTYPE html>
    <html>
        <head>
            <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
            <style type="text/css">
            /*  El CSS se encuentra en la pestaña de abajo*/
</style>
        </head>
        <body>
            <div id="caja1"> <!-- Primera caja -->
                <p>HTML nació públicamente en un documento llamado HTML Tags (Etiquetas HTML), publicado por primera vez en Internet por Tim Berners-Lee en 1991. En esta publicación se describen 22 etiquetas que mostraban un diseño inicial y relativamente simple de HTML. Varios de estos elementos se conservan en la actualidad. Otros se han dejado de usar, y muchos otros se han ido añadiendo con el paso de los años. De esta manera, podemos hablar de que han existido distintas versiones de HTML a lo largo de la historia de internet. Nosotros vamos a trabajar con el HTML estándar actual, que es el utilizado por los navegadores y páginas web de hoy en día. Sin embargo, no vamos a prestarle atención a las versiones y especificidades de cada versión, ya que el objetivo de este curso es aprender los fundamentos de HTML y entender cómo funciona, no conocer la sintaxis o especificidades de una versión concreta. ¿Por qué no le damos importancia a la versión? Porque una persona que cuenta con los fundamentos y comprensión básica sobre el lenguaje es capaz de adaptarse a las características particulares de una versión sin problema. En cambio, centrarse en los detalles de una versión sin conocer los fundamentos hará que no tengamos capacidad para comprender lo que hacemos ni para adaptarnos a los continuos cambios que tienen lugar en el ámbito de los desarrollos web.</p>
                <p>¿Qué ocurriría si una etiqueta que abramos no tiene su correspondiente cierre? Digamos que se trataría de un código HTML mal construido, y los navegadores esto lo pueden interpretar de distintas maneras. Quizás nos muestren la página tal y como esperábamos sin aparente error. Quizás nos muestren una página de error o se quede en blanco el navegador. Nuestro objetivo ha de ser siempre construir páginas HTML bien estructuradas y sin ambiguedades, es decir, hacer un correcto uso del lenguaje para que los navegadores puedan saber exactamente qué es lo que pretendemos mostrar.</p>
            </div>
            <div id="caja2">
                <p>CSS es un lenguaje utilizado en la presentación de documentos HTML. Un documento HTML viene siendo coloquialmente “una página web”. Entonces podemos decir que el lenguaje CSS sirve para organizar la presentación y aspecto de una página web. Este lenguaje es principalmente utilizado por parte de los navegadores web de internet y por los programadores web informáticos para elegir multitud de opciones de presentación como colores, tipos y tamaños de letra, etc.</p>
                <p>La filosofía de CSS se basa en intentar separar lo que es la estructura del documento HTML de su presentación. Por decirlo de alguna manera: la página web sería lo que hay debajo (el contenido) y CSS sería un cristal de color que hace que el contenido se vea de una forma u otra. Usando esta filosofía, resulta muy fácil cambiarle el aspecto a una página web: basta con cambiar “el cristal” que tiene delante. Piensa por ejemplo qué ocurre si tienes un libro de papel y lo miras a través de un cristal de color azul: que ves el libro azul. En cambio, si lo miras a través de un cristal amarillo, verás el libro amarillo. El libro (el contenido) es el mismo, pero lo puedes ver de distintas maneras.</p>
                <p>Algunas opciones básicas del lenguaje CSS por ejemplo pueden ser el poder cambiar el color de algunas típicas etiquetas HTML como  (h1 es una etiqueta en el lenguaje HTML destinada a mostrar un texto como encabezado, en tamaño grande). Pero también hay funciones algo más complejas, como introducir espaciado entre elementos (div es una etiqueta HTML para identificar una determinada región o división de contenido dentro de una página web) o establecer imágenes de fondo.</p>
            </div>
            <div id="caja3">
                <p>
                    La respiración humana, como la de todos los animales terrestres, está basada en la absorción del aire atmosférico que está formada por una mezcla de oxigeno, nitrógeno y dióxido de carbono,  así como otros elementos (algunos contaminantes) en diversa proporción. Sin embargo, esta no es la única mezcla respirable por el hombre. De hecho, son harto conocidos los sketches televisivos en que se inhala helio o hexafluoruro de azufre, que si bien son inocuos, producen el efecto secundario de una voz aguda y grave respectivamente.  Ahora bien... una cosa es respirar una mezcla diferente de aire y otra muy diferente respirar un líquido como si se tratase de un pez. Pues, aunque le parezca mentira, si se llena sus pulmones de perfluorocarbono puede respirar como si estuviera en la superficie.
                </p>
                <p>
                    El ahogamiento, en todos los animales exclusivamente terrestres, se produce cuando los pulmones se llenan de agua y estos no pueden obtener el oxigeno del liquido que los rellena. En este caso, los pulmones no están diseñados para poder extraer el oxígeno de un líquido, de tal forma que bajo el agua dejan de estar operativos y el organismo acaba por morir más temprano que tarde.  No obstante, los científicos descubrieron que un compuesto líquido, el perfluorocarbono, tenía la capacidad de ser respirable como si fuera el aire.
                </p>
               
            </div>
        </body>
</html>
CSS:

Código: [Seleccionar]
   *{margin:0; padding:0;}
                div{margin:33px;padding:25px; border: 5px solid red; width: 100%;}
               
                #caja1 {font:18px serif;} /*    Ahora si tiene sentido   */
                #caja1 p:nth-of-type(2) {text-variant: small-caps; text-transform: uppercase; font-variant: small-caps; }
               
                #caja2 {font: 14px sans-serif; color:#B22222;}
               
                #caja3 {font: 36px fantasy;}

24
Creo que la solución para arreglar tu problema sería la siguiente:

Código: [Seleccionar]
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
El problema resulto ser que era que te faltaba cerrar unas comillas y eliminar un punto y coma. Del resto ya debería funcionar bien.

25
Listo.

Código: [Seleccionar]
<!DOCTYPE html>
    <html>
        <head>
            <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
            <style type="text/css">
                *{font-family: arial;}
                div {width: 200px; height: 400px; margin: 20px; padding: 10px; border-style:solid; border-width: 4px; display:inline-block;                         vertical-align:top;}
                #caja1 {text-align:center; color: #FF6347; text-indent: 10%;}
                #subrayado {text-decoration: underline;}
                #caja2 {text-align: right; color: #008080; text-indent: 50px; white-space:pre-line;}
                #subrayadoporencima {text-decoration: overline;}
                #caja3 {text-align: justify; color: #8B4513; text-indent: 20%; white-space: pre-warp;}
            </style>
        </head>
        <body>
            <div id="caja1">
            Hola, ¿Cómo estas? <span id="subrayado">Soy caja número 1</span> y vine hacer nuevos amigos en este vecindario.
            </div>
            <div id="caja2"> <p>Un texto <span id="subrayadoporencima">     
            suficientemente</span> largo para elaborar cosas extrañas de manera injusta :v</p>
            </div>
            <div id="caja3"> <p>¿Por qué siempre somos el villano del cuento? ¿No podemos ser el héroe?               15 </p>
            </div>
        </body>
</html>

26
Respuestas para ejercicios de entrega CU01043D del curso de programación web co CSS:

a) ¿Cuántas cajas contenedoras hay? ¿Están identificadas por id o por class o por ninguno de ellos?

R: Hay dos cajas contenedoras, lo cual unas de ellas está identificada por una id y la otra no.

b) Visualiza el resultado en al menos dos navegadores distintos. ¿Qué diferencias observas entre ambos? ¿A qué crees que se deben?

R: En mi caso, probé con Microsoft Edge y Google Chrome. Pude notar que los dos contenedores en Edge se movieron un poco hacia arriba pero esto es debido a que la barra de menú de ambos navegadores tienen diferentes tamaños.

c) ¿Por qué el texto <<Línea de texto contenedor 2>> se muestra centrado verticalmente?


R: En el css, se le asignó la propiedad display:table-cell  que hará que el div se comporte como una celda de tabla y la propiedad vertical-align:middle se encarga de centrar verticalmente el texto que esta dentro de las etiquetas <span> ya que esta propiedad afecta a contenidos inline como lo son las etiquetas <span>

d) Modifica el código para que el texto <<Línea de texto contenedor 1>> se muestre centrado verticalmente.

R:
Es muy sencillo, solo hay que cambiar el atributo id tanto en el css como en el html por una class y en el primer contenedor agregar el atributo class="vcent" creando como resultado final que el texto dentro del contenedor 1 se centre.

 
Código: [Seleccionar]
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<style type="text/css">
*{font-family: arial; }
div { width: 360px; height: 210px; margin: 10px; padding:5px 20px;
border-style: solid; border-color: red; border-width: thin;
background-color: yellow; text-align: center; float: left;}
.vcent { display: table;  }
.vcent span { display: table-cell; vertical-align:middle;}
</style>
</head>
<body>
<div class="vcent"><span>Línea de texto contenedor 1</span></div>
<div class="vcent"><span>Línea de texto contenedor 2</span></div>
</body>
</html>

27
Buenos días, dejo la posible solución a este ejercicio.

HTML:
Código: [Seleccionar]

<html>
    <head>
        <title>Ejemplo aprenderaprogramar.com</title>
        <meta charset="utf-8">
        <style type="text/css">
        <!-- El código CSS está en la pestaña de abajo -->
        </style>
    </head>
    <body>
        <div id="div1">
            <P>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. Relleno Relleno Relleno Relleno Relleno Relleno Relleno Relleno  Relleno Relleno Relleno</P>
       
        </div>
   
        <div id="div2">
            <p> 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.</p>
        </div>
   
        <div id="div3">
        <p>El div 3 debe contener un texto suficientemente largo como para exceder el tamaño del contenedor. Aprenderaprogramar.com 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.</p>
        </div>
    </body>
</html>

CSS:
Código: [Seleccionar]
            * {padding: 0; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing:border-box;}
            div {width: 180px; height:300px; margin:33px; border: 6px solid red; display: inline-block; vertical-align:top;}
   
            #div1 {text-transform:uppercase; word-spacing: 5px; }
            #div1 p:first-letter {font-size: 250%;}
   
            #div2 {text-transform: lowercase; letter-spacing: 10px; word-wrap: break-word;}
   
            #div3 {letter-spacing: 10px;}
            #div3 p:first-letter {text-transform: uppercase;}

28
Gracias, intenté mejorar el código y pude resolver algunos problemas. Visualizado en Google Chrome y Microsoft Edge con una pantalla de 1366x768. Editor de texto usado: Brackets.

Lo que no comprendo es que al cabo de un momento sin haber modificado nada, la página se deforma y debo bajarle el ancho a #publicidad para que encaje.

HTML:
Código: [Seleccionar]
<!DOCTYPE html>
<html >
    <head>
        <title>Portal web - aprenderaprogramar.com</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <h1>Bienvenidos a aprenderaprogramar.com</h1>
        </header>
        <div id="menu">
            <div id="menu_titulo">Menu</div>
            <div id="nav_menu">
                <ul>
                    <li><a href="#">- Cursos</a></li>
                    <li><a href="#">- Humor</a></li>
                    <li><a href="#">- Divulgación</a></li>
                </ul>
            </div>
        </div>
        <div class="contenido">
            <div class="informacion">
                <h2>Javascript 1.7</h2>
                <p>JavaScript 1.7 es una actualización del lenguaje que le añade algunas nuevas características, como generadores, iteradores,                      comprensión de arrays, sentencias let y asignación desestructurada. Evidentemente también incluye todas las características de                    JavaScript 1.6.
                    El soporte para JavaScript 1.7 estará disponible a partir de Firefox 2 Beta 1, así como en compilaciones actuales.
                    Los ejemplos de código incluidos en este artículo pueden ser probados en la consola JavaScript. Si quieres aprender a                              construir o utilizar esta consola, lee Introducción al shell de JavaScript.</p></div>
        </div>
        <div id="publicidad">
        <p>Reservado para publicidad</p>
        </div>
        <div class="contenido2">
            <div class="informacion">
                <h2>GMP</h2>
                <p>GIMP (GNU Image Manipulation Program) es un programa de edición de imágenes digitales en forma de mapa de bits, tanto dibujos                    como fotografías. Es un programa libre y gratuito. Forma parte del proyecto GNU y está disponible bajo la Licencia pública                        general de GNU y GNU Lesser General Public License1

                Es el programa de manipulación de gráficos disponible en más sistemas operativos (Unix, GNU/Linux, FreeBSD, Solaris, Microsoft                   Windows y Mac OS X, entre otros).

                La interfaz de GIMP está disponible en varios idiomas, entre ellos: español, inglés (el idioma original), catalán, gallego,                       euskera, alemán, francés, italiano, ruso, sueco, noruego, coreano y neerlandés.
                </p> </div>
       
        </div>
        <div id="footer">
            <div id="contacto">
                <p>Contacta con nosotros: <a href="mailito:ejemplo@ejemplo.com">ejemplo@ejemplo.com</a></p>
            </div>
            <div id="legal">
                <p>Apartir de acá, el aviso legal &copy; 23 a.C - 3871</p>
            </div>
        </div>
    </body>

</html>

CSS:
Código: [Seleccionar]
* { padding: 0; margin:0; font-family: arial; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing:border-box;}
h1, h2 {margin: auto; text-align: center; padding: 10px;}
header {background-color:#DEB887; border: 2px solid #008080;}
div { border: 2px solid;}
a {text-decoration: none; color:crimson;}
#menu {float:left; border-color:red; height:430px;}
#menu_titulo {text-align: center;}
#nav_menu ul {list-style: none;}
#nav_menu {border-style:hidden;}
#nav_menu ul li{margin:20px; border-color:#008080;}
.contenido {width: 70.2%; float:left; background-color: #ADD8E6; border-color:green;}
.informacion p, #publicidad p {text-align: center; margin: 30px;}
#publicidad {float: right; border-color:blueviolet; width:19.70%; height:430px;}
#contacto{margin:20px;}
#legal, #contacto {display: inline-block; margin: 20px 20px 20px 15%; border-style: hidden;}
.contenido2 {background-color:#90EE90; width: 70.2%; float:left; border-color:darkorange;}
#footer {width: 100%; float: left; clear:both; border-color: fuchsia; background-color:#DDA0DD;}

29
Posible solución al ejercicio de textshadow, text-overflow, line-height.

HTML:
Código: [Seleccionar]
<div id="caja1"> <p>En la <span id="sombra1">primera caja</span> escribire un texto suficientemente largo y sin coherencia. Escribo mas cosas para darle mas relleno a esto, blablablablablabla. Parece ser que el texto de este cuadro se esta superponiendo. HTML, siglas de HyperText Markup Language («lenguaje de marcas de hipertexto»), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia para la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código
        elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código
        elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código</p>       
    </div>
    <div id="caja2"><p> <span id="sombra2">El relleno</span> es un término televisivo referido a los capítulos de una serie de anime u otro programa en la línea argumental. Estos episodios son hechos normalmente para dar una semana de descanso a los creadores, por lo que la calidad suele ser inferior, como en el caso de muchas series de larga duración entre 2 a 5 años. Otras veces los capítulos de relleno son capítulos centrados en un personaje en concreto y en su vida o también que cambian a otra historia alternativa, aprovechando para darle algo de trasfondo. Este "episodio de personaje" sí puede llegar a ser útil, sobre todo en series donde durante su transcurso "normal" no se puede explorar a los personajes.</p>
    </div>
    <div id="caja3"><p><span id="sombra3">Es un término televisivo</span> referido a los capítulos de una serie de anime u otro programa en la línea argumental. Estos episodios son hechos normalmente para dar una semana de descanso a los creadores, por lo que la calidad suele ser inferior, como en el caso de muchas series de larga duración entre 2 a 5 años. Otras veces los capítulos de relleno son capítulos centrados en un personaje en concreto y en su vida o también que cambian a otra historia alternativa, aprovechando para darle algo de trasfondo. Este "episodio de personaje" sí puede llegar a ser útil, sobre todo en series donde durante su transcurso "normal" no se puede explorar a los personajes.</p>
    </div>

CSS:
Código: [Seleccionar]
*{font-family: arial;}
    div {width: 240px; height: 300px; margin: 18px; padding: 8px; border-style:solid; border-width: 3px; display:inline-block; vertical-align:top; border-color: blue;}
    #caja1 p {overflow: hidden; white-space:nowrap; text-overflow:ellipsis; line-height: 105%}
    #caja2 {line-height: 110%; overflow:hidden;}
    #caja3 p {text-align: justify; line-height: 120%; color: #8B4513;}
    span {font-size: 18px;}
    #sombra1 { text-shadow: 2px 2px 2px red; }
    #sombra2 { text-shadow: -2px 2px blue; }
    #sombra3 { text-shadow: 0px 0px 7px green;}

30
Aquí la posible respuesta al ejercicio mencionado anteriormente en el título.

HTML:
Código: [Seleccionar]
    <div id="caja1">
        Hola, ¿Cómo estas? <span id="subrayado">Soy caja número 1</span> y vine hacer nuevos amigos en este vecindario.
    </div>
    <div id="caja2"> <p>Un texto <span id="subrayadoporencima">     
        suficientemente</span> largo para elaborar cosas extrañas de manera injusta :v</p>
    </div>
    <div id="caja3"> <p>¿Por qué siempre somos el villano del cuento? ¿No podemos ser el héroe?               15 </p>
    </div>

CSS:
Código: [Seleccionar]
*{font-family: arial;}
    div {width: 200px; height: 400px; margin: 20px; padding: 10px; border-style:solid; border-width: 4px; display:inline-block; vertical-align:top;}
    #caja1 {text-align:center; color: #FF6347; text-indent: 10%;}
    #subrayado {text-decoration: underline;}
    #caja2 {text-align: right; color: #008080; text-indent: 50px; white-space:pre-line;}
    #subrayadoporencima {text-decoration: overline;}
    #caja3 {text-align: justify; color: #8B4513; text-indent: 20%; white-space: pre-warp;}

31
Hola, buenas noches. Aquí traigo la posible solución al ejercicio CU01036D. Me ha costado bastante crear la web, quisiera que me ayuden a entender más a fondo esto del float y el position dándome su opinión personal y explicandome con algunos ejemplos. Gracias.

Index.html
Código: [Seleccionar]
<html>
    <head>
        <title>Portal web - aprenderaprogramar.com</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <h1>Bienvenidos a aprenderaprogramar.com</h1>
        </header>
        <div id="menu">
            <div id="menu_titulo">Menu</div>
            <div id="nav_menu">
                <ul>
                    <li><a href="#">- Cursos</a></li>
                    <li><a href="#">- Humor</a></li>
                    <li><a href="#">- Divulgación</a></li>
                </ul>
            </div>
        </div>
        <div class="contenido">
            <div class="informacion">
                <h2>Javascript 1.7</h2>
                <p>JavaScript 1.7 es una actualización del lenguaje que le añade algunas nuevas características, como generadores, iteradores,                      comprensión de arrays, sentencias let y asignación desestructurada. Evidentemente también incluye todas las características de                    JavaScript 1.6.
                    El soporte para JavaScript 1.7 estará disponible a partir de Firefox 2 Beta 1, así como en compilaciones actuales.
                    Los ejemplos de código incluidos en este artículo pueden ser probados en la consola JavaScript. Si quieres aprender a                              construir o utilizar esta consola, lee Introducción al shell de JavaScript.</p></div>
        </div>
        <div id="publicdad">
        <p>Reservado para publicidad</p>
        </div>
        <div class="contenido" style="background-color:#90EE90">
            <div class="informacion">
                <h2>GMP</h2>
                <p>GIMP (GNU Image Manipulation Program) es un programa de edición de imágenes digitales en forma de mapa de bits, tanto dibujos                    como fotografías. Es un programa libre y gratuito. Forma parte del proyecto GNU y está disponible bajo la Licencia pública                        general de GNU y GNU Lesser General Public License1

                Es el programa de manipulación de gráficos disponible en más sistemas operativos (Unix, GNU/Linux, FreeBSD, Solaris, Microsoft                   Windows y Mac OS X, entre otros).

                La interfaz de GIMP está disponible en varios idiomas, entre ellos: español, inglés (el idioma original), catalán, gallego,                       euskera, alemán, francés, italiano, ruso, sueco, noruego, coreano y neerlandés.
                </p> </div>
       
        </div>
        <div id="footer" style="background-color:#DDA0DD;">
            <div id="contacto">
                <p>Contacta con nosotros: <a href="mailito:ejemplo@ejemplo.com">ejemplo@ejemplo.com</a></p>
            </div>
            <div id="legal">
                <p>Apartir de acá, el aviso legal &copy; 23 a.C - 3871</p>
            </div>
        </div>
    </body>

</html>
 

style.css

Código: [Seleccionar]
* { padding: 0; margin:0; font-family: arial;}
h1, h2 {margin: auto; text-align: center; padding: 10px;}
header {background-color:#DEB887; border-style: solid; border-width: 2px; border-color: blue; }
div { border-style:solid; border-width: 2px;}
a {text-decoration: none; color:crimson;}
#menu {float:left; border-color:red; clear:left; height: 62.7%;}
#menu_titulo {text-align: center;}
#nav_menu ul {list-style: none;}
#nav_menu ul li{margin:20px;}
.contenido, #footer {width: 80%; float:left; background-color: #ADD8E6; border-color:green;}
.informacion p, #publicidad p {text-align: center; margin: 30px;}
#publicidad {float: both; border-color:blueviolet; height:700px; display:block;}
#contacto{margin:20px;}
#legal, #contacto {position:relative; left: 20%; display: inline-block; margin-left: 50px; float:both;}
#footer {width:100%;}

32
Hola a todos. Espero que hayan tenido un buen día.  Dejaré las respuestas del ejercicio Selectores CSS: id. Aplicar CSS a partes de una web. Ejemplos. Diferenciar etiquetas HTML en ids (CU01011D).

HTML
Código: [Seleccionar]
<!DOCTYPE html>
<html>
    <head>
        <title>Portal web - aprenderaprogramar.com</title>
        <meta name="description" content="Portal web aprenderaprogramar.com">
        <meta name="keywords" content="aprender, programar, cursos, libros" charset="utf-8">
        <link rel="stylesheet" href="css/style.css" />

    </head>
    <body>
        <div id="novedades">
            <h1>Novedades</h1>
            <p>Aquí presentamos las novedades del sitio.</p>
        </div>
        <div id="xfashion">
            <h3>Lanzamos el producto X-FASHION</h3>
            <p>Este producto permite estirar la piel hasta dejarla como la de un bebé.</p>
            <p><img src="http://i.imgur.com/tq5Bs.png" title="Imagen del producto" alt="imagen producto x-fashion" /></p>
        </div>
        <div id="tmotion">
            <h3>Mejoramos el producto T-MOTION</h3>
            <p>Hemos lanzado una nueva versión del producto T-MOTION</p>
            <p><img src="http://i.imgur.com/SpZyc.png" title="Imagen del proudcto tmotion" alt="imagen producto tmotion" /></p>
        </div>
    </body>
</html>

CSS en un archivo externo:

Código: [Seleccionar]
#novedades {background-color:yellow;}

#novedades h1 {color:red;}

#tmotion h3, #xfashion h3 {color:green;}

Espero que me haya salido bien los ejercicios, en caso de alguna respuesta equivocada acepto sugerencias y que me corrijan. Gracias.
 

Páginas: 1 [2]

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

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".