HTML by Informática Supérate ADOC

Manual del Participante

Participante:

Sede Central Tel. 2514-7480 y 2514-7483 Telfax: 2514-7481 Santa Ana Zacatecoluca San Miguel Tel. 2440-4348 Tel. 2334-0462 Tel. 2669-2292 WEB: http://www.itca.edu.sv CENTRO DE CAPACITACION EN TECNOLOGIA INFORMATICA

Centro de Capacitación en Tecnología Informática

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática TABLA DE CONTENIDO

CREACIÓN DE PÁGINAS WEB BÁSICAS ................................................................................................3 ENCABEZADOS EN HTML ....................................................................................................................4 LÍNEAS EN HTML ...............................................................................................................................5 CUERPO DEL DOCUMENTO ..................................................................................................................7 TEXTO EN HTML .............................................................................................................................. 10 MARQUESINAS ................................................................................................................................ 16 LISTAS EN HTML ............................................................................................................................. 18 IMÁGENES EN HTML ........................................................................................................................ 22 VIDEOS EN LAS PÁGINAS WEB .......................................................................................................... 26 SONIDOS EN LAS PÁGINAS WEB ....................................................................................................... 27 HIPERVINCULOS.............................................................................................................................. 28 TABLAS .......................................................................................................................................... 34 MAPAS O ZONAS ACTIVAS ................................................................................................................ 42 FORMULARIOS ................................................................................................................................ 46 MARCOS O FRAMES ......................................................................................................................... 54

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática CREACIÓN DE PÁGINAS WEB BÁSICAS Objetivo: Que al finalizar el tema el participante este en la capacidad de crear páginas Web básicas usando directivas HTML ¿Qué es el html? HTML significa HyperText Markup Language. Es el lenguaje en que se escriben los millones de documentos que hoy existen en el World Wide Web. Cuando accedemos a uno de estos documentos, el cliente (Netscape, IE, Mosaic, Lynx, IBrowse) los interpreta y los despliega. Existen clientes gráficos como Netscape, y otros como el Lynx que solo despliegan texto. Es muy importante no olvidar esto cuando se diseña una página Web. Crear una buena página tiene dos aspectos; por un lado el conocimiento técnico para crear código HTML correcto, por otro lado el claro diseño para presentar la información. El HTML fue creado en 1992 por un físico nuclear llamado Tim Berners Lee. Berners Lee tomó dos herramientas preexistentes: el concepto de hipertexto (que permite conectar documentos entre sí a través de palabras que obran como puentes) y el SGML (siglas en inglés de lenguaje estándar de marcación general), que sirve para poner etiquetas o marcas en un texto que indiquen qué es cada parte y cómo debe verse. Ejemplos: Directiva cerrada: <center> Mi página Web </center> Directiva abierta: <hr> Directiva con parámetros: <body bgcolor="#FFFFFF"> </body> Los ficheros que contienen documentos HTML suelen tener la extensión .html o .htm Estructura básica de un documento html Procedimiento para crear una estructura básica de página Web 1. Cree una carpeta para guardar esta práctica ya sea en el disco duro en el disquete con el nombre de estructura. 2. Abra el bloc de notas 3. Digite el código que se muestra abajo Un documento escrito en HTML contendría básicamente las siguientes directivas: <HTML> <HEAD>

Indica el inicio del documento. Inicio de la cabecera.

<TITLE>

Inicio del título del documento.

</TITLE>

Final del título del documento.

</HEAD>

Final de la cabecera del documento.

<BODY>

Inicio del cuerpo del documento.

</BODY>

Final del cuerpo del documento.

</HTML>

Final del documento.

4. Guarde su página Web con el nombre de estructura y la extensión html 5. Visualice su página en el navegador

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática El documento se hallará situado en algún ordenador al que se pueda acceder a través de Internet. Para indicar la situación del documento en Internet se utiliza la URL (Uniform Resource Locator). La URL es el camino que ha de seguir nuestro visor a través de Internet para acceder a un determinado recurso, bien sea una página Web, un fichero, un grupo de noticias, etc. El dominio indica el nombre del ordenador al que accedemos, el directorio es el nombre del directorio de ese ordenador y fichero el nombre del fichero que contiene la página Web escrita en HTML. Por ejemplo: http://www.itca.edu.sv/cursos/mia.html Donde.... http:// www.itca.edu.sv /cursos/ mia.html

es el indicador de página Web es el Dominio (nombre) del ordenador es el Directorio dentro del ordenador es el Fichero que contiene la página Web

Ejercicio: Estructura básica 1. Abra el bloc de notas 2. Escriba el siguiente código fuente: <html> <head> <title>Práctica de estructura básica de una página Web</title> </head> <body>Mi primer documento creado con el HTML </body> </html> 3. Cree una carpeta con el nombre de “Prácticas de HTML básico” ya sea en el escritorio o en su disco 3½ A: 4. Guarde su documento con el siguiente nombre “estructura_básica.html” en la carpeta que acaba de crear (no olvide cambiar la extensión del archivo txt por html) 5. Vaya a la carpeta que creo y seleccione el archivo estructura_básica.html 6. Déle 2 clic para abrir y visualizar su nueva página Web.

ENCABEZADOS EN HTML Objetivo: Que al finalizar el tema el participante este en la capacidad de Ocupar etiquetas HTML para los encabezados de páginas Web Cabecera del documento La directiva <HEAD></HEAD> delimita la cabecera del documento. Dentro de la cabecera es importante definir el título de la página por medio de la directiva <TITLE></TITLE>. Este título será el que aparezca en la barra de nuestro visor de páginas Web. Ejemplo: <TITLE>La página Web de JMC</TITLE> Dentro de la cabecera de nuestro documento podemos incluir otras directivas adicionales. La directiva <META> indica al visor de Internet las palabras clave y contenido de nuestra página Web. Muchos de los buscadores de páginas Web de Internet (Yahoo, Lycos, etc...) utilizan el contenido de esta directiva para incluir la página en sus bases de datos. La directiva <META> lleva generalmente dos parámetros, name y content.

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática Ejemplos: <META name = "Pagina de JMC"content = "Mi pagina personal, Música y Películas"> Indica al visor el nombre de la página y sus contenidos principales. <META name = "keywords"content = "JMC música películas Indica al visor las palabras cl ave para los buscadores de Internet.

links

Salvador">

Otro uso de la directiva <META> es la de indicar documentos con "refresco automático". Si se indica una URL se sustituirá el documento por el indicado una vez transcurridos el número de segundos especificados. Procedimiento para aplicar la etiqueta meta de refrescado en una página Web 1. Abra el bloc de notas 2. Digite el siguiente código html <html> <head> <title>Kool Pages </title> <meta http-equiv="refresh" content = "5;URL=http://designweb.turincon.com”> </head> <body> </body> </html> 3. Guarde su trabajo con el nombre de metas.html 4. Visualícela en el navegador Transcurridos 5 segundos se accederá a la página Web de designweb Ejercicio: Cabeceras 1. Abra el bloc de notas 2. Escriba el siguiente código fuente: <html> <head> <title>Cabeceras en HTML</title> <meta name = "Pagina de JMC"content = "Mi pagina personal, Música y Películas"> <meta http-equiv= "refresh"content = "5;URL=http://designweb.turincon.com"> <meta name = "keywords"content = "JMC música películas links El Sal-vador"> </head> <body> </body> </html> 3. Guarde su documento con el siguiente nombre: “cabeceras_en_páginas_web.html” en la carpeta “Prácticas de HTML básico” 4. Abra su nueva página Web y visualícela en el navegador

LÍNEAS EN HTML Objetivo: Que al finalizar el tema el participante este en la capacidad de Insertar líneas o separadores en las páginas Web

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática Líneas en html Las líneas son separadores horizontales que se consiguen con la etiqueta <HR> (no existe la correspondiente de cierre). Con ella se obtiene una raya horizontal tan larga como la pantalla, y con la apariencia de estar embutida sobre el fondo La directiva <HR> muestra una línea horizontal de tamaño determinable. Tiene los siguientes parámetros opcionales: a) align = posición Alinea la línea a la izquierda (left), a la derecha (right) o la centra (center). b) noshade No muestra sombra, evitando el efecto en tres dimensiones. c) size = número Indica el grosor de la línea en píxeles. d) width = num / % Indica el ancho de la línea en tanto por ciento en función del ancho de la ventana del visor. También se puede especificar un número que indicaría el ancho de la línea en píxeles. e) Color= indica el color que se desea aplicar a la línea <hr color=”código del color”> Ejemplo de una línea con HTML: <hr align= center size= 20 width= 50%>

La directiva <HR> sin ningún parámetro mostraría una línea horizontal que ocuparía todo el ancho de la página.

Procedimiento para aplicar la etiqueta <hr> en una página Web 1. Abra el bloc de notas 2. Digite el siguiente código fuente: <html> <head> <title>líneas</title> </head> <body> <hr color=”silver” > <HR> <HR size=15> <HR size=37> <HR size=70> <HR width=30> <HR width="50%"> </body> <html> 3. Guarde su página con el nombre de líneas_web.html 4. Visualícela en el navegador

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática Ejercicio 1: Líneas con atributos 1. Abra el bloc de notas y cree una página con las siguientes etiquetas <html> <head> <title>Líneas en Html</title> </head> <body> <HR> <HR width=30> <HR width="50%"> <HR size=15> <HR size=37> <HR size=70> <HR width="30%" align=right> <HR width="30%" align=center> <HR width="30%" align=left> Izquierda <HR WIDTH=80% SIZE=12 ALIGN=right COLOR=red> <HR WIDTH=50% SIZE=20 ALIGN=left COLOR=navy> </body> </html> 2. Guarde el archivo con el nombre de lineas_atributos.html en la carpeta “Prácticas de HTML básico” 3. Visualícelo en el navegador

CUERPO DEL DOCUMENTO Objetivo: Que al finalizar el tema el participante este en la capacidad de Insertar fondos de colores e imágenes en las páginas Web Cuerpo del documento La directiva <BODY></BODY> indica el inicio y final de nuestra pagina Web. Será entre el inicio y el final de esta directiva donde pongamos los contenidos de nuestra página, textos, gráficos, enlaces, etc. Esta directiva tiene una serie de parámetros opcionales que nos permiten indicar la "apariencia" global del documento: a) background= "nombre de fichero grafico" Indica el nombre de un fichero gráfico que servirá como "fondo" de nuestra página. Si la imagen no rellena todo el fondo del documento, esta será reproducida tantas veces como sea necesario. b) bgcolor = "código de color" Indica un color para el fondo de nuestro documento. Se ignora si se ha usado el parámetro background. c) text = "código de color" Indica un color para el texto que incluyamos en nuestro documento. Por defecto es negro. d) link = "código de color"

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática Indica el color de los textos que dan acceso a un Hiperenlaces. Por defecto es azul. e) vlink = "código de color" Indica el color de los textos que dan acceso a un Hiperenlaces que ya hemos visitado con nuestro visor. Por defecto es púrpura. El código de color es un número compuesto por tres pares de cifras hexadecimales que indican la proporción de los colores "primarios", rojo, verde y azul. El código de color se antecede del símbolo #. Ejemplos: #000000 #FF0000 #00FF00 #0000FF #FFFFFF

Color Negro Color Rojo Color Verde Color Azul Color Blanco

El primer par de cifras indican la proporción de color Rojo, el segundo par de cifras la proporción de color Verde y las dos ultimas la proporción de color Azul. Cada par de cifras hexadecimales nos permiten un rango de 0 a 255. Combinando las proporciones de cada color primario obtendremos diferentes colores. Para cambiar el fondo con un color uniforme necesitamos emplear la etiqueta, situada al principio del documento, <BODY>. A la que añadiremos el comando: BGCOLOR="#RRVVAA" BGCOLOR= Es una abreviatura de Background color, que en castellano significaría Color de Fondo. Bien la etiqueta completa quedaría de la siguiente forma: <BODY BGCOLOR="#RRVVAA"> Atributos Los atributos que lleva este comando significan lo siguiente: RR= Es un número en hexadecimal que indica la cantidad de color rojo que contiene el fondo. VV= Es un numero en hexadecimal que indica la cantidad de color verde que contiene el fondo. AA= Es un número en hexadecimal que indica la cantidad de color azul que contiene el fondo. Recuerde que los números en hexadecimal tienen 16 dígitos que son: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Es decir el 00 corresponde a la ausencia del color y el FF es la máxima saturación del color que se trate. Imágenes de fondo También podemos poner una imagen como fondo, bien en formato GIF, JPEG, o PNG esta imagen se repetirá por toda la página, una imagen vale más que mil palabras. Bien, para incluir una imagen en nuestra página tendremos que utilizar, dentro de la ya conocida etiqueta <BODY> un comando más. Este comando es el siguiente:

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática BACKGROUND="imagen.tip" Donde tip significa el tipo de fichero de imagen y puede tomar los valores GIF o JPG. Procedimiento para aplicar colores e imagenes de fondo en una página web 1. Abra el bloc de notas 2. Digite el siguiente código fuente <html> <head> <title>fondos</title> </head> <BODY BACKGROUND="image.gif" BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#FF00FF" ALINK="#FF0000" BGPROPERTIES=”FIXED”> </body> </html> 3. Guarde su página con el nombre de fondos_web.html 4. Visualícela en el explorador Si deseamos que nuestra página tenga una imagen de fondo debemos utilizar el atributo BACKGROUND de la etiqueta <BODY>. Este atributo presentará la imagen seleccionada como un fondo. La imagen se repite hasta llenar el espacio de la página. <BODY BACKGROUND="IMAGEN.JPG"> Al desplazar la página hacia arriba o abajo, el fondo también se moverá, para evitar que la imagen de fondo se desplace debemos utilizar el atributo BGPROPERTIES de la etiqueta <BODY>. Este atributo junto con BACKGROUND, presentará la imagen de fondo fija. <BODY BACKGROUND="IMAGEN.JPG" BGPROPERTIES="FIXED"> <BODY BACKGROUND="IMAGEN.JPG">: presenta como fondo la imagen "IMAGEN.JPG" que está en el mismo directorio que la página que lleva el fondo. <BODY BACKGROUND="DIRECTORIO/IMAGEN.JPG">: presenta como fondo la imagen "IMAGEN.JPG" que se encuentra en el subdirectorio "directorio". <BODY BACKGROUND="http://www.cualquiersitio.com/IMAGEN.JPG">: presenta como fondo la imagen "IMAGEN.JPG" que se encuentra en la URL http://www.cualquiersitio.com. Ejercicio 1: Fondos 1. Abra el bloc de notas 2. Escriba el siguiente código fuente:

<html> <head> <title>Color de fondo</title> </head> <body bgcolor="#xxyyzz" text="#ff0000" link="orange" vlink="yellow" alink="darkyellow"> <h1 align="center">MI SITIO PERSONAL</h1> (Escriba una introducción al sitio Web) <br>

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática (Describa sus actividades personales) <br> (Describa a sus personas queridas) <br> (Describa su trabajo personal) <br> (Escriba una despedida para los visitantes a su página Web) </body> </html> 3. Guarde su documento con el siguiente nombre “fondo1.html” en la carpeta “Prácticas de HTML básico” 4. Abra su nueva página Web y visualícela

TEXTO EN HTML Objetivo: Que al finalizar el tema el participante este en la capacidad de Insertar titulares, texto y párrafos en las páginas Web

Las 6 cabeceras El HTML nos ofrece seis etiquetas distintas para mostrar cabeceras en un documento Web que permite hacer distinción entre un texto normal y un titular, lográndose con esto una mejor distribución de la información ofrecido al público que visita nuestro sitio Web. Las 6 cabeceras son las siguientes: Etiqueta

Resultado

Cabecera de nivel 1

Cabecera de nivel 2

Cabecera de nivel 3

Cabecera de nivel 4

Cabecera de nivel 5

Cabecera de nivel 6

Estás etiquetas permiten también definir la alineación donde se quiere mostrar un encabezado como por ejemplo: <h1 align=”center”>ENCABECADO AL CENTRO</h1>

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática Cambiando atributos a las letras Todas estas etiquetas nos permiten cambiar de una manera u otra el aspecto del tipo de letra que estemos utilizando y se pueden utilizar con tiras de caracteres dentro de un párrafo. Etiqueta

Utilidad

Pone el texto en negrita.

Representa el texto en cursiva.

Para subrayar algo.

Para tachar.

Permite representar el texto en un tipo de letra de paso fijo. Letra superíndice. Letra subíndice. Incrementa el tamaño del tipo de letra. Disminuye el tamaño del tipo de letra.

Resultado Soy un texto negro como el tizón Estoy ladeado Como soy muy importante estoy subrayado A mí, en cambio, nadie me quiere No soy variable 2

E=mc ai,j=bi,j+1 Soy GRANDE Creí ver un lindo gatito

a) Texto en negrita: Ejemplo: <B> Sólo sé que no sé nada </B> El usuario verá en negrita todo el texto que quede encerrado entre estas etiquetas. En este caso, leerá: Sólo sé que no se nada. La "B" de la etiqueta significa "bold" (negrita, en inglés). b) Texto realzado: Utilizado para dar mayor énfasis al texto. Normalmente, cumple el mismo efecto que la etiqueta <B>. Ejemplo: <STRONG>pero aún supero a la generalidad de los hombres </STRONG> El usuario verá: pero aún supero a la generalidad de los hombres c) Texto en itálica: Ejemplo: <I> que ni siquiera está al tanto de eso </I> El usuario verá: que ni siquiera está al tanto de eso. La "I" de esta etiqueta significa "itálica" (bastardilla o itálica, en inglés). d) Texto subrayado: Ejemplo: <U> Sócrates </U>. El usuario verá: Sócrates. La "U" de esta etiqueta significa "underlined" (subrayado, en inglés). e) Texto tachado: Ejemplo: <STRIKE> que publicó dos libros </STRIKE> El usuario verá: que publicó dos libros

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática Tamaño y tipo de letra La etiqueta de tipografía <FONT> posee tres atributos: SIZE, COLOR y FACE, que permiten definir, respectivamente, el tamaño, color y tipo de letra: a) El atributo SIZE: Regula el tamaño de los caracteres. <FONT SIZE=3> Texto de tamaño 3 </FONT> El usuario verá: Texto de tamaño 3 <FONT SIZE=4>Este tiene un tamaño 4 </FONT> El usuario verá: Este tiene un tamaño 4 b) El atributo COLOR: Especifica el color de los caracteres. Los colores se identifican mediante el nombre del color en inglés (como red, white o black) o mediante un código hexadecimal con elformato "#rrggbb", donde "rr", "gg" y "bb" son valores hexadecimales comprendidos entre 00 y FF que especifican el grado de saturación de los colores rojo, verde y azul. <FONT COLOR="red"> ROJO. </FONT> = ROJO. <FONT COLOR=#FF0000> ROJO, también. </FONT> = ROJO, también. c) El atributo FACE: Permite definir el tipo de letra que se quiere utilizar: Algerian, Arial, Times New Roman, Courier, MS Serif, Symbol, System, Times New Roman, etc. Atención: el usuario sólo verá el texto en el tipo de fuente elegido por el diseñador si esa fuente está instalada en la PC del usuario. <FONT FACE=Times New Roman> Este texto está en tipografía Times New Roman</FONT> El usuario verá: Este texto está en tipografía Times New Roman Procedimiento para aplicar atributos al texto 1. Abra el bloc de notas 2. Cree el siguiente código fuente <html> <head> <title>formatos de texto</title> </head> <body> <FONT SIZE=3>A</font><FONT SIZE=4>A</font><FONT SIZE=5>A</font> <FONT SIZE=6>A</font><FONT SIZE=7>A</font><FONT SIZE=6>A</font> <FONT SIZE=5>A</font><FONT SIZE=4>A</font><FONT SIZE=3>A</FONT> <font color=#FF0000>C<font color=#ff7070>C<font color=#0000FF>C <FONT FACE=“arial”>ITCA-FEÀDE</FONT> </body> </html> 3. Guarde su página con el nombre de formatos.html 4. Visualícela en el navegador

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática <Center> centrado de texto: Se utilizará para centrar líneas de texto, imágenes o cualquier otro elemento HTML (tablas, listas, etc.) Todo lo que se encuentre entre las etiquetas de inicio y fin aparecerá centrado en el navegador. Ejemplo Inst. HTML Resultado Explicación

<CENTER> Este texto se verá centrado </CENTER> Este texto se verá centrado El texto aparece centrado en el navegador. Se puede utilizar tanto para una línea como para un párrafo, y para cualquiera de las instrucciones del lenguaje HTML.

&nbsp; espacios en blanco: Con esta secuencia de caracteres conseguiremos espacios en blanco que se mostrarán de forma efectiva. Generar espacios de párrafo en blanco Para lograr espacios en blanco simplemente deberá de insertar el siguiente código y repetirlo hasta lograr los espacios deseados <br></p>

Ejemplos de código html en una página Web La etiqueta <xmp> permite visualizar código sin que se ejecute en la página Web, esta etiqueta tiene su respectivo cierre </xmp>

Formato del párrafo Estas son las etiquetas más importantes: Etiqueta <P> <CENTER> ... </CENTER> <PRE WIDTH=x> ... </PRE>

ITCA-FEPADE

Utilidad Resultado Sirve para delimitar un párrafo. Inserta una Soy un párrafo línea en blanco antes del texto. Yo soy normal Permite centrar todo el texto del párrafo. Yo estoy centrado Representa el texto encerrado en ella con un tipo de letra de paso fijo. Muy útil a la hora de representar código fuente. El parámetro Estoy en paso fijo WIDTH especifica el número máximo de caracteres en una línea. Yo estoy a la izquierda Permite justificar el texto del párrafo a la Yo al centro izquierda (ALIGN=LEFT), derecha (RIGHT), al Y yo a la derecha (recuerda centro (CENTER) o a ambos márgenes a la política esto, oye) (JUSTIFY) Yo soy el más chulo,

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática

Para escribir direcciones (de esas donde vive la gente, no electrónicas).

Para citar un texto ajeno. Se suele implementar dejando márgenes tanto a izquierda como a derecha, razón por la que se usa habitualmente.

porque estoy en todos los lados. Daniel Rodríguez Herrera C/Ecuador 9, 1ºB 28220 Majadahonda Me gustaría reencarnarme en las yemas de los dedos de Warren Beatty (Woody Allen)

