2020 Grado 9 de Tecnología e Informática: 2020

martes, 3 de noviembre de 2020

martes, 22 de septiembre de 2020

Análisis y Diseño de páginas Web - Insertar Objetos

martes, 15 de septiembre de 2020

Análisis y Diseño de páginas Web - Google Sites

Click en la imagen para ver la clase.

martes, 1 de septiembre de 2020

martes, 25 de agosto de 2020

Botón, Casillas de verificación y Botón de opciones

Click en la imagen para ver la clase

martes, 18 de agosto de 2020

Áreas de texto, Elementos de entrada y Campo Contraseña.

Taller Nro 2

Copie el siguiente código y grabarlo con la extensión HTML

Para ser analizado en clase:

<html>

<head> <title> Formularios en páginas Web </title></head>

<BODY>

<CENTER> <H1>ENCUESTA DEL COLEGIO EUCARISTICO</H1> </CENTER>

<form>

<TR>

<TD>

<B>ESCRIBA SU NOMBRE COMPLETO </B> <BR>

</TD>

<TD>

<B> ESCRIBA SU DIRECCION </B> <BR>

</TD>

</TR>

<TR>

<TD>

<B> SELECCIONE EL SEXO </B> <BR>

MASCULINO <input name="SEXO" type="radio" value="masculino"> <BR>

FEMENINO <input name="SEXO" type="radio" value="femenino" checked>

</TD>

<TD>

<B> SELECCIONE LA ACTIVIDAD O ACTIVIDADES REALIZADA(S) </B> <BR>

ESTUDIO<input name="ACTIVIDAD" type="checkbox" value="ESTUDIO"> <BR>

TRABAJO<input name="ACTIVIDAD" type="checkbox" value="TRABAJO"> <BR>

AMA DE CASA<input name="ACTIVIDAD" type="checkbox" value="AMACASA"> <BR>

OTROS<input name="ACTIVIDAD" type="checkbox" value="OTROS"><BR>

</TD>

</TR>

<TR>

<TD>

<B> SELECCIONE LA CIUDAD </B>

<option selected>--- Elige la Ciudad ---</option>

<option>Cartagena</option>

<option>Barranquilla</option>

<option>Santa Marta</option>

</select>

</TD>

<TD>

<option selected>-- Que mascota tienes --</option>

<option>Perro</option>

<option>Ninguno</option>

</select>

</TD>

</TR>

<TR>

<TD>

<B> Fecha de nacimiento</B> <BR>

</TD>

<TD >

Edad Actual: <input type="number" name="edad" min="18" max="65" placeholder="18-65"

</TD>

</TR>

<TR>

<TD>

<B> Registrate en nuestra pagina, Email:</B> <BR>

</TD>

<TD >

Contraseña: <input type="password" name="clave" >

</TD>

</TR>

<TR>

<TD>

<B> Escriba las observaciones que tenga sobre el colegio </B> <BR>

Escribe tus observaciones

</textarea>

</TD>

<TD>

<B> Escriba la hora en que realizo la encuenta</B> <BR>

</TR>

<TR>

<BR>

</TD>

<BR>

</TD>

</TR>

</TABLE>

</form>

</BODY>

</html>

sábado, 8 de agosto de 2020

Formularios - Atributos

Formulario <form>

Un formulario es un elemento que permite recoger datos introducidos por el usuario.

Un formulario está formado, entre otras cosas, por etiquetas, campos de texto, menús desplegables, y botones.

Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando tablas se consigue una mejor distribución de los elementos del formulario, lo que facilita su comprensión y mejora su apariencia.

Los formularios se insertan a través de las etiquetas <form> y </form>. Entre dichas etiquetas habrá que insertar los diferentes objetos que formarán el formulario. la etiqueta <form>tiene los siguientes atributos:

Los formularios se utilizan para conocer las opiniones, dudas, y otra serie de datos sobre los usuarios, para introducir pedidos a través de la red, tienen multitud de aplicaciones.

