Respira Web: febrero 2011

domingo, 27 de febrero de 2011

25 - HTML: Entidades y caracteres especiales.

Hablaremos sobre el uso de los caracteres ASCII y como mostrarlos en nuestro documento HTML.

El código estándar para el Intercambio de Información, o ASCII, se basa en un conjunto de caracteres del alfabeto latino utilizado en el idioma inglés y otras lenguas del mundo occidental.

Como el conjunto de caracteres ASCII no es suficiente para un sistema como la Web, HTML usa un conjunto de caracteres más completo llamado Conjunto Universal de Caracteres (Universal Character Set, UCS), que está definido en ISO10646. Este estándar define un repertorio de miles de caracteres usados por comunidades de todo el mundo.

Como el conjunto de caracteres del documento no es suficiente para permitir a los agentes de usuario interpretar correctamente los documentos HTML, es que éstos se intercambian normalmente codificados como una secuencia de bytes en un fichero.

Los agentes de usuario deben conocer además la codificación de caracteres específica usada para transformar el flujo de caracteres del documento en un flujo de bytes.

También los agentes de usuario deben tener en cuenta la prioridad a la hora de determinar la codificación de caracteres de un documento. De prioridad más alta a más baja.

Un parámetro "charset" HTTP en un campo "Content-Type".
Una declaración META con "http-equiv" establecido en "Content-Type" y un valor dado para "charset".
El atributo charset establecido en un elemento que designe

Estamos trabajando en la edición en papel: Reserva ya tu libro.
Envíos a todo el mundo.

viernes, 25 de febrero de 2011

24 - Encabezados o títulos en html

Podemos dar mayor o menor importancia a nuestros textos. Para eso se puede recurrir a los Encabezados mediante la etiqueta
<hn></hn> donde “n” tiene un valor entero comprendido entre 1 y 6 (1 sería el de mayor importancia, 6 el de menor importancia).

Estos títulos o encabezados son párrafos, ya que producen saltos de línea.

Disponen del atributo “align” igual que los párrafos, aunque también están desaprobados a favor de las hojas de estilo como hemos dicho antes

Veamos un ejemplo:

<html>
<head>
<title>Ejemplo de Encabezados</title>
</head>
<body>
<h1>Encabezado tipo 1</h1>
<h2>Encabezado tipo 2</h2>
<h3>Encabezado tipo 3</h3>
<h4>Encabezado tipo 4</h4>
<h5>Encabezado tipo 5</h5>
<h6>Encabezado tipo 6</h6>
</body>
</html>

Realizamos la misma operación que hicimos con el ejemplo de centrado del punto anterior, probamos nuestro pequeño programita en el navegador, y listo, veremos representados una serie de encabezados con diferentes formatos parecido a lo siguiente:

En el código podemos observar las diferentes etiquetas de un programa.

<html></html> al principio y al final del código.
<head></head> etiquetas de principio y fin del encabezado, y dentro de la cual se encuentra el título.
<title></title> etiqueta dentro de la cual se encuentra el título que se mostrara en la página web. Esta etiqueta a su vez se encuentra dentro del encabezado.
<body></body> etiquetas del cuerpo, donde se escribe la mayoría del código.

Con lo de los títulos que vimos en el post anterior y esto, ya tenéis para ir probando diferentes textos y combinaciones para afianzar conocimientos.

Estamos trabajando en la edición en papel: Reserva ya la tuya
Envíos a todo el mundo.

miércoles, 23 de febrero de 2011

23 - Elemento de centrado html <center>

El elemento <center> sirve para que el contenido que hay entre las etiquetas de inicio y de fin (<center> ... </center>) aparezca centrado horizontalmente en el documento.

Se trata de un elemento no aprobado a favor de las hojas de estilo. Es decir, que una vez tengamos conocimiento de cómo crear hojas de estilo, tanto el centrado como el formato es recomendable realizarlo a través de este método.

Ahora si intentaremos hacer nuestra primer página web, En el siguiente ejemplo veremos un texto centrado y otro sin utilizar los elementos de centrado.

<html>
<head>
<title>Ejemplo de texto centrado</title>
</head>
<body>
<center>Texto Centrado</center>
texto sin centrar
</body>
</html>

Para comenzar copiamos el código anterior en el bloc de notas de Windows u otro editor de texto "plano", sin formatos.

Una vez copiado el texto, grabamos el archivo en un directorio de vuestro ordenador, con el nombre por ejemplo: "prueba.html".

Ya grabado el archivo, tenemos varias opciones; o hacemos doble clic sobre el archivo grabado y este se ejecutará en vuestro navegador por defecto, o abrimos el navegador, seleccionamos "archivo", "abrir" y veremos en nuestro navegador una hoja con el título "Ejemplo de texto centrado", y dos textos, uno centrado y otro a la izquierda.

Y ya tenemos nuestra primer página web, un poco diferente a la clásica primer página web donde dice “Hola mundo” o más común todavía dado que la mayoría de textos traducidos del inglés ponen “hello world”.

Estamos trabajando en la edición en papel: Reserva ya la tuya
Envíos a todo el mundo.

lunes, 21 de febrero de 2011

22 - Estructura básica de un documento - Atributos de elementos

Las marcas, que ya hemos visto, de un documento HTML se pueden personalizar mediante atributos, estos atributos permiten variar tamaño, alineación, color, etc.

El navegador asignará a esa marca las modificaciones en función de los valores de esos atributos, y veremos como resultado en el navegador que el contenido de las marcas, (el elemento que encontramos entre las marcas de inicio y fin), se ve afectado por esos atributos.

Cada atributo tiene un identificador, seguido de un signo "=" y el valor que se le quiere asignar entre comillas simples (' ') o comillas dobles (" ").

sábado, 19 de febrero de 2011

21 - Estructura básica de un documento html - Marcas y etiquetas

Marcas y etiquetas

Concepto de marcas y elementos

¿Que son las Marcas?:

Son los elementos de marcado de HTML. Son fáciles de entender y de utilizar. Suelen ser palabras en inglés (por lo preciso) o abreviatura de palabras.

Las etiquetas indican al navegador cómo mostrar o tratar el contenido del documento.

Las etiqueta tienen un nombre de etiqueta, a veces seguido por una lista de atributos, todo entre los símbolos menor que (<) y mayor que (>).

Por ejemplo una etiqueta seria:

<nombre_etiqueta atributo="valor">

Aunque no es obligatorio, si es muy aconsejable que el valor se escriba entre comillas.

La mayoría de las etiquetas tienen un inicio y un cierre, y afectan a la parte del contenido que se encuentra entre este inicio y cierre.

El componente de inicio es el nombre de etiqueta y sus atributos, si los hay. La etiqueta de cierre es sólo el nombre de la etiqueta precedido de una barra inclinada (/).

Un ejemplo seria el siguiente:

<nombre_etiqueta>

contenido

</nombre_etiqueta>

Donde <nombre_etiqueta> es el inicio, contenido, es la parte afectada por las etiquetas, y </nombre_etiqueta> es el cierre.

jueves, 17 de febrero de 2011

20 - Estructura básica de un documento html. Metodología

Para hacer nuestros documentos HTML intentaremos seguir el método básico descrito aquí, con las herramientas incluidas en cualquier sistema operativo.

1.- Se edita un documento con un editor de texto ASCII (Bloc de notas u otro).

2.- Se salva o graba con extensión .html o .htm (la extensión .htm viene arrastrada de los sistemas de 16 bits, donde sus sistemas de archivos sólo permiten archivos con 8 caracteres para el nombre, y 3 caracteres para la extensión).

Aconsejamos no utilizar nombres con espacios en blanco o caracteres no reconocidos en todos los idiomas, como por ejemplo los acentos o la ñ.

3.- Procedemos a ejecutar el "browser" o navegador (Internet Explorer, Mozilla, Chrome, Opera, etc....).

4.- Abrimos el documento que hemos creado a través del navegador (archivo-> abrir).

5.- Si debemos hacer cambios, modificamos el documento HTML, lo salvamos y volvemos a visualizar el documento desde el navegador utilizando la opción de actualizar hoja o abriéndolo nuevamente.

