This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
2013_2014:s1:docweb:html:start [2013/11/06 09:19] blay [Choix des outils] |
2013_2014:s1:docweb:html:start [2013/11/11 20:53] rey [Autres balises] |
||
---|---|---|---|
Line 31: | Line 31: | ||
**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]] | **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 64: | Line 74: | ||
<note important>Attention, les copier-coller posent parfois des problèmes sur les caractères spéciaux.</note> | <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, 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]] | + | |
- | * 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) | + | |
==== Balisage sémantique ==== | ==== Balisage sémantique ==== | ||
Line 248: | Line 252: | ||
</box> | </box> | ||
===== Autres balises ===== | ===== Autres balises ===== | ||
- | Extrait de cours de Gaétan Rey | + | Extrait de cours de Gaëtan Rey |
Line 294: | 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 316: | Line 320: | ||
* 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/edutiant/n/nom/web | + | * Accès extérieur via http://lindmz.unice.fr/users/etudiant/n/nomIdentifiant/web |
- | * Accès local via http://linserv/users/edutiant/n/nom/web/ | + | * Accès local via http://linserv1/users/etudiant/n/nomIdentifiant/web/ |
Line 338: | 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 346: | 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> | ||
- | |||
- | |||