Archives pour la catégorie Archives

les anciens articles, à consulter sans modération

Référencement – buzz – réputation… Carte blanche aux BTS comm’ des Arcades

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.

Du code oui, mais avec du style

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.

Le style, la base…

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>
Base de notre page web
Base de notre page web

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 !

etape1

C’est finalement assez simple de définir une présentation pour un document :

  1. on définit quel élément nous voulons modifier
  2. entre accolades, on inscrit les différentes propriétés que l’on souhaite attribuer à l’élément.

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 !

etape2

Le style, avec classe…

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 ;
}

etape4

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 blogs inscrits au concours

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 http://blogue-ton-ecole.ac-dijon.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 http://blogue-ton-ecole.ac-dijon.fr/4eme-tremplin
Collège Jean Rostand Quétigny Les douze travaux des sixièmes http://blogue-ton-ecole.ac-dijon.fr/mythologie
Collège Jacques Prévert – Migennes Club Manga du collège Jacques Prévert Migennes http://blogue-ton-ecole.ac-dijon.fr/clubmangaprevertmigennes
Lycée Désiré Nisard Lisez ici, vous êtes ailleurs http://blogue-ton-ecole.ac-dijon.fr/litterature-et-societe-du-lycee-desire-nisard
Collège Jean-Philippe Rameau – Dijon Prix littéraire de Fontaine d’Ouche http://blogue-ton-ecole.ac-dijon.fr/prixlitteraireFDO
Lycée Prieur de la Côte d’Or Le Balzac Bazar http://blogue-ton-ecole.ac-dijon.fr/blogZac
LP Antoine Antoine – Chenôve Tournage au lycée Antoine http://blogue-ton-ecole.ac-dijon.fr/tournagelpantoine
Collège Jules Ferry – Beaune JEUX DE MOTS http://blogue-ton-ecole.ac-dijon.fr/jeux-de-mots
Collège Bois des Dames – Saint-Germain-du-Bois Le cercle des Webouquineurs http://blogue-ton-ecole.ac-dijon.fr/webouquineurs
Collège Champ Lumière – Selongey 1…2…3…lumière !! http://blogue-ton-ecole.ac-dijon.fr/theatrecollegeselongey
EREA-LEA Claude Brosse MANGA ZONE http://blogue-ton-ecole.ac-dijon.fr/mangazone
Lycée Camille du Gast – Chalon-sur-Saône Game of blog http://blogue-ton-ecole.ac-dijon.fr/camilledugastgameofblog
Lycée Emiland Gauthey – Chalon-sur-Saône Notre vision du futur http://blogue-ton-ecole.ac-dijon.fr/notre-vision-du-futur
Citoyenneté
Collège Le Mont Chatelet – Varzy En cinquième à Varzy contre le racisme http://blogue-ton-ecole.ac-dijon.fr/cinquieme-varzy-contre-racisme
Collège Jean Moulin – Montceau-les-Mines J. M. Blog http://blogue-ton-ecole.ac-dijon.fr/jean-moulin-montceau
Collège David Niepce L’Agora Citoyen du collège David Niepce http://blogue-ton-ecole.ac-dijon.fr/agora-niepce
Collège Victor Hugo – Lugny Ado Santé au College de Lugny http://blogue-ton-ecole.ac-dijon.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 http://blogue-ton-ecole.ac-dijon.fr/lyceedeschaumes
Lycée Prieur de la Côte d’Or Site Vinci Da Vinci Blog http://blogue-ton-ecole.ac-dijon.fr/davinciblog
Lycée E.J. Marey – Beaune Eco-Lycée Marey http://blogue-ton-ecole.ac-dijon.fr/eco-lycee-marey
Collège Condorcet – La Chapelle-de-Guinchay Blog du Collège Condorcet http://blogue-ton-ecole.ac-dijon.fr/collegeCondorcet
Collège Henri Wallon – Varennes-Vauzelles Tous frères ! http://blogue-ton-ecole.ac-dijon.fr/tousdesfreres
Lycée Jean-Marc Boivin – Chevigny-Saint-Sauveur « Pura Vida » http://blogue-ton-ecole.ac-dijon.fr/puravida
Lycée Abdel Kader, Beyrouth – MLF voixlaktée http://blogue-ton-ecole.ac-dijon.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é http://blogue-ton-ecole.ac-dijon.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 http://blogue-ton-ecole.ac-dijon.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 http://blogue-ton-ecole.ac-dijon.fr/lprostand-ga-2018
Lycée Hilaire de Chardonnet – Chalon-sur-Saône PFEG au lycée Hilaire de Chardonnet Chalon sur Saone http://blogue-ton-ecole.ac-dijon.fr/hilairepfeg2016
Lycée Lamartine – Mâcon STMG Lamartine http://blogue-ton-ecole.ac-dijon.fr/lycee-lamartine-stmg
Lycée Le Castel – Dijon La filière STMG du lycée Le Castel à Dijon http://blogue-ton-ecole.ac-dijon.fr/stmg-lecastel
Métiers, découverte professionnelle
Collège Maurice Clavel – Avallon Les pérégrinations du P’tit Maurice http://blogue-ton-ecole.ac-dijon.fr/collegeclaveldp3
Collège Champollion – Dijon L’option DP3 au collège Champollion de Dijon http://blogue-ton-ecole.ac-dijon.fr/DP3-college-champollion-dijon
Collège Paul Barreau – Lormes L’édition Normale du collège Paul Barreau de Lormes http://blogue-ton-ecole.ac-dijon.fr/edition-normale
Sciences et techniques
Collège Félix Tisserand – Nuits-Saint-Georges SolarPak http://blogue-ton-ecole.ac-dijon.fr/solarpak
Collège La Croix des Sarrasins – Auxonne Des machines qui dessinent http://blogue-ton-ecole.ac-dijon.fr/des-machines-qui-dessinent
Collège Roland Dorgeles – Longvic TRANSPORT DU FUTUR http://blogue-ton-ecole.ac-dijon.fr/FuturMobil
Collège Paul Fort – Is-sur-Tille Une serre pour la SVT! http://blogue-ton-ecole.ac-dijon.fr/cpaulfort
Collège André Lallemand – Pouilly-en-Auxois AbonnEsciences http://blogue-ton-ecole.ac-dijon.fr/abonnesciences
Langues et cultures étrangères
Lycée Clos Maire – Beaune The Clos Time http://blogue-ton-ecole.ac-dijon.fr/clos-time
Collège Pierre et Jean Lerouge – Chablis Mais qui sont tous ces hispanophones? ¿Pero quiénes son todos estos hispanohablantes? http://blogue-ton-ecole.ac-dijon.fr/mais-qui-sont-tous-ces-hispanophones
Collège Les Chênes Rouges – Saint-Germain-du-Plain Red Oaks http://blogue-ton-ecole.ac-dijon.fr/red-oaks
Collège Louise Michel – Chagny Les voyages de Louise Michel http://blogue-ton-ecole.ac-dijon.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 http://blogue-ton-ecole.ac-dijon.fr/visite-londres-college-doisneau-chalon
Collège Miles de Noyers – Noyers Les nucériens font du ski http://blogue-ton-ecole.ac-dijon.fr/les-nuceriens-font-du-ski
Collège Roger Semet – Digoin Sur la route… http://blogue-ton-ecole.ac-dijon.fr/carnetdevoyage
Lycée Prieur de la Côte d’Or Euro’xonne http://blogue-ton-ecole.ac-dijon.fr/Euroxonne
Collège Emile Lepitre – Laignes Histoire, sciences et techniques en Toscane http://blogue-ton-ecole.ac-dijon.fr/toscane2016
Lycée français d’Alexandrie – MLF École primaire Lycée français d’Alexandrie http://blogue-ton-ecole.ac-dijon.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 http://blogue-ton-ecole.ac-dijon.fr/blogue-college-prudhon
Ecole élémentaire d’Etigny Mon village, ma géographie ! http://blogue-ton-ecole.ac-dijon.fr/mon-village-ma-geographie
Lycée Thomas Dumorey – Chalon-sur-Saône Vues de Chalon http://blogue-ton-ecole.ac-dijon.fr/vuesdechalon
Vie de l’école/ de l’établissement
Collège Henri Morat – Recey-sur-Ource La Grande Ource http://blogue-ton-ecole.ac-dijon.fr/lagrandeource
Collège Louis Pergaud – Couches Louis Pergaud Infos http://blogue-ton-ecole.ac-dijon.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 http://blogue-ton-ecole.ac-dijon.fr/blogcollegefontaine
Collège Gâtinais en Bourgogne – Saint-Valérien à l’écoute de mon collège http://blogue-ton-ecole.ac-dijon.fr/lecoutedemoncollege
Lycée Technique et Professionnel Les Marcs d’Or Les Marcs d’Or en direct http://blogue-ton-ecole.ac-dijon.fr/LesMarcsdOrendirect
Collège Claude Guyot – Arnay-le-Duc Le blog du collège d’Arnay le Duc http://blogue-ton-ecole.ac-dijon.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 http://blogue-ton-ecole.ac-dijon.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.

Balisons un peu…

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.

Quelques propositions de thématiques

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.

  • Tout public – Mon identité sur internet.
  • École – Qui publie sur internet ?
  • Collège – Internet et liberté(s) dans le monde.
  • Lycées – La protection des données : un enjeu démocratique ?
  • Lycée professionnel – Le blog d’une entreprise fictive.

À vous de publier !