Apprendre le HTML CSS JAVASCRIPT

1. Introduction: Bonjour les gars, bienvenue au cours. Que HTML, CSS et JavaScript. Je suis Priyanka, votre instructrice pour ce cours. Un peu d' histoire de moi-même. J'ai de l'expérience dans le développement web full stack. Je suis également une passionnée d'EIN Emma et j'ai réalisé de nombreux projets dans ce domaine. J'ai également de l'expérience dans l'enseignement en ligne et je suis également auteur chez medium. Avant de commencer le cours, vous devez comprendre pourquoi HTML, CSS et JavaScript. Html CSS et JavaScript sont des éléments constitutifs d'un site Web. Il constitue le meilleur du framework frontal. L'apprentissage de ce cours vous aidera dans votre carrière à devenir développeur. Qu'est-ce que ce cours nous apprend ? Tout d'abord, les bases du HTML, du formatage de texte, des formulaires de liste, du CSS et du JavaScript. Et donc des sujets avancés comme comment intégrer Google Maps à un site Web, etc., ainsi que de nombreux projets pratiques et quelques vidéos bonus. Alors, sans plus tarder, commençons et je vous souhaite bonne chance et bon apprentissage. 2. Installation de Notepad++: Bonjour à tous et bienvenue dans le cours. Nous allons commencer le cours en installant un éditeur pour écrire le code HTML. Dans notre cas, nous utilisons Notepad Plus Plus. Nous allons donc le télécharger et l'installer sur votre ordinateur. Ouvrez un navigateur Web. Je vais ouvrir Google Chrome. Tu le sauras, non ? Téléchargez Notepad Plus, Plus. Je vais écrire pour Windows. Si vous utilisez un autre système d'exploitation, vous pouvez l'écrire. J'écris Windows huit. Maintenant, cliquez sur Bloc-notes Plus, Plus. Vous pouvez maintenant l'installer. Maintenant. Cliquez maintenant sur Télécharger ici. Sélectionnez maintenant la configuration. J'ai une machine 64 bits. Je vais donc télécharger le programme d' installation 64 bits de Notepad Plus Plus. Je vous le recommande. Maintenant, cliquez dessus. Et comme vous pouvez le voir, cela se télécharge. Une fois votre fichier téléchargé, cliquez dessus puis sélectionnez la langue. Je vous recommande de sélectionner l'anglais. Puis appuyez sur OK. Appuyez sur Suivant, puis acceptez la licence. Ensuite, sélectionnez le dossier de destination. Dans mon cas, c'est sûr. Vous pouvez choisir votre dossier de destination. Cliquez maintenant sur Suivant, puis sur Installer. Cliquez sur Terminer. Ici, utilisez votre Bloc-notes Plus, Plus, entièrement installé et prêt pour que nous écrivions les coordonnées. Commençons donc. 3. Première page HTML: Bonjour à tous. Bienvenue au cours. Dans cette vidéo, je vais vous apprendre à écrire votre premier code HTML. Ouvrez le Bloc-notes Plus, Plus à partir de l'icône sur votre bureau. Créez maintenant un nouveau fichier. Ouvrons donc d'abord la balise HTML. Vous avez donc ouvert la balise HTML. Maintenant, faites une barre oblique pour le fermer. Quel que soit le code que vous devez écrire, vous devez l'écrire dans la balise HTML. Maintenant, nous allons écrire l'étiquette de tête et la fermer simultanément. À l'intérieur de la tête. Nous devons lui donner un titre. Fermez maintenant la balise title. Nous devons donc donner un titre à la page HTML que nous créons. Donnons le titre de cette première page HTML. Maintenant, sauvegardons cela, allez dans Fichier. Cliquez sur Enregistrer sous, ou sur. Vous pouvez également utiliser ce bouton Enregistrer présent jusqu'à présent, je vais enregistrer mon fichier sur mon bureau. Vous pouvez l'enregistrer où vous le souhaitez. Je vais d'abord le nommer test. HTML point. N'oubliez pas cette extension HTML point. Maintenant, sauvez-le. Maintenant, avant de le lancer, comprenons ce titre, mais très clairement. Ouvrez donc votre navigateur Web. J'ouvre Google Chrome ici. Vous pouvez ouvrir le navigateur Web de votre choix. Comme vous pouvez le voir, j'ai ouvert Google Chrome. Maintenant. Accédez à google.com. Vous pouvez voir que c'est écrit ici, Google. Il s'agit donc essentiellement du titre de cette page HTML. Revenons maintenant à notre éditeur. Puisque nous avons donné le titre comme première page HTML, il apparaîtra comme titre de notre page. Maintenant, laissez-moi passer à l'étape suivante. Voici le premier nœud HTML. Double-cliquez dessus. Oui, comme vous pouvez le voir, il s'agit de ma page HTML et c'est le titre qui est affiché ici. Merci de m'avoir regardé. Dans la vidéo suivante, nous allons apprendre à créer le corps de notre page HTML. 4. Étiquette de corps HTML: Bonjour à tous, Bienvenue dans le cours. Dans cette vidéo, vous allez apprendre à créer le corps de votre page HTML. Allez donc dans l'éditeur Notepad Plus, Plus sur l'étape du deck. Créez maintenant un nouveau fichier. Comme vous le savez déjà, nous devons ouvrir la balise HTML et la fermer simultanément. Ensuite, nous devons créer le pont principal. Ensuite, vous devez donner un titre à notre page et donner le titre comme corps. Puisque nous allons en savoir plus sur le corps de la page HTML. Fermez maintenant l'étiquette de tête. Après cela, nous avions appris à créer le corps de l'étiquette corporelle et à le fermer simultanément. N'oubliez pas que vos étiquettes corporelles doivent être inférieures à la haute technologie. Tout ce que vous écrivez à l'intérieur de cette balise apparaît sur votre page HTML pour comprendre son spectre. C'est aller dans notre navigateur Web. J'ouvre Google Chrome. Maintenant, allez sur google.com. Urée. Donc, peu importe ce que vous voyez ici, c'est Google écrit sur votre écran et dans la barre de recherche, et tout ce qui est affiché ici est essentiellement écrit à l'intérieur de la balise body de cette page HTML. Revenons maintenant à notre éditeur Notepad Plus, Plus. Maintenant, écrivons simplement quelque chose à l'intérieur de ce corps. J'écris donc cette partie du corps de notre page HTML. Maintenant, sauvegardons ce fichier. Cliquez sur le bouton Enregistrer. Je vais l'enregistrer au format body dot HTML. N'oubliez pas l'extension HTML point. Maintenant, sauvez-le. J'y vais, mon prochain conseil. Voici le code HTML body dot. Double-cliquez dessus. Comme vous pouvez le voir, mon titre ici est « body ». Et c'est la partie du corps où j' ai écrit, c'est la partie du corps de notre page HTML. Donc, quoi que vous écriviez à l'intérieur du corps qui s'affiche à l'écran. Revenons à notre éditeur Notepad Plus Plus. Maintenant, cette balise body possède certains attributs à l'aide desquels vous pouvez la manipuler. Laissez-moi vous montrer comment utiliser les attributs de la balise body. Les attributs doivent être présents dans la balise body elle-même. Le premier attribut est donc bg color. Les vésicules représentent la couleur de fond. À l'aide de cet attribut, vous pouvez définir la couleur d'arrière-plan de votre page HTML. Permettez-moi donc de définir la couleur d'arrière-plan sur le rouge. Maintenant, sauvez-le. Allez à l'endroit où vous avez enregistré. Ça y est, le corps. Comme vous pouvez le voir, la couleur de mon arrière-plan est passée du blanc au rouge. Vous pouvez donner n'importe quelle couleur de votre choix. Laissez-moi vous montrer une autre couleur. Supposons rose. Retournez dans le corps, rechargé. Comme vous pouvez le voir, la couleur est passée du rouge au rose. De même, il existe d'autres attributs du corps de texte. Donc, le simple fait d'utiliser lequel vous pouvez coiffer votre corps selon votre choix vous apprendra cela dans les prochaines vidéos. Merci d'avoir regardé cette vidéo. Dans les prochaines vidéos, il y en a plein d'autres à venir. 5. Les titres en HTML: Bonjour à tous, Bienvenue dans le cours. Dans cette vidéo, je vais vous expliquer les différentes rubriques du HTML. Sur votre bureau, double-cliquez sur l'icône Notepad Plus Plus. J'ai donc le talon ouvert de l'éditeur. Ouvrons maintenant la balise HTML. Tout ça. N'oubliez pas que vous devez fermer la technologie en même temps. J'ai donc ouvert la balise HTML. Maintenant. Ouvrez l'étiquette de tête et fermez simultanément l'étiquette de tête dans la technologie publicitaire, donnez le titre Tech TI TLV. Fermez-la simultanément dans le titre, le titre de cette page HTML. Je vais donc donner le titre sous forme titres puisque nous allons apprendre les titres aujourd'hui. Donc, les titres, oui, c'est fait. Maintenant. Nous allons ouvrir le body tag et le fermer simultanément. On a fait le body tag. Je vais donner le titre. Ouvrez donc un tag et écrivez H1. Maintenant, écrivez un texto à n'importe quoi dans Lake. Le premier titre. Fermez maintenant la balise H1. Le premier titre correspond à ma texture et à l'intérieur de la balise H1. Voyons donc ce qui se passe et le résultat. Alors enregistrez ceci d'abord, cliquez sur l'icône Enregistrer. Maintenant, enregistrez-le où vous souhaitez et souvenez-vous de l' endroit où vous enregistrez. Je vais donc l' enregistrer sur mon bureau. Cliquez donc sur Next step et écrivez le nom du fichier. Je donne headings.html. N'oubliez pas ce point HTML. Alors sauvez-le. Réduisez maintenant l'éditeur. Comme vous pouvez le voir, mon fichier headings.html est créé. Je vais donc simplement double-cliquer dessus et attendre qu'il s'ouvre, pour le donner. Comme vous pouvez le voir, le premier titre est affiché ici. C'était donc notre premier titre. Maintenant. Maintenant, ajoutons une autre balise appelée H2 et donnons un texte. Supposons que le deuxième titre, puis passe à H2. Maintenant, enregistrez-le et voyons ce qui se passe dans la sortie. Nous allons donc y revenir et il est rechargé. Voici mon deuxième titre. Comme vous pouvez le voir, H1 et H2 D sont essentiellement les balises de titre dont l' une a la plus grande taille et au fur et à mesure que vous allez plus loin, la taille diminue. En HTML, il existe six types de titres. Je vais donc tester, d' accord, TO h3. Ensuite, donnez le texte. La troisième édition. Ok, maintenant ferme le tag. H3. De même, h 456. Donc, par rapport à simplement changer les banques. Maintenant, juste ici pour vérifier tout à la fois, nous donnera une idée de la façon dont cette longueur de front ressemblera à l'écran. Donc H5, d'accord. Maintenant, fermez-le encore une fois. Le dernier H6, jusqu' au sixième cap. Fermez la balise h. Alors maintenant, sauvez-le. Retournez dans Chrome ou dans le navigateur que vous utilisez et rechargez. Comme vous pouvez le voir, la variation de la taille des en-têtes lorsque nous passons de H1 à H6. Au fur et à mesure que nous descendons, la taille diminue également. Vous pouvez donc utiliser votre deck maux selon votre convenance. Merci d'avoir regardé les gars dans les prochaines vidéos, il y en a encore beaucoup à venir. 6. Paragraphe HTML<p>Tag</p>: Bonjour à tous. Bienvenue dans le cours. Dans cette vidéo, vous allez découvrir les paragraphes d'une page HTML. Ouvrez donc l'éditeur Notepad Plus Plus. Commençons par écrire notre code. Commençons donc par ouvrir la balise HTML. L'étiquette de tête. Donnez un titre à votre page HTML. Je vais donner le dernier paragraphe. Près de la balise de titre, de la balise de tête. Ouvrez l'étiquette du corps. Simultanément Placard. Cette balise de paragraphe doit maintenant se trouver à l'intérieur du corps. Donc, ouvrez peut-être la balise de paragraphe. Et quoi que vous écriviez dans le paragraphe Greg, cela apparaît sur votre peau. Permettez-moi donc d'écrire ce paragraphe. Non, tu dois fermer la balise p. Laissez-nous donc le sauvegarder. Je l'appelle HTML B point. Tu peux donner n'importe quel nom. Je l'enregistre sur le pas de mon pont. Regardons donc le résultat. Cliquez donc sur le bouton Exécuter et lancez Chrome. Comme vous pouvez le voir en utilisant la balise p, nous pouvons également écrire à l'écran. Maintenant, si vous voulez écrire un autre paragraphe, ouvrez à nouveau la balise p, n'est-ce pas ? Il s'agit d'un autre paragraphe. Et fermez la balise p. Sauvegardez-le. Encore une fois, lancez-le. Comme vous pouvez le constater, j'ai écrit deux paragraphes. De cette façon, vous pouvez écrire plusieurs paragraphes. Revenons donc à notre éditeur. Maintenant, si nous voulons à notre paragraphe, devons commencer par le centre de l'écran. Ensuite, si nous donnons des espaces ici, cela ne sera pas détecté. Voyons voir, sauvez-le. Maintenant, lançons-le. Lancez dans Chrome. Comme vous pouvez le constater, ces espèces n' ont pas été détectées ici. Pour ce faire, nous pouvons utiliser le tag appelé pre. Utilisons donc un tag appelé terminé simultanément. Sauvegardez-le. Voyons maintenant le résultat. Comme vous pouvez le voir, comme nous avions utilisé p, il y a donc un espace à l'avant. Donc maintenant, si vous appuyez sur Entrée et que vous écrivez quelque chose, supposons bonjour. Ensuite, il s'affiche sur votre écran tel qu'il est. Donc je le dirige. Oui, alors le bonjour vient en dessous. Il s'agit d'un paragraphe. De cette façon, vous pouvez manipuler votre paragraphe et écrire autant de paragraphes que vous le souhaitez. Merci d'avoir regardé cette vidéo. 7. Comment insérer des images: Bonjour à tous, Bienvenue au cours. Dans cette vidéo, je vais vous montrer comment ajouter des images à votre page Web. Ouvrez donc un éditeur de bloc-notes. Maintenant, créez un nouveau fichier. Commencez par la balise HTML. Nous en avons donc fini avec la partie tête. J'ai donné le titre sous forme d'images. Commençons maintenant la partie inférieure. Le code d'insertion des images doit se trouver à l'intérieur de la partie du corps. Donc pour insérer l'image, vous verrez la balise IMG. La balise IMG n'a pas besoin de balise de fermeture. Donc tu savais que le point le fermait. Maintenant. Il possède un attribut appelé SRC. Src signifie source. Nous devons donc donner la source de l'image. Laissez-moi aller voir Dexter. Créons un dossier ici. Je nomme les images du dossier. Maintenant, ajoutons une image. J'ai déjà une image dans ma section photos. Je vais donc simplement le copier et aller dans mon tube suivant et le coller dans. Voici donc cette image. Maintenant, cliquez avec le bouton droit sur cette image. Accédez à Propriétés et copiez simplement un nom. Maintenant, revenez au Bloc-notes, éditeur. Écrivez égal, puis la barre oblique du nom du dossier, le nom de l'image. C'est basé. C'est fait. Maintenant, sauvegardons ce fichier. Cliquez sur le bouton Enregistrer, et je vais l' enregistrer sur mon Dexter. Il existe un dossier appelé HTML. Je vais le sauvegarder là-bas, non ? Ing point HTML, le nom de fichier que vous pouvez donner n'importe quel nom. Je vais le garder. Maintenant, revenons à mon manuel. Voici donc le fichier HTML où se trouve ING point HTML. Maintenant, placez également ces fichiers images dans ce fichier HTML. Ce point HTML IMG aura donc une référence à ce fichier image où se trouve l'image. Nous avons donc terminé. Maintenant, exécutons-le dans Chrome. Comme vous pouvez voir l'image du ciel ici. Vous pouvez sélectionner n'importe quel type de carburant. Vous pouvez ainsi insérer une image dans votre page HTML. Maintenant, nous pouvons également modifier la hauteur et la largeur de l'image que nous insérons. Revenons à notre éditeur. La balise IMG possède des attributs appelés hauteur et largeur. Utilisons donc ces hauteurs HEI GHD égales, vous pouvez donner n'importe quelle hauteur de contrats à terme. J'en donne 500. Et la largeur est égale à mille. Sauvegardons cela et exécutons-le. Comme vous pouvez le constater, la taille de l'image a été modifiée. Vous pouvez réduire ou augmenter la taille selon votre convenance et votre choix. Merci d'avoir regardé cette vidéo. Continuez à regarder d'autres vidéos pour en savoir plus sur le HTML. 8. Comment implémenter des hyperliens: Bonjour à tous, Bienvenue dans le cours. Dans cette vidéo, je vais vous parler des hyperliens. Ouvrez donc l' éditeur Notepad Plus Plus et créez un nouveau fichier. Maintenant, dans cette vidéo, je vais créer des fichiers HTML, puis les lier. Maintenant, pour mieux comprendre le concept de lien hypertexte, prenons un exemple concret. Maintenant, depuis votre ordinateur, ouvrez n'importe quel navigateur Web. J'ouvre Google Chrome ici. Laissez-moi maintenant faire une recherche sur un site Web appelé Wikipédia Saisissez-le. Comme vous pouvez le voir, s'agit d'une page web de wikipedia.org G. Maintenant, comme vous pouvez le voir ici, il est écrit un petit coin lettres bleues en gras avec un sous-jacent. Cela indique donc qu'il y a un lien hypertexte dedans. Ainsi, lorsque vous cliquez dessus, une autre page Web apparaît. C'est donc le concept de lien hypertexte. Mettons-le maintenant en œuvre sur notre page Web. Retournez donc dans votre éditeur et créez une page HTML. Comme vous pouvez le voir, j'en ai fini avec la tête, mais j'ai donné mon titre en tant que page web. Maintenant, commençons le corps. Maintenant, dans la balise body, j'ai écrit un titre appelé Bienvenue sur ma page Web dans l'en-tête H1. Et j'ai écrit un paragraphe qui dit pour en savoir plus cliquez ici. Ici, je vais ancrer, ouvrir un tag et le fermer simultanément. Ce sera donc la partie. Lorsque vous cliquez dessus, il accède à une autre page Web. Maintenant, ce E, qui est la balise d'ancrage, possède un attribut appelé HR. C'est donc le lien hypertexte. Notre référence HTML, quoi que vous disiez. Maintenant, entre guillemets doubles, vous devez donner le nom de la page Web vers laquelle vous souhaitez naviguer. Maintenant, sauvegardons ce fichier. Enregistrez comme je vais l' enregistrer dans mon deck, arrêtez-vous dans un fichier appelé HTML. C'est ici. Donnons-lui un nom. Je donne donc le nom de la plage. HTML à un point. Maintenant, sauvez-le. Comme vous pouvez le voir, j'ai le dossier HTML ici. Dans ce cas, j'ai une page Web HTML à un point. Créons maintenant un autre fichier HTML. Créez donc un nouveau fichier et écrivez dans votre code HTML. J'ai donné le titre de ma plage pour plus de détails. Dans la balise body, je vais ajouter deux paragraphes. Je le suis. Peux-tu écrire au nom. Fermez ensuite la balise de paragraphe. Et un autre paragraphe. Je pense qu'on va droit à la désignation. Ensuite, la balise de paragraphe. Enregistrez maintenant ce fichier. N'oubliez pas que vous devez enregistrer ce fichier dans le dossier dans lequel vous avez enregistré votre page précédente. Donc, comme j'avais enregistré ma page Web précédente dans ce dossier HTML. Je vais donc l'enregistrer uniquement dans ce dossier. Permettez-moi donc de donner le nom en tant que page Web au point HTML. Et maintenant, sauvez-le. Nous avons maintenant le nom de cette page Web. Revenons donc à une page HTML à un point. Et dans cette référence H, laissez-nous la page de droite deux points HTML. Maintenant, sauvegardons-le. Laissons maintenant exécuter ce fichier. Cliquez donc sur Exécuter et lancer dans Chrome. Vous allez le lancer dans n'importe quel navigateur Web. Maintenant, comme vous pouvez le voir pour en savoir plus, cliquez ici. Ce texte a été souligné et il est de couleur bleue. Vous n'avez mentionné aucune couleur, mais elle est toujours bleue parce qu'elle est liée. Maintenant que vous cliquez sur notre sarcelle, vous pouvez voir que vous êtes dirigé vers votre page Web pour obtenir des détails. Vous avez ici ce titre appelé détails. Vous avez votre titre de Neiman ici. Maintenant, lorsque vous cliquez sur le dos, vous accédez à votre page Web précédente. De cette façon, vous pouvez lier plusieurs pages Web selon vos besoins. Merci d'avoir regardé cette vidéo. Continuez à regarder pour en savoir plus. 9. Introduction au formatage de texte: Bonjour à tous, Bienvenue dans le cours. Dans cette vidéo, je vais vous apprendre la mise en forme du texte en HTML. Maintenant, ouvrez l'éditeur Notepad Plus Plus. Créez un nouveau fichier. Comme vous pouvez le voir, j'en ai déjà fini avec la structure de base de ma page HTML. Maintenant, à l'intérieur de la partie du corps, je vais écrire un paragraphe intitulé This is text. La balise P. Maintenant, le premier objectif est de faire en sorte que le texte soit impliqué. Donc, ce que nous allons faire est d'écrire un autre paragraphe et d'utiliser la pile be V signifie gras et droit. Ce texte est en gras. Et le grand pont. Et en même temps la balise de paragraphe. Maintenant, sauvegardons ça. Je vais l'enregistrer sur mon pont. Toujours. Donne-lui un nom. Et enregistrez ça. Maintenant, exécutons-le sur Chin Chrome. Comme vous pouvez le voir, le paragraphe que j'ai écrit est un texte. Et quand ils ont donné le tag gras, c'est-à-dire B, les textes qui se trouvaient à l'intérieur l'étiquette en gras sont en gras. De cette façon, vous pouvez mettre le texte en gras. Voyons maintenant comment nous pouvons écrire un texte qui fuit. Créez donc un autre paragraphe et utilisez cette balise appelée i. Je le représente. Je vais donc écrire ceci est du texte et Ditech et la balise p. Sauvegardez-le. Maintenant, lancez-le. Comme vous pouvez le constater, ce texte est en Italie. Voyons maintenant comment nous pouvons transformer un texte en exposant et en indice. Pour cela, encore une fois, lancez une balise de paragraphe. Laisse-moi écrire le texte. La formule chimique de l'eau est, nous savons que la formule chimique de l'eau est H2O. Deux est donc un indice. Nous allons donc écrire H. Ensuite, dans cette pile appelée sub signifie indice. Nous allons en écrire deux. Ensuite, nous allons terminer l'indice. Ensuite, écrivez O, puis fermez. Donc, une partie de la technologie, sauvegardez ça. Voyons le résultat. Comme vous pouvez le voir, la formule chimique de l'eau est H2O, où deux est l'indice, puisque nous avions écrit à dans la balise d'indice. Voyons maintenant l'exposant. Permettez-moi donc de commencer un autre paragraphe. Maintenant, pour implémenter l'exposant, je vais écrire une formule mathématique. Ecrivons x plus y. Ensuite, je vais écrire un carré entier. Donc pour cela, j'ai besoin de l' exposant S UP puis de deux. Et puis terminez l' exposant savoir égal, puis encore une fois au carré X. Encore une fois, l'indice et l'exposant. N'oubliez pas de les terminer car sinon vos textes entiers seront en exposant puis en Y au carré. Encore une fois, ouvrez la balise super script et écrivez puis terminez l'exposant plus deux x y. Alors que nous remarquons la formule, fermons maintenant cette balise de paragraphe et sauvegardons-la. Voyons le résultat. Comme vous pouvez le voir, ces deux-là sont en exposant. Voyons maintenant les autres balises que nous pouvons utiliser pour mettre en forme nos textes photo. La balise suivante s' appelle strong. Donc tag de départ appelé fort. Et droit à. C'est un texte fort. Et le tag fort. Et puis le barrage. Sauvegardez-le et lancez-le. Comme vous pouvez le voir, c' est notre texte fort, qui est un peu plus large et gras. Ensuite, nous avons une petite taille. Commencez donc un autre paragraphe et utilisez la balise appelée small. Et puis bon, c'est un petit texte. Cela attaquera la balise p. Maintenant enregistrez ceci et lancez-le. Comme vous pouvez le constater, la taille du texte a été réduite. C'est donc notre petit texte. Revenons maintenant à l'éditeur. La balise suivante est Mark, qui va essentiellement mettre en évidence notre texte. Alors utilisons-le. Ouvrez une étiquette appelée MAR peut marquer. Bon ? Ceci est alors mis en évidence. Et le tag mark, le tag P. Maintenant enregistrez ceci et lancez-le. Comme vous pouvez le voir, votre texte est surligné ici. Voyons un autre tag appelé del. En gros, je vais croiser le mot que vous allez y écrire. Allons y jeter un œil. Alors commencez à attaquer appelé d l del. Et c'est vrai, c'est supprimé. Et terminez le tag del. Et puis le tag p. Maintenant, sauvegardez ça. Et lançons-le. Comme vous pouvez le voir, cette partie est supprimée. Il y a donc une limite là-dessus. Voici donc les différentes manières dont vous pouvez mettre en forme votre texte et l'utiliser dans votre page Web. Dans la vidéo suivante, nous verrons comment mettre en forme votre texte. Merci d'avoir regardé cette vidéo et de vous entraîner à vous familiariser avec les balises. 10. Formatage de texte - Couleur de texte: Bonjour à tous, Bienvenue dans le cours. Dans cette vidéo, je vais continuer avec la mise en forme du texte en HTML. Ouvrez donc l' éditeur Notepad Plus Plus. Créez un nouveau fichier. Commencez par la structure de base d'une page HTML. Nous avons donc terminé avec la structure de base de votre page HTML. Maintenant, je vais vous montrer comment définir les couleurs des textes que vous allez utiliser sur une nouvelle page Web. Pour cela, laissez-moi écrire le paragraphe. C'est bleu, la balise P. Maintenant, je veux définir la couleur de ce texte en bleu. Pour ça. Dans PayTech, utilisez l'attribut appelé style. Dans l'attribut style, je vais spécifier la couleur du texte. Maintenant, commençons les commentaires formulés et la bonne couleur, C-O-L-O-R. La bonne couleur de votre choix. Je le règle en bleu. Donc BL ui puis donnez un point-virgule puis fermez la virgule inversée. Maintenant, sauvegardons ce fichier. Enregistrer sous, je vais le nommer comme formatage de texte en HTML point. Et je vais l'enregistrer sur le pas de mon pont. Alors sauvez-le. Maintenant, lançons-le. Maintenant. Comme vous pouvez le voir, le texte, c'est bleu, est de couleur bleue. De cette façon, vous pouvez définir la couleur de votre texte. Vous pouvez utiliser n'importe quelle couleur de votre choix. Laissez-moi vous en montrer une autre. Il suffit de copier la phrase et de la coller. Maintenant, je vais définir la couleur comme supposons le rouge. Et je vais écrire ici, c'est rouge. Il vous suffit maintenant de l'enregistrer et de l'exécuter. Comme vous pouvez le voir, le texte ici est de couleur rouge. Vous pouvez choisir n'importe quelle couleur de votre choix, quelle que soit la couleur que vous souhaitez définir pour votre texte, vous pouvez les utiliser. Maintenant, il aura écrit d'autres paragraphes avec la couleur magenta, vert. Vous pouvez donc également l'utiliser. Maintenant, j'ai écrit plus de paragraphes en utilisant différentes couleurs telles que le magenta, le vert. Donc maintenant, quand je l'exécute, vous pouvez voir la couleur magenta et la couleur verte. Ce sont donc les couleurs de base que vous pouvez utiliser pour recolorer votre texte. En dehors de cela, il existe de nombreuses couleurs différentes que vous pouvez utiliser pour colorer votre texte. Maintenant, je vais vous montrer une autre approche pour colorer votre texte. Pour cela, commencez un autre paragraphe et écrivez n'importe quoi. Fermez la balise p. Encore une fois. Ecrivez ce style d'attribut égal, et entre guillemets doubles, n'est-ce pas ? C-o-l-o-r colorie les virgules étroitement inversées. Maintenant, dans ce bon hachage. Ensuite, si F est suivi de quatre zéros, il s'agit essentiellement du code hexadécimal d'une couleur rouge. Maintenant, sauvegardons-le et exécutons-le. Comme vous pouvez le voir, le dernier texte est coloré en rouge. Revenons à notre éditeur. C'est donc aussi une façon définir la couleur de vos textes. Il existe de nombreuses couleurs parmi lesquelles vous pouvez sélectionner votre couleur. Html propose 146 nuances de couleurs sous forme de code hexadécimal que vous pouvez utiliser dans votre texte. Je vais vous montrer ce modèle de toutes les couleurs ainsi que modèle de toutes les couleurs ainsi code hexadécimal afin que vous puissiez l'utiliser dans votre texte chaque fois que vous écrivez une page HTML. Il s'agissait donc de définir les couleurs de votre texte. 11. Formatage de texte - Taille du texte: Bonjour à tous, Bienvenue dans le cours. Dans cette vidéo, je vais continuer avec la mise en forme du texte en HTML à l'ouverture d'un nouveau fichier. Et commencez par la structure de base du HTML. Nous avons terminé avec la structure de base de la page HTML. À présent, dans la section du corps, commencez un paragraphe, du texte et fermez la balise p. Très bien, l' attribut de style est égal puis ouvrez le commerce inversé et police de droite FIN different et donnez-lui un tiret. Et puis la bonne taille. Vous avez une colonne et indiquez la taille de la police souhaitée. Supposons que je fasse 200 %. Fermez les virgules inversées. Maintenant, enregistrez ce fichier. Maintenant, lançons-le. Comme vous pouvez le voir, il s'agit d'un paragraphe dont la taille est de 200 %. Maintenant, pour comparer, écrivons un autre paragraphe et modifions-en la taille. Il suffit de copier ce paragraphe. Et des détails de base. Et la taille du diesel à 300 pour cent. Maintenant, sauvegardez ça. Voyons quel est le résultat maintenant. Comme vous pouvez le voir, il s'agissait de mes textes d' taille de 200 % et celle-ci est de 300 %. Ainsi, dans ce cas, vous pouvez définir une taille variable pour votre texte. Voyons maintenant ce qui se passe si je donne une valeur de 100 % à la taille du texte. Permettez-moi maintenant de définir la taille du texte à 200 %. Maintenant, sauvez-le. Et voyons le résultat. Comme vous pouvez le voir, il s'agit d'un texte à 100 %, qui est beaucoup plus petit que les autres. 12. Mise en forme de texte - aligner les textes: Bonjour à tous, Bienvenue dans le cours. Dans cette vidéo, je vais continuer avec la mise en forme du texte en HTML. Ouvrez un nouveau fichier et commencez par la structure de base d'une page HTML. Une fois que vous avez terminé avec la structure de base à l'intérieur du corps, commencez un paragraphe. Et la balise P. À nouveau, écrivez l'attribut style. Et entre virgules inversées, texte à droite, tiret, et donnez deux points et le centre droit. Cela placera donc vos textes au centre de l'écran. Maintenant, sauvegardons-le. Laissons-le. Comme vous pouvez le voir, c'est un paragraphe qui est défini au milieu de l'écran. Ensuite, nous pouvons également aligner le texte le côté droit ou gauche de votre écran. Pour cela, encore une fois, allez dans l'éditeur puis copiez ce paragraphe. Tu n'as pas besoin de tout réécrire. Et collez-le ici et changez l'alignement pour écrire. Sauve ça. Maintenant, lancez-le. Comme vous pouvez le voir ici, votre texte est aligné sur le côté droit de l'écran. De même, vous pouvez le faire sur le côté gauche de l'écran. Comme vous le savez déjà par défaut, il se trouve sur le côté gauche. Donc, vous pouvez mentionner, ne sont pas mentionnés que selon votre choix. Mais pour le centre et la droite, vous pouvez utiliser l'alignement du texte et le centre droit. Très bien. 13. Mise en forme de texte - Famille de polices: Bonjour à tous, Bienvenue dans le cours. Dans cette vidéo, je vais continuer avec la mise en forme du texte en HTML. Ouvrez un nouveau fichier HTML et commencez par la structure de base. Maintenant, dans le corps, écrivez un paragraphe. Donc, une fois que vous avez fini d' écrire le paragraphe, maintenant dans la balise p, commencez par l'attribut style, puis donnez égal à ce que nous avons fait dans la police commerce inversé, right. Dash famille et donne un deux-points 80. Fermez la virgule inversée, enregistrez le fichier. Sauvegardez-le, lancez-le. Comme vous pouvez le voir, mon texte est du style ADL. Ainsi, vous pouvez définir différents styles pour votre texte. Voici maintenant un modèle pour vous de différentes familles de polices disponibles en HTML, de Arial à Times New Roman Georgia. Et pour avoir un impact. Vous pouvez essayer toutes ces vignettes, puis les utiliser pour concevoir votre page Web. Je vais vous montrer une partie de la famille de polices dans cette vidéo. Alors voyons voir. Je vais maintenant vous montrer certains styles de police tels que Arial, Arial Black, Georgia, Times, New Roman et impact pour que vous puissiez styles de police tels que Arial, Arial Black, Georgia, Times, New Roman et impact pour comprendre la différence entre eux. Nous allons donc enregistrer ce fichier. Comme vous pouvez le voir, ce sont les différents styles de texte. C'est ADL plutôt qu'Arial Black. Puis Georgia, puis Times New Roman. Et cela a un impact. Vous pouvez essayer n'importe quel style de la liste des familles de polices qui vous ont été présentées et les implémenter sur votre page Web. Merci d'avoir regardé cette vidéo. Pratiquez cela et utilisez-le pour concevoir votre page Web. 14. Listes - Liste commandée: Bonjour à tous, Bienvenue dans le cours. Dans cette vidéo, je vais vous parler des listes d'audit. Donc, pour cela, ouvrez l'éditeur Notepad Plus Plus lors de votre prochain travail. Et maintenant, créez un nouveau fichier. Commençons maintenant par la structure de base d'une page HTML. Maintenant, une fois que tu auras fini le body tag, non ? O signifie « liste ordonnée ». Alors commencez à étiqueter et terminez simultanément. Maintenant, dans cette étiquette d'huile, vous pouvez lister les articles que vous souhaitez mettre en vente. Maintenant, je vais écrire LI, puis mon premier élément, supposons le premier élément, puis fermer la balise LI. Maintenant, ouvrez l'éclairage et le deuxième élément droit. Et fermez-le. Vous pouvez également ajouter un autre élément. Maintenant, lancez le troisième élément droit, et fermez le pont LA. Cela suffit donc. Maintenant, sauvegardons ça. Je vais l'économiser sur mon prochain. Maintenant, sauvegardez ça et laissez-nous le gérer. Donc, comme vous pouvez le voir ici, mes articles, nous avons juste numéroté avec 12 entrées car il s'agit d'une liste ordonnée. La liste est donc fournie avec un son de 123 dans une séquence. Maintenant, nous pouvons également modifier le type de séquence que vous souhaitez utiliser. Il s'agit donc de la liste ordonnée de base. Pour remplacer cette séquence de liste par trois, ce qui est le cas par défaut. Permettez-moi maintenant d'ajouter une autre liste ordonnée. Donc pour cela, copiez ceci, et collez-le ici. Maintenant, pour changer le type de séquence de listage, nous pouvons utiliser l'attribut appelé type dans l' étiquette d'huile, à droite TIP. Chaque type est alors égal, puis commence par virgules inversées et juste à l'intérieur de a. Donc, dans ce cas, ma liste va commencer par un majuscule, suivi de B, C. Maintenant, sauvegardons-la et voyons quel est le résultat. Comme vous pouvez le voir, mes éléments ont été répertoriés et la séquence est a, b, c. Ainsi, vous pouvez modifier le type de liste que vous souhaitez utiliser. Maintenant, permettez-moi de recopier ceci et voyons un autre type de saisie. Copiez maintenant cette partie et collez-la ici. Permettez-moi de changer le type en Smalley. Sauvegardons cela, puis exécutons-le. Comme vous pouvez le voir, le type de style est Smalley, suivi de B et C. Maintenant, de cette façon, vous pouvez le styler. Laissez-moi vous montrer d'autres types. Collez ceci à nouveau ici, et laissez-moi écrire ici. Je sauvegarde ça et je le lance. Comme vous pouvez le voir, ma liste est ordonnée en utilisant une séquence de nombres romains. Ce sont donc les types que vous pouvez sélectionner pour utiliser dans votre liste. Merci d'avoir regardé cette vidéo. Dans la vidéo suivante, nous allons en savoir plus sur les listes descriptives. 15. Liste - Liste non ordonnée: Bonjour à tous, Bienvenue dans le cours. Dans cette vidéo, je vais vous parler des listes en HTML. Pour cela, ouvrez l'éditeur Notepad Plus Plus. Créez un nouveau fichier. Permettez-moi vous dire qu'il existe trois types de listes en HTML. Liste ordonnée, liste non ordonnée et liste descriptive. Nous les verrons donc un par un. Commençons par une liste ordonnée. Commencez donc par la structure de base d'une page HTML. Une fois que tu auras fini d'écrire la structure de base dans le corps, non ? Vous, vous allez représenter la liste non ordonnée. Donc, simultanément, vous devez fermer que vous allez étiqueter. Maintenant, dans cette balise UL, vous pouvez écrire la liste des éléments. Maintenant, dans la balise UL, l'œil droit, puis fermez-le. Maintenant, tout ce que vous écrivez à l'intérieur de cette balise LI sera affiché sous forme de liste sur votre écran. Maintenant écrivons quelque chose. Supposons que le premier élément, puis à nouveau, ouvre l'étiquette LI et le deuxième élément de nuit. Comme vous pouvez le voir, après chaque objet, vous devez fermer la technologie a light. Quoi qu'il y ait, nous ne voulions pas qu'une technologie légère soit votre seul élément. Maintenant, vous pouvez continuer à ajouter le troisième élément. Il suffit de sauvegarder ça. Maintenant, lançons-le. Je lance dans Firefox. Vous pouvez le lancer dans le navigateur Web de votre choix. Donc, comme vous pouvez le voir ici, mes trois éléments sont marqués par des puces, puis nous pouvons également changer le style de liste des éléments. Pour cela, retournez dans l' éditeur et copiez cette partie. Nous n'avons pas besoin de le réécrire. Business et collez-le dans. Dans ce cas, vous allez étiqueter, je vais utiliser l'attribut appelé style equals. Alors nous n'avons pas inversé les guillemets, non ? Liste. Style, type. Maintenant, donnez deux points et supposons que c'est bien, tant mieux. Et puis on se retrouve dans ce qu'il code. Maintenant, sauvegardons-le et exécutons-le. Maintenant, comme vous pouvez le voir, le style de votre annonce a été modifié en puces. Est-ce que c'est par défaut ? Et vous pouvez également modifier le style de cette façon. Il existe donc d'autres types de styles que nous vous en montrons un autre. Encore une fois, copiez cette partie et collez-la. Maintenant, dans ce type de style liste, à droite au carré. Et enregistrez ça. Maintenant, lorsque vous l'exécutez, vous pouvez voir que l' enfant de la liste est des carrés. Vous pouvez également mettre en vente vos articles même sans aucun style. Pour cela, rendez-vous dans votre éditeur. Et dans le style, c'est ça ? Aucune. Et lancez-le. Comme vous pouvez le voir, le style n'est pas. Voici comment vous pouvez mettre en vos articles à l'aide d'une liste ordonnée. Merci d'avoir regardé cette vidéo. Dans la vidéo suivante, nous allons en savoir plus sur la liste d'audit. 16. Listes - Liste descriptive: Bonjour et bienvenue à nouveau dans le cours. Dans cette vidéo, je vais vous parler de la liste descriptive. Pour cela, allez dans l' éditeur Notepad Plus Plus et créez un nouveau fichier. Commençons maintenant par la structure de base d'une page HTML. Maintenant, une fois que tu auras fini le body tag, non ? D signifie liste descriptive et ferme simultanément la balise de transaction. À présent, dans cette balise d'offre, vous pouvez écrire les éléments de liste pour cela juste ici, d t. Et dans cette balise, écrivez le nom de l'élément de liste. Je vais donc écrire sur votre premier élément , puis fermer le DD DAG. Maintenant, si je veux ajouter une description à l' élément de liste que j'ai ajouté, ouvrez la balise DD. Maintenant, rédigez une description pour votre objet. Je vais écrire ici, supposons que c'est mon premier élément, puis fermer la balise DD. De même, vous pouvez y ajouter d'autres éléments. Ouvrez donc à nouveau le pont DT et écrivez le deuxième élément. Fermez la balise DT et ouvrez la balise DD. Rédigez une description. Et puis plus près pour détecter. Vous pouvez y ajouter d'autres éléments. Maintenant, je l'enregistre. Nom descriptif du fichier list.html. Et laisse-moi garder ça maintenant. Maintenant, lançons-le. Donc, comme vous pouvez le voir dans la sortie ici, les deux éléments et avec une description de H. Merci d'avoir regardé cette vidéo. Dans la vidéo suivante, je vais vous parler des listes imbriquées. 17. Listes - Liste imbriquée: Bonjour à tous et bienvenue dans le cours. Dans cette vidéo, je vais vous parler des listes imbriquées. Pour cela, allez dans l'éditeur Notepad Plus Plus. Créez maintenant un nouveau fichier. Commencez par la structure de base d'une page HTML. Une fois que vous avez terminé le body tag, n'est-ce pas ? Oh, qui signifie « liste d'audit ». Je sélectionne donc la liste ordonnée comme liste parent. Je vais utiliser une liste non ordonnée pour ma sous-liste. Donc le technicien pétrolier, maintenant sous cette étiquette OL, le premier élément de votre liste de parents. Je vais donc écrire l'élément un, puis démarrer la sous-liste. Je vais utiliser UL pour ma sous-liste. Écrivez donc les éléments de la sous-liste. Je vais écrire le sous-point 1. Fermez ensuite la technologie d'éclairage, puis à droite. Sous-élément pour fermer le dernier. Vous vous occuperez également de près. Non, vous avez terminé avec la sous-liste qui se trouve sous celle-ci, vous allez étiqueter. Et vous devez également fermer le tag LI, que vous avez commencé ici au début de l'élément vous avertir, je ne veux pas le trier. Maintenant. Laissez-nous ajouter un autre élément. Pour cela, il suffit de copier cette partie et de la coller ici. Je vais le remplacer par le point deux. Et je garde le poignet comme avant. Laisse-nous enregistrer ça. Je vais le nommer en tant que point de liste imbriqué HTML. Je l'économise sur mon prochain. Maintenant enregistrez ceci et lancez-le. Comme vous pouvez le voir ici aux éléments de la liste parent, élément un et élément deux. Et dans la sous-liste, j'ai le sous-élément 12. Vous pouvez également modifier le parent et la sous-liste. Vous pouvez nous utiliser comme liste parent et OLS comme sous-liste selon votre choix. Vous pouvez donc essayer toutes les combinaisons possibles dans votre liste imbriquée. Vous pouvez également ajouter trois niveaux de liste imbriquée. Laissez-moi vous en montrer une. Pour ça. Dans le sous-élément un, je souhaite ajouter un sous-élément supplémentaire pour cela. Juste ici. Vous pouvez utiliser OLS pour votre choix. Je vais utiliser UL. Et je suis en train de définir le type. Supposons égal, puis à droite, liste, style, type. Et puis écrivez carré. Vous pouvez utiliser n'importe quel style de votre choix. Maintenant tu en as fini avec nous. Fermez donc l'étiquette UL. Et puis à l'intérieur de cela, à droite, votre ItemName. Supposons que les sous-listes deux et l'élément un. Fermez la technologie d'éclairage. Ajoutez autant d'éléments que vous le souhaitez. Encore une fois, les sous-listes de l'élément deux. Maintenant arrêtons-nous ici et sauvegardons ça. Et voyons le résultat. Comme vous pouvez le voir, il existe trois niveaux de sous-liste. La liste parente est le premier niveau de la sous-liste. Et ce deuxième niveau de sous-listes, vous pouvez en ajouter autant que vous le souhaitez. De cette façon, vous pouvez créer des listes imbriquées. Merci d'avoir regardé cette vidéo et continuez à la regarder pour en savoir plus. 18. CSS en ligne: Bonjour à tous et bienvenue au cours. Dans cette vidéo, je vais vous parler du CSS, c' est-à-dire des feuilles de style en cascade. Le CSS est utilisé pour styliser nos pages Web. Cela nous aidera à mieux concevoir nos pages Web. Dans cette vidéo, je vais vous parler du CSS en ligne. Commençons donc. Ouvrez donc l'éditeur Notepad Plus Plus, puis créez un nouveau fichier. Commençons maintenant par la structure de base d'une page HTML. Dans la partie du corps, c'est ça ? Quelques éléments. Je vais écrire H1 pour donner un titre. Supposons que ma page Web soit mon titre. Fermez maintenant la balise H1 et ajoutons un paragraphe. Bon ? C'est ma page Web. Fermez donc la balise p. Passons maintenant aux éléments. Maintenant, je veux que la couleur de mon arrière-plan soit jaune. Donc pour cela, utilisez cet attribut appelé style et écrivez background, dash, CEO, color, puis donnez deux points et écrivez n'importe quelle couleur. Je vais écrire deux jaunes ici. Vous pouvez utiliser n'importe quelle couleur. Et vous pouvez même utiliser le code hexadécimal pour définir la couleur. Maintenant, dans la balise H1, je vais écrire style. Et puis égal, puis écrivez du texte, un trait, puis deux points, et écrivez CEN DER. Cela placera le titre au centre de l'écran. Fermez maintenant la virgule inversée et dans la balise p, écrivez à nouveau le style des attributs égal à droite, couleur C-O-L-O-R. Cela vous aidera à définir la couleur du texte. Je règle la couleur du texte sur le rouge. Vous pouvez choisir n'importe quelle couleur. Maintenant, donnez un point-virgule, et je vais écrire un autre attribut de style appelé taille de police. Donc si un tiret N D est Isaac E. Nous l'avons déjà appris dans l'action du formatage de texte. Nous l'utilisons à nouveau pour vous. Donnez maintenant la taille 200. Saint. Regardez bien la virgule inversée. Et laisse-nous garder ça. Maintenant, lancez-le. Comme vous pouvez le voir, il s'agit de mon titre appelé ma page Web, qui est aligné au centre de l'écran. Et la couleur d'arrière-plan est le jaune, la couleur du paragraphe est le rouge et sa taille est de 200 pour cent. De cette façon, vous pouvez manipuler les styles selon votre choix. Cela s'appelle maintenant CSS en ligne parce que nous écrivons l' attribut de style pour chaque élément dans la même ligne de sa déclaration. Il s'agissait donc de CSS en ligne. Dans la vidéo suivante, je vais vous parler du CSS interne. Merci d'avoir regardé cette vidéo. 19. CSS interne: Bonjour à tous et bienvenue dans le cours. Dans cette vidéo, je vais vous parler du CSS interne. Commençons donc. Maintenant, ouvrez l' éditeur Notepad Plus Plus et créez un nouveau fichier. Commençons maintenant par la structure de base d'une page HTML. Maintenant, une fois que vous avez terminé dans la section du corps, à droite, quelques éléments. Je vais donc écrire H1 puis écrire ma page Web. Fermez ensuite la balise H1, puis écrivez un paragraphe. Permettez-moi donc d'écrire ceci est ma page Web. Ensuite, fermez la balise p. Nous avons donc ajouté les éléments, les titres et les paragraphes. Dans la section head, écrivez le tag Style. Et puis simultanément et attaquez. Maintenant dans la balise style. Bon ? Corps. Maintenant, ouvrez les accolades et fermez-les. Maintenant, dans cette accolade, à droite, arrière-plan, tiret, couleur C-O-L-O-R. Et donne le jaune. Vous pouvez donner n'importe quelle couleur. Maintenant, donne-nous un point-virgule. Cela va définir la couleur d'arrière-plan de la partie du corps de votre page Web sur le jaune. Maintenant, écrivez chacun d'eux. Mentionnez l'élément que vous souhaitez styliser. Puis écrivez du texte. Bonjour, Elaine. Et puis au centre droit. Et donne-nous un point-virgule. C'était notre style pour notre cap H1. Maintenant, pour le paragraphe droit P. Et puis ouvrez les accolades. Et dans l'accolade droite, couleur C-O-L-O-R. Ensuite, je vais donner le rouge comme couleur. Et puis police, taille du tiret. Puis deux points. Et je vais donner 200 %. Ensuite, donnez un point-virgule et fermez l'accolade. Maintenant, sauvegardons ce fichier. Je vais l'enregistrer sur le pas de mon pont. Donnez-lui un nom. Maintenant. Je donne du code HTML interne. Maintenant sauvegardez ceci et laissez-nous le lancer maintenant. Comme vous pouvez le voir, la couleur de fond de ma page Web est le jaune. Le titre est au centre, la couleur du paragraphe est rouge et sa taille est de 200 %. Cette page Web ressemble à la page Web que nous avions conçue dans notre vidéo CSS en ligne, dans laquelle nous avions utilisé l' attribut style pour styliser les éléments individuels. Mais ici, nous utilisons la balise style. Et dans la balise style, nous écrivons le nom de l'élément, que nous voulons mettre en forme et le style spécifique que nous voulons lui appliquer. Dans le CSS en ligne, vous devez mentionner le style de chaque paragraphe ou de chaque élément que vous utilisez. Mais ici, seule la déclaration de l'élément nommé P suffira à styliser tous les paragraphes que vous utiliserez dans la même page Web. Cela donne du CSS interne et du H sur CSS en ligne. Il s'agissait d'un aperçu du CSS interne. Merci d'avoir regardé cette vidéo. Dans la vidéo suivante, vous découvrirez le CSS externe. 20. CSS externe: Bonjour à tous et bienvenue dans le cours. Dans cette vidéo, je vais vous parler du CSS externe. Commençons donc. Maintenant, allez dans l' éditeur Notepad Plus Plus et créez un nouveau fichier. Je vais commencer par la structure de base d'une page HTML. Maintenant, une fois que vous avez terminé dans la section du corps d'un titre, je vais ajouter H1 et écrire ma page Web. Fermez la balise H1 et ajoutez un autre élément appelé P, c'est-à-dire paragraphe. Et écrivez deux paragraphes intitulés This is my website. Fermez maintenant la balise p et enregistrez ce fichier. Je vais le nommer comme HTML de point CSS externe. Maintenant, créez un nouveau dossier. Je vais le nommer HTML pratique. Vous pouvez donner le nom de votre choix. Maintenant, dans ce dossier, enregistrez ce fichier appelé CSS point HTML externe. Maintenant, créez un autre fichier. Et à l'intérieur de cela viole le code de style. Permettez-moi donc d'écrire le nom de l'élément, puis de revenir en jaune, point-virgule. Fermez l'attelle. Ensuite, écrivez le nom de l' élément, qui est H1. Et puis écrivez l' alignement du texte, le centre. Donnez un point-virgule. Ensuite, écrivez b. Et ensuite la couleur C-O-L-O-R, qui est le rouge, puis la taille de la police. Donc, en gros, je vous écris le même exemple pour que vous compreniez que quel que soit le type de CSS, ce code s'exécutera exactement de la même manière. Enregistrez maintenant ce fichier. Appelons-la feuille de style, STI Ellie, SH, WE D. Et n'oubliez pas ce point css. Maintenant, n'oubliez pas que vous devez enregistrer le fichier CSS dans le même dossier que celui que vous avez créé pour enregistrer le code HTML CSS externe. Donc, dans la pratique, HTML, qui possède le fichier HTML externe CSS point. Maintenant, dans le même dossier, nous enregistrons le CSS point de feuille de style. Maintenant, sauvegardez ça. Et revenons au CSS point HTML externe. Maintenant, dans la section de la tête, c'est ça ? Dans can link. Ensuite, HREF est égal, puis donne le nom du fichier CSS, qui est la feuille de style point css, et donne leur relation, qui est son fils. Maintenant, enregistrez ce fichier. Maintenant, lançons-le. Comme vous pouvez le voir, nous obtenons exactement le même pitch que celui que nous avons conçu en utilisant du CSS externe. Il s'agissait donc d'un aperçu du CSS externe. Il existe de nombreux styles à apprendre en CSS. Alors restez à l'écoute du cours. 21. Introduction du projet CSS: Bonjour à tous et bienvenue dans le cours. Vous devez donc vous demander pourquoi je vous montre un voyage dans l'espace. Ouais. Eh bien, vous serez élu pour savoir que ce sera votre projet et je vais vous apprendre à répéter la même chose. Vous pouvez créer cette page Web dynamique en utilisant uniquement CSS. Prenez donc un peu de temps et regardez la prochaine vidéo dans laquelle je vais vous apprendre à créer le même site Web. 22. Mise en œuvre de projet CSS: Bonjour à tous, bon retour dans le cours. À ce jour, nous avons appris beaucoup de styles CSS à l'aide desquels nous pouvons concevoir nos sites Web. Il est maintenant temps de s'amuser un peu plus. Et pour faire quelques animations en utilisant CSS. Pour cela, allez dans l' éditeur Notepad Plus Plus, puis créez un nouveau fichier. Maintenant, une fois que vous avez terminé, commencez par la structure de base d'un beat HTML. ai donc fini avec la structure de base. Et j'ai également ajouté un titre disant : « Ma répétition ». Il est temps pour nous de créer une déviation pour cela, n'est-ce pas, Dave. Puis le tag div. Maintenant, dans cette balise div, ID est égal, puis espace. Ce sera maintenant la division totale de la page Web. À l'intérieur de cet espace, nous avons besoin d'étoiles. Pour cela, créez une autre déviation et écrivez la classe sous forme d'étoiles, puis fermez la balise div. Maintenant, de même, à plus de balises div de la classe, en classe, nous allons écrire le code CSS pour ajouter étoiles pour cette unité afin ajouter de nombreuses tâches à votre écart d'espace. J'ai donc ajouté quelques colonnes, des divisions d'étoiles. J'ai besoin de créer un fichier CSS externe pour le lier à cette page HTML. Maintenant, lien droit. Et puis H ref, qui signifie référence hyperlien randonnée. Ensuite, écrivez le nom du fichier CSS que vous allez créer. Je vais donc le nommer S, star dot css. Et à droite, la relation est égale à la feuille de style. C'est pour que vous compreniez qu'il s'agit essentiellement d'une feuille de style. Voilà, c'est terminé. Enregistrez maintenant ce fichier. N'oubliez pas que vous devez créer un dossier et enregistrer les deux fichiers dans le même dossier pour cela, créer un nouveau fichier. Et Lipid Rights Peace comme nom du dossier. Ensuite, dans ce dossier, enregistrez ce fichier HTML. Donnez-lui un nom. Je vais le nommer S space dot HTML. Maintenant enregistrez ceci et créez un nouveau fichier. Maintenant, dans ce fichier, nous allons écrire notre code CSS pour cela. Commencez par le corps. Permettez-moi donc de commencer à coiffer le corps. Maintenant dans ce corps, c'est ça ? La couleur, la couleur de fond pour nous, ce sera le noir. Donc, bon fond. Ensuite, donnez le code hexadécimal pour hachage des sorcières noires triple 0. Maintenant, j'ai ajouté la famille de polices comme arbitraire. Comme vous pouvez le voir dans la vidéo gratuite le texte est sous la forme d'un style différent. C'est donc à cause de l'arbitrage. Vous pouvez donc donner ce style ou vous pouvez donner n'importe quel autre style de votre choix. J'utilise donc ce style ici. Maintenant. Je n'écris pas chaque code ligne par ligne parce que ce sera très long et ennuyeux pour vous également. Donc pour cela, j'écris le deux-points dans son ensemble et j'explique chaque ligne où je l'ai écrit. Voici donc H1, qui est pour notre cap. Et j'ai défini la position sur Absolu. Voici l'indice, c'est-à-dire cet indice. Et puis en haut à gauche, ce qui donnera la marge en fait du haut et de la gauche. Cela alignera le texte au centre essentiellement parce que nous avons donné 50 % en partant du haut et de la gauche. Et je n'étais qu'une largeur. Et c'est la couleur qui a 011. Vous pouvez le vérifier dans vos codes hexadécimaux de couleurs. Maintenant, ma taille de police est de cinq EM. Vous pouvez également le modifier. Maintenant. Le texte s'aligne à nouveau au centre et l'ombre suivante. C'est un autre attribut très spécial à l'aide de la phase, vous pouvez donner des ombres à vos textes. Voici donc Tech Shadow, et ce sont les couleurs de l'ombre que vous pouvez utiliser. Vous pouvez donc le conserver tel quel ou le modifier en fonction du code hexadécimal. J'ai écrit ici qu'il y a de l'espace puisque notre identifiant était basé sur l'écart. Vous avez donc écrit des espèces de hachage et les classes le font. Pour cela, j'ai écrit un espace de points. Rappelez-vous donc pour l'iode dans le hachage droit et pour le point indirect de classe. Maintenant, voici quelques attributs qui sont débordement et position top, bottom. Celles-ci sont essentiellement destinées à l'alignement. Il s'agit essentiellement de marges, et la position est absolue. Et voici un autre attribut appelé overflow. Et il est caché parce qu'il y avait de nombreuses étoiles. Ensuite, vous devez l' aligner et le régler sur le même écran à la fois. Cet attribut va donc nous aider à créer l'effet 3D. Maintenant, c'est un tas de choses. Laissez-moi vous expliquer un par un. Voici les étoiles à points, c'est ce que fait la division avec la classe. Ensuite, nous allons définir l'image d'arrière-plan. Dégradé radial, qui est un attribut qu'il peut utiliser pour définir le dégradé de l'arrière-plan. Et puis ce sont les valeurs RVB pour rouge, vert, bleu. Ensuite, vous pouvez donner les valeurs ici. Donc 00 signifie qu'il sera réglé sur noir. Et puis ce sont pour les étoiles que nous allons créer des régions de pixels les plus petits. Voici donc ceux-là. Maintenant, répétez l'arrière-plan. Les étoiles seront donc nombreuses et elles seront réparties sur tout l'écran. Nous devons donc le répéter. Et voici la taille de l' arrière-plan. Et puis l'animation. Retour. Alors. Ensuite, avec une animation, voici cinq secondes et en fini, comme vous pouvez le voir, les étoiles se déplacent et zooment dans l'espace. Cela nous aidera donc à obtenir cet effet. Maintenant, voici les étoiles pointillées, puis entrez enfant un. Comme vous pouvez le voir, il y a beaucoup de déviations portant le même nom que le crépuscule. Il s'agit donc essentiellement de l'enfant. Pour cela, j'ai utilisé le style. Maintenant. De même ici, vous pouvez donner la position d'arrière-plan combien ils seront cinq. Cet enfant sera donc très proche. C'est donc 50 %. Ensuite, vous pouvez voir que c'est 20 %, 60, puis il passe à négatif, est-à-dire moins 20 % et moins 30 %. Cela nous aidera donc à obtenir la boucle 3D. Maintenant que nous avions donné quatre divisions, laissez-moi vérifier. Oui, nous avions donné quatre divisions de choses. Nous avons donc utilisé pour enfant ici. Maintenant, c'est pour la fonction Zoom et son opposé est réglé sur 0. Et puis le timing de l'animation, qui est donné. Cela aidera donc essentiellement à avoir vision de ce que nous nous déplaçons dans l'espace. Donc, ce sera, la fonction somme, s' occupera essentiellement de tout cela. 0 % est pour les premiers quand nous n'avons pas zoomé. Et puis quatre-vingt-cinq pour cent quand nous avons assumé beaucoup de choses dans cette pièce, puis un 100%. Cela nous donnera donc l'effet d'entrer dans l'espace et les étoiles s' éloignent de nous. Maintenant, une fois que vous avez terminé, enregistrez ça. N'oubliez pas de l'enregistrer dans le même dossier que celui où vous avez enregistré le précédent. Maintenant, je l'ai sauvée en paix, je suppose. C'est dans mes decks que je peux utiliser mon dossier. Maintenant, sauvez-le. Vous devez donc donner le nom en tant que point étoile CSS. Non. Vérifiez que c'était star dot css. Oui. Nous en avons fini avec notre code. Maintenant. Passons à l'espace HTML point et lisons-le pour voir le résultat. Comme vous pouvez le constater, nous avons créé nos projets avec succès. Ce fond nous donne totalement le goût de voyager dans l'espace. Donc c'est vraiment cool et vous pouvez sûrement l'essayer. Accédez à votre éditeur Notepad Plus, Plus, écrivez ce code et montrez à vos amis ce que vous avez appris en CSS. Merci d'avoir regardé cette vidéo et restez connecté au cours pour en savoir plus. 23. Javascript- Introduction: Bonjour et bienvenue au cours. Laissez-nous donc vous présenter JavaScript. Alors, qu'est-ce que JavaScript et quelle en est l'utilité ? Eh bien, JavaScript est utilisé pour rendre les pages Web que vous créez interactives afin de mieux les comprendre. Prenons un exemple. Maintenant. Il s'agit essentiellement d'une page Web conçue par moi. Il s'agit d'un formulaire d'inscription. Je vais donc l' utiliser pour vous faire comprendre comment fonctionne JavaScript. Alors laisse-moi remplir tout ça. Ainsi, vous pouvez sentir le nom et définir l'ordre du jour. Maintenant, vous pouvez voir ici son mot de passe écrit. Supposons que je veuille donner un mot de passe, 1234. Maintenant, dans le mot de passe de confirmation, j'écris un mot de passe différent. J'écris 2345. Maintenant laisse-moi vérifier. Le mot de passe ne correspond pas. Encore une fois, je vais changer le mot de passe de confirmation en 1234. À nouveau, cliquez sur Vérifier. Maintenant, le mot de passe correspond. Nous le faisons donc à l'aide de JavaScript. Voici un petit exemple de l'utilité de JavaScript. Dans les prochaines vidéos, vous en apprendrez plus sur JavaScript et son utilité. Ainsi, vous serez suffisamment équipé pour rendre vos pages Web interactives. 24. Comment créer une alerte: Bonjour à tous et bienvenue dans le cours. Dans cette vidéo, je vais vous apprendre comment définir des alertes dans vos pages Web. Commençons donc. Allez maintenant dans l' éditeur Notepad Plus Plus , puis créez un nouveau fichier. Commençons maintenant par la structure de base d'une page HTML. J'en ai fini avec la structure de base, et j'ai également ajouté un paragraphe. C'est écrit mon VP8. Maintenant, dans le body tag, c'est ça ? On, load ON ou AD on load est égal. Démarrez ensuite votre virgule inversée et écrivez e o t, qui est alert. Puis donnez un texte à l'intérieur. Supposons, soyez les bienvenus Fermez ensuite le crochet, mettez-nous un point-virgule et fermez les virgules inversées. Enregistrez maintenant ce fichier. Je vais l'enregistrer sur mes affaires de pont. Alors laisse-moi le nommer. Point d'alerte HTML. Sauve ça. Laisse-nous le gérer. Comme vous pouvez le voir, cette boîte d'alerte qui indique Bienvenue. Et il est livré avec le bouton OK par défaut. Cliquez maintenant sur OK, et vous n'arriverez jamais à votre page. Ce jeu de boîte d'alerte, dès que nous le naviguons vers notre page Web parce que nous l'avions utilisé en chargement, grâce auquel la lumière s'allume dès que la page se charge, il existe un autre moyen de déclarer un chargement en utilisant la fonction JavaScript pour cela dans la section head, n'est-ce pas ? Le script. Quoi que vous écriviez dans la balise de script, il s'agit essentiellement de votre code JavaScript. Donc Endo script tag et maintenant écrire une fonction si UNC, T-I-O-N fonction, et donnez-lui un nom. Supposons mon alerte. Maintenant, donnez des places. Commencez les accolades terminées et dans la section des accolades, non ? En alerte IoT. Et puis ton message qui dit « Bienvenue ». Ensuite, donnez un point-virgule. Maintenant, au lieu d' écrire la fonction, écrivez simplement mon alerte et donnez un point-virgule. Maintenant, sauvegardons ceci et voyons ce qui est produit. De même, voici la boîte d'alerte. C'est écrit « Bienvenue ». Tout était question d'alerte. Dans la vidéo suivante, vous allez apprendre à écrire votre fonction d'invite. Restez donc à l'écoute du cours et continuez à apprendre. 25. Comment créer une invite: Bonjour et bienvenue à nouveau dans le cours. Dans cette vidéo, je vais vous parler des invites. Alors, sans plus tarder, commençons. Allez maintenant dans l' éditeur Notepad Plus Plus , puis créez un nouveau fichier. Commençons maintenant par la structure de base d'une page HTML. ai donc fini avec la structure de base. Et j'ai également ajouté un paragraphe que nous voyons est ma page Web. Maintenant, dans la section head, écrivons le tag appelé script et fermons simultanément le tag. À présent, dans la balise de script, écrivez la fonction et donnez-lui un nom de fonction. Supposons que mon invite, puis démarre l'accolade et écris V-A-R. Var signifie variable en JavaScript, c'est un mot clé pour déclarer une variable. Mon nom de variable est name, puis donne égal, puis invite. Fondamentalement, prompt prend une entrée de l'utilisateur. Nous utilisons donc une variable qui enregistrera l'entrée que l'utilisateur donnera. Maintenant, au sein d'eux, posons une question à l'utilisateur. So Booze, quel est ton nom ? Et maintenant, affichons le nom à l'utilisateur. Donc pour ce droit, alerte. Alors, bon, bienvenue. Concaténez la ficelle et affinez. Donnez un point-virgule et une accolade. Maintenant, dans la section du corps, à droite sur la charge est égale. Ensuite, dans les couches inversées, écrivez le nom de votre fonction, qui est mon invite. Donnez un point-virgule. Maintenant, sauvegardons ce fichier. Je vais l'enregistrer sur mes platines pour donner un nom de fichier. Supposons que l'invite HTML point, puis enregistrez ceci. Maintenant, allons voir le résultat. Comme vous pouvez le voir, voici la boîte de dialogue qui indique Quel est votre nom. Donc juste pour le nommer ici. Ensuite, cliquez sur OK. Il s'agit donc de la boîte d'alerte qui indique Bienvenue et votre nom. Donc, en gros, invite est de prendre une entrée de l' utilisateur en utilisant JavaScript. Et l'alerte est d'afficher n'importe quel message aléatoire à l'utilisateur. Dans ce cas d'alerte, l'utilisateur ne peut pas entrer de données. Il peut simplement voir le message qui s'affiche. Merci d'avoir regardé cette vidéo, les gars, restez à l'écoute de ce cours pour en savoir plus sur façon d'implémenter différentes fonctions en JavaScript. 26. Comment mettre en œuvre: Bonjour à tous et bienvenue dans le cours. Dans cette vidéo, je vais vous apprendre comment confirmer. Commençons donc. Allez maintenant dans Notepad Plus, Plus editor depuis l'écran, puis créez un nouveau fichier. Commencez par la structure de base d'une page HTML. Maintenant dans la section head, écrivez le tag appelé script et terminez simultanément. Maintenant, dans la balise de script, écrivez une fonction appelée my confirm. Puisque nous allons apprendre à confirmer, vous pouvez donner n'importe quel nom à votre fonction. Maintenant. Commencez votre accolade et à l'intérieur, à droite, variable. Supposons que c est égal à conforme. Et écrivez l'équation. Supposons que vous aimiez mon rythme faible ? Fermez maintenant le crochet, donnez un point-virgule. Cette variable c va donc prendre le feedback de l' utilisateur, qu'il va, il donnera par le biais de cette confirmation et vérifiera ensuite quelle est la saisie donnée par l'utilisateur en écrivant, si c est égal, est égal à vrai, puis donnez un message par alerte en disant, merci. Et si le feedback est faux, alors c'est vrai. Ensuite, lancez une alerte en disant, désolé pour le désagrément. Et puis fermez le crochet, le point-virgule, fermez l'accolade des L ainsi que fermez l'accolade de la fonction de confirmation du micro. Et puis dans l'étiquette du corps, à droite, la charge est égale. Et puis le nom de votre fonction, qui est ma conformité. Ensuite, donnez un point-virgule et un code inversé plus proche. C'est fini. Nous allons maintenant enregistrer ce fichier. Sauvegardez-le, donnez-lui un nom. Supposons que vous puissiez former du HTML point et l'enregistrer. Maintenant, lançons-le. Donc, les bases vous plaisent sur ma page web et disent OK, puis merci. Alors laisse-moi recharger ça. Que se passe-t-il si nous disons non, annulez. Annuler. Et puis il est écrit « désolé pour le désagrément ». Ainsi, vous pouvez afficher un message à l'utilisateur et prendre une entrée valide comme retour d'information de sa part. Merci d'avoir regardé cette vidéo. Restez à l'écoute du cours. voit la prochaine fois. 27. Mise en œuvre externe de Javascript: Bonjour à tous et bienvenue dans le cours. Dans cette vidéo, je vais vous parler du JS externe. Nous allons donc écrire le code JavaScript dans un autre fichier, puis le lier au fichier HTML d'origine. Commençons donc. Allez maintenant dans l' éditeur Notepad Plus Plus , puis créez un nouveau fichier. Commençons maintenant par la structure de base d'une page HTML. Une fois que vous avez terminé avec la structure de base, allez dans la section head et écrivez le script. Fermez ensuite simultanément la balise de script. Maintenant, dans le script, utilisez l'attribut SRC, qui signifie source. Puisque nous allons lier un fichier externe à ce fichier HTML, vous devez donc donner le nom de ce fichier externe. Je vais donner le nom de ce fichier en tant que point externe. Maintenant, dans la section body, vous devez donner le nom de la fonction que vous allez écrire dans le fichier externe dot js. Alors laisse-moi l'écrire. Très bien, onload est égal et donne le nom de la fonction. Supposons que vous Ensuite, mettez un point-virgule et fermez les courts. Nous avons donc terminé maintenant, sauvegardons ce fichier. N'oubliez pas que vous devez enregistrer ce fichier dans le dossier où nous allons enregistrer le fichier appelé external dot js. Créons donc un nouvel index de dossiers pour donner un nom. Supposons HTML. Maintenant, allez dans ce dossier et enregistrez votre fichier, avec son nom. Supposons que le js point HTML externe. Enregistrez maintenant ce fichier. C'est fait. Maintenant. Créez un autre fichier, n'est-ce pas ? Fonction. Et donnez le nom de la fonction similaire au nom que nous avions écrit dans la section du corps. Voyons donc que nous avions écrit que le nom de la fonction est amusant. Alors c'est vrai, amusant. Et puis lancez l'accolade. Et dans cette section, écrire le point droit du document. Cela affichera essentiellement un message à l'écran lui-même. Donnons donc n'importe quel texte. Supposons que vous soyez les bienvenus sur ma Donnez un point-virgule, fermez l'accolade. Maintenant, enregistrez ce fichier dans le même dossier que celui que nous avions enregistré en HTML de points GAS externes. Donnez à ce fichier un nom de fichier externe. point j l'est, puisqu'il s'agit d'un fichier JavaScript. Alors, dos-nous. Maintenant, voyez que nous avions donné la source en tant que point externe js ici. Il s'agit donc de notre fichier JS de nœud externe. Donc, cela va essentiellement le relier. Maintenant, lançons-le à partir d'ici et voyons quelle est la sortie. Comme vous pouvez le voir ici, c'est écrit, bienvenue sur ma page web. Mais nous n'avons utilisé aucun paragraphe ici pour écrire cela. Bienvenue. Donc, fondamentalement , il prend cela à partir de points externes js. Ainsi, vous pouvez écrire votre code JavaScript dans un fichier séparé, puis le lier à votre fichier HTML principal. Merci d'avoir regardé cette vidéo et restez à l'écoute de la côte pour en savoir plus. 28. Introduction du projet de jeu de numéro de Javascript: Bonjour à tous, bon retour dans le cours. Donc, après avoir appris le JavaScript, nous devons faire un projet dessus. Puisque le simple fait d'apprendre certains codes ne vous aidera pas à moins de les mettre en action. J'espère donc que vous connaissez tous la taxe et les codes de JavaScript. Le projet que nous allons réaliser est donc un jeu de nombres. Laissez-moi vous montrer comment cela fonctionne. Nous sommes dirigés vers notre pêche au gibier. Et puis il indique que l'ordinateur a choisi un nombre compris entre 1200 et essaie de le deviner. Alors laisse-moi trouver un chiffre entre 1100, je suppose 65. Il indique que le nombre est plus grand, donc je dois entrer un nombre plus petit. Supposons que pour T. Et puis c'est écrit « plus grand ». Laisse-moi t'en donner 20. Elle est plus petite. C'est donc entre 21 h 39. Alors laisse-moi t'en donner 30. Oui, j'ai eu la bonne réponse en matière de focus. Alors, n'est-ce pas cool ? Dans la vidéo suivante, vous allez apprendre à coder ce jeu. 29. Mise en œuvre de projet de jeu de Javascript: Bonjour à tous et bienvenue dans le cours. Dans cette vidéo, nous allons réaliser un projet basé sur nos apprentissages sur JavaScript. Dans cette vidéo, je vais essentiellement créer un jeu. Oui, tu l'as bien entendu ? Et je vais créer ce jeu en utilisant des codes JavaScript. Cette vidéo va donc être un peu plus longue. C'est donc mieux. Vous avez le temps de vous asseoir et d'apprendre à créer le projet JavaScript. Allez maintenant dans l' éditeur Notepad Plus Plus , puis créez un nouveau fichier. Commençons maintenant par la structure de base d'une page HTML. ai donc fini avec la structure de base. Le titre de ma page Web est Jeu de nombres. Maintenant, laissez-moi écrire le tag appelé script et le fermer simultanément. Ainsi, dans la balise de script, nous allons écrire le code JavaScript de notre jeu, comme vous l'avez vu dans la vidéo précédente. Dans ce jeu, l'ordinateur sélectionne un nombre compris entre 1100 et l'utilisateur doit deviner quel numéro il a sélectionné. Maintenant, l'utilisateur donnera une entrée et l' ordinateur répondra moins que s'il est plus petit ou plus grand que le nombre qu' il a sélectionné. De cette façon, il trouvera dans combien de cas l'utilisateur donne la bonne réponse. Pour cela, nous devons déclarer certaines variables. Déclarer une variable appelée target et une autre variable appelée target one. Lancez maintenant la fonction de votre jeu. Donc je donne le nom « jeu ». Ensuite, ouvrez et fermez l'accolade. Maintenant dans cette fonction, à droite, cible est égale au point mathématique aléatoire sur 200. Ce que j'ai fait est que ce point mathématique aléatoire est une fonction inverse en JavaScript qui renvoie une valeur comprise entre 01, puisque nous voulons que l'ordinateur choisisse un nombre compris entre 1 et 100. Nous multiplions donc les centaines d'années. Ainsi, dans cette cible, l'ordinateur stockera la valeur qu'il a sélectionnée. Maintenant, cette valeur cible, si Math.random renvoie 0, elle devient 0. Donc nous n'avons tout simplement pas souhaité puisque nous choisissons un à 100. Donc pour cela, nous devons en faire un plus ici. Alors c'est vrai, obtiens un égal en maths. Mais coulez. Donnez ensuite l'argument target, puis écrivez plus un. Je vous suggère de bien comprendre chacune d'elles, à chaque étape, puisqu'il ne s'agit pas de conception, mais simplement de programmation. Maintenant, une fois que l'ordinateur a choisi un nombre dans cette variable cible, demandons maintenant à l'utilisateur que nous avons choisi un nombre compris entre 1 et 200. Je suppose que ce nombre a déclaré une variable appelée finished, qui sera une variable booléenne. Je vais donc écrire faux. Cela indiquera donc essentiellement si l'utilisateur a deviné la bonne réponse ou non. Si cette variable terminée devient vraie, alors l'utilisateur a obtenu la bonne réponse. Donc d'ici là, nous devons augmenter le compteur maintenant, non ? C'est vrai. Alors ce n'est pas fini. Ainsi, même si la variable finie n'est pas vraie, elle continuera à exécuter cette boucle. Maintenant, pendant un certain temps, vous devez prendre la saisie de l'utilisateur. Pour cela, nous devons prendre une autre variable. Supposons que vous devinez la saisie du trait de soulignement, puis écrivez Et puis entrée variable. Je vais vous expliquer pourquoi j'ai pris deux variables pour prendre en compte les entrées de l'utilisateur d'une manière ou d'une autre. Alors attends ce moment. Maintenant, juste ici. Devinez que le texte d'entrée est égal, puis écrivez une invite. Et à l'intérieur, écrivez le message que vous souhaitez montrer à l'utilisateur. Alors écrivez l'ordinateur, a choisi le nombre entre 100 et puis écrivez, essayez. Pour deviner le chiffre. C'est donc le message que vous allez montrer à votre utilisateur. Nous savons maintenant que cette invite reçoit une entrée de l'utilisateur. L'entrée va essentiellement être enregistrée dans le texte d'entrée de gaz. Maintenant, cette entrée sera sous la forme d'une chaîne, mais nous avons besoin d'un nombre comme entrée. Pour cela, nous devons convertir cette chaîne en nombre. C'est pourquoi j'ai pris deux variables, oublie l'entrée. Maintenant, c'est ça ? Devinez input equals then parse int plus n est une fonction qui aidera à convertir cette chaîne en entier. Maintenant, juste dans l'argument obtient le texte d'entrée, qui est la chaîne souhaitée. Maintenant, une fois que l'utilisateur saisit son entrée, nous devons incrémenter l'estimation. Pour ça. Prenez une variable appelée devinettes. Initialisez-le à 0. Maintenant, dès que l'utilisateur entre dans les invités, valeur incrémentée devine, Désolé. Ouaip. Que se passe-t-il maintenant si l'utilisateur ne saisit aucune valeur ? Donc pour ça, le programme ou le jeu se terminera pour ça, non ? Si ce n'est pas le cas, alors pour la résiliation, vous devez rendre l'échec terminé comme vrai. Sa finition en ferrite est égale à vraie. C'était donc pour une entrée nulle de la part de l'utilisateur. Si l'utilisateur donne une entrée valide, écrivez else. Ensuite, ouvrez l'accolade. Et à l'intérieur de cela, le bon fini est égal, puis écrivez check. Nous allons donc écrire une fonction appelée check, qui vérifiera l' entrée si elle est plus grande ou plus petite ou si elle est hors de portée du nombre choisi par l'ordinateur. Écrivez donc guest input en tant qu' argument, puis donnez un point-virgule. Donc, cette fonction de vérification retournera vrai ou faux, c'est-à-dire un type écrit booléen à ce phi terminé. Si l'utilisateur nous donne la bonne réponse, elle retournera vrai, sinon faux. Commençons donc la fonction appelée check. Maintenant, nous devons déclarer un argument ici afin d'accepter cette valeur d'entrée de cas. Maintenant, c'est vrai, l' Eichmann a appelé « devinez ». Nous devons maintenant déclarer cette variable. Définissons donc la variable globale. Maintenant, écrivez la variable appelée guess no dans cette fonction, vérifiez, donnez la condition. La première condition serait que le nombre soit inférieur au nombre souhaité, n'est-ce pas ? Si vous devez deviner moins que la cible un, puisque le nombre choisi par l'ordinateur est enregistré dans la cible 1. Maintenant, si l'estimation est inférieure à la cible, alors nous devons afficher un message à l'utilisateur. Alors entre guillemets, non ? Alerte. Et puis écris. Le nombre est plus petit. Puis retournez false car l'utilisateur n'a pas pu deviner la bonne réponse. Non. Si le nombre est plus élevé. Donc pour cela, copiez cette partie if, et collez-la à droite. Si le nombre d'invités est supérieur au nombre, écrivez que le nombre est plus grand, puis renvoyez faux. Que se passe-t-il maintenant si le numéro n'est pas un chiffre ? Cela signifie que si l'utilisateur donne une entrée qui est un alphabet. Maintenant, c'est ça ? Si à l'intérieur de la parenthèse, à droite, est, puis N est N. N signifie n'est pas un nombre. C'est donc une fonction de JavaScript qui renvoie true si ce n'est pas un malaise et false s'il s'agit d'un nombre. Écrivez votre supposition, guérissez. Il analysera donc si deviner est un nombre ou non. Donc, s'il s'agit d'un nombre, alors il n' entrera pas dans cela. Si et si ce n'est pas un nombre, alors il exécutera le code écrit dans cette section if. Donc, étant donné une alerte et droit, S'il vous plaît entrer un numéro valide. Non, renvoie faux. Maintenant, ils peuvent être une autre condition que si le nombre est inférieur à un ou supérieur à 100. Pour ça, non ? Si et puis devinez moins d'un. R. Donc r est donné à l'aide de ces symboles. Si vous êtes un programme à part entière où vous pouvez très bien le comprendre. Sinon, ces symboles peuvent être obtenus à partir de votre clavier, qui sera disponible au-dessus de la touche Entrée. Maintenant, c'est ça ? Supposons que c'est plus que 100. Cela va donc s'occuper des entrées de la frange extérieure. Maintenant, dans cette section, en cas d'alerte, utilisez-vous cette frange extérieure ? Maintenant, retournez false. Donc toutes les conditions d' être faux et pris en charge. Donc, si aucune des conditions n'est vraie, vous pouvez envoyer directement. Donc pour cette alerte, c'est ça ? Oui. Vous avez saisi la bonne réponse. Ensuite, vous devez mentionner le nombre de cas. C'est tellement vrai. Dans. Et puis concaténez mes suppositions d'écriture. Je suppose que vous avez le nombre d'invités que l'utilisateur a créés. Maintenant, c'est beaucoup de suppositions. Fermez donc l'alerte, puis retournez vrai. Cela mettra donc fin la boucle while du jeu de fonctions. Nous avons fini d'écrire le code de notre jeu. Maintenant, nous devons charger ce jeu pour cela ou pour body et écrire onload equals , puis écrire le jeu. Puisque le nom de la fonction est Kim. Maintenant, sauvegardez ça. C'est un peu sur ton deck. Je vais écrire g est jeu avec l' extension du point HTML. Maintenant, sauvegardez ceci et laissez-nous l' exécuter et voir le résultat. Il indique que l'ordinateur a choisi un numéro. Laissez-moi écrire le chiffre, supposons 50. Le nombre est donc plus élevé. Permettez-moi d'écrire Vingt-cinq. Le nombre est également faible. Alors laisse-moi en écrire dix. Il est plus petit, donc il se situe entre 11 h 24. Alors laisse-moi t'en donner 20. Il est également plus grand. Donc 15, plus petit. Alors donne-moi de l'aide. Il est également plus grand. C'est donc entre 1617. Donc oui, le chiffre était 16 et je l'ai eu dans sept cas. Merci d'avoir regardé cette vidéo et restez connecté à ce cours pour en savoir plus. 30. Extra : Comment rester motivé tout en apprenant: Salut les gars. J'espère que vous appréciez ce cours jusqu'à présent. L'apprentissage d'une nouvelle compétence est vraiment génial, mais le processus est un peu difficile. Comment pouvons-nous rester motivés par l'apprentissage ? Voici quelques conseils pour vous. Tout d'abord, il est très important de se fixer un objectif, car cela vous aide à vous concentrer lorsque vous êtes distrait, pour vous remettre sur la bonne voie. Quand tout le monde ne fait que danser, que faut-il apprendre, non ? C'est le programme dont vous avez besoin pour compléter ceci et cela, mais personne ne nous dit comment apprendre lorsque l'apprentissage est un processus, pensez à vous familiariser avec vos bases et inscrire à un cours pour suivre votre apprentissage. Troisièmement, la constance et la persévérance sont la clé du succès. Il apprend le droit, mais il apprend tous les jours. Divisez la tâche en parties plus petites afin de pouvoir les réaliser facilement. partie la plus importante de l'apprentissage est de faire des pauses. Prendre une pause rafraîchit notre esprit, ce qui dans notre parcours d'apprentissage. Ensuite, vous devez vous entourer de personnes ayant des intérêts similaires et rejoindre une communauté qui vous aidera à progresser dans votre parcours d'apprentissage. Enfin et surtout, croyez en vos capacités. Souvenez-vous toujours. Tu peux le faire. 31. Introduction aux formulaires HTML: Bonjour à tous et bienvenue dans le cours. Dans cette section, je vais vous parler des entreprises. Avant de créer des formulaires en HTML, voyons ce qu'est un formulaire. Commençons dès maintenant depuis votre ordinateur, ouvrez un navigateur Web. Je vais ouvrir Google Chrome ici. Allez maintenant sur facebook.com. Comme vous pouvez le voir ici, il existe une section intitulée Créer un nouveau compte, où vous pouvez saisir votre nom, votre nom utilisateur, votre numéro de téléphone portable ou votre adresse e-mail. Vous pouvez définir un mot de passe et vous pouvez également vous donner un anniversaire, ainsi que définir votre sexe , puis créer un compte. Il s'agit donc essentiellement d'un formulaire à l'aide duquel vous pouvez créer un compte sur facebook.com. Il s'agit donc essentiellement d'un formulaire simple que vous pouvez concevoir. Dans cette section, je vais vous apprendre à concevoir entreprises avec des attributs et des caractéristiques variés. Continuez donc à apprendre et restez à l'écoute du cours. 32. Comment ajouter un champ texte: Accédez à l' éditeur Notepad Plus Plus , puis créez un nouveau fichier. Commençons par la structure de base d'une page HTML. Maintenant, à l'intérieur de la section du corps, commencez par une balise appelée form et terminez simultanément. Donc, tout ce que vous écrivez dans cette balise de formulaire sera le code de votre formulaire. Non, je vais commencer par le nom de ce niveau. Et juste dans le nom de l'AME, puis niveau plus proche. Ensuite, le type d'entrée d'écriture est égal au texte, puis fermez l'attaque. Cette balise de saisie vous aidera donc à définir le type de texte ou le numéro de type que vous souhaitez accepter de la part de l'utilisateur en tant que saisie. Nous voulons donc prendre name comme entrée de l'utilisateur. Nous avons donc défini le type de saisie text. Maintenant, il existe certains attributs de cette balise d'entrée appelés autofocus. L'autofocus donnera essentiellement une mise au point, mise au point supplémentaire à votre entrée. Et puis obligatoire. L'écriture requise rendra votre film monétaire. Et si l'utilisateur ignore le champ, le message s'assurera qu' il s'agit d'un champ obligatoire. Il existe maintenant un autre attribut appelé ID. Vous pouvez ignorer cela, je vais lui donner cet ID qui nous aidera essentiellement à écrire du code CSS pour ce type d'entrée. Je l'utilise donc ici. Maintenant, sauvegardons ça. Je l'enregistre sur mes platines pour lui donner un nom, supposons un point de forme HTML et enregistrez-le. Et maintenant, lançons-le. Comme vous pouvez le voir, voici le nom de l'étiquette. Vous pouvez donc écrire votre nom ici. Oui, comme ça. Et si vous n'écrivez rien, alors il est dit, s'il vous plaît, remplissez ce champ. Maintenant, pour faire comprendre à l'utilisateur qu'il s' agit d'une sorte de formulaire, donnons un titre H1, sauvegardons le formulaire d'inscription, puis fermons la balise H1. Maintenant, sauvegardons ça. Revenez maintenant à un navigateur Web et rechargez-le. Donc, comme vous pouvez le voir, voici mon tag H1 avec disons, formulaire d'inscription. Et voici mon nom libéral avec le texte du type d'entrée. Vous savez maintenant comment prononcer le champ du nom dans votre entreprise. Alors revenez et essayez-le vous-même. 33. Comment ajouter le champ Mot de passe ****: Ajoutez maintenant un autre mot de passe libéral et droit, étiquette de syllabe fermée. Et puis écrivez le type d'entrée égal et puis mot de passe droit. Et vous pouvez également utiliser les attributs appelés autofocus et requis. Identifiant également donné. Supposons qu'il passe Maintenant, sauvegardons-le et exécutons-le. Comme vous pouvez le voir, est-ce mon formulaire d'inscription avec un nom et un mot de passe ? Maintenant, afin de changer ce mot de passe en dessous, à savoir, écrivons maintenant ici après le texte de type d'entrée, à droite, BR. Br vous aidera à obtenir ce mot de passe lipidique à la prochaine ligne. Maintenant enregistrez ceci et lancez-le. Comme vous pouvez le voir, le mot de passe est juste en dessous de midi. Encore une fois, vous pouvez également donner une autre bière. Cela ajoutera donc une autre ligne d'espace. Maintenant sauvegardez ceci et laissez-nous le relancer. Comme vous pouvez le voir, le mot de passe est bien en dessous du nom. Ainsi, vous pouvez modifier le format dès maintenant lorsque vous écrivez un mot de passe. Comme vous pouvez le voir, il prend la forme d'une étoile. Vous ne pouvez pas voir votre mot de passe, mais pour le nom, vous pouvez voir ce que vous écrivez. Alors maintenant, revenez et essayez-le vous-même. 34. Comment ajouter un champ d'e-mail: Dans cette vidéo, je vais vous apprendre comment définir le type de saisie sur e-mail. Pour cela, commencez par la bière. Pour définir l'e-mail en dessous du niveau de mot de passe. Maintenant, au bon niveau. Puis écrivez un e-mail. Fermez maintenant la balise d'étiquette. Et le type d'entrée droit. Ensuite, écrivez égal. Et dans ce bon e-mail. Non, vous pouvez également écrire l'attribut appelé required et donner un ID. Maintenant, sauvegardons ça. Maintenant, lançons-le. Comme vous pouvez le voir, voici mon image de la chose. Maintenant, droit à l'e-mail. Toi. Maintenant, retournez voir votre éditeur et essayez ceci. 35. Comment ajouter un champ numérique: Dans cette vidéo, vous allez en savoir plus sur le numéro de type d'entrée. Pour ça, non ? Br. Ensuite, commencez par écrire le Lieber. Ensuite, écrivez supposons le numéro de téléphone. Nous pouvons utiliser le type de saisie numérique pour le numéro de téléphone huit, etc. Fermez donc la balise de niveau. Maintenant, à droite, le type d'entrée est égal à nombre, puis donnez un identifiant. Maintenant, sauvegardons-le et exécutons-le. Voici donc mon emplacement pour numéro de téléphone. Nous pouvons donc écrire deux numéros de téléphone comme celui-ci. Maintenant, vous pouvez également essayer d' écrire un peu. Cependant, vous appuyez sur l'alphabet qu'il ne soit pas affiché ici. Vous pouvez l'essayer et voir aucun texte ne sera accepté dans cet emplacement. Retournez maintenant dans votre éditeur et laissez-nous essayer un autre niveau appelé H. H, puis fermez le niveau. Pas de droit, le type d'entrée est égal à un nombre. Ici, vous pouvez également définir l'âge minimum et maximum auquel vous souhaitez recevoir les informations de l'utilisateur. Permettez-moi donc de fixer l' âge minimum à 18 ans et le maximum à 60 ans. L'utilisateur ne peut donc pas entrer un âge inférieur ou supérieur à 60 ans. Maintenant, vous pouvez également utiliser l' attribut appelé step. Cela va essentiellement définir la plage d'incréments. Je vais donc le régler sur un. Maintenant que vous avez donné un identifiant à cela, supposons H, puis enregistrez ceci. Et laissez-nous le gérer. Voici mon huitième créneau. Maintenant, ici, supposons que 18 sache que lorsque nous incrémentons ceci, vous pouvez voir qu'il augmente d'un. Il est donc en train de décrémenter d'une unité. Maintenant, vous pouvez également définir une valeur par défaut pour votre tranche d'âge. Pour ça, juste ici. La valeur est égale, disons deux à 18. Maintenant, sauvegardez ça. En cours d'exécution. Comme vous pouvez voir la différence. Comme vous pouvez le voir, la valeur par défaut est de 18 ans. De cette façon, vous pouvez manipuler vos types d'entrée. Maintenant, retournez rapidement à votre éditeur et essayez-le. 36. Comment ajouter un Placeholder: Dans cette vidéo, nous allons donc en apprendre davantage sur les espaces réservés. espace réservé est un autre attribut de l'entrée qui vous permet d'écrire quelque chose dans le slot d'entrée. Laissez-moi vous en montrer une. Juste ici. espace réservé est égal à, puis écrivez un message intitulé Entrez votre nom. Maintenant, sauvegardez ça. Et voyons le résultat. Comme vous pouvez le voir, voici un texte appelé entrez votre nom. Dès que vous écrivez quelque chose ici, il disparaît. De même, vous pouvez définir des espaces réservés pour d'autres emplacements, comme le mot de passe, etc. Faites-le vous-même et vérifiez ceci. 37. Comment ajouter le champ Date: Maintenant, pour ajouter une date de type d'entrée, vous devez commencer un nouveau niveau. Alors, à droite, date de naissance. Ensuite, dans la balise de niveau. Et puis écrivez une entrée. Tapez ensuite égal, puis date. Identifiant donné. Supposons une date. Maintenant, n'oubliez pas ce BR, sinon il sera dans la même ligne. Permettez-moi donc de donner deux taxes sur la bière afin de l'aligner. Maintenant, sauvegardez ça. Maintenant, exécutons-le et voyons le résultat. Comme vous pouvez le voir, voici mon créneau horaire. Maintenant, vous pouvez cliquer ici et choisir n'importe quelle date. Cela vous donne donc un calendrier. Vous devez ajouter des dates manuellement. Vous pouvez le sélectionner directement dans votre calendrier. Maintenant, retournez voir votre éditeur et essayez ceci. 38. Comment ajouter un champ de temps: Maintenant, pour ajouter un créneau horaire, ici, nous sommes pour l'alignement, puis la bonne étiquette. Supposons que nous écrivions l'heure. Vous pouvez choisir n'importe quel créneau de votre choix. Je vais choisir plus de temps. Maintenant dans la balise de niveau. Lancez maintenant l'onglet Saisie. Et le bon type est égal. Alors c'est le bon moment. Maintenant qu'on les identifie, c'est fini. Maintenant, sauvegardons ça. Et allons voir le résultat. Comme vous pouvez le voir, voici le créneau horaire. Vous pouvez donc nous donner plus de minutes. Écrivons deux, puis quarante-cinq, puis 00. Donnez une vue morphème. Vous pouvez changer à l'aide de ces flèches. Vous pouvez également modifier la date à l'aide de cette flèche. C'est donc tout pour le temps. Maintenant, retournez en arrière et essayez cela dans votre idem. 39. Comment ajouter un champ d'entrée couleur: Dans cette vidéo, vous allez maintenant apprendre à compresser la couleur comme type de saisie pour ce genou droit. Ensuite, commencez par l'étiquette. Maintenant, j'écris ma couleur préférée. Maintenant, indélébile. Tu sais bien ? type d'entrée est égal à la couleur C-O-L-O-R. Puis on lui a donné un identifiant. Fermez-le et enregistrez ce fichier. Maintenant, nous allons voir le résultat. Donc, comme vous pouvez le voir ici, la fente de couleur YouTube. Maintenant, lorsque vous cliquez dessus, vous pouvez choisir la couleur de votre choix. Vous pouvez même personnaliser la couleur. Utilisation de cet onglet de couleur. Sélectionnez une couleur et cliquez sur OK, et votre couleur est sélectionnée. Ainsi, vous pouvez sélectionner votre couleur préférée. Maintenant, retournez rapidement à votre éditeur et essayez-le. 40. Comment ajouter des boutons radio: Maintenant, pour définir le bouton radio dans votre formulaire, vous devez commencer par BR et écrire un niveau. Le bon sexe. Maintenant dans le foie. Maintenant, non ? Le type d'entrée est alors égal, puis écrit l'accord commercial. Et puis donnez la valeur égale à masculine. Alors juste ici, le repas. Ensuite, dans la ligne suivante, c'est ça ? type d'entrée est égal, puis écrivez radio et donnez la valeur qui est femelle. Non, fermez-le et écrivez à votre femme. Maintenant, lorsque vous appuyez sur le bouton radio, vous pouvez sélectionner l'un ou l'autre de ces deux, mâle ou femelle. Une personne ne peut pas être un homme et une femme ensemble. Donc pour cela, vous devez donner un nom, un attribut, dit le sexe. Et de même ici, écrivez également le nom, puis le sexe. Maintenant sauvegardez ceci et laissez-nous le lancer. Voici notre agenda. Et vous pouvez sélectionner un homme ou une femme. Vous ne pouvez pas sélectionner les deux simultanément, car nous avons utilisé l'attribut name et donné le même nom aux deux boutons radio. Maintenant, retournez voir votre éditeur et commencez à essayer ceci. 41. Comment ajouter la case à cocher: Maintenant, je vais commencer par écrire BR, puis écrire labor. Et écrivez des langues. Tu sais. Fermez ensuite l'étiquette, puis écrivez le type d'entrée égal. Alors nous n'avons pas bien cité, case à cocher. Et puis écrivez name equal items. Ce nom nous aidera à comprendre qu'il appartient au même nom d'élément de catégorie. Et puis donnez une valeur égale à l'anglais. Et puis écrivez en anglais. Et puis donnez BR. Et encore une fois, non ? Entrée. Tapez ensuite, puis égal, puis de nouveau la case à cocher. Et puis donnez-moi des noms seraient les mêmes objets. Ensuite, donnez une valeur. Supposons espagnol. Et puis écris l'espagnol. Donnez BR. Vous pouvez ajouter autant de cases à cocher que vous le souhaitez. Je vais donc ajouter trois cases à cocher ici. Alors case à cocher droite. Et donnez le nom en tant qu'objets. Ensuite, donnez la valeur de mettre le français en pause, puis écrivez le français et donnez un BR. Maintenant, c'est fini. Maintenant, sauvegardons ce fichier et exécutons-le. Comme vous pouvez le voir, les langues, vous savez, l'anglais, espagnol, le français, vous pouvez toutes les prendre, ne sont que l'une d'entre elles. Donc, contrairement au bouton radio dans la case à cocher, vous pouvez sélectionner plusieurs données. Maintenant, retournez rapidement votre éditeur et commencez à essayer ce code. 42. Comment ajouter une liste déroulante: Pour ajouter une liste déroulante, commencez par écrire le niveau. Et puis le bon pays. Alors indélébile. Ensuite, donnez un BR. Non, utilisez un tag appelé Select. Donnez-lui un nom. Supposons pays. Et maintenant, lancez les options. Bonne option. Et puis la bonne valeur est égale à Supposons Inde, puis écrivez dans le texte Inde. Puis option int. Maintenant donné l'adoption, donnez la valeur supposons États-Unis, puis écrivez dans le texte. Et puis encore dans l'option. Vous pouvez proposer autant d'options que vous le souhaitez. Maintenant, laissez-moi vous donner une autre option. Il n'est donc pas nécessaire de tout réécrire. Il suffit de copier cette partie. Cliquez avec le bouton droit, puis copiez-le, puis collez-le. Maintenant dit le pays à la France. Et écrivez en mots France. Vous pouvez donc proposer autant d'options que vous le souhaitez. Je ne propose que trois options. Vous pouvez également essayer d'autres pays. Maintenant, terminez la balise de sélection. Enregistrez maintenant ce fichier. Laisse-nous courir et voir le résultat. Comme vous pouvez le voir, voici mon pays. Ainsi, lorsque vous cliquez sur la liste déroulante, vous pouvez voir les éléments que nous avions saisis dans notre code. Nous avons donc l'Inde, les États-Unis et la France. Ainsi, non seulement pour le pays, vous pouvez utiliser la liste déroulante pour n'importe quel champ de votre choix. Revenez maintenant à votre éditeur et commencez écrire le code pour la liste déroulante. 43. Comment ajouter Textarea: Dans cette vidéo, vous allez donc en savoir plus sur la zone de texte. Pour cela, commencez par BR, puis donnez une étiquette. Et c'est vrai. Veuillez saisir vos commentaires. Non, étiquette plus proche. Ensuite, lancez le jeu appelé zone de texte. Maintenant, fermez-le simultanément. Maintenant dans la balise textarea, c'est ça ? Colonnes. Cela va donc spécifier le nombre de colonnes que vous allez entrer. Alors je crie 100. Et les lignes sont égales. Alors tu peux donner pour. Maintenant, sauvegardons-le, exécutons-le et voyons le résultat. Comme vous pouvez le voir, voici ma zone de texte. Vous pouvez écrire autant de prises que vous souhaitez dans cet emplacement de zone de texte. Voici le niveau. Veuillez saisir vos commentaires. Vous pouvez donc donner à l'utilisateur une zone de texte totale pour écrire ses commentaires. Cette zone de texte est très utile pour prendre en commentaires ainsi que pour le créneau appelé à propos de vous-même. Ainsi, de cette façon, vous pouvez maintenant rapidement revenir à votre éditeur et commencer à essayer ce code. 44. Comment télécharger des fichiers: Dans cette vidéo, vous allez apprendre à télécharger des fichiers dans vos formulaires. Vous pouvez télécharger n'importe quel fichier, battre un fichier PDF ou une image, ou un document Word, n'importe quel type de fichier, vous pouvez télécharger votre téléphone. Donc pour cela, vous devez écrire un bout de code. Commençons donc. Commencez donc par écrire BR, puis donnez un niveau. Supposons de télécharger votre photo. Puis dans la balise étiquette. Maintenant, bon, le type d'entrée est égal puis entre guillemets, combat à droite. Et puis le nom donné prend en charge le fichier, puis enregistrez-le et exécutez dans Chrome. Comme vous pouvez le voir, voici mon niveau. Téléchargez votre photo. Et voici le type d'entrée appelé Choose file. Ainsi, lorsque vous cliquez dessus, il vous dirige vers votre ordinateur. Maintenant, choisissez un fichier et ouvrez-le. Comme vous pouvez le voir, voici le nom de votre fichier qui est choisi. Vous pouvez le modifier plusieurs fois, autant de fois que vous le souhaitez. Je suis en train de sélectionner ça. Maintenant, le nom va être changé. Vous pouvez donc changer comme celui-ci, mais un seul fichier sera choisi. Donc, pas seulement une image, vous pouvez télécharger n'importe quel fichier à partir de fichiers PDF vers fichiers de documents Word ou tout type de fichier que vous pouvez télécharger à l'aide du fichier de type d'entrée. Retournez maintenant dans votre éditeur et commencez à essayer ce code. 45. Avancée : Comment intégrer l'audio: Bonjour à tous et bienvenue dans le cours. Dans cette vidéo, je vais vous apprendre comment intégrer de l'audio dans votre page Web. Commençons donc. Allez maintenant dans l' éditeur Notepad Plus Plus , puis créez un nouveau fichier. Commençons maintenant par la structure de base d'une page HTML. Une fois que vous avez terminé dans la section du corps, écrivez le tag audio. Ensuite, dans cette balise, utilisez l'attribut SRC, qui signifie source. Ici, vous devez indiquer la source de votre audio. Permettez-moi d'écrire plus près. Dot MP3. Il s'agit essentiellement d'une chanson. Vous pouvez choisir un nouveau fichier audio. Maintenant, la droite contrôle le contrôle de la lecture de l'audio, puis l'augmentation ou la diminution du volume à partir du panneau. Maintenant tu as fini. Fermez donc votre technologie. Laissez-moi vous donner un titre. Supposons que chaque fois j' écris ma nouvelle chanson. Il s'agit donc essentiellement d'une démo maintenant dans la balise H1. Enregistrez maintenant ce fichier. Maintenant, allez dans les platines prises, puis créez un nouveau fichier. Et donnez un nom à votre dossier. Supposons que je donne du HTML. Oui, maintenant, entrez ce fichier. Donnez maintenant un nom à votre code HTML p. Supposons que je donne du HTML point audio. Maintenant, enregistrez ceci dans ce fichier. Vous devez également enregistrer le fichier source audio qui se trouve dans mes clés pour fermer un point mp3. Laissez-moi accéder à la section où j'ai enregistré cette chanson. Je l'ai donc enregistré dans mon dossier musique. Irritant. Maintenant, copiez ce fichier audio de la chanson , puis collez-le dans le même dossier que celui de votre point HTML audio. Ici, il est maintenant collé dans le même dossier. Oui, c'est fini. Revenons maintenant à votre éditeur, puis exécutons-le. Voici donc votre fichier audio. Vous pouvez maintenant le lire et l' écouter. Même. Stephen vient de découvrir avant un match que tu bois trop et c'est un problème. OK. Alors, mes amis, c'était sympa de les rencontrer et s' agissait de connaître la jambe. Je vais vous expliquer comment une unité a battu le record. 46. Avancée : Comment intégrer la vidéo: Bonjour à tous et bienvenue dans le cours. Dans cette vidéo, je vais vous apprendre comment intégrer des vidéos dans votre page Web. Commençons maintenant. Accédez maintenant à votre éditeur Notepad Plus Plus , puis créez un nouveau fichier. Commençons maintenant par la structure de base d'une page HTML. Maintenant, une fois que vous avez terminé dans la section du corps , à droite, vdu, v vidéo tack. Cela vous aidera à intégrer une vidéo dans votre page Web. Maintenant, commencez par écrire l' attribut SRC, qui vous donnera le fichier source de la vidéo. Laissez-moi d'abord aller à l' endroit où j'ai une vidéo. Je vais donc dans le dossier vidéos de mon PC. Voici maintenant mes vidéos. Maintenant, laissez-moi sélectionner cette vidéo qui porte le nom hyperlien point mp4. Permettez-moi donc de revenir à mon éditeur et d'écrire le nom hyperlien point mp4. Maintenant, les commandes de droite ici, ce qui vous donne essentiellement le contrôle de lecture, puis de la pause et du réglage du curseur. Maintenant, c'est ça, les commandes. Et puis mettez fin à l'attaque. Laissez-moi vous donner un titre ici. Supposons que ma vidéo maintenant et le tag H1. Donc tu as fini. Enregistrez maintenant ce fichier. De même pour enregistrer ce fichier dans le même dossier. Permettez-moi donc de passer à mon contenu de deck, puis de créer un nouveau fichier et de donner un nom à votre fichier, supposons une vidéo. Ensuite, dans ce fichier, enregistrez ce fichier HTML. Je vais le nommer en tant que point HTML vidéo. Maintenant, sauvegardez ça. Et n'oubliez pas que vos fichiers vidéo doivent également se trouver dans ce dossier appelé vidéo. Permettez-moi donc d'aller dans ma section vidéos et de copier ce point HTML mp4. Ensuite, laissez-moi passer à mon tube suivant où j'ai enregistré le dossier vidéo. Chez Katie. Maintenant, dans ce fichier MP4 point hyperlien. Retournez maintenant dans votre éditeur et lancez-le. Comme vous pouvez le voir, voici ma vidéo. Maintenant, cela prend tout l' écran puisque nous n'avons pas mentionné de largeur accrue du panneau vidéo. Permettez-moi donc de revenir à mon éditeur maintenant, droite, cet attribut appelé height. Et puis égale, puis réglez la hauteur sur 500 Px, Px dix. Donc pixel. Donnez maintenant la largeur avec laquelle écrire. Ensuite, définissez également la largeur sur 500 px. Vous pouvez modifier la hauteur et largeur selon votre convenance. Maintenant sauvegardez ceci à nouveau et laissez-nous le lancer. Voici votre vidéo. Maintenant, on peut y jouer. Vous pouvez utiliser ces commandes. Maintenant, vous pouvez même désactiver le son puis lire votre vidéo. n'y a donc aucun son, non ? Vous pouvez transférer le COSO comme ceci, puis jouer. C'est ainsi que vous pouvez intégrer des vidéos dans votre page. Merci d'avoir regardé cette vidéo. Restez à l'écoute de la côte pour en savoir plus en HTML. 47. Avancé : Comment intégrer le plug-in Youtube: Bonjour à tous, Bienvenue dans le cours. Dans cette vidéo, je vais vous apprendre comment intégrer des plugins YouTube dans votre page Web. Commençons donc. Maintenant, allez dans votre éditeur , puis créez un nouveau fichier. Commençons maintenant par la structure de base d'une page HTML. Une fois que vous avez terminé, allez dans votre navigateur Web. Je vais sur Google Chrome ici. Vous pouvez accéder à n'importe quel navigateur Web. Maintenant, allez sur YouTube. Maintenant, à partir d'une telle vidéo que vous souhaitez intégrer à votre page Web. Maintenant, laissez-moi faire une recherche dans une vidéo. Je recherche donc une vidéo intitulée Qu'est-ce que HTM maintenant, puis je sélectionne n'importe quelle vidéo. Je suis donc en train de sélectionner ceci. Il s'agit donc de la vidéo que vous souhaitez intégrer. Maintenant. Mettez la vidéo en pause , puis cliquez sur Partager. Et puis vous pouvez trouver une option appelée Embed. Alors cliquez dessus. Et comme vous pouvez le voir, voici le code que vous pouvez inverser le bit innovant. Copiez donc ce code. Ensuite, nous revenons à votre éditeur. Et puis dans la section du corps. Si bon que ça. Maintenant, sauvegardons ce fichier. Je l'enregistre sur mon talon de pont. Donnez-lui un nom. Je donne du HTML point Youtube. Et puis enregistrez-le. Maintenant, lançons-le. Comme vous pouvez le voir, voici votre vidéo. Alors joue-le maintenant. Et la même vidéo, s'il vous plaît. De cette façon, vous pouvez ajouter des vidéos YouTube ainsi que plusieurs vidéos sur votre page Web. Maintenant, permettez-moi de revenir à notre rédacteur en chef. Nous utilisons donc le tag appelé iframe, qui nous permet de définir le plugin YouTube sur notre page Web. Voici essentiellement la largeur et la hauteur que vous pouvez manipuler pour agrandir ou réduire les sites de la vidéo. Et voici la source. Et ce sont des autorisations qui sont jouées automatiquement et permettent le plein écran dans cette balise iframe. Merci d'avoir regardé cette vidéo. Restez à l'écoute de la côte pour découvrir fonctionnalités avancées d'un bégaiement. 48. Avancée : Comment intégrer Google Map: Bonjour et bienvenue à nouveau dans le cours. Dans cette vidéo, je vais vous montrer comment intégrer Google Maps à votre site Web. Alors pour cela, commençons. Allez maintenant dans l' éditeur Notepad Plus Plus , puis créez un nouveau fichier. Commençons maintenant par la structure de base d'une page HTML. Une fois que vous avez terminé, accédez à votre navigateur Web , puis à Google Maps. sommes donc là. Désormais, la localisation sociale dans Google Maps. Je vais fouiller ma ville, Kolkata. Vous pouvez effectuer une recherche dans votre ville ou dans n'importe quel endroit de votre choix. Maintenant, pendant que je le cherche, il est affiché ici. Maintenant, je veux que cela soit intégré à mon site Web. Donc pour cela, ce que vous devez faire est d'aller sur partager, puis sur intégrer la carte. Maintenant, vous avez ici le lien d'iFrame. Copiez donc ce lien et retournez dans votre éditeur. Dans la section du corps, collez le lien. Il s'agit donc d'un long lien. Maintenant, enregistrez ce fichier sur votre bureau. Maintenant, donne-toi un dossier, un nom. Supposons que le code HTML point de carte, puis enregistrez-le. Et maintenant, nous allons voir le résultat. Ceci est votre carte avec une représentation de Kolkata dans mon cas, dans votre cas, il peut s'agir d'OCT. Vous pouvez donc faire glisser la carte, puis effectuer un zoom avant et un zoom arrière. Vous pouvez utiliser toutes les fonctionnalités de Google Map ici. Encore une fois, nous utilisons I-Frame pour intégrer cette carte dans notre répétition. C'est donc une source totale. Et c'est la largeur et la hauteur que vous pouvez ajuster en fonction de votre choix pour regarder cette vidéo. Et n'oubliez pas de vous entraîner. 49. Introduction au projet principal - Site Web de blog: Bonjour à tous, bon retour dans le cours. Il est temps pour nous de commencer notre projet final. Dans ce projet, vous allez apprendre à concevoir votre blog en utilisant HTML, CSS. Donc comme vous pouvez le voir, il s'agit de la section accueil de votre blog, qui propose un plat puis suivi de sa recette. Donc, en gros, il s'agit d'un blog culinaire. Je vais vous apprendre exactement comment créer ce site Web de blog. Maintenant, vous pouvez également créer un site Web de blog de mode ou d'autres sites Web de blogs de cette manière uniquement. Maintenant, ce sera votre section À propos de nous où vous pouvez cliquer sur ce combat contre nous sur Facebook. Et il y a aussi une galerie. Voici votre galerie. Et quelle que soit la photo que vous publiez sur un blog qui est enregistrée ici. Vous pouvez également cliquer sur nous trouver sur Facebook, puis vous rendre directement la page Facebook de votre blog. Voici donc la page Facebook de mon blog avec ce monde gourmand. Maintenant, je vais également vous apprendre à donner vie à votre site Web en utilisant l'hôte triple vague 0. Ainsi, vous pouvez accéder à votre site en direct et n'importe qui dans le monde entier peut accéder à votre bloc . Et pour cela, vous n'avez pas besoin d'écrire une seule ligne de code. Dans tous les langages de programmation tels que PHP ou Java, vous n'avez pas besoin tous ces langages de programmation pour créer votre propre blog. Vous pouvez le faire en utilisant uniquement du HTML et du CSS. 50. Site Web de blog - Comment ajouter des en-têtes: Bonjour à tous, et bon retour dans le cours. Il est temps pour nous d'écrire le code de notre projet final. Donc, sans perdre plus de temps, commençons. Maintenant, allez dans l'éditeur Notepad Plus Plus. Créez un nouveau fichier. Commençons maintenant par la structure de base d'une page HTML. J'en ai fini avec la structure de base d'un beat HTML. J'ai défini le titre sur accueil puisque nous créons d'abord la page d'accueil. Maintenant, dans la balise body, écrivez def, right, class equals, puis main. Il s'agit donc d'une division pour votre contenu principal. Donc j'écris les cours méchants. Maintenant, la balise de division plus proche écrira essentiellement tout dans cet écart principal. Maintenant, laissez-moi commencer à écrire une autre division, qui sera pour notre en-tête, l'en-tête droit. Ensuite, fermez la balise div. Ainsi, dans cette section d'en-tête, vous pouvez donner le nom de votre blog puis un slogan. Permettez-moi donc d'écrire un paragraphe indiquant le nom de votre blog. Alors guérissez, le nom d'un blog est Foodies Wall. Fermez maintenant la balise p. Vous pouvez ensuite ajouter un tag ici. Donc, étant donné une identification, dag, right, il faut à la fois explorer les cas quotidiens. Fermez maintenant la balise p. Maintenant, j'écris un blog culinaire ici. Vous pouvez utiliser n'importe quel sujet pour écrire dans un bloc. Ce n'est peut-être pas la nourriture, cela peut être la mode, le style de vie ou la technologie, quoi, n'importe quel domaine que vous pouvez suivre. Maintenant, sauvegardons notre fichier. Je vais donc l' enregistrer sur mon prochain pourboire. Créez maintenant un nouveau dossier et donnez-lui un nom. Supposons que je l'appelle blog culinaire. Tu peux donner n'importe quel nom. Entrez ce dossier foot blog, puis donnez un nom au fichier, note home point HTML, note home point HTML, puisqu'il s'agit de notre page d'accueil. Donc home.html puis enregistrez ceci. C'est donc maintenant le miroir de notre page HTML. Donc pour l'instant, vous devez styliser le discours. Pour cela, créez un nouveau fichier. Ici, nous allons écrire notre code CSS. Voyons maintenant quelles sont les choses que nous devons styliser. Nous devons appliquer un style à la moyenne de distribution, puis à l'en-tête, puis à cette balise. Allez donc dans votre nouveau fichier et les points gris signifient, puisque mean est une classe, alors commencez par point et ouvrez et fermez l'accolade. Maintenant dans cette bonne position. Ensuite, donnez deux points et écrivez absolu. Cela prendra donc l'écran total, donc absolu. Ensuite, écrivez la largeur qui est de 100 pour cent. Puisque nous voulons utiliser la largeur totale à l'écran. Maintenant pour la hauteur, nous devons régler la hauteur car la hauteur peut être finie. Alors donne de la hauteur. Je vais écrire des milliers de pixels. Vous pouvez donner plus ou moins selon votre convenance. Maintenant, nous devons définir la marge pour ce haut droit. Cela va définir la marge pour le haut et la droite. Et la marge de gauche sera également de 0 %. Nous avons donc fini de concevoir la moyenne. Maintenant, concevons la partie d'en-tête pour écrire un en-tête de point. Puisque headed est également un en-tête de classe. Et puis à l'intérieur de l'accolade. Encore une fois position. Maintenant, donnez également l'absolu, puis la largeur. Nous voulons donc utiliser la largeur totale. Donc 100 pour cent. Ensuite, donnez la hauteur. Nous ne voulons donc pas que notre en-tête occupe tout l'espace de la page Web, il doit donc être en haut. Permettez-moi donc de donner l' en-tête à 20 %. Maintenant fixons la marge pour cela. En haut à droite. Puis 0 % et laissé à 0 %. Nous avons donc fini de concevoir la section d'en-tête. Maintenant, dans cette section d'en-tête, nous avons ces deux balises de paragraphe appelées le monde des gourmets, qui est notre bloc de titre. Et voici le tag. Laissez-nous donc écrire le code pour styliser notre titre. Maintenant, définissons d'abord la couleur d'arrière-plan de notre section d'en-tête pour cet arrière-plan droit. Ensuite, donnez un trait d'union et une couleur claire, C-O-L-O-R. Alors donnons une couleur. Maintenant, nous pouvons donner de la couleur en utilisant les codes hexadécimaux. Permettez-moi donc de prendre la référence d'un code hexadécimal. Maintenant, je veux définir la couleur sur magenta foncé. Donc mon code hexadécimal est l'aide au hachage 00 a B. Maintenant, vous pouvez définir votre couleur en fonction de votre choix. Vous pouvez donc vous référer aux codes hexadécimaux, que j'ai montrés dans la section de mise en forme du texte de ce cours. Maintenant, j'utilise ce magenta foncé. Laisse-moi écrire ici maintenant. Hash huit, OMC, ATP. Non, donne-nous un point-virgule. Maintenant, créons le titre pour cela. Donnez une couleur à votre titre. Avec le magenta foncé, le blanc sera approprié. Donc léger, puis définissez la taille du texte, taille de la police, puis donnez, supposons 38 pixels. Puis à droite, poids de police. Et puis écris Volt. Cela mettra donc le texte gras et lui donnera plus de netteté. Maintenant, définissons la famille de police. Famille de polices. Je vais donc utiliser la famille de polices appelée George yarn. Maintenant, laissons un peu d'ombre aux textes pour ce bon texte. Puis tiret, puis écrivez ombre. L'ombre sera définie comme ceci. Vous pouvez indiquer les dimensions de l'ombre sur les axes X, Y et Z. Permettez-moi donc d'écrire trois pixels sur l'axe des x, trois pixels sur l'axe et trois pixels sur l'axe des y. Et la couleur de mon ombre sera géniale. Non, nous devons concevoir notre section fiscale pour cela, hacher à droite puis écrire deg, puisque stack était un identifiant de notre paragraphe. Donc ici, en utilisant le hachage, ouvrez maintenant l'accolade et dans cette section, droite, la taille de la police. Supposons 20 pixels, puis écrivez font-weight. Audacieux Pas de bonne famille de polices. Non, définissez la famille de polices sur optima et écrivez une virgule. Alors sens non, la bonne couleur. Et puis écris en blanc. Maintenant, à droite de la marge, donc à la marge, puis au trait d'union, puis à droite à gauche. Supposons 40 px. Puisque nous voulons que la pile soit légèrement décalée vers la droite. Nous avons donc fini de concevoir la section de la tête. Maintenant, sauvegardons ce fichier. Enregistrez-le dans le même dossier que le fichier home.html que vous avez enregistré. Maintenant, écrivez home point css puis enregistrez ce fichier. Maintenant dans home.html et dans la balise head, lien droit. Et puis HREF est égal au bon point d'accueil css. Et puis la relation droite est égale à la feuille de style. Enregistrez maintenant ce fichier. Laissons maintenant notre fichier et voyons le résultat. Laissons nous lancer et nous développer. Il s'agit donc de la section d'en-tête de notre page Web. C'est écrit pour cet automne et voici le chèque qui dit «  explosez les délices ». Merci d'avoir regardé cette vidéo. Dans les prochaines vidéos, nous allons procéder à la création de la page Web. 51. Site Web de blog - Comment ajouter un menu: Bonjour à tous, bon retour dans le cours. Nous allons donc écrire le code pour poursuivre notre projet. Maintenant, allez voir votre éditeur. La même page, c'est ça ? Vous avez écrit la section d'en-tête. Aujourd'hui, nous allons écrire le menu de cette page d'accueil. Donc, après la fin de la balise de division de l'en-tête, commencez une autre division et donnez-lui un nom. Supposons que la classe soit égale, puis écrivez le menu. Fermez également la balise de division. Maintenant, dans cette division va écrire la section de menu pour cela. Commencez une liste non ordonnée. Commencez donc par le tag UL et fermez-le simultanément. Maintenant, dans cette liste de balises UL, les menus veulent donner. Alors, l'œil droit. Et puis mon premier élément pour le menu est accueil, qui sera notre page d'accueil. Ensuite, fermez le tag LI. Ensuite, un autre menu pour nous sera à propos de nous. Tout va bien À propos de nous. Dans lequel vous pouvez vous donner des informations. Et puis un autre menu, appelé galerie, où vous pouvez voir toutes les photos ou la nourriture que vous allez utiliser dans votre bloc. Désormais, chacun de ces éléments de menu est une page Web. Ainsi, lorsque vous cliquez sur ce menu, les éléments seront redirigés vers la page à laquelle ils appartiennent. Maintenant, la maison est une pêche, que nous sommes en train de concevoir. Donc tu dois ancrer cette page, donc c'est ça. Et puis écrivez H ref égale hash car il ne naviguera pas vers une autre base puisqu'il ne s'agit que de la page d'accueil maintenant et de la balise d'ancrage. De même, vous devez donner des ancres à propos de nous. Donc écrivez a puis H ref, puis écrivez sur le point HTML, qui sera créé dans nos prochaines vidéos. Ensuite, fermez l'ETag. Elle est maintenant soulignée car cette page n'a pas encore été créée. C'est pourquoi il est souligné. Nous allons donc créer cela. On peut l'obtenir maintenant, non ? Gallery, puis H ref, puis donnez le point de la galerie HTML. Maintenant, la balise d'ancrage. Je suis donc le menu prêt. Il est maintenant temps pour nous d'ajouter quelques styles à notre liste. Donc pour cela, enregistrez ce fichier et allez à l'accueil point CSS, puisque tout est une feuille de style. Voici donc mon CSS point maison. Maintenant, tout d'abord, nous devons concevoir la division appelée menu. Voici donc notre division. Allez donc à l'accueil point css puis écrivez le menu des points, puisque le nom de la classe est Menu. Et dans cette bonne position, sera-t-elle absolue ? Et puis la largeur. J'ai donc besoin que la largeur soit de 100%. Maintenant, donne la hauteur. Supposons que c'est 15 %. Puisque le responsable ne doit pas occuper tout l'espace dans le pH. Maintenant, vous pouvez donner le sommet comme supposons 20 % parce que la hauteur de la tête est de 20 %, nous devons donc suivre le rythme. Donnons 22 pour cent afin qu'il y ait un écart entre l'en-tête et cette section de menu. Et puis donne à gauche. Laissons une marge sur la gauche. Supposons 20 %. Maintenant, non ? Ul LI. Dans cette section, nous allons donc écrire le code pour styliser les éléments de liste de notre liste non ordonnée. Maintenant, vous pouvez ajouter une couleur d'arrière-plan aux éléments d'une liste, mais je ne vais pas l'ajouter parce que cela ne s'affichera pas sur ma page Web. Vous pouvez le faire sur votre page Web si vous le souhaitez. Maintenant, je vais écrire text-align, center. Et puis je vais écrire la liste, puis le tiret et le bon style. Et je n'en écrirai aucun ici. Cela nous aidera essentiellement à obtenir un horizon à répertorier. Maintenant laisse B, c'est ça ? Je vais donc donner la largeur de 20 Px. Donc après avoir vu la sortie, nous pouvons changer toutes ces dimensions si nous voulons savoir avec ceci donné maintenant et donner la hauteur de la ligne, donc ligne puis hauteur, dx. Puis il a ralenti. Cet attribut float l' aidera à se positionner. Je vais donc écrire float left, qu'il soit vraiment positionné sur le côté gauche. Nous allons maintenant utiliser un nouvel attribut que vous n'avez pas encore appris dans ce cours. C'est-à-dire qu'il volera en vol stationnaire. Hover est quelque chose qui vous aidera à concevoir votre menu d'une manière différente. Cela signifie que lorsque vous placez le pointeur de la souris sur l'élément de menu spécifique, le code que vous écrivez dans cette section de survol y sera appliqué. Alors écrivons et dans la sortie, nous pouvons voir ce qui se passe là-bas. Utilisez donc la balise Transform puis RightScale. Maintenant, dans ce taux, 1,5 puis 1,5. Maintenant, c'est vrai, la couleur. Ainsi, lorsque vous survolez vos éléments de menu, nous voulons que certaines propriétés de cet élément soient modifiées. Au départ, il sera de couleur noire, mais quand je le survolerai, je veux qu'il soit blanc. Maintenant pour cela, nous devons définir une couleur de fond car notre couleur de fond de l'élément est déjà blanc, donc le blanc sur blanc ne sera pas visible. Définissons donc une couleur de fond. Maintenant, je vais dire les mêmes couleurs définies pour la section d'en-tête. Je vais donc simplement copier ce code hexadécimal et l'écrire jusqu'à. Revenons maintenant à notre fichier home.html. Maintenant, nos éléments de menu se trouvent sous cette balise d'ancrage, comme nous le savons, cette ancre a un style par défaut, qui sera, elle sera couleur bleue et elle sera soulignée. Nous ne voulons donc pas que cela apparaisse sur notre page Web. Nous voulions le styliser d'une manière différente pour ce bon E. Et dans cette bonne couleur. Et puis n'écrivez rien. Ensuite, écrivez en noir. Ensuite, écrivez du texte. Décoration Aucune. Nous n' aurons donc aucun élément sous-jacent. Vous pouvez indiquer la taille de la police, la taille la police. Supposons 20 PX. Nous avons terminé maintenant. Maintenant, sauvegardons ça. Allons dans home.html et exécutons-le et voyons la sortie. Nous voici avec notre nourriture est fausse. Voici donc trois sections d'accueil. Donc, comme vous pouvez le voir, dès que vous avez votre survol, le pointeur de la souris sur ce menu, éléments de distance se forment, il zoome et il affiche une couleur d'arrière-plan. C'était donc le truc Hubbard que nous avons fait dans notre code CSS. Voici donc les menus que nous avons. Maintenant que vous cliquez sur Accueil, il est redirigé vers hormonalement, nous ne pouvons aller nulle part, mais nous n'avons pas encore conçu sur nous et les calories. Vous ne pouviez donc aller nulle part en cliquant sur ces menus. Nous avons donc fini de concevoir la section principale. Dans la vidéo suivante, nous allons apprendre à concevoir le reste de votre page Web. Merci d'avoir regardé les gars, restez à l'écoute du cours pour en savoir plus. 52. Site Web de blog - Comment ajouter du contenu principal: Bonjour à tous, et bon retour dans le cours. Dans cette vidéo, je vais donc vous apprendre comment ajouter du contenu à votre blog. Pour cela, allez dans l'éditeur Notepad Plus Plus. Maintenant, allez dans home.html. Dans ce home.html, après avoir terminé avec votre menu, puis après la déviation du menu, n'est-ce pas ? Déviation, et donnez la classe comme contenu. Fermez maintenant la balise de division. Dans ce contenu, nous allons ajouter notre contenu. Puisque c'est un blog culinaire, je vais ajouter de la nourriture et des recettes avec les photos, etc. Donc, en gros, nous allons faire trois choses, dont une, nous devons donner un nom à notre nourriture dont nous sommes en deuil dans notre blog. Nous devons donc trouver un nom très beau et lucratif. Vous devez donc d'abord le faire. La deuxième chose est que vous devez donner une belle image de la nourriture que vous avez préparée. Et la troisième chose est la recette de la nourriture, qui aidera les utilisateurs de votre blog à comprendre comment faire cela. Tout d'abord, commençons par le nom de l'aliment. Maintenant, je vais utiliser l'en-tête appelé H5. Et à ce moment-là, j' écrirai le nom de mon plat. Maintenant, votre nom devrait être attrayant et lucratif pour que les utilisateurs puissent utiliser votre blog et obtenir la recette à partir de là. Mon premier aliment est donc un sandwich. Permettez-moi donc de donner un nom à mon sandwich qui est délicieux. Sandwich. Ce sera donc le nom de mon sandwich. Maintenant, tu dois donner une image. Écrivez donc IMG puis SRC. Vous devez donc définir la source pour cela, allez dans un dx2. Maintenant, j'ai déjà cette image de sandwich. Donc, ce que je vais faire, c'est couper de colline et ensuite aller dans le dossier où j'ai ce home.html à la maison dot css. Et tout de suite, créez un nouveau dossier et donnez-lui le nom images. Ainsi, quelle que soit l'image que vous allez utiliser pour votre site Web, elle sera enregistrée dans ce dossier d'images. Maintenant, je vais simplement le coller ici. Alors j'ai mon sandwich. Vous revenez à présent dans Notepad Plus, Plus, puis vous écrivez votre source, c' est-à-dire des images slash. Ensuite, retournez dans le dossier et voyez le nom de l'image. Donc c'est un sandwich point JPG, non ? Sandwich, TCD. Tu en as fini avec l'image. Maintenant, nous allons donner la hauteur et la largeur ainsi d'autres attributs de l'image dans notre section CSS de la page d'accueil. Maintenant, après la mesure pour donner la recette. Je vais donc utiliser la balise p pour cela. Ensuite, écrivez la recette. Fermez ensuite la balise p. Et ici tu écris VR. Et puis un autre tag P. J'ai déjà écrit la recette ici. C'est le chutney et tout. Je vais donc simplement copier ce truc et l'écrire là. Donc je le copie et je vais le coller en deux, ce sera ma recette et fermera la balise p. Nous en avons donc fini avec notre recette, notre image et le titre. Alors sauvegardez ceci et passons à warm dot CSS pour concevoir ces choses. Commençons maintenant par le contenu des points, qui était notre division. Et puis, à l'intérieur de cela, la position qui est absolue. Ensuite, donnez la largeur et la hauteur. Il faut donc supposer 80 pour cent, puis la hauteur. Nous voulons donc que notre contenu apparaisse à l'écran après le menu et l'en-tête. Nous devons donc calculer la hauteur prise par en-tête. Et la section principale pour cela, Voici notre tête cependant avec 20 pour cent de la hauteur et les textes du menu, 15 pour cent. Ici, nous avions donné deux pour cent de l' écart pour un total de trente-sept pour cent. Maintenant, nous voulons également un certain écart entre le menu et le contenu. Donnons donc la hauteur à 60 %. Ensuite, on considère que la section supérieure est de 40 %, y compris l'en-tête et le menu. Le bureau à 60% sera donc à la hauteur de notre contenu maintenant. Donc en haut à droite, puis donnez 40%. Et le cadeau laissé en pourcentage. Et c'est ça. Maintenant, c'est ça ? H5. Ensuite, nous voulons définir la taille de la police. Alors bons sites de polices. Et puis écrivez, supposons 38 px. Passons maintenant à la conception de notre section image. Alors c'est vrai, image IMG. Ensuite, cela donne la hauteur et la largeur de votre image. Donc la bonne hauteur. Maintenant, définissons la hauteur sur 300 px pixel puis la largeur sur 500 px. Maintenant, une fois que vous avez terminé, retournez à home.html. Alors pour cela, laissez-moi écrire BR pour le faire dans la ligne suivante. Il suffit donc de continuer à écrire BR pour le rendre plus organisé. Nous avons terminé. Maintenant, sauvegardez ça. Maintenant, exécutons-le et voyons le résultat. Voici donc notre recette et l'image du sandwich, qui est un délicieux sandwich en grille. C'est donc notre page d'accueil où nous avons notre contenu. Désormais, nous pouvons même ajouter du contenu à notre page Web. Ce que cela revient à Notepad Plus, Plus editor. Copiez simplement cette partie de l'âge de cinq ans jusqu'au paragraphe. Copiez ceci et collez-le dans. Le prochain plat pour moi sera les pâtes. Alors pour ça, je vais écrire des pâtes en sauce. Encore une fois, je dois donner une image. Pour cela, vous pouvez télécharger l'image ou vous pouvez simplement faire des pâtes et ensuite donner l'image. Voici donc mon image de pasteur. Je vais juste te le couper et le coller dans mon image, une section du blog culinaire. Colle-le. C'est donc du Pasta Dot JPEG juste ici au lieu de pâtes sandwich. Vous imaginez donc triés. Maintenant, il va simplement tourner pour changer la recette pour cela. C'est bien ça. Et j'ai déjà écrit la recette des pâtes. Je vais donc simplement copier ceci et le coller. J'ai donc besoin de quelques VR juste pour organiser mes affaires. Une fois que vous avez terminé, enregistrez-le et lancez-le pour voir le résultat. Voici donc ma page Web pour ce monde, et voici ma page d'accueil. Et voici mon délicieux sandwich grillé avec recette. Et puis j'ai mes pâtes salées avec la recette. Ainsi, vous pouvez ajouter autant de plats que vous le souhaitez. Si vous créez un blog de mode, vous pouvez ajouter votre image. Vous pouvez même ajouter vos vidéos à votre page Web. Merci d'avoir regardé cette vidéo, les gars, restez à l'écoute du cours. 53. Site Web de blog - Comment créer une galerie: Bonjour à tous, bon retour dans le cours. Il nous reste donc à concevoir deux pages supplémentaires, puis nous en aurons fini avec notre bloc. Dans cette vidéo, je vais donc concevoir la section galerie pour cela. Accédez à l' éditeur Notepad Plus Plus , puis créez un nouveau fichier. Commençons maintenant par la structure de base d'une page HTML. Nous en avons fini avec la structure de base et j'ai donné le titre de coupable. Maintenant, dans la section body, écrivez la balise H1. Et puis écrivez une galerie. Pas de balise H1 fermée. Et je vais écrire un peu de style en utilisant le CSS en ligne. Je vais donc l'aligner au centre, donc à droite, aligner le texte. Puis il écrit et je ne sais pas. Elle avait une déviation. L'étiquette de déviation. Donnez maintenant le nom de la classe sous forme de photo. Maintenant, sauvegardons ça. N'oubliez pas que vous devez l'enregistrer dans le même dossier que celui dans lequel vous avez enregistré les autres pages Web. J'avais donc sauvegardé dans le blog culinaire sur mon bureau. Je vais donc l'enregistrer dans le même dossier. Sélectionnez donc blog culinaire et donnez un nom à votre page HTML. Je donne du HTML point de galerie. Maintenant, sauvegardez ça. Maintenant, dans cette déviation, droite, IN triche, puisque votre galerie doit avoir des images. Alors IMG, voyons voir. Nous allons ajouter des images d'un bloc. Donc pour cela, des images correctes puis une barre oblique sandwich GPG sombre comme nous l'avions ajouté dans notre vidéo précédente. Et puis P1, lorsque l' utilisateur clique sur cette image, elle s'ouvre en mode plein écran. Pour cela, utilisez la balise d'ancrage puis la cible droite. Et puis écrivez un trait de soulignement, puis vide. Cela ouvrira donc l' image dans une nouvelle fenêtre. Maintenant, écrivez H ref égal, puis écrivez des images slash sandwich, point JPG. Aucune bande d'extrémité ne pouvait être étiquetée. Maintenant, ajoutons de la hauteur et largeur à notre image pour ce droit, hauteur égale, puis écrivons 300 px et largeur 500 px. Nous avons donc terminé. Maintenant, sauvegardons-le et exécutons-le. C'est donc notre galerie qui contient cette image. Maintenant, lorsque vous cliquez dessus, l'image s'affiche en plein écran. Nous pouvons maintenant ajouter d'autres images. Donc pour cela, copiez cette partie, toute cette déviation, et collez-la. Maintenant, dans la source, vous pouvez indiquer une autre source. Je vais donc ajouter le choix de pâtes, lot de pâtes JPEG. Et maintenant, au lieu de sandwich, c'est ça ? Pâtes. Nous voulons maintenant que cette image soit à droite de cette image. Donc pour cela, nous devons faire un peu de style. Donc, le bon style dans la section de la tête et terminé simultanément. Maintenant, dans la section style, utilisez la classe appelée dot photo. Et puis à l'intérieur de ça, à droite, flotte. Et puis soulevez. Maintenant, sauvegardez ça. Maintenant, nous allons voir le résultat. Comme vous pouvez le voir ici, utilisez votre sandwich grillé. Voici votre pasteur salé, et lorsque vous cliquez dessus, limitez les cadeaux qui vous sont présentés. Maintenant, ce que nous devons faire, c'est lier cette section galerie à notre page d'accueil. Donc pour cela, allez à la page d'accueil point HTML. Et ici, comme vous pouvez le voir, il est ancré au HTML point galerie. Laissons maintenant exécuter home.html. Lorsque vous cliquez sur galerie, voici votre galerie. Maintenant que vous êtes de retour, voici votre page d'accueil et voici votre galerie. 54. Site Web de blog - Comment créer à propos de nous: Bonjour à tous, bon retour dans le cours. Nous en avons déjà fini avec la page d'accueil et la galerie. Dans cette vidéo, vous allez donc apprendre à concevoir votre page À propos de nous. Pour cela, allez dans Notepad Plus Plus, puis créez un nouveau fichier. Commençons maintenant par la structure de base d'une page HTML. Maintenant, dans cette unité de page pour écrire sur le bloqueur. Dans ce cas, c'est toi pour ça. Je ne me suis pas imaginé de toi ou du blogueur ? Non. Pour cela, sélectionnez l' une de vos images. J'ai donc une image de moi sur mon bureau, donc je vais juste la couper. Et dans le dossier de mon blog culinaire, dans le dossier images, je vais le coller. Maintenant. Permettez-moi de renommer cette image. Alors allez voir le nom et donnez-lui un nom. Supposons que non, allez dans votre éditeur Notepad Plus, Plus. Et puis dans les images source, puis barre oblique, puis point, JPG. Donnez maintenant la hauteur et la largeur. hauteur est égale à 300 px et la largeur est égale à 300 px. Nous avons donc terminé avec la hauteur et la largeur. Maintenant, vous devez écrire la section « À propos ». Donc pour cela, lancez une balise de paragraphe. Maintenant, j'ai déjà écrit sur moi-même. Je vais donc simplement le copier et le coller. Je vais donc donner quelques VR pour qu'il soit beau à l'écran. Fermez maintenant la balise p. Donc, avant d'enregistrer ce fichier, allons dans home.html et découvrons quel était le nom que nous avons utilisé pour cette page À propos. Nous avions donc utilisé about dot HTML. De même, nommons ce about.html. Donc, dans le dossier du blog culinaire, je suis déjà à l'intérieur de la chute de nourriture. Permettez-moi donc d'écrire sur le HTML point. Maintenant enregistrez ceci et lancez-le pour voir la sortie. Voici donc ma photo. Voici à propos de moi. Je peux maintenant modifier les attributs de hauteur et de largeur de votre photo. Donc ajusté en conséquence. Permettez-moi donc de donner une largeur de 200. Enregistrez ceci et encore c. Donc, de cette façon, vous pouvez ajouter tout de suite Ça a l'air bien. Maintenant, il s'agit de ma biographie. Voici une courte biographie. Vous pouvez ajouter bien d'autres éléments à votre biographie. Vous pouvez également y ajouter des liens vers votre compte de réseau social afin qu'ils puissent vous contacter. Pour ça. Accédez à Google et recherchez des images. Images de Facebook. Choisissez une image et la longitude. Cliquez dessus, puis cliquez dessus avec le bouton droit de la souris, puis cliquez sur Enregistrer l'image sous et enregistrez-la dans le dossier pour le bloc à l'intérieur du dossier images. C'est ce qu'on appelle télécharger point PNG. Tant de temps pour que ça reste comme ça. C'est enregistré. Revenons maintenant au Bloc-notes Plus Plus. Maintenant ici, écrivez IMG, puis SRC, puis égal, puis écrivez des images slash download point PNG. Nous allons maintenant ancrer cela à la page Facebook ou au profil Facebook. Je vous recommande donc de créer un article sur Facebook avec le nom de votre blog , puis de lier cette page à cette image. Pour créer des liens, nous allons utiliser la balise d'ancrage. Voici donc notre étiquette d'ancrage. Maintenant, écrivez H ref égal. Nous devons donc obtenir le lien. Allez donc dans votre navigateur, puis sur Facebook. Ensuite, connectez-vous à votre compte. Je vais me connecter à mon compte. À partir d'ici. Vous pouvez créer des pages. Donc comme j'ai déjà créé une page pour ce bloc, je vais donc y aller directement. Cliquez donc sur les pages. Et voici mon univers gourmand. Alors cliquez dessus. Maintenant, vous avez une option appelée « plage avec le pied ». Alors cliquez dessus. Il s'agit de votre blog et le visiteur le verra ainsi. Depuis que je viens de créer un blog. n'y a donc pas encore de posts. Vous pouvez donc créer votre page et l'extraire, et vous pouvez également faire connaître votre blog. Maintenant, copiez cette partie et collez-la dans H ref. Maintenant, sauvegardez ça. Laisse-nous courir et voir le résultat. Retrouvez-nous sur Facebook. Lorsque vous cliquez dessus, vous êtes redirigé vers votre page. Vous pouvez également ajouter vos autres identifiants sociaux que Twitter ou LinkedIn ou tout autre profil si vous en avez. Revenons maintenant à Notepad Plus, Plus. Et à partir du point d'origine HTML, il l'exécute. Et cliquons sur À propos de nous. Nous avons donc le BGO. 55. Site Web de blog - Site Web en direct: Bonjour à tous, bon retour dans le cours. Nous sommes donc arrivés à la fin de ce cours. Dans cette vidéo, je vais donc vous apprendre à lancer votre site de blog et à le mettre en ligne. Donc pour cela, vous devez faire un petit changement. C'est-à-dire, allez dans le dossier de votre blog culinaire. Ensuite, au lieu de home.html, il suffit de le rendre index.html. Maintenant, allez dans votre navigateur , puis recherchez hébergeur Web. Alors écrivez triple 0 où poster. Il s'agit donc essentiellement d'une plateforme d'hébergement gratuite où vous pouvez lancer votre site Web gratuitement et vous n'avez pas besoin d'argent pour cela. Comme il s'agit d'un projet à tester, dans notre cas, nous utiliserons cet hébergement gratuit. Si vous voulez lancer votre blog de manière commerciale, alors vous pouvez évidemment utiliser une alors vous pouvez évidemment utiliser plateforme d'hébergement commerciale telle que Host, Gator are hosting, etc. plateforme d'hébergement commerciale telle que Host, Gator are hosting, etc. inscrivez-vous. Alors cliquez dessus. Je dois fournir l'e-mail, le mot de passe et le nom du site Web. Donnez-moi donc votre e-mail, le droit de savoir, donnez un mot de passe approprié, puis écrivez le nom de votre site Web. Dans mon cas, je vais écrire Foodies World. Ce sera donc le nom de mon site Web. Cliquez maintenant sur. Bénéficiez d'un hébergement gratuit. Sachez rapidement vérifier votre compte de messagerie pour cela. Connectez-vous à votre compte e-mail. Voici la moyenne d'un post. Cliquez donc sur Vérifier l'e-mail. Votre adresse e-mail est maintenant vérifiée. Cliquez donc sur ce gestionnaire de fichiers. Cliquez donc sur Upload Files. Maintenant. Voici deux fichiers qui sont déjà HTML public et un autre qui est TMP. Et maintenant c'est public.html. Maintenant, dans ce dossier, vous devez conserver tous vos fichiers. Alors pour cela, passez à votre prochain tube. Voici votre blog culinaire et cliquez dessus avec le bouton droit et cliquez sur OK, donc je suis en train de le convertir en fichier lu. Maintenant. Retournez maintenant dans votre navigateur. Ensuite, cliquez sur Upload Files, cliquez sur Select Files, puis sur votre bureau. Maintenant. Cliquez sur le blog culinaire point rare, et ouvrez-le. Cliquez maintenant sur Upload. Comme vous pouvez le voir, il est téléchargé ici. Maintenant, sélectionnez-le puis cliquez dessus avec le bouton droit. Et vous pouvez voir cette option d'extraction. Cliquez donc dessus et cliquez sur Extraire. Nous avons maintenant sélectionné toutes nos pages Web ici. Maintenant, nous devons créer un autre dossier. Pour cela, créez un dossier et donnez-lui le nom sous forme d'images. Cliquez maintenant sur Créer. Votre dossier est créé. Double-cliquez maintenant sur ce dossier d'images. Cliquez maintenant sur Upload Files, puis sélectionnez Files. Ensuite, allez dans le dossier images et sélectionnez toutes les images pertinentes. Ensuite, ouvrez puis téléchargez. Vos images sont donc téléchargées. Revenons maintenant au HTML public. Sélectionnez maintenant ce dossier de thème , puis cliquez avec le bouton droit et supprimez-le. Puisque nous ne voulons aucun fichier redondant sur notre site Web. Maintenant, dans ce HTML public également, nous avons cet axe HD. Supprimons-le également car nous n'en avons pas besoin . Nous avons donc terminé. Retournez maintenant au gestionnaire de fichiers et cliquez simplement sur votre site Web. Voici donc votre page Web. Cliquez maintenant sur la galerie. Vous avez votre galerie, puis vous pouvez cliquer sur À propos de nous. Vous avez donc votre section À propos et vous pouvez également cliquer sur nous trouver sur Facebook. Il sera redirigé vers la page Facebook. Donc, notre site Web est correct maintenant c'est la vie. Ce truc est donc pour l'hébergement gratuit. Si vous avez un hébergement payant, vous n'obtiendrez pas ce type de filigrane. C'est donc votre site Web. Maintenant, fais une chose. Déconnectez-vous de votre compte dans l'hébergeur Web. Pour ça. Cliquez sur Déconnexion ou Déconnexion. Vous vous êtes déconnecté avec succès. Maintenant, cliquez sur un nouvel onglet, puis écrivez le nom de votre site Web. Il s'agit donc essentiellement du nom de mon site Web. Donc, au fur et à mesure que j'y entre, je peux voir mon site Web. Votre blog est maintenant en ligne. Vous pouvez maintenant ajouter l'URL de votre blog à votre identifiant Instagram. Et vous pouvez également partager le site Web avec le handle Facebook et les pages Facebook, etc. Merci d'être un excellent apprenant. 56. Il est temps pour le projet de classe: Bonjour les gars, bon retour au cours. C'est maintenant l'heure du projet de classe. Pour le projet de classe, vous devez créer un site Web de blog. Pour le sujet du site Web du blog, vous pouvez choisir n'importe quel sujet. Je peux vous donner quelques idées comme la nourriture, voyages, la mode, la beauté, la technologie, les astuces de vie, etc. Le site du blogueur doit contenir la section Accueil, galerie sur nous et quelques liens vers les réseaux sociaux. Quelques conseils et astuces pour vous. Utilisez toujours un éditeur de codage, car cela vous facilite vraiment la vie en tant que développeur si nous utilisons notre éditeur de codage. Maintenant, la chose suivante est que vous devez donner une bonne indentation lors de l'écriture de votre code. L'indentation appropriée nous aide vraiment car il y aura nombreuses lignes de code et l'indentation aidera à rendre le code plus lisible. Enfin, ne paniquez pas si vous êtes coincé. Il existe de nombreuses sources sur le Web où vous pouvez consulter, comme les écoles W3 par exemple. Vous pouvez vous y rendre et trouver des solutions à vos questions, ou vous pouvez également poser des questions ici. Maintenant, c'est l'heure du livrable. Le livrable sera la capture d'écran du site Web du blog que vous avez créé. Une fois le projet terminé , vous devez partager cette capture d'écran du site Web. Je vous souhaite tout le meilleur. 57. Bonus : Comment ajouter des emojis: Bienvenue dans le cours. Dans cette vidéo, je vais vous apprendre comment ajouter des images et vous allez répéter. Pour cela, ouvrez votre éditeur. Je vais donc simplement ouvrir le Bloc-notes. Vous pouvez également utiliser Notepad Plus, Plus ou tout autre éditeur de votre choix. Maintenant, il suffit d'écrire la structure de base d'une page HTML. Je vais donc commencer par ruban adhésif, puis j'en viens à une tête. Chef. Donnons-lui un titre. Supposons que les Mandchous, c'est ça ? N'oubliez pas d' inclure également cette balise Meta. Je vais donc lui donner une valeur. Donc le métal peut définir, devrait avoir cette valeur, UTF huit. Ensuite, oubliez de saisir ceci. Ensuite, nous irons de l'avant avec le corps. Maintenant dans l'étiquette du corps. Il suffit de donner un titre, des emojis et une pause pour passer à la voie suivante, puis une balise p. Maintenant, à partir de là, comme n'importe quelle image que vous devez donner, nous avons donc besoin de cette valeur décimale pour cela. Ce que nous allons faire, c'est utiliser votre décimal HTML. Ok ? Nous avons donc ici les codes décimaux de tous les emojis. Permettez-moi donc d'ouvrir rapidement ceci. Vous avez donc un visage glané, face à des larmes de joie. Commençons donc par ceci. Je vais juste copier la valeur décimale, retourner dans l'éditeur et simplement la coller. Fermons cette balise p et sauvegardons ce fichier. Je vais donc l' enregistrer sur mon bureau. Limitez donc au HTML point et à l' endroit où il est et vendez-le. Qu'il soit sauvegardé. Maintenant, ouvrons-le. Et oui, nous avons cet emoji, alors allons-le un peu plus grand pour que nous puissions le comprendre. Je vais donc définir la taille de la police, la police. Bon, il faut que je donne l'étiquette de style. Et puis la taille de la police est égale. Ça a l'air mieux. Alors économisez. Retournez à la page Web et à l'amitié. Aucun changement. Laisse-moi en faire plus. Ok, donc tu ne devrais pas utiliser égal pour entendre mon erreur. Voyons maintenant si cela change. Oui, nous avons une plus grande montagne. Revenons maintenant à notre guide et utilisons-en un autre. Je vais donc prendre celui-ci. Je vais donc simplement copier cette décimale vers l'avant ou vers l'arrière dans votre éditeur. Ensuite, je vais le coller ici. Vois à droite. Retournez à la page Web et actualisez et vous aurez le prochain emoji. De cette façon, vous pouvez ajouter des emojis à répéter. Donc pour lui donner plus de sens, je vais juste écrire quelque chose. Supposons que c'est mon préféré et que nous ayons cet emoji. Revenons donc en arrière et rafraîchissons. Oui, c'est mon préféré et c'est beaucoup plus logique. Ainsi, vous pouvez ajouter emojis dans vos pages Web pour les rendre plus belles et plus accessibles aux utilisateurs. Merci donc d'avoir regardé cette vidéo. Nous vous verrons dans les prochaines vidéos. 58. Bonus : Comment installer Sublime Text Editor: Le cours. Continuons donc avec les installations. Dans cette vidéo, je vais vous montrer comment télécharger le texte sublime et l'installer. Allez donc sur Google et recherchez Sublime Text. Et nous l'aurons ici. Cliquez donc sur Télécharger, la version Windows et la version Linux. Je vais donc opter pour Windows 64 bit. Il suffit donc de cliquer dessus. Ok, tu as le dossier ici. Je vais donc cliquer sur Enregistrer. Maintenant, dès que vous cliquez dessus, vous allez installer une fenêtre contextuelle, et vous n'avez qu'à appuyer sur Suivant et Terminer. Donc depuis que je l' ai déjà téléchargé. Je vais donc juste vous montrer à quoi ça ressemble. C'est notre sublime éditeur de texte. Ici, vous pouvez avoir cette structure de dossiers pour votre projet. Ensuite, vous pouvez avoir l'espace où vous pouvez écrire votre code. Merci donc d'avoir regardé cette vidéo et restez à l'écoute du cours. 59. Bonus : Introduction de Jquery: Bienvenue dans le cours. Commençons donc avec jQuery. Jquery est essentiellement notre bibliothèque JavaScript en vedette. Il est essentiellement utilisé pour la gestion d'événements et une animation à d'autres fins. Passons donc à notre premier exercice et voyons comment fonctionne jQuery. Pour cela, nous devons rechercher le CDN jQuery. CDN Jquery. CDN est un réseau de diffusion de contenu. L'utilisation du CDN nous aidera donc à contacter la bibliothèque jQuery, qui est hébergée quelque part, et nous n'avons pas besoin de l'installer. Je vais donc utiliser la dernière version. Nous devons donc le copier. Ouvrons notre éditeur. Je vais donc commencer à coder dans Sublime Text. Ouvrez cet éditeur et commencez à utiliser la structure de base d'une page HTML. Html. Et puis à droite, l'étiquette de tête. Ils y sont impliqués pour porter ce code de script mamie dans la tête. Non. Secouez Ready un. OK. Et maintenant, nous devons coller le CDN. Je vais donc simplement le coller ici. Ok ? Maintenant, quand le body tag et moi allons essentiellement vous montrer une sorte de défi QCM que vous pouvez concevoir. Je vais donc juste lui donner un titre. questions Mcq et le H2. Et puis d'autres questions. Je vais utiliser H6. N'oubliez pas de faire une pause. Donc BI. OK. Donc un. Ensuite, écrivez la question : quel temps fait-il aujourd'hui ? Et puis, et H6. Encore une fois, je suis BR. Ensuite, nous pouvons commencer à écrire les options. J'utiliserai la balise p pour les options. Vous pouvez également utiliser la profondeur. Utilisons donc div ici. Et donnons l' option Signature de l'option E. Ok ? Et le tag div. Et mettons-le en forme. Donc, c'est vrai, périmé. Et la taille de la police. Supposons 1 à EM. Ok ? Et donnons-lui également un identifiant. Alors identifiez, puis donnez un identifiant. Je vais donc vous donner l'idée de la portée PT-1, option 1. Ok ? Maintenant, je vais enregistrer ça et voir à quoi ça ressemble. Alors sauvez-le. Je vais le garder sur Dexter. Nom, c'est ça ? Pour lire du code HTML à un point. Sauve ça. OK. Maintenant, allons voir à quoi ça ressemble. Nous avons donc ceci, accord, cette question semble très petite, donc nous n'utilisons rien d'autre. L'option semble affecter, la taille de la police est bonne. Passons de H6 à autre chose. On peut peut-être utiliser H4. Oui, on peut utiliser H4. Alors économisons. Et voyons voir. Mary charge. Oui, il est plus grand mais pas à la taille souhaitée. Peut-être que je peux utiliser la réinstallation. Oui, ça a l'air parfait. C'est donc une question que je réponds à une question normale. Vous ne pouvez prendre aucune question de votre choix juste pour vous faire comprendre comment cela fonctionne. C'est la météo aujourd'hui et nous avons une option en tant que Sonny. Et donnons des adoptions. Alors n'oubliez pas BR après ça. Et encore une chose, vous devez également donner une hauteur et une largeur à cette division. Permettez-moi donc de lui donner une hauteur et largeur de 50 PXE. Ok ? Copions maintenant celle-ci et créons les autres options. Nous allons donc en faire un outil d'option. Ensuite, il suffit de supprimer l'option ensoleillée, pluvieuse et B. Le reste sera le même. Passons maintenant à l'option suivante. L'option trois et ce changement font l'option C puis nuageux. Ok, alors gardons ça. Nous avons donc du temps ensoleillé, pluvieux et nuageux. OK. J'ai besoin d' augmenter la largeur. Passons donc à côté ce que S 100 px. Et maintenons la hauteur à 50 PXE. Ok, sauvegardez ce qui s'est passé ? C'est devenu 500. Pour ça. Oui, maintenant, ça a l'air très bien. Vous pouvez proposer autant d'options que vous le souhaitez. Vous pouvez également avoir l'option D. Ainsi, une fois que l'utilisateur aura choisi une option, elle sera marquée. Ok ? Maintenant, écrivons le script. Il vous suffit d'ouvrir une balise de script. Ok ? Pas des cils. Alors. Ce que vous devez faire, c'est quand vous êtes le symbole du dollar et le bon document. Et puis je me suis préparé. OK. Donc, ce document.ready, ce qu'il fera, c'est chaque fois que la page se recharge, c'est-à-dire le document qui est stovepipes, une page Web qui est prête. Il invoquera cette fonction particulière. Nous devons donc écrire la fonction pour cela. Ok ? Et puis c'est comme ça que tu devrais écrire le deck. Ok ? Et n'oubliez pas le point-virgule ici. C'est donc la structure de base des fonctions jQuery. Souvenez-vous simplement de ceci et dans ce cas, nous devons maintenant écrire notre code. Donc chaque fois qu'un utilisateur fait entendre sa voix sur cette option particulière, c' est-à-dire la division ici, nous voulons que la couleur change, d'accord ? Alors écrirons-le. Bon dollar. Ensuite, chaque fois que nous voulons effectuer certaines opérations sur la page Web à l'aide de ce document, nous allons maintenant effectuer une opération sur cette div. Pour cela, nous devons les écrire ici. Ok ? Et puis pointez sur cette fonction. Unité similaire pour obtenir cette structure, accord, dans cette fonction étrange, nous devons écrire cet événement. Donc, l'événement sera la souris et la souris et se terminera lorsque vous survolerez la division. Donc pour entrer avec la souris, nous allons écrire une fonction. Et cela contiendra l'opération que nous voulons avoir lieu. Donc, ce que nous voulons faire, c'est que chaque fois que nous couvrons une réponse, la couleur, la couleur de fond de cette option particulière changera. Alors disons ça. Encore une fois, dans ce dollar, puis entre les parenthèses, vous devez écrire la limite. Voici donc l'élément D1. C'est pourquoi j'écris ceci, ceci et puis point CSS parce que nous voulons changer le style de la division. C'est-à-dire que nous voulons faire un peu de contexte. Nous devons donc utiliser CSS. Ensuite, nous pouvons écrire la couleur de fond. Ok ? Ensuite, nous devons lui donner une valeur. Je vais donc écrire tard. Ainsi, chaque fois qu'une option est survolée , la couleur d'arrière-plan passe au gris clair. Et lorsque la souris survole cette option, elle redevient blanche. Donc pour cela aussi, nous devons écrire l'événement, sorte que ce soit la plupart des feuilles. Et puis deux points. Et puis fonctionnez. Et puis, n'oubliez pas la virgule ici car nous écrivons beaucoup d'événements. Donc de même, ce point css puis la couleur de fond. Maintenant, nous voulons qu'il revienne à ma droite. C'est donc chose faite. Maintenant, ce que nous devons faire, c'est leur organiser un événement. Cliquez sur OK, chaque fois que nous cliquons sur une option, la couleur doit changer. Supposons que la bonne option soit l'envoi. Ainsi, chaque fois que nous cliquons dessus, sa couleur va changer. Ok ? Faisons donc une chose. Alors, de quoi avons-nous besoin pour faire cela, pas dans cette fonction étrange, donc cela se termine ici. Après cela, nous devons écrire cette fonction. Donc maintenant, je vais écrire hash ou BP lorsque j'utilise idées d'utilisation de l'ID pour utiliser ce symbole de hachage, hacher OPT un, puis point. Et quel est l' événement qui est click, click, puis write function. Ok, et n'oubliez pas le point-virgule ici. Maintenant, je vais faire l'opération. Encore une fois, dollar. Ensuite, nous pouvons écrire ce point puis le CSS, puis la couleur de fond. Ensuite, nettoyez. Ok ? Maintenant, chaque fois que cette option est sélectionnée, même si la souris passe dessus, nous devons garder l' arrière-plan comme impur. Donc pour ça, encore une fois. Et ça, puis le point C. Je suis désolée, ma feuille de souris. Nous voulons le faire pour Mouse Live. Encore une fois, fonction de ce qu'il faut faire lorsque la souris quitte. Encore un point-virgule ici. Ça va ? Ensuite, nous devons écrire l'opération qui est celle-ci, puis le point css et puis encore la couleur Macron. Et puis entre, donc ça devrait rester. OK. C'est donc pour votre droit et c'était pour la bonne réponse. Maintenant, réglons les choses avec et retouchons avec l'option deux et l'option trois. Je vais donc simplement copier ce Control V. Maintenant, au lieu de l'option un, l'option deux, puis une virgule, puis l'option au repos sera visible. Maintenant, si vous cliquez dessus, la couleur d'arrière-plan sera rouge, puisqu'ils sont tous de taille n. Alors lisez et même si la souris s'en va, cela signifie vraiment. Sauvegardons ça. Maintenant. Voyons le résultat. Certains planent sur du soleil, de la pluie, du temps nuageux. Donc oui, tout fonctionne bien. Chaque fois que je le survole, il devient gris pour toutes les options. Et chaque fois que je n'ai pas faim, je déplace simplement ma souris. Il est toujours en train de se heurter en ce moment. Et cliquons sur l'option Ajouter. J'ai cliqué. Ok ? Alors lis ça. La pluie n'est pas une option. OK. Maintenant, cliquons sur dimanche et c'est vert. Alors oui, Sunny est la bonne option que nous avons choisie. De cette façon, vous pouvez définir toutes vos questions et vous pouvez simplement avoir un questionnaire QCM et vous pouvez essayer avec leurs amis et collègues. J'espère que cette vidéo vous a plu. Merci de m'avoir regardé. 60. Bonus - Jquery Toggle: Bienvenue dans le cours. J'espère que vous avez apprécié le dernier tutoriel. Passons maintenant à notre prochain exercice. Pour l'exercice suivant, vous devez ouvrir votre éditeur. Ensuite, je vais créer un nouveau fichier. Ensuite, il suffit de copier tout ce code. Ok ? Et nous n'en avons plus besoin, donc je vais juste le supprimer. Ok ? Et nous savons également que nous n'en avons pas besoin. Nous avons donc à nouveau une structure de base. graisse des joues sera et fera de l'exercice. Ok, maintenant nous allons implémenter Toggle. Voyons donc comment cela fonctionne. Pour cela, nous devons créer deux panneaux. Allons vérifier. Pour cela, nous devons créer deux balises div. Alors j'ai besoin d'un sujet. Ensuite, vous devez écrire un nom de sujet. Supposons que la joue soit prête ? Vous pouvez écrire ici ce que vous voulez. Je l'écris juste pour te faire comprendre, d'accord ? Il est déjà endetté. Maintenant, quand il créera une autre div, qui sera la description de cette rubrique. Et puis nous allons écrire une description que Java peut Java même gérer, etc. accord, nous avons donc la description maintenant entrez la balise div. Maintenant, posons ce style. Donc je vais juste styliser le tag maintenant, non ? Hachis. Et puis la description du sujet et du hachage de coma. Je vais donc faire le rembourrage puis l'alignement du texte. Donc text-align, nous montrerons l'incitation que nous donnons au centre et à gauche pour assurer la gauche et la droite. Il se sent bien, juste, il montrera le bon. Encore une fois, donnons-lui une couleur de fond. Donnons-lui n'importe quelle couleur , peut-être du jaune. Ok. Et puis quand ça pourrait donner une frontière. Je vous donne donc une bordure pleine, un px. Et donnons-lui également une couleur de bordure. Alors laisse-le faire. Ça a l'air bien. Nous devons maintenant masquer la description. Nous devons maintenant Ainsi, chaque fois que nous cliquons sur le sujet, la description doit apparaître. Donc pour ça, le rembourrage. Nous allons donc faire un rembourrage de 50 PXE et un écran droit. Aucune. Ok, on en a fini avec le style. Alors sauvegardons ça. Je vais l'enregistrer au format HTML g point sur le bureau. Alors C. Et allons voir à quoi ça ressemble. Oui, vendredi saint. Mais chaque fois que je clique dessus, je ne peux pas voir la description. Ok, alors faisons-le en utilisant jQuery. Maintenant, ce que nous devons faire, c'est encore une fois, document en dollars, une fonction prête. N'oubliez pas le point-virgule. Ok, donc dans ce contexte, nous devons écrire les événements. Donc sujet dollar hash. Donc, lorsque nous cliquons sur le sujet, la description, étape étape que vous avez vu l'événement fera clic. OK, et puis la fonction. Désormais, chaque fois qu'ils cliquent sur le sujet, la description doit plaire. Donc dollar, hachage description point légèrement plus foncé. Nous pouvons écrire l'heure. Je veux dire, le type de problème que tu veux. Donc, si c'est rapide, ça ne devrait pas être lent. Alors laissez-moi ralentir et je vais vous montrer comment régler l'heure. Alors oui, lentement. Et je pense que c'est fini. Alors sauvegardons ça. Rechargeons la page et cliquons sur jQuery. Donc oui, nous pouvons voir la description maintenant. Et si vous cliquez sur Précédent, il sera masqué. Il s'agit donc essentiellement de basculer. Ok ? Maintenant, retournez voir le rédacteur en chef. Donc, si vous voulez régler le minutage de cette chose, supposons que nous voulions qu'elle soit faite de cinq secondes. Donc tu peux écrire 5 000, oui. Ok. Et enregistrez ceci et actualisez. Donc, lorsque vous cliquez dessus et que vous ouvrez des villes, et que vous fermez cela, fermez-le très lentement. Vous pouvez régler le timing ici selon votre choix. Et si je le règle vite, et que je n'oublie pas les guillemets, enregistre ça, recharge. Et oui, il s' ouvre très vite. Donc oui, tout est question de bascule. Merci d'avoir regardé cette vidéo. Restez à l'écoute du cours. 61. Bonus : Jquery Animation: Dans cette vidéo, je vais donc vous montrer comment réaliser des animations à l'aide de jQuery. Pour cela, rendez-vous dans votre éditeur. Ok, donc je vais juste copier le code du premier exercice que je prédis pour jQuery. Celui-ci, voyez ce que la douleur contrôle et manipulez certaines choses afin d'effectuer cet exercice. Maintenant, que ce soit une question de QCM. Et au lieu de cette question, je vais écrire comme moi. Et pour les options, ce que je vais faire, c'est laisser le soleil briller. Je ne dis pas que ce soit oui. Ok. Et l'option suivante, supprimer l'adoption. Ça semble bon. Et maintenant je vais placer deux emojis. Ouais. Alors pour cela, allez sur Google et écrivez des emojis. Couches décimales. Ouais. Le premier site Web. Ok. Donc si quelqu'un dit oui, je serai heureuse. Et si quelqu'un dit non, je serai triste. Voici donc le visage heureux. Je vais juste copier le code décimal. Nous devons donc écrire une autre div, lui donner un ID. Je suis si heureuse. Ensuite, écris le code, d'accord ? De même, nous allons copier un visage triste. Trouvons-le. Oui, c'est un visage triste. Je vais donc simplement copier. OK, donc je copiais l'hexadécimal, désolé, pas l'hexadécimal. Pour copier la décimale. Ok. Tu te souviens de ce scientifique retiré pour ce visage de Majlis ? Et revenons en arrière. C'est bon. C'est un visage triste. Ouais. Pensez donc à copier le code décimal. Non. Encore une fois , je suis triste. Puis collez, puis tag Endo div. Nous avons donc un visage heureux et des frais fixes. Bon ? En conséquence, nous allons également modifier le code Java comme le code jQuery. Enregistrez d'abord ça. Je vais le garder comme joue par trois sur le pont coincé dessus. Donnez donc l'extension point HTML. Ouais. Voyons maintenant, en l'exécutant, quoi cela ressemble. Ouais. Nous avons donc ce « oui » et « non ». Et tu es comme moi. Et maintenant, ce que nous allons faire, c'est que ce soit le survol de la souris. Pour sourds. Maintenant, nous allons définir une variable appelée click. Nous n'étions donc pas les seuls. Pour cela, je vais placer ce drapeau. Donc, cliquez sur variable call to false et écrivez simplement ici. Ainsi, lorsque l'option un est cliquée, nous vérifierons F triple égal à un. Donc, si cette condition est valide, nous n'exécuterons aucun code ici. Donc, dans ce code, nous allons transformer l'arrière-plan en vert. Et ensuite, que devons-nous faire ? Une autre chose, c'est que nous devons animer cet emoji en particulier. Je vais donc l' agrandir beaucoup lorsqu'il sera sélectionné. Pour cela, vous devez sélectionner l'ID. Donc ID sera content. Puis animez par points. Ok ? Animate est donc lui-même une fonction, vous n'avez donc pas besoin d' écrire function ici. Il suffit donc d'écrire l'événement. Ce que nous devons faire, c'est changer la taille de la police. Supposons cinq EM, d'accord ? Ce sera donc notre police, la taille de la police. Pour les emoji. Dans le cas où l'option 1 est sélectionnée. Nous n'en avons pas besoin, donc je vais simplement le supprimer. Maintenant, ce que vous devez faire est simplement de copier ce code, de le coller et de le manipuler pour l'option 21 plus lorsque le clic est faux, nous devons donc changer le drapeau. Donc maintenant assigné clic avec true, sorte que nous ne pouvons choisir qu'une seule option. Maintenant, si le clic est faux, là encore, la même chose. Ok ? Et puis, comme c'est impossible, je vais faire en sorte que le fond soit rouge. Ok. Maintenant, ici, ce sera triste visage ID triste comme vous vous en souvenez, si vous vous souvenez de cette phase d'acte. Et ce sera siem, et là encore, la couleur de fond sera face aux deux. Alors sauvegardons ça et exécutons-le. Ok. ai tellement rafraîchie. Maintenant. Cliquons sur Oui. Ouais. Montrer un visage heureux. Maintenant, si je clique sur Non, cela ne fonctionne pas. D'accord, parce que j'avais déjà mis le drapeau. Maintenant, rafraîchissons à nouveau. Et maintenant nous allons cliquer sur Non. Donc oui, nous avons cette phase définie. De cette façon, vous pouvez effectuer une émission en utilisant jQuery. Vous pouvez effectuer un grand nombre de choses à l'aide de l'animation. Voyons donc ce que nous apprenons au cours de ce voyage. Merci de nous avoir regardés et restez à l'écoute du cours. 62. Bonus : Introduction à Bootstrap: Bienvenue dans le cours. Commençons donc avec Bootstrap. Bootstrap est essentiellement un framework frontal. Il contient des modèles HTML et CSS, et il contribue également à rendre le site Web réactif. Commençons donc rapidement notre premier exercice. Tout d'abord, vous devez rechercher Bootstrap CDN. Donc Bootstrap CDN. Ok. Alors cliquez dessus et vous aurez certains types de réparation CDN. Donc, au lieu d'aller ici, je vous recommande de commencer avec Bootstrap. Ensuite, vous pouvez obtenir la danse de la pertinence à partir d'ici. Donc, ce que vous devez faire, c'est simplement les copier. Ok ? Ouvrez maintenant votre éditeur de texte. J'ouvre donc Sublime Text. Maintenant. Commencez par la structure de base d'une page HTML. Et puis HTML. La balise HTML. Commencez par la tête. Nous devons mettre ce CDN dans la tête. Nous allons donc d'abord écrire le titre Bootstrap, puis la balise title. Alors ce que nous allons faire c'est copier le CDM, d'accord ? Il s'agit donc d'un CDF que nous avons copié dans la section de tête. Et maintenant, nous devons démarrer le corps. Donc, empilez le corps et l'étiquette du corps. Maintenant, ce que nous devons faire est de démarrer une balise div. Ok ? Maintenant, dans cette div, nous allons écrire class equals puis jumbo. Ok ? Et c'est juste en écrivant des cours, vous pouvez styliser cette profondeur particulière et simplement écrire, je pense que le centre technique, vous n'avez pas besoin d'écrire du texte aligné dans le style. C'est donc la beauté de Bootstrap. Ensuite, vous pouvez écrire le titre que vous voulez donner. Je vais donc écrire get started, bootstrap puis terminer le tag H1. Non, c'est ça ? Bootstrap est un framework. Et fermez la balise p puis la balise div. D'accord, nous avons écrit le code. Emails, sauvegardons ça. Gardez-le sur mon deck, et donnez-lui un nom. Je vais m'appeler Bootstrap. HTML à un point. Ok ? Et enregistrez ça. Lancez-le et voyons le résultat. Nous avons le résultat. Donc pour ce qui est du jumbotron, vous voyez ou ce qu'il fait de nous, il fait le fond sur le côté gris clair. Et vous obtenez également cette rubrique, qui est un lien magnifique en général, si vous utilisez chacun d'eux, il ne viendra pas aussi bien. Alors lancez-vous avec Bootstrap et vous aurez une description simple sur que bootstrap est un framework frontal. De cette façon, vous pouvez utiliser Jumbotron. Donc comme vous l'avez déjà vu, juste en mentionnant la classe, encore une fois, en mentionnant simplement le jumbotron de classe et le centre technique, nous avons obtenu ce truc en particulier. Donc, bien conçu pour vous montrer le CSS et tout, vous devez être curieux, vous devez être curieux, comme cela se passe pour cela ou cliquez avec le bouton droit de la souris et allez dans Inspect. OK, puis cliquez sur cette icône et sélectionnez. Supposons que je veuille voir le CSS derrière cette chose particulière. Alors cliquez ici. Maintenant, vous pouvez voir, si vous pouvez voir ici Jumbotron puis point H1. Et il a un héritage coloré. Et puis il y a une taille de police particulière. C'est ce que tu as fait. Nous n'avons pas assigné telles valeurs pour la police et tout, mais nous obtenons toujours cela. C'est donc en fait fait fait par Bootstrap, comme nous l'avions déjà inclus, c'est CDN. Donc, obtenez-le vraiment à partir de bootstrap, et il est déjà conçu. D'accord, si vous le souhaitez, vous pouvez apporter quelques modifications et voir comme si je faisais simplement les statistiques px comme 20. Ainsi, vous pouvez immédiatement voir le changement. Mais comme il ne fait que nous montrer ici, si nous actualisons la page, elle reviendra à sa forme originale. D'accord, c'était une très brève introduction à propos de Bootstrap. Dans le prochain exercice, nous en apprendrons davantage. Merci d'avoir regardé et restez à l'écoute du cours. 63. Bonus : Grille de Bootstrap: Bonjour les gars, bon retour au cours. Nous savons donc déjà comment implémenter un jumbotron. Bon, passons à l'exercice suivant. Ce que je recommanderais, c'est suffit de copier ce code à partir d'ici, de créer un nouveau fichier et de le coller pour l'écrire encore et encore. Nous avons donc tout le CDN et tout est configuré. Maintenant. Nous allons en apprendre davantage sur ce qu'on appelle un conteneur. Donc la mort, il existe une classe appelée conteneur. Laissez-moi vous montrer ce que ça fait. Permettez-moi de garder ce récipient intérieur Jumbotron. Permettez-moi d'aller de l'avant avec l'indentation. L'encodage par indentation est très important. Maintenant, ça a l'air bien. Alors sauvegardons ça. Je vais l'enregistrer en tant que point HTML Boot Strap. Et lançons ça et voyons. Comme vous pouvez le voir dans Bootstrap 1, nous avions ce Jumbotron, qui avait toute la longueur de l'écran. Mais chaque fois que j' utilise un conteneur, il y a un compresseur électrique. Cela est dû au fait que le conteneur laisse une certaine marge à gauche et à droite. OK. Donc, de même, lorsque vous inspectez et voyez comment il fait, essentiellement dans le conteneur Bootstrap est utilisé pour rendre le site Web assez Salt Lake pour obtenir le site Web comme ordonné, mec, et laisser des marges inutiles et tout pour qu'il soit beau. Ok, donc juste comment ça fonctionne. Et dans cette vidéo en particulier, je vais essentiellement parler du système de grille dans Bootstrap, qui contribue en fait à rendre le site web très réactif. Je vais donc juste vous montrer comment cela fonctionne. Bon, laissez-moi vous montrer la structure de base de la grille. Il s'agit d'un système de grille Bootstrap. Ce qu'il fait c'est qu'il divise l'ensemble de l'écran en petites plages, d'accord ? Vous pouvez également le voir comme deux petites colonnes. Il peut donc avoir au maximum deux colonnes. Maintenant, dans le premier, vous pouvez voir la travée 1, lac, la taille un. C'est en termes d'envergure. La taille de chaque colonne est égale à un. Et vous pouvez y compter 12 colonnes. La prochaine ligne pour laquelle tu peux voir la portée, c'est pour ça, d'accord ? Donc, si nous additionnons quatre plus quatre plus quatre, nous obtenons encore 12. Ok ? De cette façon, nous pouvons définir le système de grille et organiser notre contenu en conséquence. Donc, ici, vous pouvez bien voir la fessée, donc cela prend essentiellement tout l'écran. Laissez-moi vous montrer comment cela fonctionne afin que ce soit plus facile pour vous. Revenons au code. Encore une chose avant de poursuivre. Donc, en dehors de cette colonne, nous avons autre chose, savoir les classes de grille. Ok ? Donc, ce qu'il fait, c'est qu'il a certaines classes comme l'excès S, M et D et l'énergie. L'accès se fait pour les lacs. De très petits écrans comme les téléphones. Sm c'est quoi ? Les tablettes, qui sont un peu. Et des MD pour les petits ordinateurs portables. Et LG c'est quoi ? Les gros ordinateurs portables et les ordinateurs de bureau, comment sont-ils mis en œuvre ? Je vais vous montrer le code. Commençons donc. Bon, maintenant ce que nous allons faire, c'est créer différentes colonnes. Maintenant. Ce conteneur sera là, nous utiliserons donc un autre conteneur. Maintenant. Nous allons commencer par un nouveau conteneur. Classe Div. Balise div de conteneur. Ok ? Maintenant, à l'intérieur de ce conteneur, ce que nous aurons c'est Class appelé à faire, d'accord. Donc classe div. De cette façon, nous allons diviser l' écran en lignes et en colonnes. Il suffit donc de tenir bon et de voir quelle est la sortie. Commençons par écrire rapidement le code. Ok, maintenant nous avons la ligne de classe div, donc nous avons la première ligne. Et dans cette première ligne, disons que nous allons avoir trois colonnes peut-être, oui, trois sons de colonnes, mais maintenant écrivez def king et débarrassez-vous de la classe. Et la classe sera colonne ici. Maintenant, nous devons mentionner la taille de la colonne. Comme je te l'ai déjà dit. Permettez-moi de montrer à nouveau la photo. Comme je vous l'ai déjà dit, vous devez donner la portée de ces colonnes particulières. Ok ? Supposons que je veuille trois colonnes. Donc, si je veux créer trois colonnes, cela signifie que vous pouvez voir sur la deuxième ligne que nous avons trois colonnes. Suspension avant pour h. Donc donnons la portée est de quatre, donc colonne. Et puis c'est un grand écran puisque je fais sur mon deck stop. Donc LD. Et puis, pour ne pas revenir ici, nous pouvons donner un tag de titre h1 et h3, et bon, c'est la première colonne. Ok ? Et la balise p, nous avons notre première colonne. Maintenant, dans la même ligne, nous allons avoir la deuxième colonne. Il suffit donc de copier ce code particulier. La colonne affichera de nouveau la fonction Span avant. C'est absolument vrai. Et ce sera notre deuxième colonne. Voici notre deuxième chronique. Très bien. Encore une fois, nous allons avoir une autre colonne. Puisque la taille signifierait que 12444 fera. Non, c'est la troisième colonne. Et voici la troisième colonne. Maintenant, lançons ça rapidement et voyons. Oui, nous avons donc trois colonnes ici. Il s'agit d'une seule ligne et nous avons trois colonnes. Maintenant, ce que nous allons faire, c'est que nous allons avoir une autre rangée. Supposons que nous ayons deux colonnes , l'une de span. Et quoi, j'en ai dépensé dix. Allons-y. Alors revenez. Donc cette loi, NCL. Il aura donc une autre ligne, classe div. Tout va et div tag. Et maintenant, nous allons avoir deux colonnes. Un, j'en dépenserai 21, dix ans. OK, donc définissez la dernière colonne, puis LG, puis, ok, dans cette balise div. Supposons que nous écrivions écrivions trois streptocoques puis NH3. Et encore une fois la colonne suivante. Donc div, class et column et vide. Et puis c'est génial. Et écrivons quelque chose ici. Bienvenue dans Trap. Ça a l'air bien OK, maintenant sauvegardons ça et lançons-le. J'espère donc que vous êtes en mesure de le comprendre. Laissez-moi faire une chose, laissez-moi utiliser la couleur de fond. Cela vous sera très utile pour comprendre. Et donc, ce que je vais faire, prenons la couleur de fond. Supposons un rouge. Permettez-moi d'utiliser quelque chose de plus léger. Ça a l'air bien De même, nous aurons une autre couleur de fond. Supporte Hello. C'est juste pour vous montrer la portée. Ok, rafraîchissons-nous. Maintenant, vous pouvez voir que cela a cette envergure de deux et que cela a ce panoramique éteint. Dix. Ok ? C'est ainsi que fonctionne le système de grille. Maintenant, comme je vous l'ai dit, ce système de grille rend le site Web différent de la façon dont je vais vous montrer à nouveau, allez à Inspect. Maintenant, ce que nous allons faire, c'est que, comme vous pouvez le voir, il est déjà raccourci. Maintenant, cliquez sur cet appareil pour Lima. Ouais. Ainsi, lorsque nous avons la résolution de l'écran et que nous les réduisons, vous pouvez voir que les colonnes sont déjà placées comme ceci. Cela n'arrivera pas si vous n'utilisez pas Bootstrap. Alors laissez-moi voir, laissez-moi voir pour l'iPhone X. Voici donc comment cela se voit. Voyons voir pour iPad. C'est comme ça que ça se voit. Si vous cliquez sur responsive et que vous le rendez très petit, même alors il ne se casse pas. Donc, même pour le jumbotron que vous voyez, commencez avec Bootstrap. Et si je le réduis, c'est le nom suivant, d'accord ? Dans des cas normaux, cela n'arrivera pas. Ok, c'est la beauté du bootstrap. Il fait le côté des lèvres quand il naît. Il s'agissait donc de la grille Bootstrap. Merci d'avoir regardé cette vidéo. Entraînez-vous quand et collez le pieu dans le parcours. 64. Bonus : Comment créer Navbar en utilisant Bootstrap: Bienvenue dans le cours. J'espère que tu te débrouilles bien. Dans cette vidéo, je vais vous montrer comment créer une barre de navigation. Pour cela, ouvrez votre éditeur de texte et copiez simplement le code que vous avez déjà écrit dans votre exercice précédent et collez-le. Nous aurions donc besoin du CDN de Bootstrap, mais nous n'aurons pas besoin de ce devis. Donc, tout ce qui se trouve à l'intérieur de l'étiquette corporelle, retirez-les simplement Ok. Nous devons maintenant créer un talent pour cela. Tout d'abord, nous devons ouvrir la balise de navigation. Ok ? Après ça, nous devons donner un cours. La classe rencontrera navbar, navbar inverse. Bon, comme vous le savez déjà, dans Bootstrap, nous utilisons des classes afin d' attribuer certains styles à nos éléments. Quelle est donc la signification de ces classes lorsque nous verrons la sortie. Après cela, nous devons fermer la balise de navigation. Et puis dans cette classe de balise div démarrée , puis conteneur fluid. Bon, alors qu'est-ce que le liquide de récipient fait cela dans le dernier exercice que nous avons appris sur le conteneur, ce qu' il fait, il laisse juste un espace entre le côté gauche et le côté droit de l'écran et créer une certaine marge. Mais si nous utilisons du liquide en récipient, cela n'arrivera pas. Il utilisera la largeur totale de l'écran. Ok ? Donc cette balise div, et maintenant dans celle-ci, nous allons écrire le nom de notre sourd lip-sync. Et donnons-lui un cours. Donc, dans cette classe particulière, nous aurons le nom du site Web. Poignée de trait d'union de la barre de navigation. Ok. Maintenant, à l'intérieur de cela, vous devez écrire. Et une bonne classe de deck. La classe sera donc la marque de la barre de navigation. Ok ? Pas de hf donné. Et maintenant, écrivez le nom de votre site web. Je vais juste écrire le nom commercial du tarif , puis l'étiquette d'ancrage. Maintenant, ce que nous allons faire, c'est écrire le menu horizon. Comme la page d'accueil, la plage que nous voyons généralement sur notre site Web. Nous allons donc faire la même chose. Et puis classe, puis donne la navigation de classe et la barre de navigation. Et puis vous vous familiariserez bientôt avec ces cours. Alors tiens bon. Si tu penses que ce cours est trop long pour que tu t'en souvienne. Maintenant, lancez LI, taguez, puis classez, puis activez. Donc, ce que fait la classe active , c'est qu'elle vous montre sur quelle page vous êtes actuellement mis en surbrillance. Et par défaut, nous sommes sur la page d'accueil pour la première fois. C'est pourquoi j'écris actif pour la page d'accueil. Encore une fois, nous allons commencer notre balise d'ancrage, hf hash, puis nous écrirons la balise d'ancrage, une balise de fin. Ensuite, nous aurons une autre page, Disons la page À propos. Encore une fois, LA et puis les cours. Et ensuite, que devez-vous faire également ? Tout cela n'a vraiment pas besoin de cours car actif nous sommes déjà mentionnés. Pas besoin de cours dans mon lit. Alors ancre hf égal et hachage. Et puis écrivez à propos de. Et puis je pourrais tank, puis je techno et nous sommes prêts à aller avec eux. Horizon trop nombreux. Maintenant, nous allons ajouter un autre menu sur le côté droit du cou, mais ce sont des menus horizontaux. Maintenant. Bon ? Prochain arrêt, à droite , le menu, qui aura l' inscription et d'autres choses. Encore une fois, nous allons ouvrir, puis faire les cours. Donc nous perdons une classe différente maintenant ici, donc nav, navbar, nav, et cette importante barre de navigation, alors super. Ce sera donc le lieu. Le menu à droite de l'écran. Fermez maintenant le tag. Et encore une fois, nous devons ouvrir la balise LA puis l'ancre plutôt que le hachage HF. Ensuite, nous utiliserons pour la même durée et dans cette icône de glyphe de classe. Et puis cliquez sur Je peux, accord, simplement dans la plage. Et puis écrivez inscription, étiquette d'ancrage. Et aussi, OK, maintenant je vais juste copier ce truc en particulier et le coller. Je vais maintenant créer un bouton de connexion. Alors remplacez ça par Logan. Et je vais aussi changer. Je peux verrouiller le trait d'union et je pense que c'est bon. Je vais enregistrer ce code HTML de barre de navigation. Et lançons-le et voyons. Nous avons notre première barre de navigation. Ok, donc c'est le nom de notre site web, cette maison et vous pouvez trouver l'arrière-plan un peu plus sombre puisqu'il s'agit de la page active. Ensuite, nous avons l'élément de menu suivant. Nous avons le vélo d'inscription et l'option d'inscription, l'option de connexion. C'est une barre de navigation très basique, mais je pense que c'est bon. Vous pouvez donc rechercher différents types de barres de navigation sur Internet. Par exemple, si vous pouvez aller sur le site officiel de Bootstrap et que vous pouvez obtenir différents types de sieste, ce qu'ils veulent utiliser, différents types de barres maintenant pour votre site Web. Donc, ce que je recommanderais, c'est d'aller sur Bootstrap, puis encore Bootstrap. Et puis allez simplement appuyer sur slushy CSS et JavaScript. Et vous pouvez voir que vous avez certains types de choses comme sortir, alerte, violet, liste déroulante, etc. Vous pouvez, si vous cliquez sur Composants, vous pouvez obtenir tout ce type d'icônes de glyphes que j'ai utilisées. Vous pouvez ainsi obtenir le nom de chaque icône de glyphe et les utiliser selon votre choix sur votre site Web. Nous utilisons donc simplement ce glyphe que je peux utiliser pour notre inscription. Vous auriez donc pu utiliser n'importe quelle icône pour votre commodité. Ok, donc sur le côté droit, je pense que nous pouvons trouver la barre de navigation. Soulevez-le. Ouais. Si vous cliquez dessus. Donc oui, c'est un réseau vraiment basique. Tu aurais pu l'attraper. Il s'agit du code total de cette barre de navigation. Vous pouvez donc, ce que vous pouvez faire pour que vous puissiez simplement copier. Retournez dans votre éditeur. Dossier. Nouveau, Trouvez, collez-le. Ok. Il est préférable de le coller dans le code en question. Alors ce que je recommanderais ce café, ce truc total, File, New File, puis collez-le ici. Maintenant, dans la section du corps, vous allez supprimer tout le code que vous avez écrit. Ok ? Donc jusqu'ici, et maintenant copiez ceci et collez-le. Rien à faire. Ctrl-s, barre de navigation, puis pour pointer le HTML et l'enregistrer. Voyons quel est notre résultat. Voyons quel est notre résultat. Nous avons donc l'outil d'accrochage. Et oui, tu peux avoir une barre de navigation. Je me demande ce qui est écrit. Vous avez la marque, les liens et tout le reste. J'espère que vous avez apprécié cette vidéo. Restez à l'écoute du cours. 65. Merci et prochaines étapes: Salut les gars, félicitations pour avoir réussi jusqu'au bout. J'espère que ce cours vous a aidé à mieux acquérir ces compétences . N'oubliez pas de laisser des commentaires pour ce cours. Pour plus de mises à jour, vous pouvez rejoindre ma communauté answer them où je partage beaucoup de contenu, matériel d'apprentissage et bien plus encore. Merci pour le temps que vous m'avez accordé et je vous souhaite tout le meilleur dans la vie. Continuez à apprendre.