WIKI CIEL - Contributions [fr]

Comment créer un site HTML ? (par Alex)

2024-12-06T16:34:39Z

Alex.Vitry :

== Comment apprendre le HTML en un an ==

:'''Pour apprendre le HTML sur une période d'un an, il est important de suivre une progression structurée, en apprenant les bases, puis en approfondissant au fur et à mesure.'''
:'''L'idée est de combiner théorie et pratique de manière régulière pour acquérir les compétences nécessaires à la création de pages web complètes.'''

=== Plan d'apprentissage ===

==== Semaines 1-8 : Introduction au HTML ====
'''Objectif :''' Acquérir les connaissances de base sur la structure d'une page HTML et les éléments essentiels.

'''Séances :'''
* '''Théorie'''
: Utilisez des ressources comme :
: - Le cours OpenClassrooms : [https://openclassrooms.com/fr/courses/19980-apprenez-a-programmer-en-html Apprenez à créer des pages web avec HTML]
: - **Chapitre recommandé :** "Les bases du HTML" pour comprendre les balises de base (titres, paragraphes, images, liens).

* '''Pratique'''
: - Plateforme W3Schools : [https://www.w3schools.com/html/ W3Schools HTML Tutorial]
: - Créez une page HTML simple avec des éléments de base : titres, paragraphes, liens et images.

==== Semaines 9-16 : Formulaires et Tableaux ====
'''Objectif :''' Apprendre à manipuler des formulaires et des tableaux pour rendre les pages plus interactives.

'''Séances :'''
* '''Théorie'''
: - Tutoriel MDN (Mozilla Developer Network) : [https://developer.mozilla.org/fr/docs/Web/HTML/Les_formulaires_HTML]
: **Chapitre recommandé :** "Formulaires HTML" et "Tableaux HTML".

* '''Pratique'''
: - Créez un formulaire simple avec des champs de saisie, des cases à cocher et des boutons d'envoi.
: - Réalisez un tableau pour organiser des données sur une page web.

==== Semaines 17-32 : Médias et Mise en Page ====
'''Objectif :''' Intégrer des images, des vidéos et structurer des pages avec CSS pour la mise en page.

'''Séances :'''
* '''Théorie'''
: - Tutoriel MDN : [https://developer.mozilla.org/fr/docs/Web/HTML/Multimedia_and_embedding]
: **Chapitre recommandé :** "Intégrer des médias" (images, vidéos, audio).
: - Introduction à CSS pour le style et la mise en page : [https://developer.mozilla.org/fr/docs/Web/CSS]

* '''Pratique'''
: - Ajoutez des images et des vidéos à une page HTML.
: - Utilisez CSS pour personnaliser les couleurs, polices et espacements d'une page.

==== Semaines 33-52 : Projets et Révisions ====
'''Objectif :''' Consolider les connaissances avec des projets pratiques et revisiter les concepts clés.

'''Séances :'''
* '''Révision'''
: Reprenez les concepts qui vous posent problème (comme la gestion des formulaires ou la mise en page).
: - Consultez des ressources comme [https://www.w3schools.com/ W3Schools] pour approfondir vos connaissances.

* '''Projets pratiques'''
: - Créez un projet complet comme une page de profil ou un site de portfolio en HTML et CSS. Vous pouvez également intégrer des éléments multimédia et des formulaires pour ajouter de l'interactivité.
: - Explorez des sites comme [https://codepen.io/ CodePen] pour tester vos projets et obtenir des retours de la communauté.

=== Conseils pratiques ===
* '''Pratique régulière''' : Assurez-vous de pratiquer ce que vous avez appris régulièrement, même avec des petits exercices pour renforcer les concepts.
* '''Ressources communautaires''' : En cas de doute ou pour poser des questions, vous pouvez rejoindre des forums comme [https://stackoverflow.com/questions/tagged/html Stack Overflow - HTML].
* '''Projets réels''' : À mesure que vous progressez, essayez d'appliquer vos connaissances sur des projets concrets qui vous intéressent. Cela peut vous aider à mieux comprendre l'usage du HTML dans des situations réelles.

En suivant ce plan d'apprentissage structuré, vous pourrez progressivement maîtriser le HTML et être capable de créer des pages web complètes et fonctionnelles à la fin de l'année.

Comment créer un site HTML ? (par Alex)

2024-12-06T16:27:22Z

Alex.Vitry :

= Apprendre le HTML : Un guide pour débutants =

Le HTML (HyperText Markup Language) est le langage standard utilisé pour créer des pages web. Il sert à structurer le contenu d'une page web, comme les titres, paragraphes, images et liens.

== 1. Structure de base d'un document HTML ==

Un document HTML commence toujours par une déclaration de type de document (`<!DOCTYPE html>`) et contient les éléments suivants :
* '''<html>''' : l'élément racine de la page.
* '''<head>''' : section contenant les métadonnées (titre, liens vers des fichiers CSS ou JavaScript, etc.).
* '''<body>''' : section contenant le contenu visible de la page.

Voici un exemple simple d'un fichier HTML de base :

<pre>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ma première page</title>
</head>
<body>
<h1>Bonjour le monde !</h1>
<p>Ceci est un paragraphe de texte sur ma première page HTML.</p>
</body>
</html>
</pre>

=== Explication ===
* '''<!DOCTYPE html>''' : Déclare le type du document (HTML5 dans ce cas).
* '''<html lang="fr">''' : L'élément racine qui indique que la langue du document est le français.
* '''<head>''' : Contient des informations de métadonnées, comme le titre de la page et le jeu de caractères.
* '''<body>''' : Contient le contenu visible de la page, comme les titres et les paragraphes.

== 2. Les éléments HTML fondamentaux ==

Les éléments HTML sont utilisés pour structurer le contenu d'une page. Voici quelques-uns des éléments de base que vous utiliserez souvent.

=== 2.1. Titres ===
Les titres sont créés avec les balises '''<h1>''' à '''<h6>''', où '''<h1>''' est le titre le plus important et '''<h6>''' est le moins important.

Exemple :
<pre>
<h1>Titre principal</h1>
<h2>Sous-titre</h2>
<h3>Sous-sous-titre</h3>
</pre>

=== 2.2. Paragraphes ===
Les paragraphes sont créés avec la balise '''<p>'''. Chaque paragraphe est encapsulé dans cette balise.

Exemple :
<pre>
<p>Ceci est un paragraphe de texte.</p>
</pre>

=== 2.3. Liens ===
Les liens sont créés avec la balise '''<a>''', qui est utilisée pour relier une page à une autre ou à une autre section d'une même page.

Exemple :
<pre>
<a href="https://www.example.com">Cliquez ici pour visiter le site</a>
</pre>

=== 2.4. Images ===
Les images sont insérées avec la balise '''<img>''', qui nécessite l'attribut '''src''' pour spécifier l'URL de l'image.

Exemple :
<pre>
<img src="image.jpg" alt="Description de l'image">
</pre>

== 3. Liste à puces et numérotée ==

Les listes sont très courantes en HTML. Il existe deux types de listes : les listes à puces (non ordonnées) et les listes numérotées (ordonnées).

=== 3.1. Liste à puces ===
Une liste à puces est créée avec la balise '''<ul>''', et chaque élément de la liste est encapsulé dans une balise '''<li>'''.

Exemple :
<pre>
<ul>
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
</ul>
</pre>

=== 3.2. Liste numérotée ===
Une liste numérotée est créée avec la balise '''<ol>''', et chaque élément de la liste est également encapsulé dans une balise '''<li>'''.

Exemple :
<pre>
<ol>
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
</ol>
</pre>

== 4. Conclusion ==

Le HTML est la base de la création de pages web. Avec les éléments fondamentaux expliqués dans ce tutoriel, vous êtes maintenant prêt à créer des pages simples. Pour aller plus loin, vous pouvez apprendre à utiliser des fichiers CSS pour le style et JavaScript pour rendre votre page interactive.

Comment créer un site HTML ? (par Alex)

2024-12-06T16:26:22Z

Alex.Vitry :

= Apprendre le HTML : Un guide pour débutants =

= Apprendre le HTML : Un guide pour débutants =

Le HTML (HyperText Markup Language) est le langage standard utilisé pour créer des pages web. Il sert à structurer le contenu d'une page web, comme les titres, paragraphes, images et liens.

== 1. Structure de base d'un document HTML ==

Un document HTML commence toujours par une déclaration de type de document (`<!DOCTYPE html>`) et contient les éléments suivants :
* '''<html>''' : l'élément racine de la page.
* '''<head>''' : section contenant les métadonnées (titre, liens vers des fichiers CSS ou JavaScript, etc.).
* '''<body>''' : section contenant le contenu visible de la page.

Voici un exemple simple d'un fichier HTML de base :

<pre>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ma première page</title>
</head>
<body>
<h1>Bonjour le monde !</h1>
<p>Ceci est un paragraphe de texte sur ma première page HTML.</p>
</body>
</html>
</pre>

=== Explication ===
* '''<!DOCTYPE html>''' : Déclare le type du document (HTML5 dans ce cas).
* '''<html lang="fr">''' : L'élément racine qui indique que la langue du document est le français.
* '''<head>''' : Contient des informations de métadonnées, comme le titre de la page et le jeu de caractères.
* '''<body>''' : Contient le contenu visible de la page, comme les titres et les paragraphes.

== 2. Les éléments HTML fondamentaux ==

Les éléments HTML sont utilisés pour structurer le contenu d'une page. Voici quelques-uns des éléments de base que vous utiliserez souvent.

=== 2.1. Titres ===
Les titres sont créés avec les balises '''<h1>''' à '''<h6>''', où '''<h1>''' est le titre le plus important et '''<h6>''' est le moins important.

Exemple :
<pre>
<h1>Titre principal</h1>
<h2>Sous-titre</h2>
<h3>Sous-sous-titre</h3>
</pre>

=== 2.2. Paragraphes ===
Les paragraphes sont créés avec la balise '''<p>'''. Chaque paragraphe est encapsulé dans cette balise.

Exemple :
<pre>
<p>Ceci est un paragraphe de texte.</p>
</pre>

=== 2.3. Liens ===
Les liens sont créés avec la balise '''<a>''', qui est utilisée pour relier une page à une autre ou à une autre section d'une même page.

Exemple :
<pre>
<a href="https://www.example.com">Cliquez ici pour visiter le site</a>
</pre>

=== 2.4. Images ===
Les images sont insérées avec la balise '''<img>''', qui nécessite l'attribut '''src''' pour spécifier l'URL de l'image.

Exemple :
<pre>
<img src="image.jpg" alt="Description de l'image">
</pre>

== 3. Liste à puces et numérotée ==

Les listes sont très courantes en HTML. Il existe deux types de listes : les listes à puces (non ordonnées) et les listes numérotées (ordonnées).

=== 3.1. Liste à puces ===
Une liste à puces est créée avec la balise '''<ul>''', et chaque élément de la liste est encapsulé dans une balise '''<li>'''.

Exemple :
<pre>
<ul>
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
</ul>
</pre>

=== 3.2. Liste numérotée ===
Une liste numérotée est créée avec la balise '''<ol>''', et chaque élément de la liste est également encapsulé dans une balise '''<li>'''.

Exemple :
<pre>
<ol>
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
</ol>
</pre>

== 4. Conclusion ==

Le HTML est la base de la création de pages web. Avec les éléments fondamentaux expliqués dans ce tutoriel, vous êtes maintenant prêt à créer des pages simples. Pour aller plus loin, vous pouvez apprendre à utiliser des fichiers CSS pour le style et JavaScript pour rendre votre page interactive.

Comment créer un site HTML ? (par Alex)

2024-12-06T16:25:22Z

Alex.Vitry :

= Apprendre le HTML : Un guide pour débutants =

Le HTML (HyperText Markup Language) est le langage standard utilisé pour créer des pages web. Il sert à structurer le contenu d'une page web, comme les titres, paragraphes, images et liens.

== 1. Structure de base d'un document HTML ==

Un document HTML commence toujours par une déclaration de type de document (<!DOCTYPE html>) et contient les éléments suivants :
* '''<html>''' : l'élément racine de la page.
* '''<head>''' : section contenant les métadonnées (titre, liens vers des fichiers CSS ou JavaScript, etc.).
* '''<body>''' : section contenant le contenu visible de la page.

Voici un exemple simple d'un fichier HTML de base :

<pre>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ma première page</title>
</head>
<body>
<h1>Bonjour le monde !</h1>
<p>Ceci est un paragraphe de texte sur ma première page HTML.</p>
</body>
</html>
</pre>

=== Explication ===
* '''<!DOCTYPE html>''' : Déclare le type du document (HTML5 dans ce cas).
* '''<html lang="fr">''' : L'élément racine qui indique que la langue du document est le français.
* '''<head>''' : Contient des informations de métadonnées, comme le titre de la page et le jeu de caractères.
* '''<body>''' : Contient le contenu visible de la page, comme les titres et les paragraphes.

== 2. Les éléments HTML fondamentaux ==

Les éléments HTML sont utilisés pour structurer le contenu d'une page. Voici quelques-uns des éléments de base que vous utiliserez souvent.

=== 2.1. Titres ===
Les titres sont créés avec les balises '''<h1>''' à '''<h6>''', où '''<h1>''' est le titre le plus important et '''<h6>''' est le moins important.

Exemple :
<pre>
<h1>Titre principal</h1>
<h2>Sous-titre</h2>
<h3>Sous-sous-titre</h3>
</pre>

=== 2.2. Paragraphes ===
Les paragraphes sont créés avec la balise '''<p>'''. Chaque paragraphe est encapsulé dans cette balise.

Exemple :
<pre>
<p>Ceci est un paragraphe de texte.</p>
</pre>

=== 2.3. Liens ===
Les liens sont créés avec la balise '''<a>''', qui est utilisée pour relier une page à une autre ou à une autre section d'une même page.

Exemple :
<pre>
<a href="https://www.example.com">Cliquez ici pour visiter le site</a>
</pre>

=== 2.4. Images ===
Les images sont insérées avec la balise '''<img>''', qui nécessite l'attribut '''src''' pour spécifier l'URL de l'image.

Exemple :
<pre>
<img src="image.jpg" alt="Description de l'image">
</pre>

== 3. Liste à puces et numérotée ==

Les listes sont très courantes en HTML. Il existe deux types de listes : les listes à puces (non ordonnées) et les listes numérotées (ordonnées).

=== 3.1. Liste à puces ===
Une liste à puces est créée avec la balise '''<ul>''', et chaque élément de la liste est encapsulé dans une balise '''<li>'''.

Exemple :
<pre>
<ul>
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
</ul>
</pre>

=== 3.2. Liste numérotée ===
Une liste numérotée est créée avec la balise '''<ol>''', et chaque élément de la liste est également encapsulé dans une balise '''<li>'''.

Exemple :
<pre>
<ol>
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
</ol>
</pre>

== 4. Conclusion ==

Le HTML est la base de la création de pages web. Avec les éléments fondamentaux expliqués dans ce tutoriel, vous êtes maintenant prêt à créer des pages simples. Pour aller plus loin, vous pouvez apprendre à utiliser des fichiers CSS pour le style et JavaScript pour rendre votre page interactive.

Comment créer un site HTML ? (par Alex)

2024-12-06T16:16:40Z

Alex.Vitry :

<center>Voici les différentes étapes pour créer un site html:
== Création d'un site HTML ==

Salut, je m'appelle Alex et je vais vous expliquer comment créer un site web en HTML. HTML est un langage qui sert à structurer le contenu des pages web. Si vous êtes lycéen et que vous voulez apprendre à créer votre propre site, c'est par ici que ça commence ! Avant de commencer à écrire du code HTML, il vous faut un éditeur de texte. Vous pouvez utiliser un éditeur basique comme le Bloc-notes (Windows), mais il existe aussi des éditeurs plus avancés comme [[Visual Studio Code]] ou [[Sublime Text]]. Ces éditeurs sont plus pratiques car ils vous aident à coder plus rapidement. Avoir aussi un navigateur web (Chrome, Firefox...) est indispensable pour visualiser ce que vous allez créer.

Une fois l'éditeur prêt, ouvrez-le et créez un nouveau fichier. Enregistrez-le sous le nom ``index.html`` (ce nom est important car ``index`` est la page principale d'un site). Voici un exemple de code de base pour démarrer un fichier HTML :

```html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon Premier Site</title>
</head>
<body>
<h1>Bienvenue sur mon site !</h1>
<p>Ceci est un paragraphe de texte sur ma première page HTML.</p>
</body>
</html>

Comment créer un site HTML ? (par Alex)

2024-12-06T16:00:02Z

Alex.Vitry : Page créée avec « <center>Voici les différentes étapes pour créer un site html: »

<center>Voici les différentes étapes pour créer un site html:

Pour créer un site Html il faut:

2024-10-18T13:33:13Z

Alex.Vitry :

[[Html]]
-Lancer le logiciel choisie, démarrer un nouveau fichier(index.html) pour pouvoir coder.
-il faut savoir aussi que ça fonctionne avec des balises comme par exemple:
-la balise <title>(pour le titre)
-la balise meta description( informent les internautes et éveillent leur intérêt avec un résumé court et pertinent de la page)
-les balises titre <h1><h2>... pour les sous titres de la page.
-La balise <strong> (mise en gras d'une partie de page)

Pour créer un site Html il faut:

2024-10-18T13:31:07Z

Alex.Vitry : Redirection supprimée vers Html

[[Html]]

Pour créer un site Html il faut:

2024-10-18T13:29:52Z

Alex.Vitry : Destination de redirection modifiée de Projet en Html

#REDIRECTION [[Html]]

Pour créer un site Html il faut:

2024-10-18T13:29:12Z

Alex.Vitry : Page redirigée vers Projet

#REDIRECTION [[Projet]]

Html

2024-10-18T13:26:52Z

Alex.Vitry :

<center>L'html
Le principal logiciel qu’on utilise pour code en html.
Il a été créé le 29 avril 2015 par Microsoft lors de la conférence Build 2015. Une version préliminaire a été publiée peu de temps après. Le 18 novembre 2015 , Visual Studio Code a été publié sous la licence MIT et son code source publié sur GitHub.Voici un exemple d’une page html finie sur le logiciel.
L’html permet de créer et de représenter le contenu d’une page web et sa structure.

Html

2024-10-18T13:24:51Z

Alex.Vitry : Page créée avec « <center>L'html Le principal logiciel qu’on utilise pour code en html. Il a été créé le 29 avril 2015 par Microsoft lors de la conférence Build 2015. Une version préliminaire a été publiée peu de temps après. Le 18 novembre 2015 , Visual Studio Code a été publié sous la licence MIT et son code source publié sur GitHub. »

Alex.Vitry

2024-09-27T13:18:08Z

Alex.Vitry : Page créée avec « file:Chamber.jpg Je m'appelle Alex Vitry, je suis a rascol en première bac pro ciel j'ai fais mon stage de seconde a la mairie de ma ville et en première aussi surement a la même mairie. J'aimerai être dans un métier sur la réparation d'objets informatiques. J'aime aussi le sport les choses simples et c'est tout . »

[[file:Chamber.jpg]] Je m'appelle Alex Vitry, je suis a rascol en première bac pro ciel j'ai fais mon stage de seconde a la mairie de ma ville et en première aussi surement
a la même mairie. J'aimerai être dans un métier sur la réparation d'objets informatiques. J'aime aussi le sport les choses simples et c'est tout .

Fichier:Chamber.jpg

2024-09-27T12:52:20Z

Alex.Vitry :

avatar