Étiquette word

Publipostage > Démarrer la fusion et le publipostage ...

Choisir la marque étiquette ou une équivalence.

Choisir le nombre de colonne ou de ligne.

Pour des adresses :

Sélectionner des destinataires que je créée sur word.

Pour faire adapter ma liste je peux utiliser "insérer champ de fusion" pour mettre les noms de mes colonnes.

La résolution à travailler sur Photoshop

Impression :

300dpi

Il faut travailler les images en 300dpi.
Si les images sont travaillaient en 72 dpi par exemple, elles resteront dans cette résolution même si le travail est fait sur un document paramétré sur 300 dpi.

HTML formulaire

Les formulaires :

Pour faire un formulaire nous avons besoin des balises <form></form>
Pour mettre du texte à l'intérieur d'un formulaire n'oubliez pas les balises <p></p>

<form>
<p>mon texte</p>
</form>

Le but d'un formulaire et de faire passer des informations du visiteur et de les traiter et puis les afficher, pour cela il faut ajouter deux attributs.

<form method="" action="">
<p>mon texte</p>
</form>

method => de quel manière les données vont-ils être traitées. Nous avons la méthode donc :

• method="get"

Cette méthode est peu utilisé dans ce que nous voulons. On retrouve la méthode "get" qui est limité à 255 caractères à envoyer des données dans l'adresse URL (http://) On peut y retrouver nos pseudos etc..

• method="post"

C'est cette méthode que nous allons utiliser pour les formulaires. Cette méthodes permet d'envoyer les informations et de les traiter. Aucune informations tapées dans le formulaires n'apparaîtrons dans la barre d'URL.

• action

Représente la page qui sera liée au formulaire et qui va traiter les informations que va recevoir la méthode POST. Cela permettra donc, d'enregistrer vos informations dans une base de données, de vous envoyez un mail de confirmation que vos données ont été prises en compte etc...

En utilisant la méthode "post" ou get" et en liant une page action à notre formulaire on n'utilisera pas uniquement du HTML mais aussi du PHP !

<form method="post" action="PageDeTraitement.php">
<p>Mon texte</p>
</form>

Comment insérer des données dans un formulaire html, avec des boutons etc... ?

Exemple de formulaire:

<form method="post" action="PageDeTraitement.php">
<p>Voici un petit formulaire pour commencer</p>
<p>Pseudo : <input type="text" name="pseudo"/></p>
<p>Pays : <select name="pays">
                  <option value="france">France</option>
                  <option value="japon">Japon</option>
                  <option value="canada">Canada</option>
                  <option value="corée">Corée</option>
                  </select>
<input type="submit" name="valider" value="valider"/>
</form>

La balise <select> permet d'obtenir une liste déroulante on peut sélectionnée un élément par défaut avec selected.

<select name="pays" id="pays">
                  <option value="france">France</option>
                  <option value="japon" selected>Japon</option>
                  <option value="canada">Canada</option>
                  <option value="corée">Corée</option>
</select>

On peut aussi regrouper nos options avec les balises <optgroup></optgroup> 

<label for="regarder">Votre pays</label>
<select name="maliste" id="regarder">
<optgroup label="Mangas">
                  <option value="naruto">Naruto</option>
                  <option value="erased">Erased</option>
                  <option value="Prince of stride">Prince of stride</option>
                  <option value="Kuroko's baskect">Kuroko's basket</option>
</optgroup>
<optgroup label="Dramas">
                  <option value="heirs">Heirs</option>
                  <option value="moorim school" selected>Moorim school</option>
                  <option value="liar game">Liar game</option>
                  <option value="itazura na kiss">Itazura na kiss</option>
</optgroup>
 </select>

Les balises de texte pour une formulaire :
<input type=""/>

Résultat :

Pseudo :

On lui ajoute avec lui l'attribut "type" qui change la signification de la zone de texte.
Il faut ensuite lui donner un "name" ce qui va permettre le traitement en php. On saura de quoi on parle, si c'est pour un pseudo, un mot de passe ou un commentaire.

Précédemment j'ai indiqué entre balise <p> la signification de la zone de texte.
Préférez de mettre en deux balises <p></p> un libellé et de le lier à notre champ. Donnez aussi un id ayant le même nom que le libellé. Faîtes de la manières suivante :