martes, 15 de febrero de 2011

19 - Algunos Navegadores

Aquí mencionaremos algunos navegadores que son necesarios para poder ver nuestros programas en acción:

Internet Explorer: Ya va por la versión 8 y hay una versión 9 Beta lista para descargar, es el navegador de Microsoft que viene preinstalado en los sistemas operativos Windows. En el siguiente enlace se accede a la página de descarga de Microsoft.

http://www.microsoft.com/spain/windows/internet-explorer/worldwide-sites.aspx

Chrome: Es el navegador de Google, va por la versión 8 y es de los más jóvenes de los navegadores. Es gratuito e intenta competir con Internet Explorer. También incluimos el enlace para su descarga.

http://www.google.com/chrome?hl=es

Mozilla FireFox: Mozilla Firefox va por la versión 3.6, es gratuita. Es uno de los rivales más serios de Internet Explorer. A continuación les proporcionamos el enlace para la descarga.

http://download.mozilla.org/?product=firefox-3.6.13&os=win&lang=es-ES

Opera: Otra alternativa a los navegadores mencionados anteriormente, que también podéis ir a su página de descargas.

http://www.opera.com/download/get.pl?id=33345&thanks=true&sub=true

Partiendo del supuesto que ya tengáis instalado el Internet Explorer, si es la versión 8.0 también vale. También aconsejo descargar el Mozilla y el Chrome, ya que haremos nuestros programas para que los usuarios de estos navegadores los puedan ver. Y qué mejor que probar nosotros mismos como se van a mostrar en los diferentes navegadores. Se puede tener instalado más de un navegador en cada ordenador, sois vosotros después quienes elegís que navegador utilizar en cada caso.

domingo, 13 de febrero de 2011

18 - Evolución del concepto hipertexto

En el punto anterior hemos intentado explicar el concepto hipertexto, pues aquí os diremos que además del simple hecho de referirse a trasladarse de un punto a otro del texto o de la web, en la actualidad el significado de hipertexto tiene un sentido más amplio.

En la actualidad, un documento HTML nos permite incluir múltiples elementos multimedia (imágenes, sonido, vídeo, animaciones, etc.).

Los avances y la posibilidad de unión de hipertexto y multimedia acopian los beneficios de ambas tecnologías:

La multimedia proporciona una mayor riqueza y variedad en la transmisión de información, así como amplía el abanico de posibilidades para crear.

El hipertexto por su lado nos da una estructura que permite que los documentos se presenten y se exploren siguiendo diferentes secuencias.

Uniendo estos dos elementos, (hipertexto y multimedia) se obtiene el concepto de "hipermedia" donde se observa que los bloques de texto son cada vez menos y en su lugar aparecen imágenes, animaciones y sonidos.

Este conjunto de elementos nos permiten dar "vida" a las páginas web. Permitiendo al lector elegir el camino de su lectura.

viernes, 11 de febrero de 2011

17 - Información lineal e hipertexto

Es muy probable que la mayoría de vosotros hayáis oído hablar muchas veces de hipertexto, para los que no sabéis que es, trataremos aquí de definir lo más claramente lo que es hipertexto.

Hipertexto fue definido en la década del 60 como "Una escritura no secuencial a un texto que bifurca, que permite que el lector elija y que lea mejor en una pantalla interactiva".

Dicho de otra forma se trata de un conjunto de bloques de texto conectados entre sí por nexos (links) que dan opciones de diferentes caminos al usuario.

Podemos decir que hipertexto es un modelo diseñado para imitar la estructura asociativa, no lineal (un caso de estructura lineal podría ser un libro), a través de enlaces electrónicos. Al seleccionar estos enlaces dirigen al usuario a recuperar información de acuerdo a sus preferencias.

Al no tratarse de un esquema lineal, es decir que no se lee un documento a continuación de otro linealmente, sino que a través de estos nexos se puede acceder a diferentes secciones según los criterios del usuario, facilitan la estructuración de toda la información.

Un ejemplo de hipertexto lo podéis ver en prácticamente cualquier página web, haciendo clic en los enlaces les llevará al documento que este enlace señala.

