MANUAL DE REFERENCIA DE PROGRAMACIÓN HTML HTML (HyperText Markup Language) es un lenguaje muy sencillo que permite describir hipertexto, es decir, texto presentado de forma estructurada y agradable, con enlaces (hyperlinks) que conducen a otros documentos o fuentes de información relacionadas, y con inserciones multimedia (gráficos, sonido...) La descripción se basa en especificar en el texto la estructura lógica del contenido (títulos, párrafos de texto normal, enumeraciones, definiciones, citas, etc) así como los diferentes efectos que se quieren dar (especificar los lugares del documento donde se debe poner cursiva, negrita, o un gráfico determinado) y dejar que luego la presentación final de dicho hipertexto se realice por un programa especializado (como Mosaic, o Netscape). ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML Un documento HTML comienza con la etiqueta <html>, y termina con </html>. Dentro del documento (entre las etiquetas de principio y fin de html), hay dos zonas bien diferenciadas: el encabezamiento, delimitado por <head> y </head>, que sirve para definir diversos valores válidos en todo el documento; y el cuerpo, delimitado por <body> y </body>, donde reside la información del documento. La única utilidad del encabezamiento en la que nos detendremos es la directiva(tag) <title>, que permite especificar el título de un documento. <title>manual práctico de HTML</title> Todos los efectos se especifican exclusivamente a través de directivas (tag). Esto quiere decir que los espacios, tabulaciones y retornos de carro que se introduzcan en el fichero fuente no tienen ningún efecto a la hora de la presentación final del documento.
Ejemplo de la estructura de un código html, <html> <head> <title>título</title> </head> <body> Texto del documento, menciones a gráficos, enlaces, etc. </body> </html> ETIQUETAS BÁSICAS DE LA ESTRUCTURA Titulo de la página Mediante el tag <title> podemos determinar un titulo que aparecerá en la parte superior del navegador en el momento de ejecutar la página web. <title> titulo de la pagina </title> Importante: el comando <title> se tiene que poner entre las etiquetas <head> y </head> ya que forma parte de la cabecera de la pagina web. <body> </body> Entre estas etiquetas tag expresaremos todo el contenido de nuestra página web. El significado de esta etiqueta es cuerpo de forma que es para determinar todo el contenido de la web. La etiqueta <body> admite una serie de parámetros para determinar el funcionamiento del cuerpo de la página web. Un parámetro muy utilizado es el bgcolor, el cual permite determinar el color de fondo. Un ejemplo seria, <body bgcolor= red > Ahora estriamos determinando el color de fondo rojo.
ESTILOS Y EFECTOS BÁSICOS Como ya hemos dicho, la estructura lógica del texto y los diferentes efectos que se le apliquen se especifican mediante TAGS. En este punto vamos a repasar algunas de las más importantes. En cada uno de los casos que veremos, primero se presenta el texto original HTML. TÍTULOS Mediante los títulos, en sus diferentes niveles de importancia, podemos definir el esqueleto del documento, su estructura básica, pueden ser las tags (h1, h2,h3) donde cada uno tiene un formato específico, por ejemplo <h1>títulos principales</h1> Títulos principales <h2>subtítulos</h2> Subtítulos <h3>normal</h3> normal ATRIBUTOS DEL TEXTO Mediante estos atributos determinamos el estilo y el tipo de letra que tendrá la presentación del documento final. Para forzar un final de línea es necesario utilizar dos tags especiales: <p> para marcar un fin de párrafo <br> para un único retorno de carro. La diferencia entre ambas es que el tag <p> deja más separación entre líneas, que <br>. El texto preformateado está representado por el tag <pre> y que se respeten los espacios y retornos de carro que hayamos puesto en el texto fuente. Además se utilizará un tipo de letra de espaciado fijo, parecido al de una máquina de escribir, más pequeño que el del texto normal.
ATRIBUTOS DE NEGRITA Y CURSIVA Vienen representados por las etiquetas, <b> y <i> respectivamente. De forma que para poner un texto en negrita o en cursiva en un documento html se tendría que indicar de la siguiente manera, <b>texto que saldrá en negrita</b> texto que saldrá en negrita <i> texto que saldrá en cursiva</i> texto que saldrá en cursiva <b><i>texto en negrita y cursiva</i></b> texto en negrita y cursiva COLOR DEL TEXTO Otro atributo básico del texto seria el <Font color> que permite determinar el color de la letra. <Font color= white > texto </Font> Este ejemplo determinaría el color de la letra de la palabra texto. LÍNEAS SEPARADORAS HORIZONTALES El tag <hr> dibuja una línea horizontal igual de larga que el ancho de la página, por ejemplo, <hr> El resultado será,
COMENTARIOS EN EL CÓDIGO HTML Para poner comentarios que no aparecerán en la reproducción de la página web, sino que solo se visualizan en el código de programación para aclaraciones del programador se utiliza el tag Por ejemplo, <!-- comentario --> <!-- Pagina web creada por Pepito para el cliente Rosal S.A. --> ALINEACIÓN DEL TEXTO Para alinear el texto en html disponemos de los siguientes tags, <left> alinea a la izquierda el texto <center> alinea al centro el texto <right> alinea a la derecha el texto Por ejemplo, <left> texto a la izquierda </left> texto a la izquierda <center>texto al centro</center> texto al centro <right>texto a la derecha</right> texto a la derecha LISTAS Podemos crear textos en forma de listas, utilizando como principio de cada elemento de la lista, a un símbolo (punto), un valor numérico o una lista en forma de glosario. Las listas se pueden anidar, es decir, en el lugar donde debería ir uno de los términos de la lista se pone una nueva lista, que por supuesto no tiene porqué ser del mismo tipo.
El tag para iniciar una lista no numerada, es decir, con símbolos, es el tag <ul> y después cada elemento de la lista se indica con el tag <li>, por ejemplo <ul> <li>clientes <li>proveedores <li>facturas </ul> Resultado del ejemplo, Clientes Proveedores Facturas Las listas numeradas se inician con el tag <ol> y cada elemento de la lista con <li>, por ejemplo, <ol> <li>director General <li>gerente <li>responsable administración </ol> Resultado del ejemplo, 1. Director General 2. Gerente 3. Responsable administración Para las listas en forma de glosario utilizaremos el tag <dl>, para cada elemento principal de la lista <dt> y para el subelemento <dd>, por ejemplo,
<dl> <dt>html <dd>lenguaje de programación básico de páginas web <dt>navegador <dd>programa que nos permite visualizar el contenido web de una dirección <dt>url <dd>dirección para acceder a un contenido html disponible en internet </dl> El resultado de la lista anterior seria, HTML Lenguaje de programación básico de páginas web NAVEGADOR Programa que nos permite visualizar el contenido web de una dirección URL Dirección para acceder a un contenido html disponible en internet TABLAS Podemos crear tablas en código html determinando el numero de filas y columnas, así como el contenido de cada celda (celda=porción de la cuadricula). El código para crear una tabla requiere de diferentes tags, ejemplo, <table> tag de inicio de tabla <tr> tag de inicio de la primera fila <td> </td> tag para determinar el contenido de la 1ª columna <td> </td> tag para determinar el contenido de la 2ª columna.. repetimos el código <td> tantas veces como columna queramos </tr> fin de la primera fila <tr> tag de inicio de la segunda fila <td> </td> tag para determinar el contenido de la 1ª columna <td> </td> tag para determinar el contenido de la 2ª columna.. repetimos el código <td> tantas veces como columna queramos </tr> fin de la segunda fila. repetimos el código <tr> tantas veces como filas queramos en la tabla </table> finalizamos la tabla. Al tag <table> le podemos determinar unos parámetros para especificar el formato. Por ejemplo, Parámetro border (determina ancho de la línea de la tabla) Parámetro bgcolor (color de fondo) Parámetro align (alineación de la tabla)
Un ejemplo completo seria, <table align= center border= 3 bgcolor #ffcccc > Pondría la tabla en el centro con un borde de 3px de ancho y el color de fondo rosa correspondiente al código #ffcccc. Tabla de colores y códigos, 256 Colores RGB (8 bits) FF3300 CC3300 FF9999 FFCCCC 990033 RED FF0000 FF3333 CC3333 FFCC99 CC0066 993300 FF0033 CC0033 FF9966 FF6699 660000 000000 CC0000 663333 990066 330000 MAROON 990000 LIME 66FF00 33FF33 66FF66 99FF99 CCFFCC 00CC00 009900 OLIVE 006600 003300 00CC00 009900 66FF00 006600 003300 GREEN 00FF00 009900 006600 66FF00 009900 AQUA 00FFFF 00FFFF 3333FF 6666FF 9999FF 33FFFF 66FFFF TEAL 99FFFF CCFFFF CCCCFF 0000CC 006666 000099 000099 BLUE 0000FF CCCCFF 000066 000033 000099 00CCCC 009999 006666 003333 YELLOW FUCHSIA TEAL FFFF33 FFFF66 FFFF99 FFFFCC CCCC00 999900 666600 333300 FF33FF FF66FF FF99FF FFCCFF CC00CC 990099 660066 330033 7D337D 7D667D 7D997D 7DCC7D E100E1 CC00CC AF00AF 990099 FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF 990000 990033 990066 990099 9900CC 9900FF 993300 993333 993366 993399 9933CC 9933FF 996600 996633 996666 996699 9966CC 9966FF 999900 999933 999966 999999 9999CC 9999FF 99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF 99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF 666600 666633 666666 666699 6666CC 6666FF 669900 669933 669966 669999 6699CC 6699FF 66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF 66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF 336600 336633 336666 336699 3366CC 3366FF 339900 339933 339966 339999 3399CC 3399FF 006600 006633 006666 006699 0066CC 0066FF 009900 009933 009966 009999 0099CC 0099FF 33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF 33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF 00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF 663300 663333 663366 663399 6633CC 6633FF 660000 660033 660066 660099 6600CC 6600FF 333300 333333 333366 333399 3333CC 3333FF 003300 003333 003366 003399 0033CC 0033FF 330000 330033 330066 330099 3300CC 3300FF 000000 000033 000066 000099 0000CC 0000FF ALINEACIÓN DEL CONTENIDO DE LAS CELDAS El parámetro para alinear el contenido de la celda se expresa dentro de <td>. Por ejemplo, <td align= right valign= bottom > texto </td> El código anterior alineara horizontalmente a la derecha y verticalmente en la parte inferior de la celda la palabra TEXTO. De forma que align podrá ser (left, center, right) Y valign podrá ser (top, middle, bottom) ENLACES Los enlaces nos permiten vincular un código html con otro, es decir, que desde una página web podamos acceder a otra sin necesidad de escribir la dirección url de esta ultima pagina web. Para colocar un enlace en nuestra página web tendremos que conocer la url de la página a la que queremos acceder. La url (Uniform Resource Locator) o en castellano (Localizador Uniforme de Recursos), la estructura básica de una url es para contenidos hipertexto(páginas web),
http://www.nombre_recurso.dominio por ejemplo, http://www.terra.es Dependiendo del contenido en lugar del protocolo http (hipertexto=páginas web) podría ser FTP (para transmisión de archivos), telnet, gopher, etc. Aunque los más utilizados a nivel de usuario es el http y el ftp es, El tag que permite insertar en el código de nuestra página web un enlace Un ejemplo de este tag seria, <a href= enlace > texto </a> <a href= http://www.terra.es > Pagina web de TERRA </a> Este código en ejecución seria, Pagina web de TERRA Normalmente aparecería subrayado y de otro color diferente al negro, de forma que si hiciéramos un clic en esa frase automáticamente accederíamos a la página web de terra. ENLACES EN LA MISMA PÁGINA Podemos poner enlaces en la misma página, es decir que podamos desplazarnos dentro de nuestro documento, para ello tenemos que determinar las anclas que son los puntos que marcamos dentro de nuestro código html. Por ejemplo, en el punto donde queramos acceder más adelante colocaremos el ancla, <a name= ancla1 ></a> (este código marcara el punto al cual accederemos después) <a href= #ancla1 >ir al punto determinado</a> (este es el enlace que al hacer clic ira al punto del documento marcado con ese nombre de ancla)
ENLACE A CORREO ELECTRÓNICO Para colocar un enlace que al hacer clic en el, se nos abra nuestro gestor de correo electrónico, colocaremos el siguiente enlace, <a href= mailto:direccion@servidor.es > Este código abre nuestro correo electrónico y nos presenta un mensaje en blanco, con la dirección del destinatario ya colocado (direccion@servidor.es) GRÁFICOS En el código html podemos insertar imágenes mediante la especificación de la URL donde se encuentran las mismas. Las imágenes que se pueden mostrar en una página web creada con html son las que tienen como extensión.jpg,.gif,.bmp, el resto de extensiones de imagen es posible que dependiendo del navegador no se visualicen de forma correcta. La etiqueta tag que permite insertar imágenes en el código html es, <img scr= url imagen alt= texto de la imagen > En la etiqueta anterior la url será la dirección en donde está la imagen y el texto colocado en la propiedad alt es un texto que aparecerá si situamos el ratón encima de la imagen. Un ejemplo de esta orden seria, <img src= fotografía.jpg alt= foto de mis vacaciones > También podemos utilizar una imagen como enlace, según hemos explicado en el punto anterior de cómo expresar un enlace. Para asignar el enlace a una imagen tenemos que combinar las dos etiquetas, por ejemplo <a href= http://www.terra.es ><img src= fotografía.jpg alt= foto de mis vacaciones ></a> De esta forma si hacemos clic encima de la fotografía iremos al enlace de la página principal de terra.es.
FORMULARIOS Los formularios permiten recabar información de los visitantes y almacenarla o enviarla mediante algún sistema determinado. La forma más habitual es enviar un formulario mediante el correo electrónico, de forma que la información facilitada por el usuario se nos enviara a una dirección de correo electrónico determinada. Los formularios de definen mediante la etiqueta <form> </form>. Dentro de esta etiqueta podemos determinar los parámetros necesarios para el envió de la información, Parámetros para determinar el envió, action= mailto:direccion de correo (este parámetro es para fijar la dirección de mail donde se enviara la información) method= post (determina que los datos se envían por mail) Etiqueta para determinar la información a enviar, <input parámetros> Parámetros, type= text (determina el tipo de información que pide, normalmente texto). name (es el texto que aparecerá en pantalla para que el visitante introduzca información). size (determina el tamaño de la caja donde el visitante introducirá datos). maxlenght (determina la cantidad máxima de caracteres que admitirá) Ejemplo, <input type="text" name="nombre" size="10" maxlength="15"> Este paso de pedir información se repetirá tantas veces como datos queramos solicitar al visitante. Etiqueta para determinar el botón de enviar, <input type= submit value= enviar >
Este código dibujara un botón con el texto enviar y que al hacer clic enviara la información de los inputs anterior al mail determinado. Etiqueta para determinar el botón de borrar datos del formulario <input type= reset value= borrar > Este código dibujara un botón con el texto borrar y que al hacer clic borrar los datos introducidos en el formulario.