Html Ycss
Enviado por camikron • 9 de Noviembre de 2014 • 2.201 Palabras (9 Páginas) • 291 Visitas
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 página web, haz hecho clic en un hipertexto!
Un lenguaje de marcado es un lenguaje de programación usado para que el texto haga más que solamente aparecer en una página; puede convertir el texto en imágenes, enlaces, tablas, listas, y mucho más. El lenguaje de marcado que aprenderemos es HTML.
¿Qué es lo que hace bonita a una página web? Eso es CSS—Cascading Style Sheets (hojas de estilo en cascada). Imagina que es la piel y el maquillaje que cubre los huesos del HTML. Primero aprenderemos HTML, después, en cursos posteriores, nos ocuparemos del CSS.
La primera cosa que debemos hacer es configurar el esqueleto de la página.
a. Escribe siempre <!DOCTYPE html> en la primera línea. Esto le dice al navegador cuál es el lenguaje que está leyendo (en este caso, HTML).
b. Escribe siempre <html> en la segunda línea. Esto comienza el documento de HTML.
c. Escribe siempre </html> en la última línea. Esto finaliza el documento de HTML.
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. Las cosas adentro de <> se llaman etiquetas.
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 paréntesis; cuando abres uno, debes cerrarlo. Las etiquetas también pueden anidarse, así que debes cerrarlas en el orden correcto: la etiqueta abierta más recientemente debe ser la primera que se cierre, como en el ejemplo de abajo.
El último ejercicio nos enseñó cómo configurar el archivo HTML. Todo lo que haremos ahora irá en medio de <html> y </html>.
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 información importante, como el título de la página web.
c. El título son las palabras que vemos en la etiqueta (por ejemplo, el título de esta página es "Introducción a HTML").
Instrucciones
1. Añade una etiqueta de cabecera de inicio y una de cierre. Consulta la Sugerencia para saber más.
2. En medio de las etiquetas de cabecera, añade etiquetas de inicio y de cierre para el título.
3. En medio de las etiquetas de título, escribe el nombre de tu página web como Página Web de Malo Hasta Los Huesos S.A.
4. Presiona ejecutar. ¡Observa cómo la pestaña Resultados cambia su nombre!
Párrafos en el cuerpo
Hemos configurado muchas de las cosas básicas de tu archivo HTML para ti. Lo hicimos para que no te enfadaras con nosotros por tanta repetición; ¡apréndelas 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 código es llamado un elemento.
elemento = <etiqueta de inicio> + contenido + <etiqueta de cierre>
¡Observa que ahora tenemos las dos etiquetas del título y del cuerpo! El contenido en el cuerpo es lo que será visible en la página real.
Instrucciones
1. Escribe el nombre de tu página en medio de las etiquetas del título. ¡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 párrafos dentro del cuerpo! Cada párrafo 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 párrafos y escribe contenido en cada párrafo. (Para esto se requerirán 2 pares de etiquetas p).
encabezados
¡Definitivamente estamos haciendo un buen progreso! Hemos aprendido cuándo y por qué usamos HTML. También hemos aprendido cómo:
a. Configurar un archivo HTML con etiquetas
b. Ponerle un título a la página web (en la cabecera, o <head>)
c. Crear párrafos (en el cuerpo, o <body>)
El siguiente paso es colocarle encabezados a nuestros párrafos, usando las etiquetas de encabezado. Vamos a comenzar con la etiqueta <h1>, que marca una cosa como la más importante. (¡Todos saben que la fuente más importante es la más grande!)
Instrucciones
1. Pregúntate a ti mismo: ¿cuál es el título de esta página?
2. Crea un encabezado en la sección 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>.)
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 dale 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 (p.ej, sobre carros, tu mascota, tu ciudad favorita para ir de viaje—¡lo que quieras!)
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 la 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! (Puedes verlo haciendo clic en la pestaña Resultados)
¿Ves la dirección web (o URL,
...