2018 Noveno Tecnología e Informática: febrero 2018

viernes, 23 de febrero de 2018

Párrafos, encabezados y marquesinas

Asignatura: Tecnología e Informática
Formación en valor: Sentido de pertenencia.
Núcleo integrador: Párrafos, encabezados y marquesinas.
Indicador de desempeño: Aplica formatos de párrafo, encabezado y marquesinas a una página web.

Exploración Cognitiva

¿Sabes que es un párrafo en sistemas?

Párrafos <p>

El texto de una página puede agruparse en párrafos. Para ello, el texto de cada uno de los párrafos debe insertarse entre las etiquetas <p> y </p>.

No es necesario insertar la etiqueta <br> para que un nuevo párrafo aparezca debajo del anterior, ya que las etiquetas <p> y </p> hacen que se cambie de línea automáticamente.

También es posible cambiar la alineación del texto de cada párrafo. Para ello se modifica el valor del atributo align, cuyos valores pueden ser left (izquierda), right (derecha), center (centrado) o justify (justificado).

Encabezados <h1> ...

Existen una serie de encabezados que suelen utilizarse para establecer títulos dentro de una página. La diferencia entre los distintos tipos de encabezado es el tamaño de la letra, el tipo de resaltado, y la separación existente entre el texto y los elementos que tiene encima y debajo de él. Existen seis etiquetas que representan seis tipos de cabeceras distintas. Todas estas etiquetas precisan una etiqueta de cierre.

A estas etiquetas poseen el atributo align.

Etiqueta	Ejemplo
<H1>	Título 1: HTML
<H2>	Título 2: HTML
<H3>	Título 3: HTML
<H4>	Título 4: HTML
<H5>	Título 5: HTML
<H6>	Título 6: HTML

Marquesinas <marquee>

Las marquesinas son líneas de texto que pueden desplazarse de un lado a otro de la ventana en forma de línea.

Para insertar una marquesina, es necesario insertar el texto entre las etiquetas <marquee> y </marquee>.

La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si lo deseas puedes hacer que estas propiedades varíen.

A través del atributo behavior puede modificarse el tipo de movimiento. Puede tomar los valores:

alternate (de lado a lado de la ventana, como si rebotara en los extremos).

scroll (de un lado a otro, continuamente)

slide (de un lado a otro, pero una sola vez).

A través del atributo direction puede modificarse la dirección en la que se moverá el texto. Puede tomar los valores:

down (de arriba a abajo),

up (de abajo a arriba),

right (de derecha a izquierda)

left (de izquierda a derecha).

También es posible establecer un color de fondo, a través del atributo bgcolor

Ejemplo:

<HTML>
<HEAD> <TITLE> Parrafos - Marquesinas </TITLE> </HEAD>
<BODY BACKGROUND="FONDO.GIF" TEXT="WHITE">
<marquee behavior="alternate">
<H1> <CENTER> Tema Principal </CENTER> </H1>
</marquee>

<H2> <CENTER> Tema Principal </CENTER> </H2>
<H3> <CENTER> Tema Principal </CENTER> </H3>
<H4> <CENTER> Tema Principal </CENTER> </H4>
<H5> <CENTER> Tema Principal </CENTER> </H5>
<H6> <CENTER> Tema Principal </CENTER> </H6>
<P align="justify">
<FONT FACE="ARIAL" COLOR="red" SIZE="5">
En esta parte del documento debo escribir una explicación del tema principal
En esta parte del documento debo escribir una explicación del tema principal
En esta parte del documento debo escribir una explicación del tema principal
En esta parte del documento debo escribir una explicación del tema principal
En esta parte del documento debo escribir una explicación del tema principal
En esta parte del documento debo escribir una explicación del tema principal
En esta parte del documento debo escribir una explicación del tema principal
En esta parte del documento debo escribir una explicación del tema principal
En esta parte del documento debo escribir una explicación del tema principal
En esta parte del documento debo escribir una explicación del tema principal
En esta parte del documento debo escribir una explicación del tema principal
</FONT>
</P>

</BODY>

</HTML>

