Div et CSS : une mise en page rapide et facile
Tout au long de cet exercice, nous allons utiliser deux fichiers : index.html : contiendra tout notre code HTML. style_div.css : contiendra toutes les informations relatives au positionnement de nos différents blocs. Pour inclure notre CSS dans notre page HTML, rien de plus simple, il nous suffit d'insérer le code suivant entre les balises <head> et </head> : Définissons tout d'abord les propriétés de base de nos blocs. Dans notre fichier CSS : Ce petit bout de code définit simplement que pour tous les éléments de type div, le texte sera centré (text-align). Nous allons commencer par créer un modèle de page tout bête, comprenant un bandeau, une zone de contenu, et un pied de page Nous alons définir (parfaitement arbitrairement) des couleurs (uniquement pour bien se représenter les positions) ainsi que les dimensions de nos différents blocs : Bandeau : 600 x 50 px - couleur : #00CCFF Contenu : 600 x 400 px - couleur : #FFCC00 Pied de page : 600 x 50 px - couleur : #33FF99 Mais, mais, mais !!!
Exemple de menu fixe en CSS
solution avec "padding-top" Cette mise en page illustre la façon d'obtenir un menu fixe en haut, avec un bloc défilant dans la partie basse et ce, quel que soit le navigateur affichant la page. Quand on scinde une page en plusieurs blocs dont les défilements verticaux (ascenseur de droite) sont indépendants, on parle de "pseudo-frames". Cette page a été testée et s'affiche correctement sur :
Identité et citoyenneté numérique — Enseigner avec le numérique
Le site web Pédagogie numérique en action est un espace qui « a pour objet de faciliter les initiatives mises en œuvre pour assurer la réussite du virage au 21e siècle » notamment dans le domaine de l’éducation à l’ère numérique. Il s’adresse plus particulièrement aux écoles et aux conseils scolaires de langue française de l’Ontario. Outre les documents de fondement et autres écrits de référence, le site met tout particulièrement en valeur le jeu éducatif iCN, identité et citoyenneté numérique. Disponible en version primaire (élèves de la 3e à la 6e année) et en version secondaire (élèves de la 7e à la 10e année), cet outil ludique et éducatif interactif s'organise en 7 modules ayant trait au monde du numérique : données, identité, littératie, transactions, éthique, dépendance et discrimination. En complément, trois séries d’activités pédagogiques accompagnant ces 2 modules iCN sont mis à la disposition sur le site TacTIC du CFORP. Sources Réseaux et médias sociaux
Ouvrir une URL en JavaScript avec l’objet window | Développement Web
I. Présentation Vous connaissez surement les liens HTML grâce à la balise <A> et son attribut « HREF » où l’on indique l’URL du lien à suivre en cas de clique sur l’élément <A>. Cependant, grâce au JavaScript il est possible d’effectuer une redirection de la page en cours vers une autre page ou de l’ouverture d’une page dans une nouvelle fenêtre, selon un événement précis (clique sur une image, passage de la souris sur une image,…). Pour cela il faut utiliser l’attribut « href » du sous-objet « location », qui est un objet de « window », qui permet de rediriger l’utilisateur vers la page indiquée en valeur de l’attribut, ou bien alors utiliser le sous-objet « open » de l’objet « window » qui permet d’ouvrir l’URL passée en paramètre dans une nouvelle fenêtre de navigateur. II. Comme je l’ai dis ci-dessus, window.location.href permet une redirection de la page en cours vers l’URL précisée en paramètre, cela s’écrit de la manière suivante : window.location.href=" III.
Boîtes de dialogue en Javascript - Avec les méthodes ALERT, CONFIRM et PROMPT - Trucsweb.com
· Niveau : DÉBUTANT· Compatibilité : Tous les navigateurs La plupart des langages de programmation utilisent les boîtes de messages du système et la programmation Web n’y échappe pas. Il y a 3 méthodes, l’alerte ou " Alert dialog box " qui permet d’afficher un simple message avec un bouton fermé, la confirmation ou " Confirm dialog box " qui retourne une valeur booléenne selon un choix " oui ou non " du visiteur et finalement la méthode " Prompt " qui permet la saisie et le retour d’une valeur entrée par le visiteur. Noter que l’apparence des boîtes de dialogue change selon le système d’exploitation et le navigateur. Il n’est pas possible de changer le texte des boutons. ATTENTION de toujours utiliser des minuscules, l’erreur la plus fréquente… " Alert dialog box "Afficher un message dynamique dans une boîte de dialogue avec un bouton " fermer " est souvent utilisé pour souhaiter la bienvenue aux visiteurs ou encore indiquer une erreur dans la saisie d’un formulaire. Exemples : ou
js-Afficher
NOTE : je pars du principe que vous avez déjà vu les activités Python 1-2-3-4 au moins. Certains concepts sont donc abordés assez rapidement. De la même façon, inutile de lire ce qui suit si vous n'avez pas de connaissances sur html et css. REMARQUE : la modification du texte peut se faire à travers du CSS pur comme nous l'avons précédemment dans les activités sur HTML/CSS. 1 - Intégration du javascript dans le code HTML Pour programmer en Javascript, il vous faudra comme pour html et css un simple éditeur de texte. Notepad++ va ainsi être très utile, mais pas indispensable. Pour intégrer votre code javascript, nous allons utiliser la balise <script>. Voilà un code HTML sur lequel nous allons placer notre script js. <title>Intégration js</title> <h1>Premiers test avec javascript</h1> <p>Premier paragraphe de la balise section. <p>Voilà le footer</p> Nous allons utiliser la deuxième possibilté ici. Nous allons donc créer un fichier que nous allons placer dans le même répertoire que le fichier .
HTML5 : Nouveaux éléments de section, article, header, footer, aside, nav
Les éléments de section HTML5, une nouvelle façon de penser Les éléments de section (section, article, nav, aside, header, footer) segmentent des portions du document ou de l'application web, qui possèdent une valeur sémantique particulière ; contrairement à des éléments génériques comme span ou div qui ont un rôle totalement neutre, et ne servent qu'à regrouper d'autres éléments HTML pour leur affecter un style CSS commun, voire pour interagir avec eux via le DOM... Il ne s'agit donc pas de nouveaux éléments avec des noms génériques : c'est bien plus que ça ! HTML5 inclut la majorité des éléments HTML4 pour assurer une rétro-compatibilité avec les navigateurs. Par exemple, une majorité des sites contiennent des informations supplémentaires relatives ou non au contenu principal (que l'on nomme sidebar ou barre latérale). Liste récapitulative des éléments de section HTML5 Un cas particulier : Internet Explorer <9 Exemples de documents Exemple minimal L'en-tête <header> Le <footer> Remarque
TP : convertir un nombre en toutes lettres
Allez hop ! C'est fini ! Nous espérons que vous avez réussi à faire quelque chose d'intéressant, normalement vous en êtes parfaitement capables ! Toutefois, si vous avez bloqué alors que vous connaissiez très bien ce que l'on a appris dans les chapitres précédents, ne vous inquiétez pas : la programmation est un domaine où la logique règne en maîtresse (bon, d'accord, pas tout le temps !) Le corrigé complet Voici donc la correction. function num2Letters(number) { if (isNaN(number) || number < 0 || 999 < number) { return 'Veuillez entrer un nombre entier compris entre 0 et 999 var units2Letters = ['', 'un', 'deux', 'trois', 'quatre', 'cinq', 'six', 'sept', 'huit', 'neuf', 'dix', 'onze', 'douze', 'treize', 'quatorze', 'quinze', 'seize', 'dix-sept', 'dix-huit', 'dix-neuf'], tens2Letters = ['', 'dix', 'vingt', 'trente', 'quarante', 'cinquante', 'soixante', 'soixante', 'quatre-vingt', 'quatre-vingt']; var units = number % 10, tens = (number % 100 - units) / 10, var unitsOut, tensOut, hundredsOut;
