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 .
le code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<audio preload="auto" autoplay>
<source src="https://soundfxcenter.com/movies/star-wars/8d82b5_Star_Wars_Main_Theme_Song.mp3" type="audio/mpeg">
</audio>
<div class="star-wars-intro">
<p class="intro-text">
Il y a bien longtemps, dans une galaxie lointaine,
très lointaine...
</p>
<h2 class="main-logo">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/5a/Star_Wars_Logo..png">
</h2>
<div class="main-content">
<div class="title-content">
<p class="content-header">EPISODE IV<br />Une nouvelle matière</p>
<br>
<p class="content-body">
<center> <h1> SNT </h1>
</center>
</p>
<p class="content-body">
<center> Science
</center>
</p>
<p class="content-body">
<center> Numérique
</center>
</p>
<p class="content-body">
<center> et Technologie
</center>
</p>
<p class="content-body">
<center>
Vous découvrirez:
</center>
</p>
<p class="content-body">
<center>
internet ,web
</center>
</p>
<p class="content-body">
<center>
photo numérique, réseaux sociaux
</center>
</p>
<p class="content-body">
<center>
données structurées, localisation
</center>
</p>
<p class="content-body">
<center>
info embarquée,python
</center>
</p>
<p class="content-body">
<center>
mais aussi...
</center>
</p>
<p class="content-body">
<center>
</center>
</p>
</p>
</div>
</div>
</div>
</body>
</html>
<style>
@font-face {
font-family: "Droid Sans";
src: url("/fonts/DroidSans.ttf") format("ttf");
}
body, html{
height: 100%;
min-height: 100vh;
margin: 0px;
}
.star-wars-intro {
width: 100%;
height: 100%;
font-family: "Droid Sans", arial, verdana, sans-serif;
font-weight: 700;
color: #EBD71C;
background-color: #000;
overflow: hidden;
position: relative;
}
.star-wars-intro p.intro-text {
position: relative;
max-width: 16em;
font-size: 200%;
font-weight: 400;
margin: 20% auto;
color: #4ee;
opacity: 0;
z-index: 1;
text-align: center;
animation: intro 2s ease-out;
-webkit-animation: intro 2s ease-out;
-moz-animation: intro 2s ease-out;
-ms-animation: intro 2s ease-out;
}
.star-wars-intro .main-content{
margin-left: auto;
margin-right: auto;
position: absolute;
z-index: 3;
width: 100%;
height: 50em;
bottom: 0;
font-size: 80px;
font-weight: bold;
text-align: justify;
overflow: hidden;
transform-origin: 50% 100%;
transform: perspective(200px) rotateX(25deg);
}
.star-wars-intro .main-content:after {
position: absolute;
content: ' ';
top: 0;
bottom: 60%;
background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
pointer-events: none;
}
.star-wars-intro .title-content {
position: absolute;
top: 100%;
animation: scroll 120s linear 4s forwards;
}
.star-wars-intro .title-content > .content-header {
text-align: center;
}
.star-wars-intro .main-logo {
position: absolute;
width: 2.6em;
left: 50%;
top: 5vh;
font-size: 10em;
text-align: center;
margin-left: -1.3em;
line-height: 0.8em;
letter-spacing: -0.05em;
color: #000;
text-shadow: -2px -2px 0 #EBD71C, 2px -2px 0 #EBD71C, -2px 2px 0 #EBD71C, 2px 2px 0 #EBD71C;
opacity: 0;
z-index: 1;
-webkit-animation: logo 10s ease-out 2.5s;
-moz-animation: logo 10s ease-out 2.5s;
-ms-animation: logo 10s ease-out 2.5s;
-o-animation: logo 10s ease-out 2.5s;
animation: logo 10s ease-out 2.5s;
}
.star-wars-intro .main-logo > img {
max-width: 100%;
}
@-webkit-keyframes intro {
0% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; }
}
@-moz-keyframes intro {
0% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; }
}
@-ms-keyframes intro {
0% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; }
}
@-o-keyframes intro {
0% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes intro {
0% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; }
}
@-webkit-keyframes logo {
0% { -webkit-transform: scale(1); opacity: 1; }
50% { opacity: 1; }
100% { -webkit-transform: scale(0.1); opacity: 0; }
}
@-moz-keyframes logo {
0% { -moz-transform: scale(1); opacity: 1; }
50% { opacity: 1; }
100% { -moz-transform: scale(0.1); opacity: 0; }
}
@-ms-keyframes logo {
0% { -ms-transform: scale(1); opacity: 1; }
50% { opacity: 1; }
100% { -ms-transform: scale(0.1); opacity: 0; }
}
@-o-keyframes logo {
0% { -o-transform: scale(1); opacity: 1; }
50% { opacity: 1; }
100% { -o-transform: scale(0.1); opacity: 0; }
}
@keyframes logo {
0% { transform: scale(1); opacity: 1; }
50% { opacity: 1; }
100% { transform: scale(0.1); opacity: 0; }
}
@keyframes scroll {
0% { top: 100%; }
100% { top: -170%; }
}
@media screen and (max-width: 720px) {
.star-wars-intro .main-content {
font-size: 35px;
}
.star-wars-intro .title-content {
position: absolute;
top: 100%;
animation: scroll 100s linear 4s forwards;
}
}
</style>