Anda di halaman 1dari 6

HTML es un lenguaje sencillo pensado para presentar informacin en la WWW.

HTML (HyperText Markup Languaje), como su nombre indica es un lenguaje de marcas para la creacin de hipertextos. Por hipertexto entenderemos texto con una presentacin agradable, con inclusin de elementos multimedia (grficos, video, audio) y con la presencia de hiperenlaces que permiten relacionar otras fuentes de informacin en documentos hipertextos. Es el lenguaje utilizado para representar documentos en la WWW (World Wide Web). Las marcas del lenguaje HTML especifican:

La estructura lgica del documento: o Cabeceras, tipos y tamaos de las fuentes. o Parrafos de texto. o Centrado. o Enumeraciones o listas. o Formularios. o Tablas. Distintos estilos que definen el texto: o Negrita. o Cursiva. o Diferentes efectos: (direcciones de correo, citas textuales, etc). Inclusin de hipertextos para acceder a otros documentos relacionados Inclusin de imgenes y ficheros multimedia.

Estructura Bsica

Un documento HTML est definido por una etiqueta de apertura <HTML> y una etiqueta de cierre </HTML>. Dentro de este se dividen dos partes fundamentales la cabecera, delimitada por la etiqueta <HEAD> y el cuerpo, delimitado por la etiqueta <BODY>. Por tanto la estructura de un documento HTML ser: <HTML> <HEAD> Definiciones de la cabecera </HEAD> <BODY> Instrucciones HTML </BODY> </HTML> Comentarios

Para insertar comentarios dentro de un documento HTML utilizaremos la etiqueta especial <!--, definindose un comentario de la forma: <!-- Esto es un comentario --> Los comentarios no se muestran en el documento HTML y el nico modo de verlo es viendo el cdigo HTML fuente del documento, cosa que permiten algunos navegadores de la WWW.

Edicin. Lic. Fuad Eliu Chirinos Urbina

Espaciados y saltos de lnea


El espaciado en HTML En HTML no est permitido ms de un elemento blanco (espacios, tabuladores, saltos de lnea) separando cualquier elemento o texto, todos estos son convertidos a un nico espacio blanco y el resto se omiten en la representacin del documento. En el documento fuente podremos usar el espaciado que deseemos, y no deber estar bien formateado, este se conseguir con las etiquetas HTML. Existen unas etiquetas especiales HTML para definir estos elementos de control de texto. A continuacin se detallar cada una de ellas. <P> Cambio de prrafo : Definir un prrafo, se usar al comienzo o al final de un prrafo de texto e introducir un espaciado de separacin (normalmente dos lneas) con el prximo texto que se exprese. Esta etiqueta se puede utilizar para introducir un espaciado entre cualquier elemento HTML y no solo servir para separar texto. El efecto se conseguir introduciendo la etiqueta <P> en el punto en el que deseemos que se produzca el espaciado. La etiqueta de fin de prrafo </P> es opcional no siendo necesario incluirla. Existen elementos HTML que ya introducen separaciones de lneas, tanto antes como despues, por tanto en estos casos no es necesario, pero s posible, introducir el elemento de nuevo prrafo. No es necesario utilizar esta etiqueta ni antes ni despus de cabeceras <Hn>, despus de <HR> (reglas horizontales), <ADDRESS>, <BLOCKQUOTE>, <PRE>. Tampoco es necesario dentro de listas tras los elementos <LI>, <DT> ni<DD>, que se utilizan para separar los distintos elementos de una lista.
Ejemplo
Inst. HTML Resul tado Esta es una frase que forma un parrafo.<P>Este es el otro parrafo.

Esta es una frase que forma un parrafo. Este es el otro parrafo.


Edicin. Lic. Fuad Eliu Chirinos Urbina

Explica cin

En el punto donde se ha introducido la instruccin HTML de nuevo parrafo se observa una separacin de dos lneas.

