Exercice d'écriture de page Internet
Pour les CM2: création d'une arborescence de dossiers, rédaction d'une page internet avec intégration d'un texte, d'une image et d'un lien hypertexte.
Pour les CE2: rédaction d'une page internet avec intégration d'un texte et modification des couleurs et de la taille.
En bas de cette page, les liens vers les travaux des élèves.
Pour obtenir ceci sur internet, voici ce que je dois écrire (code source): 

<HTML>
<HEAD>
<TITLE>
exercice internet
</TITLE>
</HEAD>
<BODY>
Une tasse de café.
<BR>
<IMG SRC="../images/tasse.jpg">
<BR>
<A HREF="../index.html">Retour</A>
</BODY>
</HTML>

Déroulement de l'exercice:
Pour commencer nous allons créer une arborescence de dossiers avec un dossier parent nommé "internet" et deux sous-dossiers nommés "pages" et "images".
Les sous-dossiers "images" et "pages" se trouvent dans le dossier parent "internet.
Le sous-dossier "pages" contiendra nos fichiers pages.
Le sous-dossier "images" contiendra nos fichiers images.
Création de nos dossiers:
  • Allez dans "Mes documents"
  • Créez un nouveau dossier nommé "internet"

    •       clique de droit | Nouveau | Dossier
  • Ouvrez votre dossier "internet"
  • Créez deux nouveaux dossiers nomnés "pages" et "images"
    		•  dossiers
    Nous allons maintenant créer un document texte.
    Puis nous allons y écrire des lignes de code HTML   (HyperText Markup Language).
    Et pour finir, nous allons l'enregistrer dans un format lui permettant de s'afficher sous forme de page internet.
    Rédaction de notre page inetrnet
    au format HTML
  • Allez dans le dossier "pages"
  • Créez un nouveau document texte
          clique de droit | Nouveau | Document texte
  • Nommez le "exercice"
  • Ouvrez votre fichier "exercice"
  • Ecrire ceci dedans:
    
		<HTML>
		<HEAD>
		<TITLE>
		exercice internet
		</TITLE>
		</HEAD>
		<BODY>
		Une tasse de café.
		</BODY>
		</HTML>
  • Faites:
          Fichier | Enregistrer sous
  • Renommez le en exercice.html
    		•
    Nous venons de créer notre première page internet.
    L'icone du fichier a changé de forme -> c'est l'extension ".html" qui en est la cause.

    Avant et après le changement d'extension
    iconesicones
    nom de fichier

    En double cliquant sur notre fichier c'est bien un page internet qui s'ouvre avec comme titre: "exercice internet" et à l'intérieur la phrase: "Une tasse de café".

    étape 1

    Maintenant nous allons insérer une image dans notre page.
    L'image s'appelle tasse.jpg
    "tasse" est le nom, "jpg" est l'extension.
    L'image a été rangée dans notre dossier "images".
    dossiers
    Pour insérer une image il suffit simplement d'indiquer le chemin pour y accéder.
    La syntaxe est la suivante:
    				
		<IMG SRC="../images/tasse.jpg">
    Le code source devient donc celui-ci: 
    
<HTML>
<HEAD>
<TITLE>
exercice internet
</TITLE>
</HEAD>
<BODY>
Une tasse de café.
<BR>
<IMG SRC="../images/tasse.jpg">
</BODY>
</HTML>
    		étape 2
    Pour finir il ne reste plus qu'à créer un lien hypertexte vers une autre page.
    Ce lien sera sur le mot "retour" en bas de notre page. Il ccontiendra l'adresse d'une autre page internet.
    Dans notre exercice ce sera celle de la page d'acceuil du site de l'école.
    La syntaxe est la suivante:
    				
<A HREF="../index.html">Retour</a>
    La version finale de notre page est donc: 
    
<HTML>
<HEAD>
<TITLE>
exercice internet
</TITLE>
</HEAD>
<BODY>
Une tasse de café.
<BR>
<IMG SRC="../images/tasse.jpg">
<BR>
<A HREF="../index.html">Retour</A>
</BODY>
</HTML>

    Bravo aux élèves ! Quel beau travail !
    Peut être des futurs informaticiens dans le lot !
    La maîtresse de CM2B qui est fière de ses élèves.

    les travaux des élèves du CM2B


    icones icones icones icones icones icones
    icones icones icones icones icones icones

    les travaux des élèves du CM2A


    icones icones icones icones icones icones
    icones icones icones icones

    les travaux des élèves des CE2


    
<BODY style="color:#0000ff;font-size:40pt;text-align:center;background-color:#00FFFF;">
    En modifiant certaines valeurs, les CE2 ont personnalisé leur page internet.
    • La couleur du texte avec color:#0000ff
    • La taille du texte avec font-size:40pt
    • L'alignement du texte avec text-align:center
    • La couleur de fond avec background-color:#00ffff
    icones icones icones icones icones icones
    icones icones icones icones

    lexique anglais français

    HEAD: tête
    TITLE: titre
    BODY: corps
    TEXT: texte
    ALIGN: aligner
    LEFT: gauche
    RIGHT: droite
    CENTER: centre
    JUSTIFY: justifier
    FONT SIZE: taille de la police (de cararctère)
    COLOR: couleur
    BACKGROUND: fond (arrière plan)
    Pour aller plus loin il est possible de personnaliser notre page en changeant la taille du texte, sa couleur, sa position... En mettant une image ou une couleur en arrière plan.
    Comment faire ? Juste une question de style.

    A suivre...

    retour au sommaire