Si deseas aprender a crear una página web desde cero, primeramente debes conocer el lenguaje HTML (HyperText Mark-up Language, en inglés) o lenguaje de marcado hipertextual, que no es propiamente un lenguaje de programación sino más bien un sencillo lenguaje basado en etiquetas, como explicaremos a continuación.
A su vez, cada etiqueta puede contener atributos, cuyos valores es recomendable que se indiquen entre comillas, como veremos más adelante.
En el presente curso de HTML aprenderás a usar la versión HTML 4. Próximamente crearemos un curso con las novedades que traerá la versión HTML 5, que aporta grandes e importantes novedades pero que a fecha de hoy está fase de implantación por parte de los diferentes navegadores web.
Y como supongo que estarás ansioso por aprender a crear una página web sin perder tiempo en cuestiones innecesarias, esto es todo lo que necesitas saber de momento: no vamos a entrar en preámbulos acerca de la historia de dicho lenguaje, entre otras cuestiones.
En el presente curso se explica el uso de algunas etiquetas y atributos que se encuentran desaconsejados u obsoletos en HTML 4 recomendándose usar en su lugar Hojas de Estilo en Cascada (Cascading Style Sheets) o CSS, pero debido a que nos estamos centrando exclusivamente en HTML es recomendable conocerlas.
Relacionado: [ Tutorial de CSS ]
Aparte de HTML existe también XHTML, que no es un lenguaje de etiquetas diferente ni tampoco otro lenguaje basado en el primero, sino un conjunto de especificaciones para escribir código HTML que sea interpretado del mismo modo por todos los navegadores web.
Algo más adelante lo explicamos con más detalle.
Para crear una página web no necesitas más que un simple editor de textos como el Bloc de Notas incluido en Windows. Lo puedes abrir desde: Inicio, Todos los programas, Accesorios, Bloc de notas:
Sin embargo y precisamente debido a su simplicidad puede no resultarte lo más cómodo, así pues te recomiendo que descargues NotePad++ (aunque la web está en inglés, este programa gratis puede instalarse seleccionando el idioma español).
Para descargar NotePad++ desde su página web haz clic en Download the current version y después en el enlace a la última versión disponible:
Finalmente, si deseas probar el código HTML de los ejemplos, puedes copiarlo rápidamente al Portapapeles del sistema haciendo clic en la opción Copy que se mostrará en la parte superior derecha cuando te sitúes sobre él, para después pegarlo en el archivo de ejemplo que hayas creado:
Debes guardar cada ejemplo de página web con extensión .htm o .html, y después hacer doble clic sobre el archivo para verla en tu navegador web.
En el siguiente código HTML puedes ver la estructura básica de una página web. Crea un archivo ejemplo1.html y cópialo (sin los números de línea, sitúa el cursor sobre el ejemplo y haz clic con el botón izquierdo en la opción Copy que se mostrará).
<html>
<head>
<title>Mi primera página WEB</title>
</head>
<body>
<!-- Esto es un comentario -->
¡ Mi primera página web !
</body>
</html>
Para insertar comentarios (que no serán visibles) al visualizar la página web, los escribiremos entre <!-- y -->.
Como puedes observar, el contenido principal de esta página web se halla entre la etiqueta de apertura <html> y su correspondiente etiqueta de cierre </html> (que contiene una '/'), y que hay dos secciones principales contenidas entre las etiquetas <head> y <body> (y sus respectivas etiquetas de cierre).
Dentro de <head> se ponen etiquetas HTML con las que se definen configuraciones generales de la página: en nuestro jemplo tenemos la etiqueta <title> que indica el título de la página a mostrar en el navegador web.
En la etiqueta <body> pondremos el contenido de la página (texto, imágenes, tablas, etc.).
Tanto dentro de <head> como de <body> pueden haber otras etiquetas, que veremos más adelante.
En la siguiente imagen puedes ver cómo se vería el código HTML mostrado en un navegador:
Observa que en el cuerpo de la página web está el texto que hemos escrito en la etiqueta <body>, y en la pestaña el de la etiqueta <title> (en algunos navegadores podrá verse en la barra de título de la ventana).
Para más información sobre la correcta estructura de una página web consulta la siguiente sección sobre <doctype>.
Relacionado: [ Referencia HTML 4.01 / XHTML 1.0 ]
La etiqueta <head> puede contener diversa información sobre la página web, indicando al navegador qué tipo de documento es, autorizando el acceso a los robots de los buscadores, etc.
A continuación describiremos algunas de las etiquetas HTML más importantes que puede contener.
Con la etiqueta <title> indicamos el título de la página, que será mostrado en la barra de título o en la pestaña del navegador web, en la que se haya cargado la página web, así como en los resultados devueltos por los buscadores web.
<html>
<head>
<title>Página WEB de ejemplo: configurar la página</title>
</head>
<body>
¡ Hola mundo !
</body>
</html>
Con la etiqueta meta ofrecemos información sobre la página a los buscadores y los navegadores web.
<html>
<head>
<title>Página WEB de ejemplo: configurar la página</title>
<meta name="keywords" content="programacion web, HTML, CSS, JavaScript, PHP" />
<meta name="description" content="Aprende a programar páginas WEB profesionales" />
</head>
<body>
¡ Hola mundo !
</body>
</html>
En la etiqueta del ejemplo con el atributo name="keywords" se definen las palabras clave de la página web. Se recomienda como mucho escribir unos 60 caracteres.
En la etiqueta con el atributo name="description" debemos escribir un texto descriptivo de la página web, no debiendo contener más de 160 caracteres. Este texto aparecerá en los resultados devueltos por los buscadores web.
Aquí tienes otros ejemplos útiles:
<html>
<head>
<title>Página WEB de ejemplo: configurar la página</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="refresh" content="200" />
<meta http-equiv="refresh" content="10; url=http://www.google.com" />
<meta name="robots" content="all" />
</head>
<body>
¡ Hola mundo !
</body>
</html>
En la primera etiqueta se define el juego de caracteres usado en la página web como ISO-8859-1 (en español).
En la segunda etiqueta especificamos al navegador web que no debe guardar caché de la página.
En la tercera etiqueta indicamos que la página web debe recargarse tras 200 segundos, y en la cuarta que a los 10 segundos el navegador web debe redirigirnos a la URL indicada.
Por último, en la quinta indicamos que la página web puede ser indexada por todos los buscadores web.
Los atributos description y keywords se deben definir para cada página web individualmente (no pongas lo mismo en todo el sitio web).
¿Cómo se hace esto en...?: [ Etiqueta META ] - [ Codificación de caracteres ]
Mediante la etiqueta doctype (que debe ponerse antes de la etiqueta <html>) se informa al navegador web de la versión de HTML/XHTML de la página, haciendo referencia a una DTD ('Document Type Definition' o Declaración de Tipo de Documento en español) que especifica las reglas para construir el documento de modo que los navegadores web lo muestren correctamente.
En caso de no definir ningún Doctype el navegador web entrará en modo quirks (de compatibilidad), pero no todos lo aplican del mismo modo con lo cual es posible que no se visualice del mismo modo en todos ellos.
A continuación describimos los diferentes Doctype utilizados para indicar la versión de HTML usadas.
* HTML 4.01 Strict: contiene todas las etiquetas HTML y sus atributos, NO INCLUYENDO elementos desactualizados o presentacionales (como la etiqueta <font>), no permitiendo tampoco los frames con la etiqueta <frameset>.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
* HTML 4.01 Transitional: contiene todas las etiquetas HTML y sus atributos INCLUYENDO elementos desactualizados o presentacionales (como la etiqueta <font>). No admite el uso de frames con la etiqueta <frameset> .
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
* HTML 4.01 Frameset: como el anterior, pero admite el uso de frames con la etiqueta <frameset> y <frame>.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd" >
Ejemplo de definición de página como HTML 4.01 Transitional:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
<html>
<head>
<title>Página WEB de ejemplo: configurar la página</title>
</head>
<body>
<p>¡ Hola mundo !</p>
</body>
</html>
Actualmente es recomendable utilizar un Doctype que indique que la página web cumple con las especificaciones XHTML. Las explicamos a continuación.
* XHTML 1.0 Strict: indica que la página web sigue las normas de XHTML, no permitiéndose el uso de etiquetas HTML ni atributos que se encuentren desaconsejados (deprecated) ni obsoletos (obsolete), siendo también completamente estricto en cuanto al uso de las especificaciones para escribir código XHTML válido.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
* XHTML 1.0 Transitional: indica que la página web cumple las especificaciones XHTML pero siendo más permisivo que el anterior.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
* XHTML 1.0 Frameset: como el anterior, pero admite el uso de frames con las etiquetas <frameset> y <frame>.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
De entre los anteriores Doctype es recomendable utilizar XHTML 1.0 Transitional para indicar que la página cumple con la especificación XHTML y sea mostrada del mismo modo por los diferentes navegadores web.
Veamos un ejemplo de definición de página como XHTML 1.0 Transitional (al definir alguno de los tipos XHTML hay que agregar un atributo a la etiqueta de apertura <html> y una etiqueta <meta> en la sección <head> de la página, con la que indicaremos que se utilizará el juego de caracteres 'UTF-8'):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Página WEB de ejemplo: configurar la página</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p>¡ Hola mundo !</p>
</body>
</html>
En el siguiente punto explicamos las pautas que debes seguir si quieres escribir código XHTML válido.
En la mayoría de ejemplos del presente curso no definimos ningún Doctype por no ser necesario para su correcto funcionamiento, pero una vez más te recomendamos que utilices XHTML 1.0 Transitional y escribas código XHTML válido.
Relacionado: [ Doctype ]
Algunas consideraciones a tener a cuenta a la hora de escribir código XHTML válido son:
- Define un Doctype de tipo XHTML 1.0 Strict o XHTML 1.0 Transitional (recomendado) quedando la estructura básica de la página web tal y como se muestra al final del punto anterior.
- Aparte de definir el juego de caracteres de la página web como UTF-8 (mediante la etiqueta <meta> en la estructura anterior) también deberás guardar el archivo utilizando dicho juego de caracteres (para que se no se muestren caracteres extraños en lugar de tildes y otros símbolos).
Para definir el juego de caracteres de un archivo deberás seleccionarlo en el momento de guardarlo (aunque dependiendo del editor que uses es posible que haya que hacerlo de otro modo).
-
Es muy importante que tengas en cuenta que toda etiqueta HTML debe tener una apertura y un cierre, y que deben estar en el orden correcto.
Algunas etiquetas como <img/> o <br/> constan de un sólo tag, cerrándose directamente con una '/' al final de la misma.
En los ejemplos de las secciones anteriores puedes observar que la etiqueta <title> se encuentra anidada dentro de <head>, y ésta a su vez está dentro de la etiqueta principal <html>, junto con <body>: para que la estructura de la página web sea correcta no puedes cerrar una etiqueta antes de haber cerrado las que estén anidadas dentro de ella.
No utilices etiquetas HTML consideradas como desaconsejadas (deprecated) u obsoletas (obsolete).
Normalmente son consideradas de dicho modo debido a su antigüedad y a que es recomendable utilizar CSS en su lugar.
- Las etiquetas y sus atributos deben escribirse en minúsculas.
- El valor de los atributos (los veremos más adelante) debe estar entre comillas, por ejemplo: <body text="yellow" ... >.
- En una página web no puede haber más de una etiqueta HTML con un mismo valor en el atributo id (permite identificarlas para acceder a ellas desde otros lenguajes), el cual usaremos en nuestros cursos de informática gratis de Hojas de Estilo CSS y Javascript.
Existen etiquetas HTML de tipo block que al ser usadas crean una nueva línea (como por ejemplo: <p>, <h1>, <div>, etc.), y otras de tipo inline que no (como <a>, <b>, <i>, <span>, <form>...): no pongas elementos block dentro elementos inline, aunque sí es posible poner elementos block dentro de otros elementos block.
En los enlaces de la parte inferior puedes consultar qué elementos HTML y atributos se encuentran desaconsejados.
En el siguiente ejemplo se muestra cómo erróneamente se ha cerrado antes la etiqueta <head> que la etiqueta <title> (que está dentro de ella):
<html>
<head>
<title>Mi primera página WEB</head>
</title>
<body>
<img id="imag1" src=imagen1.jpg />
<img id="imag2" src="imagen2.jpg" >
<img id="imag2" src="imagen3.jpg" />
</body>
</html>
Puedes ver cómo se han cerrado correctamente todas las etiquetas HTML img con una '/' al final, menos la segunda.
Asimismo, no se ha puesto entre comillas el nombre de la primera imagen en el atributo src, lo cual es también incorrecto.
Otro error es que la segunda y la tercera imagen tienen el mismo valor en el atributo id.
Las etiquetas HTML comparten algunos atributos comunes:
- name: nombre del elemento, que salvo casos excepcionales (como en caso de usar componentes de tipo input radio) debe ser único para un elemento.
- id: identificador del elemento, que debe ser único para cada elemento.
- title: especifica información extra
- class: indica una clase CSS que le será aplicada.
- style: aplica estilos CSS.
Normalmente el atributo name se usa en formularios y sus componentes, mientras que para otros elementos HTML se usa id para identificarlos.
Relacionado: [ Validar código HTML ] - [ Doctype ] - [ Etiquetas block ] - [ Etiquetas inline ] - [ Etiquetas HTML ] - [ Atributos HTML ]
