tableaux - CI
publicité
Le langage HTML
Hyper Text Markup Language
Préambule
HTML: Langage structuré utilisé pour le développement
des pages Web
Langage interprété: interprété par le navigateur de
l’internaute
Il suffit d’un simple éditeur de texte pour développer une
page
Balises
Le format HTML est défini par des balises (tags) délimités
par les signes inférieur "<" et supérieur ">" et marchant par
paires. Pour une balise d'ouverture, il correspond toujours
une balise de fermeture, définissant une zone interprétée
par le navigateur. La balise de fermeture est identique à
celle d'ouverture, si ce n'est qu'elle est précédée d'un slach
"/".
Une page web est composée d’éléments (textes, images,
liens hypertextes, …) à afficher selon une présentation
définie par les balises
Balises
Les balises peuvent être écrites en minuscules ou
majuscules et vont (presque toutes) par paire :
une balise ouvrante <truc> et une balise fermante </truc>
leur action porte sur les éléments placés entre la paire
balises simples <truc>
balises avec attributs <truc attribut="valeur">….</truc>
Les balises doivent être imbriquées hiérarchiquement
<truc>
<machin>
…
</machin>
</truc>
<truc>
<machin>
…
</truc>
</machin>
Balises
Structure générale d’une page web
<!DOCTYPE> <HTML>
<HEAD>
…
……
<TITLE> Titre du document </TITLE>
…
</HEAD>
<BODY>
… Contenu de la page Web …
</BODY>
</HTML>
Le paragraphe HEAD
Contient des informations relatives au document, notamment sur les
scripts et les feuilles de style
Ces informations ne sont pas affichées par les navigateurs
Facultatif mais très conseillé
Balises du paragraphe HEAD
<SCRIPT> Contient le code du programme appelé dans une balise de <BODY>
<STYLE> Définit les styles de présentation balises
<TITLE> C'est le titre du document affiché dans la barre de titre du navigateur.
Il est nécessaire au référencement par les robots d'indexation
Le paragraphe BODY
Contient ce qui sera effectivement affiché dans votre
navigateur
Regroupe les balises de définition des textes, images,
liens, formulaires…formant le corps du document
La balise BODY elle-même accepte plusieurs paramètres
définissant les attributs de présentation toute la page
Cette balise est optionnelle dans les nouvelles versions
d’HTML, mais fortement conseillée
Le paragraphe BODY
Attributs de la balise BODY
background = nom
bgcolor = rrggbb
text = rrggbb
link = rrggbb
vlink = rrggbb
alink = rrggbb
image de fond de la page
couleur de fond de page
couleur du texte
couleur des liens
couleur des liens visités
couleur des liens actifs
Exemple
<body link="3300FF" alink="FF3366" vlink="3399FF"
text="000000" bgcolor="CCCCCC">
Mise en page
Les retours à la ligne, les tabulations, et la
succession de plusieurs espaces ne sont pas
pris en compte par les navigateurs
Pour une meilleure lisibilité du code, pensez à
bien indenter les balises
Une meilleure lisibilité permet une meilleure mise à
jour de votre travail
<HTML><HEAD><TITLE>Titre</TITLE></HEAD><BODY>Texte</B
ODY></HTML>
Bien crade comme code, mais juste…
Mise en page
<div> …</div>: division du texte sur votre page,
comme un bloc
<center> … </center>: centrer votre contenu
<p…> … </p>: paragraphe
align=right, left, justify
<p> seul marque une fin de paragraphe et donc un
retour à la ligne avec alinéa
<br> ou <br />: saut de ligne
<hr …>: trace une ligne horizontale sur la page
size=N: N pixels d’épaisseur
width=…% ou width=… largeur de la ligne
Mise en forme des caractères
<BIG>gros</BIG
<SMALL>petit</SMALL>
<B>gras</B>
<I>italique</I>
<U>Souligné</U>
<SUP>mise en exposant</SUP>
<SUB>mis en indice</SUB>
<PRE>texte pré formaté</PRE>
<H1>titre de niveau 1 </H1> (idem avec <H2>, …,
<H6> pour des titres de niveaux inférieurs)
Mise en forme des caractères
<FONT> texte</FONT>, attributs possibles :
FACE="Arial,Helvetica" pour spécifier d'abord Arial,
disponible alors Helvetica
SIZE="N" | "+N"(N compris entre 1 et 7)
N valeur absolue
N valeur relative par rapport à la taille standard
COLOR="#RGB"(idem BODY)
<alt=“ Commentaire sur passage de la souris“>
Les listes
z La balises <OL>, <UL>, <DL> déterminent 3 type des
listes (ordonnée, non ordonnée et définition de liste).
z Associée à ces balises, une autre balise <LI> … </LI>
précise quels sont les différents éléments de la liste.
z Une liste peut être imbriquée dans une autre liste: le
décalage se fera alors vers la droite
z Syntaxe:
<OL>
<LI>
</OL>
liste numérotée
élément de liste
Les listes
z <OL> <LI> … </LI> … </OL> Liste ordonnée : les
éléments de la liste sont numérotés et décalés vers la
droite
z <UL> <LI> … </LI> … </UL> Liste non ordonnée : les
éléments de la liste sont décalés vers la droite et
précédés d'une puce
z <DL><DT> <DD>… </DD></DT> … </DL> Définition
de listes. DT permet de spécifier les termes, DD permet
de définir la description
Les listes
z La balise <OL> accepte les attributs suivants :
indices en majuscules A,B…
indices en minuscules a,b…
numéros en chiffres romains
majuscules I,II…
{TYPE = i
numéros en chiffres romains
minuscules i,ii…
numéros en chiffres 1,2…
{TYPE = 1
{ START définit la valeur à laquelle doit commencer la
numérotation de la liste
{TYPE = A
{TYPE = a
{TYPE = I
z Ex : <OL TYPE=i START=4>
Les listes
z La balise <UL> accepte les attributs suivants :
{TYPE = disc
{TYPE = square
{TYPE = circle
cercle plein
carré plein
cercle vide
z Syntaxe pour les listes de définition
<DL>
<DT>...</DT>
<DD>...</DD>
</DL>
Liste de glossaire
Terme de glossaire
Définition du terme
Les listes
z La balise <UL> accepte les attributs suivants :
{TYPE = disc
{TYPE = square
{TYPE = circle
cercle plein
carré plein
cercle vide
z Syntaxe pour les listes de définition
<DL>
<DT>...</DT>
<DD>...</DD>
</DL>
Liste de glossaire
Terme de glossaire
Définition du terme
Les listes
Les tableaux
z Un tableau HTML est délimité par les marqueurs
<TABLE> et </TABLE>.
z On définit ensuite les lignes une par une, et pour
chacune, on définit les cellules formant les colonnes.
<table>
<tr>
<td>
<td>
</tr>
<tr>
<td>
<td>
</tr>
</table>
</td>
</td>
</td>
</td>
Les tableaux
z <TABLE> </TABLE>
Création d'un tableau
z <TR> … </TR>
Ligne de tableau
z <TD> … </TD>
L'attribut COLSPAN=nombre
cellules
Cellule d'un tableau
permet de fusionner
des
z <TH> … </TH>
Entête de tableau
Ils sont affichés avec des caractères différents de ceux
des autres lignes
Les tableaux
z La balise <table> accepte les attributs suivants :
{ border="n"
{ width="x"
{ cellspacing="x"
{ cellpadding="x"
épaisseur de la bordure, en pixel (0 donne un
tableau sans cadre)
largeur du tableau, en pixels ou en %
espace entre les cellules
espace entre la bordure intérieure d’une
cellule et son contenu.
Les tableaux
z Attributs communs à <TR>,<TD> et<TH>
{ BGCOLOR="couleur"pour fixer la couleur du fond
{ ALIGN= "left" | "right" | "center"pour l'alignement horizontal
{ VALIGN= "bottom" | "middle" | "top"pour l'alignement vertical•
z Attributs de <TD>
{ COLSPAN="N"permet à la cellule de recouvrir N colonnes
{ ROWSPAN="N"permet à la cellule de recouvrir N lignes
Les tableaux
Exemple
Les éléments html5
De nouveaux éléments spécifiques HTML5 existent afin de
faciliter la mise en page de vos sites
<section>, <nav>, <article>, <header>, <footer>, <aside>
Exemple
<body>
<header> … </header>
<div>
<nav>…</nav>
<section>
<article>…</article>
<aside>…</aside>
</section>
</div>
<footer>…</footer>
</body>
Les liens hypertextes
<A HREF="url"> texte</A> crée un lien qui renvoie vers l'url
spécifié lorsque l'utilisateur clique sur le texte
soit une page web d'url U contenant<A NAME="toto">
X</A>qui définit une ancre toto positionnée sur X, alors le
lien <A HREF="U#toto">Y </A>renvoie vers l'endroit où est
placé X dans la page web U lorsque l'on clique sur Y (utile
pour la navigation à l'intérieur d'une page)
Exemples:
<a href=”fichier2.html”>Acces au fichier</a>
<a name=“toto”></a>
…….
<a href=“#toto”>Lien vers même page mais placé sur l’ancre toto</a>
Les liens hypertextes
Exemples:
Lien vers un autre site web
Lien vers une adresse mail
<A NAME="sommaire">Sommaire de la page</A>
Lien interne vers l’ancre précédente (même page Web)
<A HREF="mailto:[email protected]">Courrier au Prof</A>
Déclaration d'une ancre dans une page Web page1.htm
Accès au site de l'<A HREF="www.clermont.inra.fr/urh">UMRH</A>
<A HREF="#sommaire">Retour Sommaire</A>
Lien externe vers l’ancre précédente (à partir d'autre page Web)
<A HREF="../page1.htm#sommaire">Retour Sommaire</A>
Les images
<IMG SRC="url"> insère l'image contenue dans le fichier
(format jpeg, gif ou png) dont l'url est spécifié, attributs :
ALT="texte" texte à afficher si le navigateur n'affiche pas les images,
également affiché lorsque la souris passe au-dessus l'image
WIDTH="N"largeur de l'image en pixels
HEIGHT="N"hauteur de l'image en pixels
ALIGN="left" | "right" | "top" | "middle" | "bottom"pour aligner l'image
par rapport au texte
HSPACE="N“ N pixels d'espacement horizontal autour de l'image
VSPACE="N“ N pixels d'espacement vertical autour de l'image
BORDER=N épaisseur de la bordure
Il n’y a pas de balise fermante </img>
On peut l’utiliser comme image de lien
<a href=”fichier2.html”><img src=”image.png”></a>
HTML – subtilités
é &eacute;
è &egrave;
ê &ecirc;
à &agrave;
ç &ccedil;
ë &euml
> &gt
< &lt;
Espace &nbsp;
HTML – subtilités
Exemple
Le matin de noël, le prof de PHP est venu tôt faire cours, et
là, à 10h, a remarqué qu’il n’y avait pas âme qui vive de levée,
si ce n’est les gens éméchés.
Le matin de no&euml;l, le prof de PHP est venu t&ocirc;t faire
cours, et l&agrave;, &agrave; 10h, a remarqu&eacute; qu’il n’y
avait pas &acirc;me qui vive de lev&eacute;e, si ce n’est les
gens &eacute;m&eacute;ch&eacute;s.
Ou alors il faut utilizer la balise <meta charset=“utf-8”> dans
le <head>
Les formulaires
Un formulaire inclus dans une page web permet à
l'utilisateur de saisir des données, faire des choix, …
pour envoyer au serveur web les données saisies par l'utilisateur
pour passer en arguments à une fonction Javascript les données saisies
par l'utilisateur une même page peut contenir plusieurs formulaires
mais on ne peut pas imbriquer un formulaire dans un autre
Une même page peut contenir plusieurs formulaires mais
on ne peut pas imbriquer un formulaire dans un autre
<FORM> éléments du formulaire</FORM>
Les formulaires
<form action="fichier2.php" method="get">
Action: page sur laquelle l’utilisateur sera redirigé en validant le
formulaire
Méthode: méthode utilisée pour transférer les informations
méthode GET : les paramètres sont envoyés concaténés à la fin de l'urlU
méthode POST: les paramètres sont envoyés dans un flux indépendant entre le
navigateur et le serveur web
l'action sera déclenchée par le clic sur un bouton de type submit
On peut nommer un formulaire avec l’attribut name (utile
principalement pour le javascript)
Les formulaires
Tous les éléments peuvent contenir un attribut
NAME="toto" s'il y a besoin de les nommer
VALUE="titi" s'il y a besoin de lui donner une valeur
<TEXTAREA ROWS="R" COLS="C">valeur par
défaut</TEXTAREA>
affiche une zone de saisie de texte de R lignes et caractères de large
Les formulaires
<INPUT TYPE="text"> affiche une boite de saisie de texte
SIZE="N" de N caractères de large
VALUE="toto" avec "toto" comme valeur par défaut
MAXLENGTH="N"saisie limitée à N caractères
Disabled: empêche d’écrire dans le champ
Les formulaires
<input TYPE="password"> affiche une boite de saisie de
texte à l'aveugle (les caractères entrés sont affichés sous
forme d‘étoiles), mêmes attributs que "text"
<input TYPE="hidden"> crée une “zone mémoire“ invisible
dans la page web
<input TYPE="reset"> affiche un bouton permettant de
réinitialiser le formulaire lorsque l'on clique dessus
Les formulaires
<INPUT TYPE="checkbox">affiche une case d'une boite à
cocher
CHECKED pour forcer (indiquer que) la boite à être (été) cochée
<INPUT TYPE="radio">affiche un bouton radio, lorsque
plusieurs boutons de même nom existent un seul peut être
coché (ou exclusif entre tous les boutons)
CHECKED pour forcer (indiquer que) le bouton à être (été) coché
Les formulaires
<INPUT TYPE="button" value="toto" ONCLICK="action">
affiche un bouton portant le texte "toto" et lançant action
lorsque l'on clique dessus
<INPUT TYPE="submit" value="toto">affiche un bouton
portant le texte "toto" et soumettant le formulaire lorsque
l'on clique dessus (active l'url spécifiée dans l'attribut
ACTION du formulaire)
Les formulaires
•
<input type=”number”> affiche un champ
texte au format nombre
•
<input type=”range”> affiche une règle de
défilement pour définir les valeurs d’un
champ
•
<input type=”color”> affiche une palette de
couleurs
•
<input type=“file”> affiche un champ fichier
(attention il faut un formulaire de type POST
avec l’attribut enctype)
Les formulaires
•
<input type ="tel"> affiche un numéro de téléphone
•
<input type="url”> affiche un champ texte au format URL
•
<input type=”email”> affiche un champ texte au format
email
<input type=”date”> affiche un champ texte au format
date
•
Les formulaires
<select name=“sel”>
<option VALUE="toto1">texte1</option>…
</select>
affiche un menu déroulant permettant de sélectionner l'une des options,
chaque ligne du menu a une valeur spécifique
<OPTION VALUE="toto1"SELECTED> texte1permet de choisir cette ligne
comme option par défaut
<SELECT SIZE="N" MULTIPLE>... </SELECT> affiche une fenêtre
de N lignes et permet la sélection simultanée de plusieurs lignes
Possibilité de rajouter des groupes
<optgroup></optgroup>
Les formulaires
Les formulaires
Les feuilles de style en
HTML
CSS
CSS: feuilles de style en cascade
Permettent d’appliquer une mise en page
à l’ensemble d’un site très simplement
Permettent la modification de cette mise
en page sans avoir à corriger tous les
fichiers du site
Déclarations des CSS
3 façons de faire:
Intégré au cœur même des balises HTML de la page :
Intégré au header de la page (balises HEAD) sous forme de
bloc. Il affecte alors toute la page.
Ex : <p style="font-size:16pt;">
Ex : <style type="text/css"> …… </style>
Sous forme d'un fichier de style séparé, portant l'extension
".css" : il faut créer un fichier de mise en page auquel
toutes les pages du site font appel, au travers de la ligne
suivante, à insérer entre <head> et </head> :
<link href="style.css" rel="stylesheet" type="text/css">
Déclarations des CSS
On définit d’abord les styles de la page (couleur de
fond, …) et du texte des paragraphes:
body {
background-color : FFFFFF;
}
p{
font-size : 12pt;
font-family : Arial, Helvetica, Geneva, sans-serif;
color : 000000;
}
Déclarations des CSS
Les couleurs des liens (non visité, déjà visité et pendant le clic)
sont définis comme suit :
a:link {color: 00FFFF; text-decoration:underline;}
a:visited {color: 808080; text-decoration:underline;}
a:hover {color:FF0000; text-decoration:none;}
De la même façon, les tableaux peuvent être homogénéisés :
table { border-style:solid; border-width:1px; border-color:000000; width:50%;}
Table { border: 1px solid black;}
td { border-style:solid; border-width:1px; border-color:FF0000; width:50%; }
Déclarations des CSS
On peut également définir des styles prédéfinis pour les
titres:
h1 {
font-size : 18pt;
font-family : Arial, Helvetica, Geneva, sans-serif;
color : 0099FF;
text-align: center;
}
h2 {
font-size : 14pt;
font-family : Arial, Helvetica, Geneva, sans-serif;
color : FF0000;
padding-left:15px;
}
Les classes
Si on veut définir plusieurs styles de tableaux, on passe par la
création de plusieurs classes de tableaux.
Une classe porte le nom que l'on veut, elle doit être déclarée
dans le fichier CSS et doit être impérativement précédée d'un
point "." :
Exemple:
.grise {
border-style:solid;
border-width:1px;
border-color:000000;
background-color:999999;
}
.none {
border-style:none;
}
Les classes
Il existe plusieurs style de bordures:
"solid" (trait plein), "outset" (relief) ou
"inset" (pointillés), "dotted"...
On peut aussi avoir les 4 côtés différents
puisque chaque bord peut être détaillé :
border-style-left, border-color-right,
border-width-top …
Les classes
Dans ce cas, il faudra modifier un peu le code html des
pages, pour choisir entre tel et tel style de tableau.
<table>
<tr>
<td class="grise"><p>Cellule 1</td>
<td class="bleue"><p>Cellule 2</p></td>
</tr>
<tr>
<td class="none"><p>Cellule 3!</p></td>
<td><p>Cellule 4</p></td>
</tr>
</table>
Les classes
Les classes
L'utilisation des CSS permettant de dissocier le style du
contenu, cela autorise la gestion complète de la mise en
page :
.banniere {
.menu{
position:absolute;
position:absolute;
top : 10px;
top : 110px;
left : 10px;
left : 10px;
width : 710px;
width : 150px;
height : 90px;
height : 400px;
border-style : solid;
border-style : solid;
border-width : 1px;
border-width : 1px;
border-color : 0000FF;
border-color : 00FF00;
background-color : F0F0F0;
background-color : F0F0F0;
}
}
Les classes
.conteneur {
<html>
top : 110px;
<head>
left : 170px;
<title> ma page de test des css</title>
width : 550px;
<link href="style.css" rel="stylesheet" type="text/css">
height : 400px;
</head>
position : absolute;
<body>
border-style : solid;
<div class="banniere"><h2>banniere</h2></div>
border-width : 1px;
<div class="menu"><h2>menu</h2></div>
border-color : FF0000;
<div class="conteneur"><h2>conteneur</h2></div>
background-color : F0F0F0;
</body>
}
</html>
Les identifiants
Il est possible de faire la même chose que les
classes mais avc des identifiants
Dans le fichier css on n’aura plus .grise mais #grise
Ne peut s’appliquer qu’à un élément dans la page
Exemple:
<div class=red>
<div id=red>
<div class=red>
<div id=red>
Les balises block et inline
block :
crée automatiquement un retour à la ligne avant et après.
Il suffit d'imaginer tout simplement un bloc.
Votre page web sera en fait constituée d'une série de blocs les
uns à la suite des autres.
il est possible de mettre un bloc à l'intérieur d'un autre
augmente les possibilités pour créer le design du site
Ex: p, article, footer, h1, h2, …
inline :
se trouve obligatoirement à l'intérieur d'une balise block.
ne crée pas de retour à la ligne, le texte qui se trouve à
l'intérieur s'écrit donc à la suite du texte précédent, sur la même
ligne c'est pour cela que l'on parle de balise « en ligne ».
Ex: a, img, strong, font
Les dimensions et les
dispositions
Width, height: par défaut, un bloc prend 100% de la
largeur disponible
Mise en page possible
Float: permet de fixer un bloc (ex nav) assez complexe
Soucis: si 2 div, il y aura un décalage utilisation de
margin
On peut modifier le comportement des blocs
(display:inline;) ou des inline (display:block;)
On peut même faire disparaître des éléments
(display:none)
Les dimensions et les
dispositions
Inline-block: mélange de inline et block
Les éléments se mettent les uns à la suite des autres mais
se comportent comme des blocs
Les éléments se positionnent par défaut sur la même ligne
de base, on joue sur le vertical-align pour modifier ça
Positionnement absolute
Positionnement fixed
Fixe le bloc à un endroit de la page (ex: en haut à gauche)
Fixe le bloc à un endroit que la page défile ou pas
Positionnement relatif
Permet de décaler un élément inline par rapport à sa
position de départ
Création de notre site
1ère chose à faire: le squelette du site
2ème chose: mettre en place le css de notre site
Il faut commencer à structurer nos blocs et définir les
principales grandes sections de notre site
On écrit notre html directement sur ces bases
On met en place le CSS
1: les font-face (à récupérer sur des sites spécialisés)
2: Les différents blocs
On modifie le CSS pour la compatibilité avec les vieilles
versions d’IE
Installer un serveur local
sous windows
Installer un serveur local sous
windows
Il existe plusieurs logiciels pour windows
Les plus connus/utilisés sont:
WAMP
XAMPP
Le principe du serveur local est de vous permettre
de développer vos sites sur votre ordinateur, en
installant Apache, ainsi que PHP et MySQL
Pour accéder au serveur local, il faut aller dans
votre navigateur et taper: http://localhost ou
http://127.0.0.1 dans la majeure partie des cas
Installer un serveur local sous windows
Installer un serveur local sous
windows
Installer un serveur local sous
windows
Installer un serveur local sous
windows
Installer un serveur local sous
windows
Installer un serveur local sous
windows
Si l’icône reste orange, c’est qu’un
autre programme utilise ce port,
par exemple Skype.
Il faut modifier le fichier
httpd.conf
Recherchez la ligne contenant Listen 80
Remplacez 80 par autre chose (ex: 8183)
Redémarrez le serveur
Installer un serveur local sous windows
XAMPP
Permet d’installer un serveur web, un serveur de bases de données et le package
Perl/DBI
Installation
Téléchargez la dernière version de XAMPP
(https://www.apachefriends.org/fr/download.html)
Exécutez le fichier téléchargé
Il proposera d’installer le répertoire xampp dans c:\
La racine de votre serveur web est c:\xampp\htdocs
Utilisation
L’icône est présenté dans votre barre des tâches (bas droite), il suffit de cliquer sur
pour l’afficher
Installer un serveur local sous windows
Installer un serveur local sous windows
Pour démarrer les services, il suffit de cliquer sur les boutons situés sous
« action »
Il est possible de mettre en place des services, c’est-à-dire de faire en
sorte que XAMPP démarre tout seul au démarrage de windows. Il faut pour
cela (1 fois pour toutes):
Démarrer xampp en mode admin
Arrêter les services au cas où ils tournent
Cocher les cases « services » de apache et de mysql
C’est tout!
Pour accéder aux services de perl/dbi il faut utiliser la ligne de commande
de xampp (à droite sur le panneau de config)
Installer un serveur local sous linux
Installation d’un serveur Lamp avec apt
Lamp = Linux Apache Mysql Php
Serveur de base pour générer des sites web sur un serveur linux
Paquets nécessités:
apache2 créera une arborescence dans /var/www
php5
mysql-server
php5-mysql
phpmyadmin
libapache2-mod-php5
Installer un serveur local sous linux
Installation d’un serveur Lamp avec apt
sudo apt-get install apache2 php5 mysql-server libapache2mod-php5 php5-mysql
Démarrage du serveur apache2
sudo service apache2 start
OU
/etc/init.d/apache2 start
