COLEGIO PABLO DE TARSO IED CONSTRUCCION DE PROYECTOS DE VIDA PRODUCTIVOS HTML - PRÁCTICAS DOC RAUL MONROY PAMPLONA

Transcripción

1 PRÁCTICA TRES DE HTML Enlaces: La característica principal de una página Web es que podemos incluir Hiperenlaces. Un Hiperenlace es un elemento de la página que hace que el navegador acceda a otro recurso, otra página Web, un archivo, etc... Para incluir un Hiperenlace se utiliza la etiqueta <a></a>. El texto o imagen que se encuentre dentro de los límites de esta etiqueta será sensible, esto quiere decir que si pulsamos con el ratón sobre él, se realzará la función 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 rodeándola. Esta etiqueta tiene el parámetro href que indica el lugar a donde nos llevará el Hiperenlace si lo pulsamos. Lo mismo podríamos hacer con un gráfico. Para buscar en Internet: <a href=" > <img src="yahoo.gif" ></a> Para buscar en Internet: Pulsando sobre la imagen se accedería a la página situada en Un Hiperenlace también puede llevarnos a una zona de nuestra página. Para ello debemos marcar en nuestra página las diferentes secciones en las que se divide. Lo haremos con el parametro name. <a name="seccion1" ></a> Esta instrucción marca el inicio de una sección dentro de nuestra página. La sección se llamará seccion1. Para hacer un enlace a esta sección dentro de nuestra página lo haríamos de la siguiente forma: <a href="#seccion1">primera Parte</a> Una tabla básica Las tablas se usan con profusión en las páginas Web, muchas veces debido a que son el único instrumento con el que se cuenta, para asegurarse que las cosas estarán en su sitio. Para definir una tabla se usan las etiquetas: <TABLE> y son las etiquetas donde está contenida la tabla <TR> y son las etiquetas que indican el comienzo y fin de una fila (<th> y </th> si es una fila de cabecera) <TD> y </TD> señalan una celda.

2 La tabla se va definiendo declarando una fila y a continuación las celdas que contiene esa fila, luego otra fila y sus celadas, etc. No es necesario que todas las filas contengan el mismo número de celdas. En el siguiente ejemplo, consideraremos que queremos elaborar una tabla de este tipo: La tabla (2x2) más sencilla que podemos hacer es la siguiente <TABLE > <TR> <TD>1 </TD> <TD> 2 </TD> <TR> <TD>3 </TD> <TD> 4</TD> 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 tamaño del borde en píxels, 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 píxels) 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

3 ALIGN=" left", "right", "center". Alinea la tabla a la izquierda, derecha o en el centro. Otro ejemplo <TABLE BORDER="3" CELLSPACING="5" WIDTH="150"> <TR> <TD>1 </TD> <TD> 2 </TD> <TR> <TD>3 </TD> <TD> 4</TD> 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. También 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 número de columnas que abarca la fila ROWSPAN=2. Especifica el número de filas que abarca la columna Tercer ejemplo. Fíjate en la etiqueta TH, que sustituye a TR, resalta su contenido con negrita, por eso se usa para los títulos <TABLE BORDER="3" CELLSPACING="5" WIDTH="200"> <TH COLSPAN=2 BGCOLOR="#6D8FFF> Este es el título</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> Este es el título 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 también

4 <TR BGCOLOR="#6D8FFF> <TD>Esto está con un fondo azul</td> <TD align="right" valign="bottom">y esto también</td> fondo azul Como ves, se pueden ir modificando los comandos básicos 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 páginas HTML (blog de notas) sobre el colegio Pablo de Tarso y el Colegio xxx 2. Escribir el código HTML necesario para que la página web quede de la siguiente manera (diligenciar la tabla con sus datos) PERFIL PROFESIONAL Hoja de Vida RAUL MONROY PAMPLONA C.C DE BOGOTA BOGOTA 13 DE SEPTIEMBRE DE 1951 CRA 19 No 61 A 24 SUR TELEFONOS doceoncedos@gmail.com Profesional en matemática, física e informática 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 fácil interpretación de las políticas organizacionales.

5 Nombre y Apellidos Otros Datos Raúl Genero Masculino Monroy Pamplona Edad 40 años Estudios realizados Superiores Referencia Familiar María Camila Monroy Referencia Laboral Uno Colegio Pablo de Tarso Correo doceoncedos@gmail.com Referencia Personal Mónica Flórez Referencia Laboral Dos Colegio Marsella IED Colegio xxxxx Colegio Pablo de Tarso IED Estas líneas son de 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 hipervínculos se deben redirecciones con las páginas del los colegios Pablo de Tarso y xxxxxx, no olvide aplicar buenos atributos a cada etiqueta empleada, es decir, Sorpréndanme!! 4. Este trabajo lo debe realizar cada uno y con sus datos. 5. SOLICITE LA REVISIÓN DEL DOCENTE.