Lycée   >   Seconde   >   SNT   >   Éditer une page HTML avec différents outils

Éditer une page HTML avec différents outils

  • Fiche de cours
  • Quiz
  • Profs en ligne
Objectifs
  • Savoir éditer du code à l’aide d’un éditeur de code plus évolué que le bloc-notes de Windows.
  • Savoir éditer du code à l’aide d’un éditeur de code en ligne.
Points clés
  • Lorsque l’on veut apprendre à coder, que ce soit en HTML ou dans les autres langages, il est nécessaire d’avoir un outil spécifique appelé éditeur de code.
  • Le plus connu est sans aucun doute le bloc-notes de Windows mais il reste très limité en fonctionnalités.
  • Il existe des éditeurs hors ligne et en ligne :
    • un outil de développement en ligne permet d’obtenir très rapidement une page web (ex : JS Fiddle) ;
    • un outil de développement hors-ligne permet de travailler sans avoir de connexion internet (ex : Bracket).
Pour bien comprendre
  • Connaitre la structure de base d’un document HTML
  • Savoir taper une adresse symbolique dans une barre d’adresse de navigateur
  • Connaitre les principales balises du langage HTML
  • Connaitre les principaux navigateurs.

Pour créer une page HTML, il est nécessaire d’utiliser un éditeur de contenu. Cet outil de développement peut être en ligne ou hors-ligne.

1. Outil de développement en ligne
a. Présentation
Un outil de développement en ligne est un logiciel en ligne qui facilite la création et la publication des pages web.
Exemple d’outil en ligne : JS Fiddle

JS Fiddle est un outil de développement en ligne qui permet d’obtenir très rapidement une page web.

On peut le télécharger à l’adresse suivante : https://jsfiddle.net/.

Cet outil permet d’écrire des lignes de code en HTML et de tester tout de suite le résultat qui sera obtenu. Il intègre la même fonction qu’un navigateur (comme Chrome) qui permet de décoder des lignes HTML.

b. Exemple d'utilisation de l'outil en ligne JS Fiddle
  1. On tape le code HTML.
  2. On obtient l’affichage suivant grâce au navigateur. 

2. Outil de développement hors ligne
a. Présentation
Il est possible de coder du HTML sans connexion internet : il faut pour cela utiliser un éditeur de code. Il s’agit d’un logiciel destiné à la création et à l’édition de fichier texte.
Remarque
Tout système d’exploitation possède un éditeur de texte, il n'est donc pas utile d’en télécharger un (comme Brackets) pour pouvoir coder en HTML. On peut utiliser le bloc-notes de Windows comme premier outil de codage.
Le passage à un éditeur tel que Brackets est toutefois nécessaire pour la qualité de l’interface et la simplicité des commandes.
Exemple d’outil hors-ligne : Brackets

Brackets est un éditeur de texte open source, c’est-à-dire que ce logiciel peut être utilisé et modifié par n’importe qui. Cet outil moderne comprend et facilite la conception de sites web.

On peut le télécharger à l’adresse suivante : http://brackets.io/

Remarque
Pour installer cet outil, il faut au préalable cliquer sur le bouton « Télécharger ».
b. Exemple d'utilisation de l'outil hors-ligne Brackets
  1. On tape dans la zone d’édition le code HTML suivant :
  2. On enregistre le fichier en lui donnant un nom simple suivi de l’extension « .htm » ou « .html » : par exemple « index.htm » ou « index.html ».
  3. On affiche le fichier dans l’explorateur en cliquant sur « Aperçu en direct ».
  4. On double clique sur « index.htm » dans l’explorateur, qui fera alors appel au navigateur par défaut pour obtenir l’affichage souhaité. 

Comment as-tu trouvé ce cours ?

Évalue ce cours !

 

Question 1/5

La médiane de 6 notes est 13. Cela signifie que :

Question 2/5

On a obtenu la série statistique suivante :

Combien vaut la médiane ?

Question 3/5

On a obtenu la série ci-dessous :

Quelle est la médiane de cette série ?

Question 4/5

On a relevé les tailles en cm des élèves d’une classe :

 

Parmi les propositions suivantes, laquelle est vraie ?

Question 5/5

Les notes en français de deux classes littéraires sont données dans le tableau suivant :

Quelle est la note médiane ?

Vous avez obtenu75%de bonnes réponses !

Recevez l'intégralité des bonnes réponses ainsi que les rappels de cours associés :

Votre adresse e-mail sera exclusivement utilisée pour vous envoyer notre newsletter. Vous pourrez vous désinscrire à tout moment, à travers le lien de désinscription présent dans chaque newsletter. Pour en savoir plus sur la gestion de vos données personnelles et pour exercer vos droits, vous pouvez consulter notre charte.

Une erreur s'est produite, veuillez ré-essayer

Consultez votre boite email, vous y trouverez vos résultats de quiz!

Découvrez le soutien scolaire en ligne avec myMaxicours

Le service propose une plateforme de contenus interactifs, ludiques et variés pour les élèves du CP à la Terminale. Nous proposons des univers adaptés aux tranches d'âge afin de favoriser la concentration, encourager et motiver quel que soit le niveau. Nous souhaitons que chacun se sente bien pour apprendre et progresser en toute sérénité ! 

Fiches de cours les plus recherchées

SNT

Le langage CSS et les sélecteurs

SNT

Changer la couleur avec des sélecteurs CSS

SNT

L'URL

SNT

La requête HTTP

SNT

Le modèle client/serveur

SNT

Télécharger une page web sur un serveur

SNT

L'usage des réseaux sociaux

SNT

Violence et protection sur les réseaux sociaux

SNT

Principe et économie des réseaux sociaux

SNT

La modélisation des réseaux sociaux