TECNOLOGIA DE LA INFORMACION Y MULTIMEDIA 15 MAYO.pptx
.Como insertar codigos de tablas en html
1. INSTITUTO TECNOLOGICO SUPERIOR BABAHOYO
NOMBRE : LADY BARAHONA
CURSO : 5 A D.G.P.
TEMA : CODIGOS DE TABLAS , BORDES , IMÁGENES Y
ENLACES EN HTML.
2. COMO INSERTAR CODIGOS
DE TABLAS EN HTML
Una tabla no es otra cosa más que un medio de organizar datos en filas y columnas.
Este concepto ha estado presente en nuestra sociedad por un largo período de tiempo y ha
sido adoptado por HTML en sus etapas iniciales, como una forma de transmitir información
que, de otro modo, no sería comprendida tan fácilmente.
En documentos HTML una tabla puede ser considerada, resumidamente, como un
grupo de filas donde cada una contiene a un grupo de celdas. Esto es conceptualmente
distinto a un grupo de columnas que contiene a un grupo de filas, y esta diferencia tendrá un
impacto en la composición y comportamiento de la tabla.
3. • Las tablas se definen con la etiqueta <table>.
• Las tablas se dividen en filas de la tabla con la etiqueta <tr>.
• Las tablas se dividen en filas con la etiqueta <td>.
• Por ejemplo, esta es una tabla con dos filas y dos columnas (En
todos los ejemplos pongo primero el código y luego cómo se
vería en la web :
5. CÓDIGO DE BORDES EN HTML :
• Si has hecho el ejemplo de Crear una tabla con HTML habrás visto
que el resultado de tu código no es parecido a los gráficos
presentados en el ejemplo. Esto es debido a que las
tablas HTML por defecto no aparecen con borde.
• Buscando documentación por Internet sobre como poner un
borde a una tabla en HTML verás que se habla del atributo
border. De esta forma el siguiente código nos permite crear una
tabla con borde:
7. LA PROPIEDAD QUE NOS PERMITE CREAR EL
BORDE ES BORDER. Y LOS PARÁMETROS QUE LE
PONEMOS SON EL GROSOR DEL BORDE, EL TIPO
DE LÍNEA Y EL COLOR. ASÍ EL CÓDIGO CSS PARA
CREAR TABLAS HTML CON BORDE ES EL
SIGUIENTE:
1.table,td {
2.border: 1px solid
black;
3.}
8. CÓDIGOS DE IMÁGENES EN HTML
• Una de las primeras cosas que debemos aprender del HTML
es la etiqueta <img> que funciona para colocar imágenes
dentro de una página web.
• Para poner una imagen utilizamos el siguiente código:
<img src="imagenHTML.jpg">
9. • Donde "imagenHTML.jpg" es la imagen que vamos a
colocar. Deberá estar ubicada en el mismo directorio. Si
queremos colocar una imagen con HTML en una página
que no está colocada dentro del mismo directorio,
podemos usar una ruta absoluta:
• <img src="folder/imagenHTML.jpg"
• La etiqueta <img> tiene varias propiedas como son:
• border, width, height, alt
10. EJEMPLO :
• Ejemplo con propiedades de imágen en HTML
• <img src="imagenHTML.jpg" border="0" width="10"
height="10">
• El ancho y alto (width, height) se coloca en pixeles y deben
corresponder al tamaño original de la imagen para que no se
distorcione.
• Los formatos soportados por el explorer son jpg, gif y png.
11. CÓDIGO DE ENLACES HTML:
El elemento a es la abreviatura de "anchor" (ancla, en español). Y el
atributo href es la abreviatura de "hypertext reference" (es decir, referencia
hipertextual), que especifica hacia dónde nos dirige el enlace; normalmente,
una dirección de internet o un nombre de fichero.
En el ejemplo anterior el atributo href contiene el valor "http://www.html.net",
que es la dirección completa de HTML.net y que se denomina URL (Uniform
Resource Locator; en español, localizador de recursos uniforme). Ten en
cuenta que "http://" siempre debe incluirse en las URLs. El texto "Desde aquí
enlazamos con HTML.net" es el que aparece en el navegador como enlace.
Recuerda cerrar el elemento con la etiqueta de cierre </a>.