miércoles, 9 de febrero de 2011

16 - Estructura básica de un documento HTML

Ha llegado la hora de ver un poco de código, ya me aburría con tanta palabrería, ahora nos iniciaremos en lo que es la estructura de un documento html.

Un documento HTML sencillo podría ser el que se ve en el siguiente cuadro:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Titulo del ejemplo </title>
</head>
<body>
<p> Aquí va el texto del documento de ejemplo </p>
</body>
</html>

En este documento podemos apreciar los siguientes elementos fundamentales:

a.- En la primera línea de un documento HTML se debe indicar que versión de HTML utiliza el documento. En nuestro caso de ejemplo, utilizamos la versión estricta de la versión HTML 4.01 definida en el documento "http://www.w3.org/TR/html4/strict.dtd".

b.- Los documentos HTML comienzan con una etiqueta <html> y finaliza con una etiqueta </html>. Observad que la etiqueta final es igual a la inicial con la única diferencia que se le agrega delante la barra inclinada a la derecha “/”.

c.- Dentro del documento se pueden ver dos secciones:

“head” y “body” (Cabecera y cuerpo).

d.- La sección “head” (cabecera) empieza con la etiqueta <head>, finaliza con la etiqueta </head> y contiene la sección “Title” que define el título del documento.

e.- La sección “body” (cuerpo) empieza con la etiqueta <body>, finaliza con la etiqueta </body> y contiene un párrafo de texto encerrado dentro de las etiquetas <p> y </p>.

lunes, 7 de febrero de 2011

15 - Definición de Tipos de Documentos (DTDs)

En la primera línea de un documento HTML se debe especificar la versión en la que está desarrollado. Esto se consigue insertando una referencia (URI véase pág.11) a un documento donde se especifica formalmente la sintaxis y estructura de todos los elementos que se pueden utilizar en esa versión de HTML.

Este documento se llama DTD (“Data Type Definition”, en castellano “Definición de Tipos de Documento”).

La DTD indica qué elementos, atributos, y demás, tiene un documento y cómo se anidan. No dice nada acerca de tipos de dato. En función de la DTD que se defina para ese documento, se permitirán o se prohibirán el uso de ciertos elementos. La definición de la versión de un documento HTML tiene la siguiente estructura:

Donde el FPI (“Format Public Identifier” o “Identificador Público de Formato”) y la URI_DTD (URI de la DTD que define formalmente el FPI seleccionado) varían en función de las necesidades del documento.

Los posibles juegos de valores se pueden ver en la tabla que muestra el siguiente link:

FPI	URI_DTD	Tipo de Documento
"-//W3C//DTD HTML 4.01//EN"	"http://www.w3.org/TR/html4/strict.dtd"	HTML estricto
"-//W3C//DTD HTML 4.01 Transitional//EN"	"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"	HTML transicional
"-//W3C//DTD HTML 4.01 Frameset//EN"	"http://www.w3.org/TR/1999/REC-html401-19991224/frameset.dtd"	HTML con marcos (frames)

Esto se va animando, ya sabemos que significa esta complicada línea de código que siempre (o casi siempre) vemos en los encabezados del código de las páginas web.

sábado, 5 de febrero de 2011

14 - Edición de páginas escritas en HTML

Como hemos dicho anteriormente HTML es un formato basado en texto, diseñado para ser leído y editado directamente usando un editor de texto. No obstante, escribir y mantener un gran número de páginas a mano requiere esfuerzo y conocimiento en profundidad de HTML, además de la dificultad del análisis del código. Un ejemplo de editor simple para realizar un programa html es el “notepad” o “bloc de notas” de Windows.

Para evitar este problema existen algunos editores visuales como “Macromedia Dreamweaver” y “Microsoft FrontPage” que permiten editar páginas web de una forma similar a como se edita un documento de texto. Sin embargo, estos editores pueden llegar a generar código HTML de muy baja calidad sobre el que tarde o temprano habrá que realizar una operación de limpieza y reestructuración, utilizando un editor de texto.

La extensión de los ficheros que contienen código HTML es .html. Pero debido a las limitaciones del sistema de ficheros del sistema operativo DOS de Windows, la extensión .htm también es aceptada como válida.

El código HTML también se puede generar de forma automática desde el servidor como respuesta a la ejecución de un script de servidor (escrito en Perl, PHP, ASP, JSP, etc.).

Estamos trabajando en la edición en papel: Reserva ya la tuya
Envíos a todo el mundo.

jueves, 3 de febrero de 2011

13 - Historia y evolución del lenguaje HTML y XHTML

Historia y evolución del lenguaje HTML y XHTML

Continuamos dando un vistazo general a la teoría, aunque resulte tediosa, es necesaria. Todos queremos comenzar a escribir código y ver los resultados, pero es muy importante, conocer sobre estos temas, y que nuestra cabeza se adapte a estos conceptos HTML, HTTP, URI, URL, PHP, MySQL, WEB, son signos incomprensibles para muchas personas, pero a esta altura ya muchos de vosotros, al menos sabéis a que se refiere cada uno, y cada vez os parecerán menos extraños.

HTML fue definido originalmente por Tim Berners-Lee. Actualmente HTML es un Estándar Internacional (ISO/IEC 15445:2000), y es mantenido por el World Wide Web Consortium (W3C[1]).

Las primeras versiones de HTML eran muy sencillas con el objeto de que fuera sencillo editar un documento HTML por personas no familiarizadas con la edición de textos. Los navegadores Web mostraban las páginas incluso con errores sintéticos, interpretando lo que el usuario habría querido mostrar. Con el paso del tiempo, los estándares han ido haciendo más rígida y formal la sintaxis del lenguaje, aunque los navegadores siguen mostrando los errores de sintaxis. El W3C ha definido como sucesor de HTML al lenguaje XHTML.

XHTML aplica las reglas de sintaxis estricta de XML al lenguaje HTML, facilitando de esta forma el mantenimiento y procesamiento de los documentos. No hay que confundir a XHTML con la versión actual de HTML.

XHTML es un estándar diferente pero que convive en paralelo con HTML. De hecho el W3C recomienda el uso de XHTML 1.1, XHTML 1.0, o HTML 4.01 para la publicación de páginas web.

[1] http://www.w3c.es

Estamos trabajando en la edición en papel: Reserva ya la tuya
Envíos a todo el mundo.

martes, 1 de febrero de 2011

12 - ¿Qué es HTML?

Vamos a comenzar a hablar sobre el HTML, es necesario dominar o conocer bien este lenguaje antes de introducirnos en otros lenguajes web, como el php.

HTML son las iniciales de HyperText Markup Language (dicho en castellano lenguaje de marcas basado en hipertexto). Este lenguaje de marcas fue diseñado para la creación de páginas web, y su posterior visualización en los navegadores. Es por lo tanto un lenguaje de presentación, estructuración y especificación de hipervínculos.

HTML define la sintaxis y colocación de etiquetas especiales incluidas dentro del texto del documento, que no son visualizadas por el navegador, pero que si indican cómo mostrar los contenidos del documento, con texto, imágenes y elementos multimedia.

La estructura de un texto en HTML, se supone compuesta por cabeceras, párrafos, listas de elementos, etc. Además, es posible marcar el texto con diversos estilos de presentación, como por ejemplo, título, subtítulo, lista numerada, negrita, itálica, etc.

Este lenguaje es estandarizado y multiplataforma. Un documento preparado utilizando marcas HTML puede ser leído por una gran variedad de navegadores web, como FireFox, Opera, Netscape, o Explorer.

El navegador interpreta las marcas HTML en un archivo y presenta la información formateada como una página web. Además, el navegador se puede ejecutar en aquella plataforma de Sistema Operativo sobre el que se encuentre disponible.

Por mencionar un ejemplo, el navegador FireFox de Mozilla se puede ejecutar tanto en máquinas con Sistema Operativo Windows, como sobre equipos Linux, UNIX o Apple.

Estamos trabajando en la edición en papel: Reserva ya la tuya
Envíos a todo el mundo.