Objectif de la séance

Comprendre les bases du HTML pour :
- Créer des pages web simples.
- Structurer du contenu adapté à des besoins commerciaux (landing pages, fiches produits, blogs d’entreprise, etc.).
- Ajouter une compétence essentielle pour le marketing digital.

HTML

Le HTML, ou HyperText Markup Language (en français, Langage de balisage d’hypertexte), est le langage de balisage standard utilisé pour créer et structurer des pages web.

Exemple de balises : <html>,<body>,<p>

Le HTML est la base de la structure d’une page web, mais il est souvent utilisé en conjonction avec d’autres technologies web telles que les feuilles de style CSS (Cascading Style Sheets) pour définir la présentation visuelle et JavaScript pour ajouter des fonctionnalités interactives.

Exemple d’un page HTML :

Ce qui donnera pour l’instant :

TAF :

Avec un éditeur de texte : NotePad, VSC ( celui que vous aurez sur votre ordi ).

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titre de la page</title>
    <!-- Vous pouvez inclure ici des liens vers des feuilles de style CSS -->
</head>
<body>
    <header>
        <h1>Titre principal de la page</h1>
        <nav>
            <!-- Ajoutez ici des liens de navigation si nécessaire -->
        </nav>
    </header>

    <main>
        <section>
            <h2>Section 1</h2>
            <p>Contenu de la section 1...</p>
        </section>

        <section>
            <h2>Section 2</h2>
            <p>Contenu de la section 2...</p>
        </section>
    </main>

    <footer>
        <!-- Ajoutez ici le contenu du pied de page, comme des informations -->
    </footer>
</body>
</html>

Recopier ce code HTML et testez le dans un navigateur.

Ensuite faites les exercices suivants (Vous pourrez vous aider du Web et de ChatGPT pour trouver comment faire des liens et ce qu’est un lien de navigation.):

Exercice 1 : Ajouter des sections

Objectif : Ajouter une nouvelle section avec un titre et un paragraphe.

Instructions :

Ajouter une troisième section dans la balise <main>.
Donner un titre <h2> à cette nouvelle section, par exemple : « Section 3 ».
Ajouter un paragraphe <p> dans cette section avec le texte « Contenu de la section 3… ».

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titre de la page</title>
    <!-- Vous pouvez inclure ici des liens vers des feuilles de style CSS -->
</head>
<body>
    <header>
        <h1>Titre principal de la page</h1>
        <nav>
            <!-- Ajoutez ici des liens de navigation si nécessaire -->
        </nav>
    </header>

    <main>
        <section>
            <h2>Section 1</h2>
            <p>Contenu de la section 1...</p>
        </section>

        <section>
            <h2>Section 2</h2>
            <p>Contenu de la section 2...</p>
        </section>

        <!-- Nouvelle section ajoutée -->
        <section>
            <h2>Section 3</h2>
            <p>Contenu de la section 3...</p>
        </section>
    </main>

    <footer>
        <!-- Ajoutez ici le contenu du pied de page -->
    </footer>
</body>
</html>

Exercice 2 : Créer une navigation

Objectif : Ajouter des liens dans la balise <nav>.

Instructions :

