Scribd
Cargar
13 vistas4 páginas

Ejercicio Práctico de Formulario HTML

Este documento proporciona instrucciones en 13 pasos para crear un formulario HTML básico, incluyendo la creación de carpetas, agregar color de fondo al body, insertar una imagen de navegación, agregar un encabezado, crear un formulario con elementos como texto, correo, mensaje, selección, casillas de verificación y un video de YouTube, y agregar estilos a la imagen. El objetivo es aplicar los conceptos y elementos básicos de un formulario HTML aprendidos en clases.

Cargado por

susana san martin
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
13 vistas4 páginas

Ejercicio Práctico de Formulario HTML

Este documento proporciona instrucciones en 13 pasos para crear un formulario HTML básico, incluyendo la creación de carpetas, agregar color de fondo al body, insertar una imagen de navegación, agregar un encabezado, crear un formulario con elementos como texto, correo, mensaje, selección, casillas de verificación y un video de YouTube, y agregar estilos a la imagen. El objetivo es aplicar los conceptos y elementos básicos de un formulario HTML aprendidos en clases.

Cargado por

susana san martin
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd

Ejercicio Practico HTML

En esta guía aplicaremos los conceptos y elementos básico de un formulario Html


aprendidos en clases.
Una vez terminada la Actividad debe evidenciar su trabajo.
Comprima su carpeta de trabajo y envíela al correo del profesor:
[Link]@[Link]

Paso 1 Cree una


carpeta
principal con el
nombre “
Formulario” y
cree 2
subcarpetas
adentro de la
principal con los
siguientes
nombres
“imágenes” y
“Estilos”
Paso 2 Cree un archivo
[Link]
Paso 3 Agregue color al <body bgcolor="#C3C6BA" >
fondo del Body
Paso 4 Cree un Div con <div class="img-container">
</div>
los siguientes
atributos
Paso 5 Adentro del Div <a href="[Link] <img
src="imagenes/[Link]" style="text-align: center;" > </a>
Container
creara una una
imagen de
navegación, que
lo debe llevar a
un sitio web
Paso 6 Cree un
<h2 style="text-align: center;">LICEO COMERCIAL DIEGO
elemento <h2> PORTALES</h2>
y escriba un
texto.
Paso 7 Agregue un
elemento <hr>
y <br>
Paso 8 Cree un <form></form>
elemento Form
Paso 9 Agregue al <ul>
<li>
Form los <label >Nombre:</label>
siguiente <input type="text" >
</li>
elementos <br>
<li>
<label>Correo electrónico:</label>
<input type="text" >
</li>
<br>
<li>
<label >Mensaje:</label>
<textarea ></textarea>
</li>
</ul>
<br>
<label >Especialidad:</label>

Paso 10 Debajo del label


Especialidad: <select >
<option >Escoje una especialidad</option>
Agregue un <option>Programacion</option>
Select Option, <option >Redes</option>
<option >Informatica</option>
seguidos de 2 </select>
<br> <br>
<br>

Paso 11 Cree un check


<label><input type="checkbox">Este es mi primer
box, seguido de checkbox</label>
2 <br> <br>
<input type="checkbox"><label>Este es mi segundo
checkbox</label>
<br>
<br>

Paso 12 Agregue una


etiqueta label y <label >Mira Nuestra Comunidad:</label>
<br>
un video de <iframe width="560" height="315"
Youtube src="[Link]
frameborder="0"
allow="accelerometer; autoplay; encrypted-media;
gyroscope; picture-in-picture" allowfullscreen></iframe>

<br>
<br>

Paso 13 Cree un style en <style>


.img-container {
su head y text-align: center;
agregue estilos display: block;
}
a su imagen </style>

Pauta de Evaluación

CRITERIOS NIVEL DE CUMPLIMIENTO


Logrado Medio No Logrado
(5 puntos) (2 puntos) (0 puntos)
1 ¿Crea una carpeta principal y
dos subcarpetas imagen y
estilos?
2 ¿ Inserta una imagen en el
body?
3 ¿Inserta las etiquetas html en el
body con formato formulario?
4 ¿Inserta el elemento <a
href="></a> a una imagen y
me redirige a un sitio web?
5 ¿Inserta la etiqueta <iframe
src=””> (video de youtube )en el
body?

También podría gustarte