 |
LICEO
FARALLONES DEL NORTE
“Fomentamos el
desarrollo de competencias laborales y el espíritu de formación para el
trabajo”
Guía
de Clases
|
SANTIAGO DE CALI
 |
|||
Versión:
01
|
Fecha:
16/03/2020
24/03/2020
|
Página:
1
|
Código:
-GC-FR-AC 01
|
||
1. GUIA DE APRENDIZAJE
ASIGNATURA:
|
SISTEMAS ARTICULACION SENA
|
GRADO:
|
9
|
PERIODO LECTIVO:
|
1
|
NOMBRE DEL DOCENTE:
|
SIXTO LEONARDO CORTES TORRES
|
Aplicar herramientas o programas
colaborativos de acuerdo con la necesidad requerida
|
|
D.B.A:
|
Conoce los procesos
y comando de elaboración de tablas bajo el código HTML, aplica cada una de
las reglas de las sentencias.
|
EVIDENCIA DE
APRENDIZAJE:
|
Realiza entrega
de página web finalizada según los parámetros solicitados por el docente,
esta será alojada en drive o enviada al correo que el docente asigne. (profesixtocolegio@gmail.com)
El correo debe
tener la siguiente información nombre de estudiante, grado.
NOTA: EL TRABAJO
ES INDIVIDUAL
|
2. PRESENTACIÓN
Cordial saludo
estudiantes:
El objetivo de la presente guía es poder desarrollar, de manera virtual las
actividades de aprendizaje planteadas en nuestro trabajo, proyectado
semanalmente, que corresponden a las semanas de contingencia por las que se
atraviesa debido a la pandemia. Se espera de la responsabilidad de todos, para
que podamos continuar con nuestros compromisos
de manera responsable. Es tarea de
toda la comunidad Liceo Farallones del Norte, SALIR ADELANTE
3. FORMULACIÓN DE LAS ACTIVIDADES DE APRENDIZAJE
3.1 Creación
de tablas con código HTML
Tiempo sugerido: 4 horas
(semana del 16 al 20)
·
La actividad se
inicia con la presentación definición y ejercicio
paso a paso.
·
Luego la
Visualización de Videos informativos con
ejemplos muy prácticos:
NOTA: Es importante que realices cada ejemplo, para poder
llegar hasta el final de los ejercicios
DEFINICION DEL TEMA:
TABLAS
Las tablas son un modo
sencillo de disponer el texto en columnas
o de añadir un titular a una ilustración,
pero hay más aplicaciones. La
etiqueta <TABLE> puede ser una poderosa herramienta de formato. Se puede hacer uso de la etiqueta
<TABLE> para ubicar texto e
imágenes con precisión, en prácticamente casi cualquier lugar de una página.
Estructura de una tabla
Explicacion de comando a
utilizar
Vamos a ver ordenadamente (de fuera hacia
dentro) las etiquetas necesarias para confeccionar las tablas.
<TABLE>
[resto de las etiquetas]
</TABLE>
•
Es la etiqueta
general, que engloba
a todas las demás.
<TABLE
BORDER="n">
[resto de las etiquetas]
</TABLE>
•
Presenta los datos tabulados con un borde,
haciendo las tablas
más atractivas, y el grosor
es de n pixeles.
<TR>
[etiquetas de las distintas celdas de la primera fila]
</TR>
•
Permite formar cada fila de la tabla.
Hay que repetirla tantas veces como filas queremos
que tenga la tabla.
<TD>
[contenido de cada celda (imágenes, texto, etc.)]
</TD>
•
Permite formar las celdas que contendrá cada fila. Hay que repetirlas tantas veces como celdas deba tener la fila.
<TH>
[encabezamiento de tabla]
</TH>
•
Es utilizada para colocar encabezamientos en negrita
sobre las columnas
Ejemplo 1
<HTML>
<HEAD>
<TITLE> Página de prueba para tablas </TITLE>
</HEAD>
<BODY>
<TABLE
BORDER>
<TR>
<TH>Columna 1</TH><TH>Columna 2</TH><TH>Columna 3</TH>
<TD>fila1-celda1</TD><TD>fila1-celda2</TD><TD>fila1-celda3</TD>
</TR>
<TR>
<TD>fila2-celda1</TD><TD>fila2-celda2</TD><TD>fila2-celda3</TD>
</TR>
</TABLE>
<BR> [Aquí van las etiquetas que visualizan la página]
</BODY>
</HTML>
Si el numero de celdas de una fila es distinto
al de otra el navegador
forma el número de filas y columnas
que haga falta, dejando espacios
en blanco en las filas que tengan menos celdas.
Titular de tabla
Se puede
añadir un titulo
a la tabla, es decir
un texto situado
encima de la tabla que indica
cuál es su contenido. Se consi-
gue con la etiqueta <CAPTION> y </CAPTION>. Por ejemplo:
<CAPTION> Esta es mi primera tabla </CAPTION>
<CAPTION ALIGN="top">Título</CAPTION> Coloca el título sobre
la tabla.
<CAPTION ALIGN="bottom">Título</CAPTION> Coloca el título bajo la tabla.
Contenido de las celdas
Solo se ha puesto hasta
ahora en el ejemplo, texto
normal dentro de las distintas celdas. Pero se puede poner en ellas cual-
quier otro elemento de los que van en un documento HTML, como imágenes,
enlaces, etc. No hay más que poner dentro
de la etiqueta de la celda la etiqueta correspondiente a una imagen,
un enlace, etc.
Ejemplos 2
a) Con una imagen
<TABLE BORDER>
<TR>
<TD> <IMG
SRC="imagen.gif"> </TD>
</TR>
</TABLE>
b) Con un enlace
<TABLE BORDER>
<TR>
<TD><A
HREF="index.html"> Mi página principal </A></TD>
</TR>
</TABLE>
Posicionamiento del contenido
dentro de la celda
Normalmente, el contenido de una celda está alineado
a la izquierda. Pero se puede cambiar
esto añadiendo dentro
de la etiqueta de la celda
los siguientes atributos:
<TD ALIGN="center"> Al centro </TD>
<TD ALIGN="right"> A la derecha </TD>
<TH ALIGN="left"> A la izquierda </TH>
El alineamiento por defecto en el sentido
vertical es en el medio.
También se puede cambiar, añadiendo dentro de la eti- queta de la celda los siguientes atributos:
<TD VALIGN="top"> Arriba </TD>
<TD VALIGN="bottom"> Abajo </TD>
Variando las dimensiones de la
tabla
El navegador se encarga normalmente de dimensionar el tamaño total de la tabla
de acuerdo con el
número de filas, de columnas, por el contenido de las celdas,
espesor de los bordes, etc.
A veces
nos puede convenir forzarle para que
la tabla tenga
unas dimensiones totales
mayores que las que le corresponden, tanto en anchura como en longitud. Esto se consigue añadiendo dentro de la
etiqueta de la tabla los atributos WIDTH
y HEIGHT
igual a un porcentaje de la dimensión de la pantalla, o a una cifra que equivale al número de pixels.
Por ejemplo, si
colocamos:
<TABLE
WIDTH="60%">
O, por ejemplo
ponemos:
<TABLE
HEIGHT="200">
Celdas que
abarcan a otras varias
A veces puede
interesarnos que una celda se extienda sobre
otras varias. Esto
se consigue añadiendo dentro de la etiqueta de la celda los atributos COLSPAN="número"
para extenderse sobre un
número determinado de columnas,
o ROWSPAN="número"
para extenderse verticalmente sobre un número determinado de filas.
Por ejemplo,
en la primera tabla del ejemplo anterior
vamos a añadir
una fila con una sola celda, que abarca a dos colum- nas:
<TR>
<TD COLSPAN="2"> Celda sobre 2 columnas </TD>
<TR>
O, en la misma
tabla, vamos a añadir una celda en la primera fila, pero que abarque también a
la siguiente:
<TD
ROWSPAN="2"> Celda junto a 2 filas </TD>
Color de
fondo en las tablas
Podemos conseguir que las tablas
tengan un color
de fondo, siguiendo un procedimiento totalmente análogo al empleado para que una página
tenga un color
de fondo uniforme
(según vimos en el capítulo
7). Para ello debemos
utilizar el atri- buto
BGCOLOR="#XXYYZZ", visto en
dicho capítulo.
Se puede conseguir
así:
<TABLE BORDER
BGCOLOR="#XXYYZZ">
[resto de las etiquetas]
</TABLE> La totalidad
de la tabla tendrá un color de fondo.
<TD
BGCOLOR="#XXYYZZ">
[contenido de la celda]
</TD> Solo una celda tendrá
color de fondo,
distinto al resto.
VIDEO
INFORMATIVO 1
1.
NOTA: en el primer video no te fijes en el programa,
si no en el código
VIDEO
INFORMATIVO 2
3.
VIDEO
INFORMATIVO 3
Realiza en el bloc de notas la siguiente actividad:
NOTA1: Toda Actividad será y debe ser sustentada después que
pase todo lo que está pasando actualmente
NOTA2: Realice el ejemplo de cada uno de los videos que
visualizaste.
A.
Cree un archivo
en su bloc de notas llamado TABLA1.HTML
B.
Teniendo en
cuenta los videos y consultas realizadas cree en su archivo TABLA1.HTML y cree la siguiente tabla:
C. Recuerda que la tabla debe quedar llenada en su
totalidad en cada columna: NOMBRE, APELLIDO, EDAD, SEXO, CIUDAD (Los datos los pueden
inventar).
ACTIVIDAD 2
Semana del 24 al
28 de Marzo
2.
Asígnale un nombre a este nuevo archivo, ya sabes como
4. Esta
página principal, debe tener un color de fondo o una imagen de fondo y tener un
título “MIS MEJORES TABLAS”.
5. Debo
poder devolverme de una página a otra cuando desee, atraves de hipervínculos en
cada pagina
0 comentarios:
Publicar un comentario