Tutorial HTML Basico

7/30/2019 Tutorial HTML Basico

1/68

Tutorial de HTML

Prlogo al manual de HTMLBienvenidos al manual de HTML de DesarrolloWeb. A travs de todos estos captulosvamos a descubrir el lenguaje utilizado para la creacin de pginas web: el Hyper TextMarkup Language, ms conocido como HTML.

Puede que en un principio, el hecho de hablar de un lenguaje informtico pare los pies ams de uno. No os asustis, el HTML no deja de ser ms que una forma un tanto peculiarde dar formato a los textos e imgenes que pretendemos ver por medio de un navegador.

Antes de entrar en materia, lo cual haremos de una forma directa y practica, osrecomendamos fervorosamente la lectura previa de nuestro manual Publicar en

Internet. A partir de esta gua, aprenderis los conceptos ms bsicos necesarios paracreacin de un sitio web. Tambin os permitir acceder a este manual con unosconocimientos de base sobre HTML imprescindibles y os dejara bien claro lo que suconocimiento aporta con respecto al simple uso de editores de HTML.

El pblico al que va enfocado este manual es a todos aquellos que, con conocimientosmnimos de informtica, desean hacer mundialmente pblico un mensaje, una idea o unainformacin usando para ello el medio ms prctico, econmico y actual: Internet.

Lo que necesitis como base para llevar a buen trmino el aprendizaje (aparte de leer elmanual Publicar en Internet) es:

Saber escribir con un teclado

Saber manejar un ratn

Tener ganas de aprender

Como podris ver, cualquier persona que sepa manejar un ordenador tiene losconocimientos bsicos para aprender HTML. Si le pones un poco de ganas y sigues estemanual hasta el final, tendrs las siguientes habilidades o conocimientos:

Capacidad para crear y publicar vuestro propio sitio web con un mnimo de calidad.

Conocimientos de todo tipo sobre las tecnologas y herramientas empleadas en elmbito de la Red.

Posiblemente una aficin que puede convertirse en pasin y terminar, en algunoscasos, siendo un vicio o un oficio.

Os recordamos que estamos a vuestra entera disposicin para resolveros todo tipo dedudas referentes a este manual. Contactarnos es tan fcil como pinchar sobre el mail delautor del articulo.

Tambin podis formular vuestras cuestiones y, esperamos que en un futuro ayudar aotros compaeros, en el foro sobre HTML o bien en la lista de correo de DesarrolloWeb.

Para quien no sepa nada sobre crear una pgina web, y le gusta que le expliquen las cosasdesde cero y de manera visual, recomendamos ver elvdeo donde mostramos el procesode creacin de la primera pgina bsica.
http://www.desarrolloweb.com/manuales/3http://www.desarrolloweb.com/manuales/3http://www.desarrolloweb.com/manuales/3http://www.forosdelweb.com/f4/http://www.desarrolloweb.com/listacorreo/http://www.desarrolloweb.com/articulos/video-crear-primera-pagina-web.htmlhttp://www.desarrolloweb.com/articulos/video-crear-primera-pagina-web.htmlhttp://www.desarrolloweb.com/articulos/video-crear-primera-pagina-web.htmlhttp://www.desarrolloweb.com/manuales/3http://www.forosdelweb.com/f4/http://www.desarrolloweb.com/listacorreo/http://www.desarrolloweb.com/articulos/video-crear-primera-pagina-web.htmlhttp://www.desarrolloweb.com/articulos/video-crear-primera-pagina-web.htmlhttp://www.desarrolloweb.com/manuales/3http://www.desarrolloweb.com/manuales/3


2/68

Pasemos pues sin ms prembulos a ver de qu se trata el HTML...

Introduccin al HTMLHTML es el lenguaje con el que se escriben las pginas web . Las pginas web pueden servistas por el usuario mediante un tipo de aplicacin llamada navegador. Podemos decir

por lo tanto que el HTML es el lenguaje usado por los navegadores para mostrar laspginas webs al usuario, siendo hoy en da la interface ms extendida en la red.

Este lenguaje nos permite aglutinar textos, sonidos e imgenes y combinarlos a nuestrogusto. Adems, y es aqu donde reside su ventaja con respecto a libros o revistas, el HTMLnos permite la introduccin de referencias a otras pginas por medio de los enlaceshipertexto.

El HTML se cre en un principio con objetivos divulgativos. No se pens que la web llegaraa ser un rea de ocio con carcter multimedia, de modo que, el HTML se cre sin dar

respuesta a todos los posibles usos que se le iba a dar y a todos los colectivos de genteque lo utilizaran en un futuro. Sin embargo, pese a esta deficiente planificacin, si que sehan ido incorporando modificaciones con el tiempo, estos son los estndares del HTML.Numerosos estndares se han presentado ya. El HTML 4.01 es el ltimo estndar aseptiembre de 2001.

Esta evolucin tan anrquica del HTML ha supuesto toda una seria de inconvenientes ydeficiencias que han debido ser superados con la introduccin de otras tecnologasaccesorias capaces de organizar, optimizar y automatizar el funcionamiento de las webs.Ejemplos que pueden sonaros son lasCSS,JavaScript u otros. Veremos ms adelante enqu consisten algunas de ellas.

Otros de los problems que han acompaado al HTML es la diversidad de navegadorespresentes en el mercado los cuales no son capaces de interpretar un mismo cdigo de unamanera unificada. Esto obliga al webmster a, una vez creada su pgina, comprobar queesta puede ser leda satisfactoriamente por todos los navegadores, o al menos, los msutilizados.

Adems del navegador necesario para ver los resultados de nuestro trabajo, necesitamosevidentemente otra herramienta capaz de crear la pgina en si. Un archivo HTML (unapgina) no es ms que un texto. Es por ello que para programar en HTML necesitamos un

editor de textos.

Es recomendable usar elBloc de notas que viene con windows, u otro editor de textossencillo. Hay que tener cuidado con algunos editores ms complejos como Wordpad oMicrosoft Word, pues colocan su propio cdigo especial al guardar las pginas y HTML esnicamente texto plano, con lo que podremos tener problemas.

Existen otro tipo de editores especficos para la creacin de pginas web los cuales
http://www.desarrolloweb.com/articulos/26.phphttp://www.desarrolloweb.com/articulos/26.phphttp://www.desarrolloweb.com/articulos/25.phphttp://www.desarrolloweb.com/articulos/25.phphttp://www.desarrolloweb.com/articulos/327.phphttp://www.desarrolloweb.com/articulos/327.phphttp://www.desarrolloweb.com/articulos/26.phphttp://www.desarrolloweb.com/articulos/25.phphttp://www.desarrolloweb.com/articulos/327.php


3/68

ofrecen muchas facilidades que nos permiten aumentar nuestra productividad. Noobstante, es aconsejable en un principio utilizar una herramienta lo ms sencilla posiblepara poder prestar la mxima atencin a nuestro cdigo y familiarizarnos lo antes posiblecon l. Siempre tendremos tiempo ms delante de pasarnos a editores ms verstiles conla consiguiente ganancia de tiempo.

Para tener ms claro todo el tema de editores y los tipos que existen, visita los artculos:

Editores de HTML.

Bloc de notas.

Tambin puedes acceder a descripciones editores ms complejos que el Block deNotas, pero ms potentes como Homesite oUltraEdit.

Es importante tener claro todo ello puesto que en funcin de vuestros objetivos puedeque, ms que aprender HTML, resulte ms interesante aprender el uso de una aplicacinpara la creacin de pginas.

As pues, una pgina es un archivo donde est contenido el cdigo HTML en forma detexto. Estos archivos tienen extensin .html o .htm (es indiferente cul utilizar). De modoque cuando programemos en HTML lo haremos con un editor de textos y guardaremosnuestros trabajos con extensin .html, por ejemplo mipgina.html

Consejo: Utiliza siempre la misma extensin en tus archivos HTML.Eso evitar que te confundas al escribir los nombres de tus archivosunas veces con .htm y otras con .html. Si trabajas con un equipo enun proyecto todava ms importante que os pongis todos deacuerdo en la extensin.

Sintaxis del HTMLEl HTML es un lenguaje de marcas que basa su sintaxis en un elemento de base al quellamamos etiqueta. A travs de las etiquetas vamos definiendo los elementos deldocumento, como enlaces, prrafos, imgenes, etc. As pues, un documento HTML estarconstituido por texto y un conjunto de etiquetas para definir la forma con la que se tendrque presentar el texto y otros elementos en la pgina.

La etiqueta presenta frecuentemente dos partes:

Una apertura de forma general

Un cierre de tipo

Todo lo incluido en el interior de esa etiqueta sufrir las modificaciones que caracterizan aesta etiqueta. As por ejemplo:

Las etiquetas y definen un texto en negrita. Si en nuestro documento HTMLescribimos una frase con el siguiente cdigo:
http://www.desarrolloweb.com/articulos/195.phphttp://www.desarrolloweb.com/articulos/195.phphttp://www.desarrolloweb.com/articulos/327.phphttp://www.desarrolloweb.com/articulos/331.phphttp://www.desarrolloweb.com/articulos/334.phphttp://www.desarrolloweb.com/articulos/334.phphttp://www.desarrolloweb.com/articulos/195.phphttp://www.desarrolloweb.com/articulos/327.phphttp://www.desarrolloweb.com/articulos/331.phphttp://www.desarrolloweb.com/articulos/334.php


4/68

Esto esta en negrita

El resultado Ser:

Esto esta en negrita

Las etiquetas

y
definen un prrafo. Si en nuestro documento HTMLescribiramos:
Hola, estamos en el prrafo 1

Ahora hemos cambiado de prrafo

El resultado sera:

Hola, estamos en el prrafo 1

Ahora hemos cambiado de prrafo

Partes de un documento HTML

Adems de todo esto, un documento HTML ha de estar delimitado por la etiqueta

y . Dentro de este documento, podemos asimismo distinguir dos partes

principales:

El encabezado, delimitado por y donde colocaremos etiquetas de ndole

informativo como por ejemplo el titulo de nuestra pgina.

El cuerpo, flanqueado por las etiquetas y , que ser donde colocaremos

nuestro texto e imgenes delimitados a su vez por otras etiquetas como las que hemos

visto.

El resultado es un documento con la siguiente estructura:

Etiquetas y contenidos del encabezado

Datos que no aparecen en nuestra pgina pero que son importantes para catalogarla:

Titulo, palabras clave,...


5/68

Etiquetas y contenidos del cuerpo

Parte del documento que ser mostrada por el navegador: Texto e imgenes

Las maysculas o minsculas son indiferentes al escribir etiquetas

A notar que las etiquetas pueden ser escritas con cualquier tipo de combinacin de

maysculas y minsculas. , o son la misma etiqueta. Resulta sin