Ajouter une liste non ordonnée <ul> dans la balise <nav>.
Insérer trois éléments de liste <li>, chacun contenant un lien <a> vers une section de la page (ex. : #section1, #section2, #section3).

 <!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titre de la page</title>
    <!-- Vous pouvez inclure ici des liens vers des feuilles de style CSS -->
</head>
<body>
    <header>
        <h1>Titre principal de la page</h1>
        <nav>
            <ul>
                <li><a href="#section1">Section 1</a></li>
                <li><a href="#section2">Section 2</a></li>
                <li><a href="#section3">Section 3</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="section1">
            <h2>Section 1</h2>
            <p>Contenu de la section 1...</p>
        </section>

        <section id="section2">
            <h2>Section 2</h2>
            <p>Contenu de la section 2...</p>
        </section>

        <section id="section3">
            <h2>Section 3</h2>
            <p>Contenu de la section 3...</p>
        </section>
    </main>

    <footer>
        <!-- Ajoutez ici le contenu du pied de page -->
    </footer>
</body>
</html>

Exercice 3 : Modifier le pied de page

Objectif : Ajouter des informations dans le pied de page <footer>.

Instructions :

Ajouter un paragraphe <p> avec le texte « Site réalisé par [Votre Nom] ».
Ajouter un lien <a> vers une adresse fictive, par exemple : mailto:votrenom@example.com.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titre de la page</title>
    <!-- Vous pouvez inclure ici des liens vers des feuilles de style CSS -->
</head>
<body>
    <header>
        <h1>Titre principal de la page</h1>
        <nav>
            <ul>
                <li><a href="#section1">Section 1</a></li>
                <li><a href="#section2">Section 2</a></li>
                <li><a href="#section3">Section 3</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="section1">
            <h2>Section 1</h2>
            <p>Contenu de la section 1...</p>
        </section>

        <section id="section2">
            <h2>Section 2</h2>
            <p>Contenu de la section 2...</p>
        </section>

        <section id="section3">
            <h2>Section 3</h2>
            <p>Contenu de la section 3...</p>
        </section>
    </main>

    <footer>
        <p>Site réalisé par <strong>Votre Nom</strong></p>
        <p>Contact : <a href="mailto:votrenom@example.com">votrenom@example.com</a></p>
    </footer>
</body>
</html>

Exercice 4 : Ajouter une image

Objectif : Insérer une image dans la première section.

Instructions :

Ajouter une balise <img> dans la première section avec un attribut src pointant vers une image en ligne.
Ajouter un texte alternatif à l’image avec l’attribut alt.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titre de la page</title>
    <!-- Vous pouvez inclure ici des liens vers des feuilles de style CSS -->
</head>
<body>
    <header>
        <h1>Titre principal de la page</h1>
        <nav>
            <ul>
                <li><a href="#section1">Section 1</a></li>
                <li><a href="#section2">Section 2</a></li>
                <li><a href="#section3">Section 3</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="section1">
            <h2>Section 1</h2>
            <p>Contenu de la section 1...</p>
            <img src="https://via.placeholder.com/300" alt="Image illustrative de la section 1">
        </section>

        <section id="section2">
            <h2>Section 2</h2>
            <p>Contenu de la section 2...</p>
        </section>

        <section id="section3">
            <h2>Section 3</h2>
            <p>Contenu de la section 3...</p>
        </section>
    </main>

    <footer>
        <p>Site réalisé par <strong>Votre Nom</strong></p>
        <p>Contact : <a href="mailto:votrenom@example.com">votrenom@example.com</a></p>
    </footer>
</body>
</html>

CSS

Le CSS, ou Cascading Style Sheets (en français, Feuilles de style en cascade), est un langage de programmation utilisé pour définir la présentation visuelle et le style d’une page web écrite en HTML (HyperText Markup Language) ou XML (eXtensible Markup Language). En d’autres termes, le CSS permet de contrôler l’apparence, la mise en page et la mise en forme des éléments HTML sur une page web.

Voici quelques-unes des principales fonctions du CSS :

Stylisation des éléments HTML : Le CSS permet de définir des styles tels que la couleur, la police de caractères, la taille du texte, l’espacement, les marges, les bordures, les arrière-plans, etc., pour chaque élément HTML. Par exemple, vous pouvez utiliser CSS pour spécifier que les titres de votre page sont en gras et en bleu.
Mise en page : Vous pouvez utiliser CSS pour contrôler la mise en page de votre page web, notamment la position des éléments, les marges, les espacements, les colonnes, etc. Cela permet de créer des mises en page complexes et adaptatives.
Réactivité : CSS permet de créer des designs réactifs qui s’adaptent à différentes tailles d’écran et appareils, ce qui est essentiel pour la création de sites web adaptatifs.
Animations et transitions : CSS permet de créer des animations et des transitions fluides pour rendre les éléments de votre page plus interactifs et attractifs.
Sélecteurs CSS : Les sélecteurs CSS permettent de cibler spécifiquement des éléments HTML pour leur appliquer des styles. Par exemple, vous pouvez cibler tous les éléments de paragraphe <p> ou tous les éléments ayant une classe spécifique.

Exemple de CSS dans une page HTML:

TAF :

Exercices CSS pour débutants

1. Modifier le style des éléments

Exercice :

Changer la couleur du titre <h1> en rouge au lieu de bleu.
Ajouter une règle CSS pour que le paragraphe <p> ait une couleur verte.

/* Styles CSS */
h1 {
    color: red;
}

p {
    color: green;
}

2. Ajouter des styles de texte

Exercice :

Appliquer une police spécifique au titre et au paragraphe.
Ajouter des styles tels que gras, italique, ou souligné.

h1 {
    font-family: Arial, sans-serif;
    font-weight: bold;
    text-decoration: underline;
}

p {
    font-style: italic;
}

3. Ajouter un arrière-plan

Exercice :

Ajouter une couleur d’arrière-plan à la page.
Appliquer une couleur d’arrière-plan différente pour le titre <h1>.

body {
    background-color: lightgray;
}

h1 {
    background-color: lightblue;
}

4. Espacement et marges

Exercice :

Ajouter un espace entre le titre et le paragraphe.
Modifier les marges autour du titre.

h1 {
    margin: 20px;
    padding: 10px;
}

5. Ajouter des bordures

Exercice :

Ajouter une bordure autour du titre <h1> et du paragraphe <p>.
Modifier l’épaisseur et le style de la bordure (ex. : solide, pointillé, ou double).

h1 {
    border: 2px solid black;
}

p {
    border: 1px dotted green;
}

6. Changer la taille et l’alignement du texte

Exercice :

Modifier la taille de la police pour le titre et le paragraphe.
Centrer le titre sur la page.

h1 {
    font-size: 36px;
    text-align: center;
}

p {
    font-size: 18px;
}

JAVASCRIPT

JavaScript est un langage de programmation de haut niveau principalement utilisé pour le développement web. Il permet de créer des pages web interactives et dynamiques en ajoutant des fonctionnalités et des comportements côté client aux sites web. Contrairement au HTML (HyperText Markup Language) et au CSS (Cascading Style Sheets), qui sont principalement utilisés pour la structure et la présentation des pages web, JavaScript est utilisé pour la logique et les interactions sur le côté client.

Voici quelques-unes des principales caractéristiques et fonctions de JavaScript :

Interactivité : JavaScript permet d’ajouter des interactions aux pages web. Par exemple, il peut être utilisé pour créer des boutons cliquables, des formulaires interactifs, des diaporamas, des menus déroulants, etc.
Manipulation du DOM : JavaScript permet de manipuler le Document Object Model (DOM), qui est une représentation de la structure d’une page web en tant qu’arbre d’objets. Cela signifie que JavaScript peut ajouter, supprimer ou modifier des éléments HTML et des attributs sur une page web en temps réel.
Validation de formulaires : JavaScript peut être utilisé pour valider les données entrées par l’utilisateur dans les formulaires web avant qu’elles ne soient soumises au serveur. Cela permet de fournir un retour immédiat aux utilisateurs et de réduire les erreurs de soumission.
Gestion des événements : JavaScript peut réagir aux événements déclenchés par l’utilisateur, tels que les clics de souris, les pressions de touches, les mouvements de la souris, etc. Il peut également définir des gestionnaires d’événements pour ces interactions.
Animations : JavaScript peut être utilisé pour créer des animations et des transitions fluides sur les éléments de la page, ce qui ajoute de l’interactivité et de l’attrait visuel.
Stockage côté client : JavaScript permet de stocker des données sur le côté client, telles que des cookies et des données locales, ce qui peut améliorer la performance et l’expérience de l’utilisateur.

JavaScript est essentiel pour le développement web moderne, car il permet de créer des applications web interactives et réactives. Il est pris en charge par tous les principaux navigateurs web et peut être utilisé conjointement avec HTML et CSS pour créer des sites web complets et riches en fonctionnalités

PHP

PHP, acronyme de « PHP: Hypertext Preprocessor » (à l’origine « Personal Home Page »), est un langage de programmation serveur très populaire et largement utilisé pour le développement web. Il est principalement utilisé pour créer des pages web dynamiques, interagir avec des bases de données, gérer des sessions utilisateur, et effectuer diverses tâches côté serveur sur les sites web.

Voici quelques caractéristiques et fonctions clés du PHP :

Pages web dynamiques : PHP permet de générer du contenu HTML dynamique en fonction de données provenant de bases de données, de formulaires soumis par les utilisateurs ou d’autres sources.
Interactions avec les bases de données : PHP offre une prise en charge native pour une grande variété de systèmes de gestion de bases de données (comme MySQL, PostgreSQL, SQLite, etc.). Cela permet de stocker, récupérer, mettre à jour et supprimer des données dans une base de données.
Gestion des sessions : PHP permet de gérer les sessions utilisateur, ce qui permet de suivre l’état de l’utilisateur lorsqu’il navigue sur un site web. Cela peut être utilisé pour implémenter des fonctionnalités telles que la connexion utilisateur, les paniers d’achat, etc.
Manipulation de fichiers : PHP offre des fonctionnalités pour créer, lire, écrire et supprimer des fichiers sur le serveur, ce qui peut être utile pour le téléchargement de fichiers, la génération de fichiers PDF, etc.
Traitement de formulaires : PHP est souvent utilisé pour traiter les données soumises par les utilisateurs via des formulaires web. Il peut valider les données, les filtrer et les enregistrer dans une base de données.
Intégration avec d’autres technologies web : PHP peut être utilisé en conjonction avec d’autres technologies web telles que HTML, CSS, JavaScript, et des frameworks JavaScript côté client pour créer des sites web complets.
Modularité et extensibilité : PHP dispose d’une large bibliothèque de fonctions intégrées et prend en charge des extensions tierces qui permettent d’ajouter des fonctionnalités supplémentaires au langage.
Grande communauté et documentation : PHP est un langage open source avec une vaste communauté de développeurs. Il existe une documentation complète et de nombreuses ressources disponibles en ligne pour apprendre et résoudre des problèmes liés à PHP.

PHP est souvent utilisé pour développer des sites web, des applications web, des systèmes de gestion de contenu (CMS) tels que WordPress, des forums en ligne, des boutiques en ligne, des applications web personnalisées, et bien plus encore. Il est particulièrement bien adapté au développement web côté serveur en raison de sa simplicité, de sa flexibilité et de sa capacité à s’intégrer à des bases de données.

TAF :

Changer la couleur de fond du pied de page pour mettre du bleu.
Changer le titre de la page en mettant : »Ma première page en HTML et CSS »

TAF :

Changez le message qui s’affiche en mettant : « Bonjour le monde ! »
Changez l’id à la ligne :
<button id= »monBouton »>Cliquez-moi</button> pour mettre <button id= »monId« >Cliquez-moi</button>
Que se passe-t-il ? essayez de comprendre pourquoi.
Que faut-il faire pour que ça refonctionne sans changer cette ligne et en gardant monId.

Ce contenu est réservé aux membres du site. Si vous êtes un utilisateur existant, veuillez vous connecter. Les nouveaux utilisateurs peuvent s'inscrire ci-dessous.

Seb-Info

BTS SIO – But SD et TC

HTML, CSS, PHP, Javascript

HTML, CSS, PHP, Javascript

Objectif de la séance

HTML

TAF :

Exercice 1 : Ajouter des sections

Exercice 2 : Créer une navigation

Exercice 3 : Modifier le pied de page

Exercice 4 : Ajouter une image

CSS

TAF :

Exercices CSS pour débutants

1. Modifier le style des éléments

2. Ajouter des styles de texte

3. Ajouter un arrière-plan

4. Espacement et marges

5. Ajouter des bordures

6. Changer la taille et l’alignement du texte

JAVASCRIPT

PHP