Correction DS1 </tiltle> <link rel="stylesheet" type="text/css" href="DS_cor.css" /> </head> <body> <h1>Correction du Devoir Surveillé</h1> <div class="exo"> <h2>Exercice 1</h2> <h3>question a</h3> HTML est l'acronyme HyperText Markup Language ce qui se traduit à peu près par "langage augmenté d'hyper-texte". <h3>question b</h3> La fonction principale d'un navigateur web est d'interpréter un fichier au format web (HTML, CSS, etc.) situé sur un ordinateur du réseau internet. <h3>question c</h3> Un document HTML est structuré par une première ligne indiquant le type du document HTML (<! DOCTYPE ... >), puis d'un élément <html >. Cet élément contient lui-même deux éléments head et body, ce dernier contient le descriptif du contenu de la page. <h3>question d</h3> L'élément <strong> est accepté en HTML transionnal mais pas en HTML strict car il précise la mise en page et non pas seulement la sémantique du contenu. <h3>question e</h3> Le CSS est un langage de présentation de page web qui permet de préciser la mise en forme du contenu XHTML. <h3>question f</h3> Voici quatre méthodes pour insérer un style : <ol> <li> <pre> <p style="background-color:yellow"> ben oui c'est yellow. </p> </pre> </li> <li> <pre> <style type="text/css"> p { background-color : yellow ; } </style> </pre> </li> <li> <pre> <link rel="stylesheet" type="text/css" href="DS_cor.css" media="screen" title="mon style unique" /> </pre> </li> <li> <pre> <style type="text/css"> @import url(DS_cor.css) screen; </style> </pre> </li> </ol> </div> <div class="exo"> <h2>Exercice 2</h2> <ul> <li>p : permet d'écrire un paragraphe <pre> <p> c'est un court paragraphe. </p> </pre> </li> <li>h2 : permet d'écrire un titre de niveau 2 <pre> <h2>Menu</h2> </pre> </li> <li>a : permet de créer des liens hypertexte c'est-à-dire des liens vers d'autres ressources du web et de définir des ancres dans un document. <pre> <a href="http://www.i3s.unice.fr/~verel">Mon site</a> </pre> </li> <li>img : permet d'inclure des images au format png, giff ou jpg. <pre> <img src="modeleBoite.jpg" alt=""/> </pre> </li> <li>div : permet d'identifier sémantiquement une partie du contenu de la page web. L'attribut class permet d'identifier cet élément comme faisant partie d'un ensemble d'éléments et l'attribut id permet l'identification de manière unique. <pre> <div class="exo" id="exo2"> Voici un exo facile. </div> </pre> </li> <li>cite : permet d'écrire une citation, par exemple de Simone de Beauvoir. <pre> <cite> La parole ne représente parfois qu'une manière, plus adroite que le silence, de se taire. </cite> </pre> <cite> La parole ne représente parfois qu'une manière, plus adroite que le silence, de se taire. </cite> </li> </ul> </div> <div class="exo"> <h2>Exercice 3</h2> Voir le fichier associé à ce fichier. </div> <div class="exo"> <h2>Exercice 4 : liste</h2> Voir le code source de cette page. <ul> <li>une liste utile se compose : <ol> <li>d'au moins de deux items</li> <li>d'une cohérence</li> <li>et c'est tout</li> </ol> </li> <li>une liste inutile se compose : <ol> <li>d'absence de sens</li> <li>de délire à lire</li> </ol> </li> </ul> </div> <div class="exo"> <h2>Exercice 5</h2> Voir le code source de cette page. <table border="2px"> <tr> <td rowspan="2" colspan="2"></td> <td colspan="3">Dates</td> </th> <tr> <td>28/10</td> <td>29/10</td> <td>30/10</td> </tr> <tr> <td rowspan="3">Présents</td> <td>Turing</td> <td>X</td> <td>X</td> <td>X</td> </tr> <tr> <td>Camille</td> <td></td> <td>X</td> <td></td> </tr> <tr> <td>James</td> <td></td> <td>X</td> <td>X</td> </tr> </table> </div> <div class="exo"> <h2>Exercice 6</h2> <h3>question a</h3> <img src="modeleBoite.jpg" alt="" /> <h3>question b</h3> Voir le code source de cette page et le CSS correspondant. <div id="boite"> un texte qu'il s'agit de mettre dans une petite boite rouge de 120 pixels de largeur. Cette boite doit être centrée. </div> </body> </html>