| Manual HTML |
En esta sección te ofrecemos cierta ayuda básica para la utilización del código HTML, el cual es usado para la creación de páginas Web. Este manual está orientado a MS Windows y sus programas, no obstante la mayoría es utilizable para otros sistemas operativos. La primera parte es relativamente simple, la segunda parte es más compleja. Sin embargo no es necesario saber de programación o tener conocimientos avanzados de computación para entender este manual.
Parte1
(Ir)Hipervínculos o links
Imágenes
Sonidos de fondo
Descargas o downloads
Parte 1)
El código HTML (Hypertext Markup Language o Lenguaje de Marcado de Hipertexto) es utilizado para la creación de páginas Web. Abajo aparecen listados y explicados los programas para editarlo.
Este código funciona con órdenes o comandos llamados
Etiquetas: Comandos dados a los exploradores para llamar a cierto objeto o definir cierta característica de la página. Las etiquetas se escriben casi siempre entre < >. Ejemplo: <etiqueta>. Hay algunas etiquetas que deben ser abiertas para luego ser cerradas, para ser cerradas se debe colocar un / al principio de la etiqueta. Ejemplo: Las etiquetas utilizadas para definir el color de la letra cumplen con esta función, <font color: 00FF33> Frase de ejemplo.</font> Al cerrarla se está indicando al explorador que ya no se debe mostrar la letra de ese color. Hay otras etiquetas que simplemente se escriben una vez y no es necesario cerrarlas. Ejemplo: La etiquetas que define el color de fondo de la página, <bgcolor: "44CC00"> No es necesario cerrarla ya que el color de la página es siempre el mismo. Las estiquetas pueden ser escritas en minúscula o mayúscula, los exploradores no reconocen la diferencia.Llamar a cierto objeto: Hay ciertas etiquetas que llaman a objetos para que aparezcan en la página, como son las imágenes, sonidos de fondo, javas y otros complementos, etc.
Definir cierta característica: La mayoría de las etiquetas definen las propiedades de la página, como son el color o imagen de fondo, sonido de fondo, color y tipo de la letra, etc.
Algo para tener en cuenta es que se recomienda que los nombres de los archivos no superen los ocho caracteres, ya que de lo contrario se pueden producir errores. Otro asunto para tener en cuenta es que los archivos no pueden ser muy pesados ya que tardan mucho en descargarse.
Programas para utilizarlo:
El programa básico utilizable para HTML es el Bloc de notas de Windows, sin embargo existen varios editores avanzados de HTML (Front Page, Dreamweaber, etc.).
El Bloc de Notas: Es el más básico de los editores. Se deben escribir las etiquetas directamente en el documento. este programa es utilizado sólo para crear documentos HTML simples, ya que se requiere saber de memoria las etiquetas. Al ser tantas resulta imposible acordarse las más complejas. En adición a esto, es altamente probable que siempre haya algún error de escritura o forma de uso al realizar páginas complejas.
Una vez que se haya escrito la página se deberá guardar el archivo en formato *.html o *.htm para que puedan ser abiertos por los exploradores como páginas Web y reconocer el código HTML.
Editores Avanzados: Estos programas son utilizados para realizar páginas más complejas ya que crean automáticamente el código HTML, de modo que no haya que acordárselo.
Para crear una página se debe emplear un formato básico similar al siguiente:
<HTML>
<HEAD>
<TITLE>Título de la página</TITLE>
</HEAD>
<BODY>
Aquí se incluye el cuerpo principal del documento.
</BODY>
</HTML>
Como puede ver, las páginas HTML
comienzan por una etiqueta de inicio <HTML>, seguida de varias etiquetas <HEAD>.
Observe que en la sección HEAD se encuentran las etiquetas <TITLE> en las
que debe aparecer el título de la página. El título de la página se
muestra en la esquina superior izquierda de la ventana del navegador, y no
se muestra en el cuerpo de la página. Observe también que las etiquetas TITLE
y HEAD se cierran antes de que aparezca la etiqueta <BODY>.
Es dentro de la etiqueta <BODY> donde se incluye toda la información de la
página, como texto, imágenes, enlaces, etc. Todas las etiquetas que se dispondrán
en este manual deberán ser insertadas en el <BODY> de la página al menos
que se aclare lo contrario.
Texto: Ya ha aprendido que debe comenzar a escribir el texto entre las etiquetas BODY. Puede dar distintos formatos al texto: Negrita, cursiva y subrayado. Para ello sólo tiene que ponerlo entre las etiquetas correspondientes a esos atributos:
<b>Texto en negrita</b> Aparecerá como: Texto en negrita
<i>Texto en cursiva</i> Aparecerá como: Texto en cursiva
<u>Texto subrayado</u> Aparecerá como: Texto subrayado
También puede combinar estos atributos para obtener el que desee. Por ejemplo: <b><i>Texto en negrita y cursiva</i></b> Aparecerá como: Texto en negrita y cursiva
NOTA: es importante que las etiquetas de cierre aparezcan en el mismo orden que las de inicio. En otras palabras, en el último ejemplo es importante que la etiqueta de cursiva se cierre antes que la de negrita (ponga la </i> antes de la </b>).
Etiqueta FONTS: La puede usar para mejorar aún más el aspecto del texto. Por ejemplo, puede definir el tipo de fuente, tamaño y color, todo ello con la etiqueta FONT. Por ejemplo: <FONT FACE="Arial" SIZE="2" COLOR="#FF0000">¡HOLA!</FONT> El ejemplo anterior hará que aparezca la palabra ¡HOLA! en la fuente ARIAL, tamaño 2 y color rojo: ¡HOLA!
Alinear texto: Pude alinear el texto en cuatro posiciones: izquierda (predeterminada), centro, derecha o justificarlo.
Izquierda: <p align="left">Escriba el texto aquí </p> Aparecerá como:
Escriba el texto aquí
Derecha: <p align="right">Escriba el texto aquí </p> Aparecerá como:
Escriba el texto aquí
Centro: <p align="center"> Escriba el texto aquí </p>. O bien puede escribir <center> Escriba el texto aquí </center>. Aparecerá como:
Escriba el texto aquí
Justificar: <p align="justify"> Esto es un ejemplo para comprobar cómo aparecerá el texto en una página Web que esté justificado. Es necesario escribir al menos dos renglones para comprobarlo.</p> Aparecerá como:
Esto es un ejemplo para comprobar cómo aparecerá el texto en una página Web que esté justificado. Es necesario escribir al menos dos renglones para comprobarlo.
Colores: Los colores en HTML son definidos por medio de valores hexadecimales. Es posible controlar el color de fondo, de la letra, de los links, links visitados y links activos.
<BGCOLOR="#FFFFFF"> Para el color de fondo.
<FONT COLOR="#000000"> </FONT> Para el color de la letra.
<LINK="#="#0000FF"> Para el color de los links.
<VLINK="#="#009900"> Para el color de los links visitados.
<ALINK="#FF0000"> Para el color de los links activos.
Estos son algunos colores que puede usar:
|
Blanco |
#FFFFFF |
Para crear un nuevo párrafo sólo tiene que añadir una etiqueta <P> delante del texto. Así se crea una línea en blanco antes de empezar el párrafo.
Los saltos de línea se crean con la etiqueta <BR>, que hace que el texto comience una línea por debajo de la anterior, pero sin insertar ninguna línea en blanco.
También observará que puede usar la barra espaciadora del teclado mientras modifica textos HTML, aunque el navegador convertirá todos esos espacios a un espacio como máximo. Para crear más de un espacio debe usar la etiqueta   (sin < >). Al insertar esta etiqueta en el texto está indicando al navegador que desea insertar espacios en la línea.
Uso de los tamaños de los encabezados: Los navegadores reconocen seis niveles distintos de encabezados.
<h1>Encabezado de nivel uno </h1> Encabezado de nivel uno
<h2>Encabezado de nivel dos</h2> Encabezado de nivel dos
<h3>Encabezado de nivel tres</h3> Encabezado de nivel tres
<h4>Encabezado de nivel cuatro</h4> Encabezado de nivel cuatro
<h5>Encabezado de nivel cinco</h5> Encabezado de nivel cinco
<h6>Encabezado de nivel seis</h6> Encabezado de nivel seis
Líneas horizontales: Para insertar una línea horizontal se debe utilizar la etiqueta <hr>. También puede personalizar la línea horizontal estableciendo su color y tamaño.
Tamaño: Se debe agregar la etiqueta <width="tamaño">, donde tamaño puede ser definido por un porcentaje de la ventana o una medida en píxeles. Ejemplos:
<hr width="70%"> Aparecerá como:
<hr width="70"> Aparecerá como:
En el primer caso al aparecer el símbolo % después de la cifra se indicó que dicha cifra indicaba un porcentaje de la página, al no aparecer se indica que la cifra indicaba un término en píxeles.
Color: Se debe agregar la etiqueta <COLOR="ejemplo">, donde ejemplo es el color de la línea horizontal. Ejemplo:
<hr color="00FFCC"> Aparecerá como:
Estas etiquetas son combinables. Ejemplo:
<hr width="200" color="00FFCC"> Aparecerá como:
Listas:
Lista ordenada:
Puede crear listas numeradas, u ordenadas, con la etiqueta <OL>
(lista ordenada). El formato es el siguiente:
<OL>
<LI>elemento uno
<LI>elemento dos
<LI>elemento tres
</OL>
La lista tendrá este aspecto:
Lista no ordenada:
Para crear listas con viñetas, o no ordenadas, se usa la etiqueta <UL>
(lista no ordenada). El formato es el siguiente:
<UL>
<LI>elemento uno
<LI>elemento dos
<LI>elemento tres
</UL>
La lista tendrá este aspecto:
Lista de definición:
La lista de definición es distinta y puede usarse para aplicar
sangrías automáticamente a determinadas partes del texto. La mejor manera
de explicar qué es una lista de definición es mostrar una:
Ésta es la misma lista con las etiquetas visibles:
<DL>
<DT> Naranjas
<DD> Una fruta de color amarillo-rojizo y del tamaño de una manzana.
Pertenece a la familia de los frutos cítricos. En España, las naranjas se
crían principalmente en la región levantina.
<DT> Manzanas
<DD> La manzana, técnicamente se trata de un pomo, es un fruto de tamaño
similar al de las naranjas y con distintos colores resultantes de combinar
rojo, amarillo y verde. En España, las manzanas se crían principalmente en
las regiones del norte.
</DL>