Sunteți pe pagina 1din 7

HTML y CSS

HTML significa HyperText Markup Language (lenguaje de marcado de hipertexto). Hipertexto quiere decir "texto que contiene enlaces." Cada vez que haces clic en una palabra que te lleva a una nueva pgina web, haz hecho clic en un hipertexto! Un lenguaje de marcado es un lenguaje de programacin usado para que el texto haga ms que solamente aparecer en una pgina; puede convertir el texto en imgenes, enlaces, tablas, listas, y mucho ms. El lenguaje de marcado que aprenderemos es HTML. Qu es lo que hace bonita a una pgina web? Eso es CSSCascading Style Sheets (hojas de estilo en cascada). Imagina que es la piel y el maquillaje que cubre los huesos del HTML. Primero aprenderemos HTML, despus, en cursos posteriores, nos ocuparemos del CSS. La primera cosa que debemos hacer es configurar el esqueleto de la pgina. a. Escribe siempre <!DOCTYPE html> en la primera lnea. Esto le dice al navegador cul es el lenguaje que est leyendo (en este caso, HTML). b. Escribe siempre <html> en la segunda lnea. Esto comienza el documento de HTML. c. Escribe siempre </html> en la ltima lnea. Esto finaliza el documento de HTML.

Instructions

1. Coloca las tres etiquetas que mencionamos arriba en test.html. 2. En medio de la segunda y la ltima lnea (en medio de <html> y </html>), puedes escribir cualquier mensaje que desees.

Stuck? Get a hint!

HTML y CSS
HTML significa HyperText Markup Language (lenguaje de marcado de hipertexto). Hipertexto quiere decir "texto que contiene enlaces." Cada vez que haces clic en una palabra que te lleva a una nueva pgina web, haz hecho clic en un hipertexto! Un lenguaje de marcado es un lenguaje de programacin usado para que el texto haga ms que solamente aparecer en una pgina; puede convertir el texto en imgenes, enlaces, tablas, listas, y mucho ms. El lenguaje de marcado que aprenderemos es HTML. Qu es lo que hace bonita a una pgina web? Eso es CSSCascading Style Sheets (hojas de estilo en cascada). Imagina que es la piel y el maquillaje que cubre los huesos del HTML. Primero aprenderemos HTML, despus, en cursos posteriores, nos ocuparemos del CSS. La primera cosa que debemos hacer es configurar el esqueleto de la pgina. a. Escribe siempre <!DOCTYPE html> en la primera lnea. Esto le dice al navegador cul es el lenguaje que est leyendo (en este caso, HTML). b. Escribe siempre <html> en la segunda lnea. Esto comienza el documento de HTML. c. Escribe siempre </html> en la ltima lnea. Esto finaliza el documento de HTML.

Instructions

1. Coloca las tres etiquetas que mencionamos arriba en test.html. 2. En medio de la segunda y la ltima lnea (en medio de <html> y </html>), puedes escribir cualquier mensaje que desees.

Terminologa bsica
Para aprender ms HTML, debemos aprender cmo hablar sobre HTML. Ya viste que usamos mucho los smbolos<>. 1. Las cosas adentro de <> se llamanetiquetas. 2. Las etiquetas casi siempre vienen en pares: una etiqueta de inicio y una etiqueta de cierre. 3. Un ejemplo de una etiqueta de inicio: <html> 4. Un ejemplo de una etiqueta de cierre: </html> Imagina que las etiquetas son como parntesis; cuando abres uno, debes cerrarlo. Las etiquetas tambinpueden anidarse, as que debes cerrarlas en el orden correcto: la etiqueta abierta ms recientemente debe ser la primera que se cierre, como en el ejemplo de abajo.
<primera etiqueta><segunda etiqueta>Algn texto!</segunda etiqueta></primera etiqueta>

El ltimo ejercicio nos ense cmo configurar el archivo HTML. Todo lo que haremos ahora ir en medio de<html> y </html>. La prctica hace al maestro! Una cosa ms:

Instructions

1. Coloca la etiqueta !DOCTYPE HTML. 2. Coloca las etiquetas html de inicio y de cierre. 3. Escribe lo que quieras en medio de las etiquetas html. 4. Presiona Ejecutar para ver tu trabajo!

