Programación en HTML by Biblioteca Virtual Instituto Kennedy

INSTITUTO JOHN KENNEDY El presente material forma parte de los contenidos digitales del Inst. John Kennedy. Se proh铆be su uso o distribuci贸n sin consentimiento de su autor o de la instituci贸n misma.

[INTRODUCCIÓN AL LENGUAJE HTML]

Prof. Mariano Correa

Índice: ¡COMENCEMOS A PROGRAMAR!

………………………………………………. 3

¡Lenguaje HTML!

…………………………………………….… 3

¿Qué es un hipertexto?

…………………………………………….… 3

Primer desarrollo

…………………………………………….… 5

Analizando el código fuente

…………………………………………….… 7

Los comandos

…………………………………………….… 7

Tabla de colores en hexadecimal

………………………………………..…… 10

Los parámetros

………………………………………..…… 11

Varios parámetros

………………………………………..…… 12

Comandos de párrafo

………………………………………..…… 14

Mi proyecto web

………………………………………..…… 16

Nuestra primera imagen en Html

………………………………………..…… 20

El sitio web

………………………………………..…… 22

Los enlaces, links o hipervínculos

………………………………………..…… 25

Estructura de un sitio web

………………………………………..…… 27

Más comandos

………………………………………..…… 27

Listado de comandos básicos en Html

………………………………………..…… 28

Algo más sobre los hipervínculos

………………………………………..…… 29

Material pedagógico digital del

INSTITUTO JOHN KENNEDY

Las Piedras 152 - Tel. 4226717 San Miguel de Tucumán – CP. 4000 - República Argentina 2

[INTRODUCCIÓN AL LENGUAJE HTML]

Prof. Mariano Correa

¡COMENCEMOS A PROGRAMAR! Se va haciendo tiempo de empezar a ver un poco de acción y lo haremos nada menos que programando en algún lenguaje. Primero vamos a diferenciar un par de detalles, algunos lenguajes requieren compilación y otros solo un intérprete. LENGUAJE COMPILADO: Son aquellos de los que ya hablamos, aquellos a los cuales, tras escribir su código debíamos procesar con un programa para convertir nuestro código en código máquina y recién allí podrán correr (funcionar). LENGUAJE INTÉRPRETE: Hablamos en este caso de lenguajes en los cuales nosotros escribimos el código y este no necesita ser compilado ni convertido, un programa lo leerá y lo interpretará tal cual nosotros lo escribimos sin necesidad de convertirlo a código máquina.

LENGUAJE HTML Vamos a dar nuestros primeros pasos en programación aprendiendo un lenguaje muy simple y vigente, el lenguaje HTML. ¿Por qué elegimos HTML?. Por una razón muy simple, ¡es el lenguaje más utilizado en internet e internet nos encanta!. ¡CON EL SE HACEN LAS PÁGINAS WEB!. ¿Necesitamos comprar algo o bajar algo para programar en Html?. No, eso también es maravilloso. ¡Con lo que tenemos en nuestra computadora, simplemente sabiendo un par de cositas ya podemos hacer nuestro primer programa!. ¡Incluso es compatible en su mayoría con todas las computadoras y todos los navegadores de internet, así que lo que hagamos, funcionará casi al 100% en todos lados y no necesitaremos estar conectados para trabajar!. Pues bien, ¡MANOS A LA OBRA!. HTML significa HiperText Markup Lenguaje (lenguaje de marcado de hipertexto) y es un lenguaje que surgió en 1991. ¿QUÉ ES UN HIPERTEXTO? Un hipertexto es un documento de texto (como el que hacemos en Word), que en su interior contiene enlaces a otros documentos y elementos, de modo tal que nosotros al leer podamos hacer clic en alguna frase, palabra, imagen u objeto y al hacerlo ingresemos en otro hipertexto. Esto nos permite, haciendo clic aquí y allá, ir y volver de una página a otra con facilidad y de manera muy cómoda. 3

[INTRODUCCIÓN AL LENGUAJE HTML]

Prof. Mariano Correa

O sea… más o menos esto:

Es justamente lo que habitualmente hacemos cuando navegamos en internet. Clic aquí, me lleva a otra página, clic allá me lleva a otro sitio, volver (o atrás) y regreso a donde estaba y así voy yendo de un documento (o página web) a otro buscando lo que necesito. ¡NUESTRO PRIMER LENGUAJE SERÁ EL MUNDIALMENTE FAMOSO LENGUAJE DE HIPERTEXTO! Nos servirá básicamente para estas tres cosas: 1) Sumergirnos en el fascinante mundo de la programación por primera vez, aprendiendo lo que es escribir código en un lenguaje de programación. 2) Nos servirá para crear nuestra web y trabajos que deseemos presentar de manera navegable y multimedial para los demás. 3) Nos permitirá aprender y comprender como funciona internet y por qué funciona así. Necesitamos lo siguiente: 1) Un editor de textos (para comenzar el Bloc de Notas de Windows servirá). 2) Un navegador de internet (puede ser Google Chrome, Mozilla Firefox e incluso Internet Explorer –viene con Windows-, también servirá). Dicho de otro modo, ¡con lo que tenemos ya estamos en carrera!.

[INTRODUCCIÓN AL LENGUAJE HTML]

Prof. Mariano Correa

PRIMER DESARROLLO En programación siempre nuestro primer programita, en cualquier lenguaje, es el que se conoce en inglés como “Hello World!” (Hola mundo!), generalmente es muy cortito y sirve como iniciación. ¿VAMOS CON NUESTRO “HELLO WORLD!” EN HTML? Ok, vamos al botón INICIO, abrimos el Menú Inicio de Windows y en Todos los programas abrimos Accesorios -> Bloc de notas Una vez allí, copiamos el siguiente código:

Y al finalizar lo guardamos en nuestro escritorio de Windows yendo a la opción Archivo (en el bloc de Notas) -> GUARDAR COMO -> buscamos ESCRITORIO -> y como nombre, donde pregunte el nombre del archivo escribimos PAGINA.HTML Es fundamental que lleve el nombre el punto y html sin espacios en el nombre. Explico porque, cuando indicamos .HTML (que también puede ir con minúsculas), le estamos indicando a Windows que lo que abrirá será algo creado en lenguaje HTML, razón por la cual lo identificará con el ícono de Google Chrome, Mozilla o el navegador que habitualmente utilizamos. Significa que lo identifica como página web. Veamos si funciona. Si guardaste como te dije, minimizá todo (no cierres nada) y buscá el ícono de PÁGINA en tu escritorio. ¿APARECE? Si no aparece es porque no guardaste en el Escritorio de Windows, repetí los pasos de guardado hasta que aparezca. 5

[INTRODUCCIÓN AL LENGUAJE HTML]

Prof. Mariano Correa

¿SI APARECE?, Ok!, entonces probemos si funciona… ¡DOBLE CLIC SOBRE EL ÍCONO QUE DICE PÁGINA!.

¡FELICIDADES!, ¡EN ESTE GLORIOSO DÍA HAS HECHO TU PRIMER PROGRAMA!

¡ Y EN REALIDAD ES UNA PÁGINA WEB ! La web no dirá mucho más que esto y puede ser diferente el marco o lo que diga en la barra de dirección, eso dependerá del navegador que usemos y de nuestro sistema operativo, pero lo que importante es que nos brinde ese saludo, ¡SEÑAL QUE ESTÁ FUNCIONANDO!. Nota: Si algo no aparece como esperábamos, regresa al Bloc de notas y fíjate si el código está escrito como lo muestra la figura. Revisa si pusiste las barritas, los signos mayor (>) y menor (<) como en la imagen y todo lo demás. Corrige y vuelve a guardar. Ah! Cuando hayas guardado por primera vez ya no hace falta volver a ARCHIVO -> GUARDAR COMO… etc. Simplemente presiona CTRL + G y el Bloc de Notas sabrá donde debe guardar. Luego vas al navegador, si lo dejaste abierto y presionas la tecla F5 (está arriba de la tecla 6) y el navegador por sí solito actualizará su contenido (la página). POR FAVOR NO AVANCES AL PASO SIGUIENTE SI NO HAS HECHO ESTO BIEN. Siempre recuerda que la programación requiere mucha paciencia, atención y concentración.

[INTRODUCCIÓN AL LENGUAJE HTML]

Prof. Mariano Correa

ANALIZANDO EL CÓDIGO FUENTE Hay algo que siempre debes tener en cuenta, programar no se trata de meter código a lo loco, sin pensar lo que estás haciendo, quien sabe programar, escribe solamente lo necesario. Aprendamos además lo siguiente: CÓDIGO FUENTE: Llamamos código fuente al código que introducimos cuando programamos, es decir, el programa al desnudo. COMANDO: Un comando es una palabra que sirve para hacer algo específico en programación. En algunos lenguajes como el HTML va encerrado entre signos <>, Por ejemplo: <HTML>, <TITLE>, <BODY>. Veamos qué hicimos:

Este es el primer código que introdujimos, obsérvense las marcas y colores, nos ayudarán a comprender qué hicimos. A fin de hacerlo muy simple utilizamos los colores del semáforo. VERDE: Si prestamos atención, el código HTML siempre comienza con <HTML> y cierra al final con </HTML>, es decir que al final escribimos nuevamente el comando con el que iniciamos el código, solo que con una barrita antes del nombre </HTML>. Todo lo que se programa en lenguaje HTML comienza con <HTML> y finaliza con </HTML> AMARILLO: En amarillo vemos el título que tendrá la web (vamos al navegador y comprobaremos que nos aparece en la parte de arriba el título Mi primera web. Como verás, lo que ponemos de título va encerrado entre <TITLE> y </TITLE>. ¡SI!, cierra con el mismo comando con una barrita, tal como pasaba en <HTML> El título en toda web, siempre va dentro de <HTML> y </HTML>, sino el navegador no lo interpreta como algo escrito en lenguaje HTML. ROJO: En rojo tenemos el cuerpo de la página, que no es otra cosa que lo que queremos vean las personas que abran nuestra página, en este caso, el mensaje Hola Mundo!. Como vemos, todo lo que se abre con <> se cierra con </>.

[INTRODUCCIÓN AL LENGUAJE HTML]

Prof. Mariano Correa

Primero abro el lenguaje (indico asi a Google Chrome, Mozilla o IE que leerán lenguaje Html), luego defino el título y debajo abro el cuerpo (lo que se verá en el navegador), no olvidando cerrar. Tres comandos utilizados hasta ahora: <HTML> Para abrir el lenguaje <TITLE> Para definir el título que aparecerá en la pestaña del navegador <BODY> Para mostrar lo que queremos se vea dentro de la página Existe un comando más que habitualmente se utiliza, <BASE>, se utiliza para configurar el encabezado de una página, incluso algunos programas adicionales que queremos funcionen antes de abrir la web. Por ahora lo ignoraremos, pero lo veremos más adelante. ¿Vamos bien hasta aquí?, recuerda no avanzar si algo no entiendes. Es importante comprender y recién luego seguir. TRES COLORES, TRES COMANDOS, RECUERDA QUE SON TRES PARA EMPEZAR. ¡ATENCIÓN!. Puede acontecer, que tras escribir el código las cosas no se vean bien en el navegador, nos aparezca parte del código en la página, no aparezca lo que deseamos, etc, si eso sucede, es porque hemos escrito mal algo en el código, estamos nada más ni nada menos que ante UN ERROR DE SINTAXIS (código fuente mal expresado). Revisar y corregir.

¿Y SI CAMBIAMOS EL COLOR DE FONDO? ¿Se puede?, ¿cómo se hace?. Bien, volvamos a nuestro CÓDIGO FUENTE en el Bloc de notas y agreguemos en BODY lo siguiente (Ver lo subrayado en rojo):

Es el mismo código de hace rato pero hemos agregado bgcolor=Pink luego de abrir el cuerpo de la página. Bgcolor significa Background color (color de fondo) = Pink (rosa). Agregamos eso, CTRL + G o Guardar, vamos al navegador y presionamos F5 o Actualizar.

¡OK!, ¡ESTO COMIENZA A TOMAR COLOR! Juegan todos los colores, ¿sabés los colores en Inglés?. Ok, ¡entonces andá al código fuente en el Bloc de Notas y probá los otros!. Blue, Green, Yellow, Black, White, Cyan, Red, Grey, Magenta y ¡busca nuevos!. ¿Sabías que puedes usar millones de colores en tu página web?. Muchos están expresados en lenguaje hexadecimal. 8

[INTRODUCCIÓN AL LENGUAJE HTML]

Prof. Mariano Correa

Si deseamos expresarlo en hexadecimal, simplemente en el lugar de escribir el nombre del color (Color Name), escribimos su valor en numeración hexadecimal. Es decir, nuestro código podría quedar de esta manera:

No es ni más ni menos que el color Aquamarine, solo que lo hemos expresado en hexa y nuestro navegador lo interpreta a la perfección. ¿Por qué lo utilizamos en hexadecimal? Bien, ¡la mayoría de los graficadores nos expresan el color exacto que busquemos en hexa!. Tan solo debemos copiar ese valor que nos devuelven agregándole el numeral ¡y listo!. 9

[INTRODUCCIÓN AL LENGUAJE HTML]

Prof. Mariano Correa

TABLA DE COLORES EN HEXADECIMAL

RGB significa (Red, Green, Blue –Rojo, verde y azul-) y es una norma internacional muy utilizada en diseño y en gráfica al ver los colores en paleta. La encontraremos muy presente en programas como Corel y Photoshop, entre tantos otros.

¡Y NO SON TODOS!, ¡RECORDEMOS QUE SON MILLONES! 10

[INTRODUCCIÓN AL LENGUAJE HTML]

Prof. Mariano Correa

LOS PARÁMETROS A diferencia de los comandos, los parámetros son palabras que agregamos dentro de un comando para especificar algún detalle. Por ejemplo, cuando le agregamos color de fondo a nuestra web, no utilizamos ningún comando nuevo, simplemente agregamos al comando <BODY> el parámetro bgcolor y un color. Veamos, antes teníamos esto: <BODY> Luego tuvimos esto: <BODY bgcolor=Pink> El comando sigue siendo BODY (solo que a CUERPO le indicamos que utilice un color rosa como fondo del cuerpo) –aquí en color rojo para diferenciarlo-. En la inmensa mayoría de los lenguajes de programación podemos agregarle a los comandos, parámetros para especificarles cosas. Avancemos otro pasito. Al mismo código fuente que ya tenemos, agreguemos un nuevo comando, , que nos permitirá indicarle al navegador como queremos nuestra fuente (tipo de lentra en “Hola Mundo!”). Cambiemos solo lo que vemos subrayado en rojo:

Al encerrar Hola Mundo! entre y , estamos indicándole que queremos Hola Mundo! con fuentes (modelo de tipografía diferente, en este caso en color Blue –Azul-). ¿Probamos? Agregamos lo que hay que agregar, guardamos, vamos al navegador y actualizamos. ¿Funcionó? Ok!, usamos un comando nuevo, , al que le indicamos como parámetro el color que lucirá, un fantástico Azul!. 11

[INTRODUCCIÓN AL LENGUAJE HTML]

Prof. Mariano Correa

VARIOS PARÁMETROS OK! ¿Te animás a hacer algo aún más difícil?. Encierra Hola Mundo! dentro de este FONT: Hola Mundo! ¿Qué significa?, significa que la frase Hola Mundo debe mostrarse con la fuente Arial (tipografía o tipo de letra), en tamaño 6 (grande) y en color azul. O sea, algo así:

Hola Mundo! ¡Si!, el comando sigue siendo el mismo, , solo que le hemos agregado parámetros para especificarle como queremos que sea la fuente, en Arial, tamaño grande y en color azul. Tres parámetros para un solo comando. Puedes cambiar los colores y escribirlos en hexa usando la tabla RGB también, por ej: Hola Mundo! Entonces nuestro nuevo commando es , que nos permite indicar, gracias a tres parámetros (face –aspecto-, size –tamaño- y color), que tipo de tipografía, tamaño y color queremos que se vea. Recuerda siempre cerrar con su correspondiente .

¿TE ANIMAS A ENRIQUECER AÚN MÁS TUS TEXTOS EN HTML? Ok, prueba nuevas fuentes, Tahoma, Times New Roman, Courier, Sans Serif y otras. Abre Word y allí, en tipo de fuente encontrarás todos los disponibles en tu PC. Cambia los tamaños en size, los colores también. Modifica tu texto Hola Mundo! por tu nombre y apellido. Copia esa línea y pégala debajo, cambiándole también el texto, es decir, prueba cambiar lo que está en el cuerpo y dejarlo así (como se ve en el recuadro rojo):

Si te fijas, uno utilizará letra de tipo Arial, el otro Tahoma, uno en tamaño 6, el otro 4 y debajo los colores son diferentes, incluso la forma en que están expresados. 12

[INTRODUCCIÓN AL LENGUAJE HTML]

Prof. Mariano Correa

¡Muy bien!, vamos cambiando colores, cambiando tipos de letra, tamaños… ¿y si ahora intentamos encerrar Juan Pérez entre y ? Tendría que quedar asi el texto dentro de nuestro código fuente: Juan Pérez ¡SI!, bienvenido sea el texto en ¡NEGRITA!, que en lenguaje HTML se llama BOLD y el comando para crear Negritas (o resaltado) es y . Todo lo que esté entre y lucirá resaltado (en Negrita). ¿Y si en lugar de probamos ? ¡Lucirá SUBRAYADO! es UNDERLINED (Subrayado) ¡Ahora CURSIVA! , ¡probemos!, ¡intentemos!. ¡ITALIC! (itálica o cursiva). ¿TE DISTE CUENTA QUE CADA VEZ CONTROLAMOS MAS COSAS EN NUESTRO TEXTO? Probemos lo siguiente, eliminemos las 2 líneas de nuestro código que contienen y allí, en ese mismo lugar, escribamos lo siguiente:

Cambiamos solamente lo que está dentro del recuadro rojo, tendría que arrojar más o menos el siguiente resultado:

Antes de avanzar, comprueba con la vista si lo que en código fuente está escrito coincide con el resultado que aquí vemos. Ese ejercicio te ayudará a ir comprendiendo como funciona este lenguaje de marcas (comandos), que van indicando al navegador como mostrar cada parte del texto, fuente, color, tamaño y aspecto. INSISTIREMOS SIEMPRE EN ALGUNOS DETALLES: Cuidado con los errores de sintaxis, cuando algo no aparezca como deseas, verifica el código fuente si está correctamente escrito. No avances al siguiente tema si es que no has comprendido bien el anterior. Practicá mucho. 13

[INTRODUCCIÓN AL LENGUAJE HTML]

Prof. Mariano Correa

COMANDOS DE PÁRRAFO Así como , , , nos permiten mejorar el aspecto de nuestras fuentes de texto, existen comandos que nos permiten alinear nuestros párrafos de la forma que queremos. Por ejemplo, el comando <CENTER>, todo lo que se encuentre entre <CENTER> y </CENTER>, quedará centrado en la página web. ¡Ideal para un título! Nos ocupemos de eso, al código que ya tenemos, agreguémosle lo que vemos en rojo.

En el ejemplo hemos agregado un título La Revolución de Mayo, que está subrayado, en negrita y centrado y el dos veces, nos hace dejar 2 líneas (o renglones) antes de mostrar el siguiente texto. Si todo ha salido bien, debería verse así:

¿Muy pequeño quedó el título?, Ok, mejoremos eso.

Quedaría así…

[INTRODUCCIÓN AL LENGUAJE HTML]

Prof. Mariano Correa

¿Y si encerráramos el texto entre <CENTER> y </CENTER>? ¿Te animás a intentar?, ¿cuál será el resultado?, ¡OJO CON LOS ERRORES DE SINTAXIS!. Fijate bien donde abris <CENTER> y donde lo cerrás. Te ayudo solo por esta vez:

Observá en el navegador si quedó centrado el texto. ¿Todo en orden?, muy bien, entonces ahora modifiquemos esos <CENTER> por , pero a (parágrafo o párrafo), le agreguemos el parámetro align=right (alinear a la derecha). Quedaría así:

¡Muy bien!, estamos en condiciones de decir, que podemos acomodar nuestros párrafos con los comandos <CENTER> y , que obviamente si los queremos a la izquierda llevarán en el parámetro ALIGN el valor LEFT y si lo queremos a la derecha RIGHT.

[INTRODUCCIÓN AL LENGUAJE HTML]

Prof. Mariano Correa

MI PROYECTO WEB ¡Muy bien!, con lo que hemos aprendido hasta ahora, ya estamos en condiciones de animarnos a desarrollar ¡nuestro primer proyecto Web!. ¿Te animás?. Bien, ¿qué es lo primero que hay que hacer cuando encaramos un proyecto?, ¡ORGANIZARLO!. ¿Para qué?, para que nos sea fácil y cómodo trabajar, sino distraeremos mucho tiempo en tratando de encontrar nuestros archivos y elementos en general, trabajar será complicado.

PASO Nº 1: Crear nuestro espacio de trabajo En el disco de nuestra computadora creamos una carpeta con el nombre del proyecto. Comenzaremos por una web de turismo, razón por la cual en nuestro disco C: o D: crearemos la carpeta /tucuman_web.

Es fundamental que hagas esto siempre que vayas a iniciar un proyecto importante, sea una página web o cualquier otro proyecto. Allí dentro guardarás todo lo que el proyecto necesita y cuando necesites trasladar el proyecto a otra computadora sabrás que debes copiar toda esa carpeta y su contenido tal cual, así como está.

PASO Nº 2: Conseguir las herramientas de trabajo Bien, ¿qué necesitaremos?. Navegador (puedes usar el Google Chrome), ¡ESTÁ! (abrilo), Bloc de Notas ¡ESTÁ! (abrilo)… y por ahora nada más. ¡ATENCIÓN!, ¡ATENCIÓN!. El bloc de notas es muy bueno, pero me permite abrir un solo archivo a la vez, si necesitara trabajar con varias páginas al mismo tiempo, tendría que estar abriendo y cerrando una por una todo el tiempo!. ¿Y si conseguimos algo mejor que el Bloc de Notas? Te dejo un Editor de textos para programadores muy bueno y gratis (freeware) llamado Context, bajalo e instalalo en tu compu. A partir de hoy trabajaremos con Context, pero vos, si querés, con el tiempo podés bajarte algún otro que te guste más, no hay problema.

[INTRODUCCIÓN AL LENGUAJE HTML]

Prof. Mariano Correa

PASO Nº 3: Conseguir el material para realizar el trabajo Ok, ya tenemos creado el espacio de nuestro proyecto, ya tenemos las herramientas de trabajo, consigamos el material. ¿Material?, ¡SI!, es una web de turismo, ¡hay que conseguir fotos e información de cada lugar!. ¡A GOOGLEAR!, ya sabemos, Google -> Imágenes -> Fotos de Tucumán (buscamos eso) -> Abrir o Ver imagen -> Guardar imagen como… -> ¡ATENCIÓN!, ¿DÓNDE VAMOS A GUARDAR ESAS IMÁGENES?...

¡CUIDADO CON ESO!, debemos guardarlas dentro de la carpeta de proyecto /tucuman_web Ya sabemos, antes de guardar vamos a Mi PC, disco local C: o D:, abrimos nuestra carpeta y una vez allí guardamos la foto.

¡OPS!, pequeño problema, ¡algunas fotos cuando las queremos guardar se guardan con nombres así y eso nos traerá problemas luego cuando necesitemos nombrarlas en el código!. ¿Qué hago?, ¿cómo se arregla?. 17

[INTRODUCCIÓN AL LENGUAJE HTML]

Prof. Mariano Correa

La solución es simple, cambia en el campo Nombre (está dentro del recuadro rojo), ese nombre largo por uno cortito de tu agrado. Te sugiero que sea un nombre relacionado a la foto, por ej. si la foto es de Raco, ponle Raco, o Raco1, Raco2, Raco3, etc. Nota: Si comprobamos yendo a la carpeta que las fotos se guardan pero no son reconocidas (asociadas) por Windows como imágenes, guardémoslas como Raco.jpg, Raco1.jpg, Raco2.jpg, Raco3.jpg, etc. Normalmente no es necesario pero en algunos casos se presenta este problema. Te sugiero buscar 1 foto al menos de cada lugar. ¿De qué lugares?, te paso un listado útil: -

San Miguel de Tucumán

Ruinas de Lules

Cerro San Javier

Raco

Tafí del Valle

El Siambón

El Cadillal

Quebrada de Lules

Yerba Buena

El mollar

El Corte

Ruinas de Quilmes

San Pedro de Colalao

Villa Nougués

(*) Menciono solo 14 lugares, pero Tucumán tiene muchos más que seguramente tus papás podrán comentarte. Solo en el centro, tenemos hermosos edificios como la Casa Histórica, Casa de Gobierno (que es una de las casas de gobierno más hermosas del país), iglesias, etc. Bajá todas las imágenes que te gusten, recordá renombrarlas si el nombre es muy largo o no te dice nada y bajalas dentro de la carpeta del proyecto. Ah!, una cosa más, ¿querés ponerle fondo a tu web?. No me refiero a un color de fondo, me refiero a una imagen de fondo. ¿Te animás?. Bueno, así como con Google bajaste las imágenes, ahora buscá wallpapers o fondos de pantalla. Buscalo así, como wallpapers y si querés fondos relacionados por ejemplo con la naturaleza, buscalos así:

Aunque también podes buscarlo como fondos naturaleza, pero en inglés a veces se ven mejores cosas. Probá de ambas formas y bajá los fondos que te gusten de la misma forma en que lo hiciste con las imágenes. ¡Los wallpapers también son imágenes, pero más grandes!. 18

[INTRODUCCIÓN AL LENGUAJE HTML]

Prof. Mariano Correa

Ok!, ya tenemos nuestro espacio de proyecto, tenemos las herramientas y tenemos el material… ¿qué sigue?... LET´S WORKS! (A TRABAJAR!) Bien, ¿cuál es el plan?. El plan es crear una sola página web modelo y hacer varias copias de ella para cada lugar de Tucumán (más adelante veremos como enlazarlas entre sí). Comencemos con el código de esa primera página, en Context, File -> New (o la hojita en blanco) y tipeamos este código fuente en HTML:

¿Qué hicimos?. Además de la estructura del lenguaje HTML, indicamos en Body (cuerpo de la página) que el color de fondo sea verde. Más abajo, CENTRADO (está entre <CENTER> y </CENTER>), pusimos el título Tucumán turístico en fuente Arial, de tamaño 6 y color amarillo -Yellow-). Ok, lo guardamos!. Aquí en Context hacemos clic sobre el diskette (tercer icóno) o abrimos File y seleccionamos Save As… (Guardar como) -> y ya sabemos, buscamos nuestra carpeta /tucumán_web en el disco C: o D: pero…. Como nombre (name) pondremos: tucuman.html Nunca, jamás, guardes un archivo html con espacios en el nombre, por ejemplo: San Miguel de Tucumán.html <- ESTO NO! El navegador, sea Google Chrome, Mozilla o cualquier otro tendrá dificultades para abrir el archivo. ¡Ojo con eso!. El nombre y pegadito .html En lo posible todo con minúsculas (facilita la compatibilidad entre navegadores y servidores web, ya que algunos interpretan y otros no). Igual con los acentos, signos y la eñe, evitalos. 19

[INTRODUCCIÓN AL LENGUAJE HTML]

Prof. Mariano Correa

Ok, ¿ya guardaste?, vamos a nuestra carpeta y abrimos el archivo. Si has guardado bien, tendría que figurar con el ícono de Google Chrome o del navegador que siempre usás. ¿Ya está?, ¡PERFECTO!. Recordá que si algo no aparece, puede haber algún ERROR DE SINTAXIS y hay que corregirlo, guardar y probar nuevamente desde el navegador. Bueno, mejoremos la página… Vamos al código y le pongamos nuestra imagen de fondo. Supongamos que nuestra imagen de fondo se llama naturaleza.jpg En el código cambiaremos esto: <BODY bgcolor=Green> por esto: <BODY bgcolor=Green background=naturaleza.jpg> ¡SI!, le agregamos el parámetro background= y el nombre de nuestro archivo de fondo. Recordá siempre que en lenguaje HTML cuando hacemos mención a un archivo, si es una imagen el nombre debe ser el nombre.jpg o .png o .gif (según sea el caso). Si no ponemos .jpg, .gif, .png o lo que corresponda, no encontrará el archivo y al no encontrarlo no lo utilizará. ¡Atento a esto!. ¡Listo!, guardemos y probemos desde el navegador. Ah!, cuando ya guardaste por primera vez ya no necesitás seguir yendo a Guardar como… simplemente utilizá Guardar o presioná CTRL + S (Save) en el Context. Lo mismo en el navegador, presioná F5 (Actualizar) y listo. NO AVANCES AL PASO SIGUIENTE SI NO VA TODO BIEN HASTA AHORA. ¿Todo bien?, ¡Muy bien!. Vamos más rápido ahora. NUESTRA PRIMERA IMAGEN EN HTML Como todo lo que se hace en un lenguaje de programación, en este caso lenguaje HTML, debemos conocer los comandos que nos permiten hacer cada cosa. Intentaremos insertar una imagen. El comando es: <IMG> Se utiliza así: <IMG SCR=casa_historica.jpg> Obviamente casa_historica.jpg es un archivo imaginario, vos cambialo por el nombre de alguna de las fotos que bajaste. Pero agregá esta línea en tu código fuente. <IMG SCR= significa IMAGEN EN PANTALLA (SCREEN = pantalla) y el nombre de la imagen. 20

