O LAS ORDENES SE CUMPLEN…

O LAS ORDENES SE CUMPLEN….

Por Hector B. Ocampo V.

Otro nombre del computador es “ordenador”, y esto diría que él es el que da las órdenes, pero no, se trata de que seamos nosotros los que ordenamos y él quien obedece. Debería decírsele “obedecedor”.

Y en esto son muy buenos, pero claro, hay que dar las órdenes con toda la precisión.

En el caso del html, las ordenes son muy sencillas, y en realidad no tenemos que saberlas todas, para eso están los manuales, los expertos y los cursos virtuales. Pero aprender unas pocas resulta importante.

Veremos entonces cuales son las ordenes html para:

Cambiar el tamaño de la letra (que va del 1 al 7):

esta letra saldrá en tamaño 5

Terminar el renglón:

Hacer un hipertexto:

<a href=”prueba.htm”>presione aquí para ver la prueba</a>

Claro que debemos tener un archivo que se llame prueba.htm en nuestro administrador de archivos.

Hacer un hipervínculo a otra página:

<a href=http://hectorbalmes.htmlplanet.com>presione aquí para ir a la página del curso</a>

Hacer un hipervínculo con un dibujo o icono en vez de texto:

Debemos tener el dibujo que por ejemplo se llama boton.gif

LOS COLORES

El manejo de los colores puede hacerse desde los programas wysiwyg. Pero la base de estos colores es un código hexadecimal muy simple. Esa palabreja “hexadecimal” se refiere a cifras que no funcionan con base en diez números sino en ¡!dieciséis!!, o sea que se usan los números del 0 al 9 y las letras de la “a” a la “f”. En este sentido la a ocuparía el lugar 11 y la f el ….??? (Presione sobre la respuesta que crea correcta)

Bueno, un color entonces está cifrado en una serie de seis por ejemplo

Rojo = ff0000

Azul = 0000ff

Verde = 00ff00

Como puede ver, la gama de colores posible es muy grande, a tal punto que el ojo de alguien corriente como nosotros puede no notar la diferencia entre un 0000ff y un 0000ef.

Las principales aplicaciones de este sistema de colores son:

<body bgcolor =”#0000ff”> … </body> que da el color de fondo

… que da el color de la letra

<center> … </center> para centrar un texto o un gráfico

<blink> … </blink> para que el texto tenga el efecto de titilar.

Estas y otras ordenes de html están en el siguiente glosario que tomamos sin permiso de un sitio de la Universidad de Navarra, espero que no les moleste ya que nuestro fin es puramente didáctico.

MARCAS BÁSICAS

<html></html> Al principio y al final de todo documento.

<head> Cabecera del documento. Dentro del head se pone la marca

<title> que indica el título de la página que queramos que salga en la franja superior

azul del navegador.

Tras cerrar el </head> se pone la marca

<body> dentro de la cual insertaremos todo el resto del documento y que cerraremos

</body> justo antes de </html>

<!-- cualquier comentario --> Lo que se escribe dentro lo ignora el navegador y no

se verá en la página. Para aclaraciones 'privadas' del autor de la página.

FORMATEO DE TEXTOS

<b> </b> negrita también con <strong>

<i> cursiva

<u> subrayado

<pre> preformateado. Respeta espacios, saltos de línea y los retornos utilizados.

<blink> hace parpadear el texto (sólo Netscape)

<font size=X> ... </font> marca el tamaño de los caracteres, donde X es un

valor del 1 a 7.

<big> amplia el tamaño de la fuente

<small> reduce el tamaño de la fuente

<blockquote> margen izquierdo

<CENTER> centrar el texto

<BR> salta a la siguiente línea

<P> nuevo párrafo

<P align=center> párrafo centrado

<P align=left> párrafo alineado a la izquierda

<P align=right> párrafo alineado a la derecha

COLORES

<body bgcolor="#xxyyzz"> marca un color de fondo en la página

<body bgcolor="#xxyyzz" text="#xxyyzz" link="#xxyyzz" vlink="#xxyyzz">

<body background="imagen.gif"> colocar un fondo en la pantalla

TEXT - color del texto

LINK - color de los enlaces

VLINK - color de los enlaces visitados

DIRECCIONES DE COLORES

