TALLERES ÁREA DE TECNOLOGÍA E INFORMÁTICA INELCA: 4_PRIMER TALLER DE INFORMATICA GRADO 8

INSTITUCION EDUCATIVA EL CAUCHAL

Aprobación Oficial Según Resoluciones 2844 De Nov 6 De 2002. Y 2790 De Nov. 29 De 2006

Código Icfes 132324 NIT: 823004625 .7 DANE 270678000636

EL CAUCHAL – SAN BENITO ABAD

TALLER – RECESO ESTUDIANTIL – CUARTO PERIODO 2020 EMERGENCIA SALUD PUBLICA (COVID - 19)

1. Identificación del Taller
Área/Asignatura: TECNOLOGIA E INFORMATICA	Periodo: CUARTO
Tema : HTML	Grado: 8
Docente: FREDY ANDRES MARTINEZ MERCHAN	Grupo: A, B Y C
Estudiante:	Fecha de Entrega:

Porcentajes de evaluación

Elaboración del taller (hacer) 70 %

Sustentación del taller (saber): 15 %

Actitudinal

(ser) 15 %

2. Competencia a desarrollar en el estudiante: Entiende que con el desarrollo de páginas web puede mostrar información de tipo personal o profesional

· Crea páginas web utilizando el lenguaje de programación HTML

· Indicadores de desempeño del periodo: Mediante un ensayo, presento una investigación sobre la importancia en el desarrollo de las paginas web a nivel académico y profesional

· Realiza una exposición sobre mi proyecto en el desarrollo de una página web, utilizando las herramientas multimediales y power point

1. Resuelve los talleres y guías dejados en la fotocopiadora (instructivos semanas 1 y 2)

2. Refuerza el tema viendo el video en el siguiente link: https://www.youtube.com/watch?time_continue=7&v=emEp6s3t4yM&feature=emb_logo

https://www.facebook.com/EDteamLat/videos/550737099181823/?v=550737099181823

3. Realiza tu autoevaluación del trabajo realizado hasta el momento para el periodo. Tener en cuenta los aspectos de siempre en las tres dimensiones (cognitiva, comunicativa y valorativa). Nota: de 1 a 5.

¿QUÉ ES UN SITIO WEB?

Un sitio web o website, es un conjunto de páginas web, más o menos extenso, agrupadas bajo un dominio, como puede ser www.aulaclic.es o www.elpais.com.

Lo normal, es que el sitio web parta desde una página inicial, o home, desde la que podemos acceder, de forma jerárquica a todo el contenido del sitio, a través de hiperenlaces. A su vez, podemos encontrar enlaces hacia otros sitios distintos, ya que cada sitio tiene una URL única que nos permite acceder a él.

En conjunto de los sitios publicados en Internet forman la WEB o WWW.

El contenido de las páginas del sitio, puede estar escrito directamente en HTML. Esto genera un sitio estático, que sólo recibe actualizaciones de vez en cuando, ya que hay que hacerlas manualmente sobre el código.

En cambio, existen otros lenguajes, como PHP, ASP o JSP que generan en HTML a partir de datos, como contenidos de bases de datos, datos introducidos por el usuario, información global, etc. Esto origina sitios dinámicos, ya que los cambios se producen frecuentemente y son generados desde la propia página. Por ejemplo, una página que muestra la fecha del día actual sería un contenido dinámico. Otro ejemplo sería un foro.

¿QUÉ ES UNA PÁGINA WEB?

Una página web es un documento de texto con marcas, llamadas etiquetas (tags en inglés). Cuando este documento se ve a través de un navegador web, las etiquetas se interpretan y se visualiza el documento como una página web. Las etiquetas no se muestran pero determinan el aspecto de la página, y otras características, por ejemplo, si el texto es un enlace, en la etiqueta se indica la página a la que nos lleva el enlace.

Por lo tanto, si somos capaces de escribir un documento de texto, seremos capaces de escribir una página web. Sólo necesitamos conocer el lenguaje de las etiquetas o HTML.

Es conveniente que vayas probando las cosas a medida que las explicamos. Para ello deberás de tener dos ventanas abiertas, una con el curso y otra con el programa correspondiente.

Vamos a comenzar por escribir una página web muy sencilla. Para ello utilizaremos un editor de texto sin formato, como puede ser el Bloc de notas (Notepad) incluído en Windows. Puedes encontrarlo en Todos los programas → Accesorios. El aspecto del Bloc de notas es muy simple, una hoja en blanco con una barra de menús.

Escribiremos el siguiente código. Más adelante ya veremos qué es cada elemento:

<html>

<head>

<title>Mi primera página</title>

</head>

<body>

<p>Hola mundo</p>

</body>

</html>

Una vez escrito, vamos a guardarlo. Pero antes de continuar, debemos de explicar que lo es la extensión de un archivo. La extensión indica de qué tipo es un archivo. La extensión son las tres letras que van después del punto al final del nombre de un archivo (por ejemplo, imagen.gif o documento.doc). Puedes abrir cualquier carpeta para comprobarlo. Si no puedes ver las extensiones, es porque Windows las oculta. Si es tu caso, puedes hacer que las muestre a través del menú Organizar → Opciones de carpeta y búsquedas, pestaña Ver, desmarcando la opción Ocultar extensiones de archivo para tipos de archivos conocidos, en Windows encontramos esta opción en el menú Herramientas → Opciones de carpeta, también en la pestaña Ver.

Vamos a continuar guardando la página. Pulsamos en el menú Archivo y elegimos Guardar. Introducimos el nombre, por ejemplo Primera. Si ahora pulsásemos Guardar, se guardaría con la extensión txt, que indica que es un documento de texto sin formato. Para guardarlo como una página web, debemos de emplear la extensión .htm (o .html). Por lo que completamos el nombre para que quede Primera.htm y pulsamos Guardar.

Nota: Es conveniente que guardes los archivos creados durante el curso en la misma carpeta.

Ahora, utilizando el Explorador de Windows, abrimos la carpeta en la que hemos guardado el archivo y hacemos doble clic sobre el. Como el archivo tiene extensión .htm, se abrirá la página con el navegador que tengamos como predeterminado. Por ejemplo, en Google Chrome, el resultado se ve así:

Observa que no se muestra todo lo que hemos escrito. Si te fijas en el documento del Bloc de notas, verás que todo lo que aparece entre los signos < y > no se muestra. Esos signos delimitan una etiqueta de HTML, y todas las que hemos utilizado siguen el formato <etiqueta>contenido</etiqueta>. Por ejemplo, la etiqueta <title> contiene el texto que se mostrará como título de la página, y la etiqueta <p> indica un párrafo con texto normal.

Por lo tanto, un navegador web es una aplicación capaz de interpretar el código HTML, formado por etiquetas y mostralo debidamente formateado. En cualquier momento, podemos ver el código HTML de la página que estamos viendo. En Internet Explorer, podemos hacerlo desde el menú Ver → Código fuente, y se mostrará utilizando el Bloc de notas. En Mozilla Firefox lo hacemos también desde el menú Ver, eligiendo la opción Mostrar el código fuente de la página (teclas Ctrl + U), y muestra el código fuente formateado con colores. Puedes probarlo viendo el código fuente de esta página.

UN SITIO WEB

Cuando tenemos varias páginas, podemos organizarlas en un sitio web. Un sitio no es más que una carpeta que se encuentra en un equipo informático, ya sea nuestro ordenador personal o un potente servidor. La primera carpeta es la carpeta raiz. Por ejemplo, si accedemos a "www.misitioweb.com", estamos accediendo a la carpeta raiz del sitio web.

Cuando escribimos "www.misitioweb.com" en el navegador, en realidad estamos accediendo a la página www.misitioweb.com/index.htm, es decir, al escribir una dirección que no acaba en .html (o en .html), el navegador lo interpreta como el nombre de una carpeta y busca en ella un archivo que se llame index.htm, si no lo encuentra devuelve el mensaje del tipo "No se puede encontrar la página web".

Tal como lo haríamos con una carpeta de Windows, podemos organizar nuestro sitio con subcarpetas. Por ejemplo, una carpeta con todas las imágenes, otra con los vídeos, etc.

Coloquialmente, es frecuente referirse a un sitio web sólo como página web, por ejemplo "se ha actualizado la página web del ministerio", aunque no nos estemos refiriendo a una página en concreto.

A continuación vamos a ver los elementos básicos o fundamentales del HTML. Primero veremos la estructura general de las etiquetas, luego la estructura básica de la página, a continuación empezaremos a colocar cosas en la página, primero texto, luego imágenes, enlaces y por último hablaremos brevemente del elemento que nos sirve para colocar cada cosa en el sitio que queramos, las capas.

ETIQUETAS

El lenguaje HTML se basa en etiquetas, por eso es importante entender bien la sintaxis de las etiquetas.

Al realizar nuestro primer ejemplo, hemos visto algunas etiquetas.

Las etiquetas siempre van contenidas entre los signos de desigualdad < y >. Por ejemplo <body>,<title> o <p>.

Las etiquetas tienen una etiqueta de apertura y una de cierre, marcada por el signo /. Por ejemplo <body> (apertura) y </body> (cierre). Entre la apertura y el cierre, está el contenido de la etiqueta, que puede ser texto u otras etiquetas, depende del tipo de etiqueta. Algunas etiquetas, no tienen contenido, y se cierran sobre sí mismas. Esto se expresa colocando la apertura y el cierre en la misma etiqueta, como por ejemplo: <br />, que equivaldría a <br></br>. La etiqueta <br /> escribe un salto de línea.

Vamos a fijarnos en la apertura de la etiqueta. La primera palabra que aparece es el nombre o identificador de la etiqueta. A parte, podemos encontrar atributos con sus valores, siguiendo el formato <etiqueta atributo1="valor" atributo2="valor">. La forma correcta de escribirlo es escribir el nombre de la etiqueta y los atributos en minúscula, y los valores contenidos entre comillas dobles. Si un atributo tiene más de un valor, se escriben todos los valores dentro de las mismas comillas, separados por espacios en blanco, por ejemplo <etiqueta atributo="valor1 valor2">.

Hasta hace poco, lo más usual a la hora de escribir páginas web era que cada etiqueta tuviera bastantes atributos, que se referían a propiedades del formato o representación de los elementos. La tendencia actual es la de separar el formato del contenido, descartando estos atributos, sustituyéndolos por propiedades de estilo.

Por ejemplo, para escribir la siguiente línea:

Bienvenidos al Taller de informática

Antes, sin estilos:

<p align="center"><font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos al Taller de informática</font></p>

Ahora, con estilos:

<p class="presentación">Bienvenidos a www.aulaclic.es </p>

ESTRUCTURA BÁSICA DE LA PÁGINA

Todo el documento HTML viene contenido dentro de la etiqueta <html></html>.

Dentro de la etiqueta <html>, encontramos dos subdivisiones, la cabecera, delimitada por las etiquetas <head></head> y el cuerpo, delimitado por las etiquetas <body></body>. Por lo tanto, el aspecto básico de cualquier página web, es el siguiente:

La etiqueta <head> contiene información sobre la página. Por ejemplo contiene etiquetas que pueden decir de qué va la página, el título que debe de mostrar en la barra del navegador, o código javascript y estilos, que pueden estar en el propio encabezado o como llamadas a otros archivos. Normalmente, lo que contiene esta etiqueta no se muestra en el navegador.

Iremos viendo lo que puede contener esta etiqueta a medida que nos haga falta. De momento sólo comentaremos que obligatoriamente debe de contener la etiqueta <title></title>, que contiene el título de la página, que es lo que se ve en la barra de título del navegador.

En el <body> encontramos el contenido de la página, lo que se ve a través del navegador: texto, imágenes, enlaces, tablas, etc...

En el siguiente ejemplo, puedes ver que hemos modificado el código que utilizamos en la página Primera.htm creada en el tema anterior. En él vemos los elementos que hemos comentado. Hemos añadido la etiqueta <br /> para saltar de línea. Esta es la primera página del sitio que vamos a ir construyendo a lo largo del curso.

<html>

<head>

 <title>Floramics. Amigos de las flores</title>

</head>

<body>

 <p>Bienvenido a Floramics

<br /> En esta web encontrarás información sobre la 

asociación y nuestra colección de fotografías de 

flores.</p>

</body>

</html>

Luego pulsar en Visualizar el código escrito esto hará que se abra una ventana o una pestaña en tu navegador en la que podrás ver cómo queda la página. Es equivalente a lo que hicimos en el tema anterior con el bloc de notas pero de una forma más cómoda para ti. Observa como los espacios en blanco no son tenidos en cuenta.

ESTRUCTURA DEL TEXTO

Ya hemos comentado que todo el texto de la página estará dentro del <body>, que a su vez estará dentro del <html>. El texto dentro del <body>debe estar dentro de párrafos. En HTML, los párrafos se identifican con la etiqueta <p></p>. Dentro de los párrafos colocaremos texto e imágenes, y algunas etiquetas que nos permitan dar formato al texto, pero no podemos tener otros párrafos anidados.

A su vez, disponemos de encabezados que nos permiten organizar el texto. Los encabezados van desde el <h1></h1> de mayor tamaño, al <h6></h6>, el más pequeño. Por ejemplo, utilizaríamos un <h1> para poner el rótulo principal de la página, <h2> para los títulos de los apartados, <h3> para los apartados de segundo nivel, etc. El texto de cada apartado iría contenido en párrafos <p></p>.

Una de las peculiaridades del texto, es que los espacios en blanco consecutivos y saltos de línea no se muestran como en el código fuente. Si hay varios espacios seguidos, sólo se mostrará uno. Por ejemplo, si en el código fuente escribimos Bienvenido a Floramics se verá Bienvenido a Floramics. Si queremos poner varios espacios seguidos, utilizaremos el código html para el espacio,  .

El navegador también ignora los saltos de línea. Así si dentro de un párrafo colocamos varios saltos de línea pulsando Intro, estos no se verán. Como ya vimos para crear un salto de línea dentro de un párrafo, utilizamos la etiqueta <br />.

Puedes ver todo esto en el siguiente ejemplo:

<html>
<head>
<title>Floramics. Amigos de las flores</title>
</head>
<body>
<h1>Bienvenido a Floramics</h1>
<h2>Presentación</h2>
<p> En esta web encontrarás información sobre la
asociación y nuestra colección de fotografías de
flores.<br />
Tenemos las fotografías organizadas en diferentes categorías</p>

<h2>Contacto</h2>
<p> Si quieres comunicarte con nosotros
visita nuestra página de contacto.   Te esperamos.</p>
</body>
</html>

IMÁGENES

Uno de los elementos más utilizados en una página web son las imágenes, tanto para mostrar información como parte del propio diseño de la página. Pueden ser fotografías o gráficos creados por programas como Photoshop, Illustrator. etc. Más adelante veremos cómo utilizar dos programas gratuitos de este tipo: Gimp e Inkscape.

Básicamente, en páginas web nos encontramos tres tipos de imágenes: GIF, PNG y JPG.

Cuando queremos introducir una imagen, lo hacemos con la etiqueta <img />. Los atributos que como mínimo ha de tener esta etiqueta son los siguientes:

Lo primero que debemos de saber es dónde está la imagen, su ubicación, que es lo que debe contener el atributo src:

Si la imagen está en una página Web, basta con saber su ruta, por ejemplo http://www.misitioweb.com/arroz.jpg. Esto es lo que se llama una dirección absoluta.

Si la imagen está en el mismo sito que la página web, podemos utilizar una dirección relativa, como imagen.gif o imagenes/imagen.gif.

Cuando el navegador no encuentre la imagen ubicada en scr no podrá mostrar la imagen. En su lugar puede mostrar una imagen de error, como en Internet Explorer que muestra . Además se mostrará el texto contenido en el atributo alt, ya que ésa es su función: mostrar un texto alternativo cuando no se puede mostrar la imagen. Esto es importante para la accesibilidad a la web. Imaginemos que tenemos unas imágenes que hacen de botón para ir a partes de nuestra web, como Inicio o Galería. Si no ponemos el alt, y no se muestran las imágenes, el usuario no podrá navegar por nuestro sitio.

Aunque no son obligatorios, es muy frecuente añadir a la imagen los atributos height (alto) y width (ancho), introduciendo en ellos las dimensiones de la imagen, en píxeles. Al cargar una página, el navegador muestra primero el texto y después las imágenes. Si conoce las dimensiones de cada imagen, puede dejar un hueco reservado para ellas. Si no, pondrá el texto y luego irá desplazándolo para colocar las imágenes, lo que hará incómodo leer la página hasta que no esté totalmente cargada.

Otro atributo frecuente en las imágenes es title. Si lo ponemos en la imagen, al posar el cursor sobre ella se mostrará su valor. cuando se omite title, se muestra el contenido de alt.

Por ejemplo, para el siguiente código se muestra la siguiente imagen:

Los valores de height y width puedes verlos al seleccionar la imagen desde el Explorador de Windows o desde un programa de gráficos. Si cambias esos valores la imagen también cambiará. Si reduces los valores, manteniendo la proporción, la imagen se verá más pequeña, si los aumentas se verá más grande, pero con peor calidad, como puedes ver en el siguiente ejemplo:

Para aumentar o disminuir una imagen es conveniente utilizar un programa gráfico, ya que estos programas tienen opciones para optimizar el tamaño de las imágenes. En el tema 9 veremos cómo hacerlo con el programa gráfico Gimp.

Vamos a añadir la siguiente imagen a nuestra página de Floramics. La imagen se encuentra en graficos/flor_ejemplo2.jpg

Hemos reducido su tamaño variando los atributos, lo cual no es una buena técnica ya que, aunque se ve bien, se tiene que cargar una imagen grande para luego verla más pequeña.

Este es el código:

<html>
<head>
<title>Floramics. Amigos de las flores</title>
</head>
<body>
<h1>Bienvenido a Floramics</h1>
<h2>Presentación</h2>
<p> En esta web encontrarás información sobre la
asociación y nuestra colección de fotografías de
flores.<br />
Tenemos las fotografías organizadas en diferentes categorías.</p>
<img src="graficos/flor_ejemplo2.jpg" width="150" height="150"
alt="No se encuentra esta imagen" />
<h2>Contacto</h2>
<p> Si quieres comunicarte con nosotros
visita nuestra página de contacto.   Te esperamos.</p>
</body>
</html>

ENLACES

Cualquier página web tiene imágenes o texto, que al pulsarlos nos llevan a otra página del mismo sitio, o a una página de un sitio distinto. Esto es un enlace o hiperenlace (en inglés link o hyperlink) también llamado hipertexto o hipervínculo.

Un enlace se diferencia del texto normal porque al colocar el cursor encima, este cambia de forma y pasa de una flecha a una mano. También es muy frecuente que los enlaces aparezcan subrayados, ya que es la opción por defecto que les asigna el HTML.

En HTML, el enlace se identifica con la etiqueta <a></a>. La forma más básica de un enlace es la siguiente:

<a href="archivo_enlazado">contenido del enlace</a>

El atributo href indica la dirección (URL) a la que se enlaza, que normalmente es un archivo html, por ejemplo http://www.misitioweb.com/index.html . El contenido del enlace es lo que el usuario ve en la página y que al pulsar sobre él nos lleva al enlace. Normalmente es texto o una imagen, en el siguiente ejemplo es el texto aquí.

Pulsa <a href="http://www.misitioweb.com">aquí</a>.

se verá así: Pulsa aquí.

El atributo href puede ser una dirección absoluta, como http://www.misitiioweb.com/paginasweb/ejercicios/ejemplo.htm, o una direccion relativa, como ejercicios/ejemplo.htm, de la misma forma que vimos para las imágenes.

Es muy común añadir a los enlaces el atributo title, para que muestre información sobre el destino del enlace cuando el usuario deje unos instantes el cursor encima del enlace. Por ejemplo:

<a href="http://www.misitioweb.com" title="Visita la web de informatica">aquí</a>.

Por defecto, el enlace se abrirá en la misma ventana. Si queremos que se abra en una nueva ventana, podemos utilizar el atributo target="_blank". Aunque, el W3C, el organismo que regula los estándares del HTML desaconseja su uso, con la idea de que se debe permitir al usuario decidir si quiere abrir el enlace en la misma u otra ventana pulsando con el botón derecho del ratón sobre el enlace, el atributo target se sigue utilizando porque la mayoría de los usuarios pulsan directamente sobre el enlace, sin usar el botón derecho. Así pues si en nuestra página queremos informar sobre la existencia de otra página del mismo tema, colocaremos un enlace a ella y le pondremos el atributo target="_blank" para evitar que el usuario se vaya a esa página y no se acuerde de volver a la nuestra

