# data[].attributes.body
Pour s'initier à la programmation en créant une animation ou un jeu vidéo

# data[].attributes.attachment_link.description
Scratch is a free programming language and online community where you can create your own interactive stories, games, and animations.

# data[].attributes.body
Une formation complète en ligne pour découvrir la programmation

# data[].attributes.attachment_link.description
Avec ou sans bagage informatique, réalisez un petit programme avec Scratch. Ça y est, vous avez manipulé vos premiers algorithmes ! Mais, au fait, savez-vous d'où vient ce mot ? Savez vous à quoi ils servent dans la vie de tous les jours ? Programmer c'est possible, et ce dès 8 ans...

# data[].attributes.body
Un site créer ses premières mises en page

# data[].attributes.attachment_link.description
Canva is a free-to-use online graphic design tool. Use it to create social media posts, presentations, posters, videos, logos and more.

# data[].attributes.attachment_link.title
Genially, l'outil pour créer des contenus interactifs

# data[].attributes.attachment_link.description
Utilisez Genially, l'outil en ligne le plus complet pour créer des contenus interactifs et animés. Rendez tout ce que vous créez halluciant.

# data[].attributes.body
Mettre en ligne, créer un réseau, etc

# data[].attributes.attachment_link.description
Le monde est connecté, partout et tout le temps ! Avec Thimble et Scratch, découvrez les réseaux, apprenez comment les informations y circulent et comment les machines communiquent entre elles.

# data[].attributes.body
Binaire, bases de données, etc

# data[].attributes.attachment_link.description
Découvrez la face cachée de l'information sur nos ordinateurs : depuis son aspect le plus élémentaire (ou plutôt binaire !), jusqu'à sa diffusion massive sur les réseaux. Alors l'information : des 0, des 1 et c'est tout ?!

# data[].attributes.body
Retouche photo en ligne (un Photoshop simplifié)

# data[].attributes.body
Version d'essai incluse

# data[].attributes.attachment_link.description
Photoshop est l'éditeur graphique le plus utilisé sur le marché. Il est incontournable dans l'univers de la conception visuelle, que ce soit pour retoucher des photos ou pour réaliser des maquettes de sites web.

# data[].attributes.body
Pour s'initier gratuitement au dessin vectoriel

# data[].attributes.attachment_link.description
Inkscape est un logiciel professionnel de dessin vectoriel pour Windows, Mac OS X et GNU/Linux. Il est libre et gratuit.

# data[].attributes.body
Dessin vectoriel professionnel (pour les chanceux qui ont Illustrator)

# data[].attributes.attachment_link.description
Illustrator permet de créer des illustrations vectorielles : elles peuvent être agrandies à l'infini sans risque de pixelliser. C'est l'outil idéal pour concevoir des logos notamment.

# data[].attributes.attachment_link.readable_text
Current Stable Version

The current stable release of GIMP is 2.10.36 (2023-11-05).

Show downloads for GNU/Linux | macOS | Microsoft Windows | All
(we think your OS is ... Well, we don't actually know. Either JavaScript is disabled, or I am not working quite right... So I am showing you all the options )

GIMP for Unix-like systems

Warnings and information

Flatpak build available in: x86-64 and AArch64 ( note: i386 and ARM-32 versions used to be published, yet are now stuck at GIMP 2.10.14 and 2.10.22 respectively).

If available, the official package from your Unix-like distribution is the recommended method of installing GIMP!

The flatpak build is new and has known limitations, though it will likely provide faster updates, following GIMP releases closely.
Therefore choose your installation medium according to your needs.

Flatpak additional instructions

The flatpak link above should open your software installer and prompt you to install GIMP. Yet it may not work out-of-the-box on some platforms since the flatpak technology is new. If that is the case, ensure flatpak is installed and if clicking the link still does not prompt to install GIMP, then manually install by command line:

flatpak install https://flathub.org/repo/appstream/org.gimp.GIMP.flatpakref

Once installed, it will be made available exactly the same way as other applications (menus, desktop overview, or any specific application launch process used by your desktop).
If this is not the case, we suggest to report a bug to your desktop or distribution asking for proper support of flatpak. In the meantime, you can still run it by command line (not as the recommended method, only a workaround):

flatpak run org.gimp.GIMP//stable

This installation will also provide regular update. You don't have to come back on this page and install again (it will not work!) when a new version of GIMP is released. Instead if your distribution and/or desktop has a good support for flatpak, it should propose to perform updates.
Once again, if your distribution does not have proper support, you can always fall back to using the following command line:

flatpak update

Systems without flatpak support

GIMP can also run on Solaris and is available for the BSD family of systems such as FreeBSD and OpenBSD.

Please refer to the documentation for your Unix-like system on the installation of software.

GIMP for macOS

Warnings and information

Supported OS: macOS 10.12 Sierra or newer

!IMPORTANT! ⚠️ App Store: GIMP team does not provide any package on Apple's App Store at the moment. Any downloads on the store are created by third party and is not in anyway connected to the GIMP team. ☢️

These are vanilla builds without any third-party add-ons. Just open the downloaded DMG and drag and drop GIMP into your "Applications" folder.

Since version 2.8.2, GIMP runs on macOS/OSX natively. No X11 environment is required.

Security

Older Downloads

Previous installers for macOS/OSX can be found on download.gimp.org.

Third Party Downloads

Third party packages are not officially supported by the GIMP project. Therefore you should report issues to the packagers first, before reporting to the GIMP team. We only list some of these package systems here because they are widely used FLOSS projects, though we won't list projects providing very outdated versions.

Macports

An easy way to compile and install GIMP and other great Free software on your Mac is by using Macports. The installer allows you to choose from a large directory of packages. To install gimp using Macports, you simply do sudo port install gimp once you have Macports installed.

Last we checked, the GIMP port file pointed to the current stable release and we have reports from people who've built GIMP successfully this way.

Homebrew

Homebrew is similar to Macports and provides packages (aka formulas) to install, either by compiling them from source or by using pre-made binaries. There are indications that there is now a formula for GIMP, installable with: brew tap homebrew/cask && brew install --cask gimp.

NOTE! Please be aware that it was announced recently that Homebrew is using analytics. To turn this off, run: brew analytics off
You can read more about this on Brew Analytics.

Source for version 2.10 (Stable)

GIMP releases are also available as source tarballs from gimp.org and its mirrors, containing the source code to compile for your system: https://download.gimp.org/gimp/v2.10/

Hashes of latest releases to check the integrity of the tarballs

gimp-2.10.36.tar.bz2 (sha256):

3d3bc3c69a4bdb3aea9ba2d5385ed98ea03953f3857aafd1d6976011ed7cdbb2

gimp-2.10.34.tar.bz2 (sha256):

84004642d351b398a4293cd7fd3592044a944f05bb52850ee6068f247c657aa3

gimp-2.10.32.tar.bz2 (sha256):

3f15c70554af5dcc1b46e6dc68f3d8f0a6cc9fe56b6d78ac08c0fd859ab89a25

gimp-2.10.30.tar.bz2 (sha256):

88815daa76ed7d4277eeb353358bafa116cd2fcd2c861d95b95135c1d52b67dc

gimp-2.10.28.tar.bz2 (sha256):

4f4dc22cff1ab5f026feaa2ab55e05775b3a11e198186b47bdab79cbfa078826

gimp-2.10.24.tar.bz2 (sha256):

bd1bb762368c0dd3175cf05006812dd676949c3707e21f4e6857435cb435989e

gimp-2.10.22.tar.bz2 (sha256):

2db84b57f3778d80b3466d7c21a21d22e315c7b062de2883cbaaeda9a0f618bb

gimp-2.10.20.tar.bz2 (sha256):

e12f9f874b1a007c4277b60aa81e0b67330be7e6153e5749ead839b902fc7b3c

gimp-2.10.18.tar.bz2 (sha256):

65bfe111e8eebffd3dde3016ccb507f9948d2663d9497cb438d9bb609e11d716

gimp-2.10.16.tar.bz2 (sha256):

cbf9fe9534b913a9487b00cd9710cbc569bfd71fdd2f8c321547701a7d70cbeb

gimp-2.10.14.tar.bz2 (sha256):

df9b0f11c2078eea1de3ebc66529a5d3854c5e28636cd25a8dd077bd9d6ddc54

gimp-2.10.12.tar.bz2 (sha256):

7d80b58e0784120d57d327294f6a1fda281ff51a61935c2cd764da281acaac71

gimp-2.10.10.tar.bz2 (sha256):

12d1f243265c7aee1f2c6e97883a5c90ddc0b19b4346cf822e24adbb6c998c77

gimp-2.10.8.tar.bz2 (sha256):

d849c1cf35244938ae82e521b92b720ab48b8e9ed092d5de92c2464ef5244b9b

gimp-2.10.6.tar.bz2 (sha256):

4ec8071f828e918384cf7bc7d1219210467c84655123f802bc55a8bf2415101f

gimp-2.10.4.tar.bz2 (sha256):

ffb0768de14a2631b3d7ed71f283731441a1b48461766c23f0574dce0706f192

gimp-2.10.2.tar.bz2 (sha256):

1cb0baaecdefe44d371a15f2739a1bcbce4682336b4ccf8eb7b587ce52c333eb

gimp-2.10.0.tar.bz2 (sha256):

7fcc96fb88cb0a0595d2610f63a15dec245bb37bf9db527d37a24fb75e547de2

For instructions on how to build GIMP from source code, you will want to read our developer website.

You may want to read the Release Notes for GIMP 2.10.

User Manual

GIMP's user manual can be dowloaded separately on the documentation website either as language-specific Windows installers or as source tarball.

The manual can also be browsed online

Development snapshots

🤫Pssst... want to check out GIMP 2.99.16 development release? Get it on our development downloads page 🧪.

# data[].attributes.attachment_link.description
The official download page for all things GIMP! Please only use the official binaries provided here unless you really, really know what you're doing (it's the only way to be safe). We try to provide binaries in-time with regular releases, but may occasionally be delayed as the packagers ...

# data[].attributes.attachment_link.title
Scribus.fr – Logiciel de PAO libre et gratuit – Scribus est un logiciel de PAO (Publication Assistée par Ordinateur) libre, distribué sous licence GNU GPL.

# data[].attributes.body
S'évaluer et obtenir un diplôme sur toutes ses compétences numériques

# data[].attributes.attachment_link.description
Service en ligne d'évaluation et de certification des compétences numériques pour tous, tout au long de la vie.

# data[].attributes.attachment_link.description
Des fiches pratiques, des articles et interviews, des parcours, des quiz, des vidéos et des expériences pour accompagner ses usages numériques.

# data[].attributes.body
Ecrire ses premières lignes de code en créant un jeu

# data[].attributes.attachment_link.description
Code n' Slash est conçu pour enseigner les bases de la programmation aux débutants, mais s'adresse également aux initiés, en leur fournissant un terrain de jeu pour exprimer leur créativité.

# data[].attributes.body
Créer un premier site web

# data[].attributes.attachment_link.description
Vous souhaitez créer un site web sans écrire une ligne de code ? Découvrez comment bien débuter avec WordPress, et profitez de ses fonctionnalités pour personnaliser votre site.

# data[].attributes.headline
Créer un site web avec HTML et CSS (mooc)

# data[].attributes.subject
Créer un site web avec HTML et CSS (mooc)

# data[].attributes.body
Utiliser un langage professionnel

# data[].attributes.attachment_link.description
Vous rêvez d’apprendre à créer des sites web ? Débutez avec ce cours qui vous enseignera tout ce qu’il faut savoir sur le développement de sites web en HTML5 et CSS3 !

# data[].attributes.body
Comprendre le langage informatique avec un quizz

# data[].attributes.attachment_link.description
Try the next episode of Silent Teacher before its official release !

# data[].attributes.body
Une formation pour apprendre à parler geek

# data[].attributes.attachment_link.description
Le monde du Web vous intéresse, mais vous n'y connaissez rien ? Vous décrochez quand vous entendez du vocabulaire geek ? Imprégnez-vous de la culture du Web avec ce cours !

# data[].attributes.body
Apprendre à créer un jeu en utilisant les vrais langages de programmation

# data[].attributes.attachment_link.title
Coding Games and Programming Challenges to Code Better

# data[].attributes.attachment_link.description
CodinGame is a challenge-based training platform for programmers where you can play with the hottest programming topics. Solve games, code AI bots, learn from your peers, have fun.

# data[].attributes.body
Une formation pour naviguer en sécurité

# data[].attributes.attachment_link.authors[].name
Mathieu Nebra Entrepreneur à plein temps, auteur à plein temps et co-fondateur d'OpenClassrooms :o)

# data[].attributes.attachment_link.title
Apprenez à naviguer en sécurité sur Internet

# data[].attributes.attachment_link.description
Vous êtes préoccupés par la sécurité de vos comptes en ligne, de vos paiements, de votre identité et vous aimeriez naviguer de façon plus vigilante et sereine sur Internet ? Ce cours vous apportera de nombreux conseils !

# data[].attributes.attachment_link.readable_text
Nous allons nous intéresser à un acteur fondamental du développement web, le couple HTML+CSS (Hyper Text Markup Langage et Cascading Style Sheets).

Dans un premier temps, nous allons exclusivement nous intéresser au HTML. Qu'est-ce que le HTML, voici la définition que nous en donne Wikipedia :

L'Hypertext Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web. C'est un langage de balisage permettant d'écrire de l'hypertexte, d'où son nom. HTML permet également de structurer sémantiquement et de mettre en forme le contenu des pages, d'inclure des ressources multimédias, dont des images, des formulaires de saisie, et des programmes informatiques. Il permet de créer des documents interopérables avec des équipements très variés de manière conforme aux exigences de l'accessibilité du web. Il est souvent utilisé conjointement avec des langages de programmation (JavaScript) et des formats de présentation (feuilles de style en cascade).

Pour l'instant, nous allons retenir deux éléments de cette définition "conçu pour représenter les pages web" et "un langage de balisage".

Grâce au HTML vous allez pouvoir, dans votre navigateur (Firefox, Chrome, Opera,....), afficher du texte, afficher des images, proposer des hyperliens (liens vers d'autres pages web), afficher des formulaires et même maintenant afficher des vidéos (grâce à la dernière version du HTML, l'HTML5).

HTML n'est pas un langage de programmation (comme le Python par exemple), ici, pas question de conditions, de boucles....c'est un langage de description.

Pour aborder le HTML, nous allons, dans un premier temps utiliser le site jsfiddle.net.

Après avoir lancé votre navigateur web, tapez http://jsfiddle.net/ dans la barre d'adresse.

Vous devriez voir apparaître ceci :

Nous allons pour l'instant uniquement utiliser la fenêtre " HTML " et la fenêtre " Result ".

À faire vous-même 1

Écrivez le code HTML suivant :

 &lth1&gtHello World! Ceci est un titre&lt/h1&gt &ltp&gtCeci est un &ltstrong&gtparagraphe&lt/strong&gt. Avez-vous bien compris ?&lt/p&gt

Qu'est-ce qui s'affiche dans la fenêtre ?

Comme déjà évoqué ci-dessus, en HTML tout est une histoire de balise que l'on ouvre et que l'on ferme. Une balise ouvrante est de la forme &ltnom_de_la_balise&gt, les balises fermantes sont de la forme &lt/nom_de_la_balise&gt.

En observant attentivement le code, vous devriez forcément remarquer que toute balise ouverte doit être refermée à un moment ou un autre. La balise ouvrante et la balise fermante peuvent être sur la même ligne ou pas, cela n'a aucune espèce d'importance, la seule question à se poser ici est : ai-je bien refermé toutes les balises que j'ai ouvertes ?

Enfin pour terminer avec les généralités sur les balises, il est important de savoir qu'une structure du type :

&ltbalise1&gt
&ltbalise2&gt
&lt/balise1&gt
&lt/balise2&gt

est interdite, la balise2 a été ouverte après la balise1, elle devra donc être refermée avant la balise1.

En revanche, l'enchaînement suivant est correct :

&ltbalise1&gt
&ltbalise2&gt
&lt/balise2&gt
&lt/balise1&gt

Notez que dans notre exemple nous respectons bien cette règle " d'imbrication " des balises avec la balise &ltp&gt et la balise &ltstrong&gt.

Il est important de comprendre que chaque balise a une signification qu'il faut bien respecter (on parle de la sémantique des balises). Par exemple le texte situé entre la balise ouvrante et fermante &lth1&gt est obligatoirement un titre important (il existe des balises &lth2&gt, &lth3&gt......qui sont aussi des titres, mais des titres moins importants (sous-titre)). La balise &ltp&gt permet de définir des paragraphes, enfin, la balise &ltstrong&gt permet de mettre en évidence un élément important.

Vous devez aussi savoir qu'il existe des balises qui sont à la fois ouvrantes et fermantes (&ltbalise/&gt) : un exemple, la balise permettant de sauter une ligne, la balise &ltbr/&gt (balise qu'il faut d'ailleurs éviter d'utiliser par différentes raisons que nous n'aborderons pas ici).

Il est possible d'ajouter des éléments à une balise ouvrante, on parle d'attribut. Une balise peut contenir plusieurs attributs :

&ltma_balise attribut_1= "valeur_1" attribut_2="valeur_2"&gt

Il existe beaucoup d'attributs différents, nous allons nous contenter de 2 exemples avec l'attribut id (id pour identifiant) et class. Nous verrons l'intérêt de ces attributs dans l'activité suivante.

À faire vous-même 2

Écrivez le code HTML suivant :

 &lth1&gtCeci est un titre&lt/h1&gt &lth2 class="titre_1"&gtCeci est un sous titre&lt/h2&gt &ltp id="para_1"&gtCeci est un &ltstrong&gtparagraphe&lt/strong&gt. Avez-vous bien compris ?&lt/p&gt

Qu'est-ce qui s'affiche dans la fenêtre ?

Le HTML n'a pas été conçu pour gérer la mise en page (c'est possible, mais c'est une mauvaise pratique). Le HTML s'occupe uniquement du contenu et de la sémantique, pour tout ce qui concerne la mise en page et l'aspect " décoratif " (on parle du " style " de la page), on utilisera le CSS (Cascading Style Sheets).

Dans JSFIDDLE, il est possible d'écrire du CSS dans la fenêtre en haut à droite.

À faire vous-même 3

Écrivez le code HTML suivant :

 &lth1&gtCeci est un titre&lt/h1&gt &lth2&gtCeci est un sous titre&lt/h2&gt &ltp&gtCeci est un &ltstrong&gtparagraphe&lt/strong&gt. Avez-vous bien compris ?&lt/p&gt

Écrivez le code CSS suivant :

 h1 { text-align: center; background-color: red; } h2 { font-family: Verdana; font-style: italic; color: green; }

Qu'est-ce qui s'affiche dans la fenêtre ?

Dans l'exemple du "À faire vous-même 3", les propriétés " text-align " et "background-color" seront appliquées au contenu de toutes les balises de type h1 (avec respectivement les valeurs "center" et "red").....

À faire vous-même 4

Écrivez le code HTML suivant :

 &lth1&gtCeci est un titre&lt/h1&gt &lth2&gtCeci est un sous titre&lt/h2&gt &ltp id="para_1"&gtCeci est un &ltstrong&gtparagraphe&lt/strong&gt. Avez-vous bien compris ?&lt/p&gt

Écrivez le code CSS suivant :

 #para_1 { font-style: italic; color: green; }

Qu'est-ce qui s'affiche dans la fenêtre ? Que remarquez-vous ?

Il est donc possible de cibler un paragraphe et pas un autre en utilisant l'id du paragraphe (en CSS l'id se traduisant par le signe #).

Il est aussi possible d'utiliser l'attribut class à la place de l'id. Dans le CSS on utilisera le point . à la place du #.

La différence entre "id" et "class" n'est pas très importante.

L'attribut "class" permet de donner le même nom à plusieurs reprises dans une même page.

Si nous avions eu un 3e paragraphe, nous aurions pu avoir :&ltp class="para_1"&gtVoici un 3e paragraphe&lt/p&gt, mais nous n'aurions pas pu avoir : &ltp id="para_1"&gt Voici un 3e paragraphe &lt/p&gt, car le nom para_1 a déjà été utilisé pour le 1er paragraphe.

JSFIDDLE est un très bel outil, mais il ne peut pas être utilisé pour la réalisation d'un vrai site internet (ou d'une vraie application web).

Nous allons créer 2 fichiers : un fichier qui contiendra du HTML (index.html) et un fichier qui contiendra du CSS (style.css).

À faire vous-même 5

À l'aide d'un éditeur de texte, créer un nouveau fichier.

Sauvegardez-le en précisant son nom, par exemple "index.html".

Écrivez le code suivant dans votre éditeur de texte (sans oublier de sauvegarder quand vous avez terminé) :

 &lt!doctype html&gt &lthtml lang="fr"&gt &lthead&gt &ltmeta charset="utf-8"&gt &lttitle&gtVoici mon site&lt/title&gt &lt/head&gt &ltbody&gt &lth1&gtHello World! Ceci est un titre&lt/h1&gt &ltp&gtCeci est un &ltstrong&gtparagraphe&lt/strong&gt. Avez-vous bien compris ?&lt/p&gt &lt/body&gt &lt/html&gt

Testez votre code à l'aide d'un navigateur web (Firefox ou Chrome) en "double-cliquant" sur le fichier index.html

Dans l'exemple du "À faire vous-même 5", vous reconnaissez le code se trouvant entre les balises &ltbody&gt :

Tout votre code HTML devra se trouver entre ces 2 balises.

Le reste des balises devraient vous êtes inconnues. Passons-les en revue :

La première ligne (&lt!doctype html&gt) permet d'indiquer au navigateur que nous utiliserons la dernière version du HTML, le fameux HTML5.

La balise &lthtml&gt est obligatoire, l'attribut lang="fr" permet d'indiquer au navigateur que nous utiliserons le français pour écrire notre page.

Les balises &lthead&gt...&lt/head&gt délimitent ce que l'on appelle l'en-tête. L'en-tête contient, dans notre exemple, 2 balises : la balise &ltmeta charset="utf-8"&gt qui permet de définir l'encodage des caractères (utf-8) et la balise &lttitle&gt qui définit le titre de la page (attention ce titre ne s'affiche pas dans le navigateur, ne pas confondre avec la balise &lth1&gt).

À faire vous-même 6

Toujours à l'aide d'un éditeur de texte, vous allez créer un fichier qui va contenir le CSS de notre page (par exemple style.css). Complétez ce fichier à l'aide du code suivant :

 h1 { text-align: center; background-color: red; } p { font-family: Verdana; font-style: italic; color: green; }

Pour l'instant notre CSS ne sera pas appliqué à notre page, pour ce faire, il faut modifier notre code HTML en ajoutant une ligne qui va permettre d'associer notre code CSS à notre page.

Modifiez le code HTML avec la ligne suivante &ltlink rel="stylesheet" href="style.css"&gt :

 &lt!doctype html&gt &lthtml lang="fr"&gt &lthead&gt &ltmeta charset="utf-8"&gt &lttitle&gtVoici mon site&lt/title&gt &ltlink rel="stylesheet" href="style.css"&gt &lt/head&gt &ltbody&gt &lth1&gtHello World! Ceci est un titre&lt/h1&gt &ltp&gtCeci est un &ltstrong&gtparagraphe&lt/strong&gt. Avez-vous bien compris ?&lt/p&gt &lt/body&gt &lt/html&gt

Testez votre code à l'aide d'un navigateur web en "double-cliquant" sur le fichier index.html

Dans l'exemple que nous venons de voir, les fichiers "index.html" et "style.css" se trouvent dans le même dossier. Il est souvent utile de placer les fichiers CSS dans un dossier "CSS". Il faudra alors modifier le code HTML en conséquence :

 &ltlink rel="stylesheet" href="CSS/style.css"&gt

Pour terminer, voici quelques balises très utilisées :

La balise a

 &lta href="mon_autre_page.html"&gtCliquez ici pour vous rendre sur mon autre page&lt/a&gt

La balise a permet de créer des liens hypertextes, ce sont ces liens hypertextes qui vous permettent de "voyager" entre les pages d'un site ou entre les sites. Les liens hypertextes sont par défaut soulignés et de couleur bleue (modifiable grâce au CSS). La balise a possède un attribut href qui a pour valeur le chemin du fichier que l'on cherche à atteindre ou l'adresse du site cible (exemple : &lta href="http://www.google.fr"&gtCliquez ici pour vous rendre sur google.fr&lt/a&gt). 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.

La balise image

Comme vous devez déjà vous en douter, la balise image sert à insérer des......images :

 &ltimg src="mon_image.jpg" alt="avion"/&gt

la balise img est à la fois ouvrante et fermante comme la balise br. Elle possède 2 attributs :

src qui doit être égal au nom du fichier image (ou au chemin si le fichier image se trouve dans un autre dossier).

alt qui doit être égal à une description de votre image (cet attribut est utilisé notamment par les systèmes de description des pages web utilisées par les non-voyants), il faut donc systématiquement renseigner cet attribut.

Les balises form, input et button

Les formulaires sont des éléments importants des sites internet, ils permettent à l'utilisateur de transmettre des informations. Un formulaire devra être délimité par une balise form (même si ce n'est pas une obligation) :

Il existe différentes balises permettant de construire un formulaire, notamment la balise input. Cette balise possède un attribut type qui lui permet de jouer des rôles très différents.

La balise button nous sera aussi d'une grande utilité.

À faire vous-même 7

Créez un fichier html contenant le code suivant :

 &lt!doctype html&gt &lthtml lang="fr"&gt &lthead&gt &ltmeta charset="utf-8"&gt &lttitle&gtVoici mon site&lt/title&gt &lt/head&gt &ltbody&gt &ltform&gt &ltp&gtvoici un champ de texte : &ltinput type="text"/&gt&lt/p&gt &ltp&gtvoici une checkbox &ltinput type="checkbox"/&gt&lt/p&gt &ltbutton&gtCliquez ici !&lt/button&gt &lt/form&gt &lt/body&gt &lt/html&gt

Testez votre code à l'aide d'un navigateur web en "double-cliquant" sur le fichier html que vous venez de créer.

Les balises div et span

Ces 2 balises sont très utilisées (surtout la balise div). Pourtant, il faudrait, autant que possible, les éviter, pourquoi ?

Parce qu'elles n'ont aucune signification particulière, ce sont des balises dites "génériques".

À quoi servent-elles alors ?

À organiser la page, à regrouper plusieurs balises dans une même entité.

Pourquoi 2 balises génériques ?

Parce que div est une balise de type "block" et que span est une balise de type "inline" !

Sans vouloir trop entrer dans les détails, il faut bien comprendre que l'ordre des balises dans le code HTML a une grande importance. Les balises sont affichées les unes après les autres, on parle du flux normal de la page.

C'est ici qu'entrent en jeu les balises de type "block" et les balises de type "inline".

Les contenus des balises de type "block" (p, div,h1,...) se placent sur la page web les uns en dessous des autres.

Les contenus des balises de type "inline" (strong, img, span, a) se placent sur la page web les uns à côté des autres.

Cela revient à dire qu'une balise de type "block" prend toute la largeur de la page alors qu'une balise de type "inline" prend juste la largeur qui lui est nécessaire.

À faire vous-même 8

Créez un fichier html contenant le code suivant :

 &lt!doctype html&gt &lthtml lang="fr"&gt &lthead&gt &ltmeta charset="utf-8"&gt &lttitle&gtVoici mon site&lt/title&gt &lt/head&gt &ltbody&gt &ltdiv&gtdiv est une balise de type "block"&lt/div&gt &ltp&gtla balise p est une autre balise de type block&lt/p&gt &ltspan&gtEn revanche, span est une balise de type "inline"&lt/span&gt &lta href="www.google.fr"&gtEt voici une autre balise de type "inline"&lt/a&gt &lth1&gth1 est bien une balise de type "block"&lt/h1&gt &ltspan&gtla malheureuse balise span est "obligée" de se placer en dessous&lt/span&gt &lt/body&gt &lt/html&gt

Testez ce code

À faire vous-même 9

Élaborez une page HTML en utilisant les balises vues ci-dessus.

# data[].attributes.attachment_link.description
Nous allons nous intéresser à un acteur fondamental du développement web, le couple HTML+CSS (Hyper Text Markup Langage et Cascading Style Sheets). Dans un premier temps, nous allons exclusivement nous intéresser au HTML. Qu'est-ce que le HTML, voici la définition que nous en donne Wikipedia : L'Hypertext Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web.