Está en la página 1de 30

MANUAL BSICO DE HTML

INTRODUCCIN
Para fomentar una slida compresin del HTML, miraremos la estructura del lenguaje propiamente dicho. El funcionamiento de la sintaxis del HTML es anlogo a la sintaxis de la gramtica espaola, pero, por supuesto, mucho ms sencillo. El HTML es en realidad un lenguaje muy lgico. Ciertamente, hay excepciones a las reglas, y hay modificaciones o interpretaciones de algunas de stas. De todas formas, una vez que asimiles la estructura bsica, empezars a notar que el HTML es simplemente un conjunto de piezas lgicas que hacen de l un lenguaje muy cmodo de usar. HTML es un lenguaje que evoluciona, mientras que la evolucin es un estado natural del HTML, estos cambios normalmente no afectan a las reglas bsicas. Mientras que varios elementos de este lenguaje se hacen obsoletos y otros nuevos son aadidos, la sintaxis, o la estructura correcta, raramente sufren cambios. El HTML es, en el fondo, no muy diferente a una simple frase. De hecho, los componentes del HTML siguen el mismo concepto de sujeto, verbo y adjetivos/adverbios.

Prof. Oscar Lozano Rodrguez

MANUAL BSICO DE HTML

LOS COMPONENTES DEL HTML


El pilar central de todo HTML es la etiqueta (tcnicamente se refiere como un elemento). Una etiqueta (tag en ingls) es el identificador del HTML; dice "haz esto". Pero las etiquetas se hacen ms potentes con modificaciones, y esa modificacin empieza con un atributo (tambin conocido como un argumento). Los atributos son como los verbos en cuando que proporcionan actividad, con ellos, la etiqueta HTML puede de repente adquirir vida y hacer algo en cierta manera. Los atributos deben ser modificados con valores. Un valor define la manera en que un atributo actuar. Piensa en un adjetivo o un adverbio modificando un sujeto o una accin, respectivamente. Como corre Juan? Juan corre rpido. Los valores aaden conceptos como "rpido", diciendo a la etiqueta, y al atributo, no slo el qu y el como, sino tambin el grado especfico. En sentido figurado, la frase "Juan corre rpido" equivale a la estructura sintctica bsica del HTML. "Juan" es el equivalente a una etiqueta HTML, "corre" se parece mucho a un atributo HTML y "rpido" es un valor asignado al atributo que describe la manera en la cual actuar la etiqueta.

ETIQUETAS
Son especficas, lo primero que hay que saber es el funcionamiento de los documentos HTML, que significa Hyper Text Markup Language. Son lneas de texto modificadas con unas marcas. Estas marcas se llaman etiquetas o tags, y es lo que se aprende en ste y cualquier curso de HTML. Las etiquetas que encierran el texto son la de apertura <xxx> y la de cierre </xxx>. Fjate cmo no hay espacios entre los signos de mayor y menor, y el lugar y la orientacin de la barra diagonal en la etiqueta de cierre. Hay etiquetas que requieren la de cierre (como <A> y </A>, otras que pueden tener etiqueta de cierre o no (como <P>, que no siempre requiere </P>) y otras que no llevan nunca etiqueta de cierre (como <IMG>, la cual jams lleva </IMG>). Para saber cundo se quiere etiqueta de cierre, necesitars conocer todas y cada una de ellas, lo irs aprendiendo con la experiencia.

ATRIBUTOS
Los atributos modifican las acciones de las tarjetas. Muchas etiquetas pueden permanecer solas, mientras que otras neceistan un atributo para darles funcionalidad. Por ejemplo, <HTML> nunca lleva atributos, mientras que <body> puede llevarlos o no (por ejemplo, <body BGCOLOR...>). Ten en cuenta que los atributos siempre van en la etiqueta de apertura. Nunca en la de cierre. Es absurdo poner algo del estilo de </body BGCOLOR...>.

Prof. Oscar Lozano Rodrguez

MANUAL BSICO DE HTML

VALORES
Definen el atributo al que se lo hemos aplicado. El valor puede ser una palabra (por ejemplo <P ALIGN="center">...</P>) o un nmero de pixels o porcentaje (como en <TABLE WIDTH="40%" HEIGHT="500">...</TABLE>). A veces un nmero no define un nmero de pixels concreto, por ejemplo, al cambiar el tamao de las fuentes (<FONT SIZE="5">...</FONT>) el nmero es simplemente orientativo, no tiene ninguna relacin con el tamao final. Y el nmero a veces puede ser en formato hexadecimal (16 nmeros, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F...), como en <FONT COLOR="#FF0000">...</FONT>. Podrs conocer el funcionamiento de estos nmeros ms adelante, cuando expliquemos los atributos que los requieren.

CARACTERES ESPECIALES

Caracteres especiales. Hay caracteres que no se pueden escribir tal cual en cdigo HTML, unos por coincidir con las etiquetas (como <, > y &), otros por no ser compatibles con los navegadores (las letras con tilde, las ees), etc... En general se pueden obtener todos los caracteres con la etiqueta &#xxx;, poniendo en xxx el nmero de carcter correspondiente. Estos y otros cdigos son: Cracter En nmeros En letras Carcter En nmeros En letras ! # % ' ) + / ; = ? [ ] _ { } &#33; &#35; &#37; &#39; &#41; &#43; &#45; &#47; &#59; &#61; &#63; &#91; &#93; &#95; &#123; &#125; &#160; ----------------nbsp " $ & ( * , . : < > @ \ ^ ` | ~ &#34; &#36; &#38; &#40; &#42; &#44; &#46; &#58; &#60; &#62; &#64; &#92; &#94; &#96; &#124; &#126; &#161; ----------------iexcl

Prof. Oscar Lozano Rodrguez

MANUAL BSICO DE HTML

&#162; &#164; &#166; &#168; &#170; &#172; &#174; &#176; &#178; &#180; &#182; &#184; &#186; &#188; &#190; &#192; &#194; &#196; &#198; &#200; &#202; &#204; &#206; &#208; &#210; &#212; &#214; &#216; &#218; &#220; &#222; &#224; &#226; &#228; &#230;

cent curren brvbar uml ordf not reg deg sup2 acute para cedil ordm frac14 frac34 Agrave Acirc Auml AElig Egrave Ecirc Igrave Icirc ETH Ograve Ocirc Ouml Oslash Uacute Uuml THORN agrave acirc auml aelig

&#163; &#165; &#167; &#169; &#171; &#173;

pound yen sect copy laquo shy macr plusmn sup3 micro middot sup1 raquo frac12 iquest Aacute Atilde Aring Ccedil Eacute Euml Iacute Iuml Ntilde Oacute Otilde times Ugrave Ucirc Yacute szlig aacute atilde aring ccedil

&#175; &#177; &#179; &#181; &#183; &#185; &#187; &#189; &#191; &#193; &#195; &#197; &#199; &#201; &#203; &#205; &#207; &#209; &#211; &#213; &#215; &#217; &#219; &#221; &#223; &#225; &#227; &#229; &#231;

Prof. Oscar Lozano Rodrguez

MANUAL BSICO DE HTML

&#232; &#234; &#236; &#238; &#240; &#242; &#244; &#246; &#248; &#250; &#252; &#254;

egrave ecirc igrave icirc eth ograve ocirc ouml oslash uacute uuml thorn

&#233; &#235; &#237; &#239; &#241; &#243; &#245; &#247; &#249; &#251; &#253; &#255;

eacute euml iacute iuml ntilde oacute otilde divide ugrave ucirc yacute yuml

MAYSCULAS, ESPACIOS Y COMILLAS La forma correcta de poner una etiqueta es la siguiente: <IMG SRC="hola.gif"> La utilizacin de maysculas y minsculas es indiferente en la etiqueta y el atributo (no as en el valor, no siempre puede cambiarse indistintamente). Recomendamos ponerlo como en el ejemplo, etiqueta y atributo en maysculas, y el valor en minscula. Fjate en las comillas. Se recomienda ponerlas siempre, aunque si el valor contiene slo un simple nmero o una simple palabra no suele ser necesario. Por ejemplo, width=200 y width="200" dara el mismo resultado, pero se recomienda poner siempre las comillas (ALT=Aqu pone hola est mal, hay que poner ALT="Aqu pone hola"). Terminaremos por los espacios. < IMG SRC = " hola.gif " > o <IMGSRC="hola.gif"> es totalmente incorrecto. El nico espacio debe estar situado entre etiqueta/atributo y atributo_con_valor/atributo_con_valor. Por ejemplo: <IMG SRC="hola.gif" ALT="hola"> Si queremos poner espacios en el texto normal y corriente, deberemos usar el carcter especial &nbsp;. Por ejemplo: Esta es mi pgina WEB y Esta es mi pgina WEB,

se veran de la siguiente forma:

Prof. Oscar Lozano Rodrguez

MANUAL BSICO DE HTML


sta es mi pgina WEB Si queremos poner lo segundo, con cuatro espacios en blanco entre medio habr que poner: sta&nbsp;&nbsp;&nbsp; es mi pgina WEB Y, para finalizar, este es un texto <B>en negrita</B>, y este es un texto<B> en negrita</B> dara un resultado idntico, aunque se recomienda usar lo primero. SIMETRA Poner las etiquetas en el orden correcto nos permitir una edicin del documento ms rpida y efectiva Por ejemplo: <I><B>Hola</B></I> y <I><B>Hola</B></I> dara el mismo resultado, pero es ms recomendable usar lo segundo: puedes apreciar una simetra horizontal. <I><B>Hola</B></I> LAS DOS PARTES DE UN DOCUMENTO HTML Los documentos HTML tienen dos partes:

1. La parte contenida entre las etiquetas <HEAD> y </HEAD> o cabecera,

2.

que es donde se introduce el ttulo de la pgina (dentro de <TITLE> y </TITLE>, lo que se mostrar en la barra de ttulo de la ventana del explorador), las etiquetas <META> (que nos servirn principalmente para dar de alta nuestra pgina en los buscadores de una forma eficiente), los Scripts (para dar un funcionamiento dinmico a la pgina) y las Hojas de estilo (un mtodo avanzado de formateado). La parte contenida entre las etiquetas <body> y </body> o cuerpo, que es donde se introducen los dems elementos que se ven en pantalla, como texto, imgenes, tablas, enlaces, formularios..., as como el color del fondo o de los diferentes tipos de texto.

En resumen, la estructura es la siguiente: <HTML> <HEAD> <TITLE>Ttulo de la pgina</TITLE> Aqu van otras etiquetas como las META, scripts y estilos </HEAD> <body> Aqu va lo que se mostrar en pantalla del documento HTML </body> </HTML>

Prof. Oscar Lozano Rodrguez

MANUAL BSICO DE HTML

ETIQUETAS DE LA ESTRUCTURA BSICA

Las etiquetas de la estructura bsica. Como vimos en el tema 2, el documento HTML se compone de unas etiquetas esenciales. Lo primero a escribir es <HTML>, la etiqueta de inicio de los documentos HTML. Tras eso se introduce <HEAD> para abrir la cabecera. A continuacin hay que poner un ttulo a la pgina, el cual estar situado entre las etiquetas <TITLE> y </TITLE>. Tras eso cerramos la cabecera con la etiqueta </HEAD>. Y lo que queremos que se vea en pantalla ir entre <body> y </body>. Y por fin, cerramos con </HTML>. Hasta ahora hemos escrito: <HTML> <HEAD> <TITLE>Mi primera pgina</TITLE> </HEAD> <body> </body> </HTML> A continuacin vamos a ver todas las etiquetas que sirven para colocar y organizar el texto que se muestra en pantalla de nuestra pgina WEB. Todo ello ir colocado entre <body> y </body>.

Para empezar a crear nuestra primera pgina tenemos que iniciar el programa editor de texto e ir introduciendo las etiquetas y su contenido. En esta pgina conoceremos todo lo bsico y esencial dentro de un documento HTML.

PRRAFOS

Prrafos. Las etiquetas de prrafo <P> nos servirn para iniciar un nuevo prrafo de texto. No necesita la etiqueta </P> al final si no estn alineados de ninguna manera. Los prrafos pueden alinearse. En este caso s que necesitan su correspondiente etiqueta de cierre </P>. Son las siguientes:

<P ALIGN="LEFT"> Para alinear el texto con el margen izquierdo: Este prrafo est alineado a la izquierda

<P ALIGN="CENTER"> Para centrar el texto: Este prrafo est centrado.

Prof. Oscar Lozano Rodrguez

MANUAL BSICO DE HTML

<P ALIGN="RIGHT"> Para alinear el texto con el margen derecho: Este prrafo est alineado a la derecha <P ALIGN="JUSTIFY"> Para alinear el texto a los dos mrgenes. Es ignorado por muchos navegadores, pero algunos no, como el Explorer 4.0. Eso es un ejemplo el alineamiento justificado. Si se observa este breve prrafo con exploradores como el Microsoft Internet Explorer 4.0 podrs observar que los dos extremos, izquierdo y derecho, estn alineados. Recuerda que para poder apreciar este efecto en los prrafos de texto, necesitas escribir ms de 2 lneas. Si se quiere hacer un salto de lnea o retorno de carro, habr que usar la eiqueta <BR>. Por ejemplo: <P>Esto<BR>es un prrafo Se vera as: Esto es un prrafo Dos <BR> equivalen a un <P>. Estos dos ejemplos se veran igual: <P>Esto es un prrafo <P>Esto es otro <P>Esto es un prrafo<BR><BR> Esto es otro Tambin puede usarse la etiqueta <NOBR>...</NOBR>. Es para no permitir el salto de lnea, es decir, para hacer lneas muy largas en pginas en las que haya que usar la barra de desplazamiento horizontal.

CABECERAS

Son para poner ttulos en nuestras pginas. Van entre las etiquetas <Hx> y </Hx>, donde x en un nmero del 1 al 6. 1 es el nmero mayor y 6 el nmero menor. El que corresponde al tamao estndar del texto es 3. Estos nmeros no tienen nada que ver con el nmero de pxeles ni con los nmeros de la etiqueta <FONT> que veremos posteriormente. Usaremos la cabecera H1 o la H2 para el ttulo principal de la pgina, y los otros tamaos menores para los ttulos inferiores de segunda categora.

Prof. Oscar Lozano Rodrguez

MANUAL BSICO DE HTML


<H1>Prueba</H1> se ver como:

Prueba
<H2>Prueba</H2> se ver como:

Prueba
<H3>Prueba</H3> se ver como:

Prueba
<H4>Prueba</H4> se ver como:

Prueba
<H5>Prueba</H5> se ver como:

Prueba
<H6>Prueba</H6> se ver como:
Prueba

LNEAS HORIZONTALES

Lneas horizontales. En ingls horizontal rules. Para introducirlos hay que usar la etiqueta <HR>. As se crear una lnea embutida en el fondo que llegue de lado a lado de la pgina. Tambin se puede modificar. Para variar la anchura hay que usar el atributo WIDTH=x%, donde x es el porcentaje del ancho de la pantalla. Para que ocupe el 75% habra que poner: <HR WIDTH="75%">

Si se quiere variar la anchura en pxels hay que introducir el valor de ellos en WIDTH=x, pero sin el smbolo %: <HR WIDTH="250">

Se puede variar la alineacin con el atributo ALIGN=x, donde x es LEFT o RIGHT. <HR WIDTH="50%" ALIGN="LEFT"> para alinear a la izquierda:

Prof. Oscar Lozano Rodrguez

MANUAL BSICO DE HTML


<HR WIDTH="50%" ALIGN="RIGHT"> para alinear a la derecha:

Se puede variar el espesor con SIZE=x, donde x es el nmero de pxels: <HR SIZE="15">

Y por ltimo se puede hacer que la lnea no est sombreada con el atributo NOSHADE: <HR NOSHADE>

FORMATEO DEL TEXTO

Formateo del texto. Veremos una serie de etiquetas para el texto: Lneas en blanco, con <BR><P>. <BR><P> <BR><P> <BR><P> <BR><P>

Espacios. Nos pueden servir para separar imgenes de textos. La etiqueta es &nbsp; Negrita, cursiva, subrayado y tachado. Necesitan etiqueta de cierre. Son <B>negrita</B> para negrita, <I>cursiva</I> para cursiva, <U>subrayado</U> para subrayado y <S>tachado</S> para tachado. Es posible usarlos a la vez, <B><I><U><S>texto</S></U></I></B> para texto. Hay otras etiquetas que equivalen a estas, como <STRONG> = <B>; <CITE> y <EM> = <I>; y <STRIKE> = <S>. Aumentar o disminuir tamao del texto. Se puede hacer de una forma muy sencilla con <BIG>...</BIG> para aumentarlo y con <SMALL>...</SMALL> para disminuirlo. Por ejemplo: Este es un texto <BIG>ms grande</BIG> Se vera como

10

Prof. Oscar Lozano Rodrguez

MANUAL BSICO DE HTML


Este es un texto

ms grande

Este es un texto <SMALL>ms pequeo</SMALL> Se vera como Este es un texto


ms pequeo

En vez de usar estas dos etiquetas, puedes usar la etiqueta <FONT> que se explica ms abajo. Preformateado. La etiqueta es <PRE> con etiqueta de cierre. La caracterstica es que se ver con letra Courier respetando espacios y cambios de la, por ejemplo: <PRE> Hola Esto es una prueba del preformateado </PRE> y quedara as: Hola Esto es una prueba del preformateado Mquina de escribir. La etiqueta es <TT> con etiqueta de cierre. Es como el anterior pero slo cambia el tipo de letra, por ejemplo (el mismo que pusimos en PRE): <TT> Hola Esto es una prueba del preformateado </TT> y quedara as: Hola Esto es una prueba del preformateado Como ves no ha respetado los espacios ni los cambios de lnea. Citas textuales. La etiqueta es <BLOCKQUOTE> con etiqueta de cierre, para resaltar partes de texto con mrgenes a ambos lados, por ejemplo: <BLOCKQUOTE> xxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxxxxxxx xxxx xxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxxxxx xxxxx xxxxxxxxxxxx

11

Prof. Oscar Lozano Rodrguez

MANUAL BSICO DE HTML


</BLOCKQUOTE> y quedara as: xxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxxxxxxx xxxx xxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxxxxx xxxxx xxxxxxxxxxxx

Texto parpadeante. Slo lo incorpora Netscape Navigator. La etiqueta es <BLINK> y <BLINK>, y quedara as: <BLINK>Hola</BLINK> Hola ndices y subndices. Las etiquetas son <SUP> para el superndice y <SUB> para el subndice (ambas con etiqueta de cierre), por ejemplo: cm<SUP>3</SUP> cm3 H<SUB>2</SUB>SO<SUB>4</SUB> H2SO4 Etiqueta FONT. Tiene etiqueta de cierre, y nos permite variar el tamao, el color, y el tipo de letra de un texto determinado. Utiliza para ello los atributos siguientes: size="x", siendo "x" el nmero del tamao, de 1 a 8, por defecto 3; o +/-, que indican si se usa un tamao inferior o superior), bgcolor="xxyyzz" (siendo "xxyyzz" un nmero hexadecimal). Para saber qu es esto mira el tema de fondos) y face="xxx" (siendo "xxx" el nombre de la fuente). Si la fuente tiene dos palabras o ms es necesario poner comillas, y se pueden colocar varios nombres para usar unas fuentes en caso que otras no existan. Si la fuente no est instalada en el ordenador se ver Times New Roman). Ejemplo: <FONT SIZE=4 COLOR="AA0000" FACE="Arial, Verdana">Prueba de texto</FONT>. ...que quedara as:

Prueba de texto
Observa cmo hay dos nombres de fuentes. En caso de que Arial no est instalada se ver con Verdana, y si sta tampoco lo est se ver entonces con Times New Roman: la fuente por defecto.

12

Prof. Oscar Lozano Rodrguez

MANUAL BSICO DE HTML

COMENTARIOS

Comentarios. Su principal objetivo es escribir lneas de HTML que no se vean en la pantalla, entre las etiquetas <!-- y -->. Puede ser muy til para organizar internamente pginas escritas en su totalidad con HTML o, como veremos en los captulos finales, ocultar cdigo no soportado por versiones antiguas de navegadores, como programas JavaScript y VBScript, hojas de estilo... En este caso, sera con <!-- y // -->. Veamos los dos casos: Comentario de 1 lnea: <!-- Comentario --> Comentario de varias lneas: <!-Aqu va el script // -->

Esto es todo. En los siguientes captulos irs conociendo docenas de etiquetas ms.

LISTAS

Hay tres clases de listas: desordenadas, ordenadas y de definicin: Listas desordenadas. Las etiqueta son: <UL> con etiqueta de cierre para la lista y <LI> para cada lnea. Puede contener el atributo type que indica la forma del "topo" o marca que antecede a cada elemento de la lista. Los valores de type pueden ser disk, circle o square, con lo que el topo o marca puede ser un disco, un crculo o un cuadrado. Un ejemplo: <UL type=square> <LI>Elemento 1 <LI>Elemento 2 <LI>Elemento 3 </UL> Elemento 1 Elemento 2 Elemento 3 Es posible anidar las listas, por ejemplo: <UL> <LI>Elemento 1

13

Prof. Oscar Lozano Rodrguez

MANUAL BSICO DE HTML


<UL> <LI>Elemento 1.1 <LI>Elemento 1.2 <LI>Elemento 1.3 </UL> <LI>Elemento 2 <LI>Elemento 3 </UL> Elemento 1 Elemento 1.1 Elemento 1.2 Elemento 1.3 Elemento 2 Elemento 3 En otro tema veremos cmo poner una imagen en vez de el punto, cuadrado o disco. Tambin podemos cambiar el tipo de smbolo elemento por elemento: <UL> <LI type=square>Elemento 1 <LI type=circle>Elemento 2 <LI type=disk>Elemento 3 </UL>

Elemento 1 Elemento 2 Elemento 3

Listas ordenadas o numeradas. Las etiqueta es <OL> con etiqueta de cierre para la lista y <LI> para cada lnea. Puede llevar los siguientes atributos: start = num Indica que nmero ser el primero de la lista. Si no se indica se entiende que empezar por el nmero 1. type = tipo Indica el tipo de numeracin utilizada. Si no se indica se entiende que ser una lista ordenada numricamente. Los tipos posibles son : 1 = Numricamente. (1,2,3,4,... etc.) a = Letras minsculas. (a,b,c,d,... etc.) A = Letras maysculas. (A,B,C,D,... etc.) i = Nmeros romanos en minsculas. (i.ii,iii,iv,v,... etc.) I = Nmeros romanos en maysculas. (I,II,III,IV,V,... etc.) Un ejemplo: <OL type=i> <LI>Elemento 1 <LI>Elemento 2 <LI>Elemento 3 </OL>

i. ii. iii.

Elemento 1 Elemento 2 Elemento 3

14

Prof. Oscar Lozano Rodrguez

MANUAL BSICO DE HTML


Estas listas tambin pueden anidarse, al igual que las listas desordnedadas. A cada elemento puede drsele un valor similar a start=x, con value=x: <OL> <LI value=10>Este elemento vale 10 <LI>Elemento siguiente <LI>Otro elemento ms </OL>

10. 11. 12.

Este elemento vale 10 Elemento siguiente Otro elemento ms

Listas de definicin. La etiqueta es <DL> con etiqueta de cierre para la lista, <DT> para cada palabra y <DD> para cada definicin de cada palabra, por ejemplo: <DL> <DT>Elemento 1 <DD>Definicin de elemento 1 <DT>Elemento 2 <DD>Definicin de elemento 2 <DT>Elemento 3 <DD>Definicin de elemento 3 </DL>

Elemento 1 Definicin de elemento 1 Elemento 2 Definicin de elemento 2 Elemento 3 Definicin de elemento 3

Existen otros dos tipos de listas menos comunes. Las listas de Men o Directorio se comportan igual que las listas sin numerar. La lista de Men utiliza la etiqueta <MENU></MENU> y los elementos se anteceden de <LI> El resultado es una lista sin numerar ms "compacta" es decir, con menos espacio interlineal entre los elementos. La lista de Directorio utiliza la etiqueta <DIR></DIR> y los elementos se anteceden de <LI>. Los elementos tienen un lmite de 20 caracteres. Los enlaces son la esencia del Web. Sin ellos, el concepto se vera reducido a una publicacin de documentos de texto en Internet. Los enlaces es lo que hace te lleva ms all del trabajo encasillado de un nico documento, para trabajar en varios documentos relacionados. Lo que originalmente fueron llamados hipervnculos, el mtodo tcnico para ofrecer posibilidades de enlace a los documentos se ha ampliado para incluir algo ms que

15

Prof. Oscar Lozano Rodrguez

MANUAL BSICO DE HTML


slo enlaces de texto. De hecho, el web de hoy utiliza una amplia variedad de medios y objetos que son enlaces activos. En otras palabras, hipermedia, ha comenzado a incluir estos aspectos. Si intentas hacer una idea de la vastsima red de informacin enlazada, desde documentos de texto a sitios webs de entretenimiento pasando por pginas personales, comenzars a ver una compleja red debido al simple hecho del enlace. Hay muchos detalles que debern serte familiares para explotar el potencial de la web y dar facilidades a todo lo que te pueden ofrecer los enlaces. Estos asuntos incluyen trabajar con la etiqueta anchor, usando enlaces relativos y absolutos, y manejar links especiales como pueden ser los que te permiten saltar de una parte a otra dentro de la misma pgina o a una direccin de email.

La etiqueta anchor Enlaces absolutos Enlaces relativos Enlaces dentro de la misma pgina Enlaces con imgenes Enlaces a otros elementos Usando varios tipos de enlace en la misma pgina

Temas relacionados
Trabajar con imgenes aade toda una nueva dimensin a los enlaces. Asegrate de leer el captulo "Trabajando con imgenes". Controla los colores de los enlaces con los atributos de body en el captulo "Coloreando el fondo y el texto". Las tablas nos servirn fundamentalmente para colocar de una forma ordenada textos e imgenes dentro de las pginas.

Etiquetas bsicas | Filas y columnas con distinto nmero de celdas Celdas abarcando a celdas y columnas | Separacin entre celdas | Grosor del borde Distancia entre el borde y el contenido | Titulares en las tablas | Celdas de cabecera

16

Prof. Oscar Lozano Rodrguez

MANUAL BSICO DE HTML


Alineamiento del contenido | Fondos de las tablas | Dimensiones de las tablas Imgenes y otros elementos en las tablas

La etiqueta bsica para las tablas sin bordes es <TABLE> y </TABLE>, y para con bordes <TABLE BORDER> y </TABLE>. Dentro de la etiqueta anterior se colocaran las de las filas <TR> y </TR>. Y dentro de ellas, a su vez, habr que colocar por celda <TD> y <TD>. Un ejemplo de todo esto sera: <TABLE> <TR> <TD> a </TD> <TD> b </TD> </TR> <TR> <TD> c </TD> <TD> d </TD> </TR> </TABLE> ab cd o con borde... <TABLE BORDER> <TR> <TD> a </TD> <TD> b </TD> </TR> <TR> <TD> c </TD> <TD> d </TD>

17

Prof. Oscar Lozano Rodrguez

MANUAL BSICO DE HTML


</TR> </TABLE> a b c d

Tambin se puede hacer con un nmero de celdas distinto en las filas: <TABLE BORDER> <TR> <TD> a </TD> <TD> b </TD> </TR> <TR> <TD> c </TD> </TR> </TABLE> a b c