Haz la cabecera
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: la cabecera y el cuerpo . Vamos a concentrarnos en la cabecera. a. Tiene una etiqueta de inicio y una de cierre. b. La cabecera incluye informacin importante, como el ttulo de la pgina web. c. El ttulo son las palabras que vemos en la etiqueta (por ejemplo, el ttulo de esta pgina es "Introduccin a HTML").

Instructions

1. Aade una etiqueta de cabecera de inicio y una de cierre. Consulta la Sugerencia para saber ms. 2. En medio de las etiquetas de cabecera, aade etiquetas de inicio y de cierre para el ttulo. 3. En medio de las etiquetas de ttulo, escribe el nombre de tu pgina web como Pgina Web de Malo Hasta Los Huesos S.A. 4. Presiona ejecutar. Observa cmo la pestaa Resultados cambia su nombre!

Prrafos en el cuerpo
Hemos configurado muchas de las cosas bsicas de tu archivo HTML para ti. Lo hicimos para que no te enfadaras con nosotros por tanta repeticin; aprndelas muy bien! Hemos aprendido acerca de las etiquetas de inicio y de cierre. Cuando colocamos contenido en medio de las etiquetas, el trozo completo de cdigo es llamado un elemento.
elemento = <etiqueta de inicio> + contenido + <etiqueta de cierre>

Observa que ahora tenemos las dos etiquetas del ttulo y del cuerpo! El contenido en el cuerpo es lo que ser visible en la pgina real.

Instructions

1. Escribe el nombre de tu pgina en medio de las etiquetas del ttulo. Puede ser cualquier cosa! 2. Coloca las etiquetas de cierre y de inicio del cuerpo debajo de la etiqueta de cierre de cabecera. 3. Vamos a crear prrafos dentro del cuerpo! Cada prrafo requiere etiquetas de inicio y de cierre: <p> y</p>. Colocamos el contenido en medio de las etiquetas. 4. En medio de las etiquetas de cuerpo, crea dos prrafos y escribe contenido en cada prrafo. (Para esto se requerirn 2 pares de etiquetas p).

Prrafos y encabezados
Definitivamente estamos haciendo un buen progreso! Hemos aprendido cundo y por qu usamos HTML. Tambin hemos aprendido cmo: a. Configurar un archivo HTML con etiquetas b. Ponerle un ttulo a la pgina web (en la cabecera, o <head>) c. Crear prrafos (en el cuerpo, o<body>) El siguiente paso es colocarle encabezados a nuestros prrafos, usando las etiquetas de encabezado. Vamos a comenzar con la etiqueta<h1>, que marca una cosa como la ms importante. (Todos saben que la fuente ms importante es la ms grande!)

Instructions

1. Pregntate a ti mismo: cul es el ttulo de esta pgina? 2. Crea un encabezado en la seccin del cuerpo. Para hacerlo, crea una etiqueta <h1>. 3. Ponle un encabezado a tu contenido. Puede ser cualquier cosa! 4. Cierra el elemento con una etiqueta de cierre </h1>. (Tu encabezado ahora debe estar en medio de <h1> y </h1>.) 5. Debajo del encabezado, crea dos prrafos con el contenido que quieras.

Ms sobre los encabezados!


En realidad, HTML nos permite tener ms de un tamao de encabezado. Hay seis tamaos de encabezado: <h1> es el jefe de todos y <h6> es un enclenque!
<h1> - El Presidente Ejecutivo <h2> - El Vicepresidente Elegante <h3> - El director de algo <h4> - El de gerencia intermedia <h5> - El humilde asistente <h6> - El que les lleva caf a los dems

A continuacin te pediremos que aadas encabezados de varios tamaos. Puedes escribir lo que quieras como encabezados!

Instructions

1. Actualmente tu cdigo tiene un encabezado <h1> y dos prrafos. 2. Aade un encabezado <h3> antes del segundo prrafo. 3. Aade un encabezado <h5>despus del segundo prrafo, y luego aade un tercer prrafo despus de este encabezado.

S-ar putea să vă placă și