El atributo action indica una dirección de correo electrónico a la que mandar el formulario, o la dirección del programa que se encargará de procesar el contenido del formulario.

El atributo enctype indica el modo en que será cifrada la información para su envío. Por defecto tiene el valor application/x-www-form-urlencoded.

El atributo method indica el metodo mediante el que se transferirán las variables del formulario. Su valor puede ser get o post.

El valor get se utiliza cuando no se van a producir cambios en ningún documento o programa que no sea el navegador del usuario que pretende mandar el formulario, como ocurre cuando se realizan consultas sobre una base de datos.

El valor post se utiliza cuando sí se van a producir cambios, como ocurre cuando el usuario manda datos que deben ser almacenados en una base de datos.

Se recomienda utilizar el valor post.

Ejercicio: Copie y pegue este código en un documento (Bloc de Notas) y grabe el archivo como EncuestaEuca.html

<html>
<head> <title> Formularios en páginas Web </title></head>
<BODY>
<CENTER> <H1>ENCUESTA DEL COLEGIO EUCARISTICO</H1> </CENTER>
<form>
<TABLE BORDER="1" WIDTH="100%">
<TR>
<TD>
<B>ESCRIBA SU NOMBRE COMPLETO </B> <BR>
<input name="nombre" type="text" value="Nombre Encuestado" size="40"

maxlength="45">
</TD>

<TD>
<B> ESCRIBA SU DIRECCION </B> <BR>
<input name="direccion" type="text" value="Dirección de residencia" size="60"

maxlength="100">
</TD>
</TR>

<TR>
<TD>
<B> SELECCIONE EL SEXO </B> <BR>
MASCULINO <input name="SEXO" type="radio" value="masculino"> <BR>
FEMENINO <input name="SEXO" type="radio" value="masculino" checked>
</TD>

<TD>
<B> SELECCIONE LA ACTIVIDAD O ACTIVIDADES REALIZADA(S) </B> <BR>
ESTUDIO<input name="ACTIVIDAD" type="checkbox" value="ESTUDIO"> <BR>
TRABAJO<input name="ACTIVIDAD" type="checkbox" value="TRABAJO"> <BR>
AMA DE CASA<input name="ACTIVIDAD" type="checkbox" value="AMACASA"> <BR>
OTROS<input name="ACTIVIDAD" type="checkbox" value="OTROS"><BR>
</TD>
</TR>

<TR>
<TD>
<B> SELECCIONE LA CIUDAD </B>
<select name="ciudad">
<option selected>--- Elige la Ciudad ---</option>
<option>Cartagena</option>
<option>Barranquilla</option>
<option>Santa Marta</option>
</select>
</TD>

<TD>
<select name="animal" size="3" multiple>
<option selected>---Elige animales---</option>
<option value="ave">Loro</option>
<option>Perro</option>
<option>Gato</option>
<option>Pez</option>
</select>
</TD>
</TR>

<TR>
<TD>
<B> Escriba las observaciones que tenga sobre el colegio </B> <BR>
<textarea name="Observaciones" cols="80" rows="3">
Escribe tus observaciones
</textarea>
</TD>
<TD align="CENTER">
<BR>
<input name="SUBMIT" type="submit" value="ENVIAR">
<BR> <BR>
</TD>
</TR>
</TABLE>
</form>
</BODY>
</html>

Debe aparecer la siguiente información:

webgrafia

aulaclic

lunes, 3 de agosto de 2020

Taller Marcos - Afrocolombianos

Click en la imagen para ver el tema

martes, 21 de julio de 2020

Taller Marcos

Analiza el siguiente código HTML y personalizalo teniendo en cuenta tu empresa.

Index.HTML

<html>

<head> <title>Pagina Principal de Mi Empresa</title> </head>

</frameset>

<body>

Esta Pagina no soporta Marco de Paginas

</body>

</noframes>

</html>

Marco_Izquierdo.HTML

<html>

</p>

<p>

</a>

</p>

<p>

</a>

</p>

</a>

