ABC: BLOG & BLOGGER: Blogger et HTML / CSS /Javascript pour débutants

Il ne s'agit pas d'apprendre les bases du HTML mais essayer de comprendre (un peu) quelques notions de bases essentielles du HTML afin de pouvoir personnaliser son blog avec Blogger. Egalement sont ajoutées quelques notions de base "CSS" et "javascript".
Voici donc quelques rudiments...

PRESENTATION

Le HTML ( HyperText Markup Language, dernière version 5) est un langage ouvert de balises conçu pour présenter les pages web. Il est interprété par un navigateur pour afficher une page web. Il permet de structurer et mettre en forme le contenu des pages, d’inclure des ressources multimédias. Il est souvent utilisé conjointement avec le langage de programmation JavaScript et des feuilles de style en cascade (CSS).

Blogger permet d'afficher:

Mode Rédiger = aspect visuel mais aussi l’envers du décor d’un article ou d’une page de Blogger.

Mode HTML = affichage du code HTML que l'on peut modifier ou, plus souvent, on ajoute du code HTML ou/et CSS pour obtenir une mise en forme spécifique.
Ce code est basé sur des balises de la forme <xxx> qui sont invisibles en mode visuel ("Rédiger")

Blogger et le HTML

Blogger possède un éditeur intégré qui édite automatiquement le code HTML. Il publie du code HTML classique mais parfois Blogger se permet une personnalisation ou adaptation personnelle de ce code qui peut dérouter.
En principe, on ne modifiera pas le code créé par Blogger, mais on ajoutera ,si nécessaire, quelques lignes de code HTML/CSS pour obtenir une mise en forme personnalisée ou spécifique
Le plus souvent, ce sont les "Gadgets HTML JAVASCRIPT "qui seront utilisés pour ajouter du code et des fonctionnalités au Blog. Lorsque l'on vous propose un code à intégrer, c'est généralement dans le gadget Html. Dans ce cas, vous copiez (touches CTRL+C) puis collez (touches CTRL+V) un bout de code fourni.

1-HTML : Balises les plus courantes

A savoir : les balises HTML s’écrivent sous la forme <xxxxx> et, dans la plupart des cas, doivent être fermées par une balise </xxxxx>

DOCUMENT

<html></html> : document HTML

<body></body> : corps du document

=> Blogger n'utilise pas ces codes mais ils sont obligatoires en page web classique

TITRES

<h1></h1> : titre 1er niveau
<h2></h2> : titre 2ème niveau
<h3></h3> : titre 3ème niveau (... et ainsi de suite jusqu'à 6)

=> Blogger utilise par défaut 4 niveaux :

texte normal de Blogger

<h4>Titre secondaire avec h4</h4>

<h3>Sous titre avec h3</h3>

<h2>Titre avec h2</h2>

ÉLEMENTS DE TEXTE

=> Blogger permet de formater facilement le texte

normal <b>gras</b> <i>italique</i> <strike>~~barré~~</strike>

vous pouvez préciser
-une couleur de police : <span style="color: red;">texte en rouge</span><br /> => texte en rouge
-une police différente : <span style="font-family: Times, Times New Roman, serif;">Police Times</span><br /> =>Police Times

=> Blogger n'utilise pas <p> :

LISTES

=> Blogger permet de créer facilement des listes

Balises : <li>, <ol> et <ul>

L’utilisation des listes facilite la lecture et allège le texte. Il existe deux types de listes :

La liste à puces (c’est justement celle que nous utilisons ici même), que l’on note <ul>
La liste numérotée, que l’on note <ol>

Au sein d’une liste, on utilise la balise <li> comme élèment d'une liste, pour distinguer chaque ligne:

<ol>
<li>Ligne 1</li>
<li>Ligne 2</li>
<li>Ligne 3</li>
</ol>

Le code ci-dessus affiche :

Ligne 1
Ligne 2
Ligne 3

Le code ci-dessus affiche :

TABLEAU

<table></table> : tableau
<tr></tr> : ligne du tableau
<td></td> : cellule du tableau (colonne)

=> Blogger permet désormais de créer automatiquement un tableau, mais avec peu de possibilités aussi est-il préférable d'utiliser le code HTML ou s'aider d'un site en ligne (Divtable)

Le code ci-dessus affiche :

1	2	3
4	5	6
7	8	9
10	11	12

STRUCTURE DE STYLE
conteneurs qui servent à appliquer un style

<div></div> : bloc conteneur pour regrouper plusieurs éléments
<span></span> : bloc conteneur interne pour un seul élément

AUTRES BALISES SPECIFIQUES utiles avec Blogger

<br> : saut de ligne
La balise <br> est utilisée pour effectuer des sauts de ligne.
<hr/> : ligne horizontale
La balise <hr/> permet de tracer une ligne horizontal traversant toute la largeur de la page :

<center> : centrer texte, image...
<center> votre texte ou code image </center>

texte à centrer

<marquee> Texte ou image qui défile

voir nos compléments & détails pour

TEXTE défilant

et
IMAGE / PHOTOS pour faire un mini slider

<marquee>TEXTE DEFILANT</marquee>
TEXTE DEFILANT

voir d'autres balises spécifiques pour TEXTE (cadres..)

LIENS <a href>

=> Blogger permet de créer facilement des liens

La syntaxe des liens

Balise de la forme <a href= "URL du lien"> texte du lien</a>
EX <a href= "www.monsite.com" >

pour que le lien s’ouvre dans un nouvel : <a href= "URL du lien" target="_blank"> texte du lien</a>

<a href="https://blogavecblogger.blogspot.com/"target="_blank">Abc:Blog&Blogger</a>

Le code ci-dessus affiche :

Abc:Blog&Blogger

Images <img ....>

=> Blogger permet d'insérer facilement des images

<img.......> balise "vide" qui ne contient ni texte ni balise de fermeture

Indiquer l'URL avec <img src="image.jpg"> qui peut aussi être une URL complète <img src = "https: //imagelinkhere.jpeg">

Ajoutez des informations complémentaires

texte alternatif avec alt=" texte" <img src="image.jpg" alt="Belle image !">

taille image avec width= largeur et/ou height= hauteur <img src="image.jpg width="300px"">

bordure avec border="1" <img src="image.jpg" border="1">

aligner align= (left/right/center ou top/middle/bottom) ex : <img src="image.jpg" align="center">

Plus sur le code HTMLdes images

le code que Blogger indique peut paraître complexe !
en effet Blogger créée toujours une image dans un bloc <div> et avec un lien donc l'ensembme est intégré dans la balise <a...........> </a>

<div class="separator" style="clear: both; text-align: center;">
<a href="https://URL.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" data-original-height="175" data-original-width="181" src="https://URL.png" /></a></div>

Réaliser une Image défilante

Insérer ce code en mode HTML et modifier ce qui est en fluo :

<marquee align="center" height="140" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="8" scrolldelay="1"> <img border="0" src="adresse image" /><</marquee></script>

Exemple : ici, il s'agit d'un gif animé (gif)

Images en Rollover

=> passer la souris sur la photo...
Insérer ce code en mode HTML et modifier ce qui est en fluo :
image1 : image qui s'affiche
image2: image qui s'affiche avec la souris
image3 : image qui s'affiche après le passage de la souris

<img src=" adresse image 1" onmouseover="this.src='adresse image 2'" onmouseout="this.src='adresse image1'">

Exemple

Balises HTML 5 d'INTÉGRATION

GENERALITES

La balise <object> définit un objet multimédia encapsulé à l'intérieur d'un document HTML. Cet élément est donc utilisé pour insérer/encapsuler des fichiers multimédia (audio, vidéo, Java applets, ActiveX, PDF ou Flash) dans vos pages web (et articles blogger)

La balise <iframe> est utilisé pour incorporer un autre document dans le document HTML courant. Il existe de nombreux attributs comme

taille : height et width
url à intégrer avec src
contenu à insérer avec srcdoc

La balise <embed> permet de définir un conteneur pour l'affichage d'applications externes telles que des plug-in ou de contenus interactifs (animations flash, documents pdf ...).

La balise <audio> permet de lire des fichiers sons ou des flux audio directement dans un article ou page en proposant un lecteur intégré avec des contrôles génériques tels que lecture, pause et contrôle du volume.

La balise <video> permet de lire des fichiers ou des flux vidéo directement dans la page en proposant un lecteur intégré avec des contrôles génériques tels que lecture, pause, positionnement dans la vidéo et contrôle du volume.

EXPLICATIONS DETAILLEES

Les balises génériques HTML 5 d'intégration de médias font l'objet d'un article dédié

Intégration : article de synthèse

2-LES BASES DU CSS

CSS ?

Qu’est-ce qu’une feuille CSS ? le HTML défini le type de contenu, et le CSS indique l’apparence de ce dernier.

Le code du CSS peut se placer

Dans le corps du code HTML
Dans l'en-tête de la page web
Dans une feuille de style totalement séparée du code HTML (fréquent pour un site web ou un blog)

Blogger et le CSS

Lorsque vous choisissez le 'THEME " de votre blog, en fait vous choisissez un CSS préconçu par Blogger qui va déterminer l'apparence de votre Blog.
Vous pouvez en voir le code à partir du Thème et même le modifier (ce qui déconseillé)

Comment fonctionne une feuille CSS (classique)

Comme pour le HTML, il est assez simple de comprendre ce langage. En effet, ce que l’on a appris avec le précédent, va nous servir pour créer notre feuille de styles. Voici un exemple de code :

p {
color: blue;
}

=>Cas d’un paragraphe. Ici, le code indique que tous les paragraphes de la page devront être en bleu.

-P est le sélecteur. Il détermine le contenu impacté par le code que l’on met en place.
-Color est la propriété. Elle indique ce qui va changer dans le contenu que l’on a choisi.
-Blue est la valeur. Elle sélectionne un des changements possibles dans la propriété.

Les propriétés et valeurs les plus courantes
Le fonctionnement est toujours plus ou moins le même. Tout d’abord, on sélectionne le type de contenu que l’on veut modifier. Puis, on choisi sa propriété. Enfin, on détermine la valeur de la propriété que l’on a choisie.

width : longueur d’un élément (s’écrit en pourcentages ou pixels)
height : hauteur d’un élément (s’écrit en pourcentages ou pixels)
color : couleur du texte (peut s’écrire en toutes lettres (exemples : red, blue, yellow… ), en hexadécimale (#000000), en RVB)
background : apparence du fond d’un élément (image, couleur, position, répétition)
border : bordure d’un élément (grosseur en pixels, type de bordure (solid, dotted etc), couleur)
font-size : taille de la police d’écriture (en em ou en pixels)
font-family : nom de la police d’écriture
text-align : alignement du texte (center, left (par défaut), justify, right)
line-height : interligne (nombre de pixels)
letter-spacing : espacement entre les lettres d’un mot

Utiliser le CSS dans un article de Blogger ?
en principe le CSS du Blog (donc des articles) est déterminé par le thème choisi.
Toutefois, un utilisateur avancé peut rencontrer du CCS dans un article ou, plus souvent dans un gadget "HTML/Javascript" .

Comment le CSS se présente-t-il ?
il se situe toujours entre les balises <style> et </style>

CSS dans un gadget

cas de la plupart des Menus
voir les exemples des menu simples proposés dans ce blog
le plus souvent vous n"aurez qu' a modifier les "couleurs" dans le code et indiquer la structure de votre menu.
EX:

<style type="text/css">
#monmenu {font-family: trebuchet ms, arial, tahoma, verdana, sans-serif; font-size: 90%; font-weight:bold;}
#monmenu ul ul {display: none; left: 144px; top: -1px; position: absolute; margin:0px; padding: 0px; border: 1px solid #B0B0B0;}
#monmenu ul.niveau2 {left: 0px; top: 22px;}
#monmenu ul.niveau3 {left: 144px; top: -1px;}
#monmenu li {list-style-type: none; position: relative; width: 144px; background-color: #E0E0E0; padding: 2px; margin: 0px}
#monmenu li:hover, #monmenu li.sfhover {background-color: #FFFF70;}
#monmenu li a {text-decoration:none;}
#monmenu li:hover ul.niveau2, #monmenu li li:hover ul.niveau3, #monmenu li.sfhover ul.niveau2, #monmenu li li.sfhover ul.niveau3 {display: block}
#monmenu li.plus {background-position:right; background-image: url(illustrations/ fdroite.gif); background-repeat: no-repeat; border-bottom: 1px solid #B0B0B0;}
</style>

dans un gadget HTML (voir notre article dédié)

Pour supprimer, en bas de la plage principale de Blogger : " Thème XXX . Fourni par Blogger"

<style type="text/css">.feed-links {display: none;}</style>

dans un article

l'on souhaite mettre en forme un aspect particulier, exemple des photos (voir notre article dédié)

ex pour présenter une image arrondie

<style>

.image1{

border-radius: 50%;

}

</style>

<div>

<img class="image1" src="URL IMAGE" /></div>

<br />

3-LE JAVASCRIPT

<script> </script>

Exemple : Afficher le nombre d'articles présent dans un blog
Voir d'autres exemples dans

notre article dédié

Il faut insérer ce code dans un gadget HTML/JAVASCRIPT et il va s'incrémenter automatiquement.

<script style='text/javascript'>function nombre(json) {document.write(parseInt(json.feed.openSearch$totalResults.$t,10));}</script><div style="color: #000;background: #ddd;width:150px;text-align:center;margin-left:20px;padding:3px;border-right:solid #000 1px;border-bottom:solid #000 1px;font-weight: lighter;font-family: arial;font-size: smallm;">Sur ce blog : <script src='URL DU BLOG//feeds/posts/default?alt=json-in-script&callback=nombre'></script> articles</div>