Guía 1 - Introducción A HTML

SERVICIO NACIONAL DE APRENDIZAJE SENA CENTRO INDUSTRIAL Y DESARROLLO EMPRESARIAL SOACHA - CUNDINAMARCA
En este curso usted aprender conceptos bsicos para realizar una pgina web, lo cual puede ser bastante fcil despus de conocer todo lo necesario sobre HTML, adems basta con utilizar uno de los editores grficos que veremos al final del curso para desarrollar todas nuestras pginas web.
Cada pgina web que ves en Internet est escrita en un lenguaje llamado HTML. Imagina que HTML es el esqueleto que le da estructura a cada pgina web. En este curso, usaremos HTML para aadir prrafos, encabezados, imgenes y enlaces a una pgina web. Observa las siguientes lneas: 1. 2. 3. 4. 5. 6. 7. 8. 9. <!DOCTYPE html> <html> <head> <title>Introduccin a HTML</title> </head> <body> <strong>Esta es mi primera pgina web</strong> </body> </html>
Ves el cdigo con los smbolos de <> ? Eso es HTML! Al igual que cualquier otro lenguaje, tiene su propia sintaxis (reglas para la comunicacin) especial. Para hacer nuestras pginas web necesitaremos por lo menos dos programas: uno es un editor de texto en el cual escribiremos el HTML, en este caso usaremos el Bloc de notas, y el otro es el navegador de Internet (por ejemplo, Chrome, Firefox, Internet Explorer), en el cual las visualizaremos. La funcin de un navegador es transformar el cdigo que escribimos en el editor de texto, en una pgina web reconocible! El navegador sabe cmo distribuir la pgina, siguiendo la sintaxis HTML. DESARROLLO DE SOFTWARE Ing. Sergio Loaiza Snchez Instructor inglaser@misena.edu.co
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 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, 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 HTML. c. Escribe siempre </html> en la ltima lnea. Esto finaliza el documento de HTML. Para realizar: Abre el editor de texto (Bloc de notas) y escribe lo siguiente: 1. Coloca las tres etiquetas que mencionamos arriba. 2. En medio de la segunda y la ltima lnea (en medio de <html> y </html> ), puedes escribir cualquier mensaje que desees. No borres este archivo, minimiza la ventana para seguir con la otra parte del ejercicio. es el lenguaje que est leyendo (en este caso, HTML). b. Escribe siempre <html> en la segunda lnea. Esto comienza el documento de
DESARROLLO DE SOFTWARE Ing. Sergio Loaiza Snchez Instructor inglaser@misena.edu.co
Para aprender ms HTML, debemos aprender cmo hablar sobre HTML. Ya viste que usamos mucho los smbolos <> . 1. Las cosas adentro de <> se llaman etiquetas, en algunos casos tambin se llaman marcas. 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 tambin pueden 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> .
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 ahora en la cabecera. a. Tiene una etiqueta de inicio y una de cierre, <head> y </head> , sabrs por qu? DESARROLLO DE SOFTWARE Ing. Sergio Loaiza Snchez Instructor inglaser@misena.edu.co
SERVICIO NACIONAL DE APRENDIZAJE SENA CENTRO INDUSTRIAL Y DESARROLLO EMPRESARIAL SOACHA - CUNDINAMARCA b. La cabecera incluye informacin importante, como el ttulo de la pgina web, este ir entre <title> y </title> . c. El ttulo son las palabras que veremos en la pestaa del navegador de Internet, recuerda esto para que lo verifiques. Para realizar: Volvamos al documento abierto en el Bloc de notas: 1. Aade una etiqueta de cabecera de inicio y una de cierre. 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 Introduccin a HTML.
Hemos configurado muchas de las cosas bsicas de tu archivo HTML para ti, solo para que no te aburras con 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.
Para realizar: Volvamos al documento abierto en el Bloc de notas: 1. Coloca las etiquetas de cierre y de inicio del cuerpo debajo de la etiqueta de cierre de cabecera. 2. 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. 3. 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). 4. Recuerda no borrar esto que has hecho en el Bloc de notas, aguarda un poco ya casi terminamos nuestra primera pgina web. DESARROLLO DE SOFTWARE Ing. Sergio Loaiza Snchez Instructor inglaser@misena.edu.co
Ahora que tenemos listo el cdigo de nuestra primera pgina web, debemos guardarlo para visualizarlo en el navegador de Internet. Para esto, debemos seguir unos sencillos pasos: 1. Antes de continuar, Crea una carpeta en el equipo, pero recuerda la ubicacin, te recomiendo que lo hagas en Mis documentos. All guardars todas las pginas que crearemos en la clase. 2. Desde el editor de texto (Bloc de notas), vamos al men Archivo y seleccionamos Guardar como.
3. En el cuadro de dilogo de Guardar, abre primero la carpeta que creaste anteriormente. All guardars tu pgina web. 4. Prestemos atencin a dos partes del cuadro de dilogo de Guardar: el nombre del archivo y el tipo de archivo. En el Nombre de archivo escribiremos el nombre de nuestra pgina, puede ser cualquiera, en este caso se guardar como pagina1.html. Al agregarle a nuestro archivo la extensin HTML le estamos indicando que se trata de una pgina web. 5. Y finalmente en Tipo de archivo seleccionaremos Todos los archivos y haremos clic en el botn Guardar.
2 3
6. Una vez guardado, ubicamos la carpeta donde guardamos nuestro documento HTML, este debe tener el cono del navegador de Internet instalado en nuestro equipo. Al abrir este archivo, se ejecutar nuestro navegador, y ah est!, nuestra primera pgina web.
EJERCICIO 1 Realizar una pgina web con las etiquetas html, cabecera y cuerpo que contenga los siguientes elementos: 1. 2. 3. 4. 5. Ttulo: Las mejores noticias de Internet. Un primer prrafo con una noticia de msica. Un segundo prrafo con una noticia deportiva. En un tercer prrafo escriba su nombre. Guardar el archivo como pgina web, en la carpeta que usted cre, con el nombre Ejercicio1.html.
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!) Para realizar: Pregntate a ti mismo: cul es el ttulo de esta pgina? 1. Crea un encabezado en la seccin del cuerpo. Para hacerlo, crea una etiqueta <h1> . 2. Ponle un encabezado a tu contenido. Puede ser cualquier cosa! 3. Cierra el elemento con una etiqueta de cierre </h1> . (Tu encabezado ahora debe estar en medio de <h1> y </h1> .) 4. Debajo del encabezado, crea dos prrafos con el contenido que quieras. 5. Gurdalo y visualiza el resultado.
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 DESARROLLO DE SOFTWARE Ing. Sergio Loaiza Snchez Instructor inglaser@misena.edu.co

