Antes de intentar cosas complejas en el entorno web deberíamos preocuparnos de entender mínimamente las bases del lenguaje que vamos a utilizar para desarrollar documentos web, así que vamos a comenzar por entender el
XHTML y sus peculiaridades.
La primera duda que nos puede surgir al intentar desarrollar algo en web es;
"HTML o XHTML?"Veamos las diferencias.
Tanto uno como otro surgen del
SGML; HTML es
"hijo" de SGML y XHTML es
"nieto" de SGML, ya que su
"padre" es XML, este sí, descendiente directo de SGML.
Vemos entonces que son de la misma familia, pero que cada uno pertenece a una rama diferente y por tanto tiene sus características y peculiaridades diferentes y específicas.
Ambos son lenguajes de
"etiquetas" (tags) pero sus reglas no son las mismas; HTML es mucho más
relajado en cuanto a normativa sintáctica y nos permite hacer cosas mal, pero XHTML hereda de su "padre" XML una cierta manía
"formal" e impide hacer mal muchas cosas que HTML permite.
La principal diferencia entre ambos lenguajes es la siguiente; XHTML separa el
contenido de la
forma y HTML no lo hace.
En
XHTML definimos los
contenidos, la
forma se la dará el
CSS aplicado, mientras que en HTML la forma y el contenido están mezcladas de forma confusa e inconsistente.
Esta es la principal característica que nos hará decidirnos por un lenguaje u otro; necesito generar contenidos dinámicos independientes de la forma, o me da igual?
HTML incluye entre sus etiquetas muchas destinadas a dar
forma a sus contenidos; fuente, tamaño, negrita, cursiva, etc.
XHTML sustituye esas etiquetas por otras destinadas a dar
sentido a sus contenidos; titular, subtitular, destacado, etc.
Es una aproximación muy diferente: en el caso del XHTML decimos si un contenido es un titular, subtitular, cuerpo normal, si debe ser destacado, etc, mientras que en HTML estamos diciendo que ese contenido va en fuente Arial Negrita de 14, en Cursiva, etc. Es muy diferente.
Al diseñar en HTML estamos mezclando conceptos; los contenidos y su representación, mientras que al diseñar en XHTML dividimos el problema en dos partes muy diferenciadas, por una parte definimos los contenidos y su significado, y por otra parte definimos su representación (CSS).
Nosotros, como diseñadores de soluciones
Velneo, contamos con la misma dicotomía en nuestro sistema; por una parte la bd (contenidos), y por otra la apariencia (objetos visuales), así que adoptaremos
XHTML + CSS como nuestro modelo de desarrollo web.
Las
etiquetas (tags) que vamos a poder utilizar son las siguientes:
a, abbr, acronym, address, applet, area, b, base, basefont, bdo, big, blockquote, body, br, button, caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, frame, frameset, h1, h2, h3, h4, h5, h6, head, hr, html, i, iframe, img, input, ins, isindex, kbd, label, legend, li, link, map, menu, meta, noframes, noscript, object, ol, optgroup, option, p, param, pre, q, s, samp, script, select, small, span, strike, strong, style, sub, sup, table, tbody, td, textarea, tfoot, th, thead, title, tr, tt, u, ul, var
Aparte de estas existen otras propias del HTML, ya
obsoletas, y cuyo uso queda
prohibido de ahora en adelante, y son:
applet, basefont, center, dir, font, isindex, menu, s, strike, u
No son muchas etiquetas, y su uso nos hará acostumbrarnos a todas y cada una de ellas hasta dominarlas completamente.
Veamos cuál va a ser nuestra unidad mínima de trabajo: el
ELEMENTO.
Un elemento está compuesto por:
- Una apertura de etiqueta
- Ninguno o más atributos
- Un texto
- Un cierre de etiqueta
Ejemplo:
<p class="estandard">Texto del párrafo</p>
donde
- <p> es la apertura de etiqueta
- class="estandard" es un atributo
- Texto del párrafo es el texto contenido entre la etiqueta de apertura y la de cierre
- </p> es el cierre de etiqueta
Aquí quiero comentar unas
diferencias muy notables entre
HTML y
XHTML:
- en HTML estamos acostumbrados a abrir etiquetas, pero puede ser que no a cerrarlas. XHTML obliga a cerrar siempre una etiqueta que se abre.
- en HTML puede ser que funcionen etiquetas mal anidadas (ej; <p><a href="www.loquesea.com">loquesea.com</p></a>), pero XHTML nos obliga a seguir un orden estricto a la hora de cerrar etiquetas; el mismo por el que se han abierto pero a la inversa, en nuestro ejemplo (<p><a href="www.loquesea.com">loquesea.com</a></p>).
- tanto los descriptores de etiqueta como sus atributos como los nombres de los atributos van en minúsculas. Aquí vemos que el editor HTML de Velneo es eso, un editor HTML que no XHTML.
- los valores de los atributos van entre comillas, no como en HTML.
Inciso. Si el editor HTML de Velneo no es ideal, cuál deberíamos usar?
- Word NO. Word inserta una serie de etiquetas "basura" que fundamentalmente engordan nuestros documentos y lo hacen no compilante, ilegible e inservible.
- Dreamweaver. Se puede usar con conocimiento de causa, es decir, debemos conocer XHTML y saber eliminar toda la basura que introduce el programa en nuestros documentos.
- FrontPage NO. Hablamos de editores HTML, por favor...
- Alguno gratuito. Lo mismo que con Dreamweaver, con conocimiento de causa y con la escoba preparada.
El editor ideal HTML es nuestro cerebro, nuestros conocimientos de XHTML y nuestras manitas, que junto con un editor de textos como por ejemplo el Bloc de notas de Windows, nos permitirán confeccionar documentos estructurados, compilantes, legibles, usables y corectos.
Una vez entendida la unidad mínima de trabajo, el
ELEMENTO, veamos su clasificación.
Los elementos se clasifican en:
- Elementos en línea (a, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var)
- Elementos de bloque (address, blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, nos-cript, ol, p, pre, table, ul, además de dd, dt, frame-set, li, tbody, td, tfoot, th, thead, tr)
Los elementos
button, del, iframe, ins, map, object, script, pueden ser considerados tanto como en línea como de bloque dependiendo de las circunstancias.
Una vez vistos estos conceptos básicos pasemos a la parte fundamental:
estructurar nuestros documentos.
Todos nuestros documentos tendrán siempre
tres secciones básicas y fundamentales:
- Inicio y fin de documento. Viene determinado por las etiquetas <html> y </html>. Irán siempre (salvo determinadas especificaciones que veremos más adelante) al principio y fin del documento.
- Cabecera. Encerrada entre <head> y </head>. Aquí definiremos elementos como el Título del documento, metainformación sobre el documento, links a documentos css o javascript, etc.
- Cuerpo. Encerrado entre <body> y </body>, que define el contenido de nuestro documento y supondrá entorno a un 90% de nuestro documento.
Como el 90% del trabajo lo tenemos en el cuerpo del documento veamos cómo
MARCAR correctamente nuestros contenidos para darles sentido semántico.
PÁRRAFOS (<p></p>)Un párrafo es, como hemos visto, un elemento de
bloque y como tal ocupa por defecto la anchura disponible en la ventana del navegador.
No tiene atributos específicos pero se le pueden asignar toda una serie de atributos básicos, de internacionalización y de eventos.
Por similitud con un documento
Word, diremos que un párrafo es aquello comprendido entre el inicio de una línea de texto y un
"Intro".
Inciso. Word es quizás el editor de textos más utilizado del planeta y por ende el peor utilizado también. Cuando empezamos a escribir un texto con Word, tecleamos letras y espacios hasta llegar a un punto y aparte. Esto es un párrafo. Muchos usuarios introducen "Intros" adicionales para separar un párrafo del siguiente, pero esto no se hace así: hay una propiedad del documento llamada separación entre párrafos que se usa para tal fin. No hay que introducir "saltos de línea" o "párrafos en blanco" para separar párrafos, basta con definir la separación entre párrafos y Word ya sabe lo que tiene que hacer cuando pulsamos "Intro".
Un párrafo empieza por <p> y termina </p>.
TÍTULOS DE SECCIONES (<h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5> y <h6></h6>)Es habitual que el contenido de nuestro documento se estructure a su vez en
secciones de mayor o menor importancia. Para indicar los
títulos de dichas secciones usaremos las etiquetas
h, siendo h1 la de mayor importancia, reservada normalmente para el Título de la sección, h2 para el subtítulo, y así sucesivamente para subsecciones del documento de cada vez menor importancia dentro del mismo.
Cualquier navegador web interpreta de por sí estas etiquetas destacándolas del resto de texto del documento otorgándoles ciertas características de
tamaño de fuente y
negrita o
cursiva.
También son elementos de
bloque al igual que los párrafos.
Con estas dos simples etiquetas ya podemos estructurar nuestro contenido en secciones de mayor o menor importancia, y a su vez dividir el texto dentro de cada sección en párrafos.
Básico pero fundamental.Ahora veamos cómo marcar el texto dentro de cada párrafo o sección para indicar que va en negrita, cursiva, es una anotación, una corrección, una cita a otro documento, etc.
ÉNFASIS (<em></em>) y MÁS ÉNFASIS (<strong></strong>)Son elementos en
línea a diferencia de los dos anteriores y se utilizan para destacar un texto respecto del resto.
- <em></em> indica que el texto encerrado tiene mayor importancia que el resto y los navegadores lo suelen representar en cursiva.
- <strong></strong> indica que el texto encerrado es de la mayor importancia dentro del documento y los navegadores lo suelen representar en negrita.
Inciso. Elementos de bloque y elementos en línea. La principal diferencia entre unos y otros es cómo ocupan el espacio dentro del documento; los elementos de bloque provocan el salto de línea (empiezan en nueva línea) y ocupan el ancho disponible independientemente de su longitud, mientras que los elementos en línea no provocan salto de línea y ocupan el ancho necesario para mostrar su contenido.
MODIFICACIONES (<ins></ins> y <del></del>)Para indicar las diferentes modificaciones introducidas en un documento disponemos de estas dos etiquetas.
- <ins></ins> se emplea para indicar la inserción de nuevo contenido en el documento.
- <del></del> se emplea para indicar el borrado de cierto contenido.
Ambas etiquetas disponen de dos
atributos específicos que son:
- cite="url". Para indicar la fuente explicativa de la modificación.
- datetime="fecha". Para indicar la fecha y hora de la modificación.
Los navegadores suelen representar las
inserciones como texto
subrayado y los
borrados como texto
tachado.
Ambos son elementos en
línea.
CITAS TEXTUALES (<blockquote></blockquote>)Este elemento se utiliza para incluir citas textuales de otros documentos en el actual.
Dispone del
atributo cite="url" para indicar la referencia al texto original citado.
Los navegadores suelen representar este elemento con un cierto
margen a la izquierda.
Es un elemento de
bloque.
AUTOR CITADO (<cite></cite>)Este elemento se utiliza para declarar el autor de una cita. La diferencia con
blockquote es que mientras esta contiene la cita en sí, cite denota al autor de la cita.
Es un elemento en
línea.
ABREVIATURAS (<abbr></abbr>), ACRÓNIMOS (<acronym></acronym>) y DEFINICIONES (<dfn></dfn>)Son elementos en línea con el
atributo title="texto" que se usan para abreviaturas, siglas y definiciones de palabras "extrañas" usadas en el documento y así poder indicar su significado.
Los navegadores las suelen representar como texto
subrayado por puntos, y suelen mostrar un texto alternativo al situar el ratón sobre ellas (el indicado en el atributo title).
SALTO DE LÍNEA (<br />)La etiqueta
<br> es un tanto especial. Sirve para forzar un salto de línea en nuestro documento.
Es una etiqueta vacía y como tal debe abrirse y cerrarse consecutivamente, pero para evitar tener que escribir <br></br> se abrevia como
<br />.Debemos limitar su uso a ocasiones bastante especiales y no abusar; seguro que lo que queremos hacer se puede hacer de otra manera mucho mejor.
Inciso. Los espacios en blanco sobrantes dentro de un documento (tabulaciones, espacios en blanco consecutivos) son ignorados por HTML salvo que indiquemos lo contrario. Para introducir un espacio en blanco debemos recurrir a la entidad
TEXTO PREFORMATEADO (<pre></pre>)Hay veces que debemos mostrar un texto dentro de un documento
"tal cual se ha escrito", con todos sus espacios, tabulaciones, saltos de línea, etc (por ejemplo un objeto texto de la bd de Velneo). Para estos casos especiales usaremos la etiqueta
<pre>.
Es un elemento de bloque cuyo ancho no se ajusta a la ventana del navegador, así que puede forzar la aparición del
scroll horizontal en nuestras páginas.
Los navegadores suelen representarlo con un tipo de
letra de ancho fijo.
CÓDIGO (<code></code>)Cuando dentro de un documento hemos de representar código html o de otro tipo que haga uso de las
entidades específicas de HTML usaremos la etiqueta
<code>.
Es similar a <pre> con la salvedad de que
no respeta los espacios en blanco y es un elemento en
línea.
LISTAS ORDENADAS (<ol></ol>) y NO ORDENADAS (<ul></ul>)Cuando hemos de representar en nuestro documento una sucesión de elementos ordenados (numerados de alguna forma) o sin orden aparente, usaremos las listas.
Cada elemento de una lista irá encerrado entre
<li> y
</li>.
Son elementos de
bloque y los navegadores suelen representarlas
indentadas y usando números para los elementos de una lista ordenada, y viñetas gráficas para las lista no ordenadas.
Inciso. Este tipo de elementos, veremos más adelante que nos servirá para definir nuestras estructuras de navegación (menús) usando un poco de CSS.
Y por hoy hasta aquí!
En la próxima entrega veremos cómo introducir
tablas,
imágenes,
enlaces y otros elementos útiles dentro de nuestros documentos.
Life is soft!!
