Bonjour !

Bienvenue dans le sujet de la formation !
Voici le programme !

Spoiler:

Quelques petits rappels :
Les cours sont la propriété d'ATDC, toute utilisation, copie, rediffusion ou modification est strictement interdite (copyright france déposé)
Tous les codes doivent être entre balises code (sinon ça fait planter la page :$)

Le professeur de cette formation est Eluknow

Coucou mes chers élèves

Durant cette formation, le délai est de plus ou moins 48h entre les cours. Je suis indulgent, ne vous inquiétez pas . Si vous avez des questions, n'hésitez surtout pas à les poser /
Je vous conseille aussi d'activer l'option "Me contacter par mail lorsqu'une réponse a été apportée" .

La durée totale de la formation est estimée à 4 mois et demi .

Si vous avez une absence, n'oubliez pas de prévenir

Si vous n'avez pas de question, vous pouvez mettre que vous n'avez pas de question : si tous les élèves mettent cela en moins de 48h, je peux poster le cours plus tôt et donc aller plus vite .

Je vais donc poster le premier cours ce soir ou demain matin, et puis vous aurez jusqu'à vendredi soir pour poser vos questions si vous en avez (sachant que la partie 1 est très théorique ).

Bonne formation !

Tout est clair, chef

On est au taquet professeur =3

Allez c'est parti !

Partie 1 : Découverte et logiciel

Dans cette formation, nous apprendrons à coder en deux langages, qui sont les principaux utilisés par la plateforme ForumActif. En effet, leur maitrise vous permettra de modifier tous vos forums comme bon vous semble et selon vos envies, sans (presque) aucune limite !

Le premier langage est le HTML, acronyme de HyperText Markup Language, dit "Langage de balisage", car comme on peut s'en douter, il utilise des balises :p.
Ce langage a été développé/conçu par World Wide Web Consortium (communément appelé W3C), organisation à but non lucratif qui tient à promouvoir la compatibilité des langages comme HTML, XML, CSS etc..
Après être passé par les versions HTML+, HTML 1.0, HTML 2.0, 3.2, 4.0, et j'en passe, nous arrivons aujourd'hui à HTML 5.0, appelé couramment HTML5. C'est avec cette version que nous apprendrons à coder dans cette formation .

Quant au CSS (Cascading Style Sheets), c'est un langage complément du HTML, qui a pour but de mettre en page, que ce soit par la couleur, le fond, les formes, les tailles etc etc, des éléments définis en HTML.
Nous sommes aujourd'hui en version 3 du CSS.

Nous avons donc dans une page web, notamment dans une page web d'un forum de ForumActif, (abrégé FA), du HTML et du CSS.
Sachant que sans CSS, il n'y a pas la couleur, pas les formes, rien, juste le squelette de la page.

J'aime à comparer le HTML et le CSS au corps humain.

En effet, le HTML serait plutôt considéré comme les os du corps, le squelette, et le CSS comme la peau, les yeux, les cheveux. En bref, le CSS définirait l'aspect physique de la personne.

Je ne dis pas là que nous sommes des robots faits en code HTML et CSS hein .

Comme vous devez le savoir (enfin.. je pense ?), un corps humain sans peau, sans aspect physique... Bah c'est du squelette, et c'est pas terrible terrible... On voit juste la forme en fait du corps.
Et bien le HTML, c'est pareil.

Pour mieux comprendre voici deux images d'un même forum : l'une avec le HTML et le CSS, et l'autre seulement avec le HTML (donc sans le CSS).

Avec CSS:

Sans CSS:

Vous comprenez ? Des questions ? ;-)

C'est oké de mon coté

Jusque là je suis

Bonjour !
Bon, je ne vais pas attendre les 48h pour ce cours, il est relativement simple, du coup je poste dès maintenant le cours qui suit . Si tu as des questions, Rorobibifc, tu n'hésiteras pas

