¿Quieres saber cómo crear una página web en HTML? En este artículo te lo contamos todo para que pongas en prácticas lo aprendido. Además, una buena formación impartida por grandes profesionales es lo que hará de tu hobby en tu profesión.
En CODE SPACE te preparamos con el curso full Stack en Málaga para que encuentres empleo en este mundo tan apasionante.
Ahora sí, vamos a empezar a hacer una web desde cero ¡Allá vamos!
HTML conceptos básicos
Antes de saber cómo abrir una página web en HTML, es importante saber los conceptos básicos. Por ello, te lo vamos a explicar a continuación.
¿Qué es lenguaje HTML y para qué sirve?
El HTML realmente no es un lenguaje de programación, si no un lenguaje de marcado. Esto sirve para estructurar el contenido de una web a través de etiquetas.
El HTML se trabaja en la parte frontend de una web, es decir, la parte que se encarga del diseño web y es la que ve el usuario.
Diferencia entre sitio web y página web
Para que lo entiendas de forma fácil y rápida, una página web es un único documento que se visualiza en el navegador y está compuesto por código HTML.
Por ejemplo: https://codespaceacademy.com/blog/como-aprender-a-programar-desde-cero/
En cambio, un sitio web es el conjunto de todas las páginas de un mismo dominio.
¿Qué son las etiquetas HTML y para qué sirven?
Las etiquetas HTML son las palabras que están dentro de un corchete, por ejemplo <title>. Estas etiquetas crean una estructura jerárquica, es decir, se anidan entre ellas.
Además, hay una etiqueta de apertura y otra de cierre, que es la misma etiqueta, pero con una barra enfrente del nombre. Es decir, <body> (apertura) y </body>(cierre). Entre una etiqueta y otra es donde escribimos el texto que queremos que se vea. Aunque no siempre tiene por qué ir texto, como en las etiquetas “meta”.
Esta parte es una de las más interesantes para Google, ya que le decimos a los navegadores el contenido que queremos que muestre.
Por ejemplo, la etiqueta title le está diciendo a los buscadores que se trata del título que tiene que visualizar en la pestaña abierta en el navegador. Además, cuando Google visita tu web, a través de esa etiqueta entiende que es el título que tiene que mostrar cando un usuario haga una búsqueda.
Hasta aquí todo muy fácil, ¿verdad? Ahora lo vamos a complicar un poquito más.
Además de las etiquetas, también contamos con los atributos. Estos sirven para añadir más información a una etiqueta.
Por ejemplo: <a href=”https://codespaceacademy” target=»_blank»>
Siguiendo con este ejemplo, <a>sería la etiqueta y href y target, los atributos. El atributo href está indicando que es la URL de una página que hemos enlazado y el atributo target le está diciendo que la abra en una pestaña distinta del navegador cuando el usuario haga clic.
Por último, las etiquetas para Google que tenemos que tener en cuenta son la meta-description y el title, ya que son las que muestra en los resultados de búsqueda.
Etiquetas de cabecera HTML
Entre las etiquetas para el diseño de página HTML, encontramos html, head y body, que conforma la estructura básica de una web. Además, contamos con otros elementos que aportarán mayor información sobre la página como la etiqueta meta, title y link.
- Información de la página web: <head></head>
- Cuerpo de la página: <body></body>
- Información: <meta>
- Título de la página web: <title></title
- Elemento básico: <html></html>
Etiquetas para títulos HTML
Estos son las etiquetas para construir los párrafos, enlaces, título, etc.
- Títulos: <h1> </h1>, <h2> </h2>, <h3> </h3>, <h4> </h4>
- Imagen:<img>
- Enlaces:<a></<a>
- Negritas: <strong><strong/>, <b></b>
Otras etiquetas para diseñar páginas web HTML5
Además de las que hemos comentado antes, para darle un poco de forma al contenido, utilizamos otros tipos de etiquetas, como tablas, secciones y listas.
- Secciones:<div></div>
- Tablas:<table></table>
- Listas: <ul></ul>, <ol></ol>
Estructura básica de una página web en lenguaje HTML
Cuando abrimos nuestro editor, lo primero que tenemos que poner es una etiqueta especial: <!DOCTYPE/ HTML>. Con esta etiqueta identificaremos el fichero como un documento en formato HTML. A continuación, identificamos el idioma en el que va a estar nuestra página web.
Una vez escritas esas líneas de HTML, escribimos la etiqueta de la cabecera, es decir <head></head>. Dentro de ella, ponemos las etiquetas title, meta charset y meta name.
Ahora viene el cuerpo de la página web, es decir, donde vamos a mostrar los textos, las tablas, imágenes, etc. Esta es la parte que va a ver el usuario. Las etiquetas son <body></body>
Dentro de esta etiqueta pondremos los distintos títulos, <h1>, <h2>, <h3>… En HTML te permite poner 6 niveles de título, aunque a nivel SEO no tiene mucho sentido poner tantos títulos. Recuerda que para que Google entienda tu web, solo debes poner un h1.
Para terminar, hay que cerrar con esta etiqueta: </html> y ya lo tendrías todo listo.
Aquí te mostramos la estructura que debes seguir:
I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
<!DOCTYPE HTML>
<html lang=»es»>
<head>
<title>Título de la página…</title>
<meta charset=»UTF-8″>
<meta name=»description» content=»Descripción de la página…»>
</head>
<body>
<h1>… </h1>
<p>…</p>
</body>
</html>
Cómo hacer una página web HTML
Ahora vamos a ver cómo crear una página web en HTML. El primer paso es crear una carpeta en tu ordenador para guardar tu sitio web. A continuación, abre un editor de texto, puede ser el bloc de notas, un editor en línea, etc.
Una vez tengas el documento abierto es hora de implementar las etiquetas HTML que hemos visto anteriormente. Cuando tengas la estructura de tu web hecha, texto las imágenes, etc, es hora de darle estilo con CSS.
Cuando guardes el documento, debes ponerle un nombre y tiene que ser index.html
Entornos de desarrollo o editores
Como hemos comentado anteriormente, podríamos utilizar un simple bloc de notas para escribir HTML, es útil utilizar un editor código más avanzado. Por ello, os enseñamos algunos editores para hacer tu página web:
- Brackets: es un editor muy bueno para quien esté empezando en este mundillo. Además, tiene unos atajos de teclado muy bueno y una vista previa de los cambios en tiempo real.
- Visual Studio Code: es el más utilizado por los desarrolladores. Es de código abierto y gratuito, además es muy potente. Tiene muchas extensiones y gran soporte para gran variedad de lenguajes como .NET
Así que ya sabes cómo crear una página web en HTML, ahora es el momento de poner tus habilidades en práctica. Si tienes cualquier duda escríbenos un comentario.
¡Hasta el siguiente artículo!
