Para los que le gusta leer xD y quieren diseñar una pagina web. INTRODUCCIÓN: El principio esencial del lenguaje HTML (HyperText Markup Language) es el uso de las etiquetas (tags). Las letras de la etiqueta pueden estar en mayúsculas o minúsculas, indiferentemente. Todo el documento HTML debe estar entre las etiquetas y : [Todo el documento] El documento en sí está dividido en dos zonas principales: • El encabezamiento, comprendido entre las etiquetas y . Dentro del encabezamiento hay información del documento, que no se ve en la pantalla principal, como el título del documento, comprendido entre las etiquetas y . El título debe ser breve y descriptivo de su contenido, pues será lo que vean los demás cuando agreguen nuestra página a sus favoritos, por ejemplo. • El cuerpo, comprendido entre las etiquetas y . Dentro del cuerpo están todos los elementos que queremos que aparezca en la página (texto, imágenes, etc.) Por tanto, la estructura queda de esta manera: Título de la página [Aquí van las etiquetas que visualizan la página] Lo mínimo que se necesita para crear y ejecutar un documento HTML es un editor de texto (como el block de notas) y un explorador web (como el IE). No olvidar que al guardar el archivo en el editor, su extensión debe ser .HTM o .HTML. Cuando escribimos en el documento el texto que queremos que aparezca en la pantalla se acomoda a ella, sin que tengamos que pulsar Enter. Nombres de los Archivos: Un sitio del Web es en realidad un conjunto de archivos, bien sea de texto (los documentos HTML), bien sea binarios (imágenes, sonidos, etc.) que vamos a colocar en un servidor, para que sean accesibles a quien quiera visitarlos. Pero debido a que la mayoría de los servidores están basados en sistemas Unix (aunque crecientemente se van utilizando otros sistemas), es muy conveniente, para evitarnos problemas al instalar nuestros ficheros en el servidor, considerar una particularidad referente a los nombres de los ficheros. En los sistemas más utilizados para confeccionar las páginas del Web (Windows, Mac) es indiferente la utilización de las mayúsculas y minúsculas en los nombres de los achivos. Es decir, es lo mismo Indice.html que INDICE.HTML o que indice.html Pero esto no es así en los sistemas Unix, en donde los ejemplos anteriores se corresponderían a tres nombres distintos. Si no se tiene esto en cuenta, puede ocurrir, por ejemplo, que una referencia que se haga en un documento HTML al fichero Indice.html resulte en un error de que no existe tal fichero debido a que en realidad se llama indice.html Para evitar estos posibles problemas es muy conveniente tomar estas medidas desde que se comienza la confección de una página del Web: • Utilizar exclusivamente las minúsculas para nombrar los documentos HTML, y todos aquellos que forman parte de la web (imágenes, sonido, etc). • Todas las referencias que se hagan dentro de un documento HTML a otros documentos o archivos deben hacerse también siempre en minúsculas. • Evitar los espacios en los nombres de archivos; usar el guión bajo. Algunos servidores exigen además de lo anteriormente indicado que los documentos HTML tengan la extensión .html en lugar de la de .htm Si es así, además de nombrar a los archivos con dicha extensión, no olvidarse de hacer las referencias dentro de los documentos también con esta extensión. ETIQUETAS: • Para párrafos: se usa la etiqueta
, (que en la versión 6 del IE se cierra con
, no así en la 5 o anteriores). Deja un espacio entre cada párrafo. • Para separar un mismo párrafo en varias partes: sin cerrarla. No deja espacio entre las partes divididas. • Para obtener varias líneas en blanco, se usan ambas:
, una por cada línea a generar. • Si se necesita separar palabras con más de un espacio: sin usar los signos < y >(non-breaking space). • Cabeceras:
y
,
y
, etc. (hasta el número 6), siendo el número indicativo del tamaño. El tamaño mayor es el correspondiente al número 1. • Centrado:
(no la soportan todos los navegadores). Centra todo lo que esté dentro de ella, ya sea texto, imágenes, etc. • Separadores (horizontal rules): (no existe la correspondiente de cierre). Con ella se obtiene una raya horizontal tan ancha como la pantalla. • Ocupa el 75% de su anchura (width) normal. • Tiene una anchura de 300 pixels. • Alinear a la derecha. • Para variar su espesor. • Para que sea una línea sólida. • Estilo Negrita: (bold). • Estilo Cursiva: (italic). • Superíndice: • Subíndice: • Listas sin orden (unordered lists): sirven para presentar cosas que, por no tener un orden determinado, no necesitan ir precedidas por un número. Aparecen viñetas sencillas. Su estructura es la siguiente:
Una cosa
Otra cosa
• Listas ordenadas (ordered lists): sirven para presentar cosas en un orden determinado. Su estructura es muy similar a la anterior. Aparecerá un número correlativo para cada cosa.
Primera cosa
Segunda cosa
• Comentarios no visibles en la pantalla: se consiguen encerrando dichos comentarios entre • Enlaces (Links): La característica que más ha influido en el éxito del Web ha sido, aparte la de su carácter multimedia, la posibilidad de unir los distintos documentos por medio de enlaces de hipertexto. En general, los enlaces tienen la siguiente estructura: yyy Donde: • xxx es el destino del enlace (Obsérvese las comillas). • yyy es el marcador, o sea el texto indicativo en la pantalla del enlace (con un color especial y generalmente subrayado) Vamos a distinguir cuatro tipos de enlaces: Enlaces dentro de la misma página: En el caso de documentos muy extensos, nos puede interesar dar un salto desde una posición a otra determinada. YYY En este caso, el destino del enlace (que sería el sitio dentro de la página a donde queremos saltar) se sustituye por #marca (la palabra marca puede ser cualquier palabra que queramos). Lo que hemos llamado antes YYY es el marcador (palabras subrayadas) que aparecerán en la pantalla. Y en el sitio exacto a donde queremos saltar, debemos poner la siguiente etiqueta: Por ejemplo, si quiero saltar desde aquí a la pantalla final, pongo la siguiente etiqueta: Pulsa para ir al final Y en el final del documento he puesto esta otra etiqueta: Enlaces con otra página nuestra: Ir a la Página 2 Estamos suponiendo que la página en la que estamos escribiendo esta etiqueta y la otra página a la que queremos saltar están en el mismo directorio. Si la página a la que queremos saltar está, p. ej. en el subdirectorio subdir, entonces en la etiqueta tendría que haber puesto "subdir/mipag2.html". Y a la inversa, si queremos saltar desde una página a otra que está en un directorio anterior, en la etiqueta tendríamos que haber puesto "../mipag2.html". Esos dos puntos hace que se dirija al directorio anterior. Enlaces con una página fuera de nuestro sistema: Es necesario conocer su dirección completa, o URL (Uniform Resource Locutor). Página inicial de Netscape Enlaces con una dirección de email: Texto del enlace Ejemplo: Envía un email a Francisco Arocena Imágenes: Con el comando IMG SRC (image source, fuente de la imagen) se indica que se quiere cargar una imagen llamada imagen.gif (o el nombre que tenga). La imagen debe estar en la misma carpeta que la página, sinó se debe usar “/”, como en los enlaces. Dentro de la etiqueta se pueden añadir otros comandos, tal como ALT, para colocar un texto alternativo (una palabra o una frase breve). A la imagen se le puede agregar un titular y alinearlo arriba (TOP), en medio (MIDDLE) o abajo (BOTTOM) del lado de la imagen. Para ello se añade el comando ALIGN a la etiqueta, de la siguiente manera: Titular alineado arriba Otra posibilidad muy interesante es la de utilizar una imagen como enlace a otra página. Aquí al formato del enlace se le anida la imagen, la cual funcionará como marcador del enlace: La imagen queda rodeada de un rectágulo del color normal en los enlaces. Para quitarlo, agregar dentro del tag IMG BORDER=0 Fuentes: Para cambiar la fuente de los textos, se usa En la etiqueta de apertura, se especifica qué se quiere modificar de dicha fuente (el tamaño, el tipo, el color): • Tamaño: Texto en tamaño 5 Los tamaños del texto van, de menor a mayor, del 1 al 7. El tamaño normal es el 3. Se puede cambiar incluso el tamaño base para toda la página, poniendo a continuación de la etiqueta • Tipos de las fuentes: Este texto se verá con la fuente Verdana Los navegadores utilizan por defecto Times New Roman. Quien no tenga la fuente Verdana instalada, por ejemplo, verá el texto en Times New Roman. • Color: Texto en color Donde: • XX es un número indicativo de la cantidad de color rojo • YY es un número indicativo de la cantidad de color verde • ZZ es un número indicativo de la cantidad de color azul Estos números están en hexadecimal. El número menor es el 00 y el mayor el FF. Así, por ejemplo, el color rojo es el #FF0000, porque tiene el máximo de rojo y cero de los otro dos colores . Los colores primarios son: o #FF0000 - Rojo o #00FF00 - Verde o #0000FF - Azul Otros colores son: o #FFFFFF - Blanco o #000000 - Negro o #FFFF00 - Amarillo Fondos: Se puede cambiar el fondo de dos maneras distintas: 1. Con un color uniforme: Se pueden elegir los colores del texto y de los enlaces, añadiendo a la etiqueta los siguientes comandos: Donde: TEXT - color del texto LINK - color de los enlaces VLINK - color de los enlaces visitados ALINK - color de los enlaces activos (el que adquieren en el momento de ser pulsados) 2. Con una imagen: Se pueden combinar ambos; si la imagen no se puede cargar, toma el color de fondo: Alineación y dimensionado de imágenes: 1. Para alinearla: 2. Para cambiar su tamaño en ambas dimensiones: Se corre el riesgo de deformar la imagen. Para que esto no ocurra y se respeten sus proporciones, solamente se debe usar uno de ellos: o WIDTH, o HEIGHT. La otra dimensión se ajusta a la que fue modificada. Tablas: La etiqueta general, que engloba a todas las demás es
y
. Es decir:
[resto de las etiquetas]
Para ver los bordes:
[resto de las etiquetas]
Para formar cada fila (row) de la tabla, se usa
y
. Hay que repetirlas tantas veces como filas queremos que tenga la tabla.
[etiquetas de las distintas celdas de la primera fila]
En el último nivel (dentro de las anteriores) están las etiquetas de cada celda, que son
y
, que engloban el contenido de cada celda concreta (texto, imágenes, etc.). Hay que repetirla tantas veces como celdas queremos que haya en esa fila.
celda1
celda2
Ejemplo de una tabla con dos filas. Cada fila va a tener tres celdas. Dentro de cada celda vamos a poner un texto indicativo de la posición de dicha celda:
fila1-celda1
fila1-celda2
fila1-celda3
fila2-celda1
fila2-celda2
fila2-celda3
Se puede añadir un titular (caption) a la tabla:
Titular de Tabla
El atributo BORDER pone por defecto un borde de espesor igual a la unidad. Pero se puede hacer que este borde sea tan grueso como queramos, poniendo:
Normalmente, el contenido de una celda está alineado a la izquierda. Pero se puede cambiar:
Al centro
A la derecha
El alineamiento por defecto en el sentido vertical es en el medio. También se puede cambiar:
Arriba
Abajo
o Para cambiar el ancho y el alto de la tabla:
Como se ve, se puede usar el % que va a ocupar con respecto al ancho de la pantalla, o una medida en pixels. o Color de fondo en toda la tabla:
o Color de fondo en una celda:
celda1
o Imágenes de fondo en las tablas:
o Separación entre las celdas de una tabla:
o Separación entre el borde y el contenido dentro de las celdas:
Sonidos: Una página del Web puede tener sonidos incorporados, bien sea como un fondo sonoro que se ejecuta automáticamente al cargar la página, o como una opción para que la active el propio usuario. Fondo sonoro: El archivo de sonido puede estar en formato .mid o .wav. LOOP sirve para especificar el número (n) de veces que se debe ejecutar el archivo Si se escoje el número n=-1 o se pone LOOP=infinite, el sonido se ejecutará indefinidamente. Se puede omitir este atributo, y entonces el fichero se ejecutará una sola vez. Activación del sonido por el propio usuario: Consiste en poner un enlace a un archivo de sonido, de tal manera, que al pulsarlo se ejecute. Ejemplo: Escucha esta musica Al pulsar el enlace se activa, en una ventana aparte, el programa que ejecuta el sonido. • Para ejecutar videos y animaciones: Marquesinas (Marquees): Una marquesina (en inglés, marquee) es una ventana en la que se desplaza un texto. La etiqueta básica es: En este caso el comportamiento de la marquesina es el que tiene por defecto: ocupa todo el ancho de la pantalla, tiene la altura de una línea y el texto se desplaza lentamente de derecha a izquierda. Para ajustar la anchura y altura: Para cambiar la alineación del texto: Se coloca ALIGN seguido de TOP (arriba), MIDDLE (en medio) o BOTTOM (abajo). Ejemplo: BEHAVIOR (Comportamiento): Sirve para definir de cómo se va a efectuar el desplazmiento del texto. Si es igual a SLIDE, aparece por un lado y se desplaza hasta llegar al otro extremo, y se para ahí. Si es igual a ALTERNATE se desplaza alternativamente hacia un lado y otro, siempre dentro de los límites de la marquesina. Ejemplo: Para cambiarle el color de fondo: Para modificar la dirección del texto: Para definir la cantidad de desplazamiento del texto en cada movimiento de avance: Para definir el tiempo entre cada movimiento de avance (en milisegundos): Cuanto mayor es el número más lento avanza. Formularios: Permiten que los demás nos envíen la información directamente a nosotros o bien a nuestro servidor, en donde hemos instalado un programa que procese esta información. Constituyen la forma de comunicación entre los usuarios y los webmasters. Existen dos formas: por medio de un enlace a nuestra dirección de email, con lo que recibiríamos un email con los datos ingresados en texto plano (la forma más fácil). La otra posibilidad es que hubiéramos instalado en nuestro servidor un programa especial para procesar esos datos, y que incluso pudiera devolver automáticamente al usuario algún tipo de información. Para conseguir esto, los formularios necesitan ejecutar programas o scripts por medio del CGI (Common Gateway Interface). El CGI permite a los formularios ser procesados por programas escritos en cualquier lenguaje, aunque los más usados en Internet son ASP, PHP, PERL y C. Estructura de un formulario: 1. Etiqueta de inicio: • Frames (Marcos) Es un procedimiento del lenguaje HTML para dividir la pantalla en diferentes zonas, o ventanas, que pueden actuar independientemente unas de otras, como si se trataran de páginas diferentes, pues incluso cada una de ellas pueden tener sus propias barras deslizadoras. Una de sus características más importantes es que pulsando un enlace situado en un frame, se puede cargar en otro frame una página determinada. Esto se utiliza frecuentemente para tener un frame estrecho en la parte lateral (o superior) con un índice del contenido en forma de diferentes enlaces, que, al ser pulsados cargan en la ventana principal las distintas páginas. De esta manera se facilita la navegación entre las páginas, pues aunque se vaya pasando de unas a otras, siempre estará a la vista el índice del conjunto. Documento de definición de los frames Lo primero que tenemos que hacer es crear un documento HTML en el que definiremos cuántas zonas va a haber, qué distribución y tamaño van a tener, y cuál va ser el contenido de cada una de ellas. En el ejemplo que vamos a desarrollar, la página va a tener dos frames distribuidos en columnas (es decir, uno al lado del otro, en vez de uno encima del otro, lo que sería una distribución en filas). Con respecto al tamaño, haremos que el primero (el del izquierda) ocupe el 20% del ancho de la pantalla, y el otro, el 80% restante. Y con respecto al contenido, el frame de la izquierda va a contener un documento HTML que va a servir de índice de lo que veamos en el otro (y que vamos a llamar mipagind.html), y el de la derecha otro documento HTML que va a servir de página de presentación (al que llamaremos mipagpre.html). Todo lo anterior se refleja en el siguiente documento HTML: Mi pagina con frames En vez de utilizar la etiqueta BODY, que sirve para delimitar lo que se va a ver en la pantalla, se hace uso de la etiqueta FRAMESET (definir los frames). En este caso, con la etiqueta
Con el comando IMG SRC (image source, fuente de la imagen) se indica que se quiere cargar una imagen llamada imagen.gif (o el nombre que tenga). La imagen debe estar en la misma carpeta que la página, sinó se debe usar “/”, como en los enlaces. Dentro de la etiqueta se pueden añadir otros comandos, tal como ALT, para colocar un texto alternativo (una palabra o una frase breve). 
Titular alineado arriba Otra posibilidad muy interesante es la de utilizar una imagen como enlace a otra página. Aquí al formato del enlace se le anida la imagen, la cual funcionará como marcador del enlace: 
La imagen queda rodeada de un rectágulo del color normal en los enlaces. Para quitarlo, agregar dentro del tag IMG BORDER=0 Fuentes: Para cambiar la fuente de los textos, se usa En la etiqueta de apertura, se especifica qué se quiere modificar de dicha fuente (el tamaño, el tipo, el color): • Tamaño: Texto en tamaño 5 Los tamaños del texto van, de menor a mayor, del 1 al 7. El tamaño normal es el 3. Se puede cambiar incluso el tamaño base para toda la página, poniendo a continuación de la etiqueta 
2. Para cambiar su tamaño en ambas dimensiones: