Tu primera página

24 de septiembre de 2001
Valoración del artículo:
Vamos a ver cómo se hace una página muy sencilla en HTML, que sirva de práctica a los debutantes.
Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
Podemos ya con estos conocimientos, y alguno que otro más, crear nuestra primera página. Para ello, abre tu editor de textos y copia y pega el siguiente texto en un nuevo documento.

<html>

<head>
<title>Cocina Para Todos</title>
</head>

<body>
<p><b>Bienvenido,</b></p>
<p>Estás en la página <b>Comida para Todos</b>.</p>
<p>Aquí aprenderás recetas fáciles y deliciosas.</p>
</body>

</html>

Ahora guarda ese archivo con extensión .html o .htm en tu disco duro. Para ello accedemos al menú Archivo y seleccionamos la opción Guardar como. En la ventana elegimos el directorio donde deseamos guardarlo y colocaremos su nombre, por ejemplo mi_pagina.html

Consejo: Utiliza nombres en tus archivos que tengan algunas normas básicas para ahorrarte disgustos y lios.

Nuestro consejo es que no utilices acentos ni espacios ni otros caracteres raros. También te ayudará escribir siempre las letras en minúsculas.

Esto no quiere decir que debes hacer nombres de archivos cortos, es mejor hacerlos descriptivos para que te aclaren lo que hay dentro. Algún caracter como el guión "-" o el guión bajo "_" te puede ayudar a separar las palabras. Por ejemplo quienes_somos.html

Con el documento HTML creado, podemos ver el resultado obtenido a partir de un navegador. Es conveniente, llegado a este punto, hacer hincapié en el hecho de que no todos los navegadores son idénticos. Desgraciadamente, los resultados de nuestro código pueden cambiar de uno a otro por lo que resulta aconsejable visualizar la página en varios. Generalmente se usan Internet Explorer y Netscape como referencias ya que son los más extendidos.

A decir verdad, en el momento que estas líneas son escritas, Internet Explorer acapara la inmensa mayoría de usuarios (90% más o menos) y Netscape esta relegado a un segundo plano. Esto no quiere decir que lo debemos dejar totalmente de lado ya que el 10% de visitas que puede proporcionarnos puede resultar muy importante para nosotros. Por otra parte, parece que se ha hecho publica la intención de Netscape de desviar un poco su temática de negocios hacia otros derroteros y abandonar esta llamada "lucha de navegadores" 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 página con un navegador. Para hacerlo, la forma resulta diferente dependiendo del navegador:

Si estamos empleando el Explorer, hemos de ir al barra de menú, elegir Archivo y seleccionar Abrir. Una ventana se abrirá. Pulsamos sobre el botón Examinar y accederemos a una ventana a partir de la cual podremos movernos por el interior de nuestro disco duro hasta dar con el archivo que deseamos abrir.

La cosa no resulta más difícil para Netscape. En este caso, nos dirigimos también a la barra de menú principal y elegimos File y a continuación Open File. La misma ventana de búsqueda nos permitirá escudriñar el contenido de nuestro PC hasta dar con el archivo buscado.

Nota: También puedes abrir el archivo si accedes al directorio donde lo guardaste. En él podrás encontrar tu archivo HTML y verás que tiene como icono el logotipo de Netscape o el de Internet Explorer. Para abrirlo simplemente hacemos un doble click sobre él.

Una vez abierto el archivo podréis ver vuestra primera página web. Algo sencillita pero por algo se empieza. Ya veréis como en poco tiempo seremos capaces de mejorar sensiblemente.

Fijaos en la parte superior izquierda de la ventana del navegador. Podréis comprobar la presencia del texto delimitado por la etiqueta <title>. Esta es una de las funciones de esta etiqueta, cuyo principal cometido es el de servir de referencia en los motores de búsqueda como Altavista o Yahoo.

Pantallazo de la primera página


Por otro lado, los elementos que colocamos entre la etiqueta <body> y </body> se pueden ver en el espacio reservado para el cuerpo de la página.

Se puede ver la página del ejemplo en funcionamiento aquí.

Si ahora hacéis click con el botón derecho sobre la página y elegís Ver código fuente (o View page source) veréis como en una ventana accesoria aparece el código de nuestra página. Este recurso es de extremada importancia ya que nos permite ver el tipo de técnicas empleadas por otros para la confección de sus páginas.

Con todo esto asimilado ya estamos en condiciones de adentrarnos un poco más en la descripción de algunas de las etiquetas más empleadas del HTML.

Posible problema: Al utilizar el Block de Notas en Windows en ocasiones, aunque le digamos que es un archivo .html, el documento se guarda como si fuera un texto y no una página web. Lo que está pasando es que el Block de Notas tiene predeterminado guardar sus archivos con extensión .txt y en realidad lo que está guardando en el disco duro es mi_pagina.html.txt

Para conseguir tener el control de las extensiones en el block de notas y en Windows en general podemos acceder a MI-PC y en el menú de Ver seleccionáis "Opciones de carpeta". En la ventana que sale pulsamos en la solapa "Ver" y nos permite deseleccionar una caja de selección que pone algo como "Ocultar extensiones para los tipos de archivos conocidos". (Así se hace en Win98, puede variar un poco en otras versiones de Windows.)

