Veremos la estructura de los documentos HTML y de las etiquetas, además crearemos nuestra primera página WEB. Explicaremos primero la estructura básica de las etiquetas, para que al ver la estructura de los documentos, las etiquetas no nos suenen a chino.
ESTRUCTURA BÁSICA DE UNA ETIQUETA HTML
Cómo ya hemos dicho en el capítulo anterior el HTML es un lenguaje de marcas (etiquetas). Así todo nuestro texto estará encerrado entre etiquetas: Una etiqueta de inicio y una etiqueta de fin.
Funcionan de la siguiente manera:
<etiqueta> inicio de una etiqueta.
</etiqueta> el cierre de una etiqueta.
Algunas etiquetas, que iremos viendo a lo largo del manual, no llevan etiqueta de cierre, en ese caso se cierra, dentro de la propia etiqueta, tal y cómo vemos a continuación.
<etiqueta /> Los elementos que no llevan etiqueta de cierre, se cierran en la misma etiqueta de apertura, por ejemplo: <br />
Las etiquetas deben de ir siempre en minúsculas. Encontraréis muchas páginas WEB en las que las etiquetas están en mayúsculas, hasta el HTML 4.0 era indiferente la utilización de minúsculas o mayúsculas y muchos autores utilizaban las mayúsculas por claridad.
Todo lo que vaya entre dos etiquetas HTML se verá afectado por éstas, por ejemplo
<h1>Esto es un encabezado</h1>
<p>Pero esto no, esto es un párrafo</p>
ANIDACIÓN DE ETIQUETAS
Algunas veces, necesitaremos añadir dos etiquetas a un texto, por ejemplo, supongamos y esto es sólo un ejemplo, que un título sea tambien un enlace, veamos cómo lo haríamos (utilizamos pseudo código puesto que todavía no hemos visto el código html).
<título><enlace> loquesea.com</enlace></título>
En cambio el siguiente código sería incorrecto
<título><enlace> loquesea.com</titulo></enlace>
LOS ATRIBUTOS DE LAS ETIQUETAS
Las etiquetas pueden a veces llevar atributos que nos permiten especificar más las etiquetas que utilizamos. Los atributos son como los adjetivos. Por ejemplo supongamos que tenemos una etiqueta <hombre> y queremos especificar que es guapo. Así que utilizaremos el atributo "apariencia" a este atributo le daremos el valor de "guapo". Nos quedaría apariencia="guapo". Así nuestro <hombre> nos quedaría <hombre apariencia="guapo">.
Veamos la etiqueta <html> nos dice que se trata de un documento html, pero podemos utilizar el atributo lang para especificar el idioma del contenido del documento, así nos quedaría <html lang="es">. Los atributos se especifican indicando el nombre del atributo (lang) y su valor (es). En catellano estaríamos diciendo: esto es un documento html en español. Los atributos siempre se añaden en la etiqueta de inicio y los valores de un atributo siempre deben estar entre comillas.
ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML
Todo documento HTML está formado por 3 secciones principales:
1º La declaración del documento: Es dónde le decimos al navegador: "eh, oiga que esto es un documento html". Es obligatoria, las páginas se ven igualmente si no se define el documento, por eso muchos webmasters "profesionales" la omiten, pero al hacerlo, cometen un grave error. En la declaración del documento establecemos el tipo de documento de que se trata, el estándar al que nos vamos adherir al hacer la página, y hacemos un enlace a la DTD de la w3c sobre el estándar en cuestión.
Esta declaración ayuda al navegador, que sabe en todo momento qué lenguaje y en qué versión (DTD) está construida la página, y si tiene alguna duda puede incluso consultar.
La DTD especifica la sintaxis de una página web en lenguaje SGML (Standard Generalized Mark up Language) - tranquilos no tenemos que aprender ni a hacer DTDs ni SGML, eso ya lo sabe el navegador.
Las aplicaciones derivadas de SGML (como el html) utilizan la DTD para especificar las reglas que deben aplicarse al marcado de los documentos.
Una DTD de XHTML especifica de forma precisa, la sintaxis permitida en un documento XHTML de forma que el navegador pueda entenderlo.
Actualmente hay tres tipos de DTD para el XHTML:------**STRICT : Estricta.
<!DOCTYPE html
PUBLIC "-W3CDTD XHTML 1.0 StrictEN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">##---------**TRANSITIONAL:** de transición, que es la más utilizada y la que vamos a utilizar nosotros.
<!DOCTYPE html
PUBLIC "-W3CDTD XHTML 1.0 TransitionalEN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">##---------**FRAMESET : para páginas que utilizan marcos, que es la que utilizaremos al explicar cómo hacer las páginas con marcos.
<!DOCTYPE html
PUBLIC "-W3CDTD XHTML 1.0 FramesetEN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">##------Todo el resto del documento debe estar contenido entre las etiquetas <html></html>. En estas etiquetas debemos especificar la lengua en la que está redactado el contenido del documento, en nuestro caso se trata de español, por lo que pondríamos: <html lang="es"></html>.
El XHTML hace especial hincapié en que las páginas sean accesibles para todo tipo de dispositivos, especificando el idioma, ayudamos a los dispositivos de voz.
Con lo que hemos visto hasta el momento, nuestro documento quedaría así:
<!DOCTYPE html
PUBLIC "-W3CDTD XHTML 1.0 TransitionalEN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">------<html lang="es">
</html>
