Reproductores mp3

Posted by Willy in Novedades

No es mi intención explicar los diferentes formatos de audio y las diferentes maneras de reproducirlo en una página web. Para ello hay un artículo excelente y muy claro en el blog de José María Campo "Insertar un reproductor de audio en una página web" o en el de Isidro Vidal "Reproductores de audio".

En mi caso pretendo solamente algo práctico, dar a conocer algunos de los más habituales reproductores de mp3 que se pueden integrar en una página web, y ayudar en los primeros pasos de la instalación.

¿Cómo instalarlos?

Para instalarlos el proceso es muy parecido en todos.

1. Se descarga el archivo .swf correspondiente de la web (enlaces más abajo) o se cogen del archivo del final del artículo.

2. Se sube al servidor el archivo del reproductor (.swf) y los de audio a reproducir (.mp3). Te recomiendo que para todo ello te crees una carpeta "sonido" o "audio" o como quieras para tener esos archivos ordenados.

3. Se copia y se pega el código correspondiente a cada reproductor donde queramos que aparezca en la página.

IMPORTANTE: Hay que modificar la dirección del reproductor y del archivo de audio por las tuyas, o sea quitar lo de "ruta_del_enlace/" por tu propia ruta tanto del reproductor como del archivo de sonido y "blues.mp3" por el archivo que quieras reproducir.

Y ya está.

Si utilizas SPIP y quieres integrarlos con él puede serte útil una contribución de SPIP-Contrib que muestra paso a paso como integrar uno de ellos, el DewPlayer en SPIP:
Sencillo reproductor mp3 en Flash para SPIP

Algunos reproductores y el código que he utilizado para insertarlos

El tema empleado para probarlos (blues.mp3) es el "Bush War Blues" de Billy Bragg, que regala en internet libre de derechos, y que es una versión actualizada del "Bourgeois Blues" que Leadbelly grabó en 1938 para protestar contra el racismo.

Si tu conexión es lenta, es la primera vez que pulsas el botón de reproducción, o tienes poco espacio en disco, puede que tarde un poco en oírse o no se escuche bien.

Reproductor mp3 de Web Creativo

Puede reproducir listas del propio sitio y es muy personalizable

+ info (en Inglés)

básico

con + botones

con otro color

Player mp3 multi (para listas) con volumen

Player mp3 multi (para listas) con otros colores

Player mp3 básico

<object type="application/x-shockwave-flash" data="ruta_del_enlace/player_mp3.swf" width="200" height="20">
 
<param name="movie" value="ruta_del_enlace/player_mp3.swf" />
 
<param name="FlashVars" value="mp3=ruta_del_enlace/blues.mp3" />
 
</object>

Player mp3 con + botones

<object type="application/x-shockwave-flash" data="ruta_del_enlace/player_mp3.swf" width="200" height="20">
 
<param name="movie" value="ruta_del_enlace/player_mp3.swf" />
 
<param name="FlashVars" value="mp3=ruta_del_enlace/blues.mp3&
 
showstop=1&showinfo=1" />
 
</object>

Player mp3 con otro color

<object type="application/x-shockwave-flash" data="ruta_del_enlace/player_mp3.swf" width="200" height="20">
 
<param name="movie" value="ruta_del_enlace/player_mp3.swf" />
 
<param name="FlashVars" value="mp3=ruta_del_enlace/blues.mp3&
 
bgcolor1=ffffff&bgcolor2=cccccc&
 
buttoncolor=999999&buttonovercolor=0&
 
slidercolor1=cccccc&slidercolor2=999999&
 
sliderovercolor=666666&textcolor=0" />
 
</object>

Player mp3 multi (para listas) con volumen

<object type="application/x-shockwave-flash" data="ruta_del_enlace/player_mp3_multi.swf" width="200" height="100">
 
<param name="movie" value="ruta_del_enlace/player_mp3_multi.swf" />
 
<param name="FlashVars" value="mp3=ruta_del_enlace/blues.mp3&title=Bush War Blues&showvolume=1" />
 
</object>

Player mp3 multi (para listas) con otros colores

<object type="application/x-shockwave-flash" data="ruta_del_enlace/player_mp3_multi.swf" width="200" height="100">
 
<param name="movie" value="ruta_del_enlace/player_mp3_multi.swf" />
 
<param name="wmode" value="transparent" />
 
