+321 123 4567
info@test.com
My Account
  • La escuela
    • Codespacer
    • Partners
    • Eventos
  • Nuestros cursos
  • Si eres empresa
  • Blog
  • <Contacto/>
CAMPUS VIRTUAL
  • La escuela
    • Nosotros
    • Alumni
    • Partners
  • Nuestros cursos
  • Si eres empresa
  • Blog
  • <Contacto/>
  • Mi cuenta

Cómo crear una página web en HTML

Publicado 31/08/2021
cómo crear una página web en HTML

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

lenguaje HTML

¿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!

Entrada anterior
Cómo aprender a programar desde 0
Entrada siguiente
¿Qué es el hacking ético?

Entradas recientes

  • Diseño UI y UX: cuáles son las diferencias entre los dos
  • Qué es un data scientist y sus funciones
  • JavaScript vs. TypeScript – principales diferencias

Categorías

  • Blockchain (2)
  • BlueTeam (2)
  • Ciberseguridad (20)
  • Data Science (1)
  • Inteligencia Artificial (2)
  • Interfaz de Usuario (1)
  • IoT (2)
  • Programación (22)
  • Realidad Virtual (1)
  • UI (1)
  • Videojuegos (8)

¿Dónde estamos?
C/ Compositor Lehmberg Ruiz, 13
29007 Málaga

952 300 426

682 82 70 17

logo-code-space-blanco

© Codespace | Todos los derechos reservados

Facebook
Instagram
Twitter
LinkedIn
YouTube
Telegram
Meetup

¿Quieres estar al día de nuestras frikadas?

Suscríbete y se uno de los nuestr@s !!!

Aviso Legal | Política de cookies | Política de privacidad | Condiciones Contratación | Tablón de anuncios | | Condiciones de pago con Sequra |

Utilizamos cookies propias y de terceros para mejorar nuestros servicios y mostrarte publicidad relacionada con tus preferencias mediante el análisis de tus hábitos de navegación.. Configuración CookiesAceptar
Política de Privacidad y Cookies

Resumen de Privacidad

Utilizamos cookies para que podamos ofrecerle la mejor experiencia de usuario posible.
La información de las cookies se almacena en su navegador y realiza funciones tales como reconocerlo cuando regresa a nuestro sitio web y ayudar a nuestro equipo a comprender qué secciones del sitio web le resultan más interesantes y útiles. Estas cookies se guardarán en tu navegador solo con tu consentimiento. Tienes la opción de configurar y rechazar estas cookies, aunque puede afectar a algunas funciones de navegación.
Necessary
Siempre activado
Las cookies principales son necesarias para el correcto funcionamiento de la web. Esta categoría únicamente incluye cookies que garantizan las funciones básicas y la seguridad del sitio y no almacenan ninguna información personal.
Non-necessary
Cualquier cookie que puede no ser imprescindible para el funcionamiento de la web. Se utilizan para recopilar datos personales del usuario a través de anuncios y otros contenidos incrustados. Son cookies denominadas no necesarias y para las que se requiere el consentimiento expreso del usuario antes de ejecutarlas.
GUARDAR Y ACEPTAR