Actividad 3 HTML

8/18/2019 Actividad 3 HTML

http://slidepdf.com/reader/full/actividad-3-html 1/5

COLEGIO PABLO DE TARSO IED“CONSTRUCCION DE PROYECTOS DE VIDA PRODUCTIVOS”

HTML - PRÁCTICAS DOC RAUL MONROY PAMPLONA

PRÁCTICA TRES DE HTML

Enlaces: La característica principal de una página Web es que podemos incluirHiperenlaces. Un Hiperenlace es un elemento de la página que hace que elnavegador 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 quese encuentre dentro de los límites de esta etiqueta será sensible, esto quiere decirque si pulsamos con el ratón sobre él, se realzará la función de hiperenlace indicadapor la etiqueta <a></a>.

Si el Hiperenlace está indicado por un texto, este aparecerá subrayado y en distintocolor, si se trata de una imagen, esta aparecerá con un borde rodeándola. Estaetiqueta tiene el parámetro href que indica el lugar a donde nos llevará elHiperenlace si lo pulsamos.Lo mismo podríamos hacer con un gráfico. Para buscar en Internet:

<a href="http://www.yahoo.com/" > <img src="yahoo.gif" ></a>

Para buscar en Internet:

Pulsando sobre la imagen se accedería a la página situada enhttp://www.yahoo.com/.

Un Hiperenlace también puede llevarnos a una zona de nuestra página. Para ellodebemos marcar en nuestra página las diferentes secciones en las que se divide. Loharemos 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ónse llamará seccion1. Para hacer un enlace a esta sección dentro de nuestra páginalo 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 cosasestarán 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> señalan una celda.

http://www.yahoo.com/





La tabla se va definiendo declarando una fila y a continuación las celdas quecontiene 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

Escribimos: Visualizamos

<TABLE ><TR>

<TD>1 </TD> <TD> 2</TD>

</TR> <TR>

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

1 2

3 4

El resultado no es muy brillante, pero vamos a ir viendo las distintas posibilidadesque 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 indicanada carece de bordeWIDTH="5" o WIDTH="50%". Es el ancho de la tabla, puede especificarse en valorabsoluto (5 píxels) o como un porcentaje (50% del ancho disponible)CELLSPACING="2". Es el espacio entre las celdas, por defecto es 2CELLPADDING="5". Es el espacio entre el contenido de las celdas y el borde de lasmismas, por defecto es 1





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

Otro ejemplo


<TABLE BORDER="3" CELLSPACING="5"WIDTH="150">

<TR><TD>1 </TD> <TD> 2 </TD>

</TR> <TR><TD>3 </TD> <TD> 4</TD>

</TR></TABLE>

1 2

3 4

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 centroVALIGN="top" , "middle" o "bottom". Alinea el contenido verticalmente arriba, enmedio o abajo

BGCOLOR="#AACCEE". Pone un fondo del color especificado a la celda o filaCOLSPAN=3. Especifica el número de columnas que abarca la filaROWSPAN=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 contenidocon 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></TR>

Este es el título

Esta es lacelda de la1ª fila y de

la 1ªcolumna

Esta es dela 1ª fila yde la 2ªcolumna

Esto estácon un

Y estotambién





<TR BGCOLOR="#6D8FFF><TD>Esto está con un fondo azul</TD>

<TD align="right" valign="bottom">Y estotambién</TD></TR></TABLE>

fondo azul

Como ves, se pueden ir modificando los comandos básicos para obtener la tablaque deseemos.

Es frecuente no escribir las etiquetas de cierre de fila y celda, los navegadorespresentan 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)

oja de Vida

RAUL MONROY PAMPLONAC.C. 22512711 DE BOGOTA

BOGOTA 13 DE SEPTIEMBRE DE 1951

CRA 19 No 61 A 24 SUR

TELEFONOS 7231465 3171236547

e-mail [email protected]

PERFIL PROFESIONAL

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.

Nombre y Apellidos Otros Datos

Raúl Genero Masculino

Monroy Pamplona Edad 40 años





Estudios realizados Correo

Superiores [email protected]

Referencia Familiar Referencia Personal

María Camila Monroy Mónica Flórez

Referencia Laboral Uno Referencia Laboral Dos

Colegio Pablo de Tarso Colegio Marsella 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.

Colegio xxxxx Colegio Pablo de Tarso IED

http://c/Users/FAMILIA/Desktop/




Actividad 3 HTML

Documents

Transcript of Actividad 3 HTML