CODIGOS DE TABLAS EN HTML, BORDES, IMAGENES , ENTRE OTROS

1. Instituto tecnológico
Superior Babahoyo
NOMBRE:
Anthony Rodríguez Castro
Curso:
5to De Diseño Grafico P
Tema:
 Que es HTML
 Que es CSS
 Códigos de texto en HTML
 Fuentes Tipográficas
 Párrafos

2. CÓDIGOS 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.
una tabla básica puede ser declarada usando tres elementos,
a saber, <table> (el contenedor
principal), <tr> (representando a las filas contenedoras de
las celdas) y <td> (representando a las celdas).
Una tabla puede ser sencilla o compleja, dependiendo de
nuestro objetivo y la cantidad de etiquetas o atributos a
utilizar.

3. etiquetas básicas para crear una tabla
<table>
Etiqueta
contenedora
que tendrá
en su
interior toda
la tabla.
<tr>
Table Row.
Etiqueta
contenedora
de cada fila
de la tabla.
<td>
Table Data.
Cada una de
las celdas de
la tabla..
<th>
Table
Header.
Cada una de
las celdas de
cabecera de
la tabla.

4. Ejemplo:
<table class="egt">
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>

5. CÓDIGO DE TABLAS CON IMÁGENES
EN HTML
Si bien una de las cosas que podemos es crear tablas HTML con
imágenes. Es decir, que el contenido de las celdas de la tabla
sean imágenes.
• <table>
• <thead>
• <tr>
• <th>Texto</th>
• <th>Imagen</th>
• </tr>
• </thead>
• <tr>
• <td></td>
• <td></td>
• </tr>
• ...
• </table>
De esta forma podrás insertar una imagen de
forma sencilla en una página web.
<img src="url_imagen" alt="text
o alternativo" width="ancho" he
ight="alto"/>
Por ejemplo un código para
cargar una imagen podría ser:
<img src="descargar.png" alt="E
lemento de Descarga" width="5
0px" height="50px"/>

6. CÓDIGO DE TABLA CON BORDE EN
HTML
hay varias opiniones disponibles. Tu borde puede ser una
única línea sólida, una línea de puntos o una línea
discontinua. Aquí están los valores disponibles:
 none: sin borde (por
defecto);
 solid: una sola línea sólida;
 dotted: una línea de puntos;
 dashed: una línea
discontinua;
 double: con doble borde;
 groove: una línea estriada;
 ridge: una línea con crestas;
 inset: inset global efecto 3D;
 outset: outset global efecto
3D.
Para obtener un borde azul, una
línea discontinua de 3 píxeles de
grueso introduciré:
h1
{
border: 3px blue dashed;
}

7. Diferentes estilos de bordes

8. CÓDIGO DE TABLAS CON LINK O
ENLACES EN HTML
En el HTML los enlaces se marcan con la
etiqueta <a></a> y el atributo principal
es href="" donde se escribe la ubicación del
archivo.
Entre las etiquetas <a href=""></a> se puede
colocar cualquier elemento html que funcionará
como botón, generalmente se coloca un texto
o una imagen.

9. Rutas de enlaces:
Se llama ruta al valor que se escribe dentro del atributo href="" y
se pueden clasificar en dos tipos:
Rutas absolutas:
 Las rutas absolutas son las que definen la ubicación
completa de un archivo en la web y empiezan
desde http://nombredelsitio.com.ar/archivo.html
 Por ejemplo si queremos vincular nuestro sitio con
Facebook, usaríamos una ruta absoluta y el código sería:
 <a href="https://www.facebook.com/pagina">Estamos en
Facebook</a>

10. Rutas relativas:
 Las rutas relativas en cambio, definen la ubicación del archivo
de destino en relación a la ubicación del archivo que lo está
llamando. Ejemplo: si el archivo index.html vincula con quien-
soy.html y están en la misma carpeta, el código sería asi:
 <a href="quien-soy.html">Quién soy</a>.
Enlaces externos
 Son los enlaces entre diferentes sitios web. Si queremos
vincular un sitio web con otro En este caso, es común usar el
atributo target="" que nos permite abrir el enlace en una
pestaña nueva.
 Por ejemplo, si quisiera poner un vínculo a Google y que éste
abra en pestaña nueva, sería así:
 <a href="http://google.com" target="_blank">Ir a Google</a>

11. Tipos de enlacesEnlaces internos: anclas
 Las anclas son enlaces hacia un punto determinado dentro de
un html. Se usa en varios casos, por ejemplo en una página de
preguntas frecuentes donde las respuestas están desarrolladas
debajo de las preguntas, o en Wikipedia, cuando el texto es
extenso el menú tiene vínculos con anclas.
 El punto de destino tiene que estar marcado con el
atributo id="algo" y en el enlace se coloca un # (numeral)
seguido del nombre. Por ejemplo:
 href="#respuesta4">Pregunta 4</a>"salta" a este párrafo: <p
id="respuesta4">acá está escrita la respuesta</p>

12. Enlaces para ampliar una imagen
 Es común armar una galería de fotos con imágenes miniaturas
que vinculan a imágenes ampliadas. Si combinamos este
recurso con código javascript, logramos galerías de fotos muy
atractivas. El código HTML es así:
 <a href="imagenes/foto1-ampliada.jpg"><img
src="imagenes/foto1-miniatura.jpg" alt="descripción de la
foto"></a>
Enlaces para descargar archivos
 En realidad, dentro del atributo href="" podemos colocar la ruta
hacia cualquier tipo de archivo. Si el navegador reconoce la
extensión, lo abre por ejemplo: html, jpg, png, gif, svg, pdf, etc.
Pero si no lo reconoce o es un archivo comprimido (.rar, .zip), el
navegador le ofrece al usuario descargarlo. Ejemplo:
 <a href="fotos.rar">Descargá todas las fotos</a>