HTML 3 Parte

Span-tstico
Mientras que <div> te deja dividir la pgina web en partes, y darles estilo
individualmente,<span> tambin te permite controlar el estilo de partes ms
chiquitas de tu pgina, tales como el texto. Por ejemplo, si quers que la primera
palabra de tus prrafos siempre sea roja, pods encerrar cada una de las primeras
palabras en medio de etiquetas <span></span>, y ponerlas rojas usando CSS.
Instrucciones
Por 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 cmo
solamente la palabra que est en medio de las etiquetas <span></span>cambia
de color
1
2
3
4
5
6
7
8
9
<!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 ests dominando el tema. Estas etiquetas pueden ser un poco difciles,
as que vamos a ver otro ejemplo.
El color es solo uno de los atributos que pods cambiar de manera selectiva con
las etiquetas <span>; tambin pods cambiar el tamao de la fuente, el tipo de
fuente y cualquier otro atributo de estilo que se te ocurra.
Instrucciones
Us 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
admiracin 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>
2
3
4
5
6
7
8
9
<!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! Adems de lo que ya aprendiste, ahora sabes:

1.
Dividir tu pgina web con las etiquetas <div> para darle estilo ms
fcilmente
2.
Seleccionar partes de texto y cambiar sus propiedades usando

etiquetas <span>
En el siguiente curso, vamos a ver cmo podemos tomar todos los cambios de
estilo que vimos como el control del tipo de fuente, el color de fuente, y la
alineacin del texto y ponerlos en un archivo aparte. Al hacerlo, podemos usar
etiquetas como<div> y <span> para darle estilo a nuestras pginas, sin tener que
escribir style="color:red"cada vez.
Instrucciones
Te dimos una muestra de cmo CSS aprovecha la etiqueta <span> en el editor.

Pods 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.
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<title>Un cuento</title>
<link type="text/css" rel="styleshee
t" href="stylesheet.css"/>
</head>
<body>
<h3>Un cuento</h3>
<p><span>Haba</span> una vez un
intrpido joven estudiante que quera
aprender CSS...</p>
</body>
</html>
Nueve imgenes valen ms que 9.000 palabras

Muy bien! Siguiente paso: encontrar nueve imgenes. Pods elegir los enlaces de
imgenes que quieras. Si no se te ocurre ninguno, fijate en "stock photo" con el
motor de bsqueda 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>
Tens 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.
Instrucciones
Insert 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:ANd9GcQvDo0XBPTv
tmmMZH1IdPB6zxADnh8x9EMrGcNCbmMJEdC_qZMkzA
/></td>
/>
/></td>
<tr>basura</tr>
<td><img src="https://encrypted-tbn2
"/></td>
/></td>
<td><img src=" https://encrypted-tbn2
"/></td>
</tbody> </table>
</body>
</html>
Enlazalos
Perfecto! Ahora solamente necesits 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-logoblack.jpg">
</a>
Acordate de darle a cada etiqueta <a> un atributo href y de configurarlo igual a la

direccin web adonde quers que te lleve el enlace! (Verific el Consejo si ests
atascado.)
Instrucciones
Encerr 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 direccin web; de hecho, te sugerimos que los hagas
diferentes.
Te acords de cmo funcionan las etiquetas <a>?

<a href="direccin del sitio web"></a>
12
13
14
</head>
<body>
<table> <tbody> <thead><th>jjjjjjjjjjj
j</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%2F0
4%2Fver-imagenes-de-amor-frases-bonitas
-facebook.html&h=0&w=0&tbnid=uGdxTJcAsHHvW
M&zoom=1&tbnh=194&tbnw=259&docid=TFLQI4LJH
c0CdM&tbm=isch&ei=yhFcVOrwBYiryQSip4LAAg&v
ed=0CAcQsCUoAQ"><img src=https://encrypted
-tbn2.gstatic.com/images?q=tbn:ANd9GcQvDo0
XBPTvtmmMZH1IdPB6zxADnh8x9EMrGcNCbmMJEdC_q
ZMkzA /></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
ZMkzA /></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
ZMkzA /></a></td>
Ver para creer

