NeytorTec Tutoriales Web

Neytortec es un blog dedicado a brindar conocimientos Sobre las diferentes formas de crear un sitio web desde el aprendizaje de lenguajes web hasta su aplicación en el uso de un Blog.

Como vimos en publicaciones anteriores el poner bordes a nuestra tabla, hace que esta tenga un mayor atractivo, pero es aun mas llamativa ...

Color en los bordes de las tablas con HTML

Como vimos en publicaciones anteriores el poner bordes a nuestra tabla, hace que esta tenga un mayor atractivo, pero es aun mas llamativa cuando ponemos colores a estos bordes, sobre todo colores que combinan con nuestra web. Para eso utilizaremos el atributo bordercolor, que nos permitirá citar un color y este aparecerá en ves del color por defecto, el cual es el negro.



Para el siguiente ejemplo utilizaremos bordercolor="blue" 

Código HTML: 

<table border="1" width="500" height="300" bordercolor="blue">.........</table>

Resultado: 

Objeto1.1 Objeto1.2 Objeto1.3
Objeto2.1 Objeto2.2 Objeto2.3
Objeto3.1 Objeto3.2 Objeto3.3


Ahora en el segundo ejemplo usaremos un bordercolor="#ab2ab2"


Código HTML: 

<table border="1" width="500" height="300" bordercolor="#ab2ab2">.........</table>

Resultado:


Objeto1.1 Objeto1.2 Objeto1.3
Objeto2.1 Objeto2.2 Objeto2.3
Objeto3.1 Objeto3.2 Objeto3.3

Como notamos en los ejemplos, el poner color a nuestros bordes, nos ayuda a poner un encanta mas atractivo a las tablas y olvidarnos del aburrido y cansado color negro, que es el color de borde por defecto.

OJO: Es necesario aclarar que hay dos formas de aplicar colores , una traduciendo el color en Ingles como vimos en la primera tabla y la otra en forma hexadecimal como se observa en la segunda tabla.

3 comentarios:

Poner una imagen de fondo a una tabla , podría ser una decoración excelente,que nos permitiría dar un atractivo mas elegante a nuestras tab...

Imágenes en las Tablas con HTML

Poner una imagen de fondo a una tabla , podría ser una decoración excelente,que nos permitiría dar un atractivo mas elegante a nuestras tablas y para lograr eso aplicaremos el atributo background en la etiqueta <table>.

En el siguiente ejemplo colocaremos un fondo a nuestra tabla usando :

<table width="500" height="300" border="1" background="imagen.jpg">

Código HTML:



Resultado:

Objeto1.1 Objeto1.2 Objeto1.3
Objeto2.1 Objeto2.2 Objeto2.3
Objeto3.1 Objeto3.2 Objeto3.3

Como observamos en nuestra tabla al colocar el atributo background en la etiqueta <table>, la imagen se muestra en forma de mosaico hasta completar el tamaño de la tabla, esta es una propiedad del atributo background.

Espero sea de utilidad esta publicación, cualquier aporte o duda pueden hacerlo por comentarios se les agradece de antemano. 

0 comentarios:

Dar color a la celdas individuales de nuestras tablas es de cierta forma beneficioso a la hora de querer distinguir distintos elementos que...

Dar Color a las celdas de las Tablas

Dar color a la celdas individuales de nuestras tablas es de cierta forma beneficioso a la hora de querer distinguir distintos elementos que se encuentran en nuestra tabla, así como, vimos en una publicación anterior sobre: como dar color a nuestra tabla utilizando el atributo bgcolor en la etiqueta <table>, procederemos de la misma manera, pero esta ves el atributo bgcolor estará situado en las etiquetas <td> o <th> según como construiste tu tabla.


Utilizaremos el atributo bgcolor en las primeras etiquetas <td> de cada fila:

 <td bgcolor="red">Objeto1.1</td>
 <td bgcolor="green">Objeto2.1</td>
<td bgcolor="orange">Objeto3.1</td>

Si observan el "Código HTML" de abajo podrán ver que pusimos bgcolor a todos los primeros <td> de cada fila.


