Música


Get a playlist! Standalone player Get Ringtones

Curso HTML ( Parte IV ) - Práctica  

Posted by ShadinessDark in

Cómo insertar imagenes en una pagina

Ahora trataremos con detalle el mundo de las imágenes en el WWW y aprenderemos todas las posibilidades gráficas que ofrece. En esta parte aprenderemos, como introducción, a insertar imágenes para dar mas vida a nuestra página.

La etiqueta usada para insertar imágenes es: Esta etiqueta está compuesta por una única instrucción y por tanto no existe y su uso está prohibido. Podemos insertar una imagen en medio de una frase como si fuese una palabra más de ella y será mostrada por el navegador a continuación del texto (o cualquier otro elemento anterior).

La manera de insertar una imagen es así:

">

Para ponerle el tamaño, usamos: WIDTH="un valor" (para el ancho)... y para el largo: HEIGHT="un valor"

De tal manera que:

link de la imagen, o ubicación " WIDTH=" xx " HEIGHT=" xx ">

Como crear Enlaces

Para crear enlaces, hacemos lo siguiente:

el link a enlazar "alt= "Lo que queremos que se muestre al situar el cursor sobre el enlace ">

La etiqueta FONT

Las etiquetas de los apartados anteriores permiten modificar ciertos aspectos de la apariencia del texto de una página, pero ¿es suficiente?. Cuando el WWW se hizo más y más popular y la apariencia de las páginas comenzó a adquirir la importancia actual se hizo evidente que no.

Para poder controlar en mayor medida aún la apariencia del texto se creó la etiqueta FONT. A continuación se explicarán sus virtudes, aunque cabe destacar que actualmente existe una alternativa mejor: las hojas de estilo en cascada o CSS que será tratada en los últimos capítulos del curso.

Cambiando el tamaño del texto

La etiqueta FONT permite tener un gran control sobre el tamaño de un texto. Este tamaño se especifica con su atributo SIZE y afectará al texto que encierren la instrucción de inicio () y de fin ().

La forma de especificar el tamaño del texto consistirá en darle el valor deseado al atributo SIZE, si bien hay dos formas de hacerlo:

1- La primera de ellas es indicar un tamaño absoluto de 1 a 7. Correspondiendo 7 al tamaño mayor y 1 al menor. El tamaño por defecto del texto es el equivalente al número 3. Veamos un ejemplo:

Esto es texto normal

y esto es grande

  

Aqui la comparación de todos los tamaños:


2- La segunda consistirá en indicar un tamaño relativo respecto al que haya por defecto. Por ejemplo, para poner un tamaño 6 y suponiendo un tamaño por defecto 3 se usaría:

Texto de tamaño 3

    

Tamaño 6

Es necesario hacer notar que el aumento de tamaño se tomará siempre respecto al que se tenga por defecto (y que será 3 mientras el usuario no cambie las preferencias de su navegador), por tanto anidando varias etiquetas FONT no se irá aumentando el tamaño del texto como ocurría con la etiqueta BIG. Por ejemplo:

Texto normal (tamaño 3),

   

Texto de tamaño 4 ,

   

Este texto sigue teniendo tamaño 4





Cambiando el color del texto

Con otro atributo de la etiqueta FONT: COLOR se puede cambiar el color del texto con la misma facilidad con la que hasta ahora se ha cambiado su tamaño. En un principio la única forma de indicar un color consistía en usar un código hexadecimal de la siguiente manera:


Dónde hay que sustituír RR por dos números hexadecimales que indican la cantidad de rojo (desde 00 que es ausencia de color a FF que es máxima cantidad de color), GG por otros dos que indican la cantidad de verde y BB por dos que indican la cantidad de azul. Combinando estos tres colores en diferentes proporciones se pueden crear hasta 16 millones de colores. Este sistema suele parecer ligeramente complicado en un principio, pero con la práctica o con ayuda de herramientas gráficas de selección de colores se convierte en un método bastante sencillo e increíblemente potente.

