Le document présente les langages fondamentaux de la programmation web, notamment HTML pour la structure de la page et CSS pour le style. Il évoque également d'autres langages comme JavaScript, PHP et les outils nécessaires à la création de sites web. Enfin, il aborde les normes et évolutions du web, y compris les standards W3C et WHATWG.

1. Web
Programmation
Chapitre
Introduction
:
1
tatique
S
générale
Anouar
bouazza.anouar@yahoo.fr
2018 2019
-
Bouazza
1

2. 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

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 HTML issue de Wikipedia, sans CSS.
5

6. La même page HTML, cette fois mise en forme grâce au CSS.
6

7. Toujours la même page, 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 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

10. Un 2ème :
exemple
10

11. Éléments d’une page web
Contenu --> HTML
Structure --> HTML
Style --> CSS
Comportement --> JavaScript
11

12. 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

13. 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

14. 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
:

15. CSS : le style
h1{
color: red;
}
h2{
color: blue;
font-style: italic;
}
!
p{
color: white;
background-color: black;
}
15

16. 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

17. 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

18. 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
:

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 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. 21