User Tools
2016_2017: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 | ||
|
2016_2017:s1:webdoc:td1 [2016/10/18 10:03] logre [Rendre votre page web accessible depuis l'extérieur] |
2016_2017:s1:webdoc:td1 [2016/10/27 09:19] (current) logre [Présentez-vous] |
||
|---|---|---|---|
| Line 2: | Line 2: | ||
| ** Toutes les questions du TD sont à répondre dans un document xHTML validé qui contiendra les noms et prénoms du binôme. | ** 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.** | 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 208: | 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 229: | 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 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> | </box> | ||
| Line 240: | 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 391: | 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 404: | 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 411: | 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 431: | Line 427: | ||
| 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: | + | **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. | 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. | ||
| Line 446: | Line 442: | ||
| L'accès est également possible de l'extérieur à partir de cette adresse : http://lindmz.unice.fr/users/etudiant/n/nomIdentifiant/web | 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.1476777786.txt.gz · Last modified: 2016/10/18 10:03 (external edit)
Page Tools
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 4.0 International
