En el post anterior hicimos hincapié en la teoría y lo básico de la sintaxis de xhtml. Ahora vamos a ir directamente a lo práctico. Como todavía nuestros conocimientos son casi nulos y por lo tanto no podemos realizar nada complejo (ni simple J), entre este post y los siguientes realizaremos una sencilla página de presentación sobre algún personaje (real o ficticio) del cine, la televisión, el teatro, un videojuego o la música; que nos agrade. Y ya que estamos mientras la construimos aprenderemos a utilizar el texto de diferentes formas, a colocarle links y a insertar imágenes.
Tres cositas antes de empezar, si están usando el notepad++ para codificar siempre pero siempre configuren el formato en UTF-8 antes de empezar (guarden en UTF-8 si usan el bloc de notas) y siempre guarden antes de testear la página en el navegador, sino no verán los cambios, el FF es el mejor para testear porque no nos perdona una. También es importante que repasen el post anterior si no lo leyeron o no se acuerdan algo, en especial la parte de los atributos, ya que la agregué a posteriori.
Una vez seleccionado su personaje (en mi caso el todopoderoso doctor Gregory House) pondremos manos a la obra. Comenzaremos por la estructura básica de la página principal (o sea la Home) que seria algo así:
<?xml version=”1.0” encoding=”UTF-8”?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
<title>Gregory House, un enfermo que cura</title>
</head>
<body>
</body>
</html>
No olvidemos colocarle un titulo descriptivo entre las etiquetas <title> y </title>. Ahora vamos a guardar nuestro archivo con el nombre index.html (es importante siempre colocarle ese nombre a la pagina principal de nuestro sitio, después veremos porque). Es conveniente que creemos una carpeta específica para el sitio y vayamos colocando ahí nuestros archivos (en mi caso proyectohouse, todo junto, también explico eso después).
Los párrafos
Dentro de un documento HTML nosotros vamos a ir estructurando nuestro texto dentro de párrafos. Para dicha tarea contamos con la etiqueta ‘<p>’ (P de párrafo, no es muy difícil de recordar ¿o si?). Dicha etiqueta se utiliza así:
<p>
texto texto texto texto
texto texto texto texto
texto texto texto texto
texto texto texto texto
</p>
<p>
texto texto texto texto
texto texto texto texto
texto texto texto texto
texto texto texto texto
</p>
Notaran que de esta forma es muy sencillo ir segmentando nuestro texto (y otros contenidos) en distintos párrafos. En el post anterior mencione los atributos que podía tener una etiqueta; en el caso de la etiqueta ‘<p>’ uno de vital importancia es el atributo ‘align’ que podemos utilizar para determinar la alineación del contenido de un párrafo en particular. El atributo ‘align’ puede tomar cuatro posibles valores ‘left’ (izquierda), ‘right’ (derecha), ‘center’ (centrado) y ‘justify’ (justificado). Por defecto los párrafos se alinean a la izquierda. Un ejemplo seria:
<p align=”center”>
texto texto texto texto
texto texto texto texto
texto texto texto texto
texto texto texto texto
</p>
<p align=”right”>
texto texto texto texto
texto texto texto texto
texto texto texto texto
texto texto texto texto
</p>
En este caso el primer párrafo estará alineado al centro y el segundo a la derecha:
Esta no es para nada, la forma recomendable de elegir la alineación del texto de nuestra página, ya que de esto se encargan los css como veremos mas adelante. Pero tiene utilidad para aplicar una alineación diferente a un párrafo en particular (por ejemplo cuando queremos centrar una foto).
Así podemos colocar un pequeño texto de presentación a nuestra página:
<?xml version=”1.0” encoding=”UTF-8”?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
<title> Gregory House, un enfermo que cura</title>
</head>
<body>
<p>
Doctor House es una excelente serie transmitida por la cadena Fox, cuyo argumento gira en torno al pabellón de diagnostico de un enorme hospital. Así capitulo tras capitulo el doctor Gregory House (Hug Laurie) y su equipo de expertos deberán luchar contra los villanos de la serie, o sea las enfermedades. Pero no cualquier enfermedad ya que a sus manos solo llegan los casos que todos los demás médicos no han podido diagnosticar y así todo se transforma en una permanente carrera contra el tiempo en la que no siempre se gana.
</p>
<p>
Esta premisa tal vez parece muy simple como para lograr un buen argumento, pero los excelentes guionista, la brillante dirección y sobre todo el carisma y la profundidad de cada uno de los personajes dan fuerza al conjunto al punto de lograr una de las mejores series del mundo (y a mi gusto la mejor).
</p>
<p>
Por supuesto el personaje mejor desarrollado es el mismo House. Irreverente, controvertido, egocéntrico, brillante, calculador, impredecible… en fin, House. Según los guionistas el personaje de House esta basado nada mas ni nada menos que en el mítico Sherlock Holmes. No solo en su carácter y en su forma detectivesca de resolver los casos (médicos), sino también en su afición por la música (Sherlock tocaba violín, House piano y guitarra) y su adicción por las drogas (Sherlock fumaba Opio, House abusa del Vicodín, un fuerte calmante que lo ayuda con el dolor que le produce su pierna lisiada). Sherlock y House también comparten un carácter un poco “sobrador” que en la tercera temporada le llega a causar severos problemas.
</p>
<p>
Actualmente la serie se presta a recibir la sexta temporada en los próximos meses. Y cada vez son más los fanáticos a nivel mundial. Parece que con este doctor, todos vamos atener que ser pacientes.
</p>
</body>
</html>
Al correr esto en Firefox veremos lo siguiente:
Como verán nuestro texto ya quedo segmentado en párrafos. Después veremos bien como ir aplicándole otras propiedades y personalizarlo un poco más. Pero ahora a esto le esta faltando algo.
Los Encabezados
Todo texto necesita por lo menos uno. Los encabezados serían los títulos de nuestro sitio y tienen gran importancia para los buscadores a la hora de indexarlo. Para colocar un encabezado en xhtml usamos la etiqueta <hx>, donde x es un número del 1 al 6. Esta numeración se debe a que en nuestra página podemos ir agregando encabezados de diferente jerarquía, donde <h1> es el de más importancia y <h6> el de menos. Los encabezados se insertan en nuestras páginas de la siguiente manera:
<h1>Esto es un encabezado</h1>
Ahora vamos a agregarle dos encabezados a nuestra página de la siguiente manera (recuerden que lo que esta entre ‘<!–‘ y ‘–>’ son comentarios míos y no aparecen en la página):
<?xml version=”1.0” encoding=”UTF-8”?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
<title> Gregory House, un enfermo que cura</title>
</head>
<body>
<!–Titulo de la página–>
<h1>House, un doctor muy peculiar</h1>
<!–Titulo del texto–>
<h2>Introducción</h2>
<p>
Doctor House es una excelente serie transmitida por la cadena Fox, cuyo argumento gira en torno al pabellón de diagnostico de un enorme hospital. Así capitulo tras capitulo el doctor Gregory House (Hug Laurie) y su equipo de expertos deberán luchar contra los villanos de la serie, o sea las enfermedades. Pero no cualquier enfermedad, ya que a sus manos solo llegan los casos que todos los demás médicos no han podido diagnosticar y todo se transforma en una permanente carrera contra el tiempo, en la que no siempre se gana.
</p>
<p>
Esta premisa tal vez parece muy simple como para lograr un buen argumento, pero los excelentes guionista, la brillante dirección y sobre todo el carisma y la profundidad de cada uno de los personajes dan fuerza al conjunto al punto de lograr una de las mejores series del mundo (y a mi gusto la mejor).
</p>
<p>
Por supuesto el personaje mejor desarrollado es el mismo House. Irreverente, controvertido, egocéntrico, brillante, calculador, impredecible… en fin, House. Según los guionistas el personaje de House esta basado nada mas ni nada menos que en el mítico Sherlock Holmes. No solo en su carácter y en su forma detectivesca de resolver los casos (médicos), sino también en su afición por la música (Sherlock tocaba violín, House piano y guitarra) y su adicción por las drogas (Sherlock fumaba Opio, House abusa del Vicodín, un fuerte calmante que lo ayuda con el dolor que le produce su pierna lisiada). Sherlock y House también comparten un carácter un poco “sobrador” que en la tercera temporada le llega a causar severos problemas.
</p>
<p>
Actualmente la serie se presta a recibir la sexta temporada en los próximos meses. Y cada vez son más los fanáticos a nivel mundial. Parece que con este doctor, todos vamos atener que ser pacientes.
</p>
</body>
</html>
Logrando lo siguiente:
El primer encabezado <h1> vendría a ser el título de la página y el segundo el del texto (en este momento el texto es toda la página pero ya iremos agregando mas). Nuestra página de a poco va tomando forma de algo (aunque no se muy bien de que).
Algunas etiquetas especiales
Ahora vamos a ver algunas etiquetas de mucha utilidad para darle “forma” a nuestro texto y a la página en general.
Salto de línea
Sirve para colocar una línea “en blanco” entre una línea y otra del texto. Los párrafos ya agregan un espacio entre si automáticamente (espacio que podemos definir por css) pero la etiqueta ‘<br />’ nos permite agregar todos los saltos de línea que queramos donde queramos. Se utiliza así:
<h1>Título</h1>
<br />
<br />
<p>
Línea uno del párrafo <br />
Línea dos del párrafo <br />
Línea tres del párrafo <br />
</p>
Es importante dejar un espacio entre la ‘r’ y la ‘/’.
Énfasis
Podemos darle énfasis a una palabra o una frase para destacarla del resto del texto utilizando las etiquetas ‘<em>’ para un énfasis suave (se muestra como cursiva) y ‘<strong>’ para un énfasis fuerte (se muestra como negrita). Se utilizan de la siguiente manera:
<p>
Este es un párrafo en el que quiero dar un pequeño énfasis a <em>esta frase</em> y un gran énfasis a <strong>esta otra frase</strong>
</p>
Dicen los que “saben” de SEO que el Google toma en cuenta las palabras a las que les hemos dado énfasis.
Indentado
No tengo mucha idea de que significa esa palabra porque no se encuentra en el léxico utilizado en mi país (Argentina), pero lo que hace la etiqueta ‘<blockquote>’ es agregar una especie de margen a cada lado del texto. Su utilización es la siguiente:
<blockquote>
<p>
texto texto texto texto
mas texto mas texto mas texto
y todavía más texto
</p>
</blockquote>
Acrónimos y abreviaturas
Todos hemos visto alguna vez esas palabras en un sitio web que cuando les pasamos el cursor por arriba nos muestran un pequeño texto. Eso se puede lograr con dos etiquetas ‘<acronym>’ (para los acrónimos) y ‘<abbr>’ (para las abreviaturas). Su uso en la práctica es exactamente el mismo (pero a uno de los dos el IE6 no lo reconoce, y la verdad no me acuerdo cual, se los dejo de tarea). Se utilizan así:
<acronym title=”distribución Linux basada en Ubuntu con escritorio XFCE” >Xubuntu</acronym>
<abbr title=”abreviatura de Mister, o sea señor en ingles” >Mr.</abbr>
Líneas (o separadores) horizontales
La verdad no es muy utilizada hoy en día porque se pueden realizar mejores separadores con css, pero la etiqueta ‘<hr />’ nos permitirá colocar una línea horizontal para separar un contenido de otro. Se usa de la siguiente manera:
<p>
texto texto texto
texto texto texto
texto texto texto
</p>
<hr />
<p>
texto texto texto
texto texto texto
texto texto texto
</p>
Citas
Las citas se muestran en el navegador como un texto en cursiva, y tienen utilidad por ejemplo para citar textualmente la declaración de un individuo. La etiqueta encargada de las citas es ‘<cite>’ y se utiliza de la siguiente manera:
<p>
Cuando Jerjes, con su ejercito de mas de 300.000 persas, se enteró de que Leonidas lo esperaba desafiante en el estrecho desfiladero de Las Termópilas, ordeno a los espartanos entregar sus armas…Leonidas dijo, <cite>ven por ellas</cite>… Los 7000 griegos liderados por 300 espartanos perdieron su vida al tercer día de batalla, pero vendieron muy cara su derrota…
</p>
Preformato
En caso de que queramos incluir en nuestra página un texto con muchos espacios, tabulaciones y saltos de línea, y queramos que aparezca tal cual en el navegador, por ejemplo cuando introducimos código fuente; debemos utilizar la etiqueta ‘<pre>’. Su utilización es la siguiente:
Utilizando lo que aprendimos
Ahora vamos a utilizar en nuestra página algunas de las etiquetas que vimos. Como calculo (y quiero creer) que cada uno estará realizando su página propia y no estará copiando la mía (o directamente leyendo sin hacer nada), supongo que habrá variaciones en las formas en que cada uno utiliza las etiquetas pero yo voy a aplicarlas a mi código así:
<?xml version=”1.0” encoding=”UTF-8”?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
<title> Gregory House, un enfermo que cura</title>
</head>
<body>
<!–Titulo de la página–>
<h1>House, un doctor muy peculiar</h1>
<!–Agrego un separador horizontal justo debajo del título de la página–>
<hr />
<!–Agrego indentado a todo el texto y al título de este –>
<blockquote>
<!–Titulo del texto–>
<h2>Introducción</h2>
<p>
Doctor House es una excelente serie transmitida por la cadena Fox, cuyo argumento gira en torno al pabellón de diagnostico de un enorme hospital. Así capitulo tras capitulo el doctor Gregory House (Hug Laurie) y su equipo de expertos deberán luchar contra los villanos de la serie, o sea las enfermedades. Pero no cualquier enfermedad ya que a sus manos solo llegan los casos que todos los demás médicos no han podido diagnosticar y todo se transforma en una permanente carrera contra el tiempo en la que no siempre se gana.
</p>
<p>
<!–Aquí doy énfasis suave a una frase en particular–>
Esta premisa tal vez parece muy simple como para lograr un buen argumento, pero los excelentes guionista, la brillante dirección y sobre todo <em>el carisma y la profundidad de cada uno de los personajes dan fuerza al conjunto al punto de lograr una de las mejores series del mundo (y a mi gusto la mejor).</em>
</p>
<p>
<!–aquí utilizo la etiqueta abbr sobre la palabra house–>
Por supuesto el personaje mejor desarrollado es el mismo <abbr title=”Hug Laurie” >House</abbr>. Irreverente, controvertido, egocéntrico, brillante, calculador, impredecible… en fin, House. Según los guionistas el personaje de House esta basado nada mas ni nada menos que en el mítico Sherlock Holmes. No solo en su carácter y en su forma detectivesca de resolver los casos (médicos), sino también en su afición por la música (Sherlock tocaba violín, House piano y guitarra) y su adicción por las drogas (Sherlock fumaba Opio, House abusa del Vicodín, un fuerte calmante que lo ayuda con el dolor que le produce su pierna lisiada). Sherlock y House también comparten un carácter un poco “sobrador” que en la tercera temporada le llega a causar severos problemas.
</p>
<p>
Actualmente la serie se presta a recibir la sexta temporada en los próximos meses. Y cada vez son más los fanáticos a nivel mundial. Parece que con este doctor, todos vamos atener que ser pacientes.
</p>
</blockquote>
</body>
</html>
Nuestra página ya va quedando un poco más presentable, pero todavía falta bastante:
Hasta aquí todo por hoy. Originalmente iba a meter esto, más imágenes, listas y links en el mismo post pero cuando pase los 216 párrafos dije sta bien mejor lo separo en varios J. Así que en el próximo post vamos a aprender como insertar imágenes en nuestras páginas. No pierdan los archivos que trabajamos hoy porque los vamos a seguir usando.
Desde ya quedan abiertos los foros para cualquier consulta y si ven un error (o conociéndome, muchos) no duden en corregirme. Si quieren complementar con algo pueden hacerlo a trabes de los comentarios. Salutaciones gente.
Study
PD: ya estoy buscando algun plugin para insertar el código de manera un poco mas prolija pero wp-syntax que es el único que encontre, es horrible.
The Tutorial de diseño web profesional con xhtml, css y javascript (parte 2) by Iván Stadius, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.
Loading ...
