| Sección
"Java Scripts" |
|
Lección
30 |
Colocar
el código para mostrar
código fuente dentro de una tabla
En
ciertas ocasiones, deseas mostrar el código
fuente de tu página a tus visitantes, o el
código fuente de otras páginas, tal como
explicamos en la lección 29, pero deseas que los
mensajes de activación del Script en tu página,
se vean más presentables.
En ese
caso, solo debes meter el código dentro de una
tabla. Entonces quedará de esta manera, y lo
puedes pegar
en cualquier sector de tu sitio, pero
siempre debajo de donde dice
<Body> en el HTML de tu página:
<script type="text/javascript">
// Creado por Mikel Gomez http://mikelgomez.cjb.net
function verFuente(pagina){
window.location = "view-source:" + pagina ;
}
</script>
<p align="center"><font color="#8080C0" face="MS Sans Serif"
size="3">: </font>
</p>
<p align="center">
</p>
<p align="center">
</p>
<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div align="center">
<table border="1" cellpadding="3" cellspacing="0" bgcolor="#EAEAEA">
<tr>
<td><font color="#000080" face="MS Sans Serif"
size="3">Ver código
fuente</font></td>
</tr>
<tr>
<td>
<p align="center"><a href="javascript:verFuente(window.location);"><font
color="#808080" face="MS Sans Serif"
size="3">Página
actual </font></a> </td>
</tr>
<tr>
<td>
<p align="center"><font color="#8080C0" face="MS Sans Serif" size="3">
</font> <a href="javascript:verFuente('http://www.forosdelweb.com');"><font
color="#808080" face="MS Sans Serif"
size="3">Foros del Web
</font></a>
</td>
</tr>
</table>
</div>
</td>
<td></td>
</tr>
</table>
</center>
</div>
|
|
Lo
que pinté con rojo corresponde al título del
mensaje que saldrá en tu página para dar la
opción de mostrar el código fuente. Puedes
cambiar el título a gusto.
Lo
que pinté con azul es el mensaje que se muestra
para que al ser accionado ejecute el Script y
muestre el código fuente de la página actual.
Puedes modificar el mensaje a voluntad
Lo
que pinté con gris corresponde a la dirección de
otra página, de la cual deseas mostrar el código
fuente. Puedes modificar la dirección a voluntad
Lo
que pinté en verde es el mensaje que que se
muestra para que al ser accionado ejecute el
Script y muestre el código fuente de la página
declarada entre paréntesis (en este ejemplo: "http://www.forosdelweb.com"). Puedes
modificar el mensaje a voluntad.
Lo
que pinté con rosado es el valor correspondiente
al margen declarado para cada celda de la tabla.
(Antes de aparecer el texto que escribiste,
aparecerá un margen de acuerdo al valor
declarado).
Lo
que pinté con marrón corresponde al color de las
letras que aparecerán en esa celda. Le puedes
indicar a una celda un color, a otra otro color.
Solo debes regirte por la tabla
de colores.
Lo
que pinté con naranja corresponde al color de
fondo de la tabla, lo modificas a gusto según la tabla
de colores.
Con
violeta pinté las fuentes de la letra utilizada.
Las puedes reemplazar por las fuentes que desees.
Además, lo que sigue el nombre de la fuente, es
decir: size="3", corresponde al tamaño
de la misma, le puedes modificar ese valor a
placer.
El
Script tal como se enseña aquí funcionará de
esta manera:
Aquí copio nuevamente el código con
opción para seleccionarlo, cortar y pegar en tu
sitio.
Para
ello haces click en cualquier palabra que se halla
dentro de la caja, Te diriges a "Edición"
en el menú superior de la barra de herramientas, e
indicas "Seleccinar todo", luego tomas lo
seleccionado dirigiéndote nuevamente a "Edición",
pero esta vez indicas "Cortar", y
posteriormente te posicionas en tu página, donde
quieres colocar este código, entonces te diriges a
Edición, y le indicas "Pegar".
Si
deseas hacer las cosas más rápido, puedes verificar
en "Edición" (está escrito al lado de las
palabras que indican cada orden) que pulsando
"Control" + una letra determinada, puedes
"seleccionar todo", "cortar" o
"pegar" en forma instantánea y con eso
evitas tener que ingresar constantemente al menú de
"Edición".
Esto
es lo que debes pegar debajo de donde dice <Body>
en el HTML de tu página:
Si
de todos modos, no funciona este efecto, corta
el código HTML que debes colocar en tu página,
pero antes de hacerlo, pégalo en tu Block de
notas, y luego si córtalo de allí y pégalo en
tu sitio. Ahora si no creo que haya ningún
inconveniente que te impida disfrutar de este
bonito efecto.
Recordemos
que este Script también puede ser hallado en el
programa Depósito, el cual puedes bajar de aquí:
webtutorial.com.ar
Buena
suerte.
|
