Initiation et cours HTML

  • Introduction

    Le but de cette section est de vous initier au langage HTML pour que vous soyez rapidement capable d'ajouter du code HTML sur vos boutiques zlio. Nous ne détaillerons pas de manière exhaustive toutes les bases du language (il existe déjà de très bons sites sur ce sujet dans notre rubrique liens utiles) mais nous vous présenterons les éléments indispensables pour améliorer vos boutiques zlio.

    Présentation du HTML

    Le HTML (Hypertext Markup Language) est un language utilisé pour la création des pages web. Il permet de décrire et de mettre en forme le contenu des pages internet. Il repose sur un système de balises.

    Comment voir le code HTML d'une page web?

    Pour voir le code HTML d'une page internet, il suffit de cliquer sur la page avec le bouton droit de la souris puis de sélectionner l'option "Afficher la source" ou "Code source de la page". Essayez par exemple d'afficher le code HTML de votre boutique ou de la boutique www.yojafashion.com, le texte légèremenent imcompréhensible (pour l'instant mais bientôt vous comprendrez un peu mieux) que vous allez voir c'est la traduction de votre page internet sous forme de langage informatique HTML.

    Structure de base du code HTML

    Le langage HTML se base sur un système de balises. Le principe est simple : un contenu est placé entre deux balises (une balise ouvrante et une balise fermante) comme dans l'exemple <title>Mon cours HTML</title>. La balise ouvrante est <title> et la balise fermante </title>, à noter que la balise fermante est précédée du caractère /. Ici la balise <title> permet d'indiquer que le contenu "Mon cours HTML" représente le titre de ma page HTML. Ce titre est affiché tout en haut de votre navigateur internet (au dessus du menu "fichier", "edition",...).

    Essayez par exemple d'afficher le code source de cette page, vous pourrez remarquer dans le haut du code la ligne suivante : <title>yoja-web - cours HTML - initiation au langage HTML</title>. Ce titre est bien affiché en haut de cette page internet.

    Maintenant que vous avez quelques bases du langage HTML, vous pouvez passer à l'étape "Structure de base" pour analyser la structure d'une page Internet.

  • Structure de base d'une page Internet

    Voici la structure de base de toutes les pages Internet :

    Comme expliqué dans la partie "Présentation", vous pouvez y constater l'utilisation de balises et l'apparation d'une autre notion essentielle du langage HTML à savoir l'imbrication de balises. Dans l'exemple ci-dessus, nous pouvons remarquer que la balise <body> est contenue à l'intérieur des balises ouvrante et fermante <html>. De même, la balise <title> est contenue dans la balise <head> elle-même contenue dans la balise <html>, on dit que les balises sont imbriquées les unes dans les autres.

    Analyse de la structure HTML

    Il est à noter que cette imbrication respecte une certaine logique de contenu et conteneur. Ainsi la balise <html>, est la balise de plus haut niveau qui contient toutes les autres balises. Voici une description rapide des balises de notre exemple :

    htmlBalise principale qui permet d'indiquer que son contenu est du HTML
    headHead signifie entête, cette balise contient des informations importantes sur la description de votre page Internet comme par exemple son titre ("title")
    titleComme nous l'avons déjà vu, cette balise permet d'indiquer le titre de la page Internet. Titre affiché tout en haut de votre navigateur Internet
    bodyBody signifie corps, cette balise contient le contenu de la page Internet c'est à dire tout ce qui est visible lorque que vous consulter une page Internet
    astuce yoja

    le titre de la page d'accueil de votre boutique zlio est contruit à partir des champs "titre de la boutique" et "slogan de la boutique" de la rubrique "identité" de votre console d'administration. Le titre des pages catégorie de votre boutique zlio est contruit avec le champ "titre de la boutique" et le libellé de la catégorie. Nous vous conseillons de prendre soin d'optimiser les mots clés dans le titre car celui-ci est considéré comme très important par les moteurs de recherche.

    Créer une page Web

    Nous allons créer ensemble votre première page web. Pour cela, il suffit de suivre les instructions suivantes :

    - Ouvrir un éditeur de texte, par exemple "Bloc Notes"
    - Copier/Coller les lignes de code HTML en haut de page pour cela cliquez gauche sur le code, puis appuyez simultanément sur les touches Ctrl et A (Ctrl+A). Les lignes doivent être sélectionées (surlignées) puis faites Ctrl+C (copier), retournez dans votre éditeur de texte puis coller les lignes (Ctrl+V).
    - Enregister le fichier sous la forme monsite.html

    Votre première page Web est desormais créée, vous pouvez essayer de voir le résultat en ouvrant le fichier avec votre navigateur internet (clic droit sur le fichier puis ouvrir avec "internet explorer" par exemple). Maintenant que vous possedez les bases du langage, nous allons pouvoir étudier différentes balises HTML qui pourront être utiles pour vos boutiques zlio.

  • Balises de texte

    Dans ce rubrique, nous allons étudier les différentes balises pour la mise en forme de texte comme par exemple le structurer en paragraphe, ajouter des titres, mettre des mots en évidence, etc...

    Faire des paragraphes

    Pour réaliser des paragraphes en HTML, il suffit d'utiliser la balise <p>
    voici un exemple de résultat :

    Mon premier paragraphe, Mon premier paragraphe, Mon premier paragraphe, Mon premier paragraphe, Mon premier paragraphe, Mon premier paragraphe, Mon premier paragraphe, Mon premier paragraphe, Mon premier paragraphe,

    Mon second paragraphe, Mon second paragraphe, Mon second paragraphe, Mon second paragraphe, Mon second paragraphe, Mon second paragraphe, Mon second paragraphe, Mon second paragraphe, Mon second paragraphe, Mon second paragraphe, Mon second paragraphe,

    voir le code HTML

    Ajouter des titres

    Pour structurer votre texte, il est important de savoir créer des titres. Les balises HTML pour créer des titres sonts les balises <hn> :

    Il existe six niveaux de titre h1,h2,h3,h4,h5,h6. La balise h1 représente le niveau de titre le plus important

    Titre niveau 1

    Titre niveau 4

    Titre niveau 6
    voir le code HTML
    astuce yoja

    Les mots ou expressions utilisés dans les titres sont considérés comme plus importants par les moteurs de recherche (Google,...).

    Mettre des mots clés en évidence

    Pour mettre un mot (ou une expression) en évidence, il suffit de le mettre à l'intérieur de la balise <strong>. Voici un exemple du résultat :

    Ceci est un mot important dans ma phrase.

    astuce yoja

    les mots qui sont placés dans la balise <strong> sont considérés comme plus importants par les moteurs de recherche (Google,...).

    Ajouter un retour à la ligne

    Lorsque vous souhaitez ajouter un retour à la ligne dans votre texte, il suffit d'utiliser la balise <br/> à l'endroit désiré.

    Mon texte sans un retour à la ligne. Mon texte sans un retour à la ligne.

    Mon texte avec un retour à la ligne.
    Mon texte avec un retour à la ligne.

  • Balises liens

    L'une des principales caractéristiques du language HTML et d'Internet en général c'est la possibilité de naviguer d'une page à l'autre. Pour cela, on utilise ce qu'on appelle des liens hypertextes. Dans cette rubrique, nous vous apprendrons à utiliser les différentes balises de liens

    Liens externes

    On appelle "liens externes" les liens présents sur votre boutique et qui pointent vers d'autres sites que le votre. Vous pouvez par exemple utiliser ce type de liens lorsque vous avez plusieurs boutiques et que vous souhaitez que vos visiteurs puissent navigeur d'une boutique à l'autre. Vous pouvez également faire des liens vers des sites qui pourraient intéresser vos visiteurs.

    Par exemple, voici un lien externe vers notre partenaire www.templateworld.com : www.templateworld.com

    Analysons maintenant le code utilisé pour faire ce lien. On remarque que la balise utilisée pour faire des liens est la balise <a>. Le texte contenu entre la balise ouvrante <a> et la balise <⁄a> représente le libellé de votre lien. On peut également remarquer l'utilisation des paramètres "target" et "href" situés dans la balise ouvrante. Ces paramètres vont vous permettre de décrire comment fonctionne votre lien. Lorsque vous utilisez des paramètres, vous devez faire attention de ne pas oublier les guillements au début et à la fin.

    hrefCe paramètre permet d'indiquer l'adresse (URL) du site vers lequel pointe le lien. Lorque vous naviguez sur Internet cette adresse est indiquée dans la barre d'adresse de votre navigateur. Pour éviter les fautes de frappes nous vous recommendons de faire des copier/coller pour récupérer les adresses des sites qui vous intéressent.
    targetPermet d'indiquer la cible dans laquelle va être afficher le site identifié par le paramètre href. Pour les liens externes nous vous recommendons de mettre target="_blank" qui signifie que le site sera affiché dans une nouvelle fenêtre/onglet. Ainsi votre propre site sera toujours disponible. En revanche, si vous ne précisez pas le paramètre target, le site du lien sera affiché dans la fenêtre/onglet courant à la place de votre propre site.
    titlePermet d'ajouter une description du site vers lequel pointe le lien. Cette description est affichée lorsque la souris passe sur le lien.

    Liens internes

    Les liens internes sont des liens entre les différentes pages de votre sitre internet. Ils sont utilisés pour permettre à vos visiteurs de naviguer sur votre site en passant d'une page à l'autre. Pour les liens internes le paramètre "target" n'est généralement pas utilisé car on souhaite que la nouvelle page (la page cible) s'affiche à la place de l'ancienne.

    Exemple de lien interne vers notre page contact : lien vers notre page contact

    voir le code HTML:

    Ancres (liens vers une partie de la page)

    Il existe un troisième type de lien, les liens vers des parties de page. Ces liens sont souvent appelés "ancres", ils sont couramment utilisés pour faciliter la navigation verticale dans la page. Par exemple si vous avez une page avec beaucoup de contenu, vous pouvez ajouter des liens qui vont servir de raccourci pour atteindre le bas ou le haut de page.

    Voici l'exemple d'un lien qui va vous permettre de revenir en haut de page

    haut de page Principe de fonctionnement :

    1 - placer une ancre à l'endroit de la page que vous souhaitez atteindre avec le lien

    L'attribut name permet d'identifier votre ancre car il est possible d'ajouter plusieurs ancres sur sa page web.

    2 - créer le lien qui va vous positionner sur votre ancre

    Dans la cible du lien (attribut href) vous devez mettre le nom de l'ancre précédé du caractère #.

    Vous pouvez même allez plus loin en faisant un lien vers une ancre positionnée sur une autre page

 

copyright 2008 @ yoja-web.comv1.0 Betadesign by templateworld.com