Mir el archivo HTML enindex.html. Parece un archivo comn y corriente, no? Ya
conocs todo esto: encabezados, prrafos, imgenes, 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 pestaa stylesheet.css (que te ensearemos a usar en este curso) contiene toda
la informacin de estilo de CSS: dnde tienen que ir los elementos de HTML, el
color y el tamao que tienen que tener, etc.
Convertimos una lnea esencial del archivo index.html en un comentario. Si
elimins el comentario (los caracteres  al final
de la misma lnea), vas a poder ver la magia que hace CSS. No elimines ninguna
parte de la etiqueta <link>!
Instrucciones
Elimin el comentario que encierra la etiqueta <link> de la lnea 4, y hac clic en la

ventana de Resultados para ver lo que vas a poder hacer con CSS.
20
21
<!DOCTYPE html>
<html>
<head>

</head>
<body>
<div id="header">
<div id="navbar">
<ul>
<li>Pgina 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 ms malo del
mundo. Esto ha sido probado cientficament
e en varios ensayos clnicos.</p>
Qu es CSS
CSS (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
indics que todos los prrafos deben tener la fuente de color azul, pero seals
que un prrafo especfico debe tener fuente de color rojo, CSS lo puede hacer!
(Hablaremos ms sobre el formato en cascada en la seccin cuatro).
Instrucciones
Hac clic en la pestaastylesheet.css (Es la pestaa que est cerca de la parte

superior de tu pantalla, al lado de index.html) . Indicamos al CSS para que el texto
del prrafo tenga color rojo, pero vos tens 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 ests trabado, usa color: rojo; como gua para tus CSS.
Foro de preguntas y respuestasGlosario
index.html
styleshe
9
10
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="styleshee
t" href="stylesheet.css"/>
<title>Fuentes atractivas</title>
</head>
<body>
<p>Soy un prrafo escrito en rojo
pero una de mis palabras es <span>azul</span
>!</p>
</body>
</html>
Por qu separar la forma de la funcin?

Buen trabajo! Ya ests escribiendo CSS.
Existen dos razones principales para separar tu forma/formato (CSS) de tu
contenido/estructura funcional (HTML):
1.
Pods aplicarle el mismo formato a diversos elementos de HTML sin tener que
volver a escribir el cdigo (p.ej.:style="color:red":) una y otra vez.
2.
Pods aplicarle una apariencia y un formato parecido a varias pginas 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.
Instrucciones
And a la pestaastylesheet.css y decile al selector span que quers que el tipo de

fuente (font-family) sea cursiva (cursive). Si necesits 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 debera quedar mucho ms llamativa!
Mejor fuera de lnea que en lnea

Antes te mostramos cmo darestilo inline (en lnea) 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: tens que escribir el mismo cdigo una y otra vez, y si
quers hacer un cambio de estilo importante en varios elementos tens que
cambiar cada una de las etiquetas de estilo. Con un nico archivo CSS hacs 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 cdigo HTML. Estas etiquetas
van dentro de las etiquetas de encabezado de tu pgina web; revis el ejemplo del
editor que est a la derecha.
Instrucciones
Entendiste? Qu bien! Hac clic en Guardar y enviar para avanzar.
index.html
14
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: purple;
}
</style>
</head>
<body>
<p>Mir! Soy violeta!</p>
</body>
</html>
Enlazalo!
Pero hay una forma mucho mejor.
Ya sabs que deberas escribir tu CSS en un archivo aparte. Pero, cmo te
asegurs de que tu archivo HTML pueda ver esa informacin en CSS?
Lo pods 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 pgina 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 direccin web de tu archivo CSS

En el editor de la derecha va a ver dos archivos: index.html ystylesheet.css.
Instrucciones
Insert una etiqueta de enlace<link> hacia stylesheet.css enindex.html. Si

necesits 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 tamao de fuente recibs un nmero raro (como 44.6363), trat de volver
a ajustar tu zoom con Ctrl-0 o Cmd-0.
index.html
stylesheet.css
<!DOCTYPE html>
<html>
<head><link type="text/css" rel="styleshe
et" href="stylesheet.css"/>
</head>
<body>
<p>Quiero ser una fuente de TAMAO 44
</p>
</body>
</html>
Etiquetas autocerrables
Esto 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 hacs de
esta forma:
<link type="text/css" rel="stylesheet" href="direccin de archivo CSS"/>
Tal vez te hayas dado cuenta de que hacemos algo parecido con la etiqueta de
imagen <img>:
<img src="direccin web"/>
La mayora de las etiquetas no se autocierran, pero te vamos a mostrar cules

