Comp VI Alumno 2005

Benemrita Universidad Autnoma de
Puebla
Direccin General de Enseanza Media Superior
Computacin VI
GUA PARA EL ALUMNO
Academia General Computacin

2005
Computacin VI
Gua para el alumno del Bachillerato Universitario, fue elaborado por la
Vicerrectora de Docencia de la Benemrita Universidad Autnoma de Puebla.
D.R. Universidad Autnoma de Puebla, 2005

Calle 4 sur No. 104, Centro Histrico
C.P. 72000 Puebla, Pue.
Este libro electrnico ha sido elaborado por la Universidad Autnoma de Puebla,
como parte de las acciones del fortalecimiento del Bachillerato Universitario. La
edicin de este libro no tiene carcter 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:
Vicerrectora de Docencia
Av. Juan de Palafox y Mendoza No. 219
Centro Histrico, C.P. 72000, Puebla, Pue.
Telfono 2295500, extensin 5602
Correo electrnico: vdocencia@siu.buap.mx
DIRECTORIO
Mtro. Enrique Agera Ibez
Rector
M.A. Armando Valerdi Rojas
Secretario General
M.A. Jos Alfonso Esparza Ortiz
Tesorero General
M.A. Oscar Gilbn Rosete
Contralor General
Mtro. Jos Jaime Vzquez Lpez
Vicerrector de Docencia
Lic. Georgina Maldonado Lima
Directora de Educacin Media Superior
Presentacin
La Benemrita Universidad Autnoma de Puebla ha producido las Guas para el
maestro y para el alumno como parte de las acciones para elevar la calidad
acadmica 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
produccin de estas Guas 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 ms exitosas en materia de
superacin acadmica. Se han incorporado tambin a estos textos el trabajo de
profesores y especialistas de otras instituciones educativas, con quienes nuestros
maestros mantuvieron un intenso v fructfero trabajo.
La Vicerrectora de Docencia reconoce el empeo que ha tenido, para la
produccin de esta Gua, la Academia General de Computacin del Nivel Medio
Superior, periodo 2004-2005, particularmente los maestros:
Ma. del Pilar B. Guevara Castillo, Salvador Alberto Prez Gonzlez, Jorge
Sandoval Robles, Maricela Snchez Hernndez, Ma. De los ngeles Snchez
de los Santos, Ma. De Lourdes Carren Snchez, Jos Hctor Orea Reina,
Jos de Jess Viveros Olivera, Ma. Edith Jurez Hernndez, Silverio Toxqui
Mendoza, E. Augusto Prez Romero, Jos P. Caseln Rosas.
En el diseo de las Guas para el maestro y para el alumno se han contemplado
los avances de las Academias en la actualizacin y precisin de los contenidos de
las asignaturas, y se incorporaron estrategias para un mejor aprendizaje a partir
de nuevos enfoques pedaggicos que orienten las Actividades de la educacin
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 publicacin de estas Guas corresponde al compromiso sostenido del rectorado
de contribuir a la mejor formacin de los jvenes preparatorianos y de apoyar el
buen desempeo de sus profesores, orientaciones prioritarias que han sido
recogidas en el Plan General de Desarrollo 2002- 2005 de nuestra Benemrita
Institucin.
Vicerrectora de Docencia
Manual de Prcticas y Gua Metodolgica del

Alumno
Computacin VI
Debe seguir atrapado
En extincin por ineficiente
Nombre del alumno(a):

N de computadora
Grado y grupo:
Nombre del profesor(a):
Escuela:
ENERO DEL 2005
Contenido temtico de Computacin VI

Pg.
Unidad I. Introduccin a la base de datos MS Access
1. Introduccin a Microsoft Access

1.1 Ventana de Access
1.2 Ventana de Base de Datos
1.3 Objetos
2. Creacin de una base de Datos

2.1 Descripcin de una Tabla
2.2 Tabla.
2.2.1 Creando Tabla en Vista Diseo
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 Diseo
2.3.2 Filtrando Consultas
2.4 Relacionando Tablas.
2.5 Formularios.
2.5.1 Creando un Formulario usando el Asistente
10
Unidad II. Diseo de pginas WEB
23
1. Qu es el html?
1.1
Introduccin
2. Etiquetas
2.1
Estructura bsica de un documento html
3. Encabezado de un documento
3.1
Ttulo 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
4.3
4.4
4.5
4.6
4.7
Espaciados y saltos de lnea

Lneas
Encabezados
Atributos del Texto
Fuente para texto (Font)
4.7.1 Tamao, color, tipo
4.8
Lista de elementos
4.8.1 Tipo de listas
4.9
Imgenes
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
UNIDAD I. INTRODUCCIN A LA BASE DE DATOS DE MICROSOFT ACCESS

1.
Introduccin a Microsoft Access
Objetivo General
Que el alumno conozca las caractersticas de las bases de datos de Microsoft
Access para que maneje y organice diferente tipo de informacin.
Microsoft Access es un gestor de bases de datos en ambiente Windows que
maneja base da datos relacionales es decir informacin entre dos o ms tablas
(diferencia con Excel)
Microsoft Access permite introducir y almacenar datos, ordenarlos y manipularlos.
Organizarlos de manera significativa para que se pueda obtener informacin 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 mdulos.
9
Campo. Es una categora de informacin que representa los rtulos
de cada columna, de una tabla
9
Registro. Es la informacin 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 almacenarn los datos
comunes a un tema en particular
9
Consultas. Son objetos que nos permiten disear y ejecutar
consultas a las tablas.
9
Formularios. Son los objetos donde podemos realizar capturas,
disear aplicaciones, etc.
9
Informes. Son objetos que nos permiten disear informes para poder
imprimirlos
9
Macros. Nos permiten automatizar tareas e insertarlas para su uso
en diversos objetos.
9
Mdulos 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
Actividad 1
1. Contesta las siguientes preguntas:
Crees que tu nombre est en alguna base de datos? ______ En cuales?
__________________________________________________________________
__________________________________________________________________
______________
Cmo organizas tus cassetes, discos compactos, libros?
__________________________________________________________________
__________________________________________________________________
______________
Crees que puedas organizar una base de datos de stos?
______________________________
Cmo?___________________________________________________________
_______
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.
Creacin de una base de datos

Actividad 1
Ingresa al programa de Access dando clic al botn 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 dilogo
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 dilogo 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 estarn 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 informacin resultante de diferentes formas (pantalla,
impresora...)
Formulario
Elemento en forma de ficha que permite la gestin de los datos de una forma ms
cmoda y visiblemente ms 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.
Mdulo
Programa o conjunto de instrucciones en lenguaje Visual basic
Una base de datos comienza con el diseo de una tabla. Para ello, es necesario
plantearse primero qu datos necesitamos. En nuestro ejemplo, necesitaremos:
2.1
No. De matrcula
Nombre, apellidos, direccin, telfono, etc., del alumno
Actividad que realiza
Descripcin de una Tabla
En una base de datos se almacena la informacin que introducimos en formas de

tablas, formada por campos (cada una de las partes en las que hemos desglosado
la informacin) y registros (informacin 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 TELEFNICA
Nombre
Casco Mena Pedro
De los Santos Martines
Garca Sosa Rebeca
Direccin
Av. Independencia 1290
12 Oriente 2345
Calle bano 340
Telfono
(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. Sera absurdo para esta tabla que apareciera una
direccin en la lista sin ir acompaado 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 telefnica
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 ms datos adems del nombre, direccin
y telfono de sus clientes o de sus proveedores. Tal como: artculos vendidos,
precio, monto pendiente de pago, fecha limite de pago, referencias, descuentos,
calificacin 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 estarn 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 tamao y la
har menos eficaz.
Para solucionar el problema se usaran necesariamente varias tablas que luego
se relacionaran por un campo comn en ambas, el contenido de los campos
relacionales y el tipo de dato deber ser igual .
12
LISTA TELEFNICA
No. de cuenta
Nombre
Direccin
Telfono
del cliente
Casco Mena Pedro
Av. Independencia 1290 (222) 2 34 56 78 25-456-897-002
De los Santos Martnez 12 Oriente 2345
(222) 2 65 98 74 25-635-896-012
Garca 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 TELEFNICA
No. de
cuenta
del
cliente
Nombre
Direccin
Telfono
Casco Mena Pedro
Av. Independencia 1290 (222) 2 34 56 78 00001
De los Santos Martnez 12 Oriente 2345
(222) 2 65 98 74 00002
Garca 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 nmero 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 informacin necesitara extraer.
2. Una vez que esto est claro, se definen las Tablas que compondrn la base
de datos. Dentro de cada tabla, se piensa qu campos sern necesarios, ya
que un mal diseo har que el sistema sea lento y los resultados no sean los
esperados.
3. Existen dos formas de ver una tabla, Diseo y Hoja de datos
Diseo:
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 opcin Crear una tabla en Vista
diseo o en el botn nuevo, aparecer una ventana donde debers introducir los
campos sin espacios, sin acentos y sin comas para un mejor manejo, adems
especificars 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 mximo de

255
Memo
Para introducir un texto extenso, hasta 65535 caracteres
Numrico
Para introducir nmeros
Fecha/Hora Para introducir datos en formato fecha u hora
Moneda
Para introducir datos en formato nmero y con el signo
monetario
Autonumrico En este tipo de campo, Access numera automticamente el
contenido
S/No
Campo lgico. Este tipo de campo es slo si queremos un
contenido del tipo S/No, Verdadero/Falso, etc.
Objeto OLE Para introducir una foto, grfico, hoja de clculo, sonido, etc.
Hipervnculo Podemos definir un enlace a una pgina Web
Asistente para bsquedas
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, Mscara de entrada, que muestra
automticamente todos los caracteres literales de presentacin en el campo.
A continuacin insertars 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 continuacin aparecer una llavecita del lado izquierdo del campo (en vista
diseo).
Un campo clave es un campo con una caracterstica especial (la clave) que hace
que ese campo no se repita en ningn registro de la BD. Un campo clave
incrementa adems la velocidad de los procesos del tipo Consultas o Formularios.
Lgicamente, no podemos introducir como campo clave el campo Nombre porque
se puede repetir.
15
2.2.2 Hoja de Datos

Para llenar la tabla tendrs que estar en vista Hoja de Datos, para lo cual se debe
seleccionar el icono vista, aparecer la tabla vaca y empezars a capturar los
registros de sus compaeros, quedando como se muestra a continuacin.
Para salir de la tabla, utiliza alguno de los dos mtodos 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 botn Abrir
para aadir ms 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
Matrcula
Nombre
2002123
Alejandro
2002124
Lucrecia
2002125
Gustavo
Grupo
5AM
Promedio
5 Sem
8.9
Materia
Promedio
Optativa
total
Tcnico
en 8
PC
5BM
9.5
Contabilidad
5CM
9.2
Tcnico
PC
7.5
en 9
Campo Relacional
Tutor
085855
041733
079199
Nombre Categora
Maricela
Snchez
Hctor
Orea
Jess
Viveros
Tiempo
completo
Tiempo
Completo
Tiempo
Completo
Horas
de
Tutora
6
Biologa
15
msh-02@hotmail.com
Historia
20
hecorrey@hotmail.com
Qumica
21
jjvo@hotmail.com
Academia
Antigedad
e-mail
16
2.3
Realizando una consulta
2.3.1 Creando Consultas en Vista Diseo

Estando en la ventana de la base de datos se selecciona el objeto Consultas y
doble clic en Crear consulta en Vista Diseo. 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 botn ejecutar de la Barra de
Herramientas, observndose 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 travs de la Barra
de Herramientas, en vista Hoja de Datos, o anexar criterios directamente en la
Vista Diseo.
Ejemplo:
En Vista Diseo, 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 despus ejecutar.
18
Apareciendo la Consulta de Seleccin.
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
aparecern 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 vlidas 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, debers abrir la Tabla principal y aparecer
del lado izquierdo un signo + que indica la relacin, al dar clic al signo se mostrar
la otra Tabla.
2.5
Creando un formulario
Los formularios son utilizados tpicamente 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 ortografa, adems 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 presentacin de los datos en un formulario se deben pasar los campos

hacia la derecha, a excepcin de los que no sean tan necesarios.
Se puede elegir la distribucin de los mismos datos:
Tambin 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 Diseo se puede dar un diferente formato al formulario, ya sea

reubicando las etiquetas y el cuadro de texto o a travs del Cuadro de
Herramientas, agregando ttulos, subttulos, subformularios etc.
22
Cuadro de
Texto
Etiqueta
Para mover por

separado
UNIDAD II DISEO DE PGINAS WEB

Objetivo General
El alumno conocer y manejar los elementos de un programa de elaboracin de
una pgina Web, para desarrollar su habilidad de anlisis, abstraccin y
creatividad.
Leccin 1
Duracin: 100 minutos
Objetivo
El alumno describir la estructura bsica de un documento HTML as como el
concepto de etiquetas.
Contenido
1. Qu es el html?.
2. Estructura bsica de un documento HTML.
3. Ttulo 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, grficos, etc.) que contenga el documento.
23
1.
Qu es el html?
1.1
Introduccin
El lenguaje de marcas para hipertexto, es un sistema para estructurar
documentos. Estos documentos pueden ser mostrados por los visores de pginas
Web en Internet, como Netscape, Mosaic o Microsoft Internet Explorer. Por el
momento no existe un estndar de HTML ya que tanto Netscape como Microsoft
se empean en incluir etiquetas que solo funcionan con sus respectivos
navegadores. De cualquier manera existen diferentes revisiones o niveles de
estandarizacin, 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 revisin 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 pginas Web. Netscape 2.x y Microsoft Explorer 3.x reconocen prcticamente
todas las rdenes HTML vistas en este manual.
2.
Etiquetas
Bsicamente, el HTML consta de una serie de rdenes o etiquetas, que indican al
visor la forma de representar los elementos (texto, grficos, 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 smbolos < y >. Las etiquetas cerradas incluyen el carcter /
antes de la palabra clave para indicar el final de la misma. Una etiqueta puede
contener "parmetros". Estos parmetros se indican a continuacin de la palabra
clave de la etiqueta.
Ejemplos:
Etiqueta cerrada
<CENTER> Mi pgina Web </CENTER>
Etiqueta abierta
<HR>
Etiqueta con parmetros
<BODY bgcolor="#FFFFFF"> </BODY>
Los archivos que contienen documentos HTML suelen tener la extensin .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 mayscula y en negrilla.

Los parmetros de las etiquetas se indican en letra minscula 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 bsica de un documento HTML

Un documento escrito en HTML contendra bsicamente las siguientes etiquetas:
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Indica el inicio del documento.

Inicio de la cabecera.
Inicio del ttulo del documento.
Final del ttulo 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 travs de Internet. Para indicar la situacin del documento en Internet se utiliza
el URL (Uniform Resource Locator). El URL es el camino que ha de seguir nuestro
visor a travs de Internet para acceder a un determinado recurso, bien sea una
pgina Web, un archivo, un grupo de noticias, etc. Es decir, lo que el visor de
pginas 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 pgina 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 pgina Web escrita
en HTML. Por ejemplo:
http://www.buap.mx/facultades/fcc.html
Donde:
http://
Es el indicador de pgina 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 pgina 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 cdigo HTML y lo guardar con el

nombre ejercicio1.html dentro de una carpeta previamente creada para
tal fin. La extensin 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 aplicacin de Block de Notas y entrar al

Navegador Internet Explorer, en donde abrir el archivo ejercicio1.html
mediante los siguientes pasos:
Men archivo
Abrir
Botn explorar
Localice el archivo: ejercicio.html y seleccinelo
Botn Abrir
Botn Aceptar
Listo!! Slo ver la frase:
HOLA A TODOS!!!
3. Encabezado de un documento
3.1
Ttulo de un documento
La etiqueta <HEAD></HEAD> delimita la cabecera del documento. Dentro

de la cabecera es importante definir el ttulo de la pgina por medio de la
etiqueta <TITLE></TITLE>. Este ttulo ser el que aparezca en la barra de
ttulo de nuestro visor de pginas Web.
26
Ejemplo :
<TITLE>La pgina Web de Fac. Ciencias de la Computacin</TITLE>
Actividad 2
Teniendo activa la ventana de Block de Notas con su archivo ejercicio1.html. En
su cdigo editado, el alumno modificar la lnea de <TITLE>
<TITLE>Mi Primera Pagina Web</TITLE>
Guardar los cambios y en la ventana del navegador Internet Explorer pulsar el
botn
, para que se cargue nuevamente su pgina en el navegador y ahora
podamos ver los cambios.
Ntese que lo nuevo ser observar la Barra de ttulo 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 pgina Web. Muchos de los buscadores de pginas Web de
Internet (Yahoo, Lycos, etc.) utilizan el contenido de esta etiqueta para incluir la
pgina en sus bases de datos. La etiqueta <META> lleva generalmente dos
parmetros, name y content.
Actividad 3
Regresando al Block de Notas, insertar antes de la etiqueta </HEAD>
<META name = "Pgina de Jose" content = "Mi pgina personal, Musica y
Peliculas">
Indica al visor el nombre de la pgina y sus contenidos principales,
<META name = "keywords" content = "Jose musica peliculas links espaa">
Indica al visor las palabras clave para los buscadores de Internet. En este caso no
veremos cambio alguno en la pgina web que presenta el navegador ya que esto
slo representa para los buscadores de informacin, valores tiles de bsqueda.
Otro uso de la etiqueta <META> es la de indicar documentos con "refresco
automtico". Si se indica un URL se sustituir el documento por el indicado una
vez transcurridos el nmero 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 pginas que cambian de contenido con
mucha frecuencia o para redireccionar a la persona que visita nuestra pgina Web
a una nueva direccin donde se encuentra una versin actualizada de nuestra
pgina Web.
Ejemplo:
<META http-equiv= "refresh" content = "15;URL=http://www.yahoo.com.mx">
Transcurridos 15 segundos se acceder a la pgina Web de Yahoo en Mxico.
Una etiqueta adicional, <BASE> indica la localizacin de los archivos, grficos,
sonidos, etc. a los que se hace referencia en nuestra pgina Web. Si no se incluye
esta etiqueta el visor entiende que dichos elementos se encuentran en el mismo
lugar donde se encuentra nuestra pgina Web.
Ejemplo:
<BASE href = "http://www.buap.mx/carmen/">
Leccin 2
Objetivo
El alumno agregar fondos a su Pgina 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 cdigo ASCII de siete bits.
4.
Cuerpo del documento
4.1
Fondo
La etiqueta <BODY></BODY> indica el inicio y final de nuestra pgina Web. Ser
entre el inicio y el final de esta etiqueta donde pongamos los contenidos de
28
nuestra pgina, textos, grficos, enlaces, etc. Esta etiqueta tiene una serie de
parmetros opcionales que nos permiten indicar la "apariencia" global del
documento:
background= "nombre de archivo grfico"
Indica el nombre de un archivo grfico que servir como "fondo" de nuestra
pgina. Si la imagen no rellena todo el fondo del documento, sta ser
reproducida tantas veces como sea necesario.
bgcolor = "cdigo de color"
Indica un color para el fondo de nuestro documento. Se ignora si se ha usado el
parmetro background.
text = "cdigo de color"
Indica un color para el texto que incluyamos en nuestro documento. Por defecto es
negro.
link = "cdigo de color"
Indica el color de los textos que dan acceso a una liga (Hyperenlace). Por defecto
es azul.
vlink = "cdigo 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 prpura.
El cdigo de color es un nmero compuesto por tres pares de cifras
hexadecimales que indican la proporcin de los colores "primarios", rojo, verde y
azul. El cdigo de color se antecede del smbolo #. 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 proporcin de color Rojo, el segundo par de cifras
la proporcin de color Verde y las dos ltimas la proporcin 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 mayora de los editores de HTML nos permiten obtener el
cdigo 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 slo se le indicar que cambios hacer
dentro del cuerpo de la pgina 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 lnea de cdigo 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 despus 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 lnea de cdigo 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 pgina, el alumno
modificar la lnea de cdigo 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 pginas Web actuales soportan todos los caracteres
grficos del la especificacin ISO 8859-1, que permiten escribir textos en la
mayora de los pases 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 cdigo ASCII de 7 bits. Para hacer referencia
a estos caracteres se les asigna un cdigo numrico 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
cdigo numrico o una entidad cuando deseemos que aparezcan en el
documento "tal cual".
Las entidades comienzan por el smbolo & (ampersand) y terminan con el
smbolo ; (punto y coma). A continuacin veamos una tabla con las principales
entidades:
Carcter Cdigo Entidad Carcter Cdigo Entidad

!
!
--
"
"
--
#
--
$
--
%
--
&
&
--
'
'
--
(
--
)
--
*
--
+
--
,
--
-
--
.
--
/
--
:
--
;
--
<
<
--
=
--
>
>
--
?
--
@
--
[
--
\
--
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 pgina la podramos escribir como:

pgina
página
página
Actividad 2
Teniendo activada la ventana de Block de Notas, despus de la lnea:
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 pgina, 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 interpretacin del navegador:
pgina
pgina
Nota:
<p> se usa para separar un prrafo 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 pginas Web pueda visualizar
las letras acentuadas de nuestro documento debemos utilizar sus
correspondientes entidades o cdigos para representarlas.
Leccin 3.
Objetivo
El alumno insertar espacios, saltos de lnea y atributos al texto de la Pgina Web.
Contenido
3.1
3.2
3.3
3.4

Lneas
Encabezados
Atributos de texto
Conceptos
Atributos.
Son los estilos y alineaciones de un texto
4.3
En HTML solo se reconoce un espacio entre palabra y palabra, el resto de los

espacios sern 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
bsica del documento HTML y dentro del cuerpo de la pgina Web lo siguiente:
Esto es
que no se
espacios.
una
frase
respetarn
note
los
Guardar el archivo con el nombre de ejercicio2.html y visualizar estos en el

explorador. Ahora observars la interpretacin del navegador, omitir todos los
espacios tabuladores y saltos de lnea, sustituyndolos por slo un espacio.
Asimismo tampoco se respetan las tabulaciones, retornos de carro etc. Para ello
existen una serie de etiquetas que indican estos cdigos.
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
interpretacin del navegador, respetar todos los espacios tabuladores y saltos de
lnea.
Para indicar un salto de lnea se utiliza la etiqueta <BR> y para un cambio de
prrafo (deja una lnea en blanco en medio) se utiliza la etiqueta <P>.
35
Ejemplo
Se vera como
Este texto tiene<BR>saltos de linea y <P> de prrafo.
Este texto tiene

saltos de lnea y
de prrafo.
El profesor realizar un ejercicio en donde utilice el <BR> y <P>, que los alumnos
visualicen en el Explorador.
La etiqueta <P> puede usarse tambin como etiqueta "cerrada" <P></P>
indicando de esta manera los atributos de un prrafo en concreto. Cuando se usa
de esta manera tiene el parmetro align que indica al visor la forma de "justificar"
el prrafo. Los valores posibles de este parmetro 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

prrafo de texto justificado a la derecha.</P>
Este es un ejemplo de prrafo

de texto justificado a la derecha
<P Align=center>Este es un ejemplo de prrafo

de texto centrado.</P>
Este es un ejemplo de prrafo

de texto centrado
En el Block de Notas el alumno escribir:

<P Align=right>Este es un ejemplo de un prrafo de texto justificado a la
derecha.</P>
Guardar y visualizar en el Explorador.
Ahora observar la interpretacin del navegador, alinear el prrafo a la derecha.
Nota: Los alumnos practicarn diferentes alineaciones.
Actividad 2
4.4
Lneas
La etiqueta <HR> muestra una lnea horizontal de tamao determinable. Tiene los
siguientes parmetros opcionales:
align = posicin
36
Alinea la lnea a la izquierda (left), a la derecha (right) o al centro (center).

noshade
No muestra sombra, evitando el efecto en tres dimensiones.
size = nmero
Indica el grosor de la lnea en pixeles.
width = num / %
Indica el ancho de la lnea en tanto por ciento en funcin del ancho de la
ventana del visor. Tambin se puede especificar un nmero que indicara el
ancho de la lnea en pixeles.
Ejemplo:
<HR align= center size= 20 width= 50%>
La etiqueta <HR> sin ningn parmetro mostrara una lnea horizontal que
ocupara todo el ancho de la pgina.
<HR align= center size= 20 width= 50%>
Guardar y visualizar en el Explorador.
Ahora observar la interpretacin del navegador.
Actividad 3
4.5
Encabezados (Cabeceras)
En un documento de HTML se pueden indicar seis tipos de cabeceras (tamaos

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.
37
Ejemplo
Se vera como
<H1>Texto de Prueba</H1> Texto de prueba

<H2>Texto de Prueba</H2> Texto de Prueba
Guardar y visualizar en el Explorador observando la interpretacin del
navegador.
Los textos marcados como "cabeceras" provocan automticamente un retorno de
carro sin necesidad de incluir la etiqueta <BR>. Por ejemplo:
En el Block de Notas el alumno escribir slo la primera columna
Ejemplo
Se vera como
<H3>Pgina
personal.
de
Jose</H3>Esta
es
mi
pgina Pgina de Jose

Esta
es
mi
personal
pgina
Guardar y visualizar en el Explorador la interpretacin 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 segn 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 slo escribir la tercera columna de la tabla
anterior, guardar y visualizar en el Explorador la interpretacin del navegador.
Leccin 4
Objetivo
El alumno elaborar un texto con diferentes fuentes incluyendo una lista de datos
Contenido
4.1 Fuente para texto (Font)
4.2 Lista de elementos
4.2.1 Tipos de lista
4.7
Fuente para texto

La etiqueta <FONT></FONT> nos permite variar el tamao, el color, y el tipo de
letra de un texto determinado. Utiliza para ello los parmetros size, bgcolor y
face, los cuales se describen a continuacin:
size = valor
Da al texto un tamao en puntos determinado.
size = +/- valor
Da al texto un tamao tantas veces superior (+) o inferior (-) como indique el
valor.
color = "cdigo de color"
39
Escribe el texto en el color cuyo cdigo 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 pgina se usara el font
predeterminado del navegador.
Actividad 1
Dentro del Block de Notas del Ejercicio2.html, el alumno escribir slo la primera
columna. Guardar y visualizar en el Explorador la interpretacin del navegador.
Ejemplo
Se vera 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 pgina Web se utiliza la etiqueta .
40
Dentro del Block de Notas, el alumno escribir


Los comentarios no sern 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 definicin. Las listas
numeradas representarn los elementos de la lista numerando cada uno de ellos
segn 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 parmetros:
start = num
Indica que nmero ser el primero de la lista. Si no se indica se entiende
que empezar por el nmero 1.
type = tipo
Indica el tipo de numeracin utilizada. Si no se indica se entiende que ser
una lista ordenada numricamente. Los tipos posibles son :
1 = Numricamente. (1,2,3,4,... etc.)
a = Letras minsculas. (a,b,c,d,... etc.)
A = Letras maysculas. (A,B,C,D,... etc.)
i = Nmeros romanos en minsculas. (i.ii,iii,iv,v,... etc.)
I = Nmeros romanos en maysculas. (I,II,III,IV,V,... etc.)
Actividad 2
Dentro del Block de Notas, el alumno escribir slo la primera columna
Ejemplo
<OL>
<LI>Espaa
<LI>Francia
<LI>Italia
<LI>Portugal
Resultado
1.
2.
3.
4.
Espaa
Francia
Italia
Portugal
41
</OL>
<OL type = A >
<LI>Espaa
<LI>Francia
<LI>Italia
<LI>Portugal
</OL>
A.
B.
C.
D.
Espaa
Francia
Italia
Portugal
Las listas sin numerar representan los elementos de la lista con una vieta 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 parmetro type que indica la forma de la
vieta o marca que antecede a cada elemento de la lista. Los valores de type
pueden ser disk, circle o square, con lo que la vieta o marca puede ser un
disco, un circulo o un cuadrado.
Dentro del Block de Notas, el alumno escribir slo la primera columna
Ejemplo
<UL type = disk >
<LI>Espaa
<LI>Francia
<LI>Italia
<LI>Portugal
</UL>
<UL type = square>
<LI>Espaa
<LI>Francia
<LI>Italia
<LI>Portugal
</UL>
Resultado
Espaa
Francia
Italia
Portugal
Espaa
Francia
Italia
Portugal
Las listas de definicin muestran los elementos tipo Diccionario, o sea, trmino y
definicin. Se utiliza para ellas la etiqueta <DL></DL>. El elemento marcado como
trmino se antecede de la etiqueta <DT>, el marcado como definicin se antecede
de la etiqueta <DD>.
42
Dentro del Block de Notas, el alumno escribir slo 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 ms "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 lmite 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, slo
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
Leccin 5
Objetivo
El alumno navegar dentro de su pgina Web y hacia fuera por medio de Ligas o
Hiperenlaces.
Contenido
5.1Imgenes
5.5.1 Formatos
5.2 Ligas o hiperenlaces
Conceptos
Ligas o hiperenlaces.
Es un elemento de la pgina que hace que el navegador acceda a otro recurso,
otra pgina Web, un archivo, etc.
4.9
Imgenes
Hasta el momento hemos visto como se puede escribir texto en una pgina Web,
as como sus posibles formatos. Para incluir una imagen en nuestra pgina Web
utilizaremos la etiqueta <IMG>.
4.9.1 Formatos
Hay dos formatos de imgenes que todos los navegadores modernos reconocen:
las imgenes GIF y JPG. Cualquier otro tipo de archivo grfico 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 visualizacin.
La etiqueta <IMG> tiene varios parmetros:
src = "imagen"
Indica el nombre del archivo grfico a mostrar.
alt = "Texto"
Mostrar el texto indicado en el caso de que el navegador utilizado para ver
la pgina no sea capaz de visualizar la imagen.
lowsrc ="imagen"
Muestra una segunda imagen "superpuesta" sobre la primera una vez se
carga la pgina. Este parmetro no es reconocido por la totalidad de los
44
navegadores ya que esta en estudio su aplicacin, as que en la mayora de

los casos ser ignorado mostrndose 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 imgenes son
iguales pero tienen distinta "resolucin" se conseguir un efecto tipo "Fade"
(descolorido). Si las imgenes son de distinto tamao la imagen indicada en
src se redimensionar al tamao 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 = tamao
Indica el tamao 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 = tamao
Indica el alto de la imagen en puntos o en porcentaje. Se usa para variar el
tamao de la imagen original.
width = tamao
Indica el ancho de la imagen en puntos o en porcentaje. Se usa para variar
el tamao de la imagen original.
hspace = margen
Indica el nmero de espacios horizontales, en puntos, que separarn la
imagen del texto que la siga y la anteceda.
vspace = margen
Indica el nmero 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 parmetros mas
adelante en este manual.
45
Actividad 1
El alumno abrir un nuevo archivo en el Block de Notas y escribir la estructura
bsica del documento HTML y dentro del cuerpo de la pgina Web escribir slo
la primera columna
Ejemplo
Se vera como
<IMG src="caution.gif" alt= "Cuidado !!" >
Si el visor no pudiese visualizar el grfico.....

El alumno guardar el archivo con el nombre ejercicio3.html.
La imagen a mostrar puede encontrase en el mismo lugar (URL) que la pgina
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 tamaos de la imagen, as como
comprobando la alineacin de los textos. (Recuerde que en funcin del visor que
Ud. utilice pueden verse o no los efectos de cada parmetro).
Dentro del cuerpo de la pgina Web, el alumno escribir slo la primera
columna.
Ejemplo
Se vera como
<IMG src="caution.gif"
width=100 >
height=20 >
46
align=TOP>Atencion !!!
Atencion !!!
(ARRIBA)
Atencion !!!
(MEDIO)
align=MIDDLE>Atencion !!!
align=BOTTOM>Atencion !!!
Atencion !!!
Tenga en cuenta<IMG src="caution.gif"
hspace=20>esta indicacion.
Tenga en cuenta
esta indicacion
(SEPARACIN HORIZONTAL)
Tenga en cuenta<IMG src="caution.gif"
vspace=40>esta indicacion.
Tenga en cuenta
esta indicacion.
(SEPARACIN VERTICAL)
Ejercicios sugeridos
1. Defina una lista numerada con los nombres de sus compaeros.
2. Defina una lista no numerada con los nombres de sus compaeros.
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 domsticos: perro, gato y pez.
5. Inserta una lnea horizontal de separacin con longitud de 75% y grosor 10.
6. Inserte en la pgina HTML una imagen, cualquiera (JPG GIF) y cntrela.
47
4.10
Ligas o Hyperenlaces
La caracterstica principal de una pgina Web es que podemos incluir Ligas

Hyperenlaces. Un Hyperenlace es un elemento de la pgina que hace que el
navegador acceda a otro recurso, otra pgina Web, un archivo, etc...
Para incluir un Hyperenlace se utiliza la etiqueta <A></A>. El texto o imagen que
se encuentre dentro de los lmites de esta etiqueta ser sensible, esto quiere decir
que si pulsamos con el ratn sobre l, se realizar la funcin 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 rodendola.
Esta etiqueta tiene el parmetro href que indica el lugar a donde nos llevar el
Hyperenlace si lo pulsamos.
Actividad 2
Dentro del cuerpo de la pgina Web, el alumno escribir slo la primera columna
Ejemplo
Se veria como
<A href = "http://www.yahoo.com/"> Pulse para ir a la Pulse para ir a la pgina

pgina de Yahoo</A>
de Yahoo
Si situamos el ratn encima de la frase y pulsamos, el navegador acceder a la
pgina Web indicada por el parmetro href, es decir, acceder a la pgina situada
en http://www.yahoo.com/
Lo mismo podramos hacer con un grfico.
Dentro del cuerpo de la pgina Web, el alumno escribir slo la primera columna
Ejemplo
Se vera 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
accedera
la
pgina
situada
en
Una liga tambin puede llevarnos a una zona de nuestra pgina. Para ello
debemos marcar en nuestra pgina las diferentes secciones en las que se divide.
Lo haremos con el parmetro name.
48
Actividad 3
Dentro del Block de Notas, el alumno escribir:
<A name = "seccion1"></A>
Esta instruccin marca el inicio de una seccin dentro de nuestra pgina. La
seccin se llamar seccion1.
Para hacer un enlace a esta seccin dentro de nuestra pgina lo haramos 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 pginas Web o secciones dentro de una pgina
web, pero podramos 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 envo de un correo
electrnico a una direccin de correo determinada.
Actividad 4
<A href = "mailto: luisfd@jet.es">Envame tus sugerencias</A>
Tambin 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 pgina 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.
Leccin 6
Objetivo
El alumno elaborar diferentes formatos de tablas y pondr efectos a los ttulos.
As mismo realizar la subdivisin 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 divisin de la pantalla del visor en diferentes ventanas, cada una de ellas se
podr manipular por separado permitiendo mostrar una pgina web en cada
ventana.
4.11 Tablas
Las tablas nos permiten representar cualquier elemento de nuestra pgina (texto,
listas, imgenes, etc...) en diferentes filas y columnas separadas entre s. Es una
herramienta muy til para "ordenar" contenidos de distintas partes de nuestra
pgina. La tabla se define mediante la etiqueta <TABLE></TABLE>. Los
parmetros 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 estn 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 funcin del
ancho de la ventana del visor. Si no se indica este parmetro, el ancho se
adecuar al tamao de los contenidos de las celdas.
height = num %
Indica la altura de la tabla en puntos o en porcentaje en funcin del alto de
la ventana del visor. Si no se indica este parmetro, la altura se adecuar a
la altura de los contenidos de las celdas.
bgcolor = cdigo 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 tamao
ligeramente superior al normal. Los parmetros 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 alineacin vertical del contenido de la celda, en la parte superior
(TOP), en la inferior (BOTTOM), o en el centro (MIDDLE).
rowspan = num
Indica el nmero de filas que ocupar la celda. Por defecto ocupa una sola
fila.
colspan = num
Indica el nmero 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 funcin del
ancho de la ventana del visor. Si no se indica este parmetro, el ancho se
adecuar al tamao de los contenidos. Este parmetro slo funciona en los
navegadores modernos.
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
continuacin 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
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 vera como
Buscadores
Otros Links
Yahoo
Microsoft
IBM
Infoseek
Apple
Digital
Las etiquetas <TD> y <TH> son cerradas segn el estndar de HTML, es decir
que un elemento de tabla <TD> debera cerrarse con un </TD>, sin embargo los
visores asumen que un elemento de la tabla, queda automticamente "cerrado"
cuando se "abre" el siguiente.
4.12
Extensiones de HTML
Netscape y Microsoft han aadido al estndar de HTML diversas etiquetas para

hacer mas atractiva la visualizacin de la pgina 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
parmetros 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.
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 funcin de la
ventana del visor.
width = num %
Indica el ancho de la marquesina en puntos o porcentaje en funcin de la
ventana del visor.
loop = num/infinite
Indica el nmero de veces que se desplazar el texto por la marquesina. Si
se indica infinite, se desplazar indefinidamente.
scrolldelay = num
Indica el nmero de milisegundos que tarda en rescribirse el texto por la
marquesina, a mayor nmero menor desplazamiento del texto.
Actividad 2
<MARQUEE bgcolor=#FFFFFF width=50% scrolldelay=0> Bienvenido a mi
pgina personal en Internet
</MARQUEE>
Visualizar los cambios en el Explorador y cerrar el archivo del Block de Notas.
5.
Frames
Los frames es una tcnica para subdividir la pantalla del visor en diferentes
ventanas. Cada una de estas ventanas se podr manipular por separado,
permitindonos mostrar en cada una de ellas una pgina Web diferente. Esto es
53
muy til para, por ejemplo, mostrar permanentemente en una ventana los
diferentes contenidos de nuestra pgina, 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 subdivisin.
Los parmetros de <FRAMESET> son rows y cols en funcin de si la divisin de
la pantalla se realiza por filas (rows) o columnas (cols). Los parmetros rows y
cols se acompaan de un grupo de nmeros que indican en puntos o en
porcentaje el tamao de cada una de las subventanas. En caso de utilizar rows
los tamaos 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 tamaos 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 tendrn 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 parmetros 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 pgina que se cargue en ella no quepa en los lmites de la
subventana. El valor yes muestra siempre la barra de desplazamiento,
no no la muestra nunca (la zona de la pgina que no quepa en la
subventana no la veremos), y auto la muestra solo en caso de que sea
necesario para poder ver la pgina.
noresize
Si se indica este parmetro, el usuario no podr redimensionar las
subventanas con el visor. Un usuario que este viendo una pgina con
frames puede redimensionarlas seleccionando un borde de la subventana
con el cursor y desplazndolo.
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 slidos.
Los visores que no soportan la caracterstica de subventanas, no mostrarn 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 pgina Web nueva, lo siguiente:
55
<HTML>
<HEAD>
<TITLE>Pgina con Frames</TITLE>
</HEAD>
<FRAMESET cols=40%,*>

<FRAMESET rows=35%,*>

<FRAME name= ejer2 src= ejercico2.html scrolling= auto>

</FRAMESET>
<! --Cierro la definicin 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 definicin de las subventanas verticales -->
</HTML>
Uso de los parmetros target y name.
Nosotros tambin podemos, dentro de un FRAME, crear un men a la izquierda y
una ventana ms grande a la derecha en donde podemos mostrar pginas HTML.
Actividad 4
El alumno escribir en una nueva pgina Web, lo siguiente:
<HTML>
<HEAD>
<TITLE>Pgina principal de FRAMES</TITLE>
</HEAD>
<FRAMESET cols="20%,*">
<FRAME src="indice.html" scrolling="auto">

56
<FRAME src="main.html" name="right" scrolling="auto">

<--Muestro el documento a la que se refiere el vnculo -->
</FRAMESET>
</HTML>
El alumno nicamente guardar el archivo con el nombre de frame-target.html.
Ntese 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 pgina
Web, lo siguiente:
<HTML>
<HEAD>
<TITLE>Menu</TITLE>
</HEAD>
<BODY>
<A href="ejercicio1.html" target="right" >Ejercicio nmero 1</A><P>
<A href="ejercicio2.html" target="right">Ejercicio nmero 2</A><P>
<A href="ejercicio3.html" target="right">Ejercicio nmero 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.
Leccin 7
Objetivo
Para que el alumno realice una retroalimentacin de los conceptos vistos,
elaborar una pgina Web (el profesor se pondr de acuerdo con sus alumnos)
6. Trabajo final
57

Comp VI Alumno 2005

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Comp VI Alumno 2005

Cargado por

Copyright:

Formatos disponibles

Benemrita Universidad Autnoma de

GUA PARA EL ALUMNO

Academia General Computacin

D.R. Universidad Autnoma de Puebla, 2005

Manual de Prcticas y Gua Metodolgica del

Debe seguir atrapado

En extincin por ineficiente

Nombre del alumno(a):

ENERO DEL 2005

Contenido temtico de Computacin VI

1. Introduccin a Microsoft Access

2. Creacin de una base de Datos

Unidad II. Diseo de pginas WEB

4. Cuerpo del documento

Espaciados y saltos de lnea

UNIDAD I. INTRODUCCIN A LA BASE DE DATOS DE MICROSOFT ACCESS

Introduccin a Microsoft Access

Creacin de una base de datos

1.2 Ventana de Base de Datos

Objetos de la Base de Datos

En una base de datos se almacena la informacin que introducimos en formas de

Bases de datos Planas y Relacional

Permite establecer los campos y sus propiedades

2.2.1 Elaborando una tabla

Para introducir cadenas de caracteres hasta un mximo de

En la parte inferior podemos mejorar la tabla estableciendo las propiedades de

A continuacin insertars un campo Id o llave para que ste sea nico y se

2.2.2 Hoja de Datos

Realizando una consulta

2.3.1 Creando Consultas en Vista Diseo

Al insertar la tabla quedar de la siguiente forma.

2.3.2 Filtrado en consultas

Apareciendo la Consulta de Seleccin.

El campo coincidente de la Tabla principal es una clave principal que tiene

El uso de los formularios es un modo eficiente de introducir los datos, ya que

Cuando se muestra la siguiente ventana, selecciona la tabla

Para la presentacin de los datos en un formulario se deben pasar los campos

Tambin se puede elegir el estilo de los datos.

Para salvar el formulario de preferencia se antepone al identificador una letra F y

El resultado debe ser algo parecido a lo siguiente:

En Vista Diseo se puede dar un diferente formato al formulario, ya sea

Para mover por

UNIDAD II DISEO DE PGINAS WEB

Las etiquetas se indican en letra mayscula y en negrilla.

2.1 Estructura bsica de un documento HTML

Indica el inicio del documento.

El documento se hallar situado en alguna computadora al que se pueda acceder

El alumno abrir el block de notas de Windows, de acuerdo a los

El alumno capturar el siguiente cdigo HTML y lo guardar con el

El alumno minimizar la aplicacin de Block de Notas y entrar al

La etiqueta <HEAD></HEAD> delimita la cabecera del documento. Dentro

URL se volver a cargar en el visor el documento en uso transcurridos los

Cuerpo del documento

par de cifras hexadecimales nos permiten un rango de 0 a 255. Combinando las

Color del texto

Carcter Cdigo Entidad Carcter Cdigo Entidad

Por lo tanto la palabra pgina la podramos escribir como:

Visualizar los cambios en el explorador.

Espaciados y saltos de lnea

Espaciados y saltos de lnea

En HTML solo se reconoce un espacio entre palabra y palabra, el resto de los

Esto es una frase

Guardar el archivo con el nombre de ejercicio2.html y visualizar estos en el

Restaurado el Block de Notas el alumno escribir dentro del cuerpo: