COURS
PROGRAMATION-WEB
HTML&CSS
Présenté par Ass SERGE KIKOBYA
Programmation-web| Module-1
Introduction Développement de pages Web avec
HTML et CSS
Concepts de Pages personnelles, services en ligne, applications
base d'entreprise : tous reposent sur le langage HTML !
Images et Celui-ci est léger, simple et permet une mise en page
balises claire des informations ; et surtout, tout poste
structurales banalisé peut lire des pages HTML, en intranet
Feuilles de comme sur Internet. Combiné au langage CSS pour
style CSS gérer la mise en forme et l'uniformité, vous
garantissez ainsi l'évolutivité de votre site.
Formulaire
Présenté par Ass SERGE KIKOBYA
Programmation-web| Module-1
Introduction • La structure d'un document HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[Link]
Concepts de
base • Les balises standars (<b>,<i>,<u>,<p>,<font>)
Images et • Les liens (internes et externes) <a>…</a>
balises
structurales
• Les listes <ul><li>…</li></ul> ou <ol><li>…</li></ol>
Feuilles de • Les ancrages <a href="#ancre">
style CSS
Formulaire
Présenté par Ass SERGE KIKOBYA
Programmation-web| Module-1
Introduction
• Ajouter une image dans une page
HTML <img src=“…” width=“” height=“” alt=“”>
Concepts de • Modifier les couleurs et les fonds de
base
page <body background=“”>
Images et balises
structurales • Créer un tableau
<table><tr><td>…</td><td>…</td></tr></table>
Feuilles de
style CSS • DIV et SPAN
<div>….</div><span>….</span>
Formulaire
Présenté par Ass SERGE KIKOBYA
Programmation-web| Module-1
Nous allons maintenant aborder le CSS, le
Introduction format qui vous permettra de définir la forme
Concepts de • Lier le CSS au HTML
base <link rel=“stylesheet” href=“”>
Images et • Les sélécteurs
balises a{
color:red;
structurales }
Feuilles de style • Découpage en DIV
CSS <DIV id=“container”>…..</DIV>
• Les propriétés CSS
• Gérer la compatibilité entre les
Formulaire navigateurs
Commentaires conditionnels, media queries,
responsive-design
Présenté par Ass SERGE KIKOBYA
Programmation-web| Module-1
Toute page HTML peut être enrichie de formulaires interactifs, qui invitent vos
Introduction visiteurs à renseigner des informations : saisir du texte, sélectionner des
options, les cases à cocher, les listes, valider avec un bouton… tout est
possible !
Concepts de
Nous arrivons cependant aux limites du langage HTML car il faut ensuite
base
pouvoir analyser les informations que le visiteur a saisies… et cela ne peut
Images et pas se faire en langage HTML. Comme nous allons le voir, le traitement des
résultats doit s'effectuer dans un autre langage, par exemple le PHP.
balises
structurales <form method=“POST” action=“[Link]”>
• method : cet attribut indique par quel moyen les données vont être
envoyées
Feuilles de • action : c'est l'adresse de la page ou du programme qui va traiter les
style CSS informations
Les composants d’un formulaire
• Zones de saisie basiques
• Les libellés
Formulaire • Zone de mot de passe
• Zone de texte multiligne
• Zone de saisie enrichie
• Les éléments d’options
• Les listes déroulants
• Le bouton d’envoi
Présenté par Ass SERGE KIKOBYA