Las instrucciones HTML están encerradas entre los caracteres: < y > y las llamamos etiquetas.
La mayoría de las etiquetas HTML requieren una marca de comienzo, cláusula de apertura y otra de finalización, cláusula de cierre.
Índice de contenidos del artículo
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Cuerpo de la página.
</body>
</html>Una página HTML es un archivo que generalmente tiene como extensión los caracteres html. Por ejemplo podemos llamar a nuestra primera página con el nombre: pagina1.html
Estos son los elementos básicos que toda página HTML debe llevar.
La primera etiqueta es DOCTYPE, la cual debe aparecer y sirve para informar al navegador acerca de la versión de HTML con la que está codificada nuestra página. La que se indica en el ejemplo es la de HTML5, y es la más simple si la comparamos con las anteriores.
Descubre más cosas sobre HTML5 en Novedades y estructura de páginas web HTML5
Una página HTML tiene dos secciones muy bien definidas que son la cabecera:
<head>
</head>Y el cuerpo de la página:
<body>
Cuerpo de la página.
</body>Otra cosa importante es que el lenguaje HTML no es sensible a mayúsculas y minúsculas, es decir podemos escribirlo como más nos guste, además no requiere que dispongamos cada marca en una línea (podríamos inclusive escribir toda la página en una sola línea! cosa que no conviene ya que somos nosotros quienes tendremos que modificarla en algún momento).
Recuerda que dentro de los elementos HTML podemos meter lo que queramos. Img, tablas, listas, etc. Tal como iremos desarrollando en el resto de artículos relacionados.
Copia el código anterior con la estructura básica de la página en un archivo de texto y luego le cambias la extensión de .txt a .html.
Nota: puede que la extensión del archivo no sea visible por defecto en tu equipo, esto se puede cambiar en las opciones de carpeta de Windows.
Una vez hecho eso, la página pasa a abrirse de manera predefinida con el navegador web
Para volver a editar su contenido tendremos que seleccionar Abrir con.. y emplear un editor de texto como el Block de notas.
Normalmente, en diseño web empleamos editores de código que nos facilitan la escritura de los lenguajes de desarrollo. Echa un vistazo aquí al ranking con las mejores agencias de diseño web en Madrid de la mano de SortList.
Uno de los más populares actualmente es Visual Studio Code, aunque este puede ser un poco pesado, ya que está pensado para el uso de otros lenguajes de programación como JavaScript. Si sólo quieres editar HTML y CSS hay muchos otros mucho más livianos como Notepad++ o Bluefish.
