Explorando la estructura de una Página Web con HTML5: Fundamentos para principiantes
ÍNDICE
- Estructura de una página web con HTML5
- Estructura de una página web: Etiquetas básicas
- El editor de texto
Estructura de una página 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>Estructura de una página web: Etiquetas básicas
- 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.
- La etiqueta <html> es la página web propiamente dicha.
- 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.
- 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.
El 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 Visual Studio Code, que puedes descargártelo de manera gratuita.
VISUAL STUDIO CODE es un editor de código gratuito desarrollado por Microsoft que se adapta bien a una amplia variedad de necesidades de desarrollo, desde proyectos personales hasta aplicaciones empresariales complejas. Su flexibilidad y extensibilidad lo convierten en una herramienta popular entre los desarrolladores de software en todo el mundo.
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 Visual Studio Code«.
Pingback: Primeras etiquetas con HTML5