Existe un segundo método de indicar el color que sin duda le resultará al lector más sencillo. Este método consiste en poner como valor de COLOR el nombre del color en inglés. Los colores aceptados son: Black (negro), white (blanco),green (verde), maroon (marron rojizo), olive (verde oliva), Navy (azul marino), purple (violeta), red (rojo), yellow (amarillo), blue (azul), teal (verde azulado), lime (verde lima), aqua (azul claro), fuchsia (fusia), silver (gris claro). Aunque además de estos existen otros valores, no son soportados en todos los navegadores.

Y la forma de usarlas queda clara en el siguente ejemplo:

  

Colores en el Web


ya podemos decir que sabemos poner colores en

las páginas Web,

verde ,

azul

rojo , etc. Ninguno

se nos resiste.

Quedaria así:



Cómo se crea una tabla HTML

Para crear las tablas será necesario usar una nueva etiqueta: TABLE, que significa, en inglés, tabla. Esta etiqueta consta de instrucción de inicio,

, e instrucción de fin,
. Entre ambas debemos introducir otras tres etiquetas, que definirán la estructura de la tabla. Estas etiquetas son:


El uso de las instrucciones de fin de TR, TD y TH es, como hemos dicho, optativo. Sin embargo en las primeras versiones del lenguaje HTML era obligatorio usarlas y por esta razón algunos navegadores antiguos las necesitan para poder entender las tablas. Es por ello que nuestra recomendación es usar siempre dichas instrucciones de fin para seguir con nuestro objetivo de llegar a la mayor cantidad de público posible.

Con una mera descripción de las etiquetas es difícil entender por completo como se crean tablas en HTML, así que vamos a ver unos ejemplos.

Para empezar crearemos una tabla sencilla de dos filas y dos elementos. Vayamos por pasos:

  1. En primer lugar ponemos la instrucción de inicio y fin de la etiqueta TABLE dejando un espacio entre ellas para insertar posteriormente el resto de etiquetas:


3. El tercer paso será definir el contenido de cada fila. Como nos habíamos propuesto que la tabla tuviese dos columnas en cada fila debemos insertar dos celdas en cada una. Como hemos explicado antes, para crear una celda debemos usar la etiqueta TD. Entre la instrucción de inicio y la instrucción de fin de está etiqueta será donde insertaremos el verdadero contenido de la tabla. En este primer ejemplo sencillo será simplemente texto, pero puede ser cualquier otro elemento web como imágenes o listas. Volviendo a nuestro ejemplo, para cada fila debemos escribir el siguiente código:


Columna1
Columna2


En los ejemplos que veremos a lo largo de este curso  sangraremos las etiquetas a distintos niveles para que se
a más sencillo saber que etiquetas están dentro de otras. No es necesario realizar esto para que el código
funcione,de hecho podríamos escribir el código en una sola línea y también funcionaría, pero si es recomendable
ya que nos facilita mucho su lectura.


El cuarto paso es ponerlo todo junto, repitiendo el código anterior para cada fila. El código final de la tabla
será:











Fila1,Columna1

Fila1,Columna2

Fila2,Columna1

Fila2,Columna2

Borde de las tablas

El siguiente paso en el aprendizaje de las tablas consiste en añadirles un borde. Esto es tan sencillo como añadir un nuevo atributo a la instrucción de inicio de la etiqueta TABLE. El atributo del que hablamos es BORDER, que significa borde en inglés. Este atributo puede tomar un valor en pixeles que representa el grosor del borde a mostrar. Si incluimos BORDER sin ningún valor es equivalente a BORDER="1" Repitamos el segundo de los ejemplos vistos antes pero añadiéndole un borde de grosor 5.

Esto ha sido todo!
Esperamos te haya sido de ayuda!

Se despide Jeferx =)

This entry was posted on martes, 12 de mayo de 2009 at 12:03 and is filed under . You can follow any responses to this entry through the comments feed .

0 comentarios

Publicar un comentario