You are on page 1of 5

COLEGIO PABLO DE TARSO IED

CONSTRUCCION DE PROYECTOS DE VIDA PRODUCTIVOS

HTML - PRCTICAS

DOC RAUL MONROY PAMPLONA

PRCTICA TRES DE HTML


Enlaces: La caracterstica principal de una pgina Web es que podemos incluir
Hiperenlaces. Un Hiperenlace es un elemento de la pgina que hace que el
navegador acceda a otro recurso, otra pgina Web, un archivo, etc...
Para incluir un Hiperenlace se utiliza la etiqueta <a></a>. El texto o imagen que
se encuentre dentro de los lmites de esta etiqueta ser sensible, esto quiere decir
que si pulsamos con el ratn sobre l, se realzar la funcin de hiperenlace indicada
por la etiqueta <a></a>.
Si el Hiperenlace est indicado por un texto, este aparecer subrayado y en distinto
color, si se trata de una imagen, esta aparecer con un borde rodendola. Esta
etiqueta tiene el parmetro href que indica el lugar a donde nos llevar el
Hiperenlace si lo pulsamos.
Lo mismo podramos hacer con un grfico. Para buscar en Internet:
<a href="http://www.yahoo.com/" > <img src="yahoo.gif" ></a>
Para buscar en Internet:
Pulsando sobre
la
imagen
http://www.yahoo.com/.

se

accedera

la

pgina

situada

en

Un Hiperenlace tambin puede llevarnos a una zona de nuestra pgina. Para ello
debemos marcar en nuestra pgina las diferentes secciones en las que se divide. Lo
haremos con el parametro name.
<a name="seccion1" ></a>
Esta instruccin marca el inicio de una seccin dentro de nuestra pgina. La seccin
se llamar seccion1. Para hacer un enlace a esta seccin dentro de nuestra pgina
lo haramos de la siguiente forma: <a href="#seccion1">Primera Parte</a>
Una tabla bsica
Las tablas se usan con profusin en las pginas Web, muchas veces debido a que
son el nico instrumento con el que se cuenta, para asegurarse que las cosas
estarn en su sitio. Para definir una tabla se usan las etiquetas:
<TABLE> y </TABLE> son las etiquetas donde est contenida la tabla
<TR> y </TR> son las etiquetas que indican el comienzo y fin de una fila
(<th> y </th> si es una fila de cabecera)
<TD> y </TD> sealan una celda.

COLEGIO PABLO DE TARSO IED

CONSTRUCCION DE PROYECTOS DE VIDA PRODUCTIVOS

HTML - PRCTICAS

DOC RAUL MONROY PAMPLONA

La tabla se va definiendo declarando una fila y a continuacin las celdas que


contiene esa fila, luego otra fila y sus celadas, etc. No es necesario que todas las
filas contengan el mismo nmero de celdas.

En el siguiente ejemplo, consideraremos que queremos elaborar una tabla de este tipo:

La tabla (2x2) ms sencilla que podemos hacer es la siguiente


Escribimos:

Visualizamos

<TABLE >
<TR>
<TD>1 </TD> <TD> 2
</TD>
</TR> <TR>
<TD>3 </TD> <TD>
4</TD>
</TR>
</TABLE>

12
34

El resultado no es muy brillante, pero vamos a ir viendo las distintas posibilidades


que tenemos para mejorarlo.
Atributos de la etiqueta TABLE
Todos los atributos son opcionales
BORDER="4". Indica el tamao del borde en pxels, en este caso 4. Si no se indica
nada carece de borde
WIDTH="5" o WIDTH="50%". Es el ancho de la tabla, puede especificarse en valor
absoluto (5 pxels) o como un porcentaje (50% del ancho disponible)
CELLSPACING="2". Es el espacio entre las celdas, por defecto es 2
CELLPADDING="5". Es el espacio entre el contenido de las celdas y el borde de las
mismas, por defecto es 1

COLEGIO PABLO DE TARSO IED

CONSTRUCCION DE PROYECTOS DE VIDA PRODUCTIVOS

HTML - PRCTICAS

DOC RAUL MONROY PAMPLONA

ALIGN=" left", "right", "center". Alinea la tabla a la izquierda , derecha o en el


centro.
Otro ejemplo
Escribimos:
<TABLE BORDER="3" CELLSPACING="5"
WIDTH="150">
<TR>
<TD>1 </TD> <TD> 2 </TD>
</TR> <TR>
<TD>3 </TD> <TD> 4</TD>
</TR>
</TABLE>

Visualizamos

