Hora
Temas similares
Menu
Últimos temas
Buscar
TeamSpeak-3
Web reputación
CODIGO HTML
Página 1 de 1.
CODIGO HTML
FERNAN Mar Ago 05 2008, 10:20
Introducción
HTML es un lenguaje de programación que se utiliza para la creación de páginas en la WWW. Por página entenderemos el documento que aparece en el visualizador.
HTML se compone de una serie de comandos, que son interpretados por el visualizador, o programa que utilizamos para navegar por el WWW. En última instancia es el visualizador el que ejecuta todas las órdenes contenidas en el código HTML, de forma que un visualizador puede estar capacitado para unas prestaciones, pero no para otras. Así, podremos especificar que una página tenga una imagen de fondo, o un texto parpadeando, pero si nuestro visualizador no está capacitado para esas funciones, no podremos comprobarlas.
En este tutorial se expondrán los comandos fundamentales de la programación HTML. Para hacer comprensible estos comandos, indicaré por una parte, las secuencias de comandos y por otra el resultado de dichas secuencias, de la siguiente forma:
Código HTML
secuencia de comandos
Visualización
secuencia de comandos
Los comandos HTML tienen una estructura muy básica. Son órdenes, algunas de una sola letra, contenidas entre los signos <y>. Con frecuencia, los comandos tienen una función de inicio y otra de fin.
La estructura base del documento HTML
Es recomendable que todo fichero HTML siga la siguiente estructura:
<HTML>
<TITLE>Título de la ventana</TITLE>
<BODY>
......comandos y texto......
</body>
</HTML>
Como puedes comprobar, estos comandos tienen una orden de inicio y otra de fin, que no es más que el mismo comando con el signo / antecediéndolo. Los comandos pueden figurar en letras mayúsculas o en minúsculas, indistintamente. La secuencia lógica de estas órdenes es la siguiente:
Inicio de un documento HTML
Inicio del título.
Título (que conviene poner para identificar la página de cara al visitante).
Final del título.
Inicio del cuerpo de la página, esto es, de aquello que queremos visualizar.
Fin del cuerpo de la página.
Fin del documento HTML.
Allá vamos...
Ya podemos iniciar el trabajo con HTML. Necesitas dos herramientas, un visualizador de HTML (son populares los productos Netscape o Mosaic), y un editor de texto, como el bloc de notas (notepad) de Windows. También se puede utilizar un procesador de textos, pero los documentos deberán almacenarse en modo texto (ASCII ó ANSI).
Cuando almacenes un fichero, es conveniente que le pongas por extensión (.htm), que es el tipo de fichero que por defecto buscará el visualizador (aunque puede visualizar ficheros con otra extensión). Para visualizar un fichero, utiliza la orden Open File del menú File de tu visualizador. Siempre que realices una modificación en el código y la almacenes en el mismo fichero, utiliza la función reload del visualizador, para comprobar los cambios.
1. Comandos Básicos
A partir de ahora, asumiremos que el código a introducir figura entre las órdenes <body> y </body>.
1.1 Saltos de línea
HTML no reconoce los finales de línea del editor de texto. Así, estas dos secuencias de comandos producen el mismo resultado:
Código HTML
HTML no reconoce los finales de línea.
Por esa razón, aunque utilicemos distintas líneas
en nuestro fichero, serán visualizadas de forma
continua.
No te preocupes, hay dos comandos básicos para saltar de
línea. El primero produce un salto de línea, <BR>
pasando el texto a la línea siguiente. El segundo,
define un final de párrafo <P>
dejando una línea en blanco de separación con
el texto siguiente.
Código HTML
HTML no reconoce los finales de línea. Por esa razón, aunque
utilicemos distintas líneas en nuestro fichero, serán visualizadas
de forma continua. No te preocupes, hay dos comandos básicos para
saltar de línea. El primero produce un salto de línea, <BR>pasando
el texto a la línea siguiente. El segundo, define un final de párrafo
<P>dejando una línea en blanco de separación con el texto siguiente.
Visualización
HTML no reconoce los finales de línea. Por esa razón, aunque utilicemos distintas líneas en nuestro fichero, serán visualizadas de forma continua. No te preocupes, hay dos comandos básicos para saltar de línea. El primero produce un salto de línea,
pasando el texto a la línea siguiente. El segundo, define un final de párrafo
dejando una línea en blanco de separación con el texto siguiente.
Así, pues: <BR> desplaza el texto a la línea siguiente, y <P> también lo desplaza, dejando una línea de separación.
1.2 Tipos de letra
Con HTML se pueden especificar distintos tipos de letra. Los básicos son negrita, cursiva y courier, que utilizan los códigos B, I, TT, respectivamente, como demuestra el siguiente código:
Código HTML
letra negrita, letra cursiva y letra <TT>courier</TT>.
Visualización
letra negrita, letra cursiva y letra courier.
Comprobarás que estos comandos necesitan el comando de finalización, para indicar el inicio y el final del tipo de letra.
Antes hemos comentado que HTML no respeta los finales de línea. Esto es parcialmente cierto, ya que dispone de un comando que mantiene el texto tal y como se introduce. A este texto se le denomina preformateado, y está contenido entre las órdenes
y
, como se muestra a continuación:
Código HTML
El texto preformateado
respeta los finales de línea
sin necesidad de indicarlos.
El tipo de letra que utiliza es COURIER.
Visualización
El texto preformateado
respeta los finales de línea
sin necesidad de indicarlos.
El tipo de letra que utiliza es COURIER.
1.3 Cabeceras
HTML dispone de seis cabeceras, o tipos de letra predefinidos de distinto tamaño, que se utilizan para marcar los títulos o resaltes en las páginas. Se activan con el comando <Hn> y se desactivan con </Hn>, donde n es un número de 1 a 6. Estas son las cabeceras:
Código HTML
<h1>Cabecera tipo 1</h1>
<h2>Cabecera tipo 2</h2>
<h3>Cabecera tipo 3</h3>
<h4>Cabecera tipo 4</h4>
<h5>Cabecera tipo 5</h5>
<h6>Cabecera tipo 6</h6>
Visualización
Cabecera tipo 1
Cabecera tipo 2
Cabecera tipo 3
Cabecera tipo 4
Cabecera tipo 5
Las cabeceras provocan un salto de línea, aunque no se le indique.
1.4 Listas
La presentación de información en forma de listas se puede realizar de dos formas básicas: como listas ordenadas (<OL>...</OL>) y como listas no ordenadas (<UL>...</UL>). Las listas ordenadas anteceden a cada párrafo un número, y las no ordenadas una marca (círculo o cuadrado). En ambos casos, el número o la marca, sólo aparecerá si el párrafo se inicia con la orden <LI>. Un tercer tipo de listas, denominadas listas de definición, se utiliza para presentar la información sin marcas, ni números, sino jugando con los sangrados de los párrafos.
1.4.1 Listas Ordenadas (numeradas)
Código HTML
<OL>
<LI>Las listas ordenadas presentan la información antecediendo a cada párrafo un número, siempre que a su inicio se especifique LI.
En caso de que no se especifique la orden LI, como ocurre aquí, la presentación de la información guardará el sangrado, pero el párrafo no se numerará.
<LI>Las listas pueden estar anidadas, de forma que a partir de un nivel de una lista puede generarse otra lista. Es suficiente con establecer un nuevo bloque de información entre las órdenes OL y /OL.
<OL>
<LI>Los anidamientos de listas permiten una estructuración muy deseable para clarificar la información.
<LI>Después de cerrar la lista, con la orden que sigue a este párrafo, volveremos a la lista principal.
</OL>
<LI>Asegurate de cerrar todas las listas (deben figurar tantos OL como /OL).
</OL>
1.4.2 Listas No Ordenadas (no numeradas)
La presentación de información en listas no ordenadas sigue las pautas comentadas para las ordenadas. Cuando se utilizan distintos niveles, la marca para cada nivel puede ser distinta, aunque es una cuestión que depende del visualizador. La marca aparecerá, como antes comentamos en las listas ordenadas, cuando el párrafo se inicie con la orden <LI>.
Código HTML
Esto es una lista no ordenada:
<UL>
<LI>Las listas no ordenadas se insertan entre los comandos UL y /UL.<BR> Esta línea no tiene marca; no está antecedida con la orden LI.
<LI>En este nivel iniciamos otras lista:
<UL>
<LI>Este es su primer nivel.
<LI>Este su segundo nivel.
</UL>
<LI>Final de la lista.
</UL>
1.4.3. Listas de definición
Las listas de definición están contenidas entre las órdenes <DL> y </DL>. En el contenido de la lista se utilizan otras dos órdenes: <DT> para indicar un término, que no se sangrará, y <DD> para indicar su definición, que se sangrará. También pueden anidarse.
Código HTML
<DL>
<DT>Término
<DD>La orden DT marca un término de la lista. El término no será indentado al mismo nivel que su definición.
<DT>Definición
<DD>La definición se sangrará hacia la derecha, para resaltarla del término. Las listas de definición también pueden anidarse, incluyendo nuevos bloques de texto entre las órdenes DL y /DL.
</DL>
1.5 Otros comandos básicos
1.5.1 Alineación de párrafos
Para centrar un párrafo, puedes utilizar la orden <CENTER> al principio y al final. Esta orden es específica de NetScape, y posiblemente no pueda apreciarse su efecto con otros visualizadores.
Código HTML
<CENTER>Este párrafo está centrado</CENTER>
partir de la versión 3 de HTML (disponible en NetScape 2.0), un párrafo puede alinearse a la izquierda, centro o derecha. El párrafo en cuestión debe estar contenido entre las órdenes <P></P>, utilizando la opción correspondiente.
Código HTML
<P>Este párrafo está alineado a la izquierda</P>
<P>Este párrafo está centrado</P>
<P>Este párrafo está alineado a la derecha</P>
.5.2 Intermitencia o parpadeo de texto
Para hacer parpadear un texto, coloca antes y después de él la orden BLINK.
Código HTML
Esta orden es <BLINK>específica de NetScape</BLINK>, por eso es posible que no produzca su efecto en otros visualizadores.
1.5.3 Separadores horizontales
Un recurso para adornar las páginas son las líneas horizontales, que se obtienen con la orden <HR>. Dependiendo de los visualizadores, este separador horizontal puede modificarse en longitud y en altura. La modificación en altura se realiza con la orden <HR> donde n representa la anchura de la línea en puntos. La longitud del separador puede modificarse con la orden <HR>. Ambas órdenes pueden combinarse en un separador que, en cualquier caso, siempre aparecerá centrado. A continuación pongo algunos ejemplos:
<HR>
--------------------------------------------------------------------------------
<HR>
--------------------------------------------------------------------------------
<HR>
--------------------------------------------------------------------------------
<HR>
--------------------------------------------------------------------------------
El resaltado de las líneas horizontales depende del color de fondo de la página, o de la imagen que se sitúe como fondo. Después analizaremos estos detalles.
HTML es un lenguaje de programación que se utiliza para la creación de páginas en la WWW. Por página entenderemos el documento que aparece en el visualizador.
HTML se compone de una serie de comandos, que son interpretados por el visualizador, o programa que utilizamos para navegar por el WWW. En última instancia es el visualizador el que ejecuta todas las órdenes contenidas en el código HTML, de forma que un visualizador puede estar capacitado para unas prestaciones, pero no para otras. Así, podremos especificar que una página tenga una imagen de fondo, o un texto parpadeando, pero si nuestro visualizador no está capacitado para esas funciones, no podremos comprobarlas.
En este tutorial se expondrán los comandos fundamentales de la programación HTML. Para hacer comprensible estos comandos, indicaré por una parte, las secuencias de comandos y por otra el resultado de dichas secuencias, de la siguiente forma:
Código HTML
secuencia de comandos
Visualización
secuencia de comandos
Los comandos HTML tienen una estructura muy básica. Son órdenes, algunas de una sola letra, contenidas entre los signos <y>. Con frecuencia, los comandos tienen una función de inicio y otra de fin.
La estructura base del documento HTML
Es recomendable que todo fichero HTML siga la siguiente estructura:
<HTML>
<TITLE>Título de la ventana</TITLE>
<BODY>
......comandos y texto......
</body>
</HTML>
Como puedes comprobar, estos comandos tienen una orden de inicio y otra de fin, que no es más que el mismo comando con el signo / antecediéndolo. Los comandos pueden figurar en letras mayúsculas o en minúsculas, indistintamente. La secuencia lógica de estas órdenes es la siguiente:
Inicio de un documento HTML
Inicio del título.
Título (que conviene poner para identificar la página de cara al visitante).
Final del título.
Inicio del cuerpo de la página, esto es, de aquello que queremos visualizar.
Fin del cuerpo de la página.
Fin del documento HTML.
Allá vamos...
Ya podemos iniciar el trabajo con HTML. Necesitas dos herramientas, un visualizador de HTML (son populares los productos Netscape o Mosaic), y un editor de texto, como el bloc de notas (notepad) de Windows. También se puede utilizar un procesador de textos, pero los documentos deberán almacenarse en modo texto (ASCII ó ANSI).
Cuando almacenes un fichero, es conveniente que le pongas por extensión (.htm), que es el tipo de fichero que por defecto buscará el visualizador (aunque puede visualizar ficheros con otra extensión). Para visualizar un fichero, utiliza la orden Open File del menú File de tu visualizador. Siempre que realices una modificación en el código y la almacenes en el mismo fichero, utiliza la función reload del visualizador, para comprobar los cambios.
1. Comandos Básicos
A partir de ahora, asumiremos que el código a introducir figura entre las órdenes <body> y </body>.
1.1 Saltos de línea
HTML no reconoce los finales de línea del editor de texto. Así, estas dos secuencias de comandos producen el mismo resultado:
Código HTML
HTML no reconoce los finales de línea.
Por esa razón, aunque utilicemos distintas líneas
en nuestro fichero, serán visualizadas de forma
continua.
No te preocupes, hay dos comandos básicos para saltar de
línea. El primero produce un salto de línea, <BR>
pasando el texto a la línea siguiente. El segundo,
define un final de párrafo <P>
dejando una línea en blanco de separación con
el texto siguiente.
Código HTML
HTML no reconoce los finales de línea. Por esa razón, aunque
utilicemos distintas líneas en nuestro fichero, serán visualizadas
de forma continua. No te preocupes, hay dos comandos básicos para
saltar de línea. El primero produce un salto de línea, <BR>pasando
el texto a la línea siguiente. El segundo, define un final de párrafo
<P>dejando una línea en blanco de separación con el texto siguiente.
Visualización
HTML no reconoce los finales de línea. Por esa razón, aunque utilicemos distintas líneas en nuestro fichero, serán visualizadas de forma continua. No te preocupes, hay dos comandos básicos para saltar de línea. El primero produce un salto de línea,
pasando el texto a la línea siguiente. El segundo, define un final de párrafo
dejando una línea en blanco de separación con el texto siguiente.
Así, pues: <BR> desplaza el texto a la línea siguiente, y <P> también lo desplaza, dejando una línea de separación.
1.2 Tipos de letra
Con HTML se pueden especificar distintos tipos de letra. Los básicos son negrita, cursiva y courier, que utilizan los códigos B, I, TT, respectivamente, como demuestra el siguiente código:
Código HTML
letra negrita, letra cursiva y letra <TT>courier</TT>.
Visualización
letra negrita, letra cursiva y letra courier.
Comprobarás que estos comandos necesitan el comando de finalización, para indicar el inicio y el final del tipo de letra.
Antes hemos comentado que HTML no respeta los finales de línea. Esto es parcialmente cierto, ya que dispone de un comando que mantiene el texto tal y como se introduce. A este texto se le denomina preformateado, y está contenido entre las órdenes
y
, como se muestra a continuación:
Código HTML
El texto preformateado
respeta los finales de línea
sin necesidad de indicarlos.
El tipo de letra que utiliza es COURIER.
Visualización
El texto preformateado
respeta los finales de línea
sin necesidad de indicarlos.
El tipo de letra que utiliza es COURIER.
1.3 Cabeceras
HTML dispone de seis cabeceras, o tipos de letra predefinidos de distinto tamaño, que se utilizan para marcar los títulos o resaltes en las páginas. Se activan con el comando <Hn> y se desactivan con </Hn>, donde n es un número de 1 a 6. Estas son las cabeceras:
Código HTML
<h1>Cabecera tipo 1</h1>
<h2>Cabecera tipo 2</h2>
<h3>Cabecera tipo 3</h3>
<h4>Cabecera tipo 4</h4>
<h5>Cabecera tipo 5</h5>
<h6>Cabecera tipo 6</h6>
Visualización
Cabecera tipo 1
Cabecera tipo 2
Cabecera tipo 3
Cabecera tipo 4
Cabecera tipo 5
Las cabeceras provocan un salto de línea, aunque no se le indique.
1.4 Listas
La presentación de información en forma de listas se puede realizar de dos formas básicas: como listas ordenadas (<OL>...</OL>) y como listas no ordenadas (<UL>...</UL>). Las listas ordenadas anteceden a cada párrafo un número, y las no ordenadas una marca (círculo o cuadrado). En ambos casos, el número o la marca, sólo aparecerá si el párrafo se inicia con la orden <LI>. Un tercer tipo de listas, denominadas listas de definición, se utiliza para presentar la información sin marcas, ni números, sino jugando con los sangrados de los párrafos.
1.4.1 Listas Ordenadas (numeradas)
Código HTML
<OL>
<LI>Las listas ordenadas presentan la información antecediendo a cada párrafo un número, siempre que a su inicio se especifique LI.
En caso de que no se especifique la orden LI, como ocurre aquí, la presentación de la información guardará el sangrado, pero el párrafo no se numerará.
<LI>Las listas pueden estar anidadas, de forma que a partir de un nivel de una lista puede generarse otra lista. Es suficiente con establecer un nuevo bloque de información entre las órdenes OL y /OL.
<OL>
<LI>Los anidamientos de listas permiten una estructuración muy deseable para clarificar la información.
<LI>Después de cerrar la lista, con la orden que sigue a este párrafo, volveremos a la lista principal.
</OL>
<LI>Asegurate de cerrar todas las listas (deben figurar tantos OL como /OL).
</OL>
1.4.2 Listas No Ordenadas (no numeradas)
La presentación de información en listas no ordenadas sigue las pautas comentadas para las ordenadas. Cuando se utilizan distintos niveles, la marca para cada nivel puede ser distinta, aunque es una cuestión que depende del visualizador. La marca aparecerá, como antes comentamos en las listas ordenadas, cuando el párrafo se inicie con la orden <LI>.
Código HTML
Esto es una lista no ordenada:
<UL>
<LI>Las listas no ordenadas se insertan entre los comandos UL y /UL.<BR> Esta línea no tiene marca; no está antecedida con la orden LI.
<LI>En este nivel iniciamos otras lista:
<UL>
<LI>Este es su primer nivel.
<LI>Este su segundo nivel.
</UL>
<LI>Final de la lista.
</UL>
1.4.3. Listas de definición
Las listas de definición están contenidas entre las órdenes <DL> y </DL>. En el contenido de la lista se utilizan otras dos órdenes: <DT> para indicar un término, que no se sangrará, y <DD> para indicar su definición, que se sangrará. También pueden anidarse.
Código HTML
<DL>
<DT>Término
<DD>La orden DT marca un término de la lista. El término no será indentado al mismo nivel que su definición.
<DT>Definición
<DD>La definición se sangrará hacia la derecha, para resaltarla del término. Las listas de definición también pueden anidarse, incluyendo nuevos bloques de texto entre las órdenes DL y /DL.
</DL>
1.5 Otros comandos básicos
1.5.1 Alineación de párrafos
Para centrar un párrafo, puedes utilizar la orden <CENTER> al principio y al final. Esta orden es específica de NetScape, y posiblemente no pueda apreciarse su efecto con otros visualizadores.
Código HTML
<CENTER>Este párrafo está centrado</CENTER>
partir de la versión 3 de HTML (disponible en NetScape 2.0), un párrafo puede alinearse a la izquierda, centro o derecha. El párrafo en cuestión debe estar contenido entre las órdenes <P></P>, utilizando la opción correspondiente.
Código HTML
<P>Este párrafo está alineado a la izquierda</P>
<P>Este párrafo está centrado</P>
<P>Este párrafo está alineado a la derecha</P>
.5.2 Intermitencia o parpadeo de texto
Para hacer parpadear un texto, coloca antes y después de él la orden BLINK.
Código HTML
Esta orden es <BLINK>específica de NetScape</BLINK>, por eso es posible que no produzca su efecto en otros visualizadores.
1.5.3 Separadores horizontales
Un recurso para adornar las páginas son las líneas horizontales, que se obtienen con la orden <HR>. Dependiendo de los visualizadores, este separador horizontal puede modificarse en longitud y en altura. La modificación en altura se realiza con la orden <HR> donde n representa la anchura de la línea en puntos. La longitud del separador puede modificarse con la orden <HR>. Ambas órdenes pueden combinarse en un separador que, en cualquier caso, siempre aparecerá centrado. A continuación pongo algunos ejemplos:
<HR>
--------------------------------------------------------------------------------
<HR>
--------------------------------------------------------------------------------
<HR>
--------------------------------------------------------------------------------
<HR>
--------------------------------------------------------------------------------
El resaltado de las líneas horizontales depende del color de fondo de la página, o de la imagen que se sitúe como fondo. Después analizaremos estos detalles.
FERNAN- 3ª Medalla
- Cantidad de envíos : 1174
Edad : 57
Localización : Madrid
Fecha de inscripción : 30/07/2008
MAS CODIGOS
FERNAN Mar Ago 05 2008, 10:23
Añado algunos codigos mas:
1-Este código crea un marco deslizante con una página en su interior externa a esta.
PD: MUY IMPORTANTE PONER HTTP:// YA QUE SIN ESO NO TE LO DETECTA
Tambien puedes modificar el tamaño del cuadro,Incluso si insertas texto en este recuadro con página vinculada,se guardarán los cambios en ella.
en este ejemplo hemos cogido la web softonic
quedaria algo como esto
Codigo:
<div align="center">
<center>
<table borderColor="#000000" cellSpacing="0" cellPadding="0" width="590" border="1" style="border-collapse: collapse">
<tr>
<td width="576">
<iframe name="I1" marginWidth="18" frameBorder="0" width="594" scrolling="yes" height="220" src="tu_pagina_aqui.htm">
</iframe></td>
</tr>
</table>
</center>
</div>
--------------------------------------------------------------------
2-Color en barra de desplazamiento lateral de la ventana
Se pueden modificar los colores si lo desean aqui os dejo una web de tabla de colores HTML:
http://www.cuervoblanco.com/colores_hexadecimales.html
<!--webbot bot="HTMLMarkup" startspan --><style>
body { scrollbar-arrow-color: #FFFFFF;
scrollbar-base-color: #000000;
scrollbar-face-color: #009F50;
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #000000; }
</style>
<!--webbot bot="HTMLMarkup" endspan -->
-------------------------------------------------------------------------------
3- Este efecto anima el título de la página.
Codigo:
<script LANGUAGE="JavaScript">
var txt="Aqui debes poner lo que quieres";
var espera=30;
var refresco=null;
function rotulo_title() {
document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
refresco=setTimeout("rotulo_title()",espera);}
rotulo_title();
</script>
---------------------------------------------------------------------------------
4-Recomendar a un amigo:
Codigo:
<BODY style="font-family: Verdana">
<p align="center"><b>Recomendar a un amigo
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var initialsubj="Echa un vistazo a esta web."
var initialmsg="Hola. \n Quizás quieras echarle un vistazo a esta web: "+window.location
var good;
function checkEmailAddress(field) {
var goodEmail = field.value.match(/\b(^(\S+@).+((\.com)|(\.net)|(\.edu)|(\.mil)|(\.gov)|(\.org)|(\.info)|(\.sex)|(\.biz)|(\.aero)|(\.coop)|(\.museum)|(\.name)|(\.pro)|(\..{2,2}))$)\b/gi);
if (goodEmail) {
good = true;
}
else {
alert('Por favor entra una dirección de correo.');
field.focus();
field.select();
good = false;
}
}
u = window.location;
function mailThisUrl() {
good = false
checkEmailAddress(document.eMailer.email);
if (good) {
http://window.location = "mailto:"+document.eMailer.email.value+"?subject="+initialsubj+"&body="+document.title+" "+u;
window.location = "mailto:"+document.eMailer.email.value+"?subject="+initialsubj+"&body="+initialmsg
}
}
// End -->
</script>
</b></p>
<form name="eMailer">
<font size="2">Entra la dirección de correo de tu amigo:</font>
<input type="text" name="email" size="26" value=" Entrar dirección aquí" onFocus="this.value=''" onMouseOver="window.status='Entra dirección de email aquí y comentar a un amigo sobre esta página...'; return true" onMouseOut="window.status='';return true">
<input type="button" value="Enviar esta URL" onMouseOver="window.status='¡Pulsa para enviar un correo a un amigo! Entra la dirección de correo arriba'; return true" onMouseOut="window.status='';return true" onClick="mailThisUrl();"></form>
</body>
Puedes cambiar las frases a tu gusto
-------------------------------------------------------------------------------
5- Agregar a favoritos
Codigo:
<script LANGUAGE="JavaScript">
function agregar(){
if ((navigator.appName=="Microsoft Internet Explorer") && (parseInt(navigator.appVersion)>=4)) {
var url="aqui debes poner la url de tu foro con http://";
var titulo="esta parte es el mensaje que les sale cuando entran en su carpeta favoritos";
window.external.AddFavorite(url,titulo);
}
else {
if(navigator.appName == "Netscape")
alert ("Presione Crtl+D para agregar este sitio en sus Bookmarks");
}
}
</script>
<input type="button" value="Agregar a favoritos" onClick="javascript:agregar();">
--------------------------------------------------------------------------------
6-Montones de veces habéis visto paginas que cambian una foto todos los días. Alguno aún pensará que el WebMaster es un currante nato que entra todos los días ha cambiar dicha foto pero no es así. El siguiente JavaScript lo hace el solito automáticamente sin ayuda de nadie. Podéis añadir tantas fotos como queráis al código.
Colocar el código JavaScript en el lugar justo donde se quiera que aparezca la foto. Donde pone" arday " van los nombres de las fotos y solo hay que cambiar los ejemplos que se dan en el código fuente por los nombres de las fotos originales vuestras.
<script
language="JavaScript">
<!--
today = new Date();
day = today.getDay();
arday = new Array("images/banner1.gif", "images/banner11.gif","images/banner1b.gif", "images/banner1.gif",
"images/banner11.gif", "images/banner1b.gif", "images/banner1.gif","images/banner11.gif",
"images/banner1b.gif","images/banner1.gif", "images/banner11.gif");
document.write("<img src='" + arday[day] + "'>");
// -->
</script>
-----------------------------------------------------------------------------
7- Cuantas veces tenemos un foro enorme y el usuario se pierde? con este pequeño buscador interno todos essos problemas se solucionaran
Puedes poner tantas url como quieras vamos a coger de ejemplo el que tengo yo puesto
Codigo:
<script language="JavaScript" type="text/javascript"><!--
function irA(menu){window.location.href = menu.options[menu.selectedIndex].value;}
// fin de javascript -->
</script>
<form name="formulario">
<p><select name="menu" size="1" onchange="irA(this)" style="BACKGROUND-COLOR: #ffa54a; COLOR: #000080; FONT-FAMILY: Verdana, Arial; FONT-SIZE: 9pt; FONT-WEIGHT: bold">
<option selected value>Buscador interno :</option>
<option value="http://sosanimales.losforos.es/portal.php">Web</option>
<option value="http://sosanimales.losforos.es/index.php">Foro</option>
<option value="http://sosanimales.losforos.es/viewforum.php?f=5">Adopciones Urgentes</option>
<option value="http://sosanimales.losforos.es/viewforum.php?f=48">Adopciones Especiales</option>
<option value="http://sosanimales.losforos.es/viewforum.php?f=6">Adopciones Particulares</option>
<option value="http://sosanimales.losforos.es/viewforum.php?f=7">Adopciones Protectoras</option>
<option value="http://sosanimales.losforos.es/viewforum.php?f=8">Gatos en Adopcion</option>
<option value="http://sosanimales.losforos.es/viewforum.php?f=9">Otros Animales en Adopcion</option>
<option value="http://sosanimales.losforos.es/viewforum.php?f=22">Animales Perdidos</option>
<option value="http://sosanimales.losforos.es/viewforum.php?f=13">Consultas</option>
<option value="http://sosanimales.losforos.es/viewforum.php?f=12">Temas de Interes</option>
<option value="http://sosanimales.losforos.es/index.php?c=5">Hamster</option>
<option value="http://sosanimales.losforos.es/index.php?c=6 ">Aves</option>
<option value="http://sosanimales.losforos.es/index.php?c=7">Otras Mascotas</option>
</select></p>
</form>
Quedaria algo como asi un buscador interno desplegable y muy compacto para no molestar:
-----------------------------------------------------------------------------------
8- Texto rotativo, da vueltas y vueltas y vueltas con la frase que le habeis puesto
codigo:
<script language="javascript">
Phrase=" Aqui tu texto "
Balises=""
Taille=25;
Midx=-50;
Decal=0.25;
Nb=Phrase.length;
y=-500;
for (x=0;x<Nb;x++){
Balises=Balises + '<DIV Id=L' + x + ' STYLE="width:1;font-family:verdana;font-weight:bold;position:absolute;top:350;left:1;z-index:50">' + Phrase.charAt(x) + '</DIV>'
}
document.write (Balises);
Time=window.setInterval("Alors()",35);
Alpha=5;
I_Alpha=0.05;
function Alors(){
Alpha=Alpha-I_Alpha;
for (x=0;x<Nb;x++){
Alpha1=Alpha+Decal*x;
Cosine=Math.cos(Alpha1);
Ob=document.all("L"+x);
Ob.style.posLeft=Midx+100*Math.sin(Alpha1)+600;
Ob.style.zIndex=10*Cosine;
Ob.style.fontSize=Taille+1*Cosine;
Ob.style.color="rgb("+ (99+Cosine*99+11) + ","+ (11+Cosine*11+00) + ",99)";
}
}
</script>
------------------------------------------------------------------------------------
9- scroll con un mensaje dentro desplazandose horizontalmente
Codigo:
<p><b><font color="#FFFFFF" face="Verdana" size="2">
<marquee width="138" scrollamount="2" bgcolor="#808080">aqui tu mensaje </marquee></font></b></p>
pd: puedes modiciar el fondo y el color de las letras a tu gusto
------------------------------------------------------------------------------------
10-Este código hace que el fondo de la página se desplace.
codigo:
<script language="JavaScript">
<!-- Begin
var backgroundOffset = 0;
var bgObject = eval('document.body');
function scrollBG(maxSize) {
backgroundOffset = backgroundOffset + 1;
if (backgroundOffset > maxSize) backgroundOffset = 0;
bgObject.style.backgroundPosition = "0 " + backgroundOffset;
}
var ScrollTimer = window.setInterval("scrollBG(307)", 64);
// End -->
</script>
--------------------------------------------------------------------------------
11- Emerge un mensaje al entrar en la página y al salir de ella.
codigo:
<BODY onLoad="alert('Bienvenido a mi web');" onUnLoad="confirm('Gracias por tu visita, espero ke no sea la última');">
</head>
PD PUEDES MODIFICAR LA FRASE A TU GUSTO
------------------------------------------------------------------------------
12-Este código crea el efecto de un borde de color que ocupa todo lo grande que es la página
codigo:
<style ="text/css">
<!--
body { border: 10px groove #666699; }
-->
</style>
PD: pueden modificar los colores al gusto
--------------------------------------------------------------------------------------
1-Este código crea un marco deslizante con una página en su interior externa a esta.
PD: MUY IMPORTANTE PONER HTTP:// YA QUE SIN ESO NO TE LO DETECTA
Tambien puedes modificar el tamaño del cuadro,Incluso si insertas texto en este recuadro con página vinculada,se guardarán los cambios en ella.
en este ejemplo hemos cogido la web softonic
quedaria algo como esto
Codigo:
<div align="center">
<center>
<table borderColor="#000000" cellSpacing="0" cellPadding="0" width="590" border="1" style="border-collapse: collapse">
<tr>
<td width="576">
<iframe name="I1" marginWidth="18" frameBorder="0" width="594" scrolling="yes" height="220" src="tu_pagina_aqui.htm">
</iframe></td>
</tr>
</table>
</center>
</div>
--------------------------------------------------------------------
2-Color en barra de desplazamiento lateral de la ventana
Se pueden modificar los colores si lo desean aqui os dejo una web de tabla de colores HTML:
http://www.cuervoblanco.com/colores_hexadecimales.html
<!--webbot bot="HTMLMarkup" startspan --><style>
body { scrollbar-arrow-color: #FFFFFF;
scrollbar-base-color: #000000;
scrollbar-face-color: #009F50;
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #000000; }
</style>
<!--webbot bot="HTMLMarkup" endspan -->
-------------------------------------------------------------------------------
3- Este efecto anima el título de la página.
Codigo:
<script LANGUAGE="JavaScript">
var txt="Aqui debes poner lo que quieres";
var espera=30;
var refresco=null;
function rotulo_title() {
document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
refresco=setTimeout("rotulo_title()",espera);}
rotulo_title();
</script>
---------------------------------------------------------------------------------
4-Recomendar a un amigo:
Codigo:
<BODY style="font-family: Verdana">
<p align="center"><b>Recomendar a un amigo
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var initialsubj="Echa un vistazo a esta web."
var initialmsg="Hola. \n Quizás quieras echarle un vistazo a esta web: "+window.location
var good;
function checkEmailAddress(field) {
var goodEmail = field.value.match(/\b(^(\S+@).+((\.com)|(\.net)|(\.edu)|(\.mil)|(\.gov)|(\.org)|(\.info)|(\.sex)|(\.biz)|(\.aero)|(\.coop)|(\.museum)|(\.name)|(\.pro)|(\..{2,2}))$)\b/gi);
if (goodEmail) {
good = true;
}
else {
alert('Por favor entra una dirección de correo.');
field.focus();
field.select();
good = false;
}
}
u = window.location;
function mailThisUrl() {
good = false
checkEmailAddress(document.eMailer.email);
if (good) {
http://window.location = "mailto:"+document.eMailer.email.value+"?subject="+initialsubj+"&body="+document.title+" "+u;
window.location = "mailto:"+document.eMailer.email.value+"?subject="+initialsubj+"&body="+initialmsg
}
}
// End -->
</script>
</b></p>
<form name="eMailer">
<font size="2">Entra la dirección de correo de tu amigo:</font>
<input type="text" name="email" size="26" value=" Entrar dirección aquí" onFocus="this.value=''" onMouseOver="window.status='Entra dirección de email aquí y comentar a un amigo sobre esta página...'; return true" onMouseOut="window.status='';return true">
<input type="button" value="Enviar esta URL" onMouseOver="window.status='¡Pulsa para enviar un correo a un amigo! Entra la dirección de correo arriba'; return true" onMouseOut="window.status='';return true" onClick="mailThisUrl();"></form>
</body>
Puedes cambiar las frases a tu gusto
-------------------------------------------------------------------------------
5- Agregar a favoritos
Codigo:
<script LANGUAGE="JavaScript">
function agregar(){
if ((navigator.appName=="Microsoft Internet Explorer") && (parseInt(navigator.appVersion)>=4)) {
var url="aqui debes poner la url de tu foro con http://";
var titulo="esta parte es el mensaje que les sale cuando entran en su carpeta favoritos";
window.external.AddFavorite(url,titulo);
}
else {
if(navigator.appName == "Netscape")
alert ("Presione Crtl+D para agregar este sitio en sus Bookmarks");
}
}
</script>
<input type="button" value="Agregar a favoritos" onClick="javascript:agregar();">
--------------------------------------------------------------------------------
6-Montones de veces habéis visto paginas que cambian una foto todos los días. Alguno aún pensará que el WebMaster es un currante nato que entra todos los días ha cambiar dicha foto pero no es así. El siguiente JavaScript lo hace el solito automáticamente sin ayuda de nadie. Podéis añadir tantas fotos como queráis al código.
Colocar el código JavaScript en el lugar justo donde se quiera que aparezca la foto. Donde pone" arday " van los nombres de las fotos y solo hay que cambiar los ejemplos que se dan en el código fuente por los nombres de las fotos originales vuestras.
<script
language="JavaScript">
<!--
today = new Date();
day = today.getDay();
arday = new Array("images/banner1.gif", "images/banner11.gif","images/banner1b.gif", "images/banner1.gif",
"images/banner11.gif", "images/banner1b.gif", "images/banner1.gif","images/banner11.gif",
"images/banner1b.gif","images/banner1.gif", "images/banner11.gif");
document.write("<img src='" + arday[day] + "'>");
// -->
</script>
-----------------------------------------------------------------------------
7- Cuantas veces tenemos un foro enorme y el usuario se pierde? con este pequeño buscador interno todos essos problemas se solucionaran
Puedes poner tantas url como quieras vamos a coger de ejemplo el que tengo yo puesto
Codigo:
<script language="JavaScript" type="text/javascript"><!--
function irA(menu){window.location.href = menu.options[menu.selectedIndex].value;}
// fin de javascript -->
</script>
<form name="formulario">
<p><select name="menu" size="1" onchange="irA(this)" style="BACKGROUND-COLOR: #ffa54a; COLOR: #000080; FONT-FAMILY: Verdana, Arial; FONT-SIZE: 9pt; FONT-WEIGHT: bold">
<option selected value>Buscador interno :</option>
<option value="http://sosanimales.losforos.es/portal.php">Web</option>
<option value="http://sosanimales.losforos.es/index.php">Foro</option>
<option value="http://sosanimales.losforos.es/viewforum.php?f=5">Adopciones Urgentes</option>
<option value="http://sosanimales.losforos.es/viewforum.php?f=48">Adopciones Especiales</option>
<option value="http://sosanimales.losforos.es/viewforum.php?f=6">Adopciones Particulares</option>
<option value="http://sosanimales.losforos.es/viewforum.php?f=7">Adopciones Protectoras</option>
<option value="http://sosanimales.losforos.es/viewforum.php?f=8">Gatos en Adopcion</option>
<option value="http://sosanimales.losforos.es/viewforum.php?f=9">Otros Animales en Adopcion</option>
<option value="http://sosanimales.losforos.es/viewforum.php?f=22">Animales Perdidos</option>
<option value="http://sosanimales.losforos.es/viewforum.php?f=13">Consultas</option>
<option value="http://sosanimales.losforos.es/viewforum.php?f=12">Temas de Interes</option>
<option value="http://sosanimales.losforos.es/index.php?c=5">Hamster</option>
<option value="http://sosanimales.losforos.es/index.php?c=6 ">Aves</option>
<option value="http://sosanimales.losforos.es/index.php?c=7">Otras Mascotas</option>
</select></p>
</form>
Quedaria algo como asi un buscador interno desplegable y muy compacto para no molestar:
-----------------------------------------------------------------------------------
8- Texto rotativo, da vueltas y vueltas y vueltas con la frase que le habeis puesto
codigo:
<script language="javascript">
Phrase=" Aqui tu texto "
Balises=""
Taille=25;
Midx=-50;
Decal=0.25;
Nb=Phrase.length;
y=-500;
for (x=0;x<Nb;x++){
Balises=Balises + '<DIV Id=L' + x + ' STYLE="width:1;font-family:verdana;font-weight:bold;position:absolute;top:350;left:1;z-index:50">' + Phrase.charAt(x) + '</DIV>'
}
document.write (Balises);
Time=window.setInterval("Alors()",35);
Alpha=5;
I_Alpha=0.05;
function Alors(){
Alpha=Alpha-I_Alpha;
for (x=0;x<Nb;x++){
Alpha1=Alpha+Decal*x;
Cosine=Math.cos(Alpha1);
Ob=document.all("L"+x);
Ob.style.posLeft=Midx+100*Math.sin(Alpha1)+600;
Ob.style.zIndex=10*Cosine;
Ob.style.fontSize=Taille+1*Cosine;
Ob.style.color="rgb("+ (99+Cosine*99+11) + ","+ (11+Cosine*11+00) + ",99)";
}
}
</script>
------------------------------------------------------------------------------------
9- scroll con un mensaje dentro desplazandose horizontalmente
Codigo:
<p><b><font color="#FFFFFF" face="Verdana" size="2">
<marquee width="138" scrollamount="2" bgcolor="#808080">aqui tu mensaje </marquee></font></b></p>
pd: puedes modiciar el fondo y el color de las letras a tu gusto
------------------------------------------------------------------------------------
10-Este código hace que el fondo de la página se desplace.
codigo:
<script language="JavaScript">
<!-- Begin
var backgroundOffset = 0;
var bgObject = eval('document.body');
function scrollBG(maxSize) {
backgroundOffset = backgroundOffset + 1;
if (backgroundOffset > maxSize) backgroundOffset = 0;
bgObject.style.backgroundPosition = "0 " + backgroundOffset;
}
var ScrollTimer = window.setInterval("scrollBG(307)", 64);
// End -->
</script>
--------------------------------------------------------------------------------
11- Emerge un mensaje al entrar en la página y al salir de ella.
codigo:
<BODY onLoad="alert('Bienvenido a mi web');" onUnLoad="confirm('Gracias por tu visita, espero ke no sea la última');">
</head>
PD PUEDES MODIFICAR LA FRASE A TU GUSTO
------------------------------------------------------------------------------
12-Este código crea el efecto de un borde de color que ocupa todo lo grande que es la página
codigo:
<style ="text/css">
<!--
body { border: 10px groove #666699; }
-->
</style>
PD: pueden modificar los colores al gusto
--------------------------------------------------------------------------------------
FERNAN- 3ª Medalla
- Cantidad de envíos : 1174
Edad : 57
Localización : Madrid
Fecha de inscripción : 30/07/2008
MAS CODIGOS
FERNAN Mar Ago 05 2008, 10:24
13- Desplegable con tus propios sonidos (los pueden alojar tambien y usarlo de referencia)
Codigo:
<SCRIPT>
musi="http://www.tudominio.com/soniod11.mid"
musi2="http://www.tudominio.com/sonido10.mid"
musi3="http://www.tudominio.com/sonido0.mid"
musi4="http://www.tudominio.com/sonido1.mid"
musi5="http://www.tudominio.com/sonido2.mid"
musi6="http://www.tudominio.com/sonido3.mid"
musi7="http://www.tudominio.com/sonido4.mid"
musi8="http://www.tudominio.com/sonido5.mid"
musi9="http://www.tudominio.com/sonido6.mid"
musi10="http://www.tudominio.com/sonido7.mid"
musi11="http://www.tudominio.com/sonido8.mid"
musi12="http://www.tudominio.com/sonido9.mid"
<!--Don't edit from here on-->
function mus1()
{
if (t.options.selectedIndex==0){
mus.innerHTML="<embed src="+musi+" loop=-1>"
}
if (t.options.selectedIndex==1){
mus.innerHTML="<embed src="+musi2+" loop=-1>"
}
if (t.options.selectedIndex==2){
mus.innerHTML="<embed src="+musi3+" loop=-1>"
}
if (t.options.selectedIndex==3){
mus.innerHTML="<embed src="+musi4+" loop=-1>"
}
if (t.options.selectedIndex==4){
mus.innerHTML="<embed src="+musi5+" loop=-1>"
}
if (t.options.selectedIndex==5){
mus.innerHTML="<embed src="+musi6+" loop=-1>"
}
if (t.options.selectedIndex==6){
mus.innerHTML="<embed src="+musi7+" loop=-1>"
}
if (t.options.selectedIndex==7){
mus.innerHTML="<embed src="+musi8+" loop=-1>"
}
if (t.options.selectedIndex=={
mus.innerHTML="<embed src="+musi9+" loop=-1>"
}
if (t.options.selectedIndex==9){
mus.innerHTML="<embed src="+musi10+" loop=-1>"
}
if (t.options.selectedIndex==10){
mus.innerHTML="<embed src="+musi11+" loop=-1>"
}
if (t.options.selectedIndex==11){
mus.innerHTML="<embed src="+musi12+" loop=-1>"
}
if (t.options.selectedIndex==12){
mus.innerHTML=""
}
}
document.write("<span id='mus' style='position:absolute;top:-90000'><embed src="+musi+" width=0 height=0 loop=-1></span>")
</SCRIPT>
<center><SELECT
style="FONT-WEIGHT: bold; FONT-SIZE: 7pt; COLOR: #00ff00; FONT-FAMILY: Verdana, Arial; BACKGROUND-COLOR: #05000d"
onchange=mus1() name=t border="0">
<OPTION selected>Selecciona un sonido
<OPTION>-----------------------
<OPTION>Sonido 1
<OPTION>Sonido 2
<OPTION>Sonido 3
<OPTION>Sonido 4
<OPTION>Sonido 5
<OPTION>Sonido 6
<OPTION>Sonido 7
<OPTION>Sonido 8
<OPTION>Sonido 9
<OPTION>Sonido 10
<OPTION>------APAGAR... OFF...</OPTION>
<OPTION></OPTION>
</SELECT></center>
--------------------------------------------------------------------------------------
14: Cambia color al poner el cursor
codigo:
<script>
var coldColor = "#FF0000"
var hotColor = "#00FF00"
var motionPix = "7"
// do not edit below this line
// ======================================
var a='<style>'+
'A.InstantLink:link {'+
' color:'+coldColor+';'+
' text-decoration:none;'+
' padding:0 '+motionPix+' 0 0;'+
' }'+
'A.InstantLink:visited {'+
' color:'+coldColor+';'+
' text-decoration:none;'+
' padding:0 '+motionPix+' 0 0;}'+
'A.InstantLink:active {'+
' color:'+coldColor+';'+
' text-decoration:none;'+
' padding:0 '+motionPix+' 0 0;'+
' }'+
'A.InstantLink:hover {'+
' color:'+hotColor+';'+
' text-decoration:underline overline;'+
' padding:0 0 0 '+motionPix+';'+
' }'+
'</style>'
if (document.all || document.getElementById){
document.write(a)
}
</script>
----------------------------------------------------------------------------------
15- ajustar el tamaño de los videos de youtube en header y/o right
Vi en algunos foros que tienen puesto videos de youtube en los lados del portal y lo ponen en tamaño grande o bien no lo ajustan muy bien aqui van las medidas y donde tienes que tocar:
este es el codigo del video-->
<object width="140" height="150"><param name="movie" value="aqui tu video de youtube"></param><param name="wmode" value="transparent"></param><embed src="aqui tu video de youtube" type="application/x-shockwave-flash" wmode="transparent" width="140" height="150"></embed></object>
Lo puesto en naranja son las medidas, si kieren centrarlo en el loke ya saben todo el codigo entre <center> aqui el codigo</center>
---------------------------------------------------------------------
16- Barra de desplazamiento a la izquierda.
Para la gente zurda aqui esta la solucion colocar este pequeño codigo os puede ser muy comodo.
<style type="text/css">
body {direction:rtl;
}
</style>
-------------------------------------------------------------------------------
17: Este código crea un formulario que muestran imágenes y texto sobre dicha imagen.
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1" height="19%">
<tr>
<td width="100%" height="19%">
<form name="dynamicselector">
<table border="0" cellspacing="0" cellpadding="20" style="border-collapse: collapse" bordercolor="#111111" width="100%" height="182">
<tr>
<td width="136" align="center" height="182">
<select name="dynamicselector2" size="11" onChange="generateimage(this.options[this.selectedIndex].value)">
<option value="http://www.dominio.com/imagen.gif" selected>
Texto de la imagen
</option>
<option value="http://www.dominio.com/imagen2.gif">
texto de la imagen
</option>
<option value="www.dominio.com/imagen3.gif">
texto de la imagen
</option>
</select></td>
<td width="86%" align="left" height="182">
<ilayer id="dynamic1" width="100%" height="178">
<layer id="dynamic2" width="100%" height="178">
<div id="dynamic3">
</div>
</layer>
</ilayer>
</td>
</tr>
</table>
</form>
<script>
//enter image descriptions ("" for blank)
var description=new Array()
description[0]="111111 Texto informativo sobre esta imagen."
description[1]="222222 Texto informativo sobre esta imagen."
description[2]="333333 Texto informativo sobre esta imagen."
var ie4=document.all
var ns6=document.getElementById
var tempobj=document.dynamicselector.dynamicselector2
if (ie4||ns6)
var contentobj=document.getElementById? document.getElementById("dynamic3"): document.all.dynamic3
function generateimage(which){
if (ie4||ns6){
contentobj.innerHTML='<center>Loading image...</center>'
contentobj.innerHTML='<center><img src="'+which+'"><br><br>'+description[tempobj.options.selectedIndex]+'</center>'
}
else if (document.layers){
document.dynamic1.document.dynamic2.document.write('<center><img src="'+which+'"><br><br>'+description[tempobj.options.selectedIndex]+'</center>')
document.dynamic1.document.dynamic2.document.close()
}
else
alert('You need NS 4+ or IE 4+ to view the images!')
}
function generatedefault(){
generateimage(tempobj.options[tempobj.options.selectedIndex].value)
}
if (ie4||ns6||document.layers){
if (tempobj.options.selectedIndex!=-1){
if (ns6)
generatedefault()
else
window.onload=generatedefault
}
}
</script>
</td>
</tr>
</table>
puedes colocar imagenes y una breve descripcion debajo , que apareceran a la derecha cuando le das a la opcion, puedes poner tantas opciones como kieras
----------------------------------------------------------------------------
Este código crea unos botones de navegación: atrás, arriba y adelante
Nota:También puedes usar solo el botón Top para subir arriba de cada página. Lo puedes pegar tantas veces quieras en la misma página.
Quedaria algo como esto:
Bild
Codigo
<table border="0" bgcolor="#FFCC66">
<tr>
<td align="center">
<input type="button" value=" << " onclick="javascript:window.history.go(-1);">
<input type="button" value="Top" onclick="document.location='#top';">
<input type="button" value=" >> " onclick="javascript:window.history.go(1);"></td>
</tr>
</table>
<!-- End Navigation -->
_________________
Codigo:
<SCRIPT>
musi="http://www.tudominio.com/soniod11.mid"
musi2="http://www.tudominio.com/sonido10.mid"
musi3="http://www.tudominio.com/sonido0.mid"
musi4="http://www.tudominio.com/sonido1.mid"
musi5="http://www.tudominio.com/sonido2.mid"
musi6="http://www.tudominio.com/sonido3.mid"
musi7="http://www.tudominio.com/sonido4.mid"
musi8="http://www.tudominio.com/sonido5.mid"
musi9="http://www.tudominio.com/sonido6.mid"
musi10="http://www.tudominio.com/sonido7.mid"
musi11="http://www.tudominio.com/sonido8.mid"
musi12="http://www.tudominio.com/sonido9.mid"
<!--Don't edit from here on-->
function mus1()
{
if (t.options.selectedIndex==0){
mus.innerHTML="<embed src="+musi+" loop=-1>"
}
if (t.options.selectedIndex==1){
mus.innerHTML="<embed src="+musi2+" loop=-1>"
}
if (t.options.selectedIndex==2){
mus.innerHTML="<embed src="+musi3+" loop=-1>"
}
if (t.options.selectedIndex==3){
mus.innerHTML="<embed src="+musi4+" loop=-1>"
}
if (t.options.selectedIndex==4){
mus.innerHTML="<embed src="+musi5+" loop=-1>"
}
if (t.options.selectedIndex==5){
mus.innerHTML="<embed src="+musi6+" loop=-1>"
}
if (t.options.selectedIndex==6){
mus.innerHTML="<embed src="+musi7+" loop=-1>"
}
if (t.options.selectedIndex==7){
mus.innerHTML="<embed src="+musi8+" loop=-1>"
}
if (t.options.selectedIndex=={
mus.innerHTML="<embed src="+musi9+" loop=-1>"
}
if (t.options.selectedIndex==9){
mus.innerHTML="<embed src="+musi10+" loop=-1>"
}
if (t.options.selectedIndex==10){
mus.innerHTML="<embed src="+musi11+" loop=-1>"
}
if (t.options.selectedIndex==11){
mus.innerHTML="<embed src="+musi12+" loop=-1>"
}
if (t.options.selectedIndex==12){
mus.innerHTML=""
}
}
document.write("<span id='mus' style='position:absolute;top:-90000'><embed src="+musi+" width=0 height=0 loop=-1></span>")
</SCRIPT>
<center><SELECT
style="FONT-WEIGHT: bold; FONT-SIZE: 7pt; COLOR: #00ff00; FONT-FAMILY: Verdana, Arial; BACKGROUND-COLOR: #05000d"
onchange=mus1() name=t border="0">
<OPTION selected>Selecciona un sonido
<OPTION>-----------------------
<OPTION>Sonido 1
<OPTION>Sonido 2
<OPTION>Sonido 3
<OPTION>Sonido 4
<OPTION>Sonido 5
<OPTION>Sonido 6
<OPTION>Sonido 7
<OPTION>Sonido 8
<OPTION>Sonido 9
<OPTION>Sonido 10
<OPTION>------APAGAR... OFF...</OPTION>
<OPTION></OPTION>
</SELECT></center>
--------------------------------------------------------------------------------------
14: Cambia color al poner el cursor
codigo:
<script>
var coldColor = "#FF0000"
var hotColor = "#00FF00"
var motionPix = "7"
// do not edit below this line
// ======================================
var a='<style>'+
'A.InstantLink:link {'+
' color:'+coldColor+';'+
' text-decoration:none;'+
' padding:0 '+motionPix+' 0 0;'+
' }'+
'A.InstantLink:visited {'+
' color:'+coldColor+';'+
' text-decoration:none;'+
' padding:0 '+motionPix+' 0 0;}'+
'A.InstantLink:active {'+
' color:'+coldColor+';'+
' text-decoration:none;'+
' padding:0 '+motionPix+' 0 0;'+
' }'+
'A.InstantLink:hover {'+
' color:'+hotColor+';'+
' text-decoration:underline overline;'+
' padding:0 0 0 '+motionPix+';'+
' }'+
'</style>'
if (document.all || document.getElementById){
document.write(a)
}
</script>
----------------------------------------------------------------------------------
15- ajustar el tamaño de los videos de youtube en header y/o right
Vi en algunos foros que tienen puesto videos de youtube en los lados del portal y lo ponen en tamaño grande o bien no lo ajustan muy bien aqui van las medidas y donde tienes que tocar:
este es el codigo del video-->
<object width="140" height="150"><param name="movie" value="aqui tu video de youtube"></param><param name="wmode" value="transparent"></param><embed src="aqui tu video de youtube" type="application/x-shockwave-flash" wmode="transparent" width="140" height="150"></embed></object>
Lo puesto en naranja son las medidas, si kieren centrarlo en el loke ya saben todo el codigo entre <center> aqui el codigo</center>
---------------------------------------------------------------------
16- Barra de desplazamiento a la izquierda.
Para la gente zurda aqui esta la solucion colocar este pequeño codigo os puede ser muy comodo.
<style type="text/css">
body {direction:rtl;
}
</style>
-------------------------------------------------------------------------------
17: Este código crea un formulario que muestran imágenes y texto sobre dicha imagen.
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1" height="19%">
<tr>
<td width="100%" height="19%">
<form name="dynamicselector">
<table border="0" cellspacing="0" cellpadding="20" style="border-collapse: collapse" bordercolor="#111111" width="100%" height="182">
<tr>
<td width="136" align="center" height="182">
<select name="dynamicselector2" size="11" onChange="generateimage(this.options[this.selectedIndex].value)">
<option value="http://www.dominio.com/imagen.gif" selected>
Texto de la imagen
</option>
<option value="http://www.dominio.com/imagen2.gif">
texto de la imagen
</option>
<option value="www.dominio.com/imagen3.gif">
texto de la imagen
</option>
</select></td>
<td width="86%" align="left" height="182">
<ilayer id="dynamic1" width="100%" height="178">
<layer id="dynamic2" width="100%" height="178">
<div id="dynamic3">
</div>
</layer>
</ilayer>
</td>
</tr>
</table>
</form>
<script>
//enter image descriptions ("" for blank)
var description=new Array()
description[0]="111111 Texto informativo sobre esta imagen."
description[1]="222222 Texto informativo sobre esta imagen."
description[2]="333333 Texto informativo sobre esta imagen."
var ie4=document.all
var ns6=document.getElementById
var tempobj=document.dynamicselector.dynamicselector2
if (ie4||ns6)
var contentobj=document.getElementById? document.getElementById("dynamic3"): document.all.dynamic3
function generateimage(which){
if (ie4||ns6){
contentobj.innerHTML='<center>Loading image...</center>'
contentobj.innerHTML='<center><img src="'+which+'"><br><br>'+description[tempobj.options.selectedIndex]+'</center>'
}
else if (document.layers){
document.dynamic1.document.dynamic2.document.write('<center><img src="'+which+'"><br><br>'+description[tempobj.options.selectedIndex]+'</center>')
document.dynamic1.document.dynamic2.document.close()
}
else
alert('You need NS 4+ or IE 4+ to view the images!')
}
function generatedefault(){
generateimage(tempobj.options[tempobj.options.selectedIndex].value)
}
if (ie4||ns6||document.layers){
if (tempobj.options.selectedIndex!=-1){
if (ns6)
generatedefault()
else
window.onload=generatedefault
}
}
</script>
</td>
</tr>
</table>
puedes colocar imagenes y una breve descripcion debajo , que apareceran a la derecha cuando le das a la opcion, puedes poner tantas opciones como kieras
----------------------------------------------------------------------------
Este código crea unos botones de navegación: atrás, arriba y adelante
Nota:También puedes usar solo el botón Top para subir arriba de cada página. Lo puedes pegar tantas veces quieras en la misma página.
Quedaria algo como esto:
Bild
Codigo
<table border="0" bgcolor="#FFCC66">
<tr>
<td align="center">
<input type="button" value=" << " onclick="javascript:window.history.go(-1);">
<input type="button" value="Top" onclick="document.location='#top';">
<input type="button" value=" >> " onclick="javascript:window.history.go(1);"></td>
</tr>
</table>
<!-- End Navigation -->
_________________
FERNAN- 3ª Medalla
- Cantidad de envíos : 1174
Edad : 57
Localización : Madrid
Fecha de inscripción : 30/07/2008
Página 1 de 1.
Permisos de este foro:
No puedes responder a temas en este foro.|
|
|
» Actualizaccion del mod FFAA
» Misiones ARMA 3
» Guias y tutoriales ACE 3
» Tutorial scripting
» Entertainment
» Mision Agios Dionyssios.Altis
» Maquinas de guerra