Con ello conseguiremos que se vea siempre la extensión del archivo con el que estamos trabajando y que el Block de Notas nos haga caso cuando le indicamos que grabe el archivo con otra extensión que no sea .txt

Comentarios
Fueron enviados 27 comentarios al artículo
7 comentarios no revisados
20 comentarios revisados:
Por: victor alvarez
15/8/03
Me he propuesto adentrarme en la programación a través de Javascript. Desde hace un par de meses vengo practicando pero no podía abrir los archivos en el explorador. Era por lo de desabilitar las opciones de ocultar extensiones para tipos de archivos conocidos. Yo tengo el XP y en vez de abrir el menú "ver es el de "herramientas", lo demás todo igual.
Por: Miguel
30/10/03
Hola!
Tengo entendido que otra manera para conseguir que el Bloc de Notas de Windows guarde el archivo con la extensión que se le indica es la de poner el nombre del archivo y la extensión entre comillas. Ej: "index.html"

Enhorabuena por el Manual HTML
Por: miguel angel
25/3/04
Es una pagina muy buena yo doy clases de HTML y este sitio es en verdad muy bueno, es decir excelente. Los felicito a todos los que hacen posible la extencion del conocimiento HTML a traves de esta página.
Por: davis
02/6/04
VAMOS A COPIAR CODIGOS PARA NUESTRA PAGINA WEB: [ QUE CHIDO NO CREEN.... ]

_______________________________________________________________________________________________________________________________________________________________________-----

1 CODIGO:

Esta sencilla al cargar la página genera un efecto en donde simula una transición de cuadro por cuadro.


<html>
<head>
<style>
<!--
.intro{
position:absolute;
left:0;
top:0;
layer-background-color:green;
background-color:green;
border:0.1px solid green;
z-index:10;
}
-->
</style>

</head>

<body>

<div id="p1" class="intro"></div>
<div id="p2" class="intro"></div>
<div id="p3" class="intro"></div>
<div id="p4" class="intro"></div>
<div id="p5" class="intro"></div>
<div id="p6" class="intro"></div>
<div id="p7" class="intro"></div>
<div id="p8" class="intro"></div>
<div id="p9" class="intro"></div>
<div id="p10" class="intro"></div>
<div id="p11" class="intro"></div>
<div id="p12" class="intro"></div>
<div id="p13" class="intro"></div>
<div id="p14" class="intro"></div>
<div id="p15" class="intro"></div>
<div id="p16" class="intro"></div>
<div id="p17" class="intro"></div>
<div id="p18" class="intro"></div>
<div id="p19" class="intro"></div>
<div id="p20" class="intro"></div>
<div id="p21" class="intro"></div>
<div id="p22" class="intro"></div>
<div id="p23" class="intro"></div>
<div id="p24" class="intro"></div>
<div id="p25" class="intro"></div>

<script>

/*
Boxing-away Script- By Dynamic Drive (www.dynamicdrive.com)
For full source code, 100's more free DHTML scripts, and TOS,
visit http://www.dynamicdrive.com
*/


var espeed=300
var counter=1
var temp=new Array()
var temp2=new Array()

var ns4=document.layers?1:0
var ie4=document.all?1:0
var ns6=document.getElementById&&!document.all?1:0


////////Code for Netscape NS 4+////
if (ns4){
for (i=1;i<=25;i++){
temp[i]=eval("document.p"+i+".clip")
temp2[i]=eval("document.p"+i)
temp[i].width=window.innerWidth/5
temp[i].height=window.innerHeight/5
}

for (i=1;i<=5;i++)
temp2[i].left=(i-1)*temp[i].width

for (i=6;i<=10;i++){
temp2[i].left=(i-6)*temp[i].width
temp2[i].top=temp[i].height
}

for (i=11;i<=15;i++){
temp2[i].left=(i-11)*temp[i].width
temp2[i].top=2*temp[i].height
}

for (i=16;i<=20;i++){
temp2[i].left=(i-16)*temp[i].width
temp2[i].top=3*temp[i].height
}

for (i=21;i<=25;i++){
temp2[i].left=(i-21)*temp[i].width
temp2[i].top=4*temp[i].height
}

}

function erasecontainerns(){
window.scrollTo(0,0)
var whichcontainer=Math.round(Math.random()*25)
if (whichcontainer==0)
whichcontainer=1
if (temp2[whichcontainer].visibility!="hide")
temp2[whichcontainer].visibility="hide"
else{
while (temp2[whichcontainer].visibility=="hide"){
whichcontainer=Math.round(Math.random()*25)
if (whichcontainer==0)
whichcontainer=1
}
temp2[whichcontainer].visibility="hide"
}

if (counter==25)
clearInterval(beginerase)

counter++
espeed-=10

}


////////End code for NS 4+////////


///////////Code for IE 4+ and NS6/////////

