Créer sa page web
Comment coder en html et CSS sa page Web.
Sign in to Google to save your progress. Learn more
Email *
Votre nom : *
Votre prénom : *
Votre groupe : *
Dans un premier temps, nous allons exclusivement nous intéresser au HTML. Voici la définition que nous donne Wikipedia de HTML :

"HyperText Markup Language", est le format de données conçu pour représenter les pages web. C’est un langage de balisage permettant d’écrire de l’hypertexte (d’où son nom). 

HTML permet également de structurer sémantiquement 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 permet de créer des documents interopérables conforment aux exigences de l’accessibilité du web. 

Il est souvent utilisé conjointement avec des langages de programmation (JavaScript) et des formats de présentation (feuilles de style en cascade).

Pour l'instant, nous allons retenir deux éléments de cette définition «conçu pour représenter les pages web» et «un langage de balisage». 

Grâce au HTML vous allez pouvoir, dans votre navigateur (Firefox, Chrome, Opera,....), afficher du texte, afficher des images, proposer des hyperliens (liens vers d'autres pages web), afficher des formulaires et même maintenant afficher des vidéos (grâce à la dernière version du HTML : l'HTML5). 

/!\ HTML n'est pas un langage de programmation (comme le Python par exemple), ici, pas question de conditions, de boucles....c'est un langage de description.
-Ouvrir la page suivante sur un navigateur Web : https://capytale2.ac-paris.fr/web/c-auth/list . 
-Cliquer sur le bon type d'ENT (Eclat-BFC) et se connecter.
-Sur CAPYTALE, entrer le code suivant pour accéder à l'activité :
           +code 2nd3 : f3d9-1892212
           +code 2nd5 : 497b-1892254
-Cliquer dans la zone HTML et saisir : 
<h1>Hello World! Ceci est un titre</h1> sur une ligne. 
puis : <p>Ceci est un <strong>paragraphe</strong>. Avez-vous bien compris ?</p>

Qu'observez-vous dans la zone du bas de l'écran ?
*
Captionless Image
Comme déjà évoqué ci-dessus, en HTML tout est une histoire de balise que l'on ouvre et que l'on ferme :
    -Une balise ouvrante est de la forme <nom_de_la_balise>
    -Les balises fermantes sont de la forme </nom_de_la_balise>.

En observant attentivement le code, vous devriez remarquer que toute balise ouverte doit être refermée à un moment ou un autre. La balise ouvrante et la balise fermante peuvent être sur la même ligne ou pas, cela n'a pas d'importance, la seule question à se poser ici est : ai-je bien refermé toutes les balises que j'ai ouvertes


Enfin, il est important de savoir qu'une structure du type :
                                  <balise1><balise2></balise1></balise2>                          est interdite, car la balise2 a été ouverte après la balise1, elle devra donc être refermée avant la balise1.
Mais l'enchaînement suivant est correct : 
                                 <balise1><balise2></balise2></balise1> 
(Notez que dans notre exemple, nous respectons bien cette règle « d'imbrication » des balises avec la balise <p> et la balise <strong>).


Il est important de comprendre que chaque balise a une signification qu'il faut bien respecter (on parle de la sémantique des balises) : 
      -Par exemple, le texte situé entre la balise ouvrante et fermante <h1> est obligatoirement un titre important (il existe des balises <h2>, <h3>, etc... qui sont aussi des titres, mais des titres moins importants (sous-titre)). 
     -La balise <p> permet de définir des paragraphes, 
     -La balise <strong> permet de mettre en évidence un élément important. 
     -Il existe des balises qui sont à la fois ouvrantes et fermantes (<balise/>) exemple, la balise permettant de sauter une ligne, la balise <br/> (balise qu'il faut d'ailleurs éviter d'utiliser pour différentes raisons ).

Il est possible d'ajouter des éléments à une balise ouvrante, on parle alors d'attribut. Une balise peut contenir plusieurs attributs : 
             <ma_balise attribut_1= "valeur_1" attribut_2="valeur_2"> 
Il existe beaucoup d'attributs différents, nous allons nous contenter de 2 exemples avec l'attribut id (id pour identifiant) et class. 
Nous verrons l’intérêt de ces attributs dans l'activité suivante.
Écrivez ce code HTML, qu'observez-vous ? *
Captionless Image
Le HTML n'a pas été conçu pour gérer la mise en page (çà reste possible, mais c'est une mauvaise pratique). Le HTML s'occupe uniquement du contenu et de la sémantique, pour tout ce qui concerne la mise en page et l'aspect « décoratif » (on parle du « style » de la page), on utilisera le CSS (Cascading Style Sheets).

Dans CAPYTALE, il est possible d'écrire du CSS dans la fenêtre en haut à droite. Ecrire ce code dans la zone HTML :
Puis écrire ce code dans la zone CSS
Que constatez-vous ?
*
Captionless Image
Les propriétés « text-align » et «background-color» seront appliquées au contenu de toutes les balises de type h1 (avec respectivement les valeurs «center» et «red»).
Ecrire maintenant ce code en HTML :
Ecrire ce code en CSS, que constatez-vous ? *
Captionless Image
Il est donc possible de cibler un paragraphe et pas un autre en utilisant l'id du paragraphe (en CSS l'id se traduisant par le signe #). 
Il est aussi possible d'utiliser l'attribut class à la place de l'id (dans le CSS on utilisera alors le point . à la place du #). La différence entre "id" et "class" n'est pas très importante. 

L'attribut "class" permet de donner le même nom à plusieurs reprises dans une même page. Si nous avions eu un 3e paragraphe, nous aurions pu avoir :  <p class="para_1">Voici un 3e paragraphe</p> , mais nous n'aurions pas pu avoir : <p id="para_1"> Voici un 3e paragraphe </p>, car le nom para_1 a déjà été utilisé pour le 1er paragraphe. 

CAPYTALE est un bel outil, mais il ne peut pas être utilisé pour la réalisation d'un vrai site internet (ou d'une vraie application web).
Next
Clear form
Never submit passwords through Google Forms.
This content is neither created nor endorsed by Google. Report Abuse - Terms of Service - Privacy Policy