Desarrollo web - Season 03

•

SIN SIGLA

Jonazhino

11/2/2024

¡Este material tiene más páginas!

Entonces, ¿te gustó este material?

Ayude a animar a otros estudiantes a mejorar el contenido

¿Te gustó este material? ¡Compartir! 🧡

Desarrollo Web

6935 Materiales compartidos

Descarga la aplicación para disfrutar aún más

Lea materiales sin conexión, sin usar Internet. Además de muchas otras características!

Vista previa del material en texto

Objetivo de la sesión:
✓ Utilizar estructuras HTML para crear y organizar formularios en páginas 
web.
✓ Utilizar nuevas estructuras HTML5 para crear y organizar páginas web.
3
Propósito de la sesión
Competencia del perfil de egreso : La asignatura DISEÑO WEB, que corresponde al área de 
estudios de Especialidad, contribuye al logro del perfil de egreso, específicamente a la(s) 
competencia(s):
- CE3: DESARROLLO DE SOFTWARE
- CG4: COMUNICACIÓN ORAL Y ESCRITA
Resultado de Aprendizaje de la Unidad 01:
Realiza diseños web con herramientas de diseño gráfico y maquetado web básico.
Contribuye al logro
Contribuye al logro
Contenidos
Formularios
Nuevas Etiquetas HTML 5
Ejercicios
4
• Cualquier página HTML puede mejorarse con formularios
interactivos que piden al visitante que rellene información:
introducir texto, seleccionar opciones, confirmar con un botón.
• Sin embargo, estamos alcanzando los límites del lenguaje HTML,
ya que después se tiene que analizar la información que el
visitante ha introducido... y eso no se puede hacer en HTML.
5
Introducción
• Cuando se necesita insertar un formulario en tu página HTML,
requieres empezar escribiendo una etiqueta <form> </form>. Esta
es la etiqueta principal de los formularios, y especifica su
comienzo y su fin.
6
Crear un formulario
<body>
<p>Texto antes del formulario</p>
<form>
<p>Texto dentro del formulario</p>
</form>
<p>Texto después del formulario</p>
</body>
• El campo de texto de una línea: <input type=“XXXX" >
–Texto: type="text"
–Contraseña: type="password"
–Correo electrónico: type="email“
–Una URL: type="url"
–Número de Telefono: type="tel”
–Número: type=“number”
–Un cursor: type="range“
– Fecha: type="date"
• El campo de texto de líneas múltiples: <textarea> </textarea>.
• Etiquetas: <label>
7
Campos de entrada básicos
Son elementos que requieren que el visitante elija a partir de una
lista de posibilidades. Vamos a repasar:
• Casillas de verificación: <input type="checkbox"
name="opciones" >
• campos de opciones: <input type=“radio" name="opciones" >
• listas desplegables: <select> </select>
• Agrupar campos: <fieldset> <fieldset> opcional <legend>
8
Opciones y agrupamiento
Se utiliza la etiqueta <input> nuevamente. Hay cuatro tipos:
• type="submit": el botón de envío principal del formulario. Este es
el que usarás más a menudo. El usuario será redireccionado a la
página especificada en el atributo action del formulario.
• type="reset": restablece el formulario
• type="image": equivalente al botón submit, pero esta vez
mostrado como una imagen. Añade el atributo src para especificar
la URL de la imagen.
9
El botón de envío
Puedes cambiar el texto mostrado dentro de los botones con el 
atributo value
A B C
10
Ejercicio 
Formularios
13
Encabezado
14
Empezando el primer contenedor
15
Seleccionar
• Revisar apuntes
16
Casillas de verificación
17
Botones y fin del formulario
18
Ejercicio 02: Registro de usuario
19
Las etiquetas semánticas de 
HTML5
• El <body> es donde se colocan todos los elementos que sí se van
a mostrar y que forman el contenido de la página. Habitualmente
todo este contenido deberá estar dentro de cajas.
20
Introducción
HTML 4 HTML 5
• Anteriormente se utilizaba solo <DIV>, con las nuevas etiquetas el
navegador puede entender qué contiene cada una de estas cajas,
sin necesidad de tener que entender el idioma utilizado y sin tener
que leer ni analizar el texto que contiene.
21
¿Por qué utilizar estas etiquetas 
semánticas?
HTML 4 HTML 5
• <div> es el tipo de caja genérica, que aunque no identifica qué
tipo de contenido contiene, sigue siendo la más utilizada. No
obstante suele estar ubicada dentro de cajas que sí tienen un
significado semántico concreto como las que siguen.
22
<div> caja genérica </div>
<main> es la caja que contiene todo el
contenido principal de la página, con las
siguientes características:
• Sólo puede existir un único <main> por
página.
• No puede estar dentro de ninguna otra caja.
• Dentro contendrá aquel contenido que no
se repita en cada página (conteniendo
<div>, <section>, <article> o incluso
<aside>), pero nunca cajas como
<header>, <nav> o <footer>).23
<main> contenido principal de la 
página </main>
• Dentro de la caja <header> ubicamos
el contenido que estaría destinado al
encabezado de la página.
Normalmente contiene el logo y el
nombre de la página y suele estar
ubicado al inicio.
24
<header> encabezado </header>
• La caja <footer> contiene la
información que figura al pie de la
página (normalmente es la última caja
de todas) y es donde se ubica el ©, e
información como el mapa de la página,
autor, fecha y otros datos finales.
• Actualmente existe la tendencia de
hacer <footer> enormes donde figura
todo lo que se puede encontrar en el
sitio.
25
<footer> pie de página </footer>
• La caja <nav> contiene todos los
enlaces de la página, ya sea a
otras secciones de nuestro mismo
sitio web o a páginas externas. Por
ello, en algunos casos pueden
existir varios <nav>, como por
ejemplo el del principio de la
página y otro final ubicado dentro
del <footer>
26
<nav> enlaces </nav>
Las cajas <section> contienen el
contenido genérico de la página.
• Se pueden utilizar varios <section> al
mismo tiempo en la misma página.
• Pueden contener múltiples <div> y
otras cajas relacionadas, como
<article>.
• Normalmente se utilizan para grandes
cantidades o secciones de
información de tipo similar.
27
<section> sección de 
información </section>
• Las cajas <article> también están
destinadas a contener el contenido de
la página, aunque normalmente suelen
utilizarse para mostrar información más
reducida y concreta y que puede ser
independiente del resto.
28
<article> artículo </article>
• Dentro de las cajas de
tipo <aside> se ubican los
contenidos que no tienen relación
directa con el contenido, como por
ejemplo información sobre vacunas
o pasaportes en una web de viajes,
calendario de eventos de una
entidad, publicidad o la biografía
del autor de un blog.
29
<aside> contenido </aside>
30
Ejemplos de estructura en HTML5
31
• Un formulario es una zona interactiva en la página, donde
los visitantes pueden introducir información.
• Para recuperar lo que los visitantes han escrito, no es
suficiente con el lenguaje HTML. Tienes que utilizar un
lenguaje de «servidor»
• Las nuevas estructuras semánticas nos ayudan a que el
código HTML tenga más significado, sin necesidad de
detallar o dar más atributos al código.
• Aún se sigue usando la etiqueta genérica <DIV>
Conclusiones