 |
 |
|
|
|
|
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
| Je n'utilise plus beaucoup la balise <p> . Avec p align=center les lignes partent du milieu de la page en s'étalant symétriquement à droite et à gauche. vous pouvez laisser une marge de chaque coté en faisant des sauts de ligne <br> au bon endroit. Le gros problème sera la dernière ligne du paragraphe. si il n'y a que deux ou trois mots en plein milieu de cette ligne cela fera bizarre. Il faudra de l'inspiration pour finir de combler le vide ou recommencer en plaçant les sauts de ligne différemment. Sur une petite largeur comme ici (on dirait une page web à l'intérieur d'une autre page web) cela passe bien, mais dès que vous arrivez dans des résolutions d'écran genre PC c'est plus difficile J'utilise maintenant surtout les balises DIV, car on peut y régler facilement la largeur |
L'effet défilement (scrolling) peut être généré avec le html : |
| <marquee behavior=scroll direction="left"<p>bla bla bla</p></marquee> Cette balise est dépréciée en HTML5 |
 les-mouches.html |
|
|
|
|
Autre documentation : façon un peu différente de faire son weblog avec Openoffice (libre et gratuit) |
|
|
HTML est un langage qui a ses codes |
| Comme pour l'alphabet il faudra l' apprendre par coeur . Pour l'instant il vous faut un ordinateur et une connection à internet . Il faudra un éditeur de texte . Pour du code aussi simple Bloc-Note sur Windows , Simple Text sur Macintosh , Gedit sur bureau Gnome ou Kedit sur bureau KDE de Linux suffiront . Sur Windows vous pouvez aussi installer Notepad++ il convient aussi bien à un débutant qu'à un très confirmé . Trouver un hébergeur gratuit ? (à moins que vous ne transformiez votre PC en serveur fonctionnant 24h/24) vous paierez votre loyer grâce aux encarts publicitaires que l'hébergeur rajoutera sur vos pages web avec l'aide de javascript , car il doit assurer la maintenance de ses serveurs . |
|
| Mais Windows et MacOSx ont aussi de très bons éditeurs de texte (pur code) en téléchargement gratuit ci-dessous : |
|
|
Quel DOCTYPE utiliser (au tout début d'un fichier .html) | ||||
Pour celui que j'utilise , le HTML Transitional ajouter:
mais le Consortium parcequ'il soutient aussi le CSS privilégie notamment le HTML Strict où il faut ajouter :
car le CSS prends de plus en plus de place dans les pages web et même remplace certaines fonctions qu'apportait autrefois .html et vous avez enfin le HTML Frameset où il faut ajouter :
bonne documentation sur les différentes variantes de HTML avec l'éditeur Bluefish c'est simple : vous cliquez sur HTML et le menu déroulant vous propose DOCTYPE vous n'avez plus qu'a cliquer sur celui que vous désirez voir apparaître en haut de votre page En HTML5 c'est beaucoup plus simple: <!doctype html> retour haut de page |
Quelques balises incontournables |
| HTLM est un code à balises . Les balises HTML Les deux balises HTML dont l'une (d' ouverture)<html> au tout début (après le DOCTYPE) et l'autre (de fermeture) </html> tout à la fin , activent toutes les autres balises Les balises HEAD Vous ne verrez jamais apparaître dans la page de votre blog ce qui est écrit entre <head> et </head> , sinon dans la barre inférieure du navigateur qui reproduit ce vous avez écrit entre <title> et </title>) : pourtant ce sont deux balises incontournables qui contiennent des informations essentielles (exemple pour répertorier votre travail sur le web) . Les balises BODY <body> et </body> qui contiennent tous vos contenus, textes et images que vous verrez apparaître sur votre page web . les balises H <h1 align=center> le titre en grand en haut en milieu de page </h1> <h2>.....</h2> le titre un peu moins grand jusqu'à <h6>....</h6> la balise <hr> voir ici qui tire une ligne de séparation horizontale peut parfois se placer derrière la balise </body> pour obtenir un pied-de page la balise <p> qui ouvre un nouveau paragraphe (qui peut se résumer à un mot ou une phrase) suivi automatiquement d' un double saut de ligne et dont la balise </p> de fermeture est facultative |
Les balises DIVLes balises DIV créent des divisions, Elles forment des colonnes, des blocs (conteneurs rectangulaires) dont le saut de ligne se fait automatiquement pour les textes Les balises DIV délimitent l'emplacement et les dimensions que pourra utiliser un contenu, se substituant petit à petit aux balises TABLE (les tableaux) moins souples et au code plus compliqué, mais très utiles encore dans le HTMLTransitional : Là il s'agit d' écrire sur deux colonnes (comme dans les journaux et les magazines) . <div style="width: 45%; float: left;">Contenu de la colonne gauche </div> <div style="width: 45%; float: right;">Contenu de la colonne droite </div> <div style="clear: both;"></div> Si vous faites <div align=left>contenu de gauche</div><div align=right>contenu de droite</div> vous obtiendrez bien deux colonnes mais à chaque fois que vous écrirez une ligne dans une colonne elle provoquera un saut de ligne par rapport à l'autre colonne . J' avais trouvé cette solution dans le blogspot de Rodney Sankinka et elle a l'avantage de pouvoir être embellie par l'apport de CSS. Moi, je faisais trois tableaux, deux pour encadrer les deux contenus et un tableau vide pour faire la séparation. Mais la plupart du temps la solution de Rodney est vraiment la meilleure Une autre propriété appréciable avec les blocs DIV est celle de pouvoir se comporter comme des calques. Un cas concret: Vous voulez ajouter un encart publicitaire adsense latéral à gauche de votre page Un simple <div style=float:left> contenant le javascript google ne suffira pas. Pour un internaute possédant un écran beaucoup moins large, les blocs DIV auront tendance à se superposer. Et c'est la pub qui couvrira votre contenu. Il faudra faire<div style="position absolute;float:left">le javascript de google</div> et ajouter un style=position:relative à ou aux balises DIV entourant le contenu de votre page. |
 Mettre des couleurs dans vos tableaux et formulaires avec la balise SPAN |
Les balises SPANSont des balises très appréciées des designers Les balises SPAN créent des lignes, le saut de ligne n'est pas automatique Il faut utiliser <br> à la fin d'une ligne pour obtenir le saut de ligne ou insérer les blocs SPAN avec width:100% (largeur à 100%) à l'intérieur de balises DIV Pour créer des espaces entre les mots ou séparer horizontalement deux blocs SPAN utiliser Pour créer des sauts de ligne ou pour séparer verticalement deux blocs SPAN utiliser <br> Les balises SPAN <span> ... </span> sont utilisées pour modifier un morceau de texte qui est, la plupart du temps, déjà contenu entre des balises DIV, par exemple changer la couleur du texte: <span style="color:green;">BLA BLA</span> BLA BLA qui s'obtient aussi en faisant: <font color=green>BLA BLA</font> BLA BLA Mais incontournable pour la couleur du texte plus celle de l'arrière-plan: <span style="background:green;color:white;">:BLA BLA</span> BLA BLA Les véritables atouts des balises SPAN se trouvent dans les styles qu'elles peuvent utiliser à travers les feuilles de style. Mais contrairement à ce qu'affirment plusieurs tutoriels, même sans CSS(feuilles de styles en cascade) les balises SPAN ont déjà du style pour les couleurs en particulier et pour le design en général avec l'attribut STYLE, justement. C'est l'attribut CLASS qui servira principalement dans CSS
<span style= "display: inline -block" </span> Les balises DIV et SPAN sont compatibles avec HTML4 et HTML5 |
Les liens hypertextes |
| Vous pouvez vous instruire sur le HTML en affichant le code source d'une page ou code source d'un cadre (clic droit sur un site) . Vous avez aussi Aardvark un add-on de Firefox . C'est vrai qu'un seul paragraphe à propos des liens hypertexte aurait été un peu court car il y a aussi les liens à l'intérieur d'une même page et les liens-image par exemple . L'avantage de cette rubrique c'est de ne traiter que du HTML sans mélanger les genres . Voici donc une page spéciale liens ! |
Les balises qui rendent votre blog plus convivial |
| Une page juste avec du texte serait un peu ennuyeuse nous avons la possibilité d' insérer des fichiers multimédia . Par exemple nous allons placer des images grâce à: <img src="chemin/de/l'image.extension"> entre les deux balises <body> et </body> de certaines page .html ; avant de les transférer sur le serveur nous pouvons déjà les visualiser avec votre navigateur (prévisualisation en local) . Si l'image n'est pas déjà encore rangée dans le dossier image mais dans le répertoire "Pictures" de Vista , il faudra renseigner le chemin absolu c-à-dire <img src="C:\Users\toto\Pictures\ma_photo_de_profil.jpg"> ou dans le répertoire "Images" de Linux le chemin absolu sera : <img src="/home/toto/Images/ma_photo_de_profil.jpg"> . Pour que ces images soient vues après sur votre site ce n'est pas aussi simple qu'avec un éditeur WySiWyG, les chemins devront être relatifs car certaines de ces images seront placées en général dans un dossier "images" à l'intérieur du répertoire de votre site (dossier principal contenant tous les fichiers à transférer sur le serveur) Une fois transférés sur le serveur personne ne pourra aller chercher vos fichiers sur votre disque dur , le chemin absolu ne se fera plus depuis C:/ ou /home mais depuis la racine du site nommée parfois /site ou simplement / Chemin relatif, chemin absolu , c'est un peu difficile pour un débutant, mais avec de la pratique cela devient automatique Il faudrait presque y consacrer un paragraphe, mais vous pouvez toujours aller ici pour avoir une idée de la disposition des fichiers prêts à être transférés sur un serveur Il y a aussi les balises I: <i>en italique </i> les balises B: <b> en gras </b> les balises U: <u> en souligné </u> les balises BLINK: <blink></blink> qui ne fonctionnent que sur certains navigateurs les balises MARQUEE qui font défiler une lettre, un mot, un paragraphe ou une image |
Les balises IFRAME |
| Pour insérer une autre page web à l'intérieur de la votre. <iframe src="http://www.machin.html" height=220 width=310 </iframe> pour insérer une page avec du SWF flash de mon propre site par exemple à www.wubijacq.com/swf/mer-et-soleil.html |
Petits trucs et suppléments |
| faire un cadre invisible autour d'une image (pour qu'elle ne colle pas au bord de la page par exemple) ça fonctionne ce n'est pas forcément la meilleure solution, car de plus en plus on utilise les feuilles de style (CSS) à cet effet mais c'est la plus simple pour faire un cadre invisible horizontal : img src=".../photo.jpg" hspace="n" , ou vspace pour un cadre vertical , "n" étant la valeur en pixels Un truc quand votre code s'étire sur une seule ligne dans votre éditeur de texte : vous tapez <br> et appuyez sur la touche Entrée autant de fois que vous nécessitez d'autres lignes . Vous pourrez effacer <br> après , si vous n'en avez pas besoin à cet endroit-là , et le numérotage des lignes restera ! |
Les caractères spéciaux à la langue française |
| Nos amis vietnamiens peuvent avoir à gérer jusqu'à quatre accents sur une même voyelle. Pour pouvoir vraiment écrire en français avec ses accents: aigu , grave , circonflexe , son c cédille etc...ou en espagnol avec la tilde viva España = viva España ,il vous faut d'abord placer un metatag dans la partie HEAD D'abord indiquer le format dans lequel a été éditée la page Si vous avez édité vos pages en uft-8 : <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> sinon en ISO-8859-1 : <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" > et pour la langue française c'est "fr" <meta http-equiv="content-language" content="fr"> Mais maintenant il suffit juste de mettre juste après le doctype: lang=fr c'est bien plus simple grace au HTML5 Au debut vous pouvez eviter les accents, meme si cela fait bizarre autrement ce sera encore plus bizarre une fois transférÃ((c)) sur le ouaibe mais si vous voulez les lettres accentuées vous pouvez y remédier en transcrivant sur votre éditeur de texte pur code les caractères spéciaux : ça donne par exemple: Quelle coïncidence, j'ai passé les fêtes de Noël du coté français du lac . Où étiez-vous à Genève ? tout ça pour lire : Quelle coïncidence j'ai passé les fêtes de Noël du coté français du lac . Où étiez-vous à Genève ? |
 caractères spéciaux langue française et autres |
Tout d'abord question couleur je vous recommande d'installer un colorpicker (un petit logiciel généralement gratuit qui reconnaît et nomme les couleurs en hexadecimal (ex: "#000000" pour le noir absolu) et vous pourrez jouer avec les nuances . |
Plus de nuances avec colorpicker.com |
| couleurs en RGB , HSB et Hexadecimal afficher plein écran |
Le lecteur Flowplayer sur votre page web avec du html transitional et très peu de javascript |
| Pour placer des vidéos en FLV sur votre site , pas besoin d'aller les chercher sur Youtube , Dailymotion ou autre vous pouvez diffuser votre propre vidéo à condition de l'avoir auparavant encodée au format FLV . D'abord télécharger sur le serveur de votre site les trois fichiers : flowplayer-3.1.4.min.js , flowplayer-controls-3.1.5.swf et flowplayer-3.1.5.swf . Il faudra bien sùr télécharger votre vidéo FLV ce qui n'est pas toujours le plus facile , cela dépend de la taille de cette vidéo, des capacités de votre client FTP et de la disponibilité du serveur de votre hébergeur . retour haut de page (c'est une ancienne version de Flowplayer: à vous de changer les chiffres en fonction de la version courante) La version 3.2.2 par exemple est à oublier et je n'ai pas encore essayé la version 3.26 |
d'abord avant la balise </head> |
| <script src="flowplayer-3.1.4.min.js"></script> |
puis entre <body> et </body> |
| <a id="player" style="display:block;width:425px;height:300px;" href="nom_de_votre_video.flv"> |
vous pouvez installer votre splashscreen juste après exemple flow_eye.jpg |
| <img src="images/flow_eye.jpg"> |
et enfin à suivre |
| <script language="JavaScript">flowplayer("player","flowplayer-3.1.5.swf");</script> |
C'est une des façons d'installer le player mini de flowplayer sur un site web |
| Si vous allez sur le site demo 1/5 de flowplayer , vous verrez path/to/ ce qui signifie chemin/vers/ en français . Dans mon cas je n'ai pas de chemin à respecter vu que j'ai extrait les trois fichiers actifs du dossier flowplayer pour les envoyer directement à la racine de mon site Si certains internautes cherchent cette ancienne version: télécharger ici , garder les trois fichiers indispensables flowplayer-3.1.4.min.js flowplayer-controls-3.1.5.swf flowplayer-3.1.5.swf |
|
|
|
|
Le lecteur flv flowplayer sur le web dans une page HTML |
 le lecteur ouaibe flowplayer |
vous pouvez ouvrir un nouveau post au  forum simple-graphique"
 n'oubliez pas mon
|
