Translate

viernes, 12 de marzo de 2021

GUÍA 4TO BIMESTRE

GUÍA TEMÁTICA PARA EL EXAMEN DE CUARTO BIMESTRE
2018-2019

1.- Deberás estudiar todas las guías que se dieron  durante el ciclo escolar

2.- Debes estudiar la estructura de HTML

3.- Debes estudiar todas las etiquetas que se vieron durante el bimestre

4.- Deberás aplicar las etiquetas en un programa de HTML

5.- Describe que es un navegador y ejemplos de navegadores

6.- Describe que es un buscador y menciona los motores de búsqueda que conozcas

7.- De que otra forma se les conoce a las bases de datos en la red

8.- Define sitio web y página web

9.- Ejemplos de una página web y ejemplos de sitio web

10.- Características de basura digital o cibernética

11.- Autores de la evolución histórica de las computadoras y menciona su invento por cada inventor

12.- Características de las generaciones de computadoras

13.- Describe la memoria RAM

14.- Describe la memoria ROM

15.- Que es un Hacker, Malware y Ciberacoso

16.- Que es la URL, TCP, HTML y HTTP

17.- Menciona cada uno de los elementos de una dirección web

18.- Es el enunciado del problema, el cual debe ser claro y completo.

19.- Se lleva a cabo después de terminado el programa y se detectan cambios y ajustes al programa para que siga trabajando de manera correcta.
           
20.- Es la base para comprender, analizar y proponer soluciones a los problemas de la lógica de programación

21.- Es la documentación que se le proporciona al usuario final, es una guía que indica el usuario como navegar en el programa, presentando todas las pantallas y menús que se va a encontrar

22.- Verifica que al algoritmo antes de ser probado y antes de ser ejecutado con datos reales.

23.- Es una secuencia de pasos lógicos y ordenados finitos, con las cuales le damos solución a un problema determinado, los pasos deben ser secuenciales, definidos, debe tener un inicio y un fin.

24.- Son una serie de instrucciones detalladas en un código es decir en un lenguaje de programación a esta serie de instrucciones se le conoce como programa.

25.-  Consiste en eliminar los errores que se hayan detectado durante la prueba, para dar paso a una solución adecuada y sin errores.

26.- Características de los diagramas Hipo:

27.- Características de los diagramas  Nassi-Schneiderman

28.- Que un diagrama de flujo.

29.- Características  que debes tomar en cuenta para saber la estructura de un algoritmo.

30.- Estudia la guia de kahoot

31.  Los colores en html se representan en

32.    El  <head>  se debe  poner  debajo de  la etiqueta

33. Con que extensión se guarda un programa de HTML

34.  Las etiquetas <body> …. </body> se deben colocar

35.  ¿Qué etiqueta está comprendida entre <head> y </head>?

36.   Los encabezados de <h1>…<h6>:

37.   Las etiquetas <align="center">

38. El atributo  align sirve para:

39.  La etiqueta <ol>  me sirve para

40. El atributo que puede establecerse en el body para poner una imagen de fondo es:

41. El color de fondo de una página del documento se especifica en el:

42. La etiqueta marquee me sirve

43.  A un hiperenlace también se le puede nombrar

44.  La  etiqueta  <table> … </table> me sirve para:

45. ¿Cuál es el atributo en tablas para poner filas?

46.  La etiqueta que hace que el texto se muestre en cursiva es:

47.  HTLM es:

48. ¿Que son las etiquetas o Tags?   

49. La etiqueta para definir un término dentro de una página de html es:

50. ¿Cuál es la etiqueta para realizar un hipervínculo?

51.  La etiqueta que hace  que el texto se muestre en  negrita es:

52.  La etiqueta para poner subrayado es:

53. Mediante  de cuál atributo puede establecerse color de fondo del documento

54. La etiqueta para separar bloques dentro de una página es:

55. Realiza el siguiente programa en html: Las opciones del menu debe ser hipervinculos
















miércoles, 10 de marzo de 2021

CLASE 60 PROGRAMA


Mares de América
Los océanos y mares son el hábitat de miles de especies y el medio por el cual se desplazan los buques. La extensión de los mismos es inmensa y mucho mayor que la superficie terrestre y aun comprenden una gran cantidad de misterios.

Mares y oceanos de México
1. Océano Pacífico
2. Golfo de México
3. Mar Caribe
4- Golfo de california






martes, 9 de marzo de 2021

CLASE 59 TABLAS

Fin en mente: Realizar un programa en HTML donde se apliquen diferentes formas de tablas

<html>
<head>
<title Frutas>  </title>
<table bgcolor="skyblue" border="5" width=80%">
<tr>
<td colspan="3">
  <p align="center"> <font face="arial" color="blue"> Frutas
</p> </font>
</td>
</tr>

    <tr>
<td> <p align="cenetr"><font face="verdana" color="black"> Frutas Citricas
<ol>
<li type="circle"> Mandarina
<li type="circle"> Naranja
<li type="circle"> Lima
<li type="circle"> Toronja
</ol> </p> </font> </td>


<td> <p align="center"><font face="arial" color="green"> Frutas Silvestres
<ul>
<li type="disc"> Uva </li>
<li type="disc"> Kiwi </li>
<li type="disc"> Fresa </li>
<li type="disc"> Mora </li>
</ul> </p> </font> </td>

<td> <p align="center"><font face="calibri" color="yellow"> Frutas Tropicales
    <ul>
 <li type="square"> Coco  </li>
 <li type="square"> Mango  </li>
 <li type="square"> Platano  </li>
 <li type="square"> Sandia  </li>
 </p> </font> </td>
</ul>
</tr>
</table>
</body>
</html>

sábado, 6 de marzo de 2021

CLASE 59 TABLAS EN HTML

Fin en mente: Aplicar en un programa de HTML la etiqueta de TABLAS <table> </table>

Fila <tr>

Es necesario insertar las etiquetas <tr> y </tr> por cada una de las filas de la tabla. Estas etiquetas deberán insertarse entre las etiquetas <table> y </table>.

Por ejemplo, para crear una tabla con cinco filas escribiríamos:

<table>
  <tr>...</tr>
  <tr>...</tr>
  <tr>...</tr>
  <tr>...</tr>
  <tr>...</tr>
</table>

Columna o celda <td>

Para crear una tabla no basta con especificar el número de filas, es necesario también especificar el número de columnas.

Una celda es el resultado de la intersección entre una fila y una columna, por lo que podremos especificar el número de celdas por fila, que equivale a especificar el número de columnas por fila.



Es necesario insertar las etiquetas <td> y </td> por cada una de las celdas que compongan cada una de las filas de la tabla. Por lo tanto, habrá que insertar esas etiquetas entre las etiquetas <tr> y </tr>.

Además de los atributos específicos de cada celda o línea, las tablas pueden ser adicional mente formateadas a partir de los atributos que nos ofrece la propia etiqueta <table>. He aquí aquellos que pueden parecernos en un principio importantes:
align
Alinea horizontalmente la tabla con respecto a su entorno.
background
Nos permite colocar un fondo para la tabla a partir de un enlace a una imagen.
bgcolor
Da color de fondo a la tabla.
border
Define el número de pixels del borde principal.
bordercolor
Define el color del borde.
cellpadding
Define, en pixels, el espacio entre los bordes de la celda y el contenido de la misma.
cellspacing
Define el espacio entre los bordes (en pixels).
height
Define la altura de la tabla en pixels o porcentaje.
width
Define la anchura de la tabla en pixels o porcentaje.

Los atributos que definen las dimensiones, height y width, funcionan de una manera análoga a la de las celdas tal y como ya lo hemos visto. Contrariamente, el atributo align no nos permite justificar el texto de cada una de las celdas que componen la tabla, sino más bien, justificar la propia tabla con respecto a su entorno.
Vamos a poner tres ejemplos de alineado de tablas, centradas, alineadas a la derecha y a la izquierda.
Ejemplo de tabla centrada
Esta tabla está centrada (aling="center"). Solo tiene una celda.
Este sería un texto cualquiera colocado al lado de una tabla centrada 
Ejemplo de tabla alineada a la izquierda
Esta tabla está alineada a la izquierda (aling="left"). Solo tiene una celda.
Para que se vea el efecto de alineado a la tabla debemos colocar un texto al lado y el texto rodeará la tabla, igual que ocurría con las imágenes alineadas a un lado.





Los atributos cellpading y cellspacing nos ayudaran a dar a nuestra tabla un aspecto más estético. En un principio puede parecernos un poco confuso su uso pero un poco de practica será suficiente para hacerse con ellos.
En la siguiente imagen podemos ver gráficamente el significado de estos atributos

EJEMPLO DE TABLAS
<html>
<head>
<title> Tabla 1 </title>
</head>
<body>

<h3> Esto es una tabla con 3 columnas y una fila </h3>
<TABLE BORDER="5" WIDTH="300" bgcolor="pink">

    <TD WIDTH=100> <p align="center"> <font face="arial" color="green">
        Hola
    </TD> </p> </font>

    <TD WIDTH=100> <p align="center"> <font face="arial" color="green">
        Hola
    </TD> </p> </font>


    <TD WIDTH=100> <p align="center"> <font face="arial" color="green">
        Hola
    </TD> </p> </font>

</TABLE>


<h3> Esto es una tabla con 3 columnas y 2 filas </h3>
<TABLE BORDER="2" WIDTH="300">

<TR>
<TD WIDTH=100 bgcolor="yellow"> <p align="center"> <font face="arial" color="blue"> 1
</TD> </p> </font>

<TD WIDTH=100 bgcolor="yellow"> <p align="center"> <font face="arial" color="blue">2
</TD> </p> </font>

<TD WIDTH=100 bgcolor="yellow"> <p align="center"> <font face="arial" color="blue">3
</TD> </p> </font>
</TR>

<TR>
<TD WIDTH=100 bgcolor="sky blue"> <p align="center"> <font face="arial" color="blue">4
</TD> </p> </font>

<TD WIDTH=100 bgcolor="sky blue"> <p align="center"> <font face="arial" color="blue">5
</TD> </p> </font>

<TD WIDTH=100 bgcolor="sky blue"> <p align="center"> <font face="arial" color="blue">6
</TD> </p> </font>
</TR>

</TABLE>

<h3> Esto es una tabla combinada  con  columnas y  filas </h3>
<table width="575" border="2" cellspacing="2">
  <tr align="center" valign="middle">
    <th colspan="4">  <font face="arial" color="blue"> DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE</th>
  </tr>
  <tr align="center" valign="middle">
    <th rowspan="2">  <font face="arial" color="blue"> DIFERENCIAS</th>
    <th colspan="2">  <font face="arial" color="blue">PERRO</th>
    <th rowspan="2"> <font face="arial" color="blue"> HOMBRE</th>
  </tr>
  <tr align="center" valign="middle">
    <th>  <font face="arial">PEQUE&Ntilde;O</th>
    <th>  <font face="arial">GRANDE</th>
  </tr>
  <tr align="center" valign="middle">
    <td>  <font face="arial">Duraci&oacute;n crecimiento</td>
    <td>10 meses</td>
    <td>18 a 24 meses</td>
    <td>16 a&ntilde;os</td>
  </tr>
  <tr align="center" valign="middle">
    <td> <font face="arial">Tiempo de gestaci&oacute;n</td>
    <td colspan="2">58 a 63 d&iacute;as</td>
    <td>9 meses</td>
  </tr>
  <tr align="center" valign="middle">
    <td> <font face="arial">Duraci&oacute;n de vida del pelo/cabello</td>
    <td colspan="2">1 a&ntilde;o</td>
    <td>2 a 7 a&ntilde;os</td>
  </tr>
</table>

</body>
</html>

viernes, 5 de marzo de 2021

CLASE 58 LISTAS EN HTML

Fin en mente: Realizar un programa en HTML para aplicar diferentes estilos de viñetas por medio de listas ordenadas y listas con diferentes estilos de viñeta


