Scribd
Importer
8 vues5 pages

Exercices HTML, CSS et JavaScript

Le document présente une série de mini-exercices pour apprendre les bases du HTML, CSS et JavaScript. Chaque exercice a un objectif spécifique, comme créer une page HTML simple, appliquer des styles CSS, interagir avec des boutons en JavaScript, et manipuler des éléments du DOM. Les exemples de code fournis illustrent chaque concept de manière pratique.

Transféré par

abdelouakil.lamakchaoui
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
8 vues5 pages

Exercices HTML, CSS et JavaScript

Le document présente une série de mini-exercices pour apprendre les bases du HTML, CSS et JavaScript. Chaque exercice a un objectif spécifique, comme créer une page HTML simple, appliquer des styles CSS, interagir avec des boutons en JavaScript, et manipuler des éléments du DOM. Les exemples de code fournis illustrent chaque concept de manière pratique.

Transféré par

abdelouakil.lamakchaoui
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

## **Mini-exercice 1 – HTML de base**

> **Objectif :** Créer une page contenant un titre, un paragraphe et une image.

<!DOCTYPE html>

<html>

<head>

<title>Ma première page</title>

</head>

<body>

<h1>Bienvenue sur ma page</h1>

<p>Voici un paragraphe simple en HTML.</p>

<img src="[Link] alt="Image exemple">

</body>

</html>

``

## **Mini-exercice 2 – CSS : Mise en forme**

> **Objectif :** Appliquer des styles à des éléments HTML.

```html

<!DOCTYPE html>

<html>

<head>

<style>

body {
background-color: #f0f0f0;

font-family: Arial;

h1 {

color: darkblue;

p{

color: gray;

font-size: 18px;

</style>

</head>

<body>

<h1>Titre stylisé</h1>

<p>Ce texte est stylisé avec CSS.</p>

</body>

</html>

```

## **Mini-exercice 3 – JavaScript : Interagir avec un bouton**

> **Objectif :** Afficher une alerte quand on clique sur un bouton.

```html

<!DOCTYPE html>

<html>

<body>
<button onclick="saluer()">Clique ici</button>

<script>

function saluer() {

alert("Bonjour, tu as cliqué sur le bouton !");

</script>

</body>

</html>

```

## **Mini-exercice 4 – Formulaire + JavaScript**

> **Objectif :** Afficher le nom saisi par l’utilisateur.

```html

<!DOCTYPE html>

<html>

<body>

<h2>Formulaire</h2>

<input type="text" id="nom" placeholder="Ton nom">

<button onclick="afficherNom()">Afficher</button>

<p id="message"></p>

<script>

function afficherNom() {
let nom = [Link]("nom").value;

[Link]("message").innerText = "Bonjour " + nom + " !";

</script>

</body>

</html>

```

## **Mini-exercice 5 – Changer la couleur au survol (CSS : hover)**

> **Objectif :** Changer la couleur d’un bouton au passage de la souris.

```html

<!DOCTYPE html>

<html>

<head>

<style>

button {

padding: 10px;

background-color: green;

color: white;

border: none;

button:hover {

background-color: darkgreen;

</style>

</head>

<body>
<button>Survole-moi !</button>

</body>

</html>

```

## **Mini-exercice 6 – Cacher/Afficher un élément avec JavaScript**

```html

<!DOCTYPE html>

<html>

<body>

<p id="texte">Ce texte peut être caché ou affiché.</p>

<button
onclick="[Link]('texte').[Link]='none'">Cacher</button>

<button
onclick="[Link]('texte').[Link]='block'">Afficher</button>

</body>

</html>

Vous aimerez peut-être aussi