Imos ver os pasos para crear un simple e sinxelo documento. Basicamente definiremos a estrutura do mesmo. Empregaremos o exemplo que aparece na Web Abrirllave, que simplemente consiste na creación de dous parágrafos na páxina Web.
. Escapemos! (CC BY-SA). Elaboración a partir das imaxes: Clker-Free-Vector-Images en Pixabay. Emergency. (CC0). W3C en Wikimedia Commons. HTML5 logo and wordmark. (CC BY SA)
Os documentos HTML están formados por elementos que na súa gran maioría deben escribirse delimitados por unha etiqueta de inicio <etiqueta> e outra de fin </etiqueta>, tales como: html, head, body, title ou p. Con todo, existen outros elementos que non necesitan ser pechados coa etiqueta de fin, por exemplo: meta.
Un documento HTML contén marcas (etiquetas) que se escriben empregando os caracteres menor que "<", maior que ">" e barra inclinada "/".
As etiquetas de inicio (<html>) e fin (</html>) representan ao elemento raíz (html) que en todo documento HTML hai que escribir.
<html>
</html>Dentro do elemento html, é dicir, entre <html> e </html>, débese escribir o elemento head que pode conter diversa información sobre o documento.
<html>
<head>
</head>
</html>Entre <head> e </head> pódense escribir outros elementos. Por exemplo, o elemento title que serve para indicar o título do documento.
<html>
<head>
<title>Exemplo de 2 parágrafos</title>
</head>
</html>O texto escrito entre <title> e </title>, é dicir Exemplo de 2 parágrafos, visualízase na parte superior da pestana onde se mostra a páxina Web.
Nun documento HTML, despois do head, hai que escribir o elemento body:
<html>
<head>
<title>Exemplo de 2 parágrafos</title>
</head>
<body>
</body>
</html>O elemento body alberga todo o contido (parágrafos, imaxes, vídeos...) do documento, que se amosarán na páxina Web.
Neste caso, entre <body> e </body> inclúense dous elementos p (parágrafos), delimitados pola etiqueta de inicio <p> e a de peche </p>:
<html>
<head>
<title>Exemplo de 2 parágrafos</title>
</head>
<body>
<p>Este é o primeiro parágrafo.</p>
<p>Isto é o segundo parágrafo.</p>
</body>
</html>Finalmente, completaremos o código deste primeiro exemplo engadindo máis elementos necesarios:
<!DOCTYPE html>
<html lang="gl">
<head>
<meta charset="utf-8">
<title>Exemplo de 2 parágrafos</title>
</head>
<body>
<p>Este é o primeiro parágrafo.</p>
<p>Este é o segundo parágrafo.</p>
</body>
</html>Esta é a forma de indicar ao navegador onde se visualice o documento que este está escrito na versión HTML5.
Isto serve para especificar, mediante o atributo lang, o idioma do contido do elemento "html". Empréganse os códigos da norma ISO 639. (gl para o galego, es para o español, eu para o euskera, ca para o catalán, en para o inglés,…).
Así, indícase a codificación de caracteres do documento, nesta ocasión UTF-8 (8-bit Unicode Transformation Format, Formato de Transformación Unicode de 8 bits). Obsérvese que, o elemento meta está baleiro (non ten contido) e, en consecuencia, non necesita ser pechado escribindo </meta>.
Desta forma, escribimos a estrutura básica dun documento HTML que mostra por pantalla dous parágrafos. O seguinte gráfico amosa esa estrutura de elementos.
Contidos elaborados a partir do documento: “Primer documento HTML | Tutorial de HTML | Abrirllave.com”, [En liña]. Dispoñible: http://www.abrirllave.com/html/primer-documento-html.php.(CC BY)
Podemos continuar engadindo elementos aos nosos documentos HTML, seguindo esta mesma páxina (Abrirllave.com). Na seguinte táboa explícasenos nos apartados diferentes elementos a introducir no documento. Inclúense para cada apartado exercicios resoltos. (Premer na cela correspondente para acceder á información).
Os seguintes catro vídeos forman parte do Curso de HTML5 elaborado por Pildorasinformaticas. É un excelente titorial para ir elaborando u documento HTML máis completo paso a paso.
Licenciado baixo a Licenza Creative Commons Recoñecemento Compartir igual 4.0
