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.

Solo hemos comenzado el Manual de HTML, pero ya podemos hacer un primer ejemplo completo y, sobre todo, correcto. Con lo que sabemos ya casi estamos listos para practicar, aunque todavía tenemos que adquirir algún conocimiento adicional.

No te olvides ahora de practicar, así que usa tu editor de código preferido y crea por tu cuenta los ejercicios que vamos a ir realizando. Recuerda que la práctica es la mejor vía para afianzar los conocimientos.

En el anterior artículo ya adelantamos la forma de un documento HTML básico, con sus etiquetas de cabecera y cuerpo. No obstante, aún tenemos que agregar alguna cosa adicional para que todo funcione de la mejor manera.

Doctype

Reconozco que el "doctype" no es la etiqueta más intuitiva, pero debemos mencionarla ahora porque es el inicio de cualquier archivo HTML. Viene heredada del XML, que es un lenguaje precursor del HTML. En el pasado la etiqueta Doctype era bastante más compleja, pero afortunadamente con la llegada de HTML5 se simplificó para quedar simplemente como esto:

<!DOCTYPE html>

No pretendas entenderla mucho, piensa en ella como una ceremonia que debes realizar (algo que debes escribir) al inicio de todo documento HTML.

Juego de caracteres

El juego de caracteres es otro asunto que puede parecer un poco complejo, pero que tenerlo claro desde el principio te ayudará a no pasar en el futuro por diversos problemas.

Este juego de caracteres, o codificación, depende del sistema operativo que estás usando para crear tu archivo HTML. Mientras que unos sistemas como Linux o Mac usan por defecto un juego de caracteres llamado UTF-8, en Windows se usa de manera predeterminada otro juego de caracteres llamado ISO-8859-1. Parece una información un tanto técnica y fuera de necesidad para introducir ahora que estamos comenzando, pero insistimos que nos ahorrará frustraciones al dar los primeros pasos, pero sobre todo en un futuro.

En HTML5 el juego de caracteres a usar es siempre UTF-8. Por lo que tendremos que tener especial atención si somos usuarios de Windows, para asegurarnos que usamos la codificación correcta. Es otro de los motivos por los que en pasados artículos recomendábamos Brackets o Atom como editores de código, ya que éstos trabajan siempre en UTF-8, independientemente del sistema operativo. Si no estás usando uno de esos editores, te recomendamos hacerlo ahora y si te empeñas en trabajar con tu propio editor infórmate sobre el juego de caracteres que produce y si existe alguna opción o configuración que te asegure usar siempre UTF-8.

Para definir qué juego de caracteres estamos usando en un documento HTML se tiene que escribir una etiqueta en la cabecera de la página, en el HEAD, llamada META. Realmente las etiquetas META las trataremos más adelante, porque sirven para varias cosas interesantes. Pero de momento nos aseguraremos que tenemos esta etiqueta en el head.

<meta charset="UTF-8">

Igualmente, no pretendemos hablar mucho de esta etiqueta por el momento, solo que te la tomes como un contrato a cumplir para tener un documento correcto. Te ampliamos esta información en el artículo Documento básico HTML5.

Un documento HTML correcto

A continuación tienes un documento básico con las etiquetas necesarias para comenzar con buen pie.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Mi primera página</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>

Puedes copiar y pegarlo en tu editor de código. 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 líos.
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 a la hora de interpretar un documento. Desgraciadamente, los resultados de nuestro código pueden cambiar de uno a otro por lo que resulta aconsejable visualizar la página en varios clientes web. Generalmente se usan Chrome, 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, Google Chrome acapara la mayoría de usuarios y Firefox e Internet Explorer/Edge están relegados a un segundo plano. Esto no quiere decir que lo debemos dejar totalmente de lado ya que incluso una minoría que puede proporcionarnos puede resultar muy importante para nosotros.

Ten en cuenta que el archivo debe tener codificación UTF-8, como hemos mencionado antes. Una vez guardado el fichero con extensión .html, para abrir la página en el navegador, simplemente tienes que acceder a la carpeta donde has guardado el archivo y darle un doble clic. Se trata de una tarea sencilla que estamos seguros que podrás realizar. Si no lo consigues, fíjate que la mayoría de los navegadores tienen un menú. En el menú de "Archivo" de tu navegador preferido encontrarás una opción como "Abrir archivo", desde donde también podrás abrir una página realizada por ti con tu editor de código.

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

Pantallazo de la primera página

Por otro lado, los elementos que colocamos entre la etiqueta BODY, y su cierre, se pueden ver en el espacio reservado para el cuerpo de la página.

Si ahora hacéis click con el botón derecho sobre la página y elegís "Ver código fuente de la página" (o View page source) veréis como en una ventana accesoria aparece el código de nuestro archivo HTML. 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, en los próximos capítulos de este manual de HTML.

Autor

Rubén Alvarez

Rubén es doctor en química y programador aficionado con experiencia en PHP.

Compartir

Comentarios

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.

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

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.

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.

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

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.

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.

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.

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

Lidia

13/3/2009
Esta re buena la pagina,explican muy bien,estoy empesando a ver HTML y me esta sirviendo mucho,gracias...

