Practicas Web

Transcripción

Practicas Web

GUÍA DIDÁCTICA Y CUADERNO DE PRÁCTICAS
Páginas para Internet
ÍNDICE
Presentación ................................................................................................................................ 1
Guía didáctica ............................................................................................................................. 3
Introducción ................................................................................................................................ 7
Cronograma de actividades......................................................................................................... 8
Cuaderno de trabajo.................................................................................................................... 9
Recapitulación 1. Tejiendo la red.................................................................................... 11
Práctica 1. Tejiendo la red........................................................................................ 13
Recapitulación 2. Vistazo al trabajo................................................................................. 19
Práctica 2. Vistazo al trabajo..................................................................................... 20
Recapitulación 3. Puliendo páginas ................................................................................. 23
Práctica 3. Puliendo páginas ..................................................................................... 25
Recapitulación 4. Liga los datos....................................................................................... 27
Práctica 4. Liga los datos........................................................................................... 31
Recapitulación 5. Por si algo se me olvidó ...................................................................... 35
Práctica 5. Por si algo se me olvidó .......................................................................... 38
Recapitulación 6. Galería de imágenes............................................................................ 41
Práctica 6. Galería de imágenes................................................................................ 43
Recapitulación 7. Entablándonos ..................................................................................... 47
Práctica 7. Entablándonos ......................................................................................... 49
Recapitulación 8. Hazlo fácil, hazlo bien........................................................................ 53
Práctica 8. Hazlo fácil, hazlo bien............................................................................ 54
Recapitulación 9. Publica tus ideas.................................................................................. 57
Práctica 9. Publica tus ideas...................................................................................... 58
Recapitulación 10. No está por demás volver a repetir.................................................... 59
Práctica 10. No está por demás volver a repetir........................................................ 62
1
PRESENTACIÓN
La Dirección General de Servicios de Cómputo Académico de la Universidad Nacional
Autónoma de México, tiene como objetivo principal contribuir a elevar los niveles
cualitativos y cuantitativos de investigación y de docencia dentro de la universidad, así
como optimar los servicios de cómputo en las áreas académicas y de administración.
Una de sus múltiples funciones es coadyuvar de manera permanente al desarrollo de
los planes y programas que la UNAM tiene establecidos para la actualización y
superación académica de su comunidad y la sociedad en el campo de la computación.
Para llevar a cabo esta función la DGSCA está organizada en cuatro direcciones:
Dirección de Cómputo para la Docencia, Dirección de Telecomunicaciones, Dirección
de Cómputo para la Investigación y Dirección de Sistemas.
La Dirección de Cómputo para la Docencia brinda a la comunidad universitaria y al
público en general, capacitación, formación y actualización en cómputo y
telecomunicaciones en sus modalidades presencial y a distancia a través de su
programa de educación continua.
Una de las acciones instrumentadas para cumplir con esta tarea en su modalidad a
distancia es ofrecer cursos en video mediante canales de televisión y por la venta de
paquetes de cursos de cómputo que incluyen: videocasetes de cada curso, texto de guía
y prácticas de apoyo, los cuales además de difundir la cultura computacional,
constituyen una alternativa de aprendizaje y de acreditación en cómputo.
Reconociendo el dinamismo que tiene esta modalidad y dado el nuevo concepto de
aprendizaje a distancia, se dispone de asesorías vía fax, correo electrónico, y página
Web con el objeto de apoyar el proceso de enseñanza-aprendizaje, el cual se explicará
en la guía didáctica del curso Páginas para Internet.
1
GUÍA DIDÁCTICA
La guía didáctica se elaboró con la finalidad de que usted conozca las diferentes partes que
conforman el paquete de cómputo, así como la utilidad de cada uno.
El paquete de Páginas para Internet consta de:
• 4 videocasetes con programas de media hora cada uno.
• El Manual de texto de Páginas para Internet de la colección Guías y Textos de Cómputo.
• Cuaderno de prácticas.
• Disco de prácticas.
• Guía didáctica
Videos:
Los videos se han organizado considerando las siguientes lecciones:
VIDEO
LECCIÓN
TEMÁTICA
Conceptos: páginas en Internet, lenguaje html y
etiquetas.
§ Importancia de ligas.
1. TEJIENDO LA RED
§ Elaboración y visualización de páginas.
§ Editar y salvar documentos html.
§ Orden de etiquetas.
Visualizar documentos:
§ Abrir una página local en el navegador.
PRIMERO
§ Problemas para abrir una página.
2. VISTAZO AL TRABAJO
§ Descripción para agregar y definir color, título
e imágenes.
§ Visualizar archivos html en un navegador.
Etiquetas:
§ Cambio de tipo de letra, negrita y cursiva.
§ Cuándo y cómo utilizar etiquetas.
3. PULIENDO PÁGINAS
§ Definición de modificadores como: color,
tamaño y tipo.
§ Cómo afecta la definición de color.
3
Alma Ibarra Obando
VIDEO
LECCIÓN
TEMÁTICA
Descripción y conceptos:
§ Listas numeradas y no numeradas.
4. LIGA LOS DATOS
§ Etiquetas <a></a>, <ol></ol> sus atributos y
elementos.
§ Ligas.
§ URL etiqueta <a></a> con URL.
5. POR SI ALGO SE ME OLVIDA
Conceptos: elaboración y visualización
páginas, html, body, etiqueta y liga.
de
§ Repaso de prácticas anteriores.
SEGUNDO
Imágenes:
§ Imágenes que se pueden utilizar.
§ Descripción de la etiqueta <img></img>
6. GALERIAS DE IMÁGENES
§ Razones por las cuales no se ve una imagen.
§ Atributos del modificador Aling de la etiqueta
<img></img>
§ Descripción de la etiqueta <a></a> con
imagen.
Uso de tablas y explicación de sus elementos:
7. ENTABLÁNDONOS
§ Etiquetas.
§ Modificadores width, cellspacing, aling,
valing, bgcolor.
Consideraciones de diseño.
TERCERO
8. HAZLO FÁCIL, HAZLO BIEN
§ Elementos que se deben considerar al elaborar
una pagina: color, tamaño, número de
imagen.
§ Mapas de imagen y la utilidad para ligar más
de un documento con imagen.
§ Otras herramientas para realizar páginas
dinámicas e interactivas.
Publicaciones:
§ Publicar una pagina en Internet.
9. PUBLICA TUS IDEAS
CUARTO
§ Requisitos.
§ Servidor.
§ Definición de FTP.
§ Localizar el URL de la página.
10. NO ESTÁ POR DEMÁS
VOLVERLO A REPETIR
Descripciones:
§ Repaso de prácticas anteriores.
Manual de texto:
El texto de Páginas para Internet de la colección Guías y Textos, tiene como finalidad apoyar al
participante en los temas donde requiera profundizar, o bien estudiar temas de interés
complementarios en relación con sus necesidades de aprendizaje.
Se recomienda utilizar el texto como lectura complementaria al video. Sus contenidos temáticos
están establecidos con base en el curso de actualización que ofrece la Dirección General de
Servicios de Cómputo Académico.
Cuaderno de prácticas:
El cuaderno de prácticas está elaborado con el propósito de que usted cuente con una serie de
prácticas que reafirmen cada una de las lecciones que conforman el curso de Páginas para
Internet a distancia. Su diseño le permitirá contar con diez prácticas de los temas que se
exponen en los videos; y en los temas que así se requiera, se plantea una situación que conlleva
al participante a resolver y ejercitar cada una de las lecciones.
Le recomendamos que al término de cada práctica usted mismo se evalué, considerando el
apoyo de las lecturas que le sugerimos del manual de texto. De igual forma le aconsejamos que
de ser posible realice otros ejercicios simultáneos diseñados por usted, los mismos que le serán
de utilidad en el dominio de cada uno de los temas revisados.
Acreditación:
La acreditación del curso de Páginas para Internet a distancia, se hará con base en el contenido
temático y lineamientos que ha establecido la Dirección General de Servicios de Cómputo
Académico de la UNAM.
Cuando usted decida acreditar el curso de Páginas para Internet, deberá de registrarse, enviando
por fax su ficha de registro, así como la del depósito.
Una vez realizado esto, recibirá por correo express su clave de acceso a los servicios de apoyo
que son asesoría vía fax, consulta a través de página Web y cuenta de correo electrónico. El
acceso a estos servicios le permitirán consultar a los asesores que le ayudarán a resolver sus
dudas, el temario que le servirá como guía de estudio, así como al formato que le permitirá
indicar dos opciones con fecha para resolver su examen, además de las recomendaciones
generales que deberá considerar para resolverlo.
En el caso de que usted acredite el curso, recibirá a vuelta de correo certificado su
Reconocimiento, siempre y cuando haya cubierto los objetivos del curso de Páginas para
Internet a distancia del programa SEPAcómputo.
5
Alma Ibarra Obando
Ficha de registro:
Contiene la información que usted deberá realizar cuando desee acreditarse, además de los datos
que nos proporcionará al enviarlo por fax al teléfono 5622 80 16. Le solicitamos escriba claramente
con letra de molde o a máquina los datos que se le indican, le recomendamos guardar una copia en
blanco, esto le permitirá utilizarla las veces necesarias cuando solicite la acreditación del curso de
Páginas para Internet. Además deberá cubrir el monto por acreditación.
Recomendaciones:
Al adquirir su curso de Páginas para Internet por esta modalidad, usted tiene el compromiso de
revisar cada una de las lecciones que conforman el curso en los tiempos y espacios que a usted
le sean más cómodos, de ahí la necesidad de hacerle las siguientes recomendaciones.
•
De ser posible utilice el cronograma de actividades de cada una de las lecciones que
conforman el curso.
•
Se sugiere revisar una lección por día, realizando las prácticas correspondientes.
•
Se recomienda leer el tema del manual alusivo a la lección del día, y después de ver el
video, para familiarizarse con cada uno de los conceptos y lenguaje que se manejen.
•
Se aconseja revisar cada lección, haciendo las pausas necesarias que permitan el
aprendizaje de los diversos temas, además de anotar las dudas que le surjan.
•
Posteriormente es recomendable revisar por segunda vez cada lección, practicando en su
computadora para lograr resolver las dudas.
•
Al finalizar la lección es importante resolver la práctica correspondiente de su cuaderno de
prácticas.
•
Trate de resolver cada una de las prácticas por usted mismo.
•
Como apoyo a su aprendizaje elabore ejercicios relacionados con su actividad actual, a fin
de que usted mismo se plantee dudas y las pueda resolver.
•
Lo recomendable es que pase a la siguiente lección cuando domine la anterior.
•
Por favor, evite quedarse con dudas, siempre trate de resolverlas.
¡Que tenga mucha suerte!
Con el deseo de que este curso le sea de su entera satisfacción le reiteramos el
compromiso de la Universidad Nacional Autónoma de México, de difundir la cultura
computacional a la sociedad.
INTRODUCCIÓN
El propósito de este cuaderno es apoyar el curso de Páginas para Internet, permitiendo al
usuario ejercitar los conocimientos que adquiera en cada lección.
Se recomienda que revise la lección del video las veces que considere necesarias para asimilar
la información y posteriormente realice las prácticas de este cuaderno.
El material para cada lección está compuesto de dos partes:
•
Una RECAPITULACIÓN de los elementos vistos en el video, que resume los conceptos,
botones, teclas, comandos, procedimientos y cuadros de diálogo que se mostraron en la
lección.
Antes de iniciar la práctica lea con atención este material, identifique los elementos y
relaciónelos con los que se mostraron en el video. Cuando considere que los conocimientos
presentados han quedado claros, resuelva la práctica correspondiente.
•
Una PRÁCTICA que retoma estos elementos para dar solución a una situación planteada al
inicio. Para resolver la práctica, siga las indicaciones y compare sus resultados con los que
se ilustran.
Resuelva las prácticas las veces que considere necesarias y si durante el desarrollo surgen
dudas, puede regresar para consultar la información de la recapitulación.
En cada práctica se utilizan los elementos revisados en el video respectivo y se retoman los
de las lecciones anteriores para reafirmar el aprendizaje.
7
Alma Ibarra Obando
CRONOGRAMA DE ACTIVIDADES
Objetivo: Organizar sistemáticamente cada una de las lecciones, así como llevar un control de autoevaluación en el aprendizaje
práctico del curso a distancia de Páginas para Internet.
Instrucciones: Escriba la fecha de inicio de su lección, y marque con una “X” cada vez que necesitó revisar los diferentes
materiales que se muestran en el cronograma, y finalmente la fecha correspondiente a DOMINIO, cuando así lo considere.
Nombre:________________________________________
LECCIÓN
FECHA DE
INICIO
VIDEO
Fecha de adquisición:___________________________
LECTURA DEL
RESOLUCIÓN
EJERCICIOS
FECHA DE
MANUAL
DE PRÁCTICA
SIMULTÁNEOS
DOMINIO
1. Tejiendo la red.
2. Vistazo al trabajo.
3. Puliendo páginas.
4. Liga los datos.
5. Por si algo se me olvida.
6. Galerías de imágenes.
7. Entablándonos.
8. Hazlo fácil, hazlo bien.
9. Publica tus ideas.
10. No está por demás volver
a repetir.
Fecha de acreditación:_____________________________
CUADERNO DE TRABAJO
9
RECAPITULACIÓN 1
Tejiendo la red
Antes de iniciar su práctica, haremos un repaso de lo visto en el video.
Una página en Internet o página Web es un documento electrónico que se utiliza para difundir
información con fines educativos, informativos, comerciales, etc.; en la cual podemos colocar
texto, imágenes, sonido, ligas y video.
Para crear una página no es necesario saber de programación. Éstas se crean utilizando un
lenguaje conocido como HTML
A continuación se presenta un cuadro describiendo los conceptos utilizados en esta primera
lección.
CONCEPTO
HTML
(lenguaje para marcado de
hipertexto)
DESCRIPCIÓN
Serie de instrucciones que interpreta el navegador para poder
presentar una página en la forma adecuada.
Navegador
Programa residente en la computadora que se conecta a otra máquina
en Internet que contiene los documentos.
Sitio
Computadora en Internet que proporciona páginas del mismo tema.
Órdenes o instrucciones que informan al navegador sobre cómo debe
Etiquetas
de mostrar el documento. Para distinguir una etiqueta es necesario
observar que las etiquetas se encuentran entre los símbolos “<“ “>“.
Palabras subrayadas en donde al colocar el puntero del ratón cambia
Ligas
Código fuente
de apariencia de una flecha a una mano. Al dar un clic sobre una de
ellas nos lleva a otra página o documento que puede estar en la
misma computadora o en una computadora en cualquier parte del
mundo. También se les conoce como hipervínculos o hipertexto.
Estructura del documento en donde observamos exclusivamente
etiquetas y texto.
Cualquier página consta del texto del documento y las etiquetas que indican los elementos,
estructura y formato del mismo.
Un documento html está definido por una etiqueta de apertura y de cierre llamada <HTML>.
Dentro de estas etiquetas se distinguen dos partes fundamentales, la cabecera, delimitada por la
etiqueta <head> y el cuerpo del documento delimitado por la etiqueta <body>.
11
Alma Ibarra Obando
Los archivos deben llevar la extensión “htm” o “html”, esto permite al navegador saber que el
archivo es una página y mostrarlo en forma adecuada.
Estructura básica de un documento html
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
HERRAMIENTAS QUE SE REQUIEREN PARA CREAR UNA PÁGINA
Una computadora que tenga instalado un sistema operativo Windows, Macintosh, Unix, etcétera.
Un procesador de texto como Word o cualquier editor de texto como el Bloc de Notas de Windows.
Tener instalado un navegador como Internet Explorer o Netscape, para poder visualizar las páginas que
se elaboren, así como sus cambios.
12
PRÁCTICA 1
Tejiendo la red
Situación:
En una institución se ha solicitado que se realicen las páginas personales de cada integrante de
los departamentos para publicarlos en Internet, por lo cual se requiere el documento html que
contenga las primeras líneas.
Instrucciones:
1. Abra su procesador de palabras Word.
Para abrir el procesador de palabras Word active el botón Inicio, enseguida coloque el puntero
del ratón en la opción Programas y active Microsoft Word.
2. Escriba el siguiente texto:
“Página personal de Jorge Herrera del Departamento de Difusión Cultural”
Para observar los resultados, guarde la información, realizando los siguientes pasos:
a) Dé un clic en el menú Archivo y luego en la opción Guardar como HTML, en donde
aparecerá el siguiente cuadro de diálogo.
13
Alma Ibarra Obando
b) Abra la carpeta en donde desea guardar su información.
c) Ponga como nombre del archivo “primera”.
d) Dé un clic sobre la opción Guardar.
3. Abra su navegador para que observe cómo se muestra.
Abra su navegador, puede ser Netscape o Internet Explorer, en este caso abriremos Internet
Explorer.
Active el botón Inicio, enseguida coloque el puntero del ratón en la opción Programas, y luego
active Internet Explorer.
14
4. Abra el archivo primera.html en el navegador.
Para abrir el archivo en el navegador realice los siguientes pasos:
a) Dé un clic en el menú Archivo y luego en la opción Abrir, presione el botón Examinar
para buscar el archivo primera.html que se encuentra en el disco duro de su
computadora.
b) Abra la carpeta en donde guardó su archivo.
c) En la ventana en donde aparece el nombre del archivo, dé un clic sobre el nombre
del archivo que desea abrir.
d) Presione el botón Abrir.
e) Regresará al primer cuadro de diálogo en donde aparecerá la ubicación del archivo
que se encuentra en su computadora.
15
Alma Ibarra Obando
f)
Como último paso confirme la ubicación del documento que quiere abrir en el
navegador presionando el botón de Aceptar.
Observe que su página es igual a su documento de Word, sólo que el cursor únicamente
aparece en el documento del procesador.
5. Observe el código fuente del documento.
Para observar el código fuente de su documento html coloque el puntero del ratón en cualquier
parte libre en la ventana del documento del navegador y presione el botón derecho del ratón,
en el menú Contextual dé un clic sobre la opción Ver código fuente.
16
6. Observe que el código fuente se abre en el Bloc de Notas de Windows, permitiendo
modificar el contenido del documento.
Su código debe observarse similar a la muestra.
<html>
<head>
<META HTTP-EQUIV=“Content-Type” CONTENT=“text/html; charset=windows-1252”>
<META NAME=“Generator” CONTENT=“Microsoft Word 97”>
<title>Página personal de Jorge Herrera del Departamento de Difusión Cultural</title>
</head>
<body>
<p>Página personal de Jorge Herrera del Departamento de Difusión
Cultural</p></body>
</html>
17
RECAPITULACIÓN 2
Vistazo al trabajo
Recordemos que un documento HTML o página consta del texto del documento y las etiquetas
que indican los elementos, estructura y formato del mismo.
Por lo general veremos en el documento una etiqueta inicial y una final que tienen el mismo
nombre, sólo que la etiqueta final o de cierre incluye una “/”. La etiqueta inicial activa una
característica, y la etiqueta final la desactiva. No todas las etiquetas se utilizan en pares (inicial
y final), algunas no tienen etiqueta de cierre.
Los archivos deben llevar la extensión “htm” o “html”, esto permite al navegador saber que el
archivo es una página y mostrarlo en forma adecuada.
ETIQUETA
FUNCIÓN
Etiqueta de apertura y cierre, define un documento html.
<HTML></HTML>
Dentro de estas etiquetas se distinguen dos partes fundamentales, la
cabecera, delimitada por la etiqueta <HEAD> y el cuerpo del
documento delimitado por la etiqueta <BODY>.
<HEAD></HEAD>
Entre esta etiqueta se coloca información como: créditos, nombre del
archivo, programa con el que se realiza el documento, fecha de
publicación o información que sólo es relevante para los buscadores de
páginas, la cual no será mostrada en el navegador.
<TITLE></TITLE>
Dentro de esta etiqueta especificamos el título del documento HTML; es
importante que el título guarde relación con el contenido del
documento. No forma parte del documento en sí, es decir, no se
muestra dentro del documento sino en la parte superior de la ventana
del navegador conocida como barra de título.
Dentro de esta etiqueta se incluye la información que en realidad será
mostrada dentro de la ventana del navegador.
<BODY></BODY>
A través de los modificadores o atributos de esta etiqueta se especifican
algunos valores que afectan de forma global a todo el documento, como
son los colores del texto y del fondo del documento al que se le puede
definir color de fondo con el modificador bgcolor o colocar una imagen
de fondo con el modificador background.
Los formatos de archivos gráficos que se utilizan con mayor frecuencia dentro de una página
son los archivos con extensión .jpg o .gif en tanto implican archivos gráficos de poco peso.
No es importante el orden en que se pongan las etiquetas o el orden en que se redacta un
documento HTML, por ejemplo podemos escribir un documento completo sobre unas cuantas
líneas de código o bien, escribir ese mismo documento en varias líneas.
19
Alma Ibarra Obando
PRÁCTICA 2
Vistazo al trabajo
Situación:
Una vez recibida su página de muestra, se le solicita que la modifique en los siguientes puntos:
Ponga como título de la ventana “Prueba en Html”, un color de fondo y si prefiere una imagen
como fondo.
Instrucciones:
1. Cambie el título de la ventana que se encuentra dentro de las etiquetas <TITLE></TITLE>.
Para modificar su documento dé un clic con el botón derecho del ratón en la ventana del
navegador y seleccione la opción Ver código fuente para que el archivo se abra en el Bloc de
Notas.
a) Cambie el texto contenido en la etiqueta <TITLE> y escriba “Prueba en Html”.
El código debe observarse de la siguiente manera:
<html>
<head>
<title>Prueba en Html </title>
</head>
<body>
Página personal de Jorge Herrera del Departamento de Difusión Cultural
</body>
</html>
b) Guarde los cambios para poder observar el cambio que acaba de realizar en su
documento.
c) Cámbiese a la ventana del navegador y recuerde presionar el botón Actualizar para
observar los cambios.
2. Ponga un color de fondo en el documento.
a) Para poner color de fondo a su documento se utiliza el atributo o modificador bgcolor de
la etiqueta <body>. Recuerde que el nombre del color se escribe en inglés, coloque el
cursor dentro de la etiqueta <body> dé un espacio y escriba bgcolor=“blue”.
20
El código debe observarse de la siguiente manera:
<html>
<head>
<title>Prueba en Html </title>
</head>
<body bgcolor=“aqua”>
Página personal de Jorge Herrera del Departamento de Difusión Cultural</body>
</html>
b) Guarde los cambios.
c) Cámbiese a la ventana del navegador y presione el botón Actualizar para observar los
cambios.
3. Coloque una imagen como fondo de su documento.
Para colocar una imagen como fondo del documento es necesario conocer la ubicación del
archivo que se utilizará.
El atributo o modificador de la etiqueta <body> que se utiliza es el de background, seguido con
la trayectoria y nombre del archivo. El archivo de la imagen se encuentra en su disco de
prácticas con el nombre de textura.jpg.
a) Coloque el cursor dentro de la etiqueta <body> dé un espacio y escriba
background=“a:/imagenes/textura.jpg”.
Recuerde que no es necesario eliminar el atributo bgcolor.
b) Guarde los cambios y actualice la ventana en su navegador para observar los cambios.
Imagen del documento HTML en el navegador.
21
RECAPITULACIÓN 3
Puliendo páginas
A continuación se muestra un cuadro describiendo los conceptos vistos en la lección.
ETIQUETA
FUNCIÓN
EJEMPLO
Da presentación a un encabezado del tema que se trata en la
página, en donde el valor de “n” va del 1 al 6 permitiendo
observar en diferentes tamaños el encabezado.
H1 se interpreta en una fuente más grande y se considera el de
mayor importancia, conforme se incrementa el valor de “n” el <H1 align=“center”>
<Hn> </Hn> tamaño de la fuente y la importancia del encabezado se reduce. texto del
Los encabezados que se encuentren dentro de estas etiquetas encabezado</H1>
pueden ser de varias líneas y de cualquier longitud.
Para centrar un encabezado utilizamos el modificador o
atributo align seguido del signo = y el tipo de alineación center
(centrado), left (izquierda) o right (derecha).
<CENTER>
</CENTER>
<FONT>
</FONT>
Centra texto en la página, da la facilidad de centrar porciones
enteras de la página.
Aunque también tenemos en algunas etiquetas el modificador
ALIGN=CENTER.
Cambia el tipo, color y tamaño de letra. El tamaño regular con
que se ve el texto en el navegador es de 3 puntos, nosotros
<FONT SIZE = “5”>
podemos cambiar el tamaño utilizando el modificador SIZE
o <FONT SIZE = “+
utilizando como valores los números del 1 al 7, o utilizando los
2”>
caracteres “+” o “-” en relación con el tamaño regular. Esto
permite ver el texto más grande o más pequeño.
Para cambiar el tipo de letra existe el modificador FACE, existe
gran variedad de tipos de letras el inconveniente es que no
<FONT FACE =
todos los navegadores pueden desplegarlas. Se recomienda
“HELVETICA”>
utilizar la fuente “helvética” o “courier” que son las que la
mayoría de los navegadores muestran.
23
Alma Ibarra Obando
ETIQUETA
FUNCIÓN
EJEMPLO
Si deseamos cambiar el color automático que tiene el texto que
<FONT>
</FONT>
<BOLD>
</BOLD>
es negro, o el color asignado con el modificador color de la
<font color =
etiqueta <BODY>, utilizamos el modificador COLOR de la
“blue ”> texto de
etiqueta <FONT> que permite definir color al texto que se
color azul </font>
encuentre entre las etiquetas de inicio y cierre. Se define por su
nombre, pero debe escribirse en inglés.
Resalta el texto para lograr que se observe más obscuro
<bold> texto en
conocido como negrita, el texto que se encuentre dentro de
negritas</bold>
esta etiqueta, resaltará y se verá más obscuro.
<I></I>
El texto que se encuentre dentro de ella se observa en itálicas o <I> texto en
itálicas</I>
cursivas (inclinadas).
<U></U>
Sólo el texto que se encuentre dentro de la etiqueta de apertura <U> texto
subrayado</U>
y cierre se observará subrayado.
No tiene etiqueta de cierre y permite dibujar una línea
horizontal abarcando el ancho de la página, que puede ser de
diferente largo, grueso, color y con o sin sombra.
Si deseamos modificar la línea contamos con el modificador
WITH que permite controlar el largo de la línea de acuerdo con <HR WITH = 75%>
el ancho de la página, se define en porcentaje.
<HR>
Para cambiarle el color utilizamos el modificador COLOR y el
nombre del color, recordemos que los nombres se escriben en <HR COLOR = RED>
inglés.
Si deseamos cambiar el grueso de la línea utilizamos el
<HR SIZE = 5>
modificador SIZE.
Cuando se requiere que la línea aparezca con relleno
<HR=“NOSHADE ”>
utilizamos el modificador NO SHADE.
Como observamos disponemos de varias etiquetas para dar una mejor presentación a una
página.
24
PRÁCTICA 3
Puliendo páginas
Situación:
Una vez recibida su página de muestra, se le proporciona un archivo html con texto sin formato
al cual deberá darle una presentación cambiando tipo de letra, alineación, color y una línea
horizontal para separar el título del contenido del documento.
Instrucciones:
1. Abra el Bloc de notas y ahí el archivo con el nombre formato.html de su disco de prácticas.
2. Abra el navegador (Internet Explorer o Netscape), y ahí el archivo formato.html.
3. En el título o encabezado del documento aplique etiqueta de encabezado <H1>, con
alineación centrada como modificador.
4. Guarde los cambios, cámbiese a la ventana del navegador y presione el botón Actualizar
para ver los cambios.
5. En el primer párrafo utilizando la etiqueta <FONT> con modificadores FACE y SIZE aplique
como tipo de letra “helvética” con un tamaño de +2.
6. Guarde los cambios y actualice la ventana en el navegador.
7. Al final del primer párrafo agregue dos saltos de línea utilizando la etiqueta <BR>.
8. El texto “Tipos de Letra y Presentación” defínalo con un tamaño de 6 y póngalo centrado,
utilizando la etiqueta <CENTER>. Al final de la línea agregue un salto de línea.
9. Guarde los cambios y actualice la ventana en el navegador.
10. En el siguiente párrafo a la palabra helvética aplique tipo de letra helvética y a la palabra
courier aplique tipo de letra courier.
11. Utilice las etiquetas <U>, <I> y <B> para aplicar subrayado a la palabra subrayado, itálicas
a la palabra itálicas y negritas a la palabra negritas. Al final agregue un salto de línea.
12. Guarde los cambios y actualice la ventana del navegador para observar los cambios.
13. Todo el último párrafo utilizando los modificadores Color y Size, póngalo en color navy y
con un tamaño de -1.
14. Haga un espacio entre el encabezado y el primer párrafo y agregue la etiqueta <HR> para
generar una línea horizontal con atributos centrada y de color rojo.
25
Alma Ibarra Obando
Al terminar, el código de su documento debe observarse de la siguiente forma:
<html>
<head>
<title>Formato</title>
</head>
<body>
<h1 align=“center”>Dar Formato a la Página </h1>
<hr align=“CENTER” color=“Red”><br><br>
<font face=“helvetica” size=“+2”>Podemos mejorar la apariencia de la página
cambiando la forma en que se presenta el texto.</font><br><br>
<center><font size=“6”>Tipos de Letra y Presentación</font></center><br>
El tipo de letra estandar es <font face=“helvetica”>helvetica</font> o <font
face=“Courier”>courier</font>, podemos <u>subrayar</u> el texto, ponerlo en
<i>itálicas</i> o cursivas y <b>negritas</b>.<br>
<font size=“-1” color=“Navy”>Podemos modificar el color y tamaño del texto
deseado, sin modificar todo el documento.</font>
</body>
</html>
Imagen del documento vista en el navegador.
26
RECAPITULACIÓN 4
Liga los datos
Antes de iniciar su práctica haremos un repaso de lo visto en el video.
Podemos presentar la información del documento en forma atractiva utilizando listas no
numeradas o en una forma ordenada utilizando listas numeradas.
Uno de los elementos más utilizados en HTML son las listas, las cuales nos permiten resaltar
por medio de un símbolo redondo o un número cada elemento de la misma.
A continuación se muestran las etiquetas que se utilizan para generar listas.
ETIQUETA
FUNCIÓN
<OL>
Define que la lista es numerada.
<UL>
Define que la lista no es numerada.
<LI>
Define cada elemento de la lista.
Para hacer una lista numerada se utiliza la etiqueta <OL>, la cual sólo indica que vamos a crear
una lista numerada, y con la etiqueta <LI> cada elemento de la lista se numera utilizando
números arábigos en orden ascendente, además de agregársele una sangría.
Las listas no numeradas son las que presentan cada elemento con un símbolo del lado
izquierdo y con una sangría izquierda. Para realizar una lista no numerada lo primero que
vamos a utilizar es la etiqueta <UL>, con la cual sólo indicamos que vamos a crear una lista, ya
que cada elemento que vayamos agregando a la lista debe de ir precedido de la etiqueta <LI>
que además de colocar el símbolo del lado izquierdo y la sangría, los coloca a cada uno en una
nueva línea.
Ejemplo de código para lista numerada:
<ol>
<li> elemento numerado con número1</li>
<li> elemento numerado con número 2</li>
</ol>
Ejemplo de código para lista no numerada:
<ul>
<li> elemento 1</li>
<li> elemento 2</li>
</ul>
27
Alma Ibarra Obando
Imagen de listas vista en el navegador.
Al crear una lista podemos dar una presentación de orden a la información que presentamos en
una página, es posible incluir una lista dentro de otra permitiendo varios niveles de sangría.
HTML proporciona formas de controlar la estructura básica del documento para evitar que el
texto fluya y se pierda el sentido del párrafo. Para este fin utilizamos la etiqueta <P> con su
respectiva etiqueta de cierre, con la cual se genera un salto de línea, además de agregar más
espacio después del salto de línea.
Ejemplo de código utilizando la etiqueta <P>:
<html>
<head>
<title>Párrafo</title>
</head>
<body>
<P>Lula(Zapoteco), Nunduva(Mixteco) y Huaxácac(Náhuatl),
indígenas de esta ciudad, hacen referencia a un hermoso
los
nombres
árbol, el guaje. Desde la antigüedad, las plantas de Oaxaca han llamado la
atención.</P>
<P>El Estado cuenta con la flora más diversa en el país, estimado en cerca de
9,000 especies de angiospermas (es decir, plantas con flor).
Además de contar con la flora más rica en México. Oaxaca es una de las
regiones con una personalidad botánica definida, en el sentido de
presentar un alto porcentaje de especies endémicas, plantas que no crecen en estado
natural en ningún otro lugar del mundo.</P>
</body>
</html>
28
Imagen de texto
con etiqueta de
párrafo en el
navegador.
Cuando se realiza una página posiblemente necesitamos hacer referencia a otro documento que
se encuentre en la misma computadora o en algún lugar en Internet. Esta forma de relacionar
los documentos la conocemos como hipervínculos o ligas.
Para hacer una liga utilizamos la etiqueta <A>. El texto que queda entre la etiqueta de apertura
y cierre se observa subrayado de color azul si no se ha visitado el sitio o de color morado si el
sitio ya se visitó, y al colocar el puntero del ratón sobre el texto, éste cambia de apariencia de
una flecha a una mano.
Para que el navegador sepa a qué documento queremos ir, existe el modificador HREF en el
cual escribimos la ubicación exacta y nombre del archivo, esto quiere decir que anotamos en
qué directorio o subdirectorio se encuentra el archivo (trayectoria o ruta).
Por ejemplo: <A HREF = “../paginas/primera.html”
Solo en caso de que el archivo se encuentre en el mismo directorio o subdirectorio del archivo
escribimos el nombre completo del archivo entre comillas.
Por ejemplo: <A HREF =“prueba.html”
Si el archivo se encuentra dentro de un subdirectorio del directorio en el que estamos
trabajando escribimos el nombre del subdirectorio y del archivo.
Por ejemplo: <A HREF =“imágenes/textura.jpg”
29
Alma Ibarra Obando
Si cometemos algún error al escribir el nombre del archivo o su ubicación, el navegador
despliega una página en blanco con un mensaje de error de que el archivo no se encontró.
En la página se puede hacer referencia a documentos que se encuentran en Internet, igual que
en un documento local pero en el modificador HREF debemos de escribir el URL (Localizador
Uniforme de Recursos) que es el protocolo que solicitamos (http), el nombre del servidor en
donde se encuentra el documento, la ruta y el nombre del archivo.
Por ejemplo: <A HREF = http://entren.dgsca.unam.mx/index.html>
Imagen de un documento con ligas vista en el navegador.
Código de ligas o hipervínculos
<html>
<head>
<title>Ligas</title>
</head>
<body>
Ir al documento de <a href=“listas.html”>listas </a><br>
Ir a la página en Internet del
<a href=“htt://entrenate.dgsca.unam.mx” target=“_blank”>Departamento de Productos
Interactivos</a> DGSCA UNAM
</body>
</html>
30
PRÁCTICA 4
Liga los datos
Situación:
Se le solicita un archivo con una lista de los departamentos y servicios que prestan en su
dependencia, además de una liga a las páginas del documento de formato y otra a la página de
la UNAM.
Instrucciones:
1. Abra en el Bloc de Notas el archivo ligas.html que se localiza en su disco de prácticas.
2. Abra el archivo en el navegador.
3. En el Bloc de Notas realice los siguientes pasos:
a) El nombre de la dependencia póngalo como encabezado 1 y déjelo centrado.
b) Agregue cambio de línea para separar el siguiente párrafo del encabezado.
c) Defina un tamaño de letra +1 a la palabra Departamentos.
d) Los nombres de los departamentos incorpórelos como parte de una lista numerada.
e) Determine un tamaño de letra +1 a la palabra Servicios.
f)
Los servicios póngalos como una lista no numerada.
g) Guarde los cambios.
4. En el navegador presione el botón Actualizar para observar los cambios.
5. En el Bloc de Notas realice el siguiente procedimiento:
a) Establezca una liga en la palabra Diseño al documento formato.html.
b) Incorpore una liga en la palabra Educativos para hacer contacto con la página de la
UNAM, siendo el URL http://unam.mx
c) Guarde los cambios.
6. Actualice la ventana en el navegador para observar los cambios.
31
Alma Ibarra Obando
Documento visto en el navegador.
Código final del documento. Observe que las vocales acentuadas comienzan con el carácter &
seguido de la vocal, la palabra (acute) y terminan con (;). Para la letra ñ en lugar de la palabra
acute se escribe la palabra tilde.
<html>
<head>
<title>ligas</title>
</head>
<body>
<h1 align=“center”>DIRECCIÓN GENERAL DE PERSONAL</h1><br>
<font size=“+1”>DEPARTAMENTOS</font>
<ol>
<li>Dirección</li>
<li>Informes</li>
32
<li>Relaciones Públicas</li>
<li>Personal</li>
<li>Unidad Administrativa</li>
</ol>
<font size=“+1”>SERVICIOS</font>
<ul>
<li>Médicos</li>
<li><a href=“formato.html”>Diseño</a></li>
<li>Culturales</li>
<li><a href=“http://unam.mx”>Educativos</a></li>
<li>Administrativos</li>
</ul>
</body>
</html>
33
RECAPITULACIÓN 5
Por si algo se me olvidó
A continuación mostramos un cuadro de algunos conceptos vistos en las lecciones previas.
CONCEPTO
DESCRIPCIÓN
Página
Documento electrónico que se utiliza para difundir información con fines
educativos, informativos, etc. En el cual podemos colocar texto, imágenes
audio y video.
HTML
Serie de instrucciones que interpreta el navegador para poder presentar una
página en forma adecuada.
Etiquetas
Son las órdenes que utiliza HTML para indicar al navegador la forma en
que debe de presentar la página. Se escriben dentro de los símbolos “< >“.
Por lo regular existe una etiqueta de inicio y una de cierre cuya diferencia
es que el nombre de la etiqueta está precedida por una “</ >“.
HERRRAMIENTAS QUE SE REQUIEREN PARA CREAR Y VER UNA PÁGINA
Computadora que tenga instalada un sistema operativo (Windows, Macintosh, Unix, etcétera.)
Editor (Bloc de Notas) o procesador de texto (Word, Worpefect, etcétera.).
Navegador (Internet Explorer o Netscape).
Primeros pasos en la creación de un documento HTML en un procesador.
1. Abra el procesador de texto, en este caso Word. Dar un clic en el botón del menú Inicio,
luego en la opción Programas y por último en Microsoft Word.
2. Escriba el texto que desea que aparezca en su documento.
3. Guarde su documento seleccionando el menú Archivo y Guardar como HTML.
3.1 En el cuadro de diálogo localice la ubicación de la carpeta en donde desea guardar su
documento.
3.2 Escriba el nombre del archivo, procure utilizar sólo minúsculas y no colocar espacios.
3.3 Presione el botón de Guardar.
35
Alma Ibarra Obando
Pasos para ver el documento en el navegador (Internet Explorer).
1. Presione el botón del menú Inicio, luego la opción Programas y por último Internet
Explorer.
2. Para abrir el archivo en el navegador abra el menú Archivo y Abrir.
2.1 En el cuadro de diálogo escriba la ubicación y nombre del archivo html.
Si no conoce la ubicación del archivo, utilice el botón Examinar para localizarlo en su
computadora. Una vez localizado, selecciónelo y presione el botón Abrir.
Regrese a la primera ventana en donde aparece escrita la ubicación y nombre del archivo, por
último presione el botón Aceptar.
Cuadro de algunas etiquetas vistas durante las lecciones previas.
ETIQUETA
FUNCIÓN
<HTML> </HTML>
Etiqueta de apertura y cierre, define un documento html.
<TITLE> </TITLE>
Dentro de esta etiqueta especificamos el título del documento HTML, el
cual se muestra en la parte superior de la ventana del navegador conocida
como Barra de Título.
Dentro de esta etiqueta se incluye la información que en realidad será
mostrada dentro de la ventana del navegador.
<BODY> </BODY>
A través de los modificadores o atributos de esta etiqueta se especifican
algunos valores que afectan de forma global a todo el documento, como
son bgcolor para modificar los colores del fondo del documento o
background para colocar una imagen como fondo.
Cambia el tipo, color y tamaño de letra, podemos cambiar el tamaño
utilizando el modificador SIZE y como valores los números del 1 al 7, o
utilizando los caracteres “+” o “-” en relación con el tamaño regular.
<FONT> </FONT>
Para cambiar el tipo de letra utilizamos el modificador FACE, existen gran
variedad de tipos de letra. Se recomienda usar la fuente “helvética” o
“courier” que son las que la mayoría de los navegadores desplegan.
Si deseamos cambiar el color automático que tiene el texto utilizamos el
modificador COLOR para cambiar el texto que se encuentre entre las
etiquetas de inicio y cierre. Se define por su nombre, sólo recordando que
se deben escribir en inglés.
36
ETIQUETA
<CENTER> </CENTER>
FUNCIÓN
Centra texto en la página, da la facilidad de centrar porciones enteras de la
página.
Aunque también
ALIGN=CENTER.
tenemos
en
<OL>
Define que la lista es numerada.
<UL>
Define que la lista no es numerada.
<LI>
Define cada elemento de la lista.
<Hn> </Hn>
algunas
etiquetas
el
modificador
Da presentación a un encabezado del tema que se trata en la página, en
donde el valor de “n” va del 1 al 6 permitiendo observar en diferentes
tamaños el encabezado.
Para centrar un encabezado utilizamos el modificador o atributo ALIGN
seguido del signo = y el tipo de alineación center (centrado), left (izquierda)
o right (derecha).
Hacer referencia a otro documento que se encuentre en la misma
computadora o en algún lugar en Internet. Esta forma de relacionar los
documentos la conocemos como hipervínculos o ligas.
En el modificador HREF escribimos la ubicación exacta y nombre del
<A> </A>
archivo, esto quiere decir que anotamos en qué directorio o subdirectorio
se encuentra el archivo (trayectoria o ruta), si se encuentra en forma local,
o el URL (Localizador Uniforme de Recursos) que es el protocolo que
solicitamos (http), el nombre del servidor en donde se encuentra el
documento y la ruta y nombre del archivo en Internet.
37
Alma Ibarra Obando
PRÁCTICA 5
Por si algo se me olvidó
Situación:
Se le solicita elaborar una página para publicar información educativa, la cual se le proporciona
y debe trabajarse conforme las siguientes indicaciones:
•
El encabezado de un tamaño mayor, subrayado y centrado.
•
Todo el texto del documento con un tipo de letra helvética.
•
La información de los eventos numerada.
•
Una línea horizontal de color azul y centrada para dividir el documento.
•
El texto “Ligas a Sitios de Interés” con un tamaño de +1, fuente courier de color rojo,
centrado y en itálicas.
•
Las ligas, una en cada línea, con las siguientes direcciones:
UNAM http://www.unam.mx
OEI http://www.oei.es/
archivo local c:/paginas/ligas.html
•
Como título de la página Educación.
Instrucciones:
1. En su procesador de texto capture el siguiente texto:
“ HACIA UNA FILOSOFÍA DE LA EDUCACIÓN MATEMÁTICA
En el mundo contemporáneo, donde la ciencia, la tecnología y las matemáticas juegan
un papel esencial en la construcción de nuestra realidad social y material, la educación
matemática requiere especial atención. No se trata sólo de buscar cómo estructurar la
educación matemática para todos, sino también y, de manera particular, de pensar
cómo ofrecer una educación matemática que permita a los ciudadanos ser parte activa
de una sociedad.
Eventos a realizar para la difusión de material:
Congreso Internacional de Matemáticas.
Olimpiada de las Matemáticas.
Simposio Nacional de Matemáticas.
38
Ligas a Sitios de Interés.
UNAM (Universidad Nacional Autónoma de México).
OEI (Organización de Estados Iberoamericanos para la Educación, la Ciencia y la
Cultura).
Archivo local. “
Guarde su archivo como repaso.html en la carpeta páginas.
2. Abra su archivo en el navegador (Internet Explorer o Netscape).
3. Utilice la opción Ver código fuente.
4. En el Bloc de Notas realice los cambios necesarios para las indicaciones arriba
mencionadas.
5. Guarde los cambios.
6. Regrese al navegador y presione el botón Actualizar para observar los cambios hechos al
documento.
Código Fuente
<html>
<head>
<title>Educación</title>
</head>
<body>
<h2 align=“center”><font face=“helvetica”><u>HACIA UNA FILOSOFÍA DE LA
EDUCACIÓN MATEMÁTICA </u></font></h2>
<p><font face=“helvetica”>En el mundo contemporáneo, donde la ciencia, la
tecnología y las matemáticas juegan un papel esencial en la
construcción de nuestra realidad social y material, la educación
matemática requiere especial atención. No se trata sólo de buscar
cómo hacer una educación matemática para todos, sino
también y, de manera particular, de pensar cómo ofrecer una
educación matemática que permita a los ciudadanos ser parte activa de
una sociedad.</p>
Eventos a realizar para la difusión de material:
<ol>
<li>Congreso Internacional de Matemáticas.
39
Alma Ibarra Obando
<li>Olimpiada de las Matemáticas.
<li>Simposio Nacional de Matemáticas.
</ol>
<hr align=“CENTER” color=“Blue”>
<center><font face=“courrier” size=“+1” color=“red” ><i>Ligas a Sitios de
Interés</i></font></center><br>
<a href=“http://www.unam.mx”>UNAM</a> (Universidad Nacional Autónoma de
México)<br>
<a href=“http://www.oei.es/”>OEI</a> (Organización de Estados
Iberoamericanos. Para la Educación, la Ciencia y la Cultura) <br>
<a href=“c:/paginas/ligas.html”>Archivo local </a> “
</font>
</body>
</html>
40
RECAPITULACIÓN 6
Galería de imágenes
A continuación mostramos un cuadro de los formatos de imágenes recomendados por tener
buena resolución y un reducido tamaño en bytes, para incluirse en páginas de Internet.
FORMATO
EXTENSIÓN
JPG
.jpg
GIF
.gif
A continuación se muestra la etiqueta para insertar una imagen en un documento, y sus
modificadores.
<IMG>
MODIFICADOR
src
FUNCIÓN
EJEMPLO
Se utiliza para definir la ruta o
ubicación de la imagen, la cual se <img src=“c:\imagenes\foto.jpg ”>
coloca dentro de comillas.
Define el alto con el que se va a
height
mostrar la imagen, el cual puede
<img src=“c:\imagenes\foto.jpg ”
ser el alto original.
height=“24”>
Este puede ser diferente al de la
imagen original sin alterarla.
Define el ancho con el que se va
width
a mostrar la imagen, el cual puede
ser el ancho original.
width=“154”>
Este puede ser diferente a la
imagen original sin alterarla.
Permite
border
colocar
un
borde
alrededor de la imagen, se define
con un número que va desde 0
que es sin borde y conforme se <img src=“c:\imagenes\foto.jpg ”
incrementa el número el borde es border=2>
más grueso, la medida es en
pixeles.
41
Alma Ibarra Obando
<IMG>
MODIFICADOR
FUNCIÓN
EJEMPLO
Especifica un texto alternativo que
alt
align
el navegador puede mostrar al <img src=“c:\imagenes\foto.jpg ” alt=“Mi
colocar el puntero del ratón sobre foto”>
la imagen.
Permite modificar la posición de
la imagen en relación con el texto
en una misma línea.
align=center>
Puede ser left, right, top, middle o
bottom.
Podemos utilizar una imagen como liga, utilizando la misma etiqueta <a></a>.
Ejemplo de código:
<a href=“personal.html”><img src=“c:\imágenes\foto.jpg” alt=“Mi foto”></a>
42
PRÁCTICA 6
Galería de imágenes
Situación:
Se le solicita elabore una página como catálogo para la promoción de sus productos, la cual
debe de constar de una página principal y una página con las imágenes que debe incluir una
forma de avanzar y regresar por medio de figuras con forma de flechas.
Instrucciones:
1. En su procesador de texto capture el siguiente texto:
“Arreglos Florales Imaginación.
Catálogo de flores para la temporada de primavera del 2000.
Para ver nuestro catálogo presione en la flecha.”
Dé presentación al texto colocando la primera línea como encabezado, aplique tipo de letra
helvética y coloque etiquetas de párrafo en cada una de las líneas.
Coloque la imagen de la flecha de avanzar y hágale una liga al documento catalogo.html,
céntrela dentro de la página.
Guarde su archivo como portada.html.
Código de documento portada:
<html>
<head>
<title>Flores</title>
</head>
<body background=“textura.jpg”>
<h1><center>Arreglos Florales Imaginación</center></h1>
<font face=“helvetica”><p>Catálogo de flores para la temporada de Primavera del
2000.</p>
<p>Para ver nuestro catálogo presione en la flecha.</p>
</font>
43
Alma Ibarra Obando
<a href=“catalogo.html”><center><img src=“imagenes/siguiente.gif” alt=“Siguiente” >
</center></a>
</body>
</html>
Abra el archivo en el navegador para ver los resultados.
2. En un nuevo documento inserte las imágenes que vienen en su disco de prácticas, escriba a
un lado de su imagen un texto con el nombre de cada flor, de acuerdo con las siguientes
indicaciones.
A la primer imagen póngale un borde de 1, como texto alterno el nombre de la flor, y con
alineación del texto en medio (middle), a la segunda imagen un borde de 2, texto alterno y
alineación del texto superior (top) y a la tercera un borde de 3 y texto alterno.
Coloque la imagen de la flecha de regreso y haga una liga al documento portada.html, céntrela
dentro de la página.
Guarde su archivo como catalogo.html.
Código del documento catálogo:
<html>
<head>
<title>Flores</title>
</head>
44
<body>
<img src=“imagenes/singleroses88.jpg” border=1 alt=“Rosa” align=“middle”> Rosa
roja<br> <br>
<img src=“imagenes/paradise_s.jpg” border=2 alt=“Ave del Paraiso” align=“top”> Ave del
paraiso<br><br>
<img src=“imágenes/daisies_s.jpg” border=3 alt=“Margaritas”> Margaritas <br><br>
<center><a href=“portada.html”><img src=“imagenes/anterior.gif”
alt=“Anterior”></a></center>
</body>
</html>
Abra su archivo en el navegador, observe los resultados y pruebe que puede cambiar de un
documento a otro.
45
RECAPITULACIÓN 7
Entablándonos
Las tablas son muy útiles en las páginas para poder presentar la información en forma ordenada
y fácil de visualizar. Por ejemplo, si deseamos estructurar la información por medio de
columnas, podemos recurrir a las tablas, y observar la versatilidad y facilidad para definirlas,
con o sin bordes, utilizando imágenes, color de fondo, uniendo celdas, etc. En realidad casi
siempre podemos encontrar una solución a nuestras necesidades al utilizar tablas.
Las tablas están constituidas por columnas y filas, la intersección de una columna y una fila
forman una celda.
Columna
Fila
Celda
Celda
Celda
Celda
Celda
Celda
Cada celda es independiente y puede tener diferente contenido en la misma tabla, como texto,
imagen, listas e inclusive otra tabla.
A continuación se muestran las etiquetas para insertar una tabla en un documento, y sus
modificadores.
ETIQUETA
FUNCIÓN
EJEMPLO
Define una tabla e incluye todos sus elementos dentro
<table> </table>
de la etiqueta de inicio y cierre.
Para alinear una tabla en la ventana del navegador
utilizamos el modificador ALIGN que acepta los valores <table align=center>
left (izquierda), right (derecha) o center (centrada).
<Table> </Table>
Si deseamos que la tabla muestre líneas de división
debemos utilizar el modificador BORDER, cuyo valor
predeterminado es sin bordes igual a un valor 0. Para
<table border=2>
que se dibujen las líneas de división se agrega un valor
numérico, entre mayor sea el número más ancha será
la línea.
47
Alma Ibarra Obando
ETIQUETA
FUNCIÓN
EJEMPLO
Para controlar la cantidad de espacio entre celdas y a lo
largo de los bordes exteriores de las celdas junto a los
<table cellspacing=3>
límites de una tabla, se define con un valor numérico,
entre más grande el número, mayor el espacio.
El modificador WIDTH permite definir el ancho de la
tabla, sin que ésta se ajuste al ancho de la ventana. El
valor se puede definir en porcentaje para que se ajuste <table width=“50% ”>
<Table> </Table>
al cambiar el tamaño de la ventana o con un valor
numérico en pixeles.
Para definir un color a la tabla y que sea independiente
al del documento utilizamos el modificador
BGCOLOR, que como ya hemos indicado su valor se <table bgcolor=“blue ”>
define con el nombre del color en inglés o en valor
hexadecimal.
<Tr> </Tr>
Define una fila en la tabla, dentro de las etiquetas de
inicio y cierre se colocan las etiquetas para las celdas.
Acepta diversos modificadores como los de la tabla
que actúan en toda la fila.
Define los datos de la tabla o celdas. Se colocan
dentro de las etiquetas de inicio y cierre de la fila.
Los modificadores o atributos que acepta anulan los
valores predeterminados para la fila actual.
El modificador ALIGN controla la alineación
horizontal del contenido de la celda.
<Td> </Td>
El modificador VALIGN controla la alineación vertical
del contenido de la celda que puede ser top (superior),
bottom (inferior) o center (centrado).
Para controlar el ancho de la celda utilizamos el
modificador WIDTH, el valor se define en porcentaje o
con un número entero en pixeles.
48
<table>
<tr>
</tr>
</table>
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
<table>
<tr>
<td align=
rigth>contenido</td>
</tr>
</table>
<table>
<tr>
<td valign=
center>contenido</td>
</tr>
</table>
<table>
<tr>
<td
width=120>contenido</td>
</tr>
</table>
PRÁCTICA 7
Entablándonos
Situación:
Se le solicita elabore una página con los precios del catálogo para incluir en la página
promocional de sus productos, la cual debe contener una tabla con la imagen del producto,
precio por arreglo y precio por envío.
Instrucciones:
1. En su procesador de texto elabore una tabla de tres columnas y cuatro filas:
Capture dentro de la tabla, el texto siguiente:
PRODUCTO
PRECIO POR ARREGLO
PRECIO POR ENVÍO
$250.00
$25.00
$450.00
$45.00
$1200.00
$120.00
2. Guarde su archivo como precios.html.
3. Abra su archivo en el navegador (Internet Explorer o Netscape).
4. Presione el botón derecho y seleccione Ver código fuente.
5. En el código realice los siguientes cambios:
a) Como título coloque “Flores”.
b) Coloque la imagen textura.jpg como fondo del documento.
c) Elimine todos los atributos o modificadores width.
d) Inserte en la primera celda de cada fila la imagen de una flor:
• Rosa, lirio y tulipanes.
e) Guarde los cambios y actualice la imagen en el navegador.
49
Alma Ibarra Obando
f)
Ponga un borde a la tabla de 3.
g) El texto de la primera fila céntrelo.
h) Al texto de la tabla aplique una alineación vertical Middle y horizontal Center.
i)
En las imágenes ponga el nombre de la flor como texto alterno.
j)
Ponga blanco como color de fondo de la tabla.
k) Centre toda la tabla.
l)
Inserte dos cambios de línea.
m) Coloque centrada en la parte inferior del documento la imagen de la flecha de regreso
y haga una liga al archivo catalogo.html.
n) Guarde los cambios y actualice la imagen en el navegador.
Código del documento
<html>
<head>
<title>flores</title>
</head>
<body background=“imagenes/textura.jpg”>
<table border=3 cellspacing=1 cellpadding=2 bgcolor=“white” align=“center”>
<tr><td valign=“middle” align=“center” >
producto</td>
<td valign=“middle” align=“center”>
precio por arreglo</td>
precio por envío</td>
</tr>
<tr><td valign=“middle”><img src=“ imagenes/rosa.jpg” width=75 height=90 border=0
alt=“rosa”></td>
$250.00</td>
$25.00</td>
</tr>
<tr><td valign=“middle”><img src=“ imagenes/lirio.jpg” width=75 height=90 border=0
alt=“lirio”></td>
50
$450.00</td>
$45.00</td>
</tr>
<tr><td valign=“middle” ><img src=“ imagenes/tulipan.jpg” width=75 height=90
border=0 alt=“tulipanes”></td>
$1200.00</td>
$120.00</td>
</tr>
</table>
<br><br>
<center><a href=“catalogo.html”><img src=“imagenes/anterior.gif” width=40 height=35
border=0 alt=“”></a></center>
</body>
</html>
51
RECAPITULACIÓN 8
Hazlo fácil, hazlo bien
Recomendaciones para obtener una buena página.
ELEMENTO
Contenidos
RECOMENDACIÓN
Cuando se requiera utilizar una tabla para presentar la información
en una forma ordenada.
Cuidar la ortografía, mayúsculas, minúsculas, información clara, y
concreta.
Utilizar un formato estándar como:
Gif.
Imágenes
Jpg.
Gif 98.
Tamaño adecuado y relacionado con el tema.
Colores
Utilizar colores claros para el fondo.
Para dar una presentación diferente a nuestras páginas podemos utilizar mapas de imágenes.
CONCEPTO
Mapa de imagen
DEFINICIÓN
Cada elemento de la imagen activa un vínculo o liga diferente.
Herramientas para elaborar páginas:
CLASIFICACIÓN
Lenguajes de programación
HERRAMIENTA
Java.
Java Script.
Golive.
Editores HTML
Homesite.
Dreamweaver.
Visual Page.
53
Alma Ibarra Obando
PRÁCTICA 8
Hazlo fácil, hazlo bien
Situación:
Ahora que ya realiza páginas del departamento de Relaciones Públicas, le solicitan dé una
buena presentación a la página de la empresa, para lo cual le proporcionan los archivos
necesarios.
Instrucciones:
1. Abra el archivo servicios.html en el navegador.
2. Observe todas las características.
3. Presione el botón derecho del ratón y solicite ver código fuente.
4. Modifique el color de fondo, busque en su disco de prácticas una imagen que pueda utilizar
como fondo.
5. Localice en su disco una imagen apropiada y cámbiela por la existente. Utilice el
modificador de alineación Middle.
6. Al título cámbiele la fuente, color, tamaño y póngalo en negritas.
7. Elabore una tabla con una fila y dos columnas.
8. Organice la información de la siguiente forma:
a) Los servicios en la primera celda preséntelos en una lista.
b) Los precios en la siguiente celda, colóquelos dentro de una tabla con alineación
centrada, borde, espacio dentro y entre las celdas.
9. Corrija el texto para que sea uniforme (mayúsculas y minúsculas).
10. Los números telefónicos colóquelos en la parte inferior del documento.
54
Código del documento
<html>
<head>
<title>Servicios</title>
</head>
<body background=“imágenes/textura.jpg”>
<div align=“center”><img src=“imágenes/servicios.jpg” width=97 height=86 border=0
alt=““ align=“middle”>
<font face=“helvetica” color=“Maroon” size=“+2”><b>Centro de Capacitación
Empresarial</b></font></div><br>
Servicios que proporciona nuestra empresa:<br>
<table cellpadding=“4” cellspacing=“10” align=“center”><tr>
<td><ul>
<li>Seminarios
<li>Inglés
<li>Computación
<li>Lectura dinámica
<li>Oratoria, etc.
</ul></td>
<td><table cellspacing=“4” cellpadding=“2” align=“center” border=“1”>
<tr align=“center”>
<td><b>Número de participantes</b></td><td><b>Precios</b></td>
</tr>
<tr><td>1-10 </td>
<td>$25,000.00</td></tr>
<tr><td>11-20 </td>
<td>$30,000.00</td></tr>
<tr><td>21-30</td>
<td>$35,000.00</td></tr>
</table></tr></table></td>
Para grupos mayores pedir cotización.<br>
Llámenos nosotros vamos.<br>
Tel:52-89-14-36<br>
fax:56-89-14-63
</body>
</html>
55
Alma Ibarra Obando
56
RECAPITULACIÓN 9
Publica tus ideas
REQUERIMIENTOS PARA PUBLICAR PÁGINAS EN INTERNET
Conexión a Internet
Por módem o conexión directa.
Servidor
Espacio asignado en disco duro de algún servidor institucional o
privado para colocar los archivos.
Programa cliente (ubicado en nuestra computadora), que se
Software para FTP (Protocolo
comunica con el servidor en donde deseamos colocar nuestros
para Transferencia de Archivos)
archivos.
Navegador
Internet Explorer o Netscape para ver las páginas en Internet.
Recomendaciones de programas cliente para realizar FTP y el sitio para obtenerlo.
PROGRAMA
SITIO
FTP Pro2000
http://www.ftppro.com
3D-FTP
http://www.3dftp.com
Absolute FTP
http://vandyke.com/products/beta/AbsoluteFTP/index.html
CoffeeCup Free FTP
http://www.coffeecup.com
Crystal FTP 2000
http://www.casdk.com
CuteFTP
http://cuteftp.com
57
Alma Ibarra Obando
PRÁCTICA 9
Publica tus ideas
Situación:
El director general solicita que los proyectos que le fueron asignados se coloquen en Internet,
para lo cual un compañero le sugiere localice un sitio gratuito en dicha red.
Instrucciones:
Para publicar documentos HTML en Internet debemos de tomar en cuenta lo siguiente:
1. Estar conectado a Internet.
2. Abrir el programa para realizar FTP que tengamos instalado en nuestra computadora.
a) Conectarnos al servidor en donde tenemos asignado un espacio, proporcionando:
• Nombre de usuario o anonymous (anónimo).
• Contraseña o dirección de correo electrónico si se accede como anónimo.
b) Localizar en el servidor la carpeta en donde vamos a depositar los archivos.
c) Seleccionar todos los archivos .html, de imágenes, sonidos o video que estén relacionados
con la página.
d) Presionar el botón de enviar.
3. Para verificar cómo se observa la página desde el servidor, abra el navegador y escriba el
URL (Localizador Uniforme de Recursos) de la página después de http://
Ejemplo: http:// entren.dgsca.unam.mx/internet/
58
RECAPITULACIÓN 10
No está por demás volver a repetir
Cuando no podemos ver una imagen en una página podemos considerar dos errores
principalmente:
1. La ruta o dirección del archivo de la imagen está mal definida.
2. Presionamos el botón
del navegador antes de que termine de cargar la página.
Etiqueta para insertar imagen y algunos atributos.
<IMG>
MODIFICADOR
FUNCIÓN
EJEMPLO
src
Define la ruta o ubicación de la imagen.
<img src=“c:\imagenes\foto.jpg ”>
Se coloca dentro de “ “.
height
Define el alto con el que se va a mostrar la
imagen.
Puede ser diferente al de la imagen height=“24”>
original sin alterarla.
width
Define el ancho con el que se va a mostrar
la imagen.
Puede ser diferente al de la imagen width=“154”>
original sin alterarla.
border
Coloca un borde alrededor de la imagen,
se define con un número que va desde 0
que es sin borde y conforme se incrementa
border=2>
el número el borde es más grueso, la
medida es en pixeles.
alt
Texto alternativo que el navegador puede
mostrar al colocar el puntero del ratón
alt=“Mi foto”>
sobre la imagen.
Podemos utilizar una imagen como fondo del documento.
ETIQUETA
MODIFICADOR
EJEMPLO
<BODY></BODY>
Background
<body background=“fondo.jpg ”>
59
Alma Ibarra Obando
Para presentar la información en una forma organizada podemos utilizar las tablas, una tabla
está constituida por filas, columnas y celdas.
Etiqueta para insertar una tabla y algunos modificadores.
ETIQUETA
FUNCIÓN
EJEMPLO
Define una tabla e incluye todos sus
elementos dentro de la etiqueta de inicio y <table> </table>
cierre.
Modificador ALIGN: alinea la tabla en la
ventana del navegador acepta los valores
<table align=center>
left (izquierda), right (derecha) o center
(centrada).
<Table> </Table>
Modificador BORDER: muestra líneas de
división en la tabla, utiliza un valor
<table border=2>
numérico entre mayor el número más
ancha será la línea.
Modificador CELLSPACING: controla la
cantidad de espacio entre celdas. Se define
<table cellspacing=3>
con un valor numérico, entre más grande
el número mayor el espacio.
Modificador BGCOLOR: determina un
color de fondo a la tabla, y su valor se
<table bgcolor=“blue ”>
define con el nombre del color en inglés o
en valor hexadecimal.
<Tr> </Tr>
Define una fila en la tabla, dentro de las
etiquetas de inicio y cierre se colocan las <table>
<tr>
etiquetas para las celdas.
Los modificadores actúan sólo en las
</tr>
celdas de esa fila, ignora los modificadores </table>
que estén definidos para la tabla.
<table>
Define las celdas.
<tr>
Los modificadores o atributos que acepta
anulan los valores predeterminados para la
fila actual.
<td></td>
<Td> </Td>
<td></td>
</tr>
</table>
<table>
Modificador ALIGN: controla la alineación
horizontal del contenido de la celda.
<tr>
<td align= rigth>contenido</td>
</tr>
</table>
60
ETIQUETA
FUNCIÓN
EJEMPLO
Modificador VALIGN: controla la
alineación vertical del contenido de la
celda que puede ser top (superior), bottom
(inferior) o center (centrado).
<Td> </Td>
<table>
<tr>
<td valign= center>contenido</td>
</tr>
</table>
<table>
Modificador WIDTH: controla el ancho de
la celda, el valor se define en porcentaje o
con un número entero en pixeles.
<tr>
<td width=120>contenido</td>
</tr>
</table>
Consideraciones para obtener una buena página:
ELEMENTO
RECOMENDACIÓN
Utilizar tablas para presentar la información en forma organizada.
Contenidos
Cuidar la ortografía, mayúsculas, minúsculas, información clara, y concreta.
No poner demasiado texto en un solo documento para evitar documentos
demasiado largos.
Utilizar un formato estándar como:
Imágenes
• Gif.
• Jpg.
• Gif 98.
Colores
Utilizar colores claros como fondo del documento, y evitar la aplicación de
demasiados colores en todo el sitio.
Requerimientos para publicar una página.
ELEMENTO
ACCIÓN
Módem o red local
Conexión a Internet.
Servidor
Asignación de espacio en el disco duro para colocar los
archivos a publicar.
Software para FTP
Enviar o recibir archivos de una máquina local a un servidor.
Navegador
Mostrar la página en Internet.
61
Alma Ibarra Obando
PRÁCTICA 10
No está por demás volver a repetir
Situación:
Se está organizando un congreso internacional de agencias de turismo, su empresa es la
organizadora por lo que se le solicita realice una página para publicar toda la información en
Internet
Instrucciones:
1. Abra de su disco de prácticas el archivo congreso.html.
2. Aplique los conceptos vistos durante el curso para dar presentación al documento.
3. Realice una liga a un documento nuevo en donde promocione el hotel sede, utilice las
imágenes que contiene su disco de prácticas.
4. En el documento del hotel utilice la imagen de la flecha de regreso para hacer una liga al
documento congreso.html.
Código del documento congreso.html
<html>
<head>
<title>Congrso de Turismo</title>
</head>
<body background=“imagenes/textgris.jpg”> 
<img src=“imagenes/playa.jpg” width=300 height=150 border=0 alt=““ align=“middle”>
<FONT color=navy face=helvetica size=“+2”><b>VII Congreso Internacional de
Turismo</b></FONT>
<hr align=“CENTER” color=“Blue”>
<table border=“1” align=“center”>
<tr><td><b>Fecha</b></td> <td>Junio 17-21 200</td> </tr>
<tr><td><b>Sitio</b></td> <td> Playas de Huatulco México</td> </tr>
<tr><td><b>Hotel Sede</b></td><td> <a href=“hotel.html”>Maravillas de
Oaxaca</a></td></tr>
62
<tr><td><b>Expositores</b></td><td> 1,000 compañías</td></tr>
<tr><td> <b>Total del área</b> </td> <td>15,000 metros cuadrados</td></tr>
<tr> <td width=10></td><td>700 Stands</td></tr>
</table>
<table cellpadding=“1” cellspacing=“1”>
<tr><td>Organizador :
Traveller México</td></tr>
<tr><td> Teléfono : (5)264-6983</td></tr>
<tr><td>Fax : (5) 269-3995 </td></tr></table>
</body>
</html>
Imagen del documento congreso.html vista en el navegador.
Código del documento hotel.html
<html>
<head>
<title>Maravillas de Oaxaca</title>
</head>
<body background=“imagenes/textucafe.jpg”>
63
Alma Ibarra Obando
<img src=“imagenes/hotel.jpg” width=321 height=209 border=0 alt=““ align=“bottom”>
<font face=“helvetica” color=“Maroon” size=“+2”>Hotel Maravillas de Oaxaca</font>
<font face=“helvetica”><ul>
<li>250 habitaciones con vista al mar
<li>Aire acondicionado en todas las habitaciones
<li>Televisión con sistema de cable
<li>Teléfono en todas las habitaciones
<li>3 albercas
<li>Canchas de Tenis
<li>SPA</ul>
<b>Reservaciones</b>: (91)352-36</font><br>
<div align=“center”>
<a href=“congreso.html”><img src=“imagenes/anterior.gif” width=40 height=35 border=0
alt=““></a></div>
</body>
</html>
Imagen del documento hotel.html vista en el navegador.
64
UNIVERSIDAD NACIONAL AUTÓNOMA DE MÉXICO
DR. JUAN RAMÓN DE LA FUENTE
Rector
LIC. ENRIQUE DEL VAL BLANCO
Secretario Administrativo
LIC. ALBERTO PÉREZ BLAS
Secretario de la Rectoría
DRA. ELVIA ARCELIA QUINTANA ADRIANO
Abogada General
DR. JOSÉ NARRO ROBLES
Coordinador General de Reforma Universitaria
DIRECCIÓN GENERAL DE SERVICIOS DE CÓMPUTO
ACADÉMICO
DR. VICTOR GUERRA ORTIZ
Director General
MTRA. FERNANDA MERAZ RODRÍGUEZ
Subdirectora
MAT. CARMEN BRAVO CHAVESTE
Directora de Cómputo para la Docencia
LIC. ROSARIO ORTIZ OSORNIO
Subdirectora de Planeación Académica
ING. SERGIO DE ALVA ARGUINZONIZ
Coordinador del Centro Mascarones
LIC. ALEJANDRINA SAN JUAN REYES
Coordinadora del Centro de Extensión en
Cómputo y Telecomunicaciones Nuevo León
LIC. CECILIA MEDINA NAVARRO
Coordinadora del Centro Coapa de Extensión
en Cómputo y Telecomunicaciones
ACT. FABIÁN ROMO ZAMUDIO
Coordinador de Educación a Distancia
QUIM. LAURA MATA MONTIEL
Coordinadora de Infraestructura y Soporte Tecnológico
ACADEMIA DE PROFESORES DE TELECOMUNICACI ONES
Revisión Técnica
Lic. Semiramis Zaldívar Granada
Revisión Didáctica
DG Toña Zimerman Sonabend
Jefa del Departamento de Diseño
Lic. Martha Patricia García Morales
Corrección de estilo
DG Gabriela Lilí Morales Naranjo
Diseño editorial
DG Cristina Gispert Galván
Diseño de portada
Guías didáctica y Cuaderno de prácticas
Marzo de 2000

Practicas Web

Transcripción

Documentos relacionados

70 Fuentes para tus anuncios