Web
Programmation
Chapitre
Introduction
:
1
tatique
S
générale
Anouar
bouazza.anouar@yahoo.fr
2018 2019
-
Bouazza
1
1. Les langages du web
Pour créer un site web ,
statique on utilise au moins deux
langages : CSS.
le
et
HTML
le
Il en existe d'autres mais ces deux suffisent.
Il est important de bien les distinguer et de leur
comprendre
utilité respective.
1.1 Le HTML
1.2 Le CSS
1.3 D'autres langages
1.4 Les outils du web
2
1.1 Le HTML
● HTML signifie HyperText Markup Language.
● C'est un langage sémantique.
● Il sert à définir chaque élément de la page, indiquer leur
sens, leur importance et leur hierarchie : titre,
paragraphe, menu, lien, image, etc.
● La sémantique est importante pour permettre aux
navigateurs et aux moteurs de recherche de
"comprendre" la page.
3
1.2 Le CSS
● CSS signifie : Cascade Style Sheet
● C'est un langage de présentation.
● Il sert à appliquer un style graphique aux éléments
définis par le HTML : police, couleur, taille de caractère,
espacement, marges, etc.
● La présentation permet de rendre le code HTML lisible
par un être humain.
● On pourrait en théorie se passer du CSS.
4
Une page HTML issue de Wikipedia, sans CSS.
5
La même page HTML, cette fois mise en forme grâce au CSS.
6
Toujours la même page, cette fois avec un code CSS adapté aux petits écrans.
7
1.3 D'autres langages
● Javascript permet de créer des animations ou gérer
l'interaction entre l'utilisateur et la page.
● PHP, ASP ou Ruby sont des langages de
programmation permettent de générer dynamiquement
des pages HTML.
● MySQL ou PostgreSQL sont des langages qui
permettent de dialoguer avec une base de données.
En ce qui nous concerne, nous
web
pour dynamiques.
web
pages
des
concevoir
ultérieurement,
langages,
ces
d'utiliser
l'occasion
aurons
nous
statiques,
pages
des
développerons
8
1.4 Les outils du web
Il existe de nombreux outils, certains très onéreux, pour créer un site web. En
réalité, de simples éditeurs de texte comme le Bloc-notes de Windows ou
TextEdit sur Mac suffisent. Pour s'en convaincre :
1. Ouvrir un éditeur de texte.
2. Inscrire un texte quelconque, par exemple "Bonjour".
3. Enregistrer le fichier avec une extension ".html", par
exemple "test.html".
4. Ouvrir le fichier dans un navigateur web.
5. Nous avons créé notre première page web !
9
Un 2ème :
exemple
10
Éléments d’une page web
Contenu --> HTML
Structure --> HTML
Style --> CSS
Comportement --> JavaScript
11
HTML : le contenu
whichElement?
Trying to answer that age old
question:
Should that be a div, a span,
or something else?
!
Home
Contribute
About
!
One of the main challenges we
see in building semantic
content is picking what tag to
use when.
12
HTML : le contenu
<h1>whichElement?</h1>
<h2>Trying to answer that age
old question:</h2>
<h2>Should that be a div, a
span, or something else?</h2>
!
<ul>
<li>Home</li>
<li>Contribute</li>
<li>About</li> </ul>
<p>One of the main challenges we
see in building semantic content
is picking what tag to use when.
This site seeks to help with
that. Now, before we get all
judgy and preachy let me get a
few tenants out there:</p>
13
HTML, débuts..
les
‣
‣ Ensemble d’éléments et d’attributs permettant de définir des
documents hypertextes
‣ structure, liens, images, tableaux, formulaires…
‣ Quatre versions initiales
‣ de TML1.0 à
H HTML4.01
‣ Propriétés initiales :
‣ Mélange structure physique et logique
‣ Ex. : un élément mis en gras
‣ Syntaxe peu stricte
imple HTML
en
coder
à
s
‣
Une
.
web
adresses
les
et
(HTTP)
Protocol
Transfer
Hypertext
le
avec
Web,
Wide
World
du
base
la
à
inventions
trois
des
14
HTML Language
Markup
HyperText
:
CSS : le style
h1{
color: red;
}
h2{
color: blue;
font-style: italic;
}
!
p{
color: white;
background-color: black;
}
15
CSS
Séparation de la structure logique et de la présentation des
documents HTML
‣ Structure logique --> HTML : ensemble d’éléments de contenu
‣ Présentation suivant une feuille de style (style sheet) qui traite
les éléments de contenu en éléments de présentation
CSS Cascading
: Style Sheets
‣ Feuilles de styles associées à HTML
‣ En cascade
‣ on peut utiliser des feuilles de styles multiples
‣ il y a un degré d’importance pour chaque feuille de style
16
JavaScript
<html>
<head>
<script type="text/javascript">
function createAlertMessage(){
alert("Stop what you're doing!");
}
</script>
!
</head>
<body>
<button onclick="createAlertMessage()">
Alert!
</button>
!
!
</body>
</html>
17
XHTML a
les
: nnées 2000..
‣ XHTML 1.0 (1999)
‣ reformulation XML de HTML4
‣ définit les DTD pour exprimer des documents HTML
‣ sémantique des balises définie dans HTML4
‣ XHTML 1.1
‣ Modularisation : faciliter le mixage de fragments XML dans XHTML
‣ XHTML 2
‣ Modulaire
‣ Nouvelles fonctionnalités
18
XHTML Language
Markup
HyperText
eXtensible
:
HTML 5 : les années 2010..
A la fois une évolution de HTML 4 et un ensemble de
technologies développées par le WHATWG et le W3C.
‣ Nouveaux éléments sémantiques
‣ <article>, <section>, <aside>, <header>, <footer>…
‣ Nouveaux éléments multimédia
‣ <canvas>, <audio>, <video>
‣ Nouvelles API JavaScript :
‣ offline-data, web-storage, …
‣ Souvent associé à CSS 3
‣ HTML5 vs. XHTML :
https://www.webkit.org/blog/68/understanding-html-xml-and-xhtml/
19
Un standard
Il existe deux organismes de standardisation principaux :
‣ W3C (World Wide Web Consortium)
‣ Consortium de 350 entreprises, ONG, universités et gouvernements
‣ Prix d’entrée
‣ Basé sur le consensus (et donc lent)
‣ WHATWG (Web Hypertext Application Technology Working
Group)
‣ Plus petit, sans prix d’entrée
‣ Processus de décision sans consensus
‣ Surtout concentré sur HTML5
20
21

