Modifier une page WEB :

A faire : en affichant une page WEB de votre choix, puis en cliquant avec le bouton de droite sur un élément et en choisissant "Inspecter...", il est possible d'afficher son code source.

    • Affichez la page https://fr.wikipedia.org/ et Modifiez du texte dans l'"Article labellisé du jour".
    • Dans un autre onglet, allez sur la page web : www.lsmi.it, et faites disparaître le menu "Le Lycée" en éditant le code HTML avec la fonction d'inspection (clic droit).

Voir du code javascript : exemple de résolveur d'équation du second degré.

 

Ecrire du code HTML :

Liste des balises HTML 5 : https://jaetheme.com/balises-html5/ et exemple de HTML et javascript
Vous pouvez utiliser votre espace de BLOG de votre compte Moodle, ou bien des éditeur en ligne - voyez ceux proposés dans votre cours Moodle de SNT.
Voici quelques exemples :

A faire : cliquez ->  exemple simple de ce qu'il faut faire

Etape 1 :

    • Allez dans votre blog de votre compte Moodle : http://moodle.lyceestendhal.it/blog/ : cliquez "Ajouter un article" !
    • Ecrivez sur un sujet de votre choix un tout petit article dans votre blog, bien mis en forme et comportant à la fois :
      • du texte mis en forme (accédez à toutes les possibilités avec les menus, et travaillez en pleine page avec menu "Afficher"-> "Plein écran"),
      • un tableau (avec menu "Insérer" -> "Tableau"),
      • des images (avec ),
      • et des liens html (en sélectionnant du texte puis en utilisant  et en insérant l'adresse de la page à afficher en cas de clic, vous pouvez aussi choisir "Ouvrir dans une nouvelle fenêtre").

Etape 2 :

    • Validez avec "Enregistrer" en bas de page, vous retournez alors sur la page des billets de blog,
      ->       en bas à droite de votre article, il y a , cliquez sur Permalien,
      -> copiez alors l'adresse complète de la barre de navigation       (du type "http://moodle.lyceestendhal.it/blog/index.php?entryid=187"), et créez un article avec le titre approprié dans l'activité "Articles des élèves (Permaliens)"       (vous pouvez ensuite modifier l'article, le Permalien déposé ainsi reste valide).

Etape 3 :

    • Analysez bien le code HTML :  cliquez l'icône "Outils" -> "<> Code Source"  pour accéder au code HTML
    • Dans votre cahier, sur une nouvelle page, titrer « Les balises HTML de mon article de blog », et listez y (une par ligne) les balises HTML rencontrées dans le code source de votre article de blog et explicitez leur rôles. Vous pouvez vous aider de divers sites comme : Apprendre les balises html, liste officielle des balises du W3C .
      Exemple : strong : mettre en gras

Pour retrouver votre entrée de blog : connectez-vous à Moodle, allez en haut à droite sur le menu de votre avatar, et choisissez "Profil", puis dans "Rapports" choisir "Tous les journaux".

Facultatif : Récupérez le code de la calculatrice -> ici <- et copiez le dans un article de blog puis modifiez le !

 

Voici d'autres possibilités :

    • récupérer des exemples de code comme ici http://www.outils-web.com/page-script-javascript.asp
    • copier une section de code d'une page WEB dans votre blog ou bien dans une page d'éditeur en ligne, pour ensuite la modifier, compléter, déformer, etc. (notez qu'il vous manquera peut-être la feuille CSS de mise en forme originale),
    • réaliser une page soignée dans un éditeur en ligne puis la copier dans votre bolg pour compléter, présenter, publier,
    • utiliser votre espace de publication dans votre compte du lycée (rappel d'accès aux fichiers), accessible depuis http://moodle.lyceestendhal.it:81/~prenom.nom lorsque l'espace est activé (cet espace pourra être publié ultérieurement).

Pour aller plus loin et développer votre propre site HTML : https://webdesigner.withgoogle.com/

Modifié le: jeudi 5 décembre 2024, 01:06