Differences

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

--- 2017_2018:s1:webdoc:td1 [2017/10/23 08:43]
pourcelot [Courrier électronique]
+++ 2017_2018:s1:webdoc:td1 [2017/11/08 14:46]
pourcelot [Présentez-vous]
@@ Line 224: / Line 224: @@
   * Visualiser votre document.. Qu'en pensez-vous?
   * Retirer le dimensionnement en largeur de l'image. Re-visualiser votre document.
-  * A quoi sert l'attribut alt? Mettez un nom erroné d'image, et re-testez.
+  * A quoi sert l'attribut alt? Modifiez l'attribut ''src'' en mettant 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.
@@ Line 321: / Line 321: @@
 Cette fonctionnalité est fréquemment utilisée pour une section "Contact".
-Attention, c'est également le meilleur moyen de livrer votre adresse mail aux robots de SPAM.
-Une alternative consiste à écrire en toute lettres ou insérer une image compréhensible seulement par un humain : prenom.nom at unice point fr.
 <code html>
 <a href="mailto:prenom.nom@unice.fr">Contacter M. Machin </a>
 </code>
+Attention, c'est également le meilleur moyen de livrer votre adresse mail aux robots de SPAM.
+Pour contourner ce problème, on peut essayer de ruser, par exemple :
+  * écrire l'adresse en toute lettres. Par exemple, ''prenom point nom at unice point fr'' au ''lieu de prenom.nom@unice.fr''.\\ //Inconvénient// : on perd le lien. (Par ailleurs, certains robots spammeurs peuvent avoir des algorithmes de détection relativement sophistiqués pour traduire ce genre d'écriture).
+  * insérer une image compréhensible seulement par un humain.\\ //Inconvénient// : cela diminue l’accessibilité du site aux personnes malvoyantes.
 ==== Mise en Pratique ====
@@ Line 384: / Line 388: @@
 <box round rgb(185,211,238) 95%|**A Faire :**  >
-  * 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**).
+  * Dans ''WEB'', créez un sous-dossier ''www'', et dans ce sous-dossier créez un fichier ''index.html'', il contiendra votre page personnelle. (Si vous travaillez en binôme, présentez votre binôme.)
+  * Créez également un sous-dossier ''images'' dans ''WEB/www/'' qui devra contenir toutes les images.
 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.
+  * 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 />'' pour voir ce que ça fait. Puis effacez la vite. Réfléchissez à pourquoi.
+  * Sauter une ligne : ''<br />'' pour voir ce que ça fait. Puis effacez la vite. Pourquoi faut-il éviter d'utiliser ''<br/>'' (sauf cas particuliers)~?
   * Tracer une ligne horizontale : ''<hr />''
   * Insérer des commentaires : ''< !- - Ceci est un commentaire - - >'' (attention pas d'espace entre les tirets!!)
@@ Line 396: / Line 401: @@
         * 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.
+  * Un menu avec des liens internes permettant d'accéder aux différentes parties de la page.
-  * N'oubliez pas de faire une archive de votre environnement, puis respectez les contraintes de rendu données.
+  * Et tout ce qui vous amuse et vous semble utile (avec les réserves ci-après).
-  * Si vous pensez que d'autres questions à la rubrique suivante peuvent être ajoutées, envoyez les dans un fichier joint "jeSaisAussi".
+Votre page ne doit **pas** contenir de mise en forme :
+  * **pas** de couleur, de gras, etc.
+  * **pas** d'alignement
+Bref, à ce stade, le code doit être beau, mais votre page (très) laide.
+Nous verrons comment soigner la mise en forme sans massacrer le code dès le TD2 (CSS powered).
 </box>
+<note important>
+**Consignes de rendu :**
+Vous avez deux boîtes de dépôt sur Jalon pour votre groupe (ne vous trompez pas de groupe).
+Vous devez rendre (dans la bonne boîte de dépôt) :
+  * votre site web, archivé (format ZIP)
+  * votre feuille de réponse, nommée ''nom-prenom_TD1.html'', ou ''nom1-prenom1_nom2-prenom2_TD1.html''. Cette feuille doit être structurée : ''<h1>'', ''<h2>'', ''<p>'', ''<a>'' pour indiquer vos sources si vous avez trouvé des réponses sur internet, etc.)
+Les dates de rendu seront fixés sur Jalon par l'enseignant en charge du TD.
+</note>
 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 =====
+=====  Rendre votre page web accessible depuis l'extérieur (facultatif)  =====
 Pour en savoir plus :
@@ Line 476: / Line 504: @@
 Référence : https://www.vectorskin.com/balises-html5/
+<html><a href="http://www.41mag.fr/demo/41mag-memo-html5.pdf"><span style="color:red;font-size:150%">Aide-mémoire des balises HTML5 : http://www.41mag.fr/demo/41mag-memo-html5.pdf</span></a></html>
 ===== Autres outils =====

Cours au département INFO - IUT - UNS

User Tools

Site Tools

Differences

Page Tools