dominios y alojamiento web en hostalia

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

Nota: En la disputa por ser el navegador más usado, en la actualidad otros productos vienen tomando fuerza como Chrome, el navegador de Google. Para el que le interese este tema y conocer datos reales sobre los porcentajes de uso de cada navegador, se puede leer uno de los informes que publicamos periódicamente, como el ranking de uso de los navegadores en noviembre de 2010.

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

Compartir en redes sociales

Comentarios
Fueron enviados 37 comentarios al artículo
14 comentarios no revisados
23 comentarios revisados:
Por: victor alvarez
15/8/2003
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/2003
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/2004
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: Tony
17/5/2005
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/2005
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/2007
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/2007
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/2007
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/2009
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/2009
Esta re buena la pagina,explican muy bien,estoy empesando a ver HTML y me esta sirviendo mucho,gracias...
codigos
Por: jose
17/4/2009
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/2009
Como hago para que el encabezado parpadee?
pag web
Por: bea
21/10/2009
no me gusta porq no dan codigos para crear una pag web en html
Menú Buscar
Por: Tom
19/11/2009
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/2009
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/2010
seria de gran ayuda paa mejorar tu producto que coloques el como cambiar la estencion del archivo ; para qeu quede .html
saludos
Por: JOSE VITTAR
12/5/2010
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/2010
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
Super
01/4/2011
mis mil respetos a todas las personas que llevan a cabo esta organizacion gracias a ustedes podemos conocer diferentes conceptos de una manera muy facil y divertida .<b>graciasssssss</b>

fredii
gracias totales
17/4/2011
muchas gracias estoy adentrandome en este mundo del desarrollo web
y estos son uno tutos que estan enseñandome a gatear dentro
de este extenso tema

gracias

Pusu
Gracias!
02/5/2011
Hola Miguel!Como todos los ciudadanos de este país yo también quiero reciclarme y aprender cosas nuevas y gracias a ti y a tu esfuerzo considerable dedicado al html y otros trabajos relacionados con la web y el internet ,gente como yo que no tenemos ya muchas perspectivas en el campo laboral tenemos gracias a ti perspectivas nuevas de aprender algo tan útil como html.Gracias de corazón.llevo mucho tiempo siguiendo tu trabajo y ahora me e decidido aprender html y luego quiero aprender javascript.gracias otra ves por todo.Saludos desde La Cenia!

texar
primeros pasos
17/5/2011
Estoy muy entusiasmado con este curso, creo que voy a aprender mucho acerca del
codigo HTMIL
Configuracion HTML?¿
29/6/2011
Buenos días, aclaro 1º que soy sumamente novata, y con tuto de aca y tuto de alla hice una pagina con carrito de comparas y demas .. peor ahora q estoy en la meta final tengo un problemon con el tamaño de la pagina el alto, no tengo forma de arreglarlo, si alguien me pudiera ayudar; se puede ver en: www.chucheriasvendo.com.ar.Creo que el problma no es la imagen de fondo porque se la saque y hace lo mismo.Perdon por mi ignorancia.Saludos y muchas gracias.

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
Donaciones
Si piensas que te hemos ayudado y merecemos tu apoyo económico...