1. Instituto de Formación Profesional Curso de diseño Web 4
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
Instituto de Formación Profesional
Esta es una publicación de CYBERTRONIC® , Departamento de Enseñanza de Informática,
Reconocido por el MEC (Ministerio de Educación y Culto) Res. No. 246
CYBERTRONIC ®ES UNA MARCA REGISTRADA.
Edif. Plas 2| Piso Of. 8 y 9 Telef. 504622 E_mail cybertronic.cde@gmail.com
Dirección en Internet www.cybertronic-cde.blogspot.com
Ciudad del Este - Paraguay
2. Instituto de Formación Profesional Curso de diseño Web 5
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
Nombre y apellido: _______________________________________________________________
Teléfono: ________________________________________________________________________
Dirección: ________________________________________________________________________
Ciudad:
_________________________________________________________________________
Profesor: ______________________________________________________________________
Curso: _______________________________________________________________________
Horario: ______________________________________________________________________
Días: _________________________________________________________________________
Vto. de Cuota:______________/_____________/____________
Vto. de Cuota:______________/_____________/____________
Vto. de Cuota:______________/_____________/____________
Vto. de Cuota:______________/_____________/____________
Vto. de Cuota:______________/_____________/____________
Vto. de Cuota:______________/_____________/____________
Vto. de Cuota:______________/_____________/____________
Vto. de Cuota:______________/_____________/____________
Vto. de Cuota:______________/_____________/____________
Anotaciones Importantes – Horarios de Exámenes - Notas
Teléfonos – E-mail - Sitios web
Cybertronic (061) 5046222 cybertronic.cde@gmail.com
www.cybertronic-cde.blogspot.com
3. Instituto de Formación Profesional Curso de diseño Web 6
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
Este Material le dará a conocer los conceptos de La programación HTML.
Éxitos y Buena Suerte!!!!!
Presentación:
El Instituto Profesional CYBERTRONIC es una Institución privada fundada el 17 de junio
de 1996 con recursos propios. Incorporado al Ministerio De Educación Resolución No.
246.
Desde sus inicios se ha destacado en Ciudad del Este por hacer de la enseñanza de la
informática una tarea amena y sin complicaciones, Desde su inauguración hasta el presente
innumeras personas se han graduado y muchos han transformado su mundo gracias al
dominio de esta nueva herramienta.
CYBERTRONIC Busca ofrecer cursos de calidad y es por ello que trata de estar siempre a
la vanguardia para acompañar los pasos agigantados de la evolución tecnológica.
Por eso siempre va innovando con nuevos cursos:
Como: Oratoria
Relaciones Humanas
Relaciones Publicas
Secretariado
Entre otros.
Para mas informes póngase en contacto con nosotros o visítenos en
Telefax: 504 622 – 0973 550896
E -mail cybertronic.cde@gmail.com Dirección en Internet www.secretariadocde.blogspot.com
Tómese un tiempo y repase los temas de este folleto consulte en Internet.
Vamos animo!!!! : )
Repase siempre sus lecciones. ; )
4. Instituto de Formación Profesional Curso de diseño Web 7
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
Curso de HTML
1. INTRODUCCIÓN 9
1.1. INTERNET 9
1.2. URL 9
1.3. LENGUAJE HTML 10
1.3.1. Qué es HTML 10
1.3.2. Cómo Especificar Efectos del Texto 10
1.4. NAVEGADORES 10
2. HTML BÁSICO 11
2.1. ESTRUCTURA DEL DOCUMENTO HTML 11
2.1.1. HTML 11
2.1.2. HEAD 11
2.1.3. BODY 12
2.2. DEFINICIÓN DE BLOQUES DE TEXTO 14
2.2.1. Títulos de H1 a H6 14
2.2.2. BR 14
2.2.3. P 14
2.2.4. BLOCKQUOTE 14
2.2.5. CENTER 15
2.2.6. HR 15
2.2.7. MULTICOL 16
2.2.8. SPACER 16
2.3. MODIFICADORES DEL TEXTO 17
2.3.1. B 17
2.3.2. BLINK 17
2.3.3. EM 17
2.3.4. FONT 17
2.3.5. I 18
2.3.6. SUB 19
2.3.7. SUP 19
2.3.8. U 19
2.3.9. Otros Modificadores menos utilizados 19
2.4. LISTAS 20
2.4.1. OL 20
2.4.2. UL 20
2.4.3. LI 21
2.5. ENLACES Y ANCLAS 22
2.5.1. A como enlace 22
2.5.2. A como ancla 23
2.6. IMÁGENES 23
2.6.1. IMG 23
2.6.2. AREA 26
2.6.3. MAP 27
2.6.4. MapThis 29
5. Instituto de Formación Profesional Curso de diseño Web 8
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
2.6.5. GIF’s animados 29
3. HTML AVANZADO 30
3.1. TABLAS 30
3.1.1. Table 30
3.1.2. Caption 32
3.1.3. TR 33
3.1.4. TD 33
3.2. FRAMES 34
3.2.1. Frame 34
3.2.2. Frameset 36
3.2.3. A 38
3.2.4. Navegadores que no soportan frames 39
3.3. FORMULARIOS 40
3.3.1. Form 40
3.3.2. Input 41
3.3.3. Select 43
3.3.4. Option 43
3.3.5. TextArea 44
3.4. COLUMNAS 45
3.5. MULTIMEDIA Y APPLETS 46
3.5.1. Sonido 46
3.5.2. Vídeo 49
3.5.3. QuickTime 50
3.5.4. Modelos 3D 53
3.5.5. Applets ¡Error! Marcador no definido.
4. EDITORES ¡ERROR! MARCADOR NO DEFINIDO.
4.1. NETSCAPE COMPOSER ¡ERROR! MARCADOR NO DEFINIDO.
4.2. EDICIÓN WYSIWYG ¡ERROR! MARCADOR NO DEFINIDO.
4.3. PÁGINAS CON MARCADORES BÁSICOS ¡ERROR! MARCADOR NO DEFINIDO.
4.4. PUBLICACIÓN DE LAS PÁGINAS EN INTERNET ¡ERROR! MARCADOR NO DEFINIDO.
4.5. LIMITACIONES ¡ERROR! MARCADOR NO DEFINIDO.
5. JAVASCRIPT ¡ERROR! MARCADOR NO DEFINIDO.
6. HTML DINÁMICO ¡ERROR! MARCADOR NO DEFINIDO.
6.1. HOJAS DE ESTILO ¡ERROR! MARCADOR NO DEFINIDO.
6.2. POSICIONAMIENTO ¡ERROR! MARCADOR NO DEFINIDO.
6.3. CAPAS ¡ERROR! MARCADOR NO DEFINIDO.
6. Instituto de Formación Profesional Curso de diseño Web 9
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
1. Introducción
1.1. Internet
Internet es una red de ordenadores localizados a lo largo y ancho de todo el planeta. Desde hace
aproximadamente 4 años la principal forma de acceso a la información en esta red es el lenguaje HTML que
es la base de las páginas web que se visualizan mediante los navegadores más comunes (Netscape Navigator o
Internet Explorer).
Uno de los primeros problemas que se plantearon en el desarrollo de las redes que dieron lugar a Internet fue
el acceso a un número siempre creciente de máquinas conectadas. Para resolver este problema se desarrolló
un sistema de nombres jerárquico basado en dominios. En un primer nivel estaban los dominios de los paises
(con una abreviatura de dos letras, .es .fr .pt .it) y los dominios genéricos originales de EE.UU. (.com
comercial, .net propio de la re, .org organizaciones, .mil militar).
Este sistema de nombres se gestiona mediante el DNS (Domain Name Service – Servicio de Nombres de
Dominio) que permite que cualquier máquina de Internet pueda realizar una conexión con cualquier otra. Esta
conexión puede ser de cualquier tipo y no sólo para visualizar páginas web.
1.2. URL
Ya dentro de lo que es la navegación de páginas web, cuando se quiere acceder a una dirección en concreto,
hay que especificar un URL (Universal Resource Location – Localización Universal de Recursos) que viene a
ser una forma estándar para definir servicios dentro de Internet.
Un URL está compuesto de tres partes:
1. Tipo de servicio
2. Máquina que ofrece el servicio
3. Recurso al que queremos acceder (normalmente un fichero) incluyendo el
directorio
Para acceder a páginas web el tipo de servicio es http por lo que un URL válido de un servidor web viene a
ser http://maquina.pais/dir1/dir2/fichero.html
Para acceder a páginas que residen en el ordenador en el que se está trabajando hay que sustituir http por file e
indicar además del directorio la unidad de disco en la que se está trabajando. Por ejemplo
file:///C|midirectorio/mifichero.htm
Dentro de los ficheros HTML los URL se pueden especificar relativos al directorio raíz del servidor web
como /dir1/dir2/mifichero.html o incluso de forma relativa al directorio que contiene el directorio actual sin
especificar la primera barra dir1/dir2/mifichero.html
Los servidores web, es decir, la máquina a la que hay que conectarse para recibir las páginas web, suelen
interpretar que el fichero principal de cada directorio se llama index.html por lo que no hace falta nombrarlo
explícitamente en el URL. Así, poner http://cybertronic.com.py es lo mismo que poner
http://cybertronic.com.py /index.html
Por último, hay que intentar poner siempre directorios relativos para facilitar el cambio de ubicación de los
ficheros dentro del servidor web y, sobre todo, no se puede uno olvidar de eliminar las referencias a las
unidades de disco locales cuando se van a publicar las páginas en el servidor.
7. Instituto de Formación Profesional Curso de diseño Web 10
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
1.3. Lenguaje HTML
1.3.1. Qué es HTML
HTML (HyperText Markup Language) es un lenguaje muy sencillo que permite describir hipertexto, es decir,
texto presentado de forma estructurada y agradable, con enlaces (hyperlinks) que, al pinchar en ellos,
conducen a otros documentos o fuentes de información relacionadas. Además, en las últimas versiones de
HTML se pueden insertar ficheros multimedia (gráficos, sonido, etc.).
La descripción se basa en especificar en el texto la estructura lógica del contenido (títulos, párrafos de texto
normal, enumeraciones, definiciones, citas, etc.) así como los diferentes efectos que se quieren dar
(especificar los lugares del documento donde se debe poner cursiva, negrita, o un gráfico determinado) y dejar
que luego la presentación final de dicho hipertexto se realice por un programa especializado (como Netscape
o Explorer).
Un fichero con código HTML es solamente un fichero de texto con extensión htm o html. El lenguaje HTML
está, en estos momentos en su versión 4 aunque los dos navegadores más conocidos, los de Netscape y
Microsoft, aporten cada uno extensiones al HTML 4 estándar.
1.3.2. Cómo Especificar Efectos del Texto
La mayoría de los efectos se especifican de la misma forma: rodeando el texto que se quiere marcar entre dos
etiquetas o directivas (tags, en inglés), que definen el efecto o unidad lógica que se desea. Las etiquetas están
formadas por determinados códigos metidos entre los signos < y >, y con la barra / cuando se trata de la
segunda etiqueta de un efecto (la de cierre). Por ejemplo: <efecto> para abrir y </efecto> para cerrar. Ciertas
directivas sólo se ponen una vez en el lugar del texto donde queramos que aparezca el efecto concreto. Esto es
lo que ocurre, por ejemplo, cuando queremos poner un gráfico, caso en el que se usa algo parecido a
<poner_gráfico_aquí> (más adelante se verá la directiva concreta que se utiliza).
A veces es necesario ofrecer datos adicionales en una directiva. Por ejemplo, cuando se define un enlace hay
que especificar su destino. Para ello se incluyen parámetros en la directiva inicial (la de apertura), de la
siguiente forma: <efecto parámetro1 parámetro2 ...>. La directiva de cierre, caso de ser necesaria, queda como
antes: </efecto>.
1.4. Navegadores
La versión actual, en estas fechas, de los dos navegadores más conocidos, Netscape Navigator y Microsoft
Explorer, es la 4. Aunque teóricamente cualquiera de los dos navegadores son capaces de interpretar el código
HTML y visualizarlo, la realidad es que cada uno lo hace de una forma ligeramente distinta lo que nos puede
llevar a problemas como diseñadores. Es muy habitual que los ajustes finos tanto de posición como de
alineamiento, en los márgenes de tablas y frames los realicen de manera distinta, obligando a comprobar cada
cambio en el código en ambos navegadores para confirmar que los resultados son los esperados.
Por otro lado, es conveniente acceder regularmente a las páginas web de Netscape y de Microsoft para
localizar la información sobre las extensiones que cada una de las empresas aporta al estándar HTML,
teniendo en cuenta que, casi con toda seguridad, estas extensiones sólo funcionen en su propio navegador.
8. Instituto de Formación Profesional Curso de diseño Web 11
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
2. HTML Básico
2.1. Estructura del documento HTML
Un documento HTML, en su forma más básica se compone de 4 marcadores que son: HTML,
HEAD, TITLE y BODY
2.1.1. HTML
El marcador HTML es el primero y el último de una página Web. Identifica el documento como una
página web y se encarga de indicar el principio y el final de la página.
Sintaxis: <HTML>...</HTML>
Ejemplo:
<HTML>
<BODY>
Este es la página web mínima.
</BODY>
</HTML>
2.1.2. HEAD
El marcador HEAD define la cabecera del documento. La cabecera contiene información sobre el
propio documento. No contiene información que vaya a ser mostrada en pantalla por el navegador a
no ser el contenido del marcador TITLE. Este marcador precede siempre al marcador BODY.
Entre los marcadores HEAD y /HEAD pueden ir los siguientes TITLE, BASE, META, SCRIPT,
STYLE y LINK.
El más utilizado es el marcador TITLE que especifica el texto que se coloca en la barra de título de
la ventana del navegador. Su sintaxis es estándar <TITLE> texto del título </TITLE>
Sintaxis: <HEAD>...</HEAD>
Ejemplo:
<HEAD>
<TITLE> Primera página web</TITLE>
<BASE HREF="http://www.mozilla.com">
</HEAD>
Descripción de otros marcadores de la sección HEAD
BASE: especifica el URL donde se deben buscar los enlaces relativos.
META: Información sobre la página para navegadores y buscadores
SCRIPT: sirve para incluir código en javascript
STYLE: sección de Hojas de Estilo en HTML dinámico, define estilos
9. Instituto de Formación Profesional Curso de diseño Web 12
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
LINK: sección de Hojas de Estilo en HTML dinámico, enlaza ficheros externos
2.1.3. BODY
EL marcador BODY especifica el contenido principal del documento. Es decir todo lo que vaya a
aparecer en pantalla de la página web tiene que estar entre los marcadores <BODY> y </BODY>.
Dentro del propio marcador <BODY> se especifican las características generales del documento.
En cuanto al fondo de la página se pueden modificar el color de fondo y la imagen de fondo. En
cuanto al texto se puede cambiar su color por defecto, el de los enlaces activos, el de los visitados y
el de los no visitados.
También se pueden definir acciones en lenguaje Javascript para cuando la página se acabe de
cargar, se recibe o pierde el foco y, en general, para un conjunto de eventos que se pueden producir
en una ventana de programa (clicks de ratón, pasar hacia delante, hacia atrás, etc.).
Sintaxis:
<BODY
BACKGROUND="bgURL"
BGCOLOR="color"
TEXT="color"
LINK="color"
ALINK="color"
VLINK="color"
ONLOAD="loadJScode"
ONUNLOAD="unloadJScode"
ONBLUR="blurJScode"
ONFOCUS="focusJScode"
CLASS="styleClass"
ID="namedPlaceOrStyle"
LANG="ISO"
STYLE="style"
>
contenido de la página web
</BODY>
10. Instituto de Formación Profesional Curso de diseño Web 13
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
BACKGROUND="bgURL"
Especifica una imagen que se visualiza como fondo de
la página. La imagen es repetida tanto en horizontal
como envertical. El URL puede ser tanto una dirección
completa en otra máquina como indicar un fichero en
la máquina local.
BGCOLOR="#FFFFFF"
Establece el color de fondo en hexadecimal en formato
RGB (Red Green Blue). Para ver un conjunto de
colores predefinidos puede consultar el fichero
colortab.htm
TEXT="color"
Establece el color en hexadecimal del texto normal
(que no forma parte de un enlace).
LINK="color"
Establece el color de un enlace que todavía no ha sido
visitado (no se ha hecho un click en ese enlace).
ALINK="color"
Especifica el color al que cambia brevemente un
enlace cuando se hace click en el. A continuación el
enlace pasa del color LINK al color VLINK
VLINK="color"
Especifica el color de los enlaces que ya han sido
visitados
ONLOAD="loadJScode"
Código Javasript que se ejecuta cuando se acaba de
cargar la página web
ONUNLOAD="unloadJScode"
Código Javasript que se ejecuta cuando se aborta la
carga de la página
ONFOCUS="focusJScode"
Código Javasript que se ejecuta cuando la ventana en
la que está la página adquiere el foco
ONBLUR="blurJScode"
Código Javasript que se ejecuta cuando la ventana en
la que está la página pierde el foco
Este ejemplo establece un color de fondo amarillo claro, pone el texto normal en negro, los
enlaces no visitados en azul, los visitados en verde y los enlaces activados en rojo:
<BODY BGCOLOR="#FFFFAA" TEXT="black" LINK="blue" VLINK="green"
ALINK="red">
...
</BODY>
11. Instituto de Formación Profesional Curso de diseño Web 14
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
2.2. Definición de bloques de texto
2.2.1. Títulos de H1 a H6
Define títulos para secciones con características estándar. El título H1 es el más visible y el
H6 el más pequeño. Normalmente se visualizan en negrita y con un tamaño de letra mayor
que el texto normal. Empiezan en una nueva línea y todos los navegadores añaden una línea
en blanco antes de cada título.
Sintaxis:
<H1 ALIGN="LEFT"|"CENTER"|"RIGHT">...</H1>
<H2 ALIGN="LEFT"|"CENTER"|"RIGHT">...</H2>
<H3 ALIGN="LEFT"|"CENTER"|"RIGHT">...</H3>
<H4 ALIGN="LEFT"|"CENTER"|"RIGHT">...</H4>
<H5 ALIGN="LEFT"|"CENTER"|"RIGHT">...</H5>
<H6 ALIGN="LEFT"|"CENTER"|"RIGHT">...</H6>
ALIGN
Especifica el alineamiento horizontal y puede tomar los valores LEFT, CENTER y RIGHT.
2.2.2. BR
Inserta un final de línea (Break Line) sin añadir línea en blanco
Sintaxis: <BR>
2.2.3. P
Define un nuevo párrafo. Esto quiere decir que el texto a continuación de P empieza en una
nueva línea y se precede de una línea en blanco. No es necesario utilizar el marcador </P>
al final del párrafo. Si se utiliza se añade una línea en blanco a continuación del párrafo
Sintaxis
<P ALIGN="LEFT"|"CENTER"|"RIGHT"> ... </P>
2.2.4. BLOCKQUOTE
Indenta un bloque de texto. Es posible anidar marcadores para definir niveles de
indentación.
12. Instituto de Formación Profesional Curso de diseño Web 15
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
Sintaxis: <BLOCKQUOTE> ... </BLOCKQUOTE>
2.2.5. CENTER
Centra todos los objetos, ya sean texto, gráficos, tablas,etc. Contenidos entre los
marcadores <CENTER> </CENTER> evitando la necesidad de indicar en todos los
marcadores de los objetos el alineamiento CENTER. La presencia de una propiedad
ALIGN prevalece sobre el marcador <CENTER>
Sintaxis: <CENTER>...</CENTER>
2.2.6. HR
Visualiza un línea horizontal que nos permite separar visualmente partes de la página. Es
posible configurar la longitud y la anchura de la línea. Por defecto la línea tiene un aspecto
de 3D
Sintaxis:
<HR
ALIGN="CENTER"|"LEFT"|"RIGHT"
NOSHADE
SIZE="thickness"
WIDTH="width">
NOSHADE
La línea no muestra el aspecto 3D
SIZE="thickness"
Indica el grosor de la línea que por defecto es de 2
WIDTH="width"
Define la anchura horizontal de la línea en tanto por ciento, siendo el 100% la anchura total
de la página.
Ejemplo:
<HR NOSHADE ALIGN="CENTER" WIDTH="50%" SIZE="8">
13. Instituto de Formación Profesional Curso de diseño Web 16
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
2.2.7. MULTICOL
Permite mostrar el texto en varias columnas del mismo ancho en una determinada área de la página.
Sintaxis:
<MULTICOL
COLS="columns"
GUTTER="gutterWidth"
WIDTH="colWidth">
...
</MULTICOL>
COLS="columns"
Este atributo es obligatorio y especifica el número de columnas de texto. Netscape intenta repartir el texto
para que cada columna tenga la misma altura.
GUTTER="gutterWidth"
Especifica la distancia entre columnas en pixels. Si no se especifica, Netscape usa 10 pixels por defecto.
WIDTH="colWidth"
Especifica el ancho de las columnas en pixels. Todas las columnas son de la misma anchura. Si no se
especifica este parámetro, la anchura se ajusta para que se ocupe todo el ancho de la página.
2.2.8. SPACER
Inserta espacio extra en el documento, ya sea entre caracteres, líneas o rectángulos de la página.
Sintaxis:
<SPACER
TYPE="HORIZONTAL"|"VERTICAL"|"BLOCK"
ALIGN="LEFT"|"RIGHT"|"TOP"|"ABSMIDDLE"|"ABSBOTTOM"|
"TEXTTOP"|"MIDDLE"|"BASELINE"|"BOTTOM"
HEIGHT="height"
WIDTH="width"
SIZE="size”>
TYPE
Especifica sobre que se va a aplicar el espacio extra. Los valores que puede tomar son:
HORIZONTAL: inserta espacio horizontal entre 2 caracteres.
VERTICAL: inserta espacio vertical entre 2 líneas.
BLOCK: define un rectángulo dentro del que se aplica el espaciado que se define en el marcador.
ALIGN
Se aplica solo cuando el tipo es BLOCK. Especifica el alineamiento del rectángulo con respecto al texto
circundante. Si no se especifica, por defecto se usa BOTTOM
14. Instituto de Formación Profesional Curso de diseño Web 17
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
HEIGHT="height"
Se aplica solo cuando el tipo es BLOCK y especifica la altura del rectángulo en pixels.
WIDTH="width"
Se aplica solo cuando el tipo es BLOCK y especifica la anchura del rectángulo en pixels.
SIZE="size"
Si el parámetro TYPE es HORIZONTAL o VERTICAL este atributo especifica el espaciado en pixels que se
va a añadir. En el caso que TYPE tenga el valor BLOCK el valor de este parámetro se ignora.
2.3. Modificadores del texto
En este epígrafe se enumeran un conjunto de marcadores que hacen posible cambiar la
apariencia del texto de la página en el navegador.
2.3.1. B
Visualiza el texto en negrita (boldface)
Sintaxis: <B>...</B>
Ejemplo:
Por fin es <B>Viernes</B>.
2.3.2. BLINK
Texto con parpadeo en Netscape
Sintaxis: <BLINK>...</BLINK>
2.3.3. EM
Texto enfatizado. En Netscape se visualiza con Itálica
Sintaxis: <EM>...</EM>
2.3.4. FONT
Especifica la fuente , el color y el tamaño del texto entre <FONT> y </FONT>
15. Instituto de Formación Profesional Curso de diseño Web 18
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
Sintaxis:
<FONT
COLOR="color"
FACE="fontlist"
POINT-SIZE="pointSize"
SIZE="number"
WEIGHT="boldness">
texto
</FONT>
FACE="fontlist"
Especifica un conjunto de nombres de fuentes separadas por comas. El navegador usa la primera fuente de la
lista disponible en ese ordenador. Si no hay ninguna disponible no se aprecia cambio al utilizar el marcador
FONT.
POINT-SIZE="pointSize"
Indica el tamaño de la fuente en puntos mientras que SIZE lo indica en relación con el tamaño de fuente
estándar.
SIZE="number"
Define el tamaño relativo de fuente en un rango de 1 (pequeño) a 7(grande), siendo el tamaño por defecto de
3. También se puede especificar variaciones de tamaño con un signo + o – y una cifra para la magnitud.
SIZE=”+2”
WEIGHT="boldness"
Indica el grado de negrita que se aplica al texto. Los valores van de 100 (menos) a 900 (más) en incrementos
de 100
Ejemplo:
<P>Aquí se ve el efecto de
<FONT face="helvetica,arial,sans-serif" color=green size=+2>
usando el marcador FONT para cambiar la fuente a sans-serif verde.
</FONT>
Ahora la fuente cambiará a
<FONT face="timesroman,serif" size=18 color=red>
color rojo con un tamaño de 18 puntos.</font>
2.3.5. I
Visualiza el texto en Itálica
Sintaxis: <I>...</I>
16. Instituto de Formación Profesional Curso de diseño Web 19
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
2.3.6. SUB
Visualiza el texto como subíndice. Es decir, un poco más abajo y con un tamaño de letra menor
Sintaxis: <SUB>...</SUB>
2.3.7. SUP
Visualiza el texto como superíndice. Es decir, un poco más arriba y con un tamaño de letra menor.
Sintaxis: <SUP>...</SUP>
2.3.8. U
Visualiza el texto subrayado.
Sintaxis: <U>...</U>
2.3.9. Otros Modificadores menos utilizados
BASEFONT
define el tamaño base de la fuente por defecto <BASEFONT SIZE=”4”>
BIG
Aumenta el valor de la fuente en 1
CITE
Define un tipo Cita, en Netscape en Itálica
CODE o TT (Typewriter Font)
Define un tipo para código como fuente de tamaño fijo
PLAINTEXT
Suprime la interpretación de todos los modificadores a partir de el
SMALL
Reduce el tamaño de fuente en 1
STRIKE
Tacha el texto
STRONG
Visualiza el texto con énfasis. Netscape lo visualiza como en negrita
17. Instituto de Formación Profesional Curso de diseño Web 20
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
2.4. Listas
EN HTML se pueden definir dos tipos de listas, las listas ordenadas OL (ordered list) que están indexadas con
números y las no ordenadas que se indexan con símbolos UL (un ordered list). Ambas constan de elementos
denominados LI (list items).
2.4.1. OL
Especifica una lista ordenada y numerada. El estilo de numerado por defecto está determinado por el
navegador pero se puede fijar usando la propiedad TYPE. Los elementos de la lista se preceden del marcador
LI
Sintaxis:
<OL
START="value"
TYPE="A"|"a"|"I"|"i"|"1">
...
</OL>
START="value"
Indica el número de inicio de la lista. Este número tiene que ser un entero positivo.
TYPE
Define el tipo de numeración que se usa para cada elemento de la lista. Puede tomar los siguientes valores:
A especifica una secuencia de letras en mayúscula
a especifica una secuencia de letras en minúscula
I especifica una secuencia de números romanos en mayúscula
i especifica una secuencia de números romanos en minúscula
1 especifica una secuencia de números
2.4.2. UL
Especifica una lista no ordenada. Se puede usar la propiedad TYPE para cambiar el símbolo que inicia cada
elemento de la lista.
18. Instituto de Formación Profesional Curso de diseño Web 21
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
Sintaxis:
<UL TYPE="CIRCLE"|"DISC"|"SQUARE"> ... </UL>
TYPE
Define el símbolo que aparece delante de cada elemento de la lista. Los valores son los siguientes: CIRCLE,
DISC (por defecto en Netscape) o SQUARE.
2.4.3. LI
Define un elemento de una lista que normalmente va precedido de un número o un símbolo. Este marcador se
usa dentro de los marcadores OL y UL. Este marcador no necesita marcador de cierre.
Sintaxis:
<LI
TYPE="DISC"|"CIRCLE"|"SQUARE"|"A"|"a"|"I"|"i"|"1"
VALUE="number">
TYPE
Especifica el símbolo o número que precede al item y se especifica igual que en los marcadores OL y UL.
VALUE="number"
Indica el valor de comienzo en una lista ordenada y solo es aplicable en este tipo de listas.
19. Instituto de Formación Profesional Curso de diseño Web 22
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
2.5. Enlaces y anclas
La parte fundamental de las páginas HTML son los enlaces entre documentos,
denominados links en inglés. Estos enlaces es lo que distingue a las páginas web de lo que
es un libro tradicional.
Haciendo un click de ratón en uno de estos enlaces, nuestro navegador visualizará una hoja
distinta (enlace) o saltará a otra sección de la misma página (ancla). Este comportamiento
es lo que ha hecho evolucionar el texto tradicional al denominado hipertexto de las páginas
Web. El marcador utilizado para definir los enlaces y las anclas es el A.
2.5.1. A como enlace
Para definir un enlace se utiliza el marcador <A> junto al atributo HREF que indica la
localización del documento destino y el marcador </A> para indicar el fin del enlace. El
texto contenido entre <A> y </A> aparecerá resaltado en la página web. La mayoría de los
navegadores, y a no ser que se le indique otra cosa en la página, muestran el texto de los
enlace de forma especial. Netscape los muestra de color azul en modo subrayado y los
enlaces visitados de color púrpura. Como ya se ha comentado esto se puede cambiar con los
atributos LINK, VLINK y ALINK del marcador BODY.
El valor que contiene el atributo HREF es un URL. Este URL puede ser absoluto o relativo
y puede apuntar a ficheros de la misma máquina o de una máquina remota.
Sintaxis: <A HREF="location"> ... </A>
El atributo HREF se puede utilizar también para enviar un mensaje
HREF=mailto:correo@udc.es, para acceder a los ficheros de un servidor de FTP
HREF=ftp://ftp.udc.es o para leer los grupos de un servidor de noticias
HREF=news://news.udc.es
20. Instituto de Formación Profesional Curso de diseño Web 23
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
2.5.2. A como ancla
El marcador A funcionando como ancla define un lugar concreto dentro de la página web
de forma que se pueda acceder a esa posición directamente desde un enlace. Para que A
funcione como un ancla hay que especificar el atributo NAME. No es posible utilizar un
marcador A para definir a la vez un ancla y un enlace
Sintaxis: <A NAME="anchorName"> ... </A>
Para acceder a una de estas anclas hay que insertar un marcador A con un HREF con el
nombre del ancla precedido del símbolo #. También se puede acceder a un documento de
una máquina remota especificando el ancla dentro de una página especificando la máquina,
el directorio, el nombre de la página y, a continuación el nombre del ancla separado por un
símbolo #. Por ejemplo:
HREF="#ancla1"
HREF="http://mimaquina/dir1/fichero.html#ancla1"
2.6. Imágenes
2.6.1. IMG
El marcador IMG apunta hacia una imagen que se va a visualizar en la página web. Un marcador IMG puede
estar insertado en un enlace entre los marcadores <A> y </A> de forma que sea la imagen en la que se hace
click con el ratón para acceder a otra página web.
Para indicar que imagen se va a visualizar y donde está se utiliza el atributo SRC. Se puede especificar
también una donde está una versión de baja resolución con el atributo LOWSRC. La razón de tener dos
versiones de la misma imagen es que la imagen de baja resolución como es más pequeña llega antes y el
usuario tiene algo que ver en pantalla mientras llega la versión definitiva de alta resolución. La versión de
baja resolución debería ser mucho más pequeña que la otra. Esta solución no es muy utilizada tendiéndose
más a usar imágenes entrelazadas o progresivas que se van visualizando cada vez mejor según van llegando
los bytes.
Los atributos HEIGHT y WIDTH indican las dimensiones que la imagen va a tener en la página web. Si se
especifican, los navegadores reservan un espacio en la página para cuando llegue la imagen y siguen cargando
el resto de elementos de la página. Obviamente es posible variar los valores de estos atributos para adecuar el
tamaño de la imagen original.
Actualmente, los dos tipos más conocidos de formato de imagen que visualizan los navegadores son: GIF
(Graphics Interchange Format) y JPEG (Joint Photographic Experts Group).
21. Instituto de Formación Profesional Curso de diseño Web 24
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
Sintaxis:
<IMG
SRC="location" // este atributo es imprescindible
LOWSRC="location"
ALT="alterntiveText"
ALIGN="alignment"
BORDER="borderWidth"
HEIGHT="height"
WIDTH="width"
HSPACE="horizMargin"
VSPACE="verticalMargin"
ISMAP
USEMAP="#mapName"
NAME="imageName"
>
SRC="location"
Indica el URL de la imagen que se va a visualizar
LOWSRC="location"
Indica el URL de la versión de la imagen en baja resolución.
ALT="alternativeText"
Indica un texto que se visualizará en vez de la imagen si el navegador que se utiliza no
soporta imágenes o se tiene desactivada la opción de carga de imágenes. En las últimas
versiones de los navegadores este texto también se visualiza, cuando se detiene el ratón
encima de la imagen, dentro de un pequeño recuadro.
22. Instituto de Formación Profesional Curso de diseño Web 25
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
ALIGN
Especifica el alineamiento de la imagen en relación con el texto que la rodea, puede tomar
los siguientes valores (el valor por defecto es BOTTON):
LEFT alienación al margen izquierdo.
RIGHT alineación al margen derecho.
TOP alinea la parte alta de la imagen con el objeto más alto de la línea
actual
ABSMIDDLE alinea la parte media de la imagen con la parte media del texto de la
línea actual
ABSBOTTOM alinea la parte baja de la imagen con el objeto más bajo de la línea
actual
TEXTTOP lo mismo que TOP
MIDDLE alinea la parte media de la imagen con la línea de base del texto de la
línea actual
BASELINE alinea la parte baja de una imagen con la línea de base del texto de la
línea actual
BOTTOM lo mismo que BASELINE.
BORDER="borderWidth"
Especifica la anchura en pixels del borde alrededor de la imagen. El valor ha de ser un
entero. Si se pone a cero en una imagen que sea un enlace se suprimirá el borde azul
característico.
HEIGHT="height"
Indica la altura de la imagen. Puede estar en pixels o en porcentaje de la altura de la
ventana, el frame o el bloque de HTML que la contenga. Para indicar un número de pixels
se pone el valor “100” y para indicar un porcentaje se acompaña el valor del signo
porcentaje “100%”
WIDTH="width"
Especifica la anchura de la imagen y también se puede especificar en pixels y en porcentaje
de la misma forma que la altura.
23. Instituto de Formación Profesional Curso de diseño Web 26
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
HSPACE="horizMargin"
Especifica un margen en pixels entre los bordes izquierdo y derecho de la imagen con
respecto al texto y a las imágenes que la rodeen.
VSPACE="verticalMargin"
Especifica un margen en pixels entre los bordes superior e inferior de la imagen con
respecto al texto y a las imágenes que la rodeen.
ISMAP
Indica que la imagen es un mapa servidor. Para que tenga efecto este atributo la imagen
tiene que estar dentro de un marcador <A> </A> que apunte al fichero de mapeado. Se verá
su funcionamiento en la siguiente sección.
USEMAP="#mapName"
Indica que la imagen la imagen es un mapa sensible y el valor "#mapName" indica el
marcador que contiene los valores de mapeado de la imagen. Se verá su funcionamiento en
la siguiente sección.
2.6.2. AREA
El marcador AREA define una zona dentro de una imagen. Un mapa sensible puede
contener varias áreas “pinchables” y cada una de ellas puede tener asociadas un diferente
URL.
El marcador AREA se usa siempre dentro del marcador MAP que se verá a continuación.
Sintaxis:
<AREA
COORDS="coords" // este atributo es imprescindible
SHAPE="shape"
HREF="location"
NOHREF
TARGET="windowName"
>
Es necesario que se especifique el atributo HREF o el NOHREF
24. Instituto de Formación Profesional Curso de diseño Web 27
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
COORDS="coords"
Indica las coordenadas de la zona. Las coordenadas se especifican desde la esquina superior izquierda de la
imagen. El formato de este atributo depende de la forma que va a tener la zona, que se define en el atributo
SHAPE. Si SHAPE no se incluye en el marcador, la forma por defecto es un rectángulo y, entonces, los
valores tienen que ser de la forma "x1,y1,x2,y2" donde x1, y1 son las coordenadas de la esquina superior
izquierda y x2, y2 las coordenadas de la esquina inferior derecha. Si en el atributo SHAPE se especifica un
círculo el formato es "x,y,r" donde x,y son las coordenadas del centro del círculo y r es el radio. El último
caso es que se especifique un polígono, que puede ser de hasta 100 lados. El formato es "x1,y1,x2,y2,...xn,yn"
donde cada par x,y representa un punto de uno de los lados del polígono. El último par x,y se conecta con el
primero para cerrar el polígono.
SHAPE="shape"
Especifica la forma de la zona. Dependiendo de la forma que se escoja hay que definir de una cierta manera
los valores de definición de coordenadas en el atributo COORDS. Las formas que se pueden escoger son:
CIRCLE, RECT y POLY o POLYGON. Si no se especifica nada, el valor por defecto es RECT.
HREF="location"
Especifica el URL al que se salta al hacer click en esa zona
NOHREF
Especifica que no se salta a ninguna nueva página al hacer click en esa zona
2.6.3. MAP
Este marcador contiene la información de las zonas activas que existen dentro de una imagen. Una zona
activa define una zona dentro de una imagen que tiene asignado un URL por lo que al hacer un click con el
ratón se pasa a otra página web. Este tipo de imágenes con zonas activas se denominan mapas sensibles.
Existen dos tipos de mapas sensibles: servidores y clientes. En los mapas servidores, la información de las
zonas está almacenada en un fichero aparte que reside en el servidor de web. En los mapas cliente, la
información está dentro de un marcador MAP en el propio fichero HTML en el que se muestra la imagen.
Este marcador MAP contiene uno o varios marcadores AREA para describir las diferentes zonas de la imagen
y los URL’s asociados a ellas.
Para asociar un las zonas a una imagen, dentro del marcador IMG se añade el atributo USEMAP. Este
atributo toma como valor un nombre del mapa indicado en un marcador MAP precedido por un símbolo #.
25. Instituto de Formación Profesional Curso de diseño Web 28
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
Sintaxis:
<MAP NAME="mapName"> // este atributo es imprescindible
<AREA ...>
...
<AREA ...>
</MAP>
NAME="mapName"
Indica el nombre del mapa. Este nombre precedido de # es el que se indica en el campo
USEMAP del marcador IMG.
Ejemplo:
<IMG SRC="images/shapes.gif" WIDTH=100 HEIGHT=100
ALT="shapes" USEMAP="#mainmap"
<MAP NAME="mainmap">
<AREA SHAPE=CIRCLE COORDS="50,50,25"
HREF="http://home.netscape.com" >
<AREA SHAPE=RECT COORDS="50,50,100,100"
HREF="http://developer.netscape.com" >
<AREA SHAPE=RECT COORDS="0,0,100,100"
HREF="http://developer.netscape.com/library" >
</MAP>
26. Instituto de Formación Profesional Curso de diseño Web 29
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
2.6.4. MapThis
Este es uno de los varios programas que se pueden encontrar en Internet para el desarrollo de una forma fácil
de mapas sensibles en las imágenes de las páginas web. Es programa es muy reducido, ocupa apenas 1Mb de
espacio en disco (837Kb si no contamos los ejemplos) y su uso es muy sencillo. Una vez descomprimido en
un directorio no es necesario instalarlo y como se puede ver solo consta de dos ficheros (el propio programa y
uno de ayuda) y un directorio de ejemplos.
Una vez iniciado el programa, lo primero que hay que hacer es crear un proyecto pulsando la opción New del
menú File. Después de esto hay que escoger la imagen en formato GIF o JPEG que nos va a valer de base
para el mapa. Entonces se nos muestra la imagen en pantalla. A continuación podemos ya se pueden definir
las zonas, con forma rectangular, circular o poligonal. Para esto hay que seleccionar uno de los botones que
tienen estas formas en azul en la barra de herramientas inferior. Para dibujar una zona rectangular, una vez
quede pulsado el botón de este tipo de zonas, hay que pinchar con el botón izquierdo del ratón en la esquina
superior izquierda y arrastrar hasta llegar a la esquina inferior derecha. En el caso de un círculo, donde se
pinche con el ratón va a ser el centro del círculo y al arrastrar se decide el tamaño del radio. Para dibujar un
área poligonal se va haciendo click con el ratón para ir marcando los vértices del polígono, en el momento en
que se haga un doble click el programa cierra la figura. Si se marca con el ratón el botón con el icono flecha
es posible mover y redimensionar las zonas que ya han sido dibujadas. Haciendo doble click encima de una de
estas zonas se puede especificar el URL al que se quiere acceder desde ella.
Una vez que tenemos perfectamente definidas las zonas que interesan de la imagen hay que salvar esta
información a formato HTML. Para ello se escoge la opción Save del menú File y en la ventana que aparece a
continuación hay que escoger la opción CSIM que genera un fichero HTML con la información de las zonas.
Después de escoger el tipo de formato se escoge el nombre del fichero y el directorio donde se guarda en el
disco. En la siguiente imagen se muestra una ventana del block de notas de Windows con el fichro de salida
del programa MapIt para la imagen del X33.
2.6.5. GIF’s animados
Dentro del punto en el que se comentaba el marcador IMG se indicaba que los únicos formatos de imagen que
los navegadores pueden visualizar actualmente son el GIF y el JPEG. La ventaja que plantea el formato GIF
frente al JPEG es la posibilidad del visualización progresiva y la posibilidad de almacenar pequeñas
animaciones dentro de un archivo con formato GIF.
Para desarrollar animaciones basadas en el formato GIF también existen distintos programas, generalmente
gratuitos. Aquí se va a explicar el funcionamiento básico del programa Microsoft GIF Animator que, como en
el caso del MapIt es un programa de tamaño muy reducido (560Kb instalado) y muy sencillo de usar. La barra
de herramientas comienza con los típicos botones de Nuevo, Abrir y Salvar necesarios en cualquier programa.
A continuación, hay un icono para insertar nuevas imágenes y otro para hacer un Salvar como. Después
tenemos el grupo de iconos para Copiar y Pegar y el que permite seleccionar todos las imágenes de la
animación. Por último hay dos flechas para cambiar el orden de las imágenes dentro de la animación y el
botón de Play para ver al animación funcionando.
27. Instituto de Formación Profesional Curso de diseño Web 30
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
En la parte izquierda se pueden ver el conjunto de imágenes de la animación y en la parte derecha hay tres
pestañas que indican las opciones generales sobre el programa (Options), de la animación (Animation) y de la
imagen en particular que esté seleccionada en un momento dado (Image).
En Animation se define la repetición de la animación Loop con el número de veces que se va a repetir o si se
va a repetir siempre (Forever). También se define aquí el tamaño de la animación en pixels. En Image se
define el tiempo que permanece la imagen visualizada hasta que se carga la siguiente y la posición de una
imagen con respecto al origen de coordenadas.
3. HTML avanzado
Los marcadores que se comentan en este punto ya no forman parte de las definiciones
iniciales del HTML e, incluso hoy día, no es muy común poder componerlos en los editores
de HTML. Es decir, si se quiere construir una página con Frames es necesario editar
ficheros ASCII a mano e incluir los marcadores necesarios, lo mismo ocurre con los
marcadores para multimedia, mientras que, la construcción de tablas y formularios ya está
mucho más automatizada.
3.1. Tablas
3.1.1. Table
El marcador TABLE define una tabla. Dentro de un marcador TABLE se usan los
marcadores TR para definir filas y el TD para definir columnas. El marcador TABLE
también puede llevar un marcador CAPTION para especificar el título de la tabla.
Como propiedades de TABLE, se pueden especificar la anchura del borde de la tabla y su
color de fondo. También se puede especificar de forma individual el color de fondo de filas
y celdas en los marcadores TR y TD. Es posible, también especificar la distancia entre
celdas y la distancia del contenido de la celda al borde. Por último, se puede establecer la
anchura y la altura de la tabla, aunque el tipo de navegador tenga mucho que ver con el
resultado final de la tabla en pantalla.
28. Instituto de Formación Profesional Curso de diseño Web 31
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
Sintaxis:
<TABLE
ALIGN="LEFT|RIGHT"
BGCOLOR="color"
BORDER="value"
CELLPADDING="value"
CELLSPACING="value"
HEIGHT="height"
WIDTH="width"
COLS="numOfCols"
HSPACE="horizMargin"
VSPACE="vertMargin">
...
</TABLE>
ALIGN
Indica la alineación horizontal de la tabla. Como es habitual puede tomar los valores LEFT,
RIGHT y CENTER.
BGCOLOR="color"
Establece el color de fondo de la tabla. Este color tiene menos prioridad que el que se
establece de fondo en los marcadores TR o TD que prevalecen.
BORDER="value"
Indica el ancho del borde que se dibuja alrededor de la tabla en pixels. El valor tiene que
ser un entero. Si el valor es cero indica que la tabla no tiene borde. También se puede
especificar la propiedad borde sin ningún valor con lo que se consigue un borde con el
ancho predefinido en el navegador.
CELLPADDING="value"
Determina la cantidad de espacio, en pixels, entre el borde una celda y el contenido de esta.
El valor por defecto es uno.
CELLSPACING="value"
Determina la cantidad de espacio, en pixels, entre las celdas de la tabla. El valor por defecto
es 2.
29. Instituto de Formación Profesional Curso de diseño Web 32
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
HEIGHT="height"
Especifica la altura de la tabla. El valor por defecto se calcula para ajustar los contenidos de
cada celda. El valor de la altura se puede especificar en pixels con un número entero o con
un porcentaje sobre la altura de la página en la que está contenida la celda con un número
entero seguido del signo %. Cuando se especifican estos valores la tabla se escala para
ajustar su contenido a esa altura y anchura.
WIDTH="width"
Define la anchura de la tabla. Igual que en el caso de la altura, el valor por defecto de la
anchura se calcula para ajustar los contenidos. La forma de especificar el valor es igual que
en la propiedad altura.
COLS="numOfCols"
Indica el número de columnas de igual anchura de la tablas.
HSPACE="horizMargin"
Especifica la distancia entre el borde izquierdo y derecho de la tabla y los objetos que haya
alrededor de ella.
VSPACE="vertMargin"
Especifica la distancia entre el borde superior e inferior de la tabla y los objetos que haya
alrededor de ella.
3.1.2. Caption
El marcador CAPTION define el título de la tabla. Este marcador tiene que ir dentro de
<TABLE> </TABLE>
Sintaxis:
<CAPTION ALIGN="BOTTOM"|"TOP">...</CAPTION>
ALIGN
Especifica la posición del título con respecto a la tabla.
BOTTOM en la parte inferior.
TOP en la parte inferior. Este es el valor por defecto.
30. Instituto de Formación Profesional Curso de diseño Web 33
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
3.1.3. TR
El marcador TR define una fila dentro de una tabla. Se usa entre los marcadores <TABLE>
</TABLE>. Dentro del marcador TR se incluyen los marcadores TD de las columnas.
Sintaxis:
<TR
ALIGN="CENTER|LEFT|RIGHT"
VALIGN="BASELINE|BOTTOM|MIDDLE|TOP"
BGCOLOR="color" >
...
</TR>
VALIGN
Especifica el emplazamiento vertical del contenido de la celda. Puede tomar los valores:
BASELINE, BOTTOM, MIDDLE (valor por defecto) y TOP.
BGCOLOR="color"
Establece el color por defecto de las celdas de esa fila. El BGCOLOR que se especifica
para cada celda prevalece sobre el valor de la fila.
3.1.4. TD
Sirve para indicar el contenido de una celda. Se usa dentro del marcador TR. Se puede
especificar el número de columnas y filas que abarca una determinada celda, así como
especificar en concreto un cierto color de fondo.
Sintaxis:
<TD
ALIGN="CENTER|LEFT|RIGHT"
VALIGN="BASELINE|BOTTOM|MIDDLE|TOP"
BGCOLOR="color"
COLSPAN="value"
ROWSPAN="value"
HEIGHT="pixelHeight"
WIDTH="pixelWidth"
NOWRAP="value" >
...
</TD>
31. Instituto de Formación Profesional Curso de diseño Web 34
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
COLSPAN="value"
Indica el número de columnas que ocupará esa celda. El número tiene que ser de tipo
entero.
ROWSPAN="value"
Indica el número de filas que ocupará esa celda. El número tiene que ser de tipo entero.
HEIGHT="pixelHeight"
Especifica la altura de la celda en pixels
WIDTH="pixelWidth"
Especifica el ancho de la celda en pixels.
NOWRAP
Indica que las líneas de la celda no pueden ser divididas en varias líneas
3.2. Frames
En este punto se va a comentar la posibilidad de dividir la ventana del navegador en
documentos independientes en los que se pueden cargar distintas páginas webs. Para ello se
define una página que contiene la definición de las divisiones, estas divisiones se conocen
como FRAMESETS y dentro de ellas cada división se denomina FRAME y visualiza una
página web.
3.2.1. Frame
El marcador FRAME crea una región individual dentro de la ventana del navegador que
dispone de una barra de desplazamiento propia. Se puede pensar en esta área como una
ventana dentro de otra ventana. El marcador FRAME se utiliza dentro del marcador
FRAMESET. Cada FRAME visualiza un URL distinto que determina su contenido.
Se puede especificar si una FRAME tiene borde, márgenes, si se puede modificar su
tamaño o si puede tener barras de desplazamiento.
32. Instituto de Formación Profesional Curso de diseño Web 35
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
Sintaxis:
<FRAME
BORDERCOLOR="color"
FRAMEBORDER="YES"|"NO"
MARGINHEIGHT="marginHeight"
MARGINWIDTH="marginWidth"
NAME="frameName"
NORESIZE
SCROLLING="YES"|"NO"|"AUTO"
SRC="URL" > //Esta propiedad es imprescindible
BORDERCOLOR="color"
Especifica el color del borde de la Frame. Como cada Frame puede tener su color de borde
es el navegador el que resuelve cualquier conflicto que se plantee.
FRAMEBORDER
Determina si la Frame tiene o no bordes visibles. Los valores posibles son YES o NO.
Cuando la propiedad FRAMEBORDER aparece en un marcador FRAMESET afecta a
todos los Frames que pertenencen a ese FRAMESET. Si algún Frame en concreto dentro
del FRAMESET tiene especificada una propiedad FRAMEBORDER, su valor sobreescribe
el del FRAMESET. Un borde compartido por varias Frames solo es invisible si todas las
Frames que lo comparten tienen puesto la propiedad FRAMEBORDER a NO. Si no se
especifica nada ni en Frame ni en FRAMESET el valor por defecto es que las Frames
tengan bordes.
MARGINHEIGHT="marginHeight"
Especifica la distancia de los márgenes superior e inferior, en pixels, a los contenidos de la
Frame.
MARGINWIDTH="marginWidth"
Especifica la distancia de los márgenes izquierdo y derecho, en pixels, a los contenidos de
la Frame.
33. Instituto de Formación Profesional Curso de diseño Web 36
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
NAME="frameName"
Especifica el nombre de la Frame. Esta propiedad es importante en cuanto a carga de
contenidos de una Frame a otra. Se explica a continuación en el punto A
NORESIZE
Especifica que el usuario no puede cambiar el tamaño de la Frame. Con que solo una de las
Frames que comparten un determinado borde tenga especificada esta propiedad, ese borde
ya no se podrá mover y por tanto todas ellas tendrán un tamaño invariable.
SCROLLING
Indica si van a estar disponibles las barras de desplazamiento en la Frame. Los valores
posibles son: YES, NO y AUTO que indica que el navegador determina cuando hace falta y
cuando no visualizar las barras de desplazamiento dependiendo de las medidas de los
contenidos de la página que hay que visualizar. El valor AUTO es el valor por defecto.
SRC="URL"
Especifica el URL del documento que se va a visualizar en ese Frame. El URL no puede ser
el de un ancla dentro de un documento. Si no se especifica un URL la Frame se visualizará
vacía.
3.2.2. Frameset
El marcador FRAMESET organiza un conjunto de Frames que aparecen juntas en la
ventana de un navegador. Un FRAMESET contiene normalmente más de una Frame y, a su
vez, contiene una página web cargando un fichero *.html.
Este marcador sirve para definir la estructura de la página que tiene las Frames por lo que
va a ser el único contenido de esa página web. Además este documento HTML no va a
contener parte BODY, solo tendra marcadores HTML y HEAD junto con los FRAMESET
y FRAME.
Un marcador FRAMESET sirve para especificar la organización de las Frames en filas o en
columnas pero no en las dos a la vez. Si se quiere desarrollar una página que mezcle filas y
columnas hay que anidar marcadores FRAMESET de forma que primero se divida en filas
y después en columnas o viceversa, sin limitación en el número de cualquiera de ellas.
Se puede especificar la anchura del borde dentro del primer FRAMESET para que afecte a
todas las Frames. Este valor, así como el color del borde pueden ser sobreescritos si se
definen estas propiedades en los marcadores FRAME internos al FRAMESET.
34. Instituto de Formación Profesional Curso de diseño Web 37
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
Sintaxis:
<FRAMESET
COLS="columnWidthList"
ROWS="rowHeightList"
BORDER="pixWidth"
BORDERCOLOR="color"
FRAMEBORDER="YES"|"NO">
...
</FRAMESET>
Una de las dos propiedades, filas o columnas, tiene que ser definida en cada marcador
FRAMESET.
COLS="columnWidthList"
Contiene una lista de valores, separada por comas, con la anchura de cada Frame. Si se
sustituye uno de los valores por un asterisco, el navegador le asigna a esa Frame la anchura
restante. Si no se hace así el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible. Los valores pueden ser cubiertos de la forma:
Ancho en Pixels
Ancho en porcentaje de la ventana padre.
Asterisco que quiere decir tanto como sea posible. Si se especifica el espacio de varias
columnas con asterisco, se reparte en partes iguales a cada columna el espacio que sobre de
las columnas que tienen indicación numérica.
ROWS="rowHeightList"
Contiene una lista de valores, separada por comas, con la altura de cada Frame. Si se
sustituye uno de los valores por un asterisco, el navegador le asigna a esa Frame la altura
restante. Si no se hace así el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible. Los valores pueden ser cubiertos de la forma:
Alto en Pixels
Alto en porcentaje de la ventana padre.
Asterisco que quiere decir tanto como sea posible. Si se especifica el espacio de varias filas
con asterisco, se reparte en partes iguales a cada fila el espacio que sobre de las filas que
tienen indicación numérica.
35. Instituto de Formación Profesional Curso de diseño Web 38
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
BORDER="pixWidth"
Especifica la anchura del borde, en pixels, de todas las Frames. Solo se puede utilizar en el
marcador FRAMESET más exterior. Un valor de 0 indica que no tendrán borde. Si no está
presente la propiedad de BORDER el valor por defecto es 5.
BORDERCOLOR="color"
Especifica el color de los bordes de las Frames del FRAMESET. Debido a que los bordes
están compartidos por varias Frames que los rodean, los navegadores utilizan unas reglas de
prioridad para resolver los conflictos en las asignaciones de esta propiedad en distintas
Frames y FRAMESET. La menor prioridad es lo que se especifica en el primer
FRAMESET (el más exterior), tiene más prioridad lo que se especifica en los FRAMESET
más interiores y, por último, la mayor prioridad la tiene lo que se especifica en el marcador
FRAME. Si existe un conflicto entre dos especificaciones de la misma prioridad el
resultado dependerá del tipo y versión que se esté utilizando.
FRAMEBORDER
Determina si se va a ver o no el borde de la Frame. Los valores posibles son YES o NO.
Esta propiedad se aplica a todos las Frames del FRAMESET. Si esta propiedad se
especifica dentro de un marcador FRAME se aplica solo a esa Frame en particular sin hacer
caso de lo que se diga en el marcador FRAMESET. Solo se quita el borde si todas las
Frames que lo rodean tienenla propiedad FRAMEBORDER a NO. Si esta propiedad no se
especifica en ningún marcador FRAME ni FRAMESET el valor por defecto es YES.
3.2.3. A
El comportamiento normal de un enlace consiste en que cuando se hace en el un click con
el ratón, a continuación se carga, en esa ventana, la página del URL en el marcador A.
Si tenemos varias Frames en la ventana del navegador y utilizamos el marcador A como
hasta ahora, cuando se haga click en un enlace de una Frame el URL se cargará en esa
misma Frame.
Para conseguir que cambie el contenido de una Frame al hacer click en otra hay que
combinar la propiedad TARGET en el marcador A con la propiedad NAME del marcador
36. Instituto de Formación Profesional Curso de diseño Web 39
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
FRAME.
La Frame que se quiera que sea objetivo, es decir en la que se va a cargar una página, tiene
que tener un nombre. Por lo tanto en la definición de ese Frame hay que especificr un
nombre con NAME=”frame-destino”. Sabiendo ya el nombre de la Frame, para que se
carge una página en ella, en un enlace de otra página hay que poner la propiedad TARGET
a ese nombre. Por ejemplo:
<A TARGET=”frame-destino” URL=http://uno.udc.es/una.html> .... </A>
La propiedad TARGET también puede tomar los valores:
_blank que carga la página en una nueva ventana del navegador
_self carga la página en la misma ventana donde está el enlace
_parent carga la página en el FRAMESET justo por encima del actual, esto quiere decir que
si hay una página con frames pasaría a haber en la misma ventana solo la página nueva sin
frames.
_top carga la página en la ventana completa obviando toda la jerarquía de Frames y
Frameset.
Para no especificar continuamente propiedades TARGET en todos los enlaces, se puede
definir un marcador BASE para la propiedad TARGET. Si se especifica:
<BASE TARGET=”una-frame”>
Todos los marcadores A tomarán por defecto el TARGET a la frame “una-frame” y solo
habría que especificar la propiedad TARGET para los enlaces que no apunten a esa Frame.
3.2.4. Navegadores que no soportan frames
No todos los navegadores soportan Frames. Las versiones antiguas de Netscape y Explorer
no las soportan, ni tampoco los navegadores de modo texto como Lynx. Por este motivo es
conveniente mantener una cierta información en la página que puedan leer estos
navegadores, aunque solo sea para indicar que es necesaria cierta versión del navegador
para visualizar correctamente una página.
Para conseguir esto, a continuación de la sección de FRAMESET’s hay que situar un
marcador denominado <NOFRAMES>. El código HTML que se escriba después de este
marcador será visualizado por los navegadores que no soporten Frames y no será
visualizado por los que si que las soporten.
37. Instituto de Formación Profesional Curso de diseño Web 40
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
3.3. Formularios
3.3.1. Form
El marcador FORM sirve para definir un formulario de entrada de datos. Estos formularios
incluyen un amplio grupo de controles como campos de texto, cajas de opciones (check box
y radio buttons) y listas de selección. Todos estos elementos se definen entre los
marcadores <FORM> y </FORM> mediante los marcadores INPUT, SELECT y
TEXTAREA que se verán a continuación. Además de los controles propios del formulario,
dentro de el pueden ir marcadores para imágenes, tablas, etc. Hay que tener en cuenta que
los formularios no se pueden anidar y, por tanto, hay que terminar uno antes de empezar el
siguiente.
Una vez que se visualiza el formulario, el usuario puede rellenar campos, escoger opciones
y, por último, enviar el formulario haciendo click en el botón Submit. Este botón se define
con el marcador <INPUT TYPE="SUBMIT"> que se comentará más adelante. La
información sobre que se debe hacer para enviar el formulario y adonde se define en la
propiedad ACTION del marcador TAG. El valor de esta propiedad es, normalmente, un
URL que apunta a un programa CGI que reside en un servidor de Web. Este programa los
formularios y genera una salida a fichero, a una página web o a una base de datos. Los
datos que le llegan al CGI son una serie de pares Nombre de campo/Valor cubierto por el
usuario.
Sintaxis:
<FORM
ACTION="serverURL"
ENCTYPE="encodingType"
METHOD="GET"|"POST"
NAME="formName"
TARGET="windowName">
...
</FORM>
ACTION="serverURL"
Especifica el URL del programa que va a procesar el formulario. También se puede utilizar
el tipo de URL mailto: con una dirección de E-mail para enviar el formulario por correo
electrónico.
38. Instituto de Formación Profesional Curso de diseño Web 41
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
ENCTYPE="encodingType"
Especifica el tipo de codificación MIME con que el formulario va a ser enviado:
“application/x-www-form-urlencoded” es la codificación por defecto.
“multipart/form-data” se utiliza si el formulario contiene un fichero.
“text/plain” es la codificación más simple y la idónea si se va a enviar a una
dirección de correo.
METHOD
Especifica como se va a enviar el formulario al programa que recibe la información. Hay
dos opciones:
GET: es la opción por defecto, sirve para enviar la información hacia un URL.
POST: envía la información en un contenedor para datos y es la opción para enviar el
formulario por correo electrónico.
NAME="formName"
Especifica el nombre del formulario. El nombre no se visualiza en la página pero es
necesario si hay que referenciar varios formularios en la misma página.
3.3.2. Input
Es uno de los marcadores que permiten la entrada de datos del usuario dentro del
formulario. El parámetro TYPE indica que tipo de elemento de entrada se va a visualizar.
El valor del parámetro TYPE tiene que ser uno de los siguientes:
BUTTON: visualiza un botón en el formulario.
Name: nombre del botón.
Value: Texto que se visualiza en el botón.
CHECKBOX: visualiza un control que puede ser puesto ha seleccionado/no seleccionado.
Checked: indica que inicialmente el Checkbox está marcado.
Name: nombre del Checkbox.
Value: es el valor que se envía al servidor si el Checkbox está marcado.
El valor por defecto es ON.
FILE: visualiza un control de texto en el que le usuario puede especificar el nombre de un
fichero. Al enviarse el formulario, el contenido del fichero se envía con el.
Name: nombre del control.
Value: valor inicial del contenido del control.
39. Instituto de Formación Profesional Curso de diseño Web 42
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
HIDDEN: sirve para especificar un campo de texto no visible para el usuario y que pueda
ser enviado cuando se manda el formulario.
Name: nombre del control.
Value: valor inicial del contenido del control.
IMAGE: visualiza una imagen que sirve como alternativa al botón de envío del formulario.
Cuando se pulsa en la imagen se envía el formulario.
Align: alineación de la imagen con respecto al texto (como en IMG)
Name: nombre del control.
SRC: URL de la imagen.
PASSWORD: visualiza un campo de texto, que al escribir en el, no visualiza los caracteres
que se escriben sino solo símbolos * que hacen imposible saber lo que se escribe en el
teclado mirando la pantalla.
Maxlength: máximo número de caracteres que acepta el campo
Name: nombre del control.
Size: tamaño del control
Value: el valor inicial del campo
RADIO: visualiza un control de selecciones exclusivas de forma que al agrupar varios solo
uno puede estar seleccionados a la vez.
Checked: indica que inicialmente está marcado.
Name: nombre del control.
Value: es el valor que se envía al servidor si el control está marcado.
El valor por defecto es ON.
RESET: visualiza un botón que al pulsarlo vacía todos los campos del formulario. Si
alguno de los campos tiene valor por defecto lo restaura a ese valor.
Name: nombre del botón.
Value: Texto que se visualiza en el botón.
SUBMIT: visualiza el botón que, al pulsar en el, envía el formulario.
Name: nombre del botón.
Value: Texto que se visualiza en el botón.
TEXT: visualiza un control con una única línea de texto para que el usuario escriba.
Maxlength: máximo número de caracteres que acepta el campo
Name: nombre del control.
Size: tamaño del control
Value: el valor inicial del campo
40. Instituto de Formación Profesional Curso de diseño Web 43
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
3.3.3. Select
El marcador SELECT sirve para definir una lista en la que el usuario puede seleccionar una
o varias opciones dependiendo de la propiedad MULTIPLE.
La propiedad SIZE especifica cuantas de las opciones se visualizarán a la vez. Para listas
con selección de múltiples opciones el navegador visualiza por defecto el mayor número
posible con barras de desplazamiento si es necesario. Sin embargo para listas de selección
única se visualiza un control desplegable. Al enviar el formulario, las listas se traducen a
pares nombre de control/valor que es lo que llega al servidor.
Sintaxis:
<SELECT
NAME="selectName"
MULTIPLE
SIZE="listLength">
<OPTION...>
...
<OPTION ...>
</SELECT>
MULTIPLE
Especifica que la lista es de selección múltiple. Si omite esta propiedad la lista se considera
de selección única.
NAME="selectName"
Especifica el nombre del control.
SIZE="ListLength"
Especifica el número de opciones que se pueden ver a la vez. Si la lista contiene más
opciones que el valor de esta propiedad, se visualiza automáticamente una barra de
desplazamiento.
3.3.4. Option
El marcador OPTION especifica una opción en una lista de selección. Cuando se envía el
formulario al servidor, de cada una de las opciones marcadas de la lista se mandan una
pareja: nombre del control/valor.
41. Instituto de Formación Profesional Curso de diseño Web 44
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
Sintaxis:
<OPTION
VALUE="optionValue"
SELECTED>
...
</OPTION>
VALUE="OptionValue"
Especifica el valor que se envía al servidor cuando se selecciona esta opción. Si no se
especifica esta opción se envía el texto de la opción.
SELECTED
Especifica la opción que está marcada por defecto en la lista.
3.3.5. TextArea
El marcador TEXTAREA define un campo de entrada de texto de múltiples líneas. Se
puede definir el número de caracteres por línea y de líneas del control para definir el
tamaño en el que no hará falta visualizar las barras de desplazamiento. Si se supera este
tamaño con el texto las barras aparecen automáticamente.
Sintaxis:
<TEXTAREA
COLS="columns"
NAME="name"
ROWS="rows"
WRAP="OFF"|"HARD"|"SOFT">
textToDisplay
</TEXTAREA>
COLS="columns"
Define la anchura del control en caracteres.
NAME="name"
Especifica el nombre del área de texto.
42. Instituto de Formación Profesional Curso de diseño Web 45
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
ROWS="rows"
Define el número inicial de filas
WRAP
Define si las palabras que superan el ancho del control pasan a la línea siguiente o
continúan y se visualiza una barra de desplazamiento. Los valores que puede tomar esta
variable son:
OFF: desactiva esta opción. El texto que escribe el usuario se pone en la misma línea hasta
que el usuario pulsa Enter. El cambio de línea se graba con el texto y si el usuario quiere
ver el texto que supera el borde tiene que utilizar las barras de desplazamiento.
HARD: ajusta automáticamente el texto a la anchura del control. Cuando se envía el
formulario se envían los cambios de línea necesarios.
SOFT: igual que el anterior pero no envía los cambios de línea.
3.4. Columnas
El marcador MULTICOLUM establece una zona del documento en la que el texto se
organiza en varias columnas.
Sintaxis:
<MULTICOL
COLS="columns" (este atributo es obligatorio)
GUTTER="gutterWidth"
WIDTH="colWidth">
...
</MULTICOL>
COLS="columns"
Especifica el número de columnas de texto a visualizar. El navegador distribuye el texto
entre las distintas columnas para que tengan una altura similar. A menos que se especifique
el atributo WIDTH, la anchura de cada columna se ajusta para ocupar el ancho de la página.
43. Instituto de Formación Profesional Curso de diseño Web 46
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
GUTTER="gutterWidth"
Especifica la distancia entre columnas en pixels. El valor por defecto de este atributo es 10.
WIDTH="colWidth"
Especifica la anchura de cada columna en pixels. Todas las columnas van a tener la misma
anchura.
3.5. Mul timedia y applets
3.5.1. Sonido
Netscape Navigator incluye soporte para ficheros de sonido de varios formatos, como
AIFF, AU, MIDI y WAV, que van insertados en las páginas HTML mediante la tecnología
LiveAudio. Para trabajar con estos ficheros, en la página se carga una consola que permite
la reproducción del fichero de audio, así como variar el volumen. Dependiendo del número
de controles de la consola existen 6 opciones:
1.Console – botones de Play, Pause, Stop y control de volumen.
2.SmallConsole – botones de Play, Stop y control de volumen (en este tipo de consola
el sonido empezará a sonar en cuanto se acabe de cargar el fichero - autostart). En esta
opción los botones serán más pequeños.
3.PlayButton – un solo botón para iniciar la reproducción del fichero.
4.PauseButton – un solo botón que sirve para hacer una pausa.
5.StopButton – un solo botón que finaliza la reproducción y descarga el fichero.
6.VolumeLever – un solo control para seleccionar el volumen.
44. Instituto de Formación Profesional Curso de diseño Web 47
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
Sintaxis:
<EMBED SRC= [URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE|INTEGER]
STARTTIME=[MINUTES:SECONDS]
ENDTIME=[MINUTES|SECONDS]
VOLUME=[0-100]
WIDTH=[# PIXELS]
HEIGHT=[# PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
HIDDEN=[TRUE]
MASTERSOUND
NAME=[name]...>
SRC=[URL] – El URL del fichero de sonido
AUTOSTART=[TRUE|FALSE] – El fichero de sonido empieza a sonar tan pronto se acaba
de cargar. El valor por defecto es FALSE.
LOOP=[TRUE|FALSE|INTEGER] – Si el valor es TRUE el fichero se hacer sonar
continuamente hasta que el usuario pulsa el botón de STOP en la consola o cambia de
página web. Si se especifica un INTEGER, el sonido se reproduce el número de veces que
se especifica en ese valor.
STARTTIME=[MINUTES:SECONDS] – indica el tiempo que va a tardar en reproducirse
el fichero de audio desde que acaba de cargarse. Si se quiere que empiece después de 30
segundos, hay que poner el valor a 00:30.
ENDTIME=[MINUTES:SECONDS] – indica el tiempo que tardará en parar
automáticamente el sonido. Si se quiere que pare después de 1.5 minutos, hay que poner el
valor a 01:30.
45. Instituto de Formación Profesional Curso de diseño Web 48
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
VOLUME=[0-100] – El valor se da en porcentaje. Este atributo se aplica al sonido del
fichero especificado en el URL, a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema. El valor por
defecto es el valor actual del sonido del sistema.
WIDTH=[# PIXELS] – Especifica la anchura de la consola. Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144. Para el tipo VOLUMELEVER el valor es
74 y para un solo botón es 37.
HEIGHT=[# PIXELS] – Especifica la altura de la consola. Para los tipos CONSOLE el
valor por defecto es 60, para SMALLCONSOLE es 15. Para el tipo VOLUMELEVER el
valor es 20 y para un solo botón es 22.
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas. Es
similar al atributo del marcador IMG.
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener. El valor por defecto es consola.
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE. Si se
especifica no se visualizará el control y el sonido empezará a sonar como una música de
fondo de la página.
MASTERSOUND – Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME. Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido.
NAME=[name] – establece un único nombre para un grupo de consolas que manejan el
mismo fichero de sonido. Por ejemplo se pueden tener dos consolas independientes, uno
con un botón PLAY y otra con un botón STOP, para manejar el mismo fichero. Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND. Esta será la que realmente
almacene el fichero de audio.
También se puede tener un control que maneje el volumen de múltiples consolas. Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME.
46. Instituto de Formación Profesional Curso de diseño Web 49
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
3.5.2. Vídeo
El navegador Netscape permite ver directamente vídeos en formato AVI incrustados en las
páginas web sin necesidad de ningún software o plug-in adicional. Brevemente, pulsando
con el ratón izquierdo en el vídeo se puede detener y reanudar la visualización. Si se pulsa
con el derecho, se despliega un completo menú que permite las opciones habituales de un
videoreproductor. Es decir, funciones: hacia delante, hacia atrás, pausa, avance y retroceso
rápido, cuadros, principio y fin.
Sintaxis:
<EMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[# PIXELS]
HEIGHT=[# PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]...>
SRC=[URL] – El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] – El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar. El valor por defecto es FALSE.
LOOP=[TRUE|FALSE] – Si el valor es TRUE el fichero reproduce continuamente el vídeo
hasta que el usuario pulsa con el ratón en el vídeo o cambia de página web. El valor por
defecto es FALSE.
WIDTH=[# PIXELS] – Especifica la anchura del vídeo.
HEIGHT=[# PIXELS] – Especifica la altura del vídeo. Las medidas estándar para los
vídeos son 90x120, 120x160, 180x240 y 240x320 todos ellos usando el ratio 4:3.
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] – funciona igual que en el caso de las consolas de sonido.
47. Instituto de Formación Profesional Curso de diseño Web 50
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
3.5.3. QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso está muy extendido en Internet debido a su versatilidad. Un fichero QuickTime puede
incluir vídeo, sonido, música y texto. Una de las últimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual. QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva. El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros.
Sintaxis:
<EMBED SRC=[URL]
WIDTH=[# PIXELS]
HEIGHT=[# PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDEN...>
48. Instituto de Formación Profesional Curso de diseño Web 51
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
SRC=[URL] – El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un parámetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero. Este parámetro es
aceptado solo por el Netscape Navigator. El navegador, cuando carga la página, si no
encuentra el plug-in necesario para visualizar el fichero, avisa al usuario y le permite
conectar con el sitio especificado en el URL, desde donde se puede descargarse ese plug-in.
En el caso de un fichero QuickTime la dirección recomendada es
http://quicktime.apple.com
WIDTH=[# PIXELS] – Especifica la anchura del documento de vídeo en pixels. Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado más
abajo). No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador. En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (player.exe o player32.exe)
y conseguir el valor exacto en la opción Get Info del menú Movie. Si se indica un valor
menor que la anchura del vídeo, éste se recorta a la anchura especificada. Si el valor es
mayor, el vídeo se centra en el ancho indicado.
HEIGHT=[# PIXELS] – Indica la altura del documento de vídeo en pixels. Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el vídeo hay que añadir 24
pixels a la altura del vídeo. Como en el caso de la anchura, no es conveniente indicar un
valor inferior a dos, se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas.
HIDDEN – Es un parámetro opcional que no lleva valores asociados. Si está presente el
vídeo será invisible en la página. Se puede utilizar, por ejemplo, para esconder el control en
un fichero QuickTime que solo contenga audio. Este parámetro no es válido para ficheros
QuickTime VR y Panoramas.
AUTOPLAY=[TRUE|FALSE] – El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales. El valor por
defecto es FALSE. Este parámetro no es válido para ficheros QuickTime VR y Panoramas.
CONTROLLER=[TRUE|FALSE] – Indica si la consola de control de vídeo es o no visible.
El valor por defecto es TRUE. Este parámetro no es válido para ficheros QuickTime VR y
Panoramas.
49. Instituto de Formación Profesional Curso de diseño Web 52
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] – Cuando toma el valor TRUE la reproducción
del vídeo entra en un bucle sin fin. Si toma el valor PALINDROME el vídeo se reproduce
alternativamente hacia delante y hacia atrás. El valor por defecto es FALSE. Este parámetro
no es válido para ficheros QuickTime VR y Panoramas.
PLAYEVERYFRAME=[TRUE|FALSE] – Si se especifica este parámetro a TRUE, se
mostrarán en pantalla todas las frames del vídeo, incluso aunque se tenga que reproducir a
una velocidad inferior a la normal. El valor por defecto es FALSE. Este parámetro no es
válido para ficheros QuickTime VR y Panoramas. Si se utiliza con vídeo que contenga
audio, el sonido puede ser desabilitado por el navegador.
HREF=[URL] – Convierte el control QuickTime en un enlace al URL especificado, al que
se puede llegar al pulsar con el ratón en el control. Este parámetro no es válido para
ficheros QuickTime VR y Panoramas.
TARGET=[FRAME] – Funciona igual que en el marcador A y trabaja en combinación con
la propiedad HREF. Este parámetro es válido solo para ficheros QuickTime.
PAN=[FIXED NUMBER] – Permite indicar el ángulo horizontal inicial, en grados, para la
visualización de un fichero QuickTime VR. El rango de valores que puede tomar va de 0.0
a 360.0 grados. Este parámetro no tiene significado para un vídeo QuickTime estándar.
TILT=[FIXED NUMBER] – Permite indicar el ángulo vertical inicial, en grados, para la
visualización de un fichero QuickTime VR. El rango de valores que puede tomar va de –
42.5 a 42.5 grados. Este parámetro no tiene significado para un vídeo QuickTime estándar.
FOV=[FIXED NUMBER] – Permite indicar el ángulo inicial del campo de visión, en
grados, para la visualización de un fichero QuickTime VR. El rango de valores que puede
tomar va de 5.0 a 85.0 grados. Este parámetro no tiene significado para un vídeo
QuickTime estándar.
NODE=[INTEGER] – Permite especificar un nodo inicial para un vídeo QuickTime VR
multinodo. Este parámetro no tiene significado para un vídeo QuickTime estándar.
CORRECTION=[NONE|PARTIAL|FULL] – Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas.
50. Instituto de Formación Profesional Curso de diseño Web 53
cybertronic-cursoweb.blogspot.com - Telef. 504622 – 0973 550896
3.5.4. Modelos 3D
Mediante la tecnología Live3D ya es posible navegar a través de espacios virtuales en
Internet. Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen, además de la descripción del mundo virtual por el que navegamos, texto,
imágenes, animaciones, sonidos, música e incluso vídeo.
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde está el
fichero VRML dentro de un marcador EMBED.
Sintaxis:
<EMBED SRC=[URL] ...>
DIRECCIÓN Y CONSULTAS Prof. LIC. Juan Areco .
REDACCION Prof. LIC. Juan Areco
E_Mail Cybertronic.cde@gmail.com Direccion en Internet http://www.secretariadocde.blogspot.com
Bibliografía:
Weil, Pierre G. “Relaciones Humanas en el Trabajo y en la Familia”. Editorial Kapelusz.
Chiavento, Idalberto “Administración de Recursos Humanos”. Mc Graw –Hill
Pueyo, Antonio andres. “ Manual de Psicología Diferencial”. Mc Graw –Hill España 1997.
Dorsch, Friedrich. “ Diccionario de Psicologia” Editorial Herder. Barcelona 1994.-
Galliano, Luciano. “ Diccionario de Psiquiatria”. Siglo Veintiuno Ediciones México 1995.-
Davidoff, Linda L. “ Introduccion a la Psicologia”. Tercera Edición Mc Graw –Hill México 1997.-
Año 2015 - Material didáctico de CYBERTRONIC.
Departamento de Enseñanza de Informática, registro número OKO 1022195. CYBERTRONIC ®
Queda prohibida la reproducción total o parcial .