Está en la página 1de 36

Ejercicios No.

16

#! /bin/bash

clear

echo

echo "* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *"

echo "* Ejercicio: Realiza la calculadora, utilizando: funciones y la estructura *"

echo " seleccion multiple (switch/case) *"

echo " *"

echo "* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *"

echo "1) Suma"

echo "2) Resta"

echo "3) Producto"

echo "4) Division"

echo "5) Resto"

echo "6) Mayor"

echo "7) Salir"

echo "Digite su opción:"

read op

suma(){

echo "Introduzca Primer numero:"

read a

echo "Introduzca Segundo numero:"

read b

s=$((a+b))

echo "La suma es: $s"

resta(){

echo "Introduzca Primer numero:"

read a

echo "Introduzca Segundo numero:"

read b

r=$((a-b))

echo "La resta es: $r"

producto(){

echo "Introduzca Primer numero:"

read a

echo "Introduzca Segundo numero:"


read b

p=$((a*b))

echo "El producto es: $p"

division(){

echo "Introduzca Primer numero:"

read a

echo "Introduzca Segundo numero:"

read b

d=$((a/b))

echo "La division es: $d"

resto(){

echo "Introduzca Primer numero:"

read a

echo "Introduzca Segundo numero:"

read b

re=$((a%b))

echo "El resto es: $re"

mayor(){

echo "Leer Primer Numero:"

read a

echo "Leer Segundo Numero:"

read b

if [ $a -gt $b ]

then

echo "El numero mayor es: $a"

else

echo "El numero mayor es: $b"

fi

salir(){

clear

echo ".......Hasta la vista baby..!!"

exit

case $op in
1) suma;;

2) resta;;

3) producto;;

4) division;;

5) resto;;

6) mayor;;

7) salir

esac

//uso de la Estructura repetitiva While

//Ejercicios No. 17

#! /bin/bash

clear

echo

echo "* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *"

echo "* Genera los enteros hasta un numero N introducido por teclado, *"

echo "* utilizando la estructura repetitiva W H I L E *"

echo "* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *"

echo "Leer un Numero:"

read n

echo

i=1

while [ $i -le $n ]

do

echo "$i \c"

i=$(($i+1))

done

echo

echo

// Uso de la estructura F O R

// Ejercicios No. 17

#! /bin/bash

clear

echo

echo "* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *"

echo "* Genera los enteros hasta un numero N introducido por teclado, *"

echo "* utilizando la estructura repetitiva W H I L E *"

echo "* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *"

echo "Leer un Numero:"


read n

echo

i=1

while [ $i -le $n ]

do

echo "$i \c"

i=$(($i+1))

done

echo

echo

Ejercicios No. 18

#!/bin/bash

clear

echo

echo "* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *"

echo "* Uso de la estructura repetitiva FOR *"

echo "* Genera una lista de números *"

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 "* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *"

echo "* Uso de la estructura repetitiva F O R *"

echo "* genera los numeros enteros hasta un n, de forma secuencial (seq) *"

echo "* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *"

echo "Introduzca un número:"

read n

for i in $(seq 1 $n)

do

echo "$i"

done

echo
# OTRA FORMA

# for i in $(seq 1 10)

# do

# echo "$i"

# done

// Esto es importante:

// Ejercicios No. 20

#!/bin/bash

clear

echo

echo "* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *"

echo "* Genera los numero randomicos *"

echo "* utilizando la estructura repetitiva F O R *"

echo "* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *"

for (( i=1; i <= 10; i++ ))

do

echo "Random $i :$RANDOM"

done

DESAFIÓ 4:

1. Crear el árbol de directorios: /home/lasin/fcpn/informática, física, química, matemática, biología, estadística y


dentro de biología se crean el directorio kardex

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.

3. Copia el contenido del directorio “biología” a “estadística”

4. Empaquetar y comprimir el directorio física con el comando tar y nombrarlo archivo.tgz.

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—

9. Renombrar el directorio “química” a “bioquímica”

10. Crear dentro de “bioquímica” los archivos “ciencia.txt” y “teoría.txt”

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”.

13. Concatenar los archivos “ciencia.txt” y “teoría.txt” y enviarlos a “estadística”

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/

16. Cambiar el propietario / usuario del archivo informática a umsa

17. ¿Cómo puedo obtener información detallada de un comando?

18. ¿Cómo borrar directorios con todos sus archivos dentro?

19. ¿Cómo visualizo la fecha y hora del sistema?

20. ¿Qué significa ./ y ../

21. Estoy perdido en el árbol de directorios, ¿cómo vuelvo a mi HOME?(con una sola instrucción)

22. ¿Cómo hago para ir al final de línea en una consola?

//Ejercicios No. 21

#! /bin/bash

clear

echo

echo "* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *"

echo "* Genera los enteros hasta un numero N introducido por teclado *"

echo "* con la estructura repetitiva F O R, sugerencia hacer correr con ./ *"

echo "* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *"

echo "Leer un Numero:"

read n

echo

for ((i = 0; i < $n; i++))

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.

4. Leer tres números por teclado, mostrar el mayor y el menor

5. Generar la serie de Fibonacci para un número N

6. Verificar si un numero introducido por teclado es primo; desplegar un mensaje de confirmación

7. Generar la siguiente serie de números: 1!, 2!, 3!, …., n!

8. Descomponer un numero entero positivo dígito por dígito

9. Invertir un numero entero positivo

---AUX.----
Desafió 1

1) Verificar si una cadena esta vacía utilizando el operados (-z),

2) Verificar si una cadena no esta vacía utilizando el operador (-n)

Desafió 2

1. Encontrar el menor de tres números

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

Bueno iniciamos el Capítulo II, HTML


1 Introducción. Para ello vemos un poco de historia, se remonta a la década del 80, y su origen se lo debe a Tim Berners-
Lee (Físico) propuso un nuevo sistema basado en "hipertexto" para compartir documentos. El hipertexto permite
acceder a la información similar a los enlaces de páginas web.

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.

El lenguaje HTML es un estándar reconocido mundialmente y su desarrollo y avance tecnológico depende la


organización, la cual se denomina el consorcio de las tres W, World Wide Web (WWW), más conocido como W3C. Por
tal razón cualquier documente HTML se ejecuta en cualquier navegador y sistema operativo. Por tal razón podemos
afirmar que el lenguaje HTML es un lenguaje reconocido universalmente y que permite publicar información de forma
global. HTML son las siglas de HyperText Markup Language (Lenguaje de marcado de hipertexto).

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.

3. Estructura de un documento HTML

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.

Estructura de un documento HTML:

<html>

<head>

<title>titulo del documento HTML</title>

</head>

<body>

Hola Mundo

</body>

</html>

Ejemplo 1:

<html>

<head>

<title>titulo del documento HTML</title>

</head>

<body>

Hola Mundo !!

</body>

</html>

Ejemplo 2:

<html>

<head>

<title>titulo del documento HTML</title>

</head>

<body>

<h1>Hola Mundo !!</h1>

<h2>Hola Mundo !!</h2>

<h3>Hola Mundo !!</h3>

<h4>Hola Mundo !!</h4>

<h5>Hola Mundo !!</h5>

<h6>Hola Mundo !!</h6>

</body>

</html>
Ejemplo 3:

<html>

<head>

<title>titulo del documento HTML</title>

</head>

<body>

<p>Bienvenidos a la clase Virtual !!</p>

</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

2. Hicimos correr el elemento h1,h2,h3,h4,h5,h6 para los títulos

3. el ejercicio utiliza el elemento <p> párrafo

Ejercicio No. 1

<html>

<head>

<title>Mi Pagina</title>

</head>

<body>

<h1><center>Hola Mundo !!</center></h1>

<h2><center>Hola Mundo !!<center></h2>

<h3><center>Hola Mundo !!<center></h3>

<h4><center>Hola Mundo !!<center></h4>

<h5><center>Hola Mundo !!<center></h5>

<h6><center>Hola Mundo !!<center></h6>

<p align="center">PARTES QUE COMPONE UN ELEMENTO HTML</p>

<p>Tarea 1: Elementos en linea, elementos de bloque</p>

<p>URL: Localizador de Recursos Uniforme</p>

</body>

</html>

--REPASO---

#! /bin/bash

clear

echo

echo "* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *"


echo "* Genera la serie de Fibonacci *"

echo "* hasta un número N introducido por teclado *"

echo "* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *"

echo "Leer un Numero:"

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

echo "* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *"

echo "* Descomposicion de un numero por la derecha *"

echo "* para un numero n, introducido por teclado *"

echo "* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *"

echo "Leer un Numero:"

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>

<body bgcolor="#00FF55" text="#550000" link="#2A00FF" vlink="#2A1FAA" alink="#FF00AA">

<!-- Autor: Juan Perez-->

<h1 align="center">hola Mundo..!!</h1>

<br />

<hr align="center" size="10" noshade>

<h2 align="center">hola Mundo..!!</h2>

<h3 align="center">hola Mundo..!!</h3>

<h4 align="center">hola Mundo..!!</h4>

<h5 align="center">hola Mundo..!!</h5>

<h6 align="center">hola Mundo..!!</h6>

<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

También avanzamos la etiqueta br que es un salto de linea

La etiqueta de comentario que es <!--comentario-->

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>

     <h4 align="right">Hola soy el encabezado 4 y <b>estoy en negrita</b></h4>

     <hr align="right" width="400px">

     <p>Ejemplo de como escribir una <big>formula</big>:</p>

     <p>x<sup>2</sup>+2x+r<sub>1</sub></p>

    </body>

</html>

<!--Ejercicio3-->

<!DOCTYPE html>

<html>

    <head>

     <title>EJERCICIO3</title>

    </head>

    <body>

     <p align="center">Noemi Guarachi</p>

     <hr>

     <h1>Sobre mi...</h1>

     <p>Lorem ipsum <big>dolor sit amet</big>, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.<br>

     Ut enim ad minim veniam,

     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

     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>

Les paso lo que llevamos:

Pagina 4:

<!DOCTYPE HTML>

<html>

<head>

<title>Pagina 2</title>

</head>

<body bgcolor="#00FF55" link="#0000FF" vlink="#D47FFF" text="#7F3F00" alink="#808080">

<!-- Autor Juan Perez-->

<h1><center>Hola Mundo ...!</center></h1>

<hr align="center" size="6" noshade="noshade">


<h2><center>Hola Mundo ...!</center></h2>

<h3><center>Hola Mundo ...!</center></h3>

<h4><center>Hola Mundo ...!</center></h4>

<h5><center>Hola Mundo ...!</center></h5>

<h6><center>Hola Mundo ...!</center></h6>

<br />

<center><a href="https://www.umsa.bo/">U. M. S. A.</a></center>

</body>

</html>

Pagina 5:

<!DOCTYPE HTML>

<html>

<head>

<title>Pagina1</title>

</head>

<body bgcolor="#00FF55" text="#550000" link="#2A00FF" vlink="#2A1FAA" alink="#FF00AA">

<h1>FORMATEADO DE TEXTO</h1>

Hola Mundo<br />

<b>Hola Mundo</b><br />

<i>Hola Mundo</i><br />

<u>Hola Mundo</u><br />

<s>Hola Mundo</s><br />

<sup>En modo super indice</sup><br />

<sup>En modo sub indice</sup><br />

<sup>En modo super indice</sup><br />

<sup>En modo sub indice</sup><br />

<p>Conbinaciones de 5 tomados de dos en dos</p>

C<sup>5</sup><sub>2</sub>

<center>Hola Mundo</center>

</body>

</html>

Página 6:

<!DOCTYPE HTML>
<html>

<head>

<title>Pagina1</title>

</head>

