Desarrollo De Paginas Web JSP

2012-05-07T07:37:00.000-07:00

HOJA DE ESTILOS

Los estilos CSS (Cascading Style Sheets) son hojas de estilo de actualización automática.

Se usan principalmente para definir estilos que luego se aplicarán a las páginas de nuestro sitio, incluso a veces permiten definir características que no permiten definir los estilos HTML, como el color de fondo para el texto por ejemplo.

Al estar la definición de los estilos en un archivo externo a las páginas y común a todas las páginas del sitio (es recomendable) el aspecto de nuestras páginas será más homogéneo y además podremos cambiar ese aspecto de manera segura e inmediata cambiando únicamente la hoja de estilos.

Se pueden definir estilos independientes o estilos asociados a determinadas etiquetas por ejmplo a la etiqueta <a> (que corresponde a los hiperenlaces). De este modo, todos los hiperenlaces de la página o del sitio adquirirían la apariencia definida en ese estilo y con un sólo cambio en la hoja de estilos podemos cambiar de golpe el estilo de todos los enlaces en todas las páginas vinculadas a este estilo.

El inconveniente que tiene trabajar con hojas de estilos es que algunos navegadores no las soportan y las ignoran, aunque estos navegadores suelen ser versiones antiguas, por lo que ocurrirá en pocos casos.

Las hojas de estilo pueden crearse con cualquier editor de texto, como puede ser el Bloc de notas, y pueden guardarse con la extensión TXT.

Vincular una Hoja de estilos:

Para poder incluir las propiedades de una hoja de estilo en un documento, hay que vincularla a él. Un documento puede tener varias hojas de estilo vinculadas.

Para vincular una hoja de estilo a un documento es necesario insertar la etiqueta <link> en el documento, entre las etiquetas <head> y </head>. Esta etiqueta no necesita etiqueta de cierre.

A través del atributo href se especifica la hoja de estilo que se va a vincular al documento.

A través del atributo rel se tiene que especificar que se está vinculando una hoja de estilo, por lo que su valor ha de ser stylesheet.

A través del atributo type se tiene que especificar que el archivo es de texto, con sintaxis CSS, por lo que su valor ha de ser text/css.

Por ejemplo, podríamos vincular una hoja de estilo escribiendo el siguiente código.

Sintaxis de la Hoja de estilo:

Como recordarás, para especificar las propiedades de una capa no se utilizan etiquetas normales de HTML. Todas las propiedades se especifican a través del atributo style, y aparecen entre comillas dobles, con un punto y coma detrás de cada una. Para asignar los valores a las propiedades no se utiliza el símbolo = (igual), sino que se utiliza el símbolo : (dos puntos).

Esto es debido a que se está especificando un estilo, pero sin vincular ninguna hoja de estilo a la página.

Para especificar las propiedades dentro de una hoja de estilo, la sintaxis es muy similar.

En primer lugar se pone el nombre del estilo, y entre llaves se especifica la lista de propiedades (en minúsculas) que se corresponden con dicho estilo. Cada una de estas propiedades tiene que tener un punto y coma detrás, y los valores se asignan con el símbolo : (dos puntos).

El nombre del estilo puede ser un nombre inventado por nosotros, o el nombre de una etiqueta HTML. Para poder utilizar un nombre inventado, tiene que estar precedido por un punto, o por el nombre de una etiqueta seguida de un punto.

Por ejemplo, en una hoja de estilo podríamos tener lo siguiente:

