Tienda » BLOG » Estructura básica de una web con HTML5
Estructura básica de una web con HTML5

Estructura básica de una web con HTML5

Estructura básica de una web con HTML5
Estructura básica de una web con HTML5

Explorando la estructura básica de una Web con HTML5: Fundamentos para principiantes

ÍNDICE

Elementos básicos de una web con HTML5

El lenguaje de programación en HTML5 no es otra cosa que un lenguaje de marcados, es decir, incorpora etiquetas para estructurar nuestra página web. Por tanto, lo que debemos conocer son los nombres de dichas etiquetas, y aprender su uso. Para comenzar deberemos entender la estructura básica de una página web:

<!DOCTYPE html>

<html>

<head>

          <meta charset="UTF-8"/>
          <title>Título de mi sitio</title>

</head>

<body>

          <header></header>
          <nav></nav>
          <article></article>
          <footer></footer>

</body>

</html>

Etiquetas básicas con HTML5

  1. La etiqueta <!DOCTYPE html> es el tipo de documento, es decir, la forma en que los navegadores lo visualizan. Sin esta etiqueta puede ocurrir que el navegador no vea nuestra web correctamente. Es aconsejable colocarla.
  2. La etiqueta <html> es la página web propiamente dicha.
  3. La etiqueta <head> sería la del encabezado o cabecera. Suele ponerse para cuestiones de información opcional, como por ejemplo el título de nuestra web.
  4. La etiqueta <body> se corresponde con el contenido o cuerpo de toda nuestra página. Todo lo que hagamos en nuestra web tiene que estar «encerrado» entre esta.

Como se puede observar, todas las etiquetas tienen una cláusula de apertura y de cierre. Por ejemplo la etiqueta «body», tendría una cláusula de apertura <body>, y otra cláusula de cierre </body>.

Otra cuestión a tener en cuenta es que las etiquetas se encierran entre los caracteres «<» y «>», añadiéndose una barra «/» en la cláusula de cierre.

Las mayorías de etiquetas tienen cláusula de apertura y de cierre, aunque esta regla no se cumple en todas.

Finalmente, hay que mencionar que las citadas etiquetas se tendrán que colocar siempre que creemos una página web dentro de nuestro sitio web.

Editor de texto

Una vez tengamos claro que esta estructura se divide en dos bloques, «Cabecera» y «Cuerpo», y que todo ello debe estar contenido en la etiqueta <html>, el siguiente paso es escribirlo en un editor de texto, como por ejemplo el Bloc de notas que Windows trae por defecto.

Uno que se recomendaría utilizar para programar en HTML y CSS sería el Notepad++, que puedes descargártelo de manera gratuita.

Acto seguido deberemos de guardar el archivo con el nombre que estimemos oportuno seguido de un .html. Por ejemplo index.html para nombrar a nuestra página principal.

El archivo en cuestión aparecerá con forma de página web. Para abrirlo de nuevo y poder trabajar sobre el mismo, tendremos que pinchar con el botón derecho del ratón y elegir «Editar con Notepad++».

Vídeo

(*) NOTA: En breve publicaremos un vídeo. En futuros post aprenderemos a generar código con IA.

COMPARTE:

1 comentario en “Estructura básica de una web con HTML5”

  1. Pingback: Primeras etiquetas con HTML5

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Carrito de compra
Scroll al inicio