Código HTML: 



Resultado:

Objeto1.1 Objeto1.2 Objeto1.3
Objeto2.1 Objeto2.2 Objeto2.3
Objeto3.1 Objeto3.2 Objeto3.3

Ahora en el siguiente ejemplo pondremos el atributo bgcolor a toda una fila y esto lo lograremos usándolo en la etiqueta <tr> de la siguiente forma:

<tr bgcolor="red">
<tr bgcolor="green">
<tr  bgcolor="orange">

Si observan el "Código HTML" de abajo podrán ver que pusimos bgcolor a todos las etiquetas <tr> de cada la tabla. como ya sabemos la etiqueta <tr> representa la fila de nuestra tabla.

Cogido HTML



Resultado:

Objeto1.1 Objeto1.2 Objeto1.3
Objeto2.1 Objeto2.2 Objeto2.3
Objeto3.1 Objeto3.2 Objeto3.3

Cualquier duda o aporte pueden hacerlo por comentarios, espero les aya sido de ayuda esta publicación.

4 comentarios:

Una forma muy carismática al crear  una tabla es darle color a esta, ya que esta permite brindar un mejor atractivo a nuestra tabla y por...

Color en las Tablas :Atributo bgcolor

Una forma muy carismática al crear  una tabla es darle color a esta, ya que esta permite brindar un mejor atractivo a nuestra tabla y por ende a nuestra web.

Como ya vimos  en publicaciones anteriores el atributo bgcolor permite dar color al fondo de nuestra pagina,  pero en este caso lo usaremos en nuestra tabla, teniendo así como resultado el color de fondo de esta.

En el siguiente ejemplo, aplicaremos un bgcolor="#cccc33"

Código HTML:

<table cellpadding="50" cellspacing="10" border="1" width="500" height="300" bgcolor="#cccc33">

Resultado:

Objeto1.1 Objeto1.2 Objeto1.3
Objeto2.1 Objeto2.2 Objeto2.3
Objeto3.1 Objeto3.2 Objeto3.3

El dar color a diferentes objetos de nuestro sitio web, es de suma importancia ya que estos hacen que nuestro sitio sea mas atractivo para los visitantes.

0 comentarios:

Una cosa que es de suma importancia y es muy valido mencionar en este curso de HTML, es el atributo cellspacing en las tablas, dicho atribu...

atributo cellspacing en html

Una cosa que es de suma importancia y es muy valido mencionar en este curso de HTML, es el atributo cellspacing en las tablas, dicho atributo define el espacio entre los bordes de la tabla en pixeles.

Así como el atributo cellpadding usar el atributo cellspacing, nos permite dar un mejor aspecto a nuestra tabla.

A continuación veremos 2 tablas una sin el atributo cellspacing y otra con dicho atributo, con la intención de mostrar la diferencia que hay cuando lo usamos. 

Código HTML:
                      si aun no tienes en claro la codificación de tablas, visite : creación de tablas , etiquetas de una tabla
          
<table border="1" cellpadding="50" width="500" height="300">.....................</table>

Resultado: 


Objeto1.1 Objeto1.2 Objeto1.3
Objeto2.1 Objeto2.2 Objeto2.3
Objeto3.1 Objeto3.2 Objeto3.3

ahora en el siguiente ejemplo usaremos el atributo cellspacing="10" para notar la diferencia con respecto a la primera tabla.

Código HTML:

<table border="1" cellpadding="50" width="500" height="300" cellpacing="10">.....................</table>

Resultado:


Objeto1.1 Objeto1.2 Objeto1.3
Objeto2.1 Objeto2.2 Objeto2.3
Objeto3.1 Objeto3.2 Objeto3.3


Como observamos en la segunda tabla, al usar el atributo cellspacing="10", el espacio entre todos los bordes de la tabla se alinean a 10 pixeles de distancia. 

Espero les sea de utilidad este post cualquier aporte o duda que deseen hacer solo dejen un comentario.

0 comentarios:

El  atributo cellpadding, define, en pixeles el espacio entre los bordes de la celda y el contenido de la misma. A continuación mostrare...

Atributo cellpadding en HTML

El atributo cellpadding, define, en pixeles el espacio entre los bordes de la celda y el contenido de la misma.

A continuación mostraremos 2 tablas, primero mostremos una tabla que no contiene el atributo cellpadding y luego otra que si contiene dicho atributo, mostraremos 2 tablas con la intencion de notar la diferencia al usar el atributo cellpadding.

Código HTML:
                                            Omitiremos todo el código fuente y solo pondremos los fragmentos importantes que se utilizaran.

<table border="1"  width="500" height="300"> ..............</table>


Resultado:

Objeto1.1 Objeto1.2 Objeto1.3
Objeto2.1 Objeto2.2 Objeto2.3
Objeto3.1 Objeto3.2 Objeto3.3


Ahora en el segundo ejemplo aplicaremos un cellpadding de 50.

Código HTML:

<table   width="500" height="300" cellpadding="50"> ..............</table>

Resultado:


Objeto1.1 Objeto1.2 Objeto1.3
Objeto2.1 Objeto2.2 Objeto2.3
Objeto3.1 Objeto3.2 Objeto3.3

Como observamos, al aplicar el atributo cellpadding en la segunda tabla, podemos notar una gran diferencia con respecto a la primera, debido a que al poner cellpadding="50" la distancia, que hay entre los 4 bordes de cada celda y los objetos que estas contienen, se mantienen a 50 pixeles de distancia cada uno, es por eso que la distancia de los objetos con respecto a los bordes de cada celda son iguales, en cambio en la primera tabla no se nota esa cualidad, debido a la falta del atributo cellpadding.


0 comentarios:

Entre los atributos de una tabla, podemos encontrar 2 atributos que nos permiten generar el alto y el ancho de esta. El atributo "...

Atributos width y height de tablas en HTML

Entre los atributos de una tabla, podemos encontrar 2 atributos que nos permiten generar el alto y el ancho de esta.

El atributo "height" define la altura de la tabla en pixeles o porcentajes. En el siguiente ejemplo aplicaremos un alto de 300 a nuestra tabla .
<table height="300" border="1">

Código HTML:



Resultado:


Objeto1.1 Objeto1.2 Objeto1.3
Objeto2.1 Objeto2.2 Objeto2.3
Objeto3.1 Objeto3.2 Objeto3.3

Ahora otra forma de poner los parámetros tanto para los atributos "height y width" es con porcentajes :
<table border="1" height="50%">

Resultado:



Objeto1.1 Objeto1.2 Objeto1.3
Objeto2.1 Objeto2.2 Objeto2.3
Objeto3.1 Objeto3.2 Objeto3.3

Como se nota al colocar height="50%" la tabla ocupa el 50% de lo alto de la pagina. Si usamos cualquier porcentaje, nuestra tabla lo usara con respecto al tamaño de la pagina.

El atributo "width" define la anchura de la tabla en pixeles o como ya mencionamos en porcentajes. En el siguiente ejemplo aplicaremos un ancho de 500 a la tabla :
<table border="1" width="500">

Código HTML:



Resultado:



Objeto1.1 Objeto1.2 Objeto1.3
Objeto2.1 Objeto2.2 Objeto2.3
Objeto3.1 Objeto3.2 Objeto3.3

Ahora usaremos <table border="1" width="50%">

Resultado:



Objeto1.1 Objeto1.2 Objeto1.3
Objeto2.1 Objeto2.2 Objeto2.3
Objeto3.1 Objeto3.2 Objeto3.3

Como notamos al poner width="50%" , nuestra tabla ocupa la mitad del tamaño de nuestra pagina, osea el 50% de esta.

Como ultimo ejemplo combinaremos ambos atributos, en este caso usaremos:
<table border="1" height="300" width="500">


Resultado:



Objeto1.1 Objeto1.2 Objeto1.3
Objeto2.1 Objeto2.2 Objeto2.3
Objeto3.1 Objeto3.2 Objeto3.3

1 comentarios:

La alineación de tablas en HTML, nos permite mover la tabla a lo largo de nuestra pagina web alineándola horizontalmente con respecto a su...

Alinear tablas en HTML

La alineación de tablas en HTML, nos permite mover la tabla a lo largo de nuestra pagina web alineándola horizontalmente con respecto a su entorno.
Al igual que la alineación de texto y demás objetos HTML,La alineación de tablas también esta dada por el atributo "align" que es colocado dentro de la etiqueta <table>. El código quedaría de la siguiente manera : <table align="">, entre las comillas ponemos la ubicación que le queremos dar a nuestra tabla. Para mejor entendimiento veremos 3 ejemplos :

Presione el cuadro y espere 10 segundos para leer la segunda parte del Tutorial ... 

2 comentarios:

En una publicaciòn anterior  aplicamos el atributo border en las tablas de tal forma que nos permitían  observar diferencias entre una tab...

Atributo border en Tablas html

En una publicaciòn anterior aplicamos el atributo border en las tablas de tal forma que nos permitían  observar diferencias entre una tabla sin bordes y una con bordes. Es así que, colocar bordes a las tablas, son de cierta manera indispensables para que el entorno y la forma de la tabla sea notoria ya que sin este, solo se mostrarían los elementos de cada celda. En otras palabras El atributo border define el numero de pixeles del borde principal de la tabla.

En el siguiente ejemplo aplicaremos un borde 1 a la tabla:  <table border="1">

Código HTML:




Resultado:


Objeto1.1 Objeto1.2 Objeto1.3
Objeto2.1 Objeto2.2 Objeto2.3
Objeto3.1 Objeto3.2 Objeto3.3

Ahora aplicaremos un border mayor ala tabla , en este caso sera : <table border="5">

Resultado:



Objeto1.1 Objeto1.2 Objeto1.3
Objeto2.1 Objeto2.2 Objeto2.3
Objeto3.1 Objeto3.2 Objeto3.3

Al hacer una comparación entre los 2 ejemplos nos damos cuenta que el aumento del border solo afecta al entorno principal, eso quiere decir que no importa cuanto aumentemos los bordes de la tabla lo único que se modificara sera el borde exterior.

Ahora quitaremos el atributo border de la etiqueta <table> :

Resultado:



Objeto1.1 Objeto1.2 Objeto1.3
Objeto2.1 Objeto2.2 Objeto2.3
Objeto3.1 Objeto3.2 Objeto3.3

Al no tener la etiqueta <table> el atributo border, en la tabla solo se muestran los elementos de cada celda sin ningún entorno.

OJO: Es importante tener en cuenta una peculiaridad del atributo border en las tablas ,es que cuando no se especifica el atributo mencionado, la tabla no contiene ningún borde ya sea externo ni interno, pero al colocarse un borde cualquiera, solo los bordes externos o principales son los que sufren modificaciones en cambio los internos se mantienen con un border="1" así como notamos en los ejemplos.

Si aun tienes dudas sobre las tablas puedes visitar las siguientes entradas : 


0 comentarios:

Las tablas tienen tres etiquetas que se consideran fundamentales, en este articulo aprenderemos el uso que se les puede dar a cada una ...

Etiquetas Principales de las Tablas HTML

etiquetas de las tablas

Las tablas tienen tres etiquetas que se consideran fundamentales, en este articulo aprenderemos el uso que se les puede dar a cada una de ellas y como utilizarlas al momento de crear una tabla. Como ya mencionamos en una publicación anterior sobre la creación de tablas, todo se desarrollara entre los limites de estas 2 etiquetas : <table> y </table>.

Las 3 etiquetas que hay que tener en cuenta principalmente al crear tablas en HTML son las siguientes:

<tr> y </tr> ; <td> y </td>  ;  <th> y </th>

Empezaremos explicando la finalidad de cada una de ellas:
El par de etiquetas definidas por "<tr> y </tr>", A manera practica y fácil podríamos decir que son las encargadas de crear las filas en las tablas.En cambio tanto las etiquetas <td> y </td> , son las que originan las columnas al igual que las etiquetas <th> y </th>, con la única diferencia que estas ultimas hacen que el objeto que se encuentren dentro de esa celda se vea en forma de encabezado con un formato de texto en negrita. 

Para mayor entendimiento mostraremos un par de ejmplos:

Ejemplo 1:

Código HTML:



Resultado:



Objeto1.1 Objeto1.2 Objeto1.3
Objeto2.1 Objeto2.2 Objeto2.3
Objeto3.1 Objeto3.2 Objeto3.3

Al colocar las etiquetas <tr> y </tr> creamos 1 fila y como en este ejemplo, las usamos 3 veces, es la razón de que tengamos 3 filas en nuestra tabla, ahora si nos centremos en las celdas vemos una diferencias notoria, es el formato en negrita que aparece en 3 elementos. Eso se debe al uso de las etiquetas <th> y </th>, en cambio los elementos contenidos entre las etiquetas <td> y </td> se muestran de manera normal.
En otras palabras si miramos claramente el código veremos que el primer elemento de cada fila esta entre las etiquetas <th> y </th> esto origina su cambio de formato.

Ahora veremos otro ejemplo esta ves colocando las etiquetas <th> y </th>, al incio de cada columna.

Ejemplo 2:

Código HTML:




Resultado:



Objeto1.1 Objeto1.2 Objeto1.3
Objeto2.1 Objeto2.2 Objeto2.3
Objeto3.1 Objeto3.2 Objeto3.3

OJO: es muy útil dominar esta tres etiquetas para crear las tablas, ya que esto nos permitirá, tener un mejor manejo y así podremos ejecutar cosas mas complejas al momento de usar tablas en HTML.

0 comentarios:

En HTML una tabla es un conjunto de celdas organizadas, en las cuales podemos alojar distintos contenidos.  Las tablas están defini...

Creacion de Tablas en HTML

creacion de tablas

En HTML una tabla es un conjunto de celdas organizadas, en las cuales podemos alojar distintos contenidos. 

Las tablas están definidas entre las etiquetas : <table> y </table> ademas las tablas son descritas por lineas de izquierda a derecha. Cada una de estas lineas definidas por las etiquetas : <tr> y </tr>.
Asimismo, dentro de cada linea, habrá diferentes celdas.Cada una de estas celdas sera definida por otro par de etiquetas :<td> y </td>.

Código HTML:



Resultado:


Objeto1.1 Objeto1.2 Objeto1.3
Objeto2.1 Objeto2.2 Objeto2.3
Objeto3.1 Objeto3.2 Objeto3.3

Como podrán ver  en el resultado del ejemplo, se creo nuestra tabla  de 3x3, es decir de 3 filas y 3 columnas.

Ahora para poder visualizar las separaciones que nuestra tabla genera entre las filas y columnas utilizaremos el atributo "border", en este caso añadiremos a la etiqueta <table> lo siguiente border="1".
el código seria de la siguiente manera:

<table border="1">.....................</table>

Resultado:



Objeto1.1 Objeto1.2 Objeto1.3
Objeto2.1 Objeto2.2 Objeto2.3
Objeto3.1 Objeto3.2 Objeto3.3


Ahora en el segundo ejemplo, podemos ver, los bordes que se generaron al incluir el atributo border en la etiqueta <table>.

OJO: Recordar siempre a manera practica que las Etiquetas <tr> y </tr> definen las filas de nuestras tablas mientras que las etiquetas <td> y </td> indican las columnas de las tablas, asimismo existe también una etiqueta definida por <th> y </th>, que opera de la misma manera que las etiquetas <td> y </td> , con una única diferencia, que los elementos que esta contiene, se muestra en forma de encabezado de la tabla y se tornan en negrita.

0 comentarios:

Al igual que en la  alineación de textos , la  alineación de imágenes  se efectúa de manera similar. A continuación utilizaremos el at...

Alineación de Imágenes y Texto en HTML

alineacion de imagenes y texto

Al igual que en la alineación de textos, la alineación de imágenes se efectúa de manera similar. A continuación utilizaremos el atributo "align" dentro de la etiqueta "img" para alinear el gráfico.

En el siguiente ejemplo utilizaremos la etiqueta <img src="imagen1.jpg" align="left"> en la cual el gráfico se alineara a la izquierda y para hacerlo mas atractivo colocaremos un border="1" y un poco de texto alineado a la derecha.



Código HTML:

El código HTML variara según las indicaciones que se irán dando a lo largo de este post.



Resultado:



Imagen alineada a la izquierda, seguido de un texto alineado a la derecha

Ahora en el siguiente ejemplo utilizaremos la etiqueta <im src="imagen1.jpg" align="right">; en la cual el gráfico se alineara a la derecha.

Resultado:


texto alineado a la izquierda, seguido de una imagen alineada a la derecha

Ahora en este ejemplo utilizaremos <img src="imagen1.jpg" align=" middle">  para alinear el texto en la parte intermedia a la imagen:

Resultado:



texto en la parte intermedia de la imagen alineada a la Izquierda

Ahora en este caso utilizaremos <img src="imagen1.jpg" align="baseline"> donde el texto sera alineado en la parte inferior del gráfico.

Resultado:



Imagen alineada a la Izquierda, seguido de un texto en parte inferior de esta.

OJO: es de suma importancia resaltar que cuando no se especifica un parámetro al atributo "align" la imagen o cualquier otro objeto se alinea a la izquierda por defecto.

17 comentarios:

Los Atributos  vspace y hspace  sirven para indicar el espacio libre, en pixeles, que tiene que colocarse entre la imagen y los otros...

Atributos vspace y hspace

atributos vspace y hspace

Los Atributos  vspace y hspace sirven para indicar el espacio libre, en pixeles, que tiene que colocarse entre la imagen y los otros elementos que la rodean, como texto, otras imágenes, etc.

Ejemplos: 

En el siguiente ejemplo ser muestra un grupo de imágenes sin los atributos  vspace y hspace :

Código HTML:




Resultado Ejecutado En Un Navegador:



Ahora a este mismo grupo de imágenes les colocaremos los atributos vspace y hspace :

Código HTML:




Resultado Ejecutado En Un Navegador:



Como podemos notar en los ejemplos, al utilizar los atributos vspace y hspace se generan espacios libres que separan a las imágenes unas de otras.

Ojo: tener siempre en cuenta que "vspace" establece el espacio vertical y "hspace" establece el espacio horizontal.

5 comentarios:

El atributo border define el tamaño en pixel del cuadro que rodea una imagen. De esta forma podemos recuadrar una imagen si lo deseamo...

Atributo border en HTML


El atributo border define el tamaño en pixel del cuadro que rodea una imagen. De esta forma podemos recuadrar una imagen si lo deseamos. Es particularmente útil cuando deseamos eliminar el borde que aparece cuando la imagen sirve de enlace, en dicho caso se especifica : border="0".

Ejemplo :

Código HTML:

Imágenes a utilizar:



Resultado Ejecutado En Un Navegador:










Como podemos notar en el ejemplo, al utilizar el atributo border="1", se crea un recuadro dependiendo del tamaño de pixeles asignado en dicho atributo, si aumentamos el tamaño el recuadro tendrá un tamaño mayor, caso contrario al no querer tener ningún borde se aplica border="0".

0 comentarios:

Los atributos height y width definen la altura y la anchura respectivamente de la imagen nen pixeles. Todos los archivos graficos posee...

Atributos height y width en HTML

atributos width y height

Los atributos height y width definen la altura y la anchura respectivamente de la imagen nen pixeles. Todos los archivos graficos poseen unas dimensiones de ancho y alto.

De forma generla el codigo es de la siguiente forma:
<img src="Ubicacion" width="ancho" height="altura">

Acontinuacion definiremos el tamaño de una imagen  hay que tener en cuenta que el tamaño que pondremos en esta imagen es el  mismo con el  que fue editado.

Código HTML:

Imagen a usar ------->



Resultado Ejecutado En Un Navegador:




Es recomendable no aumentar el tamaño al que tiene asignado por defecto la imagen, ya que esta esta se distorsionara y se notara anti-estético y se mostraran los pixeles.
 ejemplo:

Código HTML:



Resultado Ejecutado En Un navegador:



Es criterio de cada uno editar los tamaño de las imágenes de su sitio web como a ustedes les guste,  pero siempre hay que tener en cuenta que las imágenes son un atractivo para las webs.

0 comentarios:

En un post anterior aprendimos a colocar  imágenes con HTML , ahora utilizaremos 2 atributos que nos permitirán poner  una descripción a...

Atributo alt y title en HTML

atributos alt y title

En un post anterior aprendimos a colocar imágenes con HTML, ahora utilizaremos 2 atributos que nos permitirán poner  una descripción a las imágenes que colocamos y esta se vera  al momento de posicionar el puntero del  mouse sobre ellas.

De forma general el código seria de esta manera :
 <img alt="descripcion" src="ubicacion de la imagen" />  (Usado sin problemas en Internet Explore)

OJO: Es importante recalcar que  las propiedades del atributo "alt" se pueden visualizar sin ningún problema en Internet Explore sin embargo otros navegadores como FireFox o GoogleGhrome solo reconocen el atributo "alt" como una descripción declarativa, para ello existe otro atributo llamado "title" que nos permite efectuar la descripción sin problemas en cualquier navegador.

Ahora añadiendo el atributo title el código seria de esta manera :

 <img alt="descripcion" title="Descripcion"src="ubicacion de la imagen" /> (Para otros navegadores)


Código HTML:



Ejemplo Ejecutado En Un Navegador:

Por favor coloque el puntero del mouse sobre cualquier imagen.


Imagen ubicada en el mismo directorio:
Imagen 1

Imagen ubicada en una carpeta llamada imagenes:
Imagen 2

Imagen ubicada fuera del directorio local:
Imagen 3

Como podemos observar al posicionar el puntero del mouse sobre cualquiera de las 3 imágenes se muestra la descripción que pusimos en los atributos.

Se recomienda experimentar en diferentes navegadores con los atributos "alt" y "title" para notar las diferencias que estos tienen en cada uno de ellos.

0 comentarios:

Sin duda alguna uno de los aspectos mas vistosos y atractivos de las paginas Web son los gráficos  No obstante el Abuso de estos puede...

Insertar Imágenes con HTML(Uso de la Etiqueta img)


Sin duda alguna uno de los aspectos mas vistosos y atractivos de las paginas Web son los gráficos  No obstante el Abuso de estos puede conducirnos a un a sobrecarga que se traduce en una distracción para el navegante, que tendrá mas dificultad en encontrar la información necesaria que busca. Por eso es importante tener criterio para saber donde y cuando colocaremos imágenes en nuestro sitio Web.

La etiqueta que se utiliza para insertar una imagen es <img>(image). Esta etiqueta no posee un cierre correspondiente sin embargo en ella, hemos de especificar originariamente la ubicación de la imagen mediante el atributo src(source).




Hay 2 formas de llamar una imagen ya sea que este alojado en el mismo directorio local o fuera del directorio local. (Este criterio también se aplica a direcciones remotas ubicadas en la Web )

En el ejemplo, llamaremos a una imagen que esta en el mismo directorio, otra que esta en una carpeta llamada imágenes y en la ultima llamaremos a una imagen que están fuera del directorio local (atrás).

Código HTML:




Ejemplo Ejecutado En Un Navegador:




Imagen ubicada en el mismo directorio:


Imagen ubicada en una carpeta llamada imagenes:


Imagen ubicada fuera del directorio local:

Como podemos notar en el ejemplo tenemos que especificar bien la ubicación de la imagen a usar; al ejecutar nos damos cuenta  que no importa donde este ubicado la imagen el resultado es el mismo.

OJO : Es importante poner el tipo de archivo que es la imagen me refiero a su formato ya sea : .jpg ; .PNG ; etc.

2 comentarios: