Cours HTML - CSS

Développer en HTML /CSS
Janvier 2021 - Digital College

Je suis qui ?
Aujourd’hui
Développement / Stratégie digitale
Expérience
Mathéo Lienard Agence web (Altamys)
Conseil (Devoteam, Algofi)
Freelance
Fonctionnement d'une
page web
Composants du HTML
Programme Fonctionnement du HTML
Pratique : création de votre
d'aujourd'hui
première page web
Eléments supplémentaires
Pratique : styliser et
complexifier votre page
Fonctionnement d’un site web
HTML CSS JavaScript
La structure Le style L’interactivité

Composants d’une page HTML
D’une syntaxe Word
Texte Listes
Lien hypertexte
Titre 1 Liste ordonnée
1. Objet 1
Titre 2 2. Objet 2
3. Objet 3
Titre 3
Titre 4 Liste non-ordonnée

• Objet 1
paragraphe
• Objet 2
Image
• Objet 3
A la syntaxe HTML
Texte Listes
a
h1 ol
1. li
h2 2. li
3. li
h3
h4 ul
• li
p
• li
img
• li
A du code
Texte Listes
<a> Lien hypertexte </a>
<h1> Titre 1 </h1> <ol>
<li> Objet 1 </li>
<h2> Titre 2 </h2> <li> Objet 2 </li>
<li> Objet 3 </li>
<h3> Titre 3 </h3>
</ol>
<h4> Titre 4 </h4>
<ul> <img src=« ballon.jpg »>
<p> paragraphe <p>
<li> Objet </li>
<li> Objet </li>
<li> Objet </li>
</ul>
Structure d’un page HTML – Le sandwich
<head>
<html> <meta charset=‘UTF-8’>

<meta name=‘viewport’
<head> content=‘width=device-width, initial-scale=0.1’>
</head>
<html>
</html> <title> Titre de la page</title>
<body> <link rel=‘stylesheet’ href=‘style.css’>
</body> <link rel=‘stylesheet’ href=‘https://fichiercss.fr’>
</html> </head>
Structure d’un page HTML – Le sandwich
<body>
<h1> Titre de la page </h1>

<p> Paragraphe d’introduction </p>
<html>
<h2> Titre de partie 1 </h2>
<head>
<p> Paragraphe d’introduction partie 1 </p>
</head>
<html> <h3> Titre sous-partie 1 </h3>
</html> <p> Paragraphe sous-partie 1</p>
<body>

</body>
<img src=« ballon.jpg » >
</html>
<h3> Titre sous-partie 2 </h3>
<p> Paragraphe sous-partie 2</p>
</body>
PRATIQUE
Requis :
Créer une Un titre de page

Une balise h1
page
Un lien vers une
page web
Deux images
biographique Une liste

Introduction au CSS
body {
background-color: blue;
}
h1 {
TITRE DE LA PAGE
background-color: red;
}
Ceci est un paragraphe affecté par du CSS, la taille
du texte est de 20 pixels et il est aligné au centre de
son parent p{
font-size: 20px;
text-align: center;
color: white;
}
Les classes en HTML
<body>

L'attribut universel class indique une <p> Paragraphe d’introduction </p>
liste de classes associées à l'élément
courant. Les classes permettent de <div class=”sous-partie”>
manipuler les éléments, via le CSS et <h2> Titre de partie 1 </h2>
le JavaScript. <p class=”texte-paragraphe”> Paragraphe
d’introduction partie 1 </p>
L’intérêt des classes est de permettre <h3> Titre sous-partie 1 </h3>
de regrouper des éléments identiques <p class=”texte-paragraphe”> Paragraphe
dans un même groupe pour les sous-partie 1</p>
modifier tous de la même manière 
</div>
</body>
Les ID en HTML
<body>

L'attribut universel ID définit un <p> Paragraphe d’introduction </p>
identifiant qui doit être unique pour
l'ensemble du document. <div class=”sous-partie”>
Il doit servir pour cibler un seul <p class=”texte-paragraphe”> Paragraphe
élément, par exemple pour ajouter d’introduction partie 1 </p>
des variations a un seul élément d’une <h3> Titre sous-partie 1 </h3>
classe. <p class=”texte-paragraphe” id=”paragraphe-2”>
Paragraphe sous-partie 1</p>
</div>
</body>
Découvrir les DIV
Découvrir les DIV
Découvrir les DIV
Découvrir les DIV
Structurer son HTML avec des div
<body>

<p> Paragraphe d’introduction </p>
<div class=”premiere-partie”>
<p> Paragraphe d’introduction partie 1 </p>
<h3> Titre sous-partie 1 </h3>
<p> Paragraphe sous-partie 1</p>
</div>
</body>
Les propriétés CSS : les bordures
Les propriétés CSS : les ombres
Les propriétés CSS : flexbox
De nouveaux éléments HTML
Créer plusieurs pages et naviguer entre elles
https://slack.com/intl/fr-fr/
https://explore.zoom.us/fr/products/m
eetings/
https://github.com/
Les propriétés CSS : hover
Le sélectionneur hover
permet de changer les
propriétés de l’élément au
survol
On peut jouer sur la

transition avec les
propriétés suivantes
La propriété transition
raccourcie

Cours HTML - CSS

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Cours HTML - CSS

Caricato da

Copyright:

Formati disponibili

Développer en HTML /CSS

Janvier 2021 - Digital College

Programme Fonctionnement du HTML

Pratique : création de votre

HTML CSS JavaScript

La structure Le style L’interactivité

Titre 4 Liste non-ordonnée

<html> <meta charset=‘UTF-8’>

<h1> Titre de la page </h1>

Créer une Un titre de page

biographique Une liste

<h1> Titre de la page </h1>

<h1> Titre de la page </h1>

<h1> Titre de la page </h1>

On peut jouer sur la

Potrebbero piacerti anche