1

Institución Educativa Técnica Agropecuaria y Comercial

“Eutimio Gutiérrez Manjón”

GUÍA DE APRENDIZAJE AUTÓNOMO Y FLEXIBLE 2021

Área Tecnología e Informática Docente: Yeinni Edith Ruiz Esparza

Grado: 11:01 – 11:02 Cód. 17

Docente:
Periodo: Cuarto Periodo Fecha inicio: 20/09/2021
Núm. No.1 Fecha fin: 10/09/2021
Guía:
Método de entrega:
Plataforma: Sinaí
Correo Electrónico Institucional: yeinniedith3731@ieutigutima.edu.co
WhatsApp : 3145816843
Número de contacto del docente: 3145816843
1. Leer Instrucciones de la Guía No.1 Cuarto Periodo:

Buen Día: Un cordial saludo, Estimados estudiantes del grado 11:01 – 11:02, reciban la
guía No.1 correspondiente al cuarto periodo de tecnología e Informática. La guía se
desarrollara en clase presencial el día jueves.

La parte teórica se entrega en una carpeta en medio digital por la docente, recuerde llevar el
computador a la clase de Informática el día jueves, si no cuenta con computador, llevar la
guía No.1 en medio físico el día jueves.

Ingresa al link de la pàgina curriculos exploratorios:

1
Calle 8 No. 9ª -47 – Barrio San Francisco – Teléfono: 3112766576 – Simití –
Bolívar.
v.3.0
2
Institución Educativa Técnica Agropecuaria y Comercial
“Eutimio Gutiérrez Manjón”

2. Conceptualización

CREACIÓN DE FORMULARIOS
Los formularios en HTML nos ayudan a aumentar la interactividad de nuestra Web y nos permiten recibir
información de los usuarios de nuestra página. Estos están compuestos por diferentes componentes para
capturar información y botones.

La etiqueta de los formularios es <form> y su cierre </form>. Todo lo que vaya dentro de estas etiquetas Una
etiqueta es un texto incluido entre los símbolos menor que < y mayor que >., serán parte del formulario.

action: El atributo “action” indica el tipo de acción que va a realizar el

PRINCIPALES formulario. Se puede pasar la url o ubicación del archivo donde se
ATRIBUTOS enviará el formulario o una dirección de correo si se quiere enviar a
este.

method: Mediante este atributo le indicamos al formulario la forma en

la que el formulario será enviado. Existen dos valores posibles: getEs una forma de envío de datos de una
página a otra. Con este método los datos se envían en la URL o dirección, haciéndolos visibles desde la barra
de direcciones del navegador. y post. Es una forma de envío de datos de una página a otra. Con este método
los datos que se envían no se podrán ver ya que viajan ocultos.

target: Mediante este atributo indicaremos la forma en la que se desplegará la ventana que procesará el
formulario. Sus valores posibles son: _blank (nueva), _self (mismo frame Llamados también marcos,
permiten dividir la ventana en varias más pequeñas, de modo que en cada una de ellas se cargue una página
html distinta.). _parent (frame padre), _top(cuerpo)

Ejemplos de definición de formularios:

<form action="http://www.mipag.com" method="post" target="_blank">

Elementos del formulario
</form>
<form action="pagina_local.php" method="post" target="_self">
Elementos del formulario
</form>
<form action="mailto:micorreo@correo.com" method="post" target="_parent">
Elementos del formulario
</form>

2
Calle 8 No. 9ª -47 – Barrio San Francisco – Teléfono: 3112766576 – Simití –
Bolívar.
v.3.0
3
Institución Educativa Técnica Agropecuaria y Comercial
“Eutimio Gutiérrez Manjón”

ELEMENTOS O
COMPONENTES
DEL Elemento <input>: Esta etiqueta establece un campo que puede ser de
diferente tipo, donde un usuario puede ingresar datos.
FORMULARIO Principales Atributos de la etiqueta <input>
type: especifica el tipo de elemento a utilizar. Entre los cuales se tienen:
text: Es el campo más simple, generalmente se usa para preguntas abiertas.
radio: Utilizado en preguntas de opción múltiple y única respuesta.
checkbox: Utilizados para preguntas de opción múltiple y múltiple respuestas.
password: Utilizado para capturar contraseñasUna contraseña es una cadena de caracteres secreta conocida
por unos pocos, que se puede usar para acceder a un sistema..
submit: Botón para el envío del formulario.
hidden: Campo oculto. Este no será visible en el formulario.
file: Campo para subir archivos al servidor.
value: Especifica el valor inicial del elemento.
name: especifica el nombre que tendrá el elemento.
id: Especifica el identificador que tendrá el elemento.
disabled: Especifica si el campo va a estar deshabilitado.
readonly: Especifica si el campo es de solo lecturaSe puede ver el contenido pero no se puede modificar..
size: Especifica el tamaño en caracteres de un campo text o password.
checked: Indica que el elemento radio o checkbox inicia

Estos elementos son los que se conocen comúnmente como listas

ELEMENTO desplegables o lista de opciones, donde el usuario podrá escoger una o
<SELECT>: múltiples opciones de acuerdo a como se haya establecido.
Cada una de las opciones de la lista vendrán entre las etiquetasUna
etiqueta es un texto incluido entre los símbolos menor que < y mayor
que >. <option> y </option> y estas a su vez entre las etiquetas <select> y </select> de la siguiente manera:
<select name="transporte">

<option value="1">Coche</option>

<option value="2">Avión</option>

<option value="3">tren</option>

</selec>

name: Nombre del campo de selección.

ATRIBUTOS DE LA ETIQUETA id: Identificador del campo de
selección.
<SELECT>
size: Número de opciones visibles en la
lista.
multiple: Indica que se pueden seleccionar múltiples opciones en la lista.
disabled: Indica que el elemento estará deshabilitado.

<option value="F" selected="selected" disabled="disabled">Femenino</option>

3
Calle 8 No. 9ª -47 – Barrio San Francisco – Teléfono: 3112766576 – Simití –
Bolívar.
v.3.0
 4
Institución Educativa Técnica Agropecuaria y Comercial
“Eutimio Gutiérrez Manjón”

Esta etiqueta permite crear un campo de texto de múltiples líneas, ideal

ELEMENTO para capturar textos extensos; por ejemplo: una observación, un
<TEXTAREA> resumen, una sugerencia.

El texto a ingresar estará entre las etiquetas Una etiqueta es un texto

incluido entre los símbolos menor que < y mayor que >. de apertura y
cierre <textarea> y </textarea>

ATRIBUTOS DE LA ETIQUETA <TEXTAREA>

cols: Ancho del
elemento basado en número de columnas a mostrar.
rows: Altura del elemento basado en el número de filas a mostrar.
name: Nombre del textarea.
id: identificador del textarea.
disabled: Indica que el elemento estará deshabilitado
Readonly: Indica que el elemento será de sólo lectura.

4
Calle 8 No. 9ª -47 – Barrio San Francisco – Teléfono: 3112766576 – Simití –
Bolívar.
v.3.0
 5
Institución Educativa Técnica Agropecuaria y Comercial
“Eutimio Gutiérrez Manjón”

Entregar de aquí en adelante.

Nombre del Docente: Yeinni Edith Ruiz Esparza COD DOCENTE.
Asignatura: Tecnología e Informática Grado: Once
17
GUÍA NO.1 CUARTO PERIODO Periodo: 4
No.guía: 1

Nombres y Apellidos del estudiante: _____________________________________

Curso: _______ Semana: 20 de septiembre a 01 de octubre 2021

1. Los formularios en HTML nos ayudan a aumentar la interactividad de nuestra

_________________ y nos permiten recibir ________________________de los
usuarios de nuestra _____________________. Estos están compuestos por
diferentes _________________ para capturar información y botones.
2. La etiqueta de los formularios es: _________________________________

3. El atributo “action” indica el tipo de _______________ qué va a realizar el

formulario. Se puede pasar la _________________ o ubicación del archivo donde
se enviará el formulario o una dirección de correo si se quiere enviar a este.

4. ___________________Es una forma de envío de datos de una página a otra. Con

este método los datos se envían en la URL o dirección, haciéndolos visibles desde la
barra de direcciones del navegador llamado: ______________________________.

5. ___________________Es una forma de envío de datos de una página a otra. Con

este método los datos que se envían no se podrán ver ya que viajan ocultos.
Llamados: ________________________.

6. _____________ Mediante este atributo indicaremos la forma en la que se

desplegará la __________________ que procesará el formulario.

7. _____________________ Llamados también ______________________, permiten

dividir la ventana en varias más pequeñas, de modo que en cada una de ellas se
cargue una página HTML distinta.