Cómo alinear un párrafo Mediante el atributo ALIGN, utilizado dentro de la etiqueta <P> puedo alinear el texto en cuatro formas: LEFT: Justifica el texto a la izquierda. RIGHT: Justifica el texto a la derecha. CENTER: El texto aparece centrado. JUSTIFY: El texto se verá justificado Ejemplo: <P ALIGN="LEFT"> 1. El coronel destapó el tarro de café y comprobó que no había más que una cucharadita. Retiró la olla del fogón, vertió la mitad del agua en el piso de tierra, y con un cuchillo raspó el interior del tarro sobre la olla hasta que se desprendieron las últimas raspaduras del polvo de café revueltas con óxido de la lata. </P> <P ALIGN=RIGHT> El hecho ocurrió en el mes de febrero de 1969, al norte de Boston, en Cambridge. No lo escribí inmediatamente porque mi primer propósito fue olvidarlo, para no perder la razón. Ahora, en 1972, pienso que si lo escribo, los otros lo leerán como un cuento y, con los años, lo será tal vez para mí. </P> <P ALIGN=CENTER> Julio Cortázar nació en Bruselas en 1914. Se educó en Argentina, de donde eran sus padres y cuya nacionalidad adoptó. Realizó estudios de Letras y de Magisterio, y trabajó durante algún tiempo de maestro rural. En 1951 </P> <P ALIGN=JUSTIFY>Mi mejor esfuerzo no esta quedando en vano pues a todas luces puedo observar que mi mundo se ve enriquecido con mucho conocimiento no sin antes reconocer de que hay un mundo inmenso del cual no se ni un quinto</P> Cortes No siempre necesito dividir la información en párrafos claramente separados. A veces, basta sólo un salto de línea. Esta es la función de la etiqueta <BR>. Ejemplo: -Su llamada a Nueva York, señora Glass- dijo la operadora. <BR> -Gracias-contestó la chica, e hizo sitio en la mesita de noche para el cenicero. <BR> A través del auricular llegó una voz de mujer: <BR> -Muriel, ¿eres tú? <BR>

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática El usuario verá: -Su llamada a Nueva York, señora Glass- dijo la operadora. -Gracias- contestó la chica, e hizo sitio en la mesita de noche para el cenicero. A través del auricular llegó una voz de mujer: -Muriel, ¿eres tú? 1. a. izquierda b. derecha c. centrada d. justificada 2. a. negrita

b. cursiva

c. subrayado d. tachado

Ejercicio: Formatos de texto 1. Abra el bloc de notas 2. Escriba el siguiente código fuente: <html> <head> <title>Mi Primera Página con formato de textos en HTML</title> </head> <body> <h1> <center>Primera Página Web</center> </h1> <!...Este es un comentario que no se verá en el navegador ya que queda reservado para los programadores que sepan acerca de él.> <hr> Esta es mi primera página Web con algunos formatos de texto, aunque todavía es muy sencilla, como el lenguaje HTML no es difícil, pronto estaré en condiciones de hacer cosas muy interesantes. <p> Aquí va un segundo párrafo </p> <br><p> <br><p> <br><p> Ahora deberá de haber mucho espacio entre el texto arriba y este actual. <hr> En &nbsp;&nbsp;&nbsp; este &nbsp;&nbsp;&nbsp; ejercicio &nbsp;&nbsp;&nbsp; se &nbsp;&nbsp;&nbsp; verá &nbsp;&nbsp;&nbsp; más &nbsp;&nbsp;&nbsp; espaciado &nbsp;&nbsp;&nbsp; del &nbsp;&nbsp;&nbsp; normal &nbsp;&nbsp;&nbsp; entre &nbsp;&nbsp;&nbsp; palabras. <hr> <h2>Ejercicio para visualizar el efecto de negrita y cursiva:</h2> <b>La mañana está muy bella</b><i> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pero es posible que la tarde esté mejor</i> <hr>

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática <pre>

mis amigos son:

Ing. Mario Roberto Villeda Viada Ing. Julio Dixon Rivera Barrera Ing. Hugo Nelson Carcamo

</pre> <hr> <tt>Este <hr>

texto

está

con

apariencia

una

máquina

escribir</tt>

<blockquote><blockquote><blockquote> Ejemplo de texto con sangría para destacar una cita textual dentro del texto general. Este párrafo está escrito entre ambas etiquetas. Obsérvese los márgenes a ambos lados. </blockquote></blockquote></blockquote> <hr> <h2>El efecto de superíndice y subíndice se logra con las etiquetas sup y sub:</h2> m<sup>2</sup> <br> V<sub>x</sub> <br> H<sub>2</sub>O <br> COCA-COLA<Sup>®</sup> </body> </html> 3. Guarde su documento con el siguiente nombre “formato_texto1.html” en la carpeta “Prácticas de HTML básico” 4. Abra su nueva página Web y visualícela

MARQUESINAS Objetivo: Que al finalizar el tema el participante este en la capacidad de crear marquesinas usando texto e imágenes

Marquesinas o letreros (<marquee></marquee>) Si queremos dar mayor dinamismo al texto de la página podemos crear letreros en desplazamiento. Para ello utilizaremos el delimitador <MARQUEE></MARQUEE> que cuenta con los siguientes atributos: Atributo Función behavior=scroll, slide, alternate Comportamiento de la marquesina direction=left, right, up, down Dirección del desplazamiento. loop=número Número de veces que se repite la visualización de la marquesina loop=infinite La visualización del letrero se repetirá indefinidamente. scrollamount=número Número de pixels que cambian en cada una de las fases de visualización. scrolldelay=número Tiempo (en milisegundos) entre cada una de las fases de visualización. hspace=número Anchura de los márgenes horizontales. vspace=número Anchura de los márgenes verticales.

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática height=número o porcentaje width=número o porcentaje align=top, bottom, middle bgcolor=#rrggbb bgcolor=nombre

Altura del elemento. Anchura del letrero. Alineación vertical del letrero. Valor RGB del color del fondo. Nombre del color del fondo.

Ejercicio: Creando Marquesinas 1. Abra el bloc de notas 2. Escriba el siguiente código fuente: <html> <head> <title>marquesinas</title> </head> <body> <h1>Marquesinas en HTML</h1> <marquee>Este es mi primer texto en movimiento</marquee> <br><p> <marquee width="50%" height="60">Esta marquesina ocupa el 50% del ancho de la pantalla y tiene una altura de 60 pixeles</marquee> <br><p> <marquee width="50%" height="60" align="bottom">La palabra "¡HOLA!" estará alineada con la parte inferior de la marquesina</marquee>¡HOLA!<br><p> <marquee behavior="slide">Este es el efecto de deslizamiento de una marquesina que se detendrá al final</marquee><br><p> <marquee behavior="alternate">Este texto es rebotón ya que regresa de un lado hasta el otro</marquee><br><p> <marquee bgcolor="blue" height="30"><font color="white"><b>Marquesina con color de fondo azul<b></font></marquee><br><p> <marquee direction="right" bgcolor="silver"><font color="red">Esta marquesina viaja hacia la derecha</marquee><br><p> <table border="1" width="50%" background="images/5.gif"><tr><td> <marquee direction="up" height="200" scrollamount="3">Esta es una marquesina que puede servir de mensaje de noticias <br><p><br><p><br><p><br><p><br><p><br><p><br><p><br><p><br><p><br><p><br><p><br> <p><br><p><br><p>Esta es la segunda línea de texto que estamos observando en el transcurso de esta practica <br><p><br><p><br><p><br><p><br><p><br><p><br><p><br><p><br><p><br><p><br><p><br> <p><br><p><br><p>Y esta es la tercera línea de texto, por cierto que es la última que he puesto</marquee></td></tr></table><br><p> <table border="1" width="50%" background="images/5.gif"> <tr> <td> <marquee>Marquesina dentro de una tabla</marquee> </td>

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática </tr> </table> <br><p> </body></html> 3. Guarde su documento con el siguiente nombre “marquesinas.html” en la carpeta “Prácticas de HTML básico” 4. Abra su nueva página Web y visualícela

LISTAS EN HTML Objetivo: Que al finalizar el tema el participante este en la capacidad de Crear listas con html para páginas Web

Listas Existen varios tipos de listas en HTML. Todas ellas se pueden meter unas dentro de otras formando árboles muy bonitos y preciosos. Todos los tipos siguen el siguiente formato: <tipo_lista> <LI>Primer elemento <LI>Segundo elemento </tipo_lista> tipo_lista puede ser una de las siguientes: OL, UL, DL.

Listas desordenadas La etiqueta <UL> nos permite presentar listas de elementos sin orden alguno. Cada elemento de la lista irá normalmente precedido por un círculo. Por ejemplo:

Procedimiento para crear una lista desordenada 1. Abra el bloc de notas 2. Digite el siguiente código fuente <html> <head> <title>listas desordenadas</title> </head> <body> <UL> <LI>Primer elemento <LI>Segundo elemento </UL> </body> </html> 2. Guarde su página Web con el nombre de listas_desordenadas.html 3. Visualícela en el navegador Se verá como

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática Primer elemento Segundo elemento

La etiqueta <UL> admite estos parámetros: Parámetro

TYPE="disc", "circle", "square"

Utilidad Indica al navegador el dibujo que precederá a cada elemento de la lista. Para mayor flexibilidad se admite también como parámetro de <LI>.

Resultado Tipo disc o

Tipo circle



Tipo square

Listas ordenadas La etiqueta <OL> nos permite presentar listas de elementos ordenados de menor a mayor. Normalmente cada elemento de la lista irá precedido por su número en el orden. Por ejemplo Procedimiento para crear una lista ordenada 1. Abra el bloc de notas 2. Digite el siguiente código fuente <html> <head> <title>listas ordenadas</title> </head> <body> <OL> <LI>Primer elemento <LI>Segundo elemento </OL> </body> </html> 4. Guarde su página Web con el nombre de listas_ordenadas.html 5. Visualícela en el navegador Se verá como 1. Primer elemento 2. Segundo elemento

La etiqueta <OL> admite estos parámetros: Parámetro

Utilidad

Resultado 1. Tipo 1 b. Tipo a

Indica al navegador el tipo de numeración que precederá TYPE="1", "a", "A", a cada elemento de la lista. Para mayor flexibilidad se "i", "I" admite también como parámetro de <LI>.

ITCA-FEPADE

MANUAL DE HTML

C. Tipo A iv.

Tipo i

Tipo I

Centro de Capacitación en Tecnología Informática

START="num"

Indica al navegador el número por el que se empezará a contar los elementos de la lista.

3. Primer elemento 4. Segundo elemento 1. Primer elemento

VALUE="num"

Atributo de <LI>, actúa como START pero a partir de un elemento predeterminado.

4. Segundo elemento 5. Tercer elemento

Listas de definiciones Este es el único tipo de lista que no utiliza la etiqueta <LI>. Al tener como objetivo presentar una lista de definiciones, de modo que tiene que representar de manera distinta el objeto definido y la definición. Esto se hace por medio de las etiquetas <DT> y <DD>: Procedimiento para crear una lista de definición 1. Abra el bloc de notas 2. Digite el siguiente código fuente <html> <head> <title>listas de definición</title> </head> <body> <DL> <DT>Primer elemento<DD>Es un elemento muy bonito. <DT>Segundo elemento<DD>Este, en cambio, es peor. </DL> </body> </html> 6. Guarde su página Web con el nombre de listas_de_definicion.html 7. Visualícela en el navegador Se verá como: Primer elemento Es un elemento muy bonito. Segundo elemento Este, en cambio, es peor. Ejercicio: Creando listas 1. Abra el bloc de notas 2. Escriba el siguiente código fuente: <html> <head> <title>Mi Primera Página con LISTAS</title> </head>

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática <body> <h2>Trabajando con listas:</h2> <ul>Mis cosas personales <li>Mi computadora <li>Mis proyectos personales <li>Mis páginas web </ul> <ul> <b>Animales:</b> <li>Mamíferos <li>Peces <ul> <li>sardinas <li>bacalaos </ul> <li>Aves </ul> <ul type="square"> <b>Bandas de Rock</b> <li>The Eagles <li>The Beatles <li>Rollings Stones </ul> <ul type="circle"> <b>Orquestas</b> <li>Orquesta Hermanos Flores <li>Orquesta Jiboa <li>Orquesta San Vicente </ul> <ol> <b>Artes Marciales:</b> <li>Karate <li>Kung Fu <ol> <li>Mantis Religiosa <li>El Tigre <li>El Dragón </ol> <li>Kempo <li>Aikido <li>Lima Lama <li>Tae-Kwon-Do </ol><hr> <h2>Las Listas de Definición:</h2> <dl> <dt>Que es el HTML <dd>Es el lenguaje de marcado de texto que me permite crear páginas Web en su formato original <dt>Que es INTERNET

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática <dd>Es la red mas grande a nivel mundial que abarca a todas las computadoras que se encuentran conectadas en línea</dl> </body> </html> 1. Guarde su documento con el siguiente nombre “listas.html” en la carpeta “Prácticas de HTML básico” 2. Abra su nueva página Web y visualícela

IMÁGENES EN HTML Objetivo: Que al finalizar el tema el participante este en la capacidad de Insertar imágenes en páginas Web con html Insertar imágenes La etiqueta utilizada para agregar imágenes a una página Web es <IMG> y va acompañada de un atributo fundamental "SRC", que indica la ruta donde se encuentra el archivo que contiene la imagen a insertar. Es decir: <IMG SRC="lugar donde guardo la imagen"> Supongamos que tengo la imagen cara.gif, que está presente en el mismo directorio donde está la página y que la quiero insertar. La etiqueta apropiada sería: <IMG SRC="cara.gif">

El atributo alt Otro atributo importante de la etiqueta <IMG> es "ALT". Este atributo permite complementar la imagen con un texto alternativo, utilizado principalmente para aquellos browsers que no permiten mostrar imágenes, ya sea porque son navegadores que sólo soportan texto (como Lynx), porque el usuario tiene desactivada esta opción o porque se produjo un accidente que impidió la llegada del gráfico a la PC del usuario. El texto aparecerá en el espacio correspondiente a la imagen, y también cuando el usuario pase el mouse por arriba de la imagen, incluso si ésta bajó normalmente a la computadora del navegante. Ejemplo: <IMG SRC="cara.gif" ALT= "caravela">

Imágenes como enlaces Otra característica interesante de las imágenes insertadas es que permiten ser utilizadas como hipervínculos. Para esto, es necesario crear un enlace y en vez de encerrar el texto dentro la etiqueta <A> hay que encerrar una imagen.

Procedimiento para hacer que una imagen funcione como un enlace 1. Copie el logotipo del ITCA desde la página Web que se encuentra en Internet para poder ser utilizado en este ejercicio en la carpeta donde guardará su página Web 2. Abra el bloc de notas 3. Digite el siguiente código fuente <html>

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática <head> <title>listas de definición</title> </head> <body> <A HREF="http://www.itca.edu.sv"> <img src="logoitca.gif" alt="Click aqui para ver sitio Web del ITCA"> </A> </body> </html> 3. Guarde su página Web con el nombre de enlace_imagen.html 4. Visualícela en el navegador Resultado: Click aquí para ver sitio Web del ITCA

También podemos enlazar una imagen con nuestra dirección de correo electrónico. Ejemplo: <A HREF=mailto:jmcortez@latinmail.com ;img src="mail.gif" alt="Click aqui para mandarme un mail" > Click aquí para mandarme un mail

Bordes: El atributo utilizado para establecer un borde en una imagen es BORDER= #, dónde # es un número de 0 a 99. Ejemplo de una imagen sin especificar borde: <img src="CCC.jpg">

Ejemplo de imágenes con el atributo BORDER: <border=5 img src="CCC.jpg">

<border=15 img src="CCC.jpg">

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática Cada vez que utilizamos una imagen para establecer un hipervínculo, de manera automática el browser agrega un borde a la imagen. Si queremos eliminarlo, deberemos indicarlo con el atributo BORDER=0.

Alineando la imagen El atributo utilizado para alinear una imagen es ALIGN. Si quiere insertar una imagen a la izquierda de la pantalla <img align=left src="CCC.jpg">

Si prefiere insertarla a la derecha: <img align=right src="CCC.jpg">

Como todavía hay browsers que no soportan la etiqueta <img align=center>, para centrar una imagen hay que recurrir a un pequeño truco: primero centramos un párrafo (tengamos o no texto) y luego insertar la imagen Para centrar una imagen, entonces: <P ALIGN=CENTER> <img src="CCC.jpg"> </P>

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática

Atributos HEIGHT (altura) y WIDTH (ancho) Permiten cambiar el tamaño de una imagen. Un ejemplo sin estos atributos <IMG SRC="CCC.jpg" Widht=”#” height=”#”>

Ejercicio: Trabajando con Imágenes 1. Abra el bloc de notas 2. Escriba el siguiente código fuente: <html> <head> <title>Imágenes</title> </head> <body background="38.gif" text="blue" bgproperties="fixed"> <basefont size="4"> <h1 align="center">BIENVENIDOS AL SITIO MÁS POPULAR DE INTERNET</h1> <hr> <h2>Trabajo con alineaciones de imágenes</h2> <img src="jmc-3.gif" width="200" align="left"> <img src="jmc-3.gif" width="200" align="right"> <p align="justify"> Esta imagen deberá de aparecer al lado derecho de la ventana del navegador que usted este utilizando <br> Con esta nueva etiqueta insertada obtendremos otro efecto visual que se podrá observar en nuestro trabajo como a continuación se muestra.<br>A continuación haremos otra prueba con la etiqueta para ver cambios significativos con respecto a la distribución del texto en relación al corte del mismo. </p> <img src="jmc-3.gif" width="200" align="left">Este texto esta a un lado de la imagen <br>Este también esta a un lado de la imagen, en la línea siguiente <br clear="left">Este es otro texto, en cambio, ha buscado el primer margen libre a la izquierda <hr> <h2 align="center">Cambiando el tamaño a las imágenes</h2> <img src="jmc-3.gif" width="25" height="25" align="left"> <img src="jmc-3.gif" width="50" height="50" align="left"> <img src="jmc-3.gif" width="75" height="75" align="left"> </body> </html> 5. Guarde su documento con el siguiente nombre “imagenes.html” en la carpeta “Prácticas de HTML básico”. 6. Visualícela en el navegador

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática VIDEOS EN LAS PÁGINAS WEB Objetivo: Que al finalizar el tema el participante este en la capacidad de Insertar videos en las páginas Web con html

Videos El formato de vídeo utilizado es el AVI de Windows, que como es sabido, incluye imágenes y sonido digitales. Atributos a. AUTOSTART: Este atributo posee dos valores posibles: TRUE y FALSE (por defecto). El primero sirve para que el video se cargue junto con la página, es decir, apenas se abre la página comienza a abrirse. El segundo valor es para que el visitante al hacer clic sobre el video lo active.

b. LOOP: Al ingles traduce lazo. Este atributo al igual que el anterior también posee dos valores: FALSE (por defecto) y TRUE, el primero hace que el video se repita una solo vez, y el segundo hace que el video se repita infinitas veces c. HEIGHT y WIDTH: Estos atributos son utilizados para definir el alto y el ancho del video respectivamente. A la hora de utilizar estos valores se debemos tener mucho cuidado ya que si los valores no coinciden con los de las dimensiones del video este será recortado Insertando videos en las páginas Web Procedimiento para insertar un video en una página Web con html 1. Copie el video con extensión avi, donde se encontrará la página Web que lo llamará 2. Abra el bloc de notas 3. Cree una página Web normal 4. Agregue el siguiente código html después de la etiqueta <body> <EMBED SRC="nombre_del_video.avi"> 5. cierre todas las etiquetas que estén abiertas 6. Guarde su página en la misma carpeta donde se encuentre el video 7. Visualícela en el navegador

Ejercicio: Insertando videos 1. Cree una carpeta 2. Copie un video cuya extensión debe ser avi en la carpeta que acaba de crear 3. Abra el bloc de notas 4. Digite el siguiente código html <html> <head> <title>videos</title> </head> <body bgcolor=”orange”>

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática <center> <h1>Videos en línea</h1> <embed src=”nombre_del_video.avi” Width=”100%” loop=”true”> </center> </body> </html> 7. Guarde su página Web con el nombre de video.html 8. Visualícela en el navegador

SONIDOS EN LAS PÁGINAS WEB Objetivo: Que al finalizar el tema el participante este en la capacidad de Insertar sonidos en páginas Web

Sonidos Una página Web puede tener sonidos incorporados, bien sea como un fondo sonoro (se ejecuta automáticamente al cargar la página), o como una opción para que el visitante la active Microsoft Explorer Se utiliza la etiqueta <BGSOUND> acompañada de su atributo principal que es el SRC.

Atributos: a. LOOP Sirve para especificar el número (n) de veces que se debe ejecutar el fichero de sonido. Si se escoge el número n=-1 o se pone LOOP=infinite, el sonido se ejecutará indefinidamente. El valor por defecto de este es 1, es decir, se repite una sola vez. Si yo quiero que se repita infinito número de veces se le coloca INFINITE Procedimiento para insertar un sonido en una página Web 1. Cree una carpeta en el escritorio 2. Copie un archivo de sonido a la carpeta 3. Abra el bloc de notas 4. Digite el siguiente código fuente <html> <head> <title>sonidos cool</title> </head> <bgsound src=”nombre.ext” loop=”1”> 5. Guarde su página con el nombre de sonidos_Web.html 6. Visualícela en el navegador

La etiqueta que debemos emplear en Netscape es <EMBED>, que como cosa rara debe ir acompañada de su atributo principal que es el SRC, para indicar la direccion de donde se encuentra. Atributos: a. LOOP: Con este atributo se indica que, el sonido de fondo se debe reproducir continuamente.Al igual que los videos puede tomar el valor de FALSE y TRUE b. AUTOSTART:Tambien posee los mismos valores que el anterior. Con el TRUE arranca cuando

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática se este cargando la pagina y con el FALSE no. c. VOLUME="n". Con esta directiva controlamos el volumen de sonido.n es un numero entero de 1 a 100.El valor por defecto de este atributo es 50.Pero este tambien se puede cambiar manualmente. d. WIDTH="n". Es el ancho en pixels de la consola que aparece y que tiene diversas teclas, stop, play, etc. e. HEIGHT="n". Es el alto en pixels de la consola que aparece. Dependiendo del plug-in que se tenga tenemos el problema que las dimensiones de consola son diferentes por lo que habrá ocasiones en que se vean zonas en blanco. f. CONTROLS="smallconsole". Visualiza los controles para la reproducción. g. HIDDEN="true". Con este atributo ocultamos la consola, pero también se deben definir sus dimensiones h. STARTTIME=mm:ss y ENDTIME=mm:ssEste atributo es utilizado para activar la consola despues de cierto tiempo. mm son los minuto y ss son los segundo. Para que esto funcione se deben tener dos digitos Ejercicio 1: Insertando sonidos 1. Cree una carpeta 2. copie el archivo de sonido que puede ser de extensión wav, mp3, mid a la carpeta que acaba de crear 3. Abra el bloc de notas 4. Digite el siguiente código html <html> <head> <title>sonidos</title> </head> <bgsound src=”nombre_archivo_de_sonido.ext”> <body> </body> </html> 2. Guarde su archivo con el nombre de sonidos.html 3. Visualícelo en el navegador y disfrute la melodía

HIPERVINCULOS Objetivo: Que al finalizar el tema el participante este en la capacidad de crear hipervínculos con html Crear hipervínculos La etiqueta HTML para crear un hipervínculo de hipertexto se denomina "anchor" (Ancla). HTML crea una etiqueta anchor para los objetos, el texto o las imágenes desde los que se establecen hipervínculos. Por ejemplo, si en la ventana de documento selecciona el texto Página principal y, a continuación, crea un vínculo con un archivo llamado home.htm, el código fuente HTML para el vínculo será el siguiente: <a href="home.htm">Página principal</a>. Tipos de hipervínculos más comunes son:

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática Un vínculo con otro documento o archivo, como un archivo gráfico, de película o de sonido. Un vínculo de punto de fijación con nombre, que salta a un emplazamiento específico dentro de un documento. Un vínculo de correo electrónico, que abre un formulario de correo electrónico con la dirección del destinatario ya complementada. Hipervínculos con una página fuera de nuestro dominio. hipervínculos dentro de la misma página Este tipo de hipervínculo también es conocido como navegación interna. Cuando una página contiene mucha información, es oportuno y hasta necesario establecer vínculos dentro de la misma página, para que el usuario encuentre la información que desea lo más rápido posible, en un solo clic. Este tipo de hipervínculo se da cuando no queremos leer una página de forma secuencial, sino que la queremos leer por pedazos. El punto de partida del hipervínculo (en donde el usuario hará clic) se escribe: Procedimiento para crear un hipervínculo dentro de la misma página 1. Digite el siguiente código fuente en el bloc de notas <html> <head> <title>hipervínculos</title> </head> <body> <h1><a name="ITCA">ITCA</a></h1> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p><a href="#ITCA">ir al principio de ITCA</a></p> </body> </html> 2.

Guárdelo con el nombre de enlaces1.html y visualícelo en el navegador

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática

Para que este tipo de hipervínculo funcione es indispensable el uso del caracter "#" seguido de la palabra a la cual queremos referirnos. El punto de destino del hipervínculo (es decir, el lugar de la misma página al que será transportado el usuario tras el clic) también se delimita con unas etiquetas <A>y</A>, pero el atributo HREF cambia por NAME: <A NAME="Principio">principio </A> Lo que se encuentra en el medio de las directivas <A HREF= "#principio>xxxx</A> en este caso xxxx es la que va a aparecer subrayada en el navegador y es en esa parte que cuando el visitante haga clic que se va a transportar a la parte del documento que se hace referencia. El atributo TARGET El atributo TARGET junto con sus valores nos permitirá trabajar con los vínculos y las ventanas o frames (marcos) en los que se cargaran. Los valores predeterminados para el atributo TARGET

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática son _BLANK, _PARENT, _TOP y _SELF. Aquí solo veremos _BLANK y _SELF dejando los otros dos valores por definir en los capítulos de frames. _SELF es el valor predeterminado para el atributo TARGET. Sirve para que el vínculo se cargue en la misma ventana del navegador en que la cual esta la página que hace la referencia al vínculo. En si es redundante utilizar el atributo TARGET con el valor _SELF cuando estamos en una página sin frames. Por otra parte, el valor _BLANK resulta muy útil cuando deseamos cargar el vínculo en una ventana nueva del navegador. Procedimiento para que un hipervínculo abra en una ventana nueva: 1. Abra el bloc de notas 2. Cree una página Web con las siguientes etiquetas <html> <head> </head> <body text="#0000FF" bgcolor="#99CCFF"> <h1>ITCA-FEPADE</h1> <h2>Visitar página del ITCA</h2> <h3><a target="_blank" href="informacion.htm">Información</a></h3> </body> </html>Guarde su página Web y visualícela en el navegador.

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática

Hipervínculos a un email Sólo hay que agregar la partícula "mailto:" en el contenido del atributo HREF. Si queremos vincular la dirección jmcortez@latinmail.com. Seria de la siguiente forma: Procedimiento para crear un hipervínculo a nuestro correo electrónico 1. Abra el bloc de notas y digite el siguiente código fuente <html> <head> <title>vinculo a mi correo</title> </head> <body> <h1>ITCA-FEPADE</h1> <h2>Centro de Capacitación <br> en Computación</h2> Cualquier duda <A HREF=mailto:jmcortez@latinmail.com> mandame un email </A> </body> </html> 2. Guarde su página con el nombre de correo.html y visualícela en el navegador

Ejercicio: Hipervínculos 1. Abra el bloc de notas 2. Escriba el siguiente código fuente: <html> <head> <title>Enlaces</title> </head>

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática <body> <h2>Enlaces combinados con imágenes</h2> <a href="pagina1.htm"> <img src="5.gif" width="200" title="este enlace es hacia la página 1, presiona atras para volver"> </a> <br><p> <a href="pagina2.htm"> <img src="6.gif" width="200" title="este enlace es hacia la página 2, presiona atras para volver"> </a> <br><p> <a href="pagina4.htm"> <img src="7.gif" width="200" border="0" title="este enlace es hacia la página 2, además no muestra ningún borde presiona atrás para volver"> </a> <hr> <h2>Enlaces con las mismas imagenes</h2> <a href="8.gif"><img src="8.gif" width="100" alt="Pulsa aquí para ver la imagen en su tamaño original"></a> <br><p> <a href="9.gif"><img src="9.gif" width="100" alt="Pulsa aquí para ver la imagen en su tamaño original"></a> <br><p> <a href="10.gif"><img src="10.gif" width="100" alt="Pulsa aquí para ver la imagen en su tamaño original"></a> <hr> <h2>Enlaces a través de texto con imágenes</h2> <a href="11.gif" title="Presiona atrás para regresar">Imagen de Contenido</a> <br><p> <a href="12.gif" title="Presiona atrás para regresar">Imagen de Índice</a> <br><p> <a href="13.gif" title="Presiona atrás para regresar">Imagen de Documentación</a> <hr> <h2>Enlace de correo con una imagen</h2> <a href="mailto:jmcortez@yahoo.com"> <img src="14.gif" title="envía un e-mail" width="80" height="27"></a> </body> </html> 3. Cree una carpeta con el nombre de “Prácticas de HTML Avanzado” ya sea en el escritorio o en su disco 3½ A: 4. Guarde su documento con el siguiente nombre “enlaces.html” en la carpeta que acaba de crear Vaya a la carpeta que creo y seleccione el archivo enlaces.html 5. Déle 2 clics para abrir y visualizar su nueva página Web.

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática TABLAS Objetivo: Que al finalizar el tema el participante este en la capacidad de Crear tablas con html Introducción Muchas veces resulta práctico ordenar cierta información dentro de celdas que pueden ser localizadas por medio del número de columna y renglón en que se encuentra. La siguiente imagen muestra una tabla con varios atributos aplicados con html

Las tablas nos permitirán dar un mejor formato a nuestro sitio. La mayoría de los sitios comerciales utilizan tablas para disponer de cierta forma la información de forma rápida. A pesar de las ventajas que nos brindan las tablas para obtener resultados al momento de dar formato a un documento, esto no significa que sea la opción más sencilla.

Ejemplo de una tabla sencilla. 5 líneas, 5 columnas

Etiqueta <table> La etiqueta <TABLE> nos permite crear una tabla. Todo lo que este dentro de estas etiquetas será considerado como parte de la tabla. La etiqueta de cierre es </TABLE>. Los posibles atributos de la etiqueta <TABLE> son: a) ALIGN: Permite especificar la posición de la tabla respecto al documento. Los posibles valores de este atributo son LEFT (izquierda), CENTER (centro) y RIGHT (derecha). b) BGCOLOR: Simple. Da un color de fondo a la tabla c) BORDER: Especifica el tamaño del borde de la tabla, se mide en píxeles. d) BORDERCOLOR: Asigna un color al borde. e) CELLSPACING: Especifica la cantidad de espacio entre celdas.

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática

Ejemplo con CELLSPACING = 10

f) CELLPADDING Especifica la cantidad de espacio entre el borde de una celda y su contenido Renglón 1 Columna 1 Renglón 2 Columna 1 Renglón 3 Columna 1

Renglón 1 Columna Renglón 1 Columna 2 3 Renglón 2 Columna Renglón 2 Columna 2 3 Renglón 3 Columna Renglón 3 Columna 2 3 Ejemplo con CELLSPADDING = 1

Renglón 1 Columna 1

Renglón 1 Columna 2

Renglón 1 Columna 3

Renglón 2 Columna 1

Renglón 2 Columna 2

Renglón 2 Columna 3

Renglón 3 Columna 1

Renglón 3 Columna 2

Renglón 3 Columna 3

Ejemplo con CELLSPADDING = 10

g) WIDTH: Permite especificar el ancho de una tabla respecto al documento. El ancho puede ser en píxeles o en porcentaje. Dicho porcentaje se refiere a la ventana del navegador. Esta última forma es la recomendada para evitar que el visitante tenga que desplazarse horizontalmente. Etiquetas <tr> y <td> Una vez que se formo el cascaron de la tabla comenzaremos a crear nuestras celdas. Para esto utilizaremos las etiquetas <TR> y <TD>. En ambos casos la etiqueta de cierre es opcional. Procedimiento para crear una tabla básica con html: 1. La etiqueta <TR> nos permite crear los distintos renglones de nuestra tabla. Por ejemplo, una tabla de 5 renglones podría escribirse así: 2. Digite el siguiente código fuente en el bloc de notas <TABLE BORDER="2"> <TR><TD>Renglón 1 <TR><TD>Renglón 2 <TR><TD>Renglón 3

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática <TR><TD>Renglón 4 <TR><TD>Renglón 5 </TABLE> 1. Guarde su página con el nombre de tabla1.html y visualícela en el navegador

Así generamos una tabla de 5 renglones y una columna. Los atributos para la etiqueta <TR> son: a) BGCOLOR Especifica el color de fondo de todo el renglón.

Procedimiento para especificar el fondo de todo un renglón 1. Digite el código fuente básico para crear una página Web y a continuación digite las siguientes etiquetas en el bloc de notas <TABLE BORDER="2"> <TR BGCOLOR="#6666FF"><TD>Renglón 1 <TR><TD>Renglón 2 <TR><TD>Renglón 3 <TR><TD>Renglón 4 <TR><TD>Renglón 5 </TABLE> 2. Guárdelo con el nombre de tablas2.html y visualice la página Web en el navegador Renglón 1 Renglón 2 Renglón 3 Renglón 4 Renglón 5 b) ALIGN Alinea el texto dentro de una celda. Los valores son LEFT (izquierda), CENTER (centro) y RIGHT (derecha).

Procedimiento para especificar la alineación del texto dentro de una celda 1. Digite el código fuente básico para crear una página Web y a continuación digite las siguientes etiquetas en el bloc de notas <TABLE BORDER="2"> <TR><TD>Esta es la columna 1 <TR ALIGN="LEFT"><TD>LEFT <TR ALIGN="CENTER"><TD>CENTER <TR ALIGN="RIGHT"><TD>RIGHT </TABLE>

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitaciรณn en Tecnologรญa Informรกtica

2. Guรกrdelo con el nombre de tablas3.html y visualice la pรกgina Web en el navegador Los atributos para la etiqueta <TD> son:

a) BGCOLOR Especรญfica el color de fondo de la celda.

Procedimiento para especificar el fondo de una celda 1. Digite el cรณdigo fuente bรกsico para crear una pรกgina Web y a continuaciรณn digite las siguientes etiquetas en el bloc de notas <TABLE BORDER="2"> <TR BGCOLOR="#FF0000"><TD>Renglรณn 1 <TR><TD BGCOLOR="#0000FF">Renglรณn 2 <TR><TD>Renglรณn 3 <TR><TD>Renglรณn 4 <TR><TD>Renglรณn 5 </TABLE> 2. Guรกrdelo con el nombre de tablas4.html y visualice la pรกgina Web en el navegador Renglรณn 1 Renglรณn 2 Renglรณn 3 Renglรณn 4 Renglรณn 5 b) ALIGN Similar a la anterior definiciรณn de ALIGN.

c) COLSPAN Indica la cantidad de celdas adyacentes a la derecha que se combinaran como una sola. Procedimiento para especificar columna expandida en una tabla 1. Digite el cรณdigo fuente bรกsico para crear una pรกgina Web y a continuaciรณn digite las siguientes etiquetas en el bloc de notas <TABLE BORDER="2"> <TR><TD> 1 <TD> 2 <TR><TD> 3 <TD> 4 <TR><TD COLSPAN="2"> Ejemplo de COLSPAN <TR><TD> 5 <TD> 6 <TR><TD> 7 <TD> 8

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática </TABLE> 2. Guárdelo con el nombre de tablas5.html y visualice la página Web en el navegador 1

