Créer des menus simples en CSS Dans ce tutoriel, nous allons apprendre à réaliser des menus "simples" (sans arborescence: tous les liens sont au même niveau) à l'aide des feuilles de style. Sommaire Le code HTML Comme toujours, le choix des balises html doit être guidé par la nature du contenu qu'on souhaite y placer. Dans le cas d'un menu, la question est un peu délicate, dans la mesure où il n'existe pas de balise spécifique pour désigner un ensemble de liens. Un point de vue largement répandu consiste à considérer le menu de navigation comme une liste de liens, et donc à utiliser la balise correspondant aux listes non ordonnées, <ul>. Par exemple, pour un menu comportant 5 items: <ul id="navigation"><li><a href="#" title="aller à la section 1">item1</a></li><li><a href="#" title="aller à la section 2">item2</a></li><li><a href="#" title="aller à la section 3">item3</a></li><li><a href="#" title="aller à la section 4">item4</a></li><li><a href="#" title="aller à la section 5">item5</a></li></ul> Voir le résultat
Les classes de style (CSS) Septembre 2017 Les classes et les ID Les classes Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises. La définition des classes est aussi simple que celles des styles. Où « Nom-de-la-classe » représente le nom donné à la classe. Appel d'une classe Pour appeler une classe dans le code HTML, il suffit de rajouter un attribut class à la balise : Soit la classe Rouge appliquée à la balise b : L'appel à cette classe dans le code se fera de la façon suivante : <B class="Rouge"> Texte à mettre en rouge et en gras </B> Les classes universelles Il est possible de ne pas préciser de balise, auquel cas la classe pourra être utilisée dans n'importe quelle balise pour laquelle le style sélectionné a un sens ! Soit la classe « important » suivante : L'appel de cette classe peut être fait à partir de n'importe quel élément HTML pour lequel la définition est valide : <h1 class="important">Attention ceci est un avertissement</h1><i class="important">(prière d'en tenir compte)</i>
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 : HTML CSS 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
Feuille de style CSS de base par l'exemple - CSS Débutants Une feuille de style CSS externe peut se faire avec le simple bloc-note, et il est d'usage de lui faire porter l'extension .css (style.css par exemple). On la liera ensuite à la page html à l'aide d'un link placé dans l'en-tête de la page (pas de panique ! la méthode est expliquée en dessous). Mais on peut aussi déclarer les styles dans l'en-tête de la page, ou au sein des balises elles-mêmes. Partons donc à la découverte d'une première feuille de style... Sommaire Structure de base Pour chaque déclaration, la structure est toujours la même : Le sélecteur, c'est la balise (X)HTML (body ; h1 ; p, etc.), l'identifiant (id) ou la classe (class) ;La propriété, c'est l'attribut qu'on veut appliquer (font ; background ; margin ; etc.) Exemple de feuille de style Fonctionne avec : Tous les navigateurs graphiques Propriétés utilisées : background-color color font-family ; font-size padding text-align ; text-decoration Cet exemple de feuille de style (encore une fois, de base) donnera une page : Code CSS
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.
Mettre en place le CSS Ce que je vous ai montré jusqu'ici a quand même un défaut : cela implique par exemple que TOUS les paragraphes possèdent la même présentation (ici, ils seront donc tous écrits en bleu). Comment faire pour que certains paragraphes seulement soient écrits d'une manière différente ? On pourrait placer le code CSS dans un attributstylesur la balise que l'on vise (c'est la technique que je vous ai présentée un peu plus tôt) mais, comme je vous l'ai dit, ce n'est pas recommandé (il vaut mieux utiliser un fichier CSS externe). Pour résoudre le problème, on peut utiliser ces attributs spéciaux qui fonctionnent sur toutes les balises : l'attributclass;l'attributid. Que les choses soient claires dès le début : les attributsclassetidsont quasiment identiques. Comme je viens de vous le dire, c'est un attribut que l'on peut mettre sur n'importe quelle balise, aussi bien titre que paragraphe, image, etc. Oui mais que met-on comme valeur à l'attributclass? <! Quel intérêt ? Les balises universelles
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. Le texte sur les boutons sera affiché dans la langue du navigateur du visiteur. ATTENTION de toujours utiliser des minuscules, l’erreur la plus fréquente… Syntaxealert("message") ou alert(variable) Message : une chaîne de caractères ou encore une variable. Exemples : alert("erreur!") ou var temp = "Erreur!"
CSS Débutant : cours et tutoriels sur les feuilles de style CSS 1,2 et 3 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. Mais il ne s'agissait que d'un subterfuge : on masque une balise et on fait apparaitre l'autre. 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.
Débuter avec HTML + CSS Ce court tutoriel est destiné à ceux qui commencent à utiliser CSS et n'ont jamais écrit de feuille de style CSS. Il n'explique pas CSS en profondeur. Il explique comment créer un fichier HTML, un fichier CSS et comment les faire fonctionner ensemble. Après cela, vous pourrez lire d'autres tutoriels afin d'ajouter plus de caractéristiques à vos fichiers HTML et CSS. Ou bien vous pouvez utiliser un éditeur HTML ou CSS afin de mettre en place des sites complexes. A la fin de ce tutoriel, vous aurez fait un fichier HTML qui ressemble à cela: Page HTML résultante, couleurs et disposition effectuées avec CSS. Notez que je ne prétends pas que c'est joli :) Voici un exemple de section optionelle. Etape 1: Le langage HTML Pour ce tutoriel, je vous recommande d'utiliser des outils simples comme Blocnote (Windows), TextEdit (Mac) ou KEdit (KDE). <! En fait, vous n'avez pas à le taper: vous pouvez le copier et coller depuis cette page Web dans votre éditeur. Etape 2: Ajouter de la couleur <! En savoir plus
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. Au-delà de ce critère, les groupes de travail qui ont élaboré HTML5 ont su analyser les usages courants et s'adapter aux tendances du web avec (entre autres) les nouvelles façons de trier l'information sur une page web. Liste récapitulative des éléments de section HTML5 Un cas particulier : Internet Explorer <9 Exemples de documents
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 ! Le sujet est certes un peu tordu, mais vous avez largement assez de connaissances pour pouvoir le réaliser. 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'], var units = number % 10, tens = (number % 100 - units) / 10, hundreds = (number % 1000 - number % 100) / 100; } else {