diff --git a/internet/web/html/iceberg.css b/internet/web/html/iceberg.css new file mode 100644 index 0000000..23bfb5c --- /dev/null +++ b/internet/web/html/iceberg.css @@ -0,0 +1,175 @@ +/*********************************************/ +/* Feuille de style pour le thème "Iceberg" */ +/* Fichier dans le domaine public */ +/*********************************************/ + +#theme { + background-color: #bdf; + color: black; + font-family: Verdana, Charcoal, Geneva, "Luxi Sans", sans-serif; + font-size: 12px; + margin-top: 0; + margin-left: 0; +} + +/* Contenant */ + +#tout { + background: white; + border: solid 4px silver; + margin: 10px auto; + padding: 0; + position: relative; + width: 650px; +} + +/***********************/ +/* Barre de navigation */ +/***********************/ + +#nav { + background-color: #bdf; + border-bottom: solid 5x silver; + padding: 0; + width: 100%; +} + +#nav ul { + list-style-type: none; + margin: 0; + padding: 0.5em 1em 0.5em 1em; +} + +#nav li { + display: inline; + font: bold 1.2em "Trebuchet MS", sans-serif; + padding: 0 1em; +} + +#nav a:link { color: black; } + +#nav a:visited { color: #343536; } + +#nav a.actif { color: white; } + +/******************/ +/* Corps du texte */ +/******************/ + +#corps { + background: white; + padding-bottom: 10px; +} + +/**************/ +/* Généralités*/ +/**************/ + +/* Liens */ + +a { text-decoration: none; } + +a:link { color: blue; } /* lien non encore visité */ + +a:visited { color: #2727a3; } /* lien visité */ + +a:hover { text-decoration: underline; } /* lien survolé par le curseur de la souris */ + +/* Hiérarchisation : titres, sous-titres */ + +h1 { + color: #80bbff; + font: normal 200% "Trebuchet MS" Verdana, sans-serif; + margin-left: 0; + margin-right: 0; + padding-left: 10px; +} + +h2 { + background-color: white; + font: normal 160% "Trebuchet MS" Verdana, sans-serif; + margin-left: 0; + padding-left: 10px; +} + +h3 { + font: bold 140% "Trebuchet MS" Verdana, sans-serif; + padding-left: 10px; +} + +h4 { + font: bold 120% "Trebuchet MS" Verdana, sans-serif; + padding-left: 10px; +} + +h5 { + font: italic 110% "Trebuchet MS" Verdana, sans-serif; + padding-left: 10px; +} + +h6 { + font-variant: small-caps; + padding-left: 10px; +} + +/* Texte */ + +p { + margin-right: 0; + padding-left: 10px; + padding-right: 10px; + text-align: justify; +} + +blockquote p { + color: #40aaff; + font-size: 90%; +} + +code { + font-family: monospace; /* code informatique */ +} + +/* Images */ + +img { + border-width: 0; /* pas de bordure sur les images */ +} + +/* Tableaux */ + +table { + border: solid 1px; + border-collapse: collapse; + margin-left: auto; + margin-right: auto; +} + +table td, table th { + border: solid 1px black; + margin: 0; + padding: 0.7em; +} + +th { + font-weight: bold; +} + +caption { + font-size: 120%; + font-weight: bold; + margin-left: auto; + margin-right: auto; + padding-bottom: 1em; +} + +/* Lexiques */ + +dt { + font-weight: bold; + padding-bottom: .5em; +} + +dd { + padding-bottom: 1.5em; +} diff --git a/internet/web/html/iceberg.png b/internet/web/html/iceberg.png new file mode 100644 index 0000000..caf953f Binary files /dev/null and b/internet/web/html/iceberg.png differ diff --git a/internet/web/html/iceberg.zip b/internet/web/html/iceberg.zip new file mode 100644 index 0000000..22fe374 Binary files /dev/null and b/internet/web/html/iceberg.zip differ diff --git a/internet/web/html/ocean.css b/internet/web/html/ocean.css new file mode 100644 index 0000000..e4bc0c0 --- /dev/null +++ b/internet/web/html/ocean.css @@ -0,0 +1,172 @@ +/******************************************/ +/* Feuille de style pour le thème "Océan" */ +/* Fichier dans le domaine public */ +/******************************************/ + +#theme { + color: #333333; + font-family: Verdana, Charcoal, Geneva, "Luxi Sans", sans-serif; + font-size: 12px; + margin-top: 0; + margin-left: 0; +} + +#tout { + background-color: #1e1e7f; +} + +/***********************/ +/* Barre de navigation */ +/***********************/ + +#nav { + background-color: #1e1e7f; + float: left; + height: 100%; + padding: 25px 10px 0 0; + width: 150px; +} + +#nav ul { + background-color: #1e1e7f; + list-style-type: none; + padding-left: 1em; +} + +#nav li { + background-color: #55ccbb; + font-weight: bold; + margin-bottom: .5em; + padding: 0 0 0 .5em; +} + +#nav a:link { color: black; } + +#nav a:visited { color: #343536; } + +#nav a.actif { color: white; } + +/******************/ +/* Corps du texte */ +/******************/ + +#corps { + background-color: white; + border-left: solid 5px #55ccbb; + margin-left: 160px; + min-height: 300px; + padding: 15px; + width: 600px; +} + +/**************/ +/* Généralités*/ +/**************/ + +/* Liens */ + +a { text-decoration: none; } + +a:link { color: blue; } /* lien non encore visité */ + +a:visited { color: #2727a3; } /* lien visité */ + +a:hover { text-decoration: underline; } /* lien survolé par le curseur de la souris */ + +/* Hiérarchisation : titres, sous-titres */ + +h1 { + color: #1e1e7f; + font: normal 200% "Trebuchet MS" Verdana, sans-serif; + margin-left: 0; + margin-right: 0; + padding-left: 10px; +} + +h2 { + background-color: white; + font: normal 160% "Trebuchet MS" Verdana, sans-serif; + margin-left: 0; + padding-left: 10px; +} + +h3 { + font: bold 140% "Trebuchet MS" Verdana, sans-serif; + padding-left: 10px; +} + +h4 { + font: bold 120% "Trebuchet MS" Verdana, sans-serif; + padding-left: 10px; +} + +h5 { + font: italic 110% "Trebuchet MS" Verdana, sans-serif; + padding-left: 10px; +} + +h6 { + font-variant: small-caps; + padding-left: 10px; +} + +/* Texte */ + +p { + margin-right: 0; + padding-left: 10px; + text-align: justify; +} + +blockquote p { + color: #1e1e7f; + font-size: 90%; +} + +code { + font-family: monospace; /* code informatique */ +} + +/* Images */ + +img { + border-width: 0; /* pas de bordure sur les images */ +} + +/* Tableaux */ + +table { + border: solid 1px; + border-collapse: collapse; + margin-left: auto; + margin-right: auto; +} + +table td, table th { + border: solid 1px black; + margin: 0; + padding: 0.7em; +} + +th { + font-weight: bold; +} + +caption { + font-size: 120%; + font-weight: bold; + margin-left: auto; + margin-right: auto; + padding-bottom: 1em; +} + +/* Lexiques */ + +dt { + font-weight: bold; + padding-bottom: .5em; +} + +dd { + padding-bottom: 1.5em; +} diff --git a/internet/web/html/ocean.png b/internet/web/html/ocean.png new file mode 100644 index 0000000..94a2e00 Binary files /dev/null and b/internet/web/html/ocean.png differ diff --git a/internet/web/html/ocean.zip b/internet/web/html/ocean.zip new file mode 100644 index 0000000..0bc3804 Binary files /dev/null and b/internet/web/html/ocean.zip differ diff --git a/internet/web/html/orange.css b/internet/web/html/orange.css new file mode 100644 index 0000000..52f7ecd --- /dev/null +++ b/internet/web/html/orange.css @@ -0,0 +1,190 @@ +/*********************************************/ +/* Feuille de style pour le thème "Orange" */ +/* Ce fichier est dans le domaine public. */ +/*********************************************/ + +#theme { + color: #333; + font-family: Verdana, Charcoal, Geneva, "Luxi Sans", sans-serif; + font-size: 12px; + margin-top: 0; + margin-left: 0; +} + +/* + * Barre de navigation + */ + +#nav { + left: 10px; + position: absolute; + top: 30px; + width: 150px; +} + +#nav ul { + background: #ffefd5; + border-bottom: solid 2px #fa0; + list-style-type: none; + margin-right: 0; + padding: 0; +} + +#nav li { + border-color: #fa0; + border-style: solid; + border-width: 2px 2px 0 2px; + margin: 0; + padding: 0; + width: 100%; +} + +#nav a { + color: #4682b4; + display: block; + font-family: "Trebuchet MS" Verdana, sans-serif; + font-weight: bold; + margin: 0; + padding: 0 5px 0 5px; + text-decoration: none; +} + +/* Liens de la barre de navigation */ + +#nav a:hover { + background-color: #4682b4; + color: #ffefd5; +} + +#nav a.linkOn { + font-weight: bold; + } + +#nav a.linkOn:hover{ + color: white; } + +/* + * Corps du texte + */ + +#corps { + background-color: white; + border-left: solid 4px #fa0; + margin-left: 160px; + min-height: 300px; + padding: 15px; + position: absolute; + width: 600px; /* largeur du texte limitée à 600px, supprimer si ça ne convient pas */ +} + +/* + * Généralités + */ + +/* Liens */ + +a { text-decoration: none; } + +a:link { color: blue; } /* lien non encore visité */ + +a:visited { color: #2727a3; } /* lien visité */ + +a:hover { text-decoration: underline; } /* lien survolé par le curseur de la souris */ + +/* Hiérarchisation : titres, sous-titres */ + +h1 { + color: #fa0; + font: normal 200% "Trebuchet MS" Verdana, sans-serif; + margin-left: 0; + margin-right: 0; + padding-left: 10px; +} + +h2 { + background-color: white; + font: normal 160% "Trebuchet MS" Verdana, sans-serif; + margin-left: 0; + padding-left: 10px; +} + +h3 { + font: bold 140% "Trebuchet MS" Verdana, sans-serif; + padding-left: 10px; +} + +h4 { + font: bold 120% "Trebuchet MS" Verdana, sans-serif; + padding-left: 10px; +} + +h5 { + font: italic 110% "Trebuchet MS" Verdana, sans-serif; + padding-left: 10px; +} + +h6 { + font-variant: small-caps; + padding-left: 10px; +} + +/* Texte */ + +p { + margin-right: 0; + padding-left: 10px; + text-align: justify; +} + +blockquote p { + color: #cd853f; + font-size: 90%; +} + +code { + font-family: monospace; /* code informatique */ +} + +/* Images */ + +img { + border-width: 0; /* pas de bordure sur les images */ +} + +/* Tableaux */ + +table { + border: solid 1px; + border-collapse: collapse; + margin-left: auto; + margin-right: auto; +} + +table td, table th { + border: solid 1px black; + margin: 0; + padding: 0.7em; +} + +th { + font-weight: bold; +} + +caption { + font-size: 120%; + font-weight: bold; + margin-left: auto; + margin-right: auto; + padding-bottom: 1em; +} + +/* Lexiques */ + +dt { + font-weight: bold; + padding-bottom: .5em; +} + +dd { + padding-bottom: 1.5em; +} \ No newline at end of file diff --git a/internet/web/html/orange.png b/internet/web/html/orange.png new file mode 100644 index 0000000..6f99e87 Binary files /dev/null and b/internet/web/html/orange.png differ diff --git a/internet/web/html/orange.zip b/internet/web/html/orange.zip new file mode 100644 index 0000000..af102bf Binary files /dev/null and b/internet/web/html/orange.zip differ diff --git a/internet/web/html/themes.tml b/internet/web/html/themes.tml new file mode 100644 index 0000000..86a6844 --- /dev/null +++ b/internet/web/html/themes.tml @@ -0,0 +1,262 @@ + + + + + Thèmes + + + +