Ejemplo de COLSPAN 5

d) ROWSPAN Indica la cantidad de celdas adyacentes y abajo que se combinaran como una sola.

Procedimiento para especificar una fila expandida 1. Digite el código fuente básico para crear una página Web y a continuación digite las siguientes etiquetas en el bloc de notas <TABLE BORDER="2"> <TR><TD ROWSPAN ="3"> Ejemplo de ROWSPAN <TD> 1 <TR><TD> 2 <TR><TD> 3 <TR><TD> 4 <TD> 5 <TR><TD> 6 <TD> 7 </TABLE> 2. Guárdelo con el nombre de tablas6.html y visualice la página Web en el navegador 1 Ejemplo de 2 ROWSPAN 3 4

e) WIDTH Especifica la anchura que tendrá la celda con respecto a la tabla. Se puede especificar el tamaño en píxeles y en porcentaje. El último es el recomendado.

Procedimiento para especificar el ancho de celdas 1. Digite el código fuente básico para crear una página Web y a continuación digite las siguientes etiquetas en el bloc de notas <TABLE WIDTH="50%" BORDER="2"> <TR ALIGN="CENTER"><TD WIDTH="15%">15%<TD WIDTH="60%">60%<TD WIDTH="25%">25% <TR ALIGN="CENTER"><TD>1<TD>2<TD>3

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática <TR ALIGN="CENTER"><TD>4<TD>5<TD>6 <TR ALIGN="CENTER"><TD>7<TD>8<TD>9 </TABLE> 2. Guárdelo con el nombre de tablas7.html y visualice la página Web en el navegador 15%

60%

25%

Este ejemplo crea una tabla que ocupa la mitad del espacio disponible de la ventana del navegador. Las columnas son de tamaño 15%, 60% y 25% respectivamente. f) HEIGHT Nos permite especificar la altura de las celdas.

Procedimiento para especificar el alto de celdas 1. Digite el código fuente básico para crear una página Web y a continuación digite las siguientes etiquetas en el bloc de notas <TABLE WIDTH="50%" BORDER="2"> <TR ALIGN="CENTER"><TD HEIGHT="50" WIDTH ="15%">15%<TD WIDTH="60%">60%<TD WIDTH="25%">25% <TR ALIGN="CENTER"><TD>1<TD>2<TD>3 <TR ALIGN="CENTER"><TD>4<TD>5<TD>6 <TR ALIGN="CENTER"><TD>7<TD>8<TD>9 </TABLE>

15%

60%

25%

2. Guárdelo con el nombre de tablas8.html y visualice la página Web en el navegador En este ejemplo las unidades recomendadas son los píxeles, sin embargo debemos de ser precavidos al usar este atributo. g) VALIGN Permite especificar la posición vertical de los contenidos de una celda. Los valores que puede tomar son: TOP (arriba), MIDDLE (en medio), BOTTOM (abajo) y BASELINE.

Procedimiento para especificar la alineación vertical del contenido de celdas

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática 1. Digite el código fuente básico para crear una página Web y a continuación digite las siguientes etiquetas en el bloc de notas <TABLE BORDER="2"> <TR> <TD VALIGN="TOP"> <P>TOP <P>&nbsp; <P>&nbsp; <TD VALIGN="MIDDLE">MIDDLE <TD VALIGN="BOTTOM">BOTTOM </TABLE> 2. Guárdelo con el nombre de tablas9.html y visualice la página Web en el navegador TOP MIDDLE BOTTOM Etiquetas <th> y <caption> La etiqueta <TH> nos permitirá exhibir texto como un titulo para la columna. Esta etiqueta muestra el texto contenido dentro de ella en negritas y centrado. Los atributos de esta etiqueta son los mismos que los de <TD>.

Procedimiento para especificar encabezados en tablas 1. Digite el código fuente básico para crear una página Web y a continuación digite las siguientes etiquetas en el bloc de notas <TABLE BORDER="1"> <TR><TD ALIGN="CENTER">-<TH>Columna 1<TH>Columna 2<TH>Columna 3 <TR ALIGN="CENTER"><TD>Renglón 1<TD>1, 1<TD>1, 2<TD>1, 3 <TR ALIGN="CENTER"><TD>Renglón 2<TD>2, 1<TD>2, 2<TD>2, 3 <TR ALIGN="CENTER"><TD>Renglón 3<TD>3, 1<TD>3, 2<TD>3, 3 </TABLE> 2. Guárdelo con el nombre de tablas10.html y visualice la página Web en el navegador Columna 1 Columna 2 Columna 3

Renglón 1

1, 1

1, 2

1, 3

Renglón 2

2, 1

2, 2

2, 3

Renglón 3

3, 1

3, 2

3, 3

La etiqueta <CAPTION> nos permite escribir una pequeña descripción o titulo para la tabla. La etiqueta de cierre es </CAPTION> y es necesaria. Esta etiqueta debe estar siempre después de la etiqueta <TABLE> para que surta efecto. Procedimiento para especificar una descripción de la tabla 1. Digite el código fuente básico para crear una página Web y a continuación digite las siguientes etiquetas en el bloc de notas <TABLE BORDER="1"> <CAPTION ALIGN="BOTTOM">Ejemplo de &lt;TH&gt; y &lt;CAPTION&gt; </CAPTION> <TR><TD ALIGN="CENTER">-<TH>Columna 1<TH>Columna 2<TH>Columna 3

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática <TR ALIGN="CENTER"><TD>Renglón 1<TD>1, 1<TD>1, 2<TD>1, 3 <TR ALIGN="CENTER"><TD>Renglón 2<TD>2, 1<TD>2, 2<TD>2, 3 <TR ALIGN="CENTER"><TD>Renglón 3<TD>3, 1<TD>3, 2<TD>3, 3 </TABLE> 2. Guárdelo con el nombre de tablas11.html y visualice la página Web en el navegador Columna 1 Columna 2 Columna 3

Renglón 1

1, 1

1, 2

1, 3

Renglón 2

2, 1

2, 2

2, 3

Renglón 3

3, 1

3, 2

3, 3

Ejemplo de <TH> y <CAPTION> El atributo ALIGN de esta etiqueta permite especificar la posición de la descripción o titulo. Los posibles valores pueden ser TOP (arriba), BOTTOM (abajo), LEFT (izquierda) y RIGHT (Derecha). Ejercicio: Cursos de Computación del ITCA 1. Abra el bloc de notas 2. Escriba el siguiente código fuente: <html> <head> </head> <body text="#0000FF"> <h3 align="center"><font color="#800000">CENTRO DE CAPACITACIÓN EN COMPUTACIÓN</font></h3> <table border="6" cellspacing="1" bordercolor="#00FFFF" width="100%"> <tr> <td width="100%" colspan="3" bgcolor="#C0C0C0"> <h2 align="center"><font color="#800000">CURSOS CREACIÓN PAGINAS WEB</font></h2> </td> </tr> <tr> <td width="33%" align="center" bgcolor=”#66FFCC"> <p align="center"><font color="#800000">Html básico</font> </td> <td width="33%" align="center" bgcolor=”#FFCC99"> <font color="#800000">Html avanzado</font></div> </td> <td width="34%" align="center" bgcolor=”#FFFF99"> <font color="#800000">FrontPage</font></div> </td> </tr> <tr> <td width="33%" align="center" bgcolor=”#99CCFF"> <font color="#800000">Herramientas Web</font></div> </td> <td width="33%" align="center" bgcolor=”#CCCCFF"> <font color="#800000">Flash</font></div> </td> <td width="34%" align="center" bgcolor=”#99FF99"> <font color="#800000">Java</font></div> </td> </tr> </table>

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática </body> </html> 1. Guarde su documento con el siguiente nombre “cursos.html” en la carpeta Prácticas de HTML Avanzado 2. Abra la carpeta y seleccione el archivo cursos.html 3. Déle dos clic para abrir y visualizar su nueva página Web.

MAPAS O ZONAS ACTIVAS Objetivo: Que al finalizar el tema el participante este en la capacidad de Crear zonas activas con html

Introducción Si nosotros deseamos crear varios hipervínculos en una sola imagen debemos crear un mapa. Un mapa es una imagen con varias zonas activas que nos servirán como hipervínculos a otros documentos. La siguiente imagen es una demostración de un mapa geográfico con zonas activas.

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática

Existen dos tipos de mapas: los mapas del lado del servidor y los mapas del lado del cliente. a) Mapas del lado del servidor: Estos mapas requieren para su funcionamiento un script de CGI (Common Gateway Interface). Cuando el usuario hace clic en el mapa, el script manda las coordenadas al servidor. Estas coordenadas están vinculadas con un documento. b) Mapas del lado del cliente: Estos mapas, a diferencia de los anteriores, no necesitan scripts para su funcionamiento pues la definición del mapa se incluye en el código HTML. Cuando el usuario hace clic en el mapa, la maquina del usuario calcula las coordenadas en donde se hizo clic y manda al usuario al documento solicitado. La etiqueta <MAP> es la responsable de crear un mapa del lado del cliente.

Etiqueta <map> Como dijimos antes, la etiqueta <MAP> definirá varias zonas activas como vínculos en una sola imagen. Su etiqueta de cierre es </MAP>. Los atributos de esta etiqueta pueden ser: a) NAME: Nombra al mapa para poder ser utilizado con una imagen. Este atributo no puede ser omitido.<MAP NAME="MAPA1">

Imágenes como mapas Una vez que hemos definido el mapa que utilizaremos con una imagen debemos de utilizar el atributo USEMAP de la etiqueta <IMG> para que dicha imagen sea un mapa. Sintaxis: <IMG SRC="IMAGEN.JPG" USEMAP="#MAPA1"> El valor del atributo USEMAP es el mismo valor que dimos al mapa con el atributo NAME de la etiqueta <MAP>. No olvidemos poner el símbolo # antes del nombre del mapa a utilizar.

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática

Etiqueta <area> La etiqueta <AREA> definirá cada una de las zonas activas en un mapa. Esta etiqueta estará siempre dentro de la etiqueta <MAP>. <MAP NAME="MAPA1"> <AREA SHAPE="..." COORDS="..." HREF="..."> </MAP> Los atributos de esta etiqueta son: a) SHAPE: Permite especificar el tipo de región. Las regiones pueden ser rectangulares, circulares y poligonales. Los valores de este atributo son: RECT, CIRCLE y POLYGON. b) COORDS: Define el valor de las coordenadas para las regiones activas, es decir los puntos que nos permitirán delimitar una región. Regiones rectangulares Para que una zona activa tenga forma rectangular debemos utilizar el atributo SHAPE de la etiqueta <AREA> con el valor RECT. Para indicar las coordenadas de esta zona debemos de utilizar las coordenadas XY de la esquina superior izquierda y las coordenadas XY de la esquina inferior derecha. Para indicar las coordenadas utilizamos el atributo COORDS de la etiqueta <AREA> Sintaxis: <AREA SHAPE="RECT" COORDS="X1, Y1, X2, Y2"> Las coordenadas se separan con comas y corresponden a la esquina superior izquierda (X1, Y1) e inferior derecha (X2, Y2) respectivamente.

Regiones circulares Para que una zona activa tenga forma circular debemos utilizar el atributo SHAPE de la etiqueta <AREA> con el valor CIRCLE. Para indicar las coordenadas de esta zona debemos de utilizar las coordenadas XY del centro y el valor del radio R. Para indicar las coordenadas utilizamos el atributo COORDS de la etiqueta <AREA>. Sintaxis: <AREA SHAPE="CIRCLE" COORDS="X, Y, R"> Las coordenadas se separan con comas. Los dos primeros valores corresponden al centro del circulo (X, Y) y R corresponde a la longitud del radio del circulo. Este debe ser el orden para escribirlas. Regiones poligonales Para que una zona activa tenga forma poligonal debemos utilizar el atributo SHAPE de la etiqueta <AREA> con el valor POLYGON. Para indicar las coordenadas de esta zona debemos de utilizar las coordenadas XY de cada ángulo en el polígono. Para indicar las coordenadas utilizamos el atributo COORDS de la etiqueta <AREA>. Sintaxis: <AREA SHAPE="POLY" COORDS="X1, Y1, X2, Y2, X3, Y3">

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática Las coordenadas se separan con comas. Para evitar errores debemos escribir las coordenadas de ángulos sucesivos. c) REF.: Para que cada zona activa en el mapa sea un vínculo, debemos utilizar el atributo HREF de la etiqueta <AREA> tal y como se vio con la etiqueta <A>. Sintaxis: <AREA SHAPE="..." COORDS="..." HREF="INDEX.HTML" TARGET="_blank"> d) ALT: Para que cada zona activa en el mapa presente un texto alternativo, debemos utilizar el atributo ALT de la etiqueta <AREA> tal y como se vio con la etiqueta <IMG>. Sintaxis: <AREA SHAPE="..." COORDS="..." HREF="..." TARGET="..." ALT="Texto alternativo"> Ejercicio: Mapas con html 1. Cree una imagen similar a la que se ve en la zona inferior donde están el rectángulo, el círculo y el triángulo en MS-Paint o cualquier programa de dibujo. 2. Guárdelo en la carpeta de Prácticas de HTML Avanzado con el nombre de “mapa1.gif” (deberá de cambiar el tipo de archivo para lograr que se convierta en tipo gif) 3. Este es un mapa que nos permite navegar en tres páginas Web. La imagen es realmente simple pero basta como ejemplo.

ITCA

CCC

FEPADE

4. Abra el bloc de notas 5. Cree tres páginas con los siguientes nombres “seccion-1.htm”, “seccion-2.htm”, “seccion3.htm” 6. Introduzca en cada una de ellas distinta información así como imágenes al gusto 7. Ahora creara la página del mapa: 8. Cree el siguiente código (deberá de sustituir las coordenadas con símbolo de número por los números encontrados en el programa Microsoft Photo Editor referentes a la imagen “mapa1.gif”) <HTML> <HEAD> <TITLE>Ejemplo de Mapas</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <DIV align="center"> <IMG src="mapa1.gif" usemap="#indice" border="0"> <MAP name="indice">

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática <AREA shape="rect" coords="#,#,#,#" href="seccion-1.htm" alt="sección-1"> <AREA shape="circle" coords="#,#,#" href="seccion-2.htm" alt="Sección-2"> <AREA shape="poly" coords="#,#,#,#,#,#,#,#,#,#" href="seccion-3.htm" alt="Sección-3 (Nueva Ventana)" target="_blank"> </MAP> </DIV> </BODY> </HTML> 9. Guarde su página Web con el nombre de “mapas.htm” 10. Abra la carpeta “Prácticas de HTML Avanzado” 11. Abra la página Web “mapas.htm”

FORMULARIOS Objetivo: Que al finalizar el tema el participante este en la capacidad de crear formularios con html ETIQUETA <FORM> La etiqueta <FORM> definirá un formulario con los diversos elementos que puede contener. De estos elementos se hablara mas tarde. La etiqueta de cierre es </FORM>. Los atributos posibles en la etiqueta <FORM> son: a) ACTION: Específica la acción a tomar después de que el usuario ha apretado el botón "enviar" de un formulario. En nuestro caso, la acción a tomar será enviar la información vía correo electrónico a la dirección de correo electrónico especificada, para esto utilizamos el valor MAILTO: <FORM ACTION="MAILTO:jmcortez@latinmail.com "> b) METHOD: Específica la forma en que se enviarán los datos del formulario: <FORM ACTION="MAILTO:jmcortezn@latinmail.com" METHOD="POST"> c) ENCTYPE: Especifica el formato que tendrán los datos del formulario cuando se utiliza el valor POST: <FORM ACTION=" MAILTO:alguien@algunlugar.com " METHOD="POST" ENCTYPE="TEXT/PLAIN"> Es decir, texto sin formato. ETIQUETA <INPUT> La etiqueta <INPUT> nos permitirá crear cada uno de los elementos que queramos utilizar dentro de un formulario. Por el momento solo veremos los atributos de esta etiqueta. La siguiente imagen es un ejemplo de cuadro de texto

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática

Los atributos pueden ser: a) TYPE: Define el tipo de elemento que se puede utilizar. Los valores para este atributo pueden ser: CHECKBOX, PASSWORD, RADIO, RESET, SUBMIT y TEXT los cuales se verán más adelante. <INPUT TYPE="TEXT"> <INPUT TYPE="PASSWORD"> <INPUT TYPE="RADIO"> <INPUT TYPE="CHECKBOX"> <INPUT TYPE="RESET"> <INPUT TYPE="SUBMIT"> b) NAME: Da un nombre específico a cada elemento del formulario. Al enviar el formulario nosotros recibiremos los datos organizados de la forma NAME = VALUE. El nombre para cada elemento debe ser único y descriptivo: <INPUT TYPE="..." NAME="nombre"> c) VALUE Permite mostrar un valor predeterminado en el elemento de formulario: <INPUT TYPE="..." NAME="..." VALUE="valor">

Campos de texto Los campos de texto son rectángulos en donde el usuario puede escribir una cadena corta de texto. Los campos de texto se crean con el valor TEXT para el atributo TYPE de la etiqueta <INPUT>: <INPUT TYPE="TEXT" NAME="..." VALUE="..."> Ejemplo de un campo de texto. Otros atributos que pueden ser utilizados para crear campos de texto son: a) MAXLENGTH: Define la cantidad de caracteres que pueden ser introducidos en el campo de texto: <INPUT TYPE="TEXT" MAXLENGTH="5">

En este campo solo se pueden introducir 5 caracteres. b) SIZE: Define el tamaño horizontal del campo de texto: <INPUT TYPE="TEXT" SIZE="5">

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática

Campo de tamaño 5. c) VALUE: Este atributo permite mostrar un texto predeterminado por nosotros en el campo de texto: <INPUT TYPE="TEXT" VALUE="ITCA"> ITCA

Campo de texto con un valor predeterminado.

Campos de contraseña Al igual que los campos de texto, los campos de contraseña son rectángulos en donde el usuario puede escribir una cadena corta de texto; la única diferencia es que el texto en este campo es reemplazado por asteriscos. <INPUT TYPE="PASSWORD" NAME="..." VALUE="..."> Ejemplo de campo de contraseña. Otros atributos que pueden ser utilizados para crear campos de contraseña son: a) MAXLENGTH: Define la cantidad de caracteres que pueden ser introducidos en el campo de contraseña. <INPUT TYPE="TEXT" MAXLENGTH="5">

En este campo solo se pueden introducir 5 caracteres. b) SIZE: Define el tamaño horizontal del campo de contraseña. <INPUT TYPE="TEXT" SIZE="5">

Campo de tamaño 5. c) VALUE:Este atributo permite mostrar una contraseña predeterminada por nosotros en el campo de contraseña. <INPUT TYPE="TEXT" VALUE="ITCA FEPADE"> *****

Campo de contraseña con valor predeterminado.

Áreas de texto Si nosotros necesitamos que el visitante nos mande una cadena de texto algo extensa necesitaremos utilizar la etiqueta <TEXTAREA>. Esta etiqueta nos permitirá crear un cuadro de texto con barras de desplazamiento. Esta etiqueta también se incluye dentro de la etiqueta <FORM>. La etiqueta de cierre es </TEXTAREA>.

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática <TEXTAREA ROWS="..." COLS="..." NAME="..."> </TEXTAREA>

Los atributos posibles en la etiqueta <TEXTAREA> son: a) ROWS Define la altura del área de texto. Este atributo no se debe olvidar. <TEXTAREA ROWS="15">

b) COLS Define el ancho del área de texto. Este atributo no se debe olvidar. <TEXTAREA COLS="20">

c) NAME Nombra al área de texto. <TEXTAREA NAME="area de texto"> d) READONLY Nos permite crear un área de texto de solo lectura, es decir, algún texto dentro de ella no podrá ser modificado por el usuario. Ejemplo: <TEXTAREA name="sololectura" rows="10" cols="40" readonly> Para saber computación sólo en el ITCA </TEXTAREA> Resultado:

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática

Casillas de verificación Una casilla de verificación es un pequeño cuadrado que puede ser seleccionado. Se crea con el valor CHECKBOX del atributo TYPE en la etiqueta <INPUT>.

<INPUT TYPE="CHECKBOX" NAME="..." VALUE="..."> Ejemplo de una casilla de verificación Otros atributos que pueden ser utilizados para crear casillas de verificación son: a) CHECKED Muestra la casilla de verificación como marcada. <INPUT TYPE="CHECKBOX" CHECKED> Casilla de verificación marcada Botones de opción Un botón de opción permite crear un pequeño círculo que puede o no estar seleccionado. Para el correcto funcionamiento de este tipo de campos, se deben tener por lo menos dos botones de opción que tendrán el mismo nombre.

Ejemplo de botones de Opción.

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática

Otros atributos que pueden ser utilizados para crear botones de opción son: a) CHECKED Muestra el botón de opción como marcado. <INPUT TYPE="RADIO" CHECKED> El botón de en medio está seleccionado. Menús Para crear un menú desplegable que permita escoger una o varias opciones necesitaremos dos etiquetas; la etiqueta <SELECT> y la etiqueta <OPTION>.

La etiqueta <SELECT> define un menú desplegable. Su etiqueta de cierre es </SELECT> Los atributos posibles en la etiqueta <SELECT> son: a) NAME Nombra al menú. <SELECT NAME="nombre del menú"> b) SIZE Determina la cantidad de opciones que aparecen desplegadas. El valor predeterminado es 1. Este atributo es útil cuando trabajamos con menús en donde se pueden hacer varias selecciones. <SELECT SIZE="2"> c) MULTIPLE Permite crear menús en donde se pueden hacer varias selecciones a la vez. La mayoría de la gente no sabe que en este tipo de menús se puede seleccionar más de una opción, así que su uso no es muy recomendable. <SELECT MULTIPLE> Por otra parte, la etiqueta <OPTION> define a cada uno de los elementos que aparecerán en el menú desplegable.

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática <SELECT NAME="..."> <OPTION VALUE="...">Opción 1 <OPTION VALUE="...">Opción 2 <OPTION VALUE="...">Opción 3 </SELECT> Los atributos posibles en la etiqueta <OPTION> son: a) SELECTED El elemento se mostrará seleccionado <OPTION SELECTED>Opción 1 b) VALUE Define el valor que se recibirá de la forma NAME = VALUE. NAME estará dado por el nombre que hayamos dado al menú en la etiqueta <SELECT>. <OPTION VALUE="uno">Opción 1

Las distintas selecciones se pueden hacer apretando la tecla CTRL. Botones Existen dos tipos de botones básicos que al ser presionados generarán una acción predeterminada.

a) Botón enviar Este botón procesara el formulario de la forma que hayamos especificado en la etiqueta <FORM> con el atributo ACTION. Se crea con el valor SUBMIT del atributo TYPE en la etiqueta <INPUT>. En este campo solo necesitará el atributo VALUE para rotular el botón. <INPUT TYPE="SUBMIT" VALUE="Enviar datos"> Enviar

b) Botón limpiar Este botón limpiará todos los datos en un formulario. Se crea con el valor RESET del atributo TYPE en la etiqueta <INPUT>. En este campo solo necesitará el atributo VALUE para rotular el botón. <INPUT TYPE="RESET" VALUE="Limpiar forma"> Restablecer

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática

Ejercicio: Formulario Personal 1. Abra el bloc de notas 2. Observe el formulario que tiene mas abajo 3. Digite el código subministrado DATOS PERSONALES Nombre Apellido Correo Contraseña ¿Que te parece el tutorial?

Excelente

Mas o Menos

Pésimo

Sección 1 ¿De estas secciones cual o cuales te gustaron mas?

Seccion2 Sección 3

Continente: Enviar

Restablecer

<HTML> <HEAD> <TITLE>FORMULARIO</TITLE> </HEAD> <BODY> <CENTER> <FORM ACTION="MAILTO:jmcortez@hotmail.com" METHOD= "post" ENCTYPE="text/plain"> <TABLE width="50%" border="1"> <TR> <TD>Nombre</TD> <TD><INPUT type="text" name="nombre" size="25" maxlength="50"></TD> </TR> <TR> <TD>Apellido</TD> <TD><INPUT type="text" name="apellido" size= "25" maxlength="50"></TD> </TR> <TR> <TD>Correo</TD> <TD><INPUT type="text" name="correo" size="30" maxlength="100"></TD> </TR> <TR> <TD>Contraseña</TD> <TD><INPUT type="password" name="contraseña" size="8" maxlength="8"></TD> </TR> <TR> <TD> ¿Que te parece el tutorial?</TD> <TD><INPUT type="radio" name="opinion" value="excelente" checked>Excelente

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática <INPUT type="radio" name="opinion" value="masomenos">Mas o Menos <INPUT type="radio" name="opinion" value="pesimo">Pesimo</TD> </TR> <TR> <TD>¿De estas secciones cual o cuales te gustaron mas?</TD> <TD><P><INPUT type="checkbox" name="seccion1" value="si">Seccion 1</P> <P><INPUT type="checkbox" name="seccion2" value="si">Seccion2</P> <P><INPUT type="checkbox" name="seccion3" value="si">Seccion 3</P></TD> </TR> <TR> <TD>Continente:</TD> <TD><SELECT name="continente"> <OPTION value="america">America</OPTION> <OPTION value="europa">Europa</OPTION> <OPTION value="africa">Africa</OPTION> <OPTION value="asia">Asia</OPTION> <OPTION value="oceania">Oceania</OPTION> </SELECT></TD> </TR> </TABLE> <P><INPUT type="submit" name="enviar" value="Enviar"> <INPUT type="reset" name="borrar" value="Borrar"> </FORM> </CENTER> </BODY> </HTML> 4. Guarde su formulario y visualícelo en el navegador 5. Para que funcione correctamente deberá de publicarlo en un servidor Web en Internet

MARCOS O FRAMES Objetivo: Que al finalizar el tema el participante este en la capacidad de Crear marcos o frames con html Introducción a los frames Frame significa marco y la creación de frames es una de las características más notables del HTML. El uso de frames permite tener en una sola ventana varios documentos HTML abiertos, cada uno de ellos con sus propias características. a) Documento "Maestro": Es en el que se definirán cada una de las separaciones de la ventana del navegador. El documento maestro no tiene etiqueta <BODY> pues se remplaza con la etiqueta <FRAMESET>

b) Documentos de los frames: Dependiendo de la cantidad de frames que hayamos creado, deberemos crear igual numero de documentos. Estos documentos aparecerán en cada una de las separaciones creadas. Ejemplo:

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática

En la imagen el documento maestro especifica las separaciones que contendrán a los documentos de los frames: A, B, C, D y E. Una consideración final: el vincular documentos desde los frames puede resultar catastrófico si no utilizamos el atributo TARGET de la etiqueta <A>. Se hablara de esto mas adelante. Etiqueta <frameset> En esta sección hablaremos de cómo crear el documento maestro. La etiqueta <FRAMESET> es básica para la creación de páginas con frames. La etiqueta <FRAMESET> sustituirá a la etiqueta <BODY> en el documento de definición de frames o documento maestro. Como se vio anteriormente este documento maestro solo contiene la información necesaria para dividir la ventana del navegador en frames y no el contenido de tales. La etiqueta de cierre es </FRAMESET>. Los atributos de esta etiqueta son: a) COLS Nos permite crear divisiones rectangulares en forma de columna. Ejemplo: <FRAMESET COLS="25%, 25%, 25%, 25%"> Resultado:

b) ROWS Nos permite crear divisiones rectangulares en forma de renglón Ejemplo: <FRAMESET ROWS="25%, 25%, 25%, 25%"> Resultado:

c) BORDER Este atributo específica el tamaño del borde que divide los distintos documentos en píxeles, por lo tanto, si deseamos quitar el borde debemos dar a este atributo el valor cero. Ejemplo: <FRAMESET ROWS="25%, 25%, 25%, 25%" BORDER="0"> d) BORDERCOLOR

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática Nos permite especificar el color que tendrán los bordes. Ejemplo: <FRAMESET ROWS="25%, 25%, 25%, 25%" BORDERCOLOR="#FF6600">

Al ver los atributos COLS y ROWS, especificamos los tamaños de los frames en porcentaje, sin embargo existen otras dos formas: e) DIMENSIONES ABSOLUTAS Consiste en poner el valor en píxeles que tendrá la ventana. Ejemplo: <FRAMESET COLS="300,300"> Divide la ventana en dos columnas de 300 píxeles de ancho cada una.

<FRAMESET ROWS="200,200"> Divide la ventana en dos renglones de 200 píxeles de alto cada uno.

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática

f) DIMENSIONES RELATIVAS Semejantes a las dimensiones por porcentaje Ejemplo: <FRAMESET COLS="4*,6*"> Divide la ventana en dos columnas de 40 y 60% respectivamente.

<FRAMESET ROWS="4*,6*"> Divide la ventana en dos renglones de 25% y 75% respectivamente.

También es posible combinar los distintos tipos de dimensiones:

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática <FRAMESET COLS=”200,*”> Divide la ventana en dos columnas; una con 200 píxeles de ancho y la otra con el espacio restante.

<FRAMESET ROWS="50,*"> Divide la ventana en dos renglones; uno con 50 píxeles de alto y el otro con el espacio restante.

<FRAMESET COLS="25%,*"> Divide la ventana en dos columnas; una del 25% de tamaño y la otra con el espacio restante.

<FRAMESET ROWS="35%,*"> Divide la ventana en dos renglones; uno del 35% de tamaño y el otro con el espacio restante.

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática

Hasta ahora hemos visto como dividir la pantalla, veremos como rellenar esos espacios con documentos HTML pero antes veremos como anidar frames.

Etiqueta <frame> La etiqueta <FRAME> nos permitirá especificar el documento que se encontrará dentro de un frame así como su comportamiento al estar contenido en el. La etiqueta de cierre es </FRAME>. Los atributos de <FRAME> son: a) SRC Especifica el documento que estará dentro del frame. b) NAME Este atributo da un nombre a cada frame: Procedimiento para aplicar un nombre a un frame 1. Abra el bloc de notas y digite el siguiente código fuente <HTML> <HEAD> <TITLE>Frames</TITLE> </HEAD> <FRAMESET COLS="20%, *"> <FRAME SRC="doc1.htm" name="col1"> <FRAME SRC="doc2.htm" name="col2"> </FRAMESET> </HTML> 2. Guarde su página Web como frames.html Tendremos 2 columnas; en la primera tendremos a doc1.htm y en la segunda a doc2.htm.

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática

Si nosotros queremos que al hacer click en doc1.htm nos dirija a doc3.htm, pero con la condición de que este hipervinculo abra en el frame 2 (col2 según el nombre que le dimos) entonces en alguna parte de doc1 deberemos de tener algo similar a esto: <A HREF="doc3.htm" TARGET="col2">... c) SCROLLING Nos permite indicar si se colocaran barras de desplazamiento dentro del frame. Los posibles valores para este atributo son: AUTO (el navegador determina si son necesarias), NO (no las coloca aunque sean necesarias) y YES (las coloca aunque no sean necesarias) <FRAME SRC="doc1.htm" name="col3" SCROLLING="no"> d) NORESIZE Atributo boleano que evita que un frame sea redimensionado por el usuario. <FRAME SRC="doc1.htm" name="col1" NORESIZE> e) FRAMEBORDER Los valores posibles para este atributo son 0 (cero) y 1. El primer valor indica al navegador que no debe de dibujar un borde entre el frame y otro adyacente. El borde se dibujara de todas formas si no tenemos cuidado en usar este atributo con los frames adyacentes. El valor 1 es el valor por default e indica que se dibujara el borde.

Procedimiento para ocultar el borde de un marco 1. Digite el siguiente código fuente <frameset cols="20%,*"> <FRAME SRC="doc1.htm" name="col1" FRAMEBORDER="0" NORESIZE > <FRAME SRC="doc2.htm" name="col2" FRAMEBORDER="0" NORESIZE > 2. Guarde su página con el nombre de bordesno.html

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática

Ejercicio: Marcos en html 1. Crear 6 páginas sobre los siguientes temas: a. manuales.html b. cursos.html c. inscripciones.html d. evaluaciones e. observaciones f. carreras 2. Guardarlos en la una carpeta cuyo nombre será “Prácticas de marcos dobles con HTML Avanzado” 3. Ahora deberá de crear las siguientes páginas Código de la página de frames: <html> <head> <title>Principal</title> </head> <frameset framespacing="0" border="0" frameborder="0" cols="163,*"> <frame name="contenido" target="principal" src="izquierdo.htm" scrolling="auto" noresize> <frame name="principal" src="contenido.htm"> <noframes> <body> <p>Esta página usa marcos, pero su explorador no los admite.</p> </body> </noframes> </frameset> </html> 4. Guarde esta página con el nombre de “index.html” 5. Cree la siguiente página Web Código de la página izquierda: <html> <head> <title>ITCA</title> <base target="principal"> </head>

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática <body text="#FFFFFF" bgcolor="#000000" link="#FFFFFF" vlink="#00FF00" alink="#FFFF00" topmargin="0" leftmargin="0"> <p align="center"><b>ITCA-FEPADE</b></p> <ul> <li><b><a href="manuales.html">Manuales</a></b></li> <li><b><a href="cursos.html">Cursos</a></b></li> <li><b><a href="inscripciones.html">Inscripciones</a></b></li> <li><b><a href="evaluaciones.html">Evaluaciones</a></b></li> <li><b><a href="observaciones.html">Observaciones</a></b></li> <li><b><a href="carreras.html">Carreras</a></b></li> <li><b><a href="contenido.htm">Principal</a></b></li> </ul> </body> </html> 6. Guarde esta página con el nombre de “izquierda.htm” 7. Cree la siguiente página Web Código de la página derecha: <html> <head> <title>Principal</title> <base target="_self"> </head> <body topmargin="0" leftmargin="0"> <h2 align="center">ITCA-FEPADE</h2> <h2 align="center">CENTRO DE CAPACITACIÓN EN COMPUTACIÓN</h2> <h2 align="center">DISEÑO DE PAGINAS WEB CON HTML</h2> </body> </html> 8. Guarde esta página con el nombre de “derecha.htm” 9. Abra la carpeta de “Prácticas de marcos dobles con HTML Avanzado” 10. busque la página “index.html” 11. Ábrala y visualícela en el navegador

ITCA-FEPADE

MANUAL DE HTML

Centro de Capacitación en Tecnología Informática

ITCA-FEPADE

MANUAL DE HTML