if (ie4||ns6){
var containerwidth=ns6?parseInt(window.innerWidth)/5-3 : parseInt(document.body.clientWidth/5)
var containerheight=ns6?parseInt(window.innerHeight)/5-2 : parseInt(document.body.offsetHeight/5)

for (i=1;i<=25;i++){
temp[i]=ns6?document.getElementById("p"+i).style : eval("document.all.p"+i+".style")
temp[i].width=containerwidth
temp[i].height=containerheight
}

for (i=1;i<=5;i++)
temp[i].left=(i-1)*containerwidth

for (i=6;i<=10;i++){
temp[i].left=(i-6)*containerwidth
temp[i].top=containerheight
}

for (i=11;i<=15;i++){
temp[i].left=(i-11)*containerwidth
temp[i].top=2*containerheight
}

for (i=16;i<=20;i++){
temp[i].left=(i-16)*containerwidth
temp[i].top=3*containerheight
}

for (i=21;i<=25;i++){
temp[i].left=(i-21)*containerwidth
temp[i].top=4*containerheight
}
}

function erasecontainerie(){
window.scrollTo(0,0)
var whichcontainer=Math.round(Math.random()*25)
if (whichcontainer==0)
whichcontainer=1
if (temp[whichcontainer].visibility!="hidden")
temp[whichcontainer].visibility="hidden"
else{
while (temp[whichcontainer].visibility=="hidden"){
whichcontainer=Math.round(Math.random()*25)
if (whichcontainer==0)
whichcontainer=1
}
temp[whichcontainer].visibility="hidden"
}

if (counter==25){
clearInterval(beginerase)
if (ns6){
for (i=1;i<26;i++)
temp[i].display="none"
}
}
counter++
espeed-=10

}

/////////End IE 4+ code////////

if (ns4)
beginerase=setInterval("erasecontainerns()",espeed)
else if (ie4||ns6){
beginerase=setInterval("erasecontainerie()",espeed)
}


</script>

</body>
</html>

____________________________________________________________________________________________________________________________________________________________________________________________________________________________________

2 CODIGO:

Script de seguridad, simplemente se encarga de chequear a través de que enlace llegó el usuario. En caso de acceder a través de un enlace no permitido, será enviado a la página de la cúal proviene.


<script>
<!--
/*Referrer Checker- By Website Abstraction
(www.wsabstract.com) Over 200+ free JavaScripts here!
*/

//specify valid referrals for script to accept
var validreferrals=new Array()
validreferrals[0]="http://www.wsabstract.com/script/cut170.shtml"
validreferrals[1]="http://wsabstract.com/script/cut170.shtml"

var passed=0

for (r=0;r<validreferrals.length;r++){
if (document.referrer.indexOf(validreferrals[r])!=-1){
passed=1
break
}
}

if (passed==0){
alert("Acceso denegado a la página!")
history.go(-1)
}

//-->
</script>

___________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

3 CODIGO:

Este sencilla rutina nos muestra como su nombre lo indica un efecto, similar al que realizan las burbujas al ascender.


<html>

<body>

<script language="JavaScript1.2">
<!-- Begin

/*
Bubble Script by Lisa (issa@lissaexplains.com, http://lissaexplains.com)
Based on code by Altan d.o.o. (snow@altan.hr, http://www.altan.hr/snow/index.html)
*/

var no = 20; // image number or falling rate
var speed = 2; // the lower the number the faster the image moves
var snow = new Array();
snow[0] = "ejemplos/burbu1.gif"
snow[1] = "ejemplos/burbu2.gif"
snow[2] = "ejemplos/burbu3.gif"

var ns4up = (document.layers) ? 1 : 0; // browser sniffer
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 1800;

if (ns4up||ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
j = 0;

for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ns4up) { // set layers
if (i == 0) {
document.write("<layer name="dot"+ i +"" left="15" top="15" visibility="show"><img src=""+ snow[j] + "" border="0"></layer>");
} else {
document.write("<layer name="dot"+ i +"" left="15" top="15" visibility="show"><img src=""+ snow[j] + "" border="0"></layer>");
} } else if (ie4up||ns6up) { if (i == 0)
{
document.write("<div id="dot"+ i +"" style="POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;"><img src="" + snow[j] + "" border="0"></div>");
} else {
document.write("<div id="dot"+ i +"" style="POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;"><img src="" + snow[j] + "" border="0"></div>");
}
}
if (j == (snow.length-1)) { j = 0; } else { j += 1; }
}

function snowNS() { // Netscape main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] -= sty[i]; if (yp[i] < -50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = doc_height;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight; }
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i];
document.layers["dot"+i].left = xp[i] +
am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()", speed);
}

function snowIE_NS6() { // IE main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] -= sty[i];
if (yp[i] < -50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = doc_height;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = ns6up?window.innerWidth-5:document.body.clientWidth;
doc_height = ns6up?window.innerHeight-5:document.body.clientHeight;
}
dx[i] += stx[i];
if (ie4up){
document.all["dot"+i].style.pixelTop = yp[i];
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
else if (ns6up){
document.getElementById("dot"+i).style.top=yp[i];
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i]);
}
}
setTimeout("snowIE_NS6()", speed);
}

if (ns4up) {
snowNS();
} else if (ie4up||ns6up) {
snowIE_NS6();
}
// End -->
</script>

</body>
</html>


__________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________


4 CODIGO


Esta rutina javascript simula la caida de un rayo que parte nuestra página.


<html>
<head>

<!--INSERT BELOW INSIDE HEAD SECTION-->
<SCRIPT language="Javascript">
<!--

/*
Document lightening effect (By Joe Lard, darg36@home.com)
Submitted to Dynamic Drive to feature script in archive
For full source and 100's more DHTML scripts, visit http://www.dynamicdrive.com
*/

ie4=document.all?1:0;
ns4=document.layers?1:0;
ns5=(document.getElementById && !document.all)?1:0;

function init(){
// Bolt has an aura? (true | false) // takes twice as long to strike
aura=false;
bcolor="white";
acolor="blue";

// Make background color flash? (true | false)
flash=true;
skyNorm="black";
skyFlash="#000050";
if (flash) document.bgColor=skyNorm;

// nbs = Number of main bolt segments
nbs = 50;
ct=0;
// Font sizes for lightning bolt and aura segments
fsb=shi*.3;
fsf=shi*.2;
fsbi=shi*.2;
fsfi=shi*.12;
fsbii=shi*.12;
fsfii=shi*.07;

xpos=cswi; ypos=0;
if (ns5) ark = document.getElementById("ark");
if (ns4) {

ol=document.layers["ark"];
ol = new Layer(swi);
ol.left = 0;
ol.top = 0;
ol.height = shi;
ol.zIndex=1;
ol.visibility = "hide";

ret="<STYLE TYPE='text/css'>";
for (i=1;i<10;i++){
ret+="DIV.bolt"+i+" {position:absolute; font-style:'Times New Roman'; font-size:"+(fsf*i/9)+"px; color:"+bcolor+"; visibility:inherit; z-index:1}";
if (aura) ret+="DIV.bolta"+i+" {position:absolute; font-style:'Times New Roman'; font-size:"+(fsf*1.3*i/9)+"px; color:blue; visibility:inherit; z-index:0}";
} ret+="</STYLE>";

for (fs=1;fs<10;fs++)
for (i=1;i<nbs;i++) {
if (aura) ret+="<DIV id=a"+i+"f"+fs+" class=bolta"+fs+">.</DIV>";
ret+="<DIV id=s"+i+"f"+fs+" class=bolt"+fs+">.</DIV>";
}

//ol.document.open();
ol.document.write(ret);
ol.document.close();
}
Time1=setTimeout("mainplot()",100);
}

function mainplot()
{
lang=0;
xpos=Math.random()*cswi+cswi/2; ypos=0; fs=9; fsi=8
deg=Math.random()*30-15+((xpos<cswi)? +15:-15);
jag=Math.round(Math.random()*100)/100;
zag=Math.round(Math.random()*100)/100;
cur=Math.round((.5 * (Math.random()*10-5))*100)/100;
ion=(Math.random()>.5)? 1:-1;
//status=" "+ct+" Divs "+format(jag)+" jag "+format(zag)+" zag "+cur+" curve"; ct=0;

if (ns4)
{
for (i=1;i<nbs;i++) {
ang=Math.random()*jag*90-jag*45;
if (Math.random()+.05>zag) lang=Math.random()*zag*90-zag*45;
ang+=lang;
ct++;
if (Math.random()*10>9.5 && fsi>1) {fsi--; leg1();}
xpos+=Math.sin((deg+(ang+i*cur))/57.3)*(fsf*fs/9)*.07;
ypos+=Math.abs(Math.cos((deg+(ang+i*cur))/57.3)*(fsf*fs/9)*.07); //fsb=fsf*1.5;
if (aura) { ol.document.layers["a"+i+"f"+fs].moveTo(xpos-(fsf*1.3*fs/9)*.125,ypos-(fsf*1.3*fs/9)*.85); ct++;}
ol.document.layers["s"+i+"f"+fs].moveTo(xpos-(fsf*fs/9)*.125,ypos-(fsf*fs/9)*.85);
if (ypos>shi || xpos<0 || xpos>swi) i=nbs;
}
//status=" "+ct+" Divs "+format(jag)+" jag "+format(zag)+" zag "+cur+" curve";
ol.resizeTo(swi,shi);
Time1=setTimeout("light()",100);
}

if (ie4 || ns5) {
// Rewriting layers can be faster than repositioning in internet explorer
ret="";
fsf=shi*.2;
for (i=1;i<nbs;i++)
{
ang=Math.random()*jag*90-jag*45;
if (Math.random()+.05>zag) lang=Math.random()*zag*90-zag*45;
ang+=lang;
ct++;
if (Math.random()*10>9.5) {fsfi=fsf*.6; fsf*=.95; leg1();}
xpos+=Math.sin((deg+(ang+i*cur))/57.3)*fsf*.07;
ypos+=Math.abs(Math.cos((deg+(ang+i*cur))/57.3)*fsf*.07); fsb=fsf*1.3;
if (ypos>shi || xpos<0 || xpos>swi) i=nbs;
if (aura) { ret+="<DIV id='darg"+i+"' style='position:absolute; left:"+(xpos-fsb*.125)+"; top:"+(ypos-fsb*.85)+"; font-size:"+fsb+"px; color:rgb(0,0,255); z-Index:0' >.</DIV>"; ct++;}
ret+="<DIV style='position:absolute; left:"+(xpos-fsf*.125)+"; top:"+(ypos-fsf*.85)+"; font-size:"+fsf+"px; color:"+bcolor+"; z-Index:1' >.</DIV>";
}
//status=" "+ct+" Divs "+format(jag)+" jag "+format(zag)+" zag "+cur+" curve";
ark.innerHTML=ret;
Time1=setTimeout("lightie()",100);
}
}