body {background-color: #006699; font-family: Arial,Helvetica;}

.mitexto {font-family: Arial,Helvetica; font-size:18px;}

Si vinculáramos esta hoja de estilo a un documento, se aplicarían directamente las propiedades especificadas para la etiqueta <body>.

En cambio, no existe ninguna etiqueta <mitexto>, por lo que para aplicar este estilo a algún elemento de la página habría que indicarlo de algún modo.

Para aplicar este estilo a un elemento, habría que insertar el atributo class en su etiqueta.

Por ejemplo, para aplicar ese estilo al siguiente párrafo del documento:

texto con estilo

Habría que escribir:

texto con estilo

Pero para aplicar el estilo únicamente a una parte del contenido de la etiqueta, como podría ser en este caso una palabra del párrafo, sería necesario incluir la etiqueta (que agrupa bloques, sin producir un cambio de línea). Por ejemplo, para aplicar el estilo únicamente a la palabra estilo, habría que escribir:

texto con estilo

Propiedades:

Vamos a ver algunas propiedades que pueden especificarse en los estilos, así como los valores que pueden tomar.

Familia de la fuente:

La propiedad es font-family.

Puede tomar como valor varios nombres de fuentes, separados por comas, como pueden ser arial, helvetica, etc. La ventana de definir una familia de fuentes es que si el ordenador del visitante no tiene instalada la primera fuente, entonces se aplicará la segunda, así sucesivamente hasta encontrar una de las fuentes.

Grosor del texto:

La propiedad es font-weight.

Sus valores pueden ser: bold (negrita), bolder (mas negrita), lighter (ligera) o

un número del 100 al 900.

Tamaño de la fuente:

La propiedad es font-size.

Puede tomar como valor un número.

Espacio entre líneas:

La propiedad es line-height.

Puede tomar como valor un número.

Espacio entre caracteres:

La propiedad es letter-spacing.

Puede tomar como valor un número.

Estilo de la fuente:

La propiedad es font-style.

Puede tomar como valor italic, cuando se desee que el texto aparezca en cursiva.

Decoración de la fuente:

La propiedad es text-decoration.

Puede tomar como valor none (ninguno), underline (subrayado), line-through (una línea encima), overline (tachado) o blink (parpadeo).

Si se aplica none a los hiperenlaces, puede evitarse que aparezcan subrayados.

Transformar el texto:

La propiedad es text-transform.

Puede tomar como valor capitalize (la inicial de cada palabra aparecerá en mayúsculas), uppercase (todo en mayúsculas) o lowercase (todo en minúsculas).

Alineación del texto:

La propiedad es text-align.

Puede tomar como valor center (centrado), left (izquierda), right (derecha) o justify (justificado).

Sangrado del texto:

La propiedad es text-indent.

Puede tomar como valor un número.

Color:

La propiedad es color.

Puede tomar como valor un número en hexadecimal.

Si se aplica esta propiedad a los hiperenlaces, serán de este color, en lugar de los indicados por los atributos link (vínculo), vlink (vínculo activo), y alink (vínculo visitado) de la etiqueta <body>.

Color de fondo:

La propiedad es background-color.

Puede tomar como valor un número en hexadecimal.

Imagen de fondo:

La propiedad es background-image.

La ruta y el nombre de la imagen han de aparecer entre paréntesis, después de la palabra url.

Márgenes:

Las propiedades son margin-top (margen superior), margin-right (margen derecho), margin-bottom (margen inferior), margin-left (margen izquierdo), o margin (los valores de los márgenes superior, derecho, inferior e izquierdo, separados por espacios).

Pueden tomar como valor un número (cuatro números separados por espacios en el caso de margin).

Ancho de bordes:

La propiedad es border-width.

Puede tomar como valor un número.

Color del borde:

La propiedad es border-color.

Puede tomar como valor un número en hexadecimal.

No hay que olvidar, en el caso de los valores numéricos, especificar la unidad de medida a utilizar: cm (centímetros), pt (puntos), px (píxeles), o % (porcentaje).

Existen muchas otras propiedades además de éstas. En el tema de capas puedes consultar las propiedades que se pueden definir sobre ellas en las hojas de estilo (z-index, visibility, etc.).

2012-05-07T07:29:00.000-07:00

MULTIMEDIA

Sonido de Fondo <bgsound>:

Añadir una música de fondo a una página tiene pros y contras, si el sonido es apropiado al contenido de la página, puede hacerla más atractiva en contrapartida la descarga del archivo de sonido supone una carga que puede ralentizar la visualización de la página y además muchos usuarios suelen estar escuchando otro tipo de música cuando navega en Internet, por lo que el escuchar también sonido en cada página que visita puede resultar algo molesto.

Los formatos de sonido más habituales en Internet son el WAV, el MP3 y en algunas ocasiones el MIDI, aunque existen otros formatos diferentes que también pueden utilizarse. Lo ideal es incluir algún archivo de audio que no ocupe mucho espacio, y que no por ello sea de mala calidad.

El navegador Internet Explorer puede reconocer la etiqueta <bgsound>, que se utiliza para incluir sonido de fondo. Esta nueva etiqueta no necesita etiqueta de cierre.

A través del atributo src hay que especificar la ruta y el nombre del archivo de audio.

Con el atributo loop indicamos el número de veces que se tienen que reproducir el sonido. Si se desea que el archivo de audio se reproduzca continuamente en un bucle, habrá que asignarle el valor infinite o -1.

Por ejemplo, podríamos insertar un sonido de fondo escribiendo el siguiente código:

La etiqueta <bgsound> puede situarse en cualquier parte del documento, pero es preferible que la situemos siempre en un sitio fácil de encontrar, por si deseamos hacerle alguna modificación. Podríamos, por ejemplo, incluirla justo debajo de la etiqueta <body>.

Video y Audio <embed>:

En ocasiones puede interesar incluir algún vídeo en una página web, pero hay que tener en cuenta que los vídeos suelen ocupar mucho espacio en disco, y por lo tanto, precisan de mucho tiempo para descargarse.

Los formatos de vídeo que suelen utilizarse en Internet son el AVI, el MPEG y el MOV.

La etiqueta <embed> es la que se utiliza para insertar archivos de vídeo. Puede incluirse la etiqueta de cierre, pero en realidad no es necesaria, ya que entre las etiquetas <embed> y</embed> no hay que insertar nada.

A través del atributo src hay que especificar la ruta y el nombre del archivo de vídeo.

Los videos insertados a través de esta etiqueta se reproducen automáticamente al cargarse la página, y se reproducen solamente una vez. Esto puede cambiarse a través de los atributosautostart y loop.

El atributo autostart indica si el archivo se reproducirá automáticamente al cargarse la página, y puede tomar los valores true o false.

El atributo loop indica si el archivo se reproducirá continuamente en un bucle, y también puede tomar los valores true o false.

Los atributos width (anchura) y height (altura) sirven para especificar el tamaño de la consola de control de vídeo. Estos atributos pueden tomar como valor un número, que indica el tamaño en píxeles. Si no se especifican estos atributos, la consola de control de vídeo se mostrará con el tamaño más adecuado al tamaño del vídeo.

A la derecha tienes un ejemplo de un archivo de video, para el que se muestran los controles de video. Puedes reproducirlo pulsando sobre los controles.

Para insertar el vídeo anterior, se podría escribir:

<embed src="varios/cotorra.avi" autostart="false" loop="true">

Existen algunos navegadores que no reconocen la etiqueta <bgsound>, por lo que no es posible utilizar esta etiqueta para incluir un sonido de fondo. En su lugar, se utiliza la etiqueta<embed>, que funciona del mismo modo para los archivos de audio y de vídeo.

No hay que olvidar que para los archivos de audio también se mostrarán los controles de reproducción.

A la derecha tienes un ejemplo de un archivo de sonido, para el que se muestran los controles de audio. Si lo deseas, puedes reproducirlo pulsando sobre los controles.

Peliculas Flash<object>

Las películas Flash son animaciones con la extensión SWF. Suelen incluirse en las páginas iniciales de los sitios web, y se utilizan a modo de presentación hacia los usuarios. También pueden utilizarse como botones de las barras de navegación.

Estas películas pueden crearse mediante el programa Flash de Macromedia, y necesitan que el usuario tenga instalado el plug-in para poder ser visualizadas.

La etiqueta <object> puede utilizarse para insertar diferentes objetos dentro de la página, como pueden ser archivos de audio, archivos de vídeo, imágenes, etc.

El objetivo del uso de la etiqueta <object> es la de que no se produzcan incompatibilidades por las distintas etiquetas soportadas por unos u otros navegadores.

Las animaciones Flash se insertan del mismo modo que los archivos de audio y de vídeo, a través de la etiqueta <embed>, pero debido a que tiene más posibilidades de que se produzcan incompatibilidades entre los distintos navegadores, necesita también de la etiqueta <object>.

2012-05-06T20:27:00.003-07:00

FORMULARIOS

En los documentos HTML, mediante el tag <FORM>, se pueden crear formularios en los que el usuario puede introducir los datos de diversas maneras. La idea original de los formularios HTML prevé una evaluación del contenido del formulario por parte del servidor. Para ello en el atributo ACTION del tag <FORM> se indica el URL al que se deben enviar las informaciones introducidas en el formulario. Detrás del URL correspondiente se oculta un programa que se ejecuta en el servidor y que funciona conjuntamente con el programa servidor, por ejemplo, a través del puerto CGI; este programa es también el que crea la página web que se envía al browser como respuesta. En el elemento FORM se pueden crear los diferentes componentes del formulario con tres tags de HTML que presentamos en la siguiente lista:

El elemento más universal aquí es el elemento INPUT que puede tomar diferentes formas según sea el valor del atributo TYPE (atributo obligatorio). En la tabla siguiente se muestran los valores posibles para el atributo TYPE.

Todos los elementos INPUT poseen los atributos NAME y VALUE. Finalmente, al servidor se le transmiten pares de valores resultantes de las informaciones asignadas a estos atributos. El valor del atributo VALUE se define a partir de las introducciones realizadas por el usuario.

Dentro de un elemento SELECT suele haber, por lo general, varios tags <OPTION> que son los que definen cada una de las líneas de la lista de selección.

El siguiente ejemplo presenta un formulario HTML que contiene prácticamente todos los tipos de elementos disponibles:

En el navegador se vería de la siguiente manera:

Aquí les dejo un vídeo para que se puedan guiar en la creación de formularios en HTML.

2012-05-06T19:31:00.002-07:00

MARCOS

El concepto de frame, es decir, de la división interna de páginas web en ventanas parciales, fue introducir por la casa Netscape en la versión 2.0 de Netscape Navigator. Este concepto está en clara contradicción con las especificaciones oficiales de HTML, en las que, a pesar del esfuerzo realizado, no se ha podido incorporar todavía. De cualquier modo, el concepto de frame fue adoptado rápidamente, poco después de su presentación, por muchos diseñadores de páginas web y en la actualidad su uso es tan frecuente y variado que es prácticamente imposible pensar en la WWW sin él.

La idea fundamental de los frames y su conversión sintáctica son relativamente sencillas. El objetivo principal era estructurar la ventana principal del browser en varias ventanas parciales en las que presentar diferentes documentos HTML. Una página de la web que utilice frames consta por eso mismo de varios archivos. Hay un archivo o varios que definen el tamaño y el orden de los frames y, además, los archivos que representan las páginas HTML. Es decir, hay una división de forma y contenido. En los archivos HTML "de forma" se utilizan básicamente los dos nuevos tags <FRAMESET> y <FRAME>.

Con el atributo COLS se define cuántas ventanas parciales del FRAMESET correspondiente se han de ordenar alineadas y qué anchura deben tener las mismas. El valor necesario de este atributo es una variable de caracteres formada por números enteros separados entre sí por una coma; estos números representan la anchura en puntos de pantalla. Uno de estos números se puede reemplazar por el carácter "*", y en ese caso será el browser quien defina la anchura de la columna correspondiente. Cuando los números van seguidos del carácter de tanto por ciento, esto significa que los números no se interpretan como puntos de pantalla, sino como porcentaje respecto al ancho de la ventana del browser. El tag <FRAMESET COLS="30%,30%,40%"> divide la pantalla del browser en tres ventanas parciales, las dos primeras de las cuales ocupan un 30% de la anchura total y la tercera el 40% restante.

El atributo ROWS divide la ventana del browser en ventanas parciales horizontales. La sintaxis en este caso es idéntica a la del atributo COLS. El tag <FRAMESET ROWS="100,*">, por ejemplo, tiene por efecto la división de la ventana del browser en una ventana superior de 100 puntos de pantalla de altura y otra subventana inferior que ocupa el resto de la superficie libre.

Explicaremos a continuación el tag <FRAME>. En un elemento FRAMESET hay tantos <FRAME> como ventanas parciales resulten de los atributos COLS y ROWS. El dato principal de un tag <FRAME> es el atributo SRC, que contiene el URL del documento que debe mostrarse en la ventana parcial correspondiente. Con el atributo NAME se puede asignar a la ventana parcial un nombre que podrá utilizarse para acceder y referirse a la ventana sin equívocos. Con los atributos MARGINWIDTH y MARGINHEIGHT se pueden definir las medidas y los márgenes de las ventanas parciales. El atributo SCROLLING, que puede adoptar los valores "yes", "no" y "auto",se define si la ventana parcial debe tener barras de desplazamiento o no. El valor "yes" hace que las barras de desplazamiento se representen siempre en la ventana; el valor "no" hace que no se representen nunca y el valor "auto" deja que sea el browser quien decida automáticamente, según el tamaño de la ventana, si debe incluir en ésta barras de desplazamiento o no. Por último, con el atributo NORESIZE, al que no se le asigna ningún valor, se puede definir que el tamaño de la ventana permanezca siempre constante independientemente de los cambios eventuales del tamaño de la ventana del browser.

Los browsers que no pueden evaluar los tags <FRAMESET> y <FRAME> no pueden representar ningún documento en cuya creación se hayan utilizado estos tags. Por eso, para dejar abierta la posibilidad de mostrar texto HTML normal como alternativa al contenido de los FRAME, por ejemplo para sugerir la conveniencia de trabajar con otro browser, se ha introducido el tag <NOFRAMES>. El elemento NOFRAMES debe poseer siempre tanto tag inicial como final y el texto entre ambos se evalúa como el de un documento HTML normal.

En la imagen mostraremos el código correspondiente a marcos:

Y en su navegador se vería de esta manera:

Seguido les dejo un vídeo que les ayudara a comprender mejor acerca de los marcos.

2012-05-06T18:33:00.001-07:00

TABLAS

La sintaxis de las tablas ampliadas, comparativamente compleja, es compatible hacia delante con las tablas HTML usuales, definidas por primera vez en la versión HTML 3.0 y que presentan la misma forma que las de la versión HTML 3.2.

En HTML este seria el codigo:

En el navegador se vería así:

Combinar Celdas:

Para las etiquetas <td> y <th> existen los atributos colspan y rowspan, que se utilizan para combinar celdas.

A través del atributo colspan se especifica el número de columnas por las que se extenderá la celda, y a través del atributo rowspan se especifica el número de filas por las que se extenderá la celda.

A continuación como seria una tabla normalmente:

Así se vería en el navegador:

Ahora la misma tabla pero utilizando la combinación de celdas para mejorar la presentación de la tabla

Y en el navegador se vería de la siguiente manera:

A continuación les dejo un vídeo que les enseñara un poco mas acerca de las tablas en HTML.

2012-05-06T17:23:00.001-07:00

IMAGENES

Imagen<img>:

El uso de imágenes es uno de los factores que ha popularizado tanto World Wide Web. Incluir imágenes en una presentación web es muy sencillo, solo debe de tener en cuenta que las imágenes tienen que tener los formatos GIF, JPEG o PNG. Las imágenes en línea, se especifican a partir de la tag <img> que no tiene una tag correspondiente de cierre pero que puede acompañarse de los siguientes atributos:

SRC= Este atributo es obligatorio e indica el nombre del archivo de imagen (entre comillas) o la URL que se va a representar.
ALIGN= Permite controlar la alineación de una imagen con respecto a una línea de texto adyacente o a otras imágenes en esa línea. Los tres valores posibles son los ya conocidos left, right, top, middle y bottom.
WIDTH= Este atributo es opcional pero es recomendable ponerlo para ayudar al navegador a representar la imagen, significa el ancho de la imagen que vamos a representar.
HEIGHT= Al igual que el atributo WIDTH, es opcional y recomendable ponerlo, este significa el alto de la imagen.
BORDER= Con BORDER especificamos el ancho de un borde que rodea la imagen.

En el navegador se vería de la siguiente manera:

Formatos de Imagen:

Tener algunas imágenes en un sitio Web lo hace más atractivo e intuitivo. Sin embargo, es importante no excederse ya que las imágenes pueden llevar mucho tiempo en cargarse y, en algunos casos, pueden hacer que un documento sea más difícil de leer.

La etiqueta IMG se usa para insertar imágenes en páginas HTML. La imagen puede ubicarse en el mismo servidor que la página en la que se inserta, pero también puede ubicarse en un servidor diferente si se especifica la dirección URL completa.

Solamente se admiten los siguientes formatos de imagen en los estándares W3C:

imágenes JPEG (.JPG): Imágenes con un gran número de colores que han sido comprimidas en un alto grado para reducir su tamaño, de modo que requieren menos tiempo para la descarga,
imágenes PNG: Tienen un tamaño más pequeño cuando la imagen tiene un número reducido de colores sólidos. Este formato permite también imágenes entrelazadas (que aparecen progresivamente) con colores de 24 bits e imágenes en las que uno de los colores se ha definido como transparente.
imagen GIF: Tienen las mismas ventajas que las imágenes PNG, aunque el formato GIF se limita a 256 colores y sea un formato no completamente abierto.

Texto Alternativo:

El texto alternativo que en la etiqueta IMG se reconoce o representa por ALT sirve para dar una referencia a la imagen cuando esta haya sufrido algún error de carga o quizá la ruta hacia la imagen no sea la correcta, a continuación mostraremos unas imágenes con el ejemplo anterior aplicando el texto alternativo.

Forzaremos un error en la ruta de la imagen para que se muestre el texto alternativo.

En el navegador se vería de la siguiente manera:

Como se ve cada espacio contiene el nombre de la imagen que debería ir en el recuadro.

Ahora les dejo un vídeo para que puedan comprender quizás de una manera mucho mejor como insertar imágenes en HTML.

2012-05-06T16:45:00.000-07:00

HIPERENLACES

Hiperenlaces <a>:

Los hiperenlaces se realizan con el tag ancla <A>. El elemento HTML correspondiente es un contáiner, es decir, debe cerrarse con el tag final de forma </A>. En el tag <A> se debe asignar al atributo HREF la dirección (que se activará pulsando el hiperenlace) en forma de un URL.

En el navegador se veria de la siguiente manera:

A continuación un vídeo que mostrara la forma de crear hiperenlaces en HTML

2012-05-06T16:14:00.002-07:00

FORMATO DE TEXTO

Caracteres especiales y espacios en blanco:

Una página web se ha de ver en paises distintos, que usan conjuntos de caracteres distintos. El lenguaje HTML nos ofrece un mecanismo por el que podemos estar seguros que una serie de caracteres raros se van a ver bien en todos los ordenadores del mundo, independientemente de su juego de caracteres.

Este conjunto son los caracteres especiales. Cuando queremos poner uno de estos caracteres en una página, debemos sustituirlo por su código.

Por ejemplo, la "á" (a minúscula acentuada) se escribe "á" de modo que la palabra página se escribiría en una página HTML de este modo: página

Caracteres especiales básicos

En realidad estos caracteres se usan en HTML para no confundir un principio o final de etiqueta, unas comillas o un & con su correspondiente caracter.

<	<	>	>
&	&	"	"

Caracteres especiales del HTML 2.0

Á	Á	À	À
É	É	È	È
Í	Í	Ì	Ì
Ó	Ó	Ò	Ò
Ú	Ú	Ù	Ù
á	á	à	à
é	é	è	è
í	í	ì	ì
ó	ó	ò	ò
ú	ú	ù	ù
Ä	Ä	Â	Â
Ë	Ë	Ê	Ê
Ï	Ï	Î	Î
Ö	Ö	Ô	Ô
Ü	Ü	Û	Û
ä	ä	â	â
ë	ë	ê	ê
ï	ï	î	î
ö	ö	ô	ô
ü	ü	û	û
Ã	Ã	å	å
Ñ	Ñ	Å	Å
Õ	Õ	Ç	Ç
ã	ã	ç	ç
ñ	ñ	Ý	Ý
õ	õ	ý	ý
Ø	Ø	ÿ	ÿ
ø	ø	Þ	Þ
Ð	Ð	þ	þ
ð	ð	Æ	Æ
ß	ß	æ	æ

Caracteres especiales del HTML 3.2

¼	¼
½	½	¡	¡
¾	¾	£	£
©	©	¥	¥
®	®	§	§
ª	ª	¤	¤
²	²	¦	¦
³	³	«	«
¹	¹	¬	¬
¯	¯
µ	µ	º	º
¶	¶	´	´
·	·	¨	¨
°	°	±	±
¸	¸	»	»
¿	¿

Otros caracteres especiales

×	×	¢	¢
÷	÷	€	€
	“		™
	”		‰
	Œ		ƒ
	‡		†

Espacios en Blanco:

El aspecto más sorprendente del lenguaje HTML cuando se desarrollan los primeros documentos es el tratamiento especial de los "espacios en blanco" del texto. HTML considera espacio en blanco a los espacios en blanco, los tabuladores, los retornos de carro y el carácter de nueva línea (Enter o Intro).

El siguiente ejemplo ilustra este comportamiento:

El anterior código HTML se visualiza en cualquier navegador de la siguiente manera:

Ejemplo de comportamiento de HTML con los espacios en blanco

Los dos párrafos de la imagen anterior se ven idénticos, aunque el segundo párrafo incluye varios espacios en blanco y está escrito en varias líneas diferentes. La razón de este comportamiento es que HTML ignora todos los espacios en blanco sobrantes, es decir, todos los espacios en blanco que no son el espacio en blanco que separa las palabras.

No obstante, HTML proporciona varias alternativas para poder incluir tantos espacios en blanco y tantas nuevas líneas como sean necesarias dentro del contenido textual de las páginas.

Comentarios saltos de linea <br>:

Para incluir una nueva línea en un punto y forzar a que el texto que sigue se muestre en la línea inferior, se utiliza la etiqueta . En cierta manera, insertar la etiqueta en un determinado punto del texto equivale a presionar la tecla ENTER (o Intro) en ese mismo punto.

La etiqueta es una de las pocas etiquetas especiales de HTML. La particularidad de es que es una etiqueta vacía, es decir, no encierra ningún texto. De esta forma, la etiqueta debe abrirse y cerrarse de forma consecutiva: .

En estos casos, HTML permite utilizar un atajo para indicar que una etiqueta se está abriendo y cerrando de forma consecutiva: (también se puede escribir como ).

Utilizando la etiqueta se puede rehacer el ejemplo anterior para que respete las líneas que forman el segundo párrafo:

El navegador ahora sí que muestra correctamente las nuevas líneas que se querían insertar:

Texto preformateado <pre>:

En ocasiones, es necesario mostrar los espacios en blanco de un texto que no se puede modificar. Se trata de un caso habitual cuando una página web debe mostrar directamente el texto generado por alguna aplicación.

En estos casos, se puede utiliza la etiqueta <pre>, que muestra el texto tal y como se ha escrito, respetando todos los espacios en blanco y todas las nuevas líneas.

El siguiente ejemplo muestra el uso de la etiqueta <pre>:

El ejemplo anterior incluye el mismo texto (con espacios en blanco y varias líneas) dentro de una etiqueta <pre> y dentro de una etiqueta . Las diferencias visuales en un navegador son muy evidentes:

Separadores <hr>:

Para separar un texto de otro o un párrafo de otro podemos utilizar una línea horizontal de un tamaño o un grosor determinado por nosotros. Esa franja la escribimos con la etiqueta <hr>. La contrario que muchas etiquetas html, ésta no necesita ser cerrada. Sólo con escribir la etiqueta anterior ya la escribimos.

La etiqueta <hr>, como muchas otras etiquetas, puede variar de aspecto dependiendo de una serie de caracteres o parámetros que podemos predefinir. Por ejemplo, podemos definir su grosor mediante el parámetro size.

Para escribir este parámetro en la etiqueta escribiremos “size=x”, siendo “x” el número del grosor de la franja.

El anterior código HTML se visualiza en cualquier navegador de la siguiente manera:

Sangrado de Texto <blockquote>:

Por otra parte, en muchos tipos de páginas (artículos, noticias) es habitual citar literalmente un texto externo.HTML define la etiqueta <blockquote> para incluir citas textuales en las páginas web. 

La etiqueta <blockquote> permite indicar mediante el atributo cite la dirección de un documento del que se ha extraído la cita.

El aspecto que muestra el ejemplo anterior en cualquier navegador es el siguiente:

Para indicar de forma clara que el texto es una cita externa, los navegadores muestran por defecto el texto del elemento <blockquote> con un gran margen en la parte izquierda.

Formatear el texto :

Las propiedades del texto pueden modificarse a través de la etiqueta . Para ello, podemos insertar el texto entre las etiquetas y , especificando algunos de los atributos de la etiqueta:

El aspecto que muestra el ejemplo anterior en cualquier navegador es el siguiente:

Formato de Parrafo ...:

Hay un a gran cantidad de tags para el diseño de la fuente. El

siguiente ejemplo contiene los comandos más importantes de este

grupo.

El aspecto que muestra el ejemplo anterior en cualquier navegador es el siguiente:

Marquesinas <marquee>:

Una marquesina (en inglés, marquee) es una ventana en la que se desplaza un texto.

Para utilizar una marquesina utilizamos <MARQUEE> de la siguiente forma:

<Marquee> Esto es un texto en marquesina </Marquee>

Esto es un texto en marquesina

Podemos modificar el efecto de la marquesina utilizando los siguientes modificadores:

<Marquee bgcolor=”cyan”>Esto es un texto en marquesina con color de fondo</Marquee>

Esto es un texto en marquesina con color de fondo

Con este modificador podemos indicar si la marquesina se va a mover de izquierda a derecha o de derecha a izquierda:

<Marquee direction=right>Esto es un texto en marquesina de izquierda a derecha</Marquee>

Esto es un texto en marquesina de izquierda a derecha

Las listas Ordenadas y Desordenadas:

Con HTML se pueden realizar diferentes tipos de listas. En primer
lugar mencionaremos la lista desordenadas, marcada con el elemento
UL. Cada elemento de la lista va marcado con el elemento LI e HTML.

En el navegador se vería de la siguiente manera

Las listas cuyos elementos se numeran son listas numeradas, "ordered lists", y van señalizadas por el elemento LO de HTML. Cada una de las entradas de la lista se forma, nuevamente, con el elemento LI(List Item).

En el navegador se veria de la siguiente manera

Alineaciones:

Nos permite alinear los textos dentro de elementos de bloque de las siguientes formas:

Izquierda (left).
Centrado (center).
Derecha (right).
Justificado (justify), es decir, centrado a derecha e izquierda.

Podemos utilizar el valor de "text-align: center":

En el navegador se veria de la siguiente manera:

A continuación les dejamos un vídeo que les ayudara a entender de una manera mucho mejor como se utilizan las etiquetas que dan formato a un párrafo de texto:

2012-05-06T13:34:00.000-07:00

INTRODUCCIÓN A HTML

Los documentos fundamentales de la www son los hipertextos. Los archivos correspondientes tienen la extensión HTML o HTM. La misma especificación HTML determina que estos archivos deben ser textos ASCII de 7 bits. Por eso no es posible esconder las informaciones que sirven para controlar el diseño del documento en caracteres no representables. Observando un documento HTML con un editor normal se puede ver tanto el contenido del documento como los comandos de formato. La sintaxis exacta de estos comandos de formato se define en las "Document Type Definitions" (DTD), basadas en el lenguaje de declaración SGML. No Obstante, hay que hacer hincapié en que todos los trabajos de la definición de este tipo de normas siguen, en general, el desarrollo de los programas de casas como Netscape y Microsoft, de modo que la autentica realidad de HTML no puede estar recogida totalmente en los documentos DTD existentes.

Definición de HTML:

Hyper Text Markup Language, o simplemente HTML, es un lenguaje de programación muy sencillo que se utiliza para crear los textos y las páginas web. Si se hace la traducción de su nombre del inglés al castellano, sería “Lenguaje de Marca de Hipertextos”, ya que es justamente un lenguaje que se basa en las marcas para crear los hipertextos.

Esta definición se debe a que está compuesto por etiquetas que definen la estructura y el formato del documento que verá el usuario a través de la web. Esas etiquetas son leídas por el navegador o visualizador, es decir el programa que se utiliza para navegar, y que es el que ejecuta las funciones creadas en HTML permitiendo que puedan ser visibles en nuestra máquina.

Estas etiquetas o tags están tanto al principio como al final de la directiva, y entre una y otra se escribe la directiva y atributos.

Versiones de HTML:

HTML 2.0

Cuando se produjo la explosión de Internet el estándar de HTML que circulaba era el 2.0 (establecido en noviembre del 95), de modo que cualquier navegador que encontremos sera capaz de interpretarlo. 

HTML 3.0 y 3.2

Aunque la versión 2.0 cumplia bien el objetivo para el que se creo, carecía de los documentos para tener un control mínimamente complejo de los documentos. No se considero necesario que lo tuviera, ya que por aquel entonces Internet era un fenómeno mas bien circunscrito a la actividad académica y el contenido primaba sobre el diseño. Debido a ello, Netscape ( líder del mercado de navegadores por aquel entonces) empezó a incluir etiquetas nuevas no incluidas en ningún estándar.

Por estos problemas, el IETF ( el comité que suele decidir todos los estándares dentro de Internet) comenzó a elaborar el borrador del HTML 3.0, que resulto ser demasiado grande para la época, lo que dificulto su aceptación en el mercado.

esto llevo a una serie de compañías ( entre ellas Netscape, Microsoft, IBM, Sun, etc...) a crear un nuevo comité llamado W3C, que es el que actualmente elabora las nuevas versiones del HTML. Su primer trabajo consistió en crear el borrador del HTML 3.2, (Netscape y Explorer) habían introducido en Internet, como son las tablas , los applets, etc. 

Este borrador fue aprobado en enero de 1997 e inmediatamente el W3CV se puso a trabajar en la elaboración del siguiente estandar: el 4.0.

HTML 4.0

En julio de 1997 se presenta el borrador de este estándar. Por fin se estandarizan los marcos (frames), las hojas de estilo y los scripts (entre otras cosas). El 17 de diciembre de 1997 dicho borrador fue finalmente aprobado.

HTML 5

Es la quinta revisión importante del lenguaje básico del la World Wide Web, HTML. HTML5 especifica dos variantes de sintaxis para HTML: un HTML (text/html), la variante conocida como HTML5 y una variante XHTML conocida como sintaxis XHTML5 que deberá ser servida como XML (XHTML) (application/xhtml + xml). Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo.

Los Navegadores Compatibles:

Como hemos dicho, el navegador instalado en el ordenador del usuario es el que interpreta el código HTML de la página que visita por lo que a veces puede ocurrir que dos usuarios visualicen la misma página de forma distinta porque tienen instalados navegadores distintos o incluso versiones distintas del mismo navegador.

Los navegadores de hoy en día pretenden ser compatibles con la última versión de HTML. Es necesario realizar extensiones de los navegadores para que puedan ser compatibles con esta última versión.

Dos de los navegadores que continuamente están realizando extensiones son Internet Explorer y Netscape Navigator, que realizan extensiones incluso antes de que se establezcan los estándares, intentando incluir las nuevas funciones incluidas en los borradores.

Los navegadores tienen que ser compatibles con la última versión HTML para poder interpretar el mayor número posible de etiquetas. Si un navegador no reconoce una etiqueta, la ignora y el efecto que pretendía la etiqueta no queda reflejado en la página.

Para realizar las extensiones de estos navegadores se añaden nuevos atributos a las etiquetas ya existentes, o se añaden nuevas etiquetas.

Como resultado a estas extensiones, habrán páginas cuyo código podrá ser interpretado completamente por todos los navegadores, mientras que otras, al incluir nuevos atributos o etiquetas del borrador de la última versión de HTML, solo podrán ser interpretadas en su totalidad en los navegadores más actualizados.

En este último caso también puede ocurrir que alguna etiqueta de la página solamente pueda ser interpretada por un navegador concreto, y otra etiqueta por un navegador diferente al anterior, por lo que nunca sería visualizada en su totalidad por ningún navegador.

Uno de los retos de los diseñadores de páginas web es hacer las páginas más atractivas utilizando toda la potencia del lenguaje HTML pero teniendo en cuentas estos problemas de compatibilidades para que el mayor número de internautas vean sus páginas tal como las ha diseñado.

Editores de Codigo de HTML:

Los editores de HTML pueden ser de dos tipos, como veremos, unos permiten codificar las páginas utilizando el propio lenguaje HTML, a base de etiquetas y otros nos permiten diseñar una página web, como si estuviésemos escribiendo con un editor de texto avanzado, sin tener que escribir el código con las etiquetas. Esta última vertiente, que podemos llamar editores en modo diseño, presenta una facilidad adicional para las personas que no deseen complicarse la vida con el lenguaje HTML, porque no tengan tiempo de aprenderlo o porque se sientan incapaces de hacerlo. Los editores en modo diseño nos permiten crear la página como si estuviéramos escribiendo un documento con un editor del tipo de Word. El editor de HTML es el encargado de vérselas con el lenguaje y programar internamente la página con el código HTML, según lo que nosotros estamos diseñando.

Con el editor HTML en vista diseño podemos colocar imágenes, definir estilos, utilizar negritas o cursivas, etc. sin preocuparnos de las etiquetas correspondientes a cada estilo o elemento. Es el editor el que conoce estas etiquetas y las utiliza convenientemente. Este tipo de editores HTML en modo diseño se denominan, en lenguaje técnico WYSIWYG (What You See Is What You Get) porque cuando trabajas con ellos lo que ves que estás creando con el editor es lo que obtienes luego cuando grabas la página.

Cada uno debe escoger el camino que más le convenga o el que le parezca más atractivo. De todos modos siempre se puede empezar de un modo y luego pasar al otro modo sin ningún tipo de problema. Incluso, por adelantarnos a los acontecimientos, diríamos que cuando una persona profundiza en el diseño de páginas web llega un momento en el que le hace falta conocer las dos maneras de construir webs. A los programadores en HTML les hará falta aprender un editor porque eso aumentará su productividad y los que utilizan editores necesitarán aprender un poco de HTML para arreglar alguna cosa que el editor ha hecho mal o realizar alguna cosa que el editor no puede hacer.

Este manual está escrito por una persona que aprendió a realizar sus primeras webs con el Block de notas y algunas veces puede verse mi mayor inclinación a escribir el código HTML uno mismo. Aunque mi consejo es aprender HTML, estoy seguro que muchos preferirán que un editor en modo diseño haga las cosas más sencillas. Si el editor HTML WYSIWYG es bueno y lo dominamos perfectamente se pueden obtener perfectos resultados.

Editores HTML modo diseño WYSIWYGEn el mercado existen multitud de editores de HTML WYSIWYG, es importante elegir un editor bueno porque nuestros trabajos van a depender de sus resultados. Actualmente el rey de los editores y el que os aconsejaríamos sin duda es el Dreamweaver, fabricado por Adobe.

Otras posibilidades son editores como

Kompozer, una opción gratuita
Frontpage, aunque lo desaconsejamos.

Editores de texto preparados para escribir código HTML

Las personas que después de estas líneas han decidido aprender el lenguaje HTML también tienen herramientas muy interesantes para aumentar su productividad sin dejar de escribir ellos mismos el HTML que desean. Se trata de unos editores de texto, como cualquier otro, que están preparados para escribir HTML y por lo tanto ofrecen multitud de ayudas a los diseñadores:

Pueden tener abiertos y editar varios ficheros a la vez
Colorean los códigos de las páginas para hacerlos más comprensibles
Suelen soportar otros lenguajes de programación con los que podemos llegar a trabajar en el desarrollo de páginas web.
Ofrecen ayudas a la programación, que muchas veces son contextuales y se activan a medida que vamos realizando las páginas.
Y además muchos de ellos tienen herramientas integradas para hacer cosas tan variadas como la generación de código, asistentes, módulos de conexión por FTP con el servidor, etc.

Dependiendo del programa escogido tendremos unas herramientas y ayudas u otras. Simplemente es elegir el que más se adapte a nuestras necesidades. Algunos ejemplos son:

Notepad++, gratuito y código libre.

Home Site, que estaba bien, aunque Adobe hace años que no lo actualiza.

UltraEdit, que es un editor para programadores de los más populares.

Arachnophilia, que funciona en todos los sistemas operativos.

Si nos decidimos por escribir el código fuente en HTML será muy recomendable utilizar cualquiera de estos programas, para sentirnos más a gusto al programar las páginas y poder hacerlas más rápido. No obstante cabe recordar que cualquier editor de textos serviría para hacer páginas web, incluso el Block de notas, que es el editor más sencillo que existe para texto plano, pero utilizar un programa de estos será imprescindible con el tiempo.

En la sección de programas de desarrolloweb tenemos descripciones de algunos editores de HTML, tanto en modo diseño como escribiendo el código.

Estructura de una Pagina:

Identificador del tipo de documento <HTML>

La etiqueta <HTML> sirve de identificador , es decir da la referencia que el documento que se esta generando es del tipo HTML. Esta etiqueta se coloca al inicio y termino del documento es decir tiene una apertura <HTML> y un cierre </HTML>

Cabecera de una Pagina <HEAD>

La etiqueta <head> delimita la sección de la cabecera del documento HTML y contiene el título, la metainformación y, en la mayoría de los casos los scripts del documento están incluidos en esta sección.

Por ejemplo contiene etiquetas que pueden decir de qué va la página, el título que debe de mostrar en la barra del navegador, o código JavaScript y estilos CSS, que pueden estar en el propio encabezado o como llamadas a otros archivos.

Titulo de la Pagina <TITLE>

El título del documento es el que aparecerá en la parte superior de la ventana del navegador, cuando la página esté cargada en él.

Para asignar un título a una página es necesario escribir el texto deseado entre las etiquetas <title> y</title>.

Estas etiquetas han de estar dentro de la cabecera, es decir, entre las etiquetas <head> y </head>

La Etiqueta Meta <META>

La etiqueta <meta> no necesita etiqueta de cierre. Para cada etiqueta <meta> solo es posible indicar un tipo de información y su valor, pero es posible insertar varias etiquetas <meta> en un mismo documento.

La etiqueta <meta> ha de estar entre las etiquetas <head> y </head>
A continuación se muestra un video que les ayudara a comprender mejor la etiqueta meta.

Cuerpo del documento <BODY>

El cuerpo del documento contiene la información propia del documento, es decir lo que queremos que se visualice, el texto de la página, las imágenes, los formularios, etc.

Todos estos elementos tienen que encontrarse entre las etiquetas <body> y </body>, que van justo debajo de la cabecera.

Colores en Hexadecimal

Los colores en HTML se representan mediante un número hexadecimal.

Un número hexadecimal se diferencia de un número decimal en que no sólo puede tomar valores del 0 al 9, sino que puede tomar hasta dieciséis valores distintos, que van del 0 al 9, y de laA a la F.

Cada color estará representado por un grupo de seis dígitos en hexadecimal, precedidos por una almohadilla, como por ejemplo #FFFFFF.

Existen 216 colores seguros para web. Éstos son los colores que se muestran de la misma forma en Microsoft Internet Explorer y en Netscape Navigator, tanto en Windows como en Macintosh.

También podemos personalizar nuestros propios colores, modificando los valores de cada uno de los dígitos que forman parte del número hexadecimal.

Ejemplos:

Á	Á	À	À
É	É	È	È
Í	Í	Ì	Ì
Ó	Ó	Ò	Ò
Ú	Ú	Ù	Ù
á	á	à	à
é	é	è	è
í	í	ì	ì
ó	ó	ò	ò
ú	ú	ù	ù
Ä	Ä	Â	Â
Ë	Ë	Ê	Ê
Ï	Ï	Î	Î
Ö	Ö	Ô	Ô
Ü	Ü	Û	Û
ä	ä	â	â
ë	ë	ê	ê
ï	ï	î	î
ö	ö	ô	ô
ü	ü	û	û
Ã	Ã	å	å
Ñ	Ñ	Å	Å
Õ	Õ	Ç	Ç
ã	ã	ç	ç
ñ	ñ	Ý	Ý
õ	õ	ý	ý
Ø	Ø	ÿ	ÿ
ø	ø	Þ	Þ
Ð	Ð	þ	þ
ð	ð	Æ	Æ
ß	ß	æ	æ

¼	¼
½	½	¡	¡
¾	¾	£	£
©	©	¥	¥
®	®	§	§
ª	ª	¤	¤
²	²	¦	¦
³	³	«	«
¹	¹	¬	¬
¯	¯
µ	µ	º	º
¶	¶	´	´
·	·	¨	¨
°	°	±	±
¸	¸	»	»
¿	¿

Á	Á	À	À
É	É	È	È
Í	Í	Ì	Ì
Ó	Ó	Ò	Ò
Ú	Ú	Ù	Ù
á	á	à	à
é	é	è	è
í	í	ì	ì
ó	ó	ò	ò
ú	ú	ù	ù
Ä	Ä	Â	Â
Ë	Ë	Ê	Ê
Ï	Ï	Î	Î
Ö	Ö	Ô	Ô
Ü	Ü	Û	Û
ä	ä	â	â
ë	ë	ê	ê
ï	ï	î	î
ö	ö	ô	ô
ü	ü	û	û
Ã	Ã	å	å
Ñ	Ñ	Å	Å
Õ	Õ	Ç	Ç
ã	ã	ç	ç
ñ	ñ	Ý	Ý
õ	õ	ý	ý
Ø	Ø	ÿ	ÿ
ø	ø	Þ	Þ
Ð	Ð	þ	þ
ð	ð	Æ	Æ
ß	ß	æ	æ

¼	¼
½	½	¡	¡
¾	¾	£	£
©	©	¥	¥
®	®	§	§
ª	ª	¤	¤
²	²	¦	¦
³	³	«	«
¹	¹	¬	¬
¯	¯
µ	µ	º	º
¶	¶	´	´
·	·	¨	¨
°	°	±	±
¸	¸	»	»
¿	¿

Á	Á	À	À
É	É	È	È
Í	Í	Ì	Ì
Ó	Ó	Ò	Ò
Ú	Ú	Ù	Ù
á	á	à	à
é	é	è	è
í	í	ì	ì
ó	ó	ò	ò
ú	ú	ù	ù
Ä	Ä	Â	Â
Ë	Ë	Ê	Ê
Ï	Ï	Î	Î
Ö	Ö	Ô	Ô
Ü	Ü	Û	Û
ä	ä	â	â
ë	ë	ê	ê
ï	ï	î	î
ö	ö	ô	ô
ü	ü	û	û
Ã	Ã	å	å
Ñ	Ñ	Å	Å
Õ	Õ	Ç	Ç
ã	ã	ç	ç
ñ	ñ	Ý	Ý
õ	õ	ý	ý
Ø	Ø	ÿ	ÿ
ø	ø	Þ	Þ
Ð	Ð	þ	þ
ð	ð	Æ	Æ
ß	ß	æ	æ

¼	¼
½	½	¡	¡
¾	¾	£	£
©	©	¥	¥
®	®	§	§
ª	ª	¤	¤
²	²	¦	¦
³	³	«	«
¹	¹	¬	¬
¯	¯
µ	µ	º	º
¶	¶	´	´
·	·	¨	¨
°	°	±	±
¸	¸	»	»
¿	¿