This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Diseño de Páginas Web con HTML
Primeros pasos
<HTML>
<HEAD>
<TITLE> TITULO </TITLE>
</HEAD>
<BODY>
CUERPO DEL DOCUMENTO HTML
</BODY>
</HTML>
Colores de fondo de la página <BODY BGCOLOR="#CCFFCC">
Imágenes <BODY BACKGROUND="tortuga1.gif">
Formato de fuentes Negrita <B>letra negrita</B> letra negrita
Cursiva <I>letra cursiva</I> letra cursiva
Subrayado <U>letra subrayada</U> letra subrayada
Espaciado uniforme <TT>letra con espacio uniforme</TT> letra con espacio uniforme
Bien, con la sentencia <PRE> (PREFORMATO) podemos evitarlo y hacer que el navegador muestre las cosas
tal y como las hemos tecleado en el Bloc de Notas, pero usando una fuente con espaciado uniforme.
Listas de elementos Listas numeradas
Las listas numeradas representarán los elementos de la lista numerando cada uno de ellos según el lugar
que ocupan en la lista. Para este tipo de lista se utiliza la directiva <OL></OL>. Cada uno de los elementos
de la lista irá precedido de la directiva <LI>. La directiva <OL> puede llevar los siguientes parámetros:
start = num
Indica que número será el primero de la lista. Si no se indica se entiende que empezará por el número 1. Se
indica numéricamente, independientemente del tipo que se elija.
type = tipo
Indica el tipo de numeración utilizada. Si no se indica se entiende que será una lista ordenada
numéricamente.
Los tipos posibles son:
1 = Numéricamente. (1, 2, 3, 4, ... etc.)
a = Letras minúsculas. (a, b, c, d, ... etc.)
A = Letras mayúsculas. (A, B, C, D, ... etc.)
i = Números romanos en minúsculas. (i, ii, iii, iv, v, ... etc.)
I = Números romanos en mayúsculas. (I, II, III, IV, V, ... etc.)
Ejemplo Resultado
<OL> <LI>Fila1
<LI> Fila2
<LI> Fila3
<LI> Fila4
</OL>
1. Fila1
2. Fila2
3. Fila3
4. Fila4
<OL type = A >
<LI> Fila1
<LI> Fila2
<LI> Fila3
<LI> Fila4
</OL>
A. Fila1
B. Fila2
C. Fila3
D. Fila4
Listas sin numerar
Las listas sin numerar representan los elementos de la lista con un "topo" o marca que antecede a cada uno
de ellos. Se utiliza la directiva <UL></UL> para delimitar la lista, y <LI> para indicar cada uno de los
elementos. La directiva <UL> puede contener el parámetro type que indica la forma del "topo" o marca que
antecede a cada elemento de la lista. Los valores de type pueden ser disc, circle o square, con lo que el topo
o marca puede ser un disco, un círculo o un cuadrado.
Ejemplo Resultado
<UL type = disc >
<LI> Fila1
<LI> Fila2
<LI> Fila3
<LI> Fila4
</UL>
Fila1
Fila2
Fila3
Fila4
<UL type = square>
<LI> Fila1
<LI> Fila2
<LI> Fila3
<LI> Fila4
</UL>
Fila1
Fila2
Fila3
Fila4
Listas de definición
Las listas de definición muestran los elementos tipo Diccionario, o sea, término y definición. Se utiliza para
ellas la directiva <DL></DL>. El elemento marcado como término se antecede de la directiva <DT>, el
marcado como definición se antecede de la directiva <DD>.
Ejemplo Resultado
<DL> <DT>WWW
WWW
Abreviatura de World Wide Web
<DD>Abreviatura de World Wide Web
<DT>FTP
<DD>Abreviatura de File Transfer Protocol
<DT>IRC
<DD>Abreviatura de Internet Relay Chat
</DL>
FTP
Abreviatura de File Transfer Protocol
IRC
Abreviatura de Internet Relay Chat
Existen otros dos tipos de listas menos comunes. Las listas de Menú o Directorio se comportan igual que las
listas sin numerar. La lista de Menú utiliza la directiva <MENU></MENU> y los elementos se anteceden
de <LI> El resultado es una lista sin numerar más "compacta" es decir, con menos espacio interlineal entre
los elementos. La lista de Directorio utiliza la directiva <DIR></DIR> y los elementos se anteceden de
<LI>. Los elementos tienen un límite de 20 caracteres.
Listas anidadas
Todas las listas se pueden "anidar", es decir incluir una lista dentro de otra, con lo que se consigue una
estructura tipo "índice de materias".
Ejemplo Resultado
<UL type= disc>
<LI>Buscadores
<UL> <LI>Google
<LI>Yahoo
<LI>Ole
<LI>El índice
</UL> <LI>Links
<UL> <LI>Pangea
<LI>PIE
</UL>
</UL>
Buscadores
Google
Yahoo
Ole
El índice
Links
Pangea
PIE
Imágenes <IMG src="leon.jpg" >
Hay dos formatos de imágenes que todos los navegadores modernos reconocen. Son las imágenes GIF
y JPG. Cualquier otro tipo de fichero gráfico o de imagen (BMP, PCX, CDR, etc...) no será mostrado
por el visor, a no ser que disponga de un programa externo que permita su visualización.
La directiva <IMG>
src = "imagen"
Indica el nombre del fichero gráfico a mostrar.
alt = "Texto"
Mostrará el texto indicado en el caso de que el navegador utilizado para ver la página no sea capaz de
visualizar la imagen.
align = TOP / MIDDLE / BOTTOM
Las imágenes, por defecto, se comportan como si fueran un carácter, alineándose en la misma línea que el
texto que las precede o que las sigue. Éste parámetro indica cómo se alineará el texto que siga a la imagen
con respecto a ésta. TOP alinea el texto con la parte superior de la imagen, MIDDLE con la parte central, y
BOTTOM con la parte inferior. Otras opciones más avanzadas serían: TEXTTOP se alinea justo al
comienzo del texto más alto de la línea, ABSMIDDLE, se alinea en el centro real de la imagen y
ABSBOTTOM, coloca el texto justo al final de la imagen. Estos tres parámetros son más precisos, pero no
todos los navegadores los aceptan.
align = LEFT / RIGHT
Si en el parámetro align tiene los valores left o right, la imagen dejará de comportarse como un carácter
colocándose a la izquierda o a la derecha y permitiendo escribir texto a su otro lado (si no, sólo se podrá
escribir una línea).
border = tamaño
Indica el tamaño del "borde" de la imagen. A toda imagen se le asigna un borde que será visible cuando la
imagen forme parte de un Hyperenlace.
height = tamaño
Indica el alto de la imagen en puntos o en porcentaje. Se puede usar para variar el tamaño de la imagen
original, aunque es mejor redimensionarla en un programa de retoque fotográfico ya que será de mejor
calidad y el archivo tendrá el tamaño apropiado.
width = tamaño
Indica el ancho de la imagen en puntos o en porcentaje. Se puede usar para variar el tamaño de la imagen
original, aunque es mejor redimensionarla en un programa de retoque fotográfico ya que será de mejor
calidad y el archivo tendrá el tamaño apropiado.
hspace = margen
Indica el número de espacios horizontales, en puntos, que separarán la imagen del texto que la siga y la
anteceda.
vspace = margen
Indica el número de puntos verticales que separaran la imagen del texto que le siga y la anteceda.
Comentarios <!-—comentario-->
Tablas Estructura de una tabla
Vamos a ver ordenadamente (de fuera hacia dentro) las etiquetas necesarias para confeccionar las tablas.
1. La etiqueta general, que engloba a todas las demás es <TABLE> y </TABLE>. Es decir:
<TABLE> [resto de las etiquetas] </TABLE> Con esto se presentarían los datos tabulados, pero faltaría la característica que hace más atractivas a las
tablas, y es que estos datos vayan dentro de unos cajetines formados por un borde. Para esto tenemos que
añadir el atributo BORDER a la etiqueta, es decir:
<TABLE BORDER> [resto de las etiquetas] </TABLE> 2. En el siguiente nivel, dentro de la anterior, están las etiquetas para formar cada fila (row) de la tabla,
que son <TR> y </TR>. Hay que repetirlas tantas veces como filas queremos que tenga la tabla. Es decir,
para una tabla con dos filas, sería:
<TR> [etiquetas de las distintas celdas de la primera fila] </TR> <TR> [etiquetas de las distintas celdas de la segunda fila] </TR> 3. En el último nivel (dentro de las anteriores) están las etiquetas de cada celda, que son <TD> y </TD>,
que engloban el contenido de cada celda concreta (texto, imágenes, etc.). Hay que repetirla tantas veces
como celdas queremos que haya en esa fila.
Tabla con bordes
Tabla sin bordes
border="0"
Tabla con borde ancho border="5" Aumentamos el tamaño de las celdas cellpadding="15"
Aumentamos el espacio entre las celdas cellspacing="20"
Título de la tabla <CAPTION> TÍTULO </CAPTION> Celdas de cabecera
<TR> <TH>Columna 1</TH> <TH>Columna 2</TH> <TH>Columna 3</TH> </TR> Que resulta:
Se pueden colocar en el sitio que se quiera, aunque lo normal es que vayan en los bordes., encabezando las
columnas o las filas.
Contenido de las celdas
Hasta ahora, en todos los ejemplos se ha puesto un texto normal dentro de las distintas celdas. Pero se puede
poner en ellas cualquier otro elemento de los que van en un documento HTML, como imágenes, enlaces,
etc. No hay más que poner dentro de la etiqueta de la celda la etiqueta correspondiente a una imagen, un
Variando las dimensiones de la tabla <TABLE WIDTH=60% HEIGHT=40%>
<TABLE WIDTH=400 HEIGHT=300> Filas con desigual número de celdas
Celdas que abarcan a otras varias <TR> <TD COLSPAN=2> Celda sobre 2 columnas </TD> <TR> <TD ROWSPAN=2> Celda junto a 2 filas </TD>
Color de fondo en las tablas 1. Que la totalidad de la tabla tenga un color de fondo. Para ello, colocamos el atributo dentro de la
etiqueta TABLE. Por ejemplo, vamos a hacer que la tabla tenga un fondo verde (#00FF00):
<TABLE BORDER BGCOLOR="#00FF00"> <TR> <TD>fila1-celda1</TD> <TD>fila1-celda2</TD> </TR> <TR> <TD>fila2-celda1</TD> <TD>fila2-celda2</TD> </TR> </TABLE> 2. Que solamente una celda determinada tenga un color de fondo. Para ello, colocamos el atributo
dentro de la etiqueta de la celda correspondiente. Por ejemplo, vamos a hacer que sólo la celda 1 de la fila 1
tenga un color verde:
<TABLE BORDER> <TR><TD BGCOLOR="#00FF00">fila1-celda1</TD><TD>fila1-celda2</TD></TR> <TR> <TD>fila2-celda1</TD> <TD>fila2-celda2</TD> </TR> </TABLE> 3. Que la generalidad de las celdas tenga un color, pero que alguna celda tenga uno particular. El
atributo del color general se coloca en la etiqueta TABLE, y el del color particular en la etiqueta de la celda en
cuestión (una combinación de los dos casos anteriores). por ejemplo, vamos a hacer que la generalidad de
la tabla sea de color rojo (#FF0000), pero que la celda 1 de la fila 1 sea de color verde (#00FF00):
<TABLE BORDER BACKGROUND="león.jpg"> (Se omite el resto de las etiquetas de la tabla)
Si, se pone este atributo dentro de la etiqueta de una fila: <TR BACKGROUND="leon.jpg"> se verá sólo en esa fila, como por ejemplo:
Si, por el contrario, sólo se pone este atributo dentro de la etiqueta de una celda concreta <TD BACKGROUND="leon.jpg"> entonces la imagen de fondo se verá sólo en esa celda, como por ejemplo:
Separación entre las celdas de una tabla
<TABLE BORDER CELLSPACING=20> (Se omite el resto de las etiquetas de la tabla) <TABLE BORDER=5 CELLSPACING=20>; Separación entre el borde y el contenido dentro de las celdas
Por defecto, la separación entre el borde y el contenido dentro de las celdas es de un pixel. Se puede
cambiar esto con el atributo CELLPADDING, que se pone dentro de la etiqueta TABLE.
Por ejemplo, para obtener una separación de 20 pixels entre el contenido y los bordes, dentro de cada celda: <TABLE BORDER CELLPADDING=20>;
Se puede combinar este atributo con CELLSPACING (visto en el apartado anterior).
Por ejemplo, una tabla con bordes de 5 de espesor, separación entre celdas de 15 y separación del contenido
con respecto a los bordes de las celdas de 20, lo obtendríamos con: <TABLE BORDER=5 CELLSPACING=15 CELLPADDING=20>;
(Se omite el resto de las etiquetas de la tabla)
Hiperenlaces <a> </a> Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página o
archivo.
Hiperenlace <a> </a>
Aquellos elementos (texto, imágenes, etc.) sobre los que se desee insertar un enlace han de encontrarse entre
las etiquetas <a> y </a>, especificando con el atributo href la página a la que está asociado el enlace,
Referencia absoluta
<a href="http://www.google.es/index.html">Visita www.google.es/index.html</a> Referencia relativa
<a href="HTML006.html">Enlace a fondo de página</a>