<param name="FlashVars" value="mp3=ruta_del_enlace/blues.mp3&title=Bush War Blues&bgcolor1=f6f6f6&bgcolor2=cccccc&
 
buttoncolor=999999&buttonovercolor=0&
 
slidercolor1=cccccc&slidercolor2=999999&
 
sliderovercolor=666666&textcolor=0&
 
playlistcolor=999999&currentmp3color=996633&
 
scrollbarcolor=999999&scrollbarovercolor=0" />
 
</object>

XSPF Web Music Player

Puede reproducir listas del propio sitio o externas

+ info (en inglés)

(Music Player Slim)

(Music Player Button)

(Music Player Extended)

Music Player Slim

<object type="application/x-shockwave-flash" width="200" height="20"
 
data="ruta_del_enlace/xspf_player_slim.swf?
 
song_url=ruta_del_enlace/blues.mp3
 
&player_title=Bush_War_Blues
 
&song_title=Bush_War_Blues">
 
<param name="movie" 
 
value="ruta_del_enlace/xspf_player_slim.swf?
 
song_url=ruta_del_enlace/blues.mp3" /> </object>

Music Player Button gris

<object type="application/x-shockwave-flash" width="17" height="17"
 
data="ruta_del_enlace/musicplayer.swf?
 
song_url=ruta_del_enlace/blues.mp3
 
&player_title=Bush_War_Blues
 
&song_title=Bush_War_Blues">
 
<param name="movie" 
 
value="ruta_del_enlace/musicplayer.swf?
 
song_url=ruta_del_enlace/blues.mp3" /> </object>

Music Player Button verde

<object type="application/x-shockwave-flash"
 
data="ruta_del_enlace/musicplayer.swf?
 
&b_bgcolor=ffffff&b_fgcolor=666666
 
&b_colors=ff0000,00ff00,0000ff,000000
 
&song_url=ruta_del_enlace/blues.mp3" 
 
width="17" height="17">
 
<param name="movie" 
 
value="ruta_del_enlace/musicplayer.swf?
 
&b_bgcolor=ffffff&b_fgcolor=666666
 
&b_colors=ff0000,00ff00,0000ff,000000
 
&song_url=ruta_del_enlace/blues.mp3" />
 
</object>

Music Player Button cuadrado (ojo, es el musicplayer_f6.swf)

<object type="application/x-shockwave-flash"
 
data="ruta_del_enlace/musicplayer_f6.swf?
 
&b_bgcolor=dedede&b_fgcolor=666666
 
&b_colors=ff0000,00ff00,0000ff,000000
 
&song_url=ruta_del_enlace/blues.mp3" 
 
width="17" height="17">
 
<param name="movie" 
 
value="ruta_del_enlace/musicplayer_f6.swf?
 
&b_bgcolor=dedede&b_fgcolor=666666
 
&b_colors=ff0000,00ff00,0000ff,000000
 
&song_url=ruta_del_enlace/blues.mp3" />
 
</object>

Music Player Extended

<object type="application/x-shockwave-flash" width="200" height="80"
 
data="ruta_del_enlace/xspf_player.swf?
 
song_url=ruta_del_enlace/blues.mp3
 
&player_title=Bush_War_Blues
 
&song_title=Bush_War_Blues">
 
<param name="movie" 
 
value="ruta_del_enlace/xspf_player.swf?
 
song_url=ruta_del_enlace/blues.mp3" /> </object>

DewPlayer

(DewPlayer mini)

(DewPlayer)

(DewPlayer multi)

DewPlayer mini

<object type="application/x-shockwave-flash"
 
data="ruta_del_enlace/dewplayer-mini.swf?son=ruta_del_enlace/blues.mp3"
 
width="150" height="20"> 
 
<param name="movie"
 
value="ruta_del_enlace/dewplayer-mini.swf?son=ruta_del_enlace/blues.mp3" /> </object>

DewPlayer

<object type="application/x-shockwave-flash" data="ruta_del_enlace/dewplayer.swf?son=ruta_del_enlace/blues.mp3" width="200" height="20">
 
<param name="movie"
 
value="ruta_del_enlace/dewplayer.swf?son=ruta_del_enlace/blues.mp3" /></object>

DewPlayer multi

<object type="application/x-shockwave-flash"
 
data="ruta_del_enlace/dewplayer-multi.swf?son=ruta_del_enlace/blues.mp3" width="240" height="20"> 
 
<param name="movie"
 
value="ruta_del_enlace/dewplayer-multi.swf?son=ruta_del_enlace/blues.mp3" /> 
 
<param name="bgcolor" value="#336699"></object>

EMFF MusicPlayer

emff lila

<object type="application/x-shockwave-flash" data="ruta_del_enlace/emff_lila.swf?src=ruta_del_enlace/blues.mp3" width="200" height="80" />
 
<param name="movie"
 
value="ruta_del_enlace/emff_lila.swf?src=ruta_del_enlace/blues.mp3" />
 
<param name="quality" value="high" />
 
<param name="bgcolor" value="#ffffff" />
 
</object>

emff old

<object type="application/x-shockwave-flash" data="ruta_del_enlace/emff_old.swf?src=ruta_del_enlace/blues.mp3" width="110" height="34">
 
<param name="movie"
 
value="ruta_del_enlace/emff_old.swf?src=ruta_del_enlace/blues.mp3" />
 
<param name="quality" value="high" />
 
<param name="bgcolor" value="#ffffff" />
 
  </object>

emff standard

<object type="application/x-shockwave-flash" data="ruta_del_enlace/emff_standard.swf?src=ruta_del_enlace/blues.mp3" width="110" height="34">
 
<param name="movie" 
 
value="ruta_del_enlace/emff_standard.swf?src=ruta_del_enlace/blues.mp3" />
 
<param name="quality" value="high" />
 
<param name="bgcolor" value="#ffffff" />
 
  </object>

emff wooden

<object type="application/x-shockwave-flash" data="ruta_del_enlace/emff_wooden.swf?src=ruta_del_enlace/blues.mp3" width="110" height="80">
 
<param name="movie"
 
value="ruta_del_enlace/emff_wooden.swf?src=ruta_del_enlace/blues.mp3" />
 
<param name="quality" value="high" />
 
<param name="bgcolor" value="#ffffff" />
 
  </object>

Miniplayer aouka


 
<object type="application/x-shockwave-flash" data="../sonido/reproductores_flash/miniplayer_v12.swf" width="130" height="20">
 
<param name="movie" value="../sonido/reproductores_flash/miniplayer_v12.swf" />
 
<param name="FlashVars" value="mp3=../sonido/musica/blues.mp3
 
&outterborder=x555555
 
&autoload=true" />
 
</object>

PodPress

reproductor mp3 para WordPress


 
<object data="ruta_del_enlace/playerwpress.swf?
 
soundFile=ruta_del_enlace/blues.mp3" type="application/x-shockwave-flash" height="24" width="290"><param value="ruta_del_enlace/playerwpress.swf?
 
soundFile=ruta_del_enlace/blues.mp3" name="movie" />
 
<param value="high" name="quality" />
 
<param value="true" name="menu" />
 
<param value="transparent" name="wmode" /></object>

Mini MP3 Player (MMP3)

<object type="application/x-shockwave-flash" 
 
data="ruta_del_enlace/angular1.swf?src=ruta_del_enlace/blues.mp3" 
 
height="20" width="20">
 
<param name="movie"
 
value="ruta_del_enlace/angular1.swf?src=ruta_del_enlace/blues.mp3" />
 
<param name="quality" value="high" />
 
<param name="bgcolor" value="#ffffff" />
 
</object> 
 

 
<object type="application/x-shockwave-flash" 
 
data="ruta_del_enlace/angular2.swf?src=ruta_del_enlace/blues.mp3" 
 
height="20" width="20">
 
<param name="movie"
 
value="ruta_del_enlace/angular2.swf?src=ruta_del_enlace/blues.mp3" />
 
<param name="quality" value="high" />
 
<param name="bgcolor" value="#ffffff" />
 
</object>
 

 
<object type="application/x-shockwave-flash" 
 
data="ruta_del_enlace/round1.swf?src=ruta_del_enlace/blues.mp3" 
 
height="20" width="20">
 
<param name="movie"
 
value="ruta_del_enlace/round1.swf?src=ruta_del_enlace/blues.mp3" />
 
<param name="quality" value="high" />
 
<param name="bgcolor" value="#ffffff" />
 
</object> 
 

 
<object type="application/x-shockwave-flash" 
 
data="ruta_del_enlace/round2.swf?src=ruta_del_enlace/blues.mp3" 
 
height="20" width="20">
 
<param name="movie"
 
value="ruta_del_enlace/round2.swf?src=ruta_del_enlace/blues.mp3" />
 
<param name="quality" value="high" />
 
<param name="bgcolor" value="#ffffff" />
 
</object>

HBS MP3 Player

<object data="ruta_del_enlace/hbs_mp3_player.swf" width="52" height="20" type="application/x-shockwave-flash">
 
<param name="type" value="application/x-shockwave-flash" />
 
<param name="src" value="hbs_mp3_player.swf" />
 
<param name="data" value="hbs_mp3_player.swf" />
 
<param name="codebase" value="hbs_mp3_player.swf" />
 
<param name="FlashVars" value="TheSound=ruta_del_enlace/blues.mp3" />
 
<param name="allowScriptAccess" value="sameDomain" />
 
<param name="movie" value="ruta_del_enlace/hbs_mp3_player.swf" />
 
<param name="loop" value="false" />
 
<param name="quality" value="high" />
 
<param name="wmode" value="transparent" />
 
<a href="ruta_del_enlace/blues.mp3">Reproducir</a>
 
</object>

Enlaces

Son importantes no sólo para descargarlos sino también para ver, incluso en algunos de los sitios hay una herramienta para facilitarlo, las opciones de personalización: colores, tamaños, autoarranque, autoloop, invisibilidad,...

Reproductor mp3 de Neolao

Archivos individuales (hay muchas versiones):
Neolao.com (en francés)

Para listas de audio: Player mp3 multi de Neolao (en francés)

XSPF Web Music Player

Página de desarrolo: XSPF Web Music Player (en inglés)

DewPlayer

Página de desarrollo: Dewplayer (en francés)

EMFF MusicPlayer

Página de desarrollo: EMFF (en inglés)

Miniplayer aouka

Página de desarrollo: aouka.org (en francés)

PodPress

Reproductor mp3 de wordpress:
saute-mouton.org (en francés)

Personalizar autostart, loop, colores,...: 1pixelout.net (en ingles)

Mini MP3 Player (MMP3)

De joomlaos: MMP3 (en alemán, pero busca download y te lo podrás descargar)

HBS MP3 Player

De Sequane: HBS MP3 (en francés)

Si conoces otros reproductores o nuevos enlaces estaré encantado de incluirlos.

Archivos para descargar:

Reproductores flash para mp3

0 comentarios »

Manual HTML Básico

Posted by Willy in Novedades

Bájate el manual básico de HTML desde aquí ...

Gratis...

0 comentarios »

Estructura de un Documento

Posted by Willy in Basico

En un documento HTML podemos incluir texto, imágen, sonido y referencias a otros documentos. Para diferenciar las directivas de HTML (instrucciones) del texto normal, dichas directivas se encuentran encerradas entre los signos < y >. Determinadas directivas tienen un inicio y un final. La directiva final se acompaña del símbolo /. La estructura básica de un documento HTML tendría las siguientes directivas :

<HTML> inicio del documento

<HEAD> inicio de la cabecera

<TITLE> inicio del título

Titulo de la pagina

</TITLE> final del título

</HEAD> final de la cabecera

<BODY> inicio del cuerpo de la página

Texto, graficos y demás componentes de la página

</BODY> final del cuerpo de la página

</HTML> final del documento

El título de la página será el texto que identificará a la página, la hoja en sí la escribiremos entre las directivas
<BODY> y
</BODY>.

Muchas de las directivas de HTML pueden incluir parámetros. Estos parámetros añaden opciones especiales a la directiva. Veremos ahora las principales directivas que se usan en los documentos HTML con algunos de sus parámetros.

0 comentarios »

Directivas del HTML

Posted by Willy in Basico

Fondo del documento.

La directiva
<BODY> además de indicar el inicio y el final del cuerpo de nuestra hoja permite indicar el fondo de dicho documento. Si no incluimos ningún parámetro, el fondo de nuestro documento será de color blanco. Podemos cambiar el color de fondo con el parámetro
bgcolor de la siguiente forma :

<BODY bgcolor="código de color">