s, para ahorrarte tiempo y esfuerzo.
Instrucciones
Muy bien! Hac clic en Guardar y enviar para ir a la siguiente estacin de

nuestro frentico recorrido por CSS: la sintaxis.
<!DOCTYPE html>
<html>
<head><link type="text/css" rel="styleshe
et" href="stylesheet.css"/>
</head>
<body>
<p>Quiero ser una fuente de TAMAO 44
</p>
</body>
</html>
Sintaxis por la victoriaxis

La sintaxis de CSS es distinta de la de HTML a la que ests acostumbrado, pero
no te preocupes: es fcil 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 tens que obviar los <>! Para hacer que el texto de un
prrafo tenga color rojo con CSS, tens que escribir:
p{
color: red;
}
Una propiedad es un aspecto de un selector. Por ejemplo, pods cambiar el tipo

de fuente (font-family), el color (color) y el tamao de fuente (font-size) del texto en
tus pginas web (adems de otras cosas).
Un valor es una posible configuracin de una propiedad. El color puede ser rojo,
azul, negro, o casi cualquier color; el tipo de fuente ( font-family) puede ser un
montn de fuentes diferentes, y as sucesivamente.
Debs finalizar cada propiedad-valor con un punto y coma (;) para que CSS sepa
que ya terminaste de trabajar con un par y que ests listo para trabajar con el
siguiente.
Instrucciones
Muy bien! Es hora de que escribas un poco de CSS por tu cuenta.

En la pestaa 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;
}
2
3
p{
color: green;
}
Un selector, muchas propiedades

Buen trabajo!
Otra ventaja genial de CSS es que pods hacer que un selector tenga muchas
propiedades. Por ejemplo, si quers establecer la fuente, el color de fuente y el
tamao de fuente de un prrafo, solo tens 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 tamao de fuente y la altura (font-size y height) no funcionarn correctamente.
Para solucionarlo, hac clic en ctrl+0 (Windows) o cmd+0 (Mac) para restaurar tu
pantalla.
Instrucciones
Debajo del par propiedad-valorcolor: green (pero antes del }final), hac que el tipo
de letra (font-family) sea Garamond y que el tamao de letra (font-size) sea de 24px.
Atascado? Obten un consejo!

Asegurate de escribir Garamonden maysculas, como se muestra.
6
p{
color: green;
font-family:Garamond;
font-size: 24px;
}
Muchos selectores, muchas propiedades

Muy bien! Dicen que la prctica hace al maestro, as que seguimos practicando.
(Vamos a aprender ms sobre selectores en el siguiente curso).
Instrucciones
1.
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 prrafos.
(Asegurate de escribir Courier con mayscula inicial, como se muestra).
3.
El segundo prrafo tiene texto en medio de las etiquetas . Hac que el color
de fondo (background-color) de esa sea amarillo (yellow). (Si necesits ayuda
hac clic en Te trabaste? Te damos un consejo).
Consejo
Acordate de la sintaxis:
selector {
propiedad: valor;
}
stylesheet.css
7
8
p{
color: red;
font-family:Courier;
background-color:yellow
}
Muchos selectores, muchas propiedades

Muy bien! Dicen que la prctica hace al maestro, as que seguimos practicando.
(Vamos a aprender ms sobre selectores en el siguiente curso).
Instrucciones
1.
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 prrafos.
(Asegurate de escribir Courier con mayscula inicial, como se muestra).
3.
El segundo prrafo tiene texto en medio de las etiquetas . Hac que el color
de fondo (background-color) de esa sea amarillo (yellow). (Si necesits ayuda
hac clic en Te trabaste? Te damos un consejo).
Consejo
Acordate de la sintaxis:
selector {
propiedad: valor;
}
9
10
11
h3 {
color:red;
}
p{
font-family:Courier;
}
span {
background-color:yellow;
}
La importancia del punto y coma

A medida que empezs a agregar ms y ms pares propiedad-valor para cada
selector CSS es importante que te acuerdes de poner punto y coma ( ;) al final de
cada lnea.
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 pons punto y coma, se
confundir todo y tu pgina no se ver correctamente.
Adems, no te olvides de que todos los pares propiedad-valor para un selector
estn en medio de llaves ({}).
Instrucciones
La hoja de estilo enstylesheet.css est rota; algunas de las llaves ({}) no funcionan
bien, y faltan los signos de punto y coma. Tu misin (si decids aceptarla) es
arreglar esta hoja de estilo.
index.html
stylesheet.css
11
h3 {
font-family: Verdana;
color: blue;
}
p { font-family: Garamond;
}
p {font-size: 16px
}
Una nota de color

Genial! De verdad que ya ests dominando el tema.
Si bien es importante que tu sintaxis sea correcta, tambin es una buena idea
escribir comentarios a medida que avanzs. 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 cdigo y no ests ah para explicarlo).
Como ya viste, los comentarios de HTML se ven as:

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 cdigos HTML y CSS, pero escribir buenos comentarios es un
buen hbito que deberas adquirir.
Instrucciones
Ves el CSS que le agregamos al selector p en stylesheet.css? Convertilo en un

comentario. (Es decir, en esa pestaa escrib /*antes de p y */ despus de la} de
cierre).
1
2
3
/*p {
color:red;
}*/

HTML 3 Parte

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML 3 Parte

Uploaded by

Copyright:

Available Formats

Span-tstico

Us las etiquetas <span> para cambiar la fuente de la palabra "Impact" al tipo de

Atascado? Obten un consejo!

Buen trabajo! Adems de lo que ya aprendiste, ahora sabes:

Seleccionar partes de texto y cambiar sus propiedades usando

Te dimos una muestra de cmo CSS aprovecha la etiqueta <span> en el editor.

Nueve imgenes valen ms que 9.000 palabras

Tens que escribir

Esto es porque no va nada entre la etiqueta de inicio <img> y la etiqueta de cierre,

Acordate de darle a cada etiqueta <a> un atributo href y de configurarlo igual a la

Encerr cada etiqueta <img> con etiquetas <a></a> como se muestra en el

Te acords de cmo funcionan las etiquetas <a>?

Ver para creer

Elimin el comentario que encierra la etiqueta <link> de la lnea 4, y hac clic en la

Hac clic en la pestaastylesheet.css (Es la pestaa que est cerca de la parte

Por qu separar la forma de la funcin?

Pods aplicarle una apariencia y un formato parecido a varias pginas de

And a la pestaastylesheet.css y decile al selector span que quers que el tipo de

As que si escribimos tipo de fuente cursiva

la fuente debera quedar mucho ms llamativa!

Mejor fuera de lnea que en lnea

Entendiste? Qu bien! Hac clic en Guardar y enviar para avanzar.

Foro de preguntas y respuestasGlosario

Un atributo type que siempre debe ser igual a "text/css"

Un atributo rel que siempre debe ser igual a "stylesheet"

Un atributo href que debe apuntar a la direccin web de tu archivo CSS

Insert una etiqueta de enlace<link> hacia stylesheet.css enindex.html. Si

<img src="direccin web"/>

La mayora de las etiquetas no se autocierran, pero te vamos a mostrar cules

Muy bien! Hac clic en Guardar y enviar para ir a la siguiente estacin de

Sintaxis por la victoriaxis

Un selector puede ser cualquier elemento de HTML, como <p>,<img>,

Una propiedad es un aspecto de un selector. Por ejemplo, pods cambiar el tipo

Muy bien! Es hora de que escribas un poco de CSS por tu cuenta.

Un selector, muchas propiedades

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

Atascado? Obten un consejo!

Muchos selectores, muchas propiedades

Hac que el color de todos los encabezados h3 sea red (rojo).

Foro de preguntas y respuestasGlosario

Muchos selectores, muchas propiedades

Hac que el color de todos los encabezados h3 sea red (rojo).

La importancia del punto y coma

Una nota de color

Pero, los comentarios de CSS se ven as:

Acordate: la computadora ignora los comentarios cuando intenta resolver lo que

Ves el CSS que le agregamos al selector p en stylesheet.css? Convertilo en un

You might also like