AccueilAccueil  CalendrierCalendrier  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

Formation HTML/CSS

Aller à la page : 1, 2, 3, 4, 5  Suivant
Formation HTML/CSS  posté le :
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
Eluknow
avatar
Administrateur
Messages : 2185
Coda'Points : 3896
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Formation HTML/CSS  posté le :
Coucou mes chers élèves Wink

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

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

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

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 Wink.

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 Wink).

Bonne formation !
Eluknow
avatar
Administrateur
Messages : 2185
Coda'Points : 3896
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Formation HTML/CSS  posté le :
Tout est clair, chef Wink

_________________
signature
Doudou
avatar
Administrateur
Messages : 807
Coda'Points : 1129
Date d'inscription : 10/07/2014

Niveau en programmation
HTML/CSS:
2/3  (2/3)

Re: Formation HTML/CSS  posté le :
On est au taquet professeur =3
Popnoyt
avatar
Codeur UltrActif
Messages : 128
Coda'Points : 343
Date d'inscription : 03/10/2015

Re: Formation HTML/CSS  posté le :
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 Wink.

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 Very Happy.

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 ? ;-)
Eluknow
avatar
Administrateur
Messages : 2185
Coda'Points : 3896
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Formation HTML/CSS  posté le :
C'est oké de mon coté Wink
Popnoyt
avatar
Codeur UltrActif
Messages : 128
Coda'Points : 343
Date d'inscription : 03/10/2015

Re: Formation HTML/CSS  posté le :
Jusque là je suis Smile

_________________
signature
Doudou
avatar
Administrateur
Messages : 807
Coda'Points : 1129
Date d'inscription : 10/07/2014

Niveau en programmation
HTML/CSS:
2/3  (2/3)

Re: Formation HTML/CSS  posté le :
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 Wink. Si tu as des questions, Rorobibifc, tu n'hésiteras pas Wink

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 Wink. Si vous avez du mal, cite juste des exemples Wink.

PS : Ceci est un exercice, vous devez donc créer votre sujet comme expliqué dans le sujet "Fonctionnement de la formation" Wink
Eluknow
avatar
Administrateur
Messages : 2185
Coda'Points : 3896
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Formation HTML/CSS  posté le :
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 Wink

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 Wink

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 ? Smile.

Bonne soirée !
Eluknow
avatar
Administrateur
Messages : 2185
Coda'Points : 3896
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Formation HTML/CSS  posté le :
Yes je suis sur windows Wink

Bonne soirée à toi aussi Elu =D
Popnoyt
avatar
Codeur UltrActif
Messages : 128
Coda'Points : 343
Date d'inscription : 03/10/2015

Re: Formation HTML/CSS  posté le :
Pas de question pour ma part.

Je suis sur Windows 10 =)

_________________
signature
Doudou
avatar
Administrateur
Messages : 807
Coda'Points : 1129
Date d'inscription : 10/07/2014

Niveau en programmation
HTML/CSS:
2/3  (2/3)

Re: Formation HTML/CSS  posté le :
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) Wink

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

Si jamais vous avez un problème, faîtes-moi signe Wink
Eluknow
avatar
Administrateur
Messages : 2185
Coda'Points : 3896
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Formation HTML/CSS  posté le :
De mon coté aucun soucis Smile
Popnoyt
avatar
Codeur UltrActif
Messages : 128
Coda'Points : 343
Date d'inscription : 03/10/2015

Re: Formation HTML/CSS  posté le :
Pas de soucis non plus, prêt pour coder Smile

_________________
signature
Doudou
avatar
Administrateur
Messages : 807
Coda'Points : 1129
Date d'inscription : 10/07/2014

Niveau en programmation
HTML/CSS:
2/3  (2/3)

Re: Formation HTML/CSS  posté le :
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 Smile.
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 Wink.

Tout compris ?
Eluknow
avatar
Administrateur
Messages : 2185
Coda'Points : 3896
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Formation HTML/CSS  posté le :
Tout compris Smile

_________________
signature
Doudou
avatar
Administrateur
Messages : 807
Coda'Points : 1129
Date d'inscription : 10/07/2014

Niveau en programmation
HTML/CSS:
2/3  (2/3)

Re: Formation HTML/CSS  posté le :
Compris de mon coté aussi =D
Popnoyt
avatar
Codeur UltrActif
Messages : 128
Coda'Points : 343
Date d'inscription : 03/10/2015

Re: Formation HTML/CSS  posté le :
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 !
Eluknow
avatar
Administrateur
Messages : 2185
Coda'Points : 3896
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Formation HTML/CSS  posté le :
C'est vrai que cette invention est très utile Very Happy
Popnoyt
avatar
Codeur UltrActif
Messages : 128
Coda'Points : 343
Date d'inscription : 03/10/2015

Re: Formation HTML/CSS  posté le :
Oh que oui !
Eluknow
avatar
Administrateur
Messages : 2185
Coda'Points : 3896
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Formation HTML/CSS  posté le :
Tout compris, et pour le moment, tes cours/explications sont très clairs, Elu' Wink

_________________
signature
Doudou
avatar
Administrateur
Messages : 807
Coda'Points : 1129
Date d'inscription : 10/07/2014

Niveau en programmation
HTML/CSS:
2/3  (2/3)

Re: Formation HTML/CSS  posté le :
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" ? Smile

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 ?
Eluknow
avatar
Administrateur
Messages : 2185
Coda'Points : 3896
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Formation HTML/CSS  posté le :
C'est cet URL là
Code:
http://atdc.alwaysdata.net/showPresent-58

Tout est comprit de mon coté professeur !
Popnoyt
avatar
Codeur UltrActif
Messages : 128
Coda'Points : 343
Date d'inscription : 03/10/2015

Re: Formation HTML/CSS  posté le :
On avance vite Very Happy

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

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


http://atdc.alwaysdata.net/showPresent-21
Doudou
avatar
Administrateur
Messages : 807
Coda'Points : 1129
Date d'inscription : 10/07/2014

Niveau en programmation
HTML/CSS:
2/3  (2/3)

Re: Formation HTML/CSS  posté le :
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 Smile
Eluknow
avatar
Administrateur
Messages : 2185
Coda'Points : 3896
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Formation HTML/CSS  posté le :
Contenu sponsorisé


Page 1 sur 5Aller à la page : 1, 2, 3, 4, 5  Suivant

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
A Toi de Coder - Forum de codage :: Corbeille :: Corbeille du forum :: Formations-
Sauter vers: