Construction d’une page avec botstrap

Autre aide HTML

Html/Css: LES LISTES

A faire en dehors de <p>
Non ordonnée (à puce):
               <ul>
                             <li>element</li>              
                              <li>element</li>
               </ul>
               Css : list-style-type : disc (defaut) / circle / square / none
Ordonnée (à n°) :
               <ol>
<li>element</li>              
                              <li>element</li>
              </ol>
A description :
               <dl>
                             <dt>terme</dt>
                                          <dd>description du terme</dd>
                              …
               </dl>

Autres styles (css) :
List-style-position : pour modifier le decallage du texte avec les puces
            Inside (puce intégrée au texte) / outside (defaut) / initial / inherit
List-style-image : image à la place de la puce
               url(« ../images/3.jpg »)
margin et padding peuvent s’appliquer

Html/Css: LES FORMULAIRES

A faire en dehors d’un <p>
Base :

<form method= « post » action= « … .php »>

</form>

Toujours rajouter un <label> ce que la personne doit noter dans le formulaire</label> à chaque encadré

<label>Nom :</label>
<input type= « text » name= « nom » value= »votre nom/>

Pour une zone texte, il faut rajouter avec :
<textarea name= «message »> Tapez votre message </textarea>

Exemple :
<form method= »post » action= »# »>
<label>Nom:</label><br/>
<input type= »text » name= »nom » value= »Votre nom »><br/>
<label>Prénom:</label><br/>
<input type= »text » name= »prenom » value= »Votre prénom »><br/>
<label>Mail:</label><br/>
<input type= »email » name= »email » value= »Votre adresse email »><br/>
<label>N° de téléphone:</label><br/>
<input type= »tel » name= »phone-number » value= »Votre numéro de téléphone »><br/>
<label>Message:</label><br/>
<textarea name= »message »>Tapez ici votre message … </textarea>
</form>

Html/Css: LES TABLEAUX

Définis par <table>
Chaque ligne <tr>
Chaque colonne <td> (contient les données)
Si titre aux colonnes <th>

Exemple :
<table>
<tr>
<th>Nos horaires d’ouverture</th>
<th></th>
</tr>
<tr>
<td><strong>Lundi au vendredi</strong></td>
<td>de 10h00 à 18h00 sans interruption</td>
</tr>
<tr>
<td><strong>Samedi</strong></td>
<td>de 9h00 à 13h00 sans interruption</td>
</tr>
<tr>
<td><strong>Dimanche et jours fériés</strong></td>
<td>Fermé</td>
</tr>
</table>

Css applicable :

Border (pour avoir une bordure) : 1px solid black
Border-collapse : collapse (pour fusionner les cases)
Padding (pour marge intérieure aux cases)
Border-spacing : 5px (espace entre les cases – uniquelent si collapse non mis)

Html/css: PSEUDO

PSEUDO ELEMENTS : style à une partie d’un élément
Ex :     p ::first-line{font-size : 1.5em ; color : blue ;}

::first-line / Style spécial à la première ligne d’un texte
::first-letter / Style spécial à la première lettre d’un texte
::before / Pour insérer du contenu avant le contenu d’un element (toujours utiliser avec content si pour mettre une image/icone)

Ex : h1 ::before{content :url(smiley.gif)}

::after / Idem before mais pour mettre après le contenu d’un élément

Possibilité :
Font (size, family,…) / color / background / margin / padding / border / text-decoration / vertical-align (seulement si float :none) / text-transform / line-height / float / clear

PSEUDO CLASSES : style à un élément
Pour les liens (ordre d’écriture à respecter)
Lien non visité : a :link{color : blue ;}
Lien visité : a :visited{…}
Lien au passage de la souris : a :hover{…}
Lien selectionné : a :active{…}

Premier enfant :first-child
Style au 1er enfant du parent
Si p :  #bloc p :first-child{color : blue ;}

Si pour un autre enfant, préciser le numéro de l’enfant dans les () :
#bloc p :nth-child(2){color :blue ;}

Possibilité de préciser le quoi dans le 1er enfant. Ex : les i du 1er enfant des p

P :first-child i{…}

Css: POLICES ET CIE

font-style:oblique/italic
font-size: 2em; ou 50%;
font-weight: bold/bolder/lighter

background-color:#ff000;
background-image: url(« slide3.jpg »); + background-repeat:no-repeat;+background-position:left-top;
Vous pouvez utiliser chaque propriété séparemment ou toutes les regroupées sur une seule ligne : background : url(”monimage.png”) no-repeat scroll 0 0 #000000;

Centrage de texte :
Text-align (aligner le texte): -left (par defaut) / -center (centré) / -right (à droite) / -justify
Ex : h1{text-align :center ;}

Alinéa en début de chaque <p> :
p{text-indent : 5px;}

Decoration de texte :
Text-decoration : none (non) / overline (souligné) / line-through (barré) / underline (surligné)

Maj, minuscules, … :
Text-transform : uppercase (tout en majuscule) / lowercase (defaut / minuscule) / capitalize (1ere lettre en maj)

Mettre en forme le texte : les polices de caractères
Pour que la police s’affiche chez vos visiteurs, il faut qu’elle soit installée sur leur ordinateur. De ce fait, on ne peut choisir que des polices standards, généralement présentes sur la plupart des ordinateurs. La propriété CSS précisant la police est font-family.

Si vous voulez que vos paragraphes de texte s’affichent en arial, vous taperez le code suivant : p { font-family: Verdana;} Si vous voulez utiliser une police dont le nom comporte un espace, vous devez l’entourer de guillemets comme ceci : p {font-family: “Courier New”;} on doit indiquer un nom de police par défaut.

Il existe deux noms de polices par défaut : serif : police par défaut avec empattement. sans-serif : police par défaut sans empattement. Nous allons donc indiquer sans-serif en dernier choix. Ainsi, si le visiteur ne possède aucune des polices précédentes, le navigateur utilisera une police sans empattement par défaut.
p{font-family:arial,sans-serif;}

Nous verrons qu’avec Css3, nous pourrons ajouter des polices originales avec @font-face

Html/Css: LES LIENS ET IMAGES

LES LIENS

Les liens hypertextes sont définis grâce à la balise <a>
<a href= »http://www.monsite.com »>Ceci est un lien</a>
L’attribut href est obligatoire, il sert à définir l’url de destination du lien.

Lorsque vous déplacez le curseur de la souris sur un lien, deux choses se produise en général :
– La flèche de la souris se transforme en une petite main
– La couleur de l’élément de liaison va changer
Par défaut, les liens apparaîtront comme cela dans tous les navigateurs :
– Un lien non visité est souligné et bleu
– Un lien visité est souligné et violet
– Un lien actif est souligné et rouge
Vous pouvez modifier les paramètres par défaut, en utilisant des styles :
– a: link, un lien non visité
– a: visited, un lien que l’utilisateur a visité
– a: hover, un lien au passage de la souris
– a: active, un lien actif, comme quand on a cliqué sur accueil et que l’on se trouve sur la page d’accueil.
Exemple :
<style> a: link {color : # 000000 ; background-color : transparent ; text-decoration : none} a: visited {color : # 000000 ; background-color : transparent ; text-decoration : none} a: hover {color: # ff0000 ; background-color : transparent ; text-decoration : underline} a: active {color: # ff0000 ; background-color : transparent ; text-decoration : underline} </ style >

TARGET
L’attribut target spécifie dans quelle page le lien va ouvrir le document lié.
Cet exemple ouvre le document lié dans une nouvelle fenêtre de navigateur ou dans un nouvel onglet :
<a href= »http://www.formation31.fr/ » target= »_blank »>Visitez mon site</a>
Valeur de Target
Description
_blank ouvre le document lié dans une nouvelle fenêtre ou onglet
_self ouvre le document lié dans la page affichée (par défaut)
_parent ouvre le document lié dans le cadre parent
_top ouvre le document lié dans le corps entier de la fenêtre
framename ouvre le document lié dans une frame
Si votre page Web est encapsulée dans une frame, vous pouvez utiliser target = « _
top » afin de sortir du cadre
Exemple :
<a href= »http://www.formation31.fr  » target= »_top »>Formation webdesigner</a>

ANCRES
L’attribut id peut être utilisé pour créer des signets dans les documents HTML. Les signets sont invisibles pour le lecteur.
Exemple :
<a href= »#chapitre2″>Cliquez ici pour accéder au chapitre 2</a>
<a id= »chapitre2″>Chapitre 2</a>

IMAGE LIEN
Il est fréquent d’utiliser les images comme liens.
Syntaxe :
<a href=”mapage.html”><img src=”monimage.jpg” alt=“mon image” /></a>
Exemple :
<a href=”contact.php”><img src=”dossier.png” alt=”page contact” style=”width:60px;
height:60px;border:0”></a>

 

IDENTIFIANT ET CLASSE

Les identifiants et les classes sont des attributs que l’on place à l’intérieur des balises ouvrantes, pour différencier certains éléments. Un identifiant, noté id=”” doit être unique dans une page, vous devez donc utiliser le sélecteur id lorsque vous souhaitez styler un élément une seule fois sur la page. Vous pouvez attribuer le nom que vous souhaitez à votre id, vous devez respecter quelques règles : – Pas d’espace – Pas de caractère spéciaux, pas d’accent – Pas de chiffres au début du mot En css, on insère un # devant le nom de l’id.

Si je veux qu’un paragraphe sur deux ait un fond gris, je vais utiliser une classe. Une classe, noté class=”” peut être appliqué à autant d’éléments que l’on veut. Vous pouvez attribuer le nom que vous souhaitez à votre id, vous devez respecter quelques règles :
– Pas d’espace – Pas de caractère spéciaux, pas d’accent – Pas de chiffres au début du mot En css, on insère un . devant le nom de la classe.

BOOTSTRAP