http://www.hypersolutions.org/pages/rgbhex.html (Códigos para el color en HTML)

http://www.hypersolutions.org/rgb.html (pagina principal de la anterior)

http://www.imagitek.com/bcs.html (permite genera colores en tipografía y texto y

verlos al momento en el navegador)

http://www.lynda.com/  (recursos en general sobre diseño y color)

DIRECCIONES DE FONDOS CON TEXTURAS

http://www.wmaestro.com/webstore/fondos/wsfondos1.html

http://www.netscape.com/assist/net_sites/bg/backgrounds.html

<br> salto de línea

<p> doble salto de línea

<font size=2> con esta marca se cambia el tamaño

<font size=2 face=”arial”> con esta marca se cambia el tamaño y la fuente

<font size=2 face=”arial” color="#ff0000"> con esta marca se cambia el tamaño,

la fuente y el color.

<hr> <hr size=”30%”> línea horizontal

TABLAS: muy útiles para colocar textos y fotografías en la página.

<table border=2> Define la tabla y su borde. También aquí se puede definir el

ancho (width) en píxeles o porcentaje. Con cellpadding=x se define el espacio en

píxeles entre el borde y el texto. Con cellspacing=X, los píxeles entre celdas.

<tr> abre fila o línea de la tabla

<td>primera columna o celda</td>

<td height="60" width="468">segunda columna con medidas. También se pueden dar

en porcentaje de ancho</td>

</tr> cierra fila

<tr>abre segunda fila...

</table>

rowspan="X" 'expande' esa celda a lo alto de X filas. (Va dentro de la marca td)

colspan="X" 'expande' esa celda a lo largo de X columnas. (Va dentro de la marca td)

Dentro de cada celda se puede alinear el texto o cualquier contenido, cambiar el

color de fondo, con las marcas habituales dentro del td.

LISTAS

Lista no numerada

<UL>

<LI> antes de cada elemento de la lista

</UL> cierra lista

Lista numerada

<OL>

<LI> antes de cada elemento de la lista

</OL> cierra lista

Lista de glosario o definición

<DL>

<DT> ... </DT> término que se va a definir

<DD> ... </DD> explicación del término

</DL> cierra lista

IMÁGENES

<IMG SRC="dirección de la imagen” border=0 height="60" width="468"> con borde y

medidas en píxeles

<img ... alt="texto explicativo"> aparecerá un texto al pasar sobre la imagen

<img ... align="bottom"> alineación inferior

<img ... align="middle"> alineación en el medio

<img ... align="top"> alineación superior

<img ... align="left"> alineación izquierda

<img ... align="right"> alineación derecha

<img ... hspace=X> Espacio horizontal entre la imagen y el texto

<img ... vspace=y> Espacio vertical entre la imagen y el texto

CÓMO CREAR UN LINK

<a href=”dirección página”>Texto subrayado del link</a>

Dentro del a href:

target="_blank" Abre la página en un nuevo navegador

target=”_top” Abre la página en toda la pantalla para evitar los frames

<a href=”mailto:dirección de mail”> Vínculo a un correo-e

<a name=”marcador”> define un marcador en un punto concreto de una página

<a href=”#marcador”> dirige al punto concreto del marcador

<a href=”dirección página#marcador”> dirige a un punto concreto de esa página

PÁGINA CON FRAMES (no lleva body)

<HTML>

<HEAD>

<TITLE>Página con frames</TITLE>

</HEAD>

<FRAMESET COLS="20%, 80%">

<FRAME SRC="mipagind.html"> (Frame de la izquierda de 20% de ancho de pantalla)

<FRAME SRC="mipagpre.html" NAME="principal"> (Frame de la derecha de 80% de ancho)

</FRAMESET>

</HTML>

También se puede dividir la pantalla en franjas horizontales con

<frameset rows="...">

LÍNEAS HORIZONTALES SEPARADORAS

<HR> línea horizontal

<HR width="x%"> altura de la línea en porcentaje

<HR width=x> anchura de la línea en píxeles

<HR size=x> altura de la línea en píxeles

<HR align=center> línea alineada en el centro

<HR align=left> línea alineada a la izquierda

<HR align=right> línea alineada a la derecha

<HR noshade> línea sin efecto de sombra