Utiliser le langage HTML Transférer des fichiers sur un serveur web Mettre en forme des pages avec le CSS Internet est il dangereux ? Créer un clef usb "Lubuntu" bootable
Le CSS (Cascading Style Sheets) est un code qui permet de définir la mise en page.
On défini une mise en page commune dans un fichier CSS qui sera appelé par chaque page HTML :
Le fichier html :
On rajoute le code qui va appeler le fichier "style.css" :
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Premiers tests du CSS</title>
</head>
Le fichier css :
On crée un fichier style.css qui va décrire la mise en page :
Par exemple, les paragraphes seront bleus.
p
{
color: blue;
}
On trouve trois éléments :
Les noms de balises : on écrit les noms des balises dont on veut modifier l’apparence. Par exemple, l’apparence de tous les paragraphes, on écrit p.
Des propriétés CSS : les mises en form de la page sont rangées dans des propriétés. Par exemple, la propriété "color" pour la couleur du texte, "font-size" pour la taille du texte...
Les valeurs : pour chaque propriété CSS, on indique une valeur. Par exemple, pour la propriété "color", le nom de la couleur. Pour "font-size", la taille...
Le fichier css suivant permet de créer un menu sur la gauche
<style type="text/css">
body {
margin: 0;
padding: 0;
}
h1 {
margin: 0 0 15px 0;
padding: 0;
font-size: 120%;
font-weight: bold;
}
p {
font-size: 14px;
margin: 0 0 15px 0;
padding: 0;
}
a {
font-size: 11px;
text-decoration: none;
font-weight: bold;
color: #ff0000;
}
a:link {
color: #666;
}
a:visited {
color: #999;
}
a:hover {
background-color: #ccc;
color: #333;
}
ul, li {
list-style: none;
padding: 0;
margin: 0;
}
#contenu {
margin: 0 50px 50px 200px;
padding: 10px;
}
#menu {
position: absolute;
top: 50px;
left: 20px;
width: 150px;
padding: 10px;
line-height: 20px;
background-color: #f4f4f4;
border: 1px solid #000;
}
</style>
Le fichier html suivant appelle le fichier css
<HTML>
<HEAD>
<meta charset="utf-8" />
<link rel="stylesheet" href="menu.css" />
<title>mon site web</title>
<TITLE>acc</TITLE>
</HEAD>
<BODY>
<div id="contenu">
<h1>Le titre ici</h1>
<p>
<p>
Le texte de la page ici</p>
</div>
<div id="menu">
<h1>Navigation</h1>
<ul>
<li><a href="la cible du lien ici" title="">Menu 1</a></li>
<li><a href="" title="">Menu 2</a></li>
<li><a href="" title="">Menu 3</a></li>
<li><a href="" title="">Menu 4</a></li>
<li><a href="" title="">Menu 5</a></li>
<li><a href="" title="">Menu 6</a></li>
</ul>
</div>
</BODY>
</HTML>
On obtient ceci :
Téléchargez d’autres modèles sur ce site :
Réaliser un site web de 4 pages : cahier des charges
index.html | travail1.html : | travail2.html : | tableau.html : |
Un titre qui défile de droite à gauche ; texte de présentation du site web ; sommaire de navigation ; une image en fond de page | le nom du métier qui défile ; un fond en couleur ; texte "nature du métier" ; texte "compétences requises" ; sommaire de navigation ; photos du métier | le nom du métier qui défile ; un fond en couleur ; texte "nature du métier" ; texte "compétences requises" ; sommaire de navigation ; photos du métier | titre "autres métiers" ; fond de page en couleur ; tableau 2 colonnes, 2 lignes : métiers que vous aimeriez faire ou non ; sommaire de navigation |