En el post de hoy voy a enseñarte cómo hacer una página web con HTML, pero antes de meterme en harina, es necesario aclarar un concepto que es vital en este contexto que es precisamente el de “página web” versus “sitio web”.
Imagen de Shutterstock - © Orghan Haghiyev
La razón de ello es que se suele utilizar con frecuencia el término “página web” cuando en realidad se está hablando de un “sitio web” y esto puede dar lugar a confusión porque las dos cosas no son lo mismo.
No te preocupes porque en este post vas a aprender las dos, pero debes tener claro que son dos cosas diferentes.
Tabla de contenidos
Conceptos básicos de páginas web
¿Cuál es entonces la diferencia entre una página web y un sitio web?
Diferencias entre una página web y un sitio web
Una página web es un único documento electrónico que se puede visualizar en un navegador y que está codificado en lenguaje HTML. Cada página web tiene una dirección web (una “URL”) única.
Por ejemplo:
https://www.hostingatope.com/mejores-herramientas-para-webmasters-internet/
En cambio, un sitio web es el conjunto de páginas web pertenecientes a un mismo dominio.
Por ejemplo, en el caso de este blog:
Hosting a Tope es el sitio web y éste a su vez se compone todas las páginas web que se ubican en el dominio hostingatope.com, incluida la del ejemplo anterior. Cada una de ellas tendrá una URL diferenciada que pertenece al dominio hostingatope.com.
Por otra parte, lo que ves en el domino hostingatope.com es a su vez una página, la que corresponde precisamente a la URL que en este caso es el domino sin más. Es la página principal del sitio, también conocida como portada o home page, según la terminología que prefiera usar cada uno.
Para que tu página web se vea en Internet, necesitas un dominio y un servidor conectado a Internet. Esto lo puedes conseguir con servicios gratuitos como, por ejemplo, Blogger o WordPress.com, todos ellos, muy limitados o contratando un hosting, que es la opción buena:
¿Qué es un Hosting Web? – Definición, para qué sirve y tipos
Si quieres crear una web, tienes que saber qué es un hosting. Aquí te explico qué es, para qué sirve y cómo elegir un buen proveedor.
¿Cuál es el mejor hosting WordPress? Comparativa
WordPress es la plataforma web líder a nivel mundial. En esta comparativa veremos cuál es el mejor hosting para WordPress.
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:
<h1>Cómo hacer una página web con HTML</h1>
¿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.
¿Te dedicas al diseño web pero no consigues hacerlo rentable?
Pues entonces descubre el curso gratuito que te hubiese cambiado la vida cuando empezaste como diseñador web freelance.
Haz clic en el botón de abajo para descubrir:
- En qué estás fallando. ¿Por qué otros viven de esto y a ti te cuesta tanto?
- Los secretos para adelantar a tu competencia por la derecha.
- Cómo multiplicar por tres tus ingresos sin hacer más webs, ni subir precios.
- 16 palabras y mensajes de venta que todo diseñador debería borrar de su web.
- Cómo hacer páginas web de 400€ en menos de 4 horas.
Y estos son sólo 5 ejemplos de un total de 18 vídeos con más de 5 horas de grabación totalmente gratis (sí, gratis de verdad).
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:
<!DOCTYPE HTML>
<html>
<head>
<title>Cómo hacer una página web con HTML</title>
</head>
<body>
<h1>Cómo hacer una página web con HTML</h1>
<p> En el post de hoy voy a enseñarte <strong>cómo hacer una página web con HTML</strong>, pero antes …</p>
<h2>Conceptos básicos sobre páginas web</h2>
<p>¿Cuál es entonces la diferencia entre una página web y un sitio web?…</p>
h3>Diferencias entre una página web y un sitio web</h3>
<p>Una <a href=”https://es.wikipedia.org/wiki/Página_web”>página web</a> es un <strong>único documento electrónico</strong> que…</p>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Cómo hacer una página web con HTML</title>
</head>
<body>
<h1>Cómo hacer una página web con HTML</h1>
<p> En el post de hoy voy a enseñarte <strong>cómo hacer una página web con HTML</strong>, pero antes …</p>
<h2>Conceptos básicos sobre páginas web</h2>
<p>¿Cuál es entonces la diferencia entre una página web y un sitio web?…</p>
<h3>Diferencias entre una página web y un sitio web</h3>
<p>Una <a href=”https://es.wikipedia.org/wiki/Página_web”>página web</a> es un <strong>único documento electrónico</strong> que…</p>
</body>
</html>
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 “a pelo” el HTML que has visto antes. 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 CMS (Content Management System) como WordPress, Blogger, Wix, etc. que te permiten crear los contenidos en HTML de una manera mucho más eficiente.
Por una parte, para crear los contenidos, usando editores visuales parecidos a los de herramientas como Microsoft Word, por ejemplo.
Por otra parte, para lo que es el diseño en conjunto de la web, dispones de las “plantillas” de WordPress que son, en definitiva, plantillas de diseño personalizables. Aquí te dejo dos lecturas interesantes a este respecto:
Cómo crear una Página Web con WordPress – Tutorial paso a paso
En este tutorial crearemos en poco tiempo una web moderna, con un diseño profesional sin necesidad de ningún conocimiento técnico.
Las Mejores plantillas para WordPress: Gratis y Premium
La plantilla WordPress que escojas será crítica para el éxito de tu web. Aquí te ayudamos a elegir la mejor entre opciones gratis y premium.
En el siguiente “mega-tutorial” puedes ver cómo se trabaja con una de estas herramientas modernas, concretamente con WordPress que es la más popular y suele ser casi siempre la mejor opción.
Dura algo más de hora y media y en ese tiempo creamos un sitio web completo en WordPress, con blog incluido, con un diseño profesional, formulario de contacto y todo lo que se necesita para arrancar.
Esto mismo hecho en HTML habría tardado semanas, como poco…
Eso sí, para explotar todas las posibilidades que esto ofrece, vas a necesitas WordPress con hosting propio, la opción gratuita de WordPress está muy limitada, al igual que las versiones gratuitas de las demás plataformas alternativas.
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.
- Elemento raíz: <html>
- Información del documento: <head>
- Cuerpo del documento: <body>
- Meta-información: <meta>
- Título de página: <title>
- Enlace a recursos (hojas de estilo, etc.): <link>
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:
- Títulos: <h1> – <h6>
- Párrafo: <p>
- Hiperenlace: <a>
- Imagen: <img>
- Sección de texto: <span>
- Énfasis: <strong>,<em>
- Salto de línea: <br>
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:
- Divisiones: <div>
- Tablas: <table>, <tr> y <td>
- Listas: <ul>,<ol>
- Ítems de lista: <li>
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.
Ejemplo práctico de una página web sencilla
Para ello te voy a poner un ejemplo concreto que tendrá como resultado lo que ves en la captura de imagen siguiente.
En el ejemplo, como puedes ver, me he inspirado en los blogs y he creado una página HTML sencilla con una organización y estética muy similar a lo que puedes ver en muchos blogs. Cuenta con una cabecera, un cuerpo que se divide en el contenido principal (los posts), una barra lateral con un anuncio y un pie.
A continuación, te dejo también un extracto del código HTML de esta página para que te puedas hacer ya una idea de cómo está hecha.
También es necesario comentar que para hacer una página un poco más real y no excesivamente simplista, he utilizado también hojas de estilo CSS que se encargan básicamente de la estética (tipos de letra, tamaños, colores, etc.) y de la maquetación de la página.
En este post no nos vamos a meter con la parte CSS, nos centraremos en la parte HTML, pero disponemos también de un tutorial igual que éste para CSS:
Tutorial para aprender CSS básico desde cero + Manual PDF descargable
Saber un poco de CSS te abre un mundo de posibilidades, incluso si usas WordPress o Blogger. Aquí aprenderás lo que realmente necesitas saber.
Además, este ejemplo concreto te lo puedes descargar, junto con la hoja de estilo CSS que se ha usado para darle el aspecto visual.
Ahora me gustaría que te fijases en particular que para crear esta página nos hemos apañado perfectamente con las etiquetas que hemos repasado un poco más arriba.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Ejemplo de una página web de nivel medio-basico</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="cabecera">
<a href="/"><img src="https://www.hostingatope.com/wp-content/themes/genesis-hat/images/logo.png"/></a>
</div>
<div class="cuerpo">
<div class="contenido">
<h1>3 Consejos para hacer páginas web bien</h1>
<h2>1. No te limites a herramientas visuales</h2>
<p>Existen <a target="_blank" href="http://www.quackit.com/html/online-html-editor/">muchas herramientas</a>, incluso gratuitas, que te permiten crear páginas web sin saber realmente HTML.</p>
<p>...</p>
<h2>2. Piensa una buena estructura común</h2>
<p>Antes de crear una página web, procura pensar una estructura lógica común compuesta por etiquetas de divisiones.</p>
<p>...</p>
</div>
<div class="barra-lateral">
<a target="_blank" href="/go/webempresa"><img src="https://www.hostingatope.com/wp-content/uploads/2016/05/banner-hosting-webempresa.png"></a>
</div>
</div>
<div class="pie">
<p>© Copyright Hosting a Tope 2017</p>
</div>
</body>
</html>
Cómo analizar otras páginas web para tomar ideas
Ahora que ya tienes las bases de cómo crear páginas web con HTML, te animo a que mires cómo están hechas otras páginas. Y para ello hay una herramienta maravillosa: los inspectores de código de los principales navegadores.
Son todos muy parecidos y los encontrarás en Firefox, Chrome o el Internet Explorer (y probablemente en alguno más entre los menos conocidos). En todos ellos se activan con la tecla F12. La principal ventaja que te aportarán es que en vez de visualizar el código HTML simplemente como texto, lo visualizan como árbol, colorean las palabras clave (etiquetas, etc.) y te permiten seleccionar elementos determinados desde la página.
Es decir, si quieres saber cómo está hecho un determinado elemento de una página web que estás viendo, no tienes más que seleccionar ese elemento y la herramienta te mostrará en el árbol del código HTML ese elemento en concreto. Es fantástico para aprender y tomar ideas.
Pero una advertencia:
Cuando veas ejemplos reales probablemente te asustes, en día las páginas web de cualquier blog suelen ser muy grandes y complejas, muchísimo más que el ejemplo que he puesto aquí, aunque a simple vista de pueda parecer que sin similares.
No voy a entrar ahora en las razones de por qué esto es así porque no son importantes para nosotros, sino que simplemente te quiero lanzar un mensaje de tranquilidad: No pasa nada, es simplemente un poco más incómodo que analizar la página de nuestro ejemplo, pero si las analizas con calma, reconocerás perfectamente los elementos que hemos ido comentando aquí y que son los que realmente importan.
Ahora bien, si puedes encontrar y analizar páginas sencillas al principio, mejor que mejor.
Cómo hacer páginas web en HTML online
Por suerte, hoy en día encuentras herramientas online que no requieren la instalación de un programa en tu PC y que funcionan en cualquier entorno ya sea un PC con Windows, un ordenador Mac o un ordenador con Linux.
Lo que sí te recomiendo es que no intentes utilizar tablets o dispositivos similares para ello, aunque funciona en la mayoría de los casos, con dispositivos muy incómodos para trabajar con estas cosas.
Aquí te dejo un listado de varias herramientas online con diferentes enfoques y fortalezas específicas, además, todas son gratuitas.
- El editor online de Quackit: Ésta es mi herramienta preferida, la que uso habitualmente cuando tengo necesidad de crear algo de HTML. Es un editor sencillo que te permite crear HTML de manera visual o con código. Lo mejor es que el código HTML que genera, a diferencia de muchas otras, es muy “limpio”. Además, puedes cambiar en todo momento entre el modo de edición visual y en texto. Ya me gustaría que, por ejemplo, el editor por defecto de WordPress funcionase así de bien.
- HTML Instant: Éste es muy simple comparado con el anterior, pero tiene una ventaja que me parece muy interesando para cuando estás aprendiendo: Tiene una división de pantalla en dos mitades (verticales) donde en una ves el código HTML y en la otra el resultado visual. Super-práctico para practicar con tus primeros pasos.
- Best Online WYSIWYG HTML Editor: Éste es el editor más sofisticado y potente de todos, pero tanto que no te lo recomendaría como herramienta para empezar, sino para más adelante J
Cómo hacer páginas web en HTML offline
Si prefieres utilizar herramientas gratuitas offline para editar tus páginas HTML, aquí te dejo también dos opciones, una básica y otra más avanzada:
- Notepad++: Éste es un editor sencillo y cómodo para crear ficheros HTML, soporta lo básico como una sintaxis coloreada para facilitar la lectura del código y está muy bien para hacer tus primeros pinitos con páginas muy sencillitas. La desventaja es que sólo puedes trabajar a nivel de código, es decir, no puedes visualizar la página como tal, esto lo tienes que hacer en un navegador (lo cual tampoco es que sea un gran problema, en realidad…).
- Brackets: Brackets es un proyecto open source (código abierto) muy original de Adobe. Es un editor de HTML, CSS y JavaScript creado con HTML, CSS y JavaScript. Es una herramienta muy potente que lógicamente ya requiere bastante más aprendizaje que Notepad++, pero también es otra dimensión de herramienta. Recomendaba para cuando empieces a “controlar” un poco.
Aquí te dejo un vídeo de introducción sobre Brackets:
Cómo crear un sitio web entero con páginas HTML
Si te dispones a crear un sitio web con páginas HTML hay que hablar también un poco de organización, de lo contrario, la cosa se te puede ir rápidamente de las manos.
La portada (home page) de tu sitio web
Todo sitio web tiene su página principal, la que coincide con el dominio del sitio. Conviene que la convención suele ser que la página web que se visualice en el dominio se llame index.html.
Se pueden configurar otras opciones, pero por defecto cualquier servidor web te debería reconocer index.html sin problemas y no te complicas la vida.
Cómo organizar las diferentes zonas de tu web
Si tienes una cantidad considerable de páginas, conviene que pienses en organizar zonas de tu web en forma de directorios que sigan una cierta lógica, por ejemplo, por temas o categorías. De lo contrario, te resultará cada vez más mantener una visión coherente de tu web.
Cómo organizar los recursos de tu web
Una página web no se compone solamente del fichero HTML principal, sino todos los recursos que integra: las hojas de estilo, imágenes y en ocasiones código en JavaScript.
Por tanto, de nuevo, es importante que organices esto bien en directorios e incluso subdirectorios si lo ves conveniente. De lo contrario, tener todo este mogollón de ficheros entremezclados en el directorio raíz hará tu web con el tiempo simple y llanamente inmanejable.
Ejemplo de estructura genérica para una web
Para concretar todo esto, te voy a proponer una estructura bastante “estándar” que vas a ver reflejada en muchas webs:
Como puedes ver, es muy simple:
- El fichero “index.html” para la página de portada (la “home page”).
- La carpeta “css” para las hojas de estilo, la carpeta “images” para las imágenes y la carpeta “js” para los ficheros de código JavaScript.
- Y, por último, las carpetas “categoría1” y “categoría2” equivaldrían a las carpetas destinadas a organizar los diferentes ficheros de las diferentes páginas.
Cómo preparar el HTML de tus páginas web para Google
Y ya por último no quiero concluir este post sin hablar también un poco de cómo posicionar tu web en Google ya que si creas páginas web es para que la gente las vea y una de las fuentes de tráfico más importantes, sino la más importantes sigue siendo el tráfico de las búsquedas en Google.
Para vamos a repasar las claves básicas del SEO On Page que se refiere a la optimización a nivel de la propia página y cómo se refleja esto a nivel HTML.
Quiero dejarte también claro que esto no pretende ser un curso de SEO, para eso echa mejor un vistazo a este post:
Qué es el ‘Long Tail SEO’ y cómo aprovecharlo para tu blog
Aquí quiero resaltar solamente algunos aspectos muy concretos de HTML que están estrechamente relacionados con el SEO.
Nunca uses más de una etiqueta H1
La primera cuestión, y que destaca por encima de las demás, es que le dejes muy claro a Google cuáles son las palabras principales para las cuales tu página web debería aparecer en los resultados de búsquedas. Para eso te va a ser útiles, sobre todo, las etiquetas <title> y <h1>.
El “problema” es que puedes usar varias etiquetas <h1> si quieres, pero si quieres hacer bien tu SEO, deberías usar solo un título <h1> en cada página.
¿Por qué? Porque el <h1> refleja el título principal de tu página y en él deberías usar las palabras que quieres que Google identifique como palabras clave principales.
Imagínate un libro con tres títulos diferentes en su portada. ¿Sabrías adivinar cuál va a ser el tema de ese libro? No, ¿verdad? Pues eso es el equivalente a tener varias etiquetas <h1> en una página.
Por tanto, usa solamente una etiqueta <h1> en la página y te curas en salud. El contenido de esa etiqueta puede ser por cierto el mismo que el de la etiqueta <title> o parecido. En todo caso, conviene que las palabras clave aparezcan también en <title>.
Otros elementos claves de SEO On Page
Google valora también otros elementos de la página para decidir en qué lugar posicionarte, aunque no se sabe exactamente con qué peso ya que mantienen un estricto secreto sobre los detalles del funcionamiento de su algoritmo de posicionamiento.
La URL
El primer elemento a citar es la URL. Aquí simplemente te quiero comentar que conviene que repitas las palabras clave en la URL separando estas por guiones. No solamente es un formato que le gusta a Google, sino que hace la URL también más inteligible y agradable para el lector.
Además, si tienes un sitio temático, compuesto por páginas estáticas HTML, puede ser interesante que uses carpetas con palabras clave que se reflejen en la URL.
Por ejemplo:
- misitio.com/dietas/como-hacer-una-dieta-dukan.html
- misitio.com/recetas/pollo-al-curry.html
Una organización así va a favorecerte en búsquedas como “receta pollo al curry” o “como hacer una dieta dukan”.
Los subtítulos
No cuides las palabras clave solamente en los títulos h1, sino también, al menos, en los títulos h2. Tiene bastante menos peso, pero todo suma. Además, puedes aprovechar para “apuntar” a variantes de tu título principal que sabes que también son búsquedas que hace la gente en Google.
La meta-descripción
La meta-descripción es un caso especial porque es el texto que verás debajo del título en los resultados de búsqueda de Google.
Es una etiqueta que se sitúa dentro de la etiqueta <head> en la cabecera de la página.
Aquí puedes ver un ejemplo:
<head>
<meta name="description" content="He usado muchos hostings. Aquí te cuento cuál es el mejor hosting del 2015 en España la manera de conseguir el máximo descuento :)">
</head>
Se debate si Google tiene realmente en cuenta las palabras clave de este texto o no, aunque desde luego no puede hacer daño que las metas.
Pero sobre lo que no hay duda es la importancia del texto en sí puesto que al aparecer en los resultados de búsqueda será, junto con el título, determinante para que hagan clic en tu página o no. Y eso sí que se sabe que Google lo valora en gran medida para determinar en qué posición colocar cada resultado.
Por tanto, directa o indirectamente es muy importante que incluyas una meta-descripción y que la cuides si quieres hacer un buen trabajo de SEO.
El contenido
Y, por último, tendrás que usar las palabras clave en el contenido. Aquí se suele dar el consejo de buscar una densidad de, al menos, un 1%. Es decir, que de cada 100 palabras, una sea corresponda a la palabra (o frase) clave para la cual quieres posicionar el contenido.
Concluyendo
Como ves, HTML es un lenguaje relativamente fácil de aprender, incluso para gente sin un “background” técnico.
Como todo, si te metes a fondo es un mundo, pero lo bueno que tiene es que dominando solamente una pequeña parte (lo que he expuesto aquí básicamente), junto con unos conocimientos básicos de CSS, que son imprescindibles, ya podrás empezar a hacer cosas bastante interesantes.
Ahora bien, por las razones que ya expuse antes, habiendo opciones alternativas como WordPress y otras herramientas, yo jamás haría una web “a pelo” en HTML.
No obstante, eso no quiere decir que no te merezca la pena aprender seriamente HTML, si merece la pena y mucho.
La razón es que todas estas herramientas te solucionan el 90-95% del problema, pero siempre habrá cosas (una tabla un poco complicada, un cuadro con un formato especial, un banner que quieres repetir en diferentes ubicaciones del sitio, etc.) para las cuales notas que la herramienta se te queda corta.
Aquí es dónde vas a notar una gran diferencia porque hay un mundo entre controlar tu web al 90-95% o controlarla al 100% y poder implementar cualquier cosa que se te antoje. Esa es la puerta que te abre el dominio de HTML y CSS.
Hola, de verdad al leer estos comentarios me motivé a escribir.
Soy una joven de 27 años que está descubriendo lo que realmente le apasiona.
En mis momentos como estudiante aprendí a utilizar dreamweaver y muchas veces me dijeron que estudiara esa rama, pero la vida puede ser un tanto diferente cuando nos topamos con la realidad,
Al ver todos estos avances y tanta información di el paso para estudiar todo lo relacionado al WEBMASTER , con miedo y mucho temor de empezar algo nuevo a esta edad tomé una decisión importante. Y por eso quiero agradecerles por esta valiosa información que me ayudará a formarme mucho más. El internet es un medio informativo que puedes aprovechar al máximo. Dios les bendiga.
Me alegro de que te haya sido útil 🙂
¡Un saludo!
Berto
Envio a ustedes un saludo! el blog esta muy interesante y aun cuando es un tema muy complejo , lo explican de manera muy eficiente.
gracias por la informacion
Muchas gracias por tus amables palabras 🙂
¡Un saludo!
Berto
Da gusto encontrar a gente como tu por internet, muchas gracias por la explicacion tan detallada, un saludo.
Hola Jesús,
Muchas gracias por tus amables palabras 🙂
¡Un saludo!
Lucía
Es muy bueno solo que es dificil
Hola Patrick,
Me alegro de que te haya sido útil 🙂
¡Un saludo!
Lucía
Buenas noches Berto muy bien explicado todo yo soy nuevo en lo de crear paginas en HTML CSS JS y sobre otros lenguajes, y todo lo eh aprendido desde cero por medio de tutoriles y video-tutoriales creo que lo que eh logrado es mucho a comparacion de que nunca estudie nada de programacion ni diseño, y con esta explicacion se me abre mas la mente para seguir aprendiendo mas sobre estos temas apesar de que hoy en dia existen muchas opciones mas basicas por asi decirlo, muchas gracias por tomarse el tiempo en dar esa informacion.
Hola Iván,
Me encanta leer testimonios como el tuyo porque de eso se trata precisamente: de adentraros en este mundo que es fascinante, divertdo y lleno de posibilides!!
¡Un fuerte abrazo!
Berto
Hola gracias por la información es clara y limpia, para los principiantes es comprensible y ayuda mucho a ubicarnos y no desesperar en nuestro intento de iniciar una pagina web. Con muchos tips que me imagino ahorran procesos. Saludos
Hola Julio,
Muchas gracias por tus amables palabras 🙂
¡Un saludo!
Lucía
Hola. Gracias por toda esta información, planteada de manera muy clara y ordenada. A mí me gustaría subir mi primera página pero tengo un tema. Teniendo todo en html, ¿cómo es que hago que se suba a la web? Tengo contratado el servicio de hosting, tengo el dominio, tengo hasta el email, pero no entiendo cómo es el paso a paso entre pasar los caracteres desde el bloc de notas a una página real y que ya se pueda visualizar. ¿Tienes algún enlace donde pueda ver algún ejemplo? (Seguramente variará según el hosting, pero quiero ver un ejemplo como para tener una noción). Gracias desde ya.
Hola Ingrid,
Simplemente tienes que usar el administrador de ficheros de tu hosting para subir el fichero HTML que tienes en tu equipo local al directorio que corresponde a la raíz de tu web (normalmente, “public_html”).
Te dejo un vídeo dónde se hace esto con cPanel, una herramienta que usan muchos hostings: https://youtu.be/4TMnObJm1pA
En cualquier caso, para estas dudas está el soporte técnico de tu hosting, si tienes problemas, ellos deben echarte una mano.
¡Un saludo!
Berto
Excelente explicación de como adentrarse en la construcciones de un sitio web con sus variantes, me encanto encontrar este maravilloso contenido que nos has compatido felicitaciones y mi agradecimiento y admiracion absoluta.
Muchas gracias por tus amables palabras 🙂
¡Un saludo!
Berto
Gracias por este post , soy programador en python y también sé sobre html …pero este post me refrezcó info basica importante ..gracias .
A este paso los programadores se quedan sin trabajo, entre los constructores para páginas web tipo DIVI, elementor o para Joomla, SP page builder o yootheme, nadie va a solicitar sus servicios, salvo las grandes empresas.
Gracias
Hola Pascual,
No te preocupes, la cosa no es tan dramática. La contratación de estos servicio no deja de crecer.
Ten en cuenta que la enorme mayoría de los clientes de este tipo de productos no habrían contratado un servicio profesional jamás por el coste que tiene.
Y muchos de ellos, tras dar el paso inicial, que quizás de otro modo nunca habrían dado, acabarán contratando con los años, cuando su web haya crecido y no tenga tiempo para hacerlo ellos mismos, este tipo de servicios.
¡Un saludo!
Berto
Hola Berto, muchas gracias por este material de calidad que nos brindas. Totalmente de acuerdo en que un buen sitio se puede diseñar en WordPress (o cualquier otro CMS) sin saber ni HTML ni CSS. Pero conocer estas herramientas es un diferencial que nos facilita la vida y expande las posibilidades de nuestros sitios.
Gracias además, por las recomendaciones de libros y posteos añadidas. Muy útiles todas.
Que tengas un excelente 2019.
Saludos!
Gracias a ti por leer el blog, Florencia 🙂
¡Un saludo!
Berto
Saludos, amigo. Excelente aporte
Me alegro de que te guste 🙂
¡Un saludo!
Berto
Saludos Berto:
De atrevido y sin conocimientos cree una web html. He logrado bastante, pero no se como ingresar en la barra del menú la cual está integrada por (Inicio- Noticias- Biografías, etc) la información en cada uno.
de antemano muchas gracias por regalarnos sus conocimientos
Hola Lucas,
Esa es la actitud, hay que atreverse, si no, nunca se consigue nada 🙂
En cuanto al problema que comentas, eso ya es algo muy específico de lo que estás haciendo y no te puedo ayudar desde aquí ya que me es imposible diagnosticar cuál es el problema.
¡Un saludo!
Berto
muy bueno tu post.. me refrescó mucho la memoria.
saludos.!!
Me alegro 🙂
Un saludo,
Berto
Qué tal? Buenas tardes, como se puede hacer con bordes.
Hola Wilson,
Para eso exite la propiedad “border” en CSS, investiga un poco por tu cuenta poniendo simplemente “border CSS” en Google, hay muchísima información sobre ello.
¡Un saludo!
Berto
buen dia.
podria ayudarme a crear una pagina web.
por favor soy nueva en estoy y casi no le entiendo mucho, quedo asus ordenes
atte. mayra
Hola Mayra,
Para esto está este post…
Te dejo una alternativa de cómo crear una web muy sencilla, no en HTML, sino gratis en WordPress:
https://www.ciudadano2cero.com/como-crear-blog-gratis-wordpress/
Un saludo,
Berto
Hola como estas muy buena información en el ejercicio al descargar el código no descomprime el archivo sale como dañado podrías enviarlo o subirlo de nuevo para poder descargarlo. Muchas gracias!
Saludos
Hola Gus,
Prueba a ver con otro ordenador, lo hemos probado repetidamente y no encontramos ningún problema con los archivos de descarga por lo que sospecho que ha de ser algo de tu lado.
¡Un saludo!
Berto
Berto: qué más puedo decir, siempre desarollas los temas complicados de manera clara y presisa, lo cual los hace muy accesibles de entender.
Estoy por construir mi primer sitio web y todo lo que nos compartes me es muy útil
Muchas gracias.
Me alegro un montón de que te haya gustado 🙂
¡Un saludo!
Berto
Hola estoy aprendiendo hacer páginas web en html5 con ccs y javascript
La verdad se me hace algo complicado pues quiero hacer una página algo grande con un estilo profesional es posible hacerlo todo en html5 o me recomiendas utilizar algún enlace o otra cosa?
Gracias
Hola Valentín,
Si quieres hacer una web con una cierta cantidad de páginas y buen diseño no lo hagas en HTML a pelo, no tiene ningún sentido a día de hoy, es como taller un libro en piedra. Usa WordPress como ya se explica en el post.
¡Un saludo!
Berto
Hola, buenas.
Pues aquí estoy aprendiendo un poco.
creo que es muy completo todo el post.
enhorabuena.
Un saludo
Me alegro 🙂
¡Un saludo!
Berto
Muy buen articulo, gracias
Wow! No me esperaba esto, pensé en las típicas guías que te dejan con las ganas y con veinte mil dudas.
Chapó! Muy muy pero que muy completa.
Mil gracias!
Muchas gracias por tus amables palabras 🙂
¡Un abrazo!
Berto
Estupendo artículo Berto. Coincido contigo en la utilidad que tiene saber HTML, aunque sea poco, por lo que mencionas en el post. Para afinar las tablas, enlaces nofollow, solucionar pequeños problemas… En fin, que es muy útil.
Una pregunta: tengo por ahí un curso de HTML, CSS, Javascript de hace muchos años que no terminé, ¿merece la pena volver a él aunque las versiones sean antiguas o mejor ir directamente a los enlaces que recomiendas? La verdad es que está muy bien explicado y en papel, que me gusta más.
Un cordial saludo.
Hola Víctor,
Sí, te valdrá. Las novedades han sido básicamente las propias de HTML5, eso lo puede aprender luego aparte.
¡Un saludo!
Berto
Muchas gracias!!
gracias
Hola Berto.
Gracias por este post. Esta genial y supermegabien explicado.
Me alegro de que te haya gustado 🙂
Berto
Muchas gracias Berto, la información que presentas es clara y fácil de entender al menos para mí que soy un ignorante en el tema. Bendiciones.
Me alegro 🙂
¡Un saludo!
Berto
Berto muchas gracias por tu post que enriquece el saber. En una ocasión te consulte como se arma el tema de afiliados y referidos aun nopude hallar como hacerlo por ejemplo alguen accede a mi blog porque un amigo le paso mi dirección pero quiero saber quien lo refirió todavia no logré descubrir este código.?
Bueno te mando un abrazo
Hola Claudia,
Te dejo este post que te puede ayudar bastante con el tema afiliados:
http://www.ciudadano2cero.com/monetizar-blog-vender-online-productos-marketing-afiliacion/
¡Un saludo!
Berto
Interesante artículo Berto.
La verdad yo como soy un poco dinosaurio empecé haciendo mi web en HTML directamente hace más de 14 años y todavía sigue estando así. Si tuviera que comenzar hoy por supuesto elegiría algún gestor de contenido como WordPress o Joomla, pues hacen las tareas mucho más sencillas y se obtiene un excelente resultado.
Saludos
Hola José Miguel,
Quizás te compense migrar a WordPress, plantéatelo. Es un tinglao, pero una vez hecho podrás evolucionar mucho mejor tu proyecto.
¡Un saludo!
Berto
Creo que este post, aunque ya conozco un poco de HTML, me irá muy bien para arreglar el desaguisado (“cuando el editor visual hace de las suyas”donde las fotos, los textos, espacios… no hay manera de ponerlos de manera correcta y ordenada). Ya sabes, me programaron unos “profesionales” la página en WordPress pero después, una vez “hecho todo”, te dejan prácticamente abandonado.
Gracias por tu ayuda
Hola Guillermo,
Es que ese caso es muy, pero que muy típico…
Suerte 🙂
Berto
Un post estupendo para los que solo tenemos una leve idea de html, porque lo que explica es muy claro y útil. Muchas gracias
Hola Carmen,
Ésa era la intención, dar una idea “leve” puesto que HTML permite eso por ser lo suficientemente sencillo para ello.
Con otros temas técnicos no ocurre lo mismo, sería imposible aportar nada útil en un simple post coo éste. Pero la belleza del HTML es esa: que puedes dar cuatro pistas fáciles de entender y que, sin embargo, ya ofrecen un mundo de posibilidades al usuario.
¡Un saludo!
Berto
Simplemente magnífico y sobretodo útil, felicidades por la iniciativa de enseñar a los que no sabemos nada de programación
Me alegro de que te haya resultado útil 🙂
¡Un saludo!
Berto
Fantástico post!!!!!! Muchas gracias por toda la información.
Genial, me alegro un montón de que te haya servido el post 🙂
¡Un saludo!
Berto
Hola,
¿De verdad crees necesario q alguien aprenda html y css a estas alturas para hacer una web? No digo q no venga bien saberlo pero hacer una web en html picando código a estas alturas me parece ya un poco desfasado.
Un saludo
Hola Alberto,
Tienes mucha razón con tu comentario, efectivamente hoy en día una web no se debería hacer prácticamente nunca en HTML. Siempre se deberían usar sistemas CMS, con WordPress en la cabeza de las recomendaciones generalistas (mucha gente no sabe que sirve para webs más allá de blogs).
Es más, en el post comento esto mismo en el apartado “¿Es una buena idea hacer un sitio web entero con HTML?”
¿Por qué entonces este post?
Pues simplemente porque sigue siendo un tema muy demandado y, sobre todo, porque mucho que sepas usar WordPress o sistemas similares si quieres ser capaz de hacer realmente lo que se te antoje y sin complicarte la vida, lo mejor es saber un poco de HTML y CSS (como también digo en el post)
hay muchas cositas como un determinado banner, una tabla con un formato determinado, etc. que es imposible hacerlas de manera “normal” (con el editor visual) de estas herramientas. Pero si la herramienta lo permite (como es el caso de Joomla o WordPress.org, por ejemplo) y puedes usar trocitos de HTML a medida ya no hay problema. Además, sabiendo CSS, no solamente puedes trabajar el diseño de este código, sino de toda la web entera.
Puedes coger una plantilla de diseño Joomla, WordPress o la herramienta que sea y personalizar de manera muy avanzado. Una maravilla.
Por eso recomiendo, aprender estas cosas. No son muy difíciles de aprender y accedes a otra dimensión de posibilidades.
Dicho de otro modo, si me quitarán estos conocimientos me sentiría atado de pies y manos 🙂
¡Un saludo!
Berto
Genial el post.
Muchísimas gracias.
En cuanto a la pregunta de Alberto, para quél estudiar matemáticas cuando tenemos calculadoras??? Pues lo mismo
Saludos
Muchas gracias por el post, me ha sido de gran ayuda 🙂
Tienes pensado hacer otro para explicar las hojas CSS?
Hola Fran,
Ya estoy trabajando en ello, aunque tardaré un poco porque de momento no doy abasto 🙁
¡Un saludo!
Berto