Normalmente utilizaremos enlaces para navegar por nuestro sitio. Hemos de evitar enviar al usuario a páginas en las cuales no sepa como volver a la página anterior o como ir a la página principal. Siempre es mejor añadir un enlace volver, que confiar en que el usuario utilice el botón Atrás del navegador. Más adelante, veremos como diseñar un buen sistema de navegación para nuestro sitio web.

Aquí puedes ver un ejemplo con enlaces e imágenes:

<html>

<head>

 <title>Floramics. Amigos de las flores</title>

</head>

<body>

<h1>Bienvenido a Floramics</h1>

<h2>Presentación</h2>

<p> En esta web encontrarás información sobre la 

asociación y nuestra colección de fotografías de 

flores.<br />

Tenemos un índice alfabético con todas las fotografías, o puedes verlas organizadas en diferentes categorías.</p>

<img src="graficos/flor_ejemplo2.jpg" width="150" height="150"

 alt="No se encuentra esta imagen" />

<p>Interesante enlace sobre flores: <a href="http://www.mundoflores.net">Mundoflores</a><

  h2>Contacto</h2>

<p> Si quieres comunicarte con nosotros

 visita nuestra página de contacto. &nbsp;&nbsp;Te esperamos.</p>

</body>

</html>

TALLER

Ejercicio:

Utilizando el bloc de notas, crea una página. Guárdala llamándola ELCAUCHAL.html. solo utiliza las etiquetas básicas.

Nota: Respetado estudiante al devolver el taller favor ubicar este formato al inicio debidamente diligenciado, y al final escribir el nombre completo del acudiente como evidencia de que conoce el contenido del mismo.

NOMBRE DEL ACUDIENTE: ______________________________________

RUBRICA

Criterios de Evaluación
Criterios de Evaluación	4-5	3-4	2-3	1-2
Programación	Los hilos de programación son lógicos y están bien organizados.	Los hilos de programación son lógicos y están organizados	Los hilos de programación tienen poca organización.	Los hilos de programación carecen de organización.
Contenido del área correspondiente	Existe un excelente control de la información aparte de que te explica donde puedes encontrar información adicional.	Hay claro dominio del sistema informático. El aprendizaje es significativo. El alumno domina todo el contenido para crear una Web.	Se presenta el sitio de la Web, se muestra el recorrido utilizado para crearlo pero el procedimiento parece ser memorístico.	No se observan signos de dominio de conocimientos para crear una página web.
HABILIDAD EN LA CREACIÓN Y MANEJO DE PAGINA WEB	Dominio total de la creación de una página web	Domina su página web, crea nuevos sitios con rapidez y propiedad, puede usar elementos informáticos con precisión y facilidad.	crea su propia Web con cierta propiedad, pero demuestra inseguridad en el uso de las herramientas informáticas.	se equivoca al intentar demostrar el proceso de creación de una pág. web.
Proceso	Utiliza productivamente el tiempo asignado para realizar el taller, Lo culmina antes del plazo de entrega estipulado.	Utiliza productivamente el tiempo asignado para realizar el taller. Cumple con el plazo de entrega de este.	a mayoría del tiempo de clase lo utiliza para realizar el proyecto. Cumple con dificultad el plazo de entrega.	No utiliza productivamente el tiempo asignado para realizar el taller. No cumple con el plazo de entrega.
Sumatoria
TOTAL:

Observaciones

Para que tengan encuentra nuestros estudiantes:

Los estudiantes deben realizar dos punticos para finalizar el taller o actividad:

1) Realizar conclusiones del taller o actividad.

2) Autoevaluación del estudiante del taller o actividad realizada.

TALLERES ÁREA DE TECNOLOGÍA E INFORMÁTICA INELCA

CURSOS

4_PRIMER TALLER DE INFORMATICA GRADO 8