PARTE 4 ejercicios del 15 al 27

PARTE 4 ejercicios del 15 al 22

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.

Puedes importar tus propias fuentes. Esto te va a servir para asegurarte de que la persona que está viendo tu página tiene todas las fuentes que queréis que tenga. Al subir tu página a internet, cualquier persona que entre la descargará automáticamente al cargar la web y verá tu fuente "maravillosa".

<!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?

/*¡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 tablas

(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>

<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>

Lección 20_b tablas con <thead>

<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/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 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:100px;

width:300px;

border: 3px solid red;

}

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:100px;

width:300px;

border: 3px solid red;

}

text-decoration:none;

color:#cc0000;

}

lección 27 (repaso) diseñar un botón

leccion27 parte1: lo que vas a diseñar

<!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>

<a href="https://www.facebook.com/codecademy">Hacete amigo <span>Facebook!</span></a>

</div>

</body>

</html>

lección 27 parte1ejemplo stylesheet.css

img {

display: block;

height: 100px;

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: 150px;

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;

}

lección 27 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;

}

/*Empezá 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="http://s3.amazonaws.com/codecademy-blog/assets/46838757.png"/>

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

<div>

</div>

</body>

</html>

lección 27 parte 4 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;

}

lección 27 parte 5 agregar el enlace al 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>

<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: 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;

}

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>Somos Codecademy. 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

PARTE 4 ejercicios del 15 al 27

Su pareja oficial para que no te la jueguen: