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 | ||
2016_2017:s1:webdoc:td1 [2016/10/17 16:58] logre [Liens] |
2016_2017:s1:webdoc:td1 [2016/10/26 09:38] gjannon [Images d'arrière-plan] |
||
---|---|---|---|
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 46: | ||
- | ===== 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 82: | Line 86: | ||
- | |||
- | ==== Prise de recul et Grammaire ==== | ||
- | |||
- | Une page web est donc un **document** contenant **des balises**. | ||
- | Ces balises forment **un arbre** et définissent la **sémantique** des éléments. | ||
- | Une balise peut contenir des **attributs**, qui sont des paires clef-valeur. | ||
- | Une balise peut avoir comme contenu (ce qui se trouve entre la balise ouvrante et la balise fermante) du texte et/ou d'autres balises qui seront ses filles. | ||
- | Toute balise ouvrante doit avoir une balise fermante correspondante, et vice-versa. | ||
Line 113: | Line 109: | ||
* Re-validez votre document. Vous n'avez plus d'erreur! | * Re-validez votre document. Vous n'avez plus d'erreur! | ||
</box> | </box> | ||
+ | |||
+ | ===== xHTML ===== | ||
+ | Avec la popularité du web est venue la nécessité de partager toutes sortes d'informations qui peuvent être aussi bien des équations mathématiques, des partitions de musique, que des descriptions de composants chimiques. Il était donc nécessaire de permettre un balisage spécialisé par domaine et donc de définir des « langages à balises spécialisés ». C'est le rôle de ''XML''. | ||
+ | |||
+ | Pour que HTML soit un tel langage dédié au web, nommé [[https://www.w3.org/TR/xhtml1/#xhtml|xHTML]], il fallait lui associer des règles plus strictes dont voici un [[http://www.alsacreations.com/article/lire/44-difference-html-xhtml.html|extrait]]. | ||
+ | |||
+ | * Toute balise ouvrante doit être fermée, et les balises dites « vides » sont écrites avec une barre oblique finale (exemple: ''<br />''). | ||
+ | * Les noms des balises et des attributs sont écrits en minuscules. | ||
+ | * Les valeurs des attributs sont encadrés par des '//quotes//' (guillemets droits simples) ou des "//double quotes//" (guillemets droits doubles). | ||
+ | * Chaque attribut doit avoir une valeur (pas d'attribut vide comme checked, qui doit être écrit //checked="checked"//). | ||
+ | * Les éléments HTML doivent être correctement imbriqués | ||
+ | <code html>(<div><span>contenu</span></div> et pas | ||
+ | <div><span>contenu</div></span>). | ||
+ | </code> | ||
+ | |||
+ | <note warning>A partir de maintenant vous ne coderez plus qu'en XHTML</note> | ||
+ | |||
+ | ==== Prise de recul et Grammaire ==== | ||
+ | |||
+ | Une page web est donc un **document** contenant **des balises**. | ||
+ | |||
+ | Ces balises forment **un arbre** et définissent la **sémantique** des éléments. | ||
+ | |||
+ | Une balise peut contenir des **attributs**, qui sont des paires clef-valeur. | ||
+ | |||
+ | Une balise peut avoir comme contenu (ce qui se trouve entre la balise ouvrante et la balise fermante) du texte et/ou d'autres balises qui seront ses filles. | ||
+ | |||
+ | Toute balise ouvrante doit avoir une balise fermante correspondante, et vice-versa. | ||
+ | |||
+ | |||
===== Méta-Informations : Pour quoi faire? ===== | ===== Méta-Informations : Pour quoi faire? ===== | ||
Line 169: | Line 195: | ||
</code> | </code> | ||
+ | ==== Format et taille d'images ==== | ||
+ | |||
+ | Les navigateurs web ne reconnaissent que 3 formats d'image : GIF, JPEG et PNG. | ||
+ | |||
+ | Si vos images sont grosses, les temps de chargements seront longs. | ||
+ | Pour réduire le poids de l'image, vous pouvez la compresser. | ||
+ | La compression implique une dégradation de la qualité visuelle. | ||
+ | Il convient donc de trouver l'équilibre entre qualité et taille de l'image. | ||
+ | |||
+ | <box round rgb(185,211,238) 95%|**A Faire :** > | ||
+ | * Chercher la différence entre les 3 formats. | ||
+ | </box> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ==== Mise en pratique ==== | ||
<box round rgb(185,211,238) 95%|**A Faire :** > | <box round rgb(185,211,238) 95%|**A Faire :** > | ||
Line 177: | Line 220: | ||
* 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 186: | Line 230: | ||
===== Liens ===== | ===== Liens ===== | ||
- | Les liens, ou hyperliens, sont la principale originalité initiale des documents hypertextes, dont ils tirent leur nom. | + | Les liens, ou ancre, ou hyperliens, sont la principale originalité initiale des documents hypertextes, dont 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. | ||
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 196: | Line 241: | ||
<box round rgb(185,211,238) 95%|**A Faire :** > | <box round rgb(185,211,238) 95%|**A Faire :** > | ||
- | * Placer un lien vers le site de l'IUT. Le faire ouvrir dans une nouvelle fenêtre avec l'attribut ''target="_blank"''. | + | * Placer un lien vers le site de l'IUT. |
+ | * Faire que le lien soit le logo de l'IUT. | ||
</box> | </box> | ||
+ | Vous pouvez utiliser des adresses relatives au document de départ. | ||
+ | Si le document ciblé //(par exemple, cible.html)// se trouve dans le même répertoire que celui où l'on est: vous pouvez y faire référence par | ||
+ | <code> <a href="cible.html">..</a> </code> | ||
+ | Si le document ciblé //(par exemple, chapitre2.html)// se trouve dans un sous-répertoire //(par exemple, chapitres)// à que celui où l'on est, vous pouvez y faire référence par | ||
+ | <code> <a href="chapitres/chapitre2.html">..</a> </code> | ||
- | ===== Tableaux ===== | + | Si le document ciblé //(par exemple, index.html)// se trouve dans un répertoire au dessus de celui où l'on est: vous pouvez y faire référence par |
- | La déclaration d'un //tableau// se fait avec la balise conteneur ''<table>''. | + | <code> <a href="../index.html">..</a> </code> |
- | Cette balise contient le tableau composé de lignes. | + | |
- | La balise du type conteneur ''<tr>'' permet de créer une //ligne//. Une ligne peut être composée de cellules. | ||
- | Une //cellule d'entête// est créée par la balise conteneur ''<th>'', elle permet d'indiquer le titre d'une colonne ou d'une ligne. | + | Pour tester les liens de votre page web : [[http://validator.w3.org/checklink|Link Checker]] |
- | Une //cellule de contenu// est créée par la balise conteneur ''<td>''. | + | ==== Lien vers un endroit précis d'une page ==== |
- | Pour donner un titre à un tableau, il faut utiliser la balise ''caption''. | + | === Nommer la destination === |
+ | Cela revient à mettre un drapeau sur l'endroit où l'on veut revenir, on parle du fragment. | ||
+ | Pour créer une destination, il faut lui donner un nom unique, au sens où il ne doit apparaître qu'une seule fois dans le document, en utilisant l'attribut ''id''. | ||
+ | Par exemple : | ||
<code html> | <code html> | ||
- | <table border="1"> | + | <h1 id="intro"> Introduction </h1> |
- | <tr> | + | |
- | <th>Month</th> | + | |
- | <th>Savings</th> | + | |
- | </tr> | + | |
- | <tr> | + | |
- | <td>January</td> | + | |
- | <td>$100</td> | + | |
- | </tr> | + | |
- | </table> | + | |
</code> | </code> | ||
+ | |||
+ | === Lien vers la destination === | ||
+ | |||
+ | Il suffit de faire un lien en incluant un # devant le nom de la destination. | ||
+ | <code html> | ||
+ | <a href="#intro"> vers l'introduction </a> | ||
+ | </code> | ||
+ | |||
+ | === Lien vers un fragment d'un autre document === | ||
+ | Pour mettre un lien vers un fragment dans une autre page, il suffit de mettre le lien vers la page puis de rajouter la référence vers le fragment. | ||
+ | |||
+ | <a href="http://www.exemple.com/glossaire.html#debutA"> vers A </a> | ||
+ | |||
+ | Pour savoir s'il existe des identifiants dans une page, il faut afficher le code source. | ||
<box round rgb(185,211,238) 95%|**A Faire :** > | <box round rgb(185,211,238) 95%|**A Faire :** > | ||
- | * Créer un tableau dont les colonnes correspondent à 3 jours de la semaine, les lignes aux cours (algo, web), et les cases contiennent le nombre d'heures de la journée consacrée au cours. | + | * Afficher le code source d'un site, trouver un identifiant vers le bas de la page, faites un lien vers cet élément. |
- | * Attention, évidemment, les cellules correspondant à //algo// et //web// sont des cellules d'entête (Table Header) | + | |
- | * Si vous n'avez pas cours, laissez la case libre en utilisant '' '' | + | |
</box> | </box> | ||
+ | ==== Ouvrir une nouvelle fenêtre du navigateur ==== | ||
+ | Si un utilisateur en cliquant sur un lien, remplace le fichier visualisé par le fichier correspondant, il peut être gêné dans sa navigation, voire ne plus jamais revenir sur votre page web par exemple. Il est dans ces conditions possibles d'ouvrir une nouvelle fenêtre dans laquelle visualiser le fichier lié. | ||
+ | Pour cela placer un attribut target dans l'élément ancre (a) e, donnant le nom de la fenêtre dans laquelle ouvrir le document. | ||
+ | Par exemple | ||
+ | <code html> | ||
+ | <a href="http://www.w3schools.com" target="W3CSchool">Visit W3Schools.com!</a> | ||
+ | </code> | ||
+ | * La taille de cette nouvelle fenêtre correspond à la taille de la fenêtre la plus récemment ouverte par le navigateur de l'internaute. | ||
+ | * Si vous choisissez comme cible ''_blank'', le navigateur ouvrira une nouvelle fenêtre à chaque fois que vous sélectionnerez le lien. | ||
+ | Par exemple | ||
+ | <code html> | ||
+ | <a href="http://www.w3schools.com" target="_blank">Visit W3Schools.com!</a> | ||
+ | </code> | ||
+ | Par contre si vous mettez plusieurs fois la même cible ces liens s'ouvriront dans la même fenêtre. | ||
+ | |||
+ | <box round rgb(185,211,238) 95%|**A Faire :** > | ||
+ | Dans quel(s) cas vaut-il mieux rediriger la page actuelle / dans quel(s) cas est-ce mieux d'ouvrir le lien dans une autre page ? | ||
+ | </box> | ||
+ | |||
+ | ==== Courrier électronique ==== | ||
+ | <note warning>Pour ce qui suit, il faut que votre navigateur soit configuré pour autoriser et prendre en charge l'envoi d'emails</note> | ||
+ | |||
+ | 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 : logre at unice point fr. | ||
+ | |||
+ | <code html> | ||
+ | <a href="mailto:logre@unice.fr">Contacter M. Logre </a> | ||
+ | </code> | ||
+ | |||
+ | ==== Mise en Pratique ==== | ||
+ | |||
+ | <box round rgb(185,211,238) 95%|**A Faire :** > | ||
+ | * Ajouter dans votre page web | ||
+ | * un lien vers le département d'informatique de l'IUT qui s'ouvre toujours dans une nouvelle fenêtre | ||
+ | * deux liens (par exemple un vers l'université de Nice et un vers ent) qui s'ouvrent dans la même fenêtre cible | ||
+ | * un lien vers une page de votre site qui n'ouvre pas une nouvelle fenêtre | ||
+ | * Construire un menu en début de page qui renvoie vers les différentes rubriques de votre page. | ||
+ | </box> | ||
Line 264: | Line 358: | ||
- | ===== XHTML ===== | ||
- | Avec la popularité du web est venue la nécessité de partager toutes sortes d'informations qui peuvent être aussi bien des équations mathématiques, des partitions de musique, que des descriptions de composants chimiques. Il était donc nécessaire de permettre un balisage spécialisé par domaine et donc de définir des « langages à balises spécialisés ». C'est le rôle de ''XML''. | ||
- | Pour que HTML soit un tel langage dédié au web, nommé XHTML, il fallait lui associer des règles plus strictes dont voici un extrait : | ||
- | |||
- | [[http://www.alsacreations.com/article/lire/44-difference-html-xhtml.html|Extrait]] | ||
- | * Toute balise ouvrante doit être fermée, et les balises dites « vides » sont écrites avec une barre oblique finale (exemple: ''<br />''). | ||
- | * Les noms des balises et des attributs sont écrits en minuscules. | ||
- | * Les valeurs des attributs sont encadrés par des '//quotes//' (guillemets droits simples) ou des "//double quotes//" (guillemets droits doubles). | ||
- | * Chaque attribut doit avoir une valeur (pas d'attribut vide comme checked, qui doit être écrit //checked="checked"//). | ||
- | * Les éléments HTML doivent être correctement imbriqués | ||
- | <code html>(<div><span>contenu</span></div> et pas | ||
- | <div><span>contenu</div></span>). | ||
- | </code> | ||
- | <note tip>USAGE : la plupart des développeurs web professionnels utilisent XHTML. </note> | ||
- | <box round rgb(185,211,238) 95%|**A Faire :** > | ||
- | * Vérifier que vos codes respectent bien la syntaxe XHTML. | ||
- | </box> | ||
- | <note warning>A partir de maintenant vous ne coderez plus qu'en XHTML</note> | ||
- | |||
- | ===== HTML5 ===== | ||
- | |||
- | Référence : https://www.vectorskin.com/balises-html5/ | ||
- | |||
- | HTML5 propose de nouvelles balises pour enrichir encore plus vos pages web. | ||
- | Vous pouvez ainsi insérer des éléments audio ou vidéo dans vos pages. | ||
- | Ou encore créer des formulaires avec la possibilité de choisir un nombre, une date etc. | ||
===== Fichier par défaut ===== | ===== Fichier par défaut ===== | ||
Line 304: | Line 372: | ||
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> | ||
Line 333: | Line 401: | ||
- | <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 351: | Line 422: | ||
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 à ===== | ||
Line 368: | Line 454: | ||
* <code><ol> toto <li> sous-titre1</li> <ul> sous-titre niveau 2</ul> </ol> </code> | * <code><ol> toto <li> sous-titre1</li> <ul> sous-titre niveau 2</ul> </ol> </code> | ||
* <code><H1> Titre 1 </H1></code> | * <code><H1> Titre 1 </H1></code> | ||
- | * Quelles informations doivent être données dans mon document pour faciliter sa lecture par les navigateurs et favoriser son « identification » par les robots du web ? | + | * Quelles informations doivent être données dans mon document pour faciliter sa lecture par les navigateurs et favoriser son «identification» par les robots du web ? |
* Quel fichier est affiché si seul le nom d'un répertoire est donné ? Que se passe-t-il si ce fichier n'existe pas ? Est-ce toujours le cas ? | * Quel fichier est affiché si seul le nom d'un répertoire est donné ? Que se passe-t-il si ce fichier n'existe pas ? Est-ce toujours le cas ? | ||
- | * Quand utiliser ''th''? ''td''? | ||
</box> | </box> | ||
+ | ===== Aller toujours plus loin avec HTML5 ===== | ||
+ | |||
+ | HTML5 propose de nouvelles balises pour enrichir encore plus vos pages web. | ||
+ | Encore plus de sémantique ! | ||
+ | Vous pouvez ainsi insérer bien plus facilement des éléments audio ou vidéo dans vos pages ou encore créer des formulaires plus intuitif avec la possibilité de choisir un nombre, une date etc (#Teaser du TD4). | ||
+ | |||
+ | Référence : https://www.vectorskin.com/balises-html5/ | ||
===== Autres outils ===== | ===== Autres outils ===== |