En este capítulo vamos a crear nuestro primer documento HTML, nuestro primer archivo se va a llamar index.html, se le suele llamar index.html porque se trata de una convención en todo lo relacionado con el diseño y desarrollo web, que el archivo HTML principal que carga nuestro proyecto se denomine index.html. Y, muy importante, tenemos que poner el nombre del archivo (index) y su extensión (.html).
Veamos la sintaxis básica de un documento HTML típico.
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
Todos los códigos que van entre los signos menor que – mayor que (<>) son denominados etiquetas. Hay etiquetas que abren y cierran en una misma linea de código, y habrá otras etiquetas , como la etiqueta <meta> que sólo abre en una sola etiqueta, es decir, no tiene una etiqueta de cierre. Las etiquetas de cierre tienen una diagonal, con esta forma.
<p>Esto es un párrafo</p>
Las etiquetas HTML pueden tener atributos HTML, los cuales tendrán valores.
Ejm
<p class="parrafo">Párrafo con el atributo class</p>
La etiqueta principal de un documento HTML es <html>. En HTML, las etiquetas y atributos de preferencia van escritos en minúscula, y aunque HTML no distingue entra mayúsculas y minúsculas, la buena práctica (salvo su etiqueta DOCTYPE), la mayoría de sus etiquetas y atributos van en minúsculas.
El documento HTML está compuesto de dos partes:
- La cabecera, entre las etiquetas <head></head>: todo lo que encontremos entre estas etiquetas es para enlazar otro tipo de archivos, como hojas de estilo, algunos archivos de programación Javascript, algunas imágenes que utilizan los sitios web para los iconos que se instalan en los dispositivos móviles o en los mismos navegadores el favicon, los títulos y las descripciones, los cuales afectan al SEO de las páginas. Toda la información guardada en la cabecera se considera metainformación, porque es información que habla de la página, pero que los usuarios no ven.
- El cuerpo, entre las etiquetas <body></body>: todo lo que queramos que se vea a nuestros usuarios va en el cuerpo (body) de nuestro documento.
Es muy importante respetar la jerarquía de como han sido definidas las etiquetas, no se puede dentro de la etiqueta <head> incluir la etiqueta <body>.
Indentación
Hay que ser ordenado, e ir haciendo una jerarquía correcta de las etiquetas para trabajar de manera cómoda y entender el código de manera fácil, para ello indentamos las etiquetas.
Si trabajamos con VSC, este software trae una herramienta denominada Emmet, la cual nos permitirá escribir código HTML y CSS de manera muy rápida. La URL oficial es https://emmet.io.
Si queremos ver los atajos de teclado de VSC, podemos ir a Google y escribir
Visual Studio Code cheat sheet
y las cheat sheets son como tablas que traen los atajos de teclado. Os dejamos un enlace a los atajos de teclado para Windows.
Puntos importantes
HTML, CSS y Javascript forman parte del llamado HTML5, el cual acapara dichas 3 tecnologías. HTML define el contenido, CSS define el formato de dicho contenido, y la programación corre a cargo de Javascript.
No hay que instalar nada, los navegadores web ya entienden estas 3 tecnologías, por lo que lo único que necesitas es un navegador web. Todos los navegadores utilizan tecnologías, las cuales tienen ciertos estándares. Las personas que se encargan de definir los estándares para que los navegadores muestren prácticamente el mismo contenido, son la w3c, cuya página oficial es https://w3.org. Particularmente la documentación de la w3c es muy tediosa de leer.
Con el tiempo salió otro grupo que se dedica a definir los estándares, y que es la whatwg, cuya página oficial es https://html.spec.whatwg.org. Hubo un tiempo donde estos dos grupos de personas tenían ciertas diferencias, pero desde hace tiempo, ambos consorcios han firmado un acuerdo de colaboración para encargarse de manera conjunta de ir definiendo lo que se vaya dictando para las nuevas características que vayan saliendo respecto a HTML.
Si queremos tener toda la información disponible acerca de esta tecnología, podéis encontrarla en otra página web, denominado MDN (Mozilla Developer Network), que, aunque no sea el sitio oficial, entre los diseñadores y desarrolladores web se ha convertido en nuestra documentación oficial, provista por la gente de Mozilla.
También encontraremos información muy valiosa en la página web https://htmlreference.io,