|

Modelo em html para você criar seu próprio bookmark

PorSamantha

Se você quer criar seu próprio bookmark, contendo os sites que você mais visita, você pode fazer isso de algumas maneiras. Pode simplesmente abrir um arquivo .txt e ir colocando todos seus sites favoritos nele, pode fazer isso em um arquivo de planilha (estilo Microsoft Excel e similares) e também pode criar um arquivo .html. Gosto dessa última alternativa porque é também uma maneira de aprender ou treinar uma habilidade, que é entender a estrutura de um arquivo .html.

Para quem nunca criou ou editou um arquivo .html, vou disponibilizar aqui um exemplo, que na verdade é um trecho do meu próprio bookmark. Basta copiar o conteúdo do box abaixo e colá-lo em um editor do tipo Bloco de Notas ou Notepad++, onde você poderá editar, alterar os blocos, colocar os sites que você acessa frequentemente, etc. Não se esqueça de salvá-lo com a extensão .html. Na sequência, abra o arquivo salvo em um navegador (Mozilla, Chrome, Tor, etc) para ver as alterações que você fez. 

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Meus Bookmarks</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #fefefe;
      color: #333;
      padding: 2rem;
    }
    h1 {
      color: #005a9c;
    }
    ul {
      list-style-type: none;
      padding-left: 0;
    }
    li {
      margin-bottom: 0.5rem;
    }
    a {
      color: #0066cc;
      text-decoration: none;
    }
    a:hover {
      text-decoration: underline;
    }
    .categoria {
      margin-top: 2rem;
    }
  </style>
</head>
<body>
  <h1>🌐 Meus Bookmarks</h1>

  <div class="categoria">
    <h2>📰 Blogs</h2>
    <ul>
      <li><a href="https://www.momentumsaga.com" target="_blank">Momentum Saga</a></li>
      <li><a href="https://julietheblog.blogspot.com/" target="_blank">Julie The Blog</a></li>
      <li><a href="https://habeasmentem.wordpress.com/" target="_blank">Habeas Mentem</a></li>
	  <li><a href="https://www.monolitonimbus.com.br/" target="_blank">Monolito Nimbus</a></li>
	  <li><a href="https://www.meteoropole.com.br/" target="_blank">Meteorópole</a></li>	  
    </ul>
  </div>

  <div class="categoria">
    <h2>🌍 Geodésia </h2>
    <ul>
      <li><a href="https://www.sunearthtools.com/dp/tools/conversion.php?lang=pt" target="_blank">Conversor de Coordenadas</a></li>
      <li><a href="https://www.calculator.net/distance-calculator.html" target="_blank">Cálculo da distância entre dois pontos (incluindo lat/lon) </a></li>      
    </ul>
  </div>

  <div class="categoria">
    <h2>💻 Ferramentas Online</h2>
    <ul>
      <li><a href="https://github.com/" target="_blank">GitHub</a></li>
     <li><a href="https://arxiv.org/" target="_blank">arXiv - busca por atividades em várias áreas do conhecimento - Cornell</a></li>
    </ul>
  </div>

  <div class="categoria">
    <h2>🔆 Meus Shiny Apps</h2>
    <ul>
      <li><a href="https://meteoropole.shinyapps.io/app_vampetaco/" target="_blank">Vampetaço</a></li>
      <li><a href="https://meteoropole.shinyapps.io/app_funcao_1_grau/" target="_blank">Função de Primeiro Grau</a></li>
	  <li><a href="https://meteoropole.shinyapps.io/app_funcao_2_grau/" target="_blank">Função de Segundo Grau Grau</a></li>
	  <li><a href="https://meteoropole.shinyapps.io/app_monte_carlo_pi/" target="_blank">Experimento de Monte Carlo para estimar pi</a></li>

    </ul>
  </div>

</body>
</html>

Estou meio viciada em colocar emoji em meus códigos (eu sou meio besta, vocês já sabem). Como não há um teclado de emoji (pelo menos eu desconheço tal coisa e particularmente me parece desnecessária) e eu não quero ficar procurando emojis em sites por aí, baixei esse arquivo .csv com uma lista de emojis pra usar. Só copiar/colar.

Imagem que abre o post: by Gerd Altmann from Pixabay

Posts Similares

Comente