embargo aconsejable acostumbrarse a escribirlas en minscula ya que otras tecnologas

que pueden convivir con nuestro HTML (XML por ejemplo) no son tan permisivas y nunca

viene mal coger buenas costumbres desde el principio para evitar fallos triviales en un

futuro.

Tu primera pginaPodemos ya con estos conocimientos, y alguno que otro ms, crear nuestra primerapgina. Para ello, abre tu editor de textos y copia y pega el siguiente texto en un nuevodocumento.

Cocina Para Todos

Bienvenido,

Ests en la pgina Comida para Todos.

Aqu aprenders recetas fciles y deliciosas.

Ahora guarda ese archivo con extensin .html o .htm en tu disco duro. Para elloaccedemos al men Archivo y seleccionamos la opcin Guardar como. En la ventanaelegimos el directorio donde deseamos guardarlo y colocaremos su nombre, por ejemplomi_pagina.html

Consejo: Utiliza nombres en tus archivos que tengan algunas normas bsicas paraahorrarte disgustos y lios.


6/68

Nuestro consejo es que no utilices acentos ni espacios ni otros caracteres raros.Tambin te ayudar escribir siempre las letras en minsculas.

Esto no quiere decir que debes hacer nombres de archivos cortos, es mejor

hacerlos descriptivos para que te aclaren lo que hay dentro. Algn caracter comoel guin "-" o el guin bajo "_" te puede ayudar a separar las palabras. Porejemplo quienes_somos.html

Con el documento HTML creado, podemos ver el resultado obtenido a partir de unnavegador. Es conveniente, llegado a este punto, hacer hincapi en el hecho de que notodos los navegadores son idnticos. Desgraciadamente, los resultados de nuestro cdigopueden cambiar de uno a otro por lo que resulta aconsejable visualizar la pgina en varios.Generalmente se usan Internet Explorer y Netscape como referencias ya que son los msextendidos.

A decir verdad, en el momento que estas lneas son escritas, Internet Explorer acapara lainmensa mayora de usuarios (90% ms o menos) y Netscape esta relegado a un segundoplano. Esto no quiere decir que lo debemos dejar totalmente de lado ya que el 10% devisitas que puede proporcionarnos puede resultar muy importante para nosotros. Por otraparte, parece que se ha hecho publica la intencin de Netscape de desviar un poco sutemtica de negocios hacia otros derroteros y abandonar esta llamada "lucha denavegadores" en la cual estaba recibiendo la peor parte.

Pues bien, volviendo al tema, una vez creado el archivo .html o .htm, podemos visualizar

el resultado de nuestra labor abriendo dicha pgina con un navegador. Para hacerlo, laforma resulta diferente dependiendo del navegador:

Si estamos empleando el Explorer, hemos de ir al barra de men, elegir Archivo yseleccionar Abrir. Una ventana se abrir. Pulsamos sobre el botn Examinar yaccederemos a una ventana a partir de la cual podremos movernos por el interior denuestro disco duro hasta dar con el archivo que deseamos abrir.

La cosa no resulta ms difcil para Netscape. En este caso, nos dirigimos tambin a la barrade men principal y elegimos File y a continuacin Open File. La misma ventana debsqueda nos permitir escudriar el contenido de nuestro PC hasta dar con el archivobuscado.

Nota: Tambin puedes abrir el archivo si accedes al directorio donde loguardaste. En l podrs encontrar tu archivo HTML y vers que tiene como iconoel logotipo de Netscape o el de Internet Explorer. Para abrirlo simplementehacemos un doble click sobre l.


7/68

Una vez abierto el archivo podris ver vuestra primera pgina web. Algo sencillita pero poralgo se empieza. Ya veris como en poco tiempo seremos capaces de mejorarsensiblemente.

Fijaos en la parte superior izquierda de la ventana del navegador. Podris comprobar lapresencia del texto delimitado por la etiqueta . Esta es una de las funciones de estaetiqueta, cuyo principal cometido es el de servir de referencia en los motores debsqueda como Altavista oYahoo.

Por otro lado, los elementos que colocamos entre la etiqueta y sepueden ver en el espacio reservado para el cuerpo de la pgina.

Se puede ver la pgina del ejemplo en funcionamiento aqu.

Si ahora hacis click con el botn derecho sobre la pgina y elegs Ver cdigo fuente (oView page source) veris como en una ventana accesoria aparece el cdigo de nuestrapgina. Este recurso es de extremada importancia ya que nos permite ver el tipo detcnicas empleadas por otros para la confeccin de sus pginas.

Con todo esto asimilado ya estamos en condiciones de adentrarnos un poco ms en ladescripcin de algunas de las etiquetas ms empleadas del HTML.

Posible problema: Al utilizar el Block de Notas en Windows en ocasiones, aunquele digamos que es un archivo .html, el documento se guarda como si fuera untexto y no una pgina web. Lo que est pasando es que el Block de Notas tienepredeterminado guardar sus archivos con extensin .txt y en realidad lo que estguardando en el disco duro es mi_pagina.html.txt
http://www.altavista.com/http://www.yahoo.com/http://www.yahoo.com/http://www.desarrolloweb.com/articulos/ejemplos/html/pagina1.htmlhttp://www.altavista.com/http://www.yahoo.com/http://www.desarrolloweb.com/articulos/ejemplos/html/pagina1.html


8/68

Para conseguir tener el control de las extensiones en el block de notas y enWindows en general podemos acceder a MI-PC y en el men de Ver seleccionis"Opciones de carpeta". En la ventana que sale pulsamos en la solapa "Ver" y nospermite deseleccionar una caja de seleccin que pone algo como "Ocultar

extensiones para los tipos de archivos conocidos". (As se hace en Win98, puedevariar un poco en otras versiones de Windows.)

Con ello conseguiremos que se vea siempre la extensin del archivo con el queestamos trabajando y que el Block de Notas nos haga caso cuando le indicamosque grabe el archivo con otra extensin que no sea .txt

formato de prrafos en HTMLEn los captulos anteriores hemos presentado a titulo de ejemplo algunas etiquetas que permiten

dar formato a nuestro texto. En este capitulo veremos con ms detalle las ms ampliamente

utilizadas y ejemplificaremos algunas de ellas posteriormente.

Formatear un texto pasa por tareas tan evidentes como definir los prrafos, justificarlos, introducir

vietas, numeraciones o bien poner en negrita, itlica...

Hemos visto que para definir los prrafos nos servimos de la etiqueta

que introduce un salto y

deja una lnea en blanco antes de continuar con el resto del documento.

Podemos tambin usar la etiqueta
, de la cual no existe su cierre correspondiente (),

para realizar un simple retorno de carro con lo que no dejamos una lnea en blanco sino que solo

cambiamos de lnea.

Nota: Existen otras etiquetas que no tienen su correspondiente de cierre, como

para las imgenes, las veremos ms adelante. Esto ocurre porque un salto de lnea o una

imagen no empiezan y acaban ms adelante sino que slo tienen presencia en un lugar

puntual.

Podis comprobar que cambiar de lnea en nuestro documento HTML sin introducir alguna de

estas u otras etiquetas no implica en absoluto un cambio de lnea en la pgina visualizada. Enrealidad el navegador introducir el texto y no cambiara de lnea a no ser que esta llegue a su fin o

bien lo especifiquemos con la etiqueta correspondiente.

Los prrafos delimitados por etiquetas

pueden ser fcilmente justificados a la izquierda,

centro o derecha especificando dicha justificacin en el interior de la etiqueta por medio de un

atributo align. Un atributo no es ms que un parmetro incluido en el interior de la etiqueta que


9/68

ayuda a definir el funcionamiento de la etiqueta de una forma ms personal. Veremos a lo largo

de este manual cantidad de atributos muy tiles para todo tipo de etiquetas.

As, si desesemos introducir un texto alineado a la izquierda escribiramos:

Texto alineado a la izquierda

El resultado seria:

Texto alineado a la izquierda

Para unajustificacin al centro:

Texto alineado al centro

que dara:

Texto alineado al centro

Parajustificar a la derecha:

Texto alineado a la derecha

cuyo efecto seria:

Texto alineado a la derecha

Como veis, en cada caso el atributo align toma determinados valores que son escritos entre

comillas. En algunas ocasiones necesitamos especificar algunos atributos para el correcto

funcionamiento de la etiqueta. En otros casos, el propio navegador toma un valor definido por

defecto. Para el caso de align, el valor por defecto es left.

