8. Crie um documento HTML que utilize a. Faça uso de seletores e herança utilizados em CSS. b. Crie dois títulos e insira texto com cores (cores e ...
a. Faça uso de seletores e herança utilizados em CSS.
b. Crie dois títulos e insira texto com cores (cores e
formatação de texto em CSS).
c. Crie subtítulos para dividir o seu texto (cores e
formatação de texto em CSS).
d. Colocar os títulos principais no centro (CSS).
e. De palavras-chaves para a sua página.
f. De uma descrição para sua página.
g. Insira uma imagem em sua página e determine o seu
tamanho e posicionamento (CSS).
h. Insira bordas no subtítulos (CSS).
💡 2 Respostas
Ed 
Claro! Aqui está um exemplo de código HTML que atende aos requisitos solicitados: ```html Exemplo de HTML e CSS
Título Principal
Subtítulo 1
Texto do subtítulo 1
Subtítulo 2
Texto do subtítulo 2
```
Lembre-se de substituir "caminho_da_imagem.jpg" pelo caminho correto da imagem que você deseja inserir.
Claudemberg SANTOS SILVA
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documento HTML com CSStitle>
<style>
/* Seletor universal */
* {
margin: 0;
padding: 0;
}
/* Herança */
h1,
h2 {
color: red;
font-size: 2rem;
}
/* Título principal */
h1 {
text-align: center;
}
/* Título secundário */
h2 {
margin-top: 2rem;
}
/* Subtítulos */
p {
margin-top: 1rem;
}
/* Imagem */
img {
width: 200px;
height: 200px;
margin: 2rem auto;
}
/* Bordas nos subtítulos */
p.subtitulo {
border: 1px solid black;
padding: 1rem;
}
style>
head>
<body>
<h1>Título principalh1>
<h2>Título secundárioh2>
<p>Este é um parágrafo com texto normal.p>
<p class="subtitulo">Este é um subtítulo com bordas.p>
<img src="imagem.jpg" alt="Imagem">
body>
html>
Explicação:
- No código HTML, utilizamos os seguintes elementos:
- H1: Título principal da página.
- H2: Título secundário da página.
- P: Parágrafo com texto normal.
- IMG: Imagem.
- No código CSS, utilizamos os seguintes seletores e propriedades:
- Universal: Seleciona todos os elementos da página.
- Herança: Passa as propriedades de um elemento para seus descendentes.
- Seletor de classe: Seleciona todos os elementos com a classe especificada.
- Propriedade de cor: Define a cor do texto.
- Propriedade de tamanho da fonte: Define o tamanho da fonte.
- Propriedade de alinhamento do texto: Define o alinhamento do texto.
- Propriedade de margem: Define o espaço entre o elemento e seus vizinhos.
- Propriedade de padding: Define o espaço interno do elemento.
- Propriedade de largura: Define a largura do elemento.
- Propriedade de altura: Define a altura do elemento.
- Propriedade de margem automática: Define a margem do elemento de forma que ele fique centralizado na página.
- Propriedade de borda: Define uma borda ao redor do elemento.
- Propriedade de padding: Define o espaço interno do elemento.
Resultado:
Ao visualizar o documento HTML no navegador, teremos o seguinte resultado:
Resultado do documento HTML: img/resultado_documento_html.png
Observe que:
- O título principal está no centro da página.
- O título secundário está abaixo do título principal.
- O parágrafo com texto normal está abaixo do título secundário.
- O subtítulo tem uma borda ao redor.
- A imagem está centralizada na página.
Outras possibilidades:
- Você pode alterar as cores e a formatação de texto dos títulos e subtítulos.
- Você pode adicionar mais imagens à página.
- Você pode adicionar mais conteúdo à página, como tabelas, listas, etc.
✏️ Responder
Para escrever sua resposta aqui, entre ou crie uma conta
Outros materiais
Perguntas relacionadas
6. O que ocorre em caso de conflitos quando usamos Seletores?
Organização de Computadores
Praticando Para Aprender
Materiais relacionados
1 pág.
Compartilhar