Manual Básico de HTML Este manual lo he realizado con la intención de servir como primer contacto con el lenguaje HTML (Hyper Text Markup Language), que es el que se utiliza para la creación de páginas Web en Internet. En este manual se explican únicamente las instrucciones básicas para crear nuestra primera página Web, un estudio mas en profundidad requerirían mucho "papel" y mucho tiempo. Espero que os sea de utilidad. Estructura de un documento HTML En un documento HTML podemos incluir texto, imágen, sonido y referencias a otros documentos. Para diferenciar las directivas de HTML (instrucciones) del texto normal, dichas directivas se encuentran encerradas entre los signos < y >. Determinadas directivas tienen un inicio y un final. La directiva final se acompaña del símbolo /. La estructura básica de un documento HTML tendría las siguientes directivas : <HTML> inicio del documento <HEAD> inicio de la cabecera <TITLE> inicio del título Titulo de la pagina </TITLE> final del título </HEAD> final de la cabecera <BODY> inicio del cuerpo de la página Texto, graficos y demás componentes de la página </BODY> final del cuerpo de la página </HTML> final del documento El título de la página será el texto que identificará a la página, la hoja en sí la escribiremos entre las directivas <BODY> y </BODY>. Muchas de las directivas de HTML pueden incluir parámetros. Estos parámetros añaden opciones especiales a la directiva. Veremos ahora las principales directivas que se usan en los documentos HTML con algunos de sus parámetros. Fondo del documento. Directivas de HTML La directiva <BODY> además de indicar el inicio y el final del cuerpo de nuestra hoja permite indicar el fondo de dicho documento. Si no incluimos ningún parámetro, el fondo de nuestro documento será de color blanco. Podemos cambiar el color de fondo con el parámetro bgcolor de la siguiente forma : <BODY bgcolor=" código de color "> El código de color empieza con el símbolo # y continua con seis cifras hexadecimales. Cada par de estas cifras indican el dominio de cada color principal en la mezcla final. Las dos primeras cifras indican el dominio del color rojo, las dos siguientes del color verde, y las dos últimas del color azul. El usar un numero hexadecimal de dos cifras para cada color nos permite indicar dominios desde el 0 (00) al 256 (FF).Por ejemplo, para que el fondo fuese de color verde puro la orden seria : <BODY bgcolor="#00ff00"> Si la orden fuese : <BODY bgcolor="#10a0ff"> 1
conseguiriamos un color azul cielo, ya que estamos dando una mezcla de 10 partes de rojo (10), cien partes de verde (A0) y doscientas cincuenta y seis partes de azul (FF). El número de mezclas de color es muy grande, de cualquier forma los programas editores de HTML nos calculan el codigo del color escogiendo nosotros el color de una paleta, lo cual resulta bastante mas sencillo que calcular la mezcla. Ademas de definir el color del fondo, esta directiva nos permite definir los colores por defecto para el texto normal y los textos que acceden a un enlace en la página, por medio de los parámetros text y link. Por ejemplo: <BODY bgcolor="#10a0ff" text="#00ff00" link="#ff0000"> Con lo que el fondo de la pagina seria de color azul cielo, el texto por defecto de color verde y los textos que dieran acceso a otras paginas de color rojo. Aparte del color, podemos indicar un fondo gráfico para el documento. Para ello utilizaremos el parámetro background. El fondo vendrá indicado por un archivo de imagen (gif o jpg) que se reflejará en la página en mosaico. Por ejemplo : <BODY background="fondo.gif"> Pondrá como fondo de nuestro documento la imagen fondo.gif repitiéndola tantas veces como sea necesario para que cubra toda la página. Lógicamente, cuanto mayor sea la imagen, mas tiempo tardara el navegador en visualizar el fodo de nuestra página. Texto y efectos. El texto a escribir en la hoja se escribe tal cual, es decir, no hay ninguna directiva para indicar que lo que escribimos es texto. Todo aquello que no esté encerrado entre los símbolos < y > se entenderá que es texto. Las tabulaciones, espacios y retornos de carro del texto seran ignorados, de tal forma que si escribimos lo siguiente : Texto de prueba de mi página Web. En la página veremos : Texto de prueba de mi página Web. Para indicar un retorno de carro se utiliza la directiva <BR> y para indicar un cambio de párrafo se utiliza la directiva <P>. Por ejemplo : Texto de prueba<br>de mi página<p>web. Se verá como : Texto de prueba de mi página 2
Web Apuntes básicos de HTML I.E.S. Pintor José María Fernández La única forma para que se respete el formato original del texto (con espacios y retornos de carro) es utilizar la directiva <PRE></PRE>. Ejemplo : <PRE> Esto es un Texto con formato. </PRE> Para incluir efectos especiales en el texto "encerraremos" el texto a destacar utilizando estas directivas : <B> </B> Negrilla. <I> </I> Cursiva. <U> </U> Subrayado. De la misma forma, el texto se alinea por defecto a la izquierda. Si deseamos centrar un texto en la página utilizaremos la directiva <CENTER></CENTER>. Por ejemplo : <CENTER>Este texto está centrado</center> Para indicar el tamaño de la letra se utiliza la directiva <FONT></FONT>. Esta directiva tiene varios parámetros. Veremos los dos mas usados size y bgcolor. size indica el tamaño "relativo". Para aumentar el tamaño de la letra indicaremos un número positivo, y para disminuirlo indicaremos un número negativo. bgcolor indica el código de color del texto en el mismo formato que hemos visto anteriormente para el fondo del documento. Ejemplos : <FONT size=+3 bgcolor="#ff0000"> Texto </FONT> Escribirá el Texto en un tamaño tres veces superior al normal y en color rojo puro. <FONT size=-2 bgcolor="#0000ff"> Texto </FONT> Escribirá el Texto en un tamaño dos veces inferior al normal y en color azul puro. La directiva <HR> inserta una línea horizontal en el documento. Se suele utilzar para diferenciar diferentes partes de la página. En esta página se ha usado esta directiva para separar cada sección de este manual. La longitud de esta linea se puede definir en porcentaje usando el parámetro width. La altura de la linea se indica con el paráametro size. Por ejemplo: <HR size=10 width=50%> Por defecto se entiende una altura=1 y una anchura=100% Para incluir un comentario en nuestra página Web se utiliza la directiva <!-- -->, Dicho comentario no aparecerá en la página. Por ejemplo: <!-- Esto es un comentario --> 3
Listas de elementos y Entidades. Apuntes básicos de HTML I.E.S. Pintor José María Fernández Para definir una lista de elementos se utilizan las directivas para listas sin numerar y <OL></OL> para listas numeradas. Los elementos de la lista iran precedidos en ambos casos por la directiva <LI>. Por ejemplo, <LI>Links interesantes <LI>Galeria de fotos <LI>Entrevistas Produciría el efecto : Links interesantes Galeria de fotos Entrevistas <OL> <LI>Links interesantes <LI>Galeria de fotos <LI>Entrevistas </OL> Produciría el efecto : 1. Links interesantes 2. Galeria de fotos 3. Entrevistas Existen tambien las listas de definiciones. Estas listas presentan el texto de forma similar al de los diccionarios. La directiva para estas listas es <DL></DL>.Con la directiva <DT> se especifica el término y con <DD> la definició. Ejemplo: <DL> <DT>WWW <DD>Abreviatura de World Wide Web <DT>FTP <DD>Abreviatura de File Transfer Protocol. </DL> Produciría el efecto : WWW FTP Abreviatura de World Wide Web Abreviatura de File Transfer Protocol La directiva <DL></DL> puede llevar el atributo compact, que presentaria la lista de la siguiente forma : <DL compact> <DT>WWW <DD>Abreviatura de World Wide Web <DT>FTP 4
<DD>Abreviatura de File Transfer Protocol. </DL> Produciría el efecto : www FTP Abreviatura de World Wide Web Abreviatura de File Transfer Protocol Las listas se pueden anidar, incluyendo una lista dentro de otra, produciendo el siguiente efecto: <LI>Links interesantes <LI>Buscador Ole <LI>Pagina de Luis_FD <LI>Museo del Prado <LI>Galeria de fotos <LI>Fotos de mascotas <LI>Fotos de paisajes <LI>Entrevistas <LI>Sharon Stone <LI>Bill Gates <LI>Paul McCartney Links interesantes o Buscador Ole o Pagina de Luis_FD o Museo del Prado Galeria de fotos o Fotos de mascotas o Fotos de paisajes Entrevistas o Sharon Stone o Bill Gates o Paul McCartney Actualmente los navegadores mas utilizados (Netscape y Ms Explorer) no tienen problemas en reconocer las letras acentuadas y las eñes, sin embargo los navegadores antíguos no las reconocen. Es por ello que para asegurarnos de que estas letras se veran bien en todos los navegadores, debemos sustituirlas por su entidad. Una entidad es un código que representa un carácter extraño para el navegador. Dichas entidades empiezan con el símbolo & y terminan con el símbolo ;. Asimismo los caracteres especiales que se usan para las directivas de HTML han de ser representados por entidades cuando queramos que se "vean" en nuestra página. Las entidades más importantes son las siguientes : á á Á Á é é É É 5
í í Í Í ó ó Ó Ó ú ú Ú Ú ñ ñ Ñ Ñ < < > > & & " " De la misma forma podremos indicar al navegador que represente un carácter por su código ascii de la forma &#codigo;. Por ejemplo: Representara el símbolo. Gráficos y Enlaces. Para incluir un gráfico en nuestra página utilizaremos la directiva <IMG>. Esta directiva tiene varios parámetros. El parámetro src indica el nombre del fichero gráfico a mostrar, border indica el borde que rodeará al gráfico, alt indica el texto que se mostrara en lugar del gráfico en aquellos navegadores que no puedan mostrar el gráfico. Ejemplo: <IMG src="esp.gif" border=none alt="españa"> Mostrará el gráfico esp.gif sin ningún borde rodeándolo, y aquellos navegadores que no puedan mostrar el gráfico visualizaran la palabra España. Otro parámetro importante de esta directiva es align. Este parámetro permite indicar como se alineará el texto que se escriba a cotinuación del gráfico. Sus valores posibles son : bottom alinea el texto en la zona inferior del gráfico. top alinea el texto en la zona superior del gráfico. center alinea el texto en la zona central del gráfico. Ejemplos : <IMG src="hlp.gif" align=bottom>texto de Ayuda Texto de Ayuda <IMG src="hlp.gif" align=top>texto de Ayuda Texto de Ayuda <IMG src="hlp.gif" align=center>texto de Ayuda Texto de Ayuda Los parámetros height y width permiten redimensionar el gráfico dándole un tamaño diferente al real. height=num Marca la atura relativa del gráfico. 6
width=num Marca la anchura relativa del gráfico. Ejemplos : <IMG src="hlp.gif" height=150 width=60> <IMG src="hlp.gif" height=25 width=25> Un enlace es un texto o gráfico que, pulsándolo, nos envía a una página distinta. Para incluir un enlace en nuestra página se utiliza la directiva <A></A>. Dicha directiva lleva el parámetro href que es el que indica la dirección de la página a la que queremos que se acceda. Por ejemplo : <A href="http://www.ole.es">pulsa aqui para buscar en la red.</a> Mostraría el texto en distinto color, y al pulsar sobre el se nos enviaría a la direccion http://www.ole.es. Entre la directiva <A></A> podemos poner un texto o un gráfico o ambas cosas. P.ej.: <A href="http://www.ole.es"><img src="ole_pet.gif">buscador Olé.</A> Permitirá dirigirse a la direccion indicada pulsando en el gráfico o en el texto. Para hacer un enlace a nuestra dirección de correo se indicaría la directiva con el siguiente formato : <A href="mailto:direccion de correo">pulsa aqui para enviarme un e-mail.</a> Tablas. Las tablas se usan con mucha frecuencia en las páginas Web para formatear una parte del documento. Para definir una tabla se utiliza la directiva <TABLE></TABLE>, para cada uno de los elementos de la tabla se utiliza la directiva <TD> y para indicar el final de una fila de la tabla se utiliza la directiva <TR>. Los parámetros fundamentales de <TABLE> son : border=num Indica el ancho del borde de la tabla. cellpadding=num Indica el ancho de las filas cellspacing=num Indica el ancho de las "separaciones" entre las celdas de la tabla. De cualquier forma el ancho de las filas se adecuará a su contenido, si este fuese mas ancho que el indicado por cellpadding. El parámetro fundamental de <TD> es align que indica la alineación del contenido de la celda. Sus opciones son : 7
<TD align=left> Alinea el contenido a la izquierda. <TD align=right> Alinea el contenido a la derecha. <TD align=center> Centra el contenido en la celda. Un ejemplo de una tabla simple sería: <TABLE border=10 cellpadding=5 cellspacing=10> <TD align=left>pais<td align=left>porcentaje<td align=right>importe<tr> <TD align=left>españa<td align=center>70<td align=right>140.000.-<tr> <TD align=left>francia<td align=center>20<td align=right>40.000.-<tr> <TD align=left>italia<td align=center>30<td align=right>60.000.-<tr> </TABLE> Que daria como resultado : Pais Porcentaje Importe España 70 140.000.- Francia 20 40.000.- Italia 30 60.000.- Las posibilidades y opciones de las tablas son muchas y sería muy extenso para este pequeño manual explicarlas todas. 8