Les cours du BTS SIO

Outils pour utilisateurs

Outils du site

Piste:
isn:html1

Différences

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

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision 		Révision précédente
isn:html1 [2020/05/11 14:56]
techer.charles_educ-valadon-limoges.fr [Question 2] 		isn:html1 [2020/05/11 15:56] (Version actuelle)
techer.charles_educ-valadon-limoges.fr [La page d'accueil index.html]
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. 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> <html>
 <iframe src="https://trinket.io/embed/html/bf7b627d58" width="100%" height="600" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe> <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 :   * **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 **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** : Voici ce que tu dois obtenir et **visualiser** :
  
-{{:isn:trinket_01.png?400|}}+{{ :isn:trinket_01.png?400 |}}
 <WRAP center round box> <WRAP center round box>
 Le langage **HTML** tout est un langage à balise avec : 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). 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 :   * Voici une balise image qui affiche le **logo** du lycée Valadon dans la page index.html :
Ligne 64: Ligne 68:
 </code> </code>
  
 +<WRAP center round info>
 +La balise **%%<br/>%% est utilisée seule et permet d'avoir un **saut de ligne*.
 +</WRAP>
 ==== Question 2 ==== ==== Question 2 ====
   * **Modifie** le contenu du **fichier index.html** pour ajouter l'affichage de cette image :   * **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 ===== ===== La balise a =====
Ligne 84: Ligne 89:
 </code> </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.   * 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 : 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)   * l'attribut **id** (id pour identifiant)
   *  et l'attribut **class**.    *  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 ===== ===== Les premières balises utile pour le HTML =====
isn/html1.1589201801.txt.gz · Dernière modification: 2020/05/11 14:56 de techer.charles_educ-valadon-limoges.fr

Outils de la page

Sauf mention contraire, le contenu de ce wiki est placé sous les termes de la licence suivante : CC Attribution-Noncommercial-Share Alike 4.0 International
CC Attribution-Noncommercial-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki