Manual Básico de HTML

Manual Bsico de HTML
Este manual lo he realizado con la intencin de servir como primer contacto con el lenguaje HTML (Hyper Text Markup Language), que es el que se utiliza para la creacin de pginas Web en Internet. En este manual se explican nicamente las instrucciones bsicas para crear nuestra primera pgina Web, un estudio mas en profundidad requeriran mucho "papel" y mucho tiempo. Espero que os sea de utilidad.
Estructura de un documento HTML

En un documento HTML podemos incluir texto, imgen, 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 acompaa del smbolo /. La estructura bsica de un documento HTML tendra las siguientes directivas : <HTML> inicio del documento <HEAD> inicio de la cabecera <TITLE> inicio del ttulo Titulo de la pagina </TITLE> final del ttulo </HEAD> final de la cabecera <BODY> inicio del cuerpo de la pgina Texto, graficos y dems componentes de la pgina </BODY> final del cuerpo de la pgina </HTML> final del documento El ttulo de la pgina ser el texto que identificar a la pgina, la hoja en s la escribiremos entre las directivas <BODY> y </BODY>. Muchas de las directivas de HTML pueden incluir parmetros. Estos parmetros aaden opciones especiales a la directiva. Veremos ahora las principales directivas que se usan en los documentos HTML con algunos de sus parmetros.
Directivas de HTML
Fondo del documento.
La directiva <BODY> adems de indicar el inicio y el final del cuerpo de nuestra hoja permite indicar el fondo de dicho documento. Si no incluimos ningn parmetro, el fondo de nuestro documento ser de color blanco. Podemos cambiar el color de fondo con el parmetro bgcolor de la siguiente forma : <BODY bgcolor=" cdigo de color "> El cdigo de color empieza con el smbolo # 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"> 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 nmero 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 pgina, por medio de los parmetros 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 grfico para el documento. Para ello utilizaremos el parmetro background. El fondo vendr indicado por un archivo de imagen (gif o jpg) que se reflejar en la pgina en mosaico. Por ejemplo : <BODY background="fondo.gif"> Pondr como fondo de nuestro documento la imagen fondo.gif repitindola tantas veces como sea necesario para que cubra toda la pgina. Lgicamente, cuanto mayor sea la imagen, mas tiempo tardara el navegador en visualizar el fodo de nuestra pgina.
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 smbolos < 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 pgina
de mi
Web.
En la pgina veremos : Texto de prueba de mi pgina Web. Para indicar un retorno de carro se utiliza la directiva <BR> y para indicar un cambio de prrafo se utiliza la directiva <P>. Por ejemplo : Texto de prueba<BR>de mi pgina<P>Web. Se ver como : Texto de prueba de mi pgina Web 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 pgina utilizaremos la directiva <CENTER></CENTER>. Por ejemplo : <CENTER>Este texto est centrado</CENTER> Para indicar el tamao de la letra se utiliza la directiva <FONT></FONT>. Esta directiva tiene varios parmetros. Veremos los dos mas usados size y bgcolor. size indica el tamao "relativo". Para aumentar el tamao de la letra indicaremos un nmero positivo, y para disminuirlo indicaremos un nmero negativo. bgcolor indica el cdigo 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 tamao tres veces superior al normal y en color rojo puro. <FONT size=-2 bgcolor="#0000FF"> Texto </FONT> Escribir el Texto en un tamao dos veces inferior al normal y en color azul puro. La directiva <HR> inserta una lnea horizontal en el documento. Se suele utilzar para diferenciar diferentes partes de la pgina. En esta pgina se ha usado esta directiva para separar cada seccin de este manual. La longitud de esta linea se puede definir en porcentaje usando el parmetro width. La altura de la linea se indica con el parametro 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 pgina Web se utiliza la directiva , Dicho comentario no aparecer en la pgina. Por ejemplo: 
Listas de elementos y Entidades.

Para definir una lista de elementos se utilizan las directivas <UL></UL> 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, <UL> <LI>Links interesantes <LI>Galeria de fotos <LI>Entrevistas </UL> Producira el efecto :

Links interesantes Galeria de fotos Entrevistas
<OL> <LI>Links interesantes <LI>Galeria de fotos <LI>Entrevistas </OL>
Producira 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 trmino y con <DD> la definici. Ejemplo: <DL> <DT>WWW <DD>Abreviatura de World Wide Web <DT>FTP <DD>Abreviatura de File Transfer Protocol. </DL> Producira el efecto : WWW Abreviatura de World Wide Web FTP 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 <DD>Abreviatura de File Transfer Protocol. </DL> Producira el efecto : www Abreviatura de World Wide Web FTP Abreviatura de File Transfer Protocol Las listas se pueden anidar, incluyendo una lista dentro de otra, produciendo el siguiente efecto:
<UL> <LI>Links interesantes
<UL> <LI>Buscador Ole <LI>Pagina de Luis_FD <LI>Museo del Prado </UL> <LI>Galeria de fotos <UL> <LI>Fotos de mascotas <LI>Fotos de paisajes </UL> <LI>Entrevistas <UL> <LI>Sharon Stone <LI>Bill Gates <LI>Paul McCartney </UL> </UL>
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 ees, sin embargo los navegadores antguos 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 cdigo que representa un carcter extrao para el navegador. Dichas entidades empiezan con el smbolo & y terminan con el smbolo ;. 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 pgina. Las entidades ms importantes son las siguientes: < á é í ó ú ñ < > Á É Í Ó Ú Ñ >
& &
" "
De la misma forma podremos indicar al navegador que represente un carcter por su cdigo ascii de la forma &#codigo;. Por ejemplo: © Representara el smbolo .
Grficos y Enlaces.
Para incluir un grfico en nuestra pgina utilizaremos la directiva <IMG>. Esta directiva tiene varios parmetros. El parmetro src indica el nombre del fichero grfico a mostrar, border indica el borde que rodear al grfico, alt indica el texto que se mostrara en lugar del grfico en aquellos navegadores que no puedan mostrar el grfico. Ejemplo: <IMG src="esp.gif" border=none alt="Espaa"> Mostrar el grfico esp.gif sin ningn borde rodendolo, y aquellos navegadores que no puedan mostrar el grfico visualizaran la palabra Espaa. Otro parmetro importante de esta directiva es align. Este parmetro permite indicar como se alinear el texto que se escriba a cotinuacin del grfico. Sus valores posibles son : bottom alinea el texto en la zona inferior del grfico. top alinea el texto en la zona superior del grfico. center alinea el texto en la zona central del grfico.
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 parmetros height y width permiten redimensionar el grfico dndole un tamao diferente al real.
height=num Marca la atura relativa del grfico. width=num Marca la anchura relativa del grfico.
Ejemplos :
<IMG src="hlp.gif" height=150 width=60> <IMG src="hlp.gif" height=25 width=25> Un enlace es un texto o grfico que, pulsndolo, nos enva a una pgina distinta. Para incluir un enlace en nuestra pgina se utiliza la directiva <A></A>. Dicha directiva lleva el parmetro href que es el que indica la direccin de la pgina a la que queremos que se acceda. Por ejemplo : <A href="http://www.ole.es">Pulsa aqui para buscar en la red.</A> Mostrara el texto en distinto color, y al pulsar sobre el se nos enviara a la direccion http://www.ole.es. Entre la directiva <A></A> podemos poner un texto o un grfico 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 grfico o en el texto. Para hacer un enlace a nuestra direccin de correo se indicara 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 pginas 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 parmetros 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 parmetro fundamental de <TD> es align que indica la alineacin del contenido de la celda. Sus opciones son : <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 sera: <TABLE border=10 cellpadding=5 cellspacing=10> <TD align=left>Pais<TD align=left>Porcentaje<TD align=right>Importe<TR> <TD align=left>Espaa<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 Espaa Francia Italia Porcentaje 70 20 30 Importe 140.000.40.000.60.000.-
Las posibilidades y opciones de las tablas son muchas y sera muy extenso para este pequeo manual explicarlas todas.

Manual Básico de HTML

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manual Básico de HTML

Cargado por

Copyright:

Formatos disponibles

Manual Bsico de HTML

Estructura de un documento HTML

Listas de elementos y Entidades.

Links interesantes Galeria de fotos Entrevistas

<OL> <LI>Links interesantes <LI>Galeria de fotos <LI>Entrevistas </OL>

Ejemplos : <IMG src="hlp.gif" align=bottom>Texto de Ayuda

<IMG src="hlp.gif" align=top>Texto de Ayuda

<IMG src="hlp.gif" align=center>Texto de Ayuda

También podría gustarte