400
Subscribers
No data24 hours
No data7 days
No data30 days
Posts Archive
400
Les exemples
Exemple d'utilisation d'un attribut.
On dit qu'un attribut a pour rôle de modifier le comportement d'une balise. Laissez moi vous expliquer ça plus clairement.
Pour ce faire, prenons le cas de la balise <html>...</html>
Ex : <html lang="fr">...</html>
On dit ici que : lang est l'attribut de la balise html. Il s'identifie facilement car il vient juste après le nom de la balise !
La valeur pour l'attribut lang est fr. Elle s'identifie facilement car elle est séparé de l'attribut grâce au signe mathématique = (égale).
En quoi elle affecte la balise html ?
Imaginez vous un site écris en chinois !
Et vous, vous parcourez ce site et bien-sûr vous avez un traducteur (de nos jours très performant) pas performant comme à l'heure actuelle.
Si l'attribut lang n'est pas spécifié, le traducteur de page web, ne saura faire son travail correctement car il ne saura en quelle langue la page est traduite.
Juste l'utilisation de cette balise, permet de modifier la page donc par conséquent, affecte le comportement normal de la balise.
400
Les exemples
On dit qu'une balise est paire lorsqu'elle est double : dans ce cas l'une est une balise ouvrante et l'autre est la balise fermante
Ex:
Balise ouvrante: <p>
Balise fermante: </p>
Toutes balises ouvrante se ferme toujours en plaçant un / devant le guillemets (<)
Ex : <p>...</p>, <html>...</html>
On dit qu'une balise est orpheline lorsqu'elle ne possède pas de balise fermante.
Ex : <meta>
Dans ce cas , une balise fermante ou de fermeture peut s'écrire avec ou sans un / après le nom de la balise.
Ex : <meta> ou <meta /> sont pareils
On dit d'une balise est fille d'une autre si elle est contenu dans une autre balise.
Ex : <html><body>...</body></html>
<body>...</body> est fille de <html>...</html> et donc <html>...</html> est le parent direct de <body>...</body>
On dit que <html>...</html> et </body>...</body> sont des balises paires. Ainsi, la règle d'imbrication est respecté car <html> étant ouverte la première, se referme la dernière.
400
En testant le code ci-dessus, vous verrez afficher dans votre navigateur le teste : Contenu de la page
Le HTML est un langage de balisage, car elle utilise des balise (conf. Définitions). A cet effet, une page web écrite en HTML doit respecter ces quelques règles :
- Indiqué la version dans laquelle on code
Dans notre exemple il s'agit de :
<!DOCTYPE html>
- Toujours commencé par la balise HTML (et éventuellement renseigner la langue avec laquelle on code le document : ceci étant facultatif)
Dans notre structure , il s'agit de :
<html lang="fr">...</html>
- Html doit avoir :
• une entête : <head>...</head> (uniquement a l'intérieur de cette balise qu'on placera les métadonnées)
• un corps : <body>...<body> (uniquement dans cette balise qu'on mettra tout ce que l'utilisateur ou visiteur devra voir)
- Dans le cas des balises paires, la dernière a être ouverte est la première à être fermée et la première à être ouverte est la dernière à être fermée. On dit que le HTML est imbriqué.
400
𝕊𝕥𝕣𝕦𝕔𝕥𝕦𝕣𝕖 𝕕𝕖 𝕓𝕒𝕤𝕖 𝕕𝕦 ℍ𝕋𝕄𝕃
Le HTML évolue et ne cesse d'évoluer, avec en général l'apport de nouvelles fonctionnalités. A cet instant, le HTML est à sa version 5 : on parle de HTML5 !
En gros, pour réaliser une page web en HTML dans sa dernière version, voici ce qu'il faut écrire dans le minimum des cas :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Le titre de la page web</title>
</head>
<body>
<p>Contenu de la page web</p>
</body>
</html>400
𝔻𝕖𝕗𝕚𝕟𝕚𝕥𝕚𝕠𝕟𝕤
Une balise est un élément de texte (un nom) encadré par le marqueur inférieur (<) et le marqueur supérieur (>). Il existe 2 principales balises :
- Les balises orphelines et
- Les balises paires.
Un attribut en HTML est un mot spécial utilisé à l'intérieur de la balise d'ouverture pour contrôler le comportement de l'élément. Les attributs HTML sont un modificateur d'un type d'élément HTML.
Une valeur : c'est tout simplement le contenu d'un attribut HTML.
Ne vous inquiétez pas, nous verrons des exemples un peu plus tard.
400
ℂ𝕙𝕒𝕡𝕚𝕥𝕣𝕖 𝟷 : 𝕃𝕖 𝕝𝕒𝕟𝕘𝕒𝕘𝕖 ℍ𝕋𝕄𝕃
𝕀𝕟𝕥𝕣𝕠𝕕𝕦𝕔𝕥𝕚𝕠𝕟
Le langage HTML est un langage de description d'une page web. Il existe depuis 1991 grâce à son fondateur Tim Berners-Lee (le père du Web).
Son sigle signifie « HyperText Markup Language » en anglais, littéralement « langage de marquage hypertexte ». Le balisage HTML est incorporé dans le texte du document et est interprété par un navigateur Web. Il est donc un langage de balisage.
400
𝕊𝕠𝕞𝕞𝕒𝕚𝕣𝕖 𝕒𝕦𝕛𝕠𝕦𝕣𝕕'𝕙𝕦𝕚
Chapitre 1: Le langage HTML
🧑🏽💻 Introduction
🧑🏽💻Définitions
🧑🏽💻 Structure de base
🧑🏽💻 Les types de balises
🧑🏽💻Conclusion
400
𝕄𝕠𝕕𝕦𝕝𝕖 𝟷 : 𝕃𝕖 𝕎𝕖𝕓
𝕋𝕙𝕖𝕞𝕖 𝟷 : 𝕃𝕖 𝕝𝕒𝕟𝕘𝕒𝕘𝕖 ℍ𝕋𝕄𝕃 𝕖𝕥 ℂ𝕊𝕊
Chapitre 1 : Le langage HTML
Chapitre 2: Le langage CSS
Chapitre 3: L'utilisation du HTML et du CSS
TP : un site complet en HTML et CSS
Bonjour à tous, j'espère que vous allez bien, on se retrouve à 20h00, pour débuter avec le langage HTML.
Votre environnement de travail étant déjà prêt, vous serez invité à tester des codes et à faire de petits exercices.
Let's go...
Installez-vous bien 😊
400
FIN DU THEME 0
Prochain cours demain à 20h00.
--> Thème 1 : Le langage HTML et CSS <--
400
Comment créer ou ouvrir un fichier avec vs code ?
1. Taper CTRL + O ou cliquez sur File puis sur Open File
2. Dans la fenêtre qui s'ouvre, choisissez le dossier où vous allez créé le fichier
3. Si vous voulez créer un nouveau fichier, dans la même fenêtre faite un clic droit sur L'espace vide de la fenêtre et dans le petit menu qui apparaît, choisir Nouveau ensuite nouveau document texte. Sinon allez directement à l'étape 5.
4. Renseignez le nom du fichier et appuyez sur Entrée pour valider
5. Sélectionnez le fichier en double cliquant dessus.
400
3. Sublime Text 4
Lien : https://www.sublimetext.com/download
De sublime Text 3 a la version 4, certainement plusieurs autres options existe déjà.
Sublime Text 3 ou 4 est l'un des concurrents de visual studio code et arrivé à rivaliser avec Notepad++.
4. Notepad++
Lien : https://notepad-plus-plus.org/downloads/
Outils le plus utilisé en dehors de Visual Studio Code et sublime Text.
Il est également un très bon éditeur de code.
Très recommandé pour les utilisateurs de Windows.
Mais personnellement, je recommande vs code ou sublime Text 4.
Notre étude sera sur Visual Studio Code ou VS Code
1. Télécharger le logiciel sur le site officiel : https://code.visualstudio.com/download
2. Après avoir téléchargé le logiciel, installer le.
Faites un double clique sur le fichier
Puis donner l'autorisation des droits d'administrateurs
Ensuite accepté les politiques et cliquez sur suivant jusqu'à ce que l'installation démarre.
400
𝕀𝕀𝕀. 𝔼𝕥𝕦𝕕𝕖 𝕕'𝕦𝕟 𝕖𝕕𝕚𝕥𝕖𝕦𝕣 𝕕𝕖 𝕔𝕠𝕕𝕖
𝔹. 𝕊𝕦𝕣 ℙℂ 𝕎𝕚𝕟𝕕𝕠𝕨𝕤
Windows est le système d'exploitation le plus utilisé dans les machines et par sa popularité, dispose de plusieurs outils favorisant le développement.
1. Bloc note
Outils par défaut sur Windows, peut très bien nous aider à créer des sites web mais avec bien-sûr énormément de difficulté.
Car n'étant pas un éditeur moderne, la recherche d'erreur sur ce dernier est très difficile !
Un éditeur moderne : est un éditeur qui s'avère avoir ces quelques fonctionnalités : coloration syntaxique, complétion de code, indentation automatique.
2. Visual Studio Code
Lien : https://code.visualstudio.com/download
Avec cet éditeur, vous pouvez coder dans presque tous langages de programmation.
Grâce à ses multiples fonctions tel que :
Auto complétion du code, suggestions, coloration syntaxique, fonction Emmet, onglet, console de débogage, il nous permet encore de coder plus facilement.
C'est l'éditeur que je recommande sur PC.
400
4. Treb Édit
Lien : https://play.google.com/store/apps/details?id=com.teejay.trebedit
Cette application est recommandé pour ceux qui ne font que du html et CSS ainsi que le JavaScript.
Elle est très complète avec son éditeur simple, son exécuteur, sa simulation pour les autres écrans
Il est muni d'un très grand outils de développement pour JavaScript également.
Sa limite est dans le fais qu'il ne propose pas de fonction Emmet, ne soutient pas de complétion pour les autres langages autres que HTML CSS et JS.
Je le recommande vivement pour ceux qui code en HTML CSS et JS uniquement et même pour tester son front avec PHP sur d'autres appareils.
400
3. Acode
Lien : https://play.google.com/store/apps/details?id=com.foxdebug.acodefree
Cet éditeur est exactement comme Code éditor ou Éditeur de code.
Son avantage est de manipuler les fichiers temporaires et de modifier directement les fichiers d'origine.
Mais également la sauvegarde automatique qu'on peut personnaliser à immédiatement dans les paramètres JSON de l'application.
Des thèmes superbes comme dans éditeur de code ainsi que les fonctionnalités de ce dernier.
Je le recommande !
Sois lui , sois code éditor ou Éditeur de code.
400
2. SPCK Editor
Lien : https://play.google.com/store/apps/details?id=io.spck
Identique à Visual Studio Code, vous pouvez tout faire dessus comme sur Code Editor.
Sa limite est dans le fais qu'il code sous forme de projet et donc les fichiers sont stockés dans l'application et non en local dans la mémoire principale.
Ce qui signifie qu'une désinstallation de l'application entraîne la perte de tout son travail.
Doté de toutes les fonctionnalités de Code éditor, il est le très bien et très efficace.
Je le recommande pour ceux qui ne veulent coder qu'en HTML CSS et JS.
