En este mismo blog aprenderemos a su momento a crear aplicaciones, juegos, animaciones, videos y más para la web. Pero no se puede correr antes de caminar así que tendremos que empezar por lo básico, crear un sitio web para poder insertar a su vez todo lo antedicho.

Partamos así por las bases:

¿Qué es un sitio web?
Un sitio web es en términos simples un conjunto de páginas web organizadas y (en general) enlazadas entre ellas.

¿Qué es una página web?
Una página web es un tipo de documento, como lo sería un texto de Word, un grafico de Corel o una planilla de Excel. A diferencia de lo que pueden llegar a ver por ahí, una pagina web no es un programa en si. Existen formas de crear páginas web de forma dinámica y a esto si se lo puede considerar un programa, pero las veremos mas adelante.

¿Cómo se crea una pagina web?
Actualmente existen dos formas muy parecidas aunque no idénticas. La que se utilizó desde los comienzos de Internet (y todavía se usa en menor medida), que es a través de un metalenguaje llamado HTML. El html permite, escribiéndolo como un documento de texto (con extensión .html o .htm), mostrar contenidos de todo tipo; como texto, imágenes, audio, video, componentes (Java, Flash o la de Micro$oft que empieza con silver y no me acuerdo como sigue) y mas elementos. También desde el mismo html se define como se mostraran varios de estos elementos. Pero he aquí que el w3 consorcium, unos tipos muy grosos que vienen haciéndonos la vida difícil fácil a los webmasters con sus estándares, dijeron: pero ¿no seria mas práctico si separáramos lo que es el contenido de lo que es el diseño?. Y así nació la segunda forma de crear sitios web, cuya base parte del xhtml (para el contenido) en combinación con las hojas de estilo css (para el diseño). Esta forma de crear páginas web será la que veamos a lo largo del tutorial (también usaremos un poco de javascript). Actualmente esta es la forma profesional de crear sitios web (maquetear sitios web se le dice). La idea de tutorial será llegar hasta un dominio medio de estas tecnologías y más adelante cuando estén cancheros (por dios que antiguo) articular con un poco de php para que aprendan a crear xhtml de manera dinámica.

Estructura de un documento (X)HTML

Quiero aclarar una cosa para los que la tengan un poco mas clara. XHTML significa html definido como xml. Para los que vengan de HTML (sin x) no notarán grandes diferencias excepto que algunas etiquetas que originalmente se utilizaban para dar formato (como <STRONG> <FONT> y otras) han dejado de utilizarse (pero siguen funcionando).

Habiendo ya transitado (casi) toda la teoría necesaria para iniciar. Es hora de ensuciarnos las manos con un poco de código. Para nuestra faena necesitaremos un editor de texto, les recomiendo que se descarguen el programa opensource gratuito que me recomendó Fulano en los foros de RedUsers, y la verdad me ha resultado muy útil; notepad++. De última el bloc de notas les va a resultar útil a los “windoneros”, a los linuxeros no tengo que explicarles lo que es un editor de texto plano y a los maqueros ¿Qué hacen en este blog?. No, no voy a arrancar discriminando tan temprano. Amigos maqueros utilicen algún editor de textos de Jobs y compañía que sea muy básico. Queda totalmente prohibido para nuestra tarea utilizar Word, Writer o cualquier tipo de procesador avanzado que pueda arruinarnos el código.

Si me hicieron caso e instalaron el Notepad++ su entorno de trabajo debe ser el siguiente:

Ahora, si no lo esta ya, vamos a traducirlo al español. Para eso vamos al menú Settings/preference y en el desplegable “localización” seleccionamos nuestro idioma.

Solamente vamos a configurar dos cosas mas antes de empezar, la primera es la codificación que usaremos para los caracteres. Para eso vamos al menú “formato” y escogemos “Codificar en UTF-8”. También es importante indicarle al programa en que lenguaje vamos a codificar, para eso vamos al menú “Lenguaje” y seleccionamos “HTML”.

Armados así con nuestro teclado y mucha paciencia comencemos. Como todos somos informáticos comenzaremos con el clásico Hola Mundo:

No importa si no terminamos de entender (o empezamos a entender) que hace este código. De todas formas ahora vamos a analizarlo parte por parte. Pero primero vamos a ver nuestra primera página web en un browser. Para eso primero guardamos el documento (con el nombre que quieran seguido de .html) si quieren como tipo de archivo elijan Hyper Text Markup Language (o sea HTML). Después (recién después, porque sino no funciona) vamos al menú “Ejecutar” y elegimos “Launch in Firefox” (o Launch in IE si somos unos loosers que no tenemos un browser decente). En Firefox nuestro Hola mundo se ve así:

Bueno, ahora vamos al código, primero, esto que hemos utilizado es solo xhtml. Notemos que el XHTML se basa en etiquetas que se abren y se cierran de la siguiente manera:

<etiqueta>…</etiqueta>

Como por ejemplo:

<h1>Hola mundo</h1>

Como supondrán toda etiqueta que se abre debe cerrarse (aunque hay unas pocas, que veremos mas adelante, que no). Pero también hay etiquetas que se abren y se cierran de una sola vez, así:

<etiqueta />

Como por ejemplo;

<br />

También quiero remarcar que en el xhtml se pueden integrar comentarios, o sea pequeñas notas que puedo agregar en el código para remarcar o recordar algo pero que no se mostrara en la pagina que se muestra en el navegador. Su estructura es la siguiente:

<!—texto del comentario–>

Estén atentos a estos porque los iré colocando a lo largo del código para poder ir explicándolo línea por línea.

Nótese que se deja un espacio entre el nombre de la etiqueta y la “barra de cierre”. Ahora bien, entendida la estructura básica del xhtml pasaremos a entender la estructura de nuestro Hola mundo.

Al principio de nuestro código se lee lo siguiente:

Así notamos que todo (menos la declaración de xhtml) queda encerrado entre las etiquetas <html> y </html>.

A su vez el documento se divide en dos grandes secciones, la cabecera y el cuerpo. Así en la cabecera, o sea todo lo que esta entre <head> y </head>, colocamos la información que describe el contenido de la página, como el título (que encerramos entre <title> y </title>), las palabras clave y la descripción, siendo el primero el mas importante y necesario.

Una vez cerrada la cabecera de la página, comienza el cuerpo de esta, que encerramos entre <body> y </body>. Este cuerpo será el que se mostrará en el navegador. Aquí podremos incluir texto, multimedia, componentes, etc.…

Notaran que en el xhtml se pueden “encerrar” unas etiquetas dentro de otras, a esto se le dice anidar etiquetas. Y se hace de la siguiente manera:

<etiqueta1><etiqueta2><etiqueta3>…</etiqueta3></etiqueta2></etiqueta1>

Así la primera etiqueta en abrirse es la última en cerrarse, esto siempre debe ser así, ya que de otra manera el código se leerá mal. El siguiente código esta mal escrito:

<etiqueta1><etiqueta2>…</etiqueta1></etiqueta2>

Un ejemplo que ya hemos visto de etiquetas anidadas es el siguiente:

<head><title>titulo</title></head>

Notaran que escribí todo el código en la misma línea, esto es así porque para el xhtml da lo mismo si escribimos así o en varias líneas. La razón por la cual solemos elegir la segunda no es mas que una cuestión de legibilidad.

Bueno así damos por finalizado el primer post de este pseudo curso/tutorial de poca monta. Calculo ir mechando los próximos en el blog mas o menos cada 10 o 15 días así que hasta el próximo. Salu2.

Study

The Tutorial diseño web profesional con xhtml, css y javascript (parte 1) by Iván Stadius, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.