HTML

De MediaWiki
Ir a la navegación Ir a la búsqueda


Versións de HTML
Metalinguaxes e linguaxes


Introdución

HTML, siglas en inglés de HyperText Markup Language (‘linguaxe de marcado de hipertexto’), fai referencia á linguaxe de marcado para a elaboración de páxinas web.

Serve de referencia do software que conecta coa elaboración de páxinas web. Define unha estrutura moi básica e un código (denominado código HTML) para a definición de contido dunha páxina web, coma texto, imáxenes, videos, xogos, etc.

É un estándar a cargo do World Wide Web Consortium (W3C), organización adicada á estandarización de casi todas as tecnoloxías ligadas á web.

HTML considérase unha das linguaxes máis imporantes sendo crucial na aparición, desenvolvemento e expansión da World Wide Web (WWW).

HTML analizado cun OlaMundo

Partiremos deste código html que pode estar gardado nun ficheiro OlaMundo.html

<!DOCTYPE html>
<!-- Esto é un comentario -->

<html>
  <head>
    <meta charset="utf-8">
    <title>Exemplo HTML</title>
  </head>

  <body>
    <h1>Capítulo 1</h1>
    <p>Nun lugar do Ucha...</p>
  </body>
</html>
Parteshtml.gif

En primeiro lugar, veremos que os elementos que establecen a estrutura dun documento (X)HTML son os seguintes:

  • html: Elemento raíz dun documento (X)HTML.
  • head: Cabeceira. Contén outras etiquetas como:
  • title: Título do documento.
  • meta: Metadatos (información sobre o documento).
  • body: Corpo do documento.
Algunhas etiquetas que se usan na HTML

O código html, por ser estructurado, pode ser procesado polos navegadores (ou calquer outro programa). E posible crear unha árbore en memoria, para representar a sua estrutura e contidos:

Por ser agora unha estrutura de datos, os navegadores o poden percorrer para extrar a información e amosala; ou para engadir elementos novos

Outra forma de representarlo é medieante caixas na que se amosan os diferentes ámbitos: a cadea "Capítulo 1" está no ámbito H1, que está dentro do ámbito BODY que a súa vez está dentro do ámbito HTML.

En resumo, se copiamos e pegamos ese código nun editor, e gardamos o ficheiro cunha extensión HTML, que despois abriremos nun navegador... veremos o resultado do noso hola mundo. Básicamente:

  • A páxina amosará coma título "Exemplo HTML"
  • A etiqueta h1 indica que é un header 1 (un texto de maior importancia), e por tanto amosarase máis grande "Capítulo 1"
  • A etiqueta p indica que é un parráfo, así que noutra liña amosarase en tamaño máis pequeno "Nun lugar do Ucha..."

HTML vs XHTML vs HTML5

Evolución das tecnoloxías web

Aquí podes ler unha breve reseña histórica da cuestión. Intentando resumir aínda máis:

  • desde a súa aparición no ano 1991 HTML foi a linguaxe de marcas para a web
  • no 1997 a recomendación HTML 4 do W3C definíu tres tipos de documentos (Strict, Transitional e Frameset) que mantiñan a mesma sintaxe e o mesmo tipo MIME pero se distinguían o número de etiquetas e atributos:
  • Estricto. Só poden usarse etiquetas HTML 4.01 e non permite marcado de presentación.
  • Transicional. Permite tódolos elementos HTML, incluíndo os antiguos, desaconsellados ou en desuso.
  • Marcos ou frames. Similar o anterior, pero usa elementos para frames. Quedou xa obsoleto.
  • no 2000 o W3C desennvolveu o XHTML
  • permitíanse as mesmas marcas e atributos que no HTML (tamén os tres tipos de documentos)
  • pero cunha sintaxe distinta (a sintaxe XHTML, coa rixidez do XML)
  • e un novo tipo MIME, application/xhtml+xml.:
  • coma os servidores adoitan asociar o tipo MIME á extensión dos ficheiros, o costume é que os ficheiros .html se sirvan co tipo MIME text/html e os ficheros .xhtml se sirvan co tipo MIME application/xhtml+xml.
  • a sintaxe XHTML segue a norma XML e por tanto era más rigurosa, mentres que a sintaxe HTML era máis laxa, permitiondo que os navegadores amosen unha web aínda que haiban erros de sintaxe.
  • marcase coma obxectivo que o XHTML substituira completamente a HTML
  • ... pero no 2006 o W3C tivo que recoñecer o fracaso.
  • no 2014 publicouse unha nova versión de HTML: HTML 5. Aborda dun novo xeito o problema dos tipos de documentos, as variantes de sintaxe e os tipos MIME.
  • en HTML 5 desaparecen os tipos de documentos Strict, Frameset y Transitional e só existe un tipo de documento, mezcla dos antiguos tipos Strict e Transitional
  • en HTML 5 manteñense as dúas sintaxes, HTML e XHTML.
  • os documentos con sintaxe HTML deben utilizar o tipo MIME text/html e os documentos con sintaxe XHTML deben utilizar o tipo MIME application/xhtml+xml

Como colofón:

  • HTML5 está superando a situación pasada: e como se permiten as dúas sintaxes, non é tan relevante coñecer as diferenzas entre ambas
  • en todo caso, non son tantas as diferenzas, e podes encontralas documentados con exemplos

Podes ler máis sobre a evolución e as diferenzas... ou pasar a aprender HTML5!

Os documentos HTML deben comenzar cunha declaracón <!DOCTYPE> que lle indique ó navegador que tipo de documento debe esperar. Algunhas posibilidades:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!DOCTYPE html>

Podes ler máis sobre a etiqueta doctype e os elementos váidos segundo cada doctype.

Coñecendo HTML en detalle

Algunhas etiquetas HTML

Existen innumerables sitios onde aprender sobre HTML. Nos seguiremos este titorial en castelan.

Poredes tamén revisar:

Unha vez comprendido HTML, revisaremos a nosa aprendizaxe cun cuestionario de case 200 preguntas de HTML que é bo saber antes de morrer ;)

E paralelamente, levaremos a cabo algúns dos exercicios propostos.

Exercicios

Referencias