Tambin se puede hacer que las celdas abarquen a las dems con COLSPAN=x o con ROWSPAN=x, cambiando la x por el nmero de filas a incluir. <TABLE BORDER> <TR> <TD COLSPAN=2> Celda abarcando </TD> </TR> <TR> <TD> a </TD> <TD> b </TD> </TR> <TR> <TD> c </TD> <TD> d </TD>

18

Prof. Oscar Lozano Rodrguez

MANUAL BSICO DE HTML


</TR> </TABLE> Celda abarcando a c b d

o bien... <TABLE BORDER> <TR> <TD ROWSPAN=2> Celda abarcando </TD> <TD> a </TD> <TD> b </TD> </TR> <TR> <TD> c </TD> <TD> d </TD> </TR> </TABLE> a b c d

Celda abarcando

Tambin podemos decir la separacin de las celdas con CELLSPACING=x. Por defecto es de dos pxels. Se sustituye la x, obviamente, por el nmero de pxels. <TABLE BORDER CELLSPACING=25> <TR> <TD> a </TD> <TD> b </TD> </TR> <TR> <TD> c </TD> <TD>

19

Prof. Oscar Lozano Rodrguez

MANUAL BSICO DE HTML


d </TD> </TR> </TABLE>

a c

b d

Por otro lado tambin es posible cambiar el espesor de los bordes aadiendo al BORDER un nmero de pxels, que quedara as: BORDER=x. Por defecto es un pxel: <TABLE BORDER=10> <TR> <TD> a </TD> <TD> b </TD> </TR> <TR> <TD> c </TD> <TD> d </TD> </TR> </TABLE> a b c d

Tambin se puede separar el borde de la tabla del contenido que hay en ella con CELLPADDING=x. Por defecto es un pxel. <TABLE BORDER CELLPADDING=25> <TR> <TD> a </TD> <TD> b </TD> </TR> <TR>

20

Prof. Oscar Lozano Rodrguez

MANUAL BSICO DE HTML


<TD> c </TD> <TD> d </TD> </TR> </TABLE>

Ahora veamos cmo quedaran en la misma tabla BORDER, CELLSPACING y CELLPADING a la vez. <TABLE BORDER=10 CELLSPACING=25 CELLPADDING=25> <TR> <TD> a </TD> <TD> b </TD> </TR> <TR> <TD> c </TD> <TD> d </TD> </TR> </TABLE>

21

Prof. Oscar Lozano Rodrguez

MANUAL BSICO DE HTML


Ahora veremos cmo poner titulares en las tablas. Es con la etiqueta <CAPTION> y </CAPTION>, y quedara: <TABLE BORDER> <CAPTION> Tabla con letras </CAPTION> <TR> <TD> a </TD> <TD> b </TD> </TR> <TR> <TD> c </TD> <TD> d </TD> </TR> </TABLE> Tabla con letras a c b d

Tambin podemos aadir las llamadas celdas de cabecera, que por defecto estarn centradas y en negrita. Es con las etiquetas <HR> y <HR> colocadas dentro de una fila antes de las otras. Quedara as: <TABLE BORDER> <TR> <TH> Letras </TH> <TH> Nmeros </TH> </TR> <TR> <TD> a </TD> <TD> 1 </TD> </TR> <TR> <TD> b </TD>

22

Prof. Oscar Lozano Rodrguez

MANUAL BSICO DE HTML


<TD> 2 </TD> </TR> </TABLE> Letras Nmeros a b 1 2

El contenido de la celda se puede variar su posicin colocando unos atributos dentro de <TD>. En horizontal, quedara con ALIGN="LEFT" alineado a la izquierda, con ALIGN="RIGHT" alineado a la derecha y con ALIGN="CENTER" centrado. Recordemos que este ltimo es el de defecto. <TABLE BORDER> <TR> <TD> --------------</TD> </TR> <TR> <TD ALIGN="LEFT"> a </TD> </TR> <TR> <TD ALIGN="RIGHT"> b </TD> </TR> <TR> <TD ALIGN="CENTER"> c </TD> </TR> </TABLE> --------------a b c Y si se puede ajustar en horizontal tambin se puede en vertical; con VALIGN="TOP" para alinearlo arriba, VALIGN="BOTTOM" para abajo y VALIGN="MIDDLE" para el medio. Este ltimo es el de defecto. <TABLE BORDER> <TR> <TD> -

23

Prof. Oscar Lozano Rodrguez

MANUAL BSICO DE HTML


</TD> <TD VALIGN="TOP"> a </TD> <TD VALIGN="BOTTOM"> b </TD> <TD VALIGN="MIDDLE"> c </TD> </TR> </TABLE> - a b c

Ahora veremos los fondos de las tablas, con colores e imgenes. Con colores es con BGCOLOR="xxyyzz" tal y como vimos en el tema de fondos, y con imgenes es BACKGROUND="imagen.***" como vimos tambin en ese mismo captulo. Habr que colocar estos atributos dentro de <TABLE> si queremos que afecte a toda la tabla, en <TR> para que afecte a una fila y en <TD> para que afecte a una sola celda. <TABLE BORDER BACKGROUND="chalk.jpg"> <TR BGCOLOR="AACCFF"> <TD> a </TD> <TD> b </TD> </TR> <TR> <TD> c </TD> <TD BGCOLOR="DDAA55"> d </TD> </TR> <TR> <TD> e </TD>

24

Prof. Oscar Lozano Rodrguez

MANUAL BSICO DE HTML


<TD> f </TD> </TR> </TABLE> a b c d e f Recordemos que slo aceptan las imgenes de fondo en tablas el Microsoft Internet Explorer 3.0 o superior y el Netscape Communicator 4.0 o superior. Para solucionar este problema deberemos colocar dentro de <TABLE> los dos atributos BGCOLOR y BACKGROUND. Quedara ms o menos as: <TABLE BORDER BACKGROUND="chalk.jpg" BGCOLOR="000000">

Ahora veremos cmo sobredimensionar una tabla, es decir, que sea ms grande que las cosas que contiene. Se hace con HEIGHT=x para la altura y WIDTH=x para la anchura. Veremos ejemplos de cada uno por separado aunque se pueden usar los dos a la vez. <TABLE BORDER WIDTH=400> <TR> <TD> a </TD> <TD> b </TD> </TR> <TR> <TD> c </TD> <TD> d </TD> </TR> </TABLE> a c o... <TABLE BORDER HEIGHT=200> <TR> <TD> a </TD> b d

25

Prof. Oscar Lozano Rodrguez

MANUAL BSICO DE HTML


<TD> b </TD> </TR> <TR> <TD> c </TD> <TD> d </TD> </TR> </TABLE> a b c d

Y con este apartado ya terminamos. Veremos cmo insertar otros elementos dentro de las tablas. Pueden ser imgenes e incluso los elementos ms avanzados que veremos en los ltimos captulos como pueden ser programas JavaScript, HTML Layout, etc... Se pueden introducir todos los elementos posibles dentro de ellas. Para insertar una imagen bastar con usar la etiqueta <IMG SRC="imagen.***">. <TABLE BORDER> <TR> <TD> <IMG SRC="conversa.gif"> </TD> </TR> </TABLE>

Podemos cambiar la distancia a los bordes con los parmetros HSPACE=x y VSAPCE=x: el primero es para decidir los pxels que se dejarn a izquierda y derecha, y el segundo los que se dejarn arriba y abajo. La x se sustituye por el nmero de pxels. Se colocarn dentro de la etiqueta de la imagen. Da un resultado similar a CELLPADDING: <TABLE BORDER> <TR> <TD> <IMG SRC="conversa.gif" HSPACE=1 VSPACE=1> </TD> </TR> </TABLE>

26

Prof. Oscar Lozano Rodrguez

MANUAL BSICO DE HTML

Frames normales | Frames flotantes

Los frames o marcos digamos que no es ms que dividir la pantalla en partes de forma que se pueda navegar de una forma ms cmoda por la pgina. Se suele utilizar un frame estrecho donde estn los enlaces y un frame ms ancho donde se cargan los mismos. Siempre los WEB que poseen frames siempre constan de: Una pgina donde se definen los frames Las pginas independientes de cada frame En la pgina donde hemos de definir los frames diremos el nmero de los mismos que queremos que haya, su tamao y la pgina que van a contener. Las etiquetas a tener en cuenta son: <FRAMESET> con </FRAMESET> para decidir el tipo y forma del frame. Veamos sus parmetros: COLS="x, y" para las columnas y ROWS="x, y" para las filas (sustituyendo x e y por el tamao de cada frame en pxels o porcentaje). Recomendamos usar porcentaje si por ejemplo optimizamos nuestra pgina para 800x600 y queremos que se muestre bien en resoluciones menores, y es mejor utilizar pxels si queremos que se veabien en resoluciones mayores. De todas formas es posible que con nuestro navegador se vean muy bien distribuidos y que en las pantallas de otras personas se vean descolocados. Tambin es posible poner * en el tamao, de forma que con COLS="20%, *" habra una columna que ocupa el 20% de la pantalla y la otra columna ocupara el resto. Se recomienda mucho usar el asterisco si decimos el tamao con pxels. Se puede hacer mltiples combinaciones con l, con COLS="20%, *, *" tendramos tres columnas, una que ocupa el 20% y las otras dos que ocuparan el resto divido entre ellas, es decir, 40% cada uno; y tambin podramos usar COLS="*, 2*", de forma que tendramos 2 columnas y la segunda con doble espacio que la primera, es decir, la que tiene * ocupara el 33% y la que tiene 2* ocupara el 66%. Frames sin bordes. Se hace mediante la etiqueta FRAMEBORDER=0 dentro de la etiqueta FRAMESET. Si adems no se quiere que se vea el hueco hay que aadir FRAMESPACING=0 para Explorer y BORDER=0 para Netscape, es decir: <FRAMESET FRAMEBORDER=0 FRAMESPACING=0 BORDER=0 COLS="xx, yy"> <FRAME>. Indica las caractersticas de cada frame y siempre ir colocada dentro de <FRAMESET> y </FRAMESET>, y habr tanto nmero de ellas como el nmero de tamaos indicados por COLS y/o ROWS, como por ejemplo: <FRAMESET COLS="30%, 40% *"> <FRAME SRC="columna1.html">

27

Prof. Oscar Lozano Rodrguez

MANUAL BSICO DE HTML


