SlideShare une entreprise Scribd logo
1  sur  9
ristal
Olfa Harrabi Khlif-Essect de Tunis Développement sites web 1 /23
Une introduction à HTML5
Dr. Olfa Harrabi Khlif
Ecole Supérieure des Sciences Economiques et Commerciales de Tunis
ristal
Olfa Harrabi Khlif-Essect de Tunis Développement sites web 2 /23
Plan
Introduction
Le langage HTML5
Langage CSS
1
2
3
ristal
Olfa Harrabi Khlif-Essect de Tunis Développement sites web 3 /23
Les prémisses duWeb
Le réseau Internet et le Web comme couche applicative sur le réseau
Dates clés du développement du Web
90–92 : le protocole http pour échanger des données sur Internet, le
langage html 1.0 pour écrire des documents pour le Web
92–97 : définition des url (les adresses de la forme hNp ://), naissance
du w3c (organisme international de standardification), apparition des
premiers navigateurs mosaic puis ie, évolution du langage html qui
intègre images, tableaux, applets.
Les origines – fin des années 80
le réseau Arpanet et les protocoles réseaux dont TCP/IP
des réflexions sur les documents électroniques
ristal
Olfa Harrabi Khlif-Essect de Tunis Développement sites web 4 /23
La maturité du Web
Le Web devient une gigantesque base de documents structurés
Dates clés
96 : première définition des feuilles de style avec css,
98 : définition du langage xml 1.0, pour l’échange de données et de
documents structurés,
98–05 : langages de schémas dtd, Xml Schema, Relax NG, langages
spécialisés xhtml, svg, mathml, ..., langages de manipulation xpath,
xlink, xpointer, xsl, xslt, xquery.
Séparer contenu et présentation
La nécessité de traiter et échanger les données du Web font apparaître le
besoin de séparer les données de la présentation dans le navigateur.
ristal
Olfa Harrabi Khlif-Essect de Tunis Développement sites web 5 /23
La situation actuelle du Web
Le Web est désormais
Un ensemble de ressources de très très grande taille (Web et
Web caché),
Outillé pour le traitement et la représentation de données et
documents, outillé pour l’adressage, la publication et l’échange de
données,
Outillé pour la recherche par l’humain de ressources,
permettant l’interaction des utilisateurs dans des réseaux.
Buzzword Web 2.0
Généralisation du modèle à tous les systèmes d’information, clients
légers (le navigateur), syndication et push, xhtml 5.0 et html 5, adaptation
aux nouveaux supports (smartphones), apparition des réseaux sociaux.
ristal
Olfa Harrabi Khlif-Essect de Tunis Développement sites web 6 /23
Le devenir du Web
Évolutions futures
Difficiles à prévoir car dépendantes des réactions des communautés
aux évolutions technologiques ou applicatives. On peut penser à
De nouvelles interfaces ? La parole ?
De nouveaux modèles de communautés ?
Un Web plus intelligent ?
WEB sémantique
Le développement est en cours avec l’apparition du Google Knowledge
Graph (décembre 2012). L’objectif est d’outiller le Web pour la recherche et
l’échange entre machines en donnant une sémantique aux données.
ristal
Olfa Harrabi Khlif-Essect de Tunis Développement sites web 7 /23
Le langage HTML 5 et le langage CSS
Pour structurer et meNre en forme les documents pour une utilisation sur le
Web avec les objectifs suivants :
Être lisible par un visiteur humain avec un handicap ou non, en tout cas
avec ses préférences
Être lisible par un visiteur robot : indexeur d’un moteur de recherche,
extracteur du Web sémantique, agent d’un réseau social, ...
Adapter l’aKichage au support de lecture : ordinateur, smartphone,
tableNe, imprimante, ...
ristal
Olfa Harrabi Khlif-Essect de Tunis Développement sites web 8 /23
Les documents et lenavigateur
HTML et CSS : langages de description
De la famille WYSIWYM : “what you see is what you mean”. C’est-à-dire
On décrit dans un fichier html le contenu, la structure etles
méta-données,
On décrit dans un fichier css la présentation souhaitée.
Le navigateur
Est un logiciel (complexe). Il prend
En entrée : le fichier html. Il va chercher les ressources
complémentaires nécessaires : le fichier css, les images, ...
En résultat : une page mise en forme respectant les descriptions
fournies en entrée.
ristal
Olfa Harrabi Khlif-Essect de Tunis Développement sites web 9 /23

Contenu connexe

Similaire à intro final html.docx

Semantic Information Systems
Semantic Information SystemsSemantic Information Systems
Semantic Information SystemsSerge Garlatti
 
Semantic Information Systems
Semantic Information SystemsSemantic Information Systems
Semantic Information SystemsSerge Garlatti
 
Semantic Information Systems
Semantic Information SystemsSemantic Information Systems
Semantic Information SystemsSerge Garlatti
 
Les nouvelles normes de catalogage en bibliothèque : l'alimentation future de...
Les nouvelles normes de catalogage en bibliothèque : l'alimentation future de...Les nouvelles normes de catalogage en bibliothèque : l'alimentation future de...
Les nouvelles normes de catalogage en bibliothèque : l'alimentation future de...Anne-Gaëlle Gaudion
 
Web 2.0 : Quelles applications ?
Web 2.0 : Quelles applications ?Web 2.0 : Quelles applications ?
Web 2.0 : Quelles applications ?Jean-François Ruiz
 
Gestion_d_un_projet_Web_e_commerce_Piece (1).pdf
Gestion_d_un_projet_Web_e_commerce_Piece (1).pdfGestion_d_un_projet_Web_e_commerce_Piece (1).pdf
Gestion_d_un_projet_Web_e_commerce_Piece (1).pdfSofianeHassine2
 
Gestion_d_un_projet_Web_e_commerce_Piece.pdf
Gestion_d_un_projet_Web_e_commerce_Piece.pdfGestion_d_un_projet_Web_e_commerce_Piece.pdf
Gestion_d_un_projet_Web_e_commerce_Piece.pdfSofianeHassine2
 
Les professionnels de l'information face aux défis du Web de données
Les professionnels de l'information face aux défis du Web de donnéesLes professionnels de l'information face aux défis du Web de données
Les professionnels de l'information face aux défis du Web de donnéesGautier Poupeau
 
Le lexique du web
Le lexique du webLe lexique du web
Le lexique du webCEFAC
 
Le Web comme plateforme TIC pour l'entreprise
Le Web comme plateforme TIC pour l'entrepriseLe Web comme plateforme TIC pour l'entreprise
Le Web comme plateforme TIC pour l'entreprisemastertic
 
Le Web comme plateforme TIC pour l'entreprise
Le Web comme plateforme TIC pour l'entrepriseLe Web comme plateforme TIC pour l'entreprise
Le Web comme plateforme TIC pour l'entreprisemastertic
 
Le Web comme plateforme TIC pour l'entreprise
Le Web comme plateforme TIC pour l'entrepriseLe Web comme plateforme TIC pour l'entreprise
Le Web comme plateforme TIC pour l'entreprisemastertic
 
États des lieux du Web sémantique
États des lieux du Web sémantiqueÉtats des lieux du Web sémantique
États des lieux du Web sémantiqueIvan Herman
 
ACube : De la solution à l'industrialisation
ACube : De la solution à l'industrialisationACube : De la solution à l'industrialisation
ACube : De la solution à l'industrialisationpeguet
 
Du Big Data vers le SMART Data : Scénario d'un processus
Du Big Data vers le SMART Data : Scénario d'un processusDu Big Data vers le SMART Data : Scénario d'un processus
Du Big Data vers le SMART Data : Scénario d'un processusCHAKER ALLAOUI
 
Wygday Session PléNièRe (2)
Wygday Session PléNièRe (2)Wygday Session PléNièRe (2)
Wygday Session PléNièRe (2)Gregory Renard
 

Similaire à intro final html.docx (20)

Semantic Information Systems
Semantic Information SystemsSemantic Information Systems
Semantic Information Systems
 
Semantic Information Systems
Semantic Information SystemsSemantic Information Systems
Semantic Information Systems
 
Semantic Information Systems
Semantic Information SystemsSemantic Information Systems
Semantic Information Systems
 
Les nouvelles normes de catalogage en bibliothèque : l'alimentation future de...
Les nouvelles normes de catalogage en bibliothèque : l'alimentation future de...Les nouvelles normes de catalogage en bibliothèque : l'alimentation future de...
Les nouvelles normes de catalogage en bibliothèque : l'alimentation future de...
 
Web 2.0 : Quelles applications ?
Web 2.0 : Quelles applications ?Web 2.0 : Quelles applications ?
Web 2.0 : Quelles applications ?
 
Gestion_d_un_projet_Web_e_commerce_Piece (1).pdf
Gestion_d_un_projet_Web_e_commerce_Piece (1).pdfGestion_d_un_projet_Web_e_commerce_Piece (1).pdf
Gestion_d_un_projet_Web_e_commerce_Piece (1).pdf
 
Gestion_d_un_projet_Web_e_commerce_Piece.pdf
Gestion_d_un_projet_Web_e_commerce_Piece.pdfGestion_d_un_projet_Web_e_commerce_Piece.pdf
Gestion_d_un_projet_Web_e_commerce_Piece.pdf
 
Les professionnels de l'information face aux défis du Web de données
Les professionnels de l'information face aux défis du Web de donnéesLes professionnels de l'information face aux défis du Web de données
Les professionnels de l'information face aux défis du Web de données
 
Lexique web 2014
Lexique web 2014Lexique web 2014
Lexique web 2014
 
Le lexique du web
Le lexique du webLe lexique du web
Le lexique du web
 
Le Web comme plateforme TIC pour l'entreprise
Le Web comme plateforme TIC pour l'entrepriseLe Web comme plateforme TIC pour l'entreprise
Le Web comme plateforme TIC pour l'entreprise
 
Le Web comme plateforme TIC pour l'entreprise
Le Web comme plateforme TIC pour l'entrepriseLe Web comme plateforme TIC pour l'entreprise
Le Web comme plateforme TIC pour l'entreprise
 
Le Web comme plateforme TIC pour l'entreprise
Le Web comme plateforme TIC pour l'entrepriseLe Web comme plateforme TIC pour l'entreprise
Le Web comme plateforme TIC pour l'entreprise
 
États des lieux du Web sémantique
États des lieux du Web sémantiqueÉtats des lieux du Web sémantique
États des lieux du Web sémantique
 
ACube : De la solution à l'industrialisation
ACube : De la solution à l'industrialisationACube : De la solution à l'industrialisation
ACube : De la solution à l'industrialisation
 
Do you speak technique ?
Do you speak technique ?Do you speak technique ?
Do you speak technique ?
 
Exakis Day
Exakis DayExakis Day
Exakis Day
 
Cv dridi-lotfi
Cv dridi-lotfiCv dridi-lotfi
Cv dridi-lotfi
 
Du Big Data vers le SMART Data : Scénario d'un processus
Du Big Data vers le SMART Data : Scénario d'un processusDu Big Data vers le SMART Data : Scénario d'un processus
Du Big Data vers le SMART Data : Scénario d'un processus
 
Wygday Session PléNièRe (2)
Wygday Session PléNièRe (2)Wygday Session PléNièRe (2)
Wygday Session PléNièRe (2)
 

Plus de olfaharrabi2

AI.Harshini,Norah,Bhavika-2 (1).pdf presentation
AI.Harshini,Norah,Bhavika-2 (1).pdf presentationAI.Harshini,Norah,Bhavika-2 (1).pdf presentation
AI.Harshini,Norah,Bhavika-2 (1).pdf presentationolfaharrabi2
 
Ethics de lintelligence artificielle dans le domaine de business
Ethics de lintelligence artificielle dans le domaine de businessEthics de lintelligence artificielle dans le domaine de business
Ethics de lintelligence artificielle dans le domaine de businessolfaharrabi2
 
artificial intelligence and applications
artificial intelligence and applicationsartificial intelligence and applications
artificial intelligence and applicationsolfaharrabi2
 
Chap 1 Initiation.pptx
Chap 1 Initiation.pptxChap 1 Initiation.pptx
Chap 1 Initiation.pptxolfaharrabi2
 
Manipulation des fichiers en C.pptx
Manipulation des fichiers en C.pptxManipulation des fichiers en C.pptx
Manipulation des fichiers en C.pptxolfaharrabi2
 
Présentation1.pptx
Présentation1.pptxPrésentation1.pptx
Présentation1.pptxolfaharrabi2
 
Introduction to ORoperationresearch UTC.pdf
Introduction to ORoperationresearch UTC.pdfIntroduction to ORoperationresearch UTC.pdf
Introduction to ORoperationresearch UTC.pdfolfaharrabi2
 
Cours AA S2 Ch4+5.ppt
Cours AA S2 Ch4+5.pptCours AA S2 Ch4+5.ppt
Cours AA S2 Ch4+5.pptolfaharrabi2
 
chapitre 1 programmation linéaire.pdf
chapitre 1 programmation linéaire.pdfchapitre 1 programmation linéaire.pdf
chapitre 1 programmation linéaire.pdfolfaharrabi2
 
Planning-externes-MA-Informatique-session_2019.pdf
Planning-externes-MA-Informatique-session_2019.pdfPlanning-externes-MA-Informatique-session_2019.pdf
Planning-externes-MA-Informatique-session_2019.pdfolfaharrabi2
 
chapitre-7-listviews.pdf
chapitre-7-listviews.pdfchapitre-7-listviews.pdf
chapitre-7-listviews.pdfolfaharrabi2
 
chapitre-2-les-activites.pdf
chapitre-2-les-activites.pdfchapitre-2-les-activites.pdf
chapitre-2-les-activites.pdfolfaharrabi2
 
chapitre-1-introduction-plateforme-android (2).pdf
chapitre-1-introduction-plateforme-android (2).pdfchapitre-1-introduction-plateforme-android (2).pdf
chapitre-1-introduction-plateforme-android (2).pdfolfaharrabi2
 
cours-syst (1).pdf
cours-syst (1).pdfcours-syst (1).pdf
cours-syst (1).pdfolfaharrabi2
 

Plus de olfaharrabi2 (17)

AI.Harshini,Norah,Bhavika-2 (1).pdf presentation
AI.Harshini,Norah,Bhavika-2 (1).pdf presentationAI.Harshini,Norah,Bhavika-2 (1).pdf presentation
AI.Harshini,Norah,Bhavika-2 (1).pdf presentation
 
Ethics de lintelligence artificielle dans le domaine de business
Ethics de lintelligence artificielle dans le domaine de businessEthics de lintelligence artificielle dans le domaine de business
Ethics de lintelligence artificielle dans le domaine de business
 
artificial intelligence and applications
artificial intelligence and applicationsartificial intelligence and applications
artificial intelligence and applications
 
Chap 1 Initiation.pptx
Chap 1 Initiation.pptxChap 1 Initiation.pptx
Chap 1 Initiation.pptx
 
sa a dos.pdf
sa a dos.pdfsa a dos.pdf
sa a dos.pdf
 
Manipulation des fichiers en C.pptx
Manipulation des fichiers en C.pptxManipulation des fichiers en C.pptx
Manipulation des fichiers en C.pptx
 
chapitre 1 PI.pdf
chapitre 1 PI.pdfchapitre 1 PI.pdf
chapitre 1 PI.pdf
 
Présentation1.pptx
Présentation1.pptxPrésentation1.pptx
Présentation1.pptx
 
Introduction to ORoperationresearch UTC.pdf
Introduction to ORoperationresearch UTC.pdfIntroduction to ORoperationresearch UTC.pdf
Introduction to ORoperationresearch UTC.pdf
 
Cours AA S2 Ch4+5.ppt
Cours AA S2 Ch4+5.pptCours AA S2 Ch4+5.ppt
Cours AA S2 Ch4+5.ppt
 
chapitre 1 programmation linéaire.pdf
chapitre 1 programmation linéaire.pdfchapitre 1 programmation linéaire.pdf
chapitre 1 programmation linéaire.pdf
 
Planning-externes-MA-Informatique-session_2019.pdf
Planning-externes-MA-Informatique-session_2019.pdfPlanning-externes-MA-Informatique-session_2019.pdf
Planning-externes-MA-Informatique-session_2019.pdf
 
chapitre-7-listviews.pdf
chapitre-7-listviews.pdfchapitre-7-listviews.pdf
chapitre-7-listviews.pdf
 
chapitre-2-les-activites.pdf
chapitre-2-les-activites.pdfchapitre-2-les-activites.pdf
chapitre-2-les-activites.pdf
 
chapitre-1-introduction-plateforme-android (2).pdf
chapitre-1-introduction-plateforme-android (2).pdfchapitre-1-introduction-plateforme-android (2).pdf
chapitre-1-introduction-plateforme-android (2).pdf
 
cours-syst (1).pdf
cours-syst (1).pdfcours-syst (1).pdf
cours-syst (1).pdf
 
17. Le DOS.pdf
17. Le DOS.pdf17. Le DOS.pdf
17. Le DOS.pdf
 

Dernier

SciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdfSciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdfSKennel
 
Principe de fonctionnement d'un moteur 4 temps
Principe de fonctionnement d'un moteur 4 tempsPrincipe de fonctionnement d'un moteur 4 temps
Principe de fonctionnement d'un moteur 4 tempsRajiAbdelghani
 
Formation M2i - Comprendre les neurosciences pour développer son leadership
Formation M2i - Comprendre les neurosciences pour développer son leadershipFormation M2i - Comprendre les neurosciences pour développer son leadership
Formation M2i - Comprendre les neurosciences pour développer son leadershipM2i Formation
 
Saint Georges, martyr, et la lègend du dragon.pptx
Saint Georges, martyr, et la lègend du dragon.pptxSaint Georges, martyr, et la lègend du dragon.pptx
Saint Georges, martyr, et la lègend du dragon.pptxMartin M Flynn
 
Cours SE Gestion des périphériques - IG IPSET
Cours SE Gestion des périphériques - IG IPSETCours SE Gestion des périphériques - IG IPSET
Cours SE Gestion des périphériques - IG IPSETMedBechir
 
Zotero avancé - support de formation doctorants SHS 2024
Zotero avancé - support de formation doctorants SHS 2024Zotero avancé - support de formation doctorants SHS 2024
Zotero avancé - support de formation doctorants SHS 2024Alain Marois
 
systeme expert_systeme expert_systeme expert
systeme expert_systeme expert_systeme expertsysteme expert_systeme expert_systeme expert
systeme expert_systeme expert_systeme expertChristianMbip
 
Cours SE Le système Linux : La ligne de commande bash - IG IPSET
Cours SE Le système Linux : La ligne de commande bash - IG IPSETCours SE Le système Linux : La ligne de commande bash - IG IPSET
Cours SE Le système Linux : La ligne de commande bash - IG IPSETMedBechir
 
Le Lean sur une ligne de production : Formation et mise en application directe
Le Lean sur une ligne de production : Formation et mise en application directeLe Lean sur une ligne de production : Formation et mise en application directe
Le Lean sur une ligne de production : Formation et mise en application directeXL Groupe
 
Présentation_ Didactique 1_SVT (S4) complet.pptx
Présentation_ Didactique 1_SVT (S4) complet.pptxPrésentation_ Didactique 1_SVT (S4) complet.pptx
Présentation_ Didactique 1_SVT (S4) complet.pptxrababouerdighi
 
SciencesPo_Aix_InnovationPédagogique_Bilan.pdf
SciencesPo_Aix_InnovationPédagogique_Bilan.pdfSciencesPo_Aix_InnovationPédagogique_Bilan.pdf
SciencesPo_Aix_InnovationPédagogique_Bilan.pdfSKennel
 
A3iFormations, organisme de formations certifié qualiopi.
A3iFormations, organisme de formations certifié qualiopi.A3iFormations, organisme de formations certifié qualiopi.
A3iFormations, organisme de formations certifié qualiopi.Franck Apolis
 
BONNES PRATIQUES DE FABRICATION RESUME SIMPLIFIE
BONNES PRATIQUES DE FABRICATION RESUME SIMPLIFIEBONNES PRATIQUES DE FABRICATION RESUME SIMPLIFIE
BONNES PRATIQUES DE FABRICATION RESUME SIMPLIFIEgharebikram98
 
le present des verbes reguliers -er.pptx
le present des verbes reguliers -er.pptxle present des verbes reguliers -er.pptx
le present des verbes reguliers -er.pptxmmatar2
 
SciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdf
SciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdfSciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdf
SciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdfSKennel
 
SciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdfSciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdfSKennel
 
Evaluation du systeme d'Education. Marocpptx
Evaluation du systeme d'Education. MarocpptxEvaluation du systeme d'Education. Marocpptx
Evaluation du systeme d'Education. MarocpptxAsmaa105193
 
SciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdfSciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdfSKennel
 
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...Faga1939
 

Dernier (20)

SciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdfSciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdf
 
Principe de fonctionnement d'un moteur 4 temps
Principe de fonctionnement d'un moteur 4 tempsPrincipe de fonctionnement d'un moteur 4 temps
Principe de fonctionnement d'un moteur 4 temps
 
Formation M2i - Comprendre les neurosciences pour développer son leadership
Formation M2i - Comprendre les neurosciences pour développer son leadershipFormation M2i - Comprendre les neurosciences pour développer son leadership
Formation M2i - Comprendre les neurosciences pour développer son leadership
 
Saint Georges, martyr, et la lègend du dragon.pptx
Saint Georges, martyr, et la lègend du dragon.pptxSaint Georges, martyr, et la lègend du dragon.pptx
Saint Georges, martyr, et la lègend du dragon.pptx
 
Cours SE Gestion des périphériques - IG IPSET
Cours SE Gestion des périphériques - IG IPSETCours SE Gestion des périphériques - IG IPSET
Cours SE Gestion des périphériques - IG IPSET
 
Zotero avancé - support de formation doctorants SHS 2024
Zotero avancé - support de formation doctorants SHS 2024Zotero avancé - support de formation doctorants SHS 2024
Zotero avancé - support de formation doctorants SHS 2024
 
systeme expert_systeme expert_systeme expert
systeme expert_systeme expert_systeme expertsysteme expert_systeme expert_systeme expert
systeme expert_systeme expert_systeme expert
 
Cours SE Le système Linux : La ligne de commande bash - IG IPSET
Cours SE Le système Linux : La ligne de commande bash - IG IPSETCours SE Le système Linux : La ligne de commande bash - IG IPSET
Cours SE Le système Linux : La ligne de commande bash - IG IPSET
 
Le Lean sur une ligne de production : Formation et mise en application directe
Le Lean sur une ligne de production : Formation et mise en application directeLe Lean sur une ligne de production : Formation et mise en application directe
Le Lean sur une ligne de production : Formation et mise en application directe
 
Présentation_ Didactique 1_SVT (S4) complet.pptx
Présentation_ Didactique 1_SVT (S4) complet.pptxPrésentation_ Didactique 1_SVT (S4) complet.pptx
Présentation_ Didactique 1_SVT (S4) complet.pptx
 
SciencesPo_Aix_InnovationPédagogique_Bilan.pdf
SciencesPo_Aix_InnovationPédagogique_Bilan.pdfSciencesPo_Aix_InnovationPédagogique_Bilan.pdf
SciencesPo_Aix_InnovationPédagogique_Bilan.pdf
 
A3iFormations, organisme de formations certifié qualiopi.
A3iFormations, organisme de formations certifié qualiopi.A3iFormations, organisme de formations certifié qualiopi.
A3iFormations, organisme de formations certifié qualiopi.
 
DO PALÁCIO À ASSEMBLEIA .
DO PALÁCIO À ASSEMBLEIA                 .DO PALÁCIO À ASSEMBLEIA                 .
DO PALÁCIO À ASSEMBLEIA .
 
BONNES PRATIQUES DE FABRICATION RESUME SIMPLIFIE
BONNES PRATIQUES DE FABRICATION RESUME SIMPLIFIEBONNES PRATIQUES DE FABRICATION RESUME SIMPLIFIE
BONNES PRATIQUES DE FABRICATION RESUME SIMPLIFIE
 
le present des verbes reguliers -er.pptx
le present des verbes reguliers -er.pptxle present des verbes reguliers -er.pptx
le present des verbes reguliers -er.pptx
 
SciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdf
SciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdfSciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdf
SciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdf
 
SciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdfSciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdf
 
Evaluation du systeme d'Education. Marocpptx
Evaluation du systeme d'Education. MarocpptxEvaluation du systeme d'Education. Marocpptx
Evaluation du systeme d'Education. Marocpptx
 
SciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdfSciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdf
 
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...
 

intro final html.docx

  • 1. ristal Olfa Harrabi Khlif-Essect de Tunis Développement sites web 1 /23 Une introduction à HTML5 Dr. Olfa Harrabi Khlif Ecole Supérieure des Sciences Economiques et Commerciales de Tunis
  • 2. ristal Olfa Harrabi Khlif-Essect de Tunis Développement sites web 2 /23 Plan Introduction Le langage HTML5 Langage CSS 1 2 3
  • 3. ristal Olfa Harrabi Khlif-Essect de Tunis Développement sites web 3 /23 Les prémisses duWeb Le réseau Internet et le Web comme couche applicative sur le réseau Dates clés du développement du Web 90–92 : le protocole http pour échanger des données sur Internet, le langage html 1.0 pour écrire des documents pour le Web 92–97 : définition des url (les adresses de la forme hNp ://), naissance du w3c (organisme international de standardification), apparition des premiers navigateurs mosaic puis ie, évolution du langage html qui intègre images, tableaux, applets. Les origines – fin des années 80 le réseau Arpanet et les protocoles réseaux dont TCP/IP des réflexions sur les documents électroniques
  • 4. ristal Olfa Harrabi Khlif-Essect de Tunis Développement sites web 4 /23 La maturité du Web Le Web devient une gigantesque base de documents structurés Dates clés 96 : première définition des feuilles de style avec css, 98 : définition du langage xml 1.0, pour l’échange de données et de documents structurés, 98–05 : langages de schémas dtd, Xml Schema, Relax NG, langages spécialisés xhtml, svg, mathml, ..., langages de manipulation xpath, xlink, xpointer, xsl, xslt, xquery. Séparer contenu et présentation La nécessité de traiter et échanger les données du Web font apparaître le besoin de séparer les données de la présentation dans le navigateur.
  • 5. ristal Olfa Harrabi Khlif-Essect de Tunis Développement sites web 5 /23 La situation actuelle du Web Le Web est désormais Un ensemble de ressources de très très grande taille (Web et Web caché), Outillé pour le traitement et la représentation de données et documents, outillé pour l’adressage, la publication et l’échange de données, Outillé pour la recherche par l’humain de ressources, permettant l’interaction des utilisateurs dans des réseaux. Buzzword Web 2.0 Généralisation du modèle à tous les systèmes d’information, clients légers (le navigateur), syndication et push, xhtml 5.0 et html 5, adaptation aux nouveaux supports (smartphones), apparition des réseaux sociaux.
  • 6. ristal Olfa Harrabi Khlif-Essect de Tunis Développement sites web 6 /23 Le devenir du Web Évolutions futures Difficiles à prévoir car dépendantes des réactions des communautés aux évolutions technologiques ou applicatives. On peut penser à De nouvelles interfaces ? La parole ? De nouveaux modèles de communautés ? Un Web plus intelligent ? WEB sémantique Le développement est en cours avec l’apparition du Google Knowledge Graph (décembre 2012). L’objectif est d’outiller le Web pour la recherche et l’échange entre machines en donnant une sémantique aux données.
  • 7. ristal Olfa Harrabi Khlif-Essect de Tunis Développement sites web 7 /23 Le langage HTML 5 et le langage CSS Pour structurer et meNre en forme les documents pour une utilisation sur le Web avec les objectifs suivants : Être lisible par un visiteur humain avec un handicap ou non, en tout cas avec ses préférences Être lisible par un visiteur robot : indexeur d’un moteur de recherche, extracteur du Web sémantique, agent d’un réseau social, ... Adapter l’aKichage au support de lecture : ordinateur, smartphone, tableNe, imprimante, ...
  • 8. ristal Olfa Harrabi Khlif-Essect de Tunis Développement sites web 8 /23 Les documents et lenavigateur HTML et CSS : langages de description De la famille WYSIWYM : “what you see is what you mean”. C’est-à-dire On décrit dans un fichier html le contenu, la structure etles méta-données, On décrit dans un fichier css la présentation souhaitée. Le navigateur Est un logiciel (complexe). Il prend En entrée : le fichier html. Il va chercher les ressources complémentaires nécessaires : le fichier css, les images, ... En résultat : une page mise en forme respectant les descriptions fournies en entrée.
  • 9. ristal Olfa Harrabi Khlif-Essect de Tunis Développement sites web 9 /23