Differences

This shows you the differences between two versions of the page.

--- 2016_2017:s1:webdoc:td1 [2016/10/18 09:30]
logre [XHTML]
+++ 2016_2017:s1:webdoc:td1 [2016/10/27 09:19] (current)
logre [Présentez-vous]
@@ Line 1: / Line 1: @@
 ===== <TD1> xHTML, une affaire de balises </TD1> =====
+** Toutes les questions du TD sont à répondre dans un document xHTML validé qui contiendra les noms et prénoms du binôme.
+Ce fichier de réponse et votre page perso seront à déposer sous Jalon, la veille au soir du prochain TD au plus tard.**
+===== Votre environnement de travail pour commencer =====
+  - Sous votre dossier ''Documents'', créer un répertoire ''WEB''((clique droit, nouveau, dossier))
+  - Sous le répertoire ''WEB'', créer un répertoire ''TD1''. A chaque séance, vous créerez un nouveau répertoire.
+**Vous pouvez aussi faire le choix de créer directement des pages accessibles depuis l'extérieur**, ce qui change un peu la structure, voir [[https://wiki.unice.fr/display/IntraSIDI/ProgWeb|l'aide du département info]] et/ou le paragraphe "Rendre votre page web accessible depuis l'extérieur" en bas de page.
+==== Choix des outils ====
+Nous vous conseillons d'utiliser [[http://brackets.io/|Brackets]].
+Vous pouvez utiliser :
+   * [[https://notepad-plus-plus.org/fr/|notepad++]]. Sélectionnez le bon encodage de vos fichiers :
+        * dans "Encoding", sélectionner [[http://fr.wikipedia.org/wiki/UTF-8|UTF-8 sans BOM]]
+        * dans "Langage", sélectionner "HTML"
+   * VisualStudio, Codepen.io, ... -> vous assumez.
+Au sein du navigateur, pensez à utiliser la console du développeur web.
 ===== Un peu de vocabulaire =====
@@ Line 25: / Line 47: @@
-===== Votre environnement de travail pour commencer =====
-  - Sous votre dossier ''Documents'', créer un répertoire ''WEB''((clique droit, nouveau, dossier))
-  - Sous le répertoire ''WEB'', créer un répertoire ''TD1''. A chaque séance, vous créerez un nouveau répertoire.
-**Vous pouvez aussi faire le choix de créer directement des pages accessibles depuis l'extérieur**, ce qui change un peu la structure, voir [[https://wiki.unice.fr/display/IntraSIDI/ProgWeb|l'aide du département info]] et/ou le paragraphe "Rendre votre page web accessible depuis l'extérieur" en bas de page.
-==== Choix des outils ====
-Nous vous conseillons d'utiliser [[http://brackets.io/|Brackets]].
-Vous pouvez utiliser :
-   * [[https://notepad-plus-plus.org/fr/|notepad++]]. Sélectionnez le bon encodage de vos fichiers :
-        * dans "Encoding", sélectionner [[http://fr.wikipedia.org/wiki/UTF-8|UTF-8 sans BOM]]
-        * dans "Langage", sélectionner "HTML"
-   * VisualStudio, Codepen.io, ... -> vous assumez.
-Au sein du navigateur, pensez à utiliser la console du développeur web.
 ===== Mon premier exemple =====
@@ Line 82: / Line 87: @@
-==== Prise de recul et Grammaire ====
-Une page web est donc un **document** contenant **des balises**.
-Ces balises forment **un arbre** et définissent la **sémantique** des éléments.
-Une balise peut contenir des **attributs**, qui sont des paires clef-valeur.
-Une balise peut avoir comme contenu (ce qui se trouve entre la balise ouvrante et la balise fermante) du texte et/ou d'autres balises qui seront ses filles.
-Toute balise ouvrante doit avoir une balise fermante correspondante, et vice-versa.
@@ Line 118: / Line 111: @@
 </box>
-=====  XHTML =====
+=====  xHTML =====
 Avec la popularité du web est venue la nécessité de partager toutes sortes d'informations qui peuvent être aussi bien des équations mathématiques, des partitions de musique, que des descriptions de composants chimiques. Il était donc nécessaire de permettre un balisage spécialisé par domaine et donc de définir des « langages à balises spécialisés ». C'est le rôle de ''XML''.
-Pour que HTML soit un tel langage dédié au web, nommé XHTML, il fallait lui associer des règles plus strictes dont voici un extrait :
+Pour que HTML soit un tel langage dédié au web, nommé [[https://www.w3.org/TR/xhtml1/#xhtml|xHTML]], il fallait lui associer des règles plus strictes dont voici un [[http://www.alsacreations.com/article/lire/44-difference-html-xhtml.html|extrait]].
-[[http://www.alsacreations.com/article/lire/44-difference-html-xhtml.html|Extrait]]
   * Toute balise ouvrante doit être fermée, et les balises dites « vides » sont écrites avec une barre oblique finale (exemple: ''<br />'').
   * Les noms des balises et des attributs sont écrits en minuscules.
@@ Line 134: / Line 126: @@
 <note warning>A partir de maintenant vous ne coderez plus qu'en XHTML</note>
+==== Prise de recul et Grammaire ====
+Une page web est donc un **document** contenant **des balises**.
+Ces balises forment **un arbre** et définissent la **sémantique** des éléments.
+Une balise peut contenir des **attributs**, qui sont des paires clef-valeur.
+Une balise peut avoir comme contenu (ce qui se trouve entre la balise ouvrante et la balise fermante) du texte et/ou d'autres balises qui seront ses filles.
+Toute balise ouvrante doit avoir une balise fermante correspondante, et vice-versa.
 ===== Méta-Informations : Pour quoi faire? =====
@@ Line 203: / Line 209: @@
 </box>
-==== Images d'arrière-plan  ====
-Voici comment positionner des images en arrière-plan :http://www.w3schools.com/css/css3_backgrounds.asp
-Par défaut, l'image se place dans le coins en haut à gauche puis se reproduit horizontalement et verticalement, pour remplir tout l'espace.
-Pour qu'une image ne se répète pas mettez la valeur ''no-repeat''
-En savoir plus/mieux:
-  * http://www.alsacreations.com/tuto/lire/808-arriere-plans-css3-background.html
-  * http://www.alsacreations.com/tuto/lire/1353-etape-3-couleurs-images-de-fond.html
@@ Line 224: / Line 220: @@
   * A quoi sert l'attribut alt? Mettez un nom erroné d'image, et re-testez.
   * Si vous ôtez cet attribut, votre fichier est-il toujours valide?
-  * Si vous ne l'avez pas encore fait placer l'image dans un répertoire ''/images'' au même niveau que le répertoire ''TD1'' (sous WEB), puis référencer l'image de manière relative par rapport au répertoire où vous vous situez.
+  * Si vous ne l'avez pas encore fait, placer l'image dans un répertoire ''/images'' au même niveau que le répertoire ''TD1'' (sous WEB), puis référencer l'image de manière relative par rapport au répertoire où vous vous situez.
-  * Placer une image en arrière-plan.
 </box>
@@ Line 235: / Line 231: @@
 ===== Liens =====
-Les liens, ou ancre, ou hyperliens, sont la principale originalité initiale des documents hypertextes, dont ils tirent leur nom.
+Les liens, ou ancres, ou hyperliens, sont la principale originalité initiale des documents hypertextes, d'où ils tirent leur nom.
 Une ancre est notée <a>...</a> et l'attribut href vous permet de fournir l'url de la page liée.
 Ils permettent la redirection ou l'ouverture d'une nouvelle fenêtre au clic, via du texte ou une image, ou le téléchargement d'une ressource.
@@ Line 335: / Line 331: @@
       * Construire un menu en début de page qui renvoie vers les différentes rubriques de votre page.
 </box>
-===== Tableaux =====
-La déclaration d'un //tableau// se fait avec la balise conteneur ''<table>''.
-Cette balise contient le tableau composé de lignes.
-La balise du type conteneur ''<tr>'' permet de créer une //ligne//. Une ligne peut être composée de cellules.
-Une //cellule d'entête// est créée par la balise conteneur ''<th>'', elle permet d'indiquer le titre d'une colonne ou d'une ligne.
-Une //cellule de contenu// est créée par la balise conteneur ''<td>''.
-Pour donner un titre à un tableau, il faut utiliser la balise ''caption''.
-<code html>
-<table border="1">
-  <tr>
-    <th>Month</th>
-    <th>Savings</th>
-  </tr>
-  <tr>
-    <td>January</td>
-    <td>$100</td>
-  </tr>
-</table>
-</code>
-<box round rgb(185,211,238) 95%|**A Faire :**  >
-  * Créer un tableau dont les colonnes correspondent à 3 jours de la semaine, les lignes aux cours (algo, web), et les cases contiennent le nombre d'heures de la journée consacrée au cours.
-  * Attention, évidemment, les cellules correspondant à //algo// et //web// sont des cellules d'entête (Table Header)
-  * Si vous n'avez pas cours, laissez la case libre en utilisant ''&nbsp;''
-</box>
@@ Line 401: / Line 360: @@
-=====  HTML5 =====
-Référence : https://www.vectorskin.com/balises-html5/
-HTML5 propose de nouvelles balises pour enrichir encore plus vos pages web.
-Vous pouvez ainsi insérer des éléments audio ou vidéo dans vos pages.
-Ou encore créer des formulaires avec la possibilité de choisir un nombre, une date etc.
 =====  Fichier par défaut =====
@@ Line 421: / Line 373: @@
 Vous devez réaliser votre page web.
-Nous l'améliorerons par la suite et surtout nous la mettrons en ligne.
+Vous l'améliorerez par la suite et la rendrez accessible en ligne.
 [[http://www.w3.org/TR/html5/text-level-semantics.html#the-cite-element|Pour en savoir plus sur les balises]]
 <box round rgb(185,211,238) 95%|**A Faire :**  >
-  * Créer un fichier sous ''WEB'', ''index.html'', il contiendra votre page personnelle. Puisque vous travaillez peut-être à deux sur la même machine, un seul fichier est créé par binôme. Mais au prochain TD, vous devrez construire éventuellement par copier/modifier la page du deuxième membre du binôme.
+  * Créer un fichier sous ''WEB'', ''index.html'', il contiendra votre page personnelle. Si vous travaillez en binôme, pensez à prendre le temps de copier/adapter la page pour avoir chacun la sienne. (La note de TD sera **individuelle**).
 Pour l'instant, votre page doit contenir au moins les éléments suivants :
   * structurer votre page en utilisant des titres de niveaux différents : ''<h1>'' … ''</h1>'' à ''<h6>'' … ''</h6>'' le plus petit, non obligatoire, mais au moins deux niveaux doivent être utilisés.
-  * Sauter une ligne : ''<br />''
+  * Sauter une ligne : ''<br />'' pour voir ce que ça fait. Puis effacez la vite. Réfléchissez à pourquoi.
   * Tracer une ligne horizontale : ''<hr />''
   * Insérer des commentaires : ''< !- - Ceci est un commentaire - - >'' (attention pas d'espace entre les tirets!!)
   * Utiliser des listes
-  * Un tableau
   * Insertion d’image
   * Des liens vers :
-        * Vers un fichier (votre CV, si vous l'avez déjà fait, sinon un fichier contenant pour l'instant uniquement nom et prénom)
+        * Vers un fichier : l'export PDF de votre CV
         * Vers votre adresse email : <code html> <a href="mailto:toto@unice.fr">Ecrire à toto</a></code>
   * Et tout ce qui vous amuse et vous semble utile.
-  * N'oubliez pas de faire une archive de votre environnement, puis respectez les contraintes de rendu données
+  * N'oubliez pas de faire une archive de votre environnement, puis respectez les contraintes de rendu données.
   * Si vous pensez que d'autres questions à la rubrique suivante peuvent être ajoutées, envoyez les dans un fichier joint "jeSaisAussi".
 </box>
+Voici un petit exemple de présentation utilisant des balises de type Block.
+{{ :2016_2017:s1:webdoc:block-example.png?nolink&300 |}}
 =====  Rendre votre page web accessible depuis l'extérieur =====
@@ Line 450: / Line 404: @@
-<note tip>**Pour rendre votre page web accessible depuis l'extérieur**
+<note tip>**Pour rendre votre page web accessible depuis l'extérieur** </note>
-  * Vous êtes sur Sophia ou sur Nice : Vous devez déposer vos fichiers web sur ''lindmz.unice.fr'' dans un dossier ''web'' à la racine de votre répertoire personnel sur ce serveur : (putty->linserv1) et modifier les droits (chmod 755)
+**Vous êtes sur Sophia ou sur Nice :**
+Vous devez déposer vos fichiers web sur ''lindmz.unice.fr'' dans un dossier ''web'' à la racine de votre répertoire personnel sur ce serveur : (putty->linserv1) et modifier les droits (chmod 755)
          * Accès extérieur via http://lindmz.unice.fr/users/etudiant/n/nomIdentifiant/web
          * Accès local via http://linserv1/users/etudiant/n/nomIdentifiant/web/
-  * Vous êtes sur Sophia
+**Vous êtes sur Sophia :**
 Pour vous connecter sur ce serveur, en ligne de commande, utilisez ''ssh'', puis créez le dossier:
 ''mkdir web'' ou utilisez ''putty''
@@ Line 468: / Line 425: @@
 Retourner sur http://lindmz.unice.fr/users/etudiant/a/alt01/web/ pour vérifier que son contenu apparaît.
 Si tout fonctionne, vous pouvez transférer vos fichiers à l'aide de ''Winscp''.
+**Si cela ne fonctionne pas :**
+Ouvrez le logiciel ''FileZilla'' présent dans le répertoire réseau ''R:'' : il s'agit d'un client FTP, un logiciel capable de se connecter à un serveur en utilisant le protocole FTP, afin de transférer des fichiers.
+Renseignez les informations suivantes :
+  * Hôte : linserv3
+  * Login : votre identifiant
+  * Password : votre mot de passe
+  * Port : 22
+Lancez la connexion, vous devriez voir des répertoires dans site distant.
+Créez un dossier ''web'' (clic droit dans Site distant, puis Créer un répertoire), ouvrez le et transférez les pages du dernier TD dedans.
+Vous devriez pouvoir y accéder au sein de l'université à partir de l'adresse suivante : http://linserv1/users/etudiant/n/nomIdentifiant/web/ où **nomIdentifiant** correspond à votre identifiant.
+L'accès est également possible de l'extérieur à partir de cette adresse : http://lindmz.unice.fr/users/etudiant/n/nomIdentifiant/web
- </note>
 ===== Je sais répondre à =====
@@ Line 485: / Line 457: @@
      * <code><ol> toto <li> sous-titre1</li> <ul> sous-titre niveau 2</ul> </ol> </code>
      * <code><H1> Titre 1 </H1></code>
-  * Quelles informations doivent être données dans mon document pour faciliter sa lecture par les navigateurs et favoriser son « identification » par les robots du web ?
+  * Quelles informations doivent être données dans mon document pour faciliter sa lecture par les navigateurs et favoriser son «identification» par les robots du web ?
   * Quel fichier est affiché si seul le nom d'un répertoire est donné ? Que se passe-t-il si ce fichier n'existe pas ? Est-ce toujours le cas ?
-  * Quand utiliser ''th''? ''td''?
 </box>
+=====  Aller toujours plus loin avec HTML5 =====
+HTML5 propose de nouvelles balises pour enrichir encore plus vos pages web.
+Encore plus de sémantique !
+Vous pouvez ainsi insérer bien plus facilement des éléments audio ou vidéo dans vos pages ou encore créer des formulaires plus intuitif avec la possibilité de choisir un nombre, une date etc (#Teaser du TD4).
+Référence : https://www.vectorskin.com/balises-html5/
 ===== Autres outils =====

Cours au département INFO - IUT - UNS

User Tools

Site Tools

Differences

Page Tools