fuente tamaño 5

Saltos de línea y líneas en blanco
Otra de las herramientas de que disponemos a la hora de dar formato al texto
de nuestra página es el uso de saltos de línea y líneas en blanco.
Para obtener en HTML un salto de línea simple podemos usar la etiqueta
<BR>, (break=romper), que no posee etiqueta pareja de cierre. Por ejemplo,
con:
Esta es una línea de texto. <BR>Y esta es la siguiente.
Obtendremos:
Esta es una línea de texto.
Y esta es la siguiente.
Y para conseguir un salto de línea doble (con línea vacía en medio) podemos
usar la combinación de dos etiquetas <BR> Ejemplo:
Esta es una línea de texto. <BR><BR>Y esta es la siguiente.
Que nos da:
Esta es una línea de texto.
Y esta es la siguiente.
La etiqueta FONT
A la hora de formatear el texto en HTML sin duda alguna la estrella ha sido
durante mucho tiempo la pareja de etiquetas <FONT>...</FONT>, ya que
podemos aplicarla a cualquier porción de nuestro texto, permitiéndonos variar
el tamaño, el tipo de letra y el color de la misma.
Los principales atributos de la etiqueta FONT son:
<FONT SIZE="tamaño">...</FONT>, que fija el tamaño del texto entre
etiquetas, y donde el tamaño viene representado por un número entero que
puede variar entre 1 (tamaño menor) y 7 (tamaño mayor), siendo su valor por
defecto 3. Ejemplos:
fuente tamaño 1
fuente tamaño 2
fuente tamaño 3
fuente tamaño 4
fuente tamaño 5
Programación para Sistemas en Red I
Profesor: Julio Cesar Meza Ramirez
fuente tamaño 6
fuente tamaño 7
<FONT COLOR="color">...</FONT>, que fija el color con el que va a aparecer
el texto afectado, y donde el color puede venir expresado mediante su valor
hexadecimal o mediante su nombre web estándar. Ejemplos:
<FONT COLOR="red">texto en color rojo</FONT>
<FONT COLOR="#336600">texto en color verdoso</FONT>
que nos da:
texto en color rojo
texto en color verdoso
<FONT FACE="familia">...</FONT>, que va a determinar el tipo de letra con la
que aparecerá el texto, definido mediante el nombre de la familia
correspondiente.
Se pueden especificar varios tipos de fuente, separados por comas, de tal
forma que se usara la primera de ellas especificada, siempre que el ordenador
del usuario disponga la tenga instalada. Si no es así, se usara la siguiente
especificada
en
la
lista,
y
así
sucesivamente.
Si especificamos una sola fuente y esta no esta instalada en el ordenador
cliente el texto se vera en la fuente por defecto, que suele ser Times New
Roman.
Ejemplo:
<FONT SIZE="4" FACE=" Comic Sans MS ">este texto es de prueba</FONT>
Con lo que obtenemos:
este texto es de prueba
Programación para Sistemas en Red I
Profesor: Julio Cesar Meza Ramirez
Fuentes soportadas por los Navegadores - TrueType
Los tipos de letras suelen ser un problema a la hora de crear una pagina web,
en esta sección muestro cuales suelen ser las mas comunes dentro de la gama
TrueType (Microsoft TrueType)
Nombre
Ejemplo
Negrita
Itálica
Negrita
Itálica
Times New
Roman
Ejemplo
Ejemplo
Ejemplo
Ejemplo
Ejemplo
Ejemplo
Si
Si
Si
Si
Si
Si
Si
Si
Si
Si
Si
Si
Si
Si
Si
Si
Si
Si
No
No
No
Andale Mono
Ejemplo
Ejemplo
No
No
No
Comic Sans
MS
Ejemplo
Si
No
No
Impact
No
Ejemplo
No
No
No
No
No
Georgia
Courier New
Arial
Verdana
Trebuchet
Arial Black
Webdings
Comentarios
Siempre que escribamos código HTML, y al igual que pasa en los lenguajes de
programación, es siempre útil y yo diría que hasta obligatorio la introducción de
líneas de texto que expliquen o comenten qué es lo que estamos haciendo en
cada momento, no sólo por claridad en el código, si no porque si en un tiempo
futuro deseamos retocar la web necesitaremos saber porqué escribimos unas
etiquetas u otras.
Para poder conseguir esto necesitamos poder escribir líneas de texto que
aparezcan en el código pero que luego no sean visibles en el navegador, es
decir debemos usar comentarios, que en HTML se consiguen mediante el par
de etiquetas <!--....-->. Todo el texto incluido entre ellas será considerado como
un comentario por el navegador, por lo que no lo mostrara en pantalla. Ejemplo:
<!—esto es un comentario-->
Programación para Sistemas en Red I
Profesor: Julio Cesar Meza Ramirez
Enlaces en HTML
La etiqueta A
La base de toda esta sección va a ser la etiqueta A, definida en HTML
mediante la siguiente sintaxis:
<A propiedad="valor" propiedad="valor"...>hiperenlace</A>
Y que posee las siguientes propiedades:
* HREF="ruta"
Que define el nombre del anclaje o la ruta URL del documento con el que va a
conectarnos el hiperenlace.
En el caso de un documento, éste normalmente será otra página web, pero
puede ser cualquier otro tipo de documento: imágenes, documentos de texto,
de Word, hojas de cálculo, ficheros JavaScript, etc. Si tenemos nuestro
navegador configurado para abrir el tipo de documento solicitado en el
hiperenlace, se abrirá en la propia ventana de éste, y si no es así, se nos abrirá
un cuadro de dialogo para que permitamos abrirlo con el programa asociado al
fichero o guardarlo en nuestro disco duro.
Las únicas restricciones que tenemos respecto a los valores que puede tomar
esta propiedad son que la URL del fichero enlazado tenga una sintaxis correcta
y que el documento exista en el servidor web. Si no es así, obtendremos el
conocido ERROR 404, que corresponde a un documento no encontrado.
Ejemplos:
A otra web:
<A HREF=”http://www.google.com”>clic aquí para ir al buscador google</A>
A un fichero grafico:
<A HREF=”foto.jpg”>ver fotografía</A>
* TARGET="nombre"
Esta propiedad va a fijar la ventana en la que se va a abrir el documento
solicitado en el hiperenlace (siempre que sea un fichero que pueda abrir el
propio navegador). Si imaginamos que trabajamos en una página con frames,
los posibles valores que puede tomar el atributo nombre son:
Programación para Sistemas en Red I
Profesor: Julio Cesar Meza Ramirez
1) nombre_ventana: que es el valor del atributo name que le hayamos dado en
una página de frameset a un frame o a una ventana flotante en la que
queramos que se abra el documento.
2) _self: representa al propio frame o ventana en que se encuentra el enlace, y
es el valor por defecto. El documento solicitado se cargará en la página actual,
reemplazando a la que lo ha solicitado.
3) _parent: representa al frame padre del que contiene la página con el enlace,
es decir, al que se encuentra inmediatamente por encima del actual en la
jerarquía de frames de la página.
4) _top: que representa al frame padre de todos los de la ventana del
navegador, con lo que el documento solicitado se cargará en la pantalla actual,
ocupando toda la ventana y destruyendo la estructura de frames anterior.
5) _blank: que representa a una pantalla en blanco, por lo que el documento se
abrirá en una nueva ventana del navegador.
Ejemplo:
<A HREF=”foto.jpg” TARGET=”_blank”>ver fotografía</A>
* TITLE="cadena"
Mediante esta propiedad podemos fijar un texto descriptivo del destino del
enlace o de la funcionalidad del mismo, que aparecerá cuando el puntero del
ratón se posicione sobre el enlace, en forma del conocido "tip" o bocadillo
explicativo, común a diferentes aplicaciones. El mensaje a mostrar quedará
definido mediante el valor "cadena".
Es ésta una propiedad muy interesante, ya que en muchas ocasiones el texto o
imagen que actúan como enlace no son lo suficientemente significativos, por lo
que el usuario puede no tener claro dónde le va a enviar el enlace. Esta
confusión podemos corregirla empleando TITLE, que dará al usuario la
suficiente información sobre la utilidad final del enlace.
Ejemplo:
<A HREF=”foto.jpg” TARGET=”_blank” TITLE=”aquí tienes una fotografía de
Manizales”>ver fotografía</A>
Nota: También podemos asignar un hipervínculo a una imagen, para esto solo
es necesario insertarla mediante la etiqueta <IMG> ubicándola en el medio de
<A HREF> y </A>
Programación para Sistemas en Red I
Profesor: Julio Cesar Meza Ramirez
Ejemplo:
<A HREF="http://www.yahoo.es" TARGET="_blank">
<IMG SRC = "imagenes/yahoo.gif" width="66" height="20"></a>
Con lo que obtenemos:
Enlaces dentro de una misma página:
Podemos usar la etiqueta <A> para implementar enlaces que nos lleven a
diferentes partes o secciones de la página en que están incluidos, pudiendo
con ellos navegar dentro de una página. Este tipo de enlaces recibe el nombre
genérico de anchors o anclas, y para establecerlos necesitamos crear dos
elementos diferentes.
Por un lado, necesitamos fijar el punto de la página donde va a ir el enlace,
cosa que conseguimos escribiendo en ese punto la siguiente etiqueta:
<A NAME="nombre_anclaje">texto/imagen_de_referencia</A>
Y por otro lado, necesitamos crear el texto o imagen que nos va a llevar al
punto definido anteriormente, lo que conseguimos mediante el código:
<A HREF="#nombre_anclaje">texto_explicativo</A>
OJO: Nótese el caracter (#) justo antes del nombre del anclaje. Hay que
ponerlo siempre en este tipo de enlaces.
Eventos
Vamos a ver ahora una de las partes más importantes sobre la etiqueta <A>, y
es la correspondiente a los eventos que soporta.
La importancia de este aspecto se basa en que los links son verdaderos
"disparadores" de eventos, ya que soportan casi todos los tipos de ellos que
existen en HTML, permitiéndonos entonces extender la captura de
determinados eventos a otros elementos HTML que no los soportan bien o por
completo. Para mostrar ejemplos vamos a usar el método de JavaScript, alert,
que lanza una ventana con un mensaje.
Los principales eventos soportados por la etiqueta <A> son:
Programación para Sistemas en Red I
Profesor: Julio Cesar Meza Ramirez
Eventos de ratón:
onmouseOver, que salta cuando se pasa el puntero del ratón sobre un enlace:
<a href="#" onmouseOver="alert('Evento MOUSEOVER')">onmouseOver</a>
onmouseOut , que salta cuando, tras pasar el puntero del ratón por el enlace,
nos vamos de él.
<a href="#" onmouseOut="alert('Evento MOUSEOUT')">onmouseOut</a>
onmouseDown, que salta cuando pulsamos sobre el enlace con el puntero del
ratón, sin necesidad de despulsar. Es decir, salta con el sólo hecho de bajar el
botón izquierdo o derecho del ratón sobre el enlace:
<a href="#" onmouseDown="alert('Evento
MOUSEDOWN')">onmouseDown</a>
onmouseUp, que salta cuando, tras haber pulsado con uno de los botones del
ratón sobre el enlace, dejamos libre ese botón del ratón, sin necesidad de
sacar el puntero del enlace:
<a href="#" onmouseUp="alert('Evento MOUSEUP’)">onmouseUp</a>
onmouseMove, que salta cuando movemos el puntero del ratón sobre el texto o
imagen del enlace:
<a href="#" onmouseMove=" alert('Evento
MOUSEMOVE’)">onmouseMove</a>
- onClick, que salta cuando se pincha sobre el enlace con el botón izquierdo del
ratón:
<a href="#" onClick="alert('Evento CLICK’)">onClick</a>
onDblclick, que salta cuando se hace doble click sobre el enlace con el botón
izquierdo del ratón :
<a href="#" onDblclick="alert('Evento DBLCLICK’)">onDblclick</a>
Notas adicionales:
1) Aunque a primera vista hay eventos que puedan parecer de igual activación,
cada uno de ellos difiere de los demás en algún aspecto. No hay dos eventos
iguales, aunque en ocasiones parezca que trabajan igual.
2) Alguno de los eventos anteriores puede parecer a primera vista poco útiles.
En el caso de enlaces simples de texto es cierto que algunos eventos tienen
Programación para Sistemas en Red I
Profesor: Julio Cesar Meza Ramirez
una aplicación práctica incierta, pero cuando entramos en el uso de los links
como disparadores de eventos para otros elementos es cuando adquieren todo
su sentido.
Ampliación:
Retornando a lo que decíamos al principio de esta sección, existen muchos
elementos de HTML que no soportan todos los eventos anteriores, o que lo
hacen de forma defectuosa o incompleta. Es entonces cuando podemos
auxiliarnos de los enlaces para dar a ese elemento HTML la facultad de
capturar todos los eventos. En realidad no es él el que captura el evento, si no
el enlace que lo contiene, pero el resultado final, que es el que de verdad nos
interesa, es el que estábamos buscando.
Como ejemplo de esto, vamos a ver cómo una imagen, que en Nestcape
Navigator 4x no soporta el evento onmouseOver, si puede ser activada
mediante él usando un enlace. Si tenemos definida la imagen siguiente:
<img src="imagenes/yahoo.gif" width="66" height="20"
onmouseOver="alert('evento capturado')">
En Internet Explorer sí que se activará el evento al pasar el cursor sobre ella,
pero si se esta usando Nestcape 4x, no ocurrirá nada. Ahora bien, si metemos
la imagen dentro de un enlace y colocamos el evento en el mismo, tendremos
el problema resuelto:
<a href="#" onClick="return false" onmouseOver="alert('evento capturado')">
<img src="imagenes/yahoo.gif" width="66" height="20">
</a>
Nota:
A lo largo del tema que estamos tratando, tal vez se han preguntado por que
cuando pongo un enlace que no quiero que me lleve a ninguna página al ser
ejecutado utilizo como valor de href el caracter # y luego en ocasiones pongo el
evento onClick="return false". La razón es que si no pongo la propiedad href, el
navegador no considera a la etiqueta <A> como un enlace; por eso pongo el
caracter “#”, que es como si estableciera que el enlace me va a llevar a una
anclaje genérico, aunque en realidad éste no exista. Pero si sólo pongo eso, al
ejecutar el enlace el navegador me lleva al principio de la página, ya que
considera que el ancla a la que me refiero queda allí. Es por eso que se pone
return false en el evento onClick, ya que así anulamos la funcionalidad de la
propiedad href, con lo que podemos pulsar un enlace y aprovecharnos de sus
eventos sin que el documento de la página se inmute.
Programación para Sistemas en Red I
Profesor: Julio Cesar Meza Ramirez
Tablas en HTML
Las tablas son una de las herramientas mas útiles de que disponemos en
HTML, ya que nos van a permitir en cierto modo "maquetar" nuestro
documento, ayudándonos a situar dentro del mismo los diferentes elementos
que lo componen, siendo esta la única forma coherente de distribución que
había antes de la introducción de las Hojas de Estilo y de las capas.
Es por esta facilidad a la hora de organizar con tablas nuestras páginas el
que el 99% de las que veamos en Internet las usen, aunque muchas veces
no las veamos directamente porque están "ocultas".
Pero no todo es coser y cantar a la hora de trabajar con tablas, ya que a
veces actúan un poco "a su aire", por lo que podemos llegar a
desesperarnos al pasar varias horas intentando que una tabla se comporte
como nosotros queremos. Esto es debido a que en el origen del lenguaje
HTML las tablas fueron diseñadas por científicos de las universidades para
contener y organizar información, no como una ayuda para el diseño grafico
de la pagina, ya que en esa época el lenguaje y las paginas web se
concebían como una forma de transmitir texto plano, en monitores
monocromos y de poca resolución, y no fue hasta el posterior desarrollo de
Internet, de la WWW y de la tecnología de ordenadores personales
avanzados cuando se empezó a tener en cuenta la importancia del diseño
visual de una pagina web como un medio global para transmitir no solo texto
plano, si no también contenidos gráficos y multimedia.
Para solucionar estas carencias hace falta conocer bien todas las etiquetas y
atributos de que disponemos para la creación de tablas.
Estructura de una tabla
Las tablas están formadas por filas, columnas y celdas. Cada espacio
horizontal continuado es una fila y cada espacio vertical continuado es una
columna, definiéndose una celda como el espacio formado por la
intersección de una fila y una columna.
columna 1 columna 2 columna 3
fila 1 celda(1,1) celda(1,2) celda(1,2)
fila 2 celda(2,1) celda(2,2) celda(2,3)
fila 3 celda(3,1) celda(3,2) celda(3,3)
Lo primero que tenemos que hacer cuando queremos introducir una tabla es
decirle al navegador dónde empieza y dónde acaba esta; esto se consigue
mediante la etiqueta de inicio <TABLE> y su correspondiente de cierre
</TABLE>.
Programación para Sistemas en Red I
Profesor: Julio Cesar Meza Ramirez
Seguidamente debemos decirle cuantas filas vamos a tener en nuestra
tabla, cosa que hacemos con las etiqueta de inicio de fila <TR> y su
correspondiente de cierre de fila</TR>, por lo que deberemos insertar una
pareja de etiquetas por cada fila que queramos que tenga la tabla.
Por último, dentro de cada fila deberemos indicar cuantas celdas va a
haber, que inicialmente deben corresponderse con el número de
columnas que deseemos tenga la tabla. Esto se consigue mediante las
parejas de etiquetas <TD> y </TD>.
De esta forma, y siguiendo con nuestra tabla inicial de Ejemplo, el
esquema de etiquetas sería el siguiente:
<TABLE>
<TR> <TD>...</TD> <TD>...</TD> <TD>...</TD> </TR>
<TR> <TD>...</TD> <TD>...</TD> <TD>...</TD> </TR>
<TR> <TD>...</TD> <TD>...</TD> <TD>...</TD> </TR>
</TABLE>
Este es el esquema general de toda tabla simple, que traducido a código
HTML quedaría de la forma:
<TABLE>
<TR>
<TD> celda(1,1) </TD>
<TD> celda(1,2) </TD>
<TD> celda(1,3) </TD>
</TR>
<TR>
<TD> celda(2,1) </TD>
<TD> celda(2,2) </TD>
<TD> celda(2,3) </TD>
</TR>
<TR>
<TD> celda(3,1) </TD>
<TD> celda(3,2) </TD>
<TD> celda(3,3) </TD>
</TR>
</TABLE>
Programación para Sistemas en Red I
Profesor: Julio Cesar Meza Ramirez
Atributos:
<TABLE> y </TABLE> son las etiquetas principales de definición de una tabla,
que acotan el espacio en el que podemos definir filas y celdas. Sus principales
atributos son:
WIDTH="p", donde p puede venir expresado en píxeles ó en tanto por ciento
(%). Este atributo determina la anchura que va a tener la tabla. Si le damos un
valor en píxeles la anchura será absoluta, con esa medida independientemente
del tamaño de la pantalla o del elemento que contenga la tabla, mientras que si
le damos un valor en % la anchura será relativa al tamaño de pantalla ó del
elemento que contenga la tabla. Así, si queremos que la tabla ocupe toda la
ventana del navegador, bastara con especificar WIDTH="100%".
<TABLE WIDTH="100%" BORDER="1">
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE>
HEIGHT= "p", donde p puede venir expresado como un entero (píxeles) ó como
tanto por ciento (%). Este atributo nos permite determinar lo alta que va a ser la
tabla, y con él ocurre igual que con WIDTH en lo que respecta a los valores
absolutos (píxeles) y relativos (%). Normalmente el alto de la tabla no se
especifica, ya que su valor lo va a determinar el texto y/o las imágenes que
vamos a introducir en las celdas de la misma.
<TABLE WIDTH="100" HEIGHT="100" BORDER="1">
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE>
BORDER= "n", donde n es un número entero. Este atributo va a permitir que
veamos los bordes de la tabla y de las celdas que la componen, que van a
tener una anchura de n píxeles, Si no se usa este atributo no veremos los
bordes, ya que su valor por defecto es BORDER=0.Las celdas sin contenido no
aparecerán con bordes, por lo que si queremos que se muestren deberemos
insertar en la celda un espacio ( ) o una etiqueta <BR>.
<TABLE WIDTH="100" BORDER="5">
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE>
Programación para Sistemas en Red I
Profesor: Julio Cesar Meza Ramirez
BORDERCOLOR= "color", donde color puede venir expresado mediante su
nombre web en inglés ó mediante su código hexadecimal. Nótense las comillas
que encierran la definición del color. Este atributo nos permite definir el color en
que se vera el borde de nuestra tabla.
La etiqueta <TABLE>, también posee atributos de color e imagen de fondo al
igual que <BODY> por lo cual cabe resaltar que se implementan de la misma
forma:
Ejemplo:
<TABLE BGCOLOR=”blue” ></TABLE>
<TABLE BACKGROUND= "imágenes/foto.jpg"></TABLE>
ALIGN= "a". Este atributo nos va a permitir alinear la tabla respecto a la
pantalla activa o respecto al elemento que contiene a la tabla, dependiendo de
los posibles valores del atributo a, que son:
a=LEFT: alinea la tabla a la izquierda. Es el valor por defecto.
a=CENTER: sitúa la tabla en el centro.
a=RIGHT: sitúa la tabla a la derecha del elemento contenedor.
ROWSPAN= "n". donde n = nº entero. Este atributo nos permite combinar
varias celdas en una sola, de tal forma que esta ocupara todo el espacio
reservado para las que contiene.
COLSPAN= "n". donde n = nº entero. Este atributo nos permite combinar varias
columnas en una sola, de tal forma que esta ocupara todo el espacio reservado
para las que contiene.
Ejemplos.
<TABLE WIDTH="50%" CELLPADDING="5" CELLSPACING="0"
BORDER="1">
<TR>
<TD COLSPAN="3" ALIGN="center">CELDA ESPANDIDA</TD>
</TR>
<TR>
<TD WIDTH="33%">UNO</TD>
<TD WIDTH="33%">DOS</TD>
<TD WIDTH="33%">TRES</TD>
</TR>
<TR>
<TD WIDTH="33%">UNO</TD>
<TD WIDTH="33%">DOS</TD>
<TD WIDTH="33%">TRES</TD>
</TR>
</TABLE>
Programación para Sistemas en Red I
Profesor: Julio Cesar Meza Ramirez
CELDA ESPANDIDA
UNO
DOS
TRES
UNO
DOS
TRES
<TABLE WIDTH="75%" CELLPADDING="2" CELLSPACING="0"
BORDER="1">
<TR>
<TD ROWSPAN="3">CELDA ESPANDIDA</TD>
<TD WIDTH="33%">UNO</TD>
<TD WIDTH="33%">UNO</TD>
</TR>
<TR>
<TD WIDTH="33%">UNO</TD>
<TD WIDTH="33%">DOS</TD>
</TR>
<TR>
<TD WIDTH="33%">UNO</TD>
<TD WIDTH="33%">DOS</TD>
</TR>
</TABLE>
CELDA
ESPANDIDA
UNO
DOS
UNO
DOS
UNO
DOS
Programación para Sistemas en Red I
Profesor: Julio Cesar Meza Ramirez