Documentos de Académico
Documentos de Profesional
Documentos de Cultura
16
#! /bin/bash
clear
echo
read op
suma(){
read a
read b
s=$((a+b))
resta(){
read a
read b
r=$((a-b))
producto(){
read a
p=$((a*b))
division(){
read a
read b
d=$((a/b))
resto(){
read a
read b
re=$((a%b))
mayor(){
read a
read b
if [ $a -gt $b ]
then
else
fi
salir(){
clear
exit
case $op in
1) suma;;
2) resta;;
3) producto;;
4) division;;
5) resto;;
6) mayor;;
7) salir
esac
//Ejercicios No. 17
#! /bin/bash
clear
echo
echo "* Genera los enteros hasta un numero N introducido por teclado, *"
read n
echo
i=1
while [ $i -le $n ]
do
i=$(($i+1))
done
echo
echo
// Uso de la estructura F O R
// Ejercicios No. 17
#! /bin/bash
clear
echo
echo "* Genera los enteros hasta un numero N introducido por teclado, *"
echo
i=1
while [ $i -le $n ]
do
i=$(($i+1))
done
echo
echo
Ejercicios No. 18
#!/bin/bash
clear
echo
for i in 1 2 3 4 5 6 7 8 9 10
do
echo "$i"
done
// Ejercicios No. 19
#!/bin/bash
clear
echo
echo "* genera los numeros enteros hasta un n, de forma secuencial (seq) *"
read n
do
echo "$i"
done
echo
# OTRA FORMA
# do
# echo "$i"
# done
// Esto es importante:
// Ejercicios No. 20
#!/bin/bash
clear
echo
do
done
DESAFIÓ 4:
2. Crear los archivos numero1.txt, numero2.txt, numero3.txt y numero4.txt y copiar su contenido en el archivo
/home/lasin/fcpn/matemática/números.txt.
5. Listar el contenido del directorio /home y todo su contenido además listar los archivos ocultos y toda la
información de cada uno.
6. Ingresar al directorio “informática” y crear dos directorios en un solo nivel denominados (laboratorio, cátedra),
realizarlo con una sola instrucción.
7. ¿Qué representa cada una de las columnas que vemos por pantalla al ejecutar un ls -l?
8. Listar el contenido del directorio “informática” de la siguiente manera: ls –l. Podrá observar los detalles de cada
archivo, ahora cambie los permisos de cada archivo de tal manera que queden de la siguiente manera: drwx—xr—
11. ¿Cómo puedo obtener un listado de los procesos que tengo en ejecución?.
12. Listar los archivos del directorio “fcpn” los cuales lleve una letra “i”como segunda letra del nombre y tenga
extensión “.txt”.
14. Dar permiso de ejecución y lectura a el archivo “bioquímica” (con el comando chmod)
15. Obtener cuantos archivos tiene el directorio / home/lasin/fcpn/
21. Estoy perdido en el árbol de directorios, ¿cómo vuelvo a mi HOME?(con una sola instrucción)
//Ejercicios No. 21
#! /bin/bash
clear
echo
echo "* Genera los enteros hasta un numero N introducido por teclado *"
echo "* con la estructura repetitiva F O R, sugerencia hacer correr con ./ *"
read n
echo
do
echo "$i"
done
echo
DESAFIÓ 5:
1. Realizar un proceso Shell que: despliegue un archivo con el comando cat, limpie la pantalla, muestre el usuario,
el directorio actual, la fecha. Utilizar “echo” para documentar el proceso.
2. Buscar una cadena de texto en un conjunto de archivos, y redireccionar su salida a otro archivo llamado
salida.txt.
3. Realizar un menú “Calculadora” para las operaciones: suma, resta, multiplicación, división, factorial, potencia de
un número. Aplicando funciones.
---AUX.----
Desafió 1
Desafió 2
2. Encontrar el número mayor y numero menor de tres números introducidos por teclado
Desafió 3
1. Completar la calculadora: suma, 1) resta, 2) producto, 3) división, 4) módulo, 5) el mayor de dos números, 6) salir.
2. Realizar la calculadora para: suma, 1) resta, 2) producto, 3) división, 4) módulo, 5) el mayor de dos números, 6) salir.
Utilizando funciones
2. Definición. HTML es un lenguaje que se utiliza para crear páginas web, las mismas son ejecutadas en el navegador de
internet.
El año 1986 la organización internacional de estándares publica el lenguaje de marcado generalizado estándar o SGML
(Standard Generalized Markup Language), es un estándar para definir lenguajes de marcado generalizados para
documentos ISO 8879.
HTML a lo largo del tiempo ha evolucionado en sus diferentes versiones; el estándar XHTML 1.0 incluye el 95% del
estándar HTML 4.01, y tiene algunas mejoras, las normas oficiales están escritas en un lenguaje bastante formal. El
lenguaje XHTML es muy similar al lenguaje HTML, por tanto XHTML es una adaptación de HTML al lenguaje XML.
Técnicamente, HTML es descendiente directo del lenguaje SGML, mientras que XHTML lo es del XML; que a su vez,
también es descendiente de SGML. El mismo se lo puede ver en el siguiente esquema:
El lenguaje XHTML es muy similar al lenguaje HTML, por tanto XHTML es una adaptación de HTML al lenguaje XML.
Técnicamente, HTML es descendiente directo del lenguaje SGML, mientras que XHTML lo es del XML; que a su vez,
también es descendiente de SGML. El mismo se lo puede ver en el siguiente esquema.
Un documento HTML se dividen en dos partes: la cabecera y el cuerpo del documento; en la cabecera se coloca
información del documento HTML como título, idioma, reglas necesarias para la ejecución de la página Web, etc. y el
cuerpo de la página incluye los contenidos a visualizarse en la WEB, dicho de otra forma la información que debe
contener la página web, así como texto, imagen, audio, video, etc.
<html>
<head>
</head>
<body>
Hola Mundo
</body>
</html>
Ejemplo 1:
<html>
<head>
</head>
<body>
Hola Mundo !!
</body>
</html>
Ejemplo 2:
<html>
<head>
</head>
<body>
</body>
</html>
Ejemplo 3:
<html>
<head>
</head>
<body>
</body><hr>
</html>
en Resumen:
1 creamos una pagina con el Bloc de Notas - cambiamos su extensión a html, y luego lo ejecutamos en un navegador
Ejercicio No. 1
<html>
<head>
<title>Mi Pagina</title>
</head>
<body>
</body>
</html>
--REPASO---
#! /bin/bash
clear
echo
read n
echo
a=0
b=1
echo "$a"
echo "$b"
while [ $n -gt 2 ]
do
s=$((a+b))
echo "$s"
a=$b
b=$s
n=$((n-1))
done
echo
//2
#! /bin/bash
clear
echo
read n
echo
while [ $n -gt 0 ]
do
m=$((n%10))
echo "$m"
n=$((n/10))
done
echo
///HTML
<html>
<head>
<title>Pagina1</title>
</head>
<br />
<br />
<h1><center><a href="https://www.umsa.bo/">UMSA</a></center></h1>
</body>
</html>
//3
Pero avanzamos la alineación de los h con la propiedad align que puede tener cuatro valores left que es izquierda rigth
que es derecha en este caso utilizamos center que es centrado y creo que hay justify
La etiqueta hr que es una linea horizontal con su propiedad size que es el grosor de la linea
En el body avanzamos el bgcolor para definir un color de fondo que puede estar en rgb, colores en ingles o codigo
hexadecimal como en este caso, y viene entre comillas
En el mismo body la propiedad text para definir el color del texto de la página de igual manera en hexadecimal, rgb o
colores en inglés
La etiqueta <a> </a> con su propiedad href donde pones el url de una pagina y entre las etiquetas el nombre de la
palabra para el enlace a la pagina externa
En el mismo body la propiedad link vlink y alink que es para darle color al texto entre las etiquetas a pero no recuerdo
para que casos son, de igual manera en este caso usamos codigo hexadecimal
<!--Ejercicio 2-->
<!DOCTYPE html>
<html>
<head>
<title>EJERCICIO2</title>
</head>
<body>
<p>x<sup>2</sup>+2x+r<sub>1</sub></p>
</body>
</html>
<!--Ejercicio3-->
<!DOCTYPE html>
<html>
<head>
<title>EJERCICIO3</title>
</head>
<body>
<hr>
<p>Lorem ipsum <big>dolor sit amet</big>, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.<br>
consequat. <i>Duis aute</i> irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat <u>cupidatat non</u>
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
Pagina 4:
<!DOCTYPE HTML>
<html>
<head>
<title>Pagina 2</title>
</head>
<br />
</body>
</html>
Pagina 5:
<!DOCTYPE HTML>
<html>
<head>
<title>Pagina1</title>
</head>
<h1>FORMATEADO DE TEXTO</h1>
C<sup>5</sup><sub>2</sub>
<center>Hola Mundo</center>
</body>
</html>
Página 6:
<!DOCTYPE HTML>
<html>
<head>
<title>Pagina1</title>
</head>
<font face="Times New Roman, Times, serif">Estamos en tiempos de COVID 19</font><br />
<h3><u>c) color: define el color que tendra el texto, su forma de uso es:</u><h3><br />
<p>Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Marron, Navy, Olive</p>
</body>
</html>
Pagina 7:
<html>
<head>
<title>Pagina1</title>
</head>
<body bgcolor="#00FF55" text="#550000" link="#2A00FF" vlink="#2A1FAA" alink="#FF00AA">
<font face="Times New Roman, Times, serif">Estamos en tiempos de COVID 19</font><br />
<h3><u>c) color: define el color que tendra el texto, su forma de uso es:</u><h3><br />
<p>Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Marron, Navy, Olive</p>
</body>
</html>
Pagina 8:
<html>
<head>
<title>Pagina1</title>
</head>
<body bgcolor="#00FF55">
<font face="MS Serif, New York, serif" size="5" color="#2ABF55">Hola Mundo .. !</font><br />
<p>Los colores en html se indican en el sistema hexadecimal RRGGBB (rojo, verde y azul), y luego se hacen variar
esos valores </p>
<p
</body>
</html>
Pagina 9:
<html>
<head>
<title>Pagina1</title>
</head>
<body bgcolor="#00FF55">
<p>Regla 1:Significa que las etiquetas se tienen que cerrar de acuerdo a como se abren</p>
<b />
</body>
</html>
Pagina 3:
<!DOCTYPE>
<html>
<head>
<title>Elemento Font</title>
</head>
<body>
</body>
</html>
Pagina 10 Listas:
<html>
<head>
<title>Pagina1</title>
</head>
<body bgcolor="#00FF55">
<h1><center>Listas en HTML</center></h1>
<p>El lenguaje HTML define tres tipos de listas, para agrupar elementos: </p>
<p>Trata de una coleccion simple de elementos en las que no interesa el orden; se lo define con ul(unordered list); con
el atributo type especificamos el tipo de viñeta (disk, circle, square); y para su contenido utilizamos li; ejemplo</p>
<ul type="square">
<lh>Departamento</lh>
<li>La Paz</li>
<li>Oruro</li>
<li>Santa Cruz</li>
<li>Beni</li>
<li>Pando</li>
</ul>
<p>Trata de una coleccion simple de lementos, pero los elementos estan ordenados; se lo define con la etiqueta ol
(ordered list),y sus elementos con li; se tiene el atributo start que specifica el inicio de la numeracion, si no se indica por
defecto es el 1; y con el atributo type especificamos el tipo de lista numerada.</p>
<lh>Departamento</lh>
<li>La Paz</li>
<li>Oruro</li>
<li>Santa Cruz</li>
<li>Beni</li>
<li>Pando</li>
</ol>
</body>
</html>
<p>Se utilizan para especificar una serie de terminos y sus definiciones parecidos a un diccionario. Se lo define mediante
la etiqueta dl (lista de definicion), y la etiqueta dt para la definicion de terminos; y dd para definir el termino</p>
<dl>
<dt>SGML</dt>
<dt>XHTML</dt>
<dd>..</dd>
<dt>HTML5</dt>
<dd>..</dd>
<dt>CSS</dt>
<dd>..</dd>
</dl>
Pagina 11 Enlaces:
<html>
<head>
<title>Pagina1</title>
</head>
<body bgcolor="#00FF55">
<h1>Enlaces</h1>
<p>HTML es un lenguaje de etiquetas de hipertexto, que permite interactuar con información digital de acuerdo a sus
contenidos.</p>
<p>El enlace establece relaciones entre dos recursos, estos recursos pueden ser: imagenes, archivos, etc; Un enlace
comienza con un recurso y apunta hacia otro recurso, entonces un enlace esta formado por dos extremos y un
sentido</p>
<p>En la triple www nuestras paginas residen en un ordenador llamado (host), este ordenador esta conectado a la red
de forma permanente (servidor) y pone a disposición todas sus paginas y estas pueden enlazarce con paginas de otros
hosts (enlaces externos), o tambien a nuestro propio host (enlaces internos)</p>
<ul type="square">
<li>Enlaces interno</li>
<li>Enlaces locales</li>
<li>Enlaces remotos</li>
<li>Enlaces a archivos</li>
</ul>
<h3>Elemento a</h3>
<p>Es el elemento que se utiliza para definir un enlace, y tiene las siguientes propiedades:</p>
<b>id:</b> define el identificador unico del enlace en el destino o marca de llegada<br />
<b>target:</b> permite mostrar la pagina en una ventana del navegador, definido por este atributo<br /><br />
Ejemplo:<br />
</body>
</html>
<html>
<head>
<title>Pagina1</title>
</head>
<body bgcolor="#00FF55">
<h1>sigue ..Enlaces</h1>
<h1>Elemento a</h1>
<p) Enlaces internos: las que vinculan a otras partes dentro de la misma pagina</p>
<a name="principio"></a>
<h1>TEMARIO</h1>
<a name="intro"></a>
<h4>1. Introducción</h4>
<p>
Las primeras cosas que debes saber sobre HTML: historia, objetivos y demás conocimientos donde sentar las bases del
manual.
HTML es el lenguaje con el que se escribe el contenido de las páginas web. Las páginas web pueden ser vistas por el
usuario mediante un tipo de aplicación llamada cliente web o más comúnmente "navegador". Podemos decir por lo
tanto que el HTML es el lenguaje usado por para especificar el contenido que los navegadores deben representar a la
hora de mostrar una página web.
Este lenguaje nos permite aglutinar textos, imágenes, enlaces... y combinarlos a nuestro gusto. La ventaja del HTML a la
hora de representar el contenido en un navegador, con respecto a otros formatos físicos como libros o revistas, es
justamente la posibilidad de colocar referencias a otras páginas, por medio de los enlaces hipertexto.
Un poco de historia
El lenguaje HTML se creó en 1991. Tiene una historia realmente corta pero para su poca vida ha sufrido importantes
cambios. Su padre es Tim Berners-Lee que lo diseñó con objetivos divulgativos. Inicialmente no se pensó que la web
llegaría a ser un área de ocio con carácter multimedia, de modo que, nació sin dar respuesta a todos los posibles usos
que se le iba a dar y a todos los colectivos de gente que lo utilizarían en un futuro. Sin embargo, pese a esta deficiente
planificación, si que se han ido incorporando modificaciones con el tiempo, agregando nuevas características para cubrir
las nuevas necesidades.
Como hemos dicho, los programas que leen y presentan las páginas web a los usuarios se llaman navegadores. Éstos son
los responsables de interpretar el HTML y "pintar" una página tal como ellos entiendan que deben hacer. Sin embargo,
esas reglas de representación no son subjetivas de cada fabricante del navegador, sino que existe una organización
llamada W3C que se encarga de definir el estándar que todos deben seguir a la hora de escribir e interpretar el HTML.
Estos estándares del HTML se conocen como "Especificaciones", las cuales han ido apareciendo en el tiempo. El HTML5
es el último estándar en la actualidad.
Históricamente los navegadores, además de la propia comunidad de usuarios, han sido los mayores impulsores de los
cambios ocurridos en el lenguaje. Una vez detectada la necesidad es el W3C el que crea el estándar y marca una
dirección que todos deben seguir.
El conflicto generado por los navegadores es debido a su diversidad. Existen multitud de navegadores o clientes web
presentes en el mercado los cuales muchas veces no son capaces de interpretar un mismo código de una manera
unificada. Esto obliga al desarrollador a, una vez creada su página, comprobar que esta puede ser leída
satisfactoriamente por todos los navegadores, o al menos, los más utilizados. Cuando surgen problemas de
interpretación, queda de parte del desarrollador resolver el problema tirando de técnicas o conocimientos que él
disponga.
Afortunadamente, en la actualidad las diferencias de interpretación de los navegadores con respecto a un mismo código
HTML son mínimos, pero en el pasado los desarrolladores tenían que emplear mucho tiempo en remar contracorriente
para solucionarlos. Sin embargo, quedan todavía muchos usuarios que navegan con sistemas anticuados, ya sea por falta
de interés para actualizarse, conocimientos, o por disponer ordenadores muy antiguos.
Pero no todo ha sido malo por parte de los navegadores. Ellos también son los responsables de introducir nuevas
etiquetas en el uso común del día a día, que se han ido incorporando al estándar HTML en sucesivas versiones. Aunque
antes de estandarizarse esas etiquetas era común que cada navegador crease su etiqueta propietaria para resolver la
misma necesidad, lo que obligaba a los desarrolladores a repetir código o incluso a hacer versiones de páginas diferentes
para navegadores. Con todo esto no queremos asustar a nadie y volvemos a repetir que las diferencias en la actualidad
son mínimas, pero sí deseamos que quede clara la necesidad de la estandarización creada por el W3C, responsable de
marcar una pauta que actualmente cumplen todos los navegadores modernos de manera bastante fiel.
Lo que es importante para el desarrollador es conocer el enfoque de cada lenguaje, para saber cuál es la manera
correcta de utilizarlo y cómo se complementan los unos a los otros. No es necesario que se sea experto en todos ellos,
pero sí saber qué cosas se deberían hacer con cada cual, para no cometer errores que deriven en una mala
interpretación por parte de los navegadores. Así mismo tenemos que pensar que no todas las personas van a acceder a
una web a través de un ordenador, sino también de un teléfono o de navegadores especializados para personas con
discapacidades, por ejemplo para ciegos. Es por ello que es importante escribir correctamente los lenguajes, respetando
los estándares y así cada navegador podrá hacer su mejor papel para representar la pagina lo más correctamente
posible.
En este manual queremos incidir mucho en este detalle, la correcta utilización del HTML: escribir el contenido, para que
nuestro trabajo sea lo más adecuado y de elevada calidad.
<a name="tablas"></a>
<h4>2. Tablas</h4>
Una tabla no es otra cosa más que un medio de organizar datos en filas y columnas. Este concepto ha estado presente
en nuestra sociedad por un largo período de tiempo y ha sido adoptado por HTML en sus etapas iniciales, como una
forma de transmitir información que, de otro modo, no sería comprendida tan fácilmente.
En documentos HTML una tabla puede ser considerada, resumidamente, como un grupo de filas donde cada una
contiene a un grupo de celdas. Esto es conceptualmente distinto a un grupo de columnas que contiene a un grupo de
filas, y esta diferencia tendrá un impacto en la composición y comportamiento de la tabla.
Como muchas otras estructuras de HTML, las tablas son construidas utilizando elementos. En particular, una tabla básica
puede ser declarada usando tres elementos, a saber, table (el contenedor principal), tr (representando a las filas
contenedoras de las celdas) y td (representando a las celdas).
Ten en cuenta que a esta tabla se le han aplicado estilos mediante CSS para mejorar su comprensión y legibilidad. No se
deberían esperar estos resultados en tablas sin atributos presentacionales asignados.
Puedes ver claramente en el ejemplo anterior, el concepto de filas conteniendo columnas del que hablamos
previamente. Aquí se hace evidente como las celdas, que han sido numeradas de acuerdo a su aparición en el código,
siguen una secuencia en la representación que va de izquierda a derecha, una fila por vez. Esto tendrá implicaciones
futuras, especialmente cuando se trate el tema de unificación de celdas y agrupamiento.<-- Referencias:
https://www.htmlquick.com/es/tutorials/tables.html--> <a href="#principio">Volver</a>
..
...
...
</body>
</html>
<html>
<head>
<title>Pagina1</title>
</head>
<body bgcolor="#00FF55">
<h1>sigue ..Enlaces</h1>
<p>b) Enlaces exernos o locales: son los que se dirigen a otras paginas dentro del mismo sitio WEB, ejemplo</p>
<p>c) Enlaces remotos: son enlaces que se dirigen a otras paginas de otros sitios Web (otros host), en este caso en href
colocamos la dirección URL de la pagina a la cual se accede</p>
<p>d) Enlaces a direcciones de correo: permiten escribir mensajes dirigidos a una dirección de correo electronico</p>
<p>e) Enlaces utilizando imágenes: Son imágenes que se utilizan como enlaces, ejemplo</p>
</body>
</html>
<head>
<title>Pagina1</title>
</head>
<body bgcolor="#00FF55">
<h1>Imágenes</h1>
<p>Las imágenes (img), son elementos esenciales en una página WEB, para ello se distingue dos tipos de imágenes:
imágenes de contenido y de adorno. La primera proporcionan y complementan información del propyecto, y las de
adorno se utilizan para el diseño como: crear bordes, íconos, fondos, etc. Tiene las siguientes propiedades: </p>
<p>alt: Descripcion corta de la imágen, se utiliza cuando el proceso de cargado es lento y el navegador muestra esta
descripción</p>
<p>align: Permite alinear la imagen dependiendo del valor, para ello tiene los siguientes valores: top, middle, botton,
left, y right</p>
<p>height y width: son propiedades que permiten definir el alto y ancho de la imágen en pixeles o en porcentaje. es
importante respetar la orginalidad de la resolución de la imágen con lo que fué creada. Cuando reducimos el tamño de
la imágen a la mitad, no se reduce a la mitad sinó que resulta ser aproximadamente 4 veces inferior</p>
<p>Las imagenes tienen sus propias propiedades como: transparencia, resolución, colores, etc., el formato GIF se puede
utilizar hasta 256 colores o menos, en cambio jpg trabaja con aproximadamente 16 millones de colores ideal para alta
resolución de fotografias, otro formato es el png aprobado por el consorcio de las tres w, (w3c) es un tipo de imagen sin
perdida de calidad.</p>
<p>A mayor cantidad de de uso de colores en una imágen el peso del archivo aumentará, y viceversa, esto de acuerdo a
la calidad de la imágen</p>
<p>usemap: este atributo se utilizara cuando la imágen se lo defina como mapa de imágen</p>
<img src="gato2.jpg">
</body>
</html>
<html>
<head>
<title>Pagina1</title>
</head>
<body bgcolor="#00FF55">
<p>Un mapa de imágen permite definir zonas pichables dentro de una imágen, y en cada zona definida se apunta a una
URL diferente</p>
<p>Para usar un mapa de imagen se inserta la imagen con "img", luego se utiliza "map", y dentro de ella se define las
regiones o zonas "area"; y tiene tres atributos: name, area y href</p>
<h4>area:</h4> <p>define el area o zona dentro del mapa de imagen; sus atributos son shape, coords y href</p>
<h4>shape:</h4> <p>indicael tipo de area que se utilizara, sus valores son:rectangular, circular o poligonal</p>
<p>coords: define la lista de números que representan las coordenadas del área:
i) area rectagular coords: "x1,y1,x2,y2"; son dos vertices superior izquierda e inferior derecha
ii) area circular: x1,y2,r; donde los valores represental el punto medio y el radio del circulo
iii) area poligonal coords: x1y1,x2,y2,x3,y3,x4,y4,x5,y5, ...,xnyn; son las coordenadas de todos los vértices del
polígono</p>
<p>ejemplo:</p>
</body>
</html>
<html>
<head>
<title>Pagina1</title>
</head>
<body bgcolor="#00FF55">
<map name="bolivia">
<area shape="poly"
coords="31,99,29,88,27,84,15,75,16,68,9,62,6,51,10,46,15,46,25,47,31,50,49,46,60,37,66,30,78,24,100,13,106,9,115,7,
127,7,131,7,140,12,140,15,140,23,135,26,127,32,121,37,114,43,114,49,110,55,105,61,101,64,96,70,87,76,92,83,89,88,7
4,82,64,81,56,78,52,78,46,84,41,91" href="#">
</map>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="contCoor"></p>
<script type="text/javascript">
function verCoordenada(event){
var x = event.offsetX;
var y = event.offsetY;
document.getElementById("contCoor").innerHTML += cont;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
margin: 0px;
</style>
</head>
<body>
<p id="contCoor"></p>
<script type="text/javascript">
function verCoordenada(event){
var x = event.touches[0].clientX;
var y = event.touches[0].clientY;
</script>
</body>
</html>
<html>
<head>
<title>Pagina1</title>
</head>
<body bgcolor="#00FF55">
<h1>Tablas</h1>
<p>Una tabla es un conjunto de celdas organizados, el cual se utiliza para incluir: texto, video, imágen, listas, etc. </p>
<h3>Definicion:</h3>
<p>Una tabla se define por las etiquetas "<table>", por filas de izquierda a derecha "<tr>", y dentro de las filas se
encuentran las celdas "<th>" y "<td>"; en elcual la etiqueta th se utiliza para los encabezados de la tabla y td para las
celdas de datos</p>
<p>Cada espacio horizontal continuado es una fila, y cada espacio vertical en una columna es una celda definido por la
intersección de fila y columna.</p>
<p>Las tablas se definen fila a fila, celda a celda, comenzando de la celda superior izquierda, las columnas se calcularan
automaticamente según las celdas que haya en cada columna</p>
<h4>Atributos:</h4>
<p>
cellspacing: determina el espacio entre las celdas de una tabla y el borde de la tabla
</p>
<p>Permite dar formato a las celdas dentro la etiqueta td, o en algunos tr</p>
<p>
align: justifica el texto de la celda y tiene los siguientes valores: left, right, center, justifify
valign: alinea verticalmente el contenido de la celda, y toma los siguientes valores: top, bottom y middle
bgcolor:
colspan, rowspan: Permiten combinar columnas o filas verticalmente u horizontalmente. Colspan es expación en
columnas y rowspan es expansión en filas, para lo cual se debe dar el numero de celdas a expandir de acuerdo al tamaño
definido
</p>
<p>También se incluyen tablas dentro de tablas, es decir una tabla dentro de una celda, tambien se llaman tablas
anidadas</p>
</body>
</html>
Pagina No. 18
<html>
<head>
<title>Pagina1</title>
</head>
<body bgcolor="#00FF55">
<h4>Ejemplo de Tabla</h4>
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td colspan="2"></td>
</tr>
</table>
<hr >
</html>
<html>
<head>
<title>Pagina1</title>
</head>
<body bgcolor="#00FF55">
<h4>Ejemplo de Tabla</h4>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>c</td>
<td>d</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>Pagina1</title>
<style type="text/css">
.a {
color: #CFC;
font-weight: bold;
font-style: italic;
</style>
</head>
<body>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Ejercicio 21:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>FRAMES MARCOS</title>
</head>
<body bgcolor="#66FFCC">
<h1>FRAMES</h1>
<p> Es un procedimiento que permite diseñar y dividir el navegador en áreas o ventanas, que actuan de forma
independiente, como si se trataran de paginas diferentes</p>
<p>Este elemento define el número de espacios rectangulares de acuerdo a sus atributos, asi como el tamaño, etc.
Sus atributos principales son:</p>
<p>Define el contenido y apariencia del marco rectangular, sus atributos mas importantes son:</p>
<p>a) name: atributo que asigna un nombre al marco, es útil cuando se lo utiliza con el atributo target</p>
<p>c) scrolling: atrivuto de la barra de desplazamiento del marco y toma tres valores: </p>
d) noresize: le indica al navegador que no debe permitir que el usuario modifique su estrucutura
e) frameborder: define el borde del frame, y sus valores son yes, no (1/0); indicara que aparecera el borde del frame, y si
el valor es no, indicara que no aparecera el borde
<h3>Atributo TARGET</h1>
<p>muestra el resultado de un enlace en el frame seleccionado, indicando el nombre de dicho frame. Y los valores que
toma este atributo son:</p>
<p>
a) target=_blank: hace que la página referenciada se cargue en una nueva ventana del navegador
c) target=_parent: hace que la pagina se cargue en el frame padre del que desciende actualmente
d) target=_top: permite forzar, haciendo que la pagina ocupe todo el espacio de la ventana del navegador, destruyendo
toda la estructura de frames. generalmente se utiliza cuando se enlaza a una página externa al sitio WEB
</p>
</body>
</html>
Ejercicio No. 22:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pagina con Marcos</title>
</head>
<frameset cols="20%,*">
</frameset>
</frameset><noframes></noframes>
</html>