NSI - Numérique et Sciences Informatiques

HTML (HyperText Markup Language) et
CSS (Cascading Style Sheets )

1. Présentation du HTML : HyperText Markup Language

Le HyperText Markup Language ou HTML est le langage de balisage conçu pour représenter les pages web.
C’est un langage permettant d’écrire de l’hypertexte, c'est à dire est un document contenant des unités d'information liées entre elles par des hyperliens.

HTML permet également de structurer et de mettre en forme le contenu des pages, d’inclure des ressources multimédias dont des images, des formulaires de saisie et des programmes informatiques.

Il est souvent utilisé conjointement avec le langage de programmation JavaScript et des feuilles de style en cascade (CSS).

Quelques outils

Aide notepad++ pour avoir les balises ouvrantes et fermantes automatiquement :
- plugin manager -> textFx
- TextFx -> settings -> autoclose html tags.
Sur Mac on peut utiliser : BBEdit / editra / Gedit / .
On peut aussi utiliser Sublime text : https://www.sublimetext.com/

Etape 1

A lire (même rapidement) Le cours en PDF : PowerPoint / Pdf.
Une vue d'ensemble d'une page HTML.
Compléments : exemple de cours sur : Les_bases_HTML .
(Voir aussi le cours openclassrooms.com si besoin)

2. Résumé du cours HTML : page exemple.html

On utilise l'éditeur de texte (Sublime Text, Notepad++, jEdit, vim…) pour créer un fichier ayant l'extension .html (par exemple : test.html).
Ce fichier peut être ouvert dans le navigateur web simplement en faisant un double-clic dessus.
À l'intérieur du fichier, nous écrirons le contenu de notre page, accompagné de balises HTML.
Les balises peuvent avoir plusieurs formes :
- < balise> et </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 : <img alt="image.jpg" /> .
Une page web est constituée de deux sections principales :
- un en-tête < head >
- et un corps <body>.
On peut afficher le code source de n'importe quelle page web en faisant un clic droit puis en sélectionnant Afficher le code source de la page.
La structure d'une page web :

<!DOCTYPE html>
<html>
  <head>
      <!-- En-tête de la page -->
      <meta charset="utf-8" />
      <title>Titre</title>
  </head>

  <body>
      <!-- Corps de la page -->
  </body>
</html>

Baliser le texte

Les titres et sous-titres : h1, h2, h3, h4 ...

<!-- Titre h1 -->
<h1>Les principaux éléments d'une page HTML</h1>
   <!-- Sous-Titre h2 -->
   <h2>Les titres</h1>

Les paragraphes

<p> p est la balise d'un paragraphe</p>

Le texte
En gras avec l'attribut strong, en italique avec l'attribut em, souligné avec l'attribut u ...

En <strong>gras</strong> avec l'attribut <code>strong</code>, en <em>italique</em> avec l'attribut <code>em</code>, <u>souligné</u> avec l'attribut <code>u</code>

Les listes : ordonnées (ol : orderd list), par exemple :

1er item
2e item

3e item

<!-- Les listes ordonnées ol (Ordered Lists)   -->
    <ol>
	<li>1er item</li>
	<li>2e item</li>
	<li>3e item</li>
   </ol>

Les listes : non ordonnées (ul : unordered list) par exemple :

point A
point B

point C

					<!-- Les listes non ordonnées ul (Unordered Lists) -->
   <ul>
	<li>point A</li>
	<li>point B</li>
	<li>point C </li>
   </ul>

Les images
L'image utilisée est définie via l'attribut src (pour source) qui contient le chemin vers le fichier de l'image.
On peut redéfinir la taille avec les attributs width , eight et un texte alternatif (pour les aveugles) avec alt
- Attention : il faut donner le chemin relatif de votre image, par rapport à l'endroit où se situe votre fichier .html.
  Pour rappel :
  - - ../ : pour remonter au dossier parent.
    - ./ : pour le répertoire courant

<!-- Attention il faut bien définir le chemin précis de l'image et son extension (png ici)-->
<img src="images/html-logo.png" alt="Texte de remplacement." width=90>

Les liens
- Lien externe : avec l'attribut href et le lien absolu vers la page.
```
<a href="https://www.math93.com">www.math93.com</a>
					
```
- Lien sur une page du site : avec l'attribut href et le lien relatif vers la page.
```
<a href="autrepage.html"> lien sur le site</a>
					
```
- Lien ancre
  Vers en endroit sur la page avec le croisillon #ref et un label qui fait référence à un autre endroit de la page repéré par id="ref"
```
<p id="lien_ancre_1">Voici les principaux éléments d'une page HTML.</p>
<a href="#lien_ancre_1"> haut de la page</a>
					
```

