Archives mensuelles : janvier 2016

Archives

Les blogs inscrits au concours

Laisser un commentaire

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.

Archives

Balisons un peu…

Laisser un commentaire

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.

Qu’est-ce que 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.

Ma première page web

Pour votre première page web, vous avez besoin :

  • d’un éditeur de texte : notepad (windows), sublime text (linux), textEdit (mac os)…
  • d’un navigateur web : firefox, google chrome, safari, IE, Edge…

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 :

resultHTML01

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 actualiser) .

Pour aller plus loin

Une balise se présente sous cette forme : <balise>

Il existe deux types de balise :

  • Les balises en paire : <balise></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.

  • Les balises auto-fermantes : <balise /> 
     <br />

Quelques balises

  • <p></p> : paragraphe
 <p>Mon premier paragraphe</p>
 <p>Mon second paragraphe</p>

Ce qui nous donne :

paragraph
  • <b></b> :  gras
 <p>Mon <b>premier</b> paragraphe</p>
 <p>Mon <b>second</b> paragraphe</p>

Ce qui nous donne :

gras
  • <i></i> : italique
 <p>Mon <i>premier</i> paragraphe</p>
 <p>Mon <i>second</i> paragraphe</p>

Ce qui nous donne :

italic
  • <br /> : saut de ligne
 <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 :

sautDeLigne
  • <hr /> : séparateur
 <p>Mon premier paragraphe</p>
 <hr />
 <p>Mon second paragraphe</p>

Ce qui nous donne :

separateur
  • <img /> : image
 <p>Ma premiere image <img src="smiley.png" /></p>

Ce qui nous donne :

image

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…

  • <a> : lien
<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></li></ul> : puces
 <ul>
   <li>titre 1</li>
   <li>titre 2</li>
   <li>titre 3</li>
 </ul>

Ce qui nous donne :

puces
  • <table>< tr><td></td></tr></table> : tableau
 <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 :

tableau

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.

Pour en savoir plus

w3schools (anglais)

html.net (français)

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 coulisses du web

Derrière la page, du code…

Laisser un commentaire

Quand on écrit un article dans le blog, nous écrivons tel que nous voulons le faire apparaître aux lecteurs. Après avoir tapé son texte, les icônes de la barre d’outils au-dessus de la zone d’édition nous permettent d’améliorer la mise en forme (en gras, italique, alignement, etc.). Dépliée, la barre d’outils propose d’autres options encore…

Bref, écrire sur internet, c’est facile…

En fait, ce n’est pas si facile car un système informatique doit coder ces informations pour les transmettre et permettre l’interprétation pour tous les types de supports (ordinateurs, tablettes, smartphones), tous les systèmes d’exploitation et tous les navigateurs. Ce code est un langage appelé HTML qui a sa propre syntaxe, sa grammaire, son vocabulaire.

L’article à venir de David Lagrue vous permettra d’en savoir plus à son sujet.

Si nous écrivons ce que nous voulons écrire et si les lecteurs lisent ce que nous écrivons, sans avoir la contrainte d’écrire dans ce langage HTML, quel est donc l’intérêt d’en parler ?

Pour trois raisons principales :

1- les pages internet peuvent être lues par des lecteurs d’écran (transcription par synthèse vocale ou afficheur braille). Par exemple, les balises de titre et de listes à puces par exemple permettront au lecteur de faire ressortir de manière appropriée ces informations.

2- Ensuite, l’ensemble des balises utilisées dans le code HTML est lu par les moteurs de recherche et les algorithmes permettront de classer les résultats en fonction des balises. Une recherche sur un terme présent entre des balises h1 (balises de titre de niveau 1) apparaîtra avant une page sur laquelle le même terme est présent entre des balises p (balises de paragraphe).

3- Enfin, les balises peuvent aussi être employées par un autre langage, le CSS, permettant de modifier la présentation de ses pages. Ainsi, nous pouvons écrire dans la feuille CSS que l’ensemble des titres de niveau 1 (dotés de balises h1) doivent apparaître en orange. Et si on change d’avis, ce n’est pas la peine de reprendre tous les articles pour mettre tous les titres de niveau 1 en orange. Il suffit d’indiquer le changement dans la page CSS, et cela sera répercuté sur toutes les pages de son site ou de son blog. Dans un prochain article de Benjamin, vous en apprendrez un peu plus sur ces CSS…

Alors, comment savoir à quoi ressemble ce code ? Dans votre navigateur, vous pouvez accéder au code de n’importe quelle page, celle-ci par exemple, en cliquant sur le bouton droit de la souris puis en sélectionnant « Code source de la page » ou « Afficher le code » selon votre navigateur).

Et maintenant, si on jouait un peu avec ce code ? Copiez le code de cette page et allez sur cet éditeur en ligne pour le coller. Comparez maintenant la page que vous obtenez avec ce que vous voyez sur le blog, puis ce que vous voyez à gauche et à droite… Quelles différences observez-vous ?