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 modèle 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 découvrez 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 peu 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 ou Internet Explorer, 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. Elles 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 travail, c’est dans le fichier index.html que vous devrez 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 répertoire  site-web .

Maintenant copiez-collez le code ci-dessous dans ce fichier et enregistrez le, sans le renommer.

<!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.min.css" />
      <link rel="stylesheet" href="custom.css" />

      <script src="js/jquery.min.js"></script>
      <script src="js/bootstrap.min.js"></script>
 
   </head>
   <body>
	
	<h1> Hello Rodrigues ! </h1>
	
	
	
   </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> permettant un affichage correct sur le navigateur Internet Explorer ;
• des balises <script> qui activent les plugins jQuery de Bootstrap. Ces 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 <body> </body> et remplacer la par le code ci-dessous pour essayer par vous-même.

<body>
	<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>
</body>
	

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.

<body>
	<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>
</body>

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 <body> et <body>.

Ensuite, collez les bouts de codes ci-dessous, les uns en dessous des autres, en suivant les étapes indiquées.

Steep 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 body.

Puis faites un test pour voir le rendu.

Steep 2

Mainenant nous allons ajouter un slider avec trois images. Vous pourez modifier les images par la suite. Toutes les images sont stocké dans votre dossier site-web >> images.

Ensuite, coller ce code, juste en dessous du code précédent.

  <!-- Carousel
 ================================================== -->
	<div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
       
       
       <!-- Slide 1 -->
        <div class="item active">
          <img class="first-slide" src="images/landing-21.jpg" alt="First slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>Example headline.</h1>
              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. </p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
            </div>
          </div>
        </div>
        <!-- END Slide 1 -->
        
         <!-- Slide 2 -->
        <div class="item">
          <img class="second-slide" src="images/landing-6.jpg" alt="Second slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>Another example headline.</h1>
              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
            </div>
          </div>
        </div>
        <!-- END Slide 1 -->
        
         <!-- Slide 3 -->
        <div class="item">
          <img class="third-slide" src="images/blog-2.jpg" alt="Third slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>One more for good measure.</h1>
              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
            </div>
          </div>
        </div>
        <!-- END Slide 1 -->
        
      </div>
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
<!-- /.carousel -->

<img class="first-slide" src="images/landing-21.jpg" alt="First 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.

Sleep 3 - Présentation

Ajoutons maintenant par exemple une présentation du groupe . Collez ce code en dessous de l'autre.

<!-- Marketing messaging and featurettes
 ================================================== -->
	<div id="band" class="container marketing">

      <!-- 3 columns of text below the carousel -->
      <div class="row">
       
        <div class="col-lg-4">
          <img class="img-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-default" href="#" role="button">View details »</a></p>
        </div><!-- /.col-lg-4 -->
        
        <div class="col-lg-4">
          <img class="img-circle" src="images/landing-roi21.jpg" alt="Generic placeholder image" >
          <h2>Heading</h2>
          <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
          <p><a class="btn btn-default" href="#" role="button">View details »</a></p>
        </div><!-- /.col-lg-4 -->
        
        <div class="col-lg-4">
          <img class="img-circle" src="images/landing-oi21.jpg" alt="Generic placeholder image" >
          <h2>Heading</h2>
          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
          <p><a class="btn btn-default" href="#" role="button">View details »</a></p>
        </div><!-- /.col-lg-4 -->
        
      </div><!-- /.row -->  

  </div><!-- /.container -->
<!-- END Marketing messaging and featurettes ======= -->    

Voici le résultat

Steep 4

Nous allons ajouter une section dates de tournées.

<!-- Tour dates
================================================== -->    
 <div id="tour" class="bg-1">
  <div class="container">
   <hr class="featurette-divider">
   
    <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>
    <ul class="list-group">
      <li class="list-group-item">September <span class="label label-danger">Sold Out!</span></li>
      <li class="list-group-item">October <span class="label label-danger">Sold Out!</span></li> 
      <li class="list-group-item">November <span class="badge">3</span></li> 
    </ul>
    
   
    <div class="row text-center">
      
      <div class="col-sm-4">
        <div class="thumbnail">
          <img src="images/nonprofit-6.jpg" alt="Paris" >
          <p><strong>Paris</strong></p>
          <p>Friday 27 November 2015</p>
          <button class="btn" data-toggle="modal" data-target="#myModal">Buy Tickets</button>
        </div>
      </div>
      
      <div class="col-sm-4">
        <div class="thumbnail">
          <img src="images/landing-17.jpg" alt="New York">
          <p><strong>New York</strong></p>
          <p>Saturday 28 November 2015</p>
          <button class="btn" data-toggle="modal" data-target="#myModal">Buy Tickets</button>
        </div>
      </div>
      
      <div class="col-sm-4">
        <div class="thumbnail">
          <img src="images/landing-23.jpg" alt="San Francisco" >
          <p><strong>San Francisco</strong></p>
          <p>Sunday 29 November 2015</p>
          <button class="btn" data-toggle="modal" data-target="#myModal">Buy Tickets</button>
        </div>
      </div>
      
    </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">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">×</button>
          <h4><span class="glyphicon glyphicon-lock"></span> Tickets</h4>
        </div>
        <div class="modal-body">
          <form role="form">
            <div class="form-group">
              <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">
              <label for="usrname"><span class="glyphicon glyphicon-user"></span> Send To</label>
              <input type="text" class="form-control" id="usrname" placeholder="Enter email">
            </div>
              <button type="submit" class="btn btn-block">Pay 
                <span class="glyphicon glyphicon-ok"></span>
              </button>
          </form>
        </div>
        <div class="modal-footer">
          <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>      
<!-- 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.

Steep 5

Ajoutons maintenant une autre simple séction de présentation par exemple.

<!-- FEATURETTES
================================================== --> 
	<div class="container">

      <hr class="featurette-divider">

      <div class="row featurette">
        <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>

      <hr class="featurette-divider">
 
 </div><!-- /.container --> 
<!-- END FEATURETTES ======================== -->   

Voici le résultat

Steep 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">
			<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 ===================== -->      

Steep 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 personnalisation de votre page web Webcup Junior. Voici une liste simple et non-exhaustive.

Editeurs de code en ligne

• https://html5-editor.net

Ce guide est basé sur Bootstrap 3 (v3.3.7)

• https://getbootstrap.com/docs/3.3/components

Vous pouvez également passer à la nouvelle version :

• https://getbootstrap.com/

Quelques guides Bootstrap

• https://www.bitdegree.org/learn/what-is-bootstrap-4/
• https://www.w3schools.com/bootstrap

Le thème que nous avons utilisé.

• https://www.w3schools.com/bootstrap/bootstrap_theme