Objectifs du cours : quelques « langages » pour Internet

Attention à la casse

J’attire seulement votre attention sur la notion de casse, c’est-à-dire le respect des majuscules et minuscules. En effet, lorsque vous vous trouvez sous système utilisateur (MacOs ou Windows), le fait que vous fassiez appel à un fichier nommé « Bonjour.html » par « bonjour.html » ne pose a priori pas de problème. Tant que vous êtes sous système utilisateur.
Mais sur Internet, la plupart des serveurs – là où seront stockées vos pages personnelles – fonctionnent sous UNIX ou dérivé. Or Unix est sensible à la casse, c’est-à-dire que si vous appelez le fichier « Bonjour.html » en tapant « bonjour.html », vous n’obtiendrez pas de réponse, ou un message d’erreur. Sous Unix, il s’agit de deux fichiers distincts.
En guise de conseil, essayez de n’utiliser que des minuscules dans vos noms de fichier (ou que des majuscules), ce qui vous permettra d’éviter ce risque d’erreur. Evitez de même les accents et les espaces dans les noms de fichiers
Technologies Internet Introduction 12 D. Mailliet
MIAGE 2ème année

Html

Le langage HTML (Hyper Text Markup Language) est un langage de balisage, c’est à dire qu’il est composé de ce qu’on appelle des balises, balises qui sont ensuite interprétées par le navigateur, celui-ci produit la mise en forme du document. C’est-à-dire, par exemple, Gras, italique, centré, formulaires, images, etc…
Voici un exemple de balise :
<head> xxxxx</ head >
Les balises sont écrites entre < et >. Elles vont généralement par paire, d’abord la balise ouvrante, marquant le début de l’action, et la balise fermante, marquant la fin de l’action. Celle ci est reconnaissable par le / placé juste après le <.
Certaines balises n’ont pas de balise de fermeture par exemple <br> qui permet le passage à la ligne, n’a aucune raison d’avoir une fermeture. Une bonne idée concite à adopter la syntaxe de XML, c’est-à-dire à mettre un antislash à la fin : <br />
Les balises peuvent avoir des attributs qui se place également à l’intérieur des < >, comme ceci :
<balise attribut1= »  » attribut2= » « > xxx </ balise >
La valeur des attributs peut être avec ou sans guillemets simple ou double. On mettera toujours les valeurs entre guillemets, même si ça n’et pas obligatoire. De même, il est une habitude de mettre le nom des balises en majuscule. Si l’on veut une compatibilité XML, c’est à éviter. (à vérifier)

Structure d’un document HTML

Dans un document HTML, certaines balises sont indispensables, elles forment la structure du document.
Html est très laxiste, Si certaines balises sont absentes ou non fermée ou même croisées, le document produit risque d’être correct. Mais il vaut mieux respecter les règles suivantes
La première balise est <HTML>. Elle ouvre tous les documents. </HTML> ferme le document.
La deuxième balise est <HEAD>. Théoriquement elle n’est pas obligatoire, une page HTML peut parfaitement fonctionner sans la balise HEAD. Mais en pratique elle se révèle indispensable. Elle contient la plupart des informations sur la page. Ces informations sont défini grâce à des sous balises de HEAD, de la manière suivante :
<HEAD>
< BALISE_de_TETE></ BALISE_de_TETE> </HEAD>
Voici les principales balises (_de_tête) :
<TITLE> </TITLE> : Permet d’indiquer le titre de la page, celui qui s’affiche dans la page du navigateur .
<SCRIPT> </SCRIPT> : Permet de placer du script qui pourra être exécuter dans la page , Javascript ou VBscript par exemple.
<META> : Donne des indications sur la page qui pourront être récupérées par les robots des moteurs de recherche, et pourront aussi fournir des infos aux personnes qui liront votre code.
La troisième balise formant la structure d’un document HTML est la balise <BODY>.
C’est dans cette balise que va se placer tous le corps de la page html, c’est a dire tous son contenu. Tous le texte inscrit entre les balises <BODY> et </BODY> sera affiché à l’écran.
En résumé, voici un exemple dans lequel, il faut remplacer les … par du texte et les exemples de couleurs (#XXXXXX) par d’autres valeurs. :
<html>
<head>
<title>…</ title>
< meta name = »author » content = »… » />
< meta name = »keywords » content = »… » />
< meta name = »lang » content = »… » /> <meta name= »description » content= »… » />

</head>
<body bgcolor= »#FFFFFF » link= »#FF3300″ alink= »#FFFFFF » vlink= »#660099″>

</body>
</html>

Le laxisme du HTML

Le balisage ouvrant/fermant en html correspond au parenthésage mathématique et aux structures de contrôle des langages informatique. Autrement dit , il ne faut pas croiser les balises. Il faut éviter d’oublier de fermer une balise ou de les fermer dans le désordre. Cependant une page mal construite peut très bien s’afficher correctement,
Mais la maintenance (mise à jour) peut s’avérer périlleuse. Il faut éviter à tout prix d’écrire par (contre-)exemple
<html>
<head>
<title>Maivais exemple
<body bgcolor= »#FFFFFF » link= »#FF3300″ alink= »#FFFFFF » vlink= »#660099″> </head></ title>
Il ne faut surtout pas suivre cet exemple
</body>
</html>

Présentation d’un document HTML

Comme dans les langages de programmation, les espaces, tabulations et passage à la ligne (même multiples) n’ont aucun effet sur la présentation. Que l’on mette 1 ou 20 espaces entre 2 mots, ils apparaîtront toujours séparés d’un seul, il en va de même si l’on passe 1 ligne entre 2 mots, ils apparaîtront séparés d’un espace.
Pour obtenir plusieurs espaces, il faut mettre plusieurs &nbsp ; pour obtenir plusieurs sauts de ligne, il faut mettre plusieurs <br />
Il convient donc , comme en programmation, pour améliorer la clareté, de bien indenter les lignes de code.

Indentation ou pas

Remarque : Si l’indentation procure incontestablement une facilité de lecture du code, les multiples espaces « inutiles » prennent du temps de transmission sur le réseau.
Il n’est donc pas inutile de disposer de 2 versions des pages html une pour le développement et une pour l’utilisation du site. Il est facile d’écrire une « moulinette » dans un langage de programmation quelconque qui suprime les espaces, tabulation et sauts de ligne non obligatoires.

Liste des balises et des attributs

Le tableau ci-dessous représente la liste des balises classée par ordre alphabétique. La balise se situe dans la colonne la plus à gauche. Et la description correspond à la première ligne d’entête du tableau. Lorsque la cellule la plus à gauche est vide, il s’agit d’une description des attributs de la balise située au dessus. Et la description correspond à la deuxième ligne d’entête du tableau

I. Introduction
A. Logiciels utilisés
1. Editeur de Textes
2. Navigateur
3. Serveur http
4. Interprète Php
5. Serveur de base de données MySQL
6. Installation des logiciels
a) Sous Windows
b) Sous Linux
B. Objectifs du cours : quelques « langages » pour Internet
1. Seul le client est utile
L’ HyperText Markup Language
a) Les feuilles de style
b) Le javascript
c) Les applets java
2. serveur(s) nécessaire(s)
a) Le Php
b) Php – MySql
C. But de l’enseignement
D. Clients et Serveurs
1. Exemple
2. Client seul.
3. Client et serveur
Bonjour
4. Fonctionnement Résultat
E. Javascript ou Php ?
1. Exemple 1
2. Exemple 2
3. Exemple 3
II. Attention à la casse
III. Html
A. Structure d’un document HTML
B. Le laxisme du HTML
C. Présentation d’un document HTML
D. Indentation ou pas
E. Liste des balises et des attributs
F. Du style dans le texte
1. Les titres
2. Les différents styles de caractères
3. Styles logiques
G. Formater le texte
1. Les retours à la ligne : <br> ou <p>  avec un retour à la ligne et une ligne vierge
2. Aligner le texte  Votre paragraphe est au centre
3. Mettre du texte en retrait
4. Le texte préformaté
5. Césure ou pas de césure
6. Les traits de séparation
7. Les caractères spéciaux
8. Indice et exposant
H. Afficher des images
1. Les formats de fichiers graphiques
2. Affichage simple d’une image
3. Les attributs de <IMG>
4. Une image pour le fond de votre page
I. Les Liens HyperTextes
1. Créer un lien hypertexte – <A>
2. Utiliser les ancres – <A name= »… »>
a) Insérer une ancre
b) Pointer vers une ancre
J. Les Listes
1. Listes à puces et listes numérotées
a) Les listes à puces – <UL>
b) Les listes numérotées – <OL>
1. Mon premier élément de liste
2. Mon deuxième élément de liste
2. Les listes descriptives – <DL>
3. Les listes <DIR> et <MENU>
4. Mêler les listes
K. Couleurs et Polices
1. Définition des couleurs en HMTL
a) Les couleurs standard
b) Les codes hexadécimaux
2. Les éléments de la page
3. Les polices de caractères : La balise <FONT>
a) Changer la taille par défaut
L. Les Tableaux
1. Définir un tableau – <TABLE>
2. Les cellules d’un tableau
a) Les titres
b) Les cellules
3. Exemple de code pour un tableau
M. Les frames
1. Le fichier <FRAMESET>
2. Les attributs pour le fichier <FRAMESET>
3. Des fichiers HTML et des frames
4. Exemple de code pour un fichier frameset
N. Formulaires de saisie
IV. Javascript
A. Généralités
B. Erreur dans un javascript
1. Erreur simple
2. ErreurGrave
C. Commentaires
D. Constantes, Variables, types
1. Variables
2. Constantes
3. La valeur sans valeur
4. opérateurs divers
a) Opérateurs d’assignement
b) Opérateurs de comparaison
c) Opérateurs ‘affectation conditionnelle
E. Types
1. Généralités
2. Booléens
3. Les nombres
4. Les chaines
5. Les tableaux
6. Les dates
F. Les structures de contrôle
1. Conditionnelle
2. Boucles
3. Rupture et continuité de boucle
G. Les fonctions
1. Passage des arguments par valeur
2. Passage des arguments par adresse (par variable)
3. Arité variable
H. Les procédures
I. Portée des variables
J. Classes et Objets
K. Entrées/Sorties
1. sorties
2. entrées
L. Fichiers
M. Inclusion de fichiers
N. Evénements : traitement
O. Evénements : simulation
P. Objets prédéfinis
1. Exemple très important
2. Les tableaux prédéfinis
3. Exemple : communication entre frames
4. Exercice :
V. Feuilles de style
A. La création de style
B. Les feuilles de style externes
1. Le fichier externe
2. L’intégration du fichier externe
C. Les propriétés de style
1. Les propriétés de police
2. Les propriétés de texte
3. Les propriétés d’arrière-plan
4. Les propriétés de positionnement
5. Les propriétés d’encadrement
6. Exemples
VI. Applet java
A. Généralités
B. Syntaxe
C. Passage de paramètres
VII. Php
A. Généralités
B. Commentaires
C. Constantes, Variables, types
1. variables
2. Nommage dynamique des variables
3. Constantes
4. Références
5. La valeur sans valeur
6. opérateurs divers
7. Variables prédéfinies
D. Types
1. Booléens
2. Les nombres
3. Les chaines:
4. Les tableaux:
E. Les structures de contrôle
1. Conditionnelle
2. Boucles
3. Rupture et continuité de boucle
F. Les fonctions
1. Passage des arguments se fait par valeur
2. Passage des arguments se fait par adresse (par variable)
G. Les procédures
H. Portée des variables
I. Classes et Objets
J. Entrées/Sorties
1. sorties
2. entrées
K. Fichiers
Et pour la lecture
L. Inclusion de fichiers
VIII. PhpMyAdmin
On voit ci-dessus les différentes bases que l’on peut développer en cliquant sur le + et découvrir les tables qui la compose
CREATE DATABASE `calrep`;
Soit par un copier/coller des lignes de ess.sql
IX. Interfaçage PhP/MySql

Cours gratuitTélécharger le cours complet

Télécharger aussi :

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *