INTERNET comme nous le connaisons aujourd'hui est la somme de nombreux développements technologiques mélés aux infrastructures réseaux et aux systèmes de télécommnications.
Tout d'abord, distinguons les termes d'Internet avec le web et de ses applications qui sont souvent confondues.
Internet est un réseau informatique mondial, c’est une infrastructure globale sur laquelle s’appuient différents protocoles, dont le Web.
Le Web ou World Wide Web est un système hypertexte utilisant le protocole http (hypertext transfer protocol), permettant de visiter des pages sur le réseau Internet. Il permet de naviguer de pages en pages à partir de liens dans un navigateur. Il ne doit donc pas être confondu avec Internet, qui est pour ainsi dire son support physique. Internet est un réseau informatique mondial que le Web utilise (selon le protocole HTTP) mais d’autres applications l’utilisent aussi, tels que, par exemple, le courrier électronique (protocole SMTP) et le transfert de fichiers (protocole FTP) ou le protocole de communication textuel (IRC).
Aux origines d'Internet on trouve le projet ARPANET. Lancé dans les années 60, le projet ARPANET ne sera rendu public qu'en octobre 1972. C'est le premier réseau à transfert de paquets développé aux États-Unis par la DARPA. L'Advanced Research Projects Agency Network fut l’ancêtre technique de l’Internet actuel. Il est à l’origine de certains principes techniques fondamentaux que nous utilisons.
Développement d'Arpanet de 1969 à 1989
Le World Wide Web est une invention que l'on doit principalement à un chercheur britannique du nom de Tim Berners-Lee
le 12 Mars 1989, Tim Berners-Lee informatien au CERN rédige un document de quelques pages appelé « gestion de l’information : une proposition". Dans ce document, Tim Berners-Lee imagine une réorganisation des bases de données du prestigieux centre de recherche nucléaire. Il propose un système d’information distribué et d’utiliser des technologies de consultation non linéaires, notamment l’hypertexte, pour lier les innombrables documents scientifiques du réseau du CERN entre eux. Sans même s’en rendre compte, il vient de poser les bases d’une des plus grandes révolutions technologiques du siècle.
Le premier site et le tout premier serveur Web voient le jour sur l’ordinateur NeXT que Sendall a offert à Tim Berners-Lee.
Le site, qui n’est consultable que sur le réseau interne du CERN, est affiché sur un outil baptisé « navigateur » que Tim Berners-Lee nomme WorldWideWeb. Son adresse : info.cern.ch. Tim Berners-Lee avec le belge Robert Caillau définissent les bases de la technologie : ses deux protocoles de base, le HTTP (pour localiser et lier les documents) et le HTML (pour créer les pages). La révolution commence maintenant.
Tim Berners-Lee annonce le projet sur le groupe alt.hypertext de Usenet (ancêtre des forums Internet) Son message commence ainsi : « Le projet World Wide Web fusionne les techniques d’extraction d’information et d’hypertexte pour créer un système d’information global, simple mais puissant». Quelques lignes plus loin, Tim Berners-Lee écrit « essayez-le » en fournissant l’adresse pour télécharger un navigateur et l’URL d’un site d’essai. C’est la première fois que des utilisateurs d’Internet peuvent l’utiliser en dehors du CERN. On peut encore consulter ce message historique dans les archives de Google Groups.
La proposition de Tim Berners-Lee en mars 1989 - Photo CERN
A la question «avez-vous inventé Internet ?» , Tim Berners-Lee répond modestement : «Je n'ai fait que prendre le principe d’hypertexte et le relier au principe du TCP et du DNS et alors – boum ! – ce fut le World Wide Web !».
Quelques mois après le lancement du navigateur Mosaic qui fait exploser l’intérêt pour le WWW, le Cern fait passer son projet dans le domaine public et publie son code source.
Netscape Navigator 1.22 (1994)
Désormais accessible à tous et gratuit, le Web voit très vite son usage exploser sur Internet. En un an seulement, on passe de quelques 500 serveurs Web à 10 000 à la fin 1994. Le lancement de Netscape, le premier navigateur réellement grand public, participera aussi largement à sa démocratisation.
En 1994, le nombre de sites explose, à tel point qu’il devient très difficile pour l’internaute béotien de s’y retrouver. Deux étudiants de Stanford, Jerry Yang et David Filo, décident de créer un gigantesque annuaire de sites, classés de façon thématique. D’abord baptisé Jerry’s guide to the World Wide Web, le site est très vite rebaptisé Yahoo! Il va vite devenir le portail numéro 1 de la Toile dans la seconde partie des années 90.
En 1998, deux jeunes ingénieurs de Stanford Larry Page et Sergey Brin créaient un moteur de recherche révolutionnaire : Google. Contrairement à Altavista, qui classe parfois les pages Web en fonction des occurences du mot recherché sur la page, Google fonctionne avec un système de réputation de pages et classe ses réponses notamment en fonction du nombre et de la qualité des liens qui pointent vers elle. Le succès du site est immédiat car les résultats de recherche sont tout simplement cent fois plus pertinents que chez la concurrence.
Grandes étapes du développement du réseau
Adresse IP Une adresse IP (Internet Protocol) est un numéro d'identification qui est attribué de façon permanente ou provisoire à chaque périphérique relié à un réseau informatique qui utilise l'Internet Protocol. L'adresse IP est à la base du système d'acheminement (le routage) des paquets de données sur Internet
BIG DATA Littéralement "grosses bases de données", le Big Data représente des ensembles volumineux de données analysées dans des buts distincts
CMS (Content Management System) ou « Système de Gestion de Contenu » en français. Il peut être Open Source ou privé (propriétaire d’un prestataire). C’est une solution de création et de mise à jour de site web permettant de gérer facilement le contenu du site
DNS Domain Name System abrégé DNS, qu'on peut traduire en « système de noms de domaine », est le service informatique distribué, utilisé pour traduire les noms de domaine Internet en adresse IP
E-REPUTATION Réputation d’une entreprise, d'une personne ou d’un site web sur Internet
FTP "File Transfert Protocol" : protocole utilisé pour le transfert de fichiers sur Internet, désigne également le programme de transfert de fichiers qui utilise ce protocole
FOOTER Pied de page en français, le Footer désigne le bas d’une page web où se trouve des compléments d’informations
HYPERTEXTE est un concept de structuration de données permettant d’établir des liens entre divers éléments au sein d’un ensemble de documents. Ce concept est rendu possible par le langage HTML et le protocole HTTP est à l’origine du succès du Web
Nom de domaine Nom de l’URL de votre adresse Internet : nomdedomaine.com par exemple
PHP Hypertext Preprocessor. Langage de programmation contenu dans des pages Web et exécuté sur les serveurs (principalement HTTP) pour être interprété. C’est un langage de scripts libre et il permet de créer des pages Web dynamiques en faisant appel par exemple à une base de données
POP-UP Fenêtre publicitaire qui s’affiche automatiquement sur l’écran de l’utilisateur sans que celui-ci l’ait demandé
Protocole Internet s'appuie sur le protocole TCP/IP. Il existe de nombreux autres protocoles en usage sur ce réseau, en particulier, les principaux services offerts par Internet qui sont le web (HTTP), la messagerie électronique (POP, SMTP) les forums (NNTP), le chat (IRC), le transfert de fichiers (FTP)
REQUETE Désigne le lancement d’une recherche par un mot, ou expression ou groupe de mots, chiffres employés afin de passer des instructions à un outil de recherche, ou à une base de données afin de localiser des résultats
...
Fondé par David Bohnett et John Rezner fin 1994, GeoCities était un service d'hébergement Web gratuit très populaire qui permetait à chaque Internaute de créer gratuitement une page Internet (le facebook de l'époque si l'on veut). Les pages étaient consultables via un annuaire rangé par thématiques et classé par ville ou quartier.
Le site fut racheté par Yahoo! en janvier 1999 pour 3,57 milliards de dollars. Dix ans plus tard, le 26 octobre 2009, il est finalement fermé.
Aujourd'hui on peut toujours naviguer dans les pages de GeoCities grâce à des archives qui sont mises à disposition de l'internaute comme ici http://www.oocities.org/
Une machine pour retourner dans le temps du web c'est possible ?
Presque, avec La Way Back Machine d'Internet Archive https://archive.org/web/
Exemple du site de l'ENSBA en 2000, on voit bien le design du site malgré que les images aient disparu.
Internet c'est magique, enfin presque ! En réalité, il existe une infrastructure physique faite de câbles sous-marins, de noeux, de datas centers, de points névralgiques autour de nous. On a parfois du mal à se le représenter.
La carte mondiale des câbles de télécommunications sous-marins ici
Le Pierre de Fermat, un bateau câblier d'Orange.
On a du mal à le croire mais la majeure partie du trafic Internet transite par des câbles sous-marins
Sous l'eau parfois ça fait mal !
Plage où l'on apperçoit l'arrivée d'un cable sous marin.
Et pour bientôt un transfert par les airs !
Nos données numériques sont stockées sur des serveurs dans ce qu'on nomme des Data center (centre de traitement des données en français). Le data center est l'un des éléments nécessaires au traitement et stockage des données numériques. Indispensable à Internet, il a connu un fort développement avec l'essor du cloud computing.
Data center de Facebook situé à Luleå au Nord de la Suède (ouvert en 2013) près du cercle arctique.
Data Center Google situé à Lenoir en Caroline du Nord (USA). La salle des serveurs demeure à peine accessible
Le principal problème des data center est la consommation d'énergie. La climatisation et les systèmes de refroidissement représentent 40 à 50 % de la consommation énergétique.
Data Center Map https://www.datacentermap.com/
On compte environ 4500 data centers à travers le monde, répartis dans 122 pays dont plus de 1800 aux États-Unis. On estime leur nombre en France à 156 dont 56 en Île de France. La France est aujourd’hui la 4ème nation européenne derrière la Grande-Bretagne, l’Allemagne et les Pays-Bas.
L'indépendance du cyberespace
La Déclaration d'indépendance du cyberespace est un document rédigé le 8 février 1996 à Davos en Suisse par John Perry Barlow essayiste et un des fondateurs de l'Electronic Frontier Foundation. Il soutient l'idée qu'aucun gouvernement (ou qu'aucune autre forme de pouvoir) ne peut s'imposer et s'approprier Internet
Déclaration d’indépendance du Cyberespace
Seule l’erreur a besoin du soutien du gouvernement. La vérité peut se débrouiller toute seule.
—Thomas Jefferson, Notes on Virginia
Gouvernements du monde industriel, vous géants fatigués de chair et d’acier, je viens du Cyberespace, le nouveau domicile de l’esprit. Au nom du futur, je vous demande à vous du passé de nous laisser tranquille. Vous n’êtes pas les bienvenus parmi nous. Vous n’avez pas de souveraineté où nous nous rassemblons.
Nous n’avons pas de gouvernement élu, et il est improbable que nous en ayons un jour, aussi je ne m’adresse à vous avec aucune autre autorité que celle avec laquelle la liberté s’exprime. Je déclare l’espace social global que nous construisons naturellement indépendant des tyrannies que vous cherchez à nous imposer. Vous n’avez aucun droit moral de dicter chez nous votre loi et vous ne possédez aucun moyen de nous contraindre que nous ayons à redouter.
Les gouvernements tiennent leur juste pouvoir du consentement de ceux qu’ils gouvernent. Vous n’avez ni sollicité ni reçu le nôtre. Nous ne vous avons pas invités. Vous ne nous connaissez pas, et vous ne connaissez pas notre monde. Le Cyberespace ne se situe pas dans vos frontières. Ne pensez pas que vous pouvez le construire, comme si c’était un projet de construction publique. Vous ne le pouvez pas. C’est un produit naturel, et il croît par notre action collective.
Vous n’avez pas participé à notre grande conversation, vous n’avez pas non plus créé la richesse de notre marché. Vous ne connaissez pas notre culture, notre éthique, ni les règles tacites qui suscitent plus d’ordre que ce qui pourrait être obtenu par aucune de vos ingérences.
Vous prétendez qu’il y a chez nous des problèmes que vous devez résoudre. Vous utilisez ce prétexte pour envahir notre enceinte. Beaucoup de ces problèmes n’existent pas. Où il y a des conflits réels, où des dommages sont injustement causés, nous les identifierons et les traiterons avec nos propres moyens. Nous sommes en train de former notre propre contrat social. Cette manière de gouverner émergera selon les conditions de notre monde, pas du vôtre. Notre monde est différent.
Le Cyberespace est fait de transactions, de relations, et de la pensée elle-même, formant comme une onde stationnaire dans la toile de nos communications. Notre monde est à la fois partout et nulle part, mais il n’est pas où vivent les corps.
Nous sommes en train de créer un monde où tous peuvent entrer sans privilège et sans être victimes de préjugés découlant de la race, du pouvoir économique, de la force militaire ou de la naissance.
Nous sommes en train de créer un monde où n’importe qui, n’importe où, peut exprimer ses croyances, aussi singulières qu’elles soient, sans peur d’être réduit au silence ou à la conformité.
Vos concepts légaux de propriété, d’expression, d’identité, de mouvement, de contexte, ne s’appliquent pas à nous. Ils sont basés sur la matière, et il n’y a pas ici de matière.
Nos identités n’ont pas de corps, c’est pourquoi, contrairement à ce qui se passe chez vous, il ne peut pas, chez nous, y avoir d’ordre accompagné de contrainte physique. Nous croyons que c’est de l’éthique, de la défense éclairée de l’intérêt propre et de l’intérêt commun, que notre ordre émergera. Nos identités peuvent être distribuées à travers beaucoup de vos juridictions. La seule loi que toute nos cultures constituantes pourraient reconnaître généralement est la règle d’or [« Ne fais pas aux autres ce que tu n’aimerais pas qu’ils te fassent », NdT]. Nous espérons pouvoir bâtir nos solutions particulières sur cette base. Mais nous ne pouvons pas accepter les solutions que vous tentez de nous imposer.
Aux Etats-Unis, vous avez aujourd’hui créé une loi, le Telecommunications Reform Act, qui répudie votre propre Constitution et insulte les rêves de Jefferson, Washington, Mill, Madison, Tocqueville et Brandeis. Ces rêves doivent maintenant renaître en nous.
Vous êtes terrifiés par vos propres enfants, parce qu’ils sont natifs dans un monde où vous serez toujours des immigrants. Parce que vous les craignez, vous confiez à vos bureaucraties les responsabilités de parents auxquelles vous êtes trop lâches pour faire face. Dans notre monde, tous les sentiments et expressions d’humanité, dégradants ou angéliques, font partie d’un monde unique, sans discontinuité, d’une conversation globale de bits. Nous ne pouvons pas séparer l’air qui étouffe de l’air où battent les ailes.
En Chine, en Allemagne, en France, à Singapour, en Italie et aux Etats-Unis, vous essayez de confiner le virus de la liberté en érigeant des postes de garde aux frontières du Cyberespace. Il se peut que ceux-ci contiennent la contagion quelque temps, mais ils ne fonctionneront pas dans un monde qui sera bientôt couvert de médias numériques.
Vos industries de plus en plus obsolètes se perpétueraient en proposant des lois, en Amérique et ailleurs, qui prétendent décider de la parole elle-même dans le monde entier… Ces lois déclareraient que les idées sont un produit industriel comme un autre, pas plus noble que de la fonte brute… Dans notre monde, quoi que l’esprit humain crée peut être reproduit et distribué à l’infini pour un coût nul. L’acheminement global de la pensée n’a plus besoin de vos usines.
Ces mesures de plus en plus hostiles et coloniales nous placent dans la même situation que ces amoureux de la liberté et de l’autodétermination qui durent rejeter les autorités de pouvoirs éloignés et mal informés. Nous devons déclarer nos personnalités virtuelles exemptes de votre souveraineté, même lorsque nous continuons à accepter votre loi pour ce qui est de notre corps. Nous nous répandrons à travers la planète de façon à ce que personne puisse stopper nos pensées.
Nous créerons une civilisation de l’esprit dans le Cyberespace. Puisse-t-elle être plus humaine et plus juste que le monde issu de vos gouvernements.
Davos, Suisse
8 février 1996
texte complet traduit en français : http://editions-hache.com/essais/barlow/barlow2.html
Définition via Wikipédia du Net.art (net dot art) :
désigne les créations interactives conçues par, pour et avec le réseau Internet, par opposition aux formes d’art plus traditionnelles transférées sur le réseau.
Historique :
Net.art est un terme inventé par l'informaticien et homme de radio allemand Pit Schultz en 1995 et repris par un petit groupe d'artistes pour désigner leurs pratiques artistiques sur internet. Ces artistes, ainsi que Pit Schultz, étaient présents sur la liste Nettime et partageaient un intérêt commun pour l'art. Ce groupe s'est rencontré physiquement en janvier 1996 lors du festival Next Five Minutes à Amsterdam. Ainsi Heath Bunting et Vuk Cosic ont rencontré Alexei Shulgin qui a rencontré Jodi (duo composé de Joan Heemskerk et Dirk Paesmans), rejoints, plus tard, par Olia Lialina.
La discipline provient de l'art cybernétique de l'art des années 1960.
Depuis la seconde moitié des années 1990, le Net.art désigne ainsi les créations interactives conçues par, pour et avec le réseau Internet, par opposition aux formes d’art plus traditionnelles transférées sur le réseau.
Des galeries virtuelles et des revues électronique apparaissent et se consacrent à cette forme d’art naissant, relayées par de nombreux groupes de discussion et forums en ligne initiés par les artistes eux-mêmes.
Pour les mondes de l’art, l’originalité d’Internet tient à ce qu’il propose simultanément un support, un outil et un environnement créatif. On entend par support, sa dimension de vecteur de transmission, dans le sens où Internet est son propre diffuseur ; par outil, sa fonction d’instrument de production, qui donne lieu à des usages et génère de nouvelles œuvres artistiques ; et par environnement, enfin, le fait qu’Internet constitue un espace habitable et habité. Dans ce contexte, le travail artistique vise au moins autant la conception de dispositifs interactifs que la production de formes de vies en ligne ou d’occupation du réseau. Internet y est tout autant investi comme un atelier que comme un lieu d'exposition. Le site Internet, la page d'accueil, le blog, le courriel et les listes diffusion ou forums de discussion constituent les cadres de sociabilités renouvelées, que les développements récents du « Web 2.0 » ont radicalisés.
Les œuvres qui résultent de ses différentes expérimentations sont multiformes - environnements navigables, programmes exécutables, formes altérables - et vont parfois jusqu'à inclure une possibilité d’apport ou de transformation du matériau artistique initial.
En mai 1998, lors d'une rencontre à Banff (Centre for the Arts, Alberta, Canada), Heath Bunting, Vuk Cosic et Alexei Shulgin décident de proclamer la mort du Net.art2.
Quelques sites d'artistes :
Première vague
Form art, 1997 Alexei shulgin
Summer (the most fragile GIF on the WWW), 2013 Olia lialina
404 Jodi
Documenta Done Vuk Cosic
Si l'histoire du net.art vous intéresse et vous souhaitez expérimenter d'autres œuvres en ligne historiques, de nombreuses créations ont été restaurées grâce la plateforme Rhizome et son projet Net Art Anthology
On trouve de nombreux autres artistes sur le réseau (liste non exhaustive)
...
Deuxième vague (à partir des année 2000) l'art sort de la toile !
...
Sous Windows : Sublime Text ; Notepad++... Sous Mac OS X : Atom, TextMate; Sublime Text ; Brackets ; jEdit ; Smultron ; TextWrangler...
HTML (HyperText Markup Language) (1991) il permet de gérer et organiser le contenu. Le HTML est utilisé pour créer et montrer le contenu d'une page web et sa structure. D'autres langages sont utilisés avec le HTML pour élaborer la présentation d'une page (CSS) ou des fonctionnalités interactives (JavaScript). Le langage HTML fonctionne grâce à des « balises ». Chacune de ces balises est utile pour élaborer la structure de la page.
Allez, on soulève le capot ! L'envers du décor de nos pages web
 |
 |
Regardons de plus prêt la structure de notre page !
Description : <html></html>
En-tête de la page : <head></head>
Corps de la page : <body></body>
<!DOCTYPE html> <html> <!-- En-tête de la page --> <head> <meta charset="utf-8" /> <!-- encodage caractères spéciaux--> <title>Titre</title> </head> <body> <!-- Corps de la page --> <h1>c'est un titre</h1> <p>c'est un paragraphe</p> </body> </html>
un exemple en ligne ici
| <title></title> | = | Titre |
| <p></p> | = | paragraphe |
| <br /> | = | aller à la ligne, balise orpheline (obligatoirement à l'intérieur d'un paragraphe) |
| <h1> </h1>, <h2> </h2>...<h6> </h6> | = | Les titres |
| <strong></strong> | = | mettre un texte en gras |
| <em></em> | = | mettre un texte en italique |
| <mark></mark> | = | met en relief le texte |
| <ul></ul> | = | délimite toute la liste |
| <li></li> | = | délimite un élément (puce) |
| ... |
Des liens entre les pages ça change tout ! Derrière cette révolution du cliquable se cache la magie de l'hypertext d'Internet.
Pour créer un lien on utilise l'attribut "href".
Je suis un lien vers l'absurde cliquez-moi
Vers un site extérieur :<a href="http://www.google.com">Google</a>
Vers son propre site (ou répertoire):
<a href="mapage.html">Ma page</a>
Les formats d'images les plus courants: .jpg ou .jpeg, .png, .gif
insérer une image :
<img src="images/lune.gif" alt="Photo de la lune" />
Attention à l'arboressence ! Ici mon image est située dans le repertoire "images".
Pour insérer une vidéo des liens sont directement proposés via des sites d'hébergement vidéo comme youtube dans les liens de partage (méthode embeded). Il suffit de coller le morceau de code au bon endroit entre les balises <body></body>.
par exemple :
<iframe width="560" height="315" src="https://www.youtube.com/embed/TjcCePMrlFU" frameborder="0" allowfullscreen></iframe>
Insérer une vidéo hébergée sur son propre site (serveur)
On utilisera les balises <video></video> avec le bon chemin vers le fichier source. Pour une meilleure lisibilité des différents navigateurs on encodera en plusieurs formats la source
Exemple
<video controls width="400"> <source src="video/bipbip.mp4" type="video/mp4"> <source src="video/bipbip.ogg" type="video/ogg"> </video>
Pour insérer une piste de lecture sonore à cliquer sur son site on utilise la balise <audio></audio> :
<audio controls> <source src="audio/son.mp3" type="audio/mpeg"> <source src="audio/son.ogg" type="audio/ogg"> </audio>
Attention : Depuis quelques temps les navigateurs bloquent la lecture automatique du son et de la vidéo à l'arrivée sur un site !
les valeurs "loop" "controls" et "autoplay" sont à ajouter en fonction des besoins
Le FTP est un protocole de communication destiné au partage de fichiers sur le réseau Internet. Nous utiliserons un logiciel permettant de se connecter à des serveurs distants. Il permet d'établir une connexion puis de naviguer sur des serveurs FTP. Cyberduck ou Filezilla par exemple
En supposant que vous ayez un nom de domaine et un serveur pour héberger votre site. Il vous faut des identifiants nécessaires pour accéder à votre serveur via le FTP. Ceux-ci vous sont envoyés par votre hébergeur. Un fois établie, la connexion vous permet de faire glisser vos fichiers sur le FTP dans le répertoire www. Vos fichiers sont alors en ligne.
Le langage CSS vous permet de mettre en forme votre contenu, la couleur du texte, la typo... On écrit en général le code CSS (style.css) dans un fichier distinct que l'on appelle dans notre page html par une balise link (entre les balises <head></head>) :
<link rel="stylesheet" href="style.css" />
La feuille de style CSS se compose de la manière suivante :
h1 {
color:#2525b4;
}
h2 {
color:#4ae219;
}
em {
color:#e3d90d;
}
.intro {
color: blue;
}
Résulat : on personnalise ici des balises de la page html. Le titre h1 sera en bleu, le titre h2 sera en vert et les italiques jaune. Pour personnaliser uniquement des éléments choisis dans sa page on utilise en général les attributs : class et id
le code html :
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="style.css" /> <title>essayer le css</title> </head> <body> <h1>un site au top</h1> <h2>un sous titre du toner</h2> <p class="intro">Hello vous êtes sur mon site</p> <p>balalala blalala bla <em>pas mal non ? </em>ça avance on dirait...</p> </body> </html>
Remarque : le nom de la class commence toujours par un point "." A contrario, l'attribut "id", lui, ne sert qu'une seule fois dans le code.
exemple :
Dans le code html
<p id="logo">blablablalblalblal</p>
Dans le code CSS
#logo {
float: left;
font-size: 38pt;
}
Remarque : le nom de votre id toujours par un #
D'autres balises très utilisées:
<span> </span> : c'est une balise de type inline, c'est-à-dire une balise que l'on place au sein d'un paragraphe de texte, pour sélectionner certains mots uniquement.
html
<p>mon<span class="hello">site</span> il est bien non?</p>
CSS
.hello {
font-weight : bold;
}
La balise <div> définit une division ou une section dans un document HTML. La balise est utilisée comme conteneur pour les éléments qui pourront être ensuite stylisés avec CSS ou manipulés avec du JavaScript. On peut placer n'importe quel type de contenu dans la balise <div>.
<div> </div> est une balise de type block, qui entoure un bloc de texte
Avec Html5 les éléments de section (section, article, nav, aside, header, footer) remplacent une partie des balises <div></div> >A lire à ce sujet
voir l'exemple ici
Description : <html>
En-tête de la page : <head>
Corps de la page : <body>
Code minimal d’une page HTML
<!doctype html>
<html>
<head>
<meta charset= »UTF-8″>
<title>Document sans nom</title>
</head>
<body>
</body>
</html>
Ces balises sont toutes situées dans l’en-tête de la page, entre <head> et </head> :
<link /> : Liaison avec une feuille de style
<meta /> : Métadonnées de la page web (charset, mots-clés, etc.)
<script> : Code JavaScript
<style> : Code CSS
<title> : Titre de la page
Un langage sémantique signifie que le type de balise utilisé donne une information sur la nature de son contenu.
Ces balises permettent de construire le squelette de votre site web.
<header> : En-tête
<nav> : Liens principaux de navigation
<section> : Section de page
<article> : Article (contenu autonome)
<aside> : Informations complémentaires
<footer> : Pied de page
<abbr> : Abréviation
<blockquote> : Citation (longue)
<cite> : Citation du titre d’une œuvre ou d’un évènement
<q> : Citation (courte)
<sup> : Exposant
<sub> : Indice
<strong> : Mise en valeur forte
<em> : Mise en valeur normale
<mark> : Mise en valeur visuelle
<h1> : Titre de niveau 1
<h2> : Titre de niveau 2
<h3> : Titre de niveau 3
<h4> : Titre de niveau 4
<h5> : Titre de niveau 5
<h6> : Titre de niveau 6
<img /> : Image
<figure> : Figure (image, code, etc.)
<figcaption> : Description de la figure
<audio> : Son
<video> : Vidéo
<source> : Format source pour les balises<audio>et<video>
<a> : Lien hypertexte
<br /> : Retour à la ligne
<p> : Paragraphe
<hr /> : Ligne de séparation horizontale
<address> : Adresse de contact
<del> : Texte supprimé
<ins> : Texte inséré
<dfn> : Définition
<kbd> : Saisie clavier
<pre> : Affichage formaté (pour les codes sources)
<progress> : Barre de progression
<time> : Date ou heure
La taille du texte :
p {
font-size: 14px; /* Paragraphes de 14 pixels */
}
h1 {
font-size: 40px; /* Titres de 40 pixels */
}
Des valeurs relatives :
• xx-small : minuscule
• x-small : très petit
• small : petit
• medium : moyen
• large : grand
• x-large : très grand
• xx-large :très très grand
La police du texte :
on précise la police dans le CSS comme ceci :
p {
font-family: police;
}
Liste des polices les plus utilisées :
• Arial
• Arial Black
• Comic Sans MS
• Courier New
• Georgia
• Impact
• Times New Roman
• Trebuchet MS
• Verdana
Exemple avec plusieurs polices
p {
font-family: Impact, "Arial Black", Arial, Verdana, sans-serif;
}
ici on met plusieurs noms de polices à la suite afin de s'assurer que votre visiteur en possède au moins une.
D'autres propriétés classiques de mise en forme du texte : font-style, font-weight, text-decoration... Une liste à voir en ligne ici
On peut également intégrer une typo qui n'est pas listé ici avec Google Fonts par exemple.
Nous pouvons aligner un texte dans la page : à gauche, centré, à droite et justifié.
Pour cela on utilisera la propriété : text-align
exemple :
h1 {
text-align: center;
}
p {
text-align: justify;
}
.signature {
text-align: right;
}
Il existe trois méthodes :
.en indiquant le nom de la couleur directement
h1{
color: maroon;
}
.en indiquant la notation hexadécimale
p {
color: #FFFFFF;
}
.La méthode RGB
p {
color: rgb(240,96,204);
}
La couleur de fond de page
body {
background-color: black; /* Le fond de la page sera noir */
color: white; /* Le texte de la page sera blanc */
}
Image de fond
body {
background-image: url("neige.png");
}
Remarque :
background-attachment : fixer le fond
background-repeat : répétition du fond
background-position : position du fond
exemple :
body {
background-image: url("soleil.png");
background-attachment: fixed; /* Le fond restera fixe */
background-repeat: no-repeat; /* Le fond ne sera pas répété */
background-position: top right; /* Le fond sera placé en haut à droite */
}
a {
text-decoration: none;
color: red;
font-style: italic;
}
a:visited {
color: #333;
}
a:active {
color: green;
}
a:hover {
text-decoration: underline;
color: green;
}
La propriété "position" spécifie le type de méthode de positionnement utilisé pour un élément (static, relative, fixed, absolute or sticky).
Un exemple de positionnement bloc (div) ici et là
Pour aller plus loin sur la mise en page ici (en 3 leçons) et ce tuto.
La propriété display est la propriété CSS la plus importante pour contrôler la mise en page.
Il existe deux grands types d'affichage de balise :
- Les balises qui s'affichent en "block" (bloc) : elles prennent toute la largeur disponible et s'affichent avec un saut de ligne avant et après
- Les balises qui s'affichent "inline" : elles prennent uniquement la largeur dont elles ont besoin, sans ajouter de saut de ligne
Exemples de quelques balises HTML qui s'affichent naturellement en block : <div>, Les balises de titre : <h1>, <h2>, <h3>, La balise paragraphe : <p>, Les balises de liste : <ul>, <ol>, <li>, La balise de citation : <blockquote>, Les balises de tableaux : <table></p>
Exemples de balises HTML qui s'affichent naturellement en inline : <span>, <a> (lien), <strong> (gras), <em> (italic), <u> (souligné), <img> (image)
La propriété display permet également de masquer un élément si on lui donne la valeur "none" ("aucun" en français).
Faire une grille avec des div et la propriété display ici
Deux propriétés CSS margin et padding permettent de définir l’espace autour des éléments de type box (<div> par exemple). Margin définit l’espace entre un élément et les autres éléments qui l’entourent. Padding définit l’espace entre la bordure de l’élément et son contenu. Un exemple en ligne ici que vous pouvez modifier
La propriété CSS float spécifie comment un élément doit flotter.
Exemple
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
}
</style>
</head>
<body>
<p>Dans cet exemple l'image va flotter à droite du paragraphe.</p>
<p><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Fraises_2_Luc_Viatour.jpg/440px-Fraises_2_Luc_Viatour.jpg" alt="fraise" style="width:170px;height:170px;margin-left:15px;">
truc bidule truc machine bidule truc bidule bidule truc machine bidule truc bidule bidule truc machine bidule truc bidule bidule truc machine bidule truc bidule bidule truc machine bidule truc bidule bidule truc machine bidule truc bidule bidule truc machine bidule truc bidule bidule truc machine bidule truc bidule bidule truc machine bidule truc bidule bidule truc machine bidule truc bidule bidule truc machine bidule truc bidule bidule truc machine bidule truc bidule machin</p>
</body>
</html>
Maintenant que vous savez créer une page avec des liens, du texte, mettre des images, des sons et les mettre en ligne, je vous propose de réaliser un exercice et d'appliquer vos talents. Créez une narration comme un roman photo ou une histoire où vous êtes le héros dans laquelle nous pourrons cliquer et passer de page en page...
Une fois terminé, déposez le tout à votre prénom (sans accent) dans un dossier sur le serveur. Attention, la première page doit s'appeler "index.html". A vous de jouer :-)
un favicon est l'icône affichée dans la barre des favoris et l'onglet d'un navigateur internet. Si vous regardez bien ici c'est une chaussette !
Vous pouvez créer vous même un favicon via un logiciel de création et de retourche d 'image ou le générer via un site web comme ici https://www.ionos.fr/tools/creer-favicon
Pour fonctionner vous devez insérer une nouvelle balise link entre les parties <Head> de votre page comme ci-dessous
<link rel="icon" type="image/png" href="https://static.thenounproject.com/png/188593-200.png" />
Il existe des éditeurs en ligne avec un résultat visible instantanément comme ici. Si vous tapez sur Google "free css template html 5 responsive" Vous trouverez de nombreux exemples de sites déjà pré-codés que vous pouvez triturer pour vos besoins. Vous pouvez également vous aider d'un logiciel qui écrira le code pour vous comme dreamweaver mais il est plus intéressant d'apprendre par le code.
Firebug: http://getfirebug.com/ un outil pour débuguer votre code (intégrer maintenant à la plupart des navigateurs)
Le javascript (JS) Le JavaScript est un langage, un langage de programmation orienté objet. Il sert notamment à rendre plus interactives les pages web. Grâce à sa force on peut ouvrir des pop up, faire défiler du texte, rendre un menu dynamique ou incorporer un diaporama. Un bon tutoriel pour se faire une idée du Javascript ici
Le référencement est un art.
On peut bien sur payer pour cela mais dans le cas contraire on priviligiera certaines notions comme :
. un site correctement codé (optimisé)
. favoriser des éléments de sections pour structurer son site
. installer des balises meta de description
. avoir des liens extérieurs qui pointent vers son site
. utiliser des mots clés
. coder son site en prenant en compte le https
. légender ses images de manière cohérente
...
L'indexation du contenu peut être longue à apparaître dans Google. Il ne faut pas se décourager :-)
On peut aussi utiliser des outils pour visulaiser la fréquentation de son site Internet comme la Google Search console
Il désigne précisément un logiciel qui gère la création et la publication de documents. Un des plus connu est Wordpress.
Pour utiliser un cms il faut au préalable installer une base de données sur votre ftp si cela n'est pas déjà fait.
Documentation à ce sujet (installer manuellement une db pour wordpress chez ovh)
Conception HTML / Web / Javascript
W3schools (HTML) https://www.w3schools.com/html/
W3schools (CSS) https://www.w3schools.com/css/
Tuto Fondation Mozilla https://developer.mozilla.org/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML
The basics of HTML https://www.youtube.com/watch?v=CkzbI1Tv_rQ
Html et Css : https://jenseign.com/
Javascript : https://adrienjoly.gitbooks.io/cours-javascript-eemi-2016-2017/content/
Exemples de code p5js, javascript, css, html : https://www.isitcode.net/