<body bgcolor="#00FF55" text="#550000" link="#2A00FF" vlink="#2A1FAA" alink="#FF00AA">

<h1><center>COLOR, TAMAÑO Y TIPO DE LETRA</center></h1>

<p>La etiqueta clave es el elemento 'font'</p>

<p>El elemento font, tiene los siguientes atributos:</p>

<p>face, size, color, </p>

<h3><u>a) face: define el tipo de letra</u><h3>

<font face="Tahoma">Estamos en tiempos de COVID 19</font><br />

<font face="Verdana">Estamos en tiempos de COVID 19</font><br />

<font face="Times New Roman, Times, serif">Estamos en tiempos de COVID 19</font><br />

<font face="Comic Sans MS, cursive">Estamos en tiempos de COVID 19</font><br />

<h3><u>b) size: define el tamaño de letra</u><h3>

<font size="5">Estamos en tiempos de COVID 19</font><br />

<font size="10">Estamos en tiempos de COVID 19</font><br />

<font size="3">Estamos en tiempos de COVID 19</font><br />

<font size="-5">Estamos en tiempos de COVID 19</font><br />

<p>Existe 7 n iveles de tamaño de letra del 1 al 7, el por defecto es 3</p>

<p>size = +1; significa aumentar en uno o es lo mismo que size=4</p>

<h3><u>c) color: define el color que tendra el texto, su forma de uso es:</u><h3><br />

color="#rrggbb" (Rojo, verde, azul; en el sistema hexadecimal)

<p> .. o se puede colocar de manera literal:</p>

<p>Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Marron, Navy, Olive</p>

<font color="Aqua"> ..estamos en tiempos de Coronavirus..</font>

</body>

</html>

Pagina 7:

<html>

<head>

<title>Pagina1</title>

</head>
<body bgcolor="#00FF55" text="#550000" link="#2A00FF" vlink="#2A1FAA" alink="#FF00AA">

<h3><u>a) face: define el tipo de letra</u><h3>

<font face="Tahoma">Estamos en tiempos de COVID 19</font><br />

<font face="Verdana">Estamos en tiempos de COVID 19</font><br />

<font face="Times New Roman, Times, serif">Estamos en tiempos de COVID 19</font><br />

<font face="Comic Sans MS, cursive">Estamos en tiempos de COVID 19</font><br />

<h3><u>b) size: define el tamaño de letra</u><h3>

<font size="5">Estamos en tiempos de COVID 19</font><br />

<font size="10">Estamos en tiempos de COVID 19</font><br />

<font size="3">Estamos en tiempos de COVID 19</font><br />

<font size="-5">Estamos en tiempos de COVID 19</font><br />

<p>Existe 7 n iveles de tamaño de letra del 1 al 7, el por defecto es 3</p>

<p>size = +1; significa aumentar en uno o es lo mismo que size=4</p>

<h3><u>c) color: define el color que tendra el texto, su forma de uso es:</u><h3><br />

<font color="#rrggbb" (Rojo, verde, azul; en el sistema hexadecimal)

<p> .. o se puede colocar de manera literal:</p>

<p>Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Marron, Navy, Olive</p>

<font color="Aqua"> ..estamos en tiempos de Coronavirus..</font><br />

<font color="Blue"> ..estamos en tiempos de Coronavirus..</font><br />

<font color="Black"> ..estamos en tiempos de Coronavirus..</font><br />

<font color="Gray"> ..estamos en tiempos de Coronavirus..</font><br /> <br />

<font color="Navy"> ..estamos en tiempos de Coronavirus..</font> <br />

<font color="Green"> ..estamos en tiempos de Coronavirus..</font><br />

<font color="Lime"> ..estamos en tiempos de Coronavirus..</font>

</body>

</html>

Pagina 8:

<html>

<head>

<title>Pagina1</title>

</head>

<body bgcolor="#00FF55">

<h3><u>a) face: define el tipo de letra</u><h3>


<h3><u>b) size: define el tamaño de letra</u><h3>

<h3><u>c) color: define el color de texto</u><h3><br />

<font color="#rrggbb" (en literal y en el sistema hexadecimal)

<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

<p>Ejemplo 1: ff0000 = Rojo</p>

<p>Ejemplo 1: 000080 = Azul oscuro</p>

<p>Ejemplo 1: ff9000 = Algo anaranjado</p>

<p>Ejemplo 1: 0000ff = Azul</p>

<font color="#2ABF55">Hola Mundo .. !</font><br />

<font color="#ff0000">Hola Mundo .. !</font><br />

<font color="#000080">Hola Mundo .. !</font><br />

<font color="#ff9000">Hola Mundo .. !</font><br />

<font color="#0000ff">Hola Mundo .. !</font><br />

</body>

</html>

Pagina 9:

<html>

<head>

<title>Pagina1</title>

</head>

<body bgcolor="#00FF55">

<h1><center>Restricciones o sintaxis HTML</center></h1>

<p>Las reglas de sintaxis generales o básicas, en las etiquetas, son:</p>

<p>Regla 1:Significa que las etiquetas se tienen que cerrar de acuerdo a como se abren</p>

<p>Es un parrafo con un enlace <a href="www.umsa.bo">enlace</p></a>

<p>Es incorrecto, lo correcto tiene la siguiente forma:</p>

<p>Es un parrafo con un enlace <a href="www.umsa.bo">enlace</a></p>

<b />

<p>Regla 2:Los nombres de etiquetas y atributos siempre se escriben en minisculas, ejemplo:</p>

<font color="#2ABF55">Hola Mundo .. !</font><br />

<p>Regla 3: El valor de los atributos siempre se encuentran con comillas, ejemplo:</p>

<font face="MS Serif, New York, serif" size="5">Hola Mundo.!</font>

</body>
</html>

Pagina 3:

<!DOCTYPE>

<html>

<head>

<title>Elemento Font</title>

</head>

<body>

<font face="Comic Sans MS,arial,verdana">Este texto tiene otra tipografía</font><br />

<font face="Comic Sans MS">Este texto tiene otra tipografía</font><br />

<font face="arial">Este texto tiene otra tipografía</font><br />

<font face="verdana">Este texto tiene otra tipografía</font><br /><br />

<font size="3">Este texto tiene tamano de letra</font><br />

<font size="+2">Este texto tiene tamano de letra</font><br />

<font size="5">Este texto tiene tamano de letra</font><br /><br />

<h2 align="center">Texto en diferentes colores de letra, en el sistema hexadecimal</h2>

<center><font face="Arial, Helvetica, sans-serif" color="blue" size="7">letra</font></center>

<center><font color="" size="7">letra</font>

<center><font color="#ff0000" size="7">letra</font></center>

<center><font color="#00ff00" size="7">letra</font></center>

<center><font color="#0000ff" size="7">letra</font></center>

<center><font color="#0000aa" size="7">letra</font></center>

<center><font color="#000055" size="7">letra</font></center>

<center><font color="#000001" size="7">letra</font></center>

</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>Listas no ordenadas, ordenadas y listas de definicion</p>

<h3>a) Listas no ordenadas:</h3>

<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>

<h3>b) Listas ordenadas:</h3>

<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>

<ol start="5" type="A">

<lh>Departamento</lh>

<li>La Paz</li>

<li>Oruro</li>

<li>Santa Cruz</li>

<li>Beni</li>

<li>Pando</li>

</ol>

</body>

</html>

<h3>c) Listas de Definicion: </h3>

<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>

<dd>Metalenguaje para la definicion de otros lenguajes de marcado</dd>


<dt>XML</dt>

<dd>Lenguaje basado en SGML y que se emplea para describir textos</dd>

<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>

<p><b>En funcion al destino, los enlaces se encuentran agrupados en:</b></p>

<ul type="square">

<li>Enlaces interno</li>

<li>Enlaces locales</li>

<li>Enlaces remotos</li>

<li>Enlaces condireccion de correo</li>

<li>Enlaces con imagenes</li>

<li>Enlaces a archivos</li>

<li>Enlaces en ventanas del navegador</li>

</ul>

<h3>Elemento a</h3>

<p>Es el elemento que se utiliza para definir un enlace, y tiene las siguientes propiedades:</p>

<b>href:</b> destino del enlace o marca de partida<br />


<b>name:</b> define el nombre de un enlace en el destino o marca de llegada, para que se pueda acceder
desde otros enlaces<br />

<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 />

<center><a href="URL o destino">texto de hiperenblace</a></center>

</body>

</html>

Pagina 12 Completar ....:

<html>

<head>

<title>Pagina1</title>

</head>

<body bgcolor="#00FF55">

<h1>sigue ..Enlaces</h1>

<h1>Elemento a</h1>

<p><a href="URL o destino">texto de hiperenblace</a></p>

<p) Enlaces internos: las que vinculan a otras partes dentro de la misma pagina</p>

<a name="principio"></a>

<h1>TEMARIO</h1>

<a href="#intro">1. Introduccion</a><br />

<a href="#tablas">2. Elemento tabla</a><br />

<a href="#form">3. Elemento Formulario</a><br />

<a href="#frames">4. Frames o Marcos</a><br />

<a href="#css">5. Hojas de Estilo</a><br />

<a href="#js">6. Javascript</a><br />

<hr align="center" noshade ="noshade" size="4"></hr>

<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.

Los navegadores y sus problemas

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.

Los lenguajes de la web


HTML no está solo como único lenguaje para crear la web, aunque en un principio sí que era así. Su evolución tan
anárquica ha supuesto toda una seria de inconvenientes y deficiencias que han debido ser superados con la introducción
de otras tecnologías accesorias capaces de organizar, optimizar y automatizar el funcionamiento de las webs. Ejemplos
que pueden sonaros son las CSS, o JavaScript. Veremos más adelante en qué consisten algunas de ellas.

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.

<-- Referencia: https://desarrolloweb.com/articulos/534.php --> <a href="#principio">Volver</a></p>

<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>

Pagina 13 sigue enlaces... :

<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>

<a href="../capitulo5.html">Capitulo 5</a>

<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>

<a href="https://usuarios.umsa.bo/">Cuenta Institucional UMSA</a>

<p>d) Enlaces a direcciones de correo: permiten escribir mensajes dirigidos a una dirección de correo electronico</p>

<a href="mailto:jomtapia@gmail.com">Master WEB</a>

<p>e) Enlaces utilizando imágenes: Son imágenes que se utilizan como enlaces, ejemplo</p>

<a href="https://twitter.com"><img src="../Sitio Web/Sitio Web 1/twiter.png"></a>

</body>

</html>

Página No. 14:


<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>src: Indica la ruta o URL de la imágen que se muestra</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>border: Permite añadir un borde a la imágen</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="gato1.jpg" border="3" height="300" width="500" />

<img src="gato2.jpg">

</body>

</html>

Página No. 15:

<html>

<head>

<title>Pagina1</title>
</head>

<body bgcolor="#00FF55">

<h1>Mapas de Imágen "map"</h1>

<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>

<h3>name:</h3> <p>nombre que identifica de forma unica el mapa de imagen</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>

<h4>href:</h4> <p>define la URL a la que se accede al pinchar la zona</p>

<p>ejemplo:</p>

</body>

</html>

Página No. 16:

<html>

<head>

<title>Pagina1</title>

</head>

<body bgcolor="#00FF55">

<h1>Ejemplo de Mapa de Imágen</h1>

<img src="mapabolivia.jpg" usemap="#bolivia" />

<map name="bolivia">

<area shape="poly" coords="29,104,85,108,67,156,87,251,22,268" href="https://www.lapaz.bo/" >

<area shape="circle" coords="68,298,22" href="http://gamoruro.com/">

<area shape="rect" coords="142,373,218,399" href="https://www.tarija.gob.bo/">

