Guía Práctica para HTML
Ejercicio #1.
¿Por qué aprender HTML?
Cada página web que miras está escrita en un lenguaje llamado HTML. HTML es como un
esqueleto que le da estructura a cada página web. En este curso, usaremos HTML para añadir
párrafos, encabezados, imágenes y enlaces a una página web.
En el editor que podes ver a la derecha hay una pestaña llamada test.html. Este es el archivo
en el cual vamos a escribir nuestro HTML. ¿Ves el código con los símbolos <>? Eso es
HTML. Como cualquier otro lenguaje, tiene su propia sintaxis (reglas para la comunicación)
especial.
Cuando hacemos clic en “Guardar y enviar”, la ventana de resultados actúa como un
navegador de Internet (como por ej. Chrome, Firefox, Internet Explorer). La función de un
navegador es transformar el código que está en test.html en una página web reconocible.
El navegador sabe cómo distribuir la página siguiendo la sintaxis HTML.
Instrucciones:
1. Abrir un archivo en bloc de notas y guardarlo con el nombre de “test.html” y
escribe lo siguiente:
<!DOCTYPE html>
<strong> Podes cambiar este texto si querés. </strong>
2. Cambiá el texto de la línea 2 (la partecita que aparece entre <strong> y </strong>)
por lo que quieras.
3. Hacé clic en “Guardar” y vas a ver cómo se vería en un navegador el archivo
test.html. ¿Viste? Las etiquetas <strong></strong> resaltaron nuestro texto con
letra negrita.
Ejercicio #2.
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). Imagínate 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 el archivo test.html que ahora
vas a modificar.
2. Entre la segunda y la última línea (entre <html> y </html>) podés escribir cualquier
mensaje que quieras.
Y debería de quedar así: (si cambias el mensaje se verá diferente a la muestra)
Luego procede a probarlo en el navegador.
Ejercicio #3.
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 llama etiqueta.
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. ¡Abrí el documento test.html y 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. Hace clic en “Guardar” para ver tu trabajo, el cuál debería de verse así.
5. Pruébalo en el navegador.
Ejercicio #4.
Hace 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.
Instrucciones:
Agreguemos una etiqueta y un título a nuestra página web.
Abrir el archivo test.html y modificarlo con el siguiente código:
Agrega una etiqueta de inicio <head> y una de cierre </head>.
1. En medio de las etiquetas <head> de inicio y de cierre, agrega una etiqueta de título
<title> de inicio y una etiqueta </title> de cierre.
2. Entre las etiquetas <title>, escribí un título para tu página web. Por ejemplo, “Mi
página web”.
3. Hace clic en “Guardar y probar en el navegador” , debería de quedar así.
Ejercicio #5
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 ingresas 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í:
Instrucciones:
1. Debajo de la etiqueta </head> de cierre coloca una etiqueta <body> de inicio y una
etiqueta </body> de cierre, como en el ejemplo de arriba.
2. Dentro del cuerpo crea 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í:
El resultado debería de quedar así… guarda el documento y pruébalo en el navegador.
Ejercicio #6
Elementos del Cuerpo.
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, crea una etiqueta <h1>.
2. Agrega 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 agrega dos párrafos, con cualquier
contenido, usando las etiquetas <p>.
El resultado debería de quedar así… guarda el documento y pruébalo en el
navegador.
Ejercicio #7
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. Agrega un encabezado <h3> antes del segundo párrafo.
3. Agrega un encabezado <h5> después del segundo párrafo y un tercer párrafo después
de este encabezado.
El código debería de estar más o menos así…
Ejercicio #8
Usando todos los encabezados
¡Buen trabajo! Hasta ahora hemos usado encabezados de tres tamaños diferentes. Dado que en
total son seis tamaños de encabezados, deberíamos usarlos todos. (Incluso <h6>, nuestro humilde
practicante encabezado que lleva café, necesita sentirse útil.)
Instrucciones:
1. Añade tres encabezados más al código, haciendo uso de <h2>, <h4> y <h6>. ¡Asegúrate de
cerrar todas tus etiquetas!
2. Añade un párrafo corto debajo de cada encabezado. ¡No olvides que los párrafos necesitan
etiquetas de inicio y de cierre <p></p>!
Ejercicio #9
Repaso de mitad de lección
¡Has hecho un trabajo fantástico! Aquí hay un resumen rápido de las cosas que hemos aprendido:
1. HTML se usa para darle estructura a los sitios web.
2. Abrimos los archivos HTML usando un navegador, y el navegador traduce el archivo (nos lo
muestra).
3. Los archivos HTML tienen una cabecera y un cuerpo (¡así como tú tienes una cabeza y un
cuerpo!)
4. En la cabecera encontramos las etiquetas <title>, y las usamos para especificar el nombre
de la página web.
5. Cómo hacer encabezados y párrafos.
Instrucciones:
1. Añade un título en medio de las etiquetas de título.
2. Crea un encabezado de tamaño <h3> en el cuerpo. ¡Haz que tu encabezado diga lo que
quieras! (Pero no te olvides de cerrarlo.)
3. Crea tres párrafos y llénalos con contenido (por ej. sobre carros, tu mascota, tu ciudad
favorita para ir de viaje—¡lo que quieras!)
Ejercicio #10
Añadiendo imágenes
Puedes añadir imágenes a tus sitios web para hacer que se vean ultra fantásticos. Solamente
necesitas una etiqueta de imagen, como: <img>. Esta etiqueta es un poco diferente a las demás. En
vez de colocar el contenido en medio de las etiquetas, le dices a las etiquetas dónde está la imagen,
usando src.
Mira bien la etiqueta a la derecha—¡le añade a la página una imagen de un pato de goma!
¿Ves la dirección web (o URL, por localizador de recursos uniforme) después de src=? Es
"http://bit.ly/PK1euu". ¡Le dice a la etiqueta <img> de dónde obtener la imagen!
Instrucciones:
Añade una segunda imagen debajo de la primera. (¡Asegúrate de que sea antes de la etiqueta de
cierre de cuerpo!) Puedes escoger la imagen que quieras. Solamente busca una imagen en línea, y
luego coloca la URL de esa imagen después de src= (asegúrate de ponerla entre comillas, como se
muestra).
La porción agregada debería de verse así:
Ejercicio #11
Haz clic en esa imagen
¡Bien hecho! Ahora ya sabes cómo añadir imágenes a tu sitio web. Pero, ¿qué tal si quisieras darle
clic a esa imagen para que te llevara a algún otro sitio?
La etiqueta <a></a> es la que se usa para crear hipervínculos (o simplemente enlaces) en las páginas
web. ¡Éstas son las palabras o imágenes en las que haces clic que te lleven a una nueva página!
Al igual que con <img>, <a> tiene un atributo que indica el enlace a donde vamos. En lugar de src,
<a> usa href, de esta manera:
<a href="http://www.google.com">¡Uno de los mejores motores de búsqueda!</a>
src significa "source" (fuente). ¡Le dice al enlace <img> de dónde proviene la imagen!
href significa "hypertext reference" (referencia de hipertexto). ¿Recuerdas cuando dijimos que el
hipertexto (es decir, los enlaces) es texto sobre el cual puedes hacer clic? ¡Pues href le dice a ese
enlace a dónde ir! El texto después de href es la dirección web, y el texto en medio de <a> y </a> es
el texto sobre el que haces clic.