</p>

</body>

</html>

Marco_Superior.HTML

<html>

<b>Ejemplo Para Trabajo Con Marcos o Frame </b>

</font>

</center>

</body>

</html>

Marco_Principal.HTML

<html>

ESCRIBA EL TEXTO DEL TEMA PRINCIPAL <BR> <BR>

TEXTO QUE MUESTRA LA INFORMACIÓN DE LA PÁGINA WEB

</font>

</center>

</body>

</html>

Marcos o Frame

Click en la imagen para ver el tema

Plan de Trabajo III Periodo

martes, 23 de junio de 2020

Organizar información utilizando Tablas

lunes, 15 de junio de 2020

Taller

Click en la imagen para ver el tema

miércoles, 10 de junio de 2020

Organizar información utilizando Tablas.

Click en la imagen para ver el tema y Taller

lunes, 1 de junio de 2020

Encabezado de Tablas - combinar celdas

Click en la imagen para ver el tema

lunes, 25 de mayo de 2020

Tablas

Clic en la imagen para ver el tema

martes, 19 de mayo de 2020

Entrega de talleres

lunes, 11 de mayo de 2020

Vínculos con imágenes - Atributos de IMG

Clic en la imagen para ver el tema

lunes, 4 de mayo de 2020

Plan de Trabajo II Periodo

Insertar Imágenes.

Para insertar una imagen es necesario insertar la etiqueta <img>. Dicha etiqueta no necesita etiqueta de cierre.

El nombre de la imagen ha de especificarse a través del atributo src.

Texto alternativo

Cuando una imagen no puede ser visualizada en el navegador, cosa que puede ocurrir al especificar mal el valor del atributo src, aparece un recuadro blanco con una X roja en su lugar, junto con el nombre de la imagen.

Podemos hacer que en lugar de mostrarse el nombre de la imagen aparezca el texto que nosotros deseemos, gracias al atributo alt.

Por ejemplo, imagina que deseamos mostrar una imagen llamada gatito.gif, con el texto alternativo Imagen gato, para ello insertamos el siguiente código:

Width= Ancho

Height = Alto

Ejemplo de una página web con imágenes insertadas e imágenes con vínculos
Tenga en cuenta: se debe crear 3 páginas:

principal.HTML

Pagina1.HTML

Pagina2.HTML

<html>
<head><title> Manejo de Imagenes</title></head>
<body background="fondo.JPG">

<marquee >
<IMG SRC="Imagen1.png" width= "600" height="200">
</marquee>
<br>

<center> <IMG SRC="Imagen2.jpg" width= "400" height="300"> </center>
<P>
<font face="arial" size="5" color="white">
Explica el tema Explica el tema Explica el tema Explica el tema
Explica el tema Explica el tema Explica el tema Explica el tema
Explica el tema Explica el tema Explica el tema Explica el tema
</font>
</P>

<P> <A HREF="Pagina2.HTML">
<IMG SRC="Imagen3.png" width= "200" height="150">
</A> </P>
<P> <A HREF="Pagina3.HTML">
<IMG SRC="Imagen4.gif" width= "300" height="80">
</A> </P>
</BODY>
</HTML>

martes, 21 de abril de 2020

Taller plataforma Zoom

V.J.E.
Formación en valor: Escucha.
Núcleo Integrador: Taller plataforma Zoom
Desempeño esperado: conocer y aplicar la plataforma Zoom.

Taller:
Clic para ver Taller Plataforma Zoom

domingo, 22 de marzo de 2020

Talleres Virtules

V.J.E.

Formación en valor: Escucha.

Núcleo Integrador: Talleres Virtuales.

Desempeño esperado: apropiación de los conceptos desarrollados en clase.

Buenos días, les recuerdo que tienen un taller pendiente para entregar, el cual deben entregar máximo hasta el día 27 de marzo

Taller:

Desarrollar un sitio web con las características anotadas en sus cuadernos:

Crear varias páginas web vinculadas entre si.

Principal.HTML

Debe tener vinculos hacia las otras páginas.

Mision.HTML

Debe tener vinculo hacia la pagina principal y las otras.

Vision.HTML

Debe tener vinculo hacia la pagina principal y las otras.

Objetivos.HTML

Debe tener vinculo hacia la pagina principal y las otras.

NOTA: en cada página se debe manejar los temas vistos en el periodo.

Manejo de fuentes, párrafos, Marquesinas, Imagen de fondo, Vinculos.

Fecha de entrega: Máximo viernes 27 de agosto.

Enviar en un solo correo los archivos, al correo: betpadi@gmail.com

Asunto al enviar el correo:
9A-Apellido Nombre-PDI

9B-Apellido Nombre-PDI

Tenga en cuenta que debe enviar todos los archivos en un solo correo. (Se les aconseja comprimir la carpeta del sitio web y enviar el archivo comprimido). o adjuntarlos de forma normal.

Nombre del archivo comprimido:

9A-Apellido Nombre-PDI

9B-Apellido Nombre-PDI

NOTA: se les agradece incorporar la nota de autoevaluación, para lo cual tenga en cuenta lo siguiente:

1. Actitud de escucha (a usted se le ha llamado la atención por interrumpir la clase).

2. Aseo: ¿su espacio de trabajo (Sala de sistemas, salón de clases) lo ha mantenido limpio?

3. Orden: ha mantenido su puesto de trabajo (Sala de sistemas, salón de clases), el desplazamiento a la sala de sistemas.

4. ¿Se le ha llamado la atención por alguna razón?

martes, 10 de marzo de 2020

Hiperenlaces

Referencia absoluta:
Conduce a una ubicación externa al sitio en el que se encuentra el documento. La ubicación es en Internet, en este caso hay que empezar la referencia por http:// , el nombre del dominio y algunas veces el nombre de la página. Si no se escribe el nombre de la página se cargará la página de inicio asociada al dominio.

Ejemplo:

http://colegioeucaristicomanga.edu.co

Referencia relativa al sitio:
Conduce a un documento situado dentro del mismo sitio que el documento actual. Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar o un objetivo común, estando todos ellos dentro de una misma carpeta, conocida como carpeta raíz del sitio.

Por ejemplo, teniendo en cuenta que el documento SubTema1.htm se encuentra dentro de una subcarpeta del sitio llamada paginas, para insertar el enlace:

Enlace a SubTema 1

Habría que escribir:

<a href="Paginas/SubTema1.htm">Enlace a SubTema 1 Hiperenlaces</a>

Referencia relativa al documento:
Conduce a un documento situado dentro del mismo sitio que el documento actual, pero partiendo del directorio en el que se encuentra el actual.

Por ejemplo, teniendo en cuenta que el documento SubTema1.htm se encuentra dentro de la misma carpeta que el documento actual, para insertar el enlace:

Enlace a Tema 4: Hiperenlaces

Habría que escribir:

<a href="SubTema1.htm">Enlace a Tema 4: Hiperenlaces</a>

Observa que en este caso no aparece el símbolo "/" delante del nombre del documento.

Ejemplo:

PRINCIPAL.HTML (Es el nombre del archivo)

<HTML>
<HEAD> <TITLE> Tema Principal</TITLE> </HEAD>
<BODY BACKGROUND="Fondo.jpg">
<H1>
<font face="Elephant" color="Red">
<marquee behavior="alternate">
Tema Principal
</marquee>
</font>
</H1>

<P>
<font face="Elephant" color="Red">
EXPLICAR EL TEMA PRINCIPAL, EXPLICAR EL TEMA PRINCIPAL,
EXPLICAR EL TEMA PRINCIPAL, EXPLICAR EL TEMA PRINCIPAL,
EXPLICAR EL TEMA PRINCIPAL, EXPLICAR EL TEMA PRINCIPAL,
EXPLICAR EL TEMA PRINCIPAL, EXPLICAR EL TEMA PRINCIPAL,
EXPLICAR EL TEMA PRINCIPAL, EXPLICAR EL TEMA PRINCIPAL,
EXPLICAR EL TEMA PRINCIPAL, EXPLICAR EL TEMA PRINCIPAL,
EXPLICAR EL TEMA PRINCIPAL, EXPLICAR EL TEMA PRINCIPAL,
</font>
</P>

<P> <A HREF="SUBTEMA1.HTML"> SUB TEMA UNO </A> </P>
<P> <A HREF="SUBTEMA2.HTML"> SUB TEMA DOS </A> </P>
<P> <A HREF="SUBTEMA3.HTML"> SUB TEMA TRES </A> </P>
</BODY>
</HTML>

SUBTEMA1.HTML (Es el nombre del segundo archivo)

<HTML>
<HEAD> <TITLE> Sub Tema Uno </TITLE> </HEAD>
<BODY BACKGROUND="Fondo.jpg">
<H1>
<font face="Bernard MT" color="BLUE">
<marquee behavior="alternate">
SUB TEMA UNO
</marquee
</font>
</H1>

<P>
<font face="Bernard MT" color="BLUE">
EXPLICAR EL SUB TEMA UNO, EXPLICAR EL SUB TEMA UNO,
EXPLICAR EL SUB TEMA UNO, EXPLICAR EL SUB TEMA UNO,
EXPLICAR EL SUB TEMA UNO, EXPLICAR EL SUB TEMA UNO,
EXPLICAR EL SUB TEMA UNO, EXPLICAR EL SUB TEMA UNO,
EXPLICAR EL SUB TEMA UNO, EXPLICAR EL SUB TEMA UNO,
EXPLICAR EL SUB TEMA UNO, EXPLICAR EL SUB TEMA UNO,
EXPLICAR EL SUB TEMA UNO, EXPLICAR EL SUB TEMA UNO,
</font>
</P>

<P> <A HREF="Principal.HTML"> TEMA PRINCIPAL </A> </P>
</BODY>
</HTML>

Taller dos:
<HTML>
<HEAD> <TITLE> NOMBRE ESTUDIANTE</TITLE> </HEAD>
<BODY BACKGROUND="FONDO1.JPG" TEXT="red">
<BR><BR><BR><BR><BR><BR><BR>
<CENTER> <H7> NOMBRE EMPRESA </H7> </CENTER> <BR>
<FONT FACE="Comic Sans MS" SIZE="4" COLOR="Blue" >
EJEMPLO DE COMO TRABAJAR CON TEXTO FORMATEADO <BR>
EJEMPLO DE COMO TRABAJAR CON TEXTO FORMATEADO <BR>
EJEMPLO DE COMO TRABAJAR CON TEXTO FORMATEADO <BR>
EJEMPLO DE COMO TRABAJAR CON TEXTO FORMATEADO <BR>
</FONT>
<BR> <BR>

<FONT FACE="Arial" SIZE="5" COLOR="Red" >
EJEMPLO DE COMO TRABAJAR CON TEXTO FORMATEADO <BR>
EJEMPLO DE COMO TRABAJAR CON TEXTO FORMATEADO <BR>
EJEMPLO DE COMO TRABAJAR CON TEXTO FORMATEADO <BR>
EJEMPLO DE COMO TRABAJAR CON TEXTO FORMATEADO <BR>
</FONT>

<BR>

<FONT FACE="Times New Roman" SIZE="7" COLOR="#FF8000" >
EJEMPLO DE COMO TRABAJAR CON TEXTO FORMATEADO <BR>
EJEMPLO DE COMO TRABAJAR CON TEXTO FORMATEADO <BR>
</FONT>

<A HREF="MISION.HTML"> MISION </A> <BR>
<A HREF="VISION.HTML"> LOCAS </A> <BR>
<A HREF="OBJETIVOS.HTML"> LOQUITAS </A> <BR>
<A HREF="PRODUCTOS.HTML"> PRODUCTOS </A> <BR>
</BODY>

</HTML>