<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>

<img src="imagen.jpg" onmousedown="verCoordenada(event)" usemap="#Mapa">

<p id="contCoor"></p>

<script type="text/javascript">

function verCoordenada(event){

var x = event.offsetX;

var y = event.offsetY;

var cont = x+" "+y+" ";

document.getElementById("contCoor").innerHTML += cont;

</script>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

body{

margin: 0px;

</style>

</head>

<body>

<img src="LaPaz.jpg" ontouchstart="verCoordenada(event)">

<p id="contCoor"></p>

<script type="text/javascript">

function verCoordenada(event){

var x = event.touches[0].clientX;

var y = event.touches[0].clientY;

var cont = x+" "+y+" ";


document.getElementById("contCoor").innerHTML += cont;

</script>

</body>

</html>

Pagina No. 17:

<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>

<p>También se utiliza para estructurar el documento WEB, de acuerdo a sus contenidos</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>se tienen atributos de tabla, fila, y celda</p>

<h5>i) Atributos de tabla:</h5>

<p>Los atributos de tabla permiten formatear también a las celda y filas</p>

<p>

align: Alinea la tabla horizontalmente

background: Define el fondo de una tabla

bgcolor: Le da color a la tabla

border: Define el borde de la tabla en pixeles

color: define el color del borde de la tabla

cellpading: determina el espacio entre los bordes de la celda y el cojntenido de la misma

cellspacing: determina el espacio entre las celdas de una tabla y el borde de la tabla

heigt: define la altura de la tabla en pixeles o porcentaje

width: define la anchura de la tabla en pixeles o porcentaje

</p>

<h5>ii) Atributos por fila, columnas y celdas:</h5>

<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:

height, width: define la altura y anchura de la celda en pixeles o porcentaje

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>

<table border="1" align="center">

<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>

Pagina No. 19:

<html>

<head>

<title>Pagina1</title>

</head>

<body bgcolor="#00FF55">

<h4>Ejemplo de Tabla</h4>

<table border="5" align="center" cellpadding="20" cellspacing="20">

<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>

<table width="1200" border="0" height="100%" cellspacing="0" cellpadding="0" align="center">

<tr>

<td width="1200" height="180" bgcolor="#66FF99"><img src="banner.jpg" width="1200" height="180"></td>

</tr>

<tr>

<td width="1200" height="100%" bgcolor="#66FF33">&nbsp;</td>

</tr>

<tr>

<td width="1200" height="60" bgcolor="#003366" class="a">Autor: Juan Perez , Diseñador</td>

</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>

<h3>1. Elemento FRAMESET</h3>

<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>a) rows: define a los frames que van a ir en filas</p>

<p>b) cols: define a los frames que van a ir en columnas</p>


<h3>2. Elemento FRAME</h3>

<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>b) src: especifica la dirección del archivo que se mostrara en el marco</p>

<p>c) scrolling: atrivuto de la barra de desplazamiento del marco y toma tres valores: </p>

yes: muestra la barra de desplazamiento

no: no muestra la barra de desplazamiento

auto: aparece la barra de desplazamiento de forma automática

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

f) framespacing: define el espacio entre frames

<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

b) target=_self: con este valor el documento será mostrado en el mismo frame

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

e) target=nombre_de_frame: despliega el enlace en la ventana indicada.

</p>

</body>

</html>
Ejercicio No. 22:

<!doctype html>

<html>

<head>

<meta charset="utf-8">
<title>Pagina con Marcos</title>

</head>

<frameset rows="10%,80%,10%" frameborder="1">

<frame src="marcos/top.html" name="cabeza" scrolling="auto">

<frameset cols="20%,*">

<frame src="marcos/izq.html" name="menu">

<frame src="marcos/cuerpo.html" name="cuerpo" frameborder="no" scrolling="auto" noresize>

</frameset>

<frame src="marcos/footFrame.html" name="pie">

</frameset><noframes></noframes>

</html>

También podría gustarte