Los documentos HTML son archivos de texto plano formados por etiquetas de apertura y cierre < >, que permiten dar formato al contenido del documento.
Una p谩gina web es el resultado que ofrece un navegador al interpretar dicho documento. As铆 pues, la estructura b谩sica de un documento HTML es:
Tanto la declaraci贸n del tipo de documento, como las etiquetas html, head y body son opcionales, deber铆an de incluirse en el documento para que 茅ste sea legible y correcto.
En esta parte del curso veremos las etiquetas de la cabecera a fondo.
Elementos HTML.
Como ya hemos visto anteriormente, la etiqueta <html> es la ra铆z del documento por lo que <head> y <body> deben de estar contenidas ella. Adem谩s head y body no deben de solaparse entre s铆, por lo tanto el documento tiene que tener la estructura que aparece en la plantilla.
Tambi茅n estos dos bloques pueden tener subbloques que tampoco deber谩n de solaparse.
Una buena pr谩ctica Web es introducir comentarios entre bloques para saber que se aproxima. Para realizar un comentario Web se utiliza la estructura siguiente:
Declaraci贸n de tipo de documento DTD
La declaraci贸n de tipo de documento se coloca siempre al principio del documento y fuera de todo bloque. La DTD (Document Type Definition) es una documento externo con extensi贸n .dtd y que tiene tres formas:
DTD estricta:
Esta forma de declaraci贸n implica que todo el documento Web cumpla escrupulosamente con las recomendaciones sobre las estructuras de un documento web, almacenando toda la informaci贸n sobre el formato en una hoja de estilos CSS. La estructura b谩sica se declara de esta forma:
DTD de transici贸n:
Si queremos combinar estilo e informaci贸n de formato en nuestro documento HTML entonces debemos de utilizar la declaraci贸n de transici贸n:
DTD con marcos:
Si queremos incluir marcos en el documento tendremos que usar una DTD muy similar a la anterior pero que sustituye el elemento body por un frameset, en este caso la declaraci贸n ser铆a:
En la actualidad la declaraci贸n m谩s simple es la de HTML5 de la forma:
Etiquetas HTML, head y body
Ya has visto que cada elemento puede tener atributos y contenido. La mayor铆a de ellos tienen una etiqueta de inicio, una etiqueta de fin y un contenido encerrado entre ambas. Si no tienen contenido se les llama vac铆os.
Los atributos de un elemento son siempre opcionales y se colocan en la etiqueta de apertura de la forma que:
De una p谩gina Web podemos decir que disponemos de elementos que son b谩sicos representar en forma de etiqueta los cuales son:
<HTML>
Seg煤n la W3c, delimita el contenido del documento. Su apertura y cierre son opcionales, por lo que un documento HTML funcionar谩 sin sus etiquetas de <HTML></HTML>
En cuanto a los atributos, esta etiqueta usa principalmente tres atributos que son:
● dir: Indica el sentido de lectura del texto cuando no corresponde al habitual (谩rabe, chino, etc.). Utiliza los valores de LTR para indicar de izquierda a derecha y RTL para derecha a izquierda.
● lang: Indica el idioma por defecto del documento. ES (espa帽ol); EN (ingl茅s); DE (alem谩n) FR (franc茅s), etc.
● version: Indica la versi贸n del lenguaje HTML. Hoy en deshuso porque lo proporciona la declaraci贸n <!DOCTYPE>
Es importante indicar que la etiqueta HTML no puede ir sola sino que ir谩 seguida de etiqueta HEAD y BODY.
<HEAD>
Seg煤n la W3C, la cabecera del documento servir谩 para delimitar la cabecera del documento y al igual que la anterior etiqueta, su uso solo es opcional. Es una etiqueta con cierre, por lo que todo el contenido ir谩 entre la apertura y cierre de etiqueta. Utiliza los mismos atributos de dir y lang al igual que la anterior etiqueta, adem谩s de un atributo profile que indica donde est谩n los perfiles para interpretar los elementos META. Como valores puede tomar el URI (Identificador Uniforme de Recursos en ingl茅s), o la direcci贸n web completa. Incluir谩n dentro del HEAD los elementos <title>, <base>, <meta>, <link>, <object>, <script> y <style> cuyos elementos son opcionales salvo el de <title> que es OBLIGATORIO. El contenido de la cabecera es informaci贸n general de todo el documento, por eso se escribe al principio al ser el primero que analiza el navegador y los motores de busqueda Web.
<BODY>
Esta etiqueta delimita el cuerpo del documento. Tambi茅n la declaraci贸n y cierre es opcional. Aparte de los atributos anteriores, utiliza una serie de atributos y eventos:
● id: Sirve para asginar un nombre 煤nico a un elemento.
● class: Sirve para asignar un nombre de clase a un elemento.
● title: Sirve para agregar un comentario asociado a un elemento.
● style: Sirve para aplicar informaci贸n de estilo a un elemento.
● onload: Este evento ocurre cuando el navegador finaliza la carga de un documento.
● onunload: Este evento ocurre cuando el navegador elimina un documento de una ventana o marco.
Existen una serie de atributos desaprovados como font-color; bgcolor; vlink; text; etc., que ya no se usan porque ahora los estilos es mejor ponerlos en hojas de estilos CSS.
Base y meta
La etiqueta BASE indica la ra铆za del sitio Web resolviendo las direcciones relativas. No tiene etiqueta de cierre. Utiliza un 煤nico atributo href que indica la direcci贸n ra铆z del documento.
As铆 en caso de tener una direcci贸n relativa como por ejemplo /cursos.html, la direcci贸n se completar铆a de manera absoluta de la forma https://mirpas.com/cursos.html.
Por otro lado, la etiqueta META de la cual ya hemos visto ciertas caracter铆sticas, indica un conjunto de propiedades generales del documento como al autor, la descripci贸n del sitio, palabras claves, herramientas utilizadas, tipo de contenido, etc., etc.
Como hemos visto anteriormente, las <meta name>, se utilizan para optimizar el resultado de los motores de busqueda, y el resultado no se muestra en pantalla. Las <meta http-equiv>, se utilizan para dar instrucciones a los navegadores, es decir, ejercen cierto control sobre ellos. Tienen influencia sobre lo que aparece en pantalla.
META NAME:
● Proporcionan informaci贸n sobre la p谩gina:
● Especifica informaci贸n para el buscador:
● Para administraci贸n del sitio:
META HTTP-EQUIV:
● Tipo de contenido:
● Manejo de cookies:
● Actualizaci贸n/redirecci贸n de la p谩gina:
● Transiciones de la p谩gina:
● Control parental:
● Manejo de la cach茅:
A su tiempo se ver谩n todos los atributos de la etiqueta META, pero por ahora lo vamos a dejar para no hacer muy largo el cap铆tulo.