Chapitre 1 - Introduction générale.pdf

  • 1.
  • 2.
    1. Les langagesdu web Pour créer un site web , statique on utilise au moins deux langages : CSS. le et HTML le Il en existe d'autres mais ces deux suffisent. Il est important de bien les distinguer et de leur comprendre utilité respective. 1.1 Le HTML 1.2 Le CSS 1.3 D'autres langages 1.4 Les outils du web 2
  • 3.
    1.1 Le HTML ●HTML signifie HyperText Markup Language. ● C'est un langage sémantique. ● Il sert à définir chaque élément de la page, indiquer leur sens, leur importance et leur hierarchie : titre, paragraphe, menu, lien, image, etc. ● La sémantique est importante pour permettre aux navigateurs et aux moteurs de recherche de "comprendre" la page. 3
  • 4.
    1.2 Le CSS ●CSS signifie : Cascade Style Sheet ● C'est un langage de présentation. ● Il sert à appliquer un style graphique aux éléments définis par le HTML : police, couleur, taille de caractère, espacement, marges, etc. ● La présentation permet de rendre le code HTML lisible par un être humain. ● On pourrait en théorie se passer du CSS. 4
  • 5.
    Une page HTMLissue de Wikipedia, sans CSS. 5
  • 6.
    La même pageHTML, cette fois mise en forme grâce au CSS. 6
  • 7.
    Toujours la mêmepage, cette fois avec un code CSS adapté aux petits écrans. 7
  • 8.
    1.3 D'autres langages ●Javascript permet de créer des animations ou gérer l'interaction entre l'utilisateur et la page. ● PHP, ASP ou Ruby sont des langages de programmation permettent de générer dynamiquement des pages HTML. ● MySQL ou PostgreSQL sont des langages qui permettent de dialoguer avec une base de données. En ce qui nous concerne, nous web pour dynamiques. web pages des concevoir ultérieurement, langages, ces d'utiliser l'occasion aurons nous statiques, pages des développerons 8
  • 9.
    1.4 Les outilsdu web Il existe de nombreux outils, certains très onéreux, pour créer un site web. En réalité, de simples éditeurs de texte comme le Bloc-notes de Windows ou TextEdit sur Mac suffisent. Pour s'en convaincre : 1. Ouvrir un éditeur de texte. 2. Inscrire un texte quelconque, par exemple "Bonjour". 3. Enregistrer le fichier avec une extension ".html", par exemple "test.html". 4. Ouvrir le fichier dans un navigateur web. 5. Nous avons créé notre première page web ! 9
  • 10.
  • 11.
    Éléments d’une pageweb Contenu --> HTML Structure --> HTML Style --> CSS Comportement --> JavaScript 11
  • 12.
    HTML : lecontenu whichElement? Trying to answer that age old question: Should that be a div, a span, or something else? ! Home Contribute About ! One of the main challenges we see in building semantic content is picking what tag to use when. 12
  • 13.
    HTML : lecontenu <h1>whichElement?</h1> <h2>Trying to answer that age old question:</h2> <h2>Should that be a div, a span, or something else?</h2> ! <ul> <li>Home</li> <li>Contribute</li> <li>About</li> </ul> <p>One of the main challenges we see in building semantic content is picking what tag to use when. This site seeks to help with that. Now, before we get all judgy and preachy let me get a few tenants out there:</p> 13
  • 14.
    HTML, débuts.. les ‣ ‣ Ensembled’éléments et d’attributs permettant de définir des documents hypertextes ‣ structure, liens, images, tableaux, formulaires… ‣ Quatre versions initiales ‣ de TML1.0 à H HTML4.01 ‣ Propriétés initiales : ‣ Mélange structure physique et logique ‣ Ex. : un élément mis en gras ‣ Syntaxe peu stricte imple HTML en coder à s ‣ Une . web adresses les et (HTTP) Protocol Transfer Hypertext le avec Web, Wide World du base la à inventions trois des 14 HTML Language Markup HyperText :
  • 15.
    CSS : lestyle h1{ color: red; } h2{ color: blue; font-style: italic; } ! p{ color: white; background-color: black; } 15
  • 16.
    CSS Séparation de lastructure logique et de la présentation des documents HTML ‣ Structure logique --> HTML : ensemble d’éléments de contenu ‣ Présentation suivant une feuille de style (style sheet) qui traite les éléments de contenu en éléments de présentation CSS Cascading : Style Sheets ‣ Feuilles de styles associées à HTML ‣ En cascade ‣ on peut utiliser des feuilles de styles multiples ‣ il y a un degré d’importance pour chaque feuille de style 16
  • 17.
    JavaScript <html> <head> <script type="text/javascript"> function createAlertMessage(){ alert("Stopwhat you're doing!"); } </script> ! </head> <body> <button onclick="createAlertMessage()"> Alert! </button> ! ! </body> </html> 17
  • 18.
    XHTML a les : nnées2000.. ‣ XHTML 1.0 (1999) ‣ reformulation XML de HTML4 ‣ définit les DTD pour exprimer des documents HTML ‣ sémantique des balises définie dans HTML4 ‣ XHTML 1.1 ‣ Modularisation : faciliter le mixage de fragments XML dans XHTML ‣ XHTML 2 ‣ Modulaire ‣ Nouvelles fonctionnalités 18 XHTML Language Markup HyperText eXtensible :
  • 19.
    HTML 5 :les années 2010.. A la fois une évolution de HTML 4 et un ensemble de technologies développées par le WHATWG et le W3C. ‣ Nouveaux éléments sémantiques ‣ <article>, <section>, <aside>, <header>, <footer>… ‣ Nouveaux éléments multimédia ‣ <canvas>, <audio>, <video> ‣ Nouvelles API JavaScript : ‣ offline-data, web-storage, … ‣ Souvent associé à CSS 3 ‣ HTML5 vs. XHTML : https://www.webkit.org/blog/68/understanding-html-xml-and-xhtml/ 19
  • 20.
    Un standard Il existedeux organismes de standardisation principaux : ‣ W3C (World Wide Web Consortium) ‣ Consortium de 350 entreprises, ONG, universités et gouvernements ‣ Prix d’entrée ‣ Basé sur le consensus (et donc lent) ‣ WHATWG (Web Hypertext Application Technology Working Group) ‣ Plus petit, sans prix d’entrée ‣ Processus de décision sans consensus ‣ Surtout concentré sur HTML5 20
  • 21.