Manual Básico de HTML

Este manual se ha elaborado 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 y para el llenado de contenidos en el Contenidos RedCetus. En este manual se explican únicamente las instrucciones básicas para llenar un contenido. Existen muchas otras instrucciones en HTML que serán omitidas por no corresponder al ámbito de llenado de contenidos.

Elementos, atributos y directivas

Texto y efectos.

Texto                de                    prueba
       de 

mi    página 
               Web.

Texto de prueba<BR>de mi página<P>Web.
Se verá como :
Texto de prueba
de mi página
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 se utilizarán las siguientes 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 atributos. Los dos más usados son 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 línea se puede definir en porcentaje usando el parámetro width. La altura de la línea se indica con el par&aacuteametro size. Por ejemplo:

<HR size=10 width=50%>

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>Noticias
</UL>

Produciría el efecto :

• Links interesantes
• Galeria de fotos
• Noticias

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

Produciría el efecto :

1. Links interesantes
2. Galeria de fotos
3. Noticias

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

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>

Produciría 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>Presidencia de la República
     <LI>Banco Mundial
     <LI>Ministerio de Hidrocarburos
     </UL>

<LI>Galería de fotos
     <UL>
     <LI>Fotos de Proyectos
     <LI>Fotos de Personas
     </UL>
<LI>Noticias
     <UL>
     <LI>Ambientales
     <LI>Legales
     <LI>Institucionales
     </UL>

</UL>

• Links interesantes
  • Presidencia de la República
  • Banco Mundial
  • Ministerio de Hidrocarburos
• Galeria de fotos
  • Fotos de Proyectos
  • Fotos de Personas
• Noticias
  • Ambientales
  • Legales
  • Institucionales

Actualmente los navegadores más 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 :

De la misma forma podremos indicar al navegador que represente un carácter por su código ascii de la forma &#codigo;. Por ejemplo:

&#169; Representara el símbolo ©.

Gráficos y Enlaces.

<IMG src="esp.jpg" border=none alt="Bolivia">

Mostrará el gráfico esp.jpg sin ningún borde rodeándolo, y aquellos navegadores que no puedan mostrar el gráfico visualizaran la palabra Bolivia.

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 :

Ejemplos :

Ejemplos :
<IMG src="foto_ejemplo.jpg" height=150 width=60>

<IMG src="foto_ejemplo.jpg" 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.hidrocarburos.gov.bo">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.hidrocarburos.gov.bo. Entre la directiva <A></A> podemos poner un texto o un gráfico o ambas cosas. P.ej.:

<A href="http://www.hidrocarburos.gov.bo"><IMG src="foto_ejemplo.jpg">Ministerio.</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.

Los parámetros fundamentales de <TABLE> son :

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 :

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>Bolivia<TD align=center>70<TD align=right>140.000.-<TR>
<TD align=left>Perú<TD align=center>20<TD align=right>40.000.-<TR>
<TD align=left>Chile<TD align=center>30<TD align=right>60.000.-<TR>
</TABLE>

Que daría como resultado: