PARTE 4 ejercicios del 15 al 27

PARTE 4 ejercicios del 15 al 27

Ejer 15_1 em, 2 em.....CSS en linea

Píxeles y em

Cuando te pedimos que ajustaras el tamaño de la fuente, especificamos que la unidad que tenías que usar era px (por "píxeles"), así:

p {
    font-size: 10px;
}

Un píxel es un punto en la pantalla de tu computadora. Especificar los tamaños de la fuente en píxeles es genial cuando queréis que el usuario vea en su pantalla exactamente lo que diseñaste en la tuya, pero se supone que ambas pantallas tienen el mismo tamaño.

Pero, ¿si el tamaño de la pantalla del usuario es muy diferente del de la tuya (como la pantalla de un smartphone)? Aquí aparecen los em. (No los confundas con las etiquetas <em></em>que usamos para énfasis).

La unidad de tamaño de fuente font-size em es una medida relativa: un em es igual al tamaño de fuente predeterminado en cualquier pantalla que el usuario esté usando. Esto los convierte en algo genial para las pantallas de los smartphones, ya que no tratan de decirle al smartphone exactamente cuál debe ser el tamaño de la fuente: sencillamente le indican, "Mira: 1em es el tamaño de fuente que usas casi siempre, así que 2em es el doble de grande y 0,5em es la mitad de ese tamaño".

Tened en cuenta que incluimos tres párrafos diferentes con font-size 1em, 0,5em, y 2em. Por ahora, usa la unidad con la que te sientas más cómodo (px o em) ; nosotros solo queríamos que conocieras los em ahora, para que no te sorprendas cuando los veas más adelante.

<!DOCTYPE html>

<html>

<head>

<title>Resultado</title>

</head>

<body>

<p style="font-size: 0.5em;">¡Medio em!</p>

</body>

</html>

lección 16

Una fuente de conocimiento

Hemos cambiado el tipo de letra (font-family) de ciertos elementos usando CSS. Nos viste usar las fuentes Verdana, Courier y Garamond. ¿Pero cuántas fuentes conoce CSS?

La respuesta es: depende. La mayoría de las computadoras van a entender las fuentes más comunes, como Verdana, Courier y Garamond, pero cada computadora tiene instaladas diferentes fuentes. Lo bueno es que CSS tiene algunas fuentes predeterminadas incorporadas para que tus usuarios vean lo que vosotros queréis. Son:

serif: una fuente con pequeños remates decorativos en los finales de los trazos que componen las letras. Busca "serif" para ver a qué nos referimos.

sans-serif: una fuente sin adornos, como esta. No tiene las cositas de los extremos de las letras que tiene la fuente serif.

cursive: es una fuente que parece hecha a mano alzada. Se ve como escritura cursiva.

<!DOCTYPE html>

<html>

<head>

<title>Resultado</title>

</head>

<body>

<h1>Voy a ser una fuente serif cuando crezca. </h1>

<h2>Voy a ser una fuente sans-serif.</h2>

<h3>Voy a estar en cursive.</h3>

</body>

</html>

leccion 16 stylesheet.css

/*Agrega tu CSS a continuación!*/

h1{

font-family:serif;

}

{

font-family:sans-serif;

}

h3{

font-family:cursive;

}

lección 17

<!DOCTYPE html>

<html>

<head>

<title>Resultado</title>

</head>

<body>

<h1>Voy a ser una fuente serif cuando crezca. </h1>

<h2>Voy a ser una fuente sans-serif.</h2>

<h3>Voy a estar en cursive.</h3>

</body>

</html>

lección 17 stylesheet.css ¡El superpoder de las fuentes (stylesheet.css)!

¿Sabías que no todas las computadoras tienen instaladas las mismas letras (fuentes)?

Para que el diseño de tu página no se rompa si a la computadora le falta una fuente, puedes escribir varias opciones separadas por comas. El navegador leerá tu lista y elegirá la primera que encuentre instalada. ¡Es como tener un Plan A, un Plan B y un Plan C!

Ejemplo: Si pones font-family: Times, serif; el navegador buscará Times. Si no la tiene, usará una fuente genérica tipo serif que tenga disponible.

