Apprendre le language html.
3 participants
Page 1 sur 1
Apprendre le language html.
Ce court tutoriel est destiné à ceux qui commencent à utiliser CSS et n'ont jamais écrit de feuille de style CSS.
Il n'explique pas CSS en profondeur. Il explique comment créer un fichier HTML, un fichier CSS et comment les faire fonctionner ensemble. Après cela, vous pourrez lire d'autres tutoriels afin d'ajouter plus de caractéristiques à vos fichiers HTML et CSS. Ou bien vous pouvez utiliser un éditeur HTML ou CSS afin de mettre en place des sites complexes.
A la fin de ce tutoriel, vous aurez fait un fichier HTML qui ressemble à cela:
Page HTML résultante, couleurs et disposition effectuées avec CSS.
Notez que je ne prétends pas que c'est joli
Voici un exemple de section optionelle. Elles contiennent des explications supplémentaires du langage HTML etTML et du code CSS des exemples. L'icone "alerte!" qui les précède indique que la section contient des informations plus avancéees que le reste.
ETAPE 1: LE LANGAGE HTML
Pour ce tutoriel, je vous recommande d'utiliser des outils simples comme Blocnote (Windows), TextEdit (Mac) ou KEdit (KDE). Une fois que vous aurez intégré ces principes, vous pourrez facilementement utiliser des outils plus avancés, ou des logiciels commerciaux tels que Style Master, Dreamweaver ou GoLive. Cependant pour votre première feuille de style CSS, il vaut mieux que vous ne soyiez pas distrait par de nombreuses caractéristiques avancées.
N'utilisez pas un logiciel de traitement de texte, tels que Microsoft Word ou OpenOffice, car ils produisent des fichiers qu'un navigateur Web ne sait pas lire. Pour HTML et CSS, nous voulons de simples fichiers texte.
L'étape 1 est d'ouvrir votre éditeur de texte (Notepad, TextEdit, KEdit, etc., quel que soit votre éditeur favori), de commencer avec une fenêtre vide et de taper ceci:
(Si vous utilisez TextEdit sur Mac, n'oubliez pas de dire à TextEdit qu'il s'agit de texte simple; pour ceci, allez au menu Format et sélectionnez "Convertir au format Texte".)
La première ligne du fichier HTML ci-dessus dit au navigateur de quel type d'HTML il s'agit (DOCTYPE signifie DOCument TYPE). Dans ce cas, il s'agit de la version 4.01 d'HTML.
Les mots à l'intérieur de < et > sont nommés balises et comme vous pouvez le voir, le document est contenu à l'intérieur des balises et . Entre et se trouve la place pour des informations variées qui ne sont pas affichées à l'écran. A ce stade, il contient le titre du document, mais plus tard, nous y ajouterons la feuille de style CSS.
Le est l'emplacement du texte à proprement parler de notre document. En principe, tout ce qui s'y trouve sera affiché, à l'exception du texte contenu entre entre , qui sert de commentaire pour nous-même. Le navigateur ignorera ce texte.
Parmi les balises de l'exemple,
Il n'explique pas CSS en profondeur. Il explique comment créer un fichier HTML, un fichier CSS et comment les faire fonctionner ensemble. Après cela, vous pourrez lire d'autres tutoriels afin d'ajouter plus de caractéristiques à vos fichiers HTML et CSS. Ou bien vous pouvez utiliser un éditeur HTML ou CSS afin de mettre en place des sites complexes.
A la fin de ce tutoriel, vous aurez fait un fichier HTML qui ressemble à cela:
Page HTML résultante, couleurs et disposition effectuées avec CSS.
Notez que je ne prétends pas que c'est joli
Voici un exemple de section optionelle. Elles contiennent des explications supplémentaires du langage HTML etTML et du code CSS des exemples. L'icone "alerte!" qui les précède indique que la section contient des informations plus avancéees que le reste.
ETAPE 1: LE LANGAGE HTML
Pour ce tutoriel, je vous recommande d'utiliser des outils simples comme Blocnote (Windows), TextEdit (Mac) ou KEdit (KDE). Une fois que vous aurez intégré ces principes, vous pourrez facilementement utiliser des outils plus avancés, ou des logiciels commerciaux tels que Style Master, Dreamweaver ou GoLive. Cependant pour votre première feuille de style CSS, il vaut mieux que vous ne soyiez pas distrait par de nombreuses caractéristiques avancées.
N'utilisez pas un logiciel de traitement de texte, tels que Microsoft Word ou OpenOffice, car ils produisent des fichiers qu'un navigateur Web ne sait pas lire. Pour HTML et CSS, nous voulons de simples fichiers texte.
L'étape 1 est d'ouvrir votre éditeur de texte (Notepad, TextEdit, KEdit, etc., quel que soit votre éditeur favori), de commencer avec une fenêtre vide et de taper ceci:
- Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Ma première page avec du style</title>
</head>
<body>
<!-- Menu de navigation du site -->
<ul class="navbar">
<li><a href="index.html">Home page</a>
<li><a href="reflexions.html">Réflexions</a>
<li><a href="ville.html">Ma ville</a>
<li><a href="liens.html">Liens</a>
</ul>
<!-- Contenu principal -->
<h1>Ma première page avec du style</h1>
<p>Bienvenue sur ma page avec du style!
<p>Il lui manque des images, mais au moins, elle a du style. Et elle a desliens, même s'ils ne mènent nulle part...
…
<p>Je devrais étayer, mais je ne sais comment encore.
<!-- Signer et dater la page, c'est une question de politesse! -->
<address>Fait le 5 avril 2004<br>
par moi.</address>
</body>
</html>
(Si vous utilisez TextEdit sur Mac, n'oubliez pas de dire à TextEdit qu'il s'agit de texte simple; pour ceci, allez au menu Format et sélectionnez "Convertir au format Texte".)
La première ligne du fichier HTML ci-dessus dit au navigateur de quel type d'HTML il s'agit (DOCTYPE signifie DOCument TYPE). Dans ce cas, il s'agit de la version 4.01 d'HTML.
Les mots à l'intérieur de < et > sont nommés balises et comme vous pouvez le voir, le document est contenu à l'intérieur des balises et . Entre et se trouve la place pour des informations variées qui ne sont pas affichées à l'écran. A ce stade, il contient le titre du document, mais plus tard, nous y ajouterons la feuille de style CSS.
Le est l'emplacement du texte à proprement parler de notre document. En principe, tout ce qui s'y trouve sera affiché, à l'exception du texte contenu entre entre , qui sert de commentaire pour nous-même. Le navigateur ignorera ce texte.
Parmi les balises de l'exemple,
- introduit une "Liste non ordonnée", c'est à dire une liste dans laquelle les éléments ne sont pas numérotés. La balise
- est le début d'un "élément de liste ". Le et , ce que j'ai fait là, afin de rendre le texte un peu plus facile à lire. Mais vous pouvez les ajouter, si vous préférez.
- Code:
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }- Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Ma première page avec du style</title>
<link rel="stylesheet" href="monstyle.css">
</head>
<body>
Admettons qu'il s'agira d'une page d'un site Web contenant plusieurs pages similaires. Comme dans beaucoup de pages Web actuelles, celle-ci a un menu avec des liens vers d'autres pages de notre site hypothétique, un contenu unique ainsi qu'une signature.
Sélectionnez maintenant "Sauver-sous…" depuis votre menu Fichier, naviguez vers le répertoire/dossier où vous voulez sauver votre fichier (le Bureau est tout à fait convenable) et sauvez le fichier sous le nom "mapage.html". Ne fermez pas l'éditeur car nous en aurons encore besoin.
(Si vous utilisez TextEdit sur Mac OS X avant version 10.4, vous voyez une option pour ne pas ajouter l'extension .txt. Sélectionnez cette option, parce que "mapage.html" a déjà une extension. Les versions plus récentes de TextEdit remarquent l'extension .html automatiquement.)
Ensuite, ouvrez le fichier dans un navigateur. Vous pouvez faire cela comme suit: cherchez le fichier avec votre explorateur de fichiers (Explorateur Windows, Finder ou Konqueror) et cliquez ou double-cliquez sur le fichier "mapage.html". Il devrait s'ouvrir dans votre navigateur Web par défaut. (Si ce n'est pas le cas, ouvrez votre navigateur et cliquez-déplacez le fichier dans le navigateur.)
Comme vous pouvez le voir, la page est assez ennuyeuse…
ETAPE 2: AJOUTER DE LA COULEUR
Vous voyez probablement du texte noir sur un fond blanc, mais cela dépend de la façon dont le navigateur est configuré. Une manière simple de rendre la page plus stylée et d'y ajouter des couleurs. (Laissez votre navigateur ouvert, nous l'utiliserons à nouveau plus tard.)
Nous allons commencer avec une feuille de style intégrée dans le fichier HTML. Par la suite, nous nous mettrons le HTML et le CSS dans des fichiers séparés. Séparer les fichiers est une bonne chose car cela vous permet facilement d'utiliser la même feuille de style sur plusieurs fichiers HTML: il vous suffit d'écrire votre feuille de style une fois. Mais pour cette cette étape, nous écrirons tout dans notre seul fichier.
Nous devons ajouter un élément . Ils appartiennent au langage HTML, pas à CSS. Dans la nouvelle fenêtre d'édition, vous devriez maintenant avoir la feuille de style complète:
Revenez maintenant à la fenêtre contenant le code HTML. Supprimez tout depuis la balise et remplacez par l'élément comme suit :
Ceci indiquera au navigateur que la feuille de style se trouve dans le fichier nommé "monstyle.css" et puisqu'aucun répertoire n'est mentionné, le navigateur regardera dans le même répertoire que le fichier HTML.
Si vous sauvez votre fichier HTML et le rechargez dans votre navigateur, vous ne devriez voir aucun changement: la page a toujours le même style, mais celui-ci provient maintenant d'un fichier externe.
Le résultat final
L'étape suivante est d'enregistrer les deux fichiers mapage.html et monstyle.css sur votre site Web. (Probablement après les avoir modifié un peu au préalable…) Mais cela dépend entièment de votre fournisseur d'accès Internet.
Sebastien- Administrateur
- Messages : 27
Date d'inscription : 18/04/2010
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
|
|