Langages HTML et CSS
Distinguer ce qui relève du contenu d’une page et de son style de
présentation.Étudier et modifier une page HTML simple.
HTML est un langage de description(pas de programmation) du contenu(le fond) d'une page Web
CSS permet de définir la mise en forme de ce document HTML.
Editeur en ligne : THIMBLE(Mozilla) CODEPEN.IO JSFIDDLE JSBIN
Editeur hors ligne: Notepad++, BlocNote ...
le code
<head>
<style>
@import url(https://fonts.googleapis.com/css?family=Montserrat);
html,
body {
height: 100%;
font-weight: 800;
}
body {
background: #030321;
font-family: Arial;
}
svg {
display: block;
font: 10.5em 'Montserrat';
width: 960px;
height: 300px;
margin: 0 auto;
}
.text-copy {
fill: none;
stroke: white;
stroke-dasharray: 6% 29%;
stroke-width: 5px;
stroke-dashoffset: 0%;
animation: stroke-offset 5.5s infinite linear;
}
.text-copy:nth-child(1) {
stroke: #4D163D;
animation-delay: -1;
}
.text-copy:nth-child(2) {
stroke: #840037;
animation-delay: -2s;
}
.text-copy:nth-child(3) {
stroke: #BD0034;
animation-delay: -3s;
}
.text-copy:nth-child(4) {
stroke: #BD0034;
animation-delay: -4s;
}
.text-copy:nth-child(5) {
stroke: #FDB731;
animation-delay: -5s;
}
@keyframes stroke-offset {
100% {
stroke-dashoffset: -35%;
}
}
</style>
</head>
<svg viewBox="0 0 1200 600">
<symbol id="s-text">
<text text-anchor="middle" x="50%" y="30%">Sciences</text>
<text text-anchor="middle" x="50%" y="60%">Numériques </text>
<text text-anchor="middle" x="50%" y="90%">& Technologie</text>
</symbol>
<g class="g-ants">
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
</g>
</svg>
Découverte: TP en ligne! cliquer ici .
