SlideShare una empresa de Scribd logo
1 de 50
Descargar para leer sin conexión
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 

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
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. ; )
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
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.
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.
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.
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
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>
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>
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.
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">
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
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>
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>
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
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.
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.
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
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).
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.
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.
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
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 #.
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>
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.
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.
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.
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.
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>
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.
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.
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.
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.
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
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.
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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...>
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.
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.
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 .

Más contenido relacionado

La actualidad más candente

Manual de html y flash mx
Manual de html y flash mxManual de html y flash mx
Manual de html y flash mxMonica Castillo
 
Www.tutorialesiuty.comlu.com
Www.tutorialesiuty.comlu.comWww.tutorialesiuty.comlu.com
Www.tutorialesiuty.comlu.comDarvin Farfan
 
Trabajo 3
Trabajo 3Trabajo 3
Trabajo 3ARANAK
 
Internet y navegadores
Internet y navegadoresInternet y navegadores
Internet y navegadoresLeyner
 
Presentación1 yassin
Presentación1 yassinPresentación1 yassin
Presentación1 yassinderssa40
 
Trabajo De Web 2
Trabajo De Web 2Trabajo De Web 2
Trabajo De Web 2victoria
 
Acceso terminal server
Acceso terminal serverAcceso terminal server
Acceso terminal serverAbel1982
 
Web 2.0 1 A Preescolar Tic en la educación (Iris Rodriguéz)
Web 2.0  1 A Preescolar Tic en la educación (Iris Rodriguéz)Web 2.0  1 A Preescolar Tic en la educación (Iris Rodriguéz)
Web 2.0 1 A Preescolar Tic en la educación (Iris Rodriguéz)Iris Rodriguǝz
 
Taller de recuperacion de informatica
Taller de recuperacion de informaticaTaller de recuperacion de informatica
Taller de recuperacion de informaticaTeddy Moreno
 
Ejercicios tema 3 , del olmo , marian
Ejercicios tema 3 , del olmo , marianEjercicios tema 3 , del olmo , marian
Ejercicios tema 3 , del olmo , marianMarian Del Olmo Ortiz
 

La actualidad más candente (16)

Manual de html y flash mx
Manual de html y flash mxManual de html y flash mx
Manual de html y flash mx
 
Www.tutorialesiuty.comlu.com
Www.tutorialesiuty.comlu.comWww.tutorialesiuty.comlu.com
Www.tutorialesiuty.comlu.com
 
Curso Cms 03
Curso Cms 03Curso Cms 03
Curso Cms 03
 
Manipulacion de datos
Manipulacion de datosManipulacion de datos
Manipulacion de datos
 
Delicious + Slideshare
Delicious + SlideshareDelicious + Slideshare
Delicious + Slideshare
 
Trabajo 3
Trabajo 3Trabajo 3
Trabajo 3
 
Internet y navegadores
Internet y navegadoresInternet y navegadores
Internet y navegadores
 
Presentación1 yassin
Presentación1 yassinPresentación1 yassin
Presentación1 yassin
 
Trabajo De Web 2
Trabajo De Web 2Trabajo De Web 2
Trabajo De Web 2
 
Acceso terminal server
Acceso terminal serverAcceso terminal server
Acceso terminal server
 
Web 2.0 1 A Preescolar Tic en la educación (Iris Rodriguéz)
Web 2.0  1 A Preescolar Tic en la educación (Iris Rodriguéz)Web 2.0  1 A Preescolar Tic en la educación (Iris Rodriguéz)
Web 2.0 1 A Preescolar Tic en la educación (Iris Rodriguéz)
 
00 html
00 html00 html
00 html
 
Taller de recuperacion de informatica
Taller de recuperacion de informaticaTaller de recuperacion de informatica
Taller de recuperacion de informatica
 
01 html
01 html01 html
01 html
 
Ejercicios tema 3 , del olmo , marian
Ejercicios tema 3 , del olmo , marianEjercicios tema 3 , del olmo , marian
Ejercicios tema 3 , del olmo , marian
 
Investigacion
InvestigacionInvestigacion
Investigacion
 

Destacado

Cybertronic Introducción a la Programación
Cybertronic Introducción a la Programación Cybertronic Introducción a la Programación
Cybertronic Introducción a la Programación Cybertronic Instituto
 
Cuaderno actividades excel v2.30.07.04
Cuaderno actividades excel v2.30.07.04Cuaderno actividades excel v2.30.07.04
Cuaderno actividades excel v2.30.07.04Cybertronic Instituto
 
Cuaderno de prácticas de excel
Cuaderno de prácticas de excelCuaderno de prácticas de excel
Cuaderno de prácticas de excelRurus9
 
Guía de uso de Windows Movie Maker
Guía de uso de Windows Movie MakerGuía de uso de Windows Movie Maker
Guía de uso de Windows Movie MakerVíctor Barbero
 
Tutorial de Excel 2007 para niños de primaria
Tutorial de Excel 2007 para niños de primariaTutorial de Excel 2007 para niños de primaria
Tutorial de Excel 2007 para niños de primariaplay_and_learn
 
Guía de excel para niños de 3 grado
Guía  de excel   para niños de  3 gradoGuía  de excel   para niños de  3 grado
Guía de excel para niños de 3 gradoTaty Guancha
 
Ejercicios Excel Básico
Ejercicios Excel BásicoEjercicios Excel Básico
Ejercicios Excel BásicoPatricia Ferrer
 

Destacado (13)

Cybertronic Introducción a la Programación
Cybertronic Introducción a la Programación Cybertronic Introducción a la Programación
Cybertronic Introducción a la Programación
 
Tareas para la casa
Tareas para la casa Tareas para la casa
Tareas para la casa
 
Cuaderno actividades excel v2.30.07.04
Cuaderno actividades excel v2.30.07.04Cuaderno actividades excel v2.30.07.04
Cuaderno actividades excel v2.30.07.04
 
Tutorial practica movie maker
Tutorial practica movie makerTutorial practica movie maker
Tutorial practica movie maker
 
Practicas de excel
Practicas de excel Practicas de excel
Practicas de excel
 
Cuaderno de prácticas de excel
Cuaderno de prácticas de excelCuaderno de prácticas de excel
Cuaderno de prácticas de excel
 
Hoja de calculo excel
Hoja de calculo excelHoja de calculo excel
Hoja de calculo excel
 
Guía de uso de Windows Movie Maker
Guía de uso de Windows Movie MakerGuía de uso de Windows Movie Maker
Guía de uso de Windows Movie Maker
 
Ejercicios paso a paso
Ejercicios paso a pasoEjercicios paso a paso
Ejercicios paso a paso
 
Tutorial de Excel 2007 para niños de primaria
Tutorial de Excel 2007 para niños de primariaTutorial de Excel 2007 para niños de primaria
Tutorial de Excel 2007 para niños de primaria
 
GUÍA DE APRENDIZAJE - EXCEL BÁSICO
GUÍA DE APRENDIZAJE - EXCEL BÁSICOGUÍA DE APRENDIZAJE - EXCEL BÁSICO
GUÍA DE APRENDIZAJE - EXCEL BÁSICO
 
Guía de excel para niños de 3 grado
Guía  de excel   para niños de  3 gradoGuía  de excel   para niños de  3 grado
Guía de excel para niños de 3 grado
 
Ejercicios Excel Básico
Ejercicios Excel BásicoEjercicios Excel Básico
Ejercicios Excel Básico
 

Similar a Curso de Diseño WEB

Similar a Curso de Diseño WEB (20)

Ale
AleAle
Ale
 
Explorer Internet
Explorer InternetExplorer Internet
Explorer Internet
 
Internet Explorer
Internet ExplorerInternet Explorer
Internet Explorer
 
Historia Del Internet
Historia Del InternetHistoria Del Internet
Historia Del Internet
 
Historia Del Internet
Historia Del InternetHistoria Del Internet
Historia Del Internet
 
Historia Del Internet 6
Historia Del Internet 6Historia Del Internet 6
Historia Del Internet 6
 
