<html>
<head><title></title></head>
<script>
document.write(“<center>Karen Villamizar </center>”)
document.write(” <hr>”)
document.write(“<centerfont color=’blue’>15</font> </center> “)
document.write(“<hr)
document.write(“<marqueehavior=’alternate’ width=’60%’>Divino amor</marquee>”)
</script>
<body>
</body>
</html>
RECOMENDACIONES:
1.Abrir y cerrar la etiqueta script.
<script>
</script>
2.Todo en minúscula siempre.
3.El primer archivo siempre se debe llamar index.
martes, 20 de septiembre de 2016
martes, 6 de septiembre de 2016
INDUCCIÓN A JAVASCRIPT.(CLASE N°26)
Este día se hizo la entrega de las definitivas del tercer bimestre y tuvimos la explicación por parte del docente de los temas a ver el cuarto bimestre.
FORMAS DE USAR JAVASCRIPT EN DOCUMENTOS HTML
La primera forma de usar JavaScript dentro de una página web es embebiendo directamente el código JavaScript dentro del código HTML. Vamos a poner un ejemplo de código JavaScript pero no vamos a entrar en detalle a comentarlo ni explicarlo ya que en este curso no vamos a explicar JavaScript. Simplemente queremos saber interpretar por qué dentro de un documento HTML pueden aparecer fragmentos de código escrito en otro lenguaje.
Ejemplo:
<html>
<head>
<title>Embeber JavaScript – aprenderaprogramar.com</title>
</head>
<body>
<script type="text/javascript">
document.write('Hola Mundo');
</script>
</body>
</html>
|
Como podemos observar, el código JavaScript debe ir encerrado entre las siguientes marcas:
<script type="text/javascript">
…
</script>
La segunda forma para usar JavaScript es definir JavaScript en un archivo externo. Los archivos de JavaScript son archivos de texto guardados con la extensión .js. Veamos un ejemplo: imaginemos que tenemos un archivo denominado mensaje.js con código JavaScript:
alert('Mensaje JavaScript');
|
Ahora, para incluir dicho archivo en la una página web utilizaríamos el siguiente código:
<script type="text/javascript" src="archivo.js"></script>
Este código se escribiría dentro de las etiquetas <head> y </head> del documento HTML en el que vayamos a insertarlo
<html>
<head>
<meta charset="utf-8">
<title>Embeber JavaScript – aprenderaprogramar.com</title>
<script type="text/javascript" src="archivo.js"></script>
</head>
<body>
Página web de prueba – aprenderaprogramar.com
</body>
</html>
|
NOTA: Tal y como hemos pues la ruta, el archivo.js debe estar en el mismo directorio que el fichero HTML. Si estuviera en otro directorio, habría que especificar la ruta.
Los resultados los vemos al cargar el documento html en nuestro navegador y serán similares a lo que vemos en las siguientes imágenes.
Al cargar el documento HTML se incorpora el código JavaScript desde el archivo incrustado, que da lugar a que se muestre una ventana con el aviso “Mensaje JavaScript”. Cuando pulsemos sobre el botón aceptar, veremos el contenido del documento HTML:
Los ejemplos anteriores son muy simples, pero usando JavaScript avanzado podemos crear funciones interactivas en nuestra página web, como por ejemplo una calculadora.
En el ejemplo que hemos puesto, gracias a JavaScript el usuario podría introducir un peso (weight), los kilates (karats) y al pulsar el botón = obtener el valor. Con JavaScript se pueden realizar numerosas funciones que no se pueden realizar con HTML.
Otro lenguaje que se relaciona con HTML es PHP, si bien PHP no se ejecuta en nuestro ordenador sino en el servidor.
RESUMEN
Los documentos HTML permiten incrustar fragmentos de código JavaScript, bien dentro del propio archivo HTML o bien realizando una carga de ese código indicando el archivo donde se encuentra el código JavaScript. Dentro de un documento HTML puede haber ninguno, uno o varios scripts de JavaScript. El uso de JavaScript es muy habitual en la programación web. En este curso no entramos a explicar el lenguaje de programación JavaScript, pero hemos considerado adecuado dejar indicado que JavaScript es un lenguaje que la mayor parte de los programadores web conocen porque permite hacer muchas cosas que no se pueden hacer con HTML. Si quieres profundizar en la programación web te recomendamos que después del curso de HTML realices los cursos de CSS y JavaScript de aprenderaprogramar.com.
TOMADO DE: http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=590:ique-es-y-para-que-sirve-javascript-embeber-javascript-en-html-ejercicio-ejemplo-basico-cu00731b&catid=69:tutorial-basico-programador-web-html-desde-cero&Itemid=192
martes, 30 de agosto de 2016
ACUMULATIVO TERCER PERIODO.(CLASE N°25)
Este día fue la fecha del acumulativo,hubo exentos y para los estudiantes que no lo estuvieron tuvieron que presentar un trabajo basado en el proyecto realizado el día Lunes 29 de Agosto.
PROYECTO
PROYECTO
<html>
<head>
<title>proyecto</title>
<head>
<title>proyecto</title>
alert(“Proyecto de Karen Capataz y Karen Villamizar”);
</head>
<body>
<table border=”0″ width=”100%”>
<body>
<table border=”0″ width=”100%”>
<tr>
<td align=”left”> <img src=”imagenes/comexlogotipo.jpeg” width=”10%”> </td>
</tr>
<td align=”left”> <img src=”imagenes/comexlogotipo.jpeg” width=”10%”> </td>
</tr>
<tr>
<td align=”center” valign=”middle”><img src=”imagenes/2.jpg” width=”80%”> </td>
</tr>
</table>
<td align=”center” valign=”middle”><img src=”imagenes/2.jpg” width=”80%”> </td>
</tr>
</table>
<br><br>
<table align=”center” valign=”middle” border=”0″ width=”70%”>
<table align=”center” valign=”middle” border=”0″ width=”70%”>
<tr>
<td align=”left”><img src=”imagenes/01.jpg” width=”40%” > </td>
<td align=”left”><img src=”imagenes/02.jpg” width=”40%”>
<td align=”left”><img src=”imagenes/03.jpg” width=”40%”> </td>
</tr>
<tr>
<td align=”left”><font color=”#A8A8A8″>Kontextura M</font></td> </td>
<td align=”left”><font color=”#A8A8A8″>Kontextura R</font> </td>
<td align=”left”><font color=”#A8A8A8″>Kontextura SG</font></td>
</tr>
<tr>
<td align=”left”>Ideal para crear acabados texturizados con <br>grano medio,dejando la superficie rallada</td>
<td align=”left”>Ideal para crear acabados texturizados con<br> grano grueso, obteniendo texturas profundas y<br> pronunciadas.</td>
<td align=”left”>Ideal para eliminar texturas antiguas, obteniendo<br> acabados sin grano. Versatilidad para crear<br> texturas discretas. </td>
</tr>
<td align=”left”><img src=”imagenes/01.jpg” width=”40%” > </td>
<td align=”left”><img src=”imagenes/02.jpg” width=”40%”>
<td align=”left”><img src=”imagenes/03.jpg” width=”40%”> </td>
</tr>
<tr>
<td align=”left”><font color=”#A8A8A8″>Kontextura M</font></td> </td>
<td align=”left”><font color=”#A8A8A8″>Kontextura R</font> </td>
<td align=”left”><font color=”#A8A8A8″>Kontextura SG</font></td>
</tr>
<tr>
<td align=”left”>Ideal para crear acabados texturizados con <br>grano medio,dejando la superficie rallada</td>
<td align=”left”>Ideal para crear acabados texturizados con<br> grano grueso, obteniendo texturas profundas y<br> pronunciadas.</td>
<td align=”left”>Ideal para eliminar texturas antiguas, obteniendo<br> acabados sin grano. Versatilidad para crear<br> texturas discretas. </td>
</tr>
</table>
<br><br>
<table border=”0″ width=”70%”>
<tr>
<td title=”mirar blog”><a target=”_blank” href=https://karencapatazcom.wordpress.com//><font color=”blue”>karen julieth capataz castillo</font></a> </td>
<tr>
<td title=”mirar blog”><a target=”_blank” href=https://karencapatazcom.wordpress.com//><font color=”blue”>karen julieth capataz castillo</font></a> </td>
</tr>
<tr>
<td title=”mirar blog”><a target=”_blank” href=”http://karenvillamizarcoinsda.blogspot.com.co/”><font color=”blue”>karen lizeth villamizar martinez</font></a></td>
</tr>
</table>
</body >
</html>
<tr>
<td title=”mirar blog”><a target=”_blank” href=”http://karenvillamizarcoinsda.blogspot.com.co/”><font color=”blue”>karen lizeth villamizar martinez</font></a></td>
</tr>
</table>
</body >
</html>
martes, 23 de agosto de 2016
PRACTICA PARA EL PROYECTO(CLASE N°24)
CLASE 24: PRACTICA PARA PROYECTO
<html>
<head>
<title></title>
</head>
<body background=”elladrillo.jpeg”>
<table bgcolor=”gray” border=”1″ width=”100%”>
<tr>
<td colspan=”7″><br></td>
</tr>
<tr>
<td rowspan=”7″ colspan=”6″ align=”right”><img src=”1.png”></td>
</tr>
<tr>
<td bgcolor=”orange” align=”center” ><font color=”white”> incio</font></td>
<td bgcolor=”orange” align=”center” ><font color=”white”> Resena historica</font></td>
<td bgcolor=”orange” align=”center”><font color=”white”> mision-vision</font></td>
<td bgcolor=”orange” align=”center”><font color=”white”>Zona de recreacion familia Ergo </font></td>
<td bgcolor=”orange” align=”center”><font color=”white”> contacto</font></td>
</tr>
<tr>
<td colspan=”7″><hr></td>
</tr>
<tr>
<td align=”center”> Tipos de ladrillo</td>
<td align=”center”>Proceso de seleccion de mezcla </td>
<td colspan=”2″ align=”center”>Proceso de prodcuccion de Extendido </td>
<td align=”center”> Proceso de encasille y secado</td>
</tr>
<tr>
<td align=”center” colspan=”2″>Proceso de carge del horno(Endage)</td>
<td align=”center”>Proceso de quema</td>
<td align=”center”>Proceso de deshorne</td>
<td align=”center”> Proceso en cargue de camiones</td>
</tr>
<tr>
<td colspan=”7″><hr></td>
</tr>
<tr>
<td colspan=”7″><br></td>
</tr>
<tr>
<td align=”right” colspan=”20″ bgcolor=”orange” > Telefax;+57(7) 6348892 6307137: Bucaramanga </td>
</tr>
<tr>
<td colspan=”20″ bgcolor=”black” align=”left”><br></td>
</tr>
</table>
<center><img src=”http://www.ladrilleraergo.com/img/0174/843.jpg?sitetimestamp=635966731610000000.jpg”></center>
<br><br><br><br><br><br>
<h1 align=”center” ><font color=”white”><strong> Construyendo un Futuro Seguro.</strong> </font></h1>
<br><br>
<table border=”1″>
<tr>
<td bgcolor=”orange”><center><font color=”white”>Fabricacion de Ladrillos H7-H10-H12-H15-H10 1/2 y Tejas.</font></center></td>
</tr>
</table>
<table>
<tr>
<td><img src=”2.jpg” width=”70%”> </td>
<td><font color=”white”><h2> Tipos de ladrillos </h2></font> <br><font color=”orange”> <p> Nuestros ladrillos son fabricados con el mejor tipo de arcilla de la region de Giron, Santander-Colombia, debido a su gran resistencia les ofrecemos nuestros mejores productos de calidad.</p></font> </td>
<td><img src= “3.jpg” width=”70%”></td>
<td> <font color=”white”><h2> Mezcla</h2></font> <font color=”orange”><p> Despues del proceso de meteorizacion de las arcillas, estas son acarreadas hasta las tolvas donde son transportadas por un sistema de bandas y laminadores</font> </p></td>
</tr>
</table>
</body>
</html>
Publicado el 23 de Agosto del 2016
Practica para el proyecto a realizar el Lunes 29 de Agosto en el horario de 3 a 4 pm
SIMULAR LA SIGUIENTE PAGINA :http://www.ladrilleraergo.com/
<html>
<head>
<title></title>
</head>
<body background=”elladrillo.jpeg”>
<table bgcolor=”gray” border=”1″ width=”100%”>
<head>
<title></title>
</head>
<body background=”elladrillo.jpeg”>
<table bgcolor=”gray” border=”1″ width=”100%”>
<tr>
<td colspan=”7″><br></td>
</tr>
<td colspan=”7″><br></td>
</tr>
<tr>
<td rowspan=”7″ colspan=”6″ align=”right”><img src=”1.png”></td>
</tr>
<td rowspan=”7″ colspan=”6″ align=”right”><img src=”1.png”></td>
</tr>
<tr>
<td bgcolor=”orange” align=”center” ><font color=”white”> incio</font></td>
<td bgcolor=”orange” align=”center” ><font color=”white”> Resena historica</font></td>
<td bgcolor=”orange” align=”center”><font color=”white”> mision-vision</font></td>
<td bgcolor=”orange” align=”center”><font color=”white”>Zona de recreacion familia Ergo </font></td>
<td bgcolor=”orange” align=”center”><font color=”white”> contacto</font></td>
</tr>
<tr>
<td bgcolor=”orange” align=”center” ><font color=”white”> incio</font></td>
<td bgcolor=”orange” align=”center” ><font color=”white”> Resena historica</font></td>
<td bgcolor=”orange” align=”center”><font color=”white”> mision-vision</font></td>
<td bgcolor=”orange” align=”center”><font color=”white”>Zona de recreacion familia Ergo </font></td>
<td bgcolor=”orange” align=”center”><font color=”white”> contacto</font></td>
</tr>
<tr>
<td colspan=”7″><hr></td>
</tr>
<tr>
<td align=”center”> Tipos de ladrillo</td>
<td align=”center”>Proceso de seleccion de mezcla </td>
<td colspan=”2″ align=”center”>Proceso de prodcuccion de Extendido </td>
<td align=”center”> Proceso de encasille y secado</td>
</tr>
<tr>
<td align=”center” colspan=”2″>Proceso de carge del horno(Endage)</td>
<td align=”center”>Proceso de quema</td>
<td align=”center”>Proceso de deshorne</td>
<td align=”center”> Proceso en cargue de camiones</td>
</tr>
<tr>
<td colspan=”7″><hr></td>
</tr>
<tr>
<td align=”center”> Tipos de ladrillo</td>
<td align=”center”>Proceso de seleccion de mezcla </td>
<td colspan=”2″ align=”center”>Proceso de prodcuccion de Extendido </td>
<td align=”center”> Proceso de encasille y secado</td>
</tr>
<tr>
<td align=”center” colspan=”2″>Proceso de carge del horno(Endage)</td>
<td align=”center”>Proceso de quema</td>
<td align=”center”>Proceso de deshorne</td>
<td align=”center”> Proceso en cargue de camiones</td>
</tr>
<tr>
<td colspan=”7″><hr></td>
</tr>
<tr>
<td colspan=”7″><br></td>
</tr>
<tr>
<td align=”right” colspan=”20″ bgcolor=”orange” > Telefax;+57(7) 6348892 6307137: Bucaramanga </td>
</tr>
<tr>
<td colspan=”20″ bgcolor=”black” align=”left”><br></td>
</tr>
</table>
<center><img src=”http://www.ladrilleraergo.com/img/0174/843.jpg?sitetimestamp=635966731610000000.jpg”></center>
<br><br><br><br><br><br>
<h1 align=”center” ><font color=”white”><strong> Construyendo un Futuro Seguro.</strong> </font></h1>
<br><br>
<table border=”1″>
<tr>
<td bgcolor=”orange”><center><font color=”white”>Fabricacion de Ladrillos H7-H10-H12-H15-H10 1/2 y Tejas.</font></center></td>
</tr>
</table>
<td colspan=”7″><br></td>
</tr>
<tr>
<td align=”right” colspan=”20″ bgcolor=”orange” > Telefax;+57(7) 6348892 6307137: Bucaramanga </td>
</tr>
<tr>
<td colspan=”20″ bgcolor=”black” align=”left”><br></td>
</tr>
</table>
<center><img src=”http://www.ladrilleraergo.com/img/0174/843.jpg?sitetimestamp=635966731610000000.jpg”></center>
<br><br><br><br><br><br>
<h1 align=”center” ><font color=”white”><strong> Construyendo un Futuro Seguro.</strong> </font></h1>
<br><br>
<table border=”1″>
<tr>
<td bgcolor=”orange”><center><font color=”white”>Fabricacion de Ladrillos H7-H10-H12-H15-H10 1/2 y Tejas.</font></center></td>
</tr>
</table>
<table>
<tr>
<td><img src=”2.jpg” width=”70%”> </td>
<td><font color=”white”><h2> Tipos de ladrillos </h2></font> <br><font color=”orange”> <p> Nuestros ladrillos son fabricados con el mejor tipo de arcilla de la region de Giron, Santander-Colombia, debido a su gran resistencia les ofrecemos nuestros mejores productos de calidad.</p></font> </td>
<td><img src= “3.jpg” width=”70%”></td>
<td> <font color=”white”><h2> Mezcla</h2></font> <font color=”orange”><p> Despues del proceso de meteorizacion de las arcillas, estas son acarreadas hasta las tolvas donde son transportadas por un sistema de bandas y laminadores</font> </p></td>
</tr>
<td><img src=”2.jpg” width=”70%”> </td>
<td><font color=”white”><h2> Tipos de ladrillos </h2></font> <br><font color=”orange”> <p> Nuestros ladrillos son fabricados con el mejor tipo de arcilla de la region de Giron, Santander-Colombia, debido a su gran resistencia les ofrecemos nuestros mejores productos de calidad.</p></font> </td>
<td><img src= “3.jpg” width=”70%”></td>
<td> <font color=”white”><h2> Mezcla</h2></font> <font color=”orange”><p> Despues del proceso de meteorizacion de las arcillas, estas son acarreadas hasta las tolvas donde son transportadas por un sistema de bandas y laminadores</font> </p></td>
</tr>
</table>
</body>
</html>
</body>
</html>
martes, 16 de agosto de 2016
SALIDA 9B. ANCLAS.
Este día no tuvimos clase porque teníamos una salida programada a un evento de la UIS.
Sirve para definir posiciones dentro de un documento y se puede usar como destino de hiperenlaces.
Para crear un ancla (anchor) se procede de la siguiente manera:
<A NAME="nombre_etiqueta">Texto del elemento ancla</A>
Visualmente est elemento no tiene niun efecto, pero si lo tiene en forma interactiva con el usuario.
Para hacer referencia al ancla o posición se hace el siguiente tipo de hiperenlace:
<A HREF="#nombre_etiqueta">Texto del hiperenlace</A>
De esta manera accederemos a la posición donde hayamos puesto el ancla
Por ejemplo al final de este documento hemos puesto la siguiente ancla:
<a name="final">Este es el final del documento!!</a>
Y para acceder a esa posición usamos el siguiente hipernlace:
<A HREF="#final">Vamos al final del documento</A>
Que se vería así:
Vamos al final del documento (clicklea el hiperenlace para ver lo que sucede!!)
usando #nombre_etiqueta estamos asumiendo que el ancla esta en el documento actual, o sea estamos usando un ruta relativa al documento.
Si queremos acceder a un ancla desde fuera del documento, usamos un enlace más completo donde se incluye el nombre del documento donde se encuentra el ancla:
<A HREF="anclas.php#final">Vamos al final del documento</A>
En nuestro caso este documento se llama anclas.php. El nombre del docuemnto se coloca siempre antes del signo gato (#).
La anclas son muy buenas por ejemplo para presentar un listado inicial, y cada elemento del listado se desarrolla a lo largo del documento, pudiendo enlazar con anclas las diferentes posiciones del documento donde se desarrolla cada elemento del listado incial.
Haciendo click vuelve a lo que te faltaría por leer
Este es el final del documento!!
TOMADO DE:http://www.bufoland.cl/cursoweb/html/anclas.php
HTML
Anclas
Para crear un ancla (anchor) se procede de la siguiente manera:
<A NAME="nombre_etiqueta">Texto del elemento ancla</A>
Visualmente est elemento no tiene niun efecto, pero si lo tiene en forma interactiva con el usuario.
Para hacer referencia al ancla o posición se hace el siguiente tipo de hiperenlace:
<A HREF="#nombre_etiqueta">Texto del hiperenlace</A>
De esta manera accederemos a la posición donde hayamos puesto el ancla
Por ejemplo al final de este documento hemos puesto la siguiente ancla:
<a name="final">Este es el final del documento!!</a>
Y para acceder a esa posición usamos el siguiente hipernlace:
<A HREF="#final">Vamos al final del documento</A>
Que se vería así:
Vamos al final del documento (clicklea el hiperenlace para ver lo que sucede!!)
usando #nombre_etiqueta estamos asumiendo que el ancla esta en el documento actual, o sea estamos usando un ruta relativa al documento.
Si queremos acceder a un ancla desde fuera del documento, usamos un enlace más completo donde se incluye el nombre del documento donde se encuentra el ancla:
<A HREF="anclas.php#final">Vamos al final del documento</A>
En nuestro caso este documento se llama anclas.php. El nombre del docuemnto se coloca siempre antes del signo gato (#).
La anclas son muy buenas por ejemplo para presentar un listado inicial, y cada elemento del listado se desarrolla a lo largo del documento, pudiendo enlazar con anclas las diferentes posiciones del documento donde se desarrolla cada elemento del listado incial.
Haciendo click vuelve a lo que te faltaría por leer
Este es el final del documento!!
TOMADO DE:http://www.bufoland.cl/cursoweb/html/anclas.php
martes, 9 de agosto de 2016
EJERCICIOS PARA PRACTICAR. (CLASE N°23)
EJERCICIO N°1:
<html>
<head>
<title></title>
</head>
<body>
<table width=”80%” height=35 border=”1″ >
<center>
<tr>
<td width=”16%” align=”center” valign=”middle” colspan=”2″ rowspan=”3″><br><marquee behavior=”alternate”><font color=”blue”><s>Periodo III</s><strong>Ejercicio </strong><u>del bimestre</u></font><font color=”red”>2016 <br></font></marquee> </td>
<td align=”center” valign=”center” bgcolor=”gray”><br>A<br></td>
<td align=”center” valign=”center”><br>B<br></td>
<td width=”8%” align=”center” valign=”center”><br> C<br></td>
<td width=”8%” bgcolor=”blue”align=”center”valign=”center”><br>D<br></td>
<td width=”16%” bgcolor=”orange” align=”center” valign=”center”><br><hr width=”80%”><br></td>
</tr>
<head>
<title></title>
</head>
<body>
<table width=”80%” height=35 border=”1″ >
<center>
<tr>
<td width=”16%” align=”center” valign=”middle” colspan=”2″ rowspan=”3″><br><marquee behavior=”alternate”><font color=”blue”><s>Periodo III</s><strong>Ejercicio </strong><u>del bimestre</u></font><font color=”red”>2016 <br></font></marquee> </td>
<td align=”center” valign=”center” bgcolor=”gray”><br>A<br></td>
<td align=”center” valign=”center”><br>B<br></td>
<td width=”8%” align=”center” valign=”center”><br> C<br></td>
<td width=”8%” bgcolor=”blue”align=”center”valign=”center”><br>D<br></td>
<td width=”16%” bgcolor=”orange” align=”center” valign=”center”><br><hr width=”80%”><br></td>
</tr>
<tr>
<td align=”center” valign=”center” width=”13%”><br>E<br> </td>
<td align=”center” valign=”center” bgcolor=”gray”><br> F<br></td>
<td align=”center” valign=”center” bgcolor=”blue”> <br>G<br></td>
<td align=”center” valign=”center”> <br>H<br></td>
<td align=”center” valign=”center”><br>I <br></td>
</tr>
<td align=”center” valign=”center” width=”13%”><br>E<br> </td>
<td align=”center” valign=”center” bgcolor=”gray”><br> F<br></td>
<td align=”center” valign=”center” bgcolor=”blue”> <br>G<br></td>
<td align=”center” valign=”center”> <br>H<br></td>
<td align=”center” valign=”center”><br>I <br></td>
</tr>
<tr>
<td align=”center” valign=”center” width=”13%”><br>J<br> </td>
<td align=”center” valign=”center” Bgcolor=”blue”> <br>K<br></td>
<td align=”center” valign=”center” bgcolor=”gray”><br> L<br></td>
<td align=”center” valign=”center”><br>M<br> </td>
<td width=”16%” align=”center” valign=”center” bgcolor=”orange”><br><hr width=”80%”><br></td>
</tr>
<td align=”center” valign=”center” width=”13%”><br>J<br> </td>
<td align=”center” valign=”center” Bgcolor=”blue”> <br>K<br></td>
<td align=”center” valign=”center” bgcolor=”gray”><br> L<br></td>
<td align=”center” valign=”center”><br>M<br> </td>
<td width=”16%” align=”center” valign=”center” bgcolor=”orange”><br><hr width=”80%”><br></td>
</tr>
<tr>
<td align=”center” valign=”center” width=”5%”><br>N <br></td>
<td align=”center” valign=”center” width=”11%” ><br>O<br></td>
<td align=”center” valign=”center” bgcolor=”blue”><br>P <br></td>
<td align=”center” valign=”center”><br>Q<br> </td>
<td align=”center” valign=”center”><br>R<br> </td>
<td align=”middle” valign=”middler”bgcolor=”gray”><br> S<br></td>
<td align=”center” valign=”center”><br>T<br> </td>
</tr>
<td align=”center” valign=”center” width=”5%”><br>N <br></td>
<td align=”center” valign=”center” width=”11%” ><br>O<br></td>
<td align=”center” valign=”center” bgcolor=”blue”><br>P <br></td>
<td align=”center” valign=”center”><br>Q<br> </td>
<td align=”center” valign=”center”><br>R<br> </td>
<td align=”middle” valign=”middler”bgcolor=”gray”><br> S<br></td>
<td align=”center” valign=”center”><br>T<br> </td>
</tr>
<tr>
<td width=”7%” colspan=”2″ rowspan=”3″><marquee direction=”left”><img src=”caminar2.gif”></marquee></td>
<td align=”center” valign=”center”><br>U<br> </td>
<td align=”center” valign=”center”><br>V<br> </td>
<td width=40 colspan=”3″ rowspan=”3″> <marquee direction=”right”><img src=”caminar1.gif”></marquee></td>
<td width=”7%” colspan=”2″ rowspan=”3″><marquee direction=”left”><img src=”caminar2.gif”></marquee></td>
<td align=”center” valign=”center”><br>U<br> </td>
<td align=”center” valign=”center”><br>V<br> </td>
<td width=40 colspan=”3″ rowspan=”3″> <marquee direction=”right”><img src=”caminar1.gif”></marquee></td>
</tr>
<tr width=”7%%”>
<td align=”center” valign=”center”><br>W<br> </td>
<td align=”center” valign=”center”><br>X<br> </td>
<
</tr>
<td align=”center” valign=”center”><br>W<br> </td>
<td align=”center” valign=”center”><br>X<br> </td>
<
</tr>
<tr>
<td align=”center” valign=”center”width=”16%”><marquee direction=”up”> <img src=”fecha1.png”></marquee> </td>
<td align=”center” valign=”center” width=”16%”><marquee direction=”down”><img src=”fecha2.png” ></marquee></td>
</tr>
</center>
</table>
</body>
</html>
<td align=”center” valign=”center”width=”16%”><marquee direction=”up”> <img src=”fecha1.png”></marquee> </td>
<td align=”center” valign=”center” width=”16%”><marquee direction=”down”><img src=”fecha2.png” ></marquee></td>
</tr>
</center>
</table>
</body>
</html>
martes, 2 de agosto de 2016
TABLAS EN HTML.(CLASE N°22)
En esta clase nos dirigimos a sala de informática ahí el docente explico: TABLAS EN HTML.
Gráficamente:
TOMADO DE: http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=516:crear-tablas-html-colspan-y-rowspan-unir-celdas-horizontal-y-vertical-tr-td-th-caption-o-titulo-cu00719b&catid=69:tutorial-basico-programador-web-html-desde-cero&Itemid=192
CREACIÓN DE TABLAS EN HTML
En HTML, una poderosa herramienta a la hora de mostrar cierto tipo de información son las tablas. Hay muchos sitios que por su naturaleza no usan tablas aunque existen algunas ocasiones en que el papel de las tablas se vuelve esencial.
El fin de las tablas es preferentemente contener datos ordenados en celdas (filas y columnas). En principio, no deben ser usadas para crear divisiones de cara a mostrar una página web, es decir, es preferible que una página web no esté dividida en distintos espacios usando tablas. Para maquetar una página web y dividirla en distintos espacios se usarán otras herramientas (capas, elementos flotantes, etc.).
Las tablas pueden ser consideradas como un grupo de filas donde cada una de ellas contiene un grupo de celdas. Una tabla puede ser insertada en un documento HTML usando tres elementos básicos: el elemento TABLE (estructura contenedora principal), el elemento TR (contenedor de fila) y el elemento TD (celda).
Cuando el contenido de una celda debe ser vacío, deberías usar una espacio en blanco (que en HTML se escribe como ) como su contenido. Esto hará que tu página se visualice correctamente, ya que algunos navegadores tienen problemas representando celdas vacías. Ejemplo: <td> </td>
Veamos un ejemplo. Crea un archivo ejemplo.html con este código y visualízalo:
<!DOCTYPE html>
<html> <head> <title>Ejemplo del uso de tablas - aprenderaprogramar.com</title> </head> <body> <table border="2px"> <!-- Lo cambiaremos por CSS --> <tr> <td>Celda 1</td> <td>Celda 2</td> <td>Celda 3</td> </tr> <tr> <td>Celda 4</td> <td>Celda 5</td> <td>Celda 6</td> </tr> </table> </body> </html> |
Ten en cuenta que el atributo border está deprecated o not supported por las versiones más recientes de HTML. Más adelante veremos cómo reemplazarlo usando técnicas CSS.
UNIFICACIÓN DE CELDAS
En algunas ocasiones, puede ser necesario unificar dos o más celdas en una sola que pasará a ocupar el lugar de aquellas afectadas. Estas unificaciones pueden ser llevadas a cabo con los atributos “rowspan” (para unificación vertical) y “colspan” (para unificación horizontal).
UNIFICACIÓN HORIZONTAL CON COLSPAN
Como hemos comentado con anterioridad, para la unificación horizontal de celdas, utilizaremos el atributo de celda “colspan”. Crea un archivo ejemplo.html con este código y visualízalo. Recuerda que el atributo border está deprecated o not supported y que más adelante veremos como reemplazarlo mediante el uso de CSS:
<!DOCTYPE html>
<html> <head> <title>Ejemplo del uso de tablas - aprenderaprogramar.com</title> </head> <body> <table border="2px"> <!-- Lo cambiaremos por CSS --> <tr> <td>Campo 1</td> <td>Campo 2</td> <td>Campo 3</td> </tr> <tr> <td colspan="2">Campos 4 y 5</td> <td>Campo 6</td> </tr> <tr> <td>Campo 7</td> <td>Campo 8</td> <td>Campo 9</td> </tr> </table> </body> </html> |
Gráficamente:
UNIFICACIÓN VERTICAL CON ROWSPAN
En este caso, para la unificación vertical de celdas, utilizaremos el atributo de celda “rowspan”. Crea un archivo ejemplo.html con este código y visualízalo (recuerda que el atributo border está deprecated o not supported y que más adelante veremos como reemplazarlo mediante el uso de CSS):
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ejemplo del uso de tablas- aprenderaprogramar.com</title> </head> <body> <table border="2px"> <!-- Lo cambiaremos por CSS --> <tr> <td rowspan="3">Campo unificado</td> <td>Campo 2</td> <td>Campo 3</td> </tr> <tr> <td>Campo 5</td> <td>Campo 6</td> </tr> <tr> <td>Campo 8</td> <td>Campo 9</td> </tr> </table> </body> </html> |
Gráficamente:
CELDAS DE ENCABEZADO
Hay dos tipos de celdas que pueden ser definidas en una tabla HTML. Una de ellas es la celda simple (elemento TD), ya definido anteriormente, y la otra es un tipo especial de celda (elemento TH ó table header, cabecera de tabla) que contiene información de encabezado para un conjunto de celdas específicas.
Los navegadores representan normalmente el contenido de las celdas especiales como texto centrado y en negrita, atributos que también pueden ser visualmente logrados con la utilización de celdas normales (elemento TD). Entonces, ¿para que son útiles estos encabezados? Cuando utilizamos th la celda queda definida como encabezado, no sólo tiene el aspecto de un encabezado. Por poner un símil, no es lo mismo vestirse de policía sin serlo, que ser policía. No es lo mismo una celda que parece un encabezado sin estar definida como tal, que una celda definida realmente como encabezado. Los navegadores para personas invidentes identifican este tipo de encabezados y le dan un tratamiento especial. Además algunos motores de búsqueda (bing, google, yahoo) dan un tratamiento distinto a este tipo de celdas, y algunos navegadores crean efectos especiales para este tipo de celdas. Finalmente, disponer de encabezados nos permitirá crear tablas con un diseño específico para los encabezados. Escribe este código con tu editor de texto y comprueba sus resultados:
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ejemplo del uso de tablas- aprenderaprogramar.com</title> </head> <body> <table border="2px"> <!-- Lo cambiaremos por CSS --> <tr> <th>Alumno</th> <th>Asignatura</th> <th>Calificación</th> </tr> <tr> <td>Juan Pérez</td> <td>Matemáticas</td> <td>9</td> </tr> <tr> <td>Rodolfo Cárdenas</td> <td>Francés</td> <td>5</td> </tr> </table> </body> </html> |
TÍTULO DE LAS TABLAS CON EL ELEMENTO CAPTION
Mediante el elemento caption, podemos definir el título de una tabla. Este título debería describir de una manera breve y precisa el contenido y la naturaleza de la tabla y es habitualmente representado en algún lugar cercano a la tabla (su posición puede ser establecida usando CSS). El elemento caption sólo está permitido si va justo después de la apertura de la tabla. Escribe este código y comprueba el resultado.
| <!DOCTYPE html> <html> <head> <title>Ejemplo del uso de tablas - aprenderaprogramar.com</title> </head> <body> <table border="2px"> <!-- Lo cambiaremos por CSS --> <caption>Título de la tabla</caption> <tr> <td>Contenido 1</td> <td>Contenido 2</td> <td>Contenido 3</td> </tr> <tr> <td>Contenido 4</td> <td>Contenido 5</td> <td>Contenido 6</td> </tr> </table> </body> </html> |
EJERCICIO
Crea un documento con una tabla HTML que tenga la apariencia de la tabla indicada a continuación. La primera fila debe estar compuesta por elementos de encabezado de tabla (th). No te preocupes por el centrado de los textos, sino únicamente por que las subdivisiones en la tabla aparezcan correctamente.
Jefe departamento
|
Jefe sección
|
Empleado
|
Edad empleado
|
Juan Alberto Chan
|
Martín López
|
Maite Suárez
|
55
|
Luis Morales
|
Mateo Carralde
|
33
| |
Diana Rodríguez
|
Carlos Hernández
|
Alberto Fernández
|
62
|
Luis Pérez
|
Diego Gutiérrez
|
44
| |
Ejemplo realizado en clase
<html>
<head>
<title></title>
</head>
<body>
<table width=”50%” border=”1″>
<head>
<title></title>
</head>
<body>
<table width=”50%” border=”1″>
<tr>
<td colspan=”5″>1 2 3 4 5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<td colspan=”5″>1 2 3 4 5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td rowspan=”3″>11 <br> 21 <br> 31 </td>
<td>12</td>
<td>13</td>
<td colspan=”2″ rowspan=”2″>14 15 <br> 24 25</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td colspan=”2″ rowspan=”2″>20 30 </td>
</tr>
<td rowspan=”3″>11 <br> 21 <br> 31 </td>
<td>12</td>
<td>13</td>
<td colspan=”2″ rowspan=”2″>14 15 <br> 24 25</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td colspan=”2″ rowspan=”2″>20 30 </td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>26</td>
<td colspan=”2″ rowspan=”2″ >27 28 <br> 37 38</td>
<td>29</td>
</tr>
<td>22</td>
<td>23</td>
<td>26</td>
<td colspan=”2″ rowspan=”2″ >27 28 <br> 37 38</td>
<td>29</td>
</tr>
<tr>
<td>32</td>
<td>33</td>
<td colspan=”2″>34 35</td>
<td>32</td>
<td>33</td>
<td colspan=”2″>34 35</td>
<td>36</td>
<td>39</td>
<td>40</td>
</tr>
<td>39</td>
<td>40</td>
</tr>
<tr>
<td>41</td>
<td colspan=”2″>42 43</td>
<td>44</td>
<td colspan=”2″>45 46</td>
<td colspan=”2″>47 48 </td>
<td colspan=”2″>49 50 </td>
</tr>
<td>41</td>
<td colspan=”2″>42 43</td>
<td>44</td>
<td colspan=”2″>45 46</td>
<td colspan=”2″>47 48 </td>
<td colspan=”2″>49 50 </td>
</tr>
</table>
</body>
</html>
</body>
</html>
Suscribirse a:
Entradas (Atom)