Que doit faire mon équipe ?

• Niveau 1 Suivre pas à pas ce guide et essayer de réaliser au minimum une page web html, avec les codes fournis.
• Niveau 2 Suivre pas à pas le guide, réaliser une ou plusieurs pages html. Modifier les couleurs, modifier les polices, les balises div, en bref, adapter le model de la page html pour qu'elle corresponde au sujet.
• Niveau 3 Réaliser une ou plusieurs pages web libres. Avec ou sans le guide.

Le format de la Webcup Junior

À l’instar de sa grande sœur « La Webcup », la Webcup Junior repose sur un format unique et original. Vous devez créer avec votre équipe une page web sur un sujet que vous decouvrez au lancement du concours.

La durée de la compétition, habituellement de 24h non-stop, a été adaptée pour la Webcup Junior : vous avez 5 heures pour réaliser votre travail, avec comme langage de programmation le HTML / HTML 5 et le CSS.

L’objectif de la Webcup Junior est de susciter des vocations, de détecter les futurs talents grâce à la promotion et à l’initiation des langages de programmation.

Ce tutoriel se focalise sur le Framework Bootstrap, il vous permet de rapidement créer au minimum une page web. Des notions de bases du HTML et du CSS ne seront pas abordées. Vous n’avez que peux de temps, nous allons donc commencer directement avec Bootstrap, mais sachez que de bien nombreuses notions pourront vous paraître abstraites voire complètement obscures.

Un Framework c'est quoi ?

En informatique, un framework désigne un ensemble cohérent de composants, qui sert à créer les fondations d'un logiciel, programme ou application. Bootstrap est un framework HTML/CSS qui permet de créer facilement et rapidement des sites et applications web responsives. Il a été conçu pour aider les développeurs dans leurs travaux quotidiens sur les langages que sont le HTML et le CSS.

Pour coder et afficher une page html5 vous aurez au minimum besoin de :

Un ordinateur...

Cela peut sembler bête, pourtant sans un ordinateur, il sera difficile de faire travailler un code sur du papier :-)

Un éditeur de texte...

Un simple éditeur de texte comme le bloc-note de windows peut suffire pour éditer du code HTML, mais certains éditeurs (gratuits ou payants) ont la particularité de colorer le code et d’offrir de nombreuses aides à la saisie et au débogage, ce qui décuplera vos performances en matière de création. 

Un navigateur Internet ...

Pour visualiser le rendu des codes HTML que vous allez créer, il vous faut un navigateur Internet pour afficher votre site web. Par exemple : Google Chrome, Mozilla, Microsoft Edge ou Safari.

Les balises

Les pages HTML ou HTML5 sont remplies de ce qu'on appelle des balises. Celles-ci sont invisibles à l'écran pour vos visiteurs, mais elles permettent au navigateur de comprendre ce qu'il doit afficher. Les balises se repèrent facilement. Elles sont entourées de < > , c'est-à-dire des symboles < et >, comme ceci : <balise> 

À quoi est-ce qu'elles servent ?

Elles indiquent la nature du texte qu'elles encadrent. Elles veulent dire par exemple : <Ceci est le titre de la page>, <Ceci est une image>, <Ceci est un paragraphe de texte>, etc.

On distingue les fermetures des balises avec le symbole /

• <balise> balise ouvrante
• </balise> balise fermante

2 types de balises

On distingue deux types de balises : les balises normales et les balises auto-fermantes.

Balises normales

Une balise normale s'ouvre et se ferme. On a donc une balise ouvrante et une balise fermante. Elle indique au navigateur web les délimitations de l'impact de la balise. Ci-dessous un exemple de balise normale.

<balise>Hello</balise>

Balises auto-fermantes ou orphelines

Ces balises n'ont pas de balise ouvrante ni fermante. Elle servent le plus souvent à insérer un élément autonome à un emplacement précis. C'est pourquoi il n'est pas nécessaire de délimiter le début et la fin de la balise. Ci-après l'exemple d'une balise auto-fermante.

<balise />

Il est important de préciser que le slash (/) et l'espace de fin ne sont pas obligatoires. En effet, on peut écrire une balise auto-fermante sans ces derniers, ça marche également. Cependant, la bonne pratique recommande d'ajouter un slash pour éviter de confondre avec une balise ouvrante. L'espace permet de mieux localiser ces balises dans les fichiers.

Les attributs

Les attributs sont en quelques sortes les options des balises. Ils apportent des informations supplémentaires sur les balises pour offrir davantage de possibilités.

Les attributs se placent toujours de la même manière sur toutes les balises. Ils sont situés au niveau de la balise ouvrante. Une balise peut avoir une infinité d'attributs.

Par contre, on ne retrouve qu'un attribut de même nom par balise. Une balise auto-fermante peut également avoir des attributs. Dans ce cas, ils sont contenus au niveau de la balise auto-fermante. Ci-dessous un exemple d'une balise et d'une balise auto-fermante avec un attribut. Les attributs s'écrivent également toujours en minuscule.

<balise attribut="1">Hello</balise>

<balise attribut="2" />

Le schéma ci-dessous, vous indique l’arborescence de votre dossier qui vous a été donné par un des animateurs de la Webcup Junior. Il est composé de 3 sous-dossiers principaux :

site-web 

Contient votre dossier de travaille, c’est dans le fichier index.html que vous devrais coder votre site web. Le fichier custom.css, vous permet d'ajouter votre propre code css (modifier les couleurs, la police, la taille des titres, etc.

Editeurs de texte

Contient les 2 logiciels vous permettant d’éditer du code, faites votre choix.

Documentions

C’est ce fichier que vous lisez et ses dossiers nécessaires à son exécution. Cliquez sur index.html dans le dossier « Documentation » pour afficher ce tutoriel à tout moment.

Map

"site-web" Votre dossier de travail

Nous allons commencer par créer une simple page html de base qui va afficher un message : Hello Rodrigues !

Une première page Web

Ouvrez avec votre éditeur de texte le fichier index.html se trouvant dans le repertoire  site-web .

Maintenant copier coler le code ci-dessous dans ce fichier et enregistrez le sans le renomer.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <title> Titre de la page affiché dans la barre du navigateur </title>

        <link rel="stylesheet" href="./css/bootstrap.bundle.min.css" />
        <link rel="stylesheet" href="./custom.css" />
  
    </head>
    <body>
  
      <header>

      </header>

      <main>
          <h1> Hello Rodrigues ! </h1>
      </main>

      <footer>

      </footer>	
  
    <script src="./js/bootstrap.bundle.min.js"></script>
    </body>
</html>                                
                                        
    

Il s’agit d’une page Web classique avec quelques éléments spécifiques :

• Deux balises <link>, une vers la feuille de style Bootstrap et une autre vers le fichier custom.css dans lequel vous pouvez ajouter votre code css personalisé, si besoin;
• Une balise <meta name="viewport"> définissant le viewport, c’est-à-dire la surface de la fenêtre du navigateur qui affiche la page. Cela va permettre à la page de s’adapter à la dimension du terminal client ;
• Une balise <meta charset="utf-8"> permettant un affichage correct des accents sur les navigateurs;
• Les balises <header> <main> <footer> sont des balises sémantiques, ils permettent aux navigateurs internet de mieux comprendre la structure (ou l'organisation) du site et aide au référencement. la balise <header> désigne l'en tête du site, la balise <main> représente le contenu principal et la balise <footer> correspond au pied de page. Plus d'informations sur les balises sémantiques ici.
• Une balises <script> qui activent les plugins Bootstrap. Ce plugins sont nécessaires pour animer les composants Bootstrap.

Ouvrez cette page dans votre navigateur Web favori (double clic sur le fichier index.html pour le lancer dans un navigateur). Vous obtenez le résultat ci-dessous.

Le framework Bootstrap repose sur un système de grille. On entend par système de grille, une structure de colonnes et de lignes permettant d'organiser le contenu et la mise en forme de la page web. C'est l'élément essentiel et le cœur même de Bootstrap. Cependant, ce système n'est pas seulement utilisé par ce dernier. On retrouve le même fonctionnement dans d'autres frameworks.

Avant de pouvoir jouir du système de grille, il est primordial et requis de définir le containeur. Il y en a deux types :

• .container
• .container-fluid

Les containeurs sont les composants les plus basiques de Bootstrap. Ils permettent de structurer la grille. En utilisant la classe .container, on centre la grille sur une largeur maximale fixe. Celle-ci est variable suivant la largeur de la page. Tandis qu'en utilisant .container-fluid, on permet à la grille d'occuper 100 % de la largeur de la page. La subtile différence entre les deux est essentielle.

Bootstrap est responsive design. En effet, Bootstrap adapte la mise en forme de la page en fonction de la taille de l'écran. Il permet un affichage optimisé aussi bien sur un écran géant que sur un smartphone. On parle généralement d'affichage desktop, qui correspond à l'affichage sur les ordinateurs de bureau standard, et d'affichage mobile pour les tablettes et smartphones. Il est très facile de simuler un affichage mobile depuis un ordinateur, en redimensionnant tout simplement la fenêtre du navigateur web.

Comment se comportent les éléments quand la taille de la page évolue ? Il y a deux cas de figures : soit les éléments se redimensionnent, soit ils s'empilent. Afin de ne pas rendre les éléments illisibles, Bootstrap permet de les empiler quand la place devient vraiment trop étroite.

La classe .container possède une largeur maximale fixe suivant la largeur de la page web. En effet, Bootstrap réagit suivant plusieurs formats. Bootstrap réagit suivant 5 formats. Le tableau ci-après récapitule les points clés.

Bootstrap  découpe le corps de la page web en une multitude de lignes, on parle alors de row.

Le terme associé est col. Il n'est pas obligatoire de toutes les utiliser individuellement, il est possible de les regrouper pour en former des plus larges. Toutefois, attention à ne pas dépasser 12 colonnes.

Il est grand temps de récapituler en exemple toutes les notions que nous venons d'aborder. Ci-après un exemple qui contient un .container-fluid avec un .row et plusieurs .col.

Éditez le fichier index.html comme indiqué ci-dessous. Dans le fichier , cherchez la balise <main> </main> et remplacer la par le code ci-dessous pour essayer par vous-même.

<main>
	<div class="container">
		<div class="row">
			<div id="main" class="col-md-8">col-md-8</div>
            <div id="sidebar" class="col-md-4">col-md-4</div>
		</div>
	</div>
</main>
	

Dans l'exemple, nous avons donc une ligne avec deux zones, réparties en 2/3 et 1/3. La partie principale, identifiée par #main, occupe donc 8 colonnes, tandis que la plus petite partie, #sidebar, occupe 4 colonnes.

Comme dans chaque ligne, la taille totale des colonnes doit être égale à 12, on peut donc choisir de diviser la surface d’affichage en 12 colonnes de taille 1, ou bien en 3 colonnes de taille 4, ou encore en une colonne de taille 4 et une colonne de taille 8.

Voici un autre exemple avec un placement d'une petite colonne à gauche, une grande au milieu et une petite à droite.

<main>
  <div class="container">
    <div class="row">
        <div id="first_sidebar" class="col-md-3">col-md-3</div>
      <div id="main" class="col-md-6">col-md-6</div>
          <div id="second_sidebar" class="col-md-3">col-md-3</div>
    </div>
  </div>
</main>

On remarque au passage que le total des tailles des colonnes (3 + 6 + 3) est bien égal à 12. Ouvrez cette page dans un navigateur Web. Le placement des colonnes s’adapte à la surface d’affichage disponible.

Voici le rendu.

Nous allons maintenant réalisé une page compléte que vous pourrez personalisé avec vos images, couleurs, police, etc... Voici le rendu finale de votre futur page web.

Comment procéder

Pour commencer nettoyez votre fichier index.html en supprimant tout le contenu entre les balises <main> et <main>.

Ensuite, collez les bouts de codes ci-dessous, un après l'autre, en suivant les étapes indiquées.

Step 1

Nous allons commencer par ajouter une barre de navigation en haut du site. Voici le code. Collez le juste après la balise ouvrante <header> ici </header>.

Puis faites un test pour voir le rendu.

Step 2

Mainenant nous allons ajouter un slider avec trois images. C'est notre première section. Vous pourez modifier les images par la suite. Toutes les images sont stocké dans votre dossier site-web >> images.

Ensuite, collez le code juste après la balise ouvrante <main> ici </main>.

  <!-- Carousel ================================================== -->
<section id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">

    <!-- Indicators -->
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
    <!-- Slide 1 -->
    <div class="carousel-inner">
      <div class="carousel-item active" data-bs-interval="10000">
        <img src="./images/landing-21.jpg" class="d-block w-100" alt="First slide">
        <div class="carousel-caption d-none d-md-block text-white">
          <h5>First slide label</h5>
          <p>Some representative placeholder content for the first slide.</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Link</a></p>
        </div>
      </div>
      <!-- END Slide 1 -->
      
      <!-- Slide 2 -->
      <div class="carousel-item" data-bs-interval="2000">
        <img src="./images/landing-6.jpg" class="d-block w-100" alt="Second slide">
        <div class="carousel-caption d-none d-md-block text-white">
          <h5>Second slide label</h5>
          <p>Some representative placeholder content for the second slide.</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Link</a></p>
        </div>
      </div>
      <!-- END Slide 2 -->

      <!-- Slide 3 -->
      <div class="carousel-item">
        <img src="./images/blog-2.jpg" class="d-block w-100" alt="Third slide">
        <div class="carousel-caption d-none d-md-block text-white">
          <h5>Third slide label</h5>
          <p>Some representative placeholder content for the third slide.</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Link</a></p>
        </div>
      </div>
      <!-- END Slide 3 -->
    </div>

    <!-- Arrows -->
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
</section>
<!-- END carousel -->

<img src="./images/blog-2.jpg" class="d-block w-100" alt="Third slide">   

La source de l'image se trouve dans le dossier images de votre dossier site-web. Modifier le code pour faire pointer le lien vers une autre image.

src="./images/mon-images.jpg"

Voici le rendu.

Step 3 - Présentation

Ajoutons maintenant une présentation du groupe, qui correspond à notre deuxieme <section> . Collez ce code en dessous de l'autre.

<!-- 3 columns of text below the carousel -->
<section class="container marketing">
  <div class="row text-center py-5 my-5">
          
      <div class="col-lg-4">
          <img class="rounded-circle" src="images/landiniog-roi21.jpg" alt="Generic placeholder image" >
          <h2>Heading</h2>
          <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
          <p><a class="btn btn-outline-dark" href="#" role="button">View details »</a></p>
      </div><!-- /.col-lg-4 -->
      
      <div class="col-lg-4">
          <img class="rounded-circle" src="images/landing-roi21.jpg" alt="Generic placeholder image" >
          <h2>Heading</h2>
          <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
          <p><a class="btn btn-outline-dark" href="#" role="button">View details »</a></p>
      </div><!-- /.col-lg-4 -->
      
      <div class="col-lg-4">
          <img class="rounded-circle" src="images/landing-oi21.jpg" alt="Generic placeholder image" >
          <h2>Heading</h2>
          <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
          <p><a class="btn btn-outline-dark" href="#" role="button">View details »</a></p>
      </div><!-- /.col-lg-4 -->

  </div><!-- /.row -->
<section>   

Voici le résultat

Step 4

Nous allons ajouter une troisième <section> "Dates de tournées".

<!-- Tour dates ================================================== -->  
<section class="container marketing">  
  <div id="tour" class="bg-1">
      <div class="container text-dark">
        <hr class="featurette-divider">
        <div class="text-light">
          <h3 class="text-center">TOUR DATES</h3>
          
          <p class="text-center">Lorem ipsum we'll play you some music.<br> Remember to book your tickets!</p>
        </div> 
        <ul class="list-group">
          <li class="list-group-item">September <span class="badge bg-danger">Sold Out!</span></li>
          <li class="list-group-item">October <span class="badge bg-danger">Sold Out!</span></li> 
          <li class="list-group-item">November <span class="badge bg-secondary">3</span></li> 
        </ul>             
      
        <div class="row text-center">
          
          <article class="col-sm-4 mt-3">
            <div class="card">
              <img src="images/nonprofit-6.jpg" alt="Paris" >
              <div class="card-body">
                <p class="card-text"><strong>Paris</strong></p>
                <p class="card-text">Friday 25 September 2022</p>
                <button class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#myModal">Buy Tickets</button>
              </div>
            </div>
          </article>
          
          <article class="col-sm-4 mt-3">
            <div class="card">
              <img src="images/landing-17.jpg" alt="New York">
              <div class="card-body">
                <p class="card-text"><strong>New York</strong></p>
                <p class="card-text">Saturday 26 September 2022</p>
                <button class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#myModal">Buy Tickets</button>
              </div>
            </div>
          </article>
          
          <article class="col-sm-4 mt-3">
            <div class="card">
              <img src="images/landing-23.jpg" alt="San Francisco" >
              <div class="card-body">
                <p class="card-text"><strong>San Francisco</strong></p>
                <p class="card-text">Sunday 27 September 2022</p>
                <button class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#myModal">Buy Tickets</button>
              </div>
            </div>
          </article>
          
        </div>
        
        <hr class="featurette-divider">
      </div>
    
      <!-- Modal
        ================================================== -->  
      <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">
        
          <!-- Modal content-->
          <div class="modal-content text-dark">
            <div class="modal-header">
              <h5 class="modal-title">Tickets</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <form role="form">
                <div class="form-group py-3">
                  <label for="psw"><span class="glyphicon glyphicon-shopping-cart"></span> Tickets, $23 per person</label>
                  <input type="number" class="form-control" id="psw" placeholder="How many?">
                </div>
                <div class="form-group py-3">
                  <label for="usrname"><span class="glyphicon glyphicon-user"></span> Send To</label>
                  <input type="text" class="form-control" id="usrname" placeholder="Enter email">
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="submit" class="btn btn-success">Pay<span class="glyphicon glyphicon-ok"></span>
              </button>
              <button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal">
                <span class="glyphicon glyphicon-remove"></span> Cancel
              </button>
              <p>Need <a href="#">help?</a></p>
            </div>
          </div>
        </div>
      </div>
      <!-- END Modal ======================== -->  
    </div>      
<section>   
<!-- END Tour dates ==================== -->     

Voici le résultat

Avez remarqué une fonctionnalité intéressante du Framework Bootstrap. Les Modals permettent d’afficher du contenu dans une fenêtre qui s’ouvre par-dessus la page et ceci sans la quitter. Quand vous aurez ajouté le code ci-dessus, cliquez sur le bouton « Buy Tickets » pour l’afficher.

Step 5

Ajoutons maintenant une quatrième <section> de présentation.

<!-- FEATURETTES ================================================== -->
<section class="container marketing">  

  <div class="row align-items-end featurette py-5 my-5">
    <div class="col-md-7">
        <h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2>
        <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
    </div>
    <div class="col-md-5">
        <img src="images/blog-3.jpg" alt="Generic placeholder image" class="featurette-image img-responsive center-block" data-src="holder.js/500x500/auto">
    </div>
  </div>    
<section>  
<!-- END FEATURETTES ======================== -->    

Voici le résultat

Step 6

Avant dernière étape, nous allons ajouter une <section> appelée « Jumbotron » avec un bouton Appel à l'action

<!-- Album example ================================================== -->              
<section class="jumbotron text-center bg-light py-5 my-5">
    <div id="contact" class="container">
      <h1 class="jumbotron-heading">Album example</h1>
      <p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.</p>
      <p>
          <a href="#" class="btn btn-primary my-2">Main call to action</a>
          <a href="#" class="btn btn-secondary my-2">Secondary action</a>
      </p>
    </div>
</section>                
<!-- END Album example ===================== -->         

Step 7

Dernière étapes, nous allons ajouter le pied de page (footer), visible en bas de l'image ci-dessus.

Boostrap est populaire, vous pourrez trouver sur le web de nombreux bouts de codes (Snippets : Un Snippet est un terme de programmation informatique désignant une petite portion réutilisable de code source ou de texte ) vous permettant d'aller encore plus loin dans la personalisation de votre page web Webcup Junior. Voici une liste simple et non exaustive.

Editeurs de code en ligne

• https://html5-editor.net

Ce guide est basé sur Bootstrap 5 (v5.2)

• https://getbootstrap.com/docs/5.2

Vous pouvez également passer à la nouvelle version :

• https://getbootstrap.com/

Quelques guides Bootstrap

• https://www.w3schools.com/bootstrap5/
• https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/

Les exemples que nous avons utilisé.

• https://getbootstrap.com/docs/5.2/examples/