Cours au département INFO - IUT - UNS

User Tools

Site Tools

Trace: • td4

Sidebar

Index général

S2

S3

LP

Génie Logiciel en LP

Archives

2015_2016:s1:webdoc:td4

This is an old revision of the document!

Table of Contents

TD4 Web

Structure d'une page web html5

Voici un schéma exemple de découpage d'une page HTML5.

Nous nous proposons à présent de créer une section de type blog sur votre site web en utilisant ces balises. Pour cela vous vous aiderez de l'exemple suivant et des informations données dans les rubriques ci après.

A Faire :

  • Voici ci-après la visualisation d'un exemple de ce que vous pourriez obtenir exemple
  • Commencer par créer les sections header, nav, section, aside et footer de votre page. Laissez la partie section vide pour l'instant nous y reviendrons plus tard.
  • Définir la feuille de style pour obtenir une “belle visualisation” qui utilise les éléments de codage donnés ci-après.

Gérer l'affichage des listes

En savoir plus

Par exemple, 

list-style: none;

Ce style supprime les puces et est utilisé pour structurer la barre de navigation.

Vous pourrez par la suite utiliser les informations se trouvant sur http://deptinfo.unice.fr/~renevier/exemplesCSS/ pour construire par exemple la barre de menu.

Placements relatifs

Nous utiliserons le positionnement flottant.

Les CSS sont en effet conçues pour afficher les éléments au sein d'un flux : pour simplifier, les éléments en ligne, ou inline, sont affichés les uns à la suite des autres, tandis que les éléments conteneurs, ou block, amènent un retour à la ligne après leur affichage. Le positionnement flottant permet de sortir un élément du flux, en cela que l'on peut préciser si l'élément ciblé, par exemple une image ou une colonne de contenu, s'affiche à gauche ou à droite. 

float:left; /*Positionnement d'un élément à gauche de la page*/
float:right; /*Positionnement d'un élément à droite de la page*/

Le positionnement flottant s'adapte au contenu et par défaut prend toute la largeur disponible.

Pour restreindre sa largeur il est possible de donner une taille à l'élément: 

width:500px; /*taille fixe en pixels*/
width:50%; /*taille adaptable en pourcentage, 50% de l'espace disponible*/

Vous noterez que dans un positionnement flottant les éléments se positionnent à l'endroit ou il reste de la place disponible ce qui peut provoquer parfois des agencements hasardeux. clear a été conçue pour préciser que cet élément ne sera pas influencé par le comportement d'un flottant. clear permet de libérer l'élément de l'influence du flottant. 

clear: both; /* ou right ou left pour libérer l'influence du float uniquement d'un côté*/

Pour en savoir plus sur les possibilités de positionnement vous pourrez voir :

Introduire une marge

Il est possible de définir des marges en css: - les marges autour de l'élément que l'on positionne : margin - les marges à l'intérieur de l'élément : padding 

   margin:10px; /* marge de 10 pixels tout autour de l'élément*/
   margin:1%; /*marge de 1% tout autour de l'élément*/
   margin: 5px 6px 7px 8px; /*dans l'ordre : top right bottom left*/
   margin-left:10px;
   padding: 10px;
   padding: 5px 6px 7px 8px;

Survol d'un élément

  • Quand on passe la souris sur un article, le fond change de couleur.

http://www.w3schools.com/cssref/sel_hover.asp

Centrer un texte

http://www.w3schools.com/cssref/pr_text_text-align.asp

Création des articles du blog

En utilisant les balises HTML 5 article et aside créer la liste des articles de votre blog.

Iframe

En savoir plus.

Soit le code d'une page contenant une iFrame. 

<iframe src="iframe0.htm" id="iframe_0"></iframe>
<p><a href="http://www.w3schools.com" target="iframe_0">W3Schools.com</a></p>
 
<p><b>Note:</b> Parce que la cible du lien correspond au nom de l'Iframe, le lien s'ouvrira dans l'Iframe.</p>

pour le fichier iframe0.htm, par exemple : 

<body style="background-color:#F5DEB3">
<h1>Cette page sera  visualisée dans l'IFRAME </h1>
</body>

A Faire :

Voici un exemple classique de code, produit par google map : 

<iframe width="640" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.fr/?ie=UTF8&amp;t=h&amp;ll=43.552529,6.987305&amp;spn=0.955471,1.757813&amp;z=9&amp;output=embed"></iframe><br /><small><a href="https://maps.google.fr/?ie=UTF8&amp;t=h&amp;ll=43.552529,6.987305&amp;spn=0.955471,1.757813&amp;z=9&amp;source=embed" style="color:#0000FF;text-align:left">Agrandir le plan</a></small>

Mais ce format n'est pas valide en html5.

A Faire :

  • Corrigez cette définition pour être conforme à la norme html5: vous aurez besoin de seamless : Specifies that the <iframe> should look like it is a part of the containing document.
  • Ajouter une telle carte dans votre site web.

Transformations, Translations, Animations, ...

A Faire :

  • Dans ce qui suit, amusez-vous en animant votre page personnelle en introduisant des animations.

Déplacement au survol de l'image

img:hover {
  -webkit-transform: translate(0, -20px);
 /* -moz-transform: translate(0, -20px);
  -ms-transform: translate(0, -20px);
  -o-transform: translate(0, -20px);
  transform: translate(0, -20px); /* déclenchement de la transition au survol */
*/
}

(source : http://www.alsacreations.com/tuto/lire/1333-osez-html5-et-css3.html)

Changement de couleur d'un lien doucement

a {
	font-size: 3em;
	font-weight: bold;
	color: #789;
	text-decoration: none;
 	-webkit-transition-property: color;
	-webkit-transition-duration: 3s;
 
	/* Pour Firefox */
	/* -moz-transition-property: color;
	-moz-transition-duration: 2s; */
 
	/* … et lorsque ce sera standardisé 
	transition-property: color;
	transition-duration: 1s; */
 
}

(source : http://www.alsacreations.com/xmedia/tuto/exemples/transitions/transition1.htm)

Amusez-vous

http://www.alsacreations.com/xmedia/tuto/exemples/transitions/transition1.htm

Regardez et amusez vous à partir du site ci-après.

Par exemple : 

.move {-webkit-animation: anim2 ease-in-out 3s infinite alternate; }
@-webkit-keyframes anim2
{
   from {left: 0px;   -webkit-transform: scale(1.0) rotate(0deg)   }
   50%  {left: 600px; -webkit-transform: scale(0.5) rotate(10deg)  }
   to   {left: 1000px; -webkit-transform: scale(1.8) rotate(-20deg) }
}

Et un peu plus : http://html5demo.braincracking.org/, caractéristique par caractéristique.

Sprite: section à venir

L'image est ici : http://www.w3schools.com/css/img_navsprites.gif

Le tuto est là : http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_nav

http://www.alsacreations.com/tuto/lire/1068-sprites-css-background-position.html

Je sais répondre à

Je sais répondre à :

  • Comment créer des liens relatifs ou absolus?
  • Comment créer un lien vers une partie précise d'un document?
  • Comment ouvrir un lien dans une nouvelle fenêtre?
  • Comment permettre à l'utilisateur d'envoyer un email en pré-remplissant l'adresse email?
  • Quels sont les types de marge sur lesquelles vous pouvez agir?
  • Comment placer les éléments relativement les uns aux autres?
  • Les selecteurs en CSS, que signifie
    • ol li ?
    • h1, h2 ?
    • h1+h2
    • ol > li
  • Comment noter
    • les descendants de l'identifiant “mainzone”?
    • le frère adjacent à h1 ?
    • toutes les balises?
  • que signifient
    • a:link {color:green;}
    • a:visited {color:green;}
    • a:hover {color:red;}
    • a:active {color:yellow;}
  • Comment forcer l'affichage d'un tableau à respecter les dimensions qu'on lui a donné ?
  • Comment centrer un texte?
  • Comment forcer les cellules d'un tableau à partager des bordures communes? non communes?
  • A quoi sert un identifiant? une classe?
  • A quoi sert l'attribut “float”?
  • Que signifie : 
    li:nth-child(even) { color: green; }

Références

Un très beau site

2015_2016/s1/webdoc/td4.1448024673.txt.gz · Last modified: 2015/11/20 14:04 by gjannon

Page Tools

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 4.0 International
CC Attribution-Noncommercial-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Run on Debian Driven by DokuWiki