function leg1() {
xpo=xpos; ypo=ypos;
lang=zag*ion*(30+Math.random()*20-10);
ion*=-1; lang1=0;
deg1=deg+ion*50+Math.random()*20-10;
jlen=Math.random()*nbs*.25+nbs*.25;
if(ns4) {
fsii=fsi-1
for (j=1;j<jlen;j++) {
ang1=Math.random()*jag*90-jag*45;
if (Math.random()+.05>zag) lang1=Math.random()*zag*90-zag*45;
ang1-=lang1;
ct++;
if (Math.random()*10>9.9 && fsii>1) {fsii--; leg2();}
xpo+=Math.sin((deg1+(ang1+j*cur))/57.3)*(fsf*fsi/9)*.07;
ypo+=Math.abs(Math.cos((deg1+(ang1+j*cur))/57.3)*(fsf*fsi/9)*.07);
if (aura) { ol.document.layers["a"+j+"f"+fsi].moveTo(xpo-(fsf*1.3*fsi/9)*.125,ypo-(fsf*1.3*fsi/9)*.85); ct++;}
ol.document.layers["s"+j+"f"+fsi].moveTo(xpo-(fsf*fsi/9)*.125,ypo-(fsf*fsi/9)*.85);
if (ypo>shi || xpo<0 || xpo>swi) j=jlen;
}
}
if (ie4 || ns5) {
ret+="<DIV id='fork'>";
for (j=1;j<jlen;j++)
{
ang1=Math.random()*jag*90-jag*45;
if (Math.random()+.05>zag) lang1=Math.random()*zag*90-zag*45;
ang1-=lang1;
ct++;
if (Math.random()*10>9.9) {fsfii=fsfi*.6; fsfi*=.95; leg2();}
xpo+=Math.sin((deg1+(ang1+j*cur))/57.3)*fsfi*.07;
ypo+=Math.cos((deg1+(ang1+j*cur))/57.3)*fsfi*.07; fsbi=fsfi*1.3;
if (ypo>shi || xpo<0 || xpo>swi) j=jlen;
if (aura) { ret+="<DIV id='arg"+j+"' style='position:absolute; left:"+(xpo-fsbi*.125)+"; top:"+(ypo-fsbi*.85)+"; font-size:"+fsbi+"px; color:rgb(0,0,255); z-Index:0' >.</DIV>"; ct++;}
ret+="<DIV style='position:absolute; left:"+(xpo-fsfi*.125)+"; top:"+(ypo-fsfi*.85)+"; font-size:"+fsfi+"px; color:"+bcolor+"; z-Index:1' >.</DIV>";
}ret+="</DIV>";
}
}

function leg2() {
xp=xpo; yp=ypo;
lang1=zag*ion*(30+Math.random()*20-10);
//ion*=-1;
lang2=0;
deg2=deg1+ion*50+Math.random()*20-10;
klen=Math.random()*nbs/2+nbs/2; // //
if (ns4) {
for (k=nbs/2;k<klen;k++) {
ang2=Math.random()*jag*90-jag*45;
if (Math.random()+.05>zag) lang2=Math.random()*zag*90-zag*45;
ang2-=lang2;
ct++;
xp+=Math.sin((deg2+(ang2+k*cur))/57.3)*(fsf*fsii/9)*.07;
yp+=Math.cos((deg2+ang2)/57.3)*(fsf*fsii/9)*.07;
if (aura) { ol.document.layers["a"+k+"f"+fsii].moveTo(xp-(fsf*1.3*fsii/9)*.125,yp-(fsf*1.3*fsii/9)*.85); ct++;}
ol.document.layers["s"+k+"f"+fsii].moveTo(xp-(fsf*fsii/9)*.125,yp-(fsf*fsii/9)*.85);
if (yp>shi || xp<0 || xp>swi) k=klen;
}
}
if (ie4 || ns5) {
ret+="<DIV id='forki'>";
for (k=nbs/2;k<klen;k++)
{
ang2=Math.random()*jag*90-jag*45;
if (Math.random()+.05>zag) lang2=Math.random()*zag*90-zag*45;
ang2-=lang2;
ct++;
xp+=Math.sin((deg2+(ang2+k*cur))/57.3)*fsfii*.07;
yp+=Math.cos((deg2+(ang2+k*cur))/57.3)*fsfii*.07; fsbii=fsfii*1.3;
if (yp>shi || xp<0 || xp>swi) k=klen;
if (aura) { ret+="<DIV id='arg"+k+"' style='position:absolute; left:"+(xp-fsbii*.125)+"; top:"+(yp-fsbii*.85)+"; font-size:"+fsbii+"px; color:rgb(0,0,255); z-Index:0' >.</DIV>"; ct++;}
ret+="<DIV style='position:absolute; left:"+(xp-fsfii*.125)+"; top:"+(yp-fsfii*.85)+"; font-size:"+fsfii+"px; color:"+bcolor+"; z-Index:1' >.</DIV>";
}
ret+="</DIV>";
}
}

function light()
{ ol.moveTo(pageXOffset,pageYOffset);
ol.visibility = "show";
if (flash) document.bgColor=skyFlash;
Time2=setTimeout("ning()",(Math.random()*1000+1000));
}

function lightie()
{ ark.style.left=document.body.scrollLeft;
ark.style.top=document.body.scrollTop;
ark.style.visibility = "visible";
if (flash) document.bgColor=skyFlash;
Time2=setTimeout("ningie()",(Math.random()*500+100));
}

function ning()
{
if (flash) document.bgColor=skyNorm;
ol.visibility = "hide";
if (Math.random()*3>2) Time2=setTimeout("light()",(Math.random()*500+100));
else {
for (fs=1;fs<10;fs++)
for (i=1;i<nbs;i++) {
if (aura) ol.document.layers["a"+i+"f"+fs].moveTo(-100,-100);
ol.document.layers["s"+i+"f"+fs].moveTo(-100,-100);
}
Time1=setTimeout("mainplot()",(Math.random()*500+100))
}
}

function ningie()
{ ark.style.visibility = "hidden";
if (flash) document.bgColor=skyNorm;
if (Math.random()*3>2) Time2=setTimeout("lightie()",(Math.random()*500+100)); else Time1=setTimeout("mainplot()",(Math.random()*500+100));
}

function format(f){ f+="";
if (f.charAt(0)==".") f="0"+f;
if (f.length==1) f+=".00";
if (f.length==3) f+="0";
return f;
}

function halt() {
if (Time1) {clearTimeout(Time1); Time1=null;}
if (Time2) {clearTimeout(Time2); Time2=null;}
}

//-->
</SCRIPT>
<STYLE TYPE="text/css">
#frm {position:absolute; left:20; top:10; width:100; height:100; visibility:visible; z-Index:951;
color:blue; overflow:clip; font-style:Times}
</STYLE>

</head>

<!--ADD THE FOLLOWING EVENTS INTO THE BODY TAG ITSELF-->
<BODY onLoad="window.focus();init();" onResize="document.location.href=document.location.href;" bgColor="#000000" text="#FFFFFF" onUnload="halt();" link="#FFFF00" vlink="#00FF00">

<!--ADD THE BELOW SCRIPT INSIDE THE BODY SECTION, AT THE END-->
<SCRIPT language="Javascript">
<!--
swi=(ie4)? document.body.offsetWidth-17:window.innerWidth;
shi=(ie4)? document.body.offsetHeight-4:window.innerHeight;
cswi=swi/2;
cshi=shi/2;

ret="<DIV id='ark' style='position:absolute; left:0; top:0; width:"+swi+"; height:"+shi+"; visibility:visible; z-index=1; overflow:hidden; clip:rect(0,"+(swi)+","+(shi)+",0)'></DIV>";
document.write(ret);

//-->
</SCRIPT>

</body>
</html>


_________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________


5 CODIGO

Esta rutina tiene como objetivo, mostrar un enlace diferente todos los días. Nosotros solamente deberemos ingresar las direcciones de las páginas.


<script>

/*Day of the link script credit-
By Website Abstraction (www.wsabstract.com)
Over 200+ free scripts here!
*/

var daylinks=new Array()
/*
Enter the 31 urls below you wish to go to for each day of the month. Note that if the current month contains less than 31 days, then some of the urls will simply not be used
*/

daylinks[1]="http://www.cnn.com"
daylinks[2]="http://www.abcnews.com"
daylinks[3]="http://www.cnet.com"
daylinks[4]="http://www.geocities.com"
daylinks[5]="http://www.lycos.com"
daylinks[6]="http://www.infoseek.com"
daylinks[7]="http://www.hotbot.com"
daylinks[8]="http://www.tripod.com"
daylinks[9]="http://www.wsabstract.com"
daylinks[10]="http://www.wired.com"
daylinks[11]="http://www.download.com"
daylinks[12]="http://www.windows95.com"
daylinks[13]="http://www.shareware.com"
daylinks[14]="http://www.builder.com"
daylinks[15]="http://www.htmlgoodies.com"
daylinks[16]="http://www.webreference.com"
daylinks[17]="http://www.webdeveloper.com"
daylinks[18]="http://www.developer.com"
daylinks[19]="http://www.news.com"
daylinks[20]="http://www.techweb.com"
daylinks[21]="http://www.zdnet.com"
daylinks[22]="http://www.excite.com"
daylinks[23]="http://www.nba.com"
daylinks[24]="http://www.microsoft.com"
daylinks[25]="http://www.netscape.com"
daylinks[26]="http://www.amazon.com"
daylinks[27]="http://www.xml.com"
daylinks[28]="http://www.espn.com"
daylinks[29]="http://www.nbc.com"
daylinks[30]="http://www.cbs.com"
daylinks[31]="http://www.hotwired.com"

var mydate=new Date()
var today=mydate.getDate()
</script>

