¿Como hacer una pagina web con HTML?
Qué es el HTML (HyperText Markup Language)
HTML son las siglas de “HyperText Markup Language”, lo que se puede traducir en español a “Lenguaje de marcado de hipertexto (texto con enlaces)”.
Eso quiere decir que permite “marcar” el texto mediante unas etiquetas especiales que le añaden semántica.
Por ejemplo:
¿Qué ha pasado aquí? Pues que simplemente añadiendo la etiqueta <h1> le hemos añadido una información semántica muy útil a la frase que indica que esto no es una frase cualquiera sino un título (fíjate en la “h” de “header” en inglés) de nivel 1.
Esto es muy útil porque, por ejemplo, le sirve al navegador web para aplicar ciertas pautas de diseño que faciliten la lectura como diferentes tamaños de letra a los títulos según su nivel jerárquico, de modo que destaquen en la lectura.
Otro ejemplo es el buscador de Google. Si alguien busca, por ejemplo, “cómo hacer una página web”, al ver que son palabras que coinciden con el título principal de la página, esto le indicará a Google que esa página tiene que ver probablemente mucho con lo que el usuario está buscando.
Como ves con estos dos simples ejemplos, el marcado que proporciona HTML permite hacer muchas más cosas con estos contenidos que con un texto normal y corriente sin marcado. Ese es el propósito básico del HTML, aparte de permitir enlazar las páginas entre sí y crear así la “web” de Internet.
Conceptos HTML fundamentales: Etiquetas, elementos y atributos HTML
A lo largo del tiempo se han desarrollado diferentes versiones de HTML siendo la más usada la versión HTML 4.01. Poco a poco está siendo relevada por la versión HTML 5 que introduce nuevas etiquetas que amplían las posibilidades que tenía HTML 4.01.
Pero en este punto, lo mejor es que ya empecemos a meternos en harina en ver el código HTML de una página web.
Por ejemplo: una versión extremadamente simplificada de este post, tendría un código HTML como el siguiente:
El ejemplo empieza con una etiqueta especial que es <!DOCTYPE HTML>, es simplemente una etiqueta especial que tiene que ir al principio de todo fichero HTML e identifica al fichero como un documento en formato HTML.
Lo que sigue son etiquetas anidadas que forman una estructura jerárquica (excepto la línea del DOCTYPE). Fíjate que siempre hay una etiqueta de apertura y una etiqueta de cierre que es la misma etiqueta, pero con una barra invertida delante del nombre de la etiqueta.
Estas etiquetas, junto con el contenido que envuelven, forman lo que se conoce como un elemento HTML.
En el ejemplo podrás observar que hay una estructura básica compuesta por las etiquetas <html>, <head> y <body>. Esto es la estructura básica de cualquier página web.
<html> es el elemento raíz de la página, es simplemente el elemento del que tienen que “colgar” todos los demás, no tiene más función que esa. <head> es la cabecera de la página, una sección con información descriptiva de la página, etc. que no se visualiza como tal en la página, eso le corresponde a la etiqueta <body>. En <body> irán los elementos que vemos realmente dentro del navegador como tales.
Fíjate también en cómo se abren y cierran las etiquetas, por ejemplo, la etiqueta “<title>” (etiqueta de apertura) y “</title>” (etiqueta de cierre). A su vez, estas etiquetas pueden contener a otras etiquetas, como es el caso de <head> que es la que encierra a la etiqueta o elemento “title”.
Si seguimos, verás que varios niveles de títulos con etiquetas <h1> hasta <h3>. Esto sería lo equivalente, por ejemplo, a los estilos de títulos “Título 1”, “Título 2” y “Título 3” en Microsoft Word. En HTML dispones de un total de 6 niveles, de h1 a h6.
Por otra parte, puedes ver varias etiquetas <p>, éstas corresponden a los párrafos que vienen a continuación de los títulos y para las cuales hemos puesto solamente un pequeño extracto de texto como ejemplo.
Fíjate especialmente en las etiquetas tipo <a> que son los enlaces. Ésta es, si cabe, la etiqueta por excelencia del HTML, la que permite crear los hiperenlaces que son lo que hace de la web la web.
Con esto puedo introducir, además, otro concepto fundamental del HTML: los atributos.
Si echas un vistazo con atención, en el caso de la etiqueta <a>, antes del corchete de cierre vienen dos palabras: “href” y “target”. Estas palabras son dos atributos y sirven para especificar parámetros adicionales en una etiqueta. De esta manera le podemos dar mucho más juego a las etiquetas.
En ejemplo concreto el atributo “href” indica la URL de la página enlazada y con el atributo “target” indicamos que, además, queremos que cuando el usuario haga clic en él, la página correspondiente se abra en otra pestaña del navegador.
¿Es una buena idea hacer un sitio web entero con HTML?
Ahora que ya te puedes hacer una idea concreta de lo que es una página HTML, quiero mencionar también otra cuestión que me parece muy importante plantearte antes de que decidas a ponerte a hacer páginas web con HTML:
Aunque todas las páginas web estén compuestas por HTML, hoy en día ya no es necesario picar el HTML que has visto antes “a pelo”. Es más, suele ser generalmente la peor opción, la más laboriosa y la menos productiva.
Hoy en día, si quieres crear un sitio web, la fórmula normal suele ser algún tipo de herramienta como WordPress, Blogger, Wix, etc. que te permiten crear los contenidos en HTML de una manera mucho más eficiente usando editores visuales parecidos a los de herramientas como Microsoft Word, por ejemplo.
Además, con este tipo de herramientas puedes añadir mucha funcionalidad (comentarios, feed RSS, etc.) que con una página HTML en principio no puedes implementar o que, al menos, supondrían un esfuerzo muy grande y necesitar programar con lenguajes de programación avanzados como JavaScript.
¿Quiere decir que eso no tiene sentido que aprendas HTML?
En absoluto.
La razón es muy simple: aunque, en general, trabajes con herramientas como las mencionadas siempre hay ocasiones en las cuales para una cosa concreta que quieras hacer te será más cómodo hacer eso en concreto con HTML. Por otra parte, es muy bueno que sepas HTML para que puedas revisar el HTML que generan ya que algunas veces contiene fallos o artefactos que no convienen y conviene “limpiarlo” un poco si quieres dejar el contenido perfecto.
Además, tengo una buena noticia: aprender HTML es bastante más fácil de lo que piensas.
Así que sí o sí te animo a que aprendas HTML y CSS porque te cambia la vida en cuanto a lo que serás capaz de hacer en un sitio web.
¿Qué cosas necesitas dominar para hacer páginas web?
La cantidad de elementos y atributos en HTML es enorme. Es un lenguaje muy potente y sólo tienes que ver la cantidad de páginas web espectaculares que existen.
Por eso, aquí voy a hacer una selección de los que serían a mi juicio los elementos más importantes. Con esto tienes más que suficiente para crear incluso páginas web avanzadas y ya tienen que ser necesidades muy específicas para que realmente necesites más.
Como referencia con todas las etiquetas HTML, te dejo en esta referencia en la que encontrarás un listado completo, junto con los detalles de cada una.
Y si quieres aprender HTML a fondo, te recomiendo este libro online gratuito:
Etiquetas básicas de estructura y cabecera
Empezamos por los elementos que conforman la estructura básica que vimos antes (<html>, <head> y <body>) y elementos que te resultarán ahora un tanto “abstractos” con información adicional sobre la página (<meta>, <title> y <link>) y que irán dentro de la etiqueta <head>.
Salvo de <title> (que determina el nombre de la página que verás en la pestaña del navegador), de estos últimos, por ahora no te preocupes demasiado. Son un poco más avanzados e iremos hablando más de ellos en los momentos adecuados.
Etiquetas para títulos, párrafos, enlaces, imágenes y formatos básicos de texto
Éstas son las etiquetas para crear la estructura básica de una página HTML:
Etiquetas para dar más estructura: divisiones, tablas y listas
Para darle una estructura un poco más sofisticada e interesante a una página, las listas y tablas son elementos totalmente esenciales.
Por otra parte, las etiquetas <div> permiten crear divisiones o zonas en una página. Una división básica de una página podría ser, por ejemplo, una cabecera, el cuerpo del contenido, una barra lateral y un pie. Esto es, por ejemplo, el formato básico de un blog típico.
Aunque para sacarles realmente partido necesitas aprender también CSS ya que es con las reglas CSS cómo se “maqueta” esta parte, es decir, se definen cosas como la alineación de una división, sus dimensiones, etc.
En HTML dispones de las siguientes etiquetas para crearlas:
Interaccionar con el usuario con formularios
HTML también está preparado para crear interacciones sencillas con los usuarios mediante formularios. Eso sí, si usas formularios en el lado del servidor necesitas algún tipo de programa que reciba esa información y la sepa procesar para guardar, por ejemplo, la información que recojas en una base de datos.
Esto es, por cierto, otra ventaja de usar aplicaciones como WordPress para tu web, aquí estas cosas ya las tienes hechas y puedes crear formularios para recoger sus datos en una base de datos sin saber nada de programación.
Ejemplos típicos y muy simples serían un formulario de contacto a través del cual se genera un email que recibes en tu cuenta de email o un formulario de pedidos para que le gente te envíe sus pedidos.
Para los formularios se usan las etiquetas <form> e <input>, pero son un poco más complicadas de usar y, por tanto, cómo usarlas exactamente se sale un poco del marco de este post. Te remito a este enlace para este tema.
Crear una página web con HTML
Vistos los elementos más importantes, ya estamos en condiciones para crear una página web real sencilla.
Crear una página web con HTML consiste básicamente en crear un fichero y editar un contenido que será codificado en el lenguaje HTML. Para ello existen diversas herramientas.
Con HTML
1Comprende lo que es el HTML. Este es el lenguaje de codificación con el cual se hacen las páginas web. Para ver cómo luce, ve a Internet Explorer y haz clic derecho para seleccionar "Ver código fuente de la página". Verás una página con códigos: eso es el HTML. El código es lo que ve el navegador para interpretarlo y armar una página web.- En Google Chrome, presiona "F12".
- En Mozilla Firefox, presiona "Ctrl+U" para ver el código fuente de la página.
- En Safari, selecciona Ver > Ver fuente (u "Opción+Comando+U").
- En Internet Explorer, la opción del menú "Ver" que deberás elegir es "Origen".
2Comienza con una página lo más sencilla posible, sino te verás abrumado por la sintaxis y los lenguajes de script.- Es importante recordar que estarás escribiendo la información entre una etiqueta de apertura y una de clausura, ambas de HTML. Una etiqueta de apertura se verá así: <____>. Una etiqueta de clausura se verá así: </____>. Al final, reemplazarás el "____" por un código.
3Ve a Inicio > Programas > Accesorios > Bloc de Notas. Será mucho más fácil si usas el Bloc de Notas++ (lo puedes descargar gratis por Internet). Cuando hayas elegido el lenguaje HTML, todo lo que escribas estará automáticamente conectado con diversos colores, de esta manera será muchísimo más fácil corregir posibles errores.
4Dile al navegador qué lenguaje vas a usar. Escribe <html>. Esta es la primera etiqueta que deberás escribir, la cual le indicará a la computadora que empezarás a hacer una página web. También se cerrará al final, así que al final del documento, ciérralo con <>. Esto finalizará la página web.
5Añade el encabezado (head) de la página como se muestra en el gráfico.
6Ponle un título a la página. El título es importante, porque les dará a los usuarios una idea del tema de la página. Además, cuando los usuarios le pongan un marcador al sitio, el título es lo que único que verán en su lista de marcadores. El código HTML para el título es: <title>. Ciérralo al final del título escribiendo </title>. El título solo se mostrará en la pestaña, no será el título de la página en sí.
7Haz el cuerpo de la página. Escribe <body> para abrir la etiqueta del cuerpo. Luego ciérrala con la etiqueta </body>. La información para la página web irá entre <body> y </body>.- Para darle un color de fondo a la página, podrás añadirle un estilo al cuerpo. En vez de solamente escribir, escribe <body style="background-color:silver">. Podrás probar con un color distinto o incluso con un código hexadecimal. Las palabras entre comillas se conocen como "atributos". ¡Deberán estar rodeados por comillas!
8Escribe unas cuantas líneas de texto entre las etiquetas de cuerpo.- Para que el texto siga en la línea siguiente (como si presionaras "Enter" en el teclado), escribe: <br>.
- ¿Quieres añadir alguna marquesina, es decir, una palabra que se mueve de lado a lado de la pantalla? Solo tendrás que escribir <marquee>TEXTO</marquee>.
9Añade algunas imágenes. Si quieres colocar alguna imagen de Internet a tu página web, el código HTML para las imágenes será: <img src="URL">. La etiqueta de clausura es: </img>, pero es opcional.
10Revisa todo para asegurarte de que todas tus etiquetas estén cerradas. Tu página web deberá verse algo así:
< title>Mi página web</title>
< body bgcolor="yellow">
Me encanta wikiHow porque
< marquee>¡es la mejor página del mundo!</marquee>
< img src="http://www.wikihow.com/skins/common/images/wikiHow_logo_5.gif"></body>
11Guarda tu trabajo. Ve a "Guardar como", ingresa un nombre de archivo que termine en la extensión .html (por ejemplo: "archivodeprueba.html") y escoge "Todos los archivos" o "text" en Tipo de archivo. No funcionará si no se siguen estos pasos. Ahora ve adonde lo hayas guardado y haz doble clic para abrirlo. Tu navegador predeterminado se abrirá con tu propia página web.
