User Tools

Site Tools


2016_2017:s1:webdoc:td1

Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
2016_2017:s1:webdoc:td1 [2016/10/18 09:56]
logre [Présentez-vous]
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>​ ===== ===== <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.**
  
  
Line 206: Line 209:
 </​box>​ </​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 227: Line 220:
   * A quoi sert l'​attribut alt? Mettez un nom erroné d'​image,​ et re-testez.   * 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 ô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 faitplacer 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>​ </​box>​
  
Line 238: Line 231:
 ===== Liens ===== ===== 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. 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. 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 389: Line 382:
 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 />'' ​+  * Sauter une ligne : ''<​br />'' ​pour voir ce que ça fait. Puis effacez la vite. Réfléchissez à pourquoi.
   * 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 402: Line 395:
 </​box> ​ </​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 =====  =====  Rendre votre page web accessible depuis l'​extérieur ===== 
Line 409: 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 extérieur via http://​lindmz.unice.fr/​users/​etudiant/​n/​nomIdentifiant/​web
          * Accès local via http://​linserv1/​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: Pour vous connecter sur ce serveur, en ligne de commande, utilisez ''​ssh'',​ puis créez le dossier:
 ''​mkdir web''​ ou utilisez ''​putty''​ ''​mkdir web''​ ou utilisez ''​putty''​
Line 427: Line 425:
 Retourner sur http://​lindmz.unice.fr/​users/​etudiant/​a/​alt01/​web/​ pour vérifier que son contenu apparaît. 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 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 à ===== ===== Je sais répondre à =====
    
2016_2017/s1/webdoc/td1.1476777377.txt.gz · Last modified: 2016/10/18 09:56 by logre