La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Université Jean Monnet St Etienne A. Elkhyari Diapositive N°1 Outils logiciels Abdallah ELKHYARI 2 ème année de Licence.

Présentations similaires


Présentation au sujet: "Université Jean Monnet St Etienne A. Elkhyari Diapositive N°1 Outils logiciels Abdallah ELKHYARI 2 ème année de Licence."— Transcription de la présentation:

1 Université Jean Monnet St Etienne A. Elkhyari Diapositive N°1 Outils logiciels Abdallah ELKHYARI 2 ème année de Licence Biologie – Biochimie - Chimie

2 Université Jean Monnet St Etienne A. Elkhyari Diapositive N°2 Le langage HTML

3 Université Jean Monnet St Etienne A. Elkhyari Diapositive N°3 Quest ce que le langage HTML ? Le HTML (Hyper Text Markup Langage) est un langage utilisé de façon universelle pour une distribution globale dinformations Il sagit dune langue que tous les ordinateurs en théorie peuvent comprendre Le HTML est un langage utilisé sur le World Wide Web Le HTML permet de : publier des documents en ligne contenant des En-tête, du texte, des tableaux, des listes … retrouver des informations en un click de souris grâce aux liens Hypertexte concevoir des formulaires permettant de mener à bien des recherches, effectuer des réservations, commander des produits … Il existe des éditeurs HTML qui permettent de générer automatiquement des pages HTML grâce à une interface graphique et sans quil soit nécessaire de connaître le langage HTML Il savère que ces logiciels ne sont pas toujours à la hauteur et il vaut mieux connaître le langage pour intervenir sur le code HTML

4 Université Jean Monnet St Etienne A. Elkhyari Diapositive N°4 Outils nécessaires pour HTML Un éditeur de texte simple : Bloc-notes ou Notpad de Windows Un browser : Netscape Navigator (payant) : Microsoft Explorer (gratuit) : Les CD de certains mensuels informatiques Vous navez pas besoin dêtre connecté pour écrire et voir vos pages HTML davoir le dernier éditeur HTML

5 Université Jean Monnet St Etienne A. Elkhyari Diapositive N°5 La structure dun document HTML HTML est un langage balise il permet de décrire un contenu par lintermédiaire de balises ces balises encadrent le contenu dun objet et permettent de déterminer lendroit exact où commence et où se termine lobjet Ce texte sera en gras Ce texte apparaît en italique Ce texte apparaît en gras et en italique Toute balise débute par le caractère et se termine par

6 Université Jean Monnet St Etienne A. Elkhyari Diapositive N°6 Lentête dun document HTML La balise tout document HTML débute par la balise et se termine par La balise cette balise constitue lentête du document elle va contenir une multitude dinformation : le titre de la page, style... Un document commencera par le contenu suivant : … contenu de lentête … reste du document Noter : il est équivalent décrire,,, etc.

7 Université Jean Monnet St Etienne A. Elkhyari Diapositive N°7 Lentête dun document HTML La balise elle définit le titre du document cette balise est obligatoire et doit toujours être contenue dans lentête du document (entre et ) elle est très utile aux moteurs de recherche pour connaître le titre de la page La page Web des étudiants en Licence Bio … reste du document

8 Université Jean Monnet St Etienne A. Elkhyari Diapositive N°8 Lentête dun document HTML La balise cette balise sert à donner des informations précises sur le document elle est particulièrement utile pour faire reconnaître votre page Web par les moteurs de recherche exemple : La page Web des étudiants en Licence Bio … reste du document La balise META na pas besoin dêtre fermée On notera que la balise META contient des attributs (name, content, …)

9 Université Jean Monnet St Etienne A. Elkhyari Diapositive N°9 Le corps dun document HTML La balise cest le corps du document HTML il contient tous les éléments affichés par le navigateur la balise vient juste après lentête dun document La page Web des étudiants en Licence Bio … Corps du document La balise BODY peut contenir des attributs pour définir les couleurs de la page

10 Université Jean Monnet St Etienne A. Elkhyari Diapositive N°10 Le corps dun document HTML La balise BODY peut contenir des attributs pour définir les couleurs de la page Couleur des liens déjà visitésVlink Couleur du lien actifAlink Couleur des liensLink Couleur du texteText Image de fond de pageBackground Couleur de fond de pageBgcolor SignificationAttributs La définition des couleur se fait soit en les appelons par leurs nom : black, white, yellow … ou encore en donnant leur code RBV en hexadécimal précédé du caractère # : bleu = #0000FFvert = #00FF00 blanc = #FFFFFFviolet = #8000FF rouge = #FF0000jaune = #FFFF00 gris clair = #C0C0C0noir = #000000

11 Université Jean Monnet St Etienne A. Elkhyari Diapositive N°11 Le texte Tout document HTML contiendra en majorité du texte Voici quelques balises élémentaires : Début et fin de zone soulignée … Centrer … Ne pas afficher Aller à la ligne Début et fin de zone en couleur … Début et fin de zone avec cette taille … Début et fin de zone en italique … Début et fin de zone en gras … Exemple : Texte en rouge Texte centré

