Logo du lycée

Informatique et Création Numérique ou Sciences du Numérique

APprentissage de HTML5 et CSS3 :
Créer et publier une page web.


Mise en situation :

Le Web a été inventé par Tim Berners-Lee au début des années 1990. Il permet d'afficher sur une tablette, un smartphone, ou un PC, via un navigateur, des documents hypertextes multimédia qui sont accessibles sur des sites d'Internet.

Pour créer une page web moderne, il faut faire l'apprentissage de deux langages informatiques de description :

Ces deux langages informatiques sont standardisés par le World Wide Web Consortium (W3C), organisme de normalisation à but non lucratif chargé de promouvoir la compatibilité des technologies du World Wide Web.

Ce ne sont pas des langage de programmation (comme Scratch, JavaScript ou Python par exemples), ici, pas question de conditions, de boucles....ces langages décrivent aux navigateurs la structure et le contenu multimédia de la page et avec quel style l'afficher.

Pour publier une page web et la rendre accessible depuis n'importe quel navigateur, il faut la déposer sur un serveur connecté à Internet comme ceux de l'hébergeur 1&1.


Préparation HTML :

Faire la partie "Introduction au HTML" du tutoriel de la KhanAcademy Introduction à HTML/CSS : réaliser des pages Web en rejoignant la classe avec le code fourni.


Activité 1 : première page HTML sur le web...

Le "Hello World !" :

Application :

L'objectif de cette activité est d'éditer votre propre HelloWorld.html hors de la KhanAcademy et de le publier sur le web :

  1. Ouvrir l'éditeur en ligne Thimble puis cliquer sur le bouton "Créer un nouveau projet" ;
  2. Copier puis coller le code minimal HTML suivant en lieu et place du code proposé par défaut par l'éditeur Thimble dans le fichier "index.html" ;
    <!DOCTYPE html>
    <html lang="fr">
    
      <head>
      <!-- Ceci est un commentaire :
           les informations misent dans l'entête sont destinées 
           aux navigateurs et aux moteurs de recherches...  -->
        
        <meta charset="utf-8"><!-- A préciser pour utiliser les caractères accentués... -->
        
        <title>Le titre de ma page</title><!-- A personnaliser -->
        
        <meta name="author" content="Prenom NOM"><!-- A personnaliser -->
        
        <link rel="stylesheet" href="style.css"><!-- lien vers une feuille de style en css -->
        
        <script src="script.js"></script><!-- lien vers un programme en JavaScript -->
      
      </head>
    
      <body>
        <!-- Les informations misent dans le corps s'afficheront
             sur l'écran à l'exception des commentaires...  -->
        
        <h1>Ceci est un titre principal</h1>
        <p>Ceci est un paragraphe écrit par...</p>
        <p>Ceci est un autre paragraphe <br>avec un retour à la ligne.</p>
        <ul>
        	Voici la liste non ordonnée des ...
        	<li>
        		item 1
        	</li>
        	<li>
        		item 2
        	</li>
        	<li>
        		...
        	</li>
    
        </ul>
        <ol>
        	Voici la liste ordonnée des ...
        	<li>
        		item
        	</li>
        	<li>
        		item
        	</li>
        	<li>
        		...
        	</li>
    
        </ol>
        <br><!-- Un saut de ligne pour introduire un espace vertical -->
        <img src="" alt="Bientôt ici il y aura une image de..." height="150" >
        <br>
        <a href="" >Et bientôt ici il y aura un lien hypertexte pour naviguer vers...</a>
      </body>
    
    </html>
    								
  3. Modifier ce code afin de le personnaliser, puis visualiser le rendu dans la fenêtre d'aperçu (si besoin, cliquer sur le bouton pour actualiser son affichage) ;
  4. Renommer votre projet (en haut, à gauche...);
  5. Cliquer sur le lien "Créer un compte" ou "Se connecter" pour enregistrer votre travail directement en ligne ;
  6. Cliquer sur le bouton "Publier", décrire votre projet, puis cliquer sur le nouveau bouton "Publier"
  7. Dans un navigateur saisir l'URL proposée par Thimble https://thimbleprojects.org/nomutilisateur/..........
  8. Votre page web s'affiche, vous pouvez partager son lien car elle est maintenant visible depuis n'importe quel appareil connecté à Internet ! C'est un super pouvoir, qui implique...

Synthèse :

Défi :

Créer et publier une page web présentant votre projet de site...

Remarque concernant les images :

La KhanAcademy n'autorise d'insérer que des liens vers certaines images : Actuellement, nous permettons seulement d'afficher les images qui sont hébergées sur nos serveurs. S'il vous plaît, utilisez le sélecteur d'image pour en sélectionner une..
D'autres éditeurs comme Plunker permettent d'insérer des liens absolus vers n'importe quelle image du web simplement en affectant son adresse web à l'attribut "src" : <img src="http://chemin_vers_l_image..." alt="Texte alternatif de description de l’image" >. Donc, pour insérer des images personnelles, il faut les déposer préalablement sur un serveur web tel que OneDrive, GitHub, 1&1...
L'avantage de Thimble est d'autoriser le dépot de fichiers images directement dans le dossier du projet par un simple glisser/déposer (ou par le menu "Ajouter un fichier au projet"). Il faudra alors utiliser un lien relatif dans le code HTML tel que <img src="monImage.png" alt="Texte alternatif de description de l’image" >. En général, on crée un sous-dossier pour ranger toutes les fichiers images d'un site, le lien relatif devient alors par exemple <img src="img/monImage.png" alt="Texte alternatif de description de l’image" >.

Plus d'information sur la balise img : https://www.w3schools.com/html/html_images.asp

Publication sur le serveur du lycée :

Voici la procédure à suivre pour publier une copie de votre site sur le serveur du lycée qui est hébergé chez 1&1 :

  1. Depuis l'éditeur en ligne Thimble dans le menu choisir "Télécharger les fichiers (.zip)" ;
  2. Décompresser votre fichier .zip (cliquer droit sur le fichier et faire "extraire tout") ;
  3. Renommer le dossier de votre site au format : PrenomNom ;
  4. Démarrer FilleZilla et renseigner l'hôte, l'identifiant, le mot de passe, et le port, avec les informations fournies ;
  5. Transférer le dossier de votre site sur le serveur dans le dossier de votre équipe de projet ;
  6. Dans un navigateur saisir l'URL eleves.2icn.si.lycee.ecmorlaix.fr/NomDossierEquipeProjet/PrenomNom.


Préparation CSS :

Faire la partie "Introduction au CSS" du tutoriel de la KhanAcademy Introduction à HTML/CSS : réaliser des pages Web en rejoignant la classe avec le code fourni.


Activité 2 : avec du style, c'est mieux...

CSS, kesako ?

Application :

L'objectif de cette activité est d'ajouter un peu de style à votre première page web :

  1. Dans l'éditeur en ligne Thimble, cliquer sur le fichier style.css et renommer le monStyle.css ;
  2. Copier puis coller le code ci-dessous en lieu et place du code proposé par défaut par Thimble ;
  3. 							
    /* Ceci est un commentaire en CSS */
    /* Sélecteur par type de balise et nom de couleur */
    body {
      background-color: yellowgreen;
    }
    h1 {
        color: white;
        text-shadow: 2px 2px 4px black;
    }
    /* Sélecteur par classe et couleur hexadécimal */
    .argent {
      color: #68228b;
    }
    /* Sélecteur par identifiant et couleur RGB */
    #toto {
      color: rgb(255,0,0);
    }
    #titi {
      color: rgb(255,255,0);
    }
    #tata {
      color: rgb(255,255,255);
    }
    
    
    /* img {
        border: 3px solid white;
        border-radius: 4px;
        padding: 5px;
        box-shadow:2px 2px 4px black;
        display:block;
        margin: auto;
    } */						
    							
    						
  4. Cliquer sur le fichier index.html et indiquer à l'attribut href= de la balise <link> le nouveau nom du fichier CSS ;
  5. Cliquer sur le bouton pour rafraichir le rendu si besoin ;
  6. Attribuer la classe class="argent" à une balise <p> et une balise <ul> ;
  7. Attribuer les identifiants id="toto", id="titi", id="tata", à trois éléments de liste distincts ;
  8. Placer votre curseur sur le sélecteur img et décommenter son code CSS pour le réactiver en appuyant sur la combinaison de touches ctrl+/.