8. Elemento <__________________>: Esta etiqueta establece un _____________ que

puede ser de diferente tipo, donde un usuario puede ingresar ________________.

9. Una ______________________es una cadena de caracteres

______________conocida por unos pocos, que se puede usar para acceder a un
____________________.

5
Calle 8 No. 9ª -47 – Barrio San Francisco – Teléfono: 3112766576 – Simití –
Bolívar.
v.3.0
6
Institución Educativa Técnica Agropecuaria y Comercial
“Eutimio Gutiérrez Manjón”

10. Indica el número del nombre del Atributo de la etiqueta <input>que corresponda.

Función del Atributo Input No.

Especifica el tipo de elemento a utilizar. Entre los cuales se tienen:

Utilizado en preguntas de opción múltiple y única respuesta.

Es el campo más simple, generalmente se usa para preguntas abiertas.

Utilizados para preguntas de opción múltiple y múltiple respuestas.

Utilizado para capturar contraseñas

Botón para el envío del formulario.

Campo oculto. Este no será visible en el formulario.

Campo para subir archivos al servidor.

No. Atributo

text
1

2 radio

3 type

4 file

5 checkbox

6 submit

7 hidden

8 password

11. Observa el siguiente formulario, mencione que componentes fueron utilizados para
su diseño.

Primera Actividad : Procedimental “Cuarto Periodo”

6
Calle 8 No. 9ª -47 – Barrio San Francisco – Teléfono: 3112766576 – Simití –
Bolívar.
v.3.0
7
Institución Educativa Técnica Agropecuaria y Comercial
“Eutimio Gutiérrez Manjón”

1. Completar el código HTML y digitarlo en el block de notas y guardarlo con el

nombre de ejercicio1.html

<html>
<head>
<title>______________________</title>
</head>
<body>
<form action="______________________" method="post" target="_blank">

Componente text:
<input type="text" name="_________________" value="____________"
size="20" disabled="disabled"><br>

Componente radio:
<input type="radio" name="_______________" id="idgenero"
checked="_________________" ><br>

Componente checkbox:
<input type="_______________" name="_______________" readonly="readonly"
><br>
Componente password:
<input type="password" name="______________________" id="idclave"><br>
Componente file:
<input type="file" name="______________________" id="idarchivo"><br>
Componente submit:
<input type="submit" value="_____________________" name="archivo"
id="idarchivo">

</form>
</body>
</html>

7
Calle 8 No. 9ª -47 – Barrio San Francisco – Teléfono: 3112766576 – Simití –
Bolívar.
v.3.0
 8
Institución Educativa Técnica Agropecuaria y Comercial
“Eutimio Gutiérrez Manjón”

2. Completar el código HTML y digitarlo en el block de notas y guardarlo con el

nombre de ejercicio2.html

<html>
<head>
<title>__________________</title>
</head>
<body>
<form action="http://www.google.com" method="post" target="_blank">

Componentes select:
<select name="transporte" size="2" multiple="multiple">

<option value="0">__________________option>

<option value="1">___________</option>

<option value="2" selected="_______________">Avión</option>

<option value="_____________">tren</option>
</select>
<br><br>
Componentes select:
<select name="ingreso" id="idingreso" >
<option value="0">-Seleccione opción-</option>
<option value="2014">________________</option>
<option value="2015">________________</option>
<option value="2016">________________</option>
</select>
</form>
</body>
</html>

3. Digita el siguiente código HTML, en el block de notas y pega el resultado de la página

Web. Guarda la página web con el nombre ejercicio3.html

<html>
<head>
<title>Formulario</title>
</head>
<body>
Componente textarea:<br />
<textarea name="observacion" cols="100" rows="10">
Aquí escribimos nuestro texto extenso que puede ocupar múltiples líneas, el cual se
verá muy bien en este tipo de componente!
</textarea>
</body>
</html>

4. Relacionar con una línea el componente con el nombre que le corresponde:

8
Calle 8 No. 9ª -47 – Barrio San Francisco – Teléfono: 3112766576 – Simití –
Bolívar.
v.3.0
9
Institución Educativa Técnica Agropecuaria y Comercial
“Eutimio Gutiérrez Manjón”

9
Calle 8 No. 9ª -47 – Barrio San Francisco – Teléfono: 3112766576 – Simití –
Bolívar.
v.3.0