Nós conhecemos o poder do trabalho conjunto entre HTML5 e CSS3 sobre a criação de páginas web e sua importância nesse processo dado que a parte visual de uma pagina é fundamental nos dias de hoje. Com o surgimento de conceitos como UX Design que visa, por exemplo, pensar a criação de uma pagina web com foco na experiência do usuário, a busca pela satisfação desse usuário tem sido o horizonte de muitas organizações de tecnologia.
O CSS nos permite realizar trabalhos incríveis em uma página web de modo a garantir um maior grau de interação e, consequentemente, maior interesse por parte do usuário. Isso faz total diferença em um site de E-commerce que apresenta como um de seus produtos, um dispositivo celular. Note que o celular é apenas um exemplo. Sem dúvida que esse conceito se aplica a tudo que está relacionado com websites.
Além disso, permite o ganho de tempo e economia de esforço uma vez que você pode padronizar a formatação de um site que conta com mais de 30 páginas, utilizando para isso, um único arquivo de estilos.
Diante disso, crie um script em HTML5 e CSS3 que crie uma página Web com uma única foto e nesta foto tenha uma legenda formatada. Esta legenda deverá ter formatação de negrito, cor azul e tamanho de 40px. O CSS deverá ser inserido internamente. Na própria página HTML. Se for necessário, ou seja, caso a imagem seja muito grande, altere o seu tamanho utilizando o estilo.
Soluções para a tarefa
Resposta:
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<title>Tipos de Pitbull: conheça os 4 mais populares!</title>
<style type="text/css">
figure {
width: 30%;
text-align: center;
font-style: italic;
font-size: smaller;
text-indent: 0;
border: thin silver solid;
margin: 0.5em;
padding: 0.5em;
}
img.scaled {
width: 100%;
}
figcaption {
font-weight: bold;
font-size: 40px;
color: blue;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li>Home</li>
<li>Contato</li>
</ul>
</nav>
</header>
<section>
<article>
<header>
<h2>Tipos de Pitbull: conheça os 4 mais populares!</h2>
<p>Publicado em <time datetime="2021-04-06T13:00:24+01:00">06 de Abril de 2021</time> por <a href="#">EduBatera</a> - <a href="#comments">15 comentários</a></p>
</header>
<p>Cães</p>
<figure>
<p><img src="cachorro.jpg"
width="200" height="auto"
alt="Pit Bull">
<figcaption>Raças de cães (Pit Bull)</figcaption>
</figure>
</article>
</section>
<aside>
<h2>Entre em contato</h2>
<p>Fique de olho para saber mais sobre tipos de Pitbull e outras novidades sobre o mundo pet!</p>
</aside>
<footer>
<p>Copyright 2021 EduBatera©</p>
</footer>
</body>
</html>
Explicação:
Espero ter ajudado.