cursos online html parte8
SPONSORED
FIJAR EL TAMAÑO DE LAS COLUMNAS
El mismo atributo utilizado para definir el tamaño de la tabla se utiliza para definir o fijar el tamaño de las columnas.
Definimos el tamaño de la columna con WIDTH
Por ejemplo, queremos que en una tabla de dos columnas, la primera columna ocupe el 20 por ciento de la tabla y la segunda el 80 por ciento.
Pondremos Width=20% en las celdas de la primera columna y Width=80% en las celdas de la segunda columna.
EL MARGEN DE LAS CELDAS
Podemos asignar márgenes a las celdas, de forma que lo que pongamos dentro no quede pegado a los bordes de la celda.
Para el margen de las celdas utilizamos el atributo cellpadding="aqui ponemos el número"
EJEMPLO
Realizaremos una tabla de 2 por 3
A) Una tabla con dos filas y tres columnas, con borde de la tabla 1 y el ancho de la tabla un 75% del ancho de la página.
B) Las celdas con un margen de 15 píxeles y el tamaño de las celdas un 10% del tamaño de la tabla la primera columna, un 20% del tamaño de la tabla la segunda columna y un 70% del tamaño de la tabla la tercera columna.
C) Pondremos dentro de las celdas las letras a,b,c,d,e,f
Quedaría
<table border="1" cellpadding="15" cellspacing="0" width="75%">
<tr>
<td width="10%">a</td>
<td width="20%">b</td>
<td width="70%">c</td>
</tr>
<tr>
<td width="10%">d</td>
<td width="20%">e</td>
<td width="70%">f</td>
</tr>
</table>
Y el resultado
| a | b | c |
| d | e | f |
Para ponerle color a una celda utilizamos el atributo bgcolor="aqui ponemos el nombre o número del color"
EJEMPLO
Vamos a realizar una tabla de dos filas y dos columnas, con borde de tamaño "1" y de largo el 50% del ancho de página. Y le ponemos a una celda fondo rojo con el atributo bgcolor="red" y a otra fondo azul
<table border="1" cellpadding="0" cellspacing="0" width="50%"><tr>
<td width="50%" bgcolor="red"></td>
<td width="50%" bgcolor="blue"></td>
</tr>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
</table>
El resultado que veremos:
COLOR DEL FONDO DE LA TABLA
Para darle color a toda la tabla es suficiente con poner el atributo bgcolor"" dentro de la instrucción de tabla. Para poner fondo amarillo bgcolor="yellow"
<table border="1" cellpadding="0" cellspacing="0" width="50%" bgcolor="yellow">
EJEMPLO
Una tabla de tres filas y dos columnas con un largo del 75%.
Y fondo amarillo
<table border="1" cellpadding="0" cellspacing="0" width="75%" bgcolor="yellow">
<tr>
<td width="50%"> </td>
<td width="50%"> </td>
</tr>
<tr>
<td width="50%"> </td>
<td width="50%"> </td>
</tr>
<tr>
<td width="50%"> </td>
<td width="50%"> </td>
</tr>
</table>
Lo más característico de Internet es ser un medio que no es lineal sino hipertexto es decir que utiliza enlaces para movernos entre distintos niveles o páginas.
La instrucción para un enlace es de la forma <A HREF="aqui ponemos la dirección a la que queremos que apunte el enlace">el texto que queremos que se vea en el documento</A>
EJEMPLO
Queremos enlazar con la página 100mejores.com y que el texto que se vea sea "La mejor selección de enlaces"
<A HREF="http://www.pwgfree.es.tl/">la web que te enseña"</A>
http://pwgfree.es.tl/cursos-online-html-parte7.htm
Recordar que los enlaces externos a otras páginas deben llevar la dirección completa de la página.
Para insertar imágenes utilizamos <img src="aquí ponemos la dirección de la imagen">
Este tag no tiene tag de cierre.
En Internet tenemos numerosas páginas que proporcionan imágenes gratis.
Nos vamos a gifmania para obtener una imagen de una ejecutiva
Seleccionamos mujeres y ejecutivas.
Nos situamos sobre la imagen y pulsamos el botón DERECHO
Lo guardamos con el nombre de fichero ejecutiva y guardar como tipo de fichero GIF. Podemos guardarlo con varios tipos de ficheros, elegimos los gif por ocupar poco espacio y dar pocos problemas de compatibilidad.
Si lo guardamos en el MISMO directorio que el fichero HTML que estamos creando la instrucción para insertar la imagen de la ejecutiva nos queda:
<img src="t.gif">
Es MUY IMPORTANTE tener cuidado con las direcciones de la imágenes. Si las imágenes están en un directorio y el fichero html que estamos creando en otro directorio, la dirección de la imagen debe indicar la localización de la imagen en el otro directorio.
Cuando hemos puesto imágenes en un fichero HTML y al enviarlo al servidor de Internet no aparecen suele ser por dos motivos:
A) Hemos enviado el fichero HTML a Internet pero no los ficheros con las imágenes.
B) Al enviarlo al servidor la dirección donde el programa busca la imagen es distinta de donde realmente esta la imagen. Para comprobar si donde esta la imagen coincide con la dirección que tiene la página nos colocamos sobre la imagen (o sobre donde debería estar) y pulsando el botón DERECHO en el menú que aparece pulsamos propiedades.
Lo recomendable es MANTENER LA MISMA ESTRUCTURA DE DIRECTORIOS en el disco duro de nuestro ordenador y en el servidor de Internet. Al mover los ficheros en el disco duro y posteriormente enviarlo al servidor puede que la dirección de la imagen no coincida con la localización de la imagen.
Para insertar imágenes animadas se hace todo igual que para insertar imágenes. Simplemente elegimos una imagen animada para enlazar.
Seleccionamos una imagen animada
La guardamos con el nombre ejecutivaanimada
La instrucción para insertar la imagen queda:
<img src="ejecutivaanimada.gif">
Para una correcta visualización en los distintos navegadores es aconsejable definir el largo y alto de la imagen que se inserta
LARGO Y ALTO
Para definir el largo y el alto de una imagen utilizamos los atributos WIDTH y HEIGHT
Por ejemplo la imagen ejecutivaanimada tiene unas dimensiones de 167 pixels de largo por 109 pixels de alto. Podemos comprobarlo situándonos sobre la imagen y pulsando el botón DERECHO del ratón seleccionar "Propiedades"
La instrucción quedaría
<img src="ejecutivaanimada.gif" WIDTH="167" HEIGHT="109">
EL BORDE DE LAS IMAGENES
Podemos ponerle borde a la imagen empelando el atributo border y asignándole un valor por ejemplo 2. Si no queremos borde podemos poner border=0
<img border="2" src="ejecutivaanimada.gif" WIDTH="167" HEIGHT="109" >
Es posible y recomendable poner un texto para cuando no aparezca la imagen por algún motivo.
TEXTO ALTERNATIVO A LA IMAGEN
Para poner un texto alternativo se utiliza el "tag" ALT
Vamos a poner la imagen anterior con un borde mayor y en un recuadro más largo y menos alto y con el texto alternativo "secretaria animada"
<img border="5" src="ejecutivaanimada.gif" WIDTH="250" HEIGHT="90" ALT="secretaria animada">
PONER UN BOTON O PONER UN ENLACE EN UNA IMAGEN
Si queremos poner un botón o una imagen que al pulsarla el usuario se encamine a otra página, utilizamos la orden para poner enlaces combinada con la orden para insertar imágenes.
<a href="dirección del enlace a otra página"> <img src="aquí ponemos la localización de la imagen"></a>
Vamos a poner la imagen de la secretaria y que al pulsarla lleve al usuario al portal de secretarias
La instrucción nos quedaría:
<a href="http://www.secretariaplus.com"> <img src="ejecutivaanimada.gif"> </a>
Y se vera al acceder con el navegador a la página. De forma que al pulsar sobre la imagen nos dirigimos a la página enlazada. Vale, de acuerdo, pulsa la imagen pero recuerda darle en tu navegador al "pa tra" "atras" o "Back" y seguir el curso.
Esto nos permite poner botones y flechas que al pulsarlas nos encaminan a otras páginas de nuestra web o externas.