HTML y CSS
HTML significa Hyper Text Markup Language (Lenguaje de marcado de
hipertexto). Hipertexto quiere decir "texto que contiene enlaces". Cada vez que hacés
clic en una palabra que te lleva a otra página web, estás haciendo clic en un
hipertexto.
Un lenguaje de marcado es un lenguaje de programación usado para que el texto
haga algo más que aparecer en una página: puede convertir texto en imágenes,
enlaces, cuadros, listas, y mucho más. El lenguaje de marcado que aprenderemos es
HTML.
¿Qué es lo que hace que una página web sea linda? Las CSS – Cascading Style
Sheets – (Hojas de estilo en cascada). Imaginate que es la piel y el maquillaje que
cubre los huesos del HTML. Primero vamos a aprender HTML y después, en otros
cursos, nos vamos a ocupar de las CSS.
Lo primero que debemos hacer es configurar el esqueleto de la página.
a. Escribí siempre <!DOCTYPE html> en la primera línea. Esto le dice al navegador qué
lenguaje está leyendo (en este caso, HTML).
b. Escribí siempre <html> en la línea siguiente. Esto comienza el documento de HTML.
c. Escribí siempre </html> en la última línea. Esto finaliza el documento de HTML.
Instrucciones
1. Colocá las tres líneas que mencionamos arriba, en la pestaña test.html que ahora
está vacía.
2. Entre la segunda y la última línea (entre<html> y </html>) podés escribir cualquier
mensaje que quieras
Terminología básica
Para aprender más HTML, debemos aprender cómo hablar sobre HTML. Ya viste que
usamos mucho los símbolos <>.
1. El texto dentro de <> se llamaetiqueta.
2. Las etiquetas casi siempre vienen de a pares: una etiqueta de inicio y una etiqueta de
cierre.
3. Un ejemplo de una etiqueta de inicio es:<html>
4. Un ejemplo de una etiqueta de cierre es: </html>
Imaginá que las etiquetas son como paréntesis; cuando abrís uno, después tenés que
cerrarlo. Las etiquetas también pueden anidarse, así que tenés que cerrarlas en el
orden correcto: la última etiqueta que abriste debe ser la primera que cierres, como se
muestra en este ejemplo:
<primera etiqueta><segunda etiqueta>Algún texto</segunda etiqueta></primera etiqueta>
El último ejercicio nos enseñó cómo configurar el archivo HTML. Todo lo que
agreguemos ahora irá en medio de <html>y </html>.
La práctica hace al maestro. Repitamos:
Instrucciones
1. Colocá la etiqueta <!DOCTYPE HTML>
2. Coloca las etiquetas </html> de inicio y de cierre.
3. Escribí lo que quieras en medio de las etiquetas <html>.
4. Hacé clic en “Guardar y enviar” para ver tu trabajo.
Hacé el encabezado
Todo dentro de nuestro archivo HTML irá en medio de las etiquetas de inicio <html>y
de cierre </html>.
El archivo siempre consiste de dos partes: el encabezado y el cuerpo. Vamos a
empezar con el encabezado.
El encabezado tiene información sobre el archivo HTML, como por ejemplo su título.
El título es lo que vemos en la barra de títulos del buscador o pestaña de la página.
Por ejemplo, el título de esta página es "Conceptos básicos de HTML | Codecademy".
Instrucciones
Agreguemos una etiqueta y un título a nuestra página web. Si te trabás en alguna
parte hacé clic más abajo en “¿Te trabaste? Te damos un consejo” para ver un
ejemplo.
1. Agregá una etiqueta de inicio <head> y una de cierre </head>.
2. En medio de las etiquetas <head> de inicio y de cierre, agregá una etiqueta de
título<title> de inicio y una etiqueta </title>de cierre.
3. Entre las etiquetas <title>, escribí un título para tu página web. Por ejemplo, “Mi
página web”.
4. Hacé clic en “Guardar y enviar” para continuar.
Párrafos del cuerpo del archivo
¡Muy bien! Para repasar, recordemos que un archivo HTML tiene un encabezado y un
cuerpo. El encabezado es donde se ingresa la información sobre tu archivo HTML,
como, por ejemplo, el título.
El cuerpo es donde ingresás el contenido, como textos, imágenes y enlaces. El
contenido del cuerpo es lo que se verá en la página real.
El cuerpo va dentro de las etiquetas , inmediatamente después de las etiquetas de
título, así:
<html>
<head>
<title>Mi página web</title>
</head>
<body>
</body>
</html>
Instrucciones
1. Debajo de la etiqueta </head> de cierre colocá una etiqueta <body> de inicio y una
etiqueta </body> de cierre, como en el ejemplo de arriba.
2. Dentro del cuerpo creá dos párrafos. Cada párrafo empieza con una etiqueta <p> de
inicio y termina con una etiqueta </p> de cierre. Podemos ingresar contenido entre las
etiquetas, así:
3.
4.
<body>
<p>¡Hola mundo!</p>
</body>
Párrafos y encabezados
¡Definitivamente estamos avanzando mucho! Aprendimos cuándo y por qué usamos
HTML. También aprendimos cómo:
a. Configurar un archivo HTML con etiquetas
b. Ponerle un título a la página web (en el encabezado o <head>)
c. Crear párrafos (en el cuerpo o <body>con etiquetas <p>)
En el siguiente paso pondremos encabezados a nuestros párrafos usando las
etiquetas de encabezado. Vamos a comenzar con la etiqueta . Lo que aparece entre
estas etiquetas tendrá la letra más grande.
Instrucciones
1. En la sección del cuerpo escribí un encabezado. Para esto, creá una etiqueta<h1>.
2. Agregá contenido.
3. Cerrá ese elemento con una etiqueta de cierre de encabezado. El contenido que
agregaste debe quedar entre <h1> y</h1>.)
4. Debajo de las etiquetas de encabezado agregá dos párrafos, con cualquier contenido,
usando las etiquetas <p>
Más sobre encabezados
En realidad, HTML nos permite tener más de un tamaño de encabezados. Hay seis
tamaños de encabezados: <h1> es el más grande, de mayor jerarquía y <h6> es el más
chiquito, de menor jerarquía.
• <h1> - El Presidente
• <h2> - El Vicepresidente
• <h3> - El Director
• <h4> - El Vicedirector
• <h5> - El Empleado
• <h6> - El Cadete
A continuación te pediremos que agregues encabezados de varios tamaños. Escribí lo
que quieras como encabezado.
Instrucciones
1. Tu código por ahora tiene un solo encabezado <h1> y dos párrafos.
2. Agregá un encabezado <h3> antes del segundo párrafo.
3. Agregá un encabezado <h5> después del segundo párrafo y un tercer párrafo después
de este encabezado.
Repaso de mitad de lección
Hiciste un trabajo impresionante. Este es un resumen de lo aprendido:
01. HTML se usa para darle estructura a los sitios web.
02. Abrimos los archivos HTML usando un navegador, y el navegador reproduce el
archivo (nos lo muestra).
03. Los archivos HTML tienen un encabezado <head> y un cuerpo <body>(Igual que
nosotros, que tenemos cabeza y cuerpo).
04. En el encabezado tenemos las etiquetas de título <title> y las usamos para
especificar el nombre de la página web.
05. Cómo hacer encabezados y párrafos.
Instrucciones
1. Agregá un título entre las etiquetas de título <title>.
2. Creá un encabezado de tamaño <h3>en el cuerpo. En el encabezado podés escribir lo
que quieras (pero no te olvides de cerrarlo).
3. Creá tres párrafos usando las etiquetas<p> y llenalos con contenido (por ej., sobre
autos, tu mascota, tu ciudad favorita para ir de viaje, lo que quieras)
Visitar otros lugares
¿Qué pasaría si quisieras mandar al usuario a otra parte de tu sitio web o
directamente a otro sitio web? Tenés que usar hipervínculos. También los podemos
llamar vínculos, para abreviar.
<a href="http://www.codecademy.com">Mi sitio web favorito</a>
1. Primero hay una etiqueta de apertura<a> y esa etiqueta tiene un atributo que se
llama href. El valor href le dice a tu enlace adónde querés que vaya, en este
casohttp://www.codecademy.com.
2. Después hay una descripción de tu enlace entre tu etiqueta <a> de apertura y tu
etiqueta </a> de cierre. Ahí es donde podés hacer clic.
3. Finalmente aparece la etiqueta </a> de cierre.
Instrucciones
1. En la sección del cuerpo, creá un enlace. Para hacerlo, agregá una etiqueta <a>.
Indicale a tu enlace un sitio web estableciendo el valor del atributo href.
2. Agregá una descripción de tu enlace.
3. Cerrá el elemento con una etiqueta</a> de cierre.
Agregar imágenes
Podés agregar imágenes a tus sitios web para que queden más atractivos.
Usamos una etiqueta de imagen, como:<img>. Esta etiqueta es un poco diferente de
las demás. En vez de colocar el contenido en medio de las etiquetas, le indicás a la
etiqueta dónde buscar la imagen, usando src. También es diferente porque no hay
etiqueta de cierre. Tiene una barra / en la etiqueta para cerrarla:<img src="url" />.
Mirá la etiqueta que está a la derecha: le agrega una imagen de un pato de goma a la
página. (Podés verlo haciendo clic en el botón de “Vista previa”).
¿Ves la dirección web (o URL, por localizador de recursos uniforme) después
de src=? Es"http://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg ". Le
dice a la etiqueta <img> dónde obtener la imagen.
Cada imagen en la web tiene su propio URL de imagen. Simplemente hacé clic con el
botón derecho sobre una imagen y elegí "Copiar el URL de la imagen". Pegá ese URL
entre comillas después de src= para insertarlo con tu etiqueta de imagen <img>.
Instrucciones
Agregá una segunda imagen debajo de la primera. (Asegurate de que sea antes de la
etiqueta </body> de cierre del cuerpo).
Si no se te ocurre una buena imagen, usá este ninja:
"http://s3.amazonaws.com/codecademy-blog/as
Hacé clic en esa imagen
¡Muy bien! Ahora ya sabés cómo agregar enlaces e imágenes a tu sitio web. Pero,
¿qué tal si quisieras convertir esa imagen en un enlace? Por ejemplo:
<a href=" http://www.buenosaires.gob.ar">
<img src="http://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg"/>
</a>
1. Primero abrimos nuestra etiqueta <a> e
dirigimos href ahttp://www.codecademy.com/ otra vez.
2. Pero esta vez, en lugar de usar texto dentro de la etiqueta <a>, usamos una etiqueta
de imagen <img>.
3. Finalmente colocamos la etiqueta de cierre</a>.
Ahora, cuando hagas clic en el pato amarillo irás ahttp://www.codecademy.com
colocar una etiqueta HTML dentro de otra se denomina anidado.
Instrucciones
1. En la sección del cuerpo creá una etiqueta <a>.
2. Elegí un sitio web adonde dirigir tu enlace,
como <ahref="http://www.codecademy.com">.
3. Ahora creá tu etiqueta <img> entre tu etiqueta <a> de inicio y tu etiqueta </a>de cierre.
¡No te olvides del src!
4. Finalmente cerrá la etiqueta </a>después de la etiqueta <img>.
*imagen: http://bit.ly/RhrMEn
Acordate de la indentación
Ahora es un buen momento para hablar de la indentación, es decir, el espaciado que
hay desde el margen en cada línea. Vas a ver que cuando ponemos etiquetas dentro
de otras etiquetas, las indentamos todavía más. ¡Esto ayuda a que tu código se pueda
leer mejor!
Mirá a la derecha las indentaciones que pusimos en el editor. Tratá de copiar este
estilo de indentaciones cuando estés escribiendo HTML, para no confundirte.
Listas ordenadas
¡Bien! Ahora vamos a aprender cómo hacer listas ordenadas. Una lista ordenada es
simplemente una lista que está numerada, como la que aparece acá abajo.
1. En la línea 8, comenzamos la lista ordenada con la etiqueta de inicio<ol>.
2. En las líneas 9 - 12, encerramos (es decir, rodeamos) cada elemento con
etiquetas <li> y </li>.
3. Como cada ítem de la lista solo está en una línea, ponemos todo el elementoen una
línea.
4. En la línea 13, finalizamos la lista ordenada con la etiqueta de cierre</ol>.
¿Qué te parece esto? Ahora podemos agregar listas ordenadas a los encabezados y
a los párrafos como cosas que podemos usar en el cuerpo de HTML.
Listas no ordenadas
Aprendimos a hacer listas ordenadas. ¿Pero si el orden no importa? ¿Si solamente
queremos usar viñetas?
<h2>Ingredientes para empanadas de carne</h2>
<ul>
<li>Carne picada</li>
<li>Cebollas</li>
</ul>
¿Esto te hace acordar a algo?
1. Primero abrimos una lista con una etiqueta <ul> de listas no ordenadas
2. Para cada ítem que queremos agregar a la lista usamos una etiqueta de ítem de
lista <li> con texto en el medio.
3. Luego le decimos al explorador que terminamos de hacer la lista con la etiqueta de
cierre </ul>
Listas dentro de una lista
Hiciste listas ordenadas y no ordenadas. ¡Excelente trabajo!
¿Qué pasa si tenés una lista ordenada, pero cada ítem de esa lista también tiene
anidada una lista no ordenada? Anidado significa 'dentro' de la lista. En el editor hay
un ejemplo. Hacé clic en “Guardar y enviar” para ver cómo queda.
Acordate: ya has anidado etiquetas. Cuando anidás etiquetas la última etiqueta que
abrís es la primera que tenés que cerrar. Mirá este ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Listas anidadas</title>
</head>
<body>
<ol>
<li>Cosas que le gusta hacer a papá</li>
<ul>
<li>fútbol</li>
<li>cocinar</li>
</ul>
<li>Cosas que le gusta hacer a mamá</li>
<ul>
<li>correr</li>
<li>leer</li>
</ul>
</ol>
<ul>
<li>Nombres favoritos de varon</li>
<ol>
<li>Crisoforo tercero de cupres</li>
<li>Sebastian</li>
<li>Lucke sky woker</li>
</ol>
<li>Nombres favoritos de mujer</li>
<ol>
<li>Juana :v</li>
<li>lila tercera de junioles</li>
<li>pancha</li>
</ul>
</body>
</html>
Hacer comentarios
Vimos mucho sobre listas. Vamos a cambiar de tema y a hacer un poco de estilo. Si te
acordás, dijimos que HTML es el esqueleto de la página web y que CSS te permite
darle al esqueleto algo de piel y de maquillaje.
Pero es posible hacer algo de CSSinline (en línea). Esto simplemente quiere decir
que podemos darle algo de estilo a nuestro archivo HTML sin preocuparnos por un
archivo CSS aparte. Vamos a aprender esto primero, así aprender CSS después te
resulta más fácil.
Antes de meternos de lleno en las fuentes, es importante aprender cómo hacer
comentarios. Podés incluir algunas notas cortas en tu código HTML, que el navegador
no mostrará. Pero estarán en el código para ayudarte a recordar porqué hiciste ciertas
cosas.
Instrucciones
1. Los comentarios comienzan con<!-- y terminan con -->, así:
<!-- ¡Este es un ejemplo de un comentario! -->
1. Convertí el texto de la línea 1 en un comentario. ¡No modifiques el texto de la línea 3!
Tamaño de fuente
Acordate de que <p> y </p> sonetiquetas de inicio y de cierre.
Les podemos dar a las etiquetas más instrucciones incluyendo atributos en la
etiqueta de inicio. Un atributo es simplemente una característica o una descripción del
contenido que aparece en el elemento. Ya viste los atributos con src en la
etiqueta <img> y hrefen la etiqueta <a>.
Vamos a cambiar el tamaño del texto. ¿Cómo? Usamos el atributo style. Lo
escribimos igual al tamaño de letra (font-size), seguido de dos puntos, del tamaño que
deseamos, y finalizamos con px (abreviatura de "píxeles"). Por ejemplo:
<p style = "font-size: 12px">
Instrucciones
1. En la línea 7, hacé que el tamaño del texto sea de 10px.
2. En la línea 8, hacé que el tamaño del texto sea de 20px.
3. En la línea 9, hacé que el tamaño del texto sea de 40px.
Si tenés problemas con el tamaño de las fuentes, ajustá el zoom de tu buscador
haciendo clic en Cmd-0 o Ctrl-0.
Color de fuente
Lo mejor del atributo style es que lo usamos un montón. Además podemos usarlo con
muchas etiquetas diferentes, no solamente con <p>. Ahora vamos a cambiar los
colores del texto en un encabezado.
Para cambiar el color del texto, simplemente agregá el atributo style en la etiqueta de
inicio y después hacé que el estilo sea igual a "color:blue" (color azul) o cualquier
color que quieras. Por ejemplo:
<h2 style="color:red">
¿Y qué tal si querés cambiar el color y el tamaño del texto? Fácil. Solo tenés que
agregar un punto y coma entre medio. Por ejemplo:
<h2 style="color: green; font-size:12px">
Nota: No escribas algo así:
<h2 <h2 style="color: green; font-size:12px">
Si anidás tus etiquetas HTML incorrectamente, como en el ejemplo, tu código no se
aceptará.
Tipos de fuentes
Vimos los tamaños y los colores de fuentes. Pero queremos poder hacer más.
Queremos poder decidir qué tipo de fuente usar. Podemos hacer esto usando un tipo
de fuente (font-family), de esta manera:
<h1 style="font-family: Arial">Title</h1>
1. Primero escribimos <h1>Título grande</h1>.
2. Luego, dentro de la etiqueta <h1> de apertura, agregamos el atributo de estilo (style) y
lo ajustamos al tipo de fuente:"font-family: Arial".
Esto hace que el estilo de fuente de la etiqueta <h1> sea Arial.
Podemos hacer lo mismo con otras etiquetas. Entonces podemos usar una
etiqueta li:
<li style="font-family: Arial">¡Hola!</li>
Acá hay una lista de todas las fuentes disponibles of available fonts.
Repaso
¡Qué buen trabajo! Ahora tenés el control de tu página web, incluyendo el color, el
tamaño y el tipo de fuente. Para repasar, vamos a usar el atributo style en la etiqueta
de inicio, así:
a. font-size: 14px
b. color: orange
c. font-family: Bodoni
<p style = "font-size:14px; color: orange; font-family: Bodoni">
Es importante que sepas que podés usar el atributo style para párrafos, encabezados,
e incluso enlaces.
Color de fondo
En la sección anterior vimos varios trucos para controlar cómo se va a ver el texto.
Ahora queremos aprender cómo cambiar el color de fondo de la página web.
De nuevo vamos a usar el atributo style y lo ajustaremos a "background-color:
red"(color de fondo: rojo) o cualquier color que quieras.
Por ejemplo, acá te mostramos cómo cambiar el color de fondo de una etiqueta<p> a
rojo:
<p style="background-color: red;">¡Hola!</p>
Alineación del texto
Muchas veces el texto queda mejor en otro lugar. Para eso, también usamos el
atributostyle. Y luego usaremos "text-align:left" (alineación de texto: left (izquierda);
o right, (derecha); o center (centro) para determinar la ubicación del texto.
<h1 style="text-align:center">
Palabras en negrita
Podemos cambiar la apariencia de las palabras. ¿Qué tal si queremos ponerlas
ennegrita?
¡Adiviná! No tenemos que usar el atributo “style”. Aquí están los pasos que tenés que
seguir:
1. Identificá la palabra o palabras que querés poner en negrita.
2. Encerrá esas palabras con la etiqueta de inicio <strong> y la etiqueta de
cierre</strong>.
3. ¡Mirá qué bien te queda todo con HTML!
Resaltar palabras
Además de ponerle negrita a las palabras, a veces
queremos enfatizarlas usandoitálicas.
Igual que con las negritas, no necesitamos usar el atributo style. Hay que hacer así:
1. Identificá la palabra o palabras que querés poner en itálicas.
2. Encerrá la palabra o palabras con la etiquetas de énfasis de inicio <em> y de
cierre </em>.
3. ¡No te agrandes y agradecé los poderes que recién descubrís!
¿Qué son las tablas?
Las tablas son muy útiles. Las usamos para guardar datos tabulares, para que sean
fáciles de leer. Cuando querés presentar información de forma ordenada en una tabla
con filas y columnas, necesitás la etiqueta... adivinaste: <table>.
Hay muchas etiquetas relacionadas con las tablas, pero todas comienzan con la
etiqueta <table>, así que vamos a añadir esa etiqueta primero.
Filas con información
Una tabla es simplemente un grupo de información ordenado en filas y columnas.
Usamos la etiqueta <tr> para crear una fila de la tabla. Pronto vamos a aprender
cómo crear columnas, y todo comenzará a tomar forma. (En realidad, no se crean
columnas en una etiqueta <table>: en vez de eso, le decimos a cada fila cuántas
celdas debe tener, y eso determina la cantidad de columnas).
Una sola columna
Ahora mirá el HTML. ¿Podés ver que aún hay tres filas? Agregamos más espacio
para que sea más fácil manejar las columnas de tabla y los datos de tabla.
Agregamos una sola celda <td> ("datos de tabla") a la primera fila, para crear una sola
columna. Si en este momento mirás la ventana de Resultados vas a ver que no
impresiona mucho, pero no te preocupes: estamos a punto de agregar más celdas de
datos de tabla.
En este momento empezamos a agregar varios elementos HTML. Asegurate de
indentar tus etiquetas a medida que las anidás, para que no te confundas.
Encabezado de la tabla
Acá está la tabla que hicimos antes. Está muy bien, parece que tiene una lista de
personajes de Hollywood famosos (¿monstruos?), con sus fechas de nacimiento. Para
hacer que nuestra tabla se parezca un poco más a una tabla de verdad, vamos a usar
las etiquetas <thead>y <tbody>. Estas etiquetas van dentro de la etiqueta <table>, y
significan "table head" (encabezado de tabla) y "table body" (cuerpo de tabla),
respectivamente.
La etiqueta HTML <head> contiene información sobre una página web (p. ej., el título) y
la etiqueta <body> encierra el contenido de la página web. De la misma forma,
podemos pensar que la etiqueta<thead> contiene la información sobre una tabla y la
etiqueta <tbody> contiene los datos tabulares en sí.
Títulos de las columnas
Recién agregamos una etiqueta <thead>sobre la etiqueta <tbody>.
Esa etiqueta tendrá el título de cada columna.
Se agrega texto a <thead> como en<tbody>, de esta forma:
<thead>
<tr>
<th>
Nombre
</th>
<th>
Color preferido
</th>
</tr>
</thead>
1. Primero tenemos una etiqueta de inicio<thead> para el encabezado de la tabla.
2. Después hay una etiqueta de inicio <tr>para la fila. (Para iniciar la fila).
3. Después de eso, una celda <th></th> para el Nombre del título de la columna. Fijate
que usamos <th></th> para las celdas de títulos de la tabla en lugar de <td></td>.
4. Luego otra celda <th></th> para el título de la columna del Color preferido.
5. Finalmente, cerramos el elemento de la fila con una etiqueta de cierre </tr>, y
cerramos el elemento del encabezado de la tabla con una etiqueta de cierre </thead>.
Dale un nombre a la tabla
A la tabla le hace falta un título. Queremos agregar una fila de título que cubra todo el
ancho de la tabla.
Para hacerlo, tenemos que usar el atributocolspan para la etiqueta . En forma
predeterminada, las celdas de tabla ocupan 1 columna. Si queremos que una celda de
tabla ocupe el espacio de 3 columnas en vez de 1, podemos fijar el atributo colspanen
3.
Se ve así:
<th colspan="3">3 columnas de ancho</th>
Dale estilo a ese encabezado
La tabla está empezando a quedar bien pero todavía está un poco insulsa. Nos
adelantamos y le agregamos un poco de estilo para hacerla un poco más fácil de leer.
Vos tenés que darle los toques finales.
Podés jugar con cualquiera de los atributosstyle que agregamos; vas a aprender
mucho más sobre estos elementos después, con los cursos de CSS.
Si querés agregar más de un estilo, simplemente separalos con punto y coma, así:
<th style="font-size:12px; color:red"
Instrucciones
1. Resaltá las etiquetas "Monstruo famoso" y "Año de nacimiento" (es decir, ponelas en
itálica).
2. Hacé que el color del título "Monstruos famosos por año de nacimiento" sea rojo.
?
Consejo
Mirá la sección anterior sobre resaltar texto para hacer un repaso sobre cómo darle
estilo a un texto.
Tenés que añadir un atributo style a la primera etiqueta th para poder cambiarle el
color. Es igual que cuando le cambiamos el color a un párrafo con el atributo style.
Dale estilo a ese encabezado
La tabla está empezando a quedar bien pero todavía está un poco insulsa. Nos
adelantamos y le agregamos un poco de estilo para hacerla un poco más fácil de leer.
Vos tenés que darle los toques finales.
Podés jugar con cualquiera de los atributosstyle que agregamos; vas a aprender
mucho más sobre estos elementos después, con los cursos de CSS.
Si querés agregar más de un estilo, simplemente separalos con punto y coma, así:
<th style="font-size:12px; color:red"
Instrucciones
1. Resaltá las etiquetas "Monstruo famoso" y "Año de nacimiento" (es decir, ponelas en
itálica).
2. Hacé que el color del título "Monstruos famosos por año de nacimiento" sea rojo.
?
Consejo
Mirá la sección anterior sobre resaltar texto para hacer un repaso sobre cómo darle
estilo a un texto.
Tenés que añadir un atributo style a la primera etiqueta th para poder cambiarle el
color. Es igual que cuando le cambiamos el color a un párrafo con el atributo style.
“Div’ide y vencerás”
Unas de las etiquetas de estructura más versátil que tenés a tu disposición son las
etiquetas <div></div>. Las etiquetas <div>(cuyo nombre viene de "división") te
permiten dividir la página en contenedores (es decir, en partes diferentes). Esto va a
ser útil cuando empieces a aprender CSS en la siguiente unidad: vas a ser capaz de
darle estilo a diferentes partes de tu sitio web, en forma individual.
Mirá la ventana de Resultados. Hay tres cuadros: uno rojo, uno azul y uno verde.
Cada uno es su propio contenedor <div>.
<!DOCTYPE html>
<html>
<head>
<title>Resultado</title>
</head>
<body>
<div style="width:50px; height:50px; background-color:red"></div>
<div style="width:50px; height:50px; background-color:blue"></div>
<div style="width:50px; height:50px; background-color:green"></div>
<div style="width:50px; height:50px; background-color:yellow"></div>
</body>
</html>
Span-tástico
Mientras 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.
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 (<spanstyle="color: Red;">). ¡Mirá cómo
solamente la palabra que está en medio de las etiquetas <span></span> cambia de
color!
<!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>
¡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 y stylesheet.css
Sintaxis por la victoriaxis
La 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.
Sintaxis por la victoriaxis
La 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.
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.
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.
Píxeles y em
¡Buen trabajo! Haremos más cosas con los colores a medida que aprendas más CSS.
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és 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)? Acá aparecen los em. (No los confundas con las
etiquetas <em></em> que usamos para énfasis).
La unidad de tamaño de fuente font-sizeem 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 smartphoneexactamente cuál debe ser el tamaño de la fuente:
sencillamente le indican, "Mirá: 1em es el tamaño de fuente que usás casi siempre,
así que 2em es el doble de grande y 0,5em es la mitad de ese tamaño".
Tené en cuenta que incluimos tres párrafos diferentes con font-size 1em, 0,5em, y
2em. Por ahora, usá 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.
Colores hex, hexadecimal html
Una fuente de conocimiento
También te pedimos que cambiaras 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 vos querés. 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.
Valores de respaldo
No tienes que usar obligatoriamente un valor predeterminado como cursive osansserif: puedes indicarle a CSS que pruebe varias fuentes, yendo de una a la siguiente
si la que estás buscando no está disponible.
Por ejemplo, si escribís:
p {
font-family: Tahoma, Verdana, sans-serif;
}
CSS intentará primero aplicar Tahoma a tus párrafos. Si el computador del usuario no tiene esa
fuente, a continuación probará con Verdana, y si esa no funciona, mostrará una fuente sansserif predeterminada.
I
Enlaces y "text-decoration" (decoración de
texto)
Los enlaces tienen muchas de las propiedades que tiene el texto normal: podés
cambiarles la fuente, el color, el tamaño, etc.
Pero los enlaces también tienen la propiedad text-decoration, que podés modificar
para darles un toque un poco más personalizado. Probablemente estás acostumbrado
a ver enlaces que son de color azul y están subrayados, ¿no? Bueno, no tiene que ser
sí o sí de esa manera.
Instrucciones
En la pestaña stylesheet.css, dale a tu selector a las
propiedades color #cc0000y text-decoration ninguna (none). Mirá cómo cambia el
enlace en la ventana de Resultados.
Diseñá un botón
Vamos a empezar. Lo primero es lo primero: necesitamos crear nuestro botón. Esto lo
hacemos con las etiquetas <div></div>.
Tené en cuenta: si ajustaste el nivel de zoom de tu navegador, los ejercicios que
incluyen height (altura) y width(ancho) no funcionarán correctamente. Para
solucionarlo, hacé clic en Cmd+0 o Ctrl+0 para restaurar tu pantalla.
Instrucciones
En la pestaña CSS, agregá un selectordiv y también las siguientes propiedades con
su respectivo valor:
1. height: 50px
2. width: 120px
3. border-color de #6495ED
4. background-color: #BCD2EE.
El borde (border-style) puede ser de cualquier tipo (dashed (línea punteada), solid
(línea continua), etc.) y de cualquier ancho (border-width). (Nos gusta de 2px.)
Dar forma al botón
Este ejercicio incluye una nueva propiedad llamada border-radius(radio del borde).
(Aprenderemos más de esta propiedad en cursos y proyectos posteriores.) Esta
propiedad modifica las esquinas de los objetos de HTML; es así como se consigue
hacer esos geniales botones redondos.
Instrucciones
Determiná la propiedad border-radiusdel div en 5px.
Posición del botón
¡Perfecto! Ahora, a trabajar para centrar el botón en la página.
Vamos a revisar el posicionamiento en el siguiente curso o en el siguiente, pero
creemos que adelantarte algo es una buena idea. Así es como funciona:
1. margin: auto; es el estilo que usás 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.
Instrucciones
En la pestaña CSS, determiná elmargin (margen) del div en automático (auto) y su
propiedad de alineación de texto (text-align) en centro (center).
height: 50px;
width: 120px;
border-color: #6495ED;
background-color: #BCD2EE;
border-style: 2px solid;
border-style:solid;
Un selector para gobernarlos a todos
También existe un selector muy especial que podés usar para aplicar el estilo de CSS
a cada elemento de la página: el selector *. Por ejemplo, si escribís
* {
border: 2px solid black;
}
Vas a crear un borde continuo de dos píxeles de ancho alrededor de cadaelemento en
la página de HTML.
Selectores
¡Buen trabajo! Los selectores pueden ser un poco complejos, pero cuanto más los
uses, más fáciles te van a parecer.
Instrucciones
Vamos a asegurarnos de que realmente sabés del tema.
En la pestaña CSS:
1. Hacé que todos los textos de párrafo tengan el color hexadecimal #00E5EE.
2. Hacé que todos los textos de párrafo para los párrafos anidados dentro de las
etiquetas div tengan el color hex #CC0000. (¿De qué color serán si en el paso 1 ya se
les cambió el color a #00E5EE? ¡Mirá los “Consejos útiles”!)
3. Colocá un borde con el color #3A5FCD alrededor de cada elemento HTML. Puede ser
línea continua, punteada, discontinua, 2px, 3px, lo que quieras.
?
Consejo
Al texto del párrafo que está dentro de las etiquetas div se le da un tratamiento con el
selector p de esta forma:
p {
/* ingresá acá el estilo */
}
A todo el texto del párrafo que está dentro de las etiquetas div se le da un tratamiento
con el selector divp de esta forma:
div p {
/* enter your styles here */
}
A cada elemento de HTML se le da un tratamiento con el selector universal de esta
forma:
* {
/* ingresá acá el estilo */
}
Ya que decir "las <p> dentro de las<div>" es más específico que decir "todas las <p>",
los párrafos fuera de los div tendrán color verde azulado y aquellos dentro de los div
tendrán color rojo oscuro. Este comportamiento se llama cascada, y vamos a hablar
de eso en la siguiente sección.
Padres, hijos y hermanos
Si imaginás que la etiqueta <html> es el tronco del árbol, podés imaginarte que sus
ramas principales <head> y<body> son sus hijos. Ambas etiquetas son hijos de <html>,
y <html> es su elemento padre. Como ambos son hijos directos de <html> (es decir
que tienen solamente un elemento de distancia), son hermanos.
Como en una familia de verdad, los elementos tienen hijos, nietos, bisnietos, y así
sucesivamente (aunque nosotros no hacemos esta distinción con HTML; un hijo de un
elemento, y todos los hijos de ese hijo, son hijos del primer padre).
Instrucciones
Para aquellos de ustedes que piensan de manera más visual, en la
pestañaindex.html, que está a la derecha, hay un pequeño diagrama.
Acordate: un elemento es hijo de CADA elemento que lo encierra, ¡incluso si ese
elemento está a algunas "ramas" de distancia.
Cuando estés listo, hacé clic en “Guardar y enviar” para continuar.
¿Podés hacerlo?
¡Muy bien! Vamos a intentar algo un poco más complejo.
Acordate, podés referirte a un elemento que es hijo de otro elemento así:
div div p { /* Código de CSS */ }
en este caso, vamos a tomar cualquier<p> que esté anidada en algún lugardentro de
una <div> que está anidada en algún lugar dentro de otra <div>. Si querés tomar hijos
directos (es decir, los elementos que están directamente anidados dentro de otro
elemento, sin elementos intermedios) podés usar el símbolo >, así:
div > p { /* Código de CSS */ }
Esto se refiere únicamente en las <p>que estén anidadas directamentedentro de
las <div>; no tomará los párrafos que estén anidados dentro de listas que, a su vez,
estén anidadas dentro de las <div> .
Instrucciones
1. Hacé que todas las etiquetas <p>tengan propiedad font-family con valor Garamond.
(¡NO uses el selector universal para hacerlo! Existe una mejor manera; consultá los
Consejos útiles para obtener ayuda.)
2. Hacé que el párrafo de introducción y el de resumen tengan la propiedadfontweight con valor bold (esta propiedad es nueva para vos, pero funciona igual que las
otras que has aprendido).
3. Hacé que los párrafos en la lista no ordenada tengan la propiedad decoración de texto
con valorunderline.
?
Consejo
¿Qué pasa si les indicás a todas las etiquetas <p> que tengan la fuente Garamond?
Como nada "hacia abajo" en la cascada cambia su propiedad font-family (es decir,
ningún otro selector que sea más específico que simplemente p), este código hará
que todos los párrafos tengan la misma fuente.
Ver para creer
¡Excelente! Ya estás dominando el tema y comenzando a aprender más sobre la
cascada.
Como ya dijimos, ciertos selectores "sobreescribirán" otros si tienen unvalor de
especificidad mayor.
ul li p { es CSS más específico que simplemente p {, así que, cuando CSS ve
etiquetas que son <p> y están dentro de listas no ordenadas, aplicará el estilo más
específico (ul li p {) al texto dentro de las listas.
Existen dos selectores que son aún más específicos que los selectores anidados
como los que aparecen arriba: selectores de clase (class) y deidentificadores (id).
Miralos en el editor de la derecha.
Instrucciones
¿Ves cómo los selectores de clase y de identificadores alteran la forma en que se ven
los párrafos? (Mirá cómo el código de CSS li p { sobreescribe el código p { , y la
clase .list_itemsobreescribe el código li p {.)
Hacé clic en “Guardar y enviar” para aprender cómo usar estos nuevos selectores.
¡Identificación, por favor!
Por otra parte, los identificadores son geniales cuando tenés exactamenteun elemento
que tiene que tener cierto estilo.
Los identificadores son asignados a los elementos de HTML usando la palabraid y un
signo de igual (=):
<div id="primero"></div>
<div id="segundo"></div>
<p id="intro"></p>
Los identificadores se reconocen en CSS con un signo de numeral (#):
#primero {
height: 50px;
}
#segundo {
height: 100px;
}
#intro {
color: #FF0000;
}
Esto te permite aplicarle estilo a una sola instancia de un selector, en vez de
a todas las instancias.
Mantener el estilo
Las clases son útiles cuando tienes un montón de elementos que deberían tener el
mismo estilo. En vez de aplicar las mismas reglas a varios selectores, simplemente
podés aplicar la misma clase a todos esos elementos de HTML y luego definir el estilo
para esa clase en la pestaña de CSS.
Las clases son asignadas a los elementos de HTML usando la palabraclass y un
signo de igual (=), así:
<div class="cuadrado"></div>
<img class="cuadrado"/>
<td class="cuadrado"></td>
En CSS, las clases se identifican con un punto (.), así:
.cuadrado {
height: 100px;
width: 100px;
}
Esto te permite tomar elementos de diferentes tipos y darles el mismo estilo.
Un control aún más preciso
Ya aprendiste sobre los selectores de clase. Ahora vamos a aprender sobre
los selectores de pseudoclase.
Un selector de pseudoclase es una forma de acceder a los elementos de HTML que
no son parte del árbol del documento (¿te acordás de la estructura de árbol sobre la
que hablamos anteriormente?). Por ejemplo, es muy fácil ver en qué lugar del árbol va
un enlace. Pero, ¿en qué lugar encontrarías la información que dice si se ha hecho
clic o no sobre un enlace? ¡Eso no está ahí!
Los selectores de pseudoclase nos permiten darle un estilo a este tipo de cambios en
nuestro documento de HTML. Por ejemplo, vimos que podemos cambiar la propiedad
decoración de texto de un enlace para que no se vea siempre azul y subrayado.
Usando los pseudo-selectores podés controlar la apariencia de enlaces que han sido
y que no han sido visitados; e incluso de aquellos sobre los que el usuario pasa el
cursor pero en los que aún no ha hecho clic.
La sintaxis de CSS para los pseudoselectores es
selector:selector_de_pseudoclase {
propiedad: valor;
}
Simplemente es un signo adicional de dos puntos (:).
Enlaces
Existe una cantidad de selectores de pseudoclases útiles para los enlaces, incluidos
los siguientes:
a:link: Un enlace sin visitar.
a:visited: Un enlace que ha sido visitado.
a:hover: Un enlace sobre el que pasás el cursor.
Vamos a probar algunos.
Primer hijo
Otro selector de pseudoclase útil esfirst-child. Se usa para aplicar el
estilo únicamente a los elementos que son los primeros hijos de sus padres. Por
ejemplo:
p:first-child {
color: red;
}
Hará que todos los párrafos que sean los primeros hijos de sus padres tengan color
rojo.
N hijo
¡Muy bien! En realidad podés seleccionar cualquier hijo de un elemento después del
primer hijo, con el selector de pseudoclase nth-child; simplemente tenés que agregar
el número de hijo entre paréntesis después del selector de pseudoclase. Por ejemplo,
p:nth-child(2) {
color: red;
}
Pondrá en color rojo a todos los párrafos que sean los segundos hijos de su elemento
padre.
El elemento que es el hijo va antes de:nth-child; su elemento padre es el elemento
que lo contiene.