Les tableaux avec par exemple
Avec les attributs : table pour le tableau, tr pour les lignes (table rows), th pour les cellules titres (table header), td pour les cellules (table data).
cellspacing pour l'espace entre les cellules, cellpading pour l'espace entre texte et bord, widht pour la taille du tableau sur la page ...
Des compléments ici : lien.

<center> <!-- pour centrer le tableau-->
<table border="4" cellspacing="1" cellpadding="1" width="50%"  text-align:center>
<!-- cellspacing : espace entre les cellules-->
<!-- cellpading  : espace entre le texte et les bords des cellules -->
<!-- width="50%  : le tableau est sur 50% de la page -->
<tr>
    <th>Titre Ligne 1 Col. 1</th> <!-- th  : l'entête ou header -->
    <th>Titre L1 C2</th>
    <th>Titre L1 C3</th>
</tr>

<tr>
    <td>Ligne 2 Col. 1</td> <!-- td  : pour data (dans les cellules) -->
    <td>L2 C2</td>
    <td>L2 C3</td>
</tr>

</table>
</center>

Titre Ligne 1 Col. 1	Titre L1 C2	Titre L1 C3
Ligne 2 Col. 1	L2 C2	L2 C3

La barre horizontale <hr />

<p>Barre horizontale simple, </p>
<hr />
<p>avec une longeur relative limitée,</p>
<hr style="width:50%;" />
<p>avec une longueur absolue,
<hr style="width:100%;" />
<p>avec d'autres positions dans la page,
<h1>HTML</h1>
<p>HTML is a language for describing web pages.....</p>
<hr style="width:10%;size:10px;" />

Etape 2

Exercice 1 : Une première page.
Suivez les indications pour créer votre première page sur CAPYTALE.

3. CSS : Cascading Style Sheets

Le CSS (Cascading Style Sheets) est un langage de feuille de style utilisé pour décrire la présentation d'un document écrit en HTML ou en XML.
Le CSS décrit la façon dont les éléments doivent être affichés à l'écran, sur du papier, en vocalisation, ou sur d'autres supports.

Etape 3

Lire et faire les exemples du cours sur ce site
1. https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics
2. Les éléments importants :
  - CSS (color, background, text, font ... ), voir la liste sur la page https://www.w3schools.com
  - des CSS id selector et class selector : https://www.w3schools.com
  - Aide sur les priorités de style : https://openweb.eu.org/articles/cascade_css
Pour avoir toutes les fonctions disponibles
- Cascading Style Sheets (CSS) : https://www.w3schools.com/css/default.asp
ATTENTION
Pour lier page Html et une feuille de style nommée feuille.css il faut écrire dans le <head> de votre page html un lien vers la feuille de style (voir la syntaxe ci-dessous).

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

Etape 4

Exercice 2 :
Vous devez utiliser une feuille de style CSS et modifier des éléments de votre page de l'exercice 1.

4. Un petit projet

Objectif

Vous allez devoir :

créer un mini-site avec au moins 3 pages et une feuille de style CSS ;
le mettre en ligne.

Utilisez un hébergeur gratuit ou un site comme

https://glitch.com/
https://codepen.io/
Votre fournissur d'acces domicile (comme FREE) peut vous proposer un petit espace Web totalement gratuit. Il vous suffit chez FREE d'ouvrir un compte e-mail chez eux.
On peut aussi faire un site sur https://github.com/. C'est un peu plus compliqué mais c'est trés pratique pour apprendre à utiliser Github. C'est LA plateforme des développeurs.

Les contraintes

Créer votre mini site sur le thème de votre choix, par exemple sur un thème du programme de NSI.

Les contraintes sont les suivantes (chaque élément sera évalué) :

Votre site devra comporter une feuille de style CSS avec au moins 10 items :

10 CSS parmi : color, background, text, font ... , voir la liste sur la page https://www.w3schools.com

des CSS id selector et class selector : https://www.w3schools.com

Aide sur les priorités de style : https://openweb.eu.org/articles/cascade_css

Il devra comporter au moins 3 pages distinctes (1 page d'accueil +2) et des liens vers chacune d'elles.

Dans l'accueil, un menu qui pointe vers (au moins) les 2 pages supplémentaires.

Sur chaque page et même la page d'accueil il faudra :

un titre ;

une image liée au thème de la page ;

Des listes ordonnées (ol) et non ordonnées (ul) ;

Des tableaux ;

des liens internes et externes ;

un lien à partir d'une image ;

du contenu avec indication de la source de référence ;

Attention : tout copier/coller d'une autre page web sera sanctionné d'un zéro !

Les sources doivent être indiqué en bas de la page d'accueil.

La page d’accueil devra présenter un lien "ancre", c'est à dire un lien vers un élément de la même page. Vous mettrez aussi ce lien ancre sur la micro page web capytale (voir ci-après).
Vous nous donnerez le lien sur la micropage Web sur Capytale.

Lien ancre : quelques éléments d'explication.

Aide : création site pas à pas.