les anciens articles, à consulter sans modération
Bonjour,
pour les prochaines semaines, nous accueillons les étudiants BTS comm’ des Arcades. Toutes les mercredis aux environs de 12h, ils nous dévoileront leurs productions sur le référencement, le buzz et la réputation sur internet.
Merci à eux ainsi qu’à leurs enseignantes, Emmanuelle Fleith et Emmanuelle Chousta.
Nous avons pu voir dans un précédent article comment construire une page web avec le langage HTML. Nous allons voir dans cet article comment lui donner du style avec un langage adapté, le CSS.
Le CSS (Cascading Style Sheets ou Feuille de style en cascade) permet de définir la présentation des document HTML et XML.
Avant d’aller plus loin, il est fortement conseillé d’avoir lu l‘article sur l’HTML.
Reprenons donc une structure basique de document HTML :
< !-- fichier index.html -->
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ma page web</title>
<link rel= « stylesheet » href= « ./css/style.css » >
</head>
<body>
<h1>Mon premier site web!</h1>
</body>
</html>
La ligne qui nous intéresse ici, est celle-ci :
<link rel= « stylesheet » href= » ./css/style.css » >. Cette ligne de code, permet de dire au document HTML qu’un fichier CSS se trouve dans le répertoire css et son nom est style.css. C’est dans ce document que nous allons définir la présentation de notre document.
Admettons que nous voulions changer la couleur de fond de notre page web, pour la mettre en rouge. Le principe est le suivant : depuis la feuille de style, nous devons sélectionner l’élément HTML que nous voulons modifier, puis y définir des styles.
< !-- fichier css/style.css →
body {
background : red ;
}
Sauvegardez le fichier, puis retourner sur votre navigateur et rafraichissez… Magie !
C’est finalement assez simple de définir une présentation pour un document :
Un autre exemple, avec notre balise de titre <h1>, nous allons changer la couleur du texte :
< !-- fichier css/style.css →
h1 {
color: white ;
}
Sauvegardez le fichier, puis retournez sur votre navigateur et rafraichissez… Magie !
Il paraît évident que dans un même document HTML nous pouvons avoir plusieurs fois le même élément, par exemple dans un article, nous avons plusieurs balises <p> qui vont contenir tous les paragraphes. Alors comment faire pour en modifier qu’un seul ?
Reprenons notre document HTML :
< !-- fichier index.html -->
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ma page web</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<h1>Mon premier site web!</h1>
<p>Mon premier paragraphe</p>
<p>Mon deuxieme paragraphe</p>
</body>
</html>
L’idée est de pouvoir modifier le style du second paragraphe, sans modifier le premier. Pour cela, nous utiliserons l’attribut class des éléments HTML, comme ceci :
< !-- fichier index.html -->
....
<body>
....
<p class="modifier">Mon deuxieme paragraphe</p>
</body>
</html>
< !-- fichier css/style.css →
body {
background : red ;
}
h1 {
color: white ;
}
.modifier {
background : black ;
color : white ;
}
Nous avons donc rajouté une classe au paragraphe que nous voulions modifier. Si vous allez sur votre navigateur et que vous rafraîchissez vous pourrez voir les modifications.
Il existe énormément de sélecteurs en CSS. Pour en savoir plus, je vous conseille les sites suivants :
Vous pouvez faire des essais sur votre blog. En effet, avec le rôle Administrateur, dans Tableau de bord / Apparence, il existe une entrée « Modifier le CSS ». Vous pouvez ajouter le code nécessaire pour modifier l’apparence de votre blog, visualiser en aperçu ce que cela donnerait et enregistrer si cela vous convient. En cas d’erreur, il vous suffit d’effacer la ou les lignes correspondantes pour retrouver l’apparence d’origine.
Les inscriptions au concours sont désormais closes pour cette année. Merci à tous ceux qui se sont inscrits.
Voici la liste et les liens vers les blogs ouverts, deux restent en attente de précisions et seront complétés au plus vite.
Une dizaine de thématiques se sont dégagées.
| Arts et littérature | ||
| Lycée Alain Colas – Nevers | P.E.G. ensemble arts appliquons | https://bte.region-academique-bfc.fr/peg |
| École élémentaire RPI Saulon-la-Chapelle | http://rpi-saulon-la-chapelle-barges-21.ec.ac-dijon.fr | |
| Collège la Châtaigneraie – Autun | 4eme Tremplin 2015-2016 | https://bte.region-academique-bfc.fr/4eme-tremplin |
| Collège Jean Rostand Quétigny | Les douze travaux des sixièmes | https://bte.region-academique-bfc.fr/mythologie |
| Collège Jacques Prévert – Migennes | Club Manga du collège Jacques Prévert Migennes | https://bte.region-academique-bfc.fr/clubmangaprevertmigennes |
| Lycée Désiré Nisard | Lisez ici, vous êtes ailleurs | https://bte.region-academique-bfc.fr/litterature-et-societe-du-lycee-desire-nisard |
| Collège Jean-Philippe Rameau – Dijon | Prix littéraire de Fontaine d’Ouche | https://bte.region-academique-bfc.fr/prixlitteraireFDO |
| Lycée Prieur de la Côte d’Or | Le Balzac Bazar | https://bte.region-academique-bfc.fr/blogZac |
| LP Antoine Antoine – Chenôve | Tournage au lycée Antoine | https://bte.region-academique-bfc.fr/tournagelpantoine |
| Collège Jules Ferry – Beaune | JEUX DE MOTS | https://bte.region-academique-bfc.fr/jeux-de-mots |
| Collège Bois des Dames – Saint-Germain-du-Bois | Le cercle des Webouquineurs | https://bte.region-academique-bfc.fr/webouquineurs |
| Collège Champ Lumière – Selongey | 1…2…3…lumière !! | https://bte.region-academique-bfc.fr/theatrecollegeselongey |
| EREA-LEA Claude Brosse | MANGA ZONE | https://bte.region-academique-bfc.fr/mangazone |
| Lycée Camille du Gast – Chalon-sur-Saône | Game of blog | https://bte.region-academique-bfc.fr/camilledugastgameofblog |
| Lycée Emiland Gauthey – Chalon-sur-Saône | Notre vision du futur | https://bte.region-academique-bfc.fr/notre-vision-du-futur |
| Citoyenneté | ||
| Collège Le Mont Chatelet – Varzy | En cinquième à Varzy contre le racisme | https://bte.region-academique-bfc.fr/cinquieme-varzy-contre-racisme |
| Collège Jean Moulin – Montceau-les-Mines | J. M. Blog | https://bte.region-academique-bfc.fr/jean-moulin-montceau |
| Collège David Niepce | L’Agora Citoyen du collège David Niepce | https://bte.region-academique-bfc.fr/agora-niepce |
| Collège Victor Hugo – Lugny | Ado Santé au College de Lugny | https://bte.region-academique-bfc.fr/adosante |
| École élémentaire RPI Pontigny | http://rpi-pontigny-venouse-rouvray-89.ec.ac-dijon.fr | |
| Lycée Parc des Chaumes – Avallon | ça ne chaumes pas | https://bte.region-academique-bfc.fr/lyceedeschaumes |
| Lycée Prieur de la Côte d’Or Site Vinci | Da Vinci Blog | https://bte.region-academique-bfc.fr/davinciblog |
| Lycée E.J. Marey – Beaune | Eco-Lycée Marey | https://bte.region-academique-bfc.fr/eco-lycee-marey |
| Collège Condorcet – La Chapelle-de-Guinchay | Blog du Collège Condorcet | https://bte.region-academique-bfc.fr/collegeCondorcet |
| Collège Henri Wallon – Varennes-Vauzelles | Tous frères ! | https://bte.region-academique-bfc.fr/tousdesfreres |
| Lycée Jean-Marc Boivin – Chevigny-Saint-Sauveur | « Pura Vida » | https://bte.region-academique-bfc.fr/puravida |
| Lycée Abdel Kader, Beyrouth – MLF | voixlaktée | https://bte.region-academique-bfc.fr/LyceeLiban |
| Histoire patrimoine mémoire | ||
| École élémentaire de Sully | http://rpi-sully-st-leger-71.ec.ac-dijon.fr/ | |
| Lycée La Prat’s – Cluny | Matricule 35494: mémoires et responsabilité | https://bte.region-academique-bfc.fr/matricule35494 |
| Lycée international Charles de Gaulle – Dijon | Mémoires croisées des héros et des anonymes de la Première Guerre mondiale | https://bte.region-academique-bfc.fr/memoire-europeenne-premiere-guerre-mondiale |
| Economie gestion | ||
| Lycée Professionnel Jean Rostand – Nevers | Ensemble en Gestion Administration – promotion 2018 – Lycée Jean Rostand à Nevers | https://bte.region-academique-bfc.fr/lprostand-ga-2018 |
| Lycée Hilaire de Chardonnet – Chalon-sur-Saône | PFEG au lycée Hilaire de Chardonnet Chalon sur Saone | https://bte.region-academique-bfc.fr/hilairepfeg2016 |
| Lycée Lamartine – Mâcon | STMG Lamartine | https://bte.region-academique-bfc.fr/lycee-lamartine-stmg |
| Lycée Le Castel – Dijon | La filière STMG du lycée Le Castel à Dijon | https://bte.region-academique-bfc.fr/stmg-lecastel |
| Métiers, découverte professionnelle | ||
| Collège Maurice Clavel – Avallon | Les pérégrinations du P’tit Maurice | https://bte.region-academique-bfc.fr/collegeclaveldp3 |
| Collège Champollion – Dijon | L’option DP3 au collège Champollion de Dijon | https://bte.region-academique-bfc.fr/DP3-college-champollion-dijon |
| Collège Paul Barreau – Lormes | L’édition Normale du collège Paul Barreau de Lormes | https://bte.region-academique-bfc.fr/edition-normale |
| Sciences et techniques | ||
| Collège Félix Tisserand – Nuits-Saint-Georges | SolarPak | https://bte.region-academique-bfc.fr/solarpak |
| Collège La Croix des Sarrasins – Auxonne | Des machines qui dessinent | https://bte.region-academique-bfc.fr/des-machines-qui-dessinent |
| Collège Roland Dorgeles – Longvic | TRANSPORT DU FUTUR | https://bte.region-academique-bfc.fr/FuturMobil |
| Collège Paul Fort – Is-sur-Tille | Une serre pour la SVT! | https://bte.region-academique-bfc.fr/cpaulfort |
| Collège André Lallemand – Pouilly-en-Auxois | AbonnEsciences | https://bte.region-academique-bfc.fr/abonnesciences |
| Langues et cultures étrangères | ||
| Lycée Clos Maire – Beaune | The Clos Time | https://bte.region-academique-bfc.fr/clos-time |
| Collège Pierre et Jean Lerouge – Chablis | Mais qui sont tous ces hispanophones? ¿Pero quiénes son todos estos hispanohablantes? | https://bte.region-academique-bfc.fr/mais-qui-sont-tous-ces-hispanophones |
| Collège Les Chênes Rouges – Saint-Germain-du-Plain | Red Oaks | https://bte.region-academique-bfc.fr/red-oaks |
| Collège Louise Michel – Chagny | Les voyages de Louise Michel | https://bte.region-academique-bfc.fr/louise-michel-voyages |
| Voyages et sorties scolaires | ||
| Collège Robert Doisneau – Chalon-sur-Saône | Very good trip in London – Les 3° du Collége Robert Doisneau à la conquête de Londres | https://bte.region-academique-bfc.fr/visite-londres-college-doisneau-chalon |
| Collège Miles de Noyers – Noyers | Les nucériens font du ski | https://bte.region-academique-bfc.fr/les-nuceriens-font-du-ski |
| Collège Roger Semet – Digoin | Sur la route… | https://bte.region-academique-bfc.fr/carnetdevoyage |
| Lycée Prieur de la Côte d’Or | Euro’xonne | https://bte.region-academique-bfc.fr/Euroxonne |
| Collège Emile Lepitre – Laignes | Histoire, sciences et techniques en Toscane | https://bte.region-academique-bfc.fr/toscane2016 |
| Lycée français d’Alexandrie – MLF | École primaire Lycée français d’Alexandrie | https://bte.region-academique-bfc.fr/ecole-primaire-lfa |
| Lycée français de Murcie – MLF | ||
| Mon village/ma ville et le monde | ||
| Collège Prud’hon – Cluny | Blogue du collège Prud’hon, Cluny | https://bte.region-academique-bfc.fr/blogue-college-prudhon |
| Ecole élémentaire d’Etigny | Mon village, ma géographie ! | https://bte.region-academique-bfc.fr/mon-village-ma-geographie |
| Lycée Thomas Dumorey – Chalon-sur-Saône | Vues de Chalon | https://bte.region-academique-bfc.fr/vuesdechalon |
| Vie de l’école/ de l’établissement | ||
| Collège Henri Morat – Recey-sur-Ource | La Grande Ource | https://bte.region-academique-bfc.fr/lagrandeource |
| Collège Louis Pergaud – Couches | Louis Pergaud Infos | https://bte.region-academique-bfc.fr/louispergaud-infos |
| Ecole élémentaire Jean Jaurès – Dijon | Blogs des écoles maternelle et élémentaire Jean Jaurès Dijon | l’élémentaire : http://ele-dijon-jean-jaures-mixte2-21.ec.ac-dijon.fr/ la maternelle : http://mat-dijon-jean-jaures-n2-21.ec.ac-dijon.fr/ |
| Collège Fontaine des Ducs – Châtillon-sur-Seine | Blog du collège Fontaine | https://bte.region-academique-bfc.fr/blogcollegefontaine |
| Collège Gâtinais en Bourgogne – Saint-Valérien | à l’écoute de mon collège | https://bte.region-academique-bfc.fr/lecoutedemoncollege |
| Lycée Technique et Professionnel Les Marcs d’Or | Les Marcs d’Or en direct | https://bte.region-academique-bfc.fr/LesMarcsdOrendirect |
| Collège Claude Guyot – Arnay-le-Duc | Le blog du collège d’Arnay le Duc | https://bte.region-academique-bfc.fr/arnay |
| Ecole élémentaire Pablo Neruda – Chalon-sur-Saône | http://ele-chalon-pablo-neruda-71.ec.ac-dijon.fr/ | |
| Lycée français d’Alexandrie – MLF | Réseau MLF – Egypte | https://bte.region-academique-bfc.fr/mlfegypte |
Merci à Léa Bigot et Nathalie Oï qui ont œuvré dans l’ombre, la première pour la signature des conventions et la seconde pour l’ouverture des blogs.
Vous avez vu précédemment que derrière les pages se cachaient des codes. Aujourd’hui, nous allons voir ce qu’est le HTML5.
HTML signifie : Hyper Text Markup Language.
HTML est un format de données conçu pour représenter des pages web.
Un document HTML est constitué de balises HTML.
Chaque balise HTML décrit différents contenus du document.
HTML5 est la dernière version majeure d’HTML.
Pour votre première page web, vous avez besoin :
Etape 1 : ouvrez votre éditeur de texte
Etape 2 : écrivez du code HTML
Ecrivez ou copiez le code HTML ci-dessous dans votre éditeur de texte :
<!DOCTYPE html> <html> <head> <title>Titre de la page web</title> </head> <body> <h1>Titre</h1> <p>Mon premier paragraphe</p> </body> </html>
Etape 3 : sauvegardez votre page HTML
Sauvegardez votre fichier en le nommant index.html
Etape 4 : visualisez votre page HTML dans votre navigateur
Ouvrez votre fichier HTML sauvegardé dans votre navigateur
Pour cela, vous devez, à partir de votre explorateur, double-cliquer sur votre fichier index.html.
Celui-ci devrait s’ouvrir avec votre navigateur web par défaut.
Ce qui nous donne :
Et voilà, vous avez effectué votre première page web !
Le contenu « visible » de votre page web se trouve entre les balises <body> et </body>.
Remarque : lorsque vous modifiez votre document HTML, pensez à « actualiser » la page sur votre navigateur afin de voir les changements apportés (depuis votre navigateur « appuyer » sur la touche « F5 » ou bien cliquer sur 
) .
Une balise se présente sous cette forme : <balise>
Il existe deux types de balise :
<p>Mon premier paragraphe</p>
Les balises en paire sont toujours composées d’une balise ouvrante <balise> et d’une balise fermante </balise>. Et, entre les deux balises, il y a généralement du contenu textuel.
<br />
<p>Mon premier paragraphe</p> <p>Mon second paragraphe</p>
Ce qui nous donne :
<p>Mon <b>premier</b> paragraphe</p> <p>Mon <b>second</b> paragraphe</p>
Ce qui nous donne :
<p>Mon <i>premier</i> paragraphe</p> <p>Mon <i>second</i> paragraphe</p>
Ce qui nous donne :
<p>Mon premier paragraphe</p> <br /> <p>Mon second paragraphe</p>
Pour effectuer des sauts de ligne, vous êtes obligé d’utiliser la balise auto-fermante <br />, En effet, les sauts de ligne avec la touche « Entrée » dans votre éditeur ne sont pas interprétés par le navigateur.
Ce qui nous donne :
<p>Mon premier paragraphe</p> <hr /> <p>Mon second paragraphe</p>
Ce qui nous donne :
<p>Ma premiere image <img src="smiley.png" /></p>
Ce qui nous donne :
Votre image doit se situer au même endroit que votre fichier HTML (index.html).
Dans notre exemple, nous avons, ce que l’on appelle un attribut. Il s’agit de l’attribut « src » qui a comme valeur le nom de notre image : « smiley.png ».
Il existe d’autres attributs pour la balise <img> : alt, width, height…
<p>Mon premier <a href="http://www.google.fr">lien</a></p>
Ce qui nous donne :
mon premier lien
Dans notre exemple, nous avons un attribut « href » qui a comme valeur l’adresse d’une page web. Il est également possible de pointer sur une autre page « personnelle ».
<p>Mon premier <a href="mapage.html">Lien vers une autre page</a></p>
<ul> <li>titre 1</li> <li>titre 2</li> <li>titre 3</li> </ul>
Ce qui nous donne :
<table border="1"> <tr> <td>Ligne 1 Colonne 1</td> <td>Ligne 1 Colonne 2</td> </tr> <tr> <td>Ligne 2 Colonne 1</td> <td>Ligne 2 Colonne 2</td> </tr> </table>
Ce qui nous donne :
Dans notre exemple, nous avons un attribut « border » qui nous permet d’afficher les bordures du tableau.
La balise <table> indique que l’on déclare un tableau. La balise <tr> correspond à une nouvelle ligne et la balise <td> correspond à une nouvelle colonne.
Il existe d’autres balises associées aux tableaux :
<th>, <caption>, <thead>, <tbody>, <tfoot>, …
Je vous invite à faire quelques recherches sur le web pour découvrir d’autres balises et d’autres attributs pour peaufiner la structure de vos pages.
Je vous invite également à lire dans quelques jours l’article de Benjamin Gaudé sur le CSS3 qui vous permettra « d’habiller » et de mettre de la couleur dans vos pages.
Les publications à visée artistique, culturelle, scientifique, pour mettre en place des échanges linguistiques, un partenariat avec un établissement à l’autre bout du monde, en lien avec une sortie ou un voyage scolaire sont toutes possibles dans le cadre du concours de blogs.
Cependant, on pourrait vouloir participer mais ne pas avoir d’idée de publication. C’est la raison pour laquelle des thématiques sont proposées, en s’adaptant à l’âge des publics.
À vous de publier !