/*Agrega tu CSS a continuación!*/

h1{

font-family:Times,serif;

}

{

font-family:Verdana,sans-serif;

}

h3{

font-family:Vivaldi,cursive;

}

lección 18 LEMBRA:

"El <title> es el texto que aparece en la pestaña del navegador cuando abres una página web."

<!DOCTYPE html>

<html>

<head>

<title>Juego libre</title>

</head>

<body>

<h3>me llamo Rosa</h3>

</body>

</html>

lección 18.css _¿no funciona?__lembra poñer almohadilla si a cor está en hexadecimal

/*¡Escribe tu CSS a continuación!*/

span{

color:#fe2ef7;

font-size:3em;

font-family:Verdana;

}

h3{

font-family:cursive;

}

lembra poñer almohadilla si a cor está en hexadecimal, si non lla pos¡ non funciona! También tiene un comentario en HTML

lección 19

<!DOCTYPE html>

<html>

<head>

<title>Resultado</title>

</head>

<body>

</body>

</html>

lección19_stylesheet.css

/*Agregá tu CSS a continuación*/

div{

background-color:#cc0000;

height:100px;

width:100px;

}

lección 20_a tabla inicial con <thead>, <tbody>:

(di_Mar)

Cada etiqueta cumple exactamente con esta función dentro de la estructura de la tabla:

<thead>: Agrupa la sección de la cabecera de la tabla.
<tbody>: Agrupa la sección del cuerpo o contenido principal de la tabla.
<tr> (Table Row): Define una fila horizontal que contiene celdas en su interior. (row =fila en castellano)
<th> (Table Header): Es una celda de cabecera. Por defecto, los navegadores la muestran con el texto en negrita y centrado.
<td> (Table Data): Es una celda de datos normal que va ubicada dentro del <tbody>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<table>

<thead>

<tr>

<th>Nombre</th>

<th>Edad</th>

</tr>

</thead>

<tbody>

<tr>

<td>Ana</td>

<td>28</td>

</tr>

<tr>

<td>Carlos</td>

<td>34</td>

</tr>

</tbody>

</table>

</body>

</html>

Lección 20_b tablas con <thead> y colspan:

<thead>El elemento <thead> (table head) sirve para agrupar las filas que forman la cabecera de una tabla. Semánticamente indica que el contenido dentro de él es la cabecera de la tabla.

El atributo colspan indica cuántas columnas horizontalmente va a ocupar esa celda (es decir, "fusiona" celdas a lo ancho).

Aquí :<th colspan="3">Nueve bloques</th>

Le estás diciendo al navegador que este encabezado ocupe el espacio equivalente a 3 columnas de la tabla (las 3 columnas que definiste abajo en el <tbody>).

Col = Columna Span = Extender, abarcar o abrazar (imagina a la celda abriendo los brazos para abarcar a varias columnas).

Por lo tanto, colspan="3" significa que esa celda se extiende (span) abarcando 3 columnas.

Su pareja oficial para que no te la jueguen:

Si alguna vez necesitas hacer lo mismo pero hacia abajo (en vertical), su gemelo es rowspan:

Row = Fila
Span = Extender / Abarcar
rowspan="2" = La celda se extiende abarcando 2 filas hacia abajo.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
<title></title>
</head>
<body>
<table>
  <thead>
    <tr>
      <th colspan="3">Nueve bloques</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>
</body>
</html>

lección 20_b) stylesheet.css

/*Agregá tu CSS a continuación*/

td {

height:50px;

border: 1px dashed blue;

}

table{

border: 1px solid black;

}

lección 21

<!DOCTYPE html>

<html>

<head>

<title>Resultado</title>

</head>

<body>

<p>¡El siguiente enlace te lleva a Google!</p>

<a href="http://www.google.com/">Google</a>

</body>

</html>

lección 21 stylesheet.css

/*Agregá tu CSS a continuación*/

color:#cc0000;

text-decoration:none;

}

¡Cuidado con esto! Es una confusión muy común al empezar, pero no es lo mismo, ya que pertenecen a dos lenguajes diferentes:

Atributos: Son los que van en el archivo HTML dentro de las etiquetas (por ejemplo, el href en <a href="..."> o el src en <img src="...">).
Propiedades: Son las que van en el archivo CSS para dar estilos (por ejemplo, color o text-decoration).

Por lo tanto, en CSS siempre se les llama propiedades, y dejar la palabra atributos exclusivamente para HTML te ayudará a no mezclar los dos mundos.

lección 22_REPASOMuy bien: por tu propia cuenta, agrega una etiqueta <link> en medio de las etiquetas <head></head> en la pestaña HTML . La etiqueta debe tener un atributo de referencia href que apunte a stylesheet.css.

<!DOCTYPE html>

<html>

<head>

<title>Resultado</title>

</head>

</html>

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

Lección 23_repaso/practica_CSS externo

<!DOCTYPE html>

<html>

<head>

<title>Resultado</title>

</head>

<body>

<h1>Hola Mónica, vamos al cine</h1>

<p>vamos a la playa</p>

</body>

</html>

lección 23 stylesheet.css

h1{

font-family:Verdana;

color:#576d94;

}

font-size: 18px;

color: #4a4943;

}

lección 24_repaso/práctica varias propiedades_CSS externo

<!DOCTYPE html>

<html>

<head>

<title>Resultado</title>

</head>

<body>

<h1>Hola Mónica, vamos al cine</h1>

<p>vamos a la playa</p>

</body>

</html>

lección 24 stylesheet.css

h1{

font-family:Verdana,sans-serif;

color:#576d94;

}

font-family:Garamond,serif;

font-size: 18px;

color: #4a4943;

}

Lección 25: Cómo personalizar imágenes con CSS

<!DOCTYPE html>

<html>

<head>

<title>Resultado</title>

</head>

<body>

</body>

</html>

lección 25 stylesheet.css

img{

height:600px;

width:600px;

border: 3px solid red;

}

TEORÍA:

Cuando aplicas width: 200px; y height: auto; a una imagen, ocurre lo siguiente:

Ancho (width: 200px;): Forzamos a que la imagen mida exactamente 200 píxeles de ancho.
Alto (height: auto;): Al establecer el alto como auto (que en este contexto equivale a restablecerlo a su valor por defecto, es decir, auto), le indicas al navegador que ignore cualquier altura fija y calcule el alto de forma proporcional.

El resultado

El navegador toma esos 200px de ancho y calcula automáticamente la altura manteniendo las proporciones originales de la foto (aspect ratio), evitando que la imagen se deforme o se vea estirada.

Consejo útil

En CSS moderno, para lograr exactamente este mismo comportamiento (y de forma más estándar), a menudo se utiliza directamente auto en lugar de none:

img {

width: 200px;

height: auto;

}

lección 26

<!DOCTYPE html>

<html>

<head>

<title>Resultado</title>

</head>

<body>

<a href="https://es.wikipedia.org/wiki/Cary_Grant">Cary Grant biografía </a>

</body>

</html>

lección 26 stylesheet.css

img{

height:600px;

width:600px;

border: 3px solid red;

}

text-decoration:none;

color:#cc0000;

}

lección 27 _____ diseñar un botón_inicio

leccion27 parte1: lo que vas a diseñar

<!DOCTYPE html>

<html>

<head>

<title>Sobre mí.</title>

</head>

<body>

<p>Somos profesores. Estamos acá para enseñarte a escribir código.</p><br/><br/>

<div>

<a href="">Hacete amigo <span>¡COMIENZA!</span></a>

</div>

</body>

</html>

lección 27 parte1ejemplo stylesheet.css

img {

display: block;

height: 300px;

width: 300px;

margin: auto;

}

p {

text-align: center;

font-family: Garamond, serif;

font-size: 18px;

}

div {

border-radius: 5px;

border: 2px solid #6495ED;

background-color: #BCD2EE;

height: 60px;

width: 250px;

margin: auto;

text-align: center;

}

a {

text-decoration: none;

color: #3D59AB;

font-family: Verdana, sans-serif;

}

span {

font-weight: bold;

font-size: 18px;

color: #ffffff;

}

Explicación_____________________ mar_di:

La propiedad display: block; cumple un papel fundamental y muy específico en este bloque de código. Esto es lo que hace exactamente:

