Aller à : navigation, rechercher

Internetpage

Révision de 19 août 2020 à 22:36 par Dominique.Roszak (discuter | contributions) (LEXIQUE)

(diff) ← Version précédente | Voir la version courante (diff) | Version suivante → (diff)

Description :

Paginternet1.jpg


Nous allons créer ici une page internet basique avec un seul onglet. Pour pouvoir les rendre interactives, il faudra utiliser d’autres langages, PHP, Javascript, …, - langages que nous ne verrons pas ici.

Nous ne pourrons pas publier le site internet en ligne. Nous allons faire comme si, en l’hébergeant en local, c’est-à-dire qu’il ne sera accessible que depuis notre ordinateur. Si par la suite nous souhaitions le montrer au monde entier, nous pourrions laisser notre ordinateur en accès libre en le connectant au web (hum …. A-t-on réellement envie de laisser n’importe qui accéder à notre PC ? Et n’importe quand ? ) ou héberger notre site sur un serveur dédié qui offrira les protections nécessaires.

Nous allons découvrir ensemble deux langages qui servent à produire des pages web : le HTML qui servira à construire la structure de notre page et le CSS qui servira à habillé / mettre en forme cette structure.


Pour cet exercice, nous avons besoin de seulement deux choses : le bloc-notes de votre ordinateur et un navigateur web qui sera Firefox ici.


Partie 1 : Créer vos fichiers

Attention à bien respecter les noms de fichiers et de dossiers donnés : une seule faute de frappe et plus rien ne fonctionne !


1) Créer un dossier pour votre livre : il faut mettre tous les fichiers qui sont indispensables à sa création dans le même dossier. Ces fichiers interagissent ensemble et doivent donc être au même endroit.

2) Créer avec le bloc note un fichier hmtl : il faut absolument le renommer « index.html ».

3) Créer avec le bloc note un fichier css : il faut absolument le renommer « styles.css ».

4) Créer un dossier « images » : c’est là que vous allez mettre vos images que vous voulez insérer dans votre histoire comme l’arrière-plan par exemple.


Pageinternet2.jpg


Partie 2 : La programmation

1) Dans le fichier html : insérer ce programme. Cela permet d’activer le langage html et le clavier pour écrire du texte.

Pageinternet3.jpg

Pageinternet4.jpg

Pageinternet5.jpg

Pageinternet6.jpg

Pageinternet7.jpg

Pageinternet8.jpg

Pageinternet9.jpg

Pageinternet10.jpg

Pageinternet11.jpg

2) Mettre en forme la page HTML dans le CSS :


Pageinternet12.jpg

Pageinternet13.jpg

Pageinternet14.jpg

Pageinternet15.jpg

Pageinternet16.jpg

Pageinternet17.jpg

Pageinternet18.jpg

Pageinternet19.jpg

Pageinternet20.jpg

Pageinternet21.jpg

Pageinternet22.jpg


Partie 3 : Lancer la page internet 

Vous pouvez ainsi lancer le jeu en ouvrant le fichier HTML avec Firefox : clic droit ouvrir avec Firefox.

A1.jpg

Si vous voulez remodifier le fichier, vous faites la même procédure mais en ouvrant avec le bloc-notes.

A2.jpg

Ce programme est configuré spécifiquement pour l’ouvrir avec Firefox. Cela peut changer entre les navigateurs.


LEXIQUE

Les sélecteurs 

En CSS, on utilisera un sélecteur pour cibler les éléments HTML dont on souhaite contrôler le style tels « h1 »,  « strong », « p », « div », …

A3.jpg

Pour bien comprendre

A4.jpg


A4bis.jpg

Les attributs class et id

A5.jpg


la syntaxe

A6.jpg


A7.jpg

HTML : Les balises block et inline

A8.jpg

CSS : Les propriétés display : block, display : inline et display : inline-block

Il peut arriver que l’on ait besoin de changer le comportement de balise inline. Pour leur donner une taille par exemple ou les placer dans un ordre particulier. La propriété display est faite pour cela. Elle permet d’échanger le type de balise, c’est-à-dire de passer block à inline, ou de inline à block.

Voici le détail des valeurs que peut prendre la propriété display :

• inline : les éléments vont se placer les uns à côtés des autres • block : les éléments vont se placer les uns en dessous des autres et pourront être redimensionnés • inline-block : les éléments vont se placer les uns à côté des autres et pourront être aussi redimensionnés • none : les éléments ne seront pas affichés

CSS : Le sélecteur float

Il existe une propriété magique qui permet de faire flotter des éléments à gauche ou à droite dans un autre élément selon notre humeur. Il s’agit de la propriété float (comme flottant !), elle s’applique dans une balise inline. Sans elle, les éléments inline se mettraient les uns à la suite des autres.

Si on utilise des float, les prochains conteneurs vont s’aligner sur la dernière balise inline flottante. Cela peut créer quelques désagréments comme des superpositions de blocs non voulu. Pour pallier à cela, on peut utiliser la propriété clear : both ; sur une balise block entre les deux autres. Cette propriété permet de dégager le bloc concerné des autres blocs à gauche et à droite. 


A9.jpg


CSS : Le modèle de la boîte

Pour chaque élément html on peut donc définir l'espacement qui le séparera des autres éléments : margin et les espacements intérieurs dont il peut bénéficier : padding. Les tailles de ces marges peuvent se déclarer en pixels (px), en em, en %. Tout dépend si l'on veut qu'elles soient fixes ou proportionnelles. On peut détailler les tailles des marges à l'aide des suffixes -top (haut), -right (droite), -bottom (bas), -left (gauche). 

A10.jpg


Kit de survie du développeur HTML et CSS

Les sites sont principalement en anglais mais pas de secret, pour coder, comprendre l'anglais est un avantage. Mais il existe des sites français où vous trouverez de précieuses communautés.

Des réflexes :


A11.jpg

• HTML

◦ En ligne : https://htmlcheatsheet.com/

◦ En pdf : https://downloads.gosquared.com/help_sheets/07/HTML%20Help%20Sheet.pdf

• CSS

https://htmlcheatsheet.com/css/

◦ En pdf : https://cdn.rawgit.com/hostinger/banners/94941d64/tutorials/pdf/CSS-3-Cheatsheet.pdf


Se former encore et toujours ! Le développement web est en constante amélioration pour pallier des problèmes de compatibilité, amener de nouvelles fonctions, faciliter la vie, …

Tout est bon pour se former, c’est vous qui choisissez : un site internet, un podcast, un livre …

D’ailleurs retrouvez notre collection de livres dans le réseau des bibliothèques de Châlons-en-Champagne ainsi que nos formations sur l’extrapole !


Camille CUVILLIER
Ludivine PERARD
Bibliothèques de Châlons-en-Champagne