Maison des Arts et des Sciences Informatiques

HTML et CSS

Choix de l'éditeur de page HTML

Si vous connaissez PHP alors choisissez notepad++

Sinon, vous pouvez prendre LibreOffice et enregistrer au format HTML

Le logiciel Notepad++ permet facilement :

  • de gérer le style des pages en le déclarant dans un fichier CSS.
    A quelque part il y a une analogie dans la manière de gérer le style des documents Word ou LibreOffice
  • de gérer le style des pages quand la taille de la fenêtre qui contient la page HTML devient plus petite (page responsive)
  • de générer un menu en CSS

Notepad++ permet aussi :

  • de gérer le format du texte de la page HTML
  • de le convertir si besoin en UTF-8 (conseillé)

Exemple de page simple

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <title>Avec style</title>

  <link rel="stylesheet" type="text/css" href="css-exemple.css" />

  <link type="image/png" rel="icon" href="assomasi.png.png" />
  <link type="image/png" rel="shortcut icon" href="assomasi.png" />
</head>

<body>
<h1>Titre Un</h1>
<h2>Titre Deux</h2>
<p>Énumération</P>
<ul>
  <li>Lundi</li>
  <li>Mardi</li>
  <li>Mercredi</li>
</ul>
</body>
</html>

Ci dessus, on a défini une page en HTML5, écrite en UTF-8 :

  • le titre affiché dans l'onglet du navigateur est déclaré dan la balise <titre>
  • l'icône affichée dans l'onglet du navigateur est déclarée à l'aide de balises <link>,
    ici il s'agit du fichier « assomasi.png »
  • le fichier de style est précisé par une balise <link>,
    ici il s'agit du fichier « css-exemple.css » dont le contenu est le suvant :

body {
  font: normal 1.0em Helvetica, Arial, sans-serif;
  background-color: #aaaaaa;
  font-size: 12pt;
}

p, h1, h2 {
  font: normal 1.0em Helvetica, Arial, sans-serif;
  margin-top: 8px;
  margin-bottom: 4px;
  margin-left: 16px;
}

h1 {
  font-weight: bold;
  color: #8000ff;
  font-size: 30pt;
  margin-top: 16px;
  margin-bottom: 8px;
  text-align: center;
}

h2 {
  font-weight: bold;
  color: #8800ff;
  font-size: 20pt;
  margin-top: 8px;
  margin-bottom: 8px;
  text-align: left;
}

ul {
  margin-top: 0px;
  margin-left: 4px;
  margin-bottom: 8px;
}

ul li {
  margin-top: 3px;
  margin-left: 0px;
  margin-bottom: 0px;
}

Utilisation des identificateurs et des classes pour les fichiers HTML et CSS

Les identificateurs sont uniques; dans la feuille de style, il sont préfixés par #

Ils permettent d'effectuer une action dynamique sur un élément de la page : positionnement, style, etc

Les classes s'appliquent à un ensemble d'éléments; dans le feuille de style, elles sont préfixées par .

Un élément peut avoir plusieurs classesn comme on peut le voir dans le fichier de style css-exemple-ident-classe.css suivant :

.rouge {
  color: #ff0000;
}

.left {
  text-align: left;
}

#premier {
  font-weight: bold;
  color: #0000ff;
}

Pour la page suivante :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <title>id et class</title>

  <link rel="stylesheet" type="text/css" href="css-exemple.css" />
  <link rel="stylesheet" type="text/css" href="css-exemple-ident-classe.css" />

  <link type="image/png" rel="icon" href="assomasi.png.png" />
  <link type="image/png" rel="shortcut icon" href="assomasi.png" />
</head>

<body>
<h1 class="left rouge">Titre Un</h1>
<h2>Titre Deux</h2>
<p>Énumération</P>
<ol>
  <li id="premier">Lundi</li>
  <li>Mardi</li>
  <li>Mercredi</li>
</ol>
</body>
</html>

La nouvelle feuille de style doit être déclarée après la première (feuilles de style en cascade)

Ainsi elle change les caractéristiques de la précédente

Remarque : on a utilisé ici une liste numérotée introduite par une balise <ol>

Utilisation des divisions pour créer des styles différents dans la même page

