Introducción
En este laboratorio, concéntrese en la área principal de contenido de su sitio web. Esta sección muestra los servicios de "Pet's House".
Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 93%. Ha recibido una tasa de reseñas positivas del 98% por parte de los estudiantes.
Diseño de Acerca de Nosotros
La sección "Acerca de Nosotros" se puede dividir en dos partes, la parte de imagen y la parte de contenido de texto, usando la etiqueta <img> para agregar la imagen, la etiqueta <h2> para agregar el título y la etiqueta <p> para agregar el párrafo de texto.
<!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>Inicio</li>
<li>Acerca de Nosotros</li>
<li>Mostrar</li>
<li>Contacto</li>
</ul>
</nav>
</header>
<!--Contenido Principal-->
<main>
<div class="container">
<section id="home" class="cover-sect">
<div class="title-text">
<h1>Bienvenido</h1>
<p>
~ Este sitio web ofrece servicios personalizados para mascotas. ~
</p>
</div>
<div class="box-feature">
<img class="cover-image" src="images/cat.jpeg" alt="solo un gato" />
</div>
</section>
<section id="about" class="story-sect">
<div class="section-text">
<h2>Acerca de Nosotros</h2>
<p>
Nos dedicamos a crear una comunidad de mascotas felices y dueños
de mascotas aún más felices. <br /><br />
Nuestro equipo de servicio al cliente excepcional se esfuerza por
brindarte una experiencia de compra sin problemas, ofreciéndote un
soporte experto desde la búsqueda hasta la entrega y más allá.
<br /><br />Entendemos la importancia de un servicio rápido y
confiable, por eso ofrecemos opciones de envío expedito y
devoluciones sin complicaciones.
</p>
</div>
<div class="box-feature circle">
<img src="images/intro.png" />
</div>
</section>
</div>
</main>
<!--Contenido del Pie de Página-->
<footer></footer>
</body>
</html>
- El atributo global
iddefine un identificador (ID) que debe ser único en todo el documento. Es similar aclassen el sentido de que es como un nombre para el elemento, pero la diferencia es que el id es único, y el atributo id también tiene la capacidad de establecer marcadores, que usaremos más adelante en el experimento. - Los elementos HTML
<h1>a<h6>representan seis niveles de títulos de sección. - El elemento HTML
<br>produce un salto de línea en el texto (retorno de carro). Es útil para escribir un poema o una dirección, donde la división de líneas es importante.
Diseño de Mostrar
En la página de Mostrar, que consiste principalmente en imágenes y texto, podemos dividir esta página en tres secciones, cada una de las cuales consta de imágenes y texto.
<!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>Inicio</li>
<li>Acerca de Nosotros</li>
<li>Mostrar</li>
<li>Contacto</li>
</ul>
</nav>
</header>
<!--Contenido Principal-->
<main>
<div class="container">
<section id="home" class="cover-sect">
<div class="title-text">
<h1>Bienvenido</h1>
<p>
~ Este sitio web ofrece servicios personalizados para mascotas. ~
</p>
</div>
<div class="box-feature">
<img class="cover-image" src="images/cat.jpeg" alt="solo un gato" />
</div>
</section>
<section id="about" class="story-sect">
<div class="section-text">
<h2>Acerca de Nosotros</h2>
<p>
Nos dedicamos a crear una comunidad de mascotas felices y dueños
de mascotas aún más felices. <br /><br />
Nuestro equipo de servicio al cliente excepcional se esfuerza por
brindarte una experiencia de compra sin problemas, ofreciéndote un
soporte experto desde la búsqueda hasta la entrega y más allá.
<br /><br />Entendemos la importancia de un servicio rápido y
confiable, por eso ofrecemos opciones de envío expedito y
devoluciones sin complicaciones.
</p>
</div>
<div class="box-feature circle">
<img src="images/intro.png" />
</div>
</section>
<section id="display" class="samples">
<div class="section-text">
<h2>Mostrar</h2>
</div>
<div class="services">
<div class="service">
<figure>
<img
src="images/service-1.png"
alt="Servicios de paseo de perro"
/>
<figcaption>
Proporcionar servicios de cuidado de mascotas.
</figcaption>
</figure>
</div>
<div class="service">
<figure>
<img
src="images/service-2.png"
alt="Servicios de chequeo de mascotas"
/>
<figcaption>
Proporcionar servicios de chequeo de mascotas.
</figcaption>
</figure>
</div>
<div class="service">
<figure>
<img
src="images/service-3.png"
alt="Servicios de baño de mascotas"
/>
<figcaption>
Proporcionar servicios de baño de mascotas.
</figcaption>
</figure>
</div>
</div>
</section>
</div>
</main>
<!--Contenido del Pie de Página-->
<footer></footer>
</body>
</html>
- El elemento HTML
<figure>representa contenido autónomo, potencialmente con una leyenda opcional, que se especifica usando el elemento<figcaption>. La figura, su leyenda y su contenido se refieren como una unidad única.
Resumen
Este laboratorio lo guió en el desarrollo de la sección principal del sitio web, donde mostró los servicios de "Pet's House". Este paso fue crucial para detallar lo que ofrece el sitio web, mejorando el valor del sitio para los visitantes a través de un contenido estructurado y una estética atractiva.