12 Université Jean Monnet St Etienne A. Elkhyari Diapositive N°12 Les règles de syntaxe HTML Les accents lors de la rédaction dune page Web, il ne faut pas écrire les accents directement dans le code Voici la page Web des étudiants en Biologie âa accent circonflexe äa trema ( ä ) ëe trema ( ë ) çc cédille ( ç ) àa accent grave áa accent aigu êe accent circonflexe èe accent grave ée accent aigu Code HTMLLettres

13 Université Jean Monnet St Etienne A. Elkhyari Diapositive N°13 Les éléments HTML Le titrage il est possible de créer des titres afin de faciliter la lecture dun document et de mettre en valeur certaines parties dune page Web il existe 6 niveaux de titrage : H1, H2, H3, H4, H5 et H6 La page Web des étudiants en Licence Bio Le titre La section La sous-section

14 Université Jean Monnet St Etienne A. Elkhyari Diapositive N°14 Les éléments HTML Les listes : listes non-ordonnées et listes ordonnées … afficher le texte sous forme dune liste non-ordonnée … affiche le texte sous forme dune liste ordonnée un élément de la liste Les mois du printemps Avril Mai Juin Les mois dautomne Octobre Novembre Décembre

15 Université Jean Monnet St Etienne A. Elkhyari Diapositive N°15 Les éléments HTML Paragraphes utile pour formater le texte de paragraphes il est possible dutiliser lattribut align pour centrer ou justifier le texte les quatre valeurs possibles pour align sont : left, right, center et justify La page Web des étudiants en Licence Bio le paragraphe suivant sera justifié au centre alors que celui-ci sera doublement justifié

16 Université Jean Monnet St Etienne A. Elkhyari Diapositive N°16 Les tableaux La balise TABLE les tableaux sont très utilisés en HTML car ils permettent une mise en page simple des images et du texte les cellules des tableaux peuvent être regroupées et elles peuvent contenir des listes, des paragraphes, des formulaires, des images, du texte, ou dautres tableaux La balise TABLE débute un tableau, et accueillir les attributs suivants : SignificationAttributSignificationAttribut Détermine le style qui doit être appliqué au tableau classContrôle la largeur de la bordure Border Donne un identifiant au tableau IdCouleur de fond des cellulesBgcolor Spécifie quels côtés de la bordure sont visibles FrameSpécifie le nombre de colonnes du tableau Cols Marge intérieure des cellulesCellpaddingDétermine la largeur du tableau (en % ou en pixels) Width Largeur entre les cellulesCellspacingSpécifie lalignement du tableau dans la page Align

17 Université Jean Monnet St Etienne A. Elkhyari Diapositive N°17 Les tableaux Lignes dun tableau : TR chaque ligne dun tableau est considérée comme un ensemble accueillant les cellules le tableau suivant contient 3 lignes : … Contenu de la ligne 1 … Contenu de la ligne 2 … Contenu de la ligne 3 … Reste du tableau Colonnes dun tableau : TD au sein des lignes, il est possible de définir une ou plusieurs cellules qui peuvent sétendre sur plusieurs lignes ou plusieurs colonnes volume 80% poids 35% 35%poids 80%volume

18 Université Jean Monnet St Etienne A. Elkhyari Diapositive N°18 Les images il est possible dinsérer des images dans un document HTML il est aussi possible de leur donner des caractéristiques : images simples images réactives aux événements de la souris images à zones réactives (images dont les zones réagissent à la souris et mènent à des liens différents)

19 Université Jean Monnet St Etienne A. Elkhyari Diapositive N°19 Images simples La balise IMG permet de placer une image sur le document Contrôle la largeur de la bordure (0 par défaut borderHauteur de limage (facultatif) height Alignement de limagealignLargeur de limage (facultatif) width Texte alternatif (texte saffichant en cas de problème avec limage altURL de limage à inclure src SignificationAttributSignificationAttribut

20 Université Jean Monnet St Etienne A. Elkhyari Diapositive N°20 Images réactives aux événements de la souris ce sont des images qui peuvent réagir et pointer vers un lien il suffit de coupler une balise A avec une balise IMG

21 Université Jean Monnet St Etienne A. Elkhyari Diapositive N°21 Les hyperliens ils représentent tout lintérêt du langage HTML ils sont la garantie de pouvoir se déplacer sur le World Wide Web et de retrouver des informations rapidement un lien pointe sur une autre page ou à un endroit précis dune page Page daccueil de luniversité St Etienne lattribut href désigne ladresse Web de destination du lien le texte contenu dans la balise (ici Page daccueil de luniversité St Etienne) apparaîtra donc comme un lien : texte souligné en bleu


Télécharger ppt "Université Jean Monnet St Etienne A. Elkhyari Diapositive N°1 Outils logiciels Abdallah ELKHYARI 2 ème année de Licence."

Présentations similaires


Annonces Google