APPRENNEZ A CREER DES SITES INTERNET
Le portail du HTML et du CSS
Sur cette partie, nous allons apprendre deux langages importants qui nous permettront de créer notre site web.
Certes si vous vous trouvez sur cette page, ce que vous avez déjà entendu parler du HTML, ou du CSS, ou des deux ou bien vous voulez coder vous-même votre site web.
Le cas où vous n’avez jamais entendu du parler du HTML ou du CSS, c’est pas du tout grave car ce que nous allons essayer de faire ici, c’est d’expliquer leurs significations, leurs utilités et la manière de les utiliser.
Le HTML et le CSS sont deux langages informatiques très important dans le domaine du web. Oui tous les sites que nous visitons contiennent du HTML. Ces deux langages sont des langages faciles à manier car ils ne sont pas des langages de programmation. le HTML est simplement un langage de balisage.
Le HTML (HyperText Markup Language) est le langage conçu pour la représentation des pages web. Il sert à écrire de l’hypertexte. Il utilise des balises de formatage qui sert à indiquer la façon dont la page doit être présentée. Il permet aussi d’insérer du contenu multimédia comme les images, le son…
Le CSS (Cascading Style Sheets) est le langage qui détermine la manière dont le contenu de la page web doit être présenté. C'est-à-dire il doit indiquer au navigateur que tel contenu sera en tel couleur, en gras(…) et d’indiquer aussi au navigateur la mise en page utilisée. Il est à noter que ce que le CSS est capable de faire, parfois le HTML peut aussi le faire.
Alors pourquoi apprendre aussi le CSS ? La réponse, vous la saurez surement au long de ce cours. Tout ce que j’ai à vous dire, ce que le CSS est créé pour faciliter la vie d’un codeur des pages web.
Sur cette partie nous allons voir les chapitres ci-dessous :
Comme Je vous ai dit, ici nous allons voir comment créer un site web avec les langages Html/CSS. Et comme vous le savez, pour faire une chose, il faut des outils. Eh bien, cette partie est là pour vous parler des outils que nous avons besoin pour la création de notre site.
Et ce payant ces outils ?
Pas forcement. Puisque nous allons apprendre à coder un site web, nous n’avons pas besoin de payer aucun centime. Mais bon vous pouvez trouvez des outils payant.
Alors quels outils allons-nous utiliser ?
Il faut savoir que la création d’un site web est beaucoup plus facile aujourd’hui grâce à des logiciels de type WYSIWYG comme NVU, Kompozer , Toweb, Dreamweaver, IZispot,Web Creator, Web Acappella, Xwebdesignor etc.
Ces logiciels nous permettent de créer nos sites web sans aucune connaissance de langage web. Mais bon, vous savez qu’on est là pour le but d’apprendre le HTML/CSS.
Oui on est là pour apprendre, donc le logiciel que nous allons utiliser s’agit d’un éditeur texte : bloc-notes pour les utilisateurs de Windows, nano pour les utilisateurs d’Ubuntu.
Bloc-notes c’est pour créer des sites web ? On dirait que c’est difficile. Hein ?
Non ce n’est pas difficile, vous y arriverez sans problème, je vous l’assure. Moi mon premier site je l’ai créé avec bloc-notes.
En réalité bloc-notes peut faire l’affaire mais ce n’est pas le logiciel que je vous recommande. Cette fois ci je vous recommande un autre éditeur de texte appelé Notepad++. Si ça vous chante, vous pouvez utiliser bloc-notes, mais Notepad++ est beaucoup plus mieux dans la mesure où il colore le code source ; ce qui nous permettra d’avoir un code bien lisible et de nous trouver si vite en cas d’erreur. Il est à noter que www.samomoi.com est codé sous Notepad++.
Voici une capture de Notepad++ :
Si vous voulez savoir plus sur Notepad++, cliquez ici.
IL faut savoir que pour visualiser nos pages web, il nous faut un navigateur web. Les navigateurs web sont nombreux et gratuits. On peut citer par exemple Internet explorer, Mozilla Firefox, Safari, Google Chrome, Opera.
Comme on l’avait expliqué précédemment, le html est un langage de balisage, c'est-à-dire un langages qui utilise des balises.
Mais c’est quoi une balise ?
Une balise ? Eh bien regardes :
est appelé balise X.
est appelé balise Y.
En général, quand on fait du html, les balises vont de paire. C'est-à-dire une balise s’ouvre et se ferme.
Comme par exemple : le contenu .
Ici on voit très bien que le contenu se trouve au milieu de deux balises samomoi. La première balise est la balise ouverte et la dernière, la balise fermée. Il ne faut surtout pas oublier le slash (/) qui se trouve sur la balise fermée. C’est ce slash qui nous dit que la balise est enfin fermée.
Si la majorité des éléments vont avec une paire des balises, il y a certains éléments qui ne vont qu’avec une seule balise. Ces éléments là, on les appelle des éléments orphelins.
Pourquoi orphelins ? Ils ont perdu leurs parents ?
Non pas du tout. C’est juste qu’ils aillent tous seuls. Donc ils sont isolés.
Prenons l’exemple de l’élément Mayotte. L’élément Mayotte est orphelin. Cela ne dis pas que Mayotte a perdu ses parents, c’est juste qu’elle est isolé de ses sœurs.
Dans ce cas, pour présenter la balise Mayotte, on la présentera comme ça ou comme ça . Le deuxième cas est beaucoup plus recommandé en XHTML et il faut bien voir là ou se trouve le slash (/) dans ce cas.
la balise samomoi et la balise Mayotte ne sont pas des balises qui existent en html. Toutes les balises qu’on vous a parlées ici, on les a utilisées juste pour une bonne illustration.
La structure générale d’un document html et votre première page web
Précédemment nous avons vu la notion de la balise html. Ici nous allons commencer à faire des choses concrètes. Nous allons utiliser des balises html pour créer notre première page web. Vous trouvez ça génial, n’est ce pas ?
Bon avant de commencer de saisir des tas des lignes de code, commençons par voir la structure générale d’un document.
On a bien dit que pour créer une page web, nous avons besoin d’un éditeur de texte, éditeur de code. Il faut savoir qu’il ne s’agit pas de faire un copier coller de Word sur notepad++ pour avoir une page web. Une page web à une structure, des normes à respecter. Ce qui fait qu’ici nous allons voir la structure général et la structure simplifiée d’un document html.
- >
- <html>
- <head>
- <meta content="text/html; charset=ISO-8859-1"
- http-equiv="content-type">
- <title>title>
- head>
- <body>
- body>
- html>
- <html>
- <head>
- <title>title>
- head>
- <body>
- body>
- html>
Il faut savoir que ces deux structures sont exactes. Mais de préférence, il faut utiliser la première. Maintenant allons voir ce que signifient les balises que nous voyons sur ces structures.
La balise !DOCTYPE est là pour indiquer au navigateur web, le type de document utilisé. Dans notre cas il s’agit d’un document HTML version 4.01 qui doit respecter les normes W3C.
La balise montre que c’est qui est au milieu c’est du html.
La balise représente l’entête de la page. Au milieu de la balise head, nous avons la balise meta, et dans la balise meta, nous avons le type MIME qui nous montre que le type du contenu est text/html. Notez que pour la balise meta, nous en parlerons plus quand nous parlerons du référencement. Dans le head il y aussi la balise qui sert à indiquer le titre de la page. Il faut noter que tous ceux qui seront dans la balise head seront utilisés à titre indicatif. Ils ne seront pas visibles au niveau du corps de la page.
La balise indique le corps du document. Tous les éléments qui seront placés dans cette balise seront le contenu de la page web.
Il faut bien noter que dans nos prochaines cours, nous n’allons pas répéter à tout moment la structure d’une page web.
Maintenant il est temps de mettre en pratique ce que nous avons vu. Nous allons tout de suite créer notre première page web.
- >
- <html>
- <head>
- <meta content="text/html; charset=ISO-8859-1"
- http-equiv="content-type">
- <title>le titre de page webtitle>
- head>
- <body>
- <p> Les Comores forment un archipel de 4 iles.<br> Est ce que toi tu connais les Comores ?p>
- body>
- html>
Maintenant copier le code ci-dessus dans bloc-notes ou notepad++, puis enregistrer. Attention il ne faut pas oublier d’enregistrer en tant que document html, c'est-à-dire quand on vous demande de saisir le nom du fichier, vous mettez un nom de type "nomduficher.html" ou "nomduficher.htm" sinon vous vous trouverez avec un document texte au lieu d’une page web.
Ici la balise
montre qu’il s’agit d’un paragraphe. La balise
montre qu’il faut aller à la ligne.
Défilement du texte
Le défilé n’est pas seulement réservé aux militaires, même un contenu multimédia (texte, images…) peut défiler.
Ici nous allons voir comment faire défiler un texte. Cela est valable pour n’importe quel contenu multimédia mais puisqu’on n’a pas fait grand chose, on prend le cas du texte.
Un texte qui défile c’est bon, n’est ce pas ? De toute façon si le texte décide de jouer le dur et refuser de défiler, il finira par être obèse. Donc il a intérêt à faire du sport.
Pour faire défiler le texte, on va utiliser la balise marquee.
Exemple :
- <marquee> Eh ! Regardez-moi, je suis un texte qui défilemarquee>
Si vous regardez très bien le texte "Eh ! Regardez-moi, je suis un texte qui défile" défile de Droite à gauche.
Si si je vois mais n’y a-t-il pas un moyen de faire défiler le texte de l’autre sens ?
Bien sûr qu’il en a. La balise marquee a des options qui nous permettra de faire défiler du contenu multimédia de Dakar à Moroni, de Moroni à Washington, de Washington à Paris, bref de faire défiler le texte du haut en bas, du bas en haut, de gauche à droite et de droite à gauche.
Pour dire le contenu de défiler vers une telle direction, on va utiliser l’attribut direction avec ses différentes options.
Les différentes options:
Right : vers la droite
left : vers la gauche
up : vers en haut
down : vers en bas
En reprenant le même exemple, si nous voulons défiler le texte de gauche à droite le code deviendra :
code:- <marquee direction="right"> Eh! Je suis un texte qui défile vers à droitemarquee>
Maintenant si nous voulons défiler le texte de droite à gauche le code deviendra :
code:- <marquee direction="left"> Eh! Je suis un texte qui défile vers à gauchemarquee>
Maintenant si nous voulons défiler le texte de bas en haut le code deviendra :
code:- <marquee direction="up"> Eh! Je suis un texte qui défile de bas en hautmarquee>
Maintenant si nous voulons défiler le texte de haut en bas, le code deviendra :
code:- <marquee direction="down"> Eh! Je suis un texte qui défile de haut en basmarquee>
Maintenant que vous avez vu qu’il est possible de faire défiler du contenu multimédia dans différentes directions, il suffit que tu te défiles toi-même du bas vers la haut, et tu te trouveras dans la lune. Ah oui cette balise est capable de te faire voyager vers n’importe quelle direction.
Les listes à puce
Sur ce cours nous allons voir comment insérer une liste à puce dans une page. Si vous voulez créer un site web, il y a une forte chance que vous ayez besoin d’insérer une liste à puce dans au moins une de vos pages.
Mais est ce que vous savez ce que c’est une puce ?
Oui je sais. J’en ai une d’ailleurs.
Oh !oh ! On ne parle pas d’une puce électronique ou d’une petite chérie. On parle d’une puce puce.
C’est quoi une puce puce ?
MDR, pas la peine de doubler le mot puce. C’est juste puce tout court. Mais bon regardes.
Bref maintenant vous savez ce que c'est une puce.
Pour insérer une puce, on utilise la balise li.
Par exemple si on veut écrire :
- samomoi
- samomoi
Bon vous savez qu’on n’est pas là pour insérer une puce, mais une liste comportant plusieurs puces. Nous allons voir deux types de liste à puce: Les listes non ordonnées et les listes ordonnées
Une liste à puce non ordonnée est une liste à puce sans numérotation.
Exemple :- Moroni
- Dakar
- Nkourani Sima
- Abidjan
- Bamako
- Kinshasa
Pour insérer une liste à puce non ordonnée, on met les balises li à l’intérieur de .
Donc pour l’exemple ci-haut, le code source sera :
- <ul>
- <li>Moroni li>
- <li>Dakar li>
- <li>Nkourani Sima li>
- <li> Abidjanli>
- <li>Bamako li>
- <li>Kinshasa li>
- ul>
Une liste à puce ordonnée est une liste à puce numérotée.
Par exemple :- Tunisie
- Algérie
- Maroc
- Cameroun
- Comores
- Congo
- RDC
Pour insérer une liste à puce ordonnée, on met les balises li à l’intérieur de .
En prenant l’exemple ci-haut, le code source sera :
- <ol>
- <li>Tunisieli>
- <li>Algérieli>
- <li>Maroc li>
- <li> Camerounli>
- <li>Comoresli>
- <li>Congo li>
- <li>RDC li>
- ol>
On s’arrête là pour ce cours, si vous avez une petite question rendez vous sur le forum.
Pour plus des cours allez sur le site samomoi.com
