Scribd
Importer
457 vues9 pages

Créer Un Site Web Complet Avec HTML, CSS, PHP, Et MySQL, Surtout Pour

Transféré par

blissbotnet
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
457 vues9 pages

Créer Un Site Web Complet Avec HTML, CSS, PHP, Et MySQL, Surtout Pour

Transféré par

blissbotnet
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 9

Créer un site web complet avec HTML, CSS, PHP, et MySQL, surtout pour un cas d'utilisation si

spécifique, nécessite plusieurs fichiers et de nombreuses lignes de code. Je peux vous fournir
des exemples de base pour chaque composant et de quelle manière vous pourriez les structurer.

### Exemple 1 : Site de présentation d'une entreprise d'intermédiation

#### 1. Structure HTML de base


```html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Entreprise d'Intermédiation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Bienvenue chez [Nom de l'entreprise]</h1>
</header>
<section>
<h2>Nos Services</h2>
<p>Nous offrons des services d'intermédiation commerciale dans l'immobilier, la vente de
véhicules et bien plus.</p>
</section>
<footer>
<p>&copy; 2024 [Nom de l'entreprise]</p>
</footer>
</body>
</html>
```

#### 2. Feuille de style CSS


```css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
}
header {
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}

section {
padding: 20px;
background-color: #f4f4f4;
}

footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
}
```

### Exemple 2 : Site avec affichage d'images et des prix

#### 1. HTML avec images et prix


```html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Catalogue d'Immobilier et Véhicules</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Catalogue de nos Offres</h1>
</header>
<section>
<h2>Immobilier</h2>
<div class="item">
<img src="maison1.jpg" alt="Maison 1">
<p>Maison Moderne - 200,000€</p>
</div>
<div class="item">
<img src="maison2.jpg" alt="Maison 2">
<p>Villa Luxueuse - 500,000€</p>
</div>
<h2>Véhicules</h2>
<div class="item">
<img src="voiture1.jpg" alt="Voiture 1">
<p>Voiture Sportive - 30,000€</p>
</div>
<div class="item">
<img src="voiture2.jpg" alt="Voiture 2">
<p>SUV Familial - 40,000€</p>
</div>
</section>
<footer>
<p>&copy; 2024 [Nom de l'entreprise]</p>
</footer>
</body>
</html>
```

#### 2. CSS pour mise en page avec images


```css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
}

header {
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}

section {
padding: 20px;
background-color: #f4f4f4;
}

.item {
margin: 20px 0;
}

.item img {
max-width: 100%;
height: auto;
display: block;
}

footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
}
```

### PHP et MySQL (Back-end basique pour récupérer et afficher des données)

#### 3. Exemple de PHP pour récupérer des données


```php
<?php
$servername = "localhost";
$username = "root";
$password = "yourpassword";
$dbname = "intermediation";

// Créer connexion
$conn = new mysqli($servername, $username, $password, $dbname);

// Vérifier connexion
if ($conn->connect_error) {
die("Connexion échouée
Créer un site web complet pour une entreprise qui fait de l’intermédiation commerciale dans
l’immobilier et la vente de véhicules nécessite un bon équilibre entre HTML, CSS et PHP pour la
fonctionnalité dynamique. Ci-dessous, je vais te fournir une structure de base que tu pourras
peaufiner selon tes besoins.

### Première Version: Site de Présentation

#### HTML (index.html)


```html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Intermédiation Commerciale</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Notre Entreprise</h1>
</header>
<nav>
<ul>
<li><a href="#immobilier">Immobilier</a></li>
<li><a href="#vehicules">Véhicules</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<main>
<section id="immobilier">
<h2>Intermédiation Immobilière</h2>
<p>Nous vous aidons à trouver la maison de vos rêves.</p>
</section>
<section id="vehicules">
<h2>Vente de Véhicules</h2>
<p>Découvrez notre large gamme de véhicules.</p>
</section>
</main>
<footer>
<p>Contactez-nous au : 123-456-7890</p>
</footer>
</body>
</html>
```

#### CSS (style.css)


```css
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}

header, nav, main, footer {


padding: 10px;
text-align: center;
}

nav ul {
list-style: none;
padding: 0;
}

nav ul li {
display: inline;
margin: 0 10px;
}

nav ul li a {
text-decoration: none;
color: #333;
}

h1, h2 {
color: #007BFF;
}
```

#### PHP (Aucun besoin particulier pour la version de présentation)

Cette première version est simplement une page statique de présentation.

### Deuxième Version: Avec Images et Prix


#### HTML (index.php)
Pour cette version, nous allons utiliser PHP pour inclure dynamiquement des images et des prix.

```php
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Intermédiation Commerciale</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Notre Entreprise</h1>
</header>
<nav>
<ul>
<li><a href="#immobilier">Immobilier</a></li>
<li><a href="#vehicules">Véhicules</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<main>
<section id="immobilier">
<h2>Intermédiation Immobilière</h2>
<?php
$maisons = [
['image' => 'maison1.jpg', 'prix' => '250,000 €'],
['image' => 'maison2.jpg', 'prix' => '320,000 €']
];
foreach ($maisons as $maison) {
echo "<div class='item'>
<img src='images/{$maison['image']}' alt='Maison'>
<p>Prix: {$maison['prix']}</p>
</div>";
}
?>
</section>
<section id="vehicules">
<h2>Vente de Véhicules</h2>
<?php
$vehicules = [
['image' => 'voiture1.jpg', 'prix' => '20,000 €'],
['image' => 'voiture2.jpg', 'prix' => '25,000 €']
];
foreach ($vehicules as $vehicule) {
echo "<div class='item'>
<img src='images/{$vehicule['image']}' alt='Véhicule'>
<p>Prix: {$vehicule['prix']}</p>
</div>";
}
?>
</section>
</main>
<footer>
<p>Contactez-nous au : 123-456-7890</p>
</footer>
</body>
</html>
```

#### CSS (style.css)


Ajoute un peu de style pour les images et leurs descriptions.

```css
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}

header, nav, main, footer {


padding: 10px;
text-align: center;
}

nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 10px;
}

nav ul li a {
text-decoration: none;
color: #333;
}

h1, h2 {
color: #007BFF;
}

.item {
display: inline-block;
margin: 15px;
text-align: center;
}

.item img {
width: 200px;
height: auto;
}

.item p {
margin: 5px 0;
}
```

Pour exécuter ce code, assure-toi que ton serveur web (comme Apache) est configuré pour
exécuter PHP, et que les images mentionnées (`maison1.jpg`, `maison2.jpg`, `voiture1.jpg`,
`voiture2.jpg`) sont disponibles dans un dossier `images` sur ton serveur.

Vous aimerez peut-être aussi