PRIVE – Evan Kokorus

La formation

PRIVE - Evan Kokorus

Table des matières

01 - Les bases d'une page HTML

1. Anatomie d'une page

2. Les images

3. Les titres

4. Les paragraphes

5. Les listes à puces

6. Les liens

7. Les tableaux

8. Composition avec des DIV

9. Positionnement des DIV par CSS

01 - Les bases d'une page HTML

Anatomie d'une page

!DOCTYPE html — juste présent pour s’assurer que la page puisse fonctionner y compris sur les anciens navigateurs.
html — encadre tout le contenu de la page. Cet élément est parfois appelé l’élément racine.
head – est utilisé comme un container pour toutes les choses qui font partie de la page HTML mais qui ne sont pas du contenu affiché.
body – est celui qui contient tout le contenu que vous souhaitez afficher pour qu’il soit vu par les visiteurs.
meta charset= »utf-8″ — définit le jeu de caractères qui devrait être utilisé pour le document et indique que c’est utf-8. utf-8 regroupe l’ensemble des caractères connus utilisés dans les différents langages humains.
title – définit le titre de votre page. C’est ce titre qui apparaîtra sur l’onglet lorsque la page sera chargée. Il sera utilisé pour décrire la page lorsque vous la placez dans vos marques-pages

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Ma page de test</title>
    </head>
    <body>
        <!-- contenu de la page -->
	</body>
</html>

Les images

L’image utilisée est définie via l’attribut src (pour source) qui contient le chemin vers le fichier de l’image.

L’attribut alt (pour alternatif)contient un texte descriptif de l’image à l’intention des utilisateurs qui ne peuvent pas voir l’image.

<img src="images/firefox-icon.png" alt="Mon image de test">

Les titres

HTML contient des éléments pour 6 niveaux de titres : h1 à h6. La plupart du temps, 3-4 niveaux suffisent amplement.

<h1>Mon titre principal</h1>
<h2>Mon titre de section</h2>
<h3>Mon sous-titre</h3>
<h4>Mon sous-sous-titre</h4>

Les paragraphes

Vous pouvez placer votre texte dans un ou plusieurs paragraphes,

<p>Voici un paragraphe</p>

Les listes à puces

Les listes non-ordonnées construites avec l’élément ul (ul signifie unordered list)
Les listes ordonnées sont construites avec l’élément ol (ol signifie ordered list)
Chaque élément d’une liste est balisé avec un élément li (list item).

<ul>
  <li>technologues</li>
  <li>chercheurs</li>
  <li>bâtisseurs</li>
</ul>

<ol>
  <li>technologues</li>
  <li>chercheurs</li>
  <li>bâtisseurs</li>
</ol>

Les liens

Pour créer un lien, il suffit d’utiliser l’élément a (le a est un raccourci pour ancre ).

Ne pas oublier la partie avec https:// ou http:// qui représente le protocole utilisé, au début de l’adresse.

<a href="https://www.mozilla.org/fr/about/manifesto/">Manifeste Mozilla</a>

Les tableaux

table = ouverture du tableau

tr = nouvelle ligne

td = zone pour les données data , 1 td = 1 colonne

        <table border="1" width="100%">
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>a</td>
                <td>b</td>
                <td>c</td>
            </tr>
            <tr>
                <td>lorem</td>
                <td>Lorem, ipsum. </td>
                <td>Lorem ipsum dolor sit.</td>
            </tr>

        </table>

Composition avec des DIV

Les DIV impriqués sont de plus en plus employés pour structurer des pages html.

Les ID et les classes sont destinés à les sélectionner individuellement depuis le code CSS ou Javascript.

 <div id="carre1" class="carre">
            <div id="carre2" class="carre">carré 2
            </div>
            <div id="carre3" class="carre">carré 3
            </div>
        </div>

Positionnement des DIV par CSS

Le positionnement par CSS permet de repositionner les éléments HTML entre eux.

 .carre {
                width:400px;
                height:400px;
                border: 1px solid red;
                background-color: #ff9999;
            }

#carre2 {
                width:150px;
                height:150px;
                border:1px solid green;
                background-color:#99ff99;
                position:absolute;
                top:20px;
                left:20px;
            }

#carre3 {
                width:150px;
                height:150px;
                border:1px solid blue;
                background-color:#9999ff;
                position:absolute;
                top:60px;
                left:60px;
            }

            #carre1 {
                position:relative;
                background-image: url(histoire.jpg);
            }

Répondez s'ils vous plaît à la question encadrée de rouge.