<FRAME SRC="columna2.html"> <FRAME SRC="columna3.html"> </FRAMESET> Sus parmetros son: SRC="xxxx.html". Sirve para decidir la pgina que habr en el frame, sustituyendo xxx por el nombre de un documento HTML o una URL completa. NAME="xxx". Es para decidir el nombre del frame (sustituyendo xxx por el nombre del mismo), y as poder hacer que los enlaces de los otros frames se carguen en el frame que contenga dicho nombre. Para hacer esto tambin hay que introducir en cada enlace (la etiqueta <A HREF> y </A>) un parmetro que diremos ms tarde: TARGET. MARGINWIDTH="x". Es para los mrgenes en anchura dentro de los frames, siendo x el nmero de pxels. MARGINHEIGHT="x". Como el anterior, pero con la diferencia de que dir los mrgenes en altura. SCROLLING="yes/no/auto". Es para decidir si tendr o no barra deslizadora: con "yes" la tendr siempre, con "no" no la tendr nunca y con "auto" (por defecto) la tendr slo si se necesita. NORESIZE. Es para impedir que se redimensionen los frames. FRAMEBORDER="no". Es para quitar el borde, y habr que introducirla en las etiquetas de los dos frames que lo comparten. Si se quieren quitar todos es mejor usarlo en FRAMESET. NOFRAMES. Indica lo que vern los navegadores que no soportan frames. Quedara colocada as: <HTML> <FRAMESET...> <FRAME...> <FRAME...> <NOFRAMES> <body> Tu navegador no soporta frames. Pulsa <A HREF="index.html">aqu<A> para acceder a la pgina de contenidos. </body> </NOFRAMES> </FRAMESET> </HTML> El parmetro TARGET. Todo lo relacionado con esta etiqueta trata de pulsar enlaces en un frame y que se carguen en otro. Con TARGET="xxx" introducido en un enlace <A HREF><A> tendremos que sustituir xxx por el nombre de otro frame. Ese nombre fue el que colocamos en NAME="xxx". Por ejemplo, al pulsar el enlace de: <A HREF="ayuda.html" TARGET="Contenido"<Ayuda<A> ...se cargara la pgina ayuda.html dentro del frame que contenga en su etiqueta FRAME SRC="xxx.html" NAME="Contenido". TARGET tiene otros parmetros tambin muy tiles. Han de estar siempre en minsculas: TARGET="_blank". Abre una nueva ventana del navegador con el enlace activado cargado a pantalla completa. Habr dos ventanas del mismo navegador funcionando a la vez.

28

Prof. Oscar Lozano Rodrguez

MANUAL BSICO DE HTML


TARGET="_self". Con l el enlace se carga dentro del propio frame. Si se elimina la etiqueta y no ponemos nada de TARGET conseguiremos lo mismo, por lo que no tiene mucha utilidad. TARGET="_top". El enlace se carga a pantalla completa dentro de la misma ventana del navegador. Esto es muy til, y se suele olvidar ponerlo. Si no se pone, al cargar pginas ajenas a las nuestras se cargaran dentro del frame, y si tienen frames tambin el problema empeora. Hemos de introducirlo SIEMPRE cuando hagamos enlaces con URL completas de WEB ajenos al nuestro.

Recuerda que pueden colocarse frames dentro de otros frames. Por ejemplo, podemos decidir que un frame con forma de columna se divida en otros dos con forma de fila. Si queremos una distribucin as:

----------------|1| | | | | |---| 3 | | | | |2| | | | | -----------------

...tendremos que introducir un cdigo similar al siguiente (hemos llamado a las tres pginas dentro de los frames 1, 2 y 3): <HTML> <HEAD><TITLE>Pgina con dos columnas y una de ellas divida en dos filas</TITLE></HEAD> <FRAMESET COLS="25%, *"> <FRAMESET ROWS="40%, *"> <FRAME SRC="1.html"> <FRAME SRC="2.html"> </FRAMESET> <FRAME SRC="3.html" NAME="Contenido"> <NOFRAMES> <body> Tu navegador no soporta frames. Pulsa <A HREF="index.html">aqu<A> para acceder a la pgina de contenidos. </body> </NOFRAMES> </FRAMESET> </HTML>

Ya para terminar veremos los frames flotantes. Son totalmente desconocidos para la mayor parte de los navegantes y/o creadores de pginas WEB. Slamente funcionan con Microsoft Internet Explorer 3.0 o superior, y no es ms que un recuadro con una pgina WEB que est contenido a su vez en otra. Se hace mediante la etiqueta <IFRAME> y </FRAME> adems de una serie de

29

Prof. Oscar Lozano Rodrguez

MANUAL BSICO DE HTML


parmetros ms: NAME="xxx" es anlogo al comando del mismo nombre de <FRAME>, es decir, para poder mediante TARGET cargar enlaces en el frame flotante. HEIGHT="x" y WIDTH="x" son los nmeros de pxels en altura y anchura del hueco destinado para el frame flotante. SCROLLING="yes/no/auto". Con una de estas tres palabras decidimos si queremos poner barras de desplazamiento o bien que se coloquen automticamente slo si se necesitan. SRC="xxx.html". Es el nombre de la pgina WEB contenida dentro del frame flotante. Aqu tenis un nico ejemplo que haba antes en el WEB de Duiops. Mira cmo pulsando con el botn derecho del ratn sobre el frame flotante puedes ver el cdigo fuente, ya que es una pgina totalmente independiente: <IFRAME NAME="Copyright" HEIGHT="300" WIDTH="500" SCROLLING="NO" SRC="copyrigh.html"> </IFRAME>

Si se usa un navegador no compatible con este tipo de frames no podrn leerse. Para evitarlo conviene colocar entre <FRAME> y </FRAME> un cdigo alternativo al mismo. Pondremos un ejemplo con el cdigo exacto y ms abajo lo incluiremos pero forzado para que se vea con todos los navegadores incluido el IE 3.0 o superior: <IFRAME NAME="Copyright" HEIGHT="300" WIDTH="500" SCROLLING="NO" SRC="copyrigh.html"> <CENTER> <P><FONT COLOR="#008080" SIZE="4"><B> Duiops 1997</B></FONT> </CENTER> <BR><P> <P><FONT COLOR="#008080">El diseo y cdigo de las pginas, los grficos de la barra de herramientas superior y gran parte del texto de los contenidos temticos es propiedad del autor. Est prohibido su uso y/o reproduccin del contenido del WEB antes mencionado sin permiso del mismo. <P>Todas las marcas aqu mencionadas son propiedad de sus respectivos fabricantes y/o diseadores.</FONT> </IFRAME>

30

Prof. Oscar Lozano Rodrguez