Qué es HTML
y El HTML (Hyper Text Markup Language) es el lenguaje con

el que se escriben las páginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada, y que está compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del documento. y Un documento hipertexto no sólo se compone de texto, puede contener imágenes, sonido, vídeos, etc., por lo que el resultado puede considerarse como un documento multimedia. y Los documentos HTML deben tener la extensión html o htm, para que puedan ser visualizados en los navegadores (programas que permiten visualizar las páginas web). y Los navegadores se encargan de interpretar el código HTML de los documentos, y de mostrar a los usuarios las páginas web resultantes del código interpretado.

Los navegadores. Compatibilidad
y Como hemos dicho, el navegador instalado en el ordenador del usuario es

el que interpreta el código HTML de la página que visita por lo que a veces puede ocurrir que dos usuarios visualicen la misma página de forma distinta porque tienen instalados navegadores distintos o incluso versiones distintas del mismo navegador. y Los navegadores de hoy en día pretenden ser compatibles con la última versión de HTML. Es necesario realizar extensiones de los navegadores para que puedan ser compatibles con esta última versión. y Dos de los navegadores que continuamente están realizando extensiones son Internet Explorer y Netscape Navigator, que realizan extensiones incluso antes de que se establezcan los estándares, intentando incluir las nuevas funciones incluidas en los borradores. y Los navegadores tienen que ser compatibles con la última versión HTML para poder interpretar el mayor número posible de etiquetas. Si un navegador no reconoce una etiqueta, la ignora y el efecto que pretendía la etiqueta no queda reflejado en la página.

mientras que otras. y En este último caso también puede ocurrir que alguna etiqueta de la página solamente pueda ser interpretada por un navegador concreto. o se añaden nuevas etiquetas. y Como resultado a estas extensiones. . al incluir nuevos atributos o etiquetas del borrador de la última versión de HTML.y Para realizar las extensiones de estos navegadores se añaden nuevos atributos a las etiquetas ya existentes. habrán páginas cuyo código podrá ser interpretado completamente por todos los navegadores. por lo que nunca sería visualizada en su totalidad por ningún navegador. solo podrán ser interpretadas en su totalidad en los navegadores más actualizados. y otra etiqueta por un navegador diferente al anterior. y Uno de los retos de los diseñadores de páginas web es hacer las páginas más atractivas utilizando toda la potencia del lenguaje HTML pero teniendo en cuentas estos problemas de compatibilidades para que el mayor número de internautas vean sus páginas tal como las ha diseñado.

y Estos editores visuales pueden generar en ocasiones código basura. CutePage. de los cuales algunos tienen la ventaja de ser gratuitos. y Algunos de los editores visuales con los que podrás crear tus páginas web son Macromedia Dreamweaver. en otras ocasiones puede ser más efectivo corregir directamente el código por lo que resulta necesario saber HTML para poder depurar el código de nuestra páginas. . código que no sirve para nada. Adobe Pagemill. es decir. NetObjects Fusion. Microsoft Frontpage. Netscape Composer y Arachnophilia. HotDog Proffesional. Al poder ver en todo momento cómo quedará la página en el navegador. y generan automáticamente el código de las páginas. Hoy en día existen un gran número de editores que permiten crear páginas web sin la necesidad de escribir ni una sola línea de código HTML. Estos editores disponen de un entorno visual.Editores y Un editor es un programa que nos permiten redactar documentos. se facilita la creación de las páginas. y el uso de menús permite ganar rapidez.

que nos permitirá crear páginas a través del código HTML. para poder utilizar algún editor visual posteriormente. las imágenes. para tener que insertar nosotros mismos el código HTML. y Vamos a guardar todo las páginas que vayamos creando en una carpeta (a la vez tendrán subcarpetas con las páginas. Esto permite familiarizarse con el lenguaje. y A lo largo de este curso vamos a trabajar con el Bloc de notas para crear nuestras páginas. ya que se trata de un editor de textos muy sencillo de manejar. y Para crear páginas web escribiendo directamente el código HTML puedes utilizar la herramienta Wordpad o el Bloc de notas que proporciona Windows. y depurar el código cuando fuera necesario. etc.y Es aconsejable comenzar utilizando una herramienta lo más sencilla posible. .

a excepción de algunos elementos que no necesitan etiqueta de cierre. y Una etiqueta es un identificador encerrado entre los símbolos < y > de la siguiente forma y <xxx> Este es el inicio de una etiqueta y </xxx> Este es el cierre de una etiqueta y HTML no diferencia entre mayúsculas y minúsculas. También es posible anidar etiquetas. . es decir. Existen dos tipos de etiquetas. la de comienzo de elemento y la de fin o cierre de elemento. insertar etiquetas entre otras etiquetas de comienzo y de cierre.Etiquetas y Las etiquetas o marcas delimitan cada uno de los elementos que componen un documento HTML. salvo en algunas excepciones. y Cada uno de los elementos de la página se encontrará entre una etiqueta de comienzo y su correspondiente etiqueta de cierre.

MS Sans Serif">Bienvenidos a mi web</font></p> y y Este código daría como resultado el siguiente texto: Bienvenidos a mi web .y HTML es un lenguaje de presentación de datos. Arial.>..: y <p align="center"><font color="#993366" size=³24" face="Comic Sans MS. y HTML no distingue dos espacios seguidos.. y A continuación tenemos un ejemplo en el que tenemos la etiqueta <font. ni tampoco saltos de línea (existen etiquetas específicas para el salto de línea.> anidada dentro de la etiqueta <p. por lo que las etiquetas que nos encontraremos serán de presentación de la información en pantalla.

las etiquetas no se pueden 'cruzar'. y Para hacernos una idea de cómo crear una página html a través del Bloc de notas. en nuestro ejemplo hemos empezado por la etiqueta <p.> por lo que antes de cerrar la etiqueta <p.y Es importante anidar bien las etiquetas. antes de cerrar esta etiqueta hemos puesto la <font...>. vamos a crear una página web sencilla. y Seguidamente introduce. en el documento en blanco.>. con una línea de texto. y Lo primero que tienes que hacer es abrir el Bloc de notas...> debemos cerrar la etiqueta etiqueta <font. el texto siguiente: .

</FONT> </BODY> </HTML> y Guarda el documento con la extensión htm. con el nombre miprimpag. Puedes guardarlo a través del menú Archivo. . estoy haciendo pruebas.htm.y Ejercicio 0: y <HTML> <HEAD> <TITLE>MI PRIMERA PAGINA</TITLE> </HEAD> <BODY bgcolor="#FFCC99"> <FONT color="#CC3300" size=³15">Hola. opción Guardar.

estoy haciendo pruebas. estoy haciendo pruebas. verás que el título de la página es MI PRIMERA PAGINA.</font>. la página resultante es una página que solamente tiene una línea de texto. Este título ha sido establecido por la línea <title>MI PRIMERA PAGINA</title>. y El color de fondo de la página ha sido establecido por la línea <body bgcolor="#FFCC99">. debería abrirse automáticamente en el navegador que tengas instalado en tu ordenador. y Si observas la barra de título del navegador. se ha insertado a través de línea <font color="#CC3300" size=³15">Hola. .y Si abrimos el archivo. y El texto Hola. y Como puedes ver.

como el título del documento(que se pone entre las etiquetas <TITLE> y </TITLE> y El cuerpo.) y La estructura básica de una página es: <HTML> <HEAD> . comprendido entre las etiquetas <HEAD> Y </HEAD>.. etc. imágenes. Dentro del encabezamiento hay información del documento que no se ve en la pantalla.. </BODY> </HTML> . </HEAD> <BODY> .. Dentro del cuerpo está todo lo que queremos que aparezca en la pantalla principal (texto.Estructura de una página y Una página HTML está dividida en dos zonas principales: y El encabezamiento. comprendido entre las etiquetas <BODY> Y </BODY>..

Por ejemplo: (Guardarlo como EJEMPLO1) <HTML> <HEAD> <TITLE> MI PRIMERA PÁGINA DE PRUEBA</TITLE> </HEAD> <BODY> Aquí van las etiquetas que visualizan la página </BODY> </HTML> . (estas etiquetas las veremos más adelante). cuando la página esté cargada en él. y El título de la página es el que aparecerá en la parte superior de la ventana y Para asignar un título a una página es necesario escribir el texto deseado entre las etiquetas <title> y </title>. las etiquetas que podemos encontrar y más se utilizan son: <link>. y Estas etiquetas han de estar dentro de la cabecera. es decir. la etiqueta <meta> (pulsa sobre ella para obtener más información).y Entre las etiquetas <head> y </head>. <style>. entre las etiquetas <head> y </head>. <script>. y la etiqueta <title> que vamos a ver a continuación y Título de la página <title> del navegador.

y Todos estos elementos tienen que encontrarse entre las etiquetas <body> y </body>. . etc. tendremos que hacerlo manualmente. los formularios. las imágenes.y Cuerpo del documento <body> y El cuerpo del documento contiene la información propia del documento. que van justo debajo de la cabecera. el texto de la página. (También podemos hacer varios párrafos utilizando la etiqueta <p> y </p> (párrafo). es decir lo que queremos que se visualice. y Como HTML no ³entiende´ los santos de línea. utilizando la etiqueta <BR>.

y Ejemplo 2: y <HTML> y <HEAD> y <TITLE> Mi Primera Página De Prueba</TITLE> y </HEAD> y <BODY> y y y y y Primera línea de texto <br> Segunda línea de texto <br> Tercera línea de texto y </BODY> y </HTML> .

y Vamos a ver ahora las etiquetas de cabecera: <H1>. <H2>. </H5> y </H6> y Las cabeceras son como los capítulos de un libro. <H3>. Son textos que están preformateados con unas características. <H5> y <H6> y sus correspondientes etiquetas de cierre: </H1>. El tamaño mayor corresponde a <H1> y el menor a <H6> y Prueba a cambiar el nº en el siguiente ejemplo para ver el efecto: y <HTML> y y <HEAD> <TITLE> Mi página Web-1</TITLE> y </HEAD> y <BODY> y <H1> Prueba de etiqueta de cabecera</H1> y </BODY> y </HTML> . <H4>. </H3>. </H4>. </H2>.

imágenes. Esta etiqueta nos centra todo lo que esté dentro de ella. aunque todavía es muy sencilla. y Vamos a probar las dos: (Ejemplo 3) y <HTML> y <HEAD> y <TITLE> Mi página Web-1</TITLE> y </HEAD> y <BODY> y <H1><CENTER> Prueba de etiqueta de cabecera</CENTER></H1> y <HR> y Esta es mi primera página. esta etiqueta es <HR> y no tiene etiqueta de cierre. y <br> y Como el lenguaje HTML no es difícil. etc. pronto estaré en condiciones de hacer cosas más interesantes.y Una etiqueta que se utiliza dentro de las cabeceras (y de los párrafos) es la etiqueta <CENTER> y </CENTER>. y Podemos utilizar también una etiqueta que nos da un separador (una línea horizontal tan ancha como la pantalla). ya sea texto. y <p>Aquí va un tercer párrafo</p> y </BODY> y </HTML> .

y Ejercicios: . </Title> y <Head> y No podemos dejar ninguna etiqueta sin cerrar. la última en abrirse debe ser la primera en cerrarse: y <Head> y y <Title>«. es decir.y Cuando anidamos etiquetas.. NO podemos cruzarlas.

Debemos utilizar las minúsculas. y La separación de párrafos la obtenemos con <p> y </p>. De esta manera si necesitamos varias líneas en blanco podemos poner varias etiquetas <BR>.Etiquetas de texto y Si queremos poner un texto en la página Web sin ninguna característica especial. porque los caracteres especiales (que son los que van entre los símbolos & y . lo escribimos directamente.) sí que diferencian entre mayúsculas y minúsculas. y Si queremos poner más de un espacio en blanco entre dos palabras. . (La etiqueta <BR> no tiene etiqueta de cierre). debemos utilizar el código &nbsp (nonbreaking space). y Para insertar una línea en blanco utilizamos la etiqueta <BR>.

por lo que al igual que ocurre con los caracteres especiales < y >. como es el caso de la ñ y las letras acentuadas. para insertarlos como texto habría que escribir el nombre que los representa.Caracteres especiales y Los caracteres < y > son dos caracteres especiales que indican inicio y fin de etiqueta. Si se desea insertar estos caracteres como texto hay que escribir el nombre que los representa: y < Se representa con &lt. y > Se representa con &gt. y Existen otra serie de caracteres que no se visualizan correctamente en algunos navegadores. y A continuación se muestra una lista con algunos caracteres y el nombre con el que han de ser representados: .

&Aacute. &ccedil. &Uacute. &aacute. &middot. &iacute. &Iacute. &iexcl. &oacute. &#153 Carácter ¼ ç Ç ü Ü & ¿ ¡ " · º ª ¬ © ® Representación &euro. &ntilde. &reg. &gt.Carácter < > á Á é É í Í ó Ó ú Ú ñ Ñ Œ Representación &lt. &iquest. &amp. &Uuml. &copy. &ordm. &Oacute. &eacute. &uuml. &Ntilde. &not. &Eacute. &quot. &uacute. &ordf. . &Ccedil.

gina! .&nbsp.&nbsp.1&ordf. esta es mi&nbsp.p& aacute.Bienvenidos. para insertar el texto: y ¡Bienvenidos.Por ejemplo.&nbsp. esta es mi 1ª página! Habría que escribir: &iexcl.&nbsp.&nbsp.

Para tachar utilizamos la etiqueta <S> y </S> .Fuentes y Para poner en negrita utilizamos las etiquetas <B> y y y y y y </B> Para poner en cursiva utilizamos las etiquetas <I> y </I> Para subrayar utilizamos las etiquetas <U> y </U> Superíndices se escriben con <SUP> y </SUP>. Por ejemplo H2O se escribiría H<SUB>2</SUB>O. Subíndices se escriben con <SUB> y </SUB>. Por ejemplo: m2 se escribiría m<SUP>2</SUP>.

y Se puede cambiar relativamente con respecto a ese tamaño normal: y <FONT size=-1>Texto algo menor</FONT> y <FONT size=+1>Texto algo mayor</FONT> y <FONT size=+2>Texto aún mayor</FONT> y Con esto cambiaríamos el tamaño para las fuentes que se encuentren dentro de la etiqueta <FONT>. (dentro de la etiqueta <FONT>) y <FONT size=5>Texto en tamaño 5</FONT> y <FONT size=6>Texto en tamaño 6</FONT> Los tamaños del texto van del 1 al 7. . que normalmente se encuentra dentro de la etiqueta <P>.y Para cambiar el tamaño de las fuentes. El tamaño normal (también llamado tamaño base) es el 3. se utiliza el atributo SIZE.

poniendo al comienzo del documento (a continuación de la etiqueta <BODY>) esta etiqueta que cambiaría el tamaño base de 3 a 5: y <BASEFONT size=³5´> Tipo de las fuentes y Los navegadores utilizan por defecto un tipo de fuente (habitualmente Times New Roman). Si la letra no estuviera instalada en el ordenador. y Al confeccionar la página Web podemos forzar a que la letra sea diferente de la utilizada por defecto.y También podemos cambiar el tamaño base para toda la página. que el usuario pueden cambiar en la configuración del navegador. el usuario vería el texto con la fuente por defecto. .

separadas por una coma. y así sucesivamente. Hay que tener en cuenta que el tamaño de las letras varía mucho de una fuente a otra.y Para cambiar el tipo de letra se utiliza el atributo FACE=³nombre de la fuente´. o en su defecto con Courier </FONT> y No es conveniente basar el diseño de una página Web en una sólo fuente. entonces el texto adopta la forma de la segunda. Courier´> Este texto se verá en Arial. Si fallan todas el texto adopta entonces la fuente por defecto. Por ejemplo: <FONT FACE=³Arial. . Si falla la primera. para forzar a que el texto se vea en fuente Verdana pondríamos: <FONT FACE=³Verdana´> Este texto se verá con la fuente Verdana </FONT> y Se puede indicar en el atributo varias fuentes distintas. Por ejemplo.

Colores y El color en HTML se escribe con 6 nºs (agrupados de 2 en 2) en numeración hexadecimal (tiene 16 dígitos). y Los colores y #FF0000 y #00FF00 y #0000FF primarios. precedidos del símbolo #. según esta numeración son: Rojo Verde Azul . y Los dígitos que pueden tomar cada color son: 0123456789ABCDEF y En nuestro caso el nº menor es el 00 y el mayor el FF.

Así el rojo #FF0000 se puede hacer más oscuro con #AA0000. Así podemos convertir el rojo en rosa con #FF7070. y Para hacer que un color tenga un tono más suave (más pastel). se deben variar los dos colores haciéndolos más claros (número más alto). dejando los otros dos invariables. en una cantidad igual.y Otros colores son: y #FFFFFF Blanco y #000000 Negro y #FFFF00 Amarillo y Para hacer un color más oscuro. hay que reducir el número de su componente. . o aún más oscuro con #550000.

Cambiar el color de TODO el texto. Cambiar el color de UNA PARTE del texto. Se .Colores del Texto y Hay dos maneras de cambiar el color del texto: 1. Se consigue con el atributo TEXT dentro de la etiqueta <BODY>: <BODY TEXT=³#XXYYZZ´> </BODY> consigue con el atributo COLOR dentro de la etiqueta <FONT> <FONT color=³#FF0000´> Este texto es de color rojo </FONT> 2.

Tabla de colores Color Hexadecimal #FFFFFF #000000 #000080 #0000FF #008000 #008080 #00FF00 #00FFFF #800000 #800080 #808000 #808080 #C0C0C0 #FF0000 #FF00FF #FFFF00 Nombre white black navy blue green teal lime aqua maroon purple olive gray silver red fuchsia yellow .

utilizaremos la etiqueta <div> y </div> . cuyos valores pueden ser: y left (izquierda) y right (derecha) y center (centrado) y justify (justificado) y Si queremos que la separación entre párrafos sea menor. y La alineación del texto se realiza mediante el atributo align. en lugar de utilizar <p> y </p>.Atributos de párrafo y El texto de los párrafos va entre las etiquetas <p> y </p>.

Sangrado de texto y La sangría es un margen que se establece a ambos lados del texto. <blockquote> <blockquote> tengo el placer de comunicaros que hay una nueva secci&oacute. y Insertando el texto entre varias etiquetas <blockquote> y </blockquote> se consigue que los márgenes sean mayores. se inserta entre las etiquetas <blockquote> y </blockquote>. y Habría que escribir: y Queridos usuarios. tengo el placer de comunicaros que hay una nueva sección. para insertar el texto: Queridos usuarios.n. </blockquote> </blockquote> . y El uso de la etiqueta <blockquote> obliga a que el texto aparezca en una nueva línea. Para que un texto aparezca sangrado. y Por ejemplo.

Marquesina
y Las marquesinas son líneas de texto que pueden

desplazarse de un lado a otro de la ventana en forma de línea. y Para insertar una marquesina, es necesario insertar el texto entre las etiquetas <marquee> y </marquee>. y La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, aunque tiene atributos que se pueden cambiar:

y A través del atributo behavior puede modificarse el

tipo de movimiento. Puede tomar los siguientes valores:
y alternate (de lado a lado de la ventana, como si

rebotara en los extremos) y scroll (de un lado a otro, continuamente) y slide (de un lado a otro, pero una sola vez

y El atributo direction modifica la dirección en la que

se moverá el texto. Puede tomar los siguientes valores:
y down (de arriba abajo) y up (de abajo a arriba) y left (de derecha a izquierda) y right (de izquierda a derecha)

y También es posible establecer un color de fondo, a

través del atributo bgcolor. y Por ejemplo:
y <marquee bgcolor="#006699" behavior="alternate"

direction="right"> <p><font color="#FFFFCC" size="5">Esto es una marquesina </font></p> </marquee>

y También es posible insertar imágenes, tablas y otros

elementos entre las etiquetas <marquee> y </marquee>, no sólamente texto.

Puede medirse en: y y Porcentaje.Propiedades de HR (línea horizontal) y El separador horizontal <HR> se puede modificar su apariencia y posicionamiento en la página..Se escribe <HR SIZE=³20´> .Se escribe <HR WIDTH=³300´> (ocuparía 300 píxels) y SIZE (espesor).Se escribe <HR WIDTH=³75%´> (ocuparía el 75% de la página) Píxeles.. para ello utilizaremos los atributos: y WIDTH (anchura)..

Listas y Existen tres tipos diferentes de listas: y Listas desordenadas (no numeradas) y Listas ordenadas (numeradas) y Listas de definición y Las listas desordenadas (unordered lists) sirve para presentar cosas que no necesitan ir precedidas por un número. La etiqueta que define la lista es <UL> y </UL>. Cada uno de los elementos de una lista ha de insertarse entre las etiquetas <LI> y </LI>. La estructura es: y <UL> y y y y <LI>Mercedes</LI> <LI>Bmw </LI> <LI>Opel </LI> <LI>Seat </LI> y </UL> .

y Se puede anidar una lista dentro de otra. Por ejemplo: y <UL> y y y <LI>Mamíferes</LI> <LI>Peces</LI> y <UL> y <LI>Sardina</LI> y <LI>Bacalao</LI> y </UL> <LI>Aves</LI> .

La estructura es similar a la anterior.y Lista ordenada (ordered lists) sirven para presentar cosas en un orden determinado. En el resultado aparece un número correlativo para cada elemento. sólo que la etiqueta de entrada a la lista es <OL> y </OL>. Gómez</LI> <LI>Comida con Gerencia</LI> <LI>Llamar a la peluquería</LI> <LI>Recoger a mi suegra en el aeropuerto</LI> y </OL> . y Por ejemplo: y <OL> y y y y <LI>Reunión con el Sr.

que se consigue con la etiqueta <DD> (definition definition) y </DD>. La definición del término anterior. El nombre de lo definido. Las etiquetas que engloban la lista son <DL> y </DL>. y Ejemplo: y <DL> y <DT>Una cosa a definir</DT> y <DD>La definición de esa cosa</DD> y y <DT>Otra cosa a definir</DT> <DD>La definición de esa otra cosa y </DL> . que se consigue con la etiqueta <DT> (definition term) y </DT> 2.. Cada renglón de la lista tiene dos partes: 1.y Listas de definición (Definition List).Son apropiadas para glosarios (o definiciones de términos).

square (cuadrado) o disc (círuclo relleno). a (letras minúsculas). y En las listas ordenadas. I (nºs romanos en mayúsculas). . type puede tener estos valores: 1 (números). type puede tener estos valores: circle (círculo sin rellenar). y En las listas desordenadas.y Podemos utilizar en todas las listas. A (letras mayúsculas). i (nºs romanos en minúsculas). el atributo type que modifica la viñeta o la numeración.

Esto es un comentario al código que no se verá en pantalla--> .Comentarios y A veces. y Los comentarios se consiguen encerrando el texto entre estos dos símbolos: <!-. que nos pueden servir para recordar posteriormente lo que hicimos. y que no queremos que se vean en pantalla. necesitamos escribir comentarios en el documento HTML sobre el código.y --> y <!-.

Ejemplo de listas y comentarios y <HTML> y <HEAD> y <TITLE>Mi página Web-2</TITLE> y </HEAD> y <BODY> y <CENTER> y <H1>Mis aficiones</H1> y </CENTER> y <HR> y Sin un orden particular. mis <B> aficiones</B> son las siguientes: y <UL> y <LI>El cine</LI> y <LI>El deporte</LI> y <UL> <LI>Natación</LI> y <LI>Baloncesto</LI> y y y </UL> y <LI>La música </UL> .

y La música que más me gusta es <I>(en orden de preferencia):</I> y <!-.Aquí vamos a poner una lista ordenada numerada--> y <OL> y y y <LI>El rock </LI> <LI>El jazz </LI> <LI>La música clásica</LI> y </OL> y </BODY> y </HTML> .

Los enlaces se colocan entre las etiquetas <A> y </A>. Estos enlaces hacen que las páginas estén relacionadas unas con otras. por tanto. los enlaces tienen la siguiente estructura: y <A HREF=³xxx´>yyy</A> y Donde xxx es el destino del enlace e yyy es el texto indicativo del enlace (generalmente de un color distinto y subrayado) . y.Enlaces con otras páginas y Lo más importante de una página web son los enlaces entre documentos. la información que contienen dichas páginas también lo está. y Estructura de los enlaces.En general. A través del atributo HREF informamos de la dirección donde queremos ir..

3.Tenemos cuatro tipos: 1. 4. y Enlaces dentro de la misma página. en el caso de páginas muy extensas. Enlaces con una dirección de email.. Enlaces con otra página nuestra.y A veces.y Tipos de enlaces. 2. Enlaces dentro de la misma página. . nos puede interesar dar un salto desde una posición de la página a otra determinada. Enlaces con una página fuera de nuestro sistema.

lo que antes hemos llamado xxx. es y y y y decir. nos llevará al lugar indicado. debemos poner: <A NAME=³marca´></A> . La estructura de este tipo de enlace es: <A HREF=³#marca´>yyy</A> Y en el sitio exacto donde queremos saltar. el destino del enlace. Lo que antes hemos llamado yyy es el texto que aparecerá en distinto color y que pulsando sobre él.y En este caso. el sitio dentro de la página a donde queremos saltar se sustituye por #marca (la palabra marca puede ser cualquier palabra que queramos).

y Ejemplo: y Quiero saltar desde donde estoy al final de la página. Aquí pongo la siguiente etiqueta: y <A HREF=³#final´>Pulsa aquí para ir al final</A> y Y en el final del documento se pondría esta otra etiqueta: y <A NAME=³final´></A> .

En este caso la parte xxx hay que sustituirla por el nombre del archivo (completo. en ese sitio tenemos que colocar una marca y completar el enlace con esta marca.y Enlace con otra página nuestra. incluido la extension).. Ejemplo: <A HREF=³ejemplo4. .html´>Mis aficiones</A> Si queremos que vaya a un sitio concreto de otra página nuestra en lugar de ir al principio de la misma (que es donde va por defecto).(situadas en la y y y y misma carpeta) Lo normal es que nuestros enlaces sean a otras páginas.

y Ejemplo: y En la página destino colocamos <A NAME=³marca´></A> y En la página principal colocamos: y <A HREF=³ejemplo4. y Si la página de destino está en una carpeta fuera del mismo directorio: ³.html#marca´>Pulsa</A> y Si la página de destino no se encuentra en el mismo directorio (carpeta) de la página donde ponemos el enlace. Los dos puntos hacen referencia al directorio anterior./ejemplo4. tenemos que indicar la carpeta donde se encuentra la página indicando: y Si la página de destino está en una carpeta dentro del mismo directorio: ³practicas/ejemplo4. .html´..html´.

atrapalo. o URL. minúsculas. Ejemplo: <A HREF=³http://www.com´>Ofertas</A> Es importante escribir exactamente el nombre de la página. etc. respetando las mayúsculas. . debemos conocer su dirección completa.y Para enlazar nuestra página con una página que esté y y y y fuera de nuestro sistema. Lo que debemos hacer es colocar esta dirección sustituyendo los caracteres xxx del ejemplo general.y Enlace con una página fuera de nuestro sistema.

y (Lo mejor para enviar un correo es utilizar un formulario que lo envíe mediante el servidor. sustituimos el destino del enlace (xxx) por y mailto:dirección de email y La estructura es: y <A HREF=³mailto:Dirección_de_Email´>Texto del enlace</A> y Ejemplo.com´>aquí</A>.y Enlace con una dirección de email. Es más seguro) .y En este caso.y Pida información por e-mail <A HREF= ³mailto:info@ggg.

. y _top: abre el documento vinculado en la ventana completa del navegador y La estructura de la etiqueta con el atributo target es: y <A HREF=³dirección completa´ target=³_blank´>texto</A> . y _parent: abre el documento en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre.y Destino del enlace. y _self: abre el documento en la misma ventana en la que está el vínculo (esta es la opción por defecto). y El destino se especifica con el atributo target dentro de la etiqueta <A> y Este atributo puede tomar los siguientes valores: y _blank: abre el documento en una nueva ventana del navegador.El destino del enlace determina en qué ventana va a ser abierta la página vinculada.

. estos cambios están predefinidos en cada navegador.En general un texto que tiene un vínculo suele aparecer subrayado.y Formato de los enlaces. . alink (vínculo activo). y Los colores de los vínculos pueden especificarse a través de las propiedades de la página. y Normalmente los vínculos de texto cambian de color cuando el enlace ha sido ya pulsado o cuando el puntero del ratón se posiciona sobre él. en la etiqueta <BODY>. Estos colores se asignan a través de los atributos link (vínculo). y vlink (vínculo visitado). pero nosotros podemos cambiar esos colores.

y vlink permite determinar el color de los enlaces visitados (enlaces que ya han sido pulsados). el enlace será de color naranja (#FF9900): y www. y Ejemplo: y <BODY link="#FF0000" vlink="#FF0099" alink="#FF9900"> <A HREF="http://www.aulaclic.com.lidersystem.lidersystem.aulaclic.y link permite determinar el color de los enlaces sin visitar (enlace que no ha sido pulsado ninguna vez). y alink permite determinar el color del enlace activo (enlace que acaba de ser pulsado). el enlace será de color rojo (#FF0000): y www. lidersystem.com</a> y Mientras no se visite la página www.com .aulaclic.aulaclic.com y Cuando se haya visitado la página www.com" TARGET ="_blank">www.com sea la última visitada. el enlace será de color fucsia (#FF0099): y www.lidersystem.com y Mientras la página www.com.

Dicha etiqueta no necesita etiqueta de cierre. debemos indicarlo dentro de las comillas. y La estructura de la etiqueta es la siguiente: y <IMG SRC=³imagen. y El nombre de la imagen ha de especificarse a través del atributo SRC. y Si la carpeta imágenes está en el mismo directorio que la página.gif´> y Para indicar la carpeta en la que se encuentra la imagen.gif´> . escribiremos: y <IMG SRC=³Imágenes/imagen.Imágenes y Para insertar una imagen es necesario insertar la etiqueta <IMG>.

y Los formatos más utilizados son el GIF y el JPG. pero el tamaño de la imagen es mayor y tarda más en descargarse se utilizan más para fotos. son más recomendables debido a que ocupan menos memoria. al poder contener millones de colores.gif´> y Formato de la imagen. Formato JPG: Las imágenes son de mayor calidad que las GIF.y Si la carpeta imágenes no se encuentra en el mismo directorio. utilizaremos la notación y <IMG SRC=³ . que a pesar y y y y de ser imágenes de menor calidad que las imágenes BMP. Vamos a ver un poco más sobre estos formatos: Formato GIF: Utilizan un máximo de 256 colores../imágenes/imagen. y son recomendables para imágenes con grandes áreas de un mismo color o de tonos no continuos. . Suelen utilizarse con gran frecuencia. ya que permiten definir transparencias y animación.

y Podemos incluir imágenes en otros formatos. Photoshop. Corel Draw. como pueden ser Fireworks. etc. que podrán ser visualizadas en algunos navegadores. . exportar a tipo gif que reduce considerablemente la ocupación de la imagen sin perder en calidad (siempre que la imagen se adecue al formato). Por ejemplo el Fireworks de Macromedia tiene una opción. Este es el caso de las imágenes BMP y PNG. y Podemos cambiar el formato de las imágenes mediante la utilización de algún programa de tratamiento de imágenes.

ya que dicha imagen no se encuentra en el mismo directorio que el documento actual. aparece un recuadro blanco con una X roja en su lugar. gracias al atributo ALT.gif" alt="Imagen gato" > y Pero hemos cometido un error. junto con el nombre de la imagen. cosa que puede ocurrir al especificar mal el valor del atributo SRC. y Podemos hacer que en lugar de mostrarse el nombre de la imagen aparezca el texto que nosotros deseemos. deseamos mostrar una imagen llamada gatito. En lugar de la imagen se mostrará lo siguiente: .y Texto alternativo y Cuando una imagen no puede ser visualizada en el navegador. sino que se encuentra dentro de la carpeta imagenes. para ello insertamos el siguiente código: y <img src="gatito.gif. y Por ejemplo. con el texto alternativo Imagen gato.

X Imagen gato y Si en lugar del código anterior hubiéramos insertado el siguiente código: y <img src="imagenes/gatito.gif" alt="Imagen gato" > y La imagen habría mostrado correctamente: .

y El texto alternativo se muestra también al situar el puntero sobre la imagen. verás como aparece el texto Imagen gato. . y El texto alternativo es muy útil a la hora de diseñar páginas más asequibles a los invidentes ya que los programas lectores son capaces de leer el texto alternativo. Si situamos el puntero sobre la imagen durante unos segundos.

a no ser que la imagen contenga un enlace. que indican el grosor en píxeles del borde. y Ejemplo: y <IMG SRC=³imagenes/gatito. en cuyo caso el color del borde será el color establecido para los vínculos.gif border=³4´></A> y Si no queremos que la imagen tenga borde hay que establecer obligatoriamente border=³0´ .y Podemos hacer que una imagen tenga borde añadiendo el atributo border a la etiqueta <IMG> y Este atributo puede tomar valores numéricos. y Para insertar un vínculo en una imagen el código es: y <A HREF=www.com target=³_blank´><IMG SRC=³imagenes/gatito.gif BORDER=³4´> y El borde de la imagen siempre será de color negro.lidersystem.

Tamaño de una imagen y Cuando insertamos una imagen. y El valor que pueden tomar los atributos WIDTH y HEIGHT ha de ser un número. pero por diversos motivos puede interesarnos modificar dicho tamaño. Dicho cambio de tamaño no se aplica directamente sobre el archivo de imagen. es mejor. . cambiar estos atributos con un programa de retoque de imágenes. esta se muestra en los navegadores con su tamaño original. sino que lo que varía es la visualización de la imagen en el navegador. y A través de los atributos WIDTH (anchura) y HEIGHT (altura) puede modificarse el tamaño de la imagen. acompañado de % cuando se desee que sea en porcentaje con respecto a la página. ésta puede quedar distorsionada. y Al cambiar la anchura y la altura de la imagen.

Este atributo indica la alineación de las imágenes con respecto a la línea de texto en la que se encuentran.Texto alineado abajo y Ejemplo..Alineación de una imagen y La alineación de las imágenes se establece a través del atributo ALIGN...y <IMG SRC=³Imagenes/gatito.Texto alineado arriba y MIDDLE.gif ALING=³MIDDLE´> .Texto alineado en medio y BOTTOM. y Los valores del atributo ALIGN pueden ser: y TOP.

y Para alinear una imagen con respecto a la página,

y y y y

también utilizamos el atributo ALIGN. En este caso puede tomar los valores: RIGHT.- Alinea la imagen a la derecha de la página LEFT.- Alinea la imagen a la izquierda de la página CENTER.- Alinea la imagen en el centro de la página. Si necesitamos poner ambas alineaciones (al texto y a la página) es más conveniente poner el centrado respecto de la página en la etiqueta <p> en lugar de en la etiqueta <img> para evitar repetir el atributo en la imagen.

y Podemos utilizar una imagen como fondo de nuestra página. Para ello tenemos que utilizar el atributo BACKGROUND, dentro de la etiqueta BODY. y El código es: y <BODY BACKGROUND=³imagen.gif´> y La imagen puede ser gif o jpg. y Si un navegador tiene deshabilitado la carga de imagen, ésta imagen de fondo tampoco se vería, por lo que es conveniente escoger un color de fondo uniforme, para el caso de no cargar dicha imagen. y El color de fondo ha de ser lo más parecido posible a la imagen, para que así se pueda leer el texto. y El código completo será: y <BODY BACKGROUND=³imagen.gif´ BGCOLOR=³color´

y Ejemplo.- Vamos a poner como fondo una imagen

de nubes, junto con un fondo alternativo de color azul claro y hacer que el texto sea de color rojo oscuro.
y <HTML> y <BODY BACKGROUND=³Imagenes/nubes.jpg´

BGCOLOR=³#CCFFFF´ TEXT=³#AA0000´>
y y y

Línea de texto 1 <BR><BR> Línea de texto 2

y </BODY> y </HTML>

pero gracias a las tablas es posible distribuir el texto en columnas. que son los recuadros que se obtienen como resultado de la intersección entre una fila y una columna.Tablas y Hoy en dia. y otra serie de cosas que sin las tablas serían imposibles de realizarse. la mayoría de las páginas web se basan en tablas. y Todos los objetos se alinean por defecto a la izquierda de las páginas web. colocar imágenes al lado de un bloque de texto. ya que resultan de gran utilidad al mejorar notablemente las opciones de diseño. y Las tablas están formadas por celdas. .

y Por ejemplo...</TR> <TR>.y Para crear una tabla hay que insertar las etiquetas <TABLE> y </TABLE>..</TR> </TABLE> .</TR> <TR>.. Estas etiquetas deberán insertarse entre las etiquetas <TABLE> y </TABLE>...</TR> <TR>. para crear una tabla con cinco filas escribiríamos: y <TABLE> <TR>.</TR> <TR>. Fila <TR> y Es necesario insertar las etiquetas <TR> y </TR> por cada una de las filas de la tabla. Entre dichas etiquetas habrá que especificar las filas y columnas que formarán la tabla.....

Por lo tanto. por lo que podremos especificar el número de celdas por fila. y Una celda es el resultado de la intersección entre una fila y una columna. y Entre las etiquetas <TD> y </TD> se podrá especificar el contenido de cada una de las celdas.Columna o celda <TD> y Para crear una tabla no basta con especificar el número de filas. habrá que insertar esas etiquetas entre las etiquetas <TR> y </TR>. es necesario también especificar el número de columnas. . y Es necesario insertar las etiquetas <TD> y </TD> por cada una de las celdas que compongan cada una de las filas de la tabla. que equivale a especificar el número de columnas por fila.

para insertar la siguiente tabla: Lunes Curso HTML Curso Frontpage Martes Curso Dreamweaver Curso Flash y Habría que escribir: y <TABLE BORDER="1"> <TR> <TD>Lunes</TD> <TD>Martes</TD> </TR> <TR> <TD>Curso HTML</TD> <TD>Curso Dreamweaver</TD> </TR> <TR> <TD>Curso Frontpage</TD> <TD>Curso Flash</TD> </TR> </TABLE> .Por ejemplo.

acompañado de % cuando se desee que sea en porcentaje un número un número un número left (izquierda) right (derecha) center (centro) número hexadecimal imagen número hexadecimal bgcolor background bordercolor color de fondo imagen de fondo color del borde .Formato de la Tabla Es osible modificar los si uientes atributos de una tabla: Atributo width height cellpadding cellspacing border align Significado ancho de la tabla altura de la tabla espacio entre el contenido de las celdas y el borde espacio entre celdas grosor del borde alineación de la tabla dentro de la página Posibles valores un número. acompañado de % cuando se desee que sea en porcentaje un número.

.y Por ejemplo. que el borde (border) tiene un grosor de dos píxeles.. vamos a modificar la tabla anterior: y Escribimos los atributos en la etiqueta table: y <table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000" bgcolor="#FFCC99"> . que no hay espacio entre las celdas (cellspacing="0"). que el borde la tabla es negro (#000000) y el fondo naranja (#FFCC99). que la tabla está alineada al centro (center) de la ventana.. </table> y Con esto indicamos que el ancho (width) de la tabla debe ocupar el 50% del ancho de la ventana (lo puedes comprobar cambiando el ancho de la ventana de tu navegador y verás que el ancho de la tabla varía para ocupar siempre la mitad de la ventana).

Formato de Celdas Es osible modificar los si uientes atributos de una celda ( ay que añadir el atributo en la etiqueta <TD>: Atributo width height align valign Significado ancho de la celda altura de la celda alineación horizontal del contenido de la celda Posibles valores un número. acompañado de % cuando se desee que sea en porcentaje un número. acompañado de % cuando se desee que sea en porcentaje left (izquierda) right (derecha) center (centro) baseline (línea de base) bottom (inferior) middle (medio) top (superior) número hexadecimal número hexadecimal número hexadecimal alineación vertical del contenido de la celda bgcolor background bordercolor color de fondo imagen de fondo color del borde .

especificándolos en la etiqueta <TR>. y Hay que tener en cuenta que los atributos tienen más prioridad cuando son establecidos para una celda que cuando son establecidos para una fila completa. Al mismo tiempo. tienen más prioridad los atributos establecidos para una fila que los establecidos para toda la tabla. en lugar de en la etiqueta <TD>.y También es posible modificar estos atributos de toda una fila. Por ejemplo: y <table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000" bgcolor="#FFCC99"> <tr align="center" bgcolor="#0099CC"> <td>Lunes</td> <td bgcolor="#66CC99">Martes</td> </tr> <tr> <td>Curso HTML</td> <td>Curso Dreamweaver</td> </tr> <tr> <td>Curso Frontpage</td> <td>Curso Flash</td> </tr> </table> .

y Para la etiqueta <TH> es posible especificar los mismos atributos que para la etiqueta <TD>. pero esta nueva etiqueta hace que el texto de la celda aparezca centrado y en negrita. y Por ejemplo: y <table width="50%" border="1" align="center"> <tr> <th>Lunes</th> <th>Martes</th> </tr> <tr> <td>Curso HTML</td> <td>Curso Dreamweaver</td> </tr> <tr> <td>Curso Frontpage</td> <td>Curso Flash</td> </tr> </table> .Encabezado de columna <TH> y Las etiquetas <TD> y </TD> se utilizan para definir las celdas de cada una de las filas. por lo que se utiliza para definir los encabezados o títulos de las columnas. pero podemos poner en su lugar las etiquetas <TH> y </TH>.

. </TR> </TABLE> . también es posible establecer un título para la tabla mediante las etiquetas <CAPTION> y </CAPTION>. center. y Estas etiquetas han de ir después de la etiqueta <TABLE>. right y top) y VALIGN (con los valores bottom y top). y puede especificarse el valor de los atributos ALIGN (con los valores bottom. left.Título de tabla <CAPTION> y No solamente es posible establecer títulos para las columnas.. y Por ejemplo: y <TABLE WIDTH="50%" BORDER="1" ALIGN="center"> <CAPTION ALIGN="right" VALIGN="top">Titulo de la tabla</CAPTION> <TR> <TH>Lunes</th> .

ara insertar la si uiente tabla: DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE PERRO DIFERENCIAS PEQUEÑO Duración crecimiento Tiempo de gestación Duración de vida del pelo/cabello 10 meses GRANDE 18 a 24 meses 16 años 9 meses 2 a 7 años HOMBRE 58 a 63 días 1 año . Para que quede más claro. y a través del atributo ROWSPAN se es ecifica el número de filas or las que se extenderá la celda. que se utilizan ara combinar celdas.Combinar celdas: Para las etiquetas <TD> y <TH> existen los atributos COLSPAN y ROWSPAN. Por ejem lo. A través del atributo COLSPAN se es ecifica el número de columnas or las que se extenderá la celda. vamos a ver un ejem lo de su uso.

y <table width="575" border="2" cellspacing="2"> <tr align="center" valign="middle"> <th colspan="4">DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE</th> </tr> <tr align="center" valign="middle"> <th rowspan="2">DIFERENCIAS</th> <th colspan="2">PERRO</th> <th rowspan="2">HOMBRE</th> </tr> <tr align="center" valign="middle"> <th>PEQUE&Ntilde.O</th> <th>GRANDE</th> </tr> .

os</td> </tr> <tr align="center" valign="middle"> <td>Tiempo de gestaci&oacute.n de vida del pelo/cabello</td> <td colspan="2">1 a&ntilde.y <tr align="center" valign="middle"> <td>Duraci&oacute.o</td> <td>2 a 7 a&ntilde.n</td> <td colspan="2">58 a 63 d&iacute.os</td> </tr> </table> .n crecimiento</td> <td>10 meses</td> <td>18 a 24 meses</td> <td>16 a&ntilde.as</td> <td>9 meses</td> </tr> <tr align="center" valign="middle"> <td>Duraci&oacute.

emos tenido que abrir en el nave ador el documento marcos. contiene un documento HTML individual. en la ima en de la derec a uedes ver una á ina con dos marcos. mientras que otras sí ueden cambiar. .htm y el derec o el documento perros. El marco izquierdo contiene el documento menu. como ueden ser el lo oti o y la barra de nave ación.htm. ya que ermiten mantener fijas al unas artes. Para oder visualizar la á ina de este modo. ueden mejorar también la a ariencia.htm. Por ejem lo. Además de mejorar la funcionalidad. Cada uno de los marcos de una á ina. que es el que en este caso contiene el ru o de marcos.FRAMES (MARCOS) Los marcos o frames sirven ara distribuir mejor los datos de las á inas.

y Si queremos utilizar marcos debemos crear una página con la definición del conjunto de marcos (en el ejemplo anterior la página marcos. ya que el cuerpo del documento será el cuerpo de las páginas que se carguen en cada uno de los marcos del conjunto de marcos. . y Cuando se insertan las etiquetas <FRAMESET> y </FRAMESET> no hay que insertar las etiquetas <BODY> y </BODY>. y Los conjuntos de marcos se definen a través de las etiquetas <FRAMESET> y </FRAMESET>. que van después de la etiqueta <HEAD>. cada uno de los cuales será una especie de subventana. A través de estas etiquetas se indica el número de marcos en que se dividirá la ventana.htm).

separados por comas. acompañado de % cuando se desee que sea en porcentaje número hexadecimal bordercolor color del borde . separados por comas. rows frameborder framespacing border aparece o no el borde de los marcos separación entre los marcos grosor del borde un número (acompañado de % cuando se desee que sea en porcentaje) por cada fila. yes no un número un número.Los atributos que ueden es ecificarse sobre la etiqueta < RAMESET> son los si uientes: Atributo cols Significado tamaño de cada una de las columnas en que se divide el documento tamaño de cada una de las filas en que se divide el documento Posibles valores un número (acompañado de % cuando se desee que sea en porcentaje) por cada columna.

</FRAMESET> y Como el atributo rows tiene el valor asterisco. y la segunda columna ocuparía lo que quedará de ventana (el 75% de la ventana menos 142 píxeles). la tercerá del 25% de la ventana. y Como el atributo cols tiene tres valores... que ocuparía todo el alto de la ventana. En este caso concreto no haría falta poner el atributo rows. Cuando existan varias columnas o filas con este valor. solo habría una fila.25%">. estaríamos dividiendo el documento en tres columnas. se repartirán de forma equitativa lo que quede de ventana. si insertáramos la siguiente línea de código: y <FRAMESET ROWS="*" COLS="142.*. .y También es posible incluir asteriscos como valores para los atributos cols y rows. La primera columna sería de 142 píxeles de ancho. Este valor indica que dicha fila o columna ocupará todo lo que quede de ventana o subventana. y Por ejemplo.

Marco <frame> y Para indicar qué documento se cargará en cada uno de los marcos habrá que insertar la etiqueta <FRAME> por cada uno de los marcos de la ventana. . Estas etiquetas estarán entre las etiquetas <FRAMESET> y </FRAMESET>. y no necesita etiqueta de cierre.

el usuario no podrá redimensionar el tamaño de este marco anchura del margen con respecto a los bordes del marco altura del margen con respecto a los bordes del marco se mostrará o no la barra de desplazamiento cuando la página del marco no se pueda visualizar completamente en él documento que se cargará en el marco Posibles valores yes o 1 no o 0 cualquier valor no puede tomar valores marginwidth marginheight scrolling un número.Es osible modificar los si uientes atributos de un marco: Atributo frameborder name noresize Significado aparece o no el borde del marco nombre del marco si aparece. acompañado de % cuando se desee que sea en porcentaje yes no auto ruta y nombre del documento src . acompañado de % cuando se desee que sea en porcentaje un número.

</body> </noframes> . Por ello. han de introducirse las etiquetas <body> y </body> entre las etiquetas <noframes> y </noframes>. Ejemplo: y <noframes> <body> Este documento tiene marcos y tu navegador no los soporta. y Si un navegador no soporta los marcos. no cargará ningún documento en ningún marco.y Las etiquetas <noframes> y </noframes> se utilizan para que su contenido sea visualizado en aquellos navegadores que no soportan los marcos. por lo que tendremos que mostrar el cuerpo del documento actual de algún modo.

que en el caso de intentar ser visualizada en un navegador que no soportase marcos. es crear nuevas páginas con el contenido de los documentos que deberían mostrarse en los marcos. y De este modo. . podemos incluir un enlace a una de estas páginas.y Obtendríamos una página con dos marcos. mostraría una página con el texto Este documento tiene marcos y tu navegador no los soporta». en el caso de que el navegador no soporte los marcos. pero que permitan pasar de unos a otros dentro de la misma ventana. y Una buena solución para que el mayor número de usuarios pueda visitar nuestra página.

<a href=«principal. .</a> </body> </noframes> y Cuando la página intentara ser visualizada en un navegador que no soportase los marcos. a una ventana sin marcos. aparecería el enlace Pulsa aqui para visualizar la página sin marcos.Ejemplo: y <noframes> <body> Este documento tiene marcos y tu navegador no los soporta.html">Pulsa aquí para visualizar la página sin marcos.

_self: Es la opción predeterminada. Vamos a recordar para qué servía cada uno de ellos. _parent. Abre el documento vinculado en el mismo marco o ventana que el vínculo. en el tema de hipervínculos vimos los y y y y posibles destinos de los enlaces. y _top. _self. _parent: Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre. _blank: Abre el documento vinculado en una ventana nueva del navegador. . Estos destinos podían ser _blank. _top: Abre el documento vinculado en la ventana completa del navegador. ya que ahora que sabes trabajar con marcos te serán más fáciles de entender.y Como recordarás. lo cual quiere decir que los marcos de la ventana desaparecerán al abrir el vínculo en ella.

lidersystem. etc. cargando unas u otras páginas en alguno de los marcos. también podrás y y y y y utilizar los nombres de los distintos marcos de la página.com" target="marcoderecho">LiderSystem en el marco derecho</a> Este enlace cargaría la página de aulaclic en el marco llamado marcoderecho.y Además de estos destinos para los enlaces. un elemento Flash. Esta tarea puede resultar algo pesada. Por ejemplo. . pero da muy buenos resultados finales. en una ventana nueva. Podemos añadir todos estos nuevos destinos a cualquier elemento de la página que contenga algún enlace. si tuvieramos un marco con el nombre marcoderecho. ya sea texto. Gracias a todo esto podremos hacer que las barras de navegación y el resto de enlaces funcionen a nuestro antojo. etc. una imagen. y al principio complicada. podríamos insertar el enlace: <a href="http://www. un mapa de imagen. en toda la ventana.

entre otras cosas. y botones. Un formulario está formado. por etiquetas. Es muy recomendable utilizar tablas para organizar los elementos de los formularios. y otra serie de datos sobre los usuarios. tienen multitud de aplicaciones. Los formularios se utilizan para conocer las opiniones. lo que facilita su comprensión y mejora su apariencia. campos de texto. Entre dichas etiquetas habrá que insertar los diferentes objetos que formarán el formulario. Utilizando tablas se consigue una mejor distribución de los elementos del formulario. Los formularios se insertan a través de las etiquetas <FORM> y </FORM>. dudas.Formularios y Un formulario es un elemento que permite recoger datos y y y y introducidos por el usuario. menús desplegables. para introducir pedidos a través de la red. .

y El valor get se utiliza cuando no se van a producir cambios en ningún documento o programa que no sea el navegador del usuario que pretende mandar el formulario. y Se recomienda utilizar el valor post. . como ocurre cuando se realizan consultas sobre una base de datos. o la dirección del programa que se encargará de procesar el contenido del formulario.La etiqueta <FORM> tiene los siguientes atributos: y El atributo ACTION indica una dirección de correo electrónico a la que mandar el formulario. Su valor puede ser get o post. como ocurre cuando el usuario manda datos que deben ser almacenados en una base de datos. y El atributo METHOD indica el método mediante el que se transferirán las variables del formulario. y El valor post se utiliza cuando sí se van a producir cambios.

.y Por ejemplo.com" method="post"> . podríamos insertar un formulario escribiendo el siguiente código: y <form action="mailto:formularios@lidersystem.. </form> .

habrá que insertarlo entre las etiquetas <TEXTAREA> y </TEXTAREA>. .Elementos de los formularios y Áreas de texto y Las áreas de texto permiten a los usuarios insertar varias líneas de texto. y Para insertar un área de texto es necesario incluir las etiquetas <TEXTAREA> y </TEXTAREA> entre las etiquetas <FORM> y </FORM> del formulario. y Para que el área de texto tenga algún valor inicial. suelen utilizarse para que se incluyan comentarios. Por ello.

. y más caracteres por línea de los especificados en el atributo cols. es posible insertar más líneas de las especificadas en el atributo rows. y Gracias a las barras de desplazamiento. para poder identificarlos a la hora de procesarlos. y El atributo cols indica el número de caracteres por línea que podrán ser visualizados en el área de texto por lo que determina al ancho del área de texto. y El atributo rows indica el número de líneas que podrán ser visualizadas en el área de texto por lo que determina al alto del área de texto. Es necesario dar nombres diferentes a cada uno de los elementos de un formulario.La etiqueta <TEXAREA> puede tener los siguientes atributos: y El atributo name indica el nombre del área de texto.

para insertar el área de texto: Escribe el texto que quieras y Habría que escribir: y <textarea name="ejemploarea" cols="30" rows="3">Escribe el texto que quieras</textarea> .y Por ejemplo.

y Esta etiqueta tiene los siguientes atributos: y name indica el nombre que se desea dar al elemento de entrada. resto de atributos que pueden definirse para cada uno de ellos. y Hay que añadir en la etiqueta <INPUT> los siguientes atributos: y size indica el número de caracteres que podrán ser visualizados en el campo de texto.Elementos de entrada y Para insertar un elemento de entrada es necesario incluir la etiqueta <INPUT> entre las etiquetas <FORM> y </FORM> del formulario. mediante el cual será evaluado y type indica el tipo de elemento de entrada. y value indica el valor inicial del campo de texto. Campo de texto: y Para insertar un campo de texto. y maxlenght indica el número de caracteres que podrán ser insertados en el campo de texto. y el . y Vamos a ver los diferentes tipos de elementos de entrada. determina el ancho de la caja. el atributo type debe tener el valor text». Esta etiqueta no tiene etiqueta de cierre.

para insertar el campo de texto: Cam o de texto y Habría que escribir: y <INPUT NAME="campo" TYPE="text" VALUE="Campo de texto" SIZE="20" MAXLENGTH="15"> .y Por ejemplo.

y El resto de atributos son los mismos que para un campo de texto normal. para insertar el campo de contraseña: ******* y Habría que escribir: y <input name="contra" type="password" value="contraseña" size="20" maxlength="15"> . y Por ejemplo. La única diferencia es que todas las letras escritas en el campo de contraseña serán visualizadas como asteriscos. el atributo type debe tener el valor password.Campo de contraseña: y Para insertar un campo de contraseña.

al pulsar sobre el botón no se realizará ninguna acción. para insertar el botón: Enviar y Habría que escribir: y <input name="boton" type="submit" value="Enviar"> . y El atributo value indica el texto que mostrará el botón. y Por ejemplo. borrándose todos los campos del formulario que hayan sido modificados y adquiriendo su valor inicial. y button. al pulsar sobre el botón se restablecerá el formulario. al pulsar sobre el botón se enviará el formulario al servidor.Botón: y Para insertar un botón. el atributo type debe tener el valor: y submit. y restore.

Casilla de verificación: y Para insertar una casilla de verificación, el atributo type debe tener el valor checkbox. y El atributo value indica el valor asociado a la casilla de verificación. Es necesario poner este atributo, aunque el usuario no pueda ver su valor. Es el valor a enviar. y La aparición del atributo checked indica que la casilla aparecerá activada inicialmente. Este atributo no toma valores. y Por ejemplo, para insertar la casilla: y Habría que escribir: y <input name="casilla" type="checkbox" value="acepto" checked>

Botón de opción: y Para insertar un botón de opción, el atributo type debe tener el valor radio. y El atributo value indica el valor asociado al botón de opción. Es necesario poner este atributo, aunque el usuario no pueda ver su valor. Es el valor a enviar. y La aparición del atributo checked indica que el botón aparecerá activado inicialmente. Este atributo no toma valores. y Los botones de opción se utilizan cuando se desea que una variable del formulario pueda tomar un solo valor de entre varios posibles. Para ello, se insertan varios botones de opción con el mismo nombre (que indica la variable) y con distintos valores. Sólamente uno de estos botones podrá estar activado, el que esté activado cuando se envia el formulario, su valor será el que tendrá la variable.

y Por ejemplo, para insertar los botones de opción:

y Habría que escribir: y <input name="prefiere" type="radio" value="estudiar" checked> <input name="prefiere" type="radio" value="trabajar"> y Cuando se envíe el formulario, si el primer botón está activado la variable prefiere será igual a estudiar, si es el segundo el activado, la variable prefiere valdrá trabajar. Observa que lo que ponemos como valor no aparece escrito en la página es un dato interno.

ayudándose de la tecla Ctrl. Este atributo no toma valores. y Para insertar uno de estos menús o listas es necesario insertar las etiquetas <SELECT> y </SELECT> en un formulario. y Esta etiqueta cuenta con los siguientes atributos: y name indica el nombre del menú o lista será el nombre de la variable que contendrá el valor seleccionado. y size indica el número de elementos de la lista que pueden ser visualizados al mismo tiempo.Campos de selección y Los campos de selección se utilizan para insertar menús y listas desplegables. determina el alto de la lista. y multiple indica que el usuario podrá seleccionar varios elementos de la lista al mismo tiempo. .

Si no se especifica este atributo. que se encuentra entre las etiquetas <option> y </option>. por lo que el usuario no podrá seleccionar sus elementos. y selected indica que el elemento aparecerá seleccionado. y Cada uno de los elementos de la lista ha de insertarse entre las etiquetas <OPTION> y </OPTION>. se enviará el texto de la opción.y disabled indica que la lista estará desactivada. Este atributo tampoco toma valores. y Esta etiqueta cuenta con los siguientes atributos: y value indica el valor a enviar si se selecciona el elemento. . Este atributo no toma valores.

y Ejemplo de lista desplegable: y <select name="mascota"> <option selected>--.Elige animal ---</option> <option>Perro</option> <option>Gato</option> </select> y Ejemplo de cuadro para elegir: y <select name="mascota³ size=³3´> <option selected>--.Elige animal ---</option> <option>Perro</option> <option>Gato</option> </select> .

incluso a veces permiten definir características que no permiten definir los estilos HTML. y Se usan principalmente para definir estilos que luego se aplicarán a las páginas de nuestro sitio. como el color de fondo para el texto por ejemplo. . y Al estar la definición de los estilos en un archivo externo a las páginas y común a todas las páginas del sitio (es recomendable) el aspecto de nuestras páginas será más homogéneo y además podremos cambiar ese aspecto de manera segura e inmediata cambiando únicamente la hoja de estilos.Hojas de Estilo (CSS) y Los estilos CSS (Cascading Style Sheets) son hojas de estilo de actualización automática.

y pueden guardarse con la extensión TXT.y Se pueden definir estilos independientes o estilos asociados a determinadas etiquetas por ejemplo a la etiqueta <a> (que corresponde a los hiperenlaces). . y El inconveniente que tiene trabajar con hojas de estilos es que algunos navegadores no las soportan y las ignoran. De este modo. por lo que ocurrirá en pocos casos. y Las hojas de estilo pueden crearse con cualquier editor de texto. todos los hiperenlaces de la página o del sitio adquirirían la apariencia definida en ese estilo y con un sólo cambio en la hoja de estilos podemos cambiar de golpe el estilo de todos los enlaces en todas las páginas vinculadas a este estilo. aunque estos navegadores suelen ser versiones antiguas. como puede ser el Bloc de notas.

por lo que su valor ha de ser stylesheet.txt" rel="stylesheet" type="text/css" > . Un documento puede tener varias hojas de estilo vinculadas. podríamos vincular una hoja de estilo escribiendo el siguiente código. y A través del atributo type se tiene que especificar que el archivo es de texto. por lo que su valor ha de ser text/css.Vincular una hoja de estilo y Para poder incluir las propiedades de una hoja de estilo en un documento. Esta etiqueta no necesita etiqueta de cierre. y A través del atributo rel se tiene que especificar que se está vinculando una hoja de estilo. y Para vincular una hoja de estilo a un documento es necesario insertar la etiqueta <LINK> en el documento. hay que vincularla a él. y A través del atributo href se especifica la hoja de estilo que se va a vincular al documento. y <link href="misestilos. entre las etiquetas <HEAD> y </HEAD>. con sintaxis CSS. y Por ejemplo.

y los valores se asignan con el símbolo : (dos puntos). o el nombre de una etiqueta HTML. o por el nombre de una etiqueta seguida de un punto. tiene que estar precedido por un punto.Sintaxis de las hojas de estilo y En primer lugar se pone el nombre del estilo. y entre llaves se especifica la lista de propiedades (en minúsculas) que se corresponden con dicho estilo. Para poder utilizar un nombre inventado. y El nombre del estilo puede ser un nombre inventado por nosotros. . Cada una de estas propiedades tiene que tener un punto y coma detrás.

en una hoja de estilo podríamos tener lo siguiente: y body {background-color: #006699. no existe ninguna etiqueta <MITEXTO>.} y Si vinculáramos esta hoja de estilo a un documento. .y Por ejemplo. font-size:18px. y En cambio.Helvetica.} y . se aplicarían directamente las propiedades especificadas para la etiqueta <BODY>.Helvetica. por lo que para aplicar este estilo a algún elemento de la página habría que indicarlo de algún modo.mitexto {font-family: Arial. font-family: Arial.

sin producir un cambio de línea). habría que escribir: y <p>texto con <span class="mitexto">estilo</span></p> . sería necesario incluir la etiqueta <span> (que agrupa bloques. como podría ser en este caso una palabra del párrafo. para aplicar ese estilo al siguiente párrafo del documento: y <p>texto con estilo</p> y Habría que escribir: y <p class="mitexto">texto con estilo</p> y Pero para aplicar el estilo únicamente a una parte del contenido de la etiqueta. habría que insertar el atributo class en su etiqueta. para aplicar el estilo únicamente a la palabra estilo.y Para aplicar este estilo a un elemento. Por ejemplo. y Por ejemplo.

etc. entonces se aplicará la segunda. La ventaja de definir una familia de fuentes es que si el ordenador del visitante no tiene instalada la primera fuente. helvetica. como pueden ser arial. y Puede tomar como valor varios nombres de fuentes. . separados por comas. Familia de la fuente: y La propiedad es font-family. así como los valores que pueden tomar. así sucesivamente hasta encontrar una de las fuentes.Las propiedades y Vamos a ver algunas propiedades que pueden especificarse en los estilos.

Espacio entre líneas: y La propiedad es line-height. y Puede tomar como valor un número. y Sus valores pueden ser: bold (negrita). Espacio entre caracteres: y La propiedad es letter-spacing. y Puede tomar como valor un número. bolder (mas negrita). Tamaño de la fuente: y La propiedad es font-size. y Puede tomar como valor un número.Grosor del texto: y La propiedad es font-weight. . lighter (ligera) o un número del 100 al 900.

y Puede tomar como valor italic. underline (subrayado). line-through (una línea encima). cuando se desee que el texto aparezca en cursiva. y Puede tomar como valor none (ninguno). Decoración de la fuente: y La propiedad es text-decoration. puede evitarse que aparezcan subrayados. y Si se aplica none a los hiperenlaces. overline (tachado) o blink (parpadeo).Estilo de la fuente: y La propiedad es font-style. .

Sangrado del texto: y La propiedad es text-indent. y Puede tomar como valor center (centrado).Transformar el texto: y La propiedad es text-transform. y Puede tomar como valor un número. uppercase (todo en mayúsculas) o lowercase (todo en minúsculas). Alineación del texto: y La propiedad es text-align. left (izquierda). . y Puede tomar como valor capitalize (la inicial de cada palabra aparecerá en mayúsculas). right (derecha) o justify (justificado).

serán de este color. y Si se aplica esta propiedad a los hiperenlaces. y Puede tomar como valor un número en hexadecimal. después de la palabra url. vlink (vínculo activo). en lugar de los indicados por los atributos link (vínculo). Imagen de fondo: y La propiedad es background-image. y La ruta y el nombre de la imagen han de aparecer entre paréntesis.Color: y La propiedad es color. y alink (vínculo visitado) de la etiqueta <BODY>. y Puede tomar como valor un número en hexadecimal. Color de fondo: y La propiedad es background-color. .

Márgenes: y Las propiedades son margin-top (margen superior). y Puede tomar como valor un número. o margin (los valores de los márgenes superior. margin-right (margen derecho). separados por espacios). inferior e izquierdo. margin-bottom (margen inferior). margin-left (margen izquierdo). y Pueden tomar como valor un número (cuatro números separados por espacios en el caso de margin). Ancho de bordes: y La propiedad es border-width. . derecho.

o % (porcentaje). pt (puntos). px (píxeles). especificar la unidad de medida a utilizar: cm (centímetros). .Color del borde: y La propiedad es border-color. Existen muchas otras propiedades además de éstas. y Puede tomar como valor un número en hexadecimal. en el caso de los valores numéricos. No hay que olvidar. pero se verán en otro momento.

Esta información puede ser utilizada por los buscadores. como puede ser "Autor". "Palabras clave". "Descripción".La etiqueta <meta> y La etiqueta <meta> se utiliza para añadir información sobre la página. El atributo name indica el tipo de información. etc. y el atributo content indica el valor de dicha información. y Los buscadores consultan la información de la etiqueta <meta> de las páginas. y A través de esta etiqueta pueden especificarse los atributos name y content. es preferible que el tipo de información se especifique en inglés. Pero debido a que la mayoría de buscadores están en inglés. y Para indicar el tipo de información podemos utilizar cualquier palabra que deseemos. buscando coincidencias con lo que el usuario pretende encontrar. .

y Los tipos de información más utilizados son los y y y y siguientes: Tipo Author Classification en Description y Generator y Keywords Significado Autor de la página Palabras para clasificar la página los buscadores Descripción del contenido de la página Programa utilizado para crear la página Palabras clave .

pero es posible insertar varias etiquetas <meta> en un mismo documento.y La etiqueta <meta> no necesita etiqueta de cierre.. y especifica algunas palabras clave a ser consultadas por los buscadores: <html> <head> . que la página trata sobre un curso de HTML.. <meta name="author" content=³José Rodriguez"> <meta name="description" content="Curso de HTML"> <meta name="keywords" content="código HTML etiqueta página web curso"> </head> . y La etiqueta <meta> ha de estar entre las etiquetas <head> y </head>.. y Por ejemplo. el siguiente código indica que el autor de la página es José Rodriguez. . Para cada etiqueta <meta> solo es posible indicar un tipo de información y su valor..

. en lugar del atributo name. En este caso se utiliza el atributo http-equiv.. deberíamos utilizar la acción Refresh (actualizar).. Podríamos utilizar el siguiente código: <html> <head> . y Por ejemplo.y La etiqueta <meta> también se utiliza para indicarle al navegador alguna información o alguna acción que debe realizar. En ese caso.. <meta http-equiv="Refresh" content="30"> </head> .. imaginemos que por algún motivo queremos que nuestra página se actualice automáticamente cada 30 segundos.

com/index.htm). pero cargando la que se encontrara en la nueva dirección (URL=http://www.htm"> </head> ..aulaclic.. URL=http://www..aulaclic.com/index. el navegador realizaría la función de actualizar la página. <meta http-equiv="Refresh" content="5.. .y Ahora imaginemos que hemos cambiado la dirección en la que se encuentra nuestra página web. y De este modo. En ese caso podríamos insertar el siguiente código en la página que se encuentra en la dirección antigua: <html> <head> . y queremos que cuando algún usuario visite la página en la dirección antigua. a los 5 segundos el navegador lo redirija automáticamente a la dirección nueva.