<br>
<center>
<font style="font-size : 8pt ;" face=verdana>
<a href="sitio_del_dia.htm" onClick="window.location=daylinks[today];return false">Haga clic! para conocer el ENLACE DEL DIA</a></font>
</center>
<script>

/*Day of the link script credit-
By Website Abstraction (www.wsabstract.com)
Over 200+ free scripts here!
*/

var daylinks=new Array()
/*
Enter the 31 urls below you wish to go to for each day of the month. Note that if the current month contains less than 31 days, then some of the urls will simply not be used
*/

daylinks[1]="http://www.cnn.com"
daylinks[2]="http://www.abcnews.com"
daylinks[3]="http://www.cnet.com"
daylinks[4]="http://www.geocities.com"
daylinks[5]="http://www.lycos.com"
daylinks[6]="http://www.infoseek.com"
daylinks[7]="http://www.hotbot.com"
daylinks[8]="http://www.tripod.com"
daylinks[9]="http://www.wsabstract.com"
daylinks[10]="http://www.wired.com"
daylinks[11]="http://www.download.com"
daylinks[12]="http://www.windows95.com"
daylinks[13]="http://www.shareware.com"
daylinks[14]="http://www.builder.com"
daylinks[15]="http://www.htmlgoodies.com"
daylinks[16]="http://www.webreference.com"
daylinks[17]="http://www.webdeveloper.com"
daylinks[18]="http://www.developer.com"
daylinks[19]="http://www.news.com"
daylinks[20]="http://www.techweb.com"
daylinks[21]="http://www.zdnet.com"
daylinks[22]="http://www.excite.com"
daylinks[23]="http://www.nba.com"
daylinks[24]="http://www.microsoft.com"
daylinks[25]="http://www.netscape.com"
daylinks[26]="http://www.amazon.com"
daylinks[27]="http://www.xml.com"
daylinks[28]="http://www.espn.com"
daylinks[29]="http://www.nbc.com"
daylinks[30]="http://www.cbs.com"
daylinks[31]="http://www.hotwired.com"

var mydate=new Date()
var today=mydate.getDate()
</script>

<br>
<center>
<font style="font-size : 8pt ;" face=verdana>
<a href="sitio_del_dia.htm" onClick="window.location=daylinks[today];return false">Haga clic! para conocer el ENLACE DEL DIA</a></font>
</center>


_________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

6 CODIGO

Esta sencilla rutina como su nombre lo indica nos permite mover una imagen, en este caso cuando nos posicionamos encima con el mouse empieza a moverse.
Esta sencilla rutina como su nombre lo indica nos permite mover una imagen, en


<html>

<head><script>
function detenerError(){
return true
}
window.onerror=detenerError
</script>

<style>
.shakeimage{
position:relative
}
</style>
<script language="JavaScript1.2">

var rector=3
var stopit=0
var a=1

function init(which){
stopit=0
shake=which
shake.style.left=0
shake.style.top=0
}

function rattleimage(){
if ((!document.all&&!document.getElementById)||stopit==1)
return
if (a==1){
shake.style.top=parseInt(shake.style.top)+rector
}
else if (a==2){
shake.style.left=parseInt(shake.style.left)+rector
}
else if (a==3){
shake.style.top=parseInt(shake.style.top)-rector
}
else{
shake.style.left=parseInt(shake.style.left)-rector
}
if (a<4)
a++
else
a=1
setTimeout("rattleimage()",50)
}

function stoprattle(which){
stopit=1
which.style.left=0
which.style.top=0
}

</script>

<title>JavaScript Mover imagen</title>
</head>

<body>


<p align="left"><font face="Arial" color="#000000"><small>Ejemplo: </small></font><img
src="ejemplos/red.gif" class="shakeimage" onMouseover="init(this);rattleimage()"
onMouseout="stoprattle(this)" onclick="alert('Aquí no ha pasado nada')"></p>

</body>
</html>

__________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

7 CODIGO


Gracias a esta sencilla rutina javascript veremos como podemos mostrar un pequeño mensaje de scroll en el título de la página.



<!-- Copiar este código dentro del tag HEAD -->

<script language="JavaScript1.2">
// *******************************************************************
// script by drevil_nz, Michael Dillon, Christchurch New Zealand.
// Permission granted to use this script provided this credit
// remains intact. Visit my homepage www.chc.quik.co.nz/juggler/mikey.html
// Script written for Internet Explorer 4.0+.
// *******************************************************************

var message="Gamarod JavaScript Versión 2.0"
var message=message+" "
i="0"
var temptitle=""
var speed="150"

function titler(){
if (!document.all&&!document.getElementById)
return
document.title=temptitle+message.charAt(i)
temptitle=temptitle+message.charAt(i)
i++
if(i==message.length)
{
i="0"
temptitle=""
}
setTimeout("titler()",speed)
}

window.onload=titler
</script>






