[Manual] Iniciación a los lenguajes Web.

23 11 2007

Esta será una pequeña guía para aquellos que o bien quieran modificar el código de una página web, de un blog, o bien quieran crear de cero alguno de los dos, pero antes de empezar explicaré, de modo breve, qué tipo de lenguajes nos podemos encontrar a la hora de hacerlo.

HTML: el que trataremos hoy. Su significado es Hyper Text Markup Language (Lenguaje de Marcas de Hipertexto), sirve para estructurar textos y darles forma de hipertexto, que es el formato de la web. Además es el más fácil de aprender, por eso empezaremos por él.

CSS: lo trataremos más adelante. Su significado es Cascading Style Sheets, que en la traducción al castellano pasó a llamarse hojas de estilo en cascada. Sirve para dar forma, y estructurar al lenguaje HTML, dotando a este de más funcionalidades para así crear páginas más vistosas. La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.

Java Script: es un lenguaje de programación que se utiliza principalmente para crear páginas web dinámicas, es un lenguaje que se incrusta dentro del código HTML, creado para dar dinamismo a la rigidez del HTML. Además se trata de un lenguaje interpretado (no necesita de un traductor, el programa lo lee y ejecuta un navegador, sirviendo así, para todos los sistemas operativos).

PHP: es un lenguaje de programación usado normalmente para la creación de páginas web dinámicas. PHP “PHP Hypertext Pre-processor” (inicialmente PHP Tools, o, Personal Home Page Tools), y, al igual que el anterior, se trata de un lenguaje interpretado.

De todos los lenguajes hablaremos en su momento, pero hoy vamos a empezar por el primero del que hemos hablado.

HTML

Existen muchas versiones del HTML, la más nueva es la 5.0, pero no he encontrado referencias sobre esta versión. Por lo que hablaremos de una variante del HTML, creado a partir del lenguaje XML, llamada XHTML.

El XHTML nace a partir de la necesidad de crear un lenguaje estricto para la visualización del contenido web, debido a que cada vez más dispositivos podían acceder a la web de diferentes formas, estas carencias son por ejemplo, el hecho de que varias etiquetas (luego hablaremos de ellas), no tienen cierre, o que aún teniéndolo si no se indica, el navegador lo interpreta de tal forma que sí lo tienen, y aunque esto, en un principio, pueda parecer mejor para desarrollarlo, al final lo que pasa es que se tienen páginas inconsistentes, en las que todo el trabajo de colocar las etiquetas correctamente recae en el navegador, que encima, no siempre lo hacen e interpretan correctamente todos.

Por eso nace esta variante, para que las páginas web puedan ser vistas desde todos los navegadores, sin ningún tipo de problema, y con escasas diferencias entre sí. Además el XHTML añade una característica heredada del XML , la obligación de escribir todas las etiquetas con letra minúscula.

Para crear una página web no se necesita ningún programa especial (aunque son de gran ayuda), ni software caro y complejo. Simplemente se necesita un editor de texto (no, el Word, el kWord, el AbiWord y similares, no son editores, son procesadores de texto), tipo bloc de notas, o el Edit de MS-Dos, en otros Sistemas Operativos, nos podemos encontrar con Emacs, Vi, Kate o jEdit (este último es multiplataforma). Existe software especializado para crear páginas web, que nos ayudarán con las etiquetas, y colorearan el código para que sea más legible, además muchos nos resaltarán los errores y comprobaran el soporte con diferentes navegadores y versiones de estos, el mejor, para mi gusto, es el DreamWeaver de Adobe.

Una página web consiste en un código especial que dice al navegador que lo interpreta, cómo ha de mostrar la información al usuario. HTML se considera un lenguaje de marcas, y esto es porque el código del mismo va entre los símbolos <>. Como ejemplo podemos poner la etiqueta que nos indicará donde acaba y donde empieza una página web: <html> Esta nos indica donde empieza la página web;</html> esta nos indica dónde termina una página web.

Un aspecto importante, es que las etiquetas de HTML se cierran de la manera mostrada, es decir con la barra inclinada hacia la derecha (la que está encima del 7). Así una etiqueta sin estaba barra indica donde comienza y una etiqueta con la barra indica donde termina el ámbito de influencia de esa etiqueta. La del ejemplo anterior empezará en el principio del documento y terminará en el final del mismo.

Veamos ahora un esquema básico de una página web:

<html>

<head>
</head>

<body>
</body>

</html>

Podemos ver cómo dentro de la etiqueta que ya habíamos visto hay otras dos diferentes, ambas con su apertura y su cierre, esto se llama anidamiento de etiquetas, propiedad muy importante en este lenguaje

Esas dos etiquetas nuevas que se ven en el esquema son muy importantes, pues marcan dos apartados muy diferentes en la estructura de una página web:

Head: esta parte del documento no se muestra en la página, en esta parte se introducen todos los valores y descripciones que tengan que ver con la página, se introduce, por ejemplo, el título de la misma, este título se muestra, no en el documento, si no que se muestra en la parte superior izquierda del navegador. Además se añaden descripciones, también llamados metadatos, sobre la página que se está visualizando, sirve sobre todo, para que los buscadores puedan categorizar esa página. Además, es el sitio del documento, donde más conveniente es introducir el código CSS y el Java Script.

Body: esta parte contiene todo el texto y todas las etiquetas que hacen referencia al mismo, todas las etiquetas que sirven para dar estructura se incluyen aquí, además de todo el texto que se quiere mostrar. Es, pues, la parte más importante del documento.

Más adelante, veremos las etiquetas que forman el lenguaje.

Anuncios

Acciones

Information

One response

7 12 2007
[Manual] Iniciación a los lenguajes Web. Segunda parte: HTML. « desOrdenados

[…] parte del manual sobre creación de páginas web, en concreto la parte relativa al HTML que en la anterior vez, dejé un poco en el aire, dando, simplemente, una breve introducción al mismo. Esta vez os traigo […]

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s




A %d blogueros les gusta esto: