Publicando uma notícia com fotos
Descrição:
Neste exercício, você criará o layout de uma notícia fictícia em um site de notícias. Para isso você usará a propriedade float para posicionar as imagens dentro do corpo da notícia. O objetivo é entender como usar o float para controlar o posicionamento de elementos dentro de um conteúdo textual.
Instruções:
- Crie um novo arquivo HTML chamado
noticia.html. - No documento HTML, defina a estrutura básica de uma página web, incluindo os elementos
<head>e<body>. - No
<body>, crie um título para a notícia, um subtítulo e um parágrafo introdutório. - Adicione duas imagens relacionadas à notícia. As imagens devem estar posicionadas dentro do conteúdo textual da notícia.
- Use a propriedade float para posicionar uma imagem à esquerda ou a outra à direita do texto.
- Posicione uma imagem próximo ao início da notícia e outra próxima do fim do texto.
- Aplique estilos CSS para as imagens, como larguras fixas, margens e bordas, para tornar o layout mais atraente.
- Certifique-se de que o texto do corpo da notícia flua ao redor das imagens, criando um layout agradável e legível.
- Salve seus arquivos e abra o arquivo noticia.html em um navegador para verificar o layout da notícia que você criou.
Dicas:
- Use a propriedade float para posicionar as imagens e permitir que o texto flua ao redor delas.
- Use as propriedades de CSS, como width, margin, border, padding e background-color, para estilizar as imagens e o texto.
- Pode ser útil aplicar uma margem entre o texto e as imagens para melhorar o espaçamento.
Desafio Extra:
- Crie uma classe CSS que defina um estilo especial para o título da notícia, destacando-o do restante do conteúdo.
Gostou? Não esqueça de avaliar o exercício: