Scribd
Importer
19 vues6 pages

Atelier HTML Css

Le document présente les bases de la création de sites web avec HTML et CSS, où HTML structure le contenu et CSS le met en forme. Il couvre les éléments fondamentaux d'HTML, tels que les balises de texte, les liens, les images, les listes, les tableaux et les formulaires, ainsi que les principes de mise en forme avec CSS, y compris les sélecteurs et le modèle de boîte. Un exemple complet d'un mini site est également fourni pour illustrer l'application de ces concepts.

Transféré par

Speed Connect
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
19 vues6 pages

Atelier HTML Css

Le document présente les bases de la création de sites web avec HTML et CSS, où HTML structure le contenu et CSS le met en forme. Il couvre les éléments fondamentaux d'HTML, tels que les balises de texte, les liens, les images, les listes, les tableaux et les formulaires, ainsi que les principes de mise en forme avec CSS, y compris les sélecteurs et le modèle de boîte. Un exemple complet d'un mini site est également fourni pour illustrer l'application de ces concepts.

Transféré par

Speed Connect
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

1.

Introduction
HTML et CSS sont les bases de la création de sites web :

HTML (HyperText Markup Language)


(titres, paragraphes, images, liens, tableaux, formulaires, etc.).
CSS (Cascading Style Sheets) sert à mettre en forme ce contenu (couleurs, tailles,
marges, positionnement, design responsive).

Image mentale : HTML = squelette du site, CSS = habits et style.

2. HTML Les Fondamentaux

<!DOCTYPE html>
<html>
<head>
<title>Ma première page</title>
</head>
<body>
<h1>Bienvenue dans mon site</h1>
<p>Ceci est mon premier paragraphe en HTML.</p>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<body>
2.2 Balises de texte
<h1>Titre principal</h1>
<h2>Sous-titre</h2>
<p>Voici un paragraphe de texte.</p>
<strong>Texte en gras</strong>
<em>Texte en italique</em>

2.3 Liens et images


<a href="[Link] sur Google</a>
<img src="[Link]" alt="Description de l'image">

2.4 Listes
<ul>
<li>Pomme</li>
<li>Banane</li>
</ul>

<ol>
<li>Étape 1</li>
<li>Étape 2</li>
</ol>

<ul> = liste à puces


<ol> = liste numérotée
2.5 Tableaux
<table border="1">
<tr>
<th>Nom</th>
<th>Âge</th>
</tr>
<tr>
<td>Ali</td>
<td>20</td>
</tr>
</table>

2.6 Formulaires
<form>
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom">

<label for="email">Email :</label>


<input type="email" id="email" name="email">

<button type="submit">Envoyer</button>
</form>
3. CSS Mise en forme

3.1

- En ligne (inline)

<p style="color: red;">Texte rouge</p>

- Interne (dans le fichier HTML)

<head>
<style>
p { color: blue; }
</style>
</head>

- Externe (fichier séparé [Link])

<link rel="stylesheet" href="[Link]">

3.2 Sélecteurs de base


/* Sélection par balise */
p { color: green; }

/* Sélection par classe */


.important { font-weight: bold; }

/* Sélection par id */
#titre { font-size: 24px; }
3.3 Propriétés courantes
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}

h1 {
color: blue;
text-align: center;
}

p{
color: #333;
line-height: 1.5;
}

3.4 Box Model (très important)

Chaque élément HTML est une boîte avec :

margin (marge extérieure)

border (bordure)

padding (espacement interne)

div {
width: 200px;
height: 100px;
margin: 20px;
padding: 10px;
border: 2px solid black;
}
4. Exemple Complet (mini site)
[Link]

<!DOCTYPE html>
<html>
<head>
<title>Mon site</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>Bienvenue</h1>
<p>Ceci est mon premier site avec HTML et CSS.</p>
<a href="#">Cliquez ici</a>
</body>
</html>

[Link]

body {
background-color: #f5f5f5;
font-family: Arial;
}

h1 {
color: darkblue;
text-align: center;
}

a{
color: red;
text-decoration: none;
}

Vous aimerez peut-être aussi