Introdução
Neste laboratório, concentre-se na área de conteúdo principal do seu website. Esta seção apresenta os serviços da "Pet's House".
Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 93%. Recebeu uma taxa de avaliações positivas de 98% dos estudantes.
Layout Sobre Nós
A seção Sobre Nós pode ser dividida em duas partes, a parte da imagem e a parte do conteúdo de texto, usando a tag <img> para adicionar a imagem, a tag <h2> para adicionar o título e a tag <p> para adicionar o parágrafo de texto.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pet's House</title>
</head>
<body>
<!--Header Content-->
<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>
<!--Main Content-->
<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>
</div>
</main>
<!--Footer Content-->
<footer></footer>
</body>
</html>
- O atributo global
iddefine um identificador (ID) que deve ser único em todo o documento. É semelhante aclassno sentido de que é como um nome para o elemento, mas a diferença é que o id é único, e o atributo id também tem a capacidade de definir marcadores, que usaremos mais tarde no experimento. - Os elementos HTML
<h1>a<h6>representam seis níveis de títulos de seção. - O elemento HTML
<br>produz uma quebra de linha no texto (retorno de carro). É útil para escrever um poema ou um endereço, onde a divisão das linhas é significativa.
Layout de Exibição
Na página de Exibição, que consiste principalmente em imagens e texto, podemos dividir esta página em três seções, cada uma das quais consiste em imagens e texto.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pet's House</title>
</head>
<body>
<!--Header Content-->
<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>
<!--Main Content-->
<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>
</div>
</main>
<!--Footer Content-->
<footer></footer>
</body>
</html>
- O elemento HTML
<figure>representa conteúdo autocontido, potencialmente com uma legenda opcional, que é especificada usando o elemento<figcaption>. A figura, sua legenda e seu conteúdo são referenciados como uma única unidade.
Resumo
Este laboratório guiou você pelo desenvolvimento da seção principal do site, onde você apresentou os serviços da "Pet's House". Esta etapa foi crucial para detalhar o que o site oferece, aprimorando o valor do site para os visitantes por meio de conteúdo estruturado e estética.