<BR> Salto de lnea : Su utilidad es similar al anterior pero en este caso el espaciado del texto es menor, se pasar a la lnea siguiente, sin dejar una lnea de separacin. En este caso ser un cambio de lnea y no de parrafo. Igualmente no es necesario usarlo tras los elementos que llevan implcitos un salto de lnea, ni tampoco es necesaria la etiqueta de fin </BR>.
Ejemplo
Inst. HTML Resul tado Explica cin Esta es una frase de la primera lnea.<BR>Esta es la siguiente lnea

Esta es una frase de la primera lnea. Esta es la siguiente lnea


En el punto donde se ha introducido la instruccin HTML de nueva lnea se observa el cambio de lnea.

<HR> Regla Horizontal : <HR ALIGN=LEFT|RIGTH|CENTER NOSHADE SIZE=n WIDTH=n> Se usa para dividir un documento en distintas secciones, mostrar una lnea horizontal de tamao determinable. Se asemejar al salto de pgina dentro de un documento. Si no se especifican atributos dibujar una lnea que ocupe el ancho de la pantalla del navegador y introduciendo una separacin con el texto anterior y siguiente, equivalente a cambio de prrafo. No es necesaria la etiqueta de fin </HR>. Con los atributos podemos especificar su forma y tamao, esto atributos son:

ALIGN=LEFT, RIGTH CENTER:

Indicar la forma en la que se alinear la regla en el caso de no ocupar todo el ancho de la pantalla del navegador, a la izquierda, derecha o centrada.

NOSHADE:

No muestra la sombra de la barra, evitando el efecto en tres dimensiones.

SIZE=n:
Edicin. Lic. Fuad Eliu Chirinos Urbina

Indicar la altura de la regla en puntos de la pantalla.

WIDTH=n n%:

Especificar el ancho de la regla, se puede especificar en tanto por ciento del ancho de la ventana <HR WIDTH=50%> o en valor absoluto <HR WIDTH=75> en puntos de la pantalla.
Ejemplos
Inst. HTML Resul tado Explica cin Inst. HTML Resul tado Explica cin Inst. HTML Resul tado Explica cin Mostrar un lnea que ocupa el cincuenta por ciento del ancho disponible, es de 5 de alto y est alineada a la izquierda. Mostrar un lnea que ocupa todo el ancho disponible, es de 5 de alto y no tiene sombra ni efecto dimensional. Mostrar un lnea que ocupa todo el ancho disponible y de altura 1 con sombra. <HR>

<HR SIZE=5 NOSHADE>

<HR SIZE=5 WIDTH=50% ALIGN=LEFT>

<PRE> Texto preformateado : Muestra un porcin de texto en el que se respetan los saltos de lnea, tabuladores y espacios en blanco. Todo lo que se encuentre entre las etiquetas de inicio y fin de texto preformateado se mostrar tal y como se expresa en el fuente del documento html. Para mostrar este texto se utiliza una fuente de espaciado fijo ms pequea que el texto normal. Presenta un problema cuando la lnea es demasiado larga, ya que no la corta el navegador y se mostrara tal y como aparece en el fichero fuente. No se recomienda como forma rpida de convertir un documento texto a formato visible en HTML ya que presenta muchas limitaciones y no se obtiene una buena presentacin.
Edicin. Lic. Fuad Eliu Chirinos Urbina

Dentro de la etiqueta PRE no tendrn validez la mayora de las instrucciones HTML, solo se podrn utilizar <B>, <I> y los hiperenlaces. El resto de las etiquetas HTML son ignoradas.
Ejemplo
Inst. HTML Resul tado Explica cin <PRE>Este texto tal y como se escribi. </PRE> se ver

Este texto se ver tal y como se escribi. Como se ve utiliza otra fuente de caracteres distintas de espaciado fijo y se respetan los espacios en blanco y los saltos de lnea de la instruccin original.

<CENTER> Centrado de texto e imgenes : Se utilizar para centrar lneas de texto, imgenes o cualquier otro elemento HTML (tablas, listas, etc ...). Todo lo que se encuentre entre las etiquetas de inicio y fin aparecer centrado en el navegador.
Ejemplo
Inst. HTML Resul tado Explica cin <CENTER> Este texto se ver centrado </CENTER>

Este texto se ver centrado


El texto aparece centrado en el navegador. Se puede utilizar tanto para una lnea como para un prrafo, y para cualquiera de la instrucciones del lenguaje HTML.

Inst. HTML Resul tado Explica cin

<CENTER> El texto y la imagen se centran<BR> <IMG SRC="/iconos1/or_star.gif"> </CENTER>

El texto y la imagen se centran


Como se ve la etiqueta de centrado puede afectar a otros elementos como una imagen o cualquier otra estructura del lenguaje HTML.

&nbsp; Espacios en blanco : Con esta secuencia de caracteres conseguiremos espacios en blanco que se mostrarn de forma efectiva, pudiendo mostrar ms de un espacio en blanco de separacin. Se incluirn tantas expresiones &nbsp; como espacios en blanco se desee conseguir.
Edicin. Lic. Fuad Eliu Chirinos Urbina

Hiperenlaces Es la utilidad bsica del hipertexto, permite indicar zonas de texto o imgenes que si son seleccionados por el lector del documento nos traslada a otros documentos HTML o otras zonas del documento actual. Para definir un hiperenlace podemos utilizar cualquier elemento HTML, no debe ser texto necesariamente, podemos usar, cabeceras (<Hn>), cualquiera de los estilos, una imagen, etc .... Un hiperenlace igualmente podr definirse dentro de cualquier elemento HTML: listas, prrafos de texto, tablas, formularios. El texto del hiperenlace aparece normalmente resaltado sobre el texto normal, en azul y subrayado, en el caso de las imgenes, si tienen definido un borde este aparecer resaltado en color azul. La mayora de los navegadores cuando la zona por la que pasa el cursor es sensible, este cambia de aspecto indicndolo y en la parte baja de la pantalla se indica el hiperenlace que se activa al pulsar en esa zona. Mediante los atributos de BODY es posible cambiar el color de los hiperenlaces. El texto que define el hiperenlace debe ser clarificador sobre el documento al que referenciamos, debemos evitar referencias especificas que hagan al texto poco legible. Igualmente deber concordar con el texto del prrafo donde se englobe, se debe evitar el uso de pulse aqu. Por ejemplo: Puede encontrar mas informacin sobre vacas pulsando aqu se podra sustituir por: Disponible ms informacin sobre vacas. El usuario que lea el texto ya sabr al verlo resaltado que puede pulsar ah. <A HREF=...> Hiperenlace Son los enlaces con documentos externos al actual. En este caso se indicar una URL que definir el documento al que se accede si se sigue el enlace. La forma de indicarlo ser: <A HREF="URL a la que se accede">Texto del Hiperenlace</A> El texto indicado entre las etiquetas de comienzo y de fin se presentar de forma resaltada y en el caso de seleccionar este texto el documento actual cambiar por el especificado en la URL. Igualmente se puede indicar una imagen como enlace, en este caso entre las etiquetas del hiperenlace indicamos la inclusin de la imagen, tambin dentro de la etiqueta del hiperenlace se pueden incluir cualquiera de las etiquetas del lenguaje HTML para cambiar el aspecto del texto afectado por el hiperenlace. Un ejemplo sera: <A HREF="URL a la que se accede"><IMG SRC="Imagen"> y tambin texto</A> En este caso aparecer la imagen con el borde resaltado para indicar que es un hiperenlace. Ademas de enlaces con el servicio http podremos utilizar cualquiera de los servicios de internet que se puede expresar en una URL. Es posible por tanto indicar enlaces a servidores FTP, servidores GOPHER o de NEWS, indicando como URL aquella que identifica al servidor que queremos acceder.

Edicin. Lic. Fuad Eliu Chirinos Urbina