actividad 3 html
TRANSCRIPT
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.
8/18/2019 Actividad 3 HTML
http://slidepdf.com/reader/full/actividad-3-html 2/5
COLEGIO PABLO DE TARSO IED“CONSTRUCCION DE PROYECTOS DE VIDA PRODUCTIVOS”
HTML - PRÁCTICAS DOC RAUL MONROY PAMPLONA
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
8/18/2019 Actividad 3 HTML
http://slidepdf.com/reader/full/actividad-3-html 3/5
COLEGIO PABLO DE TARSO IED“CONSTRUCCION DE PROYECTOS DE VIDA PRODUCTIVOS”
HTML - PRÁCTICAS DOC RAUL MONROY PAMPLONA
ALIGN=" left", "right", "center". Alinea la tabla a la izquierda , derecha o en elcentro.
Otro ejemplo
Escribimos: Visualizamos
<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
Escribimos: Visualizamos
<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
8/18/2019 Actividad 3 HTML
http://slidepdf.com/reader/full/actividad-3-html 4/5
COLEGIO PABLO DE TARSO IED“CONSTRUCCION DE PROYECTOS DE VIDA PRODUCTIVOS”
HTML - PRÁCTICAS DOC RAUL MONROY PAMPLONA
<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
8/18/2019 Actividad 3 HTML
http://slidepdf.com/reader/full/actividad-3-html 5/5
COLEGIO PABLO DE TARSO IED“CONSTRUCCION DE PROYECTOS DE VIDA PRODUCTIVOS”
HTML - PRÁCTICAS DOC RAUL MONROY PAMPLONA
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