Exercício 1) Construindo a estrutura HTML do portfólio
Você acaba de receber um layout de uma página de portfólio da sua designer. O desafio é transformar esse design em uma página web funcional. Utilizando HTML, crie a estrutura básica da página. Lembre-se de incluir os elementos principais: um título principal, um subtítulo, dois botões (Instagram e Github), e um espaço para a imagem da desenvolvedora. Sinta-se livre para personalizar o texto e a imagem para adaptá-los ao seu portfólio pessoal.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfólio de Guilherme de Freitas Santos</title>
</head>
<body>
<header></header>
<main>
<h1>Portfólio do desenvolvedor Guilherme de Freitas Santos</h1>
<h2>Aprofundamento e explicação detalhada do portfólio</h2>
<a href="https://instagram.com/guifreitasz7">instagram</a>
<a href="https://github.com/Gui-alt-code ">Github</a>
<img src="1995515.png" alt="Foto de um indivíduo com os braços cruzados e um computador ao fundo">
</main>
<footer></footer>
</body>
</html>
Exercício 2) Estruturando a página com tags semânticas
Agora que você entende a importância das tags semânticas no HTML, é hora de aplicar esse conhecimento. Utilize as tags header, main, e footer para estruturar sua página de portfólio. No header, insira um menu ou um logotipo. No main, adicione os elementos do portfólio como título, parágrafo, botões e imagem. Por fim, no footer, coloque informações como contato ou direitos autorais. Lembre-se de que cada elemento deve ser colocado de forma lógica e estruturada para criar um site acessível e bem organizado.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfólio de Guilherme de Freitas Santos</title>
</head>
<body>
<header>
<img src="10061736.png" alt="Foto de indivíduo contente em programar">
</header>
<main>
<h1>Portfólio do desenvolvedor Guilherme de Freitas Santos</h1>
<h2>Aprofundamento e explicação detalhada do portfólio</h2>
<p> Olá, me chamo Guilherme ! Sejam bem-vindos ao meu portfólio ! Sou uma pessoa recém-formada do ensino médio, para ser mais específico, da Escola Estadual Frei Orlando, atualmente, eu tenho 87 anos. Eu já estou alguns meses na área de programação com a Alura, explorando e adquirindo habilidades que podem me ser úteis em minha futura carreira profissional e em projetos colaborativos ! Ademais, paralelamente ao curso, eu sou um futuro aluno da Faculdade Federal de Ouro Preto, onde eu estudarei engenharia da computação.
</p>
<img src="1995515.png" alt="Foto de um indivíduo com os braços cruzados e um computador ao fundo">
</main>
<footer>
<p>Contato: guilhermeguimorada@gmail.com</p>
<a href="https://instagram.com/guifreitasz7">instagram</a>
<a href="https://github.com/Gui-alt-code ">Github</a>
</footer>
</body>
</html>
Exercício 3) Entendendo e aplicando as tags meta
Explore o uso das tags meta no cabeçalho do seu HTML. Altere a tag lang para "pt-br", ajuste o charset para "UTF-8", adicione a tag meta para compatibilidade com o Edge e outra para configuração do viewport. Por fim, mude o título da sua página para algo relacionado ao seu projeto, por exemplo, "Portfólio de [Seu Nome]". Entenda como cada uma dessas mudanças afeta a funcionalidade e a acessibilidade do seu site.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfólio de Guilherme de Freitas Santos</title>
</head>
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!