Tabla imagen hipervinculo
•
0 recomendaciones•149 vistas
El documento explica cómo crear tablas, insertar imágenes e hipervínculos en HTML. Describe las etiquetas <table>, <tr>, <td> para crear tablas, la etiqueta <img> para insertar imágenes y la etiqueta <a> para crear hipervínculos entre páginas web. Incluye varias notas sobre cómo modificar atributos como el borde, color, alineación y tamaño de tablas e imágenes.
Más contenido relacionado
La actualidad más candente
Similar a Tabla imagen hipervinculo
Similar a Tabla imagen hipervinculo (20)
Más de Manuel A. Francisco Arenas
Más de Manuel A. Francisco Arenas (20)
Último
Último (20)
Tabla imagen hipervinculo
- 1. COMO CREAR UNA TABLA • Creacion de tablas. <table border=”1”> <tr> <td> mi </td> <td>nombre </td> </tr> <tr> <td> es </td> <td>pepe </td> </tr> </table> Este codigo me crea una tabla de dos filas y dos columnas, como la que se indica abajo. Nota0: Recordad que todo esto va entre <body>..............</body> dentro de un archivo básico HTML. Nota1: El atributo border me permite dar borde a la tabla( aumenta el espesor con la numeracion) Nota2: El atributo <tr> </tr> indica que creamos una fila. Nota3: El atributo <td> </td> indica que creamos una columna. mi nombre es pepe Nota 2:Di deseo poner de color rojo la fila 1 de la tabla anterior, escribo lo siguiente en la tabla anterior. <table> <tr bgcolor=”red”> <td> mi </td> <td>nombre </td> </tr> <tr> <td> es </td> <td>pepe </td> </tr> </table> mi nombre es pepe Nota 3: Para poner una celda de determinado color dentro de la etiqueta td colocamos el atributo bgcolor con el color que deseemos. Nota 4: De igual manera, puedo poner imágenes de fondo, en toda la tabla, en una fila o en una celda. Por ejemplo, para poner una imagen de fondo que se llama ejemplo.jpg en la tabla anterior ,que se encuentra guardada en la misma carpeta que la página html que estamos haciendo, en la etiqueta table escribo background=”ejemplo.jpg” Nota 5: Para modificar la anchura o altura de una tabla utilizamos dentro de la etiqueta table los atributos height y width.
- 2. Nota 6: Para alinear el contenido de una tabla, fila o celda utilizamos el atributo align con los valores right, center o left, si queremos alinear horizontalmente el contenido, a la derecha, al centro o a la izquierda respectivamente. Nota 7: Para alinear el contenido de una tabla, fila o celda utilizamos el atributo valign con los valores top, middle o bottom, si queremos alinear verticalmente el contenido, arriba, en el medio y abajo, respectivamente. Nota 8: Para separar unas celdas de otras, se usa el atributo cellspacing, dentro de la etiqueta table. Nota 9: Combinar celdas. Para ello usamos el atributo colspan= “al numero de celdas que quiero unir” dentro de la etiqueta td. Por ejemplo: <table border=”1”> <tr> <td colspan=”2” align=”center”> mi nombre </td> </tr> <tr> <td> es </td> <td>pepe </td> </tr> </table> Me genera la siguiente tabla: Mi nombre es pepe Nota 10: Recordad que se puede meter tambien tablas dentro de tablas, por ejemplo. <table border=”1”> <tr> <td > F11 </td> <td > <table> <tr> <td> F12 </td> </tr> <tr> <td>F13</td> </tr> </table> </td> </tr> <tr> <td> F21 </td> <td>F22 </td> </tr> </table> El codigo anterior me genera la siguiente tabla. F11 F12 F13 F21 F22
- 3. INSERTAR UNA IMAGEN 2.10 Etiqueta imagen. La etiqueta img me coloca una imagen en la página. Esta etiqueta no se cierra. Admite los atributos width (anchura de la imagen), height (altura de la imagen), border (pone borde a la imagen) Ejemplo 1: Tengo una página web y una imagen llamada cosas.jpg contenidas en la misma carpeta. <img src=”cosas.jpg” width=”200” height=”300” border=”2”> Me coloca una imagen de anchura 200, altura 300 y con un borde de tamano 2 pixeles. NOTA1: Para alinear en el centro la imagen anterior, usamos la etiqueta div. <div align=”center”> <img src=”cosas.jpg” width=”200” height=”300” border=”2”></div> NOTA 2: Por defecto el color del borde de la imagen sale de color negro, para modificar el color del borde de la imagen, debo incluir el atributo text dentro de la etiqueta body. Ejemplo 2: Tengo una página web y una imagen llamada cosas.jpg contenidas en la misma carpeta. Además la imagen cosas.jpg está contenida en una subcarpeta llamada ejemplo. <img src=”ejemplo/cosas.jpg” width=”200” height=”300” border=”2”> Me coloca la imagen que está en la carpeta ejemplo de anchura 200, altura 300 y con un borde de tamano 2 pixeles. MUY IMPORTANTE CUANDO CREEIS UNA PÁGINA QUE TENGA FOTOS: CREARE UNA CARPETA DONDE TENDRÉ TODAS LAS FOTOS Y EL ARCHIVO DE LA PAGINA. CREAR UN HIPERENLACE 2.11 Etiqueta vinculo. La etiqueta a me permite vincular dos páginas, pueden ser creaciones tuyas o de Internet. Esta etiqueta admite el atributo href, que es donde pongo la ruta de la página vinculada. Ejemplo 1: Tengo dos páginas web llamadas miscosas.html y misasuntos.html. Imaginaos que quiero vincular la página miscosas.html a la página misasuntos.html. Nota: Ambas paginas estan en la misma carpeta. En la página miscosas.html escribo lo siguiente. <a href=”misasuntos.html”> Pulsa aquí </a> Entonces cuando con el raton pulse sobre la cade de caracteres pulsa aqui, se me irá a la página web misasuntos.html.