em
Para criar um HTML para o seu blog que exiba manchetes de um site de notícias, você pode usar a técnica de consumo de APIs públicas de notícias (como a News API) ou fazer scraping de sites (se permitido). Abaixo está um exemplo básico usando JavaScript para integrar uma API de notícias (recomendo obter sua própria chave de API para testes):

Exemplo de HTML com integração de API:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Manchetes de Notícias</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
      background-color: #f9f9f9;
      color: #333;
    }
    h1 {
      text-align: center;
      color: #0073e6;
    }
    .news-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 20px;
      margin-top: 20px;
    }
    .news-item {
      background: #fff;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 15px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .news-item h2 {
      font-size: 18px;
      color: #0073e6;
    }
    .news-item p {
      font-size: 14px;
      color: #555;
    }
    .news-item a {
      text-decoration: none;
      color: #0073e6;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h1>Últimas Notícias</h1>
  <div id="news-container" class="news-container">
    <!-- As notícias aparecerão aqui -->
  </div>

  <script>
    // Substitua pela sua chave de API do NewsAPI
    const API_KEY = 'sua_chave_api';
    const API_URL = `https://newsapi.org/v2/top-headlines?country=br&apiKey=${API_KEY}`;

    async function fetchNews() {
      try {
        const response = await fetch(API_URL);
        const data = await response.json();

        const newsContainer = document.getElementById('news-container');
        newsContainer.innerHTML = '';

        data.articles.forEach(article => {
          const newsItem = document.createElement('div');
          newsItem.className = 'news-item';

          newsItem.innerHTML = `
            <h2>${article.title}</h2>
            <p>${article.description || 'Sem descrição disponível.'}</p>
            <a href="${article.url}" target="_blank">Leia mais</a>
          `;

          newsContainer.appendChild(newsItem);
        });
      } catch (error) {
        console.error('Erro ao buscar notícias:', error);
        const newsContainer = document.getElementById('news-container');
        newsContainer.innerHTML = '<p>Erro ao carregar as notícias. Tente novamente mais tarde.</p>';
      }
    }

    // Carrega as notícias ao abrir a página
    fetchNews();
  </script>
</body>
</html>

Passos para usar:

1. API Key: Registre-se no News API para obter uma chave de API gratuita. Substitua sua_chave_api no código.


2. Hospedar o Arquivo: Salve o arquivo como index.html e abra-o no navegador para verificar.


3. Manchetes em Tempo Real: O script buscará manchetes de notícias recentes do Brasil e exibirá no layout configurado.


4. Legalidade: Certifique-se de seguir os Termos de Serviço da API/website ao usar dados ou realizar scraping.



Comentários

Postar um comentário