| | Aller à la page : 1, 2, 3, 4, 5 | Formation HTML/CSS posté le : Dim 22 Nov - 16:11 | Bonjour ! Bienvenue dans le sujet de la formation ! Voici le programme ! - Spoiler:
Partie 1 : Découverte et logiciel -HTML5 et CSS3 -Un peu de vocabulaire -Logiciel
Partie 2 : HTML5; bases Structure obligatoire Commentaires Paragraphe et saut de ligne Balises de hierarchisation Images (img, figure, figcaption) Liens Balises de mises en valeur Balises de mise en page Balises structurantes div et span + types de balises (block inline)
Partie 3 : CSS Où ça se met ? Class et id Directement dans les attributs Propriétés de mise en page des textes Propriétés de placement des textes + scroll Entre balises style Commentaires Propriétés de mise en page de blocs (bordures, fond, longueur, hauteur) Propriétés de marges Placements (avec positions css) Floatements
Partie 4 : Tableaux -Tableaux simples -Tableaux complexes (rowspan colspan) -Titres de tableau, et de cellules -CSS tableaux
Partie 5 : Listes -Listes ordonnées -Listes non-ordonnées -Imbrications -CSS listes
Partie 6 : Infobulles -Principe -HTML -CSS
Partie 7 : Bilan
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 Administrateur | | Re: Formation HTML/CSS posté le : Mar 24 Nov - 19:43 | 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 ! |
| Eluknow Administrateur | | Re: Formation HTML/CSS posté le : Mar 24 Nov - 19:58 | Tout est clair, chef |
| Doudou Administrateur | | Re: Formation HTML/CSS posté le : Mer 25 Nov - 0:15 | On est au taquet professeur =3 |
| Popnoyt Codeur UltrActif | | Re: Formation HTML/CSS posté le : Mer 25 Nov - 14:14 | Allez c'est parti ! Partie 1 : Découverte et logicielDans 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 ? ;-) |
| Eluknow Administrateur | | Re: Formation HTML/CSS posté le : Mer 25 Nov - 14:55 | C'est oké de mon coté |
| Popnoyt Codeur UltrActif | | Re: Formation HTML/CSS posté le : Mer 25 Nov - 16:53 | Jusque là je suis |
| Doudou Administrateur | | Re: Formation HTML/CSS posté le : Jeu 26 Nov - 7:51 | 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" |
| Eluknow Administrateur | | Re: Formation HTML/CSS posté le : Dim 29 Nov - 21:31 | 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 ! |
| Eluknow Administrateur | | Re: Formation HTML/CSS posté le : Dim 29 Nov - 21:54 | Yes je suis sur windows Bonne soirée à toi aussi Elu =D |
| Popnoyt Codeur UltrActif | | Re: Formation HTML/CSS posté le : Dim 29 Nov - 22:38 | Pas de question pour ma part.
Je suis sur Windows 10 =) |
| Doudou Administrateur | | Re: Formation HTML/CSS posté le : Lun 30 Nov - 7:52 | 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 WindowsVoilà, 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 |
| Eluknow Administrateur | | Re: Formation HTML/CSS posté le : Lun 30 Nov - 9:00 | De mon coté aucun soucis |
| Popnoyt Codeur UltrActif | | Re: Formation HTML/CSS posté le : Lun 30 Nov - 12:04 | Pas de soucis non plus, prêt pour coder |
| Doudou Administrateur | | Re: Formation HTML/CSS posté le : Lun 30 Nov - 13:13 | Alors c'est parti. Code: Partie 2 : HTML5, basesUne 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 ? |
| Eluknow Administrateur | | Re: Formation HTML/CSS posté le : Lun 30 Nov - 15:11 | Tout compris |
| Doudou Administrateur | | Re: Formation HTML/CSS posté le : Lun 30 Nov - 15:23 | Compris de mon coté aussi =D |
| Popnoyt Codeur UltrActif | | Re: Formation HTML/CSS posté le : Lun 30 Nov - 21:39 | 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 Administrateur | | Re: Formation HTML/CSS posté le : Lun 30 Nov - 21:42 | C'est vrai que cette invention est très utile |
| Popnoyt Codeur UltrActif | | Re: Formation HTML/CSS posté le : Lun 30 Nov - 21:47 | |
| Eluknow Administrateur | | Re: Formation HTML/CSS posté le : Lun 30 Nov - 21:49 | Tout compris, et pour le moment, tes cours/explications sont très clairs, Elu' |
| Doudou Administrateur | | Re: Formation HTML/CSS posté le : Lun 30 Nov - 21:53 | 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 ? |
| Eluknow Administrateur | | Re: Formation HTML/CSS posté le : Lun 30 Nov - 23:30 | C'est cet URL là - Code:
-
http://atdc.alwaysdata.net/showPresent-58 Tout est comprit de mon coté professeur ! |
| Popnoyt Codeur UltrActif | | Re: Formation HTML/CSS posté le : Lun 30 Nov - 23:41 | |
| Doudou Administrateur | | Re: Formation HTML/CSS posté le : Lun 30 Nov - 23:49 | 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 |
| Eluknow Administrateur | | Re: Formation HTML/CSS posté le : | |
| | |
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |