Différences

Ci-dessous, les différences entre deux révisions de la page.

--- isn:html1 [2020/05/11 14:56] – [Question 2] techer.charles_educ-valadon-limoges.fr
+++ isn:html1 [2020/05/11 15:56] (Version actuelle) – [La page d'accueil index.html] techer.charles_educ-valadon-limoges.fr
@@ Ligne 5: / Ligne 5: @@
 Sur le site https://trinket.io/, tu peux créer des pages Web et découvrir les principes de base des langages HTML et CSS.
-Dans l'exemple ci-dessous, tu visualises** à gauche le code HTML** d'une page qui s'appelle **index.html** et **à droite le résultat** obtenu :
+Dans l'exemple ci-dessous, tu visualises** à gauche le code HTML** d'une page qui s'appelle **index.html** et **à droite le résultat** obtenu.
 <html>
 <iframe src="https://trinket.io/embed/html/bf7b627d58" width="100%" height="600" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>
@@ Ligne 12: / Ligne 12: @@
   * **Modifie** le contenu du **fichier index.html** : dans la partie de gauche, change ce qui est écrit (le code HTML) plaçé entre les balises **<body>** et **</body>** pour avoir le résultat suivant :
   * remplace la phrase **Titre de ma page** par **Je découvre le langage HTML** ;
-  * remplace la phrase **Sous-titre de ma page** par **Thème SNT sur le Web** ;
+  * remplace la phrase **Sous-titre de ma page** par **Thème sur le Web** ;
 Voici ce que tu dois obtenir et **visualiser** :
-{{:isn:trinket_01.png?400|}}
+{{ :isn:trinket_01.png?400 |}}
 <WRAP center round box>
 Le langage **HTML** tout est un langage à balise avec :
@@ Ligne 49: / Ligne 49: @@
 Chaque balise a une signification qu'il faut bien respecter (on parle de la sémantique des balises).
+<WRAP center round info>
+Le couple de balise **%%<p>%% et %%</p>%%** permettent de délimiter un **paragraphe**.
+</WRAP>
-Il existe aussi des balises qui sont **à la fois ouvrantes et fermantes**. C'est le cas pour la balise image qui permet de mettre une image dans une page Web.
+Il existe aussi des balises qui sont **à la fois ouvrantes et fermantes**. C'est le cas pour la balise **image** qui permet de mettre une image dans une page Web.
   * Voici une balise image qui affiche le **logo** du lycée Valadon dans la page index.html :
@@ Ligne 64: / Ligne 68: @@
 </code>
+<WRAP center round info>
+La balise **%%<br/>%% est utilisée seule et permet d'avoir un **saut de ligne*.
+</WRAP>
 ==== Question 2 ====
   * **Modifie** le contenu du **fichier index.html** pour ajouter l'affichage de cette image :
-{{:isn:internet.png?400|}}
+{{ :isn:internet.png |}}
-Voici l'URL, c'est à dire le lien interne de cette image : %%https://pixees.fr/informatiquelycee/n_site/img/internet.png%%
-  *  dans la partie de gauche, change ce qui est écrit (le code HTML) plaçé entre les balises **<body>** et **</body>** pour avoir le résultat suivant :
+Voici l'URL, c'est à dire le lien interne de cette image : **%%https://pixees.fr/informatiquelycee/n_site/img/internet.png%%**
-  * remplace la phrase **Titre de ma page** par **Je découvre le langage HTML** ;
-  * remplace la phrase **Sous-titre de ma page** par **Thème SNT sur le Web** ;
-Voici ce que tu dois obtenir et **visualiser** :
+Voici ce que tu dois **visualiser** :
+{{ :isn:trinket_02.png?400 |}}
 ===== La balise a =====
@@ Ligne 84: / Ligne 89: @@
 </code>
   * Entre la balise ouvrante et fermante, on trouve le texte qui s'**affichera à l'écran** (c'est ce texte qui est souligné et de couleur bleue).La balise peut sans problème se trouver en plein milieu d'un paragraphe.
+==== Question 3 ====
+  * **Modifie** le contenu du **fichier index.html** pour ajouter un lien vers une page ou un site de ton choix :
+Comme exemple j'ai ajouté un lien vers le site Web de l'Académie de Limoges
+Voici ce que tu dois **visualiser** :
+{{ :isn:trinket_03.png |}}
 Il existe beaucoup d'attributs différents, mais dans la suite des activités, vous allez utiliser 2 attributs utiles pour le CSS :
   * l'attribut **id** (id pour identifiant)
   *  et l'attribut **class**.
-===== Le résultat avec Trinket.io =====
-<html>
-<iframe src="https://trinket.io/embed/html/bf7b627d58" width="100%" height="600" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>
-</html>
 ===== Les premières balises utile pour le HTML =====