Nota: Los atributos tienen sus valores indicados entre comillas ("), pero si no los

indicamos entre comillas tambin funcionar en la mayora de los casos. Sin embargo, es

aconsejable que pongamos siempre las comillas para acostumbrarnos a utilizarlas, por

dar homogeneidad a nuestros cdigos y para evitar errores futuros en sistemas ms

quisquillosos.

El atributo align no es exclusivo de la etiqueta

. Otras etiquetas muy comunes, que veremos

ms adelante, entre las cuales se introducen texto o imgenes, suelen hacer uso de este atributo


10/68

de una forma habitual.

Imaginemos un texto relativamente largo donde todos los prrafos estn alineados a la izquierda

(por ejemplo). Una forma de simplificar nuestro cdigo y de evitar introducir continuamente el

atributo align sobre cada una de nuestras etiquetas es utilizando la etiqueta .

Esta etiqueta por si sola no sirve para nada. Tiene que estar acompaada del atributo align y lo

que nos permite es alinear cualquier elemento (prrafo o imagen) de la manera que nosotros

deseemos.

As, el cdigo:

Parrafo1

Parrafo3

Parrafo2

es equivalente a:

Parrafo1

Parrafo2

Parrafo3

Como hemos visto, la etiqueta marca divisiones en las que definimos un mismo tipo de

alineado.

Ejemplo prctico:

Para practicar un poco lo que acabamos de ver vamos a proponer un ejercicio que podis resolver

en vuestros ordenadores. Simplemente queremos construir una pgina que tenga, por este orden:

2 Prrafos centrados

3 Prrafos alineados a la derecha

Un salto de lnea triple

1 prrafo alineado a la izquierda

No vamos a escribir en esta ocasin el cdigo fuente del ejercicio. Podemos verlo en

funcionamiento en nuestro navegador y en la ventana podemos obtener el cdigo fuente

seleccionando en el men Ver la opcin Cdigo fuente.
http://www.desarrolloweb.com/articulos/ejemplos/html/ejemplo2.htmlhttp://www.desarrolloweb.com/articulos/ejemplos/html/ejemplo2.htmlhttp://www.desarrolloweb.com/articulos/ejemplos/html/ejemplo2.htmlhttp://www.desarrolloweb.com/articulos/ejemplos/html/ejemplo2.html


11/68

Ver el ejercicio en marcha.

Encabezados

Existen otras etiquetas para definir prrafos especiales, formateados como ttulos. Son los

encabezados o Header en ingls. Como decimos, son etiquetas que formatean el texto como untitular, para lo cual asignan un tamao mayor de letra y colocan el texto en negrita.

Hay varios tipos de encabezados, que se diferencian en el tamao de la letra que utilizan. La

etiqueta en concreto es la , para los encabezados ms grandes, para los de segundo

nivel y as hasta que es el encabezado ms pequeo.

Los encabezados implican tambin una separacin en prrafos, as que todo lo que escribamos

dentro de y (o cualquier otro encabezado) se colocar en un prrafo independiente.

Podemos ver cmo se presentan algunos encabezados a continuacin.

Encabezado de nivel 1

Se ver de esta manera en la pgina:

Encabezado de nivel 1Los encabezados, como otras etiquetas de HTML, soportan el atributo align. Vemos un ejemplo de

encabezado de nivel 2 alineado al centro.


Se ver de esta manera en la pgina:


Otro ejercicio interesante es construir una pgina web que contenga todos los encabezados

posibles. Se puede ver a continuacin.

Todos los encabezados

http://www.desarrolloweb.com/articulos/ejemplos/html/ejemplo2.htmlhttp://www.desarrolloweb.com/articulos/ejemplos/html/ejemplo2.html


12/68






Se puede ver el ejercicio en una pgina aparte.

Consejo: No debemos utilizar las etiquetas de encabezado para formatear el texto, es

decir, si queremos colocar un tipo de letra ms grande y en negrita debemos utilizar las

etiquetas que existen para ello (que veremos en seguida). Los encabezados son para

colocar titulares en pginas web y es el navegador el responsable de formatear el textode manera que parezca un titular. Cada navegador, pues, puede formatear el texto a su

gusto con tal de que parezca un titular.

formateando el textoAdems de todo lo relativo a la organizacin de los prrafos, uno de los aspectosprimordiales del formateo de un texto es el de la propia letra. Resulta muy comn yprctico presentar texto resaltado en negrita, itlica y otros. Paralelamente el uso dendices, subndices resulta vital para la publicacin de textos cientficos. Todo esto y

mucho ms es posible por medio del HTML a partir de multitud de etiquetas entre lascuales vamos a destacar algunas.

Negrita

Podemos escribir texto en negrita incluyndolo dentro de las etiquetas y (bold).Esta misma tarea es desempeada por y siendo ambas equivalentes.Nosotros nos inclinamos por la primeras por simple razon de esfuerzo.

Escribiendo un cdigo de este tipo:

Texto en negrita

Obtenemos este resultado:

Texto en negrita

Nota: Qu diferencia hay entre y ?
http://www.desarrolloweb.com/articulos/ejemplos/html/ejemplo_header.htmlhttp://www.desarrolloweb.com/articulos/ejemplos/html/ejemplo_header.html


13/68

Aunque las dos etiquetas hacen el mismo efecto, tienen una peculiaridad que lashace distintas. La etiqueta indica negrita, mientras que la etiqueta indica que se debe escribir resaltado. El HTML lo interpretan los navegadoressegn su criterio, es por eso que las pginas se pueden ver de distinta manera en

unos browsers y en otros. La etiqueta quiere decir "encabezado de nivel 1",es el navegador el responsable de formatear el texto de manera que parezca unencabezado de primer nivel. En la prctica los encabezados de Internet Explorer yNetscape son muy parecidos (tamao de letra grande y en negrita), pero otronavegador podra colocar los encabezados con subrayado si le parecieseoportuno.

La diferencia entre y se podr entender ahora. Mientras que significa simplemente negrita y todos los navegadores la interpretarn comonegrita, es una etiqueta que significa que se tiene que resaltar

fuertemente el texto y cada navegador es el responsable de resaltarlo comodesee. En la prctica coloca el texto en negrita, pero podra ser que unnavegador decidiese resaltar colocando negrilla, subrayado y color rojo en eltexto.

Itlica

Tambin en este caso existen dos posibilidades, una corta: e (italic) y otra un pocoms larga: y . En este manual, y en la mayora de las pginas que veris porah, os encontraris con la primera forma sin duda ms sencilla a escribir y a acordarse.

He aqu un ejemplo de texto en itlica:

Texto en itlica

Que da el siguiente efecto:

Texto en itlica

Subrayado

El HTML nos propone tambin para el subrayado el par de etiquetas: y (underlined). Sin embargo, el uso de subrayados ha de ser aplicado con mucha precaucindado que los enlaces hipertexto van, a no ser que se indique lo contrario, subrayados conlo que podemos confundir al lector y apartarlo del verdadero inters de nuestro texto.

Subndices y suprandices


14/68

Este tipo de formato resulta de extremada utilidad para textos cientficos. Las etiquetasempleadas son:

y para los suprandices y para los subndices

Aqu tenis un ejemplo:

La 13CC3H4ClNOS es un heterociclo alergenoenriquecido

El resultado:

La 13CC3H4ClNOS es un heterociclo alergeno enriquecido

Anidar etiquetas

Todas estas etiquetas y por supuesto el resto de las vistas y que veremos ms adelantepueden ser anidadas unas dentro de otras de manera a conseguir resultados diferentes.As, podemos sin ningn problema crear texto en negrita e itlica embebiendo unaetiqueta dentro de la otra:

Esto slo est en negrita y esto en negrita e itlica

Esto nos daria:

Esto slo est en negrita y esto en negrita e itlica

Consejo: Cuando anides etiquetas HTML hazlo correctamente. Nos referimos aque si abres etiquetas dentro de otra ms principal, antes de cerrar la etiquetaprincipal cierres las etiquetas que hayas abierto dentro de ella.

Debemos evitar cdigos como el siguiente:Esto est en negrita e itlica

En favor de cdigos con etiquetas correctamente anidadas:Esto est en negrita e itlica

Esto es muy aconsejable, aunque los navegadores entiendan bien las etiquetasmal anidadas, por dos razones:

1. Sistemas como XML no son tan permisivos con estos errores y puede queen el futuro nuestras pginas no funcionen correcamente.

2. A los navegadores les cuesta mucho tiempo de procesamiento resolvereste tipo de errores, incluso ms que construir la propia pgina y debemos


15/68

evitarles que sufran por una mala codificacin.

Color, tamao y tipo de letraA pesar de que por razones de homogeneidad y sencillez de codigo este tipo de formatos

son controlados actualmente porhojas de estilo en cascada (de las cuales ya tendremostiempo de hablar), existe una forma clsica y directa de definir color tamao y tipo deletra de un texto determinado.

Esto se hace a partir de la etiqueta y su cierre correspondiente. Dentro de estaetiqueta deberemos especificar los atributos correspondientes a cada uno de estosparmetros que deseamos definir. A continuacin os comentamos los atributosprincipales de esta etiqueta:

Atributo face

Define el tipo de letra. Este atributo es interpretado por versiones de Netscape a partir dela 3 y de MSIE 3 o superiores. Otros navegadores las ignoran completamente y muestranel texto con la fuente que utilizan.

Hay que tener cuidado con este atributo ya que cada usuario, dependiendo de laplataforma que utilice, puede no disponer de los mismos tipos de letra que nosotros conlo que, si nosotros elegimos un tipo del que no dispone, el navegador se ver forzado amostrar el texto con la fuente que utiliza por defecto (suele ser Times New Roman). Paraevitar esto, dentro del atributo suelen seleccionarse varios tipos de letra separados porcomas. En este caso el navegador comprobar que dispone del primer tipo enumerado y si

no es as, pasar al segundo y as sucesivamente hasta encontrar un tipo que posea o bienacabar la lista y poner la fuente por defecto. Veamos un ejemplo.

Este texto tiene otra tipografa

Que se visualizara as en una pgina web.

Este texto tiene otra tipografa

Nota: Aqu tenemos un ejemplo de atributo cuyo valor debe estar limitado por

comillas ("). Habamos dicho que las comillas eran opcionales en los atributos, sinembargo esto no es as siempre. Si el valor del atributo contiene espacios, comoes el caso de:

face="Comic Sans MS,arial,verdana"

debemos colocar las comillas para limitarlo. En caso de no tener comillas
http://www.desarrolloweb.com/manuales/2/http://www.desarrolloweb.com/manuales/2/http://www.desarrolloweb.com/manuales/2/


16/68

face=Comic Sans MS,arial,verdana

se entendera que face=Comic, pero no se tendra en cuenta todo lo que sigue,porque HTML no lo asociara al valor del atributo. En este caso HTML pensaraque las siguientes palabras (despus del espacio) son otros atributos, pero como

no los conoce como atributos simplemente los desestimar.

Atributo size

Define el tamao de la letra. Este tamao puede ser absoluto o relativo.

Si hablamos en trminos absolutos, existen 7 niveles de tamao distintos numerados de 1a 7 por orden creciente. Elegiremos por tanto un valor size="1" para la letra ms pequeao size="7" para la ms grande.

Este texto es ms grande


Este texto es ms grande

Podemos asimismo modificar el tamao de nuestra letra con respecto al del textomostrado precedentemente definiendo el nmero de niveles que queremos subir o bajaren esta escala de tamaos por medio de un signo + o -. De este modo, si definimosnuestro atributo como size="+1" lo que queremos decir es que aumentamos de un nivel el

tamao de la letra. Si estabamos escribiendo previamente en 3, pasaremosautomticamente a 4.Los tamaos reales que veremos en pantalla dependern de la definicin y del tamao defuente elegido por el usuario en el navegador. Este tamao de fuente puede ser definidoen el Explorer yendo al menu superior, Ver/Tamao de la fuente. En Netscape elegiremosView/Text Size. Esta flexibilidad puede en ms de una ocasin resultarnos embarazosa yaque en muchos casos desearemos que el tamao del texto permanezca constante paraque ste quepa en un determinado espacio. Veremos en su momento que esta prefijacindel tamao puede ser llevada a cabo por las hojas de estilo en cascada.

Atributo color

El color del texto puede ser definido mediante el atributo color. Cada color es a su vezdefinido por un nmero hexadecimal que esta compuesto a su vez de tres partes. Cadauna de estas partes representa la contribucin del rojo, verde y azul al color en cuestin.

Podis entender cmo funciona esta numeracin y cules son los colores que resultanms compatibles a partir de este artculo: Los colores y HTML.
http://www.desarrolloweb.com/articulos/1.phphttp://www.desarrolloweb.com/articulos/1.php


17/68

Por otra parte, es posible definir de una manera inmediata algunos de los colores msfrecuentemente usados para los que se ha creado un nombre ms memotcnico:

Nombre Color

AquaBlack

Blue

Fuchsia

Gray

Green

Lime

Maroon

Navy

Olive

Purple

Red

Silver

Teal

White

Yellow

Este texto est en rojo


Este texto est en rojo

Con todo esto estamos ya en disposicion de crear un texto formateado de una formarealmente elaborada.

Pongamos pues en practica todo lo que hemos aprendido en estos capitulos haciendo unejercicio consistente en una pgina que tenga las siguientes caractersticas:

Un titular con encabezado de nivel 1, en itlica y color verde oliva.

Un segundo titular con encabezado de nivel 2, tambin de color verde oliva.

Todo el texto de la pgina deber presentarse con una fuente distinta de la fuentepor defecto. Por ejemplo "Comic Sans MS" y en caso de que sta no est en elsistema que se coloque la fuente "Arial".


18/68

Se puede ver una posible solucin del ejercicio en este enlace. (Ver el cdigo fuente de la

pgina para ver cmo lo hemos resuelto)

Los colores y HTMLEl la composicin de webs juegan un papel muy importante los colores. Se indican envalores RGB, es decir, que para conseguir un color cualquiera mezclaremos cantidades deRojo, Verde y Azul.

Los valores RBG se indican en numeracin hexadecimal, en base 16. (Los dgito puedencrecer hasta 16. Como no hay tantos dgitos numricos se utilizan las letras de la A a la F.

0=0 4=4 8=8 C=12

1=1 5=5 9=9 D=13

2=2 6=6 A=10 E=14

3=3 7=7 B=11 F=15

Para conseguir un color, mezclaremos valores de esta manera:

RRGGBBDonde cada valor puede crecer desde 00 hasta FF.

Ejemplo: Cmo se cambiara la fuente para escribir en rojo:Rojo

Al Atributo color le damos un valor RGB en formato hexadecimal. El caracter # se coloca al

principio de la cadena.

Otros colores:Naranja #FF8000

Verde turquesa #339966

Azul oscuro #000080

Colores compatibles en todos los sistemas

Como las pginas web las tienen que ver todos los usuarios, y los sistemas que utilizanpara entrar son distintos, hay que utilizar colores compatibles con la paleta de todos ellos.

La forma de conseguir esto es limitando nuestros colores alos que se pueden conseguirutilizando la siguiente norma:

Utilizaremos siempre

estos valores:

00
http://www.desarrolloweb.com/articulos/ejemplos/html/home.htmlhttp://www.desarrolloweb.com/articulos/ejemplos/html/home.html


19/68

33

66

99

CC

FF

Ejemplos: #3366FF#FF9900#666666

Se consiguen los colores siguientes:

Por ltimo, te ofrecemos unos archivos con programillas en JavaScript que te pueden

ayudar a encontrar los colores adecuados. Entro otros, podrs encontrar el script quegenera la tabla de arriba.

Colores.zip 16Kb

Atributos para pginasLas pginas HTML pueden construirse con variedad de atributos que le pueden dar unaspecto a la pgina muy personalizado. Podemos definir atributos como el color de fondo,el color del texto o de los enlaces. Estos atributos se definen en la etiqueta y,como decamos son generales a toda la pgina.

Lo mejor para explicar su funcionamiento es verlos uno por uno.

Atributos para fondos

bgcolor: especificamos un color de fondo para la pgina. En elcaptulo anterior y en eltaller de los colores y HTMLhemos aprendido a construir cualquier color, con su nombre osu valor RGB. El color de fondo que podemos asignar con bgcolor es un color plano, esdecir el mismo para toda la superficie del navegador.

background: sirve para indicar la colocacin de una imagen como fondo de la pgina. Laimagen se coloca haciendo un mosaico, es decir, se repite muchas veces hasta ocupartodo el espacio del fondo de la pgina. En captulos ms adelante veremos como seinsertan imgenes con HTML y los tipos de imgenes que se pueden utilizar.

Ejemplo de fondo
http://www.desarrolloweb.com/articulos/reportajes/archivos/zips/colores.ziphttp://www.desarrolloweb.com/articulos/556.php?manual=21http://www.desarrolloweb.com/articulos/556.php?manual=21http://www.desarrolloweb.com/articulos/1.phphttp://www.desarrolloweb.com/articulos/1.phphttp://www.desarrolloweb.com/articulos/reportajes/archivos/zips/colores.ziphttp://www.desarrolloweb.com/articulos/556.php?manual=21http://www.desarrolloweb.com/articulos/1.php


20/68

Vamos a colocar esta imagen como fondo en la pgina.

La imagen se llama fondo.jpg y suponemos que se encuentra en el mismo directorio que lapgina. En este caso se colocara la siguiente etiqueta

Se puede ver elefecto de colocar ese fondo en una pgina a parte.

Consejo: siempre que coloquemos una imagen de fondo, debemos ponertambin un color de fondo cercano al color de la imagen.

Esto se debe a que, al colocar una imagen de fondo, el texto de la pginadebemos colocarlo en un color que contraste suficientemente con dicho fondo. Siel visitante no puede ver el fondo por cualquier cuestin (Por ejemplo tenerdeshabilitada la carga de imgenes) puede que el texto no contraste lo suficientecon el color de fondo por defecto de la web.

Creo que lo mejor ser poner un ejemplo. Si la imagen de fondo es oscura,tendremos que poner un texto claro para que se pueda leer. Si el visitante queaccede a la pgina no ve la imagen de fondo, le saldr el fondo por defecto, que

generalmente es blanco, de modo que al tener un texto con color claro sobre unfondo blanco, nos pasar que no podremos leer el texto convenientemente.

Ocurre parecido cuando se est cargando la pgina. Si todava no ha llegado anuestro sistema la imagen de fondo, se ver el fondo que hayamos seleccionadocon bgcolor y es interesante que sea parecido al color de la imagen para que sepueda leer el texto mientras se carga la imagen de fondo.

Color del texto

text: este atributo sirve para asignar el color del texto de la pgina. Por defecto es el

negro.

Adems del color del texto, tenemos tres atributos para asignar el color de los enlaces de

la pgina. Ya debemos saber que los enlaces deben diferenciarse del resto del texto de la

pgina para que los usuarios puedan identificarlos fcilmente. Para ello suelen aparecer
http://www.desarrolloweb.com/articulos/ejemplos/html/fondo.htmlhttp://www.desarrolloweb.com/articulos/ejemplos/html/fondo.htmlhttp://www.desarrolloweb.com/articulos/ejemplos/html/fondo.html


21/68

subrayados y con un color ms vivo que el texto. Los tres atributos son los siguientes:

link: el color de los enlaces que no han sido visitados. (por defecto es azul clarito)

vlink: el color de los enlaces visitandos. La "v" viene justamente de la palabra visitado. Es

el color que tendrn los enlaces que ya hemos visitado. Por defecto su color es morado.

Este color debera ser un poco menos vivo que el color de los enlaces normales.

alink: es el color de los enlaces activos. Un enlace est activo en el preciso instante que se

pulsa. A veces es difcil darse cuenta cuando un enlace est activo porque en el momento

en el que se activa es porque lo estamos pulsando y en ese caso el navegador abandonar

la pgina rpidamente y no podremos ver el enlace activo ms que por unos instantes

mnimos.

Ejemplo de color del texto

Vamos a ver una pgina donde el color de fondo sea negro, y los colores del texto y los

enlaces sean claros. Pondremos el color de texto balnco y los enlaces amarillos, ms

resaltados los que no estn visitados y menos resaltados lo que ya estn visitados. Para

ello escribiramos la etiqueta body as:

Elefecto se puede ver en una pgina a parte.

Mrgenes

Con otros atributos de la etiqueta se pueden asignan espacios de margen en las

pginas, lo que es muy til para eliminar los mrgenes en blanco que aparecen a los lados,

arriba y debajo de la pgina. Estos atributos son distintos para Internet Explorer y para

Netscape Navigator, por lo que debemos utilizarlos todos si queremos que todos los

navegadores los interpreten perfectamente.

leftmargin: para indicar el margen a los lados de la pgina. Vlido para iexplorer.

topmargin: para indicar el margen arriba y debajo de la pgina. Para iexplorer.

marginwidth: la contrapartida de leftmargin para Netscape. (Margen a los lados)
http://www.desarrolloweb.com/articulos/ejemplos/html/textos_color.htmlhttp://www.desarrolloweb.com/articulos/ejemplos/html/textos_color.htmlhttp://www.desarrolloweb.com/articulos/ejemplos/html/textos_color.html


22/68

marginheight: igual que topmargin, pero para Netscape. (Margen arriba y abajo)

Tenemos un artculo sobre la utilizacin de estos atributos para hacerdiseos avanzados

con tablas en distintas definiciones de pantalla, que puede ser interesante de leer.

Un ejemplo de pgina sin margen es la propia pgina de DesarrolloWeb.com, que ests

visitando actualmente. (Por lo menos a la hora de escribir este artculo) Adems, vamos a

ver otra pgina sin mrgenes, por si alguien necesita ver el ejemplo en estas lneas.

Hola amigos

Gracias por visitarme!

Esta pgina tiene el fondo blanco y dentro una tabla con el fondo rojo. En la pgina

podremos ver que la tabla ocupa el espacio en la pgina sin dejar sitio para ningn tipo de

margen. Puede verse el ejemplo en una pgina a parte.

Listas I - Listas desordenadasLas posibilidades que nos ofrece el HTML en cuestin de tratamiento de texto sonrealmente notables. No se limitan a lo visto hasta ahora, sino que van ms lejos todava.Varios ejemplos de ello son las listas, que sirven para enumerar y definir elementos, lostextos preformateados y las cabeceras o ttulos.

Las listas originalmente estn pensadas para citar, numerar y definir cosas a travs decaractersticas, o al menos as lo hacemos en la escritura de textos. Sin embargo, las listasfinalmente se utilizan para mucho ms que enumerar una serie de puntos, en realidad son

un recurso muy interesante para poder maquetar elementos diversos, como barras denavegacin, pestaas etc. Pero esto lo veremos ms adelante, cuando apliquemos estilosCSSa las listas.

De momento, en esteManual de HTML, trataremos las listas desde el punto de vista de suconstruccin y veremos los diferentes tipos que existen, y que podemos utilizar pararesolver nuestras distintas necesidades a la hora de escribir textos en HTML.

Podemos distinguir tres tipos de listas HTML:
http://www.desarrolloweb.com/articulos/10.phphttp://www.desarrolloweb.com/articulos/10.phphttp://www.desarrolloweb.com/articulos/10.phphttp://www.desarrolloweb.com/articulos/10.phphttp://www.desarrolloweb.com/articulos/ejemplos/html/margenes.htmlhttp://www.desarrolloweb.com/css/http://www.desarrolloweb.com/css/http://www.desarrolloweb.com/manuales/21/http://www.desarrolloweb.com/manuales/21/http://www.desarrolloweb.com/articulos/10.phphttp://www.desarrolloweb.com/articulos/10.phphttp://www.desarrolloweb.com/articulos/ejemplos/html/margenes.htmlhttp://www.desarrolloweb.com/css/http://www.desarrolloweb.com/manuales/21/


23/68

Listas desordenadas

Listas ordenadas

Listas de definicin

Las veremos detenidamente una a una.

Listas desordenadas

Son delimitadas por las etiquetas y (unordered list). Cada uno de los elementosde la lista es citado por medio de una etiqueta (sin cierre, aunque no hayinconveniente en colocarlo). La cosa queda as:

Pases del mundo

ArgentinaPer

Chile

El resultado:

Pases del mundo

Argentina

Per

Chile

Podemos definir el tipo de vieta empleada para cada elemento. Para ello debemosespecificarlo por medio del atributo type incluido dentro de la etiqueta de apertura ,si queremos que el estilo sea vlido para toda la lista,o dentro le la etiqueta siqueremos hacerlo especfico de un solo elemento. La sintaxis es del siguiente tipo:

donde tipo de vieta puede ser uno de los siguientes:

circlediscsquare

Nota: En algunos navegadores no funciona la opcin de cambiar el tipo de vieta amostrar y por mucho que nos empeemos, siempre saldr el redondel negro.

En caso de que no funcione siempre podemos construir la lista a mano con la vieta quequeramos utilizando las tablas de HTML. Veremos ms adelante cmo trabajar con tablas.

Vamos a ver un ejemplo de lista con un cuadrado en lugar de un redondel, y en el ltimoelemento colocaremos un crculo. Para ello vamos a colocar el atributo type en la etiqueta
http://www.desarrolloweb.com/articulos/557.phphttp://www.desarrolloweb.com/articulos/558.phphttp://www.desarrolloweb.com/articulos/559.phphttp://www.desarrolloweb.com/articulos/557.phphttp://www.desarrolloweb.com/articulos/558.phphttp://www.desarrolloweb.com/articulos/559.php


24/68

, con lo que afectar a todos los elementos de la lista.

Elemento 1Elemento 2

Elemento 3Elemento 4

Que tiene como resultado

Elemento 1

Elemento 2

Elemento 3

Elemento 4

Listas II - Listas ordenadasEstamos en el Manual de HTML y continuamos estudiando las listas de HTML, con las quecrear estructuras atractivas para presentar la informacin. En el captulo anterior vimos laslistas desordenadas y ahora estudiaremos las listas ordenadas.

Listas ordenadas

Las listas ordenadas sirven tambin para presentar informacin, en diversos elementos oitems, con la particularidad que stos estarn predecidos de un nmero o una letra paraenumerarlos, siempre por un orden.

Para realizar las listas ordenadas usaremos las etiquetas (ordered list) y su cierre.Cada elemento sera igualmente indicado por la etiqueta , que ya vimos en las listasdesordenadas.

Pongamos un ejemplo:

Reglas de comportamiento en el trabajo
El jefe siempre tiene la raznEn caso de duda aplicar regla 1
El resultado es:

Reglas de comportamiento en el trabajo

1. El jefe siempre tiene la razn

2. En caso de duda aplicar regla 1
http://www.desarrolloweb.com/manuales/21/http://www.desarrolloweb.com/articulos/557.phphttp://www.desarrolloweb.com/manuales/21/http://www.desarrolloweb.com/articulos/557.php


25/68

Del mismo modo que para las listas desordenadas, las listas ordenadas ofrecen laposibilidad de modificar el estilo. En concreto nos es posible especificar el tipo denumeracin empleado eligiendo entre nmeros (1, 2, 3...), letras (a, b, c...) y susmaysculas (A, B, C,...) y nmeros romanos en sus versiones maysculas (I, II, III,...) yminsculas (i, ii, iii,...).

Para realizar dicha seleccin hemos de utilizar, como para el caso precedente, el atributotype, el cual ser situado dentro de la etiqueta . Los valores que puede tomar elatributo en este caso son:

1 Para ordenar por nmerosa Por letras del alfabetoA Por letras maysculas del alfabetoi Ordenacin por nmeros romanos en minsculasI Ordenacin por nmeros romanos en maysculas

Nota: Recordamos que en algunos navegadores no funciona la opcin de cambiarel tipo de vieta a mostrar

Puede que en algn caso deseemos comenzar nuestra enumeracin por un nmero o letraque no tiene por qu ser necesariamente el primero de todos. Para solventar estasituacin, podemos utilizar un segundo atributo, start, que tendra como valor un nmero.Este nmero, que por defecto es 1, corresponde al valor a partir del cual comenzamos adefinir nuestra lista. Para el caso de las letras o los nmeros romanos, el navegador seencarga de hacer la traduccin del nmero a la letra correspondiente.

Os proponemos un ejemplo usando este tipo de atributos:

Ordenamos por numeros
Elemento 1 Elemento 2
Ordenamos por letras

Elemento a Elemento b

Ordenamos por nmeros romanos empezando por el 10


26/68

Elemento x Elemento xi

El resultado:

Ordenamos por nmeros1. Elemento 1

2. Elemento 2

Ordenamos por letras

a. Elemento a

b. Elemento b

Ordenamos por numeros romanos empezando por el 10

x. Elemento x

xi. Elemento xi

Listas III - Listas de definicinTerminamos el tema de listas en el manual de HTML de DesarrolloWeb.com estudiandolas listas de definicin. Veremos tambin la anidacin de listas, que resultar un recursointeresante para estructurar datos un poco ms complejos o enumerar elementos con unajerarqua.

Listas de definicin

Las listas de definicin sirven para hacer un conjunto de elementos con pares concepto-descripcin. Es decir, se especificarn varios trminos por su nombre y se escribir una

definicin para cada uno. Cada elemento es presentado junto con su definicin, unodetrs de otro.

Para realizar una lista de definicin, ja etiqueta principal es y (definition list). Laetiquetas del elemento y su definicin son (definition term) y (definitiondefinition) respectivamente.

Aqu os proponemos un cdigo que podr aclarar este sistema:

Diccionario de la Real Academia

BrujulaSerula montada en una escbulaOrejaSesenta minutejos

El efecto producido:
http://www.desarrolloweb.com/manuales/21/http://www.desarrolloweb.com/manuales/21/


27/68

Diccionario de la Real Academia

BrujulaSerula montada en una escbula

OrejaSesenta minutejos

Fijaos en que cada lnea esta desplazada hacia la izquierda. Este tipo de etiquetasson usadas a menudo con el propsito de crear textos ms o menos desplazados hacia laizquierda.

El cdigo:

Primer nivel de desplazamiento

Segundo nivel de desplazamiento

Tercer nivel de desplazamiento

El resultado:

Primer nivel de desplazamientoSegundo nivel de desplazamientoTercer nivel de desplazamiento

Anidando listas

Nada nos impide utilizar todas estas etiquetas de forma anidada como hemos visto enotros casos. De esta forma, podemos conseguir listas mixtas como por ejemplo:

Ciudades del mundo

Argentina

Buenos AiresBariloche

Uruguay

MontevideoPunta del Este


28/68

De esta forma creamos una lista como esta:

Ciudades del mundo

Argentina1. Buenos Aires

2. Bariloche

Uruguay

1. Montevideo

2. Punta del Este

Caracteres especialesUna pgina web se ha de ver en paises distintos, que usan conjuntos de caracteresdistintos. El lenguaje HTML nos ofrece un mecanismo por el que podemos estar seguros

que una serie de caracteres raros se van a ver bien en todos los ordenadores del mundo,independientemente de su juego de caracteres.

Este conjunto son los caracteres especiales. Cuando queremos poner uno de estoscaracteres en una pgina, debemos sustituirlo por su cdigo.

Por ejemplo, la "" (a minscula acentuada) se escribe "" de modo que la palabrapgina se escribira en una pgina HTML de este modo: pgina

Caracteres especiales bsicos

En realidad estos caracteres se usan en HTML para no confundir un principio o final deetiqueta, unas comillas o un & con su correspondiente caracter.

< < > >

& & " "

Caracteres especiales del HTML 2.0


29/68

Caracteres especiales del HTML 3.2


30/68

Otros caracteres especiales

Para descargar la lista de caracteres especiales: caracteresespeciales.zip 2Kb

Enlaces en HTML

Hasta aqu, hemos podido ver que una pgina web es un archivo HTML en el que podemos

incluir, entre otras cosas, textos formateados a nuestro gusto e imgenes (las veremos

enseguida). Del mismo modo, un sitio web podr ser considerado como el conjunto de

archivos, principalmente pginas HTML e imgenes, que constituyen el contenido al que el

navegante tiene acceso.

Sin embargo, no podramos hablar de navegante o de navegacin si estos archivos HTMLno estuviesen debidamente conectados entre ellos y con el exterior de nuestro sitio pormedio de enlaces hipertexto. En efecto, el atractivo original del HTLM radica en la posiblepuesta en relacin de los contenidos de los archivos introduciendo referencias bajo formade enlaces que permitan un acceso rpido a la informacin deseada. De poco servira en lared tener pginas aisladas a las que la gente no puede acceder y desde las que la gente nopuede saltar a otras.

Un enlace puede ser fcilmente detectado en una pgina. Basta con deslizar el punterodel ratn sobre las imgenes o el texto y ver como cambia de su forma original
http://www.desarrolloweb.com/articulos/reportajes/archivos/zips/caracteresespeciales.ziphttp://www.desarrolloweb.com/articulos/reportajes/archivos/zips/caracteresespeciales.zip


31/68

transformndose por regla general en una mano con un dedo sealador. Adicionalmente,estos enlaces suelen ir, en el caso de los textos, coloreados y subrayados para que elusuario no tenga dificultad en reconocerlos. Si no especificamos lo contrario (yatendremos ocasin de explicar como), estos enlaces texto estarn subrayados ycoloreados en azul. En el caso de las imgenes que sirvan de enlace, veremos que estn

delimitadas por un marco azul por defecto.Para colocar un enlace, nos serviremos de las etiquetas y . Dentro de la etiquetade apertura deberemos especificar asimismo el destino del enlace. Este destino serintroducido bajo forma de atributo, el cual lleva por nombre href.

La sintaxis general de un enlace es por tanto de la forma:

contenido

Siendo el contenido un texto o una imagen. Es la parte de la pgina que se colocar activay donde deberemos pulsar para acceder al enlace.

Por su parte, destino ser una pgina, un correo electrnico o un archivo.

En funcin del destino los enlaces son clsicamente agrupados del siguiente modo:

Enlaces internos: los que se dirigen a otras partes dentro de la misma pgina. Enlaces locales: los que se dirigen a otras pginas del mismo sitio web.

Enlaces remotos: los dirigidos hacia pginas de otros sitios web.

Enlaces con direcciones de correo: para crear un mensaje de correo dirigido a unadireccin.

Enlaces con archivos: para que los usuarios puedan hacer download de ficheros.

Enlaces internosSon los enlaces que apuntan a un lugar diferente dentro de la misma pgina. Este tipo deenlaces son esencialmente utilizados en pginas donde el acceso a los contenidos puede

verse dificultado debido al gran tamao de la misma. Mediante estos enlaces podemosofrecer al visitante la posibilidad de acceder rpidamente al principio o final de la pgina obien a diferentes prrafos o secciones.

Para crear un enlace de este tipo es necesario, aparte del enlace de origen propiamentedicho, un segundo enlace que ser colocado en el destino. Veamos ms claramente comofuncionan estos enlaces con un ejemplo sencillo:

Enlace con final de estedocumento, para queprobis sufuncionamiento:

Ir abajo

Supongamos que queremos crear un enlace que apunte al final de la pgina. Lo primeroser colocar nuestro enlace origen. Lo pondremos aqu mismo y lo escribiremos delsiguiente modo:

Ir abajo


32/68

Como podis ver, el contenido del enlace es el texto "Ir abajo" y el destino, abajo, es unpunto de la misma pgina que todava no hemos definido. Ojo al smbolo #; es l quienespecifica al navegador que el enlace apunta a una seccin en particular.

En segundo lugar, hay que generar un enlace en el destino. Este enlace llevara por nombreabajo para poder distinguirlo de los otros posibles enlaces realizados dentro de la misma

pgina. En este caso, la etiqueta que escribiremos ser sta:

A decir verdad, estos enlaces, aunque tiles, no son los ms extendidos de cuantos hay. Latendencia general es la de crear pginas (archivos) independientes con tamaos msreducidos enlazados entre ellos por enlaces locales (los veremos enseguida). De estaforma evitamos el exceso de tiempo de carga de un archivo y la introduccin de exceso deinformacin que pueda desviar la atencin del usuario.

Una aplicacin corriente de estos enlaces consiste en poner un pequeo ndice al principiode nuestro documento donde introducimos enlaces origen a las diferentes secciones.Paralelamente, al final de cada seccin introducimos un enlace que apunta al ndice de

manera que podamos guiar al navegante en la bsqueda de la informacin til para l.

Enlaces localesComo hemos dicho, un sitio web esta constituido de pginas interconexas. En el capituloanterior hemos visto como enlazar distintas secciones dentro de una misma pgina. Nosqueda pues estudiar la manera de relacionar los distintos documentos HTML quecomponen nuestro sitio web.

Para crear este tipo de enlaces, hemos de crear una etiqueta de la siguiente forma:

contenido

Por regla general, para una mejor organizacin, los sitios suelen estar ordenados por

directorios. Estos directorios suelen contener diferentes secciones de la pgina, imgenes,sonidos...Es por ello que en muchos casos no nos valdr con especificar el nombre delarchivo, sino que tendremos que especificar adems el directorio en el que nuestroarchivo.html esta alojado.

Si habis trabajado con MS-DOS no tendris ningn problema para comprender el modode funcionamiento. Tan solo hay que tener cuidado en usar la barra "/" en lugar de lacontrabarra "\".

Para aquellos que no saben como mostrar un camino de un archivo, aqu van una serie deindicaciones que os ayudaran a comprender la forma de expresarlos. No resulta difcil enabsoluto y con un poco de practica lo haris prcticamente sin pensar.

1. Hay que situarse mentalmente en el directorio en el que se encuentra la pginacon el enlace.

2. Si la pgina destino esta en un directorio incluido dentro del directorio en el quenos encontramos, hemos de marcar el camino enumerando cada uno de losdirectorios por los que pasamos hasta llegar al archivo y separndolos por elsmbolo barra "/". Al final obviamente, escribimos el archivo.

3. Si la pgina destino se encuentra en un directorio que incluye el de la pgina con elenlace, hemos de escribir dos puntos y una barra "../" tantas veces como niveles


33/68

subamos en la arborescencia hasta dar con el directorio donde esta emplazado elarchivo destino.

4. Si la pgina se encuentra en otro directorio no incluido ni incluyente del archivoorigen, tendremos que subir como en la regla 3 por medio de ".." hasta encontrarun directorio que englobe el directorio que contiene a la pgina destino. A

continuacin haremos como en la regla 2. Escribiremos todos los directorios porlos que pasamos hasta llegar al archivo.

Ejemplo:

Para clarificar este punto podemos hacer un ejemplo a partirde la estructura de directorios de la imagen.

Para hacer un enlace desde index.html hacia yyy.html:

contenidoPara hacer un enlace desde xxx.html hacia yyy.html:contenido

Para hacer un enlace desde yyy.html hacia xxx.html:contenido

Los enlaces locales pueden a su vez apuntar ya no a la pgina en general sino msprecisamente a una seccin concreta. Este tipo de enlaces resultan ser un hbrido deinterno y local. La sintaxis es de este tipo:

contenido

Como para los enlaces internos, en este caso hemos de marcar la seccin con otro enlacedel tipo:

Como ejemplo, he aqu un enlace que apunta al capitulo anterior al final de la pgina.

Enlaces externos, de correo y hacia

archivos.Para acabar con los enlaces vamos a ver los ltimos 3 tipos de enlaces que habamossealado.

Enlaces remotos

Son los enlaces que se dirigen hacia pginas que se encuentran fuera de nuestro sitio web,es decir, cualquier otro documento que no forma parte de nuestro sitio.

Este tipo de enlaces es muy comn y no representa ninguna dificultad. Simplementecolocamos en el atributo HREF de nuestra etiqueta la URL o direccin de la pgina conla que queremos enlazar. Ser algo parecido a esto.

ir a guiarte.com


34/68

Slo cabe destacar que todos las direcciones web (URLs) empiezan por http://. Esto indicaque el protocolo por el que se accede es HTTP, el utilizado en la web. No debemosolvidarnos de colocarlas, porque si no los enlaces sern tratados como enlaces locales anuestro sitio.

Otra cosa interesante es que no tenemos que enlazar con una pgina web con el

protocolo HTTP necesariamente. Tambin podemos acceder a recursos a travs de otrosprotocolos como el FTP. En tal caso, las direcciones de los recursos no comenzarn porhttp:// sino por ftp://.

Enlaces a direcciones de correo

Los enlaces a direcciones de correo son aquellos que al pincharlos nos abre un nuevomensaje de correo electrnico dirigido a una direccin de mail determinada. Estos enlacesson muy habituales en las pginas web y resultan la manera ms rpida de ofrecer alvisitante una va para el contacto con el propietario de la pgina.

Para colocar un enlace dirigido hacia una direccin de correo colocamos mailto: en elatributo href del enlace, seguido de la direccin de correo a la que se debe dirigir el

[email protected]

Este enlace se puede ver en funcionamiento aqu:[email protected]

Consejo: Cuando coloques enlaces a direcciones de correo procura indicar en elcontenido del enlace (lo que hay entre y ) la direccin de correo a la quese debe escribir. Esto es porque si un usuario no tiene configurado un programade correo en su ordenador no podr enviar mensajes, pero por lo menos podrcopiar la direccin de mail y escribir el correo a travs de otro ordenador o unsistema web-mail.

Adems de la direccin de correo del destinatario, tambin podemos colocar en el enlaceel asunto del mensaje. Esto se consigue colocando despus de la direccin de correo uninterrogante, la palabra subject, un signo igual (=) y el asunto en concreto.

[email protected]

Podemos colocar otros atributos del mensaje con una sintaxis parecida. En este casoindicamos tambin que el correo debe ir con copia a [email protected].

[email protected]

Nota: El visitante de la pgina necesitar tener configurada una cuenta de correoelectrnico en su sistema para enviar los mensajes. Lgicamente, si no tieneservicio de correo en el ordenador no se podrn enviar los mensajes y estesistema de contacto con el visitante no funcionar.

Tenemos un artculo en desarrolloweb que habla sobre el contacto con elnavegante.
mailto:[email protected]:[email protected]:[email protected]://www.desarrolloweb.com/articulos/5.phphttp://www.desarrolloweb.com/articulos/5.phpmailto:[email protected]://www.desarrolloweb.com/articulos/5.phphttp://www.desarrolloweb.com/articulos/5.php


35/68

Enlaces con archivos

Este no es un tipo de enlace propiamente dicho, pero lo sealamos aqu porque son untipo de enlaces muy habitual y que presenta alguna complicacin para el usuario novato.

El mecanismo es el mismo que hemos conocido en los enlaces locales y los enlaces

remotos, con la nica particularidad de que en vez de estar dirigidos hacia una pgina webest dirigido hacia un archivo de otro tipo.

Si queremos enlazar con un archivo mi_fichero.zip que se encuentra en el mismodirectorio que la pgina se escribira un enlace as.

Descarga mi_fichero.zip

Si pinchamos un enlace de este tipo nuestro navegador descargar el fichero, haciendo lapregunta tpica de "Qu queremos hacer con el archivo. Abrirlo o guardarlo en disco".

Podemos ver un ejemplo de enlace a archivo con su consiguiente ventana de descarga deun archivo.

Consejo: No colocar en Internet archivos ejecutables directamente sino archivos

comprimidos. Por dos razones:1. El archivo ocupar menos, con lo que ser ms rpida su transferencia.

2. Al preguntar al usuario lo que desea hacer con el fichero le ofrece laopcin de abrirlo y guardarlo en disco. Nosotros generalmentedesearemos que el usuario lo guarde en disco y no lo ejecute hasta que lotenga en su disco duro. Si se decido a abrirlo en vez de guardarlosimplemente lo pondr en marcha y cuando lo pare no se quedarguardado en su sistema. Si los archivos estn comprimidos obligaremos alusuario a descomprimirlos en su disco duro antes de ponerlos en marcha,con lo que nos aseguramos que el usuario lo guarde en su ordenador

antes de ejecutarlo.

Si queremos enlazar hacia otro tipo de archivo como un PDF o un mundo VRML

(Realidad virtual para Internet) lo seguimos haciendo de la misma manera. El navegador,si reconoce el tipo de archivo, es el responsable de abrirlo utilizando el conector adecuadopara ello. As, si por ejemplo enlazamos con un PDF pondr el programa Acrobat Readeren funcionamiento para mostrar los contenidos. Si enlazamos con un mundo VRMLpondr en marcha el plug-in que el usuario tenga instalado para ver los mundos virtuales(Cosmo Player por ejemplo).

Este sera un ejemplo de enlace a un documento PDF.

Descarga el PDF

Atributo nofollow en los enlacesDejemos aqu una pequea resea sobre un atributo que se est convirtiendo en esencialen los enlaces y que no habamos comentado en nuestro manual de HTML, aunque shabamos visto algo en nuestro manual de posicionamiento en buscadores.
http://www.desarrolloweb.com/articulos/reportajes/archivos/zips/contacto.ziphttp://www.desarrolloweb.com/articulos/reportajes/archivos/zips/contacto.zip


36/68

Nofollow es un atributo de los links HTML (etiqueta ), que sirve para definir o marcarel comportamiento de los buscadores cuando rastrean nuestra pgina web en busca decontenidos para indexarlos. Por defecto, cuando un buscador visita una pgina web varecorriendo todos sus enlaces y va indexando su contenido en su base de datos depginas. Esto es algo que hacen automtica y peridicamente. Ocurre tanto con los

enlaces internos a otras pginas de nuestro sitio como con los enlaces externos a otraspginas web. Los motores que recorren las webs de enlace a enlace, se llaman araas.

Ahora bien, nosotros podemos, a travs del atributo rel="nofollow", decirle a un buscadorque no contine indexando los contenidos de la pgina a la que lleva un enlace enparticular. Lo haramos as:

TEXTO_DEL_ENLACE

Un poco de historia sobre nofollow

Para completar estas notas habra que comentar que el atributo fue creado por iniciativade Google y Blogger en 2005, como una idea para detener el spam de enlaces en sitiosweb que permiten a los usuarios la participacin.

Una prctica comn de las personas que pretenden promocionar una pgina web esrealizar comentarios o participaciones en pginas web, en las que insertan enlaces a suspropios sitios. Esto se conoce como spam de enlaces, o con el trmino de spamdexing.

Con el atributo rel="nofolow" se pretenden mitigar los efectos de ese tipo de spam en lossitios como foros, blogs, o cualquier pgina que permita la interaccin con la comunidadde visitantes. Algunas pginas como la Wikipedia lo utilizan en todos los enlaces externos.

Actualmente el atributo ren=nofollow est bajo patente, aunque esta est liberada deroyalties, lo que quiere decir que se puede utilizar sin limitacin y sin tener que pagarnada.

Cmo interpretan los buscadores el Nofollow

El atributo es tenido en cuenta no slo por el motor de indexacin (araa) del buscadorGoogle, sino tambin por otras araas de buscadores tan importantes como Yahoo! oMSN. Aunque hay que decir que cada buscador hace un uso particular del atributo.

Habra que aclarar que los buscadores a menudo siguen el enlace que se ha marcadocomo nofollow, visitando aquella web que se haba enlazado. Lo que ocurre realmente esque no tienen en cuenta el link para asignarle ranking o directamente no lo indexan.

Promocin de webs y nofollow

Sobra decir que este atributo resulta bastante potente a la hora de trabajar con lapromocin de una pgina web, puesto que altera directamente el comportamiento de losbuscadores al rastrear las pginas, enlace a enlace.

As pues, los SEO, promocionadores de pginas o personas que trabajan en elposicionamiento en buscadores, lo tienen muy en cuenta en sus tcnicas para su trabajodel da a da. Existen diversas tcnicas que utilizan este atributo para realizar promocinde webs, como la que explicamos en el artculoArriesgada pero excelente tcnica SEOusando rel=nofollow, pero el uso ms importante es el que se ha comentado ya en esteartculo: ponerlo a los enlaces externos para no transferir ranking o posicionamientodesde nuestra web a otras webs externas.
http://www.desarrolloweb.com/articulos/tecnica-seo-arriesgada-pero-excelente.htmlhttp://www.desarrolloweb.com/articulos/tecnica-seo-arriesgada-pero-excelente.htmlhttp://www.desarrolloweb.com/articulos/tecnica-seo-arriesgada-pero-excelente.htmlhttp://www.desarrolloweb.com/articulos/tecnica-seo-arriesgada-pero-excelente.htmlhttp://www.desarrolloweb.com/articulos/tecnica-seo-arriesgada-pero-excelente.htmlhttp://www.desarrolloweb.com/articulos/tecnica-seo-arriesgada-pero-excelente.html


37/68

Otra tcnica relacionada con nofollow, pero ms segura, para que no se indexe parte delcontenido de nuestra pgina, es el uso del archivo robots.txt, que ya hemos comentadoanteriormente en DesarrolloWeb.com.

Imgenes en HTMLSin duda uno de los aspectos ms vistosos y atractivos de las pginas web es el grafismo.La introduccin en nuestro texto de imgenes puede ayudarnos a explicar ms fcilmentenuestra informacin y darle un aire mucho ms esttico. El abuso no obstante puedeconducirnos a una sobrecarga que se traduce en una distraccin para el navegante, quientendr ms dificultad en encontrar la informacin necesaria.

El uso de imgenes tambin tiene que ser realizado con cuidado porque aumentan eltiempo de carga de la pgina, lo que puede ser de un efecto nefasto si nuestro visitante notiene una buena conexin o si es un poco impaciente. Por ello es recomendable siempreoptimizar las imgenes para Internet, haciendo que su tamao en bytes sea lo mnimoposible, para facilitar la descarga, pero sin que ello comprometa mucho su calidad.

En este capitulo no explicaremos como crear ni tratar las imgenes, nicamente diremosque para ello se utilizan aplicaciones comoPaint Shop Pro, Photoshopo Gimp. Tampocoexplicaremos las particularidades de cada tipo de archivo: GIF, JPG o PNG y la forma deoptimizar nuestras imgenes. Un capitulo posterior al respecto ser dedicado a estemenester: Formatos grficos para pginas web.

Las imgenes son almacenadas en forma de archivos, principalmente GIF (para dibujos) oJPG (para fotos). Estos archivos los podemos obtener desde diversas vas, como porejemplo nuestra cmara digital, aunque tambin pueden ser creados por nosotros mismoscon algn editor grfico o pueden ser descargados gratuitamente en sitios webespecializados.

As pues, en estos primeros captulos nos limitaremos a explicar como insertar y alineardebidamente en nuestra pgina una imagen ya creada.

La etiqueta que utilizaremos para insertar una imagen es (image). Esta etiqueta noposee su cierre correspondiente y en ella hemos de especificar obligatoriamente elparadero de nuestro archivo grfico mediante el atributo src (source).

La sintaxis queda entonces de la siguiente forma:

Para expresar el camino, lo haremos de la misma forma que vimos para los enlaces. Lasreglas siguen siendo las mismas, lo nico que cambia es que, en lugar de una pginadestino, el destino es un archivo grfico.

Aparte de este atributo, indispensable obviamente para la visualizacin de la imagen, laetiqueta nos propone otra serie de atributos de mayor o menor utilidad, quelistamos a continuacin:

Atributo alt

Dentro de las comillas de este atributo colocaremos una brevsima descripcin de laimagen. Esta etiqueta no es indispensable pero presenta varias utilidades.
http://www.desarrolloweb.com/articulos/robots-txt.htmlhttp://www.desarrolloweb.com/articulos/333.phphttp://www.desarrolloweb.com/articulos/333.phphttp://www.desarrolloweb.com/articulos/330.phphttp://www.desarrolloweb.com/articulos/330.phphttp://www.desarrolloweb.com/articulos/gimp.htmlhttp://www.desarrolloweb.com/articulos/19.phphttp://www.desarrolloweb.com/directorio/recursos_gratis/directorios_de_imagenes/http://www.desarrolloweb.com/directorio/recursos_gratis/directorios_de_imagenes/http://www.desarrolloweb.com/articulos/575.php?manual=21http://www.desarrolloweb.com/articulos/robots-txt.htmlhttp://www.desarrolloweb.com/articulos/333.phphttp://www.desarrolloweb.com/articulos/330.phphttp://www.desarrolloweb.com/articulos/gimp.htmlhttp://www.desarrolloweb.com/articulos/19.phphttp://www.desarrolloweb.com/directorio/recursos_gratis/directorios_de_imagenes/http://www.desarrolloweb.com/directorio/recursos_gratis/directorios_de_imagenes/http://www.desarrolloweb.com/articulos/575.php?manual=21


38/68

Primeramente, durante el proceso de carga de la pgina, cuando la imagen no ha sidotodava cargada, el navegador mostrara esta descripcin, con lo que el navegante sepuede hacer una idea de lo que va en ese lugar.

Esto no es tan trivial si tenemos en cuenta que algunos usuarios navegan por la red conuna opcin del navegador que desactiva el muestreo de imgenes, con lo que tales

personas podrn siempre saber de qu se trata el grfico y eventualmente cambiar amodo con imgenes para visualizarla.

Adems, determinadas aplicaciones para discapacitados o telfonos vocales que nomuestran imgenes ofrecen la posibilidad de leerlas por lo que nunca esta de ms pensaren estos colectivos.

En general podemos considerar como aconsejable el uso de este atributo salvo paraimgenes de poca importancia y absolutamente indispensable si la imagen en cuestinsirve de enlace.

Atributos height y width

Definen la altura y anchura respectivamente de la imagen en pxeles.

Todos los archivos grficos poseen unas dimensiones de ancho y alto. Estas dimensionespueden obtenerse a partir del propio diseador grafico o bien haciendo clic con el botnderecho sobre la imagen vista por el navegador para luego elegir propiedades sobre elmen que se despliega.

El hecho de explicitar en nuestro cdigo las dimensiones de nuestras imgenes ayuda alnavegador a confeccionar la pgina de la forma que nosotros deseamos antes incluso deque las imgenes hayan sido descargadas.

As, si las dimensiones de las imgenes han sido proporcionadas, durante el proceso decarga, el navegador reservara el espacio correspondiente a cada imagen creando unamaquetacin correcta. El usuario podr comenzar a leer tranquilamente el texto sin que

este se mueva de un lado a otro cada vez que una imagen se cargue.Adems de esta utilidad, el alterar los valores de estos dos atributos, es una formainmediata de redimensionar nuestra imagen. Este tipo de utilidad no es aconsejable dadoque, si lo que pretendemos es aumentar el tamao, la perdida de calidad de la imagenser muy sensible. Inversamente, si deseamos disminuir su tamao, estaremos usando unarchivo ms grande de lo necesario para la imagen que estamos mostrando con lo queaumentamos el tiempo de descarga de nuestro documento innecesariamente.

Es importante hacer hincapi en este punto ya que muchos debutantes tienen esa malacostumbre de crear grficos pequeos redimensionando la imagen por medio de estosatributos a partir de archivos de tamao descomunal. Hay que pensar que el tamao de

una imagen con unas dimensiones de la mitad no se reduce a la mitad, sino que resultaser aproximadamente 4 veces inferior.

Atributo border

Definen el tamao en pxeles del cuadro que rodea la imagen.

De esta forma podemos recuadrar nuestra imagen si lo deseamos. Es particularmente tilcuando deseamos eliminar el borde que aparece cuando la imagen sirve de enlace. Endicho caso tendremos que especificar border="0".

Atributos vspace y hspace


39/68

Sirven para indicar el espacio libre, en pixeles, que tiene que colocarse entre la imagen ylos otros elementos que la rodean, como texto, otras imgenes, etc.

Atributo lowsrc

Con este atributo podemos indicar un archivo de la imagen de baja resolucin. Cuando elnavegador detecta que la imagen tiene este atributo primero descarga y muestra la

imagen de baja resolucin (que ocupa muy poco y que se transfiere muy rpido).Posteriormente descarga y muestra la imagen de resolucin adecuada (sealada con elatributo src, que se supone que ocupar ms y ser ms lenta de transferir).

Este atributo est en desuso, aunque supone una ventaja considerable para que ladescarga inicial de la web se realice ms rpido y que un visitante pueda ver una muestrade la imagen mientras se descarga la imagen real.

Truco: Utilizar imagenes como enlaces

Ni que decir tiene que una imagen, lo mismo que un texto, puede servir de enlace. Vista laestructura de los enlaces podemos muy fcilmente adivinar el tipo de cdigo necesario:

Ejemplo prcticoResultar obvio para los lectores hacer ahora una pgina que contenga una imagen variasveces repetida pero con distintos atributos.

Una de las veces que salga debe mostrarse con su tamao originar y con un bordede 3 pixeles.

En otra ocasin la imagen aparecer sin borde, con su misma altura y con unaanchura superior a la original

Tambin mostraremos la imagen sin borde, con su misma anchura y con una alturasuperior a la original

Por ltimo, mostraremos la imagen con una altura y anchura mayores que las

originales, pero proporcionalmente igual que antes.Vamos a utilizar esta imagen para hacer el ejercicio:

Las dimensiones originales de la imagen son 28x21, as que este sera el cdigo fuente:

Se puede ver el ejemplo en una pgina aparte.
http://www.desarrolloweb.com/articulos/ejemplos/html/imagenes1.htmlhttp://www.desarrolloweb.com/articulos/ejemplos/html/imagenes1.html


40/68

Alineacin de imgenes con HTML

Vimos en su momento el atributo align que nos permita alinear el texto a derecha, izquierda o

centro de nuestra pgina. Dijimos que este atributo no era exclusivo de la etiqueta

sino que

poda ser encontrado en otro tipo de etiquetas.

Pues bien, resulta ser una de esas etiquetas que aceptan este atributo aunque en este caso

el funcionamiento resulta ser diferente.

Para alinear una imagen horizontalmente podemos hacerlo de la misma forma que el texto, es

decir, utilizando el atributo align dentro de una etiqueta

o . En este caso, lo que

incluiremos dentro de esa etiqueta ser la imagen en lugar del texto:

Este cdigo mostrar la imagen en el centro:

Quedara as:

Sin embargo, ya hemos dicho que la etiqueta puede aceptar el atributo align. En este caso,

la utilidad que le damos difiere de la anterior.

El hecho de utilizar el atributo align dentro de la etiqueta nos permite, en el caso de darle

los valores left o right, justificar la imagen del lado que deseamos a la vez que rellenamos con

texto el lado opuesto. De esta forma embebemos nuestras imgenes dentro del texto de una

manera sencilla.

Aqu podis ver el tipo de cdigo a crear para obtener dicho efecto:

Texto tan extenso como queramos que cubrir la parte

izquierda de la imagen. Sigo poniendo texto para que se vea el efecto, Bla bla bla bla bla bla bla...


41/68

Quedara as:

Texto tan extenso como queramos que cubrir la

parte izquierda de la imagen. Sigo poniendo texto

para que se vea el efecto,

Bla bla bla bla bla bla bla...

Texto tan extenso como queramos que cubrir la parte derecha

de la imagen. Sigo poniendo texto para que se vea el efecto, Bla bla bla bla bla bla bla...

Quedara as:

Texto tan extenso como queramos que cubrir laparte izquierda de la imagen. Sigo poniendo texto

para que se vea el efecto,

Bla bla bla bla bla bla bla...

Si en algn momento desesemos dejar de rellenar ese espacio lateral, podemos pasar a una zona

libre introduciendo un salto de lnea
dentro del cual aadiremos un atributo: clear

As, etiquetas del tipo:

Saltara verticalmente hasta encontrar el lateral izquierdo libre.

Saltara verticalmente hasta encontrar el lateral derecho libre.

Saltar verticalmente hasta encontrar ambos laterales libres.

Ejemplo de clear:

Texto tan extenso como queramos que cubrir laparte izquierda.

Esto est debajo de la

imagen.

Existen otro tipo de valores que puede adoptar el atributo align dentro de la etiqueta

. Estos son relativos a la alineacin vertical de la imagen.


42/68

Supongamos que escribimos una lnea al lado de nuestra imagen. Esta lnea puede

quedar por ejemplo arriba, abajo o al medio de la imagen. Asimismo, puede que en una

misma lnea tengamos varias imgenes de alturas diferentes que pueden ser alineadas

de distintas forms.

Estos valores adicionales del atributo align son:

top

Ajusta la imagen a la parte ms alta de la lnea. Esto quiere decir que, si hay una imagen

ms alta, ambas imgenes presentaran el borde superior a la misma altura.

bottom

Ajusta el bajo de la imagen al texto.

Absbottom

Colocara el borde inferior de la imagen a nivel del elemento ms bajo de la lnea.

middle

Hace coincidir la base de la lnea de texto con el medio vertical de la imagen.

absmiddle

Ajusta la imagen al medio absoluto de la lnea.

Estas explicaciones, que pueden resultar un poco complicadas, pueden ser ms

fcilmente asimiladas a partir con un poco de practica.

Nos queda explicar como introducir debajo de la imagen un pie de foto o explicacin.

Para ello tendremos que ver antes de nada las tablas, en el prximos captulos...

Tablas en HTMLUna tabla en un conjunto de celdas organizadas dentro de las cuales podemos alojar

distintos contenidos.

En un principio nos podra parecer que las tablas son raramente tiles y que pueden serutilizadas principalmente para listar datos como agendas, resultados y otros datos de unaforma organizada. Nada ms lejos de la realidad.

Hoy, gran parte de los diseadores de pginas basan su maquetacin en este tipo deartilugios. En efecto, una tabla nos permite organizar y distribuir los espacios de la manerams optima. Nos puede ayudar a generar texto en columnas como los peridicos, prefijarlos tamaos ocupados por distintas secciones de la pgina o poner de una manera sencillaun pie de foto a una imagen.

Puede que en un principio nos resulte un poco complicado trabajar con estas estructuraspero, si deseamos crear una pgina de calidad, tarde o temprano tendremos que


43/68

vrnoslas con ellas y nos daremos cuenta de las posibilidades nos ofrecen.

Para empezar, nada ms sencillo que por el principio: las tablas son definidas por lasetiquetas y .

Dentro de estas dos etiquetas colocaremos todas las otras etiquetas, textos e imgenesque darn forma y contenido a la tabla.

Las tablas son descritas por lneas de izquierda a derecha. Cada una de estas lneas esdefinida por otra etiqueta y su cierre: y

Asimismo, dentro de cada lnea, habr diferentes celdas. Cada una de estas celdas serdefinida por otro par de etiquetas: y . Dentro de estas etiquetas ser dondecoloquemos nuestro contenido.

Aqu tenis un ejemplo de estructura de tabla:

Celda 1, linea 1 Celda 2, linea 1 Celda 1, linea 2 Celda 2, linea 2

El resultado:

Celda 1, linea 1 Celda 2, linea 1

Celda 1, linea 2 Celda 2, linea 2

Nota: Hasta aqu hemos visto todas las etiquetas que necesitamos conocer paracrear tablas. Existen otras etiquetas, pero lo que podemos conseguir con llas sepuede conseguir tambin usando las que hemos visto.

Por poner un ejemplo, sealamos la etiqueta , que sirve para crear una celdacuyo contenido est formatedo como un ttulo o cabecera de la tabla. En laprctica, lo que hace es poner en negrita y centrado el contenido de esa celda, loque se puede conseguir aplicando las correspondientes etiquetas dentro de lacelda. As:contenido de la celda.


44/68

A partir de esta idea simple y sencilla, las tablas adquieren otra magnitud cuando lesincorporamos toda una batera de atributos aplicados sobre cada tipo de etiquetas que lascomponen. A lo largo de los siguientes captulos nos adentraremos en el estudio de estosatributos de manera a proporcionaros los tiles indispensables para una buena puesta en

pgina.Podemos continuar las explicaciones de tablas en los artculos:

-Atributos para filas y celdas-Atributos de la tabla y conclusin-Bordes de tabla en HTML 4

Tablas en HTML. Atributos para filas y

celdas.Hemos visto en el capitulo anterior que las tablas estn compuestas de lneas que, a su

vez, contienen celdas. Las celdas son delimitadas por las etiquetas o por las etiquetas (si queremos texto en negrita y centrado) y constituyen un entorno independientedel resto del documento. Esto quiere decir que:

Podemos usar prcticamente cualquier tipo de etiqueta dentro de la etiqueta para, de esta forma, dar forma a su contenido.

Las etiquetas situadas en el interior de la celda no modifican el resto deldocumento.

Las etiquetas de fuera de la celda no son tenidas en cuenta por sta.

As pues, podemos especificar el formato de nuestras celdas a partir de etiquetasintroducidas en su interior o mediante atributos colocados dentro de la etiqueta de celda o bien, en algunos casos, dentro de la etiqueta , si deseamos que el atributo seavalido para toda la lnea. La forma ms til y actual de dar forma a las celdas es a partir delas hojas de estilo en cascadaque ya tendris la oportunidad de abordar ms adelante.

Veamos a continuacin algunos atributos tiles para la construccin de nuestras tablas.Empecemos viendo atributos que nos permiten modificar una celda en concreto o todauna lnea:

align Justifica el texto de la celda del mismo modo que sifuese el de un prrafo.

valign Podemos elegir si queremos que el texto aparezca arriba(top), en el centro (middle) o abajo (bottom) de la celda.

bgcolor Da color a la celda o lnea elegida.

bordercolor Define el color del borde.
http://www.desarrolloweb.com/articulos/628.phphttp://www.desarrolloweb.com/articulos/628.phphttp://www.desarrolloweb.com/articulos/629.phphttp://www.desarrolloweb.com/articulos/629.phphttp://www.desarrolloweb.com/articulos/bordes-tabla-html-4.htmlhttp://www.desarrolloweb.com/articulos/bordes-tabla-html-4.htmlhttp://www.desarrolloweb.com/articulos/627.phphttp://www.desarrolloweb.com/manuales/2http://

Documents

Tutorial HTML Basico