Esta práctica te guiará en la creación de un formulario de contacto y la sección de pie de página, esenciales para la interacción y la provisión de información adicional.
Skills Graph
%%%%{init: {'theme':'neutral'}}%%%%
flowchart RL
html(("HTML")) -.-> html/FormsandInputGroup(["Forms and Input"])
html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"])
html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"])
html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"])
html/BasicStructureGroup -.-> html/head_elems("Head Elements")
html/BasicStructureGroup -.-> html/charset("Character Encoding")
html/LayoutandSectioningGroup -.-> html/layout("Layout Elements")
html/LayoutandSectioningGroup -.-> html/nav_links("Navigation and Links")
html/FormsandInputGroup -.-> html/forms("Form Elements")
html/FormsandInputGroup -.-> html/form_valid("Form Validation")
html/FormsandInputGroup -.-> html/form_access("Accessibility in Forms")
html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements")
subgraph Lab Skills
html/head_elems -.-> lab-271711{{"Diseño del formulario y del pie de página"}}
html/charset -.-> lab-271711{{"Diseño del formulario y del pie de página"}}
html/layout -.-> lab-271711{{"Diseño del formulario y del pie de página"}}
html/nav_links -.-> lab-271711{{"Diseño del formulario y del pie de página"}}
html/forms -.-> lab-271711{{"Diseño del formulario y del pie de página"}}
html/form_valid -.-> lab-271711{{"Diseño del formulario y del pie de página"}}
html/form_access -.-> lab-271711{{"Diseño del formulario y del pie de página"}}
html/inter_elems -.-> lab-271711{{"Diseño del formulario y del pie de página"}}
end
Layout de Contacto
La sección Contacto consta de dos partes, el párrafo de texto y el contenido del formulario. Hay varios tipos de elementos de formulario disponibles en HTML, como formularios de caja de texto, formularios de selección múltiple, formularios de botón de envío, etc.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pet's House</title>
</head>
<body>
<!--Contenido del Encabezado-->
<header>
<div class="logo-section">
<img class="logo" src="images/logo.svg" alt="logo" />
</div>
<nav class="navigation-section">
<ul class="navigation">
<li>Home</li>
<li>About Us</li>
<li>Display</li>
<li>Contact</li>
</ul>
</nav>
</header>
<!--Contenido Principal-->
<main>
<div class="container">
<section id="home" class="cover-sect">
<div class="title-text">
<h1>Welcome</h1>
<p>~ This website offers personalised services for pets. ~</p>
</div>
<div class="box-feature">
<img class="cover-image" src="images/cat.jpeg" alt="just a cat" />
</div>
</section>
<section id="about" class="story-sect">
<div class="section-text">
<h2>About Us</h2>
<p>
we're about creating a community of happy pets and happier pet
owners. <br /><br />
Our exceptional customer service team is dedicated to providing
you with a seamless shopping experience, offering expert support
from browsing to delivery and beyond. <br /><br />We understand
the importance of fast, reliable service, which is why we offer
expedited shipping options and hassle-free returns.
</p>
</div>
<div class="box-feature circle">
<img src="images/intro.png" />
</div>
</section>
<section id="display" class="samples">
<div class="section-text">
<h2>Display</h2>
</div>
<div class="services">
<div class="service">
<figure>
<img src="images/service-1.png" alt="Dog walking services" />
<figcaption>Provide pet care services.</figcaption>
</figure>
</div>
<div class="service">
<figure>
<img src="images/service-2.png" alt="Pet check-up services" />
<figcaption>Provide pet check-up services.</figcaption>
</figure>
</div>
<div class="service">
<figure>
<img src="images/service-3.png" alt="Pet washing services" />
<figcaption>Provide pet washing services.</figcaption>
</figure>
</div>
</div>
</section>
<section id="contact" class="contact-section">
<div class="section-text">
<h2>Contact Us</h2>
<p>
Welcome to our pet website! We're thrilled to have you here and
eager to share with you the array of services we offer for you and
your beloved pets. Whether you're looking for grooming, boarding,
training, or any other pet-related service, we've got you covered.
Our team is passionate about animals and committed to providing
the best care possible. If you're interested in learning more
about our services or if you're considering joining our community,
we encourage you to fill out our form. This will allow us to
understand your needs better and offer tailored solutions for you
and your pet. Welcome aboard, and we look forward to serving you!
</p>
</div>
<div class="contact-info">
<div class="form-box">
<form id="form" class="contact-form">
<label for="name" class="form-content"
>Name <br />
<input
name="name"
id="name"
type="text"
class="txt-box"
required
/><br />
</label>
<label for="email" class="form-content"
>Email <br />
<input
name="email"
id="email"
type="email"
class="txt-box"
required
/><br />
</label>
<label for="message" class="form-content"
>Demand for services<br />
<select name="message" id="message" class="txt-box">
<option value="">Feeding pets at home</option>
<option value="">Pet play service</option>
<option value="">Pet bathing service</option>
<option value="">Join us</option>
</select>
<br /> </label
><br />
<input class="btn" id="submit" type="submit" value="Submit" />
</form>
</div>
</div>
</section>
</div>
</main>
<!--Contenido del Pie de Página-->
<footer></footer>
</body>
</html>
El elemento HTML <form> representa una sección de un documento que contiene controles interactivos para enviar información.
El elemento HTML <label> representa una leyenda para un elemento en una interfaz de usuario. Para asociar explícitamente un elemento <label> con un elemento <input>, primero debes agregar el atributo id al elemento <input>. A continuación, agregas el atributo for al elemento <label>, donde el valor de for es el mismo que el id en el elemento <input>.
El elemento HTML <input> se utiliza para crear controles interactivos para formularios basados en la web con el fin de aceptar datos del usuario; una amplia variedad de tipos de datos de entrada y widgets de control están disponibles, dependiendo del dispositivo y el agente de usuario.
El elemento HTML <select> representa un control que proporciona un menú de opciones.
Cada elemento <option> debe tener un atributo value que contiene el valor de datos que se enviará al servidor cuando se seleccione esa opción. Si no se incluye un atributo value, el valor predeterminado es el texto contenido dentro del elemento.
El atributo type te permite especificar diferentes tipos de elementos de entrada.
type="text" significa que este es un campo de entrada de texto.
type="email" significa que este es un campo de entrada de correo electrónico.
type="submit" significa que este es un elemento de formulario con un botón de envío.
Haz clic en Go Live en la esquina inferior derecha del Entorno para abrir el puerto 8080, y haz clic en Web 8080 en la esquina superior izquierda del Entorno para previsualizar los resultados de la página.
A continuación, queremos hacer que al hacer clic en Home, About Us, Display y Contact en la barra de navegación del encabezado, podamos saltar a la área de contenido correspondiente.
Agregar la etiqueta a a un elemento de lista ul en la navegación:
El elemento HTML <a> (o elemento de anclaje), con su atributo href, crea un hipervínculo a páginas web, archivos, direcciones de correo electrónico, ubicaciones en la misma página o cualquier otra cosa a la que una URL pueda apuntar.
El contenido dentro de cada <a> debe indicar el destino del enlace. Si el atributo href está presente, presionar la tecla Enter mientras se tiene el foco en el elemento <a> lo activará. Aquí agregamos el nombre del atributo id del diseño correspondiente dentro del atributo href.
Finalmente, se implementa el contenido de la sección del pie de página.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pet's House</title>
</head>
<body>
<!--sección del encabezado-->
<header>
<div class="logo-section">
<img class="logo" src="images/logo.svg" alt="logo" />
</div>
<nav class="navigation-section">
<ul class="navigation">
<li><a class="nav-link" href="#home">Home</a></li>
<li><a class="nav-link" href="#about">About Us</a></li>
<li><a class="nav-link" href="#display">Display</a></li>
<li><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<!--sección principal-->
<main>
<div class="container">
<section id="home" class="cover-sect">
<div class="title-text">
<h1>Welcome</h1>
<p>~ This website offers personalised services for pets. ~</p>
</div>
<div class="box-feature">
<img class="cover-image" src="images/cat.jpeg" alt="just a cat" />
</div>
</section>
<section id="about" class="story-sect">
<div class="section-text">
<h2>About Us</h2>
<p>
we're about creating a community of happy pets and happier pet
owners. <br /><br />
Our exceptional customer service team is dedicated to providing
you with a seamless shopping experience, offering expert support
from browsing to delivery and beyond. <br /><br />We understand
the importance of fast, reliable service, which is why we offer
expedited shipping options and hassle-free returns.
</p>
</div>
<div class="box-feature circle">
<img src="images/intro.png" />
</div>
</section>
<!--sección de visualización-->
<section id="display" class="samples">
<div class="section-text">
<h2>Display</h2>
</div>
<div class="services">
<div class="service">
<figure>
<img src="images/service-1.png" alt="Dog walking services" />
<figcaption>Provide pet care services.</figcaption>
</figure>
</div>
<div class="service">
<figure>
<img src="images/service-2.png" alt="Pet check-up services" />
<figcaption>Provide pet check-up services.</figcaption>
</figure>
</div>
<div class="service">
<figure>
<img src="images/service-3.png" alt="Pet washing services" />
<figcaption>Provide pet washing services.</figcaption>
</figure>
</div>
</div>
</section>
<!--sección de contacto-->
<section id="contact" class="contact-section">
<div class="section-text">
<h2>Contact Us</h2>
<p>
Welcome to our pet website! We're thrilled to have you here and
eager to share with you the array of services we offer for you and
your beloved pets. Whether you're looking for grooming, boarding,
training, or any other pet-related service, we've got you covered.
Our team is passionate about animals and committed to providing
the best care possible. If you're interested in learning more
about our services or if you're considering joining our community,
we encourage you to fill out our form. This will allow us to
understand your needs better and offer tailored solutions for you
and your pet. Welcome aboard, and we look forward to serving you!
</p>
</div>
<div class="contact-info">
<div class="form-box">
<form id="form" class="contact-form">
<label for="name" class="form-content"
>Name <br />
<input
name="name"
id="name"
type="text"
class="txt-box"
required
/><br />
</label>
<label for="email" class="form-content"
>Email <br />
<input
name="email"
id="email"
type="email"
class="txt-box"
required
/><br />
</label>
<label for="message" class="form-content"
>Demand for services<br />
<select name="message" id="message" class="txt-box">
<option value="">Feeding pets at home</option>
<option value="">Pet play service</option>
<option value="">Pet bathing service</option>
<option value="">Join us</option>
</select>
<br /> </label
><br />
<input class="btn" id="submit" type="submit" value="Submit" />
</form>
</div>
</div>
</section>
</div>
</main>
<footer>
<span class="contact-us">Contact Us</span>
<span class="company-info">Created by Lotus</span>
<span>@Copyright 2024</span>
</footer>
</body>
</html>
El elemento HTML <span> es un contenedor en línea genérico para contenido de frase, que no representa inherentemente nada. Se puede utilizar para agrupar elementos con fines de estilo (utilizando los atributos class o id), o porque comparten valores de atributos, como lang. Solo se debe utilizar cuando no es adecuado ningún otro elemento semántico. <span> es muy similar a un elemento <div>, pero <div> es un elemento de nivel de bloque mientras que un <span> es un elemento de nivel en línea.
El elemento HTML <link> especifica las relaciones entre el documento actual y un recurso externo. Este elemento se utiliza con más frecuencia para enlazar hojas de estilos, pero también se utiliza para establecer iconos del sitio (tanto iconos estilo "favicon" como iconos para la pantalla principal y aplicaciones en dispositivos móviles), entre otras cosas.
Hemos utilizado una variedad de elementos HTML para completar el contenido de la página. Si queremos obtener el efecto de la imagen, necesitamos utilizar CSS. Aquí, prepararemos un archivo CSS completo (style.css) y lo insertaremos utilizando el elemento de enlace.
Haz clic en Go Live en la esquina inferior derecha del Entorno para abrir el puerto 8080, y haz clic en Web 8080 en la esquina superior izquierda del Entorno para ver los resultados de la página.
En este laboratorio, completaste el sitio web agregando un formulario de contacto y un pie de página, aprendiendo sobre la interacción del usuario y la accesibilidad de la información. Este laboratorio reforzó la importancia de los canales de comunicación y el diseño coherente en el desarrollo web, culminando con la estructura del sitio.
Felicitaciones por tu introducción al HTML. Si quieres saber cómo dar estilo a tus páginas, ¡aprende el laboratorio de CSS!