Exemple de fichier HTML

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <title>Divisions</title>

  <link rel="stylesheet" type="text/css" href="css-exemple.css" />
  <link rel="stylesheet" type="text/css" href="css-exemple-divisions.css" />

  <link type="image/png" rel="icon" href="assomasi.png.png" />
  <link type="image/png" rel="shortcut icon" href="assomasi.png" />
</head>

<body>

<div id="div-mois">
  <h2>Nom des Mois</h2>
  <ul>
    <li>Janvier</li>
    <li>Février</li>
    <li>Mars</li>
    <li>Avril</li>
    <li>Mai</li>
    <li>Juin</li>
    <li>Juillet</li>
    <li>Août</li>
    <li>Septembre</li>
    <li>Octobre</li>
    <li>Novembre</li>
    <li>Décembre</li>
  </ul>
</div> <!-- div-mois -->

<div id="div-jour">
  <h2>Noms des Jours de la semaine</h2>
  <ul>
    <li>Lundi</li>
    <li>Mardi</li>
    <li>Mercredi</li>
    <li>Jeudi</li>
    <li>Vendredi</li>
    <li>Samedi</li>
    <li>Dimanche</li>
  </ul>
</div> <!-- div-jour -->

</body>
</html>

Cette page utilise la feuille de style supplémentaire css-exemple-divisions.css suivante

#div-mois {
  border: 2px solid red;
  margin: 4px;
}

#div-mois h2 {
  color: #ff0000;
}

#div-mois premier {
  color: #ff0000;
}

#div-jour {
  border: 2px solid #000fff;
  margin: 4px;
}

#div-jour h2 {
  color: #0000ff;
}

#div-jour ul li {
  color: #000fff;
}

Exemple de page avec HEADER, DIV et FOOTER

La page HTML

Le HTML

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <title>Header et Footer</title>

  <link rel="stylesheet" type="text/css" href="css-div.css" />

  <link type="image/png" rel="icon" href="assomasi.png.png" />
  <link type="image/png" rel="shortcut icon" href="assomasi.png" />
</head>

<body>

<header>
<p>Coucou !</p>
</header>

<div id="div-essai">
  <h2>ça va ?</h2>
  <ul>
    <li>Un peu</li>
    <li>Beaucoup</li>
    <li>Passionnément</li>
    <li>Pas du tout ?</li>
  </ul>
</div> <!-- div-jour -->

<footer>
<p>Courage !</p>
</footer>

</body>
</html>

Le CSS

On a mis des bordures pour mieux visualiser les zones occupées

La distance du texte à la bordure est paramétrée par le padding

html,body,div,span,h1,h2,h3,h4,h5,h6,blockquote,a,p,img,ul,li {
  margin:0px;
  padding:0px;
  vertical-align:baseline;
}

header {
  margin:0; 
  padding:8px;
  border: 2px solid black;
}

#div-essai {
  margin:0; 
  padding:0;
  padding-left:8px;
  border: 2px solid blue;
}

footer {
  margin:0; 
  padding:0;
  padding-left:8px;
  border: 2px solid black;
}

Avec Firefox, il est possible de vérifier le positionnement et le CSS en faisant « Bouton droit » puis « Examiner l'élément »

Les valeurs (en rouge) des attributs CSS peuvent êtres modifiées et visualisées immédiatement sur la page qui se met à jour

Alignement de deux divisions verticalement

Exemple de fichier HTML

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <title>Floating</title>

  <link rel="stylesheet" type="text/css" href="css-exemple.css" />
  <link rel="stylesheet" type="text/css" href="css-exemple-ident-classe.css" />
  <link rel="stylesheet" type="text/css" href="css-exemple-divisions.css" />
  <link rel="stylesheet" type="text/css" href="css-exemple-divisions-float.css" />

  <link type="image/png" rel="icon" href="assomasi.png.png" />
  <link type="image/png" rel="shortcut icon" href="assomasi.png" />
</head>

<body>

