Share
Vous venez donc d'acheter un modèle HTML et vous devez maintenant le personnaliser avant de pouvoir le mettre en ligne, mais vous n'êtes pas familiarisé avec le code et vous ne savez pas comment vous y prendre. Eh bien, soyez tranquille, car dans ce tutoriel, nous allons vous guider tout au long du processus..
Nous allons travailler sur l'hypothèse que vous n'aviez jamais vu une ligne HTML auparavant, et encore moins modifiée, donc peu importe la nouvelle méthode de travail avec le code, vous verrez exactement quoi faire à chaque étape du processus. façon.
Commençons au tout début.
Techniquement, la réponse à cette question est “Hyper Text Markup Language”. Toutefois, pour personnaliser un modèle, vous pouvez considérer HTML comme une série de balises d'ouverture et de fermeture, comme ceci:
Les balises sont indiquées avec < et > signes, et la balise de fermeture comprend toujours un /. Les paires de balises ont un contenu entre elles comme ceci:
John Smith, développeur front-end
Parfois, cependant, il existe aussi des balises autonomes, sans partenaire de fermeture, comme ceci:
Différentes balises HTML font apparaître différents types de contenu sur une page Web. L'exemple ci-dessus de Les balises créeraient un gros titre intitulé "John Smith, développeur frontal", et l'exemple
Pour éditer un modèle HTML, il vous suffit de savoir quelles balises représentent les parties de la page que vous voulez modifier, comment les trouver dans le code et comment les éditer afin qu'elles affichent ce que vous voulez..
Oui, il est tout à fait possible d'éditer du HTML dans Notepad ou un programme similaire, mais les choses iront beaucoup plus facilement pour vous si vous utilisez une application d'édition de code appropriée. L'une des principales raisons est que vous allez voir votre code surligné en couleur, comme vous le verrez bientôt, ce qui facilitera la lecture et l'édition..
Je recommande Sublime Text, que vous pouvez télécharger ici: https://www.sublimetext.com/3
Téléchargez le modèle que vous avez acheté. Dans le cas de ce tutoriel, nous utiliserons ce modèle «Nettoyer CV» pour illustrer.
La plupart des modèles HTML viendront dans un fichier ZIP - si c'est le cas, continuez et extrayez le vôtre maintenant. Puis regardez dans les dossiers du modèle jusqu'à ce que vous trouviez le fichier «index.html» ou «index.htm»..
Dans notre exemple de modèle de CV, le fichier «index.html» se trouve dans le répertoire «01.html-website»..
Maintenant, ouvrez ce fichier dans Chrome. Même si Chrome n'est pas votre navigateur par défaut ou votre navigateur préféré, utilisez-le quand même, car nous allons utiliser certains outils intégrés pour vous aider dans le processus de modification..
Si vous modifiez un modèle pour la première fois, essayez de ne pas vous lancer dans l'idée de modifier les couleurs et la mise en page pour l'instant. Pour ce faire, vous devez vous plonger dans CSS, la langue responsable du style de page. C'est une bonne idée de vous concentrer sur une chose à la fois lorsque vous êtes novice dans la personnalisation de modèles, et que HTML est le meilleur endroit pour commencer..
Pour commencer, jetez un coup d'œil à votre modèle dans Chrome et déterminez les éléments et images écrits sur la page que vous souhaitez modifier. Si vous le souhaitez, vous pouvez préparer une liste afin de pouvoir vérifier et vérifier chaque élément au fur et à mesure que vous apportez vos modifications..
Dans le cas de notre modèle de CV, nous voulons changer:
Maintenant que nous avons une liste d’éléments à modifier, nous pouvons commencer à localiser leurs balises HTML correspondantes dans le code. Commençons par le nom.
Cliquez avec le bouton droit de la souris sur le nom, qui se lit «John Smith» par défaut, puis sélectionnez Inspecter:
Un panneau comme celui-ci devrait s'ouvrir dans votre navigateur:
Le panneau "Inspection"Ce panneau vous donne une façon interactive de regarder le code. Passez votre souris sur la ligne qui montre …
En plaçant votre souris sur différentes lignes de code et en repérant les zones éclairées de la page, ce panneau vous aide à déterminer quel code correspond à quel élément. Vous continuez à survoler différentes lignes de code jusqu'à ce que la partie que vous recherchez s'allume.
Maintenant développez le h1 balises en cliquant sur le petit triangle à leur gauche et vous devriez voir le contenu entre elles, c.-à-d.. John Smith Développeur frontal.
Ce libellé correspond à ce que vous voyez à l'écran, vous savez donc que vous avez trouvé la bonne partie du code..
Il est maintenant temps d'ouvrir votre fichier HTML pour le modifier. Ouvrez le fichier “index.html” dans Sublime Text et vous devriez voir quelque chose comme ça:
Vous voulez trouver ici le code qui correspond à ce que vous avez vu dans l'inspecteur Chrome. Faites défiler jusqu'à ce que vous le trouviez sur les lignes 61 à 64.
Maintenant, vous pouvez modifier le contenu entre les balises pour changer le nom et la profession. Commencez par éditer «John Smith» en votre propre nom:
Ensuite, entre les balises, changez “Front End Developer” en votre propre profession.
Enregistrez votre fichier, puis actualisez le modèle dans Chrome. Vous devriez voir vos modifications apparaître comme suit:
Maintenant, vous avez le processus de base vers le bas:
Répétons le processus pour éditer le reste du contenu que nous voulons personnaliser.
Ensuite, nous ajouterons notre propre image à gauche du nom et de la zone professionnelle. Cliquez avec le bouton droit sur l'image et inspectez-la, puis notez la balise correspondante:
Vous pouvez voir dans la fenêtre de l'inspecteur que cette ligne est directement au-dessus des lignes que nous venons de modifier:
Accédez à votre fichier HTML et recherchez la balise à la ligne 59:
Pour cette balise, vous devrez changer la valeur du src attribuer vous voyez à l'intérieur du img étiquette. Pour ce faire, vous éditez ce qu'il y a entre ses guillemets. Vous allez changer le nom de fichier et l'emplacement de votre propre image.
Prenez une image de vous ayant une taille de 150px par 150px, (ignorez que le nom du fichier indique 140x140.png, la taille est en fait de 150x150).
Déposez votre image dans le sous-dossier «_content»; il se trouve dans le même dossier que votre fichier «index.html».
Maintenant, dans votre fichier HTML, changez la valeur du src attribut, en remplaçant «140x140.png» par le fichier que vous venez d’ajouter au sous-dossier «_content». Assurez-vous que l’extension de fichier que vous tapez est identique à celle de votre fichier, par exemple. “Png” / “jpg”:
Enregistrez votre fichier, actualisez Chrome et vous devriez voir apparaître votre nouvelle image:
Modifions maintenant les liens sur les icônes de réseaux sociaux dans le coin supérieur droit du modèle. Comme avant, cliquez avec le bouton droit sur l’une des icônes et inspectez-la. Dans la fenêtre, regardez la ligne au-dessus de celle qui est en surbrillance et vous verrez qu’elle contient le texte «icône Facebook». Nous allons utiliser ceci pour trouver le code dans notre fichier HTML.
De retour dans Sublime Text, appuyez sur CTRL + F et lancez une recherche pour "facebook-icon". Vous devriez le trouver à la ligne 75.
le une la balise sur la ligne 75 est ce qui crée le lien sur l’icône, et le href L’attribut que vous voyez à l’intérieur de celui-ci détermine l’emplacement de ce lien. Vous aurez besoin de changer la valeur de cette href attribuer à votre URL Facebook (par exemple: https://www.facebook.com/mylink).
Remplace le # c'est là par défaut avec votre URL. Faites la même chose pour Twitter sur la ligne 79, Google+ sur la ligne 83 et LinkedIn sur la ligne 87..
Si vous souhaitez supprimer entièrement une icône, mettez en surbrillance son lien en partant de l'ouverture. tag et finition à la fermeture tag, puis supprimez ce code.
Maintenant, enregistrez et actualisez votre site, puis lorsque vous cliquez sur les liens, ils devraient aller au bon endroit.
Ensuite, changeons les informations de contact juste en dessous des icônes sociales.
Commencez par inspecter le mot «Email» afin que nous puissions trouver où cette section d'informations de contact commence dans le code. Prenez note de la ligne de code que vous avez mise en surbrillance et de la ligne ci-dessous pour la faire correspondre dans votre fichier HTML..
Dans Sublime Text, appuyez sur CTRL + F à nouveau et cette fois, recherchez «Email». Vous devez localiser l'instance du mot «Email» qui est entourée d'un code correspondant à ce que vous avez vu dans la fenêtre de l'inspecteur..
Vous le trouverez à la ligne 94. Mettez en surbrillance l'adresse électronique par défaut «[email protected]» aux deux emplacements de cette ligne:
Puis remplacez-le par votre propre adresse e-mail. Sur la ligne suivante, vous pouvez également remplacer le numéro de téléphone par le vôtre, et sur la ligne ci-dessous, vous pouvez remplacer l'adresse Web par la vôtre:
Continuons maintenant et commençons à éditer les sections principales du CV du modèle. Ces sections comportent quelques parties. Nous allons donc commencer par inspecter chacune d’elles afin que vous sachiez quoi rechercher dans votre code. Ce sera également une occasion pour vous d’en apprendre un peu plus sur la navigation dans la fenêtre de l’inspecteur afin de rechercher différentes parties de votre site..
Faites défiler jusqu'à la section «Profil professionnel», cliquez avec le bouton droit de la souris sur le paragraphe de texte et inspectez-le..
Dans l'inspecteur, vous verrez qu'il a mis en évidence un p tag-this tag est responsable de la création de paragraphes dans votre texte.
Ensuite, nous voulons savoir à quoi ressemble une section de texte d'une section de CV dans le code, pas seulement des paragraphes individuels. Dans la fenêtre de l'inspecteur, cliquez sur la ligne de code située au-dessus du paragraphe que vous venez d'inspecter et tout le texte devrait s'allumer:
Cela vous indique que chaque section de code est encapsulée dans les balises div est l'abréviation de division, et ces balises sont utilisées pour contrôler la mise en page et le style.
Inspectez maintenant le titre de la section du CV, «Profil professionnel»:
Au début, tout ce que vous voyez est un autre ensemble de div Mots clés. En effet, l'en-tête réel est imbriqué entre ces balises..
Appuyez sur ce petit triangle au bout de la ligne pour l'agrandir et voir son contenu, puis répétez l'opération sur la ligne suivante jusqu'à ce que vous voyiez le texte «Profil professionnel» que vous recherchez. Vous le trouverez enveloppé dans …
Maintenant que nous savons à quoi ressemble le code pour chaque partie de cette section du CV, nous pouvons revenir à Sublime Text et commencer à le modifier..
Placez votre curseur tout en haut de votre document HTML pour pouvoir commencer à chercher en commençant par le haut. presse CTRL + F et recherchez «cv-item». Continuez à chercher jusqu'à ce que vous trouviez l'instance du code Vous pouvez maintenant remplacer le texte de la section Profil professionnel par le vôtre. Enveloppez chaque paragraphe de votre texte avec … Lorsque vous avez terminé, assurez-vous que la balise de paragraphe d'ouverture de votre dernier paragraphe de la section comprend l'attribut … Si vous enregistrez votre document HTML et actualisez votre site, vous devriez voir que tout dans les deux premières sections a été personnalisé. Nous pouvons maintenant éditer les sections de CV restantes comme nous venons de le faire avec le “Profil professionnel”. Inspectez chaque partie de chaque section pour vous familiariser avec le code que vous devez rechercher afin de le modifier.. Inspecter un titre d'emploi: Inspecter une période d'emploi: Inspecter une liste à puces: Utilisez la même approche que celle que vous avez utilisée pour modifier la section «Profil professionnel» afin de modifier le contenu des sections restantes du CV. Pour modifier les titres, les périodes de travail ou les listes à puces, recherchez le code correspondant à ce que vous avez vu dans la fenêtre de l'inspecteur, comme vous l'avez fait pour chaque modification.. Utilisation … Remarque: si vous souhaitez ajouter de nouvelles sections de CV ou supprimer des sections existantes, vous devez utiliser l'inspecteur pour rechercher les balises de code qui enveloppent toute la section.. Dans cet exemple, vous voyez que toute la section est entourée des balises. Dans votre code, vous pouvez maintenant rechercher l'intégralité de ce bloc de code et le copier et le coller pour créer un nouvel élément, ou supprimer le tout si vous souhaitez vous en débarrasser.. Avec les sections de votre CV modifiées, nous en sommes au dernier élément de notre liste de modifications; le message de copyright dans le pied de page. Encore une fois, nous utiliserons le même processus. Cliquez avec le bouton droit sur le message de copyright et inspectez-le: Recherchez ensuite le code correspondant dans votre code HTML et modifiez-le avec l'année en cours et votre propre nom: Bien joué! Vous venez de personnaliser entièrement ce modèle HTML pour afficher votre propre contenu. J'espère que vous vous sentez maintenant en confiance pour pouvoir personnaliser davantage le code à l'avenir.. Le modèle sur lequel nous avons travaillé est peut-être relativement simple, mais rappelez-vous que le processus d’édition est toujours le même, quelle que soit sa complexité. Inspectez simplement le modèle et identifiez le code de la pièce que vous souhaitez modifier, puis trouvez-le dans votre fichier HTML et modifiez-le.. Lorsque vous éditez, si vous voyez une balise HTML que vous ne comprenez pas, ne vous laissez pas ralentir. Il y a une quantité infinie d'informations en ligne pour vous aider à apprendre ce que chacun fait.. Pour une aide supplémentaire en cours de route, consultez ces excellents guides d’apprentissage:Profil professionnel
classe avec la valeur dernier, comme ça: 
p comme pour la section "Profil professionnel", si vous terminez une section par un paragraphe, assurez-vous que son tag comprend classe = "dernier", c'est à dire. 
Modifier le message de copyright
Et tu as fini!
Accentsconagua