Thèmes

+ +

+Vous voulez faire une page Web, mais vous n'avez pas le temps ou pas +envie de consacrer beaucoup de temps à l'apprentissage technique. Ou +alors, vous connaissez un peu de HTML mais vous n'avez pas envie de +chercher un joli design pour vos pages. Nos thèmes sont faits pour +vous! Les seules connaissances techniques pour utiliser les thèmes +sont : +

+ + + +

Présentation

+ +

+Ce que nous appelons un thème, c'est un paquet comprenant 4 +fichiers : +

+ + + +

+Le tout est prêt à l'emploi ou presque — il suffit de +télécharger les bons fichiers, de les mettre dans votre répertoire +www/ et d'insérer vos propres informations dans le +fichier-type (ça, on ne peut pas le faire à votre place). Vous +obtiendrez ainsi une page jolie (on l'espère !) et respectueuse des +standards (CSS 2.1 et HTML 4.01). +

+ +

Mode d'emploi

+ +

Choisir un thème

+ +

+Pour l'instant vous pouvez choisir parmi trois thèmes, plus viendront +par la suite. Vous pouvez aussi nous envoyer vos propres thèmes. Les +captures d'écran vous montrent à quoi ressemble chaque thème avec +Mozilla 1.6. +

+ + + + + + + + + + + +
Nom du thèmeCouleursCapture d'écranTélécharger le thème
Icebergbleu, gris, +blanciceberg.pngiceberg.zip
Océanbleu marine, vertocean.pngocean.zip
Orangeorange et bleu clairorange.pngorange.css
+ +

+Les thèmes ont été testés avec Mozilla 1.6, Firefox 0.8 et Internet +Explorer 6 — le thème simple a bien sûr été testé avec +Netscape 4. Nous espérons qu'ils marchent bien avec tous les +navigateurs, si ce n'était pas le cas, merci de nous prévenir. +

+ +

Décompacter le thème

+ +
+Attention : pour utiliser un thème, vous devez déjà +avoir un espace Web disponible. Si ce n'est déjà fait, créez votre page sur le +serveur des élèves de l'ENS. +
+ +

+Le thème se présente sous la forme d'une archive au format zip. Il +faut la décompacter dans votre répertoire www/. Sous +Unix, utilisez la commande unzip : +

+ +
+brick ~/www $ unzip orange.zip
+Archive:  orange.zip
+  inflating: simple.css              
+  inflating: modele.html             
+  inflating: .htaccess               
+  inflating: orange.css 
+
+ +

+Sous Windows, utilisez par exemple WinZip ou Power Archiver, et sous +Mac OS, MacZip. +

+ +

Personnalisations obligatoires

+ +

+Maintenant, il faut personnaliser les fichiers. Vous n'avez pas besoin +de toucher aux feuilles de style (les fichiers en .css), +mais il faut absolument modifier le fichier-type +(modele.html) et le fichier de configuration +(.htaccess). +

+ +

Modifier le fichier .htaccess

+ +

+Éditez le fichier, par exemple en utilisant NEdit : +

+ +
+brick ~/www $ nedit .htaccess
+
+ +

+Modifiez ensuite les lignes suivantes suivant les instructions dans le +fichier : +

+ +
+# Remplacez ici 'monlogin' par votre propre login
+RewriteBase /home/monlogin/
+(...)
+# Remplacez ici 'mafeuille.css' par la feuille que vous avez choisie
+RewriteRule mafeuille.css simple.css
+
+ +
+A l'aide ! Quand vous essayez de visualiser votre +page, vous voyez une erreur du serveur, genre « Internal Server +Error ». C'est dû à une erreur dans le +.htaccess. Relisez les fichiers pour voir si vous ne vous +êtes pas trompé, sinon renommez le fichier (mv .htaccess +.htaccess.orig) et contactez-nous. +
+ +

Modifier le fichier-type

+ +

+D'abord, commençons par renommer le fichier. La page d'accueil +s'appelle obligatoirement index.html. Pour les autres +pages, vous pouvez choisir le nom que vous voulez, du moment qu'il n'y +a pas d'espaces et que le nom soit évocateur du contenu : si vous +mettez votre +TIPE +en ligne, appelez-le tipe.html, par exemple. Sous Unix, +on utilise la commande mv pour renommer un fichier : +

+ +
+brick ~/www $ mv modele.html index.html
+
+ +

+Le fichier-type a en gros deux parties : +

+ + + +

+La partie « navigation » revêt la forme d'une liste avec des liens +vers les fichiers concernés. Dans le fichier-type, ça ressemble a +ceci : +

+ +
+<!-- Barre de navigation -->
+
+<div id="nav">
+<ul>
+<li> <a href="accueil.html" class="actif">accueil</a></li>
+<li> <a href="alpha.html">alpha</a></li>
+<li> <a href="beta.html">bêta</a></li>
+<li> <a href="gamma.html">gamma</a></li>
+<li> <a href="delta.html">delta</a></li>
+</ul>
+</div>
+
+<!-- Fin barre de navigation -->
+
+ +

+Ici, nous indiquons comme ceci les noms de fichiers à +modifier, et comme cela les titres de vos pages. Remplacez +les alpha, bêta, etc., par le nom de vos fichiers et le titre de vos +pages. Pour supprimer un item de la liste, effacez une ligne +commençant par <li>. Si vous n'avez qu'une seule +page en tout et pour tout, vous pouvez effacez tout simplement le bloc +« barre de navigation ». Pour le récupérer par la suite, il vous +suffira de copier-coller l'exemple ci-dessus. +

+ +

+Pour la partie du corps du texte, le modèle vous montre comment faire +des paragraphes ou des titres. Vous pouvez effacer tout ça et le +remplacer par votre propre texte. Pour savoir comment mettre en forme +votre texte, parcourez notre tutoriel HTML. +

+ +

Valider votre fichier

+ +

+Pour être sûr que vous n'avez pas oublié quelque chose dans votre code +HTML, passez la version finale de votre page au validateur du W3C. Il vous dira si +tout est en ordre ou s'il faut encore jeter un petit coup d'œil +au code. +

+ +
Auteur : Marie-Lan Nguyen. +Dernière modification : le . +
+ + + +