INFORMÁTICA 4°: 2021

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

www.maresyoceanos.com

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">
 Frutas
 
</td>
</tr>

<tr>
<td> Frutas Citricas
<ol>
<li type="circle"> Mandarina
<li type="circle"> Naranja
<li type="circle"> Lima
<li type="circle"> Toronja
</ol> </td>

<td> Frutas Silvestres
<ul>
<li type="disc"> Uva </li>
<li type="disc"> Kiwi </li>
<li type="disc"> Fresa </li>
<li type="disc"> Mora </li>
</ul> </td>

<td> Frutas Tropicales
<ul>
<li type="square"> Coco </li>
<li type="square"> Mango </li>
<li type="square"> Platano </li>
<li type="square"> Sandia </li>
 </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>

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

Hola

</TD>

Hola

</TD>

Hola

</TD>

</TABLE>

<h3> Esto es una tabla con 3 columnas y 2 filas </h3>

<TR>

<TD WIDTH=100 bgcolor="yellow"> 1

</TD>

<TD WIDTH=100 bgcolor="yellow"> 2

</TD>

<TD WIDTH=100 bgcolor="yellow"> 3

</TD>

</TR>

<TR>

<TD WIDTH=100 bgcolor="sky blue"> 4

</TD>

<TD WIDTH=100 bgcolor="sky blue"> 5

</TD>

<TD WIDTH=100 bgcolor="sky blue"> 6

</TD>

</TR>

</TABLE>

<h3> Esto es una tabla combinada con columnas y filas </h3>

<th colspan="4"> DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE</th>

</tr>

<th rowspan="2"> DIFERENCIAS</th>

<th colspan="2"> PERRO</th>

<th rowspan="2"> HOMBRE</th>

</tr>

<th> PEQUEÑO</th>

<th> GRANDE</th>

</tr>

<td> Duración crecimiento</td>

<td>10 meses</td>

<td>18 a 24 meses</td>

</tr>

<td> Tiempo de gestación</td>

<td>9 meses</td>

</tr>

<td> Duración de vida del pelo/cabello</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>

<ol>

Canciones romanticas

<li value="5"> Monitor </li>

<li> Liston de tu pelo </li>

<li> Ni que estuvieras tan buena </li>

</ol>

<ul>

Canciones de banda

<li type="circle">Fuiste mia </li>

<li type="circle"> Broche de oro </li>

<li type="circle"> Ya te perdi la fe </li>

</ul>

<ul>

Canciones de reggeton

<li type="square">Candy </li>

<li type="square"> Hasta el amanecer </li>

<li type="square"> Borro casette </li>

</ul>

<ul>

Canciones de salsa

<li type="disc"> Un monton de estrellas </li>

<li type="disc"> Porque sera </li>

<li type="disc"> Me tengo que ir </li>

</ul>

<dt>

Informatica

<dd> Es la ciencia que se encarga del proceso automatizado de la informacion por medio de un ordenador

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

Mi nombre es: </marquee>

Guiomar

Mi deporte favorito es: </marquee>

Squash

Mi snack favorito es: </marquee>

Papas a la francesa

<marquee> Este texto se mueve de derecha a izquierda </marquee>

<marquee direction="up"> Este texto se mueve de abajo hacia arriba </marquee>

Este texto rebotará dentro de la marquesina.

</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">
 <a href="www.google.com"> Este link me lleva a la pagina de google </a> 
 <a href="www.instagram.com"> Va a la pagina de instagram </a> 
 <a href="www.hotmail.com"> Este link me lleva a hotmail </a> 

 Los siguentes links son con imagenes 
 <a href="www.netflix.com"> <img src="/Users/Guest/Desktop/images.jpeg"> </a>
 <a href="www.facebook.com"> <img src="/Users/Guest/Desktop/images.png"> </a>
 <a href="www.twitter.com"> <img src="/Users/Guest/Desktop/images-1.png"> </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

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

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>

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>

Hay una serpiente en mi bota

Al infinito y mas alla

Estuve escondido bajo tu casa porque te amo

Sino puedes decir algo lindo mejor no digas nada

Ohana, significa familia

Nuestro destino vive en nosotros 

</body>

</html>

INFORMÁTICA 4°

Translate

viernes, 12 de marzo de 2021

GUÍA 4TO BIMESTRE

miércoles, 10 de marzo de 2021

CLASE 60 PROGRAMA

martes, 9 de marzo de 2021

CLASE 59 TABLAS

sábado, 6 de marzo de 2021

CLASE 59 TABLAS EN HTML

viernes, 5 de marzo de 2021

CLASE 58 LISTAS EN HTML

martes, 2 de marzo de 2021

CLASE 56 Y 57 SEPARADORES Y MARQUESINAS

Atributos

Eventos

Metodos

Ejemplos

sábado, 27 de febrero de 2021

CLASE 55 PROGRAMA CON HIPERVINCULOS

miércoles, 24 de febrero de 2021

CLASE 54 IMAGENES

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

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

Seguidores Miss Informática

Reloj