NSI (Numérique et Sciences Informatiques) : HTML et CSS

Détails
Affichages : 86344

Vote utilisateur: 4 / 5

Etoiles activesEtoiles activesEtoiles activesEtoiles activesEtoiles inactives
 

NSI - Numérique et Sciences Informatiques


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

Menu

  1. Présentation du HTML : HyperText Markup Language
  2. Résumé du cours HTML
  3. CSS : Cascading Style Sheets
  4. Le projet

  

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

  1. A lire (même rapidement) Le cours en PDF : PowerPoint / Pdf.
    Une vue d'ensemble d'une page HTML.
  2. Optionnel : Lire et faire les exemple du 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 :
    1. 1er item
    2. 2e item
    3. 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. 1Titre L1 C2Titre 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.

 

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

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

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

Utilisez un hébergeur gratuit ou un site comme https://repl.it qui permet de gérer un petit espace Web avec les fichiers .CSS et .SCRIPT.
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.

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 :
    • Il devra comporter au moins 3 pages distinctes et des liens vers chacune d'elles.
    • Sur chaque page 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 !
    • Une au moins des pages devra présenter un lien "ancre", c'est à dire un lien vers un élément de la même page
  • Aide : création site pas à pas.   

 

Articles Connexes