Scribd
Importer
4 vues3 pages

Guide Complet HTML CSS

Ce document fournit un guide explicatif sur HTML et CSS, détaillant leur fonctionnement et leur utilisation à travers des exemples pratiques. Il couvre la structure des pages web, les balises HTML, le design avec CSS, le Box Model, Flexbox, ainsi que des concepts comme les classes, les IDs, et le responsive design. Enfin, il suggère que la maîtrise de HTML et CSS ouvre la voie à l'apprentissage de JavaScript pour créer des sites interactifs.

Transféré par

mkiendrebeogo211
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
4 vues3 pages

Guide Complet HTML CSS

Ce document fournit un guide explicatif sur HTML et CSS, détaillant leur fonctionnement et leur utilisation à travers des exemples pratiques. Il couvre la structure des pages web, les balises HTML, le design avec CSS, le Box Model, Flexbox, ainsi que des concepts comme les classes, les IDs, et le responsive design. Enfin, il suggère que la maîtrise de HTML et CSS ouvre la voie à l'apprentissage de JavaScript pour créer des sites interactifs.

Transféré par

mkiendrebeogo211
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Guide Explicatif HTML & CSS

Ce document explique clairement le fonctionnement du HTML et du CSS avec des exemples pratiques.

1. HTML : La structure d’un site web

HTML sert à créer la structure d’une page web : titres, paragraphes, images, boutons, formulaires, etc.
<!DOCTYPE html>
<html>
<head>
<title>Mon Site</title>
</head>

<body>
<h1>Bonjour</h1>
<p>Bienvenue sur mon site.</p>
</body>
</html>

2. Les balises HTML importantes

Les balises permettent de créer différents éléments sur une page web.
<h1>Titre</h1>
<p>Paragraphe</p>
<button>Cliquer</button>
<img src="[Link]">
<a href="#">Lien</a>

3. CSS : Le design du site

CSS permet de styliser les éléments HTML : couleurs, tailles, espaces, animations, etc.
h1{
color: red;
font-size: 50px;
}

4. Le Box Model

Tous les éléments HTML sont des boîtes contenant margin, border, padding et content.
div{
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 30px;
}

5. Flexbox
Flexbox permet d’aligner facilement les éléments horizontalement et verticalement.
.container{
display: flex;
justify-content: center;
align-items: center;
}

6. justify-content

Aligne les éléments horizontalement.


justify-content: center;
justify-content: space-between;
justify-content: flex-end;

7. align-items

Aligne les éléments verticalement.


align-items: center;
align-items: flex-start;
align-items: flex-end;

8. flex-grow, flex-shrink et flex-basis

Ces propriétés contrôlent la taille flexible des éléments.


.box1{
flex-grow: 1;
}

.box2{
flex-grow: 2;
}

.box{
flex-basis: 200px;
}

9. Classes et IDs

Les classes sont réutilisables. Les IDs sont uniques.


<div class="box"></div>
<div id="menu"></div>

.box{
background: red;
}

#menu{
background: black;
}
10. Hover et effets

La pseudo-classe :hover ajoute des effets au passage de la souris.


button:hover{
background: red;
}

11. Responsive Design

Permet d’adapter le site aux téléphones et tablettes.


@media(max-width:768px){

body{
background: lightblue;
}

12. Mini projet complet

Exemple simple d’une carte moderne.


<div class="card">
<h1>■ Boucherie Premium</h1>
<p>Viande fraîche chaque jour</p>
<button>Acheter</button>
</div>

.card{
width:300px;
padding:20px;
background:white;
border-radius:10px;
}

Après avoir maîtrisé HTML et CSS, l’étape suivante est JavaScript pour rendre les sites interactifs.

Vous aimerez peut-être aussi