This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision Last revision Both sides next revision | ||
2013_2014:s1:docweb:html:start [2013/11/03 18:37] blay [Présentez-vous] |
2013_2014:s1:docweb:html:start [2013/11/06 16:39] blay [Rendre votre page web accessible depuis l'extérieur] |
||
---|---|---|---|
Line 29: | Line 29: | ||
- Sous votre dossier ''Documents'', créer un répertoire ''WEB''((clique droit, nouveau, dossier)) | - 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. | - 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://mbf-iut.i3s.unice.fr/doku.php?id=2013_2014:s1:docweb:html:start#rendre_votre_page_web_accessible_depuis_l_exterieur|ici]] | ||
+ | |||
+ | ==== Choix des outils ==== | ||
+ | Vous pouvez utiliser : | ||
+ | * **notepad++** s'il fonctionne sur votre machine, dans ce cas, il vous faut sélectionner 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 2010 (ou [[2013_2014:s1:docweb:html:visual2012|2012]] selon les machines) | ||
+ | * créer un fichier ... fractionner etc. | ||
+ | * [[http://codepen.io/anon/pen/eAayL|codePen]] (Très pratique pour le 1e TD pour tester en ligne) | ||
===== Mon premier exemple ===== | ===== Mon premier exemple ===== | ||
Line 62: | Line 73: | ||
</box> | </box> | ||
- | + | <note important>Attention, les copier-coller posent parfois des problèmes sur les caractères spéciaux.</note> | |
- | + | ||
- | ==== Choix des outils ==== | + | |
- | Vous pouvez utiliser : | + | |
- | * notepad++ s'il fonctionne sur votre machine | + | |
- | * VisualStudio 2010 (ou [[2013_2014:s1:docweb:html:visual2012|2012]] selon les machines) | + | |
- | * créer un fichier ... fractionner etc. | + | |
- | * [[http://codepen.io/anon/pen/eAayL|codePen]] (Très pratique pour le 1e TD pour tester en ligne) | + | |
Line 182: | Line 186: | ||
<box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire : > | <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire : > | ||
* Placer un lien vers l'IUT. | * Placer un lien vers l'IUT. | ||
- | * Faites en sorte d'ouvrir une autre fenêtre (attribut ''target'') | ||
</box> | </box> | ||
Line 295: | Line 298: | ||
* Sauter une ligne : ''<br />'' | * Sauter une ligne : ''<br />'' | ||
* Tracer une ligne horizontale : ''<hr />'' | * Tracer une ligne horizontale : ''<hr />'' | ||
- | * Insérer des commentaires : ''< !-- Ceci est un commentaire -- >'' | + | * Insérer des commentaires : ''< !- - Ceci est un commentaire - - >'' (attention pas d'espace entre les tirets!!) |
* Utiliser des listes | * Utiliser des listes | ||
* Un tableau | * Un tableau | ||
Line 309: | Line 312: | ||
===== Rendre votre page web accessible depuis l'extérieur ===== | ===== Rendre votre page web accessible depuis l'extérieur ===== | ||
+ | |||
+ | Pour en savoir plus : | ||
+ | http://wiki.unice.fr/display/IntraSIDI/ProgWeb | ||
+ | |||
+ | |||
<note tip>**Pour rendre votre page web accessible depuis l'extérieur** | <note tip>**Pour rendre votre page web accessible depuis l'extérieur** | ||
- | * Vous êtes sur Sophia ou sur Nice | + | * 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 local via http://linserv1/users/etudiant/n/nomIdentifiant/web/ | ||
- | 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. | ||
* Vous êtes sur Sophia | * Vous êtes sur Sophia | ||
Line 333: | Line 342: | ||
<box round rgb(255,204,153) rgb(255,255,204) 97%|Je sais répondre à : > | <box round rgb(255,204,153) rgb(255,255,204) 97%|Je sais répondre à : > | ||
* Ecrivez la structure minimale d'un document en (X)HTML5 ? | * Ecrivez la structure minimale d'un document en (X)HTML5 ? | ||
- | * Comment nommer une page web ? | + | * Comment "donner un titre" à une page web ? |
* Qu'est-ce que le balisage sémantique ? | * Qu'est-ce que le balisage sémantique ? | ||
* Comment vérifier que mon document est bien formé ? | * Comment vérifier que mon document est bien formé ? | ||
Line 341: | Line 350: | ||
* <code><a href="mon fichier.html"> mon lien </a></code> | * <code><a href="mon fichier.html"> mon lien </a></code> | ||
* <code><p> un paragraphe</p></code> | * <code><p> un paragraphe</p></code> | ||
+ | * <code><ol> toto <li> sous-titre1</li> <ul> sous-titre niveau 2</ul> </ol> </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 ? | ||
* Quelles informations non visibles sont également utiles à certains internautes ? | * Quelles informations non visibles sont également utiles à certains internautes ? | ||
* 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> | ||
- | |||
- | |||