J'aimerais que vous me définissiez définisses (sans regarder sur internet, ça ne servirait à rien), le sens des mots suivants :
Codage :
Langages informatiques :
Logiciel (ou un exemple de logiciel, si tu n'arrives pas à le définir) :
Lien internet, adresse URL :
Page Web :
Page HTML :
Navigateur internet :
Système d'exploitation :

Je ne vous demande pas là de me sortir le dictionnaire hein :p. C'est juste pour que après, ça ne coince pas, quand je vous expliquerai avec ces mots . Si vous avez du mal, cite juste des exemples .

PS : Ceci est un exercice, vous devez donc créer votre sujet comme expliqué dans le sujet "Fonctionnement de la formation"

Bon dans l'ensemble c'est pas mal du tout pour vous deux !
J'attendais une réponse de Rorobibifc, mais en vain. Tant pis pour lui, on avance !
On va faire un petit retour dessus quand même

Codage : terme abstrait qui définit l'ensemble des actions/lignes de code permettant de faire ou telle ou telle chose (je ne peux pas dire, permettant de faire un site, car on peut s'en servir pour plein d'autres choses)

Langages informatique : et bien ce sont les différentes langues avec lesquelles on parle à l'ordinateur :p  donc oui, comme le python, le java, le c, le c++, le java ee, le php, le html, le css, le javascript etc etc

Logiciel : programme qu'on ajoute à notre ordinateur pour faire telle ou telle chose (par exemple, traiter des textes, créer une image etc.).

Adresse URL : adresse servant au protocole http pour arriver sur un site. www.a-toi-de-coder.net en est une

Page web : tout simplement, page d'un site web

Page html : alors ça n'existe pas :p. C'est juste que quand j'utiliserai ce mot, ce sera pour définir le code html/css d'une page. En gros, c'est le code qu'il y a derrière une page web (quand affiche le code source). Donc quand je dirai : modifie ta page html, ce sera : modifie tes codes html/css de ta page web

Navigateur internet : programme ou logiciel permettant d'accéder au web. Sachant que Internet Explorer est un programme de windows, un navigateur internet détesté des codeurs car y'a tout qui bug avec lui !

Système d'exploitation : je ne saurais le définir, mais oui, c'est windows, linux ou encore MAC OS X
Pas de question ?

Moi si : Quel est votre système d'exploitation ?
Windows pour les 2 ? .

Bonne soirée !

Yes je suis sur windows

Bonne soirée à toi aussi Elu =D

Pas de question pour ma part.

Je suis sur Windows 10 =)

Parfait !
Afin de réaliser une page web, nous avons besoin d'un logiciel éditeur de codes.

Celui que je vous conseille c'est Notepad++ vu que vous êtes sous Windows:
Il est téléchargeable ici : Notepad++ pour Windows

Voilà, je vais donc vous demander de le télécharger.

Ensuite, voici l'interface du logiciel une fois que nous l'avons ouvert :

Image:

Nous allons maintenant créer une page qui nous permettra de coder dans de bonnes conditions par la suite !

Nous allons donc enregistrer notre fichier. Pour cela, il suffit de cliquer sur Fichier, puis Enregistrer sous.

Enregistrer:

Et maintenant, sachez que pour que les fichiers HTML soient interprétés, il faut qu'on l'indique !
De ce fait, HTML a sa propre extension qui lui permet d'être interprété par l'ordinateur (dans le navigateur le plus souvent).
A votre avis, quel pourrait bien être cette extension...
.html bien évidemment !

Donc voilà un screen de ce qu'il faut mettre :
Bien évidemment, vous pourrez changer le mot "formation" en ce que vous voulez

Extension:

Il ne vous reste plus qu'à cliquer sur enregistrer, et voilà, le tour est joué !

Mais ce n'est pas fini pour les réglages :

Il nous faut maintenant mettre le bon encodage de caractères. L'encodage varie selon les pays : s'il y a un caractère italien, il faut utiliser un encodage qui accepte ce caractère !
Heureusement, il existe un encodage nommé UTF-8. Il est un encodage international (dit "unicode") !
Et accepte bien évidemment tous les caractères français.
C'est celui-ci qu'il faut utiliser si nous voulons que les éèêëïîàù etc. soient acceptés et interprétés (qu'il n'y ait pas des "?" à la place).

Pour cela, il suffit d'aller dans "Encodage" --> "Encoder en UTF-8 sans BOM".

Encodage:

Vous pouvez aussi sélectionner "Encoder en UTF-8". Il n'y a pas une grande différence, et cela ne sera pas gênant (pas en HTML/CSS, en PHP un peu plus, mais bon, on ne le voit pas donc pas de soucis)

Voilà, nous pouvons désormais coder sans soucis !

Si jamais vous avez un problème, faîtes-moi signe

De mon coté aucun soucis

Pas de soucis non plus, prêt pour coder

Alors c'est parti.

Code:

Partie 2 : HTML5, bases

Une page HTML a une structure bien précise et définie qu'il faut toujours respecter. Sinon, ça ne fonctionnera pas.

La voici :

Code:

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <title>Le titre de ma page</title>
  <style type="text/css">
  </style>
</head>
<body>
</body>
</html>

Ce code est composé de plein de balises de différents types :
Des balises orphelines : Ce sont celles qui se ferment indépendamment d'une autre. Par exemple :

Code:

<meta charset="utf-8" />

Elle se referme toute seule, grâce à />
Des balises qui n'ont pas spécialement de nom : les balises normales/dépendantes : Ce sont toutes les autres balises. Celles qui ont besoin d'une autre pour fonctionner. Par exemple

Code:

<head></head>, <body></body>, <style type="text/css"></style>

Maintenant, je vais vous les expliquer, une par une :
La doctype :

Code:

<!DOCTYPE html>