<html>
<head>
<title> Listas </title>
</head>
   <body background="fondo-tecnológico-668980 (1).jpg">
   <ol>
   <p> <font face="verdana" size="8" color="blue"> Canciones romanticas </p> 
     <li value="5"> Monitor </li>
     <li> Liston de tu pelo </li>
     <li> Ni que estuvieras tan buena </li> </font>
   </ol>

   <ul>
     <p> <font face="arial" size="8" color="brown"> Canciones de banda </p> 
     <li type="circle">Fuiste mia </li>
     <li type="circle"> Broche de oro </li>
     <li type="circle"> Ya te perdi la fe </li> </font>
   </ul>

   <ul>
     <p> <font face="algerian" size="8" color="purple"> Canciones de reggeton </p> 
     <li type="square">Candy </li>
     <li type="square"> Hasta el amanecer </li>
     <li type="square"> Borro casette </li> </font>
   </ul>

   <ul>
     <p> <font face="calibri" size="8" color="yellow"> Canciones de salsa </p> 
     <li type="disc"> Un monton de estrellas </li>
     <li type="disc"> Porque sera </li>
     <li type="disc"> Me tengo que ir </li> </font>
   </ul>

   <dt>
       <p> <font face="calibri" size="8" color="yellow"> Informatica
      <dd> Es  la ciencia que se encarga del proceso automatizado de la informacion por medio de un ordenador
    </p>
   </font>
   </dd>
   </dt>
</body>
</html>

martes, 2 de marzo de 2021

CLASE 56 Y 57 SEPARADORES Y MARQUESINAS

Fin en mente: Aplicar en una página web la etiqueta <hr> para separar  bloques y la etiqueta <marquee> para darle movimiento a un texto
Para separar un texto de otro o un párrafo de otro podemos utilizar una línea horizontal de un tamaño o un grosor determinado por nosotros. Esa franja la escribimos con la etiqueta <hr>. La contrario que muchas etiquetas html, ésta no necesita ser cerrada. Sólo con escribir la etiqueta anterior ya la escribimos.

La etiqueta <hr>, como muchas otras etiquetas, puede variar de aspecto dependiendo de una serie de caracteres o parámetros que podemos predefinir. Por ejemplo, podemos definir su grosor mediante el parámetro size.

Para escribir este parámetro en la etiqueta escribiremos “size=x”, siendo “x” el número del grosor de la franja. A continuación te vamos a ofrecer dos ejemplos de franjas con diferentes grosores, siendo la primera 10 y la segunda dos. La diferencia es abismal

<hr size="20" />
<hr size="2"  />
A continuación vamos a escribir una franja de 75% de ancho:   <hr width=75%"/>
Muchos navegadores hacen esta franja con una sombra exterior que transforma la franja en tres dimensiones. Si quieres que la franja sea simple, sin sombrita deberás escribir el parámetro “noshade”.

También podemos predefinir el color que le queremos dar a la franja con el parametro "color". Es muy sencillo. Por ejemplo, si queremos que nuestra franja sea de color rojo sólo debemos ponerle la etiqueta: <hr color="#FF0000"/>.

Por último, puedes hacer que la franja quede alineada a un lado, a otro, o al centro del párrafo mediante el parámetro que ya vimos con anterioridad: “align”. “align = center” para el centro, “align = right” para la derecha y “align = left” para la izquierda.

Como ejemplos finales vamos a hacer dos franjas. La primera va a ser una franja de grosor 3, de un ancho del 50% y alineada al centro.

<hr size=3 width= 50% align=center/>

La siguiente va a ser una franja de grosor  2, de ancho 80%, sin sombra y alineada a la derecha.

<hr size=2 width=80% noshade=“noshade” align= right />
La etiqueta html <marquee> se utiliza para insertar un área de texto en movimiento. También se la conoce como marquesina.

Atributos

El movimiento, la dirección de desplazamiento, la velocidad del mismo,…todo es configurable gracias a los siguientes atributos:

align: Este atributo nos indicará si el texto dentro de la etiqueta se alineará en la zona alta del marquee ("top"), en el medio ("middle") o en la parte baja ("bottom").

direction: Sirve para definir la dirección del movimiento: "left" para la izquierda, "right" para la derecha, "top" para arriba y "down" para abajo.

behavior: Gracias a este atributo podemos dar nuevos efectos a la marquesina. Si no especificamos este atributo, el texto se moverá de forma circular en el sentido que le hayamos marcado. Con behavior="scroll" conseguiremos el mismo efecto: el texto se moverá circularmente.
Con behavior="slide" haremos que el texto se detenga al llegar al final de la marquesina. Y con el behavior="alternate" el texto irá y volverá de un lado a otro de la marquesina.

bgcolor
Establece el color de fondo, puede utilizarse el nombre, o el valor hexadecimal del color.
direction
Establece la dirección en la que el texto contenido se desplazará. Los valores posibles son left (para moverse hacia la izquierda), right (para moverse a la derecha), up (hacia arriba) y down (hacia abajo). Si no se especifica este atributo, por defecto será left.
height
Establece la altura de la etiqueta en pixeles, o en un valor porcentual.
hspace
Establece el margen horizontal.
loop
Establece el número de veces que la marquesina realizará el desplazamiento. Si no se especifica esta propiedad, por defecto es -1, lo que quiere decir que la marquesina se desplazará continuamente.
scrollamount
Establece el valor de movimiento para cada intervalo en pixeles. Por defecto su valor es 6.
scrolldelay
Establece el intervalo entre cada desplazamiento, en milisegundos. El valor por defecto es 85. Nota: Cualquier valor inferior a 60 será ignorado, (puesto que el valor minimo es 60) y se establecerá 60 en su lugar. Salvo que se especifique truespeed.
truespeed
Por defecto, si los valores de scrolldelay son inferiores a 60 serán ignorados. Pero si truespeed está presente, esos valores inferiores a 60 serán aceptados.
vspace
Establece el margen vertical en pixeles o en un valor porcentual.
width
Establece el ancho de la etiqueta en pixeles o un valor porcentual.

Eventos

onbounce
Este evento se lanza cuando la marquesina llegó al final del desplazamiento. Ésto solo se activa cuando el atributo behavior está establecido en alternate.
onfinish
Este evento se lanza cuando la marquesina repitió el desplazamiento la cantidad de veces establecidas en el atributo loop. El evento se lanza solo si el atributo loop tiene un valor mayor a 0.
onstart
Este evento se lanza cuando la marquesina comienza su desplazamiento.

Metodos

start
Comienza el desplazamiento de la marquesina.
stop
Para el desplazamiento de la marquesina

Ejemplos


<html>

<head>

<title> separadores y marquesinas </title>

</head>

<body background="file:///C|/Users/prepa1/Desktop/images (1).jpg">



<marquee bgcolor="red" scrollamount="100 direction="right">
<p align="center"> <font face="verdana" size="10"> Mi nombre es: </p> </font> </marquee>
<p align="center"> <font face="verdana" size="10"> Guiomar </p> </font> 
<hr size="20" color="yellow">

<marquee bgcolor="red" scrolldelay="100 direction="left">
<p align="center"> <font face="verdana" size="10"> Mi deporte favorito es: </p> </font> </marquee>
<p align="center"> <font face="verdana" size="10"> Squash </p> </font> 
<hr size="8" color="green">


<marquee width="50%" bgcolor="red" scrolldelay="100 direction="left">
<p align="center"> <font face="verdana" size="10"> Mi snack favorito es: </p> </font> </marquee>
<p align="center"> <font face="verdana" size="10"> Papas a la francesa </p> </font> 
<hr width="80%"  color="black">

<marquee><font face="verdana" size="10"> Este texto se mueve de derecha a izquierda </font></marquee>

<marquee direction="up"><font face="verdana" size="10"> Este texto se mueve de abajo hacia arriba </font></marquee>

<marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid">
  <marquee behavior="alternate"> <font face="verdana" size="10">
    Este texto rebotará dentro de la marquesina.
   </font> </marquee>
</marquee>

</body>
</html>






sábado, 27 de febrero de 2021

CLASE 55 PROGRAMA CON HIPERVINCULOS

Fin en mente: Realizar un programa de HTML para que el  programa muestra en pantalla un link en una página web, con texto y con imágenes

<HTML>
 <head>
 <title> hipervinculo </title>
 </head>
 <body bgcolor="purple">
<br> <a href="www.google.com"> Este link me lleva a la pagina de google </a> </br>
<br> <a href="www.instagram.com"> Va a la pagina de instagram </a> </br>
<br> <a href="www.hotmail.com"> Este link me lleva a hotmail </a> </br>

<font face="arial" size="14"> Los siguentes links son con imagenes  </font>
<br> <a href="www.netflix.com"> <img src="/Users/Guest/Desktop/images.jpeg"> </br> </a>
<br> <a href="www.facebook.com"> <img src="/Users/Guest/Desktop/images.png"> </br> </a>
<br>  <a href="www.twitter.com"> <img src="/Users/Guest/Desktop/images-1.png"> </br> </a>
 </body>
 </HTML>

miércoles, 24 de febrero de 2021

CLASE 54 IMAGENES

Fin en mente: Realizar un programa en HTML, para insertar imágenes en un sitio web donde usaremos la etiqueta <img>.

Esta etiqueta debe ir acompañada del atributo src que es el que contiene el URL de la ubicación del archivo de la imagen.

El atributo alt se utiliza para dar una breve descripción de la imagen, la cual podremos observar en caso que el navegador del usuario, por alguna razón, no muestre la misma.

La etiqueta <img> no tiene cierre necesariamente
Sintaxis
<img src="file://y a dirección de la imagen" alt="texto descriptivo de la imagen">
Ejemplo:

<img src="/../imagenes/foto1.jpg" alt="Dos niñas de la mano">



Debemos aclarar que no con todos los navegadores podemos ver el "alt" de manera visual. Hay algunos que no lo representan.

Atributos opcionales pero muy recomendables, son el height y el width. El height marca la altura de la imagen, mientras que el width marca la anchura. Son recomendables porque así ayudaremos al navegador a representar la imagen.

Y por último, también queremos mostrarte que le puedes adjudicar un borde a la fotografía. El atributo ya te lo sabes: "border". Después solo tendrás que definir cuál quieres que sea el grosor del borde.

Así las cosas, deberemos escribir este código



<img src="html/imagenes/prueba.jpg" border="1" alt="Este es el ejemplo de un texto alternativo" width="400" height="300">


Recuerda que para saber la dirección de la siguiente imagen debes dar botón derecho e ir a propiedades; deberás seleccionar la ubicación copiarla y pegarla en (*); copia el nombre de la imagen y agrega .jpg

Otra opción es ir a la imagen en Internet y copiar la dirección de la imagen y regala en tu codigo de HTML


<html>
<head>
<title>   Imagenes </title>
<head>
<body bgcolor="pink">
<img src="file//(*) pega la dirección de la ubicación de tu imagen; pega el nombre de la imagen agrégale la extensión   .jpg " y continuación agrega algunos atributos que sean necesarios para tu programa>

</body>
</html>


martes, 23 de febrero de 2021

CLASE 53 ETIQUETA DE FUENTE EN HTML Y SUS ATRIBUTOS (font, size y color)

Fin en mente: Realizar un programa de HTML para poner fuente, tamaño y color 

Propiedades del Texto

Las propiedades del texto pueden modificarse a través de la etiqueta . Para ello, podemos insertar el texto entre las etiquetas y , especificando algunos de los atributos de la etiqueta:
FACE: Fuente. nombre de la fuente, o fuentes
COLOR: Color del texto. número hexadecimal o texto predefinido en ingles
SIZE: Tamaño del texto. valores del 1 al 7, siendo por defecto el 3, o desplazamiento respecto al tamaño por defecto, añadiendo + o - delante del valor
Por ejemplo, para insertar el texto:


<html>
<head>
<title> Fuente, tamaño y color </title>
</head>
<body bgcolor="green">

<br> <font face="times new roman" color="blue" size="20"> <p align="center">  Hay una serpiente en mi bota </font> </p> </br> 

<br> <font face="century gothic"  color="red" size="10"> <p align="left"> Al infinito y mas alla  </font> </p> </br>

<br> <font face="arial" color="orange" size="-80"> <p align="center"> Estuve escondido  bajo tu casa porque te amo</font> </p> </br>

<br> <font face="times new roman" color="pink" size="-20"> <p align="left"> Sino puedes decir algo lindo mejor no digas nada </font> </p> </br> 

<br> <font face="century gothic" color="black" size="10"> <p align="center"> Ohana, significa familia  </font> </p> </br>

<br> <font face="arial"  color="purple" size="34"> <p align="left"> Nuestro destino vive en nosotros </font> </p> </br>

</body>

</html>