Programacion HTML PDF

Programacin HTML
Reservados todos los derechos. El contenido de esta obra est protegido por la ley que establece penas de prisin y/o multas, adems de las correspondientes indemnizaciones por daos y perjuicios, para quienes reprodujeren, plagiaren, distribuyeren o comunicaren pblicamente, en todo o en parte, una obra literaria, artstica o cientfica, o su transformacin, interpretacin o ejecucin artstica fijada en cualquier tipo de soporte o comunicada a travs de cualquier medio, sin la preceptiva autorizacin.
2011 Grupo Euroformac
Pgina 2
Programacin en HTML Manual de consulta

Contenido
TEMA 1: INTRODUCCIN AL HTML ............................................................................. 7 Qu es una Pgina Web? ........................................................................................... 8 Qu es HTML?............................................................................................................ 8 Por qu aprender HTML? ......................................................................................... 9 Base del lenguaje: las etiquetas HTML ...................................................................... 10 Estructura de un documento HTML .......................................................................... 11 Cmo escribir y visualizar documentos HTML .......................................................... 12 Comentarios en HTML ............................................................................................... 13 Recomendaciones antes de empezar........................................................................ 15 TEMA 2: FORMATOS DE PGINA............................................................................... 16 Atributos de la etiqueta <BODY>: fondos ................................................................. 17 Atributos de la etiqueta <BODY> : mrgenes............................................................ 18 Atributos de la etiqueta <BODY>: textos .................................................................. 18 TEMA 3: FORMATOS DE TEXTO ................................................................................. 20 Estilos ........................................................................................................................ 21 Atributos de fuente ................................................................................................... 22 Formato de ttulos ..................................................................................................... 25 Formato de prrafo ................................................................................................... 26 <BLOCKQUOTE> y </BLOCKQUOTE>. ........................................................................ 27
Pgina 3
TEMA 4: IMGENES ................................................................................................... 28 Insertar imgenes ...................................................................................................... 29 JPEG, PNG o BMP. ..................................................................................................... 30 Alineacin de la imagen ............................................................................................ 30 Dimensiones de una imagen ..................................................................................... 31 TEMA 5: HIPERVNCULOS .......................................................................................... 34 Hipervnculos ............................................................................................................. 35 La etiqueta <A>.......................................................................................................... 35 Anclas con nombre .................................................................................................... 36 Enlaces a direcciones de correo y archivos ............................................................... 37 Mapas de imagen ...................................................................................................... 37 TEMA 6: CREACIN DE LISTAS ................................................................................... 39 Listas desordenadas .................................................................................................. 40 Listas ordenadas ........................................................................................................ 41 Listas de definicin .................................................................................................... 42 TEMA7: CREACIN DE TABLAS .................................................................................. 43 Introduccin .............................................................................................................. 44 Estructura de las tablas ............................................................................................. 44 Atributos de las etiquetas ......................................................................................... 44 Cabecera, cuerpo y pie de una tabla ......................................................................... 46 TEMA 8: FRAMES ....................................................................................................... 48 Qu son los frames? ................................................................................................ 49
Pgina 4
El documento de definicin de marcos ..................................................................... 49 Atributos de la etiqueta <FRAME> ............................................................................ 52 El atributo target ....................................................................................................... 53 TEMA 9: FORMULARIOS ............................................................................................ 54 Estructura de un formulario ...................................................................................... 55 Elementos de un formulario...................................................................................... 56 TEMA 10: ELEMENTOS ACCESORIOS ......................................................................... 60 Separadores............................................................................................................... 61 Marquesinas .............................................................................................................. 62 TEMA 11: INTRODUCCIN A DHTML ........................................................................ 64 Introduccin .............................................................................................................. 65 Hojas de estilo en cascada (CSS) ............................................................................... 66 TEMA 12: HOJAS DE ESTILO INTERNAS ..................................................................... 68 Atributo style ............................................................................................................. 69 Etiqueta <SPAN>........................................................................................................ 70 TEMA 13: HOJAS A NIVEL DE DOCUMENTO .............................................................. 72 Estructura de la etiqueta <STYLE>............................................................................. 73 Definicin de estilos en la etiqueta <STYLE> ............................................................. 74 TEMA 14: HOJAS DE ESTILO EXTERNAS ..................................................................... 75 Introduccin .............................................................................................................. 76 Vincular hojas de estilo ............................................................................................. 76 TEMA 15: HERENCIA DE ESTILOS ............................................................................... 78
Pgina 5
Jerarqua de los estilos .............................................................................................. 79 TEMA 16: DISCRIMINACIN DE ESTILOS ................................................................... 81 Estilos en funcin del contexto ................................................................................. 82 Clases ......................................................................................................................... 82 Definicin de clases ................................................................................................... 83 La etiqueta DIV .......................................................................................................... 84 TEMA 17: CAPAS........................................................................................................ 85 Introduccin a las capas ............................................................................................ 86 La etiqueta <DIV> ...................................................................................................... 86 Atributos de la etiqueta <DIV> .................................................................................. 87 TEMA 18: OTRAS UTILIDADES ................................................................................... 89 Aspecto del cursor ..................................................................................................... 90 Barra de desplazamiento........................................................................................... 90 Propiedades de los vnculos ...................................................................................... 91 Elementos tipogrficos .............................................................................................. 92 TEMA 19: ETIQUETAS HTML ...................................................................................... 93 Etiquetas.................................................................................................................... 94 Etiquetas de formato................................................................................................. 94 Etiquetas de Tabla ..................................................................................................... 95 Etiquetas de lista ....................................................................................................... 95 Atributos .................................................................................................................... 96
Pgina 6
Programacin HTML
TEMA 1: INTRODUCCIN AL HTML
Pgina 7
Qu es una Pgina Web?

Una pgina Web es un documento que puede contener texto, imgenes, hipervnculos y elementos multimedia. Las pginas Web son almacenadas en unas mquinas denominadas servidores. Los usuarios pueden visitarlas desde un ordenador con conexin a Internet utilizando un programa cliente denominado Navegador. Esta comunicacin entre los dos ordenadores se realiza gracias al protocolo de comunicaciones http , de ah que las direcciones que se escriben en la Barra de direcciones de un navegador comiencen siempre por http:// .
Esto indica al navegador que lo que se desea visualizar es una pgina Web, ya que ste no es el nico cometido de un navegador. El elemento que permite navegar por Internet es el enlace o hipervnculo, estos son los que convierten el contenido de un documento en hipertexto. Al activar un enlace, es posible visitar una pgina Web almacenada en cualquier lugar del mundo, o simplemente saltar a otra parte de la misma pgina que se est visualizando.
Qu es HTML?
HTML o lenguaje de marcacin de hipertexto es el lenguaje que se utiliza en la construccin de pginas Web. HTML no es un lenguaje de programacin, sino un lenguaje de creacin de hipertexto.
Pgina 8
HTML permite incluir texto, imgenes, vdeos, sonidos e hipervnculos en un p-gina Web. Este lenguaje se basa en un sistema de etiquetas o tags que confieren formato a los elementos incluidos en una pgina Web.
Los documentos confeccionados con este lenguaje, pueden ser visualizados en cualquier ordenador, independientemente del sistema operativo que utilicen. Para visualizarlos, nicamente se debe tener instalado un browser o navegador. Los navegadores ms utilizados son Microsoft Internet Explorer y Netscape Navigator que pueden ser utilizados bajo cualquier sistema operativo.
Por qu aprender HTML?

Existen herramientas de edicin de pginas Web que facilitan enormemente esta tarea, la ms conocida es Macromedia Dreamweaver . Estas herramientas tienen un interfaz de usuario muy sencillo de utilizar y permiten crear pginas Web sin necesidad de tener prcticamente conocimientos de HTML. El motivo por el que resulta necesario aprender este lenguaje es que, en ocasiones, se pueden presentar situaciones que no seas capaz de resolver mediante estas herramientas, pero s modificando el cdigo HTML que generan. Tambin debes conocer HTML si deseas crear pginas Web dinmicas incluyendo en ellas fragmentos de cdigo en otros lenguajes como JavaScript o PHP .
Pgina 9
Base del lenguaje: las etiquetas HTML

El lenguaje HTML est formado por distintas etiquetas que se utilizan para introducir elementos en un documento y darles formato. La mayora de estas etiquetas se componen de dos partes: una etiqueta de inicio y otra de cierre.
NOTA Todas las etiquetas tienen la misma estructura: un smbolo < seguido del nombre de la etiqueta y un smbolo >. Si se trata de una etiqueta de cierre, una barra inclinada (/) seguir al smbolo <.
Las etiquetas que estn formadas por una etiqueta de inicio y otra de cierre, tienen efecto sobre todos los elementos incluidos entre estas dos etiquetas. Por ejemplo, la etiqueta <CENTER>, centra el contenido situado entre su etiqueta de inicio y su etiqueta de cierre. Algunas etiquetas pueden contener atributos, es decir, propiedades que pueden modificar un elemento. Por ejemplo, en la etiqueta <BODY>, es posible incluir los atributos bgcolor y text para indicar respectivamente cules van a ser el color de fondo de la pgina y el color del texto.
No todas las etiquetas poseen atributos ni es obligatorio incluirlos. Si no se incluye ningn atributo, el navegador interpretar que deseas mostrar la Pgina 10
opcin predeterminada para esa etiqueta. As, por ejemplo, si no se define el atributo bgcolor en la etiqueta <BODY> , el navegador interpretar que deseas que el fondo de la pgina sea de color blanco.
Estructura de un documento HTML

Todos los documentos HTML deben comenzar por la etiqueta <HTML> de inicio y terminar con la etiqueta </HTML> de cierre. Encerrado entre estas dos etiquetas, se escribir el contenido de la pgina Web. Tras la etiqueta <HTML> de inicio, se incluye el encabezamiento que se situar entre las etiquetas <HEAD> de inicio y la etiqueta </HEAD> de cierre. Este encabezamiento incluye informacin que no se visualiza en la pgina Web. Tambin suele contener el ttulo del documento que se muestra en la Barra de ttulo del navegador cuando se abre la pgina.
El ttulo del documento se debe escribir entre las etiquetas <TITLE> de inicio y de cierre. Es recomendable aadir un ttulo distinto para cada pgina Web del sitio, ttulo que debe ser breve y descriptivo. Pgina 11
Este ttulo es el que aparecer en el men Favoritos del navegador, si es que el usuario decide aadir nuestra pgina a su lista, tambin ser la referencia que tomarn los buscadores sobre la pgina. Si no se incluye un ttulo, al visualizar la pgina Web, aparecer en la barra de ttulo la frase Untitled document, lo que proporcionar un aspecto descuidado a la pgina. Tras el encabezamiento, es necesario definir el cuerpo del documento, ste estar delimitado por la etiqueta <BODY> de incio y la etiqueta </BODY> de cierre. Dentro del cuerpo se incluyen todos los elementos que se desea que aparezcan en la pgina Web.
Cmo escribir y visualizar documentos HTML

Para crear una pgina Web utilizando HTML , slo se necesita un editor de texto, como el Bloc de notas que ofrece Windows . Con la ayuda de este programa, escribirs el cdigo HTML necesario para crear tus pginas, aunque debes tener en cuenta que los documentos generados se debern almacenar con extensin .htm o .html . Para ello, emplea el comando Archivo >> Guardar como . Aparecer el cuadro de dilogo del mismo nombre donde debers desplegar la lista Tipo y seleccionar la opcin Todos los archivos . En el cuadro Nombre introduce el nombre del archivo con extensin .htm o .html y presiona el botn Guardar . Debes tener la precaucin de no incluir espacios en blanco, smbolos, o vocales acentuadas en el nombre del archivo, ya que esto podra conducir a errores a la hora de intentar cargar las pginas en el navegador. Como ya se ha visto anteriormente, si deseas visualizar las pginas que has creado necesitars cargarlas en un navegador. Simplemente haz doble clic sobre el documento, que al tener ya extensin de pgina Web, adquiere el icono identificativo del navegador. Pgina 12
Si deseas editar este archivo para modificar el cdigo HTML , haz clic sobre l con el botn derecho del ratn y, en el men contextual que se despliega, escoge dentro de Abrir con la opcin Bloc de notas.
A la hora de escribir, es recomendable tabular o sangrar el cdigo, adems de escribir las etiquetas de cierre a la misma altura de su etiqueta de apertura correspondiente. De este modo ser mucho ms sencillo modificar el cdigo o encontrar posibles errores.
Comentarios en HTML
En todo lenguaje de programacin existen smbolos para marcar el inicio y el fin de un comentario. Un comentario es una nota que el programador incluye en el cdigo para researlo o interpretarlo. Se suelen incluir comentarios para especificar por qu se han incluido determinadas lneas de cdigo, incluir sugerencias para futuras modificaciones,o para marcar determinadas porciones de cdigo que ms tarde se quieran reutilizar o modificar. Los comentarios no son interpretados por el navegador, por lo que no afectan al resultado final del documento.
Pgina 13
En HTML los comenarios se encierran entre los smbolos <! , para iniciar el comentario y > , para cerrarlo.
Los colores
En lenguaje HTML los colores se expresan en modo hexadecimal o mediante un nombre. En el modo hexadecimal los colores comienzan con el smbolo # y, a continuacin, seis dgitos que van del 0 al F que representa el nmero 15 en el sistema decimal que conoces. En este sistema se debe expresar la cantidad de cada uno de los tres colores primarios (rojo, verde y azul) que posee el color que se desea definir. En este formato (#FFFFFF) los dos primeros dgitos se refieren a la cantidad de color rojo, por lo que la ausencia de rojo se identifica con el 00 (0 en decimal) y la mxima cantidad de rojo con FF (255 en decimal). Los dos siguientes dgitos se refieren a la cantidad de verde y los dos ltimos a la cantidad de azul. Siguiendo este criterio, el color rojo estara expresado por el nmero hexadecimal #FF0000, el color verde por #00FF00 y el azul por #0000FF.
El color negro se define como la ausencia de color, es decir #000000 , y el color blanco como la mezcla total de los colores primarios ( #FFFFFF ). Pgina 14
La mayora de los navegadores son capaces de interpretar algunos colores por su nombre en ingls, como por ejemplo red para el color rojo, green para el verde o blue para el azul. Cuando definas un color utilizando su nombre ingls debers escribirlo sin comillas ni almohadillas. Se denominan colores seguros para la Web aquellos que se muestran del mismo modo en los distintos navegadores tanto de Windows como de Macintosh. En total existen 216 colores seguros. Para que un color sea seguro las cantidades de rojo, verde y azul han de ser 00, 33, 66, 99, CC o FF, salvo los colores #0033FF , #3300FF , #00FF33 y #33FF00 que el navegador Internet Explorer de Windows no muestra correctamente.
Recomendaciones antes de empezar

Antes de empezar a crear un sitio Web, es recomendable generar una estructura de carpetas para mantener organizado el material que se emplear en su construccin. Esto facilita enormemente el trabajo a la hora de modificar las pginas del sitio Web o reutilizar el material empleado. Dentro de la carpeta que almacenar el sitio Web, es conveniente crear subcarpetas que contengan las imgenes, las pelculas de Flash y dems elementos que emplees en las pginas. De este modo tendrs todo el material organizado y estructurado.
Pgina 15
Programacin HTML
TEMA 2: FORMATOS DE PGINA
Pgina 16
Atributos de la etiqueta <BODY>: fondos

La etiqueta <BODY> puede llevar ciertos atributos que darn formato a la pgina. Para aplicar un color de fondo a una pgina, incluye el atributo bgcolor dentro de la etiqueta <BODY> . ste ir seguido del signo = y el color deseado. El color deber introducirse entre comillas y comenzando por almohadilla en el caso de ser un valor hexadecimal, y sin comillas ni almohadilla si empleas el nombre en ingls.
Adems de colores slidos, es posible utilizar una imagen como fondo de la pgina a travs del atributo background e incluyendo la ruta del archivo de imagen. Cuando emplees una imagen de fondo, es recomendable definir tambin el atributo bgcolor despus de background para establecer un color de fondo alternativo. Este color de fondo ser visualizado nicamente en caso de que el usuario no cargue las imgenes.
Pgina 17
El atributo bgproperties permite que la imagen de fondo permanezca esttica, para ello incluye el atributo dentro de la etiqueta <BODY>. El valor que debes dar a este atributo es fixed , de lo contrario omite esta propiedad o asgnale una cadena vaca (). Debes tener en cuenta que el valor fixed no es interpretado por el navegador Netscape .
Atributos de la etiqueta <BODY> : mrgenes

Para establecer los mrgenes de la pgina con respecto a los bordes izquierdo y superior del navegador, utiliza los atributos leftmargin y topmargin para el navegador Internet Explorer y Netscape a partir de la versin 6, y marginwidth y marginheight para el navegador Netscape de versiones anteriores. Lo mejor es que emplees las cuatro simultneamente para evitar que no sean interpretadas por algunos navegadores. De todos modos, la versin 4 de HTML emplea estilos CSS para establecer mrgenes.
Atributos de la etiqueta <BODY>: textos

Tambin dispones de atributos para la etiqueta <BODY> que establecen los colores que, por defecto, se utilizarn para los distintos tipos de texto que se encuentren en la pgina Web. El atributo text determina el color del texto, link el color de los enlaces no visitados, alink el color de los enlaces activos y, por ltimo, vlink el color de los enlaces visitados.
Pgina 18
Si no defines estos cuatro atributos, sus valores por defecto sern, negro para el texto, azul para los enlaces, rojo para los enlaces activos y prpura para los enlaces visitados.
Pgina 19
Programacin HTML
TEMA 3: FORMATOS DE TEXTO
Pgina 20
Estilos
Dentro del cuerpo de un documento HTML , es decir, entre las etiquetas <BODY> y </BODY> es posible escribir texto que luego ser visualizado en la pgina Web. Para conceder estilos a este texto, cuentas con varias etiquetas, aunque nicamente se nombrarn las ms utilizadas. El texto encerrado entre etiquetas <B> y </B> se visualizar en negrita. Tambin pueden utilizarse las etiquetas <STRONG> y </STRONG> para obtener el mismo efecto. Entre las etiquetas <I> y </I> escribe el texto que desees que aparezca en cursiva. Tambin es posible emplear las etiquetas <CITE> y </CITE>. Para subrayar una porcin de texto, introdcelo entre las etiquetas <U> y </U>. Si lo que quieres es aplicar un efecto de tachado, utiliza las etiquetas <S> y </S> o <STRIKE> y </STRIKE>.
Si deseas obtener el efecto de escritura de las antiguas mquinas de escribir, emplea las etiquetas <TT> y </TT> para encerrar el texto.
Pgina 21
Tambin puede ocurrir que necesites incluir frmulas matemticas en el texto, por lo que puedes necesitar <SUP> y </SUP> para escribir entre ellas el texto en superndice, y las etiquetas <SUB> y </SUB> para el texto en subndice.
Con las etiquetas <CENTER> y </CENTER> se centra el texto horizontalmente con respecto a los mrgenes de la pgina. Es muy importante cerrar las etiquetas en orden inverso a como se abrieron para evitar errores en la pgina, es decir, la primera etiqueta en abrirse deber cerrarse en ltimo lugar.
Atributos de fuente
Emplea las etiquetas <FONT> y </FONT> junto con sus atributos para definir el color, tamao o tipo de fuente que debe tomar un texto determinado. El atributo text definido dentro de la etiqueta <BODY> determina el color por defecto para todo el texto de la pgina. El atributo color de la etiqueta <FONT> establece el color que se aplicar al texto encerrado entre las etiquetas de apertura y cierre, independientemente Pgina 22
del color establecido por el atributo text , que seguir siendo efectivo para el resto del documento. El atributo face define el tipo de fuente que se emplear en el texto encerrado entre las etiquetas <FONT> .
Las fuentes no se envan con el documento HTML para ser interpretadas por el navegador, sino que se utilizan las que estn instaladas en el equipo del usuario, por lo que si el usuario no tiene instalado un determinado tipo de fuente, visualizar el documento con la fuente predeterminada por el navegador lo que puede dar lugar a una modificacin sustancial del aspecto de la pgina. Lo mejor es que para cantidades considerables de texto se empleen fuentes de uso comn como Arial, Helvetica o similares, ya que, aunque el usuario no disponga de estas fuentes exactamente, casi con toda seguridad dispondr de otras muy similares que no alteran el diseo. Si as lo deseas, puedes definir dos fuentes alternativas ms, separadas por comas, de este modo, si el usuario no tiene instalada la primera fuente, el navegador intentar visualizar el texto con la segunda, y si no con la tercera; finalmente, si no dispone de ninguna de las tres fuentes, visualizar el texto con su fuente predeterminada.
Pgina 23
Si no se define ningn tipo de fuente, el texto de la pgina se mostrar con el tipo de fuente predefinido por el navegador. Es posible modificar el tipo de fuente con que se visualizarn las pginas Web que no tienen definido el atributo face , desde el cuadro de dilogo Opciones de Internet del navegador Internet Explorer. Para definir el tamao de la fuente, utiliza el atributo size que debers igualar al nmero correspondiente al tamao deseado escrito entre comillas.
HTML proporciona 7 tamaos de fuente que se numeran del 1 al 7, siendo el 1 el de menor tamao y 7 el mayor. Tambin es posible igualar el atributo size a un signo ms seguido de un nmero, esto aumentar el tamao base en el nmero de unidades indicadas. Por ejemplo, si escribes <FONT size=+2> Se aumentar el tamao base en dos unidades.
Pgina 24
El tamao base predeterminado es igual a 3, por lo que el ejemplo anterior equivale a escribir <FONT size=5> si es que no se ha definido un nuevo tamao base. Para definir un nuevo tamao base, emplea la etiqueta <BASEFONT> . Esta etiqueta debe ser escrita justo despus de la etiqueta <BODY> y no tiene etiqueta de cierre.
Formato de ttulos
En HTML dispones de etiquetas para aplicar formato de ttulo a los encabezados de los textos. Cuentas con seis niveles de encabezamientos, para los que se utilizan las etiquetas <HN> , siendo N un nmero del 1 al 6 que determina el tamao del encabezado. De este modo, la etiqueta <H1> se aplica a los ttulos de mayor importancia y confiere al texto un mayor tamao, mientras que la etiqueta <H6> se aplica al subttulo de menor nivel. Adems de destacar el texto de ttulos y subttulos, estas etiquetas pueden acompaarse del atributo align para indicar la alineacin horizontal del ttulo. Para una alineacin centrada el valor del atributo ser center , para alinear a la derecha el valor ser right y, para hacerlo a la izquierda, left .
Pgina 25
Formato de prrafo
Para separar el texto en prrafos dispones de varias etiquetas. Al escribir texto dentro de un documento HTML observars que, aunque escribas dos lneas separadas pulsando la tecla INTRO , en el navegador aparecen en la misma lnea; cuando quieras crear un salto de lnea, debes especificarlo mediante la etiqueta <BR> . Esta etiqueta no tiene cierre ya que, en el punto donde el navegador encuentre una etiqueta de este tipo, insertar automticamente un salto de lnea. Si necesitas insertar un salto de prrafo, emplea la etiqueta <P> . La diferencia de la etiqueta <P> con la etiqueta <BR> , es que adems de insertar un salto de lnea, introduce una lnea en blanco detrs del prrafo. Esta etiqueta s posee etiqueta de cierre, por lo que debes encerrar el texto del prrafo entre las etiquetas. Adems puedes incluir el atributo align que se explic en el apartado referente al formato de ttulo. Al igual que ocurra con los saltos de lnea, el navegador tampoco interpreta ms de un espacio en blanco seguido. De manera que se obtiene el mismo resultado si pulsas una o diez veces seguidas la barra espaciadora. Para introducir ms de un espacio en blanco seguidos, tendrs que introducir un cdigo compuesto por la cadena de caracteres , cada vez que el navegador encuentre este cdigo, interpretar que se debe visualizar un espacio en blanco.
Pgina 26
Cuando desees aplicar a un prrafo sangras a ambos lados, incluyendo un espacio adicional por encima y por debajo del texto (como una cita), emplea las etiquetas
<BLOCKQUOTE> y </BLOCKQUOTE>.
Para aplicar formatos de prrafo, dispones de otra etiqueta ms cmoda, se trata de la etiqueta <PRE>. Esta etiqueta tambin debe ser utilizada junto con su etiqueta de cierre y respeta la forma en que se ha escrito el texto. El navegador interpreta el texto contenido entre estas dos etiquetas tal y como ha sido escrito, respetando espacios en blanco, lneas en blanco y tabulaciones.
Pgina 27
Programacin HTML
TEMA 4: IMGENES
Pgina 28
Insertar imgenes
Hasta ahora slo se ha explicado cmo introducir texto en una pgina Web y darle formato. Lleg la hora de insertar imgenes. Recuerda que se recomienda tener una carpeta donde se almacenarn las imgenes utilizadas en las pginas de un sitio Web. Esta carpeta debe estar ubicada dentro de la carpeta donde se almacenan los documentos HTML . Para insertar una imagen emplea la etiqueta <IMG> que no tiene etiqueta de cierre, aunque s atributos; uno de ellos es obligatorio, el atributo src, al que se le asigna la ruta de la imagen que deseas insertar. src es la abreviatura del vocablo ingls source que significa fuente. De ah que en l se indique donde est el archivo fuente de la imagen. Hay dos tipos de rutas: relativas y absolutas . En las rutas absolutas, como su propio nombre indica, es necesario indicar la ruta completa del archivo. La utilizacin de rutas absolutas no es recomendable, ya que si se va a colgar la pgina Web en Internet , es muy probable que la imagen no se almacene en esa ruta en el servidor. Por lo tanto, se utilizarn rutas relativas. Estas rutas indican el camino a seguir desde la ubicacin del archivo HTML hasta el lugar donde se encuentra almacenado el archivo de imagen.
Pgina 29
Por ejemplo, images/logo.gif o ../images/logo.gif. Los dos puntos seguidos indican que, tomando como punto de partida la carpeta en la que se encuentra la pgina, hay que subir un nivel en el rbol de carpetas. Los tipos de imagen que se pueden utilizar en una pgina Web son las de tipo GIF,
JPEG, PNG o BMP.

Adems del atributo src, la etiqueta atributo alt. <IMG> puede acompaarse del
Como valor del atributo se incluir un comentario como puede ser el nombre de la imagen, su descripcin, etc. Este comentario aparecer en un recuadro amarillo cuando se site el cursor sobre la imagen. Es recomendable definir esta propiedad por si el usuario tiene desactivada la carga de imgenes en el navegador, de este modo se puede hacer una idea aproximada del contenido completo de la pgina.
Alineacin de la imagen
La etiqueta <IMG> puede incorporar el atributo align , con el que se indica la posicin que debe ocupar el texto u otros elementos respecto a la imagen. Este atributo puede tomar los siguientes valores: top alinea la parte superior de una imagen con la parte superior del elemento ms alto de la lnea actual.
- middle alinea la parte central de la imagen con la lnea de base de la lnea actual. - bottom e baseline: alinean la lnea de base del elemento con la parte inferior del objeto seleccionado.
Pgina 30
-left: el texto se coloca a la derecha de la imagen empezando desde su parte superior. -right: el texto se coloca a la izquierda de la imagen empezando desde su parte superior. -texttop: alinea la parte superior de la imagen con la parte superior del carcter ms alto de la lnea de texto. -absmiddle: alinea la parte central de la imagen con la parte central del texto de la lnea actual. -absbotton: alinea la parte inferior de la imagen con la parte inferior de la lnea de texto incluyendo los trazos descendentes.
Dimensiones de una imagen

Cuando los navegadores interpretan un cdigo HTML y encuentran una etiqueta de imagen, interrumpen el proceso de carga del resto de la pgina mientras completan la carga de la imagen, lo que obliga al usuario a esperar para poder ver el contenido completo de la pgina.
Pgina 31
Sin embargo, si se indica al navegador las dimensiones de la imagen, ste reserva el espacio y contina rellenando el texto de la pgina mientras carga la imagen. Para ello emplea los atributos width y height , a los que asignar el tamao en pxeles de la imagen (anchura y altura respectivamente). No obstante, el proceso de carga de las imgenes puede llegar a ser muy lento dependiendo de su tamao, por eso es recomendable no utilizar imgenes muy grandes, ni tampoco gran cantidad de imgenes. Tambin puedes recurrir a redimensionar las imgenes con estos atributos indicando el porcentaje que disminuir o aumentar la imagen horizontal y verticalmente. De todos modos, no es recomendable modificar el tamao de las imgenes desde el cdigo HTML (ya que pueden perder calidad), sino modificar su tamao con programas de edicin de imagen. Para hacer que disminuya el tamao de visualizacin de una imagen, aplica un porcentaje inferior a 100, y para aumentarlo, superior a 100. De este modo si se define el atributo width=40% y height=60% estars dismi- nuyendo el ancho de la imagen en un 60% y el alto en un 40% . Mientras que, si defines el atributo height=130% estars aumentando el alto de la imagen en un 30%.
Pgina 32
Adems de los atributos descritos anteriormente, puedes utilizar los siguientes atributos aplicados a la etiqueta <IMG> . El atributo border sirve para indicar el grosor de la lnea que bordea la imagen. Si prefieres que la imagen no tenga bordes, iguala este atributo a cero o, simplemente omtelo ya que es el valor por defecto. NOTA
Se ver ms adelante que, cuando una imagen funciona como enlace, aparece por defecto con borde, por lo que si deseas eliminarlo debers definir el atributo con el valor cero.
El atributo hspace indica el espacio en pxeles que se aade a los lados de la imagen. De manera anloga, el atributo vspace aade espacio por encima y por debajo de la imagen.
Pgina 33
Programacin HTML
TEMA 5: HIPERVNCULOS
Pgina 34
Hipervnculos
Los hipervnculos son los elementos que permiten la navegacin entre pginas Web. Se pueden definir cinco tipos distintos de hipervnculos o enlaces: enlaces a otras pginas del mismo sitio Web, enlaces a pginas ajenas al sitio Web, enlaces a otra parte de la misma pgina, enlaces a direcciones de correo y enlaces a ficheros. El enlace se suele situar en una imagen o una porcin de texto. Si utilizas una imagen, sta se visualizar, de manera predeterminada, con un borde de color azul. Si el enlace est definido sobre una porcin de texto, ste aparecer, tambin de manera predeterminada, subrayado y en color azul.
La etiqueta <A>
Veamos los distintos tipos de enlace con varios ejemplos: Para definir un enlace a una pgina del propio sitio Web, utilizando texto, introduce la etiqueta <A> con el atributo href igual a la ruta relativa de la pgina que deseas enlazar (entre comillas), el texto que servir de hipervnculo y la etiqueta de cierre </A> . Para definir un enlace a una pgina ajena al sitio Web que ests creando, debes indicar la direccin completa de la pgina Web, por ejemplo, http://www.muchocuento.com.
Pgina 35
Cuando prefieras que sea una imagen la que contenga el hipervnculo, debers insertar la etiqueta <IMG> con la ruta de la imagen entre las etiquetas <A> y </A>.
Anclas con nombre

Si lo que quieres es definir un enlace a otra parte de la misma pgina Web, debes utilizar un ancla con nombre situndola en el punto de la pgina hacia donde quieres que conduzca el enlace. Para colocar el ancla escribe la etiqueta <A> con el atributo name , igual al nombre que quieras darle al ancla y, a continuacin, el texto o la imagen que har de marcador ms el cierre de la etiqueta <A> . En el punto donde desees definir el enlace escribe la etiqueta <A> con el atributo href igual al nombre del ancla precedido del carcter almohadilla, seguidamente, el texto o la imagen del enlace y el cierre de la etiqueta <A>.
Puedes combinar los enlaces a pginas del propio sitio y los enlaces a anclas con nombre, creando de este modo enlaces a pginas con anclas. Por ejemplo, si la pgina cuentos.htm tiene un ancla llamada infantil , en la pgina index.htm puedes incluir un enlace que abra cuentos.htm en la
Pgina 36
posicin que indica el ancla infantil . Para ello la ruta que debes introducir en el atributo href de la etiqueta <A> es cuentos.htm#infantil (en caso de encontrarse los dos documentos en el mismo directorio).
Enlaces a direcciones de correo y archivos

Para definir un enlace a una direccin de correo debes escribir la direccin completa de correo precedida de mailto: como valor del atributo href en la apertura de la etiqueta <A>. Al hacer clic sobre este tipo de enlace, se abrir el cliente de correo predeterminado que debe estar configurado para que funcione correctamente. Por ltimo, es posible definir enlaces a archivos o ficheros, al activar uno de estos enlaces, se abrir un cuadro de dilogo que permitir escoger entre descargar o abrir directamente el archivo desde su ubicacin. La sintaxis para este tipo de enlaces es la siguiente: <A> , la ruta del archivo entre comillas como valor del atributo href , el texto o imagen que servir de enlace y, por ltimo, la etiqueta de cierre </A> .
NOTA Es muy importante colocar la extensin del fichero que se descargar al pulsar este enlace. Si el usuario no tiene instalado en su equipo el programa que permite la visualizacin de fichero, se permitir su descarga pero no su apertura. Un ejemplo sera: <A href=descargas/cuentos.zip> cuentos </A>.
Mapas de imagen
Mediante los mapas de imgenes es posible conseguir que cada parte de una misma imagen enlace una pgina diferente. Para ello tendrs que declarar que la imagen es un mapa incluyendo el atributo usemap dentro la etiqueta IMG , que debers igualar al nombre del mapa entre comillas y precedido del carcter almohadilla. Por ejemplo, <IMG src=imagen.gif usemap=#mapa1>. Pgina 37
Una vez declarado el mapa debes especificar sus zonas interactivas y sus enlaces. Para definir el mapa emplea la etiqueta <MAP> incluyendo el atributo name seguido del nombre que has definido anteriormente. Antes de cerrar la etiqueta <MAP> define las coordenadas y los vnculos del siguiente modo: Abre la etiqueta <AREA> y, dentro de ella, el atributo shape que define el tipo de rea y el atributo coords en el que se especifican las coordenadas del rea. Los valores que puede tomar el atributo shape son: rect (rea de forma rectangular), circle (rea de forma ovalada) y poly (rea poligonal). Las coordenadas a introducir sern la esquina superior izquierda y la esquina inferior derecha en caso de reas rectangulares, el centro y el radio para reas ovaladas o los vrtices del polgono si se trata de un rea del ltimo tipo. Despus de indicar estos parmetros seala el vnculo tal como se explic en los apartados anteriores.
Pgina 38
Programacin HTML
TEMA 6: CREACIN DE LISTAS
Pgina 39
Listas desordenadas
Las listas son enumeraciones de elementos organizados de forma que cada uno se encuentra en un prrafo diferente. Una lista desordenada es una lista que seala con vietas cada uno de los elementos que la componen. Para crear una lista desordenada dispones de las etiquetas <UL > y <LI> (ambas con su correspondiente etiqueta de cierre). La etiqueta <UL> indica el comienzo de una lista desordenada y, su etiqueta de cierre, el final de la lista. Cada elemento de la lista deber escribirse entre las etiquetas <LI> y </LI> . Se puede decidir qu tipo de vieta se quiere emplear en los elementos de la lista, gracias al parmetro type de la etiqueta <UL>. Este parmetro puede mostrar los siguientes valores: disk muestra una vieta en forma de crculo relleno, circle asigna una vieta en forma de crculo vaco y square muestra un cuadrado relleno.
Si no defines el atributo type, se tomar la opcin predeterminado para este tipo de listas.
disk
como formato
Pgina 40
Listas ordenadas
Una lista ordenada es una lista numerada. La estructura es igual al de las listas desordenadas, pero utilizando la etiqueta <OL>. Esta etiqueta adems del atributo type, posee el atributo start que indica con qu nmero se comienza la numeracin de la lista. Si no se indica ninguno, se tomar el nmero 1 como valor predeterminado.
Otra diferencia son los valores que puede tomar el atributo type , que sern los siguientes: 1 utiliza nmeros arbigos para ordenar la lista (este valor es el predeterminado), a utiliza letras minsculas, A letras maysculas, i nmeros romanos en minsculas e I nmeros romanos en maysculas. Tanto las listas ordenadas como las desordenadas se pueden anidar.
Pgina 41
Listas de definicin
Este tipo de listas son apropiadas para dar una apariencia de glosario o de definiciones de trminos, donde intervienen el trmino a definir y su definicin. Se emplear la etiqueta <DL> para indicar el comienzo de una lista de definicin y su etiqueta de cierre </DL> para indicar el final. Para introducir un ttulo a la lista utiliza las etiquetas <DH> y </DH>. Los trminos a definir se sitan entre las etiquetas <DT> y </DT> y su definicin entre las etiquetas <DD> y </DD>.
Pgina 42
Programacin HTML
TEMA7: CREACIN DE TABLAS
Pgina 43
Introduccin
Las tablas se emplean para distribuir el texto, las imgenes u otros elementos de forma ms sencilla y atractiva en la pgina. Cuando te encuentras con pginas Web que estn muy bien alineadas o en las que los elementos se encuentran sobre superficies coloreadas, generalmente se tratar de tablas invisibles, es decir, tablas sin cuadrcula visible, de este modo el usuario no es consciente de que realmente se estn empleando tablas para colocar los elementos. Aunque, en la mayor parte de los casos, se utilizan tablas invisibles, tambin es posible incorporar a la pgina tablas con bordes visibles, de esto se deduce que existir un atributo de la etiqueta destinada a la creacin de tablas que condiciona el tamao del borde.
Estructura de las tablas

La estructura a seguir para la creacin de tablas es similar a la que se segua al crear listas. Emplea la etiqueta <TABLE> para indicar el comienzo de la tabla y su etiqueta de cierre </TABLE> para indicar dnde termina. Las etiquetas <TR> </TR> se utilizan para crear filas dentro de la tabla y, las etiquetas <TD> de apertura y </TD> de cierre, para crear celdas. Entre estas dos ltimas etiquetas se insertar el contenido de la celda.
Atributos de las etiquetas

