Retour des questions/réponses (FAQ)! Découvrez les questions fréquentes avec leur réponse ici: https://habbo-dev.fr/support/faq

Aller au contenu

Cloudfordream
  • Veuillez ne pas poster de message pour but d'insulter, incitation à la haine, propos sexuels et tout autre qui ne respecte pas nos conditions d'utilisation !
AsDeCareaux

 html [HTML5 / CSS3] Tuto Debutant

Messages recommandés

Salut la communauté je vous fais un petit tuto [REQUIRE LEVEL : 0]

 

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 NotPad++ 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>

 

- AsDeCareaux 

Modifié par Xen0s

Partager ce message


Lien à poster
Partager sur d’autres sites
Premium

Je ne comprends pas pourquoi tu donnes des "mauvaises méthodes" pour insérer son css, pour avoir un code propre il suffit simplement de faire un fichier externe et l'insérer dans un "<link rel="stylesheet" type="text/css" href="style.css"> " pour éviter de "polluer" le html.

Partager ce message


Lien à poster
Partager sur d’autres sites
Bad Dev

Salut,

 

C'est sympa de faire un tuto mais il faudrait donner de bonnes méthodes.

On n'ajoute pas un CSS dans des balises de style sur une page, c'est un manque de professionnalisme total.

 

- Rick

Partager ce message


Lien à poster
Partager sur d’autres sites

Personnellement, je n'appelle pas ça un "tutoriel" car il manque cruellement des informations.

Sans compter évidemment le fait que certains points méritent un éclaircissement plus que conséquent.

Et bien sur, sans compter les fautes d'orthographe et de grammaire.

 

Le 01/11/2018 à 21:42, Rick a dit :

Salut,

 

C'est sympa de faire un tuto mais il faudrait donner de bonnes méthodes.

On n'ajoute pas un CSS dans des balises de style sur une page, c'est un manque de professionnalisme total.

 

- Rick

 

Le 01/11/2018 à 20:55, Scorpio a dit :

Je ne comprends pas pourquoi tu donnes des "mauvaises méthodes" pour insérer son css, pour avoir un code propre il suffit simplement de faire un fichier externe et l'insérer dans un "<link rel="stylesheet" type="text/css" href="style.css"> " pour éviter de "polluer" le html.

 

On peut tout à fait mettre du code CSS directement dans le header d'une page HTML si le code n'est pas lourd.

De même qu'un petit code CSS spécialement dédié à une seule page, on ne va pas l'importer dans 38 pages, c'est clairement inutile donc, autant le mettre sur la page concernée. Comme l'a d'ailleurs fait Laravel pour sa page "welcome.blade.php".

Modifié par Nourisk

Partager ce message


Lien à poster
Partager sur d’autres sites
Bad Dev
Il y a 6 heures, Nourisk a dit :

Personnellement, je n'appelle pas ça un "tutoriel" car il manque cruellement des informations.

Sans compter évidemment le fait que certains points méritent un éclaircissement plus que conséquent.

Et bien sur, sans compter les fautes d'orthographe et de grammaire.

 

 

 

On peut tout à fait mettre du code CSS directement dans le header d'une page HTML si le code n'est pas lourd.

De même qu'un petit code CSS spécialement dédié à une seule page, on ne va pas l'importer dans 38 pages, c'est clairement inutile donc, autant le mettre sur la page concernée. Comme l'a d'ailleurs fait Laravel pour sa page "welcome.blade.php".

Oui c'est sûr sauf que il vaut mieux donner la bonne technique directement pour les débutants ;)

Partager ce message


Lien à poster
Partager sur d’autres sites
Invité
Vous postez un commentaire en tant qu’invité. Si vous avez un compte, merci de vous connecter.
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.


Bienvenue invité !

Inscrit-toi ou connecte-toi pour une navigation sans restriction.

×