User Tools
2017_2018:s1:webdoc:td1
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision Next revision Both sides next revision | ||
|
2017_2018:s1:webdoc:td1 [2017/10/23 08:53] pourcelot [Courrier électronique] |
2017_2018:s1:webdoc:td1 [2017/11/07 09:13] pourcelot [Présentez-vous] |
||
|---|---|---|---|
| Line 224: | Line 224: | ||
| * Visualiser votre document.. Qu'en pensez-vous? | * Visualiser votre document.. Qu'en pensez-vous? | ||
| * Retirer le dimensionnement en largeur de l'image. Re-visualiser votre document. | * 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 ô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. | ||
| Line 329: | Line 329: | ||
| Pour contourner ce problème, on peut essayer de ruser, par exemple : | 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, les robots spammeurs peuvent avoir des algorithmes de détection relativement sophistiqués pour traduire ce genre d'écriture). | + | * é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. | * insérer une image compréhensible seulement par un humain.\\ //Inconvénient// : cela diminue l’accessibilité du site aux personnes malvoyantes. | ||
| Line 388: | Line 388: | ||
| <box round rgb(185,211,238) 95%|**A Faire :** > | <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**). | + | * Créer un fichier sous ''WEB'', ''index.html'', il contiendra votre page personnelle. Si vous travaillez en binôme, présentez votre binôme. |
| Pour l'instant, votre page doit contenir au moins les éléments suivants : | 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/>'' dans la majorité des cas~? |
| * Tracer une ligne horizontale : ''<hr />'' | * Tracer une ligne horizontale : ''<hr />'' | ||
| * Insérer des commentaires : ''< !- - Ceci est un commentaire - - >'' (attention pas d'espace entre les tirets!!) | * Insérer des commentaires : ''< !- - Ceci est un commentaire - - >'' (attention pas d'espace entre les tirets!!) | ||
| Line 400: | Line 400: | ||
| * Vers un fichier : l'export PDF de votre CV | * 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> | * 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. | + | * Et tout ce qui vous amuse et vous semble utile (avec les réserves ci-après). |
| - | * 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 ZIP 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". | + | |
| + | 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 et votre page (très) laide. | ||
| + | Nous verrons comment soigner la mise en forme sans massacrer le code dès le TD2 (CSS powered). | ||
| </box> | </box> | ||
| Line 480: | Line 487: | ||
| Référence : https://www.vectorskin.com/balises-html5/ | 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 ===== | ===== Autres outils ===== | ||
2017_2018/s1/webdoc/td1.txt · Last modified: 2017/11/08 14:47 by pourcelot
Page Tools
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 4.0 International