<div id="div-mois">
  <h2>Nom des Mois</h2>
  <ul>
    <li>Janvier</li>
    <li>Février</li>
    <li>Mars</li>
    <li>Avril</li>
    <li>Mai</li>
    <li>Juin</li>
    <li>Juillet</li>
    <li>Août</li>
    <li>Septembre</li>
    <li>Octobre</li>
    <li>Novembre</li>
    <li>Décembre</li>
  </ul>
</div> <!-- div-mois -->

<div id="div-jour">
  <h2>Noms des Jours de la semaine</h2>
  <ul>
    <li>Lundi</li>
    <li>Mardi</li>
    <li>Mercredi</li>
    <li>Jeudi</li>
    <li>Vendredi</li>
    <li>Samedi</li>
    <li>Dimanche</li>
  </ul>
</div> <!-- div-jour -->

<div class="clear-both">
  <p>Il y a 12 mois, 52 semaines, 365 jours dans une année</p>
  <p>Le nombre de jours de chaque mois est diffèrent à cause de Jules et Auguste</p>
  <p>Le nombre de jour du mois de février change de temps en temps</p>
  <p>Le nombre de jour dans une année change aussi de temps en temps au même rythme que février</p>
  <p>Il y a un jour avec 23 heures et un autre avec 25 heures</p>
</div> <!-- div clear-both -->

</body>
</html>

Cette page utilise la feuille de style supplémentaire css-exemple-divisions-float.css suivante

#div-mois {
  float:left;
}

#div-jour {
  float:left;
}

.clear-both {
  padding-top: 16px;
  clear:both;
}

On a ajouté « float:left » au style des divisions « div-mois » et « div-jour »

Et un « clear:both » avec un « padding-top:16px » à la 3è division afin que celle-ci soit en dessous des deux premières

Dimensions et positions des divisions

On reprend l'exemple précédent en lui ajoutant des divisions

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <title>Positionnement</title>

  <link rel="stylesheet" type="text/css" href="css-exemple.css" />
  <link rel="stylesheet" type="text/css" href="css-exemple-divisions-dimensions.css" />

  <link type="image/png" rel="icon" href="assomasi.png.png" />
  <link type="image/png" rel="shortcut icon" href="assomasi.png" />
</head>

<body>

<div id="div-principal">
  <div id="div-haut">
    <div id="div-mois">
      <h2>Nom des Mois</h2>
      <ul>
        <li>Janvier</li>
        <li>Février</li>
        <li>Mars</li>
        <li>Avril</li>
        <li>Mai</li>
        <li>Juin</li>
        <li>Juillet</li>
        <li>Août</li>
        <li>Septembre</li>
        <li>Octobre</li>
        <li>Novembre</li>
        <li>Décembre</li>
      </ul>
    </div> <!-- div-mois -->

    <div id="div-jour">
      <h2>Noms des Jours de la semaine</h2>
      <ul>
        <li>Lundi</li>
        <li>Mardi</li>
        <li>Mercredi</li>
        <li>Jeudi</li>
        <li>Vendredi</li>
        <li>Samedi</li>
        <li>Dimanche</li>
      </ul>
    </div> <!-- div-jour -->

    <div class="clear-both"></div>
  </div> <!-- div-haut -->

  <div id="div-bas">
    <p>Il y a 12 mois, 52 semaines, 365 jours dans une année</p>
    <p>Le nombre de jours de chaque mois est diffèrent à cause de Jules et Auguste</p>
    <p>Le nombre de jour du mois de février change de temps en temps</p>
    <p>Le nombre de jour dans une année change aussi de temps en temps au même rythme que février</p>
    <p>Il y a un jour avec 23 heures et un autre avec 25 heures</p>
  </div> <!-- div-bas -->

</div> <!-- div-principal -->

</body>
</html>

On a ajouté des bordures pour distinguer chaque division

La division principale est centrée horizontalement grâce à un « margin: 0 auto »

Un « margin-top: 16px » placé juste après permet de descendre légèrement vers le bas la division principale


Les divisions « div-mois » et « div-jour » ont une largeur en proportion avec la division « div-haut » qui les contient

Un « <div class="clear-both"></div> » est nécessaire pour arrêter le flottement des divisions


Le padding des divisions est utilisé pour mettre une distance avec leur contenu

Le marging est utilisé est utilisé pour mettre une distance avec le contenant


Cette page utilise la feuille de style css-exemple-divisions-dimensions suivante

#div-principal {
  max-width:800px;
  width:100%;
  margin: 0 auto;
  margin-top: 16px;
  border: 2px solid blue;
}

#div-haut {
  border: 2px solid black;
  margin: 6px;
  padding: 2px;
}

#div-bas {
  border: 2px solid green;
  margin: 12px;
  padding: 12px;
}

#div-mois {
  float:left;
  width: 30%;
  border: 2px solid red;
  margin: 4px;
}

#div-mois h2 {
  color: #ff0000;
}

#div-mois premier {
  color: #ff0000;
}

#div-jour {
  width: 60%;
  float:left;
  border: 2px solid #000fff;
  margin: 4px;
}

#div-jour h2 {
  color: #0000ff;
}

#div-jour ul li {
  color: #000fff;
}

.clear-both {
  clear:both;
}

Gestion des styles en tenant compte de la dimension de la fenêtre

On a ajouté une image dans un paragraphe centré

L'image s'adapte automatiquement à la taille de la fenêtre grâce aux déclarations : max-width:100%; height:auto

#div-mois {
  min-width: 200px;
}

#div-jour {
  min-width: 200px;
  height: 100%;
}

img {
  max-width:100%;
  height:auto;
}

.center {
  text-align: center;
}

@media only screen and (max-width: 600px) {

#div-mois {
  float: none;
  border: 2px solid #000fff;
}

#div-mois h2 {
  font-size: 5vw;
}

#div-jour {
  float: none;
  border: 2px solid red;
}

#div-jour h2 {
  font-size: 5vw;
}

}

Les divisions « div-mois » et « div-jour » ont une largeur minimale grâce à la directive : min-width: 200px

On a ici ajouté une directive dans le fichier des styles : media only screen and (max-width: 600px)

Ainsi quand la largeur de la fenêtre devient inférieure à 600px, un nouveau style s'applique

Afin d'observer le changement, on change la couleur de la bordure des divisions des mois et des jours

Et on définit une taille pour les caractères (h2) de 5% de la taille de la fenêtre avec la déclaration font-size: 5vw


Menus en CSS

On utilise la balise <nav> de HTML5 qui contient une liste avec des sous-listes comme la suivante :

<nav class="Menu">
  <ul>
    <li><a href="#">Menu 1</a>
      <ul>                         
        <li><a href="#">Sous-Menu 1.1</a></li>
        <li><a href="#">Sous-Menu 1.2</a></li>
      </ul>
    </li>
    <li><a href="#">Menu 2</a>
      <ul>                         
        <li><a href="#">Sous-Menu 2.1</a></li>
        <li><a href="#">Sous-Menu 2.2</a></li>
      </ul>
    </li>
    <li><a href="#">Menu 3</a>
      <ul>                         
        <li><a href="#">Sous-Menu 3.1</a></li>
        <li><a href="#">Sous-Menu 3.2</a></li>
        <li><a href="#">Sous-Menu 3.3</a></li>
      </ul>
    </li>
  </ul>
</nav>

Ici on a mis des # à la place des liens vers les pages du menu

Pour obtenir un menu horizontal on utilise le CSS

.Menu {
  height: 28px;
  margin-top:8px; 
  margin-left:8px; 
  width:420px
}

.Menu ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  text-align: center;
}

.Menu li {
  float: left;
  margin: 0px;
  padding: 0px;
  color: white;
  background-color: #000fff;
  font-weight:bold;
  width: 140px;
  text-align: left;
}

.Menu li a {
  display: block;
  color: white;
  text-decoration:none;
  padding:5px;
}

.Menu li a:hover {
  color:black;
}

.Menu ul li ul {
  display:none;
  margin: 0px;
  padding: 0px;
}

.Menu ul li ul li {
  color: black;
  margin: 0px;
  padding: 0px;
  background-color: #000fff;
  font-weight:bold;
  width: 140px;
}

.Menu ul li ul li a {
  text-decoration:none;
  padding:5px;
}

A ce stade :

  • Les puces ont disparu grâce à une directive list-style-type: none
  • L'alignement est horizontal grâce aux directives float: left et display: block
  • Les sous-menus ul ul li ne sont pas affichés grâce à une directive display:none
  • Pour la mise au point, enlever cette dernière directive

Ci-après l'affichage du menu :



On va maintenant activer les sous-menus avec les événements souris

Pour cela on ajoute ici la classe Menu-suite à la balise <nav> dont le CSS est le suivant :

.Menu-suite ul li:hover ul {
  display:block;
}
 
.Menu-suite li:hover ul li {
  float:none;
}
 
.Menu-suite li ul {
  position:absolute;
}
 
 @media only screen and (max-width: 460px) {

.Menu {
  height: 96px;
  margin-left: 16px;
  margin-bottom: 4px;
}

.Menu li {
  float: none;
  height:32px;
}
     
.Menu li a {
  display: inline;
}

.Menu ul li ul li {
  margin-left: 142px;
}

}
 

On a alors :






Le menu se doit d'être lui aussi responsive, en cours..


Pour en savoir plus sur le HTML :

Menus en JavaScript

Il est aussi possible de faire un menu en javaScript...

...

Changer le style d'un identifiant ou d'une classe en JavaScript

C'est la page « Plan_du_Site.php » qu'il faut regarder..

Ici on a donné un « title » à la balise « link » qui déclare le CCS

On va changer les styles de ce fichier CSS afin de cacher ou afficher des éléments

On utilise le script « Update_Plan.js » suivant :

//######
//## Update_Plan.js
//## ====================
//## 18.03.2019: Creation
//######

function Update_Plan( ) {

  var StyleSheet = document.styleSheets[ ( document.styleSheets.length - 1 ) ];

  for( var KS = 0; KS < document.styleSheets.length; KS++ ) {
    if ( document.styleSheets[ KS ].href ) {
      if ( document.styleSheets[ KS ].href.indexOf( "assomasi_2019.css" ) > -1 ) {
        StyleSheet = document.styleSheets[ KS ];
        break;
      }
    }
  }

  b_Tout = document.getElementById( "CB-Tout" ).checked;
  b_Date = document.getElementById( "CB-Date" ).checked;
  b_Last = document.getElementById( "CB-Last" ).checked;

  if ( b_Tout == true ) {
    ChangeStylesheetRule( StyleSheet, ".sousmenu", "display", "inline" );
    Set_Cookie( "MASi_Plan-avec-Sous-Menus", "Yes", 2 );
  } else {
    ChangeStylesheetRule( StyleSheet, ".sousmenu", "display", "none" );
    Set_Cookie( "MASi_Plan-avec-Sous-Menus", "NaN", 0 );
  }

  if ( b_Date == true ) {
    ChangeStylesheetRule( StyleSheet, ".avecdate", "display", "inline" );
    Set_Cookie( "MASi_Plan-avec-Dates", "Yes", 2 );
  } else {
    ChangeStylesheetRule( StyleSheet, ".avecdate", "display", "none" );
    Set_Cookie( "MASi_Plan-avec-Dates", "NaN", 0 );
  }

  if ( b_Last == true ) {
    ChangeStylesheetRule( StyleSheet, ".lastm", "display", "inline" );
    Set_Cookie( "MASi_Plan-avec-Last-Modified", "Yes", 2 );
  } else {
    ChangeStylesheetRule( StyleSheet, ".lastm", "display", "none" );
    Set_Cookie( "MASi_Plan-avec-Last-Modified", "NaN", 0 );
  }

}

function Init_Plan() {
  document.getElementById( "CB-Tout" ).checked = ( Get_Cookie( "MASi_Plan-avec-Sous-Menus" ) == "Yes" );
  document.getElementById( "CB-Date" ).checked = ( Get_Cookie( "MASi_Plan-avec-Dates" ) == "Yes" );
  document.getElementById( "CB-Last" ).checked = ( Get_Cookie( "MASi_Plan-avec-Last-Modified" ) == "Yes" );

  Update_Plan();
}


La fonction « Update_Plan() » est appelée quand on clique sur une case à cocher

A noter; la fonction « Init_Plan() » doit être appelée après le HTML du formulaire

Voir la page


Liens pour faire des Animations en CSS


Nombre de visites :  [Compteur]