El código de color empieza con el símbolo
# y continua con seis cifras hexadecimales. Cada par de estas cifras indican el dominio de cada color principal en la mezcla final. Las dos primeras cifras indican el dominio del color rojo, las dos siguientes del color verde, y las dos últimas del color azul. El usar un numero hexadecimal de dos cifras para cada color nos permite indicar dominios desde el 0 (00) al 256 (FF).Por ejemplo, para que el fondo fuese de color verde puro la orden seria :

<BODY bgcolor="#00FF00">

Si la orden fuese :

<BODY bgcolor="#10A0FF">

conseguiriamos un color azul cielo, ya que estamos dando una mezcla de 10 partes de rojo (10), cien partes de verde (A0) y doscientas cincuenta y seis partes de azul (FF).

El número de mezclas de color es muy grande, de cualquier forma los programas editores de HTML nos calculan el codigo del color escogiendo nosotros el color de una paleta, lo cual resulta bastante mas sencillo que calcular la mezcla.

Ademas de definir el color del fondo, esta directiva nos permite definir los colores por defecto para el texto normal y los textos que acceden a un enlace en la página, por medio de los parámetros text y link. Por ejemplo:

<BODY bgcolor="#10A0FF" text="#00FF00" link="#FF0000">

Con lo que el fondo de la pagina seria de color azul cielo, el texto por defecto de color verde y los textos que dieran acceso a otras paginas de color rojo.

Aparte del color, podemos indicar un fondo gráfico para el documento. Para ello utilizaremos el parámetro background. El fondo vendrá indicado por un archivo de imagen (gif o jpg) que se reflejará en la página en mosaico. Por ejemplo :

Pondrá como fondo de nuestro documento la imagen

fondo.gif repitiéndola tantas veces como sea necesario para que cubra toda la página.

Lógicamente, cuanto mayor sea la imagen, mas tiempo tardara el navegador en visualizar el fodo de nuestra página.

Texto y efectos.

El texto a escribir en la hoja se escribe tal cual, es decir, no hay ninguna directiva para indicar que lo que escribimos es texto. Todo aquello que no esté encerrado entre los símbolos < y > se entenderá que es texto. Las tabulaciones, espacios y retornos de carro del texto seran ignorados, de tal forma que si escribimos lo siguiente :

Texto       de      prueba
     de mi    página
             Web.

En la página veremos :

Texto de prueba de mi página Web.

Para indicar un retorno de carro se utiliza la directiva
<BR> y para indicar un cambio de párrafo se utiliza la directiva
<P>. Por ejemplo :

Texto de prueba<BR>de mi página<P>Web.

Se verá como :

Texto de prueba
de mi página

Web

La única forma para que se respete el formato original del texto (con espacios y retornos de carro) es utilizar la directiva <PRE></PRE>. Ejemplo :

<PRE>

Esto es un

Texto con formato.

</PRE>

Para incluir efectos especiales en el texto "encerraremos" el texto a destacar utilizando estas directivas :

<B> </B> Negrilla.

<I> </I> Cursiva.

<U> </U> Subrayado.

De la misma forma, el texto se alinea por defecto a la izquierda. Si deseamos centrar un texto en la página utilizaremos la directiva
<CENTER></CENTER>. Por ejemplo :

<CENTER>Este texto está centrado</CENTER>

Para indicar el tamaño de la letra se utiliza la directiva
<FONT></FONT>. Esta directiva tiene varios parámetros. Veremos los dos mas usados
size y
bgcolor.

size indica el tamaño "relativo". Para aumentar el tamaño de la letra indicaremos un número positivo, y para disminuirlo indicaremos un número negativo.

bgcolor indica el código de color del texto en el mismo formato que hemos visto anteriormente para el fondo del documento. Ejemplos :

<FONT size=+3 bgcolor="#FF0000"> Texto </FONT>

Escribirá el
Texto en un tamaño tres veces superior al normal y en color rojo puro.

<FONT size=-2 bgcolor="#0000FF"> Texto </FONT>

Escribirá el
Texto en un tamaño dos veces inferior al normal y en color azul puro.

La directiva
<HR> inserta una línea horizontal en el documento. Se suele utilzar para diferenciar diferentes partes de la página. En esta página se ha usado esta directiva para separar cada sección de este manual.
La longitud de esta linea se puede definir en porcentaje usando el parámetro width. La altura de la linea se indica con el par&aacuteametro size. Por ejemplo:

<HR size=10 width=50%>

Por defecto se entiende una altura=1 y una anchura=100%

Para incluir un comentario en nuestra página Web se utiliza la directiva , Dicho comentario no aparecerá en la página. Por ejemplo:



Listas de elementos y Entidades.

Para definir una lista de elementos se utilizan las directivas

<UL></UL> para listas sin numerar y
<OL></OL> para listas numeradas. Los elementos de la lista iran precedidos en ambos casos por la directiva
<LI>. Por ejemplo,

<UL>
<LI>Links interesantes
<LI>Galeria de fotos
<LI>Entrevistas
</UL>

Produciría el efecto :

Links interesantes
Galeria de fotos
Entrevistas

<OL>
<LI>Links interesantes
<LI>Galeria de fotos
<LI>Entrevistas
</OL>

Produciría el efecto :

Links interesantes
Galeria de fotos
Entrevistas

Existen tambien las listas de definiciones. Estas listas presentan el texto de forma similar al de los diccionarios. La directiva para estas listas es
<DL></DL>.Con la directiva <DT> se especifica el término y con <DD> la definició. Ejemplo:

<DL>
<DT>WWW
<DD>Abreviatura de World Wide Web
<DT>FTP
<DD>Abreviatura de File Transfer Protocol.
</DL>

Produciría el efecto :

WWW

Abreviatura de World Wide Web
FTP: Abreviatura de File Transfer Protocol

La directiva <DL></DL> puede llevar el atributo compact, que presentaria la lista de la siguiente forma :

<DL compact>
<DT>WWW
<DD>Abreviatura de World Wide Web
<DT>FTP
<DD>Abreviatura de File Transfer Protocol.
</DL>

Produciría el efecto :

www

Abreviatura de World Wide Web
FTP: Abreviatura de File Transfer Protocol

Las listas se pueden anidar, incluyendo una lista dentro de otra, produciendo el siguiente efecto:


<UL>
<LI>Links interesantes
   <UL>
   <LI>Buscador Ole
   <LI>Pagina de Luis_FD
   <LI>Museo del Prado
   </UL>
<LI>Galeria de fotos
   <UL>
   <LI>Fotos de mascotas
   <LI>Fotos de paisajes
   </UL>
<LI>Entrevistas
   <UL>
   <LI>Sharon Stone
   <LI>Bill Gates
   <LI>Paul McCartney
   </UL>
</UL>

Links interesantes
- Buscador Ole
- Pagina de Luis_FD
- Museo del Prado
Galeria de fotos
- Fotos de mascotas
- Fotos de paisajes
Entrevistas
- Sharon Stone
- Bill Gates
- Paul McCartney

Actualmente los navegadores mas utilizados (Netscape y Ms Explorer) no tienen problemas en reconocer las letras acentuadas y las eñes, sin embargo los navegadores antíguos no las reconocen. Es por ello que para asegurarnos de que estas letras se veran bien en todos los navegadores, debemos sustituirlas por su
entidad. Una entidad es un código que representa un carácter extraño para el navegador. Dichas entidades empiezan con el símbolo
& y terminan con el símbolo
;. Asimismo los caracteres especiales que se usan para las directivas de HTML han de ser representados por entidades cuando queramos que se "vean" en nuestra página. Las entidades más importantes son las siguientes :

á	á	Á	Á
é	é	É	É
í	í	Í	Í
ó	ó	Ó	Ó
ú	ú	Ú	Ú
ñ	ñ	Ñ	Ñ
<	<	>	>
&	&	"	"

De la misma forma podremos indicar al navegador que represente un carácter por su código ascii de la forma
&#codigo;. Por ejemplo:

Gráficos y Enlaces.

Para incluir un gráfico en nuestra página utilizaremos la directiva
<IMG>. Esta directiva tiene varios parámetros. El parámetro
src indica el nombre del fichero gráfico a mostrar,
border indica el borde que rodeará al gráfico,
alt indica el texto que se mostrara en lugar del gráfico en aquellos navegadores que no puedan mostrar el gráfico. Ejemplo:

Mostrará el gráfico
esp.gif sin ningún borde rodeándolo, y aquellos navegadores que no puedan mostrar el gráfico visualizaran la palabra
España.

Otro parámetro importante de esta directiva es align. Este parámetro permite indicar como se alineará el texto que se escriba a cotinuación del gráfico.
Sus valores posibles son :

