HOME

2021 Formation HTML, CSS, Java script

Cours

  • Prof: jaouad.ibriz@ifage.ch /tel 079 402 9424
  • Planning
    • Planning B

    Site HTML intéressant

  • Photos Cours
  • Photos Cours !

  • https://www.deepl.com/fr/translator Site de traduction

  • https://www.w3schools.com/ Site d'apprentissage diverses lanques
  • https://validator.w3.org Validation du bon code d'un site
  • https://www.wappalyzer.com// Savoir de quel language (Word press) un site est fait
  • https://www.whatruns.com/ Savoir de quel language (Word press) un site est fait
  • https://github.com/ Gestion du versioning
  • https://www.w3.org/ Consortium W3
  • https://babeljs.io/ Babel / Javascript compatibilité ou compilateur
  • https://caniuse.com/webpcan i use /
  • https://www.torproject.org/download/Tor browser inconito
  • https://javascript.info/Javascript.info
  • https://www.javascripttutorial.netJavascript tutorial.net
  • https://fonts.google.com/Google fontes
  • https://www.fontsquirrel.com/font squirrel
  • https://stackoverflow.com/"Stack overflow
  • Positionnement Éric Meyer
  • https://www.json.org/json-en.htmlJSON
  • https://jquery.com/Jquery.com/
  • https://vscode.dev/Jquery.com/Visual Studio WEB
  • https://greensock.com/3GSAP Animation
  • https://greensock.com/3GSAP Animation

  • Wireframe (Website wireframe) Le wireframe ou maquette fonctionnelle est un schéma utilisé lors de la conception d'une interface utilisateur
  • inmet.io voir ?
  • Inscape dessin vectoriel svg outils gratuit de graphisme
  • gimp > equivalent photo shop
  • Linux manjaro
  • DaVinci Resolve Logiciel, editeur vidée gratuit
  • getjson pour traiter des fichiers

  • Astuces

    Visual studio code

  • ALT+Shift = Duplifie la ligne
  • ul>li*10 = Duplifie 10 fois la ligne
  • lorem = Ecrit un paragraphe standard
  • Installation du paquet Live Server
  • Installation language French
  • Création de la structure
  • ctrl espace = propriété
  • TExte
  • 1em = 16px = 12pt, pour le portable aem et % les plus utilisés
  • Traitement de fichier getjson

    • Divers

    Balises Html

  • !DOCTYPE html = Entete du script entete HTML
  • html lang="fr en de"> = Important de spécifier la lanque pour les moteurs de recherche
  • head = Entete et fin d'en tete'
  • title = Tab de la page, important pour les recherches
  • meta charset="utf-8" = Table de car et important pour les recherches
  • Body = Corps de la page
  • Balise fermante (élément en ligne)
  • h1-h6 = titres H3 = 12
  • ul = Type de liste simple
  • ol = Type de liste ordonnées
  • li = Liste
  • span = Sépare des éléments en ligne
  • Div = Sépare des éléments en Colonnes
  • Blockquote = Retrait paragraphe
  • Pre = une ligne
  • b = bold
  • strong = importante mieux pour le moteure de recherche
  • br = breack CR
  • i = Italique
  • em = Italique mieux Moteur de recherche
  • q = quote, entre guillemet
  • ruby = pour l'Aise car
  • s = texte barré
  • u = underligne = souligné
  • H2O3 H203 mettre au 2
  • sub = note bas de page/li>
  • html
  • doctype
  • head
  • title
  • meta
  • body
  • p = paragraphe
  • class =
  • id = Priorité 1
  • Class = Priorité 2
  • p. = Priorté 3 (paragraphe
  • a = les liens
  • target = _blank new(dans même fenetre.
  • Copyright ©

  • html:5 = créer un squlett

  • viewport = pour les téléphonee

  • Audio (mp3 et ogg)
  • Favicon = petit icone dans tab.
  • iframe = Google map par ex.
  • img src="/Data/Formation/HTML/Donnees/Photos/HeuresEnClasse.jpg" alt="Heures en classe" style="width:75%; height:auto;"
  • a href="/Data/Formation/HTML/Donnees/TroisCouleurs/index.html" target="new">Exercice Trois couleurs
  • Balise auto fermante Elément Bloc
  • br = CR/li>
  • hr = Ecrit une ligne/li>

    • CSS

  • Commentaire CSS /* */
  • Selecteur {proprieté1: Valeur1; Prop2:val2;
  • Priorité class/Balise html/ID
  • L'odre de lecture fait l'affichage
  • Lien inline = section style="background-color: aqua; color: blue;">
  • Lien Interne = entre body et après style>
  • Lien externe = link rel="stylesheet" href="/Data/Formation/HTML/Donnees/DJUCI/styles.css">
  • Class, ID et universel dans toute les Balise
  • Class = peux se répliquer
  • ID = Unique si possible.
  • Une balise peux avoir plusieurs class ou ID
  • Priorité ID/Class/Balise
  • P#nm, P#tor {color:Bleu} = Clasee NM + Tor
  • p. = Class / p# = ID

    1. Premier cours 27/09 (Planning et Structure

    2. 2ème cours 28/09 (Bases)

    3. 3ème cours 04/10 (Les liens internes/Externes)

    4. 4ème cours 05/10 (Images/videos/Audio/Multimedia)

    5. 5ème cours 07/10 (Formulaires)

    6. 6ème cours 11/10 (Resumé HTML)

    7. 7ème cours 12/10 (Intro CSS)

    8. 8ème cours 18/10 (Intro CSS 1)

    9. 9ème cours 19/10 (Intro CSS 2)

    10. 10ème cours 25/10 (Intro CSS 3 Float)

    11. 11ème cours 26/10 (Intro CSS 4 CLear/After)

    12. 12ème cours 01/11 (Menu Hamburger)

    13. 13ème cours 02/11 (Menu standard)

    14. 14ème cours 08/11 (XSS Transition & Translation)

    15. 15ème cours 09/11 (Fonte & Animation)

    16. 16ème cours 11/11 (Exercice )

    17. 17ème cours 15/11 (Intro Java Concept)

    18. 18ème cours 16/11 (Intro Java Fonction Var. )

    19. 19ème cours 18/11 (Intro Java Tableau, Boucle & Condition )

    20. 20ème cours 22/11 (JSON)

    21. 21ème cours 23/11 (JQuery Intro)

    22. 22ème cours 29/11 (JQuery Animation)

    23. 23ème cours 30/11 (JQuery Scroll)

    24. 24ème cours 06/12 (JQuery Positionnement / Film)

    25. 25ème cours 07/12 (JQuery Fichier externe / GetJson)

    26. 26ème cours 13/12 (JQuery Tab et To do / Travel )

    27. 27ème cours 14/12 (JQuery / PlugIn )

    28. 28ème cours 20/12 (CSS / GRID / FLEX )

    29. 29ème Dernier cours 23/12 (Java / Horloge )

      30. T:\Apprenants-tes\_Informatique & Bureautique\Programmation & Développement\$_IBRIZ\Patrick\SiteWWW
      \\srvaugfss01\cours\Apprenants-tes\_Informatique & Bureautique\Programmation & Développement\$_IBRIZ\Patrick