esot son algunos codigos que pueden utilizar en sus paginas web, estan bien buenos....
Por: Tony
17/5/05
Es posible que Netscape esté de capa caída, pero últimamente Mozilla Firefox está en auge. Firefox es un navegador que interpreta el código HTML de manera óptima, cosa que Internet Explorer no hace. Muchas webs incorporan la coletilla: "web diseñada para Internet Explorer xxx". Creo que esto es un error. Las webs se deben diseñar siguiendo los estándares HTML definidos por W3C, independientemente de cómo los interprete Internet Explorer (cosa que hace bastante mal, por cierto). Si todos los diseñadores web siguiésemos esos estándares nos ahorraríamos muchos problemas (como duplicar código para uno u otro navegador) y tiempo a la hora de diseñar nuestras webs.
Saludos.
Por: Jompy
14/11/05
Hola diseñadores!!
Un metodo que nunca falla a la hora de guardar el archivo html es elegir en la pestaña de "tipo: todos los archivos" y después escribimos el nombre del archivo con su extensión .html y tan ricamente jeje
Un saludo
Por: viviana
07/2/07
Hola:
me parece genial el articulo del manual de HTML, lo estoy leyendo a fondo y explican muy bien cada cosa sin que un o se pierda, asi sigan con esos articulos tan buenos, son de mucha ayuda.
Por: Mario
28/2/07
esto es muy bueno para la gente que hasta ahora estamo comenzando en mi criterio deberias poner mas contenido grafico en esta pagina ya que aveces uno se aburre lellendo mucho tiempo ueno ese es mi comentario, gracias.
Por: Ana
22/3/07
Soy una novata, y estoy encantada con vuestra página, lo explicáis todo muy bien, casi me parece fácil!. Gracias.
Por: vanessa
09/2/09
por lo menos ustedes entienden esto es nuevo para mi y estoy en clase pero como todos no vinimos la primera clase que era el primer dia del semestre no se lo que ella explico y no se le dio la mismisima de hacer el favor de explicarnos y por eso me toco buscar esta pagina
Por: Lidia
13/3/09
Esta re buena la pagina,explican muy bien,estoy empesando a ver HTML y me esta sirviendo mucho,gracias...
codigos
Por: jose
17/4/09
Buenos sus códigos java, pero saben al realizar mis páginas estos códigos java solo corren en internet explorer no en mozilla ni en Chrome, a ver si pueden darme alguna solución.
Pregunta
Por: Sergio
20/5/09
Como hago para que el encabezado parpadee?
pag web
Por: bea
21/10/09
no me gusta porq no dan codigos para crear una pag web en html
Menú Buscar
Por: Tom
19/11/09
Siempre me ha encantado las bases de datos y desde hace un tiempo me he propuesto escribir una, en formato "contenedor de informacion" de mi interés, utilizando FrontPage. Está claro que seguramente no sea el mejor programa para trabajar y disponer de la herramienta adecuada para escribir una base de datos, con menús y vinculos, ni mucho menos conseguir configurar las paginas de manera atractiva. Simplemente dispongo de un formato de base de datos en html con un menú desplegable (en donde residen mis datos y su respectiva ubicacion) con el que entrar clicando con el ratón. Mi pregunta y deseo es: ¿Como puedo poner un menú principal de igual modo, pero en formato "BUSCAR", en donde escriba "Historia del PC" (por ejemplo) y la base de datos encuentre dicha entrada? Es decir, en vez del menu de FrontPage en donde se abre al clicar y sale la lista de los datos que hay que consultar, simplemente escribir lo que se quiera buscar.

Al mismo tiempo, no seria una busqueda como por Google, sino interna de datos mios, ¿lo que supondria buscar de alguna forma en una carpeta?

Por favor, comentarme eso enviandome correo.
Estoy encantado con Desarrolloweb.
Un Saludo,
Tom, Castellon.
Problemas al cargar html desde bloc de notas y subirlo a mozilla.
Por: felix
16/12/09
Hola,
tengo problemas al cargar html desde bloc de notas y subirlo a mozilla.
¿Me puedes indicar cómo lo hago?
Gracias por vuestras explicaciones.
cambio de la estencion
Por: parra
23/2/10
seria de gran ayuda paa mejorar tu producto que coloques el como cambiar la estencion del archivo ; para qeu quede .html
Algo anda mal
Por: Miguel Angel
02/4/10
No me funciono en MAC
saludos
Por: JOSE VITTAR
12/5/10
gracias muy claro y ademas hacen bien a mucha gente que por motivos economicos u otros no pueden concurrir a estudiar, un abraso amigos y sigan asi...
Mi primera pagina resumen
25/7/10
en este articulo aprendimos a copiar y apegar un codigo en el block de notas luego de esto este codigo lo guardamos con una estencion html y guala , ya teniamos nuestra primera y sencilla pagina web el codigo era el siguiente :
<html>

<head>
<title>Cocina Para Todos</title>
</head>

<body>
<p><b>Bienvenido,</b></p>
<p>Estás en la página <b>Comida para Todos</b>.</p>
<p>Aquí aprenderás recetas fáciles y deliciosas.</p>
</body>

</html>

muy util y por cierto trabajo perfectamente

Manuales relacionados
Categorias relacionadas
El autor
Rubén Alvarez
Redactor de DesarrolloWeb.com
http://www.desarrolloweb.com
Lectura recomendada
Compra este libro en Agapea, la librería urgente a domicilio.
Últimas noticias
Alojados en el grupo