HTML5/CSS3 #1 - Les bases pour bien débuter

Bonjour à tous et à toutes ! Je vais débuter les tutos HTML CSS avec vous. Je ne sais pas si je serai disponible pour en faire mais je le serai pour répondre à toutes vos questions via discord Synxgz#5824. Bien sûr dans chaque cours, je séparerai le code CSS du code HTML de façon clair afin que vous ne vous perdiez pas !

Pour ce premier tuto, nous allons voir les bases du HTML CSS qui sont donc :
      - quel éditeur de texte prendre pour le développement web ?
      - la mise en page d'un code HTML
      - La formation des balises, et la différence avec les éléments
      - l'insertion d'un code css dans un fichier HTML

1) Comment choisir son éditeur ?

C'est très simple, l'éditeur se choisit selon vos préférences, vos habitudes, et vos envies. Pour ma part, je fais le code sur le logiciel Sublime Text 3 qui est très pratique, rapide, et efficace.

2) La mise en page d'un code HTML

Cette mise en page est très importante car elle servira pour tout code HTML que vous aurez à faire par la suite, au début elle peut paraitre compliquer mais elle s'apprend vite. De plus, certains logiciel de traitement de code le font eux-mêmes. Voici la forme à respecter à chaque fois :

<!DOCTYPE html>  <!-- Sert à définir le type de document pour le navigateur (généralement inutile) -->
<html>  <!-- Cette balise va contenir la totalité du code -->

    <head>  <!-- Cette balise servira à stocker toutes les informations de "paramètres" de la page -->

        <title>Ceci est un titre</title>  <!-- Cette balise sert à définir le titre de l'onglet internet de la page -->
        <meta charset="utf-8">  <!-- Cette balise sert à définir le type d'encodage que l'on souhaite utiliser. Utf-8 est l'encodage qui permet au navigateur d'afficher les accents par exemple (= clavier latin/français) -->

    </head>

    <body>  <!-- Cette balise servira à stocker tout le contenu de la page web (tout ce qui sera directement visible par l'utilisateur) -->

    </body>

</html>

Voilà, c'est comme ça qu'il faudra faire à chaque fois !

3) Les balises et les éléments

Tout d'abord, qu'est-ce qu'une balise ? Qu'est-ce qu'un élément ?

Une balise va servir à stocker un élement, une balise peut être "ouvrante" ou "fermante" => balise ouvrante : <"element">; balise fermante : </"element identique au dernier ouvert">; exemple d'élément : p (=paragraphe)

Voici donc une ligne composée d'une balise ouvrante et fermante contenant l'élément paragraphe : <p>"Le contenu du paragraphe"</p>

4) Insertion d'un code CSS dans son code HTML

Avant toute chose, qu'est-ce que le CSS ? Le CSS veut dire Cascading Style Sheet (ou = feuille de style). C'est ce qui va permettre de styliser notre site !

/!\ Il existe 3 façons d'importer un code CSS que voici :
        4.1 > directement entre les balises <head></head> avec la balise <style> "Code CSS" </style>
        4.2 > directement dans le body, dans les éléments
        4.3 > dans un dossier externe contenant l'extansion .css

Voici ce que ça peut donner :

    4.1) <html>
            <head>
                <...>
                <style>
                    "code CSS"
                    body {
                        margin: 0;
                        padding: 0;
                    }
                </style>
            </head>
        </html>

    4.2) <body>
            <p style="color:red;">Ceci est un paragraphe contenant le paramètre CSS "style"</p>
         </body>

/!\ 4.3) Ce cas est un peu spécial car il comporte DEUX fichiers distincts, ne vous trompez pas ! On va utiliser une balise link :

    #FICHIER HTML "index.html"

        <html>
            <head>
                <...>
                <link rel="stylesheet" <!-- On donne le type du fichier qu'on importe --> href="style.css" <!-- On donne le nom du CSS qui se trouve dans le MÊME dossier --> type="text/css">
            </head>
        </html>


    #FICHIER CSS "style.css"

        body{
            background-color:red;
            margin: 0;
            padding: 0;
        }


Voilà, je pense avoir dit un maximum de choses pour commencer. Si vous avez des questions n'hésitez pas à me les poser sur discord, je suis disponible assez souvent après les cours. En espérant que ça vous a plu, si vous voulez que je change des choses, si vous avez des envies pour le prochain "tuto", n'hésitez pas non plus à me proposer : Synxgz#5824


Merci d'avoir lu ce tuto, à la prochaine !
                                        Synxgz