Nature Humaine (amocalypse)
Informatique>Site Web
Première version: 2015-04-09
Dernière version: 2019-05-03
Dans cette page vous apprendrez à faire un site minimaliste comme celui que vous avez sous les yeux.
Sommaire de la page
Un site web nécessite 2 types de fichiers :
Le répertoire racine doit contenir le fichier source du site, celui auquel on accède quand on tape juste l'URL du site sans spécifier de fichier (ex : http://arnaud.meunier.chez.aliceadsl.fr/).
Ce fichier s'appelle "index.html".
Dans ce même répertoire racine, on place la feuille de style "style.css" (le nom est libre ici, car on pointera sur cette feuille ou une autre au début de la page html).
Ensuite, suivant l'organisation qu'on a, soit on mets tous les fichiers de premier niveau dans le répertoire racine, soit comme moi on a prévu un site multi langage et chaque fichier premier niveau est dans un sous répertoire (par ex : "fr" pour français).
Chaque thème est mis dans un sous répertoire de fr par la suite, et chaque sous thème dans un sous-sous répertoire, etc.
3 types de logiciels vont lire votre site web :
Le code utilisé pour html et css doit donc être lisible par ces 3 types de logiciels, et il faut respecter les règles de cette page pour être bien référencés (arriver en première position sur la page google).
A noter que l'éditeur est facultatif, rien n'empêche de taper le code html directement dans gedit, mais c'est lourd si on écrit beaucoup de texte.
Ce site web sera d'abord sur votre disque dur, le temps de le faire, de la corriger, d'en faire les sauvegardes, etc.
Le répertoire racine et ses sous répertoires seront ensuite sauvegardés sur le serveur d'un fournisseur d'accès (ex : Free), encore appelé hébergeur. De là, il seront accessibles par tout le monde connecté au net et qui connait l'adresse URL (chemin de votre répertoire source sur internet) de vos pages.
Les gens vont arriver sur votre site parce que l'adresse de votre site :
Pour écrire vos pages internet, servez vous de gedit pour l'architecture de la page, puis ensuite de amaya pour écrire le texte comme si vous étiez dans writer. C'est amaya le seul qui laisse le code Html que vous avez écrit à la base, qui est le plus propre et ne rajoute pas des tonnes de balises inutiles. Problème depuis 2009-2011, à tendance à planter facilement sous Ubunutu, il faudrait que je teste sous d'autres applications. Ne semble pas apprécier toutes les nouveautés du HTML2, rien ne vaut firefox pour ça.
Arrêt de développement depuis 2012.
IL parait que BlueGriffon est pas mal, à essayer un jour si j'ai le temps.
<!--commentaire-->
Ce langage est constitué de balises (mot entouré des signes supérieur et inférieur, ex :<p> ) :
Encadre du texte pour donner des informations sur ce qu'est le texte (ex : <h1> pour titre niveau 1, <b> pour important).
Le fichier html est constitué de 2 blocs : l'entête (head) et le corps (body) :
La norme demande à mettre toute le code html dans une balise nommée html. Nous avons donc la structure suivante pour une page html :
<html>
<head>
... code de l'entête ...
</head>
<body>
... code de l'entête ...
</body>
</html>
La balise peut contenir des informations supplémentaires que l'on nomme attributs. Ces attributs s'écrivent nom de l'attribut="valeur de l'attribut", valeur de l'attribut étant toujours sous forme texte donc encadré de guillemets ".
Par exemple, <p align="center"> indique que c'est un paragraphe et qu'il doit être centré au milieu de la page.
Il vaut mieux éviter si possible les attributs en html, par ex il est préférable de donner le type de paragraphe <p class="toto">, et la feuille de style CSS indiquera que les classes toto seront centrées.
p pour paragraphe (saut de bloc entre 2 paragraphes). ex : <p>texte du paragraphe</p>
b pour "important" (gras par défaut).
i pour "à faire ressortir" (italique par défaut).
em est comme i, met en italique.
a pour créer un lien hypertexte pointant vers un document en spécifiant l'url de celui-ci au niveau de l'attribut "href". Le tag <a> peut également définir des ancres au sein d'un document. On peut spécifier l'attribut target pour dire si le lien s'affiche dans la même fenêtre (par défaut) ou dans une autre fenêtre (target="_blank"). Il n'est pas possible de croiser ou d'insérer deux balises a l'une dans l'autre.
div : forme un bloc dans la page. Ex : <div style="text-align: center;"> mettra tout le texte du bloc en centré jusqu'à la balise de fin </div>.
span : pour pouvoir affecter un attribut quelconque a du texte sans balise. Par exemple, pour mettre une info-bulle on met title dans la balise img ou celle de lien hypertexte href, mais si on veut le mettre sur du texte sans balise spécifique, on ajoute la balise span. Ex : <span title=" texte de l'info-bulle">texte qui s'il est survolé afficher l'info-bulle</span>
br : Saute une ligne dans le paragraphe (permet de garder les caractéristiques du paragraphe, le mode liste par exemple).
img : insère une image.
hr : ligne de séparation du texte.
Une info bulle est un texte apparaissant lors du survol de l'élément, on met title dans la balise img ou celle de lien hypertexte, mais si on veut le mettre sur du texte sans balise spécifique, on ajoute le span. Pour que cette partie du texte soit affichée différemment du texte classique sans info-bulle, on rajoute la classe "tit" (telle que je l'ai définie pour mon site, vous pouvez mettre un autre nom). Ex : <span class="tit" title="voir son livre 'la tour sombre'">Stephen King</span> => Stephen King
Pour sauter des lignes dans le texte de l'info-bulle : title="Première ligne
Deuxième ligne"
L'entête minimale (pour du HTML5 et du CSS3) est la suivante :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Le titre qui sera dans le résultat de la page du moteur de recherche genre Google</title>
<link href="../style.css" rel="stylesheet" type="text/css">
<link rel="icon" type="image/gif" href="emplacement de la miniature.gif qui apparait dans l'onglet" />
</head>
<p><object type="text/html" data="debr.htm" id="menu">
Voir le menu du site <a href="debr.htm">ici</a>
</object></p>
Dans la page html parente, va être inséré le contenu d'une autre page html (je m'en sers pour mon menu).
Cette astuce permet d'éviter d'utiliser un moteur php peut-être pas disponible sur votre hébergeur ou votre PC.
La ligne du milieu est celle qui sera affichée si la balise object n'est pas reconnue par le navigateur, en cliquant sur le lien de la page on pourra la voir quand même.
Si on a un menu dans un objet, et que des liens hypertexte sont faits dans la page html enfant (celle pointée par l'objet), par défaut les liens vont s'ouvrir dans cet objet. Si on veut modifier la page parente, on peut utiliser l'attribut target="_parent" ou "_top" :
<a href="index.html" target="_top">
Les autres target possibles ouvre le lien dans :
"_blank" => un nouvel onglet
"_self" => le cadre ou objet appelant.
"_parent" => le parent de l'objet appelant (réaction bizarre si un objet affiche lui-même un objet).
"_top" => l'onglet ou page en cours.
Ces feuilles servent à définir le style de toutes vos pages. Par exemple, pour mettre un texte un texte, au lieu de l'entourer des balises <b> et </b>, vous aller définir un style gras dans la feuille de style, et encadrer le texte avec le style gras. Le jour où vous décider, la vue baissant, que tous les textes en gras doivent être en rouge aussi, vous n'avez qu'a rajouter la propriété rouge à votre classe gras.
/* commentaire */
Code CSS pour rajouter une classe :
.nomclasse {propriétés css}
Appelé en html par <div classe="nomclasse">
On peut mettre aussi des identifiants :
#ident { propriétés css }
Appelé en html par <div id="ident">
C'est la même chose qu'une classe mais on ne peut l'appeler qu'une fois par page. On peut donc s'en servir comme d'une ancre dans un lien hypertexte pour se rendre à ce point.
Les propriétés définissent le style CSS d'un élément, par exemple une section div.
Il existe 4 modes de positionnement CSS : relative, absolute, fixed. Static permet d'afficher l'élément là où il doit être dans le flux.
Position déterminée par rapport à la position de l'élément précédent dans le code HTML.
« top = » distance entre le bord supérieur d'une zone et celui de la zone environnante.
« bottom = » distance entre le bord inférieur d'une zone et celui de la zone environnante.
« right = » distance entre le bord de droite d'une zone et celui de la zone environnante.
« left = » distance entre le bord de gauche d'une zone et celui de la zone environnante.
Les valeurs numériques et de pourcentage sont utilisées. Les valeurs négatives sont admises et il est alors possible de parvenir à faire chevaucher deux zones.
C'est la marge extérieure à l'élément, qui définit où se place les limites de l'élément par rapport à l'élément précédent.
C'est la marge intérieure de l'élément, définissant la position du contenu par rapport aux bords de l'élément.
C'est une section.
Perso j'utilise Amaya, qui n'est pas trop mal et correpond à mes besoins. C'est un Wysiwyg (acronyme de What You See Is What You Get), on écrit dans un document qui nous montre le résultat final du codage html, pas le code lui-même. Il est facile avec CTRL+U+h de voir le code html en même temps que le rendu.
Ne plante pas en permanence.
Gestion des photos en faisant glisser-déposer.
Gestion facile des images et des formules mathématiques.
ne rajoute pas des spans de partout, garde des pages de taille réduite.
Gestion des styles css d'une part, idéalement des feuilles css.
Vérification orthographe.
Ne pas mettre de é à la place de é, ce qui prends de la place inutilement.
Passer facilement dans le code.
Génération d'une table des matières.
Date de mise à jour automatique.
Sélectionner le texte qui lorsqu'il sera survolé, affichera un texte d'information. Dans la barre à droite, afficher Attributs (tout replier sinon ça peut ne pas apparaître), dans le bouton "insérer" faire défiler et choisir "titre", puis dans le champ qui apparait taper le texte de l'info-bulle, valider en cliquant sur la coche verte. Pour que le texte soit afficher différement du texte classique, lui appliquer la classe "tit", soit en choisissant dans "appliquer classe", soit dans attribut et insérer choisir class puis taper tit comme valeur. "tit" étant le nom que j'ai donné à la classe pour écrire les textes avec info-bulles.
Voir alanwood pour toutes les lettres et symboles.
Pour les caractères spéciaux, utiliser les nom des caractères, comme "α", au lieu de passer par la font symbol qui ne marche pas avec les versions récentes de html (si votre ordinateur n'a pas cette font déjà chargée).
Voir le document dans info/html/polices/symboles.pdf
En HTML il est aussi possible d'utiliser les entités de caractères comme α pour α, Les
capitales s'écrivent en commençant par une lettre majuscule ; par exemple Γ pour Γ.
On peut aussi les écrire "α", avec le numéro du symbole unicode.
Ne sont indiquées que les capitales distinctes des majuscules latines.
Dans la suite, en premier la lettre latine correspondante dans la font symbole (si "?" j'ai pas pris le temps de vérifier!), le nom de la lettre grecque, puis la normalisation html, et le symbole utf-8 qu'on peut copier-coller directement dans les pages (minuscule puis majuscule si la capitale (majuscule) grecque est différente de la latine).
La liste est triée par lettre latine, pas par lettre grecque (sinon par exemple, le gamma serait en 3eme position).
a alpha α α
b bêta β β
c chi χ χ
d delta δ δ Δ
e epsilon ε ε
f phi φ φ Φ
g gamma γ γ Γ
h êta η η
i iota ι ι
La lettre j qui n'existe pas en grec sert à modifier l'aspect de 2 autres majuscules grecques :
j phi1 ϕ ϕ (Phi majuscule sans les serifs)
J theta1 ϑ ϑ (Theta en cursif)
k kappa κ κ
l lambda λ λ Λ
m mu μ μ
n nu ν ν
o omicron ο ο (c'est la même lettre que la latine, inutile de la prendre!)
p pi π π Π
q thêta θ θ Θ
r rhô ρ ρ
s sigma σ σ Σ
t tau τ τ
u upsilon υ υ
v omega1 ϖ ϖ (redéfini le w oméga)
w oméga ω ω Ω
x xi ξ ξ Ξ
y psi ψ ψ Ψ
z zêta ζ ζ
Dans la liste suivante, en premier le caractère dans la police symbole, le nom html, et le symbole unicode.
Diamètre (ou ensemble vide) : Æ ∅ ∅
Réactions chimiques réversibles : ® ⇌ ⇌
non égal : ¹ ≠ is ≠
Infini : ¥ ∞ ∞
Intersection : Ç ∩ ∩
inférieur ou égal :£ ≤ ≤
supérieur ou égal :³ ≥ ≥
aproximatif : ~ ∼ ∼
proportionnel à : µ ∝ ∝
Perpendiculaire à : ^ ⊥ ⊥
Racine carrée : √ √ (numéro 221)
On peut utiliser Draw de libre Office, Inkscape ou The Gimp (utilisé pour les photos).
On peut scinder une ellipse : sélectionner l'élipse, clic droit > convertir > courbe 2D, puis clic droit > scinder, puis créer des points si nécessaire en sélectionnant l'icone "ajouter des points" dans les icones de la barre d'outils (si elle n'apparait pas, cliquer sur l'ellipse et cliquer sur l'icone "points" en bas).
Sélectionner Les 1 des 2 points voulus, cliquer sur l'îcone "scinder la courbe" de la barre d'outils points (celle avec le ciseau), faire pareil avec l'autre point, sélectionner la courbe entre les 2 points, et supprimer.
En ajoutant des points ça fausse toute l'ellipse, il vaut mieux copier l'ellipse originale dans une couche verrouillée d'une autre couleur pour réadapter la forme de la courbe dessus.
Pour faire des formes avec du remplissage, on est obligé de passer par la courbe fermée.
Si on a plusieurs courbes séparées les unes des autres, si on veut les fermer pour faire un remplissage il faut sélectionner 2 courbes adjacentes, clic droit > connecter. S'il y a un trait qui se rajoute, c'est que les 2 extrémités sont trop proches, il faut les écarter.
On peut aussi sélectionner plusieurs lignes ou courbes d'affilée puis cliquer sur connecter. Pareil, il ne faut pas que la forme globale tende à se refermer, car par défaut il va avoir tendance à fermer la courbe (comme si on cliquait sur fermer Bézier.
S'il y a toujours une courbe qui ferme la forme, on peut toujours scinder les 2 points de la courbe et supprimer le segment de fermeture.
Par exemple pour le retour des concentres :
im2html est un fichier texte contenant le code suivant :
#!/bin/bash
for image in $(ls *.jpg *.JPG)
do
echo '<p ALIGN=CENTER><img src=../../../imbig/avent/rass/"'$image'" alt="" /><br></p>' >> galerie.html
done
Les propriétés suivantes peuvent s'appliquer à la plupart des balises dans la feuille de style.
Taille du texte à donner en relatif, s'adapte aux préférences de taille des visiteurs.
{font-size:
xx-small : minuscule ;
x-small : très petit ;
small : petit ;
medium : moyen ;
large : grand ;
x-large : très grand ;
xx-large : euh… gigantesque.
Limité à 7 tailles, on peut aussi le faire en numérique :
1em, le texte a une taille normale (100%).
1.3em pour grossir le texte de 30%,0.8em pour le réduire de 20%. Attention, la virgule est un point décimal. On peut remplacer par un pourcentage, plus lisible.
balise
{
font-family: police;
}
on peut en mettre plusieurs (police1,police2, serif) , si la première police n'est pas trouvée sur le navigateur du lecteur. En général, on indique en tout dernier serif, ce qui correspond à une police par défaut
Pour la police, il faut que tout le monde l'ai, prendre Arial qui marche un peu partout, après Times New Roman puis Verdana .
Si la police à un espace comme "arial black", mettre des guillemets autour.
font-style qui peut prendre trois valeurs :
italic : le texte sera mis en italique.
oblique : le texte sera passé en oblique (les lettres sont penchées, le résultat est légèrement différent de l'italique proprement dit).
normal : le texte sera normal (par défaut). Cela vous permet d'annuler une mise en italique.
font-weight et prend les valeurs suivantes :
bold : le texte sera en gras ;
normal : le texte sera écrit normalement (par défa
text-decoration. Elle permet, entre autres, de souligner le texte, mais pas seulement. Voici les différentes valeurs qu'elle peut prendre :
underline : souligné.
line-through : barré.
overline : ligne au-dessus.
blink : clignotant. Ne fonctionne pas sur tous les navigateurs (Internet Explorer et Google Chrome, notamment).
none : normal (par défaut)
text-align et on indique l'alignement désiré :
left : le texte sera aligné à gauche (c'est le réglage par défaut).
center : le texte sera centré.
right : le texte sera aligné à droite.
justify : le texte sera « justifié ». Justifier le texte permet de faire en sorte qu'il prenne toute la largeur possible sans laisser d'espace blanc à la fin des lignes. Les textes des journaux, par exemple, sont toujours justifiés.
Vous ne pouvez pas modifier l'alignement du texte d'une balise inline (comme <span>, <a>, <em>, <strong>…). L'alignement ne fonctionne que sur des balises de type block (<p>, <div>, <h1>, <h2>, …) et c'est un peu logique, quand on y pense : on ne peut pas modifier l'alignement de quelques mots au milieu d'un paragraphe !
C'est donc en général le paragraphe entier qu'il vous faudra aligner.
On peut faire flotter un élément autour du texte (s'applique sur les balise block(p,div) ou inline(img,span,a,..).
{float:
left : l'élément flottera à gauche.
right : l'élément flottera… à droite
ex : <p><img src="flash.gif" class="imageflottante" alt="Image flottante" /> Ceci est un texte normal de paragraphe, écrit à la suite de l'image et qui l'habillera car l'image est flottante.</p>, avec .imageflottante{ float: left;}
L'image sera collée à gauche du paragraphe et le texte sera à droite tant qu'il y aura l'image. Une fois l'image finie il se remettra dessous.
L'élément flottant est placé en premier dans le code.
a propriété clear, qui peut prendre ces trois valeurs :
left : le texte se poursuit en-dessous après un float: left;
right : le texte se poursuit en-dessous après un float: right;
both : le texte se poursuit en-dessous, que ce soit après un float: left; ou après un float: right;.
Permet de définir à quel moment le texte sera en dessous du flottant.
<p><img src="flash.gif" class="imageflottante" alt="Image flottante" /></p>
<p>Ce texte est écrit à côté de l'image flottante.</p>
<p class="dessous">Ce texte est écrit sous l'image flottante.</p>
avec
.imageflottante
{
float: left;
}
.dessous
{
clear: both;
}
Pour les couleurs, trois façons :
color: maroon; mais limité en nombre de couleurs
color: #FFFFFF; gimp donne la couleur en hexadécimal
color: rgb(240,96,204); paint donne la couleur rgb
color est la couleur de texte, background-color la couleur d'arrière plan, background-image est l'image d'arrière plan.background-attachment permet de « fixer » le fond. L'effet obtenu est intéressant car on voit alors le texte « glisser » par-dessus le fond. fixed : l'image de fond reste fixe ;scroll : l'image de fond défile avec le texte (par défaut).
Par défaut, l'image de fond est répétée en mosaïque. Vous pouvez changer cela avec la propriété background-repeat :
no-repeat : le fond ne sera pas répété. L'image sera donc unique sur la page.
repeat-x : le fond sera répété uniquement sur la première ligne, horizontalement.
repeat-y : le fond sera répété uniquement sur la première colonne, verticalement.
repeat : le fond sera répété en mosaïque (par défaut).
background-position : position du fond
On peut indiquer où doit se trouver l'image de fond avec background-position. Cette propriété n'est intéressante que si elle est combinée avec background-repeat: no-repeat; (un fond qui ne se répète pas).
Vous devez donner à background-position deux valeurs en pixels pour indiquer la position du fond par rapport au coin supérieur gauche de la page (ou du paragraphe, si vous appliquez le fond à un paragraphe).
En CSS, si vous appliquez un style à une balise, toutes les balises qui se trouvent à l'intérieur prendront le même style. En affectant la couleur de texte à body, si une balise ne la redéfinie pas elle restera la même.
La propriété opacity, très simple, permet d'indiquer le niveau d'opacité (c'est l'inverse de la transparence).
Avec une valeur de 1, l'élément sera totalement opaque : c'est le comportement par défaut.
Avec une valeur de 0, l'élément sera totalement transparent.
Si vous appliquez la propriété opacity à un élément de la page, tout le contenu de cet élément sera rendu transparent (même les images, les autres blocs à l'intérieur, etc.). Si vous voulez juste rendre la couleur de fond transparente, utilisez plutôt la notation RGBa
Il s'agit en fait de la notation RGB que nous avons vue précédemment, mais avec un quatrième paramètre : le niveau de transparence (appelé « canal alpha »). De la même façon que précédemment, avec une valeur de 1, le fond est complètement opaque. Avec une valeur inférieure à 1, il est transparent.
Les adresses relatives sont données par rapport à la feuille de style, pas le html dans lequel elles seront lues.
--------
En html5, on peut utiliser <figure> </figure> pour encadrer une image, avec le libellé de l'image comme <figcaption> </figcaption>.
La balise <figure> a un rôle avant tout sémantique. Cela veut dire qu'elle indique à l'ordinateur que l'image a du sens et qu'elle est importante pour la bonne compréhension du texte. Cela peut permettre à un programme de récupérer toutes les figures du texte et de les référencer dans une table des figures, par exemple.
Avec la feuille CSS on peut ensuite redéfinir le format de figure.
Mettre une image dans p si c'est juste pour décorer, figure si l'image apporte du sens, si elle est importante.
Les bases d'un head :
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Premiers tests du CSS</title>
</head>
On pourra effacer tout ce qui ne sert à rien en faisant un remplacer par sur tous les fichiers htm* du site.
CSS
Dans la feuille de style CSS, il faut le nom de la balise (celle qui sera lue dans le html avec <nom balise>), et la liste des valeurs des propriétés. Les propriétés sont suivies de ":" et de leur valeur, puis ";". ex:
p{color:blue;...}
Pour ne pas redéfinir 10 fois, on peut affecter les mêmes propriétés à plusieurs balises :
h1, em{ color: blue;}
Les class et les id peuvent être utilisés sur toutes les balises (p, div, img, etc.).
<h1 class=""> </h1>
<p class=""> </p>
<img class="" />
<span class="resume"> est une balise universelle au seibn d'un pargarpahe, elle se mets sur un mot sur lequel on veut appliquer un style mais qui par défaut dans l'html n'en avait pas :
<p class="highlight"> blabla </p>
<p> blabla <span class="">blabla</span> blabla</p>
<div> balise universelle hors du paragpraphe.
un nom d ebalise est appelé sélecteur en css.
.class
#id
*{} est un sélecteur universel s'appliquant à tous les sélecteurs.
h3 em{} concerne toutes les balises em incluses dans des balises h3 (ex : <h3>Titre avec <em>texte important</em></h3>)
h3 + p{ } est une balise qui en suit une autre (sélectionne la première balise <p> située après un titre <h3>).
a[title] { sélectionne tous les liens <a> qui possèdent un attribut title (ex : <a href="http://site.com" title="Infobulle">)
a[title="Cliquez ici"]{ Idem, mais l'attribut doit en plus avoir exactement pour valeur « Cliquez ici »
A[attribut*="Valeur"] : une balise, un attribut et une valeur : a[title*="ici"]{ dem, l'attribut doit cette fois contenir dans sa valeur le mot « ici » (peu importe sa position).
Voir tous les sélecteurs ici : http://www.w3.org/Style/css3-selectors-updates/WD-css3-selectors-20010126.fr.html#selectors
------------------
en mettant title="texte bulle" dans une balise a href on écrit le texte de l'infobulle apparaissant si on promène la souris sur le lien.
Si target="_blank", on ouvre dans une autre page ou onglet (à faire pour les liens externes).
à suivre...