Programmation Web

Programmation Web
Objectifs pédagogiques :
À la fin de ce cours, vous serez capable de :
 Utiliser du code HTML

 Structurer une page web en HTML
 Utiliser du code CSS
 Mettre en forme une page web en CSS
 Organiser les éléments d’une page Web grâce au CSS
 Modifier l'agencement d'une page HTML avec CSS
 Intégrer des formulaires dans une page web
 Adapter une page pour les petites résolutions en CSS
 Utilisation d’un framework (infrastructure logicielle, socle) CSS Bootstrap
Découvrez le fonctionnement des sites web
Le Web a été inventé par Tim Berners-Lee au début des années 1990.
Pour créer des sites web, on utilise deux langages informatiques :
- HTML : permet d'écrire et organiser le contenu de la page (paragraphes, titres…) ;

- CSS : permet de mettre en forme la page (couleur, taille…).
Il y a eu plusieurs versions des langages HTML et CSS dont les dernières versions sont
HTML5 et CSS3.
Navigateurs
Le navigateur web est un programme qui permet d'afficher des sites web. Il lit les langages
HTML et CSS pour savoir ce qu'il doit afficher.
Il existe de nombreux navigateurs web différents : Google Chrome, Mozilla Firefox, Internet
Explorer, Safari, Opera… Chacun affiche un site web de manière légèrement différente des
autres navigateurs.
Dans ce cours, nous allons apprendre à utiliser les langages HTML et CSS.Nous allons aussi
travaiiler avec un framework CSS appelé Bootstrap.
Nous travaillerons avec des outils suivants :
- Sublime Text / Notepad++ / jEdit / vim…

- APM / WAMP / XAMPP (Apache, MySQL/MariaDB,PHP, Perl)
Créez votre première page web en HTML
Extension du fichier .html.
À l'intérieur du fichier, nous écrirons le contenu de notre page, accompagné de balises

HTML.
Les balises
Elles peuvent avoir plusieurs formes :
- <balise> </balise>: elles s'ouvrent et se ferment pour délimiter le contenu (début et
fin d'un titre, par exemple).

- <balise />: balises orphelines (on ne les insère qu'en un seul exemplaire), elles
permettent d'insérer un élément à un endroit précis (par exemple une image).
Les balises sont parfois accompagnées d'attributs pour donner des indications
supplémentaires (exemple :<image nom="photo.jpg" />).
Structure de base d'une page en HTML 5.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title> Votre titre </title>


<link rel="stylesheet" type="text/css" href="styles.css" />
<style>
/* Styles CSS globaux spécifiques à la page */
</style>
</head>
<body>
<p>*** Bienvenue - mon premier paragraphe ***</p>
</body>
</html>
Les mots encadrés par < et > s'appellent des Balises ou Tags.
Un fichier HTML contient deux types d'éléments :
 les balises ;
 le contenu effectif qui sera affiché par votre navigateur préféré.
Remarques
1- Les contenus multimédia sont stockés dans des fichiers externes et non dans un
fichier htm.
2- Le contenu de la page se situe dans le bloc body.
3- Avec Notepad++, dans le menu Encodage, pensez à cocher Encoder en UTF-8.
Analyse du code
La balise identifie...
<!DOCTYPE html> DOCTYPE (Document Type Declaration) - pour

valider la version (X)HTML utilisée. Ici, pour une
page en HTML5.
<html lang="fr"> Début de la page HTML avec la mention de la
langue principale de la page.
</html> la fin de la page (du code HTML).
<head> le début du bloc (section) d'en-tête.
<meta charset="utf-8"> Définir le codage des caractères. (Ressource)
<meta name="viewport" Pour tenir compte de la taille de l'écran -
content="width=device-width, initial- navigateur - (écran d'ordinateur, smartphone,
scale=1"/> tablette).
viewport : désigne la zone de la fenêtre du
navigateur.
<title> le début du titre (il s'affiche dans un onglet de la
fenêtre du navigateur).
</title> la fin du titre.
<style> et </style> Début/fin du bloc de la déclaration des styles .
</head> la fin du bloc (section) d'en-tête.
<p> et </p> le début et la fin d'un paragraphe.
<body> et </body> Début/fin du corps de la page. Il contient le
contenu effectif.
Notions de base
- Définir des titres
Les balises h1, h2,..., h6 définissent une hiérarchie pour les titres.
La balise h1 désigne le niveau le plus élevé dans la hiérarchie.
Une balise hx est du type bloc.
NB : Un titre ne doit pas être souligné sauf s'il s'agit d'un lien hypertexte.
- Gestion des paragraphes
La gestion des paragraphes occupe une place centrale dans l'organisation du contenu
textuel d'une page Web.
Caractéristiques
- La paire <p></p> définit un paragraphe.

- Plusieurs paragraphes consécutifs se positionnent verticalement, dans le flux.
- Chaque paragraphe possède une marge supérieure (et inférieure) de 1em.
- La balise p se comporte comme un bloc mais un paragraphe ne peut pas contenir
un autre paragraphe (ou bloc).
- Un paragraphe peut contenir un saut de ligne (<br> ou <br />).
- Lien hypertexte
Ce concept révolutionnaire représente la force des pages Web : un clic sur un lien (textuel
ou graphique) et j'accède à un document stocké sur un serveur local et/ou distant (n'importe
où dans le monde !).
Caractéristiques
- La paire <a></a> définit un lien hypertexte.
- La balise est du type inline (en ligne).
- La paire <a></a> peut encadrer un ensemble d'autres balises, sauf a.
- Par défaut, un lien textuel apparaît en bleu et souligné.
- Lors du survol d'un lien hypertexte, le pointeur de la souris représente une main avec
l'index tendu.
- Pour activer un lien, il suffit de cliquer.
- Images
Les images s'adressent au registre des sensations.
Les images d'une page Web ne sont pas stockées dans le fichier HTML correspondant :
chaque image est stockée dans un fichier externe spécifique. Par conséquent, quand le
navigateur télécharge une page Web, il télécharge un ensemble de fichiers.
Les photos sont généralement stockées dans un fichier d'extension JPG ou PNG. Les petits
dessins sont généralement stockés dans un fichier d'extension GIF. Une image est du type
inline.
<img src="pc.gif" width="128" height="81" alt="PC" />
- La balise div
La balise DIV définit un bloc (ou conteneur) neutre. Cet outil, en compagnie des CSS, permet
de créer des maquettes (gabarits) de pages Web.
Objectifs pratiques
- Définir un conteneur DIV.

- Attribuer un style à un conteneur DIV.
- Positionner un conteneur DIV.
- Disposer un contenu dans un DIV.
Caractéristiques
- Par défaut, la hauteur d'un div vaut 0. (Par contre, il possède une largeur non nulle :
variable en fonction de son conteneur - body, par exemple.)
- Un saut de ligne est généré après un bloc <div></div>.
- Par défaut, les propriétés margin et padding valent 0.
- Si la propriété height (hauteur) n'est pas définie, la hauteur du div s'adapte en
fonction du contenu. Par contre, si height est définie et si le contenu possède une
hauteur supérieure à celle du div, le contenu débordera du div.
- Liste à puces et liste numérotée
On distingue :
 la liste à puces : elle permet de mettre en évidence une énumération, de créer un

menu - ul : unordered list (liste à puces)
 <ul>
 <li>Yaoundé</li>
 <li>Douala</li>
 <li>Maroua</li>
 <li>Ngaoundéré</li>
 </ul>
 la liste numérotée : elle insiste sur l'ordre des éléments cités. ol : ordered list (liste
numérotée)
 <ol>
 <li>Yaoundé</li>
 <li>Douala</li>
 <li>Maroua</li>
 <li>Ngaoundéré</li>
 </ol>
- Les tableaux
Les tableaux sont couramment utilisés dans les pages Web pour stocker des données qui
nécessitent une présentation tabulaire.
Dans les années 90, la mise en page utilisait souvent les tableaux. Actuellement, la mise en
page se réalise grâce aux balises du type bloc (main, header, footer, section, nav, div
(conteneur neutre)...).
Défini par <table></table>) composé de :
- lignes (<tr></tr>)
- colonnes (<td></td>, pour chaque ligne)
- la propriété rowspan="2" : pour fusionner deux cellules.
- Créer une infobulle simple
Objectif : afficher un message bref lors du survol d'un objet.
Pour définir une infobulle simple, il suffit d'utiliser l'attribut title (à ne pas confondre avec la
balise <title>). Cet attribut peut s'utiliser avec toutes les balises.
Exemple 1 : lors du survol d'un lien hypertexte.
<a title="Agence Wallonne des Télécommunications" href="www.awt.be">AWT</a>
Exemple 2 : lors du survol d'un paragraphe.
<p title="Définition issue de Wikipédia"> Un définition.... </p>
Exemple 3 : lors du survol d'un tableau.
<table title="Données issues de l'INSEE(L'Institut national de la statistique et des études

économiques)>
--- En survolant le titre de cette page vous verrez apparaître une infobulle.
- La balise span
La balise SPAN définit un élément en ligne (inline).
Objectifs
1- Appliquer une mise en forme à un morceau de texte.

2- Créer une infobulle.
3- <p>
4- Pour une découverte des styles
5- <span class="motcle">CSS</span>
6- <span class="italique">(Cascading Style Sheets)</span>.
7- </p>
- Les balises article et aside
En HTML 5, ces balises concrétisent des éléments de section.
Exemple
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Info avec article et aside</title>
<style>
body {
font-family:tahoma;
margin:0;
}
.plus { /* Pour la balise aside */
float: right;
width: 150px;
background: #ccc;
font-family:calibri;
font-size:1em;
padding: 10px;
margin:5px;
border-left:2px solid gray;
}
article {
margin:auto;
padding:10px;
border-left:2px solid gray;
border-right:2px solid gray;
width: 500px;
}
</style>
</head>
<body>
<article>
<p>Sous l'onglet Insertion, les galeries incluent des éléments

conçus pour être coordonnés avec l'aspect général de votre
document. Vous pouvez utiliser ces galeries pour insérer des
tables, des en-têtes, des pieds de page, des listes, des pages
de garde et tout autre bloc de construction d'un document. .
</p>
<aside class="plus">
<p> Maecenas porttitor congue massa. Fusce posuere, magna sed
pulvinar ultricies, purus lectus malesuada libero, sit amet
commodo magna eros quis urna.
</p>
</aside>
<p>Sous l'onglet Insertion, les galeries incluent des éléments

conçus pour être coordonnés avec l'aspect général de votre
document. Vous pouvez utiliser ces galeries pour insérer des
tables, des en-têtes, des pieds de page, des listes, des pages
de garde et tout autre bloc de construction d'un document.
</p>
<aside class="plus">
<p> Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar
ultricies, purus lectus malesuada libero, sit amet commodo magna
eros quis urna.
</p>
</aside>
<p>Sous l'onglet Insertion, les galeries incluent des éléments conçus pour
être coordonnés avec l'aspect général de votre document. Vous pouvez
utiliser ces galeries pour insérer des tables, des en-têtes, des pieds
de page, des listes, des pages de garde et tout autre bloc de
construction
d'un document.
</p>
<p>Sous l'onglet Insertion, les galeries incluent des éléments conçus pour
être coordonnés avec l'aspect général de votre document. Vous pouvez
utiliser ces galeries pour insérer des tables, des en-têtes, des pieds
de page, des listes, des pages de garde et tout autre bloc de
construction
d'un document.
</p>
</article>
</body>
</html>

Programmation Web

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Programmation Web

Transféré par

Droits d'auteur :

Formats disponibles

Programmation Web

À la fin de ce cours, vous serez capable de :

 Utiliser du code HTML

Pour créer des sites web, on utilise deux langages informatiques :

- HTML : permet d'écrire et organiser le contenu de la page (paragraphes, titres…) ;

Nous travaillerons avec des outils suivants :

- Sublime Text / Notepad++ / jEdit / vim…

À l'intérieur du fichier, nous écrirons le contenu de notre page, accompagné de balises

Elles peuvent avoir plusieurs formes :

- <balise> </balise>: elles s'ouvrent et se ferment pour délimiter le contenu (début et

fin d'un titre, par exemple).

permettent d'insérer un élément à un endroit précis (par exemple une image).

Structure de base d'une page en HTML 5.

Un fichier HTML contient deux types d'éléments :

2- Le contenu de la page se situe dans le bloc body.

3- Avec Notepad++, dans le menu Encodage, pensez à cocher Encoder en UTF-8.

<!DOCTYPE html> DOCTYPE (Document Type Declaration) - pour

- Définir des titres

La balise h1 désigne le niveau le plus élevé dans la hiérarchie.

Une balise hx est du type bloc.

- Gestion des paragraphes

- La paire <p></p> définit un paragraphe.

Les images s'adressent au registre des sensations.

<img src="pc.gif" width="128" height="81" alt="PC" />

- Définir un conteneur DIV.

- Liste à puces et liste numérotée

 la liste à puces : elle permet de mettre en évidence une énumération, de créer un

Défini par <table></table>) composé de :

- Créer une infobulle simple

Objectif : afficher un message bref lors du survol d'un objet.

Exemple 1 : lors du survol d'un lien hypertexte.

<a title="Agence Wallonne des Télécommunications" href="www.awt.be">AWT</a>

Exemple 2 : lors du survol d'un paragraphe.

<p title="Définition issue de Wikipédia"> Un définition.... </p>

Exemple 3 : lors du survol d'un tableau.

<table title="Données issues de l'INSEE(L'Institut national de la statistique et des études

La balise SPAN définit un élément en ligne (inline).

1- Appliquer une mise en forme à un morceau de texte.

- Les balises article et aside

En HTML 5, ces balises concrétisent des éléments de section.

<p>Sous l'onglet Insertion, les galeries incluent des éléments

<p>Sous l'onglet Insertion, les galeries incluent des éléments

Vous aimerez peut-être aussi