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 09:45] logre [Je sais répondre à] |
2016_2017:s1:webdoc:td1 [2016/10/27 09:19] 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.** | ||
+ | |||
+ | |||
+ | ===== 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 ===== | ===== 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 ===== | ===== Mon premier exemple ===== | ||
Line 204: | 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 225: | 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 236: | 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 378: | Line 373: | ||
Vous devez réaliser votre page web. | 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]] | [[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 :** > | <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 : | 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!!) | ||
- | * Utiliser des listes | + | * Utiliser des listes |
- | * Un tableau | + | |
* Insertion d’image | * Insertion d’image | ||
* Des liens vers : | * 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> | * 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. | ||
- | * 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". | * Si vous pensez que d'autres questions à la rubrique suivante peuvent être ajoutées, envoyez les dans un fichier joint "jeSaisAussi". | ||
</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 407: | 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 425: | 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 à ===== | ||