Guía 1- Introducción a HTML (1) (1)

SERVICIO NACIONAL DE APRENDIZAJE – SENA CENTRO INDUSTRIAL Y DESARROLLO EMPRESARIAL

SOACHA - CUNDINAMARCA

DESARROLLO DE SOFTWARE Ing. Sergio Loaiza Sánchez

Instructor [email protected]

En este curso usted aprenderá conceptos básicos para realizar una página web, lo

cual puede ser bastante fácil después de conocer todo lo necesario sobre HTML,

además basta con utilizar uno de los editores gráficos que veremos al final del

curso para desarrollar todas nuestras páginas web.

Cada página web que ves en Internet está escrita en un lenguaje llamado HTML.

Imagina que HTML es el 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.

Observa las siguientes líneas:

1. <!DOCTYPE html>

2. <html>

3. <head>

4. <title>Introducción a HTML</title>

5. </head>

6. <body>

7. <strong>Esta es mi primera página web</strong>

8. </body>

9. </html>

¿Ves el código con los símbolos de <> ? ¡Eso es HTML! Al igual que cualquier otro

lenguaje, tiene su propia sintaxis (reglas para la comunicación) especial.

Para hacer nuestras páginas 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 función de un navegador es

transformar el código que escribimos en el editor de texto, en una página web

reconocible! El navegador sabe cómo distribuir la página, siguiendo la sintaxis

HTML.

mailto:[email protected]





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.

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 línea (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.






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, en algunos casos también 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 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.

<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

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> , sabrás

por qué?






b. La cabecera incluye información importante, como el título de la página

web, este irá entre <title> y </title> .

c. El título son las palabras que veremos en la pestaña del navegador de

Internet, recuerda esto para que lo verifiques.

Para realizar: Volvamos al documento abierto en el Bloc de notas:

1. Añade una etiqueta de cabecera de inicio y una de cierre.

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 Introducción a HTML.

Hemos configurado muchas de las cosas básicas de tu archivo HTML para ti, solo

para que no te aburras con 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.

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 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.

3. 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).

4. Recuerda no borrar esto que has hecho en el Bloc de notas, aguarda un poco ya

casi terminamos nuestra primera página web.






Ahora que tenemos listo el código de nuestra primera página 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

ubicación, te recomiendo que lo hagas en Mis documentos. Allí guardarás

todas las páginas 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 diálogo de Guardar, abre primero la carpeta que creaste

anteriormente. Allí guardarás tu página web.

4. Prestemos atención a dos partes del cuadro de diálogo de Guardar: el

nombre del archivo y el tipo de archivo.

En el Nombre de archivo escribiremos el nombre de nuestra página, puede

ser cualquiera, en este caso se guardará como pagina1.html.

Al agregarle a nuestro archivo la extensión HTML le estamos indicando que

se trata de una página web.

5. Y finalmente en Tipo de archivo seleccionaremos Todos los archivos y

haremos clic en el botón Guardar.

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 página web.

1

2 3






EJERCICIO 1

Realizar una página web con las etiquetas html, cabecera y cuerpo que contenga

los siguientes elementos:

1. Título: Las mejores noticias de Internet.

2. Un primer párrafo con una noticia de música.

3. Un segundo párrafo con una noticia deportiva.

4. En un tercer párrafo escriba su nombre.

5. Guardar el archivo como página web, en la carpeta que usted creó, con el

nombre Ejercicio1.html.






¡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!)

Para realizar: Pregúntate a ti mismo: ¿cuál es el título de esta página?

1. Crea un encabezado en la sección 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 párrafos con el contenido que quieras.

5. Guárdalo y visualiza el resultado.

En realidad, HTML nos permite tener más de un tamaño de encabezado. Hay seis

tamaños 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 demás

A continuación te pediremos que añadas encabezados de varios tamaños. ¡Puedes

escribir lo que quieras como encabezados!

Para realizar: Continúa con el archivo anterior…

1. Actualmente tu código tiene un encabezado <h1> y dos párrafos.

2. Añade un encabezado <h3> antes del segundo párrafo.

3. Añade un encabezado <h5> después del segundo párrafo, y luego añade un

tercer párrafo después de este encabezado.


¡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.)

Para realizar: Continúa con el archivo anterior…

1. Añade tres encabezados más al código. ¡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> !


¡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.

EJERCICIO 2

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!)

4. Guarda el archivo en tu carpeta con el nombre Ejercicio2.html






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 en la parte de abajo—¡le añade a la página una imagen de un

pato de goma!

Copia el código en el Bloc de notas, guárdalo y visualizándolo en el navegador de

Internet.

¿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!

Para realizar: Añade una segunda imagen debajo de la primera.

¡Asegúrate 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.






2. Guárdala 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 después de src= (asegúrate de ponerla entre

comillas, como se muestra). Debe quedar algo así:

<img src="imagen1.gif"></img>

¡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 dónde

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 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.

Aquí está cómo convertir una imagen en un enlace: coloca una

etiqueta <a href=""> antes de tus etiquetas <img> y una






etiqueta </a> después de ellas. ¡En medio de las comillas después de href= ,

escribe la dirección de tu sitio web favorito!

Para realizar: Añade 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! Cerciórate de que entiendes las imágenes y los enlaces antes de

continuar con el ejercicio.

EJERCICIO 3

1. Añade dos imágenes 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. Después de las dos imágenes, crea un enlace que simplemente sea una línea 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 básico para crear una página web. Si te sientes

con suerte, puedes intentar crear tus propias páginas web. Por ahora resuelve el

ejercicio final de esta guía.

EJERCICIO FINAL

Vamos a crear una pequeña página 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 básica de tu página web.

2. Escoge un título para la página y agrégalo a la cabecera.

3. En el cuerpo, vas a agregar un encabezado h1 con el título principal,

debajo agrega un párrafo.

4. Agrega un encabezado h2 con un título secundario, luego otro párrafo.

5. Agrega varias imágenes, escoge varias de ellas con enlaces a tus páginas

favoritas.

6. Guarda el archivo en tu carpeta con el nombre Ejercicio4.html


Guía 1- Introducción a HTML (1) (1)

Documents

Transcript of Guía 1- Introducción a HTML (1) (1)