Manual HTML y Flash
Manual HTML y FlashManual HTML y Flash
Manual HTML y Flash
 
Html francisco hurtado
Html francisco hurtadoHtml francisco hurtado
Html francisco hurtado
 
Html 5 Guia Didactica
Html 5 Guia DidacticaHtml 5 Guia Didactica
Html 5 Guia Didactica
 
proyecto final de redes
proyecto final de redesproyecto final de redes
proyecto final de redes
 
Internet
InternetInternet
Internet
 
TALLER EVALUACION
TALLER EVALUACIONTALLER EVALUACION
TALLER EVALUACION
 
El Internet y la Tecnología Web
El Internet y la Tecnología WebEl Internet y la Tecnología Web
El Internet y la Tecnología Web
 
Evolucion de la internet
Evolucion de la internetEvolucion de la internet
Evolucion de la internet
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 
Trabajo D La Xilanga 47 Jejeje
Trabajo D La Xilanga 47 JejejeTrabajo D La Xilanga 47 Jejeje
Trabajo D La Xilanga 47 Jejeje
 
Tarea 9
Tarea 9Tarea 9
Tarea 9
 
Tp n de internet
Tp n de internetTp n de internet
Tp n de internet
 
Trabajo Practico de Internet
Trabajo Practico de InternetTrabajo Practico de Internet
Trabajo Practico de Internet
 

Más de Cybertronic Instituto

Buena atencion al publico cybertronic
Buena atencion al publico cybertronicBuena atencion al publico cybertronic
Buena atencion al publico cybertronicCybertronic Instituto
 
Secretariado Ejecutivo Modulo Relaciones Humanas
Secretariado Ejecutivo Modulo Relaciones HumanasSecretariado Ejecutivo Modulo Relaciones Humanas
Secretariado Ejecutivo Modulo Relaciones HumanasCybertronic Instituto
 
Curso de Secretariado Ejecutivo Cybertronic Instituto
Curso de Secretariado Ejecutivo Cybertronic InstitutoCurso de Secretariado Ejecutivo Cybertronic Instituto
Curso de Secretariado Ejecutivo Cybertronic InstitutoCybertronic Instituto
 
Cronograma segunda clase de robotica
Cronograma segunda clase de roboticaCronograma segunda clase de robotica
Cronograma segunda clase de roboticaCybertronic Instituto
 
Primera clase de robotica - Prof. Sergio Sanchez
Primera clase de robotica - Prof. Sergio SanchezPrimera clase de robotica - Prof. Sergio Sanchez
Primera clase de robotica - Prof. Sergio SanchezCybertronic Instituto
 
Guia de Usuario lego mindstorms ev3
Guia de Usuario lego mindstorms ev3 Guia de Usuario lego mindstorms ev3
Guia de Usuario lego mindstorms ev3 Cybertronic Instituto
 

Más de Cybertronic Instituto (20)

Cuaderno actividades word 2020
Cuaderno actividades word 2020Cuaderno actividades word 2020
Cuaderno actividades word 2020
 
Robótica
RobóticaRobótica
Robótica
 
Rutina administrativas cybertronic
Rutina administrativas cybertronicRutina administrativas cybertronic
Rutina administrativas cybertronic
 
Buena atencion al publico cybertronic
Buena atencion al publico cybertronicBuena atencion al publico cybertronic
Buena atencion al publico cybertronic
 
Secretariado Ejecutivo Modulo Relaciones Humanas
Secretariado Ejecutivo Modulo Relaciones HumanasSecretariado Ejecutivo Modulo Relaciones Humanas
Secretariado Ejecutivo Modulo Relaciones Humanas
 
Curso de Secretariado Ejecutivo Cybertronic Instituto
Curso de Secretariado Ejecutivo Cybertronic InstitutoCurso de Secretariado Ejecutivo Cybertronic Instituto
Curso de Secretariado Ejecutivo Cybertronic Instituto
 
Curso de Electrónica Clase1
Curso de Electrónica Clase1Curso de Electrónica Clase1
Curso de Electrónica Clase1
 
