
	Portada \| Monotemáticos \| Secciones \| Desarrolladores \| Comunidad \| Servicios \| Servicios profesionales \| RSS

	DesarrolloWeb.com > Manuales > Manual de HTML

Registrarse | Vuestras páginas | Foros del web | Lista de correo | Boletín de novedades

Generador METAs | Compras | Busca cursos

Desarrollo Freelance | Buscar proyectos | Buscar profesionales | Solicitar desarrollo

Tu primera página

Vamos a ver cómo se hace una página muy sencilla en HTML, que sirva de práctica a los debutantes.

24/9/01 - 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.

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

Seguir navegando a partir aquí:

+ 1 manual relacionado
+ 2 categorias relacionadas
+ 3 comentarios (Añadir)
+ 24 comentarios no revisados

Autoría, licencia y acciones sobre este artículo

Informe de Rubén Alvarez*

Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

* Para consultas técnicas utilizar la lista de correo.

Versión imprimible del artículo
Enviar artículo por e-mail
Publicar un comentario del artículo

Manuales relacionados con este artículo

Dentro de Manual de HTML

Siguiente: formato de párrafos en HTML

Anterior: Sintaxis del HTML

< Indice de Manual de HTML

Categorias relacionadas

A través de las categorías de nuestro directorio se pueden encontrar otro tipo de recursos relacionados con este artículo:

+ Entrar en HTML
+ Entrar en Manuales de HTML

Comentarios de los visitantes

Añadir un comentario del artículo

Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar.

Se muestran 3 comentarios revisados

Comentario de 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.

Comentario de 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

Comentario de 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>

</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>

</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">

</script>

</body>
</html>

__________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

4 CODIGO

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

<html>
<head>


<SCRIPT language="Javascript">

</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>


<BODY onLoad="window.focus();init();" onResize="document.location.href=document.location.href;" bgColor="#000000" text="#FFFFFF" onUnload="halt();" link="#FFFF00" vlink="#00FF00">


<SCRIPT language="Javascript">

</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.



<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....

Añadir un comentario del artículo

Comentarios sin revisar

Añadir un comentario del artículo

Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.

Se han encontrado 24 comentarios sin revisar

Ver los comentarios no revisados
Añadir un comentario del artículo

Enlaces:

Maestrosdelweb

Ir arriba

Manuales relacionados
+	Manual de HTML

Categorías
+	HTML
+	Manuales de HTML

Lectura recomendada

+ HTML 4

Compra este libro en Agapea, la librería urgente a domicilio.

Tienda DesarrolloWeb

		DesarrolloWeb.com \| Copyright \| Anunciese \| Acerca de \| Datos legales \| Contacta \| Por GuiarteMultimedia

Alojamiento web