Html et Lexique

Afin d'utiliser un langage commun voici quelques définitions

• Attribut

  
  Un attribut est un paramètre variable qui définit les propriétés d'une balise.
  Chaque type de balise peut contenir un nombre d'attributs qui lui est propre et non imposé (c'est a dire qu'une balise ne comporte pas forcement à chaque fois tous ses attributs).
  
  On écrit un attribut de la façon suivant,
  attribut="valeur"
  
  



• Balise

  
  Une balise est un élément invisible caracterisé par < >, qui sert de marqueur pour le navigateur, le plus souvent concernant l'affichage du contenu de la balise (mais il en existe bien d'autres)
  
  On distinguera deux formes d'écriture pour une balise:
  
  • Une balise existant par paire (c'est la majorité des cas)
    <balise>ce sur quoi porte la balise</balise>
  
  
  
  • une balise simple (l'exemple le plus courant est la balise d'image)
    <balise/>
    dans ce cas les éléments sur quoi porte la balise sont contenus à l'intérieur de cette dernière; on se rend compte de la fermeture de la balise par le slash /




• Balise Block

  
  une balise block comme son nom l'indique crée un bloc dans la page, sa caractéristique principale est qu'elle entraine un retour à la ligne, nous les utilisons sans peut être les identifier comme par exemple la balise de paragraphe <p>, la balise de titre <H1> <H2> etc, mais il en existe d'autres comme blockquote et les puces <ul>





• Balise Inline

  
  une balise inline s'utilise directement dans un paragraphe, les plus utilisées sont <em> pour legèrement accentuer un texte, <b> pour fortement accentuer un texte, <font> pour définir les caractéristiques du texte, en fait la plupart des balises que nous utilisons sont des balisses inline que l'on peut caractériser par: elles n'entrainent pas de retour a la ligne...

Texte aligné à droite et à gauche sur la même ligne

Objet: Mettre sur la même ligne, un texte (ou une image) aligné à droite pour l'un et à gauche pour l'autre.

AideTitre

Le problème c'est que l'on ne peut pas utiliser la balise div, parce que c'est une balise block, par conséquent, elle entraine une retour à la ligne...par exemple

<div align="left">Titre</div><div align="right">Aide</div>

donne

Titre

Aide

On ne peut pas non plus utiliser la balise span qui pourtant est une balise inline, parce que là c'est le navigateur qui ne comprend pas

<span align="left">Titre</span><span align="right">Aide</span>

donne

TitreAide

On peut utiliser un tableau avec deux colonne, dont l'une serait alignée à gauche et l'autre alignée à droite

<table width="100%" border="0" style="background:#8a180e">
<tr>
<td>
<div align="left">Titre</div>
</td>
<td>
<div align="right">Aide</div>
</td>
</tr>
</table>
texte

donne

Titre

Aide

texte

Alors il y a quelques petits problèmes
Le premier est que cela redimensionne légèrement la hauteur de ligne... en fait de la taille de la bordure du tableau, même invisible elle est présente.
La seconde est que l'on ne peut pas écrire directement en dessous du tableau, ce qui est ennuyeux pour un menu que l'on souhaite toujours le plus petit possible
Enfin on est obligé de recoder le tableau pour chacun de nos titres, mieux vaut utiliser l'outil Css

La solution se trouve dans le système d'imbrication des balises, on a déjà approché ce système dans l'astuce liens différents sur les titres, je rappel qu'on les caractérisait dans le Css comme suit
.post-title a:link {
color:#FFFFFF;
}
Ce que l'on pourrait exprimer en language parlé par "si le texte est un lien hypertexte et qu'il se trouve dans le titre du billet (post-title), alors colore le texte en blanc", il faut (entre guillemets) 2 conditions pour que le texte soit coloré en blanc


Ce que l'on souhaite, c'est de caractériser une balise à l'intérieur d'un titre, qui aurait pour fonction de mettre le texte à droite
on va faire cela dans la balise .post-title que nous connaissons, il suffit de donner un nom simple à une balise que l'on imbiquerait dans celle du titre du billet

Je peux l'appeler BalisePourMettreLeTexteADroite, mwouais un peu trop long, je peux l'appeler TexteTitreDroite, ou n'importe quel autre nom que l'on souhaite, mais je peux aussi simplment lui donner le nom d'une balise existente, qui dans ce cas particulier (mettre un texte à droite sur un titre) aurait une valeur différente de celle que l'on lui connait habituellemnt.
Il est "d'usage" pour faire cela d'utiliser la balise em qui sert justement à accentuer/mettre en évidence un texte
(mieux vaut appeler une balise en faisant <em> qu'en faisant <span class="BalisePourMettreLeTexteADroite">, mais a chacun de choisir ;)

On écrit alors le code Css suivant
.post-title em {
float:right;
text-align:right;
font-style:normal;
}

Il fonctionera donc lorsque l'on appellera la balise em, dans le titre du post,
on dit bien au texte de se mettre à droite float:right et text-align:right et en plus on demande à la balise em de perdre sa mise en forme (accentué en italiques) et de devenir un texte normal font-style:normal

on l'appel avec le code html

<span class="post-title"><em>Aide</em>Titre</span>

AideTitre

On peut constater qu'il faut mettre la balise em en premier, dans le cas contraire, son contenu ne s'afficherait pas
Je reconnais que cette astuce n'est pas à première vue très utile, mais cela devient bien pratique lorsque l'on souhaite offrir un espace relativement interactif en ajoutant la possibilité aux menus de s'afficher ou de se masquer, ou simplement si l'on veux les identifier avec des icones

Pour aller plus loin, il suffit de parcourir notre thème et de regarder le nombre de fois ou l'imbrication des balises est utilisée, pour comprendre son importance

Transformer une balise Block en Inline

Je rappelle une fois de plus

• une balise block comme son nom l'indique crée un bloc dans la page, sa caractéristique principale est qu'elle entraine un retour à la ligne, nous les utilisons sans peut être les identifier comme par exemple la balise de paragraphe <p>, la balise de titre <H1> <H2> etc, mais il en existe d'autres comme blockquote et les puces <ul>


• une balise inline quand à elle s'utilise directement dans un paragraphe, les plus utilisées sont <em> pour legèrement accentuer un texte, <b> pour fortement accentuer un texte, <font> pour définir les caractéristiques du texte, en fait la plupart des balises que nous utilisons sont des balisses inline que l'on peut caractériser par: elles n'entrainent pas de retour a la ligne...

Bon à prioris cela ne cause pas plus de probleme que cela sauf si l'on veut ajouter quelque chose à la droite d'un titre par exemple...un bouton de navigation ou un commentaire
Pour le bouton de navigation, pas de problème, il suffit de refermer la balise de titre après avoir défini le bouton puisque cela n'a pas d'influence sur lui, mais pour un texte, si je referme la balise de titre après l'explication, celle ci sera comprise comme titre, d'ou ces exemples (regarder ou se referme la balise de titre H3)

Pour une image (icone)

<h3>titre</h3><img src=bouton droit.gif"> titre Retour à la ligne

<h3>titre <img src=bouton droit.gif"></h3> titre pas de retour à la ligne

Et pour du texte

<h3>titre</h3> (texte explicatif) titre (texte explicatif) Retour à la ligne

<h3>titre (texte explicatif</h3> titre (texte explicatif) pas de retour à la ligne mais texte compris comme titre

Comme souvent plusieurs possibilités s'offrent à nous:

• on peut redéfinir les attributs de mis en forme du titre à chaque fois que l'on le souhaite en utilisant une balise font
  <font size="+1" color=Red style="padding-left:10px; font-family:Arial; line-height:1.5em">Titre</font>
  bon je grossis un peu le trait, mais on est pas loin



• on peut créer une balise Css que l'on appellerait titre3 et qui serait caractérisée comme suit
  .titre3{
  font-size:+1;
  color:red;
  padding-left:10px;
  font-family:Arial;
  line-height:1.5em;
  }
  
  et je l'appellerais de la façon suivante
  <span class="titre3">titre</span>
  
  c'est pas mal mais il existe deja une balise de titre dans mon theme et c'est H3 justement



• il me suffit simplement de lui dire de ne plus se comporter comme une balise block, mais comme une balise inline en modifiant le Css comme suit
  H3 {
  display:inline;
  }

A noter la réciprocité de cette fonction, on peut tout aussi bien transformer une balise inline en block, mais cela est moins utile, à part peut être pour les images

Astuces en Vrac

Ici se retrouveront tout un tas de petites astuces qui ne méritent pas un billet complet, ce billet sera régulierement mis a jour, la date de la dernière mis a jour est

~>(23 Août - 15h26)

Bordure sur une image Cliquable / Bordure sur une image dans un Post / Personnaliser les liens hypertextes (thème) / Personnaliser les liens hypertextes (sur un point particulier) / Souligner d'une couleur différente

Bordure sur une image cliquable

cela se trouve dans le Css sur la balise

a img {
border-width:0px;
}

Ceci pour ne pas mettre de bordure

Sans Bordure

Avec Bordures

Bordure sur une image dans un post (billet)

cela se trouve dans le Css sur la balise

.post img {
margin:0 0 0 0;
padding:4px;
border:0px;
}

Simplement pour montrer que l'on peut aussi agir sur la mis en page, ici l'image sera automatiquement décallée à 4px du bord

Sans Bordure

Avec Bordures

Personnaliser les liens hypertexte

(sur l'ensemble de la page)
cela se trouve dans le Css sur les balises

• a:link {
  color:#9966ff;
  text-decoration: none;
  }
  
  => Couleur du lien



• a:visited {
  color:#9966ff;
  text-decoration: none;
  }
  
  => Couleur du lien Visité



• a:hover {
  color:#990099;
  text-decoration: underline;
  }
  
  => Couleur du lien au Survole de la souris

Ceci est un lien classique, conforme a mon theme

Personnaliser les liens hypertexte

(sur un point particulier)
On peut avoir besoin de mettre un lien sur un titre, un commentaire ou tout autre point particulier, qui diffère du code couleur adopté.
Je prends comme exemple le titre du billet (post-title), pour personnaliser un lien sur le titre, il me suffit d'ajouter dans le Css

• .post-title a:link {
  color:#FFFFFF;
  }
  => Couleur du lien sur le Titre



• .post-title a:visited {
  color: #FFFFFF;
  text-decoration:none;
  }
  => Couelur du lien sur le Titre Visité



• .post-title a:hover {
  color:#FFFFFF;
  text-decoration: underline;
  }
  => Couleur du lien du Titre Survolé par la souris

Ceci est un lien spécialement conçu pour les titres

Souligner d'une couleur différente

C'est en fait une ruse, on peut utiliser les bordures
Par exemple sur un lien survolé, au lieu d'utiliser l'attribut text-decoration de valeur underline on ecrit

a:hover {
color:#990099;
border-bottom: 1px solid #FF3333;
}

Ou alors directement dans une ligne de texte
<font style="border-bottom:1px solid green">Ce qui donne ce résultat</font>

Ce qui donne ce résultat

Bordure sur une image Cliquable / Bordure sur une image dans un Post / Personnaliser les liens hypertextes (thème) / Personnaliser les liens hypertextes (sur un point particulier) / Souligner d'une couleur différente

Masquer la Blogger NavBar

Object: Supprimer la NavBar Google afin de profiter de tout l'espace

Exemple

Avec NavBar


sans NavBar

Alors c'est tres simple, mais il suffisait d'y penser

Mettre tout le contenu de la page dans un calque aligné à top=0px et left=0px
C'est a dire

<body>
<div id="Arriere plan pour masquer NavBar" style="position:absolute; width:100%; height:100%; left: 0; z-index:1; background: #8a180e; top: 0;" class="bg">

[...tout le code de la page...]

</div>
</body>

Pour ceux qui auraient besoin d'un rappel sur les différents attributs d'un calque
Pour ceux qui voudraient des explications complètes sur l'attribut class => lire ce billet

Bon on a masqué la blogger NavBar, mais je précise qu'elle est toujours présente, et il se peut qu'elle s'affiche avant le calque d'arrière plan en n'ayant juste comme effet de la voir apparaitre un court moment
Pour empêcher cela, il suffit de rajouter la ligne de code à l'intérieur des balises de style qui aura pour effet de ne pas afficher la NavBar (Cette solution seule peut etre utilisée)

<style>
* #b-navbar {display:none !important; visibility:hidden !important;}
* #b-navbar * {display:none !important; visibility:hidden !important;}
<style>

On peut aussi créer un calque d'une hauteur de 40px et d'une largeur de 100%... Enfin plein de solutions...

Un espace de 40px de haut vient d'être crée, il existe plusieurs possibilités pour le combler, comme par exemple

• Réhausser le contenu de la page pour le faire disparaitre, simplement en modifiant le code css suivant
  
  #content {
  margin:-40px auto;
  }



• utiliser cet espace pour créer un menu de navigation comme sur cet espace

Tout cela provoqué par l'ajout du menu flag

qui permet de signaler les abus sur les différents blogs, dans l'absolu utile contre la diffamation et propos à caractères douteux mais en pratique un moyen de censure, en tout cas de controle voir pression faite pour encourager un discours lissé, et dans le pire des cas utilisé par des gens mal intentionnés ou jalous (ceux qui connaissent le blog MesAstucesMsn peuvent comprendre de quoi je parle), permet de discréditer et d'attenter à la visibilité d'un blog sympathique pour la communauté...

A peine sortie du joug et des contraintes Microsoupe, va t on être orienté et guidé vers "le droit chemin" celui où toute critique et colère exprimée sera bannie...? faudra t il encore migrer? L'espace payant sera t il la seule alternative à la liberté d'expression? Combien de temps ces moyens détournés dureront-ils, va t on nous supprimer certains elements de codage?

Affaire à suivre...

(même jour 18h31)

En fait ce qui m'agace, ce n'est pas tant l'ajout de ce bouton mais le fait que cela redimensionne en largeur l'espace (erreur des programmeurs blogspot...), entrainant la présence d'une barre de défilement horizontale sur la page, ce que je trouve la chose la pire dans tout ce qui est désagrement de navigation, plus encore que des pop up à caractère douteux...
Alors je me suis demandé pourquoi certains espaces étaient touchés et pas d'autres, cela vient tout simplement du fait que seuls les blog mis à jours depuis la modifications ont été automatiquement reformatés...

Cette barre puisque sans pub, ne me dérangeait pas plus que ça, mais là cela touche directement à la mise en forme de mon espace donc aux grands maux les grands remèdes voici toutes les balises Css de la NavBar

#flagi
#flagtop
#top-filler
#flagi-body
#b-logo
#b-navbar
#b-search
#b-more
#b-getorpost
#flagButton
#b-next
#b-this
#b-query
#b-searchbtn
#b-blogthis

il suffit donc de placer dans le Css la ligne de code

#flagi {
display:none;
visibility:hidden;
}

pour que flagi ne soit plus affiché (que ce soit une balise ou calque... on fait pas dans la finesse... ;)

Les plus furieux (comme moi) n'afficheront rien, les autres chercheront peut être à n'en masquer que quelques uns, à chacun de trouver (pour l'instant)
il semblerait qu'il suffise de masquer #b-logo et #b-search

La Balise Marquee

La balise Marquee est utilisée pour faire défiler un texte ou une image

Exemple

Ce peut être

une image

5
4
3
2
1
00
1
2
3
4
5ou alors du texte

La balise Marquee est délimitée entre les balises <MARQUEE> et </MARQUEE> et s'écrit

<MARQUEE behavior="scroll" BGCOLOR='FFFFFF' DIRECTION='left' WIDTH='100%' HEIGHT='16' VALIGN='bottom' SCROLLAMOUNT='2' SCROLLDELAY='30' onmouseover='this.stop()' onmouseout='this.start()'><img src="lien vers l'image" width="100" height="100"></MARQUEE>

Les différents attributs qu'elle peut prendre sont:

• behavior permet de définir un comportement au contenu de la balise
  
  • scroll pour un défilement continu
  
  
  • slide le défilement s'arrête dès qu'il arrive sur un bord
  
  
  • Alternate dés que le défilement arrive en buttée, il repart dans l'autre sens
  
  
• BGCOLOR est la couleur d'arrière plan



• DIRECTION est le sens dans lequel va etre le défilement, il peut etre:
  
  • up vers le Haut
  
  
  • down vers le Bas
  
  
  • right vers la Droite
  
  
  • left
  vers la gauche


• width et height sont respectivement la largeur et la hauteur sur laquelle va se faire l'animation, ces valeurs peuvent etre exprimées en % ou en Px.
  (Par exemple pour un width de 50% l'animation se fera sur la moitié de la largeur de l'espace)



• SCROLLAMOUNT est la vitesse de défilement, plus cette valeur est élevée, plus le défilement est rapide



• SCROLLDELAY est censé etre le nombre de pixels entre 2 apparitions de texte (mais je ne l'ai jamais vu fonctionner)



• Loop est le nombre de fois que le défilement va s'opérer, s'il n'est pas précisé, le défilement se répètera à l'infini...



• onmouseover='this.stop()' pour arrêter le défilement au passage de la souris



• onmouseout='this.start()' pour redemarrer le défilement lorsque la souris ne pointe plus sur le texte

Exposition des Astuces

Exposition des Astuces

Derniere m-a-j (23 Août 13h49)

Texte aligné à droite et à gauche sur la même ligne / Masquer la Blogger NavBar / La Balise Marquee / Afficher-Masquer un paragraphe-Menu / Afficher ou Masquer un calque / Personnaliser les barres de Défilement / La Balise Acronym / Définition et Appel d'Ancre

Texte aligné à droite et à gauche sur la même ligne

AideTitre

Voir les explications

Masquer la Blogger NavBar

Avec NavBar

sans NavBar

Voir les explications

La Balise Marquee

Ce peut être

une image

5
4
3
2
1
00
1
2
3
4
5ou alors du texte

Voir les explications

Afficher-Masquer un paragraphe-menu

[+/-] Afficher/Masquer le bloc1
Bloc1
ligne 1
ligne 2
ligne 3
ligne 4
ligne 5


[+/-] Afficher/Masquer le bloc2
Bloc2
ligne 2_1
ligne 2_2
ligne 2_3
ligne 2_4
ligne 2_5

Voir les explications

Afficher ou Masquer Calque

Cliquer pour Afficher le calque

Cliquer pour Masquer le calque

Survoler le texte pour afficher le calque

ceci est un

calque

Voir les explications

Personnaliser les Barres de Défilement

Tristesse de la Lune

Ce soir, la lune rêve avec plus de paresse;
Ainsi qu'une beauté, sur de nombreux coussins,
Qui d'une main distraite et légère caresse
Avant de s'endormir le contour de ses seins,

Sur le dos satiné des molles avalanches,
Mourante, elle se livre aux longues pâmoisons,
Et promène ses yeux sur les visions blanches
Qui montent dans l'azur comme des floraisons.

Quand parfois sur ce globe, en sa langueur oisive,
Elle laisse filer une larme furtive,
Un poète pieux, ennemi du sommeil,

Dans le creux de sa main prend cette larme pâle,
Aux reflets irisés comme un fragment d'opale,
Et la met dans son coeur loin des yeux du soleil.

Baudelaire

Voir les explications

La Balise Acronym

objet:Mettre une définition sur un mot au survole de la souris

exemple:
Aucun medicament curatif n'ayant été trouvé, le seul moyen efficace pour se proteger du SIDA est l'utilisation du préservatif

Voir les explications

Définition et appel d'ancre

Objet:Pouvoir se deplacer à l'intérieur d'un document en créant des points de référence

Le Poison

~>Voir l'auteur

Le vin sait revêtir le plus sordide bouge
D'un luxe miraculeux,
Et fait surgir plus d'un portique fabuleux
Dans l'or de sa vapeur rouge,
Comme un soleil couchant dans un ciel nébuleux.

L'opium agrandit ce qui n'a pas de bornes,
Allonge l'illimité,
Approfondit le temps, creuse la volupté,
Et de plaisirs noirs et mornes
Remplit l'âme au delà de sa capacité.

Tout cela ne vaut pas le poison qui découle
De tes yeux, de tes yeux verts,
Lacs où mon âme tremble et se voit à l'envers...
Mes songes viennent en foule
Pour se désaltérer à ces gouffres amers.

Tout cela ne vaut pas le terrible prodige
De ta salive qui mord,
Qui plonge dans l'oubli mon âme sans remords,
Et charriant le vertige,
La roule défaillante aux rives de la mort!
Baudelaire

~>Voir le titre

Voir les explications

Texte aligné à droite et à gauche sur la même ligne / Masquer la Blogger NavBar / La Balise Marquee / Afficher-Masquer un paragraphe-Menu / Afficher ou Masquer un calque / Personnaliser les barres de Défilement / La Balise Acronym / Définition et Appel d'Ancre