Imprimer
Affichages : 78007

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

 

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

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

 

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

 

 

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

 

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