Taller:
Desarrolla una página web que contenga 3 párrafos, cada uno de ellos debe tener características diferentes.
Títulos y Marquesinas diferentes.
Aplique fuentes, color y tamaño del texto (Tema anterior) diferente por cada párrafo.

viernes, 16 de febrero de 2018

Formatear Texto.

Asignatura: Tecnología e Informática

Formación en valor: Sentido de pertenencia.

Núcleo integrador: Formatear Texto.

Indicador de desempeño: Identifica y aplica las etiquetas para formatear texto.

Exploración Cognitiva

¿Sabes que es dar formato a un texto?

Formatear el texto <font> ...

Las propiedades del texto pueden modificarse a través de la etiqueta <font>. Para ello, podemos insertar el texto entre las etiquetas <font> y </font>, especificando algunos de los atributos de la etiqueta:

Atributo	Significado	Posibles valores
face	fuente	nombre de la fuente, o fuentes
color	color del texto	número hexadecimal o texto predefinido
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:

Bienvenidos a mi pagina

Habría que escribir:

<font color="Blue size="4" face="Arial ">Bienvenidos a mi pagina </font>

También es posible definir una fuente para todo el documento. Para ello, hay que insertar la etiqueta <basefont> después de la etiqueta <body>.

La etiqueta <basefont> no necesita una etiqueta de cierre, y permite modificar los mismos atributos del texto que la etiqueta <font>.

Por ejemplo:

<body>
<basefont color="Blue" size="4" face="Arial">
...

Este código haría que la fuente del documento fuera por defecto de color azul, de tamaño 4 y Arial. Si después de indicar la etiqueta <basefont> o <font>, el navegador encuentra otra etiqueta <font>, la que prevalece es siempre la última que se encuentra.

Resaltado del texto <b> ...

Existen una serie de etiquetas que permiten aplicar diferentes estilos al texto que se encuentra entre ellas, y generalmente se utilizan para resaltarlo. Estos estilos pueden agruparse según vayan asociados al tipo de letra o a la información que represente el texto. No hay que olvidar que todas estas etiquetas necesitan una etiqueta de cierre, y que pueden aplicarse varias etiquetas al mismo texto.

A continuación se muestran algunas etiquetas asociadas al tipo de letra:

Etiqueta	Significado	Ejemplo
<b>	Negrita	Negrita
<i>	cursiva	Cursiva
<u>	subrayado	Subrayado
<s>	tachado	~~Tachado~~
<tt>	teletipo (máquina de escribir)	Letra Maquina escribir
<big>	aumenta el tamaño de la fuente	Letra Grande
<small>	disminuye el tamaño de la fuente	Letra Pequeña

Tomado de AulaClic.es

Ejemplo
<HTML>
<HEAD> <TITLE> MARIA CRISTINA </TITLE> </HEAD>
<BODY BACKGROUND="FONDO.GIF" TEXT="WHITE">
<FONT FACE="ARIAL" COLOR="RED" SIZE="6">
EL CELULAR <BR>
</FONT>
<FONT FACE="Bauhaus 93" COLOR="BLUE" SIZE="4">
EN ESTA PARTE DEBO EXPLICAR EL TEMA <BR>
DEBO CONTINUAR CON LA EXPLICACION <BR>
</FONT>
<FONT FACE="ARIAL" COLOR="RED" SIZE="6">
SAMSUNG <BR>
</FONT>
<FONT FACE="Bauhaus 93" COLOR="BLUE" SIZE="4">
EN ESTA PARTE DEBO EXPLICAR EL TEMA <BR>
DEBO CONTINUAR CON LA EXPLICACION<BR>
</FONT>
<FONT FACE="ARIAL" COLOR="RED" SIZE="6">
IPHONE <BR>
</FONT>
<FONT FACE="Bauhaus 93" COLOR="BLUE" SIZE="4">
EN ESTA PARTE DEBO EXPLICAR EL TEMA <BR>
DEBO CONTINUAR CON LA EXPLICACION <BR>
</FONT>
</BODY>
</HTML>

viernes, 9 de febrero de 2018

Manejo de Texto

Asignatura: Tecnología e Informática.
Formación en Valor: Sentido de pertenencia
Núcleo Integrador: Manejo de texto.
Indicador de desempeño: Dar a conocer las etiquetas para caracteres especiales.

E.C.P.

¿Sabes que los caracteres especiales, tienen su propia etiqueta?

Se debe tener en cuenta el orden de mayúsculas y minúsculas.

Carácter	Representación
<	<
>	>
á	á
Á	Á
é	é
É	É
í	í
Í	Í
ó	ó
Ó	Ó
ú	ú
Ú	Ú
ñ	ñ
Ñ	Ñ
™
Carácter	Representación
€	€
ç	ç
Ç	Ç
ü	ü
Ü	Ü
&	&
¿	¿
¡	¡
"	"
·	·
º	º
ª	ª
¬	¬
©	©
®	®

Comentarios

En ocasiones podemos desear añadir comentarios aclaratorios dentro del código, de manera que no sean visualizados en el navegador, pero sí a la hora de editar el documento.

Para insertar comentarios dentro del código, basta con insertar el texto entre .

Todo el código que se inserte entre estos símbolos no será visualizado en los navegadores.

Por ejemplo, para insertar el texto siguiente con un comentario:

¡Bienvenidos, esta es mi 1ª página!

Habría que escribir:

¡Bienvenidos, esta es mi 1ª página!

Saltos de línea <br>

En general, cuando trabajamos con un editor de texto se produce un salto de línea al pulsar la tecla INTRO.

Si pulsamos INTRO en un documento HTML, el salto de línea se producirá en el código, pero no se mostrará en el navegador. Para que se produzca el salto de línea en el navegador, en lugar de pulsar la tecla INTRO hay que insertar la etiqueta <br> donde se desee que se produzca el salto.

La etiqueta <br> no precisa ninguna etiqueta de cierre. No hay que insertar la etiqueta </br> después de ella, ya que dicha etiqueta no existe.

Por ejemplo, para insertar el texto:

Queridos usuarios,
tengo el placer de comunicaros que hay una nueva sección.

Habría que escribir:

Queridos usuarios,<br>tengo el placer de comunicaros que hay una nueva secci&oacuten.

Texto preformateado <pre>

Una forma de asegurarnos de que el texto aparezca en el navegador tal cual ha sido insertado dentro del código, es utilizando las etiquetas <pre> y </pre>.

Utilizando estas etiquetas podemos tener la seguridad de que en el navegador se mostrarán todos los espacios en blanco que se inserten en el texto, así como todos los saltos de línea resultantes de pulsar la tecla INTRO, sin la necesidad de utilizar la etiqueta <br>.

Por ejemplo, para insertar el texto:

Hola, BIENVENIDOS

esta ES MI PÁGINA WEB

y esto un texto preformateado

Habría que escribir:

<pre>Hola,     BIENVENIDOS
esta     ES MI PÁGINA WEB
     y esto un texto preformateado</pre>

El inconveniente de esta etiqueta es que entre las etiquetas <pre> y </pre> no se pueden incluir las etiquetas <img> (para incluir imágenes), <object> (para incluir objetos como animaciones), <big>, <small>, <sub> ni <sup> (las veremos en este tema).

Separadores <hr>

El elemento que suele utilizarse para separar secciones dentro de una misma página es la regla horizontal. Para insertar una regla horizontal hay que insertar la etiqueta <hr>. Dicha etiqueta no precisa ninguna etiqueta de cierre.

Es posible especificar algunos atributos de la regla horizontal:

Atributo	Significado	Posibles valores
align	alineación de la regla dentro de la página	left (izquierda) right (derecha) center (centro)
width	ancho de la regla	un número, acompañado de % cuando se desee que sea en porcentaje
size	alto de la regla	un número
noshade	eliminar el sombreado de la regla	no puede tomar valores

Por ejemplo, para insertar el texto y la regla horizontal siguientes:

Inicio

Bienvenidos a mi página.

Habría que escribir:

Inicio<hr align="left" width="300%" size="5" noshade>Bienvenidos a mi página.

Sangrado de texto <blockquote>

La sangría es una especie de margen que se establece a ambos lados del texto. Para que un texto aparezca sangrado, se inserta entre las etiquetas <blockquote> y </blockquote>.

Esta etiqueta en un principio se definió para delimitar citas pero que como la mayoría de los navegadores resuelven la cita incluyendo un sangrado del texto, su uso para sangrar texto se ha generalizado.

El uso de la etiqueta <blockquote> obliga a que el texto aparezca en una nueva línea.

Insertando el texto entre varias etiquetas <blockquote> y </blockquote> se consigue que los márgenes sean mayores.

Por ejemplo, para insertar el texto:

Queridos usuarios,

tengo el placer de comunicaros que hay una nueva sección.

Habría que escribir:

Queridos usuarios,
<blockquote>
  <blockquote>
  tengo el placer de comunicaros que hay una nueva secci&oacuten.
  </blockquote>
</blockquote>

Material de referencia AulaClic

viernes, 2 de febrero de 2018

I PERIODO 9 GRADO- RED DE PROCESOS COGNITIVOS INTEGRADOS

Grado: Noveno

Asignatura: Tecnología e Informática

Docente: Betsauro Palomino Díaz

Periodo: I

Año: 2018

· Componente

o Apropiación y uso de la Informática con Lenguajes de programación.

o Naturaleza y evolución de la tecnología.

· Competencias a desarrollar

o El estudiante comprenderá y desarrollará habilidades y destrezas que le permitan conocer y aplicar las opciones de un lenguaje de programación como HTML para crear páginas web.

· Estándares Básicos de competencias

o Comprendo y aplico las diferentes etiquetas de manejo de texto que conforman al lenguaje HTML.

· Eje Curricular

o Creación De Páginas Web.

o Evolución de la tecnología.

· Núcleos integrador

1. Ambientación - conducta de entrada.

2. HTML – Editores y Estructura de una pagina

3. Manejo de texto.

4. Formatear Texto.

5. Párrafos, encabezados y marquesinas.

6. Hiperenlaces.

7. inventos importantes y significativos en el desarrollo de la tecnología.

· Logros

o Conocer y aplicar las etiquetas básicas para el manejo y formato de texto de páginas web con código HTML.

o Identificar los inventos que han sido importantes y significativos en el desarrollo de la tecnología.

o Escuchará atentamente las explicaciones dadas en clase y las participaciones de sus compañeras.

o Aplicara correctamente las normas de cuidado en la sala de cómputo.

· Indicador de desempeño

o El estudiante podrá crear y dar formato a páginas web básicas utilizando código HTML.

Fecha: Enero 26 de 2018
Asignatura: Tecnología e Informática.
Formación en valor: Sentido de pertenencia.
Núcleo Integrador: Prueba Diagnostica.
Indicador de desempeño: Reconoce las normas que posee la institución.
E.C.P
¿Sabes cuales son las normas o reglas del colegio?

Fecha: Febrero 2 de 2018
Asignatura: Tecnología e Informática.
Formación en valor: Sentido de pertenencia.
Núcleo Integrador: HTML - .
Indicador de desempeño: Reconoce las normas que posee la institución.
E.C.P

¿Sabes cuales son las normas o reglas del colegio?

¿Sabes utilizar el Bloc de Notas?

Taller1:

Tenga en cuenta los siguientes pasos:

1. Entre al bloc de Notas de Windows.

2. Escriba la siguiente estructura:

<HTML>

<HEAD> <TITLE> ESCRIBE TU NOMBRE </TITLE> </HEAD>

<BODY>

ESTA PARTE ES EL CUERPO DEL DOCUMENTO <BR>

ESCRIBE TUS DATOS PERSONALES <BR>

NOMBRES: XXX <BR>

APELLIDOS: XXX <BR>

DIRECCION: XXX <BR>

CORREO: XXX <BR>

CURSO: XXX <BR>

</BODY>

</HTML>

3. Graba el archivo del Bloc de Notas de la siguiente forma:

a.Archivo, Guardar Como.

b. En la ventana Guardar Como, selecciona TIPO "Todos los archivos" .

c. En la opción Nombre: Mi pagina.HTML

d. Asegúrate de estar en la carpeta Documentos y Clic en Guardar.

4. Ir con el explorador de Windows (Tiene una carpeta amarrilla) y dar doble clic al archivo:

Mi pagina.HTML