Electronica temario 2
Electronica temario 2Electronica temario 2
Electronica temario 2
 
Cybertronic Ingles
Cybertronic InglesCybertronic Ingles
Cybertronic Ingles
 
Cronograma 3ra. clase de robotica
Cronograma 3ra. clase de roboticaCronograma 3ra. clase de robotica
Cronograma 3ra. clase de robotica
 
Materiales para robot insecto
Materiales para robot insectoMateriales para robot insecto
Materiales para robot insecto
 
Robots insectos nanobots
Robots insectos nanobots Robots insectos nanobots
Robots insectos nanobots
 
Robots insectos nanobots
Robots insectos nanobots Robots insectos nanobots
Robots insectos nanobots
 
Cronograma segunda clase de robotica
Cronograma segunda clase de roboticaCronograma segunda clase de robotica
Cronograma segunda clase de robotica
 
Primera clase de robotica - Prof. Sergio Sanchez
Primera clase de robotica - Prof. Sergio SanchezPrimera clase de robotica - Prof. Sergio Sanchez
Primera clase de robotica - Prof. Sergio Sanchez
 
Ev3 student worksheets
Ev3 student worksheetsEv3 student worksheets
Ev3 student worksheets
 
Guia de Usuario lego mindstorms ev3
Guia de Usuario lego mindstorms ev3 Guia de Usuario lego mindstorms ev3
Guia de Usuario lego mindstorms ev3
 
English test
English testEnglish test
English test
 
Washington
WashingtonWashington
Washington
 
Actividadescomplementarias
ActividadescomplementariasActividadescomplementarias
Actividadescomplementarias
 

Último

PIAR v 015. 2024 Plan Individual de ajustes razonables
PIAR v 015. 2024 Plan Individual de ajustes razonablesPIAR v 015. 2024 Plan Individual de ajustes razonables
PIAR v 015. 2024 Plan Individual de ajustes razonablesYanirisBarcelDelaHoz
 
Sesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docxSesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docxMaritzaRetamozoVera
 
proyecto de mayo inicial 5 añitos aprender es bueno para tu niño
proyecto de mayo inicial 5 añitos aprender es bueno para tu niñoproyecto de mayo inicial 5 añitos aprender es bueno para tu niño
proyecto de mayo inicial 5 añitos aprender es bueno para tu niñotapirjackluis
 
LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...
LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...
LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...JAVIER SOLIS NOYOLA
 
Estrategias de enseñanza-aprendizaje virtual.pptx
Estrategias de enseñanza-aprendizaje virtual.pptxEstrategias de enseñanza-aprendizaje virtual.pptx
Estrategias de enseñanza-aprendizaje virtual.pptxdkmeza
 
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdfCurso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdfFrancisco158360
 
AFICHE EL MANIERISMO HISTORIA DE LA ARQUITECTURA II
AFICHE EL MANIERISMO HISTORIA DE LA ARQUITECTURA IIAFICHE EL MANIERISMO HISTORIA DE LA ARQUITECTURA II
AFICHE EL MANIERISMO HISTORIA DE LA ARQUITECTURA IIIsauraImbrondone
 
Programacion Anual Matemática5 MPG 2024 Ccesa007.pdf
Programacion Anual Matemática5    MPG 2024  Ccesa007.pdfProgramacion Anual Matemática5    MPG 2024  Ccesa007.pdf
Programacion Anual Matemática5 MPG 2024 Ccesa007.pdfDemetrio Ccesa Rayme
 
Registro Auxiliar - Primaria 2024 (1).pptx
Registro Auxiliar - Primaria  2024 (1).pptxRegistro Auxiliar - Primaria  2024 (1).pptx
Registro Auxiliar - Primaria 2024 (1).pptxFelicitasAsuncionDia
 
Imperialismo informal en Europa y el imperio
Imperialismo informal en Europa y el imperioImperialismo informal en Europa y el imperio
Imperialismo informal en Europa y el imperiomiralbaipiales2016
 
INSTRUCCION PREPARATORIA DE TIRO .pptx
INSTRUCCION PREPARATORIA DE TIRO   .pptxINSTRUCCION PREPARATORIA DE TIRO   .pptx
INSTRUCCION PREPARATORIA DE TIRO .pptxdeimerhdz21
 
actividades comprensión lectora para 3° grado
actividades comprensión lectora para 3° gradoactividades comprensión lectora para 3° grado
actividades comprensión lectora para 3° gradoJosDanielEstradaHern
 
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdfSELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdfAngélica Soledad Vega Ramírez
 
La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.amayarogel
 
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptxACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptxzulyvero07
 
origen y desarrollo del ensayo literario
origen y desarrollo del ensayo literarioorigen y desarrollo del ensayo literario
origen y desarrollo del ensayo literarioELIASAURELIOCHAVEZCA1
 

Último (20)

PIAR v 015. 2024 Plan Individual de ajustes razonables
PIAR v 015. 2024 Plan Individual de ajustes razonablesPIAR v 015. 2024 Plan Individual de ajustes razonables
PIAR v 015. 2024 Plan Individual de ajustes razonables
 
Sesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docxSesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docx
 
proyecto de mayo inicial 5 añitos aprender es bueno para tu niño
proyecto de mayo inicial 5 añitos aprender es bueno para tu niñoproyecto de mayo inicial 5 añitos aprender es bueno para tu niño
proyecto de mayo inicial 5 añitos aprender es bueno para tu niño
 
Unidad 3 | Metodología de la Investigación
Unidad 3 | Metodología de la InvestigaciónUnidad 3 | Metodología de la Investigación
Unidad 3 | Metodología de la Investigación
 
LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...
LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...
LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...
 
Estrategias de enseñanza-aprendizaje virtual.pptx
Estrategias de enseñanza-aprendizaje virtual.pptxEstrategias de enseñanza-aprendizaje virtual.pptx
Estrategias de enseñanza-aprendizaje virtual.pptx
 
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdfCurso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdf
 
AFICHE EL MANIERISMO HISTORIA DE LA ARQUITECTURA II
AFICHE EL MANIERISMO HISTORIA DE LA ARQUITECTURA IIAFICHE EL MANIERISMO HISTORIA DE LA ARQUITECTURA II
AFICHE EL MANIERISMO HISTORIA DE LA ARQUITECTURA II
 
Programacion Anual Matemática5 MPG 2024 Ccesa007.pdf
Programacion Anual Matemática5    MPG 2024  Ccesa007.pdfProgramacion Anual Matemática5    MPG 2024  Ccesa007.pdf
Programacion Anual Matemática5 MPG 2024 Ccesa007.pdf
 
Registro Auxiliar - Primaria 2024 (1).pptx
Registro Auxiliar - Primaria  2024 (1).pptxRegistro Auxiliar - Primaria  2024 (1).pptx
Registro Auxiliar - Primaria 2024 (1).pptx
 
Imperialismo informal en Europa y el imperio
Imperialismo informal en Europa y el imperioImperialismo informal en Europa y el imperio
Imperialismo informal en Europa y el imperio
 
INSTRUCCION PREPARATORIA DE TIRO .pptx
INSTRUCCION PREPARATORIA DE TIRO   .pptxINSTRUCCION PREPARATORIA DE TIRO   .pptx
INSTRUCCION PREPARATORIA DE TIRO .pptx
 
actividades comprensión lectora para 3° grado
actividades comprensión lectora para 3° gradoactividades comprensión lectora para 3° grado
actividades comprensión lectora para 3° grado
 
Presentacion Metodología de Enseñanza Multigrado
Presentacion Metodología de Enseñanza MultigradoPresentacion Metodología de Enseñanza Multigrado
Presentacion Metodología de Enseñanza Multigrado
 
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdfSELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
 
La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.
 
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptxACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
 
Power Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptxPower Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptx
 
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdfTema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
 
origen y desarrollo del ensayo literario
origen y desarrollo del ensayo literarioorigen y desarrollo del ensayo literario
origen y desarrollo del ensayo literario
 

Curso de Diseño WEB

  • 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 .