<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! Para realizar: Contina con el archivo anterior 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. 4. Gurdalo y visualiza el resultado.
Buen trabajo! Hasta ahora hemos usado encabezados de tres tamaos diferentes. Dado que en total son seis tamaos de encabezados, deberamos usarlos todos. (Incluso <h6> , nuestro humilde practicante encabezado que lleva caf, necesita sentirse til.) Para realizar: Contina con el archivo anterior 1. Aade tres encabezados ms al cdigo. Asegrate de cerrar todas tus etiquetas! 2. Aade un prrafo corto debajo de cada encabezado. No olvides que los prrafos necesitan etiquetas de inicio y de cierre <p></p> ! 3. Gurdalo y visualiza el resultado.
Has hecho un trabajo fantstico! Aqu hay un resumen rpido de las cosas que hemos aprendido: 1. HTML se usa para darle estructura a los sitios web.
SERVICIO NACIONAL DE APRENDIZAJE SENA CENTRO INDUSTRIAL Y DESARROLLO EMPRESARIAL SOACHA - CUNDINAMARCA 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 pgina web. 5. Cmo hacer encabezados y prrafos.
EJERCICIO 2 1. Aade un ttulo en medio de las etiquetas de ttulo. 2. Crea un encabezado de tamao <h3> en el cuerpo. Haz que tu encabezado diga lo que quieras! (Pero no te olvides de cerrarlo.) 3. Crea tres prrafos y llnalos con contenido (p.ej, sobre carros, tu mascota, tu ciudad favorita para ir de viajelo que quieras!) 4. Guarda el archivo en tu carpeta con el nombre Ejercicio2.html
Puedes aadir imgenes a tus sitios web para hacer que se vean ultra fantsticos. Solamente necesitas una etiqueta de imagen, como: <img> . Esta etiqueta es un poco diferente a las dems. En vez de colocar el contenido en medio de las etiquetas, le dices a la etiquetas dnde est la imagen, usando src . Mira bien la etiqueta en la parte de abajole aade a la pgina una imagen de un pato de goma! Copia el cdigo en el Bloc de notas, gurdalo y visualizndolo en el navegador de Internet.
Ves la direccin web (o URL, por localizador de recursos uniforme) despus de src= ? Es "http://bit.ly/PK1euu" . Le dice a la etiqueta <img> de dnde obtener la imagen!
Para realizar: Aade una segunda imagen debajo de la primera. Asegrate de que sea antes de la etiqueta de cierre de cuerpo! 1. Busca en Internet una imagen animada, lo puedes hacer escribiendo GIF animado en Google, puedes escoger la imagen que quieras.
SERVICIO NACIONAL DE APRENDIZAJE SENA CENTRO INDUSTRIAL Y DESARROLLO EMPRESARIAL SOACHA - CUNDINAMARCA 2. Gurdala en tu carpeta, recuerda el nombre de la imagen, te recomiendo que le cambies el nombre a imagen1. 3. Coloca la URL de esa imagen despus de src= (asegrate de ponerla entre comillas, como se muestra). Debe quedar algo as: <img src="imagen1.gif"></img>
Bien hecho! Ahora ya sabes cmo aadir imgenes a tu sitio web. Pero, qu tal si quisieras darle clic a esa imagen para que te llevara a algn otro sitio? La etiqueta <a></a> es la que se usa para crear hipervnculos (o simplemente enlaces) en las pginas web. stas son las palabras o imgenes en las que haces clic que te lleven a una nueva pgina! Al igual que con <img> , <a> tiene un atributo que indica el enlace a dnde vamos. En lugar de src , <a> usa href , de esta manera: <a href="http://www.google.com">Busca todo lo que quieras!</a>
src significa "source" (fuente). Le dice al enlace <img> de dnde 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 dnde ir! El texto despus de href es la direccin web, y el texto en medio de <a> y </a> es el texto sobre el que haces clic. Aqu est cmo convertir una de imagen tus en un enlace: coloca una una etiqueta <a href=""> antes etiquetas <img> y
SERVICIO NACIONAL DE APRENDIZAJE SENA CENTRO INDUSTRIAL Y DESARROLLO EMPRESARIAL SOACHA - CUNDINAMARCA etiqueta </a> despus de ellas. En medio de las comillas despus de href= , escribe la direccin de tu sitio web favorito! Para realizar: Aade un enlace a la imagen. Abre el bloc de notas e inserta una imagen con un enlace que abra tu sitio web favorito. Aqu est un ejemplo:
Bien hecho! Cercirate de que entiendes las imgenes y los enlaces antes de continuar con el ejercicio.
EJERCICIO 3 1. Aade dos imgenes en medio de las etiquetas de cuerpo. Una debe ser un enlace; la otra no. El enlace puede conducir a cualquier sitio que quieras. 2. Despus de las dos imgenes, crea un enlace que simplemente sea una lnea de texto. Puede conducir a cualquier sitio que quieras. 3. Guarda el archivo en tu carpeta como Ejercicio3.html
Bien hecho! Ahora ya conoces lo bsico para crear una pgina web. Si te sientes con suerte, puedes intentar crear tus propias pginas web. Por ahora resuelve el ejercicio final de esta gua.
EJERCICIO FINAL Vamos a crear una pequea pgina en la cual resumiremos lo que hemos visto, espero que te acuerdes de las etiquetas que has visto hasta ahora. Escoge un tema, el que t quieras. 1. Primero, crea la estructura bsica de tu pgina web. 2. Escoge un ttulo para la pgina y agrgalo a la cabecera. 3. En el cuerpo, vas a agregar un encabezado h1 con el ttulo principal, debajo agrega un prrafo. 4. Agrega un encabezado h2 con un ttulo secundario, luego otro prrafo. 5. Agrega varias imgenes, escoge varias de ellas con enlaces a tus pginas favoritas. 6. Guarda el archivo en tu carpeta con el nombre Ejercicio4.html

Guía 1 - Introducción A HTML

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Guía 1 - Introducción A HTML

Caricato da

Copyright:

Formati disponibili

SERVICIO NACIONAL DE APRENDIZAJE SENA CENTRO INDUSTRIAL Y DESARROLLO EMPRESARIAL SOACHA - CUNDINAMARCA

DESARROLLO DE SOFTWARE Ing. Sergio Loaiza Snchez Instructor inglaser@misena.edu.co

DESARROLLO DE SOFTWARE Ing. Sergio Loaiza Snchez Instructor inglaser@misena.edu.co

DESARROLLO DE SOFTWARE Ing. Sergio Loaiza Snchez Instructor inglaser@misena.edu.co

DESARROLLO DE SOFTWARE Ing. Sergio Loaiza Snchez Instructor inglaser@misena.edu.co

DESARROLLO DE SOFTWARE Ing. Sergio Loaiza Snchez Instructor inglaser@misena.edu.co

DESARROLLO DE SOFTWARE Ing. Sergio Loaiza Snchez Instructor inglaser@misena.edu.co

DESARROLLO DE SOFTWARE Ing. Sergio Loaiza Snchez Instructor inglaser@misena.edu.co

DESARROLLO DE SOFTWARE Ing. Sergio Loaiza Snchez Instructor inglaser@misena.edu.co

DESARROLLO DE SOFTWARE Ing. Sergio Loaiza Snchez Instructor inglaser@misena.edu.co

DESARROLLO DE SOFTWARE Ing. Sergio Loaiza Snchez Instructor inglaser@misena.edu.co

DESARROLLO DE SOFTWARE Ing. Sergio Loaiza Snchez Instructor inglaser@misena.edu.co

Potrebbero piacerti anche