bottom	alinea el texto en la zona inferior del gráfico.
top	alinea el texto en la zona superior del gráfico.
center	alinea el texto en la zona central del gráfico.

Ejemplos :

<IMG src="hlp.gif" align=bottom>Texto de Ayuda

Texto de Ayuda

<IMG src="hlp.gif" align=top>Texto de Ayuda

Texto de Ayuda

<IMG src="hlp.gif" align=center>Texto de Ayuda

Texto de Ayuda

Los parámetros height y width permiten redimensionar el gráfico dándole un tamaño diferente al real.

height=num	Marca la atura relativa del gráfico.
width=num	Marca la anchura relativa del gráfico.

Ejemplos :

<IMG src="hlp.gif" height=150 width=60>

<IMG src="hlp.gif" height=25 width=25>

Un enlace es un texto o gráfico que, pulsándolo, nos envía a una página distinta. Para incluir un enlace en nuestra página se utiliza la directiva
<A></A>. Dicha directiva lleva el parámetro
href que es el que indica la dirección de la página a la que queremos que se acceda. Por ejemplo :

<A href="http://www.ole.es">Pulsa aqui para buscar en la red.</A>

Mostraría el texto en distinto color, y al pulsar sobre el se nos enviaría a la direccion
http://www.ole.es. Entre la directiva
<A></A> podemos poner un texto o un gráfico o ambas cosas. P.ej.:

<A href="http://www.ole.es"><IMG src="ole_pet.gif">Buscador Olé.</A>

Permitirá dirigirse a la direccion indicada pulsando en el gráfico o en el texto.

Para hacer un enlace a nuestra dirección de correo se indicaría la directiva con el siguiente formato :

<A href="mailto:direccion de correo">Pulsa aqui para enviarme un e-mail.</A>

Tablas.

Las tablas se usan con mucha frecuencia en las páginas Web para formatear una parte del documento. Para definir una tabla se utiliza la directiva
<TABLE></TABLE>, para cada uno de los elementos de la tabla se utiliza la directiva
<TD> y para indicar el final de una fila de la tabla se utiliza la directiva
<TR>.

Los parámetros fundamentales de
<TABLE> son :

border=num	Indica el ancho del borde de la tabla.
cellpadding=num	Indica el ancho de las filas
cellspacing=num	Indica el ancho de las "separaciones" entre las celdas de la tabla.

De cualquier forma el ancho de las filas se adecuará a su contenido, si este fuese mas ancho que el indicado por cellpadding.

El parámetro fundamental de
<TD> es
align que indica la alineación del contenido de la celda. Sus opciones son :

<TD align=left>	Alinea el contenido a la izquierda.
<TD align=right>	Alinea el contenido a la derecha.
<TD align=center>	Centra el contenido en la celda.

Un ejemplo de una tabla simple sería:

<TD align=left>Pais<TD align=left>Porcentaje<TD align=right>Importe<TR>

<TD align=left>España<TD align=center>70<TD align=right>140.000.-<TR>

<TD align=left>Francia<TD align=center>20<TD align=right>40.000.-<TR>

<TD align=left>Italia<TD align=center>30<TD align=right>60.000.-<TR>

</TABLE>

Que daria como resultado :

Pais	Porcentaje	Importe
España	70	140.000.-
Francia	20	40.000.-
Italia	30	60.000.-

Las posibilidades y opciones de las tablas son muchas y sería muy extenso para este pequeño manual explicarlas todas.

0 comentarios »

Letras en Movimiento Horizontal

Posted by Willy in Tips

Aprende rápido y fácil a modificar tus páginas de internet añadiendo códigos de HTML. Es sencillo y muy divertido. Haz una prueba, solo copia y pega (copy-paste) el siguiente código en un editor de texto HTML y verás el resultado inmediatamente.

Código:

<marquee>Bienvenidos a Web Creativo</marquee>

Resultado:

Bienvenidos a Web Creativo

0 comentarios »

Web Creativo - HTML

Reproductores mp3

¿Cómo instalarlos?

Algunos reproductores y el código que he utilizado para insertarlos

Enlaces

Manual HTML Básico

Estructura de un Documento

Directivas del HTML

Letras en Movimiento Horizontal

Novedades

Escribeme

Seguidores

Categorias

Photoshop Técnicas y Trucos