Exercice 4 : Réalisez un mini site comprenant votre CV selon le descriptif suivant: • Un tableau avec bordure fine qui comportera les informations "standards"
Exercice 1 : création de votre première page html Préparez Exercice 3 : Formatage de texte Vous allez utiliser les tableaux pour la page "contact html"
Après avoir réalisé tous les exercices de chaque chapitre vous allez pouvoir vérifier les compétences acquises à l'aide du tableau des objectifs Celui-ci sert à la
Rappel : n'hésitez pas `a consulter le cours correspondant sur Html et Css surtout pas de copier/coller depuis ce sujet, car les caract`eres générés dans le pdf ne Un tableau de trois colonnes et au moins 4 lignes présentant plusieurs
Licence Informatique. Première Année. Semestre 1. Cours Environnement Système et Réseaux. Travaux Pratiques.
@ 2010-2011
Exercice 6 Les tableaux
1. Créez un fichier mon-cv.html dans le répertoire /EnvSystemeReseau/tp-html. Copiez-y le
contenu du fichier base.html.
2. Complétez le contenu de la balise imbriquée dans <head> avec le titre suivant : Curriculum</h4> <h3>Vitae de Nom Prénom.</h3> <h4>3. Souvent, pour présenter des informations structurées en lignes et en colonnes, on utilise les tableaux. La</h4> balise <table> permet d'insérer un tableau dans une page Web. Un tableau est défini de la manière suivante : | Le tableau commence par la balise ouvrante <table> et se termine par la balise fermante </table>. | On utilise la balise <tr> (table row) pour insérer une nouvelle ligne. | On utilise la balise <td> (table data) pour insérer une nouvelle cellule dans une ligne. | On utilise la balise <th> (table head) pour insérer un titre de ligne ou de colonne Voici un exemple de tableau et le résutlat de son affichage : <h4>1. Dans cet exemple, tous les élément <th> ont un attribut style de même valeur, et tous les éléments <td></h4> <p>ont un attribut style de même valeur. Afin d'appliquer les mêmes styles à plusieurs balises sans les répéter dans</p> <p>Licence Informatique. Première Année. Semestre 1. Cours Environnement Système et Réseaux. Travaux Pratiques.</p> @ 2010-2011 <p>chacune des balises concernées, on peut définir une feuille de style interne. Pour cela on utilise la balise</p> <style> dans l'en-tête <head> du document. <h3>En voici un exemple :</h3> <p>Le résultat de l'affichage est le même que celui du tableau précédent. La balise <style> contient 3 règles CSS :</p> <p>la première s'applique à tous les éléments <table> de la page, la second s'applique à tous les éléments <th> de</p> <p>tous les tableaux de la page, la troisième s'applique à tous les éléments <td> de tous les tableaux de la page.</p> <h4>2. Il existe 3 manières de définir des styles CSS :</h4> | les styles en ligne : dans le code HTML, avec l'attribut style dans chaque élément | les styles incorporés : dans l'en-tête de la page, avec la balise <style> <p>| les styles externes : dans une feuille de style séparée (un fichier dont le nom a pour extension .css,</p> <p>fichier.css dans l'exemple suivant). Une feuille de style externe peut être appliquée à n'importe</p> <p>quel fichier HTML. Il suffit, pour cela, d'insérer, dans le fichier HTML concerné, une balise <link> de la</p> manière suivante : <p>Licence Informatique. Première Année. Semestre 1. Cours Environnement Système et Réseaux. Travaux Pratiques.</p> @ 2010-2011 <h4>1. Dans le fichier mon-cv.html, nous allons créer 3 sections : diplômes, expériences professionnelles et</h4> loisirs. Vous définirez les styles en interne ou en externe. <p>| Le titre de chaque section sera inséré à l'aide d'une balise <h3>. Il sera affiché en bleu (color:</p> blue;) et centré horizontalement (text-align: center). | Le contenu de chaque section sera un tableau. <p>| Dans la section Diplômes, le tableau contiendra autant de lignes que de diplômes que vous avez obtenus.</p> <p>Il sera divisé en 3 colonnes dont les titres seront : Année, Diplôme, Établissement. Le contenu des cellules sera</p> aligné à gauche (text-align: left;) <p>| Dans la section Expériences professionnelles, le tableau sera divisé en 3 colonnes dont les titres seront :</p> <p>Période, Établissement, Poste occupé. Le contenu des cellules sera également aligné à gauche.</p> <p>| Dans la section Loisirs, le tableau contiendra 3 lignes dont les titres seront : langues, activités artistiques</p> et sports. Chaque ligne contient 2 colonnes. <h4>1. Ajoutez un titre principal à votre page à l'aide d'une balise <h1> que vous formaterez selon votre goût.</h4> <h4>2. Ajoutez également une section contenant votre identité et vos coordonnées (Nom et prénom, adresse</h4> postale, adresse électronique, numéros de téléphone fixe et portable). fichier.css fichier.htmlquotesdbs_dbs20.pdfusesText_26
</div>
</div>
<div class="left">
<br/>
<div style="width:100%;min-height:300px !important;padding:2px;">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1570187411384203"
crossorigin="anonymous"></script>
<!-- Responsive1 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1570187411384203"
data-ad-slot="2836242943"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<div>
<!-- The Modal -->
<div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="closeA">×</span>
if you Get <b>No preview available</b> Click on (Next PDF) <a href="https://pdfprof.com/PDFV2/Documents3/22675/25/3" class="bblinkss"> Next PDF </a>
<iframe frameBorder="0" width="100%" height="50" frameBorder="0" src="https://pdfprof.com/PDFV2/ShowLink.php?links=http://people.rennes.inria.fr/Kevin.Jordao/ens/ESR/%5BESR%5D%2520TP4%2520-%2520HTML.pdf" ></iframe>
<iframe id="ppif" frameBorder="0" width="100%" src="https://pdfprof.com/PDFV2/getFrameTestV3.php?links=http://people.rennes.inria.fr/Kevin.Jordao/ens/ESR/%5BESR%5D%2520TP4%2520-%2520HTML.pdf&idt=22675&t=25&view=1&url=https://pdfprof.com/PDFV2/Documents3/22675/25/1" style="width:100%;height:90vh;" ></iframe>
</div>
</div>
</div>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 10px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 5px;
border: 1px solid #888;
width: 85%;
}
/* The Close Button */
.closeA {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
background:red;
padding:1px;
}
.closeA:hover,
.closeA:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("closeA")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
[PDF] Exercice 6 – Les tableaux - Inria