TECNOLOGÍA LOLA
Grado: 10°
Tema: HTML
Competencia: Diseña páginas web con código Html insertando tablas.
Material de Estudio:
T a b l a s
Las tablas presentan la información de manera más organizada y visualmente más fácil de analizar. Resultan de mayor utilidad dado que mejoran notablemente la apariencia de la página web.
-
<Table> </Table>:
Indican que se va a insertar una tabla; tanto las filas como las columnas que se vayan a usar deben estar dentro de estas etiquetas.
Los atributos que utilizaremos para esta etiqueta son:
Border: Indica el grosor de la línea que bordea toda la tabla delimitadoras entre celda y celda.
Ejemplo:
<Table Border = 6>
Bordercolor: Indica el color del borde de la tabla.
Ejemplo:
<Table Bordercolor = "#3ad4f6">
-
<Th></Th>:
Se encarga de definir una celda como la cabecera de una columna en una tabla, y por cada columna se debe usar un TH.
-
<Tr></Tr>:
Hace referencia a las filas de la tabla.
-
<Td></Td>:
Hace referencia a las columnas o celdas que contendrán una fila, por tanto estas etiquetas deben estar dentro de los “<tr> </tr>”, y por cada columna se debe usar un “<td></td>”.
Ejemplo:
<table border=1>
<tr>
<th>Nombre</th>
<th>Taller</th>
<th>Evaluación</th>
</tr>
<tr>
<td>Yuyeimis</td>
<td>4.8</td>
<td>5.0</td>
</tr>
<tr>
<td>Suso</td>
<td>2.3</td>
<td>3.7</td>
</tr>
</table>
CENTRAR INFORMACIÓN
PARA CENTRAR UN TEXTO, UNA IMAGEN O UNA TABLA UTILIZAR LA ETIQUETA <CENTER>. LA ETIQUETA DEBE IR ANTES DE LAS ETIQUETAS DE <font><Img> y <Table>; y la debes cerrar después de las etiquetas que cierran las anteriores.
Ejemplo para centrar una imagen:
<Center><Img Src= "La humildad.Jpeg"></Center>
Ejemplo para centrar un texto:
<Center><Font Face="Chiller" Size="3"> EL RESPETO </Font></Center>
Resultado del código
consultar :
Cómo cambiar formato al texto de cada celda en una tabla.
Practica N°1:
-
Diseñar las siguientes 2 páginas. Crear hipervínculo a las dos páginas de manera que de una pagina se llegue a la otra y viceversa.
NO ENVÍAN NADA. ES PARA PRACTICAR .
Practica N°2:
-
Diseñar las siguientes 2 páginas. EN la siguiente imagen, el último texto, Tipos de Personalidades, es un hipervínculo que lleva a la página que se encuentra debajo de esta.