<form method="post" action="PageDeTraitement.php">
<p>
       <label for="pseudo">Pseudo</label> : <input type="text" name="pseudo" id="pseudo"/>
</p>
</form>
Le résultat et le même qu'avant.

Vous pouvez donner une indication dans le champ de texte avec le placeholder. On le voit souvent pour les mails.

<form method="post" action="PageDeTraitement.php">
<p>Pseudo : <input type="text" name="pseudo" placeholder="votre pseudo"/></p>
<input type="submit" name="valider" value="valider"/>
</form>

value = > valeur par défaut, utilise pour la base de données
maxlength => limite le nombre de caractères saisie
size => agrandir le champ de texte
required => rend un champ obligatoire
autofocus => placement du curseur dans le champ de texte

les différents type :
type ="text" => champ de texte
type="password" => mot de passe (en point)
type="radio" => cercle pour un choix unique (il faut que vous mettez le même name aux options faisant parties du même groupe.

<input type="radio" name="civilite" value="homme" id="homme" />
<label for="homme">Homme</label>

<br/>

<input type="radio" name="civilite" value="femme" id="femme" />
<label for="femme">Femme</label>

type="checkbox" => carré cocher plusieurs choix 

type="submit" => bouton valider
type="reset" => bouton remise à zéro
type="button" => simple bouton utilisé en JavaScript.
type="image" => bouton avec intégration avec image src
type="eamail" => pour les mails
type="color"=> une palette de couleur
type="search" => champ de recherche
type="tel" => téléphone (mobile)
type="url" =>saisir une adresse url
type="range" => sélectionner une valeur avec un curseur ou slider
type="number" => changement de valeur avec une flèche vers le haut et une vers le bas
il y en a d'autre, si vous voulez les voir à vous de faire une petite recherche :)

Pour avoir un grand champ de texte pour laisser vos commentaires :

<form method="post" action="PageDeTraitement.php">
<p>
       <label for="comment">laissez des commentaires</label>
       <textarea name="comment" id="comment">Vous pouvez écrire ici du texte si vous le voulez pour donner une indication ou exemple</textarea>
</p>
</form>

il se présente sous cette forme :

Pour agrandir le champ :
width => pour la largeur
height => pour la hauteur


<form method="post" action="PageDeTraitement.php">
<p>
       <label for="comment">laissez des commentaires</label>
       <textarea width="250" height="300" name="comment" id="comment">Vous pouvez écrire ici du texte si vous le voulez pour donner une indication ou exemple</textarea>
</p>
</form>

rows => nombre de lignes
cols => nombre de colonnes


<form method="post" action="PageDeTraitement.php">
<p>
       <label for="comment">laissez des commentaires</label>
       <textarea rows="15"  cols="55" name="comment" id="comment">Vous pouvez écrire ici du texte si vous le voulez pour donner une indication ou exemple</textarea>
</p>
</form>

Vous pouvez regouper votre formulaire en zone grâce aux balises <fieldset></fieldset> et y mettre une légende avec les balise <legend></legend>.

Exemple de code : 

<form method="post" action="PageDeTraitement.php"> 
<fieldset>

    <legend>Vos coordonnées</legend>
  
    <p>
        <label for="homme">Vous êtes un homme</label>

        <input type="radio" name="homme" id="homme"/>
      
        <label for="femme">Vous êtes une femme</label>

        <input type="radio" name="femme" id="femme"/>
    </p>
  
  
    <p>
        <label for="nom">Votre nom</label>

        <input type="text" name="nom" id="nom"/>
    </p>


    <p>
        <label for="prenom">Votre prénom</label>          

        <input type="text" name="prenom" id="prenom"/>
    </p>


    <p>
        <label for="adresse">Votre adresse</label>          

        <input type="text" name="adresse" id="adresse"/>
  
        <label for="ville">Votre ville</label>          

        <input type="text" name="ville" id="ville"/>
  
        <label for="CP">Votre CP</label>          

        <input type="text" name="CP" id="CP"/>
    </p>


    <p>
        <label for="mail">Votre mail</label>

        <input type="text" name="mail" id="mail"/>
    </p>

</fieldset>

<fieldset>

    <legend>Choissisez votre pseudo</legend>

    <p>
        <label for="pseudo">Votre pseudo</label>         

        <input type="text" name="pseudo" id="pseudo" required/>
    </p>


    <p>
        <input type="submit" name="valider" value="valider"/>
    </p>

</fieldset>
</form>

Testez tous les codes vous même !

Wrapper centrage de type bloc

On va initialisé notre futur page html en définissent une largeur de page pour la globalité des éléments de la page html.

code html :

<! DOCTYPE html> <html>
<head>
<title>Wrapper</title>
</head>

<body>
    <div id="wrapper">

        <h1>Bienvenue dans mon site</h1>
       
    <br />

    <div id="contenuprincipal">

        <h2>L'actualité du jour</h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et auctor leo. Pellentesque et odio vel nisl vestibulum  pretium. Integer tristique porta ex, a placerat purus dictum faucibus. Aliquam erat volutpat. Nunc suscipit quis sem at volutpat. Curabitur tincidunt neque at sem mattis, non sollicitudin urna posuere. Suspendisse in turpis metus</p>

    </div>
</body>
</html>

 le code css :

#wrapper{
    position : relative;
    margin-left: auto;
    margin-right:auo;
    width : 80%;
    text-align : center;
} 

Dans ce cas ici il ne faut absolument pas oublier de définir une largeur de page (width) sinon il y aura pas de centrage des éléments. Si vous positionnez en absolue ça ne fonctionnera pas non plus.

Centrer un élément de type inline en horizontal

Le CSS permet de contrôler l'alignement de gauche à gauche.

code html :

on va centrer une image au centre de la page html

<html>
<head>
<title>centrage</title>
</head>
<body>
<div class="centrer">
      <img src="MonImage.jpg"/>
</div>
</body>
</html>

On fait appel à un bloc div avec une class du nom de centrer, je place ma balise image entre mes balises <div>. Avec le css on va positionner l'image au centre.


le code css

.centrer{
    text-align : center;
}

Que ce soit un <iframe> etc.. Ici on positionne au centre de cette manière pour les types en ligne.

Mémo HTML

Liste de balises html :


<html>

• c'est la racine, on précise le langage de la page HTML

<head>

• C'est l'en-tête, on y retrouve l'encodage, le title, scrips, pages externe css

<body>

•  C'est le corps de la page, c'est ici qu'on mettra notre contenu pour notre site web

<title>

• C'est une balise qui se trouve entre les balises <head> , le titre apparaît dans l'onglet, sert aussi de référencement.

<style>

• C'est la balise qui représente le style css,  on peut intégrer directement le css soit dans une balise ou bien entre les balises <style>. Le placer entre les balises <head> de préférence. 

<meta>

• C'est pour donner des informations au navigateur, on l'utilise pour l'encodage en UTF-8 etc..

<script>

• C'est la balise qui va contenir notre script JavaScript et sert aussi à lier une page externe .js. <script src="page.js"></script>
• <script> mon code js</script> 

<h1> à <h6>

• Titre du plus grand au plus petit

<p>

• Paragraphe

<br />

• Saut de ligne

 <div>

• Conteneur de type bloc. C'est un sorte de boîte qui peut contenir d'autres boîtes. La div permet de délimiter en zone sa page html. 

<span>

• Conteneur de type ligne. <span> est utilisé pour être placé dans des paragraphes et apporter du style. Il est neutre.

<ul>

• Liste non ordonnée qui contient les balises des balises listes.

<li>

• C'est entre ces balises <li></li> que nous allons mettre du texte
• <ul>
• <li>menu</li>
• <li>blog</li>
• </ul>

<ol>

•  Liste ordonnée / numéroté contient aussi les balises <li></li>

<audio>

• Balise HTML5
• Mettre en ligne vos sons
• <audio src="titre.mp3"controls></audio>

 <video>

• Balise HTML5
• Mettre vos vidéos
• <video src="film.mp4" autoplay></video>

<source>

• Balise HTML5
• Balise qui se place entre les balises <audio> ou <video>. Parfois il faut préciser plusieurs sources possibles. Le type repésente le format des vidéos.
• <source src="film.mp4" type="video/mp4"> 
• <source src="film.ogv" type="video/ogg"> 

<header>

• Balise HTML5 pour une en-tête

<nav>

• Balise HTML5 pour un menu

<section>

• Balise HTML5 pour mettre notre contenu, ça remplace en quelque sorte une div 

<article>

• Balise HTML5 se place entre les balises <section></section> c'est à l'intérieur qu'on tappera notre texte.

<aside>

• Balise HTML5 pour des informations complémentaire comme un profil des liens vers réseaux sociaux etc...

<footer>

• Balise HTML5 pied de page 

EXEMPLE : avec commentaire

<html>

<head>
   <title>Mon titre</title> //Notre titre regardez l'onglet si vous l'avez fait chez vous
   <meta charse="UTF-8"/>  //Encodage
   <link rel="stylesheet" type="text/css" href="style.css"/> // Feuille de style externe
</head>

<body>

<header> //Mon en-tête
   <h1>Mon logo</h1>  //Titre
</header>

<nav>  //Début de mon menu
   <ul>   //Ma liste non ordonnée pour un menu déroulant
    <li><a href="#">film</a>  //Mon bouton de départ pour le déroulant
      <ul>  //Une nouvelle liste
         <li class="rose"><a href="#">romantique</a><li>  //Catégorie film qui sera en rose
         <li><a href="#">fiction</a><li> 
         <li class="rose"><a href="#">comédie</a><li>    //Catégorie film qui sera en rose
     </ul>
    </li>
   <ul>
</nav>

<section>  //Début de mon contenu principal
<aside>  //Info supplémentaire
   <h2>Mon profil</h2>  //Titre 2
   <img src="moi.jpg"/>   //Mon image de profil
</aside>
<article>    //Début des articles
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et auctor leo. Pellentesque et odio vel nisl vestibulum pretium. Integer tristique porta ex, a placerat purus dictum faucibus. Aliquam erat volutpat. Nunc suscipit quis sem at volutpat. Curabitur tincidunt neque at sem mattis, non sollicitudin urna posuere. Suspendisse in turpis metus</p>
</article>
</section>

<footer>  //Pied de page
   <h3>copyright</h3>  //Titre 3
</footer>

</body>
 
</html>

ZOOM sélecteurs / sélecteur types balise CSS (3)

Pour donner une forme au html on peut utiliser les noms des balises de la façon suivante en CSS :

Déclaration du css avec un sélecteur (nom d'une balise):  

Imaginons une page .html avec un titre
Dans mon fichier .css je souhaite que mon h1 soit blanc avec un fond gris

h1{
       background-color : gray;   //fond gris
       color : white;  // couleur texte blanc
}
   // deux slash représente un commentaire sur une ligne
   /* commentaire sur plusieurs lignes */

Déclaration du css avec plusieurs sélecteurs (nom d'une balise): 

Imaginons que j'ai un titre h1, un titre h2 et un paragraphe. Je veux que monh1, h2 et mon paragraphe soient de la même couleur de texte et que mon h1 et h2 soient sur un fond noir.

le code html :

<html>
<head>
<title>titre onglet</title>
<meta charset="UTF-8"/>
</head>
<body>
<h1>Titre 1</h1>
<h2>Titre 2</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et auctor leo. Pellentesque et odio vel nisl vestibulum pretium. Integer tristique porta ex, a placerat purus dictum faucibus. Aliquam erat volutpat. Nunc suscipit quis sem at volutpat. Curabitur tincidunt neque at sem mattis, non sollicitudin urna posuere. Suspendisse in turpis metus.</p>
</body>
</html>

le code css :

h1, h2, p{
color : white;
}

h1,h2{
background-color: black;
}

On attribut à une div un id ou une class
id en CSS => (#) il est unique à chaque balise
class en CSS => un point (.) il peut être utilisé plusieurs fois dans des balises différente

Exemple : 

le code html :

<html>
<head>
<title>titre onglet</title>
<meta charset="UTF-8"/>
</head>
<body>
<div class="centrage"><img src="img1.jpg"/></div>
<div class="centrage"><img src="img2.jpg"/></div>
<div id="boite">
<button class="bt">bouton1</button>
<button class="bt">bouton2</button>
<button id="btd">bouton3</button>
</div>
</body>
</html>

le code css :

img{
width:150px;
height:150px;
}

.centrage{
    text-align: center;
}

#boite{
background-color : lightblue;
}

.bt, #btd{
background-color : blue;
color:white;
}

#btd{
background : gray;
}

resultat 
cliquez sur l'image pour le voir en grand