Création moteur de recherche

chichoumaxi Messages postés 3 Statut Membre -
jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention - 18 févr. 2019 à 13:41

Je voudrais créer un moteur de recherche mais je ne sais pas comment faire... J'ai cherché sur le net mais je n'ai rien trouvé.
Pour l'instant ça donne ça:

Code:

<html>
 <head>
    <title>Meelo</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  </head>
  
  <body>
    <header>
      <nav>
        <ul id="nav_bar">
          <li class="nav-links" id="Mail"><a href="#">Mail</a></li>
          <li class="nav-links"><a href="#">Images</a></li>
          <li id="sign_in"><a href="#">Sign In</a></li>
        </ul>  
      </nav>  
    </header>  
    
    <!-- GOOGLE IMG -->  
    <div class="google">
  
<p><img id="meelo" style="display: block; margin-left: auto; margin-right: auto;" src="https://upload.wikimedia.org/wikipedia/commons/5/5b/Meelo159.png" width="611" height="355" /></p>
    </div>
    
    <!-- FORM SEARCH -->  
    <div class="form">  
      <form>
        <label for="form-search"></label>
        <input type="text" id="form-search" placeholder="Rechercher...">
      </form>
    </div>  
    
    <!-- BUTTONS -->
    <div class= "buttons">  
      <input type="submit" value="Meelo Search" id="Meelo_search">
      <input type="submit" value="Contactez-Nous" id="im_feeling_lucky">
    </div>
      
    <!-- FOOTER -->
    <footer>
        <ul class="footer-left">
          <li><a href="meelo.html/results">Advertising</a></li>
          <li><a href="#">Business</a></li>
          <li><a href="#">About</a></li> 
        </ul>
        <ul class="footer-right">    
          <li><a href="#">Privacy</a></li>
          <li><a href="#">Terms</a></li>
          <li><a href="#">Settings</a></li>
        </ul>       
    </footer>      
  </body>
<style>
/* BASIC STYLES */
body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
}

header {
  width: 100%;
}

ul {
  list-style: none;
}

/* NAV BAR */
#nav_bar {
  float: right;
}

#nav_bar li {
  display: inline-block;
  padding: 8px;
}

#nav_bar #sign_in {
  background: #4887ef; 
  margin-right: 25px;
  padding: 7px 15px;
  border-radius: 3px; 
  font-weight: bold;
}

.nav-links {
  color: #404040;
}

a {
  text-decoration: none;
  color: inherit;
}

li.nav-links a:hover {
  text-decoration: underline;
}

#sign_in:hover { 
  box-shadow: 1px 1px 5px #999;
}

#sign_in {
  color: #fff;
}

/* GOOGLE AREA */
.google #meelo {
  text-align: center;
  display: block;
  margin: 0 auto;
  clear: both;
  padding-top: 112px;
  padding-bottom: 20px;
}

.form {
  text-align: center;
}

#form-search { 
  width: 450px;
  line-height: 32px;
  padding: 20px 10px;
}

.form #form-search {
  padding: 0 8px;
}

/*#form-search:hover {
  border-color: #e4e4e4;
  padding-top: 0;
}*/

.buttons {
  text-align: center;
  padding-top: 30px;
  margin-bottom: 300px;
}

/* FOOTER */
footer  {
  background: #f2f2f2;
  border-top: solid 2px #e4e4e4;
/*   position: fixed; */
  bottom: 0;
  padding-bottom: 0;
  width: 100%;
  
}

footer ul li {
  display: inline;
  color: #666666;
  font-size: 14px;
  padding: 13px;
}

footer ul {
  float: left;
  padding: 1px;
}

footer ul a:hover {
  text-decoration: underline;
}

.footer-right {
  float: right;
}

/* MEDIA QUERIES */

@media screen and (max-width: 400px) {
 
 li.nav-links a {
    display: none;
  }
  
 #google_logo {
   padding: 0;
 }
  
 .buttons {
   display: none;
 }
  
 #form-search {
   width: 80%;

 }
  
 footer {
   bottom: 0;
 }
  
 footer ul {
   float: none;
   padding-bottom: 2px;
    
 }
  
 .footer-left {
   text-align: center;
   margin: auto; 
   padding-top: 10px;
    
 }
  
 .footer-right {
   float: none;
   text-align: center;
   
 }
}

@media screen and (max-width: 565px) {
 
  li.nav-links a {
    display: none;
  }
  
  
 #google_logo {
   padding: 0;
 }
  
 .buttons {
   display: none;
 }
  
 #form-search {
   width: 80%;

 }
  
 footer {
/*    bottom: 0;
   postion: absolute; */
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;
 }
  
 footer ul {
   float: none;
   padding-bottom: 2px;
    
 }
  
 .footer-left {
   text-align: center;
   margin: auto; 
   padding-top: 10px;
    
 }
  
 .footer-right {
   float: none;
   text-align: center;
   
 }
}
</style>

<link rel="icon" href="favicon.ico" />

EDIT : Ajout des balises de code

Afficher la suite

2 réponses

Réponse 1 / 2
jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 832

Bonjour,

Créer un moteur de recherche pour ?
Chercher Où et quoi ?
Les données sont stockées dans une base de données ?
Sachant que le html seul ne suffira pas.... quoi qu'il arrive il te faudra un langage "serveur" comme le php par exemple...
1
1. chichoumaxi Messages postés 3 Statut Membre
  
  Oui, j'ai besoin de faire un moteur de recherche un peu comme Google (beaucoup Moins célèbre évidemment) pour naviguer dans le web avec... Le php je ne connais pas tout
  
  0
2. jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 832
  
  Oulala...
  Tu ne te rends pas compte de tout ce qu'il y a derrière un moteur de recherches...
  
  0
Réponse 2 / 2
chichoumaxi Messages postés 3 Statut Membre

comment je peut faire
0
1. jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 832
  
  Il faut de solides connaissances en bases de données.
  Développer des "robots" qui iront parcourir les sites internet et les indexer (stocker les url des sites et des différentes pages dans ta base de données et , via quelques algorithmes, les classer par catégories/mots clés).
  Puis développer les scripts qui te permettrons de rechercher les sites dans ta bdd
  Je doute fortement, vu ta question et tes connaissances que tu ne parviennent à faire ne serait-ce que 2% de tout ce qui serait nécessaire à l’accomplissement d'un tel travail....
  
  0

Création moteur de recherche

2 réponses

Discussions similaires

Newsletters