Html Ycss
Enviado por camikron • 9 de Noviembre de 2014 • 2.201 Palabras (9 Páginas) • 264 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).
...