FORMATION INFORMATIQUE
NB : Au lancement de la page, le diaporama démarre.
Vous pouvez aussi cliquer sur le triangle à droite de la photo pour faire défiler le diaporama 😲
L’INFORMATIQUE EXPLIQUÉ !
Le mot INFORMATIQUE est la contraction de deux mots : INFORMATION et AUTOMATIQUE.
C’est la Science du traitement automatique et rationnel de l'information en tant que support des connaissances et des communications. C’est de l’information servie sur un support numérique et stockée sur des supports de sauvegarde (disque dur, CD, DVD, clé USB, etc.), mettant en œuvre des matériels (ordinateurs, écran, imprimante, etc.) et des logiciels (programmes créés par des développeurs pour des tâches et des besoins différents (édition, science, culture, comptabilité, arithmétique, astronomie, mécanique, dessin, etc.).
Une technologie en perpétuelle évolution au service de l’homme. Honnêtement, il faut avoir de bons mollets pour suivre la cadence !
NET, WEB & XHTML
Qui n’a pas sursauté d’horreur à la vue d’une page web affichée en « code source » ? C’est du charabia ! Un mélange de chiffres et de lettres alignés de façon anarchique !
En voici un exemple. Il s’agit de la page d’accueil du journal « le Parisien ». Elle fait partie du diaporama ci-dessus. Vous pouvez tester d’autres sites.
Pour afficher le code source d’un site web :
1. Lancer le site en saisissant son URL dans le navigateur (l’adresse du type : http://www.leparisien.fr )
2. La page d’accueil s’affiche à l’écran. Cliquez en haut de la page sur le bouton Affichage / Cliquez ensuite sur Afficher le code source.
3. Une autre façon d’afficher le code source est de cliquer sur la page avec le bouton droit de la souris. Dans le menu contextuel qui s’affiche, cliquez sur Code source.
4. Voilà. Jetez un coup d’œil furtif. Ne vous attardez pas trop afin d’éviter le mal de tête !
5. Fermer la page « sources » et retournez sur votre site.
Le but de cette rubrique « Formation informatique » est d’aider les personnes désireuses d’apprendre le langage de développement XHTML et les CSS afin de créer des pages Web et bientôt des sites. Avec un volet Infographie réservée aux techniques de retouche image dans ses différents formats et modes (RVB, CMJN, Jpeg, Gif, Png, etc.).
CSS => Les feuilles de style, également appelées CSS (Cascading Style Sheets) sont au Web ce que les styles sont aux traitements de texte.
Les feuilles de style sont définies de deux façons : internes et externes.
Elles sont associées à des balises HTML afin de définir la façon dont le navigateur interprétera et présentera les éléments d’une page Web : formatage, fond de page, tableau, formulaire, listes, etc.
L’exemple d’un dossier de 100 pages avec une centaine d’intertitres, est le plus parlant.
Prenons un Style formaté de la façon suivante :
Un texte de taille 12 en Helvetica, en italique, de couleur marron et un intertitre de taille 14, gras, de couleur noire, et un renforcement gauche de 20 pixels...
Vous appliquez ce style sur 100 titres. Malheureusement, votre chef vous demande, à la dernière minute, de tout reprendre suite à un grand changement de mise en forme.
Grâce à la feuille de style, cela ne vous prendre qu'une petite minute. Et votre page changera de visage...
Prenons l’exemple de la Constitution tunisienne et ses 1409 articles.
Le document HTML et la Feuille de style interne (CSS) :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Ma Constitution </title>
<style type="text/css">
h1 {
font-size: 20pt;
font-family: Arial;
color: #0000FF;
font-weight: bold;
text-align: left;
}
p {
font-size: 12pt;
font-family: Arial;
color: #000000;
}
</style>
</head>
<body>
<p><h1> La Constitution tunisienne </h1></p>
<p><h2><strong>Présentation de la Constitution tunisienne adoptée en 2014 !</strong></h2></p>
<p><em> Signé Webmaster.</ em></p>
</body>
</html>
A suivre...
Ce support électronique traitera aussi de la Mise en page (PAO). L’objectif est de transmettre le savoir qu’on a acquis. La formation sera articulée sur deux niveaux 1 & 2 : Web, langage, Infographie, PAO, etc.
Je désire partager mon expérience en tant que Formateur informatique de métier et ancien journaliste avec vous.
Et maintenant, chaussez vos lunettes et allumez vos ordinateurs.
Votre première page web comportera un texte court.
Pour commencer, vous avez besoin d’un logiciel de traitement de texte (Bloc-notes ou WordPad, si vous travaillez sur un PC) ou (Textedit, si c’est un Mac). Votre navigateur (Internet Explorer, Safari…).
Lancez le logiciel. Saisissez ce qui suit, en respectant la présentation, avec un retour ligne à la fin de chaque paragraphe.
Très important : Un retour ligne dans une page HTML est matérialisé par la balise <br /> et un retour paragraphe par la balise <p>*.
Il s’agit de la structure d’une page web, dans toute sa simplicité. L'exemple 1 est réalisé dans une version HTML 5 simplifiée.
* On détaillera plus loin le rôle des balises ouvrantes et des balises fermantes => exemple : <p> et </p>
Exemple 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Premier essai </title>
</head>
<body>
<p><h1> Commencer avec HTML </h1></p>
<p><h2><strong> C’est ma première page web, toute maigre !</strong></h2></p>
<p><em> Signé Webmaster.</ em></p>
</body>
</html>
L'étape suivante consiste à enregistrer la page au format HTML.
Fichier/Enregistrer sous
Choisir, dans Type, le format .txt
Donner un nom à votre fichier. Il doit se terminer par l'extension .html (par exemple: monsite.html). Enregistrez-le dans un répertoire réservé à vos pages du site.
Dans ce même répertoire, créez un sous-répertoire, que vous nommerez "images". De la même manière, créez un sous-répertoire "Style" (pour feuilles de style) nécessaires pour la mise en forme du texte dans votre page.
Mais, pour une meilleure présentation, sous Windows, je vous recommande chaudement Notepad. Il permet de colorer le code XHTML et CSS, et un repérage plus facile dans votre code source.
Exemple 2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title> Premier essai </title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<p><h1>Commencer avec HTML<br>
Dé couvrez XHTML 1.1 et CSS 2</h1></p>
<h2>C’est ma première page web, toute maigre !</h2>
<p> <em>Signé Webmaster.</em></p>
</body>
</html>
Pour ce deuxième test, créer une deuxième page en suivant l'exemple décrit ci-dessus. Choisir, dans Type, le format .txt
Donner un nom à votre fichier. Il doit se terminer par l'extension .html (par exemple : monsite2.html). Enregistrez-le dans un répertoire réservé à vos pages du site.
La structure des deux pages est différente, mais le contenu est le même. Il s'agit de comparer. Nous détaillerons ces exemples dans un prochain tutoriel. Merci.
Cette rubrique servira de supports pour des exercices de premier et deuxième niveaux. N'hésitez pas à cliquer sur les photos qui défilent pour voir en détail certains points. Mais voyons le contenu :
1) Programmer en HTML, XHTML, créer des feuilles de styles CSS, etc. ;
2) Rubrique Infographie (retouche image, dessin vectoriel...) ;
3) PAO - Micro-édition ;
4) Bureautique avec rappels et exercices pour Word, Excel, Access.
5) Nouveauté => SCRATCH : Langage informatique de programmation et de codage.
Le rythme dépendra de ma disponibilité et de la demande.
Ahmed Naoui
J'ai le plaisir de vous présenter Scratch, logiciel d'apprentissage de la programmation et du codage informatique destiné aux écoliers désireux d'apprendre à coder et à créer des programmes.
Voici quelques projets créés sur le logiciel Scratch.
D'autres projets sont en cours de réalisation.
Visitez le site-Panorama : TUNISIA HISTORY
La Tunisie dans toute sa splendeur
Bonjour mes chers compatriotes
Me voilà de retour. Désolé pour cette absence. En multipliant les activités d'enseignant en informatique, ou journalistiques en tant que webmaster et diversifié mes champs d'action, j'ai dû parfois faire des choix selon les événements ou les demandes auxquelles j'ai été amené à traiter. Tant de facteurs qui m'ont éloigné de ce support.
Je reviens à la charge avec de nouveaux projets et de nouveaux défis. L'informatique et le web seront au cœur de cette rubrique, avec plus de supports et d'exemples concrets. Mais le défi sera de s'adresser aux jeunes, aux enfants qui débutent dans la programmation et le codage. Je consacrerai des articles entiers avec un nouveau programme : SCRATCH.
Ce nouveau langage de programmation s'est invité dans les écoles primaires et les lycées au même titre que les mathématiques. Son slogan est : Imagine - Programme - Partage. En effet, une fois réalisé, le projet est publié - sous forme de partage - sur le Web.
Avec Scratch, vous devenez créateur, artiste, musicien et même "programmeur" en utilisant des simulations numériques! Que du bonheur ! Vous avez 8 ans, alors foncez ! Un monde fascinant vous ouvre les bras...
Dans cette rubrique, je vous réserve quelques exemples concrets qui vous aideront à entrer dans le monde magique de la programmation.
C'est une nouvelle discipline enseignée dans l'Education nationale en France et bientôt dans toutes les écoles dans le monde.
J'ai déjà dispensé des cours à des jeunes... Ils ont montré beaucoup d'envie et d'intérêt de découvrir cette nouvelle discipline.
"C'est l'histoire de Scratchy, un chat venu de la planète Chaton... etc."
A bientôt chers compatriotes.
A SUIVRE...
Carla 03.02.2013 20:10
Très belle page. Bravo au webmaster !
Commentaires
01.03 | 10:56
Merci pour vos encouragements. Le but de ce site est d'analyser, de ...
28.02 | 18:27
je suis content de parcourir ce travail magnifique qui a demandé des efforts c...
03.02 | 20:10
Très belle page. Bravo au webmaster !
03.02 | 19:40
Merci Ahmed pour ce magnifique site. Je l'ai trouvé dynamique et riche en...
