SciencesAppliquees.com

Il y a 6388 invités et aucun membre en ligne

Vidéos YouTube

Handicap Visuel

Mon handicap ne se voit pas

TP ISN ; HTML5 CSS3 et Javascript

I. But

  • Créer et publier un site internet.
  • Se familiariser avec le HTM5, le CSS3 et le Javascripy.
  • Faire un site responsive (adaptable ou fluide).
  • Comprendre le protocole ftp et http. 

II. Introduction

Le web a bien évolué depuis c'est début :

  • Première page web en 1993 :

 Premier navigateur web NCSA Mosaic.

  • Aujourd'hui :

Le web d'aujourd'hui

Source : http://bradfrost.com/blog/post/this-is-the-web/

  •  et demain :

Internet de demain

Source : http://bradfrost.com/blog/post/this-is-the-web/

Mais ce qui n'a pas changé, c'est la manière de visualiser les pages internet. En effet, les navigateurs utilisent toujours le même langage de description l'HTML.

En savoir plus sur l'histoire d'internet :

https://fr.wikipedia.org/wiki/Histoire_d%27Internet#Chronologie_s.C3.A9lective

 

III. L'HTML c'est quoi? 

 L'html est un langage de description qui utilise des balises avec des attributs(options) pour afficher une page html. 

Pour afficher un titre, un paragraphe et une image, nous utiliserons le code suivant :

<h1 style="color: red ; text-align: center">HTML</h1>
<p style="color:blue">L'Html est un langage de description.</p>
<img src="/logo.jpg" width="100px" title="logo sti2d" />

et nous aurons comme résultat sur un navigateur Internet:

Visualisation sur le navigateur 

Vidéo sur les balises :

Vidéo sur les attributs :

La liste et la description des balises utilisée par HTML version 5 :

https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/memento-des-balises-html

Maintenant,  vous connaissez les balises, vous allez  pouvoir créer une page internet. Mais pour cela, il nous faut un I.D.E  pour écrire le code.

Il en existe beaucoup de gratuit:

  • Aptana Studio
  • Aloha Edito
  • Blue Griffon
  • Mercury Editor;
  • Rendra; Online HTML5 Editor;
  • Maqetta;
  • NetBeans;
  • JetBrains WebStorm;
  • Visual Studio Express 2012 for Web;
  • Komodo Edit;
  • Eclipse;
  • FlashDevelop;
  • Notepad++;
  • ....

Vous verrez dans la partie suivante, pourquoi vous utiliserez Netbeans comme i.d.e pour l'html5. 

Vérifiez que Netbeans est installé. Sinon, téléchargez le sur le site Netbeans.org. 

IV. L'IDE : Netbeans

Pour se lancer dans la conception du site internet, regardez la vidéo ci-dessous :

 

 

Vous avez créé votre projet "sti2d site" avec le fichier index.html. Nous allons réaliser la maquette du site.    

V. La maquette

 Pour créer votre site, il vous faut une maquette. Ils existent des logiciels pour le faire. Mais le plus simple, c'est de la réaliser sur une feuille de papier.

Pour se faire, regardez les plus beau site sur internet en allant sur :

Pour commencer, nous allons voir un peu moins grand pour la maquette :

maquette du site.

Voir la vidéo :

 

 

VI. La sémantique de l'HTML5

Vous allez associer la sémantique html5 à notre maquette.

Allez sur le site suivant : http://www.w3schools.com/html/html5_semantic_elements.asp

Repérez les balises qui correspondent le mieux à nos blocs.

Normalement, vous devriez obtenir les balises suivantes pour les différents blocs :  

 Les balises de la maquette

Compléments :

Balise meta acceptée par google : https://support.google.com/webmasters/answer/79812?hl=fr

VII. Le contenu des blocs

7.1. <header>

Dans la balise header, mettez un titre ou une image en utilisant les balises correspondantes.

7.2. <nav>

Pour créer un menu dans la balise nav, on utilise les balises listes: 

    <ul id="menu">
        <li><a href="/">Home</a></li>
        <li>
            <a href="/" >Blog</a>
            <ul>
                <li><a href="/">Design</a></li>
                <li><a href="/">HTML</a></li>
                <li><a href="/">CSS</a></li>
                <li><a href="/">JavaScript</a></li>
           </ul>
    </li>
    <li>
            <a href="/" >Work</a>
            <ul>
                <li><a href="/">Web Design</a></li>
                <li><a href="/">Typography</a></li>
                <li><a href="/">Front-End</a></li>
            </ul>
    </li>
    <li><a href="/">About</a></li>
</ul>

 

7.3. <div> slider 

Pour le slider, vous utiliserez le code ci-dessous :

 

<div id="captioned-gallery">

   <figure class="slider">
   <figure>
         <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/hobbiton-lake.jpg" alt>
         <figcaption>Hobbiton, New Zealand</figcaption>
   </figure>
   <figure>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/wanaka-drowned-tree.jpg" alt>
      <figcaption>Wanaka, New Zealand</figcaption>
   </figure>
   <figure>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/utah-peak.jpg" alt>
      <figcaption>Utah, United States</figcaption>
   </figure>
   <figure>
   <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/bryce-canyon-utah.jpg" alt>
   <figcaption>Bryce Canyon, Utah, United States</figcaption>
   </figure>
   <figure>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/hobbiton-lake.jpg" alt>
      <figcaption>Hobbiton, New Zealand</figcaption>
   </figure>
   </figure>
</div>

 7.4. <aside> 

Dans la balise des annonces <aside>, vous mettrez le code suivant : 

<h1>Je choisis STI2D Spécialité SIN</h1>

 7.5 <section> et <article>

Pour les articles, vous utiliserez le code suivant :

 <h1>Les métiers de l’informatique</h1>
<article>
<h2>L’informatique de gestion</h2>
<p>La comptabilité, la facturation, la paie puis le suivi des commandes, la gestion des
stocks, l'administration des ressources humaines? Depuis longtemps, l'informatique
permet de traiter automatiquement de nombreuses données indispensables au
fonctionnement des entreprises. </p>
<a href="http://www.univ-tours.fr/servlet/com.univ.collaboratif.utils.LectureFichiergw?ID_FICHIER=1315851945584">Lire la suite.</a>
</article>
<article>
<h2>Titre 3</h2>
<p>Ceci est le paragraphe 2</p>
</article> 

 7.6. <div id=rubriques">

Pour les différentes parties sur le langage HTML, vous utiliserez le code ci-dessous :

<div class="memestyle" id="groupe1">
<h1>Partie 1</h1>
<img src="/images/html5.png" class="imgdiv"/>
<p>L'HTML est un langage informatique utilisé sur l'internet.
Ce langage est utilisé pour créer des pages web.
L'acronyme signifie HyperText Markup Language, ce qui signifie en français
"langage de balisage d'hypertexte".
</p>
</div>
<div class="memestyle" id="groupe2">
<h1>Partie 2</h1>
<p>Le paragraphe sur le CSS</p>
</div>
<div class="memestyle" id="groupe3">
<h1>Partie 3</h1>
<p>Le paragraphe sur le Javascript</p>
</div>

 7.7 <footer>

Pour le pied de page, vous mettrez votre copyright.

copyright© 2015 | réalisé par Prénom NOM

7.8. Résumé sur l'HTML

Le langage html permet de mettre le contenu d'une page (texte, image, vidéo, son, ...) de manière structuré dans des balises typées :

  • <h1>Je suis un titre</h1> 
  • <p>Je suis un paragraphe</p>
  • <img src="/images/image.jpg" alt="Je suis une image" />
  • ...

Donc normalement, vous devriez obtenir la page suivantes :

 

 

Nous avons tout le contenu. Maintenant, if faut la rendre attractive. Le cascade style sheet ou css est là pour cela.

 

VIII. Le style : CSS3

8.1 Comment intégrer le css 

Nous avons plusieurs possibilités pour intégrer du css à notre page html :

 Dans l'entête :

<!DOCTYPE html>
<html>
<head>
<title>Integre css</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
   h1 {
      color: white;
      background-color: red;
      font-weight: bold;
      text-align: center;
   }
</style>
</head>
<body>
   <h1>Mon Titre</h1>
</body>
</html>

   

Avec les 3 méthodes, nous obtiendrons le même résultats :

                            Mon Titre                      

  

comme attribut dans la balise :

<!DOCTYPE html>
<html>
<head>
<title>Integre css</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <h1 style="color: white;
     background-color: red;
    font-weight: bold;
    text-align: center;">Mon Titre</h1>
</body>
</html>

Dans un fichier indépendant : 

<!DOCTYPE html>
<html>
<head>
<title>Integre css</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="momcss.css"></head>
<body>
   <h1>Mon Titre</h1>
</body>
</html>

Le contenu du fichier moncss.css

h1 {
  color: white;
  background-color: red;
  font-weight: bold;
  text-align: center;
}

 Pour travailler avec le css, il faut utiliser la méthode 3. En effet, vous aurez le même code css pour toute vos pages et vous pourrez le modifier plus facilement.

Faire un lien vers le fichier css dans le <head> de la page html :

<link rel="stylesheet" type="text/css" href="moncss.css">

 

8.2. la propriété color 

Pour chacun des blocs, vous associez une couleur dans le fichier css.

Vous pouvez vous aider des sites suivants pour le choix des couleurs :

Aide :

 Aide pour le css

8.3 La propriété display

Les élément d"une page peuvent être afficher les un à la suite des autres (en ligne) par défaut ou les un en dessous des autres (block). C'est la propriété display.  

Voir les explications : https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/le-positionnement-en-css

 Associez dans le css, la propriété correspondant à chaque élément de la page.

8.4. Le css pour le menu

a {
    text-decoration: none;

}



ul {
    //text-align: left;
    display: inline;
    margin: 0;
    padding: 15px 4px 17px 0;
    list-style: none;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);

}

ul li {
    font: bold 12px/18px sans-serif;
    display: inline-block;
    margin-right: -4px;
    position: relative;
    padding: 15px 20px;
    background: #fff;
    cursor: pointer;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}

ul li:hover {
    background: #555;
    color: #fff;
}

ul li a{
    color: #000;
}

ul li:hover a{
    color: #fff;
}

ul li ul {
    padding: 0;
    position: absolute;
    top: 48px;
    left: 0;
    width: 150px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    display: none;
    opacity: 0;
    visibility: hidden;
    -webkit-transiton: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -ms-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    -transition: opacity 0.2s;
}

ul li ul li { 
    background: #555; 
    display: block;
    z-index: 3;
    color: #fff;
    text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover {
    background: #666;
}
ul li:hover ul {
    display: block;
    opacity: 1;
    visibility: visible;
}

 8.5. le css pour la galerie

@keyframes slidy {
    0% { left: 0%; }
    20% { left: 0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: -400%; }
}
figure { 
    margin: 0; background: #101010;
    font-weight: 100;
}
div#captioned-gallery { 
    width: 100%; overflow: hidden; 
}
figure.slider { 
    position: relative; width: 500%;
    font-size: 0; animation: 10s slidy infinite; 
}
figure.slider figure { 
    width: 20%; height: auto;
    display: inline-block;  position: inherit; 
}
figure.slider img { width: 100%; height: auto; }
figure.slider figure figcaption { 
    position: absolute; bottom: 0;
    background: rgba(0,0,0,0.4);
    color: #fff; width: 100%;
    font-size: 2rem; padding: .6rem; 
}

Compléments  sur les galeries :

 http://wowslider.com/fr/css-slideshow-studio-fade.html

 

8.6 css pour centrer une image 

Voila le code pour centrer une image dans un élément.  

.imagecenter {
    width: 30%;
   display: block;
    margin-left: auto;
    margin-right: auto ;
}

 

 

 

 

IX. Un site responsive (adaptable)

9.1. Css pour mobile

Diminuez la taille du navigateur, vous voyer que les blocs sortent de la fenêtre.

Les sites qui s'adaptent à la taille de l'écran s'appelle des sites responsive.

Pour remédier à ce problème, vous utiliserez la propriété media query du css.

Créez un nouveau fichier css, appelé mobiles.css, qui gérera le style pour les mobiles.

Mettez dans l'html  un lien vers ce fichier.

Il faut maintenant transformer tous les éléments de la structure en bloc.

Voir une partie du code du fichier mobiles.css :

@media only screen and (min-width: 320px) and (max-width: 768px) 
{

    html, body{ 
        min-width:90%;
        max-width:90%;
        margin: 5%;
    }

    header, nav
    {
        width: 100%;
        display: block;
        margin: 0px;
        padding: 0px;
        float: none;

    }

}

Faire de même pour tous les éléments de la structure de la page.

 

9.2. Le menu adapté aux mobiles

 Adaptez le menu pour que tous les éléments soit les uns en 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 X. La programmation : Javascript

 

 

 

 

 

XI. Finalisation

 
Vous devez mettre dans les articles les 4 grands secteurs en informatique. Le lien est le suivant : http://www.univ-tours.fr/servlet/com.univ.collaboratif.utils.LectureFichiergw?ID_FICHIER=1315851945584
 
De plus, vos pages devront respecter la norme W3C.
Pour cela, vous devrez aller sur le site :  https://validator.w3.org/unicorn/?ucn_lang=fr
pour faire valider vos pages.
 
Plus il y aura d'erreurs, moins vous aurez de points!
 
Les critères de notation pour votre site sont les suivants :
-Le respect des consignes précédentes : 2 pts;
-La  structure : 3 pts;
-Le design : 2 pts;
-Les liens du menu fonctionnent tous : 2 pts;
-Les articles sur les 4 secteurs en informatique : 2 pts;
-Les 3 rubriques avec description (Html5 , CSS3, Javascript) : 2 pts;
-Le slider avec 5 images en rapport avec la sti2d : 2pts;
-Un joli logo : 1pt;
-Le footer avec votre copyright : 1pt;
-Les annonces : 1pt;
-Validation par le W3C des pages : 4 pts (-0,5 par erreur) ;
 
La note sera remise sur 20.

 

Compléments :

AlsaCréation : Apprendre les standards du web : HTML5, CSS3, JavaScript

 

Définitions :

Référencement, Back-end, Front-end, viewport, responsive, device html, ftp,  i.d.e. 

Écrit par : Richard GAUTHIER
Clics : 7294

En poursuivant votre navigation sur mon site, vous acceptez l’utilisation des Cookies et autres traceurs  pour réaliser des statistiques de visites et enregistrer sur votre machine vos activités pédagogiques. En savoir plus.