Synthèse :

Défi :

Créer votre propre style et publier une page web remise en forme pour présenter votre projet de site...

Ressources pour la couleur et pour le CSS :


Préparation HTML n°2 :

Faire la partie "Plus de balises HTML" du tutoriel de la KhanAcademy Introduction à HTML/CSS : réaliser des pages Web en rejoignant la classe avec le code fourni.


Activité 3 : inventaire HTML de balises très utiles...

Les liens hypertextes

La balise <a> est l'élément fondateur de la toile d'araignée, plutôt qu'une lecture linéaire imposée, les hyperliens vont proposer au lecteur de naviguer en un clic, à son gré, d'une page vers un document multimédia, d'un site web à l'autre, ..., avec le risque parfois de s'y perdre...

  1. Télécharger le dossier compressé hyperliens.zip ;
  2. Cliquer droit sur le fichier et faire "extraire tout" ;
  3. Dans le dossier décompressé "hyperliens" ouvrir le fichier "index.html" dans un navigateur ;
  4. Tester la navigation depuis les liens de cette page tout en observant son code en appuyant sur la touche "F12" ou ci-dessous :
<!DOCTYPE html>
<html lang="fr">
<!-- Exemple de code avec des liens hypertextes : page principale -->
  <head>    
    <meta charset="utf-8"><!-- A préciser pour utiliser les caractères accentués... -->
    <title>Les Hyperliens en HTML5 : page 1</title>
   
    <!-- target= fixe un comportement par défaut pour l'ouverture de tous les liens de la page ;
         _blank ouvrira le lien dans un nouvel onglet -->
    <base target="_blank">
  
  </head>

  <body>
    <p id="haut">
        Pour en savoir plus sur les liens, cliquer ici : 
        <!-- Un lien absolu pointe vers un autre site dont l'URL est indiquée à l'attribut href -->
        <a href="https://fr.wikipedia.org/wiki/Hyperlien">Wikipédia</a>
         ou encore là : 
        <!-- Un lien n'est pas obligatoirement porté par un texte, ici c'est une image qui supporte le lien -->
        <a href="https://www.w3schools.com/html/html_links.asp"><img src="img/IconeDeLien.jpg" alt="Image symbolisant un lien hypertexte" height="30" ></a>
    </p>
    <!-- Un lien peut faire autre chose que d'ouvrir une page web, par exemple, envoyer un mail -->
    <a href="mailto:eric.madec@ecmorlaix.fr?cc=adn@ecmorlaix.fr&subject=Hyperliens&body=Bonjour">Pour toute question contacter notre SAV</a>

    <!-- Une liste des liens relatifs qui pointent vers des éléments situés dans le même site que cette page web -->
    <ul>
        <li>
            <!-- A href on attribut le chemin pour accéder au fichier lié depuis la position du fichier lu ;
                la valeur _self attribuée à target force la page liée à s'ouvrir dans le même onglet   -->
            Afficher l'<a href="html/AutrePage.html" target=_self>autre page de ce site ;</a>
        </li>
        <li>
            <!-- La valeur par défaut de target pour cette page étant _blank cette image s'ouvre dans un nouvel onglet -->
            Afficher l'<a href="img/IconeDelien.jpg">image de ce site ;</a>
        </li>
        <li>
            <!-- Par défaut, le document pdf s'affiche dans un autre onglet -->
            Afficher un document de ce site <a href="pdf/UnePageAvecLatex.pdf">UnePageAvecLatex.pdf ;</a>
        </li>
        <li>
            <!-- L'attribut download force le téléchargement du pdf sans qu'il ne s'affiche  -->
            Télécharger un document de ce site <a href="pdf/UnePageAvecLatex.pdf" download>UnePageAvecLatex.pdf ;</a>
        </li>
        <li>
            <!-- Un lien qui renvoie vers un endroit particulier de la page identifié par une marque -->
            Cliquer sur ce <a href="#bas" target=_self>lien</a> pour faire un saut dans cette page ;
        </li>
    </ul>
        <!-- Jusque une série de retours à la ligne pour éloigner l'élément avec marque page hors de l'affichage -->
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <!-- Le navigateur scrolle la page jusqu'à afficher le contenu marqué-->
    <p id="bas">
        Vous êtes maintenant au bout de cette page de test d'hyperliens. Pour revenir au début cliquer <a href="#haut" target=_self>ici</a> ou <a href="http://api.si.lycee.ecmorlaix.fr/APprentissageHtmlCss/index.html#hyperliens">là</a> pour poursuivre tout en en faisant un plus grand saut vers un endroit particulier d'un autre site...
    </p>
  </body>

