Atividade 1 - Primeiro html com pesquisa!
Valor: 0,5 Pontos
Hoje em sala de aula, tivemos a atividade de criar um site respondendo perguntas sobre HTML, CSS e tags usadas para criar um site.
Perguntas:
- O que é HTML?
- O que é CSS?
- Para que serve a tag head?
- Para que serve a tag meta?
- O que é charset? Qual é o charset utilizado no Brasil?
- Como funciona a tag img?
- Como funciona a tag a?
- Como funciona a tag h1? E a h6
- Como usar o atributo style nas tags?
- Qual a propriedade utilizada no css para alterar a cor da letra em um texto? Faça um exemplo.
Código HTML:
<!-- 📂 ~/public/html/002/WebDev-atividade_1.html -->
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<meta name="author" content="André Codato" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Atividade 1 - Primeiro html com pesquisa</title>
<style>
body {
background-color: #003ea8;
display: flex;
flex-direction: column;
align-items: center;
}
.container {
width: 80%;
background-color: rgba(255, 255, 255, 0.7);
padding: 20px;
margin: 20px;
border-radius: 10px;
max-height: fit-content;
}
.activity-title h1 {
color: #fff;
font-size: 35px;
}
.img-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
align-items: center;
}
.img-grid img {
width: 100%;
height: auto;
border-radius: 2%;
}
h1 {
color: #2c2c2c;
}
p {
color: #2c2c2c;
font-family: "Lucida Console", "Courier New", monospace;
font-size: 20px;
}
</style>
</head>
<body>
<div class="activity-title">
<h1>Atividade 1 - Primeiro html com pesquisa</h1>
</div>
<div class="container">
<h1>O que é HTML?</h1>
<p>
O HTML (HyperText Markup Language) é uma linguagem de marcação utilizada
para estruturar sites.
</p>
<hr />
<h1>O que é CSS?</h1>
<p>
O CSS (Cascading Style Sheets) é uma linguagem de estilo utilizada para
fazer a parte visual de uma estrutura HTML.
</p>
<hr />
<h1>Para que serve a tag head?</h1>
<p>
A tag <code>head</code> não é visível ao usuário e serve para definir
metadados como Título, Autor, Charset, Links para arquivos CSS e scripts
JavaScript.
</p>
<hr />
<h1>Para que serve a tag meta?</h1>
<p>
A tag meta define um metadado, pode ser <code>charset</code>,
<code>name</code>, <code>content</code>, entre outros.
</p>
<hr />
<h1>O que é charset? Qual é o charset utilizado no Brasil?</h1>
<p>
O charset é o conjunto de caracteres que podemos utilizar no documento,
cada linguagem usa um padrão, aqui no Brasil, utilizamos o
<code>UTF-8</code>.
</p>
<hr />
<h1>Como funciona a tag img?</h1>
<p>
Utilizamos a tag <code>img</code> para exibir imagens.<br />
Nela podemos definir atributos como <code>src</code> (Caminho da
imagem), <code>alt</code> (Texto alternativo. Muito utilizado para
questões de acessibilidade!), entre outros.<br>Exemplos:
</p>
<div class="img-grid">
<img
src="https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExMTZ1cjVxdXdyMWkxcjFjM29pejh6OWhyNG91eGkxYWc0bm5yZ2p6dyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/8OYnFrez06yQt9zJFW/giphy.gif"
alt="Gif de um nerd com óculos e um livro na mão"
style="border-radius: 2%;"
/>
<img
src="https://i.redd.it/shall-we-play-a-game-did-you-have-a-rockin-computer-set-up-v0-l97mmtf8fy0f1.jpg?width=995&format=pjpg&auto=webp&s=03285599dc6f768bbd05fe551209be6722bd1569"
alt="Nerd no seu habitat natural, o computador"
style="border-radius: 2%;"
/>
<img
src="https://m.media-amazon.com/images/M/MV5BNTVjMzNhOWQtNDZkZC00NGJkLThjZTYtZDA2MWM3Yzk2YjhiXkEyXkFqcGc@._V1_QL75_UX501_.jpg"
alt="HACKERMAN"
style="border-radius: 2%;"
/>
</div>
<hr />
<h1>Como funciona a tag a?</h1>
<p>
Utilizamos a tag <code>a</code> quando queremos fazer um Hyperlink, ou
seja, queremos criar um link para outra página ou site.<br />
Nela podemos definir <code>href</code> (Caminho do link),
<code>target</code>(Onde o link será aberto), entre outros.<br>Exemplo:
<code><a href="https://www.google.com" target="_blank">Google</a></code><br>
Resultando em <a href="https://www.google.com" target="_blank">Google</a>
</p>
<hr />
<h1>Como funciona a tag h1? e a h6?</h1>
<p>
As tags <code>h1</code> a <code>h6</code> são utilizadas para definir
títulos, sendo o <code>h1</code> o mais importante e o <code>h6</code> o
menos importante.<br>Exemplos:
<code><h1>Título 1</h1></code><br>
<code><h6>Título 6</h6></code><br>
Resultando em <h1>Título 1</h1> e <h6>Título 6</h6>
</p>
<hr />
<h1>Como usar o atributo style nas tags?</h1>
<p>
O atributo <code>style</code> é utilizado para aplicar estilos diretamente
em uma tag HTML.<br>Por exemplo: <code><p style="font-size: 50px;">Texto grande</p></code>
<br>Resultando em <p style="font-size: 50px;">Texto grande</p>
</p>
<hr />
<h1>
Qual a propriedade utilizada no css para alterar a cor da letra em um
texto? Faça um exemplo.
</h1>
<p>
A propriedade utilizada no CSS para alterar a cor da letra em um texto é
<code>color</code>.<br>Por exemplo: <code><p style="color: blue;">Texto azul</p></code><br>
Resultando em <p style="color: blue;">Texto azul</p>
</p>
</div>
</body>
</html>
Até o próximo post! 🚀