Salut à tous,
je poste ici mon 2ème message à propos de mon apprentissage du HTML et du CSS:
j'essaye d'insérer dans ma page web la police "GoodDog" que j'ai téléchargé ici:
http://www.fontsquirrel.com/fonts/GoodDog
Après avoir dezippé le fichier j'obtiens un dossier "GoodDog-fontfacekit" avec à l'intérieur 7 fichiers:
- demo.html
- Fonthead Standard EULA.txt
- GoodDog-webfont.eot
- GoodDog-webfont.svg
- GoodDog-webfont.ttf
- GoodDog-webfont.woff
- stylesheet.css
Je mets ensuite ces 7 fichiers dans mon dossier HTML qui comprends mon fichier style.css, mes deux pages test1.html et test2.html et d'autres fichiers audio et photos.
Voici mon fichier style.css:
h1, mark, .page2
{
color: blue;
}
.salutations
{
color: red;
}
p
{
font-size: 1em;
}
h1
{
font-size: 10em;
}
p
{
font-family: Verdana;
}
@font-face {
font-family: 'GoodDog';
src: url('GoodDog-webfont.ttf') format('truetype');
url('GoodDog-webfont.woff') format('woff'),
url('GoodDog-webfont.svg') format('svg');
}
h1
{
font-family: 'GoodDog', Arial, serif;
}
Et mon fichier test1.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Titre</title>
</head>
<body>
<h1> Helloooo ! </h1>
Bonjour et <span class="salutations"><strong>bienvenue</strong></span> sur mon site !
<h2> Mais... </h2>
<p> Pour l'instant c un peu vide mais vous allez voir après<strong>
</strong>
</p>
<h3> T'inquiètes! </h3>
<p> Vous ne serez pas déçu! </p>
<p> Bientôt ce site ressemblera à: <br />
<ol>
<li><mark> Un site au design irréprochable!</mark></li>
<li><mark> Un site avec un contenu irréprochable!</mark></li>
<li><mark> Un site à la sécurité irréprochable!</mark></li>
</ol>
<p> Ah! J'apprends avec <a href="http://www.siteduzero.com" target="_blank" title= "On y apprend tout de zéro">ce site </a> <br />
Alors si vous êtes aussi interessé par l'informatique (comment creer un site, creer un logiciel, jetez-y un oeil ;-)
</p>
<p class= "page2">Cette page commence un peu à se remplir et j'ai apris à creer des liens vers une page web existante
donc maintenant je vais vous proposer d'aller (à l'aide d'un lien) sur <a href= "test2.html">la deuxième page de mon site!
</p>
</body>
</html>
Cependant helloo ! reste toujours sur la meme police.
Pourquoi "Helloooo !" ne prend pas la bonne police.
je poste ici mon 2ème message à propos de mon apprentissage du HTML et du CSS:
j'essaye d'insérer dans ma page web la police "GoodDog" que j'ai téléchargé ici:
http://www.fontsquirrel.com/fonts/GoodDog
Après avoir dezippé le fichier j'obtiens un dossier "GoodDog-fontfacekit" avec à l'intérieur 7 fichiers:
- demo.html
- Fonthead Standard EULA.txt
- GoodDog-webfont.eot
- GoodDog-webfont.svg
- GoodDog-webfont.ttf
- GoodDog-webfont.woff
- stylesheet.css
Je mets ensuite ces 7 fichiers dans mon dossier HTML qui comprends mon fichier style.css, mes deux pages test1.html et test2.html et d'autres fichiers audio et photos.
Voici mon fichier style.css:
h1, mark, .page2
{
color: blue;
}
.salutations
{
color: red;
}
p
{
font-size: 1em;
}
h1
{
font-size: 10em;
}
p
{
font-family: Verdana;
}
@font-face {
font-family: 'GoodDog';
src: url('GoodDog-webfont.ttf') format('truetype');
url('GoodDog-webfont.woff') format('woff'),
url('GoodDog-webfont.svg') format('svg');
}
h1
{
font-family: 'GoodDog', Arial, serif;
}
Et mon fichier test1.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Titre</title>
</head>
<body>
<h1> Helloooo ! </h1>
Bonjour et <span class="salutations"><strong>bienvenue</strong></span> sur mon site !
<h2> Mais... </h2>
<p> Pour l'instant c un peu vide mais vous allez voir après<strong>
</strong> </p>
<h3> T'inquiètes! </h3>
<p> Vous ne serez pas déçu! </p>
<p> Bientôt ce site ressemblera à: <br />
<ol>
<li><mark> Un site au design irréprochable!</mark></li>
<li><mark> Un site avec un contenu irréprochable!</mark></li>
<li><mark> Un site à la sécurité irréprochable!</mark></li>
</ol>
<p> Ah! J'apprends avec <a href="http://www.siteduzero.com" target="_blank" title= "On y apprend tout de zéro">ce site </a> <br />
Alors si vous êtes aussi interessé par l'informatique (comment creer un site, creer un logiciel, jetez-y un oeil ;-)
</p>
<p class= "page2">Cette page commence un peu à se remplir et j'ai apris à creer des liens vers une page web existante
donc maintenant je vais vous proposer d'aller (à l'aide d'un lien) sur <a href= "test2.html">la deuxième page de mon site!
</p>
</body>
</html>
Cependant helloo ! reste toujours sur la meme police.
Pourquoi "Helloooo !" ne prend pas la bonne police.