C'est une balise bizarre. C'est la DOCTYPE. Elle englobe tout le contenu de notre page, toutes les autres balises. Elle permet de coder en respectant les normes W3C (les règles de codage). Elle sert à dire au navigateur qui lit la page qu'il s'agit d'une page au format html.

La balise html

Code:

<html lang="fr"></html>

. C'est une balise normale.
Elle permet d'indiquer la langue dans laquelle nous codons en html.

Le head

Code:

<head></head>

C'est une balise normale.
En français, cela signifie Tête. Et on comprend très vite : à l'intérieur de la balise head, nous mettrons tout ce qui est la Tête de notre page, donc les informations concernant celle-ci (encodage, mise en page, scripts utilisés, auteur, description etc.).

La balise meta

Code:

<meta charset="utf-8" />

. C'est une balise orpheline.
Elle indique l'encodage de la page, et permet, comme nous l'avons vu, d'interpréter les caractères spéciaux (éàï...)

La balise title

Code:

<title></title>

. C'est une balise normale.
Son nom est assez explicite, il sert à indiquer le titre de la page. Tu sais, ce qui s'affiche sur l'onglet.

Le style

Code:

<style type="text/css"></style>

Balise normale aussi.
C'est à l'intérieur de cette balise que nous mettons le CSS de notre page. On peut aussi donc appeler cela : la feuille de style css.

Le body

Code:

<body></body>

Balise normale .
On y met le contenu de notre page ! Les tableaux, les listes, les formulaires, les infobulles, les images, les liens, les barres de navigation, les articles, tout tout ce qui est visible !
On peut y mettre d'autres balises .

Tout compris ?

Tout compris

Compris de mon coté aussi =D

Parfait !

Il existe, en HTML, une "formulation" qui n'est pas interprétée par le navigateur (cela veut dire que cette formulation ne se verra pas. Elle sera présente que dans notre code, dit code source).
Ces formulations s'appellent des Commentaires.

Cela sert à s'organiser dans nos codes. Il est dur, par exemple, de se remettre dans un code de 500 lignes, sans commentaires... On est complètement perdu !

Voici à quoi ils ressemblent :

Code:

<!-- Je suis un commentaire -->

Donc, je reprends notre page de base, et voilà ce que ça donne :

Code:

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8" /> <!-- On définit l'encodage -->
  <title>Le titre de ma page</title> <!-- Le titre de la page -->
<!-- La balise style pour le css -->
  <style type="text/css">
  </style>
</head>
<body>
<!-- Le contenu de notre page -->
</body>
</html>

Vous comprenez ?
Les commentaires sont très utiles, il ne faut pas hésiter à les utiliser !

C'est vrai que cette invention est très utile

Oh que oui !

Tout compris, et pour le moment, tes cours/explications sont très clairs, Elu'

Cool !
Alors on continue !
PS : J'ai installé le calendrier de l'avent, vous pouvez me dire l'adresse URL qui s'ouvre lorsque vous cliquez sur "Recevoir" ?

Avant de passer à la suite, petites indications :
Les commentaires se mettent partout sauf là où il y a la css, c'est à dire :

Code:

<style type="text/css"></style>

et sauf dans les scripts (quand on met du javascript dans la page par exemple).

Il est également impossible de les mettre en plein milieu d'une balise, par exemple

Code:

<body <!-- Là y'aura le contenu de ma page--> >

fera buguer la page.

---

Nous allons maintenant voir les balises les plus utilisées en HTML, et celles qu'il faudra retenir.

Les paragraphes :
En html, il est possible de faire des paragraphes, c'est à dire des blocs de texte.
Ils se déclarent comme ceci :

Code:

<p> <!--Le contenu de mon paragraphe--> </p>

A l'intérieur de ce paragraphe, il est possible de faire des retours à la ligne :

Code:

<p>Ma ligne 1 <br />Ma ligne 2</p>

Grâce à <br />, "Ma ligne 2" sera sous "Ma ligne 1".
/!\Il est déconseillé de mettre plein de <br /> à la suite !

C'est tout bon ?

C'est cet URL là

Code:

http://atdc.alwaysdata.net/showPresent-58

Tout est comprit de mon coté professeur !

On avance vite

Mais toujours pas de problèmes de mon côté

Voici l'URL que je reçois, avec mon numéro d'utilisateur sur le forum !


http://atdc.alwaysdata.net/showPresent-21

Parfait ça fonctionne !


Comme tu dois t'en douter, il existe encore plein de balises HTML, dont les balises de hiérarchisation !
Celles-ci servent à faire des titres. Voici à quoi elles ressemblent :

Code:

<h1>Mon titre 1</h1>
<h2>Mon titre 2</h2>
<h3>Mon titre 3</h3>
<h4>Mon titre 4</h4>
<h5>Mon titre 5</h5>
<h6>Mon titre 6</h6>

Ce qui donne :


Si tu as tout compris, tu peux essayer de me faire :

Spoiler:

S'il te plait