Guía básica de HTML



Por: Paola Sandoval V.
A continuación les voy a presentar los códigos que utilicé para armar mi página web en un archivo .html paso a paso.
En primer lugar se realiza en una hoja de texto de preferencia wordPad e ir editando poco a poco (códigos encontrados en la web a necesidad del usuario), para guardar el archivo no olvidarse utilizar la extensión .html de forma que cuando quiero revisar mi trabajo lo encuentro ya para visualizarlo en un navegador de Internet y listo. 
PARA PODER INGRESAR PRIMERO HAY QUE ACEPTAR
<BODY onLoad="alert('HOLA AMIGOS SOY PAOLA SANDOVAL BIENVENIDOS');" onUnLoad="confirm('Texto Al Salir');">
PARA PONER UN TÍTULO A LA PÁGINA
 <title>Mi primera página Web</title>
 PARA PONER UN FONDO
 <body background="http://img32.imageshack.us/img32/9943/sharpeipuppy.jpg">
BANNER HECHO EN FLASH MEJORA TU PÁGINA WEB
<script src="http://h1.flashvortex.com/display.php?id=2_1304693351_44505_305_18719_405_39_8_1_45" type="text/javascript"></script>
BANNER HECHO EN FLASH HOLA A TODOS, CENTRADO
<center><<script src="http://h2.flashvortex.com/display.php?id=2_1335950959_33327_442_18719_728_90_9_2_33" type="text/javascript"></script>
BANNER HECHO EN FLASH BIENVENIDOS A MI WEBSITE, CENTRADO
<center><script src="http://h1.flashvortex.com/display.php?id=2_1328396771_23757_345_18719_814_125_9_1_86" type="text/javascript"></script> 
INSERTAR UN TEXTO, CENTRADO, CON COLOR AZUL Y COMO TÍTULO PRINCIPAL
<center><h1><font color="blue">EJEMPLO BÁSICO CON CÓDIGOS HTML</font></h1>
INSERTAR UN TEXTO, CENTRADO, Y CON MOVIMIENTO
<marquee><center><h2>PUCESA</marquee></h2>
HACER UN PUNTERO CON UN ÍMBOLO DE UNA CRUZ
<style type="text/css">
<!--
body { cursor: crosshair}
-->
</style>
INSERTAR UNA IMAGEN, CENTRADO, Y CON MOVIMIENTO
<marquee><center><h2><img src="AQUI VA EL URL DE LA IMAGEN"/></marquee></h2>
 INSERTAR UN TEXTO, CENTRADO, CON COLOR ROJO
<h2><p align="center"><font color="red">Paola Sandoval </font> </h2>
 INSERTAR UN TEXTO, ALINEADO A LA DERECHA, CON COLOR AZUL
<h2><p align="right"><font color="blue">Ambato 2013</font></h2>

<h1><blink>... EMPEZAMOS ....</ blink></h1>

INSERTAR UN ARCHIVO .GIF Y ALINEARLO A LA DERECHA
<p align="right"><img src="C:\Users\Rolando Jacome\Desktop\banner\banner-pequeños.gif" alt="descripción" />
PARA HACER UN SALTO DE LÍNEA
</p>

 <script src="http://h1.flashvortex.com/display.php?id=2_1327663652_33696_495_18719_500_100_10_1_76" type="text/javascript"></script>

</p>
ENLAZAR UN ARCHIVO CON UN TEXTO, CENTRADO, PARPADEANDO Y CON COLOR AZUL
<a href="https://www.google.com.ec/" target="_blank"><center><h2><font color="blue">INGRESA A GOOGLE PARA RELIZAR UNA BUSQUEDA</font></a></h2>
CÓDIGO JAVASCRIPT PARA HACER EFECTO LLUVIA DE CORAZONES
<script language='javascript' type='text/javascript'>
//<![CDATA[
// Script original de Eloi Gallés Villaplana adaptado por -truco95.jimdo.com
var numero = 8
var velocidad = 40
var imagenamor = " http://i1041.photobucket.com/albums/b416/conanaz72/GIF/heart.gif "
var ns4arriba = (document.layers) ? 1 : 0
var ie4arriba = (document.all) ? 1 : 0
var dombrowser = (document.getElementById) ? 1 : 0
var dx, xp, yp
var am, stx, sty
var i, doc_ancho = 1024, doc_alto = 768
function amor() {
                establece_dimensiones()
                dx = new Array()
                xp = new Array()
                yp = new Array()
                am = new Array()
                stx = new Array()
                sty = new Array();  
                for (i = 0; i < numero; ++ i) {                      
dx[i] = 0                      
xp[i] = Math.random()*(doc_ancho-50)                      
yp[i] = Math.random()*doc_alto                      
am[i] = Math.random()*20                      
stx[i] = 0.02 + Math.random()/10                     
sty[i] = 0.7 + Math.random()                      
if (document.layers) {                                 
if (i == 0) {                                                      
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ")                                                      
document.write("top=\"15\" visibility=\"show\"><img src=\"")                                                           
document.write(imagenamor + "\" border=\"0\"></layer>")                                 
} else {                                                 
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ")                                                  
document.write("top=\"15\" visibility=\"show\"><img src=\"")                                                        
document.write(imagenamor + "\" border=\"0\"></layer>")                                
}
                          } else if (document.all
|| document.getElementById) {                                 
if (i == 0) {                                                 
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ")                                                 
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ")                                                
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"")                                                        
document.write(imagenamor + "\" border=\"0\"></div>")                                
} else {                                                 
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ")                                               
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ")                                                
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"")                                                       
document.write(imagenamor + "\" border=\"0\"></div>")                                 
}
                          }
     }
                 corazon()
}
function corazon() {
                for (i = 0; i < numero; ++ i) {
yp[i] += sty[i];
if (yp[i] > doc_alto) {
xp[i] = Math.random()*(doc_ancho-am[i]-30)
yp[i] = 0
stx[i] = 0.02 + Math.random()/10
sty[i] = 0.7 + Math.random()
establece_dimensiones()
}
dx[i] += stx[i];
if ( document.all ) {
var imagen = eval("dot" + i )
imagen.style.posLeft = xp[i] + am[i]*Math.sin(dx[i])
imagen.style.posTop = yp[i]
}
else if ( document.layers ) {
var imagen = eval("document.dot" + i)
imagen.left = xp[i] + am[i]*Math.sin(dx[i])
imagen.top = yp[i]
}
else if ( document.getElementById ) {
var imagen = document.getElementById( "dot" + i)
imagen.style.left = xp[i] + am[i]*Math.sin(dx[i]) + 'px'
imagen.style.top = yp[i] + 'px'                           
}
                }
                setTimeout("corazon()", velocidad)
}
function establece_dimensiones() {
                if (self.innerHeight) {
doc_ancho = self.innerWidth - 50
doc_alto = self.innerHeight - 21
                } else if (document.documentElement &&
document.documentElement.clientHeight) {
doc_ancho = document.documentElement.clientWidth
doc_alto = document.documentElement.clientHeight - 25
                } else if (document.body) {
doc_ancho = document.body.clientWidth                  
doc_alto = document.body.clientHeight - 25
                }
}
//]]>
</script>
<script language='javascript' type='text/javascript'>
amor()
</script>

<center><h2><font color="RED">INGRESE AL FACEBOOK PINCHANDO EN EL ÍCONO</font></h2>

ENLAZAR UN ARCHIVO CON UNA IMAGEN, CENTRADO, Y CON COLOR AZUL
<a href="https://www.facebook.com/" target="_bank">
<AQUI VA EL URL DE LA IMAGEN" /></a>
<!-- fin codigo link -->
 PARA HACER UN SALTO DE LÍNEA-->
</p>
PROGRAMA HECHO EN FLASH PARA UN RELOJ DIGITAL Y FECHA
<marquee><script src="http://h1.flashvortex.com/display.php?id=2_1327664496_45855_493_18719_276_116_9_1_76" type="text/javascript"></script> </marquee>
CÓDIGO PARA INSERTAR UN CALENDARIO PREDISEÑADO
</tr>
</table>
<script type="text/javascript">
var clock24_48434 = new clock24('48434',-180,'%M / %dd / %yyyy %W %HH:%nn:%ss %P','es');
clock24_48434.daylight('AR'); clock24_48434.refresh();
</script>
<SCRIPT LANGUAGE="JavaScript">
<!-- Mas scripts en http://www.creatupropiaweb.com -->
<!-- Begin
var now = new Date();
var month_array = new Array("january","february","march","April","May","June","July","August","September","October","November","December");
document.write("<form name=date_list><table bgcolor=silver><tr><td>");
document.write("<select name=month onchange=change_month(this.options.selectedIndex)>");
for(i=0;i<month_array.length;i++)
{
 if (now.getMonth() != i)
 {document.write ("<option value="+i+">"+month_array[i]);}
 else
 {document.write ("<option value="+i+" selected>"+month_array[i]);}

}
document.write("</select>");
document.write("</td><td>");
document.write ("<select name=year onchange=change_year(this.options[this.options.selectedIndex])>");
for(i=1950;i<3000;i++)
{
 if (now.getYear() != i)
 {document.write("<option value="+i+">"+i);}
 else
 {document.write("<option value="+i+" selected>"+i);}
}
document.write("</select></td></tr><tr><td colspan=2><center>");

document.write("<table bgcolor=white border=0 cellspacing = 0 cellpading = 0 width=100%><tr bgcolor=gray align=center>");
document.write("<td><font color=silver>M</font></td><td><font color=silver>T</td><td><font color=silver>W</td><td><font color=silver>T</td><td><font color=silver>F</td><td ><font color=silver>S</td><td ><font color=silver>S</td>");
document.write("</tr><tr>");
for(j=0;j<6;j++)
{
 for(i=0;i<7;i++)
 {
   document.write("<td align=center id=d"+i+"r"+j+"></td>")
 }
 document.write("</tr>");
}

document.write("</table>");

document.write("</center></from></td></tr></table>");

var show_date = new Date();

function set_cal(show_date)
{
begin_day = new Date (show_date.getYear(),show_date.getMonth(),1);
begin_day_date = begin_day.getDay();
end_day = new Date (show_date.getYear(),show_date.getMonth()+1,1);
count_day = (end_day - begin_day)/1000/60/60/24;
input_table(begin_day_date,count_day);
}
set_cal(show_date);

function input_table(begin,count)
{
init();
j=0;
if (begin!=0){i=begin-1;}else{i=6}
for (c=1;c<count+1;c++)
{
 colum_name = eval("d"+i+"r"+j);
 if ((now.getDate() == c)&&(show_date.getMonth() == now.getMonth())&&(show_date.getYear() == now.getYear())) {colum_name.style.backgroundColor = "blue";colum_name.style.color = "white";};
 colum_name.innerText =  c;
 i++;
 if (i==7){i=0;j++;}
}
}

function init()
{
for(j=0;j<6;j++)
{
 for(i=0;i<7;i++)
 {
 colum_name = eval("d"+i+"r"+j);
 colum_name.innerText =  "-";
 colum_name.style.backgroundColor ="";
 colum_name.style.color ="";
 }
}
}

function change_month(sel_month)
{
show_date = new Date(show_date.getYear(),sel_month,1);
set_cal(show_date);
}

function change_year(sel_year)
{
sel_year = sel_year.value;
show_date = new Date(sel_year,show_date.getMonth(),1);
set_cal(show_date);
}
//  End -->
</script>
CÓDIGO EN FLASH PARA INSERTAR UN BANNER GRACIAS POR SU VISITA
<script src="http://h1.flashvortex.com/display.php?id=2_1310737666_21257_624_18719_398_76_9_1_82" type="text/javascript"></script>



No hay comentarios:

Publicar un comentario

Suscribirse a: Entradas (Atom)