benemrita universidad autnoma de puebla

Benemérita Universidad Autónoma de
Puebla
Dirección General de Enseñanza Media Superior
Computación VI
GUÍA PARA EL ALUMNO
Academia General Computación
2005
Computación VI
Guía para el alumno del Bachillerato Universitario, fue elaborado por la
Vicerrectoría de Docencia de la Benemérita Universidad Autónoma de Puebla.
D.R. © Universidad Autónoma de Puebla, 2005
Calle 4 sur No. 104, Centro Histórico
C.P. 72000 Puebla, Pue.
Este libro electrónico ha sido elaborado por la Universidad Autónoma de Puebla,
como parte de las acciones del fortalecimiento del Bachillerato Universitario. La
edición de este libro no tiene carácter lucrativo, es para uso exclusivo de los
alumnos de la BUAP.
Los juicios y opiniones de la comunidad universitaria son indispensables para
mejorar el contenido de este libro, éstos pueden ser enviados a:
Vicerrectoría de Docencia
Av. Juan de Palafox y Mendoza No. 219
Centro Histórico, C.P. 72000, Puebla, Pue.
Teléfono 2295500, extensión 5602
Correo electrónico: [email protected]
2
DIRECTORIO
Mtro. Enrique Agüera Ibáñez
Rector
M.A. Armando Valerdi Rojas
Secretario General
M.A. José Alfonso Esparza Ortiz
Tesorero General
M.A. Oscar Gilbón Rosete
Contralor General
Mtro. José Jaime Vázquez López
Vicerrector de Docencia
Lic. Georgina Maldonado Lima
Directora de Educación Media Superior
3
Presentación
La Benemérita Universidad Autónoma de Puebla ha producido las Guías para el
maestro y para el alumno como parte de las acciones para elevar la calidad
académica del Bachillerato Universitario. Su finalidad es respaldar el aprendizaje
de los estudiantes v apoyar el trabajo de los profesores en cada una de las
asignaturas que integran el nuevo plan de estudios de la preparatoria (Plan 5). La
producción de estas Guías tiene como base el trabajo colegiado de las Academias
de Maestros del Nivel Medio Superior de la BUAP. En ellas se han podido
conjugar las experiencias de los docentes, cada vez más exitosas en materia de
superación académica. Se han incorporado también a estos textos el trabajo de
profesores y especialistas de otras instituciones educativas, con quienes nuestros
maestros mantuvieron un intenso v fructífero trabajo.
La Vicerrectoría de Docencia reconoce el empeño que ha tenido, para la
producción de esta Guía, la Academia General de Computación del Nivel Medio
Superior, periodo 2004-2005, particularmente los maestros:
Ma. del Pilar B. Guevara Castillo, Salvador Alberto Pérez González, Jorge
Sandoval Robles, Maricela Sánchez Hernández, Ma. De los Ángeles Sánchez
de los Santos, Ma. De Lourdes Carreón Sánchez, José Héctor Orea Reina,
José de Jesús Viveros Olivera, Ma. Edith Juárez Hernández, Silverio Toxqui
Mendoza, E. Augusto Pérez Romero, José P. Caselín Rosas.
En el diseño de las Guías para el maestro y para el alumno se han contemplado
los avances de las Academias en la actualización y precisión de los contenidos de
las asignaturas, y se incorporaron estrategias para un mejor aprendizaje a partir
de nuevos enfoques pedagógicos que orienten las Actividades de la educación
media superior en la BUAP. Todo ello contribuirá a cumplir de una mejor manera
los bbjetivos de calidad y pertinencia educativa que se ha propuesto nuestro
bachillerato.
La publicación de estas Guías corresponde al compromiso sostenido del rectorado
de contribuir a la mejor formación de los jóvenes preparatorianos y de apoyar el
buen desempeño de sus profesores, orientaciones prioritarias que han sido
recogidas en el Plan General de Desarrollo 2002- 2005 de nuestra Benemérita
Institución.
Vicerrectoría de Docencia
4
Manual de Prácticas y Guía Metodológica del
Alumno
Computación VI
Debe seguir atrapado
En extinción por ineficiente
Nombre del alumno(a):
Nº de computadora
Grado y grupo:
Nombre del profesor(a):
Escuela:
ENERO DEL 2005
5
Contenido temático de Computación VI
Pág.
Unidad I. Introducción a la base de datos MS Access
8
1. Introducción a Microsoft Access
1.1 Ventana de Access
1.2 Ventana de Base de Datos
1.3 Objetos
8
2. Creación de una base de Datos
2.1 Descripción de una Tabla
2.2 Tabla.
2.2.1 Creando Tabla en Vista Diseño
Campos
Clave Principal o Id
Tipos de Datos
Propiedades de los Campos
2.2.2 Hoja de Datos
2.3 Consultas.
2.3.1 Creando Consultas en Vista Diseño
2.3.2 Filtrando Consultas
2.4 Relacionando Tablas.
2.5 Formularios.
2.5.1 Creando un Formulario usando el Asistente
10
Unidad II. Diseño de páginas WEB
23
1. ¿Qué es el html?
1.1
Introducción
2. Etiquetas
2.1
Estructura básica de un documento html
3. Encabezado de un documento
3.1
Título de un documento
24
4. Cuerpo del documento
4.1
Fondo
4.1.1 Imagen
4.1.2 Color
4.2
Juego de caracteres del documento
29
24
27
6
4.3
4.4
4.5
4.6
4.7
Espaciados y saltos de línea
Líneas
Encabezados
Atributos del Texto
Fuente para texto (Font)
4.7.1 Tamaño, color, tipo
4.8
Lista de elementos
4.8.1 Tipo de listas
4.9
Imágenes
4.9.1 Formatos
4.10 Ligas o hiperenlaces
4.11 Tablas
4.12 Extensiones de HTML
4.12.1 Marquee
5. Frames
6. Trabajo final
54
57
7
UNIDAD I. INTRODUCCIÓN A LA BASE DE DATOS DE MICROSOFT ACCESS
1.
Introducción a Microsoft Access
Objetivo General
Que el alumno conozca las características de las bases de datos de Microsoft
Access para que maneje y organice diferente tipo de información.
Microsoft Access es un gestor de bases de datos en ambiente Windows que
maneja base da datos relacionales es decir información entre dos o más tablas
(diferencia con Excel)
Microsoft Access permite introducir y almacenar datos, ordenarlos y manipularlos.
Organizarlos de manera significativa para que se pueda obtener información no
visible como totales, tendencias o relaciones de otro tipo. Debe permitir en
principio: Introducir, almacenar, recuperar y trabajar con datos.
Conceptos
9
Base de datos. Es el objeto principal que contiene a su vez a los
objetos: tablas, consultas, formularios, informes, macros y módulos.
9
Campo. Es una categoría de información que representa los rótulos
de cada columna, de una tabla
9
Registro. Es la información de los diversos datos a manejar, los
cuales se van a encontrar localizados en cada una de las filas de la
tabla, es decir, cada fila consta de un único registro.
9
Tablas. Es un contenedor en donde se almacenarán los datos
comunes a un tema en particular
9
Consultas. Son objetos que nos permiten diseñar y ejecutar
consultas a las tablas.
9
Formularios. Son los objetos donde podemos realizar capturas,
diseñar aplicaciones, etc.
9
Informes. Son objetos que nos permiten diseñar informes para poder
imprimirlos
9
Macros. Nos permiten automatizar tareas e insertarlas para su uso
en diversos objetos.
9
Módulos Es donde podemos programar procedimientos y funciones
en Access e incorporarlos en diversos objetos.
9
Id. Es la clave que hace a un registro único, no debe duplicarse
8
Actividad 1
1. Contesta las siguientes preguntas:
¿Crees que tu nombre esté en alguna base de datos? ______ ¿En cuales?
__________________________________________________________________
__________________________________________________________________
______________
¿Cómo organizas tus cassetes, discos compactos, libros?
__________________________________________________________________
__________________________________________________________________
______________
¿Crees que puedas organizar una base de datos de éstos?
______________________________
¿Cómo?___________________________________________________________
_______
¿En tu casa que otras cosas crees que se puedan organizar en una base de
datos?____________________________________________________________
________
2. Escribe
¿Donde y qué base de datos has consultado manualmente?
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________
____________________________
3. Escribe un ejemplo de base de datos en donde utilices la computadora para
consultarla.
9
Creación de una base de datos
Actividad 1
Ingresa al programa de Access dando clic al botón inicio:
1.1 Ventana de Access
Se despliega el menú y selecciona Programas y Microsoft Access
Aparecerá la siguiente ventana:
1.2 Ventana de Base de Datos
Selecciona Base de datos en blanco y acepta, aparecerá otro cuadro de diálogo
en el que se proporcionará nombre a la base de datos que se va a crear, este
nombre será indicado por el profesor, recuerda que se debe usar un nombre
apropiado y relacionado con el contenido de la base de datos.
Una vez que anotaste el nombre acepta y aparece el cuadro de diálogo siguiente:
10
1.3
Objetos de la Base de Datos
Tablas
Unidad donde crearemos el conjunto de datos de nuestra base de datos. Estos
datos estarán ordenados en columnas verticales (Campos y Registros)
Consultas
Aquí definiremos las preguntas que formularemos a la base de datos con el fin de
extraer y presentar la información resultante de diferentes formas (pantalla,
impresora...)
Formulario
Elemento en forma de ficha que permite la gestión de los datos de una forma más
cómoda y visiblemente más atractiva.
Informe
Permite preparar los registros de la base de datos de forma personalizada para
imprimirlos.
Macro
Conjunto de instrucciones que se pueden almacenar para automatizar tareas
repetitivas.
Módulo
Programa o conjunto de instrucciones en lenguaje Visual basic
Una base de datos comienza con el diseño de una tabla. Para ello, es necesario
plantearse primero qué datos necesitamos. En nuestro ejemplo, necesitaremos:
•
•
•
2.1
No. De matrícula
Nombre, apellidos, dirección, teléfono, etc., del alumno
Actividad que realiza
Descripción de una Tabla
En una base de datos se almacena la información que introducimos en formas de
tablas, formada por campos (cada una de las partes en las que hemos desglosado
la información) y registros (información referida a una persona o “dato”, aparece
en una fila de la tabla). El dato es el contenido de cada tabla.
11
2.2
Campos
Ejemplo de tabla
LISTA TELEFÓNICA
Nombre
Casco Mena Pedro
De los Santos Martines
García Sosa Rebeca
Dirección
Av. Independencia 1290
12 Oriente 2345
Calle Ébano 340
Teléfono
(222) 2 34 56 78
(222) 2 65 98 74
(222) 2 54 87 98
No. de cuenta
del cliente
25-456-897-002
25-635-896-012
25-914-365-014
En esta lista podemos observar que el campo Nombre es fundamental para que
el registro tenga sentido. Sería absurdo para esta tabla que apareciera una
dirección en la lista sin ir acompañado de un nombre. Por este motivo se suelen
denominar campos fundamentales a aquellos que definen al registro y campos
secundarios a los que lo complementan.
Bases de datos Planas y Relacional
Para hacer una base da datos que cumpla las funciones de lista telefónica
necesitamos una sola tabla, denominada base de datos plana, pero puede haber
casos en los que necesitemos mas de una.(como el ejemplo anterior)
En una empresa, por ejemplo necesitara más datos además del nombre, dirección
y teléfono de sus clientes o de sus proveedores. Tal como: artículos vendidos,
precio, monto pendiente de pago, fecha limite de pago, referencias, descuentos,
calificación o antecedentes (bueno, malo; cumplido, incumplido; moroso, puntual
etc.).
Pero se plantea un problema: si cada vez que viene un cliente a la empresa o
realizamos un nuevo pedido a un proveedor se le tiene que abrir una ficha, en
poco tiempo los datos de cada uno de ellos estarán repetidos varias veces. Si esto
se multiplica por todos los clientes y proveedores la base de datos contendrá gran
cantidad de datos redundantes innecesarios, lo que aumentara su tamaño y la
hará menos eficaz.
Para solucionar el problema se usaran necesariamente varias tablas que luego
se relacionaran por un campo común en ambas, el contenido de los campos
relacionales y el tipo de dato deberá ser igual .
12
LISTA TELEFÓNICA
No. de cuenta
Nombre
Dirección
Teléfono
del cliente
Casco Mena Pedro
Av. Independencia 1290 (222) 2 34 56 78 25-456-897-002
De los Santos Martínez 12 Oriente 2345
(222) 2 65 98 74 25-635-896-012
García Sosa Rebeca Calle Ébano 340
(222) 2 54 87 98 25-914-365-014
COMPRAS
Fecha de
Fecha de
No. de cuenta
la última
vencimiento
del cliente
compra Monto
25-456-897-002 19-Dic-02 $1,358.45 30-Ene-03
25-635-896-012 22-Dic-02 11,354.98 31-Ene-03
25-914-365-014 24-Dic-02 4,356.00 01-Feb-03
LISTA TELEFÓNICA
No. de
cuenta
del
cliente
Nombre
Dirección
Teléfono
Casco Mena Pedro
Av. Independencia 1290 (222) 2 34 56 78 00001
De los Santos Martínez 12 Oriente 2345
(222) 2 65 98 74 00002
García Sosa Rebeca Calle Ébano 340
(222) 2 54 87 98 00003
COMPRAS
Fecha de
Fecha de
cliente la última
vencimiento
compra Monto
00001
19-Dic-02 $1,358.45 30-Ene-03
00002
22-Dic-02 11,354.98 31-Ene-03
00003
24-Dic-02 4,356.00 01-Feb-03
13
De esta manera se consigue que no haya datos repetidos. Con esta estructura
cada vez que llegue un cliente, no será necesario volver a introducir sus datos
personales. Basta con introducir su número de cuenta para que Microsoft Access
“sepa” de que cliente se trata.
A esta forma de organizar la base de datos mediante distintas tablas relacionadas
por campos comunes se les llama base de datos relacional.
Antes de realizar tu base de datos es IMPORTANTE:
1. Conocer exactamente para qué se quiere usar la base de datos, qué datos
son los que interesan y qué información necesitara extraer.
2. Una vez que esto esté claro, se definen las Tablas que compondrán la base
de datos. Dentro de cada tabla, se piensa qué campos serán necesarios, ya
que un mal diseño hará que el sistema sea lento y los resultados no sean los
esperados.
3. Existen dos formas de ver una tabla, Diseño y Hoja de datos
Diseño:
Hoja de datos:
Permite establecer los campos y sus propiedades
Sirve para introducir datos y modificarlos si es necesario
2.2.1 Elaborando una tabla
Al seleccionar la tabla hacer doble clic en opción Crear una tabla en Vista
diseño o en el botón nuevo, aparecerá una ventana donde deberás introducir los
campos sin espacios, sin acentos y sin comas para un mejor manejo, además
especificarás el tipo de dato ya que es importante para relacionar las tablas.
Tipos de datos:
a)
b)
c)
d)
e)
f)
g)
h)
i)
j)
Texto
Para introducir cadenas de caracteres hasta un máximo de
255
Memo
Para introducir un texto extenso, hasta 65535 caracteres
Numérico
Para introducir números
Fecha/Hora Para introducir datos en formato fecha u hora
Moneda
Para introducir datos en formato número y con el signo
monetario
Autonumérico En este tipo de campo, Access numera automáticamente el
contenido
Sí/No
Campo lógico. Este tipo de campo es sólo si queremos un
contenido del tipo Sí/No, Verdadero/Falso, etc.
Objeto OLE Para introducir una foto, gráfico, hoja de cálculo, sonido, etc.
Hipervínculo Podemos definir un enlace a una página Web
Asistente para búsquedas
Crea un campo que permite elegir un valor
de otra tabla o de una lista de valores
mediante un cuadro de lista o un cuadro
combinado.
14
En la parte inferior podemos mejorar la tabla estableciendo las propiedades de
cada uno de los campos, por ejemplo, Máscara de entrada, que muestra
automáticamente todos los caracteres literales de presentación en el campo.
A continuación insertarás un campo Id o llave para que éste sea único y se
pueda relacionar con el campo de otra tabla, este campo deberá estar en la
primera fila, debes posicionarte en él y seleccionar el icono de la clave principal,
a continuación aparecerá una llavecita del lado izquierdo del campo (en vista
diseño).
Un campo clave es un campo con una característica especial (la clave) que hace
que ese campo no se repita en ningún registro de la BD. Un campo clave
incrementa además la velocidad de los procesos del tipo Consultas o Formularios.
Lógicamente, no podemos introducir como campo clave el campo Nombre porque
se puede repetir.
15
2.2.2 Hoja de Datos
Para llenar la tabla tendrás que estar en vista Hoja de Datos, para lo cual se debe
seleccionar el icono vista, aparecerá la tabla vacía y empezarás a capturar los
registros de sus compañeros, quedando como se muestra a continuación.
Para salir de la tabla, utiliza alguno de los dos métodos anteriormente descritos
(cierra la ventana o accede a Archivo - Guardar). Una vez guardada la tabla
podemos modificar el contenido de los campos pulsando de nuevo el botón Abrir
para añadir más registros o modificar los ya existentes. Al terminar de capturar
todos los campos se guardará la tabla.
Tarea:
El alumno deberá realizar dos tablas que contengan campos que se puedan
relacionar con la anterior. El profesor podrá tomar como ejemplo las siguientes
tablas, para completar un total de tres tablas.
IdClaveTutor
085855
041733
079199
Matrícula
Nombre
2002123
Alejandro
2002124
Lucrecia
2002125
Gustavo
Grupo
5AM
Promedio
5° Sem
8.9
Materia
Promedio
Optativa
total
Técnico
en 8
PC
5BM
9.5
Contabilidad
5CM
9.2
Técnico
PC
7.5
en 9
Campo Relacional
Tutor
085855
041733
079199
Nombre Categoría
Maricela
Sánchez
Héctor
Orea
Jesús
Viveros
Tiempo
completo
Tiempo
Completo
Tiempo
Completo
Horas
de
Tutoría
6
Biología
15
[email protected]
5
Historia
20
[email protected]
6
Química
21
[email protected]
Academia
Antigüedad
e-mail
16
2.3
Realizando una consulta
2.3.1 Creando Consultas en Vista Diseño
Estando en la ventana de la base de datos se selecciona el objeto Consultas y
doble clic en Crear consulta en Vista Diseño. Aparecerá la siguiente ventana,
aquí se podrá seleccionar la tabla que se desea consultar, dando doble clic o clic y
agregar.
Al insertar la tabla quedará de la siguiente forma.
En esta ventana se pueden seleccionar los campos para formar la consulta, para
lo cual se dará doble clic y el campo pasará a la parte inferior. El campo que
contiene la clave principal se insertará en primer orden.
Vista Hoja
de Datos
Ejecutar
Para visualizar los datos de la Consulta dar clic en el botón ejecutar de la Barra de
Herramientas, observándose de la siguiente forma.
17
Vista
Orden
Filtrar
Quitar o
Aplicar
2.3.2 Filtrado en consultas
Para visualizar ciertos datos en la consulta, se puede hacer a través de la Barra
de Herramientas, en vista Hoja de Datos, o anexar criterios directamente en la
Vista Diseño.
Ejemplo:
En Vista Diseño, para visualizar solamente los alumnos cuyo deporte es el volibol
se anotará en la fila que corresponde a criterios el nombre del deporte (se
escribirá como se encuentra en la hoja de datos) y después ejecutar.
18
Apareciendo la Consulta de Selección.
2.4
Relacionando tablas
Una tabla que se acaba de crear no esta relacionada con ninguna otra tabla. Es
indispensable relacionarlas para visualizar los datos entre los campos de
diferentes tablas de una base de datos.
Estando en la base de datos, al seleccionar el icono Relaciones
aparecerán las tablas previamente elaboradas.
El campo que contiene la clave principal o Id debe ser arrastrado hacia el campo
de la otra tabla con el cual se va a relacionar (recordar que deben ser del mismo
tipo los datos), se debe dar clic en integridad referencial y aceptar.
Integridad Referencial
Es un sistema de reglas de Access para asegurarse de que las relaciones entre
registros de tablas son válidas y de que no se eliminen o cambien accidentalmente
datos relacionados. Se establece Integridad Referencial cuando se cumple lo
siguiente:
•
•
•
El campo coincidente de la Tabla principal es una clave principal que tiene
un Índice único.
Los campos relacionados tienen el mismo tipo de datos
Ambas Tablas pertenecen a la misma Base de Datos
19
Para visualizar los datos relacionados, deberás abrir la Tabla principal y aparecerá
del lado izquierdo un signo + que indica la relación, al dar clic al signo se mostrará
la otra Tabla.
2.5
Creando un formulario
Los formularios son utilizados típicamente para realizar las siguientes actividades:
•
•
•
•
•
Introducir datos
Modificar Datos
Ver Datos
Imprimir datos
Asignar diferentes formatos
El uso de los formularios es un modo eficiente de introducir los datos, ya que
ahorra tiempo y evita que se cometan errores de ortografía, además proveen una
forma segura de actualizar los datos de las tablas, proporciona una forma sencilla,
atractiva y segura de ver los datos.
2.5.1 Creando un Formulario usando el Asistente
En la base de datos da clic en Formulario y doble clic en Crear Formulario
utilizando el asistente.
20
Cuando se muestra la siguiente ventana, selecciona la tabla
consulta de la cual deseas realizar el formulario.
principal o la
Para la presentación de los datos en un formulario se deben pasar los campos
hacia la derecha, a excepción de los que no sean tan necesarios.
Se puede elegir la distribución de los mismos datos:
También se puede elegir el estilo de los datos.
21
Para salvar el formulario de preferencia se antepone al identificador una letra F y
se selecciona Finalizar
El resultado debe ser algo parecido a lo siguiente:
En Vista Diseño se puede dar un diferente formato al formulario, ya sea
reubicando las etiquetas y el cuadro de texto o a través del Cuadro de
Herramientas, agregando títulos, subtítulos, subformularios etc.
22
Cuadro de
Texto
Etiqueta
Para mover por
separado
UNIDAD II DISEÑO DE PÁGINAS WEB
Objetivo General
El alumno conocerá y manejará los elementos de un programa de elaboración de
una página Web, para desarrollar su habilidad de análisis, abstracción y
creatividad.
Lección 1
Duración: 100 minutos
Objetivo
El alumno describirá la estructura básica de un documento HTML así como el
concepto de etiquetas.
Contenido
1. ¿Qué es el html?.
2. Estructura básica de un documento HTML.
3. Título de un documento
Conceptos:
HTML
El HTML (Hyper Text Markup Language), el lenguaje de marcas para hipertexto.
Etiquetas
Son una serie de órdenes que indican al visor la forma de representar los
elementos (texto, gráficos, etc.) que contenga el documento.
23
1.
¿Qué es el html?
1.1
Introducción
El lenguaje de marcas para hipertexto, es un sistema para estructurar
documentos. Estos documentos pueden ser mostrados por los visores de páginas
Web en Internet, como Netscape, Mosaic o Microsoft Internet Explorer. Por el
momento no existe un estándar de HTML ya que tanto Netscape como Microsoft
se empeñan en incluir etiquetas que solo funcionan con sus respectivos
navegadores. De cualquier manera existen diferentes revisiones o niveles de
estandarización, el 1.0, el 2.0 y el 3.0, lo que produce que algunos visores no
"comprendan" en su totalidad el contenido de un documento. En este manual se
ha utilizado la revisión 3.0 de HTML. Esto quiere decir que algunas de las órdenes
de HTML que aquí se indican puede que no sean reconocidas por algunos visores
de páginas Web. Netscape 2.x y Microsoft Explorer 3.x reconocen prácticamente
todas las órdenes HTML vistas en este manual.
2.
Etiquetas
Básicamente, el HTML consta de una serie de órdenes o etiquetas, que indican al
visor la forma de representar los elementos (texto, gráficos, etc.) que contenga el
documento. Las ordenes son referidas con palabras como: etiquetas ó directivas.
Las etiquetas de HTML pueden ser de dos tipos, cerradas o abiertas. Las
etiquetas cerradas son aquellas que tienen una palabra clave que indica el
principio de la etiqueta y otra que indica el final. Entre la etiqueta inicial y la final se
pueden encontrar otras etiquetas. Las etiquetas abiertas constan de una sola
palabra clave. Para diferenciar las etiquetas del resto del texto del documento se
encierran entre los símbolos < y >. Las etiquetas cerradas incluyen el carácter /
antes de la palabra clave para indicar el final de la misma. Una etiqueta puede
contener "parámetros". Estos parámetros se indican a continuación de la palabra
clave de la etiqueta.
Ejemplos:
Etiqueta cerrada
<CENTER> Mi página Web </CENTER>
Etiqueta abierta
<HR>
Etiqueta con parámetros
<BODY bgcolor="#FFFFFF"> </BODY>
Los archivos que contienen documentos HTML suelen tener la extensión .html o
.htm.
24
Notas:
Para mejor claridad, en este manual se han fijado los siguientes criterios a la hora
de escribir la sintaxis de las etiquetas de HTML.
1.
2.
3.
4.
Las etiquetas se indican en letra mayúscula y en negrilla.
Los parámetros de las etiquetas se indican en letra minúscula y negrilla.
El resto de elementos se indican en letra normal.
Las palabras a resaltar en el texto se indican en cursiva y negrilla.
2.1 Estructura básica de un documento HTML
Un documento escrito en HTML contendría básicamente las siguientes etiquetas:
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Indica el inicio del documento.
Inicio de la cabecera.
Inicio del título del documento.
Final del título del documento.
Final de la cabecera del documento.
Inicio del cuerpo del documento.
Final del cuerpo del documento.
Final del documento.
El documento se hallará situado en alguna computadora al que se pueda acceder
a través de Internet. Para indicar la situación del documento en Internet se utiliza
el URL (Uniform Resource Locator). El URL es el camino que ha de seguir nuestro
visor a través de Internet para acceder a un determinado recurso, bien sea una
página Web, un archivo, un grupo de noticias, etc. Es decir, lo que el visor de
páginas Web hace es acceder a un archivo situado en una computadora que está
conectado a la red Internet. La estructura de un URL para una página Web suele
ser del tipo http://dominio/directorio/archivo. El dominio indica el nombre de la
computadora al que accedemos, el directorio es el nombre del directorio de esa
computadora y archivo el nombre del archivo que contiene la página Web escrita
en HTML. Por ejemplo:
http://www.buap.mx/facultades/fcc.html
Donde:
http://
Es el indicador de página Web
www.buap.mx Es el Dominio (nombre) de la computadora
/facultades/ Es el Directorio dentro de la computadora
Es el Archivo que contiene la página Web
fcc.html
25
Actividad 1
1.
El alumno abrirá el block de notas de Windows, de acuerdo a los
siguientes pasos:
Inicio
Programas
Accesorios
Block de Notas
2.
El alumno capturará el siguiente código HTML y lo guardará con el
nombre ejercicio1.html dentro de una carpeta previamente creada para
tal fin. La extensión es rigurosa ya que de lo contrario el navegador no
interpretará nada.
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
HOLA A TODOS!!!
</BODY>
</HTML>
3.
El alumno minimizará la aplicación de Block de Notas y entrará al
Navegador Internet Explorer, en donde abrirá el archivo ejercicio1.html
mediante los siguientes pasos:
Menú archivo
Abrir
Botón explorar
Localice el archivo: ejercicio.html y selecciónelo
Botón Abrir
Botón Aceptar
Listo!! Sólo verá la frase:
HOLA A TODOS!!!
3. Encabezado de un documento
3.1
Título de un documento
La etiqueta <HEAD></HEAD> delimita la cabecera del documento. Dentro
de la cabecera es importante definir el título de la página por medio de la
etiqueta <TITLE></TITLE>. Este título será el que aparezca en la barra de
título de nuestro visor de páginas Web.
26
Ejemplo :
<TITLE>La página Web de Fac. Ciencias de la Computación</TITLE>
Actividad 2
Teniendo activa la ventana de Block de Notas con su archivo ejercicio1.html. En
su código editado, el alumno modificará la línea de <TITLE>
<TITLE>Mi Primera Pagina Web</TITLE>
Guardará los cambios y en la ventana del navegador Internet Explorer pulsará el
botón
, para que se cargue nuevamente su página en el navegador y ahora
podamos ver los cambios.
Nótese que lo nuevo será observar la Barra de título del Navegar que ahora
contendrá:
Mi Primera Pagina Web
Dentro de la cabecera de nuestro documento podemos incluir otras etiquetas
adicionales. La etiqueta <META> indica al visor de Internet las palabras clave y
contenido de nuestra página Web. Muchos de los buscadores de páginas Web de
Internet (Yahoo, Lycos, etc.) utilizan el contenido de esta etiqueta para incluir la
página en sus bases de datos. La etiqueta <META> lleva generalmente dos
parámetros, name y content.
Actividad 3
Regresando al Block de Notas, insertará antes de la etiqueta </HEAD>
<META name = "Página de Jose" content = "Mi página personal, Musica y
Peliculas">
Indica al visor el nombre de la página y sus contenidos principales, ó
<META name = "keywords" content = "Jose musica peliculas links españa">
Indica al visor las palabras clave para los buscadores de Internet. En este caso no
veremos cambio alguno en la página web que presenta el navegador ya que esto
sólo representa para los buscadores de información, valores útiles de búsqueda.
Otro uso de la etiqueta <META> es la de indicar documentos con "refresco
automático". Si se indica un URL se sustituirá el documento por el indicado una
vez transcurridos el número de segundos especificados. Si no se incluye ninguna
27
URL se volverá a cargar en el visor el documento en uso transcurridos los
segundos indicados. Esto es útil para páginas que cambian de contenido con
mucha frecuencia o para redireccionar a la persona que visita nuestra página Web
a una nueva dirección donde se encuentra una versión actualizada de nuestra
página Web.
Ejemplo:
<META http-equiv= "refresh" content = "15;URL=http://www.yahoo.com.mx">
Transcurridos 15 segundos se accederá a la página Web de Yahoo en México.
Una etiqueta adicional, <BASE> indica la localización de los archivos, gráficos,
sonidos, etc. a los que se hace referencia en nuestra página Web. Si no se incluye
esta etiqueta el visor entiende que dichos elementos se encuentran en el mismo
lugar donde se encuentra nuestra página Web.
Ejemplo:
<BASE href = "http://www.buap.mx/carmen/">
Lección 2
Duración: 100 minutos
Objetivo
El alumno agregará fondos a su Página Web e identificará las etiquetas y los
diferentes caracteres a emplear.
Contenido
1. Cuerpo del documento
1.1
Fondo
1.1.1 Imagen
1.1.2 Color
1.2
Juego de caracteres del documento
Conceptos
Juego de Caracteres. Son formas de representar caracteres especiales usando
solamente el código ASCII de siete bits.
4.
Cuerpo del documento
4.1
Fondo
La etiqueta <BODY></BODY> indica el inicio y final de nuestra página Web. Será
entre el inicio y el final de esta etiqueta donde pongamos los contenidos de
28
nuestra página, textos, gráficos, enlaces, etc. Esta etiqueta tiene una serie de
parámetros opcionales que nos permiten indicar la "apariencia" global del
documento:
background= "nombre de archivo gráfico"
Indica el nombre de un archivo gráfico que servirá como "fondo" de nuestra
página. Si la imagen no rellena todo el fondo del documento, ésta será
reproducida tantas veces como sea necesario.
bgcolor = "código de color"
Indica un color para el fondo de nuestro documento. Se ignora si se ha usado el
parámetro background.
text = "código de color"
Indica un color para el texto que incluyamos en nuestro documento. Por defecto es
negro.
link = "código de color"
Indica el color de los textos que dan acceso a una liga (Hyperenlace). Por defecto
es azul.
vlink = "código de color"
Indica el color de los textos que dan acceso a una liga (Hyperenlace) que ya
hemos visitado con nuestro visor. Por defecto es púrpura.
El código de color es un número compuesto por tres pares de cifras
hexadecimales que indican la proporción de los colores "primarios", rojo, verde y
azul. El código de color se antecede del símbolo #. Por ejemplo: #00FF00 que
corresponde al color verde.
Ejemplos:
#000000
#FF0000
#00FF00
#0000FF
#FFFFFF
Color Negro
Color Rojo
Color Verde
Color Azul
Color Blanco
El primer par de cifras indican la proporción de color Rojo, el segundo par de cifras
la proporción de color Verde y las dos últimas la proporción de color Azul. Cada
29
par de cifras hexadecimales nos permiten un rango de 0 a 255. Combinando las
proporciones de cada color primario obtendremos diferentes colores.
De cualquier forma la mayoría de los editores de HTML nos permiten obtener el
código de color correspondiente escogiendo directamente el color de una paleta.
Nota. Ya que usted ha adquirido un poco de experiencia en el manejo de los
archivos, por lo tanto, de ahora en adelante sólo se le indicará que cambios hacer
dentro del cuerpo de la página Web, omitiendo detalles de minimizar, guardar, etc.
Actividad 1
4.1.1 Imagen como fondo
El alumno entrará al Block de Notas y abrirá el archivo ejercicio1.html.
Modificará la línea de código que corresponde a la etiqueta BODY de la
siguiente manera guardando los cambios:
<BODY background= "fondo.gif">
donde fondo.gif es un archivo de imagen previamente guardado. Los
navegadores pueden reproducir bien dos formatos de archivos: JPG y GIF.
Restaurará el navegador Internet Explorer y abrirá su archivo para visualizar
los cambios después de actualizar. El cambio que observaremos es la imagen
que presenta el fondo.
4.1.2 Color como fondo
En el Block de Notas, el alumno modificará la línea de código que corresponde
a la etiqueta BODY de la siguiente manera.
<BODY bgcolor = "#FF00FF">
Visualizará los cambios en el explorador. El cambio que observaremos es el
color que presenta el fondo, magenta.
30
Color del texto
Para indicar el color del texto a todo el cuerpo de la página, el alumno
modificará la línea de código que corresponde a la etiqueta BODY de la
siguiente manera:
<BODY bgcolor = "#FF00FF" text = "#00FF00">
Visualizará los cambios en el explorador. El cambio que observaremos es el
color del texto, verde.
4.2 Juego de caracteres del Documento
Todos los visores de páginas Web actuales soportan todos los caracteres
gráficos del la especificación ISO 8859-1, que permiten escribir textos en la
mayoría de los países occidentales.
De cualquier forma y como muchos sistemas tienen distintos juegos de
caracteres ASCII, se han definido dos formas de representar caracteres
especiales usando solamente el código ASCII de 7 bits. Para hacer referencia
a estos caracteres se les asigna un código numérico o un nombre de
"entidad". Asimismo hay caracteres que se utilizan para las etiquetas de
HTML, por ejemplo < y >. Estos caracteres pueden ser representados por un
código numérico o una entidad cuando deseemos que aparezcan en el
documento "tal cual".
Las entidades comienzan por el símbolo & (ampersand) y terminan con el
símbolo ; (punto y coma). A continuación veamos una tabla con las principales
entidades:
Carácter Código Entidad Carácter Código Entidad
!
!
--
"
"
--
#
#
--
$
$
--
%
%
--
&
&
--
'
'
--
(
(
--
)
)
--
*
*
--
+
+
--
,
,
--
-
-
--
.
.
--
/
/
--
:
:
--
;
&#59;
--
<
<
--
=
=
--
>
>
--
?
?
--
@
@
--
[
[
--
\
\
--
31
]
]
--
^
^
--
_
_
--
`
`
--
{
{ --
|
| --
}
} --
~
~ --
  nbsp
¡
¡ iexcl
¢
¢ cent
£
£ pound
¤
¤ curren
¥
¥ yen
¦
¦ brvbar
§
§ sect
¨
¨ uml
©
© copy
ª
ª ordf
«
« laquo
¬
¬ not
®
® reg
¯
¯ macr
°
° deg
±
± plusmn
²
² sup2
³
³ sup3
´
´ acute
µ
µ micro
¶
¶ para
·
· middot
¸
¸ cedil
¹
¹ sup1
º
º ordm
»
» raquo
¼
¼ frac14
½
½ frac12
¾
¾ frac34
¿
¿ iquest
À
À Agrave
Á
Á Aacute
Â
 Acirc
Ã
à Atilde
Ä
Ä Auml
Å
Å Aring
Æ
Æ AElig
Ç
Ç Ccedil
È
È Egrave
É
É Eacute
Ê
Ê Ecirc
Ë
Ë Euml
Ì
Ì Igrave
Í
Í Iacute
Î
Î Icirc
Ï
Ï Iuml
Ð
Ð ETH
Ñ
Ñ Ntilde
Ò
Ò Ograve Ó
Ó Oacute
Ô
Ô Ocirc
Õ
Õ Otilde
Ö
Ö Ouml
×
× times
Ø
Ø Oslash
Ù
Ù Ugrave
Ú
Ú Uacute
Û
Û Ucirc
Ü
Ü Uuml
Ý
Ý Yacute
Þ
Þ THORN ß
­ shy
ß szlig
32
à
à agrave
á
á aacute
â
â acirc
ã
ã atilde
ä
ä auml
å
å aring
Æ
æ aelig
ç
ç ccedil
è
è egrave
é
é eacute
ê
ê ecirc
ë
ë euml
ì
ì igrave
í
í iacute
î
î icirc
ï
ï iuml
Ð
ð eth
ñ
ñ ntilde
Ò
ò ograve
ó
ó oacute
Ô
ô ocirc
õ
õ otilde
Ö
ö ouml
÷
÷ divide
Ø
ø Oslash
ù
ù ugrave
ú
ú Uacute
û
û ucirc
ü
ü uuml
ý
ý yacute
Þ
þ thorn
ÿ
ÿ yuml
Por lo tanto la palabra página la podríamos escribir como:
página
página
página
Actividad 2
Teniendo activada la ventana de Block de Notas, después de la línea:
HOLA A TODOS!!!,
escriba:
página página
Para lo cual el alumno se auxiliará de la lista de caracteres.
Visualizará los cambios en el explorador.
Para poder bajar las palabras página, escribir al final de HOLA A TODOS!!! y de la
palabra página, la etiqueta <p> o <br>.
33
Visualizará los cambios en el explorador.
Ahora observará la interpretación del navegador:
página
página
Nota:
<p> se usa para separar un párrafo de otro
<br> es para indicar un “enter”
<pre> y </pre> es una etiqueta que respeta tabulaciones, espacios y “enter”
escritos en el Block de Notas.
Es por ello que si deseamos que cualquier visor de páginas Web pueda visualizar
las letras acentuadas de nuestro documento debemos utilizar sus
correspondientes entidades o códigos para representarlas.
Lección 3.
Duración: 100 minutos
Objetivo
El alumno insertará espacios, saltos de línea y atributos al texto de la Página Web.
Contenido
3.1
3.2
3.3
3.4
Espaciados y saltos de línea
Líneas
Encabezados
Atributos de texto
Conceptos
Atributos.
Son los estilos y alineaciones de un texto
4.3
Espaciados y saltos de línea
En HTML solo se reconoce un espacio entre palabra y palabra, el resto de los
espacios serán ignorados por el visor.
Ejemplo
Se verá como
34
Esto
es
una
frase
Esto es una frase
Actividad 1
El alumno abrirá un nuevo archivo en el Block de Notas y escribirá la estructura
básica del documento HTML y dentro del cuerpo de la página Web lo siguiente:
Esto es
que no se
espacios.
una
frase
respetarán
note
los
Guardar el archivo con el nombre de ejercicio2.html y visualizará estos en el
explorador. Ahora observarás la interpretación del navegador, omitirá todos los
espacios tabuladores y saltos de línea, sustituyéndolos por sólo un espacio.
Asimismo tampoco se respetan las tabulaciones, retornos de carro etc. Para ello
existen una serie de etiquetas que indican estos códigos.
La etiqueta <PRE></PRE> obliga al visor a visualizar el texto tal y como ha sido
escrito, respetando tabulaciones, espacios, retornos de carro, etc..
Ejemplo
Se verá como
<PRE>
Este texto
ha sido
preformateado .
Este texto
ha sido
preformateado .
</PRE>
Restaurado el Block de Notas el alumno escribirá dentro del cuerpo:
<PRE>
Este texto
ha sido
preformateado .
</PRE>
Guardará los cambios y visualizará en el Explorador. Ahora observará la
interpretación del navegador, respetará todos los espacios tabuladores y saltos de
línea.
Para indicar un salto de línea se utiliza la etiqueta <BR> y para un cambio de
párrafo (deja una línea en blanco en medio) se utiliza la etiqueta <P>.
35
Ejemplo
Se vera como
Este texto tiene<BR>saltos de linea y <P> de párrafo.
Este texto tiene
saltos de línea y
de párrafo.
El profesor realizará un ejercicio en donde utilice el <BR> y <P>, que los alumnos
visualicen en el Explorador.
La etiqueta <P> puede usarse también como etiqueta "cerrada" <P></P>
indicando de esta manera los atributos de un párrafo en concreto. Cuando se usa
de esta manera tiene el parámetro align que indica al visor la forma de "justificar"
el párrafo. Los valores posibles de este parámetro son LEFT, RIGHT y CENTER,
estando aun en estudio el valor JUSTIFY.
Ejemplo
Se vera como
<P Align=right>Este es un ejemplo de un
párrafo de texto justificado a la derecha.</P>
Este es un ejemplo de párrafo
de texto justificado a la derecha
<P Align=center>Este es un ejemplo de párrafo
de texto centrado.</P>
Este es un ejemplo de párrafo
de texto centrado
En el Block de Notas el alumno escribirá:
<P Align=right>Este es un ejemplo de un párrafo de texto justificado a la
derecha.</P>
Guardará y visualizará en el Explorador.
Ahora observará la interpretación del navegador, alineará el párrafo a la derecha.
Nota: Los alumnos practicarán diferentes alineaciones.
Actividad 2
4.4
Líneas
La etiqueta <HR> muestra una línea horizontal de tamaño determinable. Tiene los
siguientes parámetros opcionales:
align = posición
36
Alinea la línea a la izquierda (left), a la derecha (right) o al centro (center).
noshade
No muestra sombra, evitando el efecto en tres dimensiones.
size = número
Indica el grosor de la línea en pixeles.
width = num / %
Indica el ancho de la línea en tanto por ciento en función del ancho de la
ventana del visor. También se puede especificar un número que indicaría el
ancho de la línea en pixeles.
Ejemplo:
<HR align= center size= 20 width= 50%>
La etiqueta <HR> sin ningún parámetro mostraría una línea horizontal que
ocuparía todo el ancho de la página.
En el Block de Notas el alumno escribirá:
<HR align= center size= 20 width= 50%>
Guardará y visualizará en el Explorador.
Ahora observará la interpretación del navegador.
Actividad 3
4.5
Encabezados (Cabeceras)
En un documento de HTML se pueden indicar seis tipos de cabeceras (tamaños
de letra) por medio de las etiquetas <H1><H2><H3><H4><H5> y <H6>.
El texto que escribamos entre el inicio y el fin de la etiqueta será el afectado por
las cabecera.
En el Block de Notas el alumno escribirá:
37
Ejemplo
Se vería como
<H1>Texto de Prueba</H1> Texto de prueba
<H2>Texto de Prueba</H2> Texto de Prueba
<H3>Texto de Prueba</H3> Texto de Prueba
<H4>Texto de Prueba</H4> Texto de Prueba
<H5>Texto de Prueba</H5> Texto de Prueba
<H6>Texto de Prueba</H6> Texto de Prueba
Guardará y visualizará en el Explorador observando la interpretación del
navegador.
Los textos marcados como "cabeceras" provocan automáticamente un retorno de
carro sin necesidad de incluir la etiqueta <BR>. Por ejemplo:
En el Block de Notas el alumno escribirá sólo la primera columna
Ejemplo
Se vería como
<H3>Página
personal.
de
Jose</H3>Esta
es
mi
página Página de Jose
Esta
es
mi
personal
página
Guardará y visualizará en el Explorador la interpretación del navegador.
Actividad 4
4.6
Atributos del Texto
Para indicar atributos del texto (negrilla, subrayado, etc.) tenemos varias etiquetas.
Algunas de ellas no son reconocidas por determinados visores de Internet, es por
ello que según el visor que esté utilizando, verá el resultado correctamente o no.
Atributo
Etiqueta
Ejemplo
Resultado
Negrita
<B></B>
<B>Texto de prueba</B>
Texto de prueba
Cursiva
<I></I>
<I>Texto de prueba</I>
Texto de prueba
38
Teletype
<TT></TT>
<TT>Texto de prueba</TT>
Texto de prueba
Subrayado
<U></U>
<U>Texto de prueba</U>
Texto de prueba
Tachado
<S></S>
<S>Texto de prueba</S>
Texto de prueba
Parpadeo
<BLINK></BLINK>
<BLINK>Texto de prueba</BLINK>
Texto de prueba
Superindice <SUP></SUP>
<SUP>Texto de prueba</SUP>
Texto de prueba
Subindice
<SUB></SUB>
<SUB>Texto de prueba</SUB>
Centrado
<CENTER></CENTER> <CENTER>Texto de prueba</CENTER> Texto de prueba
Texto de prueba
Dentro del Block de Notas, el alumno sólo escribirá la tercera columna de la tabla
anterior, guardará y visualizará en el Explorador la interpretación del navegador.
Lección 4
Duración: 100 minutos
Objetivo
El alumno elaborará un texto con diferentes fuentes incluyendo una lista de datos
Contenido
4.1 Fuente para texto (Font)
4.1.1 Tamaño, color, tipo
4.2 Lista de elementos
4.2.1 Tipos de lista
4.7
Fuente para texto
4.7.1 Tamaño, color, tipo
La etiqueta <FONT></FONT> nos permite variar el tamaño, el color, y el tipo de
letra de un texto determinado. Utiliza para ello los parámetros size, bgcolor y
face, los cuales se describen a continuación:
size = valor
Da al texto un tamaño en puntos determinado.
size = +/- valor
Da al texto un tamaño tantas veces superior (+) o inferior (-) como indique el
valor.
color = "código de color"
39
Escribe el texto en el color cuyo código se especifica.
face = "nombre de font"
Escribe el texto en el tipo de letra especificado. Si este tipo de letra no
existe en la computadora que "lee" la página se usara el font
predeterminado del navegador.
Actividad 1
Dentro del Block de Notas del Ejercicio2.html, el alumno escribirá sólo la primera
columna. Guardar y visualizar en el Explorador la interpretación del navegador.
Ejemplo
Se vería como
<FONT size = +2 color = "#FF0000 face = "Arial"> Texto
de prueba </FONT>
Texto
prueba
de
Existen otras etiquetas que realizan las mismas operaciones que las antes vistas
en los atributos del texto.
Etiqueta
Hace lo mismo que
<STRONG></STRONG> <B></B>
<CITE></CITE>
<I></I>
<STRIKE></STRIKE>
<S></S>
El alumno escribirá dentro del Block de Notas.
<P>
<STRONG> HOLA </STRONG> <BR>
<B> HOLA</B>
Visualizar en el Explorador.
Donde el efecto será el mismo con <Strong > o <B>.
Regresará el alumno al Block de Notas para practicar con los otros ejemplos.
Para incluir comentarios en la página Web se utiliza la etiqueta <!-- -->.
40
Dentro del Block de Notas, el alumno escribirá
<!-- Esto es un comentario sobre mi página Web -->
Los comentarios no serán mostrados por el visor y son útiles para realizar
anotaciones en el documento HTML que nos indiquen lo que estamos haciendo en
una determinada parte del documento.
4.8
Listas de elementos
4.8.1 Tipos de listas
Existen tres tipos de listas, numeradas, sin numerar y de definición. Las listas
numeradas representarán los elementos de la lista numerando cada uno de ellos
según el lugar que ocupan en la lista. Para este tipo de lista se utiliza la etiqueta
<OL></OL>. Cada uno de los elementos de la lista irá precedido de la etiqueta
<LI>. La etiqueta <OL> puede llevar los siguientes parámetros:
start = num
Indica que número será el primero de la lista. Si no se indica se entiende
que empezará por el número 1.
type = tipo
Indica el tipo de numeración utilizada. Si no se indica se entiende que será
una lista ordenada numéricamente. Los tipos posibles son :
1 = Numéricamente. (1,2,3,4,... etc.)
a = Letras minúsculas. (a,b,c,d,... etc.)
A = Letras mayúsculas. (A,B,C,D,... etc.)
i = Números romanos en minúsculas. (i.ii,iii,iv,v,... etc.)
I = Números romanos en mayúsculas. (I,II,III,IV,V,... etc.)
Actividad 2
Dentro del Block de Notas, el alumno escribirá sólo la primera columna
Ejemplo
<OL>
<LI>España
<LI>Francia
<LI>Italia
<LI>Portugal
Resultado
1.
2.
3.
4.
España
Francia
Italia
Portugal
41
</OL>
<OL type = A >
<LI>España
<LI>Francia
<LI>Italia
<LI>Portugal
</OL>
A.
B.
C.
D.
España
Francia
Italia
Portugal
Las listas sin numerar representan los elementos de la lista con una viñeta o
marca que antecede a cada uno de ellos. Se utiliza la etiqueta <UL></UL> para
delimitar la lista, y <LI> para indicar cada uno de los elementos.
La etiqueta <UL> puede contener el parámetro type que indica la forma de la
viñeta o marca que antecede a cada elemento de la lista. Los valores de type
pueden ser disk, circle o square, con lo que la viñeta o marca puede ser un
disco, un circulo o un cuadrado.
Dentro del Block de Notas, el alumno escribirá sólo la primera columna
Ejemplo
<UL type = disk >
<LI>España
<LI>Francia
<LI>Italia
<LI>Portugal
</UL>
<UL type = square>
<LI>España
<LI>Francia
<LI>Italia
<LI>Portugal
</UL>
Resultado
•
•
•
•
España
Francia
Italia
Portugal
ƒ
ƒ
ƒ
ƒ
España
Francia
Italia
Portugal
Las listas de definición muestran los elementos tipo Diccionario, o sea, término y
definición. Se utiliza para ellas la etiqueta <DL></DL>. El elemento marcado como
término se antecede de la etiqueta <DT>, el marcado como definición se antecede
de la etiqueta <DD>.
42
Dentro del Block de Notas, el alumno escribirá sólo la primera columna.
Ejemplo
Resultado
<DL>
WWW
<DT>WWW
<DD>Abreviatura de World Wide Web
Abreviatura de World Wide Web
FTP
<DT>FTP
Abreviatura de File Transfer Protocol
<DD>Abreviatura de File Transfer Protocol
<DT>IRC
IRC
Abreviatura de Internet Relay Chat
<DD>Abreviatura de Internet Relay Chat
</DL>
Todas las anotaciones que haya realizado las deberá visualizar en el Explorador
(actualizar).
Existen otros dos tipos de listas menos comunes. Las listas de Menú o Directorio
se comportan igual que las listas sin numerar. La lista de Menú utiliza la etiqueta
<MENU></MENU> y los elementos se anteceden de <LI> El resultado es una lista
sin numerar más "compacta" es decir, con menos espacio interlineal entre los
elementos.
La lista de Directorio utiliza la etiqueta <DIR></DIR> y los elementos se anteceden
de <LI>. Los elementos tienen un límite de 20 caracteres.
Todas las listas se pueden "anidar", es decir incluir una lista dentro de otra, con lo
que se consigue una estructura tipo "índice de materias".
El alumno regresará al Block de Notas, para que escriba el siguiente ejemplo, sólo
la primera columna.
Ejemplo
<UL type= disk>
<LI>Buscadores
<UL>
<LI>Yahoo
<LI>Ole
<LI>Lycos
</UL>
<LI>Links
<UL>
<LI>Microsoft
<LI>IBM
</UL>
</UL>
Resultado
•
•
Buscadores
o Yahoo
o Ole
o Lycos
Links
o Microsoft
o IBM
43
Lección 5
Duración: 100 minutos
Objetivo
El alumno navegará dentro de su página Web y hacia fuera por medio de Ligas o
Hiperenlaces.
Contenido
5.1Imágenes
5.5.1 Formatos
5.2 Ligas o hiperenlaces
Conceptos
Ligas o hiperenlaces.
Es un elemento de la página que hace que el navegador acceda a otro recurso,
otra página Web, un archivo, etc.
4.9
Imágenes
Hasta el momento hemos visto como se puede escribir texto en una página Web,
así como sus posibles formatos. Para incluir una imagen en nuestra página Web
utilizaremos la etiqueta <IMG>.
4.9.1 Formatos
Hay dos formatos de imágenes que todos los navegadores modernos reconocen:
las imágenes GIF y JPG. Cualquier otro tipo de archivo gráfico o de imagen (BMP,
PCX, CDR, etc...) no será mostrado por el visor, a no ser que disponga de un
programa externo que permita su visualización.
La etiqueta <IMG> tiene varios parámetros:
src = "imagen"
Indica el nombre del archivo gráfico a mostrar.
alt = "Texto"
Mostrará el texto indicado en el caso de que el navegador utilizado para ver
la página no sea capaz de visualizar la imagen.
lowsrc ="imagen"
Muestra una segunda imagen "superpuesta" sobre la primera una vez se
carga la página. Este parámetro no es reconocido por la totalidad de los
44
navegadores ya que esta en estudio su aplicación, así que en la mayoría de
los casos será ignorado mostrándose solo la primera imagen (src). En
Netscape muestra la imagen indicada por lowsrc en primer lugar, y
posteriormente muestra la imagen indicada por src. Si las imágenes son
iguales pero tienen distinta "resolución" se conseguirá un efecto tipo "Fade"
(descolorido). Si las imágenes son de distinto tamaño la imagen indicada en
src se redimensionará al tamaño indicado por la imagen indicada en
lowsrc
align = TOP / MIDDLE / BOTTOM
Indica como se alineará el texto que siga a la imagen. TOP alinea el texto
con la parte superior de la imagen, MIDDLE con la parte central, y
BOTTOM con la parte inferior.
border = tamaño
Indica el tamaño del "borde" de la imagen. A toda imagen se le asigna un
borde que será visible cuando la imagen forme parte de una liga
(Hyperenlace).
height = tamaño
Indica el alto de la imagen en puntos o en porcentaje. Se usa para variar el
tamaño de la imagen original.
width = tamaño
Indica el ancho de la imagen en puntos o en porcentaje. Se usa para variar
el tamaño de la imagen original.
hspace = margen
Indica el número de espacios horizontales, en puntos, que separarán la
imagen del texto que la siga y la anteceda.
vspace = margen
Indica el número de puntos verticales que separaran la imagen del texto
que le siga y la anteceda.
ismap / usemap
Indica que la imagen es un MAPA. Veremos estos parámetros mas
adelante en este manual.
45
Actividad 1
El alumno abrirá un nuevo archivo en el Block de Notas y escribirá la estructura
básica del documento HTML y dentro del cuerpo de la página Web escribirá sólo
la primera columna
Ejemplo
Se vería como
<IMG src="caution.gif" alt= "Cuidado !!" >
Si el visor no pudiese visualizar el gráfico.....
El alumno guardará el archivo con el nombre ejercicio3.html.
La imagen a mostrar puede encontrase en el mismo lugar (URL) que la página
Web. Si este no fuera el caso, el nombre de la imagen ha de contener la URL
donde se encuentre la imagen.
<IMG src= "http://www.microsoft.com/iexplorer.gif">
Veamos varios ejemplos "jugando" con los tamaños de la imagen, así como
comprobando la alineación de los textos. (Recuerde que en función del visor que
Ud. utilice pueden verse o no los efectos de cada parámetro).
Dentro del cuerpo de la página Web, el alumno escribirá sólo la primera
columna.
Ejemplo
Se vería como
<IMG src="caution.gif"
width=100 >
<IMG src="caution.gif"
height=20 >
46
<IMG src="caution.gif"
align=TOP>Atencion !!!
Atencion !!!
(ARRIBA)
Atencion !!!
(MEDIO)
<IMG src="caution.gif"
align=MIDDLE>Atencion !!!
<IMG src="caution.gif"
align=BOTTOM>Atencion !!!
Atencion !!!
Tenga en cuenta<IMG src="caution.gif"
hspace=20>esta indicacion.
Tenga en cuenta
esta indicacion
(SEPARACIÓN HORIZONTAL)
Tenga en cuenta<IMG src="caution.gif"
vspace=40>esta indicacion.
Tenga en cuenta
esta indicacion.
(SEPARACIÓN VERTICAL)
Ejercicios sugeridos
1. Defina una lista numerada con los nombres de sus compañeros.
2. Defina una lista no numerada con los nombres de sus compañeros.
3. Haga una lista numerada anidando una lista no numerada con los medios
de transporte con ejemplos.
4. Haga un glosario donde defina los animales domésticos: perro, gato y pez.
5. Inserta una línea horizontal de separación con longitud de 75% y grosor 10.
6. Inserte en la página HTML una imagen, cualquiera (JPG ó GIF) y céntrela.
47
4.10
Ligas o Hyperenlaces
La característica principal de una página Web es que podemos incluir Ligas ó
Hyperenlaces. Un Hyperenlace es un elemento de la página que hace que el
navegador acceda a otro recurso, otra página Web, un archivo, etc...
Para incluir un Hyperenlace se utiliza la etiqueta <A></A>. El texto o imagen que
se encuentre dentro de los límites de esta etiqueta será sensible, esto quiere decir
que si pulsamos con el ratón sobre él, se realizará la función de hyperenlace
indicada por la etiqueta <A></A>. Si el Hyperenlace esta indicado por un texto,
este aparecerá subrayado y en distinto color, si se trata de una imagen, esta
aparecerá con un borde rodeándola.
Esta etiqueta tiene el parámetro href que indica el lugar a donde nos llevará el
Hyperenlace si lo pulsamos.
Actividad 2
Dentro del cuerpo de la página Web, el alumno escribirá sólo la primera columna
Ejemplo
Se veria como
<A href = "http://www.yahoo.com/"> Pulse para ir a la Pulse para ir a la página
página de Yahoo</A>
de Yahoo
Si situamos el ratón encima de la frase y pulsamos, el navegador accederá a la
página Web indicada por el parámetro href, es decir, accederá a la página situada
en http://www.yahoo.com/
Lo mismo podríamos hacer con un gráfico.
Dentro del cuerpo de la página Web, el alumno escribirá sólo la primera columna
Ejemplo
Se vería como
Para
buscar
en
Internet
:
<A href = "http://www.yahoo.com/" > Para buscar en Internet :
<IMG src = "yahoo.gif"></A>
Pulsando sobre la imagen
http://www.yahoo.com/.
se
accedería
a
la
página
situada
en
Una liga también puede llevarnos a una zona de nuestra página. Para ello
debemos marcar en nuestra página las diferentes secciones en las que se divide.
Lo haremos con el parámetro name.
48
Actividad 3
Dentro del Block de Notas, el alumno escribirá:
<A name = "seccion1"></A>
Esta instrucción marca el inicio de una sección dentro de nuestra página. La
sección se llamará seccion1.
Para hacer un enlace a esta sección dentro de nuestra página lo haríamos de la
siguiente forma:
<A href = "#seccion1">Primera Parte</A>
Una liga puede hacerse a cualquier tipo de archivo. Con las etiquetas anteriores
hemos visto como hacer ligas a páginas Web o secciones dentro de una página
web, pero podríamos hacer una liga a un grupo de noticias, o a otro servicio de
Internet.
Ejemplo:
<A href = "news://www.buap.mx/news">Ultimas noticias</A>
Asimismo podemos hacer que la liga dé como resultado el envío de un correo
electrónico a una dirección de correo determinada.
Actividad 4
Dentro del Block de Notas, el alumno escribirá:
<A href = "mailto: [email protected]">Envíame tus sugerencias</A>
También podemos realizar una liga a un archivo cualquiera. En este caso el
navegador intentará "ejecutar" el archivo, y si no puede hacerlo nos preguntará si
deseamos grabarlo en nuestra computadora. Esta es una forma sencilla de
permitir a los visitantes de nuestra página copiar archivos a su computadora.
Ejemplo:
<A href = "manual.zip">Pulsa aqui para llevarte una copia del manual.</A>
49
Pulsa aquí para llevarte una copia del manual.
Lección 6
Duración: 100 minutos
Objetivo
El alumno elaborará diferentes formatos de tablas y pondrá efectos a los títulos.
Así mismo realizará la subdivisión de la pantalla del visor en diferentes ventanas.
Contenido:
6.1 Tablas
6.1.1 Formatos
6.2 Extensiones de HTML
6.2.1 Marquee
6.3 Frames
Conceptos
Marquee.
Crea una marquesina con un texto en su interior que es capaz de desplazarse
Frame.
Es la división de la pantalla del visor en diferentes ventanas, cada una de ellas se
podrá manipular por separado permitiendo mostrar una página web en cada
ventana.
4.11 Tablas
Las tablas nos permiten representar cualquier elemento de nuestra página (texto,
listas, imágenes, etc...) en diferentes filas y columnas separadas entre sí. Es una
herramienta muy útil para "ordenar" contenidos de distintas partes de nuestra
página. La tabla se define mediante la etiqueta <TABLE></TABLE>. Los
parámetros opcionales de esta etiqueta son:
border = num.
Indica el ancho del borde de la tabla en puntos.
cellspacing = num
Indica el espacio en puntos que separa las celdas que están dentro de la
tabla.
50
cellpadding = num
Indica el espacio en puntos que separa el borde de cada celda y el
contenido de esta.
width = num ó %
Indica la anchura de la tabla en puntos o en porcentaje en función del
ancho de la ventana del visor. Si no se indica este parámetro, el ancho se
adecuará al tamaño de los contenidos de las celdas.
height = num ó %
Indica la altura de la tabla en puntos o en porcentaje en función del alto de
la ventana del visor. Si no se indica este parámetro, la altura se adecuará a
la altura de los contenidos de las celdas.
bgcolor = código de color
Especifica el color de fondo de toda la Tabla.
Para definir las celdas que componen la tabla se utilizan las etiquetas <TD>
y <TH>. <TD> indica una celda normal, y <TH> indica una celda de
"cabecera", es decir, el contenido será resaltado en negrita y en un tamaño
ligeramente superior al normal. Los parámetros opcionales de ambas
etiquetas son:
align = LEFT / CENTER / RIGHT / JUSTIFY
Indica como se debe alinear el contenido de la celda, a la izquierda (LEFT),
a la derecha (RIGHT), centrado (CENTER) o justificado (JUSTIFY).
valign = TOP / MIDDLE / BOTTOM
Indica la alineación vertical del contenido de la celda, en la parte superior
(TOP), en la inferior (BOTTOM), o en el centro (MIDDLE).
rowspan = num
Indica el número de filas que ocupará la celda. Por defecto ocupa una sola
fila.
colspan = num
Indica el número de columnas que ocupará la celda. Por defecto ocupa una
sola columna.
width = num ó %
Indica la anchura de la columna en puntos o en porcentaje en función del
ancho de la ventana del visor. Si no se indica este parámetro, el ancho se
adecuará al tamaño de los contenidos. Este parámetro sólo funciona en los
navegadores modernos.
bgcolor = código de color
Especifica el color de fondo del elemento de la Tabla.
51
Para indicar que acaba una fila de celdas se utiliza la etiqueta <TR>. A
continuación mostraremos un ejemplo de una tabla que contiene solo texto. Como
se indicó anteriormente el contenido de las celdas puede ser cualquier elemento
de HTML, un texto, una imagen, una liga, una lista, etc...
Actividad 1
Dentro del Block de Notas, el alumno escribirá:
Ejemplo
<TABLE border = 4 cellspacing = 4 cellpadding = 4 width =80%>
<TH align = center>Buscadores
<TH align = center colspan = 2>Otros Links
<TR>
<TD align = LEFT>Yahoo
<TD align = LEFT>Microsoft
<TD align = LEFT>IBM
<TR>
<TD align = LEFT>Infoseek
<TD align = LEFT>Apple
<TD align = LEFT>Digital
</TABLE>
Se vería como
Buscadores
Otros Links
Yahoo
Microsoft
IBM
Infoseek
Apple
Digital
Las etiquetas <TD> y <TH> son cerradas según el estándar de HTML, es decir
que un elemento de tabla <TD> debería cerrarse con un </TD>, sin embargo los
visores asumen que un elemento de la tabla, queda automáticamente "cerrado"
cuando se "abre" el siguiente.
4.12
Extensiones de HTML
Netscape y Microsoft han añadido al estándar de HTML diversas etiquetas para
hacer mas atractiva la visualización de la página Web.
4.12.1
Marquee
La etiqueta <MARQUEE> </MARQUEE> crea una marquesina con un texto en su
interior que se desplaza. Funciona únicamente con MS-Internet Explorer. Sus
parámetros son los siguientes:
52
align = top/middle/bottom
Indica si el texto del interior de la marquesina se alinea en la zona alta (top),
en la baja (bottom) o en el centro (middle) de la misma.
bgcolor = “código de color”
Indica el color del fondo de la marquesina.
direction = left/right
Indica hacia que lugar se desplaza el texto, hacia la izquierda (left) o hacia
la derecha (right)
height = num ó %
Indica la altura de la marquesina en puntos o porcentaje en función de la
ventana del visor.
width = num ó %
Indica el ancho de la marquesina en puntos o porcentaje en función de la
ventana del visor.
loop = num/infinite
Indica el número de veces que se desplazará el texto por la marquesina. Si
se indica infinite, se desplazará indefinidamente.
scrolldelay = num
Indica el número de milisegundos que tarda en rescribirse el texto por la
marquesina, a mayor número menor desplazamiento del texto.
Actividad 2
Dentro del Block de Notas, el alumno escribirá:
<MARQUEE bgcolor=”#FFFFFF” width=50% scrolldelay=0> Bienvenido a mi
página personal en Internet
</MARQUEE>
Visualizar los cambios en el Explorador y cerrar el archivo del Block de Notas.
5.
Frames
Los frames es una técnica para subdividir la pantalla del visor en diferentes
ventanas. Cada una de estas ventanas se podrá manipular por separado,
permitiéndonos mostrar en cada una de ellas una página Web diferente. Esto es
53
muy útil para, por ejemplo, mostrar permanentemente en una ventana los
diferentes contenidos de nuestra página, y en otra ventana mostrar el contenido
seleccionado.
Para definir las diferentes subventanas o frames se utilizan las etiquetas
<FRAMESET> </FRAMESET> y <FRAME>. La etiqueta <FRAMESET> indica
como se va a dividir la ventana principal. Pueden incluirse varias etiquetas
<FRAMESET> anidadas con el objeto de subdividir una subdivisión.
Los parámetros de <FRAMESET> son rows y cols en función de si la división de
la pantalla se realiza por filas (rows) o columnas (cols). Los parámetros rows y
cols se acompañan de un grupo de números que indican en puntos o en
porcentaje el tamaño de cada una de las subventanas. En caso de utilizar rows
los tamaños de las subventanas se entienden indicados de arriba abajo, es decir
el primer valor será el asignado ala ventana superior, el segundo la ventana
inmediatamente inferior, etc. En el caso de cols los tamaños se aplican de
izquierda a derecha.
Ejemplo
Resultado
<FRAMESET rows=”25%,50%,25%”>
Crea tres subventanas horizontales, la
primera ocupará un 25% de la ventana
principal, la segunda un 50% y la
tercera un 25%.
<FRAMESET cols=”120,*,100”>
Crea tres subventanas verticales, la
primera y la tercera tendrán un “ancho”
fijo
de
120
y
100
puntos
respectivamente. La segunda ocupará
el resto de la ventana principal(*).
<FRAMESET cols = “15%,*”>
<FRAMESET rows = “20%, *”>
En este caso “anidamos” dos etiquetas,
la primera divide la ventana principal en
dos subventanas verticales, la primera
ocupa un 15% de la ventana principal y
la segunda el resto. La segunda
etiqueta vuelve a subdividir la primera
ventana creada anteriormente, pero
esta vez en dos subventanas
horizontales, la superior ocupará un
20% de la subventana y la inferior el
resto.
La etiqueta <FRAME> indica las propiedades de cada subventana.es necesario
indicar una etiqueta <FRAME> para cada subventana creada. Los parámetros de
<FRAME> :
54
name=”nombre”
Indica el nombre por el que nos referiremos a esa subventana.
src=”URL”
La ventana mostrará en principio el contenido del documento HTML que se
indique
marginwidth = num
Indica el margen izquierdo y derecho de la subventana en puntos.
marginheight = num
Indica el margen superior e inferior de la subventana en puntos.
scrolling = “yes / no / auto”
Indica si se aplica una barra de desplazamiento a la subventana en el caso
de que la página que se cargue en ella no quepa en los límites de la
subventana. El valor “yes” muestra siempre la barra de desplazamiento,
“no” no la muestra nunca (la zona de la página que no quepa en la
subventana no la veremos), y “auto” la muestra solo en caso de que sea
necesario para poder ver la página.
noresize
Si se indica este parámetro, el usuario no podrá “redimensionar” las
subventanas con el visor. Un usuario que este viendo una página con
frames puede redimensionarlas seleccionando un borde de la subventana
con el cursor y desplazándolo.
border = num
Indica el “borde” que separará este frame de la siguiente. Si se indica cero
(0) no se mostrará borde entre las frames, consiguiendo un efecto muy
elegante, siempre y cuando el “fondo” de todos los frames sea el mismo, o
sean colores sólidos.
Los visores que no soportan la característica de subventanas, no mostrarán nada
de lo indicado con estas etiquetas. Es por ello que existe una etiqueta llamada
<NOFRAMES> </NOFRAMES> Todo lo indicado entre esta etiqueta será lo que
muestren los visores sin capacidad para visualizar Frames. Los visores que
soporten Frames obviaran las etiquetas incluidas entre <NOFRAMES>
</NOFRAMES>.
Actividad 3
El alumno escribirá en una página Web nueva, lo siguiente:
55
<HTML>
<HEAD>
<TITLE>Página con Frames</TITLE>
</HEAD>
<FRAMESET cols=”40%,*”>
<!--Creo dos subventanas verticales, la de la izquierda ocupa un 40% de la
pantalla, la de la derecha el resto-->
<FRAMESET rows=35%,*”>
<!--Creo dos subventanas horizontales dentro de la subventana izquierda ->
<FRAME name= “ejer1” src= “ejercicio1.html” scrolling= “auto”>
<!-- Llamo a la subventana horizontal superior izquierda con el
nombre
“ejer1” y muestro el documento “ejercicio1.html”-->
<FRAME name= “ejer2” src= “ejercico2.html” scrolling= “auto”>
<!-- Llamo a la subventana horizontal inferior izquierda con el nombre
“ejer2” y muestro el documento “ejercicio2.html”-->
</FRAMESET>
<! --Cierro la definición de las subventanas horizontales de la ventana
izquierda -->
<FRAME name= “ejer3” src= “ejercicio3.html” scrolling= “auto”>
<! –Llamo a la subventana vertical derecha con el nombre de “ejer3” y
muestro el
documento “ejercicio3.html” -->
</FRAMESET>
<! --Cierro la definición de las subventanas verticales -->
</HTML>
Uso de los parámetros target y name.
Nosotros también podemos, dentro de un FRAME, crear un menú a la izquierda y
una ventana más grande a la derecha en donde podemos mostrar páginas HTML.
Actividad 4
El alumno escribirá en una nueva página Web, lo siguiente:
<HTML>
<HEAD>
<TITLE>Página principal de FRAMES</TITLE>
</HEAD>
<FRAMESET cols="20%,*">
<FRAME src="indice.html" scrolling="auto">
<!--Muestro el documento “indice.html”-->
56
<FRAME src="main.html" name="right" scrolling="auto">
<--Muestro el documento a la que se refiere el vínculo -->
</FRAMESET>
</HTML>
El alumno únicamente guardará el archivo con el nombre de frame-target.html.
Nótese que se ha incluido en el Frame (ventana) de la derecha la etiqueta name.
Ahora escribiremos el documento indice. El alumno escribirá en una nueva página
Web, lo siguiente:
<HTML>
<HEAD>
<TITLE>Menu</TITLE>
</HEAD>
<BODY>
<A href="ejercicio1.html" target="right" >Ejercicio número 1</A><P>
<A href="ejercicio2.html" target="right">Ejercicio número 2</A><P>
<A href="ejercicio3.html" target="right">Ejercicio número 3</A><P>
</BODY>
</HTML>
El alumno únicamente guardará el archivo con el nombre de indice.html.
En la ventana del navegador Internet Explorer abriremos el archivo frametarget.html observando los resultados.
Lección 7
Duración: 100 minutos
Objetivo
Para que el alumno realice una retroalimentación de los conceptos vistos,
elaborará una página Web (el profesor se pondrá de acuerdo con sus alumnos)
6. Trabajo final
57