Atributos de las etiquetas de fila y celda


Las etiquetas que soportan las filas y las celdas son
WIDTH="30". Ancho de toda la fila o celda. Tambin se puede dar en %
ALIGN=" left", "right", "center". Alinea el contenido a la izquierda, derecha o centro
VALIGN="top" , "middle" o "bottom". Alinea el contenido verticalmente arriba, en
medio o abajo
BGCOLOR="#AACCEE". Pone un fondo del color especificado a la celda o fila
COLSPAN=3. Especifica el nmero de columnas que abarca la fila
ROWSPAN=2. Especifica el nmero de filas que abarca la columna
Tercer ejemplo. Fjate en la etiqueta TH, que sustituye a TR, resalta su contenido
con negrita, por eso se usa para los ttulos
Escribimos:
<TABLE BORDER="3" CELLSPACING="5"
WIDTH="200">
<TH COLSPAN=2 BGCOLOR="#6D8FFF>
Este es el ttulo</TH>
<TR align="center">
<TD>Esta es la celda de la 1 fila y de la 1
columna</TD>
<TD> Esta es de la 1 fila y de la 2
columna</TD>
</TR>

Visualizamos
Este es el ttulo
Esta es la
celda de la
1 fila y de
la 1
columna
Esto est
con un

Esta es de
la 1 fila y
de la 2
columna
Y esto
tambin

COLEGIO PABLO DE TARSO IED

CONSTRUCCION DE PROYECTOS DE VIDA PRODUCTIVOS

HTML - PRCTICAS

DOC RAUL MONROY PAMPLONA

<TR BGCOLOR="#6D8FFF>
<TD>Esto est con un fondo azul</TD>
<TD align="right" valign="bottom">Y esto
tambin</TD>
</TR>
</TABLE>

fondo azul

Como ves, se pueden ir modificando los comandos bsicos para obtener la tabla
que deseemos.

Es frecuente no escribir las etiquetas de cierre de fila y celda, los navegadores


presentan la tabla igual y nos ahorramos unas cuantas pulsaciones de teclas.
Qu tanto hemos aprendido?
El trabajo a realizar y presentar consiste en:
1. Elabora dos pginas HTML (blog de notas) sobre el colegio Pablo de Tarso y el Colegio
xxx
2. Escribir el cdigo HTML necesario para que la pgina web quede de la siguiente
manera (diligenciar la tabla con sus datos)

Hoja de Vida
RAUL MONROY PAMPLONA
C.C. 22512711 DE BOGOTA
BOGOTA 13 DE SEPTIEMBRE DE 1951
CRA 19 No 61 A 24 SUR
TELEFONOS 7231465 3171236547
e-mail doceoncedos@gmail.com
PERFIL PROFESIONAL
Profesional en matemtica, fsica e informtica con experiencia laboral en las reas antes mencionadas, de
excelentes relaciones interpersonales y habilidad para trabajar en equipo o individualmente. Enfocado en
el crecimiento personal, profesional e institucional; con alto grado de responsabilidad y fcil
interpretacin de las polticas organizacionales.
Nombre y Apellidos

Otros Datos

Ral

Genero

Masculino

Monroy Pamplona

Edad

40 aos

COLEGIO PABLO DE TARSO IED

CONSTRUCCION DE PROYECTOS DE VIDA PRODUCTIVOS

HTML - PRCTICAS

DOC RAUL MONROY PAMPLONA

Estudios realizados
Superiores

doceoncedos@gmail.com

Referencia Familiar
Mara Camila Monroy
Referencia Laboral Uno
Colegio Pablo de Tarso

Estas lneas son de

Correo

Colegio xxxxx

Referencia Personal
Mnica Flrez
Referencia Laboral Dos
Colegio Marsella IED

Colegio Pablo de Tarso IED

Ayuda!!!!

<table align="center" border="4" cellspacing="14" cellpadding="34" width="XXX" >


<tr>
<th align="center">aaaaa</th>
<th align="center", colspan="2">alalalalal</th>
</tr>
<tr>
<td align="left">bbbbb</td>
<td align="left">ccccc</td>
<td align="left">dddddd</td>
</tr>
</table>
3. Los hipervnculos se deben redirecciones con las pginas del los colegios Pablo de
Tarso y xxxxxx, no olvide aplicar buenos atributos a cada etiqueta empleada, es decir,
Sorprndanme!!
4. Este trabajo lo debe realizar cada uno y con sus datos.
5. SOLICITE LA REVISIN DEL DOCENTE.

You might also like