jose

17/4/2009
codigos
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.

Sergio

20/5/2009
Pregunta
Como hago para que el encabezado parpadee?

bea

21/10/2009
pag web
no me gusta porq no dan codigos para crear una pag web en html

Tom

19/11/2009
Menú Buscar
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.

felix

16/12/2009
Problemas al cargar html desde bloc de notas y subirlo a mozilla.
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.

parra

23/2/2010
cambio de la estencion
seria de gran ayuda paa mejorar tu producto que coloques el como cambiar la estencion del archivo ; para qeu quede .html

JOSE VITTAR

12/5/2010
saludos
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...

gif

25/7/2010
Mi primera pagina resumen
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

Gerardo Jose

27/8/2010
Excelente !!!
Gracias por ser tan explicativos, es un curso espectacular !!!!!!!!!.
Estoy empezando y entiendo todo, eso me entusiasma.
No es como otros cursos que te aburren de tanto no entender.
Gracias

jair giraldo

16/9/2010
gracias
Este manual esta muy bien realizado para las personas que poco saben de este tema html.

bn,hikykukjuy

02/10/2010
gonorre
qur gonorrea

popis

27/10/2010
hi
=p jajaja los amo

Alfredo Flores

11/11/2010
Felicitaciones
Sinceramente los felicito por estas ayudas que nos dan, ya que no todos tenemos la facilidad para costearnos estudios.

Felicidades y gracias.

fantasmita2jh

01/4/2011
Super
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

17/4/2011
gracias totales
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

02/5/2011
Gracias!
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

17/5/2011
primeros pasos
Estoy muy entusiasmado con este curso, creo que voy a aprender mucho acerca del
codigo HTMIL

maria

22/6/2011
bolc de notas
para k sirve el bolc de notas

grodriguez03

29/6/2011
Configuracion HTML?¿
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.

sarah

12/7/2011
urge.....
hola a todos los videntes de este manual saben tengo un examen final de una paginaweb creen que este manual me sirva ya ke necesitooo ayudaaaa .....graxias por sus respuestas

anonimo

28/10/2011
muy ilustrativa para iniciarse
muy ilustrativa para iniciarse

llavi

10/4/2012
ayuda
hola miguel, estoy intentando llevar acabo tus tutoriales pero no puedo, nose por que , cuando loguardo y luego lo abro no puedo me indica con que pragramas lo quieres abrir,( por sierto tengo el explore)despues de darle se abre justamente lo que he escrito en el bloc. ya que si me he perdido.

Guido

19/7/2012
Mi primera pagina en IE9
Hola! estoy iniciando este manual de HTML y al intentar probar mi_pagina.html en Internet Explorer 9 me sale en blanco!. Es cierto que este manual fue diseñado a principios de 2000 pero mi consulta es para saber nada mas, debe ser por incompatibilidades con el nuevo estandar seguramente. Igusalmente lo voy a probar en versiones mas viejas, Saludos! Excelente el manual y el sitio!

eliz

14/7/2013
despliegue mozilla
hola soy nueva hice todo lo q decis en la pagina mi navegador es mozilla y desplego otros caracteres mas lo de la pagina no reconoce el mozilla este codigo?

elizabeth

14/7/2013
despliegue en mozilla
Este lugar es ideal para aprender, pero a leer, antes hice una pregunta de principiante q soy y aca mismo ya encontre la solucion ahora me pregunto como solucionar esos problemas al editar en wordpad gracias

mmv121314

22/9/2013
Problema con acentos
Cuando quiero ver mi trabajo en google Croome me aparece así
Bienvenido,

Estás en la página Comida para Todos.

Aquí aprenderás recetas fáciles y deliciosas.

¿Cuál es la caus?

Adriana Linares

13/7/2015
Agradecimiento
Excelente manual! Muchas gracias por estas herramientas!

RikiGuadiana22

15/10/2015
ERROR DE VISUALIZACION
ESTOY ASIENDO UNA PAGINA WEB PERO TENGO UN DEBUG QUE NO PUEDO LOCALIZAR AL MOMENTO DE EJECUTAR EL ARCHIVO NO PUEDO VER EL CONTENIDO QUE TENGO EN EL BODY

TUCHEMITA16

22/4/2016
MUY CORECTO
ME PARESE UNA GRAM PAHGINA ONDE PUEDES APRRENDE MUSO XD DDD

TUCHEMITA16.2

22/4/2016
MUY BASURITA
HESTA PAJINA ES UNA FUCKIN BASURITA MY BODY NO ESTA PREPARADO PARA TANTA CAKITA

emilio

09/1/2017
hola
no le entiendo a esto expliquenme

emilio flores avila

09/1/2017
nada
saludos a los ovnis soy extraterrestre esto es mucha tecnologia para mi .aya en mi planeta estamos muy atrasados

TU MADRE

18/4/2017
Opinión
No me gusta mucho esta página, porque no encuentro lo que quiero, como se crea un HTMl??
-Inútiles.

Pilar

17/10/2017
Duda etiqueta
<html lang="en">; hola esta etiqueta se refiere al idioma en el que está escrita la página? Gracias y saludos; muy útil todo el sitio.