Nous allons créer deux nouveaux fichiers : texte.html et
texte.css
Ces deux nouveaux fichiers seront placés dans notre dossier /HtmlCss/02-Structure/.
Ce qui donnera : /HtmlCss/02-Structure/texte.html et
/HtmlCss/02-Structure/texte.css
Voici le contenu de texte.html :
<!Doctype html> <html> <head> <meta charset="utf-8"> <title>Police css3</title> <link rel="stylesheet" href="texte.css"> <head> <body> <h1>Mon Titre</h1><!-- Titre principal --> <h2>Autre Titre</h2> <!-- SousTitre --> <p>Le Lorem Ipsum <strong>est simplement du faux texte</strong> employé dans la composition et la mise en page avant impression.<br>Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, <cite>quand un peintre anonyme assembla ensemble des morceaux de texte</cite> pour réaliser un livre spécimen de polices de texte.<br>Il n'a pas fait que survivre cinq siècles, mais s'est aussi <strike>adapté à la bureautique</strike> informatique, sans que son contenu n'en soit modifié.<br>Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.<br><br> On sait depuis longtemps que travailler avec du texte lisible et contenant du sens est source de distractions, et empêche de se concentrer sur la mise en page elle-même. L'avantage du Lorem Ipsum sur un texte générique comme 'Du texte. Du texte. Du texte.' est qu'il possède une distribution de lettres plus ou moins normale, et en tout cas comparable avec celle du français standard. De nombreuses suites logicielles de mise en page ou éditeurs de sites Web ont fait du Lorem Ipsum leur faux texte par défaut, et une recherche pour 'Lorem Ipsum' vous conduira vers de nombreux sites qui n'en sont encore qu'à leur phase de construction. Plusieurs versions sont apparues avec le temps, parfois par accident, souvent intentionnellement (histoire d'y rajouter de petits clins d'oeil, voire des phrases embarassantes). </p> </body> </html>Décryptons ensemble les données saisies :
body{ font-family: verdana; }Dévryptons ensemble le code css ci-dessus :
Nous allons créer deux nouveaux fichiers : texte2.html et
texte2.css
Ces deux nouveaux fichiers seront placés dans notre dossier /HtmlCss/02-Structure/.
Ce qui donnera : /HtmlCss/02-Structure/texte2.html et
/HtmlCss/02-Structure/texte2.css
Voici le contenu de texte2.html :
<!Doctype html> <html> <head> <meta charset="utf-8"> <title>Police css3</title> <link rel="stylesheet" href="texte2.css"> <head> <body> <h1>Mon Titre</h1><!-- Titre principal --> <h2>Autre Titre</h2> <!-- SousTitre --> <p>Le Lorem Ipsum <strong>est simplement du faux texte</strong> employé dans la composition et la mise en page avant impression.<br>Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, <cite>quand un peintre anonyme assembla ensemble des morceaux de texte</cite> pour réaliser un livre spécimen de polices de texte.<br>Il n'a pas fait que survivre cinq siècles, mais s'est aussi <strike>adapté à la bureautique</strike> informatique, sans que son contenu n'en soit modifié.<br>Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.<br><br> On sait depuis longtemps que travailler avec du texte lisible et contenant du sens est source de distractions, et empêche de se concentrer sur la mise en page elle-même. L'avantage du Lorem Ipsum sur un texte générique comme 'Du texte. Du texte. Du texte.' est qu'il possède une distribution de lettres plus ou moins normale, et en tout cas comparable avec celle du français standard. De nombreuses suites logicielles de mise en page ou éditeurs de sites Web ont fait du Lorem Ipsum leur faux texte par défaut, et une recherche pour 'Lorem Ipsum' vous conduira vers de nombreux sites qui n'en sont encore qu'à leur phase de construction. Plusieurs versions sont apparues avec le temps, parfois par accident, souvent intentionnellement (histoire d'y rajouter de petits clins d'oeil, voire des phrases embarassantes). </p> </body> </html>
/* utilisation d'une police css3 à l'aide d'une url */ @font-face { font-family: 'Cabin'; font-style: normal; font-weight: 400; src: local('Cabin Regular'), local('Cabin-Regular'), url(https://fonts.gstatic.com/s/cabin/v8/yQOMOX5hR0-6LTD879t-PQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; } body{ font-family: "Cabin"; } h1{ text-align: center; /* alignement du texte */ color: #336699; /* couleur */ letter-spacing: 3px; /* espacement entre les lettres */ font-size: 50px; /* taille */ }Dévryptons ensemble le code css ci-dessus :
<!Doctype html> <html> <head> <meta charset="utf-8"> <title>Police css3</title> <link rel="stylesheet" href="texte2.css"> <link href="http://fonts.googleapis.com/css?family=Roboto:400,900italic,900,700italic,700,500italic,500,400italic,300italic,300,100italic,100" rel="stylesheet" type="text/css"> <head> <body> <h1>Mon Titre</h1><!-- Titre principal --> <h2>Autre Titre</h2> <!-- SousTitre --> <p>Le Lorem Ipsum <strong>est simplement du faux texte</strong> employé dans la composition et la mise en page avant impression.<br>Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, <cite>quand un peintre anonyme assembla ensemble des morceaux de texte</cite> pour réaliser un livre spécimen de polices de texte.<br>Il n'a pas fait que survivre cinq siècles, mais s'est aussi <strike>adapté à la bureautique</strike> informatique, sans que son contenu n'en soit modifié.<br>Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.<br><br> On sait depuis longtemps que travailler avec du texte lisible et contenant du sens est source de distractions, et empêche de se concentrer sur la mise en page elle-même. L'avantage du Lorem Ipsum sur un texte générique comme 'Du texte. Du texte. Du texte.' est qu'il possède une distribution de lettres plus ou moins normale, et en tout cas comparable avec celle du français standard. De nombreuses suites logicielles de mise en page ou éditeurs de sites Web ont fait du Lorem Ipsum leur faux texte par défaut, et une recherche pour 'Lorem Ipsum' vous conduira vers de nombreux sites qui n'en sont encore qu'à leur phase de construction. Plusieurs versions sont apparues avec le temps, parfois par accident, souvent intentionnellement (histoire d'y rajouter de petits clins d'oeil, voire des phrases embarassantes). </p> </body> </html>Dans ce contexte, nous n'avons pas besoin d'utiliser la régle
@font-face
car elle est déjà présente dans le fichier CSS que nous chargeons.html, body { margin: 0; font-family: 'Roboto', sans-serif; font-size: 0.9em; }
Nous allons créer deux nouveaux fichiers : texte3.html et
texte3.css
Ces deux nouveaux fichiers seront placés dans notre dossier /HtmlCss/02-Structure/.
Ce qui donnera : /HtmlCss/02-Structure/texte3.html et
/HtmlCss/02-Structure/texte3.css
Voici le contenu de texte3.html :
<!Doctype html> <html> <head> <meta charset="utf-8"> <title>Police css3</title> <link rel="stylesheet" href="texte3.css"> <head> <body> <h1>Mon Titre</h1><!-- Titre principal --> <h2>Autre Titre</h2> <!-- SousTitre --> <p>Le Lorem Ipsum <strong>est simplement du faux texte</strong> employé dans la composition et la mise en page avant impression.<br>Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, <cite>quand un peintre anonyme assembla ensemble des morceaux de texte</cite> pour réaliser un livre spécimen de polices de texte.<br>Il n'a pas fait que survivre cinq siècles, mais s'est aussi <strike>adapté à la bureautique</strike> informatique, sans que son contenu n'en soit modifié.<br>Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.<br><br> On sait depuis longtemps que travailler avec du texte lisible et contenant du sens est source de distractions, et empêche de se concentrer sur la mise en page elle-même. L'avantage du Lorem Ipsum sur un texte générique comme 'Du texte. Du texte. Du texte.' est qu'il possède une distribution de lettres plus ou moins normale, et en tout cas comparable avec celle du français standard. De nombreuses suites logicielles de mise en page ou éditeurs de sites Web ont fait du Lorem Ipsum leur faux texte par défaut, et une recherche pour 'Lorem Ipsum' vous conduira vers de nombreux sites qui n'en sont encore qu'à leur phase de construction. Plusieurs versions sont apparues avec le temps, parfois par accident, souvent intentionnellement (histoire d'y rajouter de petits clins d'oeil, voire des phrases embarassantes). </p> </body> </html>Décryptons ensemble les données saisies :
@font-face { font-family: 'folksbold'; src: url('police/Folks-Bold-webfont.eot'); src: url('police/Folks-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('police/Folks-Bold-webfont.woff') format('woff'), url('police/Folks-Bold-webfont.ttf') format('truetype'), url('police/Folks-Bold-webfont.svg#folksbold') format('svg'); font-weight: normal; font-style: normal; } body{ font-family: 'folksbold'; }Dévryptons ensemble le code css ci-dessus :
HTML CSS
1. Introduction Html Css 2. Structure D'une Page Html 3. Structure D'un Fichier Css 4. Les Polices D'ecriture 5. Les Selecteurs 6. Firebug 7. Styles Css 8. L'heritage 9. Les Images 10. Les Positionnements 11. Le Zoning 12. Les Tableaux 13. Les Listes 14. Les Liens Et Ancres 15. Menu De Navigation 16. Les Formulaires 17. Donnees Multimedia 18. Balises Html Et Proprietes Css 19. Cas Pratique 20. Creation D'un Site Web