[INTRODUCCIÓN AL LENGUAJE HTML]

Prof. Mariano Correa

¿Te ayudo?

Guardamos (CTRL + S), vamos al navegador, F5 (actualizar) y si todo ha salido bien… Voilá!. ¡Tenemos nuestra primera imagen insertada en una página web desde lenguaje HTML!. Recordá que casa_historica.jpg es un archivo que vos no tenés, que tenés que reemplazar ese nombre por uno de tus archivos de imágenes. Fijate en un detalle, la imagen <IMG> quedó entre <CENTER> y </CENTER>, es por eso que está centrada en la imagen, pero tenemos un problema, está pegada a Tucumán turístico. ¿Los separamos?

Te invito a aplicarle Negrita y subrayado a Tucumán turístico, ¿cómo lo harías?. Recordá los comando para ello, ¿entre qué comandos encerrarías ese texto?. ¡A practicar!, ¡la programación es fundamentalmente práctica!, ¡MUCHA PRÁCTICA!. 21

[INTRODUCCIÓN AL LENGUAJE HTML]

Prof. Mariano Correa

IMAGEN ROTA: Es frecuente encontrar en las webs un iconito de una imagen rota. Cuando vemos eso, debemos entender que esa imagen ya no existe, fue borrada o el nombre con el que se busca no es el mismo de la imagen guardada. Tené cuidado de escribirlo correctamente cuando escribas el nombre de la imagen.

EL SITIO WEB Por lo genera la gente le dice “PÁGINA WEB” a lo que es un “SITIO WEB”, confundiendo ambas cosas que en realidad NO SON LO MISMO. Una página web es lo que vos acabás de crear, una sola y única página en HTML. UN SITIO WEB es más de una página web. Un SITIO WEB está formado por 2 o más páginas webs como las que creaste, que se comunican entre sí por un enlace, link o hipervínculo. Cuando ingresemos a una web por internet y hagamos clic en algún link que nos ofrece, muchas veces veremos que ese clic nos lleva a otra página web parecida del mismo sitio. Una página que dice otra cosa pero es parte también, estamos entonces ante un SITIO WEB. Ok, sabiendo esto, ¿te animás a convertir tu página web en un sitio web?. ¿Qué haremos?, a la página tucuman.html que tenemos abierta en Context vamos a guardarla con otro nombre, por ejemplo raco.html Y una vez hecho esto volveremos a hacerlo pero la guardaremos como tafi.html Luego volveremos a guardarla pero esta vez como cadillal.html Otra más, pero como san_javier.html o simplemente sanjavier.html (recuerda que no debes dejar espacios en blanco entre los nombres). Guardá tantas páginas como fotos de lugares de Tucumán hayas bajado a tu carpeta. aremos una página por cada lugar, aunque ¡SORPRESA!, A MEDIDA QUE GUARDAS LAS PÁGINAS VAN QUEDANDO HECHAS Y SOLO HAY QUE CAMBIARLES LA FOTO Y EL TEXTO!. ¡ASÍ DE FÁCIL ESTÁS CONVIRTIENDO UNA SIMPLE PÁGINA WEB EN TODO UN SITIO WEB!

[INTRODUCCIÓN AL LENGUAJE HTML]

Prof. Mariano Correa

Si has hecho las cosas bien, tendrías que tener por cada foto de lugar, su propio archivo html de ese lugar en tu carpeta /tucuman_web. Es decir, algo similar a esto:

Muy bien, vamos a Context y abramos los archivos HTML de cada lugar. ¿Cómo hacemos?. Arriba vamos a File -> Open (o la carpetita que está debajo de File) y seleccionamos los archivos HTML (no las imágenes) y le damos Abrir, Abrir, Abrir hasta que aparezca eso. Podemos abrirlos a todos de una sola vez presionando CTRL y el mouse al abrir. Context debe quedarnos así:

¿Por qué abrimos todas juntas?, ¡simple!, para poder trabajar todas a la vez. Sino tendríamos que abrir una por una, abrir, corregir, cerrar, abrir la siguiente, ¡sería muy lento!, ¡y tedioso!. Por eso elegimos Context en lugar del Bloc de notas.

[INTRODUCCIÓN AL LENGUAJE HTML]

Prof. Mariano Correa

Bien, ahora, por cada página html iremos a su código cliqueando en la pestaña y modificaremos el título por el nombre del lugar y el nombre de la imagen por el nombre de la foto de ese lugar. Por ejemplo en cadillal.html modificaremos Tucumán Turísitico por Visite El Cadillal Y debajo, la imagen (en mi caso casa_historica.jpg) por la imagen que tengas de El Cadillal, por ejemplo cadillal1.jpg Debería quedar así:

Si te fijás, al costado del nombre de cadillal.html aparece un asterisco (*), en Context siempre te aparecerá ese signo cuando no has guardado aún el archivo y modificaste algo dentro de él. Presioná CTRL + G y desaparecerá (al guardar el archivo). Vamos a nuestra carpeta, busquemos el archivo cadillal.html (recordá que es el que tiene el ícono de nuestro navegador), le hacemos doble clic y nos fijamos si ha cambiado. ¿SI LO HIZO?, ¡EXCELENTE!, ¡AHORA VAMOS POR LOS DEMÁS!, al final los enlazaremos. Volvamos a Context, vamos a raco.html y modifiquemos su contenido. Ya sabés, título, luego el IMG (la imagen), guardamos con CTRL + S y nos fijamos en la carpeta si ha cambiado. Doble clic… ¿CÓMO VAMOS?... ES MUY IMPORTANTE QUE HAGAS ESTO CON TODAS, antes de comenzar a enlazarlas.

[INTRODUCCIÓN AL LENGUAJE HTML]

Prof. Mariano Correa

LOS ENLACES, LINKS O HIPERVÍNCULOS Hemos llegado hasta aquí, es el momento de comenzar a enlazar las páginas entre sí. ¿Qué entendemos por enlazarlas? Bien, enlazarlas es vincular una página con otra a través de un objeto, ese objeto puede ser una imagen, un gráfico e incluso un simple texto. Esto se logra insertando en cada archivo html un comando <A>.

La sintaxis del comando <A> para enlazar páginas webs se utiliza así: <A HREF=cadillal.html>Ir a El Cadillal</A> Se encierra entre <A> y </A> lo que queremos que aparezca en la página como objeto vinculante (que nos lleve a otra página). En este ejemplo, nos llevará a la página cadillal.html ¿Lo intentamos?. Abrimos tucuman.html en el Context (o vamos allí si ya lo tenemos abierto) y agregamos a nuestro código fuente lo siguiente:

[INTRODUCCIÓN AL LENGUAJE HTML]

Prof. Mariano Correa

Agregué un par de para dejar 2 líneas de espacio simplemente pero lo que aquí nos importa es <A HREF=cadillal.html>Ir a El Cadillal</A> Guardemos (CTRL + S), doble clic en tucuman.html desde nuestra carpeta y encontraremos, si hemos escrito todo bien, un mensaje abajo que dice Ir a El Cadillal. ¿Qué pasa si le hacemos clic?. ¡MUY BIEN!, ¡ACABÁS DE CREAR TU PRIMER HIPERVÍNCULO EN HTML!. Ahora vamos en el Context a enlazar cadillal.html a famailla.html ¿Cómo sería?, abrimos el código de cadillal.html y agregamos lo mismo que agregamos en tucuman.html y <A HREF… pero en lugar de decir cadillal.html enlazaremos famailla.html Probemos agregar esto al código de cadillal.html debajo del <IMG>: <A HREF=famailla.html>Visite Famaillá</A> Ok, probemos si funciona, vamos a la carpeta, doble clic en cadillal.html… se abre, clic en Visite Famaillá, ¡MUY BIEN!, ¡HEMOS ENLAZADO OTRA PÁGINA A UNA NUEVA!.

¿TE ANIMÁS A ENLAZAR UNAS CON OTRAS? Por ejemplo: Famaillá con San Javier, San Javier con Raco, Raco con El Siambón, El Siambón con Tafí del Valle, hasta llegar a la última que tenés que enlazar con tucuman.html ¡A PRACTICAR! Recordá que a cada código fuente tenés que agregarle su <A></A> de enlace a la otra página y que en ese enlace debés escribir correctamente el nombre del archivo. Y POR ÚLTIMO, podríamos crear un menú que enlace a todas las demás, copiamos el mismo código fuente de tucuman.html y creamos principal.html. Allí dentro hacemos algo como esto: ¿Y SI ENLAZÁRAMOS CADA UNA DE LAS PÁGINAS CON principal.html?

[INTRODUCCIÓN AL LENGUAJE HTML]

Prof. Mariano Correa

Páginas más, páginas menos, fundamentalmente el trabajo que hemos desarrollado a través de este práctico elaborado paso a paso fue el siguiente:

¿Te animas a enlazar cada página con todas las demás?. ¡Sería de gran ayuda para el navegante no tener que regresar de Cadillal a la página principal para ir a Tafí del Valle por ejemplo!. Confío en tu capacidad.

Más comandos Los comandos que hemos visto son solo algunos de muchos más que existen, pero son compatibles con todos los navegadores. Es siempre importante tener en cuenta cuando desarrollés tu proyecto web, que debe ser compatible con todo, de modo tal que más gente pueda visitarla y disfrutarla sin inconvenientes. Existen muchos comandos más en HTML, que con el correr de los años fueron sumándose para enriquecer aún más lo que hacemos en las páginas. Algunos de ellos los encontrarás en la siguiente tabla. Disfrútalos.

[INTRODUCCIÓN AL LENGUAJE HTML]

Prof. Mariano Correa

LISTADO DE COMANDOS BÁSICOS EN HTML PARA FUENTES: Comando

Sintaxis y ejemplo San Javier

Otros lugares

Museo Casa Terán

<H1>….<H6> …

<h1>Web de Juan</h1> Ver cita

<BIG>… <big>Bienvenidos</big> <BLINK>

<STYLE>

<marquee>Bienvenidos!</marquee> <blockquote >Por Juan El Cadillal

Utilidad Pondrá San Javier en Negrita o resaltado Subrayará Otros lugares Pondrá Casa Terán en cursiva (itálica) Hasta <h6>, textos grandes. Texto subíndice o superíndice. Fuente enorme o pequeña. Texto parpadeante en algunos navegadores. Establece como fuente Times New Roman. Movimiento de marquesina. Para destacar una cita Mostrará El Cadillal en fuente Arial, color azul y en tamaño 2

PARA PÁRRAFOS (ALINEACIÓN): Comando <CENTER>

Sintaxis y ejemplo <center>Texto</center > Por Juan

<LEFT>…<RIGHT> <left>Las plantas</left> <LI>

<li> Parques y jardines

Otros lugares para visitar

<HR>

<hr>

Utilidad Centrará Texto Alineará el texto a la derecha de la página Alinea a la izquierda el texto Las plantas. Añade una viñeta a la izquierda del texto. Forzará salto de línea (renglón) Inserta una línea de separación

[INTRODUCCIÓN AL LENGUAJE HTML]

Prof. Mariano Correa

OTROS COMANDOS: Comando <IMG> <A>

Sintaxis y ejemplo <img src=”tafi2.jpg”>

Utilidad Insertará la imagen tafi2.jpg en la página Inserta un hipervínculo a página principal

<a href=principal.html>Volver</A>

Recordar algunos parámetros: Parámetro bgcolor=

Sintaxis y ejemplo <BODY bgcolor=green>

background=

Face=Arial

Hola <BODY link=yellow vlink=blue alink=green> <a href=”cadillal.html” target=”ventana2”>

Link, vlink y alink Target=

Acción o utilidad Pondrá el fondo del cuerpo de la página en color verde Pondrá la imagen cielo.jpg de fondo en nuestra página. En el face, indica modelo o tipo de fuente y en size su tamaño. Pondrá color a tus enlace, vlink son los visitados y alink los activos. Abrirá el enlace en otra ventana a la que llamará ventana 2.

ALGO MÁS SOBRE LOS HIPERVÍNCULOS ¿Qué pasaría si en un hipervínculo en lugar de enlazar a otra página web, enlazás a otro tipo de archivo o a una dirección de internet?. ¿Lo intentaste?. Veamos, agregá este código: <A HREF=http://www.wikipedia.org>Ir a Wikipedia</A> Como podemos apreciar, en lugar de poner el nombre de un archivo Html, por ej. cadillal.html, pusimos una URL (dirección de internet). Esto provocará que al hacer clic en la página en Ir a Wikipedia, nuestro navegador intente ingresar a la web de Wikipedia. De esta manera es que se crean los enlaces o links EXTERNOS. ¡Probalo!. ¿Y si tuviéramos un video?. <A HREF=onedirection.avi>Ver video</A> Nota: el video debe estar en nuestra carpeta de proyecto. ¡SI!, al hacer clic en Ver video, se disparará en nuestra PC el video (onedirection.avi es un ejemplo de nombre de archivo).

[INTRODUCCIÓN AL LENGUAJE HTML]

Prof. Mariano Correa

¿Y si en lugar de un video pusiéramos un archivo de un juego u otra cosa?. ¡Así de fácil se bajan los juegos de las páginas web!. Intenta crear enlaces a distinto tipo de archivos, prueba con imágenes .jpg también. Copia archivos a tu carpeta de proyecto y prueba enlazarlos desde el código. Es impresionante la cantidad de cosas que puedes enlazar desde html si es que sabes utilizarlo. Ah! ¡Una más!, intenta agregar el parámetro TARGET a tu hipervínculo, por ejemplo, a: <A HREF=cadillal.html> Que está dentro del código fuente de tucuman.html, agrégale un target: <A HREF=cadillal.html target=Cadillal> Si te fijas, cuando guardes y luego actualices y hagas clic, se abrirá la página Cadillal… ¡PERO EN UNA VENTANA NUEVA DEL NAVEGADOR!. Le estás diciendo con TARGET, que dispare el enlace en una ventana a la que llamará Cadillal.

¡FELICIDADES!, ¡HAS COMENZADO A CONTROLAR LAS VENTANAS!

[INTRODUCCIÓN AL LENGUAJE HTML]

Prof. Mariano Correa

TRABAJO PRÁCTICO FINAL DE

INTRODUCCIÓN AL LENGUAJE HTML En base a lo aprendido, desarrolla un proyecto de investigación sobre el tema que más te apasione en este momento de tu vida. Puede ser tecnología, puede ser música, algún artista, los animales (razas), etc. Deberás:

Respetar la modalidad de trabajo, paso a paso: crear tu espacio para el proyecto, nutrirte de las herramientas, del material, generar el primer código y luego copiarlo y finalmente enlazarlo. 1) El trabajo tendrá que contar con todos los elementos trabajados en clase, imágenes, videos, archivos de otro tipo, etc. 2) Finalizado el proyecto, deberás copiar la carpeta con su contenido en un pendrive y presentarlo en la hora de Informática. Durante dicha hora, lo presentarás en el proyector para que lo disfrutemos todos.

[INTRODUCCIÓN AL LENGUAJE HTML]

Prof. Mariano Correa