Ressources Magic Makers

EXPERIMENTER

J'apprends en me trompant.

EXPERIMENTER

J'apprends en me trompant.

PARTAGER

J'ai des idées et je les partage avec les autres.
partager

PARTAGER

J'ai des idées et je les partage avec les autres.

RAISONNER

Je suis fier de ce que je fais.

RAISONNER

Je suis fier de ce que je fais.

INVENTER

Je suis la pour créer.

INVENTER

Je suis la pour créer.

S'AMUSER

Je viens parce que j'en ai envie.

S'AMUSER

Je viens parce que j'en ai envie.
Menu
UP

 

Site en maintenance

 
Nous sommes actuellement entrain de mettre à jour les ressources de ce site.
Pendant la mise à jour vous pouvez retrouver tous les nouveaux contenus sur le site
 

https://lp-magicmakers.fr/

 
 

Les balises HTML

HTML ? Qu’est ce que c’est ?

Le HTML est le langage de balisage conçu pour écrire des pages web, toutes les pages sur internet sont faites en HTML.

Les balises importantes

Une balise c’est ce qui va nous permettre de mettre en page notre texte sur une page web, faire en sorte d’avoir une certaine hiérarchie.

Un élément se compose d’une balise ouvrante (<p>) et d’une balise fermante (</p>), sauf dans de très rare cas comme pour img, input… Le texte entre les deux balises est compris dans l’élément.

Nous utiliserons que les balises les plus importantes :

La balise head est utilisé au début pour mettre le titre et le lien vers la page css. Elle est mise au début de la page html, elle sera la plus part du temps de cette forme là : 
<head>
  <title>Portefolio !</title>
  <link rel="stylesheet" href="main.css">
</head>
Et la balise body est le corps de notre page, elle contiendra donc TOUTES les autres balises. Elle se met après la balise head.
Pour les titres on va pouvoir utiliser les balises : 
<h1>Je suis un grand titre !</h1>
 
 
<h2>Je suis un titre un peu moins grand</h2>

...
 
<h6>Je suis un titre vraiment moins grand</h6>
La balise p sert à définir tout ce qui se trouve être du texte, une ligne est automatiquement sauté suite à la balise fermante. 
<p>Je suis un paragraphe !</p>

Une div ne permet pas d’ajouter de style dans un texte mais il permet de comprendre plusieurs balises pour ensuite on puisse ajouter du style à celui ci. Il se comporte dans la plus part des cas comme un parent.

<div>
    <p>Je suis un paragraphe !</p>
    
    <p>Je suis un autre paragraphe<p>
</div>
Les boutons et les liens auront dans notre cas un peu similaire et seront principalement différent sur l’utilisation visuelle qu’on veut en faire. Le bouton s’utilise avec la balise : 
<button>Je suis un bouton</button>
Alors que le lien s’utilise avec la balise : 
<a>Je suis un lien</a>
Pour le lien il ne faut pas oublier d’enlever l’événement par défaut quand on le programme.

Et les images alors ?

Comment ajouter une image dans notre projet ? On va utiliser la balise img, puis une fois qu’on a ça il faut signifier où l’image est. On doit regarder où est notre projet dans notre ordinateur :

En haut, surligné, on a le nom du projet dans lequel on cherche à ajouter une image

Le body.html est là où on va mettre la balise img.

Dans le dossier portefolio/public/images se trouve l’image qu’on veut ajouter à notre page.

Pour ajouter l’image on va utiliser la balise :

<img src=″″>

Et dans les guillemets de src (source) on va mettre l’adresse de notre image. Ce qui donne dans ce cas :

<img src=″./images/dragon.jpg″>

Si c’est la première image qu’on affiche il faudra sûrement créer le dossier public et le dossier image.

Les formulaires

Les formulaires vont nous permettre d’avoir toutes les informations nécessaires pour créer des bases de données notamment.

Pour créer un formulaire on utilise la balise « form » :

<form>
    <!--Contenu du formulaire-->
</form>

On a ensuite besoin d’ajouter différents champs à l’intérieur pour par exemple que l’utilisateur puisse ajouter du texte, ou des images…

L’input :

<form>
    <input type="text" name="pseudo" placeholder="Pseudo" />
</form>

Le type est pour expliquer à la page Web ce qui va être rentré, pour les types différents : Les types d’input.

Le name est utilisé pour la récupération des données dans le JavaScript.

Le placeholder va permettre de rajouter un petit texte dans l’input pour l’utilisateur.

Il y a d’autre balises qu’on peut mettre dans notre formulaire, comme « select » qui va nous permettre d’avoir une liste déroulante :

<form>
    <select name="pays" id="pays">
        <option value="france">France</option>
        <option value="espagne">Espagne</option>
        <option value="italie">Italie</option>
    </select>
</form>