</html>					
				
<!DOCTYPE html>
<html lang="fr">
<!-- Exemple de code avec des liens hypertextes : page secondaire -->
  <head>    
    <meta charset="utf-8"><!-- A préciser pour utiliser les caractères accentués... -->
    <title>Les Hyperliens en HTML5 : page 2</title>
     
    <!-- target= fixe un comportement par défaut pour l'ouverture de tous les liens de la page ;
         _self ouvrira le lien dans le même onglet -->
    <base target="_self">
  
  </head>

  <body>
    <!-- Un lien relatif qui pointe vers un élément situés dans le même site que cette page web -->
    <a href="../index.html">Retour à la page principale.</a>
    <!-- les ../ indique qu'il faut reculer dans l'arborescence, sortir du dossier pour aller dans le dossier parent -->
    <!-- La valeur par défaut de target pour cette page étant _self la page liée s'ouvre dans le même onglet -->
  </body>

</html>					
						

L'intégration :

La balise <iframe> permet l'intégration d'un contenu web dans votre page. C'est un véritable couteau suisse pour afficher une image, une vidéo, un pdf, ..., un autre site, dans un cadre sur votre page.

Comme de nombreux site d'application en ligne, Youtube propose un code d'intégration de leur contenu (ou ceux de votre chaine) sur votre page tel que :

Source : Script from Scratch | Lyrics : Rebecca Sugar - Love Like You -

Pour obtenir ce code il faut cliquer sur la flèche "partager" et choisir l'onglet "intégrer"

image d'intégration de contenu Youtube
<iframe width="800" height="450" src="https://www.youtube.com/embed/Oi57ZS5hu6M" frameborder="0" allowfullscreen></iframe>

Pour plus d'information et de réglages : https://www.w3schools.com/html/html_youtube.asp

De même OneDrive propose un code d'intégration de document :

Pour voir le code d'incorporation: image d'affichage du code d'intégration de contenu WordOnline



Pour obtenir un code similaire, il faut ouvrir un document de la bibliothèque OneDrive avec l'application OfficeOnline et choisir ... puis </> Incorporer
image d'intégration de contenu WordOnline

On peut donc afficher différents types de contenus web et même surfer dans ce cadre :

Cliquer sur les liens ci-dessous pour changer le contenu intégré ci-dessus.

Voici le code commenté correspondant à cette exemple d'intégration :

						
<!-- Affecter une valeur à l'attribut name, par exemple "monIframe" -->
<iframe width="836" height="1115" src="http://api.si.lycee.ecmorlaix.fr/APprentissageHtmlCss/img/LogoDuLycee.jpg" name="monIframe"></iframe>
<ul>
	<li>
		<!-- Indiquer le nom de l'iframe à l'attribut target pour que le lien s'ouvre dans "monIframe"-->
		<a href="hyperliens/pdf/UnePageAvecLatex.pdf" target="monIframe">Un document pdf sur LaTeX</a>
	</li>
	<li>
		<a href="hyperliens" target="monIframe">La page principale du code exemple sur les liens hypertextes</a>
	</li>
	<li>
		<a href="https://www.w3schools.com/html/html_iframe.asp" target="monIframe">Un site de référence sur la balise iframe</a>
	</li>
	<li>
		<a href="https://www.xul.fr/html5/iframe.php" target="monIframe">Une autre ressource intéressante sur la balise iframe</a>
	</li>
	<li>
		<a href="http://api.si.lycee.ecmorlaix.fr/APprentissageHtmlCss/img/LogoDuLycee.jpg" target="monIframe">Le logo du lycée, l'image par défaut.</a>
	</li>
</ul>
						
					

Les tableaux :

En HTML5, les tableaux doivent exclusivement être utilisés pour présenter des données et non plus pour faire de la mise en page. Cette dernière doit être réalisée avec le CSS3.

Coder et renseigner un tableau en HTML n'est pas une chose facile, sans compter qu'il faudra lui appliquer un style avec le CSS... Le moyen le plus efficace est d'utiliser un générateur de code pour tableau : http://www.tablesgenerator.com/html_tables. Son mode d'emploi est détaillé en bas de sa page...

Les balises multimédia :

Pour intégrer des documents multimédia sans avoir recours à un dépot préalable sur Youtube par exemple, il y a des balises HTML5 spécifiques : https://www.w3schools.com/html/html_media.asp.

page en Travaux page en Travaux

Section en travaux ! Merci de patienter...

page en Travaux

Activité 4 : structuration sémantique du contenu d'une page...

Sémantique ?

Contrairement à des balises génériques comme <div> ou <span> le langage de description HTML dans sa version 5 fait la part belle à des balises qui annoncent clairement ce qu'elles vont contenir comme <time> ou <footer>. Ainsi, en donnant un nom particulier aux conteneurs, on renseigne les moteurs de recherches plus efficacement, et, dans le même temps, on met en forme la page en lui appliquant un style par défaut qui fait sens...

Le texte :

Les figures :

La page :

Défi :

Structurer votre page HTML de façon sémantique...


Préparation CSS n°2

Faire les parties "Propriétés CSS liées au texte", "Mise en page en CSS", "Plus de sélecteurs CSS", du tutoriel de la KhanAcademy Introduction à HTML/CSS : réaliser des pages Web en rejoignant la classe avec le code fourni.


Activité 5 : Stylé comme jamais...

Générateur de style :

Pour coder une feuille de style, il peut être pratique d'utiliser un générateur de CSS tel que :

Défi :

Inventer votre propre feuille de style...


Activité 6 : utiliser des contenus CSS et/ou JavaScript externes...

Intégrer des icones : home

Pour ne pas perdre de temps à copier/coller des images d'icônes informatique, intégrez les très simplement dans votre code HTML en utilisant ceux mis à votre disposition dans des CDN en suivant la méthode décrite ici https://www.w3schools.com/icons/default.asp, ou là :

Intégrer une formule LaTeX :


Autres éditeurs :

En local :

Pour éditer en local, il existe de nombreuses solutions dont certaines sont spécifiques à un système d'exploitation (OS). Sublime Text est une solution multiplateforme OS X, Windows et Linux, simple et puissante.
Sublime Text est un shareware c'est à dire que vous pouvez l'utiliser gratuitement, seul un message apparaîtra de temps à autre vous invitant à acheter une licence.

Organisation d'un dossier de site web, voir l'exemple du dossier hyperliens.zip

Lorsque l'on édite en local, contrairement à Plunker en ligne, on peut, et on a avantage, à utiliser des liens relatifs...

En ligne :

Là aussi, il existe de plus en plus de solutions. Certaines présentent l'avantage par rapport à Plunker de permettre d'inclure des fichiers d'images, des documents pdf, et autres documents multimédias, dans le dossier du projet et donc d'utiliser des liens hypertextes relatifs vers ces documents.
Quelques solutions :


Vérification avant publication...


Ressources :