erickavgp.files.wordpress.com · web viewspan-tástico mientras que te deja dividir la página web...
TRANSCRIPT
Span-tásticoMientras que <div> te deja dividir la página web en partes, y darles estilo individualmente,<span> también te permite controlar el estilo de partes más chiquitas de tu página, tales como el texto. Por ejemplo, si querés que la primera palabra de tus párrafos siempre sea roja, podés encerrar cada una de las primeras palabras en medio de etiquetas <span></span>, y ponerlas rojas usando CSS.
InstruccionesPor ahora vamos a seguir usando el atributo de estilos para cambiar colores. En el editor, encerrá la palabra"rojo" con etiquetas <span></span> e indicá a la etiqueta<span> que el color sea rojo (<span style="color: Red;">). ¡Mirá cómo solamente la palabra que está en medio de las etiquetas <span></span>cambia de color
123456789
<!DOCTYPE html><html> <head> <title></title> </head> <body> <p>Este texto es negro, ¡excepto por la palabra <span style="color: Red;">>rojo</span>!</p> </body></html>
Span es el indicado¡Genial! Ya estás dominando el tema. Estas etiquetas pueden ser un poco difíciles, así que vamos a ver otro ejemplo.
El color es solo uno de los atributos que podés cambiar de manera selectiva con las etiquetas <span>; también podés cambiar el tamaño de la fuente, el tipo de fuente y cualquier otro atributo de estilo que se te ocurra.
InstruccionesUsá las etiquetas <span> para cambiar la fuente de la palabra "Impact" al tipo de fuente Impact. Dejá el resto del texto como está; ¡no incluyas el signo de admiración en la etiqueta<span>!
?
¿Atascado? ¡Obtené un consejo!
Por ejemplo, mirá como cambiar el estilo de la palabra "Juan" con una fuente del tipo Arial.
<p>My name is <span style=font-family:Arial;>Juan</span>!</p>
23456789
<!DOCTYPE html><html> <head> <title>Resultado</title> </head> <body> <p>La fuente que prefiero es la <span style="font-family: impact">Impact</span> </p> </body></html>
Resumen¡Buen trabajo! Además de lo que ya aprendiste, ahora sabes:
1. Dividir tu página web con las etiquetas <div> para darle estilo más fácilmente
2. Seleccionar partes de texto y cambiar sus propiedades usando etiquetas <span>
En el siguiente curso, vamos a ver cómo podemos tomar todos los cambios de estilo que vimos —como el control del tipo de fuente, el color de fuente, y la alineación del texto— y ponerlos en un archivo aparte. Al hacerlo, podemos usar etiquetas como<div> y <span> para darle estilo a nuestras páginas, sin tener que escribir style="color:red"cada vez.
InstruccionesTe dimos una muestra de cómo CSS aprovecha la etiqueta<span> en el editor. Podés verlo en la ventana de Resultados. Genial, ¿no?
Hacé clic en “Guardar y enviar” para terminar este curso y continuar con el maravilloso mundo de CSS.
567891011
<!DOCTYPE html><html> <head> <title>Un cuento</title> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> </head> <body> <h3>Un cuento</h3> <p><span>Había</span> una vez un intrépido joven estudiante que quería aprender CSS...</p> </body> </html>
Nueve imágenes valen más que 9.000 palabras¡Muy bien! Siguiente paso: encontrar nueve imágenes. Podés elegir los enlaces de imágenes que quieras. Si no se te ocurre ninguno, fijate en "stock photo" con el motor de búsqueda que prefieras.
Acordate: la etiqueta <img> es una de las pocas etiquetas de HTML que se cierran solas. Esto significa que en lugar de
<img src="URL"></img>
Tenés que escribir
<img src="URL" />
Esto es porque no va nada entre la etiqueta de inicio <img> y la etiqueta de cierre, de modo que podes abrirla y cerrarla usando una sola etiqueta.
InstruccionesInsertá una etiqueta <img />entre cada par de etiquetas <td></td>. Asegurate de ajustar cada atributo src con la imagen URL que elegiste como foto.
25 <td><img src=https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQvDo0XBPTvtmmMZH1IdPB6zxADnh8x9EMrGcNCbmMJEdC_qZMkzA /></td> <td><img src=https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQvDo0XBPTvtmmMZH1IdPB6zxADnh8x9EMrGcNCbmMJEdC_qZMkzA /> <td><img src=https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQvDo0XBPTvtmmMZH1IdPB6zxADnh8x9EMrGcNCbmMJEdC_qZMkzA /></td> <tr>basura</tr> <td><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQvDo0XBPTvtmmMZH1IdPB6zxADnh8x9EMrGcNCbmMJEdC_qZMkzA "/></td> <td><img src=https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQvDo0XBPTvtmmMZH1IdPB6zxADnh8x9EMrGcNCbmMJEdC_qZMkzA /></td> <td><img src=" https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQvDo0XBPTvtmmMZH1IdPB6zxADnh8x9EMrGcNCbmMJEdC_qZMkzA"/></td> </tbody> </table> </body></html>
Enlazalos¡Perfecto! Ahora solamente necesitás encerrar cada etiqueta<img> entre etiquetas <a></a>. Así:
<a href="http://codecademy.com"> <img src="http://s3.amazonaws.com/kpcbweb/companies/451/logo/grid_3/codecademy-logo-black.jpg"></a>¡Acordate de darle a cada etiqueta <a> un atributo href y de configurarlo igual a la dirección web adonde querés que te lleve el enlace! (Verificá el Consejo si estás atascado.)
InstruccionesEncerrá cada etiqueta <img> con etiquetas <a></a> como se muestra en el ejemplo.
No hay necesidad de hacer que los atributos src de tu etiqueta<img> y href de tu etiqueta apunten a la misma dirección web; de hecho, te sugerimos que los hagas diferentes.
¿Te acordás de cómo funcionan las etiquetas <a>?
<a href="dirección del sitio web"></a>
121314
</head> <body> <table> <tbody> <thead><th>jjjjjjjjjjjj</th></thead> <tr>me caes mal</tr><td><a href="http://www.google.com/imgres?imgurl=&imgrefurl=http%3A%2F%2Fwww.esamor.com.mx%2F2014%2F04%2Fver-imagenes-de-amor-frases-bonitas-facebook.html&h=0&w=0&tbnid=uGdxTJcAsHHvWM&zoom=1&tbnh=194&tbnw=259&docid=TFLQI4LJHc0CdM&tbm=isch&ei=yhFcVOrwBYiryQSip4LAAg&ved=0CAcQsCUoAQ"><img src=https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQvDo0XBPTvtmmMZH1IdPB6zxADnh8x9EMrGcNCbmMJEdC_qZMkzA /></a></td><td><a href="http://www.google.com/imgres?imgurl=&imgrefurl=http%3A%2F%2Fwww.esamor.com.mx%2F2014%2F04%2Fver-imagenes-de-amor-frases-bonitas-facebook.html&h=0&w=0&tbnid=uGdxTJcAsHHvWM&zoom=1&tbnh=194&tbnw=259&docid=TFLQI4LJHc0CdM&tbm=isch&ei=yhFcVOrwBYiryQSip4LAAg&ved=0CAcQsCUoAQ"><img src=https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQvDo0XBPTvtmmMZH1IdPB6zxADnh8x9EMrGcNCbmMJEdC_qZMkzA /></a></td><td><a href="http://www.google.com/imgres?imgurl=&imgrefurl=http%3A%2F%2Fwww.esamor.com.mx%2F2014%2F04%2Fver-imagenes-de-amor-frases-bonitas-facebook.html&h=0&w=0&tbnid=uGdxTJcAsHHvWM&zoom=1&tbnh=194&tbnw=259&docid=TFLQI4LJHc0CdM&tbm=isch&ei=yhFcVOrwBYiryQSip4LAAg&ved=0CAcQsCUoAQ"><img src=https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQvDo0XBPTvtmmMZH1IdPB6zxADnh8x9EMrGcNCbmMJEdC_qZMkzA /></a></td>
Ver para creerMirá el archivo HTML enindex.html. Parece un archivo común y corriente, ¿no? Ya conocés todo esto: encabezados, párrafos, imágenes, listas y tablas. Hacé clic en la ventana de Resultados: no vas a ver nada que te sorprenda. (De hecho, si nos preguntas, se ve bastante fea.)
La pestaña stylesheet.css (que te enseñaremos a usar en este curso) contiene toda la información de estilo de CSS: dónde tienen que ir los elementos de HTML, el color y el tamaño que tienen que tener, etc.
Convertimos una línea esencial del archivo index.html en un comentario. Si eliminás el comentario (los caracteres <!--antes del texto de la línea 4 y --> al final de la misma línea), vas a poder ver la magia que hace CSS. ¡No elimines ninguna parte de la etiqueta <link>!
InstruccionesEliminá el comentario que encierra la etiqueta <link> de la línea 4, y hacé clic en la ventana de Resultados para ver lo que vas a poder hacer con CSS.
2021
<!DOCTYPE html><html> <head> <!--<link type=/>--> <title>Resultado</title> </head> <body> <div id="header"> <div id="navbar"> <ul> <li>Página principal</li> <li>Sobre mí</li> <li>Planes para dominar el mundo</li> <li>Contacto</li> </ul> </div> <h2>Sobre mí</h2> </div> <div id="left"> <img src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-main_zps26d1
78c5.jpg"/> <p>Soy el cachorro más malo del mundo. Esto ha sido probado científicamente en varios ensayos clínicos.</p>
Qué es CSSCSS (cuyas siglas significan “Cascading Style Sheets” (Hojas de estilo en cascada)) es un lenguaje que se usa para describir la apariencia y el formato de tu HTML.
Una hoja de estilo es un archivo que describe como debe verse un archivo HTML.
Las hojas de estilo en cascada se llaman así porque pueden usarse unas sobre otras para sumar reglas y aplicarlas todas a un mismo documento. Por ejemplo, si indicás que todos los párrafos deben tener la fuente de color azul, pero señalás que un párrafo específico debe tener fuente de color rojo, ¡CSS lo puede hacer! (Hablaremos más sobre el formato en cascada en la sección cuatro).
Instrucciones
Hacé clic en la pestañastylesheet.css (Es la pestaña que está cerca de la parte superior de tu pantalla, al lado de index.html) . Indicamos al CSS para que el texto del párrafo tenga color rojo, pero vos tenés que agregar el CSS que hará que el texto entre las etiquetas <span></span> sea de color azul. Completalo y hacé clic en “Guardar y enviar”.
?
Consejo
Si estás trabado, usa color: rojo; como guía para tus CSS.
Foro de preguntas y respuestasGlosario
index.html
styleshe910
<!DOCTYPE html><html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <title>Fuentes atractivas</title> </head> <body> <p>¡Soy un párrafo escrito en rojo pero una de mis palabras es <span>azul</span>!</p> </body></html>
¿Por qué separar la forma de la función?¡Buen trabajo! Ya estás escribiendo CSS.Existen dos razones principales para separar tu forma/formato (CSS) de tu contenido/estructura funcional (HTML):
1. Podés aplicarle el mismo formato a diversos elementos de HTML sin tener que volver a escribir el código (p.ej.:style="color:red":) una y otra vez.
2. Podés aplicarle una apariencia y un formato parecido a varias páginas de HTML desde un solo archivo CSS.
Mirá el HTML en index.html. Tiene muchas etiquetas <span></span>. Todas esas palabras tienen una fuente normal, pero queremos que queden lindas.
InstruccionesAndá a la pestañastylesheet.css y decile al selector span que querés que el tipo de fuente (font-family) sea cursiva (cursive). Si necesitás ayuda hacé clic en “¿Te trabaste? Te damos un consejo”.
?
Consejo
Para que algo tuviera color rojo tuvimos que escribir
span { color: red;}
Así que si escribimos tipo de fuente cursiva
(font-family: cursive);
¡la fuente debería quedar mucho más llamativa!
Mejor fuera de línea que en líneaAntes te mostramos cómo darestilo inline (en línea) con HTML, así:
<p style="color:red">Red font!</p>Esta no es la mejor forma de darle estilo a tu sitio web por las razones que acabamos de mencionar: tenés que escribir el mismo código una y otra vez, y si querés hacer un cambio de estilo importante en varios elementos tenés que cambiar cada una de las etiquetas de estilo. Con un único archivo CSS hacés el cambio en un solo lugar.
Existen dos formas de ubicar las CSS en un solo lugar. La primera es colocar tu CSS entre etiquetas , justo en el mismo archivo de código HTML. Estas etiquetas van dentro de las etiquetas de encabezado de tu página web; revisá el ejemplo del editor que está a la derecha.
Instrucciones¿Entendiste? ¡Qué bien! Hacé clic en “Guardar y enviar” para avanzar.
Foro de preguntas y respuestasGlosario
index.html14
<!DOCTYPE html><html>
<head> <style> p { color: purple; } </style> <title>Resultado</title> </head> <body> <p>¡Mirá! ¡Soy violeta!</p> </body></html>
Enlazalo!Pero hay una forma mucho mejor.
Ya sabés que deberías escribir tu CSS en un archivo aparte. Pero, ¿cómo te asegurás de que tu archivo HTML pueda ver esa información en CSS?
Lo podés hacer agregando una etiqueta de enlace <link> (tal como viste en el primer ejercicio de este curso) entre las etiquetas de encabezado<head>…</head> de tu página HTML. Tu etiqueta de enlace<link> necesita tres atributos:
1. Un atributo type que siempre debe ser igual a "text/css"
2. Un atributo rel que siempre debe ser igual a "stylesheet"
3. Un atributo href que debe apuntar a la dirección web de tu archivo CSS
En el editor de la derecha va a ver dos archivos: index.html ystylesheet.css.
InstruccionesInsertá una etiqueta de enlace<link> hacia stylesheet.css enindex.html. ¡Si necesitás ayuda hacé clic en “¿Te trabaste?Te damos un consejo”.
?
Consejo
La sintaxis completa debe verse así:
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>Si para el tamaño de fuente recibís un número raro (como 44.6363), tratá de volver a ajustar tu zoom con Ctrl-0 o Cmd-0.
Foro de preguntas y respuestas Glosario
index.html
stylesheet.css<!DOCTYPE html><html> <head><link type="text/css" rel="stylesheet" href="stylesheet.css"/> <title>Resultado</title> </head> <body> <p>Quiero ser una fuente de TAMAÑO 44</p> </body></html>
Etiquetas autocerrablesEsto nos hace acordar de algo que no podemos dejar de mencionar en HTML: las etiquetas autocerrables.Como nunca se agrega nada entre las etiquetas de enlace , está bien usar un solo par de <> para que sirvan como etiquetas de inicio y de cierre. Esto lo hacés de esta forma:
<link type="text/css" rel="stylesheet" href="dirección de archivo CSS"/>Tal vez te hayas dado cuenta de que hacemos algo parecido con la etiqueta de imagen <img>:
<img src="dirección web"/>La mayoría de las etiquetas no se autocierran, pero te vamos a mostrar cuáles sí, para ahorrarte tiempo y esfuerzo.
Instrucciones¡Muy bien! Hacé clic en “Guardar y enviar” para ir a la siguiente estación de nuestro frenético recorrido por CSS: la sintaxis.
<!DOCTYPE html><html>
<head><link type="text/css" rel="stylesheet" href="stylesheet.css"/> <title>Resultado</title> </head> <body> <p>Quiero ser una fuente de TAMAÑO 44</p> </body></html>
Sintaxis por la victoriaxisLa sintaxis de CSS es distinta de la de HTML a la que estás acostumbrado, pero no te preocupes: ¡es fácil de aprender! El formato general se ve así:
selector { propiedad: valor;}Un selector puede ser cualquier elemento de HTML, como <p>,<img>, o <table>. ¡Simplemente tenés que obviar los <>! Para hacer que el texto de un párrafo tenga color rojo con CSS, tenés que escribir:
p { color: red;}Una propiedad es un aspecto de un selector. Por ejemplo, podés cambiar el tipo de fuente (font-family), el color (color) y el tamaño de fuente (font-size) del texto en tus páginas web (además de otras cosas).
Un valor es una posible configuración de una propiedad. El color puede ser rojo, azul, negro, o casi cualquier color; el tipo de fuente (font-family) puede ser un montón de fuentes diferentes, y así sucesivamente.
Debés finalizar cada propiedad-valor con un punto y coma (;) para que CSS sepa que ya terminaste de trabajar con un par y que estás listo para trabajar con el siguiente.
Instrucciones¡Muy bien! Es hora de que escribas un poco de CSS por tu cuenta.
En la pestaña stylesheet.css, hacé que el color de la fuente del selector p sea verde (green). (Si necesitas ayuda hacé clic en “¿Te trabaste? Te damos un consejo”).
?
Consejo
Acordate de la sintaxis general para CSS:
selector { propiedad: valor;}
23
p { color: green;}
Un selector, muchas propiedades¡Buen trabajo!
Otra ventaja genial de CSS es que podés hacer que un selector tenga muchas propiedades. Por ejemplo, si querés establecer la fuente, el color de fuente y el tamaño de fuente de un párrafo, solo tenés que escribir:
p { font-family: Arial; color: blue; font-size: 24px;}Acordate: ¡terminá cada par propiedad-valor con un punto y coma!
Tené en cuenta: Si ajustaste el zoom de tu navegador, los ejercicios que incluyen el tamaño de fuente y la altura (font-size y height) no funcionarán correctamente. Para solucionarlo, hacé clic en ctrl+0 (Windows) o cmd+0 (Mac) para restaurar tu pantalla.
InstruccionesDebajo del par propiedad-valorcolor: green (pero antes del }final), hacé que el tipo de letra (font-family) sea Garamond y que el tamaño de letra (font-size) sea de 24px.
?
¿Atascado? ¡Obtené un consejo!
Asegurate de escribir Garamonden mayúsculas, como se muestra.
6p { color: green; font-family:Garamond; font-size: 24px;}
Muchos selectores, muchas propiedades¡Muy bien! Dicen que la práctica hace al maestro, así que seguimos practicando. (Vamos a aprender más sobre selectores en el siguiente curso).
Instrucciones1. Hacé que el color de todos los encabezados h3 sea red (rojo).
2. Hacé que el tipo de letra (font-family) sea Courier en todos los párrafos. (Asegurate de escribir “Courier” con mayúscula inicial, como se muestra).
3. El segundo párrafo tiene texto en medio de las etiquetas . Hacé que el color de fondo (background-color) de esa sea amarillo (yellow). (Si necesitás ayuda hacé clic en “¿Te trabaste? Te damos un consejo”).
?
Consejo
Acordate de la sintaxis:
selector { propiedad: valor;}
Foro de preguntas y respuestasGlosario
stylesheet.css78
p { color: red;
font-family:Courier; background-color:yellow}
Muchos selectores, muchas propiedades¡Muy bien! Dicen que la práctica hace al maestro, así que seguimos practicando. (Vamos a aprender más sobre selectores en el siguiente curso).
Instrucciones1. Hacé que el color de todos los encabezados h3 sea red (rojo).
2. Hacé que el tipo de letra (font-family) sea Courier en todos los párrafos. (Asegurate de escribir “Courier” con mayúscula inicial, como se muestra).
3. El segundo párrafo tiene texto en medio de las etiquetas . Hacé que el color de fondo (background-color) de esa sea amarillo (yellow). (Si necesitás ayuda hacé clic en “¿Te trabaste? Te damos un consejo”).
?
Consejo
Acordate de la sintaxis:
selector { propiedad: valor;}
91011
h3 { color:red;}p { font-family:Courier;} span { background-color:yellow;}
La importancia del punto y comaA medida que empezás a agregar más y más pares propiedad-valor para cada selector CSS es importante que te acuerdes de poner punto y coma (;) al final de cada línea.
El punto y coma le indica a las CSS que es el fin de un par propiedad-valor y que es el momento de continuar con el siguiente. Si no ponés punto y coma, se confundirá todo y tu página no se verá correctamente.
Además, no te olvides de que todos los pares propiedad-valor para un selector están en medio de llaves ({}).
InstruccionesLa hoja de estilo enstylesheet.css está rota; algunas de las llaves ({}) no funcionan bien, y faltan los signos de punto y coma. Tu misión (si decidís aceptarla) es arreglar esta hoja de estilo.
index.html
stylesheet.css11
h3 { font-family: Verdana; color: blue; }p { font-family: Garamond;}p {font-size: 16px}
Una nota de color¡Genial! De verdad que ya estás dominando el tema.
Si bien es importante que tu sintaxis sea correcta, también es una buena idea escribir comentarios a medida que avanzás. Los buenos comentarios te van a ayudar a acordarte de por qué hiciste algo de cierta manera (o van a ayudar a otra persona, si está leyendo tu código y no estás ahí para explicarlo).
Como ya viste, los comentarios de HTML se ven así:
<!--¡Soy un comentario!-->Pero, los comentarios de CSS se ven así:
/*¡Soy un comentario!*/Acordate: la computadora ignora los comentarios cuando intenta resolver lo que deben hacer tus códigos HTML y CSS, pero escribir buenos comentarios es un buen hábito que deberías adquirir.
Instrucciones¿Ves el CSS que le agregamos al selector p en stylesheet.css? Convertilo en un comentario. (Es decir, en esa pestaña escribí /*antes de p y */ después de la} de cierre).
123
/*p { color:red;}*/