1. Convierte la imagen en un elemento de bloque

Por defecto, las imágenes son elementos de línea (display: inline). Esto significa que se comportan como si fueran una palabra de texto: se alinean en la misma línea y no respetan correctamente propiedades de diseño como ciertos márgenes verticales.

Al cambiarla a display: block;:

La imagen pasa a ocupar toda la línea disponible a lo ancho de su contenedor.
Permite aplicar con total precisión las dimensiones que le indicas (width: 300px; y height: 100px;).

2. Permite que `margin: auto;` funcione para centrarla

Esta es la razón principal por la que se suele usar display: block junto con un ancho fijo en las imágenes.

Los elementos de línea no se pueden centrar horizontalmente con margin-left: auto; y margin-right: auto;.
Al convertir la imagen en un bloque y darle un ancho fijo (300px), el navegador sabe exactamente cuánto espacio ocupa. Al aplicarle margin: auto;, el navegador reparte el espacio sobrante a izquierda y derecha de forma automática, centrando la imagen perfectamente en medio de la pantalla o de su contenedor.

Resumen visual de tu código:

display: block;: La saca del flujo de texto y permite aplicarle márgenes automáticos.
height: 100px; y width: 300px;: Fuerza a la imagen a medir exactamente esas dimensiones (ojo: si la foto original no tiene esa misma proporción, se deformará).
margin: auto;: Centra la imagen horizontalmente en la página.

Para centrar elementos de bloque horizontalmente, la forma estándar es usar margin: auto; (o específicamente margin-left: auto; y margin-right: auto;).

¿Cómo funciona exactamente `margin: auto`?

Imagina que tienes una pantalla o una caja contenedora que mide 1000 píxeles de ancho, y tu imagen mide 300 píxeles de ancho (width: 300px;):

Quedan 700 píxeles libres en total (1000 - 300 = 700).
Cuando escribes margin: auto; le estás diciendo al navegador: "Reparte todo el espacio sobrante de los lados en partes iguales".
El navegador divide 700 entre 2, asignando 350 píxeles de margen izquierdo y 350 píxeles de margen derecho.

¡Y así es como la imagen queda perfectamente centrada!

En definitiva:

margin: auto; es el estilo que usas para decirle al navegador: "Asegúrate de dejar márgenes iguales a ambos lados de este elemento de HTML". Cuando los márgenes son iguales, el objeto queda centrado.

En resumen:

No existe margin:center; en CSS.
La regla para centrar un bloque con un ancho definido es darle width (para que el navegador sepa cuánto mide) y margin: auto; (para que reparta el espacio sobrante a los lados).

Esta combinación funcionará perfectamente para mantener la proporción de la foto y además centrarla.

El código mejorado quedaría así:

CSS
img {
  display: block;
  width: 300px;
  height: auto;
  margin: auto;
}

Qué pasará con este código:

display: block; y margin: auto;: Harán que la imagen sea un bloque y se centre horizontalmente ocupando un ancho de 300 píxeles.
width: 300px;: Forzará el ancho exacto a 300 píxeles.
height: auto;: Evitará que la imagen se deforme, calculando la altura de forma proporcional al nuevo ancho.

1. Sobre `margin: auto;` en el `<div>`

Funcionará exactamente igual que con la imagen. Como el <div> es un elemento de bloque por defecto y le has dado un ancho fijo (width: 200px;), al aplicarle margin: auto; el navegador calculará el espacio sobrante a los lados y lo centrará horizontalmente.

Posición del botón

Para centrar el botón en la página:

Vamos a revisar el posicionamiento.

1. margin: auto; es el estilo que usas para decirle al navegador: "Asegurate de dejar márgenes iguales a ambos lados de este elemento de HTML". Cuando los márgenes son iguales, el objeto queda centrado.

2. text-align: center; se usa para centrar elementos de texto

2. Sobre `border-radius: 5px;`

les da a los bordes un efecto redondeado o suavizado en las esquinas.
Las cuatro esquinas del rectángulo tendrán una pequeña curva con un radio de 5 píxeles, quitándole las puntas rectas.
Si quisieras que el <div> fuera completamente circular (o una píldora), necesitarías un valor mucho más alto (por ejemplo, border-radius: 50%;). Con 5px solo verás las esquinas ligeramente suavizadas.

lección 27_practica_____parte 2 diseña un botón

<!DOCTYPE html>

<html>

<head>

<title>Sobre mí</title>

</head>

<body>

<p>Somos Codecademy. Estamos acá para enseñarte a escribir código.</p><br/><br/>

<div>

</div>

</body>

</html>

lección 27 parte2 stylesheet.css

img {

display: block;

height: 100px;

width: 300px;

margin: auto;

}

p {

text-align: center;

font-family: Garamond, serif;

font-size: 18px;

}

/*Ejercicio: Empieza a agregar tu CSS a continuación*/

div{

height: 50px;

width: 120px;

border-color: #6495ed;

background-color: #bcd2ee;

border-style:dashed;

border-width:2px;

}

lección 27 parte 3

<!DOCTYPE html>

<html>

<head>

<title>Sobre mí</title>

</head>

<body>

<p>Somos Codecademy. Estamos acá para enseñarte a escribir código.</p><br/><br/>

<div>

</div>

</body>

</html>

lección 27 parte 3 stylesheet.css

img {

display: block;

height: 100px;

width: 300px;

margin: auto;

}

p {

text-align: center;

font-family: Garamond, serif;

font-size: 18px;

}

/*Empezá a agregar tu CSS a continuación*/

div{

height: 50px;

width: 120px;

border-color: #6495ed;

background-color: #bcd2ee;

border-style:solid;

border-width:2px;

border-radius:5px;

}

lección 27 parte 4 diseña un botón:posición del botón

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="stylesheet.css">

<title>Sobre mí</title>

</head>

<body>

<img src=" >

<p>¡Hola compañero de estudios!</p><br/><br/>

<div>

</div>

</body>

</html>

lección 27 parte 4 stylesheet.css

img {

display: block;

height: 300px;

width: 300px;

margin: auto;

}

p {

text-align: center;

font-family: Garamond, serif;

font-size: 18px;

}

/*Empezá a agregar tu CSS a continuación*/

div{

height: 50px;

width: 120px;

border-color: #6495ed;

background-color: #bcd2ee;

border-style:solid;

border-width:2px;

border-radius:5px;

margin:auto;

text-align:center;

}

lección 27 parte 5 agregar el enlace al botón

<!DOCTYPE html>

<html>

<head>

<title>Sobre mí</title>

</head>

<body>

<p> Estamos acá para enseñarte a escribir código.</p><br/><br/>

<div>

<a href="https://es.wikipedia.org/wiki/James_Stewart">james stewart<span> biografia</span></a>

</div>

</body>

</html>

lección 27 parte 5 stylesheet.css

img {

display: block;

height: 300px;

width: 300px;

margin: auto;

}

p {

text-align: center;

font-family: Garamond, serif;

font-size: 18px;

}

/*Empezá a agregar tu CSS a continuación*/

div{

height: 50px;

width: 120px;

border-color: #6495ed;

background-color: #bcd2ee;

border-style:solid;

border-width:2px;

border-radius:5px;

margin:auto;

text-align:center;

}

text-decoration:none;

color:green;

}

span{

color:blue;

}

lección 27 parte 6 funciona,haz clic en el botón que creaste y mira a donde va

<!DOCTYPE html>

<html>

<head>

<title>Sobre mí</title>

</head>

<body>

<p>Estamos acá para enseñarte a escribir código.</p><br/><br/>

<div>

<a href="https://es.wikipedia.org/wiki/James_Stewart">james stewart<span> biografia</span></a>

</div>

</body>

</html>

leccion 27 parte 6 stylesheet.css

img {

display: block;

height: 100px;

width: 300px;

margin: auto;

}

p {

text-align: center;

font-family: Garamond, serif;

font-size: 18px;

}

/*Empezá a agregar tu CSS a continuación*/

div{

height: 50px;

width: 120px;

border-color: #6495ed;

background-color: #bcd2ee;

border-style:solid;

border-width:2px;

border-radius:5px;

margin:auto;

text-align:center;

}

text-decoration:none;

color:green;

}

span{

color:blue;

}

Buscar este blog

Ejemplos de Python