95660167 manual de ofimatica
Post on 27-Mar-2016
248 Views
Preview:
DESCRIPTION
TRANSCRIPT
Ofimática Escuela de Tecnología
2
CARRERAS PROFESIONALES CIBERTEC
OFIMÁTICA – Escue la de Tecno logía 3
CIBERTEC CARRERAS PROFESIONALES
ÍNDICE
Página
Presentación 5
Red de contenidos 7
Unidad de aprendizaje 1
1.1 Tema 1 : Introducción a HTML5 11
1.1.1. : Estructura de un documento HTML5
1.1.2. : Diferencias básicas entre HTML y HTML5
1.1.3. : Directivas o etiquetas
1.1.4 : Herramienta Dreamweaver
1.2 Tema 2 : Inserción de imágenes 22
1.2.1. : Mapas de imágenes
1.2.2. : Imágenes de sustitución
1.2.3 : Tablas
1.3 Tema 3 : Creación de enlaces. 31
1.3.1. : Enlaces externos
1.3.2. : Enlaces internos
1.3.3. : Enlaces mixtos
1.4 Tema 4 : Diseño con plantillas 33
1.4.1. : Insertar regiones
1.4.2 Guardar una plantilla
1.4.3. : Crear archivos basados en una plantilla
1.4.4 Actualizar archivos basados en una plantilla
1.5 Tema 5 : Formularios 39
1.5.1. : Crear un formulario
1.5.2. : Insertar objetos de formulario
Unidad de aprendizaje 2
2.1 Tema 6 : Introducción a estilos CSS 69
2.1.1. : Estilos de etiqueta
4
CARRERAS PROFESIONALES CIBERTEC
2.1.2. : Estilos de encabezado
2.1.3. : Estilos importados
2.2 Tema 7 : CSS para textos 76
2.3 Tema 8 : CSS para contenedores 78
2.4 Tema 9 : CSS para formularios 80
Unidad de aprendizaje 3
3.1 Tema 10 : Introducción al lenguaje JavaScript 115
3.1.1. Modelo de programa JavaScript
3.1.2. Definición de variables
3.1.3. Métodos básicos de entrada y salida
3.1.4. : Tipos de operadores
3.1.5. : Funciones
3.1.6. : Funciones predefinidas
3.2 Tema 11 : Validación de formularios con JavaScript 128
3.1.1. : El evento onSubmit
3.1.2. : El objeto this
Anexo 145
OFIMÁTICA – Escue la de Tecno logía 5
CIBERTEC CARRERAS PROFESIONALES
PRESENTACIÓN
Ofimática es un curso que pertenece a la línea técnica y se dicta en las carreras
Computación e Informática, Administración y Sistemas, Redes y Electrónica.
Brinda a los alumnos un conjunto de herramientas de software como
Dreamweaver CS5, así como lenguajes HTML, CSS y JavaScript para el diseño
de sitios web con aplicaciones multimedia y validación de formularios.
El manual para el curso ha sido diseñado bajo la modalidad de unidades de
aprendizaje, las que se desarrollan durante semanas determinadas. En cada
una de ellas, hallará los logros, que debe alcanzar al final de la unidad; el tema
tratado, el cual será ampliamente desarrollado; y los contenidos, que debe
desarrollar, es decir, los subtemas. Por último, encontrará las actividades que
deberá desarrollar en cada sesión, que le permitirán reforzar lo aprendido en la
clase.
El curso es eminentemente práctico y consiste en el diseño de páginas web y
programación con JavaScript para validar formularios. En primer lugar, se inicia
con el programa Dreamweaver que brinda al alumno una variedad de
herramientas para la integración de diferentes elementos de una página web.
Asimismo, para el diseño, se incluye los lenguajes HTML y CSS. Se concluye
con el lenguaje de programación JavaScript que permite insertar estructuras de
programación para hacer consistente el ingreso de datos a un formulario por
parte del usuario.
6
CARRERAS PROFESIONALES CIBERTEC
OFIMÁTICA – Escue la de Tecno logía 7
CIBERTEC CARRERAS PROFESIONALES
RED DE CONTENIDOS
Ofimática
Dreamweaver
HTML Imágenes
JavaScript
Lenguaje
JavaScript
Textos Enlaces
Formularios Plantillas
Validación de
formularios
Estilos
Textos
Contenedores
Formularios
8
CARRERAS PROFESIONALES CIBERTEC
OFIMÁTICA – Escue la de Tecno logía 9
CIBERTEC CARRERAS PROFESIONALES
HTML5
LOGRO DE LA UNIDAD DE APRENDIZAJE
Al término de la unidad, los alumnos construyen un sitio web y elaboran diseños con plantillas que incluyen elementos multimedia.
TEMARIO
1.1. Tema 1: Introducción a HTML5 (2 horas) 1.2. Tema 2: Inserción de imágenes (2 horas) 1.3 Tema 3: Creación de enlaces (2 horas) Trabajo práctico No. 1: Desarrollo de una página web personal 1.4 Tema 4: Diseño con plantillas (2 horas) 1.5 Tema 5: Formularios (2 horas) Trabajo práctico No. 2: Desarrollo de un sitio web personal
ACTIVIDADES PROPUESTAS
Los alumnos diseñan páginas web usando el lenguaje HTML en el programa Dreamweaver, las cuales incluyen uso de plantillas y formularios.
UNIDAD DE
APRENDIZAJE
1
10
CARRERAS PROFESIONALES CIBERTEC
OFIMÁTICA – Escue la de Tecno logía 11
CIBERTEC CARRERAS PROFESIONALES
1.1 INTRODUCCIÓN A HTML5 HTML 5 (HyperText Markup Language, versión 5) es la quinta revisión importante
del lenguaje básico de la World Wide Web, HTML4. Contiene un conjunto de
nuevos elementos que harán más significativas a las páginas web, lo cual
permitirá una navegación más rápida y fluida, así como una búsqueda de páginas
más eficiente. También, incluirá, en el futuro, elementos para dibujar en la
pantalla, almacenar datos sin conexión, arrastrar y soltar objetos con el mouse, y
mucho más.
Hace una década, para diseñar una página, sólo se podía usar frames, que eran
la forma más sencilla de no tener que repetir reiteradamente el mismo código. No
obstante, con la llegada de los lenguajes de programación, esto comenzó a variar
y se comenzó a utilizar tablas en lugar de frames para el diseño del sitio web. La
aparición de los CSS hizo que las etiquetas DIV se convirtieran en la alternativa
para formatear los sitios; sin embargo, había muchos problemas con el uso de
audio y video. Por esta razón, llega HTML 5 con nuevas etiquetas que solucionan
todas estas limitaciones.
1.1.1 Estructura de un documento HTML5
La estructura del documento, en HTML 5, es un poco diferente a la de las
versiones anteriores de HTML.
12
CARRERAS PROFESIONALES CIBERTEC
Header: es el encabezamiento de la página o de la sección.
Footer: es el pie de página o de la sección.
section: es la sección dentro de una página web.
Article: contenido, contenido y más contenido.
Aside: son cosas varias, ejemplo, todo aquello que se pone en los blogs
en la barra derecha, como nube de tags, los más descargados, visítenos
en Twitter, FB, etc.
Nav: es la navegación por la web.
Todas estas etiquetas van dentro de la etiqueta <body></body>.
Ejemplo de estructura de un documento HTML5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Articulo (HTML5)</title>
</head>
<body>
<header id="branding">
<!— Cabecera de la pagina -->
<h1>Nombre del sitio</h1>
</header>
<nav>
<ul>
<li>Navegación principal</li>
</ul>
</nav>
<div id="content">
<article>
<!— Contenido principal -->
<header>
<h1>Article title</h1>
<p>Metadata del articulo</p>
</header>
<p>Contenido del articulo</p>
<footer>Final de articulo</footer>
</article>
<aside id="sidebar">
<!— Contenido secundario de la página -->
<h1>Sidebar title</h1>
<!-- ref:HTML5-style heading element levels -->
<p>Sidebar content</p>
</aside>
</div>
<footer id="footer">Footer</footer>
<!-- page footer (not in section etc) -->
</body>
</html>
OFIMÁTICA – Escue la de Tecno logía 13
CIBERTEC CARRERAS PROFESIONALES
Esta estructura, todavía, no es compatible con los navegadores de Internet, salvo algunos como Google Chrome, pero sólo con algunas directivas (etiquetas) como audio y video.
Por otro lado, la estructura de un documento HTML4 es más sencilla y compatible con todos los navegadores existentes en Internet.
Un documento HTML 4 se compone de tres partes:
1. Una línea que contiene información sobre la versión de HTML, 2. Una sección de cabecera declarativa (delimitada por el
elemento HEAD), 3. Un cuerpo, que contiene el contenido real del documento. El cuerpo
puede ser especificado mediante el elemento BODY o mediante el elemento FRAMESET.
Puede aparecer espacio en blanco (espacios, saltos de línea, tabulaciones y comentarios) antes y después de cada sección. Las secciones 2 y 3 deberían estar delimitadas por el elemento HTML. Aquí, tenemos un ejemplo de un documento HTML sencillo:
1.1.2 Diferencias básicas entre HTML4 y HTML5
En la versión HTML, se diseñaba una página web haciendo uso de las
capas div para crear secciones. Ahora, HTML5 tiene etiquetas propias que
permiten crear secciones automáticamente con ciertos comportamientos
típicos de una página estándar.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Mi primer documento HTML</TITLE>
</HEAD>
<BODY>
<P>¡Hola mundo!
</BODY>
</HTML>
14
CARRERAS PROFESIONALES CIBERTEC
1.1.3 Directivas o etiquetas Las directivas o etiquetas son declaraciones para visualizar o dar forma a
una página web.
Las etiquetas son marcas insertadas en un documento HTML para
proporcionar información sobre una unidad o contenido. Existen reglas
básicas de las etiquetas HTML.
Las etiquetas están encerradas entre los signos "<" y ">".
Las etiquetas, generalmente, vienen en pares <p> y <⁄p>.
La primera es de apertura y la segunda de cierre.
El texto que se encuentra entre dos etiquetas es el contenido del
elemento.
Las etiquetas no son sensibles a las mayúsculas y minúsculas, o
sea <b> es lo mismo que <B>.
OFIMÁTICA – Escue la de Tecno logía 15
CIBERTEC CARRERAS PROFESIONALES
Las etiquetas tienen una estructura simple. Comienzan con un caracter < y
terminan con un caracter >. Entre los caracteres <> está el nombre de la
etiqueta y quizá algunos atributos dependiendo de la etiqueta. La mayoría
de los atributos toman un valor también. Algunos atributos son requeridos y
otros, opcionales. La forma general de una etiqueta es la siguiente:
<nombre_de_la_etiqueta atributo1="valor1" atributo2="valor2" ... >
Los nombres de etiqueta y de atributos no son de caso sensitivo, pero
algunos atributos y valores sí lo son. El nombre de la etiqueta debe ir
primero, pero el orden de los atributos es indistinto. De esta manera,
puedes escribir esta etiqueta así:
<NOMBRE_DE_LA_ETIQUETA ATRIBUTO2="valor2" ATRIBUTO1="valor1" ... >
La siguiente es una lista de algunas etiquetas más importantes:
Etiqueta Descripción
<body text=?> Asigna un tamaño de texto especificado a
toda la página web.
<pre> </pre> Crea texto preformateado.
<hl> </hl> Crea un título grande.
<h6> </h6> Crea un título pequeño.
<b> </b> Crea texto en negritas.
<strong> </strong> Enfatiza una palabra (con itálicas o
negritas),
<font size=?> </font> Setea el cuerpo de la fuente de 1 a 7.
<font color=?> </font> Setea el color de la fuente con nombres o
valores hex.
<a href=”URL”> </a> Crea un hipervínculo.
<a href=”mailto:EMAIL”> </a> Crea un enlace de email.
<a name=”NAME”> </a> Crea un enlace dentro del documento.
<a href=”#NAME”> </a> Vincula al target dentro del documento.
<p> </p> Crea un párrafo nuevo.
<p align=?> Alinea un párrafo (izquierda, centro,
derecha),
<br> Inserta un salto de línea.
<blockquote> </blockquote> Un tag genérico utilizado
16
CARRERAS PROFESIONALES CIBERTEC
<div align=?> para formatear grandes bloques de HTML
es usado, también, para stylesheets.
<img src=”name”> Agrega una imagen.
<img src=”name” align=?> Alinea una imagen.
<img src=”name” border=?> Setea el grosor del borde de la imagen.
<hr> Inserta una linea horizontal.
<hr size=?> Setea la altura de una línea.
<hr width=?> Setea el ancho de la línea en porcentaje o
números absolutos.
<hr noshade> Inserta una línea horizontal sin sombra.
<table> </table> Crea una tabla.
Se puede diseñar una página con solo tener un navegador, un editor de
textos y conocer las etiquetas HTML. Sin embargo, con la aparición de
programas especializados en diseño web, usaremos en este curso Adobe
Dreamweaver
1.1.4 La Herramienta Dreamweaver
Dreamweaver es un editor HTML profesional para diseñar, codificar y
desarrollar sitios, páginas y aplicaciones web. Si desea controlar
manualmente el código HTML o trabajar en un entorno de edición visual,
Dreamweaver le proporciona herramientas útiles que mejoran su experiencia
en la creación web.
Las funciones de edición visual de Dreamweaver permiten crear páginas de
forma rápida, sin escribir una sola línea de código. No obstante, si prefiere
crear el código manualmente, Dreamweaver, también, incluye numerosas
herramientas y funciones relacionadas con la codificación.
Ingresar a Dreamweaver
Para ingresar a Dreamweaver, realice el siguiente procedimiento:
a) Clic en el botón Inicio de su Escritorio.
b) Seleccione la opción Todos los programas.
c) Seleccione la opción Adobe Master Collection CS5.
d) Haga clic en la opción Adobe Dreamweaver CS5.
OFIMÁTICA – Escue la de Tecno logía 17
CIBERTEC CARRERAS PROFESIONALES
El entorno de Dreamweaver Lo que a continuación sigue son breves descripciones de las ventanas y otros elementos del espacio de trabajo de Dreamweaver. Más adelante, en esta misma guía, encontrará información más específica de cómo utilizar estas ventanas.
A. Barra Insertar B. Barra de herramientas Documento C. Ventana de documento D. Grupos de paneles E. Selector de etiquetas F. Inspector de propiedades G. Panel Archivos
El entorno de trabajo incluye los siguientes elementos:
Ventana de bienvenida
La ventana de bienvenida le permite abrir un documento reciente o crear
un documento nuevo. Desde esta pantalla, también, puede profundizar
sus conocimientos sobre Dreamweaver mediante una visita guiada o un
tutorial del producto.
Barra Insertar
La barra Insertar contiene botones para la inserción de diversos tipos de
objeto, como imágenes, tablas y elementos PA en un documento. Cada
objeto es un fragmento de código HTML que le permite establecer
diversos atributos al insertarlo. Por ejemplo, puede insertar una tabla
18
CARRERAS PROFESIONALES CIBERTEC
haciendo clic en el botón Tabla de la barra Insertar. Asimismo, si lo
prefiere, puede insertar objetos utilizando el menú Insertar en lugar de la
barra Insertar.
Barra de herramientas Documento
La barra de herramientas Documento contiene botones que proporcionan
opciones para diferentes vistas de la ventana de documento (vista Diseño
y vista Código), así como diversas opciones de visualización y algunas
operaciones comunes, como la obtención de una vista previa en un
navegador.
Barra de herramientas Estándar
La barra de herramientas Estándar no se muestra en el diseño de
espacio de trabajo predeterminado. Ésta contiene botones para las
operaciones más habituales de los menús Archivo y Edición: Nuevo,
Abrir, Guardar, Guardar todo, Cortar, Copiar, Pegar, Deshacer y Rehacer.
Para mostrar la barra de herramientas Estándar, seleccione Ver > Barras
de herramientas > Estándar.
Barra de herramientas Codificación
La barra de herramientas Codificación sólo se muestra en la vista Código.
Ésta contiene botones que le permiten realizar numerosas operaciones
de codificación estándar.
Barra de herramientas Representación de estilos
La barra de herramientas Representación de estilos está oculta de
manera predeterminada. Ésta contiene botones que le permiten ver
cómo aparecería el diseño en distintos tipos de medios si utilizase hojas
de estilos dependientes de los medios. También, contiene un botón que
le permite activar o desactivar estilos de hoja de estilos en cascada
(CSS).
Ventana de documento
La ventana del documento muestra el documento actual mientras lo está
creando y editando.
OFIMÁTICA – Escue la de Tecno logía 19
CIBERTEC CARRERAS PROFESIONALES
Inspector de propiedades
El Inspector de propiedades le permite ver y cambiar diversas
propiedades del objeto o texto seleccionado. Cada tipo de objeto tiene
diferentes propiedades. El Inspector de propiedades no está ampliado de
forma predeterminada en el Diseño del espacio de trabajo del codificador.
Selector de etiquetas
El Selector de etiquetas está situado en la barra de estado de la parte
inferior de la ventana del documento. Muestra la jerarquía de etiquetas
que rodea a la selección actual. Puede hacer clic en cualquier etiqueta
de la jerarquía para seleccionarla y ver todo su contenido.
Grupos de paneles
Los grupos de paneles lo conforman paneles relacionados y agrupados
bajo un encabezado común. Para ampliar un grupo de paneles, haga clic
en la flecha de ampliación situada a la izquierda del nombre del grupo.
Para desacoplar un grupo de paneles, arrastre el punto de sujeción
situado en el borde izquierdo de la barra de título del grupo.
Panel Archivos
El panel Archivos le permite administrar los archivos y las carpetas, tanto
si forman parte de un sitio de Dreamweaver como si se encuentran en un
servidor remoto. El panel Archivos, también, proporciona acceso a todos
los archivos del disco local, como ocurre en el Explorador de Windows
(Windows) o en el Finder (Macintosh).
Sitios en Dreamweaver
Un sitio web es un conjunto de documentos activos vinculados con
atributos compartidos, como temas relacionados, un diseño similar o un
objetivo común. Dreamweaver es una herramienta de creación y
administración de sitios, por lo que puede utilizarlo para crear documentos
individuales y sitios web completos.
En Dreamweaver, el término “sitio” se emplea para referirse a una
ubicación de almacenamiento local o remoto de los documentos que
pertenecen a un sitio web. Un sitio de Dreamweaver permite organizar y
20
CARRERAS PROFESIONALES CIBERTEC
administrar todos los documentos web, cargar el sitio en un servidor web,
controlar y mantener vínculos, y administrar y compartir archivos. Para
aprovechar al máximo las funciones de Dreamweaver, debe definir un
sitio.
Crear el sitio
Para crear el sitio, lo primero que debe hacer es crear una carpeta que
será el sitio donde van a residir todas sus páginas y todos los archivos
que vaya añadiendo. Es recomendable que esta carpeta la cree
directamente en el disco duro C. Luego, ejcute los siguientes pasos:
1. Haga clic en el menú Sitio de la barra de Menús
2. Elija Administrar sitios.
3. Haga clic en el botón Nuevo de la ventana Administrar sitios.
4. Ingrese el nombre para el nuevo Sitio. Por ejemplo, escriba Clase 1.
5. Después, haga clic en el botón Siguiente.
6. En la siguiente pantalla, la opción “No, no quiero usar tecnología de
servidor” debe estar seleccionada.
7. Haga otra vez clic en Siguiente.
8. Clic en el icono y, ahora sí, seleccione una carpeta.
9. Clic en Siguiente para ir al siguiente paso.
10. Seleccione la opción Ninguno en el cuadro ¿Cómo se conecta a su
servidor remoto?
11. Clic en Siguiente.
12. Clic en Listo.
13. Clic en Listo, otra vez, para terminar.
OFIMÁTICA – Escue la de Tecno logía 21
CIBERTEC CARRERAS PROFESIONALES
Observe el lateral inferior derecho de la ventana de Dreamweaver.
Aparece abierto el sitio que se acaba de crear y que está alojado en una
carpeta denominada Clase 1 en el disco duro C. Sin embargo, todavía, no
hay ningún documento para trabajar.
Crear un documento HTML
Para crear un documento, haga lo siguiente:
1. Clic en el menú Archivo > Nuevo
2. Seleccione la opción HTML de la categoría Página en blanco.
22
CARRERAS PROFESIONALES CIBERTEC
3. Haga clic en el botón Crear.
En la ventana múltiple, ya se ha creado un primer archivo que
Dreamweaver llama Untitled-1. Observe la pestaña superior izquierda del
espacio mayor vacío.
Por otro lado, el documento (no el archivo) que será la página, tampoco
tiene título.
1.2 INSERCIÓN DE IMÁGENES
Para insertar una imagen, es conveniente tenerla previamente guardada en la
carpeta del sitio. De lo contrario, Dreamweaver nos advertirá para que
guardemos una copia en la carpeta correspondiente.
Las imágenes pueden estar sueltas en la carpeta raíz junto con los archivos de
cada uno de los documentos o, mucho mejor, en una carpeta especial dentro del
sitio a la que llamaremos imágenes (nombre de los archivos y carpetas sin
acentos) o cualquier otro nombre que nos sugiera que, dentro de esa carpeta,
están nuestras imágenes.
A propósito de las imágenes, es muy importante que controlemos el tamaño de
las mismas para que no tarden mucho tiempo en su descarga cuando alguien
visite nuestra página. Cuando insertamos una imagen, aparece, en el cuadro de
diálogo, una información sobre el tamaño y el tiempo de descarga aproximado.
1.2.1 Mapas de imágenes
Un mapa de imagen es una imagen que se ha dividido en regiones o zonas
interactivas. Cuando el usuario hace clic en una zona interactiva, se realiza
una acción, por ejemplo se abre un archivo nuevo. Utilice el Inspector de
OFIMÁTICA – Escue la de Tecno logía 23
CIBERTEC CARRERAS PROFESIONALES
propiedades de imagen para crear y editar gráficamente mapas de imagen
del lado del cliente.
Insertar un mapa de imagen
Cuando inserte un mapa de imagen del lado del cliente, cree una zona
interactiva y, a continuación, defina un vínculo que se abra cuando el
usuario haga clic en la zona interactiva. Puede crear múltiples zonas
interactivas, pero formarán parte del mismo mapa de imagen.
Para crear un mapa de imagen del lado del cliente, haga lo siguiente:
1. En la ventana de documento, seleccione la imagen.
2. En el inspector de propiedades, haga clic en la flecha de ampliación,
situada en la esquina inferior derecha, para ver todas las propiedades.
3. En el campo Mapa, introduzca un nombre exclusivo para el mapa de
imagen. Si utiliza múltiples mapas de imagen en el mismo documento,
asigne un nombre exclusivo a cada uno.
24
CARRERAS PROFESIONALES CIBERTEC
4. Para definir las áreas de mapas de imagen, realice una de estas
operaciones:
Seleccione la herramienta circular y arrastre el puntero sobre la
imagen para crear una zona interactiva circular.
Seleccione la herramienta de rectángulo y arrastre el puntero
sobre la imagen para crear una zona interactiva rectangular.
Seleccione la herramienta poligonal y defina una zona interactiva
con forma irregular haciendo clic una vez en cada esquina. Haga
clic en la herramienta de flecha para cerrar la forma.
Después de crear las zonas interactivas, aparecerá el Inspector de
propiedades de zonas interactivas.
5. Seleccione las opciones deseadas del Inspector de propiedades de
zonas interactivas. Por ejemplo, en la propiedad Link, puede seleccionar
el archivo que se abrirá con esta zona interactiva.
6. Cuando termine de definir el mapa de imagen, haga clic en un área en
blanco del documento para cambiar el Inspector de propiedades.
Modificación de un mapa de imagen
Puede editar fácilmente las zonas interactivas creadas en un mapa de
imagen. Puede mover un área de zona interactiva, cambiar el tamaño de
éstas; incluso, puede adelantar o retrasar una zona interactiva en una
capa.
OFIMÁTICA – Escue la de Tecno logía 25
CIBERTEC CARRERAS PROFESIONALES
También, puede copiar una imagen con zonas interactivas de un
documento a otro, o copiar una o más zonas interactivas de una imagen y
pegarlas en otra imagen. Las zonas interactivas asociadas a la imagen,
también, se copiarán en el nuevo documento.
Para seleccionar múltiples zonas interactivas, en un mapa de imagen,
haga lo siguiente:
1. Utilice la herramienta de puntero para seleccionar una zona
interactiva.
2. También, puede realizar una de estas operaciones:
Mantenga presionada la tecla Mayús mientras hace clic en las
zonas interactivas que desea seleccionar.
Presione Control+A para seleccionar todas las zonas interactivas.
Para mover una zona interactiva, haga lo siguiente:
1. Utilice la herramienta de puntero para seleccionar la zona interactiva
que desea mover.
2. Luego, realice una de estas operaciones:
Arrastre la zona interactiva a una nueva área.
Utilice Mayús y las teclas de flecha para mover una zona
interactiva 10 píxeles en la dirección seleccionada.
Utilice las teclas de flecha para mover una zona interactiva un
píxel en la dirección seleccionada.
Para cambiar el tamaño de una zona interactiva, haga lo siguiente:
1. Utilice la herramienta de puntero para seleccionar la zona interactiva
cuyo tamaño desea cambiar.
2. Luego, arrastre el manejador de zona interactiva para cambiar el
tamaño o la forma de la zona interactiva.
26
CARRERAS PROFESIONALES CIBERTEC
1.2.2 Imagen de sustitución
Una imagen de sustitución es aquella que, al visualizarse en un navegador,
cambia cuando el puntero pasa sobre ella. Una imagen de sustitución
consta, en realidad, de dos imágenes: la imagen principal (la que aparece al
cargarse inicialmente la página) y la imagen secundaria (la que aparece al
pasar el puntero sobre la imagen principal). Ambas imágenes deben tener
el mismo tamaño. Si las imágenes tienen tamaños distintos, Dreamweaver
cambia automáticamente el tamaño de la segunda imagen para que se
ajuste a las propiedades de la primera.
No es posible ver el efecto de una imagen de sustitución en la ventana de
documento de Dreamweaver. Si desea ver el efecto de sustitución, presione
F12 para obtener una vista previa de la imagen en un navegador y, a
continuación, pase el puntero por la imagen.
Las imágenes de sustitución están automáticamente configuradas para que
respondan al evento onMouseOver. Para crear una imagen de sustitución,
haga lo siguiente:
1. En la ventana de documento, sitúe el punto de inserción en el lugar donde
desea que aparezca la imagen de sustitución.
2. En el menú Insertar, seleccione Objetos de imagen y luego haga clic en
Imagen de sustitución.
Se abre el cuadro de diálogo Insertar imagen de sustitución.
OFIMÁTICA – Escue la de Tecno logía 27
CIBERTEC CARRERAS PROFESIONALES
3. En el campo Nombre de la imagen, introduzca un nombre para la
imagen de sustitución.
4. En el cuadro de texto Imagen original, haga clic en Examinar y
seleccione la imagen que desea que aparezca al cargarse la página o
introduzca la ruta del archivo de imagen en el cuadro de texto.
5. En el cuadro de texto Imagen de sustitución, haga clic en Examinar y
seleccione la imagen que desea que aparezca al pasar el puntero sobre
la imagen original o introduzca la ruta del archivo de imagen en el cuadro
de texto.
6. Si desea que las imágenes se carguen previamente en el caché del
navegador para que la imagen no tarde en aparecer cuando el usuario
pase el puntero sobre la imagen, seleccione la opción Carga previa de
imagen de sustitución.
7. En Texto alternativo, introduzca un texto que describa la imagen para
los usuarios que utilicen un navegador no gráfico. (Opcional)
8. En el campo Al hacer clic, ir al URL, haga clic en Examinar y
seleccione el archivo o escriba la ruta del archivo que desea que se abra
cuando un usuario haga clic en la imagen de sustitución.
Nota: Si no establece un vínculo para la imagen, Dreamweaver insertará
un vínculo nulo (#) en el código HTML relativo al comportamiento de
sustitución. Si elimina el vínculo nulo, la imagen de sustitución dejará de
funcionar.
9. Haga clic en OK para cerrar el cuadro de diálogo Insertar imagen de
sustitución.
10. Para comprobarlo, elija el menú Archivo > Vista previa en el
navegador o presione la tecla F12. Luego, en el navegador, desplace el
puntero sobre la imagen original. Debe aparecer la imagen de sustitución
28
CARRERAS PROFESIONALES CIBERTEC
1.2.3 Tablas
Las tablas constituyen una herramienta muy eficaz para presentar datos en
una tabla y establecer la disposición de texto y gráficos en una página
HTML. Existen tres formas de diseñarlas: modo Estándar, modo Expandido
y modo de Diseño.
Una tabla consta de una o varias filas, donde cada una consta, a su vez, de
una o más celdas. Aunque las columnas no suelen especificarse
explícitamente en el código HTML, Dreamweaver permite manipular tanto
columnas como filas y celdas. Después de crear una tabla, podrá modificar
fácilmente su aspecto y estructura.
1.2.3.1 Insertar
En la vista Diseño de la ventana de documento, sitúe el punto de
inserción donde desee que aparezca la tabla.
Nota: Si no hay ningún contenido en el documento, la única ubicación
posible será al principio del mismo.
Elija menú Insertar > Tabla.
Se mostrará el cuadro de diálogo Insertar tabla.
OFIMÁTICA – Escue la de Tecno logía 29
CIBERTEC CARRERAS PROFESIONALES
Introduzca los nuevos valores que desee.
Podemos determinar el número de filas, columnas, ancho de la tabla
en píxeles o porcentaje, especificar si queremos que la tabla tenga
borde e indicarle el grosor del borde dado el caso.
El relleno de celda hace referencia al espacio que queremos que exista
entre el texto o lo que coloquemos en cada una de las celdas, y su borde.
El espacio entre celdas es el espacio que queremos que haya entre una
celda y otra. Ambos se indican en píxeles y se pueden quedar vacíos en
el caso de que queramos que tanto el relleno de celda como el espacio
entre celdas sea el mínimo posible.
A modo de ejemplo, vamos a insertar una tabla con 3 filas y 6 columnas,
y que ocupe el 80 % del ancho, un borde de 2 píxeles y un relleno de
celda de 5 píxeles.
Lunes Martes Miércoles Jueves Viernes
Mañana
Tarde
1.2.3.2 Modificar
Si ponemos el cursor en cualquier punto de la tabla, en la barra de
estado, encontraremos las etiquetas html.
La etiqueta <body> hace referencia a todo el documento que se visualiza
con el navegador. La etiqueta <table> hace referencia a la tabla entera;
la etiqueta <tr>, a la fila en la que está el cursor; y la etiqueta <td>, a la
celda. Observa que la última etiqueta está más brillante. Eso quiere
decir que es la celda la que está seleccionada.
30
CARRERAS PROFESIONALES CIBERTEC
Por debajo de esta barra de estado, nos encontramos con el panel del
Inspector de propiedades que hará referencia a la celda en la que, en ese
momento, esté el cursor:
Desde ese panel, podemos cambiar las propiedades de la celda en
cuestión. Si desde la barra de Estado pulsamos la etiqueta <table>, se
seleccionará toda la tabla. Si ahora vemos las propiedades, éstas serán
las propiedades de la tabla y, desde allí, podemos cambiar las
propiedades de la tabla y su configuración.
Propiedad Acción
Filas Modificar el número de filas
Cols Modificar el número de columnas
An Modificar la anchura de la tabla
Rell. Celda Modificar el espacio entre los bordes y el
contenido
Esp. celda Modificar el espacio entre las celdas
Alinear Modificar la alineación
Borde Modificar el grosor del borde
Col. fondo Establecer un color de fondo
Col. borde Establecer un color de borde
Im. Fondo Establecer una imagen de fondo
Para hacer cambios a una fila, colocamos el cursor en una celda de esa
fila y marcamos la etiqueta <tr> de la barra de Estado. Así, quedará
OFIMÁTICA – Escue la de Tecno logía 31
CIBERTEC CARRERAS PROFESIONALES
seleccionada la fila entera. Desde el Panel de propiedades, podemos
hacer los cambios oportunos.
Si pulsamos, por ejemplo, el botón , el texto que esté escrito en las
celdas de esa fila se colocará centrado en cada una de las celdas. Si
pulsamos, por ejemplo, el botón el texto escrito pasará a estar en
negrita.
Otra forma de seleccionar filas y/o celdas consiste en situar el cursor en
una de las celdas y arrastrar con el mouse hasta donde se desee.
1.3 CREACIÓN DE ENLACES
Los vínculos, hipervínculos, enlaces, hiperenlaces (todas estas palabras designan
el mismo concepto) son los elementos más importantes del lenguaje HTML con
los que se construyen las páginas web. A continuación, detallaremos los diversos
tipos de vínculos que se pueden crear en una página web.
1.3.1 Enlaces externos
El enlace externo es, quizá, el vínculo más usado. Para ello, seleccione el
elemento que le va a servir para enlazar (puede ser una palabra, una frase o
una imagen). Una vez que lo ha seleccionado, hace clic en el icono de la
propiedad Vínculo del Panel de propiedades. Luego, seleccione el nombre
del archivo para establecer el enlace o vínculo.
Supongamos que quiere hacer que el logotipo de Cibertec sea un vínculo a
la página de Cibertec. Para ello, seleccione y escriba la URL de la página
http://www.cibertec.edu.pe en la caja de texto:
32
CARRERAS PROFESIONALES CIBERTEC
Como en el caso anterior, compruebe que funciona. Para ello, presione la
tecla F12 y compruébelo con el navegador.
1.3.2 Enlaces internos
Un enlace interno es cuando se quiere hacer clic en un enlace y éste nos
lleve al principio de la página, al final o al comienzo de un apartado
determinado, pero siempre dentro del mismo documento. Para ello, primero,
hay que hacer marcas con el botón Anclaje con nombre, que está en el
menú Insertar, en los puntos donde se quiere nos lleve el vínculo.
Posteriormente, se crean los enlaces en dichos puntos. Para ello,
seleccione el texto o imagen y luego haga clic en la opción Hipervínculo del
menú Insertar. Finalmente, seleccione el nombre del punto al cual desea
vincularse.
OFIMÁTICA – Escue la de Tecno logía 33
CIBERTEC CARRERAS PROFESIONALES
1.3.3 Enlaces Mixtos
Los dos tipos de vínculos anteriores se pueden combinar, de tal manera que
podamos ir a partes concretas de otros documentos. En este caso, una vez
definido el punto de fijación con nombre en el documento correspondiente,
se establece el enlace escribiendo el nombre de la página con su extensión
.htm seguido del signo # y el nombre del punto de fijación.
Por ejemplo, un enlace a un punto llamado historia del archivo Cuzco.htm
seria de la siguiente manera:
Cuzco.htm#historia
1.4 DISEÑO CON PLANTILLAS
Una plantilla es un tipo especial de documento que sirve para crear un diseño de
página “fijo” con la finalidad de crear documentos basados en ésta y así heredar
todo su diseño de página. Por esta razón, al diseñar una plantilla, usted
especifica como "editables" aquellos contenidos que los usuarios van a poder
editar de un documento basado en ésta. En otras palabras, los autores de las
plantillas pueden controlar qué elementos de la página pueden editar los usuarios
de la plantilla (como los redactores, los diseñadores gráficos y otros
desarrolladores web). El autor de una plantilla puede incluir varios tipos de
regiones de plantilla en un documento.
Para crear la plantilla, haga lo siguiente:
1. Elija el menú Nuevo > Plantilla en blanco > Plantilla HTML > ninguno.
2. Haga clic en el botón Crear
Le aparecerá la siguiente ventana:
34
CARRERAS PROFESIONALES CIBERTEC
Se debe mostrar, en la barra de títulos de su archivo, lo siguiente:
1.4.1 Insertar regiones
Al guardar un documento como plantilla, se bloquean la mayoría de las
regiones del documento. Como autor de la plantilla, debe especificar qué
regiones del documento basado en plantilla serán editables. Para ello,
inserte regiones editables o parámetros editables en la plantilla.
A medida que cree la plantilla, podrá realizar cambios tanto en las regiones
editables como en las bloqueadas. Sin embargo, en un documento basado
en plantilla, el usuario de la plantilla sólo podrá realizar cambios en las
regiones editables y no en las regiones bloqueadas. Una plantilla contiene
cuatro tipos de regiones.
OFIMÁTICA – Escue la de Tecno logía 35
CIBERTEC CARRERAS PROFESIONALES
Una región editable
Una región editable es una región no bloqueada de un documento basado
en plantilla, es decir, una sección que el usuario de la plantilla puede editar.
El autor de una plantilla puede especificar cualquier área de la plantilla como
editable. Para que una plantilla sea efectiva, deberá contener al menos una
región editable. En caso contrario, las páginas basadas en la plantilla no se
podrán editar.
Una región repetida
Una región repetida es una sección del diseño del documento que se
establece para que el usuario de la plantilla pueda añadir o eliminar copias
de esta región en su documento según le resulte oportuno. Por ejemplo,
puede definir que una fila de una tabla se repita. Las secciones repetidas
son editables para que el usuario de la plantilla pueda editar el contenido del
elemento repetido, mientras que el diseño propiamente dicho está
controlado por el autor de la plantilla.
Existen dos tipos de regiones repetidas que se pueden insertar en una
plantilla: región repetida y tabla repetida.
Una región opcional
Una región opcional es una sección de la plantilla en la que hay contenido
(como texto o una imagen) que puede aparecer o no en un documento. En
la página basada en la plantilla, el usuario de la plantilla suele controlar si el
contenido se mostrará.
Para insertar una región editable, en la celda cambiante, seleccione la celda
del lado derecho (celda cambiante) y, luego, elija el menú Insertar > Objetos
de plantilla > Región editable. Finalmente, ingrese el texto que desee
mostrar por defecto. El texto debe insertarse dentro del marco de la región.
36
CARRERAS PROFESIONALES CIBERTEC
Para insertar una región repetida, seleccione la celda permanente y, luego,
elija el menú Insertar > Objetos de plantilla > Región repetida. Finalmente,
inserte o mueva el texto en el marco de esa región.
1.4.2 Guardar una plantilla
Para guardar la plantilla, simplemente, seleccione la opción Guardar como
plantilla del menú Archivo. Luego, le asigna un nombre a la plantilla y,
finalmente, haga clic en el botón Guardar.
OFIMÁTICA – Escue la de Tecno logía 37
CIBERTEC CARRERAS PROFESIONALES
1.4.3 Crear páginas basadas en una plantilla
Para crear páginas web basadas en una plantilla, haga lo siguiente:
• Seleccione menú Archivo > Nuevo > Página de plantilla.
• Haga clic en el nombre de la plantilla que quiere utilizar.
• Clic en el botón Crear.
Se puede reconocer un archivo que ha sido creado a partir de una plantilla
cuando aparece en la esquina superior derecha de su página web el
nombre de la plantilla. Además, en la región repetida, aparece una pequeña
barra con botones.
Luego de haber creado algunas páginas basadas en la plantilla, diseñe
desde ésta los enlaces correspondientes. Si se trata de una imagen, debe
38
CARRERAS PROFESIONALES CIBERTEC
usar enlaces de mapas de imagen. Si son textos, debe crear enlaces de
textos.
1.4.4 Actualizar páginas (documentos) basadas en una plantilla
Cuando realiza un cambio en una plantilla, Dreamweaver le solicita que
actualice los archivos basados en la plantilla, pero puede actualizar
manualmente el archivo actual o el sitio entero si es necesario. Actualizar
manualmente los archivos basados en plantilla es lo mismo que volver a
aplicar la plantilla.
Para aplicar los cambios realizados en la plantilla, en la página (documento)
basada en la plantilla actual, realice lo siguiente:
1. Abra el documento.
2. Seleccione menú Modificar > Plantillas > Actualizar página actual.
Dreamweaver va a actualizar el documento con todos los cambios de la
plantilla.
Puede actualizar todas las páginas del sitio o únicamente las páginas
correspondientes a una plantilla determinada.
1. Seleccione Modificar > Plantillas > Actualizar páginas.
2. En la ventana que le aparece, en la opción Buscar en, siga uno de estos
procedimientos:
Para actualizar todos los archivos del sitio seleccionado a sus
correspondientes plantillas, seleccione Todo el sitio y, a
OFIMÁTICA – Escue la de Tecno logía 39
CIBERTEC CARRERAS PROFESIONALES
continuación, seleccione el nombre del sitio en el menú emergente
adyacente.
Para actualizar los archivos correspondientes a una plantilla
determinada, seleccione Archivos que usan y, a continuación,
seleccione el nombre de plantilla en el menú emergente adyacente.
En esta misma ventana, asegúrese de que Plantillas está seleccionado
en la opción Actualizar. Asimismo, si no desea ver un registro de los
archivos que Dreamweaver actualiza, desactive la opción Mostrar
registro, sino deje la opción seleccionada. Luego, haga clic en el botón
Iniciar para actualizar los archivos como se ha indicado. Si había
seleccionado la opción Mostrar registro, Dreamweaver proporcionará
información sobre los archivos que intenta actualizar e indicará si se han
actualizado satisfactoriamente. Finalmente, haga clic en Cerrar.
1.5 FORMULARIOS
Un formulario es una de las herramientas más útiles en toda página web. Éste
recoge información del visitante, la cual se almacena en el servidor o se nos envía
a través de una dirección de correo electrónico.
Se debe activar la barra Formularios para poder diseñar uno. Para ello, haga clic
en la pestaña Formulario de la barra de herramientas Insertar.
1.5.1 Crear un formulario HTML:
Para insertar un formulario, haga lo siguiente:
1. Abra una página y sitúe el punto de inserción donde desee que
aparezca el formulario.
40
CARRERAS PROFESIONALES CIBERTEC
2. Seleccione el menú Insertar > Formulario > Formulario o seleccione la
categoría Formularios en la barra de herramientas Insertar y haga clic
en el icono Formulario.
Dreamweaver inserta un formulario vacío. En modo Diseño, los formularios
aparecen indicados mediante un contorno de línea de puntos de color rojo.
Si no ve el contorno, compruebe en el menú Ver > Ayudas visuales >
Elementos invisibles esté seleccionada.
3. En el Panel de Propiedades, especifique la página o el script que
procesará los datos del formulario en la propiedad Acción.
Nota.- Esto, en este curso, no se aplica ya que el objetivo es el diseño
en el lado del cliente y no desde el servidor.
4. Indique el método que va a utilizar para transmitir los datos del
formulario al servidor.
Nota.- La propiedad Método tampoco se usará por las razones antes
expuestas.
5. Inserte los objetos de formulario.
Sitúe el punto de inserción en el lugar del formulario en el que desee
que aparezca el objeto del formulario y, a continuación, seleccione el
objeto en el menú Insertar > Formulario o en la categoría Formularios de
la barra de herramientas Insertar.
OFIMÁTICA – Escue la de Tecno logía 41
CIBERTEC CARRERAS PROFESIONALES
6. Ajuste el diseño del formulario como lo desee.
Puede utilizar saltos de línea, saltos de párrafo, texto con formato
predeterminado o tablas para aplicar formato a los formularios. No puede
insertar un formulario en otro formulario (es decir, superponer etiquetas),
pero puede incluir varios formularios en una misma página.
Cuando diseñe formularios, asigne textos descriptivos a las etiquetas de los
campos para que los usuarios puedan saber a qué están contestando. Por
ejemplo, utilice la etiqueta "Escriba su nombre" para solicitar el nombre del
usuario.
Utilice tablas para estructurar los objetos del formulario y las etiquetas de los
campos. Cuando utilice tablas, en los formularios, asegúrese de que todas
las etiquetas table estén situadas entre las etiquetas form.
1.5.2 Insertar objetos de formulario
En Dreamweaver, los tipos de entrada de los formularios se denominan
objetos de formulario. Los objetos de formulario son mecanismos que
permiten a los usuarios introducir datos. Puede añadir, a un formulario, los
siguientes objetos de formulario:
Campos de texto
Los campos de texto aceptan cualquier valor alfanumérico. El texto se
puede visualizar como una sola línea, como varias líneas y como un campo
de contraseña en el que el texto introducido se sustituye por asteriscos o
viñetas para ocultar el texto a otras personas que puedan estar mirándolo.
42
CARRERAS PROFESIONALES CIBERTEC
Nota: Las contraseñas y el resto de datos que se envían a un servidor,
mediante campos de contraseña, no están cifrados. Los datos transferidos
pueden ser interceptados y leídos como texto alfanumérico. Por esta razón,
debe facilitar siempre el cifrado de los datos que desea que permanezcan
seguros.
Campos ocultos
Los campos ocultos permiten almacenar información introducida por el
usuario, como un nombre, una dirección de correo electrónico o una
preferencia de visualización, y utilizarla la próxima vez que el usuario visite
el sitio.
Botones
Los botones realizan acciones cuando se hace clic en ellos. Puede añadir
una etiqueta o un nombre personalizado a un botón, o bien usar una de las
etiquetas predefinidas: “Enviar” o “Restablecer”. Utilice un botón para enviar
datos del formulario al servidor o para restablecer el formulario. También, se
pueden asignar otras tareas de proceso definidas en un script. Por ejemplo,
el botón puede calcular el coste total de elementos seleccionados
basándose en los valores asignados.
OFIMÁTICA – Escue la de Tecno logía 43
CIBERTEC CARRERAS PROFESIONALES
Casillas de verificación
Las casillas de verificación admiten múltiples respuestas en un solo grupo
de opciones. Un usuario puede seleccionar tantas acciones como sean
necesarias. El siguiente ejemplo muestra tres casillas de verificación
seleccionadas: Surfing, Mountain Biking y Rafting.
Botones de opción
Los botones de opción representan opciones que se excluyen mutuamente.
Cuando se selecciona un botón de un grupo de botones de opción, se
desactivan todos los demás botones del grupo (un grupo está formado por
dos o más botones que comparten el mismo nombre). En el siguiente
ejemplo, la opción Rafting es la opción seleccionada en ese momento. Si el
usuario hace clic en Surfing, la opción Rafting se deselecciona
automáticamente.
Lista/menú
El objeto Lista/menú muestra valores de opciones en una lista de
desplazamiento, la cual permite a los usuarios seleccionar varias opciones.
La opción Lista muestra los valores de las opciones en un menú que permite
a los usuarios seleccionar una o varias opciones; por esta razón, ésta puede
mostrarlas a la vez si modifica la propiedad Alto y establece cuántas
opciones quiere ver en el listado. De otro lado, utilice los menús si dispone
44
CARRERAS PROFESIONALES CIBERTEC
de una cantidad de espacio limitada pero necesita mostrar muchos
elementos, o bien para controlar valores devueltos al servidor. A diferencia
de los campos de texto, en los que el usuario puede escribir todo lo que
desea, incluso datos no válidos, usted establece los valores exactos que
debe devolver una Lista/menú.
Lista Menú
Menú de salto
Un menú de salto es una lista de navegación o menú emergente que
permite insertar un menú en el que cada opción se vincula a un documento
o archivo.
Campo de archivo
Un campo de archivo permite al usuario examinar los archivos de su
ordenador y cargarlos como datos de un formulario.
Campo de imagen
Un campo de imagen permite insertar una imagen en un formulario. Utilice
los campos de imagen para crear botones gráficos, como Enviar o
Restablecer. El uso de una imagen, para llevar a cabo tareas distintas del
envío de datos, requiere adjuntar un comportamiento al objeto del
formulario.
OFIMÁTICA – Escue la de Tecno logía 45
CIBERTEC CARRERAS PROFESIONALES
ACTIVIDADES A DESARROLLAR EN CLASE
Actividad 1
Escriba el siguiente código en Dreamweaver. Active la vista Código para ello. El
resultado genera textos con hipervínculos o enlaces a páginas web:
<HTML>
<HEAD>
<TITLE> Mi página del web - 3 </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Mis páginas favoritas </H1>
</CENTER>
<HR>
Éstas son mis páginas favoritas:
<P>
<A HREF=”http://www.google.com”>Google</A>
<BR>
<A HREF=”http://www.microsoft.com”>Microsoft</A>
<BR>
<A HREF=”http://www.yahoo.com”>Yahoo!</A>
</BODY>
</HTML>
Grabe este documento como enlaces externos.html
46
CARRERAS PROFESIONALES CIBERTEC
Actividad 2
Abra un nuevo documento html y cree la siguiente lista anidada utilizando la vista
diseño.
Grabe este documento como lista anidada.html
Ficheros HTML
1. Ficheros de prueba
prueba1.html
prueba2.html
prueba2.html
2. Ficheros de ejemplos
3. Ficheros del servidor
Ficheros de imágenes
Ficheros de sonido
OFIMÁTICA – Escue la de Tecno logía 47
CIBERTEC CARRERAS PROFESIONALES
Actividad 3
Abra un nuevo documento html y cree otra lista anidada según el siguiente modelo:
Grabe este documento como aficiones.html
Mis aficiones
Sin un orden particular, mis aficiones son las siguientes:
El cine
El deporte
o Natación
o Baloncesto
La música
La música que más me gusta es (en orden de preferencia):
1. El rock
2. El jazz
3. La música clásica
48
CARRERAS PROFESIONALES CIBERTEC
Actividad 4
Diseña una página web mediante el uso de tablas e imágenes.
Descripción de la práctica:
La práctica consiste en diseñar la página web de acuerdo con el modelo mostrado en
esta actividad. Las imágenes de los carros de la derecha son imágenes de
sustitución. El reloj es un archivo de Flash. El menú de la izquierda lleva a diferentes
enlaces.
Procedimientos
1. Haga clic en el menú Insertar > Tabla.
2. En el cuadro de diálogo Tabla, ingrese los siguientes datos: Filas 3, Columnas
3, Ancho de tabla 800 pixeles y las demás propiedades en 0.
OFIMÁTICA – Escue la de Tecno logía 49
CIBERTEC CARRERAS PROFESIONALES
3. Haga clic en el botón Aceptar.
4. Seleccione todas las celdas de la tabla y cambie la propiedad Vert a la opción
Superior.
5. Seleccione la primera celda y asigne, en la propiedad An (ancho), el valor 150.
6. Haga lo mismo con la segunda y tercera celda con el valor 450 y 200
respectivamente.
7. Seleccione las celdas de la primera fila y haga clic en el botón Combina las
celdas seleccionadas usando extensores para que las tres celdas se unan
en una sola celda.
Haga clic en la primera celda de la nueva Tabla
50
CARRERAS PROFESIONALES CIBERTEC
8. Haga clic en la celda unida y luego inserte una tabla de 1 fila por 2 columnas.
9. Arrastre la imagen acurarsx.jpg del panel Archivos hacia la primera celda de la
nueva tabla.
OFIMÁTICA – Escue la de Tecno logía 51
CIBERTEC CARRERAS PROFESIONALES
10. Ajuste el ancho de la columna de esa celda al ancho de la imagen.
11. Luego, haga clic en la celda de la derecha y asigne como imagen de fondo al
archivo acurarelleno.jpg
12. Ajuste el alto de dicha celda al alto de la imagen acurarsx.jpg. Para ello,
seleccione la línea horizontal que divide a las celdas y arrastre hacia arriba
para ajustar el alto de la primera fila.
13. Posteriormente, siga las indicaciones de su profesor para terminar el ejercicio.
52
CARRERAS PROFESIONALES CIBERTEC
ACTIVIDADES A DESARROLLAR EN CLASE: PLANTILLAS
Actividad 5
Diseñar la siguiente página web con plantillas.
1. Cree una plantilla de la siguiente manera:
a) Seleccione la opción Nuevo del menú Archivo.
b) Seleccione la categoría Plantilla en blanco y Plantilla HTML.
c) En la sección Diseño, seleccione la opción <ninguno>
OFIMÁTICA – Escue la de Tecno logía 53
CIBERTEC CARRERAS PROFESIONALES
d) Luego, haga clic en el botón Crear.
2. A continuación, diseñe la plantilla
a) Inserte una tabla con las siguientes propiedades:
b) Inserte la imagen departamentos.gif en la columna de la izquierda.
c) Ajuste el ancho de las columnas a 150 y 550px respectivamente.
3. Cree las regiones repetidas y editables.
a) Haga clic sobre la imagen departamentos.gif y seleccione en el menú
Insertar > Objetos de plantilla > Región repetida.
b) Haga clic en Aceptar.
c) Haga clic en la celda de la derecha y seleccione en el menú Insertar >
Objetos de plantilla/ Región editable.
d) Haga clic en Aceptar.
54
CARRERAS PROFESIONALES CIBERTEC
4. Grabe su plantilla con el nombre modelo.
a) Seleccione el menú Archivo > Guardar.
5. Cree las páginas web (índice, lima, cuzco, puno y huaraz) basadas en la
plantilla modelo de la siguiente manera:
a) Seleccione el menú Archivo > Nuevo.
b) Haga clic en Página de plantilla.
c) Seleccione el Sitio al que pertenece la plantilla.
d) Seleccione el nombre de la plantilla con el nombre modelo.
e) Haga clic en el botón Crear.
OFIMÁTICA – Escue la de Tecno logía 55
CIBERTEC CARRERAS PROFESIONALES
f) Ingrese el contenido correspondiente para cada archivo y, luego, lo graba
con los nombres Indice, Lima, Cuzco, Puno y Huaraz respectivamente.
6. Cree los enlaces, desde la plantilla modelo.dwt, para cada archivo.
7. Grabe nuevamente su plantilla modelo. Dreamweaver le mostrará la siguiente
ventana:
8. Haga clic en el botón Actualizar para actualizar todas las páginas asociadas a
la plantilla.
9. Haga clic en el botón Cerrar para terminar la actualización.
56
CARRERAS PROFESIONALES CIBERTEC
10. Finalmente, grabe todos los archivos asociados a la plantilla y ejecute el
archivo indice.html
OFIMÁTICA – Escue la de Tecno logía 57
CIBERTEC CARRERAS PROFESIONALES
ACTIVIDADES A DESARROLLAR EN CLASE: FORMULARIOS
Actividad 6
Diseñar una página web con un formulario que pida información al usuario.
Procedimiento:
1. Cree una nueva página HTML.
2. Grabe el archivo con el nombre formulario.
3. Haga clic en la barra de herramienta Insertar y seleccione la ficha Formularios.
4. Haga clic en el botón Formulario para insertar un formulario.
58
CARRERAS PROFESIONALES CIBERTEC
5. Inserte una tabla de 3 columnas por 11 filas y 500px de ancho.
6. Defina el ancho de las columnas en 150, 10 y 340 px respectivamente.
7. Ingrese el texto Nombres y Apellidos.
8. Inserte un objeto Campo de texto en la tercera columna.
9. Aplique las siguientes propiedades:
10. Ingrese el texto Contraseña en la segunda fila de la primera columna.
11. Inserte otro objeto Campo de texto en la tercera columna.
12. Active la propiedad Contraseña.
OFIMÁTICA – Escue la de Tecno logía 59
CIBERTEC CARRERAS PROFESIONALES
13. Ingrese el texto Adjunte su currículo en la tercera fila de la primera columna.
14. Inserte un objeto Campo de archivo en la tercera columna.
15. Ingrese el texto Estado Civil en la cuarta fila de la primera columna.
16. Inserte un objeto Botón de opción en la tercera columna y, luego, el texto
Soltero. Haga lo mismo para el estado civil Casado.
17. Ingrese el texto Sexo en la quinta fila de la primera columna.
18. Inserte un objeto Botón de opción en la tercera columna y, luego, el texto
Femenino. Haga lo mismo para el sexo Masculino.
19. Ejecute su página web presionando la tecla de función F12. Compruebe el
comportamiento de los botones de opción.
60
CARRERAS PROFESIONALES CIBERTEC
20. Asigne a la propiedad nombre de los botones de opción Soltero y Casado el
valor radioEstado.
21. Asigne a la propiedad nombre de los botones de opción Femenino y Masculino
el valor radioSexo.
22. Ejecute, otra vez, su página web presionando la tecla de función F12.
Compruebe el comportamiento de los botones de opción.
23. Ingrese el texto Estudios realizados en la sexta fila de la primera columna.
24. Inserte un objeto Casilla de verificación en la tercera columna y, luego, el texto
Primaria. Haga lo mismo para los textos Secundaria y Superior.
25. Ingrese el texto Distrito de residencia en la séptima fila de la primera columna.
26. Inserte un objeto Lista/menú en la tercera columna.
OFIMÁTICA – Escue la de Tecno logía 61
CIBERTEC CARRERAS PROFESIONALES
27. Con este objeto seleccionado en la página, haga clic en el botón Valores de
lista del Panel de propiedades y, luego, ingrese las siguientes alternativas para
el objeto.
28. Haga clic en el botón Aceptar para terminar.
29. Ingrese el texto Seleccione uno o varios Softwares que domina en la octava fila
de la primera columna.
30. Inserte otro objeto Lista/menú en la tercera columna.
31. Modifique las siguientes propiedades de este nuevo objeto:
32. Con este objeto seleccionado en la página, haga clic en el botón Valores de
lista del Panel de propiedades y, luego, ingrese las siguientes alternativas para
el objeto.
62
CARRERAS PROFESIONALES CIBERTEC
33. Haga clic en el botón Aceptar para terminar.
34. Ingrese el texto Comentarios en la novena fila de la primera columna.
35. Inserte un objeto Área de texto en la tercera columna.
36. Modifique las propiedades Ancho car y Líneas núm a 40 y 6 respectivamente.
OFIMÁTICA – Escue la de Tecno logía 63
CIBERTEC CARRERAS PROFESIONALES
ACTIVIDADES PROPUESTAS
Diseñe la siguiente página web usando capas div o tablas.
Diseñe la siguiente página web usando capas div o tablas.
64
CARRERAS PROFESIONALES CIBERTEC
Diseñe los siguientes formularios:
OFIMÁTICA – Escue la de Tecno logía 65
CIBERTEC CARRERAS PROFESIONALES
Resumen
Antes de empezar a trabajar en Dreamweaver, es necesario que cree un Sitio web. Si va a editar, en su PC, una o varias páginas que fueron creadas en otra computadora, debe primero crear un sitio.
Dreamweaver ofrece dos métodos de visualización y manipulación de tablas: el modo estándar, en el que las tablas se presentan en forma de cuadrícula de filas y columnas, y el modo de diseño, que permite dibujar, cambiar el tamaño y mover cuadros en la página mientras se siguen utilizando tablas para la estructura subyacente.
Si desea saber más acerca de estos temas, puede consultar las siguientes
páginas: http://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/indice.htm
Aquí, hallará un tutorial de HTML.
http://www.programatium.com/dreamweaver.htm
En esta página, hallará un tutorial de Dreamweaver.
http://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/tablatut.htm
Aquí, hallará ejercicios sobre la etiqueta table para el diseño de tablas.
http://www.tutorial-enlace.net/tutorial-Como_insertar_tablas_en_Dreamweaver-
22268.html
http://livedocs.adobe.com/studio/8_es/exploring/wwhelp/wwhimpl/common/html/w
whelp.htm?context=LiveDocs_Parts&file=gs_04_pa.htm
En estas páginas, hallará un tutorial sobre tablas con Dreamweaver.
66
CARRERAS PROFESIONALES CIBERTEC
OFIMÁTICA – Escue la de Tecno logía 67
CIBERTEC CARRERAS PROFESIONALES
ESTILOS CSS
LOGRO DE LA UNIDAD DE APRENDIZAJE
Al término de la unidad, los alumnos construyen un sitio web y aplican estilos CSS a los elementos de dicho sitio.
TEMARIO
2.1. Tema 1: Introducción a estilos CSS (2 horas) 2.2. Tema 2: CSS para textos (2 horas) 2.3 Tema 3: CSS para contenedores (2 horas) Trabajo práctico No. 3: Desarrollo de un sitio web con estilos CSS 2.4 Tema 4: CSS para formularios (2 horas)
ACTIVIDADES PROPUESTAS
Los alumnos diseñan páginas web usando el lenguaje HTML en el programa Dreamweaver, las cuales incluyen el uso de estilos CSS.
UNIDAD DE
APRENDIZAJE
2
68
CARRERAS PROFESIONALES CIBERTEC
OFIMÁTICA – Escue la de Tecno logía 69
CIBERTEC CARRERAS PROFESIONALES
2.1 INTRODUCCIÓN A ESTILOS CSS
Un estilo es un conjunto de comportamientos o formatos aplicado a una etiqueta
HTML que, finalmente, modificará el diseño de una página web. Tenemos varias
posibilidades para definir un estilo:
Estilos de etiqueta
Estilos de encabezado
Estilos importados
2.1.1 Estilos de etiqueta
Los formatos le dan diferentes aspectos a los textos y párrafos. HTML tiene
etiquetas propias para aplicar estos formatos. Sin embargo, en esta sesión,
lo usaremos como una propiedad del atributo STYLE de cualquier etiqueta.
Para aplicar un estilo a una etiqueta concreta, usaremos la sintaxis:
<etiqueta STYLE=”propiedad1:valor;...;propiedadN:valor”> ...
</etiqueta>
Etiqueta es la etiqueta de HTML en la que queremos dar una apariencia
concreta (<P>, <B>, <I>, etc.)
STYLE es el parámetro que indica que vamos a aplicar uno o varios estilos.
La definición del estilo se establece por medio de pares (propiedad:valor)
separados por punto y coma.
Propiedad será la característica de la etiqueta que se quiere modificar
(color, tamaño de la fuente, tipo de letra, etc).
Valor es el valor que queremos darle (color negro, 8 puntos de tamaño de
letra.
Por ejemplo, si tenemos un texto en negrita y queremos que salga con un
tamaño de letra 14 y en color rojo, escribiremos lo siguiente en la vista
70
CARRERAS PROFESIONALES CIBERTEC
código: <B STYLE=”font-size:14pt;color:red”>. La negrita que
vemos es más grande y está en rojo </B>.
2.1.2 Estilos de encabezado
Dentro del TAG o etiqueta <STYLE> que fue mencionado anteriormente,
también, es posible definir el comportamiento de TAGS o de etiquetas que
afectarán el documento.
Para crear estilos a nivel de encabezado, haga lo siguiente:
1. Abra un archivo html que tenga diversos objetos insertados como
imágenes, textos, tablas, enlaces, etc.
2. Active la ficha Estilos CSS del Panel CSS.
3. Haga clic en el botón Todo si no está activado todavía.
4. Luego, haga clic en el botón Nueva regla CSS.
5. En el cuadro de diálogo Nueva regla CSS, seccione la opción Etiqueta
(define de nuevo el aspecto de una etiqueta específica) en Tipo de selector.
OFIMÁTICA – Escue la de Tecno logía 71
CIBERTEC CARRERAS PROFESIONALES
6. En Definir en, seleccione la opción Sólo este documento.
7. En el cuadro Etiqueta, seleccione la etiqueta que desea usar para crearle
estilos o escriba el nombre.
8. Haga Clic en Aceptar para continuar.
9. En el cuadro de diálogo Definición de regla para body, seleccione la
categoría en la lista de la izquierda y los estilos correspondientes en el lado
derecho.
10. Para salir de este cuadro, haga clic en Aceptar. Repita los pasos 4 al 9
para asignar estilos a otra etiqueta.
72
CARRERAS PROFESIONALES CIBERTEC
11. Inserte textos en su documento para ver los efectos de los estilos de
encabezado.
2.1.3 Estilos importados
Un estilo importado se crea en un archivo con extensión css. La definición
de los estilos para cada comportamiento o formato de una etiqueta
determinada es similar a la de estilos de encabezado. El archivo css se
vincula a varias páginas web para que éstas modifiquen su comportamiento
de acuerdo a las indicaciones del archivo css. Dreamweaver crea una
etiqueta de vinculación en la página web mediante las siguientes
instrucciones:
<link rel=stylesheet type=”text/css” href=”/css/estilo.css”>
ó
@import url(http://www.osmosislatina.com/css/estilo.css)
Las dos formas se pueden usar para realizar la vinculación entre una página
web y un archivo css.
La ventaja que presenta esta metodología es la posibilidad de definir cierto
formato y, con sólo una línea, definir el comportamiento a lo largo de un
conjunto de documentos. La diferencia de ambas líneas superiores estriba
en la manera en que son declaradas en el documento.
OFIMÁTICA – Escue la de Tecno logía 73
CIBERTEC CARRERAS PROFESIONALES
Para crear estilos importados en Dreamweaver, haga lo siguiente:
1. Cree un documento nuevo tipo CSS. Para ello, haga clic en el menú
Archivo > Nuevo.
2. Seleccione la opción CSS.
3. Haga clic en el botón Crear.
4. Para crear un estilo, active el Panel CSS.
5. Haga clic en el botón Nueva regla CSS.
74
CARRERAS PROFESIONALES CIBERTEC
6. Haga clic en el botón Nueva regla CSS.
7. Seleccione un Tipo de selector: Clase se refiere a estilos personalizados
que pueden aplicarse a cualquier etiqueta html; Etiqueta, a estilos de
etiqueta html; y Avanzadas, a estilos para los enlaces.
8. En el cuadro Nombre, seleccione o escriba el nombre del estilo.
9. En el cuadro Definir en, seleccione la opción Sólo este documento.
10. Haga clic en el botón Aceptar para diseñar los estilos.
11. Seleccione los estilos por cada categoría.
OFIMÁTICA – Escue la de Tecno logía 75
CIBERTEC CARRERAS PROFESIONALES
12. Haga clic en el botón Aceptar para salir.
13. Para insertar otro estilo y agregarla a la hoja de estilos, haga clic
nuevamente en el botón Nueva regla CSS del Panel CSS.
En lo sucesivo, los ejemplos de estilos se referirán a estilos importados.
Utilización del panel Estilos CSS
En ambos modos, Todo y Actual, el panel Estilos CSS contiene tres botones
que permiten modificar la vista del panel Propiedades (el panel inferior):
A. Vista de categoría B. Vista de lista C. Vista de las propiedades establecidas
1. Vista de categoría
Divide las propiedades CSS compatibles con Dreamweaver en ocho
categorías: fuente, fondo, bloque, borde, cuadro, lista, posición y
extensiones. Las propiedades de cada categoría se encuentran en una
lista que se puede expandir o contraer haciendo clic en el botón con el
signo más (+) que aparece al lado del nombre de la categoría. Las
propiedades aparecen (en color azul) en la parte superior de la lista.
2. Vista de lista
Muestra todas las propiedades CSS compatibles con Dreamweaver por
orden alfabético. Las propiedades aparecen (en color azul) en la parte
superior de la lista.
3. Vista de las propiedades establecidas
Sólo muestra las propiedades que se han establecido. La vista de
propiedades establecidas es la vista predeterminada.
76
CARRERAS PROFESIONALES CIBERTEC
En ambos modos, Todo y Actual, el panel Estilos CSS, también, contiene los
siguientes botones:
A. Adjuntar hoja de estilos B. Nueva regla CSS C. Editar estilo D. Eliminar regla CSS
4. Adjuntar hoja de estilos
Abre el cuadro de diálogo Vincular hoja de estilos externa. Seleccione
una hoja de estilos externa para adjuntar o para importar al documento
actual.
5. Nueva regla CSS
Abre un cuadro de diálogo en el que es posible seleccionar el tipo de
estilo que va a crear (por ejemplo, para crear un estilo de clase, redefinir
una etiqueta HTML o definir un selector CSS).
6. Editar estilo CSS
Abre un cuadro de diálogo en el que es posible editar los estilos del
documento actual o de una hoja de estilos externa.
7. Eliminar regla CSS
Elimina el estilo o la propiedad seleccionada del panel Estilos CSS, así
como el formato de cualquier elemento al que se haya aplicado. Sin
embargo, no elimina las propiedades de clase o ID a las que hace
referencia dicho estilo. El botón Eliminar regla CSS, también, permite
anular la asociación (o "desvincular") una hoja de estilos CSS adjunta.
OFIMÁTICA – Escue la de Tecno logía 77
CIBERTEC CARRERAS PROFESIONALES
2.2 CSS PARA TEXTOS
Atributo font-family
El atributo font-family determina la fuente para el estilo de una página o partes de
ésta. Consideremos, por ejemplo, que queremos aplicar una fuente tipo "arial" a
todo el documento. Lo que sigue es el modo correcto de aplicar el estilo:
BODY { font-family:arial }
Atributo font-size
El atributo establece las dimensiones del texto. Utiliza diferentes medidas:
BODY { font-size:12pt }
BODY { font-size:12px }
BODY { font-size:1in }
BODY { font-size:3cm }
BODY { font-size:200% }
BODY { font-size:2em }
Atributo font-style
El atributo font-style indica el estilo para la fuente. Es posible impostar distintos
valores:
BODY { font-style:normal }
BODY { font-style:italic }
BODY { font-size:oblique }
Atributo text-decoration
El atributo text-decoration permite adornar el texto con subrayados y otros efectos.
Puede asumir distintos valores (none, underline, italic y line-height):
BODY { text-decoration: none }
BODY { text-decoration: underline }
BODY { text-decoration: italic }
BODY { text-decoration: line-height }
78
CARRERAS PROFESIONALES CIBERTEC
Elimina los subrayados de los enlaces.
A { text-decoration: none }
El subrayado aparece sólo cuando el mouse pasa encima del enlace:
A:link, A:visited { text-decoration: none }
A:hover { text-decoration: underline }
Atributo list-style
El atributo list-style permite sustituir los puntos lista estándar de HTML con
imágenes en formato GIF. Es posible aplicar tales puntos o toda la lista o sólo a
una parte de la lista.
UL { list-style-image:URL(punto.gif) }
2.3 CSS PARA CONTENEDORES
Un contenedor o capa es una división, una parte de la página, que tiene un
comportamiento muy independiente dentro de la ventana del navegador, ya que la
podemos colocar en cualquier parte de la misma y mover independientemente.
Atributo position
El atributo position indica el tipo de posicionamiento de la capa. Tiene dos
valores: relative ó absolute.
relative.- indica que la posición de la capa es relativa al lugar donde se estaba
escribiendo en la página.
absolute.- indica que la posición de la capa se calcula con respecto al punto
superior izquierdo de la página.
OFIMÁTICA – Escue la de Tecno logía 79
CIBERTEC CARRERAS PROFESIONALES
Atributo top
El atributo top indica la distancia en vertical donde se colocará la capa. Si el
atributo position es absolute, top indica la distancia del borde superior de la capa
con respecto al borde superior de la página. Si el atributo position era relative, top
indica la distancia desde donde se estaba escribiendo, en ese momento, en la
página hasta el borde superior de la capa.
Atributo left
El atributo left funciona igual que el atributo top, pero con la diferencia de que el
atributo left indica la distancia en horizontal a la que estará situada la capa.
Atributo height
El atributo height sirve para indicar la altura de la capa.
Atributo width
El atributo width Indica la anchura de la capa.
Atributo visibility
El atributo visibility sirve para indicar si la capa es visible o invisible al usuario.
Este atributo puede tener tres valores:
visible.- sirve para indicar que la capa se podrá ver.
hidden.- indicará que la capa está oculta.
inherit.- es el valor por defecto, que quiere decir que hereda la visibilidad de
la capa donde está metida la capa en cuestión. Si la capa no está
metida dentro de ninguna otra se supone que está metida en la capa
documento, que es toda la página y que siempre está visible.
Atributo z-index
El atributo z-index sirve para indicar qué capas se verán encima o debajo de
otras, en caso de que estén superpuestas. Este atributo toma valores numéricos
y a mayor z-index, más arriba se verá la página.
80
CARRERAS PROFESIONALES CIBERTEC
2.4 CSS PARA FORMULARIOS
Con CSS es posible presentar formularios de manera personalizada de acuerdo
con el estilo de la página. Para ello, sólo se utilizarán 4 etiquetas.
Input
input {
background-color: #B0E0E6;
font: 12px verdana, arial, helvetica, sans-serif;
color:#003399;
border:2px solid #000099;
}
select
select {
background-color: #B0E0E6;
font:12px verdana, arial, helvetica, sans-serif;
color:#003399;
}
textarea
textarea {
background-color: #B0E0E6;
font:12px verdana, arial, helvetica, sans-serif;
color:#003399;
}
form
form.login {
background-color: #FFFFCC;
width:380px;
}
OFIMÁTICA – Escue la de Tecno logía 81
CIBERTEC CARRERAS PROFESIONALES
ACTIVIDADES A DESARROLLAR EN CLASE
Actividad 1
Desarrolle una hoja de estilos importados que defina el formato de las páginas web de
la siguiente forma:
Estilos etiqueta: body, table, ul,
Estilos avanzados: a:link, a:hover
Estilos clase: miTabla, que modifique los bordes y el color de fondo. miViñeta,
que modifique el ícono de la viñeta por otra imagen.
1. Cree un documento nuevo tipo CSS. Para ello, haga clic en el menú Archivo >
Nuevo.
2. Seleccione la opción CSS.
3. Haga clic en el botón Crear.
4. Para crear un estilo, active el Panel CSS.
5. Haga clic en el botón Nueva regla CSS.
82
CARRERAS PROFESIONALES CIBERTEC
6. Seleccione la opción Etiqueta en Tipo de selector y la opción Sólo este
documento en Definir en.
7. Escriba o seleccione el nombre de la etiqueta body en el cuadro Etiqueta.
8. Haga clic en el botón Aceptar.
9. Seleccione en la categoría Tipo los formatos que desee aplicar a toda la página
web representada por la etiqueta body.
OFIMÁTICA – Escue la de Tecno logía 83
CIBERTEC CARRERAS PROFESIONALES
10. En su pantalla, se mostrará el siguiente código:
84
CARRERAS PROFESIONALES CIBERTEC
Actividad 2
El siguiente ejemplo crea textos con sombra mediante el uso de capas con estilo.
1. Defina los siguientes estilos en el encabezado de la página web. Puede escribirlo
en la ventana Código o insertarlo con el Panel CSS.
div.titulo {
margin-top: -24px;
color: blue;
font-size: 20px;
}
div.sombra {
margin-top: 2px;
margin-left: 2px;
color: red;
font-size: 20px;
}
2. Escriba el siguiente código HTML o inserte dos capas con el texto El maravilloso
curso de HTML.
<DIV ALIGN=”CENTER” CLASS=”sombra”>El maravilloso curso de HTML</DIV>
<DIV ALIGN=”CENTER” CLASS=”titulo”>El maravilloso curso de HTML</DIV>
El resultado será un texto con sombra.
OFIMÁTICA – Escue la de Tecno logía 85
CIBERTEC CARRERAS PROFESIONALES
Actividad 3
Compruebe las diferentes formas de utilizar estilos en un documento.
El siguiente estilo no debería usarse en el diseño de una página.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Un estudio sobre la dinámica de la población</TITLE>
</HEAD>
<BODY bgcolor="white" text="black"
link="red" alink="fuchsia" vlink="maroon">
... cuerpo del documento ...
</BODY>
</HTML>
Si usa hojas de estilo, puede conseguir el mismo efecto de la siguiente manera:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Un estudio sobre la dinámica de la población</TITLE>
<STYLE type="text/css">
BODY { background: white; color: black }
A:link { color: red }
A:visited { color: maroon }
A:active { color: fuchsia }
</STYLE>
</HEAD>
<BODY>
... cuerpo del documento ...
</BODY>
</HTML>
86
CARRERAS PROFESIONALES CIBERTEC
El usar hojas de estilo externas (vinculadas) nos da flexibilidad para cambiar la
presentación sin tener que revisar el documento fuente HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Un estudio sobre la dinámica de la población</TITLE>
<LINK rel="stylesheet" type="text/css" href="estilolisto.css">
</HEAD>
<BODY>
... cuerpo del documento ...
</BODY>
</HTML>
OFIMÁTICA – Escue la de Tecno logía 87
CIBERTEC CARRERAS PROFESIONALES
ACTIVIDADES A DESARROLLAR EN CLASE
Diseño de la estructura de una página web con estilos CSS
1. Estructura a diseñar
2. Estilo css a usar
body{
margin:0;
padding:0;
line-height: 1.5em;
}
b{font-size: 110%;}
em{color: red;}
#topsection{
background: #EAEAEA;
height: 90px;
}
88
CARRERAS PROFESIONALES CIBERTEC
#topsection h1{
margin: 0;
padding-top: 15px;
}
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{ margin: 0 200px 0 230px; }
#leftcolumn{
float: left;
width: 230px;
height: 300px;
margin-left: -100%;
background: #C8FC98;
}
#rightcolumn{
float: left;
width: 200px;
margin-left: -200px;
background: #FDE95E;
height: 300px;
}
#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}
OFIMÁTICA – Escue la de Tecno logía 89
CIBERTEC CARRERAS PROFESIONALES
#footer a{ color: #FFFF80; }
3. Código html de la estructura de la página web
<html>
<head>
<title>Documento sin título</title>
<link href="csspag1.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<div id="maincontainer">
<div id="topsection">
<div class="innertube">
<h1>Título Encabezado</h1>
</div>
</div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">
<b>Sección del contenido de
cada menú
</div>
</div>
</div>
<div id="leftcolumn">
<div class="innertube">
<b>Left Column: <em>230px</em></b>
Sección para el menú de navegación
</div>
</div>
90
CARRERAS PROFESIONALES CIBERTEC
<div id="rightcolumn">
<div class="innertube">
<b>Right Column:
<em>200px</em></b>
Sección de avisos
</div>
</div>
<div id="footer">
Sección para el pie de la página web
</div>
</div>
</body>
</html>
OFIMÁTICA – Escue la de Tecno logía 91
CIBERTEC CARRERAS PROFESIONALES
ACTIVIDADES A DESARROLLAR EN CLASE
Diseño de la estructura de una página web con estilos CSS
1. Estructura a diseñar
2. Estilo css a usar
/* Archivo base.css de Base2.html */
/*********************************************************/
/*PRIMERO DEFINIR EL BODY Y TODOS LOS ESTILOS PARA TEXTOS*/
/*********************************************************/
body {
background-color:#FFF;
text-align : justify;
line-height: 10px;
font:11px Verdana, Arial, Helvética, sans-serif;
color: #586885;
}
92
CARRERAS PROFESIONALES CIBERTEC
p {}
h1 {
font:25px Verdana, Arial, Helvética, sans-serif;
text-align : left;
color : #666666;
margin:0px;
}
h2 {
font:bold 20px Verdana, Arial, Helvética, sans-serif;
text-align : left;
color:#486895;
text-transform: capitalize;
}
h3 {
font:18px Verdana, Arial, Helvética, sans-serif;
color : #666;
}
h4 { font:bold 15px Verdana, Arial, Helvética, sans-serif;}
h5 { font: 13px Verdana, Arial, Helvética, sans-serif;}
h6 { font:bold 12px Verdana, Arial, Helvética, sans-serif;}
/***************************/
/* ESTILOS PARA LOS BOTONES*/
/***************************/
a {
text-decoration: none;
font-size:12px;
color:#325FA0;
}
OFIMÁTICA – Escue la de Tecno logía 93
CIBERTEC CARRERAS PROFESIONALES
a:link {}
a:visited {}
a:hover {
color:#000066;
text-decoration:underline;
background-color:#0099CC;
}
a:active { color:#0099CC; }
/************************************************************/
/*AHORA, VAMOS A DEFINIR LAS CAJAS QUE HEMOS CREADO EN XHTML*/
/************************************************************/
/*PRIMERO HACEMOS UN CONTENEDOR GENERAL*/
div#CONTAINER {
background-color:#DDE6AC;
border:solid #000;
margin: 0 auto;
/*auto: los márgenes se acomodan según lo que haya dentro*/
width:700px;
height:auto;
/*auto: el ancho dependerá de lo que haya dentro*/
}
/* HACEMOS LOS CONTENEDORES INTERNOS*/
div#header{
width:700px;
height:140px;
background-color:#CC9933;
border-bottom:solid #000;
margin:0 0 10px 0;
/*10 píxeles abajo para separar el footer*/
}
94
CARRERAS PROFESIONALES CIBERTEC
div#izquierda{
width:100px;
height:auto;
background-color:#EFEFEF;
border: 1px solid;
border-color:#000;
margin:0 0 0 5px;
float:left;
padding:3px;
}
div#izquierda ul {
font:bold 11px Verdana, Arial, Helvética, sans-serif;
/*Importante definirlo, pues no toma el estilo del body*/
line-height: 140%;
text-transform:capitalize;
}
div#derecha{
width:150px;
height:auto;
background-color:#FFFFDD;
border:1px solid; color:#000
margin:0 5px 0 0;
float:right;
padding:5px;
}
/*AHORA, HACEMOS EL CONTENEDOR PRINCIPAL */
/*700px(anchura total)-100px(anchura de la div "izquierda")-
150px(anchura de la div "derecha")-20px(total de los margins)-
34px(total de los paddings)-6px (total de los borders)=390px.*/
div#principal{
width:390px;
height:auto;
OFIMÁTICA – Escue la de Tecno logía 95
CIBERTEC CARRERAS PROFESIONALES
background-color:#FFF;
border:1px solid #000;
margin:0 5px 0 117px;
/*El valor 117 aleja la div principal de la div izquierda*/
/*Probar borrando el 117 y poniendo 0*/
padding:10px;
}
/*AHORA, HACEMOS EL CONTENEDOR FOOTER */
div#footer{
width:auto;
height:30px;
background-color:#FFF;
border:1px solid #000;;
margin:5px;
}
div#footer h6{
text-align:center;
text-transform:uppercase;
margin:5px auto;
color:#666;
font:bold 10px Verdana, Arial, Helvética, sans-serif;
}
3. Código html de la estructura de la página web
<html>
<head>
<title>Web armada con CSS</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1"/>
<link href="base.css" rel="stylesheet"
type="text/css" />
96
CARRERAS PROFESIONALES CIBERTEC
</head>
<body>
<div id="CONTAINER">
<div id="header">
<h1>Cabecera h1</h1>
</div>
<div id="izquierda">
<ul>
<li><a>vinculo</a></li>
<li><a>vinculo</a></li>
<li><a>vinculo</a></li>
<li><a>vinculo</a></li>
<li><a>vinculo</a></li>
</ul>
</div>
<div id="derecha">
<p>aquí, se podría colocar una imagen, anuncios, más
vínculos, las típicas imágenes de Sindicar RSS,
etc...</p>
<a href="http://jigsaw.w3.org/css-validator/">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-
validator/images/vcss" alt="Valid CSS!"/>
</a>
<br/>
<a href="http://validator.w3.org/check?uri=referer">
<img style="border:0;width:88px;height:31px"
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Strict"/>
</a>
</div>
<div id="principal">
<h2>Título del contenido h2</h2>
OFIMÁTICA – Escue la de Tecno logía 97
CIBERTEC CARRERAS PROFESIONALES
<h3>Subtítulo h3</h3>
<p>
Este es un texto de prueba para rellenar y ver
como se ven los párrafos ordenados y que hacen
caso al estilo...excepto que...quien tú sabes no
permita que funcione bien.
</p>
<h3>Otro Subtítulo h3</h3>
<h4>Subtítulo h4</h4>
<p>
Este es un texto de prueba para rellenar y ver
como se ven los párrafos ordenados y que hacen
caso al estilo...excepto que...quien tú sabes no
permita que funcione bien.
</p>
<h4>Otro Subtítulo h4</h4>
<p>
Este es un texto de prueba para rellenar y ver
como se ven los párrafos ordenados y que hacen
caso al estilo...excepto que...
<a href="http://www.google.com">quien tú
sabes</a> no permita que funcione bien.
</p>
</div>
<div id="footer">
<h6>Cibertec 2011, archivo reservado</h6>
</div>
</div>
</body>
</html>
98
CARRERAS PROFESIONALES CIBERTEC
ACTIVIDADES A DESARROLLAR EN CLASE
Diseño de la estructura de una página web con estilos CSS
1. Estructura a diseñar
2. Estilo css a usar:
/*************************************/
/*ESTILOS BÁSICOS DE LAS WEB Y TEXTOS*/
/*************************************/
body {
text-align: justify;
background: url(images/fondo1.jpg);
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
margin: 30px;
}
h1{
color:#990000;
font-size:20px;
text-align:left;
OFIMÁTICA – Escue la de Tecno logía 99
CIBERTEC CARRERAS PROFESIONALES
margin: 0;
}
div#t1{
width:320px;
padding: 20px;
float:left;
}
h2{
color: #336600;
font-size:20px;
text-align:left;
margin: 0;
}
div#t2{
width:320px;
padding:20px;
float:right;
}
/*********************************/
/*ESTILOS PARA LA FORMA DE LA WEB*/
/*********************************/
div#principal{
width:750px;
height:550px;
background-color: #FFFFFF;
margin: 0 auto;
padding: 5px;
}
div#cabecera{
background-image:url(images/cabecera.jpg);
background-repeat:no-repeat;
width:750px;
100
CARRERAS PROFESIONALES CIBERTEC
height:177px;
padding: 0 0 5px 0;
}
div#productos{
width:750px;
height:200px;
}
div#productos1{
background-image:url(images/producto1.jpg);
background-repeat:no-repeat;
width:250px;
height:200px;
float:left;
}
div#productos2{
background-image:url(images/producto2.jpg);
background-repeat:no-repeat;
width:250px;
height:200px;
margin:0 0 0 250px;
}
div#productos3{
background-image:url(images/producto3.jpg);
background-repeat:no-repeat;
width:250px;
height:200px;
margin:-200px 0 0 0;
float:right;
}
OFIMÁTICA – Escue la de Tecno logía 101
CIBERTEC CARRERAS PROFESIONALES
3. Código html de la estructura de la página web
<html>
<head>
<title>Documento sin título</title>
<link href="estilo de prueba.css" rel="stylesheet"
type="text/css"/>
</head>
<body>
<div id="principal">
<div id="cabecera"> </div>
<div id="productos">
<div id="productos1"></div>
<div id="productos2"></div>
<div id="productos3">
</div>
</div>
<div id="textos">
<div id="t1">
<h1>TÍTULO 1</h1>
Bla en las playas y con su ropa
charlie para que veranees en
vacaciones. Te juntas con tu mancha y
se llevan el carro, y se van a
tonear.
</div>
<div id="t2">
<h2>TÍTULO 2</h2>
Bla en las playas y con su ropa
charlie para que veranees
envacaciones. Te juntas con tu
mancha y se llevan el carro, y se van
a tonear.
</div>
102
CARRERAS PROFESIONALES CIBERTEC
</div>
</div>
</body>
</html>
OFIMÁTICA – Escue la de Tecno logía 103
CIBERTEC CARRERAS PROFESIONALES
ACTIVIDADES A DESARROLLAR EN CLASE
Diseño de la estructura de una página web con estilos CSS
1. Estructura a diseñar
2. Estilo css a usar:
#wrapper {
width:520px;
height:520px;
z-index:1;
margin: auto;
background-color: #0FF;
}
#header {
position:relative;
width:520px;
104
CARRERAS PROFESIONALES CIBERTEC
height:100px;
z-index:2;
background-color: #F50;
}
#footer {
position:relative;
width:520px;
height:50px;
z-index:3;
left: 0px;
top: 0px;
background-color: #F00;
}
#fotos {
position:relative;
width:520px;
height:370px;
z-index:4;
left: 0px;
top: 0px;
background-color: #FCC;
}
#foto {
width:160px;
height:170px;
float:left;
margin-top: 10px;
margin-left: 10px;
background-color: #0ff;
}
img{ border:0px; }
OFIMÁTICA – Escue la de Tecno logía 105
CIBERTEC CARRERAS PROFESIONALES
3. Código html de la estructura de la página web
<html>
<head>
<title>Documento sin título</title>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="fotos">
<div id="foto">
<a title="Ir a Intranet"
href="http://intranet.cibertec.edu.pe">
<img src="img01.jpg">
</a>
</div>
<div id="foto">
<p class="t1">Haga <a title="Ir a Intranet"
href="http://intranet.cibertec.edu.pe"> clic
aquí </a> para más información</p>
</div>
<div id="foto">
<a title="Ir a Intranet"
href="http://intranet.cibertec.edu.pe">
<img src="img02.jpg">
</a>
</div>
<div id="foto">
<p class="t1">
Haga <a
href="http://intranet.cibertec.edu.pe">clic
aquí</a> para más información.</p>
</div>
<div id="foto">
<a href="http://intranet.cibertec.edu.pe">
106
CARRERAS PROFESIONALES CIBERTEC
<img alt="Ir a Intranet" src="img03.gif">
</a>
</div>
<div id="foto">
<p class="t1">Haga <a
href="http://intranet.cibertec.edu.pe"> clic
aquí</a> para más información.
</p>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
OFIMÁTICA – Escue la de Tecno logía 107
CIBERTEC CARRERAS PROFESIONALES
ACTIVIDADES A DESARROLLAR EN CLASE
Diseño de una capa de textos con barra de desplazamiento con estilos CSS
La hoja de estilo
div.scroll {
height: 200px;
width: 400px;
overflow: auto;
border: 3px solid #00ffff;
background-color: #ffff00;
padding: 8px;
scrollbar-base-color: orange;
scrollbar-arrow-color: green;
scrollbar-DarkShadow-Color: blue;
}
El archivo html
<html>
<head>
<title>Documento sin título</title>
<link href="estiloDiv.css" rel="stylesheet" type="text/css">
108
CARRERAS PROFESIONALES CIBERTEC
</head>
<body>
<div class="scroll">
<p>This is a scrolling are created with the CSS property
overflow.</p>
<p><span style="color: red;">This is red color</span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh.</p>
<p>This is a normal paragraph.
<span style="font-weight: bold; font-size: 22px;">This is
big bold text</span></p>
<p>This scrolling are can contain normal html like <a
href="index.php">link</a></p>
<p class="scroll">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh.
</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh.</p>
</div>
</body>
</html>
OFIMÁTICA – Escue la de Tecno logía 109
CIBERTEC CARRERAS PROFESIONALES
ACTIVIDADES PROPUESTAS
Seleccione cinco páginas web creadas en las sesiones anteriores y aplique estilos de
encabezado que afecten a toda la página como listas con imágenes, tamaño de fuente
por defecto, márgenes, alineación de los párrafos, etc.
Cree una hoja de estilos con el nombre importar.css y, en ella, utilice diferentes
etiquetas con determinados formatos que afectarán a sus documentos. Luego, abra
sus páginas web creadas en sesiones anteriores e importe dicho archivo.
110
CARRERAS PROFESIONALES CIBERTEC
OFIMÁTICA – Escue la de Tecno logía 111
CIBERTEC CARRERAS PROFESIONALES
Resumen
Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal usado para definir la presentación de un documento estructurado escrito en HTML. La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.
Se puede aplicar estilos a un sitio web completo, de modo que se puede definir la forma de todas las páginas del sitio web de una sola vez.
Se puede aplicar estilos a un documento HTML o página, de modo que se puede definir la forma en un pequeño trozo de código en la cabecera a toda la página.
Se puede aplicar estilos a una etiqueta en concreto y llegar, incluso, a poder definir varios estilos diferentes para una sola etiqueta. Esto es muy importante, ya que ofrece potencia en nuestra programación. Podemos definir, por ejemplo, varios tipos de párrafos: en rojo, en azul, con márgenes, sin ellos, etc.
Si desea saber más acerca de estos temas, puede consultar las siguientes páginas:
http://www.w3c.es/divulgacion/guiasbreves/HojasEstilo
Aquí, hallará una guía breve sobre hojas de estilos en cascada (CSS).
http://www.desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html
En esta página, hallará un tutorial completo y práctico sobre hojas de estilo en
cascada (CSS).
http://www.cristalab.com/tutoriales/94/tutorial-basico-de-css
En esta página, hallará un tutorial básico de CSS.
112
CARRERAS PROFESIONALES CIBERTEC
OFIMÁTICA – Escue la de Tecno logía 113
CIBERTEC CARRERAS PROFESIONALES
JAVASCRIPT
LOGRO DE LA UNIDAD DE APRENDIZAJE
Al término de la unidad, los alumnos, con el lenguaje JavaScript, diseñarán programas que incorporarán a una página del sitio web para validar formularios.
TEMARIO
3.1. Tema 1: Introducción al lenguaje JavaScript. (2 horas) 3.2 Tema 2: Validación de formularios con JavaScript. (2 horas) Trabajo práctico No. 4: Desarrollo de un sitio web con CSS y JavaScript
ACTIVIDADES PROPUESTAS
Los alumnos diseñan páginas web usando el lenguaje HTML en el programa Dreamweaver, las cuales incluyen el uso de plantillas, estilos CSS y códigos JavaScript para el formulario.
UNIDAD DE
APRENDIZAJE
3
114
CARRERAS PROFESIONALES CIBERTEC
OFIMÁTICA – Escue la de Tecno logía 115
CIBERTEC CARRERAS PROFESIONALES
3.1 EL LENGUAJE JAVASCRIPT
El lenguaje JavaScript es el complemento ideal de HTML al permitirle a la página
realizar algunas tareas por sí misma sin necesidad de estar sobrecargando el
servidor del cual depende.
Entre estas tareas pueden estar, por ejemplo, realizar algunos cálculos simples,
formatear un texto para que pueda ser leído por distintas personas de manera
distinta, proveer de un medio para configurar la visualización de una página,
realizar un pre-chequeo de validación en un formulario antes de enviarlo, etc.
El código fuente de los programas escritos en JavaScript está incluido en las
mismas páginas web donde se ejecutarán. Esto difiere de los applets de Java
que son cargados en forma independiente a las páginas web.
También, se podrá cargar un archivo de JavaScript (.js) a una página web, pero el
código siempre será fuente. Esto difiere de los applets de Java que se cargan
como código compilado.
JavaScript es soportado por muchos browsers. Al cargar una página web,
Netscape e Internet Explorer pueden interpretar este lenguaje.
El browser toma el archivo fuente de JavaScript y lo ejecuta (interpreta). Para que
esto suceda, el código debe estar en fuente. Por consecuencia, se presentan
algunas ventajas como las siguientes:
Las actualizaciones son sobre el código sin necesidad de volver a
compilar.
Se transfiere con el código HTML de la misma página web.
Además, los lenguajes interpretados son más fáciles de aprender.
Su desventaja sería que siempre el código desarrollado es visible para otros
usuarios (no hay forma de protegerlo).
El lenguaje Java compila su código antes del tiempo de ejecución. En JavaScript,
el código fuente se ejecuta directo y es interpretado por el browser que lo cargó.
116
CARRERAS PROFESIONALES CIBERTEC
JavaScript proporciona un gran conjunto de objetos integrados que permiten
trabajar muy bien con los elementos de un documento web.
3.1.1 Modelo de programa en JavaScript
Los programas en JavaScript son pequeños y reciben información a través
de eventos y propiedades de los objetos, y responden mediante propiedades
de objetos y métodos.
Podemos determinar ciertas reglas básicas para el desarrollo de todo
programa en JavaScript:
Para empezar un código en JavaScript, debe usar la siguiente etiqueta o
directiva:
<SCRIPT LANGUAGE=”JavaScript”>
Es posible que el browser no permita este lenguaje; por lo tanto, debe poner
el código JavaScript entre comentarios HTML:
<!- -
- - >
Entre los comentarios anteriores, debe ir el código JavaScript:
document.write(”Bienvenido a JavaScript”);
Donde:
document es el objeto que hace referencia a la página actual en el browser.
write es el método de este objeto que permite escribir en la página actual en
el browser. Si se hace una siguiente escritura, se hará a continuación de la
última.
Cuando terminamos nuestro programa, después del cierre de comentarios
de HTML, debemos cerrar la etiqueta que abrimos (<SCRIPT
LANGUAGE=”JavaScript”>) con </SCRIPT>
OFIMÁTICA – Escue la de Tecno logía 117
CIBERTEC CARRERAS PROFESIONALES
Otra forma de usar JavaScript es creando un archivo con extensión js y
llamarlo desde un documento html de la siguiente forma:
<HTML>
<HEAD>
<TITLE>JavaScript</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=”JavaScript” SRC=”P01.js”> </SCRIPT>
</BODY>
</HTML>
3.1.2 Definición de variables
Las variables en JavaScript pueden almacenar cualquier tipo de dato
(cadenas o valores). Se considera un lenguaje de programación de tipos
libres, porque reconoce el dato asignado en la variable.
Para declarar una variable, se usa la sentencia var, luego la etiqueta que
representa a la variable y, opcionalmente, puede asignar un dato en el
momento de la declaración.
Sintaxis:
Var NombreDeVariable = valor / expresión / cadena
El nombre de la variable debe empezar con una letra o el caracter de
subrayado (_)
Ejemplos:
var miVar1= “JavaScript”; // contenido: una cadena
var miVar2= 123; // contenido: un valor entero
var miVar3= 123.45; // contenido: un valor real
118
CARRERAS PROFESIONALES CIBERTEC
var miVar4, miVar5, miVar6; // sin contenido
var miVar7=5, miVar8, miVar9=”ABC”;
A continuación se declaran las variables Valor1, Valor2 y Suma, las cuales
pueden ser asignadas con valores numéricos o cadenas. Para este
ejemplo, se ha puesto, en ellas, valores numéricos para realizar una suma.
Debe modificar el código de declaración de las variables de las siguientes
formas y probar los resultados:
1) var Valor1=10, Valor2=20, Suma;
2) var Valor1=10, Valor2=20, Suma = Valor1 + Valor2;
3) var Valor1=10, Valor2=2*Valor1, Suma;
3.1.3 Métodos básicos de entrada y salida
3.1.3.1 El método prompt
El método prompt muestra un cuadro de diálogo, donde el usuario podrá
ingresar una cadena, la que será retornada por este método. Se puede
especificar en forma opcional un valor por defecto, como muestra el
formato siguiente:
prompt(mensaje [,entradaPredeterminada]);
OFIMÁTICA – Escue la de Tecno logía 119
CIBERTEC CARRERAS PROFESIONALES
Ejemplo:
<HTML>
<HEAD>
<TITLE>JavaScript</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=”JavaScript”>
var Nombre;
Nombre = prompt(“Ingrese su nombre”,
”Digite aquí su nombre”);
document.write(“Hola “ + Nombre + “,
bienvenido a JavaScript”);
</SCRIPT>
</BODY>
</HTML>
Nota: También, podría reemplazar esta línea por las tres líneas del
programa:
document.write(“Hola “ + prompt( “Ingrese su
nombre” ) );
3.1.3.2 El método alert
El método alert muestra un cuadro de diálogo de aviso con algún
mensaje y sonido (beep) para el usuario. Tiene el siguiente formato:
alert(MensajeDeAlerta);
120
CARRERAS PROFESIONALES CIBERTEC
Ejemplo:
<HTML>
<HEAD>
<TITLE>JavaScript</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=”JavaScript”>
alert(“Ud. está en JavaScript”);
</SCRIPT>
</BODY>
</HTML>
3.1.4 Tipos de operadores
JavaScript tiene una gran variedad de operadores, los que se encuentran en
grupos. Estos son los siguientes:
Aritméticos
+ Adición
- Sustracción
* Multiplicación
/ División
% Módulo
++ Incremento
-- Decremento
OFIMÁTICA – Escue la de Tecno logía 121
CIBERTEC CARRERAS PROFESIONALES
De Asignación
= Asignación
+= Adición-Asignación
-= Adición-Asignación
*= Multiplicación-Asignación
/= División-Asignación
%= Módulo-Asignación
De comparación
= = Igual que
!= Diferente que
> Mayor que
>= Mayor o igual que
< Menor que
<= Menor o igual que
Lógicos
&& And
| | Or
Otros
? : Ternario
+ Concatenar cadenas
Tiene 3 operandos. El primero es un condicional que si tiene como
resultado true, toda la expresión toma valor del segundo operando, caso
contrario si es false, toda la expresión toma valor del tercer operando.
Presenta el siguiente formato:
Operando1 ? Operando2 : Operando3
Ejemplos:
var X;
X= 10>5 ? –20 : 20; // El resultado de X == -20
X= 5>10 ? –20 : 20; // El resultado de X == 20
122
CARRERAS PROFESIONALES CIBERTEC
3.1.5 Funciones
Una función ofrece a los programadores la capacidad de agrupar código de
programa que desempeña una tarea específica en una unidad individual que
puede ser invocada cuando ésta sea necesaria por el programador. De esta
forma, se evita el tener código repetido en el programa.
3.1.5.1 Formato de una Función
Para declarar una función, usamos el siguiente formato:
function NombreDeLaFunción(parámetro1, parámetro2, …,
parámetroN)
{
BloqueDeSentencias;
return Valor;
}
3.1.5.2 Cómo llamar a una función
Cuando se llaman a las funciones para ejecutar una función, la tenemos
que llamar en cualquier parte de la página. Con eso, conseguiremos que
se ejecuten todas las instrucciones que tiene la función entre las dos
llaves. Para ejecutar la función, utilizamos su nombre seguido de los
paréntesis.
NombreDeLaFuncion()
3.1.5.3 ¿Dónde colocar las funciones?
En principio, podemos colocar las funciones en cualquier parte de la
página, siempre entre etiquetas <SCRIPT> claro está. No obstante,
OFIMÁTICA – Escue la de Tecno logía 123
CIBERTEC CARRERAS PROFESIONALES
existe una limitación a la hora de colocarla con relación a los lugares
desde donde se la llame. Lo normal es colocar la función antes de
cualquier llamada a la misma. Así, es seguro que nunca nos
equivocaremos.
3.1.5.4 Parámetros de las funciones
Las estructuras que hemos visto anteriormente sobre funciones no son
las únicas que debemos aprender para manejarlas en toda su potencia.
Las funciones, también, tienen una entrada y una salida que se pueden
utilizar para recibir y devolver datos.
Los parámetros se usan para mandar valores a la función con los que ella
trabajará para realizar las acciones. Son los valores de entrada que
recibe una función. Por ejemplo, una función que realiza una suma de
dos números tendría como parámetros a esos dos números. Los dos
números son la entrada, así como la salida sería el resultado. Eso lo
veremos más adelante.
Veamos un ejemplo anterior en el que creábamos una función para
mostrar un mensaje de bienvenida en la página web, pero al que ahora le
vamos a pasar un parámetro que contendrá el nombre de la persona a la
que hay que saludar.
function escribirBienvenida(nombre){
document.write(“<H1>Hola “ + nombre + “</H1>”)
}
Como podemos ver, en el ejemplo, para definir, en la función, un
parámetro, tenemos que poner el nombre de la variable que va a
almacenar el dato que le pasemos. Esa variable, que, en este caso, se
llama nombre, tendrá como valor el dato que le pasemos a la función
cuando la llamemos; además, la variable tendrá vida durante la ejecución
de la función y dejará de existir cuando la función termine su ejecución.
Para llamar a una función que tiene parámetros, se coloca entre
paréntesis el valor del parámetro. Para llamar a la función del ejemplo,
habría que escribir:
124
CARRERAS PROFESIONALES CIBERTEC
escribirBienvenida(“Alberto García”)
Al llamar a la función así, el parámetro nombre toma como valor “Alberto
García” y al escribir el saludo por pantalla escribirá “Hola Alberto García”
entre etiquetas <H1>.
Los parámetros pueden recibir cualquier tipo de dato: numérico, textual,
boleano o un objeto. Realmente, no especificamos el tipo del parámetro;
por eso, debemos tener un cuidado especial al definir las acciones que
realizamos dentro de la función y al pasarle valores a la función para
asegurarnos que todo es consecuente con los tipos de nuestras variables
o parámetros.
3.1.6 Funciones predefinidas
JavaScript dispone de las siguientes funciones predefinidas:
3.1.6.1 eval(cadena)
La función eval tiene como argumento una expresión y devuelve el valor
de la misma. Esta función resulta útil para evaluar una cadena de
caracteres que representa una expresión numérica. La edición efectuada
mediante un campo de formulario es una cadena de caracteres que, a
veces, es necesario convertir en valor numérico. El código siguiente
ilustra este ejemplo y permite al usuario introducir una expresión
numérica y visualizar, a continuación, el valor de la expresión.
<SCRIPT>
function calcula(obj){
evalua.result.value = eval(evalua.expr.value)
}
</SCRIPT>
<FORM NAME=”evalua”>
Introducir expresión:
OFIMÁTICA – Escue la de Tecno logía 125
CIBERTEC CARRERAS PROFESIONALES
<INPUT TYPE=”text” NAME=”expr” SIZE=20>
<br>
Resultado:
<INPUT TYPE=”text” NAME=”result” SIZE=20>
<br>
<INPUT TYPE = ”button” VALUE = ”evalua” onClick
= ”calcula(this.form)”>
</FORM>
3.1.6.2 parseInt(cadena [, base])
La función parseInt convierte una cadena de caracteres en un valor
numérico. La función lleva como argumento la cadena a convertir y,
opcionalmente, puede llevar un segundo argumento para indicar la base
de numeración en que está escrita la cadena. Si se omite, se supone que
la cadena representa un número en base 10. La cadena sólo podrá
contener caracteres válidos para el sistema de numeración indicado:
dígitos (0..9 para la base 10, 0 1 para números binarios, 0..7 para sistema
octal, 0..9, A..F para sistema hexadecimal) y signo (+, -). Si encuentra
algún caracter no válido, sólo se va a interpretar desde el principio de la
cadena hasta el caracter no válido. Si comienza por un caracter ilegal
devuelve NaN.
Ejemplo 1:
parseInt(“3453”);
Devuelve el número 3453.
Ejemplo 2:
var minum1 = “14”;
document.write(parseInt(minum1));
....
Escribirá 14.
Ejemplo 3:
var minum1 = “11001”;
126
CARRERAS PROFESIONALES CIBERTEC
document.write(parseInt(minum1,2));
....
Ahora escribirá 25, el equivalente decimal al binario 11001.
Ejemplo 4:
<HTML>
<HEAD>
<TITLE>ParseInt</TITLE>
<SCRIPT>
function pruebaparse() {
// Se toma un valor del campo entrada
var entra = entrada.value;
// Se convierte a entero mediante parseInt
var valor = parseInt(entra);
// Se muestra el resultado
salida.value=valor;
}
</SCRIPT>
</HEAD>
<BODY>
<P>Introduce una cadena alfanumérica:
<input type=”text” name=”entrada”size=”8”>
y pulsa el botón
<INPUT TYPE=”button” VALUE=”Púlsame”
onClick=”pruebaparse()”>
</P>
<P>
<input type=”text” name=”salida” readonly size=”8”>
</P>
</BODY>
</HTML>
En el último campo de texto, se ha añadido el atributo readonly para que
no pueda escribirse en él.
OFIMÁTICA – Escue la de Tecno logía 127
CIBERTEC CARRERAS PROFESIONALES
3.1.6.3 parseFloat(cadena)
La función parseFloat convierte una cadena que se le pasa como
argumento a un valor numérico de tipo flotante. Los caracteres válidos de
la cadena son los mismos que en parseInt más el punto decimal y el
exponente (E). No admite un segundo argumento. Si se encuentra otros
caracteres que no sean números, el signo „+‟, el „-‟ o un exponente,
devuelve el valor encontrado hasta ese punto. Del mismo modo, si el
primer caracter no se puede convertir a número, devolverá cero. Por lo
demás, funciona exactamente igual que parseInt.
parseFloat(“3.12.3”);
Este ejemplo devuelve NaN, ya que la cadena no contiene un número
real válido.
3.1.6.4 isNaN(valor)
La función isNaN comprueba si el valor pasado por parámetros es
numérico o no. El resultado de esta función es un booleano, es decir,
evalúa un argumento para ver si es NaN: Not Number. Devuelve true
sólo si el argumento es NaN.
Ejemplo 1:
<SCRIPT>
function Comprueba(form){
var number = parseFloat(form.valor.value);
if (isNaN(number) == true){
alert(“No es numérico”);
}else{
form.valor.value = number;
alert(“Es numérico”);
}
}
</SCRIPT>
...
<FORM>
Introducir un valor numérico:
128
CARRERAS PROFESIONALES CIBERTEC
<input type=”text” name=”valor”>
<br>
<input type = ”button” value = ”Comprobar“
onClick = ”Comprueba(this.form)”>
</FORM>
3.2 VALIDACIÓN DE FORMULARIOS
JavaScript, desde sus inicios, introdujo los mecanismos necesarios para validar
campos de formulario. Las validaciones se hacen en el propio navegador antes
de enviarlo. Si hubo algún campo no relleno o con información errónea, el
formulario muestra el campo que está incorrecto y solicita al usuario que lo
cambie. Si todos los datos del formulario son correctos, se envía el formulario.
Algunas de las validaciones típicas que realiza javascript son las siguientes:
Comprobar que se han suministrado todos los campos obligatorios
Comprobar que el formato de un campo es el esperado (fechas, teléfonos, etc.)
Comprobar la validez de las direcciones de correo y URLs
Comprobar que no se sobrepasa la longitud, número de líneas o tamaño de la
entrada
Cuando el usuario pulsa sobre el botón de enviar, se genera el evento submit,
asociado al envío de datos de un formulario. JavaScript proporciona un
mecanismo para capturar este evento, lo que nos permite ejecutar un script justo
antes de que se realice el envío de los datos.
3.2.1 El evento Onsubmit
La forma para capturar un evento consiste en introducir el atributo onSubmit
en la etiqueta del formulario, cuyo evento submit queremos capturar. De
esta forma, para capturar el evento submit del formulario del ejemplo
anterior se escribe así:
OFIMÁTICA – Escue la de Tecno logía 129
CIBERTEC CARRERAS PROFESIONALES
<form name="frm" action="mailto:jpt@correo.com"
onSubmit="alert('Ha hecho click en el botón enviar.');
return false;">
<input type="submit" value="Enviar" name="enviar">
</form>
En esta nueva versión del formulario, al pulsar sobre el botón de envío, se
ejecutará el código incluido como valor del atributo onSubmit. En este caso,
se trata de un simple alert(); entonces, JavaScript informa que se ha pulsado
sobre el botón de envío. Si el código JavaScript (generalmente es una
función de validación) del atributo onSubmit devuelve false, la validación es
incorrecta y el navegador no continúa con el envío del formulario tras
ejecutar dicho código. Por el contrario, si devuelve true, la validación es
correcta y el formulario se envía normalmente.
3.2.2 El objeto this
Normalmente, el evento onSubmit ejecuta una función de validación, como
en el siguiente ejemplo:
<form name="frm" action="mailto:jpt@correo.com"
onSubmit="return Valida(this);">
<input type="submit" value="Enviar" name="enviar">
</form>
Para poder realizar la validación, la función debe trabajar sobre los objetos
del formulario a validar para acceder a su valor y evaluarlo. Esto se
consigue pasándole como parámetro el objeto this, que hace referencia en
este contexto al formulario desde el que se invoca la función.
La función de validación accederá a los campos del formulario a partir del
objeto this. A continuación, mostramos un ejemplo sencillo, en el que se
comprueba si el valor del campo de nombre txtMensaje es igual a
ACEPTADO. En caso afirmativo, la validación es correcta.
130
CARRERAS PROFESIONALES CIBERTEC
function Valida( miFrm ) {
if (miFrm.txtMensaje.value == “ACEPTADO”) {
return true
} else {
return false
}
}
OFIMÁTICA – Escue la de Tecno logía 131
CIBERTEC CARRERAS PROFESIONALES
ACTIVIDADES A DESARROLLAR EN CLASE
Ejemplo 1
En el siguiente ejemplo, definimos un campo de texto en el que ingresamos un número
x. Al hacer clic sobre el botón, obtendremos el resultado (x2) en el segundo campo de
texto.
Al mismo tiempo, aparecerá un mensaje en la barra de estado que indicará el número
introducido, así como el resultado obtenido tras aplicarle el cuadrado. Para realizar
estas acciones, utilizaremos la función cuadrado.
Cada vez que el usuario haga un clic sobre el botón Cuadrado (para determinarlo
utilizaremos el manejador de eventos onClick), se llamará a la función del mismo
nombre, pasándole como parámetro el valor introducido en el primer campo de texto
(x). Inmediatamente, será mostrado en la zona de estado un mensaje que dirá: “Has
ingresado el número x y el resultado es x2”. Esto es posible mediante la sentencia
window.status, donde window es un objeto creado por el sistema que hace referencia
a la ventana actual y status no es más que una de sus propiedades que especifica el
mensaje a mostrar en la barra de estado.
El código asociado al botón es el siguiente:
<FORM>
Escribe un número:
<INPUT TYPE=”text” NAME=”entrada” SIZE=15>
<INPUT TYPE=”button” VALUE=”Cuadrado”
onClick=”cuadrado(entrada.value)”>
<BR>
Resultado: <INPUT TYPE=”text” NAME=”resultado” SIZE=15 VALUE =
0>
</FORM>
132
CARRERAS PROFESIONALES CIBERTEC
Las modificaciones realizadas en la función cuadrado son las siguientes:
function cuadrado(numero){
document.form1.resultado.value = numero * numero;
window.status=‟Ha ingresado el número „ + numero + „ y el
resultado es „ +document.form1.resultat.value;
}
OFIMÁTICA – Escue la de Tecno logía 133
CIBERTEC CARRERAS PROFESIONALES
Ejemplo 2
Determinar el área de un círculo
<HTML>
<HEAD>
<TITLE>JavaScript</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=”JavaScript”>
function areaCirculo(radio){
var area;
area= 3.1415 * radio * radio;
return area;
}
for(var r=1; r<=10; ++r)
document.write(“<BR>Si radio “ + r + “, área igual a
“ +areaCirculo(r));
</SCRIPT>
</BODY></HTML>
134
CARRERAS PROFESIONALES CIBERTEC
Ejemplo 3
Veamos otro ejemplo, aunque un poco más útil. Se trata de imprimir, en la página,
todas las tablas de multiplicar, es decir, del 1 al 9 (la tabla del 1, la del 2, del 3...)
for (i=1;i<10;i++){
document.write(“<br><b>La tabla del “ + i + “:</b><br>”)
for (j=1;j<10;j++) {
document.write(i + “ x “ + j + “: “)
document.write(i*j)
document.write(“<br>”)
}
}
Con el primer bucle, controlamos la tabla actual y, con el segundo bucle, la
desarrollamos. En el primer bucle, escribimos una cabecera en negrita, donde
indicamos la tabla que estamos escribiendo, primero la del 1 y, luego, las demás en
orden ascendente hasta el 9. Con el segundo bucle, escribimos cada uno de los
valores de cada tabla.
OFIMÁTICA – Escue la de Tecno logía 135
CIBERTEC CARRERAS PROFESIONALES
Ejemplo 4
Validación de un formulario
El formulario con el que vamos a trabajar es el siguiente:
<form name="fm">
<table>
<tr>
<td>Nombre: </td>
<td><input type="text" name="nombre" size="30"
maxlength="100"></td>
</tr>
<tr>
<td>Edad: </td>
<td><input type="text" name="edad" size="3"
maxlength="2"></td>
</tr>
<tr>
<td>Interés:</td>
<td>
<select name=interes>
<option value="Elegir">Elegir
<option value="Información comercial">
Información comercial
<option value="Servicio a clientes">
Servicio a clientes
<option value="Proveedores">Contacto de
proveedores
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input
type="button" value="Enviar" onclick="
verificaEnvio ()"></td>
</tr>
136
CARRERAS PROFESIONALES CIBERTEC
</table>
</form>
Se debe prestar atención en lo siguiente:
El nombre del formulario, "fm"
El botón Enviar, que en lugar de ser un submit corriente, es un botón que llama a
una función, que se encarga de validar el formulario y enviarlo si todo es correcto.
Función Javascript para validar el formulario
La función para validar el formulario se llama verificaEnvio(). Por cada campo del
formulario, comprueba que el valor introducido es correcto. Si no es correcto, muestra
un mensaje de alerta, pone el foco de la aplicación en el campo que ha dado el error y
abandona la función retornando el valor 0.
Si todos los campos son correctos, la función continúa hasta el final sin salirse, por no
estar ningún campo incorrecto. Entonces, ejecuta la última sentencia, que es el envío
del formulario.
Veamos la función entera.
function verificaEnvio (){
//Validar el nombre
if (document. fm.nombre.value.length==0){
alert("Tiene que escribir su nombre")
document.fm.nombre.focus()
return 0;
}
//Validar la edad. Tiene que ser entero mayor que 18
edad = document.fm.edad.value
edad = validarEntero(edad)
document.fm.edad.value=edad
if (edad==""){
alert("Tiene que introducir un número entero en su
edad.")
OFIMÁTICA – Escue la de Tecno logía 137
CIBERTEC CARRERAS PROFESIONALES
document.fm.edad.focus()
return 0;
}else{
if (edad<18){
alert("Debe ser mayor de 18 años.")
document.fm.edad.focus()
return 0;
}
}
//Validar el interés
if (document.fm.interes.selectedIndex==0){
alert("Debe seleccionar un motivo de su contacto.")
document.fm.interes.focus()
return 0;
}
//Se envía el formulario
alert("Muchas gracias, por enviar el formulario");
document.fm.submit();
}
138
CARRERAS PROFESIONALES CIBERTEC
Ejemplo 5
Validación de un formularios - 2
Diseñe el siguiente formulario:
Código javascript que valida las entradas del formulario
// JavaScript Document
function validaEnvio(){
if(frm.txtNombre.value==""){
alert("Nombre vacío")
return false
}
if(frm.txtEdad.value==""){
alert("Edad vacía")
OFIMÁTICA – Escue la de Tecno logía 139
CIBERTEC CARRERAS PROFESIONALES
return false
}
var posArroba,posPunto,correo;
correo=frm.txtEmail.value;
posArroba=correo.indexOf('@',0)
posPunto=correo.indexOf('.',posArroba)
if(posArroba==-1){
alert("correo no válido")
return false
}
if(frm.distrito.selectedIndex==0){
alert("Seleccione un distrito")
return false
}
alert("Sus datos fueron enviados correctamente")
frm.submit()
}
function soloNumeros(){
var key=window.event.keyCode;
intentos++
if (!(key >= 48 && key <= 57))
window.event.keyCode=0;
}
function soloLetras(){
var key = window.event.keyCode;
if(!(key>=65 && key<=90 || key>=97 && key<=122))
window.event.keyCode=0;
}
140
CARRERAS PROFESIONALES CIBERTEC
Archivo html que diseña el formulario
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<link href="estilo_formulario2.css" rel="stylesheet"
type="text/css" />
<script src="codigos.js"> </script>
</head>
<body>
<form name="frm" id="formulario" method="">
<label for="nombre">Nombre:</label>
<input onfocus="tab()" onblur="regresa()" name="txtNombre"
type="text" class="campo" id="nombre" value="Escriba su
nombre aquí" />
<label for="edad">Edad:</label>
<input onkeypress="soloNumeros()" name="txtEdad"
type="text" class="campo" id="edad" />
<label for="email">E-mail:</label>
<input name="txtEmail" type="text" id="email" class="campo"
/>
<label for="distrito">Distrito:</label>
<select name="distrito" class="campo" />
<option>Seleccione un distrito</option>
<option>Ate</option>
<option>Barranco</option>
<option>Comas</option>
<option>Chorrillos</option>
<option>Lince</option>
<option>Miraflores</option>
</select>
<label for="comentario">Comentario:</label>
<p>
<textarea id="comentario" class="campo"></textarea>
<br/>
OFIMÁTICA – Escue la de Tecno logía 141
CIBERTEC CARRERAS PROFESIONALES
<input onclick="validaEnvio(this.form);return false"
type="submit" id="boton_enviar" value=" " />
</p>
<p> </p>
</form>
</body>
</html>
142
CARRERAS PROFESIONALES CIBERTEC
ACTIVIDADES PROPUESTAS
Propuesto 1
Diseñe una página que al abrirse imprima las casillas de verificación que representan
los asientos de un ómnibus.
Propuesto 2
Diseñe un formulario que simule el lanzamiento de 3 dados al mismo tiempo y se deje
de lanzar si los 3 dados obtienen el número 5. Asimismo, debe imprimir cuántos
lanzamientos fueron necesarios.
Propuesto 3
Diseñe el siguiente formulario:
OFIMÁTICA – Escue la de Tecno logía 143
CIBERTEC CARRERAS PROFESIONALES
Propuesto 4
Diseñe el siguiente formulario:
144
CARRERAS PROFESIONALES CIBERTEC
Resumen
JavaScript es un lenguaje de programación interpretado, es decir, no requiere compilación. Se usa principalmente en páginas web, con una sintaxis semejante a la del lenguaje Java y el lenguaje C.
Las funciones de javascript son códigos agrupados en bloques e identificados por
un nombre. Estos nombres de funciones de javascript son llamados mediante un evento desde algún elemento de la página web.
Si desea saber más acerca de estos temas, puede consultar las siguientes
páginas. http://www.webestilo.com/javascript/
Aquí, hallará un manual de Javascript.
http://www.codigojavascript.com/
En esta página, hallará códigos de Javascript desarrollados y que puede aplicar
a su página web.
OFIMÁTICA – Escue la de Tecno logía 145
CIBERTEC CARRERAS PROFESIONALES
GLOSARIO DE ETIQUETAS HTML
ANEXO
146
CARRERAS PROFESIONALES CIBERTEC
OFIMÁTICA – Escue la de Tecno logía 147
CIBERTEC CARRERAS PROFESIONALES
PARA CARACTERES
<B>...</B> Texto en negrita
<BIG>...</BIG> Ampliación del tamaño de los caracteres
<BLINK>...</BLINK> Texto parpadeante (sólo Netscape)
<EM>...</EM> Texto en itálico
<FONT color="#XXXXXX"> ...</FONT>
Texto en color donde XXXXXX es un valor hexadecimal
<FONT size=X>...</FONT> Tamaño de los caracteres donde X es un valor de 1 a 7
<I>...</I> Texto en itálico
<NOBR>...</NOBR> Impide las rupturas automáticas de línea de los browser
<PRE>...</PRE> Texto preformateado, o sea con una visualización de todos los espacios y saltos de línea
<SMALL>...</SMALL> Reducción del tamaño de los caracteres
<STRONG>...</STRONG> Puesta en negrita del texto
<SUB>...</SUB> Texto en indicio
<SUP>...</SUP> Texto en exponente
<U>...</U> Texto subrayado
PARA TEXTOS
<!--...--> Comentarios ignorado por el navegador
<BR> A la línea
<BLOCKQUOTE>... </BLOCKQUOTE>
Citación (introduce un extracto de texto)
<CENTER>...</CENTER> Centra cada elemento comprendido en la etiqueta
<DIV align=center> ...</DIV> Centra el elemento encuadrado por la etiqueta
<DIV align=left> ...</DIV> Alinea el elemento a la izquierda
<DIV align=right> ...</DIV> Alinea el elemento a la derecha
<Hx>...</Hx> <Hx align=center>...</Hx> <Hx align=left>...</Hx> <Hx align=right>...</Hx>
Título y x tiene un valor de 1 a 7 Título centrado Título alineado a la izquierda Titulo alineado a la derecha
148
CARRERAS PROFESIONALES CIBERTEC
<P>...</P> <P align=center>...</P> <P align=left>...</P> <P align=right>...</P>
Nuevo párrafo Párrafo centrado Párrafo alineado a la izquierda Párrafo alineado a la derecha
PARA LISTAS
<UL> <LI> </UL>
Lista no numerada Elemento de lista
<OL> <LI> </OL>
Lista numerada Elemento de lista
<DL> <DT>...</DT> <DD>...</DD> </DL>
Lista de glosario Termino de glosario Explicación del término
PARA RAYAS
<HR> Línea de separación. Raya horizontal
<HR width="x%"> Anchura de la raya en %
<HR width=x> Anchura de la raya en pixeles
<HR size=x> Altura de la raya en pixeles
<HR align=center> <HR align=left> <HR align=right>
Raya centrada Raya alineada a la izquierda Raya alineada a la derecha
<HR noshade> Raya sin efecto de sombreado
PARA ENLACES
<A href="http://...">...</A> Enlace hacia una página web
<A href="mailto:...">...</A> Enlace hacia una dirección email
<A href="fichier.htm">...</A> Enlace hacia la página fichero.htm situada en el mismo directorio
<A name="xyz">...</A> Definición de una ancla
<A href="xyz">...</A> <A href="fichier#xyz">...</A>
Enlace hacia una ancla
PARA IMAGENES
OFIMÁTICA – Escue la de Tecno logía 149
CIBERTEC CARRERAS PROFESIONALES
<IMG scr="xyz.gif"> <IMG scr="xyz.pjg>
Inserción de una imagen al formato Gif o Jpg (ver enlaces para la dirección)
<IMG ... width=x height=y> Puesta a la escala de la imagen en píxeles
<IMG ... border=x> Definición del borde de una imagen con un enlace
<IMG ... alt="votre texte"> Texto alternativo cuando la imagen no está mostrada
<IMG ... align=bottom> <IMG ... align=middle> <IMG ... align=top> <IMG ... align=left> <IMG ... align=right>
Alinea la imagen abajo Alinea la imagen en el medio Alinea la imagen arriba Alinea la imagen a la izquierda Alinea la imagen a la derecha
<IMG ... hspace=x> <IMG ... vspace=y>
Espaciamiento horizontal entre la imagen y el texto Espaciamiento vertical entre la imagen y el texto
PARA TABLAS
<TABLE>...</TABLE> Definición de una tabla
<TABLE width="x%"> Anchura de la tabla en %
<TABLE width=x> Anchura de la tabla en píxeles
<TABLE border=x> Anchura del borde
<TABLE cellpadding=x> Espacio entre el borde y el texto
<TABLE cellspacing=x> Espesor de la raya entre las celdas
<TR>...</TR> Línea de la tabla
<TD>...</TD> Celda de la tabla
<TD bgcolor="#XXXXXX"> Color de una celda de la tabla
<TD width="x%"> <TD width=x>
Anchura de columna en % Anchura de columna en pixeles
<TD align=center> <TD align=left> <TD align=right>
Texto centrado en la celda Texto alineado a la izquierda en la celda Texto alineado a la derecha en la celda
<TD valign=bottom> <TD valign=middle> <TD valign=top>
Alineación hacia arriba del contenido de la celda Centrado vertical del contenido de una celda Alineación hacia el bajo del contenido de la celda
<TD colspan=x> Número de celdas para fusionar
150
CARRERAS PROFESIONALES CIBERTEC
<TD rowspan=x>
horizontalmente Número de celdas para fusionar verticalmente
PARA MARCOS
<FRAMESET>...</FRAMESET> Define una estructura de frames (reemplaza la etiqueta BODY)
<FRAMESET rows="x%,y%,..."> División horizontal de la ventana en %
<FRAMESET cols="x%,y%,..."> División vertical de la ventana en %
<FRAME src="fichier.htm"> Fichero mostrado en una ventana de frames
<NOFRAMES>...</NOFRAMES> Contenido para los browser no previstos para los frames
top related