<TABLE>, <TR> y <TD>
Para dar formato a las tablas dispones de los siguientes atributos: -Con el atributo border se especifica el grosor en pxeles del borde de la tabla (slo se puede aplicar a la etiqueta <TABLE> ). - Mediante el atributo bordercolor es posible aplicar color a los bordes de la tabla (se puede aplicar a las etiquetas <TABLE> , <TR> y <TD> ). -Los atributos width y height controlan la altura y la anchura expresadas en pxeles o en porcentajes relativos a las dimensiones de la ventana del navegador. Pgina 44
Estos atributos podrn ser aplicados tanto a la etiqueta <TABLE> como a la etiqueta <TD> , en este caso definira la anchura de la columna con contiene la celda.
La anchura de la fila ( <TR> ) viene determinada por la anchura de la tabla y, su altura, por la altura de las celdas ( <TD> ) que la forman. -El atributo align puede ser utilizado con las etiquetas <TABLE> , <TR> y <TD>, para definir la alineacin del texto en el interior de toda una tabla, una fila completa o una celda. Los valores que puede tomar este atributo son left , center , right o justify. -El atributo valign puede aplicarse en las etiquetas <TR> y <TD>, y define la alineacin vertical del contenido de una fila o una celda. Este atributo puede tomar los valores top, middle, bottom o baseline (lnea base). -Los atributos bgcolor y background tienen la misma aplicacin que en la etiqueta <BODY> y se utilizan del mismo modo. Pueden aplicarse a la tabla completa, a una fila, o a una celda en concreto. Es posible incluir el atributo nowrap en cualquiera de las tres etiquetas, este atributo hace que el tamao de la celda aumente conforme se introduce texto. De este modo cuando el texto llega al extremo derecho de la celda esta aumenta para dar cabida a todo el texto, evitando saltos de lnea.
Pgina 45
-Se utiliza el atributo cellspacing para modificar el espacio entre las celdas de la tabla. El espacio entre celdas se mide en pxeles y, por defecto, es igual a cero. Este atributo nicamente puede utilizarse en la etiqueta <TABLE> . -El atributo cellpaddign , al igual que el anterior, slo puede aplicarse en la etiqueta <TABLE> . Sirve para establecer mrgenes en el interior de las celdas, es decir,el espacio entre el texto y el borde. -El atributo colspan permite unir varias celdas de una misma fila en una sola. Elvalor asignado a este atributo indica el nmero de columnas que pasar a ocupar lanueva celda combinada.
El atributo rowspan es anlogo al anterior, slo que en este caso permite indicar el nmero de filas que ocupar la nueva celda obtenida. Los atributos colspan y rowspan slo se pueden aplicar a la etiqueta <TD> .
Cabecera, cuerpo y pie de una tabla

Es posible dividir las tablas en tres partes: cabecera, cuerpo y pie. Para iniciar la cabecera de una tabla, emplea la etiquetas </THEAD> y </THEAD>. A continuacin, crea las filas de la tabla que formarn parte de ella (usualmente ser una fila) teniendo en cuenta que, para aadir celdas, se emplean las etiquetas <TH> en vez de <TD> . Pgina 46
Antes de crear el cuerpo de la tabla, debers definir el pie (si existe), definiendo las filas que lo componen dentro de las etiquetas <TFOOT> y </TFOOT> . Las filas que forman parte del cuerpo de la tabla se deben situar entre las etiquetas </TBODY> y </TBODY>.
Estas etiquetas son interpretadas correctamente por el navegador Internet Explorer (desde la versin 3) y Netscape a partir de la versin 6. Las versiones 6 de ambos navegadores permiten definir cabeceras de tabla de otro modo que tiene en cuenta si sta se define en una fila o en una columna. Para ello no es necesario emplear las etiquetas <THEAD> anteriores, sino que basta con emplear la etiqueta <TH> para definir las celdas que forman parte de la cabecera, aadiendo el atributo scope para indicar si forma parte de una fila de cabecera (valor row) o de una columna de cabecera (valor col).
Pgina 47
Programacin HTML
TEMA 8: FRAMES
>
Pgina 48
Qu son los frames?

Un frame o marco es una zona de la ventana del navegador que puede mostrar un documento HTML independientemente de lo que se muestra en el resto de la ventana. Un conjunto de marcos es un archivo HTML que define el diseo y las propiedades de una serie de marcos agrupados. En este documento se incluyen el nmero,el tamao, la posicin de los marcos y la URL de la pgina Web que se muestra inicialmente en cada marco. De aqu se deduce que sern necesarios varios documentos HTML: uno para definir los marcos (conjunto de marcos) y otro por cada marco que se haya concretado (pginas que se mostrarn en cada marco). Es importante tener en cuenta que el archivo conjunto de marcos no contiene el cdigo HTML que se muestra en el navegador, nicamente la distribucin y descripcin de los marcos. En la seccin noframes se incorpora el contenido que debe mostrar el navegador en caso de que no soporte marcos. En muchas ocasiones la pgina Web que se muestra en alguno de los marcos es fija, por ejemplo, cuando contiene un men que permite la navegacin por todo el sitio Web.
El documento de definicin de marcos

Este documento tiene una estructura distinta al resto de pginas Web, aunque tambin debe tener la extensin .htm o .html . La estructura del documento es similar al de una pgina Web, slo que en lugar de la etiqueta <BODY> , debes incluir la etiqueta <FRAMESET> con su correspondiente etiqueta de cierre </FRAMESET> . Entre estas dos etiquetas se incluye una etiqueta <FRAME> por cada marco que desees delimitar.
Pgina 49
<FRAMESET> <FRAME> <FRAME> <FRAME> </FRAMESET>
Dentro de la etiqueta <FRAMESET> es necesario definir cuntas filas o columnas tendr el documento y qu tamao tendrn. Se emplea el atributo rows para definir las filas y el atributo cols para definir las columnas. El funcionamiento de estos atributos es el mismo, por lo que se utilizar el atributo cols para ver su sintaxis.
Dentro de la etiqueta <FRAMESET> de apertura, se aade el parmetro cols , el signo igual y los valores de la anchura de las columnas separados por comas.
NOTA El tamao de los frames puede ser expresado en pxeles o en tantos por ciento relativos a las dimensiones de la ventana del navegador, en este ltimo caso, tendr que ser igual a cien la suma de todos ellos.
Pgina 50
Tambin es posible emplear el smbolo asterisco como comodn. Por ejemplo, si los valores del atributo cols son 80 pxeles y un asterisco, el frame izquierdo ocupar el 80 pxeles de la ventana del navegador, mientras que el derecho ocupar el espacio restante hasta completar el 100% . Dentro de la etiqueta <FRAME> , es necesario incluir el atributo src , donde se indicar la ruta y nombre de la pgina que se visualizar en el marco que define. Para definir una pgina dividida en marcos, horizontal y verticalmente, se debern anidar las etiquetas <FRAMESET> , sustituyendo la etiqueta <FRAME> , por la etiqueta <FRAMESET> correspondiente.
Pgina 51
Atributos de la etiqueta <FRAME>

Para definir las caractersticas de cada uno de los marcos que componen la pgina, se pueden incluir los siguientes atributos dentro de la etiqueta <FRAME> que define cada marco: Mediante el atributo name se asigna un nombre al marco. Este nombre ser de gran utilidad ms adelante. El atributo marginwidth, indica el tamao en pxeles de los mrgenes laterales y marginheight, define el tamao en pxeles de los mrgenes superior e inferior. Con el atributo scrolling se indica si se desea que aparezcan barras de desplazamiento cuando no se visualizan completas las pginas que se muestran en el interior de los marcos. El valor yes implica que aparezcan siempre la barras de desplazamiento, el valor no que no aparezcan bajo ninguna circunstancia, y el valor auto que nicamente aparezcan cuando sea necesario. Este ltimo es el valor predeterminado. Incluye el atributo noresize cuando prefieras que el usuario no pueda variar el tamao de los marcos mediante el mtodo de pinchar y arrastrar sobre los bordes. Por ltimo, incorpora el atributo frameborder para indicar si deseas o no que aparezca un borde delimitando el marco.
Pgina 52
El atributo target
Si en una pgina de marcos, uno de ellos visualiza una pgina con enlaces, es posible indicar en cul de los otros marcos se debe abrir la pgina llamada desde el enlace. Para ello se emplea el atributo target dentro de la etiqueta <A> apertura del enlace, este atributo puede tomar los siguientes valores: de
El nombre del frame en el cual quieres abrir la pgina. Este nombre se corresponder con el designado en el atributo name de la etiqueta <FRAME> en el documento de definicin de marcos. El valor _blank abre la pgina en una ventana nueva del navegador, obviando los marcos. El valor _self carga la pgina en el mismo marco donde estaba ubicado el enlace, no es necesario indicarlo pues es el valor por defecto del atributo. El valor _top oculta los marcos y carga la pgina a ventana completa, pero sin abrir una ventana nueva del navegador. El valor _parent slo se utiliza cuando existe anidacin de frames y carga la pgina enlazada en el marco del nivel inmediatamente superior, dentro de la jerarqua de marcos, al marco donde est ubicado el enlace.
Pgina 53
Programacin HTML
TEMA 9: FORMULARIOS
Pgina 54
Estructura de un formulario
Los formularios son herramientas que permiten interactuar con el visitante de un sitio Web. A travs de ellos es posible recabar informacin acerca de los gustos del usuario o en mbitos comerciales, recibir pedidos, reclamaciones, sugerencias, etc. Dentro de un formulario se utilizan distintos controles, a travs de los cuales el visitante podr introducir informacin. Estos controles son cuadros de texto, casillas de verificacin, botones de radio, listas desplegables, etc. Los formularios en HTML nicamente permiten recibir la informacin a travs del correo electrnico, aunque en combinacin con otros lenguajes de script , como PHP o ASP , es posible procesar la informacin y almacenarla en Bases de Datos. Para definir un formulario, inserta la etiqueta <FORM> con su correspondiente etiqueta de cierre </FORM>. Entre estas dos etiquetas introduce todos los controles del formulario. Adems, dentro de la etiqueta <FORM> , debes definir los siguientes atributos: El atributo action controla la accin que debe ejecutarse al pulsar el botn y enviar el formulario. En este caso, como se trabaja exclusivamente con HTML slo dispones de una opcin: enviar el contenido del formulario por correo electrnico, por lo que debers escribir entre comillas mailto:direccion_de_mail .
Pgina 55
En el atributo method indica cul de los dos mtodos disponibles get o post vas a utilizar. En este caso debers emplear siempre el mtodo post . Debes asignar el valor text/plain al atributo enctype para recibir los datos en un archivo con extensin .txt .
Elementos de un formulario
Para incluir un elemento de formulario emplea la etiqueta <INPUT> . Esta etiqueta no posee etiqueta de cierre y, dependiendo del tipo de elemento al que represente, variarn sus atributos. En el atributo type de esta etiqueta, define el tipo de elemento que quieres insertar. Todos los elementos deben incluir el atributo name, donde se asigna un nombre al control para poder distinguirlo cuando se reciban los datos. Para insertar un cuadro de texto, el atributo type toma el valor text , puedes indicar su longitud expresada en nmero de caracteres mediante el atributo maxlength , que por defecto es ilimitado. En el atributo size especifica el nmero de caracteres que se mostrarn en pantalla. Si no incluyes este atributo, el nmero de caracteres mostrado ser 20 . Si lo deseas es posible mostrar un valor inicial para este elemento con el atributo value .
Pgina 56
Para incluir un cuadro de texto que oculte el texto que se introduce, mostrando un asterisco o vieta por cada carcter introducido asigna el valor password al atributo type. Este elemento se utiliza para introducir contraseas y su sintaxis es idntica a la de los cuadros de texto convencionales. Los botones de radio son botones circulares que van acompaados de una opcin. El usuario solamente podr seleccionar una de las opciones que representan los botones pertenecientes a un mismo grupo, es decir, sus opciones son excluyentes. Los botones de un mismo grupo presentan el mismo valor para el atributo name . Para insertar un botn de radio, asigna el valor radio al atributo type . En el atributo value debers introducir el valor de la opcin que representa el botn de radio. Si quieres que el botn aparezca inicialmente activado, aade el atributo checked . Recuerda que slo una de las opciones podr llevar este atributo. Las casillas de verificacin representan un grupo de opciones, de las que es posible seleccionar una, varias o ninguna. Para insertar una casilla de verificacin, establece checkbox como valor del atributo type , el resto de atributos son iguales que en el caso de los botones de radio. Tambin es posible introducir cajas de texto con barras de desplazamiento que pueden contener varias lneas de texto. Para ello dispones de la etiqueta <TEXTA-REA> que debe ir acompaada de la correspondiente etiqueta de cierre, aunque entre ellas no se escribe nada. Los atributos que acompaan a esta etiqueta son: -name determina el nombre del elemento, rows especifica el nmero de filas de texto visibles y cols indica el nmero de columnas de texto visibles. - El atributo wrap puede tomar los siguientes valores:
Pgina 57
virtual establece el ajuste del texto de forma que cuando el texto introducido llega al borde derecho del rea, se ajusta a la siguiente lnea, aunque este ajuste no se mantiene al enviar los datos sino que se enva en una nica cadena de texto. physical mantiene el ajuste tanto en el rea como al enviar los datos. off impide que el texto se ajuste en la siguiente lnea, este es el valor por defecto. Si deseas mostrar una lista de opciones en la que el usuario deba seleccionar las que desee, utiliza la etiqueta <SELECT> que requiere su correspondiente etiqueta de cierre. Esta etiqueta debe llevar obligatoriamente, adems del atributo name , el atributo size donde se especifica el nmero de opciones visibles al mostrar el formulario. Si quieres permitir que el usuario escoja ms de una opcin de la lista, aade el atributo multiple . El usuario podr escoger ms de una opcin si mantiene pulsada la tecla Control mientras hace clic para efectuar la seleccin. Entre las etiquetas <SELECT> de apertura y cierre, escribe la lista de opciones. Para ello emplea la etiqueta <OPTION> seguida del elemento de la lista.
Pgina 58
Si quieres que alguna de estas opciones aparezca seleccionada por defecto, debes incluir el atributo selected en la etiqueta <OPTION>. Puedes usar distintos tipos de botones en un formulario, aunque en este caso slo se comentarn dos. Para introducir un botn emplea la etiqueta <INPUT> con los atributos correspondientes. Dentro de un formulario, debes introducir obligatoriamente un botn del tipo submit, cuando el usuario presiona este botn, se ejecuta la accin descrita en el atributo action de la etiqueta <FORM> , es decir, para formularios HTML , enviar el contenido del formulario por correo electrnico. Cuando el usuario pulsa un botn de tipo reset , borrar los datos introducidos en el formulario dejando los campos con sus valores por defecto. En el atributo value , para ambos tipos de botn, introduce el texto que deseas que aparezca en el botn. Si no existe ningn valor aparecer el valor predeterminado para la versin del navegador que utilice el usuario.
Pgina 59
Programacin HTML
TEMA 10: ELEMENTOS ACCESORIOS
Pgina 60
Separadores
Seguramente, navegando por Internet, has visto alguna pgina Web que utiliza algunas lneas para separar textos independientes o secciones dentro de la pgina. Puedes conseguir este efecto empleando la etiqueta <HR>. Esta etiqueta dibuja una lnea horizontal en el lugar del documento donde la coloques y no posee etiqueta de cierre. Los atributos de esta etiqueta que se emplean para dar formato a la barra son: -align indica la alineacin de la barra con respecto a los laterales de la ventana del navegador. Este atributo, como ya se ha visto antes, puede tomar los valores left , center o right. -noshade elimina el efecto de sombra que tienen por defecto estos separadores. A este atributo no se le asigna ningn valor y, si no se incluye, la lnea se visualizar con una sombra en su parte inferior. -size sirve para indicar el grosor en pxeles que debe tomar la lnea. -width especifica la longitud de la lnea y se puede determinar en pxeles o en tanto por ciento. Si empleas un porcentaje ser relativo a la anchura de la ventana del navegador.
Pgina 61
Marquesinas
Una marquesina es un texto que se desplaza de un lado a otro de la ventana en la que se visualiza la pgina Web. Para incluir una marquesina introduce el texto que desees que se desplace automticamente entre la etiqueta <MARQUEE> y su correspondiente etiqueta de cierre.
La etiqueta <MARQUEE> puede llevar los siguientes atributos: -bgcolor indica el color de fondo de la marquesina. -align controla si el texto del interior de la marquesina se alinea en la zona alta, baja o media de la marquesina. -La altura y anchura de la marquesina se controlan con los atributos height y width, en pxeles o porcentajes. - La separacin en pxeles de la marquesina al texto que la precede se indica a travs de los atributos hspace y vspace . - Si aades el atributo loop , puedes limitar el nmero de veces que aparecer el texto, por defecto este atributo tiene el valor infinito. -El control sobre el tipo de movimiento del texto se realiza con el atributo behavior que puede tomar los siguientes valores: scroll (el texto aparece por un lateral, desaparece por el opuesto y vuelve a aparecer), slide (el
Pgina 62
texto se desplaza y al llegar al extremo opuesto se para) o alternate (el texto se desplaza de un lado a otro). -La direccin del texto se establece mediante direction, sus valores pueden ser left ,right, up y down. -La velocidad de avance del texto se controla mediante los atributos scrollamount ,que indica el espacio en pxeles que se desplazar el texto en cada avance y scroll-delay, que indica el tiempo que tardar en reescribirse el texto en la marquesina. Cuanto mayor es el tiempo, ms lento es el avance del texto.
Pgina 63
Programacin HTML
TEMA 11: INTRODUCCIN A DHTML
Pgina 64
Introduccin
En lecciones anteriores se explic el lenguaje HTML , un lenguaje basado en etiquetas que sirve para definir el contenido de una pgina Web de una manera esttica. A partir de ahora, el concepto de programacin Web va a variar, ya que gracias al HTML Dinmico o DHTML, se aportar interactividad y dinamismo a las pginas Web. Empleando DHTML es posible crear sencillos efectos que requieren poco ancho de banda a la hora de ser cargados en un navegador. Puedes utilizar DHTML para crear animaciones, juegos, aplicaciones, capas. Permite una nueva forma de navegacin en la que el usuario participa activamente en lo que ve en la pgina. Bien es cierto que hoy en da, se dispone de herramientas como Macromedia Flash, que proporciona el medio para realizar animaciones mucho ms vistosas que DHTML , pero esta es una buena opcin si se carece de otras herramientas. Bien, pero qu es DHTML ?, se podra pensar que es un lenguaje similar a HTML , pero no es as, DHTML es un concepto de programacin Web que engloba varias herramientas.
Estas herramientas son: HTML: lenguaje que se estudi en lecciones anteriores. Hojas de estilo en cascada: herramienta que permite describir y actualizar fcilmente el formato de todas las pginas de un mismo sitio Web. Pgina 65
Lenguajes de Script: estos lenguajes permitirn incluir sencillas funciones que darn un carcter interactivo a las pginas Web. Los lenguajes ms utilizados son JavaScript y VisualBasic Script, aunque este curso se limitar a explicar el primero por ser el ms extendido entre los programadores Web.
Hojas de estilo en cascada (CSS)

Las hojas de estilo , tambin conocidas como CSS por sus siglas en ingls, son la base del HTML Dinmico . Las CSS ofrecen una forma de crear un conjunto de estilos que definen cmo se mostrarn los elementos de una pgina. Si bien es cierto que HTML permita dar formato a algunas propiedades de los elementos de una pgina Web, CSS ampla la variedad de formatos que se pueden aplicar, como por ejemplo el aspecto de los vnculos o el interlineado. CSS tambin permite separar los estilos fsicos, de los estilos lgicos. El estilo lgico se refiere a la lgica del documento: cabeceras, prrafos, etc. y no se preocupa de la apariencia final, sino de la estructura del documento. Por el contrario, el estilo fsico no se preocupa de la estructura del documento, sino por la apariencia final: prrafos con un cierto tipo de letra, tablas con un determinado color de fondo, etc.
Pgina 66
Adems, CSS permite crear capas . Si ests familiarizado con programas de diseo grfico como Photoshop , ya conocers este concepto. De todos modos, se explicar en apartados posteriores. De momento slo debes saber que las capas te ayudarn a colocar los elementos justo en la posicin de la pgina Web que desees, sin necesidad de crear tablas con estructuras complicadas para conseguirlo. Una capa puede situarse en cualquier posicin del documento, incluso superponindose a otros elementos o a otras capas.
Pgina 67
Programacin HTML
TEMA 12: HOJAS DE ESTILO INTERNAS
Pgina 68
Atributo style
Hay tres tipos de hojas de estilo: internas, a nivel del documento y externas. Se comenzar hablando sobre las hojas de estilo internas que son las que ofrecen el mtodo ms sencillo para asociar un estilo a una etiqueta. La forma de hacerlo es incluyendo un nuevo atributo a las etiquetas HTML . Este atributo se denomina propiedades. style y es posible asignarle una serie de
Cada propiedad tiene una lista de valores posibles. La sintaxis de este atributo es la siguiente:
<Etiqueta_HTML style=propiedad1: valor; propiedad2: valor; propiedad: valor>
Mediante un ejemplo se podr ver con mayor claridad. Por ejemplo, en el siguiente cdigo HTML , puedes ver una hoja de estilo interna en la que se aplica un estilo particular a un prrafo determinado. Observars que, en su mayora, el cdigo es muy similar a cualquier cdigo HTML . Fjate en la etiqueta <P> del segundo prrafo. En esta etiqueta se define, mediante el atributo style, un tipo de fuente Verdana, un tamao de fuente de 10 puntos y una sangra izquierda de 5 puntos.
Pgina 69
Pero, por qu utilizar el atributo style y sus propiedades, en lugar de utilizar los atributos ya estudiados para la etiqueta <P> ? Bien, por ejemplo, con los atributos de la etiqueta <P> no era posible establecer un tamao de 10 puntos, tal como se podra hacer utilizando en un editor de textos como Word , y tampoco se podra haber fijado la sangra izquierda de 5 puntos. El atributo style no slo puede utilizarse con la etiqueta <P> , si no que se aplica a otras etiquetas como <BODY> , <TABLE> , <TD> , etc.
Etiqueta <SPAN>
Hasta ahora se ha explicado cmo definir estilos para etiquetas HTML , ya que el atributo style puede aplicarse a las etiquetas HTML . Pero, cmo se aplicara un estilo distinto a una porcin del documento que incluya varias etiquetas? y a una palabra de un prrafo? Por ejemplo, para aplicar un estilo a una palabra en concreto no es posible utilizar el atributo style dentro de la etiqueta <P> , ya que el estilo se aplicara al prrafo completo. Para resolver estas situaciones dispones de la etiqueta <SPAN> que, por s misma, no tiene ningn efecto, pero permite introducir el atributo style y sus propiedades en cualquier parte del documento. La porcin de texto a la que deseas cambiar el estilo, deber estar contenida entre las etiquetas <SPAN> de apertura y cierre.
Pgina 70
El inconveniente que puedes encontrar en el uso de hojas de estilo internas, es que ofrece pocas posibilidades a la hora de reutilizar los estilos definidos. Por ejemplo, si quieres aplicar un mismo estilo a diferentes prrafos de una pgina, debers repetir la etiqueta <P> con el atributo style y todas sus propiedades en todos los prrafos. Adems, si decides modificar este formato, ser necesario rectificar los valores de las propiedades para cada atributo style . Por este motivo, se emplearn hojas de estilo internas nicamente en el caso de querer aplicar un estilo a un elemento concreto del documento. Si deseas repetir un mismo estilo para varios prrafos o elementos del documento, utiliza hojas de estilo a nivel de documento u hojas de estilo externas.
Pgina 71
Programacin HTML
TEMA 13: HOJAS A NIVEL DE DOCUMENTO
Pgina 72
Estructura de la etiqueta <STYLE>

Este tipo de hojas de estilo es similar al anterior, con la diferencia de que en lugar de utilizar el atributo style dentro de las etiquetas HTML , se emplear la etiqueta <STYLE>. Debes incluir esta etiqueta en la cabecera del documento, es decir, entre las etiquetas <HEAD> de apertura y cierre. No olvides que tambin debes incluir su etiqueta de cierre. La etiqueta <STYLE> posee un atributo que se usa para su mejor funcionamiento, ste se denomina type y puede tener dos valores: text/css para hojas de estilo en cascada o text/javascript para hojas de estilo basadas en JavaScript . De momento, nicamente utilizars hojas de estilo en cascada. El atributo type ser el que informe al navegador del tipo de sintaxis utilizado en las hojas de estilo. Este atributo no es de uso obligatorio, pero si es recomendable utilizarlo. Entre las etiquetas de inicio y cierre definirs los estilos. stos debern estar encerrados entre signos de comentario debido a que el cdigo situado entre etiquetas <STYLE> no es cdigo HTML, sino cdigo CSS, por lo que es posible que algunos navegadores antiguos no lo reconozcan y puedan producirse errores al cargar la pgina. De este modo quedar oculto para aquellos navegadores que no soportan hojas de estilo.
Pgina 73
Definicin de estilos en la etiqueta <STYLE>

Entre las etiquetas <STYLE> se definen las caractersticas de los estilos. Tras esta etiqueta de apertura, aade la seal de comienzo de comentario y, justo antes de la etiqueta </STYLE> de cierre, la seal de final de comentario. Para hojas de estilo que establecen el formato de etiquetas, entre las marcas de comentario, introduce el nombre de la etiqueta HTML seguido de las propiedades del estilo escritas entre llaves y, en caso de existir ms de una propiedad para una misma etiqueta, sepralas con un punto y coma. Al igual que hacas para las hojas de estilo internas, el valor de las propiedades se asigna utilizando dos puntos en lugar del signo igual. En caso de que quieras definir un mismo estilo para varias etiquetas, separa sus nombres por comas y define el estilo una nica vez. Como ya se ha explicado, la definicin de estilos debe realizarse entre las marcas de comentario HTML . Por lo que si deseas introducir un comentario en la definicin de estilos, dispones de marcas de comentario CSS . Para iniciar un comentario CSS escribe /* y, una vez lo hayas finalizado, aade los caracteres */ para cerrar el comentario.
Pgina 74
Programacin HTML
TEMA 14: HOJAS DE ESTILO EXTERNAS
Pgina 75
Introduccin
Con las hojas de estilo internas, es posible determinar un estilo para un elemento definido por una etiqueta HTML . Con las hojas de estilo a nivel de documento, se definen estilos para una o varias etiquetas HTML utilizadas en un mismo documento. Gracias a las hojas de estilo externas, puedes definir estilos para una o varias etiquetas HTML que pueden ser utilizados por varios documentos HTML . Esto facilita la creacin de sitios Web con varias pginas, ya que podrn disponer de estilos homogneos sin necesidad de repetir las hojas de estilo en cada documento. Para utilizar este tipo de hojas de estilo debes crear un documento con extensin .css que contenga la definicin de estilos y vincularlo desde todos los documentos HTML a los que quieras aplicar estos estilos. Dentro de un documento CSS nicamente puedes incluir cdigo CSS, es decir,definiciones de hojas de estilos y comentarios CSS .
Vincular hojas de estilo

Para vincular una hoja de estilo en un documento HTML debes incluir la etiqueta <LINK> entre las etiquetas <HEAD>. Esta etiqueta contiene tres atributos.
Pgina 76
El atributo rel indica al navegador el tipo de informacin que contiene el archivo vinculado al documento HTML . En este caso el valor del atributo debe ser styles-heet que significa hojas de estilo. El atributo href indica la ubicacin y el nombre del documento vinculado. El atributo type indica el tipo de contenido del documento vinculado, en este caso ser text/css .
Pgina 77
Programacin HTML
TEMA 15: HERENCIA DE ESTILOS
Pgina 78
Jerarqua de los estilos

Dentro de un documento HTML puedes vincular ms de un archivo css . El archivo que se impone ser el vinculado en ltimo lugar. Tambin es posible emplear los tres tipos de hojas de estilo dentro de un mismo documento, de ah el nombre de hojas de estilo en cascada. En un documento donde se utilizan hojas de estilo internas, a nivel de documento y externas, si se encuentra definida una misma propiedad en los tres tipos de hojas de estilo, el valor dominante ser el definido en la hoja de estilo interna.
Si no estuviese definido en la hoja de estilo interna, prevalecer el establecido en la hoja de estilo a nivel de documento y, en caso de no estar definido en estos dos primeros tipos, se tomar el valor establecido en la hoja de estilo externa. Dentro de todo documento HTML existe una jerarqua de etiquetas. Por ejemplo, es posible definir un color de texto en las etiquetas <BODY> y <P> , siendo <BODY> una etiqueta padre y <P> la etiqueta hija. Esto quiere decir que si se define un mismo atributo en la etiqueta <BODY> y en la etiqueta <P> , se mostrar el valor establecido en la etiqueta hija, es decir, la etiqueta <P> .
Pgina 79
Si no se establece un valor en la etiqueta hija, sta tomar el valor establecido en la etiqueta padre. Es decir, si no se define el color del texto para el prrafo, pero s se ha definido para el cuerpo del documento, el color del prrafo ser el establecido en la etiqueta <BODY> . En caso de introducir una etiqueta <SPAN> dentro del prrafo, el estilo que se impondr para el texto contenido entre sta y su etiqueta de cierre, ser el definido por su atributo style .
Pgina 80
Programacin HTML
TEMA 16: DISCRIMINACIN DE ESTILOS
Pgina 81
Estilos en funcin del contexto

Se pueden definir estilos en funcin del contexto, en lugar de definir estilos para una etiqueta. Es decir, definir un estilo distinto para una etiqueta, dependiendo de si est encerrada o no dentro de otra etiqueta, y del tipo de esta ltima. Por ejemplo, imagina que quieres que un texto en negrita aparezca en color rojo y con tamao 11 cuando se encuentre dentro de un prrafo y, en caso de encontrarse dentro de una lista, el tamao sea 9 puntos. Adems, supn que estableces los estilos condicionales en una hoja de estilos a nivel de documento.
Para ello, en la definicin de estilos, escribe el nombre de las dos etiquetas necesarias para establecer la condicin separadas por un espacio en blanco. El texto al que se aplique ese formato deber estar encerrado entre las dos etiquetas que definen el estilo. Recuerda que si las separas por una coma, el formato se aplicara a todo elemento situado entre cualquiera de las dos etiquetas.
Clases
Puede suceder que, al crear un sitio Web, crees tambin una hoja de estilos para establecer los formatos que se aplicarn a todas las pginas del sitio, dndole a ste un aspecto homogneo. Pero, en ocasiones, puedes querer variar este formato en una pgina o conjunto de pginas.
Pgina 82
Si deseas hacerlo en una nica pgina, es suficiente con reestablecer los estilos creando una hoja de estilos a nivel del documento (recuerda la jerarqua que se establece para las hojas de estilo en cascada). Pero si deseas modificar los estilos para un conjunto de pginas del sitio, dispones de otra opcin ms eficiente. En este caso, la mejor opcin es crear clases en el documento de definicin de estilos. Una clase es una definicin de un estilo que en principio no est asociado a ninguna etiqueta HTML , pero que puedes aplicar en el documento a etiquetas concretas.
Definicin de clases
Para definir una clase aade el carcter punto delante del nombre de la clase y, a continuacin, define sus propiedades colocndolas entre llaves. Las propiedades se definen igual que hasta ahora, escribiendo el nombre de la propiedad seguida de dos puntos y su valor, y separando las propiedades mediante punto y coma. Para aplicar una clase a una etiqueta, incluye el atributo class dentro de la etiqueta y asgnale el nombre de la clase.
Pgina 83
Es posible definir tantas clases como desees, y puedes hacerlo tanto en hojas de estilo externas como a nivel del documento.
La etiqueta DIV
En apartados anteriores se coment el uso la etiqueta <SPAN> permite redefinir estilos en cualquier ubicacin del documento. que
Ahora se explicarn las caractersticas de la etiqueta <DIV> empleada para delimitar zonas del documento y aplicarles un estilo definido dentro de una clase. La etiqueta <DIV> funciona como un contenedor y todas las etiquetas contenidas entre la etiqueta <DIV> de apertura y su correspondiente etiqueta de cierre se visualizarn con los formatos descritos en esta etiqueta. Lo ms comn es que utilices esta etiqueta para aplicar los estilos de una clase a una porcin del documento independientemente de las etiquetas que contenga. Para ello, sita las etiquetas HTML correspondientes a los elementos a los que deseas aplicar el estilo entre etiquetas <DIV> . En la etiqueta <DIV> de apertura aade el atributo class al que asignars como valor el nombre de la clase donde se encuentran definidos los estilos.
Pgina 84
Programacin HTML
TEMA 17: CAPAS
Pgina 85
Introduccin a las capas

Las capas permiten situar elementos en cualquier parte de una pgina Web, incluso colocar un elemento encima de otro. Tambin es posible ocultar un elemento, para que el usuario lo muestre cuando quiera, pero para ello no basta con los conocimientos adquiridos hasta el momento, se necesitar el apoyo de un lenguaje como JavaScript que se estudiar ms adelante.
La etiqueta <DIV>
Para incluir un elemento dentro de una capa debes situarlo entre etiquetas <DIV> y, en la etiqueta de apertura, aadir el atributo style . En el atributo style define la propiedad position con el valor absolute para indicar que a continuacin van a definirse las coordenadas de la esquina superior izquierda de la capa. Esta propiedad tambin puede tomar el valor relative , pero en este caso no permitir definir la posicin absoluta del elemento, por lo que quedara ubicado de igual forma que si no se empleasen capas.
Pgina 86
Detrs de la propiedad position, incluye la propiedad top que determina la distancia en pxeles desde el borde superior de la pgina (tambin es posible utilizar porcentajes). Por ltimo, especifica la distancia al borde izquierdo mediante la propiedad left .
Atributos de la etiqueta <DIV>

Para definir la anchura y la altura de la capa emplea las propiedades width y heig-ht que ya has utilizado como atributos de etiquetas HTML. NOTA Debes tener en cuenta que el tamao de la capa debe ser igual o mayor al tamao del elemento que contiene, de lo contrario, el navegador ignorar estas propiedades al mostrarla. Adems de estas propiedades, puedes utilizar cualquier otra propiedad del atributo style en la etiqueta <DIV>, como por ejemplo, la propiedad background-color para definir el color de fondo de la capa. Para hacer invisible una capa aade la propiedad visibility en el atributo style . Esta propiedad puede tomar el valor visible para mostrarla y hidden para ocultarla. Pgina 87
nicamente debes ocultar una capa en caso de que vayas a mostrarla posteriormente mediante un cdigo JavaScript , de lo contrario no tendra sentido crear un elemento que no se va a mostrar en una pgina. Es necesario incluir tambin el atributo id en la etiqueta <DIV> . El valor de este atributo, ser el nombre de la capa que posteriormente se emplear como identificador de la capa en el cdigo JavaScript , de otro modo no se podra trabajar con ella.
Pgina 88
Programacin HTML
TEMA 18: OTRAS UTILIDADES
Pgina 89
Aspecto del cursor

Utilizando la propiedad cursor se puede cambiar la forma del puntero del ratn por cualquiera de los valores que se listan a continuacin. Para ello introduce el atributo style en la etiqueta deseada, despus la propiedad y, por ultimo, el valor. Los valores que se pueden utilizar son: crosshair , hand , move , text , wait , help o resize . Si colocas este cdigo en la etiqueta <BODY> , el valor descrito ser el que defina el cursor en toda la pgina.
Si lo colocas, por ejemplo, en un hipervnculo, cada vez que sites el cursor sobre l, el cursor cambiar.
Barra de desplazamiento
Es posible cambiar los colores de las barras de desplazamiento mediante hojas de estilo CSS . scrollbar-face-color indica el color de la base de la barra. scrollbar-highlight-color determina el color del borde resaltado de la barra.
Pgina 90
scrollbar-shadow-color define el color de la sombra del borde. scrollbar-3dlight-color especifica el color de la dimensin de la barra. scrollbar-arrow-color establece el color de las flechas. scrollbar-track-color precisa el color del fondo.
Propiedades de los vnculos

Para cambiar el formato de los vnculos mediante hojas de estilo emplea link (hipervnculo), visited (vnculo visitado), active (vnculo activo) y hover , que representan los diferentes estados de los vnculos. El estado hover se refiere al momento en que el puntero del ratn se encuentra sobre el enlace, de esta manera puedes hacer que el vnculo cambie su estilo cuando el puntero pasa sobre l. La estructura para cambiar las propiedades de los hipervnculos es la siguiente: a:, el estado del vnculo y, entre corchetes, las propiedades a cambiar.
Pgina 91
Una propiedad exclusiva en estos estilos es text-decoration y sus valores pueden ser: none para que el vnculo aparezca sin subrayar, underline si prefieres que aparezca subrayado, overline para que tenga un subrayado superior y line-through para que el texto del vnculo se muestre tachado.
Elementos tipogrficos
Utilizando las propiedades first-line y firs-letter modificas el formato de la primera lnea o letra de un texto que se encuentre en un bloque de texto. La sintaxis ser p:, firs-letter para referirte a la primera letra o first-line para aludir a una lnea y, entre corchetes, las propiedades.
Pgina 92
Programacin HTML
TEMA 19: ETIQUETAS HTML
Pgina 93
Etiquetas
Etiquetas de formato
Pgina 94
Etiquetas de Tabla
Etiquetas de lista
Pgina 95
Atributos
Pgina 96

Programacion HTML PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Programacion HTML PDF

Uploaded by

Copyright:

Available Formats

Programacin HTML

2011 Grupo Euroformac

Programacin en HTML Manual de consulta

TEMA 1: INTRODUCCIN AL HTML

Qu es una Pgina Web?

Por qu aprender HTML?

Base del lenguaje: las etiquetas HTML

Estructura de un documento HTML

Cmo escribir y visualizar documentos HTML

Recomendaciones antes de empezar

TEMA 2: FORMATOS DE PGINA

Atributos de la etiqueta <BODY>: fondos

Atributos de la etiqueta <BODY> : mrgenes

Atributos de la etiqueta <BODY>: textos

TEMA 3: FORMATOS DE TEXTO

JPEG, PNG o BMP.

Dimensiones de una imagen

Anclas con nombre

Enlaces a direcciones de correo y archivos

TEMA 6: CREACIN DE LISTAS

TEMA7: CREACIN DE TABLAS

Estructura de las tablas

Atributos de las etiquetas

Cabecera, cuerpo y pie de una tabla

Qu son los frames?

El documento de definicin de marcos

<FRAMESET> <FRAME> <FRAME> <FRAME> </FRAMESET>

Atributos de la etiqueta <FRAME>

TEMA 10: ELEMENTOS ACCESORIOS

TEMA 11: INTRODUCCIN A DHTML

Hojas de estilo en cascada (CSS)

TEMA 12: HOJAS DE ESTILO INTERNAS

TEMA 13: HOJAS A NIVEL DE DOCUMENTO

Estructura de la etiqueta <STYLE>

Definicin de estilos en la etiqueta <STYLE>

TEMA 14: HOJAS DE ESTILO EXTERNAS

Vincular hojas de estilo

TEMA 15: HERENCIA DE ESTILOS

Jerarqua de los estilos

TEMA 16: DISCRIMINACIN DE ESTILOS

Estilos en funcin del contexto

TEMA 17: CAPAS

Introduccin a las capas

Atributos de la etiqueta <DIV>

TEMA 18: OTRAS UTILIDADES

Aspecto del cursor

Propiedades de los vnculos

TEMA 19: ETIQUETAS HTML

You might also like