Discussion :

[romainlebreton]

Chers membres du club,

J'ai le plaisir de vous présenter ce tutoriel  :

Apprendre la programmation Web - HTML, CSS à travers des TD

Via ce tutoriel, vous allez comprendre, entre autres, comment sont écrites les pages Web basiques, aussi appelées pages statiques (Web 1.0).

Bonne lecture

Retrouvez les meilleurs cours et tutoriels pour apprendre le développement Web.

[F6EEQ]

Intéressant simple et bien fait.

Je connaissais déjà un peu, mais c'est une excellente révision que je vais approfondir.

Merci

Gérard;

[ChristianM39190]

Bonjour,
J'ai commencé ce tutoriel fort bien fait, mais je butte sur le choix d'un éditeur de texte. Je suis sous W10 et par défaut on utilise Bloc-notes. Défaut : il ne fait pas la mise en page telle que vous la présentez, avec les retours à ligne, les décalages de balises, les couleurs...
Quel logiciel recommandez-vous pour éditer ? Notepad++ ?
Cordialement

[Invité]

Excellent tuto, qu'on va pouvoir conseiller aux débutants (et aux autres) !


Quelques points... :

Je ne vois pas (ou peu) de LIENS vers d'autres tutos de DVP ?? (ou AU MINIMUM, des liens vers les COURS, FAQ,... concernés)
Exemples :

• dans II. TD1 Partie 2 - Les bases du CSS... : "Glossaire des propriétés CSS"
• ou encore dans III-C. Tableaux : "Les tableaux (XHTML & CSS)"
• ...

Il me semble qu'on a encore d'autres bons tutos sur DVP, non ?

PAR CONTRE, que viens faire un lien ...w3schools.com..... ???? (dans II-D-3. Fontes)
Autant mettre des liens vers des références fiables : W3C - Familles de polices,....

[EDIT] Plus gênant encore : les liens morts...
ex. dans III. TD2 - HTML , tous les liens des balises sont morts ( https ://webplatform.github.io/docs/wiki/html/elements/XXXXX)
Il aurait été préférable de faire des liens pérennes, vers W3C ou MDN, par exemple.

[F6EEQ]

Quel logiciel recommandez-vous pour éditer ? Notepad++ ?

Utilise NOTEPAD++.
C'est très bien pour tous les langages: coloration syntaxique, complétion du texte...
C'est plus rapîde et bien mieux que le note pad de W!

Gérard

[ChristianM39190]

Merci

[ChristianM39190]

Je pense qu'il manque quelque chose dans ce paragraphe. Sur le didacticiel il n'y a rien de mis en forme "citation" et je ne comprends pas comment faire.
Sinon, tutoriel très bien fait et très efficace jusqu'à présent !

[F6EEQ]

il n'y a rien de mis en forme "citation"

Ben si!! c'est la parole divine de JC V Damm C'est pas une "citation" au sens "HTM"

[Invité]

Bonjour,

...Sur le didacticiel il n'y a rien de mis en forme "citation"...

J'espère que tu as compris qu'il s'agit de "TD", alias "Travaux Dirigés". Autrement dit : des exercices !

Dans ce chapitre I. TD1 Partie 1 - HTML se trouve le fichier index.txt qui sert de base de travail.

Quant à savoir quelles balises utiliser pour une "citation", le jeu consiste aussi à faire une recherche personnelle !
Les indices sont : commençant par <b...........> et par <c...>.

[ChristianM39190]

Alors pourquoi est-il écrit : "Allez voir le code source de notre citation à l'aide des outils de développement. Quelles sont les deux nouvelles balises utilisées ?
La première balise (qui commence par un b) entoure la citation complète tandis que la deuxième (qui commence par un c) contient uniquement la référence (l'auteur, le livre…)." ?

[Invité]

Pas faux...

Glossaire des propriétés CSS"

Pas trouvé ? "CSS balise citation"

[F6EEQ]

Ben sur le site de W3C ou WC3 school, on trouve tout et encore plus, donc le lien vers les balise <cite> et <blockquote>.

Ca y est, j'ai vendu la mèche...

J'ai fini la 1° partie du tuto et c'est super.

[Ichiflo]

Bonjour,

Merci à romain pour ces TD qui permettent de découvrir "sur le terrain" en même temps que d'apprendre la théorie!!

Je rencontre juste un problème sur le TD3 "IV-C-2. Menu déroulant : Partie 2 - affichage lors du survol"..
Je place bien mes sous-menus et je les masque avec display:none => ok
Dans mon fichier css j'utilise (et c'est à priori là qu'il y a erreur) 'nav div:hover div.submenu { display:block; }' qui me fait apparaitre le sous menu lors du survol => ok
Là où le bas blesse c'est que le sous-menu lié à "contact" s'affiche sous "Acceuil"

Je ne vois pas d'aide supplémentaire et même en examinant le code de la page du TD je ne m'en sort pas
En utilisant un 'nav div:hover div.submenu { position:absolute; display:inline-block; margin-left:-50px;}' j'arrive bien à bidouiller le résultat mais ce n'est pas le but de l'exercice